/* -webkit-align-items */ 
/* -webkit-justify-content */ 
/* -webkit-flex-direction */ 
/* -webkit-flex-wrap */

div#overlay {
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, .5);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    display: none;
}

body {
    width: 100%;
    height: 100%;
}

div.spinner {
    width: 80px;
    height: 80px;
    border: 2px solid #f3f3f3;
    border-radius: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    animation: spin 1s infinite linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

header.header {
    display: flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
}

header p.usuario b {
    text-transform: capitalize;
}

header div.header-mensagem {
    display: none;
    align-items: center;
    -webkit-align-items: center;
}

header div.header-mensagem a {
    text-decoration: none;
}

nav.nav-menu {
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}

nav.nav-menu label {
    display: flex;
    align-items: center;
    -webkit-align-items: center;
    cursor: pointer;
    margin: 0 0 0 7vw;
    width: 62vw;
}

img#icon-hamburguer {
    width: 9vw;
    height: 8vw
}

div#icon-menu {
    display: flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    width: 24vw;
}

div#nav-icon_Perfil {
    width: 8.7vw;
    height: 8.7vw;
    display: flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    cursor: pointer;
    margin-right: 2vw;
}

div#nav-icon_Perfil a {
    display: flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    width: 100%;
    height: 100%;
}

div#icon-menu img.icon_Perfil {
    width: 5.2vw;
}

div#icon-menu a.logout {
    text-decoration: none;
    font-size: 4.5vw;
    margin-top: 0;
    margin-right: 3vw;
    line-height: 10vw;
}

nav div.menu {
    display: none;
    width: 100%;
}

nav div.menu li {
    display: flex;
    align-items: center;
    -webkit-align-items: center;
    list-style-type: none;
    border-left: 0.6rem solid transparent;
}

nav div.menu-itens ul {
    padding: 0;
}

nav div.menu-itens ul li a {
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items: center;
    -webkit-align-items: center;
    width: 100%;
    padding: 0.8rem 1rem;
}

nav input#toggle {
    display: none;
}

nav input#toggle:checked+div.menu {
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
}

div.redes-sociais {
    display: flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: space-evenly;
    -webkit-justify-content: space-evenly;
    padding: 1rem;
}

nav div.menu li p {
    padding: 0;
    margin: 0;
    font-size: 1.2rem;
}

.svg {
    height: auto;
}

nav .menu .menu-itens ul li a .svg {
    width: 2rem;
}

nav .menu .redes-sociais a .svg {
    width: 3rem;
    height: 3rem;
}

div.ativado {
    width: 2vw;
    height: 13vw;
}

div.desativado {
    width: 2vw;
    height: 13vw;
}

div#modalMedidor .modal-dialog {
    max-width: none;
    padding: 0;
}

div#modalMedidor .modal-dialog-centered {
    justify-content: center;
    -webkit-justify-content: center;
}

div#modalMedidor .modal-content {
    width: 60rem;
    display: flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    padding: 0!important;
}

div#modalMedidor .medidorVelocidade {
    width: 780px;
    height: 380px;
}

div#modalMedidor .header-modal {
    width: 100%;
    height: 3rem;
    display: flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    padding: 0 1rem;
    align-items: center;
    -webkit-align-items: center;
    font-weight: bold;
    font-size: 1.1rem;
}

/* 
800 x 600	4:3	
1024 x 768	4:3	
1280 x 720	16:9
1366 x 768	16:9
1440 x 900	16:10
1600 x 900	16:9
1680 x 1050	16:10
1920 x 1080	16:9
2560 x 1080	21:9 
*/

/* Medias com base em resoluções desktop */

    @media (min-width: 2560px){

    }

    @media (min-width: 1920px) and (max-width: 2559px) {
        nav .menu .menu-itens ul li a .svg {
            width: 1.8rem;
        }
        nav div.menu li p {
            font-size: 1rem;
        }
    }

    @media (min-width: 1680px) and (max-width: 1919px) {
        nav .menu .menu-itens ul li a .svg {
            width: 1.8rem;
        }
        nav div.menu li p {
            font-size: 1rem;
        }
        nav .menu .redes-sociais a .svg {
            width: 2.5rem;
            height: 2.5rem;
        }
    }

    @media (min-width: 1600px) and (max-width: 1679px) {
        nav .menu .menu-itens ul li a .svg {
            width: 1.4rem;
        }
        nav div.menu li p {
            font-size: 0.9rem;
        }
        nav .menu .redes-sociais a .svg {
            width: 1.6rem;
        }
        nav div.menu-itens ul li a {
            padding: 0.6rem 1rem;
        }
    }

    @media (min-width: 1440px) and (max-width: 1599px) {
        nav .menu .menu-itens ul li a .svg {
            width: 1.4rem;
        }
        nav div.menu li p {
            font-size: 0.8rem;
        }
        nav .menu .redes-sociais a .svg {
            width: 1.5rem;
        }
        nav div.menu-itens ul li a {
            padding: 0.6rem 1rem;
        }
    }

    @media (min-width: 1366px) and (max-width: 1439px) {
        nav .menu .menu-itens ul li a .svg {
            width: 1.2rem;
        }
        nav div.menu-itens ul li a {
            padding: 0.4rem 1rem;
        }
        nav div.menu li p {
            font-size: 0.8rem;
        }
        nav .menu .redes-sociais a .svg {
            width: 1.4rem;
        }
    }

    @media (min-width: 1280px) and (max-width: 1365px) {
        nav .menu .menu-itens ul li a .svg {
            width: 1rem;
        }
        nav div.menu-itens ul li a {
            padding: 0.5rem 1rem;
        }
        nav div.menu li p {
            font-size: 0.7rem;
        }
        nav .menu .redes-sociais a .svg {
            width: 1.2rem;
        }
    }

    @media (min-width: 1024px) and (max-width: 1279px) {
        nav .menu .menu-itens ul li a .svg {
            width: 1.2rem;
        }
        nav div.menu-itens ul li a {
            padding: 0.4rem 1rem;
        }
        nav div.menu li p {
            font-size: 0.7rem;
        }
        nav .menu .redes-sociais a .svg {
            width: 1.2rem;
        }
    }

    @media (min-width: 800px) and (max-width: 1023px) {
        nav .menu .menu-itens ul li a .svg {
            width: 2.5rem;
        }
        nav div.menu-itens ul li a {
            padding: 0.8rem 5rem;
        }
        nav .menu .redes-sociais a .svg {
            width: 2.5rem;
        }
    }

    @media (max-width: 799px) {
    
    }

/* Medias com base em resoluções desktop */


@media (min-width: 1700px) {

    header.header {
        justify-content: space-between;
        -webkit-justify-content: space-between;
    }

    header div.header-mensagem {
        display: flex;
    }

    header div.logo {
        margin-left: 2vw;
    }

    header div.logo img {
        max-height: 4rem;
    }

    header div.msg-central {
        margin-right: 0.5vw;
    }
    
    header p.usuario {
        font-size: 1rem;
        margin: 0;
    }

    header p.msg {
        font-size: 1rem;
        margin: 0;
    }

    header div.header-mensagem a {
        font-size: 1vw;
        margin-left: 1vw;
        margin-right: 2.5vw;
        margin-top: 0;
        padding: .8vw .2vw .8vw 1.2vw;
    }

    header div#header-icon_Perfil {
        margin-right: 1vw;
    }

    header #icon_Perfil {
        width: 1.5vw;
        padding: 0;
        margin-top: 0;
    }

    nav.nav-menu label {
        display: none;
    }

    div#icon-menu {
        display: none;
    }

    nav div.menu {
        display: flex;
        flex-direction: column;
        -webkit-flex-direction: column;
        justify-content: space-between;
        -webkit-justify-content: space-between;
    }

}

@media (min-width: 1200px) and (max-width: 1699.98px) {

    header.header {
        justify-content: space-between;
        -webkit-justify-content: space-between;
    }

    header div.header-mensagem {
        display: flex;
    }

    header div.logo {
        margin-left: 2vw;
    }

    header div.logo img {
        max-height: 3.6vw;
    }

    header div.msg-central {
        margin-right: 0.5vw;
        margin-top: 0;
    }

    header p.usuario {
        font-size: 1vw;
        margin: 0;
    }

    header p.msg {
        font-size: 1vw;
        margin: 0;
    }

    header div.header-mensagem a {
        font-size: 1.2vw;
        margin-left: 1.3vw;
        margin-right: 3vw;
        margin-top: 0;
        padding: .8vw .2vw .8vw 1.5vw;
    }

    header div#header-icon_Perfil {
        margin-right: 1.3vw;
    }

    header #icon_Perfil {
        width: 1.7vw;
        padding: 0;
        margin-top: 0;
    }

    nav.nav-menu label {
        display: none;
    }

    div#icon-menu {
        display: none;
    }

    nav div.menu {
        display: flex;
        flex-direction: column;
        -webkit-flex-direction: column;
        justify-content: space-between;
        -webkit-justify-content: space-between;
    }

}

@media (min-width: 992px) and (max-width: 1199.98px) {
   
    header.header {
        justify-content: space-between;
        -webkit-justify-content: space-between;
    }

    header div.header-mensagem {
        display: flex;
    }

    header div.logo {
        margin: 0;
    }

    header div.logo img {
        max-height: 4.5rem;
        margin-left: 2vw;
    }

    header div.msg-central {
        margin-right: 0.7vw;
        margin-top: 0;
    }

    header p.usuario {
        font-size: 1.2vw;
        margin: 0;
    }

    header p.msg {
        font-size: 1.2vw;
        margin: 0;
    }

    header div.header-mensagem a {
        font-size: 1.7vw;
        margin-left: 1.5vw;
        margin-right: 3vw;
        margin-top: 0;
        padding: 1vw .2vw 1vw 2vw;
    }

    header div#header-icon_Perfil {
        margin-right: 1.5vw;
    }

    header #icon_Perfil {
        width: 2.5vw;
        padding: 0;
        margin-top: 0;
    }
    
    nav.nav-menu label {
        display: none;
    }
    
    div#icon-menu {
        display: none;
    }

    nav div.menu {
        display: flex;
        flex-direction: column;
        -webkit-flex-direction: column;
        justify-content: space-between;
        -webkit-justify-content: space-between;
    }

}

@media (min-width: 2560px) {

    header.header {
        height: 16vh;
    }

    nav.nav-menu {
        height: 84vh;
    }

}

@media (min-width: 992px) and (max-width: 2559px) {

    header.header {
        height: 12vh;
    }

    nav div.menu {
        height: 100%;
    }

    nav.nav-menu {
        height: 88vh;
    }

}

@media (max-width: 992px) {

    header.header {
        height: 14vh;
    }

}

@media (max-height: 450px) {

    header.header {
        height: 25%;
    }

}

@media (max-width: 991.98px) {

    div#modalMedidor .medidorVelocidade {
        width: 370px;
        height: 780px;
    }

    div#modalMedidor .modal-content {
        width: 30rem;
    }

}

@media (min-width: 768px) and (max-width: 991.98px) {

    header.header {
        justify-content: space-between;
        -webkit-justify-content: space-between;
    }

    header div.logo {
        margin: 0;
    }

    header div.logo img {
        max-height: 8vw;
        margin-left: 3vw;
    }

    header div.msg-central {
        margin-right: 0.7vw;
        margin-top: 0;
        margin-right: 3vw;
    }

    header p.usuario {
        font-size: 1.6vw;
        margin: 0;
    }

    header p.msg {
        font-size: 1.6vw;
        margin: 0;
    }

    header div.header-mensagem {
        display: flex;
    }

    header div#header-icon_Perfil {
        display: none;
    }

    header div.header-mensagem a {
        display: none;
    }

    header #icon_Perfil {
        width: 6.5vw;
        padding: 2vw 3vw 2vw 1vw;
        margin-top: 0.5vw;
    }

    nav.nav-menu label {
        margin: 0 0 0 4vw;
        width: 67vw;
    }

    img#icon-hamburguer {
        width: 5vw;
        height: 4.5vw;
    }

    div#icon-menu {
        width: 24vw;
    }

    div#nav-icon_Perfil {
        width: 5vw;
        height: 5vw;
        border-radius: 3vw;
        margin: 0;
        position: relative;
        left: 3vw;
    }

    nav div.menu {
        border-top: 1px solid;
    }

    div#icon-menu img.icon_Perfil {
        width: 3.3vw;
        margin-bottom: 0.3vw;
    }

    div#icon-menu a.logout {
        color: #757575;
        font-size: 2.6vw;
        line-height: 6vw;
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
    }

}

@media (min-width: 576px) and (max-width: 767.98px) {

    header div.logo img {
        max-height: 5vw;
    }
    
    nav.nav-menu label {
        margin: 0 0 0 5vw;
        width: 64vw;
    }

    img#icon-hamburguer {
        width: 7vw;
        height: 6.5vw
    }
   
    div#icon-menu {
        display: flex;
        align-items: center;
        -webkit-align-items: center;
        justify-content: center;
        -webkit-justify-content: center;
        width: 26vw;
    }

    div#nav-icon_Perfil {
        width: 6.5vw;
        height: 6.5vw;
        margin: 0vw;
    }

    div#icon-menu img.icon_Perfil {
        width: 4.4vw;
        margin-bottom: 0.4vw;
    }

    div#icon-menu a.logout {
        font-size: 3.5vw;
        margin-top: 0;
        margin-right: 1vw;
        line-height: 8.7vw;
    }

}

@media (max-width: 575px) {

    header div.logo img {
        max-height: 4rem;
    }

}