/* ====== PRELOADER CSS ====== */	
	.loader {
	  border: 9px solid transparent;
	  border-radius: 50%;
	  border-top: 9px solid #008060;
	  border-bottom: 9px solid #003975;
	  width: 20vh;
	  height: 20vh;
	  -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); }
	}

	.preloader {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  z-index: 9999;
	  background:rgba(255,255,255,0.6);
	}

	.preloader .loading {
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  transform: translate(-50%,-50%);
	  font-size: 14px;
	}
/* ====== \PRELOADER CSS ====== */	


@font-face
{
	font-family:"Ubuntu";
	src: url('Ubuntu-Regular.ttf');
}

html
{
	font-size: 14px;
	height: 98%
}

body
{
	font-family:"Ubuntu";
	background-color: #f8f9fa;
	height: 98%
}

td
{
	white-space:nowrap;
}

.table-hover tbody tr:hover
{
	background-color: #bad2ff;
}

.ngeslide
{
	transition: all .3s ease;
}

@media only screen and (min-width: 767px)
{
	.menu-on
	{
		padding-left: 220px;
	}
	
	html
	{
		font-size: 14px;
		height: 98%
	}
	
	div.dataTables_info
	{
		float:left;
	}
}

.menu-sidenav
{
	top:0;
	left:0;

	position:fixed;
	z-index:1031;
	overflow:hidden;
	width:205px;
	height:100vh;
	-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.05),0 2px 10px 0 rgba(0,0,0,.05);
	box-shadow:0 2px 5px 0 rgba(0,0,0,.05),0 2px 10px 0 rgba(0,0,0,.05);
}

.menu-sidenav-overlay
{
	top:0;
	left:200;
	position:fixed;
	width:100%;
	height:100vh;
	background: rgba(0, 0, 0, 0.5);
	z-index:1030;
	
}


.menu-sidenav-off
{
	-webkit-transform:translateX(-100%);
	transform:translateX(-100%);
}

a.menunav
{
	color: black;
}










.vvh-100
{
	height: calc(100vh - 2px);
}

.wrapper
{
	min-height: calc(100vh - 226px);
}

.font-001
{
	font-size: calc(13px + (16 - 13) * ((100vw - 375px) / (1360 - 375)));
}

.font-002
{
	font-size: calc(12px + (16 - 12) * ((100vw - 375px) / (1360 - 375)));
}


.font-hotspot
{
	font-size: 10px;
}

b.pointer 
{
	cursor: pointer;
	transition : .25s;
}

b.pointer:hover
{
	color:#0e7b5c; !important;
}

div.pointer
{
	cursor: pointer;
}

.absolute-center-center
{
	position: absolute;
	top: 50%; left: 50%; transform: translate(-50%, -55%);
}

.absolute-left-center
{
	position: absolute;
	top: 50%; left: 0%; transform: translate(0%, -50%);
}

.absolute-right-center
{
	position: absolute;
	top: 50%; right: 0%; transform: translate(0%, -50%);
}

.not-sel
{
	user-select: none;
	-webkit-user-select: none;
}

.bgimg
{
	position: relative;
	left: 0px;
	top: 0px;
	z-index: 0;
}

.chatfloat
{
	position:fixed;
	padding:5px;
	margin:auto;
	bottom:20px;
	right:15px;
	background-color:#47c756;
	color:#393939;
	border-radius:50px;
	text-align:center;
	font-size:13px;
	box-shadow: 0px 2px 6px 0px #999;
	z-index:100;
	transition : 0.4s;
}

.fasad
{
	width:100%; 
	border: 1px solid #bababa;
	border-radius: 8px;
	object-fit: cover;
	object-position: center center;
}

.img-contain
{
	object-fit: contain;
}

#myWindow {
	display: flex;
	align-items: center;
	justify-content: center;
}

#myContent {
	cursor: grab;
	position: relative;
	display: flex;
	align-items: center;
}

#myContent img {
	display: block;
	width: auto;
	height: auto;
	margin: auto;
	align-self: center;
	flex-shrink: 0;
}

.ratio{position:relative;width:100%}.ratio::before{display:block;padding-top:var(--aspect-ratio);content:""}.ratio>*{position:absolute;top:0;left:0;width:100%;height:100%}
.ratio-1x1{--aspect-ratio:100%}


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* === Dark Blue === */
	.bg-darkblue
	{
		background: #00366f;
	}

	.bg-darkblue-op8
	{
		background: rgba(0, 54, 111, 0.85);
	}

	.text-darkblue
	{
		color: #00366f;
	}
	
	.border-darkblue
	{
		border-color: #00366f !important;
	}

	
/* === Dark Green === */
	.bg-darkgreen
	{
		background: #0e7b5c;
	}

	.bg-darkgreen-op8
	{
		background: rgba(14, 123, 92, 0.85);
	}

	.text-darkgreen
	{
		color: #0e7b5c;
	}


/* === Light Versi 2 === */
	.bg-light2
	{
		background-color: #edf2f9;
	}

.bg-dark-op5
{
	background: rgba(0, 0, 0, 0.6);
}

.bg-light-op8
{
	background: rgba(255, 255, 255, 0.85);
}

.bg-green-op8{ background: rgba(0, 255, 0, 0.8); }
.bg-green-op10{ background: rgba(0, 255, 0, 1.0); }

.bg-yellow {background: yellow;}

.bg-red-op7
{
	background: rgba(255, 0, 0, 0.7);
}

.bg-putih-op5
{
	background: rgba(255, 255, 255, 0.5);
}
/* ====== MAIN MENU ====== */
	.sticky-menu
	{
		position: -webkit-sticky;
		position: sticky;
		top: 0 !important;
		z-index: 1000;
	}

	ul li
	{
		list-style-type:none;
		list-style:none;
	}

	a.menupad
	{
		padding: 10px 2px 10px 2px;
	}
	
	.hidemenu
	{
		left: -500px;
		transition : .5s;
	}
	
	.showmenu
	{
		left: 0px !important;
		transition : .5s;
	}
/* ====== MAIN MENU ====== */

/* ====== PAGE MENU ====== */
	.sticky-div
	{
		position: -webkit-sticky;
		position: sticky;
		top: 70px;
	}
	
	.bottom-fixed
	{
		position: fixed;
		bottom: 0px !important;
		z-index: 9001;
	}
	
	.bottom-view
	{
		position: fixed;
		bottom: -60px;
		z-index: 9001;
	}
	
	.trans-1
	{
		transition : 0.5s;
	}
	
	li.color
	{
		background-color: #edf2f9;
	}

	.shadow-page-menu
	{
		box-shadow: 0px 2px 10px 0px #111;
	}

.footer-bg
{
	background-image: url("../images/background/citraland-cibubur-bg.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

.show-pass
{
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}


/* ===== Carousel Slide Image ===== */
	.carousel-fade .carousel-item {
		opacity: 0;
		transition-duration: 1s;
		transition-property: opacity;
	}

	.carousel-fade .carousel-item.active,
	.carousel-fade .carousel-item-next.carousel-item-left,
	.carousel-fade .carousel-item-prev.carousel-item-right {
		opacity: 1;
	}

	.carousel-fade .active.carousel-item-left,
	.carousel-fade .active.carousel-item-right {
		transition: 1s;
		opacity: 0;
	}

	.carousel-fade .carousel-item-next,
	.carousel-fade .carousel-item-prev,
	.carousel-fade .carousel-item.active,
	.carousel-fade .active.carousel-item-left,
	.carousel-fade .active.carousel-item-prev {
		transform: translateX(0);
		transform: translate3d(0, 0, 0);
	}
	
	.carousel-caption.center-center
	{
		margin: 0;
		position: absolute;
		top: 50%;
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
/* ===== Carousel Slide Image ===== */

/*** Responsive Embed Youtube Video ***/
.embed-container
{
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
} 
.embed-container iframe, 
.embed-container object, 
.embed-container embed 
{ 
position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%;
}

	/*************************** TAB RADIO by CODEPEN.io ***************************/
	/*
	 CSS for the main interaction
	*/
	.tabset > input[type="radio"] {
	  position: absolute;
	  display:none;
	}

	.tabset .tab-panel {
	  display: none;
	}

	.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
	.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
	.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
	.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
	.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
	.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
	  display: block;
	}

	/*
	 Styling
	*/

	.tabset > label {
	  position: relative;
	  display: inline-block;
	  padding: 5px;
	  border: 1px solid transparent;
	  border-bottom: 0;
	  cursor: pointer;
	  user-select: none;
	  -webkit-user-select: none;
	}

	.tabset > input:checked + label {
	  border-color: #bababa;
	  border-bottom: 1px solid #edf2f9;
	  margin-bottom: 0px;
	  border-radius: 5px 5px 0px 0px;
	  font-weight: 900;
	}

	.tab-panel {
	  padding: 10px;
	  border-top: 1px solid #ccc;
	}

	.tab_gap {
		margin-right: 10px;
	}