@import url("/InnectoUIElements/Theme.Innecto.css?17747");

@import url("/InnectoUIElements/Theme.Innecto.css?17747");

:root {
  --url-evaluate-logo: url('/InnectoHub/EVALUATE.png?17751');
  --url-innecto-logo: url('/InnectoHub/idlogo.png?17751');
  --color-evaluate-button: var(--color-primary-evaluate);
}

.ba-theme {
        --url-evaluate-logo: url('/InnectoHub/img/Logo_BA.png?17751');
        --url-innecto-logo: url('/InnectoHub/img/Logo_BA.png?17751');
        --color-evaluate-button: var(--color-primary-evaluate);

        .application-name img {
            display: none;
        }

        .heading2,
        .TableRecords .TableRecords_Header,
        .summary-card-selected,
        .HeatmapIncumbentsCount,
        .EvaluateHeatMapRoleCount,
        .evaluation-header-linked-info {
            color: var(--color-neutral-1);
        }
        
        .HeatMapRangeEmpty div,
        .HeatMapRange1 div {
            color: var(--color-text-primary);
        }

        .InnectoModeEvaluate,
        .InnectoModeDefault {
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            margin-right: var(--space-base);
        }
}

/* Colour overrides for Products */
/* ============================= */

/* The Advance, Evaluate, Paylab and RolesHub classes are applied in the ExtendedClass
   property for the LayoutMenuTop web block used in the Layout web block */
   
/* ADVANCE */
/* ======= */
   
.Button.Advance
{
    background-image: url("/InnectoHub/ID Button.png?17751");
    color: var(--color-primary-text);
    background-size: cover;
    background-color: var(--color-primary-advance);
}

.Button.Advance:disabled,
.Button.AdvancePrimary:disabled,
.Button.AdvanceDisabled {
    color: var(--color-neutral-6);
    background-color: var(--color-neutral-6);
}

.Button.AdvancePrimary
{
    background-image: url("/InnectoHub/ID Button.png?17751");
    color: var(--color-primary-text);
    background-size: cover;
    background-color: var(--color-primary-advance);
}

.Advance .button-group .btn {
    border-color:  var(--color-primary-advance);
    color: var(--color-primary-advance);
}

.Advance .button-group .radio-button {
    color:  var(--color-primary-advance);
    background-color:  var(--color-primary-text-inverse);
}
    
.Advance .button-group input[type="radio"]:checked + .btn {
    background-color: var(--color-primary-advance);    
}

.Advance .InnectoHeaderIcon {
    background-image: url("/InnectoHub/ADVANCE.png?17751");
    background-size: cover;
}

.Advance .InnectoHeader {
    border-color: var(--color-primary-advance);
}

.Advance .TitleDiv {
    background-color: var(--color-primary-advance);
}

.Advance .header .Menu_TopMenu:hover,
.Advance .header .Menu_TopMenu.Menu_TopMenuActive {
    border-bottom: var(--border-size-m) solid var(--color-primary-advance);
}

.Advance .Menu_TopMenuActive > div a,
.Advance .Menu_TopMenuActive > div a:visited,
.Advance .Menu_TopMenuActive > div a:hover,
.Advance .Menu_TopMenu:hover.Menu_TopMenuActive > div a {
    color: var(--color-primary-advance);
}

.Advance .header .Menu_TopMenu.Menu_TopMenuActive {
    color: var(--color-primary-advance);
}

.Advance .toggle-button.toggle-button-checked {
    background-color: var(--color-primary-advance);
    border-color: var(--color-primary-advance);
} 

.Advance .select,
.Advance .select:focus {
    border-color: var(--color-primary-advance);
}

.Advance .tabs-header-item.active {
    border-color: var(--color-primary-advance);
}

.Advance .checkbox:checked:before, .TableRecords .TableRecords_Header [type="checkbox"]:checked:before {
    background-color: var(--color-primary-advance);
    border-color: var(--color-primary-advance);
}

.Advance .radio-button:checked:before {
    background-color: var(--color-neutral-0);
    border: 6px solid var(--color-primary-advance);
}

.Advance .input,
.Advance .input:focus {
    border-color: var(--color-primary-advance);
}

.Advance .input.Not_Valid,
.Advance .input.Not_Valid:focus {
    border-color: var(--color-error);
}

.Advance .TableRecords .TableRecords_Header,
.Advance .EditableTable thead th {
    background: var(--color-primary-advance) var(--color-primary-lightest);
}

.Advance a,
.Advance a:visited {
    color: var(--color-primary-advance);
}

.Advance .accordion-item .accordion-item-icon {
    color: var(--color-primary-advance);
}

.Advance .accordion-item.is--open {
    border-top-color: var(--color-primary-advance);
}

.Advance .card {
    border-color: var(--color-primary-advance);
}

.Advance .separator {
    background-color: var(--color-primary-advance);
}

.Advance .TableRecords .TableRecords_Header.SortColumns_Sorted,
.Advance .TableRecords .TableRecords_Header.SortColumns_Sortable:hover {
    color: unset;
}

/* Add to Powerpoint button */
.Advance .floating-actions-button {
    border: 1px solid var(--color-primary-advance);
    background-color: white
}

/* Sliders */
.Advance .range-slider .noUi-connect{
    background: var(--color-primary-advance);
}

/* Evaluate */
/* ======== */

.Evaluate a,
.Evaluate a:visited {
    color: var(--color-primary-evaluate);
}
    
.Evaluate a[disabled="disabled"] {
    color: var(--color-neutral-6);
}

.Evaluate .separator {
    background-color: var(--color-primary-evaluate);
}

.Evaluate .Button:disabled,
.Button.Evaluate:disabled,
.Button.EvaluatePrimary:disabled,
.Button.EvaluateDisabled {
    color: var(--color-neutral-6);
    background-color: var(--color-neutral-6);
}

.Evaluate .Button,
.Button.Evaluate,
.Button.EvaluatePrimary {
    background-image: url("/InnectoHub/ID Button.png?17751");
    color: var(--color-primary-text);
    background-size: cover;
    background-color: var(--color-evaluate-button);
}

.Evaluate .checkbox:checked:before, .TableRecords .TableRecords_Header [type="checkbox"]:checked:before {
    background-color: var(--color-primary-evaluate);
    border-color: var(--color-primary-evaluate);
}

.Evaluate .radio-button:checked:before {
    background-color: var(--color-neutral-0);
    border: 6px solid var(--color-primary-evaluate);
}

.Evaluate .select:not(.Not_Valid),
.Evaluate .select:not(.Not_Valid):focus {
    border-color: var(--color-primary-evaluate);
}

.Evaluate .input-with-icon-content-icon .fa {
    color: var(--color-primary-evaluate);
}

.HeatMapRangeEmpty {
    background-color: var(--color-evaluate-range-empty);
}

.HeatMapRange1 {
    background-color: var(--color-evaluate-range-one);
}

.HeatMapRange2 {
    background-color: var(--color-evaluate-range-two);
}

.HeatMapRange3 {
    background-color: var(--color-evaluate-range-three);
}

.HeatMapRange4 {
    background-color: var(--color-evaluate-range-four);
}

/* Other products to be configured correctly eventually .... */



.Paylab
{
    background-image: url("/InnectoHub/ID - PAYLAB STATIC - SECONDARY.png?17751");
    color: var(--color-primary-text);
    background-size: cover;
    border-bottom: solid 2px var(--color-primary-paylab);
}

.PaylabPrimary
{
    background-image: url("/InnectoHub/ID - PAYLAB STATIC - PRIMARY.png?17751");
    color: var(--color-primary-text);
    background-size: cover;
    border-bottom: solid 2px var(--color-primary-paylab);
}

.Paylabv2
{
    background-image: url("/InnectoHub/Pay Lab Button.png?17751");
    color: var(--color-primary-text);
    background-size: cover;
    border-bottom: solid 2px var(--color-primary-paylab);
}
.PaylabPrimaryv2
{
    background-image: url("/InnectoHub/Pay Lab Button Style 2.png?17751");
    color: var(--color-primary-text);
    background-size: cover;
    border-bottom: solid 2px var(--color-primary-paylab);
}

/* END - Colour overrides for Products */
/* =================================== */

/* LoginCSS */

.layout-login-simple .layout-login-form {
    background-color: unset;
    border-radius: unset;
    box-shadow: unset;
    padding: unset;
}
/* LoginCSS */
.layout-login-form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
    min-width: 250px;
    position: relative;
    z-index: 2;
}
/* DropwdownMenuSubBar */
.header .Menu_DropDownPanel {
    background-color: #464646;
    border:var(--border-size-s) solid;
    box-shadow: var(--shadow-m);
    padding-left: var(--space-base);
    z-index: initial;
}
/* DropwdownMenuSubBarItems */
.Menu_DropDownPanel a,
.Menu_DropDownPanel a:link,
.Menu_DropDownPanel a:visited {
    color: white;
    font-size: var(--font-size-s);
    height: auto;
    line-height: 1.5;
    padding: var(--space-s) var(--space-base) var(--space-s) var(--space-l);
    white-space: pre-wrap;
}

.select {   
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid var(--color-primary-evaluate);
    color: var(--color-neutral-9);
    font-size: var(--font-size-s);
    height: 40px;
    padding: var(--space-none) var(--space-base); 
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
}
/*------------------------------------------------------*/
.smallexpression {
    font-size: 12px;
}

.BorderDiv {
    border: 3px solid black;
}

.TitleDiv {
    background-color: var(--color-primary);
    padding: 10px;
}

.heading1
{
    font-size: 38pt;
    text-transform: uppercase;
    color: var(--color-secondary);
}

.heading4
{
    text-transform: uppercase;
    color: var(--color-primary-text);
}

.PaddingDiv {
    padding: 10px;
}

.SemiCircleWrapper {
    height: 85px;
}

.FloatRight {
    float: right;
}

.RotateAroundYAxis {
    transform: rotateY(180deg);
}

.DropArea {
    min-height: 50px;
    border: 1px dashed grey;
}

.DivBelowSemiCircle {
    position: relative;
    z-index: 1;
}

.DisplayNone {
    display: none;
}

.NoWrap {
    white-space: nowrap;
}

.align-y-center {
    display: inline-flex;
    align-items: center;
}

.align-x-center {
    display: flex;
    justify-content: center;
}

.custom-align-right{
    display: flex;
    justify-content: flex-end;
}

.AlignRight {
    text-align: right;
}

.AlignLeft {
    text-align: left;
}

.TaskActive {
    border: 1px solid lightgrey;
    padding: 10px;
    background-color: lightgrey;
}

.Task {
    border: 1px solid lightgrey;
    padding: 10px;
}

.color-primary {
    color: var(--color-primary);
}

/* $2.5 - HTML Elements - Buttons */
.Button,
.btn {
    -ms-flex-align: center;
    border-radius: 0;
    cursor: pointer;
    display: -ms-inline-flexbox;
    font-weight:  var(--font-semi-bold);
    text-transform: uppercase;
    text-align: left;
    height: 40px;
    width: 230px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0;
    padding:  var(--space-none) var(--space-base);
    transition: all 180ms linear;
    border-width: 0px;

}

.PrimaryButton, .Is_Default 
{
    background-color: var(--color-neutral-0);
    border-radius: 0;
    /* border: var(--border-size-l) solid var(--color-primary); */
}

.CenterMainContent
{
    background-repeat: no-repeat;
    background-color: #e5e9f4;
    background-size: contain;
    margin-bottom: 0px;
}

.CenterMainContent .DefaultBackgroundSidePanel
{
    background-image: url("/InnectoHub/PageMarginImage.png?17751");
    background-repeat: no-repeat;
    background-color: #e5e9f4;
    background-size: auto 800px;
    margin-bottom: 0px;
}

.CenterMainContent .EvaluateBackgroundSidePanel
{
    background-image: url("/InnectoHub/SidePanelEvaluate.png?17751");
    background-repeat: no-repeat;
    background-color: #e5e9f4;
    background-size: auto 800px;
    margin-bottom: 0px;
}

.CenterMainContent .PaylabBackgroundSidePanel
{
    background-image: url("/InnectoHub/SidePanelPaylab.png?17751");
    background-repeat: no-repeat;
    background-color: #e5e9f4;
    background-size: auto 800px;
    margin-bottom: 0px;
}

.CenterMainContent .AdvanceBackgroundSidePanel
{
    background-image: url("/InnectoHub/SidePanelAdvance.png?17751");
    background-repeat: no-repeat;
    background-color: #e5e9f4;
    background-size: auto 800px;
    margin-bottom: 0px;
}

.MainContentWrapper
{
        background-color: white;
        min-height: calc(100vh - 169px);
}

.InnectoHeader
{
    padding: 0px;
    border-bottom-width: 3px;
    border-color: var(--color-primary);
    height: 96px;
    border-style: solid;
    border-left-width: 0px;
    border-right-width: 0px;   
    border-top-width: 0px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.InnectoHeader--override
{
    margin-left: -10px; 
    width: calc(100% + 20px);
}

.InnectoHeaderIcon
{
    padding: 0px;
    margin: 0px;
    height: 100%;
    width: 150px;
}

.InnectoHeaderTitle
{
    font-size: 25pt;
    padding-top: 20px;
    text-transform: uppercase;
}

.InnectoModeDefault {
    background-image: var(--url-innecto-logo);
    background-size: 120px auto;
    background-repeat: no-repeat;
    background-position: center;
}

.InnectoModeEvaluate {
    background-image: var(--url-evaluate-logo);
    background-size: cover;
}

.InnectoModePaylab {

    background-image: url("/InnectoHub/PAYLAB.png?17751");
    background-size: cover;
}

.InnectoModeEvaluateBorder {
    border-color: var(--color-primary-evaluate);
}

.InnectoModePaylabBorder {
    border-color: var(--color-primary-paylab);
}

.InnectoHeaderActions
{   
    font-size: 10pt;
    padding-top: 30px;
    float: right;
    margin-right: 20px;
}

.InnectoHeader--override .InnectoHeaderActions
{
    margin-right: 10px;    
}

.InnectoMainContent 
{
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}

.InnectoFooter 
{
    background-color: var(--color-secondary-grey);
    color: whitesmoke;
    height: 65px;
    text-align: center;
    text-transform: uppercase;
    padding-top: 30px;
}


.TableRecords .TableRecords_Header, .EditableTable thead th {
    background-color: var(--color-primary-light);
    border-bottom:  var(--border-size-s) solid var(--color-neutral-4);
    color:  var(--color-neutral-8);
    font-weight:  var(--font-semi-bold);
    height: 48px;
    padding:  var(--space-none) var(--space-base);
    position: relative;
    text-align: left;
}

.TableRecords .TableRecords_OddLine, .TableRecords .TableRecords_EvenLine {
    padding: var(--space-s) var(--space-base)
}

.CustomTabHeader{
    
}
/*
.TableRecords .TableRecords_Header, .EditableTable, thead, th,  a, a:visited {
    color:  var(--color-primary-text);
    text-shadow: 1px;
    font-style: underline;
    -webkit-transition: color 180ms linear;
    transition: color 180ms linear;
}
*/

.TableRecords .TableRecords_Header, .EditableTable, thead, th, .SortColumns_Sorted  a, a:visited  {
    color:  var(--color-primary-text);
    font-style: underline;
    text-decoration: none;
}


/* this css isn't quite working - the button group needs to be green background with the active one white background. text contrasting with background. 
*/
.button-group btn
{
    color: var(--color-primary-text-inverse);
    background-color:  var(--color-primary);
}
.button-group .radio-button, btn {
    color:  var(--color-primary);
    background-color:  var(--color-primary-text-inverse);
    }

/* end ---- this css isn't quite working - the button group needs to be green background with the active one white background. text contrasting with background. 
*/

.wizard-item.active .wizard-item-label a {
    color:  var(--color-primary-text);
    font-weight: bold;
}

.wizard-item.next .wizard-item-label a {
    color:  var(--color-primary-text);
}

.wizard-item.past .wizard-item-label a {
    color:  var(--color-primary-text);
    font-weight: lighter;
}

.wizard-item.active .wizard-item-icon
{
    background-color: var(--color-primary-text);
    border-color: var(--color-primary-text);
    color:  var(--color-primary-text-inverse);
}

.wizard-item.past .wizard-item-icon
{
    background-color: var(--color-primary-text);
    border-color: var(--color-primary-text);
    color:  var(--color-primary);
}

.wizard-item.next .wizard-item-icon
{
    background-color: var(--color-primary-text-inverse);
    border-color: var(--color-primary-text);
    color:  var(--color-primary-text);
}

.wizard-item.past .wizard-item-icon-wraper:before {
    background-color: var(--color-primary-text);
}

.wizard-item.active .wizard-item-icon-wraper:before {
    background-color: var(--color-primary-text);
}

.wizard-item.next .wizard-item-icon-wraper:before {
    background-color: var(--color-neutral-5);
}

.wizard-item:first-child .wizard-item-icon-wraper:before {
    content: none;
}

.InnectoRoleActionCardHeader
{
    background-color: var(--color-secondary);
    padding: 10px;
    font-weight: bold;
    color: white;
}

.InnectoRoleActionCard
{
    background-color: var(--color-neutral-2);
}

.BreadCrumbRoleSummary
{
    border-bottom-color: var(--color-neutral-5);
    border-bottom: 2px;
}

.BreadCrumbIncumbents {
    font-weight: bold;
}

.BreadCrumbRole {
    font-weight: bold;
}

.InnectoRolePanel
{
/*    max-height: 500px;
    
    overflow-y: auto;*/
}


.career-pathway-columns > .columns-item:first-child {
    border-right: 1px solid var(--color-primary-evaluate);
}

.InnectoSummaryValue
{
    background-color: var(--color-neutral-2);
    padding: 10px;
    }
.BreadCrumbRoleSummary
{
    border-bottom-width: 2px;
    border-bottom-color: var(--color-neutral-5);
    border-bottom-style: solid;
}
    
/* Modal Extended */
.modal-wrapper.modal-wide {
    max-width: 600px;
}
.modal-fit-content {
    /* Fits two buttons side by side */
    max-width: unset;
    width: 535px; /* backward-compatiblity */
    width: fit-content;
    width: -moz-fit-content;
}
.modal-fit-content .Button {
    justify-content: left;
}

.floating-actions {
    z-index: 150;
    bottom: 70px;
}

.wizard--evaluate {
    width: 100%;
}


/* Modal - personalizations */
.modal-full-width {
    max-width: 100%
}

.modal-fit-content {
    max-width: none;
    width: fit-content;
}


/* Role slotting - range slider */
.range-slider-no-margin-bottom {
    margin-bottom: 0px;
}

.range-slider [data-isdisabled="true"] .noUi-connect {
    background-color: var(--color-primary);
}

.assisted-slotting.range-slider [data-isdisabled="true"] .noUi-connect {
    background-color: var(--color-id-secondary-orange);
}

.scrollable-table {
    overflow-x: auto;
}

@media print {
    .hide-on-print {
        display: none;
    }
}