@import url('globales.css');
@import url('compuestos.css');
@import url('crud.css');

:root {
    /* --- MISC --- */
    --color-white:         #FFFFFF;
    --color-white-rgb:     255, 255, 255;
    --color-darkwhite:     #EEEEEE;
    --color-darkwhite-rgb: 238, 238, 238;
    --color-lightgrey:     #D3D3D3;
    --color-lightgrey-rgb: 211, 211, 211;
    --color-grey:          #808080;
    --color-grey-rgb:      128, 128, 128;
    --color-darkgrey:      #333333;
    --color-darkgrey-rgb:  51, 51, 51;
    --color-black:         #000000;
    --color-black-rgb:     0, 0, 0;
    --color-lightblue:     #F5F6F9;
    --color-lightblue-rgb: 245, 246, 249;

    /* --- MAIN --- */
    --color-main:               #303795;
    --color-main-rgb:           48, 55, 149;
    --color-lightmain:          #E0E2F5;
    --color-lightmain-rgb:      224, 226, 245;
    --color-darkmain:           #181B4A;
    --color-darkmain-rgb:       24, 27, 74;

    /* --- SECONDARY (Azul claro) --- */
    --color-secondary:          #34A4EB;
    --color-secondary-rgb:      52, 164, 235;
    --color-lightsecondary:     #DDF0FC;
    --color-lightsecondary-rgb: 221, 240, 252;
    --color-darksecondary:      #175B85;
    --color-darksecondary-rgb:  23, 91, 133;

    /* --- INFO (Morado) --- */
    --color-info:               #9900aa;
    --color-info-rgb:           153, 0, 170;
    --color-lightinfo:          #F3D7F6;
    --color-lightinfo-rgb:      243, 215, 246;
    --color-darkinfo:           #4D0055;
    --color-darkinfo-rgb:       77, 0, 85;

    /* --- DANGER (Rojo) --- */
    --color-danger:             #FF0000;
    --color-danger-rgb:         255, 0, 0;
    --color-lightdanger:        #FFD6D6;
    --color-lightdanger-rgb:    255, 214, 214;
    --color-darkdanger:         #800000;
    --color-darkdanger-rgb:     128, 0, 0;

    /* --- SUCCESS (Verde) --- */
    --color-success:            #28A745;
    --color-success-rgb:        40, 167, 69;
    --color-lightsuccess:       #D8F2DF;
    --color-lightsuccess-rgb:   216, 242, 223;
    --color-darksuccess:        #124D1E;
    --color-darksuccess-rgb:    18, 77, 30;

    /* --- WARNING (Naranja) --- */
    --color-warning:            #FF9933;
    --color-warning-rgb:        255, 153, 51;
    --color-lightwarning:       #FFEBD6;
    --color-lightwarning-rgb:   255, 235, 214;
    --color-darkwarning:        #8C4D0D;
    --color-darkwarning-rgb:    140, 77, 13;

    /* --- BROWN (Marrón) --- */
    --color-brown:              #4B2C20;
    --color-brown-rgb:          75, 44, 32;
    --color-lightbrown:         #D5C4BD;
    --color-lightbrown-rgb:     213, 196, 189;
    --color-darkbrown:          #251610;
    --color-darkbrown-rgb:      37, 22, 16;

    --gradient-linear-0-main:     0deg, rgba(var(--color-main-rgb), 1) 0, rgba(var(--color-main-rgb), .7);
    --gradient-linear-90-main:   90deg, rgba(var(--color-main-rgb), 1) 0, rgba(var(--color-main-rgb), .7);
    --gradient-linear-135-main: 135deg, rgba(var(--color-main-rgb), 1) 0, rgba(var(--color-main-rgb), .7);
    --gradient-linear-180-main: 180deg, rgba(var(--color-main-rgb), 1) 0, rgba(var(--color-main-rgb), .7);
    --gradient-linear-225-main: 225deg, rgba(var(--color-main-rgb), 1) 0, rgba(var(--color-main-rgb), .7);
    --gradient-linear-270-main: 270deg, rgba(var(--color-main-rgb), 1) 0, rgba(var(--color-main-rgb), .7);
    --gradient-linear-315-main: 315deg, rgba(var(--color-main-rgb), 1) 0, rgba(var(--color-main-rgb), .7);

    --gradient-linear-225-secondary: 225deg, rgba(var(--color-secondary-rgb), 1) 0, rgba(var(--color-secondary-rgb), .7);

    /* --- MISC --- */
    --gradient-linear-45-white:         45deg, rgba(var(--color-white-rgb), 1) 0, rgba(var(--color-white-rgb), .7);
    --gradient-linear-45-darkwhite:     45deg, rgba(var(--color-darkwhite-rgb), 1) 0, rgba(var(--color-darkwhite-rgb), .7);
    --gradient-linear-45-lightgrey:     45deg, rgba(var(--color-lightgrey-rgb), 1) 0, rgba(var(--color-lightgrey-rgb), .7);
    --gradient-linear-45-grey:          45deg, rgba(var(--color-grey-rgb), 1) 0, rgba(var(--color-grey-rgb), .7);
    --gradient-linear-45-darkgrey:      45deg, rgba(var(--color-darkgrey-rgb), 1) 0, rgba(var(--color-darkgrey-rgb), .7);
    --gradient-linear-45-black:         45deg, rgba(var(--color-black-rgb), 1) 0, rgba(var(--color-black-rgb), .7);
    --gradient-linear-45-lightblue:     45deg, rgba(var(--color-lightblue-rgb), 1) 0, rgba(var(--color-lightblue-rgb), .7);

    /* --- MAIN --- */
    --gradient-linear-45-main:          45deg, rgba(var(--color-main-rgb), 1) 0, rgba(var(--color-main-rgb), .7);
    --gradient-linear-45-lightmain:     45deg, rgba(var(--color-lightmain-rgb), 1) 0, rgba(var(--color-lightmain-rgb), .7);
    --gradient-linear-45-darkmain:      45deg, rgba(var(--color-darkmain-rgb), 1) 0, rgba(var(--color-darkmain-rgb), .7);

    /* --- SECONDARY (Azul claro) --- */
    --gradient-linear-45-secondary:      45deg, rgba(var(--color-secondary-rgb), 1) 0, rgba(var(--color-secondary-rgb), .7);
    --gradient-linear-45-lightsecondary: 45deg, rgba(var(--color-lightsecondary-rgb), 1) 0, rgba(var(--color-lightsecondary-rgb), .7);
    --gradient-linear-45-darksecondary:  45deg, rgba(var(--color-darksecondary-rgb), 1) 0, rgba(var(--color-darksecondary-rgb), .7);

    /* --- INFO (Morado) --- */
    --gradient-linear-45-info:          45deg, rgba(var(--color-info-rgb), 1) 0, rgba(var(--color-info-rgb), .7);
    --gradient-linear-45-lightinfo:     45deg, rgba(var(--color-lightinfo-rgb), 1) 0, rgba(var(--color-lightinfo-rgb), .7);
    --gradient-linear-45-darkinfo:      45deg, rgba(var(--color-darkinfo-rgb), 1) 0, rgba(var(--color-darkinfo-rgb), .7);

    /* --- DANGER (Rojo) --- */
    --gradient-linear-45-danger:        45deg, rgba(var(--color-danger-rgb), 1) 0, rgba(var(--color-danger-rgb), .7);
    --gradient-linear-45-lightdanger:   45deg, rgba(var(--color-lightdanger-rgb), 1) 0, rgba(var(--color-lightdanger-rgb), .7);
    --gradient-linear-45-darkdanger:    45deg, rgba(var(--color-darkdanger-rgb), 1) 0, rgba(var(--color-darkdanger-rgb), .7);

    /* --- SUCCESS (Verde) --- */
    --gradient-linear-45-success:       45deg, rgba(var(--color-success-rgb), 1) 0, rgba(var(--color-success-rgb), .7);
    --gradient-linear-45-lightsuccess:  45deg, rgba(var(--color-lightsuccess-rgb), 1) 0, rgba(var(--color-lightsuccess-rgb), .7);
    --gradient-linear-45-darksuccess:   45deg, rgba(var(--color-darksuccess-rgb), 1) 0, rgba(var(--color-darksuccess-rgb), .7);

    /* --- WARNING (Naranja) --- */
    --gradient-linear-45-warning:       45deg, rgba(var(--color-warning-rgb), 1) 0, rgba(var(--color-warning-rgb), .7);
    --gradient-linear-45-lightwarning:  45deg, rgba(var(--color-lightwarning-rgb), 1) 0, rgba(var(--color-lightwarning-rgb), .7);
    --gradient-linear-45-darkwarning:   45deg, rgba(var(--color-darkwarning-rgb), 1) 0, rgba(var(--color-darkwarning-rgb), .7);

    /* --- BROWN (Marrón) --- */
    --gradient-linear-45-brown:         45deg, rgba(var(--color-brown-rgb), 1) 0, rgba(var(--color-brown-rgb), .7);
    --gradient-linear-45-lightbrown:    45deg, rgba(var(--color-lightbrown-rgb), 1) 0, rgba(var(--color-lightbrown-rgb), .7);
    --gradient-linear-45-darkbrown:     45deg, rgba(var(--color-darkbrown-rgb), 1) 0, rgba(var(--color-darkbrown-rgb), .7);

    --gradient-linear-45-succes:      45deg, rgba(var(--color-success-rgb),   1) 0, rgba(var(--color-success-rgb),   .7);

    --offset-w:    0px;
    --offset-h:    0px;

    --h-header:    55px;
    --h-subheader: calc(84px + var(--variable-2));
    --h-footer:    16px;
    --h-body:      calc(100vh - var(--h-header) - var(--h-footer));

    --w-aside:     275px;
    --w-button:    100px;

    --variable-1: 0.5rem;
    --variable-2: 1.0rem;
    --variable-3: 1.5rem;
    --variable-4: 2.0rem;
    --variable-5: 2.5rem;

    --variable-xs:  2px;
    --variable-sm:  5px;
    --variable-md: 10px;
    --variable-lg: 20px;
    --variable-xl: 50%;

    --font-xs:  smaller;
    --font-sm:  small;
    --font-md:  medium;
    --font-lg:  large;
    --font-xl:  larger;
    --font-xxl: 3rem;
}

/* POSITIONS */
.fixed    { position: fixed; }
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }

.bottom-0      { bottom: 0; }
.bottom-1      { bottom: 1rem; }
.top-0         { top: 0; }
.top-1         { top: 1rem; }
.top-header    { top: var(--h-header); }
.top-subheader { margin-top: var(--h-subheader) !important; }
.left-0        { left: 0; }
.left-1        { left: 1rem; }
.right-0       { right: 0; }
.right-1       { right: 1rem; }

.flex             { display: flex !important; flex-wrap: wrap; }
.flex-1           { flex: 1 1 0; min-width: 0; }
.flex-row         { flex-direction: row; }
.flex-col         { flex-direction: column; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col-reverse { flex-direction: column-reverse; }

.justify-between    { justify-content: space-between; }
.justify-evenly     { justify-content: space-evenly; }
.justify-around     { justify-content: space-around; }
.justify-start      { justify-content: start; }
.justify-end        { justify-content: end; }
.justify-center     { justify-content: center; }

.items-center       { align-items: center; }
.items-start        { align-items: start; }
.items-end          { align-items: end; }


/* SCALES */
.scale-0_1 { scale: 0.1; }
.scale-0_2 { scale: 0.2; }
.scale-0_3 { scale: 0.3; }
.scale-0_4 { scale: 0.4; }
.scale-0_5 { scale: 0.5; }
.scale-0_6 { scale: 0.6; }
.scale-0_7 { scale: 0.7; }
.scale-0_8 { scale: 0.8; }
.scale-0_9 { scale: 0.9; }
.scale-1 { scale: 1.0; }
.scale-2 { scale: 1.5; }
.scale-3 { scale: 2.0; }
.scale-4 { scale: 2.5; }
.scale-5 { scale: 3.0; }


/* GAPS */
.gap-0   { gap:  0   !important; --offset-w:  0px; --offset-h:  0px; }
.gap-xs  { gap:  2px !important; --offset-w:  1px; --offset-h:  1px; }
.gap-1   { gap: 10px !important; --offset-w:  8px; --offset-h:  8px; }
.gap-2   { gap: 20px !important; --offset-w: 10px; --offset-h: 10px; }

/* WIDTH */
.w-20px        { width:   20px; }
.w-34px        { width:   34px; }
.w-40px        { width:   40px; }
.w-200px       { width:  200px; }
.w-250px       { width:  250px; }
.w-1900px      { width: 1900px; }
.w-aside       { width: var(--w-aside); }
.w-100 { width: calc(100%); }
.w-95  { width: calc( 95% - var(--offset-w)); }
.w-90  { width: calc( 90% - var(--offset-w)); }
.w-85  { width: calc( 85% - var(--offset-w)); }
.w-80  { width: calc( 80% - var(--offset-w)); }
.w-75  { width: calc( 75% - var(--offset-w)); }
.w-70  { width: calc( 70% - var(--offset-w)); }
.w-65  { width: calc( 65% - var(--offset-w)); }
.w-60  { width: calc( 60% - var(--offset-w)); }
.w-55  { width: calc( 55% - var(--offset-w)); }
.w-50  { width: calc( 50% - var(--offset-w)); }
.w-45  { width: calc( 45% - var(--offset-w)); }
.w-40  { width: calc( 40% - var(--offset-w)); }
.w-35  { width: calc( 35% - var(--offset-w)); }
.w-33  { width: calc( calc(100%/3) - var(--offset-w)); }
.w-30  { width: calc( 30% - var(--offset-w)); }
.w-25  { width: calc( 25% - var(--offset-w)); }
.w-20  { width: calc( 20% - var(--offset-w)); }
.w-16  { width: calc( 16% - var(--offset-w)); }
.w-15  { width: calc( 15% - var(--offset-w)); }
.w-1÷7 { width: calc( calc(100%/7) - var(--offset-w)); }
.w-14  { width: calc( 14% - var(--offset-w)); }
.w-10  { width: calc( 10% - var(--offset-w)); }
.w-7_5 { width: calc(7.5% - var(--offset-w)); }
.w-5   { width: calc(  5% - var(--offset-w)); }

.min-w-20px     { min-width: 20px; }
.min-w-180px    { min-width: 180px; }
.min-w-250px    { min-width: 250px; }
.min-w-1900px   { min-width: 1900px; }
.min-w-aside    { min-width: var(--w-aside); }
.min-w-100      { min-width: calc(100%); }
.min-w-95       { min-width: calc( 95% - var(--offset-w)); }
.min-w-90       { min-width: calc( 90% - var(--offset-w)); }
.min-w-85       { min-width: calc( 85% - var(--offset-w)); }
.min-w-80       { min-width: calc( 80% - var(--offset-w)); }
.min-w-75       { min-width: calc( 75% - var(--offset-w)); }
.min-w-70       { min-width: calc( 70% - var(--offset-w)); }
.min-w-65       { min-width: calc( 65% - var(--offset-w)); }
.min-w-60       { min-width: calc( 60% - var(--offset-w)); }
.min-w-55       { min-width: calc( 55% - var(--offset-w)); }
.min-w-50       { min-width: calc( 50% - var(--offset-w)); }
.min-w-45       { min-width: calc( 45% - var(--offset-w)); }
.min-w-40       { min-width: calc( 40% - var(--offset-w)); }
.min-w-35       { min-width: calc( 35% - var(--offset-w)); }
.min-w-33       { min-width: calc( calc(100%/3) - var(--offset-w)); }
.min-w-30       { min-width: calc( 30% - var(--offset-w)); }
.min-w-25       { min-width: calc( 25% - var(--offset-w)); }
.min-w-20       { min-width: calc( 20% - var(--offset-w)); }
.min-w-15       { min-width: calc( 15% - var(--offset-w)); }
.min-w-10       { min-width: calc( 10% - var(--offset-w)); }
.min-w-7_5      { min-width: calc(7.5% - var(--offset-w)); }
.min-w-5        { min-width: calc(  5% - var(--offset-w)); }

.max-w-20px     { max-width: 20px; }
.max-w-200px    { max-width: 200px; }
.max-w-1900px   { max-width: 1900px; }
.max-w-aside    { max-width: var(--w-aside); }
.max-w-100      { max-width: calc(100%); }
.max-w-95       { max-width: calc( 95% - var(--offset-w)); }
.max-w-90       { max-width: calc( 90% - var(--offset-w)); }
.max-w-85       { max-width: calc( 85% - var(--offset-w)); }
.max-w-80       { max-width: calc( 80% - var(--offset-w)); }
.max-w-75       { max-width: calc( 75% - var(--offset-w)); }
.max-w-70       { max-width: calc( 70% - var(--offset-w)); }
.max-w-66       { max-width: calc( calc(200%/3) - var(--offset-w)); }
.max-w-65       { max-width: calc( 65% - var(--offset-w)); }
.max-w-60       { max-width: calc( 60% - var(--offset-w)); }
.max-w-55       { max-width: calc( 55% - var(--offset-w)); }
.max-w-50       { max-width: calc( 50% - var(--offset-w)); }
.max-w-45       { max-width: calc( 45% - var(--offset-w)); }
.max-w-40       { max-width: calc( 40% - var(--offset-w)); }
.max-w-35       { max-width: calc( 35% - var(--offset-w)); }
.max-w-33       { max-width: calc( calc(100%/3) - var(--offset-w)); }
.max-w-30       { max-width: calc( 30% - var(--offset-w)); }
.max-w-25       { max-width: calc( 25% - var(--offset-w)); }
.max-w-20       { max-width: calc( 20% - var(--offset-w)); }
.max-w-15       { max-width: calc( 15% - var(--offset-w)); }
.max-w-10       { max-width: calc( 10% - var(--offset-w)); }
.max-w-7_5      { max-width: calc(7.5% - var(--offset-w)); }
.max-w-5        { max-width: calc(  5% - var(--offset-w)); }


/* HEIGH */
.h-screen    { height: 100vh; }
.h-header    { height: var(--h-header); }
.h-footer    { height: var(--h-footer); }
.h-body      { height: var(--h-body); }
.h-subheader { height: var(--h-subheader); }
.h-100px     { height: 100px; }
.h-100       { height: calc(100% - var(--offset-h)); }
.h-95        { height: calc( 95% - var(--offset-h)); }
.h-90        { height: calc( 90% - var(--offset-h)); }
.h-85        { height: calc( 85% - var(--offset-h)); }
.h-80        { height: calc( 80% - var(--offset-h)); }
.h-75        { height: calc( 75% - var(--offset-h)); }
.h-70        { height: calc( 70% - var(--offset-h)); }
.h-65        { height: calc( 65% - var(--offset-h)); }
.h-60        { height: calc( 60% - var(--offset-h)); }
.h-55        { height: calc( 55% - var(--offset-h)); }
.h-50        { height: calc( 50% - var(--offset-h)); }
.h-45        { height: calc( 45% - var(--offset-h)); }
.h-40        { height: calc( 40% - var(--offset-h)); }
.h-35        { height: calc( 35% - var(--offset-h)); }
.h-30        { height: calc( 30% - var(--offset-h)); }
.h-25        { height: calc( 25% - var(--offset-h)); }
.h-20        { height: calc( 20% - var(--offset-h)); }
.h-15        { height: calc( 15% - var(--offset-h)); }
.h-10        { height: calc( 10% - var(--offset-h)); }
.h-5         { height: calc(  5% - var(--offset-h)); }

.min-h-screen    { min-height: 100vh; }
.min-h-header    { min-height: var(--h-header); }
.min-h-footer    { min-height: var(--h-footer); }
.min-h-body      { min-height: var(--h-body); }
.min-h-subheader { min-height: var(--h-subheader); }
.min-h-100       { min-height: calc(100% - var(--offset-h)); }
.min-h-95        { min-height: calc( 95% - var(--offset-h)); }
.min-h-90        { min-height: calc( 90% - var(--offset-h)); }
.min-h-85        { min-height: calc( 85% - var(--offset-h)); }
.min-h-80        { min-height: calc( 80% - var(--offset-h)); }
.min-h-75        { min-height: calc( 75% - var(--offset-h)); }
.min-h-70        { min-height: calc( 70% - var(--offset-h)); }
.min-h-65        { min-height: calc( 65% - var(--offset-h)); }
.min-h-60        { min-height: calc( 60% - var(--offset-h)); }
.min-h-55        { min-height: calc( 55% - var(--offset-h)); }
.min-h-50        { min-height: calc( 50% - var(--offset-h)); }
.min-h-45        { min-height: calc( 45% - var(--offset-h)); }
.min-h-40        { min-height: calc( 40% - var(--offset-h)); }
.min-h-35        { min-height: calc( 35% - var(--offset-h)); }
.min-h-30        { min-height: calc( 30% - var(--offset-h)); }
.min-h-25        { min-height: calc( 25% - var(--offset-h)); }
.min-h-20        { min-height: calc( 20% - var(--offset-h)); }
.min-h-15        { min-height: calc( 15% - var(--offset-h)); }
.min-h-10        { min-height: calc( 10% - var(--offset-h)); }
.min-h-5         { min-height: calc(  5% - var(--offset-h)); }

.max-h-screen    { max-height: 100vh; }
.max-h-header    { max-height: var(--h-header); }
.max-h-footer    { max-height: var(--h-footer); }
.max-h-body      { max-height: var(--h-body); }
.max-h-subheader { max-height: var(--h-subheader); }
.max-h-100px     { max-height: 100px; }
.max-h-100       { max-height: calc(100% - var(--offset-h)); }
.max-h-95        { max-height: calc( 95% - var(--offset-h)); }
.max-h-90        { max-height: calc( 90% - var(--offset-h)); }
.max-h-85        { max-height: calc( 85% - var(--offset-h)); }
.max-h-80        { max-height: calc( 80% - var(--offset-h)); }
.max-h-75        { max-height: calc( 75% - var(--offset-h)); }
.max-h-70        { max-height: calc( 70% - var(--offset-h)); }
.max-h-65        { max-height: calc( 65% - var(--offset-h)); }
.max-h-60        { max-height: calc( 60% - var(--offset-h)); }
.max-h-55        { max-height: calc( 55% - var(--offset-h)); }
.max-h-50        { max-height: calc( 50% - var(--offset-h)); }
.max-h-45        { max-height: calc( 45% - var(--offset-h)); }
.max-h-40        { max-height: calc( 40% - var(--offset-h)); }
.max-h-35        { max-height: calc( 35% - var(--offset-h)); }
.max-h-30        { max-height: calc( 30% - var(--offset-h)); }
.max-h-25        { max-height: calc( 25% - var(--offset-h)); }
.max-h-20        { max-height: calc( 20% - var(--offset-h)); }
.max-h-15        { max-height: calc( 15% - var(--offset-h)); }
.max-h-10        { max-height: calc( 10% - var(--offset-h)); }
.max-h-5         { max-height: calc(  5% - var(--offset-h)); }

/* PADDINGS */
.p-0   { padding: 0 !important; }
.p-1   { padding: var(--variable-1); }
.p-2   { padding: var(--variable-2); }
.p-3   { padding: var(--variable-3); }
.p-4   { padding: var(--variable-4); }
.p-5   { padding: var(--variable-5); }
.p-xs  { padding: var(--variable-xs); }
.p-sm  { padding: var(--variable-sm); }
.p-md  { padding: var(--variable-md); }
.p-lg  { padding: var(--variable-lg); }
.p-xl  { padding: var(--variable-xl); }
.px-1  { padding-left: var(--variable-1); padding-right: var(--variable-1); }
.px-2  { padding-left: var(--variable-2); padding-right: var(--variable-2); }
.px-3  { padding-left: var(--variable-3); padding-right: var(--variable-3); }
.px-4  { padding-left: var(--variable-4); padding-right: var(--variable-4); }
.px-5  { padding-left: var(--variable-5); padding-right: var(--variable-5); }
.px-xs { padding-left: var(--variable-xs); padding-right: var(--variable-xs); }
.px-sm { padding-left: var(--variable-sm); padding-right: var(--variable-sm); }
.px-md { padding-left: var(--variable-md); padding-right: var(--variable-md); }
.px-lg { padding-left: var(--variable-lg); padding-right: var(--variable-lg); }
.px-xl { padding-left: var(--variable-xl); padding-right: var(--variable-xl); }
.py-1  { padding-top: var(--variable-1); padding-bottom: var(--variable-1); }
.py-2  { padding-top: var(--variable-2); padding-bottom: var(--variable-2); }
.py-3  { padding-top: var(--variable-3); padding-bottom: var(--variable-3); }
.py-4  { padding-top: var(--variable-4); padding-bottom: var(--variable-4); }
.py-5  { padding-top: var(--variable-5); padding-bottom: var(--variable-5); }
.py-xs { padding-top: var(--variable-xs); padding-bottom: var(--variable-xs); }
.py-sm { padding-top: var(--variable-sm); padding-bottom: var(--variable-sm); }
.py-md { padding-top: var(--variable-md); padding-bottom: var(--variable-md); }
.py-lg { padding-top: var(--variable-lg); padding-bottom: var(--variable-lg); }
.py-xl { padding-top: var(--variable-xl); padding-bottom: var(--variable-xl); }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: var(--variable-1); }
.pt-2 { padding-top: var(--variable-2); }
.pt-3 { padding-top: var(--variable-3); }
.pt-4 { padding-top: var(--variable-4); }
.pt-5 { padding-top: var(--variable-5); }
.pt-xs { padding-top: var(--variable-xs); }
.pt-sm { padding-top: var(--variable-sm); }
.pt-md { padding-top: var(--variable-md); }
.pt-lg { padding-top: var(--variable-lg); }
.pt-xl { padding-top: var(--variable-xl); }
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: var(--variable-1); }
.pb-2 { padding-bottom: var(--variable-2); }
.pb-3 { padding-bottom: var(--variable-3); }
.pb-4 { padding-bottom: var(--variable-4); }
.pb-5 { padding-bottom: var(--variable-5); }
.pb-xs { padding-bottom: var(--variable-xs); }
.pb-sm { padding-bottom: var(--variable-sm); }
.pb-md { padding-bottom: var(--variable-md); }
.pb-lg { padding-bottom: var(--variable-lg); }
.pb-xl { padding-bottom: var(--variable-xl); }
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: var(--variable-1); }
.pl-2 { padding-left: var(--variable-2); }
.pl-3 { padding-left: var(--variable-3); }
.pl-4 { padding-left: var(--variable-4); }
.pl-5 { padding-left: var(--variable-5); }
.pl-xs { padding-left: var(--variable-xs); }
.pl-sm { padding-left: var(--variable-sm); }
.pl-md { padding-left: var(--variable-md); }
.pl-lg { padding-left: var(--variable-lg); }
.pl-xl { padding-left: var(--variable-xl); }
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: var(--variable-1); }
.pr-2 { padding-right: var(--variable-2); }
.pr-3 { padding-right: var(--variable-3); }
.pr-4 { padding-right: var(--variable-4); }
.pr-5 { padding-right: var(--variable-5); }
.pr-xs { padding-right: var(--variable-xs); }
.pr-sm { padding-right: var(--variable-sm); }
.pr-md { padding-right: var(--variable-md); }
.pr-lg { padding-right: var(--variable-lg); }
.pr-xl { padding-right: var(--variable-xl); }
.p-footer { padding-bottom: calc(var(--variable-2) + --h-footer)}

.rounded-0 { border-radius: 0 !important; }
.rounded-1 { border-radius: var(--variable-1); }
.rounded-2 { border-radius: var(--variable-2); }
.rounded-3 { border-radius: var(--variable-3); }
.rounded-4 { border-radius: var(--variable-4); }
.rounded-5 { border-radius: var(--variable-5); }
.rounded-xs { border-radius:  2px; }
.rounded-sm { border-radius:  5px; }
.rounded    { border-radius: 10px; }
.rounded-lg { border-radius: 20px; }
.rounded-xl { border-radius: 50%; }

.rounded-tl-0 { border-top-left-radius:     0 !important; }
.rounded-tr-0 { border-top-right-radius:    0 !important; }
.rounded-bl-0 { border-bottom-left-radius:  0 !important; }
.rounded-br-0 { border-bottom-right-radius: 0 !important; }


.border-color-white     { border: 1px solid var(--color-white); }
.border-color-darkwhite { border: 1px solid var(--color-darkwhite); }
.border-color-lightgrey { border: 1px solid var(--color-lightgrey); }
.border-color-grey      { border: 1px solid var(--color-grey); }
.border-color-darkgrey  { border: 1px solid var(--color-darkgrey); }
.border-color-black     { border: 1px solid var(--color-black); }
.border-color-main      { border: 1px solid var(--color-main); }
.border-color-secondary { border: 1px solid var(--color-secondary); }
.border-color-info      { border: 1px solid var(--color-info); }
.border-color-warning   { border: 1px solid var(--color-warning); }
.border-color-success   { border: 1px solid var(--color-success); }
.border-color-danger    { border: 1px solid var(--color-danger); }
.border-color-lightblue { border: 1px solid var(--color-lightblue); }
.border-color-brown     { border: 1px solid var(--color-brown); }

.border-t-none { border-top:    none; }
.border-b-none { border-bottom: none; }
.border-y-none { border-top:    none !important; border-bottom: none !important; }
.border-l-none { border-left:   none; }
.border-r-none { border-right:  none; }
.border-x-none { border-left:   none !important; border-right: none !important; }



/* MARGINS */
.m-0   { margin: 0 !important; }
.m-1   { margin: var(--variable-1); }
.m-2   { margin: var(--variable-2); }
.m-3   { margin: var(--variable-3); }
.m-4   { margin: var(--variable-4); }
.m-5   { margin: var(--variable-5); }
.m-xs  { margin: var(--variable-xs); }
.m-sm  { margin: var(--variable-sm); }
.m-md  { margin: var(--variable-md); }
.m-lg  { margin: var(--variable-lg); }
.m-xl  { margin: var(--variable-xl); }
.mx-1  { margin-left: var(--variable-1); margin-right: var(--variable-1); }
.mx-2  { margin-left: var(--variable-2); margin-right: var(--variable-2); }
.mx-3  { margin-left: var(--variable-3); margin-right: var(--variable-3); }
.mx-4  { margin-left: var(--variable-4); margin-right: var(--variable-4); }
.mx-5  { margin-left: var(--variable-5); margin-right: var(--variable-5); }
.mx-xs { margin-left: var(--variable-xs); margin-right: var(--variable-xs); }
.mx-sm { margin-left: var(--variable-sm); margin-right: var(--variable-sm); }
.mx-md { margin-left: var(--variable-md); margin-right: var(--variable-md); }
.mx-lg { margin-left: var(--variable-lg); margin-right: var(--variable-lg); }
.mx-xl { margin-left: var(--variable-xl); margin-right: var(--variable-xl); }
.my-1  { margin-top: var(--variable-1); margin-bottom: var(--variable-1); }
.my-2  { margin-top: var(--variable-2); margin-bottom: var(--variable-2); }
.my-3  { margin-top: var(--variable-3); margin-bottom: var(--variable-3); }
.my-4  { margin-top: var(--variable-4); margin-bottom: var(--variable-4); }
.my-5  { margin-top: var(--variable-5); margin-bottom: var(--variable-5); }
.my-xs { margin-top: var(--variable-xs); margin-bottom: var(--variable-xs); }
.my-sm { margin-top: var(--variable-sm); margin-bottom: var(--variable-sm); }
.my-md { margin-top: var(--variable-md); margin-bottom: var(--variable-md); }
.my-lg { margin-top: var(--variable-lg); margin-bottom: var(--variable-lg); }
.my-xl { margin-top: var(--variable-xl); margin-bottom: var(--variable-xl); }
.mt-0  { margin-top: 0 !important; }
.mt-1  { margin-top: var(--variable-1); }
.-mt-1 { margin-top: -1rem; }
.mt-2  { margin-top: var(--variable-2); }
.mt-3  { margin-top: var(--variable-3); }
.mt-4  { margin-top: var(--variable-4); }
.mt-5  { margin-top: var(--variable-5); }
.mt-xs { margin-top: var(--variable-xs); }
.mt-sm { margin-top: var(--variable-sm); }
.mt-md { margin-top: var(--variable-md); }
.mt-lg { margin-top: var(--variable-lg); }
.mt-xl { margin-top: var(--variable-xl); }
.mb-0  { margin-bottom: 0 !important; }
.mb-1  { margin-bottom: var(--variable-1); }
.mb-2  { margin-bottom: var(--variable-2); }
.mb-3  { margin-bottom: var(--variable-3); }
.mb-4  { margin-bottom: var(--variable-4); }
.mb-5  { margin-bottom: var(--variable-5); }
.mb-xs { margin-bottom: var(--variable-xs); }
.mb-sm { margin-bottom: var(--variable-sm); }
.mb-md { margin-bottom: var(--variable-md); }
.mb-lg { margin-bottom: var(--variable-lg); }
.mb-xl { margin-bottom: var(--variable-xl); }
.mb-footer { margin-bottom: var(--h-footer); }
.ml-0  { margin-left: 0 !important; }
.ml-1  { margin-left: var(--variable-1); }
.ml-2  { margin-left: var(--variable-2); }
.ml-3  { margin-left: var(--variable-3); }
.ml-4  { margin-left: var(--variable-4); }
.ml-5  { margin-left: var(--variable-5); }
.mr-0  { margin-right: 0 !important; }
.mr-1  { margin-right: var(--variable-1); }
.mr-2  { margin-right: var(--variable-2); }
.mr-3  { margin-right: var(--variable-3); }
.mr-4  { margin-right: var(--variable-4); }
.mr-5  { margin-right: var(--variable-5); }

/* Z-INDEX */
.z-10             { z-index: 10; }
.z-20             { z-index: 20; }
.z-30             { z-index: 30; }
.z-40             { z-index: 40; }
.z-50             { z-index: 50; }
.z-60             { z-index: 60; }
.z-70             { z-index: 70; }
.z-80             { z-index: 80; }
.z-90             { z-index: 90; }
.z-modal          { z-index: 1050; }
.z-modal-1        { z-index: 1051; }
.z-launchpad      { z-index: 1055; }
.z-aside-backdrop { z-index: 1056; }
.z-aside          { z-index: 1057; }
.z-header         { z-index: 1058; }
.z-swalbackdrop   { z-index: 1059; }
.z-preloader      { z-index: 1060; }


/* FONT SIZE */
.font-xs  { font-size: var(--font-xs); }
.font-sm  { font-size: var(--font-sm); }
.font-md  { font-size: var(--font-md); }
.font-lg  { font-size: var(--font-lg); }
.font-xl  { font-size: var(--font-xl); }
.font-xxl { font-size: var(--font-xxl); }

.font-oswald { font-family: Oswald, serif !important; }


/* BACKGROUNDS */
.bg-white     { background: var(--color-white);                 color: var(--color-darkgrey); }
.bg-darkwhite { background: var(--color-darkwhite);                 color: var(--color-darkgrey); }
.bg-lightgrey { background: var(--color-lightgrey) !important;  color: var(--color-darkgrey); }
.bg-grey      { background: var(--color-grey) !important;       color: var(--color-darkgrey); }
.bg-darkgrey  { background: var(--color-darkgrey);              color: var(--color-white); }
.bg-black     { background: var(--color-black);                 color: var(--color-white); }
.bg-main      { background: var(--color-main);                  color: var(--color-white); }
.bg-secondary { background: var(--color-secondary);             color: var(--color-white); }
.bg-info      { background: var(--color-info);                  color: var(--color-white); }
.bg-warning   { background: var(--color-warning);               color: var(--color-white); }
.bg-success   { background: var(--color-success);               color: var(--color-white); }
.bg-danger    { background: var(--color-danger);                color: var(--color-white); }
.bg-danger2   { background: var(--color-danger);                color: var(--color-white); }
.bg-lightblue { background: var(--color-lightblue);             color: var(--color-darkgrey); }
.bg-brown     { background: var(--color-brown);                 color: var(--color-white); }

.bg-transparent     { background: transparent; }

.bg-transparent-brown       { background-color: rgba(var(--color-brown-rgb), 0.1)}
.bg-transparent-danger      { background-color: rgba(var(--color-danger-rgb), 0.1)}
.bg-transparent-secondary   { background-color: rgba(var(--color-secondary-rgb), 0.1)}
.bg-transparent-success     { background-color: rgba(var(--color-success-rgb), 0.1)}
.bg-transparent-warning     { background-color: rgba(var(--color-warning-rgb), 0.1)}

.bg-linear-main         { background: linear-gradient(90deg, rgba(var(--color-main-rgb), 1)      0%, rgba(var(--color-main-rgb), 1)      50%, rgba(var(--color-main-rgb), 0.7)      100%); color: var(--color-white); }
.bg-linear-main-45      { background: linear-gradient(45deg, rgba(var(--color-main-rgb), 1)      0%, 50%, rgba(var(--color-main-rgb), 0.7)      100%); color: var(--color-white); }
.bg-linear-danger-45    { background: linear-gradient(45deg, rgba(var(--color-danger-rgb), 1)    0%, 50%, rgba(var(--color-danger-rgb), 0.5)    100%); color: var(--color-white); }
.bg-linear-secondary-45 { background: linear-gradient(45deg, rgba(var(--color-secondary-rgb), 1) 0%, 50%, rgba(var(--color-secondary-rgb), 0.7) 100%); color: var(--color-white); }

.hover-bg-white:hover     { background: var(--color-white);                 color: var(--color-darkgrey); }
.hover-bg-darkwhite:hover { background: var(--color-darkwhite);                 color: var(--color-darkgrey); }
.hover-bg-lightgrey:hover { background: var(--color-lightgrey) !important;  color: var(--color-darkgrey); }
.hover-bg-grey:hover      { background: var(--color-grey) !important;       color: var(--color-darkgrey); }
.hover-bg-darkgrey:hover  { background: var(--color-darkgrey);              color: var(--color-white); }
.hover-bg-black:hover     { background: var(--color-black);                 color: var(--color-white); }
.hover-bg-main:hover      { background: var(--color-main);                  color: var(--color-white); }
.hover-bg-secondary:hover { background: var(--color-secondary);             color: var(--color-white); }
.hover-bg-info:hover      { background: var(--color-info);                  color: var(--color-white); }
.hover-bg-warning:hover   { background: var(--color-warning);               color: var(--color-white); }
.hover-bg-success:hover   { background: var(--color-success);               color: var(--color-white); }
.hover-bg-danger:hover    { background: var(--color-danger);                color: var(--color-white); }
.hover-bg-lightblue:hover { background: var(--color-lightblue);             color: var(--color-darkgrey); }

.hover-bg-linear-main:hover { background: linear-gradient(90deg, rgba(var(--color-main-rgb), 1) 0%, rgba(var(--color-main-rgb), 1) 50%, rgba(var(--color-main-rgb), 0.5) 100%); color: var(--color-white); }

/* COLORES */
.color-white     { color: var(--color-white); }
.color-darkwhite { color: var(--color-darkwhite); }
.color-lightgrey { color: var(--color-lightgrey); }
.color-grey      { color: var(--color-grey); }
.color-darkgrey  { color: var(--color-darkgrey); }
.color-black     { color: var(--color-black); }
.color-main      { color: var(--color-main); }
.color-secondary { color: var(--color-secondary); }
.color-info      { color: var(--color-info); }
.color-warning   { color: var(--color-warning); }
.color-success   { color: var(--color-success); }
.color-danger    { color: var(--color-danger); }
.color-lightblue { color: var(--color-lightblue); }
.color-brown     { color: var(--color-brown); }

.hover-color-white:hover     { color: var(--color-white); }
.hover-color-darkwhite:hover { color: var(--color-darkwhite); }
.hover-color-lightgrey:hover { color: var(--color-lightgrey); }
.hover-color-grey:hover      { color: var(--color-grey); }
.hover-color-darkgrey:hover  { color: var(--color-darkgrey); }
.hover-color-black:hover     { color: var(--color-black); }
.hover-color-main:hover      { color: var(--color-main); }
.hover-color-secondary:hover { color: var(--color-secondary); }
.hover-color-info:hover      { color: var(--color-info); }
.hover-color-warning:hover   { color: var(--color-warning); }
.hover-color-success:hover   { color: var(--color-success); }
.hover-color-danger:hover    { color: var(--color-danger); }
.hover-color-lightblue:hover { color: var(--color-lightblue); }
.hover-color-brown:hover     { color: var(--color-brown); }



/* FONT SIZE */



.line-0 { line-height: 0; }


.bg-blur {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
.bg-blur-sm {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.bg-blur-dark {
    background-color: rgba(100, 100, 100, 0.8);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.aspect-1 { aspect-ratio: 1; }

.shadow { box-shadow: 0 0 10px var(--color-lightgrey); }


/* CURSORS */
.cursor-pointer { cursor: pointer; }

.list-none { list-style: none; }

.overflow-auto   { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-scroll   { overflow: scroll; }
.overflow-x-scroll { overflow-x: scroll; }
.overflow-y-scroll { overflow-y: scroll; }
.overflow-hidden   { overflow: hidden; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }

.transition-all-1 { transition: all 0.1s ease; }
.transition-all-2 { transition: all 0.2s ease; }
.transition-all-3 { transition: all 0.3s ease; }
.transition-all-4 { transition: all 0.4s ease; }
.transition-all-5 { transition: all 0.5s ease; }

.opacity-0  { opacity: 0.0; }
.opacity-1  { opacity: 0.1; }
.opacity-2  { opacity: 0.2; }
.opacity-3  { opacity: 0.3; }
.opacity-4  { opacity: 0.4; }
.opacity-5  { opacity: 0.5; }
.opacity-6  { opacity: 0.6; }
.opacity-7  { opacity: 0.7; }
.opacity-8  { opacity: 0.8; }
.opacity-9  { opacity: 0.9; }
.opacity-10 { opacity: 1.0; }

.bg-opacity-0  { filter: opacity(0.0); }
.bg-opacity-1  { filter: opacity(0.1); }
.bg-opacity-2  { filter: opacity(0.2); }
.bg-opacity-3  { filter: opacity(0.3); }
.bg-opacity-4  { filter: opacity(0.4); }
.bg-opacity-5  { filter: opacity(0.5); }
.bg-opacity-6  { filter: opacity(0.6); }
.bg-opacity-7  { filter: opacity(0.7); }
.bg-opacity-8  { filter: opacity(0.8); }
.bg-opacity-9  { filter: opacity(0.9); }
.bg-opacity-10 { filter: opacity(1.0); }

.hover-bg-opacity-0:hover  { filter: opacity(0.0); }
.hover-bg-opacity-1:hover  { filter: opacity(0.1); }
.hover-bg-opacity-2:hover  { filter: opacity(0.2); }
.hover-bg-opacity-3:hover  { filter: opacity(0.3); }
.hover-bg-opacity-4:hover  { filter: opacity(0.4); }
.hover-bg-opacity-5:hover  { filter: opacity(0.5); }
.hover-bg-opacity-6:hover  { filter: opacity(0.6); }
.hover-bg-opacity-7:hover  { filter: opacity(0.7); }
.hover-bg-opacity-8:hover  { filter: opacity(0.8); }
.hover-bg-opacity-9:hover  { filter: opacity(0.9); }
.hover-bg-opacity-10:hover { filter: opacity(1.0); }

.rotate-45  { rotate: 45deg; }

.text-nowrap { text-wrap: nowrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap   { flex-wrap: wrap; }
.text-ellipsis { text-overflow: ellipsis; text-wrap: nowrap; overflow: hidden; }
.text-underline { text-decoration: underline }

@media (max-width: 1500px) {
    .por-w-100 { width: calc(100%); }
    .por-w-50  { width: calc( 50% - var(--offset-w)); }
}

@media (max-width: 767px) {
    .mov-hidden { display: none !important; }
    .mov-flex { display: flex !important; }
    .mov-block { display: block !important; }
    .mov-flex-nowrap { flex-wrap: nowrap; }

    .mov-px-2 { padding-left: var(--variable-2) !important; padding-right: var(--variable-2) !important; }
    .mov-w-100 { width: calc(100%); }
    .mov-w-95  { width: calc( 95% - var(--offset-w)); }
    .mov-w-90  { width: calc( 90% - var(--offset-w)); }
    .mov-w-85  { width: calc( 85% - var(--offset-w)); }
    .mov-w-80  { width: calc( 80% - var(--offset-w)); }
    .mov-w-75  { width: calc( 75% - var(--offset-w)); }
    .mov-w-70  { width: calc( 70% - var(--offset-w)); }
    .mov-w-66  { width: calc( calc(500%/3) - var(--offset-w)); }
    .mov-w-65  { width: calc( 65% - var(--offset-w)); }
    .mov-w-60  { width: calc( 60% - var(--offset-w)); }
    .mov-w-55  { width: calc( 55% - var(--offset-w)); }
    .mov-w-50  { width: calc( 50% - var(--offset-w)); }
    .mov-w-45  { width: calc( 45% - var(--offset-w)); }
    .mov-w-40  { width: calc( 40% - var(--offset-w)); }
    .mov-w-35  { width: calc( 35% - var(--offset-w)); }
    .mov-w-33  { width: calc( calc(100%/3) - var(--offset-w)); }
    .mov-w-30  { width: calc( 30% - var(--offset-w)); }
    .mov-w-25  { width: calc( 25% - var(--offset-w)); }
    .mov-w-20  { width: calc( 20% - var(--offset-w)); }
    .mov-w-15  { width: calc( 15% - var(--offset-w)); }
    .mov-w-10  { width: calc( 10% - var(--offset-w)); }
    .mov-w-7_5 { width: calc(7.5% - var(--offset-w)); }
    .mov-w-5   { width: calc(  5% - var(--offset-w)); }

    .mov-p-0  { padding: 0 !important; }
    .mov-p-1  { padding: var(--variable-1); }
    .mov-p-2  { padding: var(--variable-2); }
    .mov-p-3  { padding: var(--variable-3); }
    .mov-p-4  { padding: var(--variable-4); }
    .mov-p-5  { padding: var(--variable-5); }
    .mov-px-1 { padding-left: var(--variable-1); padding-right: var(--variable-1); }
    .mov-px-2 { padding-left: var(--variable-2); padding-right: var(--variable-2); }
    .mov-px-3 { padding-left: var(--variable-3); padding-right: var(--variable-3); }
    .mov-px-4 { padding-left: var(--variable-4); padding-right: var(--variable-4); }
    .mov-px-5 { padding-left: var(--variable-5); padding-right: var(--variable-5); }
    .mov-py-0 { padding-top: 0.0rem; padding-bottom: 0.0rem; }
    .mov-py-1 { padding-top: var(--variable-1); padding-bottom: var(--variable-1); }
    .mov-py-2 { padding-top: var(--variable-2); padding-bottom: var(--variable-2); }
    .mov-py-3 { padding-top: var(--variable-3); padding-bottom: var(--variable-3); }
    .mov-py-4 { padding-top: var(--variable-4); padding-bottom: var(--variable-4); }
    .mov-py-5 { padding-top: var(--variable-5); padding-bottom: var(--variable-5); }
    .mov-pt-0 { padding-top: 0 !important; }
    .mov-pt-1 { padding-top: var(--variable-1); }
    .mov-pt-2 { padding-top: var(--variable-2); }
    .mov-pt-3 { padding-top: var(--variable-3); }
    .mov-pt-4 { padding-top: var(--variable-4); }
    .mov-pt-5 { padding-top: var(--variable-5); }
    .mov-pb-0 { padding-bottom: 0 !important; }
    .mov-pb-1 { padding-bottom: var(--variable-1); }
    .mov-pb-2 { padding-bottom: var(--variable-2); }
    .mov-pb-3 { padding-bottom: var(--variable-3); }
    .mov-pb-4 { padding-bottom: var(--variable-4); }
    .mov-pb-5 { padding-bottom: var(--variable-5); }
    .mov-pl-0 { padding-left: 0 !important; }
    .mov-pl-1 { padding-left: var(--variable-1); }
    .mov-pl-2 { padding-left: var(--variable-2); }
    .mov-pl-3 { padding-left: var(--variable-3); }
    .mov-pl-4 { padding-left: var(--variable-4); }
    .mov-pl-5 { padding-left: var(--variable-5); }
    .mov-pr-0 { padding-right: 0 !important; }
    .mov-pr-1 { padding-right: var(--variable-1); }
    .mov-pr-2 { padding-right: var(--variable-2); }
    .mov-pr-3 { padding-right: var(--variable-3); }
    .mov-pr-4 { padding-right: var(--variable-4); }
    .mov-pr-5 { padding-right: var(--variable-5); }

    /* MARGINS */
    .mov-m-0   { margin: 0 !important; }
    .mov-m-1   { margin: var(--variable-1); }
    .mov-m-2   { margin: var(--variable-2); }
    .mov-m-3   { margin: var(--variable-3); }
    .mov-m-4   { margin: var(--variable-4); }
    .mov-m-5   { margin: var(--variable-5); }
    .mov-mx-1  { margin-left: var(--variable-1); margin-right: var(--variable-1); }
    .mov-mx-2  { margin-left: var(--variable-2); margin-right: var(--variable-2); }
    .mov-mx-3  { margin-left: var(--variable-3); margin-right: var(--variable-3); }
    .mov-mx-4  { margin-left: var(--variable-4); margin-right: var(--variable-4); }
    .mov-mx-5  { margin-left: var(--variable-5); margin-right: var(--variable-5); }
    .mov-my-1  { margin-top: var(--variable-1); margin-bottom: var(--variable-1); }
    .mov-my-2  { margin-top: var(--variable-2); margin-bottom: var(--variable-2); }
    .mov-my-3  { margin-top: var(--variable-3); margin-bottom: var(--variable-3); }
    .mov-my-4  { margin-top: var(--variable-4); margin-bottom: var(--variable-4); }
    .mov-my-5  { margin-top: var(--variable-5); margin-bottom: var(--variable-5); }
    .mov-mt-0  { margin-top: 0 !important; }
    .mov-mt-1  { margin-top: var(--variable-1); }
    .mov--mt-1 { margin-top: -1rem; }
    .mov-mt-2  { margin-top: var(--variable-2); }
    .mov-mt-3  { margin-top: var(--variable-3); }
    .mov-mt-4  { margin-top: var(--variable-4); }
    .mov-mt-5  { margin-top: var(--variable-5); }
    .mov-mb-0  { margin-bottom: 0 !important; }
    .mov-mb-1  { margin-bottom: var(--variable-1); }
    .mov-mb-2  { margin-bottom: var(--variable-2); }
    .mov-mb-3  { margin-bottom: var(--variable-3); }
    .mov-mb-4  { margin-bottom: var(--variable-4); }
    .mov-mb-5  { margin-bottom: var(--variable-5); }
    .mov-ml-0  { margin-left: 0 !important; }
    .mov-ml-1  { margin-left: var(--variable-1); }
    .mov-ml-2  { margin-left: var(--variable-2); }
    .mov-ml-3  { margin-left: var(--variable-3); }
    .mov-ml-4  { margin-left: var(--variable-4); }
    .mov-ml-5  { margin-left: var(--variable-5); }
    .mov-mr-0  { margin-right: 0 !important; }
    .mov-mr-1  { margin-right: var(--variable-1); }
    .mov-mr-2  { margin-right: var(--variable-2); }
    .mov-mr-3  { margin-right: var(--variable-3); }
    .mov-mr-4  { margin-right: var(--variable-4); }
    .mov-mr-5  { margin-right: var(--variable-5); }

    .mov-text-nowrap { text-wrap: nowrap; }
}