@import url('https://fonts.googleapis.com/css2?family=Asap&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Baloo+2&display=swap');

 

/***************************************/

/** MENU ERES MEDICO *******************/

/***************************************/

ul.eresMedicoOptions {

    border: #FFF 1px solid;

    width: 270px;

    position: absolute;

    padding:0;

    margin-top: 10px;

    background: #2F566C;

    z-index: 999;

    display:none;

    padding-top: .5rem;

}



ul.eresMedicoOptions li {

    width: 100%;

    display: inline-block;

    text-align: left; 

    padding-left:10px;

}



ul.eresMedicoOptions li a {

    font-weight: normal!important;

}





.infoGeneral a:hover {

    text-decoration: none!important;

}



.infoGeneral:hover > ul.eresMedicoOptions{

    display: block;

}



.btnFormaParteMenu {

    background: white;

    color: #2F566C!important;

    padding-left: .3rem;

    padding-right: .3rem;

    border-radius: .2rem;

}



.solicitarLlamadaConf img {

    height: 20px;

}



/***************************************/

/** COMMON *****************************/

/***************************************/

body,

#resultados,

#search-medic,

#especialidades, 

#banners {

    font-family: 'Asap', sans-serif!important;

    background: #FFF!important;

}



#resultados,

#resultados h1,

#search-medic,

#especialidades,

#especialidades ul li a,

#banners{

    color: #003152!important;

}



#search-medic form {

    border: #c6d6dd 8px solid;

}



#footer {

    background: #00B0B7!important;

}



#logo-dm img {

    height: 70px!important;

}



#sub-menu {

    background: #2F566C!important;

}



.nav-directorio {

    background: #00B0B7!important;

}



.blueDirBkgColorv2 {

    background: #003152;

}



.text-dir {

    color: #003152!important;

}



.starsComments {

    background: none;

    width: fit-content;

    padding: .5rem;

    border-radius: 5px;

}



.starsComments i{

    cursor: pointer;

    font-size: 2rem;

}



.headerBlockInfo, .headerBlockInfo3 {

    /*background: #f6a288!important;*/

    background: #00B0B7!important;

    color: #FFFFFF!important;

    padding-left: 0;

    margin: 0 -15px 0 -15px;

    padding: .5rem;

    border-radius: 0;

    padding-left: 30px;

}



.headerBlockInfo2 {

    background: #003152!important;

    color: #FFFFFF!important;

    padding-left: 0;

    margin: 0 -15px 0 -15px;

    padding: .5rem;

    border-radius: 0;

}



.headerBlockInfo3 {

    background: #00B0B7!important;

}



#add_img_fp {

    display: none;

}



.formar-parte a:hover {

    text-decoration: none!important;

    font-weight: bold!important;

}



.img-formar-parte {

    opacity: .9;

    position: relative;

}



.img-formar-parte:hover {

    cursor: pointer;

    opacity: 1;

}



.img-formar-parte .cmr-fp {

    bottom: 5px;

    position: absolute;

    right: 50px;

}



@media(max-width: 450px){

    #form-dir h1 {

        font-size: 2rem;

    }

    

    img.preview {

        max-width: 100%;

    }

    

    img.cmr-fp {

        right: 10px;

        width: 30%;

    }

}



.img-results-rounded {

    object-fit: cover;

    object-position: top;

}





#resultados ul a.rowResultLink:hover {

    opacity: .7!important;

    text-decoration: none!important;

}



.telNosotros:hover {

    text-decoration: none!important;

}



.bg-blue-dir {

    background: #003152;

    color: #FFF;

    font-weight: bold;

}



.bg-bluelight-dir {

    background: #49c4da;

    color: #FFF;

    font-weight: bold;

}



.modal-body.row.horarios p {

    font-size: .85rem!important;

}



/***************************************/

/** HEADER *****************************/

/***************************************/

header {

    background: #003152!important;

}



#container-head, #directorio-info {

        background: #FFF;

        color: #003152;

}



/*.nav-directorio {

    width: 80%!important;

    margin-left: 10%!important;

}*/



/***************************************/

/** AREA *******************************/

/***************************************/

.content-area {

    background: #FFF;

}



/***************************************/

/** PERFIL *****************************/

/***************************************/

#titleDr {

    font-size: 2rem;

}



#perfil-header .img-perfil {

    border-radius: 0!important;

    height: 250px;

    width: 200px;

    min-height: 250px;

    max-height: 250px;

    min-width: 200px;

    max-width: 200px;}



.perfil-ok {

    left: 160px;

    top: 150px;

}



.starsBlock {

    /*background: rgba(255, 255, 255, .60);  */

    background: #00B0B7;

    display: inline-block;

}



.serviciosMedico {

    font-family: 'Baloo 2', cursive!important;

}



.btnVolver, .btnVolver2 {

    background: white;

    color: #2F566C!important;

    padding-left: .3rem;

    padding-right: .3rem;

    border-radius: .2rem;

    margin-top: -2px;

    font-weight: bold;

}



.btnVolver2 {

    background: #003152;

    color: #FFF!important;

    cursor: pointer;

    position: absolute;

    right: 1rem;

    top: 0.4rem;

}



.btnNuevaOpinion {

    padding-left: .3rem;

    padding-right: .3rem;

    border-radius: .2rem;

    margin-top: -2px;

    font-weight: bold;

    margin-right: 9rem;

    color: #FFF;

    background: #00B0B7;

    cursor: pointer;

    position: absolute;

    right: 2.5rem;

    top: 0.4rem;

}



.escribirOpinion {

    color: #00B0B7!important;

    cursor: pointer;

    font-size: 1.3rem;

    margin-left: .5rem;

}



.btnNuevaOpinion:hover {

    opacity: .8;

}



.tratamientosEn li,

.especialistaEn li {

    display: none!important;

}



.especialistaEn li:nth-child(1),

.especialistaEn li:nth-child(2),

.especialistaEn li:nth-child(3),

.tratamientosEn li:nth-child(1),

.tratamientosEn li:nth-child(2),

.tratamientosEn li:nth-child(3){

    display: block!important;

}



p.verMasEspecialidades,

p.verMasformacionProfesional,

p.verMasTratamientos {

    cursor: pointer;

    color: blue;

}



span.linkBtnLlamar {

    background: #05C570!important;

    display: none;

    font-weight: bold!important;

    width: 90px;

    text-align: center;

    font-size: 1.3rem;

    border-radius: .5rem;

}



span.linkBtnLlamar2 {

    background: #05C570!important;

    font-weight: bold!important;

    width: 90px;

    text-align: center;

    font-size: 1.3rem;

    border-radius: .5rem;

    color: #fff;

    cursor: pointer;

}



span.linkBtnLlamar a {

    color: #FFF!important;

    text-decoration: none;

}



span.linkBtnLlamar a:hover {

    text-decoration: none!important;

}



.colorTelNum {

    color: #1f6fad; 

    font-weight: bold;

}



.colorTelNum.tel {

    font-size: 20px;

}



.colorTelNum.telUrg {

    color: #EE0430;

}



.confCitaEncabezado {

    text-transform: uppercase;

}



.telIcon {

    height: 25px;

    margin-top: -7px;

}



.telIconUrg {

    height: 20px;

}



div.ver_btn_contacto {

    color: #00B0B7;

    margin-top: 0.5rem;

}



div.ver_btn_contacto a {

    background: #43b85e;

    border-radius: .5rem; 

    color: #FFF!important;

    cursor: pointer;

    padding: .2rem .4rem;

}



div.ver_btn_contacto a:hover {

    opacity: .8;

}



div.ver_btn_contacto {

    color: #00B0B7;

}



.ver_btn_contacto_msg {

    color: #003152;

    font-size: 1rem;

    font-weight: bold;

}



.solicitar-llamada{

   background: #43b85e;

    border-radius: .5rem;

   color: #FFF;

    cursor: pointer;

   text-align: center;

    padding: .2rem 0;

}



.solicitar-llamada img {

    height: 25px;

    margin: -.3rem 0 0 .3rem;

}



#perfil-link-especialistas {

   color: #00B0B7;   

}



#perfil-link-especialistas a {

   color: #003152;

   cursor: pointer;

   font-weight: bold;

}



#perfil-link-asesores span {

    color: #3DBC7F;

}



#perfil-link-asesores a.link-asesores {

    background: #3DBC7F;

    border-radius: .5rem;

    color: #FFF;

    padding: .2rem .5rem;

}



p.whatsapp-dom {

    cursor: pointer;

}



p.whatsapp-dom a {

    background: #3C6075;

    border-radius: .5rem;

    color: #FFF!important;

    padding: .2rem .5rem;

}



p.whatsapp-dom img {

    height: 1.8rem;

}



#solicitarLlamada {

    font-size: .8rem;

}





/***************************************/

/** MENU OPTIONS ***********************/

/***************************************/

.optionImageLogo {

    height: 120px!important;

    width: auto!important;

}



.optionImage {

    height: 90px!important;

}



.menuBtnOption {

    cursor: pointer!important;

}



.menuBtnOption p {

    font-weight: bold;

    font-size: 1.4rem;

}



#directorio-info a {

    color: #003152!important;

}



#menu-mobile, #submenu-mobile, #submenu-mobile .return-menumob {

    background: #FFF!important;

    color: #003152!important;

}



#menu-mobile a, #submenu-mobile a,

#menu-mobile .cerrar {

    color: #003152!important;

}



.subMenu {

    width: 80%;

    position: absolute;

    z-index: 99999;

    background: #2F566C;

    height: auto;

    display:none;

    left: 10%;

    border: #FFF 1px solid;

}



li.navSubMenu:hover > .subMenu {

    display: flex;

}



.subMenu ul {

    position: relative;

    display: inline-block;

    margin: 0;

    padding: 0;

}



.subMenu ul li {

    list-style: none;  

    float:left; 

    width:100%;

    text-align: left;

}



.subMenu ul li a {

    font-weight: normal!important;

}



/***************************************/

/** COMENTARIOS ************************/

/***************************************/

.commentsProfile img{

    height: 30px;

}



.commentsProfile + hr{

    border-bottom: 3px #7dd8dc solid;

    width: 100%!important;

}



.commentsProfile .commentDate {

    color: #05C570; 

}



.commentsProfile .stars {

    color: #00B0B7;

    display: inline-block;

}



.commentsProfile span.comment {

    font-weight: normal!important;

}



.commentsProfile .nombre {

    width: fit-content;

    padding: .2rem .5rem;

    background: #00B0B7;

    color: #FFF;

    padding-bottom: 0;

    margin-bottom: .5rem;

    display: inline-block;

}



.commentsProfile .atendido-en {

    color: #00B0B7;

    font-size: .8rem;

}



#formEnviarOpinion label {

    font-weight: normal!important;

}



/***************************************/

/** BLOCK INFORMACION ******************/

/***************************************/

#directorio-info .block-left p {

    font-size: .8rem;

}



#directorio-info img.imgFp {

    width: 60%!important;

}



img.envianosMsj {

    height: 30px!important;

    width: 30px!important;

    margin-right: -4px;

}



.text-fp {

    background: #00B0B7;

    color: #FFF;

    padding: .2rem .4rem;

    border-radius: .5rem;

}



.linkFp:hover {

    text-decoration: none!important;

}



.yellow-line {

    border: 3px #00B0B7 solid!important;

}



/***************************************/

/** BLOQUES DOMICILIOS *****************/

/***************************************/

.domicilio iframe {

    height: 100%;

    width: 100%;

}



.geoIcon {

    position: absolute;

    right: 40px;

    z-index: 1;

    top: 10px;

    height: 70px;

}



span.hrAbierto {

    color: #69d88b;

    padding-left: 10px;

    position: absolute;

}



span.hrCerrado {

    color: red;

    padding-left: 10px;

    position: absolute;

}



#verHrConsultorio .modal-body {

    display: flex;

}



#verHrConsultorio .modal-body > div > p {

    font-weight: bold;

}



/***************************************/

/** CARRUSEL ***************************/

/***************************************/

#banners-column li a .banner-content span.banner-especialidad {

    top: .7rem!important;

    font-size: .9rem;

    left: .8rem;

}



#banners-column li a .banner-content span.banner-dr {

    top: 25%!important;

}



#banners-column li a .banner-content .banner-body .img-dr-banner {

    border-radius: .5rem!important;

    margin-top: -95px!important;

    margin-left: 35%!important;

    height: 111px; 

    width: 88px; 

    border: rgba(255,255,255,.6) 4px solid;

}



#banners-column li a .banner-content .banner-body .banner-body-images .perfil-banner-ok {

    margin-left: 7rem!important;

}



#banners-column li a .banner-content span.banner-dr {

    font-family: 'Baloo 2', cursive!important;

    font-size: 1.6rem!important;

}



#banners-column li a .banner-content .layer-color {

    border-radius: 1rem;

}



.banner-body .stars {

    font-size: 1.1rem!important;

    left: -10px;

}



.blockCarrusel:hover {

    text-decoration: none!important;

}



.nbs-flexisel-nav-left, 

.nbs-flexisel-nav-right {

    z-index: 999;

}



.carruselOpiniones {

    position: absolute;

    width: max-content;

    top: 10px;

    padding-left: 8px;

    color: #FFF;

    font-size: .8rem;

}



.marco {

    border: rgba(204, 219, 236, .4) 6px solid;

    position: absolute;

    height: 100%;

    width: 100%;

    z-index: 9;

    border-radius: 1rem;

}





/***************************************/

/** MENU OPTIONS ***********************/

/***************************************/

.rowResult {

    border: #FFF 3px solid;

    border-radius: .8rem;  

    color: #FFF;

}



.rowResult .imgRowresult {

    height: 125px;

    width: 100px;

}



.rowResult .rowResultsOk {

    height: 1.3rem;

    margin: 0 .5rem;

    position: absolute;

}



.rowResultLogo {

    width: 80%;

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    margin: auto;

}



.espText {

    font-size: 2rem;

}



.rowResultLink:hover {

    text-decoration: none!important;

}



/*.rowResultLink:hover + .rowResultLink {

    opacity: .5!important;

}*/

/***************************************/

/** Comentario ***********************/

/***************************************/

#perfil-seccion-comentario .comentario {

    /*border: #7dd8dc 3px solid;*/

    border-radius: .5rem;

    padding: .5rem 1rem;

}



#perfil-seccion-comentario .nombre {

    width: fit-content;

    padding: .2rem .5rem;

    background: #00B0B7;

    color: #FFF;

    padding-bottom: 0;

    margin-bottom: .5rem;

    display: inline-block;

}



#perfil-seccion-comentario .atendido-en p,

#perfil-seccion-comentario .stars {

    color: #00B0B7;

}



#perfil-seccion-comentario .stars {

    display: inline-block;

}



#perfil-seccion-comentario .atendido-en p {

    font-size: .8rem;

}



/***************************************/

/** Mapa ***********************/

/***************************************/

.gmapImage {

    transition: .2s;

}



.gmapImage:hover {

    -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.62);

    -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.62);

    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.62);

}



/***************************************/

/** Responsive ***********************/

/***************************************/

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

        .col-xl-8{

            max-width: 80%;

        }

        .col-xl-2{

            max-width: 10%;

        }

}



@media(min-width : 992px) and (max-width : 1999px){

    .optionImageLogo {

        height: auto!important;

        width: 100%!important;

    }

}



@media(max-width : 991px) {

    .info-perfil-gratuito .columnInfo {

        padding-left: 1rem!important;

        margin-left:0!important;

    }

}



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

    .optionImageLogo {

        height: auto!important;

        width: 100%!important;

        margin-top: 2rem;

    }



}



@media(max-width: 767px){

    .rowResultLogo {

        position: relative;

    }

}



@media(max-width: 560px){

    #logo-dm img,

    #menu-mobile img {

        width: 85%!important;

        height: auto!important;

    }

}



@media(max-width: 575px){

    #perfil-fotos .card {

        margin-bottom: 1rem;

    }

    img.geoIcon {
        margin-top: -40px!important;
    }  

    

    .rowResultLink div.rowResult {

        max-height: 105px!important;

        overflow: hidden;

    }

    

    .rowResultServicios {

        height: 1.3rem!important;

        overflow: hidden;

    }

    

    .imgRowresult {

        height: auto!important;

        max-width: 70px!important;

    }

    

    .rowResultLink h5 {

        font-size: 1rem;

    }

    

    .rowResult .rowResultsOk {

        left: -16%;

        top: 66px;

    }

    

    .starsBlock {

        width: 100%;

    }

}



@media(max-width: 460px){

    #perfil-comentarios h5.headerBlockInfo2 {

        padding-top: 3rem;

    }

    

    .ui-datepicker-title {

        font-size: 1.2rem!important;

    }

    

    #calendario a.ui-state-default,

    #calendario td.ui-state-disabled span.ui-state-default  {

        height: 2rem!important;

        width: 2rem!important;

    }

    .ui-datepicker-prev.ui-corner-all,

    .ui-datepicker-next.ui-corner-all {

        height: 2.5rem;

        width: 2.5rem;

    }

    

    h5.headerBlockInfo{

        padding-right: 50%!important;

    }

    

    .btnVolver {

        margin-top: 0;

        border: #003152 1px solid;

        border-radius: .3rem;

    }

    

    #perfil-confirmacion-cita .infoCitaConsultorio,

    #perfil-confirmacion-cita .infoCitaVideo {

        text-align: center;

    }

    

    .indicacionesConfirmacion {

        text-align: left;

    }

    

    .imgDnone {

        display: none;

    }

    

    .menuBtnOptionText {

        font-size: 1rem!important;

    }

}

/** EMOJIS *******************/
.emoji-button {
            position: absolute;
            top: -5px;
            right: 15px;
            background: #00B0B7;
            border: none;
            border-radius: 50%;
            width: 35px;
            height: 35px;
            font-size: 16px;
            cursor: pointer;
            z-index: 10;
            transition: all 0.3s ease;
        }
        
        .emoji-button:hover {
            background: #0056b3;
            transform: scale(1.1);
        }
        
        .emoji-panel {
            position: absolute;
            top: 70px;
            right: 0;
            background: white;
            border: 1px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            padding: 15px;
            z-index: 1000;
            width: 280px;
            max-height: 250px;
            overflow-y: auto;
            display: none;
        }
        
        .emoji-panel.show {
            display: block;
            animation: fadeIn 0.2s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .emoji-grid {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 8px;
        }
        
        .emoji {
            padding: 8px;
            border-radius: 6px;
            cursor: pointer;
            text-align: center;
            font-size: 18px;
            transition: background-color 0.2s;
        }
        
        .emoji:hover {
            background-color: #e9ecef;
        }
        
        .emoji-category {
            margin-bottom: 12px;
        }
        
        .emoji-category h6 {
            font-size: 12px;
            color: #6c757d;
            margin-bottom: 8px;
            border-bottom: 1px solid #eee;
            padding-bottom: 4px;
        }