@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

:root {
  --tm-blue: #0D47A1;
  --tm-orange: #FF6F00;
  --tm-navy: #12233F;
  --tm-sky: #CADCFC;
  --tm-sky-soft: #CFE0F7;
  --tm-gray: #5B6677;
  --tm-border: #E4E8F0;
  --tm-white: #FFFFFF;
  --tm-surface: #F7FAFF;
}

body,
button,
input,
select,
textarea {
  font-family: 'Montserrat', sans-serif !important;
}

a {
  color: var(--tm-blue);
}

a:hover,
a:focus {
  color: var(--tm-orange);
}

.text-red,
.user-name,
.login-form .text-red {
  color: var(--tm-orange) !important;
}

.text-darkblue {
  color: var(--tm-navy) !important;
}

#mainNav,
#mainNav.navbar-shrink,
.navbar-collapse {
  background: var(--tm-white) !important;
}

#mainNav {
  border-bottom: 1px solid rgba(18, 35, 63, 0.08);
}

#mainNav .navbar-brand img {
  height: 4.5rem !important;
  width: auto !important;
  max-width: none;
}

#mainNav .navbar-nav .nav-item .nav-link,
#mainNav.navbar-shrink .navbar-nav .nav-item .nav-link,
.user-menu .nav-link,
.notifications .notifications-details li.title,
.notifications .notifications-details li .mesage-title {
  color: var(--tm-navy) !important;
}

#mainNav .navbar-nav .nav-item .nav-link:hover,
#mainNav .navbar-nav .nav-item .nav-link:focus,
.user-menu .nav-link:hover,
.user-menu .nav-link:focus {
  color: var(--tm-blue) !important;
}

.header-icon path {
  fill: var(--tm-blue);
}

.pulse {
  background: var(--tm-orange) !important;
  box-shadow: 0 0 0 rgba(255, 111, 0, 0.7) !important;
}

.login-btn,
.login-otp-btn,
.resent-btn,
.search_box .btn,
.btn.btn-primary,
.btn-primary,
.notifications .notifications-details li.viewnotifications,
.btn-group .btn.fb,
.btn-group .btn.google {
  background: var(--tm-orange) !important;
  border-color: var(--tm-orange) !important;
  color: var(--tm-white) !important;
}

.btn.btn-primary:hover,
.btn-primary:hover,
.login-btn:hover,
.login-otp-btn:hover,
.resent-btn:hover,
.search_box .btn:hover {
  background: #e76400 !important;
  border-color: #e76400 !important;
  color: var(--tm-white) !important;
}

.form-control:focus,
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--tm-blue) !important;
  box-shadow: 0 0 0 0.2rem rgba(13, 71, 161, 0.12) !important;
}

.blue_box {
  background: linear-gradient(135deg, var(--tm-blue), #2f6fcd) !important;
}

.dark_blue_box {
  background: linear-gradient(160deg, var(--tm-navy), var(--tm-blue)) !important;
}

.red_box,
div.bhoechie-tab-menu div.list-group > a.active {
  background: var(--tm-orange) !important;
}

div.bhoechie-tab-menu div.list-group > a .glyphicon,
div.bhoechie-tab-menu div.list-group > a .fa,
div.bhoechie-tab-content .nav-tabs .nav-link {
  color: var(--tm-blue);
}

.footer {
  background: linear-gradient(135deg, var(--tm-navy), var(--tm-blue));
  color: var(--tm-white);
}

.footer .footer-title,
.footer p,
.footer li,
.footer li a,
.footer .newsletter li,
.footer .newsletter span {
  color: var(--tm-white) !important;
}

.footer li a:hover,
.footer li a:focus {
  color: #ffd8b0 !important;
}

.footer .btn-social {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--tm-white);
}

.footer .btn-social:hover {
  background: var(--tm-orange);
  border-color: var(--tm-orange);
  color: var(--tm-white);
}

.footer .input {
  border: 1px solid rgba(255, 255, 255, 0.24);
}

header.masthead,
header.supportbanner {
  position: relative;
  background-image:
    linear-gradient(115deg, rgba(18, 35, 63, 0.92), rgba(13, 71, 161, 0.82)),
    url("../../app-assets/img/banner-img.jpg") !important;
  overflow: hidden;
}

header.masthead::after,
header.supportbanner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../app-assets/img/favicon.png");
  background-repeat: no-repeat;
  background-position: right 8% center;
  background-size: min(24vw, 180px);
  opacity: 0.12;
  pointer-events: none;
}

header.masthead > .container,
header.supportbanner > .container {
  position: relative;
  z-index: 1;
}

header.masthead .masthead-heading,
header.supportbanner .masthead-heading {
  color: var(--tm-white);
  text-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

header.masthead .masthead-subheading,
header.masthead .subheading {
  color: #e8f1ff;
}

.page-section#professionals:last-of-type {
  position: relative;
  border-top: 1px solid var(--tm-border);
  border-bottom: 1px solid var(--tm-border);
  background:
    radial-gradient(circle at top right, rgba(202, 220, 252, 0.6), transparent 35%),
    linear-gradient(180deg, #ffffff, #f7faff);
}

.page-section#professionals:last-of-type .col-md-8 img,
.page-section#professionals:last-of-type .col-md-8 .img-fluid {
  filter: drop-shadow(0 24px 40px rgba(18, 35, 63, 0.18));
}

.copyright {
  background: #0a1a30;
  color: var(--tm-white);
}

.copyright a,
.copyright .text-right,
.copyright .text-left {
  color: var(--tm-white) !important;
}

.backend-section .header-navbar,
.backend-section .navbar-wrapper,
.backend-section .header-navbar .navbar-container {
  background: var(--tm-white) !important;
}

.backend-section .brand-logo-img,
.backend-section .header-navbar .navbar-brand img {
  height: 48px;
  width: auto;
}

.backend-section .horizontal-menu .header-navbar.navbar-brand-center .navbar-header {
  margin-left: -110px;
}

.backend-section .horizontal-menu .header-navbar.navbar-brand-center .navbar-header .navbar-brand .brand-logo {
  background: none !important;
  height: auto;
  width: auto;
}

.backend-section .horizontal-menu-wrapper .header-navbar.navbar-horizontal {
  background: linear-gradient(135deg, var(--tm-navy), var(--tm-blue)) !important;
}

.backend-section .horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li > a,
.backend-section .horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li > a .menu-title,
.backend-section .horizontal-menu .header-navbar.navbar-horizontal .dropdown > a,
.backend-section .horizontal-menu .header-navbar.navbar-horizontal .dropdown > a .menu-title {
  color: var(--tm-white) !important;
}

.backend-section .horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li.active > a,
.backend-section .horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li > a:hover,
.backend-section .horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li.show > a {
  background: rgba(255, 255, 255, 0.12) !important;
  border-bottom: 3px solid var(--tm-orange) !important;
}

.backend-section .dropdown-menu .dropdown-item:hover,
.backend-section .dropdown-menu .dropdown-item:focus,
.backend-section .dropdown-menu .dropdown-item.active {
  background: rgba(13, 71, 161, 0.08) !important;
  color: var(--tm-blue) !important;
}

.backend-section .primary,
.backend-section .text-primary,
.backend-section a:not(.btn) .primary {
  color: var(--tm-blue) !important;
}

.backend-section .btn-primary,
.backend-section .badge-primary,
.backend-section .bg-primary,
.backend-section .pagination .page-item.active .page-link,
.backend-section .custom-control-input:checked ~ .custom-control-label::before,
.backend-section .vs-checkbox-con input:checked ~ .vs-checkbox .vs-checkbox--check,
.backend-section .vs-checkbox-con input:checked ~ .vs-checkbox,
.backend-section .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--tm-orange) !important;
  border-color: var(--tm-orange) !important;
  color: var(--tm-white) !important;
}

.backend-section .btn-outline-primary,
.backend-section .page-item .page-link,
.backend-section .dropdown-notification .badge-up {
  border-color: var(--tm-orange) !important;
  color: var(--tm-orange) !important;
}

.backend-section .page-item.active .page-link,
.backend-section .dropdown-notification .badge-up {
  color: var(--tm-white) !important;
}

.backend-section .btn-outline-primary:hover,
.backend-section .btn-primary:hover {
  background-color: #e76400 !important;
  border-color: #e76400 !important;
  color: var(--tm-white) !important;
}

.backend-section .card,
.backend-section .modal-content,
.backend-section .dropdown-menu {
  border: 1px solid var(--tm-border);
  box-shadow: 0 20px 45px -30px rgba(18, 35, 63, 0.28);
}

.backend-section footer.footer-light,
.backend-section footer.footer .clearfix {
  background: var(--tm-white);
  color: var(--tm-gray) !important;
}

.backend-section footer.footer a {
  color: var(--tm-blue) !important;
}

@media only screen and (max-width: 991px) {
  #mainNav .navbar-brand img {
    height: 3.75rem !important;
  }

  .backend-section .brand-logo-img,
  .backend-section .header-navbar .navbar-brand img {
    height: 40px;
  }
}

@media only screen and (max-width: 479px) {
  #mainNav .navbar-brand img {
    height: 3.4rem !important;
  }

  header.masthead::after,
  header.supportbanner::after {
    background-position: center bottom;
    background-size: 120px;
    opacity: 0.09;
  }
}