:root {
  --primary: #1f2159;
  --secondary: #23266b;
  --white: #ffffff;
  --black: #000929;

  --red: #e30c1c;

  --red-50: #f9e0e2;
  --red-300: #cd8d91;

  --orange-50: #f9f3e0;
  --orange-300: #cdc68d;

  --green-50: #e9f9e0;
  --green-300: #a1cd8d;

  --blue-50: #eef4ff;
  --blue-100: #e0eaff;
  --blue-200: #c6d8ff;
  --blue-300: #a4bcfd;
  --blue-400: #7f97fa;

  --grey-50: #f9fafb;
  --grey-100: #f4f4f6;
  --grey-200: #e5e6eb;
  --grey-300: #e5e6eb;
  --grey-400: #9ea3ae;
  --grey-500: #6c727f;
  --grey-600: #4d5461;
  --grey-700: #394150;
  --grey-800: #212936;
  --grey-900: #0b0a0f;

  --purple-50: #f6f2ff;
  --purple-100: #eee8ff;
  --purple-200: #dfd4ff;
  --purple-300: #c8b2ff;
  --purple-400: #a478ff;

  --dpe-a: #61a333;
  --dpe-b: #6ea932;
  --dpe-c: #a4c22f;
  --dpe-d: #eae23d;
  --dpe-e: #eaa431;
  --dpe-f: #ce3c24;
  --dpe-g: #c80c24;

  --ges-a: #f5ecf4;
  --ges-b: #d6bfdb;
  --ges-c: #c5a9cc;
  --ges-d: #b695c0;
  --ges-e: #9b75ab;
  --ges-f: #7e5799;
  --ges-g: #6a428e;

  --radius: 8px;
}

@font-face {
  font-family: "Montserrat-Bold";
  src: url("../fonts/Montserrat-Bold.ttf");
}

@font-face {
  font-family: "Montserrat-ExtraBold";
  src: url("../fonts/Montserrat-ExtraBold.ttf");
}

@font-face {
  font-family: "Montserrat-Regular";
  src: url("../fonts/Montserrat-Regular.ttf");
}

@font-face {
  font-family: "Montserrat-Medium";
  src: url("../fonts/Montserrat-Medium.ttf");
}

body {
  font-family: "Montserrat-Regular", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

a,
a:hover {
  text-decoration: none;
}

p a,
p a:hover {
  color: var(--blue-400);

  border-bottom: 1px solid var(--blue-400);

  padding-bottom: 2px;
}

a.no-border {
  border: 0;
}

button {
  border: 0;
}

p {
  font-size: 16px;
}

hr {
  height: 0;
  border: 0;
  border-top: 1.5px solid var(--grey-200);
  opacity: 1;

  margin: 40px 0;
}

h1,
h2,
h3,
h3,
h4 {
  font-weight: bold;
  font-family: "Montserrat-Bold";
}

.title {
  margin: 0;

  color: var(--black);

  font-weight: bold;
  font-family: "Montserrat-Bold";
}

.subtitle {
  color: var(--grey-400);
}

.text-grey {
  color: var(--primary);
  opacity: 0.5;
}

.no-wrap {
  white-space: nowrap;
}

/* utilities */
.w-full {
  width: 100%;
}

.w-fit {
  width: fit-content;
}

.h-auto {
  height: auto;
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap-sm {
  gap: 2px;
}

.gap-md {
  column-gap: 4px;
  row-gap: 6px;
}

.gap-lg {
  column-gap: 8px;
  row-gap: 10px;
}

.gap-xl {
  column-gap: 14px;
  row-gap: 10px;
}

.text-purple-400 {
  color: var(--purple-400);
}

.text-blue-300 {
  color: var(--blue-300);
}

.text-blue-400 {
  color: var(--blue-400);
}

.opacity-50 {
  opacity: 0.5;
}

.text-sm {
  font-size: 12px;
}

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

.text-lg {
  font-size: 16px;
}

.text-xl {
  font-size: 18px;
}

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

.title-1 {
  font-size: 40px;
  line-height: 110%;
}

.title-2 {
  font-size: 24px;
  margin-bottom: 15px;
}

.title-4 {
  font-size: 16px;
  margin: 0;
}

.font-bold {
  font-weight: bold;
  font-family: "Montserrat-Bold";
}

.h-50 {
  height: 50px;
}

.mb-10 {
  margin-bottom: 120px;
}

/* primary button */
.button {
  display: inline-flex;
  justify-content: center;

  border: 0;
  border-radius: var(--radius);

  font-weight: bold;
  font-family: "Montserrat-Bold";

  cursor: pointer;
  transition: 0.2s;
}

.button-primary {
  display: inline-flex;

  background: var(--primary);
  color: var(--white);

  font-weight: bold;
  font-family: "Montserrat-Bold";
}

.button-primary:hover {
  filter: brightness(160%);
}

.button-secondary {
  background: var(--white);
  color: var(--primary);

  border: 1.5px solid var(--blue-300);
  border-radius: var(--radius);
}

.button-secondary:hover {
  filter: brightness(95%);
}

.button-purple {
  background: var(--purple-200);

  color: var(--primary);
}

.button-blue {
  background: var(--blue-50);
  border: 1.5px solid var(--blue-100);
  color: var(--primary);
}

.button-purple:hover,
.button-blue:hover {
  filter: brightness(93%);
}

.button-md {
  padding: 10px 24px;

  font-size: 16px;
}

.button-lg {
  padding: 10px 24px;

  font-size: 16px;
}

/* Icon */
.icon {
  flex-shrink: 0;
}

.icon-white {
  filter: invert(98%) sepia(0%) saturate(7466%) hue-rotate(112deg)
    brightness(102%) contrast(102%);
}

.icon-primary {
  filter: invert(9%) sepia(80%) saturate(2354%) hue-rotate(230deg)
    brightness(93%) contrast(93%);
}

.icon-red {
  filter: invert(26%) sepia(56%) saturate(4210%) hue-rotate(341deg)
    brightness(81%) contrast(124%);
}

.icon-blue-200 {
  filter: invert(81%) sepia(85%) saturate(938%) hue-rotate(180deg)
    brightness(98%) contrast(107%);
}

.icon-blue-400 {
  filter: invert(58%) sepia(44%) saturate(2987%) hue-rotate(204deg)
    brightness(105%) contrast(96%);
}

.icon-purple-300 {
  filter: invert(76%) sepia(31%) saturate(1286%) hue-rotate(197deg)
    brightness(101%) contrast(101%);
}

.icon-purple-400 {
  filter: invert(75%) sepia(48%) saturate(7292%) hue-rotate(223deg)
    brightness(99%) contrast(104%);
}

.icon-success {
  display: block;
  background: url("../images/heroicons/check-icon.svg");
  background-size: contain;
  width: 25px;
  height: 25px;
  padding-right: 10px;
  filter: invert(66%) sepia(18%) saturate(7395%) hue-rotate(73deg)
    brightness(91%) contrast(89%);
}

.icon-error {
  display: block;
  background: url("../images/heroicons/x-mark.svg");
  background-size: contain;
  width: 25px;
  height: 25px;
  padding-right: 10px;
  filter: invert(26%) sepia(56%) saturate(4210%) hue-rotate(341deg)
    brightness(81%) contrast(124%);
}

.text-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* form */
.input {
  width: 100%;

  padding: 10px;

  font-size: 16px;

  border: 1px solid var(--blue-300);
  border-radius: var(--radius);

  outline: 0;
}

.form-group {
  width: 100%;
}

.input-group {
  display: flex;
}

.input-group-input {
  width: 100%;

  padding: 10px;

  font-size: 16px;

  border: 1px solid var(--blue-300);
  border-radius: var(--radius) 0 0 var(--radius);

  outline: 0;
}

.input-group-input::placeholder {
  position: absolute;
  top: 50%;
  right: 35px;
  transform: translateY(-50%);

  opacity: 0.5;

  font-size: 16px;
}

.input-group-label {
  padding: 10px 20px;

  color: rgba(0, 0, 0, 0.5);
  font-size: 16px;

  border: 1px solid var(--blue-300);
  border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.textarea {
  width: 100%;
  padding: 10px;
  background: var(--blue-50);
  border: 1px solid var(--blue-300);
  border-radius: var(--radius);
  outline: 0;
}

.select {
  appearance: none;
  /* safari */
  -webkit-appearance: none;

  width: 100%;

  padding: 10px;

  font-size: 16px;

  border: 1px solid var(--blue-300);
  border-radius: var(--radius);

  background: url("../images/heroicons/select-marker.svg");
  background-repeat: no-repeat;
  background-position: center right 14px;
  background-size: 18px;

  outline: 0;
}

/* alert */
.alert {
  width: 100%;
  padding: 10px;
}

.alert-danger {
  background: var(--red-50);
  border: 1px solid var(--red-300);
  border-radius: var(--radius);
}

.alert-warning {
  background: var(--orange-50);
  border: 1px solid var(--orange-300);
  border-radius: var(--radius);
}

.alert-success {
  background: var(--green-50);
  border: 1px solid var(--green-300);
  border-radius: var(--radius);
}

/* toast */

.toast-custom {
  background: var(--white);
  color: var(--black);
  border-radius: var(--radius);
}