body {
    font-family: 'Inter';
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #252f4a;
}
p{
    font-size: 14px;
    color: #252f4a;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Inter';
    line-height: 1.4;
    color: #071437;
}

@media (max-width: 768px) {
    h1, .h1{
        font-size: 30px;
    }

    h2, .h2{
        font-size: 26px;
    }

    h3, .h3{
        font-size: 22px;
    }

    h4, .h4{
        font-size: 18px;
    }

    .header-top > .nav-link {
        padding: 0.5rem 7px;
        font-size: 13px;
    }
}

img {
    max-width: 100%;
}

.text-underline {
    text-decoration: underline;
}

.site-wrap {
    overflow: hidden;
}

.tieude {
    font-size: 20px;
    margin: 0;
}

.page-header {
    width: 100%;
    background-color: white;
}

.border-left5 {
    border-left: 7px solid red !important;
}

.text-sm{
    font-size: 13px;
}

.page-footer {
    color: white;
    font-size: 16px;
    width: 100%;
    height: 100px;
    background-color: #338cea;
    text-align: center;
    margin: 0;
    line-height: 0.5;
    border-top: 5px solid #8dabc9;
}

a {
    text-decoration: none;
    transition: color 0.2s ease-in-out;
    -webkit-transition: color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.text-red {
    color: #ff0000 !important;
}

.menubar {
    background-color: #FBFBF9
}

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

.maxwid {
    max-width: 1200px;
    margin: auto;
}

.nav-notification{position: relative;}
.nav-notification > i{font-size: 22px; color: #071437;}
.nav-notification .badge{position: absolute; top: -10px; background-color: #e41e3f; left: 10px; color: #fff; border-radius: 50%; text-align: center; font-size: 11px; width: 22px; height: 22px; line-height: 22px; padding: 0; font-weight: 500;}

.btn {
    font-size: 14px;
}

.row-p2 {
    margin-left: 2px;
    margin-right: 2px;
}

.row-p2>div {
    padding-left: 2px;
    padding-right: 2px;
}

.border-dotted {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dotted #ddd;
}

.table {
    display: table;
}

.table .tr {
    display: table-row;
    display: block;
}

.cell {
    display: table-cell;
    padding-left: 5px;
    padding-right: 5px;
}

.white-space {
    white-space: nowrap;
}

.form-control {
    font-size: 14px;
}


/*Layout*/
@media (min-width: 768px) {
    .container {
        max-width: calc(100vw - 40px);
    }
}
@media (min-width: 1300px) {
    .container {
        max-width: 1280px;
    }
}
@media (min-width: 1320px) {
    .container {
        max-width: 1320px;
    }
}
.sidebar {
    width: 250px;
}

div.bodybar {
    width: calc(100vw - 250px);
}

.header-logo {
    align-items: center;
    padding: 15px;
}

.header-logo img {
    width: auto;
    height: 40px;
}

.header-logo h4 {
    font-size: 20px;
    margin-bottom: 0;
    margin-left: 15px;
}

@media (max-width: 768px) {
    div.bodybar {
        width: 100%;
    }
    .bodybar .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }
    .bodybar .wrap-content>.container-fluid {
        padding-left: 7px;
        padding-right: 7px;
    }
    .bodybar .wrap-content .card-body{
        padding: 10px;
    }
}


/*Top Bar*/

.topbar .row {
    margin-left: -2px;
    margin-right: -2px;
}

.topbar .row .col-6 {
    padding-left: 2px;
    padding-right: 2px;
}

.topbar .row .col-6 a {
    display: block;
    height: 60px;
    text-decoration: none;
    background-color: #e1ecf4;
    color: #6c757d;
    font-weight: 600;
    line-height: 60px;
    text-align: center;
    margin-bottom: 5px;
}

.topbar .row .col-6 a.active {
    background-color: #28a745;
    color: #fff;
}


/*Table*/

.card .card-header {
    padding-top: 5px;
    padding-bottom: 5px;
}

.card .card-header .card-title {
    font-size: 18px;
    margin: 0;
}

.card .card-header .row {
    align-items: center;
}

.card .card-header .btn-medium {
    font-size: 13px !important;
}

.card .card-body table th,
.card .card-body table td {
    font-size: 14px;
    padding: 12px 7px;
}

.card .card-body .control-label,
.card .card-body .form-control {
    font-size: 14px;
}

.required-label {
    color: #ff0000;
}

table td.action {
    text-align: right;
}
table td.action a{
    visibility: hidden;
    opacity: 0;
}
table td.action.create-done a{
    visibility: visible;
    opacity: 1;
}

table td.action a {
    font-size: 13px;
}

table td.action a#delete-action {
    color: #ff0000;
    white-space: nowrap;
}

table td.action a#edit-action {
    color: #05751f;
    white-space: nowrap;
}

table td.action a:after {
    content: "|";
    margin-left: 7px;
    margin-right: 7px;
    color: #000;
    display: none;
}

table td.action a:last-child:after {
    display: none;
}

/*Sidebar*/
.sidebar .list-group-item .fa-caret-down:before {
    content: "\f0da";
}

.sidebar .list-group-item.collapsed .fa-caret-down:before {
    content: "\f0d7";
}

.sidebar .list-group-item ul {
    margin-top: 10px;
}

.sidebar .list-group-item ul li a {
    font-size: 13px;
    line-height: 20px;
    color: #fff;
}

.sidebar .sidebar-menu>li {
    position: relative;
    display: block;
    padding: 0.75rem 0 0.75rem 1.25rem;
    background-color: #343a40;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.sidebar .sidebar-menu>li.current-page {
    background-color: #243a50;
}

.sidebar .sidebar-menu>li>a {
    color: #fff;
    text-decoration: none;
}

.sidebar .sidebar-menu>li>a>i {
    padding-right: 10px;
}

.sidebar .sidebar-menu .toggle-submenu {
    position: absolute;
    right: 5px;
    top: 4px;
    width: 30px;
    height: 30px;
    background-color: transparent;
    box-shadow: none;
    border: 0;
    color: #fff;
    text-align: center;
    cursor: pointer;
    z-index: 100;
    outline: 0;
}

.sidebar .sidebar-menu .treeview-menu {
    display: none;
}

.sidebar .sidebar-menu>li.current-page>.treeview-menu {
    display: block;
}

.sidebar .sidebar-menu .treeview-menu {
    padding-left: 15px;
    margin-top: 10px;
}

.sidebar .sidebar-menu .treeview-menu li {
    position: relative;
    padding: 7px 0;
}

.sidebar .sidebar-menu .treeview-menu li>a {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
}

.sidebar .sidebar-menu .treeview-menu li>a i {
    padding-right: 10px;
}

.sidebar .sidebar-menu li.is_show>a>.toggle-submenu .fa-caret-down:before,
.sidebar .sidebar-menu li.current-page>a>.toggle-submenu .fa-caret-down:before {
    content: "\f0da";
}

.menu-bar {
    position: absolute;
    left: 0;
    top: 5px;
}

.menu-bar>a {
    font-size: 22px;
    color: #000;
}

.header-top {
    border-bottom: 1px solid #dee2e6;
}

.header-top a {
    color: #000;
}

@media (max-width: 768px) {
    .header-top {
        padding-top: 7px;
        padding-bottom: 7px;
    }
    .sidebar {
        height: inherit;
        min-height: 100%;
        position: absolute;
        top: 0;
        box-shadow: none!important;
        margin-left: -250px;
        overflow-y: hidden;
        z-index: 1038;
        transition: margin-left .3s ease-in-out, width .3s ease-in-out;
    }
    .sidebar.is_show {
        margin-left: 0;
    }
    .overlay {
        display: none;
        position: absolute;
        z-index: 1;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgb(0 0 0 / 58%);
    }
}

@media (max-width: 576px) {
    .d-xs-100 {
        width: 100% !important;
    }
}


/*Manager*/

.profile-manager {
    align-items: center;
    margin-left: 40px;
}

.profile-manager .image {
    margin-right: 10px;
}

.profile-manager .image,
.profile-manager .image img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}


/*Footer*/

#footer a {
    color: #000;
}

#footer .logo-footer {
    height: 30px;
    width: auto;
    margin-right: 10px;
}

#footer .widget-title {
    font-size: 16px;
    margin-bottom: 15px;
}

#footer ul {
    padding-left: 20px;
    list-style: disc;
}

#footer ul li {
    margin-bottom: 5px;
}

@media (max-width: 768px) {
    #footer {
        padding-left: 10px;
    }
}


/*Dashboard*/
.main-bashboard p>img {max-width: 25px; margin-left: 5px;}
.bodybar .wrap-content {min-height: calc(100vh - 250px);}
.bashboard-link img.ic-loading {max-width: 25px; margin-left: 5px;}
.bashboard-link img.ic-loading {display: none;}
.list-groups {list-style: none;padding-left: 0; padding-bottom: 0; margin-bottom: 15px; text-align: center; display: inline-block; position: relative; left: 50%; transform: translateX(-50%); border-bottom: 1px solid #f1f1f4;}
.list-groups li {display: inline-block; margin-bottom: 0;}
.list-groups li a {padding: 10px 15px; margin-bottom: 0; margin-top: 10px; text-decoration: none; border-bottom: 1px solid transparent; display: inline-block; color: #4b5675; font-size: 14px; font-weight: bold;}
.list-groups li a:hover{color: #28a745;}
.list-groups li a.active {border-color: #28a745; color: #28a745;}
@media (max-width: 768px) {
    .list-groups{white-space: nowrap; overflow-x: scroll; max-width: 100%; left: auto; transform: none;}
}

/*Detail*/
.row-metain {
    margin-left: -7px;
    margin-right: -7px;
    align-items: center;
    text-align: center;
}

.row-metain .col-12 {
    padding-left: 7px;
    padding-right: 7px;
}

.btn-maintain-detail {
    white-space: normal;
    min-height: 70px;
    height: calc(100% - 15px);
    color: #000 !important;
    text-transform: uppercase;
    font-size: 14px;
    background-color: #ff8b56;
    width: 100%;
    display: table;
    margin-bottom: 24px;
    border-radius: 4px;
}

.btn-maintain-detail.proccess {
    background-color: #35bf53;
}

.btn-maintain-detail.await_confirm {
    background-color: #bba013;
}

.btn-maintain-detail.complete {
    background-color: #17A2B8;
}

.btn-maintain-detail>span {
    display: table-cell;
    vertical-align: middle;
}

.row-checklist {
    margin-bottom: 10px;
    padding-bottom: 10px;
    margin-left: 2px;
    margin-right: 2px;
    border-bottom: 1px dotted #ddd;
}

.row-checklist>div {
    padding-left: 2px;
    padding-right: 2px;
}

.row-checklist p {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
}

.form-maintain_edit .row {
    margin-bottom: 10px;
    padding-bottom: 10px;
    margin-left: 2px;
    margin-right: 2px;
    border-bottom: 1px dotted #ddd;
}

.form-maintain_edit .row>div {
    padding-left: 2px;
    padding-right: 2px;
}

#table-plan .checkbox label::after {
    text-indent: -3px;
}

.list-button-month {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.list-button-month .btn-plans {
    margin-bottom: 24px;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 18px;
    color: #fff !important;
}

.list-button-month .btn-month {
    margin-bottom: 24px;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 16px;
}

.btn-sm {
    padding: 5px;
    font-size: 13px;
}

tr.note-processed{
    background-color: #d7f9b9 !important;
}

.custom-loading {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99999999;
    display: none;
    text-align: center;
}

.custom-loading>div {
    position: absolute;
    top: 45%;
    text-align: center;
    left: 0;
    right: 0;
}

.custom-loading-chart {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999999;
    display: none;
    text-align: center;
}

.custom-loading-chart>div {
    position: absolute;
    top: 45%;
    text-align: center;
    left: 0;
    right: 0;
}

@media (max-width: 768px) {
    .custom-loading>div {
        top: 30%;
    }
}

@media (min-width: 768px) {
    .md-mb-0 {
        margin-bottom: 0;
    }
    .form-maintain_edit .form-group {
        margin-bottom: 0;
    }
    .sm-mt-2 {
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    h1,
    .h1 {
        font-size: 32px;
    }
    h2,
    .h2 {
        font-size: 24px;
    }
    .row-checklist p {
        margin-bottom: 10px !important;
    }
    .row-checklist .checkbox {
        padding-left: 0;
    }
    .table .cell {
        display: block !important;
    }
    .table-responsive {
        overflow: auto;
        max-width: 100%;
    }
    table.table-mobile,
    table.table-mobile thead,
    table.table-mobile tbody,
    table.table-mobile th,
    table.table-mobile td,
    table.table-mobile tr {
        display: block !important;
        max-width: 100% !important;
    }
    table.table-mobile thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
        opacity: 0;
    }
    table.table-mobile tr {
        border: 1px solid #ccc;
    }
    table.table-mobile td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50% !important;
        text-align: left !important;
        width: 100% !important;
        min-height: 30px;
    }

    table.table-mobile.two-line td{
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    table.table-mobile.three-line td{
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    table.table-mobile td:before {
        content: attr(data-title);
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45% !important;
        padding-right: 10px;
        text-align: left !important;
    }
    table.table-mobile td.no-padding,
    table.table-mobile td.action {
        padding-left: 12px !important;
        text-align: left !important;
    }
    table.table-mobile input[type="number"] {
        max-width: 140px;
    }
    table.table-mobile .checkbox {
        margin-bottom: 10px;
    }
    table.table-mobile .checkbox label:after {
        text-indent: 0 !important;
    }
}

.checkbox-measured {
    position: relative;
    top: 3px;
    padding-left: 3px;
    font-size: 16px;
    display: inline-block;
}
.table-measured .form-control{
    max-width: 120px;
}

.info-information-button {
    display: block;
    max-width: 100%;
    background-color: #181e36;
    color: #fff;
    border: 2px solid #fff;
    outline: 2px solid #a0a0a0;
    text-align: center;
    padding: 12px 12px;
    line-height: 1;
    font-size: 16px;
    letter-spacing: 2px;
    white-space: nowrap;
    width: 150px;
    white-space: nowrap;
}

.media-information {
    margin-bottom: 20px;
    align-items: center;
}

.media-information .media-left {
    width: 130px;
    margin-right: 5px;
    font-size: 16px;
    white-space: nowrap;
}

@media (max-width: 1660px) {
    .media-information .media-left {
        width: 100px;
        font-size: 13px;
        white-space: inherit;
    }
}

@media (max-width: 1240px) {
    .media-information {
        display: block;
    }
    .media-information .media-left,
    .media-information .media-right {
        width: 100%;
    }
    .media-information .media-left {
        font-size: 16px;
    }
    .info-information-button {
        width: 100%;
    }
}
.content .select2-container--default .select2-selection--single{
    height: calc(2.25rem + 2px);
}
.content .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(2.25rem + 2px);
}
.canvas-holder{text-align: center;}
.canvas-holder canvas{margin-right: auto; margin-left: auto; cursor: pointer;}

/*Loading Button*/
.btn.loading {opacity: 1 !important; position: relative; color: rgba(255, 255, 255, 0.05) !important; pointer-events: none !important;}
.btn.loading svg,
.btn.loading img{opacity: 0; visibility: hidden;}
.btn.loading:after, .loader {animation: spin 500ms infinite linear; border: 2px solid #fff; border-radius: 32px; border-right-color: transparent !important; border-top-color: transparent !important; content: ""; display: block; height: 16px; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; position: absolute; width: 16px;}
.btn.loading.text-danger,
.btn.loading.text-primary{text-indent: -9999px;}
.btn.loading.like:after,
.btn.loading.text-primary:after{border: 2px solid var(--primary);}
.btn.loading.text-danger:after{border: 2px solid var(--danger);}
@-moz-keyframes spin {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}
@-webkit-keyframes spin {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
@keyframes spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

/*Header*/
.menu-separator {border-bottom: 1px solid #f1f1f4; margin-top: 10px; margin-bottom: 10px;}
#header{margin-top: 15px;}
#header .dropdown-myaccount .dropdown-toggle{outline: 0; background-color: #fff; border-radius: 50%; width: 36px; height: 36px; border: 1px solid #28a745; padding: 0; cursor: pointer; overflow: hidden; display: inline-block;}
#header .dropdown-myaccount .dropdown-toggle::after{display: none;}
#header .dropdown-myaccount .dropdown-toggle img.img-circle{width: 36px; height: 36px; object-fit: cover; object-position: center; border-radius: 50%;}
#header .dropdown-myaccount .dropdown-menu{width: 200px; border: 1px solid #dbdfe9; box-shadow: 0px 7px 18px 0px rgba(0,0,0,.09); border-radius: 12px; background-color: #fff; padding-top: 10px; padding-bottom: 10px;}
#header .dropdown-myaccount .dropdown-menu .avatar{width: 32px; height: 32px; object-fit: cover; object-position: center; border-radius: 50%; border: 1px solid #28a745;}
#header .dropdown-myaccount .dropdown-menu .menu-item{padding: 6px 20px;}
#header .dropdown-myaccount .dropdown-menu .menu-item .name{font-weight: 600; color: #252f4a; font-size: 16px;}
#header .dropdown-myaccount .dropdown-menu .menu-item .role{font-size: 13px;}
#header .dropdown-myaccount .dropdown-menu .menu-item .menu-link{display: flex; padding: 10x; color: #252f4a; font-size: 13px; line-height: 18px; font-weight: 500;}
#header .dropdown-myaccount .dropdown-menu .menu-item .menu-link .menu-icon{margin-right: 10px;}
#header .btn-light{ color: #4b5675; border-color: #dbdfe9; background-color: #fff; border-radius: 4px;}
#header .header-menu{border-bottom: 1px solid #f1f1f4; margin-bottom: 40px; margin-top: 20px;}
#header .header-menu ul{list-style: none; padding-left: 0; display: flex;}
#header .header-menu ul li{display: inline-block; padding-top: 12px; padding-bottom: 12px; margin-right: 20px; position: relative; border-bottom: 2px solid transparent;}
#header .header-menu ul li:last-child{margin-right: 0;}
#header .header-menu ul li.has-submenu > a > span:after{content: "\f107"; font-family: "FontAwesome"; margin-left: 5px;}
#header .header-menu ul li .toggle-submenu{display: none;}
#header .header-menu ul li a{color: #252f4a; text-wrap: nowrap; font-size: 14px; line-height: 18px; text-decoration: none;}
#header .header-menu li.current-page > a,
#header .header-menu ul li:hover > a {color: #071437;} 
#header .header-menu ul li a i{margin-right: 5px;}
#header .header-menu ul .treeview-menu li{display: block; width: 100%;}
#header .header-menu ul .treeview-menu li a {padding-left: 10px; padding-right: 10px;}
#header .menu-mobile{display: none; margin-left: 15px;}
#header .menu-mobile a{font-size: 22px;}
@media (min-width: 1024px) {
    #header .header-menu ul.sidebar-menu > li:hover,
    #header .header-menu ul.sidebar-menu > li.current-page{border-bottom-color: #28a745;}
    #header .header-menu ul .treeview-menu{display: none; position: absolute; border-radius: 10px; min-width: 200px; padding: 8px 0; top: calc(100% + 2px); left: 0; z-index: 100; background-color: #fff; box-shadow: 0px 7px 18px 0px rgba(0,0,0,.09); border: 1px solid #f1f1f4;}
    #header .header-menu ul li:hover > .treeview-menu{display: block;}
    #header .header-menu ul .treeview-menu .treeview-menu{left: 100%; top: 0;}
    #header .header-menu ul .treeview-menu li.has-submenu > a > span:after{content: "\f105"; z-index: 1; font-family: "FontAwesome"; margin-left: 0; position: absolute; right: 5px; top: 9px;}
}
@media (max-width: 1024px) {
    #header{border-bottom: 1px solid #f1f1f4; margin-bottom: 30px; padding-bottom: 20px;}
    #header .menu-mobile{display: block;}
    #header .header-menu{display: none; margin-bottom: 0; border: 0;}
    #header .header-menu ul,
    #header .header-menu ul li{display: block; padding-top: 8px; padding-bottom: 8px; margin-right: 0;}
    #header .header-menu ul .treeview-menu{position: relative; box-shadow: none; top: auto; left: auto; display: none;}
    #header .header-menu ul .treeview-menu .treeview-menu{padding-left: 20px; padding-top: 10px;}
    #header .header-menu ul li:last-child{padding-bottom: 0;}
    #header .header-menu ul li.has-submenu > a > span:after{display: none !important;}
    #header .header-menu ul li .toggle-submenu{display: block; position: absolute; right: 0; top: 2px; color: #4b5675; border: 1px solid #dbdfe9; background-color: #fff; width: 30px; height: 30px; line-height: 30px; text-align: center;}
    #header .header-menu ul li .toggle-submenu i{margin-right: 0;}
    #header .header-menu ul li.is_show > a > .toggle-submenu i:before{content: "\f0da";}
}

/*Footer*/
.footer{border-top: 1px solid #f1f1f4; margin-top: 30px; padding-top: 40px; background-color: #25313f;}
.footer .footer-area{margin-bottom: 30px;}
.footer .footer-area .widget-title {font-size: 16px; color: #fff; margin-bottom: 20px;}
.footer .footer-area li{margin-bottom: 9px;}
.footer p,
.footer .footer-area li a, 
.footer .footer-area li{font-size: 14px; color: #fff;}
.footer .footer-bottom{border-top: 1px solid rgba(255, 255, 255, .3); padding-top: 10px; padding-bottom: 10px;}

/*Content*/
.container > .content > .container{padding-left: 0; padding-right: 0;}
#content{min-height: calc(100vh - 320px);}

/*Pagination*/
.pagination {margin-top: 10px; justify-content: center; text-align: center;}
.pagination li {margin-right: 10px;}
.pagination li a,
.pagination li span {font-size: 13px; color: #252f4a; line-height: 30px; min-width: 30px; height: 30px; background-color: #f1f1f4; text-align: center; display: inline-block;}
.pagination li.active span {background-color: #28a745; color: #fff;}

/*Footer Input*/
.form-control{font-family: 'Inter'; padding-left: 12px; padding-right: 12px; border: 1px solid #dbdfe9; background-color: #fcfcfc; color: #4b5675; height: 38px; box-shadow: none; outline: none; border-radius: 4px; font-weight: 500;}
.form-control:focus{box-shadow: none; border-color: #28a745;}

/*Card*/
.card{display: flex; flex-direction: column; box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, .03); background-color: #fff; border-radius: 12px; border: 1px solid #f1f1f4;}
.card-header{display: flex; flex-wrap: wrap; align-items: center; min-height: 56px; border-bottom: 1px solid #f1f1f4; background-color: #fff; border-top-left-radius: 12px !important; border-top-right-radius: 12px !important;}
.card-header > *{flex: 0 0 100%; max-width: 100%;}
.card-title {font-size: 16px; line-height: 24px; font-weight: 600; color: #071437;}

/*Bag*/
.bag{display: inline-flex; align-items: center;justify-content: center;line-height: 1; border-radius: 4px; padding: 5px 6px; border: 1px solid transparent; font-weight: 500; font-size: 13px;}
.bag.lg{padding: 8px 10px;}
.bag-status-0{color: #ff6f1e; background-color: #fff5ef; border-color: #f15700;}
.bag-status-1{color: #17c653; background-color: #eafff1; border-color: #04b440;}
.bag-status-2{color: #f8285a; background-color: #ffeef3; border-color: #d81a48;}

/*Bashboard*/
.main-bashboard .card{height: calc(100% - 30px); margin-bottom: 30px; background-color: rgba(255, 255, 255, 0.6); background-repeat: no-repeat; background-size: cover; background-position: center;}
.main-bashboard .card a{text-decoration: none;}
.main-bashboard .card h1{width: 60px; height: 60px; border: 1px solid; border-radius: 50%; display: flex; align-items: center;justify-content: center;}
.main-bashboard .card h1 i{font-size: 32px;}
.main-bashboard .card .bashboard-title{font-size: 18px; font-weight: 500; color: #071437;}
.main-bashboard .ic-loading{display: none;}
@media (max-width: 768px) {
    .main-bashboard .card h1{width: 40px; height: 40px;}
    .main-bashboard .card h1 i{font-size: 24px;}
    .main-bashboard .card .bashboard-title{font-size: 16px;}
}

/*Breadcrumb*/
.breadcrumb-wrap{border-bottom: 1px solid #f1f1f4; margin-bottom: 30px;}
.breadcrumb-wrap .page-title{font-weight: 500; font-size: 22px; margin-bottom: 7px;}
.breadcrumb-wrap .breadcrumb{background-color: #fff; padding-left: 0; padding-top: 0; margin-bottom: 5px;}
.breadcrumb-wrap .breadcrumb .breadcrumb-item a{color: #4b5675}
.breadcrumb-wrap .breadcrumb .breadcrumb-item.active{color: #28a745;}
@media (max-width: 768px) {
    .breadcrumb-wrap .breadcrumb{flex-wrap: nowrap; white-space: nowrap}
}

/*Action*/
.btn-setting{color: #4b5675; border: 1px solid #dbdfe9; background-color: #fff;}
.btn-setting i{color: #4b5675 !important;}
.btn-export{color: #4b5675; border: 1px solid #dbdfe9; background-color: #fff; font-size: 12px; margin-left: 10px;}
.dropdown-action .dropdown-menu{padding: 10px;}
.dropdown-action .dropdown-menu a{display: block; margin-bottom: 7px;}
.dropdown-action .dropdown-menu a:last-child{margin-bottom: 0;}

/*Badge*/
.badge-item{border: 1px solid #f1f1f4; padding: 10px 14px; border-radius: 12px; gap: 8px; justify-content: space-between; margin-bottom: 15px;}
.badge-item .text-gray-900{font-weight: 500; color: #071437; font-size: 14px; line-height: 20px;}
.badge-item .next-icon svg{width: 30px; height: 30px; fill: #1b84ff;}
.badge-item .svg-item{position: relative; width: 40px; height: 40px; margin-right: 10px;}
.badge-item .svg-item .absolute{position: absolute; line-height: 1; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.badge-item .svg-item .absolute i{color: #1b84ff; font-style: inherit; font-size: 16px;}
.badge-item .stroke-primary-clarity {stroke: rgba(27,132,255,.2);}
.badge-item .fill-primary-light {fill: #eff6ff;}
.badge-item .w-full {width: 100%}
.badge-item .h-full {height: 100%;}
.badge-item.ic-large .svg-item{width: 70px; height: 70px;}
.badge-item.badge-statics-item{display: block; background-color: #F5F5F5; position: relative;}
.badge-item.badge-statics-item h3{font-size: 20px; color: rgb(63 152 200); border-bottom: 1px solid #d3d3d3; text-align: center; margin-bottom: 20px; padding-bottom: 10px;}
.badge-item.badge-statics-item h3 i{font-size: 18px;}
.badge-item.badge-statics-item p {font-size: 15px; line-height: 1.6;}
.badge-item.badge-statics-item p .text-bold{font-weight: 600;}
.badge-item.badge-statics-item .next-icon{position: absolute; right: 15px; top: 45%; z-index: 1;}

.badge-item-2 .next-icon svg,
.badge-item-9 .next-icon svg{fill: #ff6f1e;}
.badge-item-2 .svg-item .absolute i,
.badge-item-9 .svg-item .absolute i{color: #ff6f1e;}
.badge-item-2 .stroke-primary-clarity,
.badge-item-9 .stroke-primary-clarity {stroke: rgba(255,111,30,.2);}
.badge-item-2 .fill-primary-light,
.badge-item-9 .fill-primary-light {fill: #fff5ef;}

.badge-item-3 .next-icon svg,
.badge-item-10 .next-icon svg{fill: #17c653;}
.badge-item-3 .svg-item .absolute i,
.badge-item-10 .svg-item .absolute i{color: #17c653;}
.badge-item-3 .stroke-primary-clarity,
.badge-item-10 .stroke-primary-clarity {stroke: rgba(23,198,83,.2);}
.badge-item-3 .fill-primary-light,
.badge-item-10 .fill-primary-light {fill: #eafff1;}

.badge-item-4 .next-icon svg,
.badge-item-11 .next-icon svg{fill: #7239ea;}
.badge-item-4 .svg-item .absolute i,
.badge-item-11 .svg-item .absolute i{color: #7239ea;}
.badge-item-4 .stroke-primary-clarity,
.badge-item-11 .stroke-primary-clarity {stroke: rgba(114,57,234,.2);}
.badge-item-4 .fill-primary-light,
.badge-item-11 .fill-primary-light {fill: #f8f5ff;}

.badge-item-5 .next-icon svg,
.badge-item-12 .next-icon svg{fill: #f8285a;}
.badge-item-5 .svg-item .absolute i,
.badge-item-12 .svg-item .absolute i{color: #f8285a;}
.badge-item-5 .stroke-primary-clarity,
.badge-item-12 .stroke-primary-clarity {stroke: rgba(248,40,90,.2);}
.badge-item-5 .fill-primary-light,
.badge-item-12 .fill-primary-light {fill: #ffeef3;}

.badge-item-6 .next-icon svg{fill: #f6b100;}
.badge-item-6 .svg-item .absolute i{color: #f6b100;}
.badge-item-6 .stroke-primary-clarity {stroke: rgba(246,177,0,.2);}
.badge-item-6 .fill-primary-light {fill: #fff8dd;}

.badge-item-7 .next-icon svg{fill: #1e2129;}
.badge-item-7 .svg-item .absolute i{color: #1e2129;}
.badge-item-7 .stroke-primary-clarity {stroke: rgba(30,33,41,.2);}
.badge-item-7 .fill-primary-light {fill: #f9f9f9;}

.badge-item-8 .next-icon svg{fill: #17a2b8;}
.badge-item-8 .svg-item .absolute i{color: #1e2129;}
.badge-item-8 .stroke-primary-clarity {stroke: rgba(23, 162, 184,.2);}
.badge-item-8 .fill-primary-light {fill: rgba(23, 162, 184,.2);}

.badge-active{background-color: rgba(40, 167, 69, 0.6); text-decoration: none;}
.badge-active .next-icon svg{fill: #fff;}
.badge-active .text-gray-900{color: #fff;}
.badge-active .svg-item .absolute i{color: #fff;}
.badge-active .stroke-primary-clarity {stroke: rgba(246,177,0,.2);}
.badge-active .fill-primary-light {fill: rgba(246,177,0,.2);}