.form-group.required .control-label:after { 
   content:" *";
   color:#c80000;
}

input.uppercase[type=text] {
    text-transform: uppercase;
}

.label-disabled{
	background-color: whitesmoke !important;
	font-weight:300 !important;
}

.alert-danger {
    color: #721c24 !important;
    background-color: #efbec3 !important;
    border-color: #53020a !important;
}

.swal2-icon{
	width: 50px !important;
    height: 50px !important;
}

[class^=swal2] {
    font-size: 17px !important;
}

.swal2-popup {
	width: 28em !important;
}

.swal2-actions button.btn{
	min-width: 70px;
    margin-right: 5px;
}

.box-icon{
	border: solid 1px #3eaef1;
    padding: 5px;
    border-radius: 5px;
	color: #3eaef1;
	min-width: 40px;
    text-align: center;
}

.img_bingkai{
	width: 300px;
    border-radius: 5px;
    border: solid 1.5px #bbbbbb;
    text-align: center;
    padding: 10px;
}

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .fa,
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .fa  { left:  0px;}
.right-addon .fa { right: 0px;}
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

.main-sidebar {
    border-right: 1px solid #398ac4;
}

.nav-link{
    font-size: 18px;
}

.nav-link p{
	margin-left: 10px !important;
	text-transform: uppercase;
}

.nav-link i {
	color: #3eaef1;
}

.sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active i{
	color: #fff;
}

.container-fluid .header{
	padding: 10px;
    border: 1px solid lightgray;
    background-color: #fff;
	display: flex;
}

.medal-gold{
	margin-left:10px;
	color:#ffb300;
}

.collapsible {
  background-color: #2ca6b7;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.collapsible.active, .collapsible:hover {
  background-color: #2ebcd0;
}

button.collapsible:focus{
	outline-color: transparent;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.collapsible.active:after {
  content: "\2212";
}

.collapsible_content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #fbfbfb;
}

.collapsible-content .collapsible{
	margin-bottom: 10px;
}

.list-group-item.active a:not(.btn),
.list-group-item.active a:not(.btn):hover
{
	color: #fff;
}

.text-skyblue .list-group-item.active {
    background-color: deepskyblue !important;
    border-color: deepskyblue !important;
}

.text-skyblue,
.text-skyblue a:not(.btn)
{
	color: deepskyblue;
}

a.text-skyblue:not(.btn-except):hover,
.text-skyblue a:not(.btn-except):hover {
    color: #49d0fd;
    text-decoration: none;
}

.bold,
.bold a:not(.btn-except){
	font-weight: 600;
}

.alert-petunjuk{
	color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
}

.btn-outline-primary:focus {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.btn-outline-secondary:focus {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.progress-indi{
	margin: 10px;
    margin-bottom: 20px;
	color: crimson;
}

.pull-right {
    float: right!important;
}

.input-sm {
    height: 30px!important;
    padding: 5px 10px!important;
    font-size: 14px!important;
    line-height: 1.5!important;
    border-radius: 3px!important;
}

.modal-header{
	margin: 4px;
}

hr{
	border-top: 1px solid #badae7;
    width: 100%;
}

.hidden{
	display:none!important;
}

.list_sub3{
	margin-top: 15px;
    padding-left: 30px;
}

.bobot{
	margin-bottom: 0pc;font-size: 13px;color: #c2c1c1;
}

.active .bobot{
	margin-bottom: 0pc;font-size: 13px;color: #e5e4e4;
}

.notifyjs-container{
	max-width: 600px;
}

.notifyjs-container span[data-notify-text]{
	white-space: normal;
	word-wrap: break-word;
}

.notifyjs-bootstrap-danger{
	background-color: #b70e0e!important;
    border-color: #862020!important;
    color: antiquewhite;
}

input[type="file"]{
	white-space: normal;
	word-wrap: break-word;
	overflow: auto;
}

.ellipsis{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.navbar-nav>.user-menu .user-image {
	background-color: white;
}

#loader-div{
	width: calc(100% - 2.5rem);
    height: calc(100% - 2.5rem);
    position: absolute;
    z-index: 99;
    background-color: #ffffffb8;
}

#loader {
	position: sticky;
    left: 55%;
    top: 50%;
    width: 80px;
    height: 80px;
    margin: -56px 0 0 -56px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
	z-index: 1;
    border-top: 16px solid #3498db;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s 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); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

.layout{
	flex: 1 1 auto;
    min-height: 1px;
    padding: 1.25rem;
    background-color: #fff;
    border: 1px solid #dbdada;
    border-radius: 5px;
	margin-bottom: 10px;
}

.layout > .layout-header{
	border-bottom: 2px solid #dbd8d8;
    padding-bottom: 10px;
    color: #17a2b8;
}

label.form-control{
	text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

@media only screen and (max-width: 375px) {
	#loader {
		left: 40%;
	}
	
	.card-header>.card-tools {
		margin-top: 15px;
	}
	
	li.page-item {
        display: none;
    }

    .page-item:first-child,
    .page-item:nth-child( 2 ),
    .page-item:nth-last-child( 2 ),
    .page-item:last-child,
    .page-item.active,
    .page-item.disabled {

        display: block;
    }
	
}