@charset "UTF-8";

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: "HP Simplified";
}

body.is-world,
html.is-world {
  overflow: hidden;
}

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

*,
*::before,
*::after {
  box-sizing: border-box;
}

#client-videos,
#presenter-video {
  position: absolute;
}

#client-videos [data-user],
#presenter-video [data-user] {
  display: none;
}

#client-videos [data-presenter],
#presenter-video [data-presenter] {
  display: block;
}

#client-videos.roundtable {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #0297D6;
  padding: 3%;
  height: 100vh;
  width: 100vw;
  padding-bottom: 200px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  pointer-events: all;
  background-position-x: 4vw;
  background-position-y: 50%;
  background-repeat: repeat-x;
  background-size: 100vw auto;
}

@-webkit-keyframes cloud1 {
  0% {
    background-position-x: 104vw;
  }

  100% {
    background-position-x: 4vw;
  }
}

@keyframes cloud1 {
  0% {
    background-position-x: 104vw;
  }

  100% {
    background-position-x: 4vw;
  }
}

#client-videos.roundtable .video {
  border: solid rgba(0, 150, 214, 0.74) 2px;
  background-color: rgba(0, 114, 163, 0.9);
  border-radius: 16px;
  min-width: 0;
}

#client-videos.roundtable .video .status {
  display: none;
}

#client-videos.roundtable .video .email {
  display: none;
}

#client-videos.roundtable .video .name,
#client-videos.roundtable .video .company {
  position: absolute !important;
  bottom: 6px !important;
  padding-bottom: 16px;
  height: 30px !important;
  top: initial !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 16px !important;
  line-height: 16px !important;
  z-index: 25;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

#client-videos.roundtable .video .name {
  width: 70% !important;
  width: calc(70% - 6px) !important;
  font-weight: bold !important;
  padding-left: 16px !important;
  left: 6px !important;
  border-bottom-left-radius: 14px !important;
}

#client-videos.roundtable .video .company {
  width: 30% !important;
  width: calc(30% - 6px) !important;
  right: 6px !important;
  font-weight: normal !important;
  padding-right: 16px !important;
  display: block !important;
  text-align: right;
  direction: ltr;
  border-bottom-right-radius: 14px !important;
}

#client-videos.roundtable .video .OT_root {
  position: absolute;
  top: 6px;
  right: 6px;
  left: 6px;
  bottom: 6px;
  overflow: hidden;
  border-radius: 14px;
  width: auto !important;
  height: auto !important;
}

#client-videos.roundtable .video:nth-child(1) {
  grid-area: 1/1/2/2;
}

#client-videos.roundtable .video:nth-child(2) {
  grid-area: 2/1/3/2;
}

#client-videos.roundtable .video:nth-child(8) {
  grid-area: 3/1/4/2;
}

#client-videos.roundtable .video:nth-child(3) {
  grid-area: 1/2/2/3;
}

#client-videos.roundtable .video:nth-child(4) {
  grid-area: 1/3/2/4;
}

#client-videos.roundtable .video:nth-child(5) {
  grid-area: 1/4/2/5;
}

#client-videos.roundtable .video:nth-child(6) {
  grid-area: 2/4/3/5;
}

#client-videos.roundtable .video:nth-child(7) {
  grid-area: 3/4/4/5;
}

#client-videos.roundtable .presentation,
#client-videos.roundtable #presentation-choice {
  grid-area: 2/2/4/4 !important;
}

#client-videos.roundtable #presentation-choice {
  display: none;
}

#client-videos.roundtable [data-user] {
  display: block;
}

#client-videos.roundtable .presentation,
#client-videos.roundtable #presentation-choice {
  display: flex;
  justify-content: center;
  align-items: center;
}

#client-videos.roundtable .presentation .video-overview,
#client-videos.roundtable #presentation-choice .video-overview {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  padding: 10px;
  position: relative;
  z-index: 4;
  width: 100%;
  height: 100%;
  height: calc(100% - 70px);
}

#client-videos.roundtable .presentation .video-overview img,
#client-videos.roundtable #presentation-choice .video-overview img {
  width: 100%;
  height: 100%;
  background-color: black;
  border-radius: 5px;
}

#client-videos.roundtable .presentation .video-overview video,
#client-videos.roundtable #presentation-choice .video-overview video {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: none;
  grid-area: 1/1/5/5;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 10px;
  background-color: transparent;
}

#client-videos.roundtable .presentation .video-overview video.active,
#client-videos.roundtable #presentation-choice .video-overview video.active {
  display: block;
}

#client-videos.roundtable #presentation-choice > button[data-choice] {
  position: absolute;
  bottom: 0;
  z-index: 3;
  background-color: transparent;
  border: none;
  background-image: url("/images/world/icons/question-icon.png");
  background-repeat: no-repeat;
  background-size: auto 50px;
  padding-bottom: 100px;
  color: transparent;
  border-radius: none;
  width: 100px;
  transition: color 200ms;
  font-weight: bold;
  white-space: nowrap;
  transition: width 100ms, background-size 100ms;
}

#client-videos.roundtable #presentation-choice > button[data-choice][data-choice=big-questions] {
  background-image: url("/images/world/icons/big_questions.png");
}

#client-videos.roundtable #presentation-choice > button[data-choice][data-choice=deep-dives] {
  background-image: url("/images/world/icons/deep_dives.png");
}

#client-videos.roundtable #presentation-choice > button[data-choice][data-choice=big-questions] {
  right: 0;
  background-position: 100% 100%;
}

#client-videos.roundtable #presentation-choice > button[data-choice][data-choice=deep-dives] {
  left: 0;
  background-position: 0% 100%;
}

#client-videos.roundtable #presentation-choice[data-presentation-choice=big-questions] button[data-choice=big-questions] {
  width: 100px;
  background-size: auto 60px;
}

#client-videos.roundtable #presentation-choice[data-presentation-choice=deep-dives] button[data-choice=deep-dives] {
  width: 100px;
  background-size: auto 60px;
}

#client-videos.roundtable .presentation img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

#client-videos.roundtable[data-roundtable-type="3"] #presentation-choice {
  display: flex;
}

#client-videos.roundtable[data-roundtable-type="1"] #presentation-choice,
#client-videos.roundtable[data-roundtable-type="2"] #presentation-choice,
#client-videos.roundtable[data-roundtable-type=company] #presentation-choice {
  display: none;
}

#client-videos.roundtable .presentation {
  width: 100%;
  height: 100%;
  position: relative;
}

#client-videos.roundtable .presentation:before {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: -150px;
  right: -150px;
  height: 200px;
  transform: translateY(-80px);
  z-index: -1;
  background-image: url("/images/world/presentation-disk.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#client-videos.roundtable #presentation-choice {
  position: relative;
}

#client-videos.roundtable #presentation-choice .big-questions,
#client-videos.roundtable #presentation-choice .deep-dives {
  display: none;
  width: 100%;
  height: 100%;
}

#client-videos.roundtable #presentation-choice .big-questions img,
#client-videos.roundtable #presentation-choice .deep-dives img {
  -o-object-fit: contain;
     object-fit: contain;
}

#client-videos.roundtable #presentation-choice .big-questions .btn-close,
#client-videos.roundtable #presentation-choice .deep-dives .btn-close {
  position: absolute;
  font-size: 20px;
  right: 0px;
  top: 0px;
  display: none;
}

#client-videos.roundtable #presentation-choice .deep-dives {
  height: 95%;
  align-self: flex-start;
  background-color: rgba(0, 127, 182, 0.85);
  padding-top: 70px !important;
  position: relative;
  border: solid #7FC9E8 2px;
  border-radius: 16px;
}

#client-videos.roundtable #presentation-choice .deep-dives:before {
  position: absolute;
  left: 15px;
  top: 15px;
  content: "DeepDive";
}

#client-videos.roundtable #presentation-choice .deep-dives:after {
  content: "";
  position: absolute;
  right: -2px;
  top: -2px;
  left: -2px;
  bottom: -2px;
  display: block;
  background-color: transparent;
  pointer-events: none;
  border: solid #0095D4 2px;
  border-radius: 16px;
  -webkit-mask-image: linear-gradient(-135deg, black, transparent);
          mask-image: linear-gradient(-135deg, black, transparent);
}

#client-videos.roundtable #presentation-choice .deep-dives .thumb {
  cursor: pointer;
  white-space: normal;
  border: none;
  border-radius: 8px;
  background-color: #2D90BB;
  color: white;
  font-weight: normal;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  line-height: 1.2;
  font-size: 14px;
}

#client-videos.roundtable #presentation-choice .deep-dives .thumb:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 15px;
  pointer-events: none;
  background-image: linear-gradient(transparent, #2D90BB);
}

#client-videos.roundtable #presentation-choice .deep-dives .thumb span {
  pointer-events: none;
}

#client-videos.roundtable #presentation-choice[data-presentation-choice=big-questions] .big-questions {
  display: flex;
}

#client-videos.roundtable #presentation-choice[data-presentation-choice=big-questions] .big-questions form {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#client-videos.roundtable #presentation-choice[data-presentation-choice=big-questions] .big-questions form select {
  border: none;
  border-radius: 20px;
  padding: 0 15px;
  background-color: rgba(255, 255, 255, 0.7);
  margin-right: 10px;
  max-width: 50%;
}

#client-videos.roundtable #presentation-choice[data-presentation-choice=big-questions] .big-questions form button {
  height: 40px;
  line-height: 40px;
}

#client-videos.roundtable #presentation-choice[data-presentation-choice=big-questions] .big-questions .question {
  width: 100%;
  color: white;
  font-weight: bold;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 44px;
  font-size: 4vh;
  line-height: 1.2;
}

#client-videos.roundtable #presentation-choice[data-presentation-choice=deep-dives] .deep-dives {
  display: grid;
}

#presenter-video {
  display: flex;
  background-color: transparent;
  background-image: url("/images/world/box_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  border-image-source: url("/images/world/box_border.png");
  border-width: 16px;
  border-style: solid;
  border-image-width: 16px;
  border-image-slice: 33%;
  border-radius: 14px;
  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.11);
  overflow: visible;
  flex-grow: 0;
  height: 9vw;
  width: 16vw;
  z-index: 33;
}

#presenter-video.in-roundtable:not(.is-presenter) {
  position: fixed;
  top: 0;
  left: 0;
  background-color: transparent;
  background-image: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border: none;
  padding: 3%;
  height: 100vh;
  width: 100vw;
  z-index: 3;
}

#presenter-video.in-roundtable:not(.is-presenter) .video[data-presenter] {
  grid-area: 1/1/2/2;
  width: 100%;
  z-index: 3;
  position: absolute;
  bottom: 15px;
  top: initial;
  left: 3%;
  height: 160px;
  width: 230px;
  pointer-events: all;
  margin: 0;
  padding: 0;
  min-width: 1;
  border: solid rgba(0, 150, 214, 0.74) 2px;
  background-color: rgba(0, 114, 163, 0.9);
  border-radius: 16px;
  max-width: 100%;
  overflow: hidden;
}

#presenter-video.in-roundtable:not(.is-presenter) .video[data-presenter] .OT_root {
  position: absolute;
  top: 6px;
  right: 6px;
  left: 6px;
  bottom: 6px;
  overflow: hidden;
  border-radius: 14px;
  width: auto !important;
  height: auto !important;
}

#presenter-video .video[data-presenter] {
  overflow: hidden;
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: -10px;
  border-radius: 14px;
  width: calc(100% + 16px);
  background-color: rgba(0, 0, 0, 0.3);
}

#presenter-video .presenter-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 150px;
  max-width: 200px;
  flex-grow: 2;
  margin-right: 5px;
}

#presenter-video .presenter-info .now-speaking {
  text-transform: uppercase;
  font-size: 10px;
  opacity: 0.56;
}

#presenter-video .presenter-info .presenter-name {
  font-weight: bold;
  font-size: 24px;
}

#presenter-video .presenter-info .presenter-title {
  font-style: italic;
  font-size: 14px;
  opacity: 0.56;
}

#presenter-video .presenter-info .presenter-controls {
  margin-top: 30px;
  padding: 0 10px 0 25px;
  position: relative;
}

#presenter-video .presenter-info .presenter-controls:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 20px;
  background-image: url("/images/world/icons/volume.png");
  background-position: 0% 80%;
  background-size: 13px auto;
  background-repeat: no-repeat;
}

#presenter-video .video {
  position: relative;
  flex-grow: 1;
  padding-bottom: 18%;
  margin: 0 1%;
  transform: rotateY(0) translate3d(0, 0, 0);
}

#presenter-video .video > div {
  position: absolute;
  width: 100% !important;
  height: 100% !important;
  z-index: -1;
  left: 0;
}

#presenter-video .video > div video {
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
}

#presenter-video .video:after {
  content: attr(data-user);
  position: absolute;
  display: none;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  /* -webkit-backdrop-filter: blur(5px); */
  text-align: center;
  color: white;
  padding: 5px 0;
  pointer-events: none;
}

.video.is-speaking {
  position: relative;
}

.video.is-speaking:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  border-radius: 18px;
  bottom: 0px;
  border: solid #B3E145 5px;
}

body.presenter .video.is-speaking {
  position: relative;
}

body.presenter .video.is-speaking:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  border-radius: 4px;
  bottom: 0px;
  border: solid #B3E145 3px;
  z-index: 26;
  pointer-events: none;
}

body.presenter #presenter-video {
  flex-grow: 2;
  height: 220px;
  position: relative;
  padding-left: 215px;
  width: auto;
}

body.presenter #client-videos.roundtable #presentation-choice .big-questions .btn-close {
  display: block;
}

body.presenter.is-playing-video #client-videos.roundtable #presentation-choice .video-overview > img {
  opacity: 0;
}

body.presenter.is-playing-video #client-videos.roundtable #presentation-choice .deep-dives .btn-close {
  display: block;
}

@media (max-height: 900px) {
  #client-videos.roundtable #presentation-choice .deep-dives {
    padding-top: 50px !important;
  }
}

[data-alert] {
  position: absolute;
  top: 0px;
  left: 50%;
  width: 300px;
  margin-left: -150px;
  background-color: #EFEFEF;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  transform: translateY(-150%);
  transition: transform 200ms ease-in-out;
  font-variant: small-caps;
  text-transform: lowercase;
  font-weight: 600;
  color: #1a1a1a;
  border: solid #d6d6d6 3px;
  font-family: Arial, Helvetica, sans-serif;
}

[data-alert].danger {
  color: white;
  background-color: #d37171;
  border: solid #c74a4a 3px;
}

[data-alert].warning {
  color: white;
  background-color: #d3b471;
  border: solid #c79f4a 3px;
}

[data-alert].info {
  color: white;
  background-color: #71b4d3;
  border: solid #4a9fc7 3px;
}

[data-alert].success {
  color: white;
  background-color: #68b479;
  border: solid #4d9c5f 3px;
}

[data-alert].active {
  transform: translateY(0);
}

#auth {
  height: 100%;
  padding: 0 115px;
  pointer-events: none;
  position: relative;
  z-index: 5;
}

#auth > .row {
  height: 100%;
  padding: 15% 0;
}

#auth.auth-large > .row {
  padding: 7.5% 0;
}

#auth.auth-large > .row > div > .card {
  padding: 30px 30px 30px 75px;
  max-height: 75vh;
  overflow-y: auto;
}

#auth.auth-large a {
  color: inherit;
  text-decoration: underline;
}

#auth .card {
  pointer-events: all;
  position: relative;
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  color: white;
  padding: 70px 35px;
  background-color: transparent;
  background-image: url("/images/world/box_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  border-image-source: url("/images/world/box_border.png");
  border-width: 16px;
  border-style: solid;
  border-image-width: 16px;
  border-image-slice: 33%;
  border-radius: 14px;
  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.11);
}

#auth .auth-header .auth-title {
  font-weight: lighter;
  font-size: 45px;
}

#auth .auth-header .auth-subtitle {
  font-weight: lighter;
  font-size: 16px;
  margin: 13px 0 40px 0;
}

#auth .platform-container .platform {
  position: relative;
}

#auth.question-container .platform,
#auth.question-container .platform:after {
  background-size: auto 35% !important;
  background-position: 85% 70%;
}

#auth.question-container .platform:after {
  background-position: 85% 50%;
}

#auth .bg .platform,
#auth .platform-container .platform {
  -webkit-animation: shadow-float 6s ease-in-out infinite;
          animation: shadow-float 6s ease-in-out infinite;
}

#auth .bg .platform,
#auth .bg .platform:after,
#auth .platform-container .platform,
#auth .platform-container .platform:after {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url("/images/world/platform_login_shadow.png");
  background-position: 85% 110%;
  background-size: auto 55%;
  background-repeat: no-repeat;
}

#auth .bg .platform:after,
#auth .platform-container .platform:after {
  content: "";
  background-image: url("/images/world/hp/env_small.png");
  background-position: 85% 50%;
  -webkit-animation: float 6s ease-in-out infinite;
          animation: float 6s ease-in-out infinite;
}

@-webkit-keyframes float {
  0% {
    transform: translatey(0px);
  }

  50% {
    transform: translatey(-20px);
  }

  100% {
    transform: translatey(0px);
  }
}

@keyframes float {
  0% {
    transform: translatey(0px);
  }

  50% {
    transform: translatey(-20px);
  }

  100% {
    transform: translatey(0px);
  }
}

@-webkit-keyframes shadow-float {
  0% {
    background-size: auto 55%;
  }

  50% {
    background-size: auto 50%;
  }

  100% {
    background-size: auto 55%;
  }
}

@keyframes shadow-float {
  0% {
    background-size: auto 55%;
  }

  50% {
    background-size: auto 50%;
  }

  100% {
    background-size: auto 55%;
  }
}

#auth .bg {
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#auth .bg .cloud {
  background-image: url("/images/world/cloud2.png");
  width: 566px;
  height: 307px;
  background-size: 100vw auto;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  background-repeat: repeat-x;
}

#auth .bg .cloud:nth-child(1) {
  background-position: 4vw 50%;
  -webkit-animation-name: cloud1;
          animation-name: cloud1;
  -webkit-animation-duration: 72s;
          animation-duration: 72s;
}

#auth .bg .cloud:nth-child(2) {
  background-position: 30vw 10%;
  background-image: url("/images/world/cloud.png");
  -webkit-animation-name: cloud2;
          animation-name: cloud2;
  -webkit-animation-duration: 132s;
          animation-duration: 132s;
}

#auth .bg .cloud:nth-child(3) {
  background-position: 75vw 5%;
  -webkit-animation-name: cloud3;
          animation-name: cloud3;
  -webkit-animation-duration: 96s;
          animation-duration: 96s;
}

#auth .bg .cloud:nth-child(4) {
  background-position: 93vw 100%;
  -webkit-animation-name: cloud4;
          animation-name: cloud4;
  -webkit-animation-duration: 60s;
          animation-duration: 60s;
}

@keyframes cloud1 {
  0% {
    background-position-x: 104vw;
  }

  100% {
    background-position-x: 4vw;
  }
}

@-webkit-keyframes cloud2 {
  0% {
    background-position-x: 130vw;
  }

  100% {
    background-position-x: 30vw;
  }
}

@keyframes cloud2 {
  0% {
    background-position-x: 130vw;
  }

  100% {
    background-position-x: 30vw;
  }
}

@-webkit-keyframes cloud3 {
  0% {
    background-position-x: 175vw;
  }

  100% {
    background-position-x: 75vw;
  }
}

@keyframes cloud3 {
  0% {
    background-position-x: 175vw;
  }

  100% {
    background-position-x: 75vw;
  }
}

@-webkit-keyframes cloud4 {
  0% {
    background-position-x: 93vw;
  }

  100% {
    background-position-x: -7vw;
  }
}

@keyframes cloud4 {
  0% {
    background-position-x: 93vw;
  }

  100% {
    background-position-x: -7vw;
  }
}

#auth footer {
  position: absolute;
  background: white;
}

header {
  width: 100%;
  position: absolute;
  padding-top: 50px;
  pointer-events: none;
}

header .logo img {
  width: 230px;
  max-width: 60%;
}

footer {
  background-color: white;
  width: 100%;
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
  position: absolute;
  bottom: 0;
  flex-grow: 1;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 20px;
  padding-top: 20px;
}

footer a,
footer a:visited {
  color: inherit;
  position: relative;
}

#auth + footer {
  height: 20%;
}

input[type=text],
input[type=email],
input[type=password],
input[type=tel],
input[type=number],
textarea {
  border-radius: 20px;
  height: 40px;
  background-color: transparent;
  padding: 0 20px;
  line-height: 40px;
  border: solid white 1px;
  color: white;
  font-size: 14px;
}

input[type=text]:focus,
input[type=text]:active,
input[type=email]:focus,
input[type=email]:active,
input[type=password]:focus,
input[type=password]:active,
input[type=tel]:focus,
input[type=tel]:active,
input[type=number]:focus,
input[type=number]:active,
textarea:focus,
textarea:active {
  background-color: rgba(255, 255, 255, 0.1);
  outline: none !important;
  border-color: white;
  color: white;
}

input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=number]::-moz-placeholder, textarea::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
}

input[type=text]:-ms-input-placeholder, input[type=email]:-ms-input-placeholder, input[type=password]:-ms-input-placeholder, input[type=tel]:-ms-input-placeholder, input[type=number]:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}

input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=password]::placeholder,
input[type=tel]::placeholder,
input[type=number]::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

input[type=text].is-invalid,
input[type=email].is-invalid,
input[type=password].is-invalid,
input[type=tel].is-invalid,
input[type=number].is-invalid,
textarea.is-invalid {
  border-width: 2px;
  border-color: #d37171 !important;
}

input[type=text] + span.invalid-feedback,
input[type=email] + span.invalid-feedback,
input[type=password] + span.invalid-feedback,
input[type=tel] + span.invalid-feedback,
input[type=number] + span.invalid-feedback,
textarea + span.invalid-feedback {
  color: #d37171;
  display: inline-block;
  padding: 3px 10px;
  border-radius: 5px;
  font-weight: bold;
  font-style: italic;
  background-color: rgba(255, 255, 255, 0.6);
}

.form-check + span.invalid-feedback {
  color: #d37171;
  display: inline-block;
  padding: 3px 10px;
  border-radius: 5px;
  font-weight: bold;
  font-style: italic;
  background-color: rgba(255, 255, 255, 0.6);
}

button[type=submit],
a.btn.btn-white,
button.btn-submit,
button.btn-cancel {
  border-radius: 20px;
  height: 40px;
  line-height: 40px;
  font-weight: bold;
  background: white;
  border: solid white 1px;
  color: #0297D6;
  font-size: 16px;
  padding: 0 20px;
}

button[type=submit]:hover,
button[type=submit]:focus,
button[type=submit]:active,
a.btn.btn-white:hover,
a.btn.btn-white:focus,
a.btn.btn-white:active,
button.btn-submit:hover,
button.btn-submit:focus,
button.btn-submit:active,
button.btn-cancel:hover,
button.btn-cancel:focus,
button.btn-cancel:active {
  color: white;
  background: #0297D6;
  border: solid #0297D6 1px;
}

button.btn-cancel {
  background-color: transparent;
  color: white;
}

/*Reset range input*/

input[type=range] {
  -webkit-appearance: none;
  /* Hides the slider so that custom slider can be made */
  width: 100%;
  /* Specific width is required for Firefox. */
  background: transparent;
  /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none;
  /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  /* Hides the slider so custom styles can be added */
  background: transparent;
  border-color: transparent;
  color: transparent;
}

/*style range slider*/

/* Special styling for WebKit/Blink */

input[type=range]::-webkit-slider-thumb {
  height: 12px;
  width: 12px;
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
  margin-top: -6px;
  /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
}

/* All the same stuff for Firefox */

input[type=range]::-moz-range-thumb {
  height: 12px;
  width: 12px;
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
}

input[type=range]::-ms-thumb {
  height: 12px;
  width: 12px;
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 0;
  cursor: pointer;
  border: 0.5px solid #ffffff;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #FFFFFF;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 0;
  cursor: pointer;
  border: 0.5px solid #ffffff;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 0;
  cursor: pointer;
  border: 0.5px solid #ffffff;
}

input[type=range]::-ms-fill-lower {
  background: #FFFFFF;
}

input[type=range]:focus::-ms-fill-lower {
  background: #ffffff;
}

input[type=range]::-ms-fill-upper {
  background: rgba(255, 255, 255, 0.35);
}

input[type=range]:focus::-ms-fill-upper {
  background: rgba(255, 255, 255, 0.35);
}

.btn-default {
  border: solid rgba(0, 150, 214, 0.74) 2px;
  background-color: rgba(0, 114, 163, 0.9);
  border-radius: 16px;
}

#ui {
  display: flex;
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#ui > .container,
#ui > .flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: flex-end;
}

#ui > .flex-container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

#ui .left,
#ui .right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 25px 0;
  position: relative;
}

#ui .left {
  align-items: flex-start;
}

#ui .right {
  align-items: flex-end;
  flex-direction: row;
  width: 333px;
}

#ui .right #client-videos {
  pointer-events: all;
}

#ui .right #presenter-video {
  pointer-events: none;
}

#ui .right #presenter-video .video {
  pointer-events: all;
}

#loading-screen {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url("/images/world/cloud-bg-main.png");
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 100;
  background-color: #0297D6;
  font-size: 21px;
  width: 100vw;
  height: 100vh;
}

#loading-screen .bar {
  width: 204px;
  height: 9px;
  position: relative;
  padding: 4px;
  background: linear-gradient(45deg, #7FC9E8, #0095D4);
  border-radius: 4px;
  margin-top: 20px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.11);
}

#loading-screen .bar:before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 3px;
  bottom: 3px;
  background-color: #0080B5;
  border-radius: 3px;
}

#loading-screen .fill-wrap {
  position: absolute;
  display: inline-flex;
  height: 3px;
  left: 4px;
  right: 4px;
  top: 3px;
  bottom: 3px;
  border-radius: 3px;
}

#loading-screen .fill {
  position: relative;
  border-radius: 2px;
  background-color: white;
  height: 3px;
  display: inline-flex;
}

#setup-screen {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background-image: url("/images/world/cloud-bg-main.png");
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 103;
  background-color: #0297D6;
}

#setup-screen .bg {
  z-index: 101;
  width: 35vw;
  max-width: 800px;
  margin-left: 40vw;
  position: absolute;
  right: 10vw;
  top: 0;
  bottom: 0;
  background-image: url("/images/world/hp/env_small.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-animation: float 6s ease-in-out infinite;
          animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translatey(0px);
  }

  50% {
    transform: translatey(-20px);
  }

  100% {
    transform: translatey(0px);
  }
}

#setup-screen .bg:after {
  content: "";
  position: absolute;
  height: 50vh;
  right: 0;
  bottom: 0;
  width: 100%;
  background-image: url("/images/world/platform_login_shadow.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#setup-screen .info {
  position: relative;
  padding: 40px;
  background: linear-gradient(135deg, #7FC9E8, #0095D4);
  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.11);
  border-radius: 16px;
  margin-top: 20px;
  color: white;
  font-size: 16px;
  width: 50vw;
  max-width: 800px;
  margin-right: 30vw;
  line-height: 1.2;
  padding: 50px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

#setup-screen .info > h1 {
  font-weight: lighter;
}

#setup-screen .info > h1,
#setup-screen .info > p,
#setup-screen .info > div,
#setup-screen .info > button {
  position: relative;
  z-index: 105;
  max-width: 90%;
}

#setup-screen .info:before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 2px;
  bottom: 2px;
  background-color: #0080B5;
  background-attachment: static;
  border-radius: 14px;
  z-index: 104;
}

#setup-screen .info .access-items {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
  overflow-y: auto;
  padding-top: 6px;
  padding-right: 40px;
}

#setup-screen .info .access-items .access-item {
  padding-left: 65px;
  position: relative;
  margin-bottom: 20px;
  opacity: 0.6;
}

#setup-screen .info .access-items .access-item:before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  display: block;
  background-color: rgba(255, 255, 255, 0.2);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 20px;
  background-image: url("/images/world/icons/setup-question.png");
}

#setup-screen .info .access-items .access-item[data-type=mic]:before {
  background-image: url("/images/world/icons/setup-microphone-none.png");
}

#setup-screen .info .access-items .access-item.active[data-type=mic]:before {
  background-image: url("/images/world/icons/setup-microphone.png");
}

#setup-screen .info .access-items .access-item.active[data-type=mic-selection]:before {
  background-image: url("/images/world/icons/setup-microphone.png");
}

#setup-screen .info .access-items .access-item[data-type=camera]:before {
  background-image: url("/images/world/icons/setup-camera-none.png");
  background-size: 18px auto;
}

#setup-screen .info .access-items .access-item.active[data-type=camera]:before {
  background-image: url("/images/world/icons/setup-camera.png");
  background-size: 18px auto;
}

#setup-screen .info .access-items .access-item.active[data-type=camera-selection]:before {
  background-image: url("/images/world/icons/setup-camera.png");
  background-size: 18px auto;
}

#setup-screen .info .access-items .access-item h2 {
  font-weight: bold;
  font-size: 18px;
}

#setup-screen .info .access-items .access-item p,
#setup-screen .info .access-items .access-item select {
  display: none;
}

#setup-screen .info .access-items .access-item.active {
  opacity: 1;
  display: block;
}

#setup-screen .info .access-items .access-item.active p,
#setup-screen .info .access-items .access-item.active select {
  display: block;
}

#setup-screen .info .access-items .access-item.active select {
  border: none;
}

#setup-screen .volume-meter {
  background-image: url("/images/world/icons/volume-bar-empty.png");
  background-size: 100% 100%;
  width: 100%;
  height: 8px;
  border-radius: 2px;
  position: relative;
  margin-bottom: 15px;
}

#setup-screen .volume-meter .meter {
  position: absolute;
  height: 8px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: width 50ms;
  background-size: 100% 100%;
  background-image: url("/images/world/icons/volume-bar-fill.png");
}

#setup-screen .video-preview-container {
  position: relative;
  width: 50%;
  padding-bottom: 28.125%;
  background-color: #0080B5;
  border: solid #7FC9E8 2px;
  border-radius: 16px;
  margin-bottom: 10px;
}

#setup-screen .video-preview-container video {
  position: absolute;
  left: 2px;
  right: 2px;
  top: 2px;
  bottom: 2px;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  width: calc( 100% - 4px);
  height: 100%;
  height: calc( 100% - 4px);
  border-radius: 15px;
}

#setup-screen #setup-complete {
  align-self: flex-end;
  margin-top: 20px;
  padding: 0 40px;
}

#setup-screen #setup-complete[disabled] {
  pointer-events: none;
}

#reactions .btn-group {
  background-color: transparent;
  background-image: url("/images/world/box_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  border-image-source: url("/images/world/box_border.png");
  border-width: 16px;
  border-style: solid;
  border-image-width: 16px;
  border-image-slice: 33%;
  border-radius: 14px;
  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.11);
  height: 44px;
  pointer-events: all;
  flex-grow: 0;
  z-index: 33;
  position: relative;
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}

#reactions .btn-group.react > .btn-wrap {
  width: 50px;
}

#reactions .btn-group > .btn-wrap {
  margin: -16px;
  height: 28px;
  min-width: 50px;
  width: 193px;
  transition: width 150ms;
}

#reactions .btn-group > .btn-wrap #chat-form {
  max-width: 0;
  padding: 0 0 0 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 150ms, padding 150ms;
}

#reactions .btn-group > .btn-wrap.chat-active {
  width: 300px;
}

#reactions .btn-group > .btn-wrap.chat-active #chat-form {
  overflow: visible;
}

#reactions .btn-group > .btn-wrap.chat-active button[data-reaction] {
  opacity: 0;
  padding: 0;
}

#reactions .btn-group > .btn-wrap.chat-active button[data-reaction][data-reaction=chat] {
  opacity: 1;
  padding: 0 20px;
  background-image: url("/images/world/icons/chat-close.png");
  border-left-color: transparent;
  z-index: 3;
}

#reactions .btn-group > .btn-wrap.chat-active #chat-form {
  max-width: 240px;
}

#reactions .btn-group > .btn-wrap.chat-active #chat-form input[type=text] {
  width: 235px;
}

#reactions .btn-group button[data-reaction] {
  background-size: auto 25px;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0 30px;
  height: 40px;
  margin-top: 2px;
  position: relative;
  top: 0;
  transition: filter 150ms, padding 150ms, border-left-color 150ms;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0));
}

#reactions .btn-group button[data-reaction]:focus,
#reactions .btn-group button[data-reaction]:active {
  outline: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
}

#reactions .btn-group button[data-reaction]:hover {
  outline: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
}

#reactions .btn-group button[data-reaction][data-reaction=thumbsup] {
  background-image: url("/images/world/icons/thumbsup.png");
}

#reactions .btn-group button[data-reaction][data-reaction=clap] {
  background-image: url("/images/world/icons/clap.png");
}

#reactions .btn-group button[data-reaction][data-reaction=chat] {
  background-image: url("/images/world/icons/chat.png");
  background-size: 25px auto;
}

#reactions .btn-group button[data-reaction][data-reaction=chat].active + #chat-form {
  padding: 3px 5px 3px 5px;
  max-width: 300px;
}

#reactions .btn-group button[data-reaction][data-reaction=request] {
  background-image: url("/images/world/icons/microphone-mute.png");
  background-size: auto 22px;
  width: 46px;
  border-radius: 12px;
  left: -14px;
  right: -14px;
  top: -16px;
  padding: 0;
  position: absolute;
}

#reactions .btn-group button[data-reaction][data-reaction=request]:focus,
#reactions .btn-group button[data-reaction][data-reaction=request]:active,
#reactions .btn-group button[data-reaction][data-reaction=request]:hover {
  filter: none !important;
}

#reactions .btn-group button[data-reaction][data-reaction=request]:focus:before,
#reactions .btn-group button[data-reaction][data-reaction=request]:focus:after,
#reactions .btn-group button[data-reaction][data-reaction=request]:active:before,
#reactions .btn-group button[data-reaction][data-reaction=request]:active:after,
#reactions .btn-group button[data-reaction][data-reaction=request]:hover:before,
#reactions .btn-group button[data-reaction][data-reaction=request]:hover:after {
  display: block;
  opacity: 1;
}

#reactions .btn-group button[data-reaction][data-reaction=request][data-status=speaking] {
  background-color: rgba(121, 154, 26, 0.4);
  background-image: url("/images/world/icons/microphone.png");
}

#reactions .btn-group button[data-reaction][data-reaction=request][data-status=speaking]:before {
  content: attr(data-active-translation);
}

#reactions .btn-group button[data-reaction][data-reaction=request][data-status=pending],
#reactions .btn-group button[data-reaction][data-reaction=request][data-status=request] {
  background-color: rgba(255, 146, 51, 0.5);
  background-image: url("/images/world/icons/status-pending.gif");
}

#reactions .btn-group button[data-reaction][data-reaction=request][data-status=pending]:before,
#reactions .btn-group button[data-reaction][data-reaction=request][data-status=request]:before {
  content: attr(data-pending-translation);
}

#reactions .btn-group button[data-reaction][data-reaction=request]:before {
  opacity: 0;
  display: none;
  content: attr(data-unmute-translation);
  transition: opacity 100ms;
  position: absolute;
  border: solid rgba(0, 150, 214, 0.74) 2px;
  background-color: rgba(0, 114, 163, 0.9);
  border-radius: 16px;
  top: -70px;
  left: 50%;
  background-color: #297eb3;
  border-color: #4cb0df;
  transform: translateX(-50%);
  width: auto;
  max-width: 30vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 12px 20px;
  font-weight: bold;
}

#reactions .btn-group button[data-reaction][data-reaction=request]:after {
  opacity: 0;
  display: none;
  content: "";
  transition: opacity 100ms;
  position: absolute;
  top: -20px;
  width: 10px;
  height: 10px;
  left: 50%;
  transform: translateX(-50%) translateY(-4px) rotate(-45deg);
  background: #297eb3;
  border-style: solid;
  border-color: #4cb0df;
  border-width: 0 0 2px 2px;
}

#reactions .btn-group button[data-reaction]:not(:first-child) {
  border-left: solid rgba(255, 255, 255, 0.2) 1px;
}

#reactions .btn-group #chat-form {
  height: 40px;
  margin-top: 2px;
  position: absolute;
  top: -16px;
  right: -14px;
}

#reactions .btn-group #chat-form input {
  height: 40px;
  padding-left: 10px;
  padding-right: 40px;
  border-color: rgba(255, 255, 255, 0.2);
  width: 100%;
}

#reactions .btn-group #chat-form input[type=text] {
  width: 40px;
  transition: width 150ms;
  border-radius: 0 12px 12px 0;
  border-width: 0;
  border-left-width: 2px;
}

#reactions .btn-group #chat-form input[type=submit] {
  position: absolute;
  right: 8px;
  border-radius: 8px;
  border: none;
  top: 6px;
  height: 28px;
  width: 28px;
  padding: 0;
  font-size: 0;
  background-color: transparent;
  background-size: auto 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("/images/world/icons/send.png");
}

#reactions .btn-group #chat-form .warning {
  position: absolute;
}

#reactions .btn-group #chat-form .warning .characters-remaining {
  display: none;
  color: #FFAE5B;
}

#reactions .btn-group #chat-form .warning .characters-limit {
  display: none;
  color: #D92E2E;
}

#ui .left .reaction {
  position: absolute;
  width: 50px;
  height: 50px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 40px;
  z-index: 20;
}

#ui .left .reaction[data-reaction=thumbsup] {
  background-image: url("/images/world/icons/thumbsup.png");
}

#ui .left .reaction[data-reaction=clap] {
  background-image: url("/images/world/icons/clap.png");
}

#ui .left .reaction[data-reaction=chat] {
  margin-left: -15px;
  margin-bottom: 5px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: translateZ(0px) scale(1);
  float: left;
  clear: both;
  min-width: 200px;
  transition: filter 3000ms;
  filter: blur(0px);
}

#ui .left .reaction[data-reaction=chat].closing {
  filter: blur(10px);
}

#ui .left .reaction[data-reaction=chat] {
  display: inline-block;
  color: white;
  background-color: rgba(0, 0, 0, 0.2);
  color: white;
  line-height: 55px;
  font-size: 16px;
  white-space: nowrap;
  font-weight: bold;
  height: 43px;
  padding: 0 20px 0 55px;
  border-radius: 16px;
  white-space: nowrap;
  font-weight: bold;
  background-image: url("/images/world/icons/chat.png");
  background-position: 14px 50%;
  background-repeat: no-repeat;
  background-size: auto 20px !important;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: translateZ(0px);
  width: auto;
  overflow: hidden;
}

#ui .left .reaction[data-reaction=chat][data-name]:after {
  content: attr(data-name);
  display: block;
  position: absolute;
  top: 0;
  left: 45px;
  padding-left: 9px;
  color: white;
  line-height: 22px;
  font-size: 20px;
  white-space: nowrap;
  font-weight: normal;
  height: 43px;
  font-size: 12px;
  opacity: 0.5;
  border-left: solid rgba(255, 255, 255, 0.5) 1px;
}

#ui .left #chat-render {
  width: 100%;
  height: 300px;
  padding-bottom: 30px;
  margin-bottom: -26px;
  position: relative;
}

#ui .left #chat-render .reaction {
  top: initial !important;
  position: relative !important;
  background-size: auto 30px;
  font-size: 16px !important;
}

body.in-roundtable #reactions {
  position: fixed;
  margin-left: 260px;
  left: 3%;
  bottom: 15px;
  z-index: 50;
}

body.in-roundtable #ui .left #chat-render {
  position: absolute;
  left: 3%;
  margin-left: 15px;
  bottom: 200px;
  height: 27%;
  width: 90vw;
  overflow-y: hidden;
  pointer-events: none;
  z-index: 33;
}

body.in-roundtable[data-user-count="8"] #ui .left #chat-render {
  position: absolute;
  margin-left: 270px;
  left: 3%;
  bottom: 60px;
  height: 140px;
}

body.in-roundtable.presenter #ui .left #chat-render {
  left: 35px;
  margin-left: 0;
  width: calc(100vw - 1130px);
}

body.in-roundtable.presenter[data-user-count="8"] #ui .left #chat-render {
  left: 240px;
}

body.in-roundtable.presenter #reactions {
  margin-left: 20px;
  left: 30px;
  bottom: 220px;
  position: absolute;
}

body.in-roundtable.presenter #poll {
  left: 190px;
  margin-bottom: 0;
}

body.in-roundtable #poll {
  max-width: 40vw;
  white-space: nowrap;
  left: 540px;
  bottom: 0;
  width: auto;
  text-overflow: ellipsis;
  margin-bottom: -10px;
}

body.in-roundtable #poll .title {
  overflow: hidden;
  text-overflow: ellipsis;
}

body.presenter #ui .left #chat-render {
  margin-left: -15px;
}

#poll {
  background-color: transparent;
  background-image: url("/images/world/box_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  border-image-source: url("/images/world/box_border.png");
  border-width: 16px;
  border-style: solid;
  border-image-width: 16px;
  border-image-slice: 33%;
  border-radius: 14px;
  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.11);
  max-height: 44px;
  margin-top: 4px;
  transition: max-height 200ms, min-width 200ms;
  position: relative;
  transform: translate3d(0, 0, 0);
  min-width: 100px;
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  display: none;
  pointer-events: all;
  z-index: 5;
}

#poll .content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 200ms, min-width 200ms;
  visibility: hidden;
}

#poll.active {
  max-height: 500px;
  min-width: 300px;
}

#poll.active .content {
  display: block;
  max-height: 500px;
  overflow: visible;
  padding: 25px 12px 0 12px;
  visibility: visible;
}

#poll.active .toggle {
  display: block;
}

#poll.active .title {
  cursor: inherit;
}

#poll .title {
  margin: -16px -16px 0 -16px;
  height: 44px;
  line-height: 44px;
  padding-left: 50px;
  padding-right: 50px;
  position: relative;
  font-size: 16px;
  cursor: pointer;
}

#poll .title:before {
  display: block;
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  height: 40px;
  width: 40px;
  background-color: rgba(0, 163, 11, 0);
  box-shadow: 0 2px 4px 0 rgba(49, 214, 45, 0);
  transition: all 150ms;
  border-radius: 13px 0 0 13px;
  border-right: solid rgba(255, 255, 255, 0.2) 1px;
  background-size: auto 19px;
  background-repeat: no-repeat;
  background-position: 55% center;
  background-image: url("/images/world/icons/question.png");
}

#poll[data-status=answered] .title:before {
  background-color: rgba(0, 163, 11, 0.42);
  box-shadow: 0 0 4px 0 rgba(49, 214, 45, 0.5);
  background-size: auto 14px;
  background-image: url("/images/world/icons/check.png");
}

#poll .content {
  margin-left: -14px;
  margin-right: -14px;
  margin-top: -2px;
  border-top: solid rgba(255, 255, 255, 0.2) 1px;
  padding: 0 12px 0 12px;
}

#poll .content .poll-options .option {
  display: block;
  width: 100%;
  border: none;
  color: white;
  background-color: rgba(255, 255, 255, 0.15);
  height: 44px;
  line-height: 44px;
  border-radius: 4px;
  margin-bottom: 5px;
  text-align: center;
  position: relative;
}

#poll .content .poll-options .option:focus,
#poll .content .poll-options .option:active {
  outline: none !important;
  box-shadow: none !important;
}

#poll .content .poll-options .option:last-child {
  margin-bottom: 0;
}

#poll .content .poll-options .option:hover {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.35);
}

#poll .content .poll-options .option.answered:hover {
  cursor: inherit;
  background-color: rgba(255, 255, 255, 0.15);
}

#poll .content .poll-options .option > span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: block;
  background-color: rgba(255, 255, 255, 0.25);
}

#poll .content .poll-options .option[data-percentage] {
  text-align: left;
  padding-left: 20px;
}

#poll .content .poll-options .option[data-percentage]:after {
  content: attr(data-percentage);
  display: block;
  position: absolute;
  height: 44px;
  line-height: 44px;
  right: 20px;
  top: 0;
  text-align: right;
}

#poll .toggle {
  display: none;
  position: absolute;
  right: -16px;
  top: -64px;
  background-color: transparent;
  background-image: url("/images/world/box_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  border-image-source: url("/images/world/box_border.png");
  border-width: 16px;
  border-style: solid;
  border-image-width: 16px;
  border-image-slice: 33%;
  border-radius: 14px;
  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.11);
  font-size: 0;
  text-indent: -999px;
  overflow: hidden;
  height: 44px;
  width: 50px;
  background-image: url("/images/world/icons/chevron-down.png");
}

#poll .toggle:focus,
#poll .toggle:active {
  outline: none !important;
  box-shadow: none !important;
}

.question-card {
  position: relative;
  width: 100%;
  padding-bottom: 40px;
}

.question-card #no-question {
  display: none;
}

.question-card #question .main-title,
.question-card #no-question .main-title {
  font-weight: lighter;
  font-size: 45px;
}

.question-card #question .title,
.question-card #no-question .title {
  font-weight: lighter;
  font-size: 18px;
  margin-bottom: 50px;
}

.question-card #question .answers,
.question-card #no-question .answers {
  width: auto;
  display: flex;
}

.question-card #question .answers > button,
.question-card #no-question .answers > button {
  border: none;
  -webkit-appearance: none;
  height: 100px;
  flex-grow: 1;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  max-height: 100px;
  margin-right: 20px;
  max-width: 150px;
  font-weight: bold;
  font-size: 16px;
  color: white;
}

.question-card #question .answers > button:focus,
.question-card #question .answers > button:active,
.question-card #no-question .answers > button:focus,
.question-card #no-question .answers > button:active {
  outline: none !important;
  box-shadow: none !important;
}

.question-card #question .answers > button:hover,
.question-card #question .answers > button:focus,
.question-card #no-question .answers > button:hover,
.question-card #no-question .answers > button:focus {
  background-color: rgba(255, 255, 255, 0.3);
}

.question-card #question .answers > button:last-child,
.question-card #no-question .answers > button:last-child {
  margin-right: 0;
}

.question-card .no-question {
  display: none;
}

.question-card .question-counter {
  border: solid rgba(0, 150, 214, 0.74) 2px;
  background-color: rgba(0, 114, 163, 0.8);
  position: absolute;
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  left: -15px;
  right: -15px;
  bottom: -40px;
  height: 7px;
  border-radius: 3px;
  display: flex;
  flex-direction: row;
}

.question-card .question-counter .count {
  flex-grow: 2;
}

.question-card .question-counter .count.answered {
  background: white;
}

.question-card .question-counter .count:not(:first-child) {
  border-left: solid rgba(0, 150, 214, 0.74) 2px;
}

body.presenter .canvas-container {
  position: absolute;
  right: 390px;
  bottom: 199px;
  left: 45px;
  top: 65px;
  width: auto;
  height: auto;
  overflow: hidden;
  border-radius: 16px;
  border: solid rgba(0, 114, 163, 0.8) 10px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

body.presenter .canvas-container > canvas {
  position: absolute !important;
  left: 0px !important;
  right: 0px !important;
  top: 0px !important;
  bottom: 0px !important;
  width: 100% !important;
  height: 100% !important;
}

body.presenter #ui .left {
  padding-bottom: 220px;
  padding-left: 60px;
}

body.presenter #client-videos {
  bottom: 25px;
}

body.presenter #client-videos {
  position: absolute;
  left: 265px;
  right: 865px;
  padding-right: 15px;
  height: 130px;
  display: grid;
  border-right: solid rgba(255, 255, 255, 0.21) 1px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 3px;
  grid-row-gap: 3px;
  pointer-events: all;
  margin-bottom: -3px;
}

body.presenter #client-videos .video,
body.presenter #client-videos > button {
  display: block;
  display: inline-block;
  box-shadow: none;
  position: relative;
  height: 100%;
  width: 100%;
  height: 29px;
  line-height: 29px;
  border-radius: 4px;
  padding-left: 5px;
  background-color: rgba(0, 0, 0, 0.1);
}

body.presenter #client-videos .video[data-connected=false],
body.presenter #client-videos > button[data-connected=false] {
  opacity: 0.6;
}

body.presenter #client-videos .video[data-connected=true],
body.presenter #client-videos > button[data-connected=true] {
  opacity: 1;
  cursor: pointer;
}

body.presenter #client-videos .video:last-child,
body.presenter #client-videos > button:last-child {
  margin-right: 0;
}

body.presenter #client-videos .video .name,
body.presenter #client-videos .video .email,
body.presenter #client-videos > button .name,
body.presenter #client-videos > button .email {
  position: absolute;
  left: 0;
  max-width: calc(100% + 10px);
  overflow: hidden;
  text-overflow: ellipsis;
}

body.presenter #client-videos .video .status,
body.presenter #client-videos > button .status {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  left: 0;
  background-image: url("/images/world/icons/microphone-mute.png");
  background-repeat: no-repeat;
  background-position: 97% 50%;
  background-size: auto 22px;
  z-index: 1;
  border-radius: 12px;
}

body.presenter #client-videos .video[data-status=speaking] .status,
body.presenter #client-videos > button[data-status=speaking] .status {
  background-color: rgba(121, 154, 26, 0.4);
  background-image: url("/images/world/icons/microphone.png");
}

body.presenter #client-videos .video[data-status=pending] .status,
body.presenter #client-videos > button[data-status=pending] .status {
  background-color: rgba(255, 146, 51, 0.5);
  background-image: url("/images/world/icons/status-pending.gif");
}

body.presenter #client-videos .video .name,
body.presenter #client-videos > button .name {
  font-size: 14px;
  font-weight: bold;
  top: 0;
  line-height: 29px;
  padding-left: 10px;
  white-space: nowrap;
  z-index: 2;
}

body.presenter #client-videos .video .email,
body.presenter #client-videos .video .company,
body.presenter #client-videos > button .email,
body.presenter #client-videos > button .company {
  font-size: 14px;
  top: 22px;
  font-weight: lighter;
  display: none;
}

body.presenter #client-videos .video .OT_root,
body.presenter #client-videos > button .OT_root {
  display: none;
  position: absolute;
  top: 48px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  width: auto !important;
  height: auto !important;
  border-radius: 5px;
}

body.presenter #client-videos.roundtable {
  position: absolute;
  right: 390px;
  bottom: 199px;
  left: 45px;
  top: 65px;
  width: auto;
  height: auto;
  padding: 15px;
  padding-bottom: 85px;
  border: solid rgba(0, 150, 214, 0.74) 2px;
  background-color: rgba(0, 114, 163, 0.9);
  border-radius: 16px;
  background-color: #0072a3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}

body.presenter #client-videos.roundtable .status {
  bottom: initial;
  height: 44px;
  background-color: transparent !important;
}

body.presenter #client-videos.roundtable .video {
  height: 45%;
  border-radius: 8px;
}

body.presenter #client-videos.roundtable .video .OT_root {
  display: block;
  top: 0px;
}

body.presenter #client-videos.roundtable .video .name {
  left: 0px !important;
  bottom: 0px !important;
  width: calc( 70% ) !important;
  border-bottom-left-radius: 8px !important;
}

body.presenter #client-videos.roundtable .video .company {
  display: block;
  right: 0px !important;
  bottom: 0px !important;
  width: calc( 30%) !important;
  border-bottom-right-radius: 8px !important;
}

body.presenter #client-videos.roundtable .video button.toggle-mute {
  position: absolute;
  z-index: 1;
  background-color: transparent;
  border: none;
  width: 30px;
  height: 30px;
  right: 5px;
  top: 7px;
  font-size: 0;
  background-image: url("/images/world/icons/microphone-mute.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

body.presenter #client-videos.roundtable .video[data-status=speaking] button.toggle-mute {
  background-image: url("/images/world/icons/microphone.png");
}

body.presenter #client-videos.roundtable .video:nth-child(1) {
  grid-area: 1/1/2/2;
}

body.presenter #client-videos.roundtable .video:nth-child(2) {
  grid-area: 2/1/3/2;
}

body.presenter #client-videos.roundtable .video:nth-child(8) {
  grid-area: 3/1/4/2;
}

body.presenter #client-videos.roundtable .video:nth-child(3) {
  grid-area: 1/2/2/3;
}

body.presenter #client-videos.roundtable .video:nth-child(4) {
  grid-area: 1/3/2/4;
}

body.presenter #client-videos.roundtable .video:nth-child(5) {
  grid-area: 1/4/2/5;
}

body.presenter #client-videos.roundtable .video:nth-child(6) {
  grid-area: 2/4/3/5;
}

body.presenter #client-videos.roundtable .video:nth-child(7) {
  grid-area: 3/4/4/5;
}

body.presenter #client-videos.roundtable .video {
  width: 100%;
  height: 100%;
}

body.presenter #client-videos.roundtable .presentation,
body.presenter #client-videos.roundtable #presentation-choice {
  display: flex;
  justify-content: center;
  align-items: center;
}

body.presenter #client-videos.roundtable .presentation .video-overview,
body.presenter #client-videos.roundtable #presentation-choice .video-overview {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  padding: 10px;
  position: relative;
}

body.presenter #client-videos.roundtable .presentation .video-overview img,
body.presenter #client-videos.roundtable #presentation-choice .video-overview img {
  width: 100%;
  height: 100%;
  background-color: black;
  border-radius: 5px;
}

body.presenter #client-videos.roundtable .presentation .video-overview video,
body.presenter #client-videos.roundtable #presentation-choice .video-overview video {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: none;
  grid-area: 1/1/5/5;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 10px;
  background-color: transparent;
}

body.presenter #client-videos.roundtable .presentation .video-overview video.active,
body.presenter #client-videos.roundtable #presentation-choice .video-overview video.active {
  display: block;
}

body.presenter #client-videos.roundtable .presentation img,
body.presenter #client-videos.roundtable .presentation .slide {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

body.presenter #client-videos.roundtable #presentation-choice {
  display: none;
}

body.presenter #client-videos.roundtable[data-roundtable-type="3"] #presentation-choice {
  display: flex;
}

body.presenter #client-videos.roundtable .video {
  z-index: 4;
}

body.presenter #client-videos.roundtable .presentation,
body.presenter #client-videos.roundtable #presentation-choice {
  width: 100%;
  height: 100%;
  grid-area: 2/2/4/4 !important;
  position: relative;
}

body.presenter #client-videos.roundtable .presentation:before,
body.presenter #client-videos.roundtable #presentation-choice:before {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: -150px;
  right: -150px;
  height: 200px;
  transform: translateY(-80px);
  z-index: 0;
  background-image: url("/images/world/presentation-disk.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

body.presenter #client-videos.roundtable .presentation img,
body.presenter #client-videos.roundtable #presentation-choice img {
  z-index: 2;
}

body.presenter #mute-controls {
  position: absolute;
  height: 67px;
  left: 45px;
  width: 210px;
  bottom: 25px;
  background-color: #00ABDC;
  border-radius: 5px;
  pointer-events: all;
  display: flex;
  justify-content: center;
  align-items: center;
}

body.presenter #mute-controls:before {
  content: "Participants:";
  position: absolute;
  left: 0;
  top: -50px;
}

body.presenter #mute-controls .switch {
  width: 64px;
  margin: 0;
}

body.presenter #mute-controls .switch .off {
  position: absolute;
  top: 0;
  right: 100%;
  margin-right: 10px;
  font-weight: bold;
}

body.presenter #mute-controls .switch .on {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 10px;
}

body.presenter #mute-controls .switch input[type=checkbox]:checked + .slider:before {
  left: 32px;
}

body.presenter #mute-controls .switch input[type=checkbox]:checked + .slider:after {
  left: 34px;
}

body.presenter #mute-controls .switch input[type=checkbox]:checked + .slider .off {
  font-weight: normal;
}

body.presenter #mute-controls .switch input[type=checkbox]:checked + .slider .on {
  font-weight: bold;
}

body.presenter #polls-admin {
  position: absolute;
  top: 65px;
  right: 0;
  left: -15px;
  bottom: 270px;
  display: flex;
  flex-direction: column;
  pointer-events: all;
}

body.presenter #polls-admin .current-poll {
  margin-bottom: 15px;
}

body.presenter #polls-admin .current-poll,
body.presenter #polls-admin .new-poll,
body.presenter #polls-admin #speaker-notes,
body.presenter #polls-admin .poll-list,
body.presenter #polls-admin .preview-poll {
  background-color: transparent;
  background-image: url("/images/world/box_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  border-image-source: url("/images/world/box_border.png");
  border-width: 16px;
  border-style: solid;
  border-image-width: 16px;
  border-image-slice: 33%;
  border-radius: 14px;
  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.11);
  flex-basis: 50%;
}

body.presenter #polls-admin .new-poll,
body.presenter #polls-admin .current-poll {
  display: none;
  min-height: 265px;
}

body.presenter #polls-admin .new-poll.active,
body.presenter #polls-admin .current-poll.active {
  display: flex;
}

body.presenter #polls-admin .current-poll.active + .new-poll {
  display: none;
}

body.presenter #polls-admin .preview-poll,
body.presenter #polls-admin .poll-list {
  min-height: 265px;
  display: none;
}

body.presenter #polls-admin .preview-poll.active,
body.presenter #polls-admin .poll-list.active {
  display: flex;
}

body.presenter #polls-admin .new-poll,
body.presenter #polls-admin .current-poll,
body.presenter #polls-admin .poll-list,
body.presenter #polls-admin .preview-poll,
body.presenter #polls-admin #speaker-notes {
  position: relative;
}

body.presenter #polls-admin .new-poll form,
body.presenter #polls-admin .new-poll > .poll-container,
body.presenter #polls-admin .current-poll form,
body.presenter #polls-admin .current-poll > .poll-container,
body.presenter #polls-admin .poll-list form,
body.presenter #polls-admin .poll-list > .poll-container,
body.presenter #polls-admin .preview-poll form,
body.presenter #polls-admin .preview-poll > .poll-container,
body.presenter #polls-admin #speaker-notes form,
body.presenter #polls-admin #speaker-notes > .poll-container {
  display: block;
  position: absolute;
  left: -16px;
  right: -16px;
  top: -16px;
  bottom: -16px;
}

body.presenter #polls-admin .new-poll input,
body.presenter #polls-admin .current-poll input,
body.presenter #polls-admin .poll-list input,
body.presenter #polls-admin .preview-poll input,
body.presenter #polls-admin #speaker-notes input {
  border: none;
  border-radius: 0;
}

body.presenter #polls-admin .new-poll input[name=question],
body.presenter #polls-admin .new-poll .title,
body.presenter #polls-admin .current-poll input[name=question],
body.presenter #polls-admin .current-poll .title,
body.presenter #polls-admin .poll-list input[name=question],
body.presenter #polls-admin .poll-list .title,
body.presenter #polls-admin .preview-poll input[name=question],
body.presenter #polls-admin .preview-poll .title,
body.presenter #polls-admin #speaker-notes input[name=question],
body.presenter #polls-admin #speaker-notes .title {
  position: absolute;
  left: 2px;
  top: 2px;
  width: calc(100% - 4px);
  height: 50px;
  border-bottom: solid rgba(255, 255, 255, 0.28) 1px;
  font-size: 16px;
  border-radius: 14px 14px 0 0;
  line-height: 16px;
  display: flex;
  align-items: center;
}

body.presenter #polls-admin .new-poll .poll-container .title,
body.presenter #polls-admin .current-poll .poll-container .title,
body.presenter #polls-admin .poll-list .poll-container .title,
body.presenter #polls-admin .preview-poll .poll-container .title,
body.presenter #polls-admin #speaker-notes .poll-container .title {
  padding: 0 16px;
  font-size: 16px;
}

body.presenter #polls-admin .new-poll .poll-container .option.answered,
body.presenter #polls-admin .current-poll .poll-container .option.answered,
body.presenter #polls-admin .poll-list .poll-container .option.answered,
body.presenter #polls-admin .preview-poll .poll-container .option.answered,
body.presenter #polls-admin #speaker-notes .poll-container .option.answered {
  min-height: 40px;
  line-height: 1;
  position: relative;
  display: flex;
  justify-content: flex-start;
  padding: 5px 60px 5px 0;
  align-items: center;
}

body.presenter #polls-admin .new-poll .poll-container .option.answered > span,
body.presenter #polls-admin .current-poll .poll-container .option.answered > span,
body.presenter #polls-admin .poll-list .poll-container .option.answered > span,
body.presenter #polls-admin .preview-poll .poll-container .option.answered > span,
body.presenter #polls-admin #speaker-notes .poll-container .option.answered > span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.15);
}

body.presenter #polls-admin .new-poll .poll-container .option.answered:after,
body.presenter #polls-admin .current-poll .poll-container .option.answered:after,
body.presenter #polls-admin .poll-list .poll-container .option.answered:after,
body.presenter #polls-admin .preview-poll .poll-container .option.answered:after,
body.presenter #polls-admin #speaker-notes .poll-container .option.answered:after {
  content: attr(data-percentage);
  line-height: 40px;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  padding-right: 16px;
}

body.presenter #polls-admin .new-poll .answers,
body.presenter #polls-admin .new-poll .polls,
body.presenter #polls-admin .new-poll .options,
body.presenter #polls-admin .current-poll .answers,
body.presenter #polls-admin .current-poll .polls,
body.presenter #polls-admin .current-poll .options,
body.presenter #polls-admin .poll-list .answers,
body.presenter #polls-admin .poll-list .polls,
body.presenter #polls-admin .poll-list .options,
body.presenter #polls-admin .preview-poll .answers,
body.presenter #polls-admin .preview-poll .polls,
body.presenter #polls-admin .preview-poll .options,
body.presenter #polls-admin #speaker-notes .answers,
body.presenter #polls-admin #speaker-notes .polls,
body.presenter #polls-admin #speaker-notes .options {
  position: absolute;
  left: 2px;
  right: 2px;
  top: 50px;
  bottom: 70px;
  padding-top: 15px;
}

body.presenter #polls-admin .new-poll .answers > input,
body.presenter #polls-admin .new-poll .answers .option.answered,
body.presenter #polls-admin .new-poll .polls > input,
body.presenter #polls-admin .new-poll .polls .option.answered,
body.presenter #polls-admin .new-poll .options > input,
body.presenter #polls-admin .new-poll .options .option.answered,
body.presenter #polls-admin .current-poll .answers > input,
body.presenter #polls-admin .current-poll .answers .option.answered,
body.presenter #polls-admin .current-poll .polls > input,
body.presenter #polls-admin .current-poll .polls .option.answered,
body.presenter #polls-admin .current-poll .options > input,
body.presenter #polls-admin .current-poll .options .option.answered,
body.presenter #polls-admin .poll-list .answers > input,
body.presenter #polls-admin .poll-list .answers .option.answered,
body.presenter #polls-admin .poll-list .polls > input,
body.presenter #polls-admin .poll-list .polls .option.answered,
body.presenter #polls-admin .poll-list .options > input,
body.presenter #polls-admin .poll-list .options .option.answered,
body.presenter #polls-admin .preview-poll .answers > input,
body.presenter #polls-admin .preview-poll .answers .option.answered,
body.presenter #polls-admin .preview-poll .polls > input,
body.presenter #polls-admin .preview-poll .polls .option.answered,
body.presenter #polls-admin .preview-poll .options > input,
body.presenter #polls-admin .preview-poll .options .option.answered,
body.presenter #polls-admin #speaker-notes .answers > input,
body.presenter #polls-admin #speaker-notes .answers .option.answered,
body.presenter #polls-admin #speaker-notes .polls > input,
body.presenter #polls-admin #speaker-notes .polls .option.answered,
body.presenter #polls-admin #speaker-notes .options > input,
body.presenter #polls-admin #speaker-notes .options .option.answered {
  width: 100%;
  margin-bottom: 5px;
  background-color: rgba(255, 255, 255, 0.15);
  padding-left: 25px;
  font-size: 14px;
}

body.presenter #polls-admin .new-poll .answers,
body.presenter #polls-admin .current-poll .answers,
body.presenter #polls-admin .poll-list .answers,
body.presenter #polls-admin .preview-poll .answers,
body.presenter #polls-admin #speaker-notes .answers {
  overflow-y: auto;
}

body.presenter #polls-admin .new-poll .polls,
body.presenter #polls-admin .new-poll .options,
body.presenter #polls-admin .current-poll .polls,
body.presenter #polls-admin .current-poll .options,
body.presenter #polls-admin .poll-list .polls,
body.presenter #polls-admin .poll-list .options,
body.presenter #polls-admin .preview-poll .polls,
body.presenter #polls-admin .preview-poll .options,
body.presenter #polls-admin #speaker-notes .polls,
body.presenter #polls-admin #speaker-notes .options {
  bottom: 0;
  padding: 15px 5px 10px 5px;
  overflow-y: auto;
}

body.presenter #polls-admin .new-poll .polls > span,
body.presenter #polls-admin .new-poll .options > span,
body.presenter #polls-admin .current-poll .polls > span,
body.presenter #polls-admin .current-poll .options > span,
body.presenter #polls-admin .poll-list .polls > span,
body.presenter #polls-admin .poll-list .options > span,
body.presenter #polls-admin .preview-poll .polls > span,
body.presenter #polls-admin .preview-poll .options > span,
body.presenter #polls-admin #speaker-notes .polls > span,
body.presenter #polls-admin #speaker-notes .options > span {
  display: block;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 5px;
  margin-bottom: 5px;
  min-height: 40px;
  width: 100%;
  padding: 4px 15px;
  line-height: 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

body.presenter #polls-admin .new-poll .poll-selection,
body.presenter #polls-admin .current-poll .poll-selection,
body.presenter #polls-admin .poll-list .poll-selection,
body.presenter #polls-admin .preview-poll .poll-selection,
body.presenter #polls-admin #speaker-notes .poll-selection {
  bottom: 5px;
}

body.presenter #polls-admin .new-poll .options,
body.presenter #polls-admin .current-poll .options,
body.presenter #polls-admin .poll-list .options,
body.presenter #polls-admin .preview-poll .options,
body.presenter #polls-admin #speaker-notes .options {
  padding-left: 0;
  padding-right: 0;
  bottom: 60px;
  overflow-y: auto;
}

body.presenter #polls-admin .new-poll .options > span,
body.presenter #polls-admin .current-poll .options > span,
body.presenter #polls-admin .poll-list .options > span,
body.presenter #polls-admin .preview-poll .options > span,
body.presenter #polls-admin #speaker-notes .options > span {
  border-radius: 0;
}

body.presenter #polls-admin .new-poll .buttons,
body.presenter #polls-admin .current-poll .buttons,
body.presenter #polls-admin .poll-list .buttons,
body.presenter #polls-admin .preview-poll .buttons,
body.presenter #polls-admin #speaker-notes .buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  position: absolute;
  bottom: 15px;
  left: 15px;
  right: 15px;
  height: 44px;
}

body.presenter #polls-admin .new-poll button,
body.presenter #polls-admin .current-poll button,
body.presenter #polls-admin .poll-list button,
body.presenter #polls-admin .preview-poll button,
body.presenter #polls-admin #speaker-notes button {
  margin: auto;
  flex-grow: 1;
  padding-left: 25px;
  padding-right: 25px;
}

body.presenter #polls-admin .new-poll button + button,
body.presenter #polls-admin .current-poll button + button,
body.presenter #polls-admin .poll-list button + button,
body.presenter #polls-admin .preview-poll button + button,
body.presenter #polls-admin #speaker-notes button + button {
  margin-left: 10px;
}

body.presenter #polls-admin .new-poll button:focus,
body.presenter #polls-admin .new-poll button:active,
body.presenter #polls-admin .current-poll button:focus,
body.presenter #polls-admin .current-poll button:active,
body.presenter #polls-admin .poll-list button:focus,
body.presenter #polls-admin .poll-list button:active,
body.presenter #polls-admin .preview-poll button:focus,
body.presenter #polls-admin .preview-poll button:active,
body.presenter #polls-admin #speaker-notes button:focus,
body.presenter #polls-admin #speaker-notes button:active {
  outline: none !important;
  box-shadow: none !important;
}

body.presenter #polls-admin .new-poll button.danger,
body.presenter #polls-admin .current-poll button.danger,
body.presenter #polls-admin .poll-list button.danger,
body.presenter #polls-admin .preview-poll button.danger,
body.presenter #polls-admin #speaker-notes button.danger {
  background-color: #FF4E4E;
  border-color: #FF4E4E;
  color: white;
}

body.presenter #polls-admin .new-poll button.danger:hover,
body.presenter #polls-admin .current-poll button.danger:hover,
body.presenter #polls-admin .poll-list button.danger:hover,
body.presenter #polls-admin .preview-poll button.danger:hover,
body.presenter #polls-admin #speaker-notes button.danger:hover {
  background-color: #e70000;
  border-color: #e70000;
}

body.presenter #controls-map {
  position: absolute;
  right: 387px;
  width: 170px;
  bottom: 35px;
  height: 130px;
  padding-left: 10px;
  border-left: solid rgba(255, 255, 255, 0.21) 1px;
  display: flex;
  flex-direction: column;
  pointer-events: all;
  color: white;
}

body.presenter #controls-map button {
  border: none;
  position: relative;
  transition: background 100ms;
  background: linear-gradient(90deg, #539dbb, #2d84a9);
  border-radius: 12px;
  background: linear-gradient(90deg, #7FCAEA, #0B9BD8);
  width: 100%;
  line-height: 43px;
  height: 43px;
  padding: 0;
  font-weight: bold;
  border-radius: 16px;
  margin-bottom: 3px;
  color: white;
}

body.presenter #controls-map button:before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 2px;
  bottom: 2px;
  background-color: #0072a3;
  border-radius: 10px;
  z-index: 0;
}

body.presenter #controls-map button > span {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

body.presenter #controls-map button:before {
  border-radius: 15px;
}

body.presenter #controls-map button#open-billboard,
body.presenter #controls-map button#close-billboard {
  display: none;
}

body.presenter #controls-map button#open-billboard.active,
body.presenter #controls-map button#close-billboard.active {
  display: block;
}

body.presenter #controls {
  position: absolute;
  right: 557px;
  bottom: 35px;
  width: 310px;
  display: block;
  height: 155px;
  left: initial;
  top: initial;
  display: flex;
  flex-direction: column;
  padding: 0 15px 0 15px;
}

body.presenter #controls .locations {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 3px;
  grid-row-gap: 3px;
  margin-bottom: 10px;
  margin-top: 5px;
}

body.presenter #controls .locations.has-company {
  grid-template-columns: repeat(3, 1fr);
}

body.presenter #controls .locations.has-company button {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
}

body.presenter #controls .events {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 5px;
  grid-row-gap: 10px;
}

body.presenter #controls .events button {
  border: none;
  position: relative;
  transition: background 100ms;
  background: linear-gradient(90deg, #539dbb, #2d84a9);
  border-radius: 12px;
  height: 43px;
  border-radius: 16px;
  font-weight: bold;
}

body.presenter #controls .events button:before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 2px;
  bottom: 2px;
  background-color: #0072a3;
  border-radius: 10px;
  z-index: 0;
}

body.presenter #controls .events button > span {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

body.presenter #controls .events button:before {
  border-radius: 15px;
}

body.presenter #controls .events button#end-all {
  background: linear-gradient(90deg, #E58384, #CA191D);
}

body.presenter #controls .events button#end-all:before {
  background-color: #B73136;
}

body.presenter #controls .events button#reset-all {
  background: linear-gradient(90deg, #80E997, #0ED43E);
}

body.presenter #controls .events button#reset-all:before {
  background-color: #00AE70;
}

body.presenter #controls button {
  color: white;
  background-color: #009CD6;
  font-weight: normal;
  border-radius: 5px;
  border: none;
  height: 38px;
}

body.presenter .switch {
  position: relative;
  display: inline-block;
  width: 128px;
  height: 34px;
  border: solid rgba(0, 150, 214, 0.74) 2px;
  background-color: rgba(0, 114, 163, 0.9);
  border-radius: 16px;
}

body.presenter .switch input {
  display: none;
}

body.presenter .switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: transform 0.4s;
}

body.presenter .switch .slider:before,
body.presenter .switch .slider:after {
  position: absolute;
  content: "";
  transition: transform 0.4s;
}

body.presenter .switch .slider:before {
  height: 26px;
  width: 26px;
  left: 2px;
  bottom: 2px;
  background: linear-gradient(315deg, #9c9c9c, #ffffff);
}

body.presenter .switch .slider:after {
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 4px;
  background: #0297D6;
}

body.presenter .switch input[data-value="1"] + .slider:before,
body.presenter .switch input[data-value="1"] + .slider:after {
  transform: translateX(30px);
}

body.presenter .switch input[data-value="2"] + .slider:before,
body.presenter .switch input[data-value="2"] + .slider:after {
  transform: translateX(62px);
}

body.presenter .switch input[data-value="3"] + .slider:before,
body.presenter .switch input[data-value="3"] + .slider:after {
  transform: translateX(94px);
}

body.presenter .switch .world {
  right: 100%;
  margin-right: -25px;
}

body.presenter .switch .world:before {
  right: -5px;
  top: -30px;
}

body.presenter .switch .roundtable:before {
  display: none;
}

body.presenter .switch .roundtable {
  text-align: center;
  left: 0%;
  margin-left: 30px;
  pointer-events: none;
}

body.presenter .switch .roundtable-1 {
  text-align: center;
  left: 100%;
  transform: translateX(0%);
  margin-left: -10px;
}

body.presenter .switch .roundtable-1:before {
  left: 0;
  transform: translateX(-82px);
  top: -30px;
}

body.presenter .switch .roundtable-2 {
  left: 100%;
  margin-left: 10px;
}

body.presenter .switch .roundtable-3 {
  left: 100%;
  margin-left: 30px;
}

body.presenter .switch .roundtable-2:before {
  left: 0;
  transform: translateX(-70px);
  top: -30px;
}

body.presenter .switch .roundtable-3:before {
  left: 0;
  transform: translateX(-58px);
  top: -30px;
}

body.presenter .switch .slider.round {
  border-radius: 34px;
}

body.presenter .switch .slider.round:before,
body.presenter .switch .slider.round:after {
  border-radius: 50%;
}

body.presenter .switch input[data-value="0"] + .slider .world {
  font-weight: bold;
}

body.presenter .switch input[data-value="0"] + .slider .roundtable-1,
body.presenter .switch input[data-value="0"] + .slider .roundtable-2,
body.presenter .switch input[data-value="0"] + .slider .roundtable-3 {
  font-weight: lighter;
}

body.presenter .switch input[data-value="1"] + .slider .roundtable-1,
body.presenter .switch input[data-value="1"] + .slider .roundtable {
  font-weight: bold;
}

body.presenter .switch input[data-value="1"] + .slider .world,
body.presenter .switch input[data-value="1"] + .slider .roundtable-2,
body.presenter .switch input[data-value="1"] + .slider .roundtable-3 {
  font-weight: lighter;
}

body.presenter .switch input[data-value="2"] + .slider .roundtable-2,
body.presenter .switch input[data-value="2"] + .slider .roundtable {
  font-weight: bold;
}

body.presenter .switch input[data-value="2"] + .slider .world,
body.presenter .switch input[data-value="2"] + .slider .roundtable-1,
body.presenter .switch input[data-value="2"] + .slider .roundtable-3 {
  font-weight: lighter;
}

body.presenter .switch input[data-value="3"] + .slider .roundtable-3,
body.presenter .switch input[data-value="3"] + .slider .roundtable {
  font-weight: bold;
}

body.presenter .switch input[data-value="3"] + .slider .world,
body.presenter .switch input[data-value="3"] + .slider .roundtable-1,
body.presenter .switch input[data-value="3"] + .slider .roundtable-2 {
  font-weight: lighter;
}

body.presenter .switch input:checked + .slider .on {
  font-weight: bold;
}

body.presenter .switch input:checked + .slider .off {
  font-weight: lighter;
}

body.presenter #overlay {
  left: 55px;
  top: 75px;
  right: 400px;
  bottom: 209px;
  border-radius: 5px;
  width: auto;
  height: auto;
}

body.presenter #overlay + #overlay-navigation,
body.presenter #overlay button.close {
  display: block;
}

body.presenter #overlay + #overlay-navigation {
  display: none;
  right: 420px;
  bottom: 229px;
}

body.presenter #overlay.active + #overlay-navigation {
  display: block;
}

body.presenter #overlay-navigation.billboard-open {
  display: block !important;
}

body.presenter.in-roundtable #overlay-navigation {
  display: block !important;
}

body #client-videos .video button.toggle-mute {
  display: none;
}

body.in-roundtable #client-videos.roundtable .video button.toggle-mute {
  display: block;
}

body[data-roundtable="0"] #controls button#set-world,
body[data-roundtable="1"] #controls button#set-roundtable-1,
body[data-roundtable="2"] #controls button#set-roundtable-2,
body[data-roundtable="3"] #controls button#set-roundtable-3,
body[data-roundtable=company] #controls button#set-roundtable-company {
  background-color: #00648C;
  font-weight: bold;
}

body[data-roundtable="0"] #controls button#set-world > span,
body[data-roundtable="1"] #controls button#set-roundtable-1 > span,
body[data-roundtable="2"] #controls button#set-roundtable-2 > span,
body[data-roundtable="3"] #controls button#set-roundtable-3 > span,
body[data-roundtable=company] #controls button#set-roundtable-company > span {
  position: relative;
  display: inline-block;
}

body[data-roundtable="0"] #controls button#set-world > span:before,
body[data-roundtable="0"] #controls button#set-world > span:after,
body[data-roundtable="1"] #controls button#set-roundtable-1 > span:before,
body[data-roundtable="1"] #controls button#set-roundtable-1 > span:after,
body[data-roundtable="2"] #controls button#set-roundtable-2 > span:before,
body[data-roundtable="2"] #controls button#set-roundtable-2 > span:after,
body[data-roundtable="3"] #controls button#set-roundtable-3 > span:before,
body[data-roundtable="3"] #controls button#set-roundtable-3 > span:after,
body[data-roundtable=company] #controls button#set-roundtable-company > span:before,
body[data-roundtable=company] #controls button#set-roundtable-company > span:after {
  content: "";
  position: absolute;
  top: 50%;
  display: block;
  border-width: 4px 6px;
  border-style: solid;
  border-color: transparent;
  transform: translateY(-50%);
}

body[data-roundtable="0"] #controls button#set-world > span:before,
body[data-roundtable="1"] #controls button#set-roundtable-1 > span:before,
body[data-roundtable="2"] #controls button#set-roundtable-2 > span:before,
body[data-roundtable="3"] #controls button#set-roundtable-3 > span:before,
body[data-roundtable=company] #controls button#set-roundtable-company > span:before {
  left: -14px;
  border-left-color: white;
}

body[data-roundtable="0"] #controls button#set-world > span:after,
body[data-roundtable="1"] #controls button#set-roundtable-1 > span:after,
body[data-roundtable="2"] #controls button#set-roundtable-2 > span:after,
body[data-roundtable="3"] #controls button#set-roundtable-3 > span:after,
body[data-roundtable=company] #controls button#set-roundtable-company > span:after {
  right: -14px;
  border-right-color: white;
}

.cloud-bg {
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transform: scale(3);
}

.cloud-bg .cloud,
.cloud-bg .main {
  background-image: url("/images/world/cloud2.png");
  width: 566px;
  height: 307px;
  background-size: 100vw auto;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}

.cloud-bg .main {
  background-image: url("/images/world/cloud-bg-main.png");
  width: 100vw;
  height: 100vh;
  background-size: 300vw 100vh;
}

@keyframes cloud1 {
  0% {
    background-position-x: 104vw;
  }

  100% {
    background-position-x: 4vw;
  }
}

@keyframes cloud2 {
  0% {
    background-position-x: 130vw;
  }

  100% {
    background-position-x: 30vw;
  }
}

@keyframes cloud3 {
  0% {
    background-position-x: 175vw;
  }

  100% {
    background-position-x: 75vw;
  }
}

@keyframes cloud4 {
  0% {
    background-position-x: 93vw;
  }

  100% {
    background-position-x: -7vw;
  }
}

@-webkit-keyframes cloudmain {
  0% {
    background-position-x: 300vw;
  }

  100% {
    background-position-x: 0vw;
  }
}

@keyframes cloudmain {
  0% {
    background-position-x: 300vw;
  }

  100% {
    background-position-x: 0vw;
  }
}

#animations-container {
  position: absolute;
  right: 10px;
  bottom: 10px;
  top: 10px;
  width: 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

#animations-container button {
  border: none;
  position: relative;
  transition: background 100ms;
  background: linear-gradient(90deg, #539dbb, #2d84a9);
  border-radius: 12px;
}

#animations-container button:before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 2px;
  bottom: 2px;
  background-color: #0072a3;
  border-radius: 10px;
  z-index: 0;
}

#animations-container button > span {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

#animations-container button#close-interior,
#animations-container button#close-outside,
#animations-container button#toggle-tutorial {
  margin-bottom: 10px;
  align-self: flex-end;
  padding-left: 20px;
  padding-right: 20px;
  display: none;
  opacity: 0;
  transition: opacity 500ms;
  width: 50px;
  height: 50px;
  line-height: 50px;
  padding: 0;
  font-weight: lighter;
  font-size: 40px;
  pointer-events: all;
  border-radius: 20px;
  background: linear-gradient(45deg, #74b0c8, #2d84a9);
}

#animations-container button#close-interior.active,
#animations-container button#close-outside.active,
#animations-container button#toggle-tutorial.active {
  display: block;
  opacity: 1;
}

#animations-container button#close-interior:before,
#animations-container button#close-outside:before,
#animations-container button#toggle-tutorial:before {
  border-radius: 18px;
}

#animations-container .controls {
  display: none;
  opacity: 0;
  transition: opacity 500ms;
  pointer-events: all;
  flex-direction: column;
  text-align: center;
  background-color: rgba(2, 151, 214, 0.8);
  border-radius: 10px;
  padding: 20px;
}

#animations-container .controls.active {
  display: flex;
  opacity: 1;
}

#animations-container .controls button {
  margin-bottom: 5px;
}

#animations-container .controls .title {
  width: 100%;
  font-weight: bold;
}

#animations-container .controls .title + .row {
  margin-top: 10px;
}

#animations-container .controls .title.lighter {
  font-weight: lighter;
}

#animations-container .controls .text {
  width: 100%;
  font-weight: lighter;
}

#animations-container .controls .switch {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 34px;
  border: solid rgba(0, 150, 214, 0.74) 2px;
  background-color: rgba(0, 114, 163, 0.9);
  border-radius: 16px;
}

#animations-container .controls .switch input {
  display: none;
}

#animations-container .controls .switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: transform 0.4s;
}

#animations-container .controls .switch .slider:before,
#animations-container .controls .switch .slider:after {
  position: absolute;
  content: "";
  transition: transform 0.4s;
}

#animations-container .controls .switch .slider:before {
  height: 26px;
  width: 26px;
  left: 2px;
  bottom: 2px;
  background: linear-gradient(315deg, #9c9c9c, #ffffff);
}

#animations-container .controls .switch .slider:after {
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 4px;
  background: #0297D6;
}

#animations-container .controls .switch input:checked + .slider:before,
#animations-container .controls .switch input:checked + .slider:after {
  transform: translateX(30px);
}

#animations-container .controls .switch .on,
#animations-container .controls .switch .off {
  color: white;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  font-size: 14px;
  white-space: nowrap;
  padding: 0 10px;
  transition: font-weight 0.4s;
  letter-spacing: 1px;
}

#animations-container .controls .switch .on {
  left: 100%;
}

#animations-container .controls .switch .off {
  right: 100%;
}

#animations-container .controls .switch .slider.round {
  border-radius: 34px;
}

#animations-container .controls .switch .slider.round:before,
#animations-container .controls .switch .slider.round:after {
  border-radius: 50%;
}

#animations-container .controls .switch input + .slider .off {
  font-weight: bold;
}

#animations-container .controls .switch input + .slider .on {
  font-weight: lighter;
}

#animations-container .controls .switch input:checked + .slider .on {
  font-weight: bold;
}

#animations-container .controls .switch input:checked + .slider .off {
  font-weight: lighter;
}

#animations-container .row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 10px;
}

#animations-container .row .col-50 {
  width: 48%;
}

#animations-container .row .col-100 {
  width: 100%;
}

#animations-container button {
  font-weight: bold;
}

#animations-container button .btn-block {
  width: 100%;
}

#animations-container hr {
  margin-left: -20px;
  margin-right: -20px;
  border-top: solid rgba(255, 255, 255, 0.25) 1px;
}

body.standalone #animations-container {
  position: absolute;
  right: initial;
  left: 10px;
  justify-content: flex-end;
}

body.standalone #animations-container button#close-interior,
body.standalone #animations-container button#close-outside {
  position: fixed;
  right: 10px;
  top: 10px;
  align-self: flex-start;
}

body.standalone .hide-standalone {
  display: none !important;
}

.tutorial-overlay {
  display: none;
}

body.in-tutorial .tutorial-overlay {
  display: block;
}

body.in-tutorial:before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
}

body.in-tutorial .wrap .canvas-container {
  border: solid rgba(0, 114, 163, 0.2) 10px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

body.in-tutorial .wrap .canvas-container > canvas,
body.in-tutorial .wrap .cloud-bg,
body.in-tutorial .wrap #client-videos.roundtable,
body.in-tutorial .wrap #overlay-navigation,
body.in-tutorial .wrap #mute-controls:before,
body.in-tutorial .wrap #presenter-video,
body.in-tutorial .wrap #poll {
  opacity: 0.3;
  filter: brightness(0.5) saturate(0.5);
}

body .tutorial-overlay .tutorial-item[data-item=polls] {
  display: none;
}

body .tutorial-overlay .tutorial-item[data-item=notes] {
  display: none;
}

body .tutorial-overlay .tutorial-item[data-item=in-world] {
  display: none;
}

body .tutorial-overlay .tutorial-item[data-item=environment] {
  display: none;
}

body .tutorial-overlay .tutorial-item[data-item=user-interaction] {
  display: none;
}

body .tutorial-overlay .tutorial-item[data-item=chat] {
  display: none;
}

body .tutorial-overlay .tutorial-item[data-item=mute] {
  display: none;
}

body .tutorial-overlay .tutorial-item[data-item=back-to-world] {
  display: block;
}

body .tutorial-overlay .tutorial-item[data-item=animation-triggers] {
  display: block;
}

body.in-roundtable .tutorial-overlay .tutorial-item[data-item=polls] {
  display: block;
}

body.in-roundtable .tutorial-overlay .tutorial-item[data-item=notes] {
  display: block;
}

body.in-roundtable .tutorial-overlay .tutorial-item[data-item=in-world] {
  display: block;
}

body.in-roundtable .tutorial-overlay .tutorial-item[data-item=environment] {
  display: block;
}

body.in-roundtable .tutorial-overlay .tutorial-item[data-item=user-interaction] {
  display: block;
}

body.in-roundtable .tutorial-overlay .tutorial-item[data-item=chat] {
  display: block;
}

body.in-roundtable .tutorial-overlay .tutorial-item[data-item=mute] {
  display: block;
}

body.in-roundtable .tutorial-overlay .tutorial-item[data-item=back-to-world] {
  display: none;
}

body.in-roundtable .tutorial-overlay .tutorial-item[data-item=animation-triggers] {
  display: none;
}

.tutorial-overlay {
  position: absolute;
  z-index: 100;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
}

.tutorial-overlay .tutorial-item {
  position: absolute;
  width: 290px;
  text-align: center;
  display: none;
}

.tutorial-overlay .tutorial-item .title {
  font-weight: bold;
  margin-bottom: 4px;
}

.tutorial-overlay .tutorial-item .text {
  line-height: 1;
}

.tutorial-overlay .tutorial-item:before {
  content: "";
  position: absolute;
  background-image: url("/images/world/icons/arrow.png");
  display: block;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.tutorial-overlay .tutorial-item[data-dir=right-bottom]:before {
  left: 100%;
  bottom: -15px;
}

.tutorial-overlay .tutorial-item[data-dir=right-top]:before {
  left: 100%;
  top: -15px;
  transform: scaleY(-1);
}

.tutorial-overlay .tutorial-item[data-dir=left]:before {
  right: 100%;
  bottom: -15px;
  transform: scaleX(-1);
  margin-right: -10px;
}

.tutorial-overlay .tutorial-item[data-dir=bottom] {
  margin-bottom: 40px;
}

.tutorial-overlay .tutorial-item[data-dir=bottom]:before {
  left: 50%;
  margin-left: -20px;
  top: 100%;
  margin-top: 5px;
  transform: rotate(90deg);
}

.tutorial-overlay .tutorial-item[data-dir=bottom]:nth-child(odd):before {
  transform: rotate(-90deg) scaleX(-1);
}

.tutorial-overlay .tutorial-item[data-item=polls] {
  top: 170px;
  right: 420px;
}

.tutorial-overlay .tutorial-item[data-item=notes] {
  top: 40vh;
  right: 430px;
}

.tutorial-overlay .tutorial-item[data-item=in-world] {
  bottom: 200px;
  right: 380px;
}

.tutorial-overlay .tutorial-item[data-item=environment] {
  bottom: 200px;
  right: 690px;
}

.tutorial-overlay .tutorial-item[data-item=environment]:before {
  transform: rotate(40deg);
  margin-top: 16px;
}

.tutorial-overlay .tutorial-item[data-item=user-interaction] {
  bottom: 280px;
  left: 30px;
}

.tutorial-overlay .tutorial-item[data-item=chat] {
  bottom: 230px;
  left: 300px;
}

.tutorial-overlay .tutorial-item[data-item=mute] {
  bottom: 110px;
  left: 40px;
}

.tutorial-overlay .tutorial-item[data-item=back-to-world] {
  right: 520px;
  top: 105px;
}

.tutorial-overlay .tutorial-item[data-item=animation-triggers] {
  right: 740px;
  bottom: 370px;
}

.tutorial-overlay .tutorial-item[data-item=animation-triggers]:before {
  left: 105%;
  top: 50%;
}

#toggle-tutorial {
  left: 60px;
  top: 80px;
  min-width: 50px;
  min-height: 50px;
  z-index: 20;
  position: absolute;
  font-weight: bold;
  font-size: 20px;
  padding: 0;
}

#toggle-tutorial > span {
  pointer-events: none;
}

#toggle-tutorial .x {
  display: none;
  font-weight: lighter;
  font-size: 40px;
  line-height: 40px;
}

#toggle-tutorial .q {
  padding: 0 15px;
}

#toggle-tutorial .x:after {
  content: "Tutorial mode";
  position: absolute;
  white-space: nowrap;
  text-transform: uppercase;
  left: 100%;
  margin-left: 20px;
  font-size: 50px;
  font-weight: bold;
  line-height: 45px;
  top: 0;
}

body.in-tutorial #toggle-tutorial .x {
  display: inline;
}

body.in-tutorial #toggle-tutorial .q {
  display: none;
}

@media (max-width: 1550px) {
  .tutorial-overlay .tutorial-item[data-item=environment] {
    bottom: 230px;
    right: 580px;
    padding-bottom: 30px;
  }

  .tutorial-overlay .tutorial-item[data-item=environment]:before {
    transform: rotate(60deg);
    margin-top: -4px;
    margin-left: 10px;
  }
}

@media (max-width: 1260px) {
  .tutorial-overlay .tutorial-item {
    opacity: 0.2;
    transition: opacity 0.1s;
    pointer-events: all;
  }

  .tutorial-overlay .tutorial-item:hover {
    opacity: 1;
  }
}

@media (max-height: 870px) {
  .tutorial-overlay .tutorial-item {
    opacity: 0.2;
    transition: opacity 0.1s;
    pointer-events: all;
  }

  .tutorial-overlay .tutorial-item:hover {
    opacity: 1;
  }
}

/*
* Font Face
*/

@font-face {
  font-family: "simple-line-icons";
  src: url(/fonts/vendor/simple-line-icons/Simple-Line-Icons.eot?f33df365d6d0255b586f2920355e94d7);
  src: url(/fonts/vendor/simple-line-icons/Simple-Line-Icons.eot?f33df365d6d0255b586f2920355e94d7) format("embedded-opentype"), url(/fonts/vendor/simple-line-icons/Simple-Line-Icons.woff2?0cb0b9c589c0624c9c78dd3d83e946f6) format("woff2"), url(/fonts/vendor/simple-line-icons/Simple-Line-Icons.ttf?d2285965fe34b05465047401b8595dd0) format("truetype"), url(/fonts/vendor/simple-line-icons/Simple-Line-Icons.woff?78f07e2c2a535c26ef21d95e41bd7175) format("woff"), url(/fonts/vendor/simple-line-icons/Simple-Line-Icons.svg?2a103029dda6ab1bc9c8b0ee72536e41) format("svg");
  font-weight: normal;
  font-style: normal;
}

/*
 Use the following code if you want to have a class per icon.
 Instead of a list of all class selectors, you can use the generic [class*="icon-"] selector,
 but it's slower.
*/

.icon-user,
.icon-people,
.icon-user-female,
.icon-user-follow,
.icon-user-following,
.icon-user-unfollow,
.icon-login,
.icon-logout,
.icon-emotsmile,
.icon-phone,
.icon-call-end,
.icon-call-in,
.icon-call-out,
.icon-map,
.icon-location-pin,
.icon-direction,
.icon-directions,
.icon-compass,
.icon-layers,
.icon-menu,
.icon-list,
.icon-options-vertical,
.icon-options,
.icon-arrow-down,
.icon-arrow-left,
.icon-arrow-right,
.icon-arrow-up,
.icon-arrow-up-circle,
.icon-arrow-left-circle,
.icon-arrow-right-circle,
.icon-arrow-down-circle,
.icon-check,
.icon-clock,
.icon-plus,
.icon-minus,
.icon-close,
.icon-event,
.icon-exclamation,
.icon-organization,
.icon-trophy,
.icon-screen-smartphone,
.icon-screen-desktop,
.icon-plane,
.icon-notebook,
.icon-mustache,
.icon-mouse,
.icon-magnet,
.icon-energy,
.icon-disc,
.icon-cursor,
.icon-cursor-move,
.icon-crop,
.icon-chemistry,
.icon-speedometer,
.icon-shield,
.icon-screen-tablet,
.icon-magic-wand,
.icon-hourglass,
.icon-graduation,
.icon-ghost,
.icon-game-controller,
.icon-fire,
.icon-eyeglass,
.icon-envelope-open,
.icon-envelope-letter,
.icon-bell,
.icon-badge,
.icon-anchor,
.icon-wallet,
.icon-vector,
.icon-speech,
.icon-puzzle,
.icon-printer,
.icon-present,
.icon-playlist,
.icon-pin,
.icon-picture,
.icon-handbag,
.icon-globe-alt,
.icon-globe,
.icon-folder-alt,
.icon-folder,
.icon-film,
.icon-feed,
.icon-drop,
.icon-drawer,
.icon-docs,
.icon-doc,
.icon-diamond,
.icon-cup,
.icon-calculator,
.icon-bubbles,
.icon-briefcase,
.icon-book-open,
.icon-basket-loaded,
.icon-basket,
.icon-bag,
.icon-action-undo,
.icon-action-redo,
.icon-wrench,
.icon-umbrella,
.icon-trash,
.icon-tag,
.icon-support,
.icon-frame,
.icon-size-fullscreen,
.icon-size-actual,
.icon-shuffle,
.icon-share-alt,
.icon-share,
.icon-rocket,
.icon-question,
.icon-pie-chart,
.icon-pencil,
.icon-note,
.icon-loop,
.icon-home,
.icon-grid,
.icon-graph,
.icon-microphone,
.icon-music-tone-alt,
.icon-music-tone,
.icon-earphones-alt,
.icon-earphones,
.icon-equalizer,
.icon-like,
.icon-dislike,
.icon-control-start,
.icon-control-rewind,
.icon-control-play,
.icon-control-pause,
.icon-control-forward,
.icon-control-end,
.icon-volume-1,
.icon-volume-2,
.icon-volume-off,
.icon-calendar,
.icon-bulb,
.icon-chart,
.icon-ban,
.icon-bubble,
.icon-camrecorder,
.icon-camera,
.icon-cloud-download,
.icon-cloud-upload,
.icon-envelope,
.icon-eye,
.icon-flag,
.icon-heart,
.icon-info,
.icon-key,
.icon-link,
.icon-lock,
.icon-lock-open,
.icon-magnifier,
.icon-magnifier-add,
.icon-magnifier-remove,
.icon-paper-clip,
.icon-paper-plane,
.icon-power,
.icon-refresh,
.icon-reload,
.icon-settings,
.icon-star,
.icon-symbol-female,
.icon-symbol-male,
.icon-target,
.icon-credit-card,
.icon-paypal,
.icon-social-tumblr,
.icon-social-twitter,
.icon-social-facebook,
.icon-social-instagram,
.icon-social-linkedin,
.icon-social-pinterest,
.icon-social-github,
.icon-social-google,
.icon-social-reddit,
.icon-social-skype,
.icon-social-dribbble,
.icon-social-behance,
.icon-social-foursqare,
.icon-social-soundcloud,
.icon-social-spotify,
.icon-social-stumbleupon,
.icon-social-youtube,
.icon-social-dropbox,
.icon-social-vkontakte,
.icon-social-steam {
  font-family: "simple-line-icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-user:before {
  content: "\E005";
}

.icon-people:before {
  content: "\E001";
}

.icon-user-female:before {
  content: "\E000";
}

.icon-user-follow:before {
  content: "\E002";
}

.icon-user-following:before {
  content: "\E003";
}

.icon-user-unfollow:before {
  content: "\E004";
}

.icon-login:before {
  content: "\E066";
}

.icon-logout:before {
  content: "\E065";
}

.icon-emotsmile:before {
  content: "\E021";
}

.icon-phone:before {
  content: "\E600";
}

.icon-call-end:before {
  content: "\E048";
}

.icon-call-in:before {
  content: "\E047";
}

.icon-call-out:before {
  content: "\E046";
}

.icon-map:before {
  content: "\E033";
}

.icon-location-pin:before {
  content: "\E096";
}

.icon-direction:before {
  content: "\E042";
}

.icon-directions:before {
  content: "\E041";
}

.icon-compass:before {
  content: "\E045";
}

.icon-layers:before {
  content: "\E034";
}

.icon-menu:before {
  content: "\E601";
}

.icon-list:before {
  content: "\E067";
}

.icon-options-vertical:before {
  content: "\E602";
}

.icon-options:before {
  content: "\E603";
}

.icon-arrow-down:before {
  content: "\E604";
}

.icon-arrow-left:before {
  content: "\E605";
}

.icon-arrow-right:before {
  content: "\E606";
}

.icon-arrow-up:before {
  content: "\E607";
}

.icon-arrow-up-circle:before {
  content: "\E078";
}

.icon-arrow-left-circle:before {
  content: "\E07A";
}

.icon-arrow-right-circle:before {
  content: "\E079";
}

.icon-arrow-down-circle:before {
  content: "\E07B";
}

.icon-check:before {
  content: "\E080";
}

.icon-clock:before {
  content: "\E081";
}

.icon-plus:before {
  content: "\E095";
}

.icon-minus:before {
  content: "\E615";
}

.icon-close:before {
  content: "\E082";
}

.icon-event:before {
  content: "\E619";
}

.icon-exclamation:before {
  content: "\E617";
}

.icon-organization:before {
  content: "\E616";
}

.icon-trophy:before {
  content: "\E006";
}

.icon-screen-smartphone:before {
  content: "\E010";
}

.icon-screen-desktop:before {
  content: "\E011";
}

.icon-plane:before {
  content: "\E012";
}

.icon-notebook:before {
  content: "\E013";
}

.icon-mustache:before {
  content: "\E014";
}

.icon-mouse:before {
  content: "\E015";
}

.icon-magnet:before {
  content: "\E016";
}

.icon-energy:before {
  content: "\E020";
}

.icon-disc:before {
  content: "\E022";
}

.icon-cursor:before {
  content: "\E06E";
}

.icon-cursor-move:before {
  content: "\E023";
}

.icon-crop:before {
  content: "\E024";
}

.icon-chemistry:before {
  content: "\E026";
}

.icon-speedometer:before {
  content: "\E007";
}

.icon-shield:before {
  content: "\E00E";
}

.icon-screen-tablet:before {
  content: "\E00F";
}

.icon-magic-wand:before {
  content: "\E017";
}

.icon-hourglass:before {
  content: "\E018";
}

.icon-graduation:before {
  content: "\E019";
}

.icon-ghost:before {
  content: "\E01A";
}

.icon-game-controller:before {
  content: "\E01B";
}

.icon-fire:before {
  content: "\E01C";
}

.icon-eyeglass:before {
  content: "\E01D";
}

.icon-envelope-open:before {
  content: "\E01E";
}

.icon-envelope-letter:before {
  content: "\E01F";
}

.icon-bell:before {
  content: "\E027";
}

.icon-badge:before {
  content: "\E028";
}

.icon-anchor:before {
  content: "\E029";
}

.icon-wallet:before {
  content: "\E02A";
}

.icon-vector:before {
  content: "\E02B";
}

.icon-speech:before {
  content: "\E02C";
}

.icon-puzzle:before {
  content: "\E02D";
}

.icon-printer:before {
  content: "\E02E";
}

.icon-present:before {
  content: "\E02F";
}

.icon-playlist:before {
  content: "\E030";
}

.icon-pin:before {
  content: "\E031";
}

.icon-picture:before {
  content: "\E032";
}

.icon-handbag:before {
  content: "\E035";
}

.icon-globe-alt:before {
  content: "\E036";
}

.icon-globe:before {
  content: "\E037";
}

.icon-folder-alt:before {
  content: "\E039";
}

.icon-folder:before {
  content: "\E089";
}

.icon-film:before {
  content: "\E03A";
}

.icon-feed:before {
  content: "\E03B";
}

.icon-drop:before {
  content: "\E03E";
}

.icon-drawer:before {
  content: "\E03F";
}

.icon-docs:before {
  content: "\E040";
}

.icon-doc:before {
  content: "\E085";
}

.icon-diamond:before {
  content: "\E043";
}

.icon-cup:before {
  content: "\E044";
}

.icon-calculator:before {
  content: "\E049";
}

.icon-bubbles:before {
  content: "\E04A";
}

.icon-briefcase:before {
  content: "\E04B";
}

.icon-book-open:before {
  content: "\E04C";
}

.icon-basket-loaded:before {
  content: "\E04D";
}

.icon-basket:before {
  content: "\E04E";
}

.icon-bag:before {
  content: "\E04F";
}

.icon-action-undo:before {
  content: "\E050";
}

.icon-action-redo:before {
  content: "\E051";
}

.icon-wrench:before {
  content: "\E052";
}

.icon-umbrella:before {
  content: "\E053";
}

.icon-trash:before {
  content: "\E054";
}

.icon-tag:before {
  content: "\E055";
}

.icon-support:before {
  content: "\E056";
}

.icon-frame:before {
  content: "\E038";
}

.icon-size-fullscreen:before {
  content: "\E057";
}

.icon-size-actual:before {
  content: "\E058";
}

.icon-shuffle:before {
  content: "\E059";
}

.icon-share-alt:before {
  content: "\E05A";
}

.icon-share:before {
  content: "\E05B";
}

.icon-rocket:before {
  content: "\E05C";
}

.icon-question:before {
  content: "\E05D";
}

.icon-pie-chart:before {
  content: "\E05E";
}

.icon-pencil:before {
  content: "\E05F";
}

.icon-note:before {
  content: "\E060";
}

.icon-loop:before {
  content: "\E064";
}

.icon-home:before {
  content: "\E069";
}

.icon-grid:before {
  content: "\E06A";
}

.icon-graph:before {
  content: "\E06B";
}

.icon-microphone:before {
  content: "\E063";
}

.icon-music-tone-alt:before {
  content: "\E061";
}

.icon-music-tone:before {
  content: "\E062";
}

.icon-earphones-alt:before {
  content: "\E03C";
}

.icon-earphones:before {
  content: "\E03D";
}

.icon-equalizer:before {
  content: "\E06C";
}

.icon-like:before {
  content: "\E068";
}

.icon-dislike:before {
  content: "\E06D";
}

.icon-control-start:before {
  content: "\E06F";
}

.icon-control-rewind:before {
  content: "\E070";
}

.icon-control-play:before {
  content: "\E071";
}

.icon-control-pause:before {
  content: "\E072";
}

.icon-control-forward:before {
  content: "\E073";
}

.icon-control-end:before {
  content: "\E074";
}

.icon-volume-1:before {
  content: "\E09F";
}

.icon-volume-2:before {
  content: "\E0A0";
}

.icon-volume-off:before {
  content: "\E0A1";
}

.icon-calendar:before {
  content: "\E075";
}

.icon-bulb:before {
  content: "\E076";
}

.icon-chart:before {
  content: "\E077";
}

.icon-ban:before {
  content: "\E07C";
}

.icon-bubble:before {
  content: "\E07D";
}

.icon-camrecorder:before {
  content: "\E07E";
}

.icon-camera:before {
  content: "\E07F";
}

.icon-cloud-download:before {
  content: "\E083";
}

.icon-cloud-upload:before {
  content: "\E084";
}

.icon-envelope:before {
  content: "\E086";
}

.icon-eye:before {
  content: "\E087";
}

.icon-flag:before {
  content: "\E088";
}

.icon-heart:before {
  content: "\E08A";
}

.icon-info:before {
  content: "\E08B";
}

.icon-key:before {
  content: "\E08C";
}

.icon-link:before {
  content: "\E08D";
}

.icon-lock:before {
  content: "\E08E";
}

.icon-lock-open:before {
  content: "\E08F";
}

.icon-magnifier:before {
  content: "\E090";
}

.icon-magnifier-add:before {
  content: "\E091";
}

.icon-magnifier-remove:before {
  content: "\E092";
}

.icon-paper-clip:before {
  content: "\E093";
}

.icon-paper-plane:before {
  content: "\E094";
}

.icon-power:before {
  content: "\E097";
}

.icon-refresh:before {
  content: "\E098";
}

.icon-reload:before {
  content: "\E099";
}

.icon-settings:before {
  content: "\E09A";
}

.icon-star:before {
  content: "\E09B";
}

.icon-symbol-female:before {
  content: "\E09C";
}

.icon-symbol-male:before {
  content: "\E09D";
}

.icon-target:before {
  content: "\E09E";
}

.icon-credit-card:before {
  content: "\E025";
}

.icon-paypal:before {
  content: "\E608";
}

.icon-social-tumblr:before {
  content: "\E00A";
}

.icon-social-twitter:before {
  content: "\E009";
}

.icon-social-facebook:before {
  content: "\E00B";
}

.icon-social-instagram:before {
  content: "\E609";
}

.icon-social-linkedin:before {
  content: "\E60A";
}

.icon-social-pinterest:before {
  content: "\E60B";
}

.icon-social-github:before {
  content: "\E60C";
}

.icon-social-google:before {
  content: "\E60D";
}

.icon-social-reddit:before {
  content: "\E60E";
}

.icon-social-skype:before {
  content: "\E60F";
}

.icon-social-dribbble:before {
  content: "\E00D";
}

.icon-social-behance:before {
  content: "\E610";
}

.icon-social-foursqare:before {
  content: "\E611";
}

.icon-social-soundcloud:before {
  content: "\E612";
}

.icon-social-spotify:before {
  content: "\E613";
}

.icon-social-stumbleupon:before {
  content: "\E614";
}

.icon-social-youtube:before {
  content: "\E008";
}

.icon-social-dropbox:before {
  content: "\E00C";
}

.icon-social-vkontakte:before {
  content: "\E618";
}

.icon-social-steam:before {
  content: "\E620";
}

#whitepapers {
  display: none;
  flex-direction: row;
  justify-content: center;
  position: fixed;
  background-color: #0297D6;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 10vh 10vw 7vh 10vw;
  background-image: url("/images/world/logo.png");
  background-size: 200px auto;
  background-position: 3vw 3vh;
  background-repeat: no-repeat;
}

#whitepapers.active {
  display: flex;
}

#whitepapers a {
  text-decoration: none;
}

#whitepapers a:hover {
  text-decoration: none;
}

#whitepapers p {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: inherit;
}

#whitepapers .sidebar {
  padding: 30px;
  width: 24%;
  margin-right: 2%;
  max-width: 300px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  background-image: url("/images/world/library-solo.png");
  background-size: contain;
  background-position: -30px 100%;
  background-repeat: no-repeat;
}

#whitepapers .sidebar .base,
#whitepapers .sidebar .current {
  display: none;
}

#whitepapers .sidebar .base,
#whitepapers .sidebar .current {
  flex-direction: column;
}

#whitepapers .sidebar .base h2,
#whitepapers .sidebar .current h2 {
  font-size: 21px;
  word-wrap: break-word;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 0px;
}

#whitepapers .sidebar .base p,
#whitepapers .sidebar .current p {
  margin-top: 30px;
  font-size: 16px;
  font-weight: lighter;
  margin-bottom: 30px;
}

#whitepapers .sidebar .base a.back,
#whitepapers .sidebar .base a.filter,
#whitepapers .sidebar .current a.back,
#whitepapers .sidebar .current a.filter {
  font-weight: bold;
  font-size: 14px;
  color: white;
  text-decoration: none;
}

#whitepapers .sidebar .base a.back:before,
#whitepapers .sidebar .base a.filter:before,
#whitepapers .sidebar .current a.back:before,
#whitepapers .sidebar .current a.filter:before {
  content: "<";
  margin-right: 5px;
  font-weight: normal;
  font-size: 12px;
}

#whitepapers .sidebar .base a.back:hover,
#whitepapers .sidebar .base a.filter:hover,
#whitepapers .sidebar .current a.back:hover,
#whitepapers .sidebar .current a.filter:hover {
  text-decoration: none;
}

#whitepapers .sidebar .base a.filter:before,
#whitepapers .sidebar .current a.filter:before {
  display: none;
}

#whitepapers .sidebar .base .topic,
#whitepapers .sidebar .current .topic {
  font-weight: bold;
  margin-top: 30px;
}

#whitepapers .sidebar .base .topic p,
#whitepapers .sidebar .current .topic p {
  margin-top: 0;
  font-size: inherit;
  font-weight: bold;
}

#whitepapers .main {
  width: 74%;
  max-width: 900px;
  background: rgba(255, 255, 255, 0.2);
  padding: 10px;
  border-radius: 16px;
  position: relative;
}

#whitepapers .main:before,
#whitepapers .main:after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  height: 30px;
  display: block;
  z-index: 4;
}

#whitepapers .main:before {
  background: linear-gradient(to bottom, #35acde, transparent);
  top: 9px;
}

#whitepapers .main:after {
  background: linear-gradient(to top, #35acde, transparent);
  bottom: 9px;
}

#whitepapers .main .topics,
#whitepapers .main .attachments {
  display: none;
  flex-wrap: wrap;
  overflow: auto;
  max-height: 100%;
  padding: 30px;
  position: relative;
}

#whitepapers .main .topic {
  width: 32%;
  margin: 0;
  margin-bottom: 2%;
  min-height: 60px;
  border: none;
  position: relative;
  transition: background 100ms;
  background: linear-gradient(90deg, #539dbb, #2d84a9);
  border-radius: 12px;
  background: linear-gradient(90deg, #7FCAEA, #0B9BD8);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 15px;
  text-align: left;
  padding-left: 60px;
}

#whitepapers .main .topic:before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 2px;
  bottom: 2px;
  background-color: #0072a3;
  border-radius: 10px;
  z-index: 0;
}

#whitepapers .main .topic > span {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

#whitepapers .main .topic span {
  color: white !important;
}

#whitepapers .main .topic p {
  margin: 0;
}

#whitepapers .main .topic:nth-child(3n+2) {
  margin-right: 2%;
  margin-left: 2%;
}

#whitepapers .main .topic > span:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40px;
  width: 40px;
  background-image: url("/images/world/vinkje.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 25px auto;
}

#whitepapers .main .attachment {
  justify-content: flex-start;
  padding-left: 20px;
}

#whitepapers .main .attachment h4 {
  font-size: 16px;
  display: block;
}

#whitepapers .main .attachment span:after {
  display: none;
}

#whitepapers .main .attachment[data-mime] span:before {
  content: "";
  position: relative;
  background: white;
  color: black;
  width: 40px;
  height: 50px;
  display: block;
  margin-bottom: 15px;
  border-radius: 3px;
  font-family: "simple-line-icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  -webkit-font-smoothing: antialiased;
}

#whitepapers .main .attachment[data-mime] span:before {
  content: "\E083";
}

#whitepapers .main .attachment[data-mime*=audio] span:before {
  content: "\E0A0";
}

#whitepapers .main .attachment[data-mime*=pdf] span:before {
  content: "\E085";
}

#whitepapers .main .attachment[data-mime*=video] span:before {
  content: "\E07E";
}

#whitepapers .main .attachment[data-mime*=image] span:before {
  content: "\E032";
}

#whitepapers[data-view=main] .sidebar .base {
  display: flex;
}

#whitepapers[data-view=main] .main .topics {
  display: flex;
}

#whitepapers[data-view=topic] .sidebar .current {
  display: flex;
}

#whitepapers[data-view=topic] .main .attachments {
  display: flex;
}

#whitepapers button#close-whitepapers {
  border: none;
  position: relative;
  transition: background 100ms;
  background: linear-gradient(90deg, #539dbb, #2d84a9);
  border-radius: 12px;
  margin-bottom: 10px;
  align-self: flex-end;
  padding-left: 20px;
  padding-right: 20px;
  transition: opacity 500ms;
  width: 50px;
  height: 50px;
  line-height: 50px;
  padding: 0;
  font-weight: lighter;
  font-size: 40px;
  pointer-events: all;
  border-radius: 10px;
  background: linear-gradient(90deg, #7FCAEA, #0B9BD8);
  position: absolute;
  right: 10px;
  top: 10px;
}

#whitepapers button#close-whitepapers:before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 2px;
  bottom: 2px;
  background-color: #0072a3;
  border-radius: 10px;
  z-index: 0;
}

#whitepapers button#close-whitepapers > span {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

canvas#main {
  background-color: transparent;
}

#controls {
  position: absolute;
  left: 0;
  top: 0;
}

body.standalone #overlay {
  padding-right: 200px;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}

body > .wrap {
  max-width: 177vh;
  position: relative;
  display: block;
  margin: auto;
  height: 100%;
  width: 100%;
}

#overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  z-index: 30;
  display: none;
  padding: 100px 50px;
}

#overlay.active {
  display: flex;
}

#overlay button.close {
  border: none;
  position: relative;
  transition: background 100ms;
  background: linear-gradient(90deg, #539dbb, #2d84a9);
  border-radius: 12px;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 32;
  display: none;
  margin-bottom: 10px;
  align-self: flex-end;
  padding-left: 20px;
  padding-right: 20px;
  transition: opacity 500ms;
  width: 50px;
  height: 50px;
  line-height: 50px;
  padding: 0;
  font-weight: lighter;
  font-size: 40px;
  pointer-events: all;
  border-radius: 20px;
  background: linear-gradient(45deg, #74b0c8, #2d84a9);
}

#overlay button.close:before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 2px;
  bottom: 2px;
  background-color: #0072a3;
  border-radius: 10px;
  z-index: 0;
}

#overlay button.close > span {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

#overlay button.close.active {
  display: block;
  opacity: 1;
}

#overlay button.close:before {
  border-radius: 18px;
}

#overlay button.close > span {
  color: white;
}

#overlay .content {
  position: relative;
  z-index: 31;
  border-radius: 0px;
  max-width: 90vh;
  max-height: 90vh;
  flex-grow: 2;
  overflow-y: auto;
  background-color: transparent;
  background-image: url("/images/world/box_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  border-image-source: url("/images/world/box_border.png");
  border-width: 16px;
  border-style: solid;
  border-image-width: 16px;
  border-image-slice: 33%;
  border-radius: 14px;
  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.11);
  box-shadow: none;
}

#overlay .content .pdf,
#overlay .content .text,
#overlay .content .image,
#overlay .content .presentation {
  display: none;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: relative;
  overflow-y: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

#overlay .content .loading {
  background: #EFEFEF;
  padding: 30px;
  display: none;
}

#overlay .content .text {
  padding: 10px;
}

#overlay .content .image,
#overlay .content .text {
  background: white;
  color: black;
}

#overlay .content .image img,
#overlay .content .text img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

#overlay .content .text {
  padding: 10%;
}

#overlay .content .pdf {
  background: #EFEFEF;
  width: 100%;
  height: 100%;
  color: black;
}

#overlay .content .pdf canvas {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

#overlay[data-type=pdf] .pdf {
  display: flex;
}

#overlay[data-type=text] .text {
  display: flex;
}

#overlay[data-type=image] .image {
  display: flex;
}

#overlay[data-type=presentation] .presentation {
  display: flex;
}

#overlay.is-loading .pdf,
#overlay.is-loading .text,
#overlay.is-loading .image {
  display: none;
}

#overlay.is-loading .loading {
  display: block;
  width: 100%;
  height: 100%;
  color: black;
}

#overlay .presentation {
  max-width: 100%;
}

#overlay .presentation img {
  width: 100%;
  height: 100%;
  background-color: white;
  -o-object-fit: contain;
     object-fit: contain;
}

#overlay + #overlay-navigation {
  position: absolute;
  z-index: 44;
  right: 23px;
  bottom: 23px;
  border: solid rgba(0, 150, 214, 0.74) 2px;
  background-color: rgba(0, 114, 163, 0.9);
  border-radius: 16px;
  width: 84px;
  height: 44px;
  overflow: hidden;
  display: none;
}

#overlay + #overlay-navigation .btn-group {
  width: 100%;
  height: 100%;
}

#overlay + #overlay-navigation button {
  width: 50%;
  height: 100%;
  color: white;
  display: inline-block;
  border: none;
  background-color: #01628a;
  font-size: 12px;
}

#overlay + #overlay-navigation button:focus,
#overlay + #overlay-navigation button:active {
  outline: none !important;
  box-shadow: none !important;
}

#overlay + #overlay-navigation button:first-child {
  border-right: solid #0297D6 1px;
}

#overlay[data-type=image] + #overlay-navigation,
#overlay[data-type=text] + #overlay-navigation {
  display: none !important;
}

body.in-roundtable #overlay {
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  background: none;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  padding: 3%;
  padding-bottom: 200px;
}

body.in-roundtable #overlay .content {
  display: block;
  grid-area: 2/2/4/4;
  border: solid transparent 5px;
  box-sizing: border-box;
  border-radius: 17px;
}

body.in-roundtable #animations-container {
  display: none;
}

body.in-roundtable.presenter #overlay {
  padding: 15px;
  padding-bottom: 75px;
  border-width: 0;
  border-radius: 17px;
}

body.in-roundtable.presenter #overlay button.close {
  right: 26%;
  top: 32%;
}

#speaker-notes {
  margin-top: 20px;
  display: none;
  max-height: 48%;
  overflow-y: auto;
  color: white !important;
}

body.standalone #overlay button.close {
  display: block;
}

body.standalone #overlay + #overlay-navigation {
  display: none;
}

body.standalone #overlay.active + #overlay-navigation {
  display: block;
}

.text-center {
  text-align: center;
}

button:focus,
button:active {
  outline: none;
  box-shadow: none;
}

#billboard-container {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  display: none;
  z-index: 10;
  background-color: white;
  opacity: 0;
  transition: opacity 1000ms;
}

#billboard-container:after {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-image-source: url("/images/world/hp/sprites/zeppelin/billboard.png");
  border-width: 12px 20px 17px 20px;
  border-style: solid;
  border-image-width: 12px 20px 17px 20px;
  border-image-slice: 7%;
}

#billboard-container.active {
  display: block;
  opacity: 1;
  box-shadow: inset 0 0 10px #000000b3, 0 0 5px #00000036;
  transition: opacity 100ms;
}

#billboard-container img {
  display: none;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

#billboard-container img:first-child {
  display: block;
}

#chapter-buttons,
#poll-buttons {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-top: 10px;
}

#chapter-buttons > button,
#poll-buttons > button {
  flex-grow: 1;
  max-width: 30%;
}

#chapter-buttons > select,
#poll-buttons > select {
  flex-grow: 3;
  max-width: 80%;
}

#poll-buttons {
  margin-top: 0;
  margin-bottom: 10px;
}

#poll-buttons select {
  margin-right: 10px;
  padding-right: 20px;
}

#poll-buttons select:empty,
#poll-buttons select:empty + button#poll-selection-go {
  pointer-events: none;
  opacity: 0.5;
}

body #presentation-choice {
  display: none;
}

body.in-roundtable #presentation-choice {
  display: flex;
}

.video[data-user] {
  position: relative;
}

.video[data-user]:hover select,
.video[data-user]:hover label.audio,
.video[data-user]:hover label.videolabel {
  display: block;
}

.video[data-user] label.audio,
.video[data-user] label.videolabel {
  display: none;
  position: absolute;
  height: 24px;
  width: 36px;
  text-align: right;
  font-size: 12px;
  line-height: 24px;
}

.video[data-user] label.audio {
  top: 10px;
}

.video[data-user] label.videolabel {
  top: 40px;
}

.video[data-user] select {
  display: none;
  position: absolute;
  max-width: 120px;
  height: 24px;
  padding-left: 10px;
  border: none;
  left: 40px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.7);
}

.video[data-user] select.audio-selector {
  top: 10px;
}

.video[data-user] select.video-selector {
  top: 40px;
}

body.in-roundtable button#chapter-1,
body.in-roundtable button#chapter-2,
body.in-roundtable button#open-billboard,
body.in-roundtable button#close-billboard {
  opacity: 0.5;
  pointer-events: none !important;
}

body.presenter #overlay .content {
  max-width: calc(100vh - 340px);
  max-height: calc(100vh - 340px);
}

body.standalone #voiceover-video {
  position: absolute;
  left: 30px;
  bottom: 30px;
  border: none;
  background: linear-gradient(90deg, #539dbb, #2d84a9);
  border-radius: 12px;
  padding: 6px;
  display: none;
}

body.standalone #voiceover-video.active {
  display: flex;
}

body.standalone #voiceover-video:before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 2px;
  bottom: 2px;
  background-color: #0072a3;
  border-radius: 10px;
  z-index: 0;
}

body.standalone #voiceover-video:hover:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-color: transparent transparent transparent white;
  border-width: 15px 0 15px 20px;
  border-style: solid;
  width: 0;
  height: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.8));
}

body.standalone #voiceover-video[data-playing]:hover:after {
  content: "";
  border-color: white;
  border-width: 0 10px 0 10px;
  border-style: solid;
  box-sizing: content-box;
  width: 10px;
  height: 30px;
}

body.standalone #voiceover-video > video {
  position: relative;
  width: 16vw;
  height: 9vw;
  border-radius: 6px;
  background-color: black;
}

body.is-playing-video #client-videos.roundtable > .video {
  display: none;
}

body.is-playing-video #client-videos.roundtable #presentation-choice {
  grid-area: 1/1/5/5 !important;
}

body.is-playing-video #client-videos.roundtable #presentation-choice:before {
  opacity: 0;
}

body.is-playing-video #client-videos.roundtable #presentation-choice > button {
  display: none;
}

body.is-playing-video #client-videos.roundtable #presentation-choice .video-overview > img[data-video-src],
body.is-playing-video #client-videos.roundtable #presentation-choice .video-overview > button[data-video-src] {
  opacity: 0;
}

@media screen and (min-width: 3200px) {
  body {
    zoom: 1.5;
  }

  body > .wrap {
    max-width: 118vh;
    position: relative;
    display: block;
    margin: auto;
    height: 100%;
    width: 100%;
  }
}

#mute-controls {
  display: none;
}

#toggle-setup-screen {
  position: absolute;
  right: 15px;
  top: 15px;
  width: 40px;
  height: 40px;
  background-image: url("/images/world/icons/setup.png");
  background-size: auto 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  border: none;
}

#video-publisher-refresh {
  position: absolute;
  bottom: 3px;
  right: 3px;
  display: none;
  background: transparent;
  border: none;
  color: white;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.video-preview-container:hover #video-publisher-refresh {
  display: block;
}

.lang-switch {
  position: absolute;
  color: white;
  top: 4px;
  left: 4px;
}

.lang-switch > span {
  opacity: 0.6;
}

.lang-switch > a {
  color: white;
  opacity: 0.6;
  text-transform: uppercase;
}

.lang-switch > a:hover {
  opacity: 1;
  text-decoration: none;
}

#clickpoint_balloon_1,
#clickpoint_balloon_2 {
  position: absolute;
  right: 20px;
  border-radius: 20px;
  padding: 15px;
  color: white;
  display: flex;
  opacity: 0;
  flex-direction: column;
  z-index: 29;
  font-size: 14px;
  pointer-events: none;
  transition: opacity 100ms;
}

#clickpoint_balloon_1 a,
#clickpoint_balloon_2 a {
  color: inherit;
  text-decoration: underline;
}

#clickpoint_balloon_1 .title,
#clickpoint_balloon_1 .text,
#clickpoint_balloon_2 .title,
#clickpoint_balloon_2 .text {
  position: relative;
  z-index: 101;
}

#clickpoint_balloon_1 .title,
#clickpoint_balloon_2 .title {
  font-weight: bold;
}

#clickpoint_balloon_1 .text,
#clickpoint_balloon_2 .text {
  overflow-y: auto;
  padding-bottom: 20px;
}

#clickpoint_balloon_1.active,
#clickpoint_balloon_2.active {
  opacity: 1;
  display: flex;
  pointer-events: all;
}

#clickpoint_balloon_1:hover,
#clickpoint_balloon_2:hover {
  pointer-events: all;
  opacity: 1;
}

#clickpoint_balloon_1 .f,
#clickpoint_balloon_2 .f {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 20px;
  display: block;
  background: linear-gradient(to top, #0578a9, transparent);
  bottom: 14px;
  z-index: 102;
}

#clickpoint_balloon_1.has-overflow .f:before,
#clickpoint_balloon_2.has-overflow .f:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url("/images/world/icons/caret-down.png");
  background-repeat: no-repeat;
  background-position: center 100%;
  background-size: auto 17px;
}

#clickpoint_balloon_1 {
  background: linear-gradient(45deg, #7FC9E8, #0095D4);
  width: 330px;
  min-height: 200px;
  bottom: 60px;
  padding-bottom: 205px;
  padding-bottom: 85px;
  right: 50px;
  max-height: 45vh;
  pointer-events: none;
}

#clickpoint_balloon_1:before {
  content: "";
  position: absolute;
  background-color: rgba(0, 114, 163, 0.9);
  left: 2px;
  right: 2px;
  top: 2px;
  bottom: 2px;
  border-radius: 18px;
}

#clickpoint_balloon_1 .person {
  position: absolute;
  bottom: -30px;
  margin-top: 10px;
  right: -25px;
  height: 115px;
  width: 320px;
  background-image: url("/images/world/hp/voiceover/female-1.png");
  background-repeat: no-repeat;
  background-position: 100% center;
  background-size: contain;
  z-index: 103;
}

#clickpoint_balloon_1 .f {
  bottom: 79px;
}

#clickpoint_balloon_2 {
  width: 330px;
  bottom: 150px;
  min-height: 50px;
  max-height: 40vh;
  background: linear-gradient(45deg, #7FC9E8, #0095D4);
  pointer-events: none;
}

#clickpoint_balloon_2:before {
  content: "";
  position: absolute;
  background-color: rgba(0, 114, 163, 0.9);
  left: 2px;
  right: 2px;
  top: 2px;
  bottom: 2px;
  border-radius: 18px;
}

#clickpoint_balloon_2:after {
  content: "";
  position: absolute;
  left: 50%;
  border-color: rgba(0, 114, 163, 0.9);
  border-left-color: transparent;
  border-style: solid;
  width: 0;
  height: 0;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 8px);
  border-width: 10px 0 0 10px;
  filter: drop-shadow(0px 2px 0 #50b6e0) drop-shadow(2px 2px 0 #50b6e0);
}

#clickpoint_balloon_2 .person {
  position: absolute;
  top: 100%;
  margin-top: 20px;
  right: 0;
  height: 115px;
  width: 320px;
  background-image: url("/images/world/hp/voiceover/female-1.png");
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: contain;
  z-index: 103;
}

#clickpoint_balloon_1 .play,
#clickpoint_balloon_2 .play {
  display: block;
}

#clickpoint_balloon_1 .pause,
#clickpoint_balloon_2 .pause {
  display: none;
}

#clickpoint_balloon_1 button.play,
#clickpoint_balloon_1 button.pause,
#clickpoint_balloon_2 button.play,
#clickpoint_balloon_2 button.pause {
  background-color: transparent;
  border: none;
  border-radius: 50px;
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 140px;
  height: 130px;
  right: 70px;
  bottom: -30px;
}

#clickpoint_balloon_1.active button.play,
#clickpoint_balloon_1.active button.pause,
#clickpoint_balloon_2.active button.play,
#clickpoint_balloon_2.active button.pause {
  pointer-events: all;
}

#clickpoint_balloon_1 button.play,
#clickpoint_balloon_2 button.play {
  width: 180px;
  background-image: url("/images/world/hp/voiceover/play_text.png");
}

#clickpoint_balloon_1 button.pause,
#clickpoint_balloon_2 button.pause {
  width: 180px;
  background-image: url("/images/world/hp/voiceover/pause_text.png");
}

#clickpoint_balloon_1.paused .play,
#clickpoint_balloon_2.paused .play {
  display: block;
}

#clickpoint_balloon_1.paused .pause,
#clickpoint_balloon_2.paused .pause {
  display: none;
}

#clickpoint_balloon_1.playing .play,
#clickpoint_balloon_2.playing .play {
  display: none;
}

#clickpoint_balloon_1.playing .pause,
#clickpoint_balloon_2.playing .pause {
  display: block;
}

#clickpoint_balloon_1.no-audio button.play,
#clickpoint_balloon_1.no-audio button.pause,
#clickpoint_balloon_2.no-audio button.play,
#clickpoint_balloon_2.no-audio button.pause {
  display: none;
}

#clickpoint_balloon_1[data-variant="1"] .person,
#clickpoint_balloon_2[data-variant="1"] .person {
  background-image: url("/images/world/hp/voiceover/female-1.png");
}

#clickpoint_balloon_1[data-variant="2"] .person,
#clickpoint_balloon_2[data-variant="2"] .person {
  background-image: url("/images/world/hp/voiceover/female-2.png");
}

#clickpoint_balloon_1[data-variant="3"] .person,
#clickpoint_balloon_2[data-variant="3"] .person {
  background-image: url("/images/world/hp/voiceover/female-3.png");
}

#clickpoint_balloon_1[data-variant="4"] .person,
#clickpoint_balloon_2[data-variant="4"] .person {
  background-image: url("/images/world/hp/voiceover/female-4.png");
}

#clickpoint_balloon_1[data-gender=male][data-variant="1"] .person,
#clickpoint_balloon_2[data-gender=male][data-variant="1"] .person {
  background-image: url("/images/world/hp/voiceover/male-1.png");
}

#clickpoint_balloon_1[data-gender=male][data-variant="2"] .person,
#clickpoint_balloon_2[data-gender=male][data-variant="2"] .person {
  background-image: url("/images/world/hp/voiceover/male-2.png");
}

#clickpoint_balloon_1[data-gender=male][data-variant="3"] .person,
#clickpoint_balloon_2[data-gender=male][data-variant="3"] .person {
  background-image: url("/images/world/hp/voiceover/male-3.png");
}

#clickpoint_balloon_1[data-gender=male][data-variant="4"] .person,
#clickpoint_balloon_2[data-gender=male][data-variant="4"] .person {
  background-image: url("/images/world/hp/voiceover/male-4.png");
}

#privacy {
  padding: 15px;
  max-width: 1200px;
  margin: auto;
  padding-top: 160px;
}

#privacy a {
  text-decoration: underline;
  color: inherit;
}

.switch-lang-standalone {
  position: absolute;
  right: 15px;
  top: 15px;
  font-size: 12px;
}

.switch-lang-standalone a {
  text-decoration: none !important;
  opacity: 1;
  font-weight: 600;
  letter-spacing: 0.02rem;
}

.switch-lang-standalone a:hover {
  opacity: 1;
}

.switch-lang-standalone span.o {
  opacity: 0.5;
}

.is-mobile-warning {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  background-color: #0297D6;
  background-image: url("/images/world/cloud-bg-main.png");
  background-size: auto 100vh;
  background-position: 0% center;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  align-content: center;
  z-index: 1000;
  padding-bottom: 70px;
  padding-top: 50px;
  display: none;
}

.is-mobile-warning .logo {
  width: 50px;
  height: 50px;
  background-image: url("/images/world/hp-logo-full.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.is-mobile-warning .text {
  text-align: center;
  max-width: 70vw;
}

.is-mobile-warning .world {
  width: 70vw;
  max-width: 300px;
  height: 70vw;
  max-height: 300px;
  background-image: url("/images/world/hp/env_small.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0px 12px 7px rgba(0, 0, 0, 0.2));
}

.is-mobile-warning .link {
  position: absolute;
  background-color: white;
  width: 100%;
  bottom: 0;
  padding: 30px 0;
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
  font-weight: lighter;
  font-size: 14px;
}

.is-mobile-warning .link a {
  font-weight: bold;
  text-decoration: underline;
  color: inherit;
}

@media screen and (max-width: 1020px) {
  .is-mobile-warning {
    display: flex;
  }
}

body #overlay + #overlay-navigation > .btn-group {
  max-width: 84px;
}

body #overlay + #overlay-navigation + .btn-close {
  display: none;
}

body.standalone #overlay + #overlay-navigation.billboard-open {
  display: block !important;
  right: initial;
  left: 23px;
}

body.standalone #overlay + #overlay-navigation.billboard-open + .btn-close {
  display: block;
  position: absolute;
  left: 115px;
  bottom: 23px;
}

body.standalone #overlay + #overlay-navigation.billboard-open + .btn-close > button {
  border: solid rgba(0, 150, 214, 0.74) 2px;
  background-color: rgba(0, 114, 163, 0.9);
  border-radius: 16px;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background-color: #01628a;
  color: white;
  font-size: 36px;
  line-height: 36px;
}