.component_dashboard{
    .alert { margin-top: -15px; }
    .box-container {
        display: flex;
        flex-wrap: wrap;
        margin: -5px -5px 20px -5px;
        .box-item{
            position: relative;
            width: 20%;
            @media (max-width: 1350px){width: 25%;}
            @media (max-width: 900px){width: 33.33%;}
            @media (max-width: 750px){width: 50%;}
            > div {
                box-shadow: 2px 2px 10px rgba(0,0,0,0.25);
                margin: 3px;
                padding: 30px 0;
                @media (max-width: 900px){ padding: 25px 0; }
                @media (max-width: 750px){ padding: 20px 0; }
                text-align: center;
                color: white;
                text-shadow: 0px 0px 1px var(--color);
                font-size: 1.1em;
                text-transform: uppercase;
                border-radius: 2px;
                background: var(--light);
                
                > span{ display: none; }                
                &:hover > span{
                    display: block;
                    cursor: pointer;
                    position: absolute;
                    top: 0px;
                    right: 0px;
                    left: 0;
                    bottom: 0;
                    font-size: 2.3rem;
                    font-family: monospace;
                    line-height: 25px;
                    color: var(--color);
                    text-shadow: none;
                    background: var(--emphasis-primary);
                    padding: 18px 0;
                    @media (max-width: 750px){ padding: 8px 0; }
                    margin: 6px;
                    opacity: 0.95;
                    .icon{
                        background: var(--primary);
                        border-radius: 50%;
                        width: 40px;
                        height: 40px;
                        display: inline-block;
                        line-height: 40px;
                        opacity: 0.6;
                        color: white;
                        .component_icon{
                            padding: 7px;
                            width: 25px;
                            height: 25px;
                        }
                    }
                }
            }
            &.active > div {
                background: var(--primary);
                transition: background 0.1s;
            }
            &.pointer{
                cursor: pointer;
            }
            &.no-select{
                user-select: none;
            }
        }
    }

    form{
        > div{
            position: relative;
            > .icons{
                position: absolute;
                border-radius: 50%;
                padding: 10px;
                background: var(--emphasis-primary);
                cursor: pointer;
                right: -15px;
                top: -5px;
                box-shadow: rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px, rgba(0, 0, 0, 0.2) 0px 2px 4px -1px;
                .component_icon{
                    height: 20px;
                }
            }
        }
    }
}