.text-comparison-main {clear: both; width: 100%; padding: 30px 0;}
.text-comparison-main .comparison-form {clear: both; width: 100%; margin: 0 0 20px 0;}
.form-field {position: relative; margin: 0 0 23px 0;}
.form-wrap {justify-content: space-between;}
.swap {margin: auto; opacity: 0.3; width: 52px; cursor: pointer; height: 18px; text-align: center;}
.swap img{max-width: 32px; margin: auto;}
.text-comparison-main .comparison-wrapper .form-wrap-main {display: flex;}
.text-comparison-main .comparison-wrapper .form-wrap-main .form-lt  {width: 213px;}
.text-comparison-main .comparison-wrapper .form-wrap-main .form-rt {width: calc(100% - 213px); margin-left: auto; position: relative;}

.text-comparison-main .comparison-wrapper .radio .chooseItem-wrap { margin: 0 0 18px 0; position: relative;}
.text-comparison-main .comparison-wrapper .radio .chooseItem-wrap .choose-left {max-width: 250px; width: 100%;}
.text-comparison-main .comparison-wrapper .radio .chooseItem-wrap label { cursor: pointer; padding:0 0 0 34px; font-size: 18px; color: rgba(0, 0, 0, 0.5); letter-spacing: -0.25px; display: block; font-weight: 300}
.text-comparison-main .comparison-wrapper .radio .chooseItem-wrap.active label {color: #00c2b2;}
.text-comparison-main .comparison-wrapper .radio .choose-item { position:absolute; width:25px; height:25px; top: 1px;}
.text-comparison-main .comparison-wrapper .radio .choose-item input { opacity: 0;  position: absolute;  width: 100%;  height: 100%; z-index: 1;  cursor: pointer; left:0; top:0; }
.text-comparison-main .comparison-wrapper .radio .active .choose-item input ~ span:after { opacity:1; }
.text-comparison-main .comparison-wrapper .radio .active .choose-item input ~ span { border-color:#4bb3a8; }

.text-comparison-main .comparison-wrapper .radio .choose-item span { width:100%; height:100%; border:2px solid rgba(96, 96, 96, 0.5); display:flex; border-radius:50%; }
.text-comparison-main .comparison-wrapper .radio .choose-item span:after {content:""; position:absolute; background:#4bb3a8; left:6px; top:6px; transition:0.5s ease; opacity:0; border-radius: 50%; width: 13px; height: 13px;}

.text-comparison-main .comparison-wrapper .choose-right {background: #f2f2f2; padding: 30px 42px; border-radius: 11px; margin-top: -19px;display: none;}
.text-comparison-main .comparison-wrapper .choose-right::before {content: " "; display:block; position: absolute; left: -14px; border-top: 10px solid transparent;	border-bottom: 10px solid transparent;	border-right:15px solid #f2f2f2; }
.text-comparison-main .comparison-wrapper .choose-right[data-type='syntatic']::before {top: 3px;}
.text-comparison-main .comparison-wrapper .choose-right[data-type='semantic']::before {top: 46px;}
.text-comparison-main .comparison-wrapper .choose-right[data-type='crosslanguage']::before {top: 89px;}
.text-comparison-main .comparison-wrapper .choose-right .title {color: #00c2b2; display: block;}
.text-comparison-main .comparison-wrapper .choose-right.active {display: block;}

.text-comparison-main .comparison-wrapper .form-wrap .form-left {width: 82%; margin:0 14px 0 0; align-items: center; font-size: 16px; color: #5f6368; -webkit-font-smoothing: auto;}
.text-comparison-main .comparison-wrapper .form-wrap .form-left .form-item {width: calc(50% - 26px); position: relative;}
.text-comparison-main .comparison-wrapper .form-wrap .form-right {width: 15%;}
.text-comparison-main .comparison-wrapper textarea {width: 100%; padding:12px 26px 20px; font-size:17px; line-height:26px; color:#000; display: block; background:#fff; position: relative; z-index: 2; min-height: 351px; resize: none; border: solid 1px #979797; font-family: "Raleway", sans-serif;   letter-spacing: 0.04px; transition: all 0.5s ease;}
.text-comparison-main .comparison-wrapper textarea:hover{border-color: #5f0073;}
.error {right: 0; width: 100%; display: none; font-size:12px; color: #f00; text-align: right; line-height: normal; font-weight: normal; bottom: -16px; position: absolute;}
.mandatory1 .error {display: block;}
.mandatory2 .error {display: block;}

.compare-button{gap: 8px; align-items: center; display: flex; flex-wrap: wrap;}
#result_container{padding-top: 50px;}
#result_container h3 {letter-spacing: 0.3px; font-size: 20px; font-family: "FuturaBT-Medium"; text-transform: uppercase; color: #5f0073;}
#result_container #result {display: block; font-size: 24px; letter-spacing: 0.06px; color: #000; margin: 17px 0; text-transform: capitalize; font-weight: 600;}
.ralative{position: relative;}
.loader-wrap {position: relative;}
.loader-compare span {background: url("../images/loading.gif") 0 0 no-repeat; display: block; width: 24px; height: 24px; margin-left: 10px; opacity: 0;}
.loader-wrap.active .loader-compare span {opacity: 1;}
.loader-wrap.active #loader span {width: 100%; height: 100%; position: absolute; background: #fff; top: 0; left: 0;}



body.page-template-sign-up .main-header{box-shadow: 0 0 1px #9c9c9c;}
.signup-section{background-color: #fff;}
.step-head{padding-bottom: 9px;}
.step-head h2{margin-bottom: 22px;}

.signup-form label{padding-bottom: 4px; color: #000; font-family: "FuturaBT-Medium", sans-serif; display: block;}
.signup-form label.error{ font-family: inherit; font-size: 10px; color: #f00; letter-spacing: 0.5px; bottom: -20px; left: 0;}
.signup-form input, .signup-form textarea{ padding: 17px 19px 18px; height: 54px; font-size: 16px; border-radius: 4px; border: 1px solid #c2c2c2; transition: all 0.5s ease; display: block; text-align: left; position: static; }
.signup-form input.error{border-color: #f00;}
.signup-form input:not([type="checkbox"]):focus, .signup-form textarea:focus{border-color: #5f0073; box-shadow: 0 0 10px #d4d4d4;}
.signup-form textarea{font-size: 14px; line-height: 24px; height: 260px; resize: block;}
.chooseItem-wrap { margin-bottom: 23px; position: relative;}	
.choose-item input[type="checkbox"]{width: 24px; height: 24px; padding: 0; cursor: pointer;top: 0; left: 0; position: absolute; }
.choose-item input[type="checkbox"]:checked::before { background-color: #5f0073; background-size: 14px; border-radius: 4px; box-shadow: none; color: #fff; content: ""; font-size: 1.5rem; position: absolute; top: 0; display: block; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6667 1.5L4.25001 7.91667L1.33334 5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center; transition: all 0.5s ease; }
.signup-form .chooseItem-wrap label{padding: 0 0 0 34px;}
.signup-form .chooseItem-wrap label.error{bottom: -16px; text-align: left;}
.signup-form .frm-submit{margin-bottom: 24px;}
.signup-form p strong{ padding: 0; border-radius: 0; background: none; margin: 0; }
.signup-form #email label{font-size: 18px; color: #888888;}
.signup-form #email .form-item:first-child label{color: #000;}
form#signupForm{flex-direction: column-reverse; display: flex; flex-wrap: wrap;}
.error-message { color: #f00; font-size: 16px; }

#api-key .form-wrap{padding: 30px; flex-direction: row; background-color: #f1f1f1; border-radius: 4px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; margin-bottom: 30px;}
#api-key .form-wrap .form-item:first-child{flex: 1;}
#api-key .form-wrap .form-item{flex: 0 0 25px;}
#api-key .form-wrap .form-item textarea{height: auto; resize: none; max-width: 100%; overflow: hidden; padding: 13px 19px 10px;}
#api-key .form-wrap .form-item textarea::selection{background-color: yellow; color: #000;}
.copy{cursor: pointer;}
.copy:hover{opacity: 0.8;}


/*-- media css starts here --*/
@media only screen and (min-width: 1024px){
	.form-wrap{margin-top: 30px;}
	.form-item:not(.flex){flex: 0 0 calc(50% - 116px);}
	.form-item.flex{gap: 16px; flex: 1; align-items: center;}
	.form-textarea{flex: 1; position: relative;}
	.comparison-form-buttons{gap: 16px; flex: 0 0 164px; flex-direction: column;}
	.signup-wrapper{padding: 176px 0 86px;}
	.signup-form input, .signup-form textarea{max-width: 75%;}
	.signup-form label.error{ max-width: 75%; }
	#email .form-wrap{justify-content: flex-start;}
	#email .form-item:first-child{flex: 0 0 112px;}
	#email .form-item{flex: 1;}
	.signup-form #email{max-width: 75%;}
}
@media only screen and (max-width: 1023px) and (min-width: 200px){
	.text-comparison-main{padding: 30px 0 40px;}
	.form-wrap{flex-direction: column;}
	.swap {margin: 25px auto; transform: rotate(-90deg);}
	.form-item{gap: 20px; flex: 0 0 100%; flex-direction: column;}
	.comparison-form-buttons{gap: 16px;}
	.compare-button{padding-top: 16px;}
	.signup-wrapper{padding: 90px 0 60px;}
	.signup-form label{font-size: 14px; padding-bottom: 2px;}
	.signup-form input:not(textarea){height: 50px;}

}
@media only screen and (max-width: 767px) and (min-width: 200px){
	.text-comparison-main{padding: 30px 0 20px;}
	.signup-wrapper{padding: 90px 0 30px;}
	#api-key .form-wrap{padding: 10px; gap: 10px;}
}