html,
    body {
        height: 100%;
        font-size: 13px;
        max-width: 150rem;
        margin: auto;
        font-family: "inter";
        font-weight: 500;
    }
    
    @font-face {
        font-family: "inter";
        src: url("../css/fonts/Inter-Regular.ttf") format("truetype");
    }
    
    main>.container {
        padding: 70px 20px 20px
    }
    
    .footer {
        background-color: #f5f5f5;
        font-size: .9em;
        height: 60px;
    }
    
    .footer>.container {
        padding-right: 15px;
        padding-left: 15px;
    }
    
    .not-set {
        color: #c55;
        font-style: italic;
    }
    
    span {
        color: gray;
    }
    
    label {
        width: auto !important;
    }
    
    .filter-badge {
        color: white !important;
    }
    
    .btn-primary {
        background-color: #1286E1 !important;
    }
    
    .btn-close {
        font-size: 9px;
    }
    
    .was-validated .form-control:valid,
    .form-control.is-valid {
        background-image: unset;
    }
    
    .was-validated .form-control:invalid,
    .form-control.is-invalid {
        background-image: unset;
    }
    
    .flag-en {
        background-image: url("../images/uk-flag.png");
    }
    
    .flag-id {
        background-image: url("../images/id-flag.jpg");
    }
    
    [class*="flag-"] {
        width: 1em;
        height: 1em;
        display: inline-block;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 3em;
        background-position: center;
        vertical-align: middle;
        margin-bottom: 0.2em;
    }
    /* add sorting icons to gridview sort links */
    
    a.asc:after,
    a.desc:after {
        content: '';
        left: 3px;
        display: inline-block;
        width: 0;
        height: 0;
        border: solid 5px transparent;
        margin: 4px 4px 2px 4px;
        background: transparent;
    }
    
    a.asc:after {
        border-bottom: solid 7px #212529;
        border-top-width: 0;
    }
    
    a.desc:after {
        border-top: solid 7px #212529;
        border-bottom-width: 0;
    }
    
    .grid-view th {
        white-space: nowrap;
    }
    
    .hint-block {
        display: block;
        margin-top: 5px;
        color: #999;
    }
    
    .error-summary {
        color: #a94442;
        background: #fdf7f7;
        border-left: 3px solid #eed3d7;
        padding: 10px 20px;
        margin: 0 0 15px 0;
    }
    /* align the logout "link" (button in form) of the navbar */
    
    .nav-container {
        padding: 0px 15px;
    }
    
    .nav li>form>button.logout {
        padding-top: 7px;
        color: rgba(255, 255, 255, 0.5);
    }
    
    .nav>li>form>button.logout:focus,
    .nav>li>form>button.logout:hover {
        text-decoration: none;
        color: rgba(255, 255, 255, 0.75);
    }
    
    .nav>li>form>button.logout:focus {
        outline: none;
    }
    
    .form-group {
        margin-bottom: 1rem;
    }
    
    .navbar-collapse {
        float: right;
        flex-grow: unset;
    }
    
    .bg-navy {
        background-color: #0E65A9 !important;
    }
    
    .bg-sky-blue {
        background-color: #D0E7F9 !important;
    }
    
    .title-label {
        color: white;
        font-weight: 500;
        font-size: 15px;
    }
    
    .navbar-nav .nav-link.active,
    .navbar-nav .nav-link.show {
        color: white;
    }
    
    .navbar-nav .nav-link.active::after {
        display: block;
        content: "";
        height: 1.5px;
        width: auto;
        bottom: 0;
        background-color: white;
        margin-top: 0.4rem;
    }
    
    .bg-info {
        background-color: #D0E7F9 !important;
    }
    
    .card {
        box-shadow: 0px 2px 7px #002e423d;
        min-height: 21vh;
        border: unset;
    }
    
    .card-header {
        border-bottom: none;
    }
    
    .title {
        font-weight: 600;
        font-size: 16px;
    }
    
    .header {
        font-weight: 600;
        font-size: calc(1.3rem + 0.6vw);
    }
    
    .line-gap {
        height: 22px;
        border-color: gray;
        border-left: 1.5px solid gray;
        display: flex;
        align-items: center;
    }
    
    .wrap-chart {
        width: 20%;
    }
    
    .wrap-bill-desc {
        width: 80%;
    }
    
    .color-gold {
        color: #BF8B00;
    }
    
    .color-red {
        color: #DB1919;
    }
    
    .color-cyan {
        color: #33A6B6;
    }
    
    .color-blue {
        color: #1286E1
    }
    
    .color-black {
        color: #333333;
    }
    
    .container-chart {
        width: 75%;
        margin: auto;
    }
    
    .summary {
        font-size: 10px;
    }
    
    .pagination {
        overflow: auto;
    }
    
    a {
        text-decoration: none;
    }
    
    .kv-sort-link.asc:after,
    .kv-sort-link.desc:after {
        content: none;
    }
    
    .table-bordered> :not(caption)>* {
        border-width: 0;
    }
    
    .table tbody tr:hover {
        background-color: #D0E7F9 !important;
    }
    
    .table thead th {
        background-color: #D0E7F9;
        color: #007bffc2;
        line-height: 0.9;
    }
    
    .table-bordered td,
    .table-bordered th {
        border: 0px;
    }
    /* FONT SIZE */
    
    .font-10 {
        font-size: 10px;
    }
    
    .font-11 {
        font-size: 11px;
    }
    
    .font-12 {
        font-size: 12px;
    }
    
    .font-13 {
        font-size: 13px;
    }
    
    .font-14 {
        font-size: 14px;
    }
    
    .font-15 {
        font-size: 15px;
    }
    
    .font-16 {
        font-size: 16px;
    }
    
    .font-18 {
        font-size: 18px;
    }
    
    .font-19 {
        font-size: 19px;
    }
    
    .modal-dialog {
        padding-top: 5rem !important;
    }
    
    body::-webkit-scrollbar,
    .kv-grid-container::-webkit-scrollbar,
    .modal-body::-webkit-scrollbar,
    .tables-container::-webkit-scrollbar,
    div::-webkit-scrollbar,
    section::-webkit-scrollbar,
    ul::-webkit-scrollbar {
        background-color: #fff;
        width: 10px;
        height: 10px;
    }
    
    body::-webkit-scrollbar-track,
    .kv-grid-container::-webkit-scrollbar-track,
    .modal-body::-webkit-scrollbar-track,
    .tables-container::-webkit-scrollbar-track,
    div::-webkit-scrollbar-track,
    section::-webkit-scrollbar-track,
    ul::-webkit-scrollbar-track {
        background-color: #fff;
    }
    
    body::-webkit-scrollbar-thumb,
    .kv-grid-container::-webkit-scrollbar-thumb,
    .modal-body::-webkit-scrollbar-thumb,
    .tables-container::-webkit-scrollbar-thumb,
    div::-webkit-scrollbar-thumb,
    section::-webkit-scrollbar-thumb,
    ul::-webkit-scrollbar-thumb {
        background-color: #babac0;
        background-color: #a9c0c6;
        border-radius: 12px;
        border: 2px solid #fff
    }
    
    body::-webkit-scrollbar-button,
    .kv-grid-container::-webkit-scrollbar-button,
    .modal-body::-webkit-scrollbar-button,
    .tables-container::-webkit-scrollbar-button,
    div::-webkit-scrollbar-button,
    section::-webkit-scrollbar-button,
    ul::-webkit-scrollbar-button {
        display: none;
    }
    /* Chrome, Safari, Edge, Opera */
    
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    
    input[type="checkbox"] {
        cursor: pointer;
    }
    
    .middle-img {
        justify-content: center;
        display: flex;
        align-items: center;
    }
    
    .kv-loader {
        display: none;
        position: relative;
        overflow: hidden;
    }
    /* Border Color */
    
    .border-red {
        color: #E24747;
        border: 1px solid;
        background-color: #FCE9E9;
    }
    
    .border-yellow {
        color: #BF8B00;
        border: 1px solid;
        background-color: #FFF9E6;
    }
    
    .border-blue {
        color: #1a80d9;
        border: 1px solid;
        background-color: #e9f6fc;
    }
    
    .border-cyan {
        color: #33A6B6;
        border: 1px solid;
        background-color: #e9f6fc;
    }
    
    .hero-art-left {
        background: url("../images/vector-bottom.svg");
        aspect-ratio: 1.5 / 1;
        width: 20%;
        background-size: contain;
        background-repeat: no-repeat;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: -1;
    }
    
    .hero-art-right {
        background: url("../images/vector-bottom.svg");
        aspect-ratio: 1 / 1;
        width: 20%;
        background-size: contain;
        background-repeat: no-repeat;
        position: fixed;
        top: 0;
        right: 0;
        z-index: -1;
        transform: rotate(180deg);
    }
    /* WIDTH */
    
    .w-100 {
        width: 100%;
    }
    
    .w-55 {
        width: 55%;
    }

    .w-45 {
        width: 45%;
    }

    .w-40 {
        width: 40%;
    }

    .w-30 {
        width: 30%;
    }
    
    .min-w-10 {
        min-width: 10px;
    }
    /* WIDTH */
    
    @media(max-width:767px) {
        .lang-mobile {
            display: initial !important;
        }
        .nav li>form>button.logout {
            display: block;
            text-align: left;
            width: 100%;
            padding: 10px 0;
        }
    }