:root { --primary-color: #00039c; --secondary-color: #e60b00; --text-color: #2B2A29; --sidebar: rgb(224 225 241); --primary-font: 'Karla'; }
body { font-family: var(--primary-font); font-size: 14px; line-height: 1.5; color: var(--text-color); }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(../fonts/Karla.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
.light { font-weight: 300 !important; }
.normal { font-weight: 400 !important; }
.medium { font-weight: 500 !important; }
.semi { font-weight: 600 !important; }
.bold { font-weight: 700 !important; }
.ebold { font-weight: 800 !important; }
.f-black { font-weight: 900 !important; }
.fs-10 { font-size: 10px !important; }
.fs-12 { font-size: 12px !important; }
.fs-14 { font-size: 14px !important; }
.fs-18 { font-size: 18px !important; }
.title-font { font-family: var(--title-font); }
.primary-font { font-family: var(--primary-font); }
h1, h2, h3, h4, h5, h6 { margin-top: 0; font-style: normal; font-weight: 700; text-transform: normal; }
.clear { clear: both; }
a:focus, .button:focus { text-decoration: none; outline: none; }
a.p-light { color: var(--primary-light) }
a { color: var(--primary-color); text-decoration: none; }
a:hover, a.p-light:hover { color: var(--secondary-color); }
a, button { color: var(--primary-color); outline: medium none; }
button:focus, input:focus, input:focus, textarea, textarea:focus { outline: 0; }
input:focus::-moz-placeholder { opacity: 0; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; }
.primary-color { color: var(--primary-color) !important; }
.bg-primary-color { background-color: var(--primary-color) !important; }
.border-primary-color { border-color: var(--primary-color) !important; }
.secondary-color { color: var(--secondary-color) !important; }
.bg-secondary-color { background-color: var(--secondary-color) !important; }
.border-secondary-color { border-color: var(--secondary-color) !important; }
.text-dark { color: #333 !important; }
.bg-f0 { background: #f0f0f0 !important; }
.bg-f4 { background: #f4f4f4 !important; }
.bg-f5 { background: #f5f5f5 !important; }
.bg-f8 { background: #f8f8f8 !important; }
.bg-ff { background: #FFF7F7 !important; }
.bg-none { background: none !important; }
.button { background: var(--primary-color); color: #fff; -moz-user-select: none; cursor: pointer; display: inline-block; padding: 8px 30px; border-radius: 4px; border: 2px solid var(--primary-color); text-transform: uppercase; font-weight: 600; }
.button:hover { color: #fff; background: var(--secondary-color); border-color: var(--secondary-color); }
.button1 { background: var(--secondary-color); color: #fff; border-color: var(--secondary-color); }
.button1:hover { color: #fff; background: var(--primary-color); border-color: var(--primary-color); }
.button-white { color: var(--primary-color); background: #fff; border-color: #fff; }
.button-white:hover { background: var(--secondary-color); border-color: var(--secondary-color); color: #fff; }
.button-outline { color: var(--primary-color); background: transparent; border-color: var(--primary-color); }
.button-outline:hover { color: #fff; background: var(--primary-color); border-color: var(--primary-color); }
.button-outline-white { color: #fff; background: transparent; border-color: #fff; }
.button-outline-white:hover { background: #fff; border-color: #fff; color: var(--primary-color); }
.button-dark { background: var(--secondary-color); border-color: var(--secondary-color); color: #fff; }
.button-dark:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.button-success { background: #54a226; color: #fff; border-color: #54a226 }
.button-success:hover { background: #3a880c; color: #fff; border-color: #3a880c; }
.button.focus, .button:focus { outline: 0; box-shadow: none !important; }
.button-sm { padding: .35rem 1rem; font-size: .75rem; }
.button.min-width { min-width: 160px; }
.link { color: var(--primary-color); border-bottom: 2px solid var(--primary-color);text-transform: uppercase;  font-weight: 600;  padding: 0 0 2px;  font-size: .8rem; }
.link i { color: var(--primary-color); }
.link:hover { color: var(--secondary-color); border-color: currentColor; }


/* HEALPER
-------------------------- */
.row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; margin-right: calc(-.5 * var(--bs-gutter-x)); margin-left: calc(-.5 * var(--bs-gutter-x)); }
.row > * { padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); margin-top: var(--bs-gutter-y); }
.g-0, .gx-0 { --bs-gutter-x: 0 }
.g-0, .gy-0 { --bs-gutter-y: 0 }
.g-1, .gx-1 { --bs-gutter-x: 0.25rem }
.g-1, .gy-1 { --bs-gutter-y: 0.25rem }
.g-2, .gx-2 { --bs-gutter-x: 0.5rem }
.g-2, .gy-2 { --bs-gutter-y: 0.5rem }
.g-3, .gx-3 { --bs-gutter-x: 1rem }
.g-3, .gy-3 { --bs-gutter-y: 1rem }
.g-4, .gx-4 { --bs-gutter-x: 1.5rem }
.g-4, .gy-4 { --bs-gutter-y: 1.5rem }
.g-5, .gx-5 { --bs-gutter-x: 3rem }
.g-5, .gy-5 { --bs-gutter-y: 3rem }
.bg-06 { background-color: #F6F7FB; }
.bg-05 { background-color: #EFEEFC; }
.bg-04 { background-color: #E8E5FA; }
.bg-03 { background-color: #ffffff; }
.bg-02 { background-color: #081456; }
.bg-01 { background-color: #EFEEFC; }
.login-screen { display: flex; flex-direction: column; justify-content: space-around; width: 100%; height: 100vh; }

/* LOGIN
-------------------------- */
.auth-page { max-height: 100vh; align-items: center; }
.auth-form-wrapper { display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; padding: 68px 100px; height: 100%; justify-content: center; }
.auth-page .page-wrapper { justify-content: center; }
.auth-page .form-group { position: relative; margin-bottom: 1.5rem; }
.auth-page .form-group label { position: absolute; background: #fff; margin: 0; padding: 0 10px; top: -6px; left: 8px; line-height: normal; font-weight: 600; font-size: 14px; }
.auth-page .form-group .form-control { border: 1px solid #888; height: 50px; background: #fff; padding: 0.375rem 1rem; padding-top: 15px; border-radius: 4px; }
.login-block { background: #fff; padding: 40px; border-radius: 10px; }
.login-img { width: 50%; min-height: 100vh; height: 100vh; object-fit: cover; display: block; position: fixed;  left: 0; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.form-check-input {margin-top: 0.17rem;}
.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.noble-ui-logo {
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -1px;
  color: var(--primary-color);
}
@media (max-width:1100px) {
  .auth-form-wrapper { padding: 30px; }
}

/* SIDEBAR 
----------------------- */
.sidebar .sidebar-body, .sidebar .sidebar-header { background: var(--sidebar); }
.sidebar .sidebar-header {border-color: #ccc; padding-top: 5px; padding-bottom: 5px;}
.navbar .navbar-content .navbar-nav .nav-item.nav-profile .nav-link::after { display: inline-block;}
.sidebar .sidebar-body .nav .nav-item:hover .nav-link .link-title {margin-left: 30px;}
.sidebar .sidebar-body .dropdown-toggle::after {display: none;}
.sidebar .sidebar-body .dropdown-menu {position: static !important; background: transparent; padding: 0; border:0; transform: none !important;  box-shadow: none;}
.sidebar .sidebar-body .nav.sub-menu { padding: 0 0 0px 33px;}
.sidebar .sidebar-body .nav.sub-menu .nav-item .nav-link::before {border-color: var(--primary-color);}
.sidebar .sidebar-body .nav .nav-item .nav-link {height: auto; padding: 8px 0;}

/* DASHBOARD
----------------------- */
.step-block { color: var(--text-color); background-color: #ffffff; padding: 20px;  border-radius: 4px;  display: flex; align-items: center; justify-content: space-between; border: 1px solid #dfe4ed; font-size: 16px; font-weight: 600; text-transform: uppercase;}
.step-block {color: var(--primary-color); border-color: var(--primary-color);}
.dashboard-boxes .col:nth-child(2) .step-block {color: var(--blue); border-color: var(--blue);}
.dashboard-boxes .col:nth-child(3) .step-block {color: var(--secondary-color); border-color: var(--secondary-color);}
.dashboard-boxes .col:nth-child(4) .step-block {color: var(--indigo); border-color: var(--indigo);}
.dashboard-boxes .col:nth-child(5) .step-block {color: var(--purple); border-color: var(--purple);}
.dashboard-boxes .col:nth-child(6) .step-block {color: var(--pink); border-color: var(--pink);}
.dashboard-boxes .col:nth-child(7) .step-block {color: var(--orange); border-color: var(--orange);}
.dashboard-boxes .col:nth-child(8) .step-block {color: var(--green); border-color: var(--green);}
.dashboard-boxes .col:nth-child(9) .step-block {color: var(--warning); border-color: var(--warning);}
.dashboard-boxes .col:nth-child(10) .step-block {color: var(--cyan); border-color: var(--cyan);}
.dashboard-boxes .col:nth-child(11) .step-block {color: var(--red); border-color: var(--red);}
.dashboard-boxes .col:nth-child(12) .step-block {color: var(--teal); border-color: var(--teal);}
.dashboard-boxes .col:nth-child(13) .step-block {color: var(--gray); border-color: var(--gray); color: #fff;}

.step-block .step-digit { margin-left: 20px; font-size: 42px;  width: 56px;  line-height: 55px;  text-align: center;}

/* LISTING 
--------------------- */
.main-wrapper .page-wrapper .page-content {padding: 1rem;}
.card .card-body {padding: 1rem 1rem;}
.table th, .table td { padding: 0.5rem 0.75rem;}
div.dataTables_wrapper div.dataTables_filter input {border-radius:0;border-color: #ccc;}
.table .feather, .table i { width: 18px; height: 18px; font-size: 16px;}
.card .card-title { color: var(--primary-color); margin-bottom: 1.5rem;  font-size: 28px;  font-weight: 600;  border-bottom: 2px solid #e8ebf1;  padding: 0 0 1rem;}
.page-item.active .page-link {background: var(--primary-color);border-color: var(--primary-color);}
.button-icon {width: 34px; height: 32px; display: inline-block; border: 0;  box-shadow: none;  font-size: 12px; border-radius: 4px; text-align: center;  line-height: 18px;  padding: 5px;  margin: 0 5px 0 0; vertical-align: middle;}
.table .button-icon svg {width: 16px;}
.btn-warning { color: #fff !important;}
.form-control, select, .email-compose-fields .select2-container--default .select2-selection--multiple, .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--single .select2-search__field, .typeahead, .tt-query, .tt-hint, select.form-control, select, .email-compose-fields .select2-container--default select.select2-selection--multiple, .select2-container--default select.select2-selection--single, .select2-container--default .select2-selection--single select.select2-search__field, select.typeahead, select.tt-query, select.tt-hint {border-color: #ccc;}
.custom-select:focus, .form-control:focus, select:focus, .email-compose-fields .select2-container--default .select2-selection--multiple:focus, .select2-container--default .select2-selection--single:focus, .select2-container--default .select2-selection--single .select2-search__field:focus, .typeahead:focus, .tt-query:focus, .tt-hint:focus {border-color: var(--primary-color);}
.form-group label {font-weight: 500;  color: var(--text-color); margin-bottom: 0;}
.btn, .fc .fc-button, .swal2-modal .swal2-actions button, .wizard > .actions a, .wizard > .actions a:hover, .wizard > .actions .disabled a {padding: .5rem 1rem;text-transform: uppercase;}
.dropify-wrapper .dropify-message span.file-icon::before {font-size: 70px;}
.dropify-wrapper .dropify-message span.file-icon {font-size: 30px;}
@media(max-width: 767px) {
    .card .card-title {font-size: 20px;}
}