/* Current accent color today 29-12-2021 is #696ffb and #1e27f9 but changed to #ff9500, in this file and th other */


/* * { 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
} */

html {
    height: 100% !important;
    /* font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji; */
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* background-image: linear-gradient(90deg, #414850, #131720) !important; */
    background: #fff;
    font-weight: 200 !important;
    font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-feature-settings: 'kern' !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

body {
    font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    height: 100vh !important;
    /* background-image: linear-gradient(90deg, #ffffff, #ffffff) !important; */
    background: #fff;
}

.text-primary {
    color: #ff9500 !important;
}

.strike-through {
    text-decoration: line-through;
}

.bg-inverse-primary {
    background: rgba(105, 111, 251, 0.2);
}

.bg-inverse-secondary {
    background: rgba(223, 232, 251, 0.2);
}

.bg-inverse-success {
    background: rgba(76, 206, 172, 0.2);
}

.bg-inverse-info {
    background: rgba(133, 123, 255, 0.2);
}

.bg-inverse-warning {
    background: rgba(255, 111, 89, 0.2);
}

.bg-inverse-danger {
    background: rgba(219, 80, 74, 0.2);
}

.bg-inverse-light {
    background: rgba(243, 245, 246, 0.2);
}

.bg-inverse-dark {
    background: rgba(34, 60, 97, 0.2);
}

.bg-inverse-white {
    background: rgba(255, 255, 255, 0.2);
}

.card-bg-black {
    background-color: #101C21;
}

.card-text-light-color {
    color: #F3FAFD;
}

.card-text-light-xd-color {
    color: #bdd5f9;
}

.card-nav__icon {
    font-size: 2.5rem;
}

.card-nav__icon-color-amber {
    color: #e95819;
}

.card-nav__icon-color-green {
    color: #13bd2f;
}

.card-nav__icon-color-red {
    color: #d30f0f;
}

.card-nav__icon-color-blue {
    color: #ff9500;
}

.card-nav__icon-color-grey {
    color: #c5c5c5;
}

.card-nav__icon-color-black {
    color: #101C21;
}


/* Header */

.t-header {
    display: flex;
    height: 65px;
    z-index: 100;
}

@media (max-width: 991.98px) {
    .t-header {
        padding-left: 5px;
        padding-right: 5px;
    }
}

.t-header .t-header-brand-wrapper {
    display: flex;
    align-items: center;
    height: 65px;
    width: 17rem;
    min-width: 17rem;
    max-width: 17rem;
    z-index: 100;
    padding-left: 18px;
    background: #ffffff;
}

.t-header .t-header-brand-wrapper a {
    display: flex;
    align-items: center;
    color: #f3f5f6;
    font-weight: 500;
    font-size: 1.25rem;
}

.t-header .t-header-brand-wrapper a .logo {
    max-width: 100%;
    /* width: 80px;  */
}

.t-header .t-header-brand-wrapper a .logo-mini {
    display: none;
    max-width: 100%;
    width: 35px;
}

.t-header .t-header-brand-wrapper a p {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .t-header .t-header-brand-wrapper {
        padding-left: 0;
        justify-content: center;
    }
    .t-header .t-header-brand-wrapper a .logo-mini {
        width: 25px;
    }
}

.t-header .t-header-content-wrapper {
    display: flex;
    align-items: center;
    flex-direction: row;
    width: 100%;
    max-width: 100%;
    padding: 0 2.5rem;
    /* background: #fbfcfd; */
    /* background: #f5f7fc; */
    /* background: #00112C; */
    background: #ffffff;
    border-bottom: 1px solid #f2f4f9;
}

@media (max-width: 991.98px) {
    .t-header .t-header-content-wrapper {
        padding: 0 1rem;
    }
}

.t-header .t-header-content-wrapper .t-header-search-box {
    display: flex;
    width: 100%;
    height: 40px;
    background: #fff;
    border-radius: 50px;
    box-shadow: 0px 0px 5px -1px #ff9500;
    padding: 5px;
    transition: 0.3s ease-in-out;
    transition-property: "width";
    overflow: hidden;
}

@media (max-width: 580px) {
    .t-header .t-header-content-wrapper .t-header-search-box {
        display: none;
    }
}

.t-header .t-header-content-wrapper .t-header-search-box .form-control {
    height: inherit;
    border: none;
    background: transparent;
    /* font-size: 1rem;
  font-weight: 500; */
    padding-left: 0;
    padding: 5px 20px;
}

.t-header .t-header-content-wrapper .t-header-search-box .form-control.placeholder {
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
}

.t-header .t-header-content-wrapper .t-header-search-box .form-control:-moz-placeholder {
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
}

.t-header .t-header-content-wrapper .t-header-search-box .form-control::-moz-placeholder {
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
}

.t-header .t-header-content-wrapper .t-header-search-box .form-control:-ms-input-placeholder {
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
}

.t-header .t-header-content-wrapper .t-header-search-box .form-control::-webkit-input-placeholder {
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
}

.t-header .t-header-content-wrapper .t-header-search-box button[type="submit"] {
    height: 100%;
    border-radius: 50px;
    padding: 0 7px;
    box-shadow: 0px 0px 5px -1px #ff9500;
    transition-duration: 0.3s;
    transition-property: "box-shadow";
}

.t-header .t-header-content-wrapper .t-header-search-box button[type="submit"] i {
    font-size: 15px;
}

.t-header .t-header-content-wrapper .t-header-search-box button[type="submit"]:hover {
    box-shadow: 0px 0px 8px -1px #ff9500;
}

.t-header .t-header-content-wrapper .t-header-content {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
}

.t-header .t-header-content-wrapper .t-header-content .nav .nav-item .nav-link {
    position: relative;
}

.t-header .t-header-content-wrapper .t-header-content .nav .nav-item .nav-link i {
    /* color: #ffffff;  */
    color: #ff9500 !important;
}

.t-header .t-header-content-wrapper .t-header-content .nav .nav-item .nav-link .notification-indicator {
    position: absolute;
    top: 12px;
    right: 12px;
}

.t-header .t-header-content-wrapper .t-header-content .nav .nav-item:last-child .nav-link {
    padding-right: 0;
}

.t-header .t-header-toggler {
    background: transparent;
    border: none;
    margin-left: auto;
}

.t-header .t-header-toggler i {
    font-size: 1.375rem;
}

.t-header .t-header-toggler.t-header-mobile-toggler {
    margin-left: 0;
    margin-right: 15px;
}

.t-header.fixed-top {
    position: fixed;
}

.header-fixed .t-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

.header-fixed .sidebar {
    padding-top: 65px;
}

.header-fixed .sidebar .t-header-brand-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10000;
    width: 17rem;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.05);
}

.header-fixed .sidebar .navigation-menu {
    z-index: 1;
}


/* Sidebar */

.sidebar {
    position: relative;
    display: block;
    height: 100%;
    min-height: 100vh !important;
    width: 17rem;
    min-width: 17rem;
    max-width: 30rem;
    background: #ffffff;
    color: #1f202e;
}

.sidebar .sidebar-header {
    border-bottom: 1px solid #fff;
}

.sidebar .user-profile {
    padding: 50px 0 0 0;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.sidebar .user-profile .user-name {
    font-weight: 600;
    margin-top: 25px;
}

.sidebar .user-profile .display-income {
    margin-top: 5px;
    color: #1f202e;
}

.sidebar .navigation-menu {
    padding-left: 0;
    padding-bottom: 80px;
    margin-bottom: 0;
    margin-top: 5px;
}

.sidebar .navigation-menu li {
    display: block;
    margin: 0;
    transition-duration: 0.25s;
    transition-timing-function: cubic-bezier(0.26, 0.66, 0.45, 0.78);
    transition-property: "background";
}

.sidebar .navigation-menu li.nav-category-divider {
    position: -webkit-sticky;
    position: sticky;
    top: 64px;
    display: block;
    background: #ffffff;
    margin: 15px 0px 0px 0px;
    padding: 20px 30px 10px 30px;
    /* font-size: 10px; */
    color: #1f202e;
    z-index: 1;
    /* font-weight: 500;  */
}

.sidebar .navigation-menu li.nav-category-divider:first-child {
    margin-top: 0;
}

.sidebar .navigation-menu li a {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: flex-end;
    padding: 12px 30px 12px 30px;
    font-size: 13px;
    line-height: 1;
    color: #525c5d;
    letter-spacing: 0.03rem;
    font-weight: 500;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.sidebar .navigation-menu li a .link-icon {
    margin-right: 15px;
    line-height: 1;
    color: #525c5d;
    /* font-size: 1.1875rem; */
    transition-duration: 0.3s;
    transition-property: "margin-right";
}

.sidebar .navigation-menu li:last-child a {
    border-bottom: none;
}

.sidebar .navigation-menu li .navigation-submenu {
    background: #fafafa;
    padding: 0px 0 10px 30px;
}

.sidebar .navigation-menu li .navigation-submenu.collapsing {
    transition: 0.2s ease-in;
}

.sidebar .navigation-menu li .navigation-submenu li {
    display: inherit;
}

.sidebar .navigation-menu li .navigation-submenu li a {
    display: block;
    padding: calc(9px) 30px calc(9px) calc(30px + 2px);
    opacity: 0.5;
    letter-spacing: 0.03rem;
    /* font-weight: 500; */
    /* font-size: calc(13px - 1px); */
    transition: 0.3s ease-in-out;
    transition-property: color;
}

.sidebar .navigation-menu li .navigation-submenu li a[data-toggle="collapse"] {
    position: relative;
}

.sidebar .navigation-menu li .navigation-submenu li a[data-toggle="collapse"]:after {
    content: "";
    height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    right: calc(30px + 4px);
    top: 14px;
}

.sidebar .navigation-menu li .navigation-submenu li a.active {
    opacity: 0.9;
    color: #ff9500;
}

.sidebar .navigation-menu li .navigation-submenu li a:hover {
    opacity: 0.7;
    color: #ff9500;
}

.sidebar .navigation-menu li .navigation-submenu li:first-child a {
    padding-top: 10px;
}

.sidebar .navigation-menu li .navigation-submenu li:first-child a:after {
    top: 15px;
}

.sidebar .navigation-menu li .navigation-submenu li:nth-child(5n + 1) a:after {
    background: #4CCEAC;
}

.sidebar .navigation-menu li .navigation-submenu li:nth-child(5n + 2) a:after {
    background: #ff9500;
}

.sidebar .navigation-menu li .navigation-submenu li:nth-child(5n + 3) a:after {
    background: #DB504A;
}

.sidebar .navigation-menu li .navigation-submenu li:nth-child(5n + 4) a:after {
    background: #FF6F59;
}

.sidebar .navigation-menu li .navigation-submenu li:nth-child(5n + 5) a:after {
    background: #857bff;
}

.sidebar .navigation-menu li .navigation-submenu li .navigation-submenu {
    padding-left: 0px;
}

.sidebar .navigation-menu li .navigation-submenu li .navigation-submenu li a {
    opacity: 0.5;
}

.sidebar .navigation-menu li.active a .link-title {
    /* color: #4CCEAC;  */
    color: #ff9500;
}

.sidebar .navigation-menu li.active a .link-icon {
    /* color: #4CCEAC;  */
    color: #ff9500;
}

.sidebar .navigation-menu li a.active .link-icon {
    margin-right: 20px;
    /* color: #4CCEAC;  */
    color: #ff9500;
}


/* .sidebar .navigation-menu>li:not(.nav-category-divider):hover a:not([aria-expanded="true"]) .link-icon {
    margin-right: 20px;
    color: #ff9500;
} */

.sidebar .navigation-menu>li:not(.nav-category-divider)>a[data-toggle="collapse"] {
    position: relative;
}

.sidebar .navigation-menu>li:not(.nav-category-divider)>a[data-toggle="collapse"]:after {
    content: "\f142";
    font-family: "Material Design Icons";
    /* font-size: 15px; */
    text-rendering: auto;
    line-height: inherit;
    font-weight: bolder;
    position: absolute;
    top: 13px;
    right: 30px;
    display: block;
    transition: 0.3s;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    color: #839092;
}

.sidebar .navigation-menu>li:not(.nav-category-divider)>a[data-toggle="collapse"][aria-expanded="true"] .link-icon {
    color: #ff9500;
}

.sidebar .navigation-menu>li:not(.nav-category-divider)>a[data-toggle="collapse"][aria-expanded="true"] {
    background: #fafafa;
    color: #ff9500;
}

.sidebar .navigation-menu>li:not(.nav-category-divider)>a[data-toggle="collapse"][aria-expanded="true"]:after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    color: #ff9500;
}

.sidebar .navigation-menu>li:not(.nav-category-divider)>a[data-toggle="collapse"][aria-expanded="false"]:after {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    color: #ff9500;
}


/* Footer */

footer {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    /* padding: 2rem 2.5rem; */
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 991.98px) {
    footer {
        padding: 20px 0px 30px 0;
    }
}

footer ul {
    margin-left: 0;
    padding-left: 0;
}

footer ul li {
    display: inline-block;
    padding: 0 10px 0 0;
    line-height: 1;
}

footer ul li:not(:last-child) {
    margin-right: 10px;
    border-right: 1px solid #f2f4f9;
}

footer ul li a {
    /* font-weight: 600; */
    letter-spacing: 0.03rem;
    color: #565656;
}


/* Layout */

@media (min-width: 992px) {
    .t-header .t-header-content-wrapper {
        /* border-left: 1px solid #f2f4f9;  */
    }
}

@media (min-width: 768px) {
    .page-body {
        position: relative;
        display: grid;
        max-width: 100%;
        /* grid-template-columns: 17rem calc(100vw - 17rem); */
        transition: 0.3s;
    }
    .page-body .page-content-wrapper {
        position: relative;
        width: 100%;
        min-height: 100vh;
        padding: 1.5rem 2.5rem 3.5rem;
        margin-top: 5px;
    }
    .page-body .page-content-wrapper .page-content-wrapper-inner {
        /* max-width: 1140px; */
        margin-left: auto;
        margin-right: auto;
    }
    .page-body .page-content-wrapper .page-content-wrapper-inner .viewport-header {
        position: -webkit-sticky;
        position: sticky;
        top: 65px;
        /* background: #fbfcfd; */
        z-index: 99;
    }
    .page-body .page-content-wrapper .page-content-wrapper-inner .viewport-header .breadcrumb {
        padding: 1rem 1rem 1rem 21px;
        margin-left: -20px;
        margin-right: -20px;
        /* background: #fbfcfd;  */
    }
    .page-body .page-content-wrapper .page-content-wrapper-inner .viewport-header .breadcrumb .breadcrumb-item {
        color: #565656;
        letter-spacing: 0.03rem;
        /* font-weight: 500;  */
    }
    .page-body .page-content-wrapper .page-content-wrapper-inner .viewport-header .breadcrumb .breadcrumb-item a {
        color: inherit;
    }
    .page-body .page-content-wrapper .page-content-wrapper-inner .viewport-header .breadcrumb .breadcrumb-item.active {
        color: #ff9500;
    }
    .page-body .page-content-wrapper .page-content-wrapper-inner .viewport-header .page-title-heading {
        color: #565656;
        /* font-size: 1.5rem;
            font-weight: 500; */
        margin-bottom: 0;
    }
    .page-body .page-content-wrapper .page-content-wrapper-inner .viewport-header .page-description {
        opacity: 0.7;
        margin-top: 15px;
    }
}

@media (max-width: 991.98px) {
    .t-header {
        width: 100vw;
    }
    .t-header .t-header-brand-wrapper {
        background: #fbfcfd;
        width: 4rem;
        min-width: 4rem;
        max-width: 4rem;
    }
    .t-header .t-header-brand-wrapper a .logo {
        -webkit-animation-name: menuItemFadeIn;
        animation-name: menuItemFadeIn;
        -webkit-animation-duration: 0.25s;
        animation-duration: 0.25s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        display: none;
    }
    @-webkit-keyframes menuItemFadeIn {
        from {
            -webkit-transform: translate3d(-20px, 0, 0);
            transform: translate3d(-20px, 0, 0);
            display: none;
            opacity: 0;
        }
        to {
            display: block;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            opacity: 1;
        }
    }
    @keyframes menuItemFadeIn {
        from {
            -webkit-transform: translate3d(-20px, 0, 0);
            transform: translate3d(-20px, 0, 0);
            display: none;
            opacity: 0;
        }
        to {
            display: block;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            opacity: 1;
        }
    }
    .t-header .t-header-brand-wrapper a .logo-mini {
        display: block;
    }
    .page-body {
        display: flex;
        flex-direction: row;
        overflow: hidden;
        max-width: 100%;
    }
    .page-body .sidebar {
        /* position: relative;
        left: 0px;
        z-index: 99;
        width: 15rem;
        min-width: 15rem;
        max-width: 15rem;
        margin-left: -15rem;
        transition-duration: 0.8s;
        -webkit-transition-duration: 0.8s;
        transition-timing-function: ease-in-out;
        transition-property: "margin-left", "width"; */
    }
    .page-body .page-content-wrapper {
        padding: 20px 20px;
        min-width: 100vw;
        margin-left: 0;
        transition-duration: 0.2s;
        -webkit-transition-duration: 0.2s;
        transition-timing-function: ease-in-out;
        transition-property: "margin-left";
    }
    .page-body .page-content-wrapper .viewport-header .breadcrumb {
        background: transparent;
        padding-left: 0;
    }
    .page-body .page-content-wrapper footer {
        position: relative;
    }
    .page-body.sidebar-collpased .sidebar {
        margin-left: 0;
        min-width: 15rem;
        transition-timing-function: ease-in-out;
        transition-property: "margin-left";
        transition-duration: 0.8s;
        -webkit-transition-duration: 0.8s;
    }
}

@media (max-width: 767.98px) {
    .page-body .page-content-wrapper {
        padding: 80px 20px 0px 20px;
    }
}

.u-shape {
    position: absolute;
}

.u-shape--centered {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.u-shape--center-right {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    right: 0;
}

.u-shape--center-left {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    left: 0;
}

.u-shape--top-right {
    top: 0;
    right: 0;
}

.u-shape--bottom-left {
    bottom: 0;
    left: 0;
}

.u-shape--position-1 {
    margin-top: 5vh;
    margin-right: 6vw;
}

.u-shape--position-2 {
    margin-top: -8.13rem;
    margin-left: -19.06rem;
}

.u-shape--position-3 {
    margin-top: 7.5rem;
    margin-left: 19.06rem;
}

.u-shape--position-4 {
    margin-bottom: 5vh;
    margin-left: 6vw;
}

.u-shape--position-5 {
    margin-top: 11vh;
    margin-right: 8vw;
}

.u-shape--position-6 {
    margin-top: -11.88rem;
    margin-left: 2.5vw;
}

.u-shape--position-7 {
    margin-top: 11.25rem;
    margin-right: 5vw;
}

.u-shape--position-8 {
    margin-bottom: 11vh;
    margin-left: 5vw;
}

@media (min-width: 768px) {
    .u-shape--position-1 {
        margin-top: 11vh;
        margin-right: 12vw;
    }
    .u-shape--position-2 {
        margin-top: -8.13rem;
        margin-left: -19.06rem;
    }
    .u-shape--position-3 {
        margin-top: 7.5rem;
        margin-left: 19.06rem;
    }
    .u-shape--position-4 {
        margin-bottom: 11vh;
        margin-left: 13.5vw;
    }
}

.container-fluid {
    height: 100% !important;
}

.center-element {
    margin: auto;
    height: 100% !important;
}

.center-element-sides {
    margin: auto !important;
    width: 60%;
}

.h-100vh {
    height: 100vh !important;
}

.h-100p {
    height: 100% !important;
}

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

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

.table-clear {
    background: transparent !important;
    border: transparent !important;
}

.table-clear th,
.table-dark td,
.table-dark thead th {
    border-color: transparent !important;
}

.table-clear th,
.table-dark td,
.table-dark thead th,
.table-dark tbody+tbody {
    border-color: transparent !important;
}

.table-clear thead tr th,
.table-clear tfoot tr th {
    background: transparent !important;
    color: #ffffff !important;
}

.table-clear thead,
.table-clear tfoot {
    background: transparent !important;
}

.table-clear th,
.table-clear td {
    padding: 10px 15px;
    vertical-align: top !important;
    border-top: none !important;
}

.table-clear tbody tr td {
    color: #ffffff !important;
}


/*# sourceMappingURL=style.css.map */


/* Application Shadows */

.card {
    /* box-shadow: 0 0 2px 0 rgba(100, 100, 100, 0.26); */
    border-radius: 20px !important;
}

.grid {
    /* box-shadow: 0 0 1.5px 0 rgba(100, 100, 100, 0.26) !important; */
    /* box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px !important; */
    /* border-radius: 20px !important; */
    /* border: 1px solid rgb(230, 230, 230) !important; */
    box-shadow: 0 0 0 1px rgb(0 0 0 / 2%), 0 0 0.5rem 0 rgb(0 0 0 / 1%), 0.25rem 0.5rem 1rem 0 rgb(0 48 111 / 8%);
    border-radius: 16px !important;
}

.grid-card {
    /* box-shadow: 0 0 1px 0 rgba(100, 100, 100, 0.26); */
    /* box-shadow: 0px 0px .5px -.2px #202146; */
    border: 1px solid rgb(230, 230, 230) !important;
    border-radius: 16px !important;
    padding: 24px !important;
}

.grid .item-wrapper .table-responsive {
    padding: 24px !important;
}

.app-card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 2%), 0 0 0.5rem 0 rgb(0 0 0 / 1%), 0.25rem 0.5rem 1rem 0 rgb(0 48 111 / 8%) !important;
    /* box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px !important; */
    background: #fff;
    border-radius: 16px;
    margin: 8px !important;
    border: 1px solid rgba(238, 238, 238, 0);
}

.app-card-header {
    display: inline-block;
    font-weight: 600;
    align-content: center !important;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 3rem;
    line-height: 1.5;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
}

.app-card-header p {
    font-weight: 500 !important;
    font-size: 1.15rem !important;
}

.app-card-body {}

.width-cut-5 {
    margin: auto !important;
    width: 50% !important;
}

.width-cut-7 {
    margin: auto !important;
    width: 70% !important;
}

.width-cut-8 {
    margin: auto !important;
    width: 80% !important;
}

.width-cut-9 {
    margin: auto !important;
    width: 90% !important;
}

.width-cut-0 {
    margin: auto !important;
    width: 100% !important;
}


/* Add styles */

.app-bg-gradient-primary {
    background: #ff9500 !important;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #ff9500, #FC7811) !important;
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #ff9500, #FC7811) !important;
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.app-bg-gradient-secondary {
    background: #283048;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #859398, #283048);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #859398, #283048);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.app-bg-gradient-blue {
    background: #1488CC;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #2B32B2, #1488CC);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #2B32B2, #1488CC);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.app-bg-gradient-purple {
    background: #8E2DE2;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #4A00E0, #8E2DE2);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #4A00E0, #8E2DE2);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.app-bg-gradient-mango {
    background: #f12711;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #f5af19, #f12711);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #f5af19, #f12711);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.app-table-header-bg {
    background: #fbfcfd !important;
    border-top: 1px solid #f2f4f9;
    border-bottom: 1px solid #f2f4f9;
}

.clear-margin {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.__card-label-subtitle {
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1.444 !important;
    letter-spacing: .026em !important;
    font-size: 24px;
    /* color: #737373; */
}

.panel-padding {
    padding: 20px;
}

.panel-padding-x2 {
    padding: 40px;
}

.panel-padding-x3 {
    padding: 60px;
}

.panel-padding-side {
    padding-left: 20px;
    padding-right: 20px;
}

.panel-padding-side-regular {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

.panel-full-height {
    height: 100% !important;
}

.detail-content-panel {
    background: #fbfcfd;
    border-left: 1px solid #f2f4f9;
}


/** FORM **/

.select-form-control-body {
    color: rgb(26, 26, 26);
    display: block;
    position: relative;
}

select:not(:active)~.select-form-control-body-caret-up {
    display: none;
}

.select-form-control-body-caret-up {
    color: rgb(102, 102, 102);
    display: block;
    z-index: 21;
    pointer-events: none;
    position: absolute;
    height: 48px;
    width: 48px;
    top: 0px;
    right: 0px;
    padding: 16px;
}

.select-form-control-body-caret-down {
    color: rgb(102, 102, 102);
    display: block;
    z-index: 21;
    pointer-events: none;
    position: absolute;
    height: 48px;
    width: 48px;
    top: 0px;
    right: 0px;
    padding: 16px;
}

.form-control {
    font-size: 16px !important;
    line-height: 24px !important;
    -webkit-appearance: none !important;
    background-color: #FFF !important;
    border: none !important;
    outline: 0 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    -webkit-transition: box-shadow 120ms ease-in-out, padding 120ms ease-in-out !important;
    transition: box-shadow 120ms ease-in-out, padding 120ms ease-in-out !important;
    width: 100% !important;
    margin: 0 !important;
    box-shadow: 0 0 0 1px #999 !important;
}

.form-control-error {
    font-size: 16px !important;
    line-height: 24px !important;
    appearance: none !important;
    background-color: rgb(255, 255, 255) !important;
    border: none !important;
    outline: 0px !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    transition: box-shadow 120ms ease-in-out 0s, padding 120ms ease-in-out 0s !important;
    width: 100% !important;
    margin: 0px !important;
    box-shadow: rgb(210, 63, 71) 0px 0px 0px 1px !important;
}

.form-control-error-desc {
    font-size: 14px !important;
    line-height: 20px !important;
    display: block !important;
    margin-top: 4px !important;
    transition: color 120ms ease-in-out 0s !important;
    color: rgb(210, 63, 71) !important;
}

.form-control-error-desc-thumb {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: text-top;
    margin-right: 4px;
    color: rgb(210, 63, 71);
}

.form-control:focus {
    box-shadow: 0 0 0 2px #ff9500 !important;
}

.form-control::placeholder {
    color: #999 !important;
    -webkit-transition: color 120ms ease-in-out !important;
    transition: color 120ms ease-in-out !important;
}

.form-control::-webkit-input-placeholder {
    color: #999 !important;
    -webkit-transition: color 120ms ease-in-out !important;
    transition: color 120ms ease-in-out !important;
}

.form-control {
    background-color: #fff !important;
    background-clip: padding-box;
    border-radius: 6px !important;
    border: 0px solid rgba(238, 238, 238, 0) !important;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px !important;
}

.form-control-button {
    /* font-size: 16px; */
    line-height: 24px;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: auto;
    height: auto;
    margin: 0;
    cursor: pointer;
    text-align: center;
    -webkit-text-decoration: none;
    text-decoration: none;
    /* font-weight: 700; */
    border-width: 1px;
    border-style: solid;
    border-radius: 999999px;
    -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
    transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
    background-color: #ff9500;
    background: #ff9500 !important;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #ff9500, #FC7811) !important;
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #ff9500, #FC7811) !important;
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-color: #ff9500;
    color: #FFF;
    padding: calc(12px - 1px) calc(24px - 1px);
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-top: 16px;
}

.form-control-button-v2 {
    /* font-size: 16px; */
    line-height: 24px;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: auto;
    height: auto;
    margin: 0;
    margin-right: 5px !important;
    margin-left: 5px !important;
    cursor: pointer;
    text-align: center;
    -webkit-text-decoration: none;
    text-decoration: none;
    /* font-weight: 700; */
    border-width: 1px;
    border-style: solid;
    border-radius: 999999px;
    -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
    transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
    background-color: #ff9500;
    background: #ff9500 !important;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #ff9500, #FC7811) !important;
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #ff9500, #FC7811) !important;
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-color: #ff9500;
    color: #FFF;
    padding: calc(12px - 1px) calc(24px - 1px);
    overflow: hidden;
    margin: auto;
}

.btn-default {
    font-size: 16px !important;
    line-height: 24px;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: auto;
    height: auto;
    margin: 0;
    cursor: pointer;
    text-align: center;
    -webkit-text-decoration: none;
    text-decoration: none;
    font-weight: 700;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 999999px !important;
    -webkit-transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
    transition: opacity 120ms ease-in-out, color 120ms ease-in-out, background-color 120ms ease-in-out, border-color 120ms ease-in-out;
    background-color: #ff9500;
    border-color: #ff9500;
    color: #FFF;
    padding: calc(12px - 1px) calc(24px - 1px);
    overflow: hidden;
    margin: auto;
}

.btn-default-w100 {
    width: 100% !important;
}

.btn-delete {
    font-size: 16px !important;
    line-height: 24px;
    display: inline-flex;
    -webkit-box-pack: center;
    justify-content: center;
    width: auto;
    height: auto;
    margin: 0px 16px 0px 0px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 999999px !important;
    transition: opacity 120ms ease-in-out 0s, color 120ms ease-in-out 0s, background-color 120ms ease-in-out 0s, border-color 120ms ease-in-out 0s;
    background-color: rgb(255, 255, 255);
    border-color: rgb(210, 63, 71);
    color: rgb(210, 63, 71);
    padding: calc(11px) calc(23px);
    position: relative;
    overflow: hidden;
}

.btn-delete-w100 {
    width: 100% !important;
}


/** IPHONE TOGGLE SWITCH **/

.toggle-body {
    display: flex;
    align-items: flex-start;
}

.toggle-label {
    display: block;
    margin-left: 12px;
    cursor: pointer;
}

.toggle-label-desc {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

.switch-body {
    margin: 0px 0px 16px;
    padding: 0px;
    border: 0px;
    outline: 0px;
    appearance: none;
    flex: 0 0 40px;
    border-radius: 24px;
    position: relative;
    transition: background-color 200ms ease-in-out 0s;
    height: 24px;
    width: 40px;
    overflow: visible;
    cursor: pointer;
    background-color: rgb(48, 99, 233);
}

.switch-body-inactive {
    margin: 0px 0px 16px;
    padding: 0px;
    border: 0px;
    outline: 0px;
    appearance: none;
    flex: 0 0 40px;
    background-color: rgb(204, 204, 204);
    border-radius: 24px;
    position: relative;
    transition: background-color 200ms ease-in-out 0s;
    height: 24px;
    width: 40px;
    overflow: visible;
    cursor: pointer;
}

.switch-knob {
    display: block;
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: 50%;
    transition: box-shadow 200ms ease-in-out 0s, transform 200ms ease-in-out 0s;
    height: 16px;
    width: 16px;
    border-radius: 16px;
    box-shadow: rgb(35 75 195) 0px 2px 0px 0px;
    transform: translate3d(calc(20px), -50%, 0px);
}

.switch-knob-inactive {
    display: block;
    background-color: rgb(255, 255, 255);
    box-shadow: rgb(153 153 153) 0px 2px 0px 0px;
    position: absolute;
    top: 50%;
    transform: translate3d(4px, -50%, 0px);
    transition: box-shadow 200ms ease-in-out 0s, transform 200ms ease-in-out 0s;
    height: 16px;
    width: 16px;
    border-radius: 16px;
}

.switch-body-alt-desc {
    border: 0px;
    clip: rect(0px, 0px, 0px, 0px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0px;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}


/* Insert an invisible element that covers the checkbox */

.disabled {
    position: relative;
}

.disabled::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.fixed-header {
    position: -webkit-sticky;
    /* Safari */
    position: sticky !important;
    top: 0 !important;
    left: 0px !important;
    right: 0px !important;
    -webkit-transform: translateZ(0);
    transform: translate(0);
    width: 100% !important;
    z-index: 100;
    padding: 15px 20px;
    /* margin-bottom: 15px; */
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.03rem;
    background: #fff !important;
    border-bottom: 1px solid #f2f4f9;
}

.fixed-content {
    padding-top: 10px !important;
    padding-bottom: 90px !important;
    overflow: auto !important;
}

.fixed-footer {
    position: fixed;
    bottom: 0;
    width: 60%;
    z-index: 100;
    padding: 15px 20px;
    margin-top: 15px;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.03rem;
    background: #fff !important;
    border-top: 1px solid #f2f4f9;
}

.panel-border-left {
    border-left: #00112C !important;
    border-left-width: 3px !important;
}

.panel-border-right {
    border-right: #00112C !important;
    border-right-width: 3px !important;
}

.popup-header {
    padding: 15px 20px;
    margin-bottom: 15px;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.03rem;
    background: #fff !important;
    border-bottom: 1px solid #f2f4f9;
}

.popup-content {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.popup-footer {
    padding: 15px 20px;
    margin-top: 15px;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.03rem;
    background: #fff !important;
    border-top: 1px solid #f2f4f9;
}

.form-control {
    height: 48px !important;
}

.tint {
    /* -webkit-filter: brightness(0) contrast(0) grayscale(100%) invert(1) drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.5));
  filter: brightness(0) contrast(0) grayscale(100%) invert(1) drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.5)); */
}

.tint:hover:before {
    background: none;
}

.panel-bg {
    background-color: #00112C;
}

.animated-panel-bg {
    background: linear-gradient(-45deg, #ff9500, #025fe2, #0069fc, #175dbe);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    height: 100vh;
}

.animated-panel-bg-alt {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 6s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


/* Custom Radius */

.rad-5 {
    border-radius: 5px !important;
}

.rad-10 {
    border-radius: 10px !important;
}

.rad-15 {
    border-radius: 15px !important;
}

.rad-20 {
    border-radius: 20px !important;
}

.rad-25 {
    border-radius: 25px !important;
}

.rad-30 {
    border-radius: 30px !important;
}

.rad-35 {
    border-radius: 35px !important;
}

.rad-40 {
    border-radius: 40px !important;
}


/* Custome BG */

.bg-brand {
    background-color: #1f202e;
}

.bg-amber {
    background: #fabfad;
}

.bg-warm {
    background: #e998b7;
}

.bg-cloud {
    background: #a5e7ff;
}

.bg-lemon {
    background: #b6ffee;
}

.bg-blue {
    background: #ff9500;
}

.bg-danger {
    color: #ffffff !important;
    background: rgb(210, 63, 71) !important;
}

.bg-profile-panel {
    background-image: linear-gradient(176deg, #3D9DEA, #4A4EEE) !important;
    transition: 0.4s ease-out;
    box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px !important;
}


/* STATUS INDICATOR */

span {
    display: flex;
    align-items: center;
}

.status-indicator {
    display: inline-block;
    width: 12px;
    min-width: 12px;
    height: 12px;
    border-radius: 4px;
    margin-right: 5px;
}

.status-indicator.small {
    width: 7px;
    min-width: 7px;
    height: 7px;
}

.status-indicator.rounded-indicator {
    border-radius: 50px;
}

.loader_container {
    width: 100% !important;
    height: 100% !important;
    /* display: inline-flex; */
    justify-content: center;
    align-items: center;
    margin: auto !important;
    display: flex;
    align-content: center;
}

.loader.loader_2 {
    display: flex;
    align-items: stretch;
    min-height: 400px !important;
    /* background: #fff; */
}

.loader_page.loader_2 {
    display: flex;
    align-items: stretch;
    height: 100vh;
    /* background: #fff; */
}

.spinner-border-lg {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    vertical-align: text-bottom;
    border: 0.15em solid currentColor;
    border-right-color: #ff950036;
    border-bottom-color: #ff95007e;
    border-left-color: #ff9500b7;
    border-top-color: #ff9500ff;
    border-radius: 50%;
}

.loader-text {
    color: #ff9500ff !important;
    display: block !important;
}


/* FA Icon */


/* Rules for sizing the icon. */

.fa.fa-18 {
    font-size: 18px;
}

.fa.fa-24 {
    font-size: 24px;
}

.fa.fa-36 {
    font-size: 36px;
}

.fa.fa-48 {
    font-size: 48px;
}


/* Rules for using icons as black on a light background. */

.fa.fa-dark {
    color: #1f202e;
}

.fa.fa-dark.md-inactive {
    color: rgba(0, 0, 0, 0.26);
}


/* Rules for using icons as white on a dark background. */

.fa.fa-light {
    color: rgba(255, 255, 255, 1);
}

.fa.fa-light.fa-inactive {
    color: rgba(255, 255, 255, 0.3);
}


/* APEX CHART */

.apexcharts-tooltip {
    background: #ff9500 !important;
    color: #ffffff !important;
}


/*============ APP LINK =============*/

.app-link {
    color: #ff9500 !important;
    text-decoration: none !important;
    background-color: transparent;
}

.app-link:hover {
    color: var(--core-blue-30-light-mode-color) !important;
    text-decoration: underline;
    cursor: pointer !important;
}

.app-link:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
}

.app-link:not([href]):not([tabindex]):hover,
.app-link:not([href]):not([tabindex]):focus {
    color: inherit;
    text-decoration: none;
}

.app-link:not([href]):not([tabindex]):focus {
    outline: 0;
}

.app-link-alt {
    color: var(--core-blue-30-light-mode-color) !important;
    text-decoration: none !important;
    background-color: transparent;
}

.app-link-alt:hover {
    color: var(--first-color-nav-hover) !important;
    text-decoration: underline;
    cursor: pointer !important;
}

.app-link-alt:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
}

.app-link-alt:not([href]):not([tabindex]):hover,
.app-link-alt:not([href]):not([tabindex]):focus {
    color: inherit;
    text-decoration: none;
}

.app-link-alt:not([href]):not([tabindex]):focus {
    outline: 0;
}


/* Style tab links */

.app-tab-panel {
    text-align: center !important;
    /* border-bottom-color:  #00112C; */
    /* border: 1px solid #ccc; */
    width: 100%;
    height: 100%;
}


/* Style the buttons that are used to open the tab content */

.app-tab-panel div {
    display: block;
    background-color: inherit;
    /* color: #525c5d; */
    padding: 22px 16px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 6px;
    border-top: 0px solid #fff;
}

.app-tab-panel div {
    position: relative;
    display: block;
    padding: 13px 0 13px 24px;
    font-size: 13px;
    font-weight: 500;
    color: #525c5d;
    cursor: pointer;
    line-height: 22px;
}

.app-tab-panel div:first-child {
    border-top: 0px solid #fff;
}

.tablink {
    /* color: #525c5d; */
    cursor: pointer;
    padding: 14px 16px;
    width: 25%;
}


/* Style the tab content (and add height:100% for full page content) */

.tabcontent {
    padding: 12px;
    width: 100%;
    border-left: none;
}

.tabcontent.clear-top-padding {
    padding-top: 0px !important;
}

.app-tab-panel .tab-active {
    padding-left: 30px !important;
    font-size: 13px;
    font-weight: 500;
    color: #ff9500 !important;
    background-color: #fff;
    border-radius: 6px;
}

.tablink {
    margin-top: 5px;
    margin-bottom: 5px;
}

.tablink:hover {
    padding-left: 30px !important;
    color: #ff9500 !important;
    background-color: #fff;
    border-radius: 6px;
}

.tablink:hover {
    position: relative;
}

.tablink:hover .tab-title:after {
    content: "";
    height: 7px;
    width: 7px;
    border-radius: 25px;
    position: absolute;
    right: calc(30px + 4px);
    top: 14px;
}

.animated-pan {
    transition: 3.0s;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    animation: blinker 2.5s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0.3;
    }
}


/* Align Vertical */

.center-items {
    display: flex;
    margin: auto;
    align-items: center;
}

.center-items-alt {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.center-items-v2 {
    display: flex;
    /* margin: auto; */
    align-items: center;
}

.v-middle {
    vertical-align: middle;
}

.vh-middle {
    display: flex;
    margin: auto;
    align-items: center;
    justify-content: center;
}

.center {
    height: 100% !important;
    width: 100% !important;
    margin: auto !important;
    align-items: center;
    justify-content: center;
    text-align: center !important;
}


/* Title Margin */

.tm-1 {
    margin-left: 10px;
    margin-right: 5px;
}

.tm-2 {
    margin-left: 20px;
    margin-right: 5px;
}

.tm-3 {
    margin-left: 30px;
    margin-right: 5px;
}

.tm-4 {
    margin-left: 40px;
    margin-right: 5px;
}

.tm-5 {
    margin-left: 50px;
    margin-right: 5px;
}


/* Font weight */

.fw-1 {
    font-weight: 100;
}

.fw-2 {
    font-weight: 200;
}

.fw-3 {
    font-weight: 300;
}

.fw-4 {
    font-weight: 400;
}

.fw-5 {
    font-weight: 500;
}


/* hide view on mobile */

@media screen and (max-width: 768px) {
    .mobile-exluded {
        visibility: hidden;
        clear: both;
        float: left;
        display: none;
    }
}

@media screen and (max-width: 820px) {
    .mobile-exluded {
        visibility: hidden;
        display: none;
    }
}


/* Tables */

.mat-cell,
.mat-header-cell {
    padding-left: 12px !important;
    padding-right: 12px !important;
}


/*========== GOOGLE FONTS ==========*/

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

/*========== VARIABLES CSS ==========*/

:root {
    --header-height: 3.5rem;
    --nav-width: 259px;
    /*========== Colors ==========*/
    --first-color: #ff9500;
    --first-color-light: rgb(240, 246, 255);
    --title-color: #19181B;
    --text-color: #58555E;
    /* --text-color-light: #A5A1AA; */
    --text-color-light: #11253D;
    /* --body-color: #F9F6FD; */
    --body-color: #ececec;
    --container-color: #FFFFFF;
    /*========== Font and typography ==========*/
    /* --body-font: 'Poppins', sans-serif; */
    --body-font: SF Pro Display, inter, sans-serif;
    --normal-font-size: .938rem;
    --small-font-size: .75rem;
    --smaller-font-size: .75rem;
    /*========== Font weight ==========*/
    --font-medium: 500;
    --font-semi-bold: 600;
    /*========== z index ==========*/
    --z-fixed: 100;
    /*========== Nav ===========*/
    --text-color-light-nav: #FFFFFF;
    --text-color-nav: #1f202e;
    --first-color-nav: #FFFFFF;
    --first-color-nav-hover: #ff9500;
}

@media screen and (min-width: 1024px) {
     :root {
        --normal-font-size: 1rem;
        --small-font-size: .875rem;
        --smaller-font-size: .813rem;
    }
}


/*========== BASE ==========*/

*,
 ::before,
 ::after {
    box-sizing: border-box;
}

body {
    margin: var(--header-height) 0 0 0;
    /* padding: 1rem 1rem 0; */
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    /* background-color: var(--body-color); */
    color: var(--text-color);
}

h3 {
    margin: 0;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}


/*========== HEADER ==========*/

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--container-color);
    box-shadow: 0 1px 0 rgba(22, 8, 43, 0.1);
    padding: 0 1rem;
    z-index: var(--z-fixed);
}

.header__container {
    display: flex;
    align-items: center;
    height: var(--header-height);
    justify-content: space-between;
}

.header__img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.header__logo {
    color: var(--title-color);
    font-weight: var(--font-medium);
    display: none;
}

.header__search {
    display: flex;
    padding: .40rem .75rem;
    background-color: var(--first-color-light);
    border-radius: .25rem;
}

.header__input {
    width: 100%;
    border: none;
    outline: none;
    background-color: var(--first-color-light);
}

.header__input::placeholder {
    font-family: var(--body-font);
    color: var(--text-color);
}

.header__icon,
.header__toggle {
    font-size: 1.2rem;
}

.header__toggle {
    color: var(--title-color);
    cursor: pointer;
}


/*========== NAV ==========*/

.nav {
    position: fixed;
    top: 0;
    left: -100%;
    height: 100vh;
    padding: 1rem 1rem 0;
    background-color: var(--container-color);
    /* background-color: #ff9500; */
    /* https://cssgradient.io - generate gradient online */
    /* background: rgb(16, 1, 212);
    background: -moz-linear-gradient(152deg, #ff9500 0%, #FA9123 100%);
    background: -webkit-linear-gradient(152deg, #ff9500 0%, #FA9123 100%);
    background: linear-gradient(152deg, #ff9500 0%, #FA9123 100%); */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#ff9500", endColorstr="#5e01d4", GradientType=1);
    box-shadow: 1px 0 0 rgba(22, 8, 43, 0.1);
    z-index: var(--z-fixed);
    transition: .4s;
}

.nav__container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 1rem;
    overflow: auto;
    scrollbar-width: none;
    /* For mozilla */
}


/* For Google Chrome and others */

.nav__container::-webkit-scrollbar {
    display: none;
}

.nav__logo {
    font-weight: var(--font-semi-bold);
    /* margin-bottom: 2.5rem; */
}

.nav__list,
.nav__items {
    display: grid;
}

.nav__list {
    row-gap: 2.5rem;
}

.nav__items {
    row-gap: 1.5rem;
}

.nav__subtitle {
    /* font-size: var(--normal-font-size); */
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: .1rem;
    color: var(--text-color-light);
    margin: 0px 0px 0px !important;
}

.nav__link {
    display: flex;
    align-items: center;
    color: var(--text-color-nav);
}

.nav__link:hover {
    color: var(--first-color-nav-hover);
}

.nav__icon {
    font-size: 1.2rem;
    margin-right: .5rem;
}

.nav__icon_header {
    border-radius: 50% !important;
    background-color: white;
    padding: 0.1rem !important;
}

.nav__name {
    font-size: var(--smaller-font-size);
    /* font-size: var(--normal-font-size); */
    font-weight: var(--font-medium);
    white-space: nowrap;
}

.nav__logout {
    margin-top: 1rem;
}

.nav-panel {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.nav-fixed-header {
    height: calc(var(--header-height) - 0.5rem);
    -webkit-transform: translateZ(0);
    transform: translate(0);
    z-index: 100;
    border-bottom: 1px solid #f2f4f9;
}

.nav-fixed-content {
    flex: 1 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    margin-top: 1rem;
    margin-bottom: 1rem;
    overflow: auto !important;
}

.nav-fixed-content::-webkit-scrollbar {
    display: none;
}

.nav-fixed-footer {
    border-top: 1px solid #f2f4f9;
}


/* Dropdown */

.nav__dropdown {
    overflow: hidden;
    max-height: 21px;
    transition: .4s ease-in-out;
}

.nav__dropdown-collapse {
    background-color: var(--first-color-light);
    border-radius: .25rem;
    margin-top: 1rem;
}

.nav__dropdown-content {
    display: grid;
    row-gap: .5rem;
    padding: .75rem 2.5rem .75rem 1.8rem;
}

.nav__dropdown-item {
    /* font-size: var(--smaller-font-size); */
    font-size: var(--normal-font-size);
    font-weight: var(--font-medium);
    color: var(--text-color);
}

.nav__dropdown-item:hover {
    color: var(--first-color);
}

.nav__dropdown-icon {
    margin-left: auto;
    transition: .4s;
}


/* Show dropdown collapse */

.nav__dropdown:hover {
    max-height: 100rem;
}


/* Rotate icon arrow */

.nav__dropdown:hover .nav__dropdown-icon {
    transform: rotate(180deg);
}


/*===== Show menu =====*/

.show-menu {
    left: 0;
}


/*===== Active link =====*/

.active {
    /* color: var(--first-color); */
    color: var(--first-color-nav-hover);
}


/* ========== MEDIA QUERIES ==========*/


/* For small devices reduce search*/

@media screen and (max-width: 320px) {
    .header__search {
        width: 70%;
    }
}

@media screen and (min-width: 768px) {
    body {
        /* padding: 1rem 3rem 0 6rem; */
    }
    .header {
        padding: 0 3rem 0 6rem;
    }
    .header__container {
        height: calc(var(--header-height) + .5rem);
    }
    .header__search {
        width: 300px;
        padding: .55rem .75rem;
    }
    .header__toggle {
        display: none;
    }
    .header__logo {
        display: block;
    }
    .header__img {
        width: 40px;
        height: 40px;
        order: 1;
    }
    .nav {
        left: 0;
        padding: 1.2rem 1.5rem 0;
        width: 68px;
        /* Reduced navbar */
    }
    .nav__items {
        row-gap: 1.7rem;
    }
    .nav__icon {
        font-size: 1.3rem;
    }
    /* Element opacity */
    .nav__logo-name,
    .nav__name,
    .nav__subtitle,
    .nav__dropdown-icon {
        opacity: 0;
        transition: .3s;
    }
    /* Navbar expanded */
    .nav:hover {
        width: var(--nav-width);
    }
    /* Visible elements */
    .nav:hover .nav__logo-name {
        opacity: 1;
    }
    .nav:hover .nav__subtitle {
        opacity: 1;
    }
    .nav:hover .nav__name {
        opacity: 1;
    }
    .nav:hover .nav__dropdown-icon {
        opacity: 1;
    }
}


/** ========== SCROLLBAR ============ */


/* width */

::-webkit-scrollbar {
    width: 4px;
}


/* Handle on hover */

 ::-webkit-scrollbar-thumb:hover {
    background: var(--first-color);
}

::-webkit-scrollbar-thumb:end {
    background: var(--first-color);
}

.default-link-pointer {
    cursor: pointer !important;
}


/** ========== BARCODE ============ */

.barcode svg {
    width: 100% !important;
}


/* =========== TABLE ============= */

.table th,
.table td {
    padding: 10px 15px;
    vertical-align: top;
    border-top: 0px solid #f2f4f9 !important;
}

.mat-paginator-container {
    display: flex;
    align-items: center;
    justify-content: center !important;
    padding: 0 8px;
    flex-wrap: wrap-reverse;
    width: 100%;
}


/* ========== TAB ============== */

.mat-tab-link {
    height: 48px;
    padding: 0 24px;
    cursor: pointer;
    box-sizing: border-box;
    opacity: 1 !important;
    min-width: inherit !important;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    vertical-align: top;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.mat-tab-group.mat-primary .mat-ink-bar,
.mat-tab-nav-bar.mat-primary .mat-ink-bar {
    background-color: #ff9500 !important;
}


/* ========== NO DATA FOUND ============ */

.empty-state {
    width: 750px;
    margin: 40px auto;
    background: #ffffff;
    /* box-shadow: 1px 2px 10px #e1e3ec; */
    border-radius: 4px;
}

.empty-state__content {
    padding: 48px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.empty-state__content .empty-state__icon {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    border-radius: 200px;
    justify-content: center;
    /* background-color: #f7fafc;
    box-shadow: 0px 2px 1px #e1e3ec; */
}

.empty-state__content .empty-state__icon img {
    width: 170px;
}

.empty-state__content .empty-state__message {
    color: #ff9500;
    font-size: 1.5rem;
    font-weight: 500;
    margin-top: 0.85rem;
}

.empty-state__content .empty-state__help {
    color: #a2a5b9;
    font-size: 0.875rem;
}


/* ========= PAGE ========== */

@media screen and (max-width: 767.98px) {
    .page-body .page-content-wrapper {
        padding: 80px 30px 20px 20px !important;
    }
}

@media screen and (min-width: 768px) {
    .page-body {
        padding: 1rem 3rem 0 6rem !important;
    }
}

.page-body {
    /* background-color: var(--body-color) !important; */
    /* background-color: var(--first-color-light) !important; */
    background: var(--v-lightNeutral-base) !important;
}

.page-content-wrapper {
    /* background: #fff; */
    overflow: hidden;
}

.white-bg {
    background-color: #ffffff;
}

.black-bg {
    background-color: #00112C;
}

.blue-bg {
    background-color: #ff9500;
}

.white-text-color {
    color: #ffffff !important;
}

.black-text-color {
    color: #000000 !important;
}

.blue-text-color {
    color: #ff9500 !important;
}

.floating-element-drop-shadow {
    box-shadow: 0 0 0 1px rgb(0 0 0 / 2%), 0 0 0.5rem 0 rgb(0 0 0 / 1%), 0.25rem 0.5rem 1rem 0 rgb(0 48 111 / 8%);
}

.floating__input {
    width: 100%;
    height: 3.5rem;
    padding: 0.2rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 2%), 0 0 0.5rem 0 rgb(0 0 0 / 1%), 0.25rem 0.5rem 1rem 0 rgb(0 48 111 / 8%);
    /* font-size: 1rem; */
    color: #070f2b;
    /* font-family: Roboto Mono, monospace; */
    background-color: #fff;
}

.subsidian-search .search__input {
    width: 100%;
    height: 3.5rem;
    padding: 0.2rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 2%), 0 0 0.5rem 0 rgb(0 0 0 / 1%), 0.25rem 0.5rem 1rem 0 rgb(0 48 111 / 8%);
    /* font-size: 1rem; */
    color: #070f2b;
    /* font-family: Roboto Mono, monospace; */
    background-color: #fff;
}

.subsidian-search .btn {
    position: absolute;
    right: 0;
    height: 3.5rem;
    min-width: 3.5rem;
    line-height: 2.5rem;
    background-color: #ff9500;
    z-index: 1;
    border-radius: 0 0.5rem 0.5rem 0;
}

.subsidian-search .btn .icon:before {
    content: "";
    position: absolute;
    top: 1rem;
    right: 2px;
    left: 0;
    margin: 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 10rem;
    border: 1px solid #fff;
}

.subsidian-search .btn .icon:after {
    content: "";
    position: absolute;
    top: 2rem;
    right: 1.125rem;
    width: 1px;
    height: 0.625rem;
    transform: rotate(-45deg);
    background-color: #fff;
}

.reset-margin-top {
    margin-top: 0px !important;
}

.badge {
    display: inline-block;
    padding: 0.35rem 1rem !important;
    font-size: 80% !important;
    font-weight: 300 !important;
    line-height: 1;
    cursor: pointer;
}

.mat-basic-chip,
.mat-failed-chip,
.mat-primary-chip {
    display: inline-block !important;
    transition: box-shadow .28s cubic-bezier(.4, 0, .2, 1);
    padding: 0.20rem 1rem !important;
    border-radius: 50px;
    align-items: center;
    cursor: pointer;
    min-height: 25px !important;
    height: 25px !important;
    line-height: inherit;
    text-align: center;
}


/* MOUSE CURSOR */

.cursor-poniter {
    cursor: pointer !important;
}

.alias {
    cursor: alias;
}

.all-scroll {
    cursor: all-scroll;
}

.auto {
    cursor: auto;
}

.cell {
    cursor: cell;
}

.col-resize {
    cursor: col-resize;
}

.context-menu {
    cursor: context-menu;
}

.copy {
    cursor: copy;
}

.crosshair {
    cursor: crosshair;
}

.default {
    cursor: default;
}

.e-resize {
    cursor: e-resize;
}

.ew-resize {
    cursor: ew-resize;
}

.grab {
    cursor: grab;
}

.grabbing {
    cursor: grabbing;
}

.help {
    cursor: help;
}

.move {
    cursor: move;
}

.n-resize {
    cursor: n-resize;
}

.ne-resize {
    cursor: ne-resize;
}

.nesw-resize {
    cursor: nesw-resize;
}

.ns-resize {
    cursor: ns-resize;
}

.nw-resize {
    cursor: nw-resize;
}

.nwse-resize {
    cursor: nwse-resize;
}

.no-drop {
    cursor: no-drop;
}

.none {
    cursor: none;
}

.not-allowed {
    cursor: not-allowed;
}

.pointer {
    cursor: pointer;
}

.progress {
    cursor: progress;
}

.row-resize {
    cursor: row-resize;
}

.s-resize {
    cursor: s-resize;
}

.se-resize {
    cursor: se-resize;
}

.sw-resize {
    cursor: sw-resize;
}

.text {
    cursor: text;
}

.url {
    cursor: url(myBall.cur), auto;
}

.w-resize {
    cursor: w-resize;
}

.wait {
    cursor: wait;
}

.zoom-in {
    cursor: zoom-in;
}

.zoom-out {
    cursor: zoom-out;
}


/* APP GRADIENT */

.app-gradient-bg {
    background: linear-gradient(152deg, #ff9500 0%, #FA9123 100%);
}


/* E-JOURNAL/E-RECEIPT */

td.description,
th.description {
    width: 100% !important;
}

td.quantity,
th.quantity {
    width: 100% !important;
    word-break: break-all;
}

td.price,
th.price {
    width: 100% !important;
    word-break: break-all;
}

.centered {
    text-align: center;
    align-content: center;
}

.ticket {
    width: 100% !important;
}