@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?aevaex');
  src:  url('fonts/icomoon.eot?aevaex#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?aevaex') format('truetype'),
    url('fonts/icomoon.woff?aevaex') format('woff'),
    url('fonts/icomoon.svg?aevaex#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* portrait */
@media screen and (orientation : portrait)  {
    #chatbox {font-size:2.5vw !important;}
    #chatbox1 {font-size:2.5vw !important;}
    /* [id^=kavedo_player_container] {position: fixed !important;} */
      .autoplay-overlay {margin-left:0px !important;}
      [id^=livecounter_]::before {font-size: 1.8vw !important;}
      .video-container{ width:100% !important; position: sticky !important;}
      .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:after, .vjs-icon-volume-mute:after {top: 5vw !important;}
}

@media screen and (orientation : landscape)  {
     #contentarea {width: 70% !important; margin-left:auto; margin-right:auto}
     #chatbox1 {width:99% !important;font-size:1.5vw !important;}
     #chatbox {margin-right:15%!important; width:25%!important; font-size: 1.5vw !important; }
     .video-js .vjs-big-play-button .vjs-icon-placeholder::before{
         margin-top:-1vw;}
         .autoplay-overlay {margin-left:15% !important;}
    .video-container {width:60% !important; height:33.75vw !important; display: inline-block; float:left;}
    .chat-container {width:37% !important;display: inline-block; float:left;}
    #input_close {width:40% !important;display: inline-block;float:right;}
    .logout {float:left; margin-left: 0.5vw;}

}

#input_close {
  /* position: absolute; */
  /* bottom:0px; */
  /* left:0px; */
  /* top: 53.5vw; */
  /* right: 14vw; */
  z-index: 99999;
}



/* [id^=livecounter_] {
  color:rgba(255,255,255, 1);
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 99999;
  font-size: 1.5vw;
  position: fixed;
  top: 0.5vw;
  margin-left:0.5vw;
  opacity: 1;
  display: block;
  float: left;
  border-radius: 0.5vw;
  padding: 0.2vw 1vw;
}
[id^=livecounter_]::before {
  content:"\e9ce";
  color:#ffffff;
  font-size: 1vw;
  font-family: "icomoon";
  padding-right:0.5vw;
} */

.video-js .vjs-control-bar {
  /* margin-bottom: -30px; */
}
.kavedo_player_container {
  /* padding-bottom: 30px; */
}

.form-control{
  margin:0 0.5vw;
}

.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:after, .vjs-icon-volume-mute:after {
    /* content: "\e909"; */
    font-family: 'icomoon';
    /* font-family: VideoJS; */
    content: "\ea2a";
    line-height:1;
    z-index: 99999;
    font-size: 8vw;
    position: fixed;
    top:3vw;
    left:2vw;
    opacity: 1;
    display: block;
    float: left;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 1vw;
}


#loginform .btn {
  min-width:100px;
}

.vjs-menu .vjs-menu-content {
  z-index:9999;
}



body {
    font-family: arial;
    font-size: 1.5vw;
    color: #323232;
    text-align:center;
    overflow: auto !important;
    /* padding:35px;  */
  }


form, p, span {
    margin:0;
    padding:0.5vw; }

form {
  display: flex;
  width:99%;
  margin-left:auto;
  margin-right:auto;
  justify-content: center;
  align-items: center;
}
#s {
    line-height: 4vw;
    text-align: center;
    width:30%;
}


.form-group {
  position:relative;
  bottom:0px;
}

.video-container {
  margin-top:0px;
  margin-left:auto;
  margin-right:auto;
  position:relative;
}


input { font:2vw arial; }

a {
    color:#0000FF;
    text-decoration:none; }

    a:hover { text-decoration:underline; }

#wrapper, #loginform {
    margin:0 auto;
    padding-bottom:25px;
    /*background:#EBF4FB;*/
    width:100%;
    /* max-width:1280px; */
    /*border:1px solid #ACD8F0;*/
    border-radius: 5px;	}

#loginform { padding-top:8px; }

#loginform p { margin: 5px; }

#contentarea {
  width:100%;
  height:auto;
}
label {
  margin-top:7px;
}

#player{
  width:100%;
  height:auto;
  /*z-index: -1;*/

}
.vjs-modal-dialog-content {
    padding-top: 25% !important;
}

#chatbox1::after {
    /* content: "Der Chat wurde deaktiviert"; */
}


#chatbox {
  display: none !important;
  position:absolute;
  font-size:1.4vw;
    z-index:1;
    text-align:left;
    right:1vw;
    /*margin-left: 20%;*/
    /*margin-right:0%;*/
    margin-bottom:0px;
    top:1vw;
    /*bottom:5vw;*/
    padding:0.8vw;
    background:rgba(255, 255, 255, 0.5);
    max-height:10vw;
    height:auto;
    width:50%;
    border-radius: 0.5vw;
    overflow:auto; }

    #chatbox1 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap-reverse;
        text-align:left;
        margin:0 0.5vw;
        margin-bottom:0px;
        padding:10px;
        background:#fff;
        width:95%;
        border:1px solid #ACD8F0;
        border-radius: 1vw;
        overflow:auto; }

#name {
  border-radius: 0.5vw;
  border:1px solid #ACD8F0;
  width:100%;
  padding: 1vw;
  font-size: 18px;
}

#usermsg {
  width:90%;
  margin-right:0.5vw;
  border-radius: 0.5vw;
  border:1px solid #ACD8F0;
  padding: 1vw;
  font-size: 18px;
}
#input1 {padding-top:0.5vw;padding-bottom:0.5vw;}

#submit { width: 60px; }

#submitmsg, #enter {background-color: #52be80; border:none; color:white; border-radius: 0.5vw;}
#exit {background-color: rgba(214, 0, 0, 1);border:none;color:white;border-radius: 1vw;text-decoration: none;padding: 0.5vw;}

#exit:hover, #submitmsg:hover, #enter:hover {
  box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15);
    transition: box-shadow .4s ease-out;
}

.error { color: #ff0000; }

#menu { padding:12.5px 25px 12.5px 25px; }

.welcome { float:left; }

/* .logout { float:right; margin-right:0.5%; margin-top:1vw; } */

.msgln { margin:0 0 2px 0; flex-basis: 100%; }



/* Login CSS */
#logo {
  width:30%;
  margin-left:35%;
  margin-right:35%;
}
#logo img {
  width:100%;
  height:auto;
}
#login {
  width:30%;
  margin-left:35%;
  margin-right:35%;
  margin-top:3%;
}
#wrongpwd {
  width:30%;
  margin-left:35%;
  margin-right:35%;
  text-align: center;
}

input[type="submit"] {
  color: #ffffff;
  border:none;
  padding:0.5vw;
  width:30%;
  font-size:1.5vw;
  line-height: 4vw;
  background: #52be80;
}

input[type="password"] {
  padding:0.5vw;
  width:70%;
  font-size:2vw;
}
#footer {
  position: absolute;
  bottom:1vw;
  left:0px;
  width:100%;
  text-align: center;
  font-family: sans-serif;
  color: grey;
  font-size:1.5vw;
}
#footer a {
  text-decoration: none;
  color: darkgrey;
}