/* variáveis gerais */
    :root{
        --bs-primary: #00897b !important;
        --secondary: #d35b40 !important;
        --secondary-hover: #b44d36 !important;
        --state-active:#3cff004f !important;
        --state-inactive: #ff00047d !important;
    
        /* forçar visibilidade do modal */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            outline: 0;
            display: none;
        }
        
        modal.show {
            display: block !important;
        }
        .nav
    
        .modal-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            background-color: #000;
        }
        
        .modal-backdrop.show {
             opacity: 0.5;
        }
        
        .modal-dialog {
            position: relative;
            width: auto;
            margin: 1.75rem auto;
            max-width: 60 vw; /*old css*/
            pointer-events: none;
        }
        
        .modal{
            z-index: 1050; 
        }
        .modal-backdrop {
            z-index: 1040;
        }
        
        .modal-content {
            pointer-events: auto !important;
        }
    }
    
    #user-stats {
        display: flex;
        justify-content: center; 
        align-items: center; 
        gap: 10px;         
        padding: 1rem;    
    }
    
    
    html{
        font-family: 'PT Sans', sans-serif;
        font-size: 14px;
    }
    *, body {
        margin: 0px;
        padding: 0px;
        transition: .1s all;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    html, body {
        height: 100vh;
        overflow-x: hidden;
    }
    
    img#edudigital {
        width: 170px;
    }
    
    body.modal-open {
        overflow: hidden;
        padding-right: 17 px;
    }
    
    /*OLD*/
    .modal-dialog {
        max-width: 60vw;
    }
    
    #uploader .modal-dialog,
    #createClientModal .modal-dialog {
        max-width: 30vw;
    }
    
    .modal-body {
        height: 50vh;
        overflow-y: auto;
    }
    
    #uploader .modal-body,
    #createClientModal .modal-body {
        height: auto;
        overflow-y: visible;
    }
    
    
    /*FIM OLD*/
    
    body {
        background-color: #f9fcff;
    }
    
    .navbar {
        background-color: #fff;
        box-shadow: -2px 0px 3px 0px black;
    }
    
    .fa-power-off {
        color: var(--bs-primary);
        font-size: 1.4rem;
    }
    
    span.title {
        color: var(--bs-primary);
        font-size: 1.2rem;
        margin-left: 8px;
    }
    
    .vl {
        border-left: 1px solid var(--bs-primary);
        height: 50px;
    }
    
    .username {
        text-decoration: none;
        color: var(--bs-primary);
        margin-right: 10px;
    }
    
    .logout {
        width: 50px;
    }
    
    hr {
        width: 90vw;
        margin: 0 auto;
    }
    
    .btn-col {
        max-width: 180px;
    }
    
    .mainbtn {
        background-color: var(--secondary) !important;
        border: 1px solid var(--secondary) !important;
        padding: 8px !important;
        min-width: 150px;
        width: 150px;
        border-radius: 10px !important;
    }
    
    .mainbtn:hover {
        background-color: var(--secondary-hover) !important;
    }
    
    .mainbtn:focus {
        background-color: var(--secondary-hover) !important;
    }
    
    button.verLogin {
        background-color: transparent !important;
        border: none !important;
        padding: 0 !important;
        min-width: 0;
        width: 10px;
        border-radius: 0 !important;
        outline: none;
    }
    
    .active {
        background-color: var(--secondary-hover) !important;
    }
    .stats {
        background-color: #fff;
        margin: 5px;
        border-radius: 15px;
        max-width: 200px;
        padding: 10px;
        box-shadow: 1px 5px 8px rgba(0, 0, 0, .3);
    }
    
    
    
    .col-form {
        max-width: 400px;
    }
    
    .icon-stats {
        font-size: 2rem;
        color: var(--bs-primary);
    }
    
    .labels {
        font-weight: bold;
        color: rgba(0, 0, 0, .4);
    }
    
    .qnt {
        color: var(--bs-primary);
        font-size: 2.2rem;
        font-weight: bold;
        float: right;
    }
    
    input[type="checkbox"] {
        display: contents;
    }
    
    input[type="text"], input[type="date"] , input[type="password"]{
        border: 1px solid rgba(0, 0, 0, .1);
        min-width: 200px;
        max-width: 250px;
        border-radius: 10px !important;
        font-size: 1rem;
        padding: 8px;
        color: var(--bs-primary) !important;
        outline: none;
    }
    
    input[type = "date"] {
        text-align: center;
    }
    
    input:hover, select {
        border-color: rgba(0, 0, 0, .3);
    }
    
    input[type="text"]:focus, input[type="date"]:focus {
        border-color: var(--bs-primary);
    }
    
    .modal input[type="text"] {
        max-width: 100%;
    }
    
    .logs {
        width: 90%;
        max-width: 950px;
        margin: 0 auto;
        max-height: 700px;
        overflow: auto;
        text-align: center;
        width: 95% !important;
        min-width: 95% !important;
        margin-left: 2.5% !important;
    
    }
    .logs .row {
        margin-bottom: 5px;
        padding: 5px;
        justify-content: center;
        align-items: center;
    }
    
    .hr {
        border-bottom: 1px solid rgba(0, 0, 0, .1);
    }
    
    label {
        max-width: 280px !important;
        padding: 0;
        margin: 8px;
    }
    
    .demos {
        position: relative;
        background-color: var(--secondary);
        background-size: cover;
        border-radius: 10px;
        min-width: 200px;
        max-width: 260px;
        min-height: 160px;
        padding: 13px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        cursor: pointer;
        opacity: .95;
        overflow: hidden;
    }
    
    .demos::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        z-index: 1;
    }
    
    .demos:hover, .selected {
        box-shadow: 2px 5px 8px rgba(0, 0, 0, .3);
        background-color: var(--bs-primary);
        transform: scale(1.05);
        opacity: 1;
    }
    .demo-content {
        position: relative;
        z-index: 2;
        filter: none;
    }
    
    h2 {
        color: var(--bs-primary);
        font-weight: 700;
        text-align: start;
        font-size: 1.6rem;
    }
    
    h3 {
        font-size: 1.2rem;
        font-weight: 700;
        
    }
    
    .font-weight-bold {
        font-weight: bold;
    }
    .state-active, .state-inactive{
        padding: 3px;
        border-radius: 20px;
        max-width: 100px;
        font-weight: 400;
    }
    .state-active{
        background-color: var(--state-active) !important;
    }
    .state-inactive{
        background-color: var(--state-inactive) !important;
    }
    
    footer{
        position: fixed;
        display: flex;
        margin-top: auto;
        bottom: 0;
        width: 100%;
        padding: 13px;
        background-color: rgb(0, 137, 123) !important;
        color: #fff;
        z-index: 0;
        justify-content: space-between;
    }
    
    footer small{
        margin-left: 13px;
    }
    
    @media (width >= 1600px){
        html {
            font-size: 16px;
        }
    
        span.title {
            font-size: 1.1rem;
        }
        .mainbtn {
            min-width: 170px;
            width: 170px;
        }
    
        .btn-col {
            max-width: 200px;
        }
    
        .stats {
            margin: 8px;
            border-radius: 15px;
            max-width: 250px;
            padding: 15px;
        }
        
        .col-form {
            max-width: 400px;
        }
    
        .icon-stats {
            font-size: 2.2rem;
        }
    
        .qnt {
            font-size: 2.5rem;
        }
        
        input[type="text"], input[type="date"], input[type="password"] {
            min-width: 200px;
            max-width: 250px;
            font-size: 1rem;
            padding: 8px;
        }
    
        .logs {
            height: 50vh;
        }
    
        label {
            max-width: 300px !important;
            padding: 0;
            margin: 8px;
        }
        
        .demos {
            border-radius: 10px;
            min-width: 200px;
            max-width: 280px;
            min-height: 180px;
            padding: 15px;
        }
    
        footer {
            padding: 15px;
        }
        
        footer small{
            margin-left: 15px;
        }
    }

    @media (width <= 1200px){
        html {
            font-size: 12px;
        }
        img#edudigital {
            width: 140px;
        }
        
        /*modal -> mostrar módulos */
        #users.modal-dialog {
            max-height: 90vh !important;
            margin-top: 5vh !important; 
            margin-bottom: 5vh !important;
        }
        #users.modal-body {
            height: 90vh !important;
            max-height: none !important;
        }
            
        #uploader .modal-dialog, #users .modal-dialog, #fileInfo .modal-dialog, #deleteConfirmationModal .modal-dialog , #deleteConfirmationModal_ .modal-dialog , #2ndConfirmationModal_, .modal-dialog {
            max-width: 950px;
        }
    
        .modal-dialog {
            width: 90%;
            margin: 0 auto;
            max-width: 950px;
            max-height: 700px;
            position: relative;
            overflow: visible;
        }
        
        .modal {
            transition: opacity 0.3s ease-out;
    
        span.title {
            font-size: 1.1rem;
        }
        .mainbtn {
            min-width: 140px;
            width: 140px;
        }
    
        .btn-col {
            max-width: 200px;
        }
    
        .stats {
            margin: 6px;
            border-radius: 15px;
            max-width: 150px;
            padding: 10px;
        }
        
        .col-form {
            max-width: 230px;
        }
    
        .icon-stats {
            font-size: 2.2rem;
        }
    
        .qnt {
            font-size: 2.5rem;
        }
        
        input[type="text"], input[type="date"], input[type="password"] {
            min-width: 140px;
            max-width: 140px;
            font-size: 1rem;
            padding: 6px;
        }
    
        .logs {
            height: 62vh;
        }
    
        label {
            max-width: 250px !important;
            padding: 0;
            margin: 8px;
        }
        
        .demos {
            border-radius: 10px;
            min-width: 200px;
            max-width: 250px;
            min-height: 150px;
            padding: 15px;
        }
    
        footer {
            padding: 13px;
        }
        
        footer small{
            margin-left: 13px;
        }
    
        
    }
    
    @media (width <= 480px){
        html {
            font-size: 12px;
        }
        img#edudigital {
            width: 120px;
        }
        #uploader .modal-dialog, fileInfoModal .modal-dialog, #users .modal-dialog {
            max-width: 950px;
        }
    
        span.title {
            font-size: 1.1rem;
        }
        .mainbtn {
            min-width: 80px;
            width: 100px;
        }
    
        .btn-col {
            max-width: 200px;
        }
    
        .stats {
            margin: 6px;
            border-radius: 15px;
            min-width: 130px;
            max-width: 150px;
            padding: 10px;
        }
        
        
        
        .col-form {
            max-width: 230px;
        }
    
        .icon-stats {
            font-size: 2.2rem;
        }
    
        .qnt {
            font-size: 2.5rem;
        }
        
        button.verLogin img {
            width: 20px;
        }
    
        label img.editIcon {
            width: 18px;
        }
    
        input[type="text"], input[type="date"], input[type="password"] {
            min-width: 100px;
            max-width: 100px;
            font-size: 1rem;
            padding: 6px;
        }
    
        .logs {
            height: 42vh;
        }
    
        label {
            max-width: 230px !important;
            padding: 0;
            margin: 8px;
        }
        
        .demos {
            border-radius: 10px;
            min-width: 180px;
            max-width: 230px;
            min-height: 130px;
            padding: 15px;
        }
    
        footer {
            padding: 13px;
            justify-content: center !important;
        }
        
        footer .countries{
            display: none;
        }
    
        footer small {
            margin: 0;    
        }
    
        footer .copyright {
            text-align: center;
        }
    }
}