:root {
  --abbey: #4d4d4d;
  --alto: #d9d9d9b2;
  --alto-2: #d9d9d9;
  --black: #000000;
  --chicago: #5e5e5e;
  --log-cabin: #222222;
  --mine-shaft: #323232;
  --onyx: #3a3a3a;
  --white: #ffffff;
  --wild-sand: #f4f4f4;

  --font-size-l: 16.9px;
  --font-size-m: 16.8px;
  --font-size-s: 16px;
  --font-size-xl: 18px;
  --font-size-xs: 13.6px;
  --font-size-xxl: 33.6px;
  --font-size-xxxl: 55px;

  --font-family-inter: "Inter", Helvetica;
  --font-family-righteous: "Righteous", Helvetica;
  --font-family-urbanist: "Urbanist", Helvetica;
  --font-family-host: "Host+Grotesk", Haveltica;

  --gray-1: rgba(51, 51, 51, 1);
  --win-fnkey-font-family: "IBM Plex Sans", Helvetica;
  --win-fnkey-font-weight: 400;
  --win-fnkey-font-size: 15px;
  --win-fnkey-letter-spacing: 0px;
  --win-fnkey-line-height: 17px;
  --win-fnkey-font-style: normal;
  --win-ltrkey-font-family: "IBM Plex Mono", Helvetica;
  --win-ltrkey-font-weight: 400;
  --win-ltrkey-font-size: 32px;
  --win-ltrkey-letter-spacing: 0px;
  --win-ltrkey-line-height: 32px;
  --win-ltrkey-font-style: normal;
}

.inter-normal-abbey-16px {
  color: var(--abbey);
  font-family: var(--font-family-inter);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

@font-face { font-family: NeueMachina-Light; src: url('fonts/PPNeueMachina-Light.otf'); } 
@font-face { font-family: NeueMachina-Regular; src: url('fonts/PPNeueMachina-Regular.otf'); } 
@font-face { font-family: NeueMachina-Ultrabold; src: url('fonts/PPNeueMachina-Ultrabold.otf'); } 
@font-face { font-family: Host-Grotesk; src: url('fonts/HostGrotesk-VariableFont_wght.ttf'); } 


.urbanist-semi-bold-chicago-16-8px {
  color: var(--chicago);
  font-family: var(--font-family-urbanist);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 600;
}

.urbanist-semi-bold-onyx-16-8px {
  color: var(--onyx);
  font-family: var(--font-family-urbanist);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 600;
}

.urbanist-normal-log-cabin-33-6px {
  color: var(--log-cabin);
  font-family: var(--font-family-urbanist);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 400;
}

.urbanist-normal-black-16-9px {
  color: var(--black);
  font-family: var(--font-family-urbanist);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 400;
}

.urbanist-medium-mine-shaft-13-6px {
  color: var(--mine-shaft);
  font-family: var(--font-family-urbanist);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 500;
}

.input-box {
  min-width: 20vw;
  height: 50px;
  border: #d4d4d445 solid .8px;
  background-color: #111111;
  width: 300px;
  border-radius: 15px;
  padding-left: 20px;
  font-weight: 400;
  color: #949494;
  font-size: 14px;
}

.input-box::placeholder {
  font-family: var(--font-family-urbanist);
  font-weight: 400;
  color: #949494;
  font-size: 14px;
}

.light-theme .input-box {
  min-width: 20vw;
  height: 50px;
  border: #f4f4f4f4 solid .8px;
  background-color: #ffffff;
  width: 300px;
  border-radius: 15px;
  padding-left: 20px;
  font-weight: 400;
  color: #0a0a0a;
  font-size: 14px;
}

.light-theme .input-box::placeholder {
  font-family: var(--font-family-urbanist);
  font-weight: 400;
  color: #4a4a4a;
  font-size: 14px;
}



.long-input {
  border: none;
  border-radius: 10px;
  box-shadow: 0px 4px 20px rgba(255, 127, 80, 0.17);
  font-size: 18px;
  color: #FF4400;
  white-space: wrap;
  padding-top: 15px;
  padding-left: 15px;
}

.long-input::placeholder {
  font-family: var(--font-family-urbanist);
  font-weight: 400;
  color: #FF4400;
  font-size: 18px;
  width: 350px;
  min-height: 20px;
  white-space: wrap;

}

select::-ms-expand {
  display: none;
}

.select-box {
  display: flex;
  flex-direction: column;
  width: 180px;
  height: 150px;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 10px;
  position: relative;
  border: solid 2px #CFCFCF;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 4px 20px rgba(255, 127, 80, 0.17);
  /* padding-left: 20px; */
  cursor: pointer;
}

.select-box .select-image {
  position: relative;
  width: 86.4px;
  height: 86.4px;
}

.selected-box {
  border: solid 2px #FF6000;
}

@-webkit-keyframes pop-on-hover {
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@keyframes pop-on-hover {
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

.pop-on-hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.pop-on-hover:hover,
.pop-on-hover:focus,
.pop-on-hover:active {
  -webkit-animation-name: pop-on-hover;
  animation-name: pop-on-hover;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.4s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

.error-message {
  color: red;
  font-size: 0.8em;
}

.error-border {
  border: 2px solid red;
}