body{
	margin: 0;
	padding: 0;
}

.bgpimpinan{
	margin: 0;
	padding: 0;
	background: linear-gradient(135deg, #d1ccc0, #33d9b2);
}
.bglogin{
	background-image: url(assets/gambar/bg.jpg) no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	-ms-background-size: cover;
	-moz-background-size: cover;
	background-color: #cccccc;
	/*memastikan muncul*/
	height: 678px;
	  }
	  
.bgadmin{
	margin: 0;
	padding: 0;
	background: linear-gradient(270deg, #dfe6e9,#fd79a8);
}
.bgkeuangan{
	margin: 0;
	padding: 0;
	background: linear-gradient(270deg, #26de81, #E96D71);
}
.box{
	/* background: #808e9b; */
	background: #ced6e0;
	width: 400px;
	height: 500px;
	border-radius: 20px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 10px 10px #888888;
	/* filter: alpha(opacity=30);
	opacity: 70%; */	
}
.cardlogin{
	/* background: #808e9b; */
	border-radius: 10px;
	margin: 100px auto;
	width: 400px;
	padding: 0px;
	background: #fff;
	box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
	opacity: 0.9;
}
.box2{
	background: #dfe6e9;
	width: 400px;
	height: 500px;
	border-radius: 10px;
	text-align: left;
	/* margin-left: auto; */
	margin-right: auto;
	/* filter: alpha(opacity=30);
	opacity: 70%; */	
}
.box h2{
	color: white;
	padding-top: 10px;
	font-size: 30px;
	text-align: center;
}
.box h1{
	color: black;
	padding-top: 10px;
	font-size: 20px;
	text-align: center;
}
.box form{
	text-align: center;

}
.box form div{
	padding-top: 20px;
}
.cardlogin img{
  display: block;
  margin: 10px auto;
  width: 160px;
  height: 150px;
}
.input{
	background:#fff;
	width: 200px;
	height: 40px;
	text-align: center;
	/* border: 2px solid #7fcc20; */
	border: 2px solid #1e90ff;
	border-radius: 20px;
	color: #000;
	outline: none;
}

.button1{
	margin-top: 10px;
	background:#0fbcf9;
	width: 70px;
	height: 40px;
	text-align: center;
	border: 2px solid #0fbcf9;
	border-radius: 20px;
	color: #000;
	cursor: pointer;
	outline: none;
}
/* .input:hover{
	border-color: #81ecec; 
	background: #000;
	width: 300px;
	transition: 0.9s;
} */
.box #registrasi{
	font-family: monospace;
}

.button1:hover{
	transition: 0.9s;
	background: #81ecec;
	color: #000;
}

.header{
	width: 100%;
	height: 100px;
	background: #0be881;
	display: block;
}
.header img{
	position: absolute;
	left: 70px;
	width: 100px;
}
.header h1{
	padding-top: 25px;
	text-align: center;
	color: #000000;
	font-family: Comic Sans MS;
	font-size: 34px;
	
}
.navbar-brand{
	font-size: 30px !important;
	font-weight: 100 !important;
	font-family: Comic Sans MS;
	color: black !important;
}
.collapse ul li a{
	font-size: 20px !important;
}
.collapse ul li a:hover{
	color: black !important;
	transition: 0.5s;
}
.dropdown-menu a:hover{
	color: black !important;
}

/* Buat foto */
div.gallery {
	border: 1px solid #ccc;
  }
  
  div.gallery:hover {
	border: 1px solid #777;
  }
  
  div.gallery img {
	width: 100%;
	height: auto;
  }
  
  div.desc {
	padding: 15px;
	text-align: center;
  }
  
  * {
	box-sizing: border-box;
  }
  
  .responsive {
	padding: 0 6px;
	float: left;
	width: 24.99999%;
  }
  

/* Create three equal columns that floats next to each other */
.column {
	float: left;
	width: 33.33%;
	padding: 15px;
  }
  
  /* Clear floats after the columns */
  .row:after {
	content: "";
	display: table;
	clear: both;
  }

  /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
  @media screen and (max-width:600px) {
	.column {
	  width: 100%;
	}
  }

  @media only screen and (max-width: 700px) {
	.responsive {
	  width: 49.99999%;
	  margin: 6px 0;
	}
  }
  
  @media only screen and (max-width: 500px) {
	.responsive {
	  width: 100%;
	}
  }
  
a.button#hps_kelasguru{
    color: #fc5c65;
}
a.button#hps_kelasguru:hover{
    color: #d63031 !important;
}
a.button#tbh_kelasmurid{
    color: #45aaf2;
}
a.button#tbh_kelasmurid:hover{
    color: #2d98da !important;
}
a.button#tbh_materi{
    color: #45aaf2; 
}
a.button#tbh_materi:hover{
    color: #2d98da !important;
}
.btn_inputfile{
    background: #f8c25c;
    color: #242121;
    font-weight: 500;
}

.btn_inputfile:hover{
    background: #ffdc8e;
    color: #242121;
    font-weight: 500;
}
/* .print input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
} */

#info-alamat{
    color: #18A4E0;
}

#info-alamat:hover{
    
    color: #7DC9E7 ;
}

#info-alamat:focus{
    box-shadow: 0 0 0 0 !important;
}

a.button#tbh_fileMateri{
    color: #45aaf2; 
}
a.button#tbh_fileMateri:hover{
    color: #2d98da !important;
}
a.button#hps_fileMateri{
    color: #fc5c65;
}
a.button#hps_fileMateri:hover{
    color: #d63031 !important;
}

a.button#hps_penilaian{
    color: #fc5c65;
}
a.button#hps_penilaian:hover{
    color: #d63031 !important;
}


a.button#lihat_kelasguru{
    color: green;
}
a.button#lihat_kelasguru:hover{
    color: #10ac84 !important;
}
a.button#edit_belajar{
    color: #FFC312;
}
a.button#edit_belajar:hover{
    color: #F79F1F !important;
}

/* Problem Solved padding-right:17 */
body {
	padding-right:0 !important;
  }
  .modal-open {
	overflow:auto;
	padding-right:0 !important;
  }

 /* Floating Halaman Login  */
  /* .input-formlogin {
	display: flex;
	flex-direction: column-reverse;
	margin:  0;
  }
  
  .inputlogin, .labellogin {
	transition: 0.3s ease;
  }
  
  .labellogin {
	
	transform: translate(9px, -0px) scale(1.02);
	margin-bottom:4px;
	cursor: text;
	transform-origin: left top;
	color: #757575;
	position: absolute;
	
  }
  
  .inputlogin {
	font-size: 1.2em;
	padding: 0px 0px 0px 0px;
	border: none;
	border-bottom: 2px solid #9e9e9e;
	outline: none;
	border-radius: 5px 5px 0px 0px;
	width: 350px;
  }
  
  .inputlogin::placeholder {
	opacity: 0;
  }
  
  .inputlogin:focus, .inputlogin:not(:placeholder-shown) {
	border-bottom: 2px solid #1B9CFC;
  }
  
  .inputlogin:not(:placeholder-shown) ~ .labellogin, .inputlogin:focus ~ .labellogin {
	transform: translate(1px, -23px) scale(0.8);
	padding-left: 0px;
	color: #1B9CFC;
  } */

  /* FLOATING HALAMAN INPUT LOGIN */
  .inputlogin {
	font-size: 18px;
	padding: 10px 10px 10px 5px;
	display: block;
	width: 315px;
	border: none;
	border-bottom: 1px solid #757575;
  }
  
  .inputlogin:focus {
	outline: none;
  }
  
  .labellogin {
	color: #999;
	font-size: 18px;
	font-weight: normal;
	position: absolute;
	pointer-events: none;
	left: 5px;
	top: 10px;
	transition: 0.2s ease all;
	-moz-transition: 0.2s ease all;
	-webkit-transition: 0.2s ease all;
  }
  
  .inputlogin:focus ~ .labellogin,
  .inputlogin:valid ~ .labellogin {
	top: -20px;
	font-size: 14px;
	color: #4285f4;
  }
  
  .bar {
	position: relative;
	display:block;
	width:315px;
  }
  
  .bar:before,
  .bar:after {
	content: '';
	height: 2px;
	width: 0;
	bottom: 1px;
	position: absolute;
	background: #4285f4;
	transition: 0.2s ease all;
	-moz-transition: 0.2s ease all;
	-webkit-transition: 0.2s ease all;
  }
  
  .bar:before {
	left: 50%;
  }
  
  .bar:after {
	right: 50%;
  }
  
  .inputlogin:focus ~ .bar:before,
  .inputlogin:focus ~ .bar:after {
	width: 50%;
  }
  
  .highlight {
	position: absolute;
	height: 60%;
	width: 100px;
	top: 25%;
	left: 0;
	pointer-events: none;
	opacity: 0.5;
  }
  
  .inputlogin:focus ~ .highlight {
	-webkit-animation: inputHighlighter 0.3s ease;
	-moz-animation: inputHighlighter 0.3s ease;
	animation: inputHighlighter 0.3s ease;
  }
  
  /* animations */
  @-webkit-keyframes inputHighlighter {
	from { background: #4285f4; }
	to   { width: 0; background: transparent; }
  }
  @-moz-keyframes inputHighlighter {
	from { background: #4285f4; }
	to   { width: 0; background: transparent; }
  }
  @keyframes inputHighlighter {
	from { background: #4285f4; }
	to   { width: 0; background: transparent; }
  }

  .buttonk1 {background-color: #00b894; color: white;} /* Blue */
  .buttonk2 {background-color: #00cec9; color: white;} /* Blue */
  .buttonk3 {background-color: #0984e3; color: white;} /* Blue */
  .buttonk4 {background-color: #6c5ce7; color: white;} /* Blue */
  .buttonk5 {background-color: #d63031; color: white;} /* Blue */
  .buttonk6 {background-color: #ff7675; color: white;} /* Blue */
  .buttonk7 {background-color: #fd79a8; color: white;} /* Blue */
  .buttonk8 {background-color: #6D214F; color: white;} /* Blue */
  .buttonk9 {background-color: #4c53af; color: white;} /* Blue */
  .buttonk10 {background-color: #a34caf; color: white;} /* Blue */
  .buttonk11 {background-color: #FC427B; color: white;} /* Blue */
  .buttonk12 {background-color: #EAB543; color: white;} /* Blue */
  .buttonk13 {background-color: #0a3d62; color: white;} /* Blue */
  .buttonk14 {background-color: grey; color: white;} /* Blue */