/* Copyright (c) 2021  Vyacheslav Maltsev  Russia, Tuapse */


/*
@import (less,reference) "import/file";
&:extend(.class);
*/

/* =========== STYLE BORDER RADIUS =========== */
.border-radius-0px {
	/* //behavior: url(border-radius.htc); IE+ */
	-webkit-border-radius: 0; /* Chrome < 4.0, Safari < 5.0, iOS */
	-moz-border-radius: 0; /* Firefox < 4.0 */
	border-radius: 0; /* CSS3 */
}

.border-radius-2px {
	/* //behavior: url(border-radius.htc); IE+ */
	-webkit-border-radius: 2px; /* Chrome < 4.0, Safari < 5.0, iOS */
	-moz-border-radius: 2px; /* Firefox < 4.0 */
	border-radius: 2px; /* CSS3 */
}

.border-radius-3px {
	/* //behavior: url(border-radius.htc); IE+ */
	-webkit-border-radius: 3px; /* Chrome < 4.0, Safari < 5.0, iOS */
	-moz-border-radius: 3px; /* Firefox < 4.0 */
	border-radius: 3px; /* CSS3 */
}

.border-radius-4px {
	/* //behavior: url(border-radius.htc); IE+ */
	-webkit-border-radius: 4px; /* Chrome < 4.0, Safari < 5.0, iOS */
	-moz-border-radius: 4px; /* Firefox < 4.0 */
	border-radius: 4px; /* CSS3 */
}

.border-radius-5px {
	/* //behavior: url(border-radius.htc); IE+ */
	-webkit-border-radius: 5px; /* Chrome < 4.0, Safari < 5.0, iOS */
	-moz-border-radius: 5px; /* Firefox < 4.0 */
	border-radius: 5px; /* CSS3 */
}

.border-radius-50pct {
	/* //behavior: url(border-radius.htc); IE+ */
	-webkit-border-radius: 50%; /* Chrome < 4.0, Safari < 5.0, iOS */
	-moz-border-radius: 50%; /* Firefox < 4.0 */
	border-radius: 50%; /* CSS3 */
}


/* =========== INPUT ERROR =========== */
.input-error {
	/* background:#f5a39a !important; */
	border: 1px solid #d35d4f !important;
	/* //filter: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, strength=10); */ /* IE < 9.0 */
	-webkit-box-shadow: 0 0 6px -2px red !important; /* Safari < 5.1, Chrome < 10.0, Android < 4.0, iOS Safari < 5.0 */
	-moz-box-shadow: 0 0 6px -2px red !important; /* Firefox < 4.0 */
	box-shadow: 0 0 6px -2px red !important; /* CSS3 */
}

.input-error-bg {
	background-color: #F5A39A !important;
	color: white !important;
}

.element-error {
	font-size: .7rem;
	color: red !important;
}


/* Выравнивание по центру вертикали */
.Vertical-Alignment {
	& > div,
	& > img,
	& > span,
	& > input,
	& > select,
	& > label,
	& > button,
	& > em,
	& > a,
	& > i,
	& > p {
		display: inline-block;
		vertical-align: middle;
	}

	&:after { /* Было: &:before */
		display: inline-block;
		content: "";
		height: 100%;
		vertical-align: middle;
	}
}


/* =========== SYSTEM CLASS =========== */
.box-sizing-Border-box {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.clear {
	clear: both;

	&:before,
	&:after {
		display: block;
		content: "&nbsp;";
		height: 0;
		line-height: 0;
		clear: both;
		visibility: hidden;
	}
}

/* Очистка float`ов без необходимости трогать разметку */
.clearfix {
	//zoom: 1;

	&:after {
		display: table;
		content: "";
		clear: both;
	}
}

/* Блокируем выделение текста на сайте */
.disable-text-selection {
	-webkit-user-select: none; /* Chrome 1.0+, Safari 3.1+ */
	-moz-user-select: none; /* Firefox 1.5+ */
	-ms-user-select: none; /* IE 10+, Edge */
	user-select: none;
}

/* Красная звёздочка в конце текста */
.red-star-after:after {
	content: " * ";
	color: #d50003; /* Было: #DC143C */
}

/* Красная звёздочка перед текстом */
.red-star-before:before {
	content: " * ";
	color: #d50003; /* Было: #DC143C */
}

.left { text-align: left !important; }
.right { text-align: right !important; }
.center { text-align: center; }
.hide { display: none; }
.red { color: #d50003 !important; } /* Было: #DC143C */
.nowrap { white-space: nowrap !important; }

/* Font Size */
.f10 { font-size: 10px !important; }
.f18 { font-size: 18px !important; }
.f20 { font-size: 20px !important; }
.f24 { font-size: 24px !important; }
.f30 { font-size: 30px !important; }
.f40 { font-size: 40px !important; }
.f50 { font-size: 50px !important; }

/* Width Size */
.width-85px { width:85px !important; }
.width-125px { width:125px !important; }
.width-150px { width:150px !important; }
.width-275px { width:275px !important; }
.width-375px { width:375px !important; }
.width-500px { width:500px !important; }
.width-100pc { width:100% !important; }

/* Статус вывода ошибок ввода данных. */
#currentTaskStatus {
	background-color: #f2dede;
	margin-bottom: 10px;
	padding: 10px 20px;
	border: 1px solid #b30000;
	.border-radius-4px;

	&.successfully {
		background-color: #dff0d8 !important; /* rgb(223,240,216) */
		border: 1px solid green !important;
		& > span[data-for="successfully"] { color: green !important; }
	}

	& > ul {
		margin: 0;
		padding: 0 20px;

		& > li {
			line-height: 1;
			padding-bottom: 5px;
		}
	}

	& > p {
		margin: 0 0 10px;
		font-weight: Bold;
	}

	& * {
		color: #b30000 !important;
		font-size: 14px;
	}
}

/* Стиль иконок валюты, идущей после цены */
.currency-icon {
	&:after {
		display: inline-block;
		font-family: "Font Awesome 5";
		font-size: 1em;
		font-style: normal;
		font-weight: 300;
		padding-left: 5px;
		color: #bbb;
		text-decoration: none !important;
	}

	/* Знак Рубля */
	&[data-currency="rub"]:after { content: "\f158"; /* ruble-sign */ }

	/* Знак Доллара */
	&[data-currency="usd"]:after { content: "\f155"; /* dollar-sign */ }

	/* Знак Евро */
	&[data-currency="eur"]:after { content: "\f153"; /* euro-sign */ }

	/* Тонкий стиль иконки валюты (по умолчанию) */
	&[data-icon="lite"]:after { font-weight: 300; }

	/* Нормальный стиль иконки валюты */
	&[data-icon="normal"]:after { font-weight: 400; }
}


/* Эмуляция inline-block для IE6-7 */
.inline-block-ie6-7 {
	//margin-left: 0;
	//display: inline;
	//zoom: 1;
}


/* Заглушка при ожидании AJAX запроса */
#waitingResponseWrapper {
	position: fixed !important;
	display: none;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background-color: white;
	cursor: default;
	/*filter: alpha(opacity=90);*/ /* IE < 9.0 */
	-moz-opacity: 0.9; /* Firefox < 3.5 */
	opacity: 0.9; /* CSS3 */
	z-index: 9999;
	text-align: center;
	.Vertical-Alignment; /* Импорт класса */

	& > .preloader__image {
		position: relative;
		width: 170px;
		height: 170px;
		background: url('/images/preloader.gif') no-repeat; /*расположение (url) изображения gif и др. параметры*/
		background-size: cover; /* Масштабируем фон */
	}
}



/* Модальное окно */
#ManagedModalWindowObject {
	position: fixed;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	background-color: rgba(0,0,0,0.1);
	text-align: center;
	z-index: 9050 !important;

	&:after {
		content: "";
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}

	& > .managed-modal-window-wrapper {
		position: relative;
		display: inline-block; /* Было block*/
		min-width: 550px; /* Было 600 */
		max-width: 97%;
		min-height: 250px; /* Было 300 */
		max-height: 745px;
		padding: 2px 2px 75px;
		background-color: white;
		text-align: left !important;
		font-size: 14px;
		vertical-align: middle;
		z-index: 9100 !important;
		-webkit-box-shadow: 0 0 14px -1px black; /* Safari < 5.1, Chrome < 10.0, Android < 4.0, iOS Safari < 5.0 */
		-moz-box-shadow: 0 0 14px -1px black; /* Firefox < 4.0 */
		box-shadow: 0 0 14px -1px black; /* CSS3 */
		.border-radius-5px;
		overflow: hidden;

		& > .cross-closes-window {
			position:absolute;
			display: inline-block;
			top: 7px;
			right: 8px;
			width:31px;
			height:31px;
			text-align: center;
			/*background:url(/style/sprite/spritesheet_32px.png) -5px -299px no-repeat;*/
			cursor:pointer;
			-webkit-transition: all .4s;
			-moz-transition: all .4s;
			-o-transition: all .4s;
			transition: all .4s;
			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
			opacity:0.5;
			z-index: 10;
			line-height: 26px;
			font-size: 20px;
            user-select: none;

			&:hover {
				-webkit-transition: all .4s;
				-moz-transition: all .4s;
				-o-transition: all .4s;
				transition: all .4s;
				-webkit-transform: rotate(180deg);
				-moz-transform: rotate(180deg);
				-ms-transform: rotate(180deg);
				-o-transform: rotate(180deg);
				transform: rotate(180deg);
				opacity:1;
			}
		}

		/* Заголовок модального окна */
		& > .modal-header-block {
			position: relative;
			display: block;
			top: 0;
			left: 0;
			width: 100%;
			height: 45px;
			padding-left: 20px;
			padding-right: 50px;
			font-size: 20px;
			font-weight: 600;
			border-bottom: 1px solid #bbb;
			color: #333;
			background-color: #e5e5e5;
			white-space: nowrap;
	/*		margin: 0;
			z-index: -1;*/
			/* Выравнивание по центру вертикали */
			.Vertical-Alignment; /* Импорт класса */

			& > span { color: #333; }
		}

		& > .modal-system-block {
			position: relative;
			padding: 0 20px;
		}

		& > .modal-body-block-wrapper {
			position: relative;
			display: block;
			width: 100%;
			max-height: 630px;
			overflow: auto;

			& > .modal-note-block {
				position: relative;
				display: block;
				width: 100%;
				color: red;
				font-size: 12px;
				font-weight: 600;
				text-align: center;
				padding: 5px 20px;
			}

			& > .modal-body-block {
				position: relative;
				display: inline-block;
				width: 100%;
				height: 100%;
				padding: 10px 20px;
				overflow: hidden;

				& .element-error {
					position: relative;
					display: block;
					width: 100%;
					color: red;
					font-size: 12px;
					font-weight: 600;
				}
			}
		}

		/* Нижняя часть модального окна с блоком управляющих кнопок: "OK", "Применить", "Отмена" */
		& > .modal-footer-block {
			position: absolute;
			display: block;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 60px;
			border-top: 1px solid #bbb;
			background-color: #e5e5e5;
			-webkit-box-shadow: 0 0 8px -4px black; /* Safari < 5.1, Chrome < 10.0, Android < 4.0, iOS Safari < 5.0 */
			-moz-box-shadow: 0 0 8px -4px black; /* Firefox < 4.0 */
			box-shadow: 0 0 8px -4px black; /* CSS3 */

			& > .modal-buttons-block {
				display: block;
				width: 100%;
				height: 100%;
				/*margin-left: 15px;*/
				padding: 0 20px;
				/* Выравнивание по центру вертикали */
				.Vertical-Alignment; /* Импорт класса */
				/*float: right;*/

				/* Кнопки: "Применить", "Сохранить", "Отмена" */
				& button {
					padding: 10px 25px;
					background-color: #cb2333; /*rgb(200,35.51)*/
					color: white;

					&:nth-child(n+2) { margin-left: 10px; }
				}
			}
		}
	}
}


/* Элемент выбора даты из календаря */
/* Изменяемый размер шрифта по font-size: ; */
.calendar-container-wrapper {
	position: relative;
	display: inline-block;
	font-size: 16px;
	/* width: 16em; */

	/* Элемент выбора даты из календаря */
	& > input[type="text"] {
		position: relative;
		width: 100%;
		height: 100%;
		min-width: 7.3rem;
		padding-top: 3px;
		padding-right: 1.8rem; /* Должен совпадать с шириной (width:) соседнего правого элемента LABEL */
		padding-bottom: 3px;
		padding-left: .5rem; /* Должен совпадать с шириной (width:) соседнего левого элемента LABEL */
		font-size: 0.88em !important;
		border: 1px solid #ccc;
		text-align: center;
		.border-radius-4px; /* Импорт класса */

		& + label.icon {
			position: absolute;
			display: inline-block;
			top: 0;
			right: 0;
			height: 100%;
			width: 1.8rem; /* Должен совпадать с правым отступом (padding-right:) соседнего элемента INPUT */
			text-align: center;

			/* Календарь */
			&:before {
				display: inline-block;
				content: "\f073"; /* calendar-alt */
				font-family: "Font Awesome 5";
				font-weight: 300;
				font-size: 1rem;
				color: #003366;
				vertical-align: middle;
			}

			/* Выравнивание по центру вертикали */
			&:after {
				display: inline-block;
				content: "";
				height: 100%;
				vertical-align: middle;
			}
		}
	}

	/* Текстовая метка */
	& > .label {
		position: absolute;
		display: none;
		top: 0;
		left: 3px;
		text-align: left;
		width: 1.4rem !important; /* Должен совпадать с левым отступом (padding-left:) соседнего элемента INPUT */
		height: 100%;
		font-size: 0.9em;
		color: #aaa;
		margin-left: 0;
		vertical-align: middle;

		/* Выравнивание по центру вертикали */
		&:after {
			display: inline-block;
			content: "";
			height: 100%;
			vertical-align: middle;
		}
	}
}

.input-vs-button-wrapper {
	position: relative;

	& > input {
		position: relative;
		padding-left: 5px;
		padding-right: 105px;
	}

	& > button {
		position: absolute;
		top: 0;
		right: 0;
		width: 100px;
		height: 100%;
		font-size: 12px;
		cursor: pointer;
	}
}


/* Стилизованный CHECKBOX */
.styling-checkbox-wrapper {
	position: relative;
	display: inline-block;
	font-size: 16px;

	& > .styling-checkbox-label {
		position: relative;
		display: inline-block;
		white-space: nowrap;
		.Vertical-Alignment; /* Импорт класса */

		& > .styling-checkbox-title {
			position: relative;
			display: inline-block;
			vertical-align: middle;
			font-size: 1em;
			line-height: 1;
		}

		/* Cначала обозначаем стили для IE8 и более старых версий, т.е. здесь мы немного облагораживаем стандартный чекбокс. */
		& > .styling-checkbox {
			display: inline-block;
			margin-right: 3px;
			width: 17px;
			height: 17px;
			/* Прячем оригинальный чекбокс. */
			position: absolute;
			//filter: alpha(opacity=0);
			-moz-opacity: 0; /* Firefox < 3.5 */
			opacity: 0; /* CSS3 */

			/* Это для всех браузеров, кроме совсем старых, которые не поддерживают селекторы с плюсом.
			Далее идет оформление чекбокса в современных браузерах, а также IE9 и выше.
			Благодаря тому, что старые браузеры не поддерживают селекторы :not и :checked,
			в них все нижеследующие стили не сработают. */
			& + span {
				position: relative; /* будем позиционировать псевдочекбокс относительно label */
				/*padding: 0 0 0 55px;  оставляем слева от label место под псевдочекбокс */
				cursor: pointer; /* показываем, что label кликабелен. */
				width: 2.25em; /* 38px; */
				height: 1.3em; /* 22px; */
				margin-right: 15px;
				vertical-align: middle;

				/* Оформление первой части чекбокса в выключенном состоянии (фон). */
				&:before {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-color: #cdd1da;
					-webkit-border-radius: 0.65em; /* Chrome < 4.0, Safari < 5.0, iOS */
					-moz-border-radius: 0.65em; /* Firefox < 4.0 */
					border-radius: 0.65em; /* CSS3 */
					-webkit-box-shadow: inset 0 2px 3px rgba(0,0,0,.2); /* Safari < 5.1, Chrome < 10.0, Android < 4.0, iOS Safari < 5.0 */
					-moz-box-shadow: inset 0 2px 3px rgba(0,0,0,.2); /* Firefox < 4.0 */
					box-shadow: inset 0 2px 3px rgba(0,0,0,.2); /* CSS3 */
				}

				/* Оформление второй части чекбокса в выключенном состоянии (переключатель). */
				&:after {
					content: "";
					position: absolute;
					top: 0.14em; /* 2px; */
					left: 0.15em; /* 2px; */
					width: 1.01em; /* 18px; */
					height: 1.01em; /* 18px; */
					background-color: #fff;
					-webkit-border-radius: 0.5em; /* Chrome < 4.0, Safari < 5.0, iOS */
					-moz-border-radius: 0.5em; /* Firefox < 4.0 */
					border-radius: 0.5em; /* CSS3 */
					/* border-radius: 9px; */
					-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.3); /* Safari < 5.1, Chrome < 10.0, Android < 4.0, iOS Safari < 5.0 */
					-moz-box-shadow: 0 2px 5px rgba(0,0,0,.3); /* Firefox < 4.0 */
					box-shadow: 0 2px 5px rgba(0,0,0,.3); /* CSS3 */
					/* Анимация, чтобы чекбокс переключался плавно */
					-webkit-transition: all .2s; /* Chrome < 26.0, Safari, Android, iOS */
					-moz-transition: all .2s; /* Firefox < 16.0 */
					-o-transition: all .2s; /* Opera < 12.10 */
					transition: all .2s; /* CSS3 */
				}
			}

			/* Меняем фон чекбокса, когда он включен. */
			&:checked + span:before { background-color: #9FD468 !important; }

			/* Меняем фон чекбокса, когда он включен. */
			&.payday:checked + span:before { background-color: #138496 !important; }

			/* Меняем фон чекбокса, когда он включен. */
			&.red-orange:checked + span:before { background-color: #ff4700 !important; }

			/* Сдвигаем переключатель чекбокса, когда он включен. */
			&:checked + span:after { left: 1.12em; /* 18px; */ }

			/* Меняем фон чекбокса при наведении, когда он выключен. */
			&:hover + span:before { background-color: #aaa; }

			/* Анимация, плавная смена фона чекбокса при наведении и удалении курсора */
			&:hover + span:before, & + span:before {
				-webkit-transition: background-color .4s; /* Chrome < 26.0, Safari, Android, iOS */
				-moz-transition: background-color .4s; /* Firefox < 16.0 */
				-o-transition: background-color .4s; /* Opera < 12.10 */
				transition: background-color .4s; /* CSS3 */
			}

			/* Показываем получение фокуса. */
			&:focus + span:hover {
			/*	box-shadow: 0 0 0 3px rgba(255,255,0,.5);*/
			}
		}
	}
}


/* Показ скрытого пароля */
.password-show-element {
	position: relative;
	display: inline-block;

	& > input {
		padding-left: 0.5em !important;
		padding-right: 2.2em !important;
		margin: 0 !important;
		width: 100%;
		height: 1.9em !important;
		font-size: 1em !important;
		vertical-align: top;
	}

	& > label {
		position: absolute;
		display: inline-block;
		top: 0;
		right: 0;
		width: 2.2em !important;
		height: 100%;
		text-align: center;
		vertical-align: top;
		margin: 0 !important;

		&:before {
			font-family: "Font Awesome 5";
			content: "\f070";
			font-size: 1.3em;
			font-weight: 300;
			color: #ccc;
			cursor: pointer;
			vertical-align: middle;
		}

		&:after {
			display: inline-block;
			content: "";
			height: 100%;
			vertical-align: middle;
		}
	}

	& > input[type="text"] + label {
		&:before {
			content:"\f06e";
		}
	}
}


/* Показ скрытого пароля */
.password-show-bootstrap {
	position: relative;

	& > input {
		padding-left: 0.5em !important;
		padding-right: 2.5em !important;
		margin: 0 !important;
		width: 100%;
		vertical-align: top;
	}

	& > label {
		position: absolute;
		display: inline-block;
		top: 0;
		right: 5px;
		width: 2.2rem !important;
		height: 100%;
		text-align: center;
		vertical-align: top;
		margin: 0 !important;
		z-index: 9999;

		&:before {
			font-family: "Font Awesome 5";
			content: "\f070";
			font-size: 1.3em;
			font-weight: 300;
			color: #ccc;
			cursor: pointer;
			vertical-align: middle;
		}

		&:after {
			display: inline-block;
			content: "";
			height: 100%;
			vertical-align: middle;
		}
	}

	& > input[type="text"] + label {
		&:before {
			content:"\f06e";
		}
	}
}


.unselectable {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
}


.marked { color: red !important; }