:root {
    --white: #ffffff;
    --black: #000000;
    --text: #909090;
    --text-2: #505050;
    --text-3: #333333;
    --text-4: #40484E;
    --text-5: #2C3135;
    --text-7: #FDFEFE;
    --gray: #333e48;
    --gray-2: #73787d;
    --gray-4: #e1e1e1;
    --gray-5: #ebebeb;
    --gray-6: #f5f5f5;
    --primary: #172554;
    --primary-2: #D80027;
    --secondary: #001f85;
    --third: #FCB500;
    --third-2: #FFE604;
    --third-3: #FFDC00;
    --third-4: #FFDF8B;
    --line: #e1e1e1;
    --line-2: #ececec;
    --line-3: #4f4f4f;
    --line-4: #BFC6CC;
    --bg: #fafafa;
    --bg-2: #F8F8F8;
    --bg-3: #F6F6F6;
    --price: #FFEAB6;
    --text-blue: #eff6ff;
    --text-active: #eff6ff;
    --green: #008000;
    --ligth-red: #f87171;
}

.fs-8  { font-size: 8px; }
.fs-9  { font-size: 9px; }
.fs-10 { font-size: 10px; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-15 { font-size: 15px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-20 { font-size: 20px; }
.fs-22 { font-size: 22px; }
.fs-24 { font-size: 24px; }
.fs-26 { font-size: 26px; }
.fs-28 { font-size: 28px; }

.ls-05 { letter-spacing: 0.5px; }
.ls-1 { letter-spacing: 1px; }
.ls-2 { letter-spacing: 2px; }
.ls-3 { letter-spacing: 3px; }
.ls-4 { letter-spacing: 4px; }

.d-flex         { display: flex; }
.flex-column    { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }

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

.ai-start       { align-items: flex-start; }
.ai-center      { align-items: center; }
.ai-end         { align-items: flex-end; }
.ai-stretch     { align-items: stretch; }

.flex-1         { flex: 1; }
.gap-5          { gap: 5px; }
.gap-10         { gap: 10px; }
.gap-20         { gap: 20px; }

.mt-5  { margin-top: 5px; }    .mb-5  { margin-bottom: 5px; }
.mt-10 { margin-top: 10px; }   .mb-10 { margin-bottom: 10px; }
.mt-20 { margin-top: 20px; }   .mb-20 { margin-bottom: 20px; }
.mt-30 { margin-top: 30px; }   .mb-30 { margin-bottom: 30px; }

.ml-5  { margin-left: 5px; }   .mr-5  { margin-right: 5px; }
.ml-10 { margin-left: 10px; }  .mr-10 { margin-right: 10px; }

.mx-auto { margin-left: auto; margin-right: auto; }
.my-10   { margin-top: 10px; margin-bottom: 10px; }
.m-0     { margin: 0; }

.pt-5  { padding-top: 5px; }    .pb-5  { padding-bottom: 5px; }
.pt-10 { padding-top: 10px; }   .pb-10 { padding-bottom: 10px; }
.pt-20 { padding-top: 20px; }   .pb-20 { padding-bottom: 20px; }

.pl-10 { padding-left: 10px; }  .pr-10 { padding-right: 10px; }
.px-15 { padding-left: 15px; padding-right: 15px; }
.py-15 { padding-top: 15px; padding-bottom: 15px; }
.p-0   { padding: 0; }

.w-100 { width: 100%; }
.h-100 { height: 100%; }

.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }

.cursor-pointer { cursor: pointer; }
.overflow-hidden { overflow: hidden; }
.user-select-none { user-select: none; }

.border-none { border: none; }
.outline-none { outline: none; }

.op-50 { opacity: 0.5; }
.transition-3 { transition: 0.3s ease; }

/* --- TRANSITION METHODS (ALL BROWSERS) --- */
.tr-1 {
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
}

.tr-2 {
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.tr-3 {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.tr-5 {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.tr-linear {
    -webkit-transition-timing-function: linear;
    -moz-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
}

.tr-ease-in {
    -webkit-transition-timing-function: ease-in;
    -moz-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
}

.tr-ease-out {
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.tr-opacity {
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

.tr-color {
    -webkit-transition: color 0.3s ease, background-color 0.3s ease;
    -moz-transition: color 0.3s ease, background-color 0.3s ease;
    -o-transition: color 0.3s ease, background-color 0.3s ease;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.tr-none {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

.icon-24 {
    width: 24px;
    height: 24px;
    color: inherit;
    display: inline-block;
    vertical-align: middle;
}

.text-red {
    color: #ff4d4d;
}

.fullscreen {
    position: absolute;
    top: 8px;
    left: 8px;
}

.chevron-down {
    width: 20px;
    height: 20px;
}

.chevron-right {
    width: 15px;
    height: 15px;
    color: rgba(15, 15, 18, 0.75);
    margin: 3px 4px;
}

.eyes {
    width: 22px;
    height: 22px;
}

.cross {
    width: 16px;
    height: 16px;
    color: black;
    stroke-width: 2px !important;
}

/*
    <svg class="icon-24"><use href="icons.svg#user"></use></svg>
 */