/*Кнопки*/
.btn {
    padding: .5rem .7rem;
    font-size: .75rem;
    border-radius: var(--base-btn-radius);
    transition: .3s all ease-in-out;
}
.btn:hover {
    box-shadow: inset 0 0 100px rgba(255,255,255,.3);
    transition: .3s all ease-in-out;
}
.standard-page-content .btn,
.comment-form-wrapper .new-comment .btn-send {
    border-radius: var(--base-btn-radius);
}
.btn-primary, .btn-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-success, .btn-success:hover {
    background-color: var(--success-color);
    border-color: var(--success-color);
}
.btn-alert, .btn-alert:hover {
    background-color: var(--alert-color);
    border-color: var(--alert-color);
}

.expand .btn,
.expand.btn {
    width: 100%;
}

/*Выпадаюшее меню*/
.dropdown-menu>li>a {
    padding: .5rem 1rem;
    font-size: .7rem;
}
.dropdown-menu>li>a .fa,
.dropdown-menu>li>a .glyphicon {
    margin-right: .3rem;
}
.dropdown-menu>li>a[href*="delete"] {
    color: var(--alert-color);
}

/*Поля ввода*/
input[type="email"],
input[type="number"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea, textarea.form-control {
	color: var(--dark-gray);
	background: var(--white);
    border-color: #ccc;
	border-radius: var(--base-btn-radius);
	box-shadow: none;
	transition: all 0.2s ease-in-out;
    padding: .25rem;
    height: auto;
}

.builder .field-content input[type="email"],
.builder .field-content input[type="number"],
.builder .field-content input[type="text"],
.builder .field-content input[type="tel"],
.builder .field-content input[type="url"],
.builder .field-content input[type="password"],
.builder .field-content textarea, 
.builder .field-content textarea.form-control {
    padding: 1rem;
}

input[type="email"]:hover,
input[type="number"]:hover,
input[type="text"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="password"]:hover,
textarea:hover, textarea.form-control:hover,
select:hover {
	border-color: var(--gray);
}
input[type="email"]:focus,
input[type="number"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus, textarea.form-control:focus,
select:focus {
	color: var(--dark-gray);
	box-shadow: none;
	border-color: var(--primary-color);
    outline: none;
}

/*Чекбоксы и радиокнопки*/
input[type='checkbox'],
input[type='radio'] {
	appearance: none;
	cursor: pointer;
	width: 1em;
	height: 1em;
	position: relative;
	overflow: hidden;
	color: var(--gray);
	box-shadow: inset 0 0 0 1px var(--gray);
	background: transparent;
	transition: all 0.3s ease-in-out;
}
input[type='checkbox'] {
	border-radius: 4px;
}

input[type='radio'] {
	border-radius: 50px;
}

input[type='checkbox']:checked,
input[type='radio']:checked {
  background: var(--primary-color);
  box-shadow: inset 0 0 0 1px var(--primary-color);
}

input[type='checkbox']::after,
input[type='radio']::after {
	content: '';
	position: absolute;
	inset: 0;
	transition: all 0.3s ease-in-out;
	background: #fff;
	mask-repeat: no-repeat;
    mask-position: center;
    transform: scale(0);
}
input[type='checkbox']::after {
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1.75 -3 16 16"><path d="M11.53.23c-.15-.15-.36-.24-.57-.23h0c-.2,0-.39.09-.53.23L3.91,6.75l-2.59-2.59c-.14-.15-.33-.23-.54-.24-.23,0-.4.07-.55.21-.3.29-.31.78,0,1.1l3.14,3.14c.15.15.35.22.54.22s.39-.07.54-.22L11.52,1.32c.15-.14.23-.33.23-.54,0-.21-.08-.4-.22-.54ZM10.97.38h0s0,0,0,0Z"/></svg>');
    mask-size: 80%;
}
input[type='radio']::after {
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle class="cls-1" cx="5" cy="5" r="5"/></svg>');
    mask-size: 50%;
}

input[type='checkbox']:checked::after,
input[type='radio']:checked::after {
  transform: none;
}

/*Элементы форм*/
.form-position.selected {
    background: var(--light-bg);
    border-radius: var(--r1);
}

/*Стили форм для страниц. Обязательно к контейнеру формы добавьте класс .t-form, чтобы стили сработали*/
.t-form .checkbox-text a {
    text-decoration: underline;
}
.t-form .checkbox-text a:hover {
    text-decoration: none;
}
.t-form .offer-title {
	font-weight: bold;
	font-size: 1rem;
}
.t-form .stream-info,
.t-form .stream-vacant {
	font-size: .75rem !important;
}
.t-form .form-position {
    padding: .75rem .75rem .75rem 2.5rem;
}
.t-form .form-position-price {
	color: var(--gray);
	font-size: 1rem;
}
.t-form .form-position-title .text-muted.small {
	font-size: .75rem !important;
}
.t-form .stream-vacant,
.t-form .final-price {
	font-weight: bold;
	color: var(--primary-color);
}
.t-form .f-btn {
    padding: .5rem .7rem;
    font-size: 1rem;
    border-radius: var(--base-btn-radius);
    transition: .3s all ease-in-out;
}
.t-form .f-btn:hover {
    box-shadow: inset 0 0 100px rgba(255,255,255,.3);
    transition: .3s all ease-in-out;
}

.expand .f-btn {
    width: 100%;
}

.t-form input[type="email"],
.t-form input[type="number"],
.t-form input[type="text"],
.t-form input[type="tel"],
.t-form input[type="url"],
.t-form input[type="password"],
.t-form textarea {
	color: var(--dark-gray);
	background: var(--white);
	border: 1px solid var(--gray);
	border-radius: var(--base-btn-radius);
	box-shadow: none;
	transition: all 0.2s ease-in-out;
    height: auto;
}
.t-form select,
.t-form input[type="email"]:hover,
.t-form input[type="number"]:hover,
.t-form input[type="text"]:hover,
.t-form input[type="tel"]:hover,
.t-form input[type="url"]:hover,
.t-form input[type="password"]:hover,
.t-form textarea:hover,
.t-form select:hover {
	border-color: var(--dark-gray);
}
.t-form select,
.t-form input[type="email"]:focus,
.t-form input[type="number"]:focus,
.t-form input[type="text"]:focus,
.t-form input[type="tel"]:focus,
.t-form input[type="url"]:focus,
.t-form input[type="password"]:focus,
.t-form textarea:focus,
.t-form select:focus {
	color: var(--dark-gray);
	box-shadow: none;
	border-color: var(--primary-color);
    outline: none;
}

/*checkboxex and radio*/
.t-form .custom-field.type-checkbox .field-label .label-value {
	margin-left: 0;
}
.t-form input[type="checkbox"],
.t-form input[type="radio"] {
	display: none !important;
}
.t-form input[type="checkbox"] + span,
.t-form input[type="checkbox"] + label,
.t-form input[type="radio"] + span,
.t-form input[type="radio"] + label {
	position: relative;
	padding-left: 1.5rem;
	display: block;
}
.t-form input[type="checkbox"] + span:before,
.t-form input[type="checkbox"] + label:before,
.t-form input[type="radio"] + span:before,
.t-form input[type="radio"] + label:before {
	content: "";
	position: absolute;
	left: -1.25em;
	top: 2px;
	margin-right: 0.3rem;
	width: 1.2em;
	height: 1.2em;
	background-size: cover;
}
.t-form .form-position-checker input[type="checkbox"] + span:before,
.t-form .form-position-checker input[type="checkbox"] + label:before,
.t-form .form-position-checker input[type="radio"] + span:before,
.t-form .form-position-checker input[type="radio"] + label:before {
	left: -1.75em;
}

.t-form input[type="checkbox"] + span:before,
.t-form input[type="checkbox"] + label:before {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23777; stroke-width: 0px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M8.33,0C3.74,0,0,3.74,0,8.33v33.33c0,4.59,3.74,8.33,8.33,8.33h33.33c4.59,0,8.33-3.74,8.33-8.33V8.33c0-4.59-3.74-8.33-8.33-8.33H8.33ZM8.33,2.38h33.33c3.3,0,5.95,2.65,5.95,5.95v33.33c0,3.3-2.65,5.95-5.95,5.95H8.33c-3.3,0-5.95-2.65-5.95-5.95V8.33c0-3.3,2.65-5.95,5.95-5.95Z'/%3E%3C/svg%3E");
}
.t-form input[type="checkbox"]:checked + span:before,
.t-form input[type="checkbox"]:checked + label:before {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230033ff; stroke-width: 0px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M41.67,0H8.33C3.74,0,0,3.74,0,8.33v33.33c0,4.59,3.74,8.33,8.33,8.33h33.33c4.59,0,8.33-3.74,8.33-8.33V8.33c0-4.59-3.74-8.33-8.33-8.33ZM22.72,36.24l-11.51-10.73,1.62-1.74,9.68,9.03,15.86-18.72,1.81,1.54-17.47,20.62Z'/%3E%3C/svg%3E");
}
.t-form input[type="radio"] + span:before,
.t-form input[type="radio"] + label:before {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cdefs%3E%3Cstyle%3E.cls-1 %7Bfill: %23777777;stroke-width: 0px;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M25,0C11.21,0,0,11.21,0,25s11.21,25,25,25,25-11.21,25-25S38.79,0,25,0ZM25,2.17c12.62,0,22.83,10.21,22.83,22.83s-10.21,22.83-22.83,22.83S2.17,37.62,2.17,25,12.38,2.17,25,2.17Z'/%3E%3C/svg%3E");
}

.t-form input[type="radio"]:checked + span:before,
.t-form input[type="radio"]:checked + label:before {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cdefs%3E%3Cstyle%3E.cls-1 %7Bfill: %230033ff;stroke-width: 0px;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M25,0C11.22,0,0,11.22,0,25s11.22,25,25,25,25-11.21,25-25S38.79,0,25,0ZM36.77,15.83l-12.51,18.44-9.78-9.07c-.44-.41-.47-1.1-.06-1.54.41-.44,1.1-.47,1.54-.06l7.92,7.35,11.09-16.34c.34-.5,1.01-.62,1.51-.29.5.34.63,1.01.29,1.51Z'/%3E%3C/svg%3E");
}