body {
	color: white !important;
}

p {
	font-size: 20px;
}

.full-height {
	height: 100vh !important;
	padding: 40px;
}

.bg-main {
	background: url('../images/bg-primary.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.bg-sawah {
	background: url('../images/bg-primary.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.bg {
	background: url('../images/bg-primary.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.bg-welcome {
	background-color: #fff9ec;
}

.mt-2 {
	margin-top: 2em;
}

.logo {
	max-width: 200px;
}

.menu-main {
    position: fixed;
    bottom: 40px;
    width: 100%;
    left: 0;
}

.controller {
    position: fixed;
    bottom: 20px;
    width: 100%;
    left: 0;
	padding-left: 40px
}

.mb-0 {
	margin-bottom: 0px;
}

.item {
	padding: 30px;
	/*background: blue;*/
}

.center {
	opacity: 1;
}

.a-style-none {
	color: white;
}

.a-style-none:hover {
	color: white;
	text-decoration: none;
}

.category-channel {
	padding: 10px;
}

.category-channel:hover {
	cursor: pointer;
	background: #fff;
	color: #000;
}

.category-channel:focus {
	background: #fff;
	color: #000;
}

.container-text {
	width: 80%; 
	margin: 0px auto; 
	padding: 5px; 
	background: rgba(0,0,0,0.6);
}

.container-text-100 {
	width: 100%; 
	margin: 0px auto; 
	padding: 5px; 
	background: rgba(0,0,0,0.6);
}

.opacity-black .left {
	position: absolute;
    height: 20%;
    width: 30%;
    color: black;
    z-index: 99;
    bottom: 80px;
    left: 0;
    background-color: rgba(0,0,0,0.6);
}

.opacity-black .right {
	position: absolute;
    height: 20%;
    width: 30%;
    color: black;
    z-index: 99;
    bottom: 80px;
    right: 0;
    background-color: rgba(0,0,0,0.6);
}

.v-none {
	display: none;
}

.channel {
	margin: 0 0 15px 0;
	padding-left: 10px;
	padding-right: 10px;
}

.channel a > img {
	border-radius: 20px;
}

/*.channel > .overlay-black {
    height: 100%;
    width: 95%;
    color: black;
    z-index: 99;
    position: absolute;
    top: 0;
    background: rgb(0 0 0 / 50%);
	border-radius: 20px;
}*/

.channel { transition: all .5s ease-in-out; }
.channel a > img:hover { 
	transform: translateY(-10px); 
	box-shadow: 10px 10px 5px black;
}
.channel a > img:focus { 
	transform: translateY(-10px); 
	box-shadow: 5px 5px 5px black;
}

.container-channels {
	overflow-y: scroll;
	overflow-x: hidden;
	height: 75vh;
}

::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}