.button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
}

.button-group .btn {
    margin: 0px;
    border-color: rgb(var(--color-general-secondary-border));
}

.button-group .btn:hover {
    /* border-color: rgb(var(--color-general-secondary-border))!important; */
}

.button-group.border-transparent .btn {
    border-color: transparent!important;
}

.button-group > :first-child.btn::before,
.button-group > :first-child:has(.btn) .btn::before,
.button-group > :first-child.btn,
.button-group > :first-child:has(.btn) .btn {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    border-right-color: transparent;
}

.button-group > :last-child.btn::before,
.button-group > :last-child:has(.btn) .btn::before,
.button-group > :last-child.btn,
.button-group > :last-child:has(.btn) .btn {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

.button-group > :not(:first-child):not(:last-child).btn::before,
.button-group > :not(:first-child):not(:last-child):has(.btn) .btn::before,
.button-group > :not(:first-child):not(:last-child).btn,
.button-group > :not(:first-child):not(:last-child):has(.btn) .btn {
    border-radius: 0px;
    border-right-color: transparent;
}

.button-group > .btn:only-child::before,
.button-group > :only-child:has(.btn) .btn::before,
.button-group > .btn:only-child,
.button-group > :only-child:has(.btn) .btn {
    border-radius: var(--border-radius);
    border-color: rgb(var(--color-general-secondary-border))
}

.button-group > .btn:last-child::before,
.button-group > .btn:last-child:not(:first-child) {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: var(--border-radius); /* replace with the actual pixel value of --border-radius-lg */
    border-bottom-right-radius: var(--border-radius); /* replace with the actual pixel value of --border-radius-lg */
}
.button-group > .btn:first-child::before,
.button-group > .btn:first-child:not(:last-child) {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: var(--border-radius); /* replace with the actual pixel value of --border-radius-lg */
    border-bottom-left-radius: var(--border-radius); /* replace with the actual pixel value of --border-radius-lg */
    border-right-color: transparent;
}
.button-group > .btn:not(:first-child):not(:last-child)::before,
.button-group > .btn:not(:first-child):not(:last-child) {
    border-radius: 0px;
    border-right-color: transparent;
}
.button-group > div:not(:first-child):not(:last-child) .btn {
    border-radius: 0px;
    border-right-color: transparent;
}
.button-group > div:first-child .btn {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: var(--border-radius); /* replace with the actual pixel value of --border-radius-lg */
    border-bottom-left-radius: var(--border-radius); /* replace with the actual pixel value of --border-radius-lg */
    border-right-color: transparent;
}
.button-group > div:last-child .btn {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: var(--border-radius); /* replace with the actual pixel value of --border-radius-lg */
    border-bottom-right-radius: var(--border-radius); /* replace with the actual pixel value of --border-radius-lg */
}
.switch-checkbox {
    height: 0;
    width: 0;
    visibility: hidden;
}

.switch-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    width: 40px;
    height: 24px;
    background: var(--color-border);
    border-radius: 100px;
    position: relative;
    transition: background-color .2s;
}

.switch-label .switch-button {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 20px;
    border-radius: 45px;
    transition: 0.2s;
    background: var(--text-light);
}

.switch-checkbox:checked + .switch-label .switch-button {
    left: calc(100% - 2px);
    transform: translateX(-100%);
}

.switch-label:active .switch-button {
    width: 26px;
}

.switch-label-on {
    background-color: var(--color-brand);
}
.switch-label-disabled {
    background-color: var(--color-border);
    cursor: not-allowed;
}
.banner {
    padding: 0.75rem;
    background-color: var(--color-main);
    color: var(--text-dark);
    display: flex;
    border-radius: var(--border-radius);
    transition-duration: var(--transition-duration);
    overflow: hidden;
}
.banner-icon {
    /* width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px; */
}
.banner-icon {
    margin: 6px 12px 6px 0;
}
.banner-icon svg {
    width: 100%;
    height: 100%;
}
.banner-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
}
.banner-content {
    font-size: 12px;
    font-weight: 400;
}
.banner-danger {
    background-color: rgb(var(--color-general-danger-bg));
    border-color: rgb(var(--color-general-danger-border));
    color: var(--text-dark);
    fill: rgb(var(--color-general-danger-text));
}
.banner-success {
    background-color: rgb(var(--color-general-success-bg));
    border-color: rgb(var(--color-general-success-border));
    color: var(--text-dark);
    fill: rgb(var(--color-general-success-text));
}
.banner-primary {
    background-color: rgb(var(--color-general-primary-bg));
    border-color: rgb(var(--color-general-primary-border));
    color: var(--text-dark);
    fill: rgb(var(--color-general-primary-text));
}
.banner-primary svg {
    fill: var(--color-primary);
}
.banner-warning {
    background-color: rgb(var(--color-general-warning-bg));
    border-color: rgb(var(--color-general-warning-border));
    color: var(--text-dark);
    fill: rgb(var(--color-general-warning-text));
}
.banner-secondary {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary-hover);
    color: var(--text-dark);
}

.banner-dismissed {
    visibility: hidden;
    opacity: 0;
}
.input-row {
    display: flex;
    transition-duration: var(--transition-duration);
    position: relative;
}
/* .input-row-input-inner[type="time"]:before {
    content: "--:-- --";
    position: absolute;
    color: var(--text-secondary);
}
.input-row-input-inner[type="time"]:focus:before, .input-row-input-inner[type="time"]:valid:before {
    content: "";
} */

.input-row:has(.ql-editor:focus-visible) .border {
    box-shadow: 0px 0px 0 1px var(--text-dark)!important;
    border-color: var(--text-dark)!important;
    background-color: var(--color-main)!important;
}
.ql-editor.ql-blank::before {
    color: var(--text-secondary)!important;
}
.input-row input[type="time"] {
    -webkit-appearance: none;
}
.input-row-error,
.input-row-warning,
.input-row-success,
.input-row-focused {
    position: relative;
}
.input-row.input-col {
    flex-direction: column;
}
.input-row.input-col .input-row-label {
    min-width: 0;
    width: unset;
}
.input-row .input-row-input:hover {
    /* background-color: rgb(var(--color-general-secondary-bg)); */
}
.input-row-search-opened .input-row-input,
.input-row-focused .input-row-input {
    background-color: var(--color-main)!important;
    border-color: var(--text-dark)!important;
    box-shadow: 0px 0px 0 1px var(--text-dark)!important;
}
.input-row-label {
    display: flex;
    position: relative;
    font-weight: 500;
    justify-content: space-between;
    width: 225px;
    min-width: 225px;
    font-size: 14px;
    padding: 8px 30px 8px 0;
    transition-duration: var(--transition-duration);
}
.input-row-readonly .input-row-label {
    /* background-color: var(--color-main); */
}
.input-row-readonly .input-row-switch,
.input-row-readonly .input-row-input-inner,
.input-row-readonly {
    cursor: not-allowed!important;
}
.input-row-input {
    position: relative;
    /* width: calc(100% - 225px); */
    display: flex;
    height: -moz-fit-content;
    height: fit-content;
    flex-grow: 1;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}
.input-row-input input {
    position: relative;
    background-color: transparent;
    color: var(--text-dark);
    border: none;
    padding: 8px 12px;
    flex-grow: 1;
    max-height: 37px;
    height: 21px;
    font-size: 14px;
    font-family: var(--font-family);
    transition-duration: var(--transition-duration);
}
.input-row-input input::-webkit-calendar-picker-indicator {
    display: none;
}
/* .input-row .input-row-input {
    content: '';
    position: absolute;
    width: 100%;
    pointer-events: none;
    height: 100%;
    outline: var(--border);
    border-color: transparent;
} */
.input-row-error .input-row-input:hover,
.input-row-error .input-row-input {
    border-color: rgb(var(--color-general-danger-text));
    box-shadow: 0px 0px 0 1px rgb(var(--color-general-danger-text));
    background-color: rgb(var(--color-general-danger-bg));
}
.input-row-warning .input-row-input:hover,
.input-row-warning .input-row-input {
    border-color: rgb(var(--color-general-warning-text));
    box-shadow: 0px 0px 0 1px rgb(var(--color-general-warning-text));
    background-color: rgb(var(--color-general-warning-bg));
}
.input-row-success .input-row-input:hover,
.input-row-success .input-row-input {
    border-color: rgb(var(--color-general-success-text));
    box-shadow: 0px 0px 0 1px rgb(var(--color-general-success-text));
    background-color: rgb(var(--color-general-success-bg));
}
.input-row-input input:focus {
    outline: none;
}
.input-row-disabled .input-row-switch,
.input-row-disabled .input-row-input-inner {
    /* opacity: 0.8; */
    cursor: not-allowed;
    background-size: 6px 6px;
    background-image: repeating-linear-gradient(45deg, transparent 0, transparent 2px, var(--color-main) 0, var(--color-main) 50%);
    border-radius: var(--border-radius);
}
.input-row-arrow {
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 100%;
    padding: 0 16px;
    transition-duration: var(--transition-duration);
    cursor: pointer;
}
.input-row-arrow svg {
    width: 100%;
    height: 100%;
    fill: var(--text-secondary);
    transition-duration: var(--transition-duration);
}
.input-row-searchable.input-row-search-opened .input-row-arrow svg {
    transform: rotate(180deg);
}
.input-row-dropdown .input-row-arrow svg {
    transform: none!important;
}
.input-row-search {
    margin-top: 8px;
    will-change: top, left;
    z-index: 600;
    width: 100%;
    max-height: 40vh;
    min-height: 35px;
    margin: 0;
    border: 1px solid var(--color-border);
    background-color: var(--color-main);
    overflow: auto;
    box-shadow: none;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    border-radius: var(--border-radius);
    animation: drop var(--transition-duration) forwards;
    /* border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius); */
}
.input-row-search-up {
    /* border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius); */
}
@keyframes drop {
    0% {
        transform: translate(0px, 0);
        opacity: 0;
    }
    100% {
        transform: translate(0px, 5px);
        opacity: 1;
    }
}

.input-row-search-opened .input-row-search {
    opacity: 1;
    visibility: visible;
    box-shadow: var(--box-shadow);
}
.input-row-search-item {
    padding: 8px 12px;
    font-size: 14px;
    word-wrap: break-word;
    line-height: 1.5;
    cursor: pointer;
    color: var(--text-secondary);
    transition-duration: var(--transition-duration);
}
.input-row-dropdown-item:hover,
.input-row-search-item:hover {
    color: var(--text-dark);
    background-color: var(--color-secondary);
}
.input-row-dropdown-item {
    padding: 10px 16px;
    font-size: 14px;
    word-wrap: break-word;
    line-height: 1.5;
    cursor: pointer;
    transition-duration: var(--transition-duration);
    display: flex;
    align-items: center;
}
.input-row-dropdown-item:hover svg {
    fill: var(--text-dark);
}
.input-row-dropdown-item svg {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    fill: var(--text-dark);
    transition-duration: var(--transition-duration);
}
.input-row-dropdown-item-checked {
    color: var(--text-dark);
}
.input-row-dropdown-item-checked svg {
    fill: var(--text-dark);
}
.input-row-select {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
}
.input-row-switch,
.input-row-select-item {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition-duration: var(--transition-duration);
}
.input-row-switch:hover,
.input-row-select-item:hover {
    background-color: var(--color-secondary);
}
.input-row-select-item-checked {
    color: var(--text-dark);
}
.input-row-select-item svg {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    fill: var(--text-dark);
    transition-duration: var(--transition-duration);
}
.input-row-select-item-checked svg {
    fill: var(--text-dark);
    margin: 0;
    /* width: 14px!important;
    height: 14px!important; */
}
.input-row-dropdown input {
    cursor: pointer;
    color: var(--text-dark)!important;
}
.input-row-dropdown .input-row-input-inner {
    padding-right: 45px;
}
.input-row-dropdown.input-row-search-opened .input-row-arrow svg {
    transform: rotate(180deg);
}
.input-row input::-webkit-date-and-time-value{
    text-align:left;
}

textarea.input-row-input-inner {
    background-color: transparent;
    font-family: var(--font-family);
    color: var(--text-dark);
    padding: 8px 12px;
    height: 55px;
    min-height: 50px;
    max-height: 476px;
    border: none;
    outline: none;
    font-size: 14px;
    text-wrap: wrap;
    resize: none;
    color: var(--text-dark);
    /* background-color: var(--color-main); */
}
.input-row-input-inner-dropdown {
    color: var(--color-brand);
    padding: 8px 12px;
    width: 100%;
}
.input-row-search-opened .input-row-input-inner-dropdown {
    border-color: var(--color-primary-bg-hover);
}

.input-row-sign {
    /* background-color: var(--color-secondary); */
    color: var(--text-dark);
    padding: 2px 0 2px 10px;
    border-radius: 6px;
    margin: 4px 0px 4px 6px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    text-wrap: nowrap;
}
.input-row-switch.input-row-switch-active {
    color: var(--text-dark);
}
.input-row-switch {
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
}

@media (max-width: 800px) {
    .input-row {
        flex-direction: column;
    }
    .input-row-focused input {
        /* background-color: var(--color-primary-bg-hover)!important; */
    }
    .input-row-label {
        flex-grow: 1;
        width: unset;
        min-width: 0;
        background-color: transparent;
        padding-top: 8px;
        padding-bottom: 8px;
        border-right: none;
    }
    .input-row-input-inner {
        min-width: 0;
        text-wrap: ellipsis;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .input-row-error .input-row-label {
        background-color: var(--color-marin);
        color: rgb(var(--color-general-danger-text));
    }
    .input-row-success .input-row-label {
        background-color: var(--color-marin);
        color: rgb(var(--color-general-success-text));
    }
    .input-row-warning .input-row-label {
        background-color: var(--color-marin);
        color: rgb(var(--color-general-warning-text));
    }
    .input-row .checkbox-wrapper,
    .input-row-label label {
        /* flex-grow: 1!important; */
    }
    .input-row-focused .input-row-label {
        /* background-color: transparent; */
    }
    .input-row-sign {
        margin-left: 4px;
    }
}
.checkbox-wrapper {
    cursor: pointer;
    display: flex;
    gap: 12px;
    position: relative;
    font-size: 12px;
}
.checkbox-wrapper.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
.checkbox-wrapper.disabled:active .checkbox,
.checkbox-wrapper.disabled:hover .checkbox {
    border-color: var(--color-border)!important;
    box-shadow: none!important;
}
.checkbox-wrapper.checkbox-read-only:hover .checkbox {
    border-color: var(--color-border)!important;
    box-shadow: none!important;
}
.checkbox-wrapper.checkbox-read-only {
    cursor: default;
}
.checkbox-wrapper .checkbox {
    border: 1px solid var(--color-border);
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    border-radius: 6px;
    position: relative;
    /* outline: 1px solid transparent; */
    transition-duration: var(--transition-duration);
}
.checkbox-rounded .checkbox {
    border-radius: 50%;
}
.checkbox-wrapper:hover .checkbox {
    border-color: var(--text-dark);
    background-color: transparent;
}
.checkbox-wrapper:hover .checkbox {
    /* outline: 1px solid var(--color-primary-bg-hover); */
    background-color: transparent;
}
.checkbox-wrapper:active .checkbox {
    border-color: var(--color-border)!important;
    box-shadow: var(--text-dark) 0px 0px 0px 2px, var(--text-light) 0px 0px 0px 4px;
}
.checkbox-wrapper .checkbox-checked {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -2px;
    left: -2px;
}
.checkbox-wrapper .checkbox-checked svg {
    width: 70%;
    height: 70%;
    fill: var(--text-light);
}
.checkbox-label {
    line-height: 1.43;
    color: var(--text-dark);
    letter-spacing: 0.2px;
    transition-duration: var(--transition-duration);
}
.checkbox-wrapper-checked:hover .checkbox,
.checkbox-wrapper-checked .checkbox {
    border-color: var(--text-dark);
    background-color: var(--text-dark);
}
.checkbox-success.checkbox-wrapper-checked.checkbox-wrapper.checkbox-read-only:hover .checkbox,
.checkbox-success.checkbox-wrapper-checked:hover .checkbox,
.checkbox-success.checkbox-wrapper-checked .checkbox {
    border-color: var(--color-success)!important;
    background-color: var(--color-success);
}
.checkbox-success.checkbox-wrapper:active .checkbox {
    border-color: var(--color-success-bg-hover)!important;
    box-shadow: var(--color-border) 0px 0px 0px 2px, var(--color-success) 0px 0px 0px 4px;
}
.checkbox-success.checkbox-wrapper:hover .checkbox {
    border-color: var(--color-success);
}
.checkbox-brand.checkbox-wrapper-checked.checkbox-wrapper.checkbox-read-only:hover .checkbox,
.checkbox-brand.checkbox-wrapper-checked:hover .checkbox,
.checkbox-brand.checkbox-wrapper-checked .checkbox {
    border-color: var(--color-brand)!important;
    background-color: var(--color-brand);
}
.checkbox-brand.checkbox-wrapper:active .checkbox {
    border-color: var(--color-brand-bg-hover)!important;
    box-shadow: var(--color-border) 0px 0px 0px 2px, var(--color-brand) 0px 0px 0px 4px;
}
.checkbox-brand.checkbox-wrapper:hover .checkbox {
    border-color: var(--color-brand);
}
.checkbox-warning.checkbox-wrapper-checked:hover .checkbox,
.checkbox-warning.checkbox-wrapper-checked .checkbox {
    border-color: var(--color-warning);
    background-color: var(--color-warning);
}
.checkbox-warning.checkbox-wrapper:active .checkbox {
    border-color: rgb(var(--color-general-warning-bg-hover))!important;
    box-shadow: var(--color-border) 0px 0px 0px 2px, var(--color-warning) 0px 0px 0px 4px;
}
.checkbox-warning.checkbox-wrapper:hover .checkbox {
    border-color: var(--color-warning);
}
.checkbox-danger.checkbox-wrapper-checked:hover .checkbox,
.checkbox-danger.checkbox-wrapper-checked .checkbox {
    border-color: var(--color-danger);
    background-color: var(--color-danger);
}
.checkbox-danger.checkbox-wrapper:active .checkbox {
    border-color: rgb(var(--color-general-danger-bg-hover))!important;
    box-shadow: var(--color-border) 0px 0px 0px 2px, var(--color-danger) 0px 0px 0px 4px;
}
.checkbox-wrapper:hover .checkbox-label {
    /* color: var(--text-light); */
}
.checkbox-danger.checkbox-wrapper:hover .checkbox {
    border-color: var(--color-danger);
}
.checkbox-wrapper .spinner {
    width: 14px;
    height: 14px;
}
.checkbox-warning:hover .checkbox-label,
.checkbox-warning .checkbox-label {
    color: var(--color-warning);
}
.checkbox-success:hover .checkbox-label,
.checkbox-success .checkbox-label {
    color: var(--color-success);
}
.checkbox-danger:hover .checkbox-label,
.checkbox-danger .checkbox-label {
    color: var(--color-danger);
}
.checkbox-danger .checkbox {
    border-color: var(--color-danger);
}
.checkbox-warning .checkbox {
    border-color: var(--color-warning);
}
.checkbox-success .checkbox {
    border-color: var(--color-success);
}

.checkbox-wrapper.checkbox-sm .checkbox {
    width: 12px;
    height: 12px;
    min-height: 12px;
    min-width: 12px;
}
.checkbox-wrapper.checkbox-sm .checkbox-checked {
    width: 16px;
    height: 16px;
}
.checkbox-wrapper.checkbox-lg .checkbox {
    width: 24px;
    height: 24px;
    min-height: 24px;
    min-width: 24px;
}
.checkbox-wrapper.checkbox-lg .checkbox-checked {
    width: 28px;
    height: 28px;
}
.input-default-container {
    position: relative;
    display: flex;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-xs);
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
    outline: 3px solid transparent;
}

.input-default-container:focus-within,
.input-default-container:hover {
    background-color: var(--color-tertiary);
}

.input-default-container .input-default-icon {
    padding-left: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
}
.input-default-container .input-default-icon.input-default-icon-right {
    padding-left: 0;
    padding-right: 12px;
}
.input-default-container .input-default-icon svg {
    width: 1em;
    height: 1em;
}

.input-default-container:hover input,
.input-default-container:focus-within .input-default-icon,
.input-default-container:focus-within input {
    filter: unset;
    opacity: 1;
    border-color: var(--color-general-default-border);
}
.input-default-container:focus-within svg {
    fill: rgb(var(--color-general-primary-text));
}

.input-default-display-placeholder input::placeholder,
.input-default-container:focus-within input::placeholder {
    color: var(--text-secondary)!important;
}
.input-default-wrapper {
    position: relative;
    flex-grow: 1;
}
.input-default-container {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-xs);
    font-size: 14px;
    position: relative;
    line-height: 1;
    min-height: 44px;
    background-color: transparent;
    color: var(--text-dark);
    transition: 150ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}
.input-default-container select {
    width: 100%;
    height: 100%;
    position: absolute;
    border: none;
    background-color: transparent;
    color: var(--text-dark);
    padding: 12px;
    font-size: 14px;
    line-height: 1;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: 150ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}
.input-default-container select option {
    color: var(--text-dark);
    background-color: var(--color-tertiary);
}
.input-default-container input {
    outline: none;
    border: none;
    font-family: var(--font-family);
    width: calc(100% - 24px);
    padding: 12px;
    font-size: 14px;
    line-height: 1;
    background-color: transparent;
    color: var(--text-dark);
    transition: 150ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.input-default-container input[type="date"]::-webkit-calendar-picker-indicator {
    color-scheme: var(--color-scheme);
}
.input-default-container:focus-within label {
    color: rgb(var(--color-general-primary-text))!important;
}
.input-default-container:focus-within {
    border-color: rgb(var(--color-general-primary-text));
    outline: 3px solid rgb(var(--color-general-primary-border));
}

.input-default-container.input-default-success {
    border-color: rgb(var(--color-general-success-text));
}

.input-default-container.input-default-danger {
    border-color: rgb(var(--color-general-danger-text));
}
.input-default-container.input-default-danger svg {
    fill: rgb(var(--color-general-danger-text));
}
.input-default-container.input-default-danger label.filled {
    color: rgb(var(--color-general-danger-text));
}

.input-default-container.input-default-success svg {
    fill: rgb(var(--color-general-success-text));
}
.input-default-container.input-default-success label.filled {
    color: rgb(var(--color-general-success-text));
}
.input-default-container.input-default-success label {
    color: var(--text-dark);
    fill: var(--text-dark);
}

.input-default-container.input-default-warning svg {
    fill: rgb(var(--color-general-warning-text));
}
.input-default-container.input-default-warning label.filled {
    color: rgb(var(--color-general-warning-text));
}
.input-default-container.input-default-warning label {
    color: var(--text-dark);
    fill: var(--text-dark);
}
.input-default-container.input-default-warning {
    border-color: rgb(var(--color-general-warning-text));
}


input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--text-dark) !important;
}

.input-default-container:focus-within {
    border-color: rgb(var(--color-general-primary-text));
    outline: 3px solid rgb(var(--color-general-primary-border));
}
.input-default-container:focus-within svg {
    fill: rgb(var(--color-general-primary-text));
}

input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
}
.input-row-group .input-row-group-wrapper .line-button {
    border-radius: 0;
}

.input-row-group .input-row-group-wrapper .input-row:last-of-type {
    border-bottom: none;
}

.input-row-group .input-row-group-wrapper .input-row:not(:first-of-type):not(:last-of-type)>.input-row-label,
.input-row-group .input-row-group-wrapper .input-row:not(:first-of-type):not(:last-of-type) {
    border-radius: 0!important;
}

.input-row-group .input-row:first-of-type>.input-row-label {
    border-top-left-radius: var(--border-radius);
}

.input-row-group .input-row:first-of-type .input-row-switch,
.input-row-group .input-row:first-of-type .input-row-select div:first-child .checkbox-wrapper,
.input-row-group .input-row:first-of-type .input-row-input-inner {
    border-top-right-radius: var(--border-radius);
}

.input-row-group .input-row:last-of-type>.input-row-label {
    border-bottom-left-radius: var(--border-radius);
}

.input-row-group .input-row:last-of-type .input-row-switch,
.input-row-group .input-row:last-of-type .line-button:last-child,
.input-row-group .input-row:last-of-type .input-row-select div:last-child .checkbox-wrapper,
.input-row-group .input-row:last-of-type .input-row-input-inner {
    border-bottom-right-radius: var(--border-radius);
}

.input-row-group-wrapper .input-row:only-child>.input-row-label {
    border-left: none;
}

@media (max-width: 800px) {
    .input-row-group .input-row:first-of-type>.input-row-label {
        border-top-right-radius: var(--border-radius);
    }
    .input-row-group .input-row:last-of-type>.input-row-label {
        border-bottom-left-radius: 0;
    }
    .input-row-group .input-row .input-row-switch,
    .input-row-group .checkbox-wrapper {
        border-top-right-radius: 0;
    }
    .input-row-group .input-row:last-of-type .input-row-input-inner,
    .input-row-group .input-row:last-of-type .input-row-switch,
    .input-row-group .input-row:last-of-type .input-row-select div:last-child .checkbox-wrapper {
        border-bottom-left-radius: var(--border-radius);
    }
}
.progress-bar {
    width: 100%;
    height: var(--progress-bar-height);
    border-radius: var(--border-radius);
    background: var(--color-border);
    position: relative;
}
.progress-bar.progress-bar-custom::after {
    background-color: var(--progress-bar-color)!important;
}
.progress-bar.progress-bar-brand::after {
    background-color: var(--color-brand);
}
.progress-bar.progress-bar-warning::after {
    background-color: var(--color-warning);
}
.progress-bar.progress-bar-success::after {
    background-color: var(--color-success);
}
.progress-bar.progress-bar-danger::after {
    background-color: var(--color-danger);
}
.progress-bar.progress-bar-primary::after {
    background-color: var(--color-primary);
}
.progress-bar::after {
    content: "";
    width: var(--progress-bar-width);
    border-radius: var(--border-radius);
    height: var(--progress-bar-height);
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--color-success);
    transition-duration: var(--transition-duration);
}
.select-basic {
    background-color: var(--color-main);
    border-radius: var(--border-radius-sm);
    color: var(--text-dark);
    padding: 4px 2px;
    cursor: pointer;
    border: 1px solid var(--color-border);
    outline: none;
    font-size: 14px;

}
.select-basic:active {
    border-color: var(--color-secondary);
}
.select-basic:focus {
    background-color: var(--color-secondary);
}
.select-basic option {
    background-color: var(--color-main);
    color: var(--text-dark);
}
.select-basic option:hover {
    background-color: var(--color-secondary);
    color: var(--text-dark);
}
.line-button-group .line-button-group-content {
    background-color: var(--color-main);
}
.line-button-group .line-button-group-content {
    border-radius: var(--border-radius);
}
.line-button-group .line-button .border-bottom {
}

.line-button-group .line-button:first-child::before {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}
.line-button-group .line-button:last-child::before {
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}
.line-button-group .line-button:last-child .border-bottom {
    border-color: transparent!important;
}
.line-button-group .line-button::before {
    border-radius: 0px;
}

.line-button-group .line-button:first-child {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.line-button-group .line-button:last-child {
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}
.preview-image {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    min-height: inherit;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    line-height: 1;
    font-weight: 400;
    /* overflow: hidden; */
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    color: var(--text-light);
    background-color: var(--color-tertiary);
    transition: var(--transition-duration);
}

.preview-image.preview-image-full {
    width: 100%;
    height: 100%;
    font-size: 1.2rem;
}
.preview-image.preview-image-dynamic {
    width: 100%;
    height: 100%;
}

.preview-image .preview-image-contain {
    object-fit: contain;
}

.preview-image img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    text-align: center;
    color: transparent;
    object-fit: cover;
    object-position: center;
    background-color: #fff;
}

.preview-image .preview-image-loading {
    opacity: 0;
}


.preview-img-big-display {
    width: 100%;
    height: 100%;
    z-index: 999;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
    transition-duration: var(--transition-duration);
    animation: fadeIn var(--transition-duration) ease-in-out forwards;
    position: fixed;
}

.preview-img-big-display-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    align-items: center;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
}

.preview-img-big-display-container img {
    max-width: 75%;
    height: auto;
    object-fit: contain;
    cursor: default;
    object-position: center;
}

.preview-img-big-display-container-inner {
    pointer-events: initial;
    width: 100%;
    display: flex;
    justify-content: center;
    align-self: center;
    text-align: center;
}

.preview-img-big-display-container-inner-img {
    pointer-events: inherit;
}


.preview-image.preview-image-loading {
    position: relative;
    overflow: hidden;
    background-color: #fff;
}

.preview-image.preview-image-loading img {
    opacity: 0;
}

.preview-image.img-error img {
    background-color: transparent;
}

.preview-img-big-display-controllers-top {
    position: absolute;
    top: 0;
    left: 0;
    padding: 12px 0;
    width: 100%;
    z-index: 1;
    color: #fff;
}
.preview-img-big-display-controllers-top .btn {
    color: #fff !important;
}
.preview-img-big-display-controllers-top:hover .btn:hover {
    background-color: rgba(0, 0, 0, 0.5) !important;
}
.preview-img-big-display-controllers-top svg {
    color: #fff!important;
    fill: #fff!important;
    cursor: pointer;
    stroke: #fff!important;
}

.preview-img-big-display-controllers-bottom .btn {
    color: #fff !important;
}
.preview-img-big-display-controllers-bottom:hover .btn:hover {
    background-color: rgba(0, 0, 0, 0.5) !important;
}
.preview-img-big-display-controllers-bottom svg {
    color: #fff!important;
    fill: #fff!important;
    cursor: pointer;
    stroke: #fff!important;
}

@media (max-width: 800px) {
    .preview-img-big-display-container-inner-img,
    .preview-img-big-display-container img {
        max-width: 100%;
    }
}