:root {
  /* colors */

  --primary: #306551;
  --color-d-20: #265141;
  --color-d-80: #0a1410;
  --color-d-90: #050a08;
  --color-l-30: #6e9385;
  --color-l-70: #c1d1cb;
  --color-l-90: #eaf0ee;
  --success-color-bg: #e6f6f1;
  --success-color: #14b78e;
  --warning-color-bg: #fdebd0;
  --warning-color: #f39c12;
  --danger-color-bg: #f8dbd7;
  --danger-color: #dd4b39;
}

@font-face {
  font-family: "Roxie Rossa Regular";
  font-style: normal;
  font-weight: normal;
  src: local("Roxie Rossa Regular"), url("../../fonts/Roxie_rossa.woff") format("woff");
}

body {
  color: var(--color-d-90) !important;
}

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

.res-color-primary {
  color: var(--primary) !important;
}

.res-bg-color-1 {
  background-color: var(--primary);
}

.res-bg-color-2 {
  background-color: var(--color-l-70);
}

.res-bg-color-3 {
  background-color: purple;
}

.res-bg-color-4 {
  background-color: greenyellow;
}

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

.res-fs-danger {
  color: var(--danger-color) !important;
}

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

.res-fs-success {
  color: var(--success-color) !important;
}

.res-logo {
  background-color: var(--color-d-90) !important;
}

.res-logo:hover {
  background-color: var(--color-d-80) !important;
}

.res-navbar {
  background-color: var(--color-d-90) !important;
}

.res-main-sidebar {
  background-color: var(--color-d-90) !important;
}

.res-sidebar-menu > li.active > a {
  border-left-color: var(--primary) !important;
  background: var(--color-d-80) !important;
}

.res-sidebar-menu > li:hover > a {
  background: var(--color-d-20) !important;
}

.res-sidebar-menu > li.menu-open > a {
  background: var(--color-d-20) !important;
}

.res-sidebar-menu > li > .treeview-menu {
  background: var(--color-d-80) !important;
}

.res-sidebar-menu .treeview-menu > li > a {
  color: var(--color-l-30) !important;
}

.skin-blue .sidebar-menu > li.header {
  color: var(--color-l-70) !important;
  background: var(--color-d-80) !important;
}

.sidebar-menu li.header {
  font-weight: 600 !important;
}

.skin-blue .sidebar a {
  color: var(--color-l-70) !important;
}

.bg-green,
.callout.callout-success,
.alert-success,
.label-success,
.modal-success .modal-body {
  background-color: var(--success-color-bg) !important;
  color: var(--success-color) !important;
}

.bg-yellow,
.callout.callout-warning,
.alert-warning,
.label-warning,
.modal-warning .modal-body {
  background-color: var(--warning-color-bg) !important;
  color: var(--warning-color) !important;
}

.bg-red,
.callout.callout-danger,
.alert-danger,
.alert-error,
.label-danger,
.modal-danger .modal-body {
  background-color: var(--danger-color-bg) !important;
  color: var(--danger-color) !important;
}

.alert-success {
  border-color: #97e8b9;
}

.btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.btn-primary:hover {
  background-color: var(--color-l-30) !important;
  border-color: var(--color-l-30) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: white !important;
}

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
  z-index: 3;
  color: #fff;
  cursor: default;
  background-color: var(--primary);
  border-color: var(--primary);
}

.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  text-decoration: none;
  background-color: var(--color-l-90);
  border: 0px solid #ddd;
}

.pagination > .disabled > a,
.pagination > .disabled > a:focus,
.pagination > .disabled > a:hover,
.pagination > .disabled > span,
.pagination > .disabled > span:focus,
.pagination > .disabled > span:hover {
  color: #777;
  cursor: not-allowed;
  background-color: var(--color-l-90);
  border-color: #ddd;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  margin: 20px 0;
  white-space: nowrap;
}

/* ---------- */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--primary) !important;
  color: white;
}

.select2-container--default .select2-selection--single {
  height: 35px;
}

.select2-dropdown {
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.select2-container--default .select2-selection--single {
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-search--dropdown .select2-search__field {
  border-color: var(--color-l-70) !important;
}

.form-control {
  border-radius: 5px;
}

/* header navbar */
.skin-blue .main-header .navbar {
  background-color: var(--primary) !important;
}

.navbar .logo-lg.visible-xs {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  line-height: 50px;
  /* Matches AdminLTE navbar height */
  font-family: "Roxie Rossa Regular";
  color: white;
  font-size: 24px;
}

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

@media screen and (max-width: 767px) {
  .table-responsive {
    border: 0px solid #ddd !important;
  }
}

.skin-blue .main-header .navbar .sidebar-toggle:hover {
  background-color: var(--color-l-30) !important;
}

.skin-blue .wrapper,
.skin-blue .main-sidebar,
.skin-blue .left-side {
  background-color: var(--color-d-90) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--primary) !important;
  border: 1px solid var(--primary) !important;
}

.krajee-default.file-preview-frame {
  border: 1px solid var(--color-l-90) !important;
  box-shadow: box-shadow rgba(99, 99, 99, 0.2) 0px 2px 8px 0px !important;
  border-radius: 5px !important;
}

.label {
  padding: 0.2em 0.9em 0.3em !important;
  border-radius: 1.5em !important;
}

.tooltip {
  z-index: 9999 !important;
  position: fixed !important;
}

.control-label {
  font-weight: 500 !important;
}

.ph {
  font-size: 20px !important;
  vertical-align: bottom !important;
}

label {
  font-weight: 500 !important;
}

.box-header {
  border-bottom: 1px solid var(--color-l-90) !important;
  padding: 30px 20px 10px 20px;
}

.box-title {
  padding-bottom: 15px !important;
}

.panel-primary {
  border-color: var(--color-l-90);
}

.panel-primary > .panel-heading {
  color: var(--primary);
  background-color: var(--color-l-90);
  border-color: var(--color-l-90);
}