﻿.filter-box.is-open {
	display: inline-block !important;
	min-width: 320px !important;
	max-width: 328px !important;
}

.firstOptionFilters {
	max-height: 280px;
	overflow-y: scroll;
	margin-bottom: 15px;
	overflow: auto;
}

.form-content.stepcontent a {
	color: #000;
}

@media only screen and (max-width: 574px) {
	.actions {
		position: fixed;
		bottom: 13% !important;
		right: 30%;
	}
}
@media only screen and (max-width: 768px) {
	.image-holder {
		display: none;
	}

	footer#pfwiz {
		display: none !important;
	}

	.actions {
		position: fixed;
		bottom: 38%;
		right: 30%;
	}

	.wizard {
		margin-top: 200px;
	}

	.wizard > .steps {
		position: absolute;
		top: 5%;
		right: 50% !important;
		transform: translateX(50%);
		z-index: 9;
	}

	.wizard > .steps li a {
		margin-right: 50px !important;
	}

	.wizard > .steps li a::before {
		right: 12px !important;
		width: 50px !important;
	}

	.wizard > .steps li a::after {
		left: -55px !important;
	}
}

#specialities_loader {
	position: absolute;
	background: #fff;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
	color: #000;
	align-items: center;
	justify-content: center;
	z-index: 9;
}

.wrapper {
	/* height: 100vh; */
	background: #fefefe;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wizard > .steps {
	position: absolute;
	top: 5%;
	right: 30%;
	transform: translateX(50%);
	z-index: 9;
}

.wizard > .steps li.first a {
	background: #404040;
}

.wizard > .steps li a {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #cccccc;
	margin-right: 50px;
	position: relative;
}

.wizard > .steps li a:before {
	content: '';
	width: 52px;
	height: 2px;
	background: #cccccc;
	position: absolute;
	right: 10px;
	top: 5px;
}

.wizard > .steps li a:after {
	content: '';
	width: 0;
	height: 2px;
	background: #404040;
	position: absolute;
	left: -55px;
	top: 5px;
	transition: all 0.6s ease;
}

.wizard > .steps li.checked a {
	background: #404040 !important;
}

p {
	font-size: 20px;
	color: #404040;
	text-align: left;
	/* margin: 35px 0 15px; */
	font-weight: 500;
}

.actions p {
	background: #7f7f7f;
	display: inline-block;
	padding: 7px;
	border-radius: 3px;
	margin-bottom: -5px;
	font-size: 15px;
	color: #fff;
	cursor: not-allowed;
}

.pltfrm {
	font-size: 20px;
	text-transform: none;
	font-weight: 500;
	color: #404040;
	/* margin-top: 35px; */
}

.actions li:nth-child(2) a,
.actions li:last-child a {
	margin-left: 20px !important;
	background: #7f7f7f !important;
	color: #fff !important;
	transition: 0.3s;
}

.actions li:nth-child(2) a:hover,
.actions li:last-child a:hover {
	margin-left: 20px !important;
	background: #404040 !important;
	color: #fff !important;
	transition: 0.3s;
}

.filterExpandSub {
	color: #000000;
	font-weight: 700;
	font-size: 16px;
	text-decoration: underline;
	margin-bottom: 10px;
}

.containerbox2 {
	display: block;
	position: relative;
	padding-left: 30px;
	margin-bottom: 15px;
	cursor: pointer;
	font-size: 13px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-weight: 300 !important;
	color: #7f7f7f !important;
}

.containerbox2:hover {
	color: #404040 !important;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-weight: 500 !important;
}

.containerbox2 input:checked ~ .checkmark {
	background-color: #404040;
}

.checkbox-tick input:checked ~ .checkmark {
	background: #404040;
}

.checkbox-tick .checkmark {
	position: absolute;
	top: 3px;
	left: 0;
	height: 15px;
	width: 15px;
	border: 2px solid #404040;
	border-radius: 50%;
	font-family: Material-Design-Iconic-Font;
	color: #ffffff;
	font-size: 11px;
	/* background-color: #000; */
}

.form-control {
	height: 40px;
	border: none;
	border-bottom: 1px solid #cccccc;
	width: 100%;
	color: #404040 !important;
	padding: 10px 20px;
}

.image-holder {
	width: 40%;
	height: 519px;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
	background: #c5c5c5 !important;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border: 1px solid #0a0a09 !important;
	color: #131313 !important;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: 1px solid #000 !important;
}

.form-content.schoollist {
	margin-top: 50px;
}

.form-content.schoollist h4 {
	margin-bottom: 25px;
}

/* checkbox css */

.containerChek,
.containerbox2 {
	display: inline-block;
	position: relative;
	padding-left: 25px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 15px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	line-height: 16px;
	margin-right: 7px;
	min-width: 105px;
}

/* Hide the browser's default checkbox */
.containerChek input,
.containerbox2 input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	width: 20px;
	background-color: #eee;
}

/* On mouse-over, add a grey background color */
.containerChek:hover input ~ .checkmark,
.containerbox2:hover input ~ .checkmark {
	background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.containerChek input:checked ~ .checkmark,
.containerbox2 input:checked ~ .checkmark {
	background-color: grey;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: '';
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.containerChek input:checked ~ .checkmark:after,
.containerbox2 input:checked ~ .checkmark:after {
	display: block;
}

/* Style the checkmark/indicator */
.containerChek .checkmark::after,
.containerbox2 .checkmark::after {
	left: 7px;
	top: 3px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.flexSuccMsg {
	margin: 70px;
}

.flexSuccMsg p {
	font-size: 21px;
	font-weight: bold;
}

.flexSuccMsg ul {
	margin-left: 29px;
}

.flexSuccMsg ul li {
	list-style: disclosure-closed;
	font-size: 18px;
	font-weight: 500;
	color: #000 !important;
}

.flexSuccMsg ul li a {
	color: #000 !important;
	text-decoration: underline;
}
/* wiozard css */

.containerbox2 input:checked ~ .checkmark {
	background-color: #404040;
}

.checkbox-tick input:checked ~ .checkmark {
	background: #404040;
}

.checkbox-tick .checkmark {
	position: absolute;
	top: 3px;
	left: 0;
	height: 15px;
	width: 15px;
	border: 2px solid #404040;
	border-radius: 50%;
	font-family: Material-Design-Iconic-Font;
	color: #ffffff;
	font-size: 11px;
	/* background-color: #000; */
}
