:root {
    --index: calc(1vw + 1vh);
    --px-30: 30px;
    --color-first: #501c54;
    --color-second: #9F4382;
    --color-third: #A04382;
    --color-ferrari: #ff2800;
    --color-red: #DC2020;
    --color-background: #F5F5F5;
    --color-background-opacity: rgba(255, 255, 255, 0.15);
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-dark-text: #101213;
    --color-border: #CED4DA;
    --color-lang: #6A7178;
    --color-text: #1E152A;
    --color-btns-inpts: #272B30;
    --color-label: #4F575E;
    --color-background-dis-btn: #F1F3F5;
    --color-border-dis-btn: #DEE2E6;
    --color-text-btn: #ADB5BD;
    --color-kronas-text: #A04382;
    --color-kronas-light: #BD5AA2;
    --color-active-option: #FFDFF7;
    --color-message: #F7F7FF;
    --color-text-message: #9B9B9B;
    --color-ball-mess: #F3F3F3;
    --color-success: #EBFFE8;
    --color-success-img: #CDFDC5;
    --color-success-text: #159600;
    --color-error: #FADFDF;
    --color-error-img: #FCCFCF;
    --color-background-favorite: #FFFBFE;
    --color-error-text: #DC2020;
    --color-designer: #9B4681;
    --color-background-kronas: #734976;
    --color-active-folder: #FFE7F7;
    --color-border-menu-account: #EBEBEB;
    --color-BBBBBB: #BBBBBB;
    --color-vertical-line: #E8E8E8;
    --color-E9E9E9: #E9E9E9;
    --color-C9C9C9: #C9C9C9;
    --color-F8F8F8: #F8F8F8;
    --color-D7D7D7: #D7D7D7;
    --color-EBEBEB: #EBEBEB;
    --color-451D54: #451D54;
    --color-F5EAF2: #F5EAF2;
    --color-FCFCFC: #FCFCFC;
    --color-first-60-percent: rgba(80, 28, 84, 0.60);
    --color-first-50-percent: rgba(80, 28, 84, 0.50);
    --color-red-60-percent: rgba(220, 32, 32, 0.60);
    --color-to-right-gradient: linear-gradient(to right, var(--color-second), var(--color-kronas-text), var(--color-kronas-light), var(--color-kronas-light), var(--color-kronas-light), var(--color-kronas-text), var(--color-second));
    --rem-0-5px: 0.03125rem; /* 1rem = 16px */
    --rem-1-5px: 0.09375rem;
    --transition-all-300-ease: all 300ms ease;
    --transition-all-ease: all 0.7s ease;
    --2px: calc(var(--index) * 0.1);
    --4px: calc(var(--index) * 0.2);
    --8px: calc(var(--index) * 0.4);
    --10px: calc(var(--index) * 0.42);
    --12px: calc(var(--index) * 0.5);
    --14px: calc(var(--index) * 0.56);
    --15px: calc(var(--index) * 0.6);
    --16px: calc(var(--index) * 0.64);
    --18px: calc(var(--index) * 0.8);
    --20px: calc(var(--index) * 0.84);
    --22px: calc(var(--index) * 1);
    --23px: calc(var(--index) * 1.1);
    --25px: calc(var(--index) * 1.2);
    --30px: calc(var(--index) * 1.28);
    --40px: calc(var(--index) * 1.6);
    --50px: calc(var(--index) * 2.4);
    --80px: calc(var(--index) * 3.5);
    --140px: calc(var(--index) * 5.8);
    --150px: calc(var(--index) * 6);
    --180px: calc(var(--index) * 7.5);
    --240px: calc(var(--index) * 10.5);
    --300px: calc(var(--index) * 12);
    --420px: calc(var(--index) * 16);
    --500px: calc(var(--index) * 20);
    --600px: calc(var(--index) * 24);
}

*::-webkit-scrollbar {width: 10px}
*::-webkit-scrollbar-thumb {background-color: var(--color-kronas-text); border-radius: 4px}
*::-webkit-scrollbar-track {background-color: var(--color-active-option); border-radius: 4px}

/* AlexProger */
.ap-kroko {
    position: fixed;
    right: 23.5px;
    bottom: 25px;
    height: 150px;
    width: 270px;
    z-index: 2147483644 !important;
}
.ap-kroko:hover {
    cursor: pointer
}
.ap-page-speak, .ap-page-back, .ap-back-sale-call, .ap-page-back-pay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147483647;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.7); /*rgba(92, 13, 64, 0.3);*/
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.ap-page-back, .ap-back-sale-call, .ap-page-back-pay {
    background-color: rgba(39, 43, 48, 0.30)
}
.ap-btn-disable {
    display: none;
    position: fixed;
    top: 10px;
    left: 10px;
    border-radius: 8px;
    padding: 8px 20px;
    background-color: #5C0D40;
    color: #FFFFFF;
    z-index: 2147483648;
}

/* DISPLAY */
.ap-flex {display: flex}
.ap-flex-col {flex-direction: column}
.ap-flex-row {flex-direction: row}
.ap-flex-wrap {flex-wrap: wrap}
.ap-hidden {display: none!important}
.ap-items-start {align-items: start}
.ap-items-center {align-items: center}
.ap-items-end {align-items: end}
.ap-justify-between {justify-content: space-between}
.ap-justify-center {justify-content: center}
.ap-justify-start {justify-content: start}
.ap-justify-end {justify-content: right}
.ap-self-end {align-self: end}
.ap-whitespace-nowrap {white-space: nowrap}
.ap-whitespace-wrap {white-space: wrap}
.ap-gap-2 {gap: 0.5rem}
.ap-gap-5 {gap: 1.25rem}
.ap-gap-y-10 {row-gap: 2.5rem}
.ap-gap-y-20 {row-gap: 5rem}
/* CURSORS */
.ap-cursor-pointer {cursor: pointer}
.ap-cursor-default {cursor: default}
/* FONTS */
.ap-text-xs {font-size: 12px}
.ap-text-sm {font-size: 14px}
.ap-text-lg {font-size: 18px}
.ap-text-xl {font-size: 20px}
.ap-text-2xl {font-size: 24px}
.ap-text-3xl {font-size: 30px}
.ap-font-bold {font-weight: 700}
/* TEXT TRANSFORMS */
.ap-uppercase {text-transform: uppercase}
.ap-lowercase {text-transform: lowercase}
.ap-capitalize {text-transform: capitalize}
/* TEXT DECORATIONS */
.ap-line-through {text-decoration-line: line-through}
/* COLORS */
.ap-text-general {color: var(--color-first)}
.ap-text-second {color: #9F4382}
.ap-text-kronas {color: var(--color-kronas-text)}
.ap-text-6A7178 {color: var(--color-lang)}
/* TEXT ALIGNS */
.ap-text-center {text-align: center}
.ap-text-right {text-align: right}
/* BACKGROUNDS */
.ap-bg-gradient {background: linear-gradient(180deg, rgba(110, 0, 113, 0) 0%, rgba(81, 0, 83, 0.34) 100%)}
.ap-bg-f8f8f8 {background-color: var(--color-F8F8F8)}
.ap-bg-first {background-color:  var(--color-first)}
.ap-bg-kronas {background-color:  var(--color-kronas-text)}
/* SPACES */
.ap-space-x-2 > :not(:first-child) {margin-left: 8px}
.ap-space-x-2\.5 > :not(:first-child) {margin-left: 10px}
.ap-space-x-5 > :not(:first-child) {margin-left: 20px}
.ap-space-x-10 > :not(:first-child) {margin-left: 40px}
.ap-space-y-2 > :not(:first-child) {margin-top: 8px}
.ap-space-y-2\.5 > :not(:first-child) {margin-top: 10px}
.ap-space-y-5 > :not(:first-child) {margin-top: 20px}
.ap-space-y-7\.5 > :not(:first-child) {margin-top: 30px}
.ap-space-y-10 > :not(:first-child) {margin-top: 40px}
/* MARGINS */
.ap-mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.ap-mt-2\.5 {margin-top: 10px}
.ap-mr-2 {margin-right: 8px}
.ap-mr-5 {margin-right: 20px}
.ap-mb-10 {margin-bottom: 40px}
.ap-mb-5 {margin-bottom: 20px}
.ap-mb-2 {margin-bottom: 8px}
.ap-my-5 {
    margin-top: 20px;
    margin-bottom: 20px;
}
/* PADDINGS */
.ap-p-1 {padding: 4px}
.ap-p-2 {padding: 8px}
.ap-p-5 {padding: 20px}
.ap-px-2 {
    padding-left: 8px;
    padding-right: 8px;
}
.ap-px-5 {
    padding-left: 20px;
    padding-right: 20px;
}
.ap-px-10 {
    padding-left: 40px;
    padding-right: 40px;
}
.ap-px-20 {
    padding-left: 80px;
    padding-right: 80px;
}
.ap-py-1 {
    padding-top: 4px;
    padding-bottom: 4px;
}
.ap-py-2 {
    padding-top: 8px;
    padding-bottom: 8px;
}
.ap-py-5 {
    padding-top: 20px;
    padding-bottom: 20px;
}
.ap-pt-2 {padding-top: 8px}
.ap-pt-\[50px\] {padding-top: 50px}
.ap-pb-2 {padding-bottom: 8px}
.ap-pb-5 {padding-bottom: 20px}
/* OVERFLOWS */
.ap-overflow-hidden {overflow: hidden}
.ap-overflow-x-scroll {
    overflow-x: scroll;
    -ms-overflow-x: scroll;
}
.ap-overflow-y-scroll {
    overflow-y: scroll;
    -ms-overflow-y: scroll;
}
.ap-scrollbar-kronas::-webkit-scrollbar {width: 10px; height: 10px/* Ширина полоси прокручування */}
.ap-scrollbar-kronas::-webkit-scrollbar-thumb {/* Колір пальця прокручування */
    background-color: var(--color-kronas);
    border-radius: 4px;
}
.ap-scrollbar-kronas::-webkit-scrollbar-thumb:active {background-color: var(--color-kronas-dark)/* Колір при натисненні */}
.ap-scrollbar-kronas::-webkit-scrollbar-track {/* Колір фону прокручування */
    background-color: var(--color-kronas-light);
    border-radius: 4px;
}
/* WIDTHS */
.ap-w-full {width: 100%}
.ap-w-max {width: max-content}
.ap-w-1\/2 {width: 50%}
.ap-w-1\/3 {width: 33.3%}
.ap-w-2\/3 {width: 66.6%}
.ap-w-0\/9 {width: 90%}
.ap-w-\[320px\] {width: 320px}
.ap-max-w-\[300px\] {max-width: 300px}
.ap-min-w-\[200px\] {min-width: 200px}
.ap-min-w-\[300px\] {min-width: 300px}
/* HEIGHTS */
.ap-h-full {height: 100%}
.ap-h-\[450px\] {height: 450px}
/* POSITIONS */
.ap-fixed {position: fixed}
.ap-relative {position: relative}
.ap-absolute {position: absolute}
.ap-top-0 {top: 0}
.ap-top-2 {top: 8px}
.ap-top-5 {top: 20px}
.-ap-top-5\.5 {top: -22px}
.ap-top-1\/2 {top: 50%}
.ap-bottom-0 {bottom: 0}
.ap-left-0 {left: 0}
.ap-left-2 {left: 8px}
.ap-left-5 {left: 20px}
.ap-right-5 {right: 20px}
/* BORDERS */
.ap-border-0\.5 {border: var(--rem-0-5px) solid var(--color-lang)}
.ap-border-kronas {border-color: var(--color-kronas-text)}
.ap-border-0\.5 {border: var(--rem-0-5px)}
/* ROUNDED */
.ap-rounded-md {border-radius: 8px}
/* SHADOWS */
.ap-shadow-kronas {box-shadow: 0 5px 7px 0 var(--color-kronas-text)}
/* HOVERS */
.hover\:ap-bg-option:hover {background-color: var(--color-active-option)}
.hover\:ap-bg-kronas:hover {background-color: var(--color-kronas-text)}
.hover\:ap-text-white:hover {color: var(--color-white)}
/* TRANSFORMS */
.-translate-y-1\/2 {transform: translateY(-50%)}
.ap-translate-y-1 {transform: translateY(4px)}
.ap-translate-y-2 {transform: translateY(8px)}
.ap-translate-y-5 {transform: translateY(20px)}
/* TRANSITIONS */
.ap-transition-all-300-ease {transition: all 300ms ease}
.ap-transition-all-500-ease {transition: all 500ms ease}
.ap-transition-all-700-ease {transition: var(--transition-all-ease)}
.ap-input-check {
    border-radius: 8px;
    width: 16px;
    height: 16px;
}
.ap-input-check:checked {accent-color: var(--color-kronas-text)}
.reg-me, .active-reg-me {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: max-content;
    max-width: 300px;
    padding: 11px;
    font-size: 1.2rem;
    cursor: pointer;
    text-transform: uppercase;
    color: var(--color-kronas-text);
}
.minScreenImportant {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-kronas-text);
    background-color: var(--color-white);
    z-index: 99999999!important;
}
/* SCREENS */
/* MD */
@media (min-width: 768px) {
    .md\:ap-flex-row {flex-direction: row}
    .md\:ap-items-start {align-items: start}
    .md\:ap-space-x-0 > :not(:first-child) {margin-left: 0}
    .md\:ap-space-y-10 > :not(:first-child) {margin-top: 40px}
    .md\:ap-mb-0 {margin-bottom: 0}
    .md\:ap-w-w-2\/3 {width: 66.6%}
    .md\:ap-w-w-1\/3 {width: 33.3%}
}
@media (max-width: 374px) {
    .minScreenImportant {display: flex}
}