/*a modififcar*/

@font-face {
  font-family: 'fontello';
  src: url('../fonts/fontello.eot?90213111');
  src: url('../fonts/fontello.eot?90213111#iefix') format('embedded-opentype'),
       url('../fonts/fontello.woff2?90213111') format('woff2'),
       url('../fonts/fontello.woff?90213111') format('woff'),
       url('../fonts/fontello.ttf?90213111') format('truetype'),
       url('../fonts/fontello.svg?90213111#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}


@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Regular.eot'),
        url('../fonts/OpenSans-Regular.otf') format('opentype'),
        url('../fonts/OpenSans-Regular.woff') format('woff'),
        url('../fonts/OpenSans-Regular.ttf') format('truetype'),
        url('../fonts/OpenSans-Regular.svg') format('svg');
    font-weight: normal; font-style: normal;
}

@font-face {
    font-family: 'MiloOt';
    src: url('../fonts/MiloOt.eot'),
        url('../fonts/MiloOt.otf') format('opentype'),
        url('../fonts/MiloOt.woff') format('woff'),
        url('../fonts/MiloOt.ttf') format('truetype'),
        url('../fonts/MiloOt.svg') format('svg');
    font-weight: normal; font-style: normal;
}



body {
  font: 22px 'Open Sans', Arial, sans-serif;
  line-height: normal;
  line-height: 1.4;
  font-size: 25px;
  position: relative;
  /* overflow: hidden; */
  user-select: none;
}

#app { opacity: 0;

	height:100vh; /*Cambio añadido: height:100vh;*/

 }

#resizeBody {
  position: absolute;
  min-width: 1906px;
  min-height: 925px;
  overflow: hidden;
  background-color: white;
}

.isInactive {
  pointer-events: none;
  opacity: .7;
}
.containerGen {
  width: auto;
  max-width: 1906px;
  height: auto;
  max-height: 953px;
  margin: 0 auto;
  position: relative;
}


/********** PAGE BOOK */
.pageBook_resetCont {
  position: relative;
  /* overflow: hidden; */
}
.pageBook {
  max-width: 1289.1px;
  /* width: 67.5%; */
  height: auto;
  position: relative;
  margin: 0 auto;
  z-index: 1;
}
.pageBook_container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.pageBook_one > img,
.pageBook_two > img {
  width: 100%;
  height: 100%; 
  position: absolute; 
}
.pageBook_one {
  width: 50%;
  height: 867.9px; /*  Original: 2540/3249 = (max-width: 1286px;/2) / Y ; donde Y es height a calcular   */
  position: relative;
}
.pageBook_two {
  width: 50%;
  height: 867.9px; /* Es el mismo valor que la línea 103*/
  position: relative;
}
.TeaBook {
    background-color: black;
    color: #fff;
    font-size: 24px;
    line-height: 30px;
    border-radius: 10px 10px 0 0;
    transform: rotate(-90deg);
    position: absolute;
    top: 58px;
    left: -50px;
    width: 70px;
    text-align: center;
    cursor: pointer;
    transition: 0.1s all ease-in;
}
.ClassBook {
    background-color: black;
    color: #fff;
    font-size: 24px;
    line-height: 30px;
    border-radius: 10px 10px 0 0;
    transform: rotate(-90deg);
    position: absolute;
    top: 138px;
    left: -50px;
    width: 70px;
    text-align: center;
    cursor: pointer;
    transition: 0.1s all ease-in;
    text-decoration: none;
}
.TeaBook:hover,
.ClassBook:hover {
  transform: rotate(-90deg);
  background-color: #3c3c3b;
}
.TeaBook.isDesactive{
  opacity: .5;
  pointer-events: none
}
.isDesactive{
    opacity: .5;
  pointer-events: none
}
.ClassBook.isDesactive{
  opacity: .5;
  pointer-events: none
}
.ClassBook.Nodesactive{
 opacity: 1;
  pointer-events: auto;
}


/*.ClassBook.Nodesactive{
  opacity: 1;
  pointer-events: auto;
}
*/

.contAllBtnActivity {
  position: absolute;
  /* min-width: 1906px;
  min-height: 925px; */
  width: 643px;
  height: 867.9px;     /* Es el mismo valor que la línea 103*/
  top: 0;
  left: 0;
  transform-origin: top left;
}
.contAddLinkTools {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
/********** FOOTER */
.genFooter {
  position: fixed; /* CAMBIO 25/03/20 relative por fixed */
  width: 100%;
  bottom: 0;
  z-index: 4;
}
.footer {
  user-select: none;
  background-color: #3c3c3b;
  width: 100%;
  height: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  position: relative;
}
.footer_logo {
  height: 80px;
  width: 194px;
  position: absolute;
  left: 1%;
  display: flex;
  align-items: center;
}
.footer_logo > img {
  max-width: 100%;
}
.footer_navPage {
  height: 80px;
  width: 1286px;
}
.footer_help {
  height: 80px;
  width: 61px;
  position: absolute;
  right: 1%;
  display: flex;
  align-items: center;
}
.footer_help .btn_Help {
  width: 61px;
  cursor: pointer;
  transition: 0.2s all ease;
  transform: scale(.8);
}
.footer_help .btn_Help:hover:before {
  content: attr(data-tool);
  text-align: center;
  font-size: 1.2em;
  position: absolute;
  top: -40px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #000;
  color: #fff;
  border-radius: 10px;
  padding: 4px 8px;
}
.footer_btn-close {
  cursor: pointer;
  background-color: #3c3c3b;
  background-repeat: no-repeat;
  background-image: url('../img/flechafooter.svg');
  background-size: 35px 35px;
  background-position: center;
  width: 103px;
  height: 41px;
  position: absolute;
  top: -40px;
  right: 0%;
  border-radius: 10px 10px 0 0;
  transition: all .2s ease-in;
}
.footer_btn-close:hover{
  background-color: #585858;
}
.footer_btn-close.isActive {
  background-image: url('../img/flechaFooter-Active.svg');
  position: fixed;
  bottom: 0;
  top: initial;
}
.navPage > ul {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.navPage > ul > li {
  width: 205px;
  height: 80px;
  border-left: 1px solid #fff;
  border-right: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.navPage ul li:first-child {
  border-left: none;
}
/* .navPage ul li .contBtnUnits:hover:before, */
.navPage ul li .btnOnePage:hover:before,
.navPage ul li .btnTwoPage:hover:before,
.navPage ul li .btnZoom:hover:before,
.navPage ul li .btnConfig:hover:before,
.navPage ul li .btnTools:hover:before {
  content: attr(data-tool);
  text-align: center;
  font-size: 1.2em;
  position: absolute;
  top: -60px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #000;
  color: #fff;
  border-radius: 10px;
  padding: 4px 8px;
}
/* 
.navPage ul li .btnNote:hover:before {
  content: attr(data-tool);
  text-align: center;
  font-size: 0.9em ;
  position: absolute;
  top: -30px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #000;
  color: #fff;
  border-radius: 10px;
  padding: 4px 8px;
} */

.navPage ul .sizeBoxPagination {
  width: 250px;
  user-select: none;
}
.contBtnUnits {
  cursor: pointer;
  width: 193px; /*OLD  width: 120px;*/
  transform: scale(.8);
}
.contBtnUnits .btnTitleUnits {
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: 1.6em;
  cursor: pointer;
}
.contBtnUnits .btnTitleUnits .UpFle {
  margin-left: 6px;
  position: relative;
  top: 4px;
  width: 14px;
  transform: rotate(180deg);
}
.contBtnUnits .imgUnits {
  background-image: url("../img/barra.png");
  width: 76px;
  height: 38px;
  transform: scale(.8);
 margin: 0 auto; 

}
.contViewPages {
  display: flex;
  align-items: center;
  justify-content: center;
}
.contViewPages .btnOnePage:hover:before,
.contViewPages .btnTwoPage:hover:before {
  width: 180px;
}
.contViewPages .btnOnePage {
  background-image: url("../img/single.png");
  cursor: pointer;
  width: 50px;
  height: 60px;
  position: absolute;
  transform: scale(.8);
}
.contViewPages .btnTwoPage {
  background-image: url("../img/double.png");
  cursor: pointer;
  width: 96px;
  height: 60px;
  position: absolute;
  transform: scale(.8);
}
.btnZoom {
  background-image: url("../img/lupa.png");
  cursor: pointer;
  width: 64px;
  height: 59px;
  position: absolute;
  transform: scale(.8);
  z-index: 1;
}
.contBtnPagination {
  display: flex;
  align-items: center;
  justify-content: center;
}
.contBtnPagination .btnPaginationLeft,
.contBtnPagination .btnPaginationRight {
  cursor: pointer;
  color: #fff;
  width: 30px;
  height: 30px;
  position: relative;
}
.contBtnPagination .btnPaginationLeft:hover:before,
.contBtnPagination .btnPaginationRight:hover:before {
  content: attr(data-tool);
  text-align: center;
  font-size: 1.2em;
  position: absolute;
  top: -50px;
  left: -30%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #000;
  color: #fff;
  border-radius: 10px;
  padding: 4px 8px;
  transform: scale(.8);
  z-index: 10
}
.contBtnPagination .inputPagination {
  height: 27px;
  border-radius: 5px;
  text-align: center;
  font-size: 20px; /*Cambio 24/03/2020*/
  line-height: 24px;
  width: 123px;
  outline: none;
  margin: 0 10px;
  text-align: center;
}
.contBtnPagination .inputPagination::-webkit-inner-spin-button,
.contBtnPagination .inputPagination::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.contBtnPagination .btnPaginationLeft img {
  transform: rotate(180deg);
}
.btnConfig {
  background-image: url("../img/recursos.png");
  cursor: pointer;
  width: 68px;
  height: 61px;
  position: absolute;
  transform: scale(.8);
}
.btnTools {
  background-image: url("../img/btnherramientas.png");
  cursor: pointer;
  width: 61px;
  height: 61px;
  position: absolute;
  transform: scale(.8);
}
.btnTools.isActive {
  background-image: url("../img/btnherramientas-Active.png");
}

/********** MODAL PAGE */
.modalPage {
  display: none;
  background-color: white;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}
.modalPage_contenedor {
  background-color: white;
      width: 1228px;
    height: 720px;
    border-radius: 20px;
    top: 48%;
    left: 45%;
    margin-left: -512px;
    margin-top: -333px;
  position: absolute;
  transform: scale(1.24);
  /* -webkit-transform: translate(-50%,-45%); */
  /* transform: translate(-50%,-45%); */
  border: 2px solid black;
  /* border-bottom: none; */
}
.modalPage_btn-cerrar,
.cronometroCont-cerrar,
.addLinkBtnCont-cerrar {
  width: 40px;
  height: 40px;
  background-size: 40px 40px;
  background-image: url(../img/equis.png);
  display: block;
  position: absolute; 
  cursor: pointer;
  z-index: 9;
  right: -24px;
  top: -24px;
  transition: all .1s ease-in;
}
.modalPage_btn-cerrar:hover,
.cronometroCont-cerrar:hover,
.addLinkBtnCont-cerrar:hover {
  transform: scale(1.1)
}
.modalPage_containt,
.modalPage_iframe {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border: none;
}
.modalPage_iframe {
 border-radius: 20px;
 border:none;
}
.modalPage_containt {
  display:none;
}
.modalPage_otherContenedor {
  margin: 40px;
  box-sizing: border-box;
  position: relative;
}

/********** POPUP AUDIO */
.Cont1Resouces {
     position: relative;
    float: left;
    width: 24%;
    top: 125px;
    left: 30px;
}
.Cont2Resouces {
    position: relative;
    float: left;
    width: 76%;
}
.ContResVacio {
    width: 170px;
    background-color: transparent;
    height: 170px;
    margin: 16px 0;
}
.ContResIcon {
    width: 170px;
    background-color: #3c3c3b;
    border-radius: 10px;
    height: 170px;
    margin: 16px 0;
    cursor: pointer;
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
     /*-khtml-user-select: none; */
       -moz-user-select: none; 
        -ms-user-select: none; 
            user-select: none; 

}
.TittleResIcon, .TittleResIconVi,.TittleResIconRes{
    text-align: center;
    font-size: 24px;
    width: auto;
    display: block;
    padding: 10px 0;
    color: #fff;
}
.TittleResIcon.isActive, .TittleResIconVi.isActive {
  color: orange;
}
.imgGenAudio {
  display: block;
  margin: 0 auto;
  pointer-events: none;
}
.imgGenVideo {
  display: block;
  margin: 10px auto;
  pointer-events: none;
}
.imgGenResource {
  display: block;
  margin: 10px auto;
  pointer-events: none;
}
.imgGenPDF {
  display: block;
  margin: 10px auto;
  pointer-events: none;
}

.ContResArchivos {
    width: 97%;
    background-color: #3c3c3b;
    border-radius: 10px;
    /*margin: 16px 0;*/
    padding: 10px;
}
.ContResArchivos ul{

    overflow-y: scroll;
    height: 533px;
    padding-left: 0;
}

.ContResArchivos li{
padding: 2px 10px;
border-radius: 10px;
border: 1px solid #fff;
color: #fff;
margin: 8px 10px;
list-style: none;
cursor: pointer;
}

.ContResArchivos li:hover{
  border: 1px solid orange;
  color: orange;
}
.isInactiveAudio, .isInactiveVideo,.isInactiveResource {
  pointer-events:none;
  border: 1px solid orange !important;
  color: orange !important;
}

.contoptunit::-webkit-scrollbar,
.contAddBtnLink::-webkit-scrollbar{
  width: 0;
  padding: 0;
  background-color: #b5b5b5;
}
.contoptunit::-moz-scrollbar,
.contAddBtnLink::-moz-scrollbar{
  width:0;
  background-color: #b5b5b5;
  padding: 0;
}

.ContResArchivos ul::-webkit-scrollbar, #ContAcor::-webkit-scrollbar,
.contAddBtnLink::-webkit-scrollbar {
  width: 10px;
  padding: 6px;
  background-color: #b5b5b5;
}
.ContResArchivos ul::-moz-scrollbar, #ContAcor::-moz-scrollbar,
.contAddBtnLink::-moz-scrollbar {
  width:10px;
  background-color: #b5b5b5;
  padding: 6px;
}

#ContAcor::-webkit-scrollbar-thumb, .ContResArchivos ul::-webkit-scrollbar-thumb,
.contAddBtnLink::-webkit-scrollbar-thumb{
  background-color: #5f5f5e;
  width: 6px;
  border-radius: 5px;
 margin: 0 auto
}

#ContAcor::-moz-scrollbar-thumb, .ContResArchivos ul::-moz-scrollbar-thumb,
.contAddBtnLink::-moz-scrollbar-thumb {
  background-color: #5f5f5e;
  width: 6px;
  border-radius: 5px;
  margin: 0 auto
}

.audioContPopUp {
    width: 100%;
    margin-bottom: -10px;
    outline: none;
}

audio{
  outline: none
}

/********** POPUP PDF */
.br-contPDF {
  border-radius: 18px;
}
.pdf {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  display: block;
}

/********** BAR TOOLS */
.barTool_Container {
  display:none;
  background-color: #3c3c3b;
  background-size: 100% 100%;
  width: 1078px;
  height: 80px;
  position: absolute;
  top: 0px;
  right: 206px;
  z-index: 3;
}
.barTool_Title {
  color: white;
  font-size: 20px;
  text-align: center;
  margin: 2px 0 10px 0;
  cursor: default;
}
.barTool_contBtn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.barTool_btn, .barTool_btn_link {
  width: 50px;
  margin: 8px 0;
  cursor: pointer;
  padding: 5px;
  box-sizing: border-box;
  position: relative;
}
.barTool_btn:hover::before {
  content: attr(data-tool);
  text-align: center;
  font-size: 1em;
  position: absolute;
  left: 60px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: #000;
  color: #fff;
  border-radius: 10px;
  padding: 4px 8px;
  z-index: 10
}
.rBeforeBT_btn:hover::before {
  width: 90px;
}
.barTool_btn:hover,
.barTool_btn_link:hover {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  box-shadow: 1px 1px 0 0 black;
}
#ContBtnSeal .barTool_btn_link {
  background-color: transparent;
  box-shadow: none;
}
.barTool_btn > img,
.barTool_btn_link > img {
  width: 100%;
  pointer-events: none;
}

.barTool_subBtnContent {
  display: none;
}
.barTool_subBtn {
  box-sizing: content-box;
  border: 2px solid #393737;
  border-bottom: none;
  margin: 0;
  padding: 0;
  display: flex;
  position: absolute;
  background-color: #575756;
  left: 50%;
  top: -76px;
  height: 60px;
  border-radius: 20px 20px 0 0;
}
.barTool_subBtn.posCenterContHighlighther {
  margin-left: -136px;
  top:-380px;
  width: auto;
  height: 365px;
  border: 0px solid #393737;
}


.posCenterContHighlighther .picker_wrapper {
  background: #575756 !important;
}
.barTool_subBtn.posCenterContSeal {
  margin-left: -72px;
  top: -71px;
}
.barTool_subBtn li {
  margin: 0 10px;
  padding: 0;
  list-style: none;
}
.barTool_btn_link {
  margin: 3px 0 ;
}
.barTool_btnCircle {
  border: 5px solid transparent;
  width:37px;
  height:37px;
  margin:6px 0;
  border-radius: 50%;
}
.barTool_btnCircle:hover {
  border-color: white;
}
.cc01 {
  background-color: #F9FF00;
}
.cc02 {
  background-color: #00FFF2;
}
.cc03 {
  background-color: #FF06B3;
}
.cc04 {
  background-color: #52FC22;
}

/********** CONTENT BTN UNITS */
.units{
  display:none;
  background-color: #3c3c3b;
  text-align: center;
  height: 84px;
  position: absolute;
  width: 273px;
  left: 20%;
  margin-left: -65.5px;
  top:-257px;
  border-radius: 5px 5px 0 0 ;
}

.units-ex{
  display:none;
  background-color: #3c3c3b;
  text-align: center;
  height: 118px;
  position: absolute;
  width: 213px;
  left: 29%;
  margin-left: -65.5px;
  top:-125px;
  border-radius: 5px 5px 0 0 ;
}

.titleunits {
    text-align: center;
    color: #fff;
    font-size: 28px;
    /* cursor: pointer; */
    margin: 2px 0;
}
.DownFle {
    width: 14px;
    vertical-align: middle;
  }
.contHidden{
  overflow: hidden;
  width: 200px;
  height: 202px;
  background-color: transparent;
  position: relative;
  margin: 0 auto;
}
.contoptunit{
  position: relative;
  text-align: center;
  width:225px;
  cursor: pointer;
    padding: 2px;
    border: 0;
  background: #3c3c3b;
  color: #7b7b7b;

-webkit-transform: translateX(-16px);
transform: translateX(-16px);
-moz-transform: translateX(-16px);
top: -2px

}
.option {
    color: white;
    font-size: 22px;
    display: block;
    text-align: center;
    margin-bottom:3px;
    margin-left: -3px;
}
.option:hover{
  color: black;
  background-color: white;
}
.option:active{
  color: #3c3c3b;
  background-color: white;
}
.UpaniUnits{

     height: 112px;
     opacity: 1;
     z-index: 2;
     left: 426px;
     top:-110px;
}
.DownaniUnits{

 height: 0;
    opacity: 0
}
.titleUnitFaIN{
opacity: 1;


}

/********** BTN ACT MODAL */
.btnGoModalAct {
  background-size: cover;
  width: 26px;
  height: 26px;
  position: absolute;
  cursor: pointer;
  z-index: 1;
}

.btnModalAct-activity {
  background-image: url('../img/iconActi/edit.png');

}
.btnModalAct-audio {
  background-image: url('../img/iconActi/audio.png');
  content: 'Audio';
}

.btnModalAct-video {
  background-image: url('../img/iconActi/video.png');
  content: 'Audio';
}


.btnModalAct-activity:hover::before,
.btnModalAct-audio:hover::before {
	
  /* content: ''; */
  text-align: center;
  font-size: .8em;
  position: absolute;
  left: 35px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: #000;
  color: #fff;
  border-radius: 10px;
  padding: 4px 8px;
  /* width: 178px; */
}

.btnModalAct-video:hover::before {
	
  /* content: ''; */
  text-align: center;
  font-size: .8em;
  position: absolute;
  left: 35px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: #000;
  color: #fff;
  border-radius: 10px;
  padding: 4px 8px;
}



.btnModalAct-activity:hover::before {
  content: 'Activity';
}
.btnModalAct-audio:hover::before {
  /* content: attr(data-titulo); */
  content: 'Audio';
}

.btnModalAct-video:hover::before {
  content: 'Video';
}










/********** CANVAS */
#ContCanvasOpacityContDrawing {
  pointer-events: none;
}
.contDragwing {
  /* background-color: #ff000063; */
  position:absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left:0 ;
  overflow: hidden;
}

#CanvasDrawArea {
  display:none;
}
/* #CanvasGen {
  position: absolute;
  width: 100%;
  height: 100%;
} */

/********** CONT CRONO */

.cronometroCont {
  display:none;
  background-color: #3c3c3b;
  border: 2px solid black;
  width: 286px;
  height: auto;
  border-radius: 20px;
  position: absolute;
  left: 810px;
  top: 350px;
  z-index: 3;
  transform: scale(1.3);
}
.chronoExample {
  width: 90%;
  position: relative;
  margin: 30px auto 30px;
}
.centradoCrono {
  position: relative;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: no-wrap;
}
.startButtonCrono, .pauseButtonCrono, .resetButtonCrono {
  padding:4px 6px;
  border-radius: 10px;
  background-color: white;
  color: #fff;
  font-family: 'Open Sans';
  cursor: pointer;
  width: 100%;
  font-size: 90%;
  text-align: center;
  margin: 5px 6px;
  padding: 6px 12px;
  text-align: center;
}

.valuesCrono{
  text-align: center;
  font-size: 90%;
  padding: 5px 0;
  background-color: #adadad;
  border-radius: 10px;
  margin-top: -10px;
  margin-bottom: 10%;
  font-weight: bold;
   color: #3c3c3b
}
.startCrono{
  color: gray
}
.resetCrono{
 color: gray
}

.cropper-container {
  z-index: 1;
}


/********** ZOOM PAGE BOOK */

.zoomRecorteJS > canvas {
  max-height: 593px;
  margin: 0 auto;
  display: block;
  max-width: 944px;
}


/********** BOX BTN ADD LINK */



.addLinkBtnCont {
  display:none;
  background-color: #3c3c3b;
  border: 2px solid black;
  width: 286px;
  max-height: 370px;
  border-radius: 20px;
  position: absolute;
  left: 810px;
  top: 350px;
  z-index: 2;
  transform: scale(1.3);
}
.contAddBtnLink {
  display: flex;
  justify-content: center;
  width: 90%;
  margin: 10px 5%;
  max-height: 120px; /* 150px Solo cuando se quiera Texto*/
  flex-wrap: wrap;
  overflow: hidden;
  overflow-y: scroll;
}
.contInputAddBtnLink {
  /* border-top: 2px solid gray; */
  padding-top: 10px;
  padding-bottom: 10px;
}
.contInputAddBtnLink h3 {
  width: 90%;
  margin: 0;
  margin-left: 10%;
  color: white;
}
.contButtonsAddBtnLink {
  display: flex;
  justify-content: center;
}
.isBtnLink {
  margin: 10px 10px;
}
.isBtnLink:hover:before {
  content: attr(data-tool);
  text-align: center;
  font-size: 1.2em;
  position: absolute;
  bottom: -40px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #000;
  color: #fff;
  border-radius: 10px;
  padding: 4px 8px;
  width: 100px;

}
.inputAddBtnLink {
  height: 25px;
  border-radius: 5px;
  text-align: center;
  font-size: 20px;
  width: 80%;
  outline: none;
  margin: 5px 10%;
  text-align: center;
}
.addLinkBtnCont_btn {
  width: 40px;
  color: white;
  cursor: pointer;
  padding: 10px;
  margin: 5px 0;
}
.addLinkBtnCont_btn > img {
  width:100%;
}
.addLinkBtnCont_btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  box-shadow: 1px 1px 0 0 black;
}

.contUrlGoAddBtnLink {
  position: relative;
}
.UrlLinkAddBtnLink {
  display: block;
  background-image: url('../img/iconActi/icono-btnLINK.png');
  background-size: 30px 30px;
  width: 30px;
  height: 30px;
  margin: 5px;
  position: relative;
  outline: none;
}
.textUrlLinkAddBtnLink {
  display:none;
  color: white;
  text-align: center;
  font-size: 0.8em;
  margin-top: 5px;
  width: 60px;
}
.contUrlGoAddBtnLink-cerrar {
  display: none;
  cursor: pointer;
  /* background-image: url('../img/equis.png'); */
  /* background-size: 35px 35px; */
  width: 30px;
  height: 30px;
  position: absolute;
  left: 35%;
  top: 35%;
  margin-left: -12.5px;
  margin-top: -12.5px;
  background:white;
  border-radius: 50%;
  border: 5px solid #10548c;
}
.contUrlGoAddBtnLink-cerrar:hover {
  transform: scale(1.1);
}

.contUrlGoAddBtnLink-cerrar .fa-edit{
  position: absolute;
  left: 15%;
  top:10%;
  font-size: 23px;
}

.contMessagePortrait {
  display: none;
  box-sizing: border-box;
  color: #3c3c3b;
  background: rgba(255, 255, 255, 0.8);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

.contMessagePortrait > strong {
  position:relative;
  top: 50%;
  transform: translateY(-50%);
}



.cropper-canvas {
  transform: translateX(0) !important;
}
.cropper-canvas,
.cropper-canvas > img {
  width: 100% !important;
  /*max-width: 100% !important;*/
}

.contDropCheckSeal {
  pointer-events:none;
  width: 100%;
  height: 100%;
  position:absolute;
  top:0;
  left:0;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}
.contDropCheckSeal_content {
  width: 100%;
  height: 100%;
  position:relative;
}
.btnCheckSeal{
  width: 20px;
}


/*ESTILOS DEL MODAL DE AUDIO*/

.modalPage_subContenedor {
  margin: 40px;
  box-sizing: border-box;
  position: relative;
  font: 20px 'Open Sans' ,Arial,sans-serif;
}
.modalPage_subContent {
  display: none;
  position: absolute;
  top:0;
  left: 0;
}
.modalPage_footer {
  background-color: black;
  height: 60px;
  position: absolute;
  width: 100%;
  left: 0%;
  bottom: 0px;
  border-radius: 0 0 14px 14px;
  /* margin: 0 10px; */
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.numberIndicacion{
  display: inline-flex;
  margin-right: 8px;
  font-weight: bold;
  color: #24408e;
  font-size: 24px;
  top: -2px;
  position: relative;
}

.titleScript{
  color: #000;
  border: 1px solid #a9abab;
  border-radius: 10px;
  padding: 5px;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  cursor: pointer;
  margin: 0px;
  font: 23.4px 'Open Sans' ,Arial,sans-serif;
  font-weight: bold;
}

.ContAcor{
  width: 99%;
  border: 1px solid #3c3c3b;
  overflow: auto;
  margin: 10px 0;
  height: auto;
  max-height: 432px;
  border-radius: 10px;
  box-sizing: border-box;
}

.ContAcor::-webkit-scrollbar {
  width: 10px;
  padding: 6px;
  background-color: #b5b5b5;
}
.ContAcor::-moz-scrollbar {
  width:10px;
  background-color: #b5b5b5;
  padding: 6px;
}

.ContAcor::-webkit-scrollbar-thumb {
  background-color: #5f5f5e;
  width: 6px;
  border-radius: 5px;
 margin: 0 auto;
}

.ContAcor::-moz-scrollbar-thumb {
  background-color: #5f5f5e;
  width: 6px;
  border-radius: 5px;
  margin: 0 auto;
}

.PopCont1{
  width: 100%;
  float: left;
  height: 83%;
  padding: 10px;
  line-height: 1.4;
  box-sizing: border-box;
}

.indicacionesActi{
  width: auto;
  height: auto;
  color: #000;
  margin-bottom: 35px;
  float: left;
  font-size: 22px;
  margin-top: 0px;
}

.disIn_flex{
  display: inline-flex;
}

.alto310{
  height: 372px !important
}
.audioFlotante {
  display:none;
  background-color: #3c3c3b;
  border: 2px solid black;
  height: auto;
  border-radius: 20px;
  position: absolute;
  left: 810px;
  top: 350px;
  z-index: 3;
  /* transform: scale(1.3); */
  font-size: 0px;
}

#imgDescargar{
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  background: #3c3c3b;
  margin-top:10px;
  padding:10px;
  color:white !important;
  border-radius: 20px;
  text-decoration: none;
  color: initial;
  position: absolute;
  top:590px;
  left:510px;
  cursor: pointer;
}

.btnModalAct-Aux:hover::before{
  left:-200px;
}

.iconBtn{
  font-size: 43px;
  color:white;
}

.iconFloat{
  color:#fca404;
  cursor: pointer;
}

.iconFloat:hover{
  transition: 1s;
  transform: scale(1.3);
}

.cuadroText{
  background: white;
  border: 2px solid black;
  width: 200px;
  height: 120px;
  top: 10px;
  left:-170px;
  position: absolute;
  cursor: default;
}

.cuadroText .exit{
  font-size: 15px;
  float: right;
  color: black;
  margin-right: 5px;
  margin-top:2px;
  cursor: pointer;
}

.cuadroText.right{
  left:0px;
}

.cuadroText.top{
  top:-105px;
}


.cuadroText textarea{
  top: 23px;
  left:2px;
  position: absolute;
  width: 88.5%;
  height: 40%;
  font-size: 13px;
  padding:10px;
  border: none;
  resize: none;
}

.cuadroText textarea:focus{
  outline: none;
}

.cuadroText .noteAddBtn{
  position: absolute;
  top: 96px;
  left: 90px;
  font-size: 13px;
  color:white;
  background: #007bff;
  cursor: pointer;
  border-color: #007bff;
  border-radius: .25rem;
  transition: color .15s
}

.cuadroText .noteDeleteBtn{
  position: absolute;
  top: 96px;
  left: 168px;
  font-size: 13px;
  color:white;
  background: #dc3545 ;
  cursor: pointer;
  border-color: #dc3545;
  border-radius: .25rem;
  transition: color .15s
}


/*SLIDEBAR*/ 
.btnzoomSlide {
  /* visibility: hidden; */
  background-color: #3c3c3b;
  text-align: center;
  height: 50px;
  position: absolute;
  width: 280px;
  left: -10%;
  margin-left: -15.5px;
  top: -55px;
  border-radius: 5px 5px 0 0;
}

.slidecontainer {
  width: 100%;
  height: 45px;
  margin-top:5px
}

.slider {
  -webkit-appearance: none;
  width: 80%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  margin-left: 10px;
  margin-right: 10px;
  top: 10px;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #636363;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4caf50;
  cursor: pointer;
}

.slidecontainer > i {
  color: white;
  font-size: 25px;
}

.slidePicker{
  position: absolute;
  width: 100%;
  height: 45px;
  margin-top:5px;
  left:10px;
  top:287px;
}

.disabledBtnTools{
  background:#888685 !important;
  cursor: default;
}

.disabledBtnTools .btnTools{
  cursor: default !important;
}


.btnDownload{
  position:absolute;
  top:600px;
  left:480px;
}

.btnDownload button{
  background:#28a745;
  color: white;
  padding:.375rem .75rem;
  border-radius: .25rem;
}

.btnDownload button:hover{
  background:#218838;
}

.btnDownload button:active{
  box-shadow: 0 0 0 0.2rem rgba(40,167,69,.5);
}

.containerEraser{
  display:none;
  top:-65px;
  position: absolute;
  background: #3c3c3b;
  width: auto;
  height: 47px;
  border-radius: 5px 5px 0 0;
  left:-70px;
}

.containerEraser .slidecontainer{
  width:180px;
  margin-left: 20px;
}