/* scaling happen for 4 time (14% each), and preserve the scale happen for 3 time (8% each) */
/* then we add for 20% in the beginning to perform delay behavior in infinite loop animation */
@keyframes ai-loading-scale {
    0%, 20% {
        transform: scale(1);
    }

    38.5%, 40.5% {
        transform: scale(0.3);
    }

    59%, 61% {
        transform: scale(1);
    }

    79.5%, 81.5% {
        transform: scale(0.3);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes ai-loading-scale-reverse {
    0%, 20% { /* add delay behavior in each keyframe */
        transform: scale(1);
    }

    38.5%, 40.5% {
        transform: scale(1);
    }

    59%, 61% {
        transform: scale(0.3);
    }

    79.5%, 81.5%, 100%  {
        transform: scale(1);
    }
}

@keyframes fade-scale-in-dropdown {
    0% {
        opacity: 0;
        transform: scale(0.85) translateY(100%);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(100%);
    }
}


@keyframes hide-flex {
    0% {
        display: flex;
    }

    100% {
        display: none;
    }
}

html, body {
    height: 100%;
    text-rendering: optimizelegibility;
    font-family: var(--museo-rounded-300);
    background-color: white;
    color: var(--gray-light);
}

a {
    text-decoration: none;
    color: var(--main-color);

    &:hover {
        color: var(--main-color);
    }
}

strong {
    font-family: var(--museo-rounded-700);
}

h1 {
    font: 17px/1.2 var(--museo-rounded-500);
    color: var(--main-color);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;

    span {
        font: 16px/1.5 var(--museo-rounded-300);
        display: block;
        text-transform: none;
    }

    &.dashboard-title {
        font: 28px/1.2 var(--museo-rounded-500);
        color: var(--black-text);
        margin-bottom: 22px;
    }
}

pre {
    margin: 0;
    font: 16px/1.5 var(--museo-rounded-300);
    white-space: pre-wrap;
}

input {
    color: var(--gray-light);
    width: 100%;
    max-width: 100%;

    &::placeholder {
        color: var(--soft-gray);
    }
}

select {
    cursor: pointer;
}

button {
    line-height: 35px;
}

input[type="checkbox"][hidden] {
    display: none;
}

/* START INPUTS */
.input-v2 {
    outline: none;
    border: none;
    font: 14px/1.5 var(--museo-rounded-300);
    border: 1px solid var(--line-color);
    color: var(--black);
    border-radius: 4px;
    box-sizing: border-box;

    /* reset current styling */
    margin-bottom: 0;

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
        appearance: none;
        margin: 0;
    }

    &::placeholder {
        font: 14px/1.2 var(--museo-rounded-300);
        color: var(--soft-gray);
    }

    &:focus,
    &[type="date"]:focus,
    &[type="time"]:focus,
    &[type="text"]:focus {
        border: 1px solid var(--main-color);
    }

    &:not([type="checkbox"], [type="radio"]) {
        padding: 7px 10px;
    }

    &[type="checkbox"] {
        display: flex;
        appearance: none;
        cursor: pointer;
        width: 18px;
        height: 18px;
        aspect-ratio: 1;
        color: white;
        border-radius: 2px;
        overflow: hidden;

        &:checked {
            border-color: var(--main-color);

            &::after {
                content: '\2714';
                background-color: var(--main-color);
                height: 100%;
                width: 100%;
                line-height: 1;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        /* reset current styling */
        &:focus {
            border: 1px solid var(--border-color);
        }

        &:focus:checked,
        &:checked {
            border: 1px solid var(--main-color);
        }
    }

    &[type="date"]::-webkit-calendar-picker-indicator,
    &[type="time"]::-webkit-calendar-picker-indicator {
        width: 18px;
        position: relative;
        right: -5px;
        cursor: pointer;
    }

    &[type="date"]::-webkit-calendar-picker-indicator {
        background: transparent url("/static/img/new_icons/calendar.svg") center no-repeat;
        background-size: 18px;
    }

    &[type="time"]::-webkit-calendar-picker-indicator {
        background: transparent url("/static/img/new_icons/time.svg") center no-repeat;
        background-size: 17px;
    }
}

.textarea-v2 {
    outline: none;
    border: 1px solid var(--line-color);
    border-radius: 4px;
    box-sizing: border-box;
    font: 14px/1.5 var(--museo-rounded-300);
    color: var(--black);
    resize: none;
    min-height: 150px;
    max-height: 300px;
    margin-bottom: 0; /* reset current styling */
    padding: 7px 10px;

    &::placeholder {
        font: 14px/1.2 var(--museo-rounded-300);
        color: var(--soft-gray);
    }

    &:focus {
        border: 1px solid var(--main-color);
    }
}

.select-v2 {
    appearance: none;
    background-image: url('/static/img/new_icons/arrow-down.svg');
    background-position: calc(100% - 5px) center;
    background-repeat: no-repeat;
    background-size: 18px;
    padding-right: 20px;
    cursor: pointer;
    border-radius: 4px;
    font: inherit;
    margin-bottom: 0; /* reset current styling */
    font: 14px/1.2 var(--museo-rounded-300);
    color: var(--black);

    &:focus {
        border: 1px solid var(--main-color);
    }
}

.flatpickr-calendar .flatpickr-day {
    &.selected,
    &.startRange,
    &.endRange,
    &.inRange,
    &.selected:focus,
    &.startRange:focus,
    &.endRange:focus,
    &.selected:hover,
    &.startRange:hover,
    &.endRange:hover,
    &.selected.prevMonthDay,
    &.selected.nextMonthDay,
    &.prevMonthDay.inRange,
    &.prevMonthDay.today.inRange,
    &.endRange.prevMonthDay,
    &.nextMonthDay.inRange,
    &.nextMonthDay.today.inRange,
    &.startRange.prevMonthDay,
    &.endRange.nextMonthDay {
        color: white;
        background: var(--main-color);
        border-color: var(--main-color);
    }

    &.selected.startRange + .endRange:not(:nth-child(7n+1)),
    &.startRange.startRange + .endRange:not(:nth-child(7n+1)),
    &.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
        box-shadow: -10px 0 0 var(--main-color);
    }

    &.inRange {
        box-shadow: -5px 0 0 var(--main-color), 5px 0 0 var(--main-color);
    }
}

.flatpickr-date {
    position: relative;

    input[readonly="readonly"] {
        font: 14px/1.2 var(--museo-rounded-300);
        color: var(--black);
        height: 38px;
        padding: 6px 10px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        box-shadow: none;
        box-sizing: border-box;
        margin-bottom: 0;
        cursor: pointer;

        &:focus,
        &[type="date"]:focus,
        &[type="text"]:focus {
            border-color: var(--main-color);
        }

        &.flatpickr-date--error {
            border-color: var(--red);
        }
    }
}

.flatpickr-date__icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    height: 18px;
    aspect-ratio: 1;
    display: block;
    cursor: pointer;
}
/* END INPUTS */

.gray-text--sml {
    font: 14px/1.2 var(--museo-rounded-500);
    color: var(--gray-text);
}

.black-text--sml {
    font: 14px/1.2 var(--museo-rounded-500);
    color: var(--black-text);
}

.textarea-ai {
    position: relative;
    padding-bottom: 41px;
    border: 1px solid var(--gray-line);
    border-radius: 4px;

    &:focus-within,
    &:focus {
        border: 1px solid var(--main-color);
    }

    & > textarea,
    & > textarea:focus {
        border: none;
    }
}

.textarea-ai--error,
.textarea-ai--error:focus {
    border: 1px solid var(--red);
}

.textarea-ai__button {
    position: absolute;
    right: 10px;
    bottom: 10px;
    cursor: pointer;
}

.monitoring-page .ten.columns {
    width: 100%;
    max-width: 100%;
}

.stock-take-form-wrapper {
    display: inline-block;
    width: 100%;
}

.grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.errorlist {
    font: 14px/1.2 var(--museo-rounded-300);
    color: var(--red);
    margin: 0;

    &.small {
        font-size: 12px;
        line-height: 1;
    }

    li {
        display: flex;
        align-items: center;
        gap: 3px;

        &::before {
            content: "";
            display: inline-block;
            height: 15px;
            aspect-ratio: 1;
            background-image: url('/static/img/new_icons/exclamation-icon.svg');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }

        &:not(:last-child) {
            margin-bottom: 5px;
        }
    }

}

form {
    margin-bottom: 0;

    .actions_wrapper .button {
        padding: 8px 12px;
    }

    label[for] {
        cursor: pointer;
    }

    input:focus {
        border-color: var(--main-color);
        outline: none;
        border: none;
    }

    input[type='checkbox'] {
        appearance: none;
        accent-color: var(--main-color);
        text-rendering: optimizeSpeed;
        width: 18px;
        border: 0;
        border-radius: 0;
        aspect-ratio: 1;
        margin: 0;
        position: relative;
        cursor: pointer;

        &:not(.show-password-checkbox) {
            background-color: var(--border-color);
        }

        &:not(.show-password-checkbox):checked:after {
            background: var(--main-color);
            content: '\2714';
            color: white;
            width: 100%;
            aspect-ratio: 1;
            justify-content: center;
            display: inline-flex;
        }
    }

    input[type="date"]::-webkit-calendar-picker-indicator {
        background: transparent url('/static/img/new_icons/calendar.svg') center no-repeat;
        background-size: 18px;
        width: 18px;
        position: relative;
        right: -5px;
        cursor: pointer;
    }

    select:not([multiple]) {
        appearance: none;
        background: white url('/static/img/new_icons/arrow-down.svg') center no-repeat;
        background-size: 18px;
        background-position-x: calc(100% - 5px);
        padding-right: 20px;

        &[multiple]:focus option:checked {
            background-image: linear-gradient(0deg, var(--main-color) 0%, var(--main-color) 100%);
        }
    }
}

.clearable-file {
    width: 100%;
    font-size: 0;
    line-height: 0;

    br,
    input[type="checkbox"],
    label[for] {
        display: none;
    }
}

.drag-drop-box {
    font: 14px/1.2 var(--museo-rounded-300);
    width: 100%;
    max-width: 100%;
    text-align: center;
    position: relative;
    display: inline-flex;

    & ~ .helptext {
        display: none;
    }

    & + .errorlist {
        margin-top: 5px;
    }

    span {
        font-size: 12px;
        color: var(--soft-gray);
        display: block;
    }

    p {
        margin: 0;
    }

    input[type=file] {
        position: absolute;
        width: 100%;
        height: 100%;
        min-height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        cursor: pointer;

        &:required:valid + .drag-drop-box__area,
        &:not(.empty) + .drag-drop-box__area {
            border-color: var(--main-color);

            .file-name {
                display: flex;
            }

            .text {
                display: none;
            }
        }
    }

    .text {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .preview-img {
        max-width: 165px;
        max-height: 150px;
    }

    .file-name {
        display: none;
        font-family: var(--museo-rounded-500);
        color: var(--main-color);
        position: relative;
        align-items: center;
        gap: 5px;

        .filename-text {
            font: 14px/1 var(--museo-rounded-500);
            color: var(--main-color);
            max-width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        a {
            width: 20px;
            height: 20px;
            line-height: 0;
            cursor: pointer;
        }
    }

    + .required {
        display: none;
    }
}

.drag-drop-box:hover .drag-drop-box__area {
    border-color: var(--main-color);
    transition: border-color .2s ease-in-out;
}

.drag-drop-box__area {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    width: 100%;
    min-height: 125px;
    border: 1px dashed var(--border-color);
    padding: 25px 30px;
    border-radius: 4px;
    box-sizing: border-box;

    & + .errorlist {
        text-align: left;
        margin-top: 5px;
    }
}

ul {
    list-style: none;

    a {
        display: block;
    }
}

.line-height-normal {
    line-height: normal;
}

.m-0 {
    margin: 0;
}

.left {
    float: left;
}

.form-date {
    margin-left: 10px;
}

.right {
    float: right;
}

.disabled {
    pointer-events: none;
}

.vertical-align--top {
    vertical-align: top;
}

#form-set .disabled select {
    background-color: var(--disabled);
}

.table-responsive {
    overflow-x: auto;
    min-height: 450px;
    position: relative;

    .table .sticky-cell {
        left: 0;
        position: sticky;
        background-color: white;
        z-index: 11;
    }
}

.table-padding-lr {
    th:first-child, td:first-child {
        padding-left: 10px;
    }

    th:last-child, td:last-child {
        padding-right: 10px;
    }
}

.table {
    color: var(--dark-gray);

    &.width-70 {
        max-width: 70%;
        margin: 0 auto;
    }

    th {
        color: var(--soft-gray);
        min-width: 50px;

        &.checkbox-column {
            min-width: auto;
            width: 10px;
        }
    }

    .th-padding {
        padding: 2px 0;
    }

    .action .button {
        margin: 0;
    }
}

.table--multiple-add {
    th {
        font-size: 14px;
        padding: 0 5px 0 0;
        width: 35%;

        &:first-child {
            padding-left: 0;
            width: 35%;
        }
    }

    td {
        padding: 6px;
        position: relative;

        &:first-child {
            padding-left: 0;
        }
    }

    th,
    td {
        border: none;
    }

    input {
        margin: 0;
    }

    .col-name {
        width: 35%;
    }

    .col-amount {
        width: 20%;
    }

    .col-notes {
        width: 35%;
    }

    .col-70 {
        width: 70%;
    }

    .delete-image-icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
}

table {
    width: 100%;

    th {
        font: 16px/28px var(--museo-rounded-300);
        color: var(--gray-light);
        padding-bottom: 5px;
    }

    td {
        font: 14px/20px var(--museo-rounded-500);
        vertical-align: baseline;
    }

    .merge-bottom {
        th, td {
            border-bottom: none;
            padding-bottom: 0;
        }
    }

    .errorlist-row {
        vertical-align: top;

        th, td {
            padding-top: 0;
            border-bottom: 1px solid var(--gray-line);
        }

        td:last-child {
            padding-bottom: 15px;
        }
    }

    a {
        font: 14px/18px var(--museo-rounded-500);
    }

    td.small {
        font: 15px/18px var(--museo-rounded-700);
        text-transform: uppercase;
    }

    td.width-70 {
        width: 70px;
    }

    .pad-right {
        padding-right: 15px;
    }

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

    select:disabled {
        background: var(--disabled);
    }

    .action {
        width: 10px;
    }
}

/* START UTILS */
.text_align_right {
    text-align: right;
}

.rounded {
    border-radius: 8px;
}

.main-color {
    color: var(--main-color);
}

.black {
    color: var(--black);
}

.purple {
    color: var(--main-color);
}

.green {
    color: var(--green);
}

.gray {
    color: var(--gray-light);
}

.orange {
    color: var(--orange);
}

.soft-gray {
    color: var(--soft-gray);
}

.medium-gray {
    color: var(--medium-gray)
}

.orange-bg {
    background-color: var(--orange-light);
}

.white-bg {
    background-color: white;
}

.green-bg {
    background-color: var(--green);
}

.red-bg {
    background-color: var(--red);
}

.red {
    color: var(--red);
}

.main-bg {
    background-color: var(--main-color);
}

.yellow-bg {
    background-color: var(--yellow);
}

.gray-bg {
    background-color: var(--gray);
}

.inline-block {
    display: inline-block;
}

.mr-20 {
    margin-right: 20px;
}

.gray-text {
    color: var(--gray-text);
}

.purple-bg {
    background-color: var(--purple);
}

.dark-gray {
    color: var(--dark-gray);
}

.p-0 {
    padding: 0;
}

.pr-0 {
    padding-right: 0;
}

.pl-30 {
    padding-left: 30px;
}

.width-10 {
    width: 10%;
}

.width-15 {
    width: 15%;
}

.width-25 {
    width: 25%;
}

.width-40 {
    width: 40%;
}

.width-55 {
    width: 55%;
}

.width-60 {
    width: 60%;
}

.width-100 {
    width: 100%;
}

.width-100px {
    width: 100px;
}

.width-150px {
    width: 150px;
}

.max-width-90 {
    max-width: 90%;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-5 {
    margin-bottom: 5px;
}

.mb-12 {
    margin-bottom: 12px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-25 {
    margin-bottom: 25px;
}

.mb-30 {
    margin-bottom: 30px;
}

.align-self-start {
    align-self: start;
}

.align-self-end {
    align-self: end;
}

.mt-5 {
    margin-top: 5px;
}

.mt-6 {
    margin-top: 6px;
}

.mt-8 {
    margin-top: 8px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-25 {
    margin-top: 25px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-70 {
    margin-top: 70px;
}

.mr-auto {
    margin-right: auto;
}

.vertical-align-top {
    vertical-align: top;
}

.relative {
    position: relative !important;
}

.line-through {
    text-decoration: line-through;
}

.top-border {
    border-top: 1px solid var(--gray-line);
}

.submit-on-click {
    cursor: pointer;
}

.opacity-50 {
    opacity: 0.5;
}

.ml-auto {
    margin-left: auto;
}

.ml-0 {
    margin-left: 0;
}

.ml-20 {
    margin-left: 20px;
}

.invert-color {
    filter: brightness(0) invert(1);
}

.white-space-nowrap {
    white-space: nowrap;
}
/* END UTILS */

/* START TYPOGRAPHY */
.text-link {
    font-size: 16px;
    cursor: pointer;

    &,
    &:visited {
        color: var(--gray-light);
    }

    &.orange {
        color: var(--orange);
    }

    &.purple {
        color: var(--purple);
    }

    &.main-color {
        color: var(--main-color);
    }

    &:hover {
        color: var(--main-color);
    }
}

.title-report {
    font: 32px/42px var(--museo-rounded-100);
    text-transform: uppercase;
    color: white;
}
/* END TYPOGRAPHY */

/* START KEYFRAMES */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0,100%,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0,100%,0)
    }
}

@keyframes rotate-full {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
}
/* END KEYFRAMES */

/* START GENERAL */
.card {
    padding: 15px;
    border-radius: 5px;
    box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, .05);
    border: 1px solid var(--gray-line);
}

.expandable {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.2s ease;
    overflow: hidden;

    input:checked ~ & {
        grid-template-rows: 1fr;
    }

    & > * {
        overflow: hidden;
    }
}

.expandable--active {
  grid-template-rows: 1fr;
}

/* END GENERAL */

/* START CSS.GG ICONS */
/* - usage: .gg-chevron.up | .gg-chevron.down */
.gg-chevron {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(.7);
    width: 22px;
    height: 22px;
    border: 1px solid transparent;
    border-radius: 100px;

    &::after {
        content: "";
        display: block;
        box-sizing: border-box;
        position: absolute;
        width: 10px;
        height: 10px;
        border-right: 1px solid var(--soft-gray);
    }

    &.up::after {
        border-top: 1px solid var(--soft-gray);
        transform: rotate(-45deg);
        left: 4px;
        bottom: 2px
    }

    &.down::after {
        border-bottom: 1px solid var(--soft-gray);
        border-right: 1px solid var(--soft-gray);
        transform: rotate(45deg);
        left: 4px;
        top: 2px
    }

    &.up:hover::after,
    &.down:hover::after {
        border-color: var(--dark-gray);
    }
}

/* END CSS.GG ICONS */

/* START WRAPPER */
.field-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.field-wrapper--small {
    gap: 6px;
}

.action-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.action-wrapper__label {
    font: 14px/1.2 var(--museo-rounded-300);
    color: var(--dark-gray);
    margin-bottom: 0;
}

.nested-input-wrapper {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;

    input, select {
        border-radius: 0;
        border-color: transparent;

        &:not(:last-child) {
            border-right-color: var(--border-color);
        }
    }
}
/* END WRAPPER */

/* START BUTTON */
.button-with-icon {
    font: 13px/1.2 var(--museo-rounded-300);
    color: white;
    padding: 4px 10px;
    background-color: var(--white);
    height: auto;
    position: relative;
    text-transform: none;
    border: 1px solid var(--main-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;

    .icon {
        width: 16px;
        padding: 4px;
    }

    &.main-color-solid,
    &.main-color-solid:hover {
        color: white;
        background-color: var(--main-color);
        border: 1px solid var(--main-color);
    }

    &.dropdown-adjust {
        margin-bottom: 5px;
    }
}

.button-ai {
    position: relative;
    z-index: 1;
    border-radius: 4px;
    border: none;
    padding: 7px 12px;
    cursor: pointer;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    &::before {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: block;
        content: "";
        height: 100%;
        width: 100%;
        background: var(--main-linear-color);
        border-radius: 4px;
        z-index: -2;
    }

    &::after {
        display: block;
        content: "";
        position: absolute;
        top: 1px;
        left: 1px;
        right: 1px;
        bottom: 1px;
        background: #FAF4FF;
        border-radius: 4px;
        z-index: -1;
    }
}

.button-ai__text {
    background: var(--main-linear-color);
    background-clip: text;
    color: transparent;
    font: 14px/1.2 var(--museo-rounded-500);
}

.button-ai__icon {
    height: 16px;
    aspect-ratio: 1;
    display: block;
}

.circle-button-icon {
    height: 14px;
    width: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
    background-color: white;
    border: 1px solid var(--main-color);
    cursor: pointer;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.26);

    & > img {
        height: 20px;
        width: 20px;
        display: block;
    }
}
/* END BUTTON */

.delete-image, .delete-video {
    position: absolute;
    right: -6px;
    top: -6px;
    z-index: 10;
}

.delete-image-icon {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.imports-exportss-lists {
    font-size: 2rem;
}

.content_wrapper.reports {
    padding-top: 0;
    column-count: 2;
    column-gap: 15px;
    counter-reset: item-counter;
    display: table-cell;
}

.header-title {
    float: left;
}

button.save {
    margin: 14px 0;
    padding: 10px 20px;
    font-size: 18px;
}

.columns.bottom-border {
    border-bottom: 1px solid var(--gray-line);
}

.columns.checkbox-column {
    width: 2%;
}

.columns.top-border {
    border-top: 1px solid var(--gray-line);
}

.top-pagination {
    padding-bottom: 10px;
    margin-top: 20px;
}

.bottom-pagination {
    padding-top: 12px;
    margin-top: 38px;
}

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

.second-title {
    padding-top: 6px;
}

hr.border {
    margin: 1px 0 0 0;
}

hr.border-table {
    margin: 0 0 0 33px;
}

.very-small-title {
    font-size: 12px;
}

.small-title {
    font-size: 16px;
}

.small-title.first-title {
    margin-left: 32px;
}

.small-title.header-checkbox{
    margin-left: 8px;
}

.small-title.first-header {
    padding-left: 32px
}

.title-section {
    font: 22px/22px var(--museo-rounded-500);
    color: var(--main-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.detail-report, .form-report {
    h2 {
        color: var(--main-color);
        letter-spacing: 0;

        span {
            font: 22px/22px var(--museo-rounded-300);
            display: block;
            color: var(--gray-light);
            margin-top: 5px;
            opacity: 0.5;
        }
    }

    h3 {
        font: 22px/22px var(--museo-rounded-500);
        margin-top: 4px;
        margin-bottom: 15px;
    }

    h4 {
        font: 16px/22px var(--museo-rounded-300);
        margin-bottom: 15px;
    }

    .description {
        font: 15px/30px var(--museo-rounded-300);
        max-width: 60%;
        margin-bottom: 40px;
    }

    .table-details {
        margin-bottom: 25px;
    }

    .details {
        width: auto;
        margin-bottom: 32px;

        td, th {
            font: 16px/22px var(--museo-rounded-300);
            border-bottom: none;
            vertical-align: top;

            &:first-child {
                padding-left: 0;
            }
        }

        .td-left {
            padding-left: 0;
        }

        th {
            padding: 5px;
            width: 25%;
        }

        td {
            padding: 5px 0;
        }

        a {
            font-size: 16px;
            color: var(--main-color);
        }

        .maps {
            font-size: 14px;
        }
    }

    .table {
        th {
            padding-bottom: 5px;
            padding-top: 5px;
        }
    }

    .no-border{
        border-bottom: none;
    }
}

.right-button {
    margin-top: 12px;
}

.details td.text-bold {
    font: 15px/22px var(--museo-rounded-500);
}

.form-report {
    .content_wrapper label {
        font: 15px/22px var(--museo-rounded-500);
        color: var(--gray-light);
        margin: 20px 0 0;

        &.soft-gray {
            color: var(--soft-gray);
        }
    }

    .form-checkbox>.parent-row>.row {
        display: flex;
        align-items: center;
    }

    input, select, textarea {
        width: 60%;
        height: 30px;
        padding: 2px 10px;
        max-height: 100px;
        font: 15px/22px var(--museo-rounded-500);
        color: var(--gray-light);
        margin-bottom: 5px;
        border-radius: 5px;

        &.full {
            width: 100%;
        }
    }

    textarea {
        min-height: 180px;
    }

    input[type="file"] {
        border-radius: 0;
    }

    .multi-select{
        select{
            height: 80px;
        }
    }

    form {
        max-width: 90%;

        .helptext {
            font: 14px/22px var(--museo-rounded-500);
            color: var(--soft-gray);
        }
    }

    form .button_wrapper {
        margin-top: 25px;
        padding-top: 25px;
        border-top: 1px solid var(--border-color);
        display: table;
        width: 100%;
    }

    form #button_child_variant {
        margin-top: 20px;
        padding-top: 25px;
        border-top: 1px solid var(--border-color);
        display: table;
        width: 82%;
    }

    form .button {
        padding: 7px 22px;
        border-radius: 5px;
        font: 16px/22px var(--museo-rounded-500);

        &:last-child {
            margin-right: 0;
        }
    }

    .form-checkbox .multiple-checkbox {
        padding: 10px 0;
        margin-top: 0px;
        cursor: pointer;
        display: flex;
        align-items: center;

        span {
            left: 32px;
            top: 8px;
            border: none;
        }

        span.variant-code {
            padding-left: 15px;
        }

        input[type='checkbox'] {
            border: 0;
            border-radius: 0;
            margin-top: 0;
            margin-bottom: 3px;
            width: 18px;
        }

        input[type='checkbox']::after {
            width: 18px;
        }

        input[type='checkbox']:focus {
            outline: none;
        }

        a {
            font: 15px/18px var(--museo-rounded-500);
            color: var(--gray-light);
        }

        a:hover {
            color: var(--main-color);
        }

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

        &.header-modifier{
            padding: 0;
        }
    }

    .header-icon {
        width: 28px;
        padding: 8px;
    }

    .button-save {
        margin: 14px 0;
        border-radius: 5px;
        padding: 7px 22px;
        border: 1px solid var(--main-color);
        font: 16px/22px var(--museo-rounded-500);
    }
}

.form-report form {

    .input-search {
        width: 100%;
        color: var(--gray-light);
        padding: 8px 10px 8px 35px;
    }

    label {
        display: inline-table;
        text-transform: capitalize;
    }

    input:not([type=checkbox]):not(.input-search), select, textarea {
        display: block;
        box-sizing: border-box;
        height: auto;
        padding: 7px 10px;
        border: 1px solid var(--border-color);
        margin-top: 5px;
    }

    .search-bar-with-glass .awesomplete input {
        padding: 6px 10px 6px 30px;
        margin-top: 0;
        height: 35px;
    }

    select[multiple] {
        min-height: 192px;
        padding: 0;
    }

    select[multiple] option {
        padding: 8px 10px;
    }

    input[type='checkbox'] {
        display: inline-table;
        float: left;
        position: relative;
        margin-right: 10px;
        padding: 0;
        height: auto;
        display: flex;

        &.m-0 {
            margin: 0;
        }
    }

    input.multiple-checkboxes[type='checkbox'] {
        margin-top: 0;
    }

    .form-checkbox .checkbox {
        margin-top: 2px;
        margin-right: 0px;
        padding: 0px;

        &:after {
            left: 0px;
        }
    }

    .helptext {
        display: block;
    }

    &:not(.reset-awesomplete) .awesomplete {
        width: 60%;
    }

    .awesomplete-input {
        width: 60%;

        .awesomplete {
            width: 100%;
        }
    }

    .awesomplete-input--full {
        width: 100%;
    }

    input[type='checkbox'] + label {
        display: table;
    }
}

.sticky-header {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10;

    .form-checkbox .multiple-checkbox {
        padding-bottom: 4px;
    }
}

.thumbnails {
    margin: 40px 0px;

    .image {
        width: 100%;
        min-height: 160px;
        max-width: 160px;
        position: relative;
        margin-bottom: 10px;
        background-size: cover;
        background-position: center center;
        background-color: var(--gray);
    }

    .columns {
        float: left;
        width: 17%;
        min-width: 160px;
        margin-left: 1%;
        position: relative;

        &:first-child {
            margin-left: 0px;
        }
    }

    .image.empty {
        border: 1px solid var(--main-color);
        color: var(--main-color);
        text-align: center;
        background-color: transparent;
        font: 75px/75px var(--museo-rounded-100);
        display: table;

        span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
}

.thumbnails--no-margin {
    margin: 0;
}

.box_wrapper {
    border-radius: 3px;
    padding: 8px 12px;
    box-sizing: border-box;
    color: white;
}

.status {
    color: white;
    font: 15px/22px var(--museo-rounded-700);

    &.green {
        color: var(--main-color);
    }

    &.main-color {
        color: var(--main-color);
    }

    &.yellow {
        color: var(--yellow);
    }

    &.red {
        color: var(--red);
    }
}

#otp-form-errors {
    margin-top: 15px;
    font: 14px/22px var(--museo-rounded-300);

    li {
        color: var(--red);
        text-align: center;
    }
}

#resend-otp{
    cursor: pointer;
}

#otp-form-message {
    li {
        color: var(--gray-light);
        text-align: center;
    }
}

.otp-button-wrapper {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.label_wrapper .tabs__dropdown-menu {
    display: inline-block;
    position: relative;
    cursor: pointer;

    label {
        padding-right: 20px;
        pointer-events: none;
    }

    &::after {
        content: '';
        width: 20px;
        background: url('/static/img/new_icons/arrow-down.svg') center no-repeat;
        background-size: 20px;
        aspect-ratio: 1;
        position: absolute;
        top: 34%;
        right: 25px;
        opacity: 0.5;
    }

    &:hover {
        label, &::after {
            opacity: 1;
            color: var(--main-color);
        }
    }
}

.label_wrapper .tabs__dropdown-box {
    background-color: white;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0px 0px 10px 1px rgba(225, 225, 225, .98);
    animation: fadeIn 0.2s linear forwards;

    &.pure-menu-children {
        padding: 0 15px;
    }
}

.label_wrapper .tabs__dropdown-item {
    font: 18px/1.3 var(--museo-rounded-300);
    color: var(--gray-light);
    opacity: 0.5;

    &:hover {
        opacity: 1;
    }
}

.tabs-v2 {
    margin: 35px 0 10px;
    position: relative;
    display: flex;
    border-bottom: 1px solid var(--gray);
    max-width: 100vw;

    input[name='tab'] {
        display: none;
    }

    &.m-0 {
        margin: 0;
    }

    .label_wrapper {
        width: 100%;
        padding-bottom: 0px;
        display: flex;
        gap: 5px;
        white-space: nowrap;
        overflow: hidden;
        scrollbar-width: none;

        label {
            cursor: pointer;
            display: inline-block;
            font: 16px/1 var(--museo-rounded-500);
            margin-bottom: 0px;
            position: relative;
            color: var(--gray-text);
            padding: 0;

            a {
                display: block;
                padding: 12px 15px;
            }

            span {
                color: var(--gray-text);
            }

            &:hover {
                color: var(--main-color);

                span {
                    color: var(--main-color);
                }

                .tabs__dropdown-item span {
                    color: var(--gray-text);
                }
            }
        }

        .tabs__dropdown-menu {
            display: inline-block;
            position: relative;
            cursor: pointer;

            a,
            .pure-menu-item span {
                padding: 0;
            }

            span {
                padding: 12px 30px 15px 15px;
                display: inline-block;
            }

            &::after {
                content: '';
                width: 20px;
                background: url('/static/img/new_icons/dropdown-inactive.svg') center no-repeat;
                background-size: 20px;
                aspect-ratio: 1;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 5px;
                opacity: 1;
            }

            &:hover::after {
                background: url('/static/img/new_icons/arrow-down.svg');
            }
        }

        .tabs__dropdown-box {
            background-color: white;
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0px 0px 10px 1px rgba(225, 225, 225, .98);
            animation: fadeIn 0.2s linear forwards;

            &.pure-menu-children {
                padding: 20px;
                top: 100%;
            }
        }

        .tabs__dropdown-item {
            font: 16px/1 var(--museo-rounded-500);
            opacity: 1;
            margin: 0;

            a:hover span {
                color: var(--main-color);
            }

            &:not(:last-child) {
                margin-bottom: 16px;
            }
        }
    }

    .label_wrapper--fade {
        color: var(--main-color);
    }

    .label_wrapper--fade::after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        pointer-events: none;
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 85%, white 100%);
    }

    &.pure-menu .label_wrapper {
        overflow: visible;
    }

    .tab-control:checked + label {
        opacity: 1;

        &::before {
            content: '';
            width: 100%;
            background: var(--main-color);
            position: absolute;
            bottom: -1px;
            left: 0;
            height: 2px;
        }

        span {
            color: var(--main-color);
        }

        &::after {
            background: url('/static/img/new_icons/arrow-down.svg');
        }
    }
}

.title {
    font: 23px/26px var(--museo-rounded-500);
    color: var(--gray-light);
    margin-bottom: -20px;
}

.container {
    background-color: white;
    width: 100%;
    max-width: 100%;
    height: 100%;
    background: var(--gray);
    border-right: 1px solid white;
    overflow-x: hidden;

    .content {
        min-height: 100%;
    }
}

.selected {
    width: 100%;
    margin-top: 25px;
    display: inline-table;

    .button {
        padding: 7px 12px;
    }

    .button--adjusted-padding {
        padding-top: 2px;
        padding-bottom: 2px;
    }
}

.selected--no-margin {
    margin: 0;
}

.hide {
    display: none;
}

.menu-button {
    border-color: var(--main-color);
    cursor: pointer;

    &:before {
        content: '';
        width: 38px;
        height: 38px;
        background-color: rgba(255, 182, 26, .85);
        position: absolute;
        top: -14px;
        right: -6px;
        border-radius: 50%;
        z-index: 100;
    }

    ul {
        width: 25px;
        height: 25px;
        margin: 0px;
        z-index: 200;
        position: relative;
    }
}

.menu-icon-stripe {
    background-color: white;
    height: 1px;
    margin-bottom: 4px;
}

.content_wrapper {
    padding: 20px 7% 20px;
    box-sizing: border-box;
    line-height: 1;

    table {
        margin-bottom: 10px;
    }

    tr:not(.show-border):last-child td {
        border-bottom: none;
    }

    .hide {
        display: none;
    }

    th {
        & + td {
            width: 16px;
            text-align: left;
        }
    }

    .tabs,
    .tabs-v2 {
        max-width: 86vw;
    }
}

.content_wrapper--no-padding-top {
    padding-top: 0;
}

.content_wrapper--no-margin-bottom table {
    margin-bottom: 0;
}

.header {
    background: white;
    box-shadow: 0px 1px 1px #F1F1F1;
    padding: 0 7%;
    margin-bottom: 25px;
    min-height: 58px;
    display: flex;
    align-items: center;

    .row {
        width: 100%;
        display: flex;
    }

    div:first-child {
        margin: auto 0;
    }

    .actions_wrapper {
        margin: 0;
    }
}

.content {
    display: flex;
    background-color: white;
}

.actions {
    position: relative;
    display: table;

    label {
        display: none;
    }

    input[type='checkbox'], .dropdown {
        display: none;
    }

    input[type='checkbox']:checked ~ .dropdown {
        display: table;
        width: 120px;
    }

    select {
        width: 125px;
        padding: 5px 12px 8px;
        height: 33px;
        border-radius: 3px;
        font: 14px/22px var(--museo-rounded-300);
        background-color: var(--gray);
        color: var(--soft-gray);
        cursor: pointer;
        outline-style:none;
        box-shadow:none;
        border-color:transparent;

        option {
            background-color: var(--gray);
        }
    }

    .dropdown {
        position: absolute;
        top: 30px;
        padding: 10px 15px;
        margin-top: 7px;
        background: white;
        width: 125px;
        border-radius: 3px;
        font: 14px/22px var(--museo-rounded-300);
        z-index: 1100;

        li {
            margin-bottom: 7px;
        }

        li:last-child {
            margin-bottom: 0px;
        }
    }

    .button, .dropdown {
        float: left;
        background-color: white;
        border: 1px solid var(--main-color);
    }


    .button a, .dropdown a {
        color: var(--soft-gray);
    }

    .button {
        color: var(--main-color);
        padding-right: 30px;
        display: block;
        width: 150px;

        &:hover {
            color: var(--main-color);
        }
    }

    .button:after {
        content: var(--icon);
        font-size: 32px;
        position: absolute;
        top: 29%;
        right: 12%;
        transform: rotate(90deg);
        color: var(--main-color);
        font-weight: normal;
        font-family: var(--museo-rounded-100);
    }
}

.space-between {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    justify-content: space-between;

}

.actions_wrapper {
    width: 100%;
    margin: 0;
    display: inline-block;

    &.right {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        justify-content: end;
    }

    &.align-items-bottom {
        align-items: end;
    }

    &.space-between {
        display: flex;
        justify-content: space-between;
    }

    input.full {
        width: 100%;
    }

    .select-all,
    .deselect-all {
        color: var(--main-color);
    }

    .button {
        margin: 0;
        position: relative;
    }

    .button--tracking {
        margin-left: 80px;
    }

    input, select {
        font: 14px/15px var(--museo-rounded-300);
        height: 33px;
        margin-bottom: 0;
        max-width: 300px;
    }

    input[type="date"] {
        color: var(--gray-light);
        max-width: unset;
        border: 1px solid #e0e0e0;
        height: 26px;
        border-radius: 4px;
        padding: 3px 10px;
        width: 150px;
    }

    .right a:last-child {
        margin-right: 0;
    }

    .green .dropdown {
        background-color: white;
        border: 1px solid var(--main-color);

        a {
            color: var(--main-color);
        }

        a:hover {
            font-family: var(--museo-rounded-300);
        }
    }

    button {
        position: absolute;
    }

}

.more-column-button {
    color: var(--main-color);
    font: 14px/1.2 var(--museo-rounded-500);
    text-transform: capitalize;
    cursor: pointer;
}

.search {
    width: 25%;

    button {
        padding: 0;
        margin: 0;
        height: 0;
        border: none;
    }

    input {
        max-width: 100%;
        color: var(--gray-light);
        padding: 6px 10px 6px 30px;
        height: auto;

    }

    .mt-0 {
        margin-top: 0;
    }
}

.markdown-desc-preview {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background-color: white;
}

.markdown-desc-preview__container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    border: 1px solid var(--line-color);
    border-radius: 4px;
}

.markdown-desc-preview__text,
.markdown-desc-preview__result {
    overflow-y: auto;
    max-height: 250px;
    padding: 15px;
}

.markdown-desc-preview__result {
    background-color: var(--gray-light2);
}

.no-scrollbar {
    scrollbar-width: none;
}

.scroll-y {
    max-height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
}

.flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;

    &.stretch-column {
        align-items: stretch;
        flex-direction: column;
    }
}

.flex--justify-content-end {
    justify-content: end;
}
.flex--no-gap {
    gap: 0;
}

.actions_wrapper.long-wrapper {
    width: 100%;

    .search, input {
        width: 65%;
    }

    .select-all, .deselect-all {
        color: var(--main-color);
    }
}

.actions_wrapper.medium-wrapper {
    width: 100%;
    margin-top: 30px;

    .search, input {
        width: 100%
    }
}

.small-wrapper {
    width: 100%;

    .search, input {
        width: 50%
    }
}

.mutations-wrapper {
    margin-top: 50px;

    .inventory {
        vertical-align: initial;
    }
}

.select-all, .deselect-all {
    color: var(--main-color)
}

.icon-mglass:after {
    content: "";
    background: url('/static/img/new_icons/magnifier.svg') center no-repeat;
    background-size: 18px;
    width: 18px;
    aspect-ratio: 1;
    position: absolute;
    top: 7px;
    left: 7px;
    z-index: 1;
}

.button {
    font: 13px/1.2 var(--museo-rounded-300);
    color: white;
    padding: 5px 12px;
    margin-right: 15px;
    background-color: var(--main-color);
    height: auto;
    position: relative;
    text-transform: none;
    border: 1px solid var(--main-color);

    span {
        font: 18px/0 var(--museo-rounded-300);
    }

    .icon + span {
        font: inherit;
        opacity: 1;
        margin: 0;
    }

    &:hover {
        color: white;
        border: 1px solid var(--main-color);
    }

    &.green-bg,
    &.green-bg:hover {
        color: white;
        background-color: var(--main-color);
        border: 1px solid var(--main-color);
    }

    &.green,
    &.green:hover {
        color: var(--main-color);
        background-color: transparent;
        border: 1px solid var(--main-color);
    }

    &.red-bg,
    &.red-bg:hover {
        color: white;
        background-color: var(--red);
        border: 1px solid var(--red);
    }

    &.main-bg,
    &.main-bg:hover {
        color: white;
        background-color: var(--main-color);
        border: 1px solid var(--main-color);
    }

    &.yellow-bg,
    &.yellow-bg:hover {
        color: white;
        background-color: var(--yellow);
        border: 1px solid var(--yellow);
    }

    &.main-color-bg,
    &.main-color,
    &.main-color:hover {
        color: var(--main-color);
        background-color: transparent;
        border: 1px solid var(--main-color);
    }

    &.main-color-solid,
    &.main-color-solid:hover {
        color: white;
        background-color: var(--main-color);
        border: 1px solid var(--main-color);
    }

    &.orange-bg,
    &.orange,
    &.orange:hover {
        color: var(--orange);
        background-color: transparent;
        border: 1px solid var(--orange);
    }

    &.purple,
    &.purple:hover {
        color: var(--purple);
        background-color: transparent;
        border: 1px solid var(--purple);
    }

    &.purple-bg {
        color: white;
        background-color: var(--purple);
        border: 1px solid var(--purple);
    }

    &.orange-solid,
    &.orange-solid:hover {
        color: white;
        background-color: var(--orange);
        border: 1px solid var(--orange);
    }

    &.red,
    &.red:hover {
        color: var(--red);
        background-color: transparent;
        border: 1px solid var(--red);
    }

    &.gray,
    &.gray:hover {
        color: gray;
        background-color: transparent;
        border: 1px solid gray;
    }

    &.dark-gray,
    &.dark-gray:hover {
        color: var(--dark-gray);
        background: transparent;
        border: 1px solid var(--dark-gray);
    }

    &.remove-margin {
        margin: 0;
    }

    &.rounded {
        border-radius: 15px;
    }

    &.medium {
        padding: 8px 16px;
        font: 14px/1 var(--museo-rounded-500);
    }

    .icon {
        width: 16px;
        padding: 4px;
    }
}

.align-middle {
    vertical-align: middle;
}

.disabled-grey {
    background-color: var(--disabled);
    color: gray;
    outline: 0;
    border-color: gray;

    &:focus, &:hover {
        background-color: var(--disabled);
        color: gray;
        border-color: gray;
    }
}

.empty-row {
    height: 1.5em;
}

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

.ten.columns {
    width: 84.66666%;
    transition: width 0.3s ease;

    .default-hidden, .is-hidden {
        display: none;
    }
}

.ten.columns.expanded {
    width: calc(100% - 84px);

    .default-hidden {
        display: table-cell;
    }

    @media screen and (max-width: 1024px) {
        width: 100%;
    }
}

.breadcrumb {
    color: white;
    margin-bottom: 20px;

    span {
        position: relative;
        margin: 0 2px;
    }

    span:before {
        content: var(--icon);
        color: white;
        position: relative;
        top: 3px;
        font: 25px/22px var(--museo-rounded-300);
    }

    a {
        color: white;
    }
}

.ct-grid {
    stroke: var(--gray-line);
    stroke-dasharray: 0;
}

.ct-vertical ~ .ct-vertical {
    stroke: none;
}

.ct-horizontal ~ .ct-horizontal {
    stroke: none;
}

.dashboard {
    padding-right: 10px;

    .header {
        display: none;
    }

    .container {
        padding: 20px 7%;
        box-sizing: border-box;
        background-color: white;
    }

    .space-dashboard {
        height: 40px;
    }

    .box-container {
        max-width: 900px;
    }

    .report-result {
        display: flex;
        gap: 40px;
        width: 100%;

        h2 {
            font: 20px/1.2 var(--museo-rounded-500);
            color: var(--black-text);
            margin: 0 0 16px;
        }

        h3 {
            font: 14px/1.2 var(--museo-rounded-300);
            color: var(--black-text);
            margin: 0 0 5px;
            text-transform: uppercase;
        }

        h4 {
            font: 24px/1.2 var(--museo-rounded-500);
            color: var(--black-text);
            margin: 0;
        }

        .box {
            padding: 0;
            width: 100%;
            border-radius: 4px;
        }

        .result-box-wrapper {
            display: flex;
            gap: 20px;

            .line {
                width: 1px;
                background-color: var(--line-color);
            }
        }
    }

    .report-result-header {
        gap: 16px;

        .box {
            background-color: var(--purple-light);
            padding: 16px 20px;
        }
    }

    .chart-section {
        margin-top: 10px;
    }

    .tabel-report {
        width: 100%;
        margin: 0;
        display: block;
        padding: 32px 0;

        tbody {
            width: 100%;
            display: inline-table;
        }

        label {
            font: 14px/1 var(--museo-rounded-500);
            color: var(--black-text);
            height: 100%;
            max-height: none;
        }

        td {
            padding: 0;
            white-space: nowrap;
            vertical-align: top;
        }

        select {
            appearance: none;
            border: none;
            background: url('/static/img/new_icons/arrow-down.svg') no-repeat;
            background-position: center right 10px;
            background-size: 20px;
        }

        .flatpickr-input + input {
            background: url('/static/img/new_icons/calendar.svg') no-repeat;
            background-position: center right 10px;
            background-size: 20px;
            cursor: pointer;
        }

        select, input {
            font: 14px/1 var(--museo-rounded-500);
            color: var(--black-text);
            width: 100%;
            margin: 0;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            border-top: none;
            border-bottom: none;
            border-radius: 0;
            padding: 6px 15px;

            &::placeholder {
                color: var(--black-text);
            }
        }

        button {
            font: 16px/1 var(--museo-rounded-500);
            background-color: var(--main-color);
            text-transform: unset;
            border: none;
            margin: 0;
            height: 100%;
            display: flex;
            align-items: center;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            padding-left: 40px;
            position: relative;
            outline: 1px solid var(--main-color);
            letter-spacing: 0;

            &:before {
                content: '';
                position: absolute;
                background: url('/static/img/new_icons/magnifier-white.svg') no-repeat;
                background-position: center;
                background-size: 20px;
                width: 20px;
                height: 20px;
                left: 15px;
            }

            &:hover,
            &:focus {
                color: white;
            }
        }

        .width-96 {
            width: 96px;
        }
    }
}

.flatpickr-calendar .flatpickr-months svg path {
    fill: var(--main-color);
}

.chart-section .ct-series .ct-bar,
.ct-series .ct-bar {
    stroke: var(--main-color);
    stroke-width: 20px;
}

.ct-label {
    &.ct-horizontal.ct-end,
    &.ct-vertical.ct-start {
        font: 10px/1 var(--museo-rounded-500);
        color: var(--black);
    }

    &.ct-vertical.ct-start {
        width: 20px!important;
    }
}

.columns.sidebar_wrapper {
    width: 15.333333%;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    transition: margin 0.3s ease;
    z-index: 5;
    margin: 0;
    box-sizing: unset;
    overflow-y: auto;

    &.sidebar-dropdown-active {
        padding-left: 180px;
    }

    .sidebar {
        padding: 20px 12px 50px;
        background-color: var(--gray-light2);
        min-height: 100%;
        box-sizing: border-box;
    }

    input[type='checkbox'] {
        display: none;
    }

    .dropdown {
        opacity: 0;
        height: 0;
        margin: 0;
        visibility: hidden;
        transition: height 0.3s linear;
        display: none;
    }

    input[type='checkbox']:checked ~ .dropdown {
        display: flex;
        flex-wrap: wrap;
        gap: 2px;
        opacity: 1;
        height: auto;
        visibility: visible;
        margin-top: 2px;
    }

    label {
        font: 14px/1.3 var(--museo-rounded-500);
        color: var(--dark-gray);
        cursor: pointer;
        width: 100%;
        margin: 0;
        position: relative;

        a, span {
            display: flex;
            align-items: center;
            gap: 5px;
            color: var(--dark-gray);
            background-color: transparent;
            padding: 8px 30px 8px 10px;
            border-radius: 16px;
            /* Add transition for smoother hover effect */
            transition: background-color 0.2s ease, color 0.2s ease;
        }

        &.active:not(.dropdown-active) {
            img,
            span:before {
                filter: brightness(0) invert(1);
            }

            a, span {
                color: white;
                background-color: var(--main-color);
            }
        }

        &:not(.active):hover,
        &.active.dropdown-active {
            a, span {
                background-color: var(--gray-light3);
            }

            .dropdown a {
                color: var(--dark-gray);
                background-color: transparent;

                &:hover {
                    background-color: var(--gray-light3);
                }
            }

            li.active a,
            li.active:hover a {
                color: white;
                background-color: var(--main-color);
            }
        }
    }

    input[type="checkbox"] ~ span:before {
        content:"";
        position: absolute;
        background: url('/static/img/sidebar/collapse.svg') center no-repeat;
        background-size: 20px;
        display: inline-block;
        width: 20px;
        height: 20px;
        right: 10px;
        top: 10px;
    }

    input[type="checkbox"]:checked ~ span:before {
        transform: rotate(180deg);
    }

    ul {
        margin: 8px 0 0;
        padding-left: 0;

        li {
            width: 100%;
            margin: 0;
            padding: 0;
        }

        a:before {
            content: '';
            position: relative;
            width: 24px;
            height: 24px;
            display: table;
            aspect-ratio: 1;
        }
    }

    .more-column-button {
        position: relative;
        line-height: 0;

        img {
            rotate: 180deg;
            transition: rotate 0.3s ease;
        }
    }

    .logo-wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        justify-content: space-between;
        padding: 0 0 0 12px;
    }

    .logo-icon {
        max-width: 85px;
        display: table;
        cursor: pointer;
        position: relative;
        transform: unset;
    }

    .icon {
        max-width: 24px;
    }

    .merchant-name {
        font: 14px/1.2 var(--museo-rounded-500);
        color: var(--main-color);
        display: block;
        margin: 22px 17px 12px;
    }

    .list {
        margin-top: 16px;
        display: flex;
        flex-wrap: wrap;
        row-gap: 2px;
    }

    &.collapsed {
        width: 84px;
        margin-right: 0;
        padding-left: 0;

        /* Add margin and padding to prevent tooltip clipping */
        &:hover {
            padding-left: 180px;
        }

        label {
            width: fit-content;
        }

        span, a {
            text-indent: -9999px;
            font-size: 0;
            text-indent: 0;
            gap: 0;
            padding: 10px;
        }

        input[type="checkbox"] ~ span:before {
            display: none;
        }

        input[type='checkbox']:checked + span + .dropdown {
            gap: 0;
        }

        .logo {
            display: none;
        }

        .dropdown {
            position: absolute;
            z-index: 1000;
            width: 160px;
            right: 105%;
            top: -8px;
            background-color: var(--gray-light2);
            border-radius: 8px;
            padding: 12px;

            a {
                font-size: unset;
                padding: 11px 14px;

                &:before {
                    display: none;
                }
            }
        }

        .list {
            flex-direction: column;
        }

        .merchant-name,
        .logo {
            display: none;
        }

        .logo-wrapper {
            padding: 0;
        }

        .more-column-button {
            margin: 0 auto;
            padding: 0;
            position: relative;
            display: flex;
            justify-content: center;

            img {
                rotate: unset;
            }
        }

        /* Tooltip styles for collapsed sidebar */
        label[data-tooltip]:not(.dropdown-active) {
            position: relative;

            &:hover::before {
                content: attr(data-tooltip);
                position: absolute;
                right: calc(100% + 15px);
                top: 50%;
                transform: translateY(-50%);
                background-color: var(--gray-light2);
                color: var(--black-text);
                padding: 8px 11px;
                border-radius: 5px;
                font: 15px/1.3 var(--museo-rounded-500);
                white-space: nowrap;
                z-index: 10000;
                pointer-events: none;
                opacity: 1;
                visibility: visible;
                animation: tooltip-fade-in 0.2s ease forwards;
                min-width: max-content;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            }
        }

        label:has(.dropdown li.active) {
            > span {
                background-color: var(--main-color);
                color: white;
            }

            img {
                filter: brightness(0) invert(1);
            }
        }
    }
}

@keyframes tooltip-fade-in {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

.menu-toggle, .backdrop {
    display: none;
}

/* START MODAL */

body .overlay{
    display: none;
    color: #5d5d5d;
    border-radius: 12px;

    label {
        font-weight: 400;
        height: 18px;
    }

    .items {
        width: 100%;

        .items-list {
            padding-top: 4px;
        }
    }

    button.button, button.button:hover {
        background-color: var(--main-color);
        border: none;
        border-radius: 3px;
        margin-top: 22px;
        border-radius: 5px;
        font-size: 13px;
    }

    .button_done {
        float: right;
        width: 17%;
    }
}

.set-price-inventories {
    .label-price {
        font: 19px/22px var(--museo-rounded-300) !important;
        margin-right: 15px;
    }

    .edit-price {
        width: 50%;
    }

    .input-remove {
        height: auto;
        display: inline !important;
        float: none !important;
        margin-top: none !important;
    }

    .search {
        width: 100% !important;

        input {
            padding-bottom: 2px;
            padding-left: 10px;
            padding-right: 10px;
            padding-top: 2px;
        }
    }

    .label-select-store {
        font: 19px/22px var(--museo-rounded-300) !important;
        padding-top: 0;
    }
}

.overlay .tabs {
    .label_wrapper label {
        color: #5d5d5d;
        font-size: 23px;
        padding: 10px 0 28px;
    }

    .label_wrapper {
        border-bottom: 1px solid var(--gray-line);
        margin-bottom: 22px;
    }

    #tab1:checked ~ .label_wrapper label[for="tab1"],
    #tab2:checked ~ .label_wrapper label[for="tab2"] {

        &:after {
            content: '';
            width: 100%;
            background: var(--main-color);
            height: 5px;
        };
    }
}

body.show-overlay .overlay-wrapper {
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    top: 0;
    left: 0;
}

.close-overlay {
    position: absolute;
    right: 32px;
    top: 32px;
    width: 32px;
    height: 32px;
    opacity: 0.5;
    cursor: pointer;

    &:hover {
        opacity: 1;
    }

    &:before, &:after {
        position: absolute;
        left: 15px;
        content: ' ';
        height: 33px;
        width: 2px;
        background-color: var(--main-color);
    }

    &:before {
        transform: rotate(45deg);
    }

    &:after {
        transform: rotate(-45deg);
    }
}

body.show-overlay .overlay {
    font-weight: normal;
    position: absolute;
    display: block;
    width: 900px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background-color: white;
}

.overlay .overlay-content {
    padding: 36px 32px 20px;
}

.overlay-content .select_all {
    color: var(--main-color);
    font-size: 21px;
    padding-bottom: 8px;

    label {
        display: initial;
        cursor: pointer;
    }
}

body.dashboard .overlay-title {
    color: #b2b2b2;
    font-size: 20px;
    font-weight: 600;
    padding-bottom: 10px;
}

.overlay .row {
    margin-bottom: 4px;
    min-height: 30px;
}

.row_title {
    height: 32px;
}

.stores-search {
    position: relative;

    .awesomplete {
        display: inherit;
    }

    .icon-mglass {
        position: absolute;
        border-color: #5d5d5d;

        &:after {
            background-color: #5d5d5d;
        }
    }

    input {
        padding: 8px 33px;
        border-radius: 5px;
        width: 100%;
        max-width: 250px;
        font-size: 14px;
        border: 1px solid #5d5d5d;

        &:placeholder {
            color: var(--gray-line);
        }
    }
}

.overlay-content .items {
    height: 220px;
    overflow-y: scroll;

    ul[hidden] {
        width: 100%;
    }

    ul[hidden] li {
        margin-right: 4%;

        &:nth-child(3n+1) {
            margin-right: 0;
        }

        &:last-child {
            margin-right: 0;
        }
    }

    .columns {
        font-size: 14px;
        line-height: 20px;
    }

    input {
        position: relative;
        top: 3px;
        float: left;
        margin-right: 10px;
    }

    label {
        float: left;
        width: 85%;
        font-size: 14px;
        line-height: 18px;
        color: #5d5d5d;
        cursor: pointer;
        display: table;
    }
}

.checkbox_overlay, #select_all {
    margin-right: 5px;
}
/* END MODAL */

.logs-wrapper {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;

    .container {
        background: #fff;
        width: 100%;
        max-width: 1280px;
        margin: 0 auto;
    }

    .header {
        text-align: center;
        min-height: 45px;
        padding: 20px 0;
    }

    .title {
        font-size: 18px;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
    }

    .subtitle {
        font-size: 14px;
    }

    ol {
        padding: 0;
        margin: 0;
    }

    ol li {
        list-style: none;
    }

    li:hover:not(.divider) {
        background-color: #ffda9e;
    }

    .divider {
        font-weight: bold;
        margin-top: 30px;
        margin-bottom: 5px;
    }

    .menu-item {
        padding: 5px 0 5px 15px;
        border-radius: 3px;
        margin-top: 5px;
    }

    a {
        color: #4d4d4d;
        outline: none;
    }

    .table {
        border-collapse: collapse;
    }

    .table thead tr {
        background-color: #FFC728;
        height: 50px;
    }

    .table th, .table td {
        font-family: Arial, Helvetica, sans-serif;
        color: #4d4f4d;
        padding: 8px;
        vertical-align: top;
    }

    .table th {
        font-weight: 600;
        vertical-align: middle;
        width: 25%;
    }

    .table th:nth-of-type(1), .table th:nth-of-type(2) {
        width: 12.5%
    }

    .table tbody tr:nth-child(odd) {
        background-color: rgba(231, 231, 231, .2);
    }

    .table tbody tr:nth-child(even) {
        background-color: rgb(252, 255, 206);
    }

    .table tr td {
        word-break: break-all;
    }
}

.search .awesomplete, .form-report .awesomplete {

    display: inherit;
    width: 100%;

    .awesomplete {
        width: 100%;
    }

    input {
        margin-right: 0;
        margin-bottom: 0;
    }

    .input {
        width: 100%;
    }

    ul {
        line-height: 22px;
        margin: -2px 0 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-top: 1px solid var(--border-color);
        border-color: var(--border-color);
        box-shadow: none;

        &:before {
            content: '';
            display: none;
        }

        li[aria-selected="true"] mark, li:hover mark, mark {
            color: var(--gray-light);
            font-weight: normal;
            background: transparent;
        }

        li {
            font-size: 14px;
            color: var(--gray-light);
            padding: 7px 12px;
            margin-bottom: 0;
            border-bottom: 1px solid var(--gray);

            &:last-child {
                border-bottom: none;
            }
        }

        li[aria-selected="true"], li:hover, li:focus {
            color: var(--gray-light);
            background-color: var(--gray);
        }
    }
}

.search .awesomplete {
    position: relative;
}

.import-form {

    h3 {
        color: var(--main-color);
        font: 42px/48px var(--museo-rounded-100);
        margin-bottom: 0;
    }

    h5, label {
        font: 15px/22px var(--museo-rounded-500);
    }

    .download {
        display: table;
        width: 100%;
        padding-bottom: 18px;
        margin-bottom: 20px;
        border-bottom: 1px solid var(--gray-line);
    }

    th, td {
        border-bottom: none;
    }

    .download .button {
        background-color: var(--main-color);
        color: white;
        padding: 8px 12px 7px;
        border-radius: 5px;
    }

    input, textarea, select, fieldset {
        margin-bottom: 2px;
    }

    .helptext {
        font: 13px/15px var(--museo-rounded-300);
        color: var(--soft-gray);
    }

    .field-wrapper {
        margin-bottom: 1.5rem;
    }
}

.check-name {
    display: flex;
    align-items: center;
    gap: 10px;

    & > * {
        padding: 0;
        margin: 0;
    }
}

.loading-circle {
    transition: none;
    background: url('/static/img/spinner.gif') no-repeat center right;
    width: 25px;
    height: 25px;
}

.loading-circle-v2 {
    width: 15px;
    height: 15px;
    border: 3px solid var(--purple-omni);
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: rotate-full 1.3s linear infinite;
}

label, legend {
    font-family: var(--museo-rounded-300);
    display: block;
    margin-bottom: 5px;
}

@media screen and (max-width: 1024px) {
    .content_wrapper {
        padding: 30px 5%;

        .tabs, .tabs-v2 {
            max-width: 90vw;
        }
    }

    .detail-report .header {
        padding: 65px 5% 3px;
    }

    .ten.columns {
        width: 100%;

        .default-hidden {
            display: table-cell;
        }
    }

    .more-column-button {
        display: none;
    }

    /* START MAIN-MENU */
    .menu-toggle {
        display: table;
        position: absolute;
        top: 34px;
        right: 5%;
    }

    .sidebar_wrapper.main-menu {
        position: absolute;
        transition: right .5s ease, box-shadow 0.3s ease;
        width: 25%;
        right: -26%;
        top: 0;
        height: 100%;
        z-index: 999;
    }

    .main-menu .menu-close {
        position: absolute;
        right: 0;
        top: 0;
    }

    .sidebar_wrapper.main-menu:target,
    .sidebar_wrapper.main-menu[aria-expanded="true"] {
        right: 0%;
        position: fixed;
        box-shadow: 3px 0 12px rgba(0,0,0,.25);
    }

    .main-menu:target .menu-close,
    .main-menu[aria-expanded="true"] .menu-close {
        z-index: 1001;
    }

    .main-menu:target ul,
    .main-menu[aria-expanded="true"] ul {
        position: relative;
        z-index: 1000;
    }

    .main-menu:target + .backdrop,
    .main-menu[aria-expanded="true"] + .backdrop {
        position: fixed;
        display: block;
        content: "";
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 998;
        background: rgba(0,0,0,.6);
        cursor: default;
    }
    /* END MAIN-MENU */
}

@media screen and (max-width: 768px) {
    .sidebar_wrapper.main-menu {
        width: 50%;
        right: -50%;
    }

    .box_wrapper {
        td {
            font-size: 11px;
        }
    }
}

.photos, .videos-thumbnail {
    margin: 5px;
    float: left;
    position: relative;
    margin-right: 10px;

    &:first-child {
        margin-left: 0;
    }
}

.photos__action,
.videos-thumbnail__action {
    position: absolute;
    right: -5px;
    top: -5px;
    z-index: 10;
}

.photos__label,
.videos-thumbnail__label {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
    padding: 4px 10px;
    font: 14px/1.2 var(--museo-rounded-300);
    color: white;
    background-color: var(--dark-gray);
    border-top-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.photos img:hover,
.videos-thumbnail:hover {
    opacity: 0.7;
}

h5 {
    font-size: 18px;
    line-height: 0.7;
}

.product_photo, .product_video_thumbnail {
    width: 180px;
    height: 180px;
    object-fit: cover;
}

.check {
    display: none;
    width: 23px;
}

.image_product {
    cursor: pointer;
    box-sizing: border-box;
    border: 4px solid transparent;
    margin-bottom: 0;
    outline: 0;
}

.delete-image, .delete-video {
    position: absolute;
    right: -6px;
    top: -6px;
    z-index: 10;

    .delete-image-icon {
        width: 18px;
        height: 18px;
    }
}

.main_photo {
    form {
        max-width: 90%;
    }
}

.main_photo_top_button {
    margin-top: 25px;
    padding-top: 0;
    border-bottom: 1px solid var(--border-color);
    border-top: none;
    display: table;
    width: 100%;

    .errorlist {
        margin: 0 20px;
    }

    button {
        margin-top: -8px;
    }
}

.image_product .check {
    position: absolute;
    color: #4A79A3;
    right: -6px;
    top: 12px;
}

.checked {
    border-color: var(--main-color);
    width: 188px;
    height: 188px;

}

.checked .check {
    display: block;
}

.display-mini-map {
    width: 160px;
    height: 160px;
}

.add-location {
    width: 160px;
    aspect-ratio: 1;
    border: 1px solid var(--main-color);
    background: url('/static/img/new_icons/location-icon.svg') center no-repeat;
    background-size: 90px;
    position: relative;

    span {
        font-size: 15px;
        color: var(--main-color);
        position: absolute;
        bottom: 10px;
        width: 70%;
        left: 24px;
    }
}

.gmnoprint a, .gmnoprint span {
    display:none;
}
.gmnoprint div {
    background:none !important;
}

.edit-location {
    height: 25px;
    width: 25px;
    background-image: url('/static/img/editbutton.png');
    z-index: 1;
    position: absolute;
    margin-left: 145px;
    margin-top: -10px;
}

.address {
    width: 73%;
    float: left;
    margin-top: 10px;
}

.display-map-input {
    width:640px;
    height:320px;
}

input[type="text"].search-address {
    margin: 10px 0 20px;
    width: 640px;
}

.remove {
    padding-left: 16px;
    color: #FC3838;
    font-weight: normal;
    border: transparent;
    margin-bottom: 0;
    line-height: 10px;
    height: auto;

    span::before {
        position: absolute;
        margin-left: -20px;
        margin-top: 0;
        background-image: url('/static/img/x-icon.png');
        background-size: 13px 10px;
        width: 13px;
        height: 10px;
        content:"";
    }

    &.small-pl{
        padding-left: 4px;
    }
}

.login {
    height: 100%;
    background-image: url('/static/img/bg-login.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: var(--main-color);

    input {
        width: 100%;
        display: block;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid var(--gray-line);
        font-size: 16px;
        height: 35px;
        margin-bottom: 0;
        background-color: transparent;
        padding: 6px 0;
    }

    input:focus {
        border: none;
        border-bottom: 1px solid var(--gray-line);
    }

    label {
        color: white;
        font-family: var(--museo-rounded-100);
        margin-top: 20px;
    }

    button {
        font: 16px/1.2 var(--museo-rounded-700);
        width: 100%;
        margin: 0;
        height: 44px;
    }

    .errorlist {
        background: rgba(255, 255, 255, 0.5);

        li {
            padding-left: 0;
            text-align: left;
        }
    }

    .messages li {
        background-color: white;
        color: var(--soft-gray);
        font: 14px/1.2 var(--museo-rounded-300);
        padding: 0;
    }

    li {
        color: var(--red);
        padding: 5px;
        text-align: justify;
        background-color: transparent;

        &::before {
            content: none;
        }
    }
}

.login__content {
    transform-origin: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    border-radius: 8px;
    padding: 30px;
    margin: 0 auto;
    width: 350px;
    background-color: white;
}

.login__logo {
    display: block;
    height: 48px;
    margin: 0 auto;
}

.login__title {
    text-align: center;
    font: 20px/1.2 var(--museo-rounded-300);
    margin: 20px 0 10px;
}

.login__subtitle {
    text-align: center;
    font: 14px/1.2 var(--museo-rounded-300);
    color: var(--soft-gray);
    margin-bottom: 20px;
}

.login__form {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.login__field {
    display: grid;
    grid-template-columns: 15px 1fr;
    column-gap: 15px;
    align-items: center;

    img {
        display: block;
        width: 100%;
    }
}

.login__field--email {
    grid-template-columns: 18px 1fr;
    grid-template-areas: 'icon .'
                        '. errors';
}

.login__icon {
    grid-area: icon;
}

.login__errors {
    grid-area: errors;

    ul li {
        text-align: left;
        padding: 0;
        margin-top: 5px;

        &::before {
            content: none;
        }
    }
}

.login__forgot-password {
    color: var(--red);
    margin: 15px 0 25px;
    font-size: 16px;

    &:hover {
        color: var(--red);
    }
}

.login__forgot-password--main,
.login__forgot-password--main:hover {
    color: var(--main-color);
}

.login__forgot-password--gray {
    color: var(--soft-gray);
}

.forget_password h1 {
    font: 35px/20px var(--museo-rounded-100);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 40px;
}

.field-extended {
    width: 100%;
    position: relative;

    .icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        margin: 0;
        left: 10px;

        &:focus {
            border: none;
        }

        & + input, & + select, & + textarea {
            padding-left: 38px;
        }
    }

    .icon--right {
        left: unset;
        right: 10px;

        & + input, & + select, & + textarea {
            padding-left: 0;
            padding-right: 38px;
        }
    }
}

.show-password-checkbox {
    appearance: none;
    background: center / contain url('/static/img/new_icons/icon-new-hide.webp') no-repeat;
    cursor: pointer;

    &:checked {
        background-image: url('/static/img/new_icons/icon-new-show.webp');
        transform: translateY(-55%);
    }
}

.form-checkbox {
    label {
        font: 16px/16px "MuseoSansRounded300Regular";
        position: relative;
        padding: 4px 0;
        margin: 0;
        overflow: hidden;
        width: 100%;
    }

    span.name {
        left: 28px;
        top: 2px;
        border-bottom: 1px solid var(--gray-line);
        width: 98%;

        &.position-revert {
            position: unset;
        }
        &.modifier {
            padding-bottom: 0;
        }
    }

    label span.name{
        padding-left: 14px;
    }

    span.normal-name {
        padding-top: 2px;
    }

    input[type="checkbox"] {
        appearance: none;
        text-rendering: optimizeSpeed;
        width: 17px;
        height: 17px;
        margin: 0;
        margin-right: 15px;
        display: block;
        float: left;
        position: relative;
        cursor: pointer;
        background: var(--border-color);

        &:after {
            content: "";
            vertical-align: middle;
            text-align: center;
            line-height: 17px;
            position: absolute;
            cursor: pointer;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            font-size: 17px;
        }

        &.m-0 {
            margin: 0;
        }
    }

    .table input[type="checkbox"] {
        margin-top: 0;

        &:after {
            left: 0;
        }
    }
}

.parent {
    margin-top: 35px;
}

.add_photo {
    width: 100%;

    form {
        max-width: 90%;
    }

    .button.main-color {
        margin-top: 0;
    }
    input[type="file"] {
        display: none;
    }

    .preview_image {
        float: right;
        position: relative;
        bottom: 50px;
    }

    img {
        object-fit: cover;
        width: 300px;
        height: 300px;
    }
}

.pagination {
    font: 15px/1.2 var(--museo-rounded-500);
    display: flex;
    justify-content: space-between;

    a {
        color: var(--main-color);
        display: flex;
        gap: 5px;
        align-items: center;
    }

    span {
        font-size: 23px;
        position: relative;
        top: -1px;
    }

    .next {
        margin-left: auto;
    }
}

.filter {
    margin-right: 60px;

    select {
        appearance:none;
    }
}

.filter:after {

    content: var(--icon);
    font-size: 32px;
    position: absolute;
    top: -16%;
    right: 12%;
    transform: rotate(90deg);
    color: var(--soft-gray);
    font-weight: normal;
    cursor: pointer;
    font-family: var(--museo-rounded-100);
}

.messages, .message-container {
    margin-top: 0;
    background: rgba(187, 210, 149, 0.5);
    color: #6D956D;
    text-align: center;

    .info {
        background: rgba(255, 205, 88, 0.5);
        color: #D78B00;
    }

    .error {
        background: rgba(255, 205, 184, 0.5);
        color: #BD796A;
    }

    li {
        padding: 7px;
    }

}

ul.messages {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.add-item, .add-store {
    width: 100%;

    .awesomplete {
        display: inline-block;
        width: 60%;
        margin-right: 10px;
    }

    .quantity {
        width: 10%;
        margin-right: 10px;
    }

    .button-add-child, .button-add-item, .button-add-store {
        border-radius: 5px;
        padding: 7px 22px;
        color: white;
        background-color: var(--main-color);
    }
}

.add-child-variant, .add-product {
    display: grid;
    grid-template-columns: 1fr 80px auto;
    gap: 10px;
    width: 82%;
    align-items: baseline;

    .quantity {
        width: 100%;
        margin-right: 10px;
        display: inline-flex;

    }

    .button-add-child, .button-add-item, .button-add-store, .button-add-product  {
        border-radius: 5px;
        border: 1px solid var(--main-color);
        padding: 6px 22px;
        color: var(--main-color);
        background-color: white;
        min-width: 50px;
    }
}

.add-child-variant, .add-product, .add-multiple-items {
    .awesomplete-search {
        padding-right: 30px;
        width: 100%;
    }

    .search-bar-with-glass {
        position: relative;

        .icon-mglass {
            z-index: 2;
            top: 22px;
            float: right;
            margin-right: 15px;
            left: 0%;
        }

    }
}

form.add-multiple-items {
    width: 60%;
}

.result-child-v3 {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr auto;
    padding: 16px 13px 16px 1px;
    border-bottom: 1px var(--gray-line) solid;
}

.result-close-v3 {
    width: 16px;
    content: url('/static/img/trash-icon.png');
}

.awesomplete-input {
    width: 60%;

    .awesomplete {
        width: 100%;
    }

    .input {
        width: 100%;
    }
}

.awesomplete-input--fixed-width {
    width: 138px;
}

.awesomplete-input--fixed-height .awesomplete input {
    height: 35px;
}

.awesomplete-input--full-width input {
    width: 100%;
}

form .result-wrapper .result-button {
    padding-right: 37px;
    cursor: default;
    margin-top: 6px;
}

.result-wrapper {
    margin-top: 15px;
}

.clear {
    clear: both;
}

form .result-wrapper .result-store {
    cursor: default;
    margin-top: 6px;
    width: 82%;
    padding-right: 6px;

    table {
        margin: 0;

        td {
            padding: 0 2px;
        }
    }
}

.result-close {
    position: absolute;
    top: 10px;
    width: 30px;
    height: 23px;
    opacity: 0.4;
}

.result-close:hover {
    opacity: 1;
}

.result-close:before, .result-close:after {
    position: absolute;
    content: ' ';
    height: 15px;
    width: 2px;
    background-color: var(--main-color);
}

.result-close:before {
    transform: rotate(45deg);
}

.result-close:after {
    transform: rotate(-45deg);
}

.warning-settings{
    font: 12px/1.2 var(--museo-rounded-300);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    gap: 7px;
    padding: 4px 5px;
    border-radius: 4px;
    background: rgba(255, 205, 184, 0.5);

    img {
        max-width: 20px;
    }

    .button {
        font-size: 12px;
        position: relative;
        padding: 5px 12px;
    }
}

/* start filter */

.popup-filter-wrapper {
    position: relative;

    .flatpickr-calendar {
        box-shadow: none;
    }
}

.popup-filter {
    position: absolute;
    top: 30px;
    margin-top: 5px;
    margin-left: -10px;
    border-radius: 2px;
    font-size: 14px;
    background-color:  white;
    text-align: left;
    border: 1px solid var(--gray-line);
    border-radius: 8px;
    padding: 12px 15px;
    min-width: 120px;
    overflow-y: auto;
    max-height: 250px;
    z-index: 10;

    &.follow-content {
        max-height: unset;
    }

    &.ml-0 {
        margin-left: 0;
    }
}

.popup-filter a {
    display: block;
    text-decoration: none;
    color: black;
    cursor: pointer;
    padding: 6px 0;
    font: 15px/18px var(--museo-rounded-300);
    text-transform: none;
    color: var(--gray-light);

    &.active {
        background-color: var(--gray);
    }

    &.main-color {
        color: var(--main-color);
    }
}

.popup-filter a:hover {
    color: var(--main-color);
}

.filter-wrapper {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-store {
    width: 100%;
    display: table;
    padding-top: 0;
    position: relative;

    button {
        padding: 0;
        margin: 0;
        height: 0;
        border: none;
    }

    input {
        max-width: 100%;
        color: var(--gray-light);
        padding: 6px 10px 6px 35px;
        margin-bottom: 10px;

        &::placeholder {
            color: var(--soft-gray);
        }
    }
}

th.small {
    padding-bottom: 5px;
}

.popup-filter.is-hidden.autocomplete-filter-popup {
    min-width: 150px;
    padding: 10px;
    line-height: 1;
    border: 1px solid var(--gray-line);
    box-shadow: 4px 4px 16px 0 rgba(217,217,217,1);
    overflow: unset;

    .awesomplete input,
    .actions_wrapper input {
        margin: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
    }

    .actions_wrapper input[type="text"] {
        padding: 6px 10px 6px 30px;
        height: 33px;
    }

    .actions_wrapper {
        margin-bottom: 0;
    }
}

.popup-filter.is-hidden.filter-date-wrapper {
    min-width: 150px;
    padding: 10px;
    line-height: 1;
    border: 1px solid var(--gray-line);
    box-shadow: 4px 4px 16px 0 rgba(217,217,217,1);
    overflow: unset;
}

/* end filter */

.is-hidden {
    display: none;

}

.image-filter {
    width: 16px;
    aspect-ratio: 1;
}

.report-form {
    input[type="date"] {
        border: 1px solid #e0e0e0;
        border-radius: 5px;
        padding: 0 10px;
        box-sizing: border-box;
    }

    input[type="date"]::-webkit-inner-spin-button {
        display: none;
        appearance: none;
    }

    input, select {
        height: 35px;
    }

    /* remove margin from skeleton.css */
    &.input-no-margin {
        input, textarea, select, fieldset {
            margin: 0;
        }
    }

    .drag-drop-box {
        max-width: 60%;
    }

    label {
        width: max-content;
    }
}

.button-dowload-csv {
    color: white;
    background-color: var(--main-color);
    border: 1px solid var(--main-color);
    height: 35px;
    margin-top: 25px;
    display: block;

    &:hover {
        color: white;
        border-color: transparent;
    }

    &.no-margin {
        margin: 0;
    }
}

.tabel-report {
    width: 35px;
    tr td {
        border-bottom: none;
    }
}

.tabel-report-filter-map {
    width: auto;
}

.report-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 30px;
}

.maps {
    height: 22px;
    margin-bottom: 0;
    padding: 3px 0;
    width: 105px;
}

.lines {
    margin-top: 0;
    margin-bottom: 0;
}

.operating-hours-table td {
    vertical-align: baseline;
    padding: 12px 15px 0 15px;
    color: var(--gray-light);
    text-align: left;
}

.modifier {
    width: 73%;
    float: left;
    margin-top: 0;
}

/*
    START MODAL WINDOW
*/
.tingle-modal {
    z-index: 1001;
}

.tingle-modal__close {
    font: 40px/1 monospace;
}

.tingle-modal--visible {
    visibility: visible;
    opacity: 1;
}

.tingle-modal-box {
    width: 80%;
    max-width: 500px;
    padding: 20px 40px;

    h1 {
        font: 17px/1.2 var(--museo-rounded-500);
        color: var(--gray-light);
        text-transform: none;
    }
}

.tingle-modal-box__content {
    padding: 0;
    text-align: center;
}

.tingle-modal-box__footer {
    padding: 10px 0 0;
    text-align: center;
    background-color: unset;
}

.tingle-modal-box__content .tingle-modal-box__title {
    font-size: 28px;
}

.tingle-modal-box__description {
    margin: 0;
}

.tingle-modal-box__qr-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;

    img {
        padding: 20px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }
}

.tingle-btn {
    font: 12px/1 var(--museo-rounded-700);
    color: var(--gray-light);
    margin: 5px;
    padding: 10px 30px;
    background-color: transparent;
    border: 1px solid var(--gray-line);

    &:hover {
        color: inherit;
        border: 1px solid var(--gray-line);
    }
}

.tingle-btn--primary,
.tingle-btn--primary:hover {
    color: white;
    background-color: var(--main-color);
    border: 1px solid var(--main-color);
}

.tingle-btn--red-bg,
.tingle-btn--red-bg:hover {
    color: white;
    background-color: var(--red);
    border: 1px solid var(--red);
}

.tingle-btn--red-border,
.tingle-btn--red-border:hover {
    border-color: var(--red);
    color: var(--red);
}
/*
    END MODAL WINDOW
*/

.items-report-box {
    display: flex;
    justify-content: space-between;
    background-color: white;
    padding: 30px;
    border: 1px solid var(--line-color);
    overflow-y: auto;
    max-height: 600px;
    border-radius: 4px;

    table {
        width: 100%;
        margin-bottom: 0;

        .merge-bottom {
            th, td {
                border-bottom: none;
                padding-bottom: 0;
            }

            + tr {
                display: flex;
                flex-wrap: wrap;
                gap: 20px 40px;

                td {
                    padding: 0;
                    border: none;
                }
            }
        }

        .circle {
            aspect-ratio: 1;
        }
    }

    .report-wrapper {
        display: flex;
        gap: 40px;
    }

    .chart-wrapper {
        width: calc(70% - 40px);
    }

    .table-wrapper {
        width: 30%;

        .table-title {
            font: 20px/1.2 var(--museo-rounded-700);
            margin-bottom: 3px;
        }

        .table-data {
            max-height: 370px;
            overflow-y: auto;
        }

        table {
            tr, th, td {
                border: 0;
                padding: 5px 0;
            }

            th {
                font: 14px/1.2 var(--museo-rounded-500);
                color: var(--gray-text);
            }

            td {
                display: flex;
                align-items: center;
            }
        }
    }

    .stats_number {
        font: 32px/1.2 var(--museo-rounded-700);
        color: var(--dark-gray);
        margin: 0;
    }

    .stats_label {
        font: 14px/1.2 var(--museo-rounded-500);
        color: var(--gray-text);
        margin: 0;
    }
}

.items-report-table {
    th, td {
        border-color: var(--line-color);
    }

    th {
        font: 14px/1.2 var(--museo-rounded-500);
        color: var(--gray-text);
        padding: 8px 16px;
    }

    td {
        font: 14px/1.2 var(--museo-rounded-500);
        color: var(--light-black);
        padding: 16px;
    }

    th:first-child,
    td:first-child {
        padding-left: 0;
    }

    th:last-child,
    td:last-child {
        padding-right: 0;
    }

    .group-name {
        font: 16px/1.2 var(--museo-rounded-700);
    }
}

.content-wrapper-v2 {
    padding: 0 7%;

    h1, h2 {
        font: 24px/1.2 var(--museo-rounded-500);
        text-transform: capitalize;
        color: var(--dark-gray);
        margin-bottom: 40px;
    }

    h2 {
        font-family: var(--museo-rounded-700);
        margin-bottom: 0px;
    }

    h4 {
        font: 14px/1.2 var(--museo-rounded-500);
        color: var(--dark-gray);
        margin: 0;
    }

    form {
        max-width: 100%;
    }

    .double-action {
        font: 14px/1.2 var(--museo-rounded-500);
        color: var(--gray-text);
        align-items: center;
        gap: 20px;

        .button {
            font: 16px/1.2 var(--museo-rounded-500);
            color: white;
            padding: 10px 25px;
            margin: 0;
            width: auto;
        }
    }

    .empty {
        font: 30px/1.2 var(--museo-rounded-300);
        display: flex;
        gap: 10px;
        flex-direction: column;
        max-width: 40%;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }

    .fields {
        display: flex;
        width: 100%;
        height: 40px;
        margin: 0 0 32px;
        border: 1px solid var(--line-color);
        border-radius: 4px;

        &.input-search-v2 {
            margin-top: 15px;
        }

        input,
        select,
        &:not(.input-search-v2) button,
        .awesomplete,
        .awesomplete input {
            font: 14px/1.2 var(--museo-rounded-300);
            min-width: 186px;
            height: 100%;
            box-sizing: border-box;
            border: none;
            border-radius: 0;
            margin: 0;

            &:placeholder {
                font: 14px/1.2 var(--museo-rounded-300);
            }

            &:first-child {
                border-top-left-radius: 4px;
                border-bottom-left-radius: 4px;
            }

            &:not(:last-child) {
                border-right: 1px solid var(--line-color);
            }
        }

        .flatpickr-input {
            max-width: initial;
        }

        &:not(.input-search-v2) button {
            font: 16px/1.2 var(--museo-rounded-300);
            padding: 10px 17px;
            text-transform: capitalize;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;

            &:focus {
                color: white;
            }
        }

        &.input-search-v2 .awesomplete {
            width: 100%;
            display: block;

            input {
                border-right: none;
            }

            ul {
                background: white;
                z-index: 2;
                position: relative;
                border: 1px solid var(--line-color);
            }

            .visually-hidden {
                position: absolute;
                clip: rect(0, 0, 0, 0);
            }
        }
    }

    .details-v2 {
        table-layout: fixed;
        width: auto;

        & td {
            border: none;
            padding: 0px;
            font: 16px/1 var(--museo-rounded-300);

            &:first-child {
                display: flex;
                justify-content: space-between;
                padding-right: 12px;
                width: 200px;

                &::after {
                    content: ":";
                }
            }
        }

        & tr:not(:last-child) td {
            padding-bottom: 16px;
        }
    }
}

@media (max-width :540px) {
    .tingle-modal-box {
        width: auto;
        border-radius: 0;

        .tingle-btn {
            display: block;
            width: 100%;
        }
    }

    .tingle-modal {
        display: block;
    }

    .tingle-modal__close {
        top: 0;
        width: 100%;
        background-color: var(--blue);
    }

    .tingle-modal__closeLabel,
    .tingle-modal__closeIcon {
        font: 15px/1 var(--museo-rounded-300);
        display: inline-block;
        vertical-align: middle;
    }

    .tingle-modal__closeIcon {
        font-size: 25px;
    }

    .actions_wrapper .button--tracking {
        margin-left: 5px;
    }
}

.group {
    clear: both;
    margin-top: 0;
}

.edit-table {
    width: 20px;
    position: relative;
    top: 3px;
    z-index: 1;
}

.text-icon-wrapper {
     display : flex;
     align-items: center;
     gap: 5px;

     & > img {
         height: 20px;
     }
}

.text-icon-wrapper-inline {
    vertical-align: text-bottom;
    margin-left: 2px;

    & > img {
        width: 20px;
        aspect-ratio: 1;
        vertical-align: text-top;
    }
}


.search-wrapper {
    .icon-mglass {
        z-index: 2;
    }

    #search_stores {
        width: 300px;
    }
}

.button-filter-area {
    color: white;
    background-color: var(--main-color);
    border: 1px solid var(--main-color);
    height: 35px;
    margin-top: 24px;

    &.no-margin {
        margin: 0;
    }
}

.dashboard h3 {
    font-family: var(--museo-rounded-700);
    color: var(--main-color);
}

#id_permissions {
    height: 100%;
}

.report-form-dashboard {

    input[type="date"] {
        border: 1px solid #e0e0e0;
        height: 30px;
        border-radius: 5px;
        padding: 3px 10px;
        width: auto;
    }

    select {
        height: 35px;
    }

    input[type="date"]::-webkit-inner-spin-button {
        display: none;
        appearance: none;
    }

    .flatpickr-input {
        max-width: 100px;
        height: 35px;
    }

    .awesomplete input {
        height: 35px;
    }
}

.table-report-dashboard {
    width: auto;

    td {
        vertical-align: top;
        padding: 12px 5px 0;
        border: none;

        &:first-child {
            padding-left: 0px;
        }

        &.no-padding {
            padding: 0;
        }

        input {
            margin-bottom: 0;
        }
    }

    .label-top {
        margin: 0;
        padding: 0;
    }

    .dropdown-input {
        height: 35px;
        max-width: 150px;
        cursor: pointer;
        color: var(--gray-light);
        font-family: var(--museo-rounded-500);
    }
}

.content-wrapper-dashboard {
    padding: 40px 5% 20px;
    box-sizing: border-box;

    table {
        margin-bottom: 0;
        label{
            color: white;
        }

        .popup-filter label {
            color: var(--gray-light);
            align-items: center;
            font-size: 15px;
            text-wrap: nowrap;
        }
    }

    tr:last-child td {
        border-bottom: none;
    }

    .empty {
        font: 38px/42px var(--museo-rounded-100);
        padding: 65px;
        width: 100%;
        background: white;
        display: table;
        border-radius: 5px;
        box-shadow: 0 1px 3px #ccc;
        text-align: center;
        box-sizing: border-box;

        img {
            display: block;
            margin: 0 auto;
            padding-bottom: 15px;
        }
    }
}

.empty-data {
    font: 38px/42px var(--museo-rounded-100);
    padding: 65px;
    margin-top: 20px;
    width: 100%;
    background: white;
    display: table;
    border-radius: 5px;
    box-shadow: 0 1px 3px #ccc;
    text-align: center;
    box-sizing: border-box;

    .no-data {
        display: block;
        margin: 0 auto;
        padding-bottom: 15px;
    }
}

.row.content-wrapper-dashboard {
    background: linear-gradient(90deg, var(--purple-omni) 0%, #DFB3FF 100%) no-repeat;
    background-size: 100% 250px;

    h3 {
        color: white;
        margin-left: 3px;
    }

    .dashboard {
        box-sizing: border-box;
        padding-bottom: 16px;
    }

}

.form-report .form-multi-select {
    height: 100px;
}

.multiple-creation-form {
    input,
    .awesomplete input,
    div.awesomplete-text .awesomplete {
        width: 100%;
    }
}

.double-action {
    display: flex;

    button {
        padding: 0;
    }

    form {
        display: flex;
    }

    img {
        display: block;
    }

    .column {
        flex-basis: 0;
    }

    &.center {
        justify-content: center;
    }
}

.tracking .tingle-modal-box {
    width: 60%;
}

.form-field.hidden {
    display: none;
}

.long-field {
    max-width: 500px;

    input {
        width: 100%;
        color: #4d4d4d!important;
    }

    img {
        margin-top: 10px;
        width: auto;
        max-height: 200px;
    }

    .select {
        clear: both;
    }
}

.dual-button {
    margin: 10px 0;
    position: relative;
    display: block;
}

.dual-button button{
    display: inline-block;
    position: relative;
}

.mb-3 {
    margin-bottom: 1.5rem;
}

.image-button {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    height: fit-content;
}

.sso-login__heading {
    font: 16px/1 var(--museo-rounded-300);
    color: var(--dark-gray);
    margin: 32px 0;
    display: flex;
    align-items: center;
    text-align: center;
    width: 100%;
    gap: 25px;

    &::before, &::after {
        content: "";
        display: block;
        flex: 1;
        border-bottom: 1px solid var(--gray-line);
    }
}

.sso-login__buttons {
    display: grid;
    gap: 32px;
    grid-template-columns: 1fr 1fr;
}

.sso-login__button {
    border: 1px solid white;
    border-radius: 4px;
    text-align: center;
    padding: 5px 10px;
}

/* Dropdown container */
.dropdown-container {
    position: relative;
    z-index: 10;
}

.dropdown-options--anchor-right {
    right: 0;
}

/* Hide the checkbox */
.dropdown-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Dropdown select button */
.dropdown-select {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: white;
    border: 1px solid var(--purple-omni);
    border-radius: 4px;
    cursor: pointer;
    color: var(--purple-omni);
    font: 16px/1 var(--museo-rounded-500);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    gap: 8px;

    &.minimalize {
        padding: 0px;
        border: none;
        box-shadow: none;
        font-size: 14px;
        gap: 4px;
    }

    &.small {
        padding: 6px 10px;
        font-size: 14px;
        gap: 4px;
    }

    &.medium {
    padding: 8px 16px;
    font-size: 14px;
    gap: 4px;
}
}

/* Arrow icon */
.dropdown-arrow {
    transition: transform 0.2s;
    line-height: 0;
}

/* Show dropdown when checkbox is checked */
.dropdown-toggle:checked ~ .dropdown-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Rotate arrow when dropdown is open */
.dropdown-toggle:checked ~ .dropdown-select .dropdown-arrow:not(.dropdown-arrow--no-rotation) {
    transform: rotate(180deg);
}

/* Dropdown options container */
.dropdown-options {
    position: absolute;
    width: 100%;
    min-width: 120px;
    box-sizing: border-box;
    background-color: white;
    margin-top: 0;
    box-shadow: 0px 2px 40px 0px rgba(0, 0, 0, 0.05);
    opacity: 0;
    border: 1px solid var(--gray-line);
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 16px;

    /* Option links */
    .option {
        display: block;
        text-decoration: none;
        text-align: left;
        transition: background-color 0.2s;
        font: 16px var(--museo-rounded-500);
        color: var(--black-text);
        border: none;
        padding: 0;
        margin: 0;
        text-transform: capitalize;
        height: unset;

        &:hover {
            color: var(--purple-omni);
            text-align: right;
        }
    }

    &.card {
        padding: 20px;
        border-radius: 4px;
        margin-top: 8px;
        width: max-content;

        .option {
            width: max-content;
        }
    }
}

.sso-login {
    display: flex;
    flex-direction: column;
    align-items: center;

    label {
        margin: 0;
    }

    /* Dropdown container */
    .dropdown-container {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }

    .select-text {
        color: var(--purple-omni);
    }

    .dropdown-options {
        .option {
            text-transform: none;
        }
    }

    .option {
        &:hover {
            color: var(--purple-omni);
            text-align: left;
        }
    }
}

.layout_photo {
    width: 480px;
}

.generate-qr-button {
    display: inline-flex;
    align-items: center;
    column-gap: 5px;
    border-radius: 8px;
}

.inline-flex {
    display: inline-flex;
}

.flex-center {
    display: flex;
    align-items: center;
}

.separate-by-comma > *:not(:last-child)::after {
    content: ", ";
}

.truncate-oneline {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 400px;
}

.multiple-bom-items {

    .form-row {
        column-gap: 35px;
        margin-bottom: 25px;

        .override .awesomplete {
            width: 100%;
            display: block;
        }

        & > .button {
            grid-column: 1 / -1;
            width: fit-content;
        }

    }

    .form-row-item {
        display: flex;
        justify-content: center;
        column-gap: 10px;
        align-items: center;

        input {
            margin-bottom: 0;
            width: 100%;
        }

        input[type="checkbox"] {
            max-width: 30px;
            margin-top: 0;
        }

        p {
            margin-bottom: 0;
        }
    }

    #empty-form {
        display: none;
    }
}

.form-v2 {
    width: 75%;
    max-width: 565px;
    display: flex;
    flex-direction: column;
    gap: 15px;

    &.small-margin-input input,
    &.small-margin-input select {
        margin-bottom: 7px;
    }

    .awesomplete {
        width: 100%;
    }
}

.form-v2__row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 10px;
    align-items: center;
    row-gap: 2px;
    grid-template-areas: "label input"
                         "label help-text";

    /* reset input margin */
    input, select {
        margin: 0;
        font: 14px/1.2 var(--museo-rounded-300);
        color: var(--black);
        max-width: 350px;
    }

    .helptext {
        grid-area: help-text;
        font: 14px/1.2 var(--museo-rounded-300);
        color: var(--soft-gray);
    }

    .helptext--hide-on-empty:empty {
        display: none;
    }
}

.form-v2__row-error {
    font: 14px/22px var(--museo-rounded-300);
    grid-column: 2;
    color: var(--red);
}

.drag-pos {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 440px;
}

.drag-pos__row {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 10px;
}

.drag-pos__label {
    display: flex;
    align-items: center;
    justify-content: center;
}

.drag-pos__card {
    padding: 15px;
    border-radius: 5px;
    box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, .05);
    border: 1px solid var(--gray-line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    background-color: white;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 50px;
    cursor: move;

    &.dragging {
        border: 1px dashed rgba(0, 0, 0, .4);
        opacity: 0.4;
    }
}

.drag-pos__card-text {
    max-width: 320px;
    flex: 1;
}

.drag-pos__card-icon {
    height: 7px;
    aspect-ratio: 2 / 1;
}

.drag-pos__card-action {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    & > * {
        cursor: pointer;
    }
}

.menu-dropdown {
    position: relative;
    cursor: pointer;
}

.menu-dropdown.active .menu-dropdown__list {
    display: block;
}

.menu-dropdown__list {
    padding: 15px;
    border-radius: 5px;
    box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, .05);
    border: 1px solid var(--gray-line);
    display: none;
    padding: 0;
    position: absolute;
    top: 0;
    right: -10px;
    transform: translateX(100%);

    & > * {
        padding: 10px 15px;
        white-space: nowrap;
        max-width: 250px;
        text-overflow: ellipsis;
        overflow: hidden;
        background-color: white;
    }

    & > *:hover {
        background-color: var(--gray);
    }
}

.gross-profit-header {
    display: block;

    td {
        vertical-align: top;
        padding: 0 10px 0 0;
        border-bottom: none;
    }

    p {
        margin: 0;
        text-align: right;
        color: white;
    }

    .title {
        font-size: 30px;
        color: white;
        padding: 12px 0;
        border-bottom: none;
    }

    .button-dowload-csv {
        margin-top: 20px;

        &:hover {
            color: white;
            border-color: var(--main-color);
        }
    }

    .label-top {
        margin: 0;
        padding: 0;
    }
}

.gross-profit-table {
    background-color: white;
    border-radius: 8px;
    border-collapse: collapse;
    padding: 30px 30px 0 10px;
    border: 1px solid var(--gray-line);
    margin-bottom: 20px;
    position: relative;

    th, td {
        padding: 6px;
        text-align: left;
        border: 1px solid var(--soft-gray);
    }

    th {
        font-weight: bold;
        text-align: center;
    }

    tr:last-child td {
        border-bottom: 1px solid var(--soft-gray);
    }

    .ct-series-a .ct-bar {
        stroke: var(--orange-light);
        fill: var(--orange-light);
    }

    .ct-series-b .ct-bar {
        stroke: var(--light-blue);
        fill: var(--light-blue);
    }
}

.chart-container {
    padding: 10px;
    margin-bottom: 20px;
    position: relative;
}

.legend {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(255, 255, 255, 0.8);
    padding: 5px;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.legend-item {
    display: flex;
    align-items: center;
    margin: 2px 0;
}

.legend-color {
    width: 12px;
    height: 12px;
    margin-right: 5px;
}

.gross-profit {
    background-color: var(--orange-light);
}

.net-sales {
    background-color: var(--light-blue);
}

/* Store Metrics Comparison Styles */
.store-metrics-comparison-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px;
}

.store-metrics-comparison__title {
    font: 26px/1.6 var(--museo-rounded-500);
    color: var(--black);
    margin-bottom: 20px;
}

.store-metrics-comparison__subtitle {
    font-size: 14px;
    color: var(--soft-gray);
    margin-bottom: 20px;
}


.store-comparison-table {
    width: 100%;
    background-color: var(--gray-light2);
    border-radius: 8px;
    border-collapse: separate;
    border-spacing: 0;

    .label-top {
        color: var(--dark-gray);
        font: 13px/1.2 var(--museo-rounded-300);
    }

    .flatpickr-date-range {
        padding: 0;
        border: none;
    }

    /* Date range input styling */
    .flatpickr-date-range .input-v2 {
        border-radius: 4px 0 0 4px;
        height: 35px;
    }

    /* Store column inputs - border radius styling */
    .store-header:nth-child(2) .awesomplete-text .input-v2 {
        border-radius: 0;
    }

    .store-header:nth-child(3) .awesomplete-text .input-v2 {
        border-radius: 0;
    }

    .store-header:nth-child(4) .awesomplete-text .input-v2 {
        border-radius: 0 4px 4px 0;
    }

    thead {
        th {
            background-color: transparent;
            padding: 0 0 12px 0;
            vertical-align: top;
            width: 25%;

            &.has-error {
                .flatpickr-date__input,
                .awesomplete-text__input {
                    border-color: var(--red);
                }
            }

            .errorlist {
                margin-top: 5px;
                font-size: 12px;
            }
        }
    }

    tbody {
        td {
            padding: 16px 20px;
            background-color: white;
        }

        td.metric-label {
            font-weight: 500;
            color: #374151;
            text-align: left;
            background-color: var(--gray-light3);
            width: 25%;
        }

        tr:last-child td {
            border-bottom: none;

            /*  Add bottom border radius to last row */
            &:first-child {
                border-bottom-left-radius: 8px;
            }

            &:last-child {
                border-bottom-right-radius: 8px;
            }
        }
    }

    .metric-value {
        text-align: left;
        color: #111827;
        width: 25%;

        &.list-value {
            vertical-align: top;
        }
    }
}

.flatpickr-date-range {
    width: 100%;

    .flatpickr-date__input {
        width: 100%;
        max-width:100%;
    }
}

.dashboard-filter-errors {
    display: grid;
    grid-template-columns: 120px 120px auto auto 113px;
    white-space: normal;
    color: var(--red);
    padding: 2px 0;

    & > *:first-child {
        grid-column: 1 / 3;
    }
}

.dashboard-filter {
    display: grid;
    grid-template-columns: 120px 120px auto auto 113px;
    row-gap: 5px;
    border-radius: 4px;
    border: 1px solid var(--line-color);
    width: 100%;

    div {
        width: 100%;
    }

    input[type="radio"] {
        display: none;
    }

    & > * {
        cursor: pointer;

        &:not(:last-child) {
            border-right: 1px solid var(--line-color);
        }

        &:nth-child(2) label {
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }
    }

    input:checked + * {
        background-color: var(--purple-light);

        label {
            color: var(--main-color);
            outline: 1px solid var(--main-color);
        }
    }

    input:checked:first-child label {
        border-radius: 4px;
    }

    label {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        height: 100%;
        max-height: 36px;
        cursor: pointer;

        &:not(.no-padding) {
            padding-left: 20px;
            padding-right: 20px;
        }

    }

    .form-control.input {
        border: none;
    }
}

.box-error {
    display: flex;
    gap: 5px;
    align-items: center;
    color: var(--red);
    background-color: var(--pink);
    padding: 8px 16px;
    border-radius: 4px;


    &::before {
        content: "";
        display: block;
        height: 16px;
        aspect-ratio: 1;
        background-image: url('../img/icon-red-warning.webp');
        background-size: cover;
        background-position: center;
    }
}

.drag-area {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    border: 2px dashed var(--gray-line);
    border-radius: 10px;
    color: var(--gray-line);
    gap: 10px;
    padding: 35px;
    min-width: 75%;
    box-sizing: border-box;

    &:not(.show-image)::after {
        content: attr(data-help-text);
        display: block;
        font: 12px/1.2 var(--museo-rounded-300);
        font-style: italic;
        color: rgba(245, 245, 245, .5);
    }

    &[data-help-text=""]::after {
        display: none;
    }

    &.active {
        border: 2px dashed var(--main-color);
    }

    &.show-image {
        padding: 15px;

        img {
            display: block;
            border-radius: 15px;
            width: 100%;
        }
    }
}

.drag-area__icon {
    height: 40px;
    width: auto;
    aspect-ratio: 1;
    display: block;
}

.drag-area__icon-delete {
    position: absolute;
    top: 0;
    right: 0;
    border: 1px solid var(--main-color);
    cursor: pointer;
    transform: translate(30%, -30%) rotate(45deg);
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background-color: white;

    &::after,
    &::before {
        content: "";
        display: block;
        height: 1px;
        width: 55%;
        background-color: var(--main-color);
        border-radius: 5px;
        position: absolute;
        top: 50%;
        left: 50%;
    }

    &::after {
        transform: translate(-50%, -50%);
    }

    &::before {
        transform: translate(-50%, -50%) rotate(90deg);
    }
}

.drag-area__label {
    font: 18px/1.2 var(--museo-rounded-500);
    color: var(--black);
    margin: 0 !important;  /* reset from .form-report .content_wrapper */
    cursor: pointer;
}

.drag-and-drop-upload {
    width: 0;
    height: 0;
    opacity: 0;
    position: absolute;
}

table.table-form {
    width: 100%;
    max-width: 800px;
    margin: auto;

    th {
        vertical-align: top;
        width: 20%;
    }

    th, td {
        border-bottom: none;   /* reset from table th,td */
    }

    &.remove-margin {
        margin: 0;
    }
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    &.bordered {
        border-bottom: 1px solid var(--gray-line);
        padding-bottom: 15px;
    }

    .button {
        padding: 5px 12px;
    }
}

.empty-section {
    font: 20px/1.2 var(--museo-rounded-300);
    color: var(--soft-gray);
}

.input-search-v2 {
    position: relative;

    input[type="text"] {
        width: 100%;
        padding-left: 35px;
        margin-bottom: 0;
    }

    /* adjust awesomplete styling */
    & > .awesomplete {

        &,
        & > .awesomplete {
            width: 100%;
        }

        ul {
            margin-top: -2px;

            &::before {
                display: none;
            }
        }

        li {
            margin: 0;
            padding: 10px;

            &:hover,
            &[aria-selected="true"] {
                color: var(--gray-light);
                background-color: var(--gray);

                mark {
                    background-color: transparent;
                }
            }

            &:hover mark,
            mark {
                background-color: transparent;
            }
        }
    }
}

.input-search-v2--wide {
    max-width: 300px;
    width: 25%;
}

.input-search-v2__button {
    height: 100%;
    aspect-ratio: 1;
    position: absolute;
    z-index: 2;
    padding: 0;
    width: auto;
    border: none;
}

.input-search-v2__button-icon {
    left: 0;

    &:after {
        content: "";
        background: url('/static/img/new_icons/magnifier.svg') center no-repeat;
        background-size: 18px;
        width: 18px;
        aspect-ratio: 1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 1;
    }
}

.text-ellipsis-column {
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.circle-loading {
    display: inline-block;
    position: relative;
    width: 20px;
    aspect-ratio: 1;
    color: white;

    & > * {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: 120%;
        height: 120%;
        margin: 10%;
        border: 1px solid currentColor;
        border-radius: 50%;
        animation: rotate-full 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        border-color: currentColor transparent transparent transparent;
    }

    & > *:nth-child(1) {
        animation-delay: -0.45s;
    }

    & > *:nth-child(2) {
        animation-delay: -0.3s;
    }

    & > *:nth-child(3) {
        animation-delay: -0.15s;
    }
}

.modal {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3);

    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeOut 0.15s;

    padding: 20px;
    box-sizing: border-box;
}

.modal--show {
    animation: fadeIn 0.3s;
}

.modal--show .modal__card {
    animation: fadeInUp 0.3s;
}

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    border-bottom: 1px solid var(--gray-line);
}

.modal__header-cancel {
    cursor: pointer;
    height: 32px;
    display: block;
    width: auto;
}

.modal__card {
    animation-duration: 0.3s;
    background-color: white;
    border-radius: 4px;
    max-width: 360px;
    animation: fadeOutDown 0.15s;
}

.modal__card--wide {
    max-width: 700px;
}

.modal__footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    align-items: center;

    /* center action button if only one */
    & > *:only-child {
        margin: auto;
    }
}

.modal__footer-button {
    font: 16px/1.2 var(--museo-rounded-300);
    margin: 0;
    padding: 10px 15px;
}

.modal__footer-button--outline,
.modal__footer-button--outline:hover {
    background-color: var(--gray);
    color: var(--black-text);
    border: none;
}

.modal__footer-button-danger,
.modal__footer-button-danger:hover {
    font: 16px/1.2 var(--museo-rounded-300);
    margin: 0;
    padding: 10px 15px;
    background-color: var(--red);
    color: white;
    border: 1px solid var(--red);
}

.modal__title {
    font: 20px/1.2 var(--museo-rounded-700);
    color: var(--gray-light);
}

.modal__content {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 22px;
}

/* Style for the plus/minus icon container */
.expand-icon-plus {
    position: relative;
    width: 15px;
    height: 15px;
    cursor: pointer;
    display: inline-block;

    /* Creating the plus icon using pseudo-elements */
    &::before,
    &::after {
      content: '';
      position: absolute;
      background-color: var(--purple);
      transition: all 0.3s ease;
    }

    /* Horizontal line */
    &::before {
      width: 100%;
      height: 2px;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
    }

    /* Vertical line (creates the plus) */
    &::after {
      width: 2px;
      height: 100%;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
    }
}

/* active by checked input or add class modifier active */
input:checked + .expand-icon-plus::after,
.expand-icon-plus--active::after {
    transform: translateX(-50%) rotate(-90deg);
    opacity: 0;
}

input:checked + .expand-icon-plus::before,
.expand-icon-plus--active::before {
    transform: translateY(-50%) rotate(-180deg);
}


.catalog {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.catalog__group {
    cursor: pointer;
    position: relative;
    font: 16px/1.2 var(--museo-rounded-500);
    display: flex;
    align-items: center;
    gap: 6px;
}

.catalog__title {
    font: 24px/1.2 var(--museo-rounded-500);
    color: var(--main-color);
    margin-bottom: 0;
}

.catalog__section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.catalog__section--row {
    flex-direction: row;
}

.catalog__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.catalog__actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    column-gap: 20px;
    align-items: start;
}

.input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.catalog__button {
    font: 14px/1.2 var(--museo-rounded-500);
    background-color: var(--main-color);
    color: white;
    border: none;
    margin: 0;
    border-radius: 4px;
    margin-top: 27px;

    &:hover {
        color: white;
    }
}

.catalog__clear {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--dark-gray);
    opacity: 0;
    transform: translateY(10%);
    transition: opacity 0.2s ease-in, transform 0.2s ease-in;

    & > img {
        height: 15px;
    }
}

.catalog__clear--show {
    transform: translateY(0%);
    opacity: 0.5;
}

.catalog-card {
    border: 1px solid var(--gray-line);
    border-radius: 4px;
    padding: 15px;

    display: grid;
    grid-template-columns: 85px 1fr;
    gap: 12px;
}

.catalog-card.catalog-card--placeholder {
    border: 1.5px dashed var(--gray-line);

    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 85px;
}

.catalog-card__popup-btn {
    margin: 0;
    height: 16px;
    display: block;
    width: auto;
    aspect-ratio: 1;
}

.catalog-card__img {
    display: block;
    aspect-ratio: 1;
    width: 100%;
    height: auto;
}

.catalog-card__content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.catalog-card__header {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: space-between;
}

.catalog-card__content-title {
    font: 16px/1.2 var(--museo-rounded-500);
    color: var(--dark-gray);
}

.catalog-card__content-desc {
    font: 14px/1.2 var(--museo-rounded-300);
    color: var(--soft-gray);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.catalog-card__content-action {
    font: 14px/1.2 var(--museo-rounded-500);
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: auto;
}

.catalog-details__container {
    width: 90%;
    max-width: 560px;
    max-height: 520px;
    padding: 24px 24px;
    box-sizing: border-box;

    background-color: white;
    border-radius: 4px;
    overflow-y: auto;

    display: flex;
    align-items: flex-start;
}

.catalog-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.catalog-details__header {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 16px;
    width: 100%;
}

.catalog-details__header-title-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.catalog-details__header-title {
    font: 20px/1.2 var(--museo-rounded-700);
    color: var(--black-text);
}

.catalog-details__header-desc {
    font: 14px/1.2 var(--museo-rounded-300);
    color: var(--gray-text);
    display: -webkit-box;
}

.catalog-details__header-btn-wrapper {
    margin: -16px -16px 0px 0px;
}

.catalog-details__modifier-group-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.catalog-details__modifier-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding-right: 8px;
}

.catalog-details__row-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.catalog-details__modifier-group {
    font: 16px/1.2 var(--museo-rounded-700);
    color: var(--light-black);
}

.catalog-details__modifier-border {
    height: 1px;
    margin: 0px;
    padding: 0px;
}


.catalog-form__fields {
    display: flex;
    gap: 16px;
    flex-direction: column;
}

.catalog-form__header {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.report-index {
    display: flex;
    flex-direction: column;
    gap: 32px;

    p {
        margin: 0;
    }
}

.report-index__subtitle {
    font: 400 14px/1.5 var(--museo-rounded-500);
    color: var(--soft-gray);
}

.report-index__section {
    display: flex;
    flex-direction: column;
    gap: 12px;

    &.disabled {
        pointer-events: unset;

        a[href="#"], a[href=""] {
            &:not(.report-index__section-title a) {
                opacity: 0.7;
                text-decoration: none;
                pointer-events: none;
                cursor: not-allowed;
            }
        }
    }
}

.report-index__section-title-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;

    img {
        aspect-ratio: 1;
        max-width: 20.8px;
    }
}

.report-index__section-title {
    font: 16px/1.3 var(--museo-rounded-500);
    color: var(--dark-gray);

    a {
        color: var(--dark-gray);
    }
}

.report-index__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(218px, 1fr));
    gap: 20px;
}

.report-index-footer {
    margin-top: 90px;
    padding-top: 16px;
    display: flex;
    justify-content: space-between;
    font: 14px/1.2 var(--museo-rounded-300);
}

.report-index-header {
    padding: 0 7%;
    display: flex;
    align-items: center;
    min-height: 58px;
}

.report-index-header__title {
    font: 28px/1.2 var(--museo-rounded-500);
    color: var(--black);
}

.index-card {
    border: 1px solid var(--gray-line);
    border-radius: 4px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 1px 2px -1px #1018281A;
}

.index-card__title {
    font: 19px/1.3 var(--museo-rounded-500);
    color: var(--dark-gray);
    margin: 0;
}

.index-card__desc {
    font: 400 14px/1.5 var(--museo-rounded-300);
    color: var(--soft-gray);
}

.custom-select-arrow {
    appearance: none;
    background-image: url('/static/img/new_icons/arrow-down.svg');
    background-position: calc(100% - 5px) center;
    background-repeat: no-repeat;
    background-size: 18px;
}

.form-v3 {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

.form-v3--center {
    width: auto;
    align-items: center;
    max-width: 520px;
    margin: 0 auto;
    box-sizing: border-box;
}


.form-v3__header {
    font: 24px/1.2 var(--museo-rounded-500);
}

.form-v3__heading {
    font: 24px/1.2 var(--museo-rounded-500);
    color: var(--black-text);
    margin: 0;
}

.breadcrumb__container {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 7%;
    margin: 15px 0 25px;
}

.breadcrumb__label {
    font: 14/1.2 var(--museo-rounded-500);
    background-color: var(--gray);
    color: var(--dark-gray);
    padding: 5px 12px;
    border-radius: 4px;
}

.breadcrumb__label:last-child {
    color: var(--gray-text);
}

.breadcrumb__arrow {
    background: transparent url("/static/img/icon-arrow-right.svg") center no-repeat;
    width: 16px;
    aspect-ratio: 1;
}

.form-v3__subheading {
    font: 18px/1.2 var(--museo-rounded-500);
    color: var(--gray-text);
    margin: 0;
}

.form-v3__header--import {
    display: flex;
    justify-content: space-between;

    a {
        font: 15px/1.2 var(--museo-rounded-300);
    }
}

.form-v3__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 600px;
}

.form-v3__body--full-width {
  max-width: none;
}

.form-v3__body--card {
    border-radius: 8px;
    border: var(--line-color) 1px solid;
    padding: 24px;
    width: 100%;
    margin: 0 auto;
}


.form-v3__row {
    display: grid;
    gap: 6px 14px;

    justify-items: flex-start;
    grid-template-columns: 200px 1fr;
    grid-template-areas: "label input"
                         "label helptext";

    .input-search-v2 {
        width: 100%;
    }

    .errorlist {
        grid-area: errorlist;
    }

    select, p {
        /* remove unnecessary spacing */
        margin-bottom: 0;
    }

    label {
        margin: 0 0 auto;
    }
}

.form-v3__row--max-width-600 {
    max-width: 600px;
}

.form-v3__row--error {
    grid-template-areas: "label input"
                         "label helptext"
                         "label errorlist";
}

.form-v3__row--error > div input,
.form-v3__row--error > div select,
.form-v3__row--error > div input[type="checkbox"]:focus:not(:checked), /* reset current styling */
.form-v3__row--error > div textarea {
    border-color: rgba(255, 103, 97, 0.6);
}

.form-v3__row--one-row {
    grid-template-areas: "label input"
                         "label errorlist";
}

.form-v3__row--table {
    grid-template-areas: ". table";

    .form-table {
        grid-area: table;
        width: 100%;
        max-width: 100%;
    }

    .row {
        padding: 15px 0;
    }

    .row--no-padding-top {
        padding-top: 0;
    }

    .selected {
        color: var(--soft-gray);
    }

    a {
        color: var(--black-text);
    }
}

.form-v3__row--disabled {
    opacity: .5;
    pointer-events: none;
}

.form-v3__row:not(.form-v3__row--checkbox) label {
    padding-top: 11px;
}

.form-v3__helptext {
    grid-area: helptext;
    font: 14px/1.2 var(--museo-rounded-300);
    color: var(--soft-gray);
}

.form-v3__button {
    font: 16px/1.2 var(--museo-rounded-500);
    min-height: 40px;
    padding: 10px 22px;
    margin: 0;
}

.form-v3__field_wrapper {
    width: 100%;
    display: inline-flex;
    line-height: 1;

    .multiple-checkboxes {
        label {
            padding: 0;
        }

        input[type="checkbox"] {
            gap: 0;
        }
    }

    .input-remove {
        margin-top: 9px;
    }

    & > label {
        font: 16px/1.2 var(--museo-rounded-300);
        margin-bottom: 0; /* reset current styling */
        cursor: pointer;
        grid-area: label;
    }

    & > input {
        outline: none;
        border: 1px solid var(--line-color);
        border-radius: 4px;
        box-sizing: border-box;
        font: 14px/1.5 var(--museo-rounded-300);
        color: var(--black);
        margin-bottom: 0;
        grid-area: input;
        width: 100%;

        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            appearance: none;
            margin: 0;
        }

        &::placeholder {
            font: 14px/1.2 var(--museo-rounded-300);
            color: var(--soft-gray);
        }

        &:focus {
            border: 1px solid var(--main-color);
        }

        &:not([type="checkbox"], [type="radio"]) {
            padding: 7px 10px;
        }

        &[type="checkbox"] {
            font: 14px/1.2 var(--museo-rounded-300);
            display: flex;
            appearance: none;
            cursor: pointer;
            width: 18px;
            height: 18px;
            aspect-ratio: 1;
            color: white;
            border-radius: 2px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;

            &:checked {
                border-color: var(--main-color);

                &::after {
                    content: '\2714';
                    background-color: var(--main-color);
                    height: 100%;
                    width: 100%;
                    line-height: 1.2;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            }

            &:focus:checked,
            &:checked {
                border: 1px solid var(--main-color);
            }
        }

        &[type="date"]::-webkit-calendar-picker-indicator,
        &[type="time"]::-webkit-calendar-picker-indicator {
            width: 18px;
            position: relative;
            right: -5px;
            cursor: pointer;
        }

        &[type="date"]::-webkit-calendar-picker-indicator {
            background: transparent url("/static/img/new_icons/calendar.svg") center no-repeat;
            background-size: 18px;
        }

        &[type="time"]::-webkit-calendar-picker-indicator {
            background: transparent url("/static/img/new_icons/time.svg") center no-repeat;
            background-size: 17px;
        }
    }

    & > textarea,
    & > .markdownx textarea {
        outline: none;
        border: none;
        font: 14px/1.5 var(--museo-rounded-300);
        border: 1px solid var(--line-color);
        color: var(--black);
        border-radius: 4px;
        box-sizing: border-box;
        resize: none;
        min-height: 150px;
        max-height: 300px;
        margin-bottom: 0; /* reset current styling */
        grid-area: input;
        width: 100%;

        &::placeholder {
            font: 14px/1.2 var(--museo-rounded-300);
            color: var(--soft-gray);
        }

        &:focus{
            border: 1px solid var(--main-color);
        }
    }

    & > .errorlist {
        font: 12px/1.2 var(--museo-rounded-300);
        grid-area: errorlist;
        color: var(--red);
        margin: 0;

        &.small {
            font-size: 12px;
            line-height: 1;
        }

        li {
            display: flex;
            align-items: center;
            gap: 3px;

            &::before {
                content: "";
                display: inline-block;
                height: 15px;
                aspect-ratio: 1;
                background-image: url('/static/img/new_icons/exclamation-icon.svg');
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
            }

            &:not(:last-child) {
                margin-bottom: 5px;
            }
        }
    }

    & > select {
        appearance: none;
        background-image: url('/static/img/new_icons/arrow-down.svg');
        background-position: calc(100% - 5px) center;
        background-repeat: no-repeat;
        background-size: 18px;
        padding-right: 20px;
        cursor: pointer;
        border-radius: 4px;
        font: inherit;
        margin-bottom: 0; /* reset current styling */
        font: 14px/1.2 var(--museo-rounded-300);
        color: var(--black);
        grid-area: input;
        width: 100%;

        &:focus {
            border: 1px solid var(--main-color);
        }

        &[multiple] {
            padding: 0;
            height: 132px;
            background-image: none;

            option {
                padding: 6px 10px;
                min-block-size: 0;
            }
        }
    }

    & > label,
    & > textarea,
    & > input,
    & > .awesomplete input,
    & > .markdownx textarea {
        margin-bottom: 0;
    }

    & > .awesomplete,
    & > .markdownx {
        width: 100%;
    }
}

.form-v3__field_wrapper.clearable-file input[type="checkbox"] {
    display: none;
}

/* Reference breakpoints: https://pure-css.github.io/grids/ */
@media (max-width: 768px) {
    .form-v3__row {
        gap: 6px 14px;
        grid-template-columns: 1fr;
        grid-template-areas: "label"
                             "input"
                             "helptext";

        /* in mobile all elements but label are full width */
        & > * {
            grid-column: 1 / -1;
            width: 100%;
        }
    }

    .form-v3__row--error {
        grid-template-areas: "label"
                             "input"
                             "helptext"
                             "errorlist";

    }

    /* FIXME: element with no helptext will have unnecessary space */
    .form-v3__row--checkbox {
        grid-template-columns: auto 1fr;
        grid-template-areas: "input label"
                            "helptext helptext"
                            "errorlist errorlist";
    }

    .form-v3__row--table {
        grid-template-columns: 1fr;
        grid-template-areas: "table";
    }
}

.multiple-checkboxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;

    label {
        font: 14px/1.3 var(--museo-rounded-300);
        color: var(--black);
        margin-bottom: 0;
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: flex-start;
        gap: 8px;

        & > input[type="checkbox"] {
            border: 1px solid var(--line-color);
            box-sizing: border-box;
            margin-bottom: 0;
            display: flex;
            appearance: none;
            cursor: pointer;
            width: 18px;
            height: 18px;
            aspect-ratio: 1;
            border-radius: 2px;
            overflow: hidden;

            &:checked {
                border-color: var(--main-color);

                &::after {
                    content: '\2714';
                    background-color: var(--main-color);
                    height: 100%;
                    width: 100%;
                    line-height: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }

            /* reset current styling */
            &:focus {
                border: 1px solid var(--border-color);
            }

            &:focus:checked,
            &:checked {
                border: 1px solid var(--main-color);
            }
        }
    }
}

.multiple-checkboxes--two-cols {
    grid-template-columns: repeat(2, 1fr);
}

.multiple-checkboxes--center {
    align-items: center;
}

.ai-modal {
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: white;
    border-radius: 5px;

    width: 90%;
    max-width: 220px;
    max-height: 260px;
    padding: 16px 24px;
    box-sizing: border-box;
}

.ai-modal--small-gap {
    gap: 8px;
}

.ai-modal--wide {
    max-width: 320px;
}

.ai-modal--wide-2 {
    max-width: 560px;
}

.ai-modal--wide-3 {
    max-width: 420px;
}

.ai-modal--tall {
    max-height: 90vh;
    overflow: auto;
}

.ai-modal__title {
    font: 16px/1.2 var(--museo-rounded-700);
    color: var(--black-text);
}

.ai-modal__desc {
    font: 14px/1.2 var(--museo-rounded-300);
    color: var(--soft-gray);
}

.ai-modal__label {
    font: 14px/1.2 var(--museo-rounded-500);
    color: var(--soft-gray);
}

.ai-modal__text {
    font: 14px/1.5 var(--museo-rounded-300);
    color: var(--black-text);
}

.ai-modal__disclaimer {
    font: 12px/1.2 var(--museo-rounded-500);
    color: var(--soft-gray);
}

.ai-modal__header {
    font: 16px/1.2 var(--museo-rounded-700);
    color: var(--black-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ai-modal__header--big {
    font-size: 20px;
}

.ai-modal__header-title {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ai-modal__header-icon {
    display: block;
    height: 16px;
    aspect-ratio: 1;
}

.ai-modal__header-cancel {
    display: block;
    cursor: pointer;
    height: 32px;
    aspect-ratio: 1;
}

.ai-modal__body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ai-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.ai-modal__loading {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 35px;
    padding: 8px 0;
    height: 100%;
}

.ai-modal__loading-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.ai-modal__loading-img {
    position: relative;
    width: 90%;
    max-width: 100px;
    aspect-ratio: 1;

    &::after,
    &::before {
        content: "";
        display: block;
        position: absolute;
        aspect-ratio: 1;
        transform-origin: center; /* Scale from the center */
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    &::after {
        height: 55%;
        top: 10%;
        right: 10%;
        animation: ai-loading-scale-reverse 3s infinite ease-in-out;
        background-image: url('/static/img/ai-star-big.webp');
    }

    &::before {
        height: 40%;
        bottom: 10%;
        left: 10%;
        animation: ai-loading-scale 3s infinite ease-in-out;
        background-image: url('/static/img/ai-star-small.webp');
    }
}

.ai-modal__loading-text {
    background: var(--main-linear-color);
    background-clip: text;
    color: transparent;
    font: 16px/1.2 var(--museo-rounded-500);
}

.ai-modal__loading-cancel {
    font: 16px/1.2 var(--museo-rounded-300);
    cursor: pointer;
    display: block;
    padding: 10px 24px;
    white-space: nowrap;
    border-radius: 4px;
    background-color: white;
    margin-left: auto;
    margin-right: auto;

    &,
    &:hover {
        color: var(--purple-omni);
        border: 1px solid var(--purple-omni);
    }
}

.ai-modal__options {
    display: grid;
    grid-template-rows: repeat(3, 128px);
    gap: 16px;

    & > * {
        scrollbar-width: none;
        font: 14px/1.5 var(--museo-rounded-500);
        padding: 12px;
        color: var(--dark-gray);
        border-radius: 4px;
        border: 1px solid var(--gray-line);
        cursor: pointer;
        max-height: 150px;
        overflow: auto;

        &:hover,
        &:focus {
            border: 1px solid var(--main-color);
            background-color: var(--purple-light);
        }
    }
}

.ai-modal__text-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ai-modal__text-list-disc {
    list-style-type: disc;
    padding-left: 14px;
    margin-bottom: 0px;
}

.ai-modal__button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: auto;
    min-height: 30px;
    box-sizing: border-box;
    cursor: pointer;
}

.ai-modal__button-icon {
    height: 16px;
    aspect-ratio: 1;
    display: block
}

.ai-modal__button-text {
    background: var(--main-linear-color);
    background-clip: text;
    color: transparent;
    font: 14px/1 var(--museo-rounded-500);
}

.ai-modal__button-solid {
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    font: 16px/1.2 var(--museo-rounded-500);
    cursor: pointer;
    border-radius: 4px;
    width: 100%;
    background-color: var(--main-color);
    color: white;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;

    &[disabled],
    &[disabled]:hover,
    &[disabled]:focus {
        background-color: var(--line-color);
        color: white;
        cursor: not-allowed;
        pointer-events: none;
    }
}

.ai-modal--no-max-height {
    max-height: unset;
}

.awesomplete-text {
    position: relative;
    width: 100%;

    /* awesomplete styling */
    .awesomplete {
        width: 100%;

        & > ul {
            line-height: 22px;
            margin: -2px 0 0;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-top: 1px solid var(--border-color);
            border-color: var(--border-color);
            box-shadow: none;
            scrollbar-width: none;
            max-height: 250px;
            overflow: auto;
            background-color: white;

            &:before {
                content: '';
                display: none;
            }

            li[aria-selected="true"] mark, li:hover mark, mark {
                color: var(--gray-light);
                font-weight: normal;
                background: transparent;
            }

            li {
                font-size: 14px;
                color: var(--gray-light);
                padding: 7px 12px;
                margin-bottom: 0;
                border-bottom: 1px solid var(--gray);

                &:last-child {
                    border-bottom: none;
                }
            }

            li[aria-selected="true"], li:hover, li:focus {
                color: var(--gray-light);
                background-color: var(--gray);
            }
        }
    }
}

.awesomplete-text--loading .awesomplete-text__loader {
    display: block;
}

.awesomplete-text--error .awesomplete-text__input,
.awesomplete-text--error .awesomplete-text__input[type="text"]:focus {
    border-color: var(--red);
}

.awesomplete-text__loader {
    display: none;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translate(0, -50%);
}

.awesomplete-text__input {
    &[type="text"]:focus {
        border-color: var(--main-color);
    }
}

.dropdown-menu {
    position: relative;
}

.dropdown-menu--photos .dropdown-menu__content {
    left: -14px;
    bottom: -4px;
}

.dropdown-menu__label {
    cursor: pointer;
}

.dropdown-menu__content {
    position: absolute;
    bottom: -5px;
    left: 0;
    z-index: 2;

    opacity: 0;
    transform: scale(0.85) translateY(100%);

    flex-direction: column;
    gap: 5px;

    padding: 8px;
    background-color: white;
    border-radius: 4px;
    border: 1px solid var(--line-color);
    white-space: nowrap;
    transition: opacity 0.15s ease, transform 0.15s ease;

    & > * {
        padding: 8px 16px;
        cursor: pointer;
        border-radius: 4px;
        color: var(--black-text);

        &:hover {
            background-color: var(--disabled);
        }
    }
}

.dropdown-menu__input:checked + .dropdown-menu__content {
    display: flex;
    opacity: 1;
    transform: scale(1) translateY(100%);
    animation: fade-scale-in-dropdown 0.15s ease;
}

.dropdown-menu__input:not(:checked) + .dropdown-menu__content {
    opacity: 0;
    transform: scale(0.85) translateY(100%);
    animation: hide-flex 0.15s ease forwards 0.15s;
}

/* Reference breakpoints: https://pure-css.github.io/grids/ */
@media (max-width: 768px) {
    .dropdown-menu--photos .dropdown-menu__content {
        right: 0;
        left: unset;
    }
}

.badge {
    font: 12px/1 var(--museo-rounded-500);
    color: white;
    background-color: var(--purple-omni);
    padding: 3px 10px;
    border-radius: 10px;
}

.modifier-list {
    list-style-type: none;
    padding: 0 10px;
    margin-left: 20px;
    margin-bottom: 0;
    border-left: 1px solid var(--line-color);
}

.modifier-list__item {
    font: 14px/14px var(--museo-rounded-500);
    margin: 0;
    padding: 1px 0;
}


/* START FILTER CHIPS */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0;
}

.filter-chip {
    display: flex;
    gap: 6px;
    border: 1px solid var(--main-color);
    border-radius: 32px;
    padding: 4px 12px;
    align-items: center;
    font: 14px/1 var(--museo-rounded-500);
    color: var(--main-color);

    &.secondary {
        border: none;
        padding: 5px 13px;
        color: var(--soft-gray);

        &:hover {
            color: var(--soft-gray);
        }
    }

    .remove-icon {
        width: 16px;
        height: 16px;
        cursor: pointer;
    }
}
/* END FILTER CHIPS */


/* START CARD SECTION */
.card-sections {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 32px;
    margin: 0 0 32px;
}

.card-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: white;

    &.auto-scroll {
        max-height: 337px;
        overflow-y: auto;
        position: relative;
        scroll-behavior: smooth;

        thead {
            position: sticky;
            top: 0;
            left: 0;
            background-color: white;
            z-index: 1;
            box-shadow: 0 0 1px 0 var(--line-color);
        }
    }

    &.less-border {
        th:first-child,
        td:first-child {
            padding-left: 0;
        }

        th:last-child,
        td:last-child {
            padding-right: 0;
        }

        input[type='checkbox'] {
            float: unset;
            margin: 0;
        }

        .form-checkbox {
            vertical-align: middle;
        }
    }

    &:not(.less-border) {
        padding: 24px;
        border: 1px solid var(--line-color);
        border-radius: 4px;
    }
}

.card-wrapper h2 {
    margin: 0;
    font: 20px/1.2 var(--museo-rounded-500);
    color: var(--dark-gray);
    text-transform: uppercase;
}

.card-wrapper table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.card-wrapper th {
    font: 12px/1.2 var(--museo-rounded-500);
    color: var(--soft-gray);
    text-transform: uppercase;
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid var(--line-color);
}

.card-wrapper td {
    font: 14px/1.2 var(--museo-rounded-500);
    padding: 16px 10px;
    max-width: 300px;
    border: none;
}

.card-wrapper tr:not(:last-child) td {
    border-bottom: 1px solid var(--line-color);
}

.card-wrapper table a {
    font: 14px/1.2 var(--museo-rounded-500);
    color: var(--main-color);
}

.card-wrapper .double-action {
    gap: 10px;
}

.card-wrapper .nowrap {
    white-space: nowrap;
}

.card-wrapper .text-align-right {
    text-align: right;
}

.card-wrapper .shrink-table {
    white-space: nowrap;
    width: 1%;
}

.card-wrapper .delete-form {
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-wrapper .remove {
    padding: 0;
}

.card-wrapper .image-filter {
    width: 14px;
}

.card-wrapper .popup-filter {
    top: 15px;
}

.card-wrapper .remove-btn img {
    top: 0;
}

.card-wrapper .separate-by-comma:not(:last-child) {
    padding-bottom: 8px;
}

.card-wrapper .card-button {
    font: 14px/1 var(--museo-rounded-500);
    background: var(--main-color);
    color: #fff;
    padding: 9px 16px;
    border: none;
    border-radius: 4px;
    box-sizing: border-box;
}

.card-wrapper .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.card-wrapper .card-header .edit-table {
    width: 20px;
    position: relative;
    top: 1px;
    z-index: 1;
}

.card-wrapper .card-header.auto-align-right > :only-child {
    margin-left: auto;
}

.card-wrapper .card-search {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 360px;
    width: 100%;
}

.card-wrapper .card-search .icon-magnifier::after {
    content: "";
    display: table;
    width: 20px;
    aspect-ratio: 1;
    background: url('/static/img/new_icons/magnifier.svg') center/20px no-repeat;
    z-index: 1;
}

.card-wrapper .card-search button {
    position: absolute;
    left: 16px;
    padding: 0;
    border: none;
    margin: 0;
    height: auto;
}

.card-wrapper .card-search input {
    width: 100%;
    padding: 11px 10px 11px 46px;
    border: 1px solid var(--line-color);
    border-radius: 4px;
    font: 16px/1 var(--museo-rounded-500);
    margin: 0;
}

.card-wrapper .card-search input::placeholder {
    color: var(--placeholder);
}
/* END CARD SECTION */

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  margin-bottom: 14px;
}

.section-header .title-section {
  color: var(--black-text);
  margin-bottom: 0;
  text-transform: capitalize;
}

.section-header__button {
    font: 14px/1.2 var(--museo-rounded-500);
    color: var(--main-color);
    padding: 4px 10px;
    margin-left: 12px;
    margin-right: auto;
    background-color: var(--white);
    height: auto;
    position: relative;
    text-transform: none;
    border: 1px solid var(--main-color);
    border-radius: 4px;
}

.section-header__icon {
    margin-top: 4px;
    margin-left: 8px;
    margin-right: auto;
    background-color: var(--white);
    height: auto;
    position: relative;
}

.input-with-unit {
	display: grid;
    grid-template-columns: 1fr auto;
	gap: 8px;
    align-items: center;
	font: 12px/1.4 var(--museo-rounded-300);
	color: var(--soft-gray);
	white-space: nowrap;
}

.material-row .exclamation-icon {
    display: none;
    margin-right: 0.5em;
    vertical-align: middle;
}

.material-row.insufficient .exclamation-icon {
    display: inline-block;
}

.material-row.insufficient td {
    color: var(--red);
}

.oos-field {
    display: flex;
    gap: 10px;
    flex-direction: column;
    width: 100%;

    .helptext:empty {
        display: none;
    }
}

.button-ai-link {
    font: 16px/1.2 var(--museo-rounded-500);
    background: var(--ai-linear-color);
    background-clip: text;
    color: transparent;

    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.button-ai-link__icon {
   display: block;
   width: 16px;
   height: 16px;
}

.ai-background-card {
    background-color: white;
    border-radius: 4px;
    padding: 16px 24px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.04);
    max-width: 400px;
}

.ai-background-card__header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.ai-background-card__title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 16px;
}

.ai-background-card__title-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-grow: 1;
}

.ai-background-card__icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    position: relative;
}

.ai-background-card__title {
    font-family: var(--museo-rounded-700);
    font-weight: 700;
    font-size: 16px;
    color: var(--black-text);
    white-space: nowrap;
}

.ai-background-card__badge {
    background-color: var(--purple-omni);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 12px;
    flex-shrink: 0;
}

.ai-background-card__badge span {
    font-family: var(--museo-rounded-500);
    font-weight: 500;
    font-size: 12px;
    color: white;
    white-space: nowrap;
    line-height: normal;
}

.ai-background-card__close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.ai-background-card__subtitle {
    font-family: var(--museo-rounded-500);
    font-size: 14px;
    color: var(--gray-text);
    margin: 0;
    width: 100%;
}

.ai-background-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 5px;
}

.ai-background-card__section-title {
    font-family: var(--museo-rounded-700);
    font-size: 14px;
    color: var(--dark-gray);
    margin-bottom: 8px;
    width: 100%;
}

.ai-background-card__options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    align-items: center;
}

.ai-background-card__option {
    height: 36px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid var(--line-color);
    background-color: white;
    cursor: pointer;
    box-sizing: border-box;
    margin: 0;

    font-family: 'Overpass', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: var(--black-text);
    white-space: nowrap;
    line-height: normal;
}

.ai-background-card__radio:checked + .ai-background-card__option {
    box-shadow: inset 0 0 0 2px var(--purple-omni);
    padding: 0 15px;
    border-color: transparent;
    color: var(--purple-omni);
    font-weight: 600;
}

.ai-background-card__generate-btn {
    background-color: var(--purple-omni);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10.5px 24px;
    border-radius: 4px;
    width: 100%;
    cursor: pointer;
    border: none;

    font-family: var(--museo-rounded-500);
    font-size: 16px;
    color: white;
    white-space: nowrap;
    line-height: normal;
    margin: 0;
    text-transform: unset;

    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;

    &:hover {
        color: white;
    }

    &[disabled] {
        background-color: var(--line-color);
        cursor: not-allowed;
    }
}

.ai-background-card__radio[type="radio"] {
    display: none;
}

.ai-loading {
    background-color: var(--white);
    border-radius: 4px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    width: 100%;
    max-width: 300px; /* Assumed max-width based on content */
    box-sizing: border-box;
}

.ai-loading__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.ai-loading__image-wrapper {
    width: 150px;
    height: 150px;
    position: relative;
    overflow: hidden;
}

.ai-loading__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ai-loading__text {
    font-family: var(--museo-rounded-500), sans-serif;
    font-size: 16px;
    line-height: normal;
    background: var(--ai-linear-color);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* Fallback */
    margin: 0;
}

.ai-loading__button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10.5px 24px;
    border-radius: 4px;
    background-color: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s ease;
    margin: 0;
    font-family: var(--museo-rounded-500), sans-serif;
    font-size: 16px;
    margin: 0;
    line-height: normal;
    text-transform: none;

    &,
    &:hover {
        color: var(--purple-omni);
        border: 1px solid var(--purple-omni);
    }
}

.ai-result-card {
    width: 100%;
    border-radius: 4px;
    max-width: 460px;
    overflow: hidden;
    box-sizing: border-box;
}

.ai-result-card__container {
    background-color: var(--white);
    padding: 16px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

.ai-result-card__header {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    position: relative;
}

.ai-result-card__title-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-grow: 1;
}

.ai-result-card__icon-wrapper {
    width: 32px;
    height: 32px;
    position: relative;
    flex-shrink: 0;
}

.ai-result-card__icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ai-result-card__title {
    font-family: var(--museo-rounded-700), sans-serif;
    font-size: 16px;
    color: var(--black-text);
    margin: 0;
    line-height: normal;
    white-space: nowrap;
}

.ai-result-card__close-btn {
    width: 32px;
    height: 32px;
    position: absolute;
    right: -12px;
    top: 0;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.ai-result-card__image-container {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.ai-result-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ai-result-card__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.ai-result-card__regenerate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 5px 0;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}

.ai-result-card__regenerate-icon {
    width: 16px;
    height: 16px;
    position: relative;
    flex-shrink: 0;
}

.ai-result-card__regenerate-text {
    font-family: var(--museo-rounded-500), sans-serif;
    font-size: 16px;
    line-height: normal;
    background: var(--ai-linear-color);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin: 0;
    white-space: nowrap;
}

.ai-result-card__apply-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10.5px 24px;
    background-color: var(--purple-omni);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.2s ease;

    font-family: var(--museo-rounded-500), sans-serif;
    font-size: 16px;
    color: var(--white);
    margin: 0;
    line-height: normal;
    white-space: nowrap;
}

.ai-result-card__apply-btn:hover {
    opacity: 0.9;
}