@font-face {
    font-family: 'ppmori';
    src: url('../fonts/PPMori-Regular.woff') format('woff');
    /* Add more font formats if needed */
    /* Specify other font properties if desired, like font-weight and font-style */
    font-weight: 400;
}

@font-face {
    font-family: 'ppmori-bold';
    src: url('../fonts/PPMori-SemiBold.woff') format('woff');
    /* Add more font formats if needed */
    /* Specify other font properties if desired, like font-weight and font-style */
    font-weight: 600;
}

* {
    font-family: "ppmori", sans-serif;
    /* letter-spacing: 0.05px; */
}

:root {
    --kt-primary: #640E19 !important;
    --neutral-dark-100: #1A1A1A !important;
    --neutral-light-50: rgba(255, 255, 255, 0.50) !important;
    --neutral-light-100: rgba(255, 255, 255, 0.98) !important;
    --brand-color-100: #0627EE !important;
    --light-color: #EFEFEF !important;
}

html[data-theme='light'] {
    --background-color: var(--light-color);
    --text-color: var(--neutral-dark-100);
    --panel-color: var(--neutral-light-100);
    --background-color-invert: var(--neutral-dark-100);
    --text-color-invert: var(--neutral-light-100);
}

html[data-theme='dark'] {
    --background-color: var(--neutral-dark-100);
    --text-color: var(--neutral-light-100);
    --panel-color: var(--neutral-light-100);
    --background-color-invert: var(--neutral-light-100);
    --text-color-invert: var(--neutral-dark-100);
}

.fw-bold {
    font-family: "ppmori-bold" !important;
}

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

.bg-color-invert {
    background-color: var(--background-color-invert) !important;
}

.link-primary {
    color: var(--brand-color-100) !important;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
}

.bg-panel {
    background-color: var(--panel-color);
}

/* .header-brand {
  background-color: var(--kt-primary) !important;
} */

.header-brand .aside-minimize svg {
    color: white !important;
}

.aside {
    background: white;
    color: #162B3A;
}

.aside .aside-toolbar {
    border-top: none;
}

.aside .aside-toolbar .aside-user {
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    padding: 1rem;
}

.aside .aside-toolbar .aside-user .aside-user-info>div>div>a {
    color: #162B3A;
    font-weight: 700 !important;
}

.circle-divider {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--text-color);
    display: block;
    margin-left: 1rem;
}

#kt_aside_menu_wrapper {
    padding: 0 !important;
    height: 100% !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 2rem !important;
}

#kt_aside_menu_wrapper .menu-column .menu-item {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#kt_aside_menu_wrapper .menu-column .menu-item .menu-icon span i {
    color: #162B3A;
}

#kt_aside_menu_wrapper .menu-column .menu-item a {
    border-radius: 0 !important;
    padding-top: 1rem;
    padding-bottom: 1rem;
    /* border-bottom: 1px solid rgba(200, 200, 200, 0.396771); */
}

#kt_aside_menu_wrapper .menu-column .menu-item a.active {
    /* background: rgba(130, 24, 31, 0.1); */
    /* border-left: 0.25rem solid #640E19; */
    background-color: transparent;
    border-bottom: 0;
}

#kt_aside_menu_wrapper .menu-column .menu-item a.active .menu-title {
    color: var(--text-color);
    opacity: 1;
    font-weight: 600;
}

#kt_aside_menu_wrapper .menu-column .menu-item a .menu-title {
    /* color: #162B3A; */
    /* font-weight: 700; */
    /* font-size: 1rem; */
}

.card {
    background-color: var(--panel-color);
}

.card .card-header .card-title {
    color: var(--neutral-dark-100);
}

.card-flush .card-header .card-toolbar .nav .nav-link {
    border-radius: 100px !important;
}

.card-flush .card-header .card-toolbar .nav .nav-link[aria-selected="true"] {
    background-color: var(--kt-primary) !important;
    color: white !important;
}

.card-flush .card-header .card-toolbar .nav .nav-link[aria-selected="false"] {
    background-color: white !important;
    border: 1px solid var(--kt-primary) !important;
    color: var(--kt-primary) !important;
}



/* new style */
/* ---------------HEADER */


/* -------------ASIDE */
#kt_aside {
    background-color: var(--background-color);
    top: 0 !important;
}

#kt_aside .aside_brand {
    padding: 1.5rem 1rem;
}

#kt_aside .aside_brand span {
    font-size: 1rem;
    color: var(--text-color);
}

#kt_aside .aside_brand h4 {
    font-size: 3rem;
    font-weight: 600;
    /* color: var(--neutral-light-100); */
}

#kt_aside_menu .menu-item .menu-link .menu-title {
    color: var(--text-color);
    opacity: .5;
    font-size: 1.125rem !important;
}

/* ----------WRAPPER */
#kt_wrapper {
    background-color: var(--background-color);
}

#kt_footer {
    background-color: var(--neutral-dark-100);
}


/* COMPONENTS */
/* BUTTON CUSTOM STYLE */
.btn {
    padding: .5rem 1.5rem !important;
    font-size: 1.125rem !important;
    font-family: "ppmori", sans-serif;
    color: var(--neutral-light-100);
    border-radius: 100px !important;
}

.btn-outline {
    background-color: transparent !important;
    color: var(--brand-color-100);
    border-color: var(--brand-color-100) !important;
}

.btn-outline i {
    color: var(--brand-color-100);
    transition: .3s;
}

.btn-outline:hover {
    background-color: var(--brand-color-100) !important;
    color: var(--neutral-light-100);
}

.btn-outline:hover i {
    color: var(--neutral-light-100);
}

.btn-primary {
    background: var(--brand-color-100) !important;
    color: var(--light-color) !important;
    border: 1px solid var(--brand-color-100) !important;
    transition: opacity .3s;
}

.btn.btn-primary:hover:not(.btn-active) {
    background: var(--brand-color-100) !important;
    color: var(--light-color) !important;
    border: 1px solid var(--brand-color-100) !important;
    opacity: .8 !important;
}

.btn.btn-primary i,
.btn.btn-primary .svg-icon {
    color: var(--light-color) !important;
}

.btn-filter {
    color: var(--neutral-dark-100) !important;
}



/* INPUT CUSTOM STYLE */
.form-control {
    font-size: .875rem;
    font-family: "ppmori", sans-serif;
    /* background-color: var(--background-color-invert); */
}

.form-control:focus {
    border: 1px solid #000;
}

::-webkit-input-placeholder {
    /* Edge */
    color: #999 !important;
    font-family: "ppmori", sans-serif !important;
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #999 !important;
    font-family: "ppmori", sans-serif !important;
}

::placeholder {
    color: #999 !important;
    font-family: "ppmori", sans-serif !important;
}

/* form control with prefix */
.form-control.left-prefix {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.form-control.left-prefix input {
    color: #333;
    flex: 1;
    border: none;
}

.form-control.left-prefix input:focus {
    outline: none;
}

.form-control.left-prefix:focus-within {
    border: 1px solid #000 !important;
}

.form-control.left-prefix .input-prefix .svg-icon,
.form-control.left-prefix .input-prefix .svg-icon i {
    color: #999;
}

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

.card-header {
    margin-top: 30px !important;
    border-bottom: none !important;
}

.card {
    border-top-left-radius: 32px !important;
    border-top-right-radius: 32px !important;
}

.card-title {
    font-size: 36px !important;
}

.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
    background-color: #0627EE;
}



/* LOGIN */
.login-container {
    width: 100%;
    background-color: #fff;
}

.login-container .login-left-content {
    padding: 1.5rem 1rem;
}

.login-container .login-left-content .login-left-content-container {
    background-image: url("/anticms/img/login-bg.png");
    width: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 3rem 0 3rem 3.5rem;
}

#toastr-container {
    width: 100% !important;
}

#toastr-container > .toastr-success {
    margin-top: 25px !important;
    margin-right: 12px !important;
    float: right;
}

.toastr .toastr-success {
    float: right !important;
}

@media screen and (min-width:768px) {
    .login-container .login-left-content {
        max-width: 55% !important;
        width: 100%;
    }

    .login-container .login-left-content .login-left-content-heading h1 {
        font-size: 3.5rem;
    }

    .login-container .login-right-content {
        max-width: 45%;
        width: 100%;
    }
    .login-right-content-title {
        font-size: 3rem;
    }
}

.repeater-item {
    cursor: move;
}