input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  font-family: "Inter", sans-serif !important;
  color: #131126;
  font-weight: 400;
  background-color: #555;
}

@layer components {
  .displayLargeMedium {
    @apply font-medium text-6xl text-neutral-900 leading-[72px] -tracking-[0.02em];
  }

  .displayLargeSemiBold {
    @apply font-semibold text-6xl text-neutral-900 leading-[72px] -tracking-[0.02em];
  }

  .displayLargeBold {
    @apply font-bold text-6xl text-neutral-900 leading-[72px] -tracking-[0.02em];
  }

  .displayLargeExtraBold {
    @apply font-extrabold text-6xl text-neutral-900 leading-[72px] -tracking-[0.02em];
  }

  .displaySmallMedium {
    @apply font-medium text-[44px] text-neutral-900 leading-[48px] -tracking-[0.02em];
  }

  .displaySmallSemiBold {
    @apply font-semibold text-[44px] text-neutral-900 leading-[48px] -tracking-[0.02em];
  }

  .displaySmallBold {
    @apply font-bold text-[44px] text-neutral-900 leading-[48px] -tracking-[0.02em];
  }

  .displaySmallExtraBold {
    @apply font-extrabold text-[44px] text-neutral-900 leading-[48px] -tracking-[0.02em];
  }

  .headingH1MediumDesktop {
    @apply font-medium text-[40px] text-neutral-900 leading-[48px] -tracking-[0.02em];
  }

  .headingH1SemiBoldDesktop {
    @apply font-semibold text-[40px] text-neutral-900 leading-[48px] -tracking-[0.02em];
  }

  .headingH1BoldDesktop {
    @apply font-bold text-[40px] text-neutral-900 leading-[48px] -tracking-[0.02em];
  }

  .headingH1ExtraBoldDesktop {
    @apply font-extrabold text-[40px] text-neutral-900 leading-[48px] -tracking-[0.02em];
  }

  .headingH2MediumDesktop {
    @apply font-medium text-4xl text-neutral-900 leading-[44px] -tracking-[0.02em];
  }

  .headingH2SemiBoldDesktop {
    @apply font-semibold text-4xl text-neutral-900 leading-[44px] -tracking-[0.02em];
  }

  .headingH2BoldDesktop {
    @apply font-bold text-4xl text-neutral-900 leading-[44px] -tracking-[0.02em];
  }

  .headingH2ExtraBoldDesktop {
    @apply font-extrabold text-4xl text-neutral-900 leading-[44px] -tracking-[0.02em];
  }

  .headingH3MediumDesktop {
    @apply font-medium text-[32px] text-neutral-900 leading-10 -tracking-[0.02em];
  }

  .headingH3SemiBoldDesktop {
    @apply font-semibold text-[32px] text-neutral-900 leading-10 -tracking-[0.02em];
  }

  .headingH3BoldDesktop {
    @apply font-bold text-[32px] text-neutral-900 leading-10 -tracking-[0.02em];
  }

  .headingH3ExtraBoldDesktop {
    @apply font-extrabold text-[32px] text-neutral-900 leading-10 -tracking-[0.02em];
  }

  .headingH4MediumDesktop {
    @apply font-medium text-[28] text-neutral-900 leading-9 -tracking-[0.02em];
  }

  .headingH4SemiBoldDesktop {
    @apply font-semibold text-[28] text-neutral-900 leading-9 -tracking-[0.02em];
  }

  .headingH4BoldDesktop {
    @apply font-bold text-[28] text-neutral-900 leading-9 -tracking-[0.02em];
  }

  .headingH4ExtraBoldDesktop {
    @apply font-extrabold text-[28] text-neutral-900 leading-9 -tracking-[0.02em];
  }

  .headingH5MediumDesktop {
    @apply font-medium text-2xl text-neutral-900 leading-8 -tracking-[0.02em];
  }

  .headingH5SemiBoldDesktop {
    @apply font-semibold text-2xl text-neutral-900 leading-8 -tracking-[0.02em];
  }

  .headingH5BoldDesktop {
    @apply font-bold text-2xl text-neutral-900 leading-8 -tracking-[0.02em];
  }

  .headingH5ExtraBoldDesktop {
    @apply font-extrabold text-2xl text-neutral-900 leading-8 -tracking-[0.02em];
  }

  .headingH6MediumDesktop {
    @apply font-medium text-xl text-neutral-900 leading-7 -tracking-[0.02em];
  }

  .headingH6SemiBoldDesktop {
    @apply font-semibold text-xl text-neutral-900 leading-7 -tracking-[0.02em];
  }

  .headingH6BoldDesktop {
    @apply font-bold text-xl text-neutral-900 leading-7 -tracking-[0.02em];
  }

  .headingH6ExtraBoldDesktop {
    @apply font-extrabold text-xl text-neutral-900 leading-7 -tracking-[0.02em];
  }

  .headingH6MediumMobile {
    @apply font-medium text-lg text-neutral-900 leading-6 -tracking-[0.02em];
  }

  .headingH6SemiBoldMobile {
    @apply font-semibold text-lg text-neutral-900 leading-6 -tracking-[0.02em];
  }

  .headingH6BoldMobile {
    @apply font-bold text-lg text-neutral-900 leading-6 -tracking-[0.02em];
  }

  .headingH6ExtraBoldMobile {
    @apply font-extrabold text-lg text-neutral-900 leading-6 -tracking-[0.02em];
  }

  .paragraphLargeRegular {
    @apply font-normal text-lg text-neutral-900 leading-7;
  }

  .paragraphLargeMedium {
    @apply font-medium text-lg text-neutral-900 leading-7;
  }

  .paragraphLargeSemiBold {
    @apply font-semibold text-lg text-neutral-900 leading-7;
  }

  .paragraphLargeUnderline {
    @apply font-normal text-lg text-neutral-900 leading-7 underline;
  }

  .paragraphLargeStrikethrough {
    @apply font-normal text-lg text-neutral-900 leading-7 line-through;
  }

  .paragraphLargeItalic {
    @apply font-normal text-lg text-neutral-900 leading-7 italic;
  }

  .paragraphMediumRegular {
    @apply font-normal text-base text-neutral-900 leading-6;
  }

  .paragraphMediumMedium {
    @apply font-medium text-base text-neutral-900 leading-6;
  }

  .paragraphMediumSemiBold {
    @apply font-semibold text-base text-neutral-900 leading-6;
  }

  .paragraphMediumUnderline {
    @apply font-normal text-base text-neutral-900 leading-6 underline;
  }

  .paragraphMediumStrikethrough {
    @apply font-normal text-base text-neutral-900 leading-6 line-through;
  }

  .paragraphMediumItalic {
    @apply font-normal text-base text-neutral-900 leading-6 italic;
  }

  .paragraphSmallRegular {
    @apply font-normal text-sm text-neutral-900 leading-5;
  }

  .paragraphSmallMedium {
    @apply font-medium text-sm text-neutral-900 leading-5;
  }

  .paragraphSmallSemiBold {
    @apply font-semibold text-sm text-neutral-900 leading-5;
  }

  .paragraphSmallUnderline {
    @apply font-normal text-sm text-neutral-900 leading-5 underline;
  }

  .paragraphSmallStrikethrough {
    @apply font-normal text-sm text-neutral-900 leading-5 line-through;
  }

  .paragraphSmallItalic {
    @apply font-normal text-sm text-neutral-900 leading-5 italic;
  }

  .paragraphXSmallRegular {
    @apply font-normal text-xs text-neutral-900 leading-5;
  }

  .paragraphXSmallMedium {
    @apply font-medium text-xs text-neutral-900 leading-5;
  }

  .paragraphXSmallSemiBold {
    @apply font-semibold text-xs text-neutral-900 leading-5;
  }

  .paragraphXSmallUnderline {
    @apply font-normal text-xs text-neutral-900 leading-5 underline;
  }

  .paragraphXSmallStrikethrough {
    @apply font-normal text-xs text-neutral-900 leading-5 line-through;
  }

  .paragraphXSmallItalic {
    @apply font-normal text-xs text-neutral-900 leading-5 italic;
  }

  .paragraphOverlineSmall {
    @apply font-semibold text-xs text-neutral-900 leading-5 tracking-[1px];
  }

  .headingH5MediumMobile {
    @apply font-medium text-xl text-neutral-900 leading-7;
}

.paragraphSmallSpecialItalic{
      @apply font-normal text-sm text-neutral-900 leading-5 italic;
  }
}

/* Toggle switch css start  */
.switchToggle input:checked ~ .switchButton {
  background-color: primary-500;
}

.switchToggle input:checked ~ .dot {
  transform: translateX(80%);
  background-color: #fff;
}

/* Toggle switch css end  */

/* Checkbox styles start */

.checkboxstyle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

.checkboxstyle input[type="checkbox"] + .checkbox-label {
  position: relative;
  width: 100%;
}

.checkboxstyle input[type="checkbox"] + .checkbox-label::after {
  content: "";
  background: #fff;
  border-radius: 4px;
  display: inline-block;
  border: 1px solid #d3d2d8 !important;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  /* transition: all 250ms ease; */
}
/* 
.checkboxstyle input[type=checkbox]:checked+.checkbox-label::after {
    background-color: primary-500;
    background-image: url("./Assets/checked.svg");
    background-position: center;
    background-repeat: no-repeat;
    border: none !important;
    box-shadow: none !important;
} */

.checkboxstyle input[type="checkbox"]:focus + .checkbox-label:after {
  outline: none;
  border-color: rgb(21, 35, 73);
}

/* Checkbox styles end */

/* Radio button styles start */

.radioButton input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.radioButton input[type="radio"] + .radio-label {
  position: relative;
  width: 100%;
}

.radioButton input[type="radio"] + .radio-label::after {
  content: "";
  background: shades-50;
  border-radius: 100%;
  border: 2px solid #d3d2d8;
  display: inline-block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
}

.radioButton input[type="radio"]:checked + .radio-label::after {
  background-color: primary-500;
  box-shadow: inset 0 0 0 4px shades-50;
  border: 2px solid primary-500;
}

.radioButton input[type="radio"]:focus + .radio-label:after {
  outline: none;
  border-color: primary-500;
}

/* Radio button styles end */