/* To set backgound and font */
body {
    background-color: #FAFAFA !important;
    color: #3D5265 !important;
}

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

.mud-drawer-open-responsive-md-left.mud-drawer-left-clipped-never .mud-appbar {
    margin-left: 0px !important;
    width: 100% !important;
}

.lowercase-email-input .mud-input > input.mud-input-root {
    text-transform: lowercase;
}

ghg-table {
    width: fit-content;
}

.ghg-table > .mud-table-container {
    overflow-x: hidden;
    overflow-y: hidden;
}

.mud-tabs-custom > .mud-tabs-toolbar {
    background-color: #FAFAFA;
}

.custom-drawer {
    background-color: #FAFAFA !important;
    border-right: 1px solid rgba(0,0,0,0.12);
}

    .custom-drawer .mud-drawer-content {
        padding-top: var(--mud-appbar-height);
        background-color: #FAFAFA !important;
        color: #3D5265 !important;
    }

.select-virtual-wrapper {
    position: relative;
    max-height: 50px;
}

.virtual-wrapper {
    overflow-y: auto;
}

.navmenu-custom-hover {
    color: rgba(61, 82, 101, 0.5);
}

    .navmenu-custom-hover.mud-navmenu-secondary .mud-nav-link.active {
        background-color: inherit !important;
        color: #00A17E !important;
        font-weight: 600 !important;
    }

    .navmenu-custom-hover a:hover {
        color: rgba(61, 82, 101, 0.5);
    }

    .navmenu-custom-hover.mud-navmenu-primary .mud-nav-link.active:not(.mud-nav-link-disabled) {
        color: var(--mud-palette-primary);
        background-color: inherit !important;
        font-weight: 600 !important;
    }

    .navmenu-custom-hover .mud-nav-link-text {
        font-family: 'Open Sans';
        font-style: normal;
        font-size: 16px;
        line-height: 22px;
    }

.mud-nav-link:not(.mud-nav-link-disabled) .mud-nav-link-icon.mud-nav-link-icon-default {
    color: rgba(61, 82, 101, 0.5);
}

.mud-table-root .mud-table-head .mud-table-cell {
    font-family: 'Open Sans';
    font-size: 16px;
}

.mud-grid-item {
    width: 100%;
}

/* MudPaper bachground color */
.bg-default {
    background-color: #F5F5F5 !important
}

.mud-dialog-pa {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 8px !important;
    padding-top: 12px !important;
}

    .mud-dialog-pa .mud-dialog-content {
        padding: 0px !important;
    }

/* Form updated date top-right sticky style */
.updatedate-tr-sticky {
    position: fixed;
    width: 235px;
    top: 96px;
    left: 85%;
    z-index: 100;
}

@media screen and (min-width: 1601px) and (max-width: 1700px) {
    .updatedate-tr-sticky {
        left: 84%;
    }
}

@media screen and (min-width: 1501px) and (max-width: 1600px) {
    .updatedate-tr-sticky {
        left: 83%;
    }
}

@media screen and (min-width: 1401px) and (max-width: 1500px) {
    .updatedate-tr-sticky {
        left: 82%;
    }
}

@media screen and (min-width: 1px) and (max-width: 1400px) {
    .updatedate-tr-sticky {
        position: sticky;
        top: 0px;
        left: auto;
        width: auto;
        z-index: 98;
    }
}

.btn-disable {
    cursor: not-allowed;
    pointer-events: none;
}

.c-pointer {
    cursor: pointer;
}

.box-shadow-1 {
    box-shadow: var(--mud-elevation-1);
}

.clearable-icon-m > .mud-input-control-input-container .mud-input .mud-icon-button-size-small {
    margin-inline-end: 35px !important;
}

.z-36 {
    z-index: 36;
}

.w-10 {
    width: 10%;
}

.w-15 {
    width: 15%;
}

.w-20 {
    width: 20%;
}

.w-30 {
    width: 30%;
}

.w-40 {
    width: 40%;
}

.w-60 {
    width: 60%;
}

.w-h-38 {
    width: 38px;
    height: 38px;
}

.h-265 {
    height: 265px;
}

.w-300 {
    width: 300px;
}

.h-3 {
    height: 2px !important;
}

.w-h-60 {
    width: 60px;
    height: 60px;
}

.m-w-110 {
    width: 110px;
}

.w-max-content {
    width: max-content;
}

.h-2 {
    height: 2px !important;
}

.item-selected {
    background: #F0F1F2;
}

.center-content-vertical {
    display: flex;
    align-items: center;
}

.content-top {
    display: flex;
    justify-content: space-between;
}

.spread-content {
    display: flex;
    justify-content: space-between;
}

.word-break {
    word-break: break-word;
}

.mud-chip-custom {
    word-break: break-word;
    overflow-wrap: break-word;
    text-wrap: wrap;
    height: fit-content !important;
    padding: 5px 12px;
}

.mud-expand-panel .mud-expand-panel-header {
    padding: 12px !important;
}

.mud-expand-panel .mud-expand-panel-content {
    padding: 12px !important;
}

/* .item-selected .nohover {
        background: #FAFAFA;
    }*/
.timline-hover:hover .timline-item-hover {
    color: #30404F !important;
}

.timline-hover:hover .timline-primary-text-hover {
    color: #008F70 !important;
}

.timline-hover:hover .mud-timeline-dot-default {
    background-color: #E4E8EC !important;
}

.timline-hover:hover .mud-timeline-dot-rejected {
    background-color: #A13B39 !important;
}

.timline-hover:hover .mud-timeline-dot-approved {
    background-color: #008F70 !important;
}

.timline-hover:hover .mud-timeline-dot-active {
    border-color: #008F70 !important;
    color: #008F70 !important;
}

.svg-pending-approve {
    fill: #c0504e !important;
    width: 35px !important;
    height: 35px !important;
}

.timline-hover:hover .svg-pending-approve {
    fill: #9b221f !important;
    width: 35px !important;
    height: 35px !important;
}

.svg-approve {
    fill: #00a17e !important;
    width: 35px !important;
    height: 35px !important;
}

.timline-hover:hover .svg-approve {
    fill: #008F70 !important;
    width: 35px !important;
    height: 35px !important;
}

.svg-pending {
    fill: #FFC000;
    stroke: #FFC000;
}

.timline-hover:hover .svg-pending {
    fill: #FFA800;
    stroke: #FFA800;
}

.align-center {
    align-items: center;
}

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

.f10-w800 {
    font-size: 10px;
    font-weight: 800;
}

.f14-w800 {
    font-size: 10px;
    font-weight: 800;
}

.f10-w600 {
    font-size: 10px;
    font-weight: 600;
}

.f14-w600 {
    font-size: 14px;
    font-weight: 600;
}

.t-pending {
    color: #99A4AD;
}

.t-computed {
    color: #3D5265;
}

.border-30 {
    border-radius: 30px;
}

.pl-15 {
    padding-left: 15px !important
}

.p-l-7 {
    padding-left: 7px !important
}

.mb-checkbox-0 .mud-checkbox {
    margin-bottom: 0px !important
}

.mud-timeline-item-divider {
    min-width: auto !important;
    /*padding: 8px;*/
    /* border: 1px solid #FAFAFA;
    border-radius: 30px;*/
}

/*Set border and background for active timeline */
.mud-timeline-dot-active {
    border-width: 2px;
    border-style: solid;
    border-color: #00A17E !important;
    color: #00A17E !important;
    background-color: #FAFAFA !important;
}

/* Custom Dash line default */
.custom-vertical-dash {
    content: "";
    height: 10px;
    width: 3px;
    background-color: #F0F1F2;
    margin-left: 20px;
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Custom Dash line active */
.custom-vertical-dash-active {
    content: "";
    height: 10px;
    width: 3px;
    background: #00A17E !important;
    margin-left: 20px;
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Remove padding from select list */
.mud-list.mud-list-padding {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.mud-timeline-item-content {
    max-width: calc(100% - 48px) !important
}

.mud-timeline-vertical .mud-timeline-item {
    padding-bottom: 0px !important;
    border-radius: 30px 0px 0px 30px;
    flex-direction: initial !important;
    min-height: 40px;
}

/*Set background for default timeline */
.mud-timeline-dot-default {
    background-color: #F0F1F2 !important;
}

.mud-timeline-dot-pending {
    border-width: 2px;
    border-style: solid;
    border-color: #FFC000 !important;
    color: #FFC000 !important;
    background-color: #FAFAFA !important;
}

.mud-timeline-dot-rejected {
    background-color: #C0504E !important;
    color: #FAFAFA !important;
}

.timeline-content-default-color {
    color: #A8B2B9 !important;
}

.mud-timelne-dot-panding {
    color: #FFC000 !important;
}

.mud-timeline-dot-approved {
    color: #FAFAFA;
    background-color: #00A17E;
}

.timeline-content-active-color {
    color: #3D5265 !important;
}

.mud-timeline-item-dot {
    width: 28px !important;
    height: 28px !important;
    background-color: #F0F1F2 !important;
}

/* Set timeline vertical line */
.mud-timeline-vertical::before {
    width: 0px !important;
    background: none !important;
}

.timeline-section-header {
    background: white;
    border-radius: 25px;
    padding: 3px;
    margin-left: 5px;
}

.text-lower {
    text-transform: lowercase !important;
}

.error-text {
    border: 1px solid;
    background-color: #eed3d7;
    border-color: #eed3d7;
    font-size: 14px;
    color: #b94a48;
    width: fit-content;
    padding: 5px;
    padding-right: 50px;
}

/*Set button padding */
.mud-button {
    text-align: center !important;
    padding: 9px 9px !important;
}

/* Filled button remove shaddow effect on active */
.mud-button-filled:active {
    box-shadow: none !important;
}

/* Primary filled button background color on active */
.mud-button-filled.mud-button-filled-primary:active {
    background-color: #008366;
}

/* Secondory filled button background color on active */
.mud-button-filled.mud-button-filled-secondary:active {
    background-color: #2A3C4D;
}

/* Outlined Button background color on active */
.mud-button-outlined.mud-button-outlined-primary:active {
    background: linear-gradient(0deg, #E0EFEA, #E0EFEA), #FFFFFF;
    border: 1px solid #008366;
    border-radius: 4px;
}

/* Input value color */
.mud-input > input.mud-input-root {
    color: rgba(61, 82, 101, 0.75) !important;
    padding: 0px !important
}

    /* Input value color on hover */
    .mud-input > input.mud-input-root:hover {
        color: rgba(61, 82, 101) !important;
    }

::-webkit-input-placeholder {
    text-transform: none;
}

:-moz-placeholder {
    text-transform: none;
}

::-moz-placeholder {
    text-transform: none;
}

:-ms-input-placeholder {
    text-transform: none;
}

::-ms-input-placeholder {
    text-transform: none;
}

::placeholder {
    text-transform: none;
}

.color-custom {
    color: rgba(61, 82, 101, 0.7) !important;
}

.textarea-text-color .mud-input > textarea.mud-input-root {
    color: rgba(61, 82, 101, 0.7) !important;
}
/* Input value color on focus */
.mud-input > input.mud-input-root:focus {
    color: #3D5265 !important;
}

.input-text-center > .mud-input-control-input-container .mud-input .mud-input-root-text {
    text-align: center;
    padding-right: 16px !important;
}

.custom-mb-0 > .mud-input-control-input-container .mud-checkbox {
    margin-bottom: 0px !important;
}

/*Input type text remove margin and set back groundcolor,border and padding */
.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    margin-top: 0px !important;
    background: #FFFFFF;
    border-radius: 4px 4px 0px 0px;
    padding: 9px 0px 9px 16px;
    min-height: 50px;
}

.bg-custom > .mud-input-control-input-container > div.mud-input.mud-input-text {
    background: #F5F5F5 !important;
}

/* Filled input set padding */
.mud-input > input.mud-input-root.mud-input-root-filled {
    padding: 9px 0px 9px 16px !important;
}

/* Outerlined input set padding */
.mud-input > input.mud-input-root-outlined {
    padding: 9px 0px 9px 16px !important;
}

.mud-checkbox > .mud-icon-button {
    padding-left: 0px !important;
}

    .mud-checkbox > .mud-icon-button:hover {
        background-color: #FAFAFA !important;
    }

/*Set margin right in nav menu list item text*/
.mud-list-item-text {
    margin-right: 20px;
}

/*Set min width in nav menu list icon*/
.mud-list-item-icon {
    min-width: 35px !important;
}

/*Set table cell padding*/
.mud-table-cell {
    padding: 12px !important;
}

.set-font-size {
    font-size: 0.75rem !important;
}

.font-italic {
    font-style: italic;
}

.mud-alert-message {
    width: -webkit-fill-available;
    padding: 7px 0;
}

.mud-alert-approvebtn-active {
    background: #E9F5F3 !important;
    color: #3D5265 !important;
    width: fit-content;
}

    .mud-alert-approvebtn-active > div > div.mud-alert-icon.mud-alert-icon-left {
        color: #00A17E !important;
    }

.mud-alert-bg-color {
    background: #E9F5F3 !important;
    color: #3D5265 !important;
    width: fit-content;
    margin-right: auto;
}

    .mud-alert-bg-color > div > div.mud-alert-icon.mud-alert-icon-left {
        color: #00A17E !important;
    }

.mud-alert-bg-color-orange {
    background: #FDF4E2 !important;
    color: #3D5265 !important;
    width: fit-content;
    margin-right: auto;
}

    .mud-alert-bg-color-orange > div > div.mud-alert-icon.mud-alert-icon-left {
        color: #FFA800 !important;
    }

.mud-alert-custom-text {
    background: #FAECEC !important;
    color: #3D5265 !important;
    margin-right: auto;
}

.expansion-panal-bg-color {
    background-color: #FAFAFA !important;
    box-shadow: none !important;
}

.mud-expand-panel.mud-expand-panel-border {
    border-bottom: none !important;
}

.expansion-header-text-icon {
    justify-content: center;
    align-items: center;
    display: flex;
    vertical-align: middle;
    background-color: #00a17eff;
    width: 38px;
    height: 38px;
    border-radius: 100%;
    color: white;
    flex: 0 0 38px;
}

.expansion-header-text {
    color: white;
    background-color: #00a17eff;
    border-radius: 32px;
    padding: 3px 20px;
}

.expansion-header-pdrp {
    width: fit-content;
    height: fit-content;
    padding: 10px;
    border-radius: 40px;
    justify-content: center;
    align-items: center;
    display: flex;
    vertical-align: middle;
    background-color: #00a17eff;
    color: white;
}

.border-radius {
    border-radius: 20px !important;
    padding: 10px !important;
}

.tooltip-custom {
    text-align: left !important;
    width: 360px !important;
    padding: 20px !important;
    background-color: white !important;
    color: rgba(61, 82, 101, 0.87) !important;
    box-shadow: rgb(0 0 0 / 20%) 0px 2px 4px -1px, rgb(0 0 0 / 14%) 0px 4px 5px 0px, rgb(0 0 0 / 12%) 0px 1px 10px 0px;
}

.ta-right {
    text-align: right !important;
}

.ta-left {
    text-align: left !important;
}

.texarea-resize > .mud-input-control-input-container > div.mud-input.mud-input-text textarea.mud-input-root {
    resize: auto !important;
}

.br-tl {
    border-radius: 5px 0px 0px 0px !important;
}

.br-tr {
    border-radius: 0px 5px 0px 0px !important;
}

.custom-image-container {
    display: flex;
    flex-wrap: wrap;
}

.custom-image-container-item {
    width: 110px;
    height: 110px;
    padding: 16px 8px 24px;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    margin: 4px 4px;
}

.custom-image-container-item-small {
    width: 30px;
    height: 30px;
    padding: 4.5px 2.2px 6.8px;
    border-radius: 1.1px;
    text-align: center;
    cursor: pointer;
    margin: 1.1px 1.1px;
}

.text-white-color {
    color: white;
}

.svg-gray-color {
    filter: brightness(0.7) invert(1);
}


/*CFT UI*/
.mud-tab {
    border: 1px solid #C5CBD1;
}

    .mud-tab.mud-tab-active {
        color: #FFFFFF;
        background: #00A17E;
    }

        .mud-tab.mud-tab-active:hover {
            color: #FFFFFF;
            background: #00A17E;
        }

.custom-cart-header {
    background-color: var(--mud-palette-primary);
    padding: 5px 10px;
    color: white;
}

.custom-cart-border {
    border: 1px solid var(--mud-palette-primary);
}

.c-white {
    color: white;
}

.custom-cart {
    background-color: #FAFAFA !important;
    border: 1px solid var(--mud-palette-primary);
}

.badget-marging .mud-badge {
    margin-left: 12px;
}