/*
 * This file controls the overall layout and default colors for the application and
 * should ONLY be changed if layout changes are required for ALL applications and clients.
 * To customise colors and images for individual clients, use the stylesheets in the
 * app_themes folder instead.
 */

:root {
    --header-left-color: #25BEC1;
    --primary-one-color: #517783;
    --primary-two-color: #6C9FAF;
    --secondary-one-color: #D8E4E8;
    --secondary-two-color: #C1D8E0;
    --accent-color: #26BDC1;
    --color-danger: #F45849;
    --txt-dark-4: #1d1d24;
    --txt-dark-3: #4c4c54;
    --txt-dark-2: #808085;
    --txt-dark-1: #cdcdce;
    --txt-light-3: #EDEFF0;
    --txt-light-2: #f7f8fa;
    --txt-light-1: #ffffff;
    --hover-color: #f0f0f1;
    --warning-base: #fba002;
    --primary-base: #558999;
    --info-50: #e3f3ff;
    --font-size: 16px;
    --color-orange: #FBA002;
    --color-green: #8CD594;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@font-face {
    font-family: "Lato";
    src: url(Lato-Regular.woff2)
}

@font-face {
    font-family: "Roboto";
    src: url(Roboto-Regular.ttf)
}

::selection {
    background-color: var(--txt-dark-2);
    color: white;
}

.talentApp-scroller {
    position: fixed;
    top: 48px;
    right: 0;
    bottom: 30px;
    left: 40px;
    padding: 0px;
    overflow-y: auto;
    background-color: #FFF;
}

.fixed-width-container {
    max-width: 1200px;
    margin: auto;
}

.Tile-checkbox,
.user_config.PROFILE,
.btn-link,
.Radslider-minimal *,
.filter-pill,
a {
    transition: all .3s;
}

/*Remove chrome blue outline*/
*:focus {
    outline: none;
}

.half-opacity {
    opacity: 0.5;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

hr {
    border-top: 1px;
}

    hr.light-grey {
        border-top: 1px solid #bebebe;
    }

button, input[type=submit], input[type=reset] {
    border: none;
    border-radius: 2px;
    font-size: 0.875em;
    line-height: 30px;
    padding: 1px 12px;
    text-align: center;
    text-decoration: none;
    background-color: #26BDC1;
    color: #FFF;
    font-weight: 700;
    text-transform: none;
}
/********************************************auxiliars**********************************/
.position-relative {
    position: relative;
}
/**************ALL ABOUT BUTTONS: CHIVAS************/

input[type=submit], input[type=reset] {
    color: #FFF !important;
}

.RadRadioButton, .RadButton, .RadButton_BlackMetroTouch, .rbRadioButton, .rbRounded, .rbIconButton, .RadGrid_Bootstrap .rgExpand, .RadGrid_Bootstrap .rgCollapse,
.RadComboBox .rcbReadOnly .rcbActionButton, .RadComboBox .rcbReadOnly.rcbHovered .rcbActionButton, .RadComboBox .rcbReadOnly.rcbFocused .rcbActionButton, .RadComboBox .rcbReadOnly.rcbExpanded .rcbActionButton,
.RadGrid .t-button .rgActionButton .rgExpand, .RadGrid .t-button .rgActionButton .rgCollapse, .RadGrid .t-button {
    background-color: transparent;
    font-weight: normal !important;
}

/***********RAD GRID OPTION BUTTON (CONTEXT MENU)*/
input[type="submit"].rgOptions {
    background-color: transparent !important;
}

/*.button {
    float: left;
    min-width: 90px;
    min-height: 35px;
    margin: 10px 10px 40px 4px;
    padding: 0 10px;
    border: 1px solid #26BDC1;
    background: #26BDC1;
    color: white;
    font-weight: 400;
    font-size: 0.875em;
    text-transform: none;
    text-decoration: none;
    border-radius: 2px;
    transform: translateZ(0);
}*/
.bold {
    font-weight: bold;
}

.btn-circle-ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: #f5f6f7;
    z-index: 3;
    height: 1px;
    width: 1px;
    border: 1px solid white;
    opacity: 0;
    animation: ripple .3s ease-in;
}

.btn-circle-ripple-fast {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: #f5f6f7;
    z-index: 3;
    height: 1px;
    width: 1px;
    border: 1px solid currentcolor;
    opacity: 0;
    animation: fastripple .6s ease-out;
    animation-iteration-count: 1;
    background-color: transparent;
}

.rmItem.rmTemplate span.menu-image {
    overflow: hidden !important;
    height: 40px;
    padding-top: 6px;
    position: relative;
}

.filter-button-list button,
.ripple-effect, #primaryNav .btnMenu {
    position: relative !important;
    overflow: hidden !important;
}

#primaryNav .btn-circle-ripple {
    animation: smallripple .3s ease-in;
}

@keyframes fastripple {
    0% {
        height: 0px;
        width: 0px;
        opacity: 1;
        border-width: 1px;
        margin-top: 0px;
        margin-left: 0px;
    }

    20% {
        height: 100px;
        width: 100px;
        border-width: 5px;
        opacity: 0.5;
        margin-top: -50px;
        margin-left: -50px;
    }

    100% {
        height: 200px;
        width: 200px;
        border-width: 1px;
        opacity: 0;
        margin-top: -100px;
        margin-left: -100px;
    }
}

@keyframes ripple {
    0% {
        transform: scale(0, 0);
        opacity: .3;
    }

    70% {
        transform: scale(18, 18);
        opacity: 0.5;
    }

    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

@keyframes smallripple {
    0% {
        transform: scale(0, 0);
        opacity: .4;
    }

    80% {
        transform: scale(80, 80);
        opacity: 0.8;
    }

    100% {
        transform: scale(100, 100);
        opacity: 0;
    }
}

.RadFilter_MetroTouch .rfApply input,
.btn, .RadUpload_Bootstrap .ruSelectWrap .ruButton, .rcpApplyButton,
.ui-dialog.ui-widget .ui-dialog-buttonpane .ui-button, button.button {
    border: none;
    border-radius: 2px !important;
    font-size: 14px !important;
    line-height: 30px;
    text-align: center !important;
    text-decoration: none !important;
    text-decoration-line: none;
    text-decoration-style: solid;
    text-decoration-color: currentcolor;
    display: inline-grid !important;
    cursor: pointer !important;
    min-width: 100px;
    color: white;
    font-weight: 700 !important;
    text-align: center !important;
    align-content: center !important;
    vertical-align: unset !important;
    height: 35px !important;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

RadUpload_Bootstrap .ruSelectWrap .ruButton, .rcpApplyButton,
.ui-dialog.ui-widget .ui-dialog-buttonpane .ui-button {
    color: white !important;
}

.filter-button-list button:hover, .filter-button-list button.rbChecked:hover, .btn:hover, .ruButton.ruRemove:hover, .RadUpload_Bootstrap .ruSelectWrap .ruButton, button.button:hover {
    filter: drop-shadow(1px 1px 3px #b0b4b5) brightness(105%);
}

.btn-md {
    padding: 0 !important;
    width: 140px !important;
    height: 40px;
}

.btn-lg {
    padding: 0 !important;
    width: 220px !important;
    height: 40px;
}

.btn-sm {
    padding: 0 5px !important;
    width: 100px !important;
    line-height: 24px !important;
    height: 24px !important;
}

    .btn-sm input {
        line-height: 20px !important;
    }

.btn-xs {
    padding: 0 !important;
    width: 64px !important;
    line-height: 24px !important;
    height: 24px !important;
    min-width: 0;
}

    .btn-xs input {
        top: -2px;
        position: relative !important;
    }

.RadCalendarMonthView .rcButtons a,
.RadCalendarMonthView .rcSelected a,
.btn-default, .btn.btn-default, input[type="submit"].btn-default {
    background-color: white !important;
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
}

    .btn.btn-default input, .btn-default input {
        background-color: white !important;
        color: var(--accent-color) !important;
    }

.btn-flat, input[type="submit"].btn-flat, .RadButton.btn-flat {
    background-color: white !important;
    color: #7c7c7c !important;
    border: none;
}

    .btn-flat input {
        color: #7c7c7c !important;
    }

.RadButton.btn-lightgrey {
    background-color: #f4f5f6 !important;
    color: #7c7c7c !important;
    border: none !important;
}

.btn-check.rbSkinnedButtonChecked,
.btn-primary, RadUpload_Bootstrap .ruSelectWrap .ruButton, .rcpApplyButton, .ui-dialog.ui-widget .ui-dialog-buttonpane .ui-button,
.ui-button.ui-widget {
    background-color: var(--accent-color) !important;
    color: white !important;
    font-weight: 700;
    text-align: center !important;
    align-content: center !important;
    height: 33px;
    background-image: none !important;
}

    .btn-check.rbSkinnedButtonChecked * {
        color: white !important;
    }

.btn-danger {
    background-color: #f24400 !important;
    color: white !important;
}

.btn-primary input {
    color: white !important;
}



button:disabled, input[type=submit]:disabled, input[type=reset]:disabled {
    opacity: 0.7;
    cursor: not-allowed !important;
}

.btn-secondary {
    background-color: transparent !important;
    border: solid 1px #26BDC1 !important;
    color: #26BDC1;
    font-weight: 400 !important;
    text-transform: none !important;
    cursor: pointer;
}

    .btn-secondary input {
        color: #26BDC1 !important;
    }

.btn-secondary_disabled {
    background-color: transparent !important;
    border: solid 1px #B6CFD7 !important;
    color: #B6CFD7 !important;
    opacity: 1 !important;
    font-weight: 400 !important;
    cursor: not-allowed !important;
}

.RadCalendarMonthView .rcButtons #rcMView_Cancel,
.btn-warning, .btn.btn-warning, input[type="submit"].btn-warning {
    background-color: white !important;
    border: solid 1px #F45849 !important;
    color: #F45849 !important;
    font-weight: 400 !important;
    text-transform: none !important;
    cursor: pointer !important;
}

    .btn-warning input, .btn.btn-warning input {
        background-color: white !important;
        color: #F45849 !important;
    }

.btn.btn-warning_disabled, .btn-warning_disabled {
    background-color: white !important;
    border: solid 1px #F8958B !important;
    color: #F8958B !important;
    opacity: 1 !important;
    font-weight: 400 !important;
    cursor: not-allowed !important;
}

.btn.btn-danger, .btn-danger {
    background-color: #F45849 !important;
    border: none !important;
    color: #FFFFFF;
    font-weight: 700 !important;
    text-transform: none !important;
    cursor: pointer;
}

    .btn.btn-danger input, .btn-danger input {
        color: #FFF !important;
        background-color: #F45849 !important;
    }

.btn-danger_disabled, .btn.btn-danger_disabled {
    background-color: #F8958B !important;
    border: none !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
    font-weight: 700 !important;
    cursor: not-allowed !important;
}


.btn-switch {
    width: 34px !important;
    height: 16px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    margin: 0 10px;
}

.btn-invisible {
    text-align: inherit !important;
    border: none !important;
    margin: 0px;
    padding: 0px !important;
    width: 100%;
}

.chk-switch {
    width: 32px;
}

    .chk-switch .rbText {
        display: none;
    }

    .chk-switch .rbIcon.p-icon.p-i-checkbox-checked.rbToggleCheckboxChecked {
        background: url(../images/svg/on.svg) no-repeat;
        width: 32px;
    }

    .chk-switch .rbIcon.p-icon.p-i-checkbox.rbToggleCheckbox {
        background: url(../images/svg/off.svg) no-repeat;
        width: 32px;
    }

    .chk-switch .rbIcon::before, .chk-switch .rfdCheckboxChecked::before {
        content: unset !important;
    }


.filter_buttonImportant {
    font-size: 24px !important;
    padding: 7px 20px !important;
    background-color: #029EE0 !important;
    border-radius: 0 !important;
    -webkit-text-fill-color: white !important;
}

.btn .rbSplitRight {
    background-image: url(../images/svg/icn_arrowdown-active.svg) !important;
    background-repeat: no-repeat !important;
    margin: 0 !important;
    background-position: center !important;
}

.btn-split-context ul {
    padding: 0 !important;
}

.btn-split-context .RadMenu_Bootstrap .rmGroup {
    border: none;
}

.btn-split-context .rmLink.btn {
    width: 100px !important;
    min-width: 100px;
    height: 32px;
    padding: 0px !important;
}

    .btn-split-context .rmLink.btn span {
        padding: 0 !important;
    }
/**************ALL ABOUT BUTTONS:END************/
.button:hover {
    background: #26BDC1;
    text-decoration: none;
    cursor: pointer;
}

.smallButton {
    float: none !important;
    min-width: 2em;
    min-height: 1em;
    margin: 12px 0 10px 0;
    border-radius: 4px;
    padding: 6px 12px;
    background: #26BDC1;
    color: white;
    font-size: 0.875em;
    font-weight: 400;
    text-transform: /*uppercase;*/ none;
    text-decoration: none;
    cursor: pointer;
}

/*
 * START: Master Page
 */

.header {
    height: 40px;
    width: 170px;
    margin-top: 10px;
    margin-left: 30px;
    float: left;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 10px 0;
}

.logo {
    float: left;
    margin-left: 58px;
    margin-top: 14px;
    height: 32px;
    width: 118px;
    background-size: contain !important;
    background-repeat: no-repeat;
}

.copyright {
    color: #fff !important;
}

    .copyright > a {
        text-decoration: none !important;
    }

.center_v {
    position: relative !important;
    top: 50% !important;
    /*transform: translateY(-50%) !important; causing issues*/
}


.MAIN-HEADER {
    position: fixed;
    top: 0;
    z-index: 5000;
    width: 100%;
    height: 48px;
    line-height: 48px;
    background-position: center center;
    background-size: cover;
    display: flex;
    background: var(--accent-color);
    background: -moz-linear-gradient(left, var(--accent-color) 0%, #517783 100%);
    background: -webkit-linear-gradient(left,var(--accent-color) 0%, #517783 100%);
    background: linear-gradient(to right, var(--accent-color) 0%,#517783 100%);
    z-index: 100000;
}

    .MAIN-HEADER .HEADER-COLUMN {
        width: 100%;
    }

        .MAIN-HEADER .HEADER-COLUMN:first-child {
            min-width: 350px;
            width: 350px;
        }

            .MAIN-HEADER .HEADER-COLUMN:first-child .logo {
                background-size: contain !important;
                width: 250px !important;
                height: 38px;
                margin: 5px;
                margin-left: 30px;
            }

        .MAIN-HEADER .HEADER-COLUMN:last-child {
            text-align: right;
        }

            .MAIN-HEADER .HEADER-COLUMN:last-child > div {
                display: table-cell;
            }

            .MAIN-HEADER .HEADER-COLUMN:last-child > a, .MAIN-HEADER .HEADER-COLUMN:last-child > div {
                display: inline-flex;
                margin: 0 13px;
            }

    .MAIN-HEADER .linkSupport {
        top: 9px;
        position: relative;
    }

    .MAIN-HEADER .PROFILE {
        color: white !important;
        position: relative !important;
    }

        .MAIN-HEADER .PROFILE .INITIALS {
        }

        .MAIN-HEADER .PROFILE .PICTURE {
        }

        .MAIN-HEADER .PROFILE .INITIALS, .MAIN-HEADER .PROFILE .PICTURE {
            height: 36px;
            width: 36px;
            top: 5px;
            border-radius: 50%;
            border: 1px solid white;
            line-height: 30px;
            color: white;
            text-align: center;
            margin: 0 37px 0 7px;
            position: relative;
            object-fit: cover;
            padding: 3px;
        }

        .MAIN-HEADER .PROFILE:hover .PROFILE-BUTTON .INITIALS, .MAIN-HEADER .PROFILE:hover .PROFILE-BUTTON .PICTURE {
            border-width: 3px;
            height: 36px;
            width: 36px;
            line-height: 36px;
            padding: 1px;
        }

        .MAIN-HEADER .PROFILE:hover .NAME {
            text-decoration: underline !important;
        }

    .MAIN-HEADER .PROFILE-BUTTON {
        display: flex;
    }

    .MAIN-HEADER .PROFILE-COMBO {
        position: absolute;
        width: 100% !important;
        background: transparent !important;
        border: none !important;
        opacity: 1;
        cursor: pointer;
        left: 0;
    }

        .MAIN-HEADER .PROFILE-COMBO .rcbInputCell.rcbInputCellLeft {
            display: none;
        }

        .MAIN-HEADER .PROFILE-COMBO table td.rcbArrowCell, .PROFILE-COMBO table td.rcbArrowCell a {
            height: 50px !important;
            width: 100% !important;
            position: absolute !important;
            background-color: transparent !important;
            border: none !important;
        }

            .MAIN-HEADER .PROFILE-COMBO table td.rcbArrowCell a {
                background-position-x: right !important;
                background-size: 32px;
                background-image: url(../Images/svg/icn_arrowdown-prim.svg) !important;
            }



    .MAIN-HEADER .btn-walktrough {
        position: relative;
    }

        .MAIN-HEADER .btn-walktrough .WalkthroughBox {
            top: 49px;
        }

    .MAIN-HEADER .MAIN-EUA {
        top: 10px;
        position: relative;
    }

        .MAIN-HEADER .MAIN-EUA a {
            color: white;
            text-decoration: none;
            line-height: 30px;
            margin-left: 30px;
        }

            .MAIN-HEADER .MAIN-EUA a:hover {
                text-decoration: underline;
                color: #E7EFF2;
            }

            .MAIN-HEADER .MAIN-EUA a.btn, .MAIN-HEADER #ctl00_btnResetFTUE {
                height: 30px !important;
                min-width: 100px !important;
                width: 100px !important;
            }

    .MAIN-HEADER #ctl00_btnResetFTUE {
        top: 3px;
        position: relative;
    }

    .white-dropdown table *,
    .MAIN-HEADER .MAIN-EUA .EUA-combo table,
    .MAIN-HEADER .MAIN-EUA .EUA-combo table.rcbHovered,
    .MAIN-HEADER .MAIN-EUA .EUA-combo table.rcbFocused,
    .MAIN-HEADER .MAIN-EUA .EUA-combo .rcbInputCell.rcbInputCellLeft,
    .MAIN-HEADER .MAIN-EUA .EUA-combo .rcbInputCell.rcbInputCellLeft input[type="text"],
    .MAIN-HEADER .MAIN-EUA .EUA-combo .rcbArrowCell.rcbArrowCellRight,
    .MAIN-HEADER .MAIN-EUA .EUA-combo .rcbArrowCell.rcbArrowCellRight a,
    .MAIN-HEADER .MAIN-EUA .EUA-combo table.rcbHovered .rcbInputCell.rcbInputCellLeft,
    .MAIN-HEADER .MAIN-EUA .EUA-combo table.rcbHovered .rcbInputCell.rcbInputCellLeft input[type="text"],
    .MAIN-HEADER .MAIN-EUA .EUA-combo table.rcbHovered .rcbArrowCell.rcbArrowCellRight,
    .MAIN-HEADER .MAIN-EUA .EUA-combo table.rcbHovered .rcbArrowCell.rcbArrowCellRight a,
    .MAIN-HEADER .MAIN-EUA .EUA-combo table.rcbFocused .rcbInputCell.rcbInputCellLeft,
    .MAIN-HEADER .MAIN-EUA .EUA-combo table.rcbFocused .rcbInputCell.rcbInputCellLeft input[type="text"],
    .MAIN-HEADER .MAIN-EUA .EUA-combo table.rcbFocused .rcbArrowCell.rcbArrowCellRight,
    .MAIN-HEADER .MAIN-EUA .EUA-combo table.rcbFocused .rcbArrowCell.rcbArrowCellRight a {
        color: white !important;
        border: none;
        background-color: transparent !important;
        height: 30px;
        box-shadow: none;
    }

.white-dropdown table td {
    border: none !important;
}

    .white-dropdown table td input {
        font-size: 22px;
    }

.white-dropdown table,
.MAIN-HEADER .MAIN-EUA .EUA-combo {
    border-bottom: 1px solid white !important;
}

    .white-dropdown .rddlIcon,
    .white-dropdown .rcbArrowCell.rcbArrowCellRight a,
    .MAIN-HEADER .MAIN-EUA .EUA-combo table .rcbArrowCell.rcbArrowCellRight a {
        background-image: url(../Images/svg/icn_arrowdown-prim.svg) !important;
    }

.PROFILE-DROPDOWN {
    position: absolute !important;
    right: 0px;
    z-index: 100000000000;
}

.tinyMarging .rcbList li {
    margin: 5px !important;
}

/***************header end******************/
.masterResponsivePanel {
    position: fixed;
    top: 48px;
    right: 0;
    bottom: 30px;
    left: 40px;
    padding: 0px 20px 0px 20px;
    overflow-y: auto;
    background-color: #FFF;
    z-index: 2000;
}

#pnlVsPage {
    width: 100%;
}

.ui-widget-header {
    border: none !important;
    background: none !important;
    color: #000000 !important;
    font-weight: bold;
    text-align: center;
    text-align: -moz-center;
    text-align: -webkit-center;
}

.ui-dialog-titlebar {
    margin-left: 50px;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: none !important;
    text-align: center !important;
    margin-left: 20px !important;
    padding-top: 7px !important;
}

.ui-dialog.ui-widget .ui-dialog-titlebar,
.timeout-warning .ui-dialog-titlebar {
    text-align: left;
    margin: 0;
    padding: 0 !important;
    cursor: default !important;
}

.ui-dialog.ui-widget .ui-dialog-titlebar-close,
.timeout-warning .ui-dialog-titlebar-close {
}


.jmdTeachMe svg:hover {
    filter: saturate(1.5);
}

#jmdTeachMe {
    overflow: auto;
    display: none;
    z-index: 3100;
    max-height: 65vh !important;
    border: 1px solid #bebebe;
    padding: 0;
    margin-top: 25px;
    background: white;
}


#frmTeachMe {
    height: 54vh;
    width: 100%;
    border: none;
}

.footer {
    width: 100%;
    height: 30px;
    position: fixed;
    bottom: 0;
    z-index: 3000;
}

    .footer * {
        font-size: 12px;
        line-height: 30px;
        color: white;
    }


    .footer a:hover {
        color: #ADA8B4;
    }

.footerLeft {
    position: relative;
    float: left;
    left: 50px;
    height: 30px !important
}

.footerRight {
    float: right;
    margin-right: 300px;
    height: 30px;
}

    .footerRight img {
        vertical-align: middle;
    }

/*
 * END: Master Page Layout
 */

/*
 * START: talentApp panel layout
 */

.currentUserBanner {
    position: fixed;
    top: 48px;
    left: 0;
    height: 180px;
    width: 100%;
    background-color: #F4F1EB;
    z-index: 3000;
}

    .currentUserBanner img {
        position: relative;
        float: left;
        height: 180px;
        width: 180px;
        border-radius: 180px;
        margin-top: 40px;
        margin-left: 10px;
    }


.menuToggle {
    float: left;
    padding-top: 10px;
    padding-left: 8px;
}

    .menuToggle input {
        display: block;
        width: 24px;
        height: 24px;
        position: absolute;
        cursor: pointer;
        opacity: 0;
        z-index: 2;
        -webkit-touch-callout: none;
    }

    .menuToggle .hamburger {
        display: block;
        width: 28px;
        height: 28px;
        border-radius: 2px;
    }

    .menuToggle .hamburger-collapsed {
        background-image: url(../images/svg/icn_open-menu.svg) !important;
        background-repeat: no-repeat !important;
    }

        .menuToggle .hamburger-collapsed.gray {
            filter: brightness(0.3);
            background-color: transparent !important;
        }

    .menuToggle .hamburger-expanded {
        background-image: url(../images/svg/icn_close-menu.svg) !important;
        background-repeat: no-repeat !important;
    }

        .menuToggle .hamburger-expanded.gray {
            filter: brightness(0.3);
            background-color: transparent !important;
        }

#primaryNav .btnMenu .menu-image.gray,
#primaryNav .btnMenu .menu-text.gray {
    color: #4C4C54 !important;
}

.menuToggle .colapseMenu {
    display: none !important;
    background-image: url(../images/svg/icn_close-active.svg) !important;
    background-repeat: no-repeat !important;
    content: " ";
    transform: scale(2,2);
}

.actionNavigationBar {
    height: 70px;
    width: auto;
    margin-bottom: 5px;
}

    .actionNavigationBar ul {
        height: 30px;
        margin: 0;
        margin-left: 12px;
        padding: 0;
        list-style: none;
    }

    .actionNavigationBar li {
        display: inline;
        float: left;
        z-index: 0;
        margin-left: 0;
        margin-bottom: 5px;
        list-style: none;
        height: 20px;
        transform: translateZ(0);
    }

        .actionNavigationBar li a {
            font-weight: bold;
            line-height: 35px;
            padding-left: 10px;
            text-decoration: underline;
            text-transform: uppercase;
        }

            .actionNavigationBar li a:hover {
                text-decoration: none;
                color: #A4C0C6;
            }

        .actionNavigationBar li.navon a {
            text-decoration: none;
            color: #A4C0C6;
        }

.ddlOrganisations {
    margin-right: 27px;
    margin-bottom: 9px;
    min-width: 150px;
    color: white;
}

#ctl00_contentBody_personProfileTabs_personProfile,
#ctl00_contentBody_review180Actions_review180Actions,
#ctl00_contentBody_talentProfileActions_talentProfileActions {
    position: fixed !important;
    top: 80px !important;
    left: 250px !important;
    right: 16px !important;
}

/*
 * END: talentApp panel layout
 */

/*
 * START: Login Page
 */

.containerLoginPanel {
    height: 500px;
}

.loginPanel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    line-height: 50px;
    text-align: center;
    background-color: #DCDCDC;
    border-color: #DDD #DDD #DCDCDC;
    box-shadow: 0 2px 0 #afafaf;
    box-shadow: 0 2px 0 rgba(175, 175, 175, 0.12);
}

    .loginPanel #contentBody_btnOk {
        width: 50%;
        margin-top: 50px;
    }

/*
 * END: Login Page
 */

p:first-child {
    margin-top: 0;
}

select, [id*="ddl"] {
    height: 35px;
    width: 400px !important;
    padding: 10px 0;
    border: 0;
    outline: 0;
    background: transparent;
    border-bottom: 1px solid darkgray;
    box-sizing: border-box;
}



select, [id="ddlGoal"] {
    height: 35px;
    width: 550px !important;
    padding: 10px 0;
    border: 0;
    outline: 0;
    background: transparent;
    border-bottom: 1px solid darkgray;
    box-sizing: border-box;
}

input[id^="txt"] {
    height: 35px;
    padding: 2px 10px;
    border: 0;
    outline: 0;
    background: transparent;
    border-bottom: 1px solid darkgray;
}

.lookupBox {
    position: relative;
    float: left;
    height: 35px;
    width: 400px;
    border: 0;
    outline: 0;
    background: transparent;
    border-bottom: 1px solid darkgray;
}

.empty {
    background-color: lightgoldenrodyellow !important;
}

img {
    padding: 0;
    border: 0;
}

.imgPhoto {
    width: auto;
    height: 100px;
    display: block;
    margin: auto;
}



table {
    empty-cells: hide;
    width: 100%;
}

th a {
    color: white;
    text-decoration: none;
    padding-bottom: 0;
    background: url(../images/hr-link-underline.png) repeat-x left bottom;
}

    th a:hover {
        color: #ADA8B4;
        text-decoration: none;
    }

.heading2 {
    margin: 0;
    padding: 0;
    font-size: 1.2em;
    font-weight: bold;
    color: #7c7e9c;
    vertical-align: middle;
}

div.left {
    width: 80%;
    float: left;
}

div.right {
    width: 20%;
    float: right;
}

div.scroll {
    max-height: 400px;
    overflow: auto;
}

.clear {
    clear: both;
    margin: 0;
    padding: 0;
}

.tableLayout {
    margin: 0;
    padding: 0;
    border: 0;
    background-color: white;
    background-image: none;
}

    .tableLayout tr {
        vertical-align: top;
        background-color: white;
        background-image: none;
    }

    .tableLayout th, .tableLayout td {
        background-color: white;
        background-image: none;
    }

.tableEntry, .gridView, .gridViewInner {
    margin: 0;
    margin-top: 10px;
    margin-bottom: 5px;
    padding: 0;
    padding-top: 6px;
    border: 0;
    border-collapse: collapse;
    width: 100%;
}

    .tableEntry tr, .gridView tr, .gridViewInner tr {
        vertical-align: top;
    }

    .tableEntry th, .gridViewInner th {
        font-weight: normal;
        margin: 0;
        color: white;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#797979), to(#797979)); /* Saf4+, Chrome */
        background-image: -webkit-linear-gradient(top, #797979, #797979); /* Chrome 10+, Saf5.1+, iOS 5+ */
        background-image: -moz-linear-gradient(top, #797979, #797979); /* FF3.6 */
        background-image: -ms-linear-gradient(top, #797979, #797979); /* IE10 */
        background-image: -o-linear-gradient(top, #797979, #797979); /* Opera 11.10+ */
        background-image: linear-gradient(top, #797979, #797979);
        background-repeat: repeat-y;
        border-left: 1px solid white;
        border-bottom: 1px solid white;
        vertical-align: middle;
        height: 25px;
    }

        .tableEntry th a, .gridViewInner th a {
            color: white;
        }

            .tableEntry th a:link {
                color: white;
                text-decoration: none;
            }

            .tableEntry th a:hover {
                color: #ADA8B4;
                text-decoration: none;
            }

    .gridView td, .gridViewInner.td {
        margin: 0;
        padding: 7px 0 7px 0;
        vertical-align: middle;
        color: #7C7C7C;
        margin: 0;
        height: 25px;
    }

    .tableEntry td:not(.tg-editor) {
        margin: 0;
        padding: 7px 0 7px 0;
        vertical-align: middle;
        color: #7C7C7C;
        margin: 0;
        height: 25px;
    }

    .tableEntry .label {
        width: 20%;
        vertical-align: middle;
    }

    .tableEntry:not(.tg-editor) td,
    .tableEntryy:not(.tg-editor) th {
        height: revert !important;
    }

    .tableEntry:not(.tg-editor) td {
        padding: 0px !important;
    }

    .gridView tr {
        height: 50px;
        border-bottom: 1px solid lightgray;
    }

        .gridView tr:first-child {
            height: auto;
            border: 0;
        }

        .gridView tr:last-child {
            border: 0;
        }

    .gridViewInner th {
        background-color: #6F6F6F;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#72757b), to(#72757b)); /* Saf4+, Chrome */
        background-image: -webkit-linear-gradient(top, #72757b, #72757b); /* Chrome 10+, Saf5.1+, iOS 5+ */
        background-image: -moz-linear-gradient(top, #72757b, #72757b); /* FF3.6 */
        background-image: -ms-linear-gradient(top, #72757b, #72757b); /* IE10 */
        background-image: -o-linear-gradient(top, #72757b, #72757b); /* Opera 11.10+ */
        background-image: linear-gradient(top, #72757b, #72757b);
        height: 25px;
        padding: 5px;
    }

.gridViewInner2 th {
    background-color: #9E9E9E;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#B3B3BE), to(#B3B3BE)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, #B3B3BE, #B3B3BE); /* Chrome 10+, Saf5.1+, iOS 5+ */
    background-image: -moz-linear-gradient(top, #B3B3BE, #B3B3BE); /* FF3.6 */
    background-image: -ms-linear-gradient(top, #B3B3BE, #B3B3BE); /* IE10 */
    background-image: -o-linear-gradient(top, #B3B3BE, #B3B3BE); /* Opera 11.10+ */
    background-image: linear-gradient(top, #B3B3BE, #B3B3BE);
    height: 25px;
    font-weight: normal;
}

.chivas-grid {
    border: none !important;
    height: 100%;
    position: relative;
    width: 100%;
}

.RadGrid_Bootstrap .rgRow > td, .RadGrid_Bootstrap .rgAltRow > td, .RadGrid_Bootstrap .rgEditRow > td {
    border-color: #d8e4e8;
}

.RadGrid_Bootstrap .rgCommandRow {
    background: white !important;
    border: none;
}

.chivas-grid table.rgDetailTable > tr, .chivas-grid table.rgDetailTable {
    background: white;
    border-collapse: collapse;
}

.chivas-grid .rgFilterRow td {
    background-color: #d8e4e8;
    background-color: #d8e4e850;
}

.chivas-grid.chivas-grid-table {
    height: auto;
}

.chivas-grid.RadGrid_Bootstrap {
    background-color: rgba(255,255,255,0.2) !important;
}

.grid-header-action-buttons {
    width: 100%;
    display: flex;
    position: relative;
    height: 50px;
    right: 0;
    margin-top: 20px;
}

    .grid-header-action-buttons.with-pager {
        top: 35px;
        position: absolute;
        margin: 0;
    }

.chivas-grid.RadGrid_Bootstrap .rgPagerCell {
    width: 100%;
    display: inline-flex;
    height: 80px;
    padding: 0;
}

/*    .chivas-grid.RadGrid_Bootstrap .rgPagerCell .rgPageFirst {
        background-position: -111px -709px;
    }
    .chivas-grid.RadGrid_Bootstrap .rgPagerCell .rgPagePrev {
        background-position: -111px -109px;
    }*/

.chivas-grid.chivas-grid-table .rgPager, .chivas-grid.chivas-grid-table tr:hover .rgPager {
    background-color: white !important;
}

.chivas-grid.chivas-grid-table table {
    border-collapse: collapse;
}

    .chivas-grid.chivas-grid-table table td, .chivas-grid.chivas-grid-table table tr {
        border: none
    }

.chivas-grid.RadGrid_Bootstrap tfoot .rgPagerCell {
    height: 40px;
    margin-top: 5px;
    background-color: #d8e4e8 !important;
    background-color: #d8e4e850 !important;
}

.chivas-grid.RadGrid_Bootstrap.chivas-grid-smallpager .rgPagerCell {
    height: 54px;
}

.chivas-grid .rgPagerCell.NextPrevAndNumeric div:first-of-type {
    width: 100%;
    text-align: right !important;
}

.chivas-grid.RadGrid_Bootstrap .rgPagerCell div {
    float: unset !important;
    text-align: left;
    margin-top: 0;
}

.chivas-grid.RadGrid .rgNumPart {
    display: flex;
}

.chivas-grid.RadGrid .rgPager {
    vertical-align: top;
}

.chivas-grid.RadGrid .rgClipCells {
    position: relative;
}

.chivas-grid.RadGrid .rgInfoPart {
    width: 100%;
}

    .chivas-grid.RadGrid .rgInfoPart strong:first-of-type {
        font-weight: bold;
    }

.chivas-grid.RadGrid .rgAdvPart {
    margin-right: 30px;
}

    .chivas-grid.RadGrid .rgAdvPart > span.rgPagerLabel {
        padding-right: 0 !important;
        margin-right: 0 !important;
    }

    .chivas-grid.RadGrid .rgAdvPart .rcbInputCell.rcbInputCellLeft input {
        text-align: right !important;
    }


.chivas-grid.RadGrid_Bootstrap .rgPager > td,
.chivas-grid.RadGrid_Bootstrap .rgPagerCell,
.chivas-grid.RadGrid_Bootstrap .rgPagerCell *:not(.btn-primary),
.RadGrid_Bootstrap.chivas-grid .rgPager input *,
.RadGrid_Bootstrap.chivas-grid .rgPager a {
    border: none !important;
    background-color: transparent !important;
    color: #7c7c7c;
}

    .RadGrid_Bootstrap.chivas-grid .rgPager a.rgCurrentPage {
        border: 1px solid var(--accent-color) !important;
        color: var(--accent-color) !important;
        background-color: transparent !important;
    }


.chivas-grid .grid-radio-button {
    width: 12px;
    height: 12px;
    border: 1px solid #000;
    border-radius: 24px;
    background-color: white;
    cursor: pointer !important;
}

.chivas-grid .rgSelectedRow > td {
    color: #535353 !important;
}

.chivas-grid .rgSelectedRow .grid-radio-button {
    background-color: black !important;
    box-shadow: inset 0 0 0px 2px white;
}


.chivas-grid .rgAltRow:hover .grid-radio-button,
.chivas-grid .rgRow:hover .grid-radio-button {
    background-color: #fbfbfb;
}

.RadGrid_Bootstrap .rgSelectedCell a, .RadGrid_Bootstrap .rgSelectedRow a {
    color: inherit !important;
}

.chivas-grid.chivas-grid-noPadding th, .chivas-grid.chivas-grid-table.chivas-grid-noPadding th {
    padding: 0px !important;
    min-height: 40px !important;
    height: 40px;
}

.chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap th.rgHeader.rgGroupCol {
    line-height: 0px;
}

.chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap tr.rgGroupHeader > td.rgGroupCol {
    background-color: #eaf0f2 !important;
    padding: 0 !important;
    padding-left: 10px !important;
}

.chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap tr > td.rgGroupCol ~ td {
    padding-left: 10px !important;
}

.chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap tbody > tr:hover > td::before {
    content: " ";
    background: #e9f1f3;
    position: absolute;
    width: 10px;
    height: 100%;
    top: 0;
    left: -5px;
}

.chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap tbody > tr:hover > td:first-of-type::before {
    display: none;
}

.btnExportCSV {
    border: none !important;
    background: transparent !important;
    width: 154px !important;
}


    .btnExportCSV.mainGrid {
        width: unset !important;
        margin-right: 15px;
    }

    .btnExportCSV span {
        background-size: contain !important;
        top: 6px !important;
        height: 20px !important;
        width: 20px !important;
    }

.commandTemplate {
    width: 100% !important;
    text-align: right !important;
    background-color: transparent !important;
}


.chivas-grid.RadGrid_Bootstrap .rgHeaderWrapper {
    border: none;
    background-color: #e9f0f2;
}

.chivas-grid .rgHeaderWrapper .rgHeaderDiv {
    border: none !important;
    margin-bottom: -5px !important;
    margin-right: -1px;
    border-right: 1px solid transparent !important;
    margin-top: -5px;
}

.chivas-grid .rgHeaderDiv .checkbox-header-title.rgHeader.rgCheck label {
    position: absolute;
    width: 100%;
    top: 5px;
    left: 0;
}

.chivas-grid .rgDataDiv > table, .chivas-grid.chivas-grid-nopager table {
    border-collapse: separate !important;
    border-spacing: 0 5px !important;
}

.RadGrid_Bootstrap table.rgGroupPanel {
    background-color: white;
    border: none;
}

.chivas-grid.chivas-grid-nopager table.rgGroupPanel {
    border-collapse: collapse !important;
}

    .chivas-grid.chivas-grid-nopager table.rgGroupPanel td {
        padding: 0 10px !important;
        border: 2px solid transparent !important;
    }

    .chivas-grid.chivas-grid-nopager table.rgGroupPanel tr:hover {
        border: 2px dashed white;
    }

    .chivas-grid.chivas-grid-nopager table.rgGroupPanel:hover td {
        box-shadow: none !important;
        border: 2px dashed white;
    }

.RadDock_Bootstrap .rdTable tr.rdTop td.rdLeft, .RadDock_Bootstrap .rdTable tr.rdTop td.rdCenter, .RadDock_Bootstrap .rdTable tr.rdTop td.rdRight {
    background: #d8e4e8 !important;
    background-color: #d8e4e8 !important;
}

.RadGrid_Bootstrap .rgHeader,
.chivas-grid.chivas-grid-table th, .gridView th,
.chivas-grid .rgHeaderDiv tr > th.rgHeader, .chivas-grid.chivas-grid-nopager thead th {
    background: #d8e4e8 !important;
    background-color: #d8e4e8 !important;
    border: none !important;
    position: relative;
    padding: 5px 15px !important;
}

.chivas-grid.chivas-grid-table th, .gridView th,
.chivas-grid .rgHeaderDiv tr > th.rgHeader, .chivas-grid.chivas-grid-nopager thead th {
    padding: 15px !important;
}

    .gridView th, .gridView th a, .gridView th a:link,
    .chivas-grid.chivas-grid-table th a, .chivas-grid.chivas-grid-table th {
        color: #535353 !important;
        text-decoration: none;
        font-weight: 400;
    }

.gridView th {
    padding: 10px !important;
}

.chivas-grid.chivas-grid-table td {
    padding: 0 20px;
    position: relative;
}

.chivas-grid .rgExpandCol {
    padding: 0 !important;
}

.chivas-grid.chivas-grid-table th + th:before,
.chivas-grid .rgHeaderDiv tr > th.rgHeader + th.rgHeader::before, .chivas-grid.chivas-grid-nopager thead th + th:before {
    content: '';
    width: 1px;
    border-left: 1px solid #bebebe;
    position: absolute;
    top: 10px;
    left: 0px;
    bottom: 10px;
}

.chivas-grid.RadGrid_Bootstrap .rgHeaderWrapper, .chivas-grid .rgHeaderDiv tr::after {
    z-index: -1 !important;
}

.chivas-grid .rgDataDiv tbody > .rgRow, .chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap > tr {
    position: relative;
}

.chivas-grid.GridDraggedRows td,
.chivas-grid.chivas-grid-table td,
.chivas-grid .rgDataDiv tr td, .chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap tr > td {
    border: none;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    position: relative;
}

    .RadGrid_Bootstrap .rgRow > td, .RadGrid_Bootstrap .rgAltRow > td, .RadGrid_Bootstrap .rgEditRow > td,
    .chivas-grid.chivas-grid-table td:first-child,
    .chivas-grid .rgDataDiv tr td:first-child, .chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap tr > td:first-child {
        border-left: 1px solid transparent;
    }


.chivas-grid.RadGrid_Bootstrap tr > td.rgGroupCol,
.chivas-grid.chivas-grid-table tr > td,
.chivas-grid.chivas-grid-table tr > td.rgPagerCell, .chivas-grid.chivas-grid-table tr:hover > td.rgPagerCell,
.chivas-grid.chivas-grid-table tr > td.rgPagerCell div,
.chivas-grid.chivas-grid-table tr.rgRow > td,
.chivas-grid.RadGrid_Bootstrap tr.rgRow > td.rgGroupCol,
.chivas-grid .rgDataDiv tbody > tr.rgRow,
.chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap > .rgRow {
    background: white !important;
    background-color: white !important;
    transform: scale(1);
    overflow: visible;
    box-sizing: border-box;
    min-height: 40px;
}

.chivas-grid.RadGrid_Bootstrap tr.rgAltRow > td.rgGroupCol,
.chivas-grid.chivas-grid-table tr:nth-child(2n+1):not(.rgRow):not(.rcbReadOnly) > td:not(.rgPagerCell),
.chivas-grid .rgDataDiv tbody > tr.rgAltRow,
.chivas-grid tr.rgAltRow > td, .RadGrid .rgAltRow, .RadGrid_Bootstrap .rgAltRow > td,
.chivas-grid.RadGrid_Bootstrap tr.rgAltRow > td.rgGroupCol,
.chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap > .rgAltRow {
    background: #f7f8fa !important;
    background-color: #f7f8fa !important;
    transform: scale(1);
    overflow: visible;
    box-sizing: border-box;
    min-height: 40px;
}

.gridView > tbody > tr {
    border: none;
}

    .gridView > tbody > tr:nth-child(even) {
        background: white !important;
        background-color: white !important;
    }

    .gridView > tbody > tr:nth-child(odd) {
        background: #f7f8fa !important;
        background-color: #f7f8fa !important;
    }

.chivas-grid .rgGroupCol .rgCollapse {
    background-image: url(../images/svg/icn_arrowdown-sec.svg);
    background-position: center;
    background-size: 20px;
}

.chivas-grid .rgGroupCol .rgExpand {
    background-image: url(../images/svg/icn_arrowdown-sec.svg);
    background-position: center;
    background-size: 20px;
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}


.gridView tr:hover > td,
.chivas-grid.chivas-grid-table tbody > tr:hover > td {
    background: #e9f1f3 !important;
    background-color: #e9f1f3 !important;
}

.chivas-grid .rgDataDiv tr:hover > td::after {
    content: "";
    width: 10px;
    height: 100%;
    background-color: #e9f1f3;
    position: absolute;
    right: -1px;
    top: 0;
    z-index: 1;
}

.chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap tbody > tr:hover > td::before {
    content: " ";
    background: #e9f1f3;
    position: absolute;
    width: 10px;
    height: 100%;
    top: 0;
    left: -5px;
}

.chivas-grid .rgDataDiv tr:hover > td::before {
    content: "";
    width: 16px;
    height: 100%;
    background-color: #e9f1f3;
    position: absolute;
    left: -9px;
    top: 0;
}


.chivas-grid .rgDataDiv tbody > tr:hover > td, .chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap tbody > tr:hover > td {
    -moz-box-shadow: 0 0 4px 0 #c8c8c8;
    -webkit-box-shadow: 0 0 4px 0 #c8c8c8;
    box-shadow: 0 0 4px 0 #c8c8c8;
    transition: box-shadow 0.3s;
    background: #e9f1f3 !important;
    background-color: #e9f1f3 !important;
    overflow: visible;
}

.chivas-grid.chivas-grid-table td:last-child, .chivas-grid .rgDataDiv tr td:last-child,
.chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap tr > td:last-child {
    border-right: 1px solid transparent;
}

.chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap tr > td, .chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap tr.rgSelectedRow > td {
    padding-left: 20px;
}


.chivas-grid tr.rgSelectedRow > td,
.chivas-grid.GridDraggedRows .rgSelectedRow > td,
.chivas-grid .rgDataDiv .rgSelectedRow > td,
.chivas-grid tbody > .rgSelectedRow > td,
.chivas-grid.RadGrid_Bootstrap tr.rgSelectedRow > td.rgGroupCol {
    border-top: 1px solid #6c9faf !important;
    border-bottom: 1px solid #6c9faf !important;
    background: #e9f1f3 !important;
    background-color: #e9f1f3 !important;
    border-color: #6c9faf !important;
}

    .chivas-grid.GridDraggedRows .rgSelectedRow > td:first-child,
    .chivas-grid .rgDataDiv .rgSelectedRow > td:first-child, .chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap .rgSelectedRow > td:first-child {
        border-left: 1px solid #6c9faf !important;
    }

    .chivas-grid.GridDraggedRows .rgSelectedRow > td:last-child,
    .chivas-grid .rgDataDiv .rgSelectedRow > td:last-child,
    .chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap .rgSelectedRow > td:last-child {
        border-right: 2px solid #6c9faf !important;
    }

.chivas-grid.GridDraggedRows .rgSelectedRow > td {
    border-style: dotted !important;
}

.chivas-grid.GridDraggedRows td, .chivas-grid.chivas-grid-table td, .chivas-grid .rgDataDiv tr td, .chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap tr > td {
    border: none;
    border-top-color: currentcolor;
    border-top-style: none;
    border-top-width: medium;
    border-right-color: currentcolor;
    border-right-style: none;
    border-right-width: medium;
    border-bottom-color: currentcolor;
    border-bottom-style: none;
    border-bottom-width: medium;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    position: relative;
}

.RadGrid_Bootstrap .rgGroupHeader > td {
    padding: 7px 0;
    padding-left: 0px;
    height: 32px;
    border-bottom: 1px solid #dedede;
}

.RadGrid .rgGroupHeader td {
    padding-top: 0;
    padding-bottom: 0;
}

.RadGrid .rgRow > td, .RadGrid .rgAltRow > td, .RadGrid .rgEditRow > td, .RadGrid .rgFooter > td, .RadGrid .rgFilterRow > td, .RadGrid .rgHeader, .RadGrid .rgResizeCol, .RadGrid .rgGroupHeader td {
    padding-left: 7px;
    padding-right: 7px;
}

.chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap tbody > tr.rgGroupHeader td {
    min-height: 40px;
}

.chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap tbody > tr.rgGroupHeader:hover > td {
    background: transparent !important;
    box-shadow: none !important;
}

    .chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap tbody > tr.rgGroupHeader:hover > td::before,
    .chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap tbody > tr.rgGroupHeader:hover > td::after {
        display: none;
    }


.chivas-grid .rgDataDiv tbody > tr:hover > td, .chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap tbody > tr:hover > td {
    -moz-box-shadow: 0 0 4px 0 #c8c8c8;
    -webkit-box-shadow: 0 0 4px 0 #c8c8c8;
    box-shadow: 0 0 4px 0 #c8c8c8;
    transition: box-shadow 0.2s;
    background: #e9f1f3 !important;
    background-color: #e9f1f3 !important;
}



.chivas-grid .rgDataDiv tr:hover > td:after {
    content: "";
    width: 10px;
    height: 100%;
    background-color: #e9f1f3;
    position: absolute;
    right: -1px;
    top: 0;
    z-index: 1;
}

.chivas-grid .rgDataDiv tr:hover > td::before {
    content: "";
    width: 16px;
    height: 100%;
    background-color: #e9f1f3;
    position: absolute;
    left: -9px;
    top: 0;
}
/*fix for dropdown inside grid*/
.chivas-grid .rgDataDiv tr:hover > td .talent-combo tr td::before, .chivas-grid .rgDataDiv tr:hover > td .talent-combo tr td::after {
    content: '' !important;
    display: none;
}

.chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap tr > td, .chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap tr.rgSelectedRow > td {
    padding-left: 20px;
}

.chivas-grid.GridDraggedRows {
    background: transparent;
}

.chivas-grid .rgGroupHeader {
    background: #EAF0F2 !important;
    color: #517783 !important;
}

.chivas-grid.chivas-grid-table .rgDetailTable .rgCommandCell,
.chivas-grid.chivas-grid-table .rgDetailTable .rgCommandCell .commandTemplate {
    width: 100% !important;
    text-align: right !important;
    background-color: white !important;
    padding: 0 !important;
}



.chivas-grid.chivas-grid-table .rgDetailTable .rgPagerCell.NextPrevAndNumeric {
    margin: 0 !important;
    border-top: 1px solid #bebebe !important;
    border-bottom: 1px solid #bebebe !important;
    padding: 2px 20px;
}

.grid-profile-image {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #6c9faf;
    background-color: #e9f1f3;
    position: relative;
}

    .grid-profile-image img {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        position: absolute;
        object-fit: cover;
    }

    .grid-profile-image span {
        position: absolute;
        width: 44px;
        text-align: center;
        margin: 12px 0px;
        color: #517783;
    }

.treeview td {
    margin: 0;
    padding: 0;
    background-image: none;
    border-bottom: none;
}

.orgChart {
    overflow: auto;
    height: calc(100vh - 130px);
    padding: 20px 50px;
}

div.VL, div.HL {
    border-color: var(--accent-color) !important;
}

.alignTop {
    vertical-align: top;
}

/* links */

a {
    color: #5d5d5e;
}

    a:hover {
        text-decoration: none;
    }

.tableSeparator {
    font-weight: bold;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 10px;
}

.error {
    padding: 8px 0 10px 20px;
    overflow: visible;
    font-weight: bold;
    color: white;
    background-color: #710007;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#2082B5', endColorstr='#2082B5')";
    background-image: linear-gradient(top, #2082B5, #2082B5);
    /* Animated fade in */
    animation-name: fade-in;
    animation-duration: 1s;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
    -moz-animation-name: fade-in;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: ease-in;
    -moz-animation-iteration-count: 1;
    -webkit-animation-name: fade-in;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-iteration-count: 1;
}

    /*  new attribute  */

    .error li {
        font-weight: normal;
    }

    .error ul {
        margin: 0;
        padding: 0;
        padding-left: 15px;
        color: white;
    }

    .error a {
        color: white;
    }

.warning {
    color: Red;
}

.message {
    padding: 8px 0 10px 20px;
    overflow: visible;
    font-weight: bold;
    color: white;
    background-color: #710007;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#2082B5', endColorstr='#2082B5')";
    background-image: linear-gradient(top, #2082B5, #2082B5);
    /* Animated fade in */
    animation-name: fade-in;
    animation-duration: 1s;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
    -moz-animation-name: fade-in;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: ease-in;
    -moz-animation-iteration-count: 1;
    -webkit-animation-name: fade-in;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-iteration-count: 1;
}

    .message li {
        font-weight: normal;
    }

    .message ul {
        margin: 0;
        padding: 0;
        padding-left: 15px;
        color: white;
    }

    .message a {
        color: white;
    }

.mandatory {
    color: Red;
    font-weight: bold;
}

.navList {
    position: absolute;
    display: none;
    background-color: #aaa;
    font-weight: bold;
}

    .navList a {
        text-decoration: none;
        color: #333;
        padding: 0 10px 0 10px;
    }

        .navList a:hover {
            text-decoration: none;
            color: #fff;
        }

/* action panel */

.actionPanel ul {
    margin: 0;
    padding: 0;
    padding-left: 5px;
    padding-right: 5px;
    list-style-type: none;
}

.actionPanel li {
    margin: 0;
    padding: 0;
    padding-top: 4px;
    padding-bottom: 7px;
    line-height: 15px;
    color: #000000;
}

    .actionPanel li.last {
        padding-bottom: 10px;
    }

    .actionPanel li a {
        margin: 0;
        padding-top: 2px;
        padding-bottom: 0;
        font-size: 1.2em;
        font-weight: normal;
        line-height: 18px;
        color: #797979;
        background-position: 0 0;
        background-repeat: no-repeat;
        display: inline-flex;
    }

/* action panel 2 */

.actionPanel2 ul {
    margin: 0;
    padding: 0;
    padding-left: 5px;
    padding-right: 5px;
    list-style-type: none;
}

.actionPanel2 li {
    margin: 0;
    padding: 0;
    padding-top: 4px;
    padding-bottom: 1px;
    padding-left: 11px;
    line-height: 15px;
    color: #000000;
}

    .actionPanel2 li.last {
        padding-bottom: 10px;
    }

    .actionPanel2 li a {
        margin: 0;
        padding-top: 2px;
        padding-bottom: 0;
        padding-left: 47px;
        font-weight: normal;
        line-height: 38px;
        color: #797979;
        background-position: 0 0;
        background-repeat: no-repeat;
        display: block;
    }

/* alternative action panel */

.altActionPanel {
    margin-top: 10px;
    margin-bottom: 50px;
}

    .altActionPanel ul {
        margin: 0;
        padding: 0;
        padding-left: 5px;
        padding-right: 5px;
        list-style-type: none;
    }

    .altActionPanel li {
        margin: 0;
        padding: 0;
        padding-top: 4px;
        padding-bottom: 1px;
        padding-left: 11px;
        line-height: 15px;
        color: #000000;
    }

        .altActionPanel li.last {
            padding-bottom: 10px;
        }

        .altActionPanel li a {
            margin: 0;
            padding-top: 0;
            padding-bottom: 0;
            font-weight: normal;
            line-height: 30px;
            color: #797979;
            background-position: 0 0;
            background-repeat: no-repeat;
            display: block;
        }

    .altActionPanel div a {
        margin: 0;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 42px;
        font-weight: normal;
        line-height: 36px;
        color: #797979;
        background-position: 0 0;
        background-repeat: no-repeat;
        display: block;
    }

/* search panel */

.searchPanel {
    margin-bottom: 20px;
}

.spacer {
    clear: both;
    height: 10px;
    background-color: transparent;
}

.contentModalDialogs {
    margin: 0;
    padding: 15px;
    width: 968px;
    background-color: white;
}

.statusIcon {
    height: 18px;
    width: auto;
    padding-left: 10px;
}

.teachMeWrapper {
    margin: 0;
    padding: 2px;
    width: 100%;
    height: 100%;
}

.teachMeContent {
    margin: 15px;
    padding: 0;
}

    .teachMeContent .gridView td {
        padding: 7px 0.5em 7px 0.5em;
    }

.teachMeLink {
    border: none;
    height: 26px;
}

    .teachMeLink :hover {
        cursor: pointer;
    }

h2 .teachMeLink {
    margin-top: -10px;
}

.teachMeLinkDisabled {
    display: none;
}

.h1Image {
    margin-right: 6px;
    margin-bottom: 2px;
    vertical-align: middle;
}

/*Org Chart*/

.orgChart {
    background-color: white;
}

.modalWindowFullView {
    width: 95% !important;
    height: 95% !important;
    z-index: 10000 !important;
}



.modalCaption {
    cursor: pointer;
}

    .modalCaption p {
        all: unset;
        font-size: 24px !important;
        font-weight: 300;
        font-family: "Lato", Helvetica, Arial, sans-serif !important;
        letter-spacing: 0 !important;
        letter-spacing: 0;
    }


/*chivas modal popup (save)*/
.modalPopup, .ui-dialog.ui-widget, .RadWindow.RadWindow_modalPopup {
    width: 480px;
    border: 1px solid #bebebe !important;
    background-image: linear-gradient(0deg, #f4f4f4 2%, #fafafa 33%, #ffffff 100% ) !important;
    background-position: center center;
    background-size: cover;
    position: Fixed !important;
    padding: 25px 40px 40px 40px !important;
    text-align: left;
    z-index: 10000;
    animation-name: fade-in;
    animation-duration: 0.5s;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
    -moz-animation-name: fade-in;
    -moz-animation-duration: 0.5s;
    -moz-animation-timing-function: ease-in;
    -moz-animation-iteration-count: 1;
    -webkit-animation-name: fade-in;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-iteration-count: 1;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16) !important;
    max-width: 75%;
    max-height: 75%;
    overflow: auto;
    z-index: 9999999 !important;
}

.RadWindowNoBg, .RadWindowNoBg .rwContent, .RadWindowNoBg iframe {
    background: transparent !important;
    box-shadow: unset !important;
    border: none !important;
}

.box-shadow {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16) !important;
}

.responsivePanel.small-shadow {
    border: none !important;
}

.small-shadow {
    box-shadow: 0px 1px 3px rgba(0,0,0,0.2) !important;
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.2) !important;
}

.big-shadow {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4) !important;
}

.RadWindow_modalPopup.RadWindow {
    width: 320px !important;
    height: unset !important;
    overflow: hidden;
}

    .RadWindow_modalPopup.RadWindow .rwTitleRow em {
        margin-left: -36px !important;
        cursor: default !important;
    }

    .RadWindow_modalPopup.RadWindow .rwTitlebarControls {
        cursor: default;
    }

.RadWindow.RadWindow_modalPopup .wrapper .paragraph {
    margin: 30px 0;
}

.ui-dialog.ui-widget.ui-dialog {
    overflow: visible;
    z-index: 7002 !important;
}

.ui-dialog.ui-widget .ui-dialog-titlebar-close, .ui-dialog.ui-widget .ui-dialog-titlebar-close:hover {
    position: absolute !important;
    border: none;
    background: transparent;
    background-color: transparent;
    background-color: transparent !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    top: -15px !important;
    right: -30px !important;
}

.ui-dialog.ui-widget .ui-icon-closethick, .RadWindow_modalPopup .rwControlButtons a {
    background: url("../Images/svg/icn_close-active.svg") !important;
    width: 24px !important;
    height: 24px !important;
    top: 8px !important;
    left: 8px !important;
}

.RadWindow_modalPopup .rwControlButtons a {
    position: absolute !important;
    top: 15px !important;
    left: unset !important;
    right: 15px !important;
}

.ui-dialog.ui-widget .ui-dialog-content.ui-widget-content {
    height: auto !important;
    font-size: 16px;
    font-weight: normal;
    color: #535353;
    padding: 25px 0;
}

.ui-dialog.ui-widget .ui-dialog-buttonpane {
    margin: 0 !important;
    padding: 0 !important;
    height: 50px;
    border: none !important;
    background: transparent !important;
}

    .ui-dialog.ui-widget .ui-dialog-buttonpane .btn.btn-summary {
        font-weight: 500 !important;
        margin-top: 8px;
        margin-right: 20px;
    }

.RadWindow.RadWindow_Bootstrap.modalPopup {
    padding: 2px !important;
}



.RadWindow.modalPopup div.rwExternalContent iframe {
    height: 97% !important;
}
/*mobile fix*/
@media screen and (max-height: 600px) {
    .modalPopup {
        max-height: 50vh !important;
        min-height: 220px !important;
    }

        .modalPopup .main-buttons {
            margin-bottom: 30px !important;
            height: 30px;
        }

        .modalPopup.divMessage {
            min-height: 120px !important;
        }
}

.divMessage.modalPopup {
    width: 320px !important;
    padding: 30px;
    padding-top: 30px;
    padding-top: 25px !important;
}

    .divMessage.modalPopup.modalPopup-md {
        width: 480px !important;
    }

.save-grid {
    margin-bottom: 50px;
    background-color: transparent;
}

    .save-grid .rgDataDiv {
        height: 220px !important;
    }

.homepage-config-panel .pnlClose-X,
.modalPopup .pnlClose-X {
    border: none !important;
    width: 24px;
    padding: 0 !important;
    position: absolute;
    right: 10px;
    top: 10px;
}

    .homepage-config-panel .pnlClose-X:hover,
    .pnlMasterMessage-X:hover,
    .modalPopup .pnlClose-X:hover, rwCloseButton:hover {
        filter: drop-shadow(0px 0px 8px black);
    }

.rwTable.rwShadow {
    background-image: linear-gradient(0deg, #f4f4f4 2%, #fafafa 33%, #ffffff 100% ) !important;
    background-position: center center;
    background-size: cover;
}

.rwDialog.rwConfirmDialog .rwDialogContent {
    margin-bottom: 40px;
}

.rwWindowContent {
    background: transparent !important;
}

.rwDialogContent {
    margin: 20px;
}


.rwDialogButtons.action-buttons {
    text-align: center;
}

.action-buttons-panel > .btn {
    margin-right: 10px;
}

.modalPopup-md {
    width: 480px;
}

.modalPopup.modalPopup-490 {
    width: 490px;
    height: 490px;
    box-sizing: border-box;
}

.modalPopup-sh {
    width: 320px !important;
    min-height: 50px !important;
}

.modalPopup-lg {
    width: 800px;
}

.modalPopup-xlg {
    width: 1140px;
}

.modalPopup-xxlg {
    width: 1280px;
}

.modalPopup-vw {
    width: 80vw;
    max-width: 1140px;
}

.action-buttons {
    width: 100%;
    position: relative;
}

.modalPopup.modalActionButtons .action-buttons {
    position: absolute;
    bottom: 40px;
    width: calc(100% - 80px) !important;
    height: 35px;
}

    .modalPopup.modalActionButtons .action-buttons.bottom-80 {
        bottom: 80px;
    }

    .modalPopup.modalActionButtons .action-buttons.center {
        text-align: center;
    }

.modalPopup .action-buttons .btn-primary {
    position: absolute;
    right: 0;
}

    .modalPopup .action-buttons .btn-primary.center {
        right: unset;
        margin-left: -50px;
    }

.orgChart .modalPopup {
    width: unset;
}

.orgCharCommand {
    display: -webkit-inline-box !important;
    width: calc(100% - 55px) !important;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #fafafa;
    padding-left: 40px;
}

.invisible-grid, .invisible-grid td {
    border: none !important;
    background-color: transparent !important;
}

    .invisible-grid th {
        border: none !important;
        background-color: #e9e9e9 !important;
    }

    .invisible-grid tr td {
        color: #535353 !important;
    }

    .invisible-grid tr.rgSelectedRow td {
        color: black !important;
    }

.modalPopup .rwIcon {
    position: relative !important;
    margin-right: 20px !important;
}

/* ContainerPanel */
.containerPanelOuter {
    height: auto;
    z-index: 1000;
    overflow: visible;
}

.containerPanelHeader {
    height: 27px;
    padding: 1px;
    margin-top: 10px;
    background-color: #797979;
    display: none; /* TODO: hide headers in ReviewCompetence.aspx */
}

.containerPanelDescription p {
    color: #cfccd3;
    line-height: 1;
    text-align: right;
    margin-top: 0;
    margin-bottom: 0.1px;
}

.containerPanelTitle {
    position: relative;
    float: left;
    width: auto;
    height: 31px;
    clear: left;
    padding: 0 20px 0 10px; /*  adjusted attribute  */
    overflow: visible;
}

    .containerPanelTitle td {
        padding-left: 8px;
        color: #000000;
        font-weight: bold;
        margin-top: 0;
        margin-bottom: 0.1px;
    }

    .containerPanelTitle p {
        color: white;
        font-weight: bold;
        line-height: 16px;
        margin-top: 3px;
    }

.containerPanelContent {
    background-color: white;
}

.radius8px {
    -webkit-border-radius: 8px; /*  Saf3-4,iOS 1-3.2,Android <1.6  */
    -moz-border-radius: 8px; /*  FF1-3.6  */
    border-radius: 8px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

.radius10px {
    -webkit-border-radius: 10px; /*  Saf3-4,iOS 1-3.2,Android <1.6  */
    -moz-border-radius: 10px; /*  FF1-3.6  */
    border-radius: 10px;
}

.radiusTop4px {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    clear: both;
}

/* ContainerSubPanel */

.containerSubPanelOuter {
    height: auto;
    z-index: 1000;
    margin: 0 auto 12px auto;
    overflow: visible;
}

.containerSubPanelHeader {
    height: 30px;
    padding: 1px;
    background-color: #d9d9d9;
    -moz-box-shadow: 0 0 5px 5px #b9b9b9;
    -webkit-box-shadow: 0 0 5px 5px #b9b9b9;
    box-shadow: 0 0 5px 5px #b9b9b9;
}

.containerSubPanelDescription p {
    color: #cfccd3;
    line-height: 1;
    text-align: right;
    margin-top: 0;
    margin-bottom: 0.1px;
}

.containerSubPanelTitle {
    position: relative;
    float: left;
    width: auto;
    height: 25px;
    clear: left;
    background-color: #d9d9d9; /*  Dissabled attribute  */
    overflow: visible;
    text-align: left;
}

    .containerSubPanelTitle td {
        padding-left: 8px;
        color: #000000;
        font-weight: bold;
        margin-top: 0;
        margin-bottom: 0.1px;
    }

    .containerSubPanelTitle p {
        color: #000000;
        font-weight: bold;
        line-height: 16px;
        margin-top: 0.6px;
        margin-bottom: 0.1px;
        margin-left: 10px;
    }

.containerSubPanelContent {
    padding: 10px 10px 12px 10px;
    background-color: white;
    -moz-box-shadow: 0 0 5px 5px #b9b9b9;
    -webkit-box-shadow: 0 0 5px 5px #b9b9b9;
    box-shadow: 0 0 5px 5px #b9b9b9;
    overflow: auto;
}

/* Hover Menu */

.hoverMenuLabel {
    color: white;
    text-align: center;
    line-height: 31px;
    margin-right: 10px;
}

    .hoverMenuLabel:hover {
        color: #ADA8B4;
    }

.hoverMoreMenuLabel {
    background-position: 0 0;
    text-decoration: none;
    line-height: 11px;
    color: white;
    padding-top: 12px;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 0;
    float: left;
}

    .hoverMoreMenuLabel:hover {
        color: #ADA8B4;
    }

.hoverMenuPanel {
    padding: 10px 10px 15px 10px;
    background: #72757B;
    overflow: auto;
    min-width: 175px;
}

.hoverMenuItems {
    line-height: 180%;
    text-shadow: -1px -1px 0 #000000;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.25);
    text-decoration: none;
    color: white;
}

    .hoverMenuItems:hover {
        color: #ADA8B4;
    }

/* begining of graduation */

.photoGrad {
    height: 100%;
    background-color: #E5E5E5;
    /* Saf4+, Chrome */
    /* Chrome 10+, Saf5.1+ */
    /* FF3.6 hex */
    /* IE10 */
    /* Opera 11.10+ */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#F4F4F4', endColorstr='#D5D5D5')";
    background-image: linear-gradient(top, #F4F4F4, #D5D5D5); /* Standard */
}

/* end of graduation */

/* slider */
.panelPerformanceRatingSliderBackgroundImage {
    height: 30px;
    margin-bottom: -30px;
    position: absolute;
    top: 29px;
    width: 100%;
    background-color: white;
}


/***track*****/
.TalentRadSlider div .rslTrack,
.TalentRadSlider .rslTrack,
.TalentRadSlider div.rslTrack {
    border: none !important;
    background-color: #bebebe;
    z-index: 1;
}

.TalentRadSlider .rslSelectedregion {
    background-color: #517783;
    border: none !important;
}

/*horizontal track*/
.TalentRadSlider div.rslHorizontal .rslTrack,
.TalentRadSlider.rslHorizontal .rslTrack,
.TalentRadSlider .rslHorizontal div.rslTrack {
    max-height: 1px !important;
}

.TalentRadSlider .rslHorizontal .rslSelectedregion {
    height: 3px !important;
    margin-top: 0px;
}


/*vertical track*/
.TalentRadSlider div.rslVertical .rslTrack,
.TalentRadSlider.rslVertical .rslTrack,
.TalentRadSlider .rslVertical div.rslTrack {
    max-width: 1px !important;
}

.TalentRadSlider .rslVertical .rslSelectedregion {
    width: 3px !important;
    margin-left: 0px;
}

.TalentRadSlider .rslVertical a.rslDraghandle {
    left: 1.5px !important;
}

.TalentRadSlider a.rslDraghandle {
    border: none;
}

    .TalentRadSlider a.rslDraghandle span {
        width: 12px !important;
        height: 12px !important;
        border: none;
        background-color: var(--accent-color);
        border-radius: 50%;
        margin: auto;
        position: relative;
    }

        .TalentRadSlider a.rslDraghandle span:hover {
            top: 1px;
            left: 1px;
        }

.tg-royco-tile .TalentRadSlider a.rslDraghandle span:hover {
    top: 0px !important;
    left: 0px !important;
}


.TalentRadSlider a.rslDraghandle:hover span:after {
    content: " ";
    width: 22px !important;
    height: 22px !important;
    border: none;
    background-color: var(--accent-color);
    border-radius: 50%;
    margin: auto;
    position: absolute;
    top: -5px;
    left: -5px;
    opacity: 0.3;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1.2s ease;
    -moz-transition: opacity 1.2s ease;
    -ms-transition: opacity 1.2s ease;
    -o-transition: opacity 1.2s ease;
    transition: opacity 1.2s ease-out;
}

.TalentRadSlider a.rslDraghandle span:after {
    content: " ";
    width: 22px !important;
    height: 22px !important;
    border: none;
    background-color: var(--accent-color);
    border-radius: 50%;
    margin: auto;
    position: absolute;
    top: -5px;
    left: -5px;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1.2s ease;
    -moz-transition: opacity 1.2s ease;
    -ms-transition: opacity 1.2s ease;
    -o-transition: opacity 1.2s ease;
    transition: opacity 1.2s ease-out;
}

.TalentRadSlider a.rslDraghandle,
.TalentRadSlider a.rslDraghandle:hover {
    height: 12px !important;
    width: 12px !important;
    border: none;
    overflow: visible;
    top: 2px;
}

.TalentRadSlider.TalentRadSlider-withInfo .rslHorizontal a.rslDraghandle:hover span {
    border: none !important;
    background-color: var(--accent-color);
    margin-top: 0px !important;
    height: 42px !important;
    width: 42px !important;
    padding: 0 !important;
    margin-left: 0 !important;
    bottom: 0px !important;
    overflow: visible;
    top: -55px !important;
    margin-bottom: 22px;
    border-radius: 50%;
    color: white;
    text-indent: 0px;
    font-size: 18px;
    line-height: 40px;
    position: absolute;
    left: -15px;
}

    .TalentRadSlider.TalentRadSlider-withInfo .rslHorizontal a.rslDraghandle:hover span::before {
        content: " ";
        width: 4px;
        height: 1px;
        position: absolute;
        border-width: 20px 10px;
        border-style: solid;
        border-color: transparent;
        border-top-color: var(--accent-color);
        left: 9px;
        top: 38px;
        background-color: transparent !important;
    }

    .TalentRadSlider.TalentRadSlider-withInfo .rslHorizontal a.rslDraghandle:hover span::after {
        top: 50px;
        left: 10px;
        z-index: 5;
    }

.TalentRadSlider.TalentRadSlider-withInfo .rslHorizontal a.rslDraghandle:hover::before,
.TalentRadSlider.TalentRadSlider-withInfo .rslHorizontal a.rslDraghandle:hover::after {
    content: " ";
    background: #fff;
    height: 21px;
    width: 23px;
    position: absolute;
    left: 8px;
    border-radius: 100% 10px;
    top: -18px;
    z-index: 4;
}


.TalentRadSlider.TalentRadSlider-withInfo .rslHorizontal a.rslDraghandle:hover::after {
    left: unset;
    right: 8px;
    border-radius: 10px 100%;
}

.RadSlider_SliderMan .rslItem, .slider-manager .rslItem {
    display: inline-table !important;
    color: black !important;
    cursor: default !important;
    margin-top: -10px !important;
}



.slider-manager a.rslDraghandle {
    top: 8px;
    background-position: 0;
}

.pnlSliderClass.valignToEnd {
    height: 60px !important;
    align-content: end;
}

/*.RadSlider_SliderMan a.rslDraghandle, .slider-manager a.rslDraghandle,
    .RadSlider_SliderMan a.rslDraghandle:hover, .slider-manager a.rslDraghandle:hover {
        border: none !important;
        background-image: url(../Images/mgrhndlr.png);
        margin-left: 5px !important;
        background-color: transparent !important;
        background-position: 0 !important;
    }*/


.TalentRadSlider .rslItemsWrapper {
    opacity: 0.6;
}

.TalentRadSlider:hover .rslItemsWrapper {
    opacity: 1;
}

.TalentRadSlider .rslHorizontal li.rslItem {
    height: 20px !important;
}

.TalentRadSlider li.rslItem span {
    cursor: pointer !important;
    color: #7c7c7c !important;
}

.TalentRadSlider .rslVertical li.rslItem {
    Text-align: left !important;
    padding-left: 20px !important;
    margin-left: 25px;
    border-left: none !important;
    /*height: 27px !important;*/
    /*line-height: 27px;*/
    width: 100% !important;
    display: block !important;
    overflow: hidden;
    white-space: normal !important;
    /*max-height: 27px !important;*/
    text-overflow: ellipsis;
    background-image: url('WebResource.axd?d=rUuF6QeSTkk6mMxSYp3FBWl7RNj3RQNNz-RMtp4SreQ5RFjE2N6DEQ782_TpnajzLwigooG32N_PW064FkHj7rPap0k7Oa1v9-eugN1AvEWoEUcnsJjl_GWK0SvVxBIH6NJckg98pmBBALQtuCLKmsdm2W7iStlZrqWLsbkYf7Q1&t=637346667924019933') !important;
    background-position-y: 50%;
    overflow: visible;
}

    .TalentRadSlider .rslVertical li.rslItem span {
        overflow: hidden;
        white-space: nowrap !important;
        text-overflow: ellipsis;
    }

.Radslider-employee, .Radslider-manager {
    position: absolute;
    z-index: 10;
}

    .Radslider-manager .rslDisabled ul {
        display: none;
    }


    .Radslider-employee.RadSlider-Core.RadSlider li.rslItem {
        height: 80px !important;
    }

        .Radslider-employee.RadSlider-Core.RadSlider li.rslItem span {
            height: 50px !important;
        }

.RadSlider-Core.RadSlider-Core .rslDisabled {
    opacity: 1;
}

.Radslider-manager.RadSlider-Core .rslDisabled ul {
    display: block !important;
}

.Radslider-manager.RadSlider-Core.RadSlider li.rslItem {
    height: 60px !important;
}

    .Radslider-manager.RadSlider-Core.RadSlider li.rslItem span {
        height: 40px !important;
    }



.RadSlider.RadSlider_Bootstrap.RadSlider_SliderMan .rslHorizontal a.rslDraghandle span {
    width: 24px !important;
    height: 24px !important;
}


.Radslider-minimal.Radslider-manager .rslHorizontal li span,
.Radslider-minimal.Radslider-employee .rslHorizontal li span {
    margin-top: 24px !important;
}

.Radslider-minimal.Radslider-manager .rslHorizontal.rslTop li.slider-target span::after,
.Radslider-minimal.Radslider-employee .rslHorizontal.rslTop li.slider-target span::after {
    top: 40px !important;
}


.RadSlider_SliderMan a.rslDraghandle, .slider-manager a.rslDraghandle,
.RadSlider_SliderMan a.rslDraghandle:hover, .slider-manager a.rslDraghandle:hover,
.RadSlider.Radslider-manager .rslHorizontal a.rslDraghandle span {
    top: 10px;
    width: 30px !important;
    height: 30px !important;
    border: none !important;
    border-radius: 0;
    margin: auto;
    background-position: top center;
    -webkit-mask: url(../Images/svg/handler-manager-active.svg) no-repeat 50% 50% !important;
    mask: url(../Images/svg/handler-manager-active.svg) no-repeat 50% 50% !important;
    background-color: var(--accent-color);
}

.RadSlider.Radslider-manager .rslHorizontal a.rslDraghandle span {
    width: 24px !important;
    height: 24px !important;
}

.RadSlider.Radslider-manager .rslHorizontal a.rslDraghandle span {
    top: -5px !important;
}

.RadSlider.Radslider-employee .rslHorizontal a.rslDraghandle span,
.RadSlider.MySlider .rslHorizontal a.rslDraghandle span {
    bottom: 0px;
    width: 30px !important;
    height: 30px !important;
    border: none;
    border-radius: 0;
    margin: auto;
    background-position: top center;
    background-image: none;
    -webkit-mask: url(../Images/svg/handler-employee-active.svg) no-repeat 50% 50% !important;
    mask: url(../Images/svg/handler-employee-active.svg) no-repeat 50% 50% !important;
    background-color: var(--accent-color);
}

.RadSlider.Radslider-employee .rslHorizontal a.rslDraghandle:hover {
    background-color: transparent !important;
}

.RadSlider.MySlider .rslHorizontal {
    height: 30px !important;
    opacity: 0.9 !important;
}

    .RadSlider.MySlider .rslHorizontal a.rslDraghandle {
        border: none !important;
        height: 30px !important;
        width: 30px !important;
        padding: 0;
        top: -17px;
    }

.RadSlider.Radslider-manager a.rslDraghandle:hover,
.RadSlider.Radslider-employee a.rslDraghandle:hover,
.RadSlider.MySlider a.rslDraghandle:hover {
    filter: drop-shadow(0px 0px 4px rgb(255, 255, 255)) brightness(110%) scale(1.3) !important;
    transform: scale(1.3);
}

.RadSlider.Radslider-manager.IsEmployee a.rslDraghandle:hover,
.RadSlider.Radslider-employee.IsAdmin a.rslDraghandle:hover,
.RadSlider.MySlider .rslHorizontal.rslDisabled a.rslDraghandle:hover {
    filter: none !important;
    transform: scale(1) !important;
}

.tg-royco-tile .TalentRadSlider a.rslDraghandle span:hover {
    top: 0px !important;
}






.RadSlider_SliderMan.RadSlider .rslHorizontal .rslTrack, .MySlider.RadSlider .rslHorizontal .rslTrack {
    background-color: #6c9faf;
    height: 1px !important;
}

    .RadSlider_SliderMan.RadSlider .rslHorizontal .rslTrack .rslSelectedregion, .MySlider.RadSlider .rslHorizontal .rslTrack .rslSelectedregion {
        background-color: #27bbbe;
        height: 3px !important;
        margin: -1px !important;
    }

    .RadSlider_SliderMan.RadSlider .rslHorizontal .rslTrack a.rslDraghandle, .MySlider.RadSlider .rslHorizontal .rslTrack a.rslDraghandle {
        margin-top: -11px !important;
    }

.RadSlider.Radslider-manager .rslHorizontal a.rslDraghandle {
    border: none;
    background-color: transparent;
    border-radius: 0;
    margin-top: 2px !important;
    height: 28px !important;
    width: 28px !important;
    padding: 0;
    margin-left: 0;
}

.RadSlider.Radslider-employee .rslHorizontal a.rslDraghandle {
    border: none;
    background-color: transparent;
    border-radius: 0;
    margin-bottom: 2px !important;
    height: 28px !important;
    width: 28px !important;
    padding: 0;
    margin-left: 0;
    top: unset;
    bottom: 0;
}

.RadSlider.Radslider-employee .rslDisabled .rslSelectedregion {
    height: 4px !important;
    background-color: #517783;
    margin-top: -2px;
    opacity: 0.6;
}

    .RadSlider.Radslider-employee .rslDisabled .rslSelectedregion:hover {
        margin-top: -3px;
    }

.RadSlider.Radslider-manager .rslDisabled .rslSelectedregion {
    background-color: #517783;
    opacity: 0.6;
}

    .RadSlider.Radslider-manager .rslDisabled .rslSelectedregion:hover {
        margin-top: -1px;
    }

.rslItemsWrapper {
    width: 101% !important;
    line-height: 15px !important;
}
/*.RadSlider .rslHorizontal .rslItemsWrapper li:last-child span {
    text-align: right !important;
}

.RadSlider .rslHorizontal .rslItemsWrapper li:first-child span {
    text-align: left !important;
}*/

.Radslider-minimal.RadSlider .rslHorizontal .rslItemsWrapper li {
    height: 40px !important;
    position: relative;
    display: inline-table;
}

    .Radslider-minimal.RadSlider .rslHorizontal .rslItemsWrapper li::after {
        content: "";
        position: absolute;
        top: -8px;
        bottom: 20px;
        left: 50%;
        border-left: 1px solid #bebebe;
        transform: translate(-50%);
        height: 7px;
    }

    .Radslider-minimal.RadSlider .rslHorizontal .rslItemsWrapper li:last-child:after {
        height: 15px;
    }

    .Radslider-minimal.RadSlider .rslHorizontal .rslItemsWrapper li:first-child::after {
        height: 15px;
    }

.Radslider-minimal.Radslider-employee .rslHorizontal .rslItemsWrapper li,
.Radslider-minimal.Radslider-manager .rslHorizontal .rslItemsWrapper li {
    height: 60px !important;
}

.Radslider-minimal.RadSlider .rslHorizontal li span {
    width: 100%;
    text-align: center;
    margin-top: 12px !important;
    opacity: 0;
    display: block;
    transition: all .3s;
}

.Radslider-minimal.RadSlider .rslHorizontal.rslTop li.slider-target span {
    text-decoration: underline;
    color: #7bad36;
    opacity: 1 !important;
    transition: all .3s;
}


    .Radslider-minimal.RadSlider .rslHorizontal.rslTop li.slider-target span::after {
        content: "Target";
        position: absolute;
        left: calc(50% - 25px);
        top: 32px !important;
        width: 50px;
    }

.Radslider-minimal.RadSlider .rslHorizontal.rslTop li.slider-target.slider-under span::after {
    color: #f45849;
}

.radHorizontalList span.target::after {
    content: "Target";
    position: absolute;
    left: calc(50% - 25px);
    top: 55px !important;
    width: 50px;
    color: #f45849;
}

.Radslider-minimal.RadSlider .rslHorizontal.rslTop li.slider-target.slider-under span {
    color: #f45849;
}

.Radslider-minimal.RadSlider .rslHorizontal li:first-child span, .RadSlider .rslHorizontal li:last-child span,
.Radslider-minimal.RadSlider:hover .rslHorizontal li span {
    opacity: 1;
    transition: all .3s;
}

.TalentRadSlider .rslItem span:hover {
    font-weight: bold;
}

.Radslider-minimal.RadSlider:hover li::after, .tileBox:hover .RadSlider li::after {
    border-color: #7c7c7c !important;
}

.Radslider-minimal.RadSlider:hover .rslHorizontal.rslTop .rslTrack, .tileBox:hover .RadSlider .rslHorizontal.rslTop .rslTrack {
    background-color: #7c7c7c;
}

.RadSlider div.rslHorizontal .rslTrack:hover .rslSelectedregion {
    filter: brightness(110%) drop-shadow(0 0 5px #fff);
    height: 5px !important;
    transition: all .3s;
}

.RadSlider div.rslVertical .rslTrack:hover .rslSelectedregion {
    filter: brightness(110%) drop-shadow(0 0 5px #fff);
    width: 5px !important;
    left: -2px !important;
    transition: all .3s;
}

.MySlider .rslItemsWrapper li {
    display: none;
}
/*manager slider*/
.RadSlider_SliderMgr div.rslBottom {
    height: 70px !important;
}

.RadSlider_SliderMgr .rslHorizontal .rslSelectedregion {
    background: #dedede !important;
}

.RadSlider_SliderMgr .rslHorizontal a.rslDraghandle span {
    background-color: #517783;
}
/*Employee slider*/
.RadSlider_SliderEmp .rslHorizontal .rslSelectedregion {
    background: #dedede !important;
}

.RadSlider_SliderEmp .rslHorizontal a.rslDraghandle span {
    background-color: #517783;
}

.TalentRadSlider .rslDisabled.rslHorizontal a.rslDraghandle span {
    background-color: #b0b0b0;
}
/* color picker */
.ajax__colorPicker_container table td {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    width: 12px;
    height: 12px;
}

/* Progression Builder */

.progressionImage {
    position: absolute;
    width: 460px;
    height: 500px;
    background-repeat: no-repeat;
    background-size: 120% auto;
    top: -60px;
    left: -90px;
    vertical-align: middle;
    margin: 0;
    padding: 0;
}

.introPanel {
    padding: 4px 14px;
    border: 1px solid gray;
}

.introPanelFixedHeight {
    height: 250px;
    padding: 5px 15px;
    -webkit-box-shadow: 0 0 4px 0 #9B9B9B; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
    -moz-box-shadow: 0 0 4px 0 #9B9B9B; /* FF3.5+ */
    box-shadow: 0 0 4px 0 #9B9B9B; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
}

.dashboardPanel {
    padding: 4px 14px;
    border: 1px solid gray;
}

.adminCheckBoxToggle {
    width: 25px;
    padding-top: 8px;
    padding-left: 2px;
    float: left;
}

.adminContainerPanelHeader {
    width: 920px;
    float: left;
}

/*
 * START: enhanced controls
 */

.panelPerformanceRatingContainer {
    height: 105px;
    width: 600px !important;
    margin-top: 10px;
    position: relative;
}
/*
 * END: enhanced controls
 */

/*
 * START: responsive
 */

.responsivePanel {
    padding: 20px;
    min-width: 520px;
    overflow: auto;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    background-color: white;
}

    .responsivePanel.noBorder {
        min-width: 520px;
        overflow: auto;
        border: none;
        box-shadow: none;
        background-color: #FAFAFA;
    }

    .responsivePanel.noBorder {
        min-width: 520px;
        overflow: auto;
        border: none;
        background-color: white;
    }

.responsiveSubPanel {
    border-radius: 2px;
    background-color: white;
    box-shadow: 0 1px 10px 0 #000000, 0 0 2px 0 #000000;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.05);
    border-style: solid;
    border-width: 0.5px;
    border-image-source: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.02) 95%, rgba(0, 0, 0, 0.04));
    border-image-slice: 1;
}

.responsiveNarrowPanel {
    min-width: 200px;
    max-width: 200px;
    overflow: auto;
    border-radius: 2px;
    background-color: white;
    box-shadow: 0 1px 10px 0 #000000, 0 0 2px 0 #000000;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.05);
    border-style: solid;
    border-width: 0.5px;
    border-image-source: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.02) 95%, rgba(0, 0, 0, 0.04));
    border-image-slice: 1;
}

.responsiveNarrowPlusPanel {
    min-width: 350px;
    overflow: auto;
    border-radius: 2px;
    background-color: white;
    box-shadow: 0 1px 10px 0 #000000, 0 0 2px 0 #000000;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.05);
    border-style: solid;
    border-width: 0.5px;
    border-image-source: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.02) 95%, rgba(0, 0, 0, 0.04));
    border-image-slice: 1;
}

.responsiveWidePanel {
    min-width: 620px;
    overflow: auto;
    border-radius: 2px;
    background-color: white;
    box-shadow: 0 1px 10px 0 #000000, 0 0 2px 0 #000000;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.05);
    border-style: solid;
    border-width: 0.5px;
    border-image-source: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.02) 95%, rgba(0, 0, 0, 0.04));
    border-image-slice: 1;
}

.responsiveWidePlusPanel {
    min-width: 720px;
    overflow: auto;
    border-radius: 2px;
    background-color: white;
    box-shadow: 0 1px 10px 0 #000000, 0 0 2px 0 #000000;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.05);
    border-style: solid;
    border-width: 0.5px;
    border-image-source: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.02) 95%, rgba(0, 0, 0, 0.04));
    border-image-slice: 1;
}

.responsiveWidget {
    display: inline-block;
    padding: 20px;
    margin: 20px;
    min-width: 420px;
    zoom: 0.75;
    overflow: auto;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    background-color: white;
}

    .responsiveWidget.large {
        min-width: 520px;
    }

iframe.noHorizontalScroll {
    overflow: hidden;
}

.iframe-container {
    overflow: hidden;
    padding-top: 56.25%;
    position: relative;
}

    .iframe-container iframe {
        border: 0;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
    }

.widget {
    float: left;
    margin: 20px;
    padding: 0 20px;
    border: solid lightgrey 1px;
    font-size: 1.1em;
    cursor: pointer;
}

/*
 * END: responsive
 */

/*
 * START: Telerik controls
 */

.RadFileExplorer .RadToolBar .icnBack {
    display: none;
}

.RadFileExplorer .RadToolBar .icnForward {
    display: none;
}

.RadFileExplorer .RadToolBar .icnRefresh {
    display: none;
}

.RadSlider_Metro .rslHorizontal .rslItem {
    height: auto !important;
    transform: rotate(0);
}

div.rtlistWrapper .RadTileList .rtlistGroup {
    width: 100% !important;
}

.RadPanelBar_Bootstrap {
    margin-bottom: 20px !important;
}

.RadDockZone_Bootstrap {
    margin: 20px 0 30px 0;
}

.RadDock.rdResizable {
    margin-bottom: 20px;
}

.t-container.t-container-fluid {
    max-width: 100% !important;
    margin-top: 20px !important;
}

.t-row {
    margin-left: -30px !important;
    margin-right: -30px !important;
}

.RadWindow table.rwTable {
    height: 100% !important;
}

.RadDock.rdResizable {
    height: auto !important;
}

/*
 * END: Telerik controls
 */

.ui-dialog {
    z-index: 5000 !important;
}

.ui-widget-overlay {
    position: fixed !important;
}

.ddlRoleFinder {
    height: 25px;
    width: 185px !important;
    margin-top: 5px;
    margin-bottom: 5px;
}

.txtRoleFinder {
    margin-top: 5px;
    margin-bottom: 15px;
}

.tile {
    display: inline-block;
    margin-top: 25px;
    margin-right: 20px;
    margin-left: 3px;
    background-color: #ECECEA;
}

    .tile:hover {
        box-shadow: 0 0 20px #000000;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.75);
    }

.toggle:hover {
    opacity: 0.4;
}

.radiowrap {
    display: inline-block;
    padding-top: 10px;
}

#ctl00_contentBody_review180ManagerActions_review180ManagerActions {
    position: fixed;
    top: 60px;
    left: 250px;
    right: 16px;
    width: 100%;
}

#ctl00_contentBody_rmFrameworksActions {
    position: fixed;
    top: 60px;
    left: 250px;
    right: 16px;
    width: 100%;
}

#ctl00_contentBody_review180ManagerActions_review180ManagerActions,
#ctl00_contentBody_rmFrameworksActions,
#ctl00_contentBody_radMenuFrameworkManager, .actionNavigationBarMenu {
    position: fixed;
    top: 48px;
    left: 40px;
    right: 16px;
    width: 100%;
}


.actionNavigationBarMenu {
    display: inline-flex;
    height: 50px;
}

    .actionNavigationBarMenu li {
        float: left;
        marker: none;
        margin: 0 20px;
        line-height: 50px;
        list-style-type: none;
    }

        .actionNavigationBarMenu li a {
            text-decoration: none;
            color: inherit;
            list-style-type: none;
        }
/* media print adjustments*/
@media only print {
    .responsivePanel {
        overflow-x: visible !important;
    }

    thead {
        display: table-row-group;
    }

    tfoot {
        display: table-row-group;
    }

    tr {
        page-break-inside: avoid;
    }

    p, .body_copy {
        font-size: 0.875em;
        line-height: 1em;
        font-weight: 400;
        color: #A8A8A8;
    }

    .txt_caption, .txt_caption span {
        font-size: 0.75em !important;
        line-height: 0.875em !important;
        font-weight: 400 !important;
        color: #535353;
    }

    a:link {
        font-size: 14px !important;
        line-height: 16px !important;
        font-weight: 400 !important;
        color: #26BDC1 !important;
    }

    a:visited {
        color: #6C9FAF !important;
    }

    a:hover {
        color: #26BDC1 !important;
        text-decoration: none !important;
    }

    a:active {
        color: #26BDC1 !important;
    }

    .normal_text {
        font-weight: 400 !important;
    }

    strong {
        font-weight: 700 !important;
    }


    * {
        /*CSS transitions*/
        -o-transition-property: none;
        -moz-transition-property: none;
        -ms-transition-property: none;
        -webkit-transition-property: none;
        transition-property: none;
        /*CSS transforms*/
        -o-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -webkit-transform: none;
        transform: none;
        /*CSS animations*/
        -webkit-animation: none;
        -moz-animation: none;
        -o-animation: none;
        -ms-animation: none;
        animation: none;
    }
}
/* media size adjustments */

@media only screen and (max-width: 1024px) {
    body {
        zoom: 0.9;
    }
}

#loadingImage {
    position: absolute;
    top: 20px;
    left: 400px;
    z-index: 100;
}


/*---------------------Align----------------------*/

.center_v {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.center_h {
    width: 100%;
    display: inline-block;
    text-align: center;
}

.padding_t_md_skills {
    padding-top: 20px;
}

.padding_b_md {
    padding-bottom: 40px;
}

.float_l {
    float: left;
}

.float_r {
    float: right;
}

.margin-none {
    margin: 0 !important;
}

.margin-top {
    margin-top: 20px;
}

.margin-bottom {
    margin-bottom: 20px;
}

.margin-vertical {
    margin-bottom: 20px;
    margin-top: 20px;
}

.margin-vertical-big {
    margin-bottom: 40px;
    margin-top: 40px;
}

.padding-top {
    padding-top: 20px;
}
/*chivas makeover*/

/*---------------------------chivas makeover---------------------------*/

/*---------------------------Master page-------------------------------*/

/*---------------------------chivas makeover---------------------------*/


.RadPanelBar_Bootstrap .rpExpandHandle {
    background-image: url(../images/svg/icn_arrowdown-active.svg) !important;
    background-repeat: no-repeat !important;
    margin: 0 !important;
    background-position: center !important;
    margin-top: 9px !important;
    width: 24px !important;
    height: 24px !important;
    cursor: pointer;
}


.rpExpanded .rpExpandHandle {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

/*---------------------------chivas makeover---------------------------*/

/*---------------------------Master page-------------------------------*/

/*---------------------------chivas makeover---------------------------*/

/*---------------------------chivas makeover---------------------------*/

/*---------------------------Left Navigation---------------------------*/

/*---------------------------chivas makeover---------------------------*/

/*main container*/

.leftMenu {
    width: 100% !important;
    position: absolute !important;
    top: 0 !important;
}

    /*remove border*/

    .leftMenu > ul {
        border: none !important;
    }

/*general style of items*/

#primaryNav .rmRootGroup > .rmItem > .rmText > .btnMenu, .menu_side_open li, .menu_side_close li {
    height: 60px;
    line-height: 60px;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .5px !important;
    text-align: left !important;
    border: none;
    border-radius: 0 !important;
    padding: 0 !important;
    color: #FAFAFA !important;
    overflow: hidden;
    position: relative;
}

/*#primaryNav .rmRootGroup > .rmItem:hover > .rmText {
    filter: brightness(90%);
}*/
#primaryNav .rmRootGroup > .rmItem:hover svg {
    filter: drop-shadow(0px 0px 5px #ffffff40);
    filter: brightness(110%);
}

#primaryNav .rmRootGroup > .rmItem.rmTemplate {
    cursor: pointer !important;
}

#primaryNav .RadMenu .rmToggle {
    display: none !important;
}
/*hack to align text vertically in the menu item*/
.btnMenu > span {
    vertical-align: middle;
    display: inline-block;
    line-height: normal;
}

/*hack to show  the text align and word wrap*/

.btnMenu .menu-text {
    margin-left: 10px;
    white-space: normal !important;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* number of lines to show */
    line-height: 20px;
    max-height: 40px;
    max-width: 160px;
    display: inline-block !important;
}

/*Disable menu button*/
.btnMenuDisabled.btnMenu .menu-image {
    opacity: .7;
}

.btnMenuDisabled.btnMenu .menu-text {
    opacity: .7;
}

.btnMenuDisabled.btnMenu:hover .menu-image,
.btnMenuDisabled.btnMenu:hover .menu-text {
    opacity: 1;
    cursor: not-allowed;
}
/*tooltips*/
.ui-tooltip, .fake-tooltip {
    padding: 8px;
    position: absolute;
    max-width: 300px !important;
    background: #535353 !important;
    color: white !important;
    font-weight: bold !important;
    font-size: 12px !important;
    font-family: Lato !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 2px;
    z-index: 1000000000 !important;
    width: unset !important;
    text-align: left;
    padding: 10px;
    padding-left: 15px !important;
    padding-right: 15px !important;
    max-height: 50vh;
    /*overflow: hidden;*/
    text-overflow: ellipsis;
}

.talent-tooltip.RadToolTip_Bootstrap {
    background: #535353 !important;
    border-color: #535353 !important;
}


    .talent-tooltip.RadToolTip_Bootstrap .rtCallout.rtCalloutTopCenter,
    .talent-tooltip.RadToolTip_Bootstrap .rtCallout.rtCalloutTopCenter:before,
    .talent-tooltip.RadToolTip_Bootstrap .rtCallout.rtCalloutTopRight:before {
        border-bottom-color: #535353 !important;
    }

.ui-tooltip-content::after, .fake-tooltip:after {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    border-right: 10px solid transparent !important;
    border-left: 10px solid transparent !important;
}

.bottom .ui-tooltip-content::after, .ui-tooltip-content::after, .fake-tooltip::after {
    border-bottom: 0 solid transparent;
    border-top: 10px solid #535353;
    left: 5px;
    bottom: -5px;
}

.top.ui-tooltip {
    margin-top: 10px;
}

.top .ui-tooltip-content::after {
    border-top: 0 solid transparent;
    border-bottom: 10px solid #535353;
    left: 5px;
    top: -10px;
}

.right .ui-tooltip-content::after {
    right: 5px;
    left: unset !important;
}

.ui-tooltip * {
    color: white !important;
}
/*solid background*/

.leftNav-solid {
    top: 0;
    bottom: 0;
    width: 40px;
    background-color: #6c9faf;
    background-color: rgba(108, 159, 175, 1);
    position: relative;
    display: block;
    height: 100%;
    box-shadow: 0 0 5px #000000;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}

/*main navigation*/

.leftFirstLevelNav {
    font-family: "Lato", Helvetica, Arial, sans-serif !important;
    font-size: 12px;
    color: #e7eff2;
    text-decoration: none solid rgb(231, 239, 242);
    position: absolute;
    top: 48px;
    bottom: 30px;
    white-space: nowrap;
    z-index: 7050;
}

    /*root items*/

    /*remove color*/

    .leftFirstLevelNav .RadMenu_Bootstrap .rmRootGroup {
        background-color: transparent !important;
    }

    /*hack to show the items vertically*/

    .leftFirstLevelNav li {
        list-style: none;
    }

#primaryNav .RadMenu ul.rmRootGroup {
    display: grid;
}

#primaryNav .rmRootGroup > .rmItem > .rmText > .btnMenu {
    font-size: 1em !important;
    font-weight: 400 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.left-menu-expanded.leftFirstLevelNav .rmRootGroup > .rmItem.rmTemplate > .rmText.rmExpanded {
    width: 100%;
    display: block;
}

    .left-menu-expanded.leftFirstLevelNav .rmRootGroup > .rmItem.rmTemplate > .rmText.rmExpanded .btnMenu {
        white-space: normal;
        overflow: initial;
    }

.left-menu-collapse.leftFirstLevelNav .rmRootGroup > .rmItem > .rmText > .btnMenu > .menu-text {
    display: none;
}


/* sub items*/
/*position*/
#primaryNav .rmSlide {
    margin-left: -20px;
    margin-top: 20px;
}

/*when collapse*/

.rmNoMargin {
    margin-left: 0 !important;
    margin-top: 0 !important;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}
/*default style*/
#primaryNav .rmSlide .rmGroup {
    border-radius: 0;
    border: none;
    box-shadow: 0 3px 12px #000000;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.11);
}

#primaryNav .rmSlide ul {
    background-color: #E7EFF2 !important;
}

#primaryNav .rmSlide > ul, #primaryNav .rmSlide > ul .btnMenu .rmText {
    width: 250px !important;
    color: #6C9FAF;
}

    #primaryNav .rmSlide > ul .btnMenu .rmText.rmDisabled, #primaryNav .RadMenu_Bootstrap .rmGroup .rmDisabled .menu-text {
        opacity: 0.7 !important;
        cursor: not-allowed !important;
    }

#primaryNav .rmSlide ul > li {
    line-height: 30px !important;
}


#primaryNav .rmSlide .menu-image {
    display: none !important;
}

/*selected button shadow
    #primaryNav .rmItem.rmTemplate.rmSelected {
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,.2);
}*/
/*image size*/

.leftFirstLevelNav img {
    height: 24px;
    width: 34px;
    margin: 3px;
    float: left;
}

/*svg class for color*/

.img24, .img24 svg {
    width: 24px !important;
    height: 24px !important;
}

.imgToSVG .st0, .imgToSVG .color-accent {
    min-width: 20px !important;
    fill: currentColor !important;
    stroke: none;
}

.imgToSVG.imgToSVG-stroke .st0 {
    stroke: currentColor;
}

.imgToSVG.st1-fill-p2 .st1 {
    fill: currentColor;
}

.filter-main-searchbox .rsbButton svg .st0 {
    stroke-width: 0;
}
/*size of the image container*/
span.menu-image {
    width: 40px !important;
    text-align: center;
    background-color: transparent !important;
    border-radius: 0;
}

/*size of the transformed SVG*/

.menu-image > svg, .nav_bar_icn > svg, .icon > svg, .icon.imgToSVG {
    width: 24px !important;
    height: 24px !important;
}

/*landing page tile icon size*/

.submenu-image.imgToSVG {
    width: 90px !important;
}


#primaryNav .rmText {
    padding: 0;
}

#primaryNav {
    z-index: 91000 !important;
}
/*---------------------------chivas makeover---------------------------*/
/*----------------------------Langing page-----------------------------*/
/*---------------------------chivas makeover---------------------------*/
.landingpage-header {
    margin-top: 20px;
    width: 50%;
    /*border-right: solid 4px #f7D895; //this line sets a yellow rectangle in the center of the page*/
    position: relative !important;
}

.landingpage-greetings {
    display: inline;
    color: #e9e9e9 !important;
    text-decoration: none solid rgb(233, 233, 233);
    width: 100%;
    background-size: cover;
}

.landingpage-info-text {
    display: block;
    width: 100%;
    background-size: cover;
    font-size: 36px;
    color: #e7eff2;
    font-weight: 300;
    text-decoration: none solid rgb(231, 239, 242);
}

.submenu-items {
    margin-left: -20px;
    display: flex;
    flex-wrap: wrap;
}

.subMenuTile {
    max-width: 200px;
    max-height: 180px;
    display: inline-flex !important;
    padding: 0;
    margin: 25px;
    border: none;
    background-color: transparent !important;
    transition: all .3s;
}

.tile-bg {
    background-color: white;
    width: 200px;
    height: 180px;
    position: absolute;
    opacity: .95;
}

    .tile-bg:hover {
        opacity: 1;
    }


.subMenuButton {
    width: 200px !important;
    height: 180px !important;
    margin: 0 !important;
    padding-top: 30px !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    padding-top: 0;
    padding-top: 30px !important;
    background-color: transparent !important;
    box-shadow: 0px 3px 6px #00000029;
}

.subMenuTile.profileSubmenu .subMenuButton {
    display: grid;
    color: white;
    padding: 20px !important;
}

    .subMenuTile.profileSubmenu .subMenuButton * {
        color: white !important;
    }

span.subMenuButton.RadButton_Bootstrap.rbLinkButton.rbDisabled {
    cursor: not-allowed !important;
}

.tile-bg.tile-disabled {
    opacity: .5 !important;
}

/*tiles in landing page*/
.subMenuTile .subMenuButton, .subMenuTile .subMenuButton .submenu-image.imgToSVG, .subMenuTile .submenu-text {
    color: white;
}

.submenu-image > img {
    height: 90px;
}

.submenu-text {
    width: 196px;
    height: 36px;
    font-family: Lato;
    font-size: 24px !important;
    line-height: 36px !important;
    text-align: center;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/*.rbLinkButton.subMenuButton:hover::after {
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    opacity: .4;
}*/

.subMenuTile:hover {
    box-shadow: 0px 3px 16px #00000080;
    filter: brightness(110%);
}

    .subMenuTile:hover svg {
        filter: drop-shadow(0px 0px 5px #00000040);
    }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .submenu-text {
        position: relative;
        bottom: 50px;
    }

    .submenu-image {
        position: relative;
        top: -15px;
    }
}
/*---------------------------chivas makeover---------------------------*/

/*-------------------------In module navigation-----------------------------*/

/*---------------------------chivas makeover---------------------------*/

.divModuleNav {
    margin-left: -20px !important;
    border: none !important;
    border-radius: 0;
    margin-right: 30px;
    height: 40px;
}

.nav_bar {
    width: 100%;
    line-height: 40px;
    background-color: #E7EFF2 !important;
}

.nav_icn {
    width: 24px;
    height: 24px;
    padding: 0 10px 0 16px;
    vertical-align: middle;
}

.nav_bar_icn {
    width: 24px;
    height: 24px;
    padding: 0;
    padding-right: 5px;
    vertical-align: middle;
}

.nav_bar-main {
    width: 100%;
    line-height: 40px;
    display: inline-flex;
    padding-right: 20px !important;
    padding-left: 20px !important;
    border-right: 9px #E7EFF2 solid;
    box-shadow: 0 3px 6px #000000;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

    .nav_bar-main .RadMenu ul.rmHorizontal {
        background-color: transparent !important;
        border-radius: 0 !important;
        border: none !important;
    }

    .nav_bar-main * {
        -moz-box-sizing: border-box !important;
        -webkit-box-sizing: border-box !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }

    .nav_bar-main li {
        display: inline-block;
        vertical-align: middle;
    }

button {
    border: none;
}



.nav_bar-main button, .moduleNav li {
    width: 180px !important;
    height: 40px !important;
    padding: 0 !important;
    font-weight: 400 !important;
    font-size: 1rem !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    color: #7c7c7c !important;
    background-color: transparent;
    border: None !important;
    cursor: pointer !important;
    display: inline-grid;
    line-height: 40px !important;
}

.btnModuleNav {
    cursor: pointer;
    width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



.nav_drop_icn {
    width: 48px;
    height: 24px;
    padding: 0;
}

.moduleNavFilter {
    width: -moz-fit-content;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

    .moduleNavFilter.RadDropDownList.RadDropDownList_Bootstrap,
    .moduleNavFilter.RadComboBox.RadComboBox_Bootstrap {
        height: 40px;
        line-height: 40px;
        background: transparent !important;
    }

.moduleNavFilterDiv {
    width: 40px;
    height: 40px;
    background-color: transparent;
    background-attachment: scroll;
    display: flex;
}

.moduleNavFilterOverlay {
    position: absolute;
    top: 0;
    height: 40px;
    width: 40px;
    padding: 6px !important;
    text-align: center;
}

    .moduleNavFilterOverlay svg {
        height: 24px !important;
    }

    .moduleNavFilterOverlay.open svg {
        -moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
        -ms-filter: "FlipV";
        filter: FlipV;
    }

.moduleNavFilter .rddlSelect {
    display: none;
}

.moduleNavFilter .RadDropDownList_Bootstrap .rddlFocused {
    box-shadow: none !important;
    padding: 0 !important;
}

.moduleNavFilter > .rddlInner, .moduleNavFilter > table > tbody > .rcbReadOnly > td {
    width: 40px;
    background: transparent !important;
    padding: 15px 0 15px 15px !important;
    padding-left: 15px;
    padding-top: 15px;
    padding-right: 0;
    padding-bottom: 15px;
    padding-left: 5px !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: unset !important;
    cursor: pointer;
    margin-left: 15px;
    margin-right: 15px;
}

.moduleNav ul, .moduleNav .rmItem.rmTemplate {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 40px !important;
}

.moduleNavFilter .rcbArrowCellRight > a {
    background-image: none !important;
    width: 60px !important;
    display: block !important;
    height: 40px !important;
    position: relative !important;
    margin: -15px -5px !important;
}

.moduleNavFilter table {
    width: 40px !important;
    height: 40px !important;
    margin: -3px !important;
    padding: 0 !important;
}

.nav_bar_selected, .nav_bar-main button:hover, .moduleNav li:hover, .moduleNav li.selected,
.moduleNav .rmItem.rmTemplate:hover, .moduleNavFilterDiv:hover, .moduleNav li.rmSelected {
    cursor: pointer !important;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.moduleNav li.rmSelected {
    font-weight: 700 !important;
}

.rddlItem.rddlItemTemplate,
.moduleNavDropDown {
    white-space: nowrap;
}

.moduleNavDropDown, .filter-modal {
    position: absolute;
    min-width: 140px;
    list-style: none;
    margin-left: 20px;
    margin-top: -10px;
    z-index: 99999;
    border-radius: 0;
}

    .moduleNavDropDown .use-alt-colors .rcbList li:nth-child(2n) {
        background-color: #f7f8fa;
    }

    .moduleNavDropDown.RadComboBoxDropDown_Bootstrap .rcbScroll {
        padding: 5px 0;
        overflow-x: hidden !important;
    }

.moduleNavFilter .rcbInput {
    visibility: hidden;
}

.rmText.rmDisabled .btnModuleNav {
    cursor: not-allowed !important;
    opacity: .5;
}

.moduleNavDropDown {
    display: table !important;
    padding: 10px;
    min-width: 200px !important;
}

    .moduleNavDropDown .rcbFooter {
        border: none !important;
    }

    .import-file-config-modal::before,
    .myProfileInfo .rpSlide::before,
    .moduleNavDropDown:before, .filter-modal:before, .pnlRoleFinder:before, .div-info-tooltip:before {
        content: '';
        display: block;
        position: absolute;
        left: 9px;
        top: -25px;
        width: 0;
        height: 0;
        border: 15px solid transparent;
        border-bottom-color: transparent;
        border-bottom-color: #BEBEBE;
    }

    .import-file-config-modal::after,
    .myProfileInfo .rpSlide::after,
    .filter-modal:after, .moduleNavDropDown:after, .pnlRoleFinder:after, .div-info-tooltip:after {
        content: '';
        display: block;
        position: absolute;
        left: 9px;
        top: -25px;
        width: 0;
        height: 0;
        border: 15px solid transparent;
        border-bottom-color: transparent;
        border-bottom-color: white;
    }

.myProfileInfo .rpSlide {
    overflow: visible !important;
    margin-right: 32px;
    margin-top: 12px;
}

.myProfileInfo .rpOut.rpNavigation {
    background: transparent !important;
}

.myProfileInfo .rpSlide .rpGroup.rpLevel1 {
}

.PROFILE-DROPDOWN:before, .PROFILE-DROPDOWN:after,
.myProfileInfo .rpSlide::after, .myProfileInfo .rpSlide::before,
.modal-arrow-right:before, .modal-arrow-right:after, .div-info-tooltip-right:before, .div-info-tooltip-right:after {
    right: 9px;
    left: unset;
}


.talent-combo-dropdown .rpSlide .rpGroup.rpLevel1,
.moduleNavDropDown .rddlPopup.rddlPopup_Bootstrap, .filter-modal {
    background: white;
    border: solid 1px #BEBEBE;
    border-radius: 2px;
    box-shadow: 0 3px 6px #000000;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    overflow: visible;
    margin: 0;
}

.talent-dropdown {
    max-height: 200px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.myProfileInfo .RadCheckBox.RadButton,
.moduleNavDropDown .rbText,
.moduleNavDropDown label {
    color: #A8A8A8 !important;
    height: 25px;
    line-height: 25px !important;
    padding: 0 !important;
}

.myProfileInfo .rpSlide .rpLink.rpHovered,
.moduleNavDropDown .rddlItem.rddlItemTemplate.rddlItemHovered {
    background-color: #E7EFF2 !important;
}


/*Filter*/
.filter-bar {
    position: relative;
}

    .filter-bar span.filter-bar-text, .filter-bar-modal span.filter-bar-text {
        line-height: 32px;
        white-space: nowrap;
    }

        .filter-bar span.filter-bar-text.margin-right, .filter-bar-modal span.filter-bar-text.margin-right {
            padding-right: 30px;
        }

    .filter-bar .filter-additional, .filter-bar-modal .filter-additional {
        position: absolute;
        top: 5px;
        max-width: calc(100% - 450px);
        right: 0;
    }

        .filter-bar .filter-additional.right100, .filter-bar-modal .filter-additional.right100 {
            right: 100px !important;
        }

.filter-bar-modal .main-applied-filters-container {
    width: 100% !important;
    margin: 0;
}

.filter-modal {
    min-width: 570px !important;
    left: 20px !important;
    padding: 10px !important;
    display: inline-table !important;
    border-radius: 10px !important;
    max-height: 60vh !important;
    overflow: auto !important;
    position: relative !important;
}

.filter-modal-large {
    min-width: 800px !important;
}

.filter-modal-x-large {
    min-width: 900px !important;
}

.filter-modal .rcbHeader {
    display: flex;
    height: 25px;
    padding: 0 !important;
}

.filter-header {
    float: left !important;
    text-align: right;
    width: 100%;
}

.filter-header-btn {
    text-align: right !important;
    width: 24px;
    padding: 0 !important;
    margin: 0;
    height: 24px !important;
    border: none !important;
    color: #7b9faf !important;
    background-color: transparent !important;
}

    .filter-header-btn:hover {
        color: var(--accent-color) !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }


.filter-row {
    min-height: 35px;
    line-height: 30px;
    padding: 5px;
    vertical-align: middle !important;
}

.filter-modal.filter-modal-panel {
    position: absolute !important;
}

.filterBarButton, .filterBarButton .rcbInput, .filterBarButton .rcbInputCell, .filterBarButton .rcbArrowCellRight {
    background: transparent !important;
    background-color: transparent;
    border: none !important;
    color: gray !important;
}

.RadButton.filterBarButton {
    line-height: 45px !important;
}

.filter-button-list > table, .filter-button .filter-text {
    position: absolute !important;
    width: 100px !important;
    text-align: center !important;
    height: 42px !important;
}

.filter-button.RadComboBox_Bootstrap .rcbReadOnly .rcbArrowCellRight.rcbArrowCell {
    border: none;
}

.filter-button, .filter-button > table > tbody > tr.rcbReadOnly > td > input,
.filter-button .rcbArrowCell.rcbArrowCellRight a {
    cursor: pointer !important;
    width: 100% !important;
    left: 0 !important;
    height: 40px !important;
    top: 0 !important;
    margin-top: 0 !important;
}

.filter-button-list button {
    border: 1px var(--accent-color) solid !important;
    width: calc(23% - 10px);
    height: 25px;
    margin: 5px 10px;
    transition: all .3s;
}

.filter-modal-large .filter-button-list button {
    width: calc(25% - 10px);
    height: 25px;
    margin: 5px 10px;
}

.filter-button-list.two-buttons button {
    width: 40%;
    margin: 0 4%;
    border: 1px var(--accent-color) solid;
    height: 25px;
}

.filter-button-list.filter-button-list-sm button {
    padding: 0 0 !important;
    margin-right: 15px;
    height: 24px !important;
    width: 24px;
    text-align: center;
}


.filter-button-list.filter-button-list-sm .rcbItem.rcbTemplate:hover {
    background-color: #bebebe;
}

.filter-modal-large .filter-button-list button {
    width: 23%;
    min-width: 23%;
    padding: 0 5px !important;
    box-sizing: border-box;
    margin: 0;
    margin-right: 0px;
    margin-right: 2%;
    border-radius: 3px;
}

    .filter-modal-large .filter-button-list button span {
        width: 100%;
        top: -1px;
    }

.rcbList * {
    box-sizing: border-box;
}

.filter-button .rcbInputCell.rcbInputCellLeft {
    display: none !important;
}

.filter-button .rcbArrowCell.rcbArrowCellRight a {
    width: 100px !important;
}

.filter-button.filter-button-md > table, .filter-button.filter-button-md .filter-text, .filter-button.filter-button-md .rcbArrowCell.rcbArrowCellRight a {
    width: 160px !important;
    padding-top: 0;
}

input.filter-button {
    background: none;
    border: none;
    height: 45px !important;
    font-size: 14px;
    vertical-align: middle;
}

.filter-button > table > tbody > tr.rcbReadOnly {
    opacity: 0 !important;
    cursor: pointer !important;
}

.filter-text {
    position: relative;
    padding: 0;
    margin: 5px 0;
}

.filter-counter {
    color: #f45849 !important;
    background-color: transparent !important;
    border-radius: 5px !important;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    vertical-align: middle;
    font-weight: bold;
    border: 1px solid #f45849;
    margin-left: 5px !important;
    display: inline-block;
}

    .filter-counter.zero {
        color: white !important;
        background: #dedede !important;
        border: none !important;
    }

.filter-footer {
    padding-top: 5px;
    width: 100%;
    display: flex;
}

    .filter-footer .filter-footer-left {
        text-align: left;
        width: 50%;
        display: inline-block;
    }

    .filter-footer .filter-footer-right {
        text-align: right;
        width: 50%;
        justify-content: flex-end;
    }

        .filter-footer.filter-footer-right > div {
            margin-left: 10px;
        }

.filter-dropdown .rcbItem.rcbTemplate {
    padding: 0 !important;
    margin: 5px !important;
}

.filter-dropdown .rcbMoreResults.btn-primary {
    font-weight: normal !important;
}

.modalBackground,
div.careermap-veil, div.fullscreen-veil, .progress-veil, .TelerikModalOverlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: white !important;
    z-index: 100000 !important;
    opacity: 0.5 !important;
    background-image: linear-gradient(0, rgba(250, 250, 250, 0.75) 3%, rgba(81, 119, 131, 0.75) 100%) !important;
    /* backdrop-filter: blur(10px);*/
}

div.filter-veil {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: white !important;
    z-index: 3000 !important;
    opacity: 0.5 !important;
    background-image: linear-gradient(0, rgba(250, 250, 250, 0.75) 3%, rgba(81, 119, 131, 0.75) 100%) !important;
}

.progress-veil {
    cursor: wait;
}
/*filter control container*/
.filterItem {
    padding: 0;
    border: none;
    border-bottom: solid #bebebe 1px;
}

/*filter row*/

.filter-modal > div > ul > li.rcbItem {
    padding: 0 !important;
}

.filter-control.filter-control-horizontal {
    width: 100%;
    display: table;
    border-bottom: 1px white solid;
    margin-bottom: 3px;
    padding-top: 2px;
}


    .filter-control.filter-control-horizontal:hover {
        border-bottom: 1px #ebebeb solid;
        box-shadow: 0 1px 3px rgb(210, 220, 230);
    }

div.filter-control[disabled] {
    opacity: .5;
}

.rsbListItem:hover label, .rcbList .rcbHovered label {
    color: white !important;
}

/*header text area*/

.filter-control-header {
    width: 140px;
    height: 100%;
    padding: 0 0 0 10px;
    border: none;
    font-family: Lato;
    font-size: 14px;
    color: #7c7c7c;
    text-decoration: none solid rgb(124, 124, 124);
    display: table-cell;
    vertical-align: middle;
    position: relative;
    max-width: 140px;
}

    .filter-control-header span {
        max-width: 200px;
        text-overflow: ellipsis;
        overflow: hidden;
    }

.filter-required-asterisk {
    display: none;
    padding: 0 !important;
}

.isRequired .filter-required-asterisk {
    display: block;
}

.filter-control.filter-control-horizontal:hover .filter-control-header {
    color: #517783 !important;
    /*font-weight: bolder !important;*/
}

/*Right side of filters*/

.filter-control-content {
    width: 370px;
    height: 100%;
    padding: 0 0 0 10px;
    border: none;
    background-size: cover;
    display: table-cell;
    line-height: 50px;
    vertical-align: middle;
}

/*hides the button and show a text on top*/

.filter-button-overlay {
    position: absolute;
    top: 0;
    width: 100px !important;
    text-align: center;
}


.filter-control.filter-control-horizontal:hover .filter-control-content .RadComboBox_Bootstrap table {
    background-color: white !important;
}

/*filter combo box and date picker*/
.filter-searchbox.RadSearchBox {
    width: 80%;
    border-radius: 0;
}


    .filter-searchbox.RadSearchBox .rsbInner {
        border: none;
        border-bottom: 1px solid var(--accent-color) !important;
        box-shadow: none;
        background-color: transparent;
    }

        .placeholder,
        .filter-searchbox.RadSearchBox .rsbInner input::placeholder {
            color: #b9b9b9 !important;
            font-size: 14px !important;
            font-style: italic !important;
        }

.talent-combo, .filter-button-list {
    width: calc(100% - 50px) !important;
    border-radius: 0;
}

    .talent-combo .rcbInput {
        color: rgb(124, 124, 124);
    }

    .talent-combo .rcbDisabled {
        padding: 0px !important;
    }

    .talent-combo table.rcbHovered .rcbInputCell.rcbInputCellLeft {
        background: white !important;
    }

    .filter-button-list.filter-button-list-sm {
        width: 100% !important;
        margin-top: 5px;
    }

.talent-datepicker {
    width: 135px !important;
}

.RadPicker .RadInputError::after {
    left: 7px;
    background: #f2dede;
    width: 16px;
    z-index: 10;
    padding: 6px;
    top: -8px;
}

.RadPicker:hover .RadInputError::after, .RadPicker:focus .RadInputError::after, .RadPicker:active .RadInputError::after {
    display: none;
}

.RadPicker_Bootstrap .rcSelect {
    left: 1px !important;
    right: unset !important;
    background-color: transparent !important;
}

    .RadPicker_Bootstrap .rcSelect a {
        content: '';
        width: 24px;
        height: 24px;
        -webkit-mask: url(../Images/svg/icn_calendar.svg) no-repeat 50% 50% !important;
        mask: url(../Images/svg/icn_calendar.svg) no-repeat 50% 50% !important;
        background-color: var(--accent-color);
    }

.RadCalendar .rcRow th {
    color: #9d9e9f;
}

.RadCalendarPopupShadows,
.talent-calendar {
    box-shadow: 0px 1px 3px rgba(0,0,0,.2);
}

.RadCalendar .rcTitlebar, .RadCalendar_Bootstrap .rcWeek th {
    background: #d8e4e8 !important;
}

.RadCalendar_Bootstrap .rcRow th {
    background: #d8e4e860 !important;
}

.talent-calendar td a {
    color: currentColor !important;
}

    .talent-calendar td a.gray {
        color: #4C4C54 !important;
    }

.talent-calendar td.rcSelected a {
    color: white !important;
}

.talent-calendar td.rcSelected:hover a,
.talent-calendar td.rcHover:hover a {
    background-color: #e9f1f3 !important;
    color: currentColor !important;
}

.talent-datepicker .RadInput .riTextBox {
    border: none;
    border-bottom-color: currentcolor;
    border-bottom-style: none;
    border-bottom-width: medium;
    border-bottom: 1px solid;
    border-radius: 0;
    margin: 0;
    padding: 4px 10px 4px 32px;
    text-align: right;
    color: #7c7c7c;
    background: transparent;
    background: #ffffff00;
}

.talent-combo table.rcbHovered {
    padding: 0 !important;
    background-color: white !important;
}

.RadPicker_Bootstrap.rcCalPopupOpen .RadInput {
    background-color: transparent !important;
    border: none !important;
}

.talent-datepicker .RadInput .riTextBox:hover, .RadPicker_Bootstrap.rcTimePopupOpen .RadInput .riTextBox, .RadPicker_Bootstrap.rcTimePopupOpen .rcSelect {
    background-color: white !important;
}

.talent-combo table.rcbHovered input {
    color: var(--accent-color) !important;
}


.talent-combo .rcbFocused input, .talent-combo .rcbFocused {
    color: black !important;
    box-shadow: none !important;
}

.talent-combo .rcbInputCell.rcbInputCellLeft, .talent-combo .rcbArrowCell.rcbArrowCellRight {
    color: #a8a8a8 !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--accent-color) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


#filtersLongDiv.dvLong.filter_barColor, .dvLong.secondary_bar_container, .divModuleNav .dvLong.filter_barColor {
    margin-left: -20px !important;
    margin-right: -20px !important;
    background: #fafafa;
    height: 40px !important;
    line-height: 40px !important;
    padding-left: 12px;
}

.navigationitems .dvLong.filter_barColor {
    margin-left: -20px !important;
    margin-right: -20px !important;
    background: #fafafa;
    line-height: 40px !important;
    padding-left: 12px;
}


.divModuleNav .dvLong.filter_barColor {
    line-height: 30px !important;
}

.filter_barColor, .secondary_bar_container {
    background: #fafafa !important;
}

#filtersLongDiv .filterBarButton, #filtersLongDiv .filterBarButton:active, .secondary_bar .secondary_bar_button, .secondary_bar .secondary_bar_button:active {
    background-color: transparent !important;
    color: grey !important;
    padding: 0 !important;
    margin: 0 25px !important;
    border: none !important;
    box-shadow: none;
}

    #filtersLongDiv .filterBarButton input, .secondary_bar .secondary_bar_button input {
        height: 40px;
        line-height: 40px;
        padding: 0;
        background-color: transparent !important;
        color: grey !important;
        padding: 0 !important;
        margin: 0 !important;
    }

        #filtersLongDiv .filterBarButton:hover, #filtersLongDiv .filterBarButton input:hover, .secondary_bar .secondary_bar_button:hover, .secondary_bar .secondary_bar_button input:hover {
            color: var(--accent-color) !important;
        }

/*main filter searchbox*/


.filter-main-searchbox, input[type=text].filter-main-searchbox, .RadComboBox.RadComboBox_Bootstrap.filter-main-combobox {
    color: #a8a8a8;
    width: 220px;
    border-radius: 10px !important;
    vertical-align: middle !important;
    margin-top: 8px;
    background: transparent !important;
    height: 28px;
}

.filter-main-searchbox {
    margin-top: 6px;
}

#DashBoardFilters_pnlMainKeyword .btn-image-only.btn-image-only-sm svg {
    height: 28px;
    width: 28px;
}

.RadComboBox.RadComboBox_Bootstrap.filter-main-combobox .rcbInput {
    color: #a8a8a8;
}


div.divAdvSearch .rsbInner, .filter-main-searchbox.RadSearchBox .rsbInner, input[type=text].filter-main-searchbox, .RadComboBox.RadComboBox_Bootstrap.filter-main-combobox td {
    border: 1px #bebebe solid !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: #a8a8a8 !important;
    height: 28px;
}


div.divAdvSearch .rsbInner, .filter-main-searchbox.RadSearchBox .rsbInner, input[type=text].filter-main-searchbox {
    border-radius: 10px !important;
}

    .filter-main-searchbox .rsbInner:hover, .filter-main-searchbox .rsbInner:focus,
    input[type=text].filter-main-searchbox:hover, input[type=text].filter-main-searchbox:focus,
    .RadComboBox.RadComboBox_Bootstrap.filter-main-combobox .rcbFocused td {
        border: 1px var(--accent-color) solid !important;
    }

.RadComboBox.RadComboBox_Bootstrap.filter-main-combobox td.rcbInputCell {
    border-right: none !important;
    border-radius: 10px 0px 0px 10px !important;
}

.RadComboBox.RadComboBox_Bootstrap.filter-main-combobox td.rcbArrowCellRight {
    border-left: none !important;
    border-radius: 0px 10px 10px 0px !important;
}

div.divAdvSearch .rsbInner:focus,
.filter-main-searchbox .rsbInner:focus, input[type=text].filter-main-searchbox:focus {
    background-color: white !important;
}

.filter-main-searchbox .rsbInner input {
    color: #a8a8a8 !important;
    width: calc(100% - 60px) !important;
}

.filter-main-searchbox .rsbButton.rsbButtonSearch, .filter-main-searchbox .rsbButton {
    background: transparent !important;
    border: none !important;
    color: var(--accent-color) !important;
    cursor: pointer !important;
}

.filter-main-searchbox .RadSearchBox .rsbButtons {
    position: absolute !important;
    right: 0 !important;
}

div.divAdvSearch .rsbInner, div.divAdvSearch .rsbInner:hover, div.divAdvSearch .rsbInner:focus {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

.advSearchTabItem {
    width: 20%;
    text-align: center;
    font-size: 14px;
    align-self: flex-end;
    padding-bottom: 2px;
}


.RadComboBox.filter-main-combobox .rcbEmptyMessage {
    font-style: normal;
}

.RadComboBox.RadComboBox_Bootstrap.filter-main-combobox .rcbArrowCell a,
.rsbIcon.rsbIconSearch {
    background-image: url(../Images/svg/icn_search-active.svg) !important;
    background-size: 30px;
}

.rsbIcon.rsbIconSearch {
    background-position: -5px -6px !important;
}

.RadComboBox.RadComboBox_Bootstrap.filter-main-combobox .rcbFocused .rcbArrowCell a {
    -moz-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -ms-filter: "";
    filter: unset;
}



.main-keyword-btn {
    position: absolute !important;
    right: -5px !important;
    top: 3px !important;
}
/*search textbox*/

.filter-search-box {
    width: 50% !important;
    height: 30px;
    padding: 0 10px;
    background-color: #ffffff;
    background-size: cover;
    font-family: Lato !important;
    font-size: 14px !important;
    color: #a8a8a8;
    text-decoration: none solid rgb(168, 168, 168);
    margin: 5px;
    padding: 0;
    border-radius: 2px !important;
    border: none !important;
}


    .filter-search-box .rsbEmptyMessage {
        font-style: italic;
        filter: alpha(opacity=80);
        opacity: 0.4;
    }

.RadSearchBox_Bootstrap.filter-search-box .rsbInner {
    padding: 0;
    border-radius: 2px;
    border-color: #ccc;
    color: #333;
    background-color: #fff;
    box-shadow: none;
    border: none;
}

/*buttons (options, checkbox)*/

.quick-filter-button, .secondary_bar_button {
    height: 45px !important;
    line-height: 45px !important;
    vertical-align: middle !important;
    display: table !important;
}

    .quick-filter-button table, .secondary_bar_button table {
        height: 45px !important;
        display: inherit !important;
    }

    .quick-filter-button .rcbLabel, .secondary_bar_button .rcbLabel {
        display: none !important;
    }

    .quick-filter-button.RadComboBox .rcbEmptyMessage,
    .quick-filter-button .rcbInputCell, .secondary_bar_button .rcbInputCell,
    .filter-button .RadComboBox_Bootstrap .filter-text, .secondary_bar_button .RadComboBox_Bootstrap .filter-text,
    .filter-button .filter-text, .secondary_bar_button .filter-text {
        border: none !important;
        color: #7c7c7c !important;
        background-color: transparent !important;
        border-radius: 2px 0 0 2px !important;
        box-shadow: none !important;
        font-size: 14px !important;
        font-style: normal;
    }

    .quick-filter-button .rcbArrowCell.rcbArrowCellRight, .secondary_bar_button .rcbArrowCell.rcbArrowCellRight {
        border: none;
        background-color: transparent;
        box-shadow: none !important;
    }


    .quick-filter-button .rcbHovered .rcbArrowCell, .quick-filter-button .rcbFocused .rcbArrowCell,
    .filter-button .RadComboBox_Bootstrap .rcbFocused .filter-text,
    .secondary_bar_button .rcbHovered .rcbArrowCell, .secondary_bar_button .rcbFocused .rcbArrowCell,
    .secondary_bar_button .RadComboBox_Bootstrap .rcbFocused .filter-text {
        border: none;
        box-shadow: none !important;
        background-color: transparent !important;
    }

.filter-button, .secondary_bar_button {
    display: block !important;
    width: 100px !important;
    position: relative;
    height: 42px;
    cursor: pointer !important;
}

    .filter-button.filter-button-md {
        width: 160px !important;
    }

.secondary_bar_button {
    text-align: left !important;
    min-width: 120px !important;
}

.filter-button-div {
    position: relative !important;
}

    .filter-button-div:hover .filter-text, .filter-button:hover .filter-text, .quick-filter-button:hover input, .secondary_bar_button:hover input {
        color: #535353 !important;
    }

.quick-filter-button:hover .rcbArrowCell.rcbArrowCellRight, .secondary_bar_button:hover .rcbArrowCell.rcbArrowCellRight {
    border: none;
    box-shadow: none !important;
}

.filter-table .talent-datepicker {
    margin-right: 20px;
}

.rcbLabel.filter-text {
    margin-top: 7px;
}

.filter-modal .rcbList li:nth-child(2n) {
    background-color: #f6f8fa;
}

    .filter-modal .rcbList li:nth-child(2n):hover {
        background-color: #fcfcfc;
    }

.filter-button-list {
    display: inline !important;
}

.filter-row .filter-button-list {
    display: inline-flex !important;
}

.filter-button button {
    width: 97px;
    height: 30px;
    border: 1px solid #26bdc1 !important;
    border-radius: 2px !important;
    background-size: cover;
    font-family: Lato !important;
    font-size: 14px;
    color: var(--accent-color) !important;
    text-decoration: none solid rgb(37, 190, 193);
    text-align: center !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding: 0 10px !important;
    margin: 5px !important;
    display: table-cell !important;
}

.filter-button-list button {
    padding: 0 0 !important;
    margin: 0;
    margin-right: 0;
    margin-right: 6px;
    height: 35px !important;
}

    .filter-button-list button .rbText {
        max-width: 95%;
        display: inline-block;
        vertical-align: middle;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

.filter-button-list.filter-button-list-sm button .rbText {
    width: unset;
}

.filter-button-list button.rbHovered {
    background-color: #B2ACCD;
}

.filter-button-list button.rbChecked {
    background-color: var(--accent-color) !important;
}

.filter-button-list span.rbToggleRadio, .filter-button-list span.rbToggleRadioChecked,
.filter-button-list span.rbToggleCheckbox, .filter-button-list span.rbToggleCheckboxChecked {
    display: none;
    width: 0;
    height: 0;
}

.filter-control-content button span.rbText, .filter-button-list span.rbText {
    padding: 0 !important;
    color: var(--accent-color) !important;
}

.filter-button-list button.rbHovered span.rbText, .filter-button-list button.rbChecked span.rbText {
    color: white !important;
}

.filter-remove-filter-btn, .btn-remove {
    border: none !important;
    color: var(--accent-color) !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    min-height: 24px !important;
    float: right !important;
    margin-top: 5px;
}

.btn-remove {
    float: unset !important;
    display: inline-block;
}

    .filter-remove-filter-btn:hover, .btn-remove:hover {
        cursor: pointer !important;
    }

.btn-link {
    color: var(--accent-color) !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    border: none !important;
    font-size: inherit !important;
}

    .btn-link input {
        color: currentColor !important;
        font-size: inherit !important;
    }

.btn-default.btn-link {
    border: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.lnk.btn-link, .lnk.btn-link input {
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
}

a.aspNetDisabled.btn-link.btn-link-for-admin {
    color: inherit !important;
    text-decoration-line: none !important;
}

.btn-as-icon:hover {
    box-shadow: none !important;
    filter: none;
}

    .btn-as-icon:hover svg {
        filter: brightness(110%);
    }

.selected-filters {
    background-color: #f3f4f5 !important;
    background-color: #f3f4f580 !important;
    line-height: 25px !important;
    padding-left: 10px;
    margin-left: -10px;
}

.filter-pill {
    background-color: white !important;
    display: inline-block;
    margin: 0 5px;
    width: 30% !important;
    height: 20px !important;
    line-height: 17px !important;
    text-align: center;
    align-content: center;
    padding: 0px 5px;
    border: 1px solid #26bdc1;
    border-radius: 5px;
    font-family: Lato;
    font-size: 12px;
    color: var(--accent-color);
}


.filter-pill-text, .pnlRolePropertiesEditor-container span.filter-pill-text, .role-details-container .filter-control span.filter-pill-text {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    width: calc(100% - 21px) !important;
    display: inline-block !important;
}

.filter-pill-close, .pnlRolePropertiesEditor-container span.filter-pill-close, .role-details-container .filter-control span.filter-pill-close {
    color: #517783 !important;
    float: right;
    position: relative;
    cursor: pointer;
    width: 20px !important;
    height: 20px;
    top: -1px;
    right: -5px;
}

    .filter-pill-close:hover, .pnlRolePropertiesEditor-container span.filter-pill-close:hover, .role-details-container .filter-control span.filter-pill-close:hover {
        opacity: 1;
    }

.filter-pill:hover {
    background-color: var(--accent-color) !important;
}

    .filter-pill:hover, .filter-pill:hover .filter-pill-close {
        color: white !important;
    }

.main-applied-filters {
    display: inline-flex;
    margin-top: 3px;
    margin-bottom: 3px;
}

    .main-applied-filters .filter-gategory-separator {
        transform: rotate(270deg);
        margin-top: 3px;
        margin-left: -5px;
    }

        .main-applied-filters .filter-gategory-separator:last-of-type {
            display: none;
        }

    .main-applied-filters .filter-pill {
        display: flex;
        width: initial !important;
        margin-top: 2px;
        margin-bottom: 3px;
    }

        .main-applied-filters .filter-pill .filter-pill-text {
            width: 100% !important;
            margin-right: 10px;
        }



    .main-applied-filters .main-filter-pills-container {
        display: inline-flex;
        flex-wrap: wrap;
    }

        .main-applied-filters .main-filter-pills-container > div {
            display: inline-flex;
            line-height: 19px !important;
        }


    .main-applied-filters .filter-pill.pill-highlight {
        opacity: 0.9;
        border-color: #FF9944 !important;
        color: #FF6656 !important;
    }

    .main-applied-filters .filter-pill span.RadButton_Bootstrap.rbLinkButton, .main-applied-filters .filter-pill span.RadButton_Bootstrap.rbLinkButton svg {
        height: 20px !important;
        padding: 0;
        border: none;
    }

    .main-applied-filters .filter-pill-category-close {
        border: none !important;
        padding: 0 !important;
        padding-top: 4px !important;
        height: 22px !important;
        min-height: 24px !important;
    }

    .main-applied-filters .filter-pill .filter-pill-close {
        top: 0px;
    }

    .main-applied-filters .filter-pill-category-close svg {
        height: 21px;
    }

    .main-applied-filters .filter-pill-category-close {
        display: none;
    }

    .main-applied-filters div + div + span.filter-pill-category-close {
        display: flex;
    }

.main-applied-filters-container {
    background-color: white;
    box-shadow: 0px 1px 3px rgba(0,0,0,.1);
    margin-left: -20px;
    padding-left: 20px;
    width: calc(100% - 20px);
    box-sizing: border-box;
    border-top: 1px solid #dedede;
    min-height: 30px;
}

.main-applied-filters .main-filter-text {
    white-space: nowrap;
    margin-right: 10px;
    line-height: 26px !important;
}
/*utilities*/
/* Create two equal columns that floats next to each other */
.column {
    float: left;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

.no-box-shadow {
    box-shadow: none !important;
}

.no-padding {
    padding: 0 !important;
}

.padding-vertical {
    padding-bottom: 20px !important;
    padding-top: 20px !important;
}
/*
.validationSummaryMessage {
    overflow: auto;
    font-weight: bold;
    color: white;
    position: fixed;
    z-index: 999999;
    bottom: 30px;
    margin: 0;
    padding: 5px;
    left: 40px;
}

    .validationSummaryMessage.error {
        background-color: #8B1820;
        box-shadow: 0 0 5px #c32d2d;
    }

    .validationSummaryMessage.success {
        background-color: #20a91f;
        box-shadow: 0 0 5px #6C9FAF;
    }
*/

.filter-button.button-as-dropdown {
    border: none !important;
    vertical-align: middle !important;
    line-height: 45px !important;
    position: relative;
    padding: 0 10px !important;
    width: 110px !important;
    margin-right: 20px;
}

    .filter-button.button-as-dropdown span {
        margin: 0 !important;
        left: 0;
    }

.button-as-dropdown .rcbArrowCell.rcbArrowCellRight {
    position: absolute !important;
    right: 0;
    top: 11px;
    position: relative;
    height: 100% !important;
    margin: 0 10px !important;
}
/*Comoo box arrowdown*/
.rcbArrowCell a, .RadColorPicker .rcpIcon a::before, .button-as-dropdown .rcbArrowCell.rcbArrowCellRight {
    background-image: url(../images/svg/icn_arrowdown-sec.svg) !important;
    background-repeat: no-repeat !important;
    margin: 0 !important;
    background-position: center !important;
    width: 24px !important;
    height: 24px !important;
    cursor: pointer !important;
    min-width: 24px;
    border-bottom: none;
}

.RadColorPicker .rcpIcon a::before {
    content: "" !important;
    top: unset !important;
}

.RadColorPicker_Bootstrap .rcpIcon a:focus:before {
    background-image: url(../images/svg/icn_arrowup-sec.svg) !important;
}

.rcbFocused .rcbArrowCell a {
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    -ms-filter: "FlipV";
    filter: FlipV;
}

/*Module Navigation Styles*/
#moduleNavigation_navbar {
    height: 40px;
}

#ctl00_contentBody_moduleNavigation_moduleNavFilter_DropDown {
    background: white;
    border: solid 1px #BEBEBE;
    border-radius: 2px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    overflow: visible;
    margin: 0;
    width: 200px;
}

.rcpApplyButton {
    padding: 6px !important;
}

.rcpPalette {
    width: 18em !important;
}

.RadColorPicker_Bootstrap .rcpPalette .rcpHexInput, .rcpInput, .radInput .riTextBox {
    color: #a8a8a8 !important;
    border: none !important;
    border-bottom-color: currentcolor;
    border-bottom-style: none;
    border-bottom-width: medium;
    border-bottom: 1px var(--accent-color) solid !important;
}

.RadCalendarPopup {
    z-index: 500000;
}

.RadColorPicker .rcpMillionColorsPageView .rcpInputsWrapper {
    font-size: 12px;
}

.RadColorPicker .rcpInputsWrapper ul {
    padding-top: 20px !important;
}

.rcpInput {
    margin: 0 0 0 5px !important;
    width: 25px !important;
    text-align: right;
    background-color: white !important;
}

/*div side info*/

.div-side-info {
    display: block !important;
    border: none !important;
    border-right: #f7d895 4px solid !important;
    height: 60vh !important;
}

.div-side-info-title {
    font-family: Lato;
    font-size: 18px;
    color: #a8a8a8;
    line-height: 21px;
}



.image-button {
    border: none !important;
    padding: 0 !important;
    height: 24px !important;
    vertical-align: bottom !important;
    line-height: 24px !important;
    margin: 0 !important;
    min-height: 24px !important;
    color: var(--accent-color) !important;
    border-radius: 2px !important;
}

/* New Chivas controls look*/

input[type=text], input[type=number], input[type=password] {
    padding: 10px;
    margin: 10px 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 1px solid var(--primary-two-color);
    background-color: transparent;
    border-radius: 0;
    outline: none;
    font-size: 0.875em;
    line-height: 1em;
    font-weight: 400;
    color: #7C7C7C;
}

    input[type=text]:focus, input[type=number]:focus, input[type=password]:focus {
        border-color: var(--accent-color);
        color: #535353;
        background-color: transparent !important;
    }

    input[type=text]:disabled, input[type=text]:read-only, input[type=number]:disabled, input[type=number]:read-only, input[type=password]:disabled {
        border-bottom: 1px solid #B6CFD7;
        background-color: #FAFAFA;
        cursor: not-allowed;
        color: #A8A8A8;
    }

span[disabled], span[disabled] input:hover {
    opacity: .5 !important;
    cursor: not-allowed !important;
}

.rcbInputCell.rcbInputCellLeft input[type=text] {
    border-bottom: none !important;
}

textarea {
    padding: 10px;
    margin: 10px 0;
    box-sizing: border-box;
    border: solid 1px var(--primary-two-color);
    background-color: transparent;
    border-radius: 2px;
    outline: none;
    font-size: 0.875em;
    line-height: 1em;
    font-weight: 400;
    color: #7C7C7C;
}

    textarea:focus {
        border-color: var(--accent-color);
        color: #535353;
        background-color: transparent !important;
    }

    textarea:disabled {
        border-bottom: 1px solid #B6CFD7;
        background-color: #FAFAFA;
        cursor: not-allowed;
        color: #A8A8A8;
    }

.RadSearchBox .rsbInner {
    border-color: var(--primary-two-color);
    border-radius: 2px !important;
}

.rsbButtons.rsbButtonsRight {
    line-height: 32.5px;
    margin-top: -1px;
    right: 2px !important;
    position: relative;
}

.RadSearchBox .rsbInput {
    background-color: transparent;
    font-size: 0.875rem;
    line-height: 1em;
    font-weight: 400;
    color: #7C7C7C !important;
    opacity: 1;
    height: 40px;
    padding-top: 1em !important;
    padding-bottom: 1em !important;
    font-family: Lato !important;
    font-weight: 400 !important;
    width: 100% !important;
}

    .RadSearchBox .rsbInput:focus {
        color: #535353 !important;
        background-color: transparent !important;
    }

.RadSearchBox .rsbEmptyMessage {
    font-style: normal !important;
    color: #7C7C7C !important;
    font-family: Lato !important;
    font-weight: 400 !important;
}

.RadSearchBox .rsbInput:focus {
    color: #535353 !important;
    background-color: transparent !important;
}

.RadSearchBox .rsbEmptyMessage {
    font-style: normal !important;
    color: #7C7C7C !important;
    font-family: Lato !important;
    font-weight: 400 !important;
}

.RadSearchBox .rsbInput:disabled, .RadSearchBox input[type=text]:disabled {
    border-bottom: none !important;
    cursor: not-allowed;
    color: #A8A8A8 !important;
    background-color: transparent !important;
    background-color: #FAFAFA !important;
}

.RadRadioButton, .RadButton, .RadButton_BlackMetroTouch, .rbRadioButton, .rbRounded, .rbIconButton, .RadGrid_Bootstrap .rgExpand, .RadGrid_Bootstrap .rgCollapse,
.RadComboBox .rcbReadOnly .rcbActionButton, .RadComboBox .rcbReadOnly.rcbHovered .rcbActionButton, .RadComboBox .rcbReadOnly.rcbFocused .rcbActionButton, .RadComboBox .rcbReadOnly.rcbExpanded .rcbActionButton,
.RadGrid .t-button .rgActionButton .rgExpand, .RadGrid .t-button .rgActionButton .rgCollapse, .RadGrid .t-button, .RadGrid_Bootstrap .rgFilter {
    background-color: transparent !important;
    font-weight: normal !important;
}

/*Fix Organization ComboBox on Header (MasterPage)*/
.RadComboBox_Bootstrap tbody > tr.rcbReadOnly {
    background-color: transparent !important;
}

/*Fix AddNewRecordButton Command on RadGRid*/
.RadGrid .t-button-icontext .t-text {
    white-space: nowrap !important;
}

/*Fix misaligned PAgerButton  on Bottom RadGrid*/
.RadGrid_Bootstrap.chivas-grid .rgPagerCell .rgArrPart2 .rgPageLast,
.RadGrid_Bootstrap.chivas-grid .rgPagerCell .rgArrPart2 .rgPageNext,
.RadGrid_Bootstrap.chivas-grid .rgPagerCell .rgArrPart1 .rgPageFirst,
.RadGrid_Bootstrap.chivas-grid .rgPagerCell .rgArrPart1 .rgPagePrev {
    margin-right: 20px !important;
    border-right-width: 0 !important;
    border-left-width: 0 !important;
}

.RadGrid_Bootstrap.chivas-grid .rgPagerCell .rgArrPart2 .rgPageLast,
.RadGrid_Bootstrap.chivas-grid .rgPagerCell .rgArrPart2 .rgPageNext,
.RadGrid_Bootstrap.chivas-grid .rgPagerCell .rgArrPart1 .rgPageFirst,
.RadGrid_Bootstrap.chivas-grid .rgPagerCell .rgArrPart1 .rgPagePrev {
    margin-right: 0px !important;
}

.chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap tr > td .talent-combo td {
    background-color: white !important;
    text-align: left !important;
    padding: 0 5px !important;
}

    .chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap tr > td .talent-combo td input [type="text"]:read-only {
        background-color: white !important;
    }

.chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap tr > td .talent-combo table.rcbHovered {
    background-color: transparent !important;
}

.chivas-grid.RadGrid_Bootstrap .rgPagerCell div.rgWrap.rgInfoPart {
    padding-top: 8px !important;
    text-align: left !important;
}

.chivas-grid .rgPagerCell td::before {
    display: none;
}

textarea:focus {
    border: 1px solid var(--accent-color);
    color: #535353;
}

textarea:disabled {
    background-color: #FAFAFA;
    cursor: not-allowed;
    border: none;
    color: #A8A8A8;
}

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: transparent !important;
    background-image: none !important;
    color: #7C7C7C;
}

.tlRadio input {
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    border: 1px solid #26BDC1;
    transition: 0.2s all linear;
    outline: none;
    margin-right: 5px;
    position: relative;
    top: 4px;
}

    .tlRadio input:checked {
        border: 6px solid #6C9FAF;
    }

    .tlRadio input[type=radio]:disabled {
        cursor: not-allowed;
        background-color: #E9E9E9 !important;
        opacity: .7 !important;
        border: none !important;
    }

input[type=checkbox]:disabled {
    cursor: not-allowed;
    background-color: #E9E9E9 !important;
    opacity: .7 !important;
}

select, [id*="ddl"] {
    padding: 0 0;
    color: #7C7C7C;
    border-radius: 0 !important;
    border: none;
    border-bottom: 1px solid var(--primary-two-color);
    margin: 8px 0;
    /* reset, remove arrow */
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    /*arrow from image*/
    background-image: url(../Images/svg/icn_arrowdown-sec.svg) !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 5px) !important;
    background-size: 20px 20px !important;
}

    select option {
        background: white;
        border-color: var(--primary-two-color) !important;
        font-family: "Lato", Helvetica, Arial, sans-serif !important;
    }
    /*ie remove arrow*/

    select::-ms-expand {
        display: none;
    }

    select:focus {
        border-color: var(--accent-color);
        color: #535353;
        /*flip arrow vertically*/
        background-image: url(../Images/svg/icn_arrowup-sec.svg) !important;
    }

    select:disabled {
        border: none;
        border-bottom: 1px solid #B6CFD7;
        background-color: #FAFAFA;
        cursor: not-allowed;
        color: #A8A8A8;
    }

    select:-moz-focusring {
        color: transparent;
        text-shadow: 0 0 0 #000;
    }


#ddlOrganisations {
    color: #FAFAFA !important;
    background-color: transparent !important;
    padding: 0;
    background-image: url(../Images/svg/icn_arrowdown-prim.svg) !important;
}

    #ddlOrganisations:focus {
        color: #E7EFF2 !important;
        background-image: url(../Images/svg/icn_arrowup-prim.svg) !important;
    }

.floating-image {
    /* width: 50vh;
    height: 50vh;
    background-image: url(../images/png/bg_landing_illustration.png);
    background-size: cover;
    bottom: 0;
    right: 50px;
    z-index: 0;
    position: fixed;*/
}

/*branding*/

.divTabButtons {
    display: flex;
    width: 100%;
    border-radius: 0 !important;
    margin: 10px 0;
}

    .divTabButtons.column {
        text-align: center !important;
        width: 100%;
        display: block;
    }

    .divTabButtons .divTabButton {
        border: none !important;
        border-radius: 0 !important;
    }


.divTabButton .branding-image, .divTabButton .branding-image svg, .divTabButton .branding-image img {
    width: 60px;
    height: 60px;
    color: var(--accent-color);
    fill: currentColor !important;
}

.divTabButton .branding-text {
    font-family: Lato;
    font-size: 16px;
    color: #7c7c7c;
    font-weight: 400;
    text-decoration: none solid rgb(124, 124, 124);
    line-height: 18px;
    text-align: center;
}

.divTabButton:hover .branding-image svg, .divTabButton:hover .branding-text {
    color: #6c9faf;
}

.divTabButton.divTabButton-selected {
    border-bottom: 1px solid #6c9faf !important;
}

    .divTabButton.divTabButton-selected .branding-image svg, .divTabButton.divTabButton-selected .branding-text {
        color: #6c9faf;
        font-weight: 700 !important;
    }

.branding-config {
    width: 100%;
    margin-top: 20px;
    text-align: center;
}

    .branding-config div.rcpIcon {
        text-align: left;
    }

    .branding-config.content {
        display: table;
    }

    .branding-config.landing, .branding-config.report {
        display: flex;
    }


        .branding-config.report .branding-config-column .branding-config-control {
            width: 90% !important;
        }

.branding-config-colors {
    display: flex;
}

.branding-config-column {
    width: 34%;
}

.file-drop-area {
    border: 2px solid var(--accent-color);
    text-align: center !important;
    vertical-align: middle;
    display: inline-table;
    font-family: Lato;
    font-size: 18px;
    color: #a8a8a8;
    text-decoration: none solid rgb(168, 168, 168);
    border-radius: 2px !important;
    border: 1px dashed #bebebe;
    height: 150px;
    width: 100%;
}

    .file-drop-area.validation-error {
        border: 2px solid red !important;
    }

span.validation-error {
    color: red;
    font-weight: bold;
    font-size: 14px;
}

.upload-preview {
    max-height: 40px;
}

.img-upload-preview {
    max-height: 40px !important;
    width: auto !important;
    margin: 10px;
    min-width: 40px;
    border: none !important;
    max-width: 280px;
}

.file-drop-area-content {
    display: table-cell;
    vertical-align: middle;
    position: absolute;
    width: 300px;
    padding-top: 30px;
}

.file-drop-overlay {
    width: 300px;
    height: 150px;
    border: 1px solid #418e47;
    background-color: #fafafa;
    background-size: cover;
    position: absolute;
    margin-left: -1px;
    margin-top: -1px;
}

    .file-drop-overlay.overlay-error {
        border: 1px solid #f45849 !important;
    }



.file-drop-filename {
    height: 18px;
    font-family: Lato;
    font-size: 16px;
    color: #7c7c7c;
    font-weight: 400;
    text-decoration: none solid rgb(124, 124, 124);
    line-height: 18px;
    padding: 20px !important;
}

.file-drop-message {
    height: 22px;
    font-family: Lato;
    font-size: 18px;
    color: #418e47;
    text-decoration: none solid rgb(65, 142, 71);
    line-height: 22px;
    text-align: center;
    display: block;
}

    .file-drop-message.message-error {
        color: #f45849 !important;
        display: inline-block;
        width: 100%;
    }

.file-drop-area .RadUpload .ruFileWrap.ruStyled {
    display: inline-block;
    overflow: hidden;
    padding-bottom: .5px;
    text-overflow: ellipsis;
    max-width: 200px;
}

.file-drop-area .RadUpload .ruDropZone {
    display: none !important;
    height: 1px !important;
    width: 1px !important;
    visibility: hidden !important;
}

.file-drop-area-wrapper, .color-wrapper {
    display: inline-block;
    width: 300px !important;
    vertical-align: top;
    margin: 14px;
}

.allowed-attachments, .small-font {
    font-size: 14px !important;
}

.XXL-font {
    font-size: 72px !important;
    font-weight: 300;
}

.img-circle {
    border-radius: 50%;
}

.allowed-attachments-list {
    font-size: 14px;
    color: var(--accent-color);
}


.right-column {
    padding-left: 25px !important;
}

.left-column {
    padding-right: 25px !important;
}

.rcpInputsWrapper label {
    margin: 0 !important;
    padding: 0 !important;
}

.RadColorPicker.RadColorPicker_Bootstrap > .rcpIcon > a {
    border: none;
    border-radius: 2px;
    background-color: #e9e9e9;
}

.RadColorPicker.RadColorPicker_Bootstrap {
    margin-top: 10px;
}

.color-row {
    margin-bottom: 15px !important;
}

    .color-row.flex {
        display: flex !important;
    }

.color-column {
    width: 30% !important;
    position: relative !important;
}

.color-gradient-text {
    position: absolute;
    bottom: 10px;
}

.branding-container .fixed-content {
    display: flex !important;
}


.preview-area.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: block !important;
}

.preview-area.divTitle {
    text-align: center;
    width: 100%;
}

.preview-area.divButton {
    width: 50%;
    margin-left: 40px;
    margin-right: 40px;
}

.preview-area.floating-button {
    position: absolute;
    bottom: 6%;
    left: 13%;
    z-index: 2;
    padding: 0;
    margin: 0;
}

.preview-area.divPreview {
    min-width: 320px;
    height: 180px;
    background-color: lightgray;
    text-align: center;
}

.preview-area.moduleNavPreview {
    position: absolute;
    margin: 0;
    padding: 0;
    top: 10%;
    left: 10%;
    height: 10%;
    width: 90%;
    z-index: 6;
}



    .preview-area.moduleNavPreview .preview-area.rmItem.rmTemplatemoduleItem .rmText {
        font-size: 8px;
    }

    .preview-area.moduleNavPreview .nav_bar_icn {
        width: 12px;
        height: 12px;
        padding: 0;
        vertical-align: middle;
    }


    .preview-area.moduleNavPreview .btnModuleNav {
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: unset !important;
        font-size: .6em !important;
        margin: 0 10px;
        max-width: 77px;
    }

.img-complete-overlay {
    position: absolute;
    top: 5px;
    right: 10px;
}

.img-complete-overlay {
    min-width: 20px;
    max-width: 20px;
}


.preview-area.moduleNavPreview .rmTemplatemoduleItem, .preview-area.moduleNavPreview .rmTemplatemoduleItem .rmText, .preview-area.moduleNavPreview .rmTemplatemoduleItem .btnModuleNav, .preview-area.moduleNavPreview ul {
    height: 100% !important;
    margin: 0;
    padding: 0 !important;
}

    .preview-area.moduleNavPreview li, .preview-area.moduleNavPreview .rmTemplatemoduleItem, .preview-area.moduleNavPreview .rmTemplatemoduleItem .rmText, .preview-area.moduleNavPreview .rmTemplatemoduleItem .btnModuleNav {
        display: table-cell;
        line-height: 100% !important;
    }

        .preview-area.moduleNavPreview .rmTemplatemoduleItem .btnModuleNav .nav_bar_text {
            font-size: 0.6em !important;
        }

.preview-area.navigationTabBar {
    height: 10%;
    margin: 0;
    position: relative;
    z-index: 0 !important;
    top: 0;
}

.preview-area.logo {
    height: 8%;
    margin: 1% 10%;
    position: absolute;
    width: 20% !important;
    top: 0;
    z-index: 10;
}

.preview-area.leftNav-solid {
    height: 85%;
    width: 10%;
    top: 10%;
    position: absolute;
    z-index: 4;
}

.preview-area.menu-image {
    max-width: 20px !important;
    height: auto;
    color: #fafafa;
}

.preview-area.footer {
    width: 100%;
    height: 5%;
    position: absolute;
    bottom: 0;
    z-index: 3;
}

.preview-area.rmSlide.rmNoMargin {
    position: absolute;
    left: 80%;
    width: 85px;
}


.preview-area.rmVertical.rmGroup.rmLevel1 {
    list-style-type: none;
    margin-left: 5px;
    margin-top: -31px;
    font-size: 0.8em;
    width: 100%;
}

.preview-area.landingpage-bg {
    position: absolute;
    width: 90%;
    height: 85%;
    left: 10%;
    top: 10%;
    z-index: 1;
    background-color: transparent !important;
    background-size: cover !important;
}

div.icon.imgToSVG {
    display: contents;
}

.preview-area.floating-image {
    height: 40%;
    position: absolute;
    right: 0;
    bottom: 5%;
    width: 40%;
    text-align: right;
    background-position-x: right !important;
    z-index: 7;
    background-size: contain !important;
}

.preview-area.image-highlight {
    border: solid 1px var(--accent-color) !important;
    z-index: 400 !important;
    background-color: rgba(255,255,255,.85);
}

.preview-area.highlight-image-veil {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: black;
    opacity: 0.6;
    display: none;
    z-index: 35;
}

    .preview-area.highlight-image-veil:after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        background-color: black;
        opacity: 0.6;
        z-index: 34;
        left: 0;
    }

.branding-container {
    border: 1px solid #bebebe;
    border-radius: 2px;
    margin: 20px;
    padding: 20px;
}

.preview-area.divColor {
    width: 40%;
    text-align: left;
}

.preview-area.divColorLast {
    width: 20%;
    text-align: left;
}

.preview-area.report-header {
    width: 100%;
    max-height: 60px;
    background-color: transparent;
    text-align: center;
    background-position-x: center;
    margin-top: 15px;
}

.preview-area #pdfWrapper {
    text-align: left;
    background: transparent !important;
    margin: 10px 30px !important;
}

.preview-area.report-wrapper {
    width: 100%;
    height: 100%;
    border: 1px;
    border-style: solid;
    border-color: #bebebe;
    border-radius: 2px;
    background-image: linear-gradient(180deg, #fafafa 82%, #ffffff 100%);
    background-position: center center;
    background-size: cover;
    display: grid !important;
}

.align-right {
    text-align: right !important;
}

.align-left {
    text-align: left !important;
}

.preview-area.preview-h1, .preview-area.preview-h2 {
    margin-left: 20px !important;
    text-align: left;
}

.rwMaximizedWindow, .rwMinimizedWindow, .RadWindow {
    z-index: 1000000 !important;
}

.ui-datepicker .ui-datepicker-title select {
    font-size: 1em !important;
    margin: 1px 0 !important;
}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    margin: 1px 0;
    color: rgb(0, 0, 0) !important;
    font-family: "Roboto" !important;
    font-size: 17.6px !important;
    font-weight: 400 !important;
    line-height: 21.25px !important;
    text-align: start !important;
    width: 97.0667px !important;
    padding: 0 0 0 0 !important;
    box-sizing: !important;
    border: 1px solid darkgray !important;
    background-color: white !important;
    height: 23px !important;
}

/*Apply styles for Manager Person's searchbox*/

#ctl00_contentBody_moduleNavigation_drpTeamMembers > table > tbody > tr > .rcbArrowCell a {
    background-image: url('../Images/svg/icn_search-active.svg') !important;
    -moz-transform: scaleY(1) !important;
    -o-transform: scaleY(1) !important;
    -webkit-transform: scaleY(1) !important;
    transform: scaleY(1) !important;
}

#ctl00_contentBody_moduleNavigation_drpTeamMembers > table > tbody > tr > .rcbInputCell input {
    text-align: left !important;
}

#ctl00_contentBody_moduleNavigation_drpTeamMembers > table > tbody > tr > .rcbInputCell .rcbEmptyMessage {
    font-style: normal;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 14px;
    text-decoration-color: #a8a8a8;
    color: #a8a8a8;
}



/****************************************from my role page****************************/

.t-container.t-container-fluid {
    margin-top: 0;
    margin-right: -5px !important;
}

.RadWindow_Sunset .rwCorner .rwTopLeft,
.RadWindow_Sunset .rwTitlebar,
.RadWindow_Sunset .rwCorner .rwTopRight,
.RadWindow_Sunset .rwIcon,
.RadWindow_Sunset table .rwTopLeft,
.RadWindow_Sunset table .rwTopRight,
.RadWindow_Sunset table .rwFooterLeft,
.RadWindow_Sunset table .rwFooterRight,
.RadWindow_Sunset table .rwFooterCenter,
.RadWindow_Sunset table .rwBodyLeft,
.RadWindow_Sunset table .rwBodyRight,
.RadWindow_Sunset table .rwTitlebar,
.RadWindow_Sunset table .rwTopResize,
.RadWindow_Sunset table .rwStatusbar,
.RadWindow_Sunset table .rwStatusbar .rwLoading {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.RadWindow_Sunset table {
    border: 1px solid #bebebe !important;
    box-shadow: 0px 1px 15px rgba(0,0,0,.2);
}

RadWindow_Sunset .rwWindowContent.rwExternalContent {
    background-color: red !important;
}

.rwLoading {
    background: url('../images/wait.gif') no-repeat center !important;
    z-index: 10000000;
}

.RadListView {
    overflow: auto;
    height: 400px;
}

.RadComboBox_Sunset {
    vertical-align: middle !important;
    background-color: transparent !important;
    border: none !important;
    background-image: none !important;
}

    .RadComboBox_Sunset .rcbReadOnly {
        vertical-align: middle !important;
        background-color: transparent !important;
        border: none !important;
        background-image: none !important;
    }

.RadComboBoxDropDown_Sunset {
    border: none !important;
}

    .RadComboBoxDropDown_Sunset .rcbHovered {
        color: white !important;
    }

.RadComboBox_Sunset table {
    height: 45px !important;
    display: inherit !important;
}

.RadComboBox_Sunset .rcbLabel {
    display: none !important;
}

.RadComboBox_Sunset .rcbInputCell, .filter-button .RadComboBox_Bootstrap .filter-text, .secondary-bar-text {
    border: none !important;
    color: #7c7c7c !important;
    background-color: transparent !important;
    border-radius: 2px 0 0 2px !important;
    box-shadow: none !important;
    font-size: 14px !important;
}

.RadComboBox_Sunset .rcbArrowCell.rcbArrowCellRight {
    border: none;
    background-color: transparent;
    box-shadow: none !important;
}

.RadComboBox_Sunset .rcbHovered .rcbArrowCell, .RadComboBox_Sunset .rcbFocused .rcbArrowCell,
.RadComboBox_Sunset .rcbFocused .filter-text {
    border: none;
    box-shadow: none !important;
    background-color: transparent !important;
}

.RadDataPager_Sunset {
    padding-left: 0px !important;
    /*padding-top: 0px !important;*/
    padding-right: 0px !important;
}

    .RadDataPager_Sunset .rdpWrap button {
        background-color: transparent !important;
        background-image: none !important;
    }

    .RadDataPager_Sunset .rdpWrapRight button {
        background-color: transparent !important;
        background-image: none !important;
    }

    .RadDataPager_Sunset .rdpWrap button {
        background-color: transparent !important;
        background-image: none !important;
    }

    .RadDataPager_Sunset .rdpActionButton:hover {
        color: #26BDC1 !important;
        background-color: transparent !important;
    }

    .RadDataPager_Sunset .rdpNumPart a.rdpCurrentPage {
        border-color: #26BDC1 !important;
        color: #26BDC1 !important;
        border-radius: 2px !important;
    }

    .RadDataPager_Sunset .rdpNumPart a:hover {
        border: none !important;
        background-color: transparent !important;
        color: #26BDC1 !important;
        border-radius: 2px !important;
        background-image: none !important;
    }

.p-i-arrow-60-down:before {
    font: 16px/1 "WebComponentsIcons" !important;
}

.p-i-arrow-60-up:before {
    font: 16px/1 "WebComponentsIcons" !important;
}



/*role summary tile*/

.RoleTileContainer {
    width: 260px;
    padding-left: 0px;
    padding-bottom: 0px;
    display: inline-flex;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

.CharacteristicTilesContainer {
    display: inline-flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding-top: 20px;
}

    .CharacteristicTilesContainer .RoleTileContainer.tg-royco-tile {
        padding-right: 0;
        max-height: 260px;
        overflow: visible;
        margin-left: 20px;
        margin-bottom: 35px;
        margin-right: 20px;
        margin-top: 5px;
    }

        .CharacteristicTilesContainer .RoleTileContainer.tg-royco-tile:hover {
            z-index: 100 !important;
        }

    .CharacteristicTilesContainer .tg-royco-tile .tg-royco-tile-top {
        height: 225px;
    }



.RoleTileContainer-lg {
    display: inline-table;
    vertical-align: top;
}

.mainRoleBox {
    width: 220px;
    padding: 20px;
}

    .mainRoleBox.tg-royco-tile-top {
        min-height: 230px;
    }

.RoleTileContainer.tg-royco-tile {
    padding: 0;
    display: inline-block;
}

.RoleBoxHeader {
    width: 100%;
    /*float:right;*/
    text-align: right;
    padding-bottom: 10px;
    display: block;
}

.RoleBoxHeader-relative {
    position: relative;
}

.TileTextFitting {
    overflow: hidden !important;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.RoleApplyCell {
    width: 45%;
}

.FavoriteRoleCell {
    width: 55%;
}

.RoleBoxRoleName {
    color: #535353;
    display: block !important;
    padding-bottom: 0 !important;
    height: 55px;
}

.CharacteristicTilesContainer .RoleBoxRoleName {
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 24px;
}

    .CharacteristicTilesContainer .RoleBoxRoleName h6 {
        height: 20px;
    }

.RoleBoxMatchSummary, RoleBoxSlider {
    display: flex;
    width: 100%;
    border-top: solid;
    border-top-width: 1px;
    border-color: #d8d9d9;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    color: #7C7C7C;
}

.mainReviewBox {
    width: 220px;
    height: 260px;
    padding: 20px;
    justify-content: center;
    align-items: center;
    border: solid;
    border-width: 1px;
    border-color: #BEBEBE;
    background-color: #FFF;
}

.ReviewBoxSummary {
    display: block !important;
    width: 100%;
    border-top: solid;
    border-top-width: 1px;
    border-color: #b3b3b3;
    align-items: center;
    text-align: justify;
    padding-top: 10px;
    color: #7C7C7C;
}

.RoleBoxMovement {
    width: 50%;
    text-align: left;
    color: #7C7C7C;
}

.RoleBoxMatchPercent {
    width: 50%;
    text-align: right;
}

/*.mainRoleBoxHovered {
    width: 220px;
    height: auto;
    -webkit-box-shadow: 3px 2px 16px -3px #000000;
    -webkit-box-shadow: 3px 2px 16px -3px rgba(0, 0, 0, 0.52);
    -moz-box-shadow: 3px 2px 16px -3px #000000;
    -moz-box-shadow: 3px 2px 16px -3px rgba(0, 0, 0, 0.52);
    box-shadow: 3px 2px 16px -3px #000000;
    box-shadow: 3px 2px 16px -3px rgba(0, 0, 0, 0.52);
    padding: 20px;
    justify-content: center;
    align-items: center;
    border: solid;
    border-width: 1px;
    border-color: #BEBEBE;
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}

.RoleBoxHoveredMatchSummary {
    display: flex;
    width: 100%;
    height: 25%;
    border-top: solid;
    border-top-width: 1px;
    border-color: #b3b3b3;
    justify-content: center;
    align-items: center;
}

.mainRoleBox:hover .mainRoleBoxHovered {
    display: block;
    background: #FAFAFA;
}*/

.mainRoleBox.tg-royco-tile-top:hover {
    overflow: visible;
}

.padding_t_md {
    padding-top: 40px;
}

.padding_b_md {
    padding-bottom: 40px;
}

.RoleBoxDescription span {
    padding: .25em 0 !important;
}

.moveClass {
    fill: #7C7C7C;
}

.iMovementFill {
    background: white;
    border-radius: 50%;
}

.setLeft {
    float: left;
}

.setRight {
    float: right;
}


.roleBoxBody {
    cursor: pointer;
}

.MainTarget {
    padding: 16px 40px 30px 40px;
    margin: 0;
}

    .MainTarget .RadTabStripTop_Bootstrap .rtsLevel1 .rtsLI {
        margin-bottom: -7px;
    }

.tileBox {
    width: 220px;
    height: 180px;
    padding: 20px;
    justify-content: center;
    align-items: center;
    border: solid;
    border-width: 1px;
    border-color: #BEBEBE;
    background-color: #FFF;
    overflow: hidden;
}

    .tileBox.tileBox-lg {
        height: 235px;
    }

.CharacteristicTilesForAdmin {
    justify-content: start !important;
}

    .CharacteristicTilesForAdmin .tileBox-lg, .CharacteristicTilesForAdmin .tileBox-lg:hover {
        height: 300px;
    }

    .CharacteristicTilesForAdmin .tileBox.tileBox-fixed.tileBox-lg, CharacteristicTilesForAdmin .tileBox.tileBox-fixed.tileBox-lg {
        border: none;
        background: transparent;
        padding: 0;
        height: 235px;
    }

    .CharacteristicTilesForAdmin .tileBox.tileBox-fixed.tileBox-lg {
        height: 100% !important;
    }

.tileBox-lg:hover:not(.tileBox-fixed) {
    top: -76px;
    min-height: 235px;
}

@-moz-document url-prefix() {
    .tileBox-lg:hover {
        top: -96px;
    }
}


.tileRow .tileDescription {
    margin-top: -3px;
    padding-left: 5px;
}

.tileBox:hover .RoleBoxDescription {
    display: block !important;
    height: unset;
}

.tileBox-lg .RoleBoxRoleName .tileDescription {
    margin: 10px 0;
}

.tileBox-lg .RoleBoxDescription {
    height: 123px;
    overflow: hidden;
    margin-top: 10px;
    overflow: hidden;
}

    .tileBox-lg .RoleBoxDescription h4 {
        padding-bottom: 5px !important;
    }


.tile-btn-comment {
    height: 34px;
    line-height: 34px;
    text-align: center;
    position: relative;
    cursor: pointer;
}

    .tile-btn-comment .btn-arrow {
        color: #2b3e55;
        width: 24px;
        height: 24px;
        position: absolute;
        right: 20px;
        top: 5px;
        transition: all 0.3s;
    }

    .tile-btn-comment.expanded .btn-arrow {
        transform: rotate(180deg);
        transition: all 0.3s;
    }

.tile-comment-area, .tile-content {
    transition: all 0.3s;
}

.tile-comment-area {
    height: 0px;
    padding: 15px;
    transition: all 0.3s;
    background: white;
    position: relative;
}

    .tile-comment-area.tile-comment-shown {
        height: 320px;
        overflow: hidden;
        transition: all 0.3s;
        border: 1px solid #ddd;
        z-index: 100;
        box-shadow: 0px 10px 10px rgba(0,0,0,.2);
    }

    .tile-comment-area.tile-comment-hidden,
    .tg-royco-tile .tg-royco-tile-top.tile-content.tile-comment-shown {
        height: 0;
        overflow: hidden;
        padding: 0 !important;
        transition: all 0.3s;
    }

.filter-button-list.two-buttons {
    display: flex !important;
    width: 100% !important;
}

.tile-btn-comment .filter-button-list.two-buttons button {
    background: white;
}

.filter-button-list button {
    width: 33%;
    border: 1px var(--accent-color) solid;
    height: 25px;
    background: white !important;
}

.filter-control-content .filter-button-list button {
    border-radius: 40px;
}

.tile-btn-comment.disagreed {
    background-color: #f45849;
}

    .tile-btn-comment.disagreed *, .tile-btn-comment.background-color-accent * {
        color: white !important;
    }

    .tile-btn-comment.disagreed color-accent, .tile-btn-comment.background-color-accent color-accent {
        color: white !important;
    }

.tile-btn-comment.color-orange div, .tile-btn-comment.color-orange svg {
    color: inherit !important;
}

.btn-role-number {
    width: 75% !important;
    border-radius: 0 !important;
    border-bottom-left-radius: 0px;
    height: 100% !important;
    border-bottom-left-radius: 4px !important;
}

.expanded .btn-role-number {
    border-bottom-left-radius: 0px !important;
}

.agree-disagree-visibility {
    display: none;
}

.borderSeparatorLine {
    border-top: solid;
    border-top-width: 1px;
    border-color: #b3b3b3;
}

.RadWindow.Window_Popup .rwWindowContent {
    margin: 0;
    padding: 0;
    border: 1px solid #bebebe;
    border-radius: 2px;
    background-color: #fafafa;
    background-size: cover;
    font-family: "Lato", Helvetica, Arial, sans-serif !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16) !important;
}



/********************new tile styles******************royco*/

/*tiles checkbox*/

.Tile-checkbox {
    position: absolute !important;
    left: -16px;
    top: -16px;
    width: 32px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 60;
}

    .Tile-checkbox:hover {
        filter: brightness(105%) drop-shadow(0px 1px 5px rgba(0,0,0,.4));
    }

    .Tile-checkbox .rbIcon.p-icon {
        width: 30px;
        height: 30px;
        box-shadow: 1px 1px 3px rgba(0,0,0,.2);
        text-align: center;
        border-radius: 50%;
        position: relative;
        background-color: white;
        color: #BEBEBE !important;
    }

    .Tile-checkbox.RadButton:hover .rbIcon::before {
        color: #c7c7c7 !important;
    }

    .Tile-checkbox .rbIcon.p-icon.p-i-checkbox-checked {
        background-color: var(--accent-color);
    }

    .Tile-checkbox.RadButton .rbIcon::before {
        z-index: 5;
        position: relative;
        margin: calc(50% - 8px);
        vertical-align: middle;
    }

    .Tile-checkbox.RadButton .rbIcon::after {
        content: " ";
        background-color: white;
        width: 10px;
        height: 10px;
        position: absolute;
        left: 10px;
        top: 9px;
        z-index: 1;
    }

    .Tile-checkbox .rbIcon,
    .Tile-checkbox.RadButton .rbIcon::before {
        color: #bebebe !important;
    }

        .Tile-checkbox .rbIcon.p-icon.p-i-radio-checked::after, .Tile-checkbox .rbIcon.p-icon.p-i-radio-checked::before {
            border-radius: 50%;
            height: 11px;
            color: #7c7c7c;
        }

.role-tile-container {
    margin-left: 30px;
    margin-bottom: 30px;
    max-height: 230px;
    overflow: hidden;
    box-sizing: border-box;
    overflow: visible;
    position: relative;
    transition: all .3s;
}

    .role-tile-container:hover {
        z-index: 70;
    }

.tg-royco-tile {
    border: 1px solid #ddd;
    transition: all .3s;
    border-radius: 4px;
    position: relative;
    /* box-shadow: 0px 1px 1px rgba(0,0,0,0.12);
    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.12);*/
}


    .tg-royco-tile .tg-royco-tile-top {
        background-color: #f4f5f6 !important;
        text-align: left;
        width: 100%;
        border-radius: 0 !important;
        color: #7c7c7c;
        padding: 15px !important;
        border: none !important;
        transition: all .3s;
        box-sizing: border-box;
        border-top-left-radius: 4px !important;
        border-top-right-radius: 4px !important;
    }



    .tg-royco-tile .tg-royco-tile-bottom {
        background-color: #FFF;
        border-top: 1px solid #d9d9d9;
        width: 100%;
        box-sizing: border-box;
    }

    .RadTextTile.tg-royco-tile:hover,
    .tg-royco-tile:hover .tg-royco-tile-top, .tg-royco-tile .tg-royco-tile-top.rbHovered {
        background-color: #e9f1f3 !important;
        transition: all .3s;
    }

    .RadTextTile.tg-royco-tile.rtileHovered:hover,
    .tg-royco-tile:hover {
        border: 1px solid #6c9faf !important;
        box-shadow: 0 1px 15px rgba(0,0,0,0.2) !important;
        transition: all .3s;
        z-index: 50;
    }

    .tg-royco-tile .RoleBoxDescription {
        max-height: 0px;
        transition: all 0.3s !important;
        margin-top: 20px;
        opacity: 0;
    }

    .tg-royco-tile:hover .RoleBoxDescription {
        max-height: 300px;
        transition: all 0.3s;
        opacity: 1;
    }

.RadTextTile.tg-royco-tile {
    background-color: #f4f5f6 !important;
    color: #7c7c7c;
}

html {
    overflow: hidden;
}

.cardBody {
    width: 100%;
}

.closeButtonImg {
    background-image: url('../Images/png/icn_close-active.png');
    width: 24px;
    height: 24px;
}

    .closeButtonImg:hover {
        cursor: pointer;
    }

.cardMainContent {
    width: 100%;
    height: 100%;
}


.DetailsOptionsColumn > span {
    height: 25% !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    box-sizing: border-box;
    border-top: 1px solid #ffffff60 !important;
    background: #7c7c7c;
}

    .DetailsOptionsColumn > span *, .DetailsOptionsColumn > span > input[type="submit"] {
        background-color: transparent !important;
        color: white !important;
        font-size: 20px;
        max-width: 100%;
    }

    .DetailsOptionsColumn > span:hover > input[type="submit"] {
        text-decoration-style: none !important;
    }

    .DetailsOptionsColumn > span:hover {
        filter: brightness(110%);
    }


.rtsTxt {
    color: #7c7c7c;
    font-size: 14px;
    text-decoration: none solid rgb(124, 124, 124);
    line-height: 16px;
    letter-spacing: 1px;
}

.rtsSelected {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid var(--primary-two-color) !important;
    background-color: transparent !important;
}

    .rtsSelected .rtsTxt, .rtsSelected .rtsOut .rtsIn * {
        color: var(--primary-two-color) !important;
        font-weight: 700 !important;
        text-decoration: none solid var(--primary-two-color);
    }

.cardTitleControls {
    height: 40px;
    width: 100%;
    padding: 0;
    margin: 15px 0 0 0;
}

.divMatchContainer {
    display: flex;
    width: 20%;
    height: 60px;
    justify-content: center;
    float: right;
}

.applyNowDisabledStyle:disabled {
    opacity: 0.5;
    filter: saturate(70%);
}

-role-gap-main-content .roleCardContent {
    height: 100%;
    width: 100%;
}

.role-gap-main-content {
    background: white;
    height: 100%;
    padding: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    overflow-y: auto;
    box-sizing: border-box;
}

.rwLoading {
    background: url('../images/wait.gif') no-repeat center !important;
}

.linkButtonLikeTab {
    width: 100% !important;
    color: var(--accent-color);
    text-decoration: underline !important;
    cursor: pointer !important;
}

.linkButtonLikeTabSelected {
    text-decoration: none !important;
    font-weight: 700 !important;
}

.linkButtonLikeTab:hover {
    color: #6c9faf !important;
    text-decoration: none !important;
}

.RoleBoxMovement {
    width: 50%;
    text-align: left;
    color: #7C7C7C;
    padding-top: 3px;
}

.cardBody .rtsLevel.rtsLevel1, .cardBody .rtsLevel.rtsLevel1 ul {
    display: flex;
    width: 100%;
    text-align: center;
    align-content: center;
    justify-content: center;
}

.cardBody .cardBody .rtsLevel.rtsLevel1 ul > li, li.rtsLI {
    width: 25% !important;
}

.rtsIn > h4, .rtsIn > h4 span {
    padding: 0 !important;
}

.hidden {
    display: none;
}

.display-table {
    display: table !important;
}

.display-cell {
    display: table-cell !important;
}

.display-none {
    display: none !important;
}

.display-block {
    display: block !important;
}

.DetailsContainer {
    display: inline-flex;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    max-height: 100%;
}

.separator-line {
    border-top: solid 1px #bebebe;
    height: 1px;
    width: 100%;
}

.fullwidthtext {
    width: 100%;
    display: block;
    margin: 5px 0;
}

.FullWidth {
    width: 100% !important;
}

.wrap-anywhere {
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;
    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    /*this works with firefox  but not with chrome*/
    word-wrap: anywhere;
    overflow-wrap: anywhere;
}

.display-flex {
    display: flex;
}

    .display-flex.display-flex-center {
        align-items: center;
        justify-content: center;
    }

.display-inline-flex {
    display: inline-flex !important;
}

.display-inline-block {
    display: inline-block !important;
}

.display-grid {
    display: grid;
}

.btn-image {
    border: none !important;
    border-radius: 2px !important;
    height: 24px !important;
    width: 24px !important;
}

    .btn-image.btn-image-xs {
        height: 18px !important;
        width: 18px !important;
    }

    .btn-image.btn-image-md {
        height: 24px !important;
        width: 24px !important;
    }

    .btn-image.btn-image-lg {
        height: 40px !important;
        width: 40px !important;
    }

    .btn-image.btn-image-nobg, .btn-image.btn-image-nobg:hover, .btn-image.btn-image-nobg.imgToSVG, .btn-image.btn-image-nobg.imgToSVG:hover {
        background-color: transparent !important;
        padding: 0 !important;
    }

        .btn-image.btn-image-nobg.imgToSVG:hover {
            opacity: 0.6;
        }

.edit-button, .edit-button-input > input {
    width: 24px;
    height: 24px;
    -webkit-mask: url(../Images/svg/icn_edit-active_prim.svg) no-repeat 50% 50% !important;
    mask: url(../Images/svg/icn_edit-active_prim.svg) no-repeat 50% 50% !important;
    cursor: pointer;
}

.edit-button-input > input {
    width: 32px;
    height: 32px;
    color: inherit;
    background-color: currentColor;
}


.clone-button, .clone-button-input > input {
    width: 24px;
    height: 24px;
    -webkit-mask: url(../Images/svg/icn_clone.svg) no-repeat 50% 50% !important;
    mask: url(../Images/svg/icn_clone.svg) no-repeat 50% 50% !important;
    cursor: pointer;
}

.clone-button-input > input {
    width: 32px;
    height: 32px;
    color: inherit;
    background-color: currentColor;
}

.delete-button, input[type="submit"].delete-button {
    width: 24px;
    height: 24px;
    -webkit-mask: url(../Images/svg/icn_delete-active.svg) no-repeat 50% 50% !important;
    mask: url(../Images/svg/icn_delete-active.svg) no-repeat 50% 50% !important;
    cursor: pointer;
    background-color: var(--color-danger) !important;
}

.mail-button {
    width: 24px;
    height: 24px;
    -webkit-mask: url(../Images/svg/icn_mail-active.svg) no-repeat 50% 50% !important;
    mask: url(../Images/svg/icn_mail-active.svg) no-repeat 50% 50% !important;
    cursor: pointer;
}

.target-button {
    width: 24px;
    height: 24px;
    -webkit-mask: url(../Images/svg/icn_nextjob.svg) no-repeat 50% 50% !important;
    mask: url(../Images/svg/icn_nextjob.svg) no-repeat 50% 50% !important;
    cursor: pointer;
}

.hover-target-button:hover {
    width: 24px;
    height: 24px;
    -webkit-mask: url(../Images/svg/icn_nextjobtarget.svg) no-repeat 50% 50% !important;
    mask: url(../Images/svg/icn_nextjobtarget.svg) no-repeat 50% 50% !important;
    cursor: pointer;
}

.RoleBoxHeader .target-button {
    position: absolute;
    left: 25px;
}


/*//////////////////loading animation///////////////*/
.progress {
    height: 40px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -0px 0 0 -150px;
}

.progress-gif {
    display: none;
}

.progress span {
    position: relative;
    transition: all 500ms ease;
    box-shadow: 1px 2px 3px #000;
    height: 25px;
    width: 25px;
    margin-right: 15px;
    display: inline-block;
    border-radius: 2px;
    -webkit-animation: wave 1.6s ease infinite;
    -moz-animation: wave 1.6s ease infinite;
    -o-animation: wave 1.6s ease infinite;
    -ms-animation: wave 1.6s ease infinite;
    animation: wave 1.6s ease infinite;
    opacity: 0.5;
    transform: scale(0.5, 0.5);
    will-change: transform, opacity;
}

    .progress span:nth-child(1) {
        animation-delay: 0;
    }

    .progress span:nth-child(2) {
        animation-delay: 200ms;
    }

    .progress span:nth-child(3) {
        animation-delay: 400ms;
    }

    .progress span:nth-child(4) {
        animation-delay: 600ms;
    }

    .progress span:nth-child(5) {
        animation-delay: 800ms;
    }

    .progress span:nth-child(6) {
        animation-delay: 1000ms;
    }

    .progress span:nth-child(7) {
        animation-delay: 1200ms;
    }

    .progress span:nth-child(8) {
        animation-delay: 1400ms;
    }
/*calendar*/

.div-info {
    position: relative;
}

    .div-info .div-info-tooltip {
        background-color: white;
        border: #bebebe 1px solid;
        padding: 20px;
        width: 350px;
        display: none;
        position: absolute;
    }

        .div-info .div-info-tooltip.div-info-tooltip-right {
            right: 20px;
            top: 65px;
        }

        .div-info .div-info-tooltip.div-info-tooltip-left {
            left: 20px;
            top: 65px;
        }

    .div-info span:hover + .div-info-tooltip {
        display: block;
    }


.imgFeedback, .imgFeedback-NA {
    width: 140px;
    height: 24px;
    background-repeat: no-repeat;
    background-position-x: left;
    -ms-background-position-x: left;
    position: absolute;
}

    .imgFeedback.imgFeedback-grid {
        width: 80px;
        background-position-x: center;
    }

.img-isMentor {
    background-image: url(../Images/svg/icn-mentor.svg);
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
}

.img-comment {
    background-image: url(../Images/svg/icn_feedback-message.svg);
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
}

.img-arrow-right {
    background-image: url(../Images/svg/icn-arrow_right.svg);
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
}

.img-arrow-right-up {
    transform: rotate(-45deg);
}

.img-equals {
    background-color: white !important;
    background-color: #686868 !important;
    -webkit-mask: url(../Images/svg/icn_Equals.svg) no-repeat 50% 50% !important;
    mask: url(../Images/svg/icn_Equals.svg) no-repeat 50% 50% !important;
    width: 18px;
    height: 17px;
    fill: #bebebe;
    color: #bebebe;
    margin: 0px 4px;
}

.img-arrow-right-down {
    transform: rotate(45deg);
}

.imgFeedback-Pending {
    background-image: url(../Images/svg/icn_feedback_pending.svg);
}
.imgFeedback-Submitted {
    background-image: url(../Images/svg/icn_feedback-submitted.svg);
}
.imgFeedback-Rejected {
    background-image: url(../Images/svg/icn_feedback-disagree.svg);
}
.imgFeedback-Letstalk {
    background-image: url(../Images/svg/icn_feedback-letstalk.svg);
}
.imgFeedback-Updated {
    background-image: url(../Images/svg/icn_feedback-updated.svg);
}

.imgFeedback-Verified {
    background-image: url(../Images/svg/icn_feedback-agree.svg);
}

.imgFeedback-notSaved {
    background-image: url(../Images/svg/icn_feedback-notsaved.svg);
}
.imgFeedback-Preset {
    background-image: url(../Images/svg/icn_feedback-preset.svg);
}
.imgFeedback-Unassessed {
    background-image: url(../Images/svg/icn_feedback-unassessed.svg);
}

.imgStatus {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 0;
    right: 0;
}

.imgPerfStatus {
    width: 24px;
    height: 24px;
    padding-left: 100px;
}

.perfIcon {
    padding-left: 18px !important;
}

.imgStatus-Below, .imgStatus-Not_valid {
    background-image: url("../Images/svg/Below Target.svg");
}

.imgStatus-At_level, .imgStatus-Valid {
    background-image: url("../Images/svg/At Target.svg");
}

.imgStatus-Above {
    background-image: url("../Images/svg/Above Target.svg");
}

.imgStatus-Additional {
    background-image: url("../Images/svg/icn_skilladded.svg");
}


.imgStatus-Aspirational {
    /*background-image: url(../Images/svg/Aspirational.svg);*/
    -webkit-mask: url(../Images/svg/Aspirational.svg) no-repeat 50% 50% !important;
    mask: url(../Images/svg/Aspirational.svg) no-repeat 50% 50% !important;
}

.imgStatus-Available {
    /*background-image: url(../Images/svg/Additional.svg);*/
    -webkit-mask: url(../Images/svg/Additional.svg) no-repeat 50% 50% !important;
    mask: url(../Images/svg/Additional.svg) no-repeat 50% 50% !important;
}

.imgStatus.imgStatus-Available, .imgStatus.imgStatus-Aspirational {
    cursor: pointer;
}

.ddMatchtype.color-p2.hover-background-color-p2:hover, .ddMatchtype.color-accent.hover-background-color-p2:hover {
    color: white !important;
}

.divAdminAssessmentActions {
    margin-top: 45px;
    margin-left: -15px;
    margin-right: -15px;
}

    .divAdminAssessmentActions .filter-button-list button {
        border: none !important;
        margin: 0 !important;
        width: 100% !important;
    }



.RoleTileContainerDevOptions {
    margin-bottom: 5px;
    width: 260px !important;
}

.tileBoxDevelopmentOpt:hover {
    top: -48px !important;
}

.tileBoxDevelopmentOpt {
    min-height: 180px !important;
}

.roleBoxTitleOptDev {
    max-height: 80px !important;
}

.roleBoxDescriptionOptDev {
    max-height: 50px !important;
}

.small-top-padding {
    padding-top: 1em !important;
}


.rgHeader .rbCheckBox {
    padding: 0 5px;
}


.recomended-level {
    background-color: lightblue;
    border-radius: 20px;
    width: 30px;
}

    .recomended-level.recomended-level-1 {
        color: white;
        background-color: #F45849;
    }

    .recomended-level.recomended-level1 {
        color: white;
        background-color: var(--accent-color);
    }

.color-danger {
    color: #f45849;
}

/***to show an custom image on the background*/
.dropdown-ellipsis-container {
    width: 30px;
    height: 35px;
    position: relative;
    box-sizing: border-box;
}

    .dropdown-ellipsis-container img {
        width: 30px;
        position: relative;
        overflow: hidden;
    }

    .dropdown-ellipsis-container .RadComboBox_Bootstrap {
        position: absolute;
        top: 0;
        width: 32px !important;
        left: 0;
    }

        .dropdown-ellipsis-container .RadComboBox_Bootstrap .rcbInputCell {
            display: none;
        }

        .dropdown-ellipsis-container .RadComboBox_Bootstrap .rcbArrowCell, .dropdown-ellipsis-container .RadComboBox.RadComboBox_Bootstrap {
            background-image: none !important;
            border: none;
        }


    .dropdown-ellipsis-container .RadDropDownList_Bootstrap {
        width: 32px;
        height: 32px;
        position: absolute;
        top: 0;
    }

        .dropdown-ellipsis-container .RadDropDownList_Bootstrap .rddlInner, .dropdown-ellipsis-container .RadDropDownList_Bootstrap.rddlFocused {
            border: none;
            background-color: transparent;
            cursor: pointer;
            width: 40px;
            height: 35px;
            padding: 0;
        }

        .dropdown-ellipsis-container .RadDropDownList_Bootstrap .rddlFocused {
            background: #efefef;
        }

        .dropdown-ellipsis-container .RadDropDownList_Bootstrap .rddlSelect, .dropdown-ellipsis-container .RadDropDownList_Bootstrap .rddlFakeInput, .dropdown-ellipsis-container .RadDropDownList_Bootstrap .rcbList .rcbCheckBox {
            display: none;
        }

    .dropdown-ellipsis-container table {
        opacity: .2;
    }

        .dropdown-ellipsis-container table a {
            background-image: none !important;
            width: 50px !important;
            height: 50px !important;
        }

        .dropdown-ellipsis-container table.rcbDisabled {
            opacity: .5;
            background-color: white;
        }

            .dropdown-ellipsis-container table.rcbDisabled.rcbHovered, .dropdown-ellipsis-container table.rcbDisabled :hover {
                cursor: not-allowed !important;
                background-color: white !important;
            }

    .dropdown-ellipsis-container .RadDropDownList_Bootstrap .rcbList .rcbHovered {
        color: #7c7c7c;
        background-color: white;
    }


.moduleNavDropDown-ellipsis, .moduleNavDropDown-ellipsis .rcbScroll.rcbWidth {
    max-width: 165px !important;
    min-width: 120px !important;
    padding: 0 !important;
    margin: 0 !important;
}

    .moduleNavDropDown-ellipsis .rcbScroll {
        height: auto !important;
    }

    .moduleNavDropDown-ellipsis .rcbTemplate {
        padding: 0 !important;
    }

    .moduleNavDropDown-ellipsis li span.btn {
        text-align: left !important;
        padding: 1px 12px !important;
        font-weight: normal;
        min-width: 120px;
        width: 100%;
        border: none !important;
        cursor: pointer;
    }

        .moduleNavDropDown-ellipsis li span.btn input {
            text-align: left !important;
        }

    .moduleNavDropDown-ellipsis .rcbList {
        padding-top: 5px !important;
    }

    .moduleNavDropDown-ellipsis .rcbTemplate input[type="submit"] {
        color: #7c7c7c !important;
        background-color: transparent !important;
        text-align: left !important;
        width: 100% !important;
        border: none !important;
        font-weight: normal;
    }

        .moduleNavDropDown-ellipsis .rcbTemplate input[type="submit"]:disabled {
            color: white !important;
        }

    .moduleNavDropDown-ellipsis [id*="ddl"], .moduleNavDropDown-ellipsis .rcbTemplate, .moduleNavDropDown-ellipsis {
        background-image: none !important;
    }

.dropdown-as-icon {
    height: 24px;
    width: 24px;
    position: relative;
    margin: 5px;
}

    .dropdown-as-icon svg, .dropdown-as-icon .RadComboBox table, .dropdown-as-icon .dropdown-icon {
        height: 24px !important;
        width: 24px;
        position: absolute;
        left: 0;
    }

    .dropdown-as-icon .RadComboBox input {
        display: none;
    }

    .dropdown-as-icon .RadComboBox .rcbArrowCell a {
        background-image: none !important;
    }

    .dropdown-as-icon .RadComboBox_Bootstrap .rcbArrowCell {
        background-color: transparent !important;
        width: 24px !important;
        height: 24px !important;
        border: none;
    }

    .dropdown-as-icon .RadComboBox_Bootstrap .rcbReadOnly .rcbInputCell {
        display: none;
    }

    .dropdown-as-icon .RadComboBox_Bootstrap .rcbFocused .rcbArrowCell {
        box-shadow: inset -2px -2px 3px rgba(0,0,0,0.05);
    }
/*IE FIXES*/
div.left.ui-tooltip {
    width: auto !important;
}

.btn-image-only {
    border: none !important;
    cursor: pointer;
}

    .btn-image-only.btn-image-only-sm svg {
        height: 32px;
        width: 32px;
    }

    .btn-image-only.btn-image-only-xs svg {
        height: 24px;
        width: 24px;
    }

    .btn-image-only.btn-image-only-xxs svg {
        height: 20px;
        width: 20px;
    }

.RoleBoxSlider {
    padding-top: 35px !important;
}
/*IE bug fixing*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .chivas-grid .rgDataDiv .rgSelectedRow, .chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap > .rgSelectedRow {
        border: none;
    }

    .chivas-grid .rgDataDiv > table > tbody > tr::after, .chivas-grid .rgHeaderDiv tr::after,
    .chivas-grid .rgDataDiv > table > tbody > tr.rgSelectedRow::after, .chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap tbody > tr.rgSelectedRow::after,
    .chivas-grid .rgDataDiv > table > tbody > tr:hover::after, .chivas-grid.chivas-grid-nopager.RadGrid_Bootstrap tbody > tr:hover::after {
        background: rgba(255,255,255,.1) !important;
        border: none !important;
    }

    .RoleBoxSlider {
        display: flex;
        width: 100%;
        border-top: none;
        justify-content: center;
        align-items: center;
        padding-top: 20px;
        color: #7C7C7C;
        margin-left: -110px !important;
        margin-bottom: 10px;
    }

    .RadSlider.Radslider-employee .rslHorizontal a.rslDraghandle {
        border: none;
        background-color: transparent;
        border-radius: 0;
        margin-bottom: 2px !important;
        height: 28px !important;
        width: 28px !important;
        padding: 0;
        margin-left: 0;
        top: -20px !important;
        bottom: 0;
    }



    /*MASK IS UNSUPORTED IN IE*/
    .RadSlider.Radslider-manager.Radslider-minimal .rslHorizontal a.rslDraghandle span, .RadSlider.Radslider-employee.Radslider-minimal .rslHorizontal a.rslDraghandle span
    .RadSlider.RadSlider_SliderMan.Radslider-minimal .rslHorizontal a.rslDraghandle span {
        background-color: transparent;
    }

    .RadSlider_SliderMan a.rslDraghandle, .slider-manager a.rslDraghandle,
    .RadSlider_SliderMan a.rslDraghandle:hover, .slider-manager a.rslDraghandle:hover,
    .RadSlider.Radslider-manager.Radslider-minimal .rslHorizontal a.rslDraghandle span {
        background: unset !important;
        background: white !important;
        background-color: white !important;
        background-color: transparent !important;
        background-image: url(../Images/svg/handler-manager-active.svg) !important;
    }


    .RadSlider.Radslider-employee .rslHorizontal a.rslDraghandle span, .RadSlider.RadSlider_Bootstrap.MySlider .rslHorizontal a.rslDraghandle span {
        background-color: white !important;
        background-color: transparent !important;
        background-image: url(../Images/svg/handler-employee-active.svg) !important;
    }

    .RadSlider_SliderMan .rslDisabled a.rslDraghandle, .slider-manager .rslDisabled a.rslDraghandle,
    .RadSlider_SliderMan .rslDisabled a.rslDraghandle:hover, .slider-manager .rslDisabled a.rslDraghandle:hover,
    .RadSlider.Radslider-manager.IsEmployee .rslHorizontal.rslDisabled a.rslDraghandle span,
    .RadSlider.slider-manager .rslHorizontal a.rslDraghandle span {
        background-color: white !important;
        background-color: transparent !important;
        background-image: url(../Images/svg/handler-manager-disabled.svg) !important;
    }

    .RadSlider.Radslider-employee.IsAdmin .rslHorizontal a.rslDraghandle span,
    .RadSlider.RadSlider_Bootstrap.MySlider .rslDisabled.rslHorizontal a.rslDraghandle span {
        background-color: white !important;
        background-color: transparent !important;
        background-image: url(../Images/svg/handler-employee-disabled.svg) !important;
    }

    .background-color-accent.btn-image-only, .background-color-accent.btn-image, .RadPicker_Bootstrap .rcSelect a, .delete-button, .mail-button, .target-button, .hover-target-button:hover {
        background-color: white !important;
        background-color: transparent !important;
    }

    .img-equals {
        background: unset !important;
        background: white !important;
        background-color: white !important;
        background-color: transparent !important;
        background-image: url(../Images/svg/icn_Equals.svg) !important;
    }

    .img-arrow-right {
        background: unset !important;
        background: white !important;
        background-color: white !important;
        background-color: transparent !important;
        background-image: url(../Images/svg/icn_Equals.svg);
    }

    .RadPicker_Bootstrap .rcSelect a {
        background-image: url(../Images/svg/icn_calendar.svg) !important;
    }

    .delete-button {
        background-image: url(../Images/svg/icn_delete-active.svg) !important;
    }

    .mail-button {
        background-image: url(../Images/svg/icn_mail-active.svg) !important;
    }

    .target-button {
        background-image: url(../Images/svg/icn_nextjob.svg) !important;
    }

    .hover-target-button:hover {
        background-image: url(../Images/svg/icn_nextjobtarget.svg) !important;
    }

    .progress-gif {
        display: block;
    }

    .progress-animation {
        display: none;
    }

    .RadWindow_Sunset .rwTable {
        width: 1034px !important;
    }

    .cardContainer {
        display: inline-flex;
    }


    /*IE fix for org branding*/
    .img-complete-overlay {
        top: 0;
        right: 0;
    }

    .img-complete-overlay {
        width: 20px;
    }

    .preview-area.moduleNavPreview .btnModuleNav {
        max-width: 75px;
    }

    div.imgToSVG.icon {
        display: -ms-inline-grid;
    }

    .btn {
        margin-top: 1px;
    }


    .btn, .RadUpload_Bootstrap .ruSelectWrap .ruButton, .rcpApplyButton {
        padding: 0 10px !important;
    }

        .btn input {
            width: 100%;
            height: 35px !important;
        }

        .btn.btn-xs {
            width: 80px !important;
        }

    .btn-xs input {
        height: 22px !important;
    }


    .imgIEPositionFeedbackTile {
        background-position: -31px;
    }

    .modalPopup .pnlClose-X.IE-FIX {
        top: -50px;
    }
}

/*ProfileSummaryStyles*/
.img-circleLetters {
    width: 30px !important;
    height: 24px !important;
    background-color: #d8e4e8;
    border-radius: 50% !important;
    font-size: 12px !important;
    text-align: center !important;
    padding-top: 8px !important;
    margin-top: 4px !important;
    font-weight: 700;
}

.ProfileSummaryHeader {
    height: 190px;
    width: 100%;
    border-bottom: 1px solid #CCCCCC;
}

.btn-thin-100 {
    width: 90px !important;
    height: 10px !important;
    padding-bottom: 8px !important;
    margin-bottom: 5px !important;
    padding-top: 8px !important;
    padding-left: 7px !important;
}

.btn-thin-100-Selected {
    width: 90px !important;
    height: 18px !important;
    padding-bottom: 8px !important;
    margin-bottom: 5px !important;
    padding-top: 8px !important;
    padding-left: 7px !important;
}

.SummaryHeaderButtonRow {
    width: 100%;
    text-align: right
}

.labelNumberHeaderButton {
    margin-right: 5px;
}

.ChartCenter {
    position: absolute;
    font-size: 21px;
    top: 85px;
    left: 43px;
}

.ChartCenter100 {
    position: absolute;
    font-size: 19px;
    top: 87px;
    left: 39px;
}

.CategoryButton {
    text-align: center !important;
    height: 100px !important;
    width: 150px;
}

    .CategoryButton h2, .CategoryButton h4 {
        line-height: 1em !important;
        padding: 0px !important;
    }

        .CategoryButton h4, .CategoryButton h4 span {
            color: var(--accent-color) !important;
            text-decoration: underline !important;
        }

.CategoryButtonSelected h4, .CategoryButtonSelected h4 span {
    color: #6c9faf;
}


.width50percent {
    width: 50%;
}

#pdfWrapper .Talent-Panel.width50percent,
.width100percent {
    width: 100%;
}

#pdfWrapper .Talent-Panel .chivas-grid .DataDiv {
    height: unset !important;
}

.circleLabel {
    border-radius: 50%;
    font-size: 14px;
    color: #517783;
    line-height: 42px;
    text-align: center;
    background: #e7eff2;
    border: 1px solid #6c9faf;
}

/* Walkthrough Main Box Styles */

.rpRootGroup {
    background-color: transparent !important;
}

.RadPanelBar .rpRootGroup {
    border: none !important;
}

.RadPanelBar .rpGroup .rpOut {
    text-align: left !important;
}

.RadPanelBar .rpGroup .rpImage {
    margin: 8px 5px !important;
}

.RadPanelBar .rpText {
    margin-left: 10px !important;
    font-size: inherit !important;
}

.RadPanelBar_Bootstrap .rpLink {
    border: none !important;
}

    .RadPanelBar_Bootstrap .rpLink.rpDisabled {
        border: none !important;
    }

    .RadPanelBar_Bootstrap .rpLink:hover, .rpLink .rpExpanded:hover {
        border: none !important;
        font-weight: bolder !important;
    }


    .RadPanelBar_Bootstrap .rpLink.rpSelected {
        box-shadow: none !important;
    }


.WalkthroughSummaryButton {
    line-height: 0px !important;
    font-weight: 400 !important;
    width: 90px;
    height: 26px !important;
}

.WalkthroughGroupContainer {
    background-color: white !important
}

.WalkthroughGroupCount {
    float: right;
    margin-right: 10px;
}

.WalkthroughSummary {
    color: #7c7c7c !important;
}

    .WalkthroughSummary.rpLink.rpRootLink {
        border: none !important;
    }

    .WalkthroughSummaryStyle, .WalkthroughSummary,
    .WalkthroughSummaryStyle .rpHovered,
    .WalkthroughSummary .rpHovered,
    .WalkthroughSummaryStyle .rpRootGroup,
    .WalkthroughSummaryStyle .rpRootGroup .rpItem .rpFirst .rpLast .rpHeaderTemplate .rpRootLink .rpExpandable,
    .WalkthroughSummaryStyle ul li > .rpHeaderTemplate.rpSelected,
    .WalkthroughSummaryStyle ul li > .rpHeaderTemplate .rpRootLink .rpExpandable .rpFocused .rpSelected,
    .WalkthroughSummaryStyle ul li > .rpHeaderTemplate,
    .WalkthroughExpandedSummaryStyle {
        border-color: #6C9FAF !important;
        text-decoration: none !important;
        font-weight: 400 !important;
        border-width: 1px;
    }

        .WalkthroughSummary ul li a > .rpNavigation {
            border-right-style: solid;
            border-left-style: solid;
            background-color: white !important;
            border-color: #6C9FAF !important;
            border-width: 1px !important;
        }

        .WalkthroughSummary ul li a, .WalkthroughSummary ul li, .WalkthroughSummary ul {
            background-color: white !important;
            border-color: #6C9FAF !important;
            border-width: 1px !important;
        }

            .WalkthroughSummary ul li a span img {
                height: 22px !important;
                width: 22px !important;
                margin-right: 6px !important;
            }

        .WalkthroughSummary .rpHovered ul li a > .rpNavigation {
            border-right-style: solid;
            border-left-style: solid;
            background-color: white !important;
            border-color: #6C9FAF !important;
            border-width: 1px !important;
            background-color: #e9f1f3 !important;
            background: #e9f1f3 !important;
        }

a.WalkthroughSummary .rpOut.rpNavigation {
    background-color: transparent !important;
}

.WalkthroughSummary .RadPanelBar .rpRootGroup {
    border: none !important;
}

.centerIcontTop8 {
    top: 8px !important;
}

.WalkthroughBox {
    position: absolute;
    z-index: 200000;
    width: 380px;
    border: 1px solid #c4c4c4;
    background-color: #fff;
    border-radius: 2px;
    padding: 10px 20px 10px 20px;
    box-shadow: 0 1px 3px #c4c4c4;
    -moz-box-sizing: content-box;
    height: auto;
    left: -180px;
}

    .WalkthroughBox::before {
        display: block;
        border-style: solid;
        width: 0px;
        border-width: 0 10px 20px 10px !important;
        border-top-color: transparent !important;
        border-left-color: transparent !important;
        border-right-color: transparent !important;
        border-bottom-color: #ffffff !important;
        top: -15px !important;
        left: calc(50% + 10px) !important;
        content: ' ';
        position: absolute;
    }

.borderlessGrid .rgMasterTable .rgRow > td:first-child,
.borderlessGrid .rgMasterTable .rgAltRow > td:first-child {
    border-bottom: none !important;
}

.WalkthroughSummary span > .rpText {
    margin-left: 18px !important;
}

.WalkthroughSummaryStyle .rpHovered, .WalkthroughSummary .rpHovered,
.WalkthroughSummary:hover, .WalkthroughSummaryStyle:hover,
.rpLink .rpRootLink .WalkthroughSummary .rpHovered,
.WalkthroughSummary ul li a.rpLink:hover, .WalkthroughSummary ul li > .rpLink:hover {
    font-style: normal !important;
    text-decoration: none !important;
    font-weight: 400 !important;
    background-color: #e9f1f3 !important;
}

.WalkthrougGroupIcons {
    float: left;
    margin-right: 5px;
    margin-left: 5px;
    margin-top: 5px
}

.WalkthroughExpandedSummaryStyle .WalkthroughGroupContainer .WalkthrougGroupIcons .ShowArrowClass {
    display: none !important;
}

.WalkthroughExpandedSummaryStyle .WalkthroughGroupContainer .WalkthrougGroupIcons .HideArrowClass {
    display: block !important;
}

.HideArrowClass {
    display: none;
    color: #517783 !important;
}

.ShowArrowClass {
    color: #517783 !important;
}

.borderlessGrid .rgMasterTable .rgRow > td > .RadPanelBar_Bootstrap,
.borderlessGrid .rgMasterTable .rgAltRow > td > .RadPanelBar_Bootstrap,
.WalkthroughSummary {
    margin-bottom: 0 !important;
}



#ctl00_rpbWalkthroughGroup .rpSlide {
    margin: -1px;
/*    width: 460px; */    
    width: 100% !important;
    border: none !important;
}

#ctl00_rpbWalkthroughGroup .WalkthrougGroupIcons {
    margin-top: 0px !important;
}

#ctl00_rpbWalkthroughGroup .WalkthroughGroupContainer {
    border-bottom: 1px solid #6c9faf;
}

.talent-TabStrip.RadTabStrip_Bootstrap .rtsLevel1 .rtsSelected .rtsLink, .talent-TabStrip.RadTabStrip_Bootstrap .rtsLevel1 .rtsHovered .rtsLink {
    background-color: transparent !important;
    border-left: none;
    border-right: none;
    color: currentColor !important;
}

.talent-TabStrip .rtsTxt {
    color: #7c7c7c !important;
    font-weight: 500;
    text-transform: uppercase;
}

.talent-TabStrip .rtsSelected .rtsTxt {
    color: currentColor !important;
}

.talent-MultiPage.RadMultiPage .rmpView {
    box-sizing: border-box;
    overflow: auto;
    text-align: center;
    position: relative;
    padding: 20px;
}

.talentpool-result-container {
    overflow: auto;
}



/* Profile Preferences label pills*/

.preference-pill {
    background-color: #f7f8fa !important;
    background-size: cover;
    display: inline-block;
    margin: 5px 10px 0px 0px;
    width: 22% !important;
    height: 20px !important;
    line-height: 20px !important;
    text-align: center;
    align-content: center;
    padding: 0 0 0 5px;
    border: none !important;
    font-family: Lato;
    font-size: 12px;
    color: #517783;
    white-space: nowrap;
    vertical-align: middle;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

/*Succession label pills*/

.btn-succession-normal {
    display: inline-block;
    border-radius: 11px;
    width: 110px;
    height: 22px;
    padding: 0px 0px 1px 3px;
    border: 1px solid #6c9faf;
    background-color: #f7f8fa;
    background-size: cover;
    font-family: Lato;
    font-weight: normal;
    font-size: 14px;
    color: #517783;
    text-decoration: none solid rgb(81, 119, 131);
    text-align: center;
    font-style: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    overflow: hidden !important;
    text-overflow: ellipsis;
    line-height: 20px;
}

.btn-succession-critical-person {
    display: inline-block;
    /*border: solid;*/
    border-radius: 11px;
    width: 110px;
    height: 22px;
    padding: 0px 0px 1px;
    border: 1px solid #6c9faf;
    background-color: #e7eff2;
    background-size: cover;
    font-family: Lato;
    font-weight: bold;
    font-size: 14px;
    color: #517783;
    text-decoration: none solid rgb(81, 119, 131);
    text-align: center;
    font-style: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    overflow: hidden !important;
    text-overflow: ellipsis;
    line-height: 20px;
}

.btn-succession-critical-role {
    display: inline-block;
    /*border: solid;*/
    border-radius: 11px;
    width: 110px;
    height: 22px;
    padding: 0px 0px 1px;
    border: 1px solid #6c9faf;
    border-radius: 11px;
    background-color: #e7eff2;
    background-size: cover;
    font-family: Lato;
    font-weight: bold;
    font-size: 14px;
    color: #517783;
    text-decoration: none solid rgb(81, 119, 131);
    text-align: center;
    font-style: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 20px;
}

.btn-succession-missing {
    display: inline-block;
    /*border: solid;*/
    border-radius: 11px;
    width: 110px;
    height: 22px;
    padding: 0px 0px 1px 3px;
    border: 1px solid #f45849;
    background-color: #f7f8fa;
    background-size: cover;
    font-family: Lato;
    font-weight: normal;
    font-size: 14px;
    color: #f45849;
    text-decoration: none solid rgb(244, 88, 73);
    font-style: normal;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    line-height: 20px;
}

.btn-succession-missing-NoAction {
    display: inline-block;
    /*border: solid;*/
    border-radius: 11px;
    width: 110px;
    height: 22px;
    padding: 0px 0px 1px 3px;
    border: 1px solid #f45849;
    background-color: #f7f8fa;
    background-size: cover;
    font-family: Lato;
    font-weight: normal;
    font-size: 14px;
    color: #f45849;
    text-decoration: none solid rgb(244, 88, 73);
    font-style: normal;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    line-height: 20px;
}


.talent-grid-icon .grid-icon-cell {
    width: calc(100% / 3);
    height: 10px;
    border: 0.5px solid #6C9FAF;
    opacity: 0.2;
    box-sizing: border-box;
}

    .talent-grid-icon .grid-icon-cell.grid-icon-cell-selected {
        opacity: 1;
        background-color: var(--accent-color);
        z-index: 10;
        border-width: 1px;
    }

.talent-grid-icon .grid-icon-container {
    border: 1px solid #6c9faf;
    border-top-color: rgb(108, 159, 175);
    border-right-color: rgb(108, 159, 175);
    border-bottom-color: rgb(108, 159, 175);
    border-left-color: rgb(108, 159, 175);
    width: unset;
    border-radius: 4px;
    display: flex;
    width: 30px;
    flex-wrap: wrap-reverse;
    flex-direction: row;
    box-sizing: border-box !important;
}

.grid-icon-cell:not(.grid-icon-cell-selected) {
    background: transparent !important;
}


.talent-grid-icon .grid-icon-row {
    display: flex;
}

.Talent-SubPanel {
    border-bottom: 1px solid #bebebe;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
/*New talent panel (profile beatyfication)*/
.RadDock_Bootstrap {
    border: none !important;
}

.RadDock_Bootstrap, .Talent-Panel, .pnlSettingTile {
    box-shadow: 0px 1px 3px rgba(0,0,0,0.2) !important;
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.2) !important;
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.2) !important;
}

.Talent-Panel, .pnlSettingTile {
    margin: 25px 0;
}

    .Talent-Panel.talent-pool-panel {
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 20px;
        margin-top: 0 !important;
    }

.Talent-Panel-Table {
    height: max-content;
}

.Talent-Panel-flex-container {
    display: flex;
}

    .Talent-Panel-flex-container > div.Talent-Panel {
        margin: 0 10px;
    }

        .Talent-Panel-flex-container > div.Talent-Panel:last-child {
            margin-right: 0;
        }

        .Talent-Panel-flex-container > div.Talent-Panel:first-child {
            margin-left: 0;
        }

.Talent-Panel .Talent-Panel-Header {
    height: 45px;
    line-height: 45px;
    width: 100%;
    position: relative;
}



    .Talent-Panel .Talent-Panel-Header h2 {
        color: white !important;
        padding: 9px 10px 5px 20px !important;
    }

        .Talent-Panel .Talent-Panel-Header h2.gray {
            color: #4C4C54 !important;
        }

    .Talent-Panel .Talent-Panel-Header::after {
        content: ' ';
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        background: #fff;
        height: 3px;
        opacity: .3;
    }

    .Talent-Panel .Talent-Panel-Header .header-combo table,
    .Talent-Panel .Talent-Panel-Header .header-combo table.rcbHovered,
    .Talent-Panel .Talent-Panel-Header .header-combo table.rcbFocused,
    .Talent-Panel .Talent-Panel-Header .header-combo .rcbInputCell.rcbInputCellLeft,
    .Talent-Panel .Talent-Panel-Header .header-combo .rcbInputCell.rcbInputCellLeft input[type="text"],
    .Talent-Panel .Talent-Panel-Header .header-combo .rcbArrowCell.rcbArrowCellRight,
    .Talent-Panel .Talent-Panel-Header .header-combo .rcbArrowCell.rcbArrowCellRight a,
    .Talent-Panel .Talent-Panel-Header .header-combo table.rcbHovered .rcbInputCell.rcbInputCellLeft,
    .Talent-Panel .Talent-Panel-Header .header-combo table.rcbHovered .rcbInputCell.rcbInputCellLeft input[type="text"],
    .Talent-Panel .Talent-Panel-Header .header-combo table.rcbHovered .rcbArrowCell.rcbArrowCellRight,
    .Talent-Panel .Talent-Panel-Header .header-combo table.rcbHovered .rcbArrowCell.rcbArrowCellRight a,
    .Talent-Panel .Talent-Panel-Header .header-combo table.rcbFocused .rcbInputCell.rcbInputCellLeft,
    .Talent-Panel .Talent-Panel-Header .header-combo table.rcbFocused .rcbInputCell.rcbInputCellLeft input[type="text"],
    .Talent-Panel .Talent-Panel-Header .header-combo table.rcbFocused .rcbArrowCell.rcbArrowCellRight,
    .Talent-Panel .Talent-Panel-Header .header-combo table.rcbFocused .rcbArrowCell.rcbArrowCellRight a {
        color: white !important;
        border: none;
        background-color: transparent !important;
        height: 30px;
        box-shadow: none;
    }

    .Talent-Panel .Talent-Panel-Header .header-combo {
        border-bottom: 1px solid white !important;
    }

        .Talent-Panel .Talent-Panel-Header .header-combo table .rcbArrowCell.rcbArrowCellRight a {
            background-image: url(../Images/svg/icn_arrowdown-prim.svg) !important;
        }

.Talent-Panel-Header-ExtraInfo {
    margin-right: 20px;
    margin-left: auto;
}

.Talent-Panel .svgIcon, .svgIcon, .svgIcon svg {
    width: 18px;
    height: 18px;
}

.Talent-Panel .Bootstrap.RadEditor, .Talent-Panel .Bootstrap.RadEditor .reModule, .Talent-Panel .Bootstrap.RadEditor .reEditorModes, .Talent-Panel .Bootstrap.RadEditor .reWrapper {
    background-color: #fff;
    font-size: 14px;
}

.Talent-Panel .Talent-Panel-Content {
    padding: 0px;
    position: relative;
    overflow: auto;
}

    .Talent-Panel .Talent-Panel-Content .Talent-Panel-Row, .Talent-Panel .Talent-Panel-Content.Talent-Panel-Row {
        display: flex;
        width: 100%;
    }

    .Talent-Panel .Talent-Panel-Content .Talent-Panel-Column {
        width: 100%;
        margin: 20px 0;
        padding: 0 20px;
        box-sizing: border-box;
    }


    .Talent-Panel .Talent-Panel-Content .Talent-Panel-Row .Talent-Panel-Column:not(:first-child) {
        border-left: 1px solid #bebebe;
    }

    .Talent-Panel .Talent-Panel-Content .Talent-Panel-Row .action-buttons {
        width: 100%;
    }

    .Talent-Panel .Talent-Panel-Content .Talent-Panel-Row .Talent-Panel-Column.noPadding {
        padding: 0;
    }

    .Talent-Panel .Talent-Panel-Content .Talent-Panel-Row .Talent-Panel-Column.noBorder, noBorder {
        border: none !important;
        border-width: 0 !important;
        box-shadow: unset !important;
        -webkit-box-shadow: unset !important;
        -moz-box-shadow: unset !important;
    }

    .Talent-Panel .Talent-Panel-Content .Talent-Panel-Row .Talent-Panel-Column.noMargin {
        margin: 0;
    }

.Talent-Panel .invisible-grid tr {
    vertical-align: top;
}

.Talent-Panel .invisible-grid .rgSelectedRow td span {
    color: #535353;
}

.Talent-Panel .radio-button-select {
    width: 10px;
}


.Talent-Panel-action-btn {
    position: absolute;
    right: 20px;
    top: 10px;
}

.Talent-Panel-Edit-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    height: 24px;
    width: 24px;
}

    .Talent-Panel-Edit-btn.Talent-Panel-Edit-btn-cornered {
        right: 0;
        top: 0;
    }

.Talent-Panel button {
    min-width: 24px;
}

.Talent-Panel-Remove-btn {
    position: absolute;
    left: 10px;
    top: 10px;
    height: 24px;
    width: 24px;
}

    .Talent-Panel-Remove-btn.Talent-Panel-Remove-btn-cornered {
        left: 0;
        top: 0;
    }

    .Talent-Panel-Remove-btn button,
    .Talent-Panel-Remove-btn svg,
    .Talent-Panel-Edit-btn svg,
    .Talent-Panel-Edit-btn button {
        height: 24px;
        padding: 0 !important;
    }

    .Talent-Panel-Remove-btn button,
    .Talent-Panel-Edit-btn button {
        position: relative;
    }

    .Talent-Panel-Remove-btn svg,
    .Talent-Panel-Edit-btn svg {
        position: absolute;
        top: 0;
        left: 0;
    }

input[type="text"].small-input:disabled {
    background: #f1f2f3;
    opacity: .5;
}

input[type="text"].small-input {
    margin: 0 !important;
    border-width: 1px !important;
    border-style: solid !important;
    height: 22px;
    margin: 5px;
    margin-left: 5px;
    margin-left: 10px !important;
}

.small-input-row {
    height: 26px;
}


/*scroll bar*/
body *, body {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--primary-two-color) var(--secondary-one-color);
}

    body *::-webkit-scrollbar, body::-webkit-scrollbar {
        width: 8px;
        height: 8px;
        background-color: var(--secondary-one-color);
        opacity: 0.7;
    }

    body *::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
        background: var(--primary-two-color);
        opacity: 0.7;
    }

        body *::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover {
            cursor: pointer;
            background: var(--primary-one-color);
            opacity: 1 !important;
        }

        body *::-webkit-scrollbar-thumb:active, body::-webkit-scrollbar-thumb:active {
            background: var(--accent-color);
        }


#pnlNavItems, #contentBody_pnlNavItems, .fixed-top-bar {
    top: 48px;
    position: fixed;
    left: 40px;
    width: 100%;
    z-index: 5555;
    background: white;
}

#contentBody_pnlNavItems, .fixed-top-bar {
    padding-left: 20px;
    z-index: 90000;
}

.fixed-top-bar {
    right: 0;
}

.meshim_widget_components_chatButton_Button .button_bar {
    background-color: red !important;
}

.setting-container.display-flex {
    flex-wrap: wrap;
    width: 100%;
}

.pnlSettingTile {
    padding: 0 !important;
    margin: 20px !important;
    width: calc(33% - 40px);
    color: white !important;
}

    .pnlSettingTile .actionPanel {
        padding: 20px !important;
    }

    .pnlSettingTile > h2 {
        background-color: #535353 !important;
        width: calc( 100% - 20px) !important;
        color: white !important;
        display: inline-block !important;
        padding-left: 20px !important;
    }

    .pnlSettingTile a {
        text-decoration: none;
    }

        .pnlSettingTile a:hover {
            text-decoration: underline;
            color: black;
        }

@media screen and (max-width: 1024px) {
    .pnlSettingTile {
        width: calc(50% - 40px);
    }
}

@media screen and (max-width: 700px) {
    .pnlSettingTile {
        width: 100%;
    }
}


.BeaconFabButtonFrame {
    bottom: 10px !important;
}

#beacon-container {
    z-index: 11000000 !important;
    position: absolute;
}

.fullwidth {
    width: 100% !important;
    display: block;
}


.img-progression-direction-downwards {
    background-image: url(../images/svg/icn_downwards-disabled.svg) !important;
    background-repeat: no-repeat !important;
    margin: 0 !important;
    background-position: center !important;
}

.img-progression-direction-promotion {
    background-image: url(../images/svg/icn_promotion-disabled.svg) !important;
    background-repeat: no-repeat !important;
    margin: 0 !important;
    background-position: center !important;
}

.img-progression-direction-lateralmove {
    background-image: url(../images/svg/icn_lateralmove-disabled.svg) !important;
    background-repeat: no-repeat !important;
    margin: 0 !important;
    background-position: center !important;
}


.CursorDragging,
.CursorDragging * {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

.bellNotification::before,
.mainIdealCandidateBoxNew::before,
.tile-btn-comment.disagreed:before,
.missing-required::before,
.due-date-dot::before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
    border-radius: 7.5px;
    background-color: #faa74a;
    float: right;
    top: -8px;
    position: relative;
    right: -8px;
    opacity: 1;
    animation: blink 1s;
    animation-iteration-count: 3;
    z-index: 10;
}

.bellNotification::before {
    width: 12px;
    height: 12px;
    top: -1px;
    position: relative;
    right: 10px;
    opacity: 1;
}

.tile-btn-comment.disagreed:before,
.missing-required.missing-required-absolute::before {
    position: absolute;
}

@keyframes blink {
    50% {
        opacity: .3;
    }
}



.modalPopup.reporPreviewPopup {
    max-width: 900px;
    height: 80vh !important;
    width: 80% !important;
    overflow: hidden;
}

    .modalPopup.reporPreviewPopup .rwIcon.rwCustomIcon {
        height: 30px;
        width: 24px;
    }

    .modalPopup.reporPreviewPopup .rwExternalContent {
        height: calc(80vh - 92px) !important;
        background-color: #f4f4f4;
    }

#frmPreview {
    width: 100% !important;
    height: 100vh !important;
    border: none;
    border-bottom: 1px solid #bebebe;
}

.rwTitleWrapper > span, .rwTitleWrapper > h6 {
    display: none !important;
}

span.btn-switch-branded {
    position: relative;
    width: 34px;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important
}

    span.btn-switch-branded.btn-switch-branded-lg {
        width: 56px;
    }


    span.btn-switch-branded::after {
        content: " ";
        background: #bdbdbd;
        position: absolute;
        right: 3px;
        left: 3px;
        top: 10px;
        border-radius: 12px;
        height: 11px;
        -webkit-transition: opacity .3s;
        transition: opacity .3s;
    }


span.btn-switch-branded-lg::after {
    border-radius: 12px;
    height: 24px;
}

span.btn-switch-branded::before {
    content: " ";
    border: 1px solid #bdbdbd;
    height: 16px;
    width: 16px;
    position: absolute;
    left: 0px;
    background: white;
    border-radius: 100%;
    top: 7px;
    z-index: 20;
    -webkit-transition: all .3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

span.btn-switch-branded-lg::before {
    height: 22px;
    width: 22px;
    left: 4px;
    background: white;
    top: 11px;
}

span.btn-switch-branded.rbLinkButtonChecked::before {
    left: calc(100% - 16px);
    -webkit-transition: all .3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.btn-switch-branded.btn-switch-branded-lg.rbLinkButtonChecked::before {
    background: white !important;
    left: calc(100% - 26px);
}

span .btn-switch-branded.rbLinkButtonChecked::after {
    opacity: 1;
}

span.btn-switch-branded:hover::before {
    box-shadow: 0 0 3px 2px rgb(255, 255, 255);
}
/*firefox style*/
@-moz-document url-prefix() {
    #frmPreview {
        max-width: 900px !important;
        height: 90vh !important;
    }
}
/*explorer fix */
/*IE bug fixing*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .modalPopup.reporPreviewPopup {
        max-width: 2000px !important;
        width: 70% !important;
    }

    #frmPreview {
        height: 89vh !important;
    }

    .RadGrid_Bootstrap .rgDrag {
        background-image: url('../Images/svg/drag_drop.svg') !important;
        position: relative;
        left: 25px;
        top: -20px;
        height: 28px !important;
    }
}

/** IdealCandidateTile **/

.IdealCandidateTileContainer {
    width: 260px;
    display: inline-flex;
    position: relative;
    margin-right: 30px;
    margin-bottom: 30px;
}

.IdealCandidateContent.tg-royco-tile-top {
    height: 180px;
}

.mainIdealCandidateBox {
    width: 100%;
    height: 220px;
}


.mainIdealCandidateBoxNoAccess .IdealCandidateContent.tg-royco-tile-top {
    filter: brightness(95%);
}

.mainIdealCandidateBoxRequested.tg-royco-tile {
    border-color: #eff5f6;
}

.mainIdealCandidateBoxRequested .IdealCandidateContent.tg-royco-tile-top {
    background-color: #efefef;
}



.IdealCandidateMatchRow {
    display: inline-block;
    width: 100%;
}

.IdealCandidateFooter {
    padding-top: 8px;
    align-content: center;
    text-align: center;
    display: inline-flex;
    border-top: solid 1px #6C9FAF;
}

.CompletitionMiniBox {
    width: 30%;
    border: solid 1px #bebebe;
    display: inline-flex;
    border-radius: 20px;
    font-size: 12px;
    padding: 1px;
    height: 26px;
    line-height: 23px;
    padding: 0px 10px;
    max-width: 30%;
}


    .CompletitionMiniBox .IconMiniBox {
        color: #517783 !important;
    }

.CompletitionMiniBoxCompleted {
    color: #fff;
    background-color: #7BAD36;
}

    .CompletitionMiniBoxCompleted .IconMiniBox {
        color: #fff !important;
    }

.Text_517783 {
    color: #517783 !important;
}

.NoLineHeight {
    line-height: 1em !important;
    padding: 0 !important;
}

.imgIcon {
    width: 24px;
    height: 24px;
}

.assessmentIcon {
    background-image: url(../Images/svg/icn_assessments.svg);
}

.PreferencesIcon {
    background-image: url(../Images/svg/icn_performance.svg);
}



.emptyIdealCandidateTileContainer {
    width: 250px;
    height: 190px;
    background-color: #6C9FAF;
    color: #fff !important;
    text-align: center;
    fill: #fff !important;
    padding-top: 30px;
}

.IdealCandidateFooterCompare {
    padding-top: 15px;
    align-content: center;
    text-align: center;
    display: inline-flex;
}

.RadGrid_Bootstrap .rgDrag {
    background-image: url('../Images/svg/drag_drop.svg') !important;
    position: relative;
    left: 25px;
    top: -20px;
    height: 28px !important;
}

/*radeditor fix*/
#RadWindowWrapper_ctl00_contentBody_txtValue_dialogOpenerDocumentManager.RadWindow_Bootstrap.RadWindow {
    z-index: 1000100 !important;
}

.line-progress-container {
    display: inline-block;
    height: 100%;
    width: 100%;
}

.progress-line {
    background: #dedede;
    overflow: hidden;
    display: flex;
    width: 100%;
}

    .progress-line .p-line-hover, .progress-line .p-line:hover {
        filter: brightness(110%) !important;
        cursor: pointer;
        box-shadow: 0px 1px 3px rgba(0,0,0,.2);
    }

svg.progress-circle {
    overflow: visible !important;
}

    svg.progress-circle circle {
        stroke-dashoffset: 0;
        transition: stroke-dashoffset .5s linear;
        stroke: #bebebe;
    }

        svg.progress-circle circle.progress-circle {
            stroke: currentColor;
            cursor: pointer !important;
        }

        svg.progress-circle circle:hover {
            filter: brightness(1.1) drop-shadow(1px 1px 2px rgba(0,0,0,0.2));
        }

        svg.progress-circle circle.p-circle-animate {
            transition: stroke-dashoffset 1s linear;
        }

.circle-progress-container {
    display: block;
    margin: 0 auto;
    position: relative;
    -moz-transform: rotate(90deg) scale(-1);
    -webkit-transform: rotate(90deg) scale(-1);
    -o-transform: rotate(90deg) scale(-1);
    transform: rotate(90deg) scale(-1);
    -ms-filter: rotate(90deg) flip; /*IE*/
    filter: rotate(90deg) flip; /*IE*/
    border: none;
}


.ui-tooltip.p-circle::after, .ui-tooltip.p-circle::before,
.ui-tooltip.p-circle .ui-tooltip-content::after, .ui-tooltip.p-circle .ui-tooltip-content::before {
    content: '' !important;
    display: none !important;
}

.ui-tooltip.p-circle {
    background-color: transparent !important;
}

    .ui-tooltip.p-circle .ui-tooltip-content {
        border: 1px solid white !important;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2) !important;
        margin: 10px !important;
        padding: 10px 20px !important;
        font-weight: normal;
        font-size: 14px;
    }

.color-white {
    color: white !important;
}

.color-grey {
    color: #bebebe;
}

.color-red, .filter-remove-filter-btn:hover, .main-applied-filters span.filter-pill-category-close:hover
.MenuDiv.red .MenuMacth, .match-red {
    color: #FF6656 !important;
}

.RadFilter_MetroTouch .rfDel:hover,
.background-color-red {
    background-color: #fa250f !important;
}

.color-orange, .divAdminAssessmentActions .filter-button-list button span, span.filter-pill-category-close.color-accent:hover
.MenuDiv.orange .MenuMacth, .match-orange {
    color: #FF9944 !important;
}

.background-color-orange {
    background-color: #FF9944 !important;
}

.color-green, .divAdminAssessmentActions .filter-button-list button + button span,
.MenuDiv.green .MenuMacth, .match-green {
    color: #7bad36 !important;
}


.color-25BEC1 {
    color: var(--accent-color);
}

/*.RadWindow.rwTransparentWindow {
    background-color: #51778380;
}*/

.filter-control.filter-control-horizontal *,
.RadMenu .rmHorizontal .rmItem,
.btnModuleNav * {
    transition: all .3s;
}


.MenuBranded .rtsLink.rtsSelected {
    padding-bottom: 4px;
}


[id$='btnHidden'] {
    display: none !important;
}

.pillNormal {
    max-width: 233px;
    border-color: rgb(108, 159, 175);
    background-color: rgb(255, 255, 255);
    color: rgb(81, 119, 131);
    text-decoration: rgb(81, 119, 131);
    padding-top: 2px;
}

.btnRunLateLoad {
    visibility: hidden;
}

.modalPopup #contentBody_confirmAction_lblMessage {
    padding: 20px 0;
    display: block;
}



.RadOrgChart .rocExpandArrow, .RadOrgChart .rocCollapseArrow, .RadOrgChart .rocExpandGroupArrow, .RadOrgChart .rocCollapseGroupArrow {
    font-family: 'WebComponentsIcons' !important;
}


.RadGrid_Bootstrap .rgEditRow {
    background: #f4f5f6;
}

.RadComboBoxDropDown_Bootstrap li.rcbLoading {
    animation: blinker 2s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: .3;
    }
}

.quick-filter-button .rcbInputCell.rcbInputCellLeft input[type=text] {
    background-color: transparent !important;
}


.RadGrid_Bootstrap .rgSortDesc,
.RadGrid_Bootstrap .rgSortAsc {
    background-color: slategrey;
    background-position: -115px -15px !important;
    height: 20px !important;
    width: 20px !important;
    border-radius: 5px;
}

.RadGrid_Bootstrap .rgSortAsc {
    background-position: -115px -64px !important;
}

.quick-filter-button .rcbInputCell.rcbInputCellLeft input[type=text] {
    .nav_bar-main background-color: transparent !important;
}

.RadGrid_Bootstrap .rgRow > td.rgSorted, .RadGrid_Bootstrap .rgAltRow > td.rgSorted, .RadGrid_Bootstrap .rgEditRow > td.rgSorted {
    background-color: #e9f1f3;
    background-color: #d8e4e85c !important;
}





/**new text area editor**/
div.tg-editor {
    border: 1px solid #ebebeb;
    background-color: #fafafa;
    padding: 5px;
    padding-left: 0px;
    padding-right: 1px;
}

    div.tg-editor.RadEditor {
        overflow: auto;
        border: none !important;
        background-color: transparent !important;
    }

.tg-editor.RadEditor table.reLayoutWrapper {
    position: relative;
    border: 1px solid #ebebeb;
    border-bottom-color: blue;
    overflow: auto;
}

.tg-editor table.reLayoutWrapper.activeEditor {
    border-bottom: 1px solid #ebebeb !important;
}

.tg-editor.Bootstrap.RadEditor .reNoBorder div.reContentArea {
    border: none !important;
}

.Bootstrap.RadEditor .reContentCell {
    width: 100%;
    display: inline-grid;
}


.tg-editor.RadEditor.reWrapper .reToolCell {
    background-color: transparent;
    border-color: transparent;
    position: absolute;
    bottom: 0;
    margin: 0 !important;
    opacity: 0;
    height: 0px;
    transition: all .3s;
    left: 0;
    border-top: 1px lightgrey solid;
    overflow: hidden;
    border-left: 1px solid #ebebeb;
}

    .tg-editor.RadEditor.reWrapper .reToolCell:hover {
        opacity: 1;
        /*height: 33px;*/
    }

.tg-editor .reLayoutWrapper.activeEditor .reToolCell {
    opacity: .9;
    height: 33px;
}

.tg-editor .reTool.reTool_disabled {
    opacity: 0 !important;
    height: 0 !important;
}

.RadEditor.reWrapper .reToolCell .reToolbar li {
    border: none;
    border-right: 1px solid #f6f7f8 !important;
}

.RadEditor.reWrapper .reToolCell .reToolbar:hover,
.RadEditor.reWrapper .reToolbarWrapper {
    box-shadow: 1px 3px 5px rgba(0,0,0,0.2);
}

.Bootstrap .reToolbar li, .RadWindow .Bootstrap.reToolbarWrapper .reToolbar li,
.RadWindow .Bootstrap.reToolbarWrapper .reToolbar li .reTool,
.reToolbar.Bootstrap .reTool {
    border-color: #ebebeb !important;
}

    .reToolbar.Bootstrap .reTool:hover {
        background: #e9f1f3;
        cursor: pointer;
        box-shadow: 1px 1px 3px #A8A8A8;
    }

    .reToolbar.Bootstrap .reTool span:hover {
        cursor: pointer;
    }

    .reToolbar.Bootstrap .reTool.reTool_selected {
        background-color: #d8e4e8 !important;
        box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
    }

.Bootstrap.RadEditor .reNoBorder div.reContentArea,
.Bootstrap.RadEditor .reNoBorder div.reContentArea * {
    color: #7c7c7c;
    font-size: 16px;
}

/*rad editor buttons*/
.tg-editor .Bootstrap.reToolbar li .reTool span {
    margin: 0 !important;
    width: 100%;
    height: 100%;
    background: url(../Images/png/format-options.png) no-repeat;
}

.Bootstrap.tg-editor .reTool span.Bold {
    background-position: 0px 1px;
}

.Bootstrap.tg-editor .reTool span.Italic {
    background-position: -36px 1px !important;
}

.Bootstrap.tg-editor .reTool span.Underline {
    background-position: -74px 1px !important;
}

.Bootstrap.tg-editor .reTool span.InsertUnorderedList {
    background-position: -110px 1px !important;
}

.Bootstrap.tg-editor .reTool span.InsertOrderedList {
    background-position: -146px 1px !important;
}

.Bootstrap.tg-editor .reTool span.Indent {
    background-position: -182px 1px !important;
}

.Bootstrap.tg-editor .reTool span.Outdent {
    background-position: -218px 1px !important;
}

.Bootstrap.tg-editor [contenteditable="false"] {
    opacity: 0.6;
    cursor: not-allowed;
}

.Bootstrap.tg-editor td.reLeftVerticalSide {
    width: 0px !important;
    display: none;
}

#PnlNewFeature {
    position: relative;
    z-index: 99999999;
}



.OrgChartManagerStyle .ChartTemplateContainer, .OrgChartManagerStyle .ChartTemplateContainer + div {
    border: 1px solid #bebebe;
    padding: 8px;
}

.text-light-color {
    color: white !important;
}

.cursor-pointer {
    cursor: pointer;
}
/*QUERY BUILDER*/
.query-builder.form-inline .form-control {
    max-width: 200px !important;
}

.query-builder.form-inline .rule-actions [data-delete] {
    position: absolute;
    right: 10px;
    top: 10px;
}

.query-builder.form-inline [data-delete] {
    width: 24px !important;
}

.query-builder.form-inline .btn-group.group-conditions .btn.btn-xs {
    background-color: white !important;
    color: var(--accent-color) !important;
    border: 1px solid var(--accent-color) !important;
    /*opacity: .5;*/
    border-radius: 14px !important;
    line-height: 21px !important;
}

    .query-builder.form-inline .btn-group.group-conditions .btn.btn-xs:hover {
        opacity: 1;
    }

    .query-builder.form-inline .btn-group.group-conditions .btn.btn-xs.active {
        background-color: var(--accent-color) !important;
        color: white !important;
        border-color: var(--accent-color) !important;
        opacity: 1;
    }

    .query-builder.form-inline .btn-group.group-conditions .btn.btn-xs[data-not="group"] {
        color: var(--color-danger) !important;
        border-color: currentColor !important;
        line-height: 18px !important;
    }

    .query-builder.form-inline .btn-group.group-conditions .btn.btn-xs.active[data-not="group"] {
        background-color: var(--color-danger) !important;
        color: white !important;
        border-color: var(--color-danger) !important;
    }

.query-builder.form-inline .btn-group.group-conditions label.btn.btn-xs:first-of-type {
    border-radius: 14px 0 0 14px !important;
    margin-right: 0 !important;
}

.query-builder.form-inline .btn-group.group-conditions label.btn.btn-xs:last-of-type {
    border-radius: 0 14px 14px 0 !important;
    margin-left: 0 !important;
}

.pull-right {
    float: right;
}

.query-builder.form-inline .btn.disabled, .query-builder.form-inline .btn[disabled], .query-builder.form-inline fieldset[disabled] .btn {
    pointer-events: none;
    cursor: not-allowed;
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: 0 !important;
}

.query-builder.form-inline .btn.btn-xs.btn-success {
    width: 80px !important;
}

.query-builder .rules-group-container {
    padding: 8px !important;
    border: none !important;
    background: rgba(111, 112, 113,.03) !important;
}

.query-builder .btn-group {
    height: 28px;
}

    .query-builder .btn-group > .btn, .query-builder .btn-group-vertical > .btn {
        position: relative;
        float: left;
    }

.query-builder .btn {
    margin: 1px;
}

.query-builder.form-inline .btn-group.group-conditions .btn.btn-xs {
    max-width: 64px !important;
    display: block !important;
}




.data-item-row {
    display: flex;
    background: white;
    border-bottom: 1px solid #dedede;
    padding: 1px;
    font-size: smaller;
}

    .data-item-row:nth-child(2n) {
        background: #f7f8fa;
    }

.data-item + .data-item {
    border-left: 1px solid #dedede;
}

.data-item {
    padding: 8px;
}

.form-control.hide {
    visibility: hidden;
    width: 0 !important;
}

.rule-operator-container {
    width: 100px;
}

.query-builder.form-inline .rule-operator-container .form-control {
    max-width: 100px !important;
}

.query-builder.form-inline .rule-value-container .form-control[type="text"] {
    max-width: 305px !important;
    width: 305px;
}

.query-builder.form-inline .rule-value-container .form-control[type="number"] {
    max-width: 155px !important;
    width: 155px;
    text-align: right;
}

.query-builder .rule-value-container input:not([type="radio"]) {
    height: 34px;
    margin: 0 !important;
}

.query-builder .rule-value-container label + label {
    margin-left: 8px;
}

.query-builder .has-error .error-container {
    position: absolute;
}

.query-builder-persistency {
    min-height: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    background: #f7f8fa;
}

.btn-search-history {
    position: absolute;
    top: 30px;
    right: 20px;
    height: 28px !important;
    width: 28px;
    padding: 1px !important;
    min-height: unset !important;
}


span.RadButton_Bootstrap.rbLinkButton.rbDisabled svg {
    cursor: not-allowed !important;
}

.query-builder .rules-list > ::after, .query-builder .rules-list > ::before {
    border-color: #eee !important;
    border-style: solid;
}

.query-builder {
    max-height: 60vh;
    overflow-y: auto;
}

.btn-search-history {
    position: absolute !important;
}

.query-builder .btn-group.pull-right.group-actions button.btn.btn-xs.btn-success {
    background: transparent !important;
    color: var(--accent-color) !important;
    display: block !important;
    width: 120px !important;
}

    .query-builder .btn-group.pull-right.group-actions button.btn.btn-xs.btn-success i {
        font-size: 18px !important;
    }

.query-builder .rules-group-header .group-conditions input[name$="_cond"] {
    display: none;
}

.action-in-progress {
    opacity: .3;
}

.fa-classic, .fa-regular, .fa-solid, .far, .fas {
    font-family: "Font Awesome 6 Free" !important;
}

.btn.btn-xs.btn-remove-rule {
    background: transparent !important;
    color: var(--color-danger) !important;
}

.RadTabStrip_Bootstrap .rtsLink {
    color: var(--accent-color) !important;
}


.RadMenu .rmIcon {
    font-family: "WebComponentsIcons" !important;
}

.RadMenu .rmArrow .rmIcon {
    display: block;
    text-align: center;
    position: absolute;
    left: 48%;
}

.query-builder .rules-list > ::after {
    border-width: 0 0 0 1px;
}

.query-builder .rules-list > ::before {
    border-width: 0 0 1px 1px;
}


.t-button.rgActionButton{
    color: var(--txt-dark-4) !important;
}