:root {
  --primary-bg: #0077C8;
  --primary-text: #FFF;
  --nav-item-bg: rgba(0, 0, 0, 0.05);
  --nav-text-color: #FFF;
}

body {
  overflow-x: hidden;
  font-family: "Nunito Sans", sans-serif !important;
}

/* Navbar Section */
.navbar .navbar-nav {
  column-gap: 4px;
}

/* new code formate */
/* .sci-bg h3 {
  font-size: 50px;
} */


.navbar .navbar-nav .nav-item {
  padding: unset !important;
  transition: 0.5s;
  cursor: pointer;
}

.navbar .navbar-nav .nav-item a {
  padding: 12px 24px;
  color: var(--nav-text-color) !important;
  /* background: var(--nav-item-bg) !important; */
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.navbar .navbar-nav .active a {
  background: var(--primary-bg) !important;
  color: var(--primary-text) !important;
  position: unset;
  border: 2px solid var(--nav-item-bg);
}

.navbar .navbar-nav .active ul li a {
  background: var(--nav-item-bg) !important;
  color: var(--nav-text-color) !important;
  position: unset;
}

.navbar .navbar-nav .active ul li a:hover {
  background: var(--primary-bg) !important;
  color: var(--primary-text) !important;
  position: unset;
}

.navbar .navbar-nav .active a:hover::after {
  content: unset !important;
}

.navbar .navbar-nav .nav-item a:hover::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--primary-bg);
}

.hi-navbar {
  background: #0077c8 !important;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
}

.hi-navbar__container .navbar {
  background: transparent !important;
  position: relative;
  height: 90px;
}

/* .navbar .navbar-nav li {
  width: fit-content !important;
} */

/* dropdown-2 starts */
.dropdown-menu-nav {
  margin: 0;
  padding: 0;
  list-style: none;

}

.dropdown-menu-nav li {
  position: relative;
}

.dropdown-menu-nav li a {
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  display: block;
  padding: 10px;
}

.dropdown-menu-nav li ul {
  position: absolute;
  top: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: none;
  background: #FFF;
  min-width: 300px;
  padding: 10px;
}



.dropdown-menu-nav li ul li ul {
  left: 100%;
  top: 0;
}

ul li:hover>ul {
  display: block;
}

/* dropdown-menu-2 ends */
.bell-icon {
  position: relative;
}

.notification-icon {
  background: transparent;
}

.notification-icon .fa-bell::before {
  color: #FFF;
}


#notification {
  position: absolute;
  background-color: #FFF;
  width: 25%;
  left: 45%;
  max-height: 350px;
  overflow-y: auto;
  border-radius: 4px;
}

#notification ul {
  padding: 6px 10px;
  margin-bottom: 0px;
  border-radius: 4px;
}

#notification>ul li {
  list-style: none;
  padding: 6px 10px;
  border: 1px solid #bfd0db;
  border-radius: 4px;
  margin: 10px 4px;
  font-size: 14px;
}

.new-notification {
  border: 1px solid #479ace;
  background-color: #70b3df62;
}

.old-notification {
  border: 1px solid #a5bac7;
  background-color: #FFF;
}

#notification-detail>ul li {
  list-style: none;
  padding: 8px 12px;
  border: 2px solid #83b6d6;
  border-radius: 6px;
  margin: 16px auto;
  font-size: 16px;
  font-weight: 600;
  color: #383838;
}

/* row overighte */
.row {
  margin-right: 0 !important;
}

.dropdown-filter {
  left: 0 !important;
  transform: unset !important;
  top: 40px !important;
}

.apply-btn {
  width: 140px;
  color: #FFF;
  background: #007EC7;
  border-radius: 4px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  margin-right: 20px;
}



.common-right-chevron-arrow {
  color: #E35205;
}

.register-card {
  padding: 10px;
}

.login-card {
  padding: 10px;
}

/* .auto-complete-select {
  width: 100% !important;
} */

table {
  width: 100%;
  table-layout: fixed;
}

.tbl-header {
  background-color: rgba(126, 126, 126, 0.3);
}

.tbl-content {
  overflow-x: auto;
  margin-top: 0px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

th {
  padding: 30px 15px;
  text-align: left;
  font-weight: 500;
  font-size: 16px;
  color: #3f3f3f;
}

td {
  padding: 30px;
  /* text-align: left; */
  vertical-align: middle;
  font-weight: 300;
  font-size: 12px;
  color: #3f3f3f;
  border-bottom: solid 1px rgba(88, 88, 88, 0.1);
}

th,
td {
  padding: 15px;
}

.table-header-text {
  font-weight: 900;
}


.table-bordered>thead>tr>td,
.table-bordered>thead>tr>th {
  border-bottom-width: 2px;
}

.table-bordered>tbody>tr>td,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>td,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>thead>tr>th {
  border: 1px solid #ddd;
}

.table-bordered>thead>tr>td,
.table-bordered>thead>tr>th {
  border-bottom-width: 2px;
}

.table-bordered>tbody>tr>td,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>td,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>thead>tr>th {
  border: 1px solid #ddd;
}

table td[class*=col-],
table th[class*=col-] {
  position: static;
  display: table-cell;
  float: none;
}

table td[class*=col-],
table th[class*=col-] {
  position: static;
  display: table-cell;
  float: none;
}

.table-bordered>:not(caption)>*>* {
  border-width: 0 var(--bs-border-width);
}

.table-bordered>:not(caption)>*>* {
  border-width: 0 var(--bs-border-width);
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

th {
  text-align: left;
}

td,
th {
  padding: 13px !important;
}

.h6,
h6 {
  font-size: 16px !important;
}

/* img{
    width: 100% !important;
} */

.navbar>.container,
.navbar>.container-fluid,
.navbar>.container-lg,
.navbar>.container-md,
.navbar>.container-sm,
.navbar>.container-xl,
.navbar>.container-xxl {
  justify-content: end !important;
}

.dashboard-li-text {
  color: black;
  margin-left: 12px;
}

/* .profile-home-text{
    text-align: center;
    margin-top: 7px;
} */

.quiz-next-previous-btn {
  text-align: right !important;
}

.question_quiz-account-setting-btn {
  font-weight: 500;
}

.footer-background {
  border-top: 4px solid darkgrey;
  background-color: #0077C8;
  color: white;
  padding: 2% 2% 4% 2%
}

.footer-hi-link {
  color: white;
  font-weight: 700;
  text-decoration: none;
  font-size: 18px;
  margin-left: 7px;
}

.footer-column {
  display: flex;
  justify-content: flex-end;
  align-items: end;
}

.card-img-top {
  height: 300px;
}

.truncate-3-lines {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* Number of lines to show */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

a.read-more {
  color: var(--primary-text) !important;
  background: var(--primary-bg) !important;
}

.datepicker:focus {
  outline: #70b2df !important;
}

.datepicker-dropdown {
  width: 300px !important;
}

.datepicker-days td {
  font-weight: 700;
  padding: 6px !important;
}

.datepicker-days th {
  padding: 8px !important;
}

.no-cursor {
  pointer-events: none;
}

.select2-container {
  width: 100% !important;
}

/* .table-responsive table tr th,
td {
  min-width: 200px;
  inline-size: 200px;
  overflow-wrap: break-word;
} */

.custom-mobile-menu-toogler {
  display: none;
}

@media(max-width: 991px) {
  .navbar-brand img {
    width: 150px !important;
  }

  .custom-mobile-menu-toogler {
    display: block;
  }

  .custom-mobile-menu-toogler img {
    width: 50px;
  }

  .custom-collapse-navbar {
    position: fixed;
    left: -100%;
    transition: 1s;
    top: 80px;
    background: #FFF;
    width: 100%;
    height: 100%;
  }

  .custom-collapse-navbar .navbar-nav .nav-item a {
    color: #0077C8 !important;
  }
}



.mobile-active-navbar {
  display: block !important;
  left: 0;
}

input::placeholder {
  color: #0000003b;
}

input::-ms-input-placeholder {
  color: #0000003b;
}

.form-control::placeholder {
  color: #0000003b;
}

.form-control::-ms-input-placeholder {
  color: #0000003b;
}