@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
    padding: 0;
    margin: 0;
}

:root {
    --primary-opacity: linear-gradient(148deg, #73ef4ad6, #004f94d1 0%, #73ef4ad9 200%);
    --color-primary-disabled: linear-gradient(148deg, #73ef4a61, #004f9469 0%, #73ef4a61 200%);
    
    --color1: #73ef4a;  /* Verde claro */
    --color2: #004f94;  /* Azul escuro */
    --color3: #ffffff;  /* Branco */
    --color4: #000000;  /* Preto */
    --color5: #636363;  /* Cinza */
    --color6: #339966;  /* Verde azulado */
    --color7: #dad9d991;  /* Cinza claro */
    --color8: #d4d4d48f;;  /* Cinza claro 2*/
    --color9: #ffffff;  /* /* Branco 2 */
    
    --color-border: #00000021;
    
    --color-hv: #dbe6f0;
    
    --color-outline: #0448836e;
    
    --border-img:#00000060;
    
    --card-opction: #dddddd91;
    --card-opction-hv: #b6b6b6a4;
    --card-opction-ck: #dfdfdfda;
    --card-opction-border: #00000052;
    
    --nav-active-bg: #0448831e;
    --nav-active-border:#0448836e;
    --nav-active-hv: #0448832d;
    
    --color-loading-1: #f1f1f1;
    --color-loading-2: #e0e0e0;
    --color-shadow: #004f946b;
    
    --color-line: #0000002a;
    
    --border: 5px;
    --font-primary: 'Roboto', sans-serif;
    /* --primary: linear-gradient(148deg, var(--color1), var(--color2) 0%, var(--color1) 200%); */
}

body {
    display: grid;
    grid-template-columns: 0% auto;
    grid-template-rows: 75px 1fr auto;
    grid-template-areas:
        "header header"
        "menu main"
        "menu footer";
    width: 100%;
    min-height: 99vh;
    transition: grid-template-columns .1s ease-in-out;
    font-family: var(--font-primary) ;
    overflow-y: auto;
}

body.dark-mode {

    --color-primary-disabled: linear-gradient(148deg, #73ef4a3a,  #73ef4a3b 0%, #73ef4a38 200%);

    --color1: #004f94;  /* Azul escuro */
    --color2: #73ef4a;  /* Verde claro */
    --color3: #000000;  /* Preto */
    --color4: #ffffff;  /* Branco */
    --color5: #636363;  /* Cinza */
    --color6: #339966;  /* Verde azulado */
    --color7: #2c2c2c;  /* Cinza escuro */
    --color8: #1a1a1a;  /* Cinza mais escuro */
    --color9: #1a1a1a;  /* /* Cinza mais escuro 2 */

    --color-border: #e0e0e03d;

    --color-hv: #69ff3870;

    --color-outline:#73ef4a;

    --border-img:#7a787860;

    --card-opction: #dddddd1c;
    --card-opction-hv: #b6b6b63d;
    --card-opction-ck:  #74f04b00;
    --card-opction-border:#73ef4a66;

    --nav-active-bg: #73ef4a1c;
    --nav-active-border:#73ef4a6b;
    --nav-active-hv:  #73ef4a2c;

    --color-loading-1:  #000000;
    --color-loading-2: #2b2b2b;
    

    --color-shadow: #73ef4a21;

    --color-line: #ffffff29;

    background-color: var(--color3);
    color: var(--color4);
}

header {
    position: sticky;
    top: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-area: header;
    padding: 10px 20px;
    background-color: var(--color3);
    box-shadow: 1px 1px 3px #0000003a;
    z-index: 10;
}

body.dark-mode header {
    background-color: var(--color3);
    color: var(--color4);
}

main,
menu{
    padding: 10px;
}
menu {
    grid-area: menu;
    background-color:var(--color3) !important;
    min-width: 276px;
    height: 90vh;
    display: none;
    position: fixed;
    flex-direction: column;
    align-content: space-between;
    top: 74px;
    left: 0px;
    animation: slid-menu .3s ease-in-out forwards;
}

body.dark-mode menu {
    background-color: var(--color7);
    color: var(--color4);
}

main {
    grid-area: main;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0px 20px;
    background-color: var(--color7);
}

body.dark-mode main {
    background-color: var(--color8);
    color: var(--color4);
}

footer {
    grid-area: footer;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: var(--color3);
    z-index: 8;
}

body.dark-mode footer {
    background-color: var(--color3);
    color: var(--color4);
}

.body-expanded {
    grid-template-columns: 275px auto;
}

img{
    user-select: none; /* Impede a seleção da imagem */
    -webkit-user-drag: none; /* Impede o arrastar da imagem no WebKit */
    -khtml-user-drag: none; /* Impede o arrastar da imagem no KHTML */
    -moz-user-drag: none; /* Impede o arrastar da imagem no Firefox */
    -o-user-drag: none; /* Impede o arrastar da imagem no Opera */
}

.text-center {
    text-align: center !important;
}

menu.active{
    z-index: 10;
    display: grid;
    background-color: var(--color3);
    animation: slid-menu .3s ease-in-out forwards;
    min-height: 92vh;
}

menu.closed{
    z-index: -1;
    display: none;
}

/* Estilização do scrollbar vertical geral */
::-webkit-scrollbar {
    width: 5px; /* Largura do scrollbar */
    border-radius: 5px; /* Raio da borda do scrollbar */
    background-color: transparent; /* Cor de fundo do scrollbar */
    height: 5px;
}

/* Estilização do thumb do scrollbar */
::-webkit-scrollbar-thumb {
    background-color: #cfcfcf; /* Cor do "thumb" do scrollbar */
    border-radius: 5px; /* Raio da borda do "thumb" */
}

/* Estilização do track do scrollbar */
::-webkit-scrollbar-track {
    background-color: transparent; /* Cor do fundo do track do scrollbar */
    border-radius: 5px; /* Raio da borda do track */
}

/* Estilização do scrollbar horizontal */
::-webkit-scrollbar-horizontal {
    height: 5px; /* Altura do scrollbar horizontal */
}

/* Estilização do thumb do scrollbar horizontal */
::-webkit-scrollbar-thumb:horizontal {
    background-color: #cfcfcf; /* Cor do "thumb" do scrollbar horizontal */
    border-radius: 5px; /* Raio da borda do "thumb" */
}

/* Estilização do track do scrollbar horizontal */
::-webkit-scrollbar-track:horizontal {
    background-color: transparent; /* Cor do fundo do scrollbar horizontal */
    border-radius: 5px; /* Raio da borda do track */
}

.hidden-web{
    display: none !important;
}

.checkbox {
    opacity: 0;
    position: absolute;
}

.checkbox-label {
    background-color: #11111121;
    width: 50px;
    height: 26px;
    border-radius: 50px;
    position: relative;
    padding: 5px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    outline: solid 1px var(--color7);
}

.fa-moon {
    color: #f1c40f;
}

.fa-sun {
    color: #f39c12;
}

.checkbox-label .ball {
    background-color: #fff;
    width: 22px;
    height: 22px;
    position: absolute;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    transition: transform 0.2s linear;
}

.checkbox:checked + .checkbox-label .ball {
    transform: translateX(24px);
}

@media screen and (max-width: 800px) {
    body {
        display: grid;
        grid-template-columns: 0% auto;
        grid-template-rows: 75px 1fr auto;
        width: 100%;
        min-height: 100vh;
        grid-template-areas:
        "header header"
        "menu main"
        "menu footer";
        gap: 0px;
        overflow-y: auto;

    }
    menu {
        grid-area: menu;
        position:sticky;
        /* right: 330px; */

    }
    .body-expanded {
        grid-template-columns: 20px auto;
    }
    header {
        padding: 0px 10px;
        z-index: 10;
    }
    header .search-icon {
        display: none;
    }

    menu.active{
        z-index: 9;
        box-shadow:1px 4px 9px 0px #00000049;
        min-height: 82vh;
    }

    menu.closed{
        animation: slid-menu-closed .3s ease-in-out forwards;
    }

    main{
        padding: 3px;
    }

    .footer-home{
        height: 440px !important;
        z-index: 8;
    }

    .hidden-mobile{
        display: none !important;
    }
    .hidden-web{
        display: flex !important;
    }

    @keyframes slid-menu {
        0%{
            right: 330px;
        }
        100%{
            right: 0px;;
        }
    }

    @keyframes slid-menu-closed {
        0%{
            right: 0px;
        }
        100%{
            right: 330px;
        }
    }

}