@charset 'UTF-8';
@import url('jjoo-schedule.basics.css');

/** NAVEGACION POR D AS *************************/
/************************************************/

.navSchedule nav li:not(.active):hover:before,
.navSchedule nav li:not(.active) > a:hover span {
  color: #11294e;
}

/** NAVEGACION POR D AS *************************/
/** END *****************************************/

/** ELEMENTOS POR FILAS *************************/
/************************************************/
.oneDayDirecs ul > li {
  z-index: 1;
}
.oneDayDirecs ul > li:hover {
  z-index: 2;
}
.oneDayDirecs .video_mod.next_live .butt a:hover {
  cursor: default;
}
.oneDayDirecs .video_mod:not(.next_live) .butt a:hover .rtve-icons {
  z-index: 2;
  opacity: 1;
}

.oneDayDirecs.collSet .video_mod[class*='live'] > .butt a {
  cursor: pointer;
}

.oneDayDirecs .video_mod .txtBox .mainTitle {
  font-size: 2.2rem;
  line-height: 2.6rem;
  font-family: 'Roboto Slab', 'Roboto', sans-serif;
}

/** ELEMENTOS POR FILAS *************************/
/** END *****************************************/

/** hacemos scroll del calendario en desktop **/
.oneDayDirecs > li ul {
  width: 100%;
  display: flex;
  width: 100%;
  overflow: hidden;
  overflow-x: auto;
  justify-content: flex-start;
  flex-wrap: nowrap;
  padding: 0 1.2rem;
}
/* custom scrollbar */
.oneDayDirecs ::-webkit-scrollbar {
  width: 2rem;
  height: 2rem;
}
.oneDayDirecs ::-webkit-scrollbar-track {
  background-color: #fff;
}
.oneDayDirecs ::-webkit-scrollbar-thumb {
  background-color: #0b3f72;
  border-radius: 2rem;
  border: 0.6rem solid transparent;
  background-clip: content-box;
  cursor: grabbing;
}
.oneDayDirecs ::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}

/* solo portada https://www.rtve.es/juegos-olimpicos/calendario-directos/  */
body.calendariodirectos .oneDayDirecs > li ul {
  justify-content: center;
  flex-wrap: wrap;
}

/** ALARM ***************************************/
/************************************************/
.oneDayDirecs.collSet .video_mod.next_live > .butt button .rtve-icons:before {
  content: 'Av\00ED same';
}
.oneDayDirecs.collSet .video_mod.next_live > .butt:hover button .rtve-icons {
  opacity: 1;
  border: 0.2rem solid #fff;
  background: #00000080
    url('https://css2.rtve.es/css/rtve.2021/i/rtve-icons.svg/rtve-icon_avisar.svg')
    no-repeat 0.4rem 50%;
  color: #fff;
  background-size: 2.4rem;
  justify-content: left;
  padding-left: 3.6rem;
  left: 0;
}
.oneDayDirecs.collSet
  .video_mod.next_live
  > .butt:hover
  button:hover
  .rtve-icons {
  background-color: #fff;
  background-image: url('https://css2.rtve.es/css/rtve.2021/i/rtve-icons.svg/rtve-icon_avisar_000000.svg');
  color: #000;
}

.oneDayDirecs.collSet .video_mod.next_live .butt .alarm {
  position: absolute;
  width: 12rem;
  height: 3.6rem;
  background: transparent;
  right: 1.6rem;
  margin-top: 56.25%;
  top: calc(-2.8rem - 4.4rem);
  z-index: 2;
  cursor: pointer;
}
.oneDayDirecs.collSet .video_mod.next_live .butt .alarm .rtve-icons {
  top: -6.8rem;
}

.oneDayDirecs.collSet .video_mod.next_live .butt.active .alarm {
  width: 3.6rem;
  min-width: 3.6rem;
  overflow: hidden;
  border-radius: 0.4rem;
  transition: width, 0.3s;
}
.oneDayDirecs.collSet .video_mod.next_live > .butt.active button .rtve-icons {
  opacity: 1;
  background-size: 2.4rem;
  background-color: #fc0;
  border-color: #fc0;
  background-image: url('https://css2.rtve.es/css/rtve.2021/i/rtve-icons.svg/rtve-icon_avisar_000000.svg');
  background-position: 0.4rem 50%;
  color: #000;
  justify-content: left;
  padding-left: 3.6rem;
  top: -2rem;
  left: 0;
}
.oneDayDirecs.collSet
  .video_mod.next_live
  > .butt.active
  button
  .rtve-icons:before {
  content: 'Cancelar';
}

.oneDayDirecs.collSet .video_mod.next_live .butt.active .alarm:hover {
  width: 12rem;
  min-width: 12rem;
}
.oneDayDirecs.collSet
  .video_mod.next_live
  .butt.active
  .alarm:hover
  .rtve-icons {
  border-color: #fff;
  top: -6.8rem;
  left: 0;
}
/* .oneDayDirecs.collSet .video_mod.next_live > .butt.active:hover .alarm .rtve-icons {background-color: #fff;background-image: url("https://css2.rtve.es/css/rtve.2021/i/rtve-icons.svg/rtve-icon_avisar_000000.svg");color: #000;}
 */

/** END ALARM ***********************************/
/************************************************/
