.uk-background-white {
	background: white;
}

.uk-table th:last-child {
	text-align: right;
}

.uk-table td:last-child {
	text-align: right;
}

.uk-detail-table th:last-child {
	text-align: left;
}

.uk-detail-table td:last-child {
	text-align: left;
}

.uk-detail-table tbody>tr:last-child>td:last-child {
	border: none;
}

.uk-detail-table th {
	padding-top: 10px;
	padding-bottom: 5px;
}

.uk-detail-table td {
	padding-top: 5px;
	padding-bottom: 10px;
}

.uk-detail-table tr td {
	border-bottom: solid #ccc 1px;
}

.uk-display-tab {
	border-style: none;
}

.uk-display-tab>li:nth-child(2) {
	padding-left: 0;
}

.button-rounded {
	border-radius: 40px;
}

.button-rounded-sm {
	border-radius: 5px;
}

.filter-row {
	cursor: pointer;
}

.uk-pointer {
	cursor: pointer;
}

/* BREADCRUMB CUSTOMIZE */
.uk-breadcrumb> :nth-child(n+2):not(.uk-first-column)::before {
	content: "\203A";
	display: inline-block;
	margin: 0 5px;
	color: #999;
}

/* ITEM */
.uk-breadcrumb>*>* {
	padding: 15px;
	display: inline-block;
	font-size: 0.875rem;
	color: #999;
}

.navbar-text-larger {
	font-size: 1rem !important;
}

/* XSMALL */
.uk-height-xsmall {
	height: 45px;
	overflow: hidden;
}

/* styles for '...' */
.block-with-text {
	/* hide text if it more than N lines  */
	overflow: hidden;
	/* for set '...' in absolute position */
	position: relative;
	/* use this value to count block height */
	line-height: 1.2em;
	/* max-height = line-height (1.2) * lines max number (3) */
	max-height: 3.6em;
	/* fix problem when last visible word doesn't adjoin right side  */
	text-align: justify;
	/* place for '...' */
	margin-right: -1em;
	padding-right: 1em;
}

/* create the ... */
.block-with-text:before {
	/* points in the end */
	content: '...';
	/* absolute position */
	position: absolute;
	/* set position to right bottom corner of block */
	right: 0;
	bottom: 0;
}

/* hide ... if we have text, which is less than or equal to max lines */
.block-with-text:after {
	/* points in the end */
	content: '';
	/* absolute position */
	position: absolute;
	/* set position to right bottom corner of text */
	right: 0;
	/* set width and height */
	width: 1em;
	height: 1em;
	margin-top: 0.2em;
	/* bg color = bg color under block */
	background: white;
}

.img-responsive {
	height: 200px;
	width: auto;
}

/* date-picker */
.datepicker-box {
	font-size: 0.75rem;
	font-weight: 400;
	display: block;
	margin-bottom: 0.1rem;
	color: #B0BEC5;
	border: 1px solid #ECEFF1;
	padding: 0.3rem 0.5rem;
	border-radius: 0.5rem;
}

.datepicker {
	font-family: 'Roboto', sans-serif;
	display: block;
	border: none;
	border-radius: 0.25rem;
	border: 1px solid transparent;
	line-height: 1.5rem;
	padding: 0;
	font-size: 1rem;
	color: #607D8B;
	width: 100%;
	margin-top: 0.1rem;
}

.datepicker:focus {
	outline: none;
}

#ui-datepicker-div {
	display: none;
	background-color: #fff;
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
	margin-top: 0.25rem;
	border-radius: 0.5rem;
	padding: 0.5rem;
}

.ui-datepicker-calendar thead th {
	padding: 0.25rem 0;
	text-align: center;
	font-size: 0.75rem;
	font-weight: 400;
	color: #78909C;
}

.ui-datepicker-calendar tbody td {
	width: 2.5rem;
	text-align: center;
	padding: 0;
}

.ui-datepicker-calendar tbody td a {
	display: block;
	border-radius: 0.25rem;
	line-height: 2rem;
	transition: 0.3s all;
	color: #546E7A;
	font-size: 0.875rem;
	text-decoration: none;
}

.ui-datepicker-calendar tbody td a:hover {
	background-color: #E0F2F1;
}

.ui-datepicker-calendar tbody td a.ui-state-active {
	background-color: #009688;
	color: white;
}

.ui-datepicker-header a.ui-corner-all {
	cursor: pointer;
	position: absolute;
	top: 0;
	width: 2rem;
	height: 2rem;
	margin: 0.5rem;
	border-radius: 0.25rem;
	transition: 0.3s all;
}

.ui-datepicker-header a.ui-corner-all:hover {
	background-color: #ECEFF1;
}

.ui-datepicker-header a.ui-datepicker-prev {
	left: 0;
	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==");
	background-repeat: no-repeat;
	background-size: 0.5rem;
	background-position: 50%;
	transform: rotate(180deg);
}

.ui-datepicker-header a.ui-datepicker-next {
	right: 0;
	background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==');
	background-repeat: no-repeat;
	background-size: 10px;
	background-position: 50%;
}

.ui-datepicker-header a>span {
	display: none;
}

.ui-datepicker-title {
	text-align: center;
	line-height: 2rem;
	margin-bottom: 0.25rem;
	font-size: 0.875rem;
	font-weight: 500;
	padding-bottom: 0.25rem;
}

.ui-datepicker-week-col {
	color: #78909C;
	font-weight: 400;
	font-size: 0.75rem;
}

* {
	box-sizing: border-box;
}

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

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

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

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

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

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

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

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

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

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

/* Media queries - Responsive ui-timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {

	/* Place the timelime to the left */
	.ui-timeline::after {
		left: 31px;
	}

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

	/* Make sure that all arrows are pointing leftwards */
	.ui-timeline-event::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 */
	.ui-event-left::after,
	.ui-event-right::after {
		left: 15px;
	}

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

	.uk-skip-button {
		position: fixed;
		bottom: 20px;
		right: 30px;
		width: 70px;
		height: 70px;
		color: #32d296;
	}
}