/* START GENERAL SNIPPET STYLES */

.bold {
    font-weight: bold !important;
}

.light-bold {
    font-weight: 500 !important;
}

/* 
    Identical to d-flex flex-row-reverse, but easier to remember 
    Result: Elements are ordered from right to left and aligned to the right.
*/
.reverse {
    display: flex !important;
    flex-direction: row-reverse !important;
}


/* END GENERAL SNIPPET STYLES */




/* START MUD CARD CSS */

.button-card.mud-paper:hover {
    cursor: pointer;
}

.button-card.outlined.mud-paper {
    border: 1px solid transparent;
}

    .button-card.outlined.mud-paper:hover {
        border: 1px solid rgb(89, 74, 226); /* primary blue */
    }

/* END MUD CARD CSS */


/* START ADMIN SETTINGS PAGE CSS */

.settings-card .mud-paper {
    height: 140px;
}

.settings-card .mud-typography {
    font-size: 18px;
}

/* END ADMIN SETTINGS PAGE CSS */

/* START EMPLOYEE REGISTRATION STEPPER CSS */

.stepper-alert-highlight.mud-alert-text-normal {
    background-color: #3e43ff0f !important;
    word-break: break-word !important;
}

/* END REGISTRATION STEPPER CSS */

/* START SettingsGrid CSS */

.settings-grid {
    border-radius: 12px;
    box-shadow: none !important;
}

/* END SettingsGrid CSS */

/* Screens with a max width of 600px */
@media only screen and (max-width: 600px) {
    .hideOnMobile {
        display: none;
    }
}

/* Screens with a min width of 601px  */
@media only screen and (min-width: 601px) {
    .hideOnMobile {
        display: block;
    }
}


/* START BizDivider */
.biz-divider.mud-divider-middle {
    margin-left: 4px;
    margin-right: 4px;
}
/* END BizDivider */


/* START MudDatePicker Global style*/
.mud-picker-static {
    display: flex;
    overflow: hidden;
    min-width: 250px;
    flex-direction: column;
}


@media only screen and (max-width: 760px) {
    .mud-picker-toolbar {
        height: 40px;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: start;
    }

    .mud-picker-datepicker-toolbar .mud-button-date {
        font-size: 1.125rem;
        font-weight: 400;
        line-height: 1.17;
        letter-spacing: .00735em;
        text-transform: none;
    }
}
/* END MudDatePicker Global style*/


/* Start CardWithTitle*/

.disabledCardWithTitle {
    color: #00000099;
}

    .disabledCardWithTitle .mud-primary-text {
        color: #00000099 !important;
    }


/* End CardWithTitle*/


/* Start Language Selection Menu */

.language-selected-item {
    display: block;
    color: var(--mud-palette-black) !important;
    background-color: rgba(62, 67, 255, 0.12);
    pointer-events: none; /* disables any pointer interaction as already selected */
}

.language-not-selected-item {
    display: block;
    cursor: pointer;
    color: var(--mud-palette-black) !important;
}

/* End Language Selection Menu */



/* Start MudDialog */
/** Mud dialog have a scrolling issue
    This seems to fix it. Maybe we'll have to play with more settings to have the expected results but this gives so acceptable ones for now    
**/

.mud-dialog-width-full {
    width: calc(100% - 32px);
}

.mud-dialog-width-false {
    max-width: calc(100% - 32px);
}


@media only screen and (max-width: 550px) {
    .mud-dialog-width-sm {
        margin: 0 16px;
    }
}


.mud-dialog.scrollable {
    overflow-y: auto;
    max-height: calc(100vh - var(--mud-appbar-height));
}

/* Overwrites here is required to be after the .mud-dialog overwrite otherwise it inherits the changes of the .mud-dialog class */
.mud-dialog-fullscreen {
    max-height: none;
}

/* Fix for reported issue in Mud Discor chat (https://discord.com/channels/786656789310865418/788052266536009738/1001837353188462602) */
/* Fixes issue of the MudFocusTrap used in the MudDialog that catches every click and move to top in scrollable dialog */
.mud-dialog .fixed.pointer-events-none {
    display: none;
}

/* This is to have the same horizontal margins for the buttons. */
.mud-dialog .mud-dialog-actions {
    flex: 0 0 auto;
    display: flex;
    padding: 16px 16px;
    align-items: center;
    justify-content: flex-end;
    border-bottom-left-radius: var(--mud-default-borderradius);
    border-bottom-right-radius: var(--mud-default-borderradius);
}

.mud-dialog .mud-dialog-title {
    z-index: +1;
    flex: 0 0 auto;
    margin: 0;
    padding: 16px 16px;
    border-top-left-radius: var(--mud-default-borderradius);
    border-top-right-radius: var(--mud-default-borderradius);
}

.mud-dialog .mud-dialog-content {
    position: relative;
    flex: 1 1 auto;
    padding: 8px 16px;
    -webkit-overflow-scrolling: touch;
    border-top-left-radius: var(--mud-default-borderradius);
    border-top-right-radius: var(--mud-default-borderradius);
}

/* Error boundary popup message */
.errorBoundarySnackBar.mud-snackbar .mud-button-label {
    text-decoration: underline;
}

.mud-dialog-width-md {
    max-width: 800px;
}



@media only screen and (min-width: 601px) {
    .mud-dialog-container.mud-dialog-topcenter {
        align-items: flex-start;
        justify-content: center;
        padding-top: 125px;
    }
}


@media only screen and (max-height: 700px) {
    .mud-dialog {
        max-height: 500px;
    }
}

@media only screen and (min-height: 701px) {
    .mud-dialog {
        max-height: 700px;
    }
}

/* End MudDialog */

/* Start MudForm */

/* End MudForm */
.biz-menu {
    z-index: 1350;
    border-radius: 0px 16px 16px 0px;
    box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.03);
    elevation: lower;
}

.biz-desktop-menu .mud-nav-item .mud-nav-link .mud-icon-size-medium {
    font-size: 1.2rem;
}
/* Start mobileNavMenu */
.biz-menu-mobile-top-margin {
    margin-top: 80px;
}

.biz-menu-mobile {
    padding: 0px !important;
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 62px;
    background-color: white;
    border-radius: 24px 24px 0px 0px;
    box-shadow: 0px -4px 3px rgb(50 50 50 / 3%);
}

    .biz-menu-mobile .mud-navmenu {
        display: flex;
    }

    .biz-menu-mobile .mud-nav-link .mud-nav-link-text {
        text-align: center;
        margin-top: -10px;
        font-size: 11px;
        margin-left: 0;
    }

    .biz-menu-mobile .mud-nav-link {
        display: inline-block;
        text-align: center;
        margin: 0px 0 0px 0;
        padding: 22px 0 8px 0;
        border-radius: 24px 24px 0px 0px;
    }

@media(max-width: 959px) {
    .biz-menu {
        display: none !important;
    }
}

@media(min-width: 960px) {
    .biz-menu-mobile {
        display: none !important;
    }
}


.biz-menu-mobile .mud-navmenu.mud-navmenu-primary .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: var(--mud-palette-primary);
    --mud-ripple-color: var(--mud-palette-primary);
    background-color: white;
}


.biz-menu-mobile .mud-navmenu .mud-nav-item .mud-nav-link-text .mud-badge-root .mud-badge.mud-badge-top.right.mud-badge-overlap {
    inset: auto auto calc(100% - 4px) calc(100% - 8px);
}

.PeopleBadge .mud-badge-wrapper.mud-badge-top.right .mud-badge.mud-badge-top.right.mud-badge-overlap {
    inset: auto auto calc(100% - 4px) calc(100% - 12px) !important;
}


/* End mobileNavMenu */


/*Start MudExpandPanel*/

.mud-expand-panel.mud-expand-panel-border {
    border: 1px solid transparent;
}

.mud-expand-panel-header:hover {
    cursor: pointer;
}

.mud-expand-panel {
    border: 1px solid transparent;
}

    .mud-expand-panel:hover {
        border: 1px solid rgb(89, 74, 226); /* primary blue */
    }

.mud-expand-panel-content ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 16px;
}

.mud-expand-panel-content ol {
    display: block;
    list-style-type: decimal;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 16px;
}

/*End MudExpandPanel*/

.greenCheckMark {
    color: $quitt-success-color !important;
}


/*START Style default client blazor error*/

#blazor-error-ui-container {
    width: 100%;
    position: fixed;
    top: 36px;
    z-index: 999999
}

#blazor-error-ui {
    background: #EB4648;
    opacity: 0.95;
    top: 16px;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    padding: 16px;
    position: sticky;
    width: 400px;
    height: 50px;
    z-index: 10000;
    color: white;
    border-radius: 8px;
    margin: auto;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
        color: white;
    }

    #blazor-error-ui .reload {
        cursor: pointer;
        color: white;
        text-decoration: underline;
    }

/*END Style default client blazor error*/

/*Start back button style (BackButtonBar)*/

.back-button {
    position: absolute;
    z-index: calc(var(--mud-zindex-appbar) + 1);
    top: -1px;
}

/*END back button style*/


.biz-hide-error-message .mud-input-control-helper-container {
    display: none;
}

/* Start Button Secondary style*/

.mud-button-filled-default {
    color: var(--mud-palette-primary);
    background-color: #F4F4FF;
}

    .mud-button-filled-default:disabled {
        color: var(--mud-palette-primary);
        background-color: #DFDFE8;
    }

    .mud-button-filled-default:hover {
        color: var(--mud-palette-primary);
        background-color: #ECEDFE;
    }
/* End Button Secondary style*/

/* Start Button Error style*/
.mud-button-text.mud-button-text-error {
    color: var(--mud-palette-error);
    background-color: var(--mud-palette-error-hover);
}

    .mud-button-text.mud-button-text-error:disabled {
        color: var(--mud-palette-error);
        background-color: #DFDFE8;
    }

    .mud-button-text.mud-button-text-error:hover {
        color: var(--mud-palette-error);
        background-color: rgba(235,70,72,0.1);
    }
/* End Button Error style*/

/* Define the style for the title outside the card*/
.cardTitle {
    font-size: 24px;
    min-height: 32px;
    margin-top: 32px !important;
    margin-bottom: 16px !important;
    font-family: var(--mud-typography-h5-family);
    font-weight: var(--mud-typography-h5-weight);
    line-height: var(--mud-typography-h5-lineheight);
    letter-spacing: var(--mud-typography-h5-letterspacing);
    text-transform: var(--mud-typography-h5-text-transform);
}

/* Screens with a max width of 600px */
@media only screen and (max-width: 600px) {
    .cardTitle {
        font-size: 16px;
        min-height: 32px;
        margin-top: 32px !important;
        margin-bottom: 16px !important;
        font-family: var(--mud-typography-subtitle1-family);
        font-weight: 400;
        line-height: var(--mud-typography-subtitle1-lineheight);
        letter-spacing: var(--mud-typography-subtitle1-letterspacing);
        text-transform: var(--mud-typography-subtitle1-text-transform);
    }
}

.daysAfterWorkInputField input.mud-input-slot {
    text-align: center;
}

.daysAfterWorkInputField.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    margin-top: 0px;
}

/*START Mobile rendering for tables*/

.mud-xs-table .textOverflowElisis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 80px;
}

.mud-xs-table .footerRowHeight {
    height: 35px;
}

@media (max-width: 600px) {
    .mud-xs-table .mud-table-root .mud-table-head, .mud-xs-table .mud-table-root .mud-table-foot {
        display: table-header-group;
    }

    .mud-xs-table .mud-table-body {
        border-top: 1px solid var(--mud-palette-table-lines);
    }

    .mud-xs-table .mud-table-root .mud-table-head, .mud-xs-table .mud-table-root .mud-table-foot {
        display: table-header-group;
    }

    .mud-xs-table .mud-table-row {
        color: inherit;
        display: table-row;
        outline: 0;
        vertical-align: middle;
    }

    .mud-xs-table .mud-table-cell {
        display: table-cell;
        padding: 4px;
        font-size: .675rem;
        text-align: start;
        font-weight: 400;
        line-height: 1;
        border-bottom: 1px solid var(--mud-palette-table-lines);
        letter-spacing: .01071em;
        vertical-align: inherit;
    }

    .mud-xs-table.mud-table-dense .mud-table-cell {
        padding: 4px;
        padding-inline-start: 3px;
        padding-inline-end: 3px;
    }

    .mud-xs-table .mud-table-cell:before {
        display: none;
    }

    .mud-table-dense * .mud-table-row .mud-table-cell:last-child {
        padding-right: 0px;
        padding-inline-end: 0px;
    }

    .mud-table-pagination-caption {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        padding-left: 4px;
        padding-right: 4px;
    }

    .mud-table-pagination-information {
        white-space: nowrap;
        direction: initial;
        font-size: .675rem;
    }

    .mud-table-pagination-select.mud-select .mud-select-input .mud-input-slot {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: .675rem;
    }

    .mud-table-page-number-information {
        white-space: nowrap;
        direction: initial;
        font-size: .675rem;
    }

    .mud-table .mud-table-pagination .mud-table-pagination-toolbar {
        flex-wrap: wrap;
        padding-top: 16px;
        padding-right: 0px;
        padding-inline-end: 0px;
        padding-inline-start: unset;
        min-height: 40px;
    }


    .mud-table-pagination-actions .mud-icon-button {
        flex: 0 0 auto;
        padding: 4px;
        overflow: hidden;
        font-size: 1.5rem;
        text-align: center;
        transition: background-color 150ms cubic-bezier(.4,0,.2,1) 0ms;
        border-radius: 50%;
        color: var(--mud-palette-action-default);
    }

    .mud-table .mud-table-pagination .mud-table-pagination-toolbar .mud-table-pagination-actions {
        margin-left: auto;
        margin-right: -4px;
        margin-inline-start: auto;
        margin-inline-end: -4px;
    }
}
/*END Mobile rendering for tables*/

/* Ordered lists on allowance pages*/
.biz-list-items {
    margin-left: 16px;
}

/* Fixes #11219 */
.mud-switch {
    margin-left: 1px;
}

.mud-badge.mud-badge-overlap {
    border-color: #F5F5FC !important;
}

/* Start Header Menu*/

.biz-nav-menu {
    min-width: 270px;
    overflow: hidden;
}

    .biz-nav-menu .mud-grid {
        margin: 4px 0 0 4px;
    }

    .biz-nav-menu .mud-nav-link {
        padding-top: 6px;
        padding-bottom: 6px;
        align-items: center;
    }

        .biz-nav-menu .mud-nav-link svg {
            width: 18px;
            height: 18px;
        }

.language-nav-group > .mud-nav-link > .mud-nav-link-text {
    font-weight: normal;
}

.language-nav-group {
    padding-bottom: 6px;
}

.app-menu-navlink {
    padding-top: 6px;
}
/* End Header Menu*/
/* Start BizSelectableCard*/
.card-active, .card-disabled, .cursor-pointer-disabled, .card-inactive, .card-readonly {
    padding: 15px;
    border-radius: 8px;
}

.cursor-pointer-disabled {
    border: 1px solid #3E43FF;
}

.card-active {
    border: 1px solid #3E43FF;
    cursor: pointer;
    background-color: white;
    height: inherit;
}

.card-readonly {
    border: 1px solid #3E43FF;
    cursor: default !important;
}

.card-disabled {
    background-color: #F4F4F4;
    border: 1px solid transparent;
    cursor: pointer;
    color: lightgray;
}

.card-inactive {
    background-color: #F4F4F4;
    border: 1px solid transparent;
    cursor: pointer;
}
/* End BizSelectableCard*/

/*START CHECKBOX STYLE CSS*/

.checkBoxTopAligned .mud-checkbox .mud-checkbox-dense {
    align-self: flex-start !important;
}

.checkBoxTopAligned .mud-checkbox .mud-checkbox-dense {
    padding: 2px;
    margin-right: 8px;
}

/*END CHECKBOX STYLE CSS*/

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

/*START SWITCH STYLE top aligned*/
.mud-switch-span {
    width: 58px;
    height: 38px;
    display: inline-flex;
    padding: 12px;
    z-index: 0;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    flex-shrink: 0;
    vertical-align: middle;
    /*This was added to top align the switch*/
    align-self: flex-start !important;
    margin-top: -6px;
}

label.mud-switch {
    align-items: start;
    margin-top: 6px;
}
/*END SWITCH STYLE CSS*/

/* Start Radio Buttons top aligned*/
/* Works by having Dense property set e.g. <MudRadio Dense "  ..
   Without the Dense setting the radio will be top aligned but it has a 12px top padding when the label goes on multiple rows
*/
.mud-radio .mud-icon-button {
    align-self: flex-start;
}

.mud-radio .mud-radio-dense {
    padding: 2px;
    margin-right: 8px;
}

/* End Radio Buttons top aligned */


/* START ReadonlyData COMPONENT CSS */

.readonly-data-component {
    display: flex;
}

    .readonly-data-component * p {
        font-size: 16px;
    }

@media (max-width: 600px) {
    .readonly-data-component * p {
        font-size: 14px;
    }
}

.readonly-data-component-content {
    display: flex;
    justify-content: space-between;
}

.clickable:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.058823529411764705); /*--mud-palette-action-default-hover*/
}

.read-only-data-grid > :nth-child(odd) {
    padding: 12px 8px !important;
}

.read-only-data-list > * {
    padding: 12px 8px !important;
}

@media (max-width: 600px) {
    .readonly-data-component-content-mobile {
        flex-direction: column;
    }

        .readonly-data-component-content-mobile > :first-child {
            padding-bottom: 8px;
        }

    .read-only-data-grid > :nth-child(odd) {
        padding: 12px 0 !important;
    }

    .read-only-data-list > * {
        padding: 12px 0 !important;
    }
}

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

.mud-expand-panel-content .biz-list-items {
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}

.first-row-top-padding-none .mud-grid > :first-child {
    padding-top: 0px !important;
}

/*Used for both mobile and desktop views*/
.readonly-data-text-right-align {
    text-align: right;
}

.readonly-data-text-pt-8 {
    padding-top: 8px !important;
}

@media only screen and (max-width: 600px) {
    .readonly-data-text-align {
        text-align: left;
    }
}

/* END ReadonlyData COMPONENT CSS */

/* Start Subscription pricing page*/

.subscription-chip {
    position: absolute !important;
    top: 18px;
}

/* End Subscription pricing page*/

.mud-chip {
    padding-right: 20px !important;
    padding-left: 20px !important;
}

/* Start Documents page*/

.alert-fill-icon .mud-icon-root.mud-svg-icon {
    fill: #3E43FF;
}

.mud-alert-text-warning .mud-icon-root.mud-svg-icon {
    fill: var(--mud-palette-warning-darken);
}

/* End Documents page*/

/* Start Bill Preview */

.bill-group {
    color: #777777;
    display: block;
    padding-bottom: 8px;
    padding-top: 16px;
}

.bill-group-nospacing {
    color: #777777;
    display: block;
}

.billDetailFont {
    font-size: 14px;
}

.billDetailBigFont {
    font-size: 16px;
}

/* Custom tooltip design */

.customTooltip {
    max-width: 350px !important;
    margin-right: 30px;
    word-wrap: break-word;
}

.customTooltipIcon .mud-svg-icon {
    width: 16px !important;
}

.linear-overflow-hidden {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

@media only screen and (min-width: 960px ) {
    .customTooltip {
        margin-right: 140px;
        max-width: 360px !important;
    }
}

@media only screen and (min-width: 600px) {
    .customTooltip {
        margin-left: 30px;
        margin-right: 50px;
        max-width: 300px !important;
    }

    .linear-overflow-hidden {
        max-width: 280px;
    }
}

@media only screen and (max-width: 600px) {
    .customTooltip {
        margin-left: 40px;
    }

    .linear-overflow-hidden {
        max-width: 200px;
    }

    .billDetailFont {
        font-size: 13px;
    }

    .billDetailBigFont {
        font-size: 13px;
    }
}

@media only screen and (max-width: 430px) {
    .customTooltip {
        margin-left: 70px !important;
    }    
    
    .customTooltipHelp {
        margin-left: 0px !important;
    }

    .linear-overflow-hidden {
        max-width: 120px;
    }
}

@media only screen and (max-width: 320px) {
    .customTooltip {
        margin-left: 0 !important;
    }

    .linear-overflow-hidden {
        max-width: 80px;
    }
}

/* End Bill Preview */

/* Start Revert payslip page*/

.revertBillDescription {
    font-size: 14px;
}

@media only screen and (max-width: 600px) {
    .revertableBillitemsTable .mud-table-cell {
        padding: 8px !important;
    }

    .revertBillDescription {
        font-size: 13px;
    }
}

/* End Revert payslip page*/

/* Start Contract Payments Component */
.revertChangeRequestStatusMessage {
    font-size: 14px;
}

@media only screen and (max-width: 600px) {
    .revertChangeRequestStatusMessage {
        font-size: 11px;
    }
}
/* End Contract Payments Component */
/* End Bill Preview */

/*Start Calculation save settings */

.message-image {
    width: 450px;
    height: 220px;
}

.trust-icons {
    width: 50px;
    margin: 10px;
}

.ahv-eth-icons {
    width: 70px;
}

.quitt-description {
    font-size: 12px;
}

@media only screen and (max-width: 600px) {

    .mud-form {
        /* Added to avoid scolling horizontaly on mobile and to fit the parent container */
        overflow: hidden;
    }

    .message-image {
        width: 300px;
        height: 150px;
    }

    .trust-icons {
        width: 40px;
        margin: 7px;
    }

    .ahv-eth-icons {
        width: 60px;
    }

    .quitt-description {
        font-size: 11px;
    }
}

/*End Calculation save settings*/

.dashedCardButton {
    height: 90px;
    display: flex;
    align-items: center;
    border: 2px dashed darkgray !important;
    border-radius: 7px;
    background-color: #f5f5fc;
}

/*Start Change request page*/
.change-request-uncheked-option .mud-radio-content {
    color: #939393;
}

.change-request-uncheked-option .mud-radio-button {
    color: #939393;
}


.change-request-not-issued-AHV-label {
    color: #767676;
    padding-top: 8px;
}

    .change-request-not-issued-AHV-label div > label > p {
        font-size: 13px;
        margin-left: 4px;
    }

    .change-request-not-issued-AHV-label div > label > .mud-icon-button {
        padding: 0px;
    }
/*End Change request page*/


/*START UNAUTHENTICATED ADDING OF BILL ITEMS PAGE */

.addBillItemButton .mud-button-root {
    padding-bottom: 8px !important;
}

.unauthenticatedPaymentDetailsTableCell {
    height: 39px;
}

@media only screen and (max-width: 600px) {
    .unauthenticatedPaymentDetailsTableCell {
        font-size: .875rem !important;
        padding: 8px !important;
        height: 39px;
    }
}

@media only screen and (max-width: 400px) {
    .unauthenticatedPaymentDetailsTableCell {
        font-size: .775rem !important;
        padding: 8px !important;
        height: 39px;
    }
}
/*END UNAUTHENTICATED ADDING OF BILL ITEMS PAGE*/

/* Lead generation page */
.outline:hover {
    border: 1px solid rgb(89, 74, 226); /* primary blue */
    background-color: white;
}

.outlined-icon {
    font-size: 75px;
}

.grey-card {
    background-color: #F4F4F4;
    padding-top: 8px;
    padding-bottom: 8px;
    cursor: pointer;
}


/* To fix label not displayed as disabled in v6.19.1 */
.mud-checkbox.mud-disabled > p {
    color: var(--mud-palette-text-disabled) !important;
}

/* Fix radio button group spacing issue on the left */
.mud-radio-group {
    padding-left: 12px !important; /*equivalent to pl-3*/
    margin-left: -12px
}

}

/*START Helsana deregistration page*/
.Helsana-Mud-Panel .mud-icon-root {
    color: #3E43FF;
}

.Helsana-Mud-Panel .mud-expand-panel-text {
    font-size: 16px;
}
/*END Helsana deregistration page*/

.changeRequestMessage {
    font-style: italic !important;
    font-size: 14px;
    font-weight: 700 !important;
    text-align: right;
    color: rgba(0,0,0,.38) !important;
    padding-top: 7px;
}

.material-symbols-rounded {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24
}

/* START style to display the _________OR____________ in login area */
.hr-sect {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    color: var(--mud-palette-text-secondary);
    margin: 8px 0px;
    font-size: 14px;
    gap: 16px;
}

    .hr-sect:before,
    .hr-sect:after {
        content: "";
        flex-grow: 1;
        background: #E9E9E9;
        height: 1px;
        font-size: 0px;
        line-height: 0px;
        margin: 0px 8px;
    }

/*END*/

/*START navigate back style for detail pages */
.navigateBackLabel {
    display: inline-flex;
    align-items: center;
    height: 49px;
    color: var(--mud-palette-primary);
    cursor: pointer !important;
}

.navigateBackButton {
    display: inline-flex;
    width: 48px;
    margin-left: -16px;
}
/*END*/


/*START MudTextField */

.mud-input-control {
    border: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex: 1 1 auto;
    max-width: 100%;
    position: relative;
    flex-direction: column;
    vertical-align: top;
    /*margin-top: 6px;*/ /*removed the margin-top; in the new library this top margin is removed as well*/
}

/*END MudTextField */

/*START PensionPlanCustomization*/
.pensionPlanCardContainer {
    background-color: #F4F4F4;
    border-radius: 8px;
    align-items: stretch !important;
}

.pensionPlanCard {
    text-align: center;
    padding: 0px !important;
}

    .pensionPlanCard > div {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        min-height: 56px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .pensionPlanCard > .card-active {
        color: #3E43FF;
    }

    .pensionPlanCard > div > p {
        font-weight: 400 !important;
        font-size: 14px !important;
    }

/*END PensionPlanCustomization*/


/*CardWithTitle Start*/

/* Screens with a max width of 600px */
@media only screen and (max-width: 600px) {
    .mud-card-header-height {
        height: 40px;
    }
}
/* Screens with a min width of 601px  */
@media only screen and (min-width: 601px) {
    .mud-card-header-height {
        height: 48px;
    }
}

/*CardWithTitle End*/


/*Typography Start*/

/* Screens with a max width of 600px */
@media only screen and (max-width: 600px) {

    .mud-typography-h5 {
        font-size: 16px;
        font-family: var(--mud-typography-h5-family);
        font-weight: 400;
        line-height: var(--mud-typography-subtitle1-lineheight);
        letter-spacing: var(--mud-typography-subtitle1-letterspacing);
        text-transform: var(--mud-typography-subtitle1-text-transform);
    }

    .mud-typography-subtitle1 {
        font-size: 14px;
        font-family: var(--mud-typography-subtitle1-family);
        font-weight: var(--mud-typography-subtitle1-weight);
        line-height: var(--mud-typography-subtitle1-lineheight);
        letter-spacing: var(--mud-typography-subtitle1-letterspacing);
        text-transform: var(--mud-typography-subtitle1-text-transform);
    }
}

/*Typography End*/

/* Start changes introduces by the Outline style*/

/* The input outline style should use a border of 4px*/

.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: 4px;
    border-color: var(--mud-palette-tertiary);
}

.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol {
    color: var(--mud-palette-text-secondary);
}

.mud-input > input.mud-input-root::placeholder, div.mud-input-slot.mud-input-root::placeholder {
    color: var(--mud-palette-text-secondary) !important;
    opacity: initial;
    transition: initial;
}

.mud-input > input.mud-input-root::-webkit-input-placeholder, div.mud-input-slot.mud-input-root::-webkit-input-placeholder {
    color: var(--mud-palette-text-secondary) !important;
    opacity: initial;
    transition: initial;
}

.mud-input > input.mud-input-root:-moz-placeholder, div.mud-input-slot.mud-input-root:-moz-placeholder {
    color: var(--mud-palette-text-secondary) !important;
    opacity: initial;
    transition: initial;
}

.mud-input > input.mud-input-root::-moz-placeholder, div.mud-input-slot.mud-input-root::-moz-placeholder {
    color: var(--mud-palette-text-secondary) !important;
    opacity: initial;
    transition: initial;
}

.mud-input > input.mud-input-root:-ms-input-placeholder, div.mud-input-slot.mud-input-root:-ms-input-placeholder {
    color: var(--mud-palette-text-secondary) !important;
    opacity: initial;
    transition: initial;
}

.mud-input > input.mud-input-root::-ms-input-placeholder, div.mud-input-slot.mud-input-root::-ms-input-placeholder {
    color: var(--mud-palette-text-secondary) !important;
    opacity: initial;
    transition: initial;
}

.mud-button-outlined {
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-tertiary);
}

/* Finished changes introduces by the Outline style*/


.radioSelectableCard {
    padding: 5px 5px 5px 16px;
    height: 56px;
    /* This is to match
       .mud-input-control.mud-input-outlined-with-label {
              margin-top: 8px;
              margin-bottom: 4px;
       }
    */
    margin-top: 8px;
    margin-bottom: 4px;
}

.radioSelectableCardBlock > .card-inactive {
    border: 1px solid #757575;
    background-color: transparent;
}

.radioSelectableCardBlock > .card-disabled {
    background-color: transparent;
    border: 1px solid lightgray;
    cursor: pointer;
    color: lightgray;
}
/* Finished changes introduces by the Outline style*/



/* bizFileUploader Start*/

.bizFileUploader {
    color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}

.bizFileUploaderDisabled {
    color: var(--mud-palette-tertiary);
    border-color: var(--mud-palette-tertiary);
}

.bizFileUploaderFileIcon {
    background-color: #f5f5fc;
    max-width: 32px;
}

    .bizFileUploaderFileIcon > svg {
        font-size: 16px;
    }

.bizFileUploaderFileData > p:first-of-type {
    font-size: 14px;
}

.bizFileUploaderFileData > p:last-of-type {
    font-size: 10px;
    color: var(--mud-palette-tertiary);
}

.bizFileUploadingInputIcon {
    font-size: 64px;
    margin-bottom: 12px;
}
/*bizFileUploader END*/



/* Biz Menu desktop - Start*/
.mud-nav-link:not(.active) {
    color: var(--mud-palette-tertiary);
}

.biz-desktop-menu {
    background-color: white;
}

    .biz-desktop-menu .mud-navmenu.mud-navmenu-rounded .mud-nav-link {
        border-radius: 0 24px 24px 0;
        /*Border radius: 24px, 24px 0px 0px*/
    }

    .biz-desktop-menu .mud-nav-link {
        text-align: center;
        padding: 10px 0 10px 0;
        align-items: center;
    }

    .biz-desktop-menu.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
        color: var(--mud-palette-primary);
        background-color: var(--mud-palette-primary-hover);
        border-radius: 0px 8px 8px 0px;
        /*margin-left: -24px;*/
    }

        .biz-desktop-menu.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-icon-root.mud-svg-icon {
            color: var(--mud-palette-primary);
        }

    .biz-desktop-menu.mud-navmenu.mud-navmenu-default .mud-icon-root.mud-svg-icon {
        color: var(--mud-palette-tertiary);
        margin-left: 24px;
    }



    .biz-desktop-menu.mud-nav-link:not(.mud-nav-link-disabled) .mud-nav-link-icon.mud-nav-link-icon-default {
        color: currentColor;
    }

@media(hover: hover)and (pointer: fine) {
    .biz-desktop-menu.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled) {
        background-color: var(--mud-palette-primary-hover);
        /*margin-left: -24px;*/
        border-radius: 0px 8px 8px 0px;
    }

    .biz-desktop-menu.mud-navmenu.mud-navmenu-default .mud-nav-link:not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled) {
        background-color: var(--mud-palette-primary-hover);
        /*margin-left: -24px;*/
        border-radius: 0px 8px 8px 0px;
    }
}

/* Biz menu desktop - end*/



@media (min-width: 960px) {
    .mud-drawer-open-responsive-md-left.mud-drawer-left-clipped-never .mud-appbar.bizAppBar {
        width: calc(100%) !important;
        margin-left: 0px !important;
    }
}

/*thumbButton Start*/

.thumbButton {
    min-height: 130px;
    position: relative;
    background-color: white;
}

.thumbButtonCentered {
    min-height: 168px;
    position: relative;
    background-color: white;
}

.thumbButtonCenteredContent {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.thumbButtonIcon {
    width: 40px;
    height: 40px;
    font-size: 2.5rem;
}

.thumbButtonCenteredIcon {
    width: 78px;
    height: 78px;
    padding-top: 8px;
    font-size: 4.75rem;
}


@media only screen and (max-width: 600px) {
    .thumbButtonCentered, .thumbButton {
        min-height: 118px;
    }

    .thumbButtonText {
        font-size: 14px;
    }

    .thumbButtonCenteredIcon {
        width: 40px;
        height: 40px;
        font-size: 2.5rem;
        padding-top: 0;
    }
}
/*thumbButton END*/

.mud-button-root {
    text-transform: none;
}

/*table text color START*/
@media (min-width: 960px) {
    .mud-table-root .mud-table-head .mud-table-cell,
    .mud-table-root .mud-table-body .mud-table-cell {
        color: var(--mud-palette-tertiary);
    }
}
/*table text color END*/


.biz-switch * .mud-switch {
    justify-content: space-between;
    flex-direction: row-reverse;
    margin-right: 1px;
    margin-top: 0px;
}

.biz-switch .mud-switch-span-medium.mud-switch-span {
    padding: 12px;
    width: 58px;
    height: 38px;
    margin-right: -9px;
}
  

.biz-radio {
    margin-right: 0px !important;
}

    .biz-radio *.mud-radio-content {
        font-size: 14px;
        color: var(--mud-palette-tertiary);
    }

.biz-gray-text {
    color: var(--mud-palette-tertiary);
}

.biz-small-text {
    font-size: 14px !important;
}
.biz-mid-text {
    font-size: 16px !important;
}
.biz-large-text {
    font-size: 20px !important;
}

.biz-checkbox-container * span.mud-ripple-checkbox {
    margin-left: -12px;
}

.biz-checkbox-container * .mud-checkbox {
    color: var(--mud-palette-tertiary);
}

/* Payments table  START */
.payment-table-cell {
    padding-left: 8px !important;
    padding-right: 16px !important;
}

.approval-mud-chip {
    padding-right: 16px !important;
    padding-left: 16px !important;
    font-size: 12px;
    height: 22px !important;
    margin: 0px !important;
}

.payment-table-mobile-text > p:first-of-type {
    font-size: 14px;
}

.payment-table-mobile-text > p:last-of-type {
    font-size: 12px;
    color: var(--mud-palette-tertiary);
}

@media (max-width: 600px) {
    .approval-mud-chip {
        font-size: 10px !important;
        height: 18px !important;
    }

    .payment-table-cell {
        padding: 8px !important;
    }

        .payment-table-cell:last-child {
            padding-right: 0px !important;
        }

        .payment-table-cell:first-child {
            padding-left: 0px !important;
        }
}
/* Contract - Payments table  END */

.biz-button-group *.mud-button-root {
    box-shadow: none !important;
}

/* Payments table  START */
.payment-table-cell {
    padding-left: 8px !important;
    padding-right: 16px !important;
}

.approval-mud-chip {
    padding-right: 16px !important;
    padding-left: 16px !important;
    font-size: 12px;
    height: 22px !important;
    margin: 0px !important;
    cursor: pointer;
}

.payment-table-mobile-text > p:first-of-type {
    font-size: 14px;
}

.payment-table-mobile-text > p:last-of-type {
    font-size: 12px;
    color: var(--mud-palette-tertiary);
}

@media (max-width: 600px) {
    .approval-mud-chip {
        font-size: 10px !important;
        height: 18px !important;
    }

    .payment-table-cell {
        padding: 8px !important;
    }

        .payment-table-cell:last-child {
            padding-right: 0px !important;
        }

        .payment-table-cell:first-child {
            padding-left: 0px !important;
        }
}
/* Contract - Payments table  END */

/* Menu divider start*/
.biz-menu-divider {
    border-color: #F3F3F3
}
/* Menu divider end*/

.biz-tabs {
}

    .biz-tabs .mud-tab {
        text-transform: none;
        font-weight: var(--mud-typography-default-weight);
    }

    .biz-tabs .mud-tabs-tabbar-wrapper .mud-tooltip-root:first-of-type .mud-tab:hover {
        border-top-left-radius: 15px;
    }
    .biz-tabs .mud-tabs-tabbar-wrapper .mud-tooltip-root:first-of-type .mud-tab {
        border-top-left-radius: 15px;
    }

    .biz-tabs .mud-tabs-tabbar-wrapper .mud-tooltip-root:nth-of-type(3) .mud-tab:hover {
        border-top-right-radius: 15px;
    }
    .biz-tabs .mud-tabs-tabbar-wrapper .mud-tooltip-root:nth-of-type(3) .mud-tab {
        border-top-right-radius: 15px;
    }

    .biz-tabs * .mud-tabs-tabbar-wrapper {
        width: 100%;
    }

    .biz-tabs .mud-tooltip-root.mud-tooltip-inline {
        width: 33.3333%;
    }

.biz-expansion-panels {
}

    .biz-expansion-panels > :first-child {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }

    .biz-expansion-panels > .mud-panel-expanded {
        margin-top: 0px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom: none !important;
    }


    .biz-expansion-panels > .mud-panel-next-expanded {
        border-radius: 0px;
    }

    .biz-expansion-panels .mud-expand-panel.mud-expand-panel-border {
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }

    .biz-expansion-panels .mud-expand-panel:hover {
        border: 1px solid transparent !important;
        border-bottom: 1px solid var(--mud-palette-lines-default) !important;
    }

    .biz-expansion-panels > .mud-panel-expanded:hover {
        border-bottom: none !important;
    }

    .biz-expansion-panels *.mud-expand-panel-header {
        padding: 16px;
    }

    .biz-expansion-panels *.mud-expand-panel-gutters {
        padding: 0px 16px 16px 16px !important;
    }
    .biz-expansion-panels > :last-child {
        border-bottom: none !important;
    }

        .biz-expansion-panels > :last-child:hover {
            border-bottom: none !important;
        }

    .biz-expansion-panels .biz-small-text *.mud-expand-panel-text {
        font-size: 14px !important;
    }

    .biz-expansion-panels .biz-mid-text *.mud-expand-panel-text {
        font-size: 16px !important;
    }

/*.biz-expansion-panels-for-employee*/

.biz-expansion-panels-for-employee > :first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.biz-alert * svg {
    font-size: 22px;
    transform: translateY(2px);
}

.biz-small-policy {
    font-size: 10px;
    line-height: normal;
    color: var(--mud-palette-text-secondary);
}

.biz-mid-policy {
    font-size: 12px;
    line-height: normal;
    color: var(--mud-palette-text-secondary);
}
}

/* Contract salary and vacation warning start */
.biz-contract-alert {
    border-radius: 4px;
}
.biz-contract-alert .mud-alert-message {
    padding: 0;
}

.biz-contract-alert p {
    margin-bottom: 4px;
}

.biz-contract-alert-ul {
    margin: 0 24px;
    list-style: disc;
}

/* Contract salary and vacation warning end */

.biz-overlapping-contract-header {
    font-size: 16px;
}

.biz-overlapping-contract-info {
    font-size: 14px;
    color: #757575;
}

.biz-overlapping-contract-paper {
    margin-left: 16px;
    width: 248px;
    padding: 16px;
    margin-top: 16px;
}

@media (max-width: 400px) {
    .biz-overlapping-contract-paper {
        width: 100%;
    }
}

.biz-overlapping-contract-title {
    font-size: 14px;
    padding-bottom: 8px;
}

.biz-overlapping-contract-subtitle {
    font-size: 14px;
}

.biz-overlapping-contract-large-text {
    font-size: 12px;
    padding-top: 8px;
}

.biz-overlapping-contract-small-text {
    font-size: 14px;
    padding-top: 8px;
}

.biz-overlapping-contract-end-button {
    width: 100%;
    margin-top: 16px;
}

.biz-contract-large-button-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    flex-direction: row;
    padding: 0px !important;
    gap: 16px;
}

.biz-contract-small-button-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    gap: 16px;
}

.biz-contract-small-button {
    width: 100%;
}

.biz-contract-large-button {
    margin-bottom: 0;
    margin-top: 16px;
    height: 40px;
}