table {
    font-family: 'Roboto';
    border-collapse: collapse;
    width: 100%;
    background-color: white;
}

/*td, th {
        border: 1px solid #dddddd;*/
/*    border: 0.5px solid #F1F5F9;*/
/*text-align: left;
    padding: 8px;
}*/

th, td, tr {
    border-collapse: collapse;
}

td {
    border: 0.5px solid #f6f9fb;
    text-align: left;
    padding: 8px;
}

th {
    border: 0.5px solid #f6f9fb;
}

tr {
    border: 0.5px solid #f6f9fb;
}

a {
    text-decoration: none;
    display: inline-block;
    padding: 3px 10px;
}

.previous {
    border-style: solid;
    border-width: 1px;
    color: #0080C5;
}

    .previous:hover {
        color: #0080C5;
        transition: 0.2s;
    }

.next {
    border-style: solid;
    border-width: 1px;
    color: #0080C5;
}

    .next:hover {
        color: #0080C5;
        transition: 0.2s;
    }

.round {
    border-radius: 50%;
}

.mud-table-root .mud-table-head .mud-table-cell {
    /*    font-family: 'Manrope';*/
    font-style: normal;
    font-weight: 700;
    font-size: 0.87rem;
    line-height: 1.5rem;
}

.mud-table-cell-custom-group {
    font-weight: 500;
}

.mud-table-cell-custom-group-footer {
    padding-bottom: 50px;
    text-align: right;
}

.colorHeader {
    background-color: #0080c5;
}


.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: white;
    color: black;
    /* height: 120px; */
    text-align: center;
    /*    border-top-color: rgb(126, 125, 141);*/
    /* border-top-style: solid; */
    /* border-top-width: 1px;*/
    bottom: 10px;
}


hr {
    margin: 0 0;
    color: inherit;
    background-color: currentColor;
    border: 0;
    opacity: 0.25;
}

.buttonCreate {
    width: 316px;
    height: 56px;
    top: 30%;
    background: #5A5A5A;
    border-radius: 10px;
}


@media (min-width: 960px) {
    .mud-drawer-open-responsive-md-left.mud-drawer-left-clipped-never .footer {
        margin-left: var(--mud-drawer-width-left);
        width: calc(100% - var(--mud-drawer-width-left));
    }
}

span {
    display: block;
}

.zoneDiv {
    opacity: 0.8;
    width: fit-content;
}

    .zoneDiv:hover {
        opacity: 1;
    }

    .zoneDiv:active {
        /*        background-color: gray;*/
        /*color: white;*/
        border-radius: 8px;
        top: 2px;
    }


.mudBlazorSelect-fontsize .mud-input {
    font-size: 12px;
    font-weight: 400;
    width: 150px;
}

.employeeDivResults {
    background-color: #F1F5F9 !important;
    display: flex;
    align-items: center;
    height: 100%;
    width: 80px;
    font-weight: 700;
    border-radius: 8px;
    padding-left: 16px;
    color: #0080C5;
}

.employeeDiv {
    cursor: pointer;
    background-color: #eae7e7;
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: center;
    font-weight: 700;
    border-radius: 4px;
}

    .employeeDiv:hover {
        border: 1px dotted black;
    }

    .employeeDiv:active {
        background-color: gray;
        color: white;
        border-radius: 4px;
        top: 2px;
    }


.mud-timeline-horizontal {
    flex-direction: row;
    height: 100px;
}

.mud-container {
    padding-top: 20px !important;
}

#logintext.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    margin-top: 10px;
}


/*gia login --------------------------------------*/
.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 0px !important;
    background: #FFFFFF;
    border: 1px solid #D4E6F0;
    border-radius: 8px;
    margin-top: 0px;
    width: 100%;
}

.mud-input > input.mud-input-root, div.mud-input-slot.mud-input-root {
    text-align: left;
    padding: 14px 6px !important;
    border-radius: 8px;
    font: inherit;
    color: currentColor;
    width: 100%;
    border: 0;
    height: 1.1876em;
    margin: 0;
    display: block;
    min-width: 0;
    background: none;
    position: relative;
    box-sizing: content-box;
    letter-spacing: inherit;
    -webkit-tap-highlight-color: transparent;
}

.mud-icon-button-edge-end {
    margin-inline-end: -12px;
    margin-inline-start: unset;
    margin-right: 1px;
}


/*--------------------------------------*/


.employeeWorkDayTimeComponentCss {
    text-align: center;
    border-radius: 4px;
    min-height: 90px;
    width: 100% !important;
    border-style: solid;
    padding: 3px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background-color: white;
}


.divHover {
    cursor: pointer;
    margin-top: 5px;
    color: #006CA6;
    font-family: 'Manrope';
    font-size: 1rem;
    font-weight: 500;
}

    .divHover:hover {
        text-decoration: underline;
    }



#numericToCenter.mud-input-slot.mud-input-root.mud-input-root-text {
    text-align: center;
}



.mud-input > input.mud-input-root-outlined, div.mud-input-slot.mud-input-root-outlined {
    padding: 18.5px 14px;
    text-align: center;
}

.ShiftPageExpansionPanel {
}

    .ShiftPageExpansionPanel .mud-expand-panel-header {
        padding: 0px 10px;
    }


.loginTitle {
    font-family: 'Manrope';
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: -0.03em;
    text-align: center;
    margin-top: 22px;
}

/*.loginTextFields {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 16px;
    gap: 8px;
    width: 398px;
    height: 51px;
    background: #FFFFFF;
    border: 1px solid #D4E6F0;
    border-radius: 8px;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}*/

.loginTextFields {
    margin-top: 8px !important;
}

.mud-input.mud-input-underline:before {
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    position: unset;
    transition: none;
    border-bottom: none;
    pointer-events: none;
}

.mud-input.mud-input-underline:after {
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    position: unset;
    transform: none;
    transition: none;
    border-bottom: none;
    pointer-events: none;
}


.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 16px;
    background: #FFFFFF;
    border: 1px solid #D4E6F0;
    border-radius: 8px;
    margin-top: 0px;

    height:inherit;

}

    .mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text:hover {
        border: 1px solid rgb(from var(--palette-primary-backgroundColor-button) r g b / 70%);
        border-radius: 8px;
        transition: 0.2s;
    }

    .mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text:focus {
        border: 1px solid rgb(from var(--palette-primary-backgroundColor-button) r g b / 70%);
        border-radius: 8px;
        transition: 0.2s;
    }

    .mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text:focus-within {
        border: 1px solid rgb(from var(--palette-primary-backgroundColor-button) r g b / 70%);
        border-radius: 8px;
        transition: 0.2s;
    }

.mudPaperLogin {
}

    .mudPaperLogin.mud-elevation-1 {
        box-shadow: none !important;
    }

    .mudPaperLogin.mud-paper {
        color: var(--mud-palette-text-primary);
        background-color: transparent !important;
        border-radius: var(--mud-default-borderradius);
        transition: box-shadow 300ms cubic-bezier(.4,0,.2,1) 0ms;
    }

.loginPageTextUsernamePassword {
    text-align: left !important;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: -0.03em;
}



/*.btnIcon {
    background-color: transparent;
    border: none;
    color: #404040;
    padding: 4px 6px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 50%;
    text-align: center;
}

    .btnIcon:hover {
        background-color: lightgray;
    }*/



.loginButton {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px 8px 45%;
    gap: 8px;
    background: #0080C5;
    border-radius: 8px;
}

.UploadButton {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /*    padding: 8px 16px 8px 45%;*/
    gap: 8px;
    /*    background: #0080C5;*/
    border-radius: 8px;
    text-transform: none !important;
}

.allLabels {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    text-align: left;
    color: #0d47a1;
}

.labelsPostPopUp {
    text-align: left;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: -0.03em;
}

.mud-button {
    border-radius: 8px !important;
}

.loginButton:hover {
    background: #006CA6;
    border-radius: 8px;
    transition: 0.2s;
}

.mud-button-filled.mud-button-filled-primary:hover, .mud-button-filled.mud-button-filled-primary:focus-visible {
    background: #006CA6;
    border-radius: 8px;
    transition: 0.2s;
}

.forgetPassword {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: -0.03em;
    text-decoration-line: underline;
    color: #0080C5;
}

/*@media (min-width: 0) .mud-container-maxwidth-xs {
    max-width: 340px;
}*/

.mudContainerLogin {
    text-align: center;
    justify-content: center !important;
    position: relative;
    top: calc(50% - 300px);
}

.mudContainerShifts {
    text-align: center;
    justify-content: center !important;
    position: relative;
    top: 5%;
}

.mudContainerPortal {
    text-align: center;
    justify-content: center !important;
    position: relative;
}

.mudContainerWizard {
    text-align: center;
    justify-content: center !important;
}

.loginCheckBox {
}


.mud-icon-root {
    width: 1.1em;
    height: 1.1em;
    display: inline-block;
    transition: fill 200ms cubic-bezier(.4,0,.2,1) 0ms;
    flex-shrink: 0;
    user-select: none;
}

.loginCheckBox .mud-typography-body1 {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: -0.03em;
    color: #000000;
}

.mud-ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: none;
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10,10);
    opacity: 0;
    transition: none;
}


/*.mud-main-content {
    padding-top: 0;
}*/

.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: var(--mud-palette-primary);
    background-color: #F1F5F9 !important;
    /*    transition: all 0.4s ease-out;*/
}

.mud-navmenu.mud-navmenu-default .mud-nav-link.active:hover:not(.mud-nav-link-disabled) {
    color: var(--mud-palette-primary);
    background-color: #F1F5F9 !important;
    /*    transition: all 0.4s ease-out;*/
}

.mud-nav-link:hover:not(.mud-nav-link-disabled) .mud-nav-link-icon.mud-nav-link-icon-default {
    color: var(--mud-palette-primary);
    transform: translate(5px, 0px);
    transition: all 0.4s ease-out;
}
.mud-nav-link:focus:not(.mud-nav-link-disabled) {
    /*    background-color: var(--mud-palette-action-default-hover);*/
    color: var(--mud-palette-menutext-hover);
}


.mud-nav-link:not(.mud-nav-link-disabled) .mud-nav-link-icon.mud-nav-link-icon-default {
    transform: translate(0px, 0px);
    transition: all 0.4s ease-out;
}

.mud-nav-link:not(.mud-nav-link-disabled) .mud-nav-link-text {
    font-weight: 700;
    transform: translate(0px, 0px);
    transition: all 0.2s ease-out;
}




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

.mud-nav-link:hover:not(.mud-nav-link-disabled) .mud-nav-link-text {
    color: var(--mud-palette-menutext-hover);
    transform: translate(0px, 0px);
    transition: all 0.2s ease-out;
}


.mud-navmenu.mud-navmenu-default .mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background-color: white !important;
}

.mud-navmenu.mud-navmenu-default .mud-nav-link:hover {
    background-color: white !important;
}


.mud-nav-group.mud-nav-link:hover:not(.mud-nav-link-disabled) .mud-nav-link-text {
    color: var(--mud-palette-primary);
    transform: translate(0px, 0px);
}


.mud-nav-group .mud-nav-link:hover {
    background-color: white !important;
    transform: translate(0px, 0px) !important;
}

.mud-nav-group .mud-nav-link {
    background-color: white !important;
}

.mud-nav-group * .mud-navmenu .mud-nav-item .mud-nav-link:hover {
    color: var(--mud-palette-primary);
    background-color: white !important;
    transition: all 0.4s ease-out;
}


.mud-nav-link .mud-nav-link-text {
    width: 100%;
    text-align: start;
    margin-left: 0px;
    margin-inline-start: 0px;
    margin-inline-end: unset;
    letter-spacing: 0;
}

.navText {
    /*    font-family: "Manrope", sans-serif;*/
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 19px;
    letter-spacing: -0.03em;
    
}

/*.mud-nav-link.active:not(.mud-nav-link-disabled) {
    font-weight: 700 !important;
}*/

.mud-nav-link {
    width: 100%;
    /*        font-weight: 400;*/
    /*        padding: 8px 16px 8px 16px;*/
    padding: 20px 16px;
    margin-top: 4px;
    margin-bottom: 4px;
    color: inherit;
    line-height: 1.75;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    text-transform: inherit;
    /* background-color: transparent; */
    transition: background-color 250ms cubic-bezier(.4,0,.2,1) 0ms,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0ms,border 250ms cubic-bezier(.4,0,.2,1) 0ms,padding 250ms cubic-bezier(.4,0,.2,1) 0ms;
    align-items: flex-start;
}



.dayOff {
    text-align: center;
    border-radius: 8px;
    height: 5rem;
    width: 100% !important;
    border-style: solid;
    padding: 3px;
}

.dayOffText {
    width: 100%;
    text-align: start;
    padding-left: 10px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
}

.userMenuArrowDown {
    background-color: transparent !important;
}


.mudSelectShiftPageComponent {
}

    .mudSelectShiftPageComponent .mud-select {
        display: flex;
        flex-grow: 0;
        position: relative;
    }

    .mudSelectShiftPageComponent .mud-input > input.mud-input-root-outlined.mud-input-root-adorned-end, div.mud-input-slot.mud-input-root-outlined.mud-input-root-adorned-end {
        padding-right: 0;
        padding-inline-end: 0;
        padding-inline-start: 14px;
        text-align: left;
    }

/*.mud-select {
    text-align:left;
    display: flex;
    flex-grow: 0;
    position: relative;
}*/


.mud-input.mud-input-outlined .mud-input-outlined-border {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: 100%;
    text-align: start;
    pointer-events: none;
    border: 1px solid #D4E6F0;
    border-radius: 8px;
    transition: border-width,border-color 200ms cubic-bezier(.4,0,.2,1) 0ms;
    background: #FFFFFF;
}

    .mud-input.mud-input-outlined .mud-input-outlined-border:hover {
    }


.shiftManagementDateRange {
    padding: 0px;
}

    .shiftManagementDateRange.mud-input.mud-input-underline:before {
        left: 0;
        right: 0;
        bottom: 0;
        content: "";
        position: unset;
        transition: none;
        border-bottom: none;
        pointer-events: none;
    }

    .shiftManagementDateRange.mud-input.mud-input-underline:after {
        left: 0;
        right: 0;
        bottom: 0;
        content: "";
        position: unset;
        transform: none;
        transition: none;
        border-bottom: none;
        pointer-events: none;
    }

.mud-main-content {
    height: inherit
}

.mud-container .mud-container-maxwidth-xxl {
    height: inherit;
}

.mudPaperShiftManagement {
    background-color: #FFFFFF;
    border-radius: 8px;
    /*    height: calc(100% - 91px);*/
    height: calc(100% - 20px);
}

.mudPaperEmployeeView {
    background-color: #FFFFFF;
    border-radius: 8px;
    /*    height: calc(100% - 91px);*/
    height: calc(100% - 20px);
}

.mudPaperShiftManagement2 {
    background-color: #FFFFFF;
    border-radius: 8px;
    /*    height: calc(100% - 91px);*/
    height: calc(100% - 10px);
}

.mudPaperShiftManagementProcessStart {
    background-color: transparent;
    border-radius: 8px;
    height: calc(100% - 10px);
}

.mudPaperIndex {
    border-radius: 8px;
    background-color: transparent !important;
    /*    height: calc(100% - 91px);*/
    height: calc(100% - 20px);
}

.paperbasecss {
    border-radius: 8px;
    background-color: white !important;
    overflow-y: auto;
    overflow-x: hidden;
}

.mudPaperShiftResults {
    background-color: #FFFFFF;
    border-radius: 8px;
    /*    height: calc(100% - 91px);*/
}

.shiftManagementText {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
    text-align: center;
    color: #0080C5;
}

.shiftManagementtext2 {
    margin-right: 20px;
    margin-top: 0px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
}

.aftershiftManagementText {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 3rem;
    text-align: center;
}

.loginPagePortalText {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 2rem;
    text-align: center;
}

.aftershiftManagementtext2 {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5rem;
    text-align: center;
}

.spacePortal {
    width: 4px;
    height: auto;
    display: inline-block;
}

.aftershiftManagementtext3 {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5rem;
    text-align: center;
}

.mudSelectShift {
    min-width: 280px;
    text-align: start;
    background: #FFFFFF;
}

.footerText {
    /*    color: var(--mud-palette-appbar-text);*/
    /*    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: -0.03em;*/
    font-size: 12px;
    line-height: 18px;
    font-family: Inter;
    color: #7e7d8d;
    display: inline-block;
/*    padding-top: 11px;
    padding-bottom: 11px;
    padding-left: 24px;
    padding-right: 24px;*/
}

.mud-chip.mud-chip-size-medium {
/*    height: 24px;
    font-size: 14px;
    border-radius: 8px;*/
}


.line {
    width: 26px;
    height: 0px;
    border: 1px solid #E2E4E7;
    transform: rotate(180deg);
    margin-top: 24px;
}


.iconShiftMenuHover {
}

    .iconShiftMenuHover:hover {       
        color: #0080C5 !important;
    }


.iconHover {
    border-radius: 10px;
}

    .iconHover:hover {
        border-radius: 10px;
        color: #0080C5;
    }

.iconHoverDelete {
    border-radius: 10px;
}

    .iconHoverDelete:hover {
        border-radius: 10px;
        color: red;
    }

/*.iconUpAndDownAnimation {
}
    .iconUpAndDownAnimation:active{
        transform: rotate(180deg);
        transition: all 0.3s linear;
    }*/
/*.myexPanel {
}*/

.mud-expand-panel .mud-expand-panel-header {
    width: 100%;
    align-items: center;
    display: flex;
    font-size: .9375rem;
    line-height: 1;
    min-height: 48px;
    outline: none;
    padding: 10px 10px;
    position: relative;
    transition: min-height .3s cubic-bezier(.25,.8,.5,1);
    user-select: none;
}


#ExpandForShift.mud-expand-panel .mud-expand-panel-header {
    width: 100%;
    align-items: center;
    display: flex;
    font-size: .9375rem;
    line-height: 1;
    outline: none;
    position: relative;
    transition: min-height .3s cubic-bezier(.25,.8,.5,1);
    user-select: none;
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 0px;
    padding-left: 8px;
}





/*.mud-table {
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
    border-radius: var(--mud-default-borderradius);
    transition: box-shadow 300ms cubic-bezier(.4,0,.2,1) 0ms;
    height: calc(90%-200px);
}*/
#resTable.mud-table-cell {
    display: table-cell;
    padding: 0px;
    font-size: .875rem;
    text-align: start;
    font-weight: 400;
    line-height: 1.43;
    border-bottom: 1px solid var(--mud-palette-table-lines);
    letter-spacing: .01071em;
    vertical-align: inherit;
}

.mud-table-dense * .mud-table-row .mud-table-cell {
    padding: 6px 6px 6px 6px !important;
}


.mud-button-icon-size-medium > *:first-child {
    font-size: 24px !important;
}

.saveButton {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 24px 12px 16px;
    gap: 16px;
    position: relative;
    max-width: 168px;
    max-height: 48px;
    background: #48BB7C;
    border-radius: 8px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    cursor: pointer;
}

    .saveButton:hover {
        background: #1E9B5E;
        border-radius: 8px;
        transition: 0.2s;
    }

    .saveButton:active {
        background: #1E9B5E;
        border-radius: 8px;
    }

.deleteButton {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 16px 12px 16px;
    gap: 12px;
    position: relative;
/*    max-width: 168px;*/
    max-height: 48px;
    background: #E8141C;
    border-radius: 8px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    cursor: pointer;
}

    .deleteButton:hover {
        background: #C80911;
        border-radius: 8px;
        transition: 0.2s;
    }

    .deleteButton:active {
        background: #C80911;
        border-radius: 8px;
    }


.cancelButton {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 16px 12px 16px;
    gap: 12px;
    position: relative;
/*    max-width: 146px;*/
    max-height: 48px;
    border: 1px solid #E8141C;
    border-radius: 8px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    letter-spacing: -0.03em;
    color: #E8141C;
    cursor: pointer;
}

    .cancelButton:hover {
        background: rgba(232, 20, 28, 0.24);
        border: 1px solid #E8141C;
        border-radius: 8px;
        transition: 0.2s;
    }

    .cancelButton:active {
        background-color: #E8141C;
        border-radius: 8px;
        color: #FFFFFF;
    }


.cancelButtonGray {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 16px 12px 16px;
    gap: 12px;
    position: relative;
/*    max-width: 146px;*/
    max-height: 48px;
    border: 1px solid #464444;
    border-radius: 8px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    letter-spacing: -0.03em;
    color: #464444;
    cursor: pointer;
}

    .cancelButtonGray:hover {
        background: #e3dbdb;
        border: 1px solid #464444;
        border-radius: 8px;
        transition: 0.2s;
    }

    .cancelButtonGray:active {
        background-color: gray;
        border-radius: 8px;
        color: #FFFFFF;
    }




.cancelButtonWithIcon {
    border: none;
    background: url('/Images/cancelImage.svg') no-repeat center left;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 24px 12px 16px;
    gap: 16px;
    position: relative;
/*    max-width: 146px;*/
    max-height: 48px;
    border: 1px solid #E8141C;
    border-radius: 8px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    letter-spacing: -0.03em;
    color: #E8141C;
    cursor: pointer;
    background-position: center left;
    background-origin: content-box;
}

    .cancelButtonWithIcon:hover {
        background: url('/Images/cancelImage.svg') no-repeat center left;
        background-color: rgba(232, 20, 28, 0.24);
        border: 1px solid #E8141C;
        border-radius: 8px;
        transition: 0.2s;
        color: #E8141C;
        cursor: pointer;
        background-position: center left;
        background-origin: content-box;
    }

    .cancelButtonWithIcon:active {
        border: none;
        background: url('/Images/cancelImageWhite.svg') no-repeat center left;
        color: white;
        background-color: #E8141C;
        border: 1px solid #E8141C;
        border-radius: 8px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 12px 24px 12px 16px;
        gap: 16px;
        position: relative;
        max-width: 146px;
        max-height: 48px;
        border-radius: 8px;
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 19px;
        text-align: center;
        letter-spacing: -0.03em;
        cursor: pointer;
        background-position: center left;
        background-origin: content-box;
    }


.cancelButtonWithIconEmployee {
    border: none;
    background: url('/Images/delete-bin-lineRed.svg') no-repeat center left;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 24px 12px 16px;
    gap: 16px;
    position: relative;
    max-width: 146px;
    max-height: 48px;
    border: 1px solid #E8141C;
    border-radius: 8px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    letter-spacing: -0.03em;
    color: #E8141C;
    cursor: pointer;
    background-position: center left;
    background-origin: content-box;
}

    .cancelButtonWithIconEmployee:hover {
        background: url('/Images/delete-bin-lineRed.svg') no-repeat center left;
        background-color: rgba(232, 20, 28, 0.24);
        border: 1px solid #E8141C;
        border-radius: 8px;
        transition: 0.2s;
        color: #E8141C;
        cursor: pointer;
        background-position: center left;
        background-origin: content-box;
    }

    .cancelButtonWithIconEmployee:active {
        border: none;
        background: url('/Images/delete-bin-lineWhite.svg') no-repeat center left;
        color: white;
        background-color: #E8141C;
        border: 1px solid #E8141C;
        border-radius: 8px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 12px 24px 12px 16px;
        gap: 16px;
        position: relative;
        max-width: 146px;
        max-height: 48px;
        border-radius: 8px;
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 19px;
        text-align: center;
        letter-spacing: -0.03em;
        cursor: pointer;
        background-position: center left;
        background-origin: content-box;
    }





.colorIcon {
}

    .colorIcon:active {
        filter: brightness(0) invert(1);
    }



.normalButton {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 16px 12px 16px;
    gap: 12px;
    position: relative;
    max-width: fit-content;
    max-height: 48px;
    background: #0080C5;
    border-radius: 8px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    cursor: pointer;
    text-transform: none !important;
}

    .normalButton:hover {
        background: #006CA6;
        border-radius: 8px;
        transition: 0.2s;
    }

    .normalButton:active {
        background: #006CA6;
        border-radius: 8px;
    }

.normalButtonSmall {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 16px 12px 16px;
    gap: 12px;
    position: relative;
    width: 100%;
    max-height: 32px;
/*    margin-top: 30px;*/
/*    background: #0080C5;*/
    border-radius: 8px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    letter-spacing: -0.03em;
/*    color: #FFFFFF;*/
    cursor: pointer;
    text-transform: none !important;
}

    .normalButtonSmall:hover {
        background: #006CA6;
        border-radius: 8px;
        transition: 0.2s;
    }

    .normalButtonSmall:active {
        background: #006CA6;
        border-radius: 8px;
    }

.normalButtonDisabled {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 16px 12px 16px;
    gap: 12px;
    position: relative;
    max-width: fit-content;
    max-height: 48px;
    background: #0080C5;
    border-radius: 8px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    opacity: 0.4;
}


.ghostButton {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 16px 12px 16px;
    gap: 12px;
    position: relative;
/*    max-width: fit-content;*/
    /*max-height: 48px;*/
    height: 50px;
    border-radius: 8px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    letter-spacing: -0.03em;
    color: #0080C5;
    border: 1px solid #0080C5;
    cursor: pointer;
    text-transform: none !important;
}

    .ghostButton:hover {
        background-color: rgba(0, 128, 197, 0.24);
        border: 1px solid #0080C5;
        border-radius: 8px;
        transition: 0.2s;
    }

    .ghostButton:active {
        background-color: #006CA6;
        border-radius: 8px;
        color: #FFFFFF;
    }


.ghostButtonYellow {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 16px 12px 16px;
    gap: 12px;
    position: relative;
    max-width: fit-content;
    /*max-height: 48px;*/
    height: 50px;
    border-radius: 8px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    letter-spacing: -0.03em;
    color: #c59700;
    border: 1px solid #c59700;
    cursor: pointer;
    text-transform: none !important;
}

    .ghostButtonYellow:hover {
        background-color: #ede7bf;
        border: 1px solid #c59700;
        border-radius: 8px;
        transition: 0.2s;
    }

    .ghostButtonYellow:active {
        background-color: #c59700;
        border-radius: 8px;
        color: #FFFFFF;
    }




.mud-button-group-text.mud-button-group-override-styles.mud-button-group-text-primary.mud-button-group-horizontal:not(.mud-button-group-rtl) .mud-button-root:not(:first-child), .mud-button-group-text.mud-button-group-override-styles.mud-button-group-text-primary.mud-button-group-horizontal:not(.mud-button-group-rtl) > :not(:first-child) .mud-button-root {
    border-left: 1px solid var(--mud-palette-primary);
    border-radius: 0px !important;
}


.tableTitle {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
}



/*New CheckBox*/

.CheckBoxContainer {
    display: block;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: -0.03em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default checkbox */
    .CheckBoxContainer input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Create a custom checkbox */
.CheckBoxCheckmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 23px;
    width: 23px;
    background: #FFFFFF;
    border: 1px solid #D4E6F0;
    border-radius: 4px;
}

/* On mouse-over, add a grey background color */
.CheckBoxContainer:hover input ~ .CheckBoxCheckmark {
    background: #FFFFFF;
    border: 1px solid rgb(from var(--palette-primary-backgroundColor-button) r g b / 70%);
    border-radius: 4px;
}

/* When the checkbox is checked, add a blue background */
.CheckBoxContainer input:checked ~ .CheckBoxCheckmark {
    border: 1px solid rgb(from var(--palette-primary-backgroundColor-button) r g b / 70%);
    background: rgb(from var(--palette-primary-backgroundColor-button) r g b / 70%);
    border-radius: 4px;
}

/* Create the checkmark/indicator (hidden when not checked) */
.CheckBoxCheckmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.CheckBoxContainer input:checked ~ .CheckBoxCheckmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.CheckBoxContainer .CheckBoxCheckmark:after {
    left: 7px;
    top: 3px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 2.9px 2.9px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.wizardTitle1 {
    margin-top: 30px;
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    text-align: center;
    letter-spacing: -0.03em;
}

.wizardTitle2 {
    margin-top: 16px;
    margin-bottom: 40px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    letter-spacing: -0.03em;
}

.timeLineText {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    letter-spacing: -0.03em;
    color: #0080C5;
}

.addNewTextWizard {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    letter-spacing: -0.03em;
    color: #0080C5;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /*    padding: 8px 16px;*/
    gap: 8px;
    background: #F1F5F9;
    border: 1px dashed #0080C5;
    border-radius: 8px;
    transition: all 0.4s ease-out;
    height: 56px;
    text-transform: none !important;
    /*    box-shadow: 0px 16px 32px rgba(0, 128, 197, 0.16);*/
    cursor: pointer;
}

    .addNewTextWizard:hover {
        border: 1px solid #0080C5;
        background-color: #0080C5;
        color: white;
        transition: all 0.4s ease-out;
    }

.mud-timeline-horizontal.mud-timeline-position-top::before {
    top: 47px;
    bottom: auto;
    left: 0px;
}

.wizardStartTextbutton {
    justify-content: center;
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: -0.03em;
    color: #0080C5;
}

.wizardStartButton {
    text-align: center;
    justify-content: center;
    background-color: transparent;
    border: 1px dashed #0080C5;
    border-radius: 8px;
    cursor: pointer;
}

    .wizardStartButton:hover {
        background: #FFFFFF;
        border-radius: 8px;
        transform: translate(0px,-10px);
        transition: all 0.3s ease-out;
    }

.wizardtabCompany {
    margin-top: 16px;
    margin-bottom: 40px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    letter-spacing: -0.03em;
    background-color: #FFFFFF;
}


/*.mud-tabs {
    display: flex;
    flex-direction: column;*/
    /*    margin-top: 16px;
    margin-bottom: 10px;*/
    /*font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    letter-spacing: -0.03em;*/
/*    background-color: #FFFFFF;*/
/*}


.mud-tabs-toolbar {
    position: relative;
    background-color: var(--mud-palette-surface);
    border: 1px solid #E2E4E7;
    border-radius: 8px;
    max-width: fit-content;
    height: 50px;
}

.mud-tab:hover {
    cursor: pointer;
    background-color: #F1F5F9;
    color: var(--mud-palette-primary);
}

.mud-tab.mud-tab-active:hover {
    cursor: pointer;
    background-color: #F1F5F9;
    color: var(--mud-palette-primary);
}

.mud-tab-slider {
    position: absolute;
    background: unset;
}*/

/*.mud-tabs-toolbar.mud-tabs-rounded {
    border-radius: 8px;
    height: 48px;
}*/

/*.mud-tab.mud-tab-active {
    color: var(--mud-palette-primary);
    background-color: #F1F5F9;
}

.mud-tab.mud-ripple {
    position: relative;
    overflow: hidden;
    border-left: 1px solid #E2E4E7;
}

.mud-tab.mud-tab-active {
    color: var(--mud-palette-primary);*/
    /*    border-left: none;*/
    /*    border-left: 1px solid #E2E4E7;*/
/*}*/



.mud-tabs {
    display: flex;
    flex-direction: column;
   margin-top: 16px;
    margin-bottom: 10px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    letter-spacing: -0.03em;
/*    background-color: #FFFFFF;*/
}


.mud-tab:hover {
    cursor: pointer;
/*    background-color: #F1F5F9;*/
    color: var(--mud-palette-primary);
}

.mud-tab.mud-tab-active:hover {
    cursor: pointer;
    background-color: transparent;
    color: var(--mud-palette-primary);
}

.companyBox {
    cursor: pointer;
    background: #D4E6F0;
    border-radius: 8px;
    width: 100%;
    text-align: center;
}

    .companyBox:hover {
        background: #FFFFFF;
        border-radius: 8px;
        transform: translate(0px,-10px);
        transition: all 0.3s ease-out;
    }


.IndexBox {
    /*cursor: pointer;*/
    background: #FFFFFF;
    border: 2px solid #FFFFFF;
    border-radius: 16px;
    width: 100%;
    min-width: 80px;
    text-align: start;
    padding: 1rem;
    height: 100% ;
    min-width: 290px;
}

.PostBox {
    display: flex;
    align-items: center;
    height: 100%;
    border-radius: 4px;
    width: 50px;
    text-align: center;
    justify-content: center;
}




#boxjobIndex .IndexBox:hover {
    border-radius: 16px;
    border: 2px solid #1E9B5E;
    transition: all 0.3s ease-out;
}

#boxrepoIndex .IndexBox:hover {
    border-radius: 16px;
    border: 2px solid #E8141C;
    transition: all 0.3s ease-out;
}

#boxdayoffIndex .IndexBox:hover {
    border-radius: 16px;
    border: 2px solid #3E7AFF;
    transition: all 0.3s ease-out;
}

#boxrequestIndex .IndexBox:hover {
    border-radius: 16px;
    border: 2px solid #F79000;
    transition: all 0.3s ease-out;
}


.IndexBoxText {
    padding-inline: 14px;
    /*border-radius: 32px;*/
/*    background-color: var(--primary-color-light);*/
    /*background-color: rgba(var(--mud-palette-primary), 0.8);*/
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.25;
    letter-spacing: -0.03em;
    font-family: 'Manrope';
    color: var(--mud-palette-primary);
}

.IndexBoxText2 {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-size: 80px;
    line-height: 80px;
    text-align: center;
    letter-spacing: -0.03em;
}


.companyBoxText {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: -0.03em;
    color: #0080C5;
    justify-content: center;
}

.mudContainerWizard {
    text-align: center;
    justify-content: center !important;
    position: relative;
    top: 5%;
}


.userMenu {
    width: 100%;
    cursor: pointer;
    text-align: center;
    justify-content: center;
}

    .userMenu:hover {
        color: #0080C5;
        transition: all 0.3s ease-out;
    }


.userMenuUp {
}

    .userMenuUp:hover {
        color: #0080C5;
        transition: all 0.3s ease-out;
    }



.mud-nav-link-icon-default {
    margin-right: 1rem
}

.changeColor {
}

    .changeColor:hover {
        color: #0080C5;
        transition: all 0.4s ease-out;
    }


.accountCss {
    border: 1px solid #E2E4E7;
    border-radius: 8px;
    color: #404040;
    transition: all 0.4s ease-out;
}

    .accountCss:hover {
        border: 1px solid #0080C5;
        border-radius: 8px;
        color: #0080C5;
        transition: all 0.4s ease-out;
    }

.accountCssTextCompany {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.03em;
    color: #404040;
}

.accountCssTextEmail {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: -0.03em;
    color: var(--palette-primary-TextColor-button);
}

.HeadetLogoText {
/*    height: 107px;*/
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 800;
    font-size: 1.4375rem;
    line-height: 31px;
    letter-spacing: -0.03em;
    /*    text-align: center;*/
    text-align: left;
/*    padding: 20px;*/
    animation: fadein 1s;
}

.HeadetLogoTextLogin {
    /*    height: 107px;*/
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 800;
    font-size: 1.4375rem;
    line-height: 31px;
    letter-spacing: -0.03em;
    text-align: center;
    padding: 20px;
    animation: fadein 1s;
}


@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.hideNavMenuStyle {
    cursor: pointer;
    padding-right: 1rem;
    width: 100%;
    position: absolute;
    height: 25px;
    bottom: 50px;
}

.hideNavMenuText {
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
}

.hideMenuSmall {
    cursor: pointer;
    width: 100%;
    position: absolute;
    height: 25px;
    bottom: 50px;
}



.customized-scrollbar {
    overflow-y: auto;
    overflow-x: hidden;
    width: 4px;
    background: #E2E4E7;
    border-radius: 8px;
}

    /* width */
    .customized-scrollbar::-webkit-scrollbar {
        width: 4px;
    }

    /* Track */
    .customized-scrollbar::-webkit-scrollbar-track {
        box-shadow: inset 0 0 0px white;
        border-radius: 0px;
    }

    /* Handle */
    .customized-scrollbar::-webkit-scrollbar-thumb {
        background: #E2E4E7;
        border-radius: 8px;
    }

        /* Handle on hover */
        .customized-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #E2E4E7;
        }

.expanpanelCss {
    font-weight: 700;
    font-size: 1.25rem;
    border: 1px solid #E2E4E7 !important;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    border-radius: 8px !important;
    color: #404040;
    transition: all 0.4s ease-out;
}

    .expanpanelCss:hover {
        font-weight: 700;
        font-size: 1.25rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        border: 1px solid var(--mud-palette-primary) !important;
        border-radius: 8px !important;
        color: var(--mud-palette-primary);
/*        box-shadow: 0px 16px 32px rgba(0, 128, 197, 0.16) !important;
        transition: all 0.4s ease-out;*/
    }

    .expanpanelCss:focus {
        font-weight: 700;
        font-size: 1.25rem;
        padding-left: 0.75rem;
        border: 1px solid var(--mud-palette-primary) !important;
        border-radius: 8px !important;
        color: var(--mud-palette-primary);
/*        transition: all 0.4s ease-out;
        box-shadow: 0px 16px 32px rgba(0, 128, 197, 0.16) !important;*/
    }


    .expanpanelCss:focus-within {
        font-weight: 700;
        font-size: 1.25rem;
        padding-left: 0.75rem;
        border: 1px solid var(--mud-palette-primary) !important;
        border-radius: 8px !important;
        color: var(--mud-palette-primary);
/*        transition: all 0.4s ease-out;
        box-shadow: 0px 16px 32px rgba(0, 128, 197, 0.16) !important;*/
    }


.mud-toolbar-gutters {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.pageTitle {
    font-size: 24px;
    font-family: 'Manrope';
    font-weight: 600;
}

.pageTitleEmployeeView {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}


.mud-table-root {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    height: inherit;
}

.mud-tabs-toolbar-content {
    width: 100%;
    flex: 1 1 auto;
    display: inline-block;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 8px;
}


.tamplateExpansionPanelTitle {
    font-weight: 600;
    font-size: 1rem;
    font-family: 'Manrope';
}


::-webkit-scrollbar-thumb {
    background: #cee7f1 !important;
    border-radius: 8px !important;
}

::-webkit-scrollbar {
    width: 4px !important;
    height: 8px;
    z-index: 1;
}


#postTable th,
#postTable td,
#postTable tr {
    border-collapse: collapse;
    border-color: transparent !important;
}

#postTable .mud-table-cell {
    padding-top: 8px;
    padding-right: 20px;
    padding-bottom: 8px;
    padding-left: 0px;
}

.postNoHover {
}

.postHover {
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.08);
    /*    opacity:0.5;*/
}

.onHoverClass {
}

    .onHoverClass:hover {
        box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.08);
        /*    opacity:0.5;*/
    }
/*        .onHoverClass:hover .dropdownDiv {
            display: block;
        }*/

#employeeAttributeTable th,
#employeeAttributeTable td,
#employeeAttributeTable tr {
    border-collapse: collapse;
    border-color: transparent !important;
}

#employeePageTable th,
#employeePageTable td,
#employeePageTable tr {
    border-collapse: collapse;
    border-color: transparent !important;
}


#accessrightsPageTable th,
#accessrightsPageTable td,
#accessrightsPageTable tr {
    border-collapse: collapse;
    border-color: transparent !important;
    border: 0px solid #ffffff;
}


#supplierRegistryPageTable th,
#supplierRegistryPageTable td,
#supplierRegistryPageTable tr {
    border-collapse: collapse;
    border-color: transparent !important;
}

#messagePageTable th,
#messagePageTable td,
#messagePageTable tr {
    border-collapse: collapse;
    border-color: transparent !important;
}

#suitableEmployeePageTable th,
#suitableEmployeePageTable td,
#suitableEmployeePageTable tr {
    border-collapse: collapse;
    border-color: transparent !important;
}



#SelectionPostTable th,
#SelectionPostTable td,
#SelectionPostTable tr {
    border-collapse: collapse;
    border-color: transparent !important;
}


.mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell:first-child {
    width: 20px;
    border-radius: var(--mud-default-borderradius) 0 0 0;
}

.mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd) {
    background-color: rgba(241, 245, 249, 0.4);
}

#employeeAttributeTable {
    --mud-palette-table-hover: #D4E6F0;
}

    #employeeAttributeTable .mud-table-container {
        --mud-palette-table-hover: #D4E6F0;
        max-height: 525px;
    }

#employeePageTable .mud-table-container {
    --mud-palette-table-hover: #D4E6F0;
    max-height: 500px;
    border-radius: 8px;
}

#accessrightsPageTable .mud-table-container {
    --mud-palette-table-hover: #D4E6F0;
    max-height: fit-content;
    border-radius: 8px;
}


#supplierRegistryPageTable .mud-table-container {
    --mud-palette-table-hover: #D4E6F0;
    max-height: 500px;
    border-radius: 8px;
}

#messagePageTable .mud-table-container {
    --mud-palette-table-hover: #D4E6F0;
    border-radius: 8px;
}

#suitableEmployeePageTable .mud-table-container {
    --mud-palette-table-hover: #D4E6F0;
    max-height: 346px;
}

#SelectionPostTable .mud-table-container {
    --mud-palette-table-hover: #D4E6F0;
    max-height: 470px;
}

#employeeAttributeTable .mud-table-root .mud-table-head {
    display: table-header-group;
    border-bottom: 2px solid #6da1ef;
}

#employeePageTable .mud-table-root .mud-table-head {
    display: table-header-group;
    border-bottom: 2px solid var(--mud-palette-primary);
}

#accessrightsPageTable .mud-table-root .mud-table-head {
    display: table-header-group;
/*    border-bottom: 2px solid var(--mud-palette-primary);*/
}


#supplierRegistryPageTable .mud-table-root .mud-table-head {
    display: table-header-group;
    border-bottom: 2px solid var(--mud-palette-primary);
}

#messagePageTable .mud-table-root .mud-table-head {
    display: table-header-group;
    border-bottom: 2px solid var(--mud-palette-primary);
}

#suitableEmployeePageTable .mud-table-root .mud-table-head {
    display: table-header-group;
    border-bottom: 2px solid #6da1ef;
}



#SelectionPostTable .mud-table-root .mud-table-head {
    display: table-header-group;
    border-bottom: 2px solid #6da1ef;
}

.mud-table-pagination-toolbar {
    margin-top: 1rem;
    border-top: 0px solid var(--mud-palette-table-lines) !important;
    height: 52px;
    /*    padding-right: 2px;*/
    padding-inline-end: 2px;
    padding-inline-start: unset;
}


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

.mud-dialog .mud-dialog-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-bottom-left-radius: var(--mud-default-borderradius);
    border-bottom-right-radius: var(--mud-default-borderradius);
    padding: 0px
}


.mudTableTitleCss {
    padding: 0 !important;
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 32px;
}

.mudtableContentCss {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

.mud-tab {
    width: 100%;
    min-width: 160px;
    display: inline-flex;
    padding: 6px 12px;
    min-height: 48px;
    flex-shrink: 0;
    font-weight: 500;
    line-height: 1.75;
    user-select: none;
    white-space: normal;
    letter-spacing: .02857em;
    text-transform: none !important;
    text-align: center;
    align-items: center;
    justify-content: center;
    transition: background-color 150ms cubic-bezier(.4,0,.2,1) 0ms;
}


.employeeSettingsGroupTitleCss {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 32px;
    text-align: start !important;
}

.employeeSettingsTitleCss {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: -0.03em;
}

.userSettingsTableCss {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
}

.userSettingsTextCss {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: -0.03em;
}

.companySettingsTitle {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    text-align:left;
}

.companySettingsTitle2 {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    text-align: left;
}

.upLoadButtonText {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    letter-spacing: -0.03em;
}

.arrowResults {
    margin-top: 10px;
    justify-items: center;
    text-align: center;
    width: 30px;
    height: 30px;
    left: 30px;
    top: 0px;
    box-shadow: 0px 2px 8px rgb(0 0 0 / 16%);
    border-radius: 16px;
}


.mud-checkbox {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
    /*    color: var(--mud-palette-primary);*/
}


.mud-chart-donut .mud-donut-segment {
    stroke-linecap: round;
    stroke-width: 2;
    fill: transparent;
    pointer-events: stroke;
    -webkit-transition: stroke .2s ease;
    -moz-transition: stroke .2s ease;
    -o-transition: stroke .2s ease;
    transition: stroke .2s ease;
}

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

@media (min-width: 1280px) {
    .mud-container-maxwidth-lg {
        max-width: 1280px;
    }
}

/*.newplanButtonPosts {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px 8px 30%;
    gap: 8px;
    background: #0080C5;
    border-radius: 8px;
    color:white;
}*/



.newplanButtonPostsghostButton {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px 12px 16px;
    gap: 12px;
    position: relative;
    max-height: 48px;
    border-radius: 8px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    letter-spacing: -0.03em;
    /*    color: #0080C5;*/
    /*    border: 1px solid #0080C5;*/
    border: 1px solid #D4E6F0;
    cursor: pointer;
    text-transform: none !important;
}

    .newplanButtonPostsghostButton:hover {
        background-color: white;
        border: 1px solid #0080C5;
        border-radius: 8px;
        transition: 0.2s;
    }

    .newplanButtonPostsghostButton:active {
        background-color: #006CA6;
        border-radius: 8px;
        color: #FFFFFF;
    }



.newplanButtonStart {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px 8px 40%;
    gap: 8px;
    background: #0080C5;
    border-radius: 8px;
    color: white;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    letter-spacing: -0.03em;
}

@media (min-width: 0) {
    .mud-container-maxwidth-xs {
        max-width: 340px;
    }
}

@media (min-width: 600px) {
    .mud-container {
        padding-left: 0px;
        padding-right: 0px;
    }
}


.gridPaddingPopUp {
    padding: 12px 0px;
}



.circular-chart {
    display: block;
    margin: 10px auto;
    max-width: 80%;
    max-height: 250px;
}

.circle {
    stroke: #4CC790;
    fill: none;
    stroke-width: 2.8;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
}

.circle-inner {
    stroke: red;
    fill: none;
    stroke-width: 2.8;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
}

@keyframes progress {
    0% {
        stroke-dasharray: 0 100;
    }
}


.MudTabPlanText {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.03em;
}

.MudTabPlanTextEmployeeView {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
}


.muddatepickerShifts {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: -0.03em;
    height: 48px;
    margin-top: 0px;
}

.mud-picker .mud-picker-actions {
    flex: 0 0 auto;
    display: flex;
    padding: 16px;
    align-items: center;
    justify-content: flex-end;
}

.expansionPanelEmployees {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
    padding: 8px;
    text-align: start;
}

.indexTableText {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: -0.03em;
}


/*.mud-tooltip {
    padding: 0px;
}*/

.tooltipCss {
    color: black;
    border-radius: 4px;
    border: 1px solid #0080c5;
    background-color: white;
    max-width: 200px;
    word-wrap: break-word;
    box-shadow: 0px 8px 16px rgb(0 0 0 / 8%) !important;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    text-align: left;
}

.mud-input-adornment-end {
    margin-left: 8px;
    padding-right: 8px;
    margin-inline-start: 8px;
    margin-inline-end: unset;
}

.shiftPageZoneText {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.03em;
}



#indexEmployeeTable th,
#indexEmployeeTable td,
#indexEmployeeTable tr {
    border-collapse: collapse;
    border-color: transparent !important;
}


#indexEmployeeTable .mud-table-container {
    --mud-palette-table-hover: #D4E6F0;
    max-height: 423px;
}



#indexEmployeeTable .mud-table-root .mud-table-head {
    display: table-header-group;
    border-bottom: 2px solid #6da1ef;
}


.tablestickyCol {
    position: sticky;
    background-color: white;
    width: 100px;
    left: 0px;
}

.tablestickyHeaderCol {
    position: sticky !important;
    left: 0;
    z-index: 5 !important;
}

.spinnerLoaderText1 {
    /*    padding-left: 3px;
    left: 16%;
    height: 100%;
    position: absolute;
    top: 16%;
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    letter-spacing: -0.03em;
    color: var(--mud-palette-text-primary) !important;*/


    padding-left: 3px;
    left: 15%;
    height: 100%;
    position: absolute;
    /* top: 32%;*/
    align-content: center;
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    letter-spacing: -0.03em;
    color: var(--mud-palette-text-primary) !important;
}


.spinnerLoaderTextStart {
    /*    padding-left: 3px;
    left: 16%;
    height: 100%;
    position: absolute;
    top: 26%;
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    letter-spacing: -0.03em;
    color: var(--mud-palette-text-primary) !important;*/


    padding-left: 3px;
    left: 15%;
    height: 100%;
    position: absolute;
    /*    top: 32%;*/
    align-content: center;
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    letter-spacing: -0.03em;
    color: var(--mud-palette-text-primary) !important;
}




.spinnerLoaderText2 {
    /*    left: 12%;
    height: 100%;
    position: absolute;
    top: 46%;
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    letter-spacing: -0.03em;
    color: var(--mud-palette-text-primary) !important;*/

    padding-left: 3px;
    left: 14%;
    height: 100%;
    position: absolute;
    top: 30%;
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    letter-spacing: -0.03em;
    color: var(--mud-palette-text-primary) !important;
}

.chipResults {
    width: fit-content;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1rem;
}


#list-posts-index {
    font-size: 16px;
    font-family: 'Roboto';
    font-weight: 400;
    line-height: 19px;
    letter-spacing: normal;
    text-transform: none;
}


.hide {
    display: none;
}

.resultsdatediv:hover + .hide {
    display: block;
}


.cutScheduleText {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5rem;
}


.mud-alert-filled-success {
    color: #1E9B5E;
    background: #D8EAE7 !important;
}

.mud-alert-filled-info {
    color: #0080C5;
    background: #D4E6F0 !important;
}

.mud-alert-filled-warning {
    color: #F19100;
    background: #EEE8DD !important;
}

.mud-alert-filled-error {
    color: #E8141C;
    background: #F1D5D6 !important;
}

.mud-snackbar {
    opacity: 1 !important;
    display: flex;
    flex-grow: initial;
    padding: 6px 16px;
    align-items: center;
    position: relative;
    pointer-events: auto;
    font-weight: 400;
    line-height: 1.43;
    overflow: hidden;
    margin-top: 16px;
    min-width: 288px;
    max-width: 500px;
    border-radius: 4px;
    box-shadow: 0 16px 24px 0px rgb(0 0 0 / 4%), 0 8px 16px 0 rgb(0 0 0 / 8%), 0 4px 12px 0 rgb(0 0 0 / 12%);
}

.mud-primary-hover {
    background-color: #F1F5F9 !important;
}

.mud-list-item-gutters {
    padding-left: 16px;
    padding-right: 16px;
}

    .mud-list-item-gutters:hover {
        padding-left: 16px;
        padding-right: 16px;
        background-color: #F1F5F9 !important;
    }

.mud-divider-fullwidth {
    flex-grow: 0;
    width: 100%;
}

.EmployeeViewMenu {
    text-align: center;
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    cursor:pointer;
}
    .EmployeeViewMenu:hover {
        color: #0080C5;
    }
    .EmployeeViewMenu:active {
        color: #0080C5;
    }


.InheritColorEmployeeView {
    color:inherit;
}

.secondTitleEmployeeView {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    letter-spacing: -0.03em;
}

/*.mud-popover.mud-popover-relative-width {
    min-width: fit-content;
    width: 100%;
}*/

.mud-drawer.mud-drawer-temporary.mud-drawer-pos-bottom.mud-drawer--closed {
    bottom: calc(-2*var(--mud-drawer-content-height));
}


.mud-input-control > .mud-input-control-input-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: inherit;

    height:inherit;
}

.mud-list-item-icon {
    color: var(--mud-palette-action-default);
    display: inline-flex;
    min-width: 40px;
    flex-shrink: 0;
}
.shiftEmployeeSuitableCss {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 24px;
}

.employeeAvailabilityBoxCss {
    text-align: center;
    vertical-align:middle;
    width:100%;
}

.mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell {
    background-color: var(--mud-palette-surface);
    position: sticky;
    z-index: 2;
    top: -1px;
}




.expansioPanelImportanceLabel {
    font-weight: 400;
    font-size: 1rem;
    font-family: 'Roboto';
    color:#404040 !important;
    margin-top:0.5rem;
}

.dropbtn {
    cursor: pointer;
    display: inline-block;
    color: #404040;
    text-align: center;
    padding: 0;
}

    .dropbtn:hover, .dropbtn:focus {
        display: inline-block;
        color: #0080C5;
        text-align: center;
        padding: 0;
    }

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 180px;
    overflow: auto;
/*    right: 0;*/
    top: 0;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    .dropdown-content a {
        color: #404040;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

        .dropdown-content a:hover {
            background-color: #F1F5F9;
            color: #0a58ca !important;
        }

/*.dropdown a:hover {
    background-color: #ddd;
}*/

.show {
    display: block;
}

.employeeTableTitle {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1rem
}

.employeeTableDay {
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 0.875rem;
    padding-bottom: 0;
}
.employeeTableMonth {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.75rem;
    padding-top: 0
}

.employeeTableEmployeeName {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 800;
    font-size: 0.75rem;
    line-height: 0.875rem;
}

.employeeTableEmployeeDayOffButton {
    min-width: 12rem !important;
    border-radius: 0.5rem;
    padding-top: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
    border: 1px solid #F1F5F9;
    background-color: #F1F5F9;
    justify-content: space-between
}

.employeeTableEmployeeWorkingDay {
    padding: 0px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 0.875rem;
    text-align: center;
}

.employeeTableemployeeCurrentShift {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1rem;
    letter-spacing: -0.03em;
}

.employeeTableemployeeCurrentShiftWorkCenterPostZone {
    margin-bottom: 0px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 0.875rem;
    letter-spacing: -0.03em;
}

.employeeTableemployeeCurrentShiftTemplate {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1rem;
    letter-spacing: -0.03em;
}

.employeeTablePostAndZoneDialog {
    height: 5rem;
    mix-blend-mode: normal;
    border: 1px solid #E2E4E7;
    background-color: #FFFFFF;
    border-radius: 0.5rem;
    min-width: 12rem !important;
    padding-top: 0.5rem;
    padding-right: 0px;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
}

.cardHeaderBackgroundColor {
    background-color: var(--mud-palette-primary);
}

.cardHeaderTextColor {
    color: var(--mud-palette-appbar-text);
}
.cardCss {
    border-radius: 8px;
    font-size: 12px;
    width: 100%;
    border-radius: 12px;
}

.cardCss2 {
    border-radius: 8px;
    font-size: 12px;

}

.cardContentCss2 {
    overflow-x: auto;
}

.cardContentCss {
    height:440px;
    overflow-x: auto;
}

.cardContentServisesCss {
    height: 320px;
    overflow-x: auto;
}

.cardContentApplicationCss {
    padding: 24px !important;
    overflow-x: auto;
    min-width: 286px;
    height: 170px;
    box-shadow: 0px 2px 8px -2px rgba(57, 57, 57, 0.04), 0px 12px 16px rgba(57, 57, 57, 0.02);
    border-radius: 12px;
    border: 1px solid #d9e5f0;
}

.cardText1 {
    font-weight:700;
    font-size:16px;
}

.cardText2 {
    font-weight: 400;
    font-size: 14px;
    color: #6B6B6B;
}


.mat-body-strong{
    font: 500 14px / 24px Roboto;
    letter-spacing: .0179em;
}

.normal-wrap{
    white-space: normal;
}

.terms{
    text-decoration: none;
}

.personal-data{
   text-decoration: none;
}

.mud-input-adornment {
    padding-right: 0px;
    padding-left: 16px;
    height: 0.01em;
    display: flex;
    max-height: 2em;
    align-items: center;
    white-space: nowrap;
}

.searchBox {
    padding: 0 11px 0 13px;
    width: 100%;
    /*    height: 35px;*/
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    text-overflow: ellipsis;
    background: #FFFFFF;
    border: 1px solid #D4E6F0;
    border-radius: 8px;
    padding: 14px 16px !important;
}


.Newfooter {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40px;
    text-align: right;
    font-family: "FactSemiExpanded",sans-serif,sans-serif;
}

.timelineAirplaneRotate {
    transform: rotate(90deg);
}

.mud-button-filled.mud-button-filled-primary {
    color: var(--palette-primary-TextColor-button);
    background-color: var(--palette-primary-backgroundColor-button);
    text-transform: none;
}

    .mud-button-filled.mud-button-filled-primary:hover {
        color: var(--palette-primary-TextColor-button);
        background-color: color-mix(in srgb, var(--palette-primary-backgroundColor-button), black 20%);
        text-transform: none;
    }

.mud-button-filled.mud-button-filled-secondary {
    color: var(--palette-secondary-TextColor-button);
    background-color: var(--palette-secondary-backgroundColor-button);
    text-transform: none;
}
    .mud-button-filled.mud-button-filled-secondary:hover {
        color: var(--palette-secondary-TextColor-button);
        background-color: color-mix(in srgb, var(--palette-secondary-backgroundColor-button), black 20%);
        /* box-shadow: 0 0 6px rgb(68 67 62 / 72%);*/
        text-transform: none;
    }


.ct-slide-right {
    position: relative;
    animation: my_animation 1.5s;
    animation-fill-mode: both;
}

@keyframes my_animation {
    from {
        left: -300px;
        opacity: 0
    }

    to {
        left: 0;
        opacity: 1
    }
}


.ct-animate-fadein {
    animation: fadeInAnimation ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-delay: 1.5s;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.mud-badge.mud-badge-top.left.mud-badge-overlap {
    inset: auto calc(100% - 28px) calc(100% - 33px) auto;
}


.mud-badge.mud-badge-bottom.right.mud-badge-overlap {
    inset: calc(100% - 44px) auto auto calc(100% - 32px);
}

.mud-badge.mud-badge-icon {
    width: 30px !important;
    height: 30px !important;
}

.mud-badge {
    border-radius: 20px;
    height:25px;
    min-width:25px;
    font-size: 14px;
    letter-spacing: 0;
    padding: 4px 6px;
    pointer-events: auto;
    line-height: 1;
    position: absolute;
    text-align: center;
    text-indent: 0;
    transition: .3s cubic-bezier(.25,.8,.5,1);
    white-space: nowrap;
}

    .mud-badge.mud-badge-icon .mud-icon-badge {
        color: inherit;
        font-size: 20px;
        margin-left: -2px;
        margin-inline-start: -2px;
        margin-inline-end: unset;
    }


.mud-input > textarea.mud-input-root {
    font: inherit;
    color: currentColor;
    width: 100%;
    border: 0;
    height: auto;
    padding: 0;
    display: block;
    min-width: 0;
    background: none;
    position: relative;
    box-sizing: content-box;
    letter-spacing: inherit;
    -webkit-tap-highlight-color: transparent;
    height: auto;
    resize: none;
    cursor: auto;
    padding: 14px 16px !important;
}

.mud-button-group-text.mud-button-group-override-styles.mud-button-group-horizontal:not(.mud-button-group-rtl) > :not(:first-child) .mud-button-root {
    border-left: 0px solid var(--mud-palette-text-primary);
}

.mud-button-group-root .mud-button-root.mud-icon-button {
    padding-right: 0px;
    padding-left: 0px;
}

.mud-button-group-horizontal:not(.mud-button-group-rtl) > .mud-button-root:not(:last-child), .mud-button-group-horizontal:not(.mud-button-group-rtl) > :not(:last-child) .mud-button-root {
    text-transform: none;
}

.mainMenuSelect {
   
}

    .mainMenuSelect > .mud-button {
        text-transform: none;
        color: var(--mud-palette-text-primary);
        
    }

    .mainMenuSelect:hover > .mud-button {
        text-transform: none;
        color: var(--mud-palette-menutext-hover);
    }



/* background start page */
.green-element,
.yellow-element {
    width: 600px;
    height: 100px;
    position: absolute;

    border-radius: 50%;
    filter: blur(55px);
    z-index:-10;
    
}

.green-element {
    top: 25%;
    right: 10%;
    transform: rotate(1.75deg);
    background-color: rgba(117, 183, 38, 0.7);
}

.yellow-element {
    left: 33%;
    top: 20%;
    transform: rotate(14.03deg);
    background-color: rgba(255, 214, 0, 0.7);
}


.loginPageButtons {
    width: 250px;
    padding: 12px 24px 12px 16px;
    text-transform: none;
    border-radius: 6px !important;
    height: 35px
}

/*.tableRowSelected {
    background-color: #3fbf3b47;
}*/

@media (max-width:1650px) {
    .cardContentCss {
        height: 310px;
        
        overflow-x: auto;
    }
}

.mud-icon-button {
    flex: 0 0 auto;
    padding: 12px;
/*    overflow: visible;*/
    font-size: 1.5rem;
    text-align: center;
    transition: background-color 150ms cubic-bezier(.4,0,.2,1) 0ms;
    border-radius: 50%;
    /*color: inherit !important;*/
}

.coloruserMain {
    color: inherit !important;
}


.appBarCss {
    margin-inline: auto;
/*    height: 35px;*/
/*    position: absolute;
    top: 4px;
    left: calc(100% - 286px);*/
    width:100%;
    color: var(--palette-primary-TextColor-button);
}


.ghostButtonBack {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 16px 12px 16px;
    gap: 12px;
    position: relative;
/*    width: 100%;*/
    /*max-height: 48px;*/
    height: 50px;
    border-radius: 8px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    letter-spacing: -0.03em;
    color: var(--backButtonColor);
    border: 1px solid var(--backButtonColor);
    cursor: pointer;
    text-transform: none !important;
}

    .ghostButtonBack:hover {
        border: 1px solid var(--mud-palette-primary);
        color: var(--mud-palette-primary);
        border-radius: 8px;
        transition: 0.2s;
    }

    .ghostButtonBack:active {
        background-color: var(--mud-palette-primary);
        border-radius: 8px;
        color: white;
    }


.defaultButtonsCss {
    padding: 12px 16px 12px 16px;
/*    width: -webkit-fill-available;*/
}

.registrationCreateCss {
    width: 100%;
    font: 500 20px / 32px Roboto;
    letter-spacing: .0075em;
    text-align: left;
    color: #0d47a1;
}

#badgeid .mud-badge.mud-badge-top.right.mud-badge-overlap {
    inset: auto auto calc(100% - 38px) calc(100% - 23px);
}

.tacbox {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
    margin-bottom: 10px;
    margin-top: 20px;
    border: 3px solid #ddd;
    background-color: #eee;
    width: 100%;
}

.selectedRowTable {
    background-color: rgb(from var(--palette-primary-backgroundColor-button) r g b / 20%) !important;
}

.hideRow {
    visibility:hidden;
}

#badgeuserid .mud-badge.mud-badge-icon .mud-icon-badge {
    font-size: 15px;
}

#badgeuserid .mud-badge.mud-badge-top.right.mud-badge-overlap {
    inset: auto auto calc(100% - 39px) calc(100% - 28px);
}

#badgeuserid .mud-badge.mud-badge-icon {
    width: 23px !important;
    height: 25px !important;
}


/*
#mudTabsNoPading .pl-10 {
    padding-left: 0px !important;
}
#mudTabsNoPading .pr-10{
    padding-right: 0px !important;
}
*/

.mud-chip-filled.mud-chip-color-primary:hover:not(.mud-disabled), .mud-chip-filled.mud-chip-color-primary:focus-visible:not(.mud-disabled) {
    box-shadow: 0 0 6px rgb(68 67 62 / 72%);
    background-color: var(--mud-palette-primary);
}


.containerQuest {
    max-width: 1000px;
    margin: 0 auto;
/*    padding: 20px;*/
    position: relative;
    height: 100%;
}

.headerQuest {
    text-align: left;
    margin-bottom: 30px;
}

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

.question-number {
    color: var(--mud-palette-primary);
    font-size: 3em;
    font-weight: bold;
    opacity: 0.5;
    margin-bottom: 10px;
}

.question-number2 {
    color: var(--mud-palette-primary);
    font-size: 3em;
    font-weight: bold;
    opacity: 0.5;
}

.question-text {
    font-size: 1.1em;
    margin-bottom: 10px;
}

.answer-input input[type="text"],
.answer-input input[type="file"],
.answer-input .form-check-input {
/*    width: 100%;*/
    padding: 8px;
    font-size: 1em;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

.answer-input .form-check-input {
    margin-right: 5px;
}

.answer-input label {
    margin-left: 5px;
}
.allLabelsQuestion {
    font-family: 'Roboto';
    font-style: normal;
/*    font-weight: 500;*/
    font-size: 16px;
    line-height: 16px;
    text-align: left;
/*    margin-bottom: 15px;*/
}

.allLabelsQuestion2 {
    font-family: 'Roboto';
    font-style: normal;
    /*    font-weight: 500;*/
    font-size: 16px;
    line-height: 16px;
    text-align: left;
    margin-bottom: 15px;
}

.allLabelsQuestionHeader {
    font-family: 'Roboto';
    font-style: normal;
    /*    font-weight: 500;*/
    font-size: 14px;
    line-height: 16px;
    text-align: left;
/*    margin-bottom: 15px;*/
}

.allLabelsQuestionFooter {
    font-family: 'Roboto';
    font-style: normal;
    /*    font-weight: 500;*/
    font-size: 14px;
    line-height: 16px;
    text-align: left;
    margin-bottom: 15px;
}


    .mud-alert-message {
        padding: 9px 0;
        width: 100%;
    }

.backandcancelbutton {
    border-radius: 6px; /* Border radius */
    border: 1px solid #6B6B6B; /* Border color */
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    padding: 12px 16px 12px 16px;
    width: -webkit-fill-available;
    text-transform: none;
/*    min-width: 6.25rem;*/
    height: 48.5px;
    line-height: initial;
}

    .backandcancelbutton:hover {
        background: #e3dbdb;
        border: 1px solid #464444;
        transition: 0.2s;
    }

    .backandcancelbutton:active {
        background-color: gray;
        color: #FFFFFF;
    }



.button-container {
    display: flex;
    justify-content: space-between; 

}

.responsive-button {
    flex: 1 1 auto; 
    margin: 5px; 

}

@media (max-width: 600px) {
    .button-container {
        flex-direction: column; 
    }

    .responsive-button {
        width: 100%; 
        margin-top: 10px; 
    }
}

.mud-table-root {
    height:100px !important;
}


#usermenu.mud-menu .mud-icon-button {
    color: inherit !important;
}



.align-bottom {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}


.expanpanelCss {
    font-weight: 700;
    font-size: 1.25rem;
    border: 1px solid #E2E4E7 !important;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    border-radius: 8px !important;
    color: #404040;
    transition: all 0.4s ease-out;
}

    .expanpanelCss:hover {
        font-weight: 700;
        font-size: 1.25rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        border: 1px solid var(--mud-palette-primary) !important;
        border-radius: 8px !important;
        color: var(--mud-palette-primary);
        /*        box-shadow: 0px 16px 32px rgba(0, 128, 197, 0.16) !important;
        transition: all 0.4s ease-out;*/
    }

    .expanpanelCss:focus {
        font-weight: 700;
        font-size: 1.25rem;
        padding-left: 0.75rem;
        border: 1px solid var(--mud-palette-primary) !important;
        border-radius: 8px !important;
        color: var(--mud-palette-primary);
        /*        transition: all 0.4s ease-out;
        box-shadow: 0px 16px 32px rgba(0, 128, 197, 0.16) !important;*/
    }


    .expanpanelCss:focus-within {
        font-weight: 700;
        font-size: 1.25rem;
        padding-left: 0.75rem;
        border: 1px solid var(--mud-palette-primary) !important;
        border-radius: 8px !important;
        color: var(--mud-palette-primary);
        /*        transition: all 0.4s ease-out;
        box-shadow: 0px 16px 32px rgba(0, 128, 197, 0.16) !important;*/
    }

.hoverFolder {
    background-color: #F7F7F7 !important;
}

    .hoverFolder:hover {
        border: 1px solid var(--mud-palette-primary) !important;
        background-color: rgb(from var(--palette-primary-backgroundColor-button) r g b / 20%) !important;
    }