:root {
  --background-color: #fec208;
  --white-background-color: #ffffff;
  --outter-circle: #ffd75b;
  --middle-circle: #ffeeb8;
  --input-background: #ff2d08;
  --hover-background: #cf240a;

  --main-text-color: #000;
  --secondary-text-color: #ffffff;
  --error-message-color: #3f3737;
}

body {
  background: var(--background-color);
}

.top-beam {
  display: flex;
  align-items: center;
  background: var(--white-background-color);
  margin: -0.5em;
  padding: 0.5em;
}

#arrow-left {
  margin: 0em 0.5em;
  font-size: 30px;
  color: black;
}

.my-m-container,
.my-m-container-confirmation {
  z-index: 15;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
  top: 0.5em;
}

.my-m-container {
  margin-bottom: 3.5em;
}

.my-m-container-confirmation {
  position: relative;
}

.my-m {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--white-background-color);
  padding: 0.5em;
  border-radius: 40px;
}

.my-m-text {
  background: -webkit-linear-gradient(#931704, #ff2d08, #931704);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.points-container {
  display: flex;
  position: relative;
  justify-content: center;
  z-index: 25;
  margin: -6.5em 0em 4em 0em;
}

.size-container-confirmation {
  display: flex;
  z-index: 20;
  margin: -6.5em 0em 4em 0em;
}

.confirmation-size {
  background: var(--background-color);
  color: var(--secondary-text-color);
  border: 3px solid var(--white-background-color);
  padding: 0em 0em 0.3em 0em;
  border-radius: 40px;
  width: 100px;
  text-align: center;
}

.points {
  background: var(--background-color);
  color: var(--secondary-text-color);
  border: 3px solid var(--white-background-color);
  padding: 1em;
  border-radius: 40px;
}

.points-text {
  font-size: 20px;
}

label {
  font-size: 24px;
}

input[type="text"] {
  box-sizing: border-box;
  background: var(--input-background);
  color: var(--secondary-text-color);
  border: none;
  width: 90%;
  margin: 0.2em 0em 1em 0em;
  padding: 12px 19px;
  font-size: 16px;
}

.input-1-2 {
  height: 30px;
}

.input-3 {
  height: auto;
}

.reservation-container,
.reservation-container-confirmation {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1em;
}

.circles {
  display: flex;
  justify-content: center;
  margin: -4em 0em 1em 0em;
}

.circles-confirmation {
  display: flex;
  justify-content: center;
  margin: 1em 0em;
}

.outter-circle {
  background: var(--outter-circle);
  position: relative;
  border-radius: 50%;
  width: 320px;
  height: 320px;
}

.middle-circle {
  background: var(--middle-circle);
  position: absolute;
  border-radius: 50%;
  width: 270px;
  height: 270px;
  top: 7.5%;
  left: 7.5%;
}

.inner-circle {
  background: var(--white-background-color);
  position: absolute;
  border-radius: 50%;
  width: 220px;
  height: 220px;
  top: 15%;
  left: 15%;
}

.rounded-gradient-border {
  position: relative;
  z-index: 10;
  left: 17%;
  top: 17%;
  width: 190px;
  height: 190px;
  border: double 8px transparent;
  border-radius: 50%;
  background-image: linear-gradient(white, white),
    radial-gradient(circle at top, #cf240a, #fec208, #ffffff);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

.information-container {
  display: flex;
  flex-direction: column;
  background: var(--white-background-color);
  padding: 1em;
  border-radius: 20px;
}

#product-information {
  text-align: center;
}

.form {
  display: flex;
  flex-direction: column;
}

/* Custom size selection.......................................................*/
/* The container must be positioned relative: */
.custom-select {
  position: relative;
}

.custom-select select {
  display: none;
  /*hide original SELECT element: */
}

.select-selected {
  background: var(--input-background);
  margin: 0.2em 0em 1em 0em;
}

/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: "";
  top: 17px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}

/* style the items (options), including the selected item: */
.select-items div,
.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}

/* Style items (options): */
.select-items {
  position: absolute;
  background: var(--input-background);
  left: 0;
  right: 0;
  z-index: 99;
}

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.select-items div:hover,
.same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

/* End custom size selection...................................................*/

.availability-container {
  display: flex;
  flex-direction: column;
  background: var(--input-background);
  color: var(--secondary-text-color);
  padding: 1em;
  margin-top: 0.2em;
  /* border-radius: 20px; */
}

/* .availability-container:hover {
  background-color: var(--hover-background);
} */

.location {
  display: flex;
  align-items: center;
}

/* Progress bar................................................................*/
progress[value] {
  --color: lightgrey;
  /* the progress color */
  --background: black;
  /* the background color */

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  border: none;
  width: 90%;
  margin: 0 10px;
  border-radius: 10em;
  background: var(--background);
}

progress[value]::-webkit-progress-bar {
  border-radius: 10em;
  background: var(--background);
}

progress[value]::-webkit-progress-value {
  border-radius: 10em;
  background: var(--color);
}

/* End progress bar............................................................*/

.privacy {
  display: flex;
}

.checkbox {
  margin-right: 1em;
}

.privacy a {
  text-decoration: none;
  color: var(--main-text-color);
}

#link {
  align-self: center;
}

.reserve-button {
  margin: 1em;
  width: 220px;
  height: 40px;
  border: none;
  border-radius: 100px;
  background-image: linear-gradient(to right, #eda200, #eda200, #ffde76);
  color: var(--secondary-text-color);
}

/* media query tablet  */
@media only screen and (max-device-width: 1024px) {
  .my-m-container {
    position: relative;
  }

  .information-container {
    width: 400px;
  }

  input[type="text"] {
    width: 99%;
  }

  .select-items {
    top: 72%;
  }

  .message-container {
    width: 400px;
  }
}

/* media query normal phone  */
@media only screen and (max-device-width: 767px) {
  .reservation-container {
    flex-direction: column;
  }

  .information-container {
    width: 300px;
  }

  input[type="text"] {
    width: 98%;
  }

  .select-items {
    top: 70%;
  }
  .message-container {
    width: 300px;
  }
}

/* media query small phone  */
@media only screen and (max-device-width: 376px) {
  .reservation-container {
    flex-direction: column;
  }

  .message-container {
    width: 250px;
  }
}

.merch-image img {
  background: var(--white-background-color);
  position: absolute;
  z-index: 20;
  border-radius: 50%;
  width: 130px;
  top: 28%;
  left: 29%;
}

/*-----------------------------------------------------------------------*/
.message-container {
  display: none;
  position: fixed;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  top: 50%;
  height: 250px;
  background-color: var(--white-background-color);
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.5);
  border-radius: 50px;
  z-index: 99;
  font-family: var(--inter-font);
  animation: 0.5s ease-in easeIn;

}

@keyframes easeIn {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

@-webkit-keyframes easeIn {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

.close-button {
  color: var(--secondary-text-color);
  display: flex;
  width: 220px;
  justify-content: center;
  align-items: center;
  height: 40px;
  background-color: var(--input-background);
  border-radius: 20px;
  z-index: 99;
}

.error-text {
  font-size: 30px;
  z-index: 99;
}
.error-message {
  font-size: 20px;
  color: var(--error-message-color);
  text-align: center;
  z-index: 99;
}