/*=============================================
  REDES SOCIALES
  =============================================*/

  .redSocial{
  	width:30px;
  	height:30px;
  	text-align: center;
  	line-height:30px;
  }

  /*FACEBOOK*/

  .facebookBlanco{
  	color:white;
  	background: black;
  }

  .facebookNegro{
  	color:black;
  }

  .facebookColor{
  	color:white;
  	background:#46639f;
  }

  /*YOUTUBE*/

  .youtubeColor{
  	color:white;
  	background:#d6513e;
  }

  .youtubeBlanco{
  	color:white;
  	background: black;
  }

  .youtubeNegro{
  	color:black;
  }

  /*TWITTER*/

  .twitterColor{
  	color:white;
  	background:#0ab2e6;
  }

  .twitterBlanco{
  	color:white;
  	background: black;
  }

  .twitterNegro{
  	color:black;
  }

  /*GOOGLE PLUS*/

  .google-plusColor{
  	color:white;
  	background:#d71617;
  }

  .google-plusBlanco{
  	color:white;
  	background: black;
  }

  .google-plusNegro{
  	color:black;
  }

  /*INSTAGRAM*/

  .instagramColor{
  	color:white;
  	background:linear-gradient(45deg, #fca925, #ee1d5f,  #6350a2);

  }

  .instagramBlanco{
  	color:white;
  	background: black;
  }

  .instagramNegro{
  	color:black;
  }

  .necesario{

    background-color: papayawhip !important;

  }



  .contenedorWhatsapp{

    position: relative;

  }

  .whatsapp {
    position:absolute;
    padding: 5px;
    top: 3vh;
    width:60px;
    height:60px;
    right:40px;
    background-color:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    font-size:30px;
    z-index:100;
  }

  .whatsapp1, .styloWhatsapp{

    position: absolute;
    padding: 5px;
    width:60px;
    height:60px;
    bottom: 20px;
    background-color:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    font-size:30px;
    z-index:100;

  }

  .panelServicios .whatsapp1{

    position: relative;
    bottom: 0px;
    width:45px;
    height:45px;

  }

  .whatsapp:hover {

    background-color:#25d366;
    color:#FFF;

  }


  .borrarMensaje{

    position: absolute;
    padding: 5px;
    bottom: 110px;
    width:60px;
    height:60px;
    background-color: red;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    font-size:30px;
    z-index:100;
    
  }


  .whatsapp-icon {
    margin-top:13px;
  }

  .bt1{

    text-align: -webkit-center;

  }


  .card{

    position: relative;
    /*margin: 30px;*/
    box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
    border-radius: 15px;
    background: rgba(255,255,255,0.1);
    justify-content: center;
    border-top: 1px solid rgba(255,255,255,0.5);
    border-left-color: 1px solid rgba(255,255,255,0.5);
    backdrop-filter: blur(5px);
    height: 60vh;

  }

  .panelAutogestion .card{

    height: 73vh;

  }

  .card .paddinRow{

    padding: 50px;

  }

  .spanCliente{

    color: white;
    font-size: large;
    padding: 10px;

  }

  .panelVision {

    position: absolute;
    top: 0%;
    display: flex;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(5px);
    width: 100%;
    height: 100%;
    border-radius: 15px;
    opacity: 0;
    z-index: 1000;
    padding: 20px;

  }

  .card .content{

    padding: 20px;
    text-align: center;
    transform: translateY(100px);
    transition: 0.5s;

  }

  .card:hover .content{

    transform: translateY(0px);
    opacity: 1;
  }


  .card .content h2{

    position: absolute;
    top:-80px;
    right: 30px;
    font-size: 8em;
    color: rgba(255,255,255,0.05 );
    pointer-events: none;

  }

  .card .content h3{

    font-size: 1.8em;
    color: #fff;
    z-index: 1;
  }

  .card .content p{

    font-size: 1em;
    color: #fff;
    font-weight: 300;

  }

  .card .content a{

    position: relative; 
    display: inline-block;
    padding: 8px 20px;
    margin-top: 15px;
    background: #fff;
    color: #000;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 500;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);

  }

  .card input, .panelServicios input{

    width: 100%;
    background: rgba(255,255,255,0.1);
    outline: none;
    padding: 10px 20px;
    border-radius: 35px;
    border-top: 1px solid rgba(255,255,255,0.5);
    border-left-color: 1px solid rgba(255,255,255,0.5);
    border-right-color: 1px solid rgba(255,255,255,0.5);
    margin-top: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);

  }

  .card input::placeholder, .card input, .panelServicios input::placeholder, .panelServicios input{
   
    color: rgba(255,255,255,0.5);
    font-size: smaller;
    text-align: center;

  }

  .logoLg{

    margin-top: 30px;
    width: 15%;

  }

  .fr-icono, .fr-icono1, .fr-icono2, .fr-icono3, .fr-icono4, .btnVolver{

    border-radius: 35px;
    margin-top: 15px;
    left: 50px;
    padding: 16px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);

    border-top: 1px solid rgba(255,255,255,0.5);
    border-left-color: 1px solid rgba(255,255,255,0.5);
    text-decoration: none;
    cursor: pointer;

  }

  .btnVolver{

    float: right;
    margin-top: 20px;
    margin-right: 20px;

  }
   
  .titulo{

    border-radius: 35px;
    margin-top: 20px;
    margin-left: 50px;
    color: white;
    padding: 16px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    background: #1C202A;
    border-top: 1px solid rgba(255,255,255,0.5);
    border-left-color: 1px solid rgba(255,255,255,0.5);
    text-decoration: none;

  }

  .btnVolver:hover{

    transform: scale(1.01);
    background: #1C202A;
    border-radius: 35px;
    border-top: 1px solid rgba(255,255,255,0.5);
    border-left-color: 1px solid rgba(255,255,255,0.5);
    border-right-color: 1px solid rgba(255,255,255,0.5);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    
  }

  .parpadeo{

    box-shadow: 0 5px 15px rgba(0,0,0,1);

  }

  .fr-icono h1, .fr-icono1 h1, .fr-icono2 h1, .fr-icono3 h1, .fr-icono4 h1, .btnVolver h1{

    color: black;
    margin: 0px;
    font-size: small;
    font-weight: 500;

  }


  .fr-icono:hover, .fr-icono1:hover, .fr-icono2:hover, .fr-icono3:hover, .fr-icono4:hover{
    transform: scale(1.01);
    background: #1C202A;
    border-radius: 35px;
    border-top: 1px solid rgba(255,255,255,0.5);
    border-left-color: 1px solid rgba(255,255,255,0.5);
    border-right-color: 1px solid rgba(255,255,255,0.5);
    margin-top: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);

  }

  .fr-icono:hover h1, .fr-icono1:hover h1, .fr-icono2:hover h1, .fr-icono3:hover h1, .fr-icono4:hover h1, .btnVolver:hover h1{
    
    color: white !important;

  }

  .tablasEnviar{

    padding: 15px;

  }

  .mensaje{

    width: 100%;
    background: rgba(255,255,255,0.6);
    outline: none;
    padding: 20px 30px;
    border-radius: 35px;
    border-top: 1px solid rgba(255,255,255,0.5);
    border-left-color: 1px solid rgba(255,255,255,0.5);
    border-right-color: 1px solid rgba(255,255,255,0.5);
    margin-top: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);

  }


  .swal2-radio {
    display: grid !important;
    text-align: left !important;
  }


  .card .panelVision input{

    color: black !important;

  }

  .bootstrap-datetimepicker-widget.wider{

    width: 100% !important;
    padding: 15px;

  }

  .table-condensed a.btn span{

    background-color: blue;

  }

  .especialidades{

      background: antiquewhite;
      padding-bottom: 20px;
      border-radius: 30px;
      margin: 20px;

  }
      
  .especialidades label{

    font-size: 18px;

  }

  .btn-verinfo, .copiarUrl, .editarProductosColeccion{

    margin: 5px;
    font-size: 0.9rem;

  }

  .contact100-form-btn{

    margin: 8px;

  }

  .register-box-body .alert{

    font-size: 1.5rem;
    margin-bottom: 0px;

  }

  .email-box-body, .datos-box-body{
    background: rgba(255, 255, 255, 0.5);
    padding: 20px;
    border-top: 0;
    color: #666;
    height: 75vh;
    text-align: center;
    width: 60vw ;
  }

  .datos-box-body h3{
    padding-top: 20px;
    font-size: 5rem;
    text-transform: uppercase;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    line-height: 5.9rem;
  }

  #regUsuario, #regDNI{
    text-align: center;
    height: 5rem;
    color: #000;
  }

  #mensajeBienvenida2 span,
  #mensajeBienvenida3 span{
    font-weight: bold;
  }

  .datos-box-body #mensajeBienvenida, .datos-box-body #mensajeBienvenida1, .datos-box-body #mensajeBienvenida2, .datos-box-body #mensajeBienvenida3 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    line-height: 2.5rem;
  }
 
  .char{
    transform: translateY(-115px);
    transition: transform .2s;
  }

  .panelAutogestion i{
    font-size: 20rem;
  }

  .panelAutogestion .col-md-4{
    margin: 0%;
  }

  .panelAutogestion .cardHover, .idCliente .cardHover{

    transition: transform 250ms;
    cursor: pointer;
  
  }
  
  .panelAutogestion .cardHover:hover, .idCliente .cardHover:hover{
  
    transform: translateY(-2px);
    box-shadow: 3px 3px 10px black;
  
  }

  .botonDeCursos{
    box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
    background: rgba(255,255,255,0.1);
    justify-content: center;
    border-top: 1px solid rgba(255,255,255,0.5);
    border-left-color: 1px solid rgba(255,255,255,0.5);
    backdrop-filter: blur(5px);
    height: 30%;
    padding: 30%;
    text-align: center;
    border-radius: 15px;
    margin: 10px 0px 0px 0px;
  }

  .panelCardCursos{

    margin-top: 10px;
  }
  

  /*--------------------------------------MEDIAS---------------------------------------------------*/

  @media (min-width:1200px){

  	.modal-xl{

  		width: 1200px !important;

  	}

    .logoLg{

      width: 50%;

    }

    .card .paddinRow{

      padding: 15px;

    }

    .card{

      height: 100vh;

    }

  }

  @media (max-width:1200px) and (min-width:768px){

    .logoLg{

      width: 30%;

    }

    .fr-icono{

      top: 15px;
      right: 15px;
      padding: 15px;

    }

    .fr-icono h1, .fr-icono1 h1, .fr-icono2 h1, .fr-icono3 h1, .fr-icono4 h1  {

      font-size: 1em;
      color: white;
      margin: 0px;

    }

    .card {

      padding: 30px;
      height: auto;
      margin: auto;

    }

    .titulo{

      margin: 10px !important;
     
    }

    .btnVolver{

      float: none;
      margin-top: 5px;
      margin-right: auto;

    }

    .card .paddinRow{

      padding: 10px;

    }
    
    .card{

      height: 100vh;

    }

    .email-box-body, .datos-box-body{
      width: 90vw;
      height: 100vh ;

    }


    .panelAutogestion .col-md-4{
      margin: 10%;
    }

  }


  @media (max-width:768px) and (min-width:500px){

    .altoPantalla{

      height: 100vh; 
      padding: 30px

    }

     .altoPantalla img{

      display: none;

    }

    .logoLg{

      width: 35%;

    }

      .fr-icono{

      top: 15px;
      right: 15px;
      padding: 15px;

    }

    .fr-icono h1{

      font-size: 1.5em;
      color: white;
      margin: 0px;

    }

    .card {

      float: none;
      height: auto;
      margin: auto;

    }

    .titulo{

      margin: 10px !important;
     
    }

    .btnVolver{

      float: none;
      margin-top: 5px;
      margin-right: auto;

    }

    .panelVision{

      margin: auto;

    }

    .card .paddinRow{

      padding: 10px;

    }

    .whatsapp1, .borrarMensaje{

      right: 15px;

    }
    .card{

      height: fit-content;

    }

    .email-box-body, .datos-box-body{
      width: 90vw;
      height: 100vh ;

    }
    
    .panelAutogestion .card{

      height: unset;

    }

    .panelAutogestion .col-md-4{
      margin: 10%;
    }

    .botonDeCursos{

      padding: 20px;
      min-height: 75px;
      align-content: center;
      font-size: smaller;

    }

    .botonesCursos{
      padding: 5px 0px 10px;
    }



  }


  @media (max-width: 500px) {

    .altoPantalla{

      height: 70vh; 
      padding: 30px

    }

    .altoPantalla img{

      display: block;

    }

    .logoLg{

      width: 35%;

    }

      .fr-icono{

      top: 15px;
      right: 15px;
      padding: 15px;

    }

    .fr-icono h1{

      font-size: 1.5em;
      color: white;
      margin: 0px;

    }

    .card {

      float: none;
      height: auto;
      margin: auto;

    }

    .whatsapp1{

      right: 15px;

    }

    .titulo{

      margin: 10px !important;
     
    }

    .btnVolver{

      float: none;
      margin-top: 5px;
      margin-right: auto;

    }

    .card .paddinRow{

      padding: 10px;

    }
    .card{

      height: fit-content;

    }

    .email-box-body, .datos-box-body{
      width: 90vw;
      height: 100vh ;

    }

    .panelAutogestion i{
      font-size: 15rem;
    }
  
    
    .panelAutogestion .card{

      height: unset;

    }

    .panelAutogestion .col-md-4{
      margin: 10%;
    }

    .botonDeCursos{

      padding: 20px;
      min-height: 75px;
      align-content: center;
      font-size: x-small;

    }
    
    .botonesCursos{
      padding: 5px 0px 10px;
    }


  }

  /*=============================================
  CÓDIGO QR
  =============================================*/

  #placeHolder img{

  	width: 200px;
  	height: 200px;

  }

  .rows{

    margin-right: 0px !important; 
    margin-left: 0px !important;

  }



  .fullscreen-modal .modal-dialog {
    margin: 0;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
  }
  @media (min-width: 768px) {
    .fullscreen-modal .modal-dialog {
      width: 750px;
    }
  }
  @media (min-width: 992px) {
    .fullscreen-modal .modal-dialog {
      width: 970px;
    }
  }
  @media (min-width: 1200px) {
    .fullscreen-modal .modal-dialog {
       width: 1170px;
    }

    
  }








  .btn-circle{
    border-radius: 50%; /*Redondear bordes*/
    width: 50px; /*Ancho del botón*/
    height: 50px; /*Alto del botón*/
    font-size: 26px;  
    box-shadow: 0 3px 5px rgba(0,0,0,.4);
  }
  .btn-circle:hover, .btn-circle:active{
    box-shadow: 0 4px 7px rgba(0,0,0,.4);
  }
  .btn-rectangle{
    border-radius: 2px; /*Leve redondeo*/
    padding: .5rem 1.5rem; /*Espaciado interno*/
  }
  .btn-circle, .btn-raised{
    color: #FFF;
  }
  .btn-raised{
    box-shadow: 0 1px 5px rgba(0,0,0,.4); /*Sombra leve*/
  }
  .btn-raised:hover, .btn-raised:active{
    box-shadow: 0 4px 6px rgba(0,0,0,.4);
  }
  .btn-flat{
    font-weight: 700; /*Negrilla*/
    color: #2196F3;
    background-color: transparent;
  }
  .block{
    position: relative;
    width: 270px;
    height: 178px;
    margin: 20px auto;
  }


  .ripple-container {
    /*Con los siguientes valores de position, top, left, width y height aseguramos que el div tome todo el tamaño de su padre*/
    position: absolute;
    top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: transparent;
  }
  .ripple-effect {
      position: absolute;
    /*En javascript colocaremos el top y left de este span en el punto donde hizo click el usuario. Por eso es necesario trasladarlo en -50% en ambos ejes, para que el centro del efecto coincida con el click*/
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); 
      opacity: 0;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: rgba(255,255,255, 0.4);
  }
  .btn-flat .ripple-effect{
    background: rgba(33,150,243, 0.4);
  }
  .ripple-container.ripple-effect-animation .ripple-effect{
    /*Aplicamos la animación que mas adelante definiremos con @keyframes*/
      -webkit-animation: ripple .4s ease-in;
      animation: ripple .4s ease-in;
  }

  .controlSidebarStockClose, .controlSidebarStockOpen{

    font-size: 2rem;

  }

  .p-l-0{

    padding-left: 0px !important;

  }

  .p-r-0{

    padding-right: 0px !important;

  }

  .p-lr-0{

    padding-left: 0px !important;
    padding-right: 0px !important;

  }
/*
  @-webkit-keyframes ripple {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      padding-bottom: 200%;
      width: 200%;
    }
  }
  
  @-webkit-keyframes ripple {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      padding-bottom: 200%;
      width: 200%;
    }
  }
*/

  .altoPantalla{

    height: 76vh; 
    padding: 30px

  }

  @media (max-width: 500px) {

    .altoPantalla{

      height: 70vh; 
      padding: 30px

    }

    .altoPantalla img{

      display: block;

    }
  }

  @media (max-width:768px) and (min-width:500px){

    .altoPantalla{

      height: 100vh; 
      padding: 30px

    }

     .altoPantalla img{

      display: none;

    }
  }




  .centrado{

    height: 100vh;
    background-color: black;
    display: flex; 
    justify-content: center;
    align-items: center; 

  }

  .oculto{

    overflow: hidden;

  }


  .lds-spinner {
    color: official;
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-spinner div {
    transform-origin: 40px 40px;
    animation: lds-spinner 1.2s linear infinite;
  }
  .lds-spinner div:after {
    content: " ";
    display: block;
    position: absolute;
    top: 3px;
    left: 37px;
    width: 6px;
    height: 18px;
    border-radius: 20%;
    background: #fff;
  }
  .lds-spinner div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -1.1s;
  }
  .lds-spinner div:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -1s;
  }
  .lds-spinner div:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.9s;
  }
  .lds-spinner div:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.8s;
  }
  .lds-spinner div:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.7s;
  }
  .lds-spinner div:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.6s;
  }
  .lds-spinner div:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.5s;
  }
  .lds-spinner div:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.4s;
  }
  .lds-spinner div:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.3s;
  }
  .lds-spinner div:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.2s;
  }
  .lds-spinner div:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.1s;
  }
  .lds-spinner div:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
  }
  @keyframes lds-spinner {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }