:root {
  --primary: #239999;
  --secondary: #186b6b;
  --secondary-opacity: #bce4e4;
  --white: #ffffff;
  --white-50: rgba(255, 255, 255, 0.5);
  --white-20: rgba(255, 255, 255, 0.2);
  --black: #000000;
  --neutral: #7988a7;
  --light-bg: #083636;
  --dark-bg: #d3f8f8;
  --bg: #f5f6ff;
  --bg-50: #f5f6ff80;
  --hot-orange: rgba(211, 152, 0, 1);
  --light-secondary: rgba(201, 213, 238, 1);
  --dark-green: #0e4113;
  --crimson: #852121;
  --cyan: #c9d5ee;

  /* Alerts */
  --alert-red: #d71a21;
  --alert-blue: #0092ce;
  --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);
}
.hover: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, #bee5e5, white);
}

/* -----------------------------( 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);
}
.SubmitButtonComponentClass:disabled {
  background-color: var(--neutral);
  color: white;
}
.RejectButtonComponentClass:hover {
  border-color: var(--secondary);
  color: var(--secondary);
}

.RejectButtonComponentClass:disabled {
  border-color: var(--neutral);
  color: var(--neutral);
}

/* -----------------------------( footer component   )------------------------------------------------ */

.list-images-govahi img {
  height: fit-content;
  width: 100px !important;
  max-width: none !important;
}

/* -----------------------------( table component   )------------------------------------------------ */

.table-senf .MuiTableCell-root {
  font-family: "vazir-FD";
}

/* -----------------------------( aggreements component   )------------------------------------------------ */

.aggreements-page {
  text-align: right;
  line-height: 35px;
}
.agreement-list-style ol,
.agreement-list-style ul {
  list-style: decimal;
  text-align: justify;
}
/* -----------------------------( about us component   )------------------------------------------------ */

.aboutUs-page {
  text-align: right;
  line-height: 35px;
}
.aboutUs-page div,
.aboutUs-page ol,
.aboutUs-page ul {
  font-family: "vazir-FD";
}
.aboutUs-list-style ol {
  list-style-type: decimal;
  text-align: justify;
}
.aboutUs-list-style ul {
  list-style: disc;
  text-align: justify;
}

/* -----------------------------( vsaas page component   )------------------------------------------------ */

.vsaas-page-style {
  line-height: 35px;
}

.vsaas-page-style ol {
  list-style-type: decimal;
  text-align: justify;
}
.vsaas-page-style ul {
  list-style: disc;
  text-align: justify;
}

/* -----------------------------( colleage page component   )------------------------------------------------ */

.colleage-page-style {
  line-height: 35px;
}

.colleage-page-style ol {
  list-style-type: decimal;
  text-align: justify;
  margin-top: 20px;
}
.colleage-page-style ul {
  list-style: disc;
  text-align: justify;
}