/* Configurações gerais */
#dashboard {
    background: var(--background2);
    height: 100%;
}

    #dashboard .col {
        height: 100%;
    }

/* Configuração do header */

header {
    position: absolute;
    display: block;
    width: 94%;
    height: 90px;
    margin-left: 6%;
    background: var(--white);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.200);
}

    header .user {
        display: flex;
        float: right;
        margin-right: 2em;
        margin-top: 13px;
    }

        header .user img {
            width: 60px;
            border-radius: 50%;
        }

            header .user .user-info {
                display: block;
                align-self: center;
                margin-left: 0.8em;
            }

                header .user .user-info h6{
                    font-family: font-regular, Arial, Helvetica, sans-serif;
                    font-size: 18px;
                    color: var(--black);
                }

                header .user .user-info p{
                    font-family: font-medium, Arial, Helvetica, sans-serif;
                    font-size: 14px;
                    color: var(--black);
                    color: var(--blue);
                }


/* Configuração da barra de navegação principal */
.navbar {
    background: var(--blue);
    height: 100%;
}

    .navbar img {
        display: block;
        width: 70px;
        margin-left: auto;
        margin-right: auto;
        padding: 1em 0;
    }

.navbar-menu {
    position: relative;
    top: 20%;
}

    .navbar-menu .navbar-item-select {
        background: var(--blueDark);
    }

    .navbar-menu a .navbar-item{
        border-top: 0.3px solid rgba(255, 255, 255, 0.500);
        border-bottom: 0.3px solid rgba(255, 255, 255, 0.500);
        padding: 1.1em 0;
        transition: ease-in 0.2s;
    }

    .navbar-menu a .navbar-item:hover {
        background: var(--blueDark);
        filter: opacity(50%);
        transition: ease-out 0.3s;
    }

        .navbar-menu a {
            color: var(--white);
            text-decoration: none;
            text-align: center;
        }

            .navbar-menu a .navbar-item i {
                font-size: 35px;
                margin-bottom: 9px;
            }

            .navbar-menu a .navbar-item h6 {
                font-family: font-light, Arial, Helvetica, sans-serif;
                font-size: 13px;
            }

/* Configuração da barra de navegação secundária */

.subbar {
    background: var(--background1);
    height: 100%;
    box-shadow: 1px 0 5px rgba(0, 0, 0, 0.200);
}

.subbar-menu {
    position: relative;
    top: 30%;
    padding-left: 2em;
}

    .subbar-menu h5 {
        font-family: font-medium, Arial, Helvetica, sans-serif;
        color: var(--black);
        font-size: 20px;
        padding-bottom: 2em;
    }

        .subbar-menu .subbar-item {
            margin-top: 1.5em;
        }

            .subbar-menu .subbar-item a {
                font-family: font-semibold, Arial, Helvetica, sans-serif;
                color: var(--black);
                font-size: 17px;
                text-decoration: none;
                transition: ease-out 0.2s;
            }

            .subbar-menu .subbar-item a:hover{
                color: var(--blue);
                transition: ease-in 0.2s;
            }

            .subbar-menu .subbar-item-select a{
                color: var(--blue);
            }

            .urgent-number {
                font-family: font-bold, Arial, Helvetica, sans-serif;
                font-size: 12px;
                background: var(--red);
                color: var(--white);
                padding: 5px 10px;
                border-radius: 50%;
                margin-left: 3px;
            }

            .important-number {
                font-family: font-bold, Arial, Helvetica, sans-serif;
                font-size: 12px;
                background: var(--yellow);
                color: var(--white);
                padding: 5px 10px;
                border-radius: 50%;
                margin-left: 3px;
            }


/* Configuração da área de conteúdos */

.board {
    background: transparent;
    height: 100%;
    margin-top: 25%;
}

    .board .board-header {
        display: block;
    }

        .board .board-header h1 {
            font-family: font-semibold, Arial, Helvetica, sans-serif;
            font-size: 30px;
            color: var(--black);
        }

        .board .board-header p {
            font-family: font-medium, Arial, Helvetica, sans-serif;
            font-size: 20px;
            color: var(--dark);
        }

            .board .board-header p span {
                color: var(--blue);
                font-weight: 600;
            }

            .underline {
                border-bottom: 1px solid var(--blue);
            }

    
    .board .board-search {
        margin: 2em 0;
    }

            .board .board-search input {
                background: none;
                font-family: font-medium, Arial, Helvetica, sans-serif;
                font-size: 18px;
                color: var(--dark);
                padding: 20px;
                border: 3px solid var(--gray);
                border-radius: 7px;
                width: 100%;
                height: 60px;
            }

                .board .board-search input:focus {
                    border: none;
                    outline: 2px solid var(--blue);
                }

                .board .board-search input[type=search] {
                    padding-right: 50px;            
                }

            .board .board-search i {
                display: none;
                position: absolute;
                font-size: 30px;
                color: var(--dark);
                opacity: 20%;
            }
    

    .box-task {
        display: flex;
        background: var(--white);
        padding: 1em 1em;
        border-radius: 6px;
        align-self: center;
        margin-bottom: 10px;
    }

        .box-task .check-area {
            display: block;
            position: relative;
            padding-left: 30px;
            margin-bottom: 32px;
            cursor: pointer;
            font-size: 22px;
        }

            .box-task .check-area input {
                position: absolute;
                display: none;
                cursor: pointer;
            }

        .box-task .check-area input:checked ~ .check {
            background: var(--green);
            border-radius: 5px;
        }


            .box-task .check-area .check::after{
                top: 6px;
                left: 12px;
                width: 5px;
                height: 12px;
                border: solid var(--white);
                border-width: 0 2px 2px 0;
                -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
            }

                .box-task .check-area .check::after {
                    content: '';
                    position: absolute;
                    display: none;
                }

                .box-task .check-area input:checked ~ .check::after{
                    display: block;
                }

            .box-task .check-area .check {
                left: 0;
                top: 0;
                width: 30px;
                height: 30px;
                background: var(--gray);
                position: absolute;
                border-radius: 5px;
            } 

        .box-task h2 {
            font-family: font-regular, Arial, Helvetica, sans-serif;
            color: var(--black);
            font-size: 15px;
            margin-left: 0.7em;
            margin-top: 6px;
        }

            .box-task .right {
                display: flex;
                margin-left: auto;
                margin-top: 1px;
            }

            .box-task .right p {
                font-family: font-medium, Arial, Helvetica, sans-serif;
                font-size: 15px;
                margin-right: 20px;
            }

                .urgent-text {
                    background: var(--red);
                    color: var(--white);
                    border-radius: 15px;
                    padding: 7px;
                }

                .important-text {
                    background: var(--yellow);
                    color: var(--white);
                    border-radius: 15px;
                    padding: 7px;
                }

            .box-task .right a{
                color: var(--dark);
                padding: 7px;
                transition: ease-in 0.3s;
            }
                .box-task .right a:hover{
                    color: var(--blue);
                    transition: ease-out 0.3s;
                }

                .box-task .right a:active{
                    color: var(--blue);
                }


.add-box {
    display: block;
    position: fixed;
    bottom: 0;
    right: 0;
    margin-bottom: 4em;
    margin-right: 2em;
}

    .add-box a{
        font-size: 25px;
        color: var(--white);
        background: var(--green);
        padding: 1.3em;
        border-radius: 50%;
        transition: ease-in 0.3s;
    }

    .add-box a:hover{
        font-size: 30px;
        transition: ease-out 0.3s;
    }



/* Responsividade da tela */

@media (max-width: 575.98px) {
    .subbar .subbar-menu {
        padding-left: 0.5em;
    }

    .subbar .subbar-item a {
        font-size: 15px;
    }

    main.board {
        width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    header {
        margin-left: 7%;
    }
    
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .subbar .subbar-menu {
        padding-left: 0.5em;
    }

    .subbar .subbar-item a {
        font-size: 15px;
    }

    main.board {
        width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    header {
        width: 90%;
        margin-left: 10%;
    }
    
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .subbar .subbar-menu {
        padding-left: 0.5em;
    }

    .subbar .subbar-item a {
        font-size: 15px;
    }

    main.board {
        width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    header {
        width: 90%;
        margin-left: 10%;
    }
    
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .subbar .subbar-menu {
        padding-left: 0.5em;
    }

    .subbar .subbar-item a {
        font-size: 15px;
    }

    main.board {
        width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    header {
        width: 92%;
        margin-left: 8%;
    }

}


@media (min-width: 1200px) and (max-width: 1399.98px) {
    .subbar .subbar-menu {
        padding-left: 0.5em;
    }

    .subbar .subbar-item a {
        font-size: 15px;
    }

    main.board {
        width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    header {
        width: 93%;
        margin-left: 7%;
    }
    
}

@media (min-width: 1400px) and (max-width: 1636px) {
    .subbar .subbar-menu {
        padding-left: 0.5em;
    }

    .subbar .subbar-item a {
        font-size: 15px;
    }
}