:root { --color-white: #fff; --color-black: #000; --color-blue: #0071e3; --color-blueDark: #005cb9; --color-green: #008900; --color-red: #e30000; --color-666: #666; --color-777: #777; --color-999: #999; --color-AAA: #aaa; --color-BBB: #bbb; --color-CCC: #ccc; --color-DDD: #ddd; --color-D9D9D9: #d9d9d9; --color-F2F2F2: #f2f2f2; }

.font-big { font-size: 18px; }
.font-semibig {font-size: 16px;}
.font-small { font-size: 12px; }
.font-small2 { font-size: 13px; }
.font-bold { font-weight: 600; }
.font-italic { font-style: italic; }
.font-crossed { text-decoration: line-through; }

.color-white { color: var(--color-white); fill: var(--color-white); }
.color-black { color: var(--color-black); fill: var(--color-black); }
.color-blue { color: var(--color-blue); fill: var(--color-blue); }
.color-blueDark { color: var(--color-blueDark); fill: var(--color-blueDark); }
.color-green { color: var(--color-green); fill: var(--color-green); }
.color-red { color: var(--color-red); fill: var(--color-red); }
.color-666 { color: var(--color-666); fill: var(--color-666); }
.color-777 { color: var(--color-777); fill: var(--color-777); }
.color-999 { color: var(--color-999); fill: var(--color-999); }
.color-AAA { color: var(--color-AAA); fill: var(--color-AAA); }
.color-BBB { color: var(--color-BBB); fill: var(--color-BBB); }
.color-CCC { color: var(--color-CCC); fill: var(--color-CCC); }
.color-DDD { color: var(--color-DDD); fill: var(--color-DDD); }

.lnk, a.lnk { text-decoration: underline; cursor: pointer; text-underline-offset: 3px; }
.lnk2, a.lnk2 { text-decoration: none; cursor: pointer; text-underline-offset: 3px; }

.btn { display: inline-block; padding: 16px 32px; font-size: 14px; line-height: 16px; font-weight: 600; text-decoration: none; text-align: center; text-underline-offset: 3px; color: var(--color-black); background: var(--color-white); border: none; border-radius: 99px; cursor: pointer; user-select: none; }
.btn-wide { width: 100%; }
.btn-small { padding: 8px 16px; font-size: 12px; line-height: 14px; }
.btn-circle { padding: 8px !important; font-size: 0; line-height: 0; }
.btn-black { color: var(--color-white); fill: var(--color-white); background: var(--color-black); border: solid var(--color-white) 1px; }
.btn-blue { color: var(--color-white); fill: var(--color-white); background: var(--color-blue);
  &:hover { background: var(--color-blueDark); }
}
.btn-blue-outline { padding: 14px 30px; color: var(--color-blue); fill: var(--color-blue); border: solid var(--color-blue) 1px;
  &:hover { border-color: var(--color-blueDark); }
  &.btn-small { padding: 6px 14px; }
}
.btn-link { padding: 0 16px 0 0; color: var(--color-blue); fill: var(--color-blue); background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 11'><path fill-rule='evenodd' clip-rule='evenodd' d='M0.838357 10.3233L0 9.48493L4.32329 5.16164L0 0.838358L0.838357 0L6 5.16164L0.838357 10.3233Z' fill='%230071E3'/></svg>") right center no-repeat; background-size: 10px 11px;
  &:hover { color: var(--color-blueDark); }
}

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

.margin-top-0 { margin-top: 0 !important; }
.margin-top-1 { margin-top: 14px !important; }
.margin-top-2 { margin-top: 28px !important; }
.margin-top-3 { margin-top: 42px !important; }
.margin-top-4 { margin-top: 56px !important; }
.margin-top-5 { margin-top: 70px !important; }
.margin-bot-1 { margin-bottom: 14px !important; }
.margin-bot-2 { margin-bottom: 28px !important; }
.margin-left-1 { margin-left: 14px !important; }
.margin-left-0 { margin-left: 0 !important; }
.margin-right-1 { margin-right: 14px !important; }

.padding-top-0 { padding-top: 0 !important; }
.padding-top-1 { padding-top: 14px !important; }
.padding-top-2 { padding-top: 28px !important; }
.padding-bottom-1 { padding-bottom: 14px !important; }

.cursor-pointer { cursor: pointer; }

/* Formuláře */
.form-field { margin-top: 15px; }
.form-field-check { display: flex; align-items: baseline; gap: 5px;
  .form-label { cursor: pointer; }
  .form-check { flex: 0 0 16px; position: relative; top: 3px; cursor: pointer; }
}
.form-field-checkList {
  .form-label { display: flex; align-items: baseline; gap: 5px; cursor: pointer; }
  .form-check { flex: 0 0 16px; position: relative; top: 3px; cursor: pointer; }
}
.form-field-radio { display: flex; flex-direction: column;
  .form-check { display: flex; gap: 5px; margin-bottom: 5px; cursor: pointer; }
}
input[type="checkbox"] { appearance: none; background: var(--color-white) none center/contain no-repeat; width: 16px; height: 16px; margin: 0; border: solid var(--color-D9D9D9) 1px; cursor: pointer;
  &:checked { background: var(--color-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M4 12l5 5L20 7'/%3E%3C/svg%3E") center/14px no-repeat; border-color: var(--color-blue);
    &:disabled { background: var(--color-F2F2F2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='3'%3E%3Cpath d='M4 12l5 5L20 7'/%3E%3C/svg%3E") center/14px no-repeat; border-color: var(--color-D9D9D9); cursor: default; }
  }
  &:disabled { background: var(--color-F2F2F2); cursor: default; }
}
input[type="radio"] { appearance: none; background: var(--color-white) none center/contain no-repeat; width: 16px; height: 16px; border: solid var(--color-D9D9D9) 1px; cursor: pointer; border-radius: 50%;
  &:checked { background-color: var(--color-white); border: .42857142857142855em var(--color-blue) solid; }
}
input[type="number"] { -moz-appearance: textfield;
  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
}
.form-label { display: block; color: var(--color-777); }
.form-submit { margin-top: 15px; }
.form-input,
.form-select,
.form-textarea { width: 100%; max-width: 400px; padding: 16px; background-color: var(--color-white); border: solid var(--color-D9D9D9) 1px; border-radius: 5px;
  &:focus { border-color: var(--color-blue); outline: none; }
  &.input-validation-error { border-color: var(--color-red); }
  &[readonly] { color: var(--color-666); background: var(--color-F2F2F2); }
}
.form-req { color: var(--color-red); }
.form-err { display: none; margin-top: 15px; color: var(--color-red);
  &.active { display: block; }
}
.form-success { display: none; margin-top: 15px; color: var(--color-green);
  &.active { display: block; }
}
.field-validation-error { display: block; margin-top: 5px; color: var(--color-red); }
.validation-summary-errors { margin-top: 15px; color: var(--color-red); }
/*********/

/* Popup */
body.body-with-popup { overflow: hidden; }
.popup-bg { display: flex; justify-content: center; inset: 0; position: fixed; z-index: 999999999; left: 0; top: 0; width: 100%; height: 100%; padding: 30px; background-color: rgba(0,0,0,0.6); overflow: auto; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.popup { position: relative; margin: auto 0; background: var(--color-white); font-size: 14px; border-radius: 18px; }
.popup-main { padding: 0 30px 30px 30px; }
.popup-top { display: flex; align-items: flex-start; padding: 30px 30px 15px 30px; }
.popup-close { flex: 0 0 32px; order: 1; display: flex; align-items: center; justify-content: center; position: relative; top: -15px; right: -15px; width: 32px; height: 32px; background: var(--color-DDD); cursor: pointer; border: none; border-radius: 32px;
  svg { width: 16px; height: 16px; fill: var(--color-666); }
}
.popup-title { flex: 1; }
.popup iframe { width: 100%; height: 100%; }

.w400 .popup { width: 100%; max-width: 400px; }
.w500 .popup { width: 100%; max-width: 500px; }
.w600 .popup { width: 100%; max-width: 600px; }
.w700 .popup { width: 100%; max-width: 700px; }
.w800 .popup { width: 100%; max-width: 800px; }
.w900 .popup { width: 100%; max-width: 900px; }
.w1000 .popup { width: 100%; max-width: 1000px; }
.w1100 .popup { width: 100%; max-width: 1000px; }
.w1200 .popup { width: 100%; max-width: 1200px; }
.fullscreen .popup { width: 95%; height: 95%; overflow: hidden; }

@media screen and (max-width: 600px) {
  .popup-bg { padding: 15px; }
  .popup-main { padding: 0 15px 15px 15px; }
  .popup-top { padding: 15px; }
  .popup-close { top: 0; right: 0; }
}
/*********/

.html {
  hr { margin: 20px 0; clear: both; }
  h1, h2, h3, h4, h5, h6, p, ol, ul, img, iframe, button { margin-top: 20px; }
  h2, h3, h4 { font-weight: bold; }

  a:not(.btn) { text-decoration: underline; cursor: pointer; text-underline-offset: 3px; }

  ol { padding-left: 20px;
    li { list-style-type: decimal; }
  }

  ul { padding-left: 20px;
    li { list-style-type: disc; }
    &.alpha > li { list-style-type: lower-alpha; }
  }

  img { border-radius: 16px;
    &.full,
    &.center { max-width: 100%; height: auto; max-height: 800px; margin: 20px auto 0 auto; }
  }

  .right { float: right; max-width: 45%; margin: 0 0 10px 5%; }
  .left { float: left; max-width: 45%; margin: 0 5% 10px 0; }

  iframe { width: 100%; }

  video { width: 100%; margin: 20px auto 0 auto; border-radius: 16px; }
}

@media screen and (max-width: 600px) {
  .html {
    .right { float: none; width: 100%; max-width: unset; margin: 0 0 10px 0; }
    .left { float: none; width: 100%; max-width: unset; margin: 0 0 10px 0; }
  }
}

@media (hover: hover) {
  .btn:hover { text-decoration: underline; }

  .lnk:hover { text-decoration: none; }
  .lnk2:hover { text-decoration: underline; }

  .html a:not(.btn):hover { text-decoration: none; }
}

input,
textarea,
select,
button { font-family: var(--font-body); }