//
// T4 Components
// ---------------------------------------------

//
// Banners
.t4-banner {
  text-align: center;
  background: $gray-100;
}

// Element Toggle Dark/Light
.ja-dark-mode {
	align-items: center;
	cursor: pointer;
	display: flex;
	line-height: 1;
}

.svg-light,
.svg-dark {
	fill: var(--mainnav-link-color);
}

.dark-mode-status {
	background: var(--gray-200);
	border-radius: 32px;
	position: relative;
	margin: 0 10px;
	height: 16px;
	width: 32px;

	span {
		background: var(--gray-500);
		border-radius: 50%;
		position: absolute;
		left: 3px;
		top: 3px;
		height: 10px;
		width: 10px;
		transition: 500ms all;
	}
}

// Active Dark
.dark-active {
	.dark-mode-status {
		span {
			left: 19px;
		}
	}

	.mode-light {
		opacity: 0.2;
	}
}

//
// Bootstraps Components
// ---------------------------------------------
.container {
	.container,
	.container-fluid {
		padding-left: 0;
		padding-right: 0;
	}
}

.ja-video.embed-responsive-item {
  object-fit: cover;
  object-position: center center;
}


 