.new-job-form-wrap {
	position: relative;
}

.job-type-wrap label {
	width: 33%;
}

.employer-job-form .job-form,
.employer-job-form .job-form .form-step {
	display: flex;
	flex-direction: column;
}

.employer-job-form .job-form .form-step.step-job-type,
.employer-job-form .job-form .form-step.step-techstack {
	display: none;
	align-items: flex-end;
}

.employer-job-form .job-form input {
	min-width: 0;
}

.employer-job-form .job-form .devbg-input-label {
	font-size: 14px;
}

.employer-job-form .job-form .input-wrap {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
	flex: 1 1 0;
}

.employer-job-form .job-form .inputs-row {
	display: flex;
	gap: 30px;
}


.employer-job-form .job-location-wrap  {
	position: relative;
}

.employer-job-form .job-remote-status {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 35%;
	height: 52px; /* I don't like this but otherwise i'd have to refactor this whole section :< */
	left: 0;
	bottom: 0;
	padding: 5px 17px;
	line-height: 1.2;
}
.employer-job-form .job-location {
	width: calc( 65% + 1px );
	align-self: end;
}

.employer-job-form .job-remote-status div[data-value=office]::before {
	background-image: url( '../../../images/icon-blue-briefcase.svg' );
}

.employer-job-form .job-remote-status div[data-value=remote]::before {
	background-image: url( '../../../images/icon-blue-caravan.svg' );
}

.employer-job-form .job-remote-status div[data-value=hybrid]::before {
	background-image: url( '../../../images/icon-blue-hybrid.svg' );
}

.employer-job-form .job-remote-status {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-right: none;
}

.employer-job-form .job-location {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}


/* ----- a select-like component, which can be styled with images --- */
.so-p-select {
	position: relative;
	display: inline-block;
	cursor: default;
	background-color: var(--color-background-grey);
}

.so-p-select .select-hide {
	display: none;
}

.so-p-select.opened .select-hide {
	display: block;
}

.so-p-select .select-selected {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	/*padding: 0 30px 0 17px;*/
	/*margin-left: -17px;*/
}

.so-p-select .select-items {
	position: absolute;
	z-index: 100;
	top: 100%;
	left: 0;
	right: 0;
	background-color: var(--color-white);
	max-height: 200px;
	overflow-y: auto;
	border: 1px solid lightgray;
}

.so-p-select .select-items>div::before,
.so-p-select .select-selected::before {
	content: '';
	width: 1.2em;
	height: 1.2em;
	margin-right: 0.3em;
	position: relative;
	top: -0.1em;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	flex-shrink: 0;
}

.so-p-select .select-items>div {
	position: relative;
	display: flex;
	align-items: center;
	padding: 0.8em 1em 0.8em 0.8em;
	border-top: 1px solid lightgray;
}

.so-p-select .select-items>div:hover {
	background-color: #f5f5f5;;
	}
/* --- end of select-like component --- */

.employer-job-form .inputs-row.salary-row {
	display: flex;
	align-items: flex-end;
}

.employer-job-form .salary-row .salary-type-wrap {
	flex: 0 0 calc(50% - 15px);
}

.employer-job-form .salary-row .job-min-salary,
.employer-job-form .salary-row .job-max-salary {
	min-width: 0;
	height: 52px;
}

.employer-job-form .salary-row .job-min-salary {
	flex: auto;
}

.employer-job-form .salary-row .fixed-salary-wrap {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	flex: 0 1 100px;
}

.employer-job-form .salary-row .fixed-salary-wrap .form-check-input,
.employer-job-form .salary-row .fixed-salary-wrap .form-check-label {
	flex: 1 1 0;
}

.employer-job-form .job-form .salary-range-sep {
	width: 25px;
	height: 1px;
	background-color: #59595980;
	align-self: center;
	margin-top: 25px;
}

.employer-job-form .job-form .job-form-next {
	align-self: flex-end;
	margin-top: 20px;
}

.employer-job-form .job-form .step-content .premium-editing-publish {
	align-self: flex-end;
	margin-top: 50px;
}

.employer-job-form .dropdown-item.child {
	padding-left: 40px;
}

.employer-job-form .form-new-job .step-job-type .job-type-wrap {
	display: flex;
	gap: 30px;
	align-items: stretch;
}

.employer-job-form .step-job-type .form-check-input {
	position: absolute;
	clip: rect(0,0,0,0);
	pointer-events: none;
}

.employer-job-form .step-job-type .job-type-wrap {
	margin-bottom: 40px;
}

.employer-job-form .step-job-type .job-type > .inner {
	display: flex;
	flex-direction: column;
	padding: 35px 40px;
	outline: 1px solid #D5D5D5;
	border-radius: 5px;
	background-color: #fff;
	transition: all 0.2s ease-in-out;
	cursor: pointer;
	height: 100%
}

.employer-job-form .step-job-type .form-check-input:checked + .job-type > .inner {
	outline: 3px solid var(--color-primary);
	position: relative;
}

.employer-job-form .step-job-type .form-check-input:checked + .job-type > .inner::after {
	content: '';
	background-image: url( '../../../images/check-white.svg' );
	background-repeat: no-repeat;
    background-position: center;
	background-size: 54%;
	width: 48px;
	height: 48px;
	background-color: var(--color-primary);
	border-radius: 50%;
	position: absolute;
    right: -24px;
    bottom: -24px;
}

.employer-job-form .step-job-type .job-type.premium-job > .inner,
.employer-job-form .step-job-type .job-type.premium-always-on-job > .inner {
	background-color: #def;
}

.employer-job-form .step-job-type .job-type.premium-always-on-job .name {
	left: 20px;
}

.employer-job-form .step-job-type .job-type.premium-always-on-job .name::before {
	content: '';
	position: absolute;
	left: -23px;
	top: 7px;
	height: 16px;
	width: 16px;
	border-radius: 8px;
	background-color: var(--color-primary);
}

.employer-job-form .step-job-type .form-check-input:checked + .job-type .name::before {
	background-color: #69f0ae;
}


.employer-job-form .step-job-type .job-type > .inner .name {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0;
}

.employer-job-form .step-job-type .job-type .sep {
	display: block;
	width: 80px;
	height: 1px;
	background-color: var(--color-grey-50);
	margin: 15px 0;
}

.employer-job-form .step-job-type .job-type .features-wrap {
	list-style: none;
	padding-left: 0;
	margin-top: 25px;
	margin-bottom: 0;
}

.employer-job-form .step-job-type .job-type .features-wrap .feature {
	display: flex;
	font-size: 16px;
	font-weight: 300;
	margin-bottom: 10px;
	gap: 10px;
}

.employer-job-form .step-job-type .job-type .features-wrap .feature img {
	margin-right: 15px;
	width: 20px;
	height: 20px;
	opacity: 0.5;
}

.employer-job-form .step-job-type .job-type .item-footer {
	display: flex;
	flex: 1 0 100px;
	align-items: flex-end;
	margin-top: 0;
}

.employer-job-form .step-job-type .job-type .item-footer .price-wrap {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.employer-job-form .step-job-type .job-type.premium-always-on-job .item-footer .price-wrap {
	margin-bottom: -4px;
}

.employer-job-form .step-job-type .job-type .item-footer .price-wrap .title {
	font-size: 16px;
}

.employer-job-form .step-job-type .job-type .item-footer .price-wrap .price {
	font-size: 29px;
	color: #D5D5D5;
	font-weight: 900;
}

.employer-job-form .step-job-type .job-type.premium-always-on-job .item-footer .price-wrap .price-period {
	font-size: 14px;
}

.employer-job-form .step-job-type .job-type.premium-job .item-footer .price-wrap .price,
.employer-job-form .step-job-type .job-type.premium-always-on-job .item-footer .price-wrap .price {
	color: var(--color-primary);
}

.employer-job-form .step-job-type .job-type .item-footer .choose-button {
	pointer-events: none;
}

.employer-job-form .step-job-type .job-type .item-footer .choose-button.selected {
	display: none;
}

.employer-job-form .step-job-type .form-check-input:checked + .job-type .item-footer .choose-button.selected {
	display: block;
}

.employer-job-form .step-job-type .form-check-input:checked + .job-type .item-footer .choose-button:not(.selected) {
	display: none;
}

.employer-job-form h2.job-title {
	margin-top: 0;
	color: #231F20;
	font-size: 20px;
	line-height: 140%;
	letter-spacing: 0;
}

.employer-job-form .so-info-block {
	position: relative;
	top: -10px;
	margin-bottom: 10px;
}

/* Don't show the close button on the confirmation dialog. */
#job-submission-sent .close-button {
	display: none !important;
}


/* Medium & down */
@media screen and (max-width: 1200px) {
	.employer-job-form .job-remote-status {

	}
}