:root {
    --information-box-border-info: rgb(158, 234, 249);
    --information-box-background-info: rgb(207, 244, 252);
    --information-box-color-info: rgb(5, 81, 96);
    --information-box-border-warning: rgb(255, 230, 156);
    --information-box-background-warning: rgb(255, 243, 205);
    --information-box-color-warning: rgb(102, 77, 3);
    --information-box-border-important: rgb(241, 174, 181);
    --information-box-background-important: rgb(248, 215, 218);
    --information-box-color-important: rgb(88, 21, 28);
}

/**
 A color
 */
/*.fi-main-ctn a {*/
/*    text-decoration: underline;*/
/*    color: #d97706;*/
/*}*/
/*.fi-main-ctn a:hover{*/
/*color: #f59e0b;*/
/*}*/

input[readonly] {
    background: #f3f3f3;
}


/**
    Radio buttons color
 */
[type=radio]:checked:hover, [type=checkbox]:checked, [type=radio]:checked, [type=radio]:checked:focus{
    background-color: #d97706;
}
[type=checkbox]:focus, [type=radio]:focus {
    --tw-ring-color: #d97706;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) #d97706;
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) #d97706;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), #d97706;
}

/**
    Information Box
 */
.fi-information-box{
    padding: 15px 15px 15px 50px;
    border: 1px solid #eee;
    border-radius: 10px;
    font-size: 14px;
    position: relative;
}
svg.fi-information-box-icon {
    width: 24px;
    position: absolute;
    left: 15px;
    top: 15px;
}
.fi-information-box.info{
    color: var(--information-box-color-info);
    background-color: var(--information-box-background-info);
    border-color: var(--information-box-border-info);
}
.fi-information-box.warning{
    color: var(--information-box-color-warning);
    background-color: var(--information-box-background-warning);
    border-color: var(--information-box-border-warning);
}
.fi-information-box.important{
    color: var(--information-box-color-important);
    background-color: var(--information-box-background-important);
    border-color: var(--information-box-border-important);
}
.fi-information-box a {
    text-decoration: underline;
    font-weight: 500;
}
.fi-information-box a:hover {
    text-decoration: none;
}
.fi-information-box ol {
    list-style: arabic;
    padding-left: 15px;
}
.fi-information-box p{
    margin-bottom: 10px;
}
.fi-information-box p:last-child{
    margin-bottom: 0px;
}

/* Тултипы */
[data-tooltip-bottom],
[data-tooltip-left],
[data-tooltip-right],
[data-tooltip] {
    position: relative;
}
[data-tooltip-bottom]:hover::after,
[data-tooltip-left]:hover::after,
[data-tooltip-right]:hover::after,
[data-tooltip]:hover::after {
    all: initial;
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #1a1a1a;
    position: absolute;
    bottom: 100%;
    z-index: 10000000000;
    content: '';
    left: 50%;
    transform: translate(-50%, 0);
    margin-bottom: 5px;
}
[data-tooltip-right]:hover::after {
    margin-bottom: 0;
    bottom: auto;
    transform: rotate(90deg) translate(0, -50%);
    left: 100%;
    top: 50%;
    z-index: 10000000000;
    margin-left: -5px;
    margin-top: -5px;
}
[data-tooltip-left]:hover::after {
    margin-bottom: 0;
    bottom: auto;
    transform: rotate(-90deg) translate(0, -50%);
    left: auto;
    right: 100%;
    top: 50%;
    z-index: 10000000000;
    margin-right: -5px;
    margin-top: -5px;
}
[data-tooltip-bottom]:hover::after {
    margin-bottom: 0;
    bottom: auto;
    transform: rotate(180deg) translate(-50%, 0);
    top: 100%;
    z-index: 10000000000;
    margin-left: -20px;
    margin-top: 5px;
}
[data-tooltip-bottom]:hover::before,
[data-tooltip-left]:hover::before,
[data-tooltip-right]:hover::before,
[data-tooltip]:hover::before {
    all: initial;
    font-family: "Arial";
    display: inline-block;
    border-radius: 5px;
    padding: 10px;
    background-color: #1a1a1a;
    content: attr(data-tooltip);
    color: #f9f9f9;
    position: absolute;
    bottom: 100%;
    width: 150px;
    left: 50%;
    z-index: 1000;
    transform: translate(-50%, 0);
    margin-bottom: 15px;
    text-align: center;
    font-size: 14px;
}
[data-tooltip-right]:hover::before {
    margin-bottom: 0;
    bottom: auto;
    transform: translate(0, -50%);
    left: 100%;
    top: 50%;
    content: attr(data-tooltip-right);
    margin-left: 15px;
}
[data-tooltip-left]:hover::before {
    margin-bottom: 0;
    bottom: auto;
    transform: translate(0, -50%);
    left: auto;
    right: 100%;
    top: 50%;
    content: attr(data-tooltip-left);
    margin-right: 15px;
}
[data-tooltip-bottom]:hover::before {
    margin-bottom: 0;
    bottom: auto;
    top: 100%;
    content: attr(data-tooltip-bottom);
    margin-top: 15px;
}
.mini[data-tooltip-left]:hover::before,
.mini[data-tooltip]:hover::before{
    padding: 4px;
}
.mini[data-tooltip-left]:hover::after {
    margin-bottom: 0;
    bottom: auto;
    transform: rotate(-90deg) translate(0, -50%);
    left: auto;
    right: 100%;
    top: 50%;
    z-index: 10000000000;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #1a1a1a;
    margin-right: 3px;
    margin-top: -3px;
}
.loader {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: inline-block;
    position: fixed;
    border: 5px solid;
    border-color: #ccc #ccc transparent transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    margin: 10% 47%;
    z-index: 9;
    top: 90px;
}
.loader::after,
.loader::before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 5px solid;
    border-color: transparent transparent #FF3D00 #FF3D00;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    box-sizing: border-box;
    animation: rotationBack 0.5s linear infinite;
    transform-origin: center center;
}
.loader::before {
    width: 80px;
    height: 80px;
    border-color: #ccc #ccc transparent transparent;
    animation: rotation 1.5s linear infinite;
}
.loader_hidden {
    display: none !important;
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes rotationBack {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}
.color-picker-class {
    width: 100px;
    height: 40px;
}
.fi-input-wrp:has(.min-w-0):has(.color-picker-class) {
    width: 100px;
}
span.fi-tabs-item-label {
    white-space: nowrap;
}
.fi-ac-btn-action {
    gap: 0 !important;
}
.table-product-item > div > div > div >svg {
    width: 15px;
}
.filepond--image-preview {
    background: #ccc !important;
}
.iiko_webhook_label {
    background: #cff4fc;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    color: #055160;
}

/* Input color */
input[type="color"]::-webkit-color-swatch {
    border: 0!important;
}

/* Facebook fieldset */
.facebook-fieldset {
    position: relative;
}
.facebook-fieldset legend {
    padding-right: 6px;
}
.facebook-fieldset .fi-fo-field-wrp-hint {
    position: absolute;
    left: 23px;
    top: -22px;
    opacity: 0;
}
.facebook-fieldset .fi-fo-field-wrp-hint svg {
    width: 90px;
}
.max-w-sm:has(.fi-modal-content):has(.plan_description) {
    max-width: 32rem !important;
}

.fi-ta-filter-indicators .fi-badge-delete-button svg {
    color: rgba(var(--primary-500, 1));
}

.new_plan_badge {
    display: inline-block;
    padding: 4px 4px !important;
    background: red;
    border-radius: 6px;
    font-size: 10px !important;
    color: white;
    line-height: 1 !important;
    vertical-align: middle;
    position: relative;
    margin: 2px 0px 0px 10px;
}

.table_infoblock {
    color: var(--information-box-color-important);
    background-color: var(--information-box-background-important);
    border-color: var(--information-box-border-important) !important;
    padding: 15px 15px 15px 50px;
    border: 1px solid #eee;
    border-radius: 10px;
    font-size: 14px;
    position: relative;
}
.fi-no-notification-date {
    font-size: 11px!important;
    position: relative;
    top: -5px;
}

.check-order-sound-wrapper > div > div:first-child {
    display: none;
}
.checkSoundIcon {
    display: inline-block;
    width: 18px;
    height: 20px;
    vertical-align: middle;
}
.checkSoundIcon:hover svg {
    color: rgba(var(--primary-500, 1));
    cursor: pointer;
}
span:has(.has_sup) > sup {
    right: 30px;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance:none;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg class='fi-ta-empty-state-icon h-6 w-6 text-gray-500 dark:text-gray-400' xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' aria-hidden='true' data-slot='icon' style=' color: %23aaa;%0A'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18 18 6M6 6l12 12'%3E%3C/path%3E%3C/svg%3E");
}
input[type="search"]::-webkit-search-decoration:hover,
input[type="search"]::-webkit-search-cancel-button:hover,
input[type="search"]::-webkit-search-results-button:hover,
input[type="search"]::-webkit-search-results-decoration:hover {
    cursor: pointer;
}
.fi-main.max-w-7xl{
    max-width: none!important;
}
.no-spinner .animate-spin {
    display: none !important;
}