:root {
  --primary: #53272a;

  --secondary: #99484d;

  --secondary-opacity: rgba(153, 72, 77, 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: #75373b;

  --dark-bg: #efd cdd;

  --bg: #fffefe;

  --bg-50: rgba(247, 237, 237, 0.5);

  --hot-orange: rgba(211, 152, 0, 1);

  --light-secondary: #d5a5a8;

  --dark-green: #0ac29e;

  --crimson: #75373b;

  --cyan: #c48286;

  /* Alerts */

  --alert-red: #53272a;

  --alert-blue: #c48286;

  --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(83, 39, 42, 0.2)
    ),
    url("@/assets/images/login/camera.png");

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* -----------------------------( tooltip package component )------------------------------------------------ */

.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);
}