/*================================================================================
	Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
	Version: 1.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
.btn-pointer{
	cursor: pointer;
}
.login-btn{
	width: 100%;
	height: 100%;
	max-width: 100px;
	min-width: 100px;
	padding: 2px;
	border: 2px solid #1363D1;
	border-radius: 3px;
	color: #1363D1;
	cursor: pointer;
}
.register-btn{
	width: 180px;
	height: 40px; 
	background-color: #C90813;
	position: absolute;
	right: 3.5rem;
	text-align: center;
	line-height: 40px;
	color: white;
	font-size: 14px;
	cursor: pointer;
}
.txtandlogin{
    text-align: center;
    width: 100%;
    padding: 10px;
    font-size: 18px;
    color: black;
    text-align: left;
    border-bottom: 1px solid #c3c3c3;
  }
.sel-item{
    text-align: center;
    width: 100%;
    padding: 10px;
    font-size: 18px;
    color: black;
    cursor: pointer;
  }
  .sel-item:hover {
    background-color: #c1c1c1;
  }
  .active{
    background-color: #DCDCDC;
  }
  .intro-title{
    width: 100%;
    padding: 15px;
    font-size: 18px;
    line-height: 18px;
    color: #0A0A0A;
  }
   .slideshow {
    width: 100%;
    height: 100%;
  }

  .slideshow a {
    position: absolute;  
    width: 100%; 
    height: 100%; 
  }
  .slideshow a img {
    width: 100%;
    height: 100%;
    /*background-size: 100% 100%;*/
    /*padding: 10px;*/
    /*border: 1px solid #ccc;*/
    background: #fff;
  }

  .slideshow a:nth-of-type(1) {
    
    animation-name: fader;
    animation-delay: 2s;
    animation-duration: 1s;
    z-index: 100;
  }
  .slideshow a:nth-of-type(2) {
    z-index: 90;
    
  }
  .slideshow a:nth-of-type(n+3) {
    display: none;
  }

  @keyframes fader {
    from { opacity: 1.0; }
    to   { opacity: 0.0; }
  }

.slideshow a::after {
    position: absolute;
    left: 0;
    bottom: 30px;
    /*padding: 2px 0;*/
    width: 100%;
    background: rgba(0,0,0,0.5);
    text-align: center;
    content: attr(title);
    font-size: 1.1em;
    color: #fff;
  }
.video {
    overflow: hidden;
    width: 100%;
    min-width: 635px;
    min-height: 360px;
    padding: 0;
    margin: 0 auto;
    background: #000;
    border: #000 solid 1px;
    -moz-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3);
}
.video .video-holder {
    position: relative;
    
    height: 100%;
    overflow: hidden;
}
.video .youtube {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.youtube .play-button, .youtube .play-button:before {
    top: 50%;
    left: 50%;
    transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe, .youtube .play-button, .youtube .play-button:before {
    position: absolute;
}
.youtube .play-button {
    cursor: pointer;
}
.youtube .play-button {
    width: 90px;
    height: 60px;
    background-color: #333;
    box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
    -moz-box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
    -webkit-box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
    z-index: 999;
    opacity: 0.8;
    border-radius: 6px;
}
.youtube .play-button:before {
    content: "";
    border-style: solid;
    border-width: 15px 0 15px 26px;
    border-color: transparent transparent transparent #fff;
}
.color60{
	color: #606060;
}
form.example input[type=text] {
  padding: 5px;
  font-size: 17px;
  border: 1px solid #CCCCCC;
  float: left;
  width: 80%;
  background: #ffffff;
  border-top-left-radius: 3px; 
  border-bottom-left-radius: 3px; 
  box-shadow:0px 1px 1px 1px #e5e5e5;
}

form.example button {
  float: left;
  width: 10%;
  padding: 5px;
  background: #F8F8F8;
  color: white;
  font-size: 17px;
  border: 1px solid #CCCCCC;
  border-left: none;
  cursor: pointer;
  border-top-right-radius: 3px; 
  border-bottom-right-radius: 3px; 
  box-shadow:0px 1px 1px 1px #e5e5e5;
}

form.example button:hover {
  background: #0b7dda;
}

form.example::after {
  content: "";
  clear: both;
  display: table;
}
.channel-profile{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	vertical-align: middle;
}
.recommand-channel{
	font-size: 15px;
	line-height:18px;
	color: #606060;
}

.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 14px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: -3px;
  bottom: -3px;
  background-color: #1363D1;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #ccc;
}

input:focus + .slider {
  box-shadow: 0 0 1px #ccc;
}

input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/*playback page css*/

.youtube-txt{
	font-size: 20px;
	font-family: fantasy;
	color: black;
}
.JP-txt{
	font-size: 12px;
	font-weight: bold;
	position: absolute;
	margin-top: 5px;
	margin-left: 5px;
}
td, th{
	text-align: center;
}

.login_win {
    margin-left: auto;
    margin-right: auto;
    background-color: silver;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 10px;
}