@font-face {
  font-family: OpenSans-Italic;
  src: url(../fonts/OpenSans-Italic.ttf);
}

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

@font-face {
  font-family: Inter;
  src: url(../fonts/Inter-Regular.ttf);
  font-weight: 400
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: hsl(209, 30%, 20%) hsl(209, 73%, 12%)
}

body,
html {
  overflow-x: hidden;
  font-family: 'Roboto'
}

.bodyBackground {
  background-size: cover;
  object-fit: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../images/background.webp);
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  overflow: auto
}
.white {color: #fff}

.width100 { width: 100% !important;}
.v-hide { display: none !important;}

.bodyOverlay {
  background: hsla(240deg, 12%, 35%, .75);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99
}

/* Dollar window And diamond window styles */

.window {
  width: 126px;
  height: 44px;
  position: relative;
}

.currencyWindow {
  background: url(../images/currencies-window-1.png);
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat
}

.diamondWindow {
  background: url(../images/diamondWindow.png);
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat
}

.window__input {
  width: 50%;
  background: none;
  border: none;
  color: white;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Roboto";
  -moz-appearance: textfield;
  font-size: 18px
}

.window__input:focus {
  outline: none
}

.window__input::placeholder {
  opacity: 1 !important;
  color: white
}

.window p {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%)
}

/* Dollar window And diamond window styles end */

.form-field-error {
  color: rgb(243 4 4);
  font-size: 15px;
  font-weight: normal;
}

.activeStatus {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: absolute;
  right: 20px;
  top: 29px
}

.activeStatus__active {
  display: block
}

.activeStatus__green {
  background: #00ff00
}

/* Currency Switch  */

.switch__parent {
  width: 50px;
  height: 20px;
  border-radius: 100px;
  background: #022849;
  cursor: pointer;
  display: flex;
  justify-content: space-between
}

.switch__left .switch__diamond, .switch__right .switch__dollar {
  display: none
}

.switch__left .switch__dollar, .switch__right .switch__diamond {
  padding: 2.5px 5px
}

.switch__parent .switch__child {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: hsl(208deg, 95%, 55%);
  display: flex;
  align-items: center;
  justify-content: center
}

@media screen and (max-width: 768px) {
  .bodyBackground {
    overflow-x: scroll;
  }
}

/* Text Classes */
.green {
  color: #23eb23;
}
.red {
  color: red;
}

.bold-me { font-weight: bold;}

.width100 {width: 100%;}