:root {
  --logo-url: var(--main-logo-url);
}

html {
  width: 100%;
}

body {
  overflow-x: hidden !important;
}

body.show-spinner>main {
  overflow: hidden !important;
}

/* Hide everything under body tag */
body.show-spinner>* {
  opacity: 0;
}

/* Spinner */
body.show-spinner::after {
  content: " ";
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  border-top-color: rgba(0, 0, 0, 0.3);
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
  left: calc(50% - 15px);
  top: calc(50% - 15px);
  position: fixed;
  z-index: 1;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

.logo-mobile {
  width: 76px;
}

.logo,
.logo-single,
.logo-mobile {
  background-image: var(--main-logo-url);
  background-size: contain;
  margin-bottom: 20px;
  height: 110px;
}

.logo {
  width: 125px;
  height: 50px;
  margin-bottom: 0px;
}

.menu .main-menu ul li.active:after,
.menu .sub-menu ul li.active:after,
.dropdown-item.active,
.dropdown-item:active,
table.dataTable.dtr-inline.collapsed>tbody>tr[role=row]>td:first-child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr[role=row]>th:first-child:before {
  background: var(--web-primary-color) !important;
}

.navbar .header-icon#notificationButton .count {
  color: var(--web-primary-color);
  border-color: var(--web-primary-color);
}

.menu .main-menu ul li.active a,
.breadcrumb-item.active .menu .sub-menu ul li i,
.icon-cards-row i,
.icon-cards-row .lead,
.menu .sub-menu ul li.active a,
.menu .sub-menu ul li.active i,
.menu .main-menu ul li a:focus,
.menu .main-menu ul li a:hover,
.menu .sub-menu ul.inner-level-menu li a:hover,
.menu .sub-menu ul.inner-level-menu li.active a,
.menu .sub-menu ul.inner-level-menu li.active i,
a:active,
a:hover {
  color: var(--web-primary-color);
}

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

.auth-card .image-side {
  background-image: var(--auth-card-side-img);
}

.fixed-background {
  background-image: var(--auth-main-bg-img);
}

.modal.fade form,
.modal.fade form select {
  width: 100%;
}

.page-item.active .page-link {
  color: var(--web-primary-color) !important;
  border-color: var(--web-primary-color) !important;
}

.page-item .page-link.next,
.page-item .page-link.prev {
  background: var(--web-primary-color);
  border-color: var(--web-primary-color) !important;
}

.page-item .page-link:hover {
  border-color: var(--web-primary-color) !important;
  color: var(--web-primary-color) !important;
}

.data-table-rows table td,
.data-table-rows table th {
  padding: 10px 30px 10px 24px;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  justify-content: center !important;
}

/* repeater close*/

.repeater .repeater-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  padding: 2px 0;
}

.repeater tr {
  position: relative;
}

.datepicker table tr td.active.active,
.datepicker table tr td.active.highlighted.active,
.datepicker table tr td.active.highlighted:active,
.datepicker table tr td.active:active {
  background-color: var(--web-primary-color) !important;
  border-color: var(--web-primary-color) !important;
}

.fc-bootstrap4 td.fc-today .fc-day-number {
  background-color: var(--web-primary-color);
}

.outputs {
  border-radius: 4px;
  border: 1px solid #d7d7d7;
  padding: 20px .75rem 0;
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.outputs .title {
  background: #fff;
  position: absolute;
  line-height: 14px;
  font-size: 14px;
  top: -7px;
  left: 20px;
  padding: 0 12px;
}

.outputs p {
  margin-bottom: 10px;
  border: 1px solid #d7d7d7;
  padding: 10px;
  border-radius: 4px;
  width: 31%;
}