/* Colores especificos */

:root {
    --colorPrincipal: #B172F1; /*morado*/
    --colorPrincipalHover: #F2E5FF; /*morado clarito*/
    --colorSecundario: #FF3D74; /*rosa*/
    --colorSecundarioHover: #FFC8D8; /*rosa clarito Rechazada*/
    --colorVerde: #ACEACE; /*Aceptada*/
    --colorAmarillo: #FFF3E7; /*Pendiente*/
    --colorAzul: #A8E7FF; /*Realizadas*/
    --colorGrisTexto: #808080;
    --colorGris: #f0f0f0; /*Creadas*/
}

button:focus {
  outline: none;
  box-shadow: none;
}
.vfs{
    font-size:24px;
}
.link-btn-primario {
    display: inline-block;
    background: linear-gradient(81deg, rgba(177,114,241,1) 0%, rgba(255,61,116,1) 100%);
    border-radius: 2rem;
    padding: 12px 70px;
    font-weight: bold;
    font-size: 16px;
    color: white !important;
    text-decoration: none;
    text-align: center;
}

.field-validation-error {
    font-size: 12px;
}

.custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--colorPrincipal);
    background-color: var(--colorPrincipal);

}

.cursor-pointer {
    cursor: pointer;
}

.colorPrincipal{
        color: var(--colorPrincipal);
}

.colorPrincipalHover{
    color: var(--colorPrincipalHover);
}

.colorSecundarioHover{
    color: var(--colorSecundarioHover);
}


.colorSecundario{
    color: var(--colorSecundario);
}

.colorGrisTexto{
    color: var(--colorGrisTexto);
}

.colorVerde{
        color: var(--colorVerde);
}
.colorAmarillo{
        color: var(--colorAmarillo);
}
.colorAzul{
        color: var(--colorAzul);
}


/******************************************************************************************/
/********GENÉRICOS APLICACIONES*********/
/******************************************************************************************/

html, body {
    font-size: 16px;
    font-family: "Inter", sans-serif;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    justify-content: center;
    background-color: #f8f9fa !important;
}

html, body {
    width: 100%;
    height: auto;
    min-height: 100%;
}


a {
   text-decoration: underline;
   text-decoration-color: var(--colorPrincipal) !important;
   color:  var(--colorPrincipal) !important;
}


a:hover {
     color:  var(--colorPrincipalHover);
     text-decoration-color: var(--colorPrincipalHover) !important;
}


.h1, h1 {
    font-size: 3.125rem;
}


    @media (max-width: 768px) {
        .h1, h1 {
            font-size: 1.2rem;
        }
    }

.h2, h2 {
    font-size: 2.3rem;
    font-weight: 300;
}
    @media (max-width: 768px) {
        .h2, h2 {
            font-size: 1.6rem;
        }
    }
.h3, h3 {
    font-size: 1.25rem;
}
            @media (max-width: 768px) {
                .h3, h3 {
                    font-size: 0.9rem;
                }
            }

.h4, h4 {
    font-size: 1rem;
}

.h5, h5 {
    font-size: 1rem;
}

   @media (max-width: 768px) {
        .size45 {
        font-size: 30px !important;
        }
    }


      @media (max-width: 768px) {
        .size20 {
        font-size: 16px !important;
        }
    }
      
      @media (max-width: 768px) {
        .size30 {
        font-size: 20px !important;
        }
    }



 @media (max-width: 768px) {
        .size35 {
        font-size: 22px !important;
        }
    }


    @media (max-width: 768px) {
        .size16 {
        font-size: 12px !important;
        }
}


.list-group-item_dental {
    position: relative;
    display: block;
    background-color: #fff;
}

        @media (max-width: 768px) {
                p {
                    font-size: 14px;
                }
            }

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: none;
}

.btn:hover {
    color: var(--colorPrincipalHover);
    text-decoration: none;
}

/******************************************************************************************/
/*************************************BACKGROUNDS************************************/
/******************************************************************************************/
.bg-secundarioRosita{
    background: var(--colorSecundarioHover);
}
.bg-primario{
    background: var(--colorPrincipal) !important;
}
.bg-login {
    background: rgb(91,195,235);
    background: linear-gradient(180deg, rgba(91,195,235,1) 20%, rgba(153,171,219,1) 52%, rgba(255,255,255,1) 85%);
}


.bg-acceso {
    background: rgb(76,228,216);
    background: linear-gradient(0deg, rgba(76,228,216,1) 0%, rgba(177,114,241,1) 35%, rgba(255,61,116,1) 100%);
}


.bg-banner{
    background: rgb(177,114,241);
background: linear-gradient(180deg, rgba(177,114,241,1) 0%, rgba(255,61,116,1) 77%);
}

.bg-form{
    border-radius: 40px;
    background-color: #2C2C2C;
}


.bg-contacto {
    background: rgb(160,168,217);
    background: linear-gradient(180deg, rgba(160,168,217,1) 0%, rgba(91,195,235,1) 77%);
}


.bg-evento-creada {
    background-color: var(--colorGris) !important;
}

.bg-evento-pendiente {
    background-color: var(--colorAmarillo) !important;
}

.bg-evento-aceptada {
    background-color: var(--colorVerde) !important;
}

.bg-evento-rechazada {
    background-color: var(--colorSecundarioHover) !important;
}

.bg-evento-realizada {
    background-color: var(--colorAzul) !important;
}

.bg-verde {
    background: rgb(159,233,200);
background: linear-gradient(180deg, rgba(159,233,200,1) 0%, rgba(184,255,223,1) 100%);
}

.bg-cards {
    background: #F2F2FE;
}

.bg-pendientes{
    background: rgb(255,243,231);
background: linear-gradient(5deg, rgba(255,243,231,1) 0%, rgba(255,221,189,1) 77%);
}

.bg-calendario{
    background: rgb(76,228,216);
background: linear-gradient(5deg, rgba(76,228,216,1) 0%, rgba(177,114,241,1) 77%);
}


.bg-regalos{
    background-color: #FFF3E7;
}

.rounded_bg{
        border-radius: 40px;
}
        @media (max-width: 768px) {
            .rounded_bg{
                border-radius: 15px;
            }
        }

.rounded_bgcards{
        border-radius: 20px;
}
        @media (max-width: 768px) {
            .rounded_bgcards{
                border-radius: 8px;
            }
        }

.rounded_botones{
        border-radius: 8px;
}


.rounded_bgacceso {
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

/******************************************************************************************/
/*************************************BOTONES**********************************************/
/******************************************************************************************/

.btn{
        padding:3px 70px 3px 70px;

}

.btn-primario {
    color: #fff;
   background: rgb(177,114,241);
background: linear-gradient(81deg, rgba(177,114,241,1) 0%, rgba(255,61,116,1) 100%);
    border-radius: 2rem;
    padding: 4px 70px 4px 70px;
    font-weight: bold;
    font-size:16px;
}

        @media (max-width: 768px) {
            .btn-primario {
                color: #fff;
                padding:8px 20px 8px 20px;
                font-weight: bold;
            }
        }


.formulario-incio-imput {
    border: 2px solid #B172F1;
    border-radius: 40px;
    width: 100%;

}

.icon-circle {
    width: 40px;
    height: 40px;
    background-color: var(--colorPrincipal);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-fino {
             padding-top: 2px !important;
        padding-bottom: 2px !important;
        width: auto !important;
}
        @media (max-width: 768px) {
            .btn-fino {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        width: 200px !important;
        font-size: 14px !important;
            }
        }

.btn-small {
    padding: 3px 25px 3px 25px !important;
}

@media (max-width: 768px) {
    .btn-small {
        color: #fff !important;
        padding-right: 25px !important;
        padding-left: 25px !important;
        font-weight: bold !important;
        width: auto !important;
    }
}
.btn-seleccionado {
    color: var(--colorPrincipal);
    background: #f0f0f0;
    text-decoration: none;
    border-radius: 2rem;
    padding: 3px 70px 3px 70px;
    font-weight: bold;
    border: 1px solid var(--colorPrincipal) !important;
}

@media (max-width: 768px) {
    .btn-seleccionado {
        padding: 8px 20px 8px 20px;
        font-weight: bold;
    }
}
.btn-cancelar {
    color: var(--colorPrincipal);
    background: white;
    border-radius: 2rem;
    padding:3px 70px 3px 70px;
    font-weight: bold;
    border: 1px solid var(--colorPrincipal) !important;
}

        @media (max-width: 768px) {
            .btn-cancelar {
                padding:8px 20px 8px 20px;
                font-weight: bold;
            }
        }

@media (max-width: 768px) {
    .btn-fichavisita {
        padding: 1px 20px 1px 20px;
        font-size: 14px;
    }
}


@media (max-width: 768px) {
    .btn-modal {
        padding: 1px 25px 1px 25px;
        font-size: 14px;
    }
}




.btn-cerrarsesion{
    color: white;
    background:var(--colorPrincipal);
    border-radius: 2rem;
    padding:3px 70px 3px 70px;
    font-weight: bold;
}

.btn:hover {
    
    text-decoration: none;
}


/******************************************************************************************/
/*************************************DECORATIVE**********************************************/
/******************************************************************************************/
.maxw170 {
    width: 100%;
    max-width: 170px;
}

.redondear-modal {
    border-radius: 20px;
    overflow: hidden;
    height: 500px;
}

.linea-horizontal {
    width: 68px;
    height: 4px;
    background-color: #FF5A0C;
    border-radius: 5px;
}

.linea-horizontal-fina {
    width: 52px;
    height: 2px;
    background-color: #FF5A0C;
    border-radius: 5px;
}


.linea-horizontal-gris {
    width: 100px;
    height: 8px;
    background-color: #B172F1;
    border-radius: 5px;

}

.desplegado .linea-horizontal-gris {
    background-color: #FFC8D8;

}


 .linea-faqs{
    width: 95%;
    height: 1px;
    background-color: var(--colorPrincipal);
 }

.circle {
    width: 70px;
    height: 70px;
    background-color: var(--colorPrincipal);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.number {
    color: white;
    font-size: 35px;
    font-weight: bold;
}

@media (max-width: 780px) {
    .circle {
        width: 30px;
        height: 30px;
    }

    .number {
        font-size: 15px;
    }
}

.imagencall{
    display:block !important;
}
    @media (max-width: 780px) {
        .imagencall{
            display:none !important;
        }
    }


.imagencallmobile{
    display:none !important;
}

    @media (max-width: 780px) {
        .imagencallmobile{
            display:block !important;
        }
    }

.dflex-desk{
    display:flex !important;
}
    @media (max-width: 1180px) {
        .dflex-desk{
            display:none !important;
        }
    }


.d-flexmobile{
    display:none !important;
}

    @media (max-width: 1180px) {
        .d-flexmobile{
            display:flex !important;
        }
    }


.w300 {
    width:300px !important;
}

.h650 {
    height:650px !important;
}



    @media (min-width:768px) and (max-width: 1440px) {
        .full1440{
    flex: 0 0 100%;
    max-width: 100%;
        }
        .half1440{
    flex: 0 0 50%;
    max-width: 100%;
        }
    }

/******************************************************************************************/
/***********************************FORMULARIOS********************************************/
/******************************************************************************************/

.form-acceso {
    height: calc(1.5em + .75rem + 2px);
    color: #495057;
    background-color: #000 !important;

}

/******************************************************************************************/
/***********************************FORMULARIO ANIMACION********************************************/
/******************************************************************************************/

.form-control-ancho {
    height: calc(2.5em + .75rem + 2px)  !important;
    }



/* Contenedor para centrar el contenido */
.content-wrapper {
    position: relative;
    transition: all 0.5s ease-in-out;
    }

/* Logotipo */
.logo {
    width: 100px;
    transition: all 0.5s ease-in-out;
    }

/* Título */
.title {
    color: white;
    font-size: 35px;
    margin-top: 10px;
    font-weight: 700;
    transition: all 0.5s ease-in-out;
    }

/* Imagen del señor */
.senor-img {
    width: 100%;
    max-width: 500px;
    transition: all 0.5s ease-in-out;
    }

/* Texto de deslizar */
.swipe-text {
    color: white;
    font-size: 12px;
    margin-top: 10px;
    transition: all 0.5s ease-in-out;
    }

/* Línea negra */
.mdi-chevron-up{
transition: all 0.3s ease-in-out;
}

/* Formulario de inicio de sesión */
.login-form {
    position: absolute;
    bottom: -450px;
    left: 0;
    width: 100%;
    height: 600px;
    padding-left: 20px;
    padding-right:20px;
    padding-top:5px;
    transition: all 0.5s ease-in-out;
    display: block;
    }

.login-form-descktop .form-control {
    background: none;
    border: 2px solid var(--colorPrincipal);
    color: grey;
    border-radius: 50px;
}

.login-form .form-control {
    background: none;
    border: 2px solid var(--colorPrincipal);
    color: grey;
    border-radius: 50px;
}

.login-form .form-control::placeholder {
    color: grey;
    }

.accedeahora{
    visibility: hidden;
}

/* Evita que el icono de validación meta padding extra que empuje el ojito */
input.input-validation-error {
    background-position: left top !important;
    padding-right: 2.5rem !important;
}
/******************************************************************************************/
/***********************************FORMULARIO NEGRO***************************************/
/******************************************************************************************/


   .required::after {
        content: " *";
        color: red;
    }

.form-control{
    font-size:0.8rem !important;
}
/* Estilos para los campos de input */
.form-control {
    border-radius: 2rem;
        color: grey;


    }


.form-group {
font-size: 16px !important;
}
        @media (max-width: 992px) {
                .form-group {
            font-size: 14px !important;
            }
        }



.form-fino{
    height: calc(0.5em + 1.2rem + 3px);
    font-size: 14px;
    background-color: #F2F2FE;
}
        @media (max-width: 992px) {
               .form-fino{
                     font-size: 12px;
                }
        }

/* Estilo de los botones */
.btn-primary {
    background-color: #4A90E2;
    border-color: #4A90E2;
}

/* Ocultar inicialmente */
.hidden {
    display: none;
}


/* Reducir el tamaño de los elementos al mover hacia arriba */
.move-up .logo {

    transition: all 0.5s ease-in-out;
}

.move-up .title {
    font-size:22px;
    transition: all 0.1s ease-in-out;
}

.move-up .senor-img {
    width: 60%;
    transition: all 0.5s ease-in-out;
}

.move-up .swipe-text {
    font-size: 10px;
    transition: all 0.5s ease-in-out;
}


/* Pantalla completa con degradado */
.full-height {
    height: 100vh;
    transition: all 0.5s ease-in-out;
}

/* Cuando el formulario se despliega, reducir la altura de la pantalla a 50vh */
.full-height.move-up {
    height: 50vh;
    transition: all 0.5s ease-in-out;
}

.modal-dialog {
    max-width: 100% !important;
    height: 100% !important;
}

.table td, .table th {
    padding-top: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 5px;
    padding-left: 5px;
    vertical-align: top;
    border-top: 0px solid #dee2e6;
}
.table thead th {
    vertical-align: bottom;
    border-bottom: 0px solid #dee2e6;
}


@media (min-width: 992px) {
    .navbar-expand-lg .navbar-toggler {
        display: block !important; /* Cambia block por flex si necesitas alinear elementos dentro */
    }
}

    .counter {
        font-size: 10px;
        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0; /* Sin padding para reducir tamaño */
        top: 5px;
        right: 9px;
    }


/*****************************************/
/**************CARGA IMAGENES Y DOCUMENTOS*****************/
/*****************************************/

.upload-button {
width: 150px;
height: 150px;
border: 2px solid white; /* Borde estilo adjuntar */
background-color: white; /* Color de fondo claro */
position: relative;
cursor: pointer;
}

@media (max-width: 992px) {
    .upload-button {
        width: 90px;
        height: 90px;
    }
}

.upload-button img {
width: 90px; /* Ajusta el tamaño del icono */
height: 90px;
}
@media (max-width: 992px) {
    .upload-button  img {
width: 50px; /* Ajusta el tamaño del icono */
height: 50px;
}
}

.upload-button input[type="file"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}

.border-mapa{
    border: 5px solid white;
}

.badge-masvendidos {
    position: absolute;
    top: -27px;
    left: 50%;
    transform: translateX(-50%);
    background: #FF3D74;
    padding: 5px 10px;
    border-radius: 5px;
}

.border-masvendidos {
    border: 6px solid #FF3D74;
}

.badge-text {
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}

.sizeNumero{
    font-size: 50px;
}
@media (max-width: 992px) {
.sizeNumero{
    font-size: 30px;
}
}


  
@media (min-width: 1200px) {
    .m-left320 {
       margin-left: 320px;    }
  }

.texto-ajustado {
    word-wrap: break-word; /* Rompe palabras largas */
    overflow-wrap: break-word; /* Alternativa moderna */
    white-space: normal; /* Permite que el texto salte de línea */
    max-width: 100%; /* Evita que el texto sobrepase su contenedor */
    text-align: left; /* Mantiene la alineación centrada */
}

.wh-48 {
    width: 48px;
    height: 48px;
}

.wh-36 {
    width: 36px;
    height: 36px;
}

/*modal*/


    /* Efecto blur en el fondo cuando el modal está abierto */
    .modal-backdrop {
        backdrop-filter: blur(10px);
    }

    /* Estilo del modal para que ocupe el 75% de ancho y alto */
    .modal-dialog {
        max-width: 75%;
        height: 75%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-content {
    height: 100%;
    box-shadow: 0px 0px 14px 3px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 0px 14px 3px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 14px 3px rgba(0,0,0,0.1);
    border: none !important;
    }

    /* Transición suave en el fondo */
   /* body.modal-open .container {
        filter: blur(5px);
        transition: filter 0.3s ease;
    }*/

    /* Estilo para las imágenes dentro del modal */
    .modal-body img {
        width: 100%;
        height: auto;
        cursor: pointer;
    }

    .modal-body .col {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Estilo para el placeholder */
    ::-webkit-input-placeholder {
        color: #808080 !important; /* Placeholder en blanco */
    }

    :-ms-input-placeholder {
        color: #808080 !important;
    }

    ::placeholder {
        color: #808080 !important;
    }

    .modal-open .modal {
        overflow-x: auto;
        overflow-y: hidden;
    }
#sexo, #provincia, #tratamiento{
    appearance: none; /* Oculta la apariencia por defecto */
    -webkit-appearance: none;
    -moz-appearance: none;

}

.flecha-select{

    right: 13px;
    top: 70%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 19px;
}


/*FORMULARIO DOCTOR ADJUNTAR FOTO*/
    .custom-file-upload {
        display: flex;
        align-items: center;
        background: #f8f3ff; /* Color de fondo */
        border-radius: 25px;
        padding: 10px 15px;
        width: 100%;
        position: relative;
    }

    .file-input {
        display: none;
    }

    .file-label {
        flex: 1;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: grey;
    }
    /*FORMULARIO DOCTOR DISPONIBLIDAD*/

      .custom-switch .custom-control-label::before {
            background-color: #ccc;
        }
        .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
            background-color: #a855f7;
        }
        .add-hours {
            color: #a855f7;
            cursor: pointer;
        }
        .time-select {
            width: 110px;
        }
        .month-select {
            width: 120px;
        }
        .time-selection {
            display: none;
        }
        .hour-box {
            display: inline-flex;
            align-items: center;
            background-color: #f1f1f1;
            padding: 5px 10px;
            border-radius: 5px;
            margin: 5px 5px 0 0;
            font-size: 14px;
        }
        .hour-box .remove-hour {
            cursor: pointer;
            margin-left: 8px;
            color: red;
            font-weight: bold;
        }

        .form-fecha {
    border-radius: 0;
    color: grey;
    border: none;
    border-bottom: 1px solid black;
}

        /*Cajas Verificar codigo*/

            .card-container {
        background: white;
        padding: 30px;
        border-radius: 15px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        text-align: center;
        width: 350px;
    }

    .code-inputs {
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    .code-input {
        width: 50px;
        height: 50px;
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        border: 2px solid #ffebf3;
        border-radius: 8px;
        background: #fdeff0;
    }

    /*carrusel*/

    .step-circle {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background: linear-gradient(to right, #a855f7, #60a5fa);
    color: white;
    font-weight: bold;
    font-size: 18px;
    margin: 0 auto 10px;
    }
    .carousel-indicators li {
    background-color: #d1d5db;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 5px;
    }
.carousel-indicators .active {
    background-color: #fca5a5;
}

/*MEnu lateral*/

/* Fullscreen Menu Styles */
.full-screen-menu {
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    flex-direction: column;
    transition: right 0.4s ease;
    z-index: 1050;
}

    .full-screen-menu.show {
        right: 0;
    }

 

    .navbar-toggler {
        border: none;
    }


/*sombra  menu*/
.sombra-derecha {
box-shadow: 5px 0 10px rgba(0, 0, 0, 0.2); /* Ajusta los valores según necesites */
z-index: 1;
}

    @media (min-width: 1900px) {  /* md en Bootstrap */
  .w-md-50 {
    width: 65% !important;
  }
}

.fondo-desenfocado {
    backdrop-filter: blur(10px); /* aplica el desenfoque */
    -webkit-backdrop-filter: blur(10px); /* para compatibilidad con Safari */
    background-color: rgba(255, 255, 255, 0.3); /* fondo semitransparente */
    border-radius: 10px;
    padding: 20px;
    }


   .tarjeta-imagen {
      border-radius: 1rem;
      overflow: hidden;
    }

    .info-creditos {
      border: 2px solid #FF3D74;
      border-radius: 0.75rem;
      padding: 1rem;
      display: flex;
      justify-content: space-between;
      margin-top: 1rem;
      color: #555;
    }

    .info-creditos .col {
      text-align: center;
    }


    /*CHAT*/

        .chat-fijo {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: 60vh;
        overflow-y: auto;
        border-top-left-radius: 2rem;
        border-top-right-radius: 2rem;
        z-index: 1050; /* por encima del contenido */
    }


    .mensaje {
        padding: 0.6rem 1rem;
        border-radius: 1.5rem;
        margin-bottom: 0.5rem;
        max-width: 80%;
        font-size: 0.95rem;
        line-height: 1.4;
    }

    .mensaje-hora {
        display: block;
        font-size: 0.75rem;
        color: #888;
        margin-top: 0.25rem;
    }

    /* Mensajes que tú envías */
    .mensaje.enviado {
        background-color: #d7bfff; /* Lila claro */
        color: #000;
        align-self: flex-end;
        text-align: right;
    }

    /* Mensajes recibidos */
    .mensaje.recibido {
        background-color: #f2f2f2; /* Gris claro */
        color: #000;
        align-self: flex-start;
        text-align: left;
    }

    .chat-fijo {
        display: flex;
        flex-direction: column;
        min-height: 60vh;
    }

    .chat-content {
        flex-grow: 1; /* Ocupa el espacio restante */
    }

/* Animación: subir desde abajo */
@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


#btnCerrarChat {
    font-size: 1.8rem;
    line-height: 1;
    background: none;
    border: none;
}

input[type=checkbox] {
    accent-color: #B172F1;
}





/******************************************************************************************/
/****************************************TABLAS********************************************/
/******************************************************************************************/
.table-responsive-rows th {
    font-size: 1em !important;
}

.mvc-grid {
    font-size: 0.8em !important;
}

.mvc-grid-table > table > thead > tr > th {
    background-color: white !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 2px solid #dee2e6 !important;
    border-bottom: 2px solid #dee2e6 !important;
}

.mvc-grid-table > table > thead > tr > th, .mvc-grid-table > table > tbody > tr > td, .mvc-grid-table > table > tfoot > tr > td {
    border-left: none !important;
    border-right: none !important;
}

.rowSeleccionada {
    background-color: #a8dfa0 !important;
}

.table-responsive-rows td.title_usuarios-acciones {
    text-align: center;
    font-size: 1px;
    width: 100px;
}

@media only screen and (max-width: 1400px) {
    /* Force table to not be like tables anymore */
    .table-responsive-rows table, .table-responsive-rows thead, .table-responsive-rows tbody, .table-responsive-rows th, .table-responsive-rows td, .table-responsive-rows tr {
        display: block;
    }

        /* Hide table headers (but not display: none;, for accessibility) */
        .table-responsive-rows thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    .table-responsive-rows tr {
        padding-bottom: 50px;
        border-left: none;
        border-right: none;
    }

    .table-responsive-rows td {
        /* Behave like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        font-size: 14px;
        position: relative;
        padding-left: 42% !important;
        white-space: normal;
        text-align: right;
    }

        .table-responsive-rows td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            padding-right: 10px;
            white-space: nowrap;
            text-align: left;
            font-weight: bold;
            font-size: 14px;
        }

    .mvc-grid-table > table > thead > tr > th:nth-of-type(1), .mvc-grid-table > table > tbody > tr > td:nth-of-type(1), .mvc-grid-table > table > tfoot > tr > td:nth-of-type(1) {
        border-top: 1px solid black !important;
    }

    .mvc-grid-table > table > thead > tr > th:last-child, .mvc-grid-table > table > tbody > tr > td:last-child, .mvc-grid-table > table > tfoot > tr > td:last-child {
        border-bottom: 1px solid black !important;
    }

    /* Nombres de títulos tabla USUARIOS */
    .table-responsive-rows td.title_usuarios-rol:before {
        content: "Rol:";
    }

    .table-responsive-rows td.title_usuarios-tipoUsuario:before {
        content: "Tipo:";
    }

    .table-responsive-rows td.title_usuarios-email:before {
        content: "Email:";
    }

    .table-responsive-rows td.title_usuarios-nombre:before {
        content: "Nombre:";
    }

    .table-responsive-rows td.title_usuarios-telefono:before {
        content: "Teléfono:";
    }

    .table-responsive-rows td.title_usuarios-nombreApellido:before{
        content: "Nombre/Apellidos";
    }


    .table-responsive-rows td.title_usuarios-apellidos:before {
        content: "Apellidos:";
    }
    .table-responsive-rows tdtitle_usuarios-laboratorio-centro:before {
        content: "Nombre Laboratorio/Centro Médico:";
    }
    .table-responsive-rows td.title_usuarios-activo:before {
        content: "Activo:";
    }

    .table-responsive-rows td.title_usuarios-validado:before {
        content: "Validado:";
    }

    .table-responsive-rows td.title_usuarios-fechaCreacion:before {
        content: "F. Creaci\00f3n:";
    }
    .table-responsive-rows td.title_usuarios-referidos:before {
        content: "Referidos:";
    }
    .table-responsive-rows td.title_usuarios-colegiado:before {
        content: "Nº Colegiado:";
    }
    .table-responsive-rows td.title_usuarios-fechaValidacion:before {
        content: "F. Validaci\00f3n:";
    }

    .table-responsive-rows td.title_usuarios-creditos:before {
        content: "Visis:";
    }

    .table-responsive-rows td.title_usuarios-especialidad:before{
        content: "Especialidad:";
    }

    .table-responsive-rows td.title_usuarios-centrosanitrario:before {
        content: "Centro Sanidad:";
    }


    .table-responsive-rows td.title_creditos-descripcion:before {
        content: "Descripci\00f3n:";
    }

    .table-responsive-rows td.title_creditos-creditos:before {
        content: "Créditos:";
    }

    .table-responsive-rows td.title_creditos-importecreditos:before {
        content: "Importe:";
    }

    .table-responsive-rows td.title_creditos-fechaCreacion:before {
        content: "F. Creaci\00f3n:";
    }

    .table-responsive-rows td.title_usuarios-acciones {
        text-align: right !important;
        width: auto;
        font-size: 1px;
        padding-right: 5px;
    }

    .table-responsive-rows td.title_usuarios-acciones:before {
        content: "Acciones:";
    }

    /***********************************CANJEO DE REGALOS ****************************************/
   

    .table-responsive-rows td.title_regalo-fechapeticion:before {
        content: "F. Petición";
    }

    .table-responsive-rows td.title_regalo-fechaenvio:before {
        content: "F. Envio";
    }

    .table-responsive-rows td.title_regalo-regalo:before {
        content: "Regalo:";
    }

    .table-responsive-rows td.title_regalo-descripcion:before {
        content: "Descripción:";
    }

    .table-responsive-rows td.title_regalo-donacion:before {
        content: "Donación:";
    }

    .table-responsive-rows td.title_regalo-puntos:before {
        content: "Visis:";
    }

    .table-responsive-rows td.title_regalo-importe:before {
        content: "Importe:";
    }


    .table-responsive-rows td.title_acciones:before {
        content: "Acciones:";
    }

    .table-responsive-rows td.title_nombre:before {
        content: "Nombre:";
    }


    .table-responsive-rows td.title_telefono:before {
        content: "Teléfono:";
    }

    .table-responsive-rows td.title_direccion:before {
        content: "Dirección:";
    }

    .table-responsive-rows td.title_ciudad:before {
        content: "Ciudad:";
    }

    .table-responsive-rows td.title_provincia:before {
        content: "Provincia:";
    }

    .table-responsive-rows td.title_codigopostal:before {
        content: "Cod Postal:";
    }
}



/******************************************************************************************/
/***********************************TABLA PAGINACIÓN****************************************/
/******************************************************************************************/
.mvc-grid-pager .active, .mvc-grid-pager .active:focus, .mvc-grid-pager .active:hover {
    border-color: #B172F1 !important;
    background: #B172F1 !important;
    color: #ffffff !important;
    border-radius: 50%;
}

.mvc-grid-pager button {
    color: #B172F1 !important;
}

.mvc-grid-pager button:focus {
    outline: none !important;
    box-shadow: none !important;
}

.tableless thead {
    display: none;
}

.tableless td {
    border: solid 0px transparent !important;
}




@media (min-width: 768px) {
    #ModalEditSpeciality .modal-dialog {
        max-width: 40vw;
        max-height: 40vh;
    }
}


@media (max-width: 568px) {
    #ModalEditSpeciality .modal-dialog {
        max-width: 40vw;
        max-height: 40vh;
    }

}



@media (min-width: 768px) {
    #ModalEditHealthCenter .modal-dialog {
        max-width: 40vw;
        max-height: 90vh;
    }

}


@media (max-width: 568px) {
    #ModalEditHealthCenter .modal-dialog {
        max-width: 40vw;
        max-height: 90vh;
    }


    #ventanaModal .modal-content {
        max-width: 90vw !important;
        max-height: 25vh !important;
    }
}