/* Users
----------------------------------------------- */
#users ul li {font-size: 0.875em; line-height: 1.5em; padding: 0 0 0 25px; background: url("../images/icon-user.png") 0 3px no-repeat; background-size: 14px 14px;}

.icon-plus {padding: 0 0 2px 25px; background: url("../images/icon-plus.png") 0 0 no-repeat; background-size: 18px 18px; line-height: 1.5em;}



/* Box
----------------------------------------------- */
.box {border-radius: 7px; background: none; margin: 0 0 13px 0; padding: 0 0 0 0; width: 100%; overflow: hidden; float: left;}
.box-line {border-top: 7px solid #B16055;}
.box-alert-bad {background: #ffd6d0;}
.box-alert-good {background: #f0fff1;}


.box p {color: #838383; line-height: 1.5em; font-size: 0.875em;}
.box span {color: #d93025; font-size: 0.875em; line-height: 1.5em;}

.box label {color: #1B3A4B; width: calc(100% - 15px); max-width: 170px; font-size: 18px; line-height: 1.25em; margin: 15px 0 0 15px; display: block; float: left;}
.box label span {color: #d93025;}

.box input {border: 0; border: 1px solid #e7e6e6; background: #fff; width: 100%; max-width: 500px; padding: 14px 22px; font-size: 18px; border-radius: 10px; color: #575757;}
.box input:focus {border: 1px solid #1b3a4b;}
.box input::placeholder {opacity: 1.0; color: #949494; font-size: 14px;}
.box-alert-bad input {border-bottom: 1px solid red;}
.box-alert-bad input::placeholder {color: red;}
.box-alert-good input {border-bottom: 1px solid green; color: green;}

.box textarea {border: 0; border-bottom: 1px solid #E0E0E0; background: transparent; width: 100%; height: 150px; padding: 8px 0; font-family: Inter; font-size: 14px;}
.box textarea::placeholder {opacity: 1.0; color: #949494; font-size: 14px;}
.box-alert-good textarea {border-bottom: 1px solid green; color: green;}

.box select {width: 100%; max-width: 546px; border: 1px solid #e7e6e6; background: #fff; padding: 14px 22px; font-size: 18px; border-radius: 10px; color: #575757;}
.box select:focus {border: 1px solid #1b3a4b;}

.box .space {width: 100%; float: left; height: 15px;}
.box .space-more {width: 100%; float: left; height: 40px;}

.button {border: 1px solid #B2342E; background: #D9413A; display: block; float: left; width: 100%; max-width: 380px; border-radius: 10px; font-family: "Jaldi"; font-size: 35px; font-weight: 700; text-align: center; padding: 6px 0 5px; margin: 18px 0 55px 80px; color: #fff; transition: 0.3s; text-decoration: none; box-shadow: 0px 2px 4px 0px #00000040;}
.button:hover {color: #fff; border: 1px solid #B2342E; background: #B2342E;}

a.button, a.button:visited {border: 1px solid #B2342E; background: #D9413A; display: block; float: left; width: 100%; max-width: 380px; border-radius: 10px; font-family: "Jaldi"; font-size: 35px; font-weight: 700; text-align: center; padding: 27px 0 27px; margin: 18px 0 55px 45px; color: #fff; transition: 0.3s; text-decoration: none; box-shadow: 0px 2px 4px 0px #00000040;}
a.button:hover {color: #fff; border: 1px solid #B2342E; background: #B2342E;}

.button-more {margin-top: 30px;}

.box .radio-div {width: 30px; float: left; text-align: left;}
.box input.radio-input {width: auto; float: left; text-align: left; position: relative; left: -5px;}
.box label.radio-label {width: calc(100% - 30px); float: left; padding-top: 0; color: #000; margin: 0 0 15px 0; font-size: 0.875em; position: relative; top: -1px;}

.box .checkbox-div {width: 30px; float: left; text-align: left;}
.box input.checkbox-input {width: auto; float: left; text-align: left; position: relative; left: -5px;}
.box label.checkbox-label {width: calc(100% - 30px); float: left; padding-top: 2px; color: #000; font-size: 0.75em; margin: 0;}

.box #voucherResult {width: 100%; float: left;}
.box #voucherResult span {display: block; float: left; width: calc(100% - 208px); margin: 10px 0 0 208px; font-size: 14px;}

#email_user_confirm {display: none; visibility: hidden;}


/* Loading image
----------------------------------------------- */
@keyframes ldio-wffn6id8m9a {
  0% { opacity: 1 }
  100% { opacity: 0 }
}
.ldio-wffn6id8m9a div {
  left: 47px;
  top: 24px;
  position: absolute;
  animation: ldio-wffn6id8m9a linear 1s infinite;
  background: #d53730;
  width: 6px;
  height: 12px;
  border-radius: 3px / 6px;
  transform-origin: 3px 26px;
}.ldio-wffn6id8m9a div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -0.9166666666666666s;
  background: #d53730;
}.ldio-wffn6id8m9a div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -0.8333333333333334s;
  background: #d53730;
}.ldio-wffn6id8m9a div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.75s;
  background: #d53730;
}.ldio-wffn6id8m9a div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.6666666666666666s;
  background: #d53730;
}.ldio-wffn6id8m9a div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.5833333333333334s;
  background: #d53730;
}.ldio-wffn6id8m9a div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.5s;
  background: #d53730;
}.ldio-wffn6id8m9a div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.4166666666666667s;
  background: #d53730;
}.ldio-wffn6id8m9a div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.3333333333333333s;
  background: #d53730;
}.ldio-wffn6id8m9a div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.25s;
  background: #d53730;
}.ldio-wffn6id8m9a div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.16666666666666666s;
  background: #d53730;
}.ldio-wffn6id8m9a div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.08333333333333333s;
  background: #d53730;
}.ldio-wffn6id8m9a div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
  background: #d53730;
}
.loadingio-spinner-spinner-7rv9k10vx86 {
  width: 98px;
  height: 98px;
  display: inline-block;
  overflow: hidden;
  background: none;
}
.ldio-wffn6id8m9a {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(0.98);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.ldio-wffn6id8m9a div { box-sizing: content-box; }








#order {background: #fff; border: 1px solid #bbc4c9; border-radius: 10px; overflow: hidden; max-width: 1200px; margin: 45px auto 45px; box-shadow: 2px 2px 15px 0px rgba(0, 0, 0, 0.1);}
#order .alert-good, #order .alert-bad {width: calc(100% - 110px); margin: 10px 0 0 45px; z-index: 1;}
#order h2 {width: calc(100% - 90px); display: block; line-height: 1.25em; font-size: 60px; float: left; font-family: "Jaldi"; color: #1B3A4B; font-weight: 700; margin: 35px 45px 27px;}
#order h3 {width: 100%; display: block; line-height: 1.25em; font-size: 22px; float: left; font-family: "Inter"; color: #1B3A4B; font-weight: 700; margin: 0 0 20px 0;}
#order p {font-size: 18px; font-family: "Inter"; color: #1B3A4B; line-height: 1.5em;}
#order .order-h2 {margin-bottom: 10px; line-height: 1em; margin-top: 43px;}
#order .order-h2 span {font-size: 34px; color: #aaa; font-weight: 700;}
#order .order-p {margin: 0 45px 20px; width: calc(100% - 90px);}
#order .order-box {background: #f3f5f6; overflow: hidden; width: calc(100% - 140px); margin: 0 0 0 45px; border-radius: 10px; padding: 44px 25px;}

#users ul li {margin: 0 0 10px 0; padding: 0;}
#users ul li a, #users ul li a:visited {font-weight: 700; font-size: 18px;}

#users a.users-delete, #users a.users-delete:visited {color: #d9413a; border: 1px solid #d9413a; border-radius: 10px; display: inline-block; text-decoration: none; font-weight: 400; font-family: Jaldi; font-size: 18px; padding: 5px 10px; margin-left: 20px; transition: 0.3s;}
#users a.users-delete:hover {background: #fff;}




/* Kontejner pro label */
.box-checkbox {margin: 22px 0 0 80px; padding: 0 0 0 0; width: calc(100% - 80px); overflow: hidden; float: left;}


.custom-checkbox {
    display: flex;
    align-items: flex-start; /* Zarovná checkbox k hornímu okraji prvního řádku */
    position: relative;
    cursor: pointer;
    font-size: 14px;
    user-select: none;
    line-height: 1.5; /* Trošku větší rozestup řádků pro lepší čitelnost */
    margin-bottom: 15px;
    width: 100%; /* Aby label zabral celý prostor */
}

/* Schováme původní checkbox */
.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Vytvoření vlastního čtverečku */
.checkmark-order {
    box-sizing: border-box; /* ZAJISTÍ, ŽE SE ČTVEREC NEZMENŠÍ */
    position: relative;
    height: 30px;
    width: 30px;
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    margin-right: 22px;
    margin-top: 2px; /* Jemné doladění výšky vůči textu */
    flex-shrink: 0;  /* TOTÁLNÍ ZÁKAZ SMRŠŤOVÁNÍ */
    display: inline-block;
}

/* Efekt při najetí myší */
.custom-checkbox:hover input ~ .checkmark-order {
    border-color: #a1a1a1;
}

/* Barva okraje při zaškrtnutí */
.custom-checkbox input:checked ~ .checkmark-order {
    border-color: #007bff;
}

/* Vykreslení fajfky (vnitřní část) */
.checkmark-order:after {
    content: "";
    position: absolute;
    display: none;
    
    /* Přesné vycentrování fajfky */
    left: 8px;
    top: 0px;
    width: 10px;
    height: 19px;
    
    border: solid #007bff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Zobrazení fajfky po zaškrtnutí */
.custom-checkbox input:checked ~ .checkmark-order:after {
    display: block;
}

/* Styl pro text a červenou chybu z obrázku */
.box-checkbox label span.label-text {
    color: #2c2c2c;
    display: inline-block;
    font-size: 16px;
    position: relative;
    top: 4px;
    padding-right: 50px;
}

.box-checkbox label span.label-text a, .box-checkbox label span.label-text a:visited {
    color: #2c2c2c;
}

.box-checkbox label span.label-text a:hover {color: #000;}

.separator-dashed {
    border: none;
    height: 1px; /* Tloušťka čáry */
    width: 100%;
    /* Trik s gradientem: 10px čárka, 10px mezera */
    background-image: linear-gradient(to right, #d1d5db 50%, rgba(255,255,255,0) 0%);
    background-position: top;
    background-size: 20px 1px; /* První číslo (20px) určuje celkovou délku periody (čárka + mezera) */
    background-repeat: repeat-x;
    margin: 20px 0 30px;
    float: left;
    clear: both;
}






.box a.btn-add-participant, a.btn-add-participant:visited {display: inline-flex; align-items: center; padding: 12px 24px; background-color: #ffffff; color: #1B3A4B; text-decoration: none; font-family: "Jaldi"; font-size: 22px; border: 1px solid #000000; border-radius: 12px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: all 0.2s ease;}
.box a.btn-add-participant:hover {background-color: #f8f9fa; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);}
.box a span, .box a span:visited {color: #1B3A4B;}

.box .btn-add-participant .icon-circle {display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 2px solid #1a3a4a; border-radius: 50%; margin-right: 15px;}
.box .btn-add-participant .icon-circle svg {width: 20px; height: 20px;}
.box .btn-add-participant .text {font-weight: 400;}