@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --black: #000;
    --theme--grey: #BFBFBF;
    --greyOne: #7f7f7f;
    --greyTwo: #bfbfbf;
    --greyThree: #d9d9d9;
    --greyFour: #f2f2f2;
    --greyFive: #383838;
    --greySix: #4C4D4F;
    --greySeven: #ccc;
    --greyEight: #e7e7e7;
    --greyNine: #ddd;
    --greyTen: #4C4C4F;
    --greyEleven: #443635;
    --blueLink: #0070c0;
    --blueOne: #337ab7;
    --theme--green: #8BBA34;
    --greenLight: #92d050;
    --orange: #fab719;
    --redDark: #BF3224;
}

/*updated color version*/
:root {
    --Default-Header-Color: #132D74;
    --Link-Color: #2E7BFF;
    --Campus-Home-Link-Color: #474748;
    --Button-Color-Solid: #EEA710;
    --Button-Color-Primary-Hover: #E9960C;
    --Button-Color-Primary-Outline: #E27C05;
    --Button-Text-Color-Primary: #0E1A3B;
    --Button-Color-Secondary: #132D74;
    --Button-Text-Color-Secondary: #FFFFFF;
    --Disabled-Button-Color: #B8BFD1;
    --Disable-Button-Text-Color: #8895B3;
    --DarkGray-Button-Color: #474748;
    --Gray-Background-Color: #E2E6ED;
    --Default-Icon-Color: #474748;
    --Highlighted-Icon-Color: #3C8EFF;
    --ToggleBtn-Active-Color: #AEB0B3;
    --PerformanceScore-Badge-BGColor: #C5DDFF;
    --LightBlue: #CBD9FF;
    --Alt-Row-Color: #DDDEE0;
    --Row-SkillGroup-Color: #CBD9FF;
    --LightBlue-two: #9dc3e6;
}

.btn-default {
    color: var(--Button-Text-Color-Primary);
}

.btn-default.secondary-button {
    background-color: var(--Button-Color-Secondary);
    color: var(--Button-Text-Color-Secondary);
    border-color: var(--Button-Color-Secondary);
    text-shadow: none;
    background-image: none;
}

.btn-default:focus:not(.secondary-button) {
    outline-style: solid;
    outline-width:2px;
    outline-color: var(--Button-Color-Primary-Outline);
    border-color: var(--Button-Color-Primary-Outline);
    color: var(--Button-Text-Color-Primary);
}

.btn-default:hover:not(.secondary-button) {
    background-color: var(--Button-Color-Primary-Hover);
    border-color: var(--Button-Color-Primary-Hover);
    color: var(--Button-Text-Color-Primary);
}

body {
    font-family: 'Roboto', Tahoma, Verdana, sans-serif; /* To override bootstrap, Tahoma & Verdana for fallback/alternative when roboto not applied */
}

.maxWidth100Percent {
    max-width: 100% !important;
}

.noBorder {
    border-width: 0 !important;
}

.visibilityHidden {
    visibility: hidden;
}

.ellipsis {
    text-overflow: ellipsis;
}

.fontWeightNormal {
    font-weight: normal !important;
}

.noMargin {
    margin: 0 !important;
}

.line {
    border: 0;
    border-bottom: 1px solid #BFBFBF;
    padding: 0;
    margin: 10px 0;
    outline: none;
}

.redText {
    color: #FF0000;
}

.disbaledText {
    color: #cecece;
}

.redBg {
    background-color: #ff0000 !important;
}

.displayNone {
    display: none;
    /* do not add !important here */
}

.pointer {
    cursor: pointer;
}

.cursorDefault {
    cursor: auto !important;
}

.disabled-ui {
    opacity: 0.75;
    filter: alpha(opacity=75);
    -webkit-box-shadow: none;
    box-shadow: none;
}

.disabled-label {
    opacity: 0.50;
    filter: alpha(opacity=75);
    -webkit-box-shadow: none;
    box-shadow: none;
    cursor: not-allowed !important;
}

.checkUICover.disabled-ui, .checkUICover.disabled-ui * {
    cursor: not-allowed !important;
}

.btn--default, .btn--default:focus, .btn--default:hover,
.btn--default--solid, .btn--default--solid:focus, .btn--default--solid:hover,
.btn--default--green, .btn--default--green:focus, .btn--default--green:hover,
.btn--greySix, .btn--greySix:focus, .btn--greySix:hover {
    border-style: solid;
    border-width: 2px;
}

    .btn--default, .btn--default:focus, .btn--default:hover {
        border-color: var(--theme--grey);
        background: #fff;
        color: var(--theme--grey);
    }

    .btn--default--solid, .btn--default--solid:focus, .btn--default--solid:hover {
        border-color: var(--theme--grey);
        background: var(--theme--grey);
        color: #fff;
    }

    .btn--default--green, .btn--default--green:focus, .btn--default--green:hover {
        border-color: var(--Button-Color-Secondary);
        background: #fff;
        color: var(--Button-Color-Secondary);
    }

.btn--green--solid {
    border-color: var(--Button-Color-Solid);
    background: var(--Button-Color-Solid);
    color: var(--Button-Text-Color-Primary);
}

.btn--green--solid:disabled {
    background-color: var(--Disabled-Button-Color);
    border-color: var(--Disabled-Button-Color);
    background-image: none;
    color: var(--Disable-Button-Text-Color);
}

.btn--green--solid:focus {
    outline-style: solid;
    outline-width:2px;
    outline-color: var(--Button-Color-Primary-Outline);
    border-color: var(--Button-Color-Primary-Outline);
    color: var(--Button-Text-Color-Primary);
}

.btn--green--solid:hover {
    background-color: var(--Button-Color-Primary-Hover);
    border-color: var(--Button-Color-Primary-Hover);
    color: var(--Button-Text-Color-Primary);
}

.btn--primary, .btn--primary:focus, .btn--primary:hover {
    border-color: var(--theme--grey);
    background: var(--theme--grey);
    color: #fff;
}

.btn--greySix--solid, .btn--greySix--solid:focus, .btn--greySix--solid:hover {
    border-color: var(--DarkGray-Button-Color);
    background: var(--DarkGray-Button-Color);
    color: #fff;
}

.btn--greySix, .btn--greySix:focus, .btn--greySix:hover {
    border-color: var(--DarkGray-Button-Color);
    background: #fff;
    color: var(--DarkGray-Button-Color);
}

.btn-default.secondary-outline,
.btn-default.secondary-outline:hover,
.btn-default.secondary-outline:focus {
    border: 2px solid var(--Button-Color-Secondary);
    background: var(--Button-Text-Color-Secondary);
    color: var(--Button-Color-Secondary);
}

.linkText {
    display: inline-block;
    color: var(--Link-Color);
    text-decoration: none;
    vertical-align: sub;
    cursor: pointer;
}

    .linkText:hover,
    .linkText:focus,
    .linkText:active {
        color: var(--Link-Color);
        text-decoration: none;
        outline: none;
    }


/* popup */
.modalCustomUI .modal-header {
    /*background: var(--primary-color) !important;*/
    min-height: 75px;
    color: #fff;
    display: flex;
    padding-right: 130px !important;
    border-bottom: 0;
}

.modalCustomUI .modalCustomUI--bigTitle {
    font-family: 'Roboto', Tahoma, Verdana, sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 36px;
    line-height: 134.1%;
    margin: auto 0;
    margin-left: 30px;
}

.modalCustomUI .close {
    color: #fff !important;
    opacity: 1 !important;
    position: absolute;
    right: 20px;
    top: 30px;
    margin: 0;
    font-size: 50px !important;
    font-weight: bold !important;
    font-family: 'Roboto', Tahoma, Verdana, sans-serif;
    line-height: 0;
    outline: none;
}

.modalCustomUI--help,
.modalCustomUI--help:hover,
.modalCustomUI--help:focus {
    color: #fff !important;
    position: absolute;
    right: 80px;
    top: 21px;
    text-decoration: none;
    outline: none;
}

    .modalCustomUI--help .glyphicons {
        font-size: 28px;
    }

.modalCustomUI .modal-content {
    border-radius: 0;
    box-shadow: none;
    border: 0;
}

.modalCustomUI .modal-footer {
    padding: 12px 20px !important;
    border-color: #bfbfbf;
    margin-top: 0;
}

    .modalCustomUI .modal-footer .btn + .btn {
        margin-left: 20px;
    }

.modalCustomUI .btn, .btn--UI {
    min-width: 90px;
    height: 50px;
    border-radius: 10px;
    font-family: 'Roboto', Tahoma, Verdana, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 134.1%;
}

    .modalCustomUI .btn .glyphicons {
        vertical-align: text-top;
    }

.modalCustomUI__btn--default,
.modalCustomUI__btn--default:hover,
.modalCustomUI__btn--default:focus {
    border: 2px #BFBFBF solid;
    background: #fff;
    color: #BFBFBF;
}

.modalCustomUI__btn--default--ouline,
.modalCustomUI__btn--default--ouline:hover,
.modalCustomUI__btn--default--ouline:focus {
    border: 2px #8BBA34 solid;
    background: #fff;
    color: #8BBA34;
}

.modalCustomUI__btn--primary,
.modalCustomUI__btn--primary:hover,
.modalCustomUI__btn--primary:focus {
    border: 2px #8BBA34 solid;
    background: #8BBA34;
    color: #fff;
}

.modalCustomUI__btn--default--solid,
.modalCustomUI__btn--default--solid:hover,
.modalCustomUI__btn--default--solid:focus {
    background: #BFBFBF;
    color: #fff;
}

.modalCustomUI__content__imgHolder {
    display: inline-block;
    border: 1px #bfbfbf solid;
    width: 83px;
    height: 60px;
    border-radius: 3px;
    margin-right: 20px;
    vertical-align: middle;
}

    .modalCustomUI__content__imgHolder img {
        width: 100%;
    }

    .modalCustomUI__content__imgHolder + .glyphicons,
    .modalCustomUI__content__imgHolder + .glyphicons:hover,
    .modalCustomUI__content__imgHolder + .glyphicons:focus {
        color: #474748;
        font-size: 26px;
        vertical-align: middle;
        text-decoration: none;
        outline: none
    }

.modalCustomUI__cover {
    position: relative;
    min-height: 55px;
}

.modalCustomUI__tab {
    display: inline-flex;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
    align-items: baseline;
}

    .modalCustomUI__tab > li {
        position: relative;
    }

    .modalCustomUI__tab .dropdown-menu {
        padding: 0;
        margin: 0;
        border-radius: 0;
        border: 1px solid #BFBFBF;
        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
        top: 44px;
    }

        .modalCustomUI__tab .dropdown-menu > li > div {
            line-height: 50px;
            padding: 0 20px;
            font-size: 1.4em;
        }

.languageBtn {
    border: 2px solid #BFBFBF;
    border-bottom: 0;
    color: #000 !important;
    display: inline-block;
    padding-left: 45px;
    padding-right: 45px;
    height: 55px;
    font-family: 'Roboto', Tahoma, Verdana, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 60px;
    box-sizing: border-box;
    border-radius: 10px 10px 0px 0px;
    bottom: 0;
    z-index: 1;
    position: relative;
    background: #fff !important;
}

.modalCustomUI__cover:after {
    border-bottom: 2px #bfbfbf solid;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
}

.languageBtn:hover, .languageBtn:focus {
    color: #000;
    text-decoration: none;
    font-weight: normal !important;
}

.modalCustomUI .modal-body {
    padding: 30px; /* this padding used as var "modal_body_Padding" in DevelopmentProgram.js */
    color: #000;
}

.languageBtnPlus, .languageBtnPlus:hover, .languageBtnPlus:focus {
    color: #474748 !important;
    font-size: 26px;
    margin-left: 20px;
}

.modalCustomUI__content__block {
    padding-top: 10px;
}

    .modalCustomUI__content__block + .modalCustomUI__content__block {
        padding-top: 15px;
    }

    .modalCustomUI__content__block .form-group label {
        font-family: 'Roboto', Tahoma, Verdana, sans-serif;
        font-style: normal;
        font-weight: bold;
        font-size: 20px;
        line-height: 134.1%;
        color: #000000;
        margin: 15px 0 5px;
    }

.modalCustomUI__content {
    padding: 10px 0px 0;
    font-weight: 100;
}

.knowledgeScoreCount {
    position: absolute;
    right: 0px;
    display: flex;
    align-items: center;
}

    .knowledgeScoreCount label,
    .knowledgeScoreCount input {
        font-family: 'Roboto', Tahoma, Verdana, sans-serif;
        font-style: normal;
        font-weight: normal;
        font-size: 18px;
        line-height: 134.1%;
        color: #000000;
        margin-bottom: unset;
    }

    .knowledgeScoreCount input {
        width: 80px !important;
        height: 40px;
        left: 1260px;
        top: 184px;
        background: #FFFFFF;
        border: 1px solid #CCCCCC;
        border-radius: 4px;
        text-align: center;
        margin-left: 9px;
    }

.modalCustomUI .form-control {
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    box-shadow: none;
    height: 45px;
    font-size: 18px;
    line-height: 120%;
    font-weight: 400;
}

.modalCustomUI textarea.form-control {
    width: 100%;
    max-width: 100%;
    /*
    max-height: 60px;
    min-height: 60px;
    overflow: hidden;    
    user-select: none;
    */
    min-width: 100%;
    height: unset !important;
}

.characterCount {
    font-family: 'Roboto', Tahoma, Verdana, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 134.1%;
    color: #ccc;
    margin-top: 7px;
}

.modalCustomUI--toggleTextBox,
.modalCustomUI--toggleTextBox:hover,
.modalCustomUI--toggleTextBox:focus {
    float: right;
    margin: 5px 0 0 15px;
    font-size: 20px;
    color: #ccc;
    text-decoration: none;
}

.modalCustomUI__content__block--grayBackground {
    position: relative;
    clear: both;
    padding: 0 0 10px;
}

    .modalCustomUI__content__block--grayBackground:before {
        content: "";
        position: absolute;
        left: -30px;
        right: -30px;
        top: 0;
        bottom: 0;
        background: #f2f2f2;
    }

    .modalCustomUI__content__block--grayBackground > * {
        position: relative;
        z-index: 1;
    }

.modalCustomUI__block__subHeading {
    font-family: 'Roboto', Tahoma, Verdana, sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 30px;
    line-height: 134.1%;
    color: #000000;
    margin: 0 0 25px 0;
    padding: 5px 0px 10px;
    border-bottom: 1px solid #BFBFBF;
}

.modalCustomUI .form-group .checkbox,
.modalCustomUI .form-group .radio {
    font-family: 'Roboto', Tahoma, Verdana, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 134.1%;
    vertical-align: middle;
    margin: 0;
}

    .modalCustomUI .form-group .checkbox input[type="checkbox"],
    .modalCustomUI .form-group .checkbox .checkBtn,
    .modalCustomUI .form-group .radio input[type="radio"],
    .modalCustomUI .form-group .radio .radioBtn,
    .trueFalseAnswerCheck__button,
    .checkboxBtn {
        width: 15px;
        height: 15px;
        background: #FFFFFF;
        border: 1px solid #BFBFBF;
        border-radius: 0;
        display: inline-block;
        margin: 0 20px 0 0;
        position: relative;
        cursor: pointer;
    }

    .modalCustomUI .form-group .checkbox label,
    .modalCustomUI .form-group .radio label {
        padding: 0;
        margin: 10px 0 5px;
        min-height: unset;
        cursor: auto;
    }

.modalCustomUI .form-group input[type="checkbox"]:checked:after, input[type="checkbox"].checkboxBtn:checked:after, .trueFalseAnswerCheck__button.selAnswer:after {
    content: "";
    position: absolute;
    left: 1px;
    top: 0;
    bottom: 5px;
    margin: auto;
    width: 18px;
    height: 10px;
    border: 4px #7f7f7f solid;
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg);
}

.modalCustomUI .form-group input[type="checkbox"]:before, input[type="checkbox"].checkboxBtn:before, .trueFalseAnswerCheck__button:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    background: white;
    margin: auto;
    bottom: 1px;
    border: 1px #ccc solid;
}

.modalCustomUI .form-group .checkbox > label,
.modalCustomUI .form-group .radio > label {
    display: flex;
    align-items: center;
}

    .modalCustomUI .form-group .radio > label input[type="radio"],
    .modalCustomUI .form-group .radio > label .radioBtn {
        margin-right: 20px;
        width: 24px;
        border: 0;
    }

.modalCustomUI .multiQuestion .radioButtonFalse,
.modalCustomUI .multiQuestion .radioButtonTrue,
.trueFalseAnswer__button {
    width: 24px;
    height: 24px;
    display: inline-block;
    position: relative;
    margin-top: 0;
}

    .modalCustomUI .form-group input[type="radio"]:before,
    .modalCustomUI .form-group .radioBtn:before,
    .modalCustomUI .multiQuestion .radioButtonFalse:before,
    .modalCustomUI .multiQuestion .radioButtonTrue:before,
    .trueFalseAnswer__button:before {
        content: "";
        position: absolute;
        width: 24px;
        height: 24px;
        border: 1px solid #C4C4C4;
        border-radius: 50%;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        background: #fff
    }

    .modalCustomUI .form-group input[type="radio"]:checked:after,
    .modalCustomUI .form-group .radioBtn.radioButtonTrue:after,
    .modalCustomUI .multiQuestion .radioButtonTrue:after,
    .trueFalseAnswer__button.selAnswer:after {
        content: "";
        position: absolute;
        background: var(--Button-Color-Secondary);
        width: 18px;
        height: 18px;
        border-radius: 50%;
        top: 0;
        bottom: 0;
        left: 3px;
        margin: auto;
    }

.modalCustomUI__block__linkBtn,
.modalCustomUI__block__linkBtn:hover,
.modalCustomUI__block__linkBtn:focus {
    display: inline-block;
    font-family: 'Roboto', Tahoma, Verdana, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 134.1%;
    color: #0070C0;
    text-decoration: none;
    outline: none;
}

.modalCustomUI__content__block--grayBackground .modalCustomUI__block__linkBtn {
    float: right;
}

.btnLink {
    display: inline-flex;
    background: #474748;
    border: 2px solid #474748;
    height: 40px;
    border-radius: 10px;
    color: #fff !important;
    font-family: inherit;
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 134.1%;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    margin: 10px 0 10px;
    cursor: pointer;
}

    .btnLink,
    .btnLink:hover,
    .btnLink:focus {
        color: #fff !important;
        text-decoration: none !important;
        font-weight: 400 !important;
    }

        .btnLink .glyphicon {
            margin-right: 20px;
            font-size: 25px;
        }




.modalCustomUI .form-control {
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    box-shadow: none;
    height: 45px;
    font-size: 18px;
    line-height: 120%;
    font-weight: 400;
}

.modalCustomUI textarea.form-control {
    width: 100%;
    max-width: 100%;
    /*
    max-height: 60px;
    min-height: 60px;
    overflow: hidden;    
    user-select: none;
    */
    min-width: 100%;
    height: unset !important;
}

.modalCustomUI__imgHolder {
    display: inline-block;
    border: 1px #bfbfbf solid;
    width: 83px;
    height: 60px;
    border-radius: 3px;
    margin-right: 20px;
    vertical-align: middle;
}

    .modalCustomUI__imgHolder img {
        width: 100%;
        min-width: 83px;
        height: 55px;
    }

    .modalCustomUI__imgHolder + .glyphicons,
    .modalCustomUI__imgHolder + .glyphicons:hover,
    .modalCustomUI__imgHolder + .glyphicons:focus {
        color: #474748;
        font-size: 26px;
        vertical-align: middle;
        text-decoration: none;
        outline: none
    }

.modalCustomUI__data .modalCustomUI__imgHolder {
    height: unset;
}

.modalCustomUI__data .modalCustomUI__imgHolder + .glyphicons + .modalCustomUI__imgHolder,
.imgThumbCoverLayout + .imgThumbCoverLayout{
    margin-left: 25px;
}

.modalCustomUI__data .modalCustomUI__imgHolder + .glyphicons {
    position: relative;
    top: 25px;
}

.modalCustomUI__linkBtn,
.modalCustomUI__linkBtn:hover,
.modalCustomUI__linkBtn:focus {
    display: inline-block;
    font-family: 'Roboto', Tahoma, Verdana, sans-serif;
    font-style: normal;
    font-weight: normal !important;
    font-size: 18px;
    line-height: 134.1%;
    color: #0070C0 !important;
    text-decoration: none !important;
    outline: none !important;
}

.modalCustomUI .form-group label, .labelBig {
    font-family: 'Roboto', Tahoma, Verdana, sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 134.1%;
    color: #000000;
    margin: 15px 0 5px;
}

.checkBtn img {
    margin: -4px 0 0 -1px;
}

label.resetMargin {
    margin: 0 !important;
}

    label.resetMargin .multiQuestion__choices {
        margin-bottom: 20px;
    }



/* Modal in modal */
.modalInModal {
    z-index: 1053;
}

    .modalInModal:before, .actionModal:before {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        height: auto !important;
        display: block;
        background: #000;
        opacity: .75;
    }

    .modalInModal .modal-dialog, .actionModal .modal-dialog {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modalInModal .modal-header h3 {
        font-family: 'Roboto', Tahoma, Verdana, sans-serif;
        font-style: normal;
        font-weight: normal;
        font-size: 36px;
        line-height: 134.1%;
        color: #FFFFFF;
        padding: 0 0 0 30px;
        margin: auto 0;
    }

    .modalInModal .modal-footer {
        border: 0;
        margin-left: 10px;
        margin-right: 10px;
    }
/* Modal in modal end */

.modalCustomUI__scroll {
    height: calc(100vh - 355px);
    overflow: auto;
    margin-right: -30px;
    padding: 5px 30px 30px 30px;
}

.modalCustomUI--grayBackground {
    position: relative;
    padding: 5px 0 15px;
    margin: 10px 0;
}

    .modalCustomUI--grayBackground:before {
        content: "";
        position: absolute;
        left: -30px;
        right: -30px;
        top: 5px;
        bottom: 0;
        background: #f2f2f2;
    }

    .modalCustomUI--grayBackground > * {
        position: relative;
        z-index: 1;
    }

.modalCustomUI--toggleTextBox,
.modalCustomUI--toggleTextBox:hover,
.modalCustomUI--toggleTextBox:focus {
    float: right;
    margin: 5px 0 0 15px;
    font-size: 20px;
    color: #ccc !important;
    text-decoration: none;
    font-weight: normal;
}

.textTools {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: flex-end;
    position: absolute;
    right: 15px;
    top: -25px;
}

    .textTools > li {
        padding-left: 10px;
    }

        .textTools > li a,
        .textTools > li a:hover,
        .textTools > li a:focus,
        .textTools > li a:active {
            font-size: 15px;
            color: #474748;
            text-decoration: none;
            font-weight: normal;
        }

.btnDescription {
    font-size: 18px;
}

    .btnDescription .btnLink {
        margin-right: 15px;
        vertical-align: sub;
    }

    .btnDescription strong {
        font-size: 24px;
        margin-right: 5px;
    }

.modalCustomUI--grayBackground .btnDescription:first-child {
    margin-top: 15px;
}

.modalCustomUI .form-group .subLabel {
    font-weight: normal;
    margin: 10px 0 0;
}

.multiQuestion .multiQuestion__correct,
.multiQuestion .multiQuestion__choices {
    width: 100%;
}

    .multiQuestion .multiQuestion__correct label,
    .multiQuestion .multiQuestion__choices label {
        cursor: auto;
    }

.multiQuestion .multiQuestion__correct {
    max-width: 73px;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.modalCustomUI .multiQuestion .radio > label,
.modalCustomUI .multiQuestion .checkbox > label {
    align-items: baseline;
    display: flex;
}

.modalCustomUI .multiQuestion label .multiQuestion__correct input[type="radio"],
.modalCustomUI .multiQuestion label .multiQuestion__correct .radioBtn,
.modalCustomUI .multiQuestion label .multiQuestion__correct input[type="checkbox"],
.modalCustomUI .multiQuestion label .multiQuestion__correct .checkBtn {
    margin: 0 auto;
    position: absolute;
    top: -4px;
    left: 0;
    right: 0;
}

.modalCustomUI .shortAnswerDiv .radio > label, .d-inlineFlex {
    display: inline-flex
}

.modalCustomUI .multiQuestion .radio + .radio label,
.modalCustomUI .multiQuestion .checkbox + .checkbox label {
    margin-bottom: 20px;
}

.modalCustomUI .multiQuestion .radio + .radio:last-child label,
.modalCustomUI .multiQuestion .checkbox + .checkbox:last-child label {
    margin-bottom: 0px;
}

.matchTableUI {
    width: 100%;
}

    .matchTableUI > tbody > tr > td {
        width: 50%;
        padding: 0 15px 20px;
    }

        .matchTableUI > tbody > tr > td:first-child {
            padding-left: 0;
        }

        .matchTableUI > tbody > tr > td:last-child {
            padding-right: 0;
        }

    .matchTableUI > tbody > tr:first-child > td {
        padding-bottom: 0;
    }

.customSelect > div {
    line-height: 30px;
    padding-right: 10px;
    height: 30px;
    overflow: hidden;
}

    .customSelect > div.dropDownArrow {
        position: absolute;
        right: 5px;
        top: 23px;
        padding: 0;
        margin: 0;
        height: 8px;
        width: 12px;
    }

.customSelect {
    position: relative;
    cursor: default;
}

    .customSelect.optionOne + .DivLangOptions > div {
        padding: 4px 4px !important;
    }

        .customSelect.optionOne + .DivLangOptions > div + div {
            border-top: 1px #d8d8d8 solid;
        }

.questionBankQuery .multiQuestion label .multiQuestion__correct .radioBtn, .questionBankQuery .multiQuestion label .multiQuestion__correct .checkBtn {
    top: 5px !important;
}

/* ActionModal */
.actionModal .modal-dialog {
    height: 100%;
    margin: 0 auto;
    padding-top: 30px;
    padding-bottom: 30px;
}

.actionModal .modal-content {
    width: 90%;
    border-radius: 0;
}

.actionModal .modal-header {
    background: transparent !important;
    text-align: center;
    border: 0;
}

    .actionModal .modal-header h3 {
        font-weight: bold;
        color: red;
        margin: 35px 0 5px;
        font-size: 25px;
    }

.actionModal .modal-footer {
    border: 0;
    display: flex;
    justify-content: space-between;
    padding: 5px 20px 20px;
}

    .actionModal .modal-footer .btn {
        height: 45px;
        font-size: 18px;
        flex-grow: 1;
        border-radius: 10px;
    }

.actionModal .modal-body {
    font-size: 18px;
    padding: 20px 20px 15px;
}

.actionModal .modal-footer .btn + .btn {
    margin-left: 15px;
}

.modalCustomUI__btn--red, .modalCustomUI__btn--red:hover, .modalCustomUI__btn--red:focus {
    border: 2px #ff0000 solid;
    background: #ff0000;
    color: #fff;
}
/* ActionModal */
.modalCustomUI div.form-control {
    line-height: 35px;
}

.modalCustomUI div.form-group .dropDownArrow {
    margin-top: 0;
}

.examModal.modalCustomUI .form-group .dropDownArrow {
    background-image: none;
    margin-right: -2px;
}

.examModal.modalCustomUI .form-group .dropDownArrow:after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border: 2px #000 solid;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg);
    right: 3px;
}

#allowProgressDiv {
    margin-right: 15px;
}


.bankQuestion__grid {
    width: 100%;
    border: 0;
}

.smallModal .modal-dialog {
    width: 450px !important;
}

.smallModal .modal-content {
    min-width: unset !important;
    border-radius: 0;
    border: 0;
}

.smallModal .modal-footer {
    padding-right: 5px;
    padding-left: 5px;
    margin-bottom: 4px;
}

/* Temporary fix for existing  */
.modal-open .temporaryReset .sidenav {
    z-index: unset;
    /*min-height: 1400px !important;*/
}

    .modal-open .temporaryReset .sidenav + .grid:before {
        /*background: transparent;*/
        z-index: -1;
    }

.temporaryReset .sidenav {
    z-index: 2;
    min-height: unset !important;
}

    .temporaryReset .sidenav + .grid:before {
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        background: var(--primary-color);
        z-index: 1;
    }
/* Temporary fix for existing  */


.checkUICover {
    display: inline-block;
    position: relative;
    width: 18px;
    height: 18px;
    border: 1px var(--greyOne) solid;
    margin-right: 10px;
    vertical-align: text-top;
}

    .checkUICover input[type="checkbox"] {
        margin: 0;
        width: 16px;
        height: 16px;
        position: relative;
        z-index: 9;
        cursor: pointer;
        opacity: 0
    }

        .checkUICover input[type="checkbox"]:checked + .checkUIBtn:after {
            content: "";
            position: absolute;
            width: 12px;
            height: 7px;
            border: 3px var(--greyOne) solid;
            border-width: 0 0 3px 3px;
            top: 3px;
            left: 1px;
            transform: rotate(-45deg);
        }

.radioUICover {
    display: inline-block;
    position: relative;
    width: 22px;
    height: 22px;
    border: 2px var(--greyOne) solid;
    margin-right: 10px;
    vertical-align: text-top;
    border-radius: 50%;
}

    .radioUICover input[type="radio"] {
        margin: 0;
        width: 18px;
        height: 18px;
        opacity: 0
    }

        .radioUICover input[type="radio"]:checked + .radioUIBtn:after {
            content: "";
            position: absolute;
            width: 14px;
            height: 14px;
            background: var(--greyOne);
            border-radius: 100%;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }

.redBorder {
    border-color: #FF0000 !important;
}

.hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--greySeven);
    margin: 1em 0;
    padding: 0;
}

.modalInModalNew:before {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: auto !important;
    display: block;
    background: #000;
    opacity: .5;
}

.navUI__settings__list__KnowledgeScore span {
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 50%;
    display: flex;
    color: #7F7F7F;
    cursor: pointer;
    background: #D9D9D9;
    align-items: center;
    justify-content: center;
}

.navUI__settings__list__KnowledgeScore {
    margin-right: 15px;
}

.headerChangedUI li.KnowledgeScoreAlt {
    margin: 0;
}

.headerChangedUI .navUI__settings__list__KnowledgeScore span {
    margin-right: 15px;
}

.talentlite {
    opacity: 0.70 !important;
    filter: alpha(opacity=75) !important;
    cursor: not-allowed !important;
}

.CampusHomeBody .talentlite {
    opacity: 0.50 !important;
    filter: alpha(opacity=50) !important;
}

.ban-cursor {
    cursor: not-allowed !important;
}

.ban-cursor2 {
    cursor: not-allowed !important;
    display: inline-block;
    float: right;
}

.disabled-pointer {
    pointer-events: none;
}

.disabled-arrow {
    opacity: 0.50 !important;
    filter: alpha(opacity=75) !important;
}

.div-wrapper {
    display: inline-block;
}

.div-drop-radius {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

:root {
    --reportSubTitle: 75px;
    --fixedChartWidth: calc((100vw / 4));
    --fixedChartWidthBar: calc((100vw / 2));
}

.reservedHeight, .reservedHeight-barChart, .reservedHeight-subtitleLoad, .reservedHeight-title, .reservedHeight-longLegend, .reservedHeight-subtitleLoad1, .reservedHeight-subtitleLoad2, .reservedHeight-subtitleLoad3 {
    margin-bottom: 15px;
    position: relative;
}

.reservedHeight {
    height: calc(var(--fixedChartWidth) / 1.3);
}

.reservedHeight-barChart {
    height: calc((var(--fixedChartWidthBar) / 3) + 15px);
}

.reservedHeight-subtitleLoad {
    height: calc(var(--fixedChartWidth) / 4.3);
}

.reservedHeight-title {
    height: 70px;
}

    .reservedHeight-title #ReportTitle {
        display: inline-flex;
        align-items: center;
        height: 100%;
        line-height: normal;
        margin-left: 5px;
    }

.reservedHeight__loader {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(255,255,255, 1);
    z-index: 9;
}

    .reservedHeight__loader > span {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 24px;
        height: 24px;
        margin: auto;
        background-image: url(/images/languageLoader.gif);
        background-position: center;
        background-repeat: no-repeat;
    }

        .reservedHeight__loader > span:after {
            content: "Loading";
            position: absolute;
            top: 100%;
            left: -50%;
            right: 0;
            text-align: center;
        }

.ManageReportsBody .reporttitle .glyphicons-new-window {
    float: right;
    margin-left: 10px;
    margin-top: -0px;
}

.ManageReportsBody .reporttitle #ReportDateRange {
    white-space: nowrap;
}

.reservedHeight-subtitleLoad1 {
    height: 30px;
}

.reservedHeight-subtitleLoad2 {
    height: 50px;
}

.reservedHeight-subtitleLoad3 {
    height: 75px;
}

.ManageReportsBody .reporttitle {
    align-items: center;
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-left: 0;
}

.reservedHeight-title .reporttitle__align {
    display: inline-flex;
    align-items: end;
    margin-left: 15px;
}

.reservedHeight-barChart.reportsubtitleOn, .reservedHeight.reportsubtitleOn {
    height: calc(((var(--fixedChartWidthBar) / 3) + 15px) + 50px);
}

.lightgreybox .locationsearch > div, .lightgreybox .personsearch > div {
    display: flex;
    margin-right: 15px;
}

.lightgreybox .locationsearch .locationsearch_glyphicon, .lightgreybox .personsearch .personsearch_glyphicon {
    width: unset;
    color: #474748;
}

.printQRCHeader img {
    float: left;
}

.printQRCHeader h1, .positionRelative {
    position: relative;
}

.printQRCTitle {
    padding: 10px 0px 0px 132px;
    font-family: 'Roboto', Tahoma, Verdana, sans-serif;
    font-size: 35px;
    font-weight: normal;
}

.titleDescriptionQRC {
    height: 100%;
}

    .titleDescriptionQRC h2 {
        font-family: 'Roboto', Tahoma, Verdana, sans-serif;
        font-size: 30px;
        word-wrap: break-word;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .titleDescriptionQRC p {
        font-family: 'Roboto', Tahoma, Verdana, sans-serif;
        font-size: 23px;
        word-wrap: break-word;
        word-break: break-word;
        overflow-wrap: break-word;
    }

.tooltip, .popover {
    font-family: 'Roboto', Tahoma, Verdana, sans-serif;
}

#searchAllEmployees #searchAllEmployeesButton.btn--default--solid, #searchAllEmployees #searchAllEmployeesButton.btn--default--solid:focus, #searchAllEmployees #searchAllEmployeesButton.btn--default--solid:hover,
#saveGoal.btn--default--solid, #saveGoal.btn--default--solid:focus, #saveGoal.btn--default--solid:hover,
#saveCompetencyBuilder.btn--default--solid, #saveCompetencyBuilder.btn--default--solid:focus, #saveCompetencyBuilder.btn--default--solid:hover,
#saveCopiedDevelopmentProgramCompetencies.btn--default--solid, #saveCopiedDevelopmentProgramCompetencies.btn--default--solid:focus, #saveCopiedDevelopmentProgramCompetencies.btn--default--solid:hover,
.progressGrid__left #searchButton.btn--default--solid, .progressGrid__left #searchButton.btn--default--solid:focus, .progressGrid__left #searchButton.btn--default--solid:hover,
#addProgramLogModal #saveProgramLog.btn--default--solid, #addProgramLogModal #saveProgramLog.btn--default--solid:focus, #addProgramLogModal #saveProgramLog.btn--default--solid:hover,
#addFeedbackModal #saveFeedback.btn--default--solid, #addFeedbackModal #saveFeedback.btn--default--solid:focus, #addFeedbackModal #saveFeedback.btn--default--solid:hover {
    border-color: var(--Disabled-Button-Color);
    background: var(--Disabled-Button-Color);
    color: var(--Disable-Button-Text-Color);
}

#copyGoal.btn--default, #copyGoal.btn--default:focus, #copyGoal.btn--default:hover,
#copyCompetencyBuilder.btn--default, #copyCompetencyBuilder.btn--default:focus, #copyCompetencyBuilder.btn--default:hover,
#deleteProgramLog.btn--default, #deleteProgramLog.btn--default:focus, #deleteProgramLog.btn--default:hover,
#deleteFeedback.btn--default, #deleteFeedback.btn--default:focus, #deleteFeedback.btn--default:hover {
    border-color: var(--Disable-Button-Text-Color);
    background: #fff;
    color: var(--Disable-Button-Text-Color);
}

.link-dialog .modal-footer .note-link-btn.disabled, .link-dialog .modal-footer .note-link-btn.disabled:hover, .link-dialog .modal-footer .note-image-btn.disabled, .link-dialog .modal-footer .note-image-btn.disabled:hover,
.image-dialog .modal-footer .note-link-btn.disabled, .image-dialog .modal-footer .note-link-btn.disabled:hover, .image-dialog .modal-footer .note-image-btn.disabled, .image-dialog .modal-footer .note-image-btn.disabled:hover {
    background-color: var(--Button-Color-Solid);
    background-image: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
}

.link-dialog .modal-footer .note-link-btn, .link-dialog .modal-footer .note-image-btn,
.image-dialog .modal-footer .note-link-btn, .image-dialog .modal-footer .note-image-btn {
    background-color: var(--Button-Color-Solid);
    background-image: none;
    border-color: var(--Button-Color-Solid);
    text-shadow: 0 1px 0 #fff;
}

    .link-dialog .modal-footer .note-link-btn:hover, .link-dialog .modal-footer .note-image-btn:hover,
    .image-dialog .modal-footer .note-link-btn:hover, .image-dialog .modal-footer .note-image-btn:hover {
        background-color: var(--Button-Color-Solid);
        background-position: 0 -15px;
        color: #ffffff;
        border-color: #adadad;
        text-decoration: none;
    }

.dropdownUI {
    padding: 5px 0;
    margin: 0;
    border-radius: 0;
    border: 1px solid #BFBFBF;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
}

    .dropdownUI > li > a {
        font-size: 16px;
        line-height: 38px;
        color: #000000;
        padding: 0 15px;
        position: relative;
    }

.navUI__settings__list__helpLink__trigger {
    background: transparent;
    border: 0;
    display: flex;
    align-items: center;
}

    .navUI__settings__list__helpLink__trigger i.material-icons-outlined,
    .navUI__settings__list__helpLink__trigger i.material-icons,
    .navUI__settings__list__helpLink__trigger i.glyphicons,
    .navUI__settings__list__helpLink__trigger i + .caret {
        color: #fff;
    }

.headerChangedUI .dropdown-menu .navUI__settings__list__helpLink__trigger i.material-icons-outlined,
.headerChangedUI .dropdown-menu .navUI__settings__list__helpLink__trigger i.material-icons,
.headerChangedUI .dropdown-menu .navUI__settings__list__helpLink__trigger i.glyphicons,
.headerChangedUI .dropdown-menu .navUI__settings__list__helpLink__trigger i + .caret {
    color: #000;
}

.navUI__settings__list__helpLink {
    margin: 0 5px 0 15px;
}

.headerChangedUI .navUI__settings__list__helpLink {
    margin-right: 15px;
}

.headerChangedUI .navUI__settings__list > li.navUI__settings__list__helpLink.helpLinkAlt {
    margin-left: unset;
}

.dropdown-menu.dropdownUI > li {
    padding-left: unset;
}

.navUI__settings__list__helpLink .dropdownUI {
    top: 44px;
    right: -10px;
    left: auto;
}

.dropdownUI > li > a:hover {
    background: transparent;
}

li.navUI__settings__list__helpLink {
    height: 65px;
    display: flex;
    align-items: center;
}

li.helpLinkAlt {
    border-left: 1px solid white;
    border-right: 1px solid white;
    width: 45px;
    justify-content: center;
}

li.KnowledgeScoreAlt {
    margin-left: 15px;
}

.admincontrols.containercover {
    padding-right: 15px;
}

.campussetupsearch .inner-addon .glyphicon.glyphicon-search {
    position: absolute;
    /* pointer-events: none; */
    color: red;
    padding: 10px;
    margin-top: 0px;
}

.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark,
.well-custom button.span-right span.glyphicon {
    color: #474748;
}

.modal-lg--fullscreen--real {
    width: calc(100vw - 40px);
    margin: 20px auto;
}

    .modal-lg--fullscreen--real .modal-body {
        min-height: 300px;
        height: calc(100vh - 196px);
    }

.bootbox.modal:before {
    height:unset;
}

/*table scroll*/
.table--UI--tbodyScroll thead tr, .table--UI--tbodyScroll tbody tr {
    display: flex;
}

.table--UI--tbodyScroll tbody {
    max-height: calc(100vh - 300px);
    overflow: auto;
}

.table--UI--tbodyScroll {
    display: flex;
    flex-direction: column;
    min-width: 715px;
}

.table--UI--tbodyScroll thead tr th, .table--UI--tbodyScroll tbody tr td {
    width: 100%;
}

.table--UI--tbodyScroll thead tr th.table--UI__action--scrollFix {
    margin-right: 20px;
}

/*table scroll end */

/* Mobile first bootstrap break points*/
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .modal-lg--fullscreen {
        width: 90%;
    }
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .sidenav + .forFixedLeft:before {
        /* width: 25%;*/ /* updated to make left bar fixed */
        width: 195px !important;
    }
    /* below to make left width fixed */
    #mainContainer .forFixedLeft {
        /*width: calc(100% - 195px) !important;*/
    }
    /* below to make left width fixed */
    #mainContainer.temporaryReset .forFixedLeft, .temporaryReset .forFixedLeft {
        width: calc(100% - 195px) !important;
    }

    #mainContainer.temporaryReset .sidenav, .temporaryReset .sidenav, .leftSideNav {
        width: 195px !important;
    }

    .UserDashboard .header .leftSideNav, .gridbreak .leftSideNav, .learnerlist .leftSideNav {
        width: 275px !important;
    }

    .ManageContent .header.leftSideNav, .ManageContentRibbonSection .col-xs-3.leftSideNav, .contentcourses .leftSideNav {
        width: 400px !important;
    }

    .ManageContent .col-xs-2.leftSideNav, .ManageContentRibbonSection .col-xs-2.leftSideNav, .contentcourses .CourseType.leftSideNav {
        width: 120px !important;
    }

    .leftSideNav.logoCell {
        width: 100px !important;
    }

    #mainContainer.temporaryReset .logoCell + .forFixedLeft, .temporaryReset .logoCell + .forFixedLeft {
        width: calc(100% - 100px) !important;
    }

    .leftSideNav.logoCell .brandSmallLogo {
        padding: 5px;
    }

    /* above to make left width fixed */


    .modal-lg--fullscreen .modal-body {
        height: calc(100vh - 270px);
        overflow: auto;
    }

    .modalInModal .modal-dialog {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }

    .modalInModal .modal-body {
        /*height: calc(100vh - 460px);
        min-height:400px;*/
        max-height: calc(100vh - 320px);
        padding-bottom: 0;
        overflow: auto;
    }

    .modalInModal .modal-content {
        min-width: 900px;
        width: calc(100vw - 100px);
    }

    .modalInModal .modal-header {
        padding-left: 0 !important;
    }

    .brandSmallLogo.topNavHeader,
    .brandSmallLogo.topNavHeader + .navUI.smallLogoSection,
    #RightSection .topRightNavHeader {
        height: 65px !important;
    }
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .sidenav + .temporaryReset:before {
        /*width: 16.66666667%;*/ /* updated to make left bar fixed */
        width: 195px;
    }

    .modalInModal .modal-content {
        min-width: 1100px;
        width: calc(100vw - 100px);
    }
}

/* Desktop first bootstrap break points*/
/* Small devices (tablets, 768px and up) */
@media (max-width: 767px) {
    .textTools {
        position: static;
        justify-content: flex-start;
    }

        .textTools > li {
            padding: 10px 10px 10px 0;
        }

    .modalCustomUI .modal-dialog {
        display: block;
    }

    .modalCustomUI:before {
        display: inline-block;
        height: unset;
        margin: unset;
        visibility: unset;
        content: unset;
    }

    .modalCustomUI .modal-footer {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

        .modalCustomUI .modal-footer .btn {
            width: 80%;
            margin: 0 auto 15px !important;
            height: 50px;
            line-height: 100%;
        }

    .modalCustomUI.modalInModal:before {
        content: "";
    }
}
/* Medium devices (desktops, 992px and up) */
@media (max-width: 991px) {
    .knowledgeScoreCount {
        position: static;
        margin-bottom: 10px;
        padding-left:10px;
    }

    .reservedHeight-longLegend {
        height: calc(var(--fixedChartWidth) * 1.15) !important;
    }
}

@media (max-width: 1099px) {
    .reservedHeight-longLegend {
        height: calc(var(--fixedChartWidth) / 1.05) !important;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (max-width: 1199px) {
    .modalCustomUI__block__linkBtn, .modalCustomUI__block__linkBtn:hover, .modalCustomUI__block__linkBtn:focus {
        margin-top: 10px;
    }

    .modalCustomUI__content__block--grayBackground .modalCustomUI__block__linkBtn {
        float: none;
    }

    .reservedHeight-longLegend {
        height: calc(var(--fixedChartWidth) / 1.1);
    }
}