/*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap");

@font-face {
  font-family: "conthrax";
  src: url(../font/conthrax-sb.ttf);
}

/*===== VARIABLES CSS =====*/
:root {
  --header-height: 0;
  --nav-width: 75px;
  --nav-height: 75px;

  --black-color: #212529;
  /*===== Colors =====*/
  --main-color: #3877ca;
  --main-color-light: #4889dd;
  --white-color: #f9f9f9;
  --white-color-gray: #efefef;
  --white-color-moregray: #ececec;
  --gray-color: #7f7f7f;
  --red-color: #B72C26;
  --red-color-soft:rgba(183, 44, 38, 0.2);
  /* --darkred-color: #321D7C; */
  --darkred-color: #861d1a;
  /* --darkred-color-light: #5e2dc5; */
  --orange-color: #eeaa18;
  /* --orange-color: #c92f33; */
  --orange-color-transparent: rgba(228, 157, 105, 50%);
  --orange-color-light: #efbe71;
  --green-color: #65C97A;
  --yellow-color: #fef43d;
  --map-color-bg: #f1efe9;
  --darkred-color-rgba: rgba(183, 44, 38, 50%) !important;

  /* ========== Hover Background RGBA ========= */
  /* Black */
  --hover-background-rgba-black: rgba(0, 0, 0, 20%);
  /* White */
  --hover-background-rgba-white: rgba(255, 255, 255, 80%);

  --red-color-transparent: rgba(255, 0, 0, 0.5);

  /*===== Font and typography =====*/
  --body-font: "Rajdhani", sans-serif !important;
  --pancar-font: "conthrax";
  --normal-font-size: 0.8rem !important;

  /*===== Property =====*/
  --z-fixed: 100;
  --border-radius: 10px !important;
  --transition: 0.2s;
  --blur-strength: 10px !important;
  /* --box-shadow:  rgba(0, 0, 0, 0.25) 0px 5px 5px, rgba(0, 0, 0, 0.22) 5px 10px 5px; */
  --box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
    rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  --box-shadow-middle: rgba(0, 0, 0, 0.4) 0px 2px 2px,
    rgba(0, 0, 0, 0.3) 0px 5px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;

  /* ====== Styel Map ===== */
  --button-radius: 10px;
  --darkred-color-rgba-hover: rgba(183, 44, 38, 50%);
  --red-color-rgba-hover: var(--red-color);

  /*TODO ============= MAIN COLOR THEME ==============*/
  --background-linear-white: linear-gradient(133deg,
      rgba(255, 255, 255, 0.8) 30%,
      rgba(255, 255, 255, 0.6) 100%) !important;
  /* --background-linear: linear-gradient(145deg, rgb(17, 1, 68, 80%) 2%, rgba(45, 22, 113, 80%) 50%, rgba(67, 37, 152, 80%) 100%) !important; */

  --background-linear: rgb(255, 255, 255);
  --background-linear: linear-gradient(145deg, rgba(255, 255, 255, 0.8) 2%, rgba(228, 228, 228, 0.8) 50%, rgba(220, 220, 220, 0.8) 100%) !important;
  /* --background-linear: linear-gradient(
    180deg,
    rgba(23, 26, 31, 90%) 0%,
    rgba(23, 26, 31, 90%) 73%
  ); */
  /* --background-linear: linear-gradient(180deg, rgb(93, 86, 85) 0%, rgb(66, 50, 50) 73%); */
  /* --background-linear: linear-gradient(180deg, rgba(125, 73, 73, 0.8) 0%, rgba(124, 47, 47, 0.8) 73%); */
  /* --background-linear: linear-gradient(180deg, rgba(80, 80, 80, 0.8) 0%, rgba(61, 68, 80, 0.8) 73%); */

  --background-accent: var(--red-color);
  --background-accent-hover: var(--red-color-transparent);
  --hover-text-color: var(--darkred-color);
}

/* TOAST ALERT */
.toast-alert {
  text-align: center;
  border-radius: var(--border-radius);
}

.toast-alert i {
  font-size: 2rem !important;
}

.pancardev-img img {
  width: 120px;
  margin-top: 40px;
}

/* SCROLL BAR */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0%);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: rgba(0, 0, 0, 0%);
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
  background-color: var(--main-color);
}

::-webkit-scrollbar-thumb:hover {
  width: 12px;
  height: 12px;
  cursor: pointer;
  background-color: var(--red-color);
}


[data-toggle="collapse"] {
  cursor: pointer;
}

[data-toggle="collapse"]:hover {
  filter: brightness(95%);
}