:root {
  --primary: rgb(215, 26, 33);
  --secondary: #00a4cb;
  --secondary-opacity: rgba(0, 164, 203, 0.3);
  --white: #ffffff;
  --white-50: rgba(255, 255, 255, 0.5);
  --white-20: rgba(255, 255, 255, 0.2);
  --black: #000000;
  --neutral: #7988a7;
  --light-bg: #706f6f;
  --dark-bg: #b2e4ef;
  --bg: #dad6d6;
  --bg-50: #f5f6ff80;
  --hot-orange: rgba(211, 152, 0, 1);
  --light-secondary: #aff8ea;
  --dark-green: #0ac29e;
  --crimson: #852121;
  --cyan: #c9d5ee;

  /* Alerts */
  --alert-red: #d71a21;
  --alert-blue: #14d5ff;
  --alert-green: #0ac29e;
  --alert-yellow: #ff8b00;
}

.bg-main-primary {
  background-color: var(--primary);
}

.text-main-primary {
  color: var(--black);
}
.text-with-orginal-color .text-main-primary {
  color: var(--primary);
}
.border-main-primary {
  border-color: var(--primary);
}

.bg-main-secondary {
  background: var(--secondary);
}

.text-main-secondary {
  color: var(--secondary);
}
.border-main-secondary {
  border-color: var(--secondary);
}
.checked\:bg-main-secondary:checked {
  background-color: var(--secondary);
}

.text-main-secondaryOpacity {
  color: var(--secondary-opacity);
}
.border-main-secondaryOpacity {
  border-color: var(--secondary-opacity);
}
.bg-main-secondaryOpacity {
  background-color: var(--secondary-opacity);
}
.bg-main-lightSecondary {
  background-color: var(--light-secondary);
}

.text-main-lightSecondary {
  color: var(--light-secondary);
}
.border-main-lightSecondary {
  border-color: var(--light-secondary);
}
.bg-main-neutral {
  background-color: var(--neutral);
}

.text-main-neutral {
  color: var(--neutral);
}
.border-main-neutral {
  border-color: var(--neutral);
}

.bg-main-darkGreen {
  background-color: var(--dark-green);
}

.text-main-darkGreen {
  color: var(--dark-green);
}
.border-main-darkGreen {
  border-color: var(--dark-green);
}
.bg-main-cyan {
  background-color: var(--cyan);
}

.text-main-cyan {
  color: var(--cyan);
}
.border-main-cyan {
  border-color: var(--cyan);
}
.bg-main-crimson {
  background-color: var(--crimson);
}

.text-main-crimson {
  color: var(--crimson);
}
.border-main-crimson {
  border-color: var(--crimson);
}
.bg-main-hotOrange {
  background-color: var(--hot-orange);
}

.text-main-hotOrange {
  color: var(--hot-orange);
}
.border-main-hotOrange {
  border-color: var(--hot-orange);
}

.text-main-bg-50 {
  color: var(--bg-50);
}
.bg-main-bg-50 {
  background-color: var(--bg-50);
}
.border-main-bg-50 {
  border-color: var(--bg-50);
}

.bg-main-bg {
  background-color: var(--bg);
}

.text-main-bg {
  color: var(--bg);
}
.bordeer-main-bg {
  border-color: var(--bg);
}
.bg-main-dark-bg {
  background-color: var(--dark-bg);
}

.text-main-dark-bg {
  color: var(--dark-bg);
}
.border-main-dark-bg {
  border-color: var(--dark-bg);
}
.bg-main-light-bg {
  background-color: var(--light-bg);
}

.text-main-light-bg {
  color: var(--light-bg);
}
.border-main-light-bg {
  border-color: var(--light-bg);
}

.bg-main-white20 {
  background-color: var(--white-20);
}

.text-main-white20 {
  color: var(--white-20);
}
.border-main-white20 {
  border-color: var(--white-20);
}
.bg-main-white50 {
  background-color: var(--white-50);
}

.text-main-white50 {
  color: var(--white-50);
}
.border-main-white50 {
  border-color: var(--white-50);
}

/* ----------------------( alert )---------------------------- */
.text-alert-red {
  color: var(--alert-red);
}

.text-alert-blue {
  color: var(--alert-blue);
}

.text-alert-green {
  color: var(--alert-green);
}

.text-alert-yellow {
  color: var(--alert-yellow);
}
.bg-alert-red {
  background-color: var(--alert-red);
}

.bg-alert-blue {
  background-color: var(--alert-blue);
}

.bg-alert-green {
  background-color: var(--alert-green);
}

.bg-alert-yellow {
  background-color: var(--alert-yellow);
}
.border-alert-red {
  border-color: var(--alert-red);
}

.border-alert-blue {
  border-color: var(--alert-blue);
}

.border-alert-green {
  border-color: var(--alert-green);
}

.border-alert-yellow {
  border-color: var(--alert-yellow);
}

/* -----------------------------( benefits of services in landing  )------------------------------------------------ */

.benefit-of-services-bg {
  background: linear-gradient(to bottom, var(--secondary-opacity), transparent);
}

/* -----------------------------( background in login   )------------------------------------------------ */

.bg-login-style {
  background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.2),
      rgba(41, 51, 138, 0.2)
    ),
    url("@/assets/images/login/camera.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* -----------------------------( background in login   )------------------------------------------------ */

.tooltip-package-component::after {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  content: "";
  width: 10px;
  height: 10px;
  background-color: #706f6f;
}

/* -----------------------------( submit button component   )------------------------------------------------ */

.SubmitButtonComponentClass:hover {
  background-color: var(--secondary);
}