@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700);

body,
p {
  padding: 0;
  margin: 0;
}

body {
  background: #F6F9FC;
  font-family: "Roboto", sans-serif;
}

div#remote-media {
  height: 43%;
  width: 100%;
  background-color: #fff;
  text-align: center;
  margin: auto;
}

div#remote-media video {
  /*border: 1px solid #272726;*/
  margin: 16px;
  height: 100%;
  /*max-width: 27% !important;*/
  background-color: #fbfbfb;
  background-repeat: no-repeat;
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0 auto;
  object-fit: cover;
}

div#controls {
  padding: 3em;
  max-width: 1200px;
  margin: 0 auto;
}

div#controls div {
  float: left;
}

div#controls div#room-controls,
div#controls div#preview {
  width: 170px;
  /*margin: 0 1.5em;*/
  text-align: center;
}

div#controls p.instructions {
  text-align: left;
  margin-bottom: 1em;
  font-family: Helvetica-LightOblique, Helvetica, sans-serif;
  font-style: oblique;
  font-size: 1.25em;
  color: #777776;
}

div#controls button {
  width: 100%;
  height: 2.5em;
  margin-top: 1.75em;
  border-radius: 1em;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-size: .8em;
  font-weight: lighter;
  outline: 0;
}

div#controls div#room-controls input {
  font-family: Helvetica-LightOblique, Helvetica, sans-serif;
  font-style: oblique;
  font-size: 1em;
}

div#controls button:active {
  position: relative;
  top: 1px;
}

div#controls div#preview div#local-media {
  width: 140px;
  /*height: 140px;*/
  /*border: 1px solid #cececc;*/
  box-sizing: border-box;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjgwcHgiIGhlaWdodD0iODBweCIgdmlld0JveD0iMCAwIDgwIDgwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMy4zLjEgKDEyMDAyKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5GaWxsIDUxICsgRmlsbCA1MjwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHNrZXRjaDp0eXBlPSJNU1BhZ2UiPgogICAgICAgIDxnIGlkPSJjdW1tYWNrIiBza2V0Y2g6dHlwZT0iTVNMYXllckdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTU5LjAwMDAwMCwgLTE3NDYuMDAwMDAwKSIgZmlsbD0iI0ZGRkZGRiI+CiAgICAgICAgICAgIDxnIGlkPSJGaWxsLTUxLSstRmlsbC01MiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTU5LjAwMDAwMCwgMTc0Ni4wMDAwMDApIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zOS42ODYsMC43MyBDMTcuODUsMC43MyAwLjA4NSwxOC41IDAuMDg1LDQwLjMzIEMwLjA4NSw2Mi4xNyAxNy44NSw3OS45MyAzOS42ODYsNzkuOTMgQzYxLjUyMiw3OS45MyA3OS4yODcsNjIuMTcgNzkuMjg3LDQwLjMzIEM3OS4yODcsMTguNSA2MS41MjIsMC43MyAzOS42ODYsMC43MyBMMzkuNjg2LDAuNzMgWiBNMzkuNjg2LDEuNzMgQzYxLjAwNSwxLjczIDc4LjI4NywxOS4wMiA3OC4yODcsNDAuMzMgQzc4LjI4Nyw2MS42NSA2MS4wMDUsNzguOTMgMzkuNjg2LDc4LjkzIEMxOC4zNjcsNzguOTMgMS4wODUsNjEuNjUgMS4wODUsNDAuMzMgQzEuMDg1LDE5LjAyIDE4LjM2NywxLjczIDM5LjY4NiwxLjczIEwzOS42ODYsMS43MyBaIiBpZD0iRmlsbC01MSI+PC9wYXRoPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTQ3Ljk2LDUzLjMzNSBMNDcuOTYsNTIuODM1IEwyMC4wOTMsNTIuODM1IEwyMC4wOTMsMjcuODI1IEw0Ny40NiwyNy44MjUgTDQ3LjQ2LDM4LjI1NSBMNTkuMjc5LDMwLjgwNSBMNTkuMjc5LDQ5Ljg1NSBMNDcuNDYsNDIuNDA1IEw0Ny40Niw1My4zMzUgTDQ3Ljk2LDUzLjMzNSBMNDcuOTYsNTIuODM1IEw0Ny45Niw1My4zMzUgTDQ4LjQ2LDUzLjMzNSBMNDguNDYsNDQuMjE1IEw2MC4yNzksNTEuNjY1IEw2MC4yNzksMjguOTk1IEw0OC40NiwzNi40NDUgTDQ4LjQ2LDI2LjgyNSBMMTkuMDkzLDI2LjgyNSBMMTkuMDkzLDUzLjgzNSBMNDguNDYsNTMuODM1IEw0OC40Niw1My4zMzUgTDQ3Ljk2LDUzLjMzNSIgaWQ9IkZpbGwtNTIiPjwvcGF0aD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 auto;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.25);
}

div#controls div#preview div#local-media video {
  max-width: 100%;
  max-height: 100%;
  border: none;
}

div#controls div#preview button#button-preview {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE3cHgiIGhlaWdodD0iMTJweCIgdmlld0JveD0iMCAwIDE3IDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMy4zLjEgKDEyMDAyKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5GaWxsIDM0PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGcgaWQ9ImN1bW1hY2siIHNrZXRjaDp0eXBlPSJNU0xheWVyR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjUuMDAwMDAwLCAtMTkwOS4wMDAwMDApIiBmaWxsPSIjMEEwQjA5Ij4KICAgICAgICAgICAgPHBhdGggZD0iTTEzNi40NzEsMTkxOS44NyBMMTM2LjQ3MSwxOTE5LjYyIEwxMjUuNzY3LDE5MTkuNjIgTDEyNS43NjcsMTkxMC4wOCBMMTM2LjIyMSwxOTEwLjA4IEwxMzYuMjIxLDE5MTQuMTUgTDE0MC43ODUsMTkxMS4yNyBMMTQwLjc4NSwxOTE4LjQyIEwxMzYuMjIxLDE5MTUuNTUgTDEzNi4yMjEsMTkxOS44NyBMMTM2LjQ3MSwxOTE5Ljg3IEwxMzYuNDcxLDE5MTkuNjIgTDEzNi40NzEsMTkxOS44NyBMMTM2LjcyMSwxOTE5Ljg3IEwxMzYuNzIxLDE5MTYuNDUgTDE0MS4yODUsMTkxOS4zMyBMMTQxLjI4NSwxOTEwLjM3IEwxMzYuNzIxLDE5MTMuMjQgTDEzNi43MjEsMTkwOS41OCBMMTI1LjI2NywxOTA5LjU4IEwxMjUuMjY3LDE5MjAuMTIgTDEzNi43MjEsMTkyMC4xMiBMMTM2LjcyMSwxOTE5Ljg3IEwxMzYuNDcxLDE5MTkuODciIGlkPSJGaWxsLTM0IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=)1em center no-repeat #fff;
  border: none;
  padding-left: 1.5em;
  color: #333333;
}

div#controls div#log {
  border: 1px solid #686865;
  position: absolute;
  bottom: 0;
  left: 0;
}

div#controls div#room-controls {
  display: none;
  position: absolute;
  left: 16px;
  top: 16px;
}

div#controls div#room-controls input {
  width: 100%;
  height: 2.5em;
  padding: .5em;
  display: block;
}

div#controls div#room-controls button {
  color: #fff;
  background: #3B97D3;
  border: none;
}

div#controls div#room-controls button#button-leave {
  display: none;
}

div#controls div#log {
  width: 191px;
  height: 29px;
  margin-top: 2.75em;
  text-align: left;
  padding: 8px;
  /* float: right; */
  overflow-y: hidden;
  opacity: 1;
  background: white;
}

div#controls div#log p {
  color: #686865;
  font-family: 'Open Sans', 'Helvetica Neue', sans-serif, fixed-width;
  font-size: 10px;
  line-height: 1.25em;
  margin-left: 1em;
  text-indent: -1.25em;
  width: 90%;
}

#button-photo{
  width: 60px !important;
  height: 60px !important;
  background: url(./img/icon-photo.svg) no-repeat center center !important;
  border-radius: 100% !important;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  margin: 16px;
  display: none;
  position: relative;
}

#button-photo:after{
  content: 'Screenshot';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -24px;
  width: 100%;
  display: inline-block;
  font-size: 12px
}

#button-leave{
  width: 60px !important;
  height: 60px !important;
  background: url(./img/icon-end-call.svg) no-repeat center center !important;
  border-radius: 100% !important;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  margin: 16px;
  position: relative;
}

#button-leave:after{
  content: 'End Call';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -24px;
  width: 100%;
  display: inline-block;
  font-size: 12px
}

#button-join{
  width: 120px !important;
  height: 40px !important;
  background: url(./img/icon-join.svg) no-repeat center center;
  border-radius: 50px !important;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  margin: 16px;
  margin-bottom: 12vh;
}

#button-preview{
  width: 60px !important;
  height: 60px !important;
  background: url(./img/icon-self.svg) no-repeat center center !important;
  border-radius: 100% !important;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  margin: 16px;
}

#button-mute-off{
  width: 60px !important;
  height: 60px !important;
  background: url(./img/icon-mute-off.svg) no-repeat center center !important;
  border-radius: 100% !important;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  margin: 16px;
  display: none;
  position: relative;

}

#button-mute-off:after{
  content: 'Mute';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -24px;
  width: 100%;
  display: inline-block;
  font-size: 12px;
}

#button-mute-on{
  width: 60px !important;
  height: 60px !important;
  background: url(./img/icon-mute-on.svg) no-repeat center center !important;
  border-radius: 100% !important;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  margin: 16px;
  display: none;
  position: relative;

}

#button-mute-on:after{
  content: 'Unmute';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -24px;
  width: 100%;
  display: inline-block;
  font-size: 12px;
}

.buttons{
  position: fixed;
  bottom: 24px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.u-middle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.waiting{
  text-align: center;
}
.tc-black-50{
  color: #535D69;
}

.tc-green{
  color: #52c72b;
}

/*Modal*/

.modal {
  position: absolute;
  background: #ffffff;
  -webkit-box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  z-index: 12; }
  .modal--sm {
    width: 18.75rem;
    height: auto; }
    .modal--sm > input, .modal--sm select, .modal--sm textarea {
      width: 100%; }
  .modal--lg {
    width: 31.25rem;
    min-height: 12.5rem; }
  .modal--xlg {
    max-width: 43.75rem;
    min-height: 25rem; }
  .modal__title {
    padding: 1rem;
    font-weight: 600;
    color: #303F4E; }
    .modal__title:after {
      content: '';
      display: table;
      clear: both; }
  .modal__content {
    height: calc(100vh - 200px);
    padding: 1rem;
    max-height: 650px;
    overflow-y: auto;
    display: block; }
    .modal__content-full {
      max-height: 60%; }
  .modal__action {
    padding: 1rem; }
    .modal__action:after {
      content: '';
      display: table;
      clear: both; }
      
/* Button */

.btn:link, .btn:visited {
  text-decoration: none;
  padding: 0.3125rem 2.5rem;
  border-radius: 10rem;
  display: inline-block;
  position: relative;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: 0.2s -webkit-box-shadow ease-out, 0.2s -webkit-transform ease-out;
  transition: 0.2s -webkit-box-shadow ease-out, 0.2s -webkit-transform ease-out;
  -o-transition: 0.2s box-shadow ease-out, 0.2s transform ease-out;
  transition: 0.2s box-shadow ease-out, 0.2s transform ease-out;
  transition: 0.2s box-shadow ease-out, 0.2s transform ease-out, 0.2s -webkit-box-shadow ease-out, 0.2s -webkit-transform ease-out;
  font-size: 1rem;
  text-align: center; }

.btn:hover {
  -webkit-transform: translateY(-0.2rem);
  -ms-transform: translateY(-0.2rem);
  transform: translateY(-0.2rem);
  -webkit-box-shadow: 0rem 0.375rem 0.375rem rgba(0, 0, 0, 0.11);
  box-shadow: 0rem 0.375rem 0.375rem rgba(0, 0, 0, 0.11); }
  
  .btn--error {
  background-color: #e74e3b;
  color: #ffffff; }

.btn--primary {
  background-color: #3b97d3;
  color: #ffffff; }
  
.fr {
  float: right;
}

.fl {
  float: left;
}

#log {
  display: none;
}



#exitFullscreen, #fullscreen {
  position: absolute;
  right: 16px;
  bottom: 32px;
  height: 40px;
  width: 40px;
  display: inline-block;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  border-radius: 100%;
  z-index: 9999;
}

#exitFullscreen {
  display: none;
  background: url(./img/icon-exit-fullscreen.svg) no-repeat center center !important;
}

#fullscreen {
  background: url(./img/icon-fullscreen.svg) no-repeat center center !important;
}