.box-center-screen{
	border:1px solid red;
	width:400px;
	height:500px;
}
.fix-fullscreen{
	position: fixed;
	width:100%;
	height: 100%;
}
.input-control{
	background:#fff;
	border:1px solid #ccc;
	padding:5px;
	position:relative;
}
.input-control i.fa{
	position:absolute;
	left:8px;
	font-size:18px;
	top: 50%;
    transform: translateY(-50%);
}
.input-control input{
	border:none;
	width:100%;
	padding-left:25px;
	outline:0;
}

.text-ball{
	width:26px; height:26px;
	margin-right:2px;
	padding:2px;
	border-radius:100%;
	font-weight:bold;
}
.text-ball.primaryx{
	color:#fff !important;
	border:2px solid rgb(147,152,215); /* Old browsers */
	background: rgb(147,152,215); /* Old browsers */
background: -moz-linear-gradient(top, rgba(147,152,215,1) 0%, rgba(39,134,216,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(147,152,215,1) 0%,rgba(39,134,216,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(147,152,215,1) 0%,rgba(39,134,216,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9398d7', endColorstr='#2786d8',GradientType=0 ); /* IE6-9 */
}

.gradient1{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3f4c6b+0,3f4c6b+100;Blue+Grey+Flat */
background: #3f4c6b; /* Old browsers */
background: -moz-linear-gradient(top,  #3f4c6b 0%, #3f4c6b 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #3f4c6b 0%,#3f4c6b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #3f4c6b 0%,#3f4c6b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */

}

.align-left{
	text-align:left;
}
.align-center{
	text-align:center;
}
.align-right{
	text-align:right;
}


.btn3d {
	position: relative;
	top: -6px;
	border: 0;
	transition: all 40ms linear;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 2px;
	margin-right: 2px;
}

.btn3d:active:focus,
.btn3d:focus:hover,
.btn3d:focus {
	-moz-outline-style: none;
	outline: medium none;
}

.btn3d:active,
.btn3d.active {
	top: 2px;
}
.btn3d.btn-danger {
	box-shadow: 0 0 0 1px #b93802 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #AA0000, 0 8px 8px 1px rgba(0, 0, 0, 0.5) !important;
	background-color: #D73814 !important;
}
.btn3d.btn-danger:active,
.btn3d.btn-danger.active {
	box-shadow: 0 0 0 1px #b93802 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3) !important;
	background-color: #D73814 !important;
}

.btn3d.btn-info {
	box-shadow: 0 0 0 1px #00a5c3 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #348FD2, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
	background-color: #39B3D7;
}

.btn3d.btn-info:active,
.btn3d.btn-info.active {
	box-shadow: 0 0 0 1px #00a5c3 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
	background-color: #39B3D7;
}

.livedraw .card .card-body a{
	color:#fff;
	text-decoration:none;
}
.livedraw .card.card-warning img{
	animation-name: livedraw-card-warning;
	animation-duration: 0.7s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
.livedraw .card.card-success img{
	animation-name: livedraw-card-success;
	animation-duration: 0.7s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
.livedraw .card.card-danger img{
	animation-name: livedraw-card-danger;
	animation-duration: 0.7s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
.livedraw .card.card-primary img{
	animation-name: livedraw-card-primary;
	animation-duration: 0.7s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
.livedraw hr{
	margin-top:0px;
	margin-bottom:0px;
}

@keyframes livedraw-card-warning {
  from {
	filter: brightness(85%);
  }
  to {
	filter: brightness(100%);
  }
}
@keyframes livedraw-card-success {
  from {
  }
	filter: brightness(90%);
  to {
	filter: brightness(100%);
  }
}
@keyframes livedraw-card-danger {
  from {
	filter: brightness(80%);
  }
  to {
	filter: brightness(100%);
  }
}
@keyframes livedraw-card-primary {
  from {
	filter: brightness(75%);
  }
  to {
	filter: brightness(100%);
  }
}

ul.menu-inside{
	padding:0px;
	*padding-left:10px;
	margin:0px;
	list-style:none;
}
ul.menu-inside > li:not(:last-child){
	border-bottom:1px solid #eee;
}
ul.menu-inside > li{
	margin:0px;
}
ul.menu-inside > li > a{
	display:block;
	color:#555;
	padding:8px;
	text-decoration:none;
}
ul.menu-inside > li > a:hover{
	font-weight:bold;
}
ul.menu-inside > li > a i{
	margin-right:10px;
}


.text-center{
	
}
.width-100{
	width:100% !important;
}
.no-padding{
	padding:0px !important;
}
.no-padding-left{
	padding-left:0px !important;
}
.no-padding-right{
	padding-right:0px !important;
}
.padding-5{
	padding:5px;
}
.padding-10{
	padding:10px;
}
.no-margin{
	margin:0px !important;
}
.margin-5{
	margin:5px;
}
.margin-10{
	margin:10px;
}
.margin-bottom-5{
	margin-bottom:5px;
}

.bg-biru{
	background:#337ab7;
}
.bg-white{
	background:#fff !important;
}
.bg-blue{
	background:blue;
}
.bg-gray{
	background:#ccc;
}
.bg-gray-dark{
	background:#555;
}
.color-white{
	color:white !important;
}
.color-black{
	color:black !important;
}
.letter-space-5{
	letter-spacing:5px;
}
.letter-space-10{
	letter-spacing:10px;
}

.card-title-m{
	font-size:1.1em;
}



@media(max-width:768px) {

.card-prediksi .card-body{
	padding:5px;
}
.card-prediksi .table tr td{
	font-size: 0.9em;
}
.card-prediksi .table thead tr td{
	text-align: center;
}
.card-prediksi .table thead tr td label span{
	display: block;
}
.card-prediksi .table tr td:first-child{
	width: 40%;
}
.card-prediksi .table tr td:last-child{
	width: 8%;
}

}




.checkbox {
  display: inline;
  position: relative;
  padding-left: 20px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: #ccc;
}

/* On mouse-over, add a grey background color */
.checkbox:hover input ~ .checkmark {
  background-color: #aaa;
}

/* When the checkbox is checked, add a blue background */
.checkbox input:checked ~ .checkmark {
  background-color: #337ab7;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox .checkmark:after {
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


.user-view{
	vertical-align:middle;
}
.user-view span{
	vertical-align:top;
	padding:5px;
	margin-left:10px;
	display:inline-block;
}
.user-view .image-radius{
	width:30px;
	height:30px;
	background-size:cover;
	display:inline-block;
	
	-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}


.loader {
margin: 0 auto;
  border: 3px solid #f3f3f3; /* Light grey */
  border-top: 3px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
}

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