/* 
    Denali Data Systems Inc 
    Los Alamos National Lab - Field Intelligence Element - Web Application Specific Styles
    https://denalidatasystems.atlassian.net/wiki/spaces/LSCI/pages/2460221540/SCI+Global+UI+UX+Design
*/


/*
******************************

    CLASS NAMING

    Class Name Prefixes

    ".k-" Kendo (Telerik) CSS Library
    ".l-" LANL In-house Custom CSS Library
    All other class names are part of the Bootstrap CSS Library

    LANL CSS class naming is based on the BEM (block, element, modifier) methodology.

    .l-block {} 			<-- Represents the higher level of an abstraction or component.
    .l-block__element {}	<-- Represents a descendent of .block that helps form .block as a whole.
    .l-block--modifier {}	<-- Represents a different state or version of .block.

    Sample CSS
        
    .l-navbar {}
    .l-navbar--horizontal {}
    .l-navbar__item {}
    .l-navbar__link {}
    
    Sample HTML
    
    <div class="l-navbar l-navbar--horizontal">
        <div class="l-navbar__item">
            <a href="URL" class="l-navbar__link">Nav Link 1</a>
        </div>
        <div class="l-navbar__item">
            <a href="URL" class="l-navbar__link">Nav Link 2</a>
        </div>
        <div class="l-navbar__item">
            <a href="URL" class="l-navbar__link">Nav Link 2</a>
        </div>
    </div>

    BEM Resources
 
    http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
    https://css-tricks.com/bem-101/

******************************
*/



/*
******************************

    TYPOGRAPHY

    LANL Style Guide Fonts 
    https://denalidatasystems.atlassian.net/wiki/spaces/LSCI/pages/2460221540/SCI+Global+UI+UX+Design#LANL-Standard-Summary

    Required Fonts:
    - Acumin Black
    - Acumin Bold
    - Source Sans Bold
    - Source Sans Semigold
    - Source Sans Regular

*/

@font-face {
    font-family: 'Acumin Pro';
    src: url('/Content/fonts/AcuminPro-Bold.woff2') format('woff2'), url('/Content/fonts/AcuminPro-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Acumin Pro';
    src: url('/Content/fonts/AcuminPro-Regular.woff2') format('woff2'), url('/Content/fonts/AcuminPro-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/Content/fonts/SourceSansPro-ExtraLight.woff2') format('woff2'), url('Content/fonts/SourceSansPro-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/Content/fonts/SourceSansPro-Black.woff2') format('woff2'), url('/Content/fonts/SourceSansPro-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/Content/fonts/SourceSansPro-Bold.woff2') format('woff2'), url('/Content/fonts/SourceSansPro-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/Content/fonts/SourceSansPro-SemiBold.woff2') format('woff2'), url('/Content/fonts/SourceSansPro-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/Content/fonts/SourceSansPro-Light.woff2') format('woff2'), url('/Content/fonts/SourceSansPro-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/Content/fonts/SourceSansPro-Regular.woff2') format('woff2'), url('/Content/fonts/SourceSansPro-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'lanl-icons';
    src: url('/Content/fonts/lanl-icons.eot?e5r6hp');
    src: url('/Content/fonts/lanl-icons.eot?e5r6hp#iefix') format('embedded-opentype'), url('/Content/fonts/lanl-icons.ttf?e5r6hp') format('truetype'), url('/Content/fonts/lanl-icons.woff?e5r6hp') format('woff'), url('/Content/fonts/lanl-icons.svg?e5r6hp#lanl-icons') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'lanl-icons' !important;
    speak: none;
    font-size: inherit; /*1rem;*/
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


body {
    font-family: var(--fontFamilyBody);
    color: var(--monoTextBlack);
    line-height: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

h1 {
    font-size: 2rem;
    margin-bottom: 1.25rem;
}

p {
    line-height: 150%;
    margin-bottom: 1.25rem;
}

.l-sub-text {
    font-size: 0.75rem;
    line-height: 120%;
    font-weight: normal;
}

.l-normal-text {
    font-weight: normal !important;
}

.l-email {
    color: var(--scBlue);
    text-decoration: underline;
}

.l-signature {
    font-family: brush script mt, cursive;
}

.l-page-title {
    font: 700 1.75rem/100% var(--fontFamilyHeadings);
    color: var(--monoTextBlack);
    margin: 0;
}

.l-section-heading,
.l-section-title,
.l-card-title {
    font: 700 1.375rem/100% var(--fontFamilyHeadings);
    color: var(--monoTextBlack);
    margin: 0;
}

.l-numbered-list li {
    margin-bottom: 10px;
}

/* END - TYPOGRAPHY
*******************************/




/* 
    LANL Style Guide Colors (DRY CSS: Don’t Repeat Your CSS)
    https://denalidatasystems.atlassian.net/wiki/spaces/LSCI/pages/2460221540/SCI+Global+UI+UX+Design#LANL-Standard-Summary
*/

:root {
    --pcUltramarine: #000F7E;
    --scBlue: #0070C1;
    --scBlueTints: #3296DC;
    --monoTextBlack: #0C0D17;
    --monoTextWhite: #FFFFFF;
    --monoDarkGrey: #555962;
    --monoLightGrey: #CDD1E2;
    --monoBackgroundAccent: #F1EFF7;
    --accentAmber: #FDAA85;
    --accentBlue: #69C3FF;
    --ultramarineLight: #000F7E;
    --ultramarineDark: #090238;
    --statusDefault: #0070C1;
    --statusSuccess: #00AA64;
    --statusAttention: #FFFF00;
    --statusWarning: #FFA500;
    --statusUrgent: #EB0F1E;
    --colorGray200: #CCCCCC;
    --colorGray600: #666666;
    --colorRowHover: #F3F3F3;
    --dropShadowDefault: 0px 2px 4px rgba(0, 0, 0, 0.3);
    --dropShadowSm: 1px 2px 2px rgba(0, 0, 0, 0.35);
    --dropShadowMed: 2px 4px 4px rgba(0, 0, 0, 0.35);
    --dropShadowLg: 4px 8px 8px rgba(0, 0, 0, 0.35);
    --fontFamilyHeadings: "Acumin Pro", sans-serif;
    --fontFamilyBody: "Source Sans Pro", sans-serif;
    --borderRadiusSm: 2px;
    --borderRadiusMed: 6px;
    --borderRadiusLg: 12px;
}

/* 
    LANL Style Guide Heading/Fonts (DRY CSS: Don’t Repeat Your CSS)
    https://denalidatasystems.atlassian.net/wiki/spaces/LSCI/pages/2460221540/SCI+Global+UI+UX+Design#LANL-Standard-Summary
*/



/* 
    Site Specific Styles 
    https://denalidatasystems.atlassian.net/wiki/spaces/LSCI/pages/2460221540/SCI+Global+UI+UX+Design

    Using BEM naming convention: [block]__[element]--[modifier]
    https://getbem.com/naming/
*/


/*
******************************
    PAGE LEVEL ELEMENTS & STYLES
******************************
*/

html {
    height: 100%;
}

body {
    padding-top: 150px;
    overflow-y: scroll; /* Always show vertical scroll bar to prevent screen content widths from jumping between screens */
}

.page,
.l-page {
    background-color: #f2f2f2;
}

.page--notification,
.l-page--notification {
    background-color: var(--ultramarineDark); /* Fallback Color */
    background: url(/Content/images/lanl-watermark.png) bottom right no-repeat, linear-gradient(to bottom, var(--ultramarineDark), var(--ultramarineLight));
}

.l-global-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
}

.page__header,
.l-page__header {
    background-color: var(--ultramarineDark); /* Fallback Color */
    background-image: linear-gradient(to right, var(--ultramarineDark), var(--ultramarineLight));
    color: #fff;
}

.page-header__content,
.l-page-header__content {
    padding: 0.625rem 4.375rem;
}

.page-header__system,
.l-page-header__system {
    font-family: 'Acumin Pro';
    font-weight: bold;
    font-size: 1.5rem;
}

.page-header__role,
.l-page-header__role {
    font-family: 'Source Sans Pro';
    font-weight: normal;
    font-size: 0.75rem;
}

.page__nav,
.l-page__nav {
    background-color: #fff;
}

.page__main,
.l-page__main {
    padding-bottom: 30px;
}

.page-main__content,
.l-page-main__content {
    position: relative;
    padding: 0;
}

.page__footer,
.l-page__footer {
}

.page-footer__content,
.l-page-footer__content {
    font: 0.75rem/120% var(--fontFamilyBody);
    color: var(--monoDarkGrey);
}

.page-footer__privacy,
.l-page-footer__privacy {
    color: var(--monoDarkGrey);
    padding: 1.875rem 4.375rem;
}

.page-footer__app,
.l-page-footer__app {
    background-color: #000;
    color: #fff;
    padding: 1.25rem 4.375rem;
}


.l-gutter {
    border-top: solid 1px #cecece;
    border-bottom: solid 1px #fff;
    height: 3px;
}

/* END - PAGE LEVEL ELEMENTS & STYLES
*******************************/



/*
******************************
    ICONS
******************************
*/

.l-icon {
    text-align: center;
}

.l-icon--lg {
    font-size: 60px;
}

.l-icon-style--success {
    color: var(--statusSuccess);
}

.l-icon-style--warning {
    color: var(--statusWarning);
}

.l-icon-style--urgent {
    color: var(--statusUrgent);
}

.icon-box-arrow-up-right:before {
    content: "\e900";
}

.icon-chat-left-text-fill:before {
    content: "\e901";
}

.icon-check-circle-fill:before {
    content: "\e902";
}

.icon-clock-fill:before {
    content: "\e903";
}

.icon-exclamation-circle-fill:before {
    content: "\e904";
}

.icon-info-circle-fill:before {
    content: "\e905";
}

.icon-pencil-fill:before {
    content: "\e906";
    display: inline-block;
}

.icon-person-circle:before {
    content: "\e907";
}

.icon-printer-fill:before {
    content: "\e908";
}

.icon-question-circle-fill:before {
    content: "\e909";
}

.icon-search:before {
    content: "\e90a";
}

.icon-trash3-fill:before {
    content: "\e90b";
}

/*** END - ICONS ****/



/*
******************************
    Bootstrap
******************************
*/

/* Modals */

.modal-content {
    border-radius: var(--borderRadiusLg);
    overflow: hidden;
    box-shadow: var(--dropShadowLg);
}

.modal-header,
.modal-body {
    border-radius: 0;
}

.modal-header {
    font-family: "Source Sans Pro", sans-serif;
    padding: 20px 40px;
}

.modal-title {
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 100%;
}

.modal-body {
    padding: 20px 40px;
}

.modal--notification {
    display: block;
}

    .modal--notification .modal-header {
        color: #fff;
        background-color: var(--scBlue);
    }


/*
******************************
    Telerik / Kendo UI
    https://docs.telerik.com/kendo-ui/styles-and-layout/components-rendering-overview
******************************
*/

/* k-dialog */
.k-overlay {
    background-color: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 1 !important;
}

.k-dialog {
    overflow: hidden;
    box-shadow: var(--dropShadowLg);
}

.k-window.k-dialog {
    border: solid 1px var(--colorGray200);
}

.l-dialog--enlarge {
    height: 80%;
    width: 80%;
    max-width: 1000px;
}


.l-doa-msg {
    display: none;
}


/*
******************************
    STATUS BARS
******************************
*/
.l-status-bar,
.l-status-bar__deadline {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.l-status-bar {
    padding: 0.1875rem 0.1875rem 0.1875rem 1.875rem;
    border: solid 1px var(--statusWarning);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    min-height: 3.625rem;
    margin-bottom: 1.25rem;
    background-color: #fff;
}

    /* Colored Status Bar: Visual element to help convey status */
    .l-status-bar::before {
        content: "";
        width: 12px;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 9;
    }

    /* Icon: Graphically conveys status */
    .l-status-bar .l-icon {
        display: inline-block;
        position: relative;
        top: 2px;
        margin-right: 0.25rem;
        font-size: 1.25rem;
    }

/* Status: Text indicating status */
.l-status-bar__status {
    font-size: 1.125rem;
    line-height: 100%;
    font-weight: bold;
    font-family: var(--fontFamilyHeadings);
    padding: 0.875rem 0;
}

/* Reason: Text indicating reason for status (e.g. When a SCI Clearance is rejected) */
.l-status-bar__reason {
    font-size: 1rem;
    font-weight: 400;
    margin: 0.3125rem 0 0 1.5rem;
}

/* Msg (Message): Text displayed to Non-SCIF Personnel in status bar when the status is "Procesing" */
.l-status-bar__msg {
    font-size: 0.75rem;
    font-weight: 400;
    margin: 0.3125rem 0 0 1.5rem;
}

/* Deadline: Indicates days remaining to complete a task (e.g. submit a request) */
.l-status-bar__deadline {
    padding: 0.375rem 1rem 0.375rem 0.375rem;
    border-radius: 8px;
}

.l-status--urgent .l-status-bar__deadline {
    background-color: rgba(235,15,30,0.30);
}

.l-status--warning .l-status-bar__deadline {
    background-color: rgba(255,165,0,0.30);
}

.l-deadline__count {
    padding: 0.625rem 0.75rem;
    font-weight: 700;
    font-size: 1.125rem;
    font-family: var(--fontFamilyBody);
    line-height: 100%;
    background-color: rgba(255,255,255,0.85);
    border-radius: 4px;
    margin-right: 0.625rem;
}


/* Status Modifier: Success */

.l-status--success {
    border-color: var(--statusSuccess);
}

.l-status--success::before {
    background-color: var(--statusSuccess);
}

.l-status--success .l-icon {
    color: var(--statusSuccess);
}


/* Status Modifier: Warning */

.l-status--warning {
    border-color: var(--statusWarning);
}

.l-status--warning::before {
    background-color: var(--statusWarning);
}

.l-status--warning .l-icon {
    color: var(--statusWarning);
}


/* Status Modifier: Urgent */

.l-status--urgent {
    border-color: var(--statusUrgent);
}

.l-status--urgent::before {
    background-color: var(--statusUrgent);
}

.l-status--urgent .l-icon {
    color: var(--statusUrgent);
}

/* END - STATUS BARS
*******************************/



/*
******************************
    STATS
******************************
*/

.l-stat-bar {
    display: flex;
    align-items: center;
}

.l-stat-bar__item {
    margin-right: 20px;
}

.l-stat-bar__item:last-child {
    margin-left: auto;
}

.l-stat {
    display: flex;
    padding: 5px 20px 5px 5px;
    margin: 5px 0;
    align-items: center;
    border-radius: 4px;
    border: solid 1px transparent;
    background-color: transparent;
    text-decoration: none;
    width: 100%;
}

.l-stat--buttons .l-stat:hover {
    background-color: var(--colorRowHover);
    border: solid 1px #dedede;
}

.l-stat__count {
    background-color: var(--scBlue);
    color: #fff;
    text-align: center;
    padding: 6px 10px;
    min-width: 70px;
    border-radius: 4px;
    margin-right: 20px;
    font-weight: 700;
}

.l-stat__label {
    width: 100%;
    color: var(--monoTextBlack);
    line-height: 100%;
    text-align: left;
}

.l-stat__link {
    color: var(--scBlue);
    text-decoration: underline;
}

/* END - STATS
*******************************/


/*
******************************
    CARDS
******************************
*/

.k-card {
    border: solid 1px var(--colorGray200);
    border-radius: 12px;
    margin-bottom: 30px;
    padding: 30px;
}

/* Set card to fill available vertical space. */
.l-v-fill {
    height: 100%;
}
/*
    Card Header
*/
.k-card-header {
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 0.625rem 0;
    background-color: #fff;
}

.k-card-title {
    font-family: var(--fontFamilyHeadings);
    font-weight: bold;
    font-size: 1.375rem;
    color: var(--monoTextBlack);
}

/* Actions: Action buttons displayed in card title bar */
.k-card-actions {
    padding: 5px;
    /*padding: 0 1.875rem 1.25rem 1.875rem;*/
}

.k-card-header .k-card-actions {
    padding: 0;
}


/*
    Card Body
*/

.k-card-body {
    /*padding: 5px 0 0 0;*/
    padding: 0;
    background-color: #fff;
}


/*
    Card Colored Virtical Status Bar
*/

.k-card--urgent::before,
.k-card--success::before {
    content: "";
    width: 12px;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 9;
}

.k-card--urgent::before {
    background-color: var(--statusUrgent)
}

.k-card--success::before {
    background-color: var(--statusSuccess);
}

/* END - CARDS
*******************************/




/* K-Windows */

.k-window {
    font-family: "Source Sans Pro", sans-serif;
    border: solid 1px #fff;
}

.k-window-titlebar {
    font: 700 1.8rem/100% var(--fontFamilyHeadings);
    color: #fff;
    border: none;
    padding: 20px 30px;
}

.k-window-content,
.k-window-actions {
    border: none;
    padding: 20px 30px;
}


/* K-Buttons */
/*
    Telerik button class name conversion:

    k-button-solid-primary (Solid/Primary) = LANL Primary Button
    k-button-solid-base (Solid/Secondary) = LANL Secondary Button
    k-button-flat-primary (Flat/Primary) = LANL Link Button

    k-button-outline-primary (Outline/Primary) = LANL Small Primary Button
    k-button-outline-base (Outline/Secondary) = LANL Small Secondary Button
    k-button-flat-base (Flat/Secondary) = LANL Small Link Button
*/

.k-button {
    font: 400 1rem/100% var(--fontFamilyHeadings);
    padding: 0.625rem 1.25rem;
    border-radius: 1.25rem;
}

.k-dropdownlist .k-button {
    border-radius: 0;
}

.k-dialog-buttongroup {
    border: none;
}

/* Overide Kendo styling for dropdown input elements */
.k-list-ul {
    line-height: 18px;
}

/* Overide Kendo styling for dropdown input elements */
.k-list-md .k-list-item {
    padding-block: 0.5rem;
}


.k-grid.k-grid-md .k-table-tbody .k-master-row.k-table-row .k-table-td,
.k-grid.k-grid-md .k-table .k-table-tbody .k-master-row.k-table-row.k-alt.k-table-alt-row > td {
    vertical-align: top;
    border-top: solid 1px #D9D9D9;
}

.k-table-td .l-table-td-a,
.k-table-td .l-table-td-a:hover {
    text-decoration: underline;
    color: var(--scBlue);
}

/* Overriding Telerik Styles */
.k-grid a {
    text-decoration: underline;
    color: var(--scBlue);
}



/*
******************************

    PAGE HEADER

    Class Summary

    .l-page-header__site        <-- Parent wrapper for site content
    .l-site__logo               <-- Site logo
    .l-site__text               <-- Parent wrapper for text elements
    .l-site__department         <-- Department name (text)
    .l-site_portal              <-- Portal identifier (text)

    .l-page-header__toolbar     <-- Parent wrapper for toolbar content
    .l-toolbar__item
    .l-toolbar__search          <-- Search button
    .l-toolbar__user            <-- Parent wrapper for user elements
    .l-user__avatar             <-- User avatar image
    .l-user__text               <-- Parent wrapper for user text
    .l-user__name               <-- User name
    .l-user__id                 <-- User identification

.l-user__menu

******************************
*/
.l-site__department,
.l-user__name {
    font: 700 1.5rem/100% var(--fontFamilyHeadings);
}

.l-site__portal,
.l-user__id {
    font: 400 0.75rem/100% var(--fontFamilyBody);
}



.l-user__menu {
    min-width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999;
}

.l-user__avatar {
    margin-right: 10px;
}

.l-user__name {
    font-size: 1rem;
}


/* Page Header Site Element (logo, department, and portal) */

.l-page-header__site {
    display: flex;
    align-items: center;
}

.l-site__logo {
    margin-right: 10px;
}


.l-impersonation-notification {
    color: #000;
    text-align: center;
    background-color: var(--statusWarning);
    padding: 10px;
    font-size: 12px;
    display:none;
    z-index: 12;
}

    .l-impersonation-notification a {
        color: black;
    }




.l-user__menu {
    display: none;
}



/*** END - PAGE HEADER ****/


/*
******************************

    MISC ELEMENTS

******************************
*/

.l-screen-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1.25rem;
}

.l-screen-heading__title {
}

.l-screen-heading__extras {
}

.l-page-title {
}

.l-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

/*** END - MISC ELEMENTS ****/


/*
******************************

    MESSAGE BOXES

******************************
*/

/*
    Form Message Boxes
    Used to display error and other form related messaging.
*/

/*  Defaults */

.l-msg-box {
    display: none;
    margin-top: 0.5rem;
    flex-basis: 100%;
}

    .l-msg-box p {
        margin: 0;
    }

    .l-msg-box li {
        margin-bottom: .5rem;
    }

/*
    Modifier: Error State
    Used for message boxes displaying errors (E.g. "Information Requred")
*/

.l-msg-box--error {
    padding: .625rem 1.25rem;
    border-radius: 4px;
    box-shadow: var(--dropShadowDefault);
    border: solid 1px var(--statusUrgent);
    background-color: #F1D0D2;
}

/*
    Inline Message Box
    Used for message boxes appearing inline with other elements.
    Example: Z Number field displayed on the nominee screen. The
    input and search button are inline, if an error occurs, the 
    message box is displayed inline with the other elements.
*/

.k-form-field.l-horizontal--all-inline .l-msg-box {
    padding: 0.3125rem 1rem;
    flex-basis: auto;
    margin: 0 0 0 20px;
}

/* ****** OLD MESSAGE BOX STYLES ****** */

.l-form-messagebox {
    display: none;
    padding: .625rem 1.25rem;
    margin-top: 0.5rem;
    border-radius: 4px;
    box-shadow: var(--dropShadowDefault);
    flex-basis: 100%;
}

.l-form-messagebox {
    border: solid 1px var(--statusUrgent);
    background-color: #F1D0D2;
}

    .l-form-messagebox p {
        margin: 0;
    }

    .l-form-messagebox li {
        margin-bottom: .5rem;
    }
/*
    Modifier: Compact Sizing
    Used for message boxes appearing inline with other elements.
    Example: Z Number field displayed on the nominee screen. The
    input and search button are inline, if an error occurs, the 
    message box is displayed inline with the other elements.
*/

.l-form-messagebox--compact {
    padding: 0.3125rem 1rem;
    margin-bottom: 0;
}

/*  Modifier: Error Styling */
.cccl-form-msg-box--error {
    border: solid 1px var(--statusUrgent);
    background-color: #F1D0D2;
}

/*** END - Message Boxes ****/


/*
******************************

    TABS

******************************
*/

.k-tabstrip-content,
.k-tabstrip > .k-content {
    padding-block: 30px;
    /*padding-inline: 30px;*/
}

.l-tabbed-content-area {
    background-color: #fff;
    border-top: solid 1px #dee2e6;
    margin-top: 50px;
}

    .l-tabbed-content-area .k-tabstrip-top {
        position: relative;
        top: -50px;
    }

    .l-tabbed-content-area .k-tabstrip-content {
        border: none;
    }

/*** END - TABS ****/


/*
******************************

TABLES

******************************
*/

/**
 * Defaults
 */

.l-table {
    width: 100%;
}


/**
 * Modifiers
 */

/* Table lists are used to display list of items (e.g. list of SCI requests or training courses)  */

.l-table--list {
}

    .l-table--list tr {
        border-bottom: solid 1px #e8e8e8;
    }

    .l-table--list th,
    .l-table--list td {
        padding: 10px 8px;
        vertical-align: top;
        line-height: 1.5rem;
    }

    .l-table--list th {
        font-weight: 700;
    }

    .l-table--list tr:hover td {
        background-color: #f2f2f2;
    }

    .l-table--list .l-table__actions {
        white-space: nowrap;
    }

    .l-table--list .l-status-icon {
        width: 16px;
    }





/** OLD **/
.l-form-list {
    width: 100%;
    margin-bottom: 10px; /* Adds white space between list and bottom buttons */
}

    .l-form-list th,
    .l-form-list td {
        padding: 4px;
    }

    .l-form-list .k-form-field {
        margin: 0;
    }

    .l-form-list .l-form-messagebox {
        margin: 0 0 0.5rem;
    }


.l-table-list {
    width: 100%;
}

    .l-table-list tr {
        border-bottom: solid 1px #e8e8e8;
    }

        .l-table-list tr:hover {
            background-color: #f2f2f2;
            padding: 10px;
        }

    .l-table-list th,
    .l-table-list td {
        padding: 10px 8px;
    }

.l-table-actions {
    white-space: nowrap;
    width: 1%;
}

    .l-table-actions a {
        text-decoration: none;
        padding: 0 5px;
        color: var(--scBlue);
    }

.l-table-actions__icon {
    padding: 2px;
    border-radius: 4px;
    display: inline-block;
    border: solid 1px transparent
}

.l-table-actions a:hover {
    background-color: #fff;
    border-color: silver;
}

.l-tooltip {
    position: relative;
    display: inline-block;
}

    .l-tooltip .l-tooltiptext {
        visibility: hidden;
        width: 60px;
        bottom: 110%;
        left: 50%;
        margin-left: -30px; /* Use half of the width to center the tooltip */
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 3px 0;
        opacity: 0;
        transition: opacity 1s;
        position: absolute;
        z-index: 1;
    }

    .l-tooltip:hover .l-tooltiptext {
        visibility: visible;
        opacity: 1;
    }

    .l-tooltip .l-tooltiptext::after {
        /* Down Arrow */
        content: " ";
        position: absolute;
        top: 100%; /* At the bottom of the tooltip */
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: black transparent transparent transparent;
    }

/*** END - TABLES ****/



/*
******************************

    TABS

******************************
*/

.l-tab-set {
    display: flex;
}

.l-tab {
    padding: 12px 20px;
    border-radius: 6px 6px 0 0;
    border: solid 1px #CCC;
    border-bottom: none;
    background-color: #e8e8e8;
    margin-right: 2px;
}

.l-tab--active {
    background-color: #fff;
    font-weight: 700;
}

.l-tab--disabled {
    color: #999;
}

.l-tab-content {
    display: flex;
    gap: 5px;
}

    .l-tab-content .icon {
        color: var(--statusWarning);
    }

/*** END - TABS ****/


/*
******************************

    FORMS

******************************
*/

input[type=text]:read-only,
input[type=number]:read-only,
textarea:read-only {
    background-color: #efefef;
}

.k-form-field {
    margin-bottom: 15px;
    position: relative;
}

    .k-form-field.k-horizontal {
        display: flex;
        align-items: flex-start;
        /*padding-bottom: 15px;*/
        flex-wrap: wrap;
    }

        .k-form-field.k-horizontal .k-label {
            flex: 1;
            margin-right: 20px;
        }

    .k-form-field.l-horizontal--all-inline {
        /*
        All elements are inline:
        - Label
        - Input
        - Button
        - Message Box
    */
        align-items: center;
    }

        .k-form-field.l-horizontal--all-inline .l-form-messagebox--compact,
        .k-form-field.l-horizontal--all-inline .l-form-msg-box--compact {
            flex-basis: auto;
            margin: 0 0 0 20px;
        }

        .k-form-field.l-horizontal--all-inline .k-label {
            flex: none;
            margin-right: 10px;
        }

    .k-form-field.l-horizontal--label-dominant {
        /*
        Label and input are laid out inline,
        with label taking most of the available space.
        Default is input(s) using available space.
    */
    }

.l-horizontal--all-inline .k-input {
    width: auto;
    margin-right: 10px;
    /*flex-grow: 2;*/
}

.k-form-field.l-horizontal--input-dominant {
    align-items: center;
    flex-wrap: wrap;
}

    .k-form-field.l-horizontal--input-dominant .k-label {
        flex: none;
        margin-right: 20px;
        width: 100%;
    }

    .k-form-field.l-horizontal--input-dominant .k-input {
        flex: 1;
    }

    .k-form-field.l-horizontal--input-dominant .k-button {
        margin-left: 20px;
    }



.k-form-field.k-horizontal .k-radio-list,
.k-form-field.k-horizontal .k-checkbox-list {
    justify-content: flex-end;
}

.k-form-separator {
    border-top: solid 1px var(--colorGray200);
    margin-bottom: 15px;
}

.k-radio-list.k-list-horizontal,
.k-checkbox-list.k-list-horizontal {
    gap: 0;
}

.k-list-horizontal .k-radio-item,
.k-list-horizontal .k-checkbox-item {
    margin-right: 10px;
}

    .k-list-horizontal .k-radio-item:last-child,
    .k-list-horizontal .k-checkbox-item:last-child {
        margin-right: 0;
    }

.k-checkbox-list.k-list-horizontal .k-checkbox-item,
.k-radio-list.k-list-horizontal .k-radio-item {
    padding-block: 0;
    column-gap: .5rem;
}

.k-input {
    font-family: "Source Sans Pro", sans-serif;
}

    .k-input select.k-input-inner {
        -webkit-appearance: auto;
    }

.k-form-hint {
    color: var(--colorGray600);
}



.l-form-secondary {
    padding: 10px 15px;
    margin-bottom: 0.9375rem;
    background-color: #f8f8f8;
    border-radius: 4px;
    display: none;
}

.l-input-nvp-block {
    /*
        Wrapper for text only data (name and value pair)
    */
}

.l-input-nvp__label {
    padding: 0 15px 10px 0;
    vertical-align: top;
}

.l-input-nvp__value {
    font-weight: 700;
    padding: 0 0 10px 0;
    vertical-align: top;
}

.l-form-field-action {
    color: var(--scBlue);
    position: absolute;
    text-decoration: none;
    display: block;
}

.l-form-field-action--top-right {
    top: 0;
    right: 0;
}

.l-form-field-action__text {
}

.l-form-field-action__icon {
    font-weight: 700;
}

.l-input-char-count {
    text-align: right;
    font-size: 0.75rem;
    line-height: 120%;
    margin-top: 0.3125rem;
}


/*
******************************
FILTERS
******************************
*/

.l-filters {
    align-items: flex-end;
}

    .l-filters label {
        font-weight: bold;
        display: block;
    }

    .l-filters .k-form-field {
        margin-bottom: 0;
    }

.l-filters__actions {
    padding-top: 10px;
}

/*** END - FILTERS ****/



/*
******************************
TOOLBARS
******************************
*/
.l-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

    .l-toolbar .k-form-field {
        margin: 0;
    }


.l-toolbar__item {
    position: relative;
}

.l-toolbar__item > .k-button{
    margin-left: 10px;
}

    .l-toolbar__item:first-child > .k-button {
        margin-left: 0;
    }

/* Flex Align-Items (ai) Flex-End (fe) */
.l-tool-bar--filters {
    align-items: flex-end;
}

/* PAGE HEADER TOOLBARS */

.l-toolbar--page-header {
    justify-content: flex-end;
}

    .l-toolbar--page-header .l-user__menu {
        border-radius: 0 4px 4px 4px;
    }


.l-toolbar-item__search {
    margin-right: 5px;
    border-radius: 4px;
    padding: 13px;
    cursor: pointer;
}

    .l-toolbar-item__search:hover {
        background-color: rgba(255, 255, 255, 0.25);
    }

        .l-toolbar-item__search:hover .icon {
            color: #fff;
        }

    .l-toolbar-item__search .icon {
        font-size: 24px;
        color: #bfbfbf;
    }

.l-toolbar__user {
    display: flex;
    border-radius: 4px 4px 0 0;
    padding-right: 20px;
}

.l-toolbar-item__user:hover {
    background: rgba(255,255,255,0.25);
}

    .l-toolbar-item__user:hover .l-user__menu {
        display: block;
    }

.l-toolbar-item__user > .icon {
    font-size: 24px;
    margin-right: 5px;
}

.l-toolbar-item__user {
    padding: 10px;
    display: flex;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
}

/*
CHARLES DEV NOTE:
Update references of l-toolbar--justify-end to l-toolbar--align-right
*/
.l-toolbar--align-right,
.l-toolbar--justify-end {
    justify-content: flex-end;
}

.l-grid-toolbar .k-toolbar {
    /* Remove default background color from toolbar and align action buttons to right */
    background-color: transparent;
    justify-content: flex-end;
}
/*** END - TOOLBARS ****/


/*
******************************
EDITOR    
******************************
*/

.l-k-editor {
    margin-bottom: 20px;
    text-align: right;
}

    .l-k-editor .k-editor {
        margin-bottom: 20px;
    }

.l-k-editor__buttons {
    display: flex;
    justify-content: flex-end;
}

/*** END - EDITOR ****/


/*
******************************
    UTILITY & HELPER CLASSES    
******************************
*/

/* Box Shadows */

.l-shadow--sm {
    box-shadow: var(--dropShadowSm) !important;
}

.l-shadow--med {
    box-shadow: var(--dropShadowMed) !important;
}

.l-shadow--lg {
    box-shadow: var(--dropShadowLg) !important;
}

/* Status */

.k-dialog.l-status-default .k-dialog-titlebar,
.k-window.l-status-default .k-window-titlebar {
    background-color: var(--statusDefault);
}

.k-dialog.l-status-success .k-dialog-titlebar {
    background-color: var(--statusSuccess);
}

.k-dialog.l-status-warning .k-dialog-titlebar {
    background-color: var(--statusWarning);
}

.k-dialog.l-status-urgent .k-dialog-titlebar {
    background-color: var(--statusUrgent);
}

/* Align Center */
.l-ac {
    text-align: center !important;
}

/* Align Right */
.l-ar {
    text-align: right !important;
}

/* Position toolbar items to the right in toolbar */
.l-toolbar.l-ar {
    justify-content: flex-end !important;
}

/* Align Left */
.l-al {
    text-align: left !important;
}

/* Margin Bottom None */
.l-mb-none {
    margin-bottom: 0;
}

/* Margin Top Small */
.l-mt-sm {
    margin-top: 10px;
}

/* Margin Bottom Small */
.l-mb-sm {
    margin-bottom: 10px;
}

/* Margin Bottom Medium */
.l-mb-m {
    margin-bottom: 20px;
}

/* Margin Left Medium */
.l-ml-m {
    margin-left: 20px;
}

/* Margin Left Large */
.l-ml-l {
    margin-left: 40px;
}

/* Padding (All) - Small */
.l-p-s {
    padding: 10px;
}

.l-strong {
    font-weight: bold;
}

/*** END - UTILITY & HELPER CLASSES ****/


/*
******************************
PAGINATION
******************************
*/

/* CC NOTE: This styling is temporary, need long term solution */
.k-pager-numbers .k-button {
    border-radius: 0 !important;
}

/*** END - PAGINATION ****/


/*
******************************
LOADERS
******************************

Prototype:
<div class="l-loader l-loader--content">
    <div class="l-loader__wrapper">
        <div class="l-loader__animation"></div>
    </div>
</div>

*/

.l-loader {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9;
}

.l-loader__wrapper {
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
    z-index: 1;
    background: url(/content/images/logo-loader.png) no-repeat center;
    background-color: #fff;
    border-radius: 50%;
}

.l-loader__animation {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border-style: solid;
    border-color: #f3f3f3;
    border-top-color: #0070c1;
    animation: spin 2s linear infinite;
}


.l-loader.l-loader--page {
    position: fixed;
}

.l-loader--page .l-loader__wrapper {
    position: absolute;
    width: 140px;
    height: 140px;
    background-size: 80px 80px;
}

.l-loader--page .l-loader__animation {
    border-width: 8px;
}


.l-loader.l-loader--content {
    position: absolute;
    background-color: rgba(255,255,255,0.75);
}

.l-loader--content .l-loader__wrapper {
    position: absolute;
    width: 70px;
    height: 70px;
    background-size: 40px 40px;
}

l-loader--content .l-loader__animation {
    border-width: 5px;
}



@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*** END - LOADERS ****/



/*
******************************
BUTTONS
******************************
*/

.l-btn-icon {
    border: none;
    padding: 5px;
    margin: 0;
    background: none;
    box-shadow: none;
    /* Optionally, reset other styles like font and text color */
    font: inherit;
    color: var(--scBlue);
}

.l-btn-group {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.l-btn-group__item {
    margin-left: 10px;
}

    .l-btn-group__item:first-child {
        margin-left: 0;
    }

/*** END - BUTTONS ****/