/*

    Dev CSS file

    Put the your components CSS here.

    The frontend team will refactor these styles and put them in the right place.
    
    Rules:

    1 - Give your component a class name
    2 - Prefix your styles with the classname so styles don't leak out (and its makes it easier for us to move)
    3 - Prefix class with 'h-' so we know its a Hicom component rather than a Bootstrap or Kendo component 
    4 - Use BEM (http://getbem.com/introduction/) naming convention:
        .h-component-name
        .h-component-name--state (double dash)
        .h-component-name__child-element (double underscore)
    
        Example:

        BAD
        h2{ ... }

        GOOD
        .h-component-name .h-component-name__title { ... }
    

    Best practice:
    
    1 - Don't set a max height on data (tables, grid, lists)
    2 - Don't style elements with .row or .col(-x). They are bootstrap grid class that include margin and padding 

        Example:

        BAD
        <div class="col collapse show" id="GridToggle">
            <div class="row">
                // if padding or margins are changed on .grid-container 
                // or .small-grid the grid look mis-aligned 
                <div class="col grid-container small-grid">

        GOOD
        <div class="collapse show" id="GridToggle">
            <div class="row">
                <div class="col">
                    <div class="grid-container small-grid">


    3 - Don't exceed 2 levels when styling components. If the elements in your component have classnames this shouldn't be difficult. 
        
        Example:
        
        BAD
        .h-datagrid .h-datagrid__filters .h-datagrid__filters__action .h-datagrid__filters__action__copy{}
        
        GOOD
        .h-datagrid__filters__action {}

*/


/* CC: I have had to add :not(.section-details) to the existing style in hicom.css
.dropdown.icon-btn .custom-dropdown:not(.field-details):not(.section-details) {
    font-family: verdana;
    transform: inherit !important;
} */

/* CC: I have had to add the following to hicom.formbuilder.css */
.custom-dropdown.field-details,
.custom-dropdown.section-details {
    left: 0px !important;
}



.tooltip {
    /*This is needed because the tooltips need to float over the edit and delete card on standard gridviews.*/
    z-index: 8500;
    opacity: 1;
}

.tooltip-arrow {
    color: #e4e4e4;
}

.tooltip-standard {
    color: black !important;
    border: 1px solid #e4e4e4;
    box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
    border-radius: 5px;
}

.btn-toggle-disabled-on {
    background-color: #dbdcdf;
    border-color: #dbdcdf;
    cursor: not-allowed;
    padding: 2px 4px 0px 0px !important;
}

.btn-toggle-disabled-off {
    background-color: #dbdcdf;
    border-color: #dbdcdf;
    cursor: not-allowed;
    padding: 2px 0px 0px 6px !important;
}

.btn-toggle-on {
    background-color: #28a745;
    border-color: #28a745;
    color: #fff;
    padding: 2px 6px 0px 0px !important;
}

.btn-toggle-off {
    background-color: #C31D1D !important;
    border-color: #C31D1D !important;
    color: #fff;
    font-weight: 700;
    padding: 2px 0px 0px 6px !important;
}

/*Ensure that disabled html elements dont affect tooltips*/
.disabled {
    pointer-events: none;
}

/*Needed because the Tour button has moved (this has been hard coded and i have no idea why)*/
.formBuilderTourButton {
    right: 585px !important;
    top: 0;
}

.h-vacancyowner.input-group-addon .icon-search {
    position: absolute;
    right: 12px;
    top: 3px;
    opacity: 0.5;
}

/* MF - default display for lozenges in Vacancy list, and specific styling for the DEV environment badge */

.badge {
    display: inline-block;
    padding: .25em .8em;
    font-size: 100%;
    font-weight: 400;
    line-height: inherit;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 12px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
/*To have some gap in the Cross button - Task 1713 >> Issue 3*/
.k-multiselect-clearable .k-multiselect-wrap {
    padding-right: 3.25em !important;
}

/**
    Icon overrides
    
    **/

/*****ICOMOON OVERWRITES*/

.GridTitle .dropdown-icons .icon-menu_item_dropdown:before {
    color: #424242;
}

.PageTitle .dropdown-icons .icon-menu_item_dropdown:before {
    color: #424242;
}

.icon-report:before {
    color: #2e92cb;
    content: "\e96f";
}


.icon-gray:before {
    color: #424242;
}


.heading-icon span[class^="icon"] {
    margin-left: 5px;
    vertical-align: -2px !important;
}

    .heading-icon span[class^="icon"]:before {
        color: #ddd;
        font-size: 1.6rem;
    }

.option-dropdown .dropdown-item [class^="icon"]:before {
    transition: all .4s ease;
}

.option-dropdown .icon-table_nav_right:before,
.option-dropdown .icon-add:before {
    color: #3B8519 !important;
}

.option-dropdown .icon-in_progress_2,
.option-dropdown .icon-clock {
    vertical-align: -3px !important;
}

    .option-dropdown .icon-in_progress_2:before {
        color: #f29b12 !important;
    }

.option-dropdown .icon-search:before {
    color: #2e92cb !important;
}

.option-dropdown .icon-view:before {
    color: #4e5d60 !important;
}


.option-dropdown .icon-table_nav_right:before,
.option-dropdown .icon-add:before {
    color: #3B8519 !important;
}

.option-dropdown .icon-in_progress_2,
.option-dropdown .icon-clock {
    vertical-align: -3px !important;
}

    .option-dropdown .icon-in_progress_2:before {
        color: #f29b12 !important;
    }

.option-dropdown .icon-search:before {
    color: #2e92cb !important;
}

.option-dropdown .icon-view:before {
    color: #4e5d60 !important;
}


.option-dropdown .dropdown-item [class^="icon"]:before {
    transition: all .4s ease;
}

.green-icon:before {
    color: #3B8519 !important;
}

.iconcolour-blue::before {
    color: #2e92cb !important;
}

.iconcolour-green::before {
    color: #3B8519 !important;
}

.iconcolour-lightGreen::before {
    color: #3B8519 !important;
}

.iconcolour-darkGrey::before {
    color: #4e5d60 !important;
}

.iconcolour-white::before {
    color: #fff !important;
}

.iconsize-small::before {
    font-size: .75em;
}

.icon-cancel:before {
    color: #C31D1D
}

.red-btn .icon-cancel:before {
    color: #fff;
}

.red-btn:hover {
    background-color: #ce6767 !important;
}

.icon-file_type_pdf:before {
    color: #e02455;
}

.icon-file_type_zip:before {
    color: #a5873d;
}

.icon-file_type_docx:before {
    color: #276dc1;
}

.icon-file_type_xlsx:before {
    color: #31a8a2;
}

.icon-file_type_doc:before {
    color: #276dc1;
}

.icon-file_type_gif:before {
    color: #268da5;
}

.icon-file_type_jpeg:before {
    color: #c45397;
}

.icon-file_type_jpg:before {
    color: #c45397;
}

.icon-file_type_png:before {
    color: #59aa59;
}

.icon-file_type_tiff:before {
    color: #7459b5;
}

.icon-file_type_txt:before {
    color: #808080;
}

.icon-file_type_xls:before {
    color: #31a8a2;
}

.icon-file_type_mp4:before {
    color: #4e5d60;
}


td .icon-cancel:before, td .icon-apply:before {
    font-size: .8em;
}

.icon-apply:before {
    color: #3B8519;
}

.form-btn-block button.active .icon-apply:before {
    color: #fff;
}

.designer-tile-section > ul > li:hover .tile-footer > li [class^="icon"]:before {
    color: #424242;
}

.designer-tile-section > ul > li.active .click-icon span:before {
    color: #424242;
}


.Page-column-head span[class^="icon"]:before,
.title-toggle-block span[class^="icon"]:before {
    color: #4e5d60;
}


.ScreeningFlag span:before,
.ScreeningFlag .dropdown-icons .icon-menu_item_dropdown:before {
    color: #fff;
}

.pinned-icon, .pinned-icon:before {
    color: #3B8519 !important;
}

.unpinned-icon, .unpinned-icon:before {
    color: #ddd !important;
}


.icon-btnGridToggle {
    /* margin-right: 0 !important; */
}


    .icon-btnGridToggle:before {
        color: #4e5d60;
        content: "\e959";
        cursor: pointer;
        font-family: icomoon !important;
    }

    .icon-btnGridToggle.collapsed:before {
        color: #c0cdd2;
        content: "\e957";
        cursor: pointer;
        font-family: icomoon !important;
    }


.icon-left_arrow .path1:before {
    content: "\e945";
    color: rgb(0, 0, 0);
    opacity: 0.39;
}

.icon-left_arrow .path2:before {
    content: "\e9c4";
    margin-left: -1em;
    color: rgb(107, 122, 124);
}

.icon-right_arrow .path1:before {
    content: "\e923";
    color: rgb(0, 0, 0);
    opacity: 0.39;
}

.icon-right_arrow .path2:before {
    content: "\e9c5";
    margin-left: -1em;
    color: rgb(107, 122, 124);
}




/*span[class^=icon] .count {
    margin-left: -8px;
    position: relative;
    top: -14px;
}*/


.status-btn span.icon-cancel {
    font-size: 1.4rem !important;
    vertical-align: -2px !important;
}

/*button.dropdown-item [class^="icon"] {
    position: relative;
    top: 1px !important;
}*/

/* FORMS */

/* GRIDS */

.gridcell .icon-cancel, .gridcell .icon-apply {
    font-weight: bold
}

.gridcell .icon-cancel {
    color: red;
}

.icon-severity_flag {
    color: #424242;
}

.icon-question-mark2 {
    color: #f1f4f8;
}

/*End icon overrides*/

/*
    Below css is to hide the > icon on all grids except FAQ Categories and SubCategories, which are the only places we are using it.
    grdAuditEFAction & grdAuditUserAction too!
*/

.k-grid .k-hierarchy-cell {
    width: 0;
}

.k-grid .k-header.k-hierarchy-cell {
    border: none;
}

.k-grid .k-hierarchy-cell .k-icon {
    display: none;
}

.k-grid .k-hierarchy-col {
    width: 1px;
}

#grdAuditUserAction.k-grid:not(.nestedGrid) .k-master-row .k-hierarchy-cell,
#grdAuditEFAction.k-grid:not(.nestedGrid) .k-master-row .k-hierarchy-cell,
#grdAuditUserFormsAction.k-grid:not(.nestedGrid) .k-master-row .k-hierarchy-cell,
#grdAuditExamRAAction.k-grid:not(.nestedGrid) .k-master-row .k-hierarchy-cell,
#grdExamApplicant.k-grid .k-master-row .k-hierarchy-cell,
#grdSurveyResponsesList.k-grid .k-master-row .k-hierarchy-cell,
#FAQCategory .k-grid .k-hierarchy-cell,
#FAQSubCategory .k-grid .k-hierarchy-cell {
    width: 37px !important;
}

#grdAuditUserAction.k-grid:not(.nestedGrid) .k-master-row .k-header.k-hierarchy-cell,
#grdAuditEFAction.k-grid:not(.nestedGrid) .k-master-row .k-header.k-hierarchy-cell,
#grdAuditUserFormsAction.k-grid:not(.nestedGrid) .k-master-row .k-header.k-hierarchy-cell,
#grdAuditExamRAAction.k-grid:not(.nestedGrid) .k-master-row .k-header.k-hierarchy-cell,
#grdExamApplicant.k-grid .k-master-row .k-header.k-hierarchy-cell,
#grdSurveyResponsesList.k-grid .k-master-row .k-header.k-hierarchy-cell,
#FAQCategory .k-grid .k-header.k-hierarchy-cell,
#FAQSubCategory .k-grid .k-header.k-hierarchy-cell {
    border: 1px;
}

#grdAuditUserAction.k-grid:not(.nestedGrid) .k-master-row .k-hierarchy-cell .k-icon,
#grdAuditEFAction.k-grid:not(.nestedGrid) .k-master-row .k-hierarchy-cell .k-icon,
#grdAuditUserFormsAction.k-grid:not(.nestedGrid) .k-master-row .k-hierarchy-cell .k-icon,
#grdAuditExamRAAction.k-grid:not(.nestedGrid) .k-master-row .k-hierarchy-cell .k-icon,
#grdExamApplicant.k-grid .k-master-row .k-hierarchy-cell .k-icon,
#grdSurveyResponsesList.k-grid .k-master-row .k-hierarchy-cell .k-icon,
#FAQCategory .k-grid .k-hierarchy-cell .k-icon,
#FAQSubCategory .k-grid .k-hierarchy-cell .k-icon {
    display: inherit;
}

#grdAuditUserAction.k-grid :not(.nestedGrid) .k-hierarchy-col,
#grdAuditEFAction.k-grid:not(.nestedGrid) .k-hierarchy-col,
#grdAuditUserFormsAction.k-grid:not(.nestedGrid) .k-hierarchy-col,
#grdAuditExamRAAction.k-grid:not(.nestedGrid) .k-hierarchy-col,
#grdExamApplicant.k-grid .k-hierarchy-col,
#grdSurveyResponsesList.k-grid .k-hierarchy-col,
#FAQCategory .k-grid .k-hierarchy-col,
#FAQSubCategory .k-grid .k-hierarchy-col {
    width: 38px !important;
}

#grdAuditUserAction.k-grid .nestedGrid .k-hierarchy-col,
#grdAuditEFAction.k-grid .nestedGrid .k-hierarchy-col,
#grdAuditUserFormsAction.k-grid .nestedGrid .k-hierarchy-col,
#grdAuditExamRAAction.k-grid .nestedGrid .k-hierarchy-col,
#grdExamApplicant.k-grid .nestedGrid .k-hierarchy-col,
#grdSurveyResponsesList.k-grid .nestedGrid .k-hierarchy-col {
    width: 1px;
}

#grdExamApplicant.k-grid .k-detail-row .k-detail-cell .nestedGrid.k-grid .k-hierarchy-cell,
#grdSurveyResponsesList.k-grid .k-detail-row .k-detail-cell .nestedGrid.k-grid .k-hierarchy-cell,
#grdAuditUserFormsAction.k-grid .k-detail-row .k-detail-cell .nestedGrid.k-grid .k-hierarchy-cell {
    width: 0;
}

#grdExamApplicant.k-grid .k-detail-row .k-detail-cell .nestedGrid.k-grid .k-header.k-hierarchy-cell,
#grdSurveyResponsesList.k-grid .k-detail-row .k-detail-cell .nestedGrid.k-grid .k-header.k-hierarchy-cell,
#grdAuditUserFormsAction.k-grid .k-detail-row .k-detail-cell .nestedGrid.k-grid .k-header.k-hierarchy-cell {
    border: none;
}

#grdExamApplicant.k-grid .k-detail-row .k-detail-cell .nestedGrid.k-grid .k-hierarchy-cell .k-icon,
#grdSurveyResponsesList.k-grid .k-detail-row .k-detail-cell .nestedGrid.k-grid .k-hierarchy-cell .k-icon,
#grdAuditUserFormsAction.k-grid .k-detail-row .k-detail-cell .nestedGrid.k-grid .k-hierarchy-cell .k-icon {
    display: none;
}

#grdExamApplicant.k-grid .k-detail-row .k-detail-cell .nestedGrid.k-grid .k-hierarchy-col,
#grdSurveyResponsesList.k-grid .k-detail-row .k-detail-cell .nestedGrid.k-grid .k-hierarchy-col,
#grdAuditUserFormsAction.k-grid .k-detail-row .k-detail-cell .nestedGrid.k-grid .k-hierarchy-col {
    width: 1px;
}

/* 
    Above css is to hide the > icon on all grids except FAQ Categories and SubCategories, which are the only places we are using it.
    grdAuditEFAction & grdAuditUserAction too!
*/

.cursor-off {
    cursor: not-allowed;
}

/* 
    CSS below used in the View as applicant mode when an admin is looking at an application.
*/
.readOnlyMode, .readOnlyMode > div, .readOnlyMode .fb-text, .readOnlyMode [type="text"], .readOnlyMode .k-dropdown-wrap,
.readOnlyMode .checkmark, .readOnlyMode .k-select .k-icon, .readOnlyMode .funkyradio input[type="radio"]:empty ~ label {
    cursor: not-allowed;
}

    .readOnlyMode button.btn-form-toggle.active {
        background-color: #0680a3 !important;
    }

/* START - style for Server errors, used in Security project*/
.model-server-error {
    display: inline-block;
    background-color: #b94a48;
    color: #fff !important;
    padding: 4px 8px 4px 23px;
    margin-top: 4px;
    margin-bottom: 4px;
    box-shadow: 1px 2px 7px rgba(0,0,0,.2);
    position: relative;
    vertical-align: middle;
    font-size: 1.1rem !important;
    font-weight: normal;
}

    .model-server-error:after {
        box-sizing: border-box;
        color: #fff;
        content: "\e98e";
        font-family: icomoon;
        font-size: 1.7rem;
        font-weight: 400;
        line-height: unset;
        position: absolute;
        left: 2px;
        top: 0px;
    }

    .model-server-error:before {
        border-bottom: 5px solid #C31D1D;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        content: "";
        position: absolute;
        left: 5px;
        top: -5px;
    }
/* END - style for Server errors, used in Security project*/

/* START - Tooltip on forms*/
.input-box .input-tooltip {
    padding-top: 5px;
}

.input-box .customTooltip .input-tooltip {
    padding-top: 0px;
}
/* END - Tooltip on forms*/
/* END - style for Server errors, used in Security project*/

/* More icons and Screening css*/

.toggle-group .btn-success {
    background-color: #3B8519 !important;
    border-color: #3B8519 !important;
    color: #fff;
}

    .toggle-group .btn-success:hover {
        background-color: #1C6E25 !important;
        border-color: #1C6E25 !important;
        color: #fff;
    }

.toggle-group .btn-danger {
    background-color: #C31D1D !important;
    border-color: #C31D1D !important;
    color: #fff;
}

    .toggle-group .btn-danger:hover {
        background-color: #9F1919 !important;
        border-color: #9F1919 !important;
        color: #fff;
    }

.outcome-eligible.icon-completed_items::before {
    color: #3B8519;
    padding-right: 2px;
}

.outcome-ineligible.icon-closed::before {
    color: #C31D1D;
    padding-right: 2px;
}

.outcome-eligible-with-conditions.icon-question-mark2::before {
    color: #424242;
    padding-right: 2px;
}

.icon-approved {
    color: #3B8519;
    font-weight: bold;
}

.icon-in_progress_2 {
    color: #424242;
    font-weight: bold;
}

/*Messaging*/

.k-i-System-url:before {
    content: "\e94f";
    color: #027fa2;
    font-family: 'icomoon' !important;
    speak: none;
    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;
}

.k-i-Merge-fields:before {
    content: "\e903";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

/* START - Security User Account CSS */
.h-security-user--btnAccountStatus.enable:hover {
    background-color: #75B259 !important;
}

.h-security-user--btnAccountStatus.disable:hover {
    background-color: #CE6767 !important;
}


.h-security-user--PageTitle-rhs {
    top: -20px !important;
}

    .h-security-user--PageTitle-rhs .icon-closed::before {
        color: #C31D1D;
    }


.h-security-user--btnAccountStatus {
    color: #ffffff !important;
}

    .h-security-user--btnAccountStatus.enable {
        background-color: #3B8519 !important;
    }

    .h-security-user--btnAccountStatus.disable {
        background-color: #C31D1D !important;
    }

/* END Security User Account CSS */

.h-messaging--message-template .fs-container.fs-container-editor.fs-fullscreen {
    padding: 10px;
}
/* END - Security User Account CSS */


/* System content editor settings for format and export as dropdowns */

#SystemContentEditor .k-editor-toolbar-wrap .k-editor-toolbar .k-editor-dropdown .k-dropdown {
    margin-bottom: 0;
}

#SystemContentEditor .k-editor-toolbar-wrap .k-editor-toolbar .k-dropdown-wrap .k-input {
    line-height: 1.72em;
}

#SystemContentEditor .k-tool-group.k-button-group .k-editor-dropdown.k-group-end {
    margin-left: 6px;
}
/* END - System content editor settings for format and export as dropdowns */
/* END - Security User Account CSS */

/* START Dashboard widget css*/

div[data-widget-id="27"] .widgetFilters, div[data-widget-id="23"] .widgetFilters, div[data-widget-id="41"] .widgetFilters, div[data-widget-id="42"] .widgetFilters {
    display: none;
}
/* END Dashboard widget css*/


/* Preview modal popup settings */
.vacancy-preview .button-list {
    position: absolute;
    right: 0;
    top: 5px;
}

.vacancy-preview {
    padding: 0;
}

    .vacancy-preview + .main-content-block {
        box-shadow: none;
        padding: 0;
        margin: 0;
        margin-top: -10px;
    }

        .vacancy-preview + .main-content-block:hover {
            border-top-color: transparent;
        }


#modal-preview .previewMdlDialog .modal-header {
    padding-bottom: 10px;
    margin-bottom: 10px;
}

#modal-preview .button-list .vacancyClosed {
    color: #424242;
    vertical-align: top;
    padding-top: 2px;
    display: inline-block;
    margin-left: 5px;
}

    #modal-preview .button-list .vacancyClosed span {
        color: #C31D1D;
    }


.modal-dialog.previewMdlDialog.mdlDialogExpand .modal-content {
    padding-top: 0;
}

    .modal-dialog.previewMdlDialog.mdlDialogExpand .modal-content .fs-fullscreen-title {
        padding: 0;
        min-height: inherit;
    }

#modal-preview .modal-dialog.previewMdlDialog.mdlDialogExpand .modal-header {
    padding-top: 10px;
    display: flex;
}

.modal-preview .modal-dialog.previewMdlDialog.mdlDialogExpand .fs-action {
    top: 9px;
    right: 30px;
    margin-top: 4px !important;
}

.modal-preview .modal-dialog.previewMdlDialog.mdlDialogExpand .modal-header .close {
    top: 10px;
    padding: 0.85rem 1rem;
}

.modal-dialog.previewMdlDialog.ViewAsApplicant .modal-header .close {
    top: 0px;
}
/* END Preview modal popup settings */

/*Logout page style - Starts*/
.logout-button {
    color: #fff !important;
    background-color: #0680A3 !important;
    padding: 10px 0 !important;
    display: inline-block;
}

    .logout-button:hover {
        background-color: #DCF4F9 !important;
    }

.logout.tile-content-section {
    padding: 40px 15px 15px;
    height: auto;
    top: 50%;
}

    .logout.tile-content-section h3 {
        margin-bottom: 15px;
    }

    .logout.tile-content-section p {
        padding: 15px 0;
    }

.logout .cta-row {
    margin-top: 5px;
}

.logout .icon-completed_items {
    margin-right: 5px !important;
}

    .logout .icon-completed_items:before {
        font-size: 3.5rem;
        vertical-align: -8px;
    }

.logout .icon-warning:before {
    font-size: 3.5rem;
    vertical-align: -8px;
}
/*Logout page style - Ends*/


/* RoleSelection page style - start*/

.roleselection.tile-content-section {
    padding: 40px 15px 15px;
    height: auto;
    /*top: 20%;*/
}

    .roleselection .tile-content-section.selections {
        padding: 0;
        box-shadow: none;
    }

        .roleselection .tile-content-section.selections .contents {
            height: 100%;
            min-height: 130px;
        }

            .roleselection .tile-content-section.selections .contents > .applicant-content {
                min-height: unset !important;
            }

        .roleselection .tile-content-section.selections .applicant-content.standard {
            height: calc(100% - 47px);
        }

        .roleselection .tile-content-section.selections .applicant-content.PW2-head {
            min-height: 38px !important;
            text-align: left;
        }

        .roleselection .tile-content-section.selections .applicant-content.PW2-body {
            min-height: 80px !important;
        }

        .roleselection .tile-content-section.selections ul {
            display: block !important;
            padding-left: 20px !important;
        }

            .roleselection .tile-content-section.selections ul li {
                margin-left: 20px;
                list-style: disc;
                text-align: left;
            }

        .roleselection .tile-content-section.selections > .row {
            padding: 7px;
            margin: auto;
        }

            .roleselection .tile-content-section.selections > .row > [class^='col'] {
                padding: 6px !important;
            }

        .roleselection .tile-content-section.selections .contents.PW2 span {
            padding: 16px 0px 0px 16px;
        }

/* RoleSelection page style - end*/

/* App Form Submission page*/
.btn.btn-default.btn-final-submission:disabled {
    border-color: #cbd3da;
}


/* _ConfirmUnSavedLeave.cshtml */
h1.modal-title {
    padding: 5px 0;
}

/* Registration page */
.tile-contentsRegistration ol, .tile-contentsRegistration ul, .tile-contentsRegistration dl {
    display: block !important;
    margin-bottom: 1em !important;
    padding-left: 40px !important;
}

    .tile-contentsRegistration ul li {
        list-style-type: disc;
        list-style-position: inside !important;
    }

    .tile-contentsRegistration ol li {
        list-style-position: inside !important;
    }

#registrationAccordion a {
    color: #0680a3 !important;
}

#registrationAccordion p a {
    font-size: 12px;
}

#registrationAccordion a:hover {
    text-decoration: underline !important;
}

/* END: Registration page */

/* Cross Icon on TextBox */
.clearable {
    background-color: #fff;
    background-image: none;
    background-repeat: no-repeat;
    background-position: right 10px center;
    border: 1px solid #ddd;
    padding: 3px 25px 3px 4px;
    border-radius: 3px;
}

    .clearable.x, #ApplicationTypeAhead.x {
        background-image: url(data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=) !important;
    }

    .clearable.onX {
        cursor: pointer;
    }

    .clearable::-ms-clear {
        display: none;
        width: 0;
        height: 0;
    }

.typeahead {
    background-image: url(/ukgwa/20260506110819oe_/https://www.oriel.nhs.uk/Security/Web/Base/content/images/search.svg);
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-color: #fff;
    background-size: 20px;
    min-height: 28px;
}

    .typeahead.x {
        background-image: url(data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=);
        background-size: auto;
    }
/*END: Cross Icon on TextBox */

/* Correct formatting of ul and ol*/
.confirmBox ol li, #modal-content ol li {
    list-style-type: decimal !important;
    list-style-position: inside !important;
}

.confirmBox ul li, #modal-content ul li {
    display: list-item;
    list-style-position: inside !important;
    list-style: inside !important;
}

/*fixing popups with gridviews on them*/
.modal-content .k-reset li {
    list-style: none !important;
}

/* Pad after icon before label */
.h-profile-editSecurity .btn.btn-green span.icon-edit {
    padding-right: 5px;
}

/* Hide scrolling on profile*/

.h-main.profile, .h-main.profileupdate {
    overflow: auto;
}

/* Dashboard message formatting */
#widgetMessageList .message-desc {
    white-space: pre-line;
}

.modal-message .modal-dialog {
    max-width: 700px;
}

    .modal-message .modal-dialog .modal-body {
        overflow-y: auto !important;
    }

    .modal-message .modal-dialog .modal-message-body {
        padding-top: 5px;
        white-space: pre-line;
    }


/* Like button formatting */

.like-action-block .icon-like {
    transform: scaleX(-1);
}

    .like-action-block .icon-like:hover:before {
        content: "\e94d";
        font-family: icomoon !important;
    }

.like-action-block .icon-dislike:hover:before {
    content: "\e91e";
    font-family: icomoon !important;
}

/* Adjust error message in User multi role selection */
.h-security-user-multirole-grid {
    margin: auto;
    padding-left: 20px;
}

/* Positioning of unread message count in topright*/
.topright.count.unread-messages-count-topbar {
    position: absolute;
    top: 14px;
    left: 21px;
    font-family: Verdana;
    font-weight: bold;
}

/* Positioning of total alert count in topright*/
.topright.count.total-alert-count-topbar {
    position: absolute;
    top: 14px;
    left: 21px;
    font-family: Verdana;
    font-weight: bold;
}
#ApplicantAlertSection .icon-alert {
    margin-right: 0;
}

.examIdTooltip.icon-question-mark2 {
    padding-left: 5px;
}


/* Disable Toggle checkbox */
.readonly .btn-success,
.readonly .btn-danger {
    color: #ebeff4 !important;
    background-color: #808080 !important;
    border-color: #808080 !important;
    pointer-events: none !important;
}

.relatedRequestsHeader {
    /*padding: 0 0 4px 4px;*/
    font-size: 1.3rem;
    font-weight: 700;
}

/****************************************** Kendo filter control starts ************************************************/
.k-filter, .k-toolbar, .k-filter-toolbar, .k-widget .k-filter {
    width: 100%!important;
}

#ddlFlag-list{
    width:85% !important;
}
.k-filter {
    border-width: 0;
    display: inline-block;
}

    .k-filter ul {
        padding: 0;
    }

        .k-filter ul li {
            list-style-type: none;
        }

    .k-filter .k-filter-container,
    .k-filter .k-filter-preview {
        margin-bottom: 30px;
    }

    .k-filter .k-filter-lines,
    .k-filter .k-filter-item {
        padding-left: 8px;
    }

    .k-filter .k-filter-toolbar {
        display: -ms-inline-flexbox;
        display: inline-flex;
        position: relative;
        padding: 4px 0;
    }

        .k-filter .k-filter-toolbar::before {
            content: "";
            position: absolute;
            width: 8px;
            height: 1px;
            top: 50%;
            left: -8px;
        }

        .k-filter .k-filter-toolbar .k-toolbar {
            border-style: solid;
        }

        .k-filter .k-filter-toolbar .k-filter-value,
        .k-filter .k-filter-toolbar .k-filter-field {
            width: 39% !important;
        }
        .k-filter .k-filter-toolbar .k-filter-operator {
            width: 19% !important;
        }

        .k-filter .k-filter-toolbar .k-filter-value .k-dropdown,
        .k-filter .k-filter-toolbar .k-filter-value .k-numerictextbox,
        .k-filter .k-filter-toolbar .k-filter-value .k-textbox,
        .k-filter .k-filter-toolbar .k-filter-value .k-datepicker,
        .k-filter .k-filter-toolbar .k-filter-value .k-dropdown,
        .k-filter .k-filter-toolbar .k-filter-field .k-dropdown,
        .k-filter .k-filter-toolbar .k-filter-value .k-datepicker .k-picker-wrap {
            width: 100% !important;
        }

            .k-filter .k-filter-toolbar .k-filter-value .k-textbox {
                margin-left: 2px;
                top: 2px;
            }

    .k-filter .k-filter-item {
        position: relative;
    }

        .k-filter .k-filter-item::before {
            content: "";
            position: absolute;
            width: 1px;
            height: 100%;
            top: -4px;
            left: 0;
        }

    .k-filter .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after {
        content: "";
        position: absolute;
        width: 1px;
        top: -5px;
        bottom: 50%;
        left: -8px;
    }

    .k-filter .k-filter-group-main::before,
    .k-filter .k-filter-group-main > .k-filter-toolbar::before,
    .k-filter .k-filter-group-main > .k-filter-toolbar::after,
    .k-filter .k-filter-lines .k-filter-item:last-child::before {
        display: none;
    }

    .k-rtl .k-filter .k-filter-lines,
    .k-rtl .k-filter .k-filter-item,
    .k-filter[dir="rtl"] .k-filter-lines,
    .k-filter[dir="rtl"] .k-filter-item,
    [dir="rtl"] .k-filter .k-filter-lines,
    [dir="rtl"] .k-filter .k-filter-item {
        padding-left: 0;
        padding-right: 8px;
    }

    .k-rtl .k-filter .k-filter-toolbar::before,
    .k-filter[dir="rtl"] .k-filter-toolbar::before,
    [dir="rtl"] .k-filter .k-filter-toolbar::before {
        left: auto;
        right: -8px;
    }

    .k-rtl .k-filter .k-filter-item::before,
    .k-filter[dir="rtl"] .k-filter-item::before,
    [dir="rtl"] .k-filter .k-filter-item::before {
        left: auto;
        right: 0;
    }

    .k-rtl .k-filter .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after,
    .k-filter[dir="rtl"] .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after,
    [dir="rtl"] .k-filter .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after {
        left: auto;
        right: -8px;
    }

    .k-filter .k-filter-preview-field {
        color: #ff6358;
    }

    .k-filter .k-filter-preview-operator {
        color: rgba(101, 101, 101, 0.6);
    }

    .k-filter .k-filter-item::before,
    .k-filter .k-filter-toolbar::before,
    .k-filter .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after {
        background-color: rgba(0, 0, 0, 0.08);
    }
/****************************************** Kendo filter control ends ************************************************/


/* Messaging */
.disabled-recipients {
    background-color: #dbdcdf;
    border-color: #dbdcdf;
    pointer-events: none;
}


.landingPageSections.popup .tile-content-section {
    padding: 20px;
    width: 96%;
    right: -12px;
}

.landingPageSections .tile-content-section .row {
    justify-content: center;
}

.landingPageSections.popup .col-lg-8 .tile-content-section {
    position: relative;
    width: 557px;
    justify-content: center;
    right: -5%;
}

#staffgroupselection .modal-content.singlecol {
    width: 80%;
}

#staffgroupselection .modal-dialog.singlecol {
    right: -80px;
    max-width: 750px;
}

#staffgroupselection .modal-content .btn {
    min-width: 160px;
}

#CRESTManagementToggle .toggle {
    top: 2px;
}

.h-profile-editSecurity .tooltip,
.h-profile-editDetails .tooltip,
.h-profile-viewDetails .tooltip {
    position: relative;
    right: 0px;
    pointer-events: auto;
    z-index: auto !important;
    margin-left: 0;
}

#CRESTManagementToggle .tooltip,
.onlineShortListingEnabled .tooltip {
    position: absolute;
    right: 0px;
    pointer-events: auto;
    z-index: auto !important;
}

#CRESTManagementToggle .tooltip:hover,
.onlineShortListingEnabled .tooltip:hover,
.h-profile-editSecurity .tooltip:hover,
.h-profile-editDetails .tooltip:hover,
.h-profile-viewDetails .tooltip:hover {
    z-index: 99999 !important;
}

/*JH - adjustments to bootstrap-toggle*/
.VacancyFilter .toggle {
    top: -2px;
}

.Page-content-block.breadcrumb-block + .Page-content-block.tourstep-1 {
    height: 100%;
}

.h-body--applicant .Page-content-block .row.breadcrumb-button-group {
    margin-bottom: 0;
}


.breadcrumb {
    background-color: #EBEFF4;
    flex: 0 0 auto;
}

#frmProfileMenu{
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

#frmProfileMenu .panelbar-sideBar.navigation {
	flex: 0 0 300px;
	display: flex;
	flex-direction: column;
}

#frmProfileMenu .panelbar-sideBar .tile-contents {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
}

#frmProfileMenu .form-edit-wrapper {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

#frmProfileMenu .form-edit-wrapper .form-edit-inner{
	flex: 1 1 100px;
	overflow-y: auto;
	overflow-x: hidden;
}

#frmProfileMenu .panelbar-sideBar .tile-contents .PageTitle h2 {
	padding: 8px 10px 10px 10px;
}

#frmProfileMenu .panelbar-sideBar .tile-contents .scrollable-area {
	margin: 0 10px;
	padding-right: 10px;
	max-height: none;
	flex: 1 1 200px;
}

#frmProfileMenu .containerResize {
	flex: 1 1 auto;
}

#frmProfileMenu .panelbar-sideBar.navigation {
	flex: 0 0 300px;
	display: flex;
	flex-direction: column;
}

#frmProfileMenu .panelbar-sideBar .tile-contents {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
}

#frmProfileMenu .panelbar-contentBar {
	width: 100%;
}

#frmProfileMenu .tile-contents.vacancy-audit {
	margin-left: 10px;
}

/*Kendo select, allow default state to show text over multiple rows*/
.input-box .k-dropdown {
    white-space: normal;
}

.input-box .k-dropdown .k-input {
    text-indent: 0;
    padding-left: 7px;
    padding-right: 7px;
}

/*Filament chatbot adjustments*/
/*.footer-sticky-buttons .stickyButtons {
    position: static;
    right: auto;
    top: auto;
    display: inline-block;
}*/