:root {
	--all-programs-grid-v2__swiper-navigation-size: 58px;
}

.all-programs-grid-v2__tabs {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	position: relative;

	/* Width */
	-ms-flex: 0 0 95.1%;
	flex: 0 0 95.1%;
	max-width: 95.1%;
}

.all-programs-grid-v2__day-info {
	/* To avoid scroll bar during transition animations */
	overflow: hidden;
}

.all-programs-grid-v2__swiper-container {
	/* .swiper-container */
	margin-left: auto;
	margin-right: auto;
	position: relative;
	overflow: hidden;
	list-style: none;
	/* Added vertical padding in order to
	let THE active nav-tab to expand without being cut by the
	overflow: hidden defined in this class. */
	padding: 22px 0;
	z-index: 1;
}

.all-programs-grid-v2__swiper-button-next, .all-programs-grid-v2__swiper-button-prev {
	background-color: #efeef0;
	color: #14CC60;

	position: absolute;
	width: calc(var(--all-programs-grid-v2__swiper-navigation-size) / 58 * 27);
	height: var(--all-programs-grid-v2__swiper-navigation-size);
	top: 50%;
	margin-top: calc(-1 * var(--all-programs-grid-v2__swiper-navigation-size)/ 2);

	cursor: pointer;
	/* To center content in the middle */
	display: flex;
	justify-content: center;
	align-items: center;

	/* The icon size */
	font-size: 1rem;
}
.all-programs-grid-v2__swiper-button-next:hover, .all-programs-grid-v2__swiper-button-prev:hover {
	background-color: #d9dedf;
}

.all-programs-grid-v2__swiper-button-prev {
	border-right: 2px dotted #a7a7a7;
	
	/* Half-circle, Inspiration from:
  https://stackoverflow.com/questions/22415651/half-circle-with-css-border-outline-only
  http://jsfiddle.net/hashem/u78bQ/1/
	*/
	left: calc(-1 * var(--all-programs-grid-v2__swiper-navigation-size) / 58 * 27);
  right: auto;

	/* Half Circle Stuff */
  /* the same value as width of container */
  border-top-left-radius: calc(var(--all-programs-grid-v2__swiper-navigation-size) / 58 * 27);
  border-bottom-left-radius: calc(var(--all-programs-grid-v2__swiper-navigation-size) / 58 * 27);
  border-right: 0;
  padding-right: .25rem;
  justify-content: flex-end;
}

.all-programs-grid-v2__swiper-button-next {
	border-left: 2px dotted #a7a7a7;

	right: calc(-1 * var(--all-programs-grid-v2__swiper-navigation-size) / 58 * 27);
  left: auto;

	/* Half Circle Stuff */
  /* the same value as width of container */
  border-top-right-radius: calc(var(--all-programs-grid-v2__swiper-navigation-size) / 58 * 27);
  border-bottom-right-radius: calc(var(--all-programs-grid-v2__swiper-navigation-size) / 58 * 27);
  border-left: 0;
  padding-left: .25rem;
  justify-content: flex-start;
}

.all-programs-grid-v2__swiper-wrapper {
	/* .swiper-wrapper */
	position: relative;
	width: 100%;
	/* height: 100%; */
	z-index: 1;
	display: flex;
	align-items: center;
	transition-property: transform;
	box-sizing: content-box;
}

.all-programs-grid-v2__swiper-slide {
	/* relative to positionate the ::after element. */
	position: relative;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 0.8rem 0.25rem 1rem 0.25rem;

	/* .swiper-slide */
	-ms-flex-negative: 0;
	flex-shrink: 0;
	/* width: 100%;
	height: 100%; */
	position: relative;
	transition-property: transform;
	transition-duration: 0.15s;
}

.all-programs-grid-v2__hoy-tag {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	background: transparent linear-gradient(180deg, #27FB6B 0%, #14CC60 100%) 0% 0% no-repeat padding-box;
	border-radius: 25px;
	padding: 0.22rem 1rem 0.1rem 1rem;
	color: #fff;
	font-family: Montserrat, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-weight: 700;

	/* prevent font boosting on mobile devices */
  min-height: 1px;
  max-height: 99999px;
}

.all-programs-grid-v2__dayname {
	font-size: 1.5rem;
	color: #333;
	text-transform: uppercase;


	/* prevent font boosting on mobile devices */
  min-height: 1px;
  max-height: 99999px;
}

.all-programs-grid-v2__dayname::first-letter {
	text-transform: uppercase;
}

.all-programs-grid-v2__monthday {
	color: #5d5d5d;

	/* prevent font boosting on mobile devices */
  min-height: 1px;
  max-height: 99999px;
}

.all-programs-grid-v2__monthname {
	text-transform: capitalize;

	/* prevent font boosting on mobile devices */
  min-height: 1px;
  max-height: 99999px;
}

.all-programs-grid-v2__hour {
	font-size: 1.4rem;
	display: inline-block;

	/* prevent font boosting on mobile devices */
  min-height: 1px;
  max-height: 99999px;
}

.all-programs-grid-v2__al-aire-nav {
	display: inline-block;
	margin: 6px 0 0;
	color: #fff;
	background: #f23c3d;
	border-radius: 5px;
	padding: 2px 5px;
	font-size: 14px;
	border-radius: 3px;

	/* prevent font boosting on mobile devices */
  min-height: 1px;
  max-height: 99999px;
}

.all-programs-grid-v2__al-aire {
	display: inline-block;
	margin: 6px 0 0;
	color: #fff;
	background-color: #333333;
	padding: 5px;
	border-radius: 3px;

	/* prevent font boosting on mobile devices */
  min-height: 1px;
  max-height: 99999px;
}

.all-programs-grid-v2__al-aire--link {
	cursor: pointer;
}

.all-programs-grid-v2__al-aire--link:hover {
	color: #fff;
	text-decoration: none;
}

.all-programs-grid-v2__repetition {
	color: #14cc60;
	font-size: 14px;
	font-family: Montserrat, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-weight: 700;

	/* prevent font boosting on mobile devices */
  min-height: 1px;
  max-height: 99999px;
}



/* The next is to make the pipe separator dissapear on new line on small resolutions
in a resilient way. */
/* https://medium.com/@mandy.michael/you-dont-need-a-media-query-for-that-1-inline-content-separators-a9c562a597a6 */
.all-programs-grid-v2__list-horizontal {
	display: flex;
	flex-wrap: wrap;
	overflow-x: hidden;

	/* Just spacings */
	margin-top: 4px;
	line-height: 2;

	/* prevent font boosting on mobile devices */
  min-height: 1px;
  max-height: 99999px;
}

.all-programs-grid-v2__list-item:first-child {
	padding-right: 1rem;	
}

.all-programs-grid-v2__list-item:not(:first-child) {
	border-left: 1px dashed #707070;
	transform: translateX(-0.5rem);
	padding-left: 0.5rem;
}

.all-programs-grid-v2__list-item:not(:first-child):not(:last-child) {
	padding-right: 0.5rem;
}

.all-programs-grid-v2__name-container {
	color: #333;
	font-size: 1.3rem;
	font-weight: bold;

	/* prevent font boosting on mobile devices */
  min-height: 1px;
  max-height: 99999px;
}

.all-programs-grid-v2__accessibility-toltip-parent {
	position: relative;
	display: inline-block;
}

.all-programs-grid-v2__accessibility-icon {
	color: #14cc60;
	font-size: 1.08rem;
	vertical-align: text-bottom;
	line-height: 1.5;

	/* prevent font boosting on mobile devices */
  min-height: 1px;
  max-height: 99999px;
}

.all-programs-grid-v2__accessibility-toltip {
	color:#14cc60;
	font-size: 1rem;
	line-height: 1.5;

	/* prevent font boosting on mobile devices */
  min-height: 1px;
  max-height: 99999px;
}

.all-programs-grid-v2__no-web {
	display: inline-block;
	color: #f23b3d;
	font-size: 1rem;
	font-family: Montserrat, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-weight: 700;
	/* This is an horrible hack to vertical align with accesibility text. */
	padding-top: 4px;

	/* prevent font boosting on mobile devices */
  min-height: 1px;
  max-height: 99999px;
}

.all-programs-grid-v2__link-to {
	/* .btn */
	cursor: pointer;
	display: inline-block;
	font-weight: 400;
	text-align: center;
	vertical-align: middle;
	user-select: none;
	border: 1px solid transparent;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: 0.25rem;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	padding: 0.08rem 0.75rem 0.1rem 0.75rem;

	/* Customizations */
	vertical-align: baseline;
	color: #14CC60;
	border: solid 1px #14CC60;
	border-radius: 18px;

	/* prevent font boosting on mobile devices */
  min-height: 1px;
  max-height: 99999px;
}

.all-programs-grid-v2__link-to:hover {
	text-decoration: none;

	color: #fff;
  background-color: #14CC60;
}

/* Tab specific classes */
.all-programs-grid-v2__nav-tab {
	/* Style nav-tab */
	background-color: #fcfeff;
	cursor: pointer;
	border-radius: 10px;
	border: 1px solid #dadadd;
}

.all-programs-grid-v2__nav-tab:hover {
	background-color: #f7feff;
}

.all-programs-grid-v2__nav-tab--active {
	cursor: default;
	font-weight: bold;
	box-shadow: 1px 1px 10px rgb(0 0 0 / 20%);

	/* Scale the active nav tab,
	scale it's a nightmare for perfect responsiveness in the slide
	and i'm short of time, then i decided to not use as --active indicator. */
	/* transform: scale(1.08); */
	background-color: #f7feff;
}

.all-programs-grid-v2__nav-tab--active.all-programs-grid-v2__nav-tab::after {
	opacity: 1;
}

.all-programs-grid-v2__tab-content {
	display: none;
	transform-origin: top center;
}

.all-programs-grid-v2__tab-content--exit-animation {
	/* @keyframes name | animation-fill-mode | duration | timing-function | delay */
	animation: all-programs-grid-v2__tab-exit-animation forwards 0.25s ease-out;
}

.all-programs-grid-v2__notify-button {
	position: relative;
	outline: none;
	user-select: none;
	background-color: transparent;
	border: none;
	padding: 3px 12px;
	font-weight: 700;
	font-size: 15px;
	border: 1px solid #333;
	color: #333;
	border-radius: 6px;
	vertical-align: text-bottom;
	margin-left: 10px;
}

button.all-programs-grid-v2__notify-button:hover {
    color: #fff;
    background: #333;
}

.all-programs-grid-v2__notify-button:hover {
	/* color: #fff;
	background-color: #14CC60; */
	text-decoration: underline;
}

.all-programs-grid-v2__notify-button:focus {
	outline: none;
	user-select: none;
}

@keyframes all-programs-grid-v2__tab-exit-animation {
	from {
		opacity: 1;
		transform: translate(0px);
	}

	to {
		opacity: 0;
		transform: translate(100px);
	}
}

.all-programs-grid-v2__tab-content--entry-animation {
	/* @keyframes name | animation-fill-mode | duration | timing-function | delay */
	animation: all-programs-grid-v2__tab-entry-animation forwards 0.25s ease-in;
}

@keyframes all-programs-grid-v2__tab-entry-animation {
	from {
		opacity: 0;
		transform: translate(100px);
	}

	to {
		opacity: 1;
		transform: translate(0px);
	}
}

/* Read example about modifiers in here:
https://seesparkbox.com/foundry/bem_by_example. */
.all-programs-grid-v2__tab-content--active {
	display: block;
}

.all-programs-grid-v2__program-container {
	display: flex;
	background: #fff;
}

.all-programs-grid-v2__image-container {
	display: inline-block;
	overflow: hidden;

	/* Element Width: */
	-ms-flex: 0 0 35%;
	flex: 0 0 35%;
	max-width: 35%;
}

.all-programs-grid-v2__info-container {
	display: inline-block;
	vertical-align: top;
	padding: 18px 18px 18px 15px;

	display: flex;
	flex-direction: column;
	justify-content: center;

	/* Element Width: */
	-ms-flex: 0 0 65%;
	flex: 0 0 65%;
	max-width: 65%;
}

.all-programs-grid-v2__description {
	margin-top: 6px;

	/* prevent font boosting on mobile devices */
  min-height: 1px;
  max-height: 99999px;
}

.all-programs-grid-v2__image {
	display: inline-block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.all-programs-grid-v2__no-data {
	margin: 2rem 4rem 3rem 4rem;
	text-align: center;
	padding: 2rem 1.5rem;
	box-shadow: 0px 3px 6px #00000029;
	border: 1px solid #DADADD;
	border-radius: 10px;
}

.all-programs-grid-v2__no-data-title {
	color: #14cc60;
	font-size: 1.2rem;
	font-family: Montserrat, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-weight: 700;
}

.all-programs-grid-v2__no-data-description {
	margin-top: 12px;
	font-size: 1.2rem;
	font-family: Montserrat, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-weight: 500;
}

.all-programs-grid-v2__no-data-al-aire {
	/* .btn */
	cursor: pointer;
	display: inline-block;
	font-weight: 400;
	text-align: center;
	vertical-align: middle;
	user-select: none;
	border: 1px solid transparent;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: 0.25rem;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

	color: #fff;
	background: #f23c3d;
	padding: 2px 5px;
	font-size: 12px;
	vertical-align: text-bottom;
}

.all-programs-grid-v2__no-data-al-aire:hover {
	text-decoration: none;
	color: #fff;
	background: #c82333;
}

.all-programs-grid-v2__featured-title {
	text-align: center;
	margin: 1.2rem 0 0;
	font-size: 1.5rem;
	color: #14cc60;
	font-family: Montserrat, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-weight: 700;
}

.all-programs-grid-v2__featured {
	margin: 1.5em 0 0;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.all-programs-grid-v2__featured-item {
	position: relative;
	width: 100%;
	padding-left: 8px;
	padding-right: 8px;
	margin: 0 0 15px;
}

.all-programs-grid-v2__card {
	background-color: #fdfdfd;
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.11);
	border-radius: 10px;
	overflow: hidden;
}

.all-programs-grid-v2__featured-image {
	width: 100%;
	height: auto;
}

.all-programs-grid-v2__card-text {
	padding: 5px 8px 10px 8px;
}

.all-programs-grid-v2__card-text-title {
	font-family: Montserrat, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-weight: 700;
	color: #5d5d5d;
	font-size: 1.35rem;
}

.all-programs-grid-v2__card-text-hour {
	font-family: Montserrat, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-weight: 500;

	color: #5d5d5d;
	font-size: 1.15rem;
}

/* Extracted from: https://css-tricks.com/accessible-simple-responsive-tables/ */
/* Here I used this thecnique on other project: https://github.com/teleantioquia/the-tree-project-react/blob/master/src/views/Form.js. */

/* Tables
================================== */
.all-programs-grid-v2__table {
	display: flex;
	flex-wrap: wrap;
	margin: 2em 0 3em 0;
	padding: 0;
}

.all-programs-grid-v2__table-cell {
  box-sizing: border-box;
  flex-grow: 1;
  /* Default to full width */
  width: 100%;
  /* Or flex might break */
  overflow: hidden;
  list-style: none;
  /* background: fade(slategrey, 20%); */
	transition: all .1s;
	
	margin-bottom: 2px;
}

.all-programs-grid-v2__table-cell--hour {
	padding: 8px;
	background-color: #333333;
	color: #fff;
	font-family: Montserrat, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-weight: 700;

	/* To center content in the middle */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	/* Width */
	width: 15%;

	/* Borders */
	border-top: 1px solid #dadadd;
	border-left: 1px solid #dadadd;
	border-bottom: 1px solid #dadadd;
}

.all-programs-grid-v2__table-cell--hour-live {
	background-color: #f23b3d;
}

.all-programs-grid-v2__table-cell--program {
	/* Width */
	width: 85%;

	/* Borders */
	border-top: 1px solid #dadadd;
	border-right: 1px solid #dadadd;
	border-bottom: 1px solid #dadadd;
}

/* Borders
==================================== */
.all-programs-grid-v2__table-cell:first-child {
	border-top-left-radius: 10px;
}

.all-programs-grid-v2__table-cell:nth-child(2) {
	border-top-right-radius: 10px;
}

/* The cell before last cell: https://stackoverflow.com/questions/9227932/css-last-child-1. */
.all-programs-grid-v2__table-cell:nth-last-child(2) {
	border-bottom-left-radius: 10px;
}

.all-programs-grid-v2__table-cell:last-child {
	border-bottom-right-radius: 10px;
}

/* Responsive
==================================== */

@media (max-width: 575.98px) {
	.all-programs-grid-v2__swiper-button-next,
	.all-programs-grid-v2__swiper-button-prev {
		display: none;
	}

	/* 1 columns for the table. */
	.all-programs-grid-v2__table {
		display: block;
	}

	.all-programs-grid-v2__table-cell {
		width: 100% !important;
		margin-bottom: 0;
	}

	.all-programs-grid-v2__table-cell--head {
		display: none;
	}

	.all-programs-grid-v2__table-cell--hour {
		/* !important because the all-programs-grid-v2__table-cell selector for apply borders
		has too much specificity */
		border: none !important;
	}

	.all-programs-grid-v2__table-cell--program {
		margin-bottom: 30px;

		/* Update Borders */
		border-top: none;
		border-left: 1px solid #dadadd;
		border-right: 1px solid #dadadd;
		border-bottom: 1px solid #dadadd;
	}

	/* Remove border radius where required */
	.all-programs-grid-v2__table-cell:first-child {
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}
	
	.all-programs-grid-v2__table-cell:nth-child(2) {
		border-top-right-radius: 0;
	}
	
	/* The cell before last cell: https://stackoverflow.com/questions/9227932/css-last-child-1. */
	.all-programs-grid-v2__table-cell:nth-last-child(2) {
		border-bottom-left-radius: 0;
	}
	
	.all-programs-grid-v2__table-cell:last-child {
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
	}

	.all-programs-grid-v2__swiper-button-next, .all-programs-grid-v2__swiper-button-prev {
		/* Width */
		-ms-flex: 0 0 10%;
		flex: 0 0 10%;
		max-width: 10%;
	}
}

@media (max-width: 991.98px) {
	.all-programs-grid-v2__program-container {
		display: block;
	}

	.all-programs-grid-v2__image-container {
		display: block;
		max-width: none;
	}

	.all-programs-grid-v2__info-container {
		display: block;
		max-width: none;
		flex: initial;
	}

	.all-programs-grid-v2__image {
		width: 100%;
		height: auto;
		/* This is the deafult. */
		object-fit: fill;
	}
}

@media (min-width: 768px) {
	.all-programs-grid-v2__featured-item {
		-ms-flex: 0 0 33.33%;
    flex: 0 0 33.33%;
    max-width: 33.33%;
	}
}