:root {
	--sos-hover-opacity: .8;

    --sos-primary-color: #e83e8c;

    --sos-secondary-color-darker: #005a96;
    --sos-secondary-color-dark: #005a96;

    --sos-secondary-color: #005a96;
    --sos-secondary-color-light: #437eeb;
    --sos-secondary-color-lighter: #437eeb;
    
    --loader-outside-circle: #437eeb;
    --loader-middle-circle: #e83e8c;
    --loader-inside-circle: #293e4c;

    --sos-button-color: #fff;
    --sos-button-padding-vertical: 15px;
    --sos-button-padding-horizontal: 30px;
    --sos-button-border-radius: 8px
}
.sos-obf-btn-holder *,
.obf-search-holder *,
.sos-check-price-form-holder * {
	box-sizing: border-box;
}


/* ------------------------------------------------------------ *\
    OBF btn holder
\* ------------------------------------------------------------ */

.sos-obf-btn-holder--center { text-align: center; }

.sos-obf-btn-holder--right { text-align: right; }

.sos-obf-btn-holder--left { text-align: left; }

/* ------------------------------------------------------------ *\
    OBF btn
\* ------------------------------------------------------------ */

.sos-obf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--sos-button-padding-vertical) var(--sos-button-padding-horizontal);
    background: var(--sos-primary-color);
    border-radius: var(--sos-button-border-radius);
    box-shadow: none;
    color: var(--sos-button-color) !important;
    text-decoration: none;
    cursor: pointer;
    transition: .3s;
}

.sos-obf-btn:hover,
.sos-obf-btn:focus,  
.sos-obf-btn:active {
    background: var(--sos-primary-color) !important; opacity: var(--sos-hover-opacity);
}

.sos-obf-btn--secondary {
    background: var(--sos-secondary-color) !important;
}

.sos-obf-btn--secondary:hover,
.sos-obf-btn--secondary:focus,
.sos-obf-btn--secondary:active {
    background: var(--sos-secondary-color) !important;
}

/* ------------------------------------------------------------ *\
    Check Price Form Holder
\* ------------------------------------------------------------ */

.sos-check-price-form-holder { position: relative; display: block; margin-bottom: 16px; z-index: 5; }

/* ---------- Clicked --------------- */
	/* Moving Lable */
	.sos-check-price-form-holder.clicked .sos-moving-label { top: 0; transform: translateY(0%); font-size: 12px; color: #115AC9; }
	.sos-check-price-form-holder.clicked .sos-field.error ~ .sos-moving-label { color: #D62C20; }

	/* Field */
	.sos-check-price-form-holder.clicked .sos-field,
	.sos-check-price-form-holder.clicked .sos-field:focus { border-color: #115AC9; border-width: 1px; }

	.sos-check-price-form-holder.clicked .sos-field.error { border-width: 1px; border-color: #D62C20; }
	.sos-check-price-form-holder.clicked .sos-field.error:hover { border-color: #D62C20; }



/* ------------------------------------------------------------ *\
    Check Price Form
\* ------------------------------------------------------------ */

form.sos-check-price-form { position: relative; display: flex; justify-content: center; }

form.sos-check-price-form input { height: 60px; border-radius: 8px; outline: 0 !important; transition: all .3s ease-in-out; line-height: 1em; color: #404040; }

	/* --------- Field ----------- */

	form.sos-check-price-form .sos-field { width: 100%; padding: 12px 20px 12px; border: 1px solid #BFCCDA; margin-top: 0; font-size: 16px; }

	form.sos-check-price-form .sos-field:focus { border-color: #115AC9; }

	/* --------- Moving label ----------- */
	
	form.sos-check-price-form .sos-moving-label { position: absolute; top: 50%; transform: translateY(-50%); left: 22px; font-size: 16px; z-index: 32; color: #777777; line-height: 24px; pointer-events: none; transition: .2s; }
	
	/* --------- Error Message ----------- */
	
	form.sos-check-price-form label.sos-error-message { opacity: 0; visibility: hidden; position: absolute; top: -60px; left: 0; padding: 12px 20px; background: rgba(255, 255, 255, .9); border-radius: 4px; box-shadow: 0 0 8px 0 rgba(0, 0, 0, .4); font-size: 12px; line-height: 18px; color: #D62C20; -webkit-transition: opacity .2s ease-in-out, top .3s ease-in-out; transition: opacity .3s ease-in-out; }
	
	form.sos-check-price-form label.sos-error-message:before { content: ""; position: absolute; bottom: 0; left: 50%; width: 0; height: 0; box-sizing: border-box; border: 8px solid #000; box-shadow: -3px 3px 6px -3px rgba(0, 0, 0, .4); border-color: transparent transparent rgba(255, 255, 255, 1) rgba(255, 255, 255, 1); transform: rotate(-45deg) translateX(-50%); }
	
	form.sos-check-price-form label.sos-error-message.visible { opacity: 1; visibility: visible; margin: 0; }
	
	/* --------- Form Control ----------- */
	
	form.sos-check-price-form .sos-form-control { position: relative; display: inline-block; width: 285px; line-height: 18px; }
	form.sos-check-price-form .sos-form-control:hover input[type=text]:not(.error) { border-color: #115AC9; }
	
	/* --------- Form Action ----------- */

	form.sos-check-price-form .sos-form-action { position: relative; display: inline-block; margin: 0 0 0 10px; }

	form.sos-check-price-form .sos-form-action input[type=submit].sos-check-price-submit { width: auto; height: 60px; padding: 17px; border: none; margin: 0; background: var(--sos-primary-color) !important; font-size: 16px; color: var(--sos-button-color) !important; line-height: 1; }
	form.sos-check-price-form .sos-form-action input[type=submit].sos-check-price-submit--secondary { background: var(--sos-secondary-color) !important; }

	form.sos-check-price-form .sos-form-action input[type=submit].sos-check-price-submit:hover { opacity: var(--sos-hover-opacity); }

	form.sos-check-price-form .sos-form-action .load-holder-lds-eclipse { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--sos-primary-color); border-radius: 8px; }

	form.sos-check-price-form .sos-form-action .load-holder-lds-eclipse .load-lds-eclipse { position: absolute; top: 0; left: calc(50% - 15px); top: calc(50% - 15px); width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 3px 0 0 #fff; animation: lds-eclipse 1s linear infinite; -webkit-animation: lds-eclipse 1s linear infinite; }

		/* Active */
		form.sos-check-price-form .sos-form-action--active .load-holder-lds-eclipse { display: block; }


/* ------------------------------------------------------------ *\
    Media Queries
\* ------------------------------------------------------------ */

@media only screen and (max-width:767px) {
    form.sos-check-price-form {
		flex-wrap: wrap;
	}

	form.sos-check-price-form .sos-form-control {
		margin: 10px 0 0 0;
		width: 240px;
	}

	form.sos-check-price-form .sos-field {
		padding: 20px 15px 10px 24px;
	}

	form.sos-check-price-form .sos-form-action {
		position: relative;
		margin: 15px 0 0 0;
		vertical-align: top;
	}

	form.sos-check-price-form .sos-form-action input[type=submit].sos-check-price-submit {
		width: 240px;
		margin: 0;
		padding: 16.5px 10px;
	}
}

@media only screen and (max-width:767px) and (orientation:landscape) {
	form.sos-check-price-form .sos-form-action {
		margin: 10px 0 0 0;
	}
}

/* ------------------------------------------------------------ *\
    Keyframes
\* ------------------------------------------------------------ */

@-moz-keyframes lds-eclipse {
	0% { -webkit-transform: rotate(0); transform: rotate(0); }
	50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
	100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@-webkit-keyframes lds-eclipse {
	0% { -webkit-transform: rotate(0); transform: rotate(0); }
	50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
	100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes lds-eclipse {
	0% { -webkit-transform: rotate(0); transform: rotate(0); }
	50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
	100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}