@font-face {
  font-family: "vazir";
  src: url("../fonts/Vazir-FD.eot");
  src: url("../fonts/Vazir-FD.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Vazir-FD.woff2") format("woff2"),
    url("../fonts/Vazir-FD.woff") format("woff"),
    url("../fonts/Vazir-FD.ttf") format("truetype");
}

@font-face {
  font-family: "vazir";
  src: url("../fonts/Vazir-Bold-FD.eot");
  src: url("../fonts/Vazir-Bold-FD.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Vazir-Bold-FD.woff2") format("woff2"),
    url("../fonts/Vazir-Bold-FD.woff") format("woff"),
    url("../fonts/Vazir-Bold-FD.ttf") format("truetype");
  font-weight: bold;
}

@font-face {
  font-family: osmantaha;
  src: url('../fonts/osmantaha-Regular.ttf');
  src: url('../fonts/osmantaha-Regular.ttf') format('truetype');
  font-weight: normal;
}

@font-face {
  font-family: osmantaha;
  font-style: normal;
  font-weight: bold;
  src: url('../fonts/osmantaha-Bold.ttf');
  src: url("../fonts/osmantaha-Bold.ttf") format("truetype");
}


@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/IranSansX/IRANSansXFaNum-Black.woff') format('woff'),
    url('../fonts/IranSansX/IRANSansXFaNum-Black.woff2') format('woff2'),
    url("../fonts/IranSansX/IRANSansXFaNum-Black.ttf") format("truetype");
}

@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: bold;
  src: url('../fonts/IranSansX/IRANSansXFaNum-Bold.woff') format('woff'),
    url('../fonts/IranSansX/IRANSansXFaNum-Bold.woff2') format('woff2'),
    url("../fonts/IranSansX/IRANSansXFaNum-Bold.ttf") format("truetype");
}

@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 1000;
  src: url('../fonts/IranSansX/IRANSansXFaNum-Heavy.woff') format('woff'),
    url('../fonts/IranSansX/IRANSansXFaNum-Heavy.woff2') format('woff2'),
    url("../fonts/IranSansX/IRANSansXFaNum-Heavy.ttf") format("truetype");
}

@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/IranSansX/IRANSansXFaNum-Medium.woff') format('woff'),
    url('../fonts/IranSansX/IRANSansXFaNum-Medium.woff2') format('woff2'),
    url("../fonts/IranSansX/IRANSansXFaNum-Medium.ttf") format("truetype");
}












* {
  font-family: 'IRANSansX';
}


:root {
  --primary-color: #393C97;
  --primary-100-color: #F3F5FF;
  --primary-200-color: #D8DBF0;
  --primary-300-color: #BEC0E1;
  --primary-400-color: #A3A6D2;
  --primary-500-color: #898BC4;
  --primary-600-color: #6E71B5;
  --primary-600-color: #6E71B5;
  --primary-700-color: #5456A6;
  --primary-800-color: #393C97;
  --secondary-color: #37BEC1;
  --secondary-100-color: #FFFFF5;
  --secondary-200-color: #E2F6EE;
  --secondary-300-color: #C6ECE6;
  --secondary-400-color: #A9E3DF;
  --secondary-500-color: #8DDAD7;
  --secondary-600-color: #70D1D0;
  --secondary-700-color: #54C7C8;
  --secondary-800-color: #37BEC1;
  --red-color: #FF3378;
  --red-100-color: #FFE5EE;
  --red-800-color: #FF3378;

  --tertiary-color: #82C341;
  --fourthly-color: #8C5E2C;
  --fifthly-color: #E0AD70;
  --sixthly-color: #999999;
  --seventy-color: #973939;

  --secondary-filter: brightness(0) saturate(100%) invert(84%) sepia(95%) saturate(4387%) hue-rotate(132deg) brightness(81%) contrast(82%);
  --secondary-100-filter: brightness(0) saturate(100%) invert(99%) sepia(34%) saturate(248%) hue-rotate(347deg) brightness(100%) contrast(104%);
  --secondary-400-filter: brightness(0) saturate(100%) invert(97%) sepia(7%) saturate(1528%) hue-rotate(127deg) brightness(93%) contrast(90%);
  --primary-filter: brightness(0) saturate(100%) invert(26%) sepia(23%) saturate(3729%) hue-rotate(209deg) brightness(88%) contrast(84%);
  --primary-400-filter: brightness(0) saturate(100%) invert(71%) sepia(55%) saturate(238%) hue-rotate(199deg) brightness(86%) contrast(90%);
  --FFFFFF-filter: brightness(0) saturate(100%) invert(88%) sepia(99%) saturate(5%) hue-rotate(266deg) brightness(110%) contrast(97%);

  --bs-primary-rgb: 57, 60, 151;
  --bs-body-font-family: 'IRANSansX';
  --btn-active-color: #37BEC1;

}


a {
  text-decoration: none;
}


.login-input {
  background-color: var(--primary-100-color) !important;
  border-color: var(--primary-300-color) !important;
}

.login-input::placeholder {
  color: var(--primary-300-color) !important;
  opacity: 0.7;
}

.text-justify {
  text-align: justify;
}

.oni-body {
  background-color: var(--primary-100-color);
  max-width: 600px;
  padding: 0 20px;
}

.oni-border-color {
  border-color: #E0AD70 !important;
}


.btn-secondary,
.btn-secondary:active {
  background: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
}



.btn-secondary.disabled,
.btn-secondary:disabled {
  color: var(--secondary-400-color) !important;
  background-color: var(--secondary-100-color) !important;
  border-color: var(--secondary-400-color) !important;
}

.btn-secondary.disabled img,
.btn-secondary:disabled img {
  filter: var(--secondary-400-filter);
}


.btn-outline-secondary img {
  filter: var(--secondary-filter);
}

.btn-outline-secondary:hover img {
  filter: var(--secondary-100-filter);
}


.btn-outline-secondary,
.btn-outline-secondary:active {
  color: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
  background: var(--secondary-600-color) !important;
  border-color: var(--secondary-600-color)  !important;
  color: var(--secondary-100-color) !important;
}

.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
  color: var(--secondary-400-color) !important;
  border-color: var(--secondary-400-color) !important;
}



.btn-primary,
.btn-primary:active {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.btn-primary.disabled,
.btn-primary:disabled,
.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
  color: var(--primary-400-color) !important;
  background-color: var(--primary-100-color) !important;
  border-color: var(--primary-400-color) !important;
}

.btn-primary.disabled img,
.btn-primary:disabled img {
  filter: var(--primary-400-filter);
}

.btn-outline-primary img,
.btn-outline-primary:hover img,
.btn-outline-primary.disabled img,
.btn-outline-primary:disabled img {
  filter: var(--primary-filter);
}

.btn-outline-primary,
.btn-outline-primary:active {
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  background: none !important;

}

.btn-outline-primary:hover {
  background: var(--primary-300-color) !important;
  border-color: var(--primary-300-color) !important;
  color: var(--primary-color) !important;
}

.btn-active {
  border-color: var(--primary-300-color) !important;
  background-color: var(--primary-100-color) !important;
  color: var(--primary-color) !important;

}

.text-primary-400,
.text-primary.disabled,
.text-primary:disabled {
  color: var(--primary-400-color) !important;
}

.text-primary-600 {
  color: var(--primary-600-color) !important;
}

.bg-primary-100 {
  background-color: var(--primary-100-color) !important;
}

.border-primary-100 {
  border-color: var(--primary-100-color) !important;
}

.border-primary-200 {
  border-color: var(--primary-200-color) !important;
}

.border-primary-400 {
  border-color: var(--primary-400-color) !important;
}

.text-secondary {
  color: var(--secondary-color) !important;
}

.w-30 {
  width: 30% !important;
}

.f-12px {
  font-size: 12px !important;
}

.f-14px {
  font-size: 14px !important;
}

.f-16px {
  font-size: 16px !important;
}

.f-22px {
  font-size: 22px !important;
}

.f-28px {
  font-size: 28px !important;
}

.fw-heavy {
  font-weight: 1000;
}

.h-8px {
  height: 8px !important;
}

.h-12px {
  height: 12px !important;
}

.h-16px {
  height: 16px !important;
}

.h-24px {
  height: 24px !important;
}

.h-32px {
  height: 32px !important;
}

.h-40px {
  height: 40px !important;
}

.h-48px {
  height: 48px !important;
}

.h-96px {
  height: 96px !important;
}

.p-10px {
  padding: 10px !important;
}

.p-12px {
  padding: 12px !important;
}

.p-16px {
  padding: 16px !important;
}

.p-20px {
  padding: 20px !important;
}

.p-24px {
  padding: 24px !important;
}

.my-4px {
  margin-left: 4px !important;
  margin-right: 4px !important;
}

.ml-5 {
  margin-left: 3rem !important;
}

.mr-5 {
  margin-right: 3rem !important;
}

.rounded-8px {
  border-radius: 8px !important;
}

.rounded-12px {
  border-radius: 12px !important;
}

.rounded-16px {
  border-radius: 16px !important;
}

.rounded-24px {
  border-radius: 24px !important;
}

.border-top-1 {
  border-top: 1px solid;
}

#login {
  background: var(--secondary-color);
  background: url('../image/vector.png'), linear-gradient(225deg, var(--secondary-color) 0%, var(--primary-color) 100%);
  height: 394px;
}

#user-info {
  border-color: var(--primary-200-color);

}

.oni-form {
  height: 570px;
}

.oni-social a img {
  transition: filter 0.3s ease-in-out;
}

.oni-social a img:hover {
  filter: brightness(0) saturate(100%) invert(18%) sepia(54%) saturate(1074%) hue-rotate(208deg) brightness(91%) contrast(91%);
}

.cont-bg {
  background-image: url('../image/cont-bg.svg');
  background-repeat: no-repeat;
  background-size: auto;
  width: 95px;
  height: 26px;
  padding: .625rem;
}

.number-question {
  cursor: pointer;
}

.number-question .number {
  background-image: url('../image/q-primary.svg');
  background-size: 48px;
  background-repeat: no-repeat;
  width: 48px;
  line-height: 2.3;
}

.number-question span {
  color: var(--primary-400-color);
}

.number-question.q-info .number {
  background-image: url('../image/q-info.svg') !important;
}

.number-question.q-info span {
  color: var(--primary-color) !important;
}


.number-question.q-success .number {
  background-image: url('../image/q-success.svg') !important;
}

.number-question.q-success span {
  color: var(--secondary-700-color) !important;
}

.number-question.q-error .number {
  background-image: url('../image/q-error.svg') !important;
}

.number-question.q-error span {
  color: var(--red-color) !important;
}

.label-answer {
  border-color: var(--primary-200-color) !important;
  background-color: var(--primary-100-color) !important;
  color: var(--primary-color) !important;
}



.label-answer .check-icon {
  background-image: url('../image/a-primary.svg');
  background-size: 20px;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
}


.label-answer.a-error {
  border-color: var(--red-color) !important;
  background-color: var(--red-100-color) !important;
  color: var(--red-color) !important;
}

.label-answer.a-error .check-icon {
  background-image: url('../image/a-error.svg');
  background-size: 20px;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
}


.label-answer.a-success {
  border-color: var(--secondary-400-color) !important;
  background-color: var(--secondary-200-color) !important;
  color: var(--secondary-color) !important;
}

.label-answer.a-success .check-icon {
  background-image: url('../image/a-success.svg');
}


#endMatch .modal-body {
  /* background-image: url('../image/endMatch-bg.svg'); */
  background-repeat: no-repeat;
  background-size: 100%;
}

.login-box form {
  padding: 30px;
  border-radius: 10px;
}

.timer {
  font-size: 1.2em;
  margin-top: 10px;
}


.pagination .page-item.active {
  background-color: var(--primary-color) !important;
}


.all-count {
  background-image: url('../image/all-count.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  height: 90px;
}

.all-match {
  background-image: url('../image/all-match.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  height: 90px;
}


.today-count {
  background-image: url('../image/today-count.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  height: 90px;
}

.today-match {
  background-image: url('../image/today-match.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  height: 90px;
}


#sort-input {
  padding-right: 40px;
}

.this_sort {
  margin-top: -20px;
}

.this_sort select {
  width: 150px;
}

.this_sort img {
  margin-bottom: -65px;
  margin-right: 12px
}


@media (max-width: 768px) {


  * {
    font-size: 13px;
  }


  h5 {
    font-size: 15px;
  }


  .card-title {
    line-height: 2;
  }

  .login-box form {
    width: 100% !important;
  }

  .additional-link-img {
    height: 70px;
  }

}

@media (max-width: 576px) {}

/* استایل پوشش (Overlay) */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

body.no-scroll {
  overflow: hidden;
}

/* استایل لودر */
.loader {
  width: 50px;
  height: 50px;
  border: 5px solid var(--primary-color);
  border-top: 5px solid var(--secondary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}