.material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    user-select: none;
    width: 1em; /* prevents flickering and layout shifts */
    height: 1em; /* prevents flickering and layout shifts */
    overflow: hidden; /* prevents flickering and layout shifts */
}

    .material-symbols-rounded.fill {
        font-family: 'Material Symbols Rounded';
        font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
        color: var(--text-primary);
    }

html:not([data-icons-ready]) .material-symbols-rounded {
    visibility:hidden;
}

html[data-icons-ready] .material-symbols-rounded{
    overflow: unset;
}

input {
    color: var(--text-main);
}

.bucher-input,
input {
    background: var(--background-color) !important;
    border: 1px solid var(--border-main) !important;
    border-radius: var(--border-radius) !important;
    color: var(--text-main) !important;
}

.search-wrapper:focus-within {
    outline: 3px solid var(--primary-color) !important;
}
.search-wrapper-close-btn {
    z-index: 300000;
}

.search-input {
    border: unset !important;
    outline: unset !important;
}

    .search-input .k-input-inner, .bucher-input .k-input-inner::placeholder {
        font-size: 16px !important;
    }

.bucher-input.border-0 {
    border: 0 !important;
}

.bucher-input:disabled,
.bucher-input:has(input:disabled),
.bucher-input input:disabled {
    background: var(--input-disabled-bg-color) !important;
}

.bucher-input::after {
    inset: unset !important;
}

.k-input-inner::placeholder {
    color: var(--text-main-disabled) !important;
}

.bucher-input input:not(:disabled),
.bucher-input .k-input-spinner {
    background: var(--background-color) !important;
    color: var(--text-main) !important;
}

input[type=radio] {
    border: 1px solid var(--border-main) !important;
    border-radius: 50% !important;
    accent-color: var(--primary-color) !important;
    color: var(--text-main) !important;
}

    input[type=radio]:checked {
        border: 5px solid var(--primary-color) !important;
    }

.rounded {
    border-radius: var(--border-radius) !important;
}

.flex-1 {
    flex: 1;
}

.flex-2 {
    flex: 2;
}

.flex-3 {
    flex: 3;
}

.flex-4 {
    flex: 4;
}

.flex-5 {
    flex: 5;
}

.badge {
    border-radius: var(--border-radius);
    padding: 0.25rem 0.5rem;
    display: flex;
    align-items: center;
    width: fit-content;
    font-weight: 400;
}

.badge-primary {
    background: var(--primary-color);
}

.badge-secondary {
    background: var(--secondary-color);
}

.badge-tertiary {
    background: var(--light-gray);
}

.w-fit-content {
    width: fit-content !important;
}

.h-fit-content {
    height: fit-content !important;
}

.max-w-20 {
    max-width: 20%;
}

.max-w-30 {
    max-width: 30%;
}

.w-33 {
    width: 33%;
}

small {
    font-size: var(--small-font-size);
}

.border-radius {
    border-radius: var(--border-radius);
}

.bg-primary {
    background: var(--primary-color) !important;
    color: var(--primary-color-overlay-text) !important;
}

.bg-secondary {
    background: var(--background-color-secondary) !important;
}

.bg-light {
    background: var(--light-gray) !important;
}

.bg-color-secondary {
    background-color: var(--background-color-secondary) !important
}

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

.text-primary {
    color: var(--text-primary) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

.text-white {
    color: white;
}

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

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

.fw-100 {
    font-weight: 100;
}

.fw-200 {
    font-weight: 200;
}

.fw-300 {
    font-weight: 300;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.fw-800 {
    font-weight: 800;
}

.fw-900 {
    font-weight: 900;
}

.td-none {
    text-decoration: none;
}

    .td-none:hover {
        text-decoration: underline;
    }

.td-underline {
    text-decoration: underline;
}

    .td-underline:hover {
        text-decoration: none;
    }

.justify-content-unset {
    justify-content: unset;
}

.end-3 {
    right: 1rem;
}

.end-5 {
    right: 3rem;
}

.top-3 {
    top: 1rem;
}

.hover-opacity:hover {
    opacity: 0.5;
}

icon-button-color {
    color: var(--background-color)
}

.circle {
    border-radius: 100%;
}

.overflow-x-auto {
    overflow-x: auto;
}

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

.navigation-button {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--background-color-secondary);
    border-radius: 100%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    padding: .5rem;
    position: absolute;
    top: calc(50% - 20px);
    z-index: 4;
}

    .navigation-button.navigation-button-left {
        left: .5rem;
    }

    .navigation-button.navigation-button-right {
        right: .5rem;
    }

    .navigation-button.navigation-button-top {
        top: 0px;
        left: calc(50% - 20px);
    }

    .navigation-button.navigation-button-bottom {
        bottom: -20px;
        top: unset;
        left: calc(50% - 20px);
    }

*:has(> .navigation-button) {
    position: relative;
}

    *:has(> .navigation-button) .navigation-button {
        visibility: hidden;
        opacity: 0 !important;
        transition: visibility 0.15s, opacity 0.15s linear;
    }

    *:has(> .navigation-button):hover .navigation-button {
        visibility: visible;
        opacity: 1 !important;
    }

iframe {
    border-radius: var(--border-radius);
}

.loading-image {
    max-height: 190px;
    max-width: 190px;
}