/*? Import Fonts ?*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*? Configuração de Váriaveis ?*/
:root {
    /*? ** Colors ** ?*/
    /*! Main !*/
    --color-blue: #0F62AC;
    --color-green: #76C04E;
    --color-sonic-silver: #737174;
    --color-grey: #82879b;
    --color-black-one: #000000;
    --color-black-two: #232323;
    --color-black-three: #181a1b;
    --color-white-one: #f0f4f5;
    --color-white-two: #f7f5f3;
    --color-white-three: #c7c5d3;
    
    /*! Color Opacity !*/
    --color-grey-p-2: rgba(150, 150, 150, 0.5);

    /*! Alert !*/
    --alert-01-primary: #24B6F7;
    --alert-02-attention: #faba39;
    --alert-03-error: #EE4444;
    --alert-04-success: #00CC83;

    /*? ** Font ** ?*/
    font-size: 100%;
}


/*? Marcação ?*/
.border-red {
    border: 1px solid red;
}

/*! body !*/
body,
html {
    width: 100%;
    min-height: 100%;

    font-size: 1rem;

    -webkit-tap-highlight-color: transparent;

    overflow-x: hidden;
    
    font-family: 'Poppins', sans-serif;
}

body {
    background: var(--color-white-one);
}

.container-main{
    width: 100%;
    max-width: 1550px;
    height: 100%;  

    margin: 0 auto;
}
.container{
    width: 100%;
    height: 100%;
}

/*! Informations !*/
/*? Colors ?*/
.primary-color{
    color: var(--alert-01-primary) !important;
}
.success-color{
    color: var(--alert-04-success) !important;
}
.attention-color{
    color: var(--alert-02-attention) !important;
}
.error-color{
    color: var(--alert-03-error) !important;
}
/*? Background Colors ?*/
.primary-background{
    background-color: var(--alert-01-primary) !important;
}
.success-background{
    background-color: var(--alert-04-success) !important;
}
.attention-background{
    background-color: var(--alert-02-attention) !important;
}
.error-background{
    background-color: var(--alert-03-error) !important;
}

/*? Efeito Vidro ?*/
.fume-01{
    background: rgba(255, 255, 255, .25);
    backdrop-filter: blur( 9.5px );
    -webkit-backdrop-filter: blur( 9.5px );

    box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 4px 0px, 
                rgba(0, 0, 0, 0.32) 0px 2px 16px 0px;
}
.fume-02{
    background: rgba( 255, 255, 255, 0.5 );
    backdrop-filter: blur( 10px );
    -webkit-backdrop-filter: blur( 10px );
}


/*! Scroll !*/
::-webkit-scrollbar {
    width: 5px;

    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    width: 100%;

    background-color: var(--color-blue);

    border-radius: 8px;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-blue) transparent;
}

/*! Transição !*/
.transition {
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
}

/*! Cursores !*/
.cursor-pointer {
    cursor: pointer;
}
/*! Eventos !*/
.pointer-events-none {
    pointer-events: none;
}

/*! Opacity !*/
.opacity-0 {
    opacity: 0;
}

/*! W-H-100 !*/
.wh100{
    width: 100%;
    height: 100%;
}

/*! Box-Shadow !*/
.box-shadow-01{
    -webkit-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, .2); 
    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, .2);
}

/*! Scroll Div !*/
.scrollbar-main{ /* Na Vertical Principal */
    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: thin;
    scrollbar-color: var(--color-white-one) transparent;
}
.scrollbar-main::-webkit-scrollbar{
    width: 8px;
}

.scrollbar-y{ /* Na Vertical Secundario */
    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: thin;
    scrollbar-color: var(--color-white-one) transparent;
}
.scrollbar-y::-webkit-scrollbar{
    width: 5px;
}


/*! hidden !*/
.hidden{
    display: none !important;
}

/*! Container de loading Inicial !*/
.container-load{
    width: 100vw;
    height: 100vh;

    position: fixed;    
    top: 0;
    left: 0;
    z-index: 10;

    transform: scale(1);
    -webkit-transform: scale(1);

    background-color: var(--color-black-one);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.container-load.active{
    transform: scale(0);
    -webkit-transform: scale(0);
}
.container-load h3{
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-white-two);
}
.container-load h3:after{
    content: '';

    display: inline-block;

    background: var(--color-white-two);
    margin-left: 2px;
    
    height: 2.5rem;
    width: 4px;

    animation: cursor .8s infinite;
}


/* The typewriter cursor effect */
@keyframes cursor {
    0% { opacity: 1; }
    49% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes levitate {
    0%{ 
        transform: translateY(-10px); 
        -webkit-transform: translateY(-10px); 
    }
    50%{ 
        transform: translateY(10px); 
        -webkit-transform: translateY(10px); 
    }
    100%{ 
        transform: translateY(-10px); 
        -webkit-transform: translateY(-10px); 
    }
}
@keyframes levitate-x {
    0%{ 
        transform: translateX(-2px); 
        -webkit-transform: translateX(-2px); 
    }
    50%{ 
        transform: translateX(2px); 
        -webkit-transform: translateX(2px); 
    }
    100%{ 
        transform: translateX(-2px); 
        -webkit-transform: translateX(-2px); 
    }
}
@keyframes levitate-y {
    0%{ 
        transform: translateY(0px); 
        -webkit-transform: translateY(0px); 
    }
    25%{ 
        transform: translateY(-7px); 
        -webkit-transform: translateY(-7px); 
    }
    50%{
        transform: translateY(0px); 
        -webkit-transform: translateY(0px); 
    }
    75%{
        transform: translateY(7px); 
        -webkit-transform: translateY(7px); 
    }
    100%{ 
        transform: translateY(0px); 
        -webkit-transform: translateY(0px); 
    }
}
@keyframes glider {
    0% {transform: translateX(-100%);}
    100% {transform: translateX(100%);}
}
@-webkit-keyframes glider {
    0% {transform: translateX(-100%);}
    100% {transform: translateX(100%);}
}