/*
    Application wide styling and overrides of Telerik and default styles to match UA branding

    UA Styles
  --blue: #0c234b;
  --red: #ab0520;
  --white: #fff;
  --bloom: #ef4056;
  --chili: #8b0015;
  --sky: #81d3eb;
  --oasis: #378dbd;
  --azurite: #1e5288;
  --midnight: #001c48;
  --cool-gray: #e2e9eb;
  --warm-gray: #f4ede5;
  --leaf: #70b865;
  --river: #007d84;
  --silver: #9eabae;
  --mesa: #a95c42;
  --ash: #403635;
  --sage: #4a634e;
  --black: #000;
  --success: #70b865;
  --info: #81d3eb;
  --warning: #f19e1f;
  --danger: #a95c42;
  --light: #dee2e6;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: proxima-nova, calibri, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

*/

:root {
    --bs-blue: #0C234B;
    --bs-primary: #0C234B;
    --kendo-color-primary: #0C234B !important;
    --kendo-color-on-primary: #ffffff !important;
    --kendo-color-primary-hover: #1E5288 !important;
    --kendo-color-primary-active: #001C48 !important;
}

a {
    color: #0C234B;
}

    a:hover {
        color: #1E5288;
    }


/* FmApplication Component ========================================================================================== */

.fm-application-menu-button {
    background-color: white;
    color: #0C234B;
    border: none;
    margin-left: 16px; /* Align the menu button with Telerik grid buttons per Drennen. TODO: Revisit when more pages are added because the button might look bad on other screens. */
}

@media (max-width: 576px) {
    .fm-application-menu-button {
        margin-left: 0;
    }
}


.fm-application-user-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

    /* Make the size of the user name match the logout button font */
    .fm-application-user-area .user-name {
        font-size: 115%;
    }

@media (max-width: 576px) {
    .fm-application-user-area .user-name {
        font-size: 100%;
    }
}


/* FmHeader Component =============================================================================================== */
@media (max-width: 576px) {
    .fm-header .header-row {
        flex-direction: column;
    }
}

.fm-header {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

    .fm-header .header-row {
        display: flex;
        padding-top: 10px;
    }

    .fm-header .header-item {
        width: 100%;
        display: flex;
        align-items: center;
    }

    .fm-header .title {
        justify-content: center;
        flex-direction: column;
        row-gap: 3px;
    }

        .fm-header .title .app-title,
        .fm-header .title .page-title {
            margin: 0;
            padding: 0;
            text-align: center; /* Hoizontally center wrapped text */
        }

    .fm-header .home-logo {
        display: inline-block;
    }

    .fm-header .home-logo {
        /* As defined by https://marcom.arizona.edu/brand-guidelines/logos for the horizontal logo */
        height: 55px;
        margin: 10px;
        display: inline-block;
    }

@media (max-width: 576px) {
    .fm-header .home-logo {
        /* As defined by https://marcom.arizona.edu/brand-guidelines/logos for the horizontal logo */
        height: 35px;
        margin: 8px;
    }
}

.fm-header .home-logo img {
    max-height: 100%;
    width: auto;
}

.fm-header .user-center {
    justify-content: flex-end;
    padding-right: 15px;
}


fm-header .ua-header {
    background-color: #AB0520; /* Arizona Red */
}


/* Alert Component ================================================================================================== */

.alert-success {
    color: #fff !important; /* White text color for contrast */
    background-color: #70b865; /* Green background for success messages */
    border-color: #70b865; /* Matching border color */
}

/* Error alert messages */
.alert-danger {
    color: #fff !important; /* White text color for contrast */
    background-color: #AB0520; /* Red background for error messages */
    border-color: #AB0520; /* Matching border color */
}



/* Blazor WASM loading Overrides ==================================================================================== */

/* Change the color of the loading progress circle to AZ red */
.loading-progress circle:last-child {
    stroke: #AB0520;
}

/* Format the logo under the loading progress circle to meet UA branding standards */
.loading-logo {
    height: 55px;
    display: flex;
    justify-content: center;
}


/* Telerik/Kendo Overrides ========================================================================================== */


/* Font Family ================================================================================ */
/*  Switch the font family choices back to those of UA bootstrap */
.k-body, .k-typography, .k-paragraph, .k-drag-clue, .k-list, .k-avatar-text, .k-avatar-initials, .k-chip, .k-button, .k-menu-bar, .k-menu, .k-toolbar, .k-tooltip, .k-input, .k-picker, .k-listbox, .k-progressbar, .k-slider, .k-calendar, .k-timeselector, .k-captcha, .k-colorpalette, .k-colorgradient, .k-coloreditor, .k-treeview, .k-rating, .k-dropzone-inner, .k-upload, .k-appbar, .k-fab, .k-actionsheet, .k-window, .k-drawer, .k-notification, .k-card, .k-popover, .k-bottom-nav, .k-breadcrumb, .k-pager, .k-stepper, .k-tabstrip, .k-wizard, .k-expander, .k-panelbar, .k-splitter, .k-dock-manager-splitter .k-pane-title, .k-dock-manager-unpinned-container .k-pane-title, .k-pane-wrapper, /*.k-pane-wrapper .k-pane,*/ .k-pane-wrapper .k-view, .k-grid, .k-listview, .k-spreadsheet, /*.k-spreadsheet-action-bar, */ /*.k-spreadsheet-view,*/ .k-pivotgrid, .k-filemanager, .k-taskboard, .k-editor, .k-imageeditor, .k-gantt, .k-scheduler, .k-chat, .k-mediaplayer, .k-timeline, .k-pdf-viewer, .k-scrollview, .k-chart, .k-sparkline, .k-stockchart, .k-treemap, .k-map, .k-orgchart {
    font-family: inherit;
}



/* Loading Spinner ============================================================================ */
.k-loader-primary {
    color: #0C234B; /* Arizona blue */
}

/* Drawer ===================================================================================== */
/* Don't highlight the selected item */
.k-drawer-item.k-selected {
    background-color: inherit;
    color: inherit;
}

    .k-drawer-item:hover,
    .k-drawer-item.k-hover,
    .k-drawer-item.k-selected:hover,
    .k-drawer-item.k-selected.k-hover {
        background-color: #0C234B; /* .btn-blue (Arizona Blue) */
        color: white;
    }


/* Primary Button =============================================================================== */
/*
    The Telerik themeing should not be used for button styling, AZ bootstrap button styles should be used.
    The Telerik theme primary button is overridden for convience since it is used by the default form submit button.
*/
.k-button-solid-primary {
    border-color: #0C234B !important;
    color: #ffffff !important;
    background-color: #0C234B !important;
}

    .k-button-solid-primary:hover, .k-button-solid-primary.k-hover {
        border-color: #1E5288 !important;
        color: #ffffff !important;
        background-color: #1E5288 !important; /* Azurite */
    }

    .k-button-solid-primary:focus, .k-button-solid-primary.k-focus {
        box-shadow: 0 0 0px 0.25rem #e2e9eb;
    }

/* This changes things like the pager page number buttons, the calendar today button, etc */
.k-button-flat-primary {
    color: #0C234B;
}

/* Dialog Close Buttons ======================================================================== */
.app-dialog-close-button,
.app-dialog-close-button.k-button,
.k-dialog .app-dialog-close-button,
.k-window .app-dialog-close-button {
    background-color: #0C234B !important;
    border-color: #0C234B !important;
    color: #fff !important;
    box-shadow: none !important;
}

    .app-dialog-close-button:hover,
    .app-dialog-close-button.k-button:hover,
    .k-dialog .app-dialog-close-button:hover,
    .k-window .app-dialog-close-button:hover {
        background-color: #1E5288 !important;
        border-color: #1E5288 !important;
        color: #fff !important;
    }

.k-dialog .k-dialog-titlebar-actions .k-button,
.k-dialog .k-window-titlebar-actions .k-button,
.k-window .k-window-titlebar-actions .k-button,
.k-dialog .k-dialog-titlebar-action,
.k-dialog .k-window-titlebar-action,
.k-window .k-window-titlebar-action {
    background-color: #0C234B !important;
    border-color: #0C234B !important;
    color: #fff !important;
    box-shadow: none !important;
}

    .k-dialog .k-dialog-titlebar-actions .k-button:hover,
    .k-dialog .k-window-titlebar-actions .k-button:hover,
    .k-window .k-window-titlebar-actions .k-button:hover,
    .k-dialog .k-dialog-titlebar-action:hover,
    .k-dialog .k-window-titlebar-action:hover,
    .k-window .k-window-titlebar-action:hover {
        background-color: #1E5288 !important;
        border-color: #1E5288 !important;
        color: #fff !important;
    }


/* Checkbox ===================================================================================== */
.k-checkbox:checked, .k-checkbox.k-checked {
    background-color: #133877; /* .btn-blue.active */
    border-color: #133877;
}

.k-checkbox:focus, .k-checkbox.k-focus {
    border-color: #0C234B; /* Arizona Blue */
    box-shadow: 0 0 0 0.05rem #0C234B;
    border: none;
}

.k-checkbox:checked:focus, .k-checkbox.k-checked.k-focus {
    border-color: #0C234B; /* Arizona Blue */
    box-shadow: 0 0 0 0.05rem #0C234B;
    border: none;
}

.k-checkbox:indeterminate, .k-checkbox.k-indeterminate {
    border-color: #fff;
    color: white;
    background-color: #0C234B;
}


/* Grid ========================================================================================= */
.k-grid-header .k-header,
.k-grid-header .k-header.k-sorted,
.k-grid-header .k-grid-header-menu,
.k-grid-header .k-sort-icon {
    color: white;
    background-color: #0C234B;
}

    .k-grid-header .k-grid-header-menu.k-active {
        background-color: white;
        color: #0C234B;
    }

.k-grid-md .k-grid-header .k-grid-header-menu {
    height: calc(1.5em + 0.75rem); /* Remove +2px in the calculation that pushed the menu out of vertical center. */
}

/* Tabs ========================================================================================= */
/* Custom tab colors */
.k-tabstrip-items-wrapper .k-item {
    color: black;
}

    .k-tabstrip-items-wrapper .k-item:active,
    .k-tabstrip-items-wrapper .k-item.k-active,
    .k-tabstrip-items-wrapper .k-item.k-selected {
        color: #0c234b; /* Arizona Blue */
        font-weight: bold;
    }
/* Make the Telerik bootstrap tabs look like the Telerik material tabs */
.k-tabstrip-items {
    text-transform: uppercase;
}

.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.k-tabstrip-items .k-item {
    border: 0px solid transparent;
}

.k-tabstrip-items-wrapper .k-item:hover,
.k-tabstrip-items-wrapper .k-item.k-hover {
    color: rgba(0, 0, 0, 0.87);
    background-color: rgba(0, 0, 0, 0.04);
}

.k-tabstrip-items-wrapper .k-item:focus,
.k-tabstrip-items-wrapper .k-item.k-focus {
    box-shadow: none;
}

.k-tabstrip-items-wrapper .k-item.k-active::after {
    border-color: #0C234B; /* Arizona Blue */
}

.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item::after {
    border-bottom-width: 2px;
}

.k-tabstrip-items-wrapper .k-item.k-active::after {
    display: block;
}

.k-tabstrip-items-wrapper .k-item::after {
    content: "";
    border-width: 0;
    border-style: solid;
    display: none;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}

.k-tabstrip-content, .k-tabstrip > .k-content {
    background-color: transparent;
}

.k-tabstrip-top > .k-content,
.k-tabstrip-top > .k-tabstrip-content {
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-width: 0 !important;
}

.k-tabstrip-content, .k-tabstrip > .k-content {
    border-width: 0px;
}


/* Form Group =================================================================================== */
.k-form .k-form-legend {
    text-transform: capitalize;
    font-size: 20px;
}

.k-form-md .k-form-field, .k-form-md .k-form-buttons {
    margin-top: 1.5rem;
}

/* Switch ======================================================================================= */

/* Make the switch track AZ blue when on */
.k-switch-on .k-switch-track {
    border-color: #0c234b;
    background-color: #0c234b;
}


/* Calendar ===================================================================================== */
.k-calendar .k-calendar-td.k-selected .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-selected .k-link {
    border-color: #0c234b;
    color: #ffffff;
    background-color: #0c234b;
}

.k-calendar .k-calendar-view .k-today .k-calendar-cell-inner,
.k-calendar .k-calendar-view .k-today .k-link {
    box-shadow: inset 0 0 0 1px #0c234b;
}

.k-calendar .k-calendar-td.k-selected:hover .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-selected:hover .k-link,
.k-calendar .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-selected.k-hover .k-link {
    border-color: #0c234b;
    color: #ffffff;
    background-color: #1e5288;
}


/* Lists ======================================================================================== */
.k-list-item.k-selected, .k-selected.k-list-optionlabel {
    color: #ffffff;
    background-color: #0c234b;
}

    .k-list-item.k-selected:hover,
    .k-selected.k-list-optionlabel:hover,
    .k-list-item.k-selected.k-hover,
    .k-selected.k-hover.k-list-optionlabel {
        color: #ffffff;
        background-color: #1e5288;
    }

/* Input focus highlight ======================================================================== */
/* Change the default blues to greys */
.k-switch-off:focus .k-switch-track,
.k-switch-off.k-focus .k-switch-track,
.k-switch-on:focus .k-switch-track,
.k-switch-on.k-focus .k-switch-track {
    border-color: #9eabae;
    outline: 0.25rem solid #e2e9eb;
}

.k-input-solid:focus-within {
    border-color: #9eabae;
    box-shadow: 0 0 0 0.25rem #e2e9eb;
}

.k-input-solid:focus, .k-input-solid.k-focus {
    border-color: #9eabae;
    box-shadow: 0 0 0 0.25rem #e2e9eb;
}


/* Input focus highlight for valid form items ==================================================== */
/* Remove the green border around valid form items */
.k-input-solid.k-valid:focus-within,
.k-input-solid.k-valid,
.k-picker-solid.k-valid {
    border-color: #9eabae;
}
    /* Remove the shadow around valid form items with focus */
    .k-input-solid.k-valid:focus-within,
    .k-picker-solid.k-valid:focus-within {
        box-shadow: 0 0 0 0.25rem #e2e9eb;
    }


/* Label reduced margin ======================================================================== */

label {
    display: inline-block;
    margin-bottom: 0rem;
}


/* Other ======================================================================================== */

/* Success alert messages */

/* Styles for Buttons */

/* Hover state for primary solid buttons */
/*.k-button-solid-primary:hover, .k-button-solid-primary.k-hover {
    border-color: #0C234B !important;*/ /* Dark blue border color */
/*background-color: #0C234B !important;*/ /* Dark blue background color */
/*}*/

/* Focus state for primary solid buttons */
/*.k-button-solid-primary:focus, .k-button-solid-primary.k-focus {
    box-shadow: 0 0 0px 0.0rem rgba(13, 110, 253, 0.5);*/ /* Subtle focus indicator */
/*}*/

/* Styles for Table Headers */

/* Custom header styling for specific table headers */
/*.k-header.k-hierarchy-cell.k-table-th {
    background-color: #0C234B !important;*/ /* Dark blue background */
/*color: white !important;*/ /* White text for contrast */
/*}*/

/*Button Color for soild*/
.k-button-solid-error {
    border-color: #AB0520; /* UofA Color*/
    color: white;
    background-color: #AB0520;
}

/* Focus state for primary solid buttons */
/*.k-button-solid-error:focus, .k-button-solid-primary.k-focus {
        box-shadow: 0 0 0px 0.0rem rgba(13, 110, 253, 0.5);*/ /* Subtle focus indicator */
/*}*/