.row{
	display: block;
	width: 100%;
	padding: 5px 5px;
	margin-top: 5px;
	margin-bottom: 5px;
}
.span-half{
	width: 49.5%;
}
.span-full{
	width: 100%;
	padding: 0px 5%;
}
.container-4p{
	width: 4%;
}
.container-6p{
	width: 6%;
}
.container-30p{
	width: 30%;
}
.container-50p{
	width: 50%;
}
.container-60p{
	width: 60%
}
.container-75p{
	width: 75%
}
.container-100p{
	width: 100%;
}
.container-200{
	width: 200px;
}
.container-380{
	width: 380px;
}
.container-720{
	width: 720px;
}
.container-1080{
	width: 1080px;
}
.container-1500{
	width: 1500px;
}
.div-center{
	display:block;
	margin: auto;
}
.margin-lr-10{
	margin-left: 10px !important;
	margin-right: 10px !important;
}
.margin-lr-15{
	margin-left: 15px !important;
	margin-right: 15px !important;
}
.margin-lr-20{
	margin-left: 20px !important;
	margin-right: 20px !important;
}
.margin-l-40{
	margin-left: 40px !important;
}
.margin-tb-10{
	margin-top: 10px !important;
	margin-bottom: 10px !important;
}
.margin-tb-20{
	margin-top: 20px !important;
	margin-bottom: 20px !important;
}
.margin-tb-30{
	margin-top: 30px !important;
	margin-bottom: 30px !important;
}
.margin-b-10{
	margin-bottom: 10px !important;
}
.margin-b-20{
	margin-bottom: 20px !important;
}
.margin-t-10{
	margin-top: 10px;
}
.margin-t-15{
	margin-top: 15px !important;
}
.margin-t-20{
	margin-top: -20px !important;
}
.margin-r--20{
	margin-right: -10px !important;
}
.padding-lr-5{
	padding-left: 5px !important;
	padding-right: 5px !important;
}
.padding-lr-10{
	padding-left: 10px !important;
	padding-right: 10px !important;
}
.padding-lr-15{
	padding-left: 15px !important;
	padding-right: 15px !important;
}
.padding-lr-20{
	padding-left: 20px !important;
	padding-right: 20px !important;
}
.padding-lr-30{
	padding-left: 30px !important;
	padding-right: 30px !important;
}
.padding-lr-35{
	padding-left: 35px !important;
	padding-right: 35px !important;
}
.padding-lr-40{
	padding-left: 40px !important;
	padding-right: 40px !important;
}
.padding-lr-50{
	padding-left: 50px !important;
	padding-right: 50px !important;
}
.padding-lr-60{
	padding-left: 60px !important;
	padding-right: 60px !important;
}
.padding-lr-70{
	padding-left: 70px !important;
	padding-right: 70px !important;
}
.padding-lr-80{
	padding-left: 80px !important;
	padding-right: 80px !important;
}
.padding-lr-90{
	padding-left: 90px !important;
	padding-right: 90px !important;
}
.padding-lr-100s{
	padding-left: 100px !important;
	padding-right: 100px !important;
}
.padding-lr-120{
	padding-left: 120px !important;
	padding-right: 120px !important;
}
.padding-lr-250{
	padding-left: 250px !important;
	padding-right: 250px !important;
}
.padding-lr-100{
	padding-left: 250px !important;
	padding-right: 200px !important;
}
.padding-lr-120{
	padding-left: 300px !important;
	padding-right: 250px !important;
}
.padding-lr-150{
	padding-left: 750px !important;
	padding-right: 100px !important;
}
.padding-r-10{
	padding-right: 10px;
}
.padding-r-20{
	padding-right: 20px;
}
.padding-r-30{
	padding-right: 30px;
}
.padding-r-60{
	padding-right: 45px;
}
.padding-r-300{
	padding-right: 300px;
}
.padding-l--15{
	padding-left: -15px;
}
.padding-l-15{
	padding-left: 15px;
}
.padding-l-17{
	padding-left: 17px;
}
.padding-l-50{
	padding-left: 50px;
}
.padding-l-60{
	padding-left: 45px;
}
.padding-l-68{
	padding-left: 68px;
}
.padding-l-75{
	padding-left: 75px;
}
.padding-l-90{
	padding-left: 90px;
}
.padding-l-100{
	padding-left: 100px;
}
.padding-l-120{
	padding-left: 120px;
}
.padding-l-133{
	padding-left: 133px;
}
.padding-l-140{
	padding-left: 140px;
}
.padding-l-150{
	padding-left: 150px;
}
.padding-l-169{
	padding-left: 169px;
}
.padding-l-180{
	padding-left: 180px;
}
.padding-l-200{
	padding-left: 200px;
}
.padding-l-210{
	padding-left: 210px;
}
.padding-l-225{
	padding-left: 225px;	
}
.padding-l-250{
	padding-left: 265px;
}
.padding-l-340{
	padding-left: 340px;	
}
.padding-l-400{
	padding-left: 430px;	
}
.padding-l-520{
	padding-left: 520px;
}
.padding-l-525{
	padding-left: 525px;	
}
.padding-l-540{
	padding-left: 540px;
}
.padding-l-1500{
	padding-left: 800px;	
}
.border-test{
	border: 1px solid red;
}
.flex{
	display: flex;
}
.extension-text{
	background-color: #c9c9c9;
	color: white;
	border-radius: 0px 5px 5px 0px;
	font-size: 10px;
	line-height: 35px;
}
.text-center{
	display: flex;
	vertical-align: baseline;
}
.text-middle{
	display: flex;
	align-items: center;
}
.text-title{
	font-size: 20px;
	color: #666;
	font-weight: 600;
	margin-top: 5px;
	margin-bottom: 5px;
}
.page-title{
	color: #34aee2;
	text-align: center;
	margin-top: 30px;
	margin-bottom: 30px;
}
.page-title-admin{
	color: #34aee2;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}
.text-detail{
	font-size: 14px;
	color: #999;
}
.text-decoration-none, .text-decoration-none:hover{
	text-decoration: none;
	color: #000;
}
.qty{
	width: 30px;
	border: 0px;
	text-align: center;
	margin-left: 5px;
	margin-right: 5px;
}
.inc-dec-button{
	height: 20px;
	width: 20px;
	padding: 3px;
}
.inc-dec-button-admin{
	background-color: #34aee2;
	border-radius: 10px;
	color: #ffffff;
	border: 0px;
	height: 20px;
	width: 20px;
	padding: 0px;
}
.btn-bimay{
	background-image: -webkit-gradient(linear, left top, left bottom, from(#34aee2), to(#0098d7));
	background-image: -webkit-linear-gradient(top, #34aee2, #0098d7);
	border-radius: 5px;
	color: white;
	height: 45px;
	border: 0px;
	padding-left: 15px;
	padding-right: 15px;
}
.btn-bimay-table{
	background-image: -webkit-gradient(linear, left top, left bottom, from(#34aee2), to(#0098d7));
	background-image: -webkit-linear-gradient(top, #34aee2, #0098d7);
	border-radius: 5px;
	color: white;
	height: 25px;
	border: 0px;
	padding-left: 15px;
	padding-right: 15px;
	font-size: 10px;
}
.btn-bimay-search-admin{
	background-image: -webkit-gradient(linear, left top, left bottom, from(#34aee2), to(#0098d7));
	background-image: -webkit-linear-gradient(top, #34aee2, #0098d7);
	margin-top: 0px;
	border-radius: 5px;
	color: white;
	height: 30px;
	border: 0px;
	width: 70px;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 12px;
}
.btn-bimay-search-user{
	background-image: -webkit-gradient(linear, left top, left bottom, from(#34aee2), to(#0098d7));
	background-image: -webkit-linear-gradient(top, #34aee2, #0098d7);
	margin-top: 2px;
	border-radius: 5px;
	color: white;
	height: 30px;
	border: 0px;
	width: 70px;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 12px;
}
.btn-bimay-option-user{
	background-image: -webkit-gradient(linear, left top, left bottom, from(#34aee2), to(#0098d7));
	background-image: -webkit-linear-gradient(top, #34aee2, #0098d7);
	border-radius: 5px;
	color: white;
	height: 45px;
	border: 0px;
	width: 120px;
	padding-left: 15px;
	padding-right: 15px;
}
.btn-bimay-logout-admin{
	background-image: -webkit-gradient(linear, left top, left bottom, from(#58ADDD), to(#58ADDD));
	background-image: -webkit-linear-gradient(top, #58ADDD, #58ADDD);
	border-radius: 2px;
	color: black;
	font-weight: bold;
	height: 35px;
	border: 1px solid black;
	width: 70px;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 12px;
}
.btn-availableShift{
	background: white;
	color: black;
	width: 100%;
	padding: 10px;
	/*height: 5000px;*/
	border: 1px solid grey;
}
.btn-availableComputer, .btn-availableRoom{
	background: white;
	color: black;
	width: 100%;
	padding: 10px;
	/*height: 5000px;*/
	border: 1px solid grey;
}
.btn-logout{
	margin-top: 10px;
	background: white;
	border-radius: 5px;
	color: black;
	height: 45px;
	border: 1px solid grey;
	padding-left: 15px;
	padding-right: 15px;
}
.btn-cancelBooking{
	background-image: -webkit-gradient(linear, left top, left bottom, from(#e29534), to(#ed9208));
	background-image: -webkit-linear-gradient(top, #e29534, #ed9208);
	margin-top: 10px;
	border-radius: 5px;
	border: 1px solid;
	color: white;
	height: 45px;
	padding-left: 15px;
	padding-right: 15px;
}
.btn-updateStatus:disabled{
	background-image: -webkit-gradient(linear, left top, left bottom, from(#d3d5d5), to(#b2b1b1));
	background-image: -webkit-linear-gradient(top, #d3d5d5, #b2b1b1);
	margin-top: 10px;
	border-radius: 5px;
	border: 1px solid;
	color: white;
	height: 34px;
	width: 100%;
	padding-left: 5px;
	padding-right: 5px;
}
.btn-updateStatus{
	background-image: -webkit-gradient(linear, left top, left bottom, from(#34aee2), to(#0098d7));
	background-image: -webkit-linear-gradient(top, #34aee2, #0098d7);
	margin-top: 10px;
	border-radius: 5px;
	border: 1px solid;
	color: white;
	height: 34px;
	width: 100%;
	padding-left: 5px;
	padding-right: 5px;
}
.btn-createExtend{
	background-image: -webkit-gradient(linear, left top, left bottom, from(#34aee2), to(#0098d7));
	background-image: -webkit-linear-gradient(top, #34aee2, #0098d7);
	margin-top: 10px;
	border-radius: 5px;
	border: 1px solid;
	color: white;
	height: 45px;
	width: 175px;
	padding-left: 5px;
	padding-right: 5px;
}
.btn-addNewAdmin{
	background-image: -webkit-gradient(linear, left top, left bottom, from(#34aee2), to(#0098d7));
	background-image: -webkit-linear-gradient(top, #34aee2, #0098d7);
	margin-top: 0px;
	border-radius: 5px;
	/* border: 1px solid; */
	border: 0px;
	color: white;
	height: 30px;
	width: 80px;
	/* padding-left: 5px;
	padding-right: 5px; */
	font-size: 12px;
}
.btn-qty{
	border: 1px solid black;
	border-radius: 10px;
}
.btn-bimay:hover{
	background: #0183BF;
}
.btn-availableShift.active{
	background-image: -webkit-gradient(linear, left top, left bottom, from(#34aee2), to(#0098d7));
	background-image: -webkit-linear-gradient(top, #34aee2, #0098d7);
}
.btn-notAvailableShift{
	background-image: -webkit-gradient(linear, left top, left bottom, from(#e25134), to(#d72400));
	background-image: -webkit-linear-gradient(top, #e25134, #d72400);
}
.btn-availableComputer.active, .btn-availableRoom.active{
	background-image: -webkit-gradient(linear, left top, left bottom, from(#34aee2), to(#0098d7));
	background-image: -webkit-linear-gradient(top, #34aee2, #0098d7);
}
.btn-notAvailableComputer, .btn-notAvailableRoom{
	background-image: -webkit-gradient(linear, left top, left bottom, from(#e25134), to(#d72400));
	background-image: -webkit-linear-gradient(top, #e25134, #d72400);
}
.btn-passedComp{
	background-image: -webkit-gradient(linear, left top, left bottom, from( #d9d9d9 ), to( #d9d9d9 ));
	background-image: -webkit-linear-gradient(top,  #d9d9d9 ,  #d9d9d9 );
}
.btn-passedComp:focus{
	background-image: -webkit-gradient(linear, left top, left bottom, from( #d9d9d9 ), to( #d9d9d9 ));
	background-image: -webkit-linear-gradient(top,  #d9d9d9 ,  #d9d9d9 );
}
.panel-heading-color{
	color: #34aee2;
}
.input-logo{
	padding-left: 20px;
}
.icon{
	font-color: #c9c9c9;
	font-size: 20px;
}
.logo-input{
	border:0px;
}
.logo-input:focus{
	outline:none;
}
.error-message{
	color: red;
	font-weight: 400;
	border-left: 3px solid red;
	padding: 5px 10px;
	width: 109%;
	margin-bottom: 8px;
}
.lbl-error-message{
	color: red;
	font-weight: 400;
	padding: 5px 10px;
	width: 109%;
	margin-bottom: 8px;
}
.lbl-forgot-password{
	color: #34aee2;
	font-weight: 400;
	margin-top: 0px;
	margin-bottom: 20px;
}
.lbl-text{
	font-weight: 400;
	margin-top: 0px;
	margin-bottom: 20px;
}
.lbl-link-bawah{
	font-weight: 400;
	color: #34aee2;
}
.lbl-bawah-password{
	font-weight: 400;
	font-size: 13px;
}
.cell-w-250{
	width: 250px !important;
}
.cell-w-125{
	width: 125px !important;
}
.hidden{
	display: none;
}
.clickable{
	cursor: pointer;
}
.unclickable{
	cursor: no-drop;
}
.modal{
	display: none;
	position: fixed;
	z-index: 1;
	padding-top: 100px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: black;
}
.modal-content{
	position: relative;
	background-color: #fefefe;
	margin: auto;
	padding: 0;
	width: 90%;
	max-width: 1200px;
}
.close{
	color: white;
	position: absolute;
	top: 20px;
	right: 25px;
	font-size: 35px;
	font-weight: bold;
}
.close:hover,
.close:focus{
	color: #999;
	text-decoration: none;
	cursor: pointer;
}
.f-left{
	float:left;
}
.f-right{
	float:right;
}
.container-new{
	width: 100%;
	display: inline-table !important;
}
.row-centered{
	text-align: center;
}
.col-centered{
	display: inline-block;
	float: none;
	text-align: left;
	margin-right: -4px;
}
.w3-container,.w3-panel{
	padding:0.01em 16px;
	border: 0px solid black;
}
.border-coba{
	border: 3px solid black;
	border-radius: 5px;
}
.w3-panel{
	margin-top:16px;margin-bottom:16px
}
.w3-modal{
	z-index: 3;
	display: none;
	padding-top: 50px;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.4)
}
.w3-modal-confirmation{
	z-index: 3;
	display: none;
	padding-top: 200px;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.4)
}
.w3-modal-admin{
	z-index: 3;
	display: none;
	padding-top: 100px;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.4)
}
.w3-modal-content{
	margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:300px;
	border-radius: 5px;
}
.w3-modal-content-confirmation{
	margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:250px;
	border-radius: 5px;
}
.w3-card,.w3-card-2{
	box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
}
.w3-animate-zoom{
	animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}
}
.w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
.w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%}
.w3-left-align{text-align:left!important}.w3-right-align{text-align:right!important}.w3-justify{text-align:justify!important}.w3-center{text-align:center!important}
.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#ccc;color:#000}
.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}
.w3-bar .w3-button{white-space:normal}
.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}
.w3-button:hover{color:#000!important;background-color:#ccc!important}
.w3-xlarge{font-size:24px!important}.w3-xxlarge{font-size:36px!important}.w3-xxxlarge{font-size:48px!important}.w3-jumbo{font-size:64px!important}
.w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#f44336!important}
.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0}
.w3-section,.w3-code{margin-top:16px!important;margin-bottom:16px!important}

.example{
	width: 180px;
	height: 294px;
	overflow-y: scroll; /* Add the ability to scroll */
}
.example::-webkit-scrollbar{
	display: none;
}
.example{
	-ms-overflow-style: none;
}
.checkIn, .borrowed{
	color: green;
	font-weight: bold;
}
.upcoming, .booked{
	color: orange;
	font-weight: bold;
}
.checkOut, .returned{
	color: black;
	font-weight: bold;
}
.cancelled{
	color: red;
	font-weight: bold;
}
.borderBookingStatus{
	border: 2px solid black;
	border-radius: 5px;
}
.sidebar-divider{
	border: 2px solid black;
}
.tdBorder{
	border: 1px solid black;
}
.thBorder{
	border: 1px solid black;
}
.btn{
	background-image: -webkit-gradient(linear, left top, left bottom, from(#34aee2), to(#0098d7));
	background-image: -webkit-linear-gradient(top, #34aee2, #0098d7);
	margin-top: 0px;
	border-radius: 5px;
	border: 1px solid orange;
	color: white;
	height: 40px;
	width: 300px;
	padding-left: 5px;
	padding-right: 5px;
}
/* Style the active class, and buttons on mouse-over */
.active, .btn:hover{
	background-color: #666;
	color: white;
}
.active, .nav-item:hover{
	background-color: #666;
	color: white;
}
.bintang{
	color: red;
}