/* @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
@import url(https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/css/mdb.min.css); */

.center {
    margin: auto;
    margin-top:13%;
}

label {
	font-weight: bold;
}

label:after {
    content: '*';
	color: red;
}

.form-control-no-border:focus {
    border-color:#ccc;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: transparent;
    border-bottom:none;
}

.form-input {
    font-size: 15px;
    color: #555555;
    border: 0;
    outline: 0;
    box-shadow: 1px;
    line-height: 1.2;
    border-radius: 0;
    background: transparent;
    display: block;
    width: 100%;
    height: 35px;
    border-bottom:1px solid #555555;
}

.lg {
    
    margin-bottom: 40px;
}

.group {
    background: transparent;
    border: none;
    box-shadow: none;
    
}

.focus-input {
    position: absolute;
    display: block;
    width: 86%;
    height: 100%;
    top: 0;
    left: 43px;
    pointer-events: none;
}
  
.focus-input::before {
    content: "";
    display: block;
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
  
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  
    background: #21d4fd;
}
  
.focus-input::after {
    font-size: 15px;
    color: #999999;
    line-height: 1.2;
  
    content: attr(data-placeholder);
    display: block;
    width: 100%;
    position: absolute;
    top: 10px;
    left: 0px;
    padding-left: 5px;
  
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}
  
.form-input:focus + .focus-input::after {
    top: -15px;
    font-size:12px;
}
  
.form-input:focus + .focus-input::before {
    width: 100%;
}
  
.has-val.form-input + .focus-input::after {
    top: -15px;
    font-size:12px;
}
  
.has-val.form-input + .focus-input::before {
    width: 100%;
} 

/* .wrap-input {
    width: 80%;
    position: relative;
    border-bottom: 2px solid #adadad;
    margin-bottom: 40px;
}

.form-input {
    font-size: 15px;
    color: #555555;
    line-height: 1.2;
    outline: none;
    border: none;
  
    display: block;
    width: 100%;
    height: 45px;
    background: transparent;
    padding: 0 5px;
} */
  
  /*---------------------------------------------*/ 
/* .focus-input {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}
  
.focus-input::before {
    content: "";
    display: block;
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
  
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  
    background: #21d4fd;
}
  
.focus-input::after {
    font-size: 15px;
    color: #999999;
    line-height: 1.2;
  
    content: attr(data-placeholder);
    display: block;
    width: 100%;
    position: absolute;
    top: 16px;
    left: 0px;
    padding-left: 5px;
  
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}
  
.form-input:focus + .focus-input::after {
    top: -15px;
    font-size:12px;
}
  
.form-input:focus + .focus-input::before {
    width: 100%;
}
  
.has-val.form-input + .focus-input::after {
    top: -15px;
    font-size:12px;
}
  
.has-val.form-input + .focus-input::before {
    width: 100%;
} */* {
	font-size: 15px;
}
.navbar{
	border-top: 1px #000000 solid;
	border-bottom: 1px #000000 solid;
}
.wrapper {
	display: block;
	align-items: stretch;
	width:100%;
	padding-top:45px;
}

/* Faizal 18/04/2020 */
.cmms-bg-persian {
	background-color: #1C39BB !important;
}

.cmms-border-all-solid-1-persian {
	border: 1px solid #1C39BB !important;
}

.cmms-border-top-solid-1-persian {
	border-top: 1px solid #1C39BB !important;
}

#sidebar {
	display: block;
	position: fixed;
	min-width: 350px;
	max-width: 350px;
	height: 100vh;
	margin-left: -350px;
	top: 0;
	left: 0;
	right: 10em;
	bottom: 0;
	padding: 20px;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 9999;
	transition: all 0.3s;
}

#sidebar-right {
	display: block;
	position: fixed;
	min-width: 350px;
	max-width: 350px;
	height: 100vh;
	margin-right: -350px;
	top: 0;
	right: 0;
	bottom: 0;
	padding: 20px;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 9999;
	transition: all 0.3s;
}

.nav-sidebar {
	list-style: none;
	padding: 0;
	margin-left: -20px;
	margin-right: -20px;
}
.nav-sidebar > li > ul li {
	/*background: #fff;*/
	color: #343a40;
	padding-left:15px;
}

.nav-sidebar > li > ul li a {
	color: #666 !important;
}

#sidebar.active {
	display: block;
	margin-left: 0;
}
#sidebar-right.active {
	display: block;
	margin-right: 0;
}
#sidebar .sidebar-header {
	padding: 20px;
	background: #6d7fcc;
}
#sidebar ul p {
	color:#fff;
	padding: 10px;
}
#sidebar ul li a {
	padding: 10px 20px;
	font-size: 1.1em;
	display: block;
	color:#343a40;
}
#sidebar ul > li > a:hover {
	color: #343a40;
	text-decoration: none;
	background: #fff;
	font-weight: bold;
}
#sidebar ul li.active > a, a[aria-expanded="true"] {
	color:#fff;
	font-weight: bold;
	/*background: #ddd;*/
}

.overlay {
	display: none;
	position: fixed;
	/* full screen */
	width: 100vw;
	height: 100vh;
	/* transparent black */
	background: rgba(0, 0, 0, 0.7);
	/* middle layer, i.e. appears below the sidebar */
	z-index: 998;
	opacity: 0;
	/* animate the transition */
	transition: all 0.5s ease-in-out;
}

/* display .overlay when it has the .active class */
.overlay.active {
	display: block;
	opacity: 1;
}

#dismiss, #dismiss-right {
	width: 35px;
	height: 35px;
	position: absolute;
	/* top right corner of the sidebar */
	top: 10px;
	right: 0px;
}

a[data-toggle="collapse"] {
	position: relative;
}
.dropdown-toggle::after {
	display: block;
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
} 
#content {
	width: 100%;
}



/*==============================*/
/*Form Input*/
/*==============================*/

.form-group {
	margin-bottom: 1rem;
}
a:hover {
	text-decoration: none;
}
.font-alert {
	font-weight: bold;
	color: #545454;
}
.font-alert:hover {
	color: #313131;
}

.form-group .col-form-label, .form-group label, .form-group span {
	width:100% !important;
	max-width:100% !important;
	flex:none !important;
	font-size:12px !important;
	font-weight:700;
	
}

.form-group .col-form-label, .form-group label {
	margin-bottom:0px;
	margin-top:5px;
	padding-top:0px;
	padding-bottom:0px;
}

.form-group .col-form-label .label-name {
	float:left;
	font-weight:700;
}

.form-group div {
	max-width:100% !important;
	flex:none !important;
}

.form-control {
	border:none !important;
	border-bottom:1px solid #ccc !important;
	border-radius:0px !important;
	padding-left:0px !important;
}

.form-control:disabled, .form-control[readonly] {
	border-bottom:1px dashed #ccc  !important;
	background:#fff !important;
	color:#aaa;
}

.notification, .notification:hover {
	text-decoration:none;
}

.notification .badge-0{
	display:inherit;
	color:#fff;
	background:#28a745;
}

.notification .badge-1{
	display:none;
}


.notif-title{
	font-weight:600;
	color:#333;
}

.notif-message{
	font-size:12px;
	font-weight:300;
	color:#333;
}

.notif-time{
	color:#aaa;
}

.notif-img {
	background:#ccc;
	border-radius:50% !important;
	width:40px;
	height:40px;
}

.input-group > .select2-container--bootstrap {
	flex: 1 1 !important;
	display:block !important;
	width: auto !important;
}

.form-group span.select2-selection__arrow{
	width: 4px !important;
}

.form-group span.select2-selection__rendered{
	font-size:15px !important;
	font-weight: normal !important;
}

.btn-status{
    cursor: unset !important;
}

div.btn-status.btn-status-draft:hover{
    background-color: #6c757d;
    border-color: #6c757d;
}   
div.btn-status.btn-status-menunggu:hover{
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
}
div.btn-status.btn-status-diterima:hover{
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}
div.btn-status.btn-status-ditolak:hover{
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

div.btn-status.btn-status-close{
    background-color: #f8f9fa;
    border-color: #6c757d;
}  

#circle2 {
	display: inline-block;
	height: 24px;
	width: 24px;
	border: 2px #fff solid;
	border-top: 2px rgba(0, 0, 0, 0) solid;
	border-radius: 50%;
	-webkit-animation: spin2 .7s infinite linear;
			animation: spin2 .7s infinite linear;
	vertical-align:middle;
}

@-webkit-keyframes spin2 {
	from {
		-webkit-transform: rotate(0deg);
				transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(359deg);
				transform: rotate(359deg);
	}
}
@keyframes spin2 {
	from {
		-webkit-transform: rotate(0deg);
				transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
				transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(359deg);
				transform: rotate(359deg);
		-webkit-transform: rotate(359deg);
				transform: rotate(359deg);
	}
}