* {
  max-width: 100%; }

html {
  height: 100%; }

body {
  background-color: #fff;
  font-family: OpenSans, sans-serif;
  font-size: 0.875rem;
  min-width: 18rem;
  color: black;
  /*
Block elements with bottom margins only
---------------------------------------
*/ }
  body .page {
    display: flex;
    flex-direction: column;
    min-height: 100vh; }
    body .page > #container {
      flex-grow: 1;
      width: 100%;
      position: relative;
      display: flex; }
      body .page > #container > .content {
        flex: 1 0 auto;
        position: relative;
        padding: 0.5rem;
        box-sizing: border-box;
        max-width: 100%;
        display: block; }
        @media screen and (min-width: 30rem) {
  body .page > #container > .content {
    display: flex;
    padding: 0 0.5rem 0.5rem 0; }
    body .page > #container > .content .left {
      width: 6rem;
      margin-right: 2rem; }
    body .page > #container > .content .right {
      padding-top: 1rem;
      width: calc(100% - 8rem); } }
        @media only screen and (min-width: 80em) {
  body .page > #container > .content {
    margin: 0 auto;
    max-width: 80rem; } }
  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; }

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: #36a9e1;
  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 {
  color: #29235c;
  font-family: Kalam, sans-serif;
  font-size: 2rem;
  font-weight: normal; }
  @media only screen and (min-width: 60em) {
  h1 {
    font-size: 2.5rem; } }
  h1.aktualita {
    font-size: 1.5rem;
    text-transform: none; }

h2 {
  font-family: Kalam, sans-serif;
  font-size: 1.25rem;
  font-weight: normal;
  color: #36a9e1; }
  @media only screen and (min-width: 60em) {
  h2 {
    font-size: 1.5rem; } }

h3 {
  font-family: OpenSans, sans-serif;
  font-size: 1rem;
  font-weight: 400; }
  @media only screen and (min-width: 60em) {
  h3 {
    font-size: 1.25rem; } }

h4 {
  font-family: OpenSans, sans-serif;
  font-size: 0.875rem;
  font-weight: 400; }
  @media only screen and (min-width: 60em) {
  h4 {
    font-size: 1.125rem; } }

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

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

p {
  font-weight: 300; }

table {
  border-collapse: collapse; }

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: #36a9e110; }

.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; } }

#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: 20; }
  #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;
  border-radius: 2.25rem;
  -webkit-border-radius: 2.25rem;
  -moz-border-radius: 2.25rem;
  text-transform: uppercase;
  background-color: #36a9e1;
  border: none;
  font-family: openSans, sans-serif;
  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 {
    border-radius: 1.625rem;
    -webkit-border-radius: 1.625rem;
    -moz-border-radius: 1.625rem;
    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 {
    border-radius: 3rem;
    -webkit-border-radius: 3rem;
    -moz-border-radius: 3rem;
    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: #79be48;
    -webkit-box-shadow: 0 2px 1px 0px #47a306ff;
    -moz-box-shadow: 0 2px 1px 0px #47a306ff;
    box-shadow: 0 2px 1px 0px #47a306ff; }
  button.abort, input[type="button"].abort, input[type="submit"].abort, a.button.abort {
    background-color: #f9b34b;
    -webkit-box-shadow: 0 2px 1px 0px #c88117ff;
    -moz-box-shadow: 0 2px 1px 0px #c88117ff;
    box-shadow: 0 2px 1px 0px #c88117ff; }
  button.danger, input[type="button"].danger, input[type="submit"].danger, a.button.danger {
    background-color: #e91c1c;
    -webkit-box-shadow: 0 2px 1px 0px #c11212ff;
    -moz-box-shadow: 0 2px 1px 0px #c11212ff;
    box-shadow: 0 2px 1px 0px #c11212ff; }
  button.yellow, input[type="button"].yellow, input[type="submit"].yellow, a.button.yellow {
    background-color: #f9c001;
    -webkit-box-shadow: 0 2px 1px 0px #f0b901ff;
    -moz-box-shadow: 0 2px 1px 0px #f0b901ff;
    box-shadow: 0 2px 1px 0px #f0b901ff; }
  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 #36a9e1;
  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 #36a9e1; }
  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: calc(100% - 2px);
    max-width: 30rem;
    min-height: calc(6 * (2.5rem + 2px) + 2rem + 1px);
    z-index: 41; }
    .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: openSans, sans-serif;
  font-size: 1rem;
  border: solid 1px #36a9e1;
  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: #36a9e1;
    color: #fff; }
  input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):focus {
    box-shadow: 0 0 5px 1px #36a9e1; }
  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: center;
  justify-content: center;
  max-width: 100%; }
  label > input {
    flex: 0 0 auto;
    margin-right: 0.5rem; }
  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 #36a9e1;
  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 #36a9e1; }
  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: #36a9e1;
      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 #36a9e1;
  font-size: 0.85rem;
  font-weight: 300;
  padding: 0.125rem 2.5rem 0 1rem;
  height: 2rem;
  outline: none;
  color: #36a9e1; }
  select:focus {
    box-shadow: 0 0 5px 1px #36a9e1; }
  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: openSans, sans-serif;
  font-size: 1rem;
  border: solid 1px #36a9e1;
  margin-bottom: 1rem;
  padding: 0.5rem;
  height: 4rem;
  line-height: 1.25rem;
  outline: none;
  overflow: auto;
  resize: none; }
  textarea::selection {
    background-color: #36a9e199; }
  textarea:focus {
    box-shadow: 0 0 5px 1px #36a9e1; }
  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; }

#activeUser {
  display: flex;
  align-items: center;
  position: relative; }
  #activeUser > a {
    display: flex;
    align-items: center;
    color: white; }
    #activeUser > a .strudl {
      width: 2rem;
      margin-right: 0.25rem; }
    #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 white;
      border-bottom: solid 2px white;
      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: 20;
    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 > * {
        background: #fff;
        display: block;
        padding: 0.5rem 1.5rem;
        min-width: 6rem;
        white-space: nowrap;
        color: #36a9e1;
        border-radius: 0; }
        #activeUser .menu .items > *: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 > *: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 > *:hover {
          background: #36a9e122; }
  #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; }

#footer {
  width: 100%; }
  #footer > .content {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    max-width: 80rem;
    background-color: rgba(54, 169, 225, 0.8);
    color: white;
    font-family: Kalam, sans-serif;
    height: 4rem;
    font-size: 2rem; }

#header {
  width: 100%; }
  #header > .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    max-width: 80rem;
    background-color: rgba(54, 169, 225, 0.8);
    color: white; }
    #header > .content .left {
      display: flex;
      align-items: center; }
      #header > .content .left .logo {
        display: block;
        width: 7rem;
        margin: 0.5rem; }
    #header > .content .center {
      display: none;
      text-align: center; }
      #header > .content .center .claim {
        font-family: Kalam, sans-serif;
        font-size: 1.5rem; }
    #header > .content .right {
      display: flex;
      align-items: center;
      justify-content: flex-end; }
      #header > .content .right > * {
        padding: 0.5rem; }
      #header > .content .right a[name='login'] {
        color: inherit;
        display: flex;
        align-items: center; }
        #header > .content .right a[name='login'] img {
          width: 2rem;
          margin-right: 0.25rem; }
    @media screen and (min-width: 35rem) {
  #header > .content .center {
    display: block; } }

#leftMenu .normal-menu {
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  font-size: 1.5rem;
  display: none; }
  #leftMenu .normal-menu a {
    display: block;
    padding: 0.25rem;
    color: #9f9f9f;
    font-family: Kalam, sans-serif; }
    #leftMenu .normal-menu a:nth-child(2n) {
      text-align: right; }
    #leftMenu .normal-menu a:nth-child(4n) {
      margin-right: 0.5rem; }
    #leftMenu .normal-menu a:nth-child(4n + 1) {
      margin-left: 0.5em; }
    #leftMenu .normal-menu a.active {
      font-weight: bold;
      color: #36a9e1;
      font-size: 1.875rem;
      margin: 0; }
  #leftMenu .menu-select {
    display: block;
    margin: auto; }
  @media screen and (min-width: 30rem) {
  #leftMenu {
    height: 100%; }
    #leftMenu .normal-menu {
      display: block; }

    #leftMenu .menu-select {
      display: none; } }

.control-panel {
  position: relative;
  display: flex;
  justify-content: right;
  top: 0rem;
  right: 0; }
  .control-panel .edit, .control-panel .save, .control-panel .close, .control-panel .delete {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 0.75rem;
    background-color: rgba(54, 169, 225, 0.6);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    width: 2rem;
    height: 2rem;
    margin-right: 0.25rem; }
  .control-panel .edit .icon, .control-panel .save .icon, .control-panel .close .icon, .control-panel .delete .icon {
    width: 1rem;
    height: 1rem; }
  .control-panel .edit:hover, .control-panel .save:hover, .control-panel .close:hover, .control-panel .delete:hover {
    background-color: rgba(54, 169, 225, 0.4);
    cursor: pointer; }
  .control-panel .delete {
    background-color: rgba(227, 84, 92, 0.6); }
  .control-panel .delete:hover {
    background-color: rgba(227, 84, 92, 0.4);
    cursor: pointer; }

.editableHtml, .editableText {
  position: relative;
  min-height: 1rem; }
  .editableHtml .control-panel, .editableText .control-panel {
    position: absolute;
    display: flex;
    justify-content: right;
    top: 0rem;
    right: 0; }
  .editableHtml .control-panel .edit, .editableText .control-panel .edit, .editableHtml .control-panel .delete, .editableText .control-panel .delete, .editableHtml .control-panel .text, .editableText .control-panel .text {
    display: none; }
  .editableHtml:hover .control-panel .edit, .editableText:hover .control-panel .edit, .editableHtml:hover .control-panel .delete, .editableText:hover .control-panel .delete {
    display: flex; }

.editableHtml .control-panel.editing {
  flex-direction: column;
  right: -2rem; }
  .editableHtml .control-panel .save {
    margin-bottom: 0.25rem; }

#eventGallery {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid #36a9e1;
  padding: 0.5rem 0 0 0.5rem;
  position: relative;
  background-color: white;
  margin-bottom: 1rem; }
  #eventGallery img {
    cursor: pointer;
    width: calc(50% - 0.5rem);
    display: block;
    height: 10rem;
    object-fit: cover;
    object-position: center;
    margin: 0 0.5rem 0.5rem 0; }
  #eventGallery img.more {
    display: none; }
  #eventGallery .show-more-pictures {
    width: calc(100% - 0.5rem);
    text-align: center;
    margin-bottom: 0.5rem; }
  #eventGallery.show-all img.more {
    display: block; }
  @media screen and (min-width: 40rem) {
  #eventGallery img {
    width: calc(33% - 0.5rem); } }
  @media screen and (min-width: 50rem) {
  #eventGallery img {
    width: calc(25% - 0.5rem); } }

#searchPlayer {
  max-width: 10rem; }
  #searchPlayer .row {
    position: relative;
    width: 100%; }
  #searchPlayer .row input[name="search"] {
    border-radius: 0.25rem;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    margin-bottom: 0;
    width: 100%; }
  #searchPlayer .row .list {
    position: absolute;
    background-color: #fff;
    border: solid 1px #d1d1d1;
    min-width: calc(100% - 2px);
    z-index: 1; }
    #searchPlayer .row .list button.user {
      text-transform: none;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      color: black;
      background-color: #fff;
      font-size: 0.9rem;
      border: none;
      padding: 0.25rem 0.5rem;
      border-radius: 0;
      width: 100%; }
      #searchPlayer .row .list button.user.selected {
        background-color: rgba(30, 160, 255, 0.5); }

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

.modal {
  display: flex;
  justify-content: center;
  position: fixed;
  background: rgba(0, 0, 0, 0.4);
  width: 100vw;
  height: 100%;
  color: #333;
  z-index: 40;
  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;
    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 .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: #36a9e1; }
    #mLogin .modalWrapper .container .content form .row.password input, #mRegister .modalWrapper .container .content form .row.password input {
      margin-bottom: 0; }
      #mLogin .modalWrapper .container .content form .row.password .note, #mRegister .modalWrapper .container .content form .row.password .note {
        color: #9f9f9f;
        font-size: 0.75rem; }
      #mLogin .modalWrapper .container .content form .row.gender label, #mRegister .modalWrapper .container .content form .row.gender label {
        width: 100%;
        margin-bottom: 0.5rem; }
        #mLogin .modalWrapper .container .content form .row.gender label > div, #mRegister .modalWrapper .container .content form .row.gender label > div {
          text-align: left;
          font-size: 1rem;
          width: 4rem; }

#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; } }

#mGalleryImage {
  background-color: rgba(0, 0, 0, .9);
  padding-top: 2rem; }
  #mGalleryImage .modalWrapper {
    width: auto;
    margin-top: 2rem; }
  @media screen and (min-width: 60rem) {
    #mGalleryImage .modalWrapper {
      margin-top: 1rem; } }
  #mGalleryImage .modalWrapper .container {
    position: inherit;
    margin: auto; }
  #mGalleryImage .modalWrapper .container .closer:before, #mGalleryImage .modalWrapper .container .closer:after {
    background-color: #fff; }
  #mGalleryImage .modalWrapper .container .content {
    padding: 0; }
  #mGalleryImage .modalWrapper .container .content img {
    display: block; }
  @media screen and (min-width: 60rem) {
          #mGalleryImage .modalWrapper .container .content img {
            max-height: calc(100vh - 2rem); } }
  #mGalleryImage .modalWrapper .container .content .controls {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; }
  #mGalleryImage .modalWrapper .container .content .controls a {
    display: flex;
    align-items: center;
    width: 25%; }
  #mGalleryImage .modalWrapper .container .content .controls a:hover .icon {
    display: block; }
  #mGalleryImage .modalWrapper .container .content .controls a .icon {
    background-image: url("/static/img/icons/left-right.png");
    background-repeat: no-repeat;
    background-size: 2.5rem 4rem;
    width: 1.25rem;
    height: 2rem; }
  @media screen and (min-width: 60rem) {
              #mGalleryImage .modalWrapper .container .content .controls a .icon {
                display: none; } }
  #mGalleryImage .modalWrapper .container .content .controls a.previous {
    justify-content: flex-start; }
  #mGalleryImage .modalWrapper .container .content .controls a.previous .icon {
    background-position: 0 0;
    margin-left: 1rem; }
  #mGalleryImage .modalWrapper .container .content .controls a.next {
    justify-content: flex-end; }
  #mGalleryImage .modalWrapper .container .content .controls a.next .icon {
    background-position: -1.25rem 0;
    margin-right: 1rem; }

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

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

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

#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; }
  #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; }

#doubleEliminationBracket #container > .content {
  max-width: unset;
  padding: 0.5rem;
  position: relative; }
  #doubleEliminationBracket #container > .content h1 {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 1rem;
    font-size: 7rem; }
  #doubleEliminationBracket #container > .content .bracket {
    display: flex;
    width: 100%; }
  #doubleEliminationBracket #container > .content .bracket .round {
    display: flex;
    flex-direction: column;
    min-width: 10rem;
    flex: 1 0 auto;
    font-size: 1.25rem; }
  #doubleEliminationBracket #container > .content .bracket .round:nth-child(1), #doubleEliminationBracket #container > .content .bracket .round:nth-child(2) {
    min-width: 14rem;
    flex: 0 0 auto; }
  #doubleEliminationBracket #container > .content .bracket .round .spacer {
    flex: 1 0 auto; }
  #doubleEliminationBracket #container > .content .bracket .round .spacer:first-child, #doubleEliminationBracket #container > .content .bracket .round .spacer:last-child {
    flex: 0.5 0 auto; }
  #doubleEliminationBracket #container > .content .bracket .round .hidden {
    visibility: hidden; }
  #doubleEliminationBracket #container > .content .bracket .round .team {
    height: 1.5rem;
    display: flex;
    align-items: flex-end;
    padding: 0 0.5rem;
    flex-shrink: 0; }
  #doubleEliminationBracket #container > .content .bracket .round .team .teamName {
    flex-shrink: 0;
    white-space: nowrap; }
  #doubleEliminationBracket #container > .content .bracket .round .team:nth-of-type(3) {
    align-items: flex-start; }
  #doubleEliminationBracket #container > .content .bracket .round .match-spacer {
    border: 1px solid black;
    min-height: 2rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 1 0 auto; }
  #doubleEliminationBracket #container > .content .bracket .round .match-spacer .matchNumber {
    padding-right: 0.5rem; }
  #doubleEliminationBracket #container > .content .bracket .round .match {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto; }
  #doubleEliminationBracket #container > .content .bracket .round.winner .match .match-spacer {
    border-left: none;
    border-top-right-radius: 0.5rem;
    -webkit-border-top-right-radius: 0.5rem;
    -moz-border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    -webkit-border-bottom-right-radius: 0.5rem;
    -moz-border-bottom-right-radius: 0.5rem; }
  #doubleEliminationBracket #container > .content .bracket .round.semifinal .match .match-spacer {
    border-left: none;
    border-right: none; }
  #doubleEliminationBracket #container > .content .bracket .round.loser {
    counter-increment: loser-round; }
  #doubleEliminationBracket #container > .content .bracket .round.loser .spacer:first-child, #doubleEliminationBracket #container > .content .bracket .round.loser .spacer:last-child {
    flex: 1 0 auto; }
  #doubleEliminationBracket #container > .content .bracket .round.loser .match-spacer {
    justify-content: flex-start;
    border-right: none;
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    -webkit-border-top-left-radius: 0.5rem;
    -webkit-border-bottom-left-radius: 0.5rem;
    -moz-border-top-left-radius: 0.5rem;
    -moz-border-bottom-left-radius: 0.5rem;
    flex: 1 0 auto; }
  #doubleEliminationBracket #container > .content .bracket .round.loser .match-spacer .matchNumber {
    padding-left: 0.5rem; }
  #doubleEliminationBracket #container > .content .bracket .round.loser .team {
    justify-content: flex-end; }
  #doubleEliminationBracket #container > .content .bracket .round.loser.round-0 .spacer:first-child, #doubleEliminationBracket #container > .content .bracket .round.loser.round-0 .spacer:last-child {
    flex-grow: 1; }
    #doubleEliminationBracket #container > .content .bracket .round.loser.round-0 .spacer.half {
      flex-grow: 0.5; }
  #doubleEliminationBracket #container > .content .bracket .round.loser.round-1 .spacer:first-child, #doubleEliminationBracket #container > .content .bracket .round.loser.round-1 .spacer:last-child {
    flex-grow: 0.7; }
    #doubleEliminationBracket #container > .content .bracket .round.loser.round-1 .spacer.half {
      flex-grow: 1; }
  #doubleEliminationBracket #container > .content .bracket .round.loser.round-2 .spacer:first-child, #doubleEliminationBracket #container > .content .bracket .round.loser.round-2 .spacer:last-child {
    flex-grow: 1; }
    #doubleEliminationBracket #container > .content .bracket .round.loser.round-2 .spacer.half {
      flex-grow: 1; }
  #doubleEliminationBracket #container > .content .bracket .round.loser.round-3 .spacer:first-child, #doubleEliminationBracket #container > .content .bracket .round.loser.round-3 .spacer:last-child {
    flex-grow: 0.5; }
    #doubleEliminationBracket #container > .content .bracket .round.loser.round-3 .spacer.half {
      flex-grow: 2; }
  #doubleEliminationBracket #container > .content .bracket .round.loser.round-4 .spacer:first-child, #doubleEliminationBracket #container > .content .bracket .round.loser.round-4 .spacer:last-child {
    flex-grow: 0.8; }
    #doubleEliminationBracket #container > .content .bracket .round.loser.round-4 .spacer.half {
      flex-grow: 4; }
  #doubleEliminationBracket #container > .content .bracket .round.loser.round-5 .spacer:first-child, #doubleEliminationBracket #container > .content .bracket .round.loser.round-5 .spacer:last-child {
    flex-grow: 0.5; }
    #doubleEliminationBracket #container > .content .bracket .round.loser.round-5 .spacer.half {
      flex-grow: 6; }
    #doubleEliminationBracket #container > .content .bracket .round.loser.round-5 .spacer:nth-child(2), #doubleEliminationBracket #container > .content .bracket .round.loser.round-5 .spacer:nth-last-child(2) {
      flex-grow: 0.5; }
  #doubleEliminationBracket #container > .content .bracket .round.loser.round-6 .spacer:first-child, #doubleEliminationBracket #container > .content .bracket .round.loser.round-6 .spacer:last-child {
    flex-grow: 0.8; }
    #doubleEliminationBracket #container > .content .bracket .round.loser.round-6 .spacer.half {
      flex-grow: 18; }
  #doubleEliminationBracket #container > .content .bracket .round.loser.round-7 .spacer:first-child, #doubleEliminationBracket #container > .content .bracket .round.loser.round-7 .spacer:last-child {
    flex-grow: 0; }
    #doubleEliminationBracket #container > .content .bracket .round.loser.round-7 .spacer.half {
      flex-grow: 21; }
  #doubleEliminationBracket #container > .content .bracket .final-spacer {
    width: 1rem; }

#event #container > .content .right .event-header {
  margin-bottom: 1rem; }
  #event #container > .content .right .event-header h1 {
    text-align: center; }
  #event #container > .content .right .event-header .when-and-where {
    margin-bottom: 0.5rem;
    padding: 0 1rem;
    font-family: Kalam, sans-serif;
    font-size: 1.25rem; }
  #event #container > .content .right .event-header .when-and-where .strudl {
    margin: 0 0.5rem 0.1rem 0;
    width: 1rem; }
  #event #container > .content .right .event-header .when-and-where .when {
    margin-right: 1rem; }
  #event #container > .content .right .main-picture {
    width: 30rem;
    margin: auto; }
  #event #container > .content .right .main-picture .foto-circle .border {
    stroke: #36a9e1; }
  #event #container > .content .right .participants {
    margin-bottom: 1rem; }
  #event #container > .content .right .participants .participants-header {
    margin-bottom: 0.5rem; }
  #event #container > .content .right .participants .participants-header h2 {
    margin-bottom: 0; }
  #event #container > .content .right .participants .team {
    margin-bottom: 0.5rem; }
  #event #container > .content .right .participants .team .player, #event #container > .content .right .participants .team .place {
    padding: 0.15rem 0.5rem; }
  #event #container > .content .right .participants .team .place {
    text-align: right; }
  #event #container > .content .right .participants .team input[type='number'] {
    text-align: right;
    margin-bottom: 0;
    width: 3.5rem;
    height: auto;
    min-width: auto; }
  #event #container > .content .right .participants .team .seed {
    padding: 0.15rem 0.5rem; }
  #event #container > .content .right .participants .team:nth-child(2n) {
    background-color: rgba(54, 169, 225, 0.25); }
  #event #container > .content .right .participants #eventRegister {
    max-width: 20rem;
    border: 1px solid #a1a1a1;
    padding: 1rem; }
  #event #container > .content .right .participants #eventRegister .players {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem; }
  #event #container > .content .right .participants #eventRegister .players .current-user {
    margin-right: 1rem;
    color: #9f9f9f;
    margin-top: 1.75rem; }
  #event #container > .content .right .participants #eventRegister .players .teammate .note {
    color: #9f9f9f;
    margin-bottom: 0.25rem; }
  #event #container > .content .right .participants #eventRegister input[type='submit'] {
    display: block;
    margin: auto; }
  #event #container > .content .right .participants .login-prompt {
    margin-top: 1rem;
    font-style: italic; }
  #event #container > .content .right .participants .login-prompt .buttons input[type="button"] {
    margin-top: 0.5rem; }
  @media screen and (min-width: 50rem) {
        #event #container > .content .right .event-header {
          min-height: 30rem;
          padding-right: 30rem; }
          #event #container > .content .right .event-header h1 {
            text-align: left; }
          #event #container > .content .right .event-header .when-and-where {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: wrap; }
        #event #container > .content .right .main-picture {
          position: absolute;
          top: 0rem;
          right: 0rem; }
          #event #container > .content .right .main-picture .foto-circle {
            width: 30rem;
            height: 30rem; } }

#profile #container > .content .right h1 {
  margin-bottom: 0.5rem; }
  #profile #container > .content .right .row {
    display: flex;
    margin-bottom: 0.5rem; }
  #profile #container > .content .right .row .label {
    width: 5rem;
    margin-right: 1rem;
    font-style: italic; }
  #profile #container > .content .right .row .value {
    font-weight: bold; }
  #profile #container > .content .right .row.tournaments-count {
    margin-bottom: 1rem; }
  #profile #container > .content .right .row.tournaments-count .label {
    width: auto; }
  #profile #container > .content .right .user-events {
    padding-left: 0.5rem; }
  #profile #container > .content .right .user-events .user-event {
    padding-left: 0.5rem; }
  #profile #container > .content .right .user-events .user-event h2 {
    margin-bottom: 0.25rem; }

@media print {
      #reducedGroups header {
        display: none; } }
  #reducedGroups #container > .content {
    padding: 0.5rem;
    position: relative; }
  #reducedGroups #container > .content h1 {
    text-align: center; }
  #reducedGroups #container > .content .groups {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%; }
  #reducedGroups #container > .content .groups .group {
    border: 1px solid #a1a1a1;
    padding: 0.5rem;
    border-radius: 0.5rem;
    margin-right: 1rem;
    margin-bottom: 0.5rem;
    width: calc(50% - 2.2rem); }
  #reducedGroups #container > .content .groups .group .team {
    margin-bottom: 0.5rem; }
  #reducedGroups #container > .content .groups .group .team:last-child {
    margin-bottom: 0; }
  #reducedGroups #container > .content .groups .group .team.myTeam {
    font-weight: bold; }
  @media screen and (min-width: 30em) {
          #reducedGroups #container > .content .groups .group {
            width: calc(25% - 2.2rem); } }
  @media print {
        #reducedGroups #container > .content .groups {
          page-break-inside: avoid;
          page-break-after: always; }
          #reducedGroups #container > .content .groups .player-name a {
            color: black; } }
  #reducedGroups #container > .content .firstPage h1 {
    margin-bottom: 0; }
  @media print {
        #reducedGroups #container > .content .firstPage {
          page-break-inside: avoid;
          page-break-after: always; }
          #reducedGroups #container > .content .firstPage .player-name a {
            color: black; } }
  #reducedGroups #container > .content .courts {
    display: flex;
    flex-wrap: wrap; }
  #reducedGroups #container > .content .courts .court {
    border: 1px solid #a1a1a1;
    padding: 0.5rem;
    border-radius: 0.5rem;
    margin-right: 1rem;
    margin-bottom: 1rem; }
  #reducedGroups #container > .content .courts .court .match {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0.5rem; }
  #reducedGroups #container > .content .courts .court .match .time {
    width: 2.5rem;
    text-align: right;
    margin-right: 0.5rem; }
  #reducedGroups #container > .content .courts .court .match .title {
    width: 1.5rem;
    text-align: center;
    margin-right: 0.25rem; }
  #reducedGroups #container > .content .courts .court .match .team {
    margin-right: 0.5rem;
    margin-left: 0.5rem; }
  @media print {
        #reducedGroups #container > .content .courts {
          page-break-after: always;
          page-break-inside: avoid; }
          #reducedGroups #container > .content .courts .player-name a {
            color: black; } }
  #reducedGroups #container > .content .bracket {
    display: flex;
    width: 100%; }
  #reducedGroups #container > .content .bracket .round {
    display: flex;
    flex-direction: column;
    min-width: 10rem;
    flex: 1 0 auto;
    font-size: 1.25rem; }
  #reducedGroups #container > .content .bracket .round:nth-child(1), #reducedGroups #container > .content .bracket .round:nth-child(2) {
    min-width: 14rem;
    flex: 0 0 auto; }
  #reducedGroups #container > .content .bracket .round .spacer {
    flex: 1 0 auto; }
  #reducedGroups #container > .content .bracket .round .spacer:first-child, #reducedGroups #container > .content .bracket .round .spacer:last-child {
    flex: 0.5 0 auto; }
  #reducedGroups #container > .content .bracket .round .hidden {
    visibility: hidden; }
  #reducedGroups #container > .content .bracket .round .team {
    height: 1.5rem;
    display: flex;
    align-items: flex-end;
    padding: 0 0.5rem;
    flex-shrink: 0; }
  #reducedGroups #container > .content .bracket .round .team .teamName {
    flex-shrink: 0;
    white-space: nowrap; }
  #reducedGroups #container > .content .bracket .round .team:nth-of-type(3) {
    align-items: flex-start; }
  #reducedGroups #container > .content .bracket .round .match-spacer {
    border: 1px solid black;
    min-height: 2rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 1 0 auto; }
  #reducedGroups #container > .content .bracket .round .match-spacer .matchNumber {
    padding-right: 0.5rem; }
  #reducedGroups #container > .content .bracket .round .match {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto; }
  #reducedGroups #container > .content .bracket .round.winner .match .match-spacer {
    border-left: none;
    border-top-right-radius: 0.5rem;
    -webkit-border-top-right-radius: 0.5rem;
    -moz-border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    -webkit-border-bottom-right-radius: 0.5rem;
    -moz-border-bottom-right-radius: 0.5rem; }
  #reducedGroups #container > .content .bracket .round.winner:last-child .spacer {
    border-bottom: 1px solid black; }
  #reducedGroups #container > .content .bracket .round.semifinal .match .match-spacer {
    border-left: none;
    border-right: none; }
  #reducedGroups #container > .content .bracket .final-spacer {
    width: 1rem; }

#test {
  font-size: 20rem;
  text-align: center;
  display: flex; }
  @supports (object-fit: cover) {
    background-color: #1ea0ff; }