@charset "UTF-8";
/* GENERATED on build by the DzConcatCss target in DZ Website.csproj - edit the source files, not this. */
/* ---- app.css ---- */
/*
Template Name: Skote - Admin & Dashboard Template
Author: Themesbrand
Version: 4.1.0.
Website: https://themesbrand.com/
Contact: themesbrand@gmail.com
File: Main Css File
*/
/* Poppins is self-hosted: assets/css/fonts-poppins.css, linked from _head_css and _BlankLayout. */
/* =============================Custom Variables========================== */
#page-topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1002;
  background-color: var(--bs-header-bg);
  -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
          box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
}

.navbar-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;
  height: 70px;
  padding: 0 calc(24px * 0.5) 0 0;
}
.navbar-header .dropdown .show.header-item {
  background-color: var(--bs-tertiary-bg);
}

.navbar-brand-box {
  padding: 0 1.5rem;
  text-align: center;
  width: 250px;
}

.logo {
  line-height: 70px;
}
.logo .logo-sm {
  display: none;
}

.logo-light {
  display: none;
}

/* Search */
.app-search {
  padding: calc(32px * 0.5) 0;
}
.app-search .form-control {
  border: none;
  height: 38px;
  padding-left: 40px;
  padding-right: 20px;
  background-color: var(--bs-topbar-search-bg);
  -webkit-box-shadow: none;
          box-shadow: none;
  border-radius: 30px;
}
.app-search span {
  position: absolute;
  z-index: 10;
  font-size: 16px;
  line-height: 38px;
  left: 13px;
  top: 0;
  color: var(--bs-secondary-color);
}

.megamenu-list li {
  position: relative;
  padding: 5px 0px;
}
.megamenu-list li a {
  color: var(--bs-body-color);
}

@media (max-width: 992px) {
  .navbar-brand-box {
    width: auto;
  }
  .logo span.logo-lg {
    display: none;
  }
  .logo span.logo-sm {
    display: inline-block;
  }
}
.page-content {
  padding: calc(70px + 24px) calc(24px * 0.75) 60px calc(24px * 0.75);
}

.header-item {
  height: 70px;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  color: var(--bs-header-item-color);
  border: 0;
  border-radius: 0px;
}
.header-item:hover {
  color: var(--bs-header-item-color);
}

.header-profile-user {
  height: 36px;
  width: 36px;
  background-color: var(--bs-tertiary-bg);
  padding: 3px;
}

.noti-icon i {
  font-size: 22px;
  color: var(--bs-header-item-color);
}
.noti-icon .badge {
  position: absolute;
  top: 12px;
  right: 4px;
}

.notification-item .d-flex {
  padding: 0.75rem 1rem;
}
.notification-item .d-flex:hover {
  background-color: var(--bs-tertiary-bg);
}

.dropdown-icon-item {
  display: block;
  border-radius: 3px;
  line-height: 34px;
  text-align: center;
  padding: 15px 0 9px;
  display: block;
  border: 1px solid transparent;
  color: var(--bs-secondary-color);
}
.dropdown-icon-item img {
  height: 24px;
}
.dropdown-icon-item span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdown-icon-item:hover {
  border-color: var(--bs-border-color);
}

.fullscreen-enable [data-bs-toggle=fullscreen] .bx-fullscreen::before {
  content: "\ea3f";
}

body[data-topbar=dark] #page-topbar {
  background-color: var(--bs-header-dark-bg);
}
body[data-topbar=dark] .navbar-header .dropdown .show.header-item {
  background-color: rgba(255, 255, 255, 0.05);
}
body[data-topbar=dark] .navbar-header .waves-effect .waves-ripple {
  background: rgba(255, 255, 255, 0.4);
}
body[data-topbar=dark] .header-item {
  color: var(--bs-header-dark-item-color);
}
body[data-topbar=dark] .header-item:hover {
  color: var(--bs-header-dark-item-color);
}
body[data-topbar=dark] .header-profile-user {
  background-color: rgba(255, 255, 255, 0.25);
}
body[data-topbar=dark] .noti-icon i {
  color: var(--bs-header-dark-item-color);
}
body[data-topbar=dark] .logo {
  display: none;
}
body[data-topbar=dark] .logo-light {
  display: block;
}
body[data-topbar=dark] .app-search .form-control {
  background-color: rgba(var(--bs-topbar-search-bg), 0.07);
  color: #fff;
}
body[data-topbar=dark] .app-search span,
body[data-topbar=dark] .app-search input.form-control::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}

body[data-sidebar=dark] .navbar-brand-box {
  background: #2a3042;
}
body[data-sidebar=dark] .logo {
  display: none;
}
body[data-sidebar=dark] .logo-light {
  display: block;
}

@media (max-width: 600px) {
  .navbar-header .dropdown {
    position: static;
  }
  .navbar-header .dropdown .dropdown-menu {
    left: 10px !important;
    right: 10px !important;
  }
}
@media (max-width: 380px) {
  .navbar-brand-box {
    display: none;
  }
}
body[data-layout=horizontal] .navbar-brand-box {
  width: auto;
}
body[data-layout=horizontal] .page-content {
  margin-top: 70px;
  padding: calc(55px + 24px) calc(24px * 0.5) 60px calc(24px * 0.5);
}

@media (max-width: 992px) {
  body[data-layout=horizontal] .page-content {
    margin-top: 15px;
  }
}
.page-title-box {
  padding-bottom: 24px;
}
.page-title-box .breadcrumb {
  background-color: transparent;
  padding: 0;
}
.page-title-box h4 {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 16px !important;
}

.footer {
  bottom: 0;
  padding: 20px calc(24px * 0.75);
  position: absolute;
  right: 0;
  color: var(--bs-footer-color);
  left: 250px;
  height: 60px;
  background-color: var(--bs-footer-bg);
}
@media (max-width: 991.98px) {
  .footer {
    left: 0;
  }
}

.vertical-collpsed .footer {
  left: 70px;
}
@media (max-width: 991.98px) {
  .vertical-collpsed .footer {
    left: 0;
  }
}

body[data-layout=horizontal] .footer {
  left: 0 !important;
}

.right-bar {
  background-color: var(--bs-secondary-bg);
  -webkit-box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.02);
          box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.02);
  display: block;
  position: fixed;
  -webkit-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
  width: 280px;
  z-index: 9999;
  float: right !important;
  right: -290px;
  top: 0;
  bottom: 0;
}
.right-bar .right-bar-toggle {
  background-color: var(--bs-dark);
  height: 24px;
  width: 24px;
  line-height: 24px;
  display: block;
  color: var(--bs-gray-200);
  text-align: center;
  border-radius: 50%;
}
.right-bar .right-bar-toggle:hover {
  background-color: var(--bs-dark);
}

.rightbar-overlay {
  background-color: rgba(52, 58, 64, 0.55);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: none;
  z-index: 9998;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.right-bar-enabled .right-bar {
  right: 0;
}
.right-bar-enabled .rightbar-overlay {
  display: block;
}

@media (max-width: 767.98px) {
  .right-bar {
    overflow: auto;
  }
  .right-bar .slimscroll-menu {
    height: auto !important;
  }
}
.metismenu {
  margin: 0;
}
.metismenu li {
  display: block;
  width: 100%;
}
.metismenu .mm-collapse {
  display: none;
}
.metismenu .mm-collapse:not(.mm-show) {
  display: none;
}
.metismenu .mm-collapse.mm-show {
  display: block;
}
.metismenu .mm-collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transition-duration: 0.35s;
          transition-duration: 0.35s;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
}

.vertical-menu {
  width: 250px;
  z-index: 1001;
  background: #ffffff;
  bottom: 0;
  margin-top: 0;
  position: fixed;
  top: 70px;
  -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
          box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
}

.main-content {
  margin-left: 250px;
}
.main-content .content {
  padding: 0 15px 10px 15px;
  margin-top: 70px;
}

#sidebar-menu {
  padding: 45px 0 30px 0;
}
#sidebar-menu .mm-active > .has-arrow:after {
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
}
#sidebar-menu .has-arrow:after {
  content: "\f0140";
  font-family: "Material Design Icons";
  display: block;
  float: right;
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
  font-size: 1rem;
}
#sidebar-menu ul li a {
  display: block;
  padding: 0.625rem 1.5rem;
  color: #545a6d;
  position: relative;
  font-size: 13px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
#sidebar-menu ul li a i {
  display: inline-block;
  min-width: 1.75rem;
  padding-bottom: 0.125em;
  font-size: 1.25rem;
  line-height: 1.40625rem;
  vertical-align: middle;
  color: #7f8387;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
#sidebar-menu ul li a:hover {
  color: #383c40;
}
#sidebar-menu ul li a:hover i {
  color: #383c40;
}
#sidebar-menu ul li .badge {
  margin-top: 4px;
}
#sidebar-menu ul li ul.sub-menu {
  padding: 0;
}
#sidebar-menu ul li ul.sub-menu li a {
  padding: 0.4rem 1.5rem 0.4rem 3.5rem;
  font-size: 13px;
  color: #545a6d;
}
#sidebar-menu ul li ul.sub-menu li a:hover {
  color: #383c40;
}
#sidebar-menu ul li ul.sub-menu li ul.sub-menu {
  padding: 0;
}
#sidebar-menu ul li ul.sub-menu li ul.sub-menu li a {
  padding: 0.4rem 1.5rem 0.4rem 4.5rem;
  font-size: 13px;
}

.menu-title {
  padding: 12px 20px !important;
  letter-spacing: 0.05em;
  pointer-events: none;
  cursor: default;
  font-size: 11px;
  text-transform: uppercase;
  color: #7f8387;
  font-weight: 600;
}

.mm-active {
  color: #556ee6 !important;
}
.mm-active > a {
  color: #556ee6 !important;
}
.mm-active > a i {
  color: #556ee6 !important;
}
.mm-active .active {
  color: #556ee6 !important;
}
.mm-active .active i {
  color: #556ee6 !important;
}
.mm-active > i {
  color: #556ee6 !important;
}

@media (max-width: 992px) {
  .vertical-menu {
    display: none;
  }
  .main-content {
    margin-left: 0 !important;
  }
  body.sidebar-enable .vertical-menu {
    display: block;
  }
}
.vertical-collpsed .main-content {
  margin-left: 70px;
}
.vertical-collpsed .navbar-brand-box {
  width: 70px !important;
}
.vertical-collpsed .logo span.logo-lg {
  display: none;
}
.vertical-collpsed .logo span.logo-sm {
  display: block;
}
.vertical-collpsed .vertical-menu {
  position: absolute;
  width: 70px !important;
  z-index: 5;
}
.vertical-collpsed .vertical-menu .simplebar-mask,
.vertical-collpsed .vertical-menu .simplebar-content-wrapper {
  overflow: visible !important;
}
.vertical-collpsed .vertical-menu .simplebar-scrollbar {
  display: none !important;
}
.vertical-collpsed .vertical-menu .simplebar-offset {
  bottom: 0 !important;
}
.vertical-collpsed .vertical-menu #sidebar-menu .menu-title,
.vertical-collpsed .vertical-menu #sidebar-menu .badge,
.vertical-collpsed .vertical-menu #sidebar-menu .collapse.in {
  display: none !important;
}
.vertical-collpsed .vertical-menu #sidebar-menu .nav.collapse {
  height: inherit !important;
}
.vertical-collpsed .vertical-menu #sidebar-menu .has-arrow:after {
  display: none;
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li {
  position: relative;
  white-space: nowrap;
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a {
  padding: 15px 20px;
  min-height: 55px;
  -webkit-transition: none;
  transition: none;
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a:hover, .vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a:active, .vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a:focus {
  color: #383c40;
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a i {
  font-size: 1.45rem;
  margin-left: 4px;
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a span {
  display: none;
  padding-left: 25px;
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a {
  position: relative;
  width: calc(190px + 70px);
  color: #556ee6;
  background-color: whitesmoke;
  -webkit-transition: none;
  transition: none;
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a i {
  color: #556ee6;
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a span {
  display: inline;
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul {
  display: block;
  left: 70px;
  position: absolute;
  width: 190px;
  height: auto !important;
  -webkit-box-shadow: 3px 5px 10px 0 rgba(54, 61, 71, 0.1);
          box-shadow: 3px 5px 10px 0 rgba(54, 61, 71, 0.1);
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul ul {
  -webkit-box-shadow: 3px 5px 10px 0 rgba(54, 61, 71, 0.1);
          box-shadow: 3px 5px 10px 0 rgba(54, 61, 71, 0.1);
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a {
  -webkit-box-shadow: none;
          box-shadow: none;
  padding: 8px 20px;
  position: relative;
  width: 190px;
  z-index: 6;
  color: #545a6d;
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a:hover {
  color: #383c40;
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul ul {
  padding: 5px 0;
  z-index: 9999;
  display: none;
  background-color: #ffffff;
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul ul li:hover > ul {
  display: block;
  left: 190px;
  height: auto !important;
  margin-top: -36px;
  position: absolute;
  width: 190px;
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul ul li > a span.pull-right {
  position: absolute;
  right: 20px;
  top: 12px;
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul ul li.active a {
  color: #f8f9fa;
}

body[data-sidebar=dark] .vertical-menu {
  background: #2a3042;
}
body[data-sidebar=dark] #sidebar-menu ul li a {
  color: #a6b0cf;
}
body[data-sidebar=dark] #sidebar-menu ul li a i {
  color: #6a7187;
}
body[data-sidebar=dark] #sidebar-menu ul li a:hover {
  color: #ffffff;
}
body[data-sidebar=dark] #sidebar-menu ul li a:hover i {
  color: #ffffff;
}
body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a {
  color: #79829c;
}
body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a:hover {
  color: #ffffff;
}
body[data-sidebar=dark].vertical-collpsed {
  min-height: 1760px;
}
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a {
  background: #2e3548;
  color: #ffffff;
}
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a i {
  color: #ffffff;
}
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a {
  color: #79829c;
}
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a:hover {
  color: #ffffff;
}
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu > ul ul {
  background-color: #2a3042;
}
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu ul li.mm-active .active {
  color: #ffffff !important;
}
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu ul li.mm-active .active i {
  color: #ffffff !important;
}
body[data-sidebar=dark] .mm-active {
  color: #ffffff !important;
}
body[data-sidebar=dark] .mm-active > a {
  color: #ffffff !important;
}
body[data-sidebar=dark] .mm-active > a i {
  color: #ffffff !important;
}
body[data-sidebar=dark] .mm-active > i {
  color: #ffffff !important;
}
body[data-sidebar=dark] .mm-active .active {
  color: #ffffff !important;
}
body[data-sidebar=dark] .mm-active .active i {
  color: #ffffff !important;
}
body[data-sidebar=dark] .menu-title {
  color: #6a7187;
}

body[data-layout=horizontal] .main-content {
  margin-left: 0 !important;
}

body[data-sidebar-size=small] .navbar-brand-box {
  width: 160px;
}
body[data-sidebar-size=small] .vertical-menu {
  width: 160px;
  text-align: center;
}
body[data-sidebar-size=small] .vertical-menu .has-arrow:after,
body[data-sidebar-size=small] .vertical-menu .badge {
  display: none !important;
}
body[data-sidebar-size=small] .main-content {
  margin-left: 160px;
}
body[data-sidebar-size=small] .footer {
  left: 160px;
}
@media (max-width: 991.98px) {
  body[data-sidebar-size=small] .footer {
    left: 0;
  }
}
body[data-sidebar-size=small] #sidebar-menu ul li.menu-title {
  background-color: #2e3548;
}
body[data-sidebar-size=small] #sidebar-menu ul li a i {
  display: block;
}
body[data-sidebar-size=small] #sidebar-menu ul li ul.sub-menu li a {
  padding-left: 1.5rem;
}
body[data-sidebar-size=small] #sidebar-menu ul li ul.sub-menu li ul.sub-menu li a {
  padding-left: 1.5rem;
}
body[data-sidebar-size=small].vertical-collpsed .main-content {
  margin-left: 70px;
}
body[data-sidebar-size=small].vertical-collpsed .vertical-menu #sidebar-menu {
  text-align: left;
}
body[data-sidebar-size=small].vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a i {
  display: inline-block;
}
body[data-sidebar-size=small].vertical-collpsed .footer {
  left: 70px;
}

body[data-sidebar=colored] .vertical-menu {
  background-color: #556ee6;
}
body[data-sidebar=colored] .navbar-brand-box {
  background-color: #556ee6;
}
body[data-sidebar=colored] .navbar-brand-box .logo {
  display: none;
}
body[data-sidebar=colored] .navbar-brand-box .logo-light {
  display: block;
}
body[data-sidebar=colored] .mm-active {
  color: #fff !important;
}
body[data-sidebar=colored] .mm-active > a {
  color: #fff !important;
}
body[data-sidebar=colored] .mm-active > a i {
  color: #fff !important;
}
body[data-sidebar=colored] .mm-active > i, body[data-sidebar=colored] .mm-active .active {
  color: #fff !important;
}
body[data-sidebar=colored] #sidebar-menu ul li.menu-title {
  color: rgba(255, 255, 255, 0.6);
}
body[data-sidebar=colored] #sidebar-menu ul li a {
  color: rgba(255, 255, 255, 0.6);
}
body[data-sidebar=colored] #sidebar-menu ul li a i {
  color: rgba(255, 255, 255, 0.6);
}
body[data-sidebar=colored] #sidebar-menu ul li a.waves-effect .waves-ripple {
  background: rgba(255, 255, 255, 0.1);
}
body[data-sidebar=colored] #sidebar-menu ul li a:hover {
  color: #fff;
}
body[data-sidebar=colored] #sidebar-menu ul li a:hover i {
  color: #fff;
}
body[data-sidebar=colored] #sidebar-menu ul li ul.sub-menu li a {
  color: rgba(255, 255, 255, 0.5);
}
body[data-sidebar=colored] #sidebar-menu ul li ul.sub-menu li a:hover {
  color: #fff;
}
body[data-sidebar=colored].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a {
  background-color: #5e76e7;
  color: #fff;
}
body[data-sidebar=colored].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a i {
  color: #fff;
}
body[data-sidebar=colored].vertical-collpsed .vertical-menu #sidebar-menu ul li.mm-active .active {
  color: #556ee6 !important;
}
body[data-sidebar=colored].vertical-collpsed .vertical-menu #sidebar-menu ul li ul.sub-menu li a:hover {
  color: #556ee6;
}
body[data-sidebar=colored].vertical-collpsed .vertical-menu #sidebar-menu ul li ul.sub-menu li.mm-active {
  color: #556ee6 !important;
}
body[data-sidebar=colored].vertical-collpsed .vertical-menu #sidebar-menu ul li ul.sub-menu li.mm-active > a {
  color: #556ee6 !important;
}
body[data-sidebar=colored].vertical-collpsed .vertical-menu #sidebar-menu ul li ul.sub-menu li.mm-active > a i {
  color: #556ee6 !important;
}

.topnav {
  background: var(--bs-topnav-bg);
  padding: 0 calc(24px * 0.5);
  -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
          box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
  margin-top: 70px;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 100;
}
.topnav .topnav-menu {
  margin: 0;
  padding: 0;
}
.topnav .navbar-nav .nav-link {
  font-size: 14px;
  position: relative;
  padding: 1rem 1.3rem;
  color: var(--bs-menu-item-color);
}
.topnav .navbar-nav .nav-link i {
  font-size: 15px;
}
.topnav .navbar-nav .nav-link:focus, .topnav .navbar-nav .nav-link:hover {
  color: var(--bs-menu-item-active-color);
  background-color: transparent;
}
.topnav .navbar-nav .dropdown-item {
  color: var(--bs-menu-item-color);
}
.topnav .navbar-nav .dropdown-item.active, .topnav .navbar-nav .dropdown-item:hover {
  color: var(--bs-menu-item-active-color);
}
.topnav .navbar-nav .nav-item .nav-link.active {
  color: var(--bs-menu-item-active-color);
}
.topnav .navbar-nav .dropdown.active > a {
  color: var(--bs-menu-item-active-color);
  background-color: transparent;
}

@media (min-width: 1200px) {
  body[data-layout=horizontal] .container-fluid,
  body[data-layout=horizontal] .navbar-header {
    max-width: 85%;
  }
}
@media (min-width: 992px) {
  .topnav .navbar-nav .nav-item:first-of-type .nav-link {
    padding-left: 0;
  }
  .topnav .dropdown-item {
    padding: 0.5rem 1.5rem;
    min-width: 180px;
  }
  .topnav .dropdown.mega-dropdown .mega-dropdown-menu {
    left: 0px;
    right: auto;
  }
  .topnav .dropdown .dropdown-menu {
    margin-top: 0;
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
  }
  .topnav .dropdown .dropdown-menu .arrow-down::after {
    right: 15px;
    -webkit-transform: rotate(-135deg) translateY(-50%);
            transform: rotate(-135deg) translateY(-50%);
    position: absolute;
  }
  .topnav .dropdown .dropdown-menu .dropdown .dropdown-menu {
    position: absolute;
    top: 0 !important;
    left: 100%;
    display: none;
  }
  .topnav .dropdown:hover > .dropdown-menu {
    display: block;
  }
  .topnav .dropdown:hover > .dropdown-menu > .dropdown:hover > .dropdown-menu {
    display: block;
  }
  .navbar-toggle {
    display: none;
  }
}
.arrow-down {
  display: inline-block;
}
.arrow-down:after {
  border-color: initial;
  border-style: solid;
  border-width: 0 0 1px 1px;
  content: "";
  height: 0.4em;
  display: inline-block;
  right: 5px;
  top: 50%;
  margin-left: 10px;
  -webkit-transform: rotate(-45deg) translateY(-50%);
          transform: rotate(-45deg) translateY(-50%);
  -webkit-transform-origin: top;
          transform-origin: top;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  width: 0.4em;
}

@media (max-width: 1199.98px) {
  .topnav-menu .navbar-nav li:last-of-type .dropdown .dropdown-menu {
    right: 100%;
    left: auto;
  }
}
@media (max-width: 991.98px) {
  .navbar-brand-box .logo {
    display: var(--bs-display-block);
  }
  .navbar-brand-box .logo span.logo-sm {
    display: var(--bs-display-block);
  }
  .navbar-brand-box .logo-light {
    display: var(--bs-display-none);
  }
  .topnav {
    max-height: 360px;
    overflow-y: auto;
    padding: 0;
  }
  .topnav .navbar-nav .nav-link {
    padding: 0.75rem 1.1rem;
  }
  .topnav .dropdown .dropdown-menu {
    background-color: transparent;
    border: none;
    -webkit-box-shadow: none;
            box-shadow: none;
    padding-left: 15px;
  }
  .topnav .dropdown .dropdown-menu.dropdown-mega-menu-xl {
    width: auto;
  }
  .topnav .dropdown .dropdown-menu.dropdown-mega-menu-xl .row {
    margin: 0px;
  }
  .topnav .dropdown .dropdown-item {
    position: relative;
    background-color: transparent;
  }
  .topnav .dropdown .dropdown-item.active, .topnav .dropdown .dropdown-item:active {
    color: #556ee6;
  }
  .topnav .arrow-down::after {
    right: 15px;
    position: absolute;
  }
}
@media (min-width: 992px) {
  body[data-layout=horizontal][data-topbar=light] .navbar-brand-box .logo {
    display: var(--bs-display-block);
  }
  body[data-layout=horizontal][data-topbar=light] .navbar-brand-box .logo-light {
    display: var(--bs-display-none);
  }
  body[data-layout=horizontal][data-topbar=light] .topnav {
    background-color: #556ee6;
  }
  body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.6);
  }
  body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav .nav-link:focus, body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav .nav-link:hover {
    color: rgba(255, 255, 255, 0.9);
  }
  body[data-layout=horizontal][data-topbar=light] .topnav .navbar-nav > .dropdown.active > a {
    color: rgba(255, 255, 255, 0.9) !important;
  }
}
body[data-layout=horizontal][data-topbar=colored] #page-topbar {
  background-color: #556ee6;
  -webkit-box-shadow: none;
          box-shadow: none;
}
body[data-layout=horizontal][data-topbar=colored] .logo {
  display: none;
}
body[data-layout=horizontal][data-topbar=colored] .logo-light {
  display: block;
}
body[data-layout=horizontal][data-topbar=colored] .app-search .form-control {
  background-color: rgba(var(--bs-topbar-search-bg), 0.07);
  color: #fff;
}
body[data-layout=horizontal][data-topbar=colored] .app-search span,
body[data-layout=horizontal][data-topbar=colored] .app-search input.form-control::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
body[data-layout=horizontal][data-topbar=colored] .header-item {
  color: var(--bs-header-dark-item-color);
}
body[data-layout=horizontal][data-topbar=colored] .header-item:hover {
  color: var(--bs-header-dark-item-color);
}
body[data-layout=horizontal][data-topbar=colored] .navbar-header .dropdown .show.header-item {
  background-color: rgba(255, 255, 255, 0.1);
}
body[data-layout=horizontal][data-topbar=colored] .navbar-header .waves-effect .waves-ripple {
  background: rgba(255, 255, 255, 0.4);
}
body[data-layout=horizontal][data-topbar=colored] .noti-icon i {
  color: var(--bs-header-dark-item-color);
}
@media (min-width: 992px) {
  body[data-layout=horizontal][data-topbar=colored] .topnav {
    background-color: #556ee6;
  }
  body[data-layout=horizontal][data-topbar=colored] .topnav .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.6);
  }
  body[data-layout=horizontal][data-topbar=colored] .topnav .navbar-nav .nav-link:focus, body[data-layout=horizontal][data-topbar=colored] .topnav .navbar-nav .nav-link:hover {
    color: rgba(255, 255, 255, 0.9);
  }
  body[data-layout=horizontal][data-topbar=colored] .topnav .navbar-nav > .dropdown.active > a {
    color: rgba(255, 255, 255, 0.9) !important;
  }
}

body[data-layout-size=boxed] {
  background-color: var(--bs-boxed-body-bg);
}
body[data-layout-size=boxed] #layout-wrapper {
  background-color: var(--bs-body-bg);
  max-width: 1300px;
  margin: 0 auto;
  -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
          box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
}
body[data-layout-size=boxed] #page-topbar {
  max-width: 1300px;
  margin: 0 auto;
}
body[data-layout-size=boxed] .footer {
  margin: 0 auto;
  max-width: calc(1300px - 250px);
}
body[data-layout-size=boxed].vertical-collpsed .footer {
  max-width: calc(1300px - 70px);
}

body[data-layout=horizontal][data-layout-size=boxed] #page-topbar, body[data-layout=horizontal][data-layout-size=boxed] #layout-wrapper, body[data-layout=horizontal][data-layout-size=boxed] .footer {
  max-width: 100%;
}
body[data-layout=horizontal][data-layout-size=boxed] .container-fluid, body[data-layout=horizontal][data-layout-size=boxed] .navbar-header {
  max-width: 1300px;
}

@media (min-width: 992px) {
  body[data-layout-scrollable=true] #page-topbar, body[data-layout-scrollable=true] .vertical-menu {
    position: absolute;
  }
}
@media (min-width: 992px) {
  body[data-layout-scrollable=true][data-layout=horizontal] #page-topbar, body[data-layout-scrollable=true][data-layout=horizontal] .topnav {
    position: absolute;
  }
}

/*!
 * Waves v0.7.6
 * http://fian.my.id/Waves 
 * 
 * Copyright 2014-2018 Alfiana E. Sibuea and other contributors 
 * Released under the MIT license 
 * https://github.com/fians/Waves/blob/master/LICENSE */
.waves-effect {
  position: relative;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.waves-effect .waves-ripple {
  position: absolute;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  opacity: 0;
  background: rgba(0, 0, 0, 0.2);
  background: radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  -webkit-transition-property: -webkit-transform, opacity;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  -webkit-transform: scale(0) translate(0, 0);
  transform: scale(0) translate(0, 0);
  pointer-events: none;
}

.waves-effect.waves-light .waves-ripple {
  background: rgba(255, 255, 255, 0.4);
  background: radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
}

.waves-effect.waves-classic .waves-ripple {
  background: rgba(0, 0, 0, 0.2);
}

.waves-effect.waves-classic.waves-light .waves-ripple {
  background: rgba(255, 255, 255, 0.4);
}

.waves-notransition {
  -webkit-transition: none !important;
  transition: none !important;
}

.waves-button,
.waves-circle {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

.waves-button,
.waves-button:hover,
.waves-button:visited,
.waves-button-input {
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: none;
  outline: none;
  color: inherit;
  background-color: rgba(0, 0, 0, 0);
  font-size: 1em;
  line-height: 1em;
  text-align: center;
  text-decoration: none;
  z-index: 1;
}

.waves-button {
  padding: 0.85em 1.1em;
  border-radius: 0.2em;
}

.waves-button-input {
  margin: 0;
  padding: 0.85em 1.1em;
}

.waves-input-wrapper {
  border-radius: 0.2em;
  vertical-align: bottom;
}

.waves-input-wrapper.waves-button {
  padding: 0;
}

.waves-input-wrapper .waves-button-input {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}

.waves-circle {
  text-align: center;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  border-radius: 50%;
}

.waves-float {
  -webkit-mask-image: none;
  -webkit-box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
  -webkit-transition: all 300ms;
  transition: all 300ms;
}

.waves-float:active {
  -webkit-box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
}

.waves-block {
  display: block;
}

.waves-effect.waves-light .waves-ripple {
  background-color: rgba(255, 255, 255, 0.4);
}

.waves-effect.waves-primary .waves-ripple {
  background-color: rgba(85, 110, 230, 0.4);
}

.waves-effect.waves-success .waves-ripple {
  background-color: rgba(52, 195, 143, 0.4);
}

.waves-effect.waves-info .waves-ripple {
  background-color: rgba(80, 165, 241, 0.4);
}

.waves-effect.waves-warning .waves-ripple {
  background-color: rgba(241, 180, 76, 0.4);
}

.waves-effect.waves-danger .waves-ripple {
  background-color: rgba(244, 106, 106, 0.4);
}

.avatar-xs {
  height: 2rem;
  width: 2rem;
}

.avatar-sm {
  height: 3rem;
  width: 3rem;
}

.avatar-md {
  height: 4.5rem;
  width: 4.5rem;
}

.avatar-lg {
  height: 6rem;
  width: 6rem;
}

.avatar-xl {
  height: 7.5rem;
  width: 7.5rem;
}

.avatar-title {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #556ee6;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: 500;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}

.avatar-group {
  padding-left: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.avatar-group .avatar-group-item {
  margin-left: -12px;
  border: 2px solid var(--bs-secondary-bg);
  border-radius: 50%;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.avatar-group .avatar-group-item:hover {
  position: relative;
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}

.custom-accordion .accordion-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 7px;
  background-color: var(--bs-tertiary-bg);
  padding: 12px 20px;
  color: var(--bs-body-color);
  font-weight: 600;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.custom-accordion .accordion-list.collapsed i.accor-plus-icon:before {
  content: "\f0415";
}
.custom-accordion .accordion-list .accor-plus-icon {
  display: inline-block;
  font-size: 16px;
  height: 24px;
  width: 24px;
  line-height: 22px;
  background-color: var(--bs-secondary-bg);
  text-align: center;
  border-radius: 50%;
}
.custom-accordion a.collapsed i.accor-down-icon:before {
  content: "\f0140";
}
.custom-accordion .card-body {
  color: var(--prefixsecondary-color);
}

.font-size-10 {
  font-size: 10px !important;
}

.font-size-11 {
  font-size: 11px !important;
}

.font-size-12 {
  font-size: 12px !important;
}

.font-size-13 {
  font-size: 13px !important;
}

.font-size-14 {
  font-size: 14px !important;
}

.font-size-15 {
  font-size: 15px !important;
}

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

.font-size-17 {
  font-size: 17px !important;
}

.font-size-18 {
  font-size: 18px !important;
}

.font-size-20 {
  font-size: 20px !important;
}

.font-size-22 {
  font-size: 22px !important;
}

.font-size-24 {
  font-size: 24px !important;
}

.social-list-item {
  height: 2rem;
  width: 2rem;
  line-height: calc(2rem - 4px);
  display: block;
  border: 2px solid #adb5bd;
  border-radius: 50%;
  color: #adb5bd;
  text-align: center;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.social-list-item:hover {
  color: var(--bs-secondary-color);
  background-color: #eff2f7;
}

.w-xs {
  min-width: 80px;
}

.w-sm {
  min-width: 95px;
}

.w-md {
  min-width: 110px;
}

.w-lg {
  min-width: 140px;
}

.w-xl {
  min-width: 160px;
}

.alert-dismissible .btn-close {
  font-size: 10px;
  padding: 1.05rem 1.25rem;
}

.chartjs-chart {
  max-height: 300px;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bs-secondary-bg);
  z-index: 9999;
}

#status {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -20px 0 0 -20px;
}

.spinner-chase {
  margin: 0 auto;
  width: 40px;
  height: 40px;
  position: relative;
  -webkit-animation: spinner-chase 2.5s infinite linear both;
          animation: spinner-chase 2.5s infinite linear both;
}

.chase-dot {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: chase-dot 2s infinite ease-in-out both;
          animation: chase-dot 2s infinite ease-in-out both;
}
.chase-dot:before {
  content: "";
  display: block;
  width: 25%;
  height: 25%;
  background-color: #556ee6;
  border-radius: 100%;
  -webkit-animation: chase-dot-before 2s infinite ease-in-out both;
          animation: chase-dot-before 2s infinite ease-in-out both;
}
.chase-dot:nth-child(1) {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s;
}
.chase-dot:nth-child(1):before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s;
}
.chase-dot:nth-child(2) {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
.chase-dot:nth-child(2):before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
.chase-dot:nth-child(3) {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
}
.chase-dot:nth-child(3):before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
}
.chase-dot:nth-child(4) {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
}
.chase-dot:nth-child(4):before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
}
.chase-dot:nth-child(5) {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s;
}
.chase-dot:nth-child(5):before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s;
}
.chase-dot:nth-child(6) {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}
.chase-dot:nth-child(6):before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}

@-webkit-keyframes spinner-chase {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spinner-chase {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes chase-dot {
  80%, 100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes chase-dot {
  80%, 100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes chase-dot-before {
  50% {
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
  }
  100%, 0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes chase-dot-before {
  50% {
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
  }
  100%, 0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
[type=tel]::-webkit-input-placeholder, [type=url]::-webkit-input-placeholder, [type=email]::-webkit-input-placeholder, [type=number]::-webkit-input-placeholder {
  text-align: left;
}
[type=tel]::-moz-placeholder, [type=url]::-moz-placeholder, [type=email]::-moz-placeholder, [type=number]::-moz-placeholder {
  text-align: left;
}
[type=tel]:-ms-input-placeholder, [type=url]:-ms-input-placeholder, [type=email]:-ms-input-placeholder, [type=number]:-ms-input-placeholder {
  text-align: left;
}
[type=tel]::-ms-input-placeholder, [type=url]::-ms-input-placeholder, [type=email]::-ms-input-placeholder, [type=number]::-ms-input-placeholder {
  text-align: left;
}
[type=tel]::placeholder,
[type=url]::placeholder,
[type=email]::placeholder,
[type=number]::placeholder {
  text-align: left;
}

.form-check {
  position: relative;
  text-align: left;
}

.form-check-right {
  padding-left: 0;
  display: inline-block;
  padding-right: 1.5em;
}
.form-check-right .form-check-input {
  float: right;
  margin-left: 0;
  margin-right: -1.5em;
}
.form-check-right .form-check-label {
  display: block;
}

.form-checkbox-outline .form-check-input {
  border-width: 2px;
  background-color: var(--bs-secondary-bg);
}
.form-checkbox-outline .form-check-input:active {
  -webkit-filter: none;
          filter: none;
}
.form-checkbox-outline .form-check-input:checked {
  background-color: var(--bs-secondary-bg) !important;
}
.form-checkbox-outline .form-check-input:checked[type=checkbox] {
  background-image: none;
}
.form-checkbox-outline .form-check-input:checked:after {
  position: absolute;
  content: "\f012c";
  font-family: "Material Design Icons";
  top: -4px !important;
  left: 1px;
  /*rtl: -4px */
  font-size: 16px;
  color: var(--bs-body-color);
}

.form-radio-outline .form-check-input {
  background-color: var(--bs-secondary-bg);
  position: relative;
}
.form-radio-outline .form-check-input:active {
  -webkit-filter: none;
          filter: none;
}
.form-radio-outline .form-check-input:checked {
  background-color: var(--bs-secondary-bg) !important;
}
.form-radio-outline .form-check-input:checked[type=checkbox] {
  background-image: none;
}
.form-radio-outline .form-check-input:checked:after {
  position: absolute;
  content: "";
  top: 3px !important;
  left: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.form-check-primary .form-check-input:checked {
  background-color: #556ee6;
  border-color: #556ee6;
}

.form-radio-primary .form-check-input:checked {
  border-color: #556ee6;
  background-color: #556ee6;
}
.form-radio-primary .form-check-input:checked:after {
  background-color: #556ee6;
}

.form-check-secondary .form-check-input:checked {
  background-color: #74788d;
  border-color: #74788d;
}

.form-radio-secondary .form-check-input:checked {
  border-color: #74788d;
  background-color: #74788d;
}
.form-radio-secondary .form-check-input:checked:after {
  background-color: #74788d;
}

.form-check-success .form-check-input:checked {
  background-color: #34c38f;
  border-color: #34c38f;
}

.form-radio-success .form-check-input:checked {
  border-color: #34c38f;
  background-color: #34c38f;
}
.form-radio-success .form-check-input:checked:after {
  background-color: #34c38f;
}

.form-check-info .form-check-input:checked {
  background-color: #50a5f1;
  border-color: #50a5f1;
}

.form-radio-info .form-check-input:checked {
  border-color: #50a5f1;
  background-color: #50a5f1;
}
.form-radio-info .form-check-input:checked:after {
  background-color: #50a5f1;
}

.form-check-warning .form-check-input:checked {
  background-color: #f1b44c;
  border-color: #f1b44c;
}

.form-radio-warning .form-check-input:checked {
  border-color: #f1b44c;
  background-color: #f1b44c;
}
.form-radio-warning .form-check-input:checked:after {
  background-color: #f1b44c;
}

.form-check-danger .form-check-input:checked {
  background-color: #f46a6a;
  border-color: #f46a6a;
}

.form-radio-danger .form-check-input:checked {
  border-color: #f46a6a;
  background-color: #f46a6a;
}
.form-radio-danger .form-check-input:checked:after {
  background-color: #f46a6a;
}

.form-check-pink .form-check-input:checked {
  background-color: #e83e8c;
  border-color: #e83e8c;
}

.form-radio-pink .form-check-input:checked {
  border-color: #e83e8c;
  background-color: #e83e8c;
}
.form-radio-pink .form-check-input:checked:after {
  background-color: #e83e8c;
}

.form-check-light .form-check-input:checked {
  background-color: #eff2f7;
  border-color: #eff2f7;
}

.form-radio-light .form-check-input:checked {
  border-color: #eff2f7;
  background-color: #eff2f7;
}
.form-radio-light .form-check-input:checked:after {
  background-color: #eff2f7;
}

.form-check-dark .form-check-input:checked {
  background-color: #343a40;
  border-color: #343a40;
}

.form-radio-dark .form-check-input:checked {
  border-color: #343a40;
  background-color: #343a40;
}
.form-radio-dark .form-check-input:checked:after {
  background-color: #343a40;
}

.form-check,
.form-check-input,
.form-check-label {
  cursor: pointer;
  margin-bottom: 0;
}

.form-switch-md {
  padding-left: 2.5rem;
  min-height: 24px;
  line-height: 24px;
}
.form-switch-md .form-check-input {
  width: 40px;
  height: 20px;
  left: -0.5rem;
  position: relative;
}
.form-switch-md .form-check-label {
  vertical-align: middle;
}

.form-switch-lg {
  padding-left: 2.75rem;
  min-height: 28px;
  line-height: 28px;
}
.form-switch-lg .form-check-input {
  width: 48px;
  height: 24px;
  left: -0.75rem;
  position: relative;
}

.input-group-text {
  margin-bottom: 0px;
}

.mini-stats-wid .mini-stat-icon {
  overflow: hidden;
  position: relative;
}
.mini-stats-wid .mini-stat-icon:before, .mini-stats-wid .mini-stat-icon:after {
  content: "";
  position: absolute;
  width: 8px;
  height: 54px;
  background-color: rgba(255, 255, 255, 0.1);
  left: 16px;
  -webkit-transform: rotate(32deg);
          transform: rotate(32deg);
  top: -5px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.mini-stats-wid .mini-stat-icon::after {
  left: -12px;
  width: 12px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.mini-stats-wid:hover .mini-stat-icon::after {
  left: 60px;
}

.mfp-popup-form {
  max-width: 1140px;
}

.mfp-close {
  color: var(--bs-body-color) !important;
}

.bs-example-modal {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 1;
  display: block;
}

[dir=rtl] .modal-open {
  padding-left: 0px !important;
}

.icon-demo-content {
  text-align: center;
  color: #adb5bd;
}
.icon-demo-content i {
  display: block;
  font-size: 24px;
  margin-bottom: 16px;
  color: var(--prefixsecondary-color);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.icon-demo-content .col-lg-4 {
  margin-top: 24px;
}
.icon-demo-content .col-lg-4:hover i {
  color: #556ee6;
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}

.grid-structure .grid-container {
  background-color: var(--bs-gray-100);
  margin-top: 10px;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 10px 20px;
}

.card-radio {
  background-color: var(--bs-secondary-bg);
  border: 2px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-radio:hover {
  cursor: pointer;
}

.card-radio-label {
  display: block;
}

.card-radio-input {
  display: none;
}
.card-radio-input:checked + .card-radio {
  border-color: #556ee6 !important;
}

.navs-carousel .owl-nav {
  margin-top: 16px;
}
.navs-carousel .owl-nav button {
  width: 30px;
  height: 30px;
  line-height: 28px !important;
  font-size: 20px !important;
  border-radius: 50% !important;
  background-color: rgba(85, 110, 230, 0.25) !important;
  color: #556ee6 !important;
  margin: 4px 8px !important;
}

@media print {
  .vertical-menu,
  .right-bar,
  .page-title-box,
  .navbar-header,
  .footer {
    display: none !important;
  }
  .card-body,
  .main-content,
  .right-bar,
  .page-content,
  body {
    padding: 0;
    margin: 0;
  }
  .card {
    border: 0;
  }
}
[data-simplebar] {
  position: relative;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.simplebar-wrapper {
  overflow: hidden;
  width: inherit;
  height: inherit;
  max-width: inherit;
  max-height: inherit;
}

.simplebar-mask {
  direction: inherit;
  position: absolute;
  overflow: hidden;
  padding: 0;
  margin: 0;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: auto !important;
  height: auto !important;
  z-index: 0;
}

.simplebar-offset {
  direction: inherit !important;
  -webkit-box-sizing: inherit !important;
          box-sizing: inherit !important;
  resize: none !important;
  position: absolute;
  top: 0;
  left: 0 !important;
  bottom: 0;
  right: 0 !important;
  padding: 0;
  margin: 0;
  -webkit-overflow-scrolling: touch;
}

.simplebar-content-wrapper {
  direction: inherit;
  -webkit-box-sizing: border-box !important;
          box-sizing: border-box !important;
  position: relative;
  display: block;
  height: 100%; /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */
  width: auto;
  visibility: visible;
  overflow: auto; /* Scroll on this element otherwise element can't have a padding applied properly */
  max-width: 100%; /* Not required for horizontal scroll to trigger */
  max-height: 100%; /* Needed for vertical scroll to trigger */
  scrollbar-width: none;
  padding: 0px !important;
}

.simplebar-content-wrapper::-webkit-scrollbar,
.simplebar-hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.simplebar-content:before,
.simplebar-content:after {
  content: " ";
  display: table;
}

.simplebar-placeholder {
  max-height: 100%;
  max-width: 100%;
  width: 100%;
  pointer-events: none;
}

.simplebar-height-auto-observer-wrapper {
  -webkit-box-sizing: inherit !important;
          box-sizing: inherit !important;
  height: 100%;
  width: 100%;
  max-width: 1px;
  position: relative;
  float: left;
  max-height: 1px;
  overflow: hidden;
  z-index: -1;
  padding: 0;
  margin: 0;
  pointer-events: none;
  -webkit-box-flex: inherit;
      -ms-flex-positive: inherit;
          flex-grow: inherit;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-preferred-size: 0;
      flex-basis: 0;
}

.simplebar-height-auto-observer {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
  display: block;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 1000%;
  width: 1000%;
  min-height: 1px;
  min-width: 1px;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.simplebar-track {
  z-index: 1;
  position: absolute;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

[data-simplebar].simplebar-dragging .simplebar-content {
  pointer-events: none;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}

[data-simplebar].simplebar-dragging .simplebar-track {
  pointer-events: all;
}

.simplebar-scrollbar {
  position: absolute;
  right: 2px;
  width: 4px;
  min-height: 10px;
}

.simplebar-scrollbar:before {
  position: absolute;
  content: "";
  background: #a2adb7;
  border-radius: 7px;
  left: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}

.simplebar-scrollbar.simplebar-visible:before {
  /* When hovered, remove all transitions from drag handle */
  opacity: 0.5;
  -webkit-transition: opacity 0s linear;
  transition: opacity 0s linear;
}

.simplebar-track.simplebar-vertical {
  top: 0;
  width: 11px;
}

.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
  top: 2px;
  bottom: 2px;
}

.simplebar-track.simplebar-horizontal {
  left: 0;
  height: 11px;
}

.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
  height: 100%;
  left: 2px;
  right: 2px;
}

.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
  right: auto;
  left: 0;
  top: 2px;
  height: 7px;
  min-height: 0;
  min-width: 10px;
  width: auto;
}

/* Rtl support */
[data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical {
  right: auto;
  left: 0;
}

.hs-dummy-scrollbar-size {
  direction: rtl;
  position: fixed;
  opacity: 0;
  visibility: hidden;
  height: 500px;
  width: 500px;
  overflow-y: hidden;
  overflow-x: scroll;
}

.simplebar-hide-scrollbar {
  position: fixed;
  left: 0;
  visibility: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
}

.custom-scroll {
  height: 100%;
}

/* ==============
  Calendar
===================*/
.lnb-calendars-item {
  display: inline-block;
  margin-right: 7px;
}

input[type=checkbox].tui-full-calendar-checkbox-round + span {
  margin-right: 4px;
  margin-left: 0;
}

.tui-full-calendar-layout,
.tui-full-calendar-timegrid-timezone {
  background-color: var(--bs-secondary-bg) !important;
}

.tui-full-calendar-dayname-container,
.tui-full-calendar-left,
.tui-full-calendar-splitter,
.tui-full-calendar-time-date,
.tui-full-calendar-weekday-grid-line,
.tui-full-calendar-timegrid-timezone,
.tui-full-calendar-timegrid-gridline {
  border-color: var(--bs-border-color) !important;
}

.tui-full-calendar-weekday-exceed-in-week {
  text-align: center;
  width: 30px;
  height: 30px;
  line-height: 28px;
  border-radius: 4px;
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

.tui-full-calendar-timegrid-hour {
  color: var(--bs-body-color) !important;
}

.tui-full-calendar-weekday-schedule-title {
  color: var(--bs-emphasis-color) !important;
}
.tui-full-calendar-weekday-schedule-title .tui-full-calendar-time-schedule {
  font-weight: 600;
}

.tui-full-calendar-popup-container {
  background-color: var(--bs-secondary-bg) !important;
  border-color: var(--bs-border-color) !important;
}

.tui-full-calendar-dropdown:hover .tui-full-calendar-dropdown-button {
  border-color: var(--bs-border-color);
}

.tui-full-calendar-popup-section-item:hover, .tui-full-calendar-popup-section-item:focus {
  border-color: var(--bs-border-color);
}

.tui-full-calendar-arrow-bottom .tui-full-calendar-popup-arrow-fill {
  border-top-color: var(--bs-border-color) !important;
}

.tui-full-calendar-arrow-top .tui-full-calendar-popup-arrow-fill {
  border-bottom-color: var(--bs-border-color) !important;
}

.tui-full-calendar-arrow-bottom .tui-full-calendar-popup-arrow-borde {
  border-bottom-color: var(--bs-border-color) !important;
}

.tui-full-calendar-button {
  color: var(--bs-emphasis-color);
  background-color: var(--bs-secondary-bg) !important;
  border-color: var(--bs-border-color);
}

.tui-full-calendar-popup-section-item {
  border-color: var(--bs-border-color);
}

.tui-full-calendar-month-dayname,
.tui-full-calendar-weekday-border {
  border-top-color: var(--bs-border-color) !important;
}

.tui-full-calendar-arrow-top .tui-full-calendar-popup-arrow-border {
  border-bottom-color: var(--bs-border-color) !important;
}

.tui-full-calendar-dropdown-menu {
  border-color: var(--bs-border-color) !important;
}

.tui-full-calendar-dropdown-menu-item,
.tui-full-calendar-dropdown-menu {
  background-color: var(--bs-secondary-bg) !important;
}

.tui-full-calendar-arrow-bottom .tui-full-calendar-popup-arrow-border {
  border-top-color: var(--bs-border-color);
}

.tui-full-calendar-content {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-emphasis-color) !important;
}

.tui-full-calendar-confirm {
  background-color: #f46a6a !important;
  color: #fff !important;
}
.tui-full-calendar-confirm:hover {
  background-color: #c35555 !important;
  color: #fff !important;
}

.tui-full-calendar-month-dayname-item span {
  color: var(--bs-emphasis-color) !important;
}

.tui-full-calendar-weekday-grid-line.tui-full-calendar-near-month-day.tui-full-calendar-extra-date .tui-full-calendar-weekday-grid-header .tui-full-calendar-weekday-grid-date {
  color: var(--bs-secondary-color) !important;
}

.tui-full-calendar-weekday-grid-line.tui-full-calendar-near-month-day .tui-full-calendar-weekday-grid-header .tui-full-calendar-weekday-grid-date {
  color: var(--bs-emphasis-color) !important;
}

/* ==============
  Calendar
===================*/
.fc td,
.fc th {
  border: var(--bs-border-width) solid var(--bs-border-color);
}

.fc .fc-toolbar h2 {
  font-size: 16px;
  line-height: 30px;
  text-transform: uppercase;
}
@media (max-width: 767.98px) {
  .fc .fc-toolbar .fc-left,
  .fc .fc-toolbar .fc-right,
  .fc .fc-toolbar .fc-center {
    float: none;
    display: block;
    text-align: center;
    clear: both;
    margin: 10px 0;
  }
  .fc .fc-toolbar > * > * {
    float: none;
  }
  .fc .fc-toolbar .fc-today-button {
    display: none;
  }
}
.fc .fc-toolbar .btn {
  text-transform: capitalize;
}
.fc .fc-col-header-cell-cushion {
  color: var(--bs-body-color);
}
.fc .fc-daygrid-day-number {
  color: var(--bs-body-color);
}

.fc-daygrid-event-dot {
  display: none;
}

.fc-prev-button,
.fc-next-button {
  position: relative;
  padding: 6px 8px !important;
}

.fc-toolbar-chunk .fc-button-group .fc-button {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  -webkit-box-shadow: none;
          box-shadow: none;
}
.fc-toolbar-chunk .fc-button-group .fc-button:hover, .fc-toolbar-chunk .fc-button-group .fc-button.active {
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.fc-toolbar-chunk .fc-today-button {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}

@media (max-width: 575.98px) {
  .fc-toolbar {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
  }
}

.fc th.fc-widget-header {
  background: #f6f6f6;
  color: #495057;
  line-height: 20px;
  padding: 10px 0;
  text-transform: uppercase;
  font-weight: 600;
}

.fc-unthemed .fc-content,
.fc-unthemed .fc-divider,
.fc-unthemed .fc-list-heading td,
.fc-unthemed .fc-list-view,
.fc-unthemed .fc-popover,
.fc-unthemed .fc-row,
.fc-unthemed tbody,
.fc-unthemed td,
.fc-unthemed th,
.fc-unthemed thead {
  border-color: #f6f6f6;
}
.fc-unthemed td.fc-today {
  background: #f6f8fa;
}

.fc-button {
  background: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
  color: #495057;
  text-transform: capitalize;
  -webkit-box-shadow: none;
          box-shadow: none;
  padding: 6px 12px !important;
  height: auto !important;
}

.fc-state-down,
.fc-state-active,
.fc-state-disabled {
  background-color: #556ee6;
  color: #fff;
  text-shadow: none;
}

.fc-event {
  border-radius: 2px;
  border: none;
  cursor: move;
  font-size: 0.8125rem;
  margin: 5px 7px;
  padding: 5px 5px;
  text-align: center;
  color: #fff;
}
.fc-event.bg-dark {
  background-color: var(--bs-secondary-color) !important;
}
.fc-event.bg-dark .fc-event-time {
  color: var(--bs-secondary-bg) !important;
}
.fc-event.bg-dark .fc-event-title {
  color: var(--bs-secondary-bg) !important;
}

.fc-event,
.fc-event-dot {
  background-color: #556ee6;
}

.fc-event .fc-content {
  color: #fff;
}

#external-events .external-event {
  text-align: left;
  padding: 8px 16px;
  margin-left: 0;
  margin-right: 0;
}

.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end.bg-dark .fc-content {
  color: #eff2f7;
}

[dir=rtl] .fc-header-toolbar {
  direction: ltr !important;
}
[dir=rtl] .fc-toolbar > * > :not(:first-child) {
  margin-left: 0.75em;
}

.fc-theme-standard .fc-scrollgrid {
  border-color: var(--bs-border-color);
}

.fc .fc-daygrid-week-number {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

.fc .fc-daygrid-more-link {
  padding: 5px;
  font-size: 11px;
  font-weight: 600;
}

.fc .fc-daygrid-more-link:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.fc .fc-popover-header {
  padding: 6px 12px;
}

.fc-theme-standard .fc-popover-header {
  background: var(--bs-body-bg);
}

.fc-theme-standard .fc-popover {
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
}

/* ==============
  Druafula
===================*/
.task-box {
  border: 1px solid var(--bs-border-color);
}

.gu-transit {
  border: 1px dashed var(--bs-border-color) !important;
  background-color: var(--bs-gray-200) !important;
}

#session-timeout-dialog .close {
  display: none;
}
#session-timeout-dialog .countdown-holder {
  color: #f46a6a;
  font-weight: 500;
}
#session-timeout-dialog .btn-default {
  background-color: #fff;
  color: #f46a6a;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.irs {
  font-family: var(--bs-font-sans-serif);
}

.irs--square {
  cursor: pointer;
}
.irs--square .irs-bar,
.irs--square .irs-to,
.irs--square .irs-from,
.irs--square .irs-single {
  background: #556ee6 !important;
  font-size: 11px;
}
.irs--square .irs-to:before,
.irs--square .irs-from:before,
.irs--square .irs-single:before {
  border-top-color: #556ee6;
}
.irs--square .irs-line {
  background: var(--bs-tertiary-bg);
  border-color: var(--bs-tertiary-bg);
}
.irs--square .irs-grid-text {
  font-size: 11px;
  color: var(--bs-secondary-color);
}
.irs--square .irs-min,
.irs--square .irs-max {
  color: var(--bs-secondary-color);
  background: var(--bs-tertiary-bg);
  font-size: 11px;
}
.irs--square .irs-handle {
  border: 2px solid #556ee6;
  width: 12px;
  height: 12px;
  top: 26px;
  background-color: var(--bs-secondary-bg) !important;
  cursor: pointer;
}
.irs--square .irs-handle:active {
  cursor: pointer;
}
.irs--square .irs-grid-pol {
  background-color: var(--bs-secondary-color);
}

.swal2-container .swal2-title {
  font-size: 20px;
  font-weight: 500;
}

.swal2-modal {
  font-size: 14px;
}

.swal2-icon.swal2-question {
  border-color: #50a5f1;
  color: #50a5f1;
}
.swal2-icon.swal2-success [class^=swal2-success-line] {
  background-color: #34c38f;
}
.swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(52, 195, 143, 0.3);
}
.swal2-icon.swal2-warning {
  border-color: #f1b44c;
  color: #f1b44c;
}

.swal2-styled:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.swal2-progress-steps .swal2-progress-step {
  background: #556ee6;
}
.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step {
  background: #556ee6;
}
.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step, .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step-line {
  background: rgba(85, 110, 230, 0.3);
}
.swal2-progress-steps .swal2-progress-step-line {
  background: #556ee6;
}

.swal2-loader {
  border-color: #556ee6 transparent #556ee6 transparent;
}

.swal2-popup {
  background: var(--bs-secondary-bg);
}

.swal2-title, .swal2-html-container {
  color: var(--bs-emphasis-color);
}

.swal2-file,
.swal2-input,
.swal2-textarea {
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
.swal2-file:focus,
.swal2-input:focus,
.swal2-textarea:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
  border-color: var(--bs-border-color);
}

div:where(.swal2-container) div:where(.swal2-popup) {
  color: var(--bs-secondary-color);
}

.symbol {
  border-color: var(--bs-secondary-bg);
}

.rating-symbol-background, .rating-symbol-foreground {
  font-size: 24px;
}

.symbol-empty {
  background-color: var(--bs-gray-400);
}

.rating-symbol-foreground {
  top: 0px;
}

.rating-star > span {
  display: inline-block;
  vertical-align: middle;
}
.rating-star > span.badge {
  margin-left: 4px;
}

/* =============
   Notification
============= */
#toast-container > div {
  -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
          box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
  opacity: 1;
}
#toast-container > div:hover {
  -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
          box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
  opacity: 0.9;
}
#toast-container.toast-top-full-width > div, #toast-container.toast-bottom-full-width > div {
  min-width: 96%;
  margin: 4px auto;
}

.toast-primary {
  border: 2px solid #556ee6 !important;
  background-color: rgba(85, 110, 230, 0.8) !important;
}

.toast-secondary {
  border: 2px solid #74788d !important;
  background-color: rgba(116, 120, 141, 0.8) !important;
}

.toast-success {
  border: 2px solid #34c38f !important;
  background-color: rgba(52, 195, 143, 0.8) !important;
}

.toast-info {
  border: 2px solid #50a5f1 !important;
  background-color: rgba(80, 165, 241, 0.8) !important;
}

.toast-warning {
  border: 2px solid #f1b44c !important;
  background-color: rgba(241, 180, 76, 0.8) !important;
}

.toast-danger {
  border: 2px solid #f46a6a !important;
  background-color: rgba(244, 106, 106, 0.8) !important;
}

.toast-pink {
  border: 2px solid #e83e8c !important;
  background-color: rgba(232, 62, 140, 0.8) !important;
}

.toast-light {
  border: 2px solid #eff2f7 !important;
  background-color: rgba(239, 242, 247, 0.8) !important;
}

.toast-dark {
  border: 2px solid #343a40 !important;
  background-color: rgba(52, 58, 64, 0.8) !important;
}

.toast-error {
  background-color: rgba(244, 106, 106, 0.8);
  border: 2px solid #f46a6a;
}

.toastr-options {
  padding: 24px;
  background-color: var(--bs-tertiary-bg);
  margin-bottom: 0;
  border: 1px solid var(--bs-border-color);
}

.error {
  color: #f46a6a;
}

.parsley-error {
  border-color: #f46a6a;
}

.parsley-errors-list {
  display: none;
  margin: 0;
  padding: 0;
}
.parsley-errors-list.filled {
  display: block;
}
.parsley-errors-list > li {
  font-size: 12px;
  list-style: none;
  color: #f46a6a;
  margin-top: 5px;
}

.select2-container .select2-selection--single {
  background-color: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color-translucent);
  height: 38px;
}
.select2-container .select2-selection--single:focus {
  outline: none;
}
.select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 36px;
  padding-left: 0.75rem;
  color: var(--bs-secondary-color);
}
.select2-container .select2-selection--single .select2-selection__arrow {
  height: 34px;
  width: 34px;
  right: 3px;
}
.select2-container .select2-selection--single .select2-selection__arrow b {
  border-color: var(--bs-gray-500) transparent transparent transparent;
  border-width: 6px 6px 0 6px;
}
.select2-container .select2-selection--single .select2-selection__placeholder {
  color: var(--bs-body-color);
}

[dir=rtl] .select2-selection__rendered {
  text-align: end;
}

.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--bs-gray-500) transparent !important;
  border-width: 0 6px 6px 6px !important;
}

.select2-container--default .select2-search--dropdown {
  padding: 10px;
  background-color: var(--bs-secondary-bg);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--bs-border-color-translucent);
  background-color: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
  outline: none;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #556ee6;
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--bs-light);
  color: var(--bs-emphasis-color);
}
.select2-container--default .select2-results__option[aria-selected=true]:hover {
  background-color: #556ee6;
  color: #fff;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  border-right: none;
  color: var(--bs-emphasis-color);
}

.select2-results__option {
  padding: 6px 12px;
}

.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered {
  padding-left: 0.75rem;
}

.select2-dropdown {
  border: 1px solid var(--bs-border-color);
  background-color: var(--bs-secondary-bg);
  -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
          box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
}

.select2-search input {
  border: 1px solid var(--bs-border-color);
}

.select2-container .select2-selection--multiple {
  min-height: 38px;
  background-color: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color-translucent) !important;
  padding: 2px 0.75rem;
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
  padding: 2px 0.75rem;
}
.select2-container .select2-selection--multiple .select2-search__field {
  border: 0;
  color: var(--bs-emphasis-color);
  margin: 0;
  margin-top: 7px;
}
.select2-container .select2-selection--multiple .select2-search__field::-webkit-input-placeholder {
  color: var(--bs-secondary-color);
}
.select2-container .select2-selection--multiple .select2-search__field::-moz-placeholder {
  color: var(--bs-secondary-color);
}
.select2-container .select2-selection--multiple .select2-search__field:-ms-input-placeholder {
  color: var(--bs-secondary-color);
}
.select2-container .select2-selection--multiple .select2-search__field::-ms-input-placeholder {
  color: var(--bs-secondary-color);
}
.select2-container .select2-selection--multiple .select2-search__field::placeholder {
  color: var(--bs-secondary-color);
}
.select2-container .select2-selection--multiple .select2-selection__choice {
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 1px;
  padding: 0 7px;
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
  padding: 0;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--bs-border-color-translucent);
}
.select2-container--default .select2-results__group {
  font-weight: 600;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  padding-left: 16px;
}

.select2-result-repository__avatar {
  float: left;
  width: 60px;
  margin-right: 10px;
}
.select2-result-repository__avatar img {
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.select2-result-repository__statistics {
  margin-top: 7px;
}

.select2-result-repository__forks,
.select2-result-repository__stargazers,
.select2-result-repository__watchers {
  display: inline-block;
  font-size: 11px;
  margin-right: 1em;
  color: var(--bs-secondary-color);
}
.select2-result-repository__forks .fa,
.select2-result-repository__stargazers .fa,
.select2-result-repository__watchers .fa {
  margin-right: 4px;
}
.select2-result-repository__forks .fa.fa-flash::before,
.select2-result-repository__stargazers .fa.fa-flash::before,
.select2-result-repository__watchers .fa.fa-flash::before {
  content: "\f0e7";
  font-family: "Font Awesome 5 Free";
}

.select2-results__option--highlighted .select2-result-repository__forks,
.select2-results__option--highlighted .select2-result-repository__stargazers,
.select2-results__option--highlighted .select2-result-repository__watchers {
  color: rgba(255, 255, 255, 0.8);
}

.select2-result-repository__meta {
  overflow: hidden;
}

.img-flag {
  margin-right: 7px;
  height: 15px;
  width: 18px;
}

.select2-container--default .select2-results__option--selected {
  background-color: var(--bs-tertiary-bg);
}

/* CSS Switch */
input[switch] {
  display: none;
}
input[switch] + label {
  font-size: 1em;
  line-height: 1;
  width: 56px;
  height: 24px;
  background-color: #ced4da;
  background-image: none;
  border-radius: 2rem;
  padding: 0.16667rem;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  position: relative;
  font-weight: 500;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
input[switch] + label:before {
  color: #343a40;
  content: attr(data-off-label);
  display: block;
  font-family: inherit;
  font-weight: 500;
  font-size: 12px;
  line-height: 21px;
  position: absolute;
  right: 1px;
  margin: 3px;
  top: -2px;
  text-align: center;
  min-width: 1.66667rem;
  overflow: hidden;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
input[switch] + label:after {
  content: "";
  position: absolute;
  left: 3px;
  background-color: #eff2f7;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-radius: 2rem;
  height: 20px;
  width: 20px;
  top: 2px;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
input[switch]:checked + label {
  background-color: #556ee6;
}

input[switch]:checked + label {
  background-color: #556ee6;
}
input[switch]:checked + label:before {
  color: #fff;
  content: attr(data-on-label);
  right: auto;
  left: 3px;
}
input[switch]:checked + label:after {
  left: 33px;
  background-color: #eff2f7;
}

input[switch=bool] + label {
  background-color: #f46a6a;
}

input[switch=bool] + label:before, input[switch=bool]:checked + label:before,
input[switch=default]:checked + label:before {
  color: #fff;
}

input[switch=bool]:checked + label {
  background-color: #34c38f;
}

input[switch=default]:checked + label {
  background-color: #a2a2a2;
}

input[switch=primary]:checked + label {
  background-color: #556ee6;
}

input[switch=success]:checked + label {
  background-color: #34c38f;
}

input[switch=info]:checked + label {
  background-color: #50a5f1;
}

input[switch=warning]:checked + label {
  background-color: #f1b44c;
}

input[switch=danger]:checked + label {
  background-color: #f46a6a;
}

input[switch=dark]:checked + label {
  background-color: #343a40;
}
input[switch=dark]:checked + label:before {
  color: #eff2f7;
}

.square-switch {
  margin-right: 7px;
}
.square-switch input[switch] + label, .square-switch input[switch] + label:after {
  border-radius: 4px;
}

.sp-container {
  background-color: var(--bs-secondary-bg);
}
.sp-container button {
  padding: 0.25rem 0.5rem;
  font-size: 0.71094rem;
  border-radius: 0.2rem;
  font-weight: 400;
  color: #343a40;
}
.sp-container button.sp-palette-toggle {
  background-color: #eff2f7;
}
.sp-container button.sp-choose {
  background-color: #34c38f;
  margin-left: 5px;
  margin-right: 0;
}

.sp-palette-container {
  border-right: 1px solid #eff2f7;
}

.sp-input {
  background-color: var(--bs-secondary-bg);
  border-color: var(--bs-border-color-translucent) !important;
  color: var(--bs-emphasis-color);
}
.sp-input:focus {
  outline: none;
}

[dir=rtl] .sp-alpha {
  direction: ltr;
}
[dir=rtl] .sp-original-input-container .sp-add-on {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
}
[dir=rtl] input.spectrum.with-add-on {
  border: 1px solid var(--bs-border-color-translucent);
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: var(--bs-border-radius);
  border-bottom-right-radius: var(--bs-border-radius);
}

/* Timepicker */
.bootstrap-timepicker-widget table td a {
  color: var(--bs-emphasis-color);
}
.bootstrap-timepicker-widget table td a:hover {
  background-color: transparent;
  border-color: transparent;
  border-radius: 4px;
  color: #556ee6;
  text-decoration: none;
}
.bootstrap-timepicker-widget table td input {
  width: 32px;
  height: 32px;
  border: 0;
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  background-color: var(--bs-secondary-bg);
}
.bootstrap-timepicker-widget.dropdown-menu:after {
  border-bottom-color: var(--bs-gray-200);
}
.bootstrap-timepicker-widget.timepicker-orient-bottom:after {
  border-top-color: var(--bs-gray-200);
}

.timepicker-orient-top {
  top: calc(1.5em + 0.94rem + calc(var(--bs-border-width) * 2)) !important;
}

.timepicker-orient-bottom {
  top: auto !important;
  bottom: calc(1.5em + 0.94rem + calc(var(--bs-border-width) * 2)) !important;
}

.bootstrap-timepicker-widget {
  left: 0 !important;
  right: auto !important;
}

.bootstrap-timepicker-widget.timepicker-orient-left:before {
  left: 6px;
  right: auto;
}
.bootstrap-timepicker-widget.timepicker-orient-left::after {
  left: 7px;
  right: auto;
}

.datepicker {
  border: 1px solid var(--bs-border-color);
  padding: 8px;
  z-index: 999 !important;
}
.datepicker table tr th {
  font-weight: 500;
}
.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td .active.disabled, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.today, .datepicker table tr td.today:hover, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover, .datepicker table tr td.selected, .datepicker table tr td.selected:hover, .datepicker table tr td.selected.disabled, .datepicker table tr td.selected.disabled:hover,
.datepicker table tr td span.active.active, .datepicker table tr td span.active:hover.active {
  background-color: #556ee6 !important;
  background-image: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #fff !important;
}
.datepicker table tr td.day.focused, .datepicker table tr td.day:hover,
.datepicker table tr td span.focused,
.datepicker table tr td span:hover {
  background: var(--bs-light);
}
.datepicker table tr td.new, .datepicker table tr td.old,
.datepicker table tr td span.new,
.datepicker table tr td span.old {
  color: var(--bs-gray-500);
  opacity: 0.6;
}
.datepicker table tr td.range, .datepicker table tr td.range.disabled, .datepicker table tr td.range.disabled:hover, .datepicker table tr td.range:hover {
  background-color: var(--bs-tertiary-bg);
}

.table-condensed > thead > tr > th, .table-condensed > tbody > tr > td {
  padding: 7px;
}

.bootstrap-datepicker-inline .datepicker-inline {
  width: auto !important;
  display: inline-block;
}

.datepicker-container {
  border: 1px solid var(--bs-border-color);
  -webkit-box-shadow: none;
          box-shadow: none;
  background-color: var(--bs-secondary-bg);
}
.datepicker-container.datepicker-inline {
  width: 212px;
}

.datepicker {
  color: var(--bs-secondary-color);
}
.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover {
  background: var(--bs-light);
}

.datepicker-panel > ul > li {
  background-color: var(--bs-secondary-bg);
  border-radius: 4px;
}
.datepicker-panel > ul > li.picked, .datepicker-panel > ul > li.picked:hover {
  background-color: rgba(85, 110, 230, 0.25);
  color: #556ee6;
}
.datepicker-panel > ul > li.highlighted, .datepicker-panel > ul > li.highlighted:hover, .datepicker-panel > ul > li:hover {
  background-color: #556ee6;
  color: #fff;
}
.datepicker-panel > ul > li.muted, .datepicker-panel > ul > li.muted:hover {
  color: var(--bs-gray-500);
  opacity: 0.6;
}
.datepicker-panel > ul[data-view=week] > li {
  font-weight: 500;
}
.datepicker-panel > ul[data-view=week] > li, .datepicker-panel > ul[data-view=week] > li:hover {
  background-color: var(--bs-secondary-bg);
}

.bootstrap-touchspin.input-group > .input-group-prepend > .btn, .bootstrap-touchspin.input-group > .input-group-prepend > .input-group-text {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.bootstrap-touchspin.input-group > .input-group-append > .btn, .bootstrap-touchspin.input-group > .input-group-append > .input-group-text {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

form .tox-tinymce {
  border: 1px solid var(--bs-border-color) !important;
}
form .tox-toolbar-overlord {
  background-color: var(--bs-secondary-bg) !important;
}
form .tox :not(svg):not(rect) {
  color: #fff !important;
}
form .tox:not(.tox-tinymce-inline) .tox-editor-header {
  -webkit-box-shadow: var(--bs-box-shadow);
          box-shadow: var(--bs-box-shadow);
}
form .tox .tox-mbtn {
  color: #74788d;
}
form .tox .tox-mbtn:hover:not(:disabled):not(.tox-mbtn--active) {
  background-color: #f8f9fa;
}
form .tox .tox-tbtn:hover {
  color: rgba(73, 80, 87, 0.5);
  background-color: #f8f9fa;
}
form .tox .tox-tbtn--disabled svg,
form .tox .tox-tbtn--disabled:hover svg,
form .tox .tox-tbtn:disabled svg,
form .tox .tox-tbtn:disabled:hover svg {
  fill: rgba(73, 80, 87, 0.5);
}
form .tox .tox-tbtn--bespoke {
  background-color: #f8f9fa;
}
form .tox .tox-editor-header {
  background-color: var(--bs-secondary-bg) !important;
}
form .tox .tox-menubar {
  background-color: var(--bs-secondary-bg) !important;
}
form .tox .tox-menubar .tox-mbtn {
  background-color: var(--bs-tertiary-bg) !important;
}
form .tox .tox-menubar .tox-mbtn .tox-mbtn__select-label {
  color: #fff !important;
}
form .tox .tox-toolbar__primary {
  background-color: var(--bs-secondary-bg) !important;
}
form .tox .tox-toolbar__primary .tox-toolbar__group .tox-tbtn {
  background-color: var(--bs-tertiary-bg) !important;
}
form .tox .tox-toolbar__primary .tox-toolbar__group .tox-tbtn .tox-icon svg {
  fill: #fff !important;
}
form .tox .tox-edit-area {
  background-color: var(--bs-secondary-bg) !important;
}
form .tox .tox-promotion {
  background-color: var(--bs-secondary-bg) !important;
}
form .tox .tox-statusbar {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color) !important;
}

.tox .tox-collection--list .tox-collection__group {
  border-color: var(--bs-border-color) !important;
}

.tox-collection {
  background-color: var(--bs-secondary-bg) !important;
}

.tox-collection__item-label {
  color: #fff !important;
}

.tox .tox-collection--list .tox-collection__item--enabled {
  background-color: var(--bs-tertiary-bg) !important;
}

.tox-collection__item-icon svg {
  fill: var(--bs-body-color) !important;
}

/* Dropzone */
.dropzone {
  min-height: 230px;
  border: 2px dashed var(--bs-border-color);
  background: var(--bs-secondary-bg);
  border-radius: 6px;
}
.dropzone .dz-message {
  font-size: 24px;
  width: 100%;
  margin: 3rem 0;
}

.form-wizard-wrapper label {
  font-size: 14px;
  text-align: right;
}

.wizard .steps > ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
@media (max-width: 1199.98px) {
  .wizard .steps > ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.wizard .steps > ul > a, .wizard .steps > ul > li {
  -ms-flex-preferred-size: 0;
      flex-basis: 0;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.wizard .steps > ul > li {
  width: 100%;
}
.wizard .steps > ul > li a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--bs-secondary-color);
  font-weight: 500;
  background-color: rgba(85, 110, 230, 0.1);
}
.wizard .steps > ul .current-info {
  position: absolute;
  left: -999em;
}
.wizard .steps .number {
  display: inline-block;
  width: 38px;
  height: 38px;
  line-height: 34px;
  border: 2px solid #556ee6;
  color: #556ee6;
  text-align: center;
  border-radius: 50%;
  margin-right: 0.5rem;
}
.wizard .steps .current a, .wizard .steps .current a:active, .wizard .steps .current a:hover {
  background-color: rgba(85, 110, 230, 0.2);
  color: var(--bs-emphasis-color);
}
.wizard .steps .current a .number, .wizard .steps .current a:active .number, .wizard .steps .current a:hover .number {
  background-color: #556ee6;
  color: #fff;
}
.wizard > .content {
  background-color: transparent;
  padding: 14px;
  margin-top: 0;
  border-radius: 0;
  min-height: 150px;
}
.wizard > .content > .title {
  position: absolute;
  left: -999em;
}
.wizard > .content > .body {
  width: 100%;
  height: 100%;
  padding: 14px 0 0;
  position: static;
}
.wizard > .actions {
  position: relative;
  display: block;
  text-align: right;
  width: 100%;
}
.wizard > .actions > ul {
  display: block;
  text-align: right;
  padding-left: 0;
}
.wizard > .actions > ul > li {
  display: inline-block;
  margin: 0 0.5em;
}
.wizard > .actions a, .wizard > .actions a:active, .wizard > .actions a:hover {
  background-color: #556ee6;
  border-radius: 4px;
  padding: 8px 15px;
  color: #fff;
}
.wizard > .actions .disabled a, .wizard > .actions .disabled a:active, .wizard > .actions .disabled a:hover {
  opacity: 0.65;
  background-color: #556ee6;
  color: #fff;
  cursor: not-allowed;
}
.wizard.vertical-wizard {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.wizard.vertical-wizard .steps > ul {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.wizard.vertical-wizard .steps > ul > li {
  width: 100% !important;
}
.wizard.vertical-wizard .steps, .wizard.vertical-wizard .content, .wizard.vertical-wizard .actions {
  width: 100%;
}
@media (min-width: 1200px) {
  .wizard.vertical-wizard .steps {
    width: 25%;
  }
}
.wizard.vertical-wizard .content {
  padding: 24px;
}
@media (min-width: 1200px) {
  .wizard.vertical-wizard .content {
    width: 75%;
    padding: 12px 24px;
  }
}
.wizard.vertical-wizard .content > .body {
  padding: 0;
}

/* 
Datatable
*/
div.dataTables_wrapper div.dataTables_filter {
  text-align: right;
}
@media (max-width: 767px) {
  div.dataTables_wrapper div.dataTables_filter {
    text-align: center;
  }
}
div.dataTables_wrapper div.dataTables_filter input {
  margin-left: 0.5em;
  margin-right: 0;
}

.table.dataTable,
table.dataTable {
  border-collapse: collapse !important;
}
.table.dataTable.dtr-inline.collapsed > tbody > tr > td,
table.dataTable.dtr-inline.collapsed > tbody > tr > td {
  position: relative;
}
.table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control {
  padding-left: 30px;
}
.table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before {
  top: 50%;
  left: 5px;
  height: 14px;
  width: 14px;
  margin-top: -9px;
  display: block;
  position: absolute;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 14px;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  text-align: center;
  text-indent: 0 !important;
  line-height: 14px;
  content: "+";
  background-color: #556ee6;
}

.table-rep-plugin .btn-toolbar {
  display: block;
}
.table-rep-plugin .table-responsive {
  border: none !important;
}
.table-rep-plugin .btn-group .btn-default {
  background-color: #74788d;
  color: #eff2f7;
  border: 1px solid #74788d;
}
.table-rep-plugin .btn-group .btn-default.btn-primary {
  background-color: #556ee6;
  border-color: #556ee6;
  color: #fff;
  -webkit-box-shadow: 0 0 0 2px rgba(85, 110, 230, 0.5);
          box-shadow: 0 0 0 2px rgba(85, 110, 230, 0.5);
}
.table-rep-plugin .btn-group.pull-right {
  float: right;
}
.table-rep-plugin .btn-group.pull-right .dropdown-menu {
  right: 0;
  -webkit-transform: none !important;
          transform: none !important;
  top: 100% !important;
}
.table-rep-plugin tbody th {
  font-size: 14px;
  font-weight: normal;
}
.table-rep-plugin .checkbox-row {
  padding-left: 40px;
  color: var(--bs-body-color) !important;
}
.table-rep-plugin .checkbox-row:hover {
  background-color: #f6f8fa !important;
}
.table-rep-plugin .checkbox-row label {
  display: inline-block;
  padding-left: 5px;
  position: relative;
}
.table-rep-plugin .checkbox-row label::before {
  -o-transition: 0.3s ease-in-out;
  -webkit-transition: 0.3s ease-in-out;
  background-color: #fff;
  border-radius: 3px;
  border: 1px solid #f6f6f6;
  content: "";
  display: inline-block;
  height: 17px;
  left: 0;
  margin-left: -20px;
  position: absolute;
  transition: 0.3s ease-in-out;
  width: 17px;
  outline: none !important;
}
.table-rep-plugin .checkbox-row label::after {
  color: #eff2f7;
  display: inline-block;
  font-size: 11px;
  height: 16px;
  left: 0;
  margin-left: -20px;
  padding-left: 3px;
  padding-top: 1px;
  position: absolute;
  top: -1px;
  width: 16px;
}
.table-rep-plugin .checkbox-row input[type=checkbox] {
  cursor: pointer;
  opacity: 0;
  z-index: 1;
  outline: none !important;
}
.table-rep-plugin .checkbox-row input[type=checkbox]:disabled + label {
  opacity: 0.65;
}
.table-rep-plugin .checkbox-row input[type=checkbox]:focus + label::before {
  outline-offset: -2px;
  outline: none;
}
.table-rep-plugin .checkbox-row input[type=checkbox]:checked + label::after {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
.table-rep-plugin .checkbox-row input[type=checkbox]:disabled + label::before {
  background-color: #f8f9fa;
  cursor: not-allowed;
}
.table-rep-plugin .checkbox-row input[type=checkbox]:checked + label::before {
  background-color: #556ee6;
  border-color: #556ee6;
}
.table-rep-plugin .checkbox-row input[type=checkbox]:checked + label::after {
  color: #fff;
}
.table-rep-plugin .fixed-solution .sticky-table-header {
  top: 70px !important;
  background-color: #556ee6;
}
.table-rep-plugin .fixed-solution .sticky-table-header table {
  color: #fff;
}
.table-rep-plugin table.focus-on tbody tr.focused th,
.table-rep-plugin table.focus-on tbody tr.focused td,
.table-rep-plugin .sticky-table-header {
  background: #556ee6;
  border-color: #556ee6;
  color: #fff;
}
.table-rep-plugin table.focus-on tbody tr.focused th table,
.table-rep-plugin table.focus-on tbody tr.focused td table,
.table-rep-plugin .sticky-table-header table {
  color: #fff;
}
.table-rep-plugin table.focus-on tbody tr.unfocused th,
.table-rep-plugin table.focus-on tfoot tr.unfocused th,
.table-rep-plugin table.focus-on tbody tr.unfocused td,
.table-rep-plugin table.focus-on tfoot tr.unfocused td {
  color: var(--bs-body-color);
}

@media (min-width: 992px) {
  body[data-layout=horizontal] .fixed-solution .sticky-table-header {
    top: 120px !important;
  }
}

.table-edits input, .table-edits select {
  height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--bs-border-color-translucent);
  background-color: var(--bs-secondary-bg);
  color: var(--bs-emphasis-color);
  border-radius: var(--bs-border-radius);
}
.table-edits input:focus, .table-edits select:focus {
  outline: none;
  border-color: rgb(var(--bs-body-color-rgb), 0.2);
}

.apex-charts {
  min-height: 10px !important;
}
.apex-charts text {
  font-family: var(--bs-font-sans-serif) !important;
  fill: var(--bs-gray-500);
}
.apex-charts .apexcharts-canvas {
  margin: 0 auto;
}

.apexcharts-tooltip-title,
.apexcharts-tooltip-text {
  font-family: var(--bs-font-sans-serif) !important;
}

.apexcharts-legend-series {
  font-weight: 500;
}

.apexcharts-gridline {
  pointer-events: none;
  stroke: var(--bs-border-color);
}

.apexcharts-legend-text {
  color: #74788d !important;
  font-family: var(--bs-font-sans-serif) !important;
  font-size: 13px !important;
}

.apexcharts-pie-label {
  fill: #fff !important;
}

.apexcharts-yaxis text,
.apexcharts-xaxis text {
  font-family: var(--bs-font-sans-serif) !important;
  fill: var(--bs-secondary-color);
}

.apexcharts-gridline {
  stroke: var(--bs-border-color);
}

.apexcharts-radialbar-track.apexcharts-track path {
  stroke: var(--bs-border-color);
}

.apexcharts-tooltip {
  background-color: var(--bs-secondary-bg) !important;
  border: 1px solid var(--bs-border-color) !important;
}
.apexcharts-tooltip .apexcharts-tooltip-title {
  background-color: var(--bs-border-color) !important;
  border-bottom: 1px solid var(--bs-border-color) !important;
}

.apexcharts-pie-area {
  stroke: var(--bs-secondary-bg);
}

.apexcharts-grid-borders line {
  stroke: var(--bs-border-color);
}

.apexcharts-pie-label {
  fill: var(--bs-white) !important;
}

.apexcharts-xaxis-tick {
  stroke: var(--bs-border-color);
}

.e-charts {
  height: 350px;
}

/* Flot chart */
.flot-charts-height {
  height: 320px;
}

.flotTip {
  padding: 8px 12px;
  background-color: rgba(52, 58, 64, 0.9);
  z-index: 100;
  color: #f8f9fa;
  -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
          box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
  border-radius: 4px;
}

.legendLabel {
  color: #adb5bd;
}

.jqstooltip {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  width: auto !important;
  height: auto !important;
  background-color: #343a40 !important;
  -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
          box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  padding: 5px 10px !important;
  border-radius: 3px;
  border-color: #212529 !important;
}

.jqsfield {
  color: #eff2f7 !important;
  font-size: 12px !important;
  line-height: 18px !important;
  font-family: var(--bs-font-sans-serif) !important;
  font-weight: 500 !important;
}

.gmaps, .gmaps-panaroma {
  height: 300px !important;
  background: #f8f9fa;
  border-radius: 3px;
}

.gmaps-overlay {
  display: block;
  text-align: center;
  color: #fff;
  font-size: 16px;
  line-height: 40px;
  background: #556ee6;
  border-radius: 4px;
  padding: 10px 20px;
}

.gmaps-overlay_arrow {
  left: 50%;
  margin-left: -16px;
  width: 0;
  height: 0;
  position: absolute;
}
.gmaps-overlay_arrow.above {
  bottom: -15px;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 16px solid #556ee6;
}
.gmaps-overlay_arrow.below {
  top: -15px;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 16px solid #556ee6;
}

.jvectormap-label {
  border: none;
  background: #343a40;
  color: #f8f9fa;
  font-family: var(--bs-font-sans-serif);
  font-size: 0.8125rem;
  padding: 5px 8px;
}

.leaflet-map {
  height: 300px;
}
.leaflet-map.leaflet-container {
  z-index: 99;
}

.home-btn {
  position: absolute;
  top: 15px;
  right: 25px;
}

.auth-logo .auth-logo {
  display: var(--bs-display-block);
}
.auth-logo .auth-logo-light {
  display: var(--bs-display-none);
}

.auth-body-bg {
  background-color: var(--bs-secondary-bg);
}

.auth-pass-inputgroup input[type=input] + .btn .mdi-eye-outline:before {
  content: "\f06d1";
}

.auth-full-bg {
  background-color: rgba(85, 110, 230, 0.25);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (min-width: 1200px) {
  .auth-full-bg {
    height: 100vh;
  }
}
.auth-full-bg::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
}
.auth-full-bg .bg-overlay {
  background: url("../images/bg-auth-overlay.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.auth-full-page-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (min-width: 1200px) {
  .auth-full-page-content {
    min-height: 100vh;
  }
}

.auth-review-carousel.owl-theme .owl-dots .owl-dot span {
  background-color: rgba(85, 110, 230, 0.25);
}
.auth-review-carousel.owl-theme .owl-dots .owl-dot.active span, .auth-review-carousel.owl-theme .owl-dots .owl-dot:hover span {
  background-color: #556ee6;
}

.search-box .form-control {
  border-radius: 30px;
  padding-left: 40px;
}
.search-box .search-icon {
  font-size: 16px;
  position: absolute;
  left: 13px;
  top: 0;
  line-height: 38px;
}

.product-list li a {
  display: block;
  padding: 4px 0px;
  color: var(--bs-body-color);
}

.product-view-nav.nav-pills .nav-item {
  margin-left: 4px;
}
.product-view-nav.nav-pills .nav-link {
  width: 36px;
  height: 36px;
  font-size: 16px;
  padding: 0;
  line-height: 36px;
  text-align: center;
  border-radius: 50%;
}

.product-ribbon {
  position: absolute;
  right: 0px;
  top: 0px;
}

.product-detai-imgs .nav .nav-link {
  margin: 7px 0px;
}
.product-detai-imgs .nav .nav-link.active {
  background-color: var(--bs-tertiary-bg);
}

.product-color a {
  display: inline-block;
  text-align: center;
  color: var(--bs-body-color);
}
.product-color a .product-color-item {
  margin: 7px;
}
.product-color a.active, .product-color a:hover {
  color: #556ee6;
}
.product-color a.active .product-color-item, .product-color a:hover .product-color-item {
  border-color: #556ee6 !important;
}

.visa-card .visa-logo {
  line-height: 0.5;
}
.visa-card .visa-pattern {
  position: absolute;
  font-size: 385px;
  color: rgba(255, 255, 255, 0.05);
  line-height: 0.4;
  right: 0px;
  bottom: 0px;
}

.checkout-tabs .nav-pills .nav-link {
  margin-bottom: 24px;
  text-align: center;
  background-color: var(--bs-secondary-bg);
  -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
          box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
}
.checkout-tabs .nav-pills .nav-link.active {
  background-color: #556ee6;
}
.checkout-tabs .nav-pills .nav-link .check-nav-icon {
  font-size: 36px;
}

/* ==============
  Email
===================*/
.email-leftbar {
  width: 236px;
  float: left;
  padding: 20px;
  border-radius: 5px;
}

.email-rightbar {
  margin-left: 260px;
}

.chat-user-box p.user-title {
  color: var(--bs-emphasis-color);
  font-weight: 500;
}
.chat-user-box p {
  font-size: 12px;
}

@media (max-width: 767px) {
  .email-leftbar {
    float: none;
    width: 100%;
  }
  .email-rightbar {
    margin: 0;
  }
}
.mail-list a {
  display: block;
  color: var(--bs-secondary-color);
  line-height: 24px;
  padding: 8px 5px;
}
.mail-list a.active {
  color: #f46a6a;
  font-weight: 500;
}

.message-list {
  display: block;
  padding-left: 0;
}
.message-list li {
  position: relative;
  display: block;
  height: 50px;
  line-height: 50px;
  cursor: default;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.message-list li a {
  color: var(--bs-secondary-color);
}
.message-list li:hover {
  background: var(--bs-tertiary-bg);
  -webkit-transition-duration: 0.05s;
          transition-duration: 0.05s;
}
.message-list li .col-mail {
  float: left;
  position: relative;
}
.message-list li .col-mail-1 {
  width: 320px;
}
.message-list li .col-mail-1 .star-toggle,
.message-list li .col-mail-1 .checkbox-wrapper-mail,
.message-list li .col-mail-1 .dot {
  display: block;
  float: left;
}
.message-list li .col-mail-1 .dot {
  border: 4px solid transparent;
  border-radius: 100px;
  margin: 22px 26px 0;
  height: 0;
  width: 0;
  line-height: 0;
  font-size: 0;
}
.message-list li .col-mail-1 .checkbox-wrapper-mail {
  margin: 15px 10px 0 20px;
}
.message-list li .col-mail-1 .star-toggle {
  margin-top: 18px;
  margin-left: 5px;
}
.message-list li .col-mail-1 .title {
  position: absolute;
  top: 0;
  left: 110px;
  right: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 0;
}
.message-list li .col-mail-2 {
  position: absolute;
  top: 0;
  left: 320px;
  right: 0;
  bottom: 0;
}
.message-list li .col-mail-2 .subject,
.message-list li .col-mail-2 .date {
  position: absolute;
  top: 0;
}
.message-list li .col-mail-2 .subject {
  left: 0;
  right: 200px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.message-list li .col-mail-2 .date {
  right: 0;
  width: 170px;
  padding-left: 80px;
}
.message-list li.active, .message-list li.active:hover {
  -webkit-box-shadow: inset 3px 0 0 #556ee6;
          box-shadow: inset 3px 0 0 #556ee6;
}
.message-list li.unread {
  background-color: var(--bs-tertiary-bg);
  font-weight: 500;
  color: var(--bs-body-color);
}
.message-list li.unread a {
  color: var(--bs-body-color);
  font-weight: 500;
}
.message-list .checkbox-wrapper-mail {
  cursor: pointer;
  height: 20px;
  width: 20px;
  position: relative;
  display: inline-block;
  background-color: var(--bs-secondary-bg);
  -webkit-box-shadow: inset 0 0 0 1px var(--bs-border-color-translucent);
          box-shadow: inset 0 0 0 1px var(--bs-border-color-translucent);
  border-radius: 1px;
}
.message-list .checkbox-wrapper-mail input {
  opacity: 0;
  cursor: pointer;
}
.message-list .checkbox-wrapper-mail input:checked ~ label {
  opacity: 1;
}
.message-list .checkbox-wrapper-mail label {
  position: absolute;
  height: 20px;
  width: 20px;
  left: 0;
  cursor: pointer;
  opacity: 0;
  margin-bottom: 0;
  -webkit-transition-duration: 0.05s;
          transition-duration: 0.05s;
  top: 0;
}
.message-list .checkbox-wrapper-mail label:before {
  content: "\f012c";
  font-family: "Material Design Icons";
  top: 0;
  height: 20px;
  color: var(--bs-body-color);
  width: 20px;
  position: absolute;
  margin-top: -16px;
  left: 4px;
  font-size: 13px;
}

@media (max-width: 575.98px) {
  .message-list li .col-mail-1 {
    width: 200px;
  }
}
@media (min-width: 1200px) {
  .filemanager-sidebar {
    min-width: 230px;
    max-width: 230px;
  }
}
@media (min-width: 1366px) {
  .filemanager-sidebar {
    min-width: 280px;
    max-width: 280px;
  }
}

.categories-list {
  padding: 4px 0;
}
.categories-list li a {
  display: block;
  padding: 8px 12px;
  color: var(--bs-body-color);
  font-weight: 500;
}
.categories-list li.active a {
  color: #556ee6;
}
.categories-list li ul {
  padding-left: 16px;
}
.categories-list li ul li a {
  padding: 4px 12px;
  color: var(--bs-secondary-color);
  font-size: 13px;
  font-weight: 400;
}

@media (min-width: 992px) {
  .chat-leftsidebar {
    min-width: 260px;
  }
}
@media (min-width: 1200px) {
  .chat-leftsidebar {
    min-width: 380px;
  }
}
.chat-leftsidebar .chat-leftsidebar-nav .nav {
  background-color: var(--bs-secondary-bg);
}
.chat-leftsidebar .chat-leftsidebar-nav .tab-content {
  min-height: 488px;
}

.chat-noti-dropdown.active:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #f46a6a;
  border-radius: 50%;
  right: 0;
}
.chat-noti-dropdown .btn {
  padding: 6px;
  -webkit-box-shadow: none;
          box-shadow: none;
  font-size: 20px;
}

.chat-search-box .form-control {
  border: 0;
}

.chat-list {
  margin: 0;
}
.chat-list li.active a {
  background-color: var(--bs-secondary-bg);
  border-color: transparent;
  -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
          box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
}
.chat-list li a {
  display: block;
  padding: 14px 16px;
  color: var(--bs-secondary-color);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  border-top: 1px solid var(--bs-border-color);
  border-radius: 4px;
}
.chat-list li a:hover {
  background-color: var(--bs-secondary-bg);
  border-color: transparent;
  -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
          box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
}

.user-chat-nav .dropdown .nav-btn {
  color: var(--bs-body-color);
  height: 40px;
  width: 40px;
  line-height: 42px;
  -webkit-box-shadow: none;
          box-shadow: none;
  padding: 0;
  font-size: 16px;
  background-color: var(--bs-light);
  border-radius: 50%;
  border: none;
}
.user-chat-nav .dropdown .dropdown-menu {
  -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
          box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
  border: 1px solid var(--bs-border-color);
}

.chat-conversation li {
  clear: both;
}
.chat-conversation .chat-day-title {
  position: relative;
  text-align: center;
  margin-bottom: 24px;
}
.chat-conversation .chat-day-title .title {
  background-color: var(--bs-secondary-bg);
  position: relative;
  z-index: 1;
  padding: 6px 24px;
}
.chat-conversation .chat-day-title:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  left: 0;
  right: 0;
  background-color: var(--bs-border-color);
  top: 10px;
}
.chat-conversation .chat-day-title .badge {
  font-size: 12px;
}
.chat-conversation .conversation-list {
  margin-bottom: 24px;
  display: inline-block;
  position: relative;
}
.chat-conversation .conversation-list .ctext-wrap {
  padding: 12px 24px;
  background-color: rgba(85, 110, 230, 0.1);
  border-radius: 8px 8px 8px 0px;
  overflow: hidden;
}
.chat-conversation .conversation-list .ctext-wrap .conversation-name {
  font-weight: 600;
  color: #556ee6;
  margin-bottom: 4px;
}
.chat-conversation .conversation-list .dropdown {
  float: right;
}
.chat-conversation .conversation-list .dropdown .dropdown-toggle {
  font-size: 18px;
  padding: 4px;
  color: var(--bs-secondary-color);
}
@media (max-width: 575.98px) {
  .chat-conversation .conversation-list .dropdown .dropdown-toggle {
    display: none;
  }
}
.chat-conversation .conversation-list .dropdown .dropdown-menu {
  -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
          box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
  border: 1px solid var(--bs-border-color);
}
.chat-conversation .conversation-list .chat-time {
  font-size: 12px;
}
.chat-conversation .right .conversation-list {
  float: right;
}
.chat-conversation .right .conversation-list .ctext-wrap {
  background-color: var(--bs-light);
  text-align: right;
  border-radius: 8px 8px 0px 8px;
}
.chat-conversation .right .conversation-list .dropdown {
  float: left;
}
.chat-conversation .right .conversation-list.last-chat .conversation-list:before {
  right: 0;
  left: auto;
}
.chat-conversation .last-chat .conversation-list:before {
  content: "\f0009";
  font-family: "Material Design Icons";
  position: absolute;
  color: #556ee6;
  right: 0;
  bottom: 0;
  font-size: 16px;
}
@media (max-width: 575.98px) {
  .chat-conversation .last-chat .conversation-list:before {
    display: none;
  }
}

.chat-input-section {
  border-top: 1px solid var(--bs-border-color);
}

.chat-input {
  border-radius: 30px;
  background-color: var(--bs-light) !important;
  border-color: var(--bs-light) !important;
  padding-right: 120px;
}

.chat-input-links {
  position: absolute;
  right: 16px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.chat-input-links li a {
  font-size: 16px;
  line-height: 36px;
  padding: 0px 4px;
  display: inline-block;
}

@media (max-width: 575.98px) {
  .chat-send {
    min-width: auto;
  }
}

.project-list-table {
  border-collapse: separate;
  border-spacing: 0 12px;
}
.project-list-table tr {
  background-color: var(--bs-secondary-bg);
}

.contact-links a {
  color: var(--bs-body-color);
}

.profile-user-wid {
  margin-top: -26px;
}

@media (min-width: 576px) {
  .currency-value {
    position: relative;
  }
  .currency-value:after {
    content: "\f04e1";
    font-family: "Material Design Icons";
    font-size: 24px;
    position: absolute;
    width: 45px;
    height: 45px;
    line-height: 45px;
    border-radius: 50%;
    text-align: center;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    background-color: #556ee6;
    color: #fff;
    z-index: 9;
    right: -34px;
  }
}
.crypto-buy-sell-nav-content {
  border: 2px solid var(--bs-border-color);
  border-top: 0;
}

.kyc-doc-verification .dropzone {
  min-height: 180px;
}
.kyc-doc-verification .dropzone .dz-message {
  margin: 24px 0px;
}

/******************
    Ico Landing
*******************/
.section {
  position: relative;
  padding-top: 80px;
  padding-bottom: 80px;
}
.section.bg-white {
  background-color: var(--bs-secondary-bg) !important;
}

.small-title {
  color: var(--bs-secondary-color);
  margin-bottom: 8px;
}

.navigation {
  padding: 0 16px;
  width: 100%;
  z-index: 999;
  margin-bottom: 0px;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 991.98px) {
  .navigation {
    background-color: var(--bs-topnav-bg);
  }
}
.navigation .navbar-logo {
  line-height: 70px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.navigation .navbar-logo .logo {
  display: none;
}
@media (max-width: 991.98px) {
  .navigation .navbar-logo .logo {
    display: block;
  }
}
.navigation .navbar-logo .logo-light {
  display: block;
}
@media (max-width: 991.98px) {
  .navigation .navbar-logo .logo-light {
    display: none;
  }
}
.navigation .navbar-nav .nav-item .nav-link {
  color: rgba(255, 255, 255, 0.6);
  line-height: 58px;
  padding: 6px 16px;
  font-weight: 500;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
@media (max-width: 991.98px) {
  .navigation .navbar-nav .nav-item .nav-link {
    color: var(--bs-header-item-color);
  }
}
.navigation .navbar-nav .nav-item .nav-link:hover, .navigation .navbar-nav .nav-item .nav-link.active {
  color: rgba(255, 255, 255, 0.9);
}
@media (max-width: 991.98px) {
  .navigation .navbar-nav .nav-item .nav-link:hover, .navigation .navbar-nav .nav-item .nav-link.active {
    color: #556ee6;
  }
}
@media (max-width: 991.98px) {
  .navigation .navbar-nav .nav-item .nav-link {
    line-height: 28px !important;
  }
}
.navigation.nav-sticky {
  background-color: var(--bs-topnav-bg);
  -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
          box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
}
.navigation.nav-sticky .navbar-logo {
  line-height: 60px;
}
.navigation.nav-sticky .navbar-logo .logo {
  display: var(--bs-display-block);
}
.navigation.nav-sticky .navbar-logo .logo-light {
  display: var(--bs-display-none);
}
.navigation.nav-sticky .navbar-nav .nav-item .nav-link {
  line-height: 48px;
  color: var(--bs-header-item-color);
}
.navigation.nav-sticky .navbar-nav .nav-item .nav-link:hover, .navigation.nav-sticky .navbar-nav .nav-item .nav-link.active {
  color: #556ee6;
}

.bg-overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  opacity: 0.7;
  background-color: #000;
}

.hero-section {
  padding-top: 220px;
  padding-bottom: 190px;
}
.hero-section.bg-ico-hero {
  background-image: url("../images/crypto/bg-ico-hero.jpg");
  background-size: cover;
  background-position: top;
}
@media (max-width: 575.98px) {
  .hero-section {
    padding-top: 140px;
    padding-bottom: 80px;
  }
}
.hero-section .hero-title {
  font-size: 42px;
}
@media (max-width: 575.98px) {
  .hero-section .hero-title {
    font-size: 26px;
  }
}
.hero-section .ico-countdown {
  font-size: 22px;
  margin-right: -12px;
  margin-left: -12px;
}
@media (max-width: 575.98px) {
  .hero-section .ico-countdown {
    display: block;
  }
}
.hero-section .ico-countdown .coming-box {
  margin-right: 12px;
  margin-left: 12px;
  border: 1px solid var(--bs-border-color);
  border-radius: 4px;
  padding: 8px;
  background-color: var(--bs-secondary-bg);
}
@media (max-width: 575.98px) {
  .hero-section .ico-countdown .coming-box {
    display: inline-block;
    width: 40%;
    margin-bottom: 24px;
  }
}
.hero-section .ico-countdown .coming-box span {
  background-color: var(--bs-light);
  font-size: 12px;
  padding: 4px;
  margin-top: 8px;
}
.hero-section .softcap-progress {
  overflow: visible;
}
.hero-section .softcap-progress .progress-bar {
  overflow: visible;
}
.hero-section .softcap-progress .progress-label {
  position: relative;
  text-align: right;
  color: var(--bs-body-color);
  bottom: 20px;
  font-size: 12px;
  font-weight: 500;
}

.currency-price {
  position: relative;
  bottom: 40px;
}

.client-images img {
  max-height: 34px;
  width: auto !important;
  margin: 12px auto;
  opacity: 0.7;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.features-number {
  opacity: 0.1;
}

.team-box .team-social-links a {
  color: var(--bs-body-color);
  font-size: 14px;
}

.blog-box .blog-badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

.landing-footer {
  padding: 80px 0 40px;
  background-color: #2a3042;
  color: rgba(255, 255, 255, 0.5);
}
.landing-footer .footer-list-title {
  color: rgba(255, 255, 255, 0.9);
}
.landing-footer .footer-list-menu li a {
  display: block;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 14px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.landing-footer .footer-list-menu li a:hover {
  color: rgba(255, 255, 255, 0.8);
}
.landing-footer .blog-post .post {
  display: block;
  color: rgba(255, 255, 255, 0.5);
  padding: 16px 0px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.landing-footer .blog-post .post .post-title {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}
.landing-footer .blog-post .post:first-of-type {
  padding-top: 0;
}
.landing-footer .blog-post .post:last-of-type {
  padding-bottom: 0;
  border-bottom: 0;
}
.landing-footer .footer-border {
  border-color: rgba(255, 255, 255, 0.1);
}

.counter-number {
  font-size: 32px;
  font-weight: 600;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.counter-number span {
  font-size: 16px;
  font-weight: 400;
  display: block;
  padding-top: 5px;
}

.coming-box {
  width: 25%;
}

/************** Horizontal timeline **************/
.hori-timeline .events .event-list {
  text-align: center;
  display: block;
}
.hori-timeline .events .event-list .event-down-icon {
  position: relative;
}
.hori-timeline .events .event-list .event-down-icon::before {
  content: "";
  position: absolute;
  width: 100%;
  top: 16px;
  left: 0;
  right: 0;
  border-bottom: 3px dashed var(--bs-border-color);
}
.hori-timeline .events .event-list .event-down-icon .down-arrow-icon {
  position: relative;
  background-color: var(--bs-secondary-bg);
  padding: 4px;
}
.hori-timeline .events .event-list:hover .down-arrow-icon {
  -webkit-animation: fade-down 1.5s infinite linear;
          animation: fade-down 1.5s infinite linear;
}
.hori-timeline .events .event-list.active .down-arrow-icon {
  -webkit-animation: fade-down 1.5s infinite linear;
          animation: fade-down 1.5s infinite linear;
}
.hori-timeline .events .event-list.active .down-arrow-icon:before {
  content: "\ec4c";
}

/************** vertical timeline **************/
.verti-timeline {
  border-left: 3px dashed var(--bs-border-color);
  margin: 0 10px;
}
.verti-timeline .event-list {
  position: relative;
  padding: 0px 0px 40px 30px;
}
.verti-timeline .event-list .event-timeline-dot {
  position: absolute;
  left: -9px;
  top: 0px;
  z-index: 9;
  font-size: 16px;
}
.verti-timeline .event-list .event-content {
  position: relative;
  border: 2px solid var(--bs-border-color);
  border-radius: 7px;
}
.verti-timeline .event-list.active .event-timeline-dot {
  color: #556ee6;
}
.verti-timeline .event-list:last-child {
  padding-bottom: 0px;
}

.plan-box .plan-btn {
  position: relative;
}
.plan-box .plan-btn::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background: var(--bs-border-color);
  left: 0px;
  right: 0px;
  top: 12px;
}

.blog-play-icon {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  margin: 0px auto;
}

.jobs-categories a {
  color: var(--bs-body-color);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.jobs-categories a:hover {
  color: #556ee6;
}




/*Nath - custom additions*/

/* Stadium-grass page background: the white boxed content column floats on grass,
   with the grass showing in the side MARGINS outside the box (not behind content).
   - Grass is painted on <html> (the canvas): it always fills the viewport and
     renders reliably. <body> does NOT work here - every page forces
     `body { background-color: var(--white) !important }` via _topbar.cshtml and
     body-background doesn't propagate cleanly through the boxed layout.
   - <body> is made transparent (via `html body` = higher specificity, so it beats
     the _topbar `body{...!important}` rule) so the html grass shows through it in
     the margins.
   - The boxed #layout-wrapper keeps its DEFAULT white card + shadow (no override
     here), so the grass is only ever visible in the margins, never behind content.
   The green fallback colour shows grass-green (not white) if the image is ever
   blocked (e.g. by an ad-blocker). */
html {
    background-image: url('https://dzlogos.s3.amazonaws.com/bg.png') !important;
    background-repeat: repeat !important;
    background-position: top left !important;
    background-color: #2e7d32 !important;
}

html body {
    background-color: transparent !important;
}

.league-logo {
    width: 40px; /* Adjust size as needed */
    height: auto;
}



@keyframes pulseGlow {
    0% {
        box-shadow: 0px 0px 5px rgba(40, 167, 69, 0.5);
    }

    100% {
        box-shadow: 0px 0px 20px rgba(40, 167, 69, 1);
    }
}

@keyframes fadeText {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.4;
    }
}

.pulsing-glow {
    animation: pulseGlow 1.5s infinite alternate ease-in-out;
}

.live-text {
    animation: fadeText 1.5s infinite alternate ease-in-out;
}

.finished-text {
    box-shadow: none;
}



.match-status-active {
    background-color: #28a745; /* Green */
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 12px;
    display: inline-block;
    white-space: nowrap;
    animation: pulseGlow 1.2s infinite alternate ease-in-out;
    transition: opacity 0.75s ease-in-out;
}

.match-status-ft {
    background-color: #74788d; /* Grey */
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 12px;
    display: inline-block;
    white-space: nowrap;
    animation: pulseGlow 1.2s infinite alternate ease-in-out;
    transition: opacity 0.75s ease-in-out;
}


@media (max-width: 992px) {
    .hamburger-btn {
        display: block !important;
    }
}

/* Hide jQuery UI datepicker div when not in use - prevents white bar */
#ui-datepicker-div:not(:has(*)),
#ui-datepicker-div:empty {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
}

/* ========================================
   Breadcrumb Navigation
   ======================================== */
.dz-breadcrumb-nav {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 15px;
    border: 1px solid rgba(0, 113, 5, 0.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.dz-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4px;
}

.dz-breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: #6c757d;
}

.dz-breadcrumb-item a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #007105;
    text-decoration: none;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.dz-breadcrumb-item a:hover {
    background: rgba(0, 113, 5, 0.1);
    color: #005504;
    text-decoration: none;
}

.dz-breadcrumb-item a i {
    font-size: 0.8rem;
}

.dz-breadcrumb-item.active {
    color: #343a40;
    font-weight: 600;
}

.dz-breadcrumb-item.active i {
    margin-right: 6px;
    font-size: 0.8rem;
}

.dz-breadcrumb-separator {
    margin: 0 4px;
    color: #adb5bd;
    font-size: 0.65rem;
}

/* Mobile responsive */
@media (max-width: 576px) {
    .dz-breadcrumb-nav {
        padding: 10px 15px;
        margin-bottom: 10px;
    }

    .dz-breadcrumb-item {
        font-size: 0.8rem;
    }

    .dz-breadcrumb-item a {
        padding: 3px 6px;
    }

    /* Hide middle items on very small screens, show first and last */
    .dz-breadcrumb-item:not(:first-child):not(:last-child) {
        display: none;
    }

    .dz-breadcrumb-item:first-child:not(:last-child)::after {
        content: '...';
        margin: 0 8px;
        color: #adb5bd;
    }
}

/* ==========================================
   Fantasy Stats Section - Player Profile
   ========================================== */
.fantasy-stats-section {
    margin-bottom: 25px;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    border: 1px solid #dee2e6;
}

.fantasy-stats-section .stats-title {
    background: linear-gradient(135deg, var(--team-primary-color, #007105) 0%, var(--team-secondary-color, #0cae13) 100%);
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.fantasy-stats-section .stats-title i {
    font-size: 1.1rem;
    color: white;
}

.fantasy-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.fantasy-stat-card {
    background: white;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fantasy-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.fantasy-stat-label {
    font-size: 0.85rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    font-weight: 500;
}

.fantasy-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #007105;
}

.fantasy-stat-value.fantasy-points {
    color: #007105;
}

.fantasy-stat-value.form-high {
    color: #28a745;
}

.fantasy-stat-value.form-medium {
    color: #ffc107;
}

.fantasy-stat-value.form-low {
    color: #dc3545;
}

.fantasy-note {
    margin-top: 15px;
    text-align: center;
    font-size: 0.85rem;
    color: #6c757d;
}

.fantasy-note a {
    color: #007105;
    font-weight: 600;
    text-decoration: none;
}

.fantasy-note a:hover {
    text-decoration: underline;
}

/* Responsive for Fantasy Stats */
@media (max-width: 768px) {
    .fantasy-stats-section {
        padding: 15px;
        margin-bottom: 20px;
    }

    .fantasy-stats-section .stats-title {
        font-size: 1rem;
        padding: 10px 14px;
    }

    .fantasy-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px;
    }

    .fantasy-stat-card {
        background: white !important;
        border-radius: 8px;
        padding: 10px 6px;
        text-align: center;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
        display: block !important;
    }

    .fantasy-stat-label {
        font-size: 0.7rem;
        margin-bottom: 5px;
        display: block !important;
    }

    .fantasy-stat-value {
        font-size: 1.1rem;
        font-weight: 700;
        display: block !important;
    }

    .fantasy-note {
        font-size: 0.8rem;
        margin-top: 12px;
    }
}

@media (max-width: 480px) {
    .fantasy-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 8px;
    }

    .fantasy-stat-card {
        padding: 12px;
        display: flex !important;
        justify-content: space-between;
        align-items: center;
    }

    .fantasy-stat-label {
        font-size: 0.85rem;
        margin-bottom: 0;
    }

    .fantasy-stat-value {
        font-size: 1.2rem;
    }
}

/* Phones: the theme gives .container-fluid a 12px gutter but leaves .row at Bootstrap's 24px, so every
   row hangs 6px past each side of the screen and League/Team pages scrolled sideways (418px in a 412px
   viewport, measured 2026-10-07). Only the rows' empty padding sits in that overhang, so clipping it changes
   nothing visible. clip, not hidden: it makes no scroll container, so position:sticky keeps working. */
@media (max-width: 991.98px) {
    .page-content {
        overflow-x: clip;
    }
}

/* ---- engagement-features.css ---- */
/* ==========================
   Exit Intent Popup Styles
   ========================== */
.exit-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.exit-popup-overlay.show {
    display: flex;
    opacity: 1;
}

.exit-popup-content {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 20px;
    max-width: 500px;
    width: 90%;
    padding: 40px;
    text-align: center;
    position: relative;
    animation: popupSlideIn 0.4s ease-out;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    border: 3px solid var(--primary-green, #007105);
}

@keyframes popupSlideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.exit-popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #666;
    transition: all 0.3s ease;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.exit-popup-close:hover {
    background-color: rgba(0, 0, 0, 0.1);
    color: #333;
}

.exit-popup-icon {
    font-size: 60px;
    margin-bottom: 20px;
}

.exit-popup-title {
    color: var(--primary-green, #007105);
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
}

.exit-popup-message {
    color: #555;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 25px;
}

.exit-popup-cta {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary-green, #007105) 0%, var(--light-green, #0cae13) 100%);
    color: white;
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 113, 5, 0.3);
}

.exit-popup-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 113, 5, 0.4);
    color: white;
}

.exit-popup-subtext {
    margin-top: 15px;
    font-size: 13px;
    color: #888;
}

.exit-popup-subtext a {
    color: var(--primary-green, #007105);
    text-decoration: underline;
}

/* ==========================
   Ad Blocker Overlay Styles
   ========================== */
.adblocker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 99999;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.adblocker-overlay.show {
    display: flex;
}

.adblocker-content {
    background: white;
    border-radius: 20px;
    max-width: 600px;
    width: 100%;
    padding: 50px;
    text-align: center;
}

.adblocker-icon {
    font-size: 80px;
    margin-bottom: 20px;
}

.adblocker-title {
    color: #333;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
}

.adblocker-message {
    color: #666;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
}

.adblocker-steps {
    text-align: left;
    background: #f8f9fa;
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 30px;
}

.adblocker-steps h5 {
    color: var(--primary-green, #007105);
    margin-bottom: 15px;
    font-weight: 600;
}

.adblocker-steps ol {
    margin: 0;
    padding-left: 20px;
    color: #555;
}

.adblocker-steps li {
    margin-bottom: 10px;
    line-height: 1.5;
}

.adblocker-btn-primary {
    background: linear-gradient(135deg, var(--primary-green, #007105) 0%, var(--light-green, #0cae13) 100%);
    color: white;
    border: none;
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 10px;
}

.adblocker-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 113, 5, 0.4);
}

.adblocker-btn-secondary {
    background: transparent;
    color: #666;
    border: 2px solid #ddd;
    padding: 13px 30px;
    border-radius: 50px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.adblocker-btn-secondary:hover {
    border-color: #999;
    color: #333;
}

#adBlockerStatus {
    margin-top: 20px;
    font-size: 14px;
}

/* ==========================
   Share Gate Styles
   ========================== */
.share-gate-wrapper {
    position: relative;
}

/* Blur locked rows */
.league-table-locked {
    filter: blur(4px);
    user-select: none;
    pointer-events: none;
}

.share-gate-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.9) 30%,
        rgba(255, 255, 255, 1) 50%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 20px;
    z-index: 100;
}

/* Dark mode support */
[data-bs-theme="dark"] .share-gate-overlay {
    background: linear-gradient(to bottom,
        rgba(33, 37, 41, 0) 0%,
        rgba(33, 37, 41, 0.9) 30%,
        rgba(33, 37, 41, 1) 50%);
}

.share-gate-overlay.unlocking {
    animation: fadeOut 0.5s ease-out forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
    }
}

.share-gate-lock-icon {
    font-size: 40px;
    color: var(--primary-green, #007105);
    margin-bottom: 10px;
}

.share-gate-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
}

[data-bs-theme="dark"] .share-gate-title {
    color: #f8f9fa;
}

.share-gate-subtitle {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

[data-bs-theme="dark"] .share-gate-subtitle {
    color: #adb5bd;
}

.share-gate-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.share-gate-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 50px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
}

.share-gate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.share-gate-btn.twitter {
    background: linear-gradient(135deg, #1da1f2 0%, #0c85d0 100%);
}

.share-gate-btn.facebook {
    background: linear-gradient(135deg, #1877f2 0%, #0d65d9 100%);
}

.share-gate-btn.instagram {
    background: linear-gradient(135deg, #e4405f 0%, #c13584 50%, #833ab4 100%);
}

.share-gate-btn i {
    font-size: 18px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .exit-popup-content {
        padding: 30px 20px;
    }

    .exit-popup-title {
        font-size: 22px;
    }

    .exit-popup-icon {
        font-size: 48px;
    }

    .adblocker-content {
        padding: 30px 20px;
    }

    .adblocker-title {
        font-size: 24px;
    }

    .adblocker-icon {
        font-size: 60px;
    }

    .share-gate-buttons {
        flex-direction: column;
        width: 100%;
        padding: 0 20px;
    }

    .share-gate-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ---- ads.css ---- */
/* ========================================
   DISKI ZONE - AD CONTAINER STYLES
   Caps width and rendered height so AdSense's
   "auto"/"fluid" formats can't render full-screen units.
   ======================================== */

.display-ad,
.in-article-ad,
.horizontal-ad,
.in-feed-ad {
    margin: 20px auto;
    text-align: center;
    max-width: 728px;
    width: 100%;
    overflow: hidden;
}

.in-feed-ad {
    margin: 12px auto;
}

.multiplex-ad {
    margin: 25px auto;
    max-width: 1000px;
    width: 100%;
    overflow: hidden;
}

.banner-container {
    max-width: 970px;
    margin-left: auto;
    margin-right: auto;
}

/* Hard-cap rendered ad height. AdSense honours the container's
   max-height for fluid/auto formats and will pick a smaller creative. */
.display-ad ins.adsbygoogle,
.in-article-ad ins.adsbygoogle,
.horizontal-ad ins.adsbygoogle,
.in-feed-ad ins.adsbygoogle,
.banner-container ins.adsbygoogle {
    display: block !important;
    max-height: 280px !important;
    width: 100% !important;
}

.multiplex-ad ins.adsbygoogle {
    display: block !important;
    max-height: 600px !important;
    width: 100% !important;
}

/* Mobile: tighter caps so banner ads don't dominate the viewport */
@media (max-width: 767px) {
    .display-ad,
    .in-article-ad,
    .in-feed-ad,
    .banner-container {
        max-width: 100%;
    }

    .display-ad ins.adsbygoogle,
    .in-article-ad ins.adsbygoogle,
    .in-feed-ad ins.adsbygoogle,
    .banner-container ins.adsbygoogle {
        max-height: 250px !important;
    }

    .multiplex-ad ins.adsbygoogle {
        max-height: 500px !important;
    }
}

/* ---------------------------------------------------------------------------
   Ad container spacing (2026-08-04)

   The inline `style="margin: 20px 0; text-align: center"` attributes were removed
   from _DisplayAd / _InArticleAd / _InFeedAd and moved here, so presentation lives
   in CSS rather than in the partials.
   --------------------------------------------------------------------------- */
.display-ad,
.in-article-ad {
    margin: 20px 0;
    text-align: center;
}

.in-feed-ad {
    margin: 15px 0;
}

/* ---------------------------------------------------------------------------
   Match Details - in-tab ad slots

   One ad per tab, placed at the foot of the tab body so it never pushes the
   match content itself below the fold.
   --------------------------------------------------------------------------- */
.md-tab-ad {
    margin: 18px 0 4px;
    text-align: center;
    clear: both;
}

/* ---------------------------------------------------------------------------
   Betway affiliate creative (Betting Tips tab)

   Mirrors the diskizone-app BetwayBanner component: a labelled 300x150 creative
   that opens the btag-tagged click URL. The label is required by ad policy and by
   Play, and is kept here on web for consistency.
   --------------------------------------------------------------------------- */
.betway-promo {
    margin: 20px auto 8px;
    max-width: 340px;
    text-align: center;
}

.betway-promo__label {
    display: block;
    font-size: 9px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #8a8a8a;
    margin-bottom: 6px;
}

.betway-promo__link {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.betway-promo__link:hover,
.betway-promo__link:focus {
    opacity: 0.9;
}

.betway-promo__img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 300px;
    margin: 0 auto;
    border-radius: 8px;
}

.betway-promo__cta {
    display: inline-block;
    margin-top: 10px;
    padding: 11px 30px;
    background: linear-gradient(180deg, #00A826 0%, #00821D 100%);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.betway-promo__cta:hover,
.betway-promo__cta:focus {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.betway-promo__disclaimer {
    display: block;
    margin-top: 8px;
    font-size: 10px;
    color: #8a8a8a;
}

@media (max-width: 767px) {
    .betway-promo {
        max-width: 100%;
    }
}

/* ============================================================
   AUTO-PLACED ADS - CONTAINMENT
   ============================================================
   Google Auto ads inject <div class="google-auto-placed"> at DOM positions
   Google picks, which vary per pageview. Nothing above styles them, so they
   were free to break the page. Measured on a single team page: 17 ad units,
   4 auto-placed - 2 dropped straight into a Bootstrap .row and 2 inside
   content cards.

   Three faults, all the same cause:

   1. BIGGEST WIN / BIGGEST LOSS STACKED. Both are col-md-6 in one .row. An
      auto-placed div landing BETWEEN them is a full-width flex item, so the
      second column wrapped to the next line. Nothing was wrong with the markup.

   2. LEAGUE TABLE SCROLLED TO WHITESPACE. #leagueTableContainer is
      overflow-x:auto. An ad wider than that container makes it scrollable, and
      the extra width is empty space beside the table.

   3. HISTORICAL POSITIONS CHART RAN OFF THE RIGHT EDGE. An ad wider than the
      card forces the card past the layout wrapper and takes the chart with it.
      The chart itself is fine - ApexCharts has no fixed width and sizes to its
      container.

   NOT display:none. Hiding a served ad is an AdSense policy problem and costs
   the impression. These rules only stop an ad forcing its container wider than
   the page, and re-order it out of a grid row - it still renders and still
   serves. !important is required because Google sets width inline. */

.google-auto-placed,
.google-auto-placed ins.adsbygoogle {
    max-width: 100% !important;
    overflow: hidden;
}

/*  Bootstrap .row is display:flex, and columns default to order:0. Giving an
    injected ad a high order sorts it to the END of the row wherever Google put
    it in the DOM, so it can never split two columns - it drops to its own line
    underneath. Columns are deliberately NOT given an explicit order here: that
    would override Bootstrap's own .order-* utilities. */
.row > .google-auto-placed {
    order: 99;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}

/* ---- swappies-banner.css ---- */
/* Swappies house-ad banner for Diski Zone.
   Self-contained: every rule is under .swp, it sets its own colours and font stack, and it needs
   nothing from the host site's stylesheet. The banner fills whatever width it is placed in.

   Motion is deliberately quiet - a headline that changes, one sticker that "lands" in the album,
   a soft pulse on the button. No lights, no stripes, no strobing (that version was rejected on
   Swappies as looking like a christmas tree). Everything stops for prefers-reduced-motion. */
.swp { --swp-navy: #14213D; --swp-yellow: #FFDD00; --swp-red: #E4022E;
       position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; column-gap: 26px;
       min-height: 116px; padding: 16px 30px; margin: 18px 0 22px; border-radius: 16px; overflow: hidden; isolation: isolate;
       box-sizing: border-box; text-decoration: none; color: #fff; background: var(--swp-navy);
       font-family: 'Montserrat', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
       box-shadow: 0 1px 2px rgba(20,33,61,.10), 0 1px 3px rgba(20,33,61,.08); transition: box-shadow .2s ease, transform .2s ease; }
.swp *, .swp *::before, .swp *::after { box-sizing: border-box; }
.swp:hover { color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(20,33,61,.18); }
/* The yellow and red slash from the Swappies homepage hero, tucked into the right-hand end.
   Sized in pixels from the right edge, not as a share of the banner, so the yellow is always
   wide enough to sit behind the whole button whatever width the banner is placed in.

   NOTE ON NAMES: this file and the logo folder deliberately avoid "ad"/"ads" in their paths.
   Ad blockers block any URL containing /house-ads/ - the logo vanished in a real browser. */
.swp::before { content: ""; position: absolute; z-index: -1; inset: 0;
       background: linear-gradient(105deg, transparent 0 calc(100% - 300px), var(--swp-red) calc(100% - 300px) calc(100% - 272px), var(--swp-yellow) calc(100% - 272px) 100%); opacity: .95; }

.swp-brand img { display: block; height: 42px; width: auto; }

/* The picture: four album slots, three filled and one empty that a sticker drops into. */
.swp-viz { display: flex; align-items: center; gap: 6px; }
.swp-slot { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 34px; height: 46px; padding-bottom: 4px; border-radius: 5px;
       font-family: 'Space Mono', ui-monospace, Consolas, monospace; font-size: 9px; font-weight: 700; color: var(--swp-navy);
       background: linear-gradient(160deg, #ffffff, #dfe6f2); box-shadow: 0 3px 8px rgba(0,0,0,.28); }
.swp-slot::before { content: ""; position: absolute; left: 50%; top: 8px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #9aa6bf; }
.swp-slot:nth-child(1) { transform: rotate(-4deg); } .swp-slot:nth-child(2) { transform: rotate(2deg); } .swp-slot:nth-child(4) { transform: rotate(3deg); }
.swp-slot.is-missing { background: transparent; border: 2px dashed rgba(255,255,255,.55); box-shadow: none; color: rgba(255,255,255,.8); }
.swp-slot.is-missing::before { display: none; }
.swp-slot.is-missing::after { content: attr(data-n); position: absolute; inset: -2px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px;
       border-radius: 5px; background: var(--swp-yellow); color: var(--swp-navy); box-shadow: 0 3px 8px rgba(0,0,0,.28);
       animation: swp-land 4.5s ease-in-out infinite; }

.swp-copy { min-width: 0; }
.swp-kicker { display: block; margin-bottom: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--swp-yellow); }
.swp-heads { position: relative; display: block; height: 2.3em; font-weight: 900; font-size: clamp(18px, 2.1vw, 27px); line-height: 1.12; letter-spacing: -.02em; }
.swp-heads > span { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; animation: swp-head 10.5s infinite; }
.swp-heads > span:nth-child(2) { animation-delay: 3.5s; }
.swp-heads > span:nth-child(3) { animation-delay: 7s; }

/* The left margin keeps the headline column clear of the slash, which starts left of the button. */
.swp-cta { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-left: 56px; }
.swp-btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 24px; border-radius: 999px; white-space: nowrap;
       font-weight: 800; font-size: 15.5px; color: #fff; background: var(--swp-navy); animation: swp-pulse 2.4s ease-out infinite; }
.swp-arrow { display: inline-block; transition: transform .2s ease; }
.swp:hover .swp-arrow { transform: translateX(4px); }
.swp-url { font-weight: 800; font-size: 12.5px; color: var(--swp-navy); white-space: nowrap; }

@keyframes swp-head { 0% { opacity: 0; transform: translateY(12px); } 4%, 29% { opacity: 1; transform: translateY(0); } 33.3%, 100% { opacity: 0; transform: translateY(-12px); } }
@keyframes swp-pulse { 0% { box-shadow: 0 0 0 0 rgba(20,33,61,.45); } 70%, 100% { box-shadow: 0 0 0 14px rgba(20,33,61,0); } }
@keyframes swp-pulse-y { 0% { box-shadow: 0 0 0 0 rgba(255,221,0,.45); } 70%, 100% { box-shadow: 0 0 0 14px rgba(255,221,0,0); } }
@keyframes swp-land { 0%, 18% { opacity: 0; transform: translateY(-16px) rotate(-8deg) scale(1.15); } 28%, 88% { opacity: 1; transform: translateY(0) rotate(-2deg) scale(1); } 100% { opacity: 0; transform: translateY(0) rotate(-2deg) scale(1); } }

/* Narrower than a wide desktop row: the picture goes first, it is the least needed part. The
   slash goes too and the button turns yellow - there is no room for it beside the headline, and
   a navy button half on navy and half on yellow is unreadable. */
@media (max-width: 991px) {
    .swp { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 18px; padding: 14px 20px; }
    .swp-viz { display: none; }
    .swp::before { display: none; }
    .swp-cta { margin-left: 0; }
    .swp-btn { background: var(--swp-yellow); color: var(--swp-navy); animation-name: swp-pulse-y; }
    .swp-url { color: rgba(255,255,255,.75); }
}
/* Phones: logo and button on one line, the headline underneath across the full width. */
@media (max-width: 640px) {
    .swp { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; min-height: 0; padding: 14px 16px 16px; }
    .swp-brand { min-width: 0; }
    .swp-brand img { height: 30px; max-width: 100%; object-fit: contain; object-position: left center; }
    .swp-copy { grid-column: 1 / -1; grid-row: 2; }
    .swp-cta { grid-column: 2; grid-row: 1; }
    .swp-heads { height: 1.35em; font-size: 18px; }
    .swp-btn { padding: 9px 16px; font-size: 14px; }
    .swp-url { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .swp, .swp *, .swp *::after { animation: none !important; transition: none; }
    .swp-heads > span:first-child { opacity: 1; }
    .swp-slot.is-missing::after { opacity: 1; }
}

/* ---- sidebar-logos.css ---- */
/* ---------------------------------------------------------------------------
   Sidebar competition logos
   ---------------------------------------------------------------------------
   A small crest sits before each top-level league and cup name in the left
   navigation. The image is the competition's current sponsor logo, already
   returned by dbo.GetLeagues as vwLeagueSeasons.LogoURL, so this is presentation
   only - no new data is fetched.

   Only LEVEL 1 entries carry a logo. Provinces and streams sit under a parent
   that already shows it, and repeating one badge down a whole sub-menu is noise.

   Sizing is fixed in both axes and the box reserves its space before the image
   loads, so a slow or missing logo cannot reflow the menu. Logos are remote S3
   PNGs of assorted aspect ratios - object-fit keeps them whole rather than
   stretched.
--------------------------------------------------------------------------- */

#sidebar-menu .dz-league-logo {
    width: 20px;
    height: 20px;
    min-width: 20px;          /* stops flex from crushing it on narrow screens */
    margin-right: 10px;
    object-fit: contain;
    object-position: center;
    vertical-align: middle;
    border-radius: 3px;
    /* Most of these badges are dark-on-transparent; a light chip keeps them
       legible against the dark sidebar without touching the source images. */
    background-color: rgba(255, 255, 255, 0.9);
    padding: 1px;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Light badges: brand-green chip instead of the white one
   ---------------------------------------------------------------------------
   The white chip above assumes dark artwork, which holds for most badges but not
   all. Measured average luminance of the opaque pixels of every sponsor logo
   (0 = black, 255 = white):

       Nedbank            255      pure white  - INVISIBLE on a white chip
       Sasol              255      pure white  - INVISIBLE on a white chip
       Motsepe Foundation 209      light       - washes out
       ---- everything below reads fine on white ----
       ABC Motsepe        174      MTN 172, SAFA 170, GladAfrica 143
       NFD 145, Telkom 134, Vodacom 118, Hollywoodbets 119, ABSA 95
       Carling 78, TotalEnergies 68, DStv 40, betway 2

   That is why the Nedbank Cup entry appeared to have no crest at all: the logo
   was there, drawn in white on white.

   These are NOT inverted with filter: invert() - that would recolour any badge
   carrying real brand colour (a white-and-red mark would come back black-and-cyan).
   Instead the chip goes dark, which preserves the artwork exactly and matches how
   the same logo already renders in the page header: white on brand green.

   Selected on the filename because the sponsor table carries no "is the artwork
   light" flag. If one is ever added, drive this from that flag instead and drop
   the URL matching.
--------------------------------------------------------------------------- */
#sidebar-menu .dz-league-logo[src*="nedbank"],
#sidebar-menu .dz-league-logo[src*="sasol"],
#sidebar-menu .dz-league-logo[src*="motsepefoundation"] {
    background-color: #007105;   /* site primary green, as used by the page header */
    padding: 2px;                /* a touch more breathing room inside the darker chip */
}

/* The anchors are laid out as flex rows so the crest and the label stay on one
   line and long competition names wrap under themselves, not under the badge. */
#sidebar-menu ul li a.dz-has-logo {
    display: flex;
    align-items: center;
}

#sidebar-menu ul li a.dz-has-logo > span {
    flex: 1 1 auto;
    min-width: 0;
}

/* The theme draws the dropdown caret with an ::after on .has-arrow; flex would
   otherwise let it collapse. */
#sidebar-menu ul li a.dz-has-logo.has-arrow::after {
    flex: 0 0 auto;
    margin-left: 8px;
}

/* An unreachable logo is hidden by the onerror handler rather than left as a
   broken-image glyph. Keep the rule so the class is self-documenting. */
#sidebar-menu .dz-league-logo[hidden] {
    display: none !important;
}

/* Collapsed (icon-only) sidebar: the menu shows just the top-level entries, so
   the crest becomes the icon and the label is hidden by the theme. */
@media (min-width: 992px) {
    body[data-sidebar-size="sm"] #sidebar-menu .dz-league-logo {
        margin-right: 0;
        width: 24px;
        height: 24px;
        min-width: 24px;
    }

    body[data-sidebar-size="sm"] #sidebar-menu ul li a.dz-has-logo {
        justify-content: center;
    }

    body[data-sidebar-size="sm"] #sidebar-menu ul li:hover > a.dz-has-logo {
        justify-content: flex-start;
    }

    body[data-sidebar-size="sm"] #sidebar-menu ul li:hover > a.dz-has-logo .dz-league-logo {
        margin-right: 10px;
    }
}

/* Phones: the sidebar is a full overlay, so there is room for the badge, but
   trim the gap a little to protect the label on narrow devices. */
@media (max-width: 480px) {
    #sidebar-menu .dz-league-logo {
        width: 18px;
        height: 18px;
        min-width: 18px;
        margin-right: 8px;
    }
}

/* ---- app-install-banner.css ---- */
/*
    Android app-install banner (_AppInstallBanner.cshtml).

    Lives in its own stylesheet rather than in the partial, per the house rule
    that CSS belongs in a view-specific file and not in markup. Referenced with
    asp-append-version so a change busts the Cloudflare cache - an unversioned
    link keeps the same URL and stays stuck behind a 30 day max-age.

    Sized for 320px upward: it is only ever served to Android phones, so the
    narrow case IS the case, not an afterthought.
*/

.dz-appbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #0c0c0e;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* hidden must win over the flex display above, or the banner shows for a
   moment before the script hides it again. */
.dz-appbar[hidden] {
    display: none;
}

.dz-appbar-icon {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    flex: 0 0 auto;
}

/* min-width:0 is what lets the text actually ellipsize - without it a flex
   child refuses to shrink below its content and pushes the CTA off screen. */
.dz-appbar-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.25;
}

.dz-appbar-title {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dz-appbar-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The green of the in-app shell, so the destination is recognisable before
   the manager gets there. */
.dz-appbar-cta {
    flex: 0 0 auto;
    background: #0cae13;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 7px;
}

.dz-appbar-cta:hover,
.dz-appbar-cta:focus {
    background: #007105;
    color: #fff;
    text-decoration: none;
}

/* 44px of touch target on a control that is only 20px of glyph - a dismiss
   people cannot hit is worse than no dismiss at all. */
.dz-appbar-close {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    line-height: 1;
    font-size: 20px;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.6);
    padding: 0;
    cursor: pointer;
}

.dz-appbar-close:hover,
.dz-appbar-close:focus {
    color: #fff;
}

@media (max-width: 359px) {
    /* At the very narrowest the subtitle is the first thing to go - the title
       and the button are what the bar is for. */
    .dz-appbar-sub {
        display: none;
    }

    .dz-appbar-cta {
        padding: 8px 11px;
    }
}

/* ---- app-promo-card.css ---- */
/*
    In-content app promo card (_AppPromoCard.cshtml), used on team and match
    pages.

    Its own stylesheet rather than inline styles in the partial, per the house
    rule that CSS belongs in a view-specific file. Referenced with
    asp-append-version so a change busts the Cloudflare cache - an unversioned
    link keeps the same URL and stays stuck behind a 30 day max-age.

    Mobile first: this is served to every device, and most Diski Zone traffic is
    a phone, so the stacked layout is the base case and the side-by-side split is
    the enhancement.
*/

.dz-app-promo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    padding: 18px 20px;
    border-radius: 10px;
    background: linear-gradient(135deg, #007105 0%, #0cae13 70%, #4eca51 100%);
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.dz-app-promo-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dz-app-promo-title {
    font-size: 17px;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.dz-app-promo-sub {
    font-size: 13.5px;
    opacity: 0.92;
    line-height: 1.35;
}

/*  The badge is a fixed 300x90 raster. Height-driven with width:auto so it can
    never distort, and max-width:100% so it cannot push the card wider than the
    page on a 320px screen. */
.dz-app-promo-badge {
    display: inline-block;
    line-height: 0;
    flex-shrink: 0;
    transition: transform 0.2s, filter 0.2s;
}

.dz-app-promo-badge:hover,
.dz-app-promo-badge:focus {
    transform: translateY(-2px);
    filter: brightness(1.12);
}

.dz-app-promo-badge img {
    height: 52px;
    width: auto;
    max-width: 100%;
    display: block;
}

/*  From tablet up there is room to put the pitch and the badge side by side,
    which keeps the card to a single compact strip instead of a tall block
    interrupting the page. */
@media (min-width: 576px) {
    .dz-app-promo {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        gap: 20px;
        padding: 16px 24px;
    }

    .dz-app-promo-title {
        font-size: 19px;
    }
}

@media (min-width: 992px) {
    .dz-app-promo-badge img {
        height: 58px;
    }
}

/*  Respect a user who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
    .dz-app-promo-badge {
        transition: none;
    }

    .dz-app-promo-badge:hover,
    .dz-app-promo-badge:focus {
        transform: none;
    }
}

/* ---- tickets.css ---- */
/*
    Buy Tickets - the match-page banner and the interstitial page.

    Own stylesheet per the house rule that CSS belongs in a view-specific file
    rather than inline in markup or built up in a C# helper. Linked with
    asp-append-version so a change busts the Cloudflare cache; an unversioned
    link keeps the same URL and stays stuck behind a 30 day max-age.

    Mobile first - most Diski Zone traffic is a phone, so the stacked layout is
    the base case and the side-by-side split is the enhancement.
*/

/* ------------------------------------------------ match page banner */
.match-tickets {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 20px 0;
    padding: 16px 18px;
    border-radius: 10px;
    background: linear-gradient(135deg, #007105 0%, #0cae13 100%);
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.match-tickets-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    min-width: 0;
}

.match-tickets-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.match-tickets-label i { font-size: 20px; flex-shrink: 0; }

.match-tickets-price {
    font-size: 14px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    padding: 3px 11px;
    white-space: nowrap;
}

.match-tickets-seller {
    font-size: 12.5px;
    opacity: 0.85;
}

.match-tickets-btn {
    display: block;
    text-align: center;
    padding: 12px 26px;
    border-radius: 8px;
    background: #fff;
    color: #007105;
    font-size: 15.5px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}

.match-tickets-btn:hover,
.match-tickets-btn:focus {
    color: #005a04;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
}

@media (min-width: 576px) {
    .match-tickets {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .match-tickets-btn {
        display: inline-block;
        flex-shrink: 0;
    }
}

/* ------------------------------------------------------ interstitial */
.ticket-interstitial {
    display: flex;
    justify-content: center;
    padding: 30px 16px 60px;
}

.ticket-interstitial-card {
    width: 100%;
    max-width: 760px;
    text-align: center;
    background: #fff;
    border-radius: 12px;
    padding: 28px 22px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.ticket-interstitial-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #007105;
}

.ticket-interstitial-sub {
    font-size: 14px;
    color: #666;
    margin: 0 0 22px;
}

/*  The ad must never be able to push this page wider than the viewport - the
    same auto-ads containment problem that broke the team page. */
.ticket-interstitial-ad {
    margin: 0 auto 22px;
    max-width: 100%;
    overflow: hidden;
}

.ticket-interstitial-count {
    font-size: 14px;
    color: #666;
    margin: 0 0 14px;
}

.ticket-interstitial-btn {
    display: inline-block;
    padding: 13px 34px;
    border-radius: 8px;
    background: linear-gradient(135deg, #007105 0%, #0cae13 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}

.ticket-interstitial-btn:hover,
.ticket-interstitial-btn:focus {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(12, 174, 19, 0.35);
}

.ticket-interstitial-back {
    display: block;
    margin-top: 16px;
    font-size: 13.5px;
    color: #666;
}

@media (prefers-reduced-motion: reduce) {
    .match-tickets-btn,
    .ticket-interstitial-btn { transition: none; }
    .match-tickets-btn:hover, .match-tickets-btn:focus,
    .ticket-interstitial-btn:hover, .ticket-interstitial-btn:focus { transform: none; }
}