:root {
  --barvaTlacitkoSvetla: #be87be;
  --barvaTlacitkoTmava: #ab68ad;
  --barvaTlacitkoTmavaSeda: #bbb;
  --barvaTlacitkoSvetlaSeda: #ddd;
}

.formular label {margin-right: 5px;}

.formular input[type=submit], .formular input[type=button], .tlacitko {
  border: none;
  outline: none;
  color: #fff;
  text-decoration: none;
  font-weight: normal;
  font-variant: small-caps;
  font-size: var(--velikostText);
  border-radius: 3px;
  white-space: nowrap;
  padding: 10px 15px;
  box-shadow: -3px -3px 6px rgba(255, 255, 255, 0.4), 3px 3px 6px rgba(0, 0, 0, 0.2);
  background: linear-gradient(var(--barvaTlacitkoTmavaSeda) 0%, var(--barvaTlacitkoTmavaSeda) 52%, var(--barvaTlacitkoSvetlaSeda) 53%, var(--barvaTlacitkoTmavaSeda) 90%);
}
.formular input[type=submit]:not([disabled]), .formular input[type=button]:not([disabled]), .tlacitko:not([disabled]) {
  transition: all 0.1s ease-in-out;
  background: linear-gradient(var(--barvaTlacitkoTmava) 0%, var(--barvaTlacitkoTmava) 52%, var(--barvaTlacitkoSvetla) 53%, var(--barvaTlacitkoTmava) 90%);
}

.formular input[type=submit]:not([disabled]):hover, .formular input[type=button]:not([disabled]):hover, 
.linkzone input[type=submit]:not([disabled]):hover, .dropzone input[type=button]:not([disabled]):hover, .tlacitko:not([disabled]):hover {
   box-shadow: -1px -1px 3px rgba(255, 255, 255, 0.8), 1px 1px 3px rgba(0, 0, 0, 0.2);
   cursor: pointer;
}

.formular input[type=submit]:not([disabled]):active, .formular input[type=button]:not([disabled]):active, 
.linkzone input[type=submit]:not([disabled]):active, .dropzone input[type=button]:not([disabled]):active, .tlacitko:not([disabled]):active {
  background: linear-gradient(var(--barvaTlacitkoTmava) 0%, var(--barvaTlacitkoTmava) 49%, var(--barvaTlacitkoSvetla) 50%, var(--barvaTlacitkoTmava) 90%);
  box-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.3), inset 4px 4px 8px rgba(0, 0, 0, 0.1);
}

.formular input[type=submit]:before, .formular input[type=button]:before, .tlacitko:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(146, 148, 248, 0.4), transparent);
  transition: all 650ms;
}

.formular textarea {resize: vertical;}

.formular input[type=checkbox] {
  width: 1.3em;
  height: 1.3em;
  background-color: white;
  vertical-align: middle;
  border: 1px solid #aaa;
  border-radius: 3px;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}
.formular input[type=checkbox]:checked::after {
  content: "\2713";
  position: relative;
  top: -4px;
  left: -2px;
  font-weight: bold;
  color: #333;
}

/* ostatní */

.formular textarea, .formular select, .formular input:not([type=submit]):not([type=button]):not([type=image]):not([type=radio]),
.ovladani input:not([type=text]):not([type=submit]):not([type=button]):not([type=image]), 
.formularpole {
  box-shadow: inset 3px 3px 3px 0px rgba(0,0,0,0.1);
  border: 1px solid #aaa;
  border-radius: 3px;
  margin-bottom: 5px;
  padding: 3px 5px;
}

.formular button:not(:disabled):has(> .ikonka):hover, .formular button:not(:disabled):has(> .interaktivni):hover, .formular img.dynamicky:hover, .tlacitko {cursor: pointer;}
.formular button:disabled:has(> .ikonka):hover, .formular button:disabled:has(> .interaktivni):hover {cursor: default;}
.formular button:has(> .ikonka), .formular button:has(> .interaktivni), .formular img.dynamicky {
  border: none;
  background: none;
}


/* s viditelným labelem na borderu */

label.titulek {
  background-image: linear-gradient(to bottom, transparent 50%, white 50%);
  color: #999;
  font-size: 1.75ex;
  position: absolute;
  margin: -2px 0px 0px 10px;
  padding: 0px 5px;
}
label.titulek + input {
  padding-top: 10px !important;
  margin-top: 5px;
  white-space: nowrap;
}
label.titulek + ::-webkit-input-placeholder {color: transparent;}
label.titulek + :-moz-placeholder {color: transparent; opacity: 1;}
label.titulek + ::-moz-placeholder {color: transparent; opacity: 1;}
label.titulek + :-ms-input-placeholder {color: transparent;}


/* dvousloupcový layout */

.dvoukomorovy { /* .formular */
  display: flex;
  column-count: 2;
  margin: auto;
}
.dvoukomorovy div:not(.kontejner)+div:not(.kontejner) {margin-left: 15px;}
.dvoukomorovy div:first-child {flex: 1;}
.dvoukomorovy div:last-child {flex: 3;}
.dvoukomorovy input:not([type=submit]):not([type=button]) {
  width: calc(100% - (2 * 5px) - (2 * 1px)); /* padding-horizontal: 5+5px; border-horizontal: 1+1px; shadow-left: 3px */
  height: 17px;
}
.dvoukomorovy select {
  width: 100%;
  height: 25px;
}
.dvoukomorovy input[type=submit] {
  width: 100%;
  height: 85px;
  margin: 0px 15px 0px 0px;
}

.dvoukomorovy img {max-height: 20px;}
.dvoukomorovy .kontejner {display: flex;}
.dvoukomorovy .kontejner *:nth-child(1) {margin-right: 10px;}


/* .formular pod jinými třídami/tagy */

.podCarou {margin-top: 10px; text-align: justify;}

.tabulka .formular input[type=button] {
  padding: 2px 5px;
  display: inline-block;
  margin: 0px 7px 0px 0px;
}

.tabulka .formular, h2 .formular {display: inline-block;}


/* posouvací přepínač */
/*
<label class="switch">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label>
*/
.switch {
  position: relative;
  display: inline-block;
  flex: 0 0 48px;
  width: 48px;
  height: 28px;
}
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--barvaTlacitkoSvetlaSeda);
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider {
  background-color: var(--barvaTlacitkoTmava);
}
input:focus + .slider {
  box-shadow: 0 0 1px var(--barvaTlacitkoTmava);
}
input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}
/* zaoblený */
.slider.round {border-radius: 28px;}
.slider.round:before {border-radius: 50%;}
/* popisek k přepínači */
.switchLabel {
  position: relative;
  top: 7px;
  left: 5px;
}