#kontakt-form-wrapper {
  color: var(--main-front-color);
  background-color: var(--main-back-color);
  background: -webkit-linear-gradient(
    var(--main-grad-dir),
    var(--main-grad-from),
    var(--main-grad-to)
  );
  background: -moz-linear-gradient(
    var(--main-grad-dir),
    var(--main-grad-from),
    var(--main-grad-to)
  );
  background: linear-gradient(
    var(--main-grad-dir),
    var(--main-grad-from),
    var(--main-grad-to)
  );
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: var(--smaller-size);
  height: 100vh;
  height: 100lvh;
  left: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  padding: var(--smaller-size) var(--larger-size);
  padding: var(--smaller-size) calc((100lvw - 100svw) + var(--larger-size));
  padding-bottom: var(--medium-distance);
  position: fixed;
  width: 100vw;
  width: 100lvw;
  top: 0;
  z-index: 10000;
}

#kontakt-form-wrapper #kontakt-form {
  border-top: var(--small-line) solid var(--alt-back-color);
  margin: 0 auto;
  max-width: var(--max-width);
  padding: var(--medium-size) 0;
  width: 100%;
}

#kontakt-form-wrapper #kontakt-form h2 {
  color: var(--alt-back-color);
}

#kontakt-form-close-button {
  color: var(--alt-front-color);
}

#kontakt-form-wrapper #kontakt-form-input-wrapper {
  padding-top: var(--large-size);
}

#kontakt-form-input-wrapper > div > div {
  padding: var(--smaller-size) 0;
  width: 100%;
}

#kontakt-form-input-wrapper :is(input, select, textarea) {
  background-color: var(--main-back-color);
  border: var(--small-line) solid var(--alt-back-color);
  -webkit-border-radius: var(--mini-size);
  -moz-border-radius: var(--mini-size);
  border-radius: var(--mini-size);
  color: var(--main-front-color);
  padding: var(--smaller-size);
}

#kontakt-form-input-wrapper :is(input:not([type="checkbox"]), select, textarea) {
  display: block;
  width: 100%;
}

#kontakt-form-input-wrapper textarea {
  height: var(--small-distance);
  resize: vertical;
}

#kontakt-form-odeslat {
  background-color: var(--alt-back-color);
  background: -webkit-linear-gradient(
    var(--alt-grad-dir),
    var(--alt-grad-from),
    var(--alt-grad-to)
  );
  background: -moz-linear-gradient(
    var(--alt-grad-dir),
    var(--alt-grad-from),
    var(--alt-grad-to)
  );
  background: linear-gradient(
    var(--alt-grad-dir),
    var(--alt-grad-from),
    var(--alt-grad-to)
  );
  border: none;
  color: var(--main-back-color);
  font-weight: bold;
  line-height: 1;
  margin-top: var(--smaller-size);
  padding: var(--smaller-size) var(--large-size);
}

#kontakt-form-odeslat,
#kontakt-form-predlozte-karticku {
  -webkit-border-radius: var(--mini-size);
  -moz-border-radius: var(--mini-size);
  border-radius: var(--mini-size);
}

#kontakt-form-odeslat:disabled {
  cursor: not-allowed;
  opacity: var(--hover-opacity);
}

#kontakt-form-odeslat:enabled:hover {
  cursor: pointer;
  opacity: var(--hover-opacity);
}

#kontakt-form-predlozte-karticku {
  border: var(--small-line) solid var(--warning-color);
  padding: var(--smaller-size) var(--large-size);
  text-align: center;
  width: 100%;
}

#kontakt-form-predlozte-karticku i {
  color: var(--warning-color);
}

#kontakt-form-predlozte-karticku > span {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: var(--mini-size);
}

.kontakt-form-closed,
.kontakt-form-hidden,
.kontakt-form-h-hidden {
  display: none;
}

.kontakt-form-label-required::after {
  color: var(--warning-color);
  content: '*';
}

.kontakt-form-opened {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}

.kontakt-form-response {
  border: var(--small-line) solid;
  -webkit-border-radius: var(--mini-size);
  -moz-border-radius: var(--mini-size);
  border-radius: var(--mini-size);
  margin: var(--smaller-size) 0;
  padding: var(--small-size);
  width: 100%;
}

.kontakt-form-response-fail {
  color: var(--warning-color);
}

.kontakt-form-response-hidden {
  display: none;
}

.kontakt-form-response-success {
  color: var(--success-color);
}

:is(.kontakt-form-response-success, .kontakt-form-response-success-fail) p {
  color: var(--main-front-color);
}

.kontakt-form-response-success-fail {
  border-color: var(--mild-warning-color);
}

.kontakt-form-response-success-fail h3 {
  color: var(--success-color);
}

.kontakt-form-visa-exempel-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  border: none;
  color: var(--alt-back-color);
  display: block;
  font-size: var(--small-font);
  text-decoration: underline;
}

.kontakt-form-visa-exempel-button:hover {
  cursor: pointer;
  text-decoration: none;
}

.napiste-nam-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
}

.napiste-nam-button:hover {
  cursor: pointer;
}

@media (max-width: 768px) {
  
  #kontakt-form-odeslat {
    width: 100%;
  }

}

@media (min-width: 769px) {

  #kontakt-form-input-wrapper {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: var(--larger-size);
    -moz-column-gap: var(--larger-size);
    column-gap: var(--larger-size);
  }

  #kontakt-form-input-wrapper > div {
    -webkit-break-inside: avoid;
    break-inside: avoid;
  }

  #kontakt-form-odeslat {
    float: right;
  }

}