/*@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap'); */
@font-face {
  font-family: 'MuseoSans100'; 
  src: url('/assets/fonts/Museo_Sans/Museo_Sans_100.otf'); 
}
@font-face {
  font-family: 'MuseoSans300'; 
  src: url('/assets/fonts/Museo_Sans/Museo_Sans_300.otf'); 
}@font-face {
  font-family: 'MuseoSans500'; 
  src: url('/assets/fonts/Museo_Sans/Museo_Sans_500.otf'); 
}@font-face {
  font-family: 'MuseoSans700'; 
  src: url('/assets/fonts/Museo_Sans/Museo_Sans_700.otf');
}@font-face {
  font-family: 'MuseoSans900';
  src: url('/assets/fonts/Museo_Sans/Museo_Sans_900.otf');
}
:root {
  --main: #155264;
  --secondary: #ffbe0b;
  --secondary_hover: #ffef6a;
  --white: #fff;
  --black: #000;
  --container: #f1f1f1;
  --activebg: #327c90;
  --dropdownitem: #5b6166;
  --nav-active-focus-hover: #ffffff26;
  --inputBG: #eeedf0;
  --itemLabel: #888997;
  --font-green: #155264;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'MuseoSans300', sans-serif;
}

body {
  min-height: 100vh;
  background-color: var(--white);
}

input[type="search"] {
  margin-bottom: 10px;
  border: 1px solid lightgray !important;
}

.side-navbar {
  width: 220px;
  height: 100%;
  position: fixed;
  margin-left: -300px;
  background-color: var(--main);
  transition: 0.5s;
}

.nav-link:active,
.nav-link:focus,
.nav-link:hover {
  background-color: var(--nav-active-focus-hover);
}

.my-container {
  transition: 0.4s;
  background: var(--container);
  min-height: 100vh;
  position: relative;
  z-index: 0;
}

.active-nav {
  margin-left: 0;
}

/* for main section */
.active-cont {
  margin-left: 220px;
}

#menu-btn {
  background-color: var(--main);
  color: var(--white);
  margin-left: -62px;
  position: absolute;
}

.my-container input {
  /* border-radius: 2rem; */
 
}

.nav-link {
  /* text-align: center; */
  font-size: 1rem;
  font-weight: 200;
  width: 100%;
  padding: 0 10%;
  margin-bottom: 5%;
}

.nav-button {
  width: 100%;
  display: block;
  padding: 5px 10px;
  border-radius: 5px;
  color: var(--white);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}

.nav-button.active {
  background: var(--activebg);
}

.feather-side-ico {
  margin-right: 5px;
  width: 17px;
}

a.sidebar-main-logo {
  padding: 10%;
  text-align: center;
  color: #ead94c;
  text-decoration: none;
  font-size: 2rem;
  background: transparent;
  font-weight: bold;
}

.nav-header-cont {
  width: 100%;
  display: inline-flex;
}

.nav-header-left-cont {
  width: 50%;
  padding-top: 0.8rem;
  font-size: 0.9rem;
  font-weight: bold;
}

.nav-header-right-cont {
  width: 50%;
  text-align: right;
}

img.user-img {
  border: 1px solid var(--main);
  border-radius: 40px;
  display: inline;
}

.dropdown-toggle {
  background: none;
    border: none;
    margin-right: 10px;
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--main);
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  clear: both;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--dropdownitem);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  border-radius: var(--bs-dropdown-item-border-radius,0);
}

ul.dropdown-menu.show {
  border: none;
  border-radius: 5px;
}

btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
 
  background-color: var(--main);
  border-color: var(--main);
}

.content-container {
  padding: 5px 20px;
  font-family: Arial, Helvetica, sans-serif !important;
}

.btn {
  border-radius: 5px;
}

.btn-primary {
  background: var(--secondary);
  border: 1px solid var(--secondary);
  color: var(--black);
}

.btn-primary:hover {
  background: var(--secondary_hover);
  border: 1px solid var(--secondary_hover);
  color: var(--black);
}

.form-control {
  background: var(--inputBG);
  border-radius: 5px !important;
  border: 1px solid var(--inputBG);
  margin-top: 5px;
  margin-bottom: 5px;
  min-width: 40%;
}

.h1-header {
  font-weight: bold;
  font-size: 1.5rem;
  color: var(--main);
  text-transform: uppercase;
}

.card {
  border: none;
  padding: 15px 5px;    
  border-radius: 1rem;
}

.card-header {
  border-radius: 5px !important;
  border: none !important;
  background: var(--white);
}

label.table-item-label {
  color: var(--itemLabel);       
  padding-top: 2.5%;
  padding-left: 10%;
}


table.allo-table  {
  /* Change these properties */
  --border: 1px solid #e2e2e2;
  border-radius: 1rem;
  position: relative;
 
  /* Don't change these properties */
  border-spacing: 0;
  border-collapse: separate;
  border: var(--border);
  overflow: hidden;


  /* font-family: Arial, Helvetica, sans-serif !important; */
 }
 
 /* Apply a border to the right of all but the last column */
 table.allo-table  th:not(:last-child),
 table.allo-table  td:not(:last-child) {
  border-right: var(--border);
 }
 
 /* Apply a border to the bottom of all but the last row */
 table.allo-table >thead>tr:not(:last-child)>th,
 table.allo-table >thead>tr:not(:last-child)>td,
 table.allo-table >tbody>tr:not(:last-child)>th,
 table.allo-table >tbody>tr:not(:last-child)>td,
 table.allo-table >tfoot>tr:not(:last-child)>th,
 table.allo-table >tfoot>tr:not(:last-child)>td,
 table.allo-table >tr:not(:last-child)>td,
 table.allo-table >tr:not(:last-child)>th,
 table.allo-table >thead:not(:last-child),
 table.allo-table >tbody:not(:last-child),
 table.allo-table >tfoot:not(:last-child) {
  border-bottom: var(--border);
 }


 table.allo-table >thead>tr>td:not(:last-child), 
 table.allo-table >tbody>tr>td:not(:last-child), 
 table.allo-table >tfoot>tr>td:not(:last-child)
 {

  border-right: 0px;
 }

 .allo-table td {
  /* padding: 1% 5%; */
  position: relative;
  font-family: Arial, Helvetica, sans-serif !important;
}

.allo-table th {
  background-color: #efeef1;
  font-family: Arial, Helvetica, sans-serif !important;
}
.alert {
  padding: 0.5% 1%;
  width: fit-content;
  margin: auto;
  margin-bottom: 10px;
  display: inline-flex;
}

.dropdown-container {
  display: none;
  background: var(--activebg);
  border-radius: 0px 0px 5px 5px;
  font-weight: 200;
}

.dropdown-container a {
  display: block;
  width: 100%;
  display: block;
  padding: 5px 10px;
  border-radius: 5px;
  color: var(--white);
  text-decoration: none;
  font-size: 13px;
  font-weight: 200;
}

.dropdown-container a:hover {
  background-color: var(--nav-active-focus-hover);
}

i.fa.fa-caret-down.nav-carret {
  float: right;
  margin-top: 3%;
}

.table-responsive {
  font-size: 1rem;
}

/* ----------VRNTS CUSTOM CLASSES ---------------*/
.white-cont {
  background: white;
  padding: 10px 20px;
  border-radius: 10px;
}

.dash-header {
  width: 100%;
  margin-bottom: 5px;
}
.dash-header-inner-left {
  width: 50%;
}
.dash-header-inner-right {
  width: 100%;
  text-align: right;
}
.dash-money {
  font-weight: bold;
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 5px;
}

.dash-foot {
  text-align: center;
  font-size: 1rem;
  margin-bottom: 10px;
}

span.header-icon {
  /* background: red; */
  padding: 5px;
  border-radius: 50px;
  font-size: 1rem;
}

.div-header-cont {
  display: flex;
  width: 100%;
}

.div-header-title-1 {
  color: #de4655;
  font-weight: bold;
  font-size: 1.5rem;
  width: 50%;
}
.div-header-icon-1 {
  width: 50%;
  float: right;
}

a.recent_activities_link {
  display: block;
  margin-bottom: 3%;
  width: 100%;
  color: #68686c;
}

a.announcements_link {
  display: block;
  margin-bottom: 3%;
  width: 100%;
  color: #68686c;
  text-decoration: none;
}


.btn-search-yellow {
  color: black;
  background-color: var(--secondary);
  border-radius: 5px;
}

.btn-search-yellow:hover {
  color: black;
  background-color: var(--secondary_hover);
  border-radius: 5px;
}

input.vrn_ipt {
  background: lightgrey;
  border: 1px solid lightgray;
  border-radius: 5px;
  padding: 6.5px 15px;
  width: 100%;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link {
  border: none;
  padding: 15px;
  color: #d4d4d4;
}

.tab-pane {
  padding: 2%;
}

/* VRN CONTROLLER CUSTOM CSS */
.font-green {
  color: var(--font-green);

}

.font-bold {
  font-weight: bold;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  color: var(--font-green);
  font-weight: bold;
  border-bottom: 1px solid var(--font-green);
}


/* ----- --------  */
.prog-cont {
  padding: 2% 5%;
  border-radius: 10px;
}
.prog-cont-red {
  background-color: #f8d8dc;
}


.prog-cont-blue {
  background-color: #d4e3f5;
}

.prog-cont-gray {
  background-color: #efeef1;
}

.counter {
  width: 100%;
  display: inline-flex;
}

.counter-left {
  width: 50%;
}

.counter-right {
  width: 50%;
  text-align: right;
}

.prog-div {
  display: inline-flex;    width: 100%;
}
.prog-main-cont {
  margin: 5% 0%;
  width: 90%;
}
.prog-main-cont-2 {
  padding: 8px 15px;
  background: white;
  border-radius: 5px;    margin: 5% 2%;   
  font-weight: bold;
}

.fake-divider-cont {
  margin-top: 5%;
  margin-bottom: 5%;
  position: relative;
}

.fake-line {
  height: 10px;
  background: var(--container);
  position: absolute;
  width: 108%;
  left: -4%;
}