@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');

body {
	font-family: 'Source Sans Pro', sans-serif;
	background: #DCE2E9;
	background-image: url("img/stone.jpg");
	background-repeat: repeat;
}

@media only screen and (max-width: 580px) {
	.video-wrapper, .text-wrapper { width:90%!important; position:absolute!important }
	.inner-text { padding: 5px; }
	#ytplayer { height: 30vh; }
	.content { padding: 10px !important; }
	.login	{ padding: 75px !important;  }
	.small-hide { display: none !important;	}
	input, .btn, .btn-2 { font-size: 1em !important; }
	h1 { font-size: 1.6em !important; letter-spacing: 0px !important; }
	.notice-text { font-size: 1.5em !important; top:47% !important; }
	.placeholder {	max-height:40vh !important; }
	.audio-img 	{ height: 25px; }
}

@media only screen and (orientation: portrait) {
	.landscape { display: none; }
}

@media only screen and (orientation: landscape) {
	.portrait { display: none; }
}

.content 	 	{ padding: 25px; text-align: center;  }
.login 		 	{ padding: 90px; text-align: center; }
.notice-text	{ position:absolute; top:53%; left:50%; transform:translate(-50%,-50%); font-size: 2vw; width: 90%;}
.error-text 	{ font-size: 1em !important; letter-spacing: 0px !important; color: red; }
.btn:hover:not([disabled]), .btn-2:hover:not([disabled])   	{ opacity: 1; color: #FF1053; }
.medium-text 	{ font-size: 0.8em; color: #6e6e6e }
.audio-img 		{ padding:10px; max-height: 50px; cursor: pointer; }
.alert-danger	{ position:relative; padding:.75rem 1.25rem; margin-bottom:1rem; border:1px solid transparent; text-align: center;
					border-radius:.25rem; color:#721c24; background-color:rgba(248, 215, 218, 0.8);border-color:#f5c6cb }

.btn {
	border: none;
	color: #000;
	padding: 16px 32px;
	text-align: center;
	background-color: #DCE2E9;
	opacity: 0.7;
	transition: 0.3s;
	display: block;
	cursor: pointer;
	font-size: 22px;
	border-radius: 5px;
}

button.btn:disabled {
	background: #dddddd;
  color: white;
  cursor: not-allowed;
  pointer-events: all !important;
}

.logout {
	padding-top: 20px;
	width: 100%;
	display: block;
	text-align: center;
}

.btn-2 {
	border: none;
	text-decoration: none;
	color: #000;
	padding: 16px 42px;
	text-align: center;
	background-color: #DCE2E9;
	opacity: 0.7;
	transition: 0.3s;
	display: block;
	cursor: pointer;
	font-size: 22px !important;
	border-radius: 5px;
    display: inline-block;
    margin:0 10px;	
}

.silat-placeholder {
	background-image: url("img/Silat.jpg");
	background-size: contain;
	height: 60vh;
	background-repeat: no-repeat;
	background-position: center;
	text-align: center;
}

.placeholder {
	background-image: url("img/placeholder.jpg");
	background-size: contain;
	height: 60vh;
	background-repeat: no-repeat;
	background-position: center;
	text-align: center;
}

.corner {
    position: absolute;
    background-image: url("img/corner.png");
    background-size: cover;
    width: 110px;
    height: 110px;
}
.TL { top: 10px; left: 10px; transform: rotate(90deg); }
.TR { top: 10px; right: 10px; transform: rotate(180deg); }
.BL { bottom: 10px; left: 10px; }
.BR { bottom: 10px; right: 10px; transform: rotate(270deg); }
.black { filter:invert(60%); -webkit-filter:invert(60%) }

.wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -230px 0 0 -180px;
	background-color: rgba(134, 143, 170, 0.85);
	text-align: center;
	border-radius: 10px;
	border: 3px solid rgba(174, 143, 165, 0.7);
}

.text-wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 90%;
	width: 70%;
	overflow-y: scroll;
	transform: translate(-50%, -50%);
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 15px;
	border: 3px solid rgba(174, 143, 165, 0.7);
}

.inner-text { padding: 25px; }

.video-wrapper {
	overflow:auto;
	position: absolute;
	top: 50%;
	left: 50%;
	min-height: 50%;
	min-width: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(134, 143, 170, 0.8);
	border-radius: 15px;
	border: 3px solid rgba(174, 143, 165, 0.7);
}

#ytplayer { width: 100%; height: 50vh; }

h1 {
	white-space: nowrap; 
  	overflow: hidden;    
	color: #fff;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	letter-spacing: 1px;
	text-align: center;
	font-size: 2em ;
	margin-left: auto;
	margin-right: auto;
}
h2,h3,h4,h5 { text-align: center; }
h2, h3 { font-size:1.5em }
h3 { color: #FF1053 !important; }
.link, .link:visited { color: #FFFFFF; }
.link:hover { background-color: #fff8f2; color: #FF1053 !important; }

.wrapper>.login>h1 { animation: animated-text 2s steps(15,end) 1s 1 normal forwards; }
@keyframes animated-text{ from{width:0%} to{width:100%} }

input.InnerTextInput {
	color: black;
	background: rgba(255, 255, 255, 0.5);
	width: 80%;
}

input {
	text-align: center;
	width: 100%;
	margin-bottom: 10px;
	background: rgba(0, 0, 0, 0.2);
	border: none;
	outline: none;
	padding: 15px 0 15px 0;
	margin-bottom: 25px;
	color: #DCE2E9;
	font-size: 20px;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(0, 0, 0, 0.3);
	border-radius: 4px;
	box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.2), 0 1px 1px rgba(255, 255, 255, 0.2);
	-webkit-transition: box-shadow .5s ease;
	-moz-transition: box-shadow .5s ease;
	-o-transition: box-shadow .5s ease;
	-ms-transition: box-shadow .5s ease;
	transition: box-shadow .5s ease;
}

input::placeholder { color: rgba(255, 255, 255, 0.6); }

input:focus {
	box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.4), 0 1px 1px rgba(255, 255, 255, 0.2);
	background: rgba(0, 0, 0, 0.3);
}

table {
  	border-collapse: collapse;
  	width: auto;
	margin-left: auto;
	margin-right: auto;
}

td, th {
  border: 1px solid #000000;
  text-align: left;
  padding: 8px;
}

td:nth-child(even) {
  font-weight: bold;
}

td:nth-child(odd) {
  background-color: #dddddd;
}

.link-btn  {
  display: inline-block;
  border-radius: 4px;
  background-color: #008CBA;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 20px;
  padding: 7px 25px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  vertical-align:middle
}

.link-btn span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.link-btn span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.link-btn:hover span { padding-right: 25px }
.link-btn:hover span:after { opacity: 1; right: 0 }

#content-header {
	height: 120px;
}

.plyr__video-embed iframe {
  pointer-events: none !important;
}

.plyr__control--overlaid svg {
  height: 2em;
  width: 2em;
}

#player {
  --plyr-color-main: #1ac266;
}