@font-face {
  font-family: RobotoSlab;
  font-style: normal;
  font-weight: 200;
  src: url("/static/fonts/roboto-slab/Thin.ttf") format("truetype"); }

@font-face {
  font-family: RobotoSlab;
  font-style: normal;
  font-weight: 300;
  src: url("/static/fonts/roboto-slab/Light.ttf") format("truetype"); }

@font-face {
  font-family: RobotoSlab;
  font-style: normal;
  font-weight: normal;
  src: url("/static/fonts/roboto-slab/Regular.ttf") format("truetype"); }

@font-face {
  font-family: RobotoSlab;
  font-style: normal;
  font-weight: bold;
  src: url("/static/fonts/roboto-slab/Bold.ttf") format("truetype"); }

@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  src: url("/static/fonts/montserrat/bold.otf") format("truetype"); }

@font-face {
  font-family: "Franklin Gothic Book";
  font-style: normal;
  src: url("/static/fonts/Franklin-Gothic-Book-Regular/Franklin-Gothic-Book-Regular.ttf") format("truetype"); }

* {
  max-width: 100%; }

html {
  height: 100%; }

body {
  background-color: #fff;
  font-family: "Arial", sans-serif;
  min-width: 18rem;
  color: ;
  /*
Block elements with bottom margins only
---------------------------------------
*/ }
  body .page {
    display: flex;
    flex-direction: column;
    min-height: 100vh; }
    body .page > #container {
      flex-grow: 1;
      margin: auto;
      width: 100%; }
      body .page > #container > .content {
        margin: auto;
        box-sizing: border-box;
        max-width: 60rem;
        width: 100%; }
  body.modal-opened {
    overflow: hidden; }
  @media screen and (min-width: 40em) {
  body {
    font-size: 1rem; } }

p, ul, ol, dl, table, blockquote, pre, figure, hr {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.5; }

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #006464; }
  h1:first-letter, h2:first-letter, h3:first-letter, h4:first-letter, h5:first-letter, h6:first-letter {
    text-transform: uppercase; }
  h1.inverse, h2.inverse, h3.inverse, h4.inverse, h5.inverse, h6.inverse {
    background-color: #006464;
    color: white; }

ul ul, ul ol, ol ul, ol ol {
  margin-bottom: 0;
  /*
Same left margins for ul/ol, dd, blockquote
-------------------------------------------
*/ }

ul, ol, dd {
  padding-left: 1.75rem; }

dd {
  margin-left: 0;
  /*
Blockquote
----------
*/ }

blockquote {
  border: 0;
  padding-left: 1.75rem;
  margin-left: 0;
  font-style: italic;
  /*
Figure/Figcaption
-----------------
*/ }

figure {
  margin-left: 0;
  margin-right: 0; }

figure > table, figure > img, figure > picture {
  margin-bottom: 0;
  /*
Etc.
----
*/ }

fieldset {
  border: 0; }

legend {
  padding: 0 0.5rem; }

hr {
  border-style: solid; }

::-webkit-input-placeholder {
  color: grey;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit; }

::-moz-placeholder {
  color: grey;
  opacity: 1;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit; }

:-ms-input-placeholder {
  color: grey; }

:-moz-placeholder {
  color: grey; }

a, .a {
  text-decoration: none;
  color: #006464;
  cursor: pointer; }
  a:hover, .a:hover {
    text-decoration: none; }
    a:hover *, .a:hover * {
      text-decoration: none; }

a button, a input {
  text-decoration: none;
  border: inherit;
  border-color: inherit; }

h1 {
  text-transform: uppercase;
  font-size: 2rem;
  margin: 1rem auto;
  margin-top: 0;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 0.25rem; }
  @media only screen and (min-width: 60em) {
  h1 {
    font-size: 3rem; } }
  h1.white {
    color: white; }
  h1.bigger {
    font-size: 2rem; }
    @media only screen and (min-width: 30em) {
  h1.bigger {
    font-size: 3.5rem; } }

h2 {
  text-transform: uppercase;
  font-size: 2rem;
  color: #006464;
  min-height: 2rem;
  width: 100%;
  text-align: center;
  padding: 0.25rem;
  margin-bottom: 1rem;
  box-sizing: border-box; }
  h2.bigger {
    font-size: 1.5rem; }
    @media only screen and (min-width: 30em) {
  h2.bigger {
    font-size: 2.75rem; } }
  h2.white {
    color: white; }
  @media only screen and (min-width: 60em) {
  h2 {
    font-size: 1.5rem; } }

h3 {
  text-align: center;
  font-family: Montserrat, sans-serif;
  font-size: 1.25rem;
  font-weight: bold;
  width: 100%; }

h4 {
  font-family: "Arial", sans-serif;
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 0rem; }

h5 {
  font-family: "Arial", sans-serif;
  font-size: 0.825rem;
  font-weight: 400; }
  @media only screen and (min-width: 60em) {
  h5 {
    font-size: 1rem; } }

h6 {
  font-family: "Arial", sans-serif;
  font-size: 0.75rem; }

p {
  font-weight: 300; }

input, select, textarea {
  font: inherit;
  max-width: 100%;
  box-sizing: border-box; }

img {
  max-width: 100%; }

span[name='editTranslation'] {
  cursor: pointer; }
  span[name='editTranslation']:hover {
    background-color: #ff821a10; }

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

@media only screen and (max-width: 30em) {
  .mobile-hidden {
    display: none !important; } }

.adminEventCard {
  width: 100%;
  border: 1px solid #008a8a;
  box-sizing: border-box;
  margin-bottom: 0.5rem; }
  .adminEventCard .help {
    font-size: 0.75rem;
    color: #888; }
  .adminEventCard .row {
    display: flex;
    flex-wrap: wrap; }
    .adminEventCard .row .block {
      margin: 0.5rem 1rem; }
      .adminEventCard .row .block.title-and-description {
        flex: 1 0 auto; }
        .adminEventCard .row .block.title-and-description .title {
          font-weight: bold;
          color: #006464; }
        .adminEventCard .row .block.title-and-description .description {
          font-size: 0.875rem;
          margin-left: 1rem; }
      .adminEventCard .row .block.capacity .capacity {
        display: flex;
        align-items: center;
        font-size: 1.5rem;
        font-weight: bold;
        text-align: center; }
      .adminEventCard .row .block.dates {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center; }
        .adminEventCard .row .block.dates .date, .adminEventCard .row .block.dates .add-date {
          width: max-content;
          display: flex;
          align-items: flex-end;
          justify-content: stretch; }
          .adminEventCard .row .block.dates .date .item, .adminEventCard .row .block.dates .add-date .item {
            margin: 0 0.5rem; }
            .adminEventCard .row .block.dates .date .item .datePicker, .adminEventCard .row .block.dates .add-date .item .datePicker {
              width: 10rem; }
              .adminEventCard .row .block.dates .date .item .datePicker input[name='date'], .adminEventCard .row .block.dates .add-date .item .datePicker input[name='date'] {
                margin: 0; }
            .adminEventCard .row .block.dates .date .item input, .adminEventCard .row .block.dates .add-date .item input {
              margin: 0;
              width: 10rem; }
          .adminEventCard .row .block.dates .date button[name='remove-date'], .adminEventCard .row .block.dates .add-date button[name='remove-date'], .adminEventCard .row .block.dates .date button[name='add-date'], .adminEventCard .row .block.dates .add-date button[name='add-date'] {
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0;
            width: 1.5rem;
            height: 1.5rem;
            line-height: 0;
            font-size: 1.5rem;
            margin-bottom: 0.25rem; }
      .adminEventCard .row .block.actions {
        margin: 0;
        box-sizing: border-box;
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        padding: 0.5rem;
        flex: 1 0 auto;
        flex-wrap: wrap; }
        .adminEventCard .row .block.actions button, .adminEventCard .row .block.actions .button {
          box-sizing: border-box;
          margin-left: 0.5rem;
          flex-grow: 0;
          height: 2.25rem;
          padding-left: 0.75rem;
          padding-right: 0.75rem; }
  .adminEventCard [contenteditable] {
    border-bottom: 1px solid #dedede; }

#adminHeader {
  width: 100%;
  display: flex;
  justify-content: center;
  border-bottom: 2px solid #006464; }
  #adminHeader a {
    box-sizing: border-box;
    display: block;
    padding: 0.5rem 2rem;
    border-left: 2px solid #006464;
    border-right: 2px solid #006464; }
    #adminHeader a:hover {
      color: white;
      background-color: #006464; }

.adminZzaUserCard {
  margin-bottom: 0.5rem;
  border: 1px solid #e96500;
  box-sizing: border-box;
  padding: 0.5rem; }
  .adminZzaUserCard .head {
    display: flex;
    align-items: center; }
    .adminZzaUserCard .head .name {
      flex: 1 0 auto;
      display: flex; }
      .adminZzaUserCard .head .name input[type='text'].title, .adminZzaUserCard .head .name input[type='text'].code {
        width: 5.5rem;
        margin-bottom: 0; }
        .adminZzaUserCard .head .name input[type='text'].name, .adminZzaUserCard .head .name input[type='text'].surname, .adminZzaUserCard .head .name input[type='text'].nick {
          width: 8rem;
          margin-bottom: 0; }
        .adminZzaUserCard .head .name input[type='text'].email {
          width: 100%;
          margin-bottom: 0; }
      .adminZzaUserCard .head .name .item.nick {
        margin-left: 2rem; }
        .adminZzaUserCard .head .name .item.email {
          flex: 1 0 auto; }
    .adminZzaUserCard .head .arrow {
      padding: 0 1rem; }
      .adminZzaUserCard .head .arrow button {
        min-height: 0;
        min-width: 0;
        width: 1rem;
        height: 1rem;
        background-color: transparent;
        padding: 0;
        border-top: 4px solid #e96500;
        border-left: 4px solid #e96500;
        transform: rotate(-135deg);
        transition: 0.3s all; }
        .adminZzaUserCard .head .arrow button.active {
          transform: rotate(45deg); }
  .adminZzaUserCard .body {
    display: none;
    padding: 1rem 0; }
    .adminZzaUserCard .body.active {
      display: block; }
    .adminZzaUserCard .body .row {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 0.5rem; }
      .adminZzaUserCard .body .row .item {
        width: calc((100% / 3) - .5rem); }
        .adminZzaUserCard .body .row .item input[type="text"] {
          width: 100%;
          margin-bottom: 0; }
  .adminZzaUserCard .footer {
    display: flex;
    flex-wrap: wrap; }
    .adminZzaUserCard .footer .actions {
      margin: 0;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-end;
      flex: 1 0 auto;
      flex-wrap: wrap; }
      .adminZzaUserCard .footer .actions button {
        margin-left: 0.5rem;
        flex-grow: 0;
        height: 2.25rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem; }
    .adminZzaUserCard .footer .placeholder {
      flex: 1 0 25%; }
    .adminZzaUserCard .footer .marks {
      margin: 0;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex: 1 0 25%;
      flex-wrap: wrap;
      margin-top: 0.5rem; }
      .adminZzaUserCard .footer .marks button {
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        width: 1rem;
        height: 1rem;
        min-width: 0;
        padding: 0;
        margin: 0.125rem; }
        .adminZzaUserCard .footer .marks button.mark.red {
          background-color: #e74c3c; }
          .adminZzaUserCard .footer .marks button.mark.blue {
            background-color: #2980b9; }
          .adminZzaUserCard .footer .marks button.mark.yellow {
            background-color: #f1c40f; }
          .adminZzaUserCard .footer .marks button.mark.purple {
            background-color: #8e44ad; }
          .adminZzaUserCard .footer .marks button.mark.green {
            background-color: #27ae60; }
          .adminZzaUserCard .footer .marks button.mark.black {
            background-color: #2c3e50; }
          .adminZzaUserCard .footer .marks button.mark.empty {
            background-color: transparent;
            border: 1px solid #2c3e50; }
  .adminZzaUserCard .item {
    margin: 0 0.25rem; }
    .adminZzaUserCard .item .title {
      font-size: 0.75rem;
      color: #888; }
      .adminZzaUserCard .item .title.required {
        font-weight: bold; }
  .adminZzaUserCard.red {
    background-color: #e74c3c30; }
  .adminZzaUserCard.blue {
    background-color: #2980b930; }
  .adminZzaUserCard.yellow {
    background-color: #f1c40f30; }
  .adminZzaUserCard.purple {
    background-color: #8e44ad30; }
  .adminZzaUserCard.green {
    background-color: #27ae6030; }
  .adminZzaUserCard.black {
    background-color: #2c3e5030; }

#cookiesAgreement {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  background-color: #343434;
  color: white;
  padding: 0.5rem 1rem;
  width: calc(100% - 2rem);
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 41; }
  #cookiesAgreement p {
    text-align: center;
    margin: 0 0 1rem 0; }
    #cookiesAgreement p a {
      text-decoration: underline;
      margin: 0px 0.25rem;
      color: #fff; }
  @media screen and (min-width: 40em) {
  #cookiesAgreement {
    flex-direction: row; }
    #cookiesAgreement p {
      margin: 0 1rem 0 0; } }

button, input[type="button"], input[type="submit"], a.button {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  text-transform: uppercase;
  background-color: #006464;
  border: none;
  font-family: Montserrat;
  font-size: 1rem;
  padding: 0.25rem 1.5rem;
  line-height: 1.75rem;
  color: #fff; }
  button.small, input[type="button"].small, input[type="submit"].small, a.button.small {
    font-size: 0.75rem;
    padding: 0.125rem 1.5rem;
    line-height: 1.5rem;
    min-width: 5rem; }
  button.big, input[type="button"].big, input[type="submit"].big, a.button.big {
    font-size: 1.25rem;
    padding: 0.5rem;
    line-height: 2rem;
    min-width: 15rem; }
  button:hover, input[type="button"]:hover, input[type="submit"]:hover, a.button:hover {
    text-decoration: none;
    opacity: 0.9;
    cursor: pointer; }
  button:active, input[type="button"]:active, input[type="submit"]:active, a.button:active {
    opacity: 0.8; }
  button:disabled, input[type="button"]:disabled, input[type="submit"]:disabled, a.button:disabled {
    color: #cecece !important;
    -webkit-box-shadow: 0 2px 1px 0px #6e14ccff;
    -moz-box-shadow: 0 2px 1px 0px #6e14ccff;
    box-shadow: 0 2px 1px 0px #6e14ccff; }
    button:disabled:hover, input[type="button"]:disabled:hover, input[type="submit"]:disabled:hover, a.button:disabled:hover, button:disabled:active, input[type="button"]:disabled:active, input[type="submit"]:disabled:active, a.button:disabled:active {
      opacity: 1; }
  button.inverse, input[type="button"].inverse, input[type="submit"].inverse, a.button.inverse {
    background-color: #595959;
    -webkit-box-shadow: 0 2px 1px 0px #252525ff;
    -moz-box-shadow: 0 2px 1px 0px #252525ff;
    box-shadow: 0 2px 1px 0px #252525ff; }
  button.secondary, input[type="button"].secondary, input[type="submit"].secondary, a.button.secondary {
    background-color: #47a306; }
  button.abort, input[type="button"].abort, input[type="submit"].abort, a.button.abort {
    background-color: #ff821a; }
  button.danger, input[type="button"].danger, input[type="submit"].danger, a.button.danger {
    background-color: #c11212; }
  button.yellow, input[type="button"].yellow, input[type="submit"].yellow, a.button.yellow {
    background-color: #f0b901; }
  button.image, input[type="button"].image, input[type="submit"].image, a.button.image {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    padding: 0; }
  button.facebook, input[type="button"].facebook, input[type="submit"].facebook, a.button.facebook {
    background: #314fb3 url("/static/img/icon-fb-login-register.png") no-repeat;
    padding-left: 3rem;
    background-size: contain;
    -webkit-box-shadow: 0 2px 1px 0px #203482ff;
    -moz-box-shadow: 0 2px 1px 0px #203482ff;
    box-shadow: 0 2px 1px 0px #203482ff; }

input[type="checkbox"] {
  border-radius: 0.25rem;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #006464;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  outline: none;
  position: relative;
  margin-right: 1rem; }
  input[type="checkbox"]:active:not(:disabled), input[type="checkbox"]:checked:active:not(:disabled) {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1); }
  input[type="checkbox"]:focus {
    box-shadow: 0 0 5px 1px #006464; }
  input[type="checkbox"]:checked, input[type="checkbox"][indeterminate] {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1); }
    input[type="checkbox"]:checked:after, input[type="checkbox"][indeterminate]:after {
      content: "";
      position: absolute;
      background-image: url("/static/img/form/cbx-checkmark.png");
      background-repeat: no-repeat;
      background-size: 2rem 2rem;
      background-position: 0% 0%;
      width: 1rem;
      height: 1rem;
      top: 1px;
      left: 1px; }
    input[type="checkbox"]:checked[indeterminate]:after, input[type="checkbox"][indeterminate][indeterminate]:after {
      background-position: 0% 100%; }
    input[type="checkbox"]:checked:disabled:checked:after, input[type="checkbox"][indeterminate]:disabled:checked:after {
      background-position: 100% 0%; }
    input[type="checkbox"]:checked:disabled[indeterminate]:after, input[type="checkbox"][indeterminate]:disabled[indeterminate]:after {
      background-position: 100% 100%; }
  input[type="checkbox"]:disabled {
    border-color: #d1d1d1; }

.datePicker {
  position: relative; }
  .datePicker input[name="date"] {
    background-image: url("/static/img/components/form/date-picker.png");
    background-repeat: no-repeat;
    background-size: 1.5rem 1.5rem;
    background-position: calc(100% - .25rem) 50%; }
  .datePicker .box {
    border-radius: 0.25rem;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    position: absolute;
    background-color: #fff;
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .5);
    border: solid 1px #d1d1d1;
    display: none;
    width: max-content;
    max-width: 20rem;
    min-height: calc(6 * (2.5rem + 2px) + 2rem + 1px);
    z-index: 82; }
    .datePicker .box .tools {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: solid 1px #d1d1d1;
      padding: 0.5rem 0.5rem;
      line-height: 1; }
      .datePicker .box .tools .month-year {
        text-align: center;
        flex-grow: 1; }
    .datePicker .box .days {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-wrap: wrap; }
      .datePicker .box .days button {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        border-radius: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border: solid 1px #fff;
        padding: 0;
        width: calc((100% / 7) - 2px);
        min-width: initial;
        height: 2.5rem; }
        .datePicker .box .days button[name="placeholder"] {
          background: #e1e1e1;
          border-color: #fff; }
  .datePicker input[name="date"]:focus + .box {
    display: block; }

input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
  border-radius: 0.25rem;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  background-color: transparent;
  font-family: Montserrat;
  font-size: 1rem;
  border: solid 1px #006464;
  margin-bottom: 1rem;
  padding: 0.1rem 0.5rem;
  height: 2rem;
  color: #000;
  outline: none;
  max-width: 100%;
  box-sizing: border-box; }
  input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"])::selection {
    background-color: #000;
    color: #fff; }
  input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):focus {
    box-shadow: 0 0 5px 1px #000; }
  input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]).error {
    border-color: #e91c1c; }
    input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]).error:focus {
      box-shadow: 0 0 5px 1px #e91c1c; }
    input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]).error::selection {
      background-color: #e91c1c;
      color: #fff; }
  input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):disabled {
    border-color: #d1d1d1; }

label {
  display: flex;
  align-items: start;
  max-width: 100%; }
  label > input {
    flex: 0 0 auto; }
  label > div {
    flex-shrink: 1 !important; }

input[type="radio"] {
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #006464;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  width: 1.25rem;
  height: 1.25rem;
  outline: none;
  position: relative; }
  input[type="radio"]:active:not(:disabled), input[type="radio"]:checked:active:not(:disabled) {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1); }
  input[type="radio"]:focus {
    box-shadow: 0 0 5px 1px #006464; }
  input[type="radio"]:checked {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1); }
    input[type="radio"]:checked:after {
      border-radius: 100%;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      content: "";
      position: absolute;
      background-color: #ff821a;
      display: block;
      width: 0.75rem;
      height: 0.75rem;
      top: calc(.125rem + 1px);
      left: calc(.125rem + 1px); }
    input[type="radio"]:checked:disabled:checked:after {
      background-color: #e1e1e1; }
  input[type="radio"]:disabled {
    border-color: #d1d1d1; }

select {
  border-radius: 0.25rem;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url("/static/img/form/select-arrow.png");
  background-repeat: no-repeat;
  background-size: calc(1.5rem + 2px) 1.5rem;
  background-position: 100%;
  border: solid 1px #006464;
  font-size: 0.85rem;
  font-weight: 300;
  padding: 0.125rem 2.5rem 0 1rem;
  height: 2rem;
  outline: none;
  color: #000; }
  select:focus {
    box-shadow: 0 0 5px 1px #006464; }
  select::-ms-expand {
    /* remove default arrow in IE 10 and 11 */
    display: none;
    /* target Internet Explorer 9 to undo the custom arrow */ }
  @media screen and (min-width:0\0) {
  select select {
    background: none\9;
    padding: 5px \9; } }

textarea {
  border-radius: 0.25rem;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  background: transparent;
  font-family: Montserrat;
  font-size: 1rem;
  border: solid 1px #006464;
  margin-bottom: 1rem;
  padding: 0.5rem;
  height: 4rem;
  line-height: 1.25rem;
  outline: none;
  overflow: auto;
  resize: none; }
  textarea::selection {
    background-color: #00099; }
  textarea:focus {
    box-shadow: 0 0 5px 1px #006464; }
  textarea.error {
    border-color: #e91c1c; }
    textarea.error:focus {
      box-shadow: 0 0 5px 1px #e91c1c; }
    textarea.error::selection {
      background-color: #e91c1c99; }
  textarea:disabled {
    border-color: #d1d1d1; }

.timePicker .time {
  border-radius: 0.25rem;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  border: solid 1px #006464;
  max-width: 100%;
  display: inline-block;
  box-sizing: border-box;
  height: 2rem; }
  .timePicker .time input.hours, .timePicker .time input.minutes {
    width: 3rem;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important; }
  .timePicker .time input[name='hours'] {
    text-align: right; }

#activeUser {
  display: flex;
  align-items: center;
  position: relative; }
  #activeUser > a {
    display: flex;
    align-items: center; }
  #activeUser > a .name {
    font-size: 1.25rem; }
  #activeUser > a .arrow {
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: relative;
    border-right: solid 2px #000;
    border-bottom: solid 2px #000;
    margin-left: 0.5rem;
    width: 0.5rem;
    height: 0.5rem;
    top: -2px; }
  #activeUser > a:hover {
    color: inherit; }
  #activeUser .menu {
    -webkit-transform: scaleY(0);
    -o-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: top;
    -o-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
    -webkit-transition: -webkit-transform 0.25s ease-in;
    -o-transition: -o-transform 0.25s ease-in;
    -ms-transition: -ms-transform 0.25s ease-in;
    transition: transform 0.25s ease-in;
    display: flex;
    position: absolute;
    background-color: #fff;
    top: 2.5rem;
    right: 0;
    z-index: 41;
    max-width: 9rem;
    max-width: initial; }
  #activeUser .menu .items {
    border-radius: 0.25rem;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15), 0 0 2px 2px rgba(0, 0, 0, 0.1); }
    #activeUser .menu .items a {
      background: #fff;
      display: block;
      padding: 0.5rem 1.5rem;
      min-width: 6rem;
      white-space: nowrap; }
      #activeUser .menu .items a:first-child {
        border-top-right-radius: 0.25rem;
        border-top-left-radius: 0.25rem;
        -webkit-border-top-right-radius: 0.25rem;
        -webkit-border-top-left-radius: 0.25rem;
        -moz-border-top-right-radius: 0.25rem;
        -moz-border-top-left-radius: 0.25rem; }
      #activeUser .menu .items a:last-child {
        border-bottom-right-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
        -webkit-border-bottom-right-radius: 0.25rem;
        -webkit-border-bottom-left-radius: 0.25rem;
        -moz-border-bottom-right-radius: 0.25rem;
        -moz-border-bottom-left-radius: 0.25rem; }
      #activeUser .menu .items a:hover {
        background: #ff821a22; }
  #activeUser.menu-visible .menu {
    -webkit-transform: scaleY(1);
    -o-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transition: -webkit-transform 0.25s ease-in;
    -o-transition: -o-transform 0.25s ease-in;
    -ms-transition: -ms-transform 0.25s ease-in;
    transition: transform 0.25s ease-in; }

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: #006464; }
  header .left {
    padding-left: 1rem; }
  header .left .logo {
    display: flex;
    align-items: center;
    font-size: 1.75rem;
    font-family: Montserrat, "Open Sans", Verdana, sans-serif;
    font-weight: bold;
    color: white;
    width: 2.5rem;
    height: 2.5rem; }
    header .left .logo img {
      width: 100%;
      height: 100%;
      margin: 0.5rem; }

#logoHeader {
  font-size: 2.25rem;
  margin-bottom: 0.5rem;
  font-family: "Franklin Gothic Book", arial;
  font-weight: 900;
  color: white;
  display: block; }
  #logoHeader sup {
    font-size: calc((2.25rem / 3) * 4);
    color: #e96500; }

.dekretPage {
  display: flex;
  flex-direction: column;
  font-family: "Verdana", "sans-serif";
  page-break-after: always; }
  .dekretPage .header {
    margin-top: 5mm; }
  .dekretPage .header p {
    padding: 0;
    margin: 0;
    font-size: 11pt;
    text-align: center;
    line-height: 1.25; }
  .dekretPage .header .logo {
    width: 8rem;
    margin: auto;
    display: block;
    margin-bottom: 2mm; }
  .dekretPage .title {
    font-size: 53pt;
    text-align: center;
    margin-top: 10mm; }
  .dekretPage .img-luzanky {
    width: 16rem;
    display: block;
    margin: 5mm auto; }
  .dekretPage .name {
    font-size: 20pt;
    font-weight: bold;
    text-align: center;
    margin-top: 10mm; }
  .dekretPage .date {
    font-size: 14pt;
    font-weight: bold;
    text-align: center;
    margin-bottom: 5mm; }
  .dekretPage .text {
    margin-bottom: 10mm; }
  .dekretPage .text p {
    padding: 0;
    margin: 0;
    font-size: 11pt;
    text-align: center;
    line-height: 1.25; }
  .dekretPage .subtitle {
    font-size: 23pt;
    text-align: center;
    margin-top: 5mm; }
  .dekretPage .footer {
    display: flex;
    align-items: flex-end;
    flex: 1 0 auto;
    justify-content: space-around;
    margin-bottom: 10mm; }
  .registration {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box; }
  .registration .row {
    margin-bottom: 0.5rem;
    max-width: 100%; }
  .registration .row .cell {
    display: flex;
    padding: 0 1rem;
    justify-content: center;
    align-items: center; }
    .registration .row .cell.non-requier {
      color: #787878; }
    .registration .row .cell:first-child {
      justify-content: flex-start; }
    .registration .row .cell input[type='checkbox'] {
      margin: auto; }
  @media only screen and (min-width: 30em) {
  .registration .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 40rem; }
    .registration .row .cell {
      display: flex;
      width: calc(50% - 2rem);
      padding: 0.25rem 1rem;
      justify-content: flex-start;
      align-items: center; }
      .registration .row .cell:first-child {
        justify-content: flex-end; }
      .registration .row .cell input[type='checkbox'] {
        margin: initial; }
      .registration .row .cell select, .registration .row .cell input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
        width: 100%;
        margin-bottom: 0; }
        .registration .row .cell select.error, .registration .row .cell input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]).error {
          margin-bottom: 0; } }

#registrationEvent .events {
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch; }
  #registrationEvent .events .registrationEventCard {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    margin: 1rem;
    background-color: #666;
    max-width: 28rem;
    width: 100%;
    text-transform: initial;
    color: white;
    text-align: initial; }
    #registrationEvent .events .registrationEventCard .head {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #888;
      max-width: 32rem;
      width: 100%;
      text-align: center;
      font-size: 1.25rem;
      color: white;
      padding: 1rem 0;
      -webkit-box-shadow: 0 0.25rem 1rem 0 rgba(0, 0, 0, .5);
      -moz-box-shadow: 0 0.25rem 1rem 0 rgba(0, 0, 0, .5);
      box-shadow: 0 0.25rem 1rem 0 rgba(0, 0, 0, .5); }
      #registrationEvent .events .registrationEventCard .head:before {
        content: " ";
        width: 2rem;
        height: 2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-image: url("/static/img/logo-dark.png");
        background-repeat: no-repeat;
        background-size: 2rem 2rem;
        margin-right: 0.5rem; }
    #registrationEvent .events .registrationEventCard .body {
      flex: 1 0 auto;
      padding: 0.5rem;
      box-sizing: border-box;
      max-width: 32rem;
      width: 100%; }
      #registrationEvent .events .registrationEventCard .body .error {
        color: #ff821a;
        text-align: center; }
      #registrationEvent .events .registrationEventCard .body .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        max-width: 40rem; }
        #registrationEvent .events .registrationEventCard .body .row .cell {
          padding: 0;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start; }
          #registrationEvent .events .registrationEventCard .body .row .cell:first-child {
            justify-content: flex-end; }
    #registrationEvent .events .registrationEventCard:hover {
      background-color: #006464;
      opacity: 1; }
      #registrationEvent .events .registrationEventCard:hover .head {
        background-color: #008a8a; }
      #registrationEvent .events .registrationEventCard:hover.full {
        background-color: #a20000;
        color: white; }
        #registrationEvent .events .registrationEventCard:hover.full .head {
          background-color: #c90000; }

#zzaRegistration {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-bottom: 1rem;
  min-height: 10rem; }
  #zzaRegistration h2 {
    box-sizing: border-box;
    width: 100%; }
  #zzaRegistration .buttons {
    display: flex;
    justify-content: space-around;
    margin-top: 1rem;
    width: 100%;
    max-width: 45rem; }
  #zzaRegistration .error {
    color: red; }
  #zzaRegistration .closed {
    flex: 1 0 auto;
    font-size: 2rem;
    color: #888;
    display: flex;
    align-items: center;
    text-align: center; }

#mAdminAddEvent .modalWrapper {
  max-width: 30rem; }
  #mAdminAddEvent .modalWrapper .container form label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
    #mAdminAddEvent .modalWrapper .container form label .title {
      font-weight: bold;
      font-size: 1rem;
      margin: auto; }
    #mAdminAddEvent .modalWrapper .container form label input[name='name'], #mAdminAddEvent .modalWrapper .container form label textarea {
      width: 100%; }
    #mAdminAddEvent .modalWrapper .container form label input {
      text-align: center; }

#mAdminAddProgram .modalWrapper {
  max-width: 30rem; }
  #mAdminAddProgram .modalWrapper .container form label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
    #mAdminAddProgram .modalWrapper .container form label .title {
      font-weight: bold;
      font-size: 1rem;
      margin: auto; }
    #mAdminAddProgram .modalWrapper .container form label input {
      text-align: center; }

#mAdminAddUser .modalWrapper {
  max-width: 30rem; }
  #mAdminAddUser .modalWrapper .container form label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
    #mAdminAddUser .modalWrapper .container form label .title {
      font-weight: bold;
      font-size: 1rem;
      margin: auto; }
    #mAdminAddUser .modalWrapper .container form label input {
      text-align: center; }

#mAdminExportEventCSV .modalWrapper {
  max-width: 40rem; }
  #mAdminExportEventCSV .modalWrapper .container form {
    margin: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap; }
    #mAdminExportEventCSV .modalWrapper .container form .styledCheckbox {
      flex: 1 0 50%;
      margin-bottom: 0.25rem; }
    #mAdminExportEventCSV .modalWrapper .container form .styledCheckbox label {
      font-size: 1.25rem;
      font-weight: bold; }
    #mAdminExportEventCSV .modalWrapper .container form .submit-wrapper {
      width: 100%; }

#mEditDictionary .modalWrapper .container form .row .notice {
  font-size: 0.75rem;
  color: ; }

.modal {
  display: flex;
  justify-content: center;
  position: fixed;
  background: rgba(0, 0, 0, 0.4);
  width: 100vw;
  height: calc(100% - 1rem);
  color: #333;
  z-index: 81;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  top: 0;
  left: 0; }
  .modal .modalWrapper {
    width: 100%;
    max-width: 60rem;
    max-height: calc(100vh - 2rem);
    color: #333; }
  .modal .modalWrapper * {
    flex-shrink: 0; }
  .modal .modalWrapper .container {
    position: relative;
    width: calc(100% - 2rem);
    margin-top: 1rem;
    height: 100%; }
    .modal .modalWrapper .container .content {
      background: #fff;
      border: solid 1px #a9a9a9;
      width: 100%;
      padding: 2rem 1rem 1rem;
      box-sizing: border-box;
      text-align: center; }
    .modal .modalWrapper .container .content .title {
      font-size: 2rem;
      margin: 0.5rem auto 1rem; }
    .modal .modalWrapper .container .content .logo {
      margin: 2.5rem 0 2rem;
      width: 152px;
      height: 20px; }
    .modal .modalWrapper .container .content form {
      margin-bottom: 1rem;
      width: 100%; }
    .modal .modalWrapper .container .content form .row {
      margin-bottom: 1rem; }
      .modal .modalWrapper .container .content form .row input[type='submit'], .modal .modalWrapper .container .content form .row button {
        margin: auto; }
    .modal .modalWrapper .container .content form .error-message {
      text-align: center;
      font-size: 1rem;
      padding: 1rem 2rem;
      width: 100%;
      box-sizing: border-box;
      color: #f00; }
    .modal .modalWrapper .container .closer {
      -webkit-appearance: none;
      -moz-appearance: none;
      -ms-appearance: none;
      -o-appearance: none;
      appearance: none;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      position: absolute;
      background: transparent;
      border: none;
      padding: 0;
      width: 28px;
      height: 28px;
      min-width: 0rem;
      right: 0.5rem;
      top: 0.5rem; }
    .modal .modalWrapper .container .closer:before, .modal .modalWrapper .container .closer:after {
      position: absolute;
      background-color: #000;
      top: 0;
      left: 10px;
      content: " ";
      height: 29px;
      width: 5px; }
    .modal .modalWrapper .container .closer:before {
      transform: rotate(45deg); }
    .modal .modalWrapper .container .closer:after {
      transform: rotate(-45deg); }
    .modal .modalWrapper .container .closer:hover {
      opacity: 0.7;
      cursor: pointer; }
  .modal .modalWrapper .modal-margin {
    padding-bottom: 1rem; }
  @media (min-width: 30rem) {
  .modal {
    padding-top: 1rem; }
    .modal .modalWrapper {
      margin-top: 1rem;
      width: calc(100vw - 2rem); } }

#mLogin .modalWrapper, #mRegister .modalWrapper {
  max-width: 40rem; }
  #mLogin .modalWrapper .container .register, #mRegister .modalWrapper .container .register, #mLogin .modalWrapper .container .forgotten-password, #mRegister .modalWrapper .container .forgotten-password {
    margin-bottom: 5px;
    cursor: pointer;
    color: #006464; }

#mRegistrationDone .modalWrapper .container .title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem auto 2rem; }
  #mRegistrationDone .modalWrapper .container .title .checkmark {
    flex-shrink: 0;
    background-image: url("/static/img/checkmark.png");
    background-repeat: no-repeat;
    background-size: 3rem 3rem;
    margin-right: 1rem;
    width: 3rem;
    height: 3rem; }
  #mRegistrationDone .modalWrapper .container .title .label {
    flex-shrink: 0;
    font-size: 1.25rem; }
  #mRegistrationDone .modalWrapper .container .announcement {
    text-align: center;
    font-size: 1rem; }

#mUserActivated .modalWrapper .container .title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 2.5rem auto; }
  #mUserActivated .modalWrapper .container .title .checkmark {
    flex-shrink: 0;
    background-image: url("/static/img/checkmark.png");
    background-repeat: no-repeat;
    background-size: 50px 50px;
    margin: 0 0 1rem;
    width: 50px;
    height: 50px; }
  #mUserActivated .modalWrapper .container .title .label {
    text-align: center;
    flex-shrink: 0;
    font-size: 1.25rem; }
  #mUserActivated .modalWrapper .container .announcement {
    text-align: center; }
  @media only screen and (min-width: 30rem) {
      #mUserActivated .modalWrapper .container .title {
        flex-direction: row; }
        #mUserActivated .modalWrapper .container .title .checkmark {
          margin: 0 1rem 0 0; } }

#adminDelay #container .delay-controll {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; }
  #adminDelay #container .delay-controll .delay-value {
    font-size: 5rem;
    font-weight: bold;
    text-align: center; }
  #adminDelay #container .delay-controll .delay-value.positive {
    color: #47a306; }
  #adminDelay #container .delay-controll .delay-value.negative {
    color: #c11212; }
  #adminDelay #container .delay-controll .buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 18rem; }
  #adminDelay #container .delay-controll .buttons button {
    width: calc(50% - 1rem);
    margin: 0.5rem; }

#adminEvents .actions, #adminEvent .actions {
  margin: 1rem;
  display: flex;
  justify-content: center; }

#adminItinerary .item {
  padding: 1rem;
  border-radius: 0.25rem;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  border: solid 1px #006464;
  margin-bottom: 1rem; }
  #adminItinerary .item .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; }
  #adminItinerary .item .top .title {
    font-weight: bold;
    font-size: 1.25rem;
    margin-right: 1rem;
    flex: 1 0 auto; }
  #adminItinerary .item .top .title .duration {
    font-size: 0.875rem;
    color: #666; }
  #adminItinerary .item .top .add-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; }
  #adminItinerary .item .top .add-user label {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    font-size: 0.75rem; }
  #adminItinerary .item .top .add-user label input[type='checkbox'] {
    margin-left: 0.25rem; }
  #adminItinerary .item .top .add-user input[type='text'] {
    width: 8rem;
    font-size: 0.875rem;
    font-weight: normal; }
  @media (min-width: 30em) {
        #adminItinerary .item .top .add-user {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center; }
          #adminItinerary .item .top .add-user input {
            margin-bottom: 0; } }
  @media (min-width: 45em) {
      #adminItinerary .item .top {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center; } }
  #adminItinerary .item .enrollments {
    width: 100%;
    margin-top: 1rem;
    text-align: center; }
  #adminItinerary .item .enrollments .enroll {
    border-radius: 0.25rem;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    border: solid 1px #006464;
    padding: 0.125rem 0.5rem;
    margin-right: 0.125rem;
    margin-bottom: 0.25rem;
    display: inline-block;
    font-size: 0.875rem;
    background-color: #008a8a28; }
  #adminItinerary .item .enrollments .enroll .notice {
    color: #666; }
  #adminItinerary .item .enrollments .enroll .cross {
    color: red;
    font-size: 0.875rem; }
  #adminItinerary .item .enrollments .enroll.leader {
    font-weight: bold;
    font-size: 1.25rem; }
  #adminItinerary .add-item {
    display: block; }
  #adminItinerary .add-item form {
    display: flex;
    flex-direction: column;
    align-items: center; }
  #adminItinerary .add-item form .left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex: 1 0 auto;
    margin-bottom: 1rem; }
  #adminItinerary .add-item form .left select {
    margin-right: 1rem;
    margin-bottom: 1rem; }
  #adminItinerary .add-item form .left .timePicker {
    margin-bottom: 1rem;
    margin-right: 1rem; }
  #adminItinerary .add-item form .left label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-weight: bold; }
  #adminItinerary .add-item form .left label .duration {
    width: 4rem;
    margin-bottom: 0;
    margin-right: 0.25rem; }
  @media (min-width: 40em) {
      #adminItinerary .add-item form .left {
        flex-direction: row;
        justify-content: flex-start;
        margin-bottom: 0; }
        #adminItinerary .add-item form .left select {
          margin-bottom: 0; }
        #adminItinerary .add-item form .left .timePicker {
          margin-bottom: 0; } }
  @media (min-width: 30em) {
      #adminItinerary .add-item form {
        flex-direction: row; } }

#adminDictionary table td {
  padding: 0.25rem;
  min-width: 5rem;
  cursor: pointer; }
  #adminDictionary table td:hover {
    background-color: #ff821a20; }
  #adminDictionary table tr:hover {
    background-color: #ff821a10; }

#console {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: #000;
  background-image: url("/static/img/1/debugger/console/bg.jpg");
  background-position: 50% 50%;
  background-attachment: fixed;
  width: 100%;
  height: 100vh; }
  #console .results {
    background: rgba(0, 0, 0, 0.6);
    height: calc(100vh - 65px);
    overflow-y: scroll;
    word-wrap: break-word;
    color: #fff; }
  #console .results li:last-child {
    margin-bottom: 30px; }
  #console .input {
    display: flex;
    flex-direction: column;
    position: fixed;
    width: 100%;
    bottom: 0; }
  #console .input .tools {
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;
    align-items: center;
    background: #fff;
    padding: 0 5px;
    width: calc(100% - 10px);
    height: 30px; }
  #console .input .tools .left, #console .input .tools .right {
    display: flex;
    justify-content: flex-start;
    align-items: center; }
  #console .input .tools .left button, #console .input .tools .right button {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    background: transparent;
    border: none;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    box-shadow: none;
    padding: 2px 5px;
    min-width: initial;
    cursor: pointer;
    color: #157efb; }
  #console .input .tools .left button:active, #console .input .tools .right button:active {
    color: #60c9f9; }
  #console .input .tools .left button[name="switch-layout"], #console .input .tools .right button[name="switch-layout"] {
    background-repeat: no-repeat;
    background-size: 18px 36px;
    background-position: 50% 0%;
    padding: 0;
    width: 18px;
    height: 18px; }
    #console .input .tools .left button[name="switch-layout"]:active, #console .input .tools .right button[name="switch-layout"]:active {
      background-position: 50% 100%; }
  #console .input .tools .left button.arrow, #console .input .tools .right button.arrow {
    align-self: flex-end;
    position: relative;
    border: solid #157efb;
    border-width: 0 2px 2px 0;
    padding: 0;
    width: 10px;
    height: 10px; }
    #console .input .tools .left button.arrow:active, #console .input .tools .right button.arrow:active {
      border-color: #60c9f9; }
    #console .input .tools .left button.arrow[name="previous-command"], #console .input .tools .right button.arrow[name="previous-command"] {
      transform: rotate(-135deg);
      -webkit-transform: rotate(-135deg);
      bottom: 3px; }
    #console .input .tools .left button.arrow[name="next-command"], #console .input .tools .right button.arrow[name="next-command"] {
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      bottom: 9px; }
  #console .input .tools .left {
    justify-content: flex-start; }
  #console .input .tools .right {
    justify-content: flex-end; }
  #console .input .area {
    flex-grow: 1;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.8);
    padding: 10px;
    height: 15px; }
  #console .input .area textarea[name="input"] {
    background: transparent;
    resize: none;
    white-space: nowrap;
    overflow: hidden;
    font-size: 15px;
    font-weight: bold;
    border: none;
    width: 100%;
    height: 100%;
    line-height: 15px;
    color: #fff; }
  #console .input .area textarea[name="input"]:focus {
    outline: 0; }
  #console pre {
    background: transparent !important;
    font-size: 13px !important;
    border: none !important;
    color: #fff !important; }
  #console pre .name {
    font-weight: bold !important;
    color: #c05 !important; }
  #console pre .type {
    color: #cdd !important; }
  #console.horizontal .input .tools button[name="switch-layout"] {
    background-image: url("/static/img/debugger/console/vertical.png"); }
  #console.vertical {
    justify-content: space-between;
    flex-direction: row; }
  #console.vertical .results {
    padding-right: 25%;
    width: 75%;
    height: 100vh; }
  #console.vertical .input {
    width: 25%;
    height: 100%;
    top: 0;
    right: 0; }
  #console.vertical .input .tools button[name="switch-layout"] {
    background-image: url("/static/img/debugger/console/horizontal.png"); }
  #console.vertical .input .area {
    flex-shrink: 1;
    height: calc(100% - 30px - 20px); }
  #console.vertical .input .area textarea[name="input"] {
    white-space: pre;
    overflow-y: auto;
    height: 100%; }

* {
  margin: 0;
  padding: 0; }

#log .head {
  position: fixed;
  background: #000;
  width: 100%;
  height: 80px;
  top: 0; }

#log .head h1 {
  color: #fff;
  float: left; }

#log .head button[name="clear-log"] {
  background: #fff;
  text-transform: uppercase;
  font-weight: bold;
  border: none;
  margin: 25px;
  width: 100px;
  height: 30px;
  color: #000;
  float: right; }

#log ul {
  padding-top: 80px; }

#log ul li {
  white-space: pre; }

* {
  margin: 0;
  padding: 0; }

#log .head {
  position: fixed;
  background: #000;
  width: 100%;
  height: 80px;
  top: 0; }

#log .head h1 {
  color: #fff;
  float: left; }

#log .head button[name="clear-log"] {
  background: #fff;
  text-transform: uppercase;
  font-weight: bold;
  border: none;
  margin: 25px;
  width: 100px;
  height: 30px;
  color: #000;
  float: right; }

#log ul {
  padding-top: 80px; }

#log ul li {
  white-space: pre; }

#error > .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background-color: black;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  color: white;
  min-height: 50vh; }
  #error > .content h2 {
    margin-bottom: 2rem; }
  #error > .content a.button {
    text-align: center;
    padding: 0.5rem 1.5rem; }

#login #container {
  display: flex;
  flex-direction: column; }
  #login #container .content {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }

#styles #container {
  display: flex;
  justify-content: center; }
  #styles #container > div > .content {
    margin-bottom: 20px;
    padding: 4rem 2rem;
    width: calc(100% - 4rem);
    max-width: 60rem; }
  #styles #container > div > .content .title, #styles #container > div > .content .subtitle {
    text-transform: uppercase; }
  #styles #container > div > .content .title {
    font-size: 1.5rem;
    margin-bottom: 0.75rem; }
  #styles #container > div > .content .subtitle {
    font-size: 1.25rem;
    margin-bottom: 0.5rem; }
  #styles #container > div > .content .block {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 2rem; }
  #styles #container > div > .content .block.typography {
    display: flex;
    justify-content: flex-start;
    align-items: baseline; }
    #styles #container > div > .content .block.typography.image {
      align-items: flex-start;
      width: 100%; }
      #styles #container > div > .content .block.typography.image img {
        border-radius: 0.25rem;
        -webkit-border-radius: 0.25rem;
        -moz-border-radius: 0.25rem;
        max-width: 100%; }
    #styles #container > div > .content .block.typography .label {
      margin-right: 1rem;
      min-width: calc(9rem); }
  #styles #container > div > .content .block > .subblock {
    margin-right: 1rem; }

#passwordRecovery {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  overflow: scroll;
  width: 100%;
  height: 100vh;
  /* Safari 4.0 - 8.0 */ }
  #passwordRecovery .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #fff;
    border: solid 1px #000;
    padding: 20px 40px 40px;
    font-size: 14px;
    width: 400px; }
  #passwordRecovery .container .title {
    text-align: center;
    font-size: 40px;
    font-weight: 200;
    margin: 20px auto; }
  #passwordRecovery .container .email {
    font-size: 18px;
    font-weight: 200;
    margin-bottom: 20px; }
  @media screen and (max-width: 620px) {
    #passwordRecovery .container {
      border-radius: 0;
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      overflow: scroll;
      width: 100%;
      height: 100vh; }
      #passwordRecovery .container .title {
        font-size: 40px;
        margin: 10px auto; }
      #passwordRecovery .container .email {
        margin-bottom: 10px; } }
  #passwordRecovery .container form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 20px; }
  #passwordRecovery .container form .row {
    display: flex;
    justify-content: center;
    align-items: center; }
  #passwordRecovery .container form .row .styled-input {
    width: calc(200px - 12px); }
  @media screen and (max-width: 400px) {
          #passwordRecovery .container form .row .styled-input {
            width: 170px; } }
  #passwordRecovery .container form .row .styled-button {
    width: 200px; }
  #passwordRecovery .container form .row.send {
    display: flex;
    justify-content: center; }
  #passwordRecovery .container .error-message {
    width: 100%;
    height: 20px;
    color: #f00; }
  #passwordRecovery .container .confirmation {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
  #passwordRecovery .container .confirmation > div {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-bottom: 40px; }
  #passwordRecovery .container .confirmation > div .checkmark {
    background-image: url("/static/img/checkmark.png");
    background-repeat: no-repeat;
    background-size: 50px 50px;
    margin-right: 20px;
    width: 50px;
    height: 50px; }
  #passwordRecovery .container .confirmation > div .announcement {
    text-align: center;
    font-size: 20px;
    font-weight: 200; }
  #passwordRecovery .container .confirmation button {
    min-width: 200px; }

#zdravotnikZotavovacichAkci, #home {
  display: flex; }
  #zdravotnikZotavovacichAkci h1, #home h1, #zdravotnikZotavovacichAkci h2, #home h2 {
    margin-bottom: 0; }
  #zdravotnikZotavovacichAkci .sing-up, #home .sing-up {
    -webkit-box-shadow: 0 0px 0.5rem 0.25rem rgba(0, 0, 0, .25);
    -moz-box-shadow: 0 0px 0.5rem 0.25rem rgba(0, 0, 0, .25);
    box-shadow: 0 0px 0.5rem 0.25rem rgba(0, 0, 0, .25);
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 3rem; }
  @media only screen and (min-width: 35em) {
    #zdravotnikZotavovacichAkci .sing-up, #home .sing-up {
      top: 0;
      right: 2rem;
      bottom: initial;
      width: initial;
      background: #006464;
      color: white;
      opacity: 0.5; }
      #zdravotnikZotavovacichAkci .sing-up:hover, #home .sing-up:hover {
        opacity: 1; } }
  #zdravotnikZotavovacichAkci .intro, #home .intro {
    background-color: #ff821a;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    position: relative; }
  #zdravotnikZotavovacichAkci .intro .logo, #home .intro .logo {
    color: #006464;
    font-size: 10rem;
    font-family: "Franklin Gothic Book", arial;
    font-weight: bold; }
  #zdravotnikZotavovacichAkci .intro .white, #home .intro .white {
    line-height: 150%; }
  #zdravotnikZotavovacichAkci .how-it-works, #home .how-it-works {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    padding-top: 1rem; }
  #zdravotnikZotavovacichAkci .how-it-works .block, #home .how-it-works .block {
    display: flex;
    flex-wrap: wrap;
    flex: 1 0 auto;
    padding: 0.5rem;
    max-width: 100%;
    box-sizing: border-box;
    align-items: center;
    margin-bottom: 0.75rem; }
  #zdravotnikZotavovacichAkci .how-it-works .block .title, #home .how-it-works .block .title {
    color: #ff821a;
    font-size: 1.25rem;
    width: 100%;
    text-align: center;
    margin-bottom: 0.5rem; }
  #zdravotnikZotavovacichAkci .how-it-works .block .icon, #home .how-it-works .block .icon {
    width: 5rem; }
  #zdravotnikZotavovacichAkci .how-it-works .block .content, #home .how-it-works .block .content {
    width: calc(100% - 5rem - 1rem);
    font-size: 0.875rem;
    color: #444; }
  @media only screen and (min-width: 30em) {
      #zdravotnikZotavovacichAkci .how-it-works .block .content, #home .how-it-works .block .content {
        font-size: 1rem; } }
  @media only screen and (min-width: 60em) {
      #zdravotnikZotavovacichAkci .how-it-works .block, #home .how-it-works .block {
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-bottom: 1rem;
        box-sizing: border-box; }
        #zdravotnikZotavovacichAkci .how-it-works .block .title, #home .how-it-works .block .title {
          color: #ff821a;
          font-size: 2rem;
          font-weight: lighter;
          margin-bottom: 1rem; }
        #zdravotnikZotavovacichAkci .how-it-works .block .icon, #home .how-it-works .block .icon {
          width: 8rem;
          margin-bottom: 1rem; }
        #zdravotnikZotavovacichAkci .how-it-works .block .content, #home .how-it-works .block .content {
          max-width: 20rem;
          line-height: 1.5rem;
          text-align: center;
          font-size: 1rem; } }
  #zdravotnikZotavovacichAkci .thats-us, #home .thats-us {
    background: #ff821a;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem; }
  #zdravotnikZotavovacichAkci .thats-us .left, #home .thats-us .left, #zdravotnikZotavovacichAkci .thats-us .right, #home .thats-us .right {
    box-sizing: border-box;
    padding: 1rem;
    flex: 1 0 50%;
    min-width: 20rem;
    display: flex;
    flex-direction: column;
    align-items: center; }
  #zdravotnikZotavovacichAkci .thats-us .left .title, #home .thats-us .left .title, #zdravotnikZotavovacichAkci .thats-us .right .title, #home .thats-us .right .title {
    font-size: 1.5rem;
    color: white;
    font-weight: 600;
    max-width: 30rem;
    margin-bottom: 1rem;
    width: 100%; }
  #zdravotnikZotavovacichAkci .thats-us .left .content, #home .thats-us .left .content, #zdravotnikZotavovacichAkci .thats-us .right .content, #home .thats-us .right .content {
    max-width: 25rem;
    line-height: 1.5rem;
    flex: 1 0 auto; }
  #zdravotnikZotavovacichAkci .thats-us .left .placeholder, #home .thats-us .left .placeholder, #zdravotnikZotavovacichAkci .thats-us .right .placeholder, #home .thats-us .right .placeholder {
    margin-top: 1rem;
    width: 100%;
    height: 1.5rem; }
  #zdravotnikZotavovacichAkci .thats-us .right, #home .thats-us .right {
    background: #e96500; }
  #zdravotnikZotavovacichAkci .thats-us .right .title, #home .thats-us .right .title {
    margin-bottom: 0;
    margin-top: 1rem;
    text-align: right; }
  #zdravotnikZotavovacichAkci .thats-us .right .placeholder, #home .thats-us .right .placeholder {
    margin-top: 0;
    margin-bottom: 1rem; }
  #zdravotnikZotavovacichAkci .what-we-do, #home .what-we-do {
    background-color: #006464;
    color: white; }
  #zdravotnikZotavovacichAkci .contact, #home .contact {
    background-color: #006464;
    min-height: 20rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; }
  #zdravotnikZotavovacichAkci .contact .item, #home .contact .item {
    max-width: 35rem;
    box-sizing: border-box;
    padding: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column; }
  #zdravotnikZotavovacichAkci .contact .item .left .icon, #home .contact .item .left .icon {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 1rem; }
  #zdravotnikZotavovacichAkci .contact .item .left .icon .logo, #home .contact .item .left .icon .logo {
    color: #006464;
    font-size: 4rem;
    font-family: "Franklin Gothic Book", arial;
    font-weight: bold;
    line-height: 0; }
    #zdravotnikZotavovacichAkci .contact .item .left .icon .logo sup, #home .contact .item .left .icon .logo sup {
      color: #ff821a;
      line-height: 0;
      font-size: 5.33333rem; }
  #zdravotnikZotavovacichAkci .contact .item .right, #home .contact .item .right {
    flex: 1 0 auto;
    color: white;
    font-size: 1.25rem;
    text-align: center; }
  #zdravotnikZotavovacichAkci .contact .item .right > div, #home .contact .item .right > div {
    margin: 0.5rem 0; }
  #zdravotnikZotavovacichAkci .contact .item .right > div a, #home .contact .item .right > div a {
    color: #ff821a; }
    #zdravotnikZotavovacichAkci .contact .item .right > div a:hover, #home .contact .item .right > div a:hover {
      text-decoration: underline; }
  #zdravotnikZotavovacichAkci .contact .item .right > div:first-letter, #home .contact .item .right > div:first-letter {
    text-transform: uppercase; }
  @media only screen and (min-width: 30em) {
    #zdravotnikZotavovacichAkci .contact .item, #home .contact .item {
      flex-direction: row; }
      #zdravotnikZotavovacichAkci .contact .item .right, #home .contact .item .right {
        text-align: left;
        font-size: 1.5rem; } }

#itik #container .content .chart {
  height: 5rem;
  width: calc(100% - 1rem);
  margin: auto;
  overflow: hidden;
  position: relative; }
  #itik #container .content .chart .line {
    height: 2px;
    width: 100%;
    min-width: 100%;
    background-color: #888;
    position: absolute;
    bottom: calc(2rem - 1px); }
  #itik #container .content .chart .points {
    position: absolute;
    height: 5rem;
    padding-bottom: 1rem;
    bottom: 0.25rem;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    min-width: 100%;
    width: max-content;
    overflow: auto; }
  #itik #container .content .chart .points .point {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    margin: 0 2rem; }
    #itik #container .content .chart .points .point .claim {
      font-size: 0.75rem;
      margin-bottom: 0.25rem; }
      #itik #container .content .chart .points .point .claim.active {
        font-weight: bold; }
    #itik #container .content .chart .points .point button {
      height: 1.5rem;
      width: 1.5rem;
      min-width: 0;
      padding: 0;
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      background-color: #ff821a; }
      #itik #container .content .chart .points .point button:hover, #itik #container .content .chart .points .point button.active {
        opacity: 1;
        background-color: #008a8a; }
    #itik #container .content .chart .points .point:first-child {
      margin-left: 0; }
    #itik #container .content .chart .points .point:last-child {
      margin-right: 0; }
  #itik #container .content .info {
    text-align: center;
    padding: 0.5rem;
    box-sizing: border-box; }
  #itik #container .content .info .total-duration, #itik #container .content .info .block-duration {
    font-weight: bold;
    margin-bottom: 0.25rem; }
  #itik #container .content .info .claim {
    font-style: italic;
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 0.25rem;
    margin-top: -0.125rem; }
  #itik #container .content .info .time {
    font-weight: bold;
    font-size: 1.75rem;
    font-style: italic; }
  #itik #container .content .itinerary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box; }
  #itik #container .content .itinerary .card {
    -webkit-box-shadow: 0 0 0.25rem 0.125rem #888;
    -moz-box-shadow: 0 0 0.25rem 0.125rem #888;
    box-shadow: 0 0 0.25rem 0.125rem #888;
    border-radius: 0.25rem;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    overflow: hidden;
    flex: 1 0 auto;
    margin: 0.5rem;
    width: 100%;
    max-width: 30rem; }
  #itik #container .content .itinerary .card .title {
    padding: 1rem;
    box-sizing: border-box;
    color: white;
    width: 100%;
    text-align: center;
    background-color: #008a8a;
    text-transform: uppercase;
    font-size: 1.25rem;
    font-weight: bold; }
  #itik #container .content .itinerary .card .enrollments {
    padding: 1rem;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; }
    #itik #container .content .itinerary .card .enrollments .leader {
      font-weight: bold;
      font-size: 1rem;
      width: 100%;
      text-align: center;
      margin-bottom: 0.5rem;
      border-radius: 0.25rem;
      -webkit-border-radius: 0.25rem;
      -moz-border-radius: 0.25rem;
      border: solid 1px #ff821a;
      padding: 0.125rem 0.5rem;
      background-color: #ff821a28;
      box-sizing: border-box; }
    #itik #container .content .itinerary .card .enrollments .enroll {
      border-radius: 0.25rem;
      -webkit-border-radius: 0.25rem;
      -moz-border-radius: 0.25rem;
      border: solid 1px #006464;
      padding: 0.125rem 0.5rem;
      margin-right: 0.125rem;
      margin-bottom: 0.25rem;
      background-color: #008a8a28;
      font-size: 0.875rem;
      width: 100%;
      max-width: 20rem;
      box-sizing: border-box;
      text-align: center; }
  @media (min-width: 45rem) {
        #itik #container .content .itinerary {
          display: flex;
          flex-direction: row;
          align-items: stretch;
          flex-wrap: wrap;
          justify-content: center; }
          #itik #container .content .itinerary .card {
            max-width: calc((100% / 2) - 1rem); } }
  @media (min-width: 60rem) {
        #itik #container .content .itinerary .card {
          max-width: calc((100% / 3) - 1rem); } }