:root {
    --mud-typography-default-family: 'Inter', sans-serif !important;
    --mud-typography-h1-family: 'Inter', sans-serif !important;
    --mud-typography-h2-family: 'Inter', sans-serif !important;
    --mud-typography-h3-family: 'Inter', sans-serif !important;
    --mud-typography-h4-family: 'Inter', sans-serif !important;
    --mud-typography-h5-family: 'Inter', sans-serif !important;
    --mud-typography-h6-family: 'Inter', sans-serif !important;
    --mud-typography-subtitle1-family: 'Inter', sans-serif !important;
    --mud-typography-subtitle2-family: 'Inter', sans-serif !important;
    --mud-typography-body1-family: 'Inter', sans-serif !important;
    --mud-typography-body2-family: 'Inter', sans-serif !important;
    --mud-typography-button-family: 'Inter', sans-serif !important;
    --mud-typography-caption-family: 'Inter', sans-serif !important;
    --mud-typography-overline-family: 'Inter', sans-serif !important;
    --mud-palette-primary: #0078D4 !important;
    --mud-palette-primary-darken: #006cbf !important;
    --fontsizeHeading1: 2rem;
    --fontsizeHeading2: 1.8rem;
    --fontsizeHeading3: 1.5rem;
    --fontsizeHeading4: 1.3rem;
    --fontsizeHeading5: 1.1rem;
    --fontsizeHeading6: 1rem;
    --fontsizeParagraph: 1rem;
    --fontsizeParagraphsmall: 0.9rem;
    --fontsizeParagraphxsmall: 0.75rem;
    --fontsizeParagraphxxsmall: 0.7rem;
}

body {
    font-family: 'Inter', sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-weight: bold;
}

h1,
.h1 {
    font-size: var(--fontsizeHeading1) !important;
}

h2,
.h2 {
    font-size: var(--fontsizeHeading2) !important;
}

h3,
.h3 {
    font-size: var(--fontsizeHeading3) !important;
}

h4,
.h4 {
    font-size: var(--fontsizeHeading4) !important;
}

h5,
.h5 {
    font-size: var(--fontsizeHeading5) !important;
}

h6,
.h6 {
    font-size: var(--fontsizeHeading6) !important;
}

p,
.p {
    font-size: var(--fontsizeParagraph) !important;
}

.psmall {
    font-size: var(--fontsizeParagraphsmall) !important;
}

.pxsmall {
    font-size: var(--fontsizeParagraphxsmall) !important;
}

.pxxsmall {
    font-size: var(--fontsizeParagraphxxsmall) !important;
}

/*layout*/
@media (min-width: 960px) {
    .mud-drawer-open-responsive-md-left .mud-appbar {
        width: calc(100% - 242px);
    }

    .mud-drawer-open-responsive-md-left .mud-main-content {
        margin-left: var(--mud-drawer-width-left);
    }
}

.mud-appbar {
    left: auto !important;
    color: inherit;
    background-color: #ffffff;
    box-shadow: none;
}

.mud-drawer {
    top: 0 !important;
    height: 100% !important;
}

.mud-nav-link {
    align-items: center;
}

    .mud-nav-link .mud-nav-link-text {
        font-size: 14px;
    }

    .mud-nav-link.active,
    .mud-nav-link.active .mud-nav-link-icon,
    .mud-nav-link:hover,
    .mud-nav-link:hover .mud-nav-link-icon {
        color: #0078d4 !important;
    }

        .mud-nav-link:hover .mud-nav-link-expand-icon {
            color: #0078d4 !important;
            fill: #0078d4 !important;
        }

.mud-navmenu.mud-navmenu-default .mud-nav-link-expand-icon.mud-transform {
    fill: var(--mud-palette-drawer-icon);
}

.mud-nav-link-icon {
    font-size: 1rem;
}

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

.mud-scroll-to-top.visible {
    bottom: 65px !important;
}


/*button*/
.btn-search.e-btn .e-btn-icon {
    background: transparent;
    padding: 0;
}

.btn {
    height: 38px;
    min-height: 38px;
    border-radius: 4px;
    text-transform: none;
}

.btn-outline-blue {
    /*background-color: #f4f8ff !important;*/
    background-color: #D4E9FF !important;
    border-color: #0078d4 !important;
    color: #0078d4 !important;
}

.btn-primary {
    background-color: #0078d4 !important;
    border-color: #0078d4 !important;
}

.btn-outline {
    border-color: #8a8886;
}

.e-btn {
    border-radius: 4px;
}

.mud-icon-button {
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #ddd !important;
}

.e-custom.e-btn .e-btn-icon.e-icon-top {
    padding-bottom: 0;
}

.e-dropdown-btn.e-custom {
    border-style: none;
}

/*input*/

input.e-input,
.e-input-group input.e-input,
.e-input-group input,
.e-input-group.e-control-wrapper input.e-input,
.e-input-group.e-control-wrapper input,
.e-input-group,
.e-input-group.e-control-wrapper {
    border-radius: 4px;
    min-height: 36px;
}

.input-group > :first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.input-group > :last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}


/*table*/

.e-grid .e-headercelldiv {
    margin: 0;
}

.e-grid .e-gridheader tr:first-child th {
    background: #0078D4;
    color: #FFF;
}

.e-grid .e-icon-descending::before,
.e-grid .e-icon-ascending::before {
    color: #fff;
}

.e-toolbar-right,
.e-toolbar-right .e-toolbar-item.e-template,
.e-toolbar-right .e-toolbar-item.e-template div {
    width: 100% !important;
}

.e-grid .e-toolbar {
    margin: 1rem;
    border-top: none;
    box-shadow: none;
}

.e-grid .e-searchclear {
    background: #0078D4 !important;
    color: #FFF !important;
}

.e-grid .e-gridheader table th[rowspan], .e-grid.e-device .e-gridheader table th[rowspan] {
    padding: 10px 16px;
    vertical-align: middle;
}

.e-grid .e-gridheader .e-sortfilter .e-headercelldiv, .e-grid .e-gridheader .e-stackedheadercelldiv {
    padding: 0;
}

.e-grid th.e-headercell[aria-sort=ascending] .e-headertext, .e-grid th.e-headercell[aria-sort=descending] .e-headertext {
    padding-right: 28px;
    color: #FFF;
}

.e-grid.e-wrap .e-columnheader .e-sortfilterdiv {
    margin: -34px 0px;
}

.e-grid .e-rowcell:last-child {
    padding-right: 16px;
}

.e-grid .e-rowcell:first-child {
    padding-left: 16px;
}

.e-grid .e-rowcell {
    padding: 7px 16px;
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    padding: 0 24px;
}

    .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
        background: #f1f3ff;
    }

.container-search.e-toolbar .e-toolbar-items {
    background: transparent;
    width: 100%;
}

    .container-search.e-toolbar .e-toolbar-items:first-child > .e-toolbar-item:last-child,
    .container-search.e-toolbar .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {
        margin-right: 0;
    }

    .container-search.e-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
        margin-left: 0;
    }

    .container-search.e-toolbar .e-toolbar-items .e-toolbar-item.search {
        width: 100%;
    }

.search .e-input-group {
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
}

.search .input-group-append .btn,
.search .input-group-prepend .btn {
    border-radius: 0px 4px 4px 0px;
    border-right: transparent !important;
    border: none !important;
}

.search .e-input-group.e-control-wrapper {
    border-radius: 4px 0 0 4px !important;
    border: none !important;
}

/*breadcrumb*/
.e-breadcrumb {
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #edebe9;
}

    .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:hover,
    .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:active {
        background-color: transparent;
        color: #0078d4;
    }

    .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:focus {
        border: none;
    }

/*card*/
/*.card-blue.e-card {
    border: 1px solid #0078d4;
}*/
.card-blue.e-card .e-card-header {
    background: #0078D4;
    padding: 8px 16px;
    color: #FFF;
    justify-content: start;
}

.card-blue.e-card .form-row {
    border: 1px solid #f0f0f0
}

    .card-blue.e-card .form-row .form-group {
        padding: 16px;
        margin-bottom: 0;
    }

        .card-blue.e-card .form-row .form-group:not(:last-child) {
            border-bottom: 1px solid #f0f0f0;
        }

/*ui*/
#blazor-error-ui {
    bottom: 55px;
}

/*popup version history*/

.div-history:hover,
.div-history.active {
    border-left: 5px solid #0078D4;
}

    .div-history:hover .title,
    .div-history.active .title {
        color: #0078D4 !important;
    }

/*status box*/
.status-box {
    width: 20px;
    height: 20px;
    background-color: #FFF;
    border-radius: 3px;
    border: 1px solid #000;
}

    .status-box.big {
        width: 55px;
        height: 33px;
    }

    .status-box.green {
        background-color: #92d050;
    }

    .status-box.red {
        background-color: #ff0000;
    }

    .status-box.yellow {
        background-color: #ffff00;
    }

    .status-box.darkgreen {
        background-color: #228b22;
    }

    .status-box.orange {
        background-color: #FF8225;
    }

/*tooltip*/
.customtip.e-tooltip-wrap .e-tip-content {
    color: #0078d4;
    font-size: 14px;
    font-weight: 700;
}

.bg-approve {
    background: #b9dffc;
}

.cnt .mud-nav-link .mud-nav-link-text {
    margin-left: 0;
    display: flex;
    align-items: center;
}

    .cnt .mud-nav-link .mud-nav-link-text img {
        height: 16px;
        margin-right: 12px;
    }

.form-row.g-3 > .col,
.form-row.g-3 > [class*=col-] {
    padding-right: 8px !important;
    padding-left: 8px !important;
}