/*
body {
  height: 100vh;
  width: 100vw;
  overflow-x: hidden;
}
*/

.chat md-toolbar {
  background:white;
  height: 3em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
/*  position: fixed;*/
  /* justify-content: flex-start; */
  /*  align-items: center;*/
}

.chat md-toolbar .row .col-md-2 {
/*  display: flex;*/
/*  justify-content: center;*/
/*  align-items: center;*/
}

.chat md-toolbar img {
  display: block;
  width: 6em;
  /*  padding: 25px;*/
  margin: 5px;
}

.chat md-toolbar h1 {
  color: #1A3667;
  font-size: 30px;
  /*  padding-top: 30px;*/
}



.chat #content.chat,
.chat section.view-container.animate-fade-up,
.chat div.chat.controller {
  height: 100%
}

.md-scroll-mask {
    position: static;
    
    
}

.chat div.chat.controller {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  overflow: hidden;
}

.square {
  height: 300px;
/*  width: 500px;*/
  background-color: darkturquoise;
}

.square2 {
  background-color: palevioletred;
  height: 300px;
}

.chat .containerAllChat {
 


}

.chat .containerAllChatClose {
 
visibility: collapse;

}


.chat md-content.textMsg {

  height: 22em; 
  margin-bottom: 50px;
  background-color: #FFFFFF;

}

.chat .chatContent {
/*  margin-bottom: 0.5em;*/
  margin-bottom: 0;
  background-color: #FFFFFF;
/*  padding-left: 0.5em;*/
}

.chat .chatContent .textArea {
  /*box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);*/
}

.chat .chatContent .panel.panel-default {
  margin-bottom: 20px;

}

.chat form.write {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
   position: absolute;
    bottom:2px;
left:2px;
    right:2px;


}

.chat form.write input {
  width: 82%;
}

.chat .endConsultation {
/*  height: 12em;*/
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}



/*ESTILOS DEL TEXTO DEL CHAT*/
.chat .mine,
.chat .theirs,
{
  margin-right: 20px;
  margin-left: 20px;
  font-size: 1.1em;
}

.chat .mine span,
.chat .theirs span,
.chat .guest span,
.chat .doctor span,
.chat .patient span {
  padding: 2px 20px;
  border-radius: 10px;
}

.first {
  background-color: rgba(255, 255, 255, 0.8);
}

.second {
  background-color: rgba(0, 188, 212, 0.4);
}

.third {
  background-color: rgba(139, 195, 74, 0.4);
}


.btn-success {
  margin-left: 10px;
    margin-right: 10px;
     color: #fff !important; 
     background-color: #1E91D6 !important; 
     border-color: #1E91D6 !important;

}

.btn-success:hover {
    color: #fff  !important; 
    background-color: #1E91D6 !important;
    border-color: #1E91D6  !important;
}


.textChatNew {
     color: #fff !important; 
     background-color: #1E91D6 !important; 
     border-color: #1E91D6 !important;
}



md-content.side {
  overflow-y: hidden;
  padding-right: 2.5em;
}

/*ESTILOS DEL VIDEO*/

.watermark{
  margin: 0;
  top: 0;
  right: 0;
  margin-top: 4em;
  margin-right: 4em;
  position: absolute;
  width: 15em !important;
  height: 15em !important;
  z-index: 12;
}

.watermark img{
  opacity: 0.7;
}

.chat div.videochatContent {
  height: 150vh;
  background-color: #FAFAFA;
}


.chat div.videoContent.row {
/*  height: 53vh;*/
  height: 85vh;
}

#cameraA,
#cameraB {
  height: 100%;
}

#cameraA {
  overflow-y: hidden;
}

#cameraA > div {
  height: 100%;
}

#subscribers {
  width: 100%;
  height: 100%;
  text-align: center;
}

#subscribers > div {
  width: 100%;
  height: 100%;
}


#subscribers .OT_root.OT_subscriber.OT_fit-mode-cover {
  width: 100% !important;
  height: 100% !important;
  box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
}


#publisher .OT_mirrored.OT_root.OT_publisher.OT_fit-mode-cover, /*.patient*/
#guest .guest.OT_root.OT_subscriber.OT_fit-mode-cover  {
  /*  width: 20vw !important;*/
  /*  height: 20vh !important;*/
  overflow: hidden;
  margin: 0;
  box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
  height: 10em !important;
  width: 14em !important;
  position: absolute;
  z-index: 10;
  /*top: 2em;
  margin-left: 1em;*/
  border-radius: 10px;
  bottom: 40px;
  right: unset;
  left:20px;
  }

/*
#publisher,
#guest {
  height: 10em !important;
  width: 10em;
  background-color: rebeccapurple;
  position: absolute;
  z-index: 1;
  bottom: 2em;
  left: 2.5em;
}
*/

#publisher {  
  /*left: 2.5em;*/
}

#guest .guest.OT_root.OT_subscriber.OT_fit-mode-cover {
  margin-top: 12em;
}


 .chat .hiddenOnPhone {
 
}

 .chat .hiddenOnPc {
    display: none; 
}

.patient-time {
  vertical-align:middle; 
  margin-left:10px; 
  margin-bottom:5px
}

input {
  padding-left: 5px;
  padding-right: 5px;
  border-top-style: hidden;
  border-right-style: hidden;
  border-left-style: hidden;
  border-bottom-style: hidden;
  
}

.no-outline:focus {
  outline: none;
}

.chat .msgNoAudioMobile {
  text-align: center;

  visibility: collapse;

    position: absolute;
  
  left: 50%;  
  -webkit-transform: translate(-50%, -60px);  
  transform: translate(-50%, -60px); 

font-size: 20px;
  font-weight: bold;
  color: #545454;

 opacity: 0.4;

   background: #FFFFFF;
 
    padding: 1rem 1rem; 

   
    margin-bottom: 10px;

    width: 150px;
   
    border-radius: 10px;
   
     text-transform: none;

     


    
}



.chat .msgNoAudio {

  text-align: center;

  visibility: visible;

    position: absolute;
  
  left: 50%;  
  -webkit-transform: translate(-50%, -60px);  
  transform: translate(-50%, -60px); 

font-size: 20px;
  font-weight: bold;
  color: #545454;

  opacity: 0.4;

   background: #FFFFFF;
 
    padding: 1rem 1rem; 

   
    margin-bottom: 10px;

    width: 150px;
   
    border-radius: 10px;
   
     text-transform: none;

     


    
}

.chat .extenderbtn {
    background-color: #1E91D6;
    padding: 1rem 2rem;    
    color: #FFFFFF;
    font-size: 2rem;
    margin-top: 20px;
    border-radius: 10px;
    position: absolute;
     right:20px;
     top: 60px;
     text-transform: none;
}


.chat .finalizarbtn {
    background-color: #1E91D6;
    padding: 1rem 2rem;    
    color: #FFFFFF;
    font-size: 2rem;
    margin-top: 20px;
    border-radius: 10px;
    position: absolute;
     left:20px;
     text-transform: none;
}

.chat .backgroundCall {
    background-color: #545454;
    height: 100%;
position: absolute;
    
   width:100%;
   
   
    
}


.chat .frontVideo {
   width:100%;
   height:100%;
   display: block;
  position: absolute;
  z-index: 3;  
  
     
    
}

.chat .myVideo {
    
     height: 100%;
    position: relative;
    z-index: 2;
    top:-100%; 
    left:0px; 
   
}

.chat .suscriberVideo {
  height: 100%;
    position: relative;
    z-index: 1;
    top:0px; 
    left:0px;
    
    
}


/*.chat .md-scroll-mask {
     position: relative; 
    background-color: transparent;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
}*/

.chat .arrowChat {

transform: rotate(180deg);
 vertical-align:baseline; 
 margin-top:15px;   
}

.chat .arrowChatClosed {

transform: rotate(360deg);
 vertical-align:baseline; 
 margin-top:15px;   
}

.chat .bottomSheetChat {

background-color: #FFFFFF;
margin-left: 74%;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
width: 25%;
padding: 0px;
bottom: 80px;
overflow: hidden;
min-height: 460px;   
}

.chat .bottomSheetChatClose {

  
margin-left: 74%;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
width: 25%;
padding: 0px;
bottom: 80px;
overflow: hidden;
height: 40px; 
   
}

.patientDataMargin {
  margin-left:10px;
}

.chat .containerButtons {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom:40px;   
}

.chat .controlButtons {
  margin-top: 3px;  
  width: 25px;
  height: 25px;  
}

.chat .opentokControlButton {
  margin-left: 8px;
  margin-right: 8px;
padding-top: 5px;
 text-align: center;
 width: 40px;
 height: 40px;
 border-radius: 10px;
 background: #FFFFFF;
 opacity: 0.6;



   
}

.chat .opentokControlButtonBlue {
  
 margin-left: 8px;
 margin-right: 8px;
 padding-top: 5px;
 text-align: center;
 width: 40px;
 height: 40px;
 border-radius: 10px;
 background: #1E91D6; 
 
 display: inline-block;
   
}


.chat .opentokControlButton {

 margin-left: 8px;
 margin-right: 8px;
 padding-top: 5px;
 text-align: center;
 width: 40px;
 height: 40px;
 border-radius: 10px;
 background: #FFFFFF;
 opacity: 0.6;
 display: inline-block;
   
}


.chat .opentokSendButton {
 
 text-align: center;
 width: 35px;
 height: 35px;
 border-radius: 10px;
 background: #1E91D6;

   
}



.chat .soundOnly {
  font-size: 20px;
  font-weight: bold;
  color: #FFFFFF;

 opacity: 0.6;
  
}

.chat .msgImage {
 
 
  margin-top: 3px;


   
}

.chat .dotRed {
 background-color: #EA2D2D;
    border-radius: 50%;
    width: 5px;
    height: 5px;
    position: absolute;
   
    margin-left: 29px;
    z-index: 1000;
   
}

.chat .dotCapitalLEtter {
  background-color: #1ED6B5;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  padding: 10px;
  text-align: center;
  font-size: 55px;
  font-weight: bold;
  color: #FFFFFF;
 
     
   
}

.chat .centerDiv {

  position: absolute;
  top: 50%;
  left: 50%;  
  -webkit-transform: translate(-50%, -50%);  
  transform: translate(-50%, -50%);     
   
}


.chat .patientData {
    background-color: #FFFFFF;
    padding: 1rem 2rem;    
    color: #1E91D6;
    font-size: 2rem;
    margin-top: 20px;
    border-radius: 10px;
    position: absolute;
    right:20px;
   
   white-space: nowrap;
  overflow: hidden;
  /* "overflow" value must be different from "visible" */

}

.chat .patientData .title {
    font-weight: bold;
}

.chat .patientData .divider {
    margin: 0 1rem;
    display: inline;
}

/*
#guest {
  color: darkturquoise !important;
  left: 15em;
}

*/

@media (max-width: 800px) {
/*
  .chat #timer {
    font-size: 1.6rem;
  }

  #chatHeader {
    font-size: 1em;
  }

  .chat div.chat.controller {
    overflow-y: auto;
  }*/

.chat .hiddenOnPhone {
    display: none; 
}

 .chat .hiddenOnPc {
     display: inline-block; 
}

.chat .bottomSheetChat {

  visibility: visible;

  background-color: #FFFFFF;

 border-top-left-radius: 50px;
border-top-right-radius: 0px;


margin-left: 0%;
height: 98% ;
 width: 100%;
   
}


.chat .bottomSheetChatClose {

  visibility: collapse;

 background-color: #FFFFFF;

 border-top-left-radius: 50px;
border-top-right-radius: 0px;


margin-left: 0%;
height: 98% ;
 width: 100%;
}



.chat .containerAllChat {

  height: 80%;  


}

.chat .containerAllChatClose {
 
visibility: collapse;

}


.chat md-content.textMsg {

  height: 85%; 
 
  background-color: #FFFFFF;

}

.chat form.write {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
   position: absolute;
    bottom:10px;
left:2px;
    right:2px;


}



#publisher .OT_mirrored.OT_root.OT_publisher.OT_fit-mode-cover, /*.patient*/
#guest .guest.OT_root.OT_subscriber.OT_fit-mode-cover  {

overflow: hidden;

margin: 0;

box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);

height: 7em !important;

width: 10em !important;

position: absolute;

z-index: 10;

border-radius: 10px;

bottom: 90px;

right: 20px;

left: unset;
}

.chat .msgNoAudioMobile {
  text-align: center;

  visibility: visible;

    position: absolute;
  
  left: 50%;  
  -webkit-transform: translate(-50%, -60px);  
  transform: translate(-50%, -60px); 

font-size: 20px;
  font-weight: bold;
  color: #545454;

 opacity: 0.4;

   background: #FFFFFF;
 
    padding: 1rem 1rem; 

   
    margin-bottom: 10px;

    width: 150px;
   
    border-radius: 10px;
   
     text-transform: none;

     


    
}


.chat .msgNoAudio {

text-align: center;
  visibility: collapse;

    position: absolute;
  
  left: 50%;  
  -webkit-transform: translate(-50%, -60px);  
  transform: translate(-50%, -60px); 

font-size: 20px;
  font-weight: bold;
  color: #545454;

 opacity: 0.4;

   background: #FFFFFF;
 
    padding: 1rem 1rem; 

   
    margin-bottom: 10px;

    width: 150px;
   
    border-radius: 10px;
   
     text-transform: none;

     


    
}

  




}