/*****************************************************************/
/* Fonts                                                         */
/*****************************************************************/
@font-face {
  font-family: arial;
  font-stretch: normal;
  font-style: normal;
  font-weight: 100;
  src: url("../assets/NunitoSans-ExtraLight.ttf"); }

@font-face {
  font-family: arial;
  font-stretch: normal;
  font-style: normal;
  font-weight: 200;
  src: url("../assets/NunitoSans-ExtraLight.ttf"); }

@font-face {
  font-family: arial;
  font-stretch: normal;
  font-style: normal;
  font-weight: 300;
  src: url("../assets/NunitoSans-Light.ttf"); }

@font-face {
  font-family: arial;
  font-stretch: normal;
  font-style: normal;
  font-weight: 400;
  src: url("../assets/NunitoSans-Regular.ttf"); }

@font-face {
  font-family: arial;
  font-stretch: normal;
  font-style: normal;
  font-weight: 500;
  src: url("../assets/NunitoSans-Regular.ttf"); }

@font-face {
  font-family: arial;
  font-stretch: normal;
  font-style: normal;
  font-weight: 600;
  src: url("../assets/NunitoSans-Semibold.ttf"); }

@font-face {
  font-family: arial;
  font-stretch: normal;
  font-style: normal;
  font-weight: 700;
  src: url("../assets/NunitoSans-Bold.ttf"); }

@font-face {
  font-family: arial;
  font-stretch: normal;
  font-style: normal;
  font-weight: 800;
  src: url("../assets/NunitoSans-ExtraBold.ttf"); }

@font-face {
  font-family: arial;
  font-stretch: normal;
  font-style: normal;
  font-weight: 900;
  src: url("../assets/NunitoSans-Black.ttf"); }

/*****************************************************************/
/* Globals                                                       */
/*****************************************************************/
html, body {
  position: relative;
  margin: 0;
  min-width: 640px;
  min-height: 640px;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, #2181EA 100%), url("../assets/BackgroundPic.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: arial;
  font-size: calc(2 * 640px / 100);
  color: #222;
  user-select: none;
  cursor: default; }
  @media (min-width: 640px) and (min-height: 640px) {
    html, body {
      font-size: 2vmin; } }

.logo {
  position: absolute;
  left: 5%;
  top: 4.5%;
  width: 20%;
  height: 10%;
  top: calc(1 * 640px / 100);
  left: calc(2 * 640px / 100);
  width: calc(25 * 640px / 100);
  height: calc(8 * 640px / 100);
  background-image: url("../assets/easy_connect.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain; }
  @media (min-width: 640px) and (min-height: 640px) {
    .logo {
      top: 1vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .logo {
      left: 2vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .logo {
      width: 25vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .logo {
      height: 8vmin; } }

.exit {
  position: absolute;
  top: calc(2 * 640px / 100);
  right: calc(2 * 640px / 100);
  width: calc(4 * 640px / 100);
  height: calc(4 * 640px / 100);
  background-image: url("../assets/close_gray.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer; }
  @media (min-width: 640px) and (min-height: 640px) {
    .exit {
      top: 2vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .exit {
      right: 2vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .exit {
      width: 4vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .exit {
      height: 4vmin; } }

.fadeout {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(37, 55, 70, 0.9);
  z-index: 9999999; }

.fadeout.visible {
  display: block; }

/*****************************************************************/
/* Custom scrollbars (chrome only)                               */
/*****************************************************************/
.scroll::-webkit-scrollbar {
  width: calc(1 * 640px / 100);
  height: calc(1 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    .scroll::-webkit-scrollbar {
      width: 1vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .scroll::-webkit-scrollbar {
      height: 1vmin; } }

.scroll::-webkit-scrollbar-button {
  display: none; }

.scroll::-webkit-scrollbar-thumb {
  background-color: #0275D8;
  border-radius: calc(1 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    .scroll::-webkit-scrollbar-thumb {
      border-radius: 1vmin; } }

.scroll::-webkit-scrollbar,
.scroll::-webkit-scrollbar-track,
.scroll::-webkit-scrollbar-track-piece,
.scroll::-webkit-scrollbar-corner,
.scroll::-webkit-resizer {
  background-color: transparent; }

/*****************************************************************/
/* User login                                                    */
/*****************************************************************/
#userinfo {
  display: none;
  position: absolute;
  color: white;
  top: calc(4 * 640px / 100);
  right: calc(4 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #userinfo {
      top: 4vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #userinfo {
      right: 4vmin; } }

#userinfo.visible {
  display: block; }

#userinfo .login {
  font-size: calc(3 * 640px / 100);
  line-height: calc(8 * 640px / 100);
  cursor: pointer; }
  @media (min-width: 640px) and (min-height: 640px) {
    #userinfo .login {
      font-size: 3vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #userinfo .login {
      line-height: 8vmin; } }

#userinfo.loggedin .login {
  display: none; }

#userinfo .user {
  display: none;
  height: calc(8 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #userinfo .user {
      height: 8vmin; } }

#userinfo.loggedin .user {
  display: block; }

#userinfo .user .name {
  float: right;
  line-height: calc(8 * 640px / 100);
  margin-right: calc(2 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #userinfo .user .name {
      line-height: 8vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #userinfo .user .name {
      margin-right: 2vmin; } }

#userinfo .user .icon {
  float: right;
  width: calc(8 * 640px / 100);
  height: calc(8 * 640px / 100);
  background-color: #929496;
  clip-path: circle(50% at center); }
  @media (min-width: 640px) and (min-height: 640px) {
    #userinfo .user .icon {
      width: 8vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #userinfo .user .icon {
      height: 8vmin; } }

#userinfo .user .icon img {
  width: 100%;
  height: 100%; }

#userinfo .user .menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(8 * 640px / 100);
  width: calc(25 * 640px / 100);
  border-left: 1px solid rgba(238, 238, 238, 0.72);
  border-top: 1px solid rgba(238, 238, 238, 0.72);
  background-color: rgba(255, 255, 255, 0.82);
  background-image: url("../assets/noise.png");
  color: #222;
  border-radius: calc(0.25 * 640px / 100);
  z-index: 1; }
  @media (min-width: 640px) and (min-height: 640px) {
    #userinfo .user .menu {
      top: 8vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #userinfo .user .menu {
      width: 25vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #userinfo .user .menu {
      border-radius: 0.25vmin; } }

#userinfo.loggedin .user:hover .menu {
  display: block; }

#userinfo .user .menu .entry {
  float: left;
  width: calc((100% - 1 * 640px / 100) / 1);
  border-top: 1px solid #646464;
  padding: calc(0.5 * 640px / 100);
  cursor: pointer; }
  @media (min-width: 640px) and (min-height: 640px) {
    #userinfo .user .menu .entry {
      width: calc((100% - 1vmin) / 1); } }
  @media (min-width: 640px) and (min-height: 640px) {
    #userinfo .user .menu .entry {
      padding: 0.5vmin; } }

#userinfo .user .menu .entry:first-child {
  border-top: 0; }

#userinfo .user .menu .entry:hover {
  background-color: rgba(33, 129, 234, 0.1); }

/*****************************************************************/
/* Container system                                              */
/*****************************************************************/
/*
todo: replace the div.filler with flexbox system
display: flex;
flex-direction: column;
justify-content: space-evenly; //issue: we don't space between all elements
*/
.container {
  position: relative;
  left: 50%;
  top: 50%;
  width: 0%;
  height: 0%;
  border-radius: calc(0.5 * 640px / 100);
  border-left: 1px solid rgba(238, 238, 238, 0.72);
  border-top: 1px solid rgba(238, 238, 238, 0.72);
  box-shadow: 0 1vmin 2vmin rgba(0, 0, 0, 0.2); }
  @media (min-width: 640px) and (min-height: 640px) {
    .container {
      border-radius: 0.5vmin; } }

.container.animated {
  transition: left 0.25s,
 top 0.25s,
 width 0.25s,
 height 0.25s; }

.container .acrylic {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(0.5 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    .container .acrylic {
      border-radius: 0.5vmin; } }

.container .acrylic .image {
  position: absolute;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, #2181EA 100%), url("../assets/BackgroundPic.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(4px);
  /*todo:vmin*/ }

.container .background {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../assets/noise.png");
  background-color: rgba(255, 255, 255, 0.42);
  border-radius: calc(0.25 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    .container .background {
      border-radius: 0.25vmin; } }

.container.animated .background {
  transition: background 0.25s; }

.container .subcontainer {
  position: relative;
  width: 100%;
  height: 100%;
  display: none;
  opacity: 0;
  transition: opacity 0.125s; }

.container .subcontainer.visible {
  display: block; }

.container .subcontainer.fade {
  opacity: 1; }

.container.test {
  left: calc((100% - 75%) / 2);
  top: calc((100% - 40%) / 2);
  width: 75%;
  height: 40%; }

/*****************************************************************/
/* Target and PiP sources                                        */
/*****************************************************************/
.source .sourceimage {
  /*todo: render reflection with CSS instead of baked in image*/
  /*todo: stylize images using vector graphics*/
  position: relative;
  display: block;
  margin: 0 auto;
  top: calc((100% - 75%)/2);
  height: 75%;
  opacity: 0.5; }

.source .preview {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% - 1px);
  height: calc(100% - 1px); }

.source[data-aspectforce=false] .preview {
  object-fit: fill; }

.source.connectstream .preview {
  display: block; }

.source.connectstream.connectpaused .preview,
.source.connectstream.noconnection .preview,
.source.connectstream.nosignal .preview {
  display: none; }

.source .overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0) 50%); }

.source.connectstream .overlay {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 65%, #000000 100%), linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0) 50%); }

.source .sharingtext {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(48, 48, 48, 0.95);
  background-image: url("../assets/pip_sharingtext.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain; }

.source.connectstream.connectfullscreen .sharingtext {
  display: block; }

.source.connectstream.connectfullscreen.connectpaused .sharingtext {
  display: none; }

.source .novideoerror {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("../assets/pip_novideo.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain; }

.source.connectlocal.connecterrordelay.connectnovideo .novideoerror {
  display: block; }

.source.connectlocal.connecterrordelay.connectnovideo.connectnoconnection .novideoerror {
  display: none; }

.source .noconnectionerror {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("../assets/pip_noconnection.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain; }

.source.connectlocal.connecterrordelay.connectnoconnection .noconnectionerror {
  display: block; }

.source .icon {
  display: none;
  background-color: #303030; }

.source.targetpip.connectavailable .icon,
.source.connectrouted .icon {
  display: block; }

.source .icon {
  position: absolute;
  left: calc((100% - 6 * 640px / 100) / 2);
  top: calc((100% - 6 * 640px / 100) / 2);
  width: calc(6 * 640px / 100);
  height: calc(6 * 640px / 100);
  border-radius: calc(6 * 640px / 100);
  background-image: url("../assets/pip_play.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer; }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .icon {
      left: calc((100% - 6vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .icon {
      top: calc((100% - 6vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .icon {
      width: 6vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .icon {
      height: 6vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .icon {
      border-radius: 6vmin; } }

.source .sourcelist-overlay {
  position: absolute;
  left: calc((100% - 8 * 640px / 100) / 2);
  top: calc((100% - 8 * 640px / 100) / 2);
  width: calc(8 * 640px / 100);
  height: calc(8 * 640px / 100);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer; }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .sourcelist-overlay {
      left: calc((100% - 8vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .sourcelist-overlay {
      top: calc((100% - 8vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .sourcelist-overlay {
      width: 8vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .sourcelist-overlay {
      height: 8vmin; } }

.source.connectlocal .icon {
  background-image: url("../assets/pip_pause.svg"); }

.source.connectlocal.connectpaused .icon {
  background-image: url("../assets/pip_play.svg"); }

.source .menu {
  display: none;
  position: absolute;
  left: calc(1.5 * 640px / 100);
  top: calc(1.5 * 640px / 100);
  width: calc(2 * 640px / 100);
  height: calc(2 * 640px / 100);
  background-image: url("../assets/pip_menu.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer; }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .menu {
      left: 1.5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .menu {
      top: 1.5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .menu {
      width: 2vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .menu {
      height: 2vmin; } }

.source.connectrouted.connectused .menu {
  display: block; }

.source .menu .dropdown {
  display: none;
  position: absolute;
  left: 0;
  top: calc(2 * 640px / 100);
  width: calc(15 * 640px / 100);
  border-left: 1px solid rgba(238, 238, 238, 0.72);
  border-top: 1px solid rgba(238, 238, 238, 0.72);
  background-color: rgba(255, 255, 255, 0.82);
  background-image: url("../assets/noise.png");
  color: #222;
  border-radius: calc(0.25 * 640px / 100);
  z-index: 1; }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .menu .dropdown {
      top: 2vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .menu .dropdown {
      width: 15vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .menu .dropdown {
      border-radius: 0.25vmin; } }

.source .menu:hover .dropdown {
  display: block; }

.source .menu .dropdown .entry {
  display: none;
  border-top: 1px solid #646464;
  width: calc((100% - 1 * 640px / 100) / 1);
  padding: calc(0.5 * 640px / 100);
  cursor: pointer; }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .menu .dropdown .entry {
      width: calc((100% - 1vmin) / 1); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .menu .dropdown .entry {
      padding: 0.5vmin; } }

.source .menu .dropdown .entry:first-child {
  border-top: 0; }

.source .menu .dropdown .entry:hover {
  background-color: rgba(33, 129, 234, 0.1); }

.source .menu .dropdown .entry.checkbox::before {
  content: '\2610\00a0';
  /* unchecked */ }

.source.vcsharing .menu .dropdown .entry.checkbox::before {
  content: '\2611\00a0';
  /* checked */ }

.source.connectused .menu .dropdown .entry.metrics {
  display: block; }

.ongoingvc .source.vcshareable .menu .dropdown .entry.vcshare {
  display: block; }

.source.targetpip .menu {
  display: none; }

.source .close {
  position: absolute;
  right: calc(1.5 * 640px / 100);
  top: calc(1.5 * 640px / 100);
  width: calc(2 * 640px / 100);
  height: calc(2 * 640px / 100);
  background-image: url("../assets/close_white.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer; }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .close {
      right: 1.5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .close {
      top: 1.5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .close {
      width: 2vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .close {
      height: 2vmin; } }

.source.targetpip .close {
  display: none; }

.source.targetpip.hascontent .close {
  display: block; }

.source .vcsharingtext {
  display: none;
  position: absolute;
  left: calc(1.5 * 640px / 100);
  bottom: calc(3.5 * 640px / 100);
  font-size: calc(1.5 * 640px / 100);
  color: #C00; }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .vcsharingtext {
      left: 1.5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .vcsharingtext {
      bottom: 3.5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .vcsharingtext {
      font-size: 1.5vmin; } }

.source .vcsharingtext::after {
  content: 'VC Sharing'; }

.source.vcsharing .vcsharingtext {
  display: block; }

.source .name {
  position: absolute;
  left: calc(1.5 * 640px / 100);
  bottom: calc(1.5 * 640px / 100);
  font-size: calc(1.5 * 640px / 100);
  color: white; }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .name {
      left: 1.5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .name {
      bottom: 1.5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .name {
      font-size: 1.5vmin; } }

.source .note {
  display: block;
  position: absolute;
  right: calc(1.5 * 640px / 100);
  bottom: calc(1.5 * 640px / 100);
  font-size: calc(1.5 * 640px / 100);
  color: white; }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .note {
      right: 1.5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .note {
      bottom: 1.5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .source .note {
      font-size: 1.5vmin; } }

#displaywall .source.displaysharing {
  background-color: transparent;
  display: none; }

#displaywall .source.displaysharing.pipvisible {
  display: block;
  pointer-events: none; }

#displaywall .source.displaysharing .sharedarea {
  display: block;
  color: white;
  width: calc(12 * 640px / 100);
  margin: 0px auto;
  padding: 10px;
  border: 1px solid white;
  border-radius: 0px 0px 4px 4px;
  text-align: center;
  pointer-events: all; }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .source.displaysharing .sharedarea {
      width: 12vmin; } }

#displaywall .source.displaysharing .sharedarea:after {
  content: "Shared area"; }

#displaywall .source.displaysharing .overlay,
#displaywall .source.displaysharing .name,
#displaywall .source.displaysharing .close,
#displaywall .source.displaysharing .border {
  display: none; }

#displaywall .source.displaysharing .outline {
  border: 2px solid white;
  pointer-events: none; }

/*****************************************************************/
/* Source selection                                              */
/*****************************************************************/
#sources {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: not-allowed;
  z-index: 100000; }

#sources.visible {
  display: block; }

#sources .wrap {
  position: absolute;
  left: calc((100% - 90 * 640px / 100) / 2);
  top: calc(5 * 640px / 100);
  width: calc(90 * 640px / 100);
  height: calc(12 * 640px / 100);
  background-color: rgba(37, 55, 70, 0.9);
  border-radius: calc(0.25 * 640px / 100);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  cursor: default; }
  @media (min-width: 640px) and (min-height: 640px) {
    #sources .wrap {
      left: calc((100% - 90vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    #sources .wrap {
      top: 5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #sources .wrap {
      width: 90vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #sources .wrap {
      height: 12vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #sources .wrap {
      border-radius: 0.25vmin; } }

#sources .wrap .source {
  position: relative;
  display: none;
  color: white;
  background-color: black;
  margin-left: calc(1 * 640px / 100);
  margin-top: calc(1 * 640px / 100);
  width: calc(17.7777777778 * 640px / 100);
  height: calc(10 * 640px / 100);
  text-align: center;
  cursor: pointer; }
  @media (min-width: 640px) and (min-height: 640px) {
    #sources .wrap .source {
      margin-left: 1vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #sources .wrap .source {
      margin-top: 1vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #sources .wrap .source {
      width: 17.7777777778vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #sources .wrap .source {
      height: 10vmin; } }

#sources .wrap .source.connectrouted.connectused,
#sources .wrap .source.connectrouted.connectavailable {
  display: inline-block; }

#sources .wrap .source.connectrouted.connectlocal .icon {
  display: none; }

/*****************************************************************/
/* Stream metrics                                                */
/*****************************************************************/
#metrics {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(37, 55, 70, 0.9);
  cursor: not-allowed;
  z-index: 100000; }

#metrics.visible {
  display: block; }

#metrics .wrap {
  position: absolute;
  left: calc((100% - 50 * 640px / 100) / 2);
  top: calc((100% - 50 * 640px / 100) / 2);
  width: calc(50 * 640px / 100);
  height: calc(50 * 640px / 100);
  padding: calc(2 * 640px / 100);
  background-color: #eeeeee;
  border-radius: calc(0.25 * 640px / 100);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  cursor: default; }
  @media (min-width: 640px) and (min-height: 640px) {
    #metrics .wrap {
      left: calc((100% - 50vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    #metrics .wrap {
      top: calc((100% - 50vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    #metrics .wrap {
      width: 50vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #metrics .wrap {
      height: 50vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #metrics .wrap {
      padding: 2vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #metrics .wrap {
      border-radius: 0.25vmin; } }

#metrics .category {
  float: left;
  width: 100%;
  font-weight: bold;
  margin-top: calc(1.5 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #metrics .category {
      margin-top: 1.5vmin; } }

#metrics .stat {
  float: left;
  width: 100%;
  border-top: 1px solid #646464; }

#metrics .stat .name {
  float: left;
  width: 30%; }

#metrics .stat .value {
  float: left;
  width: 70%; }

/*****************************************************************/
/* Error popup                                                   */
/*****************************************************************/
#error {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(37, 55, 70, 0.62);
  z-index: 9999999; }

#error.visible {
  display: block; }

#error .box {
  position: absolute;
  left: calc((100% - 50 * 640px / 100) / 2);
  top: calc((100% - 40 * 640px / 100) / 2);
  width: calc(50 * 640px / 100);
  height: calc(40 * 640px / 100);
  padding: calc(2 * 640px / 100);
  background-color: #eeeeee;
  box-sizing: border-box; }
  @media (min-width: 640px) and (min-height: 640px) {
    #error .box {
      left: calc((100% - 50vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    #error .box {
      top: calc((100% - 40vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    #error .box {
      width: 50vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #error .box {
      height: 40vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #error .box {
      padding: 2vmin; } }

#error .box .icon {
  width: 100%;
  height: calc(8 * 640px / 100);
  margin-top: calc(2 * 640px / 100);
  margin-bottom: calc(2 * 640px / 100);
  background-image: url("../assets/icon_info.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain; }
  @media (min-width: 640px) and (min-height: 640px) {
    #error .box .icon {
      height: 8vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #error .box .icon {
      margin-top: 2vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #error .box .icon {
      margin-bottom: 2vmin; } }

#error .box .title {
  font-size: calc(4 * 640px / 100);
  font-weight: 300;
  width: 100%;
  height: calc(4 * 640px / 100);
  line-height: calc(4 * 640px / 100);
  padding-bottom: calc(2 * 640px / 100);
  text-align: center; }
  @media (min-width: 640px) and (min-height: 640px) {
    #error .box .title {
      font-size: 4vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #error .box .title {
      height: 4vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #error .box .title {
      line-height: 4vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #error .box .title {
      padding-bottom: 2vmin; } }

#error .box .description {
  height: calc(10 * 640px / 100);
  text-align: center;
  line-height: 150%; }
  @media (min-width: 640px) and (min-height: 640px) {
    #error .box .description {
      height: 10vmin; } }

#error .box .button {
  width: calc(42 * 640px / 100);
  height: calc(6 * 640px / 100);
  line-height: calc(6 * 640px / 100);
  text-align: center;
  margin: 0 auto;
  background-color: #0275D8;
  color: white;
  cursor: pointer; }
  @media (min-width: 640px) and (min-height: 640px) {
    #error .box .button {
      width: 42vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #error .box .button {
      height: 6vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #error .box .button {
      line-height: 6vmin; } }

/*****************************************************************/
/* Debug buttons                                                 */
/*****************************************************************/
.debug {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0; }

.debug.visible {
  display: block; }

.debug:hover {
  opacity: 1; }

.debug div {
  float: left;
  margin: 2px;
  background-color: #929496; }

/*****************************************************************/
/* Mode: Installation                                            */
/*****************************************************************/
.container.installation {
  left: calc((100% - 80 * 640px / 100) / 2);
  top: calc((100% - 50 * 640px / 100) / 2);
  width: calc(80 * 640px / 100);
  height: calc(50 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.installation {
      left: calc((100% - 80vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.installation {
      top: calc((100% - 50vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.installation {
      width: 80vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.installation {
      height: 50vmin; } }

#installation .filler {
  height: calc((100% - 30.5 * 640px / 100) / 4); }
  @media (min-width: 640px) and (min-height: 640px) {
    #installation .filler {
      height: calc((100% - 30.5vmin) / 4); } }

#installation .header {
  width: 100%;
  font-size: calc(4.5 * 640px / 100);
  font-weight: 300;
  height: calc(4.5 * 640px / 100);
  line-height: 100%;
  text-align: center; }
  @media (min-width: 640px) and (min-height: 640px) {
    #installation .header {
      font-size: 4.5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #installation .header {
      height: 4.5vmin; } }

#installation .description {
  color: #646464;
  width: 80%;
  margin: 0 auto;
  height: calc(6 * 640px / 100);
  line-height: 150%;
  text-align: center; }
  @media (min-width: 640px) and (min-height: 640px) {
    #installation .description {
      height: 6vmin; } }

#installation .actions {
  width: 100%;
  height: calc(20 * 640px / 100);
  text-align: center; }
  @media (min-width: 640px) and (min-height: 640px) {
    #installation .actions {
      height: 20vmin; } }

#installation .actions .split {
  float: left;
  width: 1px;
  height: 100%;
  background-color: #646464; }

#installation .actions .action {
  float: left;
  height: 100%;
  width: calc(80% / 3 - 2px);
  margin-left: calc(20% / 6);
  margin-right: calc(20% / 6);
  box-sizing: border-box; }

#installation .actions .action:hover {
  background-color: rgba(33, 129, 234, 0.1);
  cursor: pointer; }

#installation .actions .action .icon {
  height: 25%;
  margin-top: 10%;
  margin-bottom: 10%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain; }

#installation .actions .action.chromestore .icon {
  background-image: url("../assets/icon_chromestore.svg"); }

#installation .actions .action.chromeadd .icon {
  background-image: url("../assets/icon_addchrome.svg"); }

#installation .actions .action.reload .icon {
  background-image: url("../assets/icon_refresh.svg"); }

#installation .actions .action .name {
  height: 25%;
  font-weight: bold; }

#installation .actions .action .note {
  font-size: calc(1.5 * 640px / 100);
  color: #646464; }
  @media (min-width: 640px) and (min-height: 640px) {
    #installation .actions .action .note {
      font-size: 1.5vmin; } }

#installation .actions .action .link {
  height: 10%;
  font-size: calc(1.5 * 640px / 100);
  color: #0275D8;
  cursor: pointer; }
  @media (min-width: 640px) and (min-height: 640px) {
    #installation .actions .action .link {
      font-size: 1.5vmin; } }

#installation .actions .action:hover .link {
  text-decoration: underline; }

#installation .button {
  height: calc(6 * 640px / 100);
  line-height: calc(6 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #installation .button {
      height: 6vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #installation .button {
      line-height: 6vmin; } }

/*****************************************************************/
/* Mode: Landing page                                            */
/*****************************************************************/
.container.landingpage {
  left: calc((100% - 90 * 640px / 100) / 2);
  top: calc((100% - 60 * 640px / 100) / 2);
  width: calc(90 * 640px / 100);
  height: calc(60 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.landingpage {
      left: calc((100% - 90vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.landingpage {
      top: calc((100% - 60vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.landingpage {
      width: 90vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.landingpage {
      height: 60vmin; } }

#landingpage .filler {
  height: calc((100% - 35 * 640px / 100) / 4); }
  @media (min-width: 640px) and (min-height: 640px) {
    #landingpage .filler {
      height: calc((100% - 35vmin) / 4); } }

#landingpage .header {
  font-size: calc(6 * 640px / 100);
  font-weight: 300;
  width: 100%;
  height: calc(6 * 640px / 100);
  line-height: 100%;
  text-align: center; }
  @media (min-width: 640px) and (min-height: 640px) {
    #landingpage .header {
      font-size: 6vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #landingpage .header {
      height: 6vmin; } }

#landingpage .description {
  color: #646464;
  width: 100%;
  height: calc(6 * 640px / 100);
  line-height: 150%;
  text-align: center; }
  @media (min-width: 640px) and (min-height: 640px) {
    #landingpage .description {
      height: 6vmin; } }

#landingpage .actions {
  width: 100%;
  height: calc(25 * 640px / 100);
  text-align: center; }
  @media (min-width: 640px) and (min-height: 640px) {
    #landingpage .actions {
      height: 25vmin; } }

#landingpage .actions .action {
  float: left;
  height: 100%;
  width: calc(90% / 3);
  margin-left: calc(25% / 15);
  margin-right: calc(25% / 15);
  box-sizing: border-box; }

#landingpage .actions .action:hover {
  background-color: rgba(33, 129, 234, 0.1);
  cursor: pointer; }

#landingpage .actions .action .icon {
  height: 25%;
  width: 80%;
  margin: 5% auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain; }

#landingpage .actions .action.login .icon {
  background-image: url("../assets/action_login.svg"); }

#landingpage .actions .action.code .icon {
  background-image: url("../assets/action_accesscode.svg"); }

#landingpage .actions .action.browse .icon {
  background-image: url("../assets/action_browse.svg"); }

#landingpage .actions .action .name {
  height: 15%; }

#landingpage .actions .action .note {
  height: 50%;
  font-size: calc(1.5 * 640px / 100);
  color: #646464; }
  @media (min-width: 640px) and (min-height: 640px) {
    #landingpage .actions .action .note {
      font-size: 1.5vmin; } }

#landingpage .actions .action .link {
  height: 10%;
  font-size: calc(1.5 * 640px / 100);
  color: #0275D8;
  cursor: pointer; }
  @media (min-width: 640px) and (min-height: 640px) {
    #landingpage .actions .action .link {
      font-size: 1.5vmin; } }

#landingpage .actions .action .link:hover {
  text-decoration: underline; }

#landingpage .actions .action .help {
  cursor: help; }

/*****************************************************************/
/* Mode: Personalized                                            */
/*****************************************************************/
.container.personalized {
  left: calc((100% - 99 * 640px / 100) / 2);
  top: calc((100% - 60 * 640px / 100) / 2);
  width: calc(99 * 640px / 100);
  height: calc(60 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.personalized {
      left: calc((100% - 99vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.personalized {
      top: calc((100% - 60vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.personalized {
      width: 99vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.personalized {
      height: 60vmin; } }

#personalized .filler {
  height: calc((100% - 49 * 640px / 100) / 4); }
  @media (min-width: 640px) and (min-height: 640px) {
    #personalized .filler {
      height: calc((100% - 49vmin) / 4); } }

#personalized .image {
  margin: 0 auto;
  width: calc(3 * 640px / 100);
  height: calc(3 * 640px / 100);
  clip-path: circle(50% at center); }
  @media (min-width: 640px) and (min-height: 640px) {
    #personalized .image {
      width: 3vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #personalized .image {
      height: 3vmin; } }

#personalized .image img {
  width: 100%;
  height: 100%; }

#personalized .header {
  font-size: calc(6 * 640px / 100);
  font-weight: 300;
  width: 100%;
  height: calc(6 * 640px / 100);
  line-height: 100%;
  text-align: center; }
  @media (min-width: 640px) and (min-height: 640px) {
    #personalized .header {
      font-size: 6vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #personalized .header {
      height: 6vmin; } }

#personalized .description {
  color: #646464;
  width: 100%;
  height: calc(3 * 640px / 100);
  line-height: 300%;
  text-align: center; }
  @media (min-width: 640px) and (min-height: 640px) {
    #personalized .description {
      height: 3vmin; } }

#personalized .actions {
  width: 100%;
  height: calc(37 * 640px / 100);
  text-align: center; }
  @media (min-width: 640px) and (min-height: 640px) {
    #personalized .actions {
      height: 37vmin; } }

#personalized .actions .action {
  float: left;
  height: 100%;
  width: calc(90% / 4);
  margin-left: calc(10% / 8);
  margin-right: calc(10% / 8);
  box-sizing: border-box; }

#personalized .actions .action:hover {
  background-color: rgba(33, 129, 234, 0.1);
  cursor: pointer; }

#personalized .actions .action .icon {
  height: 25%;
  width: 80%;
  margin: 5% auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain; }

#personalized .actions .action.recent .icon {
  background-image: url("../assets/action_clock.svg"); }

#personalized .actions .action.external .icon {
  height: 20%;
  margin: 9% auto;
  background-image: url("../assets/action_calendar.svg"); }

#personalized .actions .action.code .icon {
  background-image: url("../assets/action_accesscode.svg"); }

#personalized .actions .action.browse .icon {
  height: 18%;
  margin: 11% auto;
  background-image: url("../assets/action_browse.svg"); }

#personalized .actions .action .name {
  height: 10%; }

#personalized .actions .action .note {
  height: 50%;
  font-size: calc(1.5 * 640px / 100);
  color: #646464; }
  @media (min-width: 640px) and (min-height: 640px) {
    #personalized .actions .action .note {
      font-size: 1.5vmin; } }

#personalized .actions .action .note .entry {
  margin: 0 auto;
  width: 90%;
  margin-bottom: calc(1 * 640px / 100);
  padding: calc(0.5 * 640px / 100);
  background-color: white;
  cursor: pointer; }
  @media (min-width: 640px) and (min-height: 640px) {
    #personalized .actions .action .note .entry {
      margin-bottom: 1vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #personalized .actions .action .note .entry {
      padding: 0.5vmin; } }

#personalized .actions .action .note .entry:hover {
  background-color: #e8f2fc; }

#personalized .actions .action .note .entry .location {
  color: black;
  font-weight: bold; }

#personalized .actions .action .note .entry .timeEnd
#personalized .actions .action .note .entry .timeStart
#personalized .actions .action .note .entry .time {
  font-size: calc(1 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #personalized .actions .action .note .entry .timeEnd
#personalized .actions .action .note .entry .timeStart
#personalized .actions .action .note .entry .time {
      font-size: 1vmin; } }

#personalized .actions .action .link {
  height: 10%;
  font-size: calc(1.5 * 640px / 100);
  color: #0275D8;
  cursor: pointer; }
  @media (min-width: 640px) and (min-height: 640px) {
    #personalized .actions .action .link {
      font-size: 1.5vmin; } }

#personalized .actions .action .link:hover {
  text-decoration: underline; }

#personalized .actions .action .help {
  cursor: help; }

/*****************************************************************/
/* Mode: Help pages                                              */
/*****************************************************************/
.container.login_help,
.container.external_help,
.container.accesscode_help,
.container.browserooms_help {
  left: calc((100% - 70 * 640px / 100) / 2);
  top: calc((100% - 45 * 640px / 100) / 2);
  width: calc(70 * 640px / 100);
  height: calc(45 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.login_help,
    .container.external_help,
    .container.accesscode_help,
    .container.browserooms_help {
      left: calc((100% - 70vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.login_help,
    .container.external_help,
    .container.accesscode_help,
    .container.browserooms_help {
      top: calc((100% - 45vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.login_help,
    .container.external_help,
    .container.accesscode_help,
    .container.browserooms_help {
      width: 70vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.login_help,
    .container.external_help,
    .container.accesscode_help,
    .container.browserooms_help {
      height: 45vmin; } }

#login_help .filler,
#external_help .filler,
#accesscode_help .filler,
#browserooms_help .filler {
  height: calc(3 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #login_help .filler,
    #external_help .filler,
    #accesscode_help .filler,
    #browserooms_help .filler {
      height: 3vmin; } }

#login_help .header,
#external_help .header,
#accesscode_help .header,
#browserooms_help .header {
  font-size: calc(6 * 640px / 100);
  font-weight: 300;
  width: 100%;
  line-height: 100%;
  text-align: center; }
  @media (min-width: 640px) and (min-height: 640px) {
    #login_help .header,
    #external_help .header,
    #accesscode_help .header,
    #browserooms_help .header {
      font-size: 6vmin; } }

#login_help .description,
#external_help .description,
#accesscode_help .description,
#browserooms_help .description {
  color: #646464;
  margin: 0 auto;
  width: 80%;
  line-height: 150%;
  text-align: center; }

#login_help .button,
#external_help .button,
#accesscode_help .button,
#browserooms_help .button {
  position: absolute;
  left: calc((100% - 40%) / 2);
  bottom: 5%;
  margin: 0 auto;
  width: 40%;
  text-align: center;
  height: calc(6 * 640px / 100);
  line-height: calc(6 * 640px / 100);
  background-color: #0275D8;
  color: white;
  cursor: pointer; }
  @media (min-width: 640px) and (min-height: 640px) {
    #login_help .button,
    #external_help .button,
    #accesscode_help .button,
    #browserooms_help .button {
      height: 6vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #login_help .button,
    #external_help .button,
    #accesscode_help .button,
    #browserooms_help .button {
      line-height: 6vmin; } }

/*****************************************************************/
/* Mode: Login                                                   */
/*****************************************************************/
.container.login {
  left: calc((100% - 60 * 640px / 100) / 2);
  top: calc((100% - 40 * 640px / 100) / 2);
  width: calc(60 * 640px / 100);
  height: calc(40 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.login {
      left: calc((100% - 60vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.login {
      top: calc((100% - 40vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.login {
      width: 60vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.login {
      height: 40vmin; } }

#login .filler {
  height: calc((100% - 30 * 640px / 100) / 5); }
  @media (min-width: 640px) and (min-height: 640px) {
    #login .filler {
      height: calc((100% - 30vmin) / 5); } }

#login .header {
  font-size: calc(6 * 640px / 100);
  font-weight: 300;
  width: 100%;
  height: calc(6 * 640px / 100);
  line-height: 100%;
  text-align: center; }
  @media (min-width: 640px) and (min-height: 640px) {
    #login .header {
      font-size: 6vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #login .header {
      height: 6vmin; } }

#login .description {
  color: #646464;
  width: 100%;
  height: calc(6 * 640px / 100);
  line-height: 150%;
  text-align: center; }
  @media (min-width: 640px) and (min-height: 640px) {
    #login .description {
      height: 6vmin; } }

#login .description.hidden {
  display: none; }

#login .error {
  display: none;
  height: calc(6 * 640px / 100);
  text-align: center; }
  @media (min-width: 640px) and (min-height: 640px) {
    #login .error {
      height: 6vmin; } }

#login .error.visible {
  display: block;
  color: red; }

#login .error.blink {
  transition: color 2.0s;
  color: #646464; }

#login .credentials {
  margin: 0 auto;
  width: 40%;
  height: calc(12 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #login .credentials {
      height: 12vmin; } }

#login .credentials input {
  background-color: transparent;
  width: 100%;
  height: 40%;
  border: 0;
  border-bottom: 1px solid #969696;
  font-size: calc(2 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #login .credentials input {
      font-size: 2vmin; } }

#login .credentials input::placeholder {
  color: #646464;
  font-size: calc(1.5 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #login .credentials input::placeholder {
      font-size: 1.5vmin; } }

#login .credentials input:active,
#login .credentials input:focus,
#login .credentials input:hover {
  outline: none;
  border: 0;
  border-bottom: 1px solid #0275D8; }

#login .button {
  margin: 0 auto;
  width: 40%;
  text-align: center;
  height: calc(6 * 640px / 100);
  line-height: calc(6 * 640px / 100);
  background-color: #0275D8;
  color: white;
  cursor: pointer; }
  @media (min-width: 640px) and (min-height: 640px) {
    #login .button {
      height: 6vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #login .button {
      line-height: 6vmin; } }

/*****************************************************************/
/* Mode: Recently used                                           */
/*****************************************************************/
.container.recent {
  left: calc((100% - 80 * 640px / 100) / 2);
  top: calc((100% - 55 * 640px / 100) / 2);
  width: calc(80 * 640px / 100);
  height: calc(55 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.recent {
      left: calc((100% - 80vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.recent {
      top: calc((100% - 55vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.recent {
      width: 80vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.recent {
      height: 55vmin; } }

#recent .filler {
  height: calc((100% - 42 * 640px / 100) / 4); }
  @media (min-width: 640px) and (min-height: 640px) {
    #recent .filler {
      height: calc((100% - 42vmin) / 4); } }

#recent .header {
  font-size: calc(6 * 640px / 100);
  font-weight: 300;
  width: 100%;
  height: calc(6 * 640px / 100);
  line-height: 100%;
  text-align: center; }
  @media (min-width: 640px) and (min-height: 640px) {
    #recent .header {
      font-size: 6vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #recent .header {
      height: 6vmin; } }

#recent .description {
  color: #646464;
  width: 100%;
  height: calc(6 * 640px / 100);
  line-height: 150%;
  text-align: center; }
  @media (min-width: 640px) and (min-height: 640px) {
    #recent .description {
      height: 6vmin; } }

#recent .list {
  margin-left: calc((100% - 95%) / 2);
  width: 95%;
  height: calc(30 * 640px / 100);
  border: 1px solid #969696;
  box-sizing: border-box;
  overflow-y: auto;
  background-color: rgba(255, 255, 255, 0.351); }
  @media (min-width: 640px) and (min-height: 640px) {
    #recent .list {
      height: 30vmin; } }

#recent .list .entry {
  width: 100%;
  height: calc(5 * 640px / 100);
  line-height: calc(5 * 640px / 100);
  border-bottom: 1px solid #969696;
  background-color: rgba(255, 255, 255, 0.72);
  cursor: pointer; }
  @media (min-width: 640px) and (min-height: 640px) {
    #recent .list .entry {
      height: 5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #recent .list .entry {
      line-height: 5vmin; } }

#recent .list .entry:hover {
  background-color: #2181EA;
  color: white; }

#recent .list .entry .time {
  float: left;
  width: 30%;
  margin-left: 10px;
  font-size: large; }

#recent .list .entry .name {
  float: left;
  width: 30%;
  font-size: large;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

/*****************************************************************/
/* Mode: External sources                                        */
/*****************************************************************/
.container.external {
  left: calc((100% - 80 * 640px / 100) / 2);
  top: calc((100% - 55 * 640px / 100) / 2);
  width: calc(80 * 640px / 100);
  height: calc(55 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.external {
      left: calc((100% - 80vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.external {
      top: calc((100% - 55vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.external {
      width: 80vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.external {
      height: 55vmin; } }

#external .filler {
  height: calc((100% - 45 * 640px / 100) / 4); }
  @media (min-width: 640px) and (min-height: 640px) {
    #external .filler {
      height: calc((100% - 45vmin) / 4); } }

#external .header {
  font-size: calc(6 * 640px / 100);
  font-weight: 300;
  width: 100%;
  height: calc(6 * 640px / 100);
  line-height: 100%;
  text-align: center; }
  @media (min-width: 640px) and (min-height: 640px) {
    #external .header {
      font-size: 6vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #external .header {
      height: 6vmin; } }

#external .description {
  color: #646464;
  width: 100%;
  height: calc(6 * 640px / 100);
  line-height: 150%;
  text-align: center; }
  @media (min-width: 640px) and (min-height: 640px) {
    #external .description {
      height: 6vmin; } }

#external .list {
  margin-left: calc((100% - 95%) / 2);
  width: 95%;
  height: calc(30 * 640px / 100);
  border: 1px solid #969696;
  box-sizing: border-box;
  overflow-y: auto;
  background-color: rgba(255, 255, 255, 0.351); }
  @media (min-width: 640px) and (min-height: 640px) {
    #external .list {
      height: 30vmin; } }

#external .list .entry {
  width: 100%;
  height: calc(5 * 640px / 100);
  line-height: calc(5 * 640px / 100);
  border-bottom: 1px solid #969696;
  background-color: rgba(255, 255, 255, 0.72);
  cursor: pointer; }
  @media (min-width: 640px) and (min-height: 640px) {
    #external .list .entry {
      height: 5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #external .list .entry {
      line-height: 5vmin; } }

#external .list .entry:hover {
  background-color: #2181EA;
  color: white; }

#external .list .entry .time {
  float: left;
  width: 40%;
  margin-left: 10px;
  font-size: large; }

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 5px; }

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); }

#external .list .entry .name {
  font-size: large;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

/*****************************************************************/
/* Mode: Access code                                             */
/*****************************************************************/
.container.accesscode {
  left: calc((100% - 80 * 640px / 100) / 2);
  top: calc((100% - 50 * 640px / 100) / 2);
  width: calc(80 * 640px / 100);
  height: calc(50 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.accesscode {
      left: calc((100% - 80vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.accesscode {
      top: calc((100% - 50vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.accesscode {
      width: 80vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.accesscode {
      height: 50vmin; } }

#accesscode .filler {
  height: calc((100% - 22 * 640px / 100) / 4); }
  @media (min-width: 640px) and (min-height: 640px) {
    #accesscode .filler {
      height: calc((100% - 22vmin) / 4); } }

#accesscode .header {
  font-size: calc(6 * 640px / 100);
  font-weight: 300;
  width: 100%;
  height: calc(6 * 640px / 100);
  text-align: center; }
  @media (min-width: 640px) and (min-height: 640px) {
    #accesscode .header {
      font-size: 6vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #accesscode .header {
      height: 6vmin; } }

#accesscode .description {
  color: #646464;
  width: 100%;
  height: calc(4 * 640px / 100);
  text-align: center; }
  @media (min-width: 640px) and (min-height: 640px) {
    #accesscode .description {
      height: 4vmin; } }

#accesscode .description.hidden {
  display: none; }

#accesscode .error {
  display: none;
  height: calc(4 * 640px / 100);
  text-align: center; }
  @media (min-width: 640px) and (min-height: 640px) {
    #accesscode .error {
      height: 4vmin; } }

#accesscode .error.visible {
  display: block;
  color: red; }

#accesscode .error.blink {
  transition: color 2.0s;
  color: #646464; }

#accesscode .code {
  margin: 0 auto;
  height: calc(12 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #accesscode .code {
      height: 12vmin; } }

#accesscode .code.digits4 {
  width: calc(41.6 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #accesscode .code.digits4 {
      width: 41.6vmin; } }

#accesscode .code.digits5 {
  width: calc(52 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #accesscode .code.digits5 {
      width: 52vmin; } }

#accesscode .code.digits6 {
  width: calc(62.4 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #accesscode .code.digits6 {
      width: 62.4vmin; } }

#accesscode .code.digits7 {
  width: calc(72.8 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #accesscode .code.digits7 {
      width: 72.8vmin; } }

#accesscode .code.digits8 {
  width: calc(83.2 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #accesscode .code.digits8 {
      width: 83.2vmin; } }

#accesscode .code.digits9 {
  width: calc(93.6 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #accesscode .code.digits9 {
      width: 93.6vmin; } }

#accesscode .code .digit {
  float: left;
  width: calc(10 * 640px / 100);
  height: calc(10 * 640px / 100);
  line-height: calc(10.5 * 640px / 100);
  text-align: center;
  font-size: calc(4 * 640px / 100);
  font-weight: 300;
  color: #646464;
  background-color: white;
  margin: calc(0.2 * 640px / 100);
  padding: 0; }
  @media (min-width: 640px) and (min-height: 640px) {
    #accesscode .code .digit {
      width: 10vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #accesscode .code .digit {
      height: 10vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #accesscode .code .digit {
      line-height: 10.5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #accesscode .code .digit {
      font-size: 4vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #accesscode .code .digit {
      margin: 0.2vmin; } }

/*****************************************************************/
/* Mode: Browse rooms                                            */
/*****************************************************************/
.container.browserooms {
  left: calc((100% - 80 * 640px / 100) / 2);
  top: calc((100% - 80 * 640px / 100) / 2);
  width: calc(80 * 640px / 100);
  height: calc(80 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.browserooms {
      left: calc((100% - 80vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.browserooms {
      top: calc((100% - 80vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.browserooms {
      width: 80vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.browserooms {
      height: 80vmin; } }

#browserooms .filler {
  height: calc((100% - 60 * 640px / 100) / 4); }
  @media (min-width: 640px) and (min-height: 640px) {
    #browserooms .filler {
      height: calc((100% - 60vmin) / 4); } }

#browserooms .header {
  font-size: calc(6 * 640px / 100);
  font-weight: 300;
  width: 100%;
  height: calc(6 * 640px / 100);
  text-align: center; }
  @media (min-width: 640px) and (min-height: 640px) {
    #browserooms .header {
      font-size: 6vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #browserooms .header {
      height: 6vmin; } }

#browserooms .description {
  color: #646464;
  width: 100%;
  height: calc(4 * 640px / 100);
  text-align: center; }
  @media (min-width: 640px) and (min-height: 640px) {
    #browserooms .description {
      height: 4vmin; } }

#browserooms .menu {
  margin: 0 auto;
  width: 95%;
  height: calc(3 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #browserooms .menu {
      height: 3vmin; } }

#browserooms .menu .entry {
  float: left;
  color: #0275D8;
  cursor: pointer;
  margin-right: calc(4 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #browserooms .menu .entry {
      margin-right: 4vmin; } }

#browserooms .menu .entry:hover {
  text-decoration: underline; }

#browserooms .list {
  margin-left: calc((100% - 95%) / 2);
  width: 95%;
  height: calc(53 * 640px / 100);
  border: 1px solid #969696;
  box-sizing: border-box;
  overflow-y: auto;
  background-color: rgba(255, 255, 255, 0.351); }
  @media (min-width: 640px) and (min-height: 640px) {
    #browserooms .list {
      height: 53vmin; } }

#browserooms .listcontainer {
  position: relative; }

#browserooms .list .category {
  position: relative; }

#browserooms .list .category .display,
#browserooms .list .entry {
  height: calc(5 * 640px / 100);
  line-height: calc(5 * 640px / 100);
  border-bottom: 1px solid #969696;
  cursor: pointer; }
  @media (min-width: 640px) and (min-height: 640px) {
    #browserooms .list .category .display,
    #browserooms .list .entry {
      height: 5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #browserooms .list .category .display,
    #browserooms .list .entry {
      line-height: 5vmin; } }

#browserooms .list .category .display:hover,
#browserooms .list .category .display:hover:before,
#browserooms .list .category.expanded > .display,
#browserooms .list .category.expanded > .display:before {
  background-color: rgba(255, 255, 255, 0.72); }

#browserooms .list .entry:hover,
#browserooms .list .entry:hover:before {
  background-color: #2181EA;
  color: white; }

#browserooms .listcontainer > .entry,
#browserooms .list .category .display,
#browserooms .list .category .entries {
  margin-left: calc(6 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #browserooms .listcontainer > .entry,
    #browserooms .list .category .display,
    #browserooms .list .category .entries {
      margin-left: 6vmin; } }

#browserooms .list .category .entries {
  display: none; }

#browserooms .list .category.expanded > .entries {
  display: block; }

#browserooms .list .category .display:before,
#browserooms .list .entry:before {
  position: absolute;
  content: ' ';
  left: calc(-100% + 6 * 640px / 100);
  width: 100%;
  height: calc(5 * 640px / 100);
  border-bottom: 1px solid #969696; }
  @media (min-width: 640px) and (min-height: 640px) {
    #browserooms .list .category .display:before,
    #browserooms .list .entry:before {
      height: 5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #browserooms .list .category .display:before,
    #browserooms .list .entry:before {
      left: calc(-100% + 6vmin); } }

#browserooms .list .category .display:after {
  position: absolute;
  content: ' ';
  left: 0;
  width: calc(3 * 640px / 100);
  height: calc(3 * 640px / 100);
  margin-top: calc(1 * 640px / 100);
  margin-bottom: calc(1 * 640px / 100);
  margin-left: calc(1.5 * 640px / 100);
  margin-right: calc(1.5 * 640px / 100);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain; }
  @media (min-width: 640px) and (min-height: 640px) {
    #browserooms .list .category .display:after {
      width: 3vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #browserooms .list .category .display:after {
      height: 3vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #browserooms .list .category .display:after {
      margin-top: 1vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #browserooms .list .category .display:after {
      margin-bottom: 1vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #browserooms .list .category .display:after {
      margin-left: 1.5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #browserooms .list .category .display:after {
      margin-right: 1.5vmin; } }

#browserooms .list .category .display:after {
  background-image: url("../assets/browse_plus.svg"); }

#browserooms .list .category.expanded > .display:after {
  background-image: url("../assets/browse_minus.svg"); }

#browserooms .list .entry .note {
  float: right;
  height: calc(3 * 640px / 100);
  line-height: calc(3 * 640px / 100);
  color: #646464;
  margin: calc(0.5 * 640px / 100);
  padding: calc(0.5 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #browserooms .list .entry .note {
      height: 3vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #browserooms .list .entry .note {
      line-height: 3vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #browserooms .list .entry .note {
      margin: 0.5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #browserooms .list .entry .note {
      padding: 0.5vmin; } }

#browserooms .list .entry .note.offline {
  background-color: #B94B4B;
  color: white; }

/*
#browserooms .list .entry:hover .note {
    background-color: $white;
    color: $blue2;
}
*/
/*****************************************************************/
/* Mode: Connecting                                              */
/*****************************************************************/
.container.connecting {
  left: calc((100% - 40 * 640px / 100) / 2);
  top: calc((100% - 40 * 640px / 100) / 2);
  width: calc(40 * 640px / 100);
  height: calc(40 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.connecting {
      left: calc((100% - 40vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.connecting {
      top: calc((100% - 40vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.connecting {
      width: 40vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.connecting {
      height: 40vmin; } }

@keyframes spinning1 {
  from {
    transform: scale(0.4) rotate(0deg); }
  to {
    transform: scale(0.4) rotate(360deg); } }

@keyframes spinning2 {
  from {
    transform: scale(0.6) rotate(360deg); }
  to {
    transform: scale(0.6) rotate(0deg); } }

@keyframes spinning3 {
  from {
    transform: scale(0.8) rotate(0deg); }
  to {
    transform: scale(0.8) rotate(360deg); } }

#connecting .spinner {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  background-image: url("../assets/opencircle.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain; }

#connecting .spinner.spinner1 {
  animation-name: spinning1;
  animation-duration: 3s; }

#connecting .spinner.spinner2 {
  animation-name: spinning2;
  animation-duration: 2s; }

#connecting .spinner.spinner3 {
  animation-name: spinning3;
  animation-duration: 5s; }

/*****************************************************************/
/* Mode: Authentication                                          */
/*****************************************************************/
.container.authentication {
  left: calc((100% - 70 * 640px / 100) / 2);
  top: calc((100% - 60 * 640px / 100) / 2);
  width: calc(70 * 640px / 100);
  height: calc(60 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.authentication {
      left: calc((100% - 70vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.authentication {
      top: calc((100% - 60vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.authentication {
      width: 70vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.authentication {
      height: 60vmin; } }

#authentication .filler {
  height: calc((100% - 46.5 * 640px / 100) / 4); }
  @media (min-width: 640px) and (min-height: 640px) {
    #authentication .filler {
      height: calc((100% - 46.5vmin) / 4); } }

#authentication .header {
  width: 100%;
  font-size: calc(4.5 * 640px / 100);
  font-weight: 300;
  height: calc(4.5 * 640px / 100);
  line-height: 100%;
  text-align: center; }
  @media (min-width: 640px) and (min-height: 640px) {
    #authentication .header {
      font-size: 4.5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #authentication .header {
      height: 4.5vmin; } }

#authentication .description {
  color: #646464;
  width: 80%;
  margin: 0 auto;
  height: calc(6 * 640px / 100);
  line-height: 150%;
  text-align: center; }
  @media (min-width: 640px) and (min-height: 640px) {
    #authentication .description {
      height: 6vmin; } }

#authentication .easycontroller {
  width: calc(20 * 640px / 100);
  height: calc(20 * 640px / 100);
  margin: 0 auto;
  background-image: url("../assets/easy_controller.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain; }
  @media (min-width: 640px) and (min-height: 640px) {
    #authentication .easycontroller {
      width: 20vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #authentication .easycontroller {
      height: 20vmin; } }

#authentication .choices {
  width: calc(62 * 640px / 100);
  height: calc(16 * 640px / 100);
  margin: 0 auto; }
  @media (min-width: 640px) and (min-height: 640px) {
    #authentication .choices {
      width: 62vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #authentication .choices {
      height: 16vmin; } }

#authentication .choices .alternative {
  float: left;
  width: calc(10 * 640px / 100);
  height: 100%;
  line-height: calc(15 * 640px / 100);
  text-align: center;
  color: #646464;
  font-weight: bold; }
  @media (min-width: 640px) and (min-height: 640px) {
    #authentication .choices .alternative {
      width: 10vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #authentication .choices .alternative {
      line-height: 15vmin; } }

#authentication .choices .button {
  float: left;
  width: calc(26 * 640px / 100);
  height: 100%;
  border-radius: calc(1 * 640px / 100);
  text-align: center;
  color: white;
  padding-top: calc(1 * 640px / 100);
  box-sizing: border-box; }
  @media (min-width: 640px) and (min-height: 640px) {
    #authentication .choices .button {
      width: 26vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #authentication .choices .button {
      border-radius: 1vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #authentication .choices .button {
      padding-top: 1vmin; } }

#authentication .choices .button.wait {
  background-color: #16A249; }

#authentication .choices .button.pincode {
  background-color: #0275D8;
  cursor: pointer; }

#authentication .choices .button .text1 {
  text-align: center;
  vertical-align: center;
  height: 100%;
  padding-top: 15%; }

#authentication .choices .button .text {
  text-align: center; }

#authentication .choices .button .text2 {
  font-size: calc(1.5 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #authentication .choices .button .text2 {
      font-size: 1.5vmin; } }

#authentication .choices .button .icon {
  width: 50%;
  height: calc(5 * 640px / 100);
  margin: 0 auto;
  margin-top: calc(1 * 640px / 100);
  margin-bottom: calc(1 * 640px / 100);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-sizing: border-box; }
  @media (min-width: 640px) and (min-height: 640px) {
    #authentication .choices .button .icon {
      height: 5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #authentication .choices .button .icon {
      margin-top: 1vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #authentication .choices .button .icon {
      margin-bottom: 1vmin; } }

#authentication .choices .button.wait .icon {
  background-image: url("../assets/icon_clock.svg"); }

#authentication .choices .button.pincode .icon {
  background-image: url("../assets/icon_accesscode.svg"); }

/*****************************************************************/
/* Tabs                                                          */
/*****************************************************************/
#roomname {
  position: absolute;
  top: 3.3%;
  width: 100%;
  color: rgba(255, 255, 255, 0);
  transition: color 0.5s;
  font-size: calc(6 * 640px / 100);
  font-weight: 200;
  text-align: center; }
  @media (min-width: 640px) and (min-height: 640px) {
    #roomname {
      font-size: 6vmin; } }

#roomname.visible {
  color: white; }

.tabs {
  position: absolute;
  display: block;
  width: 100%;
  bottom: 0;
  height: 0;
  background-color: white;
  overflow: hidden; }

.tabs.animated {
  transition: bottom 0.5s,
 height 0.5s; }

.tabs.visible {
  height: calc(10 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    .tabs.visible {
      height: 10vmin; } }

.tabs .wrapper {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%; }

.tabs .wrapper .tab {
  position: relative;
  display: none;
  cursor: pointer;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain; }

.tabs .wrapper .tab.enabled {
  display: table-cell; }

.tabs .wrapper .tab:hover {
  background-color: rgba(33, 129, 234, 0.1); }

.tabs .wrapper .tab.active {
  background-color: #0275D8;
  color: white; }

.tabs .wrapper .tab.tab_displaywall {
  background-image: url("../assets/tab_display.svg"); }

.tabs .wrapper .tab.tab_displaywall.active {
  background-image: url("../assets/tab_display_active.svg"); }

.tabs .wrapper .tab.tab_targets {
  background-image: url("../assets/tab_targets.svg"); }

.tabs .wrapper .tab.tab_targets:hover {
  background-image: url("../assets/tab_targets_hover.svg"); }

.tabs .wrapper .tab.tab_targets.active {
  background-image: url("../assets/tab_targets_active.svg"); }

.tabs .wrapper .tab.tab_participants {
  background-image: url("../assets/tab_participants.svg"); }

.tabs .wrapper .tab.tab_participants.active {
  background-image: url("../assets/tab_participants_active.svg"); }

.tabs .wrapper .tab.tab_endsession {
  background-image: url("../assets/tab_exit.svg"); }

.tabs .wrapper .tab.tab_endsession.active {
  background-image: url("../assets/tab_exit_active.svg"); }

@keyframes pulsingblue {
  0% {
    background-color: #0275D8; }
  75% {
    background-color: #0275D8; }
  100% {
    background-color: transparent; } }

.tabs .wrapper .tab.tab_participants .notification {
  display: none;
  position: absolute;
  top: calc(1 * 640px / 100);
  right: calc(1 * 640px / 100);
  width: calc(1 * 640px / 100);
  height: calc(1 * 640px / 100);
  border-radius: calc(1 * 640px / 100);
  animation-name: pulsingblue;
  animation-duration: 4s;
  animation-direction: alternate;
  animation-iteration-count: infinite; }
  @media (min-width: 640px) and (min-height: 640px) {
    .tabs .wrapper .tab.tab_participants .notification {
      top: 1vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .tabs .wrapper .tab.tab_participants .notification {
      right: 1vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .tabs .wrapper .tab.tab_participants .notification {
      width: 1vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .tabs .wrapper .tab.tab_participants .notification {
      height: 1vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .tabs .wrapper .tab.tab_participants .notification {
      border-radius: 1vmin; } }

.tabs .wrapper .tab.tab_participants .notification.visible {
  display: block; }

.tabs .wrapper .tab::after {
  position: absolute;
  display: block;
  content: ' ';
  top: 0;
  left: 0;
  width: calc(0.1 * 640px / 100);
  height: calc(8 * 640px / 100);
  margin-top: calc(1 * 640px / 100);
  background-color: #646464; }
  @media (min-width: 640px) and (min-height: 640px) {
    .tabs .wrapper .tab::after {
      width: 0.1vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .tabs .wrapper .tab::after {
      height: 8vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .tabs .wrapper .tab::after {
      margin-top: 1vmin; } }

.tabs .wrapper .tab:first-child:after,
.tabs .wrapper .tab.active:after,
.tabs .wrapper .tab.active + .tab:after {
  display: none; }

.tabs .wrapper .tab .sub {
  position: absolute;
  left: 0;
  top: calc(7 * 640px / 100);
  width: 100%;
  text-align: center;
  font-size: calc(1.5 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    .tabs .wrapper .tab .sub {
      top: 7vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .tabs .wrapper .tab .sub {
      font-size: 1.5vmin; } }

/*****************************************************************/
/* Mode: Display                                                 */
/*****************************************************************/
.container.displaywall {
  left: calc((100% - 95 * 640px / 100) / 2);
  top: calc((100% - 55 * 640px / 100) / 2);
  width: calc(95 * 640px / 100);
  height: calc(55 * 640px / 100);
  font-size: 100%;
  position: relative;
  border-left: 1px solid rgba(137, 146, 154, 0.82);
  border-top: 1px solid rgba(137, 146, 154, 0.82); }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.displaywall {
      left: calc((100% - 95vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.displaywall {
      top: calc((100% - 55vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.displaywall {
      width: 95vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.displaywall {
      height: 55vmin; } }

.container.displaywall .background {
  background-color: rgba(37, 55, 70, 0.62); }

#displaywall .topbar {
  position: absolute;
  top: calc(-4 * 640px / 100);
  height: calc(4 * 640px / 100);
  width: 100%; }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .topbar {
      top: -4vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .topbar {
      height: 4vmin; } }

#displaywall .topbar .primarysource {
  float: left;
  background-color: #253746;
  color: white;
  height: calc(4 * 640px / 100);
  line-height: calc(4 * 640px / 100);
  padding-left: calc(1 * 640px / 100);
  padding-right: calc(1 * 640px / 100);
  margin-right: 1px;
  cursor: pointer; }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .topbar .primarysource {
      height: 4vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .topbar .primarysource {
      line-height: 4vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .topbar .primarysource {
      padding-left: 1vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .topbar .primarysource {
      padding-right: 1vmin; } }

#displaywall .topbar .primarysource.active {
  background-color: white;
  color: #253746; }

#displaywall .bottombar {
  position: absolute;
  bottom: calc(-4 * 640px / 100);
  height: calc(4 * 640px / 100);
  width: 100%; }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .bottombar {
      bottom: -4vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .bottombar {
      height: 4vmin; } }

#displaywall .bottombar .button {
  display: none;
  float: right;
  height: calc(4 * 640px / 100);
  line-height: calc(4 * 640px / 100);
  padding-left: calc(1 * 640px / 100);
  padding-right: calc(1 * 640px / 100);
  text-align: center;
  margin-left: 1px;
  background-color: #253746;
  color: white;
  cursor: pointer; }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .bottombar .button {
      height: 4vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .bottombar .button {
      line-height: 4vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .bottombar .button {
      padding-left: 1vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .bottombar .button {
      padding-right: 1vmin; } }

#displaywall .bottombar .button.visible {
  display: block; }

#displaywall .bottombar .button.share,
#displaywall .bottombar .button.show {
  background-color: white;
  color: #0275D8; }

#displaywall .bottombar .button.addpip {
  background-color: white;
  color: #0275D8;
  padding-left: calc(4 * 640px / 100);
  padding-right: calc(4 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .bottombar .button.addpip {
      padding-left: 4vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .bottombar .button.addpip {
      padding-right: 4vmin; } }

#displaywall .bottombar .button.stop {
  background-color: white;
  color: #ED6060; }

#displaywall .pip {
  position: absolute;
  width: 0;
  height: 0;
  background-color: #303030;
  transition: left 0.18s,
 top 0.18s,
 width 0.18s,
 height 0.18s;
  transition-timing-function: linear; }

#displaywall .pip.dragging {
  transition: initial; }

#displaywall .pip .outline {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #646464; }

#displaywall .pip .border {
  position: absolute; }

#displaywall .pip .border.t,
#displaywall .pip .border.b {
  left: calc(1 * 640px / 100);
  width: calc((100% - 2 * 640px / 100) / 1);
  height: calc(2 * 640px / 100);
  cursor: n-resize; }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .pip .border.t,
    #displaywall .pip .border.b {
      left: 1vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .pip .border.t,
    #displaywall .pip .border.b {
      width: calc((100% - 2vmin) / 1); } }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .pip .border.t,
    #displaywall .pip .border.b {
      height: 2vmin; } }

#displaywall .pip .border.t {
  top: calc(-1 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .pip .border.t {
      top: -1vmin; } }

#displaywall .pip .border.b {
  bottom: calc(-1 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .pip .border.b {
      bottom: -1vmin; } }

#displaywall .pip .border.l,
#displaywall .pip .border.r {
  top: calc(1 * 640px / 100);
  width: calc(2 * 640px / 100);
  height: calc((100% - 2 * 640px / 100) / 1);
  cursor: w-resize; }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .pip .border.l,
    #displaywall .pip .border.r {
      top: 1vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .pip .border.l,
    #displaywall .pip .border.r {
      width: 2vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .pip .border.l,
    #displaywall .pip .border.r {
      height: calc((100% - 2vmin) / 1); } }

#displaywall .pip .border.l {
  left: calc(-1 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .pip .border.l {
      left: -1vmin; } }

#displaywall .pip .border.r {
  right: calc(-1 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .pip .border.r {
      right: -1vmin; } }

#displaywall .pip .border.tl,
#displaywall .pip .border.tr,
#displaywall .pip .border.bl,
#displaywall .pip .border.br {
  width: calc(2 * 640px / 100);
  height: calc(2 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .pip .border.tl,
    #displaywall .pip .border.tr,
    #displaywall .pip .border.bl,
    #displaywall .pip .border.br {
      width: 2vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .pip .border.tl,
    #displaywall .pip .border.tr,
    #displaywall .pip .border.bl,
    #displaywall .pip .border.br {
      height: 2vmin; } }

#displaywall .pip .border.tl,
#displaywall .pip .border.br {
  cursor: se-resize; }

#displaywall .pip .border.tr,
#displaywall .pip .border.bl {
  cursor: ne-resize; }

#displaywall .pip .border.tl {
  left: calc(-1 * 640px / 100);
  top: calc(-1 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .pip .border.tl {
      left: -1vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .pip .border.tl {
      top: -1vmin; } }

#displaywall .pip .border.tr {
  right: calc(-1 * 640px / 100);
  top: calc(-1 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .pip .border.tr {
      right: -1vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .pip .border.tr {
      top: -1vmin; } }

#displaywall .pip .border.bl {
  left: calc(-1 * 640px / 100);
  bottom: calc(-1 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .pip .border.bl {
      left: -1vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .pip .border.bl {
      bottom: -1vmin; } }

#displaywall .pip .border.br {
  right: calc(-1 * 640px / 100);
  bottom: calc(-1 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .pip .border.br {
      right: -1vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #displaywall .pip .border.br {
      bottom: -1vmin; } }

/*****************************************************************/
/* Mode: Targets                                                 */
/*****************************************************************/
.container.targets {
  left: calc((100% - 75 * 640px / 100) / 2);
  top: calc((100% - 55 * 640px / 100) / 2);
  width: calc(75 * 640px / 100);
  height: calc(45 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.targets {
      left: calc((100% - 75vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.targets {
      top: calc((100% - 55vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.targets {
      width: 75vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.targets {
      height: 45vmin; } }

.container.targets[data-multiplerooms="1"] {
  left: calc((100% - 98 * 640px / 100) / 2 + 23 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.targets[data-multiplerooms="1"] {
      left: calc((100% - 98vmin) / 2 + 23vmin); } }

#targets .roomlist {
  display: none;
  position: absolute;
  width: calc(22 * 640px / 100);
  height: 100%;
  left: calc(-23 * 640px / 100);
  overflow-y: auto;
  background-color: rgba(238, 238, 238, 0.82); }
  @media (min-width: 640px) and (min-height: 640px) {
    #targets .roomlist {
      width: 22vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #targets .roomlist {
      left: -23vmin; } }

#targets .roomlist {
  display: none; }

#targets .roomlist.visible {
  display: block; }

#targets .roomlist .entry {
  width: 100%;
  height: calc(5 * 640px / 100);
  line-height: calc(5 * 640px / 100);
  padding-left: calc(1 * 640px / 100);
  border-bottom: 1px solid #646464;
  box-sizing: border-box;
  cursor: pointer; }
  @media (min-width: 640px) and (min-height: 640px) {
    #targets .roomlist .entry {
      height: 5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #targets .roomlist .entry {
      line-height: 5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #targets .roomlist .entry {
      padding-left: 1vmin; } }

#targets .roomlist .entry.active {
  background-color: #0275D8;
  color: white; }

#targets .room {
  display: none;
  width: 100%;
  height: 100%; }

#targets .room.visible {
  display: block; }

#targets .room .filler {
  float: left;
  width: 100%; }

#targets .room .target {
  float: left;
  width: 98%;
  height: 98%;
  margin-left: 1%;
  margin-top: 0.5%;
  box-sizing: border-box; }

#targets .room .target .sharebtn {
  display: block;
  float: right;
  height: calc(4 * 640px / 100);
  line-height: calc(4 * 640px / 100);
  padding-left: calc(1 * 640px / 100);
  padding-right: calc(1 * 640px / 100);
  opacity: 1;
  text-align: center;
  margin-left: 1px;
  background-color: white;
  color: #0275D8;
  cursor: pointer; }
  @media (min-width: 640px) and (min-height: 640px) {
    #targets .room .target .sharebtn {
      height: 4vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #targets .room .target .sharebtn {
      line-height: 4vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #targets .room .target .sharebtn {
      padding-left: 1vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #targets .room .target .sharebtn {
      padding-right: 1vmin; } }

#targets .room .target .sharebtn.hidden {
  display: none; }

#targets .room .target .header {
  width: 100%;
  height: calc(3 * 640px / 100);
  line-height: calc(3 * 640px / 100);
  background-color: #646464;
  text-align: center; }
  @media (min-width: 640px) and (min-height: 640px) {
    #targets .room .target .header {
      height: 3vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #targets .room .target .header {
      line-height: 3vmin; } }

#targets .room .target .source {
  position: relative;
  width: 100%;
  height: calc((100% - 3 * 640px / 100) / 1);
  background-color: #303030;
  cursor: pointer; }
  @media (min-width: 640px) and (min-height: 640px) {
    #targets .room .target .source {
      height: calc((100% - 3vmin) / 1); } }

/*****************************************************************/
/* Mode: Participants                                            */
/*****************************************************************/
.container.participants {
  left: calc((100% - 90 * 640px / 100) / 2);
  top: calc((100% - 60 * 640px / 100) / 2);
  width: calc(90 * 640px / 100);
  height: calc(50 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.participants {
      left: calc((100% - 90vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.participants {
      top: calc((100% - 60vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.participants {
      width: 90vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.participants {
      height: 50vmin; } }

#participants .filler {
  height: 10%; }

#participants .header {
  font-size: calc(5 * 640px / 100);
  font-weight: 300;
  height: calc(9 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants .header {
      font-size: 5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants .header {
      height: 9vmin; } }

#participants .list {
  float: left;
  width: 45%;
  height: 80%;
  margin-left: 4%;
  margin-right: 1%; }

#participants .list .people {
  width: 100%;
  height: calc((100% - 9 * 640px / 100) / 1);
  overflow-y: auto; }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants .list .people {
      height: calc((100% - 9vmin) / 1); } }

#participants .list .people .person {
  width: 100%;
  height: calc(5 * 640px / 100);
  line-height: calc(5 * 640px / 100);
  margin-bottom: 1px;
  box-sizing: border-box; }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants .list .people .person {
      height: 5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants .list .people .person {
      line-height: 5vmin; } }

#participants .list .people .person .icon {
  float: left;
  padding: calc(0.5 * 640px / 100);
  width: calc(4 * 640px / 100);
  height: calc(4 * 640px / 100);
  background-color: rgba(255, 255, 255, 0.72); }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants .list .people .person .icon {
      padding: 0.5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants .list .people .person .icon {
      width: 4vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants .list .people .person .icon {
      height: 4vmin; } }

#participants .list .people .person .icon img {
  clip-path: circle(50% at center);
  background-color: #929496;
  width: 100%;
  height: 100%; }

#participants .list .people .person .icon.man {
  background-image: url("../assets/participant_man.svg"); }

#participants .list .people .person .icon.woman {
  background-image: url("../assets/participant_woman.svg"); }

#participants .list .people .person .name {
  background-color: rgba(255, 255, 255, 0.72);
  float: left;
  width: calc((100% - 5 * 640px / 100) / 1);
  height: calc(5 * 640px / 100);
  box-sizing: border-box; }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants .list .people .person .name {
      width: calc((100% - 5vmin) / 1); } }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants .list .people .person .name {
      height: 5vmin; } }

#participants.loggedin .list .people .person.kickable .name {
  width: calc(100% - 10 * 640px / 100 - 1px); }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants.loggedin .list .people .person.kickable .name {
      width: calc(100% - 10vmin - 1px); } }

#participants .list .people .person:hover .icon,
#participants .list .people .person:hover .name {
  background-color: white; }

#participants .list .people .person .kick {
  display: none; }

#participants.loggedin .list .people .person.kickable .kick {
  display: block;
  float: right;
  width: calc(5 * 640px / 100);
  height: calc(5 * 640px / 100);
  padding: calc(1.5 * 640px / 100);
  background-color: rgba(255, 255, 255, 0.82);
  box-sizing: border-box;
  cursor: pointer; }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants.loggedin .list .people .person.kickable .kick {
      width: 5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants.loggedin .list .people .person.kickable .kick {
      height: 5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants.loggedin .list .people .person.kickable .kick {
      padding: 1.5vmin; } }

#participants.loggedin .list .people .person:hover .kick {
  background-color: #ED6060; }

#participants .list .people .person .kick::before {
  float: left;
  content: " ";
  width: 100%;
  height: 100%;
  background-image: url("../assets/close_gray.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-sizing: border-box; }

#participants .list .people .person:hover .kick::before {
  background-image: url("../assets/close_white.svg"); }

#participants .chat {
  float: right;
  width: 45%;
  height: 80%;
  margin-left: 1%;
  margin-right: 4%; }

#participants .chat .room {
  background-color: rgba(255, 255, 255, 0.72);
  width: 100%;
  height: calc(100% - 13 * 640px / 100 - 1px);
  margin-bottom: 1px;
  overflow-y: auto;
  user-select: text;
  cursor: initial; }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants .chat .room {
      height: calc(100% - 13vmin - 1px); } }

#participants .chat .room .message {
  float: left;
  width: 100%;
  font-size: calc(1.5 * 640px / 100);
  padding: calc(1 * 640px / 100);
  box-sizing: border-box; }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants .chat .room .message {
      font-size: 1.5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants .chat .room .message {
      padding: 1vmin; } }

#participants .chat .room .message .author {
  float: left;
  color: #929496; }

#participants .chat .room .message.sent .author {
  display: none; }

#participants .chat .room .message .content {
  float: left;
  clear: both;
  border-radius: calc(0.5 * 640px / 100);
  padding-top: calc(0.5 * 640px / 100);
  padding-bottom: calc(0.5 * 640px / 100);
  padding-left: calc(1 * 640px / 100);
  padding-right: calc(1 * 640px / 100);
  max-width: 75%; }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants .chat .room .message .content {
      border-radius: 0.5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants .chat .room .message .content {
      padding-top: 0.5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants .chat .room .message .content {
      padding-bottom: 0.5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants .chat .room .message .content {
      padding-left: 1vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants .chat .room .message .content {
      padding-right: 1vmin; } }

#participants .chat .room .message.sent .content::selection {
  background-color: #929496; }

#participants .chat .room .message.sent .content {
  float: right;
  background-color: #0275D8;
  color: white; }

#participants .chat .room .message.received .content {
  background-color: #929496;
  color: white; }

#participants .chat .room .message .timestamp {
  float: left;
  color: #929496;
  box-sizing: border-box;
  padding: calc(0.5 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants .chat .room .message .timestamp {
      padding: 0.5vmin; } }

#participants .chat .room .message.sent .timestamp {
  float: right; }

#participants .chat .input {
  width: 100%;
  height: calc(5 * 640px / 100);
  background-color: rgba(255, 255, 255, 0.82); }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants .chat .input {
      height: 5vmin; } }

#participants .chat .input input {
  background-color: transparent;
  width: calc((100% - 5 * 640px / 100) / 1);
  height: 100%;
  border: 0;
  padding-left: calc(1 * 640px / 100);
  box-sizing: border-box; }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants .chat .input input {
      width: calc((100% - 5vmin) / 1); } }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants .chat .input input {
      padding-left: 1vmin; } }

#participants .chat .input input::placeholder {
  color: #646464;
  font-size: calc(2 * 640px / 100); }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants .chat .input input::placeholder {
      font-size: 2vmin; } }

#participants .chat .input input:active,
#participants .chat .input input:focus,
#participants .chat .input input:hover {
  outline: none;
  border: 0; }

#participants .chat .submit {
  float: right;
  width: calc(5 * 640px / 100);
  height: calc(5 * 640px / 100);
  line-height: calc(5 * 640px / 100);
  font-size: calc(1.5 * 640px / 100);
  color: #0275D8;
  cursor: pointer;
  text-align: center; }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants .chat .submit {
      width: 5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants .chat .submit {
      height: 5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants .chat .submit {
      line-height: 5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #participants .chat .submit {
      font-size: 1.5vmin; } }

/*****************************************************************/
/* Mode: EndSession                                              */
/*****************************************************************/
.container.endsession {
  left: calc((100% - 86 * 640px / 100) / 2);
  top: calc((100% - 30 * 640px / 100) / 2);
  width: calc(86 * 640px / 100);
  height: calc(20 * 640px / 100);
  text-align: center; }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.endsession {
      left: calc((100% - 86vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.endsession {
      top: calc((100% - 30vmin) / 2); } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.endsession {
      width: 86vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    .container.endsession {
      height: 20vmin; } }

#endsession .button {
  display: inline-block;
  width: calc(15 * 640px / 100);
  margin: calc(2 * 640px / 100);
  margin-top: calc(4.5 * 640px / 100);
  padding-top: calc(3 * 640px / 100);
  padding-bottom: calc(3 * 640px / 100);
  padding-left: calc(4 * 640px / 100);
  padding-right: calc(4 * 640px / 100);
  font-size: calc(2 * 640px / 100);
  background-color: rgba(255, 255, 255, 0.72);
  border-radius: calc(1 * 640px / 100);
  cursor: pointer; }
  @media (min-width: 640px) and (min-height: 640px) {
    #endsession .button {
      width: 15vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #endsession .button {
      margin: 2vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #endsession .button {
      margin-top: 4.5vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #endsession .button {
      padding-top: 3vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #endsession .button {
      padding-bottom: 3vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #endsession .button {
      padding-left: 4vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #endsession .button {
      padding-right: 4vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #endsession .button {
      font-size: 2vmin; } }
  @media (min-width: 640px) and (min-height: 640px) {
    #endsession .button {
      border-radius: 1vmin; } }

#endsession .button:hover {
  background-color: #ED8686;
  color: white; }