/* =========================================================
   GLOBAL LOADING SCREEN
   ========================================================= */

.loading_wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  display: block;
  position: absolute;
  z-index: 9999;
}

.loader_logo {
  height: 80px;
  width: 80px;
  position: absolute;
  left: calc(50% - 50px);
  top: 38%;
}

.loader_logo img {
  height: 100%;
  width: 100%;
}

/* MAROON LOADER */
.loading {
  border: 3px solid rgba(128, 0, 0, 0.35);
  position: absolute;
  left: calc(50% - 40px);
  top: 50%;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  border-top-color: #800000;
  animation: loader 1s ease-in-out infinite;
  -webkit-animation: loader 1s ease-in-out infinite;
}

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

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


/* =========================================================
   FORCE MAROON ADMIN THEME (STRUCTURE ONLY)
   ========================================================= */

/* Primary variables (used by Vue but text overridden later) */
:root {
  --primary: #800000;
  --primary-hover: #5a0000;
  --primary-light: #fbeaea;
}

/* HEADER / DASHBOARD GRADIENT */
.bg-primary,
.bg-gradient-primary,
[class*="bg-primary"] {
  background: linear-gradient(90deg, #800000, #5a0000) !important;
}


/* =========================================================
   BUTTONS (MAROON, TEXT WHITE)
   ========================================================= */

button,
.btn,
.btn-primary {
  background-color: #800000 !important;
  border-color: #800000 !important;
  color: #ffffff !important;
}

button:hover,
.btn:hover,
.btn-primary:hover {
  background-color: #5a0000 !important;
  border-color: #5a0000 !important;
  color: #ffffff !important;
}


/* =========================================================
   SIDEBAR ACTIVE (MAROON BG, BLACK TEXT)
   ========================================================= */

.sidebar .active,
.sidebar a.active,
.router-link-active {
  background-color: rgba(128, 0, 0, 0.15) !important;
  color: #000000 !important;
}


/* =========================================================
   GLOBAL TEXT = BLACK
   ========================================================= */

/* All normal text */
body,
p,
span,
div,
label,
small,
strong,
td,
th,
li {
  color: #000000 !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: #000000 !important;
}

/* Override Stocky "primary text" */
.text-primary,
[class*="text-primary"] {
  color: #000000 !important;
}


/* =========================================================
   ICONS (MAROON ICONS, NOT TEXT)
   ========================================================= */

svg path,
svg rect,
svg circle {
  fill: #800000 !important;
}


/* =========================================================
   DASHBOARD CARDS / ICON WRAPPERS
   ========================================================= */

.card-icon,
.stat-icon,
.dashboard-card-icon {
  background-color: rgba(128, 0, 0, 0.15) !important;
  color: #800000 !important;
}


/* =========================================================
   LINKS (BLACK DEFAULT, MAROON HOVER)
   ========================================================= */

a {
  color: #000000 !important;
  text-decoration: none;
}

a:hover {
  color: #800000 !important;
}


/* =========================================================
   INPUTS / FORMS
   ========================================================= */

input,
select,
textarea {
  color: #000000 !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #800000 !important;
  box-shadow: 0 0 0 2px rgba(128, 0, 0, 0.25) !important;
}