/*! bulma.io v0.9.1 | MIT License | github.com/jgthms/bulma */

.button, .modal-close {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.modal-close {
	-moz-appearance: none;
	-webkit-appearance: none;
	background-color: rgba(10, 10, 10, .2);
	border: none;
	border-radius: 290486px;
	cursor: pointer;
	pointer-events: auto;
	display: inline-block;
	flex-grow: 0;
	flex-shrink: 0;
	font-size: 0;
	height: 20px;
	max-height: 20px;
	max-width: 20px;
	min-height: 20px;
	min-width: 20px;
	outline: 0;
	position: relative;
	vertical-align: top;
	width: 20px
}

.modal-close::after, .modal-close::before {
	background-color: #fff;
	content: "";
	display: block;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translateX(-50%) translateY(-50%) rotate(45deg);
	transform-origin: center center
}

.modal-close::before {
	height: 2px;
	width: 50%
}

.modal-close::after {
	height: 50%;
	width: 2px
}

.modal-close:focus, .modal-close:hover {
	background-color: rgba(10, 10, 10, .3)
}

.modal-close:active {
	background-color: rgba(10, 10, 10, .4)
}

.is-small.modal-close {
	height: 16px;
	max-height: 16px;
	max-width: 16px;
	min-height: 16px;
	min-width: 16px;
	width: 16px
}

.modal, .modal-background {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0
}

.modal .button, .modal .input {
	-moz-appearance: none;
	-webkit-appearance: none;
	align-items: center;
	border: 1px solid transparent;
	border-radius: 4px;
	box-shadow: none;
	display: inline-flex;
	font-size: 1rem;
	height: 2.5em;
	justify-content: flex-start;
	line-height: 1.5;
	padding-bottom: calc(.5em - 1px);
	padding-left: calc(.75em - 1px);
	padding-right: calc(.75em - 1px);
	padding-top: calc(.5em - 1px);
	position: relative;
	vertical-align: top
}

.modal .button:active, .modal .button:focus, .modal .input:active, .modal .input:focus {
	outline: 0
}

.modal .button[disabled], .modal .input[disabled] {
	cursor: not-allowed
}

.modal button, .modal input {
	margin: 0
}

.modal a {
	color: #3273dc;
	cursor: pointer;
	text-decoration: none
}

.modal a:hover {
	color: #363636
}

.modal img {
	height: auto;
	max-width: 100%
}

.modal input[type=checkbox], .modal input[type=radio] {
	vertical-align: baseline
}

.modal span {
	font-style: inherit;
	font-weight: inherit
}

.modal .button {
	background-color: #fff;
	border-color: #dbdbdb;
	border-width: 1px;
	color: #363636;
	cursor: pointer;
	justify-content: center;
	padding-bottom: calc(.5em - 1px);
	padding-left: 1em;
	padding-right: 1em;
	padding-top: calc(.5em - 1px);
	text-align: center;
	white-space: nowrap
}

.modal .button.is-focused:not(:active), .modal .button:focus:not(:active) {
	box-shadow: 0 0 0 .125em rgba(50, 115, 220, .25)
}

.modal .button[disabled] {
	background-color: #fff;
	border-color: #dbdbdb;
	box-shadow: none;
	opacity: .5
}

.modal .icon {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	height: 1.5rem;
	width: 1.5rem
}

.modal .icon.is-small {
	height: 1rem;
	width: 1rem
}

.modal .image {
	display: block;
	position: relative
}

.image img {
	display: block;
	height: auto;
	width: 100%
}

.modal .input {
	background-color: #fff;
	border-color: #dbdbdb;
	border-radius: 4px;
	color: #363636
}

.modal .input::-moz-placeholder {
	color: rgba(54, 54, 54, .3)
}

.modal .input::-webkit-input-placeholder {
	color: rgba(54, 54, 54, .3)
}

.modal .input:-moz-placeholder {
	color: rgba(54, 54, 54, .3)
}

.modal .input:-ms-input-placeholder {
	color: rgba(54, 54, 54, .3)
}

.modal .input:active, .modal .input:focus, .modal .is-active.input {
	border-color: #3273dc;
	box-shadow: 0 0 0 .125em rgba(50, 115, 220, .25)
}

.modal .input[disabled] {
	background-color: #f5f5f5;
	border-color: #f5f5f5;
	box-shadow: none;
	color: #7a7a7a
}

.modal .input[disabled]::-moz-placeholder {
	color: rgba(122, 122, 122, .3)
}

.modal .input[disabled]::-webkit-input-placeholder {
	color: rgba(122, 122, 122, .3)
}

.modal .input[disabled]:-moz-placeholder {
	color: rgba(122, 122, 122, .3)
}

.modal .input[disabled]:-ms-input-placeholder {
	color: rgba(122, 122, 122, .3)
}

.modal .input {
	box-shadow: inset 0 .0625em .125em rgba(10, 10, 10, .05);
	max-width: 100%;
	width: 100%
}

.modal .input[readonly] {
	box-shadow: none
}

.modal .field:not(:last-child) {
	margin-bottom: .75rem
}

.control {
	box-sizing: border-box;
	clear: both;
	font-size: 1rem;
	position: relative;
	text-align: inherit
}

.control.has-icons-left .input:focus~.icon, .control.has-icons-right .input:focus~.icon {
	color: #4a4a4a
}

.control.has-icons-left .input.is-small~.icon, .control.has-icons-right .input.is-small~.icon {
	font-size: .75rem
}

.control.has-icons-left .input.is-medium~.icon, .control.has-icons-right .input.is-medium~.icon {
	font-size: 1.25rem
}

.control.has-icons-left .icon, .control.has-icons-right .icon {
	color: #dbdbdb;
	height: 2.5em;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 2.5em;
	z-index: 4
}

.control.has-icons-left .input {
	padding-left: 2.5em
}

.control.has-icons-left .icon.is-left {
	left: 0
}

.control.has-icons-right .input {
	padding-right: 2.5em
}

.control.has-icons-right .icon.is-right {
	right: 0
}

@media (max-width: 767px) {
	.control.has-icons-left .icon, .control.has-icons-right .icon {
		height: 3.129vw;
		width: 3.129vw;
		top: 2.347vw;
	}

	.control.has-icons-left .input {
		padding-left: 2.5em;
	}

	.control.has-icons-left .icon.is-left {
		left: 2.608vw;
	}

	.control.has-icons-right .input {
		padding-right: 2.5em;
	}

	.control.has-icons-right .icon.is-right {
		right: 2.608vw;
	}
}

.modal {
	font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
	font-size: 1em;
	font-weight: 400;
	line-height: 1.5
	align-items: center;
	display: none;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	position: fixed;
	z-index: 40
	box-sizing: border-box
}

.modal *, ::after, ::before {
	box-sizing: inherit
}

.modal.is-active {
	display: flex
}

.modal-background {
	background-color: rgba(10, 10, 10, .86);
	z-index: 1;
}

.modal-card, .modal-content {
	margin: 0 20px;
	max-height: calc(100vh - 160px);
	overflow: auto;
	position: relative;
	width: 100%
}

@media screen and (min-width:769px) {
	.modal-card, .modal-content {
		margin: 0 auto;
		max-height: calc(100vh - 40px);
		width: 640px
	}
}

.modal-close {
	background: 0 0;
	height: 40px;
	position: fixed;
	right: 20px;
	top: 20px;
	width: 40px
}

.modal-card {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 40px);
	overflow: hidden;
	-ms-overflow-y: visible
}

.is-hidden {
	display: none!important
}

@media screen and (max-width:767px) {
	.is-hidden-mobile {
		display: none!important
	}
}

@media screen and (min-width:768px), print {
	.is-hidden-tablet {
		display: none!important
	}
	.is-mobile {
		display: none!important
	}
}

@media only screen and (min-width: 768px) {
	.modal-class {
		width: 30%;
		z-index: 1000;
		overflow: visible
	}
}
@media only screen and (max-width: 767px) {
	.modal-class {
		width: 90%;
		z-index: 1000;
		overflow: visible
	}
}

.modal .custom-input, .modal .custom-input:hover, .modal .custom-input:focus, .modal .custom-input:active {
	background: transparent;
	border: 1px solid #ffffff;
	color: white
}
@media only screen and (max-width: 767px) {
	.modal .custom-input, .modal .custom-input:hover, .modal .custom-input:focus, .modal .custom-input:active {
		font-size: 3.129vw;
	}
}
@media only screen and (min-width: 768px) {
	.modal .custom-input:-webkit-autofill,
	.modal .custom-input:-webkit-autofill:hover, 
	.modal .custom-input:-webkit-autofill:focus, 
	.modal .custom-input:-webkit-autofill:active  {
		-webkit-text-fill-color: #ffffff;
		-webkit-box-shadow: 0 0 0 30px #1e97f3 inset !important;
	}
}
.control.has-icons-left
.input:focus ~ .icon,
.control.has-icons-left
.select:focus ~ .icon,
.control.has-icons-right
.input:focus ~ .icon,
.control.has-icons-right
.select:focus ~ .icon {
	color: #ffffff;
}

.color-white, .color-white:hover, .color-white:focus, .color-white:active {
	color: #ffffff;
}

input.error {
	border: 1px solid #f14668;
}

label.error {
	color: #f14668;
	font-size: 0.75rem;
	font-weight: bold;
}
@media screen and (max-width:767px) {
	label.error {
		font-size: 2.608vw;
	}
}


span.error {
	color: #f14668;
}

.popup-modal-card {
	background-size: cover;
	background-position: center;
}

::-webkit-input-placeholder { /* Edge */
	color: white !important;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: white !important;;
}

::placeholder {
	color: white !important;;
}

input, select, textarea {
	color: white;
}

textarea:focus, input:focus {
	color: white;
}

#popup-modal {
	color: #ffffff;
	z-index: 10000;
}

.popup-modal-card {
	border-radius: 10px;
	background-image: url('../../images/jobseeker/common/pop-up/desktop.png');
}
.pop-up-modal-content {
	overflow-x: hidden;
	overflow-y: auto;
	height: 100%;
	text-align: center;
}
@media (max-width: 767px) {
	.popup-modal-card {
		background-image: url('../../images/jobseeker/common/pop-up/mobile.png');
		max-width: 100%;
		height: auto;
	}
	.pop-up-modal-content {
		margin: 5.215vw auto;
		padding: 5.215vw 0;
		width: 90%;
	}
}

@media (min-width: 768px) {
	.popup-modal-card {
		width: 650px;
	}

	.pop-up-modal-content {
		margin: 1.5rem 0;
		padding: 1.5rem 0;
	}
}

#modal-close {
	position: absolute;
	top: 0;
	right: 0;
	font-weight: bold;
	text-align: right;
	padding-top: 0.5rem;
	padding-right: 1.5rem;
}
#modal-close > .icon {
	color: #ffffff;
	font-size: 1.25rem;
}
@media (max-width: 767px) {
	#modal-close {
		padding-top: 2.608vw;
		padding-right: 2.608vw;
	}
	#modal-close > .icon {
		color: #ffffff;
		font-size: 5.215vw;
		width: 5.215vw;
		height: 5.215vw;
	}
}

.pop-up-modal-content .image {
	margin: 0 auto;
	width: 80px;
}
@media (max-width: 767px) {
	.pop-up-modal-content .image {
		width: 13.038vw;
	}
}

.pop-up-modal-content .text {
	font-size: 1rem;
	margin-bottom: 0.5rem;
}
.pop-up-modal-content .popup-title {
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 0.5rem;
}
@media (max-width: 767px) {
	.pop-up-modal-content .text {
		font-size: 3.651vw;
		margin: 0 auto 1.304vw;
	}
	.pop-up-modal-content .popup-title {
		font-size: 5.476vw;
		margin-bottom: 0.652vw;
	}
}
.pop-up-modal-content .input-column {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 90%;
	flex: none;
	margin: 0.5rem auto 0;
}
.pop-up-modal-content .input-column > .input-item {
	flex: none;
	display: block;
	width: 42%;
	padding: 0.75rem;
}
.pop-up-modal-content .input-comment {
	color: #ffffff;
	font-size: 13px;
	font-style: italic;
	width: auto;
	height: 2.5em;
	pointer-events: none;
	position: absolute;
	top: 3px;
	right: 20px;
	align-items: center;
	display: inline-flex;
	justify-content: center;
	z-index: 4
}
.pop-up-modal-content .success-card .success-text {
	font-size: 2.5rem;
	font-weight: bold;
	margin: 1.75rem 0 0;

}
@media (max-width: 767px) {
	.pop-up-modal-content .input-column {
		width: 100%;
		margin: 0.652vw auto 0;
		flex-direction: column;
	}
	.pop-up-modal-content .input-column > .input-item {
		width: 100%;
		padding: 1.956vw 0;
	}
	.pop-up-modal-content .input-comment {
		font-size: 2.608vw;
		top: 0;
		bottom: 0;
		right: 5.212vw;
		margin: auto 0;
	}
	.pop-up-modal-content .svg-inline--fa {
		width: 3.129vw;
		font-size: 3.129vw;
	}
	.pop-up-modal-content .success-card {
		margin-top: 8.475vw;

	}
	.pop-up-modal-content .success-card .image {
		width: 20.86vw;
		height: 20.86vw;

	}
	.pop-up-modal-content .success-card .success-text {
		font-size: 11.734vw;
		margin-top: 5.215vw;

	}
}
.pop-up-modal-content .btn-area {
	width: 100%;
	margin-top: 0.5rem;
}
.pop-up-modal-content .submit-btn {
	color: #ffffff;
	background-color: #f67907;
	border-color: #f67907;
	font-weight: bold;
	width: 25%;
	margin: 0 auto;
}
.pop-up-modal-content .close-btn {
	color: #ffffff;
	background-color: #f67907;
	border-color: #f67907;
	font-weight: bold;
	width: 25%;
	margin: 0 auto;
}
@media (max-width: 767px) {
	.pop-up-modal-content .btn-area {
		margin-top: 1.304vw;
	}
	.pop-up-modal-content .submit-btn {
		width: 100%;
		font-size: 3.124vw;
	}
	.pop-up-modal-content .close-btn {
		font-size: 3.124vw;
		width: 100%;
	}
}