@import "variables";

//reset.css
html,body {
	background: #fff;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: normal;
	line-height: 1.5;
	color: $color_black;
}
body {
	&.overflow { overflow: hidden; }
}
input, select, textarea {
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: $color_black;
	outline: none !important;
}

p { margin: 0 0 1rem 0; padding: 0; }

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: 0;
	font-weight: normal;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	margin: 0 0 1rem 0;
	padding: 0;
	font-weight: bold;
	line-height: 1.3;
	color: $color_black;
}
h1, .h1 { font-size: 2.25rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.75rem; }
h4, .h4 { font-size: 1.5rem; }
h5, .h5 { font-size: 1.25em; }
h6, .h6 { font-size: 1.15rem; }

//bootstrap.css
.fs-12 { font-size: .75rem !important; }
.fs-14 { font-size: .85rem !important; }
.fs-16 { font-size: 1rem !important;}
.fs-18 { font-size: 1.15rem !important; }
.fs-20 { font-size: 1.25rem !important; }
.fs-22 { font-size: 1.35rem !important; }
.fs-24 { font-size: 1.5rem !important; }
.fs-28 { font-size: 1.75rem !important; }
.fs-32 { font-size: 2rem !important; }
.fs-36 { font-size: 2.25rem !important; }
.fs-40 { font-size: 2.5rem !important; }

.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-green-light, .green-light {color: $color_success !important; fill: $color_success;}
.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; }

.color-violet { color: $color_violet !important; }
.color-dark-violet { color: $color_dark_violet !important; }
.color-light-violet { color: $color_light_violet !important; }

.color-gray-dark { color: $gray_dark !important; }
.color-gray { color: $gray !important; }
.color-gray-light { color: $gray_light !important; }
.color-gray-lighter { color: $gray_lighter !important; }
.color-blue-lighter { color: $blue_lighter !important; }


/* --- 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);
}

/* --- alerts --- */
.alert {
	position: relative;
	margin-bottom: 0px;
	color: $color_dark;
	@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-success-dark {
		background: $green_light;
		border: 1px solid $green_light;
	}
	&.alert-info {
		background: $color_water;
		border-color: $color_water;
	}
	&.alert-warning {
		background: lighten($color_warning, 30%);
		border: 1px solid lighten($color_warning, 20%);
	}
	&.alert-danger {
		background: lighten($color_danger, 45%);
		border: 1px solid lighten($color_danger, 40%);
	}
	&.alert-outline-danger {
		border: 2px solid $red;
	}
	&.alert-important {
		background: #ffca35;
		border-color: #ffca35;
	}
}
strong.alert, span.alert {
	display: inline-block;
}

.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: 0;
	@include border-radius(0px);
	.panel-heading {
		padding: 16px 24px;
		@include border-radius(0px);
		h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
			margin: 0px;
		}
	}
	.panel-body {
		padding: 16px 24px;
		@include border-radius(0px);
	}
	.panel-footer {
		padding: 16px 24px;
		@include border-radius(0px);
	}

	&.md {
		.panel-heading, .panel-body, .panel-footer {
			padding: 16px;
		}
	}
	&.sm {
		.panel-heading, .panel-body, .panel-footer {
			padding: 8px 12px;
		}
	}

	&.panel-default {
		border-color: $color_gray_10;
	}

	&.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-tabs {
		background: transparent;
		border: none;
		& > .nav-tabs_a {
			position: relative;
			z-index: 3;
			margin-bottom: -1px;
			li {
				&:first-child {
					border-left: 1px solid transparent;
				}
				&.active {
					&:first-child {
						border-left-color: $color_gray_10;
					}
				}
			}
		}
		& > .nav-tabs_b {
			border-bottom: none;
			position: relative;
			z-index: 3;
			margin-bottom: -1px !important;
		}
		& > .panel-heading {
			border: none;
			position: relative;
			overflow: hidden;
			margin: 0 0 -1px 0;
			padding: 0;
			list-style: none;
			& > li {
				display: inline-block;
				.panel-heading__item {
					background: transparent;
					border: none;
					display: block;
					padding: 12px 20px;
					font-size: 16px;
					font-weight: bold;
					color: $color_gray_60;
					&:hover {
						color: $color_black;
					}
				}
				&.active {
					.panel-heading__item {
						background: $color_white;
						border: 1px solid $color_gray_10;
						border-bottom: none;
						color: $color_black;
					}
				}
			}
		}
		& > .panel-body {
			background: $color_white;
			border: 1px solid $color_gray_10;
		}
		& > .panel-footer {}
	}

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

	&.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-mystic {
		background: $color_mystic;
		border-color: $color_mystic;
	}

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

	&.panel-outline-success {
		border: 1px solid $color_success !important;
	}
	&.panel-outline-danger {
		border: 1px solid $color_danger !important;
	}
}

/* --- 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; }
		}
	}
	&.media-responsive-sm {
		@media (max-width : 991px) {
			.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: 0;
	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;
			}
		}
	}

	tr {
		&:hover {
			//th,
			td { background: $color_water; }
		}
		&.highlight:not(.js-link) {
			//th,
			td { background: $color_body; }
		}
	}

	a {
		border-bottom-color: transparent;
		&:hover { border-bottom-color: $color_primary; }
	}

	tr.highlight-success {
		td {
			background: $green_light !important;
		}
	}
}

/* --- 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;
	}
	&:focus {
		border-color: $color_primary;
	}
	&.input-sm {
		height: 28px;
		padding: 4px 8px;
	}
	&.input-lg {
		height: 46px;
		padding: 10px 16px;
	}

	&.water {
		background: $color_water;
	}

	&.warning {
		background: $color_body;
	}

	&.outline-warning {
		outline: 2px solid $yellow_light !important;
	}
}
textarea.form-control {
	//width: 100% !important;
	//height: auto !important;
}
select.form-control {
	padding-left: 8px; padding-right: 8px;
}

.has-error {
	.form-control {
		border-color: $color_danger !important;
		color: $color_danger !important;
	}
}

.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_danger !important; }
		.help-block {
			display: block !important;
			color: $color_danger;
		}
		.form-control {
			border-color: $color_danger !important;
			color: $color_danger !important;
			//@include placeholder($color_warning !important);
		}
		.form-field__icon {
			color: $color_danger;
		}
	}

	&.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;
			}
		}
	}
}

.form-group-hidden {
	display: none !important;
	.form-group.active + &,
	.form-group.active ~ &,
	.form-group.active & {
		display: block !important;
	}
}

.error-message { color: $color_danger !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; }
			}
		}
	}
}

.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.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-field-reset {
		position: absolute; top: 50%; left: 100%;
		z-index: 55;
		display: none;
		width: 12px;
		height: 12px;
		margin-left: 2px;
		margin-top: -6px;
		opacity: .75;
		&:before, &:after {
			content: '';
			background: $color_danger;
			position: absolute; top: 50%; left: 0;
			display: block;
			width: 100%;
			height: 2px;
			margin-top: -1px;
			@include transform(rotate(45deg));
		}
		&:after {
			@include transform(rotate(-45deg));
		}
		&:hover {
			cursor: pointer;
			opacity: 1;
		}
	}

	&.warning {
		.form-control, .btn-default {
			background-color: lighten($color_body, 5%) !important;
		}
	}
	&.watcher {
		&.selected {
			.form-field-reset {
				display: block;
			}
			.form-control, .btn-default {
				background-color: lighten($color_body, 5%) !important;
			}
		}
	}
}

.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: 20px;
		&:hover {
			cursor: pointer;
		}
	}
	&.stylize {
		min-width: 14px;
		min-height: 14px;
		input {
			visibility: hidden;
		}
		.arr {
			background: $color_white;
			border: 1px solid $color_gray_20;
			position: absolute; top: 50%; left: 0;
			display: block; width: 14px; height: 14px;
			margin: -8px 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;
					}
				}
			}
		}
	}
}
span.form-check {
	display: inline-block;
}

.label {
	padding: .15rem .25rem;
	font-size: 100%;
	font-weight: normal;
	line-height: normal;
	color: $color_black;

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

	&.label-default {
		background: $color_gray_40;
		color: $color_white;
	}
	&.label-info {
		background: $color_water;
		border-color: $color_water;
	}
	&.label-warning { background: $color_warning; }
	&.label-danger { background: $color_danger; color: $color_white; }
	&.label-danger-light {
		background: $red_light;
		color: $black;
	}
	&.label-success { background: $green_light; }
}
strong.label {
	font-weight: bold;
}
a.label {
	border: none;
}

/* --- btns --- */
.btn {
	position: relative;
	//padding: 4px 12px 6px;
	padding: 5px 16px;
	line-height: 20px;
	color: $color_white !important;
	text-decoration: none !important;
	white-space: normal;
	@include border-radius(3px !important);
	@include transition();
	@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 12px;
		line-height: 16px;
	}
	&.btn-md {
		padding: 8px 16px;
		line-height: 20px;
	}
	&.btn-lg {
		padding: 12px 24px;
		line-height: 24px;
	}

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

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

	&.btn-blank {
		background: $color_white;
		border-color: $color_gray_20 !important;
		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 !important;
		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 !important;
		&: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 !important;
		&: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 !important;
		&: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 !important;
		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 !important;
		&:hover {
			background: #BD0909;
			@include linear-gradient(180deg, #FF0D0D 0%, #BD0909 100%);
			border-color: #BD0909;
		}
	}

	&.btn-link {
		border-color: transparent !important;
		color: $color_primary !important;
		&:hover {
			background: $color_gray_05;
			border-color: $color_gray_05;
		}
		&.px-0 {
			padding-left: 0;
			padding-right: 0;
			&:hover {
				background: transparent;
				border-color: transparent;
				text-decoration: underline !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;
		}

		.autoclose-timer {
			position: absolute; top: 100%; right: 0;
			font-size: 11px;
			color: $color_gray_30;
			white-space: nowrap;
			display: none;
			.timer {}
		}
	}
	.modal-dialog {
		position: relative;
		margin: 50px auto;
		@media (max-width: 767px){
			margin: 10px;
		}
		&.modal-md {
			@media(min-width: 575px){
				width: 448px;
				margin: 48px auto;
			}
		}
		&.modal-max {
			width: auto;
			margin: 24px;
			@media (max-width: 991px){
				margin: 10px;
			}
			/*@media(min-width: 1200px){
				width: 1140px;
			}*/
		}
		.modal-content {
			background: #fff;
			border: none;
			@include border-radius(3px);
			@include box-shadow(0px 2px 4px 0px rgba(0,0,0,0.5));
			.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; }
			}
		}

		&.modal-secondary {
			.modal-content {
				.modal-header {
					background: none;
					border: none;
				}
				.modal-body {
					padding-top: 8px;
					padding-bottom: 8px;
				}
				.modal-footer {
					background: none;
					border: none;
				}
			}
		}
	}
}

//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-40 { margin-left: -20px !important; margin-right: -20px !important; }
.row-40 > .col-xs-1, .row-40 > .col-sm-1, .row-40 > .col-md-1, .row-40 > .col-lg-1, .row-40 > .col-xs-2, .row-40 > .col-sm-2, .row-40 > .col-md-2, .row-40 > .col-lg-2, .row-40 > .col-xs-3, .row-40 > .col-sm-3, .row-40 > .col-md-3, .row-40 > .col-lg-3, .row-40 > .col-xs-4, .row-40 > .col-sm-4, .row-40 > .col-md-4, .row-40 > .col-lg-4, .row-40 > .col-xs-5, .row-40 > .col-sm-5, .row-40 > .col-md-5, .row-40 > .col-lg-5, .row-40 > .col-xs-6, .row-40 > .col-sm-6, .row-40 > .col-md-6, .row-40 > .col-lg-6, .row-40 > .col-xs-7, .row-40 > .col-sm-7, .row-40 > .col-md-7, .row-40 > .col-lg-7, .row-40 > .col-xs-8, .row-40 > .col-sm-8, .row-40 > .col-md-8, .row-40 > .col-lg-8, .row-40 > .col-xs-9, .row-40 > .col-sm-9, .row-40 > .col-md-9, .row-40 > .col-lg-9, .row-40 > .col-xs-10, .row-40 > .col-sm-10, .row-40 > .col-md-10, .row-40 > .col-lg-10, .row-40 > .col-xs-11, .row-40 > .col-sm-11, .row-40 > .col-md-11, .row-40 > .col-lg-11, .row-40 > .col-xs-12, .row-40 > .col-sm-12, .row-40 > .col-md-12, .row-40 > .col-lg-12 { padding-left: 20px !important; padding-right: 20px !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: 449px) {
	.col-xxs-12 { float: none; width: 100%; margin: 0px !important; }
}
@media (max-width: 575px) {
	.col-xss-12 { float: none; width: 100%; margin: 0px !important; }
}
@media (max-width: 767px) {
	.pull-xs-right {float: right !important;}
	.text-xs-right {text-align: right !important;}
}
@media (min-width: 768px) {
	.pull-sm-left {float: left !important;}
	.pull-sm-right {float: right !important;}
	.text-sm-right {text-align: right !important;}
}
@media (min-width: 992px) {
	.pull-md-left {float: left !important;}
	.pull-md-right {float: right !important;}
	.text-md-right {text-align: right !important;}
}
@media (min-width: 1200px) {
	.pull-lg-left {float: left !important;}
	.pull-lg-right {float: right !important;}
	.text-lg-right {text-align: right !important;}
}

.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;}

//display
.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-flex { display: -ms-flexbox !important; display: flex !important; }
.d-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; }

@media (min-width: 450px) {
	.d-xs-none { display: none !important; }
	.d-xs-inline { display: inline !important; }
	.d-xs-inline-block { display: inline-block !important; }
	.d-xs-block { display: block !important; }
	.d-xs-flex { display: -ms-flexbox !important; display: flex !important; }
	.d-xs-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; }
}

@media (min-width: 576px) {
	.d-sm-none { display: none !important; }
	.d-sm-inline { display: inline !important; }
	.d-sm-inline-block { display: inline-block !important; }
	.d-sm-block { display: block !important; }
	.d-sm-flex { display: -ms-flexbox !important; display: flex !important; }
	.d-sm-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; }
}

@media (min-width: 768px) {
	.d-md-none { display: none !important; }
	.d-md-inline { display: inline !important; }
	.d-md-inline-block { display: inline-block !important; }
	.d-md-block { display: block !important; }
	.d-md-flex { display: -ms-flexbox !important; display: flex !important; }
	.d-md-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; }
}

@media (min-width: 992px) {
	.d-lg-none { display: none !important; }
	.d-lg-inline { display: inline !important; }
	.d-lg-inline-block { display: inline-block !important; }
	.d-lg-block { display: block !important; }
	.d-lg-flex { display: -ms-flexbox !important; display: flex !important; }
	.d-lg-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; }
}

@media (min-width: 1200px) {
	.d-xl-none { display: none !important; }
	.d-xl-inline { display: inline !important; }
	.d-xl-inline-block { display: inline-block !important; }
	.d-xl-block { display: block !important; }
	.d-xl-flex { display: -ms-flexbox !important; display: flex !important; }
	.d-xl-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; }
}

/* --- 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-20 { padding-left: 20px; }
.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-20 { padding-left: 20px; padding-right: 20px; }
.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-20 { padding-top: 20px; padding-bottom: 20px; }
.py-24 { padding-top: 24px; padding-bottom: 24px; }


/* --- margin --- */
.mb-0, .mb-none { margin-bottom: 0px !important; }
.mb-2 { margin-bottom: 2px !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
.wpc-100 { width: 100% !important; }
.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-125 { max-width: 125px; }
.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 --- */
/* --- links --- */
.blank-link, a.blank-link, .blank-link a {
	border: none !important;
	&.hover {
		&:hover { text-decoration: underline; }
	}
}
.underline-link, a.underline-link, .underline-link a {
	border: none;
	text-decoration: underline;
	&:hover {
		text-decoration: none;
	}
}
.dash-link, a.dash-link, .dash-link a {
	border-bottom-style: dashed !important;
}
.type-link, a.type-link, .type-link a {
	border-bottom: 1px solid rgba(13,97,171,0.3);
	color: $color_primary;
	text-decoration: none;
	&:hover {
		border-color: $color_primary;
		text-decoration: none;
	}
}
.success-link, .success-link a, a.success-link {
	color: rgb(0, 163, 49);
	border-color: rgba(0, 163, 49, 0.3);
	&:hover {
		border-color: rgb(0, 163, 49);
	}
}
.invert-link, a.invert-link, .invert-link a {
	border-bottom: 1px solid transparent;
	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; }

a.dash-gray-link, .dash-gray-link a {
	border-bottom: 1px dashed $gray;
	color: $gray;
	&:hover {
		border-bottom-color: $blue;
		color: $blue;
	}
	&[aria-expanded="true"]{
		.fa-angle-double-down {
			@include transform(rotate(180deg));
		}
	}
}

.apply-link {
	border: none !important;
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-top: -3px;
	font-size: 9px;
	line-height: 10px;
	text-align: left;
}

.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_dark;
			text-decoration: none;
		}
		&:hover {
			color: $color_primary !important;
			.icobox__hover { color: $color_primary; }
		}
	}
}
.icobox {
	position: relative;
	.ico {
		position: absolute; top: 50%; left: 0; 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: 0; }
	}
	&.size_12 {
		$size : 12px;
		padding-left: $size + 4;
		&.icobox_right { padding-left: 0; padding-right: $size + 4; }
		& > .ico {
			width: $size; height: $size; margin-top: -($size/2);
			&.fa {
				font-size: 12px !important;
				line-height: $size;
			}
			&.top {
				top: 1px;
				margin-top: 0;
			}
			&.flag { height: 12px; margin-top: -6px; }
		}
	}
	&.size_16 {
		$size : 16px;
		padding-left: $size + 4;
		&.icobox_right { padding-left: 0; padding-right: $size + 4; }
		& > .ico {
			width: $size; height: $size; margin-top: -($size/2);
			&.fa {
				font-size: 14px;
				line-height: $size;
			}
			&.top {
				top: 2px;
				margin-top: 0;
			}
			&.flag { height: 12px; margin-top: -6px; }
		}
	}
	&.size_20 {
		$size : 20px;
		padding-left: $size + 4;
		&.icobox_right { padding-left: 0; padding-right: $size + 4; }
		& > .ico {
			width: $size; height: $size; margin-top: -($size/2);
			&.fa {
				font-size: 18px;
				line-height: $size;
			}
			&.flag { height: 15px; margin-top: -7px; }
		}
	}
	&.size_24 {
		$size : 24px;
		padding-left: $size + 8;
		&.icobox_right { padding-left: 0; padding-right: $size + 8; }
		& > .ico {
			width: $size; height: $size; margin-top: -($size/2);
			&.fa {
				font-size: 22px;
				line-height: $size;
			}
			&.top {
				top: -1px;
				margin-top: 0;
			}
			&.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: 0; padding-right: $size + 8px; }
		& > .ico {
			width: $size; height: $size; margin-top: -($size/2);
			&.top { top: 0; margin-top: 0; }
			&.flag { height: 24px; margin-top: -12px; }
		}
	}
	&.size_48 {
		$size : 48px;
		padding-left: $size + 10px;
		&.icobox_right { padding-left: 0; padding-right: $size + 10px; }
		& > .ico {
			width: $size; height: $size; margin-top: -($size/2);
			&.flag { height: 36px; margin-top: -18px; }
		}
	}
	&.size_64 {
		$size : 64px;
		padding-left: $size + 12px;
		&.icobox_right { padding-left: 0; padding-right: $size + 12px; }
		& > .ico {
			width: $size; height: $size; margin-top: -($size/2);
			&.flag { height: 48px; margin-top: -24px; }
		}
	}

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

	&.xxs-column {
		@media(max-width: 575px){
			padding-left: 0;
			padding-right: 0;
			.ico {
				position: relative; top: auto; right: auto; left: auto;
				margin: 0 auto;
			}
		}
	}
	&.xs-column {
		@media(max-width: 767px){
			padding-left: 0;
			padding-right: 0;
			.ico {
				position: relative; top: auto; right: auto; left: auto;
				margin: 0 auto;
			}
		}
	}

	&.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 {
		padding-left: 8px;
		padding-right: 8px;
		.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: lighten($color_primary, 50%); }
					&:hover { background: lighten($color_primary, 50%); }
				}
				&.active {
					a {
						background: $color_primary;
						color: $color_white;
						&:hover { background: darken($color_primary, 10%); }
					}
				}
			}
		}
	}

	.dropdown-toggle {
		.caret {
			right: 8px !important;
		}
		.filter-option {
			padding-right: 12px !important;
		}
	}

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

	&.dropdown-min-w-100 {
		div.dropdown-menu { width: 100%; min-width: 100px !important; }
	}
	&.dropdown-min-w-150 {
		div.dropdown-menu { width: 100%; min-width: 150px !important; }
	}
	&.dropdown-min-w-200 {
		div.dropdown-menu { width: 100%; min-width: 200px !important; }
	}
	&.dropdown-min-w-250 {
		div.dropdown-menu { width: 100%; min-width: 250px !important; }
	}
	&.dropdown-min-w-300 {
		div.dropdown-menu { width: 100%; min-width: 300px !important; }
	}
	&.dropdown-min-w-400 {
		div.dropdown-menu { width: 100%; min-width: 400px !important; }
	}
	&.dropdown-min-w-500 {
		div.dropdown-menu { width: 100%; min-width: 500px !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, & > span, & > .nav-link {
					background: transparent;
					border: none;
					position: relative;
					display: block;
					margin: 0;
					padding: 10px 12px 8px;
					color: $color_gray_90;
					line-height: 1.5;
					@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; }
					}
					&.disabled {
						color: $color_gray_60;
					}
					&:not(span):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;
					}
				}
			}
		}
		&.nav-tabs_b {
			border-bottom-color: $color_gray_10;
			margin: 0;
			font-size: 18px;
			& > li {
				position: relative;
				& > a, & > span, & .dropdown > a {
					border: 1px solid transparent !important;
					position: relative;
					display: block;
					padding: 1rem 1.5rem;
					font-size: 16px;
					line-height: normal;
					font-weight: bold;
					color: $color_gray_90;
					@include border-radius(0px);
					&:before {
						content: '';
						background: transparent;
						position: absolute; top: -1px; left: -1px; right: -1px;
						display: block; height: 2px;
					}
					&:hover {
						background: transparent;
						border-color: transparent;
						color: $color_primary;
						cursor: pointer;
					}
				}
				.dropdown {
					& > a {
						color: $color_primary;
					}
					.dropdown-menu {
						left: auto;
						right: 0;
						min-width: 180px;
						padding: 0;
						li {
							border: none;
							& + li {
								border-top: 1px solid $color_gray_05;
							}
							a {
								border: none;
								display: block;
								padding: 8px 12px;
							}
						}
					}
					&.open {
						& > a {
							background: $color_gray_05;
							border: none;
						}
					}
				}
				.label {
					position: absolute; bottom: 100%; left: 100%;
					margin: 0 0 -12px -10px;
					padding: 3px 4px;
					font-size: 11px;
					@include border-radius(0);
				}
				.drop {
					background: $color_white;
					border: 1px solid $color_gray_10;
					margin: -1px 0px 0px 0px; padding: 0px; list-style: none;
					position: absolute; top: 100%; right: 0px; z-index: 555;
					min-width: 180px;
					display: none;
					@include border-radius(3px 0px 3px 3px);
					@include box-shadow(0px 0px 5px $color_gray_20);
					li {
						& + li { border-top: 1px solid $color_gray_10; }
						a {
							border: none;
							display: block;
							padding: 6px 12px 8px;
							font-size: 16px;
							line-height: normal;
							font-weight: bold;
							color: $color_gray_90;
							&:hover {
								color: $color_primary;
							}
						}
						&.active {
							a {
								background: $color_primary;
								color: $color_white;
							}
						}
					}
				}
				//&:hover
				&.open {
					span {
						background: $color_white;
						position: relative; z-index: 777;
						border: 1px solid $color_gray_10;
						border-bottom-color: transparent;
					}
					.drop { display: block; }
				}
				&.active {
					& > a {
						background: $white !important;
						border-color: $color_gray_10 !important;
						border-top-color: $color_primary !important;
						border-bottom-color: $color_white !important;
						color: $color_primary !important;
						&:before {
							background: $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: 9999;
	@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 {}
.js-link {
	&:hover {
		cursor: pointer;
	}
}


.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; }
	}
}

//
.js-changeable {
	.js-changeable__text {}
	.js-changeable__form {
		display: none;
		white-space: nowrap;
		.form-control {
			display: inline-block;
			vertical-align: top;
		}
		.btn {
			display: inline-block;
			vertical-align: top;
		}
	}
	&.active {
		.js-changeable__text { display: none; }
		.js-changeable__form { display: block; }
	}
}

//
.checkbox-state {
	.checkbox-state__toggle {}
	.checkbox-state__item {
		display: none;
	}
	&.checkbox-state-active {
		.checkbox-state__item {
			display: block;
		}
	}
}

//
.shortext-balloon {
	background: #D5E6F6;
	position: absolute; top: auto; left: auto;
	z-index: 999;
	width: 280px;
	margin-left: 16px;
	padding: 8px;
	font-size: 12px;
	line-height: 1.25;
	@include border-radius(3px);
	@include box-shadow(0 0 8px rgba(0,0,0,0.05));
	&:before {
		content: '';
		position: absolute;
	}
	&.left {
		&:before {
			top: 8px;
			right: 100%;
			border: 8px solid transparent;
			border-right-color: #D5E6F6;
		}
	}
	&.right {
		&:before {
			top: 8px;
			left: 100%;
			border: 8px solid transparent;
			border-left-color: #D5E6F6;
		}
	}
	.shortext-copy {
		background: url(../images/icons/i-copy.png) no-repeat 50% 50% / auto 100%;
		display: block;
		float: right;
		width: 18px;
		height: 18px;
		margin-bottom: 4px;
		margin-right: 8px;
		color: $blue;
		&:hover {
			cursor: pointer;
		}
	}
}

//collapser
.collapser {
	position: relative;
	.collapser-head {
		&:hover {
			cursor: pointer;
		}
	}
	.collapser-body {
		display: none;
	}
	&.in {
		.collapser-caret {
			.fa {
				@include transform(rotate(180deg));
			}
		}
		.collapser-body {
			display: block;
		}
	}
}