html, body, #content {
  background: #111317;
  height: 100%; }

#mainContent {
  height: 100%; }

.mainImg {
  display: block;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  margin: 0 auto; }

.fake-link {
  color: #0074D9; }
  .fake-link:hover {
    text-decoration: underline;
    cursor: pointer; }

.video-logger {
  width: 80%;
  margin: 0 auto; }

.container-fluid {
  height: 100%;
  padding: 15px; }
  .container-fluid .row {
    height: 100%; }

.iconic * {
  fill: white;
  stroke: white; }

#conference-number-options {
  list-style: none;
  margin-left: -28px; }
  #conference-number-options li :before {
    content: ''; }

.chat-container {
  display: none; }

#status-icons {
  position: absolute;
  width: 275px;
  right: 15px;
  bottom: 10px;
  text-align: right; }
  #status-icons .controls.conference-tools {
    display: none; }
  #status-icons .iconic * {
    cursor: pointer;
    fill: #EBEBEB;
    stroke: #EBEBEB;
    margin-right: 10px; }
  #status-icons .connected * {
    fill: green;
    stroke: green; }
  #status-icons .disconnected * {
    fill: red;
    stroke: red; }
  #status-icons .controls {
    display: inline-block;
    margin-left: 8px; }
  #status-icons .chat {
    display: none; }
  #status-icons #directMessageBtn {
    position: relative;
    width: 37px;
    height: 32px; }
    #status-icons #directMessageBtn svg:first-of-type {
      position: absolute;
      width: 20px;
      height: 20px;
      top: 2px;
      left: 0; }
    #status-icons #directMessageBtn svg:last-of-type {
      position: absolute;
      bottom: 0;
      right: 0; }
  #status-icons .voip.connected * {
    fill: #7fb344 !important;
    stroke: green !important; }
  #status-icons .voip.disconnected * {
    fill: #f9c4c4 !important;
    stroke: red !important; }
  #status-icons #chatIcon {
    position: relative; }
    #status-icons #chatIcon.shake {
      animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
      transform: translate3d(0, 0, 0);
      backface-visibility: hidden;
      perspective: 1000px; }
      #status-icons #chatIcon.shake #newMessageCounter {
        display: none; }
    #status-icons #chatIcon #newMessageCounter {
      position: absolute;
      left: -7px;
      top: -7px;
      background: #e44040;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
      color: white;
      border-radius: 50%;
      text-align: center;
      width: 15px;
      height: 15px;
      z-index: 1;
      font-size: 10px;
      display: none; }

.error {
  color: red;
  margin-right: 10px;
  display: none; }

.start-msg {
  color: white;
  max-width: 50%;
  margin: 20vw auto;
  display: none; }

.dm-chat-box a, #chatBox a {
  color: #46c723; }

.chat-container h4 {
  color: white; }

.chat-container #chatBox {
  height: 200px;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow-x: scroll;
  background: rgba(12, 14, 16, 0.82);
  border: 1px solid #222;
  color: #fff;
  margin-bottom: 5px; }

.dm-chat-box {
  width: 200px;
  height: 100px;
  margin-bottom: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow-x: scroll;
  background: white;
  font-size: 13px; }

#directMessageContainer {
  display: none; }

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0); }
  20%, 80% {
    transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0); }
  40%, 60% {
    transform: translate3d(4px, 0, 0); } }

.flex-container {
  display: flex;
  align-items: flex-end;
  height: 100%; }

#top {
  position: absolute;
  top: 0;
  bottom: 50px;
  width: 100%; }

#bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px; }
  #bottom .popover {
    background: rgba(12, 14, 16, 0.82);
    border: 1px solid #222; }
    #bottom .popover .popover-title {
      background: rgba(12, 14, 16, 0.82);
      color: #c7c7c7;
      text-shadow: 1px 1px #000;
      border-color: #222; }
    #bottom .popover .dm-chat-box {
      padding: 5px 10px;
      background: rgba(12, 14, 16, 0.82);
      color: #c7c7c7;
      text-shadow: 1px 1px #000;
      border-color: #222; }

#webcast-chat {
  display: none;
  position: relative;
  width: 100%;
  max-width: 232px;
  margin-left: 15px;
  margin-bottom: 15px;
  border-radius: 5px;
  background: rgba(12, 14, 16, 0.82);
  border: 1px solid #222; }
  #webcast-chat #webcast-chat-title {
    margin: 0;
    padding: 8px 14px;
    font-weight: bold;
    font-size: 14px;
    color: #c7c7c7;
    border-bottom: 1px solid #222;
    border-radius: 5px 5px 0 0;
    background: rgba(12, 14, 16, 0.82); }
  #webcast-chat #webcast-pad {
    padding: 9px 14px; }
  #webcast-chat #chatBox {
    overflow-y: auto;
    width: 100%;
    height: 128px;
    margin-bottom: 5px;
    padding: 10px;
    background: rgba(12, 14, 16, 0.82);
    color: #c7c7c7;
    font-size: 13px;
    border-radius: 3px;
    border: 1px solid #222; }

.popover .arrow {
  display: none !important; }