@font-face {
    font-family: 'Qanelas';
    src: url(/7b41242f39b64d2d7cd3.eot);
    src: url(/7b41242f39b64d2d7cd3.eot?#iefix) format('embedded-opentype'),
        url(/00d893acc068c88042f9.woff2) format('woff2'),
        url(/80e4ff911e77c0d0285d.woff) format('woff'),
        url(/b70e248312b7de8f4147.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Qanelas';
    src: url(/b81bdcbbfea95229d1e6.eot);
    src: url(/b81bdcbbfea95229d1e6.eot?#iefix) format('embedded-opentype'),
        url(/a095328500b2dd3708bc.woff2) format('woff2'),
        url(/6d31bef053a7a36cf288.woff) format('woff'),
        url(/1ad4e3492e179122d830.ttf) format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Qanelas';
    src: url(/be17adda05eaf502eaae.eot);
    src: url(/be17adda05eaf502eaae.eot?#iefix) format('embedded-opentype'),
        url(/1799fae3a52025333d3c.woff2) format('woff2'),
        url(/20f7d964bde395153178.woff) format('woff'),
        url(/75089dbd43c486e468c8.ttf) format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Qanelas';
    src: url(/2954c0d4e33b0f97681a.eot);
    src: url(/2954c0d4e33b0f97681a.eot?#iefix) format('embedded-opentype'),
        url(/036d59070a88610eb494.woff2) format('woff2'),
        url(/79adcaab8b52748d6c1e.woff) format('woff'),
        url(/02c3e64ad6f684be4bec.ttf) format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


/*----- General Css Start -----*/

:root {
  --primaryColor: #5f259e;
  --secondaryColor: #ff9013;
  --grayColor: #666666;
  --redColor: #ff0000;
  --greenColor: #42c900;
  --yellowColor: #e5bb45;
}

body {
  font-family: "Qanelas" !important;
  font-weight: 500;
}

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

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

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

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

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

.notButton {
  border: none;
  background: none;
  outline: none !important;
  box-shadow: none !important;
}

.classicToggle::after {
  display: none;
}

.Toastify__toast {
  font-family: "Qanelas";
}

/*----- General Css End -----*/

/*----- Modal Css Start -----*/

.closeButton {
  font-size: 16px;
  color: #fff;
  background: var(--primaryColor);
  width: 30px;
  height: 30px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  outline: none;
  margin: 0.5rem;
  margin-left: auto;
}

.modalImage {
  width: 90px;
  margin-bottom: 1rem;
}

.modalContent {
  margin: 1rem 0;
}

.modalHeading {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 1rem;
}

/*----- Modal Css End -----*/

/* ------- Card Css -------- */

.variant-card {
  min-height: 200px;
  background-color: #fff;
  padding: 2rem;
  border-radius: 1.5rem;

  box-shadow: 1px 1px 10px 0px rgba(115, 103, 103, 0.75);
  -webkit-box-shadow: 1px 1px 10px 0px rgba(115, 103, 103, 0.75);
  -moz-box-shadow: 1px 1px 10px 0px rgba(115, 103, 103, 0.75);
}

.product-card {
  height: 300px;
  background-color: #fff;
  padding: 1rem;
  border-radius: 1rem;

  box-shadow: 1px 1px 10px 0px rgba(115, 103, 103, 0.75);
  -webkit-box-shadow: 1px 1px 10px 0px rgba(115, 103, 103, 0.75);
  -moz-box-shadow: 1px 1px 10px 0px rgba(115, 103, 103, 0.75);
}

.product-upper {
  display: flex;
  flex-direction: row;
  height: 30%;
  align-items: center;
}

.product-lower {
  height: 70%;
}

.product-card-image {
  padding: 0.5rem;
  width: 30%;
  height: 50%;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-card-content {
  height: 50%;
}

.product-label {
  color: var(--primaryColor);
  margin-bottom: 0.2rem;
  white-space: nowrap;
}

/* ------- Card Css End -------- */

.dashCard {
  /* background: #fff; */
  border-radius: 0.5rem;
  /* padding: 1rem 1rem; */
}

.mainTitle {
  font-size: 22px;
  font-weight: 600;
}
.profileImage {
  margin-right: 40px;
}
.profileImage img {
  /* height: 270px; */
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: center;
  outline-offset: 4px;
}

.statusBadge {
  font-size: 15px;
  color: #fff;
  padding: 0.4rem 0.8rem;
  border-radius: 99px;
  position: relative;
  left: 2rem;
}

.statusBadgeActive {
  background: var(--greenColor);
}

.statusBadgeInactive {
  background: var(--redColor);
}

.secondaryLabel {
  font-size: 15px;
  font-weight: 700;
  color: #a2a2a2;
  margin-bottom: 0.2rem;
}

.secondaryText {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  margin-bottom: 0.2rem;
}
.action-dots {
  font-size: 25px;
  color: var(--primaryColor);
}

.verification-box {
    display: flex;
    gap: 15px;
}

input[type=number]::-webkit-inner-spin-button {
    display: none;
}

.verification-box input {
    width: 75px;
    height: 75px;
}


@media(max-width: 640px) {

.verification-box input {
    width: 50px;
    height: 50px;
}
}
.authBg {
  /* background-image: url("../../../Assets/images/background.png"); */
  background-size: cover;
  background-position: center;
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.text-theme-primary {
  color: var(--primaryColor);
}

.authBox {
  padding: 80px 0;
  /* background-color: #fff; */
  border-radius: 1rem;
  /* border: #929292 0.1px groove; */
}

.authImage img {
  width: 100%;
  max-width: 100%;
}

.authFormWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.authForm {
  border-radius: 0px;
  padding: 2rem 3rem;
  width: 100%;
  height: 60vh;
}

.authLogo {
  margin-bottom: 1rem;
  text-align: center;
}

.authLogo img {
  max-width: 80%;
  height: 200px;
}

.authFormHeader {
  /* text-align: center; */
  margin: 2rem 0;
}

.authTitle {
  font-size: 28px;
  font-weight: 700;
  color: var(--primaryColor);
}

.authPara {
  font-size: 16px;
  font-weight: 600;
  color: #666;
}
.authVector {
  height: 100%;
  width: 100%;
  object-fit: cover;
  aspect-ratio: 2.7/3.6;
}
@media screen and (max-width: 767px) {
  .authVector {
    display: none;
  }
}

.inputWrapper {
  margin-bottom: 1rem;
}

.mainLabel {
  font-size: 15px;
  color: #333;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.mainLabel span {
  color: #8dc63f;
}

.mainHeading {
  font-size: 22px;
  color: #333;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

input[type="checkbox"] {
  accent-color: #8dc63f;
}

.mainInput {
  background: #fff;
  border: none;
  font-weight: 400;
  box-shadow: 0px 2px 4px rgb(0 0 0 / 20%);
  padding: 12px 15px;
  font-size: 15px;
  color: #141414;
  width: 100%;
  resize: none;
  border-radius: 5px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
}

.passwordWrapper {
  position: relative;
}

.eyeButton {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.5rem;
  font-size: 1rem;
  background: none;
  border: none;
  line-height: 1;
}

.passInput {
  padding-right: 2rem;
}

.eyeButton {
  color: var(--primaryColor);
}

.customButton {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  text-transform: capitalize;
  text-align: center;
  border: 1px solid;
  border-radius: 6px;
  width: 100%;
  padding: 1.2rem 0rem;
  min-width: 120px;
  position: relative;
  transition: 0.3s linear;
  cursor: pointer;
}

.customButton2 {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  text-transform: capitalize;
  text-align: center;
  border: 1px solid;
  border-radius: 6px;
  padding: 0.7rem 3.2rem;
  min-width: 120px;
  position: relative;
  transition: 0.3s linear;
  cursor: pointer;
}

.primaryButton {
  background: var(--primaryColor);
  color: #fff;
  border-color: var(--primaryColor);
}

.hoveredButton:hover {
  color: var(--primaryColor);
}

.rounded-50 {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px;
  padding: 0;
  border-radius: 50px;
}

.secondaryButton {
  background: #fff0;
  color: #000;
  border-color: var(--primaryColor);
}