////////////////////////////////////////
///////////// - Variables - ////////////
////////////////////////////////////////

@media_xl: ~"(max-width: 1200px)";
@media_lg: ~"(max-width: 990px)";
@media_sl: ~"(max-width: 800px)";
@media_md: ~"(max-width: 600px)";
@media_sm: ~"(max-width: 450px)";
@media_xs: ~"(max-width: 350px)";

////////////////////////////////////////
////////////////////////////////////////

@main_color: #1059b8;
@main_color_2: #2076e6;
@sec_color: #00948a;
@sec_color_2: #0abbaf;
@blue_color: #325fc2;

@text_color: #353b46;
@warning_color: #ec9176;
@dark_color: #28272b;

////////////////////////////////////////

@slate_100: rgb(241 245 249);
@slate_200: rgb(226 232 240);
@slate_300: rgb(203 213 225);
@slate_400: rgb(148 163 184);
@slate_500: rgb(100 116 139);
@slate_600: #475569;
@slate_700: rgb(51 65 85);
@slate_800: rgb(30 41 59);
@slate_900: rgb(15 23 42);

////////////////////////////////////////

.flex() {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.stack() {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
}