/*------------------------------------------------------------------
* Project:        bos-congress.cz
* Author:         Ing. Miroslav Komárek, Ph.D.
* URL:            https://www.tvorbawww.cz
* Created:        19.12.2023
------------------------------------------------------------------*/

/* =============================================================================
	Fonts
============================================================================= */

:root {
  --main-color: #3f93dc;
  --main-color-light-02: #3f93dc70;
  --main-color-light-03: #3f93dc20;
  --main-color-dark: #024178;
  --main-light-color: #4299e5;
  --main-light-color-02: #74aefd;
  --main-light-color-03: #b4d4ff;
  --main-font-color: #616262;
  --a-color: #0071d1;
  --a-hover-color: #0088d1;
  --footer-text-color: #d9d9d9;
  --footer-text-size: 0.75rem;
  --footer-h-color: #ffffff;
  --footer-h-size: 0.85rem;
  --footer-a-hover-color: #ffffff;
  --footer-bg-color: #272727;
  --color-main-blue: #005ea1;
  --color-red: #eb3c5a;
  --color-yellow: #ffd430;
  --color-yellow-dark: #dda800;
  --color-yellow-dark-2: #e8b525;
  --color-yellow-light: #fffae9;
  --color-yellow-light-3: #fffdee;
  --color-yellow-light-2: #fffade;
  --color-yellow-light-4: #fffef3;
  --color-yellow-bg: #ffd43035;
  --color-orange: #fc9645;
  --color-orange-bg: #fc964525;
  --color-orange-2: #ea8947;
  --color-orange-3: #d15805;
  --color-orange-4: #d8610f;
  --color-orange-5: #fc8c32;
  --color-orange-light: #fcefe6;
  --color-orange-light-2: #f7f4f1;
  --color-green: #37a066;
  --color-green-orig: #20bf6b;
  --color-green-light: #def9e2;
  --color-green-2: #23c871;
  --color-green-3: #00c357;
  --color-blue: #1967d3;
  --color-blue-2: #069cd0;
  --color-blue-3: #74aefd;
  --color-blue-orig: #0066ff;
  --color-light-blue: #1f76dd;
  --color-light-2-blue: #f2f7fc;
  --color-blue-light-3: #e4f6f9;
  --color-blue-light-4: #baeef4;
  --border-grey: #cccccc80;
  --border-blue: #36d9ea50;
  --border-blue-2: #1967d350;
  --border-green: #37a06640;
  --border-orange: #fc964540;
  --color-grey-2: #545454;
  --color-grey-3: #5e5d5d;
  --color-grey-4: #7e7e7e;
  --color-grey-5: #868585;
  --color-grey-6: #cccccc40;
  --color-grey-7: #86858560;
  --color-grey-8: #cccccc5e;
  --color-dark-blue-bg: #0026d015;

  --color-krouzky-01: #0066ff;
  --color-krouzky-02: #20bf6b;
  --color-krouzky-03: #ffd430;
  --color-krouzky-04: #fc9645;
  --color-krouzky-05: #eb3c5a;
  --color-krouzky-06: #28325f;

  --color-krouzky-01-light: #2b7cf7;
  --color-krouzky-02-light: #27e17f;
  --color-krouzky-03-light: #ffd844;
  --color-krouzky-04-light: #fe9e51;
  --color-krouzky-05-light: #ff4161;
  --color-krouzky-06-light: #384580;
  --color-krouzky-06-light-2: #404f90;

  --color-krouzky-01-dark: #0057d9;
  --color-krouzky-02-dark: #08c260;
  --color-krouzky-03-dark: #eac32d;
  --color-krouzky-04-dark: #fa882e;
  --color-krouzky-05-dark: #ea3050;

  --color-krouzky-02-dark-02: #06ab54;
  --color-krouzky-03-dark-02: #d7b122;

  --color-black: #17233e;
  --color-black-02: #3d3d3d;

  --color-red: #dc3545;
  --color-red-2: #ef3d4e;

  --input-border-color: #c1c1c1;
  /*--input-border-color: rgba(0, 0, 0, .2);*/

  --bs-form-select-bg-img: url(
    data:image/svg + xml,
    %3csvgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 16 16"%3e%3cpathfill="none"stroke="%23343a40"stroke-linecap="round"stroke-linejoin="round"stroke-width="2"d="m2 5 6 6 6-6"/%3e%3c/svg%3e
  );
  --bs-border-radius: 5px;
  --bs-modal-color: #494f5c;
  --body-color: #494f5c;
  --font-color-basic: #494f5c;
  --btn-press-scale: 0.975;
  --btn-hover-transition-duration: 0.1s;
  --btn-hover-transition-easing: ease;

  --bg-form: #f0f1f3;
  --bg-gray: #fdfdfd;
  --bg-dark-blue: rgba(3, 61, 117, 0.8);

  --font-size-xxs: 0.775rem;
  --font-size-xs: 0.8rem;
  --font-size-s: 0.825rem;
  --font-size-m: 0.85rem;
  --font-size-l: 0.875rem;
  --font-size-xl: 0.9rem;
  --font-size-xxl: 0.925rem;
  --font-size-3xl: 0.95rem;
  --font-size-4xl: 0.975rem;
  --font-size-5xl: 1rem;

}

/* =============================================================================
	Colors
============================================================================= */
.main-color {
  color: var(--main-color);
}

.bg-lgrey {
  background: var(--bg-gray) !important;
}

.bg-form:not(body) {
  background: var(--bg-form) !important;
}

body.bg-form {
  background: var(--bg-form) !important;
}

body.bg-form .header,
body.bg-form .main-navigation,
body.bg-form .action-name,
body.bg-lgrey .header,
body.bg-lgrey .main-navigation,
body.bg-lgrey .action-name {
  background: #ffffff;
}

body.bg-form .action-name,
body.bg-lgrey .action-name {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 1;
}

body.bg-form .breadcrumb-subpage,
body.bg-form .application {
  background: var(--bg-form) !important;
}

.color-grey-5 {
  color: var(--color-grey-5);
}

.form-row-note {
  border-bottom: 1px solid var(--border-grey);
  /*color: var(--color-grey-5);*/
  color: var(--color-blue);
  font-size: var(--font-size-s);
  line-height: 1.2;
  padding-bottom: 0.2rem;
  margin-top: 0.75rem;
}

.form-row-note-2 {
  color: var(--color-grey-5);
  font-size: var(--font-size-s);
  line-height: 1.2;
  padding-bottom: 0.2rem;
}

.student-confirmation-status {
  color: var(--font-color-basic);
  font-size: var(--font-size-s);
  line-height: 1.3;
}

.student-confirmation-status i {
  color: var(--color-green);
}

.student-confirmation-status i.main-color {
  color: var(--main-color);
}

.student-confirmation-status-empty {
  color: var(--color-grey-5);
}

.tooltip {
  font-size: var(--font-size-xs);
}

.bg-gradient:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: linear-gradient(
    to bottom,
    rgba(245, 245, 245, 1),
    rgba(255, 255, 255, 0)
  );
}

.text-success {
	color: var(--main-color) !important;
}


/* =============================================================================
	General css
============================================================================= */
header,
nav,
section,
article,
aside,
footer {
  display: block;
}

* {
  scroll-behavior: inherit !important;
}

body {
  font-family: "Barlow", sans-serif;
  font-style: normal;
  font-size: 16px;
  font-weight: normal;
  color: var(--body-color);
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

a {
  color: var(--a-color);
  display: inline-block;
}

a,
a:active,
a:focus,
a:hover {
  outline: none;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
}

a:hover {
  color: var(--a-hover-color);
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul li {
  margin-bottom: 0px;
  line-height: 1.5;
  color: var(--font-color-basic);
  position: relative;
  display: inline-block;
  padding: 0;
}

ol {
  margin: 0;
  counter-reset: i;
  position: relative;
}

ol li {
  font-size: 16px;
  margin-bottom: 10px;
  line-height: 1.5;
  color: var(--font-color-basic);
  padding-left: 0;
  position: relative;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--main-font-color);
  margin: 0px;
  font-weight: 500;
  font-family: "Barlow", sans-serif;
  line-height: 1.2;
}

h1 {
  font-size: 35px;
}

h1 span {
  color: var(--main-color);
}

h2 {
  font-size: 35px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 22px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

p {
  margin: 0px;
}

.img {
  max-width: 100%;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  height: auto;
}

label {
  color: #999;
  cursor: pointer;
  font-weight: 400;
}

*::-moz-selection {
  background: #d6b161;
  color: #fff;
  text-shadow: none;
}

::-moz-selection {
  background: #555;
  color: #fff;
  text-shadow: none;
}

::selection {
  background: #555;
  color: #fff;
  text-shadow: none;
}

*::-moz-placeholder {
  color: #999;
  font-size: 16px;
  opacity: 1;
}

*::placeholder {
  color: #999;
  font-size: 16px;
  opacity: 1;
}

.is-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

p {
  margin-bottom: 8px;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul li {
  margin-bottom: 0px;
  line-height: 1.5;
  color: var(--main-font-color);
  position: relative;
  padding: 0;
}

ol {
  margin: 0;
  counter-reset: i;
  position: relative;
}

ol li {
  font-size: 16px;
  margin-bottom: 10px;
  line-height: 1.5;
  color: var(--main-font-color);
  padding-left: 0;
  position: relative;
}

.z-index1 {
  z-index: 1;
}

.z-index2 {
  z-index: 2;
}

.z-index3 {
  z-index: 4;
}

.form-group {
  width: 100%;
  display: inline-block;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="tel"],
input[type="date"],
input[type="file"],
input[type="time"],
textarea,
select {
  font-size: 15px !important;
  font-weight: 400 !important;
  background-color: #fff;
  border: 1px solid var(--input-border-color);
  padding: 7px 15px !important;
  color: var(--font-color-basic) !important;
  margin-bottom: 0;
  height: 47px !important;
  box-shadow: none;
  width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="file"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus,
input[type="text"]:hover:not(:disabled),
input[type="email"]:hover:not(:disabled),
input[type="number"]:hover:not(:disabled),
input[type="search"]:hover:not(:disabled),
input[type="password"]:hover:not(:disabled),
input[type="tel"]:hover:not(:disabled),
input[type="date"]:hover:not(:disabled),
input[type="file"]:hover:not(:disabled),
input[type="time"]:hover:not(:disabled),
textarea:hover:not(:disabled),
select:hover:not(:disabled) {
  outline: none !important;
  transition: all 0.5s ease !important;
  box-shadow: none;
  border: 1px solid var(--main-color) !important;
}

textarea {
  box-sizing: border-box;
  resize: vertical;
  height: 120px;
  border: 1px solid var(--input-border-color);
  color: var(--font-color-basic) !important;
  padding: 10px 20px !important;
  font-size: 15px !important;
  font-weight: 300 !important;
}

textarea:focus,
select:focus,
textarea:hover:not(:disabled),
select:hover:not(:disabled) {
  box-shadow: none !important;
  border: 1px solid var(--main-color) !important;
}

label {
  display: inline-block;
  color: var(--font-color-basic);
  margin-bottom: 8px;
  font-weight: 400;
  font-size: 15px;
}

.input-group-text,
.form-check-input {
  border-color: var(--input-border-color);
}

.border-t {
  border-top: 2px dashed var(--color-grey-8);
}

.border-t2 {
  border-top: 1px solid var(--color-grey-8);
}

.border-all {
  border: 1px solid #cccccc80 !important;
}

.border-b {
  border-bottom: 1px solid var(--border-grey) !important;
}

.hr-dashed {
  border-top: 2px dashed var(--color-grey-8);
  opacity: 1;
}

.d-none-soft {
  display: none;
}

.w-200p {
  width: 200px !important;
}

.pb-6 {
  padding-bottom: 5rem !important;
}

.w-35 {
  width: 35% !important;
}

.w-40 {
  width: 40% !important;
}

.w-45 {
  width: 45% !important;
}

.w-60px {
  width: 60px !important;
}

.w-80px {
  width: 80px !important;
}

.fw-200 {
	font-weight: 200;
}

.fw-300 {
	font-weight: 300;
}

.fw-400 {
	font-weight: 400;
}

.fw-500 {
	font-weight: 500;
}

.fw-600 {
	font-weight: 600;
}

.fw-700 {
	font-weight: 700;
}

.size-40 {
  width: 40px;
}
.size-60 {
  width: 60px;
}
.size-80 {
  width: 80px;
}
.size-90 {
  width: 90px;
}
.size-100 {
  width: 100px;
}
.size-110 {
  width: 110px;
}
.size-120 {
  width: 120px;
}
.size-130 {
  width: 130px;
}
.size-140 {
  width: 140px;
}
.size-150 {
  width: 150px;
}
.size-160 {
  width: 160px;
}
.size-170 {
  width: 170px;
}
.size-180 {
  width: 180px;
}
.size-200 {
  width: 200px;
}
.size-250 {
  width: 250px;
}
.size-300 {
  width: 300px;
}


/* =============================================================================
	Layout: Buttons
============================================================================= */
button {
  border: none;
}

.btn-outline-light {
  border-radius: 12px;
  padding: 12px 24px;
  font-size: 14px;
  text-transform: uppercase;
}

.bosorg-btn,
.bosorg-btn1,
.bosorg-btn2,
.bosorg-btn-orange,
.bosorg-btn-orange-light,
.bosorg-btn-dark-blue,
.bosorg-btn-grey,
.bosorg-btn-grey-2,
.bosorg-btn-green,
.bosorg-btn-white,
.bosorg-btn-red,
.bosorg-btn-blue-outline,
.bosorg-btn-green-outline {
  position: relative;
  display: block;
  text-decoration: none;
  font-size: 14px;
  text-align: center;
  padding: 12px 24px;
  border: none;
  overflow: hidden;
  border-radius: var(--bs-border-radius);
  background: var(--main-color);
  text-transform: uppercase;
  transition: all ease-in-out 0.5s;
  color: #fff;
  z-index: 1;
  display: inline-block;
}

.bosorg-btn2 {
  background: var(--color-yellow-dark);
}

.bosorg-btn-orange {
  background: var(--color-orange-3);
}

.bosorg-btn-orange-light {
  background: var(--color-orange-2);
}

.bosorg-btn-dark-blue {
  background: var(--color-bosorg-06-light);
}

.bosorg-btn-grey {
  background: var(--color-grey-2);
  border-radius: 4px;
}

.bosorg-btn-grey-2 {
  background: var(--color-grey-4);
  border-radius: 8px;
}

.bosorg-btn-green {
  background: var(--color-bosorg-02);
}

.bosorg-btn-white {
  background: #fff;
}

.bosorg-btn-red {
  background: var(--color-red);
}

.btn1 i {
  margin-left: 8px;
}

.bosorg-btn:hover,
.bosorg-btn:focus,
.bosorg-btn1:hover,
.bosorg-btn1:focus,
.bosorg-btn2:hover,
.bosorg-btn2:focus,
.bosorg-btn-orange:hover,
.bosorg-btn-orange:focus,
.bosorg-btn-orange-light:hover,
.bosorg-btn-orange-light:focus,
.bosorg-btn-dark-blue:hover,
.bosorg-btn-dark-blue:focus,
.bosorg-btn-grey:hover,
.bosorg-btn-grey:focus,
.bosorg-btn-grey-2:hover,
.bosorg-btn-grey-2:focus,
.bosorg-btn-green:hover,
.bosorg-btn-green:focus,
.bosorg-btn-white:hover,
.bosorg-btn-white:focus,
.bosorg-btn-red:hover,
.bosorg-btn-red:focus,
.bosorg-btn-blue-outline:hover,
.bosorg-btn-blue-outline:focus,
.bosorg-btn-green-outline:hover,
.bosorg-btn-green-outline:focus {
  transition: all ease-in-out 0.4s;
  color: #fff !important;
}

.bosorg-btn:before,
.bosorg-btn1:before,
.bosorg-btn2:before,
.bosorg-btn-orange:before,
.bosorg-btn-orange-light:before,
.bosorg-btn-dark-blue:before,
.bosorg-btn-grey:before,
.bosorg-btn-grey-2:before,
.bosorg-btn-green:before,
.bosorg-btn-white:before,
.bosorg-btn-red:before {
  background: var(--main-light-color);
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  transition: all 0.6s ease;
}

.bosorg-btn2:before {
  background: var(--color-yellow-dark-2);
}

.bosorg-btn-orange:before {
  background: var(--color-orange-4);
}

.bosorg-btn-orange-light:before {
  background: var(--color-orange-5);
}

.bosorg-btn-dark-blue:before {
  background: var(--color-bosorg-06-light-2);
}

.bosorg-btn-grey:before {
  background: var(--color-grey-3);
}

.bosorg-btn-grey-2:before {
  background: var(--color-grey-5);
}

.bosorg-btn-green:before {
  background: var(--color-green-2);
}

.bosorg-btn-red:before {
  background: var(--color-red-2);
}

.bosorg-btn-white:before {
  background: var(--color-grey-6);
}

.btn1:before {
  width: 0%;
  height: 100%;
}

.btn1:hover:before {
  width: 100%;
}

.btn1.placeholder:hover:before {
  width: 0% !important;
}

:is(
  .btn:not(.btn-link):not(.btn-close),
  .bosorg-btn,
  .bosorg-btn1,
  .bosorg-btn2,
  .bosorg-btn-orange,
  .bosorg-btn-orange-light,
  .bosorg-btn-dark-blue,
  .bosorg-btn-grey,
  .bosorg-btn-grey-2,
  .bosorg-btn-green,
  .bosorg-btn-white,
  .bosorg-btn-red,
  .bosorg-btn-blue-outline,
  .bosorg-btn-green-outline
) {
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
  transition-property:
    background-color, color, border-color, box-shadow !important;
  transition-duration: var(--btn-hover-transition-duration) !important;
  transition-timing-function: var(--btn-hover-transition-easing) !important;
}

:is(
  .btn:not(.btn-link):not(.btn-close),
  .bosorg-btn,
  .bosorg-btn1,
  .bosorg-btn2,
  .bosorg-btn-orange,
  .bosorg-btn-orange-light,
  .bosorg-btn-dark-blue,
  .bosorg-btn-grey,
  .bosorg-btn-grey-2,
  .bosorg-btn-green,
  .bosorg-btn-white,
  .bosorg-btn-red,
  .bosorg-btn-blue-outline,
  .bosorg-btn-green-outline
):active {
  transform: translate3d(0, 0, 0) scale(var(--btn-press-scale)) !important;
  transition: none !important;
}

.bosorg-btn1 {
  background: #fff;
  color: var(--font-color-basic);
  border: 1px solid var(--input-border-color);
}

.bosorg-btn-blue-outline {
  background: #fff;
  color: var(--main-color);
  border: 1px solid var(--main-color);
  transition: all 0.3s ease;
}

.bosorg-btn1:hover,
.bosorg-btn-orange:hover,
.bosorg-btn-orange-light:hover,
.bosorg-btn-dark-blue:hover,
.bosorg-btn-grey:hover,
.bosorg-btn-green:hover,
.bosorg-btn-red:hover {
  color: #fff !important;
}

.bosorg-btn-blue-outline:hover {
  border: 1px solid var(--main-color) !important;
  background: var(--main-color-light-03) !important;
  transition: all 0.3s ease;
  color: var(--main-color) !important;
}

.btn-check:checked + .bosorg-btn-blue-outline,
.bosorg-btn-blue-outline.active,
.bosorg-btn-blue-outline.show,
.bosorg-btn-blue-outline:first-child:active,
:not(.btn-check) + .bosorg-btn-blue-outline:active {
  color: #fff !important;
  border: 1px solid var(--main-color) !important;
  background: var(--main-color) !important;
}

#wrapcontenthotels .bosorg-btn-blue-outline:active {
  color: var(--main-color) !important;
  border: 1px solid var(--main-color) !important;
  background: var(--main-color-light-03) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

#wrapcontenthotels .bosorg-btn-blue-outline.active:active {
  color: #fff !important;
  background: var(--main-color) !important;
}

.form-check-input.is-invalid ~ .form-check-label,
.was-validated .form-check-input:invalid ~ .form-check-label {
  border-color: var(--bs-form-invalid-color);
}

.form-check-input.is-valid ~ .form-check-label,
.was-validated .form-check-input:valid ~ .form-check-label {
  border-color: var(--bs-form-valid-color);
}

.bosorg-btn-green-outline:hover {
  border: 1px solid var(--color-bosorg-02);
  background: var(--color-bosorg-02);
  transition: all 0.3s ease;
}

.bosorg-btn1:before {
  background: var(--color-black);
}

.bosorg-btn-white,
.bosorg-btn-white:hover,
.bosorg-btn-white:focus {
  color: var(--color-bosorg-06) !important;
}

.outline-blue {
  border: 1px solid var(--color-blue);
}
.outline-green {
  border: 1px solid var(--color-bosorg-02);
}

input#submit {
  border: none;
}

input#submit:hover {
  opacity: 0.8;
  background: #1967d3 !important;
  color: #fff;
}

.register-login .bosorg-btn-blue-outline {
  white-space: nowrap;
  margin-left: var(--bs-navbar-brand-margin-end);
  color: var(--color-blue) !important;
}

.bosorg-btn-blue-outline:focus {
  color: var(--color-blue) !important;
}

.bosorg-btn-green-outline:focus {
  color: var(--color-bosorg-02) !important;
}

.btn-small {
  padding: 9px 22px;
}

.btn-small-2 {
  padding: 9px 0px;
}

.btn-small-3 {
  padding: 3px 10px;
}

/* Univerzální výška/zarovnání pro malá tlačítka (btn-small-3) */
.btn-h-univ {
  box-sizing: border-box;
  height: 38px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  padding: 0 15px !important;
}

.bosorg-btn-blue-outline.btn-h-univ:active,
.bosorg-btn-blue-outline.btn-h-univ:first-child:active,
:not(.btn-check) + .bosorg-btn-blue-outline.btn-h-univ:active {
  color: var(--main-color) !important;
  border-color: var(--main-color) !important;
  background-color: var(--main-color-light-03) !important;
}

/* Užší (na výšku nižší) varianta univerzální výšky pro malá tlačítka (btn-small-3) */
.btn-h-slim {
  box-sizing: border-box;
  height: 26px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-s);
  line-height: var(--font-size-s);
  padding: 0 12px !important;
}

.bosorg-btn-blue-outline.btn-h-slim:active,
.bosorg-btn-blue-outline.btn-h-slim:first-child:active,
:not(.btn-check) + .bosorg-btn-blue-outline.btn-h-slim:active {
  color: var(--main-color) !important;
  border-color: var(--main-color) !important;
  background-color: var(--main-color-light-03) !important;
}

.coauthor-remove-button {
  height: 38px;
  min-height: 38px;
  color: var(--bs-danger) !important;
  border-color: var(--bs-danger) !important;
  background-color: transparent !important;
}

.coauthor-remove-button:hover,
.coauthor-remove-button:focus,
.bosorg-btn-blue-outline.coauthor-remove-button:active,
.bosorg-btn-blue-outline.coauthor-remove-button:first-child:active,
:not(.btn-check) + .bosorg-btn-blue-outline.coauthor-remove-button:active {
  color: var(--bs-danger) !important;
  border-color: var(--bs-danger) !important;
  background-color: var(--bs-danger-bg-subtle) !important;
}

.coauthor-remove-button:hover i,
.coauthor-remove-button:focus i,
.coauthor-remove-button:active i {
  color: var(--bs-danger) !important;
}

.coauthor-heading-remove-button,
.coauthor-heading-remove-button:hover,
.coauthor-heading-remove-button:focus,
.coauthor-heading-remove-button:active {
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 1;
}

#coauthors-list .coauthor-row:first-child {
  margin-top: 0.5rem !important;
}

.btn-big {
  font-size: 15px;
  padding: 15px 27px;
}

label.btn-big {
  margin-bottom: 0;
}

/* Registration choices (accommodation yes/no and nights, cost coverage, payment method): the size of the
   regular buttons so they do not outweigh the primary "Odeslat registraci" / "Pokračovat" action; content
   width with a common minimum so the options of one row match (full width on mobile) */
label.registration-option-btn {
  margin-bottom: 0;
  min-width: 12.5rem;
}

@media all and (max-width: 1399.98px) {
  .btn-big {
    font-size: 14px;
    padding: 12px 20px;
  }
}

@media all and (max-width: 1199.98px) {
  .register-login .bosorg-btn-blue-outline {
    padding: 8px 15px;
  }

  .bosorg-btn {
    padding: 12px 15px;
  }

  .btn-big {
    font-size: 14px;
    padding: 12px 20px;
  }
}

/* ===================
preloader
====================== */

.preloader {
  background: #fff;
  position: fixed;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 9999;
}

.loader {
  width: 40px;
  height: 40px;
  position: relative;
  top: calc(50% - 30px);
  left: calc(50% - 20px);
}

.loader-box-1,
.loader-box-2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--main-color);
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  animation: loader-bounce 2s infinite ease-in-out;
}

.loader-box-2 {
  animation-delay: -1s;
}

@keyframes loader-bounce {
  0%,
  100% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
}

/* ===================
theme default css
====================== */

.ovrflow-hidden {
  overflow: hidden;
}

.text-right {
  text-align: right;
}

.space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.c-pd {
  padding: 0 7rem;
}

.s-pd {
  padding: 0 12rem;
}

.h-100 {
  height: 100%;
}

.h-100vh {
  height: 100vh;
}

.bg {
  background-color: #eff8fb;
}

/* ===================
site title css
====================== */

.site-heading {
  margin-bottom: 50px;
}

.site-title-tagline {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 18px;
  color: var(--main-color);
  position: relative;
}

.site-title {
  font-weight: 700;
  text-transform: capitalize;
  font-size: 42px;
  color: var(--main-font-color);
  margin-top: 5px;
  margin-bottom: 0;
}

.site-title span {
  color: var(--main-color);
}

.site-heading p {
  font-size: 16px;
}

.heading-divider {
  display: inline-block;
  position: relative;
  height: 4px;
  background-color: var(--main-color);
  width: 90px;
  overflow: hidden;
}

.heading-divider:after {
  content: "";
  position: absolute;
  left: 0;
  top: -1.1px;
  height: 7px;
  width: 8px;
  background-color: #ffffff;
  -webkit-animation: heading-move 5s infinite linear;
  animation: heading-move 5s infinite linear;
}

@-webkit-keyframes heading-move {
  0% {
    transform: translateX(-1px);
  }
  50% {
    transform: translateX(85px);
  }
  100% {
    transform: translateX(-1px);
  }
}

@keyframes heading-move {
  0% {
    transform: translateX(-1px);
  }
  50% {
    transform: translateX(85px);
  }
  100% {
    transform: translateX(-1px);
  }
}

/* ===================
margin & padding
====================== */

.pb-140 {
  padding-bottom: 140px;
}

.pd-50 {
  padding: 50px 0;
}

.py-80 {
  padding: 80px 0;
}


.py-90 {
  padding: 90px 0;
}

.py-120 {
  padding: 120px 0;
}

.pt-120 {
  padding-top: 120px;
}

.pb-120 {
  padding-bottom: 120px;
}

.pt-0 {
  padding-top: 0px;
}

.pt-10 {
  padding-top: 10px;
}

.pt-20 {
  padding-top: 20px;
}

.pt-30 {
  padding-top: 30px;
}

.pt-40 {
  padding-top: 40px;
}

.pt-50 {
  padding-top: 50px;
}

.pt-60 {
  padding-top: 60px;
}

.pt-70 {
  padding-top: 70px;
}

.pt-80 {
  padding-top: 80px;
}

.pt-90 {
  padding-top: 90px;
}

.pt-100 {
  padding-top: 100px;
}

.pb-0 {
  padding-bottom: 0px;
}

.pb-10 {
  padding-bottom: 10px;
}

.pb-20 {
  padding-bottom: 20px;
}

.pb-30 {
  padding-bottom: 30px;
}

.pb-40 {
  padding-bottom: 40px;
}

.pb-50 {
  padding-bottom: 50px;
}

.pb-60 {
  padding-bottom: 60px;
}

.pb-70 {
  padding-bottom: 70px;
}

.pb-80 {
  padding-bottom: 80px;
}

.pb-90 {
  padding-bottom: 90px;
}

.pb-100 {
  padding-bottom: 100px;
}

.mt-0 {
  margin-top: 0px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-50 {
  margin-top: 50px;
}

.mt-60 {
  margin-top: 60px;
}

.mt-70 {
  margin-top: 70px;
}

.mt-80 {
  margin-top: 80px;
}

.mt-90 {
  margin-top: 90px;
}

.mt-100 {
  margin-top: 100px;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mb-60 {
  margin-bottom: 60px;
}

.mb-70 {
  margin-bottom: 70px;
}

.mb-80 {
  margin-bottom: 80px;
}

.mb-90 {
  margin-bottom: 90px;
}

.mb-100 {
  margin-bottom: 100px;
}

.mr-300 {
  margin-right: 300px;
}

.ml-300 {
  margin-left: 300px;
}

.pos-rel {
  position: relative;
  z-index: 1;
}

/* ===================
theme button
====================== */

.theme-btn {
  font-size: 16px;
  color: #ffffff;
  padding: 12px 30px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  text-transform: uppercase;
  position: relative;
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  z-index: 1;
  border: none;
  border-radius: 8px;
  background: var(--main-color);
  box-shadow: 0 3px 24px rgb(0 0 0 / 10%);
}

.theme-btn::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -2px;
  width: 15px;
  height: 15px;
  border-radius: 8px;
  background: var(--main-font-color);
  z-index: -1;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}

.theme-btn:hover {
  color: #fff;
}

.theme-btn:hover::before {
  width: 105%;
  height: 105%;
}

.theme-btn2 {
  background: var(--main-font-color);
}

.theme-btn2::before {
  background: var(--main-color);
}

.theme-btn i {
  margin-left: 8px;
}

/* =============================================================================
	Layout: container css
============================================================================= */
/*
@media (min-width: 1200px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1185px;
  }
}
*/

.container {
  /*position: relative;*/
  z-index: 1;
}

@media (min-width: 1200px) {
  body.narrow .container {
    max-width: 1156px;
  }
}

.z-index-2 {
  z-index: 2;
}

/*
@media (max-width: 767px) {
	.container:not(.container-footer),
	.container-sm {
		max-width: 100%;
	}
}
*/

/* =============================================================================
	Layout: Header top css
============================================================================= */
.header-top {
  padding: 6px 0;
  position: relative;
  background: var(--main-color);
  z-index: 1;
}

.header-top-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-top-contact ul {
  display: flex;
  align-items: center;
  gap: 25px;
}

.header-top-contact ul li {
  font-size: 0.9rem;
  line-height: 0.9rem;
}

.header-top-contact ul li a,
.header-top-contact ul li span {
  color: #fff;
  font-weight: 400;
}

.header-top-contact ul li a i,
.header-top-contact ul li span i {
  margin-right: 5px;
  color: #fff;
}

.header-top-contact ul li img {
  height: 25px;
}

.header-top-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header-top-social a {
  width: 25px;
  height: 25px;
  line-height: 25px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  margin-left: 5px;
  border-radius: 8px;
  transition: all 0.3s ease-in-out;
}

.header-top-social a:hover {
  background: #fff;
  color: var(--main-color);
}

.header-top-account a {
  width: 140px;
  display: inline-block;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-align: right;
}

.header-top-account a {
  color: #fff;
}

.header-top-account a i {
  margin-right: 8px;
}

.nav-item .user-account {
  width: 250px;
  display: inline-block;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

@media all and (max-width: 1199px) {
  .header-top-social {
    display: none;
  }

  .header-top::before {
    width: 320px;
  }
}

@media all and (max-width: 992px) {
  .header-top {
    display: none;
  }
}

/* =============================================================================
	Layout: Navbar
============================================================================= */
.main {
  margin-top: 0rem;
}

@media all and (min-width: 992px) {
  .navbar .nav-item .nav-link {
    padding: 20px 0;
    font-size: 18px;
    font-weight: 500;
    color: var(--main-font-color);
    text-transform: uppercase;
  }

  .navbar .nav-item .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    margin-top: 0;
    border: none;
    border-radius: 0px;
    width: 260px;
    box-shadow: 0 3px 24px rgb(0 0 0 / 10%);
    padding-top: 0;
    padding-bottom: 0;
  }
  .navbar .nav-item .dropdown-menu li {
    border-bottom: 1px solid #eee;
  }
  .navbar .nav-item .dropdown-menu li:last-child {
    margin-bottom: 0;
    border-bottom: none;
  }
  .navbar .nav-item .dropdown-menu .dropdown-item {
    font-size: 15px;
    font-weight: 500;
    padding: 8px 15px;
    color: var(--main-font-color);
    position: relative;
    text-transform: uppercase;
    transition: all 0.5s ease-in-out;
  }
  .navbar .nav-item .dropdown-menu .dropdown-item::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 6px;
    height: 100%;
    background: var(--main-color);
    transition: all 0.3s ease-in-out;
    opacity: 0;
  }
  .navbar .nav-item .dropdown-menu .dropdown-item:hover::before {
    opacity: 1;
  }

  .navbar .nav-item .dropdown-menu .dropdown-item:hover {
    background: transparent;
    color: var(--main-color);
    padding-left: 28px;
  }
  .navbar .nav-item .nav-link {
    position: relative;
  }
  .navbar .nav-item .nav-link::before {
    content: "";
    position: absolute;
    width: 0px;
    height: 3px;
    left: 0px;
    background: var(--main-color);
    bottom: 18px;
    opacity: 0;
    transition: all 0.5s ease-in-out;
  }
  .navbar .nav-item .nav-link.active::before,
  .navbar .nav-item:hover .nav-link::before {
    opacity: 1 !important;
    width: 25px;
  }
  .navbar .nav-item:hover .dropdown-menu {
    transition: 0.3s;
    opacity: 1;
    visibility: visible;
    top: 100%;
    transform: rotateX(0deg);
  }
  .navbar .dropdown-menu-end {
    right: 0;
    left: auto;
  }
  .navbar .dropdown-menu.fade-down {
    top: 80%;
    transform: rotateX(-75deg);
    transform-origin: 0% 0%;
  }
  .navbar .dropdown-menu.fade-up {
    top: 140%;
  }
  .header-nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: 30px;
  }
  .header-phone {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  .header-phone-content span {
    display: block;
    margin-bottom: 10px;
    line-height: 0.6;
  }
  .header-phone-icon {
    font-size: 40px;
    color: var(--main-color);
  }
  .header-phone-number {
    font-size: 20px;
    line-height: 1;
  }
  .header-phone-number a {
    color: var(--main-color);
  }
  .header-nav-search a {
    color: var(--main-font-color);
    font-size: 18px;
    padding: 5px;
  }
  .header-nav-search a:hover {
    color: var(--main-color);
  }
  .navbar .header-btn {
    padding-top: 8px;
  }
}

/* =============================================================================
	Layout: Section Menu
============================================================================= */
.navbar {
  padding-top: 0;
  padding-bottom: 0;
  transition: background-color 0.22s ease, box-shadow 0.22s ease;
  z-index: 999;
}

.main-navigation {
  position: sticky;
  top: 0;
  z-index: 999;
}

.navbar-nav .dropdown-menu li {
  display: block;
}

.navbar.navbar-scrolled {
  background-color: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.17);
}

.navbar.navbar-scrolled .nav-item .nav-link::before {
  color: var(--main-font-color);
}

.navbar .navbar-brand .logo-display {
  display: block;
}

.navbar .navbar-brand .logo-scrolled {
  display: none;
}

.navbar.navbar-scrolled .navbar-brand .logo-display {
  display: none;
}

.navbar.navbar-scrolled .navbar-brand .logo-scrolled {
  display: block;
}

.navbar-brand img {
  height: 35px;
}

/* =============================================================================
	Layout: Mobile Menu
============================================================================= */
@media all and (max-width: 1199px) {
  .navbar .header-btn {
    display: none;
  }
  .navbar .header-btn {
    display: none;
  }
  .header-phone {
    display: none;
  }
}

@media all and (max-width: 991.99px) {
  body {
    padding-top: 41px;
  }

  .navbar {
    top: 0;
    right: 0;
    left: 0;
    background-color: #fff;
    position: fixed;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.17);
  }

  .navbar-brand {
    align-items: center;
    display: flex;
    height: 44px;
    margin-top: 0 !important;
    padding-bottom: 0;
    padding-top: 0;
  }

  .navbar-brand img {
    height: 24px;
  }

  .navbar .nav-item .nav-link {
    color: var(--main-font-color);
    font-weight: 400;
    transition: all 0.5s ease-in-out;
  }

  .navbar .nav-item .nav-link:hover {
    color: var(--main-color) !important;
  }

  .navbar .dropdown-menu {
    border-radius: 10px;
    padding-top: 0;
    padding-bottom: 0.25rem;
  }

  .header-nav-right {
    display: none;
  }
}

/* =============================================================================
	Layout: Navbar customize
============================================================================= */
.navbar-toggler span {
  display: block;
  background-color: #4f4f4f;
  height: 1px;
  width: 14px;
  margin-top: 3px;
  margin-bottom: 3px;
  position: relative;
  left: 0;
  opacity: 1;
  transition: all 0.35s ease-out;
  transform-origin: center left;
}

.navbar-toggler span:nth-child(1) {
  transform: translate(0%, 0%) rotate(0deg);
}

.navbar-toggler span:nth-child(2) {
  opacity: 1;
}

.navbar-toggler span:nth-child(3) {
  transform: translate(0%, 0%) rotate(0deg);
}

.navbar-toggler span:nth-child(1) {
  margin-top: 0.3em;
}

.navbar-toggler:not(.collapsed) span:nth-child(1) {
  transform: translate(15%, -110%) rotate(45deg);
}

.navbar-toggler:not(.collapsed) span:nth-child(2) {
  opacity: 0;
}

.navbar-toggler:not(.collapsed) span:nth-child(3) {
  transform: translate(15%, 110%) rotate(-45deg);
}

/* Collapsed menu 100% height */
@media all and (max-width: 991.95px) {
  .navbar-collapse > ul {
    height: 100vh;
  }

  .navbar-collapse > ul > li > ul {
    border: 0;
    padding-top: 0;
    margin-top: -0.35rem;
  }

  .navbar-collapse > ul > li > ul > li {
    font-size: 14px;
  }

  .navbar-collapse > ul > li > .nav-link,
  .navbar-collapse > ul > li > ul > li .dropdown-item {
    padding-left: 5px;
    padding-right: 5px;
  }

  .navbar-collapse > ul > li > ul > li:first-child .dropdown-item {
    padding-top: 0;
  }

  .navbar-collapse > ul > li > ul > li .dropdown-item {
    color: var(--main-font-color);
    padding-left: 15px;
  }

  .navbar-collapse > ul > li > ul > li i.bi {
    display: inline-block;
  }

  .navbar-collapse > ul > li > ul > li .nav-dropdown-icon {
    color: var(--main-font-color);
    display: inline-block;
    font-size: 0.85em;
  }
}

@media all and (min-width: 992px) {
  .navbar-collapse > ul {
    height: auto;
  }

  .navbar-collapse > ul > li > ul > li i.bi {
    display: none;
  }

  .navbar-collapse > ul > li > ul > li .nav-dropdown-icon {
    display: none;
  }
}

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1;
  background-color: transparent;
  border: 0;
  border-radius: 0.25rem;
  transition: box-shadow 0.15s ease-in-out;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.dropdown-toggle::after {
  transition: all 0.35s ease-out;
}

@media all and (max-width: 991.95px) {
  .dropdown-toggle::after {
    display: none;
  }

  .nav-dropdown-icon {
    font-size: 0.7em;
    margin-left: auto;
    transition: all 0.35s ease-out;
  }

  .dropdown-toggle.show::after {
    -ms-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
  }

  .dropdown-toggle.show .nav-dropdown-icon {
    -ms-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
  }

  /* submenu sliding closed (main.js "Mobile menu"): the arrow turns back right away, the dropdown is still
     .show until the slide ends */
  .dropdown.is-closing .dropdown-toggle.show .nav-dropdown-icon {
    transform: none;
  }
}

@media all and (min-width: 992px) {
  .dropdown:hover .dropdown-toggle::after {
    -ms-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
  }
}

.navbar .navbar-collapse {
  background-color: #ffffff;
  padding: 0;
}

/* Navbar hover */
@media all and (min-width: 992px) {
  .navbar .nav-item .dropdown-menu {
    margin-top: 0;
  }

  .navbar .nav-item {
    border: 0 !important;
  }

  .navbar .nav-item > a {
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.8rem 0 0.8rem 0;
  }

  .navbar .navbar-collapse {
    background-color: transparent;
  }

  [aria-current="false"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}

/* =============================================================================
	Layout: Home page Slider
============================================================================= */
.hero-slider .slide-item {
  height: 600px;
  position: relative;
}

.hero-slider-embla {
  position: relative;
  overflow: hidden;
}

.hero-slider-embla .hero-slider-viewport {
  overflow: hidden;
  padding: 0;
  cursor: grab;
  user-select: none;
  height: 600px;
}

@media all and (max-width: 991.99px) {
  .hero-slider .slide-item {
    height: 430px;
  }

  .hero-slider-embla .hero-slider-viewport {
    height: 430px;
  }
}

.hero-slider-single .hero-slider-viewport {
  cursor: default;
}

.hero-slider-embla .hero-slider-container {
  position: relative;
  display: block;
  height: 100%;
  touch-action: pan-y pinch-zoom;
}

.hero-slider-embla.hero-slider-is-dragging .hero-slider-viewport {
  cursor: grabbing;
}

.hero-slider-embla .hero-slider-slide {
  position: absolute;
  inset: 0;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
  z-index: 0;
}

.hero-slider-embla .hero-slider-slide-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.hero-slider-embla .hero-slider-slide-previous {
  opacity: 1;
  z-index: 1;
}

.hero-slider .slide-item .slide-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.hero-slider .slide-item .slide-bg picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-slider .slide-item .slide-bg img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.hero-slider .slide-item .slide-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 22, 41, var(--slide-overlay-opacity, 0));
  pointer-events: none;
  z-index: 1;
}

.hero-slider .slide-item .slide-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 22, 41, 0.78) 0%, rgba(10, 22, 41, 0.58) 35%, rgba(10, 22, 41, 0.18) 65%, rgba(10, 22, 41, 0) 100%);
  pointer-events: none;
  z-index: 2;
}

.hero-slider .hero-content .hero-sub-title,
.hero-slider .hero-content .hero-title,
.hero-slider .hero-content p {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.hero-slider .hero-content .hero-title span {
  color: var(--main-color);
}

.hero-slider .hero-content .hero-btn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.hero-slider .hero-content {
  padding: 1.75rem 2rem;
  border-radius: 14px;
  background: rgba(10, 22, 41, 0.15);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* =============================================================================
	Layout: Home page slider dots
============================================================================= */
.hero-slider-dots {
  position: absolute;
  bottom: 1rem;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

.hero-slider-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}

.hero-slider-dots li button {
  font-size: 0;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}

.hero-slider-dots li button:hover,
.hero-slider-dots li button:focus {
  outline: none;
}

.hero-slider-dots li button:hover:before,
.hero-slider-dots li button:focus:before {
  opacity: 0.75;
  background: var(--main-color);
}

.hero-slider-dots li button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  opacity: 0.5;
  background: #486a79;
}

.hero-slider-dots li.hero-slider-dot-active button:before,
.hero-slider-dots li:hover button:before {
  opacity: 0.75;
  background: var(--main-color);
  outline: 5px solid rgba(0, 149, 229, 0.2);
  transition: 0.5s;
}
/* ===================
hero css
====================== */
.hero-single {
  padding-top: 150px;
  padding-bottom: 150px;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.hero-single::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 10, 22, 0.6);
  z-index: -1;
}

.hero-single .hero-content .hero-title {
  color: #fff;
  font-size: 50px;
  font-weight: 700;
  line-height: 1.3;
  margin: 15px 0;
  text-transform: uppercase;
}

.hero-single .hero-content .hero-title span {
  color: #1dbfcc;
}

.hero-single .hero-content .hero-sub-title {
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  position: relative;
  text-transform: uppercase;
  background: #1dbfcc;
  padding: 8px 20px;
  display: inline-block;
  border-radius: 50px;
  letter-spacing: 2px;
}

.hero-single .hero-content p {
  color: #fff;
  line-height: 30px;
  font-weight: 400;
  margin-bottom: 40px;
}

.hero-single .hero-content .hero-btn {
  gap: 2rem;
  display: flex;
  margin-top: 1rem;
  justify-content: start;
}

.hero-single .video-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media all and (max-width: 1199px) {
  .hero-single .hero-content .hero-title {
    font-size: 37px;
  }
}

@media all and (max-width: 991px) {
  .hero-single .hero-content .hero-title {
    font-size: 35px;
  }
  .hero-single {
    padding-top: 190px;
    background-position: center;
  }
  .hero-single::after {
    width: 100%;
    transform: none;
    margin: 0;
  }
}

@media all and (max-width: 767px) {
  .hero-single .hero-content .hero-sub-title {
    font-size: 16px;
  }
  .hero-single .hero-content .hero-btn {
    gap: 1rem;
  }
  .hero-single .hero-content .theme-btn {
    padding: 10px 25px;
  }
}

/* =====================
play btn
===================== */

.play-btn {
  display: inline-block;
  padding: 0;
  height: 75px;
  width: 75px;
  line-height: 75px;
  font-size: 20px;
  text-align: center;
  background: #fff;
  color: var(--main-color) !important;
  position: absolute;
  border-radius: 50%;
}

.play-btn i::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: #fff;
  border-radius: 50px;
  animation: ripple-wave 1s linear infinite;
  -webkit-transform: scale(1);
  transform: scale(1);
  transition: all 0.5 ease-in-out;
}

@keyframes ripple-wave {
  0% {
    opacity: 0.8;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
}

/* ===================
about css
====================== */

.about-area {
  position: relative;
  display: block;
}

.about-left {
  position: relative;
  display: block;
  margin-right: 30px;
}

.about-img img {
  border-radius: 10px;
}

.about-left-content {
  position: absolute;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 20px 10px 10px;
  left: -20px;
  bottom: 50px;
  border-radius: 10px;
  box-shadow: 0 3px 24px rgb(0 0 0 / 10%);
}

.about-left-icon {
  width: 70px;
  height: 70px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(29, 191, 204, 0.5);
}

.about-left-icon i {
  font-size: 28px;
  color: #fff;
  width: 55px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  border-radius: 50px;
  background: var(--main-color);
}

.about-left-info p a {
  color: var(--main-color);
  font-size: 20px;
  font-weight: 500;
}

.about-right {
  position: relative;
  display: block;
}

.about-list-wrapper {
  position: relative;
  display: block;
  margin-top: 22px;
}

.about-list {
  position: relative;
  display: block;
}

.about-list li {
  position: relative;
  display: flex;
  align-items: center;
}

.about-list li + li {
  margin-top: 6px;
}

.about-list li .icon {
  position: relative;
  display: flex;
  align-items: center;
}

.about-list li .icon span {
  font-size: 50px;
  color: var(--main-color);
}

.about-list li .text {
  margin-left: 16px;
}

.about-list li .text p {
  color: #757f95;
  margin: 0;
}

@media all and (max-width: 991px) {
  .about-right {
    margin-top: 140px;
  }
}

@media all and (max-width: 767px) {
  .about-title {
    font-size: 30px;
  }
  .about-left {
    margin-right: 0;
  }
  .about-left-content {
    bottom: -70px;
  }
}

/* ===================
service css
====================== */

.service-area {
  position: relative;
}

.service-item {
  margin-bottom: 25px;
  transition: all 0.5s ease-in-out;
}

.service-item:hover {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}

.service-img {
  position: relative;
}

.service-img img {
  border-radius: 10px;
}

.service-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--main-color);
  border-radius: 10px;
}

.service-icon i {
  font-size: 37px;
  color: #fff;
}

.service-content {
  padding: 20px 20px 10px 20px;
  background: #fff;
  border-radius: 10px;
  margin-top: -30px;
  margin-left: 20px;
  margin-right: 20px;
  position: relative;
  box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);
}

.service-content-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.service-arrow {
  margin-top: 20px;
}

.service-arrow .theme-btn {
  padding: 9px 25px;
}

.service-title a {
  font-size: 22px;
  color: var(--main-font-color);
}

.service-title a:hover {
  color: var(--main-color) !important;
}

.service-text {
  margin-top: 15px;
}

.service-area2 .service-content {
  margin: 0;
}

/* ====================
service single
==================== */

.service-single-list i {
  color: var(--main-color);
  margin-right: 10px;
}

.service-download a {
  border: 2px solid var(--main-color);
  padding: 10px 20px;
  color: var(--main-font-color);
  display: block;
  border-radius: 8px;
  margin-bottom: 20px;
  transition: all 0.5s ease-in-out;
}

.service-download a i {
  margin-right: 10px;
}

.service-download a:hover {
  background-color: var(--main-color);
  color: #fff;
}

.service-details img {
  border-radius: 10px;
}

/* ===================
CTA css
====================== */

.cta-area {
  background-image: url(../img/cta/01.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  padding: 50px 0;
  z-index: 1;
}

.cta-area::before {
  content: "";
  position: absolute;
  background: rgba(3, 61, 117, 0.8);
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1;
}

.cta-wrapper h1,
.cta-wrapper p {
  color: #fff;
}

.cta-wrapper p {
  margin-top: 10px;
}

.cta-wrapper .theme-btn {
  margin-top: 30px;
}

/* ===================
video css
====================== */

.video-area {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
}

.video-area::before {
  content: "";
  position: absolute;
  background: rgba(3, 61, 117, 0.5);
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.video-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  border-radius: 5px;
  height: 500px;
  z-index: 100;
}

.video-wrapper img {
  border-radius: 12px;
}

.video-area .play-btn {
  display: inline-block;
  padding: 0;
  height: 75px;
  width: 75px;
  text-align: center;
  background: #fff;
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media all and (max-width: 767px) {
  .video-wrapper {
    height: 250px;
  }
}

/* ===================
choose css
====================== */
.choose-area {
  position: relative;
  background: var(--main-font-color);
}

.choose-img {
  background-image: url(../img/choose/01.jpg);
  background-repeat: no-repeat;
  background-position: left;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 50%;
}

.choose-left-info {
  position: relative;
  background: var(--main-color);
  padding: 40px 30px;
  border-radius: 15px;
}

.choose-left-info h4 {
  margin-bottom: 20px;
  text-transform: uppercase;
  font-size: 18px;
}

.choose-left-info h2 {
  margin-bottom: 40px;
  text-transform: capitalize;
  font-size: 32px;
  color: #fff;
}

.choose-left-info .theme-btn2::before {
  background: #fff;
}

.choose-left-info .theme-btn2:hover {
  color: var(--main-font-color);
}

.choose-right-content {
  position: relative;
}

.choose-right-content li {
  display: block;
  margin-bottom: 20px;
  padding-left: 40px;
  position: relative;
  z-index: 1;
}

.choose-right-content li h5 {
  text-transform: capitalize;
  font-weight: 600;
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-bottom: 10px;
  font-size: 20px;
  color: #fff;
}

.choose-right-content li::after {
  position: absolute;
  left: 12px;
  top: 0;
  content: "\f058";
  color: var(--main-color);
  font-family: "Font Awesome 6 Pro";
  font-weight: 600;
}

.choose-right-content p {
  color: #eeeeea;
}

@media all and (max-width: 991px) {
  .choose-img {
    display: none;
  }
  .choose-right {
    margin-top: 60px;
  }
}

/* ===================
testimonial css
====================== */

.testimonial-area {
  position: relative;
  z-index: 1;
}

.testimonial-single {
  margin-bottom: 20px;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  position: relative;
}

.testimonial-single::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 20px;
  right: 20px;
  height: 100%;
  background-color: var(--main-color);
  border-radius: 10px;
  z-index: -1;
}

.testimonial-content {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-top: 30px;
}

.testimonial-author-img {
  margin-right: 20px;
  width: 80px;
  padding: 5px;
  border-radius: 50px;
  border: 2px dashed var(--main-color);
}

.testimonial-author-img img {
  border-radius: 50%;
}

.testimonial-author-info h4 {
  font-size: 20px;
}

.testimonial-quote-icon i {
  font-size: 50px;
  color: var(--main-color);
}

.testimonial-rate {
  color: var(--main-color);
}

/* ===================
counter css
====================== */

.counter-area {
  position: relative;
  background: var(--main-color);
  z-index: 1;
}

.counter-box {
  text-align: center;
  padding: 20px;
  margin: 20px 0;
  border-radius: 15px;
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.17);
  z-index: 1;
}

.counter-box .icon {
  height: 90px;
  width: 90px;
  font-size: 38px;
  color: #fff;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: var(--main-font-color);
  border-radius: 50px;
  margin-bottom: 20px;
}

.counter-box .counter {
  display: block;
  line-height: 1;
  color: #fff;
  font-size: 50px;
  font-weight: 600;
}

.counter-box .title {
  color: var(--main-font-color);
  margin-top: 15px;
  font-size: 18px;
}

@media all and (max-width: 991px) {
  .counter-area .counter-box {
    margin-bottom: 25px;
  }
}

@media all and (max-width: 767px) {
  .counter-area2 {
    margin-top: -40px;
  }
}

/* ========================
Case studies css
=========================== */

.case-item {
  margin-bottom: 25px;
  position: relative;
}

.case-img {
  position: relative;
}

.case-img img {
  border-radius: 10px;
}

.case-img::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: 10px;
  left: 10px;
  opacity: 0;
  border-radius: 10px;
  background: rgba(29, 191, 204, 0.7);
  transform: scaleY(0);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.case-item:hover .case-img::before {
  opacity: 1;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

.case-link {
  position: absolute;
  width: 50px;
  height: 50px;
  line-height: 50px;
  color: var(--main-color) !important;
  background: #fff;
  text-align: center;
  border-radius: 50px;
  left: 50%;
  top: 50%;
  font-size: 22px;
  margin-top: 50px;
  opacity: 0;
  box-shadow: 0 3px 24px rgb(0 0 0 / 10%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.case-item:hover .case-link {
  margin-top: 0px;
  opacity: 1;
}

.case-item .case-content {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  opacity: 0;
  transition: all 1s ease-in-out;
}

.case-item .case-content a {
  color: #fff !important;
}

.case-item:hover .case-content {
  bottom: 120px;
  opacity: 1;
}

.filter-btns {
  text-align: center;
  margin-bottom: 30px;
}

.filter-btns li {
  display: inline-block;
  text-transform: uppercase;
  margin: 10px;
  font-weight: 600;
  color: var(--main-font-color);
  cursor: pointer;
  padding-bottom: 5px;
  border-bottom: 3px solid transparent;
  transition: all 0.5s ease-in-out;
}

.filter-btns li:hover {
  color: var(--main-color);
}

.filter-btns li.active {
  color: var(--main-color);
  border-color: var(--main-color);
}


/* ===================
blog css
====================== */

.blog-item {
  margin-bottom: 25px;
  border-radius: 10px;
  padding: 20px;
  /*box-shadow: 0 0 15px 5px rgb(0 0 0 / 5%);*/
  transition: all 0.5s ease-in-out;
  background: #fff;
}

.blog-item:hover {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}

.blog-item-img img {
  border-radius: 10px;
}

.blog-item-info {
  padding-top: 23px;
}

.blog-item-meta ul {
  margin: 0;
  padding: 0;
  margin-bottom: 14px;
  border-bottom: 1px solid #e6e8eb;
  padding-bottom: 18px;
}

.blog-item-meta ul li {
  display: inline-block;
  margin-right: 15px;
  position: relative;
  font-size: var(--font-size-xl);
}

.blog-item-meta ul li i {
  margin-right: 5px;
  color: var(--main-color);
}

.blog-item-meta ul li a {
  color: var(--main-font-color);
}

.home-course-item .blog-title a {
  font-size: 17px;
  line-height: 1.35;
  margin-bottom: 0;
  text-transform: capitalize;
  color: var(--main-font-color);
}

.blog-item-info p {
  margin-bottom: 16px;
}

.blog-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 25px;
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--main-color);
  color: var(--main-font-color);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center center;
}

.blog-btn .fa-arrow-right {
  font-size: 0.78em;
  line-height: 1;
  transform: translateY(1.5px);
}

.blog-btn:active {
  transform: translate3d(0, 0, 0) scale(var(--btn-press-scale)) !important;
  transition: none !important;
}

.blog-item-info a:hover {
  color: var(--main-color);
}

.home-courses-area {
  background: var(--bg-form);
}

.course-anchor {
  scroll-margin-top: 6rem;
}

.home-courses-icon-btn {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  color: var(--main-font-color);
  font-size: 0.74rem;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center center;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.home-courses-icon-btn:hover,
.home-courses-icon-btn:focus-visible {
  background: var(--color-grey-2);
  color: var(--main-color);
}

.home-courses-icon-btn:active {
  transform: translate3d(0, 0, 0) scale(var(--btn-press-scale)) !important;
  transition: none !important;
}

.home-courses-slider__viewport {
  cursor: grab;
  margin: 0 -0.75rem;
  padding: 0 0.75rem 0.5rem;
  scrollbar-width: none;
}

.home-courses-slider__viewport::-webkit-scrollbar {
  display: none;
}

.home-courses-slider.is-dragging .home-courses-slider__viewport {
  cursor: grabbing;
}

.home-courses-slider__container {
  gap: 16px;
  touch-action: pan-y pinch-zoom;
  will-change: transform;
}

.home-courses-slider__slide {
  flex: 0 0 calc((100% - 48px) / 4);
  min-width: 0;
}

.home-course-item:hover {
  -webkit-transform: none;
  transform: none;
}

.home-course-item {
  margin-bottom: 0;
  padding: 0;
}

.home-course-item-img {
  margin: 0;
  border-radius: 0.5rem;
}

.home-course-item .blog-item-info {
  padding: 1rem;
}

.home-course-item .blog-item-meta ul {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

.home-course-item .blog-item-meta ul li {
  display: inline-flex;
  align-items: center;
}

.home-course-item-img img {
  transition: filter 0.5s;
  object-fit: cover;
}

.home-course-item:hover .home-course-item-img img {
  filter: brightness(1.12);
}

.home-course-item .blog-title a {
  display: -webkit-box;
  height: calc(2em * 1.35);
  overflow: hidden;
  text-transform: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-course-description {
  display: -webkit-box;
  min-height: 3rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-course-cta-card {
  min-height: 0;
  border: 1px solid rgba(31, 41, 55, 0.05);
  color: var(--main-font-color);
}

.home-course-cta-card__inner {
  min-height: 0;
  z-index: 1;
}

.home-course-cta-card__eyebrow {
  padding: 0.28rem 0.62rem;
  background: rgba(31, 41, 55, 0.08);
  color: var(--color-grey-2);
  font-size: 0.72rem;
}

.home-course-cta-card__title {
  color: inherit;
  font-size: 1rem;
  line-height: 1.24;
}

.home-course-cta-card__icon {
  width: 28px;
  height: 28px;
  background: #e7eaee;
  color: var(--main-font-color);
  font-size: 0.74rem;
  transform: translate3d(0, 0, 0);
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.home-course-cta-card:hover,
.home-course-cta-card:focus-visible {
  color: var(--color-black);
}

.home-course-cta-card:hover .home-course-cta-card__icon,
.home-course-cta-card:focus-visible .home-course-cta-card__icon {
  background: var(--color-grey-2);
  color: #fff;
  transform: translate3d(2px, 0, 0);
}

.home-course-cta-card:active .home-course-cta-card__icon {
  transform: translate3d(2px, 0, 0) scale(var(--btn-press-scale));
  transition: none;
}

.home-courses-slider__controls .embla-basic-slider__button[disabled],
.home-courses-slider__controls .embla-basic-slider__button[aria-disabled="true"] {
  color: var(--color-grey-7);
  cursor: default;
  pointer-events: none;
}

@media (max-width: 991.98px) {
  .home-courses-slider__slide {
    flex-basis: calc((100% - 16px) / 2);
  }
}

@media (max-width: 575.98px) {
  .home-courses-head {
    align-items: flex-start;
  }

  .home-courses-head__actions {
    display: none;
  }

  .home-courses-title {
    font-size: 1.25rem;
  }

  .home-courses-slider__slide {
    flex-basis: 100%;
  }
}

/* ===========================
blog single css
=========================== */

.blog-thumb-img {
  margin-bottom: 20px;
}

.blog-single-content img {
  border-radius: 10px;
}

.blog-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.blog-meta .blog-meta-left ul {
  display: flex;
  align-items: center;
  gap: 20px;
}

.blog-meta i {
  margin-right: 5px;
  color: var(--main-color);
}

.blog-meta a {
  color: #66788a;
}

.blog-meta a:hover {
  color: var(--main-color);
}

.blog-details-title {
  font-size: 34px;
}

.blockqoute {
  background: #eef3f7;
  border-left: 5px solid var(--main-color);
  padding: 30px;
  font-size: 17px;
  font-style: italic;
  margin: 20px 0;
}

.blockqoute-author {
  margin-top: 20px;
  padding-left: 60px;
  position: relative;
}

.blockqoute-author::before {
  content: "";
  position: absolute;
  height: 2px;
  width: 40px;
  background: var(--main-font-color);
  left: 0;
  top: 10px;
}

.blog-details-tags {
  display: flex;
  align-items: center;
  gap: 20px;
}

.blog-details-tags ul {
  display: flex;
  align-items: center;
  gap: 15px;
}

.blog-details-tags ul a {
  border: 1px solid var(--main-font-color);
  padding: 2px 15px;
  border-radius: 8px;
  transition: all 0.5s ease-in-out;
}

.blog-details-tags ul a:hover {
  background: var(--main-font-color);
  color: #fff;
}

.blog-author {
  display: flex;
  justify-content: start;
  align-items: center;
  background: #fff;
  box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);
  margin: 50px 0;
  padding: 20px;
  border-radius: 10px;
}

.blog-author-img {
  border: 2px solid var(--main-color);
  border-radius: 10px;
  padding: 5px;
  width: 250px;
}

.author-name {
  font-size: 22px;
  color: var(--main-font-color);
  margin: 8px 0;
}

.author-info {
  padding: 0 20px;
}

.author-social {
  margin-top: 10px;
}

.author-social a {
  margin-right: 10px;
  color: var(--main-font-color);
  transition: all 0.5s ease-in-out;
}

.author-social a:hover {
  color: var(--main-color);
}

.blog-comments {
  margin-bottom: 50px;
}

.blog-comments-wrapper {
  margin: 30px 0;
}

.blog-comments-single {
  display: flex;
  justify-content: start;
  align-items: center;
}

.blog-comments-single img {
  border-radius: 50%;
}

.blog-comments-content {
  padding: 20px 30px;
}

.blog-comments-content span {
  font-size: 14px;
}

.blog-comments-content a {
  font-weight: 600;
  margin-top: 5px;
  color: var(--main-color);
}

.blog-comments-content a:hover {
  color: var(--main-font-color);
}

.blog-comments-reply {
  margin-left: 50px;
}

.blog-comments-form h4 {
  margin-bottom: 20px;
}

.blog-comments-form .form-group {
  margin-bottom: 20px;
}

.blog-comments-form .form-control {
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: none;
  transition: all 0.5s ease-in-out;
}

.blog-comments-form .form-control:focus {
  border-color: var(--main-color);
}

.blog-comments-form .theme-btn i {
  margin-right: 5px;
}

@media all and (max-width: 767px) {
  .blog-meta {
    flex-direction: column;
    font-size: 15px;
  }
  .blog-meta .blog-meta-left ul {
    gap: 10px;
  }
  .blog-details-tags {
    flex-direction: column;
    align-items: flex-start;
  }
  .blog-author {
    flex-direction: column;
    text-align: center;
    padding: 25px 0 0 0;
  }
  .blog-comments-single {
    flex-direction: column;
    text-align: center;
    padding: 30px 0px;
    box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);
    margin-bottom: 30px;
    border-radius: 10px;
  }
  .blog-comments-reply {
    margin-left: 0px;
  }
}

/* =========================
sidebar css
========================= */
.widget {
  background: #fff;
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 8px;
  -webkit-box-shadow: 0 10px 15px rgba(0, 0, 0, 0.04);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.04);
}

.account-page .widget {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.account-page .service-details table,
.account-page .service-details table th,
.account-page .service-details table td {
  font-size: var(--font-size-xl);
}

.account-page .pagination {
  gap: 8px;
  margin: 0;
  flex-wrap: wrap;
}

.account-page .pagination .page-item {
  margin: 0;
}

.account-page .pagination .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  border: 1px solid var(--border-grey);
  border-radius: 8px !important;
  background: #fff;
  color: var(--main-color);
  line-height: 1;
  font-size: var(--font-size-xl);
  transform: translate3d(0, 0, 0) scale(1);
  transition: all 0.2s ease-in-out;
}

.account-page .pagination .page-link:focus {
  outline: none;
  box-shadow: none;
}

.account-page .pagination .page-link:active {
  transform: translate3d(0, 0, 0) scale(var(--btn-press-scale));
  transition: none;
}

.account-page .pagination .page-item:not(.active):not(.disabled) .page-link:hover {
  background: var(--main-color-light-03);
  border-color: var(--main-color-light-02);
  color: var(--main-color);
}

.account-page .pagination .page-item.active .page-link {
  background: var(--main-color);
  border-color: var(--main-color);
  color: #fff;
  cursor: default;
  pointer-events: none;
}

.account-page .pagination .page-item.disabled .page-link {
  background: var(--bg-form);
  border-color: transparent;
  color: var(--main-font-color);
  cursor: default;
}

@media (min-width: 992px) {
  .account-page .account-sidebar-col {
    position: sticky;
    top: calc(var(--fixed-navbar-height, 0px) + 1.5rem);
    align-self: flex-start;
  }
}

.widget .widget-title {
  color: var(--main-font-color);
  padding-bottom: 10px;
  margin-bottom: 20px;
  position: relative;
}

.widget .widget-title.user-accout {
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

.widget .widget-title::before {
  position: absolute;
  content: "";
  width: 30px;
  border-bottom: 3px solid var(--main-color);
  bottom: 0;
  left: 0;
}

.widget .widget-title::after {
  position: absolute;
  content: "";
  width: 5px;
  border-bottom: 3px solid var(--main-color);
  bottom: 0;
  left: 35px;
}

.widget .search-form .form-control {
  padding: 10px 15px 10px 15px;
  border-radius: 8px;
  box-shadow: none;
}

.widget .search-form {
  position: relative;
}

.widget .search-form .form-control:focus {
  border-color: var(--main-color);
}

.widget .search-form button {
  position: absolute;
  right: 0;
  top: 0;
  padding: 8px 18px 6px 18px;
  background: transparent;
  border: none;
  color: #6c7c89;
}

.widget .category-list a {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid #ced4da;
  transition: all 0.5s ease-in-out;
}

.widget .category-list a:last-child {
  margin-bottom: 0px;
  border-bottom: none;
}

.widget .category-list a:hover {
  padding-left: 10px;
  color: var(--main-color);
}

.widget .category-list a i {
  margin-right: 5px;
}

.widget .category-list a span {
  float: right;
}

.widget .recent-post-single {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-bottom: 20px;
}

.widget .recent-post-img {
  margin-right: 20px;
}

.widget .recent-post-img img {
  border-radius: 10px;
  width: 100px;
}

.widget .recent-post-bio h6 {
  font-size: 16px;
}

.widget .recent-post-bio span {
  font-size: 14px;
}

.widget .recent-post-bio span i {
  margin-right: 5px;
}

.widget .recent-post-bio h6 a:hover {
  color: var(--main-color);
}

.widget .social-share-link a {
  width: 35px;
  height: 35px;
  line-height: 35px;
  border: 1px solid var(--main-font-color);
  color: var(--main-font-color);
  text-align: center;
  margin-right: 5px;
  border-radius: 50px;
  transition: all 0.5s ease-in-out;
}

.widget .social-share-link a:hover {
  background: var(--main-font-color);
  color: #fff;
}

.widget .tag-list a {
  border: 1px solid var(--main-font-color);
  padding: 3px 20px;
  margin-bottom: 10px;
  margin-right: 10px;
  border-radius: 7px;
  display: inline-block;
  transition: all 0.5s ease-in-out;
}

.widget .tag-list a:hover {
  background-color: var(--main-font-color);
  color: #fff;
}

/* ===================
contact us css
====================== */

.contact-wrapper {
  padding: 50px 30px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);
  position: relative;
}

.contact-form {
  padding: 0 40px;
}

.contact-form-header {
  margin-bottom: 30px;
  color: var(--main-font-color);
}

.contact-form-header h2 {
  color: var(--main-font-color);
  font-size: 30px;
  margin-bottom: 10px;
}

.contact-form .form-group {
  margin-bottom: 25px;
}

.contact-form .form-group .form-control {
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: none;
  transition: all 0.5s ease-in-out;
}

.contact-form .form-group .form-control:focus {
  border-color: var(--main-color);
}

.contact-map {
  margin-bottom: -9px;
}

.contact-map iframe {
  width: 100%;
  height: 450px;
}

.contact-content {
  margin-bottom: 50px;
}

.contact-form .theme-btn i {
  margin-right: 5px;
}

.contact-info {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}

.contact-info-icon {
  width: 70px;
  height: 70px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(29, 191, 204, 0.5);
}

.contact-info-icon i {
  font-size: 25px;
  color: #fff;
  width: 55px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  border-radius: 10px;
  background: var(--main-color);
}

.contact-info h5 {
  color: var(--main-font-color);
  margin-bottom: 5px;
}

.contact-info p {
  color: var(--main-font-color);
}

@media all and (max-width: 991px) {
  .contact-wrapper {
    padding: 50px 20px;
  }

  .contact-form {
    padding: 0px;
  }

  .contact-info {
    padding: 0px;
    margin-bottom: 50px;
  }
}

/* ===================
quote css
====================== */

.quote-content {
  background: linear-gradient(60deg, #2a5cff 0%, #54a0ff 100%);
  padding: 40px;
  border-radius: 10px;
  margin-top: 80px;
  box-shadow: 0 0 40px 5px rgb(0 0 0 / 3%);
}

.quote-thum {
  margin-right: -100px;
}

.quote-thum img {
  border-radius: 10px;
}

.quote-content .quote-header h6 {
  display: inline-block;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: #fff;
  font-size: 18px;
}

.quote-content .quote-header h2 {
  color: #fff;
  font-size: 35px;
  margin-bottom: 30px;
  margin-top: 10px;
}

.quote-content .form-group {
  margin-bottom: 20px;
}

.quote-content .form-group .form-control {
  height: 50px;
  font-size: 16px;
  background: transparent;
  border: 2px solid #fff;
  border-radius: 10px;
  color: #fff;
  box-shadow: none;
}

.quote-content textarea {
  height: 120px !important;
}

.quote-content .form-control::placeholder {
  color: #f2f3f5;
  opacity: 1;
}

.quote-content .form-control:-ms-input-placeholder {
  color: #f2f3f5;
}

.quote-content .form-control::-ms-input-placeholder {
  color: #f2f3f5;
}

.quote-content .theme-btn {
  background: #fff;
  font-weight: 600;
  color: #0795fe;
}

.quote-content .theme-btn:hover {
  color: #fff;
}

@media all and (max-width: 1199px) {
  .quote-content .quote-header h2 {
    font-size: 25px;
  }
}

@media all and (max-width: 991px) {
  .quote-thum {
    margin-right: 0;
  }
}

/* ===================
team css
====================== */

.team-area {
  position: relative;
  overflow: hidden;
}

.team-item {
  border-radius: 15px;
  margin-bottom: 80px;
  box-shadow: 0 3px 24px rgb(0 0 0 / 10%);
  position: relative;
  transition: all 0.5s ease-in-out;
}

.team-item:hover {
  transform: translateY(-10px);
}

.team-item img {
  border-radius: 10px;
}

.team-content {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: -50px;
  background: #fff;
  padding: 0 10px;
  text-align: center;
  overflow: hidden;
  z-index: 1;
  border-radius: 10px;
  box-shadow: 0 3px 24px rgb(0 0 0 / 10%);
}

.team-content::before {
  content: "";
  position: absolute;
  height: 5px;
  left: 15px;
  right: 15px;
  bottom: 0px;
  background: var(--main-color);
}

.team-bio {
  padding-top: 15px;
  padding-bottom: 10px;
}

.team-bio h5 {
  font-size: 22px;
}

.team-bio h5 a {
  color: var(--main-font-color);
}

.team-bio h5 a:hover {
  color: var(--main-color);
}

.team-social {
  position: absolute;
  margin-bottom: 10px;
  text-align: center;
  top: 15px;
  right: -15px;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.team-item:hover .team-social {
  opacity: 1;
  right: 15px;
}

.team-social a {
  display: block;
  color: #fff;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 10px;
  background: var(--main-color);
  margin: 7px 0;
}

.team-social a:hover {
  background: #fff;
  color: var(--main-color);
}

/* ===================
team single css
====================== */

.team-single-wrapper {
  background: #f6fcfe;
  border-radius: 10px;
  padding: 20px;
}

.team-single-img img {
  border-radius: 10px;
}

.team-single-content {
  padding-left: 15px;
}

.team-single-info {
  margin-top: 20px;
}

.team-single-info li {
  margin: 10px 0;
}

.team-single-info-left {
  font-weight: 600;
}

.team-single-info-right {
  margin-left: 10px;
}

.team-single-social a {
  height: 35px;
  width: 35px;
  line-height: 31px;
  border: 2px solid var(--main-color);
  color: var(--main-font-color);
  text-align: center;
  border-radius: 50px;
  margin-right: 5px;
}

.team-single-social a:hover {
  background: var(--main-color);
  color: #fff;
}

.team-single-overview {
  margin-top: 70px;
}

.team-single-overview-img img {
  border-radius: 10px;
}

@media (max-width: 991px) {
  .team-single-img {
    margin-bottom: 20px;
  }

  .team-single-overview-img {
    margin-top: 20px;
  }
}

/* ===================
step/process css
====================== */

.process-single {
  position: relative;
}

.process-single .icon {
  height: 100px;
  width: 100px;
  display: inline-block;
  position: relative;
  border-radius: 50%;
  font-size: 40px;
  border: 2px solid #febc35;
  padding: 5px;
  margin-bottom: 30px;
  box-shadow: 0 3px 24px rgb(0 0 0 / 10%);
}

.process-single .icon img {
  border-radius: 50%;
}

.process-single span {
  position: absolute;
  height: 35px;
  width: 35px;
  font-size: 14px;
  background: #febc35;
  line-height: 35px;
  color: #ffffff;
  left: -3px;
  top: -13px;
  font-weight: 600;
  border-radius: 33% 66% 70% 30%/49% 62% 38% 51%;
}

.process-single h4 {
  margin-bottom: 10px;
}

.process-single::before {
  content: "";
  position: absolute;
  border-bottom: 2px dashed #febc35;
  width: 110px;
  height: 2px;
  right: -65px;
  top: 50px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .process-single::before {
    display: none;
  }
}

@media (max-width: 767px) {
  .process-single::before {
    display: none;
  }
}

.process-area .col-lg-3:last-child .process-single::before {
  display: none;
}

/* ===================
pricing css
====================== */

.pricing-item {
  background: #eff8fb;
  text-align: center;
  border-radius: 15px;
  position: relative;
  transition: all 0.5s ease-in-out;
}

.pricing-item::before {
  content: "";
  position: absolute;
  height: 100%;
  bottom: -20px;
  left: 20px;
  right: 20px;
  background: var(--main-color);
  border-radius: 15px;
  z-index: -1;
}

.pricing-header h5 {
  font-size: 22px;
  display: inline-block;
  color: var(--main-color);
  padding-top: 30px;
}

.pricing-icon i {
  font-size: 50px;
  color: var(--main-color);
}

.pricing-amount strong {
  font-size: 60px;
  font-weight: 700;
  color: var(--main-font-color);
  line-height: 1;
}

.pricing-amount-type {
  position: relative;
  margin-top: 10px;
  z-index: 1;
}

.pricing-amount-type span {
  display: inline-block;
  color: var(--main-font-color);
}

.pricing-feature {
  margin: 20px 0;
  padding-top: 20px;
  border-top: 2px dashed rgba(32, 64, 102, 0.1);
}

.pricing-feature li {
  margin-bottom: 15px;
}

.pricing-feature li i {
  color: var(--main-color);
  margin-right: 5px;
}

@media all and (max-width: 992px) {
  .pricing-amount strong {
    font-size: 50px;
  }
}

/* ===================
appointment css
====================== */

.appointment-area {
  background-color: var(--bg-gray);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 1;
}

.appointment-area.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(3, 61, 117, var(--ov-opacity, 0.8));
  -webkit-backdrop-filter: blur(var(--ov-blur, 5px));
  backdrop-filter: blur(var(--ov-blur, 5px));
  z-index: 0;
}

.appointment-area.has-bg > .container {
  position: relative;
  z-index: 1;
}

.appointment-content {
  font-size: var(--font-size-xxl);
}

.appointment-content h3,
.appointment-content p {
  color: #fff;
}

.appointment-links a {
  color: #fff;
  text-decoration: underline;
}

.appointment-links a:hover,
.appointment-links a:focus {
  color: #d6d6d6;
  text-decoration: underline;
}

.appointment-form {
  margin-top: 30px;
}

.appointment-form .form-group {
  margin-bottom: 20px;
}

/* Inquiry form sits on a dark background — lighten the validation messages */
#dotaz-form .invalid-feedback {
  color: #ffffff;
}

/* Offset the scroll to #dotaz (button "Zeptat se organizátora", post-submit redirect) so the sticky navigation doesn't cover the heading */
#dotaz {
  scroll-margin-top: calc(var(--fixed-navbar-height, 100px) + 20px);
}

@media (max-width: 991.99px) {
  #dotaz {
    scroll-margin-top: 60px;
  }
}

/* ===================
feature css
====================== */

.feature-area {
  position: relative;
  z-index: 1;
}

.feature-item {
  padding: 25px;
  cursor: pointer;
  background: #eff8fb;
  margin-bottom: 25px;
  border-radius: 12px;
  transition: all 0.5s ease-in-out;
}

.feature-item:hover {
  background: var(--main-color);
  transform: translateY(-10px);
}

.feature-icon {
  margin-bottom: 20px;
  transition: all 0.5s ease-in-out;
}

.feature-item:hover .feature-icon {
  transform: rotateX(360deg);
}

.feature-icon i {
  font-size: 55px;
  color: var(--main-color);
  line-height: 1;
}

.feature-content h5 {
  font-size: 22px;
  margin-bottom: 8px;
  color: var(--main-font-color);
}

.feature-item.active {
  background: var(--main-color);
}

.feature-item.active .feature-icon i,
.feature-item.active p,
.feature-item.active h5 {
  color: #fff;
}

.feature-item:hover .feature-icon i,
.feature-item:hover p,
.feature-item:hover h5 {
  color: #fff;
}

/* ===================
faq css
====================== */

/* Answers come from CKEditor (<p>...), drop the margin of the last block inside the body */
.faq-area .accordion-body > :last-child {
  margin-bottom: 0;
}

.faq-area .accordion-item {
  border: none;
  margin-bottom: 30px;
  border-radius: 10px !important;
  box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);
}

.faq-area .accordion-item:last-child {
  margin-bottom: 0;
}

.faq-area .accordion-item span {
  width: 45px;
  height: 45px;
  margin-right: 15px;
}

.faq-area .accordion-item i {
  width: 45px;
  height: 45px;
  line-height: 45px;
  border-radius: 50px;
  background: var(--main-color);
  text-align: center;
  color: #fff;
}

.faq-area .accordion-button:not(.collapsed) {
  color: var(--main-color);
  background-color: #fff;
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}

.accordion-button {
  border-radius: 10px !important;
  font-weight: 500;
  font-size: 18px;
  color: var(--main-font-color);
  box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
  border-bottom: 2px solid var(--main-color);
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

@media all and (max-width: 991px) {
  .faq-left {
    margin-bottom: 50px;
  }
  .accordion-button {
    font-size: 16px;
  }
}

/* ===================
partner css
====================== */

/* Light circle on the white section; on hover only the arrow turns blue, the background stays */
.partner-area .home-courses-icon-btn,
.partner-area .home-courses-icon-btn:hover,
.partner-area .home-courses-icon-btn:focus-visible {
  background: var(--bg-form);
}

.partner-logo-slider {
  position: relative;
}

.partner-logo-slider__viewport {
  cursor: grab;
  overflow: hidden;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
  user-select: none;
}

.partner-logo-slider__viewport::-webkit-scrollbar {
  display: none;
}

.partner-logo-slider.is-dragging .partner-logo-slider__viewport {
  cursor: grabbing;
}

.partner-logo-slider__container {
  display: flex;
  flex-wrap: nowrap;
  touch-action: pan-y pinch-zoom;
  will-change: transform;
}

.partner-logo-slider__slide {
  flex: 0 0 calc((100% - 120px) / 6);
  margin-right: 24px;
  min-width: 0;
}

.partner-logo-slider__slide > a,
.partner-logo-slider__slide > .card {
  height: 100%;
}

/* Airy logo frames - no shadow */
.gallery-wrap.partner-logos .card {
  border-color: transparent;
  box-shadow: none;
}

.gallery-wrap.partner-logos .card:hover {
  border-color: transparent;
}

.gallery-wrap.partner-logos .gallery-card-logo img {
  filter: grayscale(1);
  transition: filter 0.25s ease;
}

.gallery-wrap.partner-logos .card:hover .gallery-card-logo img,
.gallery-wrap.partner-logos a:hover .gallery-card-logo img,
.gallery-wrap.partner-logos a:focus-visible .gallery-card-logo img {
  filter: grayscale(0);
}

@media all and (max-width: 991px) {
  .partner-logo-slider__slide {
    flex-basis: calc((100% - 48px) / 3);
  }
}

@media all and (max-width: 767px) {
  .partner-logo-slider__slide {
    flex-basis: calc((100% - 24px) / 2);
  }
}

/* =============================================================================
	Layout: Breadcrump
============================================================================= */
.breadcrumb-main {
  background-color: var(--color-blue-light-3);
  background-image: url(../images/bg/bg-search.svg);
  /*background-size: 100%;*/
  /*background-attachment: fixed;*/
  background-size: contain;
  position: relative;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
}

.breadcrumb-main .container {
  padding-top: 5rem;
  padding-bottom: 6rem;
}

.breadcrumb-main .container:after,
.breadcrumb-main .container:before {
  content: "";
  background-image: url(../images/bg/bg-search-02.png);
  position: absolute;
  top: 20px;
  right: -4%;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
}

/*
.breadcrumb-main:before {
	background-image: url(../images/bg/bg-search-02.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right;
	z-index: 1;
	opacity: 1;
	animation: movebounce 5s infinite;
}
*/

.breadcrumb-main .breadcrumb-outer {
  background: transparent;
  position: relative;
  z-index: 1;
}

.breadcrumb-main .breadcrumb-outer:before {
  display: none;
}

.breadcrumb-main .breadcrumb-outer .breadcrumb-content,
.breadcrumb-main .breadcrumb-outer .bread-content {
  position: relative;
  text-align: center;
  justify-content: center;
  z-index: 1;
}

.breadcrumb-main .breadcrumb-outer .breadcrumb-content h1,
.breadcrumb-main .breadcrumb-outer .bread-content h1 {
  font-size: 28px;
}

.breadcrumb-main .breadcrumb-outer .bread-content nav {
  left: 0;
  right: 0;
}

.breadcrumb-subpage {
  /*
	background-color: var(--color-blue-light-3);
	background-image: url(../images/bg/bg-search.svg);
	background-size: auto;
	/*background-attachment: fixed;*/
  /*background-size: contain;*/

  /*position: relative;
	overflow: hidden;
	padding-top: 0;
	padding-bottom: 0;
	*/
}

.breadcrumb {
  background: transparent;
  margin: 0;
  padding: 0;
  display: inline-block;
}

.breadcrumb li,
.breadcrumb li.active {
  margin-bottom: 0;
  font-size: 15px;
}

.breadcrumb li a,
.breadcrumb li.active a {
  color: var(--main-color);
}

.breadcrumb .breadcrumb-item + .breadcrumb-item:before {
  content: "\f105";
  font-family: "Font Awesome 6 Pro";
  color: #222222;
  font-size: 12px;
  margin-top: 3px;
}

@media (max-width: 991.98px) {
  .breadcrumb-main .container {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .breadcrumb-main .container:after,
  .breadcrumb-main .container:before {
    background: none;
  }

  .breadcrumb-main .breadcrumb-outer .breadcrumb-content {
    display: block !important;
    text-align: center !important;
  }

  .breadcrumb-main .breadcrumb-outer .breadcrumb-content nav {
    right: 0;
    margin: 0;
  }

  .breadcrumb-main .breadcrumb-outer .breadcrumb-content h2 {
    margin: 0 !important;
  }

  .breadcrumb-main .breadcrumb-outer .breadcrumb-content h1 {
    font-size: 44px;
  }

  .cover-content {
    margin-bottom: 2rem;
  }

  .breadcrumb-main
    .breadcrumb-outer
    .breadcrumb-content
    .book-form
    .border-end:nth-child(even) {
    border: 0 !important;
  }

  .breadcrumb-main
    .breadcrumb-outer
    .breadcrumb-content
    .book-form
    .col
    .form-group
    .select2-container {
    border-bottom: 1px solid #cccccc80 !important;
    border-radius: 0 !important;
  }

  .select2-selection {
    text-align: left;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .breadcrumb-main
    .breadcrumb-outer
    .breadcrumb-content
    .book-form
    .col:nth-child(5)
    .form-group
    .select2-container {
    border-bottom: 0 !important;
  }
}

@media (max-width: 811px) {
  .breadcrumb-main .breadcrumb-outer .breadcrumb-content h1 {
    font-size: 36px;
  }

  .page-cover h1 {
    font-size: 36px;
  }

  .page-cover .author-detail {
    display: block !important;
  }
}

@media (max-width: 767.98px) {
  .breadcrumb-main .container {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .breadcrumb-main
    .breadcrumb-outer
    .breadcrumb-content
    .book-form
    .border-end {
    border: 0 !important;
  }
}

@media (max-width: 639px) {
  .breadcrumb-main .breadcrumb-outer .breadcrumb-content h1 {
    font-size: 28px;
  }

  .page-cover h1 {
    font-size: 28px;
  }
}

@media (max-width: 575.98px) {
  .breadcrumb-main .breadcrumb-outer .breadcrumb-content h1,
  .breadcrumb-main .breadcrumb-outer .bread-content h1 {
    font-size: 21px;
  }
}

@media (max-width: 479px) {
  .breadcrumb-main .breadcrumb-outer .breadcrumb-content {
    text-align: center;
  }

  .breadcrumb-main .breadcrumb-outer .breadcrumb-content h1 {
    font-size: 24px;
  }

  .breadcrumb-main .breadcrumb-outer .breadcrumb-content h2 {
    display: block;
    font-size: 40px;
  }
}

/* ===================
pagination css
====================== */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  margin-bottom: 40px;
}

.pagination .page-link {
  border: none;
  background: var(--main-font-color);
  color: #fff;
  margin: 0 10px;
  border-radius: 10px !important;
  width: 40px;
  height: 40px;
  line-height: 28px;
  text-align: center;
  transition: all 0.5s ease-in-out;
}

.pagination .page-link:hover,
.pagination .page-item.active .page-link {
  background: var(--main-color);
}

/* ===================
RTL css
====================== */

body.rtl-mode {
  direction: rtl;
}

body.rtl-mode .item-area {
  direction: ltr;
}

body.rtl-mode .price-wrapper {
  direction: rtl;
}

@media (min-width: 992px) {
  body.rtl-mode .navbar-brand {
    margin-left: 3rem;
  }
  body.rtl-mode .navbar .nav-item .nav-link {
    margin-left: 3rem;
    margin-right: 0;
  }
}

/* ===================
auth css
====================== */

.login-form {
  padding: 50px;
  border-radius: 8px;
  box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);
}

.login-form .login-header {
  text-align: center;
  margin-bottom: 50px;
}

.login-form .login-header img {
  width: 200px;
  margin-bottom: 10px;
}

.login-form .login-header h3 {
  color: var(--main-color);
  margin-bottom: 5px;
  font-weight: 800;
}

.login-form .login-header p {
  font-size: 20px;
}

.login-form .form-group {
  margin-bottom: 20px;
}

.login-form label {
  color: var(--main-font-color);
  margin-bottom: 5px;
}

.login-form .form-group .form-control {
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 12px 18px;
  box-shadow: none;
  transition: 0.5s;
}

.login-form .form-group .form-control:focus {
  border-color: var(--main-color);
}

.login-form .form-check-input {
  box-shadow: none;
}

.login-form .forgot-pass {
  color: var(--main-color);
  transition: 0.5s;
}

.login-form .forgot-pass:hover {
  color: var(--main-font-color);
}

.login-form .theme-btn {
  width: 100%;
}

.login-form .theme-btn i {
  margin-right: 5px;
}

.login-form .form-check-input {
  margin-top: 6.3px;
}

.login-form .form-check-label a {
  color: var(--main-color);
  transition: 0.5s;
}

.login-form .form-check-label a:hover {
  color: var(--main-color);
}

.form-check-input:checked {
  background-color: var(--main-color);
  border-color: var(--main-color);
}

@media only screen and (max-width: 991px) {
  .login-form {
    padding: 40px 20px;
  }
}

/* ===================
coming soon css
====================== */

.coming-soon {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  width: 100%;
  top: 0;
  left: 0;
  position: relative;
}

.coming-soon .container {
  position: relative;
}

.coming-soon:before {
  position: absolute;
  content: "";
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.coming-soon .newsletter-form {
  position: relative;
  margin-top: 30px;
}

.coming-soon .newsletter-form .input-newsletter {
  height: 50px;
  display: block;
  width: 100%;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 25px;
}

.coming-soon .newsletter-form button {
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
  height: auto;
  border: none;
  border-radius: 10px;
  background: var(--main-color);
  display: inline-block;
  color: #fff;
  padding-left: 30px;
  padding-right: 30px;
  transition: 0.5s;
}

.coming-soon .newsletter-form button:hover {
  background-color: var(--main-font-color);
  color: #fff;
}

.coming-social {
  margin-top: 30px;
  text-align: center;
}

.coming-social a {
  color: #fff;
  margin: 5px;
  width: 40px;
  height: 40px;
  line-height: 36px;
  text-align: center;
  border: 2px solid #fff;
  border-radius: 10px;
  display: inline-block;
  transition: 0.5s;
}

.coming-social a:hover {
  background: var(--main-color);
  border-color: var(--main-color);
}

.countdown-wrap {
  margin-top: 30px;
}

.countdown-single {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  margin: 10px;
  position: relative;
  box-shadow: 0 3px 24px rgb(0 0 0 / 10%);
  z-index: 1;
}

.countdown-single::before {
  content: "";
  position: absolute;
  background-color: var(--main-color);
  height: 100%;
  width: 100%;
  left: 6px;
  top: 6px;
  border-radius: 10px;
  z-index: -1;
}

.countdown-single h2 {
  color: #fff;
}

.countdown-single h5 {
  color: #fff;
}

/* ===================
error css
====================== */

.error-wrapper {
  text-align: center;
}

.error-wrapper h1 {
  font-size: 200px;
  font-weight: bold;
}

.error-wrapper h1 span {
  color: var(--main-color);
}

.error-wrapper h2 {
  margin-top: 30px;
  margin-bottom: 10px;
}

.error-wrapper img {
  width: 100%;
}

.error-wrapper .theme-btn {
  margin-top: 30px;
}

.error-wrapper .theme-btn i {
  margin-right: 5px;
}

@media all and (max-width: 767px) {
  .error-wrapper h1 {
    font-size: 160px;
  }
}

/* ===================
terms/privacy css
====================== */

.terms-content:not(:last-child) {
  margin-bottom: 54px;
}

.terms-content:first-child {
  margin-top: -3px;
}

.terms-content .terms-list {
  margin-top: 37px;
}

.terms-content h3 {
  margin-bottom: 23px;
  position: relative;
}

.terms-content p:not(:last-child) {
  margin-bottom: 26px;
}

.terms-list li:not(:last-child) {
  margin-bottom: 16px;
}

/* =============================================================================
	Layout: Application CSS
============================================================================= */
.application h2 {
  color: var(--main-color);
}

/* Registration step 1 / step 2 on mobile: the page title ("Registrace na akci", "... - Platba") on one line
   down to a 360px wide screen */
@media (max-width: 767.98px) {
  .application:has(:is(#registration-online, #registration-step2-form)) h2 {
    font-size: 1.75rem;
  }
}

span.w-300-black,
.application h2 > span:first-child {
  font-weight: 300;
  color: var(--color-black);
}

.application h3 > span:first-child {
  font-weight: 300;
  color: var(--color-black);
}

.application input[type="text"],
.application input[type="email"],
.application input[type="number"],
.application input[type="search"],
.application input[type="password"],
.application input[type="tel"],
.application input[type="date"],
.application input[type="time"],
.application input[type="file"],
.application select {
  padding: 7px 12px !important;
  height: 38px !important;
}

.application select {
  padding-right: 3rem !important;
}

.application textarea {
  height: 90px !important;
  padding: 7px 10px !important;
}

.radius-right {
  border-top-right-radius: var(--bs-border-radius) !important;
  border-bottom-right-radius: var(--bs-border-radius) !important;
}

/* Kód banky v páru "číslo účtu / kód banky" – pevná šířka, číslo účtu vyplní zbytek */
.bank-code-input {
  flex: 0 0 68px !important;
}

.application .krouzky-btn-blue-outline {
  padding: 7px 15px !important;
  height: 40px !important;
}

.select-field {
  display: grid;
  grid-template:
    "label"
    "select";
}

.select-field .form-select {
  --bs-form-select-bg-img: none;
  grid-area: select;
  background-color: transparent !important;
  z-index: 3;
}

.select-field .select-bg {
  grid-area: select;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: #fff;
  border-radius: var(--bs-border-radius);
}

.select-field.selected-s .select-bg {
  background: var(--main-color-light-03) !important;
}

.select-field.selected-s select {
  border: 1px solid var(--main-color) !important;
}

/* Registration step 1 - clickable price cell with radio/checkbox (registrationChoiceOption():
   fees per payment tier, courses, symposiums) */
.registration-choice-option {
  /* same height as the amount selects of the other tables (.select-field .form-select); no frame of its
     own - the chosen row is outlined, the chosen value has the filled mark and main-colour price */
  min-height: 30px;
  padding: 3px 10px;
  line-height: 1.5;
  cursor: pointer;
}

.registration-choice-option:has(.registration-choice-input:checked) span {
  color: var(--main-color-dark);
  font-weight: 500;
}

.registration-choice-option.is-closed {
  cursor: not-allowed;
}

/* Radio / checkbox: filled main-colour mark with a white tick (circle = one choice, square = add-on) */
.registration-choice-option .form-check-input.registration-choice-input {
  flex-shrink: 0;
  width: 1.05em;
  height: 1.05em;
  border: 1.5px solid var(--input-border-color);
  background-color: #fff;
  background-size: 100% 100%;
  cursor: inherit;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.registration-choice-option .form-check-input.registration-choice-input[type="checkbox"] {
  border-radius: 0.3em;
}

.registration-choice-option:not(.is-closed):hover .form-check-input.registration-choice-input,
tr.registration-choice-row:hover .form-check-input.registration-choice-input:not(:disabled) {
  border-color: var(--main-color);
}

/* One choice per row (courses, symposiums): a click anywhere in the row toggles its checkbox (main.js) */
table.tb-charges > tbody tr.registration-choice-row {
  cursor: pointer;
}

/* Chosen rows - a row counts as chosen once it holds a checked radio / checkbox or an amount select
   above 0. :has() cannot be nested, so that condition is repeated as
   :is(.registration-choice-input:checked, option:checked:not([value="0"])).
   Both get the row hover tint and a 1px main-colour outline; the text turns main-colour
   - .registration-highlight-row (courses, symposiums, social and accompanying programme - one choice per
     row): in the whole row,
   - .registration-outline-row (fees, catering - several choices per row): only in the cells without a
     choice (the chosen value is marked by its tick / price / select, the other prices stay grey).
   The outline is drawn per cell (a table row cannot have its own border, see td::before below) and has
   the global radius. Collapsed table borders ignore border-radius, so these tables use separate borders
   with no spacing (the cells only have a bottom line, so nothing changes visually). The text turns
   semi-bold without widening the auto-sized columns (.registration-stable-text below). */
table.tb-charges:has(> tbody > tr:is(.registration-highlight-row, .registration-outline-row)) {
  border-collapse: separate;
  border-spacing: 0;
}

/* Only the background fades: Bootstrap's cell shadow (inset 0 0 0 9999px) would otherwise be animated
   into the outline and flash the whole cell blue */
table.tb-charges > tbody tr:is(.registration-highlight-row, .registration-outline-row) td {
  transition: background-color 0.3s ease-in-out;
  /* transparent frame (top + outer sides; the bottom is the table's row line): the chosen row's outline
     (td::before) sits inside it, so two chosen rows are separated by it - the top one is 2px for a visible
     gap. Borders snap to device pixels, so the outline stays sharp on scaled displays too. */
  border-top: calc(2 * var(--bs-border-width)) solid transparent;
}

table.tb-charges > tbody tr:is(.registration-highlight-row, .registration-outline-row) td:first-child {
  border-left: var(--bs-border-width) solid transparent;
}

table.tb-charges > tbody tr:is(.registration-highlight-row, .registration-outline-row) td:last-child {
  border-right: var(--bs-border-width) solid transparent;
}

/* The outline and tint of a chosen row are drawn by td::before inside the cell's transparent frame, so two
   chosen rows in a row are separate boxes with a white gap (the frame). The cells themselves are transparent
   (the white card shows in the gap, no row line) and each ::before reaches 1px into the next cell - the tint
   is opaque (the colour of --main-color-light-03 over white), so the overlap leaves no seam. z-index 0 makes
   the cell a stacking context: the ::before (z-index -1) stays under the cell content. */
table.tb-charges > tbody tr:is(.registration-highlight-row, .registration-outline-row):has(:is(.registration-choice-input:checked, option:checked:not([value="0"]))) td {
  position: relative;
  z-index: 0;
  background: transparent !important;
  border-bottom-color: transparent;
}

table.tb-charges > tbody tr:is(.registration-highlight-row, .registration-outline-row):has(:is(.registration-choice-input:checked, option:checked:not([value="0"]))) td::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: -1px;
  z-index: -1;
  background: color-mix(in srgb, var(--main-color) 12.5%, #fff);
  border-top: var(--bs-border-width) solid var(--main-color);
  border-bottom: var(--bs-border-width) solid var(--main-color);
}

table.tb-charges > tbody tr:is(.registration-highlight-row, .registration-outline-row):has(:is(.registration-choice-input:checked, option:checked:not([value="0"]))) td:first-child::before {
  border-left: var(--bs-border-width) solid var(--main-color);
  border-top-left-radius: var(--bs-border-radius);
  border-bottom-left-radius: var(--bs-border-radius);
}

table.tb-charges > tbody tr:is(.registration-highlight-row, .registration-outline-row):has(:is(.registration-choice-input:checked, option:checked:not([value="0"]))) td:last-child::before {
  right: 0;
  border-right: var(--bs-border-width) solid var(--main-color);
  border-top-right-radius: var(--bs-border-radius);
  border-bottom-right-radius: var(--bs-border-radius);
}

table.tb-charges > tbody tr.registration-highlight-row:has(:is(.registration-choice-input:checked, option:checked:not([value="0"]))) td,
table.tb-charges > tbody tr.registration-outline-row:has(:is(.registration-choice-input:checked, option:checked:not([value="0"]))) td:not(:has(.registration-choice-option, .registration-meal-option)) {
  color: var(--main-color-dark);
}

table.tb-charges > tbody tr.registration-highlight-row:has(:is(.registration-choice-input:checked, option:checked:not([value="0"]))) td .registration-stable-text,
table.tb-charges > tbody tr.registration-outline-row:has(:is(.registration-choice-input:checked, option:checked:not([value="0"]))) td:not(:has(.registration-choice-option, .registration-meal-option)) .registration-stable-text {
  font-weight: 500;
}

/* Semi-bold text without moving the columns (registrationStableText(), the price in
   registrationChoiceOption()): the invisible zero-height semi-bold copy below the text keeps the element
   as wide as its semi-bold version all the time. The copy has an empty alternative text, so screen
   readers do not read the text twice. (A -webkit-text-stroke "bold" kept the width too, but looked
   smudged / shadowed on scaled displays.) */
.registration-stable-text {
  display: inline-flex;
  flex-direction: column;
}

.registration-stable-text::after {
  content: attr(data-text) / "";
  font-weight: 500;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

/* Amount select in a chosen row (social / accompanying programme): no own tint, the row colour shows
   through; the blue select border stays so it still reads as a control */
table.tb-charges > tbody tr.registration-highlight-row .select-field.selected-s .select-bg {
  background: transparent !important;
}

/* Step-1 tables: a tighter line height for names / dates wrapping on small screens (the shared
   table.tb-charges td has 1.7rem); single-line rows keep their height - the controls set it, so the
   text is centred vertically (Bootstrap's .table aligns cells to the top) */
#registration-online table.tb-charges :is(td, th) {
  line-height: 1.4 !important;
}

#registration-online table.tb-charges > tbody > tr > td {
  vertical-align: middle;
}

/* Step 1 after a submit attempt: only the errors are marked - radios / checkboxes that are fine keep their
   normal look instead of Bootstrap's green "valid" one (border, filled mark, label, focus ring) */
#registration-online.was-validated .form-check-input:valid {
  border-color: var(--input-border-color);
}

#registration-online.was-validated .form-check-input:valid:checked {
  background-color: var(--main-color);
  border-color: var(--main-color);
}

#registration-online.was-validated .form-check-input:valid:focus {
  box-shadow: 0 0 0 0.2rem var(--main-color-light-02);
}

#registration-online.was-validated .form-check-input:valid ~ .form-check-label {
  color: inherit;
}

#registration-online.was-validated input[type="radio"]:valid:checked + .form-check-label {
  color: var(--color-blue);
}

/* "Jiné" refreshment without the text: its message sits under the whole choice (in the inline row it would
   push the other choices down), so it is shown via :has() instead of the sibling rule */
#registration-online.was-validated .form-group:has(#refreshment-other:invalid) .refreshment-other-feedback {
  display: block;
}

/* A missing room after a submit attempt (#room-required, ajax-hotels-dump.php): the room cards turn red
   like an invalid field */
#registration-online.was-validated #wrapcontenthotels:has(#room-required:invalid) label[id^="wrap_room_"] {
  border-color: var(--bs-form-invalid-border-color) !important;
}

/* Step-1 tables on mobile: every row is a stacked block instead of a table row (no sideways scrolling) -
   the name on the full width, below it the date / place (small) and the choice on the right; fees list
   their payment tiers and catering its meals one per line, labelled in the choice itself
   (.registration-choice-tier, the meal span) as the column headers are hidden. A chosen block gets the
   outline and tint of a chosen row. */
@media (max-width: 767.98px) {
  #registration-online table.tb-charges {
    display: block;
    margin-bottom: 0.5rem;
  }

  #registration-online table.tb-charges > thead {
    display: none;
  }

  #registration-online table.tb-charges > tbody {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  #registration-online table.tb-charges > tbody > tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    padding: 0.625rem 0.875rem;
    background: #fff;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
  }

  #registration-online table.tb-charges > tbody > tr:has(:is(.registration-choice-input:checked, option:checked:not([value="0"]))) {
    background: var(--main-color-light-03);
    border-color: var(--main-color);
  }

  #registration-online table.tb-charges > tbody > tr > td {
    display: block;
    flex: 0 0 auto;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: start;
  }

  /* the block itself is outlined - no per-cell outline (desktop td::before) */
  #registration-online table.tb-charges > tbody > tr > td::before {
    content: none;
  }

  /* the name first, over the whole width */
  #registration-online table.tb-charges > tbody > tr > td:first-child {
    flex-basis: 100%;
  }

  /* date / place under it, smaller */
  #registration-online table.tb-charges > tbody > tr > td:is(.registration-date-cell, .registration-detail-cell) {
    flex: 1 1 0;
    min-width: 0;
    font-size: var(--font-size-m);
  }

  #registration-online table.tb-charges > tbody > tr > td.registration-detail-cell {
    flex-basis: 100%;
  }

  /* fees: one line per payment tier, the whole line is the clickable choice */
  #registration-online table.registration-charges > tbody > tr > td:not(:first-child),
  #registration-online table.tb-charges > tbody > tr > td:has(.registration-meal-option) {
    flex-basis: 100%;
  }

  /* choices flush with the right edge of the block */
  #registration-online table.tb-charges .registration-choice-option {
    padding: 0.25rem 0;
  }

  #registration-online .registration-meal-option {
    display: flex !important;
    padding-left: 0;
  }
}

/* Date + time cells of the step-1 tables: wrap on small screens, one line from lg (Bootstrap has no
   responsive text-nowrap) */
@media (min-width: 992px) {
  .registration-date-cell {
    white-space: nowrap;
  }
}

/* Registration summary bar (end of step 1 and step 2; 1-registration.php, registration-step2.php, main.js
   registrationSummaryUpdate() / registrationSummaryApplyStuck()): once something is chosen the bar is
   position: sticky at the bottom of the viewport while the form scrolls (.is-stuck: shadow; full width on
   desktop) and docks at the end of the form as a stand-alone white box. The order review list
   (#registration-summary-inline) is at the top of step 2; step 1 opens the same list in the offcanvas.
   The back-to-top button moves above the stuck bar. */
.registration-summary-bar {
  /* above the table selects (.select-field up to 3), below the cookie banner (#cb-cookie-banner 5) */
  z-index: 4;
  background: #fff;
  border-radius: var(--bs-border-radius);
  transition:
    box-shadow 0.2s ease,
    border-radius 0.2s ease;
}

.registration-summary-bar.has-items {
  position: sticky;
  bottom: 0;
}

.registration-summary-bar.is-stuck {
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-bottom-color: transparent;
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}

/* Step 2 on desktop: the privacy note right above the bar is the top of the docked white box. It is not
   inside the bar - a bar whose height changes when it sticks / docks would move the marker below it and
   flip between the two states (flicker) */
@media (min-width: 768px) {
  .registration-summary-note {
    background: #fff;
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
  }

  .registration-summary-note + .registration-summary-bar:not(.is-stuck) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

/* Trailing arrow on the centre of the uppercase label (the bar and the submit in the step-1 summary
   offcanvas). The button centres the label's line and the icon box; Barlow's capitals sit below the
   middle of the line and the arrow glyph slightly above the middle of its box - together the arrow is
   0.065em too high (measured at 14 and 15.2px). In em, so it fits any font size and button height. */
:is(.registration-summary-bar, #registration-summary) .btn1 .fa-arrow-right {
  transform: translateY(0.065em);
}

/* Desktop: larger buttons in the bar (step 1 "Pokračovat k platbě", step 2 "Zpět" + "Odeslat registraci"),
   the same size while stuck and docked */
@media (min-width: 768px) {
  .registration-summary-bar .btn1 {
    min-height: 50px;
    font-size: var(--font-size-3xl);
  }
}

/* Step 1 on mobile: the bar is always fixed at the bottom, edge to edge (also at the end of the form) -
   total on the left, "Zobrazit souhrn" on the right, the button full width below; the page keeps room
   for it at the bottom */
@media (max-width: 767.98px) {
  .registration-summary-bar.registration-summary-bar-mobile {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 !important;
    border: 0 !important;
    border-top: var(--bs-border-width) solid var(--bs-border-color) !important;
    border-radius: 0 !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  }

  .registration-summary-bar-mobile .registration-summary-submit {
    flex: 0 0 100%;
  }

  /* Step 2 "Zpět" - icon-only square next to the full-width submit */
  .registration-summary-bar-mobile .registration-summary-back {
    flex: 0 0 auto;
    width: calc(1.5em + 24px); /* = the submit height (line-height + .btn1 vertical padding) */
    padding-left: 0;
    padding-right: 0;
  }

  .registration-summary-bar-mobile .registration-summary-total {
    font-size: 1rem !important;
  }

  /* summary panel: no left border (it covers the whole width), smaller items, "Celkem s DPH" and the total
     one step larger */
  #registration-summary {
    --bs-offcanvas-border-width: 0;
  }

  #registration-summary .registration-summary-items li {
    font-size: var(--font-size-xl) !important;
  }

  #registration-summary .registration-summary-panel-total,
  #registration-summary .registration-summary-panel-total strong {
    font-size: var(--font-size-xxl) !important;
  }

  /* room for the bar - its real height is measured by main.js (--registration-summary-bar-h) */
  body:has(.registration-summary-bar-mobile) {
    padding-bottom: var(--registration-summary-bar-h, 112px);
  }
}

/* Summary items (order review card + offcanvas) in the text size of the step-1 tables */
.registration-summary-items li {
  font-size: var(--font-size-xxl);
}

/* Order review list: a line above every item and below the last one of each group (the line below the
   last group also separates the total) */
#registration-summary-inline .registration-summary-items {
  border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

#registration-summary-inline .registration-summary-items li {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  border-top: var(--bs-border-width) solid var(--bs-border-color);
}

/* Desktop: the detail (tier, date, place) in brackets on the name's line - the card is wide; mobile and the
   narrow offcanvas keep it on a second line */
@media (min-width: 992px) {
  #registration-summary-inline .registration-summary-items li > div:first-child > .small {
    display: inline;
    margin-left: 0.35em;
  }

  #registration-summary-inline .registration-summary-items li > div:first-child > .small::before {
    content: "(";
  }

  #registration-summary-inline .registration-summary-items li > div:first-child > .small::after {
    content: ")";
  }
}

/* "Zobrazit souhrn": hover pill and press like the modal close button (.modal .btn-close), tinted in
   the main colour like the row hover (the text is blue), a gentler press for the wider text button;
   the negative margin keeps the text aligned */
.registration-summary-toggle {
  margin: -0.3rem -0.55rem;
  padding: 0.3rem 0.55rem;
  border-radius: var(--bs-border-radius);
  background-color: transparent;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center center;
  backface-visibility: hidden;
  transition:
    transform 0.12s ease,
    background-color 0.12s ease;
}

.registration-summary-toggle:hover {
  background-color: var(--main-color-light-03);
}

.registration-summary-toggle:active {
  transform: translate3d(0, 0, 0) scale(0.94);
  background-color: color-mix(in srgb, var(--main-color) 22%, transparent);
  transition: none;
}

.registration-summary-toggle:focus-visible {
  outline: 2px solid var(--main-color-light-02);
  outline-offset: 1px;
}

/* Desktop: the stuck bar spans the whole window - a sticky element cannot be wider than its parent, so
   a full-width white layer is drawn behind it (the content stays aligned with the page). 100vw includes
   the scrollbar, so the form section clips the overflow (clip, unlike hidden, is no scroll container and
   keeps the sticky bar working) */
section:has(> .container > :is(#registration-online, #registration-step2-form)) {
  overflow-x: clip;
}

@media (min-width: 992px) {
  .registration-summary-bar.is-stuck {
    border-color: transparent;
    border-radius: 0 !important;
    box-shadow: none;
  }

  .registration-summary-bar.is-stuck::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--bs-border-width));
    bottom: calc(-1 * var(--bs-border-width));
    left: calc(50% - 50vw);
    width: 100vw;
    z-index: -1;
    background: #fff;
    border-top: var(--bs-border-width) solid var(--bs-border-color);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  }
}

body.registration-summary-stuck .progress-wrap {
  bottom: 97px;
}

/* Summary panel text in the form's text colour (the global "ul li" and h1-h6 rules set the lighter
   page grey) */
#registration-summary :is(.offcanvas-body, .registration-summary-panel-footer),
#registration-summary .offcanvas-body :is(h6, li),
#registration-summary-inline :is(h6, li) {
  color: var(--font-color-basic);
}

/* the back-to-top button (z-index 10000) would cover the open summary panel */
body:has(#registration-summary.show) .progress-wrap {
  opacity: 0;
  visibility: hidden;
}

/* Catering: lunch and dinner are two choices in one row - price + amount select share one cell
   (1-registration.php); the row gets the outline, the chosen meal only its main-colour price and a select
   without its own tint (the blue select border stays so it still reads as a control) */
.registration-meal-option {
  padding-left: 10px;
}

.registration-meal-option:has(option:checked:not([value="0"])) > span {
  color: var(--main-color-dark);
}

.registration-meal-option:has(option:checked:not([value="0"])) .registration-stable-text {
  font-weight: 500;
}

.registration-meal-option:has(option:checked:not([value="0"])) .select-field.selected-s .select-bg {
  background: transparent !important;
}

/* The grey row line right above the outline turns white (the row above, or the table header when the
   first row is chosen) - not when the row above is chosen too, its own outline keeps the blue bottom line */
table.tb-charges > tbody tr:not(:has(:is(.registration-choice-input:checked, option:checked:not([value="0"])))):has(+ tr:is(.registration-highlight-row, .registration-outline-row) :is(.registration-choice-input:checked, option:checked:not([value="0"]))) td,
table.tb-charges:has(> tbody > tr:is(.registration-highlight-row, .registration-outline-row):first-child :is(.registration-choice-input:checked, option:checked:not([value="0"]))) > thead th {
  border-bottom-color: #fff;
}

.registration-choice-option .form-check-input.registration-choice-input:checked,
.registration-choice-option:not(.is-closed):not(.is-row):hover .form-check-input.registration-choice-input {
  --bs-form-check-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.6' d='m5.6 10.4 3 3 5.8-6.6'/></svg>");
  background-color: var(--main-color);
  border-color: var(--main-color);
}

.registration-choice-option .form-check-input.registration-choice-input:checked {
  animation: registration-choice-check 0.22s ease-out;
}

/* Fee cell hover = preview of the choice: main-colour semi-bold price and a half-transparent tick */
.registration-choice-option:not(.is-closed):not(.is-row):hover .form-check-input.registration-choice-input:not(:checked) {
  opacity: 0.5;
}

.registration-choice-option:not(.is-closed):not(.is-row):hover span {
  color: var(--main-color-dark);
  font-weight: 500;
}

.registration-choice-option .form-check-input.registration-choice-input:focus {
  box-shadow: none;
}

.registration-choice-option .form-check-input.registration-choice-input:focus-visible {
  box-shadow: 0 0 0 0.2rem var(--main-color-light-02);
}

.registration-choice-option.is-closed .form-check-input.registration-choice-input {
  background-color: var(--bs-secondary-bg);
  opacity: 0.6;
}

@keyframes registration-choice-check {
  0% {
    transform: scale(0.7);
  }
  60% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}

.select-field .select-arrow {
  z-index: 2;
  block-size: 9px;
  inline-size: 12px;
  grid-area: select;
  align-self: center;
  justify-self: end;
  margin-inline-end: 1ch;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 9px;
  transition: all 0.3s ease;
}

.select-field.select-open .select-arrow {
  transform: rotate(180deg);
}

.form-control::placeholder,
.form-novalidate::placeholder {
  color: rgba(0, 40, 78, 0.5) !important;
  transition: all ease-in-out 0.2s;
}

.form-control:focus::placeholder,
.form-novalidate:focus::placeholder {
  color: transparent !important;
  transition: all ease-in-out 0.2s;
}

.form-control-readonly,
.form-control-readonly:hover,
.form-control-readonly:focus {
  background-color: var(--color-grey-6) !important;
  border-color: var(--border-grey) !important;
  box-shadow: none;
  color: var(--color-grey-3);
  cursor: default;
}

.widget .form-control-readonly,
.widget .form-control-readonly:focus {
  background-color: var(--color-grey-6) !important;
}

.form-label {
  margin-bottom: 0.25rem !important;
  cursor: default !important;
}

.form-check-label {
  cursor: pointer;
}

.form-select option:disabled,
.form-select-novalidate option:disabled {
  color: rgba(0, 40, 78, 0.5) !important;
}

.form-group input.mt-check {
  margin-top: 15px;
}

.form-group label.mt-check {
  margin-top: 12px;
}

.registration-sex-options {
  align-items: center;
  display: flex;
  min-height: 38px;
}

.registration-sex-group > legend.form-label {
  font-size: 15px;
  line-height: 1.5;
}

.registration-sex-options .form-check-input {
  flex: 0 0 auto;
  margin-top: 0;
}

.registration-sex-options .form-check-label {
  line-height: 1.2;
  margin: 0 3rem 0 0.35rem;
}

.registration-sex-options .form-check-label:last-child {
  margin-right: 0;
}
/*
.input-group>.form-control {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
*/

select.form-select {
  border-color: var(--input-border-color) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

.payment-label {
  cursor: pointer;
  height: 47px !important;
  background: var(--bg-gray);
  text-align: center !important;
}

.payment-label .form-check-input {
  margin-left: 0;
  margin-top: 0;
  display: none;
}

.payment-label .form-check-label {
  margin-bottom: 0;
  margin-top: 1px;
}

/*
.was-validated .payment-label:last-child:has(.form-check-input:invalid) {
	margin-bottom:2rem;
}
*/

input[type="radio"]:checked + label {
  font-weight: 600;
  color: var(--color-blue);
}

.total-price {
  font-size: 1.2rem;
  font-weight: 600;
}

.was-validated .form-control.no-validation:valid {
  border: 1px solid var(--input-border-color);
  background-image: none;
}

.form-control.is-valid:not(.no-validation),
.was-validated .form-control:valid:not(.no-validation) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3e%3cpath fill='%23198754' d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3e%3c/svg%3e");
  background-size: calc(0.4em + 0.2rem) calc(0.4em + 0.2rem);
}

.form-control.is-invalid:not(.no-validation),
.was-validated .form-control:invalid:not(.no-validation) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23dc3545' d='M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24v112c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0-64 0 32 32 0 1 0 64 0z'/%3e%3c/svg%3e");
  background-size: calc(0.55em + 0.275rem) calc(0.55em + 0.275rem);
}

/* File inputs are .no-validation (JS-driven), so the rules above skip them.
   Give them the same FontAwesome mark and reserve space on the right so it
   never overlaps a long file name. */
.form-control.check-file.is-valid,
.was-validated .form-control.check-file:valid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3e%3cpath fill='%23198754' d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: calc(0.4em + 0.2rem) calc(0.4em + 0.2rem) !important;
  padding-right: 40px !important;
}

.form-control.check-file.is-invalid,
.was-validated .form-control.check-file:invalid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23dc3545' d='M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24v112c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0-64 0 32 32 0 1 0 64 0z'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: calc(0.55em + 0.275rem) calc(0.55em + 0.275rem) !important;
  padding-right: 40px !important;
}

.is-file-checking .form-control.is-checking {
  border-color: var(--main-color);
  box-shadow: 0 0 0 0.15rem var(--main-color-light-03);
}

.is-file-checking .invalid-feedback {
  color: var(--main-color);
  display: block;
}

.is-file-checking .invalid-feedback::before {
  animation: fileCheckingSpin 0.75s linear infinite;
  border: 2px solid var(--main-color-light-03);
  border-top-color: var(--main-color);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 0.85rem;
  margin-right: 0.45rem;
  vertical-align: -0.12rem;
  width: 0.85rem;
}

@keyframes fileCheckingSpin {
  to {
    transform: rotate(360deg);
  }
}

/*
.was-validated .form-select.no-validation:valid {
	border: 1px solid var(--input-border-color);
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !important;
}
*/

.was-validated .form-select.charges.no-validation:valid {
  border: 1px solid var(--input-border-color);
  background: none !important;
}

.was-validated .form-check-input.no-validation:valid {
  border: 1px solid var(--input-border-color);
}

.was-validated .form-check-input.no-validation:valid ~ .form-check-label {
  color: var(--font-color-basic);
}

.was-validated .form-check-input.no-validation:checked:valid {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.form-switch .form-check-input:indeterminate {
  background-color: var(--bs-form-check-bg);
  border: var(--bs-border-width) solid var(--input-border-color);
  background-position: center;
}

.form-switch .form-check-input.is-invalid {
  border-color: var(--bs-form-invalid-border-color);
}

.was-validated .form-check-input.no-validation:focus:valid {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.was-validated .form-control.no-validation:focus:valid,
.was-validated .form-select.no-validation:focus:valid {
  outline: none !important;
  transition: all 0.5s ease !important;
  box-shadow: none;
  border: 1px solid var(--main-color) !important;
}

.form-check-input.is-valid ~ .form-check-label,
.was-validated .form-check-input.no-validation:valid ~ .form-check-label {
  border-color: var(--main-color) !important;
  color: var(--main-color);
}

.was-validated
  .form-check-input.no-validation.switch:valid
  ~ .form-check-label {
  color: var(--font-color-basic);
}

.no-validation ~ .select2 .select2-selection {
  border: 1px solid var(--input-border-color) !important;
  box-shadow: none !important;
}

.no-validation ~ .select2.select2-container--focus .select2-selection,
.no-validation ~ .select2.select2-container--open .select2-selection,
.no-validation ~ .select2 .select2-selection:hover {
  border-color: var(--main-color) !important;
}

/*
.form-control.is-invalid, .was-validated .form-control:invalid {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>') !important;
}
*/

.fulltime,
.private,
.urgent {
  background: #dcf6fc;
  color: #069cd0;
  position: relative;
  font-size: 13px;
  line-height: 15px;
}

.private {
  background: rgba(52, 168, 83, 0.15);
  color: #34a853;
}

.urgent {
  background: rgba(249, 171, 0, 0.15);
  color: #f9ab00;
}

.activity-checkbox,
.activity-place {
  display: none;
}

.application select.charges {
  height: 30px !important;
  padding: 3px 10px !important;
}

table.tb-charges tr td {
  font-size: var(--font-size-xxl);
  transition: all ease-in-out 0.3s;
  line-height: 1.7rem !important;
  color: var(--font-color-basic);
}

table.tb-charges > tbody tr:nth-child(even) td {
  /*background: #f9f9f9;*/
  background: rgba(0, 0, 0, 0.015);
}

table.tb-charges > tbody tr:nth-child(odd) td {
  background: #fff;
}

table.tb-charges > tbody tr:hover td {
  background: var(--main-color-light-03) !important;
  transition: all ease-in-out 0s;
}

.select-field.charges-wrap {
  width: 60px;
}

table.tb-charges thead th {
  color: var(--main-color);
  font-size: var(--font-size-xxl);
  font-weight: 600;
}


table.tb-charges tfoot tr:first-child > th,
table.tb-charges tfoot tr:first-child > td {
  /*border-top: 1px solid var(--main-color);*/
  border-top-width: 3px;
}

.registration-billing-heading {
  color: var(--color-black);
}

.form-subsection-heading {
  color: var(--color-black);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
}

.content-separator {
  border: 0;
  border-top: 1px solid var(--border-grey);
  margin: 1rem 0;
  opacity: 1;
}

.registration-billing-assignment {
  display: grid;
  gap: 0.85rem;
  margin: 0 auto;
  width: fit-content;
}

.registration-billing-assignment-row {
  align-items: start;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: 12rem auto;
}

.registration-billing-assignment-label {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  min-height: 48px;
  text-align: right;
}

.registration-billing-assignment-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.registration-billing-assignment-options .btn {
  flex: 0 0 10.5rem;
}

.registration-billing-assignment-options .invalid-feedback {
  flex: 0 0 100%;
  margin-top: 0.15rem;
  text-align: left;
}

@media (max-width: 767.98px) {
  .registration-billing-assignment {
    width: 100%;
  }

  .registration-billing-assignment-row {
    gap: 0.5rem;
    grid-template-columns: 1fr;
  }

  .registration-billing-assignment-label {
    justify-content: flex-start;
    min-height: auto;
    text-align: left;
  }

  .registration-billing-assignment-options {
    flex-wrap: wrap;
  }

  /* "Já osobně" / "Organizace" share one row (two fixed 10.5rem buttons do not fit a phone) */
  .registration-billing-assignment-options .btn {
    flex: 1 1 0;
    min-width: 0;
  }
}

.registration-step-header {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  margin-top: 0.5rem;
}

.registration-step-header::before {
  background: var(--main-color);
  content: "";
  flex: 0 0 3px;
  height: 1em;
  transform: translateY(1px);
}

.registration-step-header h3 {
  color: var(--color-black);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}

/* "povinné" tag inside the title - follows the last word also when the title wraps */
.registration-step-header h3 .badge {
  font-size: 0.75rem;
}

.registration-profession-fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.registration-profession-fieldset.is-invalid #profession-error,
.registration-sex-group.is-invalid > .invalid-feedback {
  display: block;
}

#registration-validation-summary a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =============================================================================
	Registration on-line v2 - step cards (1-registration-v2.php)
	One step card is open at a time, the others collapse to a summary line with a
	"Změnit" toggle; below 992px the page behaves like a wizard with a fixed bottom
	bar (progress strip + "Další") and the heading shows the task of the step.
============================================================================= */
.application-v2 .application-steps {
  gap: 1.5rem;
}

.application-v2 .form-card {
  background: #fff;
  border: 1px solid var(--border-grey);
  border-radius: var(--bs-border-radius);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* The step the user is in: edge drawn by the shadow, the border stays for the dimensions */
.application-v2 .form-card--active {
  border-color: transparent;
  box-shadow: 0 0.5rem 1.5rem rgba(23, 35, 62, 0.1);
}

.application-step {
  min-width: 0;
  padding: 1rem;
}

.application-step__head {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.application-step__heading {
  min-width: 0;
}

.application-step__title {
  color: var(--color-black);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}

/* Steps the user has not reached yet are muted */
.application-step:not(.application-step--open):not([data-step-visited]) .application-step__title {
  color: var(--color-grey-4);
}

.application-step__number {
  color: var(--main-color);
}

.application-step__optional {
  background: var(--color-grey-6);
  color: var(--color-grey-3);
  font-size: 0.7rem;
  font-weight: 500;
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* Summary of a collapsed step is always one line, longer text is cut with an ellipsis */
.application-step__summary {
  font-size: var(--font-size-m);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "Změnit" of a collapsed step: filled button, so it is obvious the step can be reopened */
.application-step__toggle {
  align-items: center;
  background: var(--color-grey-8);
  border: 0;
  border-radius: var(--bs-border-radius);
  color: var(--color-grey-2);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--font-size-m);
  font-weight: 500;
  height: 38px;
  padding: 0 1rem;
  transition: background-color 0.3s ease;
}

.application-step__toggle:hover,
.application-step__toggle:focus-visible {
  background: #cccccc99;
  color: var(--color-black);
}

/* Chevron instead of the text belongs to mobile only */
.application-step__toggle-icon {
  display: none;
}

.application-step__body {
  margin-top: 1rem;
}

.application-step__subtitle {
  color: var(--color-black);
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
}

/* Consent block (RegistrationAgreements::render) sits inside the card, so no extra side padding */
.application-v2 .agreement-wrap {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Step tables sit directly in the card */
.application-v2 .application-step__body .table-responsive {
  margin-bottom: 0;
}

/* Page heading with the mobile "previous step" arrow and close cross */
.application-head {
  align-items: center;
  display: flex;
  gap: 0.75rem;
}

.application-head__prev,
.application-head__close {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--color-black);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.25rem;
  height: 2.5rem;
  justify-content: center;
  text-decoration: none;
  transition: background-color 0.3s ease;
  width: 2.5rem;
}

.application-head__prev:hover,
.application-head__prev:focus-visible,
.application-head__close:hover,
.application-head__close:focus-visible {
  background: var(--color-grey-8);
  color: var(--color-black);
}

/* Mobile bottom bar: progress strip on the top edge, "Další" below */
.application-mobile-bar {
  background: #fff;
  box-shadow: 0 -0.25rem 1rem rgba(23, 35, 62, 0.08);
  z-index: 1030;
}

.application-progress {
  display: flex;
  gap: 0.5rem;
  height: 4px;
}

.application-progress span {
  background: var(--color-grey-6);
  flex: 1 1 0;
}

.application-progress span.is-done {
  background: var(--main-color);
}

@media (min-width: 992px) {
  .application-step {
    padding: 1.5rem 2rem;
  }
}

@media (max-width: 991.98px) {
  .application-v2 .application-steps {
    gap: 1rem;
  }

  /* First row: back arrow left, close cross right; the heading wraps under them */
  .application-head {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .application-head h2 {
    flex: 0 0 100%;
    font-size: 1.6rem;
    order: 1;
  }

  .application-head__prev {
    margin-left: -0.5rem;
  }

  .application-head__close {
    margin-left: auto;
    margin-right: -0.5rem;
  }

  /* Collapsed step: chevron only, the whole header is the target (main.js); the text stays for readers */
  .application-step__toggle {
    background: transparent;
    font-size: 1.25rem;
    height: 2.5rem;
    justify-content: center;
    margin-right: -0.5rem;
    padding: 0;
    width: 2.5rem;
  }

  .application-step__toggle-label {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .application-step__toggle-icon {
    display: inline;
  }

  /* Step numbers are not printed - the progress strip in the bottom bar tells the position */
  .application-step__number {
    display: none;
  }

  /* Open step: the heading of the page already says what to do, so the card title is smaller */
  .application-step__title {
    font-size: 1.1rem;
  }

  .application-step:not(.application-step--open) .application-step__title,
  .application-step__summary {
    font-size: 1rem;
  }

  /* Steps after the active one are hidden (main.js) */
  .application-step--upcoming {
    display: none;
  }

  /* Last step (recap): the page heading already says "Zkontrolujte a odešlete" */
  .application-step--open[data-step-key="confirm"] .application-step__head {
    display: none;
  }

  .application-step--open[data-step-key="confirm"] .application-step__body {
    margin-top: 0;
  }

  /* Room for the fixed bottom bar; the footer shows up with the last step only */
  body.application-wizard-step main {
    padding-bottom: 6rem;
  }

  body.application-wizard-step footer {
    display: none;
  }
}

@media (max-width: 575.98px) {
  #registration input.form-control,
  #registration select.form-control,
  #registration .select2-selection {
    font-size: 1rem;
  }
}

/* =============================================================================
	Layout: Footer CSS
============================================================================= */
footer {
  width: 100%;
  position: relative;
  background-color: var(--footer-bg-color);
}

footer a,
footer p,
footer li {
  font-weight: 400;
  font-size: var(--footer-text-size);
  color: var(--footer-text-color);
}

footer h3 {
  position: relative;
  padding-bottom: 7px;
  margin-bottom: 14px;
  color: var(--footer-h-color);
  font-size: var(--footer-h-size);
}

footer .footer-upper {
  position: relative;
  z-index: 1;
}

footer .footer-links form input,
footer input.form-control {
  outline: 0;
  border: 0;
  box-shadow: none;
}

footer .footer-links form input:focus,
footer input.form-control:focus {
  outline: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

footer .footer-upper .footer-links ul.list li {
  display: inline-block;
  padding: 0 10px;
}

footer .footer-upper .footer-links ul li {
  margin-bottom: 0.6rem;
  display: block;
}

footer .footer-upper .footer-links ul li:last-child {
  margin-block: 0;
}

footer .footer-upper .footer-links .footer-contact-list {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

@media (min-width: 992px) {
  footer .footer-upper .footer-links .footer-contact-list {
    margin-top: 10.5px !important;
  }
}

footer .footer-upper .footer-links .footer-contact-list li {
  display: block;
  margin: 0 0 0.25rem !important;
  line-height: 1.3;
}

footer .footer-upper .footer-links .footer-contact-list li:last-child {
  margin-bottom: 0 !important;
}

footer .footer-upper .footer-links ul li:not(.f-none) a {
  padding-left: 15px;
}

footer .footer-upper .footer-links ul li a {
  transition: all ease-in-out 0.25s;
}

footer .footer-upper .footer-links ul li:not(.f-none) a::before {
  content: "\f105";
  position: absolute;
  left: 0;
  font-family: "Font Awesome 6 Pro";
}

footer .footer-upper .footer-links ul li a:hover {
  color: var(--footer-a-hover-color);
  transition: all ease-in-out 0.25s;
}

footer .footer-upper .footer-links ul li a.active {
  color: var(--footer-a-hover-color);
}

footer .footer-upper .footer-links ul p span {
  color: #1967d3;
}

footer .footer-upper .footer-links h5 {
  border: none;
  padding: 0;
}

footer .footer-upper .footer-about p,
footer .footer-upper .footer-about li {
  color: var(--footer-text-color);
}

footer .footer-upper .footer-about li {
  line-height: 2;
}

footer .footer-copyright {
  position: relative;
  z-index: 1;
}

footer .footer-copyright .copyright-inner {
  background: #fbfbfb12;
}

footer.footer-slim .copyright-inner {
  min-height: 36px;
  background: transparent;
}

/* Copyright line: a normal text line with the logo inline (a flex paragraph split every text piece
   into its own column on narrow screens); on mobile the logo sits on its own centred line above it and
   the social links are hidden */
footer.footer-slim .footer-slim-logo {
  width: auto;
  height: 0.8rem;
  display: inline-block;
  margin-right: 0.45rem;
  vertical-align: -0.1rem;
}

@media (max-width: 767.98px) {
  footer.footer-slim .copyright-text {
    text-align: center;
  }

  footer.footer-slim .footer-slim-logo {
    display: block;
    margin: 0 auto 0.35rem;
  }

  /* the slim footer (registration, active participation) stays short on mobile - no social links */
  footer.footer-slim .social-links {
    display: none;
  }

  /* event registration (steps 1 and 2, the pages with the summary bar): no footer on mobile - nothing
     between the form and its bottom bar */
  body:has(#registration-summary-bar) footer.footer-slim {
    display: none;
  }
}

footer.footer-slim .social-links ul li a {
  width: 30px;
  height: 30px;
  font-size: 13px;
  line-height: 2.3;
}

footer .footer-listing-main .footer-listing {
  border: 1px dashed #f1f1f157;
  padding: 20px;
}

footer .footer-listing-main .footer-listing i {
  font-size: 36px;
  display: block;
}

footer .footer-toggle .nav-dropdown-icon {
  font-size: 0.85em;
  transition: all 0.35s ease-out;
}

footer .footer-toggle:not(.collapsed) .nav-dropdown-icon {
  -ms-transform: rotate(-180deg);
  /* IE 9 */
  -webkit-transform: rotate(-180deg);
  /* Chrome, Safari, Opera */
  transform: rotate(-180deg);
}

footer .footer-links img {
  width: 125px !important;
}

.social-links {
  display: inline-block;
}

.social-links ul li {
  display: inline-block !important;
}

.social-links ul li a {
  border: 1px solid var(--input-border-color);
  width: 40px;
  height: 40px;
  display: inline-block;
  text-align: center;
  font-size: 17px;
  line-height: 2.4;
  border-radius: 50%;
  transition: all ease-in-out 0.2s;
}

.social-links ul li a:hover {
  color: #fff;
  background: var(--color-blue);
  transition: all ease-in-out 0.2s;
}

@media (max-width: 991.98px) {
  footer .footer-upper {
    padding-bottom: 3rem;
  }

  footer .footer-upper .footer-links {
    width: 100% !important;
  }

  footer .footer-listing-main .footer-listing {
    margin-top: 15px;
  }

  footer .col-12:not(:last-child) {
    border-bottom: 1px solid #4e4d4d;
  }

  footer .col-12 ul li:last-child {
    margin-bottom: 12px !important;
  }

  footer h3 {
    padding-bottom: 0px;
    margin-bottom: 9px;
  }
}

@media (max-width: 767.98px) {
  footer .footer-copyright .copyright-inner {
    text-align: center;
  }

  footer .footer-copyright .copyright-inner .copyright-text {
    margin-bottom: 0;
  }
}

@media (min-width: 991.98px) {
  footer h3:after {
    position: absolute;
    content: "";
    height: 0.5px;
    width: 50px;
    background: var(--footer-text-color);
    left: 0;
    bottom: 0;
  }
}

/* ======================
search popup
====================== */

.search-popup {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100%;
  z-index: 99999;
  margin-top: -540px;
  transform: translateY(-100%);
  background-color: rgba(0, 0, 0, 0.8);
  transition: all 1500ms cubic-bezier(0.86, 0, 0.07, 1);
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}

.sidenav-bar-visible .search-popup {
  width: 80%;
}

.search-active .search-popup {
  transform: translateY(0%);
  margin-top: 0;
}

.search-popup .close-search {
  position: absolute;
  left: 0;
  right: 0;
  top: 75%;
  border: none;
  margin: 0 auto;
  margin-top: -200px;
  border-radius: 10px;
  text-align: center;
  background: var(--main-color);
  text-align: center;
  width: 50px;
  height: 50px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  transition: all 500ms ease;
  opacity: 0;
  visibility: hidden;
}

.search-active .search-popup .close-search {
  visibility: visible;
  opacity: 1;
  top: 50%;
  transition-delay: 1500ms;
}

.search-popup form {
  position: absolute;
  max-width: 700px;
  top: 50%;
  left: 15px;
  right: 15px;
  margin: -35px auto 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: all 300ms ease;
}

.search-active .search-popup form {
  transform: scaleX(1);
  transition-delay: 1200ms;
}

.search-popup .form-group {
  position: relative;
  margin: 0px;
  overflow: hidden;
}

.search-popup .form-group input[type="text"],
.search-popup .form-group input[type="search"] {
  position: relative;
  width: 100%;
  height: 60px;
  outline: none;
  border-radius: 10px;
  border: none;
  padding: 0 100px 0 35px;
  transition: all 500ms ease;
  text-transform: capitalize;
}

.search-popup .form-group input[type="submit"],
.search-popup .form-group button {
  position: absolute;
  right: 10px;
  top: 7px;
  border-radius: 10px;
  background: var(--main-color);
  text-align: center;
  font-size: 20px;
  color: #fff !important;
  padding: 5px 30px;
  border: none;
  cursor: pointer;
  transition: all 500ms ease;
}

.search-popup .form-group input[type="submit"]:hover,
.search-popup .form-group button:hover {
  background: var(--main-font-color);
}

.search-popup input::placeholder,
.search-popup textarea::placeholder {
  color: #51668a;
}

.mobile-search-btn {
  display: none;
}

@media all and (max-width: 991px) {
  .mobile-search-btn {
    display: block;
    position: absolute;
    right: 15%;
    color: var(--main-font-color);
    font-size: 20px;
  }
}

@media all and (max-width: 767px) {
  .mobile-search-btn {
    right: 20%;
  }
}

/* =============================================================================
	Layout: To top - progress bar CSS
============================================================================= */
.progress-wrap {
  position: fixed;
  right: 25px;
  bottom: 25px;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  box-shadow: inset 0 0 0 2px rgba(0, 102, 255, 0.2);
  z-index: 10000;
  opacity: 0;
  /*background-color: white;*/
  visibility: hidden;
  transform: translateY(15px);
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.progress-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.progress-wrap::after {
  position: absolute;
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  content: "\f062";
  text-align: center;
  line-height: 46px;
  font-size: 18px;
  color: var(--main-color);
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 1;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.lightScrollIcon::after {
  color: #ecedf3 !important;
}

.progress-wrap:hover::after {
  opacity: 0;
}

.progress-wrap::before {
  position: absolute;
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  content: "\f062";
  text-align: center;
  line-height: 46px;
  font-size: 18px;
  opacity: 0;
  background-image: linear-gradient(298deg, #da2c4d, #f8ab37);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 2;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.progress-wrap:hover::before {
  opacity: 1;
}

.progress-wrap svg path {
  fill: none;
}

.progress-wrap svg.progress-circle path {
  stroke: var(--main-color);
  stroke-width: 4;
  box-sizing: border-box;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

/* =============================================================================
	Layout: BR CSS
============================================================================= */
.br-490 {
  display: none;
}

@media all and (max-width: 489.98px) {
  .br-490 {
    display: block;
  }
}

.br-400 {
  display: none;
}

@media all and (max-width: 399.98px) {
  .br-400 {
    display: block;
  }
}

.br-992 {
  display: block;
}

@media all and (max-width: 991.98px) {
  .br-992 {
    display: none;
  }
}

.br-1400 {
  display: none;
}

@media (min-width: 1400px) {
  .br-1400 {
    display: block;
  }
}

.br-1200 {
  display: none;
}

@media (min-width: 1200px) {
  .br-1200 {
    display: block;
  }
}

/* =============================================================================
	Layout: courses
============================================================================= */
.course-day-nav__btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  padding: 9px 18px;
  border-radius: var(--bs-border-radius);
  background: var(--color-grey-2);
  color: #fff;
  border: 1px solid transparent;
  transition: all ease-in-out 0.3s;
}

.course-day-nav__btn:hover,
.course-day-nav__btn:focus {
  background: var(--main-color);
  color: #fff;
}

.course-day-nav__btn.is-active {
  background: var(--main-color);
  color: #fff;
  cursor: default;
  pointer-events: none;
}

.courses-list h1,
.courses-list h2,
.courses-list h3,
.courses-list h4,
.courses-list h5 {
  color: var(--main-color);
  margin-bottom: 5px;
}

.courses-list .course-item .course-image {
  position: relative;
  min-height: 200px;
}

.courses-list .course-item .course-image img {
  border-bottom-left-radius: var(--bs-border-radius);
  border-top-left-radius: var(--bs-border-radius);
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.courses-list .course-item .course-logo img {
  width: 90%;
  height: auto;
}

@media (max-width: 767.98px) {
  .courses-list .course-item .course-image {
    height: 250px;
  }

  .courses-list .course-item .course-image img {
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

.courses-list .course-item .card {
  transition: all ease-in-out 0.5s;
  border: 1px solid var(--border-grey);
  background: #fff;
}

@media (min-width: 768px) {
  .courses-list .course-item .card .col-md-8 {
    padding-left: 1.25rem;
  }
}

.courses-list .course-item .card:hover {
  transition: all ease-in-out 0.5s;
  border: 1px solid var(--main-color-light-02);
}

.courses-list .course-item .card:hover img {
  filter: brightness(1.12);
  transition: filter 0.5s;
}

@media (min-width: 768px) {
  .action-course-list .course-side {
    display: flex;
    flex-direction: column;
    padding: 1rem 0 1rem 1rem;
  }

  .action-course-list .course-media {
    min-height: 0;
  }

  .action-course-list .course-media img {
    display: block;
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--bs-border-radius);
  }

  .action-course-list .course-logo.course-media {
    aspect-ratio: 4 / 3;
    background: #fff;
  }

  .action-course-list .course-logo.course-media img {
    width: 82%;
    aspect-ratio: auto;
    object-fit: contain;
  }

  .action-course-list .course-side-info {
    padding: 1rem 0 0;
    color: var(--main-font-color);
    font-size: var(--font-size-xxl);
  }

  .action-course-list .course-side-info div {
    display: flex;
    gap: 0.35rem;
    align-items: flex-start;
    margin-bottom: 0.5rem;
  }

  .action-course-list .course-side-info div:last-child {
    margin-bottom: 0;
  }

  .action-course-list .course-side-info i {
    width: 1.1rem;
    flex: 0 0 1.1rem;
    padding-top: 0.15rem;
    color: var(--main-color);
    text-align: center;
  }

  .action-course-list .course-side-info__time {
    display: inline-flex;
    gap: 0.35rem;
    align-items: flex-start;
    margin-left: 1rem;
  }

  .action-course-list .course-side-info__price {
    color: var(--main-color);
    font-weight: 700;
  }

  .action-course-list .course-item .card {
    border: 1px solid #fff;
  }
}

@media (max-width: 767.98px) {
  .action-course-list .course-side-info {
    padding: 1rem;
    border-top: 1px solid var(--border-grey);
  }
}

/* Hotel detail */
:root {
  --hotel-detail-info-font-size: 0.98rem;
}

.hotel-detail-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(2, minmax(120px, 1fr));
  gap: 5px;
  height: clamp(280px, 30vw, 340px);
  overflow: hidden;
  border-radius: var(--bs-border-radius);
}

.hotel-detail-gallery a {
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
  background: #e9ecef;
}

.hotel-detail-gallery picture,
.hotel-detail-gallery img {
  display: block;
  width: 100%;
  height: 100%;
}

.hotel-detail-gallery img {
  object-fit: cover;
  filter: brightness(1);
  transition: filter 0.5s;
}

.hotel-detail-gallery a:hover img {
  filter: brightness(1.12);
}

.hotel-detail-gallery-item-main {
  grid-row: 1 / span 2;
}

.hotel-detail-gallery-small-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.hotel-detail-gallery-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgb(0 0 0 / 55%);
  font-size: 1.05rem;
  font-weight: 600;
}

.hotel-room-price-table.table {
  margin-bottom: 0;
  --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: transparent;
}

.hotel-room-price-table.table > :not(caption) > * > * {
  background: transparent !important;
  background-color: transparent !important;
  padding-left: 0;
  padding-right: 0;
}

.hotel-room-price-table.table > tbody tr:nth-child(even) td,
.hotel-room-price-table.table > tbody tr:nth-child(odd) td,
.hotel-room-price-table.table tr:hover td,
.hotel-room-price-table.table tbody tr,
.hotel-room-price-table.table tbody td,
.hotel-room-price-table.table thead th {
  background: transparent !important;
  background-color: transparent !important;
}

.hotel-detail-side-wrap {
  position: sticky;
  top: 95px;
  align-self: flex-start;
}

.hotel-detail-side {
  background: #f1f2f4;
  border-radius: var(--bs-border-radius);
  padding: 22px;
  font-size: var(--hotel-detail-info-font-size);
}

.hotel-detail-side-inner {
  background: #fff;
  border-radius: var(--bs-border-radius);
  padding: 28px 30px;
}

.hotel-detail-side h4 {
  font-size: calc(var(--hotel-detail-info-font-size) + 0.3rem);
}

.hotel-detail-info-list {
  display: grid;
  gap: 0;
}

.hotel-detail-info-row {
  display: grid;
  grid-template-columns: 16px minmax(62px, auto) 1fr;
  gap: 4px;
  align-items: start;
  padding: 11px 0;
  border-bottom: 1px solid #dedfe3;
}

.hotel-detail-info-row:last-child {
  border-bottom: 0;
}

.hotel-detail-info-row i {
  color: #223052;
  line-height: 1.45;
  width: 16px;
  text-align: center;
  transform: translateY(1px);
}

.hotel-detail-info-label {
  color: #223052;
}

.hotel-detail-info-value {
  color: #223052;
  font-weight: 400;
  text-align: right;
  overflow-wrap: anywhere;
}

/* Global Fancybox image radius */
.fancybox__slide.has-image > .fancybox__content,
.has-html5video .fancybox__content {
  border-radius: var(--bs-border-radius);
  overflow: hidden;
}

.fancybox-image,
.fancybox__html5video {
  border-radius: var(--bs-border-radius);
}

.fancybox__thumbs,
.f-thumbs__slide {
  --f-thumb-border-radius: var(--bs-border-radius);
}

.f-thumbs__slide__button,
.f-thumbs__slide__button::after,
.f-thumbs__slide__img,
.f-thumbs__slide__button img {
  border-radius: var(--bs-border-radius);
}

.f-thumbs__slide__button {
  overflow: hidden;
}

@media (max-width: 991.98px) {
  .hotel-detail-gallery {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
    border-radius: var(--bs-border-radius);
  }

  .hotel-detail-gallery a {
    aspect-ratio: 16 / 10;
  }

  .hotel-detail-gallery-item-main {
    grid-row: auto;
  }

  .hotel-detail-gallery-small-wrap {
    grid-template-columns: 1fr 1fr;
  }

  .hotel-detail-side-wrap {
    position: static;
  }

  .hotel-detail-side {
    padding: 12px;
  }

  .hotel-detail-side-inner {
    padding: 22px;
  }

  .hotel-detail-info-row {
    grid-template-columns: 18px 1fr;
  }

  .hotel-detail-info-value {
    grid-column: 2;
    text-align: left;
  }
}

.courses-list ul {
  margin: 0;
  padding-left: 18px;
}

.courses-list ul li {
  margin-bottom: 5px;
  line-height: 1.5;
  color: var(--main-font-color);
  position: relative;
  display: list-item;
  padding: 0;
  list-style-type: disc;
}

.courses-list ul li ul li {
  list-style-type: circle;
}

.courses-list ol {
  margin: 0;
  padding-left: 18px;
}

.courses-list ol li {
  margin-bottom: 5px;
  line-height: 1.5;
  color: var(--main-font-color);
  position: relative;
  display: list-item;
  padding: 0;
}

/* =============================================================================
	Layout: Action name
============================================================================= */
@media (max-width: 991.98px) {
  .action-name h1 {
    font-size: 20px;
  }
}

/* =============================================================================
	Plugin: Select2 - Add
============================================================================= */
.select2-container ul li {
  display: block !important;
}

.select2 {
  width: 100% !important;
}

.select2-dropdown {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  border-radius: var(--bs-border-radius) !important;
  overflow: hidden;
}

.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  min-height: 51px;
  padding: 12px 10px;
  background-color: #fff;
  border-color: #ccc;
  /*box-shadow: 0 1px 2px rgba(0,0,0,0.1);*/
  /*transition: box-shadow 0.3s ease-in;*/
  outline: 0 none;
  border-radius: var(--bs-border-radius);
}

.select2-container .select2-selection--single .select2-selection__rendered,
.select2-container .select2-selection--multiple .select2-selection__rendered {
  font-size: 15px;
  line-height: 25px;
  color: var(--color-blue);
  font-weight: 500;
  padding-left: 0px;
  padding-right: 3px;
  text-align: left;
  /*max-width: 250px !important;*/
}

.select2-container .select2-selection--single .select2-selection__arrow,
.select2-container .select2-selection--multiple .select2-selection__arrow {
  top: 11px;
  right: 6px;
  transition: all 0.3s ease;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 9px;
}

.select2-container .select2-selection--single .select2-selection__arrow b,
.select2-container .select2-selection--multiple .select2-selection__arrow b {
  display: none;
}

.select2-container--open .select2-selection__arrow {
  transform: rotate(180deg) !important;
}

.select2-container--default.select2-container--open
  .select2-selection--single
  .select2-selection__arrow
  b {
  /* Original Values
	border-color: transparent transparent #888 transparent;
    border-width: 0 4px 5px 4px;
	*/
  border-color: #888 transparent transparent transparent;
  border-width: 5px 4px 0 4px;
}

.select2-container--classic.select2-container--open
  .select2-selection--single
  .select2-selection__arrow
  b {
  /* Original Values
	border-color: transparent transparent #888 transparent;
    border-width: 0 4px 5px 4px;
	*/
  border-color: #888 transparent transparent transparent;
  border-width: 5px 4px 0 4px;
}

.select2-container--default .select2-dropdown {
  border: 0;
  /* thin outline + the drop shadow of the address autocomplete (packages/ruian-autocomplete) */
  box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11), 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.select2-container--default .select2-results > .select2-results__options {
  max-height: 205px;
  /* slim scrollbar like the address autocomplete: standard properties + Safari */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar {
  width: 6px;
}

.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-track {
  background: transparent;
}

.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
}

.select2-container--default .select2-results__option {
  position: relative;
  padding: 10px 15px;
  color: #444;
  font-size: var(--font-size-xxl);
  /* rows of 10 + 20 + 10 = 40px (a multiple of 4, like the address autocomplete): with display
     scaling (125 % ...) every row is whole device pixels high, so all the lines look the same */
  line-height: 20px !important;
  /* max-width only limits how far a long text widens an auto-width dropdown; min-width wins over
     it, so in a wider dropdown the options still fill the whole width (hover, lines) */
  max-width: 262px;
  min-width: 100%;
}

/* a thin line between the options, inset like the text (same colours as the address autocomplete);
   a border, not a 1px background - equally thick lines also with display scaling */
.select2-container--default .select2-results__option + .select2-results__option::before {
  content: "";
  position: absolute;
  top: 0;
  right: 15px;
  left: 15px;
  border-top: 1px solid #ebebeb;
}

/* no lines around the highlighted / selected option - an inset line would stick out of its straight edge */
.select2-container--default .select2-results__option--highlighted::before,
.select2-container--default .select2-results__option--highlighted + .select2-results__option::before,
.select2-container--default .select2-results__option--selected::before,
.select2-container--default .select2-results__option--selected + .select2-results__option::before {
  display: none;
}

.select2-dropdown-fullwidth .select2-results__option {
  max-width: none !important;
}

.input-group-hint {
  font-size: 0.9rem;
  color: var(--bs-secondary-color, #6c757d);
}

.select2-container--default
  .select2-results__option.select2-results__option--highlighted[aria-selected] {
  background-color: #f5f5f5;
  color: #444;
}

.select2-container--default
  .select2-results__option.select2-results__option--selected[aria-selected] {
  background-color: #f5f5f5;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__placeholder,
.select-day
  .select2-container
  .select2-selection--single
  .select2-selection__rendered {
  color: #777;
  font-weight: 300;
}

.select-day
  .select2-container--default
  .select2-selection--clearable
  .select2-selection__rendered {
  color: var(--color-blue);
  font-weight: 500;
}

.select2-container .select2-selection--single .select2-selection__rendered,
.select2-container .select2-selection--multiple .select2-selection__rendered {
  color: var(--font-color-basic) !important;
  font-weight: 400 !important;
}

.select2-container.select2-multiple-box .select2-selection--multiple {
  align-items: center;
  border: 1px solid #c1c1c1 !important;
  border-radius: var(--bs-border-radius);
  color: #494f5c;
  display: flex;
  flex-wrap: wrap;
  font-family: "Barlow", sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 22px;
  min-height: 38px;
  padding: 1px 28px 4px 10px;
  position: static;
}

.select2-container.select2-multiple-box .select2-selection--multiple .select2-selection__rendered {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 !important;
}

.select2-container.select2-multiple-box .select2-selection--multiple .select2-selection__choice {
  background-color: var(--main-color-light-03);
  border: 1px solid var(--main-color);
  border-radius: var(--bs-border-radius);
  display: inline-flex !important;
  margin: 3px 0 0 !important;
  max-width: 100%;
  min-width: 0;
  padding-left: 28px;
  white-space: normal;
  width: auto;
}

.select2-container.select2-multiple-box .select2-selection--multiple .select2-selection__choice__remove {
  align-items: center;
  border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius);
  border-right: 1px solid var(--main-color);
  color: var(--main-color);
  display: flex;
  height: 100%;
  justify-content: center;
  padding: 0 !important;
  width: 28px;
}

.select2-container.select2-multiple-box .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container.select2-multiple-box .select2-selection--multiple .select2-selection__choice__remove:focus-visible {
  background-color: var(--bs-danger-bg-subtle);
  color: var(--bs-danger);
}

.select2-container.select2-multiple-box .select2-selection--multiple .select2-selection__choice__remove span {
  display: none;
}

.select2-container.select2-multiple-box .select2-selection--multiple .select2-selection__choice__remove::before {
  content: "\f00d";
  font-family: "Font Awesome 6 Pro";
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
}

.select2-container.select2-multiple-box .select2-selection--multiple .select2-selection__choice__display {
  min-width: 0;
  overflow-wrap: anywhere;
  padding-inline: 8px;
}

.select2-container.select2-multiple-box .select2-selection--multiple .select2-search--inline {
  display: none;
}

.select2-container.select2-multiple-box .select2-multiple-placeholder {
  color: #777 !important;
  font-family: "Barlow", sans-serif;
  font-size: 15px;
  font-weight: 300 !important;
  line-height: 22px;
}

.select2-container.select2-multiple-box .select2-selection--multiple .select2-search__field {
  background: transparent;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  height: 22px !important;
  line-height: 22px;
  margin: 3px 0 0 !important;
  padding: 0 !important;
  resize: none;
  width: 100% !important;
}

.select2-container.select2-multiple-box .select2-selection--multiple .select2-search__field:focus {
  box-shadow: none !important;
  outline: 0;
}

.select2-container.select2-multiple-box .select2-selection--multiple .select2-search__field::placeholder {
  color: #777;
  font-family: "Barlow", sans-serif;
  font-size: 15px;
  font-weight: 300;
  opacity: 1;
}

.select2-container.select2-multiple-box .select2-selection--multiple .select2-selection__arrow {
  cursor: pointer;
  height: 26px;
  position: absolute;
  right: 6px;
  top: 6px;
  width: 20px;
}

.select2-container.select2-multiple-box.select2-container--focus .select2-selection--multiple,
.select2-container.select2-multiple-box.select2-container--open .select2-selection--multiple,
.select2-container.select2-multiple-box .select2-selection--multiple:hover {
  border-color: var(--main-color) !important;
}

.select2-container--focus .select2-selection--single,
.select2-container--open .select2-selection--single,
.select2-container .select2-selection--single:hover {
  border-color: var(--main-color) !important;
}

.select2-multiple-dropdown .select2-results,
.select2-multiple-dropdown .select2-results__options,
.select2-multiple-dropdown .select2-results__option {
  box-sizing: border-box;
  max-width: none;
  width: 100% !important;
}

.select2-multiple-dropdown .select2-search__field:focus {
  border-color: var(--main-color) !important;
  box-shadow: none !important;
}

.select2-multiple-dropdown .select2-search__field::placeholder {
  color: #777;
  font-family: "Barlow", sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 22px;
  opacity: 1;
}

.select2-multiple-dropdown .select2-search--dropdown:focus-within::after {
  color: var(--main-color) !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__placeholder {
  color: #777 !important;
  font-weight: 300 !important;
}

.select2-container--default .select2-results__option--selected {
  color: var(--font-color-basic);
  font-weight: 400;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__clear {
  color: #777;
}

.select2-container--default .select2-search--dropdown {
  position: relative;
}

.select2-container--default .select2-search--dropdown:after {
  content: "\f002";
  position: absolute;
  right: 15px;
  font-family: "Font Awesome 6 Sharp";
  font-weight: 400;
  color: #ccc;
  font-size: 14px;
  top: 50%;
  transform: translateY(-55%);
  transition: all 0.5s ease;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #ccc;
  height: auto;
  padding: 10px;
  border-radius: var(--bs-border-radius);
  color: #777;
  font-size: 14px;
  transition: all 0.5s ease;
}

.select2-container--default
  .select2-search--dropdown
  .select2-search__field:focus {
  border: 1px solid var(--main-color);
  outline: none;
  transition: all 0.5s ease;
  box-shadow: none;
}

.select2-container--default .select2-search--dropdown:focus-within:after {
  color: #0d6efd;
  transition: all 0.5s ease;
}

.banner-content .select2-container {
  border: 0;
}

.banner-content .select2-container .select2-selection--single {
  padding-left: 0;
  padding-right: 0;
  border: 0;
}

.banner-content .select2-container--default .select2-selection--multiple {
  border: 0;
  padding-left: 0;
  padding-right: 0;
}

.banner-content
  .select2-container--default.select2-container--focus
  .select2-selection--multiple {
  border: 0;
}

.application .select2-container .select2-selection--single,
.application .select2-container .select2-selection--multiple {
  height: 38px !important;
  min-height: 38px !important;
  padding: 7px 10px;
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--input-border-color);
}

.application
  .select2-container
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 22px !important;
  margin-top: 0 !important;
  overflow: hidden;
  padding-right: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.application .select2-container .select2-selection__arrow {
  top: 6px;
}

.application .no-clear .select2-container .select2-selection__clear {
  display: none;
}

.was-validated .custom-select:invalid + .select2 .select2-selection {
  border-color: #dc3545 !important;
}
.was-validated .custom-select:valid + .select2 .select2-selection {
  border-color: #28a745 !important;
}

*:focus {
  outline: 0px;
}

.select2-smaller
  .select2-container
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 22px !important;
  margin-top: 0 !important;
}

.select2-smaller .select2-container .select2-selection__arrow {
  top: 6px;
}

input.select2-search__field {
  padding: 7px 12px !important;
  height: 40px !important;
  border-radius: var(--bs-border-radius) !important;
}

/* =============================================================================
	Plugin: Select2 Bootstrap 5 Validation
============================================================================= */
.is-valid + .select2-container .select2-selection,
.was-validated select[required]:valid + .select2-container .select2-selection {
  border-color: #198754;
}

.is-valid + .select2-container .select2-selection::after,
.was-validated select[required]:valid + .select2-container .select2-selection::after {
  color: #198754;
  content: "\f00c";
  font-family: "Font Awesome 6 Pro";
  font-size: calc(0.4em + 0.2rem);
  font-weight: 900;
  line-height: 1;
  position: absolute;
  right: 1.65rem;
  top: calc(50% + 1px);
  transform: translateY(-50%);
}

.is-valid + .select2-container.select2-container--focus .select2-selection,
.is-valid + .select2-container.select2-container--open .select2-selection,
.was-validated
  select[required]:valid
  + .select2-container.select2-container--focus
  .select2-selection,
.was-validated
  select[required]:valid
  + .select2-container.select2-container--open
  .select2-selection {
  border-color: #198754;
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

.is-valid
  + .select2-container.select2-container--open.select2-container--below
  .select2-selection,
.was-validated
  select[required]:valid
  + .select2-container.select2-container--open.select2-container--below
  .select2-selection {
  border-bottom: 0 solid transparent;
}

.is-valid
  + .select2-container.select2-container--open.select2-container--above
  .select2-selection,
.was-validated
  select[required]:valid
  + .select2-container.select2-container--open.select2-container--above
  .select2-selection {
  border-top: 0 solid transparent;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.is-invalid + .select2-container .select2-selection,
.was-validated select:invalid + .select2-container .select2-selection {
  border-color: #dc3545;
}

.is-invalid + .select2-container .select2-selection::after,
.was-validated select:invalid + .select2-container .select2-selection::after {
  color: #dc3545;
  content: "\f06a";
  font-family: "Font Awesome 6 Pro";
  font-size: calc(0.52em + 0.255rem);
  font-weight: 400;
  line-height: 1;
  position: absolute;
  right: 1.65rem;
  top: calc(50%);
  transform: translateY(-50%);
}

.is-invalid + .select2-container.select2-container--focus .select2-selection,
.is-invalid + .select2-container.select2-container--open .select2-selection,
.was-validated
  select:invalid
  + .select2-container.select2-container--focus
  .select2-selection,
.was-validated
  select:invalid
  + .select2-container.select2-container--open
  .select2-selection {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

.is-invalid
  + .select2-container.select2-container--open.select2-container--below
  .select2-selection,
.was-validated
  select:invalid
  + .select2-container.select2-container--open.select2-container--below
  .select2-selection {
  border-bottom: 0 solid transparent;
}

.is-invalid
  + .select2-container.select2-container--open.select2-container--above
  .select2-selection,
.was-validated
  select:invalid
  + .select2-container.select2-container--open.select2-container--above
  .select2-selection {
  border-top: 0 solid transparent;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* =============================================================================
	Layout: Modal
============================================================================= */
.modal__container .modal__content .login-content .section-border {
  padding: 20px 30px;
  border-top: 1px dashed #cccccc50;
}

.modal__container .modal__content .login-content .form-checkbox {
  text-align: left;
}

.modal__container .modal__content .login-content a.btn-facebook,
.modal__container .modal__content .login-content a.btn-twitter,
.modal__container .modal__content .login-content a.btn-google {
  padding: 8px 20px;
  color: #fff;
  background: #ccc;
  border-radius: 0px;
  display: inline-block;
  border: 1px solid #395899;
}

.modal__container .modal__content .login-content a.btn-facebook {
  background: #395899;
}

.modal__container .modal__content .login-content a.btn-twitter {
  background: #04a9e1;
  border-color: #04a9e1;
}

.modal__container .modal__content .login-content a.btn-google {
  background: #db3236;
}

.modal__container .modal__content .login-content .sign-up {
  padding: 20px 0;
  border-top: 1px dashed #cccccc50;
}

.modal__container .modal__content button.close {
  background: #1967d3;
  color: #fff;
  position: absolute;
  top: 0;
  right: 0;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  opacity: 1;
  text-align: center;
  line-height: 0.5;
  font-size: 20px;
  padding: 0;
  z-index: 9;
  transition: all ease-in-out 0.5s;
}

.modal__container .modal__content button.close:focus {
  border: none;
  outline: none;
}

.cookie-modal-pn {
  padding: 10px 40px 15px 40px;
}

@media (max-width: 991.98px) {
  .cookie-modal-pn {
    padding: 10px;
  }

  #cookieconsent .com-div-md {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .modal-open .modal .modal-dialog {
    max-width: 80%;
    margin: 0 auto;
  }

  .modal-open #cookieconsent .modal-dialog {
    max-width: 90%;
  }

  .modal-open .modal .modal-dialog .blog-full .blog-image > a {
    height: 280px;
  }
}

@media (max-width: 767.98px) {
  .modal-open .modal .modal-dialog {
    max-width: calc(100% - 1.5rem);
    margin-left: auto;
    margin-right: auto;
  }

  #cookieconsent .cookies-accept button {
    width: 100%;
  }
}

.com-div-md {
  background: #fff;
  padding-top: 0;
  padding-bottom: 25px;
}

.user-icon {
  font-size: 40px;
}

.login-modal-pn {
  padding: 10px 40px 15px 40px;
}

.login-modal-pn .form-control {
  font-size: 15px;
  height: 45px;
  margin-bottom: 10px;
}

@media (max-width: 575.98px) {
  .login-modal-pn {
    padding: 10px 20px 15px 20px;
  }
}

.modal.fade.show {
  backdrop-filter: blur(5px);
}

@media (max-width: 1100px) {
  .search-wrapper {
    width: 200px;
  }
}

@media (max-width: 1100px) {
  .slicknav_btn.slicknav_open:before,
  .slicknav_btn.slicknav_collapsed:before,
  .search-wrapper,
  .header_menu .navbar.navbar-default a.cart-icon {
    display: none !important;
  }
}

.modal-document p {
  font-size: 92%;
}

.modal-document strong {
  color: var(--color-black);
}

.modal-document h2 {
  font-size: 19px;
  margin-top: 1.5rem;
  margin-bottom: 0.2rem;
}

.modal-document h3 {
  font-size: 17px;
  margin-top: 1.5rem;
  margin-bottom: 0.2rem;
}

.modal-document ul {
  list-style-type: disc;
  padding-left: 1rem !important;
  margin-bottom: 0;
  padding-bottom: 0;
}

.modal-document ul li {
  display: list-item;
  margin-bottom: 0.5rem;
  font-size: 92%;
  color: var(--body-color);
}

/* Tabulky v dokumentech – vzhled převzatý z výpisu přihlášek k aktivní účasti (account.html?tab=active) */
.modal-document table {
  width: 100%;
  margin-bottom: 1rem;
  border-collapse: collapse;
}

.modal-document table th,
.modal-document table td {
  color: var(--body-color);
  font-size: var(--font-size-xl);
  line-height: var(--bs-body-line-height);
  padding: 0.5rem 0.75rem;
  vertical-align: top;
  border-bottom: 1px solid var(--color-grey-8);
  transition: all ease-in-out 0.3s;
}

.modal-document table thead th {
  font-weight: 600;
}

.modal-document table > tbody tr:nth-child(odd) td {
  background: #fff;
}

.modal-document table > tbody tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.015);
}

.modal-document table > tbody tr:hover td {
  background: var(--main-color-light-03) !important;
  transition: all ease-in-out 0s;
}

.com-div-md-2 {
  background: #fff;
  padding: 25px;
}

@media (max-width: 399.98px) {
  .com-div-md-2 {
    padding: 0px;
  }
}

.com-div-md-2 ul.list-group,
.com-div-md-3 ul.list-group {
  list-style-type: disc;
  padding-left: 2rem !important;
  margin-bottom: 0;
  padding-bottom: 0;
}

.com-div-md-2 ul.list-group li,
.com-div-md-3 ul.list-group li {
  display: list-item;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.com-div-md-2 ul.list-group li:last-child,
.com-div-md-3 ul.list-group li:last-child {
  margin-bottom: 0;
}

.com-div-md-3 table.user-list-applications td {
  font-size: 14px;
}

.com-div-md-3 table.user-list-applications > tbody tr:first-child td {
  border-top: 1px solid #cccccc80;
}

.com-div-md-3 table.user-list-applications > tbody tr td:first-child {
  width: 45%;
}

.modal .modal-content {
  max-height: calc(
    var(--app-viewport-height, 100vh) -
      var(--mobile-modal-margin-top, var(--bs-modal-margin)) -
      var(--mobile-modal-margin-bottom, var(--bs-modal-margin))
  );
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal .modal-body {
  overflow-y: auto;
  padding-top: 0;
}

#modalLoading .modal-body {
  padding-top: calc(var(--bs-modal-padding) + 25px);
}

.modal .modal-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: var(--bs-modal-bg);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.modal .modal-header.modal-header-close-only {
  padding: 0.75rem 0.75rem 0.25rem;
}

.modal .btn-close,
.modal .modal-btn-close,
.modal .modal-btn-close-2,
.modal .modal-btn-close-header,
.modal .auth-entry__back,
.offcanvas .btn-close {
  --bs-btn-close-opacity: 1;
  --bs-btn-close-hover-opacity: 1;
  padding: 0.45rem;
  background-size: 0.68rem;
  margin: 0;
  border-radius: 50%;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
  transition:
    transform 0.12s ease,
    background-color 0.12s ease,
    opacity 0.12s ease;
}

/* The arrow glyph fills less of its viewBox than the close cross, so it needs a
   slightly larger box to read at the same optical size. */
.modal .auth-entry__back {
  background-size: 0.9rem;
}

.modal .btn-close:focus,
.modal .modal-btn-close:focus,
.modal .modal-btn-close-2:focus,
.modal .modal-btn-close-header:focus,
.modal .auth-entry__back:focus,
.offcanvas .btn-close:focus {
  box-shadow: none;
}

.modal .btn-close:hover,
.modal .modal-btn-close:hover,
.modal .modal-btn-close-2:hover,
.modal .modal-btn-close-header:hover,
.modal .auth-entry__back:hover,
.offcanvas .btn-close:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

.modal .btn-close:active,
.modal .modal-btn-close:active,
.modal .modal-btn-close-2:active,
.modal .modal-btn-close-header:active,
.modal .auth-entry__back:active,
.offcanvas .btn-close:active {
  transform: translate3d(0, 0, 0) scale(0.86) !important;
  background-color: rgba(0, 0, 0, 0.1);
  transition: none !important;
}

/*
html, body.modal-open {
	overflow-y: hidden !important;
}
*/

/* =============================================================================
	Layout: Price panel in registration
============================================================================= */
.price-panel {
  background: var(--main-color-light-03) !important;
  border-color: var(--main-color-light-02) !important;
}

.price-panel h3 span {
  color: var(--main-color) !important;
}

/* =============================================================================
	Layout: Cookies
============================================================================= */
#cb-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 5;
  border-radius: 0;
  border: 0;
  display: none;
  background-color: var(--main-color-dark);
  background-image: url("../img/bg/cookies-bg.svg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 14% auto;
  background-position: bottom left;
  box-shadow: 0 0 2px 2px rgba(68, 68, 68, 0.2);
}

#cb-cookie-banner .container .row div:nth-child(2) > div {
  padding-left: 5rem;
}

#cb-cookie-banner h4 {
  color: #fff;
  font-size: 20px;
}

#cb-cookie-banner p {
  color: #cccccc;
  font-size: 15px;
}

#cb-cookie-banner .nav-link {
  color: #fff;
}

#cb-cookie-banner .nav-link i:before {
  transition: all 0.35s ease-out;
  display: inline-block;
}

#cb-cookie-banner .nav-link:not(.collapsed) i:before {
  -ms-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

#cb-cookie-banner ol.ol-counter li {
  color: #cccccc;
  text-align: left;
  font-size: 14px;
}

#cb-cookie-banner .cookies-text-bold {
  font-weight: 500;
  color: #fff;
}

#cb-cookie-banner ol.ol-counter li span:first-child {
  color: var(--main-light-color-02);
  font-size: 15px;
}

#cb-cookie-banner .cookies-details {
  max-height: 32vh;
}

#cb-cookie-banner .sm-txt {
  font-size: 14px;
}

#cb-cookie-banner .hover-underline {
  color: #fff;
}

ol.ol-counter {
  counter-reset: numList;
  list-style: none;
  padding-left: 30px !important;
}

ol.ol-counter li {
  position: relative;
}

ol.ol-counter li:before {
  counter-increment: numList;
  content: counter(numList);

  float: left;
  position: absolute;
  left: -30px;

  font-weight: 500;
  font-size: 13px;
  text-align: center;
  color: #fff;
  line-height: 22px;

  width: 22px;
  height: 22px;
  background: var(--main-color);

  -moz-border-radius: 999px;
  border-radius: 999px;
}

@media (max-width: 1919.98px) {
  #cb-cookie-banner {
    background: var(--color-krouzky-06);
  }
}

@media (max-width: 1399.98px) {
  #cb-cookie-banner .container .row div:nth-child(2) > div {
    padding-left: 0;
  }

  #cb-cookie-banner p {
    font-size: 13px;
  }
}

@media (min-width: 992px) {
  #cb-cookie-banner .cookies-buttons .bosorg-btn,
  #cb-cookie-banner .cookies-buttons .bosorg-btn-white {
    white-space: nowrap;
    padding-left: 12px;
    padding-right: 12px;
  }
}

#cookieconsent p,
#cookieconsent label {
  font-size: 15px;
}

#cookieconsent .modal-dialog {
  margin-top: var(--bs-modal-margin);
  margin-bottom: var(--bs-modal-margin);
}

#cookieconsent .modal-cookies-content {
  max-height: 60vh;
  overflow-y: auto;
  padding-left: 1rem;
  margin-left: -1rem;
}

@media (max-width: 767.98px) {
  #cookieconsent .modal-cookies-content {
    max-height: 40vh;
    overflow-y: scroll;
  }
}

/* =============================================================================
	CSS: Hover Animation
============================================================================= */
.hover-underline,
.hover-underline-default,
.hover-underline-orange {
  display: inline-block;
  position: relative;
}

.hover-underline::after,
.hover-underline-default::after,
.hover-underline-orange::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #fff;
  transform-origin: bottom center;
  transition: transform 0.25s ease-out;
}

.hover-underline-default::after {
  background-color: var(--a-hover-color);
}

.hover-underline-orange::after {
  background-color: var(--color-orange);
}

.hover-underline:hover::after,
.hover-underline-default:hover::after,
.hover-underline-orange:hover::after {
  transform: scaleX(1);
  transform-origin: bottom center;
}

@media (max-width: 767.98px) {
  .hover-underline,
  .hover-underline-default,
  .hover-underline-orange {
    display: inline;
    position: relative;
  }
}

/* =============================================================================
	Layout: Registration form CSS
============================================================================= */
.registration-login-box {
  background-color: var(--color-light-2-blue);
}

.pass-progress {
  height: 5px;
  display: none;
}

.pass-eye .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: var(--bs-border-radius) !important;
  border-bottom-right-radius: var(--bs-border-radius) !important;
  height: 38px;
  background-color: #fff;
  border-color: var(--input-border-color);
}

.pass-eye .btn:hover {
  background-color: var(--color-blue);
  border-color: var(--input-border-color);
}

.application .select2-container .select2-selection--single,
.application .select2-container .select2-selection--multiple {
  height: 38px !important;
  min-height: 38px !important;
  padding: 7px 10px;
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--input-border-color);
}

.application
  .select2-container
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 22px !important;
  margin-top: 0 !important;
  overflow: hidden;
  padding-right: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.application .select2-container .select2-selection__arrow {
  top: 6px;
}

.application .no-clear .select2-container .select2-selection__clear {
  display: none;
}

.was-validated .custom-select:invalid + .select2 .select2-selection {
  border-color: #dc3545 !important;
}
.was-validated .custom-select:valid + .select2 .select2-selection {
  border-color: #28a745 !important;
}
*:focus {
  outline: 0px;
}

.select2-smaller
  .select2-container
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 22px !important;
  margin-top: 0 !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered,
.select2-container--default
  .select2-selection--multiple
  .select2-selection__rendered,
.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice,
.select2-container--default
  .select2-results__option--selected {
  color: var(--font-color-basic) !important;
  font-weight: 400 !important;
}

@media (max-width: 991.98px) {
  .registration-login-box {
    background-color: transparent !important;
  }
}

.modal .alert p {
  margin: 0;
}

form#verify_code input {
  font-weight: bold !important;
}

/* =============================================================================
	Layout: Section Camp
============================================================================= */
.gallery-wrap .card {
  border: solid 1px #eee;
  box-shadow: 0 0px 30px #00000012;
  border-radius: 10px;
  transition: all 0.5s;
}

.gallery-wrap .card:hover {
  border: solid 1px var(--main-light-color-03);
  transition: all ease-in-out 0.3s;
}

.gallery-wrap .card:hover .gallery-card-image img,
.gallery-wrap .card:hover .gallery-card-logo img {
  filter: brightness(1.12);
}

.gallery-wrap h1 {
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  font-size: 32px;
}

.gallery-wrap .card h5 {
  font-weight: 700;
  font-family: "Raleway", sans-serif;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.gallery-wrap .row {
  margin-bottom: 40px;
}

.gallery-wrap .card p {
  font-size: 15px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.gallery-wrap .gallery-card-image,
.gallery-wrap .gallery-card-logo {
  overflow: hidden;
  transition: all 0.5s;
  border-radius: 10px;
  height: 11rem;
}

.gallery-wrap .card .gallery-card-image img {
  transition: all 0.5s;
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/*
.gallery-wrap .card:hover .gallery-card-image img {
  transform: scale(1.1);
  transition: all 0.5s;
}
*/

.gallery-wrap .card .gallery-card-logo picture {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.gallery-wrap .card .gallery-card-logo img {
  transition: all 0.5s;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.courses-list .gallery-wrap .action-partner-text-list {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  justify-content: center;
  list-style: none;
  margin: 0.75rem auto 0;
  max-width: 900px;
  padding: 0;
  padding-left: 0;
}

.courses-list .gallery-wrap .action-partner-text-list li {
  background: transparent;
  box-shadow: none;
  color: #4b5563;
  display: inline-flex;
  font-size: 1.05rem;
  font-weight: 600;
  list-style: none;
  list-style-type: none;
  line-height: 1.35;
  margin-bottom: 0;
  padding: 0;
  position: relative;
}

.courses-list .gallery-wrap .action-partner-document-list {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 1rem auto 0;
}

.courses-list .gallery-wrap .action-partner-document-list a {
  align-items: center;
  color: var(--main-color);
  display: inline-flex;
  font-weight: 600;
  gap: 0.45rem;
  line-height: 1.35;
}

.courses-list .gallery-wrap .action-partner-document-list a:hover,
.courses-list .gallery-wrap .action-partner-document-list a:focus {
  color: var(--main-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.courses-list .gallery-wrap .action-partner-document-list i {
  font-size: 1.15rem;
}

.account-unsaved-bar {
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  transform: translateY(110%);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1050;
}

.account-unsaved-bar.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.account-unsaved-bar-inner {
  align-items: center;
  background: #ffffff;
  border-top: 1px solid var(--border-grey);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
  display: flex;
  gap: 1rem;
  justify-content: center;
  padding: 0.75rem 1rem;
}

.account-unsaved-text {
  color: var(--font-color-basic);
  font-size: var(--font-size-xl);
  font-weight: 600;
}

.account-unsaved-modal .modal-header {
  border-bottom: 0;
  justify-content: space-between;
}

.account-unsaved-modal .modal-title {
  text-align: left;
}

.account-unsaved-modal .modal-body {
  padding-top: var(--bs-modal-padding);
}

.account-unsaved-modal .modal-footer {
  border-top: 0;
  justify-content: center;
}

.account-unsaved-modal-actions {
  gap: 0.75rem;
}

@media (max-width: 575.98px) {
  .account-unsaved-bar-inner {
    align-items: stretch;
    flex-direction: column;
    gap: 0.6rem;
    text-align: center;
  }
}

.account-list-table,
.account-list-table th,
.account-list-table td {
  font-size: var(--font-size-xl);
}

.account-list-table > tbody > tr > th {
  vertical-align: middle;
  font-weight: 500;
  color: var(--font-color-basic);
  transition: all ease-in-out 0.3s;
}

.account-author-table {
  table-layout: fixed;
}

.account-clickable-row {
  cursor: pointer;
}

.account-clickable-row:focus {
  outline: 2px solid var(--main-color);
  outline-offset: -2px;
}

table.tb-charges > tbody tr:nth-child(even) th {
  background: rgba(0, 0, 0, 0.015);
}

table.tb-charges > tbody tr:nth-child(odd) th {
  background: #fff;
}

table.tb-charges > tbody tr:hover th {
  background: var(--main-color-light-03) !important;
  transition: all ease-in-out 0s;
}

/* Stavový badge – barvy převzaté z redakčního systému */
.account-status-badge {
  color: #fff;
  font-weight: 600;
}

/* V hlavičce detailu badge mírně nadzvednout k nadpisu */
.align-items-baseline > .account-status-badge {
  position: relative;
  top: -3px;
}

/* Dvojice popisek/hodnota; dva sloupce řeší .account-kv-2 (sdílená mřížka s lícujícími řádky) */
.account-kv {
  font-size: var(--font-size-xl);
}

.account-kv-item {
  display: grid;
  grid-template-columns: 8rem 1fr;
  align-items: center;
  gap: 0.25rem 1rem;
  padding: 8px 12px;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  transition: background ease-in-out 0.3s;
}

.account-kv-item.is-alt {
  background: rgba(0, 0, 0, 0.015);
}

.account-kv-item:hover {
  background: var(--main-color-light-03) !important;
  transition: background ease-in-out 0s;
}

.account-kv-label {
  font-weight: 500;
  color: var(--font-color-basic);
}

.account-kv-value {
  word-break: break-word;
}

/* Tabulka objednaných položek – fixní šířky sloupců a standardní řádkování */
.account-items-table {
  table-layout: fixed;
  width: 100%;
}

table.tb-charges.account-items-table td,
table.tb-charges.account-items-table th {
  line-height: var(--bs-body-line-height) !important;
  vertical-align: top !important;
}

/* Datum / Cena / Počet / Celkem – fixní šířka */
.account-items-table th:nth-child(4),
.account-items-table td:nth-child(4) {
  width: 8rem;
}

.account-items-table th:nth-child(5),
.account-items-table td:nth-child(5) {
  width: 7rem;
}

.account-items-table th:nth-child(6),
.account-items-table td:nth-child(6) {
  width: 5rem;
}

.account-items-table th:nth-child(7),
.account-items-table td:nth-child(7) {
  width: 7.5rem;
}

/* Souhrnné/součtové řádky tabulek v detailu – méně tučný řez */
.account-total-row td {
  font-weight: 600;
}

/* Desktop: dva sloupce ve sdílené mřížce – levý se naplní celý, pak pravý; řádky lícují */
@media (min-width: 992px) {
  .account-kv-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--kv-rows), auto);
    column-gap: 3rem;
  }
}

/* Sbalitelné sekce detailu přihlášky */
.account-collapse-toggle {
  color: var(--main-font-color);
  text-decoration: none;
  cursor: pointer;
}

.account-collapse-toggle:hover,
.account-collapse-toggle:focus {
  color: var(--main-color);
  text-decoration: none;
}

.account-collapse-icon {
  color: var(--main-color);
  transition: transform 0.25s ease-in-out;
}

.account-collapse-toggle:not(.collapsed) .account-collapse-icon {
  transform: rotate(180deg);
}

.account-status-badge.is-info {
  background-color: #29b6f6;
}

.account-status-badge.is-success {
  background-color: #029b17;
}

.account-status-badge.is-warning {
  background-color: #ffc107;
  color: #2b2b2b;
}

.account-status-badge.is-danger {
  background-color: #ff0018;
}

.account-status-badge.is-default {
  background-color: #666;
}

.account-table-truncate {
  display: inline-block;
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

.account-active-table {
  table-layout: fixed;
  width: 100%;
}

.account-active-table th:nth-child(1),
.account-active-table td:nth-child(1) {
  width: 18%;
}

.account-active-table th:nth-child(2),
.account-active-table td:nth-child(2) {
  width: 11%;
}

.account-active-table th:nth-child(3),
.account-active-table td:nth-child(3) {
  width: 22%;
}

.account-active-table th:nth-child(4),
.account-active-table td:nth-child(4) {
  width: 26%;
}

.account-active-table th:nth-child(5),
.account-active-table td:nth-child(5) {
  width: 15%;
}

.account-active-table th:nth-child(6),
.account-active-table td:nth-child(6) {
  width: 8%;
}

.account-active-table .account-table-truncate {
  display: block;
  max-width: 100%;
}

@media (max-width: 480px) {
  .gallery-wrap h1 {
    font-size: 29px;
  }
}

@media (min-width: 768px) {
  .bootstrap-grid .row-cols-md-7 > * {
    flex: 0 0 auto;
    width: 14.285714%;
  }

  .bootstrap-grid .row-cols-md-8 > * {
    flex: 0 0 auto;
    width: 12.5%;
  }

  .bootstrap-grid .row-cols-md-9 > * {
    flex: 0 0 auto;
    width: 11.111111%;
  }

  .bootstrap-grid .row-cols-md-10 > * {
    flex: 0 0 auto;
    width: 10%;
  }

  .bootstrap-grid .row-cols-md-11 > * {
    flex: 0 0 auto;
    width: 9.090909%;
  }

  .bootstrap-grid .row-cols-md-12 > * {
    flex: 0 0 auto;
    width: 8.333333%;
  }
}
/* Keyboard accessibility */
.webbos-skip-link {
  background: #fff;
  border-radius: var(--bs-border-radius);
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .2);
  color: #173a6b;
  left: 1rem;
  padding: .75rem 1rem;
  position: fixed;
  text-decoration: none;
  top: 1rem;
  transform: translateY(calc(-100% - 2rem));
  transition: transform .15s ease;
  z-index: 2000;
}

.webbos-skip-link:focus {
  outline: 3px solid #f4a024;
  outline-offset: 2px;
  transform: translateY(0);
}

/* =============================================================================
	Layout: Newsletter (informujte me / odhlaseni)
============================================================================= */
.newsletter-interest-card {
  background: #fff;
  border: 1px solid rgba(31, 77, 141, .08);
  border-radius: var(--bs-border-radius);
}

.newsletter-interest-aside__icon {
  align-items: center;
  background: var(--webbos-primary-soft, #e8f0fa);
  border-radius: 50%;
  color: var(--webbos-primary, #1f4d8d);
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
}

.newsletter-interest-intro {
  color: #536174;
  font-size: 1rem;
  line-height: 1.5;
}

.newsletter-interest-alert {
  border-radius: var(--bs-border-radius);
  margin-bottom: 1.5rem;
}

.newsletter-confirmation-card {
  margin: 0 auto;
  max-width: 720px;
}

.newsletter-confirmation-card__icon {
  font-size: 1.8rem;
  height: 76px;
  margin-bottom: 1.25rem;
  width: 76px;
}

.newsletter-confirmation-card h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.newsletter-interest-card {
  padding: 2rem;
}

.newsletter-interest-section-title {
  align-items: center;
  display: flex;
  gap: .5rem;
  margin-bottom: 1rem;
  margin-top: 0;
}

.newsletter-interest-section-title > span {
  background: var(--main-color);
  flex: 0 0 3px;
  height: 1em;
  transform: translateY(1px);
}

.newsletter-interest-section-title h2 {
  color: var(--color-black);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}

.newsletter-interest-form {
  font-family: Barlow, sans-serif;
}

.newsletter-interest-form .form-label {
  color: #494f5c;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: .25rem;
}

.newsletter-interest-form .form-control,
.newsletter-interest-form .form-select {
  background-color: #fff;
  border: 1px solid #c1c1c1;
  border-radius: var(--bs-border-radius);
  box-shadow: none;
  color: #494f5c;
  font-size: 15px;
  font-weight: 400;
  height: 38px !important;
  line-height: 1.5;
  min-height: 0;
  padding: 7px 12px !important;
}

.newsletter-interest-form .form-control:focus,
.newsletter-interest-form .form-select:focus {
  border-color: var(--main-color) !important;
  box-shadow: none;
}

.newsletter-interest-form .select2-container {
  color: #494f5c;
  display: block;
  width: 100% !important;
}

.newsletter-interest-form .select2-container .select2-selection--single {
  border: 1px solid #c1c1c1 !important;
  border-radius: var(--bs-border-radius);
  height: 38px !important;
  min-height: 38px !important;
  padding: 7px 10px;
}

.newsletter-interest-form .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 22px !important;
  margin-top: 0 !important;
  overflow: hidden;
  padding-right: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.newsletter-interest-form .select2-container .select2-selection--single .select2-selection__arrow {
  top: 6px;
}

.newsletter-interest-form .select2-container--focus .select2-selection--single,
.newsletter-interest-form .select2-container--open .select2-selection--single {
  border-color: var(--main-color) !important;
}

.newsletter-expertise-dropdown .select2-results,
.newsletter-expertise-dropdown .select2-results__options,
.newsletter-expertise-dropdown .select2-results__option {
  box-sizing: border-box;
  max-width: none;
  width: 100% !important;
}

.newsletter-expertise-dropdown .select2-search__field:focus {
  border-color: var(--main-color) !important;
  box-shadow: none !important;
}

.newsletter-expertise-dropdown .select2-search--dropdown:focus-within::after {
  color: var(--main-color) !important;
}

.newsletter-expertise-dropdown .select2-results__option {
  display: block;
  padding: 8px 12px;
}

.newsletter-expertise-dropdown .newsletter-expertise-result--main {
  font-weight: 600;
  margin-top: 2px;
}

/* The main expertise cannot be picked again among the secondary ones - it stays in the list
   (so the user sees where it belongs) but is muted and refuses the click. */
.select2-results__option--disabled,
.select2-results__option[aria-disabled="true"] {
  color: var(--color-grey-5) !important;
  cursor: not-allowed !important;
}

.select2-results__option--disabled.select2-results__option--highlighted,
.select2-results__option[aria-disabled="true"].select2-results__option--highlighted {
  background-color: transparent !important;
  color: var(--color-grey-5) !important;
}

.newsletter-expertise-dropdown .newsletter-expertise-result--child {
  padding-left: 22px;
}

.newsletter-expertise-child-content {
  align-items: center;
  display: flex;
  gap: 0.45rem;
  min-width: 0;
}

.newsletter-expertise-child-icon {
  align-items: center;
  color: inherit;
  display: inline-flex;
  flex: 0 0 1em;
  font-size: 0.78em;
  justify-content: center;
  line-height: 1;
  opacity: 0.65;
}

.newsletter-interest-divider {
  margin: 2rem 0 0 0;
}

.newsletter-interest-aside {
  background: var(--webbos-info-surface, linear-gradient(155deg, #eef5fd 0%, #e6f0fb 100%));
  border-radius: var(--bs-border-radius);
  padding: 2rem 1.6rem;
  text-align: center;
}

.newsletter-interest-aside__icon {
  background: rgba(255, 255, 255, .72);
  font-size: 1.65rem;
  height: 72px;
  width: 72px;
}

.newsletter-interest-aside h2 {
  color: #1e2a3b;
  font-size: 1.18rem;
  font-weight: 700;
  margin: 1.1rem 0 1.1rem;
}

.newsletter-interest-aside ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.newsletter-interest-aside li {
  align-items: center;
  color: #2c3a4c;
  display: grid;
  font-size: .95rem;
  font-weight: 500;
  gap: .9rem;
  grid-template-columns: 30px 1fr;
  line-height: 1.35;
}

.newsletter-interest-aside li + li {
  margin-top: 1.35rem;
}

.newsletter-interest-aside li i {
  color: var(--webbos-primary, #1f4d8d);
  font-size: 1.4rem;
  text-align: center;
}

.newsletter-interest-consent {
  margin-top: 1.8rem;
}

.newsletter-interest-consent .form-check-label {
  color: #494f5c;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 0;
}

.newsletter-interest-consent .form-check-input {
  border-color: #c1c1c1;
  cursor: pointer;
}

.newsletter-interest-consent p {
  color: #5d6878;
  font-size: .9rem;
  margin: .8rem 0 1.4rem;
}

.newsletter-interest-submit {
  min-width: 260px;
}

.newsletter-interest-hp {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
}

@media (min-width: 992px) {
  .newsletter-interest-main {
    flex: 0 0 72%;
    width: 72%;
  }

  .newsletter-interest-sidebar {
    flex: 0 0 28%;
    width: 28%;
  }
}

@media (max-width: 991.98px) {
  .newsletter-interest-card {
    padding: 1.5rem;
  }

  .newsletter-interest-aside {
    padding: 1.6rem;
  }

  .newsletter-interest-aside ul {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
  }

  .newsletter-interest-aside li + li {
    margin-top: 0;
  }
}

@media (max-width: 767.98px) {
  .newsletter-interest-aside ul {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .newsletter-interest-page {
    padding-bottom: 2rem !important;
    padding-top: 1.5rem !important;
  }

  .newsletter-interest-card {
    padding: 1.15rem;
  }

  .newsletter-interest-submit {
    min-width: 0;
    width: 100%;
  }
}

/* Multiple select (secondary specializations) inside application forms: the tags wrap,
   so the box grows with them instead of keeping the fixed single-select height. */
.application .select2-container.select2-multiple-box .select2-selection--multiple {
  height: auto !important;
  min-height: 38px !important;
  padding: 1px 28px 4px 10px;
}

/* =============================================================================
	Login modal - e-mail first flow (include/ajax-modals.php, main.js)
============================================================================= */
.auth-entry-modal .modal-content {
  border: 0;
}

.auth-entry-modal .modal-body {
  padding: 0 2rem 2rem;
}

.auth-entry__brand {
  margin-bottom: 1.25rem;
}

.auth-entry__brand img {
  height: 34px;
  width: auto;
}

.auth-entry__title {
  margin-bottom: 0.5rem;
  color: var(--font-color-basic);
}

.auth-entry__copy {
  margin-bottom: 1.5rem;
  color: var(--color-grey-4);
  font-size: 15px;
}

.auth-entry__copy strong {
  color: var(--font-color-basic);
  font-weight: 600;
}

.auth-entry__privacy {
  color: var(--color-grey-4);
  font-size: 13px;
  line-height: 1.4;
}

/* Text-like buttons ("Zapomněli jste heslo?", "pošlete nový kód", "Použít jiný účet") */
.auth-entry__link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--main-color);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-entry__link:hover,
.auth-entry__link:focus {
  color: var(--main-color-dark);
}

.auth-entry__link:disabled {
  color: var(--color-grey-4);
  text-decoration: none;
}

.auth-entry__resend {
  color: var(--font-color-basic);
  font-size: 15px;
}

.auth-entry__resend .auth-entry__link {
  font-weight: 600;
}

/* Back arrow in the modal header - same construction as Bootstrap's .btn-close (glyph as a
   background image); size, hover and press feedback are shared with the close cross in the
   ".modal .btn-close, ... .modal .auth-entry__back" rules above. */
.auth-entry__back {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  border: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='3'%3e%3cpath d='M4 16h26M15 28 3.7 16.7a1 1 0 0 1 0-1.4L15 4'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
}

/* Six-digit code, same construction as in the cc project: tabular digits so every code takes the
   same width, letter-spacing draws the "slots" and the box is exactly as wide as the code.

   Barlow has proportional digits by default ("1" is 40 % narrower than "0"); tabular-nums makes
   every digit 0.545em wide. Width = six digits, six letter-spacings (the last one trails the
   sixth digit) and the paddings. The right padding is smaller by the trailing spacing so the
   code sits optically symmetric. The placeholder uses the figure dash (U+2012), which has the
   digit width - the dashes therefore land exactly where the digits will. */
input.auth-entry__code {
  display: block;
  width: calc(6 * (0.545em + 1rem) + 22px + 6px) !important;
  height: 52px !important;
  margin: 0 auto;
  padding: 7px 6px 7px 22px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1rem;
  text-align: left;
}

/* The global "*::placeholder" shrinks placeholders to 16px - the dashes must keep the digit size
   and stay visible while typing, otherwise the slots would not line up with the code. */
input.auth-entry__code::placeholder,
input.auth-entry__code:focus::placeholder {
  color: var(--input-border-color) !important;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  opacity: 1;
}

.auth-entry-modal .btn1:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Loading state of a submit button (main.js authButtonLoading, same as in cc): grey, disabled,
   three pulsing dots instead of the label. */
.form-submit-button--loading,
.form-submit-button--loading:hover,
.form-submit-button--loading:focus,
.form-submit-button--loading:active,
.form-submit-button--loading:disabled {
  border-color: var(--input-border-color) !important;
  background: var(--input-border-color) !important;
  color: var(--color-grey-2) !important;
  cursor: wait !important;
  opacity: 1 !important;
  text-decoration: none !important;
}

.form-submit-button--loading::before {
  display: none !important;
}

.form-submit-button__loader {
  display: inline-flex;
  min-height: 1em;
  align-items: center;
  justify-content: center;
  gap: 4px;
  vertical-align: middle;
}

.form-submit-button__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: form-submit-button-dot 1s ease-in-out infinite;
  animation-delay: -0.3s;
}

.form-submit-button__dot:nth-child(2) {
  animation-delay: -0.15s;
}

.form-submit-button__dot:nth-child(3) {
  animation-delay: 0s;
}

@keyframes form-submit-button-dot {
  0%,
  60%,
  100% {
    opacity: 0.35;
  }

  30% {
    opacity: 1;
  }
}

/* ".bosorg-btn { display: inline-block }" is declared after ".d-none-soft" and would win -
   the code step hides its submit button until the first digit is typed. */
.auth-entry-modal .btn1.d-none-soft {
  display: none;
}

/* Floating labels (Bootstrap .form-floating) - the global input rules force 47px height and
   7px padding with !important, so the floating variant is restored here with the same weight. */
.auth-entry-modal .form-floating > .form-control {
  height: 52px !important;
  min-height: 52px !important;
  padding: 1rem 0.95rem !important;
  line-height: 1.25;
}

.auth-entry-modal .form-floating > .form-control:focus,
.auth-entry-modal .form-floating > .form-control:not(:placeholder-shown) {
  padding-top: 1.45rem !important;
  padding-bottom: 0.4rem !important;
}

.auth-entry-modal .form-floating > label {
  margin: 0;
  padding: 0.95rem 0.95rem;
  color: var(--color-grey-4);
  font-size: 15px;
  line-height: 1.25;
}

.auth-entry-modal .form-floating > .form-control:focus ~ label,
.auth-entry-modal .form-floating > .form-control:not(:placeholder-shown) ~ label,
.auth-entry-modal .form-floating > .form-control:-webkit-autofill ~ label {
  transform: scale(0.8) translateY(-0.55rem) translateX(0.15rem);
  color: var(--color-grey-4);
}

/* The label doubles as placeholder - the real placeholder only keeps :placeholder-shown working */
.auth-entry-modal .form-floating > .form-control::placeholder {
  color: transparent !important;
}

/* Inside an input group (password + eye) the feedback is a sibling of .form-floating, not of the
   input, so Bootstrap's "input:invalid ~ .invalid-feedback" never matches - bridge it with :has() */
.auth-entry-modal .was-validated .form-floating:has(.form-control:invalid) ~ .invalid-feedback,
.auth-entry-modal .form-floating:has(.form-control.is-invalid) ~ .invalid-feedback,
.auth-entry-modal .was-validated .form-floating:has(.form-control:valid) ~ .valid-feedback {
  display: block;
}

/* Optional switches (remember me, newsletter) are not validated - no green/blue label after submit */
.auth-entry-modal .was-validated .form-check-input.no-validation:valid ~ .form-check-label,
.auth-entry-modal .was-validated .form-check-input.no-validation:valid {
  color: var(--font-color-basic);
  border-color: var(--bs-border-color);
}

/* Bootstrap paints a background behind the shrunken label; keep it flush with the input */
.auth-entry-modal .form-floating > .form-control:focus ~ label::after,
.auth-entry-modal .form-floating > .form-control:not(:placeholder-shown) ~ label::after {
  background-color: transparent;
}

/* Password field: "Zobrazit / Skrýt" text button inside the floating field (as in cc).
   Bootstrap's validation icon would sit under the button, so this field never shows it. */
.auth-entry__password-entry > .form-control {
  padding-right: 92px !important;
  background-image: none !important;
}

.auth-entry__password-toggle {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  display: inline-flex;
  height: 34px;
  align-items: center;
  padding: 0 10px;
  border: 0;
  border-radius: var(--bs-border-radius);
  background: transparent;
  color: var(--font-color-basic);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-entry__password-toggle:hover,
.auth-entry__password-toggle:focus-visible {
  background: var(--main-color-light-03);
  color: var(--font-color-basic);
}

/* ---- Account form (third step) ---- */
.auth-entry__field-group {
  margin-bottom: 1.5rem;
}

.auth-entry__field-legend {
  margin: 0 0 0.6rem;
  color: var(--font-color-basic);
  font-size: 16px;
  font-weight: 600;
}

/* Fields in a stack join into one frame: the bottom border of one overlaps the top border of
   the next, radii stay only on the outer corners of the stack. */
.auth-entry__field-stack > .form-floating + .form-floating {
  margin-top: -1px;
}

.auth-entry__field-stack > .form-floating:not(:first-child) > .form-control {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.auth-entry__field-stack > .form-floating:not(:last-child) > .form-control {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* The active or invalid field must draw its whole frame above its neighbours */
.auth-entry__field-stack > .form-floating:focus-within,
.auth-entry__field-stack > .form-floating:hover,
.auth-entry-modal .was-validated .auth-entry__field-stack > .form-floating:has(.form-control:invalid) {
  z-index: 2;
}

/* Messages for stacked fields sit below the whole block (one under each input would split the
   shared frame). The order of the messages matches the order of the fields. */
.auth-entry-modal .was-validated .auth-entry__field-group:has(.auth-entry__field-stack > .form-floating:nth-child(1) .form-control:invalid) .auth-entry__field-errors > .invalid-feedback:nth-child(1),
.auth-entry-modal .was-validated .auth-entry__field-group:has(.auth-entry__field-stack > .form-floating:nth-child(2) .form-control:invalid) .auth-entry__field-errors > .invalid-feedback:nth-child(2) {
  display: block;
}

.auth-entry__password-hint {
  font-size: 13px;
}

/* Marketing e-mails: grey note with an opt-out box on the right */
.auth-entry__marketing {
  margin-bottom: 1.25rem;
  padding: 1rem;
  background: var(--color-light-2-blue);
}

.auth-entry__marketing-copy,
.auth-entry__marketing-label {
  margin: 0;
  color: var(--color-grey-2);
  font-size: 13px;
  line-height: 1.45;
}

.auth-entry__marketing-choice {
  margin-top: 0.5rem;
}

.auth-entry__marketing-input.form-check-input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  border-color: var(--color-grey-5);
  cursor: pointer;
}

.auth-entry__marketing-input.form-check-input:checked {
  border-color: var(--main-color);
  background-color: var(--main-color);
}

.auth-entry__marketing-input.form-check-input:focus {
  border-color: var(--main-color);
  box-shadow: none;
}

.auth-entry__terms {
  margin: 0 0 1.25rem;
  color: var(--color-grey-2);
  font-size: 13px;
  line-height: 1.45;
}

.auth-entry__terms strong {
  font-weight: 600;
}

/* The global "a" is inline-block and would jump to the next line as a whole - these links wrap with the text */
.auth-entry__terms-link {
  display: inline;
  color: var(--main-color) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

.auth-entry__password-progress {
  height: 5px;
}

/* Account-name field for the browser password manager: must stay rendered (no display:none,
   no type=hidden) but must not take up space - the global input height would otherwise apply. */
.auth-entry input.auth-entry__account-name {
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* ---- "Vítejte zpět": accounts known on this device ---- */
.auth-account-avatar {
  display: flex;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--auth-avatar-bg, var(--color-grey-6));
  color: var(--auth-avatar-fg, var(--font-color-basic));
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.auth-account-avatar--lg {
  width: 64px;
  height: 64px;
  font-size: 26px;
}

/* The global "ul li" is inline-block - the row would shrink to its content */
.auth-entry__device-list li {
  display: block;
  width: 100%;
}

.auth-entry__device-list li + li {
  margin-top: 0.25rem;
}

.auth-entry__device-button {
  padding: 0.7rem 0.75rem;
  border: 0;
  background: transparent;
}

.auth-entry__device-button:hover,
.auth-entry__device-button:focus-visible {
  background: var(--main-color-light-03);
}

.auth-entry__device-text {
  min-width: 0;
}

.auth-entry__device-name {
  color: var(--font-color-basic);
  font-weight: 600;
}

.auth-entry__device-meta {
  color: var(--color-grey-4);
  font-size: 13px;
}

/* Single known account: the date sits under the e-mail, above the button */
p.auth-entry__device-meta {
  margin: 0 0 1.5rem;
}

.auth-entry__device-chevron {
  color: var(--color-grey-4);
  font-size: 1.2rem;
  line-height: 1;
}

/* Twenty colour pairs for the avatars. Light background, dark letter. The order must never
   change - the index is derived from the e-mail and the user would see a different colour. */
.auth-account-avatar--01 { --auth-avatar-bg: #ffe3e3; --auth-avatar-fg: #9b1c1c; }
.auth-account-avatar--02 { --auth-avatar-bg: #ffe8d5; --auth-avatar-fg: #9a4a06; }
.auth-account-avatar--03 { --auth-avatar-bg: #fdeec4; --auth-avatar-fg: #7d5600; }
.auth-account-avatar--04 { --auth-avatar-bg: #f6f3c9; --auth-avatar-fg: #656100; }
.auth-account-avatar--05 { --auth-avatar-bg: #e8f4cd; --auth-avatar-fg: #4c6b12; }
.auth-account-avatar--06 { --auth-avatar-bg: #d9f2d9; --auth-avatar-fg: #1f6b32; }
.auth-account-avatar--07 { --auth-avatar-bg: #d2f3e4; --auth-avatar-fg: #14654a; }
.auth-account-avatar--08 { --auth-avatar-bg: #d0f1f0; --auth-avatar-fg: #0f6470; }
.auth-account-avatar--09 { --auth-avatar-bg: #d5eefb; --auth-avatar-fg: #0b5c85; }
.auth-account-avatar--10 { --auth-avatar-bg: #dbe9fd; --auth-avatar-fg: #14508f; }
.auth-account-avatar--11 { --auth-avatar-bg: #e0e5fb; --auth-avatar-fg: #2b3f9e; }
.auth-account-avatar--12 { --auth-avatar-bg: #e8e2fb; --auth-avatar-fg: #4a2f9c; }
.auth-account-avatar--13 { --auth-avatar-bg: #f1e0fa; --auth-avatar-fg: #6b2596; }
.auth-account-avatar--14 { --auth-avatar-bg: #fbe0f4; --auth-avatar-fg: #8f2078; }
.auth-account-avatar--15 { --auth-avatar-bg: #fde0ea; --auth-avatar-fg: #9b1745; }
.auth-account-avatar--16 { --auth-avatar-bg: #f5e3dc; --auth-avatar-fg: #7c3b26; }
.auth-account-avatar--17 { --auth-avatar-bg: #e6ecef; --auth-avatar-fg: #3c5563; }
.auth-account-avatar--18 { --auth-avatar-bg: #e2f0e0; --auth-avatar-fg: #3a6b2e; }
.auth-account-avatar--19 { --auth-avatar-bg: #efe7d8; --auth-avatar-fg: #6d5426; }
.auth-account-avatar--20 { --auth-avatar-bg: #dde6f7; --auth-avatar-fg: #2f4a7c; }

@media (max-width: 575.98px) {
  .auth-entry-modal .modal-body {
    padding: 0 1.15rem 1.35rem;
  }
}