* {
  -webkit-touch-callout: none;
  -webkit-use-select: none;
  user-select: none; }

body {
  background: #0e74c0;
  font-family: 'Quicksand', sans-serif;
  font-weight: 300; }

img.grafik {
  display: none; }

.flex-column {
  display: flex;
  flex-direction: column; }

#rot {
  min-height: calc(100vh - 1rem);
  background-color: #0e74c0;
  padding-bottom: 1rem; }
  #rot.start, #rot.hof {
    display: block; }
  #rot #inner {
    position: relative;
    color: white; }
    #rot #inner #connect_svep {
      padding: 4vw;
      display: flex;
      align-items: center;
      flex-direction: column; }
  #rot #gusertop {
    position: absolute;
    top: 2vw;
    left: 2vw; }
    #rot #gusertop #guserdisc {
      position: relative;
      top: 0;
      left: 0;
      width: 9.5vw;
      height: 9.5vw;
      max-width: 90px;
      max-height: 90px;
      border-radius: 50%;
      overflow: hidden; }
    #rot #gusertop #guserpanel {
      position: absolute;
      left: 4.75vw;
      top: 0;
      min-width: 0;
      max-width: 0;
      height: 9.5vw;
      border-radius: 0 4.75vw 4.75vw 0;
      transition: max-width 0.4s ease-out;
      overflow: hidden; }
      #rot #gusertop #guserpanel h3 {
        min-width: 13vw;
        font-size: 12px;
        color: white;
        height: 7.5vw;
        line-height: 7vw;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding: 1vw 4vw 1vw 5.5vw;
        text-align: center; }
    #rot #gusertop.exp #guserpanel {
      max-width: 34vw;
      width: auto; }
    #rot #gusertop.anon #guserdisc {
      background-color: #8094b7;
      background-image: url(/grafik/anon-frog.svg);
      background-repeat: no-repeat;
      background-position: 60% 110%;
      background-size: 8vw;
      opacity: 0.7; }
    #rot #gusertop.anon #guserpanel {
      background-color: #b38094b7;
      background: linear-gradient(275deg, rgba(128, 148, 183, 0.7) 2%, rgba(128, 148, 183, 0) 85%); }
    #rot #gusertop.cute #guserdisc img {
      position: relative;
      width: 10.1vw;
      left: -0.3vw;
      top: -0.3vw;
      max-width: 96px; }
    #rot #gusertop.cute #guserpanel {
      background-color: #528e7f; }

.knapp {
  display: inline-block;
  height: 40px;
  min-width: 30vw;
  width: auto;
  padding: 0 0.25rem;
  bottom: 8px;
  opacity: 0.75;
  background-repeat: no-repeat;
  background-size: auto 60%;
  background-position: center;
  border: 2px solid #b8d9e4;
  border-radius: 8px;
  text-align: center;
  font-size: 1.5rem;
  line-height: 2.3rem; }
  .knapp.sel {
    background-color: #1db9ff;
    border-color: white;
    opacity: 1; }

.niva.stg1, .hof_switch.stg1 {
  background-image: url("/grafik/stg_1.png"); }
.niva.stg2, .hof_switch.stg2 {
  background-image: url("/grafik/stg_2.png"); }
.niva.stg3, .hof_switch.stg3 {
  background-image: url("/grafik/stg_3.png"); }

@media screen and (min-width: 947px) {
  #rot #gusertop.anon #guserdisc {
    background-size: 76px; }
  #rot #gusertop.cute #guserdisc img {
    left: -3px;
    top: -3px; }
  #rot #gusertop.exp #guserpanel {
    max-width: 43vw; }
  #rot #gusertop #guserpanel {
    left: 45px;
    height: 90px; }
    #rot #gusertop #guserpanel h3 {
      font-size: 24px;
      height: 58px;
      line-height: 58px;
      padding: 16px 40px; } }
#titel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1vh 1vw;
  background-color: #68b4ec; }
  #titel img#dmv {
    z-index: 10; }

/*# sourceMappingURL=Cloudmaker_connect.css.map */