@import "variables";

//reset.css
html,body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}
body {
	background: #fff;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	//font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.5;
	color: $color_black;
	//@media (max-width: 767px) { font-size: 16px; line-height: 1.4em; }
	&.overflow { overflow: hidden; }
}
input, select, textarea {
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	//font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	color: $color_black;
	outline: none !important;
	//@media (max-width: 767px) { font-size: 16px; }
}

p { margin: 0px 0px 1em 0px; padding: 0px; }

a, a:link, a:visited {
	border-bottom: 1px solid rgba(13,97,171,0.3);
	color: $color_primary;
	text-decoration: none;
	@include transition();
}
a:hover {
	border-bottom-color: $color_primary;
	text-decoration: none;
}
a:focus,a:active {outline: none;}
a img, :link img, :visited img {border: none;}

table {border-collapse: collapse; border-spacing: 0;}
table td {padding: 0px;}

address {font-style: normal;}

label {
	margin: 0px;
	font-weight: normal;
}

/*svg { display: inline-block; }
a svg { display: block; }*/

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	margin: 0px 0px 1em 0px;
	padding: 0px;
	font-weight: bold;
	line-height: 1.3em;
	color: $color_black;
}
h1, .h1 {
	margin-bottom: 0.35em; font-size: 3em; line-height: 1.3em;
	//@media (max-width: 767px){ font-size: 2em; }
}
h2, .h2 {
	margin-bottom: 0.55em; font-size: 2.4em; line-height: 1.3em;
	//@media (max-width: 767px){ font-size: 1.8em; }
}
h3, .h3 {
	margin-bottom: 0.65em; font-size: 1.8em; line-height: 1.3em;
	//@media (max-width: 767px){ font-size: 1.6em; }
}
h4, .h4 {
	margin-bottom: 0.65em; font-size: 1.6em; line-height: 1.3em;
	//@media (max-width: 767px){ font-size: 1.4em; }
}
h5, .h5 {
	margin-bottom: 0.65em; font-size: 1.4em; line-height: 1.3em;
	//@media (max-width: 767px){ font-size: 1.3em; }
}
h6, .h6 {
	margin-bottom: 1em; font-size: 1.2em; line-height: 1.3em;
	//@media (max-width: 767px){ font-size: 1.2em; }
}

//bootstrap.css
.fs-12 {font-size: 0.85em !important; line-height: 1.5em;}
.fs-14 {font-size: 1em !important; line-height: 1.5em;}
.fs-16 {font-size: 1.15em !important; line-height: 1.5em;}
.fs-18 {font-size: 1.3em !important; line-height: 1.5em;}
.fs-20 {font-size: 1.4em !important; line-height: 1.5em;}
.fs-22 {font-size: 1.6em !important; line-height: 1.5em;}
.fs-24 {font-size: 1.75em !important; line-height: 1.5em;}
.fs-32 {font-size: 2.2em !important; line-height: 1.5em;}
.fs-36 {font-size: 2.4em !important; line-height: 1.5em;}
.fs-42 {font-size: 2.8em !important; line-height: 1.5em;}
.fs-44 {font-size: 3em !important; line-height: 1.5em;}

.fw-thin {font-weight: 200;}
.fw-light {font-weight: 300;}
.fw-normal {font-weight: 400;}
.fw-medium {font-weight: 500;}
.fw-semibold {font-weight: 600;}
.fw-bold {font-weight: 700;}
.fw-extra {font-weight: 800;}
.fw-black {font-weight: 900;}

.lh-n {line-height: normal;}
.lh-1 {line-height: 1em;}
.lh-15 {line-height: 1.5em;}
.lh-2 {line-height: 2em;}

.text-underline { text-decoration: underline; }
.text-nowrap { white-space: nowrap !important; }

.word-wrap-break { word-wrap: break-word; }

.ellipsis {
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* --- colors --- */
.bg-danger { background: $color_danger; color: $color_white; }
.bg-warning { background: $color_warning; color: $color_black; }

.color-white {color: $color_white !important; fill: $color_white;}
.color-black {color: $color_black !important; fill: $color_black;}
.color-primary {color: $color_primary !important; fill: $color_primary;}
.color-secondary {color: $color_secondary !important; fill: $color_secondary;}
.color-danger {color: $color_danger !important; fill: $color_danger;}
.color-warning {color: $color_warning !important; fill: $color_warning;}
.color-success {color: $color_success !important; fill: $color_success;}
.color-green {color: $color_green !important; fill: $color_green;}
.color-toxic {color: $color_toxic !important; fill: $color_toxic;}
.color-gray {color: $color_gray_30 !important; fill: $color_gray_30;}
.color-wild { color: $color_wildblue; }


/* --- img --- */
.img-block {
	position: relative;
	display: block;
	width: 100%;
	img {
		display: block;
		width: 100%;
	}
}
.img-thumbnail {
	margin: 0px; padding: 0px;
	border-color: $color_gray_10;
	@include border-radius(0px);
}

.shadow {
	//@include box-shadow(0px 0px 3px $color_gray_20);
}

/* --- alerts --- */
.alert {
	position: relative;
	margin-bottom: 0px;
	color: $color_black;
	@include border-radius(4px);

	p { margin: 0px 0px .75em 0px; }

	&.alert-xs { padding: 4px; font-size: 13px; }
	&.alert-sm { padding: 8px; }

	&.alert-square {
		@include border-radius(0px);
	}

	&.alert-default {
		background: $color_gray_30;
		border: 1px solid $color_gray_30;
		color: $color_white;
		a:not(.btn) {
			border-bottom-color: rgba(255,255,255,0.5);
			color: inherit;
			&:hover {
				border-bottom-color: $color_white;
			}
		}
	}
	&.alert-success {
		background: lighten($color_toxic, 25%);
		border: 1px solid lighten($color_toxic, 15%);
	}
	&.alert-info {
		background: $color_water;
		border-color: $color_water;
	}
	&.alert-warning {
		background: lighten($color_danger, 30%);
		border: 1px solid lighten($color_danger, 20%);
	}
	&.alert-danger {
		background: lighten($color_warning, 45%);
		border: 1px solid lighten($color_warning, 40%);
	}
	&.alert-important {
		background: #ffca35;
		border-color: #ffca35;
	}
}

.highlight {
	padding: 0px 4px;
	//@include border-radius(2px);
	&.highlight-mystic {
		background: $color_mystic;
	}
	&.highlight-warning {
		background: $color_danger;
	}
}
em.highlight {
	font-style: normal;
	padding: 0px;
}

/* --- lists --- */
.list-inline {
	margin-bottom: 0px;
	margin-right: -5px;
	&.list-inline-middle {
		& > li { vertical-align: middle; }
	}
	&.list-inline-4 {
		$size : 4px;
		margin-left: -$size/2; margin-right: -$size/2;
		& > li { padding-left: $size/2; padding-right: $size/2; }
	}
	&.list-inline-8 {
		$size : 8px;
		margin-left: -$size/2; margin-right: -$size/2;
		& > li { padding-left: $size/2; padding-right: $size/2; }
	}
	&.list-inline-12 {
		$size : 12px;
		margin-left: -$size/2; margin-right: -$size/2;
		& > li { padding-left: $size/2; padding-right: $size/2; }
	}
	&.list-inline-20 {
		$size : 20px;
		margin-left: -$size/2; margin-right: -$size/2;
		& > li { padding-left: $size/2; padding-right: $size/2; }
	}
	&.responsive-xxs {
		& > li {
			@media(max-width: 449px){
				display: block;
				margin-top: 10px;
				&:first-child { margin-top: 0px; }
			}
		}
	}
	&.responsive-sm-down {
		& > li {
			@media(max-width: 991px){
				display: block;
				margin-top: 10px;
				&:first-child { margin-top: 0px; }
			}
		}
	}
}

.list-unstyled {
	margin-bottom: 0px;
	&.list-unstyled-4 {
		& > li + li { margin-top: 4px; }
	}
	&.list-unstyled-8 {
		& > li + li { margin-top: 8px; }
	}
	&.list-unstyled-12 {
		& > li + li { margin-top: 12px; }
	}
	&.list-unstyled-16 {
		& > li + li { margin-top: 16px; }
	}
	&.list-unstyled-20 {
		& > li + li { margin-top: 20px; }
	}
	&.list-unstyled-24 {
		& > li + li { margin-top: 24px; }
	}
	&.list-unstyled-5 {
		$size : 5px;
		& > li {
			margin-top: $size;
			&:first-child { margin-top: 0px; }
		}
	}
	&.list-unstyled-10 {
		$size : 10px;
		& > li {
			margin-top: $size;
			&:first-child { margin-top: 0px; }
		}
	}
	&.list-unstyled-15 {
		$size : 15px;
		& > li {
			margin-top: $size;
			&:first-child { margin-top: 0px; }
		}
	}
	&.list-unstyled-20 {
		$size : 20px;
		& > li {
			margin-top: $size;
			&:first-child { margin-top: 0px; }
		}
	}
}

.list-dotted {
	margin: 0px; padding: 0px; list-style: none;
	li {
		position: relative;
		margin-top: 4px;
		padding-left: 12px;
		&:first-child { margin-top: 0px; }
		&:before {
			content: '';
			background: $color_gray_30;
			position: absolute; top: 10px; left: 0px;
			display: block; width: 4px; height: 4px;
			@include border-radius(50%);
		}
	}
	&.fs-12 {
		li {
			&:before { top: 8px; }
		}
	}
}

.list-ol {
	margin: 0px; padding: 0px; list-style: none;
	counter-reset: item;
	& > li {
		position: relative;
		display: block;
		padding-left: 25px;
		& + li { margin-top: 10px; }
		&:before {
			content: counters(item, ".") ".";
			counter-increment: item;
			position: absolute;
			top: 0px;
			left: 0px;
			//font-weight: bold;
		}
		ol {
			margin: 0px; padding: 10px 0px 0px 0px; list-style: none;
			counter-reset: item;
			& > li {
				position: relative;
				padding-left: 35px;
				& + li { margin-top: 10px; }
				&:before {
					content: counters(item, ".") ".";
					counter-increment: item;
					position: absolute;
					top: 0px;
					left: 0px;
					//font-weight: bold;
				}
			}
		}
		ul {
			margin: 0px; padding: 10px 0px 0px 0px; list-style: none;
			li {
				position: relative;
				padding-left: 15px;
				&:before {
					content: '';
					background: $color_black;
					position: absolute; top: 0.6em; left: 0px;
					display: block; width: 6px; height: 6px;
					@include border-radius(50%);
				}
				& + li { margin-top: 5px; }
			}
		}
	}
}

/* --- panel --- */
.panel {
	position: relative;
	margin: 0px;
	@include border-radius(0px);
	.panel-heading {
		padding: 18px 24px;
		@include border-radius(0px);
		h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
			margin: 0px;
		}
	}
	.panel-body {
		padding: 18px 24px;
		@include border-radius(0px);
		&.sm {
			padding: 8px 12px;
		}
	}
	.panel-footer {
		padding: 18px 24px;
		@include border-radius(0px);
	}

	&.panel-round {
		@include border-radius(3px);
		.panel-heading {
			@include border-radius(3px 3px 0px 0px);
		}
		.panel-footer {
			@include border-radius(0px 0px 3px 3px);
		}
	}

	&.panel-tab {
		.panel-heading {
			background: $color_gray_10;
			display: inline-block;
			padding: 4px 12px 2px;
			font-size: 12px;
			font-weight: bold;
		}
		.panel-body {
			border: 4px solid $color_gray_10;
			padding: 8px;
		}

		&.panel-tab_green {
			.panel-heading {
				background-color: #bff4ae;
			}
			.panel-body {
				border-color: #bff4ae;

				.mCustomScrollbar .mCustomScrollBox .mCSB_scrollTools .mCSB_draggerContainer .mCSB_dragger .mCSB_dragger_bar {
					background-color: $color_toxic !important;
				}
			}
		}
	}

	&.panel-success {
		background: lighten($color_toxic, 25%);
		border-color: lighten($color_toxic, 15%);
	}

	&.panel-gray {
		background: $color_gray_05;
		border-color: $color_gray_05;
	}

	&.panel-pink {
		background: lighten($color_body, 20%);
		border-color: $color_gray_10;
	}

	&.panel-water {
		background: $color_water;
		border-color: $color_water;
	}

	&.panel-white {
		background: $color_white;
		border-color: $color_white;
	}
}

/* --- media --- */
ul.media-list {
	margin: 0px; padding: 0px; list-style: none;
	& > li { position: relative; }
	&.media-list-10 {
		& > li {
			& + li {
				margin-top: 10px;
			}
		}
	}
	&.media-list-20 {
		& > li {
			& + li {
				margin-top: 20px;
			}
		}
	}
	&.media-list_table {
		& > li {
			border-top: 1px solid $color_gray_10;
			padding: 8px;
		}
	}
}
.media {
	margin-top: 20px;
	.media-left {
		padding-right: 20px;
		&.media-left_4 { padding-right: 4px; }
		&.media-left_8 { padding-right: 8px; }
		&.media-left_10 { padding-right: 10px; }
	}
	.media-right {
		padding-left: 20px;
		&.media-right_4 { padding-left: 4px; }
		&.media-right_8 { padding-left: 8px; }
		&.media-right_10 { padding-left: 10px; }
	}
	.media-img { padding-top: 4px; }
	&.media-responsive-xxs {
		@media (max-width : 449px) {
			.media-left { display: block; width: auto; margin: 0px; padding: 0px 0px 20px 0px; }
			.media-right { display: block; width: auto; margin: 0px; padding: 20px 0px 0px 0px; }
			.media-body { display: block; width: auto; }
		}
	}
	&.media-responsive-xs {
		@media (max-width : 767px) {
			.media-left { display: block; width: auto; margin: 0px; padding: 0px 0px 12px 0px; }
			.media-right { display: block; width: auto; margin: 0px; padding: 12px 0px 0px 0px; }
			.media-body { display: block; width: auto; }
		}
	}
	.img-thumbnail {
		max-width: none;
	}
}

//table
.table {
	margin: 0px;
	font-size: 12px;
	thead {
		font-size: 11px;
		tr {
			th, td {
				vertical-align: middle;
			}
		}
		&.thead-dark {
			tr {
				th, td {
					background: $color_gray_20;
					border-bottom: none;
				}
			}
		}
		&.thead-y-sm {
			th, td {
				padding-top: 2px;
				padding-bottom: 2px;
			}
		}
	}
}

/* --- forms --- */
.form-control {
	border-color: $color_gray_30;
	height: 32px;
	padding: 5px 12px;
	color: $color_gray_90;
	@include border-radius(2px);
	@media (max-width: 449px) {
		padding-top: 9px;
		padding-bottom: 9px;
		height: 40px;
	}
	//@include box-shadow();
	&:focus {
		border-color: $color_primary;
	}
	&.input-sm {
		height: 28px;
		padding: 4px 8px;
	}
	&.input-lg {
		height: 46px;
		padding: 10px 16px;
	}
}
textarea.form-control {height: auto !important;}
select.form-control {
	padding-left: 8px; padding-right: 8px;
}

.has-error {
	.form-control {
		border-color: $color_warning !important;
		color: $color_warning !important;
		//@include placeholder($color_warning);
	}
}

.form-group {
	position: relative;
	margin: 0px;

	.help-block {
		margin: 2px 0px 4px 0px;
		font-size: 0.9em;
		line-height: normal;
	}

	.form-help {
		margin: 2px 0px 0px 0px;
		font-size: 0.85em;
		line-height: normal;
	}

	.form-label {
		margin-bottom: 2px;
	}

	.form-check-hidden { display: none; }
	.form-check.active + .form-check-hidden { display: block; }


	&.has-error {
		label, .form-label { color: $color_warning !important; }
		.help-block { color: $color_warning; }
		.form-control {
			border-color: $color_warning !important;
			color: $color_warning !important;
			//@include placeholder($color_warning !important);
		}
	}

	&.form-group_placeholder {
		background: $color_white;
		position: relative;
		.form-label {
			position: absolute; top: 6px; left: 13px;
			z-index: 1;
			@include transition();
		}
		.form-control {
			background: none;
			position: relative;
			z-index: 2;
		}
		&.active {
			.form-label {
				top: -22px;
				font-size: 11px;
			}
		}
	}
}

.error-message { color: $color_warning !important; }

.input-group {
	.form-field {
		position: relative;
		z-index: 2;
		float: left;
		width: 100%;
		margin-bottom: 0;
	}
	.input-group-addon {
		&.input-group-image {
			padding: 0px;
			img { display: block; height: 30px; }
		}
	}
	&.input-group-lg {
		.input-group-addon {
			&.input-group-image {
				img { height: 44px; }
			}
		}
	}
}

.form-iconbox {
	position: relative;
	.form-iconbox__icon {
		position: absolute; top: 50%;
		img { display: block; width: 100%; }
	}
	&.type_external {
		.form-iconbox__icon {left: 100%; margin-left: 10px;}
	}
	&.type_inner {
		&.size_16 {
			.form-iconbox__icon {right: 6px;}
			.form-control { padding-right: 24px; }
		}
		&.size_24 {
			.form-iconbox__icon {right: 8px;}
			.form-control { padding-right: 36px; }
		}
	}
	&.size_16 {
		.form-iconbox__icon {display: block; width: 16px; height: 16px; margin-top: -8px;}
	}
	&.size_24 {
		.form-iconbox__icon {display: block; width: 24px; height: 24px; margin-top: -12px;}
	}
}

.form-field {
	position: relative;
	.form-field__icon {
		position: absolute; top: 50%; right: 10px;
		z-index: 5;
		@include transform(translateY(-50%));
		&.size_16 { display: block; width: 16px; height: 16px; }
		&.size_24 { display: block; width: 24px; height: 24px; }
		&.js-datepicker-ico {
			display: block; width: 16px; height: 16px;
			color: $color_gray_50;
			&:hover { cursor: pointer; color: $color_primary; }
		}
		.closer { position: relative; top: auto; bottom: auto; left: auto; right: auto; display: block; }
	}
}

.form-horizontal {
	.control-label {
		padding-top: 5px;
		text-align: left;
	}
}

.form-table {
	tr {
		td {
			padding: 4px 0px 0px 8px;
			&:first-child { padding-left: 0px; }
		}
		&:first-child {
			td { padding-top: 0px; }
		}
	}
}

.checkbox {
	margin: 0px !important;
	padding: 0px !important;
	min-height: auto !important;
}

.form-subscriber {
	position: relative;
	display: inline-block;
	padding: 4px 8px 8px 4px;
	margin: 0px 0px 0px -4px;
	&:hover {
		background: lighten($color_danger, 35%);
	}

	.form-check {
		&.active {
			.arr {
				background: lighten($color_danger, 20%);
			}
		}
	}
}

.form-check {
	position: relative;
	input {
		position: absolute; top: 50%; left: 0px;
		margin: 0px; padding: 0px;
		@include transform(translateY(-50%));
	}
	label {
		display: inline-block;
		padding-left: 22px;
		&:hover {
			cursor: pointer;
		}
	}
	&.stylize {
		input {
			visibility: hidden;
		}
		.arr {
			background: $color_white;
			border: 1px solid $color_gray_20;
			position: absolute; top: 0px; left: 0px;
			display: block; width: 14px; height: 14px;
			margin: .25em 0px 0px 0px;
			&.arr-check {
				@include border-radius(2px);
				&:before {
					content: '';
					background: transparent;
					position: absolute; top: 7px; left: 1px;
					display: block; width: 5px; height: 1px;
					@include transform(rotate(45deg));
				}
				&:after {
					content: '';
					background: transparent;
					position: absolute; top: 6px; left: 4px;
					display: block; width: 8px; height: 1px;
					@include transform(rotate(-45deg));
				}
			}
			&.arr-radio {
				@include border-radius(50%);
				&:before {
					content: '';
					background: transparent;
					position: absolute; top: 50%; left: 50%;
					display: block; width: 6px; height: 6px;
					margin: -3px 0px 0px -3px;
					@include border-radius(50%);
				}
			}
		}
		&.active {
			.arr {
				&.arr-check {
					&:before {
						background: $color_black;
					}
					&:after {
						background: $color_black;
					}
				}
				&.arr-radio {
					&:before {
						background: $color_black;
					}
				}
			}
		}
	}
}

.label {
	padding: .2em .6em;
	font-size: 100%;
	font-weight: normal;
	line-height: normal;
	color: $color_black;
	&.label-default {
		background: $color_gray_40;
		color: $color_white;
	}
	&.label-warning { background: $color_warning; }
	&.label-danger { background: $color_danger; color: $color_white; }
}

/* --- btns --- */
.btn {
	position: relative;
	//padding: 4px 12px 6px;
	padding: 5px 12px;
	line-height: 20px;
	color: $color_white !important;
	text-decoration: none !important;
	white-space: normal;
	@include border-radius(3px !important);
	@include transition();
	//@media (max-width: 767px) { font-size: 16px; }
	@media (max-width: 449px) { padding-top: 9px; padding-bottom: 9px; }

	input {
		background: none; border: none;
		position: absolute; top: 0px; left: 0px;
		display: block; width: 100%; height: 100%;
		margin: 0px; padding: 0px;
		opacity: 0;
		&:hover {cursor: pointer;}
	}

	&.btn-sm {
		padding: 4px 8px;
		line-height: 18px;
		//@media (max-width: 767px) { font-size: 14px; }
	}
	&.btn-lg {
		padding: 10px 16px;
		line-height: 24px;
		//@media (max-width: 767px) { font-size: 18px; }
	}

	&.btn-long {
		padding-left: 24px; padding-right: 24px;
		&.btn-sm { padding-left: 16px; padding-right: 16px; }
		&.btn-lg { padding-left: 32px; padding-right: 32px; }
	}

	&.btn-block {
		padding-left: 5px;
		padding-right: 5px;
	}

	&.btn-blank {
		background: $color_white;
		border-color: $color_gray_20;
		color: $color_black !important;
		&:hover {
			border-color: $color_primary;
			color: $color_primary !important;
		}
	}

	&.btn-default {
		background: $color_gray_20;
		background: linear-gradient(180deg, #E6E6E6 0%, #CCCCCC 100%);
		border-color: $color_gray_20;
		color: $color_black !important;
		&:hover {
			background: $color_gray_10;
			background: linear-gradient(180deg, #F5F5F5 0%, #D9D9D9 100%);
			border-color: $color_gray_10;
		}
	}

	&.btn-primary {
		background: $color_primary;
		@include linear-gradient(180deg, #2E75D1 0%, #002B81 100%);
		border-color: $color_primary;
		&:not(.sample):hover {
			background: #2E75D1;
			@include linear-gradient(180deg, #388EFF 0%, #003CB5 100%);
			border-color: $color_primary;
		}
	}

	&.btn-success {
		background: #006700;
		@include linear-gradient(180deg, #00C800 0%, #006700 100%);
		border-color: #006700;
		&:hover {
			background: #009900;
			@include linear-gradient(180deg, #00C800 0%, #009900 100%);
			border-color: #009900;
		}
	}

	&.btn-info {
		background: #506585;
		@include linear-gradient(180deg, #98A9C1 0%, #506585 100%);
		border-color: #506585;
		&:hover {
			background: #5B7498;
			@include linear-gradient(180deg, #A5B3C9 0%, #5B7498 100%);
			border-color: #5B7498;
		}
	}

	&.btn-warning {
		background: #F3B500;
		@include linear-gradient(180deg, #FFDA6F 0%, #F3B500 100%);
		border-color: #F3B500;
		color: $color_black !important;
		&:hover {
			background: #FFC20F;
			@include linear-gradient(180deg, #FFE187 0%, #FFC20F 100%);
			border-color: #FFC20F;
		}
	}

	&.btn-danger {
		background: #8A0707;
		@include linear-gradient(180deg, #D70A0A 0%, #8A0707 100%);
		border-color: #8A0707;
		&:hover {
			background: #BD0909;
			@include linear-gradient(180deg, #FF0D0D 0%, #BD0909 100%);
			border-color: #BD0909;
		}
	}

	&.btn-link {
		color: $color_primary !important;
	}

	&.disabled {
		background: $color_gray_10 !important;
		border-color: $color_gray_10 !important;
		color: $color_gray_40 !important;
	}

	&.sample {
		cursor: default !important;
	}
}

/* --- modal --- */
.modal-open {padding-right: 0px !important;}
.modal-backdrop {
	&.in {
		opacity: 0.75;
	}
}
.modal {
	padding-left: 0px !important;
	padding-right: 0px !important;

	.cross {
		background-color: #7D92B3;
		border: none;
		position: absolute; top: 16px; right: 16px; z-index: 5;
		display: block; width: 24px; height: 24px;
		@include border-radius(3px);
		@include transition();
		@media (max-width: 767px) {
			top: 8px; right: 8px;
		}
		&:before {
			content: '';
			background: #fff;
			position: absolute; top: 50%; left: 50%;
			display: block; width: 18px; height: 2px;
			margin: -1px 0px 0px -9px;
			@include transform(rotate(-45deg));
			@include border-radius(4px);
		}
		&:after {
			content: '';
			background: #fff;
			position: absolute; top: 50%; left: 50%;
			display: block; width: 18px; height: 2px;
			margin: -1px 0px 0px -9px;
			@include transform(rotate(45deg));
			@include border-radius(4px);
		}
		&:hover {
			background: darken(#7D92B3, 10%);
			cursor: pointer;
		}
	}
	.modal-dialog {
		position: relative;
		margin: 50px auto;
		//min-height: calc( 100% - 100px );
		@media (max-width: 767px){
			margin: 10px;
			//min-height: calc( 100% - 10px );
		}

		/*display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;*/

		.modal-content {
			background: #fff;
			border: none;
			@include border-radius(3px);
			@include box-shadow(0px 2px 4px 0px rgba(0,0,0,0.5));

			/*display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-ms-flex-direction: column;
			flex-direction: column;*/


			.modal-header {
				background: #dde4ec;
				padding: 16px 24px;
				font-size: 18px;
				line-height: 1.25;
				font-weight: bold;
				@include border-radius(3px 3px 0px 0px);
				&.danger {
					background: $color_warning;
					color: $color_white;
					.cross {
						background: $color_white;
						opacity: 0.75;
						&:before, &:after {
							background: $color_warning;
						}
						&:hover {
							opacity: 1;
						}
					}
				}
			}
			.modal-body {
				padding: 24px;
				&.padd-50 {
					padding: 48px 50px;
					@media (max-width: 767px) {padding: 32px;}
				}
				&.modal-body-fix {
					overflow-y: auto;
					max-height: 500px;
				}
			}
			.modal-footer {
				background: #dde4ec;
				padding: 13px 24px;
				@include border-radius(0px 0px 3px 3px);
				&.white { background: $color_white; }
			}
		}
	}
}

//row-phone
.row-phone {
	margin-left: 0px !important; margin-right: 0px !important;
	$codeW : 80px;
	.row-phone__code {
		float: left;
		width: $codeW;
		.bootstrap-select .btn .filter-option {
			text-overflow: clip !important;
		}
	}
	.row-phone__number {
		margin-left: $codeW + 8;
	}
}

/* --- grid --- */
.row-sep-dash {
	position: absolute; top: 50%; left: 50%;
	display: block; width: 20px; height: 20px;
	margin: -10px 0px 0px -10px;
	text-align: center;
	line-height: 16px;
}
.row-0 { margin-left: 0px !important; margin-right: 0px !important; }
.row-0 > .col-xs-1, .row-0 > .col-sm-1, .row-0 > .col-md-1, .row-0 > .col-lg-1, .row-0 > .col-xs-2, .row-0 > .col-sm-2, .row-0 > .col-md-2, .row-0 > .col-lg-2, .row-0 > .col-xs-3, .row-0 > .col-sm-3, .row-0 > .col-md-3, .row-0 > .col-lg-3, .row-0 > .col-xs-4, .row-0 > .col-sm-4, .row-0 > .col-md-4, .row-0 > .col-lg-4, .row-0 > .col-xs-5, .row-0 > .col-sm-5, .row-0 > .col-md-5, .row-0 > .col-lg-5, .row-0 > .col-xs-6, .row-0 > .col-sm-6, .row-0 > .col-md-6, .row-0 > .col-lg-6, .row-0 > .col-xs-7, .row-0 > .col-sm-7, .row-0 > .col-md-7, .row-0 > .col-lg-7, .row-0 > .col-xs-8, .row-0 > .col-sm-8, .row-0 > .col-md-8, .row-0 > .col-lg-8, .row-0 > .col-xs-9, .row-0 > .col-sm-9, .row-0 > .col-md-9, .row-0 > .col-lg-9, .row-0 > .col-xs-10, .row-0 > .col-sm-10, .row-0 > .col-md-10, .row-0 > .col-lg-10, .row-0 > .col-xs-11, .row-0 > .col-sm-11, .row-0 > .col-md-11, .row-0 > .col-lg-11, .row-0 > .col-xs-12, .row-0 > .col-sm-12, .row-0 > .col-md-12, .row-0 > .col-lg-12 { padding-left: 0px !important; padding-right: 0px !important; }
.row-10 { margin-left: -5px !important; margin-right: -5px !important; }
.row-10 > .col-xs-1, .row-10 > .col-sm-1, .row-10 > .col-md-1, .row-10 > .col-lg-1, .row-10 > .col-xs-2, .row-10 > .col-sm-2, .row-10 > .col-md-2, .row-10 > .col-lg-2, .row-10 > .col-xs-3, .row-10 > .col-sm-3, .row-10 > .col-md-3, .row-10 > .col-lg-3, .row-10 > .col-xs-4, .row-10 > .col-sm-4, .row-10 > .col-md-4, .row-10 > .col-lg-4, .row-10 > .col-xs-5, .row-10 > .col-sm-5, .row-10 > .col-md-5, .row-10 > .col-lg-5, .row-10 > .col-xs-6, .row-10 > .col-sm-6, .row-10 > .col-md-6, .row-10 > .col-lg-6, .row-10 > .col-xs-7, .row-10 > .col-sm-7, .row-10 > .col-md-7, .row-10 > .col-lg-7, .row-10 > .col-xs-8, .row-10 > .col-sm-8, .row-10 > .col-md-8, .row-10 > .col-lg-8, .row-10 > .col-xs-9, .row-10 > .col-sm-9, .row-10 > .col-md-9, .row-10 > .col-lg-9, .row-10 > .col-xs-10, .row-10 > .col-sm-10, .row-10 > .col-md-10, .row-10 > .col-lg-10, .row-10 > .col-xs-11, .row-10 > .col-sm-11, .row-10 > .col-md-11, .row-10 > .col-lg-11, .row-10 > .col-xs-12, .row-10 > .col-sm-12, .row-10 > .col-md-12, .row-10 > .col-lg-12 { padding-left: 5px !important; padding-right: 5px !important; }
.row-20 { margin-left: -10px !important; margin-right: -10px !important; }
.row-20 > .col-xs-1, .row-20 > .col-sm-1, .row-20 > .col-md-1, .row-20 > .col-lg-1, .row-20 > .col-xs-2, .row-20 > .col-sm-2, .row-20 > .col-md-2, .row-20 > .col-lg-2, .row-20 > .col-xs-3, .row-20 > .col-sm-3, .row-20 > .col-md-3, .row-20 > .col-lg-3, .row-20 > .col-xs-4, .row-20 > .col-sm-4, .row-20 > .col-md-4, .row-20 > .col-lg-4, .row-20 > .col-xs-5, .row-20 > .col-sm-5, .row-20 > .col-md-5, .row-20 > .col-lg-5, .row-20 > .col-xs-6, .row-20 > .col-sm-6, .row-20 > .col-md-6, .row-20 > .col-lg-6, .row-20 > .col-xs-7, .row-20 > .col-sm-7, .row-20 > .col-md-7, .row-20 > .col-lg-7, .row-20 > .col-xs-8, .row-20 > .col-sm-8, .row-20 > .col-md-8, .row-20 > .col-lg-8, .row-20 > .col-xs-9, .row-20 > .col-sm-9, .row-20 > .col-md-9, .row-20 > .col-lg-9, .row-20 > .col-xs-10, .row-20 > .col-sm-10, .row-20 > .col-md-10, .row-20 > .col-lg-10, .row-20 > .col-xs-11, .row-20 > .col-sm-11, .row-20 > .col-md-11, .row-20 > .col-lg-11, .row-20 > .col-xs-12, .row-20 > .col-sm-12, .row-20 > .col-md-12, .row-20 > .col-lg-12 { padding-left: 10px !important; padding-right: 10px !important; }
.row-50 { margin-left: -25px !important; margin-right: -25px !important; }
.row-50 > .col-xs-1, .row-50 > .col-sm-1, .row-50 > .col-md-1, .row-50 > .col-lg-1, .row-50 > .col-xs-2, .row-50 > .col-sm-2, .row-50 > .col-md-2, .row-50 > .col-lg-2, .row-50 > .col-xs-3, .row-50 > .col-sm-3, .row-50 > .col-md-3, .row-50 > .col-lg-3, .row-50 > .col-xs-4, .row-50 > .col-sm-4, .row-50 > .col-md-4, .row-50 > .col-lg-4, .row-50 > .col-xs-5, .row-50 > .col-sm-5, .row-50 > .col-md-5, .row-50 > .col-lg-5, .row-50 > .col-xs-6, .row-50 > .col-sm-6, .row-50 > .col-md-6, .row-50 > .col-lg-6, .row-50 > .col-xs-7, .row-50 > .col-sm-7, .row-50 > .col-md-7, .row-50 > .col-lg-7, .row-50 > .col-xs-8, .row-50 > .col-sm-8, .row-50 > .col-md-8, .row-50 > .col-lg-8, .row-50 > .col-xs-9, .row-50 > .col-sm-9, .row-50 > .col-md-9, .row-50 > .col-lg-9, .row-50 > .col-xs-10, .row-50 > .col-sm-10, .row-50 > .col-md-10, .row-50 > .col-lg-10, .row-50 > .col-xs-11, .row-50 > .col-sm-11, .row-50 > .col-md-11, .row-50 > .col-lg-11, .row-50 > .col-xs-12, .row-50 > .col-sm-12, .row-50 > .col-md-12, .row-50 > .col-lg-12 { padding-left: 25px !important; padding-right: 25px !important; }
.row-100 { margin-left: -50px !important; margin-right: -50px !important; }
.row-100 > .col-xs-1, .row-100 > .col-sm-1, .row-100 > .col-md-1, .row-100 > .col-lg-1, .row-100 > .col-xs-2, .row-100 > .col-sm-2, .row-100 > .col-md-2, .row-100 > .col-lg-2, .row-100 > .col-xs-3, .row-100 > .col-sm-3, .row-100 > .col-md-3, .row-100 > .col-lg-3, .row-100 > .col-xs-4, .row-100 > .col-sm-4, .row-100 > .col-md-4, .row-100 > .col-lg-4, .row-100 > .col-xs-5, .row-100 > .col-sm-5, .row-100 > .col-md-5, .row-100 > .col-lg-5, .row-100 > .col-xs-6, .row-100 > .col-sm-6, .row-100 > .col-md-6, .row-100 > .col-lg-6, .row-100 > .col-xs-7, .row-100 > .col-sm-7, .row-100 > .col-md-7, .row-100 > .col-lg-7, .row-100 > .col-xs-8, .row-100 > .col-sm-8, .row-100 > .col-md-8, .row-100 > .col-lg-8, .row-100 > .col-xs-9, .row-100 > .col-sm-9, .row-100 > .col-md-9, .row-100 > .col-lg-9, .row-100 > .col-xs-10, .row-100 > .col-sm-10, .row-100 > .col-md-10, .row-100 > .col-lg-10, .row-100 > .col-xs-11, .row-100 > .col-sm-11, .row-100 > .col-md-11, .row-100 > .col-lg-11, .row-100 > .col-xs-12, .row-100 > .col-sm-12, .row-100 > .col-md-12, .row-100 > .col-lg-12 { padding-left: 50px !important; padding-right: 50px !important; }

.row-4 { margin-left: -2px !important; margin-right: -2px !important; }
.row-4 > .col-xs-1, .row-4 > .col-sm-1, .row-4 > .col-md-1, .row-4 > .col-lg-1, .row-4 > .col-xs-2, .row-4 > .col-sm-2, .row-4 > .col-md-2, .row-4 > .col-lg-2, .row-4 > .col-xs-3, .row-4 > .col-sm-3, .row-4 > .col-md-3, .row-4 > .col-lg-3, .row-4 > .col-xs-4, .row-4 > .col-sm-4, .row-4 > .col-md-4, .row-4 > .col-lg-4, .row-4 > .col-xs-5, .row-4 > .col-sm-5, .row-4 > .col-md-5, .row-4 > .col-lg-5, .row-4 > .col-xs-6, .row-4 > .col-sm-6, .row-4 > .col-md-6, .row-4 > .col-lg-6, .row-4 > .col-xs-7, .row-4 > .col-sm-7, .row-4 > .col-md-7, .row-4 > .col-lg-7, .row-4 > .col-xs-8, .row-4 > .col-sm-8, .row-4 > .col-md-8, .row-4 > .col-lg-8, .row-4 > .col-xs-9, .row-4 > .col-sm-9, .row-4 > .col-md-9, .row-4 > .col-lg-9, .row-4 > .col-xs-10, .row-4 > .col-sm-10, .row-4 > .col-md-10, .row-4 > .col-lg-10, .row-4 > .col-xs-11, .row-4 > .col-sm-11, .row-4 > .col-md-11, .row-4 > .col-lg-11, .row-4 > .col-xs-12, .row-4 > .col-sm-12, .row-4 > .col-md-12, .row-4 > .col-lg-12 { padding-left: 2px !important; padding-right: 2px !important; }
.row-8 { margin-left: -4px !important; margin-right: -4px !important; }
.row-8 > .col-xs-1, .row-8 > .col-sm-1, .row-8 > .col-md-1, .row-8 > .col-lg-1, .row-8 > .col-xs-2, .row-8 > .col-sm-2, .row-8 > .col-md-2, .row-8 > .col-lg-2, .row-8 > .col-xs-3, .row-8 > .col-sm-3, .row-8 > .col-md-3, .row-8 > .col-lg-3, .row-8 > .col-xs-4, .row-8 > .col-sm-4, .row-8 > .col-md-4, .row-8 > .col-lg-4, .row-8 > .col-xs-5, .row-8 > .col-sm-5, .row-8 > .col-md-5, .row-8 > .col-lg-5, .row-8 > .col-xs-6, .row-8 > .col-sm-6, .row-8 > .col-md-6, .row-8 > .col-lg-6, .row-8 > .col-xs-7, .row-8 > .col-sm-7, .row-8 > .col-md-7, .row-8 > .col-lg-7, .row-8 > .col-xs-8, .row-8 > .col-sm-8, .row-8 > .col-md-8, .row-8 > .col-lg-8, .row-8 > .col-xs-9, .row-8 > .col-sm-9, .row-8 > .col-md-9, .row-8 > .col-lg-9, .row-8 > .col-xs-10, .row-8 > .col-sm-10, .row-8 > .col-md-10, .row-8 > .col-lg-10, .row-8 > .col-xs-11, .row-8 > .col-sm-11, .row-8 > .col-md-11, .row-8 > .col-lg-11, .row-8 > .col-xs-12, .row-8 > .col-sm-12, .row-8 > .col-md-12, .row-8 > .col-lg-12 { padding-left: 4px !important; padding-right: 4px !important; }
.row-12 { margin-left: -6px !important; margin-right: -6px !important; }
.row-12 > .col-xs-1, .row-12 > .col-sm-1, .row-12 > .col-md-1, .row-12 > .col-lg-1, .row-12 > .col-xs-2, .row-12 > .col-sm-2, .row-12 > .col-md-2, .row-12 > .col-lg-2, .row-12 > .col-xs-3, .row-12 > .col-sm-3, .row-12 > .col-md-3, .row-12 > .col-lg-3, .row-12 > .col-xs-4, .row-12 > .col-sm-4, .row-12 > .col-md-4, .row-12 > .col-lg-4, .row-12 > .col-xs-5, .row-12 > .col-sm-5, .row-12 > .col-md-5, .row-12 > .col-lg-5, .row-12 > .col-xs-6, .row-12 > .col-sm-6, .row-12 > .col-md-6, .row-12 > .col-lg-6, .row-12 > .col-xs-7, .row-12 > .col-sm-7, .row-12 > .col-md-7, .row-12 > .col-lg-7, .row-12 > .col-xs-8, .row-12 > .col-sm-8, .row-12 > .col-md-8, .row-12 > .col-lg-8, .row-12 > .col-xs-9, .row-12 > .col-sm-9, .row-12 > .col-md-9, .row-12 > .col-lg-9, .row-12 > .col-xs-10, .row-12 > .col-sm-10, .row-12 > .col-md-10, .row-12 > .col-lg-10, .row-12 > .col-xs-11, .row-12 > .col-sm-11, .row-12 > .col-md-11, .row-12 > .col-lg-11, .row-12 > .col-xs-12, .row-12 > .col-sm-12, .row-12 > .col-md-12, .row-12 > .col-lg-12 { padding-left: 6px !important; padding-right: 6px !important; }
.row-16 { margin-left: -8px !important; margin-right: -8px !important; }
.row-16 > .col-xs-1, .row-16 > .col-sm-1, .row-16 > .col-md-1, .row-16 > .col-lg-1, .row-16 > .col-xs-2, .row-16 > .col-sm-2, .row-16 > .col-md-2, .row-16 > .col-lg-2, .row-16 > .col-xs-3, .row-16 > .col-sm-3, .row-16 > .col-md-3, .row-16 > .col-lg-3, .row-16 > .col-xs-4, .row-16 > .col-sm-4, .row-16 > .col-md-4, .row-16 > .col-lg-4, .row-16 > .col-xs-5, .row-16 > .col-sm-5, .row-16 > .col-md-5, .row-16 > .col-lg-5, .row-16 > .col-xs-6, .row-16 > .col-sm-6, .row-16 > .col-md-6, .row-16 > .col-lg-6, .row-16 > .col-xs-7, .row-16 > .col-sm-7, .row-16 > .col-md-7, .row-16 > .col-lg-7, .row-16 > .col-xs-8, .row-16 > .col-sm-8, .row-16 > .col-md-8, .row-16 > .col-lg-8, .row-16 > .col-xs-9, .row-16 > .col-sm-9, .row-16 > .col-md-9, .row-16 > .col-lg-9, .row-16 > .col-xs-10, .row-16 > .col-sm-10, .row-16 > .col-md-10, .row-16 > .col-lg-10, .row-16 > .col-xs-11, .row-16 > .col-sm-11, .row-16 > .col-md-11, .row-16 > .col-lg-11, .row-16 > .col-xs-12, .row-16 > .col-sm-12, .row-16 > .col-md-12, .row-16 > .col-lg-12 { padding-left: 8px !important; padding-right: 8px !important; }
.row-24 { margin-left: -12px !important; margin-right: -12px !important; }
.row-24 > .col-xs-1, .row-24 > .col-sm-1, .row-24 > .col-md-1, .row-24 > .col-lg-1, .row-24 > .col-xs-2, .row-24 > .col-sm-2, .row-24 > .col-md-2, .row-24 > .col-lg-2, .row-24 > .col-xs-3, .row-24 > .col-sm-3, .row-24 > .col-md-3, .row-24 > .col-lg-3, .row-24 > .col-xs-4, .row-24 > .col-sm-4, .row-24 > .col-md-4, .row-24 > .col-lg-4, .row-24 > .col-xs-5, .row-24 > .col-sm-5, .row-24 > .col-md-5, .row-24 > .col-lg-5, .row-24 > .col-xs-6, .row-24 > .col-sm-6, .row-24 > .col-md-6, .row-24 > .col-lg-6, .row-24 > .col-xs-7, .row-24 > .col-sm-7, .row-24 > .col-md-7, .row-24 > .col-lg-7, .row-24 > .col-xs-8, .row-24 > .col-sm-8, .row-24 > .col-md-8, .row-24 > .col-lg-8, .row-24 > .col-xs-9, .row-24 > .col-sm-9, .row-24 > .col-md-9, .row-24 > .col-lg-9, .row-24 > .col-xs-10, .row-24 > .col-sm-10, .row-24 > .col-md-10, .row-24 > .col-lg-10, .row-24 > .col-xs-11, .row-24 > .col-sm-11, .row-24 > .col-md-11, .row-24 > .col-lg-11, .row-24 > .col-xs-12, .row-24 > .col-sm-12, .row-24 > .col-md-12, .row-24 > .col-lg-12 { padding-left: 12px !important; padding-right: 12px !important; }
.row-32 { margin-left: -16px !important; margin-right: -16px !important; }
.row-32 > .col-xs-1, .row-32 > .col-sm-1, .row-32 > .col-md-1, .row-32 > .col-lg-1, .row-32 > .col-xs-2, .row-32 > .col-sm-2, .row-32 > .col-md-2, .row-32 > .col-lg-2, .row-32 > .col-xs-3, .row-32 > .col-sm-3, .row-32 > .col-md-3, .row-32 > .col-lg-3, .row-32 > .col-xs-4, .row-32 > .col-sm-4, .row-32 > .col-md-4, .row-32 > .col-lg-4, .row-32 > .col-xs-5, .row-32 > .col-sm-5, .row-32 > .col-md-5, .row-32 > .col-lg-5, .row-32 > .col-xs-6, .row-32 > .col-sm-6, .row-32 > .col-md-6, .row-32 > .col-lg-6, .row-32 > .col-xs-7, .row-32 > .col-sm-7, .row-32 > .col-md-7, .row-32 > .col-lg-7, .row-32 > .col-xs-8, .row-32 > .col-sm-8, .row-32 > .col-md-8, .row-32 > .col-lg-8, .row-32 > .col-xs-9, .row-32 > .col-sm-9, .row-32 > .col-md-9, .row-32 > .col-lg-9, .row-32 > .col-xs-10, .row-32 > .col-sm-10, .row-32 > .col-md-10, .row-32 > .col-lg-10, .row-32 > .col-xs-11, .row-32 > .col-sm-11, .row-32 > .col-md-11, .row-32 > .col-lg-11, .row-32 > .col-xs-12, .row-32 > .col-sm-12, .row-32 > .col-md-12, .row-32 > .col-lg-12 { padding-left: 16px !important; padding-right: 16px !important; }

/* --- media addition --- */
.visible-xxs {
	@media (min-width: 450px) { display: none; }
}
.visible-md-up {
	@media (max-width: 991px){ display: none !important; }
}
.hidden-xxs {
	@media (max-width: 449px) { display: none; }
}
.hidden-sm-down {
	@media (max-width: 991px) { display: none; }
}
@media (max-width: 450px) {
	.col-xxs-12 { float: none; width: 100%; margin: 0px !important; }
}
@media (max-width: 767px) {
	.pull-xs-right {float: right;}
	.text-xs-right {text-align: right;}
}
@media (min-width: 768px) {
	.pull-sm-right {float: right;}
	.text-sm-right {text-align: right;}
}
@media (min-width: 992px) {
	.pull-md-left {float: left;}
	.pull-md-right {float: right;}
	.text-md-right {text-align: right;}
}
@media (min-width: 1200px) {
	.pull-lg-left {float: left;}
	.pull-lg-right {float: right;}
	.text-lg-right {text-align: right;}
}

.visible-sm {}
.visible-sm-down {
	display: none;
	@media (max-width: 991px){ display: block; }
}
.visible-sm-up {
	display: none;
	@media (min-width: 768px){ display: block; }
}
.visible-md {}
.visible-md-down {
	display: none;
	@media (max-width: 1199px){ display: block; }
}
.visible-md-up {
	display: none;
	@media (min-width: 992px){ display: block; }
}
.visible-lg {}
.visible-lg-down {
	display: none;
	@media (max-width: 1399px){ display: block; }
}
.visible-lg-up {
	display: none;
	@media (min-width: 1200px){ display: block; }
}
.visible-xl {
	display: none;
	@media (min-width: 1399px){ display: block; }
}
.visible-xl-down {
	display: none;
	@media (max-width: 1399px){ display: block; }
}


/* --- helpers --- */
.block, .d-block { display: block !important; }
.inline-block, .d-inline-block { display: inline-block !important; }

.posr { position: relative; }
.poss { position: static; }
.posa { position: absolute; z-index: 55; }
.posa-sm { @media (min-width: 768px){ position: absolute; } }

.ofl {overflow: hidden; position: relative; *zoom: 1;}

.hr {background: $color_gray_10; position: relative; overflow: hidden; display: block; height: 1px;}


/* --- padding --- */
.p-0, .p-none { padding: 0px !important; }

.p-4 { padding: 4px !important; }
.p-8 { padding: 8px !important; }
.p-10 { padding: 10px !important; }
.p-12 { padding: 12px !important; }
.p-16 { padding: 16px !important; }
.p-20 { padding: 20px !important; }
.p-24 { padding: 24px !important; }
.p-30 { padding: 30px !important; }
.p-40 { padding: 40px !important; }
.p-50 { padding: 50px !important; }

.pl-4 { padding-left: 4px; }
.pl-8 { padding-left: 8px; }
.pl-10 { padding-left: 10px; }
.pl-12 { padding-left: 12px; }
.pl-16 { padding-left: 16px; }
.pl-24 { padding-left: 24px; }

.px-4 { padding-left: 4px; padding-right: 4px; }
.px-8 { padding-left: 8px; padding-right: 8px; }
.px-10 { padding-left: 10px; padding-right: 10px; }
.px-12 { padding-left: 12px; padding-right: 12px; }
.px-16 { padding-left: 16px; padding-right: 16px; }
.px-24 { padding-left: 24px; padding-right: 24px; }

.py-4 { padding-top: 4px; padding-bottom: 4px; }
.py-8 { padding-top: 8px; padding-bottom: 8px; }
.py-10 { padding-top: 10px; padding-bottom: 10px; }
.py-12 { padding-top: 12px; padding-bottom: 12px; }
.py-16 { padding-top: 16px; padding-bottom: 16px; }
.py-24 { padding-top: 24px; padding-bottom: 24px; }


/* --- margin --- */
.mb-0, .mb-none { margin-bottom: 0px !important; }
.mb-4 { margin-bottom: 4px !important; }
.mb-8 { margin-bottom: 8px !important; }
.mb-12 { margin-bottom: 12px !important; }
.mb-16 { margin-bottom: 16px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-24 { margin-bottom: 24px !important; }
.mb-28 { margin-bottom: 28px !important; }
.mb-32 { margin-bottom: 32px !important; }
.mb-36 { margin-bottom: 36px !important; }
.mb-40 { margin-bottom: 40px !important; }
.mb-50  { margin-bottom: 50px !important; }
.mb-60  { margin-bottom: 60px !important; }
.mb-70  { margin-bottom: 70px !important; }
.mb-75  { margin-bottom: 75px !important; }
.mb-80  { margin-bottom: 80px !important; }
.mb-90  { margin-bottom: 90px !important; }
.mb-100 { margin-bottom: 100px !important; }
.mb-150 { margin-bottom: 150px !important; }
.mb-200 { margin-bottom: 200px !important; }

.m-auto { margin-left: auto; margin-right: auto; }

.m-0 { margin: 0px !important; }

//width
.w-25 { width: 25px; }
.w-50 { width: 50px; }
.w-75 { width: 75px; }
.w-100 { width: 100px; }
.w-125 { width: 125px; }
.w-150 { width: 150px; }
.w-175 { width: 175px; }
.w-200 { width: 200px; }
.w-250 { width: 250px; }
.w-300 { width: 300px; }
.w-350 { width: 350px; }
.w-400 { width: 400px; }
.w-450 { width: 450px; }
.w-500 { width: 500px; }
.w-550 { width: 550px; }
.w-600 { width: 600px; }
.w-650 { width: 650px; }
.w-700 { width: 700px; }
.w-750 { width: 750px; }
.w-800 { width: 800px; }
.w-850 { width: 850px; }
.w-900 { width: 900px; }
.w-950 { width: 950px; }
.w-1000 { width: 1000px; }

.min-w-50 { min-width: 50px; }
.min-w-75 { min-width: 75px; }
.min-w-100 { min-width: 100px; }
.min-w-150 { min-width: 150px; }
.min-w-175 { min-width: 175px; }
.min-w-200 { min-width: 200px; }
.min-w-250 { min-width: 250px; }
.min-w-300 { min-width: 300px; }
.min-w-350 { min-width: 350px; }
.min-w-400 { min-width: 400px; }
.min-w-450 { min-width: 450px; }
.min-w-500 { min-width: 500px; }
.min-w-550 { min-width: 550px; }
.min-w-600 { min-width: 600px; }
.min-w-650 { min-width: 650px; }
.min-w-700 { min-width: 700px; }
.min-w-750 { min-width: 750px; }
.min-w-800 { min-width: 800px; }
.min-w-850 { min-width: 850px; }
.min-w-900 { min-width: 900px; }
.min-w-950 { min-width: 950px; }
.min-w-1000 { min-width: 1000px; }
.min-w-1200 { min-width: 1200px; }

.max-w-50 { max-width: 50px; }
.max-w-75 { max-width: 75px; }
.max-w-100 { max-width: 100px; }
.max-w-150 { max-width: 150px; }
.max-w-175 { max-width: 175px; }
.max-w-200 { max-width: 200px; }
.max-w-250 { max-width: 250px; }
.max-w-300 { max-width: 300px; }
.max-w-350 { max-width: 350px; }
.max-w-400 { max-width: 400px; }
.max-w-450 { max-width: 450px; }
.max-w-500 { max-width: 500px; }
.max-w-550 { max-width: 550px; }
.max-w-600 { max-width: 600px; }
.max-w-650 { max-width: 650px; }
.max-w-700 { max-width: 700px; }
.max-w-750 { max-width: 750px; }
.max-w-800 { max-width: 800px; }
.max-w-850 { max-width: 850px; }
.max-w-900 { max-width: 900px; }
.max-w-950 { max-width: 950px; }
.max-w-1000 { max-width: 1000px; }
.max-w-1200 { max-width: 1200px; }

/* --- links --- */
.blank-link {
	border: none !important;
	&.hover {
		&:hover { text-decoration: underline; }
	}
}
.dash-link {
	border-bottom-style: dashed !important;
}
.type-link {
	border-bottom: 1px solid rgba(13,97,171,0.3);
	color: $color_primary;
	text-decoration: none;
	&:hover {
		border-color: $color_primary;
		text-decoration: none;
	}
}
.trash-link, a.trash-link, .trash-link a {
	border: none;
	color: $color_gray_50;
	&:hover {
		color: $color_danger;
	}
}
.muted-link, a.muted-link, .muted-link a {
	border: none;
	color: $color_gray_50;
	&:hover {
		color: $color_primary;
	}
}
a:hover > .type-link { border-color: $color_primary; }

.apply-link {
	border: none !important;
	display: inline-block;
	vertical-align: middle;
	font-size: 9px;
	line-height: 10px;
}

.overlink {
	background: url(../images/blank.gif) no-repeat 0 0;
	border: none !important;
	position: absolute; top: 0px; left: 0px; z-index: 55;
	display: block; width: 100%; height: 100%;
}
.overlink-hover-mystic {
	&:hover {
		background: $color_mystic;
		.text-mark {
			background: $color_white;
		}
	}
}

/* --- icons --- */
span.icobox, a.icobox {
	border: none !important;
	display: inline-block;
	.icobox__link {
		border-bottom: 1px solid rgba(13,97,171,0.3);
		text-decoration: none;
		@include transition();
	}
	.icobox__hover {
		border-bottom: 1px solid transparent;
		text-decoration: none;
		@include transition();
	}
	&:hover {
		.icobox__link, .icobox__hover { border-bottom-color: $color_primary; }
	}

	&.color-black {
		.icobox__hover {
			border: none;
			color: $color_black;
			text-decoration: none;
		}
		&:hover {
			color: $color_primary !important;
			.icobox__hover { color: $color_primary; }
		}
	}
}
.icobox {
	position: relative;
	.ico {
		position: absolute; top: 50%; left: 0px; display: block;
		text-align: center;
		img {
			display: block; width: 100%;
			&.center {
				position: absolute; top: 50%; left: 50%;
				@include transform(translateX(-50%) translateY(-50%));
			}
		}
		&.flag {
			@include box-shadow(0px 0px 3px $color_gray_30);
		}
	}
	&.icobox_right {
		.ico { left: auto; right: 0px; }
	}
	&.size_12 {
		$size : 12px;
		padding-left: $size + 4;
		&.icobox_right { padding-left: 0px; padding-right: $size + 4; }
		& > .ico {
			width: $size; height: $size; margin-top: -($size/2);
			&.fa {
				font-size: 12px;
				line-height: $size;
			}
			&.top {
				top: 1px;
				margin-top: 0px;
			}
			&.ico-auto-brands { font-size: $size; }
			&.flag { height: 12px; margin-top: -6px; }
		}
	}
	&.size_16 {
		$size : 16px;
		padding-left: $size + 6;
		&.icobox_right { padding-left: 0px; padding-right: $size + 6; }
		& > .ico {
			width: $size; height: $size; margin-top: -($size/2);
			&.fa {
				font-size: 16px;
				line-height: $size;
			}
			&.top {
				top: 2px;
				margin-top: 0px;
			}
			&.ico-auto-brands { font-size: $size; }
			&.flag { height: 12px; margin-top: -6px; }
		}
	}
	&.size_20 {
		$size : 20px;
		padding-left: $size + 4;
		&.icobox_right { padding-left: 0px; padding-right: $size + 4; }
		& > .ico {
			width: $size; height: $size; margin-top: -($size/2);
			&.fa {
				font-size: 18px;
				line-height: $size;
			}
			&.ico-auto-brands { font-size: $size; }
			&.flag { height: 15px; margin-top: -7px; }
		}
	}
	&.size_24 {
		$size : 24px;
		padding-left: $size + 6;
		&.icobox_right { padding-left: 0px; padding-right: $size + 6; }
		& > .ico {
			width: $size; height: $size; margin-top: -($size/2);
			&.fa {
				font-size: 22px;
				line-height: $size;
			}
			&.top {
				top: -1px;
				margin-top: 0px;
			}
			&.ico-auto-brands { font-size: $size; }
			&.flag { height: 18px; margin-top: -9px; }
		}
		&.fs-20 {
			& > .ico {
				&.top {
					top: 3px;
					@media (max-width: 767px) {
						top: 5px;
					}
				}
			}
		}
	}
	&.size_32 {
		$size : 32px;
		padding-left: $size + 8px;
		&.padd_15 { padding-left: $size + 12px; }
		&.icobox_right { padding-left: 0px; padding-right: $size + 8px; }
		& > .ico {
			width: $size; height: $size; margin-top: -($size/2);
			&.top { top: 0px; margin-top: 0px; }
			&.ico-auto-brands { font-size: $size; }
			&.flag { height: 24px; margin-top: -12px; }
		}
	}
	&.size_48 {
		$size : 48px;
		padding-left: $size + 10px;
		&.icobox_right { padding-left: 0px; padding-right: $size + 10px; }
		& > .ico {
			width: $size; height: $size; margin-top: -($size/2);
			&.ico-auto-brands { font-size: $size; }
			&.flag { height: 36px; margin-top: -18px; }
		}
	}
	&.size_64 {
		$size : 64px;
		padding-left: $size + 12px;
		&.icobox_right { padding-left: 0px; padding-right: $size + 12px; }
		& > .ico {
			width: $size; height: $size; margin-top: -($size/2);
			&.ico-auto-brands { font-size: $size; }
			&.flag { height: 48px; margin-top: -24px; }
		}
	}

	&.responsive-xxs {
		@media (max-width: 767px){
			padding-left: 0px;
			.ico { display: none; }
		}
	}

	&.icobox_hover {
		@include transition(all 0.15s linear 0s);
		&:hover {
			color: $color_primary;
		}
	}
}

.icobox-ellipsis {
	.icobox-ellipsis__box {
		position: relative;
		display: inline-block;
		vertical-align: top;
		max-width: 100%;
	}
	.icobox-ellipsis__txt {
		position: relative;
		overflow: hidden;
		display: block;
		max-width: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.icobox-ellipsis__ico {
		position: absolute; top: 50%; left: auto; right: 100%;
		display: block;
	}
	&.size_20 {
		padding-left: 24px;
		.icobox-ellipsis__ico {
			width: 20px; height: 20px;
			margin: -10px 4px 0px 0px;
		}
	}

	&.right {
		&.size_20 {
			padding-left: 0;
			padding-right: 24px;
			.icobox-ellipsis__ico { left: 100%; right: auto; margin: -10px 0px 0px 4px; }
		}
	}
}


/* --- dropbox --- */
.dropbox {
	position: relative;
	.dropbox-head {
		position: relative; z-index: 2;
		@include transition(all 0.15s linear 0s);
	}
	.dropbox-body {
		background: $color_gray_10;
		position: absolute; top: 100%; left: 0px; z-index: 1;
		color: $color_black;
		visibility: hidden;
		opacity: 0;
		@include box-shadow(0px 0px 10px $color_gray_70);
		@include transition(visibility 0.4s linear 0s);
		&.visible {
			//top: 100%;
			visibility: visible;
			opacity: 1;
		}
	}
	&:hover {
		z-index: 7;
		.dropbox-head {
			background: $color_gray_10;
			color: $color_black;
		}
		.dropbox-body {
			//@media (min-width: 992px) {
			//top: 100%;
			@include transition(all 0.15s linear 0s);
			visibility: visible;
			opacity: 1;
			//}
		}
	}
	&.open {
		z-index: 5;
		.dropbox-head {
			background: $color_gray_10;
			color: $color_black;
		}
		.dropbox-body {
			top: 100%;
			visibility: visible;
			opacity: 1;
		}
	}
}

/* --- closer --- */
.closer {
	background: none;
	border: none !important;
	position: absolute; top: 5px; right: 5px;
	z-index: 75;
	display: block; width: 8px; height: 8px;
	opacity: 0.4;
	@include transition();
	&:before {
		content: '';
		background: $color_black;
		position: absolute; top: 50%; left: 0px;
		display: block; width: 100%; height: 2px;
		margin: -1px 0px 0px 0px;
		@include transform(rotate(45deg));
	}
	&:after {
		content: '';
		background: $color_black;
		position: absolute; top: 50%; left: 0px;
		display: block; width: 100%; height: 2px;
		margin: -1px 0px 0px 0px;
		@include transform(rotate(-45deg));
	}

	.timer {
		position: absolute; right: 100%; top: 50%;
		margin-top: -6px;
		margin-right: 5px;
		font-size: 10px;
		line-height: 12px;
		white-space: nowrap;
		i {
			font-style: normal;
		}
	}

	&.white {
		opacity: 1;
		&:before, &:after {
			background: $color_white;
		}
	}

	&.size_12 {
		width: 12px; height: 12px;
	}
	&.size_16 {
		width: 16px; height: 16px;
	}
	&.size_24 {
		width: 24px; height: 24px;
	}
	&:hover {
		//@include transform(rotate(180deg));
		cursor: pointer;
		opacity: 1;
		&:before { background: $color_danger; }
		&:after { background: $color_danger; }
	}

	&.square {
		background: $color_wildblue;
		opacity: 1;
		@include border-radius(2px);
		&:before {
			background: $color_white;
			left: 10%;
			width: 77%;
		}
		&:after {
			background: $color_white;
			left: 10%;
			width: 77%;
		}
		&.size_12 {
			&:before { width: 84%; }
			&:after { width: 84%; }
		}
		&.size_24 {
			&:before { width: 84%; }
			&:after { width: 84%; }
		}
		&:hover {
			background: $color_warning;
			@include transform(rotate(0deg));
		}
	}
}

//bootstrap-select fix
.bootstrap-select {
	.selectpicker { display: none !important; }
	.btn {
		.filter-option {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.bs-caret {
			.caret {}
		}
		&.btn-default {
			background: $color_white !important;
			border-color: $color_gray_30 !important;
			@include box-shadow();
		}
	}
	div.dropdown-menu {
		padding: 0px;
		ul.dropdown-menu {
			max-height: 250px !important;
			li {
				&.dropdown-header {
					padding-left: 12px;
					&:first-child {padding-top: 10px;}
				}
				a {
					border: none;
					padding: 5px 12px;
					white-space: normal !important;
					&.opt {
						padding: 5px 12px;
					}

					&:focus { background: $color_gray_10; }
					&:hover { background: $color_gray_10; }
				}
			}
		}
	}

	&.form-control {
		height: auto !important;
	}

	&.dropdown-min-w-250 {
		div.dropdown-menu { min-width: 250px !important; }
	}

	&.status {
		&.active {
			.btn {
				&.btn-default {
					background: lighten($color_warning, 25%) !important;
				}
			}
		}
	}

	&.has-error, .has-error & {
		.btn {
			&.btn-default {
				background: $color_white !important;
				border-color: $color_danger !important;
				//color: $color_warning !important;
				@include box-shadow();
			}
		}
	}
}

//js-toggle-password-view
.js-toggle-password-view {
	color: $color_gray_50;
	&:hover { cursor: pointer; }
	&.visible { color: $color_primary; }
}

//navs
.nav {
	&.nav-tabs {

		&.nav-tabs_a {
			border: none;
			font-size: 15px;
			font-weight: 500;
			li {
				margin: 0px;
				& > a, & > .nav-link {
					background: transparent;
					border: none;
					position: relative;
					display: block;
					margin: 0px;
					padding: 8px 12px;
					color: $color_gray_60;
					@include border-radius(0px);
					.ellipsis {
						display: inline-block;
						vertical-align: middle;
					}
					.fa {
						display: inline-block;
						vertical-align: middle;
						border: none;
						&[class*='fa-times']{ position: relative; top: -6px; }
					}
					&:hover { color: $color_primary; }
				}
				&.active {
					&:before {
						content: '';
						background: $color_primary;
						position: absolute; top: 0; left: 0; right: 0;
						z-index: 5;
						display: block; height: 2px;
					}
					& > a, & > .nav-link {
						background: $color_white;
						color: $color_primary;
					}
				}
			}
		}
	}
}

.mCustomScrollbar {
	.mCustomScrollBox {
		.mCSB_container {}
		.mCSB_scrollTools {
			.mCSB_draggerContainer {
				.mCSB_dragger {
					.mCSB_dragger_bar {
						background: $color_primary;
					}
				}
				.mCSB_draggerRail {
					background: $color_gray_20;
				}
			}
		}
	}
	&.nav-tabs-scroll {
		.mCustomScrollBox {
			.mCSB_container { margin-bottom: 20px !important; }
		}
	}
}

.scroller-x, .scroller-x-css {
	position: relative;
	overflow-x: auto;
}

.global-alerts {
	position: fixed; bottom: 10px; right: 10px;
	z-index: 998;
	.alert {
		& + .alert { margin-top: 20px; }
	}
}

.global-notifications {
	position: fixed; top: 15px; left: 50%;
	width: 500px;
	margin-left: -250px;
	z-index: 998;
	@media (max-width: 575px) {
		left: 15px; right: 15px;
		width: auto;
		margin-left: 0px;
	}
	.alert {
		@include box-shadow(0px 0px 15px $color_gray_70);
		& + .alert { margin-top: 15px; }
	}
}

.float-notify {
	.float-notify__body {
		position: relative;
		@include transition();
		@media (max-width: 991px){
			.container { width: auto; padding: 0px; }
		}
		&:not(.fix){
			.container { width: auto; padding: 0px; }
		}
		&.fix {
			@media (min-width: 992px){
				position: fixed; top: 0px; left: 0px; right: 0px;
				z-index: 777;
				.float-notify__bg {
					background: $color_white;
					position: relative;
					padding: 8px;
					padding-left: calc(25% + 30px - 10px);
					&:before {
						content: '';
						position: absolute; top: 100%; left: 0px; right: 0px;
						height: 5px;
						@include linear-gradient(0deg, transparent, $color_gray_20);
					}
				}
			}
		}
	}
}

//loaders
.loading {
	background: $color_white;
	background: rgba(255,255,255,0.75);
	position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
	z-index: 55;
	display: none;
}
.spinner {
	position: absolute; top: 50%; left: 50%;
	width: 50px; height: 40px;
	margin: -20px -25px;
	text-align: center;
	font-size: 10px;
	div {
		background-color: $color_toxic;
		height: 100%;
		width: 6px;
		display: inline-block;
		-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
		animation: sk-stretchdelay 1.2s infinite ease-in-out;
		&.rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
		&.rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }
		&.rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
		&.rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }
		@-webkit-keyframes sk-stretchdelay {
			0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
			20% { -webkit-transform: scaleY(1.0) }
		}
		@keyframes sk-stretchdelay {
			0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); }
			20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); }
		}
	}
}

//utility class
.js-toggle-password-view {}
.js-parent-remover {}
.js-parent-hider {}
.js-clear-field {}
.js-toggle-visible {}


.show {
	&.inline {
		display: inline-block !important;
	}
}

.previewer-box {
	background: $color_gray_10;
	position: fixed; top: 50px; left: 50px;
	z-index: 9999;
	display: none;
	width: 120px;
	padding: 4px;
	img { display: block; width: 100%; }
}


//jQuery UI fix
.ui-datepicker {
	z-index: 777 !important;
	.ui-datepicker-prev, .ui-datepicker-next {
		border: 1px solid transparent !important;
		&:hover {
			border-color: $color_gray_30 !important;
		}
	}
}

//table sort
.js-table-sort {
	position: relative;
	display: inline-block;
	padding-right: 15px;
	.js-table-sort-arr {
		position: absolute; top: 50%; right: 0px;
		display: block; width: 10px; height: 14px;
		margin-top: -7px;
		&:before {
			content: '';
			border: 5px solid transparent;
			border-bottom-color: $color_gray_40;
			position: absolute; top: -5px; left: 0px;
			display: block;
		}
		&:after {
			content: '';
			border: 5px solid transparent;
			border-top-color: $color_gray_40;
			position: absolute; bottom: -5px; left: 0px;
			display: block;
		}
	}

	&.asc {
		color: $color_danger;
		.js-table-sort-arr {
			&:after {
				border-top-color: $color_danger;
			}
		}
	}
	&.desc {
		color: $color_danger;
		.js-table-sort-arr {
			&:before {
				border-bottom-color: $color_danger;
			}
		}
	}
	&:hover {
		cursor: pointer;
	}
}
.js-table-sort-arr {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 10px; height: 14px;
	margin: -2px 0px 0px 4px;
}

//sticky
.js-sticky, .js-sticky-col {
	position: relative;
	//@include transition(all .1s linear 0s);
	@media (max-width: 767px){
		top: 0 !important;
		min-height: auto !important;
		//@include transform(translateY(0));
	}
}

//
.dotter {
	position: relative;
	padding-left: 12px;
	&.negative {
		margin-left: -12px;
	}
	.dott {
		position: absolute; top: 50%; left: 0px;
		display: block; width: 8px; height: 8px;
		margin: -4px 0px 0px 0px;
		@include border-radius(50%);
		&.success { background: $color_toxic; }
		&.warning { background: $color_warning; }
		&.danger { background: $color_danger; }
	}
}