@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;1,300;1,400&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

:root {
    --default-font-family: 'Roboto Condensed', sans-serif;
    --icon-font-family: 'Material Icons';
    --default-font-size: 11pt;
    --label-font-size: 11pt;
    --h1-font-size: 15pt;
    --h2-font-size: 13pt;
    --h3-font-size: 11pt;
    --h4-font-size: 15pt;
    --sub-font-size: 9pt;
    --default-text-stroke: .2px;
    --label-text-stroke: .1px;
    --bold-text-stroke: .3px;
    --default-color: rgba(20, 20, 20, 1);
    --label-color: rgba(33, 111, 160, 1);
    --note-color: rgba(77, 85, 237, 1);
    --error-color: rgba(253, 102, 86, 1);
    --h1-color: rgba(137, 91, 46, 1);
    --h2-color: rgba(137, 91, 46, 1);
    --h3-color: rgba(137, 91, 46, 1);
    --button-box-shadow: 0 0 2.5px 0 rgb(0, 0, 0, .2);
    --popper-box-shadow: 0 5px 10px 0 rgb(0, 0, 0, .4);
}

::-webkit-scrollbar {
    background: rgba(255, 255, 255, 0);
    width: 2px;
    height: 2px;
    position: fixed;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 1);
    border-radius: 0
}

* {
    font-family: var(--default-font-family) !important;
    line-height: initial !important;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    -webkit-text-stroke: var(--default-text-stroke);
}

html {
    animation: page-fade-in ease-in 1s;
}

.MuiTypography-h1 {
    font-size: var(--h1-font-size) !important;
    font-weight: 400 !important;
    -webkit-text-stroke: var(--bold-text-stroke);
}

.MuiTypography-h2 {
    font-size: var(--h2-font-size) !important;
    font-weight: 400 !important;
    -webkit-text-stroke: var(--bold-text-stroke);
}

.MuiTypography-h3 {
    font-size: var(--h3-font-size) !important;
    font-weight: 400 !important;
    -webkit-text-stroke: var(--bold-text-stroke);
}

.MuiTypography-h4 {
    font-size: var(--h4-font-size) !important;
    font-weight: 400 !important;
    -webkit-text-stroke: var(--bold-text-stroke);
}

.MuiFormHelperText-root {
    font-size: var(--sub-font-size) !important;
    color: var(--note-color);
    display: flex;
    margin-top: 4px;
}

.MuiFormHelperText-root:empty {
    display: none;
}

.MuiFormHelperText-root:before {
    font-family: var(--icon-font-family);
    font-size: 13pt;
    content: '\e5ce';
    margin-top: -2px;
}

.MuiFormHelperText-root.Mui-error {
    color: var(--error-color);
}

.MuiFormLabel-root {
    font-size: var(--label-font-size) !important;
    color: var(--label-color) !important;
    margin-bottom: 8px;
}

.MuiFormLabel-root.Mui-focused {
    color: var(--default-color);
}

.MuiInputBase-root.MuiInput-root {
    border: 1px solid rgba(200, 200, 200, 1);
    margin-top: 0;
    min-height: 54px;
    align-items: flex-end;
}

.MuiInputBase-root.MuiInput-root:before,
.MuiInputBase-root.MuiInput-root:after {
    display: none;
}

.MuiInputBase-root .MuiSelect-select:focus {
    background: none !important;
}

.MuiInputBase-root .MuiInputBase-input {
    padding: 4px 8px;
}

.MuiAutocomplete-input {
    margin-left: 8px;
}

.MuiInputBase-root .MuiInputAdornment-root {
    height: initial;
}

.MuiFormControl-root:has(.MuiInputBase-root) .MuiFormLabel-root {
    top: 8px;
    left: 8px;
    transform: initial;
    font-size: 9pt !important;
    margin-bottom: 0;
}

.MuiPickersToolbar-root>.MuiTypography-root {
    text-transform: capitalize;
    font-size: var(--label-font-size) !important;
    color: var(--label-color) !important;
}

.MuiButtonBase-root {
    color: var(--default-color);
    border-radius: 2px;
}

.MuiButtonBase-root .MuiButton-startIcon,
.MuiButtonBase-root .MuiButton-startIcon .MuiSvgIcon-root {
    color: var(--default-color);
}

.MuiButtonBase-root.MuiPickersDay-root {
    font-size: var(--default-font-size);
    border-radius: 2px;
}

.MuiButtonBase-root.MuiPickersDay-root.MuiPickersDay-today {
    border: 1px solid rgba(200, 200, 200, 1);
}

.MuiButtonBase-root.MuiPickersDay-root.Mui-selected {
    background: rgba(252, 206, 31, 1) !important;
    color: var(--default-color) !important;
    border: 1px solid rgba(50, 50, 50, 1);
}

.MuiFormGroup-root:has(.MuiFormControlLabel-root) {
    padding: 0 0 8px;
}

.MuiFormGroup-root:has(.MuiFormControlLabel-root)+.MuiFormHelperText-root.Mui-error {
    margin: -8px 0 16px;
}

.MuiFormControlLabel-root {
    display: flex;
    align-items: flex-start !important;
    margin: 0 !important;
    padding: 0 0 8px;
}

.MuiFormControlLabel-root .MuiRadio-root,
.MuiFormControlLabel-root .MuiCheckbox-root {
    padding: 0;
}

.MuiRadio-root.Mui-checked,
.MuiCheckbox-root.Mui-checked {
    color: var(--default-color) !important;
}

.MuiFormControlLabel-root .MuiTypography-caption {
    font-size: var(--default-font-size) !important;
    padding-left: 16px;
    min-height: 22px;
    display: flex;
    align-items: center;
}

.MuiPickersLayout-root {
    background: none !important;
}

.MuiPopover-paper,
.MuiAutocomplete-popper .MuiAutocomplete-paper {
    border-radius: 0 !important;
    box-shadow: var(--popper-box-shadow) !important;
}

.MuiStepConnector-root {
    margin-left: 20px !important;
}

.MuiStepContent-root {
    margin-left: 20px !important;
    padding-left: 28px !important;
}

.MuiStepLabel-root .MuiStepLabel-iconContainer .MuiStepIcon-root {
    font-size: 30pt;
    color: rgba(240, 240, 240);
}

.MuiStepLabel-root .MuiStepLabel-iconContainer .MuiStepIcon-text {
    font-size: 13pt;
    fill: rgba(0, 0, 0, 1);
}

.MuiStepLabel-root .MuiStepLabel-iconContainer .MuiStepIcon-root.Mui-active {
    color: rgba(202, 79, 79, 1);
}

.MuiStepLabel-root .MuiStepLabel-iconContainer .MuiStepIcon-root.Mui-active .MuiStepIcon-text {
    fill: rgba(255, 255, 255, 1);
}

.MuiStepLabel-root .MuiStepLabel-iconContainer .MuiStepIcon-root.Mui-completed {
    color: rgba(90, 153, 122, 1);
}

.MuiStepLabel-root .MuiStepLabel-label,
.MuiStepLabel-root .MuiStepLabel-label .MuiTypography-root {
    font-size: 13pt;
}

.MuiIconButton-root:hover {
    background: none !important;
}

.MuiTouchRipple-root {
    display: none;
}

body>.MuiContainer-root,
body>.MuiContainer-root>.MuiBox-root,
body>.MuiContainer-root>.MuiBox-root>.MuiPaper-root {
    padding: 0;
}

.notistack-SnackbarContainer {
    left: initial;
    bottom: inherit;
    top: 16px;
    right: 16px;
}

.notistack-Snackbar>.notistack-MuiContent {
    border-radius: 2px;
}

.notistack-MuiContent-error * {
    color: rgba(255, 255, 255, 1);
    -webkit-text-stroke: 0;
}

.calendar-root {
    border: 1px solid rgba(200, 200, 200, 1);
    min-height: 500px;
    padding: 16px;
    position: relative;
}

.calendar-root .calendar-loading {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-root:has(.calendar-loading) .calendar-slot {
    display: none;
}

.calendar-root .calendar-slot {
    padding: 16px 0;
    flex-direction: column;
    background: none;
}

.calendar-root .calendar-slot:before {
    content: 'Select Slot';
    padding: 8px 0 0;
    font-size: var(--label-font-size) !important;
    color: var(--label-color) !important;
}

.calendar-root .calendar-slot>.MuiToggleButtonGroup-root {
    padding: 8px 0 0;
}

.calendar-root .calendar-slot>.MuiToggleButtonGroup-root>.MuiTypography-caption {
    font-size: var(--h4-font-size);
    -webkit-text-stroke: var(--bold-text-stroke);
}

.calendar-root .calendar-slot>.MuiToggleButtonGroup-root>.MuiToggleButton-root {
    font-size: var(--default-font-size);
    border: 1px solid rgba(200, 200, 200, 1);
    border-radius: 2px;
}

.calendar-root .calendar-slot>.MuiToggleButtonGroup-root>.MuiToggleButton-root:hover {
    background: rgba(250, 250, 250, 1);
}

.calendar-root .calendar-slot>.MuiToggleButtonGroup-root>.MuiToggleButton-root.Mui-selected {
    background: rgba(252, 206, 31, 1) !important;
    border: 1px solid rgba(50, 50, 50, 1);
}

.form-tnc {
    padding-top: 32px;
    border-top: 1px solid rgba(200, 200, 200, 1);
}

.form-button {
    min-height: 50px;
    width: 100%;
    background: rgba(252, 206, 31, 1) !important;
    font-size: var(--default-font-size) !important;
    color: var(--default-color) !important;
    border-radius: 2px;
    box-shadow: var(--button-box-shadow) !important;
}

.form-button * {
    display: none;
}

.edit-step {
    min-height: 40px !important;
    box-shadow: var(--button-box-shadow) !important;
}

.success-icon,
.fail-icon {
    font-size: 60pt;
}

@keyframes page-fade-in {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    75% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}