:root {
        --control-height: 4rem;
        --control-font-size: 1.125rem;
        --control-border-width: thin;
        --control-wrapper-padding-inline: .25rem;
        --control-padding-inline: .75rem;
        --control-content-inset: 1rem;
        --control-prefix-offset: 3rem;
        --control-label-padding-inline: .25rem;
        --color-control-label: var(--color-text-secondary);
        --color-control-focus: var(--color-text);
        --radius-input: .75rem;
    }

    .icon-btn .material-icons{
        float: left;
    }
    i.left{
        margin-right: 10px;
    }

    .carousel .indicators .indicator-item {
        background-color: rgba(215, 215, 215, 1);
        margin:4px;
        height: 5px;
        width: 5px;
    }

    .carousel .indicators .indicator-item.active {
        background-color: #000000;
    }


    .collection {
        border: none;
    }

    .collection-item p, .ellipsis{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .collection .collection-item {
        padding: 10px;
        border-radius: 20px;
        margin-bottom: 15px;
    }


    .collapsible-body{
        padding: 1rem 2rem;
    }
    .collapsible{
        border: none;
        box-shadow: none;
    }

    #toast-container {
        bottom: 4rem;
    }

    .toast,
    .toast .btn {
        font-size: 1rem;
    }

    .toast .toast-action {
        color: var(--color-theme);
        margin: 0 !important;
    }

    .browser-default,
    .input-field textarea,
    .input-field input,
    .input-field select {
        margin-bottom: 0 !important;
        border: none !important;
        box-sizing: border-box !important;
        padding-right: var(--control-padding-inline) !important;
        padding-left: var(--control-padding-inline) !important;
        color: var(--color-text) !important;
        background-color: transparent;
        box-shadow: none !important;
        font-size: var(--control-font-size);
        font-weight: var(--font-weight-medium);
    }

    .browser-default,
    .input-field input:not([type=checkbox], [type=radio], [type=file], [type=hidden]),
    .input-field select {
        height: var(--control-height) !important;
    }

    .input-field > .browser-default {
        padding-left: calc(var(--control-padding-inline) - .14rem) !important;
    }

    .input-field > .browser-default:focus {
        outline: none;
    }

    .input-field textarea {
        height: auto;
        min-height: var(--control-height) !important;
        padding-top: 1.75rem !important;
    }

    .input-field {
        --field-border-color: var(--color-border-strong);

        position: relative;
        padding: 0 var(--control-wrapper-padding-inline) !important;
        border: var(--control-border-width) solid var(--field-border-color) !important;
        border-radius: var(--radius-input) !important;
        background: var(--color-surface);
        box-shadow: none !important;
        transition: border-color .15s ease, background-color .15s ease;
    }

    .input-field:focus-within {
        --field-border-color: var(--color-control-focus);
    }

    .input-field.is-invalid,
    .input-field:has(input.invalid, textarea.invalid, select.invalid) {
        --field-border-color: var(--color-error);
    }

    .input-field.is-valid,
    .input-field:has(input.valid, textarea.valid, select.valid) {
        --field-border-color: var(--color-success);
    }

    .input-field.is-invalid > label,
    .input-field:has(input.invalid, textarea.invalid, select.invalid) > label {
        color: var(--color-error) !important;
    }

    .input-field.is-valid > label,
    .input-field:has(input.valid, textarea.valid, select.valid) > label {
        color: var(--color-success) !important;
    }

    .input-field:has(> input:disabled:not([type=checkbox], [type=radio]), > textarea:disabled, > select:disabled, > .select-wrapper > select:disabled) {
        cursor: not-allowed;
    }

    .input-field > input[readonly],
    .input-field > textarea[readonly] {
        color: var(--color-text-secondary) !important;
    }

    .input-field > label {
        top: 50%;
        margin-left: calc(var(--control-content-inset) - var(--control-label-padding-inline));
        padding: 0 var(--control-label-padding-inline);
        color: var(--color-control-label) !important;
        border-radius: var(--radius-input);
        line-height: 1.3;
        transform: translateY(-50%);
        width: auto !important;
    }

    .input-field > input:not([type=date], [type=time], [type=datetime-local]) + label:not(.label-icon, .active),
    .input-field > textarea + label:not(.label-icon, .active),
    .input-field:has(> select.select2) > label:not(.label-icon, .active) {
        font-size: var(--control-font-size);
    }

    .input-field:has(> textarea) > label:not(.active) {
        top: var(--control-padding-inline);
        transform: none;
    }

    .input-field:focus-within > label {
        color: var(--field-border-color) !important;
    }

    .input-field .prefix ~ label {
        margin-left: calc(var(--control-prefix-offset) + var(--control-content-inset) - var(--control-label-padding-inline)) !important;
    }

    .input-field:has(input:required, textarea:required, select:required) > label::after {
        color: var(--color-error);
        content: " *";
    }

    .input-field > label:not(.label-icon).active,
    .input-field:focus-within > label:not(.label-icon),
    .input-field:has(> select.select2[data-placeholder]) > label:not(.label-icon),
    .input-field > input[type=date]:not(.browser-default) + label,
    .input-field > input[type=time]:not(.browser-default) + label,
    .input-field > input[type=datetime-local]:not(.browser-default) + label,
    .select-wrapper + label,
    .default-field label,
    .browser-default:not(.select2) ~ label {
        top: .5rem;
        padding: 0 var(--control-label-padding-inline);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        font-size: .875rem;
        background: transparent;
        transform: none;
    }

    .input-field:focus-within > input:not([type=checkbox], [type=radio], [type=file], [type=hidden]),
    .input-field:has(> label.active) > input:not([type=checkbox], [type=radio], [type=file], [type=hidden]),
    .input-field > input[type=date]:not(.browser-default),
    .input-field > input[type=time]:not(.browser-default),
    .input-field > input[type=datetime-local]:not(.browser-default),
    .input-field:has(> .select-wrapper + label) input.select-dropdown,
    .input-field:has(> .browser-default:not(.select2) ~ label) > .browser-default:not(.select2) {
        padding-top: 1rem !important;
    }

    .default-select select {
        height: var(--control-height);
        margin-top: 0;
        padding: 0;
    }

    .default-select .input-field label {
        left: calc(var(--control-content-inset) - var(--control-label-padding-inline)) !important;
        margin-top: 0;
        margin-left: 0;
    }

    .default-field label,
    .browser-default:not(.select2) ~ label {
        top: .5rem;
        transform: none;
    }

    .input-field > .helper-text,
    .input-field + .helper-text {
        display: block;
        min-height: 1.3em;
        color: var(--color-control-label);
        font-weight: var(--font-weight-regular);
        line-height: 1.3;
    }

    .input-field > .helper-text {
        margin: var(--control-label-padding-inline) calc(var(--control-content-inset) - var(--control-wrapper-padding-inline)) 0;
    }

    .input-field .prefix ~ .helper-text {
        margin-left: calc(var(--control-prefix-offset) + var(--control-content-inset) - var(--control-wrapper-padding-inline));
    }

    .input-field + .helper-text {
        margin: var(--control-label-padding-inline) var(--control-content-inset) 0;
    }

    .input-field:has(.prefix) + .helper-text {
        margin-left: calc(var(--control-prefix-offset) + var(--control-content-inset));
    }

    .input-field:has(+ .helper-text) {
        margin-bottom: 0;
    }

    .input-field + .helper-text {
        margin-bottom: .875rem;
    }

    .input-field.is-invalid > .helper-text,
    .input-field.is-invalid + .helper-text,
    .input-field:has(:is(input, textarea, select).invalid) + .helper-text,
    .input-field :is(input, textarea, select).invalid ~ .helper-text {
        color: var(--color-error);
    }

    .input-field.is-valid > .helper-text,
    .input-field.is-valid + .helper-text,
    .input-field:has(:is(input, textarea, select).valid) + .helper-text,
    .input-field :is(input, textarea, select).valid ~ .helper-text {
        color: var(--color-success);
    }

    .input-field :is(input, textarea, select).invalid,
    .input-field :is(input, textarea, select).valid {
        border-bottom: none !important;
        box-shadow: none !important;
    }

    .input-field :is(input, textarea, select):disabled,
    .input-field:has(select:disabled) .select-dropdown {
        color: var(--color-text-disabled) !important;
        cursor: not-allowed;
        opacity: 1;
    }

    .input-field:has(> input:disabled:not([type=checkbox], [type=radio]), > textarea:disabled, > select:disabled, > .select-wrapper > select:disabled) > label,
    .input-field:has(> input:disabled:not([type=checkbox], [type=radio]), > textarea:disabled, > select:disabled, > .select-wrapper > select:disabled) > .helper-text,
    .input-field:has(> input:disabled:not([type=checkbox], [type=radio]), > textarea:disabled, > select:disabled, > .select-wrapper > select:disabled) + .helper-text {
        color: var(--color-text-disabled) !important;
    }

    [type="checkbox"]:disabled + span,
    [type="radio"]:disabled + span,
    .switch label input[type=checkbox]:disabled ~ span {
        color: var(--color-text-disabled) !important;
        cursor: not-allowed;
    }

    [type="radio"]:not(:checked) + span,
    [type="radio"]:checked + span {
        display: inline-flex;
        align-items: center;
        height: auto;
        min-height: 1.5rem;
        padding-left: 2.25rem;
        color: var(--color-text);
        font-size: 1rem;
        line-height: 1.5rem;
    }

    [type="radio"] + span::before {
        position: absolute;
        top: 50%;
        left: 0;
        width: 1.5rem;
        height: 1.5rem;
        margin: 0;
        box-sizing: border-box;
        background-color: transparent;
        border: var(--control-border-width) solid var(--color-border-strong);
        border-radius: 50%;
        transform: translateY(-50%);
    }

    [type="radio"] + span::after {
        display: none;
    }

    [type="radio"]:not(:checked) + span::before {
        border: var(--control-border-width) solid var(--color-border-strong);
    }

    [type="radio"]:checked + span::before,
    [type="radio"].with-gap:checked + span::before {
        background-color: var(--color-surface);
        border: .5rem solid var(--color-text);
    }

    [type="radio"]:disabled:not(:checked) + span::before {
        border-color: var(--color-text-disabled);
    }

    [type="radio"]:disabled:checked + span::before,
    [type="radio"].with-gap:disabled:checked + span::before {
        background-color: var(--color-surface);
        border: .5rem solid var(--color-text-disabled);
    }

    .switch:has(input:disabled) {
        opacity: .4;
    }

    .modal .modal-footer {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: flex-end;
        gap: var(--space-1);
        width: 100%;
        box-sizing: border-box;
        height: auto;
        padding: var(--space-1) var(--space-2);
        background-color: var(--color-surface);
    }

    .modal .modal-footer > .row {
        flex: 1 1 100%;
        width: 100%;
        margin: 0;
    }

    .modal .modal-footer > .row > .col {
        float: none;
        width: 100%;
        margin-left: 0;
        padding: 0;
        text-align: right;
    }

    .modal .modal-footer.modal-footer--full-width > .btn {
        flex: 1 1 100%;
        width: 100%;
        margin: 0;
    }

    .modal-overlay {
        background-color: var(--color-overlay);
    }

    .modal .container {
        height: auto;
        position: relative;
        padding: 0;
        box-shadow: none !important;
    }

    .modal-header {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        gap: var(--space-1);
        padding: var(--space-2) var(--space-2) var(--space-1) var(--space-3);
    }

    .modal-title,
    .modal-header > h2,
    .modal-header > h3,
    .modal-header > h4,
    .modal-content > h4:first-child {
        margin: 0;
        padding: 0;
        font-size: 1.64rem;
        line-height: 1.25;
    }

    .modal-header > :is(h2, h3, h4, .modal-title) {
        flex: 1 1 auto;
        min-width: 0;
    }

    .modal-header > :is(h2, h3, h4):has(> .modal-close) {
        display: flex;
        align-items: center;
        gap: var(--space-1);
    }

    .modal-header .modal-close {
        position: static;
        flex: 0 0 auto;
        margin: 0 0 0 auto;
        color: var(--color-text);
        background-color: transparent;
    }

    .modal-header > :is(h2, h3, h4) > .modal-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        float: none !important;
        width: 3rem;
        height: 3rem;
    }

    .modal .modal-footer .btn-flat:not(.btn) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 3rem;
        padding: 0 var(--space-1);
        color: var(--color-theme);
        background-color: transparent;
        border-radius: 2rem;
        font-size: 1rem;
        font-weight: var(--font-weight-medium);
        line-height: 3rem;
        text-transform: none;
    }

    .sidenav {
        max-width: 85vw;
    }

    .modal {
        background-color: var(--color-surface);
        max-width: 42.86rem;
        max-height: calc(100vh - var(--space-3) - var(--space-3)) !important;
        max-height: calc(100dvh - var(--space-3) - var(--space-3)) !important;
        width: 100%;
        height: fit-content;
        overflow: hidden;
        border-radius: var(--radius-modal) !important;
        transform: scaleX(1) scaleY(1) !important;
        will-change: opacity;
        margin: auto !important;
    }

    .modal:not(.bottom-sheet) {
        top: 0 !important;
        bottom: 0 !important;
    }

    .modal.open {
        display: flex !important;
        flex-direction: column;
    }

    .modal-lg {
        max-width: 71.43rem;
    }

    .modal .modal-content {
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        overflow: auto;
        padding: 0 var(--space-2);
    }

    .modal.modal-fixed-footer > .modal-content {
        position: relative;
        top: auto;
        flex: 1 1 auto;
        width: auto;
        height: auto;
        max-height: none;
    }

    .modal.modal-fixed-footer {
        height: fit-content;
    }

    .modal.modal-fixed-footer > .modal-footer {
        position: static;
        width: 100%;
    }

    .switch {
        margin: var(--space-1) var(--space-0-5);
    }

    .switch label .lever {
        width: 3.71rem;
        height: 2.29rem;
        border-radius: 3.57rem;
        background: var(--color-border);
        box-shadow: var(--shadow-control-inset);
    }

    .switch label input[type=checkbox]:checked + .lever {
        background-color: var(--color-theme);
    }

    .switch label .lever:before,
    .switch label .lever:after {
        top: .14rem;
        left: .14rem;
        width: 2rem;
        height: 2rem;
        background-color: var(--color-surface);
    }

    .switch label input[type=checkbox]:checked + .lever:before,
    .switch label input[type=checkbox]:checked + .lever:after {
        left: 1.57rem;
        background-color: var(--color-surface);
    }

    [type="checkbox"]:is(:checked, :not(:checked)) + span:not(.lever) {
        display: inline-flex;
        align-items: center;
        height: auto;
        min-height: 1.5rem;
        padding-left: 2.25rem;
        color: var(--color-text);
        font-size: 1rem;
        line-height: 1.5rem;
    }

    [type="checkbox"].filled-in:is(:checked, :not(:checked)) + span:not(.lever)::after,
    [type="checkbox"]:not(.filled-in):is(:checked, :not(:checked)) + span:not(.lever)::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 1.5rem;
        height: 1.5rem;
        margin: 0;
        box-sizing: border-box;
        background-color: transparent;
        border: var(--control-border-width) solid var(--color-border-strong);
        border-radius: .25rem;
        transform: translateY(-50%);
        transition: border-color .15s ease, background-color .15s ease;
        z-index: 0;
    }

    [type="checkbox"].filled-in:is(:checked, :not(:checked)) + span:not(.lever)::before,
    [type="checkbox"]:not(.filled-in):is(:checked, :not(:checked)) + span:not(.lever)::before {
        content: '';
        position: absolute;
        top: 50%;
        left: .56rem;
        width: .38rem;
        height: .75rem;
        margin: 0;
        box-sizing: border-box;
        background-color: transparent;
        border: solid transparent;
        border-width: 0 .14rem .14rem 0;
        opacity: 0;
        transform-origin: center;
        transform: translateY(-50%) rotate(45deg);
        transition: opacity .15s ease;
        z-index: 1;
    }

    [type="checkbox"].filled-in:checked + span:not(.lever)::after,
    [type="checkbox"]:not(.filled-in):checked + span:not(.lever)::after,
    [type="checkbox"].filled-in:indeterminate + span:not(.lever)::after,
    [type="checkbox"]:not(.filled-in):indeterminate + span:not(.lever)::after {
        background-color: var(--color-text);
        border-color: var(--color-text);
    }

    [type="checkbox"].filled-in:checked + span:not(.lever)::before,
    [type="checkbox"]:not(.filled-in):checked + span:not(.lever)::before {
        border-color: var(--color-surface);
        opacity: 1;
    }

    [type="checkbox"].filled-in:indeterminate + span:not(.lever)::before,
    [type="checkbox"]:not(.filled-in):indeterminate + span:not(.lever)::before {
        top: 50%;
        left: .38rem;
        width: .75rem;
        height: 0;
        border: 0;
        border-top: .14rem solid var(--color-surface);
        opacity: 1;
        transform: translateY(-50%);
    }

    [type="checkbox"].filled-in:disabled:is(:checked, :not(:checked)) + span:not(.lever)::after,
    [type="checkbox"]:not(.filled-in):disabled:is(:checked, :not(:checked)) + span:not(.lever)::after {
        background-color: transparent;
        border-color: var(--color-text-disabled);
    }

    [type="checkbox"].filled-in:disabled:checked + span:not(.lever)::after,
    [type="checkbox"]:not(.filled-in):disabled:checked + span:not(.lever)::after,
    [type="checkbox"].filled-in:disabled:indeterminate + span:not(.lever)::after,
    [type="checkbox"]:not(.filled-in):disabled:indeterminate + span:not(.lever)::after {
        background-color: var(--color-text-disabled);
    }

    .bottom-sheet {
        top: auto !important;
        max-height: calc(100vh - var(--space-3)) !important;
        max-height: calc(100dvh - var(--space-3)) !important;
        margin: 0 auto !important;
        border-bottom-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }

    .progress .determinate {
        background-color: var(--color-theme);
    }

    /* Legacy tagsinput styling used by Materialize-era forms. */
    div.tagsinput span.tag {
        background-color: var(--color-text);
    }

    .dropdown-content {
        max-height: 320px;
        width: auto !important;
    }

    .tabs {
        background-color: transparent;
    }

    .row .col {
        padding: 0 .75rem;
    }

    .col:has(.hidden_element) {
        display: none;
    }

    .tap-target-wave {
        z-index: auto;
    }

    .select-wrapper > .dropdown-content.select-dropdown {
        top: calc(100% + .25rem) !important;
        left: 0 !important;
        width: 100% !important;
        min-width: 100%;
        padding-top: 0;
        background-color: var(--color-surface);
        border: var(--control-border-width) solid var(--color-border-strong);
        border-radius: var(--radius-input);
    }

    select option {
        font-size: 1.2rem;
    }

    select option:checked,
    select option:active,
    select option:focus {
        color: var(--color-surface);
        background: var(--color-text);
    }

    .dropdown-content li > button,
    .dropdown-content li > a,
    .dropdown-content li > span {
        color: var(--color-text) !important;
    }

    @media screen and (max-width: 601px) {
        .modal:not(.bottom-sheet) {
            top: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100vh !important;
            height: 100dvh !important;
            max-height: 100vh !important;
            max-height: 100dvh !important;
            margin: 0 !important;
            border-radius: 0 !important;
        }

        .modal:not(.bottom-sheet) .modal-header {
            padding-top: max(var(--space-2), env(safe-area-inset-top));
        }

        .modal:not(.bottom-sheet) .modal-footer {
            padding-bottom: max(var(--space-1), env(safe-area-inset-bottom));
        }
    }

    @media only screen and (min-width: 992px) {
        #toast-container {
            top: auto;
            right: auto;
            bottom: 10%;
            left: 7%;
            font-size: 1.04rem;
        }
    }