* {
  /* font-family: 'Work Sans', sans-serif; */
  /* font-family: "Poppins", sans-serif; */
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  /* box-sizing: border-box; */
}

.font-special {
  font-family: "Plus Jakarta Sans", sans-serif !important;
}

:root {
  /* --primary-color: #7d63ff;
  --primary-color-faded: #ff9b2da9;
  --secondary-color: #1264ab;
  --secondary-color-faded: #1264aba9;
  --tertiary-color: #2684ff;

  --off-white-alt: #f7fafc;
  --off-white: #f9f9f9;

  --header-height: 68px;
  --sidebar-width: 275px;
  --sidebar-width-actual: calc(var(--sidebar-width) + 2rem); */

  /* 1rem responsive value */
  --rv-1: clamp(10px, 0.9vw, 1rem);
  --rv-2: clamp(20px, 1.675vw, 2rem);
  --rv-3: clamp(30px, 2.45vw, 3rem);

  --rv-1-new: clamp(14px, 0.9vw, 0.9rem);

  --rv-5: clamp(50px, 4.225vw, 5rem);
  --rv-6: clamp(60px, 4.9vw, 6rem);

  --rv-1-125: clamp(12px, 0.9vw, 18px);
  --rv-1-25: clamp(14px, 1.1vw, 20px);
  --rv-1-3: clamp(13px, 1.225vw, 1.3rem);
  --rv-1-5: clamp(15px, 1.35vw, 1.5rem);
  --rv-1-75: clamp(17px, 1.575vw, 1.75rem);
  --rv-2-5: clamp(25px, 2.225vw, 2.5rem);
  --rv-3-5: clamp(35px, 3.225vw, 3.5rem);

  --rv-0-5: clamp(5px, 0.45vw, 0.5rem);
  --rv-0-75: clamp(7px, 0.675vw, 0.75rem);
  --rv-0-8: clamp(8px, 0.75vw, 0.8rem);
  --rv-0-9: clamp(9px, 0.8vw, 0.9rem);
}

/* font sizes */

.font-1 {
  font-size: var(--rv-1);
}

.font-1-125 {
  font-size: var(--rv-1-125) !important;
}

.font-1-25 {
  font-size: var(--rv-1-25) !important;
}

.font-1-3 {
  font-size: var(--rv-1-3) !important;
}

.font-1-5 {
  font-size: var(--rv-1-5) !important;
}

.font-1-75 {
  font-size: var(--rv-1-75);
}

.font-2 {
  font-size: var(--rv-2);
}

.font-2-5 {
  font-size: var(--rv-2-5);
}

.font-3 {
  font-size: var(--rv-3);
}

.font-3-5 {
  font-size: var(--rv-3-5);
}

/* font-weight: 700;
 */

.font-bold {
  font-weight: 700;
}

/* custom colors */

.bg-dark-blue {
  background-color: #050b20;
}

.text-special-red {
  color: #db1722;
}

/*  */

/* bootstrap */

/* CUSTOM WIDTHS */
.w-10, .w-xs-10 { width: 10%!important; }
.w-15, .w-xs-15 { width: 15%!important; }
.w-20, .w-xs-20 { width: 20%!important; }

/* BREAKPOINTS */

/* SM breakpoint */
@media (min-width: 576px) {
    /* CUSTOM WIDTHS */
    .w-sm-10 { width: 10%!important; }
    .w-sm-15 { width: 15%!important; }
    .w-sm-20 { width: 20%!important; }
}

/* MD breakpoint*/
@media (min-width: 768px) {
    /* CUSTOM WIDTHS */
    .w-md-10 { width: 10%!important; }
    .w-md-15 { width: 15%!important; }
    .w-md-20 { width: 20%!important; }
    .w-md-100 { width: 100%!important; }
}

/* LG breakpoint */
@media (min-width: 992px) {
    /* CUSTOM WIDTHS */
    .w-lg-10 { width: 10%!important; }
    .w-lg-15 { width: 15%!important; }
    .w-lg-20 { width: 20%!important; }
}

@media only screen and (min-width: 734px) {
  .px-lg-50 {
    padding-left: 18rem !important;
    padding-right: 18rem !important;
  }
}

@media only screen and (max-width: 734px) {
  .md\:font-1 {
    font-size: var(--rv-1-25);
  }
}

@media only screen and (max-width: 734px) {
  :root {
    --rv-1: clamp(15px, 0.9vw, 1rem);
    --rv-3-5: clamp(30px, 3.225vw, 3.5rem);
  }
}

@-moz-document url-prefix() {
  html,
  body {
    scrollbar-width: none;
  }
}

body::-webkit-scrollbar {
  display: none;
}

body {
  width: 100vw;
  overflow-x: hidden;
}

a.nostyle:link {
  text-decoration: inherit;
  /* color: inherit; */
}

/* flexCont img */

.productFlexBox .card-img img,
.fixedBox .card-img img {
  /* width: 300px; */
  /* max-width: 400px; */
  min-height: 300px;
  height: 30vh;
  object-fit: contain;
  object-position: center;
  padding: 1rem;
}

.fixedBox .card-img {
  background: #f4f4f4;
}

@media (orientation: portrait) {
  .productFlexBox .card-img img,
  .fixedBox .card-img img {
    min-height: unset;
    height: 25vh;
  }
}

/* scroller main */

.scroller {
  padding-right: 2vw;
  scrollbar-color: #1f1f1f rgba(196, 196, 196, 0.5);
  scrollbar-width: thin;
}

.scroller::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(196, 196, 196, 0.5);
  box-shadow: inset 0 0 6px rgba(196, 196, 196, 0.5);
  background-color: #ddd;
}

.scroller::-webkit-scrollbar {
  width: 2px;
  background-color: #ddd;
}

.scroller::-webkit-scrollbar-thumb {
  background-color: #1f1f1f;
}

.scroller::-webkit-scrollbar-corner {
  background-color: #1f1f1f;
}

/* scrollbar alt */

.customScroller {
  scrollbar-color: #aba499 #202324;
  scrollbar-width: thin;
}

.customScroller::-webkit-scrollbar-track {
  background-color: #202324;
  color: #aba499;
}

.customScroller::-webkit-scrollbar {
  width: 6px;
  background-color: #202324;
  color: #aba499;
}

.customScroller::-webkit-scrollbar-thumb {
  background-color: #454a4d;
}

.customScroller::-webkit-scrollbar-corner {
  background-color: #181a1b;
}

.noSelect {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none !important;
}

.btn {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.btnCust {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.btnNoHover {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.btn:hover {
  opacity: 0.9;
}

:root {
  --tests-accent: #4485fd;
  --results-accent: #a584ff;
  --teachers-accent: #ff3600;
}

.imgClass {
  width: 100%;
  height: 100%;
  object-fit: contain;
  -o-object-fit: contain;
}

/* .img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  -o-object-fit: contain;
} */

/* Alert Box */

.custom-alert {
  position: fixed;
  bottom: 5vh;
  z-index: 1060;
  left: 50%;
  transform: translate(-50%, 0);
}

.custom-alert .alert-text {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  background: #000000;
  border-radius: 10px;
  padding: 0.7rem 1.7rem;

  color: #ffffff;
  font-size: 1.1rem;
}

.custom-alert.danger-alert .alert-text {
  background: #e35d6a;
  background: #f53d3d;
  /* color: #721c24;
      background: #f8d7da;
      border: 1px solid #f5c6cb; */
}

.custom-alert.warning-alert .alert-text {
  color: #856404;
  background: #fff3cd;
  border: 1px solid #ffeeba;
}

.custom-alert.info-alert .alert-text {
  background: #3d8bfd;
}

.custom-alert.success-alert .alert-text {
  background: #1db954;
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

@media (orientation: portrait) {
  .custom-alert {
    width: 90%;
  }

  .custom-alert .alert-text {
    font-size: 1rem;
  }
}