html{
	--btn-shadow-h: inset 1000px 1000px 1000px 1000px rgba(0,0,0,0.05);
	--btn-shadow-a: inset 1000px 1000px 1000px 1000px rgba(0,0,0,0.14);
	--btn-shadow-h-ll: inset 1000px 1000px 1000px 1000px rgba(255,255,255,0.3);
	--btn-shadow-a-ll: inset 1000px 1000px 1000px 1000px rgba(255,255,255,0.6);
}

/* для старых браузеров, см. UtilsPage.renderOldBrowser() */
label.g_old{ height: var(--top-forms-base-height); line-height: var(--top-forms-base-height); }
label.g_old > input{ margin-right: 4px; }

.btn,
textarea,
body .tox-tinymce,
div.process,
label { border-radius: var(--top-forms-radius); }

/* common wrappers */
.top-radio-system,
.top-selectorGroup{
	height: auto; min-height: var(--top-forms-base-height); max-width: 100%;
	vertical-align: middle;
	display: inline-flex; align-items: center;
}

input{ text-align: inherit; }

:not(.top-input) > .top-input_input{ width: 180px; }

.top-input_input:not(.top-changed) + .top-button{ display: none; }

.top-input_input[type="date"]{ position: absolute; opacity: 0; }
.top-input_input[type="date"]::-webkit-calendar-picker-indicator{ width: 100%; height: 100%; }
.top-input_input[type="date"]::-webkit-inner-spin-button,
.top-input_input[type="date"]::-webkit-clear-button,
.top-input_input[type="date"]::-webkit-search-cancel-button{ display: none; }

.top-input_input[type="date"] + input,
.top-input_input.hasDatepicker{ width: 95px; }

input[type=submit],
input[type=button],
button{ height: 32px; }

.input.active,
.input:focus,
.select.focus,
textarea:focus,
input[type=text]:focus,
input[type=password]:focus{ border-color: var(--top-forms-border-color); }
input.tox-toolbar-textfield:focus{ border: none; }

label.inline{ padding: 0 3px; }

.error_message{ color: var(--color-text-negative); }

input.warning,
.warning > input[type="text"]{ border-color: #E38D17FF !important; color: #E38D17FF; }

/* кнопка */
[class*="btn-"]{ user-select: none; }

.btn{
	cursor: pointer;
	box-shadow: none; border: none; background: var(--color-mint-600); padding: 5px 10px;
	color: #FFF; font-size: 14px; line-height: 22px; text-align: center; text-decoration: none; text-shadow: none;
	display: inline-block; vertical-align: middle; align-items: center;
}
.btn:hover,
.btn:focus{ box-shadow: var(--btn-shadow-h); color: #FFF; outline: none; text-decoration: none; }
.btn:active,
.btn.active{ padding-top: 6px; padding-bottom: 4px; box-shadow: var(--btn-shadow-a); }
.btn[class*="-ll"]:hover,
.btn[class*="-ll"]:focus{ box-shadow: var(--btn-shadow-h-ll); }
.btn[class*="-ll"]:active,
.btn[class*="-ll"].active{ box-shadow: var(--btn-shadow-a-ll); }
.btn.disabled,
.btn[disabled]{ cursor: default; background-color: #bdc3c7; color: rgba(255, 255, 255, 0.75); box-shadow: none; }

.btn-gray{ background-color: var(--color-gray-l); }
.btn-cyan{ background-color: var(--color-cyan); }
.btn-red{ background-color: var(--color-bg-negative-1); }
.btn-blue{ background-color: var(--color-bg-primary-1); }
.btn-orange{ background-color: var(--color-bg-warning-1); }
.btn-blue-ll{ background-color: var(--color-blue-ll); color: var(--color-text-primary) !important; }
.btn-blue-dd{ background-color: var(--color-blue-dd); }

.btn-white{ border-radius: 4px; border: 1px solid #DBE5EA !important; background-color: #FFF; padding: 5px 10px; color: inherit; }
.btn-white:hover,
.btn-white:focus{ box-shadow: none; border-color: #D5DBDE !important; background-color: #F5F5F5; color: inherit; }
.btn-white:active,
.btn-white.active{ box-shadow: none; border-color: #D5DBDE !important; background-color: #EEE; }

.btn-transparent{ cursor: pointer; opacity: 0.7; }
.btn-transparent:focus,
.btn-transparent:hover{ opacity: 1; }

.btn-transparent-invert{ background: none; color: var(--color-gray-l); }
.btn-transparent-invert:focus,
.btn-transparent-invert:hover{ box-shadow: none; background: none; color: var(--color-gray); }

.btn.pressed{ box-shadow: inset rgba(0,0,0,0.3) 2px 2px 0; text-shadow: rgba(0,0,0,0.3) 2px 2px; filter: brightness(95%); }

.btn[class*=icon]{ padding: 9px 10px; line-height: 16px; }
.btn[class*=icon].active,
.btn[class*=icon]:active{ padding: 10px 10px 8px 10px; }

button[class*=icon]{ border: none; padding: 0; }
label[class*="btn-"]{ position: relative; }
label[class*="btn-"] [type="file"]{ opacity: 0; }

/* select */
.select{
	cursor: pointer;
	box-sizing: content-box !important;
	border: 1px solid #BDC3C7; background: #FFFFFF; width: 160px; height: 30px; padding: 0;
	font-size: 14px; line-height: 30px; vertical-align: middle;
	display: inline-block; position: relative;
}
.select:not(.disabled):not(.top-error):hover{ border-color: #00BD9C; }
.select.disabled,
.select.loading{ cursor: default; background: #ECF0F1; }
.select .text{ white-space: nowrap; position: absolute; top: 1px; left: 5px; right: 5px; bottom: 2px; overflow: hidden; margin-left: 3px; }
.select .text [class^=icon-]{ font-size: 16px; width: 16px; height: 16px; margin: 0 5px 3px 0; text-align: center; position: static !important; display: inline-block; }
.select .arrow{ color: var(--color-layout-front-6); height: auto; position: absolute; top: 0; right: 5px; bottom: 0; }
.select .arrow{
	background: linear-gradient(to right, rgba(var(--background-color-r),var(--background-color-g),var(--background-color-b),0) 0, rgba(var(--background-color-r),var(--background-color-g),var(--background-color-b),0.8) 10%, rgba(var(--background-color-r),var(--background-color-g),var(--background-color-b),1) 50%);
	width: 14px; text-align: center;
}
.select.disabled .arrow,
.select.loading .arrow{ background: linear-gradient(to right, rgba(236, 240, 241,0) 0, rgba(236, 240, 241,0.8) 10%, rgba(236, 240, 241,1) 50%); }
.select .arrow:before{ position: relative; top: calc(50% - 0.5em); }
.select > select{
	cursor: default; border: none; width: 100%; height: 30px; max-height: 100%; padding: 0; font-size: 14px; line-height: 25px;
	position: absolute; top: 0px; left: 0px; opacity: 0;
}
.select:hover select{ cursor: pointer; }

.select.dark{ background: var(--color-layer-1); color: #FFF; }
.select.dark:not(.disabled):not(.top-error):hover{ background: rgba(14, 65, 142, 0.12); border-color: #BDC3C7; box-shadow: none; }
.select.dark.active{ background: var(--color-blue-dd); box-shadow: inset 0 -2px 3px 0 #343D46; }
.select.dark .arrow{ background: none; color: #E6F3FF; }
.select.dark .arrow:before{
	content: '';
	border-top: 1px solid #E6F3FF; border-right: 1px solid #E6F3FF; width: 8px; height: 8px;
	display: block;
	transform: rotate(45deg);
}
.select.dark.active .arrow:before{ transform: rotate(135deg); margin-top: -2px; }