.OD{background:#fff;padding:3px;border:2px solid #ebebeb;text-align:center}
table.ODs{margin:auto auto 2mm auto;width:100%;background:#FFFFFF;color:black;border-radius:10px;padding:0}
table.ODs tr{margin-bottom:5px}
table.ODs td.OD{text-align:center;padding:0 2px 0 0;background:white;border-collapse:collapse;padding-bottom:6px}
table.ODs.OD_C5 td.OD{width:20%}
table.ODs.OD_C4 td.OD{width:25%}
table.ODs.OD_C3 td.OD{width:33.33%}
table.ODs.OD_C2 td.OD{width:50%}
table.ODs.OD_C1 td.OD{width:100%;text-align:center;padding:3px}
table.ODs a span.OD1,table.ODs a span.OD2,table.ODs a span.OD3{margin:0 auto 0 auto;padding:.1ex .15ex;width:auto;white-space:normal;font:12px normal Arial Narrow,New Helvetica Narrow,Arial,sans-serif;text-transform:none;word-wrap:break-word;text-wrap:normal;display:block;color:black;text-decoration:none}
table.ODs a span.OD3{font-style:italic;font-weight:bold;}
table.ODs td.OD a img, table.ODs td.OD a:hover img{margin:6px auto 0px auto;border:2px solid white}

/* Especialitzacions ODs */
body.classif table.ODs{width:100%}
body.classif table.ODs td.OD{border-top-width:0;border-width:2px}
table.ODs td.OD a img{max-height:120px;max-width:150px}
.A0{border-bottom:1px solid #ddd}
.A0:hover{background:#f4f3f3}
.pri_th{border-right:0}
.ODsPeu h2 {margin-top:0;font-size:16px;color:#fff;background:#aaaa99;padding:4px;margin-bottom:0;font-family:Arial,sans-serif;text-align:center}

table.ODClassificats td{padding-left:10px;text-align:left;}

.tooltipster-sidetip.tooltipster.tooltipster-customized .tooltipster-box{background: grey;}
.tooltipster-sidetip.tooltipster.tooltipster-customized .tooltipster-content .OD a img {margin: 5px}
.tooltipster-sidetip.tooltipster.tooltipster-customized .tooltipster-content .OD {background: grey;border:none;}
.tooltipster-sidetip.tooltipster.tooltipster-customized .tooltipster-content span {margin:0 auto 0 auto;padding:.1ex .15ex;width:auto;white-space:normal;font:12px normal Arial Narrow,New Helvetica Narrow,Arial,sans-serif;text-transform:none;word-wrap:break-word;text-wrap:normal;display:block;color:white;text-decoration:none}
.tooltipster-sidetip.tooltipster.tooltipster-customized .tooltipster-content span.OD3{font-style:italic;font-weight:bold;}

/* styles per botó de video i modal */
.btn-video {padding: 10px 20px;background-color: #007bff;color: white;border: none;cursor: pointer;border-radius: 5px;}
/* El fondo oscuro del modal */
.modal {display: none; position: fixed;z-index: 1000;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.8); /* Fondo semi-transparente */}
/* El contenedor del video */
.modal-content {position: relative;margin: 10% auto;padding: 20px;width: 70%;max-width: 800px;background-color: #000;}
/* Botón de cerrar (la X) */
.close-btn {position: absolute;top: -30px;right: 0;color: white;font-size: 30px;cursor: pointer;}
/* Forzamos al iframe a ocupar todo el ancho/alto de su padre */
#miVideo {width: 100% !important;height: 100% !important;border: 0;position: absolute;top: 0;left: 0;
}

/* El contenedor (modal-content o un div intermedio) debe tener esto */
.video-container {
    position: relative;padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
    height: 0;overflow: hidden;background-color: #000;
}
/* Esta es la clase que inyectamos con el Replace */
.video-embed-custom {
    width: 100% !important;   /* Ignora el width="560" original */
    height: 100% !important;  /* Ignora el height="315" original */
    display: block;
    border: none;             /* Quita bordes feos de navegadores antiguos */
    position: absolute;       /* Clave para el truco del contenedor 16:9 */
    top: 0;
    left: 0;
}