@font-face {
    font-family: "Roboto";
    src: url("./fonts/Roboto-Light.ttf") format('truetype');
    font-style: normal;
}

.dx-viewport{
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body,html{
  margin: 0;
  padding: 0;
  font-family: 'Roboto','Segoe UI', 'Helvetica Neue', Helvetica, 'Trebuchet MS', Verdana;
  height: 100%;
  width: 100%;
  position: relative;
  /*min-width: 1024px;*/
  min-height: 500px;
  overflow: hidden;
  overscroll-behavior: contain;
}

.bgMovil{
  background-image: url(./assets/backgroundmovil.png);
  background-size: cover;
  background-position: center;
}
.bgWeb{
  background-image: url(./assets/background.png);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
}
.FlexContainer-Column-Center{
  display: inline-flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  border: solid red 0px;
}
.FlexContainer-Row{
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  border: solid blue 0px;
  position: relative;
}
.FlexContainer-Column{
  display: inline-flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  border: solid red 0px;
}

.container-shadow-mdi{
  -webkit-box-shadow:inset 0px 0px 3px 0px rgba(0,0,0,0.5), 0 2px 3px rgba(34, 25, 25, 0.5);
  -moz-box-shadow:inset 0px 0px 3px 0px rgba(0,0,0,0.5), 0 2px 3px rgba(34, 25, 25, 0.5);
  box-shadow:inset 0px 0px 3px 0px rgba(0,0,0,0.5), 0 2px 3px rgba(34, 25, 25, 0.5);
  background: #ffffff;
  margin: 3px;
  border: solid #ffffff 1px; 
  border-radius: 5px;
  overflow: hidden;
}

.container-shadow-mdi-noover{
  -webkit-box-shadow:inset 0px 0px 3px 0px rgba(0,0,0,0.5), 0 2px 3px rgba(34, 25, 25, 0.5);
  -moz-box-shadow:inset 0px 0px 3px 0px rgba(0,0,0,0.5), 0 2px 3px rgba(34, 25, 25, 0.5);
  box-shadow:inset 0px 0px 3px 0px rgba(0,0,0,0.5), 0 2px 3px rgba(34, 25, 25, 0.5);
  background: #000000;
  margin: 3px;
  border: solid #ffffff 1px; 
  border-radius: 15px;
}

.heading{
    border: 0px red solid;
    border-radius: 0px;
    margin: 0;
    height: 40px;
    position: relative;
    color: #ececec;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#009fe1+0,004cd4+100 */
    background: #009fe1; /* Old browsers */
    background: -moz-linear-gradient(left,  #009fe1 0%, #004cd4 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #009fe1 0%,#004cd4 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #009fe1 0%,#004cd4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009fe1', endColorstr='#004cd4',GradientType=1 ); /* IE6-9 */

}
.heading h2 {
  color: #fff;
  font-size: 12px;
  line-height: 24px;
}
.heading .Logo_Top_Left{
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 40px;
  margin-left: 5px; 
  margin-top: 2px;
  flex-grow: 1;
  display: flex;
  border-radius: 2px;
  position: relative;
}

.heading .header-mdi-text{
  color: #ececec;
  line-height: 30px;
  height: 30px;
  font-size: 10px;
  flex-grow: 1;
  display: flex;
  flex-direction: row;  
}
.heading .header-mdi-text-inner{
  flex-grow: 1;
  text-align: center;
}

#InitView{
  position: absolute; margin: auto; width: 95%;  height: 310px; bottom: 0; top: 40px; left: 0; right: 0;
  border-radius: 9px;
}

.DivHeadTopBG{
  background-position: center;
  background-size:contain;
  background-repeat: no-repeat;
  position: absolute; 
  width: 95%; 
  height: 22vh; 
  margin: auto; 
  left: 0; 
  right: 0; 
  top:33px;
  -webkit-box-shadow:inset 0px 0px 3px 0px rgba(0,0,0,0.5), 0 2px 3px rgba(34, 25, 25, 0.5);
  -moz-box-shadow:inset 0px 0px 3px 0px rgba(0,0,0,0.5), 0 2px 3px rgba(34, 25, 25, 0.5);
  box-shadow:inset 0px 0px 3px 0px rgba(0,0,0,0.5), 0 2px 3px rgba(34, 25, 25, 0.5);
  border: solid #ffffff 1px; 
  border-radius: 5px;
  overflow: hidden;
}
.DivHeadBottomBG{
  background-position: center;
  background-size:cover;
  background-repeat: no-repeat;
  position: absolute; 
  width: 100%; 
  height: 110px; 
  margin: auto; 
  left: 0; 
  right: 0; 
  bottom: -120px;
  /*-webkit-box-shadow:inset 0px 0px 3px 0px rgba(0,0,0,0.5), 0 2px 3px rgba(34, 25, 25, 0.5);
  -moz-box-shadow:inset 0px 0px 3px 0px rgba(0,0,0,0.5), 0 2px 3px rgba(34, 25, 25, 0.5);
  box-shadow:inset 0px 0px 3px 0px rgba(0,0,0,0.5), 0 2px 3px rgba(34, 25, 25, 0.5);
  border: solid #ffffff 1px; */
  border-radius: 15px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.btn-content{
  display: flex; 
  flex-direction: row; 
  text-align: center;
  align-items: center;
  justify-content: center;
}

.btn-content-fila{
  display: flex; 
  flex-direction: column; 
  text-align: center;
  align-items: center;
  justify-content: center;
}

.NiceShadowDem0{
  margin:5px;
  -webkit-box-shadow:inset 0px 0px 3px 0px rgba(0,0,0,0.5), 0 2px 3px rgba(34, 25, 25, 0.5);
  -moz-box-shadow:inset 0px 0px 3px 0px rgba(0,0,0,0.5), 0 2px 3px rgba(34, 25, 25, 0.5);
  box-shadow:inset 0px 0px 3px 0px rgba(0,0,0,0.5), 0 2px 3px rgba(34, 25, 25, 0.5);
  border: solid #ffffff 1px; 
  border-radius: 5px;
  overflow: hidden;
}

.NiceShadowDem0-att{
  margin:5px;
  /*-webkit-box-shadow:inset 0px 0px 3px 0px rgba(0,0,0,0.5), 0 2px 3px rgba(34, 25, 25, 0.5);
  -moz-box-shadow:inset 0px 0px 3px 0px rgba(0,0,0,0.5), 0 2px 3px rgba(34, 25, 25, 0.5);
  box-shadow:inset 0px 0px 3px 0px rgba(0,0,0,0.5), 0 2px 3px rgba(34, 25, 25, 0.5);
  border: solid #ffffff 1px; */
  border-radius: 5px;
  overflow: hidden;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#009fe1+0,004cd4+100 */
  background: #009fe1; /* Old browsers */
  background: -moz-linear-gradient(left,  #009fe1 0%, #004cd4 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #009fe1 0%,#004cd4 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #009fe1 0%,#004cd4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009fe1', endColorstr='#004cd4',GradientType=1 ); /* IE6-9 */
}

.NiceShadowDem1{
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}


.Nombre__Video__Mini{
  background-color: hsla(0, 0%, 0%, 0.5); position: absolute; width: 100%; text-align: center; color: #ffffff; bottom: 0px; z-index: 100; left: 0; padding: 3px; font-size: 8px; max-height: 15px; overflow: hidden;
  text-align: center;
}


.display {
  width: 100%;
  height: 100%;
  display: inline-block;
}

video, object {
  width: 100%;
  height: 100%;
}

.fp-localVideo {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.fp-localVideo>video {
  width: 100%;
  height: 100%;
}

.Usu__Conn__VContainer{
  height: 100%; width: 100%; margin: 0px; float: left; position: relative; border: #ff0000 solid 0px; border-radius: 15px;
}

.Video__Container__InitView{
  height: 140px; position: relative; max-height: 140px; overflow: hidden;  border-radius: 12px;
}

.Video__Container{
  height: 250px; position: relative; max-height: 250px; overflow: hidden;  
}

.Tab__H__Botom{
  flex-grow: 1;
}

.divIconsBtns{
  width: 18px; 
  height: 18px; 
  border: solid red 0px; 
  background-position: center; 
  background-size: contain; 
  background-repeat: no-repeat;
}

.btnatt {  
  background-color: 00A0DE;  
}  


.headingTVideo{
  border: 0px red solid;
  border-radius: 0px;
  background: #00a432;
  margin: 0;
  height: 18px;
  position: relative;
  font-size: 13px;
  color: #ececec;
}

.headingTVideo .div__img{
  width: 14px; 
  height: 14px; 
  float: left; 
  margin-top: 2px; 
  margin-left: 5px; 
  margin-right: 5px;
  border-radius: 2px;
  position: relative;
}

.headingTVideo .div__img img{
  width: 14px;
  height: 14px;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#leaveRoom {  
  color: #ffffff;  
  background-color: #ff006d;
} 

#file-uploader .dx-fileuploader-button.dx-widget {  
  box-shadow: none !important;  
  border: none;  
  background-color: transparent;
  color: #009fe1;
}  

.btnBlueAt{
  color: #ffffff;  
  background-color: #00A0DE;
}

.canvas-wrapper{
  margin-bottom: 16px;
}

canvas{
  margin: 0 auto;
  display: block;
}

.HeaderNewAge{
  border: solid red 0px; width: 230px; height: 300px; top: -160px;position: absolute; right: -45px; background-image: url(./assets/Att_VideoServicio_Cambianauta_Pose_01.png); background-position: center; background-size: contain; background-repeat: no-repeat;
}

.HeaderNewAge .GloboText{
  width: 150px; height: 40px; background-color: #FFFFFF; color: #00A0DE; text-align: center; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 12px;
  position: absolute;
  left: -140px;
  top: 90px;
  border-radius: 9px 0px 9px 9px; 
  z-index: 1000;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.GloboText:after {
	content: '';
	position: absolute;
	right: 0;
	top: 0%;
	width: 0;
	height: 0;
	border: 34px solid transparent;
	border-left-color: #ffffff;
	border-right: 0;
	border-top: 0;
	margin-bottom: -17px;
	margin-right: -9px;
  z-index: 999;
}

.GloboText div{
  z-index: 2000; line-height: 12px;
}

.AsisVirt{
  position: absolute; width: 180px; height: 50px;  border: solid red 0px; display: flex; justify-content: center; align-items: center;color: #FFFFFF;
  left: -155px;
  top: 35px;
  font-size: 14px;
}

#ContainerBtns2{
  background-color: #1e1e1e;
}

#sendMessageBtn{
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#009fe1+0,004cd4+100 */
   background: #009fe1; /* Old browsers */
   background: -moz-linear-gradient(left,  #009fe1 0%, #004cd4 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(left,  #009fe1 0%,#004cd4 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to right,  #009fe1 0%,#004cd4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009fe1', endColorstr='#004cd4',GradientType=1 ); /* IE6-9 */
}

.AsisVirt-fin{
  position: absolute; width: 300px; height: 50px;  border: solid red 0px; display: flex; justify-content: center; align-items: center;color: #FFFFFF; flex-direction: column;
  left: 0;
  right: 0;
  margin: auto;
  top: -90px;
  font-size: 18px;
  line-height: normal;
}

.dx-popup-title {  
  color: #FFFFFF!important;  
  background-color: #009fe1!important;
}  
.dx-icon-close{
  color: #FFFFFF!important;  
}