body {
	margin: 0;
	font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	text-align: left;
	background-color: #eef5f9;
}

/* Custom CSS with prefix ar- */

.ar-navbar .dropdown-menu {
	border: 0;
	margin-top: 10px;
	font-weight: 400;
	font-size: .91rem;
	box-shadow: 0 0 0 1px rgba(20, 20, 31, .05), 0 2px 7px 1px rgba(20, 20, 31, .16);
}

.ar-navbar .dropdown.show > .dropdown-arrow {
	display: block;
}

.ar-navbar .dropdown .dropdown-arrow {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	overflow: hidden;
	height: 1.25rem;
	width: 1.25rem;
	margin-top: -12px;
	margin-left: -10px;
	pointer-events: none;
	z-index: 1001;
}

.ar-navbar .dropdown .dropdown-arrow::before {
	content: "";
	position: absolute;
	bottom: -.375rem;
	left: 50%;
	display: block;
	height: .75rem;
	width: .75rem;
	margin-left: -5px;
	background-color: hsla(0, 0%, 100%, .98);
	box-shadow: 0 0 0 1px rgba(20, 20, 31, .05), 0 2px 7px 1px rgba(20, 20, 31, .16);
	pointer-events: none;
	-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
}

.ar-navbar .dropdown > .dropdown-arrow-left {
	left: 5rem;
}

.ar-card,
.ar-card .card-header:first-child {
	border-radius: .5rem;
}

.ar-card .card-body {
	padding: 1.5rem 2rem;
}

/* Custom CSS with no prefix */

.hljs {
	padding: 1rem !important;
	border: 1px #ccc solid;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	margin-bottom: 1rem !important;
}

.text-aruna {
	color: #039be5;
}

.text-pitaloka {
	color: #EB68A0;
}

.text-shania {
	color: #AD5BEC;
}

.text-cassandra {
	color: #e893f2;
}

.text-young-sunset {
	color: #fb8c00;
}

.text-young-purple {
	color: #AD5BEC;
}

.bg-aruna {
	background-color: #039be5;
}

.bg-pitaloka {
	background-color: #EB68A0;
}

.bg-shania {
	background-color: #AD5BEC;
}

.btn-aruna {
	color: #fff;
	background-color: #039be5;
	border-color: #039be5;
}

.btn-aruna:hover {
	color: #fff;
	background-color: #0170A4;
	border-color: #0170A4;
}

.btn-aruna:focus {
	box-shadow: 0 0 0 3px #81d4fa;
}

.btn-pitaloka {
	color: #fff;
	background-color: #EB68A0;
	border-color: #EB68A0;
}

.btn-pitaloka:hover {
	color: #fff;
	background-color: #BA527E;
	border-color: #BA527E;
}

.btn-pitaloka:focus {
	box-shadow: 0 0 0 3px #EBABC7;
}

.btn-shania {
	color: #fff;
	background-color: #AD5BEC;
	border-color: #AD5BEC;
}

.btn-shania:hover {
	color: #fff;
	background-color: #8043AF;
	border-color: #8043AF;
}

.btn-shania:focus {
	box-shadow: 0 0 0 3px #C899EC;
}

.btn-young-sunset {
	color: #fff;
	background-color: #fb8c00;
	border-color: #fb8c00;
}

.btn-young-sunset:hover {
	color: #fff;
	background-color: #dc7b00;
	border-color: #dc7b00;
}

.btn-young-sunset:focus {
	box-shadow: 0 0 0 3px #fbc888;
}

.btn-young-purple {
	color: #ffffff;
	background-color: #AD5BEC;
	border-color: #AD5BEC;
}

.btn-young-purple:hover {
	color: #ffffff;
	background-color: #8A48BC;
	border-color: #AD5BEC;
}

.btn-young-purple:focus {
	box-shadow: 0 0 0 0.2rem #DBC5EC;
}

.navbar-expand-md .navbar-nav .nav-link,
.navbar-expand-lg .navbar-nav .nav-link {
	padding-right: 1.0rem !important;
	padding-left: 1.0rem !important;
}

.content-header .page-header {
	background-size: cover;
}

.content-header .page-header .container {
	color: #fff;
	text-align: center;
	margin-top: 0 !important;
}

.header-filter .container {
	z-index: 2;
	position: relative;
}

.page-header.header-small {
	height: 50vh;
	min-height: 50vh;
}

.header-filter:before {
	z-index: 0 !important;
	background: rgba(0, 0, 0, 0.45);
}

.header-filter {
	position: relative;
}

.header-filter:after, 
.header-filter:before {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: block;
	left: 0;
	top: 0;
	content: "";
}

.page-header {
	height: 100vh;
	background-position: 50%;
	background-size: cover;
	margin: 0;
	padding: 0;
	border: 0;
	display: flex;
	align-items: center;
}

.preloader {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 99999;
	width: 100%;
	height: 100vh;
	background-color: #fff;
	overflow: hidden !important;
}

.avatar {
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
}

.mw-450-p {
	max-width: 450px;
}

.mw-500-p {
	max-width: 500px;
}

.card-border-color {
	border-top: 4.5px solid #c9c9c9;
}

.card-border-color-primary {
	border-top-color: #4285f4;
}

.card-border-color-dark {
	border-top-color: #3d3c3c;
}

.card-border-color-danger {
	border-top-color: #ea4335;
}

.card-border-color-warning {
	border-top-color: #fbbc05;
}

.card-border-color-success {
	border-top-color: #34a853;
}

.card-border-color-aruna {
	border-top-color: #039be5;
}

.card-full-color .card-header .card-subtitle, .card-full-color .card-header .icon, .card-full-primary, .card-full-primary .tools .icon {
	color: #FFF;
}

.card-full, .card-full .tools .icon {
	color: #FFF;
}

.card-full {
	border-width: 0 !important;
	background-color: #bdbdbd;
}

.card-full-primary {
	background-color: #5f99f5;
}

.card-full-danger {
	background-color: #eb6357;
	color: #FFF;
}

.card-full-warning {
	background-color: #f7b904;
	color: #FFF;
}

.card-full-success {
	background-color: #37b358;
	color: #FFF;
}

.card-full-dark {
	background-color: #333;
	color: #FFF;
}

.card-full-info {
	background-color: #17a2b8;
	color: #FFF;
}

.card-full-aruna {
	background-color: #039be5;
	color: #FFF;
}

.media-heading {
	display: table;
	table-layout: fixed;
	width: 100%;
	word-wrap: break-word;
}

.table-responsive tbody > tr > td {
	white-space: nowrap;
}

.dropdown-toggle::after {
	display: none;
}

.form-control {
	font-size: inherit !important;
}

.form-control-lg {
	font-size: initial !important;
	height: calc(2.875rem + 2px);
	padding: .5rem 1rem;
}

/* Add CSS Timeline */

/* The actual timeline (the vertical ruler) */
.timeline {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
	content: "";
	position: absolute;
	width: 6px;
	background-color: white;
	top: 0;
	bottom: 0;
	left: 50%;
	margin-left: -3px;
}

/* Container around content */
.container-timeline {
	padding: 10px 40px;
	position: relative;
	background-color: inherit;
	width: 50%;
}

/* The circles on the timeline */
.container-timeline::after {
	content: "";
	position: absolute;
	width: 25px;
	height: 25px;
	right: -12px;
	background-color: white;
	border: 4px solid #FF9F55;
	top: 15px;
	border-radius: 50%;
	z-index: 1;
}

/* Place the container to the left */
.left {
	left: 0;
}

/* Place the container to the right */
.right {
	left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
	content: "";
	height: 0;
	position: absolute;
	top: 22px;
	width: 0;
	z-index: 1;
	right: 30px;
	border: medium solid white;
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.right::before {
	content: "";
	height: 0;
	position: absolute;
	top: 22px;
	width: 0;
	z-index: 1;
	left: 30px;
	border: medium solid white;
	border-width: 10px 10px 10px 0;
	border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
	left: -13px;
}

/* The actual content */
.content {
	padding: 20px 30px;
	background-color: white;
	position: relative;
	border-radius: 6px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
	/* Place the timelime to the left */
	.timeline::after {
		left: 31px;
	}

	/* Full-width containers */
	.container-timeline {
		width: 100%;
		padding-left: 70px;
		padding-right: 25px;
	}

	/* Make sure that all arrows are pointing leftwards */
	.container-timeline::before {
		left: 60px;
		border: medium solid white;
		border-width: 10px 10px 10px 0;
		border-color: transparent white transparent transparent;
	}

	/* Make sure all circles are at the same spot */
	.left::after, .right::after {
		left: 15px;
	}

	/* Make all right containers behave like the left ones */
	.right {
		left: 0%;
	}
}