/*  Telerik css classes start with "k-". If the style in the class has the !important flag(s),
    it may start with "!k-". */

/*  If we need to override their default style, in the markup, wrap the control in a class we have control over 
    (i.e. "attendee-panelbar") then modify as needed.
*/


/* Attendee Search TextBox */
.attendee-search .k-input-inner {
    padding: 15px !important;
}


/* Attendee Listing Panelbar */
.attendee-panelbar .k-selected,
.attendee-panelbar .k-link {
    background-color: inherit !important;
    color: black !important;
}

.attendee-panelbar .k-focus {
    box-shadow: none !important;
}

.attendee-panelbar .k-content {
    background-color: transparent;
}

.attendee-panelbar > .k-panelbar-header,
.attendee-panelbar > .k-item {
    border-color: transparent !important;
}

.attendee-panelbar .k-svg-icon {
    min-width: 28px;
    min-height: 28px;
}

.attendee-panelbar .k-animation-container {
    z-index: unset;
}

.attendee-panelbar.k-panelbar {
    border: none;
    background-color: transparent;
}

@media (prefers-color-scheme: dark) {

    .attendee-panelbar .k-svg-icon {
        color: rgb(8 146 167) !important;
        min-width: 28px;
        min-height: 28px;
    }
}

.attendee-panelbar .k-disabled {
    opacity: 1;
}


/* Registration Card */
.registration-card .k-card-header {
    border-bottom-width: 0;
}

.registration-card .k-button {
    color: rgb(7 132 151) !important;
}

.registration-card .k-card {
    color: rgb(0 0 0);
}

.registration-card .k-animation-container {
    z-index: 10;
}

@media (prefers-color-scheme: dark) {

    .registration-card .k-card {
        background-color: rgb(14 16 17);
        border-color: rgb(54 63 64);
        color: rgb(255 255 255);
    }
}

/* Date Picker */
.expense-date-picker.k-input-lg .k-input-inner{
    padding: 1rem;
}

.expense-date-picker.k-rounded-md {
    border-radius: 6px;
}

.expense-date-picker.k-input-outline.k-focus {
    border-color: transparent;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(10 183 209 / var(--tw-ring-opacity));
}

.expense-date-picker .k-input-button {
    font-size: 22px;
    color: rgb(8 146 167) !important;
    width: calc(1.4285714286em + 28px);
}

.expense-date-picker .k-svg-icon {
    width: 22px;
}

.expense-date-picker .k-button-lg.k-icon-button .k-button-icon.k-svg-icon > svg {
    height: 22px;
}

.expense-date-picker .k-button-outline-base {
    border: none;
}

.expense-date-picker .k-button-outline-base:hover {
    color: rgb(8 146 167);
}

@media (prefers-color-scheme: light) {
    .expense-date-picker .k-input-inner {
        background-color: #FFFFFF;
    }

    .expense-date-picker.k-input-outline > .k-input-button {
        border: none;
        background-color: #FFFFFF;
    }
}

@media (prefers-color-scheme: dark) {

    .expense-date-picker.k-input-outline {
        border-color: rgb(136 153 155);
    }

    .expense-date-picker .k-button-outline-base {
        background-color: rgb(54 63 64 / var(--tw-bg-opacity)) !important;
    }

    .expense-date-picker .k-input-inner {
        background-color: rgb(54 63 64 / var(--tw-bg-opacity));
    }
    .expense-date-picker-popup .k-calendar {
        border: 1px solid rgb(8 146 167) !important;
        border-radius: 6px;
        background-color: rgb(54 63 64);
    }

    .expense-date-picker-popup .k-calendar .k-calendar-th {
        color: #888888;
    }

    .expense-date-picker-popup .k-button-flat-base {
        color: rgb(8 146 167);
    }

    .expense-date-picker-popup .k-calendar-td .k-link {
        color: #DDDDDD;
    }

    .expense-date-picker-popup .k-calendar-td.k-other-month .k-link {
        color: #AAAAAA;
    }
}

/* Text Input */
.expense-text-input.k-input-lg .k-input-inner {
    padding: 1rem;
}

.expense-text-input.k-rounded-md {
    border-radius: 6px;
}

.expense-text-input.k-input-outline.k-focus {
    border-color: transparent;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(10 183 209 / var(--tw-ring-opacity));
}

.expense-text-input .k-input-inner {
    background-color: #FFFFFF;
}

.expense-text-input.expense-numeric-input .k-input-inner {
    text-align: right;
}

@media (prefers-color-scheme: dark) {

    .expense-text-input .k-input-inner {
        background-color: rgb(54 63 64 / var(--tw-bg-opacity));
        color: #FFFFFF;
    }

    .expense-text-input.k-input-outline {
        border-color: rgb(136 153 155);
    }
}

/* Animation Related */
.slide-up-modal .k-animation-container {
    z-index: 10;
}

.inline-animation {
    padding: 1px;
}

.k-form-hint {
    display: block;
    margin-top: 1em;
}

/* Upload File */
.k-upload {
    width: 100%;
}

    .k-upload .k-file-validation-message {
        color: #f87171 !important;
    }

    .k-upload .k-button-solid-base {
        color: #FFF !important;
        background-color: rgb(7 132 151) !important;
    }

    .k-upload .k-dropzone .k-dropzone-hint {
        display: none;
    }


/* Window */
.attend-md.k-window {
    border-radius: 0.5rem;
}

.attend-md .k-window-titlebar {
    border-radius: 0.5rem 0.5rem 0 0;
    border-bottom: none;
    text-wrap: unset;
}

@media (prefers-color-scheme: light) {
    .attend-md .k-window-titlebar {
        background-color: #FFFFFF;
    }
}

.attend-sm.k-window {
    position: fixed;
}

.attend-sm .k-window-titlebar {
    padding: 0;
}

.attend-sm.k-window {
    z-index: 51 !important;
}

.attend-sm .validation-message,
.attend-md .validation-message {
    color: red;
    scroll-margin-top: 100px;
}

.attend-sm .k-input-outline.k-invalid,
.attend-md .k-input-outline.k-invalid {
    border-color: rgba(66, 66, 66, 0.5);
}

/* LoaderContainer */

/* animation */
.attend-loader-container-colors .k-loader {
    color: rgb(8 146 167);
}

/* text */
.attend-loader-container-colors .k-loader-container-label {
    color: rgb(8 146 167);
    font-weight: bold;
}

/* User Attend Settings */
.app-notifications.k-switch-on .k-switch-track  {
    border-color: rgb(8 146 167);
    background-color: rgb(8 146 167);
    border: none;
}