:root{
    --spcdiv-tamanho-100: 100px;
    --spcdiv-tamanho-80:  80px;
    --spcdiv-tamanho-60:  60px;
    --spcdiv-tamanho-40:  40px;
    --spcdiv-tamanho-30:  30px;
    --spcdiv-tamanho-20:  20px;
    --spcdiv-tamanho-12:  12px;
    --spcdiv-tamanho-10:  10px;
    --spcdiv-tamanho-08:  8px;
    --spcdiv-tamanho-04:  4px;    
    --spcdiv-altura:      1px;
    --spcdiv-largura:     100%;
    --spcdiv-mobile:      0.80;
    --spcdiv-margem:      10px;
}

/* ================= SPACER ================= */
.spacer-100{ height:var(--spcdiv-tamanho-100); width: var(--spcdiv-largura); }
.spacer-80 { height:var(--spcdiv-tamanho-80);  width: var(--spcdiv-largura); }
.spacer-60 { height:var(--spcdiv-tamanho-60);  width: var(--spcdiv-largura); }
.spacer-40 { height:var(--spcdiv-tamanho-40);  width: var(--spcdiv-largura); }
.spacer-30 { height:var(--spcdiv-tamanho-30);  width: var(--spcdiv-largura); }
.spacer-20 { height:var(--spcdiv-tamanho-20);  width: var(--spcdiv-largura); }
.spacer-12 { height:var(--spcdiv-tamanho-12);  width: var(--spcdiv-largura); }
.spacer-10 { height:var(--spcdiv-tamanho-10);  width: var(--spcdiv-largura); }
.spacer-08 { height:var(--spcdiv-tamanho-08);  width: var(--spcdiv-largura); }
.spacer-04 { height:var(--spcdiv-tamanho-04);  width: var(--spcdiv-largura); }

/* ================= SPACER HORIZONTAL ================= */
.spacer-h-100{ width:var(--spcdiv-tamanho-100); height: var(--spcdiv-altura); display:inline-block; }
.spacer-h-80 { width:var(--spcdiv-tamanho-80);  height: var(--spcdiv-altura); display:inline-block; }
.spacer-h-60 { width:var(--spcdiv-tamanho-60);  height: var(--spcdiv-altura); display:inline-block; }
.spacer-h-40 { width:var(--spcdiv-tamanho-40);  height: var(--spcdiv-altura); display:inline-block; }
.spacer-h-30 { width:var(--spcdiv-tamanho-30);  height: var(--spcdiv-altura); display:inline-block; }
.spacer-h-20 { width:var(--spcdiv-tamanho-20);  height: var(--spcdiv-altura); display:inline-block; }
.spacer-h-12 { width:var(--spcdiv-tamanho-12);  height: var(--spcdiv-altura); display:inline-block; }
.spacer-h-10 { width:var(--spcdiv-tamanho-10);  height: var(--spcdiv-altura); display:inline-block; }
.spacer-h-08 { width:var(--spcdiv-tamanho-08);  height: var(--spcdiv-altura); display:inline-block; }
.spacer-h-04 { width:var(--spcdiv-tamanho-04);  height: var(--spcdiv-altura); display:inline-block; }

/* ================= DIVIDERS ================= */
.divider,
.divider-preto,
.popup-universal-divider,
.popup-user-divider,
.divider-dropdown{
    width:76%;
    height:var(--altura-linha);
    border-radius:var(--radius-linha);
    margin: var(--spcdiv-margem) auto;
    flex-shrink:0;
}

.linha-divider,
.divider,
.popup-universal-divider,
.popup-user-divider,
.divider-dropdown{
    background:var(--corbranca);
}

.linha-divider-preto,
.divider-preto{
    background:var(--footer);
}

.linha-divider,
.linha-divider-preto{
    width:100%;
    height:var(--altura-linha);
    border-radius:var(--radius-linha);
    margin: 0;
    flex-shrink:0;
}



/* ================= RESPONSIVO 768px ================= */
@media (max-width:768px){

    /* SPACER */
    .spacer-100{ height:calc(var(--spcdiv-tamanho-100) * var(--spcdiv-mobile)); }
    .spacer-80 { height:calc(var(--spcdiv-tamanho-80)  * var(--spcdiv-mobile)); }
    .spacer-60 { height:calc(var(--spcdiv-tamanho-60)  * var(--spcdiv-mobile)); }
    .spacer-40 { height:calc(var(--spcdiv-tamanho-40)  * var(--spcdiv-mobile)); }
    .spacer-30 { height:calc(var(--spcdiv-tamanho-30)  * var(--spcdiv-mobile)); }
    .spacer-20 { height:calc(var(--spcdiv-tamanho-20)  * var(--spcdiv-mobile)); }
    .spacer-12 { height:calc(var(--spcdiv-tamanho-12)  * var(--spcdiv-mobile)); }
    .spacer-10 { height:calc(var(--spcdiv-tamanho-10)  * var(--spcdiv-mobile)); }
    .spacer-08 { height:calc(var(--spcdiv-tamanho-08)  * var(--spcdiv-mobile)); }
    .spacer-04 { height:calc(var(--spcdiv-tamanho-08)  * var(--spcdiv-mobile)); }    

    /* SPACER HORIZONTAL */
    .spacer-h-100{ width:calc(var(--spcdiv-tamanho-100) * var(--spcdiv-mobile)); }
    .spacer-h-80 { width:calc(var(--spcdiv-tamanho-80)  * var(--spcdiv-mobile)); }
    .spacer-h-60 { width:calc(var(--spcdiv-tamanho-60)  * var(--spcdiv-mobile)); }
    .spacer-h-40 { width:calc(var(--spcdiv-tamanho-40)  * var(--spcdiv-mobile)); }
    .spacer-h-30 { width:calc(var(--spcdiv-tamanho-30)  * var(--spcdiv-mobile)); }
    .spacer-h-20 { width:calc(var(--spcdiv-tamanho-20)  * var(--spcdiv-mobile)); }
    .spacer-h-12 { width:calc(var(--spcdiv-tamanho-12)  * var(--spcdiv-mobile)); }
    .spacer-h-10 { width:calc(var(--spcdiv-tamanho-10)  * var(--spcdiv-mobile)); }
    .spacer-h-08 { width:calc(var(--spcdiv-tamanho-08)  * var(--spcdiv-mobile)); }
    .spacer-h-04 { width:calc(var(--spcdiv-tamanho-08)  * var(--spcdiv-mobile)); }    

    /* DIVIDERS */
    .divider,
    .divider-preto,
    .popup-universal-divider,
    .popup-user-divider,
    .divider-dropdown{
    width:54%;
    }
}