:root {
    --color-sf-primary: #3F8BBB;
    --color-sf-primary-bg-color-hover: #2E6DA0;
}

body, .e-grid, .e-card, .e-control, .e-css, .e-error {
    font-family: 'Inter', sans-serif !important;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6,
.mud-typography-h6 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
}

/*layout*/
.mud-appbar {
    left: auto !important;
    border-bottom: 1px solid #DBDFED;
    background: #FFF;
    color: currentColor;
    box-shadow: none;
}

.mud-drawer {
    top: 0 !important;
    height: 100% !important;
    border-right: 1px solid #DBDFED;
    background: #F7F8FC;
    box-shadow: -2px 0px 50px 0px rgba(0, 0, 0, 0.03) inset;
}

.div-logo {
    top: 0;
    width: 239px;
    display: flex;
    z-index: 9999;
    position: fixed;
    background: #F7F8FC;
    flex-direction: column;
}

.mud-navmenu {
    gap: 12px;
    display: flex;
    margin: 0 16px;
    margin-top: 90px;
    flex-direction: column;
    margin-bottom: 1rem !important;
}

    .mud-navmenu .mud-nav-link.mud-expanded, .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
        color: #FFF !important;
        border-radius: 24px;
        background: linear-gradient(90deg, #51B2EF 0.13%, #0D73B4 83.44%);
    }

        .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) svg, .mud-nav-link.mud-expanded .mud-nav-link-expand-icon.mud-transform {
            fill: #FFF;
        }

.mud-nav-group * .mud-navmenu > .mud-nav-group .mud-nav-link.mud-expanded {
    background: #E1ECF3;
    color: currentColor !important;
}

    .mud-nav-group * .mud-navmenu > .mud-nav-group .mud-nav-link.mud-expanded .mud-nav-link-expand-icon.mud-transform {
        fill: currentColor;
    }

.mud-nav-link, .mud-nav-group * .mud-navmenu .mud-nav-item .mud-nav-link {
    padding: 6px 12px;
    border-radius: 8px;
    align-items: center;
}

    .mud-nav-link:focus:not(.mud-nav-link-disabled) {
        outline: none;
    }

    .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon.mud-nav-link-icon-default, .mud-nav-link.mud-expanded .mud-nav-link-icon.mud-nav-link-icon-default {
        color: #FFF !important;
    }

    .mud-nav-link .mud-nav-link-text {
        font-size: 14px;
        margin-left: 0;
        font-weight: 500;
    }

    .mud-nav-link:not(.mud-nav-link-disabled) .mud-nav-link-icon.mud-nav-link-icon-default {
        font-size: 14px;
        margin-right: 8px;
    }

.mud-nav-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .mud-nav-group * .mud-navmenu, .mud-nav-group * .mud-navmenu .mud-nav-item .mud-nav-link .mud-nav-link-text {
        margin: 0;
    }

        .mud-nav-group * .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
            border-radius: 8px;
            background: #DAF1FF;
            color: currentColor !important;
        }

.mud-nav-link:hover:not(.mud-nav-link-disabled),
.mud-nav-link:hover .mud-nav-link-icon.mud-nav-link-icon-default {
    color: #0D73B4;
}

.avatar-primary {
    background-color: #3F8BBB;
    color: #FFF;
    font-size: 12px !important;
}

/*button*/
button:focus {
    outline: none;
}

.e-btn {
    font-weight: 400 !important;
}

*.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:first-of-type,
*.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:last-of-type:not(:last-child),
*.e-css.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:first-of-type,
*.e-css.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:last-of-type:not(:last-child) {
    border-right: 0;
}

*.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:last-of-type,
*.e-css.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:last-of-type {
    border-left: 0;
}

.e-btn.e-warning, .e-css.e-btn.e-warning {
    color: #FFF;
    background: #F9BC20;
    border-color: #F9BC20;
}

    .e-btn.e-warning:hover, .e-css.e-btn.e-warning:hover {
        background: #D69A17;
        border-color: #D69A17;
    }

.btn-grey {
    background: #BFC5C8;
    color: #FFF;
}

.btn-info {
    border: none;
    color: #3F8BBB !important;
    background: #DAF1FF !important;
    font-weight: 500 !important;
}

/*form input*/
.e-input-group {
    border: 1px solid #BFC5C8 !important;
}

    .e-input[disabled],
    .e-input-group.e-control-wrapper .e-input[disabled],
    .e-input-group.e-disabled,
    .e-input-group.e-control-wrapper.e-disabled,
    .e-float-input input[disabled],
    .e-float-input.e-control-wrapper input[disabled],
    .e-float-input textarea[disabled],
    .e-float-input.e-control-wrapper textarea[disabled],
    .e-float-input.e-disabled,
    .e-float-input.e-control-wrapper.e-disabled {
        background: #F2F4F5 !important;
    }

.e-radio + label {
    margin-left: 0;
    margin-right: 20px;
}

.custom-tooltip .e-tooltip {
    width: fit-content;
    display: inline-flex;
}

/*tab*/
.e-tab .e-tab-header .e-toolbar-items {
    gap: 16px;
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-text,
.e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-icon {
    color: #96A2A8;
}

    .e-tab .e-tab-header .e-toolbar-item .e-tab-icon,
    .e-tab .e-tab-header .e-toolbar-item .e-tab-icon::before {
        font-size: 18px;
    }


.tab-border .e-tab-header {
    border-bottom: 1px solid rgb(219, 223, 237);
}

    .tab-border .e-tab-header .e-toolbar-items .e-toolbar-item.e-active::before {
        left: 0;
        right: 0;
    }

    .tab-border .e-tab-header .e-toolbar-item.e-active .e-tab-text,
    .tab-border .e-tab-header .e-toolbar-item.e-active .e-tab-icon,
    .tab-border .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-text,
    .tab-border .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-icon {
        color: var(--color-sf-primary) !important;
    }

.tab-fill .e-tab-header {
    border-bottom: none;
}

    .tab-fill .e-tab-header .e-toolbar-items .e-toolbar-item.e-active::before {
        background-color: transparent;
    }

    .tab-fill .e-tab-header .e-toolbar-item .e-tab-wrap {
        height: 36px;
        border-radius: 24px !important;
        background: #F2F4F5;
        padding: 0 12px;
    }

        .tab-fill .e-tab-header .e-toolbar-item.e-active .e-tab-wrap,
        .tab-fill .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
            background: var(--color-sf-primary) !important;
        }

    .tab-fill .e-tab-header .e-toolbar-item .e-text-wrap {
        height: 36px !important;
    }

    .tab-fill .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-text,
    .tab-fill .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-icon,
    .tab-fill .e-tab-header .e-toolbar-item.e-active .e-tab-text,
    .tab-fill .e-tab-header .e-toolbar-item.e-active .e-tab-icon {
        color: #FFFF !important;
    }

    .tab-fill .e-tab-header .e-toolbar-item.tab-completed .e-tab-wrap {
        background: #E1ECF3;
    }

    .tab-fill .e-tab-header .e-toolbar-item.tab-completed .e-tab-text,
    .tab-fill .e-tab-header .e-toolbar-item.tab-completed .e-tab-icon {
        color: var(--color-sf-primary);
    }

.tab-square .e-tab-header.e-vertical {
    max-width: 200px;
}

.tab-square .e-tab-header .e-toolbar-item .e-tab-wrap {
    height: 68px;
    width: 200px;
    border-radius: 10px !important;
    background: #F2F4F5;
    padding: 8px 12px;
}

.tab-square .e-tab-header .e-toolbar-item .e-text-wrap {
    height: 100% !important;
}

.tab-square .e-tab-header .e-toolbar-item:not(.e-separator) {
    height: 68px;
}

.tab-square .e-tab-header.e-vertical .e-toolbar-item .e-tab-text {
    justify-content: center;
}

.tab-square .e-tab-header.e-vertical.e-vertical-left .e-toolbar-items .e-toolbar-item.e-active::before {
    background-color: transparent;
}

.e-ddl.e-input-group .e-input-value,
.e-ddl.e-input-group .e-input-value:focus {
    padding: 4px 12px;
}


/*breadcrumb*/
.e-breadcrumb {
    position: relative;
}

    .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text {
        color: #253B49 !important;
        font-weight: 500 !important;
    }

    .e-breadcrumb .e-breadcrumb-item:first-child .e-breadcrumb-text {
        padding-left: 0 !important;
    }

    .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text:hover,
    .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text:focus,
    .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:hover {
        background-color: transparent;
        text-decoration: underline;
    }

    .e-breadcrumb.e-disabled .e-breadcrumb-item .e-breadcrumb-text,
    .e-breadcrumb .e-disabled.e-breadcrumb-item .e-breadcrumb-text,
    .e-breadcrumb.e-disabled .e-breadcrumb-separator {
        color: #FF443A !important;
        background-color: transparent;
        font-weight: 700 !important;
    }

/*card*/

.e-card {
    box-shadow: none;
    border-radius: 12px;
    border: 1px solid #DBDFED;
}

    .e-card .e-card-header {
        justify-content: start;
        border-bottom: 1px solid #DBDFED;
        background: #F7F8FC;
        padding: 16px;
    }

    .e-card .e-card-content {
        padding: 16px;
    }

    .e-card:hover {
        background-color: #FFF;
    }

.card.card-chart {
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 16px;
    height: 100%;
    overflow: hidden;
}

.card.round-top {
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}

/*accordion*/
.line-collapse .e-accordion .e-acrdn-item.e-selected > .e-acrdn-panel .e-acrdn-content, .line-collapse .e-accordion .e-acrdn-item .e-acrdn-header {
    padding: 6px 0;
}

    .line-collapse .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
        width: 90%;
    }

.bg-blue.e-accordion .e-acrdn-item .e-acrdn-header {
    background: #3F8BBB !important;
    padding: 16px;
}

    .bg-blue.e-accordion .e-acrdn-item .e-acrdn-header .e-toggle-icon {
        height: 53px;
        min-height: 53px;
    }

    .bg-blue.e-accordion .e-acrdn-item .e-acrdn-header .e-toggle-icon,
    .bg-blue.e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover .e-toggle-icon .e-icons.e-tgl-collapse-icon,
    .bg-blue.e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
        font-size: 20px !important;
        color: #FFF !important;
        font-weight: 600 !important;
    }

.card-accordion.e-accordion {
    border-radius: 12px;
    border: 1px solid #DBDFED;
}

    .card-accordion.e-accordion .e-acrdn-item .e-acrdn-panel .e-acrdn-content {
        padding: 16px;
    }

    .card-accordion.e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header,
    .card-accordion.e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header {
        border-color: #DBDFED !important;
        border-bottom-width: 1px !important;
        border-radius: 12px 12px 0px 0px !important;
        background: #F7F8FC !important;
        padding: 16px;
    }

    .card-accordion.e-accordion .e-acrdn-item .e-acrdn-header .e-toggle-icon {
        height: 57px;
    }

    .card-accordion.e-accordion .e-acrdn-item .e-acrdn-header {
        background: #F7F8FC !important;
        border-radius: 12px !important;
        padding: 16px;
    }

/*grid*/
.e-pager {
    border-top: 0 !important;
    border-left: 0;
    border-right: 0;
}

.e-grid {
    border-left: 0;
    border-right: 0;
}

    .e-grid .e-headercell, .e-grid .e-detailheadercell, .e-grid .e-rowdragheader, .e-grid .e-grouptopleftcell {
        background-color: #F2F4F5 !important;
    }

    .e-grid .e-summaryrow .e-summarycell, .e-grid .e-summaryrow .e-templatecell {
        background: #DAF1FF;
    }

    .e-grid .e-emptyrow:not(.e-editedbatchcell):not(.e-updatedtd) {
        text-align: center;
    }

/*dialog*/
.mud-dialog {
    border-radius: 16px;
    border: 1px solid #DCE1E4;
}

    .mud-dialog .mud-dialog-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 20px 24px 20px;
    }

        .mud-dialog .mud-dialog-title .mud-button-close {
            top: 0;
            right: 0;
            padding: 0;
            position: relative;
        }

        .mud-dialog .mud-dialog-title h6 {
            font-size: 24px;
        }

    .mud-dialog .mud-dialog-content {
        padding: 0;
        margin: 0;
    }

    .mud-dialog.footer-sticky .mud-dialog-actions {
        padding: 0;
    }

/*general*/
.div-empty {
    height: calc(100vh - 435px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .div-empty img {
        width: 250px;
    }

.line-label {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .line-label span {
        color: #253B49;
        font-size: 16px;
        font-weight: 600;
    }

    .line-label label {
        color: #000000;
        font-weight: 400;
        font-size: 14px;
        margin: 0px;
    }

.line {
    flex-grow: 1;
    height: 1px;
    background-color: #D9DDDF;
}

.line-title {
    width: 6px;
    height: 33px;
    background-color: #FF443A;
}

.notif-danger {
    border-radius: 4px;
    border: 1px solid #FF443A;
    background: #FFE6D7;
    padding: 12px 16px;
    color: #FF443A;
    font-size: 14px;
    font-weight: 500;
}

.notif-success {
    border-radius: 4px;
    border: 1px solid #53A426;
    background: #EEFBD7;
    color: #53A426;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
}

.text-info {
    color: #479AFF !important;
}

.text-grey {
    color: #BFC5C8 !important;
}

.text-primary {
    color: var(--color-sf-primary) !important;
}

.icon-sh::before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 16px;
    margin-right: 8px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('../img/icon-sh.svg');
}

.fw-semibold {
    font-weight: 600 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.psmall {
    font-size: 14px !important;
}

.pxsmall {
    font-size: 12px !important;
}

.pxxsmall {
    font-size: 10px !important;
}

.rounded-24 {
    border-radius: 24px !important;
}

.rounded-16 {
    border-radius: 16px !important;
}

.bullet-red {
    width: 14px;
    height: 14px;
    background: #FF443A;
    border-radius: 100%;
}

.bullet-yellow {
    width: 14px;
    height: 14px;
    background: #F9BC20;
    border-radius: 100%;
}

.bullet-green {
    width: 14px;
    height: 14px;
    background: #6EBF35;
    border-radius: 100%;
}

.lbl-blue {
    color: #FFF;
    padding: 4px 12px;
    border-radius: 12px;
    background: #479AFF;
    margin-bottom: 0 !important;
}

.lbl-green {
    color: #FFF;
    padding: 4px 12px;
    border-radius: 12px;
    background: #6EBF35;
    margin-bottom: 0 !important;
}

.lbl-red {
    color: #FFF;
    padding: 4px 12px;
    border-radius: 12px;
    background: #FF443A;
    margin-bottom: 0 !important;
}

.lbl-grey {
    color: #FFF;
    padding: 4px 12px;
    border-radius: 12px;
    background: #96A2A8;
    margin-bottom: 0 !important;
}

.lbl-neutral {
    padding: 4px 12px;
    border-radius: 24px;
    background: #F2F4F5;
    font-size: 14px !important;
    margin-bottom: 0 !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-18 {
    font-size: 18px !important;
}

.txt-grey {
    color: #96A2A8 !important;
    margin-bottom: 0 !important;
}

.bullet-grey {
    background: #9EADB9;
    width: 10px;
    height: 10px;
    border-radius: 100%;
}

.bullet-blue {
    background: #3BB1C6;
    width: 10px;
    height: 10px;
    border-radius: 100%;
}

.bullet-outline {
    border: 1px solid #96A2A8;
    width: 12px;
    height: 12px;
    border-radius: 100%;
}

.col-five {
    width: calc(100% / 5);
}

.col-seven {
    width: calc(100% / 7);
}

.card-grey.e-card, .card-blue.e-card {
    border-radius: 16px;
}

    .card-grey.e-card .e-card-header {
        justify-content: center;
        background: #9EADB9;
        color: #FFF;
    }

    .card-blue.e-card .e-card-header {
        justify-content: center;
        background: #3BB1C6;
        color: #FFF;
    }

.pnre.e-card {
    background: #648ACE;
    border: none;
    border-radius: 8px;
    height: calc(50% - 8px);
}

.portco.e-card {
    background: #EEB929;
    border: none;
    border-radius: 8px;
    height: calc(50% - 8px);
}

.cnt.e-card {
    background: #8BA7DA;
    border: none;
    border-radius: 8px;
    height: calc(50% - 8px);
}

.gas.e-card {
    background: #4472C4;
    border: none;
    border-radius: 8px;
    height: calc(50% - 8px);
}

.iml.e-card {
    background: #75C8D7;
    border: none;
    border-radius: 8px;
    height: calc(50% - 8px);
}

.rnp.e-card {
    background: #3BB1C6;
    border: none;
    border-radius: 8px;
    height: calc(50% - 8px);
}

.upstream.e-card {
    background: #408AAF;
    border: none;
    border-radius: 8px;
    height: calc(50% - 8px);
}

    .upstream.e-card .e-card-content,
    .rnp.e-card .e-card-content,
    .iml.e-card .e-card-content,
    .pnre.e-card .e-card-content,
    .cnt.e-card .e-card-content,
    .portco.e-card .e-card-content,
    .gas.e-card .e-card-content {
        padding: 8px;
        color: #FFF;
        height: 100%;
    }

        .upstream.e-card .e-card-content .bg,
        .pnre.e-card .e-card-content .bg,
        .cnt.e-card .e-card-content .bg,
        .iml.e-card .e-card-content .bg,
        .portco.e-card .e-card-content .bg,
        .gas.e-card .e-card-content .bg,
        .rnp.e-card .e-card-content .bg {
            position: absolute;
            right: -5%;
            bottom: 0;
            height: 50%;
            opacity: 0.1;
        }

        .upstream.e-card .e-card-content .img,
        .pnre.e-card .e-card-content .img,
        .cnt.e-card .e-card-content .img,
        .iml.e-card .e-card-content .img,
        .portco.e-card .e-card-content .img,
        .gas.e-card .e-card-content .img,
        .rnp.e-card .e-card-content .img {
            width: 80px;
            height: 80px;
        }

        .upstream.e-card .e-card-content label,
        .rnp.e-card .e-card-content label,
        .gas.e-card .e-card-content label,
        .portco.e-card .e-card-content label,
        .pnre.e-card .e-card-content label,
        .cnt.e-card .e-card-content label,
        .iml.e-card .e-card-content label {
            font-size: 16px;
        }

.tot-project.e-card {
    background: #2C7318;
    border: none;
    border-radius: 8px;
    height: 100%;
}

    .tot-project.e-card .e-card-content {
        padding: 16px;
        color: #FFF;
        height: 100%;
    }

.chart-container {
    width: 100%;
    overflow-x: auto;
    position: relative;
}

.position-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
}

.legend {
    width: 10px;
    height: 10px;
    border-radius: 100%
}

.legend-square {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.card-netral {
    padding: 16px;
    background: #F2F4F5;
    border-radius: 12px;
}

    .card-netral .e-input-group.e-disabled,
    .card-netral .e-input-group.e-control-wrapper.e-disabled {
        border: none !important;
    }

    .card-netral .e-input[disabled],
    .card-netral .e-input-group.e-control-wrapper .e-input[disabled] {
        background: #D9DDDF !important;
    }

.lbl-abs {
    position: absolute;
    width: fit-content;
    height: 20px;
    left: 140px;
    top: -8px;
    z-index: 99;
    display: flex;
    align-items: center;
    padding: 0px 10px;
}

.lbl-abs2 {
    background: #3B891A;
    position: absolute;
    width: fit-content;
    height: 20px;
    left: 117px;
    top: 75px;
    z-index: 99;
    display: flex;
    align-items: center;
    padding: 0px 10px;
}

.lbl-abs3 {
    position: absolute;
    width: fit-content;
    height: 20px;
    left: 140px;
    top: 75px;
    z-index: 99;
    display: flex;
    align-items: center;
    padding: 0px 10px;
}

.column-grey {
    padding: 12px 8px;
    background: #EBEBEB;
    border-bottom: 1px solid #BFC5C8;
}

    .column-grey:last-of-type {
        border-bottom: 1px solid #EBEBEB;
    }

.column-blue {
    padding: 12px 8px;
    background: #B5E0FF;
    border-bottom: 1px solid #B5E0FF;
}

.column-default {
    padding: 12px 8px;
    border-bottom: 1px solid #E0E0E0;
}

    .column-default:last-of-type {
        border-bottom: 1px solid #FFF;
    }

.e-dlg-overlay {
    z-index: 9000 !important;
}

.e-popup.e-popup-open.e-dialog, .e-dlg-container {
    z-index: 9001 !important;
}

#mud-snackbar-container, .mud-snackbar-location-top-right {
    z-index: 9999 !important;
}

.label-span {
    margin-top: 6px;
    display: inline-block;
    font-size: 11px !important;
}

/*list project badge*/
.badge {
    color: #253B49;
    padding: 4px 12px;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0;
    border-radius: 12px;
}

.badge-draft {
    background: #BFC5C8;
}

.badge-approval {
    background: #75B9FF;
}

.badge-execute {
    background: #9CB3FF;
}

.badge-reject {
    background: #FF7F6B;
}

.badge-revise {
    background: #F9BC20;
}

.badge-closed {
    background: #9AD863;
}

/*carousel*/
.template-carousel-section .carousel-sample {
    margin: 0 auto 2em;
    aspect-ratio: 16/9;
    border-radius: 16px;
    box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.20);
}

    .template-carousel-section .carousel-sample .e-carousel-slide-container {
        border-radius: 16px;
    }

.templateCarousel .img-container {
    height: 100%;
}

.templateCarousel .e-carousel-navigators .e-previous, .templateCarousel .e-carousel-navigators .e-next, .templateCarousel .e-carousel-navigators .nav-btn {
    padding: 0;
    background: #E9F0FB;
    color: #5274AA;
    height: 46px;
    width: 46px;
    border-radius: 100%;
}

    .templateCarousel .e-carousel-navigators .nav-btn:active, .templateCarousel .e-carousel-navigators .nav-btn:focus, .templateCarousel .e-carousel-navigators .nav-btn:hover {
        background-color: transparent !important;
        color: inherit;
    }

.templateCarousel .e-carousel-navigators .e-previous {
    position: absolute;
    left: -70px;
}

.templateCarousel .e-carousel-navigators .e-next {
    position: absolute;
    right: -70px;
}

.templateCarousel .e-carousel-navigators i {
    font-size: 30px;
    font-weight: 800;
}

.templateCarousel .e-carousel-navigators .e-previous svg {
    transform: rotate(180deg);
}

.templateCarousel .e-carousel-indicators {
    position: absolute;
    bottom: -110px;
}

    .templateCarousel .e-carousel-indicators .e-indicator-bars {
        align-items: center;
    }

        .templateCarousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .indicator {
            background-color: #ECECEC;
            border-radius: 0.25rem;
            cursor: pointer;
            height: 60px;
            width: 100px;
            margin: 0.5rem;
            border-radius: 8px;
            box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.20);
        }

            .templateCarousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .indicator img {
                border-radius: 5px;
                width: 100%;
                height: 100%;
            }

        .templateCarousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar.e-active .indicator {
            background-color: #FF443A;
            padding: 4px;
            height: 90px;
            width: 150px;
        }


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

@media screen and (max-width: 480px) {
    .template-carousel-section .carousel-sample {
        width: 100%;
        height: 250px;
    }

    .templateCarousel .img-container {
        margin: 12px;
    }
}