/*

KM-UI styles

*/



/* SYSTEM */

.km-ui-overflow-hidden {
	overflow: hidden !important;
}

.km-ui-visible {
	visibility: visible !important;
}

/* OVERLAY */

.km-ui-overlay {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	visibility: hidden;
	z-index: 1000000;

	&.km-ui-theme-dark {
		background: rgba(0,0,0,0.75);
	}

	&.km-ui-theme-light {
		background: rgba(255,255,255,0.75);
	}
}



/* MODAL WINDOW */

.km-ui-modal-window {
	position: fixed;
	left: 50%;
	top: 50%;
	visibility: hidden;
	border-radius: 10px;
	z-index: 1000010;
	font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
	box-shadow: 0 5px 30px rgba(0,0,0,.3);

	&.km-ui-theme-dark {
		background: rgba(0,0,0,0.75);
	}

	&.km-ui-theme-light {
		background: white;
	}

	.km-ui-prevent-events {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1000000;
		display: none;
	}

	&.km-ui-animating .km-ui-prevent-events {
		display: block !important;
	}

	header,
	header.km-ui-modal-header {

		box-shadow: none !important;

		b,
		.close,
		.km-ui-close,
		.km-ui-modal-close {
			width: 25px;
			height: 26px;
			padding-left: 1px;
			position: absolute;
			right: 0px;
			top: -8px;
			text-align: center;
			line-height: 27px;
			color: #ccc	!important;
			cursor: pointer !important;
			font-size: 23px;
			border-radius: 100px;
			border: 2px solid #ccc !important;

			&:hover {
				color: #999 !important;
				border-color: #999 !important;
			}
		}

		h1 {
			position: fixed;
			margin: 0 !important;
			padding: 0 !important;
			font-size: 24px;
			font-weight: 400;
			color: #555 !important;
		}
	}

	.km-ui-modal-scrollable {
		position: absolute !important;
		overflow: auto !important;
		display: block !important;
		text-align: center;
		font-size: 15px;
		line-height: normal !important;
	}

	> div, p, ul, li {
		padding: 0 !important;
		border: 0 !important;
		margin: 0 auto !important;
		font-size: 100%;
		line-height: 1.5em;
		color: #777;
		box-shadow: none !important;
	}

	p, ul, li {
		text-align: left;
	}

	p, ul, button,
	.button {
		margin-bottom: 24px !important;
	}

	li {
		list-style-type: circle;
		margin: 0 0 10px 30px !important;

		&:last-child {
			margin-bottom: 0 !important;
		}
	}

	button,
	.button {
		margin: 24px auto !important;
		border-radius: 100px;
	}
}

/* POPOVER, TOOLTIP */

.ls-popover-data,
.km-ui-popover.data,
body.hidepopover .km-ui-popover
.km-ui-popover-hide .km-ui-popover {
	display: none !important;
}

.km-ui-popover {
	max-width: 260px;
	min-width: 80px;
	position: absolute;
	padding: 15px;
	border-radius: 7px;
	font-fmaily: 'Montserrat', 'Open Sans', Arial, sans-serif;
	text-align: justify;
	z-index: 1000020;

	background: #000;
	background: rgba(0,0,0,.8);
	color: rgba(255,255,255,.95) !important;
	font-weight: 300 !important;
	font-size: 14px;
	line-height: 20px;
	box-shadow: 0px 4px 20px rgba(0,0,0,.5);

	> span {
		display: block;
		width: 0px;
		height: 0px;
		position: absolute;
		bottom: -7px;
		left: 50%;
		margin-left: -7px;
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-top: 7px solid rgba(0,0,0,.7);
	}

	&.km-ui-direction-btm {

		> span {
			bottom: auto;
			top: -14px;
			border-bottom: 7px solid rgba(0,0,0,.7);
			border-top-color: transparent;
		}
	}

	&.popover-light,
	&.km-ui-theme-light {
		background: white;
		background: rgba(255,255,255,.9);
		color: #555;
		box-shadow: 0px 2px 15px -7px black !important;

		> span {
			opacity: .9;
			border-top: 7px solid white;
		}

		&.km-ui-direction-btm {

			> span {
				border-bottom: 7px solid white;
				border-top-color: transparent;
			}
		}
	}

	&.km-ui-theme-red {
		background: rgba(255,0,0,.7) !important;
		color: white !important;
		font-weight: 600 !important;
		box-shadow: none !important;

		> span {
			border-top: 7px solid rgba(255,0,0,.7) !important;
		}

		&.km-ui-direction-btm {

			> span {
				border-bottom: 7px solid rgba(255,0,0,.7) !important;
				border-top-color: transparent !important;
			}
		}
	}
}


/* COMMON */

.km-ui-element {

	div, p, ul, li {

		&.small,
		&.km-ui-font-small,
		.small,
		.km-ui-font-small {
			font-size: 80% !important;
		}

		&.tiny,
		&.km-ui-font-tiny,
		.tiny,
		.km-ui-font-tiny {
			font-size: 80% !important;
		}

		&.large,
		&.km-ui-font-large,
		.large,
		.km-ui-font-large {
			font-size: 120% !important;
		}

		&.dark,
		&.km-ui-font-dark,
		.dark,
		.km-ui-font-dark {
			color: #222;
			font-weight: 400 !important;
		}

		&.dim,
		&.km-ui-font-dim,
		.dim,
		.km-ui-font-dim {
			opacity: .75 !important;
		}

		&.notice,
		&.km-ui-font-notice,
		.notice,
		.km-ui-font-notice {
			color: red;
			font-weight: 400 !important;
		}

		&.bold,
		&.km-ui-font-bold,
		.bold,
		.km-ui-font-bold {
			font-weight: 600 !important;
		}

		&.center,
		&.km-ui-font-center,
		.center,
		.km-ui-font-center {
			text-align: center !important;
		}

		&.italic,
		&.km-ui-font-italic,
		.italic,
		.km-ui-font-italic {
			font-style: italic !important;
		}

		&.centered,
		&.km-ui-font-centered,
		.centered,
		.km-ui-font-centered {
			display: block !important;
			width: 60% !important;
		}
	}
}