a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

@font-face {
  font-family: digital;
  src: url(/fonts/digital.ttf);
}
@font-face {
  font-family: ramping;
  src: url(/fonts/simfang.ttf);
}
.ramping{font-family:ramping;}
.fbold{font-weight:bold;}
.layarhitam{
	position:absolute;top:0;left:0;z-index:999;
	width:100%;height:100%;overflow:hidden;
	display:flex;align-items:center;justify-content:center;
	background-color:rgba(0,0,0,0.75);
}
.layarputih{
	position:absolute;top:0;left:0;z-index:999;
	width:100%;height:100%;overflow:hidden;
	display:flex;align-items:center;justify-content:center;
	background-color:rgba(255, 255, 255, 0.75);
}
.center-screen {
	position: fixed;
	top: 50%;
	left: 50%;
	/* bring your own prefixes */
	transform: translate(-50%, -50%);
	opacity:1;
}

.loading-page{
	width:100%;
	height:100%;
	position:absolute;
	z-index:99999999;
	top:0;
	background-color:green;
	background: rgb(0, 0, 0); /* Fallback for older browsers without RGBA-support */
    background: rgba(0, 0, 0, 0.5);
}

.baloontip {
    position: relative;
    display: inline-block;
    --border-bottom: 1px dotted black;
}

.baloontip .baloontiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 99999;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
	opacity:0.7;
}

.baloontip .baloontiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.baloontip:hover .baloontiptext {
    visibility: visible;
	--display:block;
}

.header-style{
	background-color:aliceblue;
	font-family:ramping;
}
.tombol-mini{
	padding:2px;
	padding-left:3px;
	height:25px;
}
.warna-balok{
	background-color:#8d9db2;
}
.paragraf1baris{
	text-overflow: ellipsis; /* will make [...] at the end */
	white-space: nowrap; /* paragraph to one line */
	overflow:hidden; /* older browsers */
}
--.hover-zoom{transition:0.1s}
.hover-zoom:hover{transform:scale(1.3);cursor: pointer;}
.hover-contrast:hover{filter:contrast(120%);}
.hover-bold:hover{font-weight:bold;}
.hover-back2-orange:hover{
	background: orange;
	background: -moz-linear-gradient(top, orange 0%, #F9FFF5 50%, orange 100%);
	background: -webkit-linear-gradient(top, orange 0%, #F9FFF5 50%, orange 100%);
	background: linear-gradient(to bottom, orange 0%, #F9FFF5 50%, orange 100%);
	color:brown;
}
.hover-back2-grey:hover{
	background: grey;
	background: -moz-linear-gradient(top, grey 0%, #F9FFF5 50%, grey 100%);
	background: -webkit-linear-gradient(top, grey 0%, #F9FFF5 50%, grey 100%);
	background: linear-gradient(to bottom, grey 0%, #F9FFF5 50%, grey 100%);
}
.hover-back2-lightgrey:hover{
	background: grey;
	background: -moz-linear-gradient(top, lightgrey 0%, #F9FFF5 50%, lightgrey 100%);
	background: -webkit-linear-gradient(top, lightgrey 0%, #F9FFF5 50%, lightgrey 100%);
	background: linear-gradient(to bottom, lightgrey 0%, #F9FFF5 50%, lightgrey 100%);
}
.hover-lightgrey:hover{
	background: lightgrey;
}
.hover-grey:hover{
	background: lightgrey;
}
.darkgrey{background-color:#404040;color:white;}
.bar-black{background: linear-gradient(to bottom, black 0%, #999999 100%);color:#ffffff;}
.bar2-black{
	background: black;
	background: -moz-linear-gradient(top, black 0%, #999999 50%, black 100%);
	background: -webkit-linear-gradient(top, black 0%, #999999 50%, black 100%);
	background: linear-gradient(to bottom, black 0%, #999999 50%, black 100%);
}

.back2-grey{
	background: grey;
	background: -moz-linear-gradient(top, grey 0%, #F9FFF5 50%, grey 100%);
	background: -webkit-linear-gradient(top, grey 0%, #F9FFF5 50%, grey 100%);
	background: linear-gradient(to bottom, grey 0%, #F9FFF5 50%, grey 100%);
}
.back2-lightgrey{
	background: lightgrey;
	background: -moz-linear-gradient(top, lightgrey 0%, #F9FFF5 50%, lightgrey 100%);
	background: -webkit-linear-gradient(top, lightgrey 0%, #F9FFF5 50%, lightgrey 100%);
	background: linear-gradient(to bottom, lightgrey 0%, #F9FFF5 50%, lightgrey 100%);
}
.back2-orange{
	background: orange;
	background: -moz-linear-gradient(top, orange 0%, #F9FFF5 50%, orange 100%);
	background: -webkit-linear-gradient(top, orange 0%, #F9FFF5 50%, orange 100%);
	background: linear-gradient(to bottom, orange 0%, #F9FFF5 50%, orange 100%);
	color:brown;
}
.back2-blue{
	background: blue;
	background: -moz-linear-gradient(top, blue 0%, #F9FFF5 50%, blue 100%);
	background: -webkit-linear-gradient(top, blue 0%, #F9FFF5 50%, blue 100%);
	background: linear-gradient(to bottom, blue 0%, #F9FFF5 50%, blue 100%);
}
.back2-blue2{
	background: #4d4dff;
	background: -moz-linear-gradient(top, #4d4dff 0%, #F9FFF5 50%, #4d4dff 100%);
	background: -webkit-linear-gradient(top, #4d4dff 0%, #F9FFF5 50%, #4d4dff 100%);
	background: linear-gradient(to bottom, #4d4dff 0%, #F9FFF5 50%, #4d4dff 100%);
}
.back2-bluehead{
	color:#0073e6;
	background: #66b3ff;
	background: -moz-linear-gradient(top, #66b3ff 0%, #F9FFF5 50%, #66b3ff 100%);
	background: -webkit-linear-gradient(top, #66b3ff 0%, #F9FFF5 50%, #66b3ff 100%);
	background: linear-gradient(to bottom, #66b3ff 0%, #F9FFF5 50%, #66b3ff 100%);
}
.back2-lightblue{
	color:#006699;
	background: lightblue;
	background: -moz-linear-gradient(top, lightblue 0%, #F9FFF5 50%, lightblue 100%);
	background: -webkit-linear-gradient(top, lightblue 0%, #F9FFF5 50%, lightblue 100%);
	background: linear-gradient(to bottom, lightblue 0%, #F9FFF5 50%, lightblue 100%);
}
.back2-black{
	background: black;
	background: -moz-linear-gradient(top, black 0%, #F9FFF5 50%, black 100%);
	background: -webkit-linear-gradient(top, black 0%, #F9FFF5 50%, black 100%);
	background: linear-gradient(to bottom, black 0%, #F9FFF5 50%, black 100%);
}
.back2-brown{
	background: #803300;
	background: -moz-linear-gradient(top, #803300 0%, #F9FFF5 50%, #803300 100%);
	background: -webkit-linear-gradient(top, #803300 0%, #F9FFF5 50%, #803300 100%);
	background: linear-gradient(to bottom, #803300 0%, #F9FFF5 50%, #803300 100%);
	color:#803300;
}
.backx-brown{background: linear-gradient(to bottom, #fdf3e7 0%, #803300 50%);color:#fdf3e7}
.backx-darkbrown{background: linear-gradient(to bottom, #fdf3e7 0%, #4d1f00 50%);color:#fdf3e7}
.back-coffee{background: linear-gradient(to bottom, #EE942D 0%, #fdf3e7 90%);color:#660011}
.back-brown{background: linear-gradient(to bottom, #803300 20%, #fdf3e7 150%);color:#fdf3e7}
.back-pink{background: linear-gradient(to bottom, #ff6666 0%, #ffccff 90%);color:#660011}
.back-red{background: linear-gradient(to bottom, #ff0000 0%, #ffffff 110%);}
.back-green{background: linear-gradient(to bottom, #8BC347 0%, #ffffff 100%);color:#507425;}
.back-orange{background: linear-gradient(to bottom, #ffa500 0%, #ffffff 100%);color:#805300;}
.back-yellow{background: linear-gradient(to bottom, #ecec13 0%, #ffffff 100%);color:#808000;}
.back-blue{background: linear-gradient(to bottom, #3333cc 0%, #ffffff 110%);color:#003366;}
.back-blue2{background: linear-gradient(to bottom, #4d4dff 0%, #ffffff 110%);color:#4d4dff;}
.back-lightblue{background: linear-gradient(to bottom, lightblue 0%, #ffffff 100%);color:#003366;}
.back-grey{background: linear-gradient(to bottom, #e0e0d1 0%, #ffffff 100%);color:#6b6b47;}
.back-darkgrey{background: linear-gradient(to bottom, grey 0%, #ffffff 100%);color:#6b6b47;}
.back-black{background: linear-gradient(to bottom, black 0%, #ffffff 100%);color:#ffffff;}

.warna-trans-black{
	background: rgba(0, 0, 0, .6);
	color:white;
}
.warna-trans-blue{
	background: rgba(51, 51, 255, .6);
	color:white;
}
.warna-trans-lightblue{
	background: rgba(102, 153, 255, .6);
	color:black;
}
.warna-trans-green{
	background: rgba(0, 153, 51, .6);
	color:white;
}
.warna-trans-orange{
	background: rgba(255, 102, 0, .6);
	color:white;
}
.warna-trans-red{
	background: rgba(230, 57, 0, .6);
	color:white;
}
.warna-trans-yellow{
	background: rgba(255, 255, 0, .6);
	color:green;
}
.warna-trans-white{
	background: rgba(255, 255, 255, .6);
	color:black;
}
.flex-center{
	display:flex;align-items:center;justify-content:center;
}
.flex-column{
	display:flex;flex-direction:column;
}
.flex-row{
	width:100%;display:flex;flex-direction:row;
}
.hover-zoom:hover{transform:scale(1.1)}
.fbold{font-weight:bold}


.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 100px;
  height: 100px;
  -webkit-animation: spin 0.3s linear infinite; /* Safari */
  animation: spin 0.3s linear infinite;
}
.loader-mini {
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 50px;
  height: 50px;
  -webkit-animation: spin 0.3s linear infinite; /* Safari */
  animation: spin 0.3s linear infinite;
}
.loader-tiny {
  border: 6px solid #f3f3f3;
  border-radius: 50%;
  border-top: 6px solid #3498db;
  width: 25px;
  height: 25px;
  -webkit-animation: spin 0.3s linear infinite; /* Safari */
  animation: spin 0.3s linear infinite;
}
.spin-fast{
	-webkit-animation: spin 0.4s linear infinite; /* Safari */
	animation: spin 0.4s linear infinite;
}
.spin-fast2{
	-webkit-animation: spin 0.3s linear infinite; /* Safari */
	animation: spin 0.3s linear infinite;
}
.spin-normal{
	-webkit-animation: spin 1s linear infinite; /* Safari */
	animation: spin 1s linear infinite;
}
.spin-slow{
	-webkit-animation: spin 1.5s linear infinite; /* Safari */
	animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}