:root {
    --palette-primary-0: #000000;
    --palette-primary-10: #080E2B;
    --palette-primary-20: #101B56;
    --palette-primary-30: #182981;
    --palette-primary-40: #2036AC;
    --palette-primary-50: #2844D6;
    --palette-primary-60: #5369DF;
    --palette-primary-70: #7E8EE7;
    --palette-primary-80: #A9B4EF;
    --palette-primary-90: #D4D9F7;
    --palette-primary-95: #EAECFB;
    --palette-primary-99: #FBFBFE;
    --palette-primary-100: #FFFFFF;
    --palette-secondary-0: #000000;
    --palette-secondary-10: #2B0814;
    --palette-secondary-20: #551129;
    --palette-secondary-30: #80193D;
    --palette-secondary-40: #AB2152;
    --palette-secondary-50: #D52A66;
    --palette-secondary-60: #DE5485;
    --palette-secondary-70: #E67FA3;
    --palette-secondary-80: #EEAAC2;
    --palette-secondary-90: #F7D4E0;
    --palette-secondary-95: #FBEAF0;
    --palette-secondary-99: #FEFBFC;
    --palette-secondary-100: #FFFFFF;
    --palette-error-0: #000000;
    --palette-error-10: #720748;
    --palette-error-20: #8A0B4C;
    --palette-error-30: #AC1252;
    --palette-error-40: #CD1B53;
    --palette-error-50: #EF2552;
    --palette-error-60: #F5596D;
    --palette-error-70: #FA7B7F;
    --palette-error-80: #FDADA7;
    --palette-error-90: #FEDAD3;
    --palette-error-95: #FDEDEA;
    --palette-error-99: #FDF6F5;
    --palette-error-100: #FFFFFF;
    --palette-gray-0: #000000;
    --palette-gray-10: #101A29;
    --palette-gray-20: #212E42;
    --palette-gray-30: #37465C;
    --palette-gray-40: #526075;
    --palette-gray-50: #76808F;
    --palette-gray-60: #979EA8;
    --palette-gray-70: #B8BCC2;
    --palette-gray-80: #C6C8CC;
    --palette-gray-90: #E6E6E6;
    --palette-gray-95: #F5F5F5;
    --palette-gray-99: #FBFBFB;
    --palette-gray-100: #FFFFFF;
    --palette-primary: #7082E4;
    --palette-secondary: #EB99B6;
    --palette-background: #F2F3FB;
    --palette-outline: #E6E6E6;
    --palette-error: #EF2552;
    --palette-success-light: #CDFFE5;
    --palette-success-dark: #0DAA94;
    --palette-info-light: #D2F0F9;
    --palette-info-dark: #3977AD;
    --palette-warning-light: #FFE7D1;
    --palette-warning-dark: #EF7300;
    --palette-lines-inputs: #E6E6E6;
    --default-borderradius: 0.75rem;
    --mud-drawer-width-mini-left: 8.8125rem !important;
    --palette-text-white: #FFFFFF;
    --palette-text-1: #101A29;
    --palette-text-2: #979EA8;
    --palette-text-3: #C6C8CC;
    --palette-disable-text: #76808F;
    --palette-disable-background: #B8BCC2;
}

/*#region Fonts*/

@font-face {
    font-family: 'Vazir';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/Vazir-Light.ttf) format('woff2');
}

@font-face {
    font-family: 'Vazir';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/Vazir-Regular.ttf) format('woff2');
}

@font-face {
    font-family: 'Vazir';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/Vazir-Medium.ttf) format('woff2');
}

@font-face {
    font-family: 'Vazir';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/Vazir-Bold.ttf) format('woff2');
}

@font-face {
    font-family: 'Vazir';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/Vazir-Bold.ttf) format('woff2');
}

/*#endregion*/

html, body {
    /*font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
    background-color: var(--palette-background);
}


/*#region General*/

.w-100 {
    width: 100% !important;
}

::-webkit-scrollbar {
    width: 3px !important;
}

input:focus-visible {
    outline: none;
}

/*endregion*/

/*#region dotnet7-loading-progress*/

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    font-family: "Vazir";
    direction: rtl;
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "بارگذاری ...");
    }

/*endregion*/

/*#region MudBlazorCustom*/

/*#region Typo*/

.typo-display-large {
    font-size: 3.5625rem !important;
    font-family: Vazir !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 4rem !important;
}

.typo-display-medium {
    font-size: 2.8125rem !important;
    font-family: Vazir !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 3.25rem !important;
}

.typo-display-small {
    font-size: 2.25rem !important;
    font-family: Vazir !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 2.75rem !important;
}

.typo-headline-large {
    font-size: 2rem !important;
    font-family: Vazir !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 2.5rem !important;
}

.typo-headline-medium {
    font-size: 1.75rem !important;
    font-family: Vazir !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 2.25rem !important;
}

.typo-headline-small {
    font-size: 1.5rem !important;
    font-family: Vazir !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 2rem !important;
}

.typo-title-large {
    font-size: 1.125rem !important;
    font-family: Vazir !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1.5rem !important;
}

.typo-title-medium {
    font-size: 1rem !important;
    font-family: Vazir !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1.5rem !important;
    letter-spacing: 0.0015rem !important;
}

.typo-title-small {
    font-size: 0.875rem !important;
    font-family: Vazir !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1.25rem !important;
    letter-spacing: 0.00625rem !important;
}

.typo-label-large {
    font-size: 0.875rem !important;
    font-family: Vazir !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1.25rem !important;
    letter-spacing: 0.00625rem !important;
}

.typo-label-medium {
    font-size: 0.75rem !important;
    font-family: Vazir !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1rem !important;
    letter-spacing: 0.03125rem !important;
}

.typo-label-small {
    font-size: 0.6875rem !important;
    font-family: Vazir !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1rem !important;
    letter-spacing: 0.03125rem !important;
}

.typo-body-large {
    font-size: 1rem !important;
    font-family: Vazir !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1.9rem !important;
    letter-spacing: 0.0015rem !important;
}

.typo-body-medium {
    font-size: 0.875rem !important;
    font-family: Vazir !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1.5rem !important;
    letter-spacing: 0.01563rem !important;
}

.typo-body-small {
    font-size: 0.75rem !important;
    font-family: Vazir !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1rem !important;
    letter-spacing: 0.025rem !important;
}

.typo-body-extra-small {
    font-size: 0.6875rem !important;
    font-family: Vazir !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 0.75rem !important;
}

.typo-body-button {
    font-size: 0.875rem;
    font-family: Vazir;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: 0.00625rem;
}
/*endregion*/

/*#region MudButton*/

.mud-button {
    text-transform: none;
    display: inline-flex;
    padding: 0.625rem 1.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    min-width: 0px;
}


.mud-button-text.mud-button-text-primary:hover {
    background-color: var(--palette-primary-99) !important;
}

.mud-button-text.mud-button-text-primary:focus, .mud-button-text.mud-button-text-primary:active {
    background-color: var(--palette-primary-95) !important;
}

.mud-button-text {
    padding: 0.625rem 0.75rem !important;
}

.mud-button-filled.mud-button-filled-primary:hover {
    box-shadow: 0 2px 10px 0 rgba(70, 69, 71, 0.30) !important;
}

.mud-button-filled.mud-button-filled-primary:focus {
    box-shadow: none !important;
}

.mud-button-filled.mud-button-filled-primary:active {
    box-shadow: 0 0 0 2px var(--palette-primary-80) !important;
}

.mud-button-outlined.mud-button-outlined-secondary:hover, .mud-button-outlined.mud-button-outlined-secondary:focus {
    background-color: var(--palette-secondary-99) !important;
}

.mud-button-outlined.mud-button-outlined-secondary:active {
    box-shadow: 0 0 0 2px var(--palette-secondary-80) !important;
}

.mud-button-outlined.mud-button-outlined-primary:hover, .mud-button-outlined.mud-button-outlined-primary:focus-visible {
    border: 1px solid var(--mud-palette-primary);
    background: var(--palette-primary-95);
}

/*endregion*/

/*#region MudIconButton*/

.mud-icon-button {
    border-radius: var(--default-borderradius);
    color: var(--palette-gray-30);
}

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

    .mud-icon-button.mud-button-filled.mud-button-filled-primary:hover {
        box-shadow: unset !important;
        background: var(--palette-primary-95);
    }

    .mud-icon-button.mud-button-filled.mud-button-filled-primary:focus {
        box-shadow: unset !important;
        background: var(--palette-primary-90);
    }

    .mud-icon-button.mud-button-filled.mud-button-filled-primary:active {
        box-shadow: unset !important;
        background: var(--palette-primary-80);
    }

    .mud-icon-button.mud-button-filled.mud-button-outlined-secondary:hover {
        box-shadow: unset !important;
        background: var(--palette-secondary-95);
    }

    .mud-icon-button.mud-button-filled.mud-button-outlined-secondary:focus {
        box-shadow: unset !important;
        background: var(--palette-secondary-90);
    }

    .mud-icon-button.mud-button-filled.mud-button-outlined-secondary:active {
        box-shadow: unset !important;
        background: var(--palette-secondary-80);
    }

    .mud-icon-button.mud-button-filled {
        background-color: white;
    }

/*endregion*/

/*#region MudInput*/
.mud-input {
    background-color: white;
    border-radius: var(--default-borderradius);
}

    .mud-input.mud-input-outlined .mud-input-outlined-border {
        border-color: var(--palette-disable-background);
    }

.mud-input-control {
    margin-top: unset !important;
}

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


.mud-input > input.mud-input-root-outlined, div.mud-input-slot.mud-input-root-outlined {
    background: #fff;
    border-radius: var(--default-borderradius);
}

.mud-input-helper-text {
    color: var(--palette-disable-text);
}

/*endregion*/

/*#region MudNavMenu*/
.mud-navmenu.mud-navmenu-primary .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: white;
    background-color: var(--palette-primary);
}

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

.mud-nav-link {
    padding: .5rem;
    align-items: center;
    gap: 1rem;
}

    .mud-nav-link .mud-nav-link-text {
        margin: 0;
    }

.mud-navmenu.mud-navmenu-primary .mud-nav-link.active:not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled), .mud-navmenu.mud-navmenu-primary .mud-nav-link.active:not(.mud-nav-link-disabled):focus-visible:not(.mud-nav-link-disabled) {
    background-color: var(--palette-primary);
}

.mud-navmenu.mud-navmenu-rounded .mud-nav-link {
    border-radius: .5rem;
}

/*endregion*/

/*#region MudDivider*/

.mud-divider {
    border-color: var(--palette-outline);
    border-width: 0.125rem;
    border-style: solid none none none;
    border-radius: 0.9375rem;
}

/*endregion*/

/*#region MudSwitch*/

.mud-switch {
    margin: 0 !important;
    margin-inline: 0 !important;
}

.mud-switch-base-medium.mud-switch-base > span > span > svg {
    color: white;
}

.mud-switch-base-medium.mud-switch-base {
    padding: 6px;
    color: var(--palette-gray-60) !important;
}

/*.mud-checked {
    padding: 4px !important
}

    .mud-checked > span > span {
        color: white;
        width: 1.5rem !important;
        height: 1.5rem !important;
    }

        .mud-checked > span > span > svg {
            color: var(--palette-gray-60) !important;
        }*/

.mud-switch-span-medium.mud-switch-span {
    padding: 0 !important;
    width: 3.25rem;
    height: 2rem;
}

.mud-switch-span .mud-switch-track {
    border-radius: 20px;
    background-color: var(--palette-background);
    border: 2px solid var(--palette-outline);
    transition: all ease-in-out 200ms;
}

.mud-switch-base.mud-checked + .mud-switch-track {
    opacity: 1;
    border: none;
}

.mud-switch-button .mud-switch-thumb-medium {
    width: 1.3rem;
    height: 1.31rem;
    box-shadow: none !important;
}

/*#endregion */

/*#region MudSkeleton*/

.mud-skeleton-text {
    transform: none;
    border-radius: .3rem !important;
}

.mud-skeleton {
    border-radius: var(--mud-default-borderradius);
}

/*endregion*/

/*#region MudSnackbar*/

.mud-snackbar {
    border-radius: 0.25rem !important;
    box-shadow: none !important;
    /*padding: 0.875rem 0.5rem 0.875rem 1rem !important;*/
}

.mud-alert-filled-error {
    background: var(--palette-error-95) !important;
    color: var(--palette-error);
}

.mud-alert-filled-success {
    background: var(--palette-success-light) !important;
    color: var(--palette-success-dark);
}

.mud-alert-filled-info {
    background: var(--palette-info-light) !important;
    color: var(--palette-info-dark);
}

.mud-alert-filled-warning {
    background: var(--palette-warning-light) !important;
    color: var(--palette-warning-dark);
}

/*endregion*/

/*region MudList*/
.mud-list.mud-list-padding {
    padding: 0.125rem 0.5rem;
}

:not(.mud-list-no-divider) > .mud-list-item.mud-list-item-clickable {
    border-bottom: solid .125rem var(--palette-outline);
}

.mud-list-item.mud-list-item-clickable:last-child {
    border-bottom: none;
}

.mud-list-item {
    gap: 1rem;
    padding: 0 1rem;
    height: 3rem;
}

.mud-list-item-clickable:hover {
    border-radius: 0.5rem;
}

.mud-list-item-icon {
    min-width: unset;
    color: var(--palette-gray-30);
}

.mud-list-item-icon-end {
    flex-direction: row-reverse;
}

.mud-list-item-clickable:hover {
    background-color: var(--palette-primary-90);
}
/*endregion*/

/*region MudPopover*/
/*
.mud-popover.mud-popover-open {
    box-shadow: var(--mud-elevation-1);
}
*/
/*endregion*/

/*region MudChip*/
.mud-chip {
    margin: 0;
    padding: .25rem .5rem;
}

    .mud-chip.tag {
        height: 1.5rem;
    }

.mud-chip-text {
    color: var(--palette-gray-40) !important;
    background-color: var(--palette-gray-90) !important;
}

    .mud-chip-text.mud-chip-color-primary {
        color: var(--palette-success-dark) !important;
        background-color: var(--palette-success-light) !important;
    }

    .mud-chip-text.mud-chip-color-error {
        color: var(--palette-error) !important;
        background-color: var(--palette-error-90) !important;
    }

    .mud-chip-text.mud-chip-color-warning {
        color: var(--palette-warning-dark) !important;
        background-color: var(--palette-warning-light) !important;
    }

    .mud-chip-text.mud-chip-color-info {
        color: var(--palette-info-dark) !important;
        background-color: var(--palette-info-light) !important;
    }

/*endregion*/

/*region MudDataGrid*/

.mud-data-grid {
    white-space: nowrap
}

    .mud-data-grid .mud-toolbar {
        padding: 0 !important;
        --mud-internal-toolbar-height: min-content;
    }

    .mud-data-grid .mud-table-head .mud-table-cell {
        padding-top: 0;
        padding-bottom: 0.5rem;
        padding-inline-end: 1.5rem;
        padding-inline-start: 0;
    }

    .mud-data-grid .mud-table-body .mud-table-cell {
        padding-top: 1.5rem;
        padding-inline-start: 0;
        padding-bottom: 0;
    }

    .mud-data-grid .mud-table-cell.sticky-right {
        background-color: unset;
    }

.mud-table-body .mud-table-row .mud-table-cell {
    border-bottom: none;
}

/*endregion*/

/*region MudIcon*/
.mud-icon-default {
    color: var(--palette-gray-30);
}

.mud-nav-link:not(.mud-nav-link-disabled) .mud-nav-link-icon.mud-nav-link-icon-default {
    color: var(--palette-gray-30);
}

/*endregion*/

/*region MudSlider*/

.mud-slider .mud-slider-value-label {
    opacity: 1 !important;
}

.mud-slider .mud-slider-value-label {
    border-radius: 6.25rem !important;
    border: 1px solid var(--palette-gray-90) !important;
    background-color: var(--palette-gray-95) !important;
    color: var(--palette-text-1) !important;
}

.mud-slider .mud-slider-track-tick {
    background-color: var(--palette-gray-90) !important;
    margin-bottom: 1.5rem !important;
    height: 0.375rem !important;
    width: 0.125rem !important;
}

.mud-slider .mud-slider-input::-webkit-slider-runnable-track {
    background-color: rgba(230, 230, 230, .4) !important;
}

/*endregion*/

/*region BottomSheet*/
.mud-dialog-container.mud-dialog-bottomcenter {
    padding-bottom: 0;
}

.bottom-sheet {
    animation: mud-drawer-slide-in-bottom 225ms cubic-bezier(0,0,.2,1) 0ms 1 !important;
}

    .bottom-sheet.mud-dialog-width-full {
        width: 100%;
        border-radius: 1rem 1rem 0 0;
    }

/*endregion*/

/*region Tab*/

.mud-tab {
    padding: 8px 16px !important;
    min-height: unset !important;
}

.mud-tabs-toolbar .mud-tabs-toolbar-inner {
    min-height: unset !important;
}

.mud-tab, .mud-tab:hover, .mud-tab:focus {
    border-radius: 20px;
}

.mud-tabs-toolbar.mud-tabs-rounded {
    border-radius: 20px;
    padding: 8px;
}

.mud-tab.mud-tab-active, .mud-tab.mud-tab-active:hover {
    border-radius: 20px;
    background: #7082E4;
    color: #fff !important;
}

.mud-tabs-toolbar-content .mud-tabs-toolbar-wrapper.mud-tabs-centered {
    width: 100%;
}

.mud-tooltip-root.mud-tooltip-inline {
    width: 100%;
    min-width: auto !important;
}

/*endregion*/
/*endregion*/
/*
.list-item:before {
    content: "";
    position: absolute;
    width: 95%;
    height: 50rem;
    background-color: #F0F1FF;
    right: -5rem; 
    top: -25rem;
    z-index: -1;
    transform: rotate(25deg);
    box-shadow: -1px 1px 4px #00000021;
}*/

/*#region Custom*/
.plyr.plyr--full-ui {
    border-radius: 10px;
}
/*endregion*/

.list-item {
    position: relative !important;
    overflow: hidden;
}

    .list-item::before {
        content: "";
        position: absolute;
        width: 95%;
        height: 50rem;
        background-color: #EAECFB;
        right: -6rem;
        top: -25rem;
        z-index: 1;
        transform: rotate(25deg);
        box-shadow: -1px 1px 4px #00000021;
    }

@keyframes bottomsheet-open {
    0% {
        bottom: calc(-1*var(--mud-drawer-content-height));
    }
}

.mud-select.mud-autocomplete--with-progress .mud-input-adorned-end input {
    padding-right: 14px !important;
    padding-left: 33px;
}

.mud-select.mud-autocomplete--with-progress .mud-select-input input {
    padding-right: 14px !important;
}

.mud-select.mud-autocomplete--with-progress .progress-indicator-circular {
    padding-inline-end: 2.6rem !important;
}



.guided-tour-overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
    cursor: pointer;
}

.guided-tour-wrapper {
    z-index: 10;
    position: fixed;
    top: 50%;
    left: 50%;
}

    .guided-tour-wrapper .arrow,
    .guided-tour-wrapper .arrow::before {
        position: absolute;
        width: 8px;
        height: 8px;
        background: inherit;
    }

    .guided-tour-wrapper .arrow {
        visibility: hidden;
    }

        .guided-tour-wrapper .arrow.force-hide::before {
            visibility: hidden !important;
        }

        .guided-tour-wrapper .arrow::before {
            background: white;
            visibility: visible;
            content: '';
            transform: rotate(45deg);
        }

            .guided-tour-wrapper .arrow::before.force-hide {
                visibility: hidden !important;
            }

    .guided-tour-wrapper[data-popper-placement^='top'] > .arrow {
        bottom: -4px;
    }

    .guided-tour-wrapper[data-popper-placement^='bottom'] > .arrow {
        top: -4px;
    }

    .guided-tour-wrapper[data-popper-placement^='left'] > .arrow {
        right: -4px;
    }

    .guided-tour-wrapper[data-popper-placement^='right'] > .arrow {
        left: -4px;
    }

.theme-default-overlay {
    background-color: rgba(33, 33, 33, 0.5);
}

.theme-default-wrapper {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 0.6rem;
    border-radius: 0.2rem;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;
}

.theme-default-arrow::before {
    background-color: white;
}

.theme-default-step-wrapper .theme-default-step-header {
    border-bottom: solid 1px #aeb2b5;
    padding-bottom: 0.2rem;
}

.theme-default-step-wrapper .theme-default-step-header .theme-default-step-header-title {
    text-transform: uppercase;
    color: #0f9619;
}

.theme-default-step-wrapper .theme-default-step-content {
    border-bottom: solid 1px #aeb2b5;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.theme-default-step-wrapper .theme-default-step-footer {
    padding-top: 0.2rem;
    display: flex;
    align-content: center;
    justify-content: flex-end;
}

.theme-default-button {
    border: 1px solid transparent;
    color: white;
    padding: 10px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 0.9rem;
    cursor: pointer;
    transition-duration: 0.2s;
    box-sizing: border-box;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin: 0.2rem;
}

    .theme-default-button.cancel-button {
        background-color: #ff6a00;
    }

        .theme-default-button.cancel-button:hover {
            background-color: white;
            color: #ff6a00;
            border-color: #ff6a00;
        }

    .theme-default-button.previous-button {
        background-color: #6e4caf;
    }

        .theme-default-button.previous-button:hover {
            background-color: white;
            color: #6e4caf;
            border-color: #6e4caf;
        }

    .theme-default-button.next-button {
        background-color: #4c88af;
    }

        .theme-default-button.next-button:hover {
            background-color: white;
            color: #4c88af;
            border-color: #4c88af;
        }

    .theme-default-button.complete-button {
        background-color: #4CAF50;
    }

        .theme-default-button.complete-button:hover {
            background-color: white;
            color: #4CAF50;
            border-color: #4CAF50;
        }

.layout-max-width {
    max-width: 480px;
    margin: 0 auto;
}

.mud-dialog-container{
    left:0;
}