:root {

  /* Animations */
  --cubic-default: cubic-bezier(0.625, 0.05, 0, 1);
  --duration-default-double: 1.6s;
  /* Double of default */
  --duration-default-onehalf: 1.2s;
  /* One & Half of default */
  --duration-default: 0.8s;
  --duration-default-half: 0.4s;
  --duration-default-quarter: 0.2s;

  /* Half of default */
  --animation-default-double: var(--duration-default-double) var(--cubic-default);
  --animation-default-onehalf: var(--duration-default-onehalf) var(--cubic-default);
  /*Hover Animations */
  --animation-hover-default: var(--duration-default) var(--hover-effect);
  --animation-hover-double: var(--duration-default-double) var(--hover-effect);
  --animation-hover-onehalf: var(--duration-default-onehalf) var(--hover-effect);

  /* Quarter of default */
  --animation-default: var(--duration-default) var(--cubic-default);
  --animation-default-half: var(--duration-default-half) var(--cubic-default);
  --animation-default-quarter: var(--duration-default-quarter) var(--cubic-default);
  --animation-hover-half: var(--duration-default-half) var(--hover-effect);
  --animation-ease: 0.2s ease;
  --animation-ease-double: 0.4s ease;
  --cubic-bounce: linear(0, 0.5737 7.6%, 0.8382 11.87%, 0.9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, 0.9995 46.99%, 0.9872 51.63%, 0.9842 58.77%, 1.0011 81.26%, 1);
  --hover-effect: linear(0 0%, 0.005892 1%, 0.022227 2%, 0.047151 3%, 0.079006 4%, 0.116321 5%, 0.157797 6%, 0.202293 7.000000000000001%, 0.248818 8%, 0.296516 9%, 0.344652 10%, 0.392606 11%, 0.439857 12%, 0.485977 13%, 0.530617 14.000000000000002%, 0.573504 15%, 0.614426 16%, 0.653228 17%, 0.689804 18%, 0.724091 19%, 0.756062 20%, 0.785721 21%, 0.813097 22%, 0.838242 23%, 0.861223 24%, 0.882123 25%, 0.901035 26%, 0.918061 27%, 0.933305 28.000000000000004%, 0.946879 28.999999999999996%, 0.958894 30%, 0.96946 31%, 0.978689 32%, 0.986687 33%, 0.993561 34%, 0.999411 35%, 1.004333 36%, 1.00842 37%, 1.011758 38%, 1.014427 39%, 1.016506 40%, 1.018063 41%, 1.019165 42%, 1.019871 43%, 1.020237 44%, 1.020313 45%, 1.020144 46%, 1.019771 47%, 1.019232 48%, 1.018558 49%, 1.01778 50%, 1.016922 51%, 1.016007 52%, 1.015055 53%, 1.014083 54%, 1.013105 55.00000000000001%, 1.012133 56.00000000000001%, 1.011177 56.99999999999999%, 1.010246 57.99999999999999%, 1.009346 59%, 1.008483 60%, 1.00766 61%, 1.006882 62%, 1.006148 63%, 1.005462 64%, 1.004822 65%, 1.00423 66%, 1.003683 67%, 1.003182 68%, 1.002725 69%, 1.002309 70%, 1.001933 71%, 1.001595 72%, 1.001293 73%, 1.001024 74%, 1.000786 75%, 1.000578 76%, 1.000396 77%, 1.000238 78%, 1.000103 79%, 0.999989 80%);
}

.form_tabs_button_item.is-active::before {
  content: '';
  background: linear-gradient(90deg, var(--swatch--brand), var(--swatch--brand-2), var(--swatch--brand-2), var(--swatch--brand));
  height: 30%;
  width: 70%;
  position: absolute;
  left: 15%;
  bottom: -20%;
  z-index: -5;
  background-size: 100%;
  -webkit-filter: blur(25px);
  filter: blur(25px);
}

.form_tabs_button_item.is-active .form_tabs_button_content {
  border-color: var(--swatch--brand);
  background-image: radial-gradient(circle closest-corner at 55% 185%, var(--swatch--brand-2), rgba(38, 33, 73, 0)), linear-gradient(180deg, var(--swatch--brand), var(--swatch--border-color));

}

.bg-texture-1 {
  --color-1: rgba(28, 31, 41, 0);
  --color-2: rgb(34, 37, 49);
  background-image: radial-gradient(circle at center center, rgba(28, 31, 41, 0), rgb(28, 31, 41)), repeating-linear-gradient(135deg, rgb(28, 31, 41) 0px, rgb(28, 31, 41) 2px, transparent 2px, transparent 8px), repeating-linear-gradient(45deg, rgb(34, 37, 49) 0px, rgb(34, 37, 49) 5px, transparent 4px, transparent 6px), linear-gradient(90deg, rgb(28, 31, 41), rgb(28, 31, 41));
}

.bg-texture-2 {

  background-image: repeating-linear-gradient(45deg, transparent 0px, transparent calc(var(--hatch-size, 6px) - 1px), var(--hatch-color, rgba(35, 37, 48, 0.6)) calc(var(--hatch-size, 8px) - 1px), var(--hatch-color, rgba(35, 37, 48, 0.2)) var(--hatch-size, 4px));
}

.bg-texture-3 {
  background:
    var(--swatch--dark-secondary) repeating-linear-gradient(34deg, #4442 0px, #4442 2px, transparent 2px, transparent 6px);
}

.form_tabs_button_content::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  top: 0px;
  left: 0px;
  border-left: 1px solid var(--swatch--brand-2);
  border-top: 1px solid var(--swatch--brand-2);
  transition: var(--animation-hover-default);
}

.form_tabs_button_content::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  top: 0px;
  right: 0px;
  border-right: 1px solid var(--swatch--brand-2);
  border-top: 1px solid var(--swatch--brand-2);
  transition: var(--animation-hover-default);
}

.form_tabs_button_content span::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  bottom: 0px;
  right: 0px;
  border-right: 1px solid var(--swatch--brand-2);
  border-bottom: 1px solid var(--swatch--brand-2);
  transition: var(--animation-hover-default);
}

.form_tabs_button_content span::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  bottom: 0px;
  left: 0px;
  border-left: 1px solid var(--swatch--brand-2);
  border-bottom: 1px solid var(--swatch--brand-2);
  transition: var(--animation-hover-default);
}

.form_tabs_button_content:hover::after,
.form_tabs_button_content:hover::before,
.form_tabs_button_content:hover span::after,
.form_tabs_button_content:hover span::before {
  width: calc(50% + 8px);
  height: calc(50% + 1px);
}

.background-pattern {
  width: 100%;
  height: 200px;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 0H0V2H4V0Z' fill='black'/%3E%3Cpath d='M6 2H2V4H6V2Z' fill='black'/%3E%3Cpath d='M8 4H4V6H8V4Z' fill='black'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 40px 30px;
  /* Scale up the pattern */
  margin-bottom: 40px;
}

.cfbg {
  background:
    /* cg1 - First conic gradient */
    conic-gradient(at 25% 50%, transparent 75%, #222428 0%, #282B30 100%),

    /* cg2 - Second conic gradient with offset */
    conic-gradient(at 25% 50%, transparent 75%, #222428 0%, #282B30 100%) var(--size) var(--size),

    /* cg3 - Third conic gradient with larger offset */
    conic-gradient(at 25% 50%, transparent 75%, #222428 0%, #282B30 100%) calc(2 * var(--size)) calc(2 * var(--size)),

    /* cg4 - Fourth conic gradient with largest offset */
    conic-gradient(at 25% 50%, transparent 75%, #222428 0%, #282B30 100%) calc(3 * var(--size)) calc(3 * var(--size)),

    /* Repeating linear gradient overlay */
    repeating-linear-gradient(90deg,
      #222428,
      #000 25%,
      #222428 25%,
      #000 50%,
      #222428 50%,
      #000 75%,
      #222428 75%,
      #000 100%);

  background-size: calc(4 * var(--size)) calc(4 * var(--size));
}

/* You'll need to define the --size custom property */
.cfbg {
  --size: 4px;
  /* Adjust this value as needed */
}

.nav_dropdown_header {
  transition: background-color 300ms ease;

}

.nav_dropdown_field-new:hover .nav_dropdown_header {
  background-color: var(--swatch--dark);

}

.nav-support-text {

  transition: color 300ms ease;
}

.nav_dropdown_field-new:hover .nav-support-text {
  color: var(--swatch--light);

}

.nav_dropdown_list_content {
  transition: color 300ms ease;
}

.nav_dropdown_list_content:hover .nav_dropdown_list_link {
  color: var(--swatch--light);
  transition: color 300ms ease;
}