:root {
    --index: calc(1vw + 1vh);
    --px-30: 30px;
    --color-first: #501c54;
    --color-second: #9F4382;
    --color-kronas: #A04382;
    --color-third: #A04382;
    --color-ferrari: #ff2800;
    --color-blue: #0496C7;
    --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-dark: #734976;
    --color-kronas-le-dark: #803261;
    --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-BFBFBF: #BFBFBF;
    --color-vertical-line: #E8E8E8;
    --color-E9E9E9: #E9E9E9;
    --color-C9C9C9: #C9C9C9;
    --color-F8F8F8: #F8F8F8;
    --color-F2F2F2: #F2F2F2;
    --color-D7D7D7: #D7D7D7;
    --color-EBEBEB: #EBEBEB;
    --color-451D54: #451D54;
    --color-F5EAF2: #F5EAF2;
    --color-FCFCFC: #FCFCFC;
    --color-first-80-percent: rgba(80, 28, 84, 0.80);
    --color-first-70-percent: rgba(80, 28, 84, 0.70);
    --color-first-60-percent: rgba(80, 28, 84, 0.60);
    --color-first-50-percent: rgba(80, 28, 84, 0.50);
    --color-first-30-percent: rgba(80, 28, 84, 0.30);
    --color-red-60-percent: rgba(220, 32, 32, 0.60);
    --color-to-right-gradient: radial-gradient(circle, rgba(175,72,136,1) 40%, rgba(141,50,103,1) 70%, rgba(98,21,61,1) 90%);
    --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: 24px;
    bottom: 25px;
    height: 150px;
    width: 270px;
    z-index: 2147483644 !important;
}
.ap-kroko:hover {
    cursor: pointer
}
.ap-page-speak, .ap-page-back, .page-back-header, .ap-back-sale-call, .ap-page-back-pay, .ap-back-confirm, .ap-back-auth-please, .ap-back-services-call, .ap-back-banner-wheel, .ap-page-back-uslugi {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147483646;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.7); /*rgba(92, 13, 64, 0.3);*/
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.ap-page-back,  .page-back-header, .ap-back-sale-call, .ap-page-back-pay, .ap-back-services-call, .ap-back-banner-wheel, .ap-page-back-uslugi {
    background-color: rgba(39, 43, 48, 0.30)
}
.ap-back-banner-wheel {
    backdrop-filter: unset;
    -webkit-backdrop-filter: unset;
}
.ap-btn-disable {
    display: none;
    position: fixed;
    top: 10px;
    left: 10px;
    border-radius: 8px;
    padding: 8px 20px;
    background-color: #5C0D40;
    color: #FFFFFF;
    z-index: 2147483647;
}
.ap-back-confirm, .ap-back-auth-please, .ap-back-services-call {
    align-items: center;
    justify-content: center;
}

/* DISPLAY */
.ap-flex {display: flex}
.ap-flex-col {flex-direction: column}
.ap-flex-row {flex-direction: row}
.ap-flex-row-reverse {flex-direction: row-reverse}
.ap-flex-wrap {flex-wrap: wrap}
.ap-grid {
    display: flex;
    flex-wrap: wrap;
}
.ap-grid-cols-1	{grid-template-columns: repeat(1, minmax(0, 1fr))}
.ap-grid-cols-2	{grid-template-columns: repeat(2, minmax(0, 1fr))}
.ap-grid-cols-3	{grid-template-columns: repeat(3, minmax(0, 1fr))}
.ap-grid-cols-4	{grid-template-columns: repeat(4, minmax(0, 1fr))}
.ap-grid-cols-5	{grid-template-columns: repeat(5, minmax(0, 1fr))}
.ap-grid-cols-6	{grid-template-columns: repeat(6, minmax(0, 1fr))}
.ap-grid-cols-7	{grid-template-columns: repeat(7, minmax(0, 1fr))}
.ap-grid-cols-8	{grid-template-columns: repeat(8, minmax(0, 1fr))}
.ap-grid-cols-9	{grid-template-columns: repeat(9, minmax(0, 1fr))}
.ap-grid-cols-10 {grid-template-columns: repeat(10, minmax(0, 1fr))}
.ap-grid-cols-11 {grid-template-columns: repeat(11, minmax(0, 1fr))}
.ap-grid-cols-12 {grid-template-columns: repeat(12, minmax(0, 1fr))}
.ap-contents {display: contents}
.ap-hidden {display: none!important}
.ap-items-start {align-items: start}
.ap-items-center {align-items: center}
.ap-items-stretch {align-items: stretch}
.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, .ap-whitespace-nowrap > :only-child {white-space: nowrap}
.ap-whitespace-nowrap\!, .ap-whitespace-nowrap\! > :only-child {white-space: nowrap!important}
.ap-gap-2 {gap: 0.5rem}
.ap-gap-5 {gap: 1.25rem}
.ap-gap-x-5 {gap: 0 1.25rem}
.ap-gap-y-5 {row-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-lg\! {font-size: 18px!important}
.ap-text-xl {font-size: 20px}
.ap-text-2xl {font-size: 24px}
.ap-text-3xl {font-size: 30px}
.ap-font-semibold {font-weight: 600}
.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}
.ap-decoration-kronas {text-decoration-color: var(--color-kronas)}
.ap-decoration-0\.1 {text-decoration-thickness: var(--rem-0-5px)}
.ap-list-inside	{list-style-position: inside}
/* COLORS */
.ap-text-general {color: var(--color-first)}
.ap-text-second {color: #9F4382}
.ap-text-kronas {color: var(--color-kronas-text)}
.ap-text-white {color: var(--color-white)}
.ap-text-6A7178 {color: var(--color-lang)}
.ap-text-ferrari {color: var(--color-ferrari)}
.ap-text-bade {color: var(--color-blue)}
/* TEXT ALIGNS */
.ap-text-center {text-align: center}
.ap-text-left {text-align: left}
.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-f2f2f2 {background-color: var(--color-F2F2F2)}
.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-mt-2 {margin-top: 8px}
.ap-mt-2\.5 {margin-top: 10px}
.ap-mt-5 {margin-top: 20px}
.ap-mt-10 {margin-top: 40px}
.ap-ml-2 {margin-left: 8px}
.ap-ml-5 {margin-left: 20px}
.ap-ml-10 {margin-left: 40px}
.ap-ml-20 {margin-left: 80px}
.ap-mr-2 {margin-right: 8px}
.ap-mr-5 {margin-right: 20px}
.ap-mr-10 {margin-right: 40px}
.ap-mr-20 {margin-right: 80px}
.ap-mb-10 {margin-bottom: 40px}
.ap-mb-5 {margin-bottom: 20px}
.ap-mb-2 {margin-bottom: 8px}
.ap-mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.ap-my-5 {
    margin-top: 20px;
    margin-bottom: 20px;
}
.ap-my-10 {
    margin-top: 40px;
    margin-bottom: 40px;
}
/* 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 {
    margin-top: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
}
.ap-pt-2 {padding-top: 8px}
.ap-pt-\[50px\] {padding-top: 50px}
.ap-pl-5 {padding-left: 20px}
.ap-pl-10 {padding-left: 40px}
.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-1\/6 {width: 16.666667%}
.ap-w-2\/3 {width: 66.6%}
.ap-w-3\/4 {width: 75%}
.ap-w-0\/9 {width: 90%}
.ap-w-\[150px\] {width: 150px}
.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-2 {height: 8px}
.ap-h-3 {height: 12px}
.ap-h-4 {height: 16px}
.ap-h-5 {height: 20px}
.ap-h-3\/4 {height: 75vh}
.ap-h-full {height: 100%}
.ap-h-screen {height: 100vh}
.ap-h-\[460px\] {height: 460px}
/* 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-left-1\/2 {left: 50%}
.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)}
/* ROUNDED */
.ap-rounded-md {border-radius: 8px}
.ap-rounded-lg {border-radius: 16px}
.ap-rounded-xl {border-radius: 32px}
.ap-rounded-2xl {border-radius: 64px}
/* 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)}
.hover\:ap-underline:hover {text-decoration-line: underline}
/* TRANSFORMS */
.-translate-1\/2 {transform: translate(-50%, -50%)}
.-translate-y-1\/2 {transform: translateY(-50%)}
.ap-translate-y-0 {transform: translateY(0)}
.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)}
/* Z_INDEXES */
.ap-z-10 {z-index: 10}
.ap-z-999 {z-index: 999}

.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;
}
.modal-auth-please {
    min-width: 320px;
    min-height: 60px;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-kronas-dark);
    background-color: var(--color-white);
    border: 1px solid var(--color-kronas-dark);
    border-radius: 12px;
}
.important::before {
    content: '* ';
    color: #ff2800;
}
/* SCREENS */
.space-x-5 {
    display: flex;
    row-gap: 1.25rem;
}
/* 2XL */
@media screen and (max-width: 1400px) {
    .xxl\:ap-ml-12 {margin-left: 30px}
}
/* XL */
@media screen and (max-width: 1280px) {
    .xl\:ap-hidden {display: none!important}
}
    /* LG */
@media screen and (max-width: 999px) {
    .max999\:ap-hidden {display: none!important}
    .max999\:ap-flex-row {flex-direction: row}
    .max999\:ap-flex-col {flex-direction: column}
    .max999\:ap-items-center {align-items: center}
    .max999\:ap-items-stretch {align-items: stretch}
    .max999\:ap-pl-0 {padding-left: 0}
    .max999\:ap-max-w-1\/3 {max-width: 33.333333%}
    .max999\:ap-max-w-3\/12 {max-width: 30%}
    .max999\:ap-gap-x-2 {row-gap: 8px}
    .max999\:ap-my-0 {
        margin-top: 0;
        margin-bottom: 0;
    }
    .max999\:ap-mb-0 {margin-bottom: 0}
}
@media (min-width: 1000px) {
    .lg\:ap-hidden {display: none!important}
}
/* 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-x-10 > :not(:first-child) {margin-left: 40px}
    .md\:ap-space-y-0 > :not(:first-child) {margin-top: 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%}
    .md\:ap-translate-y-5 {transform: translateY(20px)}
    .md\:ap-mr-20 {margin-right: 80px}
    .md\:ap-whitespace-nowrap {white-space: nowrap}
    .md\:ap-overflow-hidden {overflow: hidden}
}
/* SM */
@media (max-width: 767px) {
    .sm\:ap-w-full {width: 100%}
    .sm\:ap-items-start {align-items: start}
    .sm\:ap-mt-10 {margin-top: 40px}
    .sm\:ap-pt-10 {padding-top: 40px}
    .sm\:ap-pl-0 {padding-left: 0}
    .sm\:ap-space-y-5 {margin-top: 20px}
    .sm\:ap-hidden {display: none!important}
    .sm\:ap-text-start {text-align: start}
    .sm\:ap-flex-col {flex-direction: column}
    .sm\:ap-flex-row {flex-direction: row}
}
/* XS */
@media (max-width: 639px) {
    .w-1\/12	{width: 8.333333%}
    .w-2\/12	{width: 16.666667%}
    .w-3\/12	{width: 25%}
    .w-4\/12	{width: 33.333333%}
    .w-5\/12	{width: 41.666667%}
    .w-6\/12	{width: 50%}
    .w-7\/12	{width: 58.333333%}
    .w-8\/12	{width: 66.666667%}
    .w-9\/12	{width: 75%}
    .w-10\/12	{width: 83.333333%}
    .w-11\/12	{width: 91.666667%}
}
@media (max-width: 551px) {
    .xs\:ap-grid-cols-none {grid-template-columns: none!important}
    .xs\:ap-flex {display: flex!important}
    .xs\:ap-flex-row {flex-direction: row!important}
    .xs\:ap-overflow-x-scroll {overflow-x: scroll!important}
}
@media (max-width: 374px) {
    .minScreenImportant {display: flex}
}

/* todo TAILWIND CSS */
@media (min-width: 640px) { /* todo Tailwind SM */
    .sm\:\:w-1\/12	{width: 8.333333%}
    .sm\:\:w-2\/12	{width: 16.666667%}
    .sm\:\:w-3\/12	{width: 25%}
    .sm\:\:w-4\/12	{width: 33.333333%}
    .sm\:\:w-5\/12	{width: 41.666667%}
    .sm\:\:w-6\/12	{width: 50%}
    .sm\:\:w-7\/12	{width: 58.333333%}
    .sm\:\:w-8\/12	{width: 66.666667%}
    .sm\:\:w-9\/12	{width: 75%}
    .sm\:\:w-10\/12	{width: 83.333333%}
    .sm\:\:w-11\/12	{width: 91.666667%}
}
@media (min-width: 768px) { /* todo Tailwind MD */
    .md\:\:w-1\/12	{width: 8.333333%}
    .md\:\:w-2\/12	{width: 16.666667%}
    .md\:\:w-3\/12	{width: 25%}
    .md\:\:w-4\/12	{width: 33.333333%}
    .md\:\:w-5\/12	{width: 41.666667%}
    .md\:\:w-6\/12	{width: 50%}
    .md\:\:w-7\/12	{width: 58.333333%}
    .md\:\:w-8\/12	{width: 66.666667%}
    .md\:\:w-9\/12	{width: 75%}
    .md\:\:w-10\/12	{width: 83.333333%}
    .md\:\:w-11\/12	{width: 91.666667%}
}
@media (min-width: 1024px) { /* todo Tailwind LG */
    .lg\:\:w-1\/12	{width: 8.333333%}
    .lg\:\:w-2\/12	{width: 16.666667%}
    .lg\:\:w-3\/12	{width: 25%}
    .lg\:\:w-4\/12	{width: 33.333333%}
    .lg\:\:w-5\/12	{width: 41.666667%}
    .lg\:\:w-6\/12	{width: 50%}
    .lg\:\:w-7\/12	{width: 58.333333%}
    .lg\:\:w-8\/12	{width: 66.666667%}
    .lg\:\:w-9\/12	{width: 75%}
    .lg\:\:w-10\/12	{width: 83.333333%}
    .lg\:\:w-11\/12	{width: 91.666667%}
}
@media (min-width: 1280px) { /* todo Tailwind XL */
    .xl\:\:w-1\/12	{width: 8.333333%}
    .xl\:\:w-2\/12	{width: 16.666667%}
    .xl\:\:w-3\/12	{width: 25%}
    .xl\:\:w-4\/12	{width: 33.333333%}
    .xl\:\:w-5\/12	{width: 41.666667%}
    .xl\:\:w-6\/12	{width: 50%}
    .xl\:\:w-7\/12	{width: 58.333333%}
    .xl\:\:w-8\/12	{width: 66.666667%}
    .xl\:\:w-9\/12	{width: 75%}
    .xl\:\:w-10\/12	{width: 83.333333%}
    .xl\:\:w-11\/12	{width: 91.666667%}
}
@media (min-width: 1536px) { /* todo Tailwind 2XL */
    [class*="2xl::w-1/12"] {width: 8.333333%}
    [class*="2xl::w-2/12"] {width: 16.666667%}
    [class*="2xl::w-3/12"] {width: 25%}
    [class*="2xl::w-4/12"] {width: 33.333333%}
    [class*="2xl::w-5/12"] {width: 41.666667%}
    [class*="2xl::w-6/12"] {width: 50%}
    [class*="2xl::w-7/12"] {width: 58.333333%}
    [class*="2xl::w-8/12"] {width: 66.666667%}
    [class*="2xl::w-9/12"] {width: 75%}
    [class*="2xl::w-10/12"] {width: 83.333333%}
    [class*="2xl::w-11/12"] {width: 91.666667%}
}