*{
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: auto;
}

html{
font-family: SF-UIDisplay, Roboto, sans-serif;
-webkit-text-size-adjust: 100%;
}

body{
  margin: 0;
  overflow-x: hidden;
  font-size: 16px;
  display: flex;
  flex-direction: column;
}


body, html {
    /* background-color: gray; */
    height: 100vh;
    font-size: 16px;
}

.message-holder{
  position: absolute;
    bottom: calc(100px + 2em);
    right: 1em;
    text-align: right;
    z-index: 700;
    width: 250px;
}

.message{
  background-color: #fffffff0;
    padding: .4em;
    border-radius: .75em;
    padding-right: .74em;
    padding-left: .75em;
    margin-top: 6px;
    text-align: left;
    display: inline-block;
    mix-blend-mode: screen;
}

.message.message-incoming{
  border-bottom-right-radius: 2px;
}

.data-header{
  background-color: white;
  padding: .5em;
border-bottom: 1px solid #efefef;

}

.search{
  display: inline-block;
  padding: .5em;
  padding-left: .75em;
  padding-right: .75em;
  font-size: .9em;
  padding-top: .4em;
  border-radius: 1.6em;
  border: 1px solid #ededed;
}

.search-button{
  display: inline-block;
  height: 2em;
  background-color: #20d130;
  color: white;
  padding: .5em;
  padding-left: 1em;
  position: relative;
  padding-right: 1em;
  border-radius: 1em;
  bottom: -3px;
  line-height: 1em;
  cursor: pointer;
}

li{
  margin-left: -1em;
  text-indent: 0;
  line-height: 1.5;
}

.search-button:hover{
  background-color: #18b626;
}

.input-text{
  padding: .5em;
      border-radius: 2px;
      border: 1px solid #e5e5e5;
      font-size: 1em;
      width: 100%;
}

.header{
  z-index: 1000;
  padding: .5em;
  padding-top: .65em;
  background-color: white;
  color: black;
  border-bottom: 2px solid #dfdfdf;
  font-weight: 400;
  font-size: 1.25em;
  font-family: "chalet","chalet-london-sixty", sans-serif;
}

.body-main{
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
}

.body-section{
flex-basis: 50%;
flex-grow: 1;
min-width: 500px;
}

.data-inner{
padding: 2em;
background-color: white;
font-size: 1em;
height: 100%;
overflow-y: scroll;
}

.share-section{
  position: absolute;
  top: 0em;
  right: .5em;
  padding: .5em;
  z-index: 800;
  border-radius: 3px;
  text-align: center;
}

.button-primary{
  padding: .5em;
  text-align: center;
  padding-left: .75em;
  padding-right: .75em;
  background-color: #082e4d;
    /* background-color: #20D130; */
  padding-top: .56em;
  color: white;
  position: relative;
  border: 0;
  margin-top: .25em;
  top: 3.25px;
  font-weight: 500;
  font-size: 1.0em;
  border-radius: 2px;
  display: inline-block;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
  cursor: pointer;
}

.button-primary:hover{
  /* background-color: #75D701; */
    background-color: #072339;
}

.hidden{
opacity: 0;
}

#share-uuid{
  padding: .53em;
      box-sizing: border-box;
      color: grey;
      border-radius: 2px;
      margin-right: .5em;
      font-family: monospace;
      background-color: white;
      box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
      transition: opacity .1s ease-in-out;
}

.data-inner h1,h2,h3,h4{
  margin-top: .25em;
  margin-bottom: .5em;
  font-weight: 200;

}

.data-inner p{
  line-height: 1.5em;
  padding-left: .25em;
}

#subscriber{
height: 100%;
position: relative;
background: url('../media/images/maze.png');
background-size: cover;
}

#videos {
    position: relative;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.OT_subscriber {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

#subscriber::after {
  content: "";
    position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(-27deg, #000000 9%, rgba(0,0,0,0.00) 65%);
mix-blend-mode: multiply;
opacity: .75;
z-index: 500;
}

.OT_publisher {
  background-color: rgb(0, 0, 0);
  width: 150px !important;
  height: 100px !important;
  overflow: hidden;
  right: 1em;
  bottom: 1em;
  border-radius: 3px;
  z-index: 100;
  position: absolute !important;
  z-index: 1000;
}

.mi{
  font-family: "Material Icons";
}

.modal-bg{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10000;
  background-color: #25333c3d;
opacity: 0;
pointer-events: none;
}

.modal-bg.active{
opacity: 1;
pointer-events: all;
}

.modal{
  margin: 0px auto;
  background-color: white;
  max-width: 350px;
  position: relative;
  border-radius: 2px;
    box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
 top: 50%;
 transform: translateY(-50%);
}

.modal-header{
  z-index: 1000;
  padding: .5em;
  padding-top: .65em;
  color: black;
  border-bottom: 1px solid #efefef;
  font-weight: 400;
  font-size: 1.25em;
  font-family: "chalet", "chalet-london-sixty", sans-serif;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.modal-body{
  padding: 1em;
}

.input-holder{
  display: flex;
  width: 100%;
  justify-content: center;
}

#no-data.hidden{
  display: none !important;
}

#data-location.hidden{
  display: none;
}


//-----Jenny------

.head-home{
  background-color: white !important;
  height: 136px;
  border-bottom: 2px solid #dfdfdf !important;
  padding: 1em !important;
}


.profpic{
width: 2.5em;
height: 2.5em;
margin-right: 10px;
margin-top: 10px;
position: relative;
top: 6px;
}

.prof-name{
    font-weight: bold;
    font-size: 1.5em;
}

.lang-name{
  font-size: 14pt;
      text-align: left;
      color: #7F7F7F;
      margin-top: -15px;
      margin-left: 1.85em;
}

.sidebar{
  background-color: white;
      float: right;
      padding-top: 1em;
      /* box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); */
      /* height: calc(100% - 125px); */
      margin-top: 1em;
      margin-right: 1em;
}

.heading-title{
  font-weight: bold;
  font-size: 12pt;
  color: #333333;
}

::placeholder{
  color: #B2B2B2;
  font-size: 12pt;
}

#start-button{
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #20d130;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
  color: white;
  padding: 10px;
  width: 20%;
  border-radius: 3px;
  font-weight: 600;
  text-align: center;
}

#myInput {
  width: 100%;
  color: #B2B2B2;
  font-size: 12pt;
  border-radius: 3px;
}

.input-group{
/* height: 500px; */
}

#myUL {
  list-style-type: none;
  padding: 1em;
  margin: 0;
  width: 100%;
  overflow-y: scroll;
  max-height: calc(100% - 125px);
}

.navbar-brand{
  font-family: "chalet","chalet-london-sixty", sans-serif;
  color: #20d130 !important;
}

#myUL li a {
  border-bottom: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  /* background-color: #f6f6f6; */
  padding: 12px;
  text-decoration: none;
  /* font-size: 18px; */
  color: black;
  display: block
}

#myUL li a:hover:not(.header) {
  background-color: #F1F9F2;
}

.interpreter-title{
  font-size: 20pt;
  font-weight: bold;
  padding-bottom: 20px;
  padding-top:20px;
}

.dot-on {
  height: 10px;
  width: 10px;
  background-color: #7ED321;
  border-radius: 50%;
  display: inline-block;
  margin-left: 10px;
}


.dot-off {
  height: 10px;
  width: 10px;
  /* background-color: none; */
  border: 1px solid #979797;
  border-radius: 50%;
  display: inline-block;
  margin-left: 10px;
}


.interpreter-pic{
width: 40px;
height: 40px;
margin-right: 10px;
margin-top: 10px;
}

.int-name{
    font-weight: bold;
    font-size: 1em;
}

.int-practice{
  font-size: 10pt;
  color: #7F7F7F;
  margin-left: 53px;
  margin-top: -15px;
  padding-top:0;
  font-weight: 500;
}

.hidden-display{
  display:none;
}

.card-body{
  margin: 50px;
}
.card{
  margin-bottom: 30px!important;
    box-shadow: 0px 4px 5px rgba(0, 0, 0, .05);
    border: none;
    /* font-family: 'Open Sans', sans-serif; */
}

.card-block{
  padding: 30px;
}

/* .card-columns .card{
  display:block;
} */

.card-columns{
  /* column-count:3; */
  orphans: 1;
  widows: 1;
}

.sm-title{
  font-size: 10pt;
  color: #878787;
  font-weight: 600;
}
.text{
  font-size: 14pt;
  font-weight: 600;
}

.patient-pic{
width: 60px;
height: 60px;
margin-top: 15px;
margin-left:-10px;
}

#faq-link{
  font-weight: bold;
  color:black;
  text-decoration: none;
}

#faq-link:hover{
  color:#20D130;
  text-decoration: none!important;
  border-bottom: none;
  text-decoration-color: white;
}

#launch{
  width:100%;
  height:100%;
  background-color: #f8f8f8;
}


.lang-drop{
  position: absolute;
  left: 1em;
  top: 1em;
  z-index: 1000;
}