@import url('colors.css');

.popup-form {
  position: relative;
  z-index: 1;
  background: var(--general-background);
  max-width: 360px;
  margin: 0 auto 100px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

.popup-form-2 { /* Updated version for actual popups */
  margin: auto 10px;
  text-align: center;
}

.oneline-form { /* FIXME: not very clean looking for now */
  position: relative;
  background: var(--general-background);
  width: 100%;
  text-align: center;
}

.popup-form-2 select,
.popup-form-2 input:not([type=color]),
.popup-form select,
.popup-form input:not([type=color]) {
  width: 100%;
}

.oneline-form select,
.oneline-form input:not([type=color]) {
  width: fit-content;
}

.form input:not([type=color]) {
  outline: 0;
  background: var(--form-input-background);
  border: 0;
  margin: 0 0 15px;
  padding: 10px;
  box-sizing: border-box;
  font-size: 14px;
}

.form input[type=button],
.form input[type=submit] {
  text-transform: uppercase;
  outline: 0;
  background: var(--button-background) !important;
  color: var(--button-text) !important;
  border: 0;
  border-radius: 5px;
  padding: 15px;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}

.form input[type=button]:hover,
.form input[type=button]:active,
.form input[type=button]:focus,
.form input[type=submit]:hover,
.form input[type=submit]:active,
.form input[type=submit]:focus {
  background: var(--button-highlight) !important;
}

/* FIXME move somewhere else */
.form .registration-form {
  display: none;
}

.checkbox-input label {
  display: flex;
  align-items: center;
}