/*? 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-yellow: #FFDE59;
    --color-sonic-silver: #737174;
    --color-grey: #4b4e58;
    --color-black: #2d2d2d;
    --color-black-two: #151b28;
    --color-white-one: #ebebeb;
    --color-white-two: #aba8bb;
    
    /*! Color Opacity !*/
    --color-grey-p-2: rgba(74, 82, 105, .2);

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

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

    /*! Size Fonts !*/
    --font-emphasis: 1.75rem;

    --font-title-01: 1.5rem;
    --font-title-02: 1.125rem;

    --font-text-normal: 1rem;

    --font-subject-01: 0.875rem;
    --font-subject-02: 0.75rem;
}

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

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

    font-size: 1rem;
    color: var(--alert-03-error);

    -webkit-tap-highlight-color: transparent;

    overflow-x: hidden;

    font-family: 'Poppins', sans-serif;
}

body {
    background: var(--color-black);
    /* background-image: url('../images/background-main.png'); */
    background-repeat: no-repeat;
    background-size: 130%;
    background-position: top;
}

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

    margin: 0 auto;
}

/*! 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;
}

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

    background-color: transparent;

}

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

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

    border-radius: 8px;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-yellow) 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 5px 20px 0px rgba(0, 0, 0, .5); 
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, .5);
}

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

    scrollbar-width: thin;
    scrollbar-color: var(--color-yellow) transparent;
}
.scrollbar-main::-webkit-scrollbar{
    width: 5px;
}

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

    scrollbar-width: thin;
    scrollbar-color: var(--color-yellow) transparent;
}
.scrollbar-y::-webkit-scrollbar{
    width: 3px;
}

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