.visaCalculatorPage {
background: linear-gradient(165deg, #E7F4FF 7%, #FFF2DF 74%);
}
.VisaSuccess {
display: flex;
box-shadow: 0 20px 60px 0 #F8F9FF;
column-gap: 20px;
}
.VisaLeft {
background: url(https://metaapply.io/wp-content/plugins/visa-success-calculator/images/linear-blue-bg.webp);
color: var(--bs-shades-bg-white);
display: flex;
flex-direction: column;
padding: 3em 2.5em;
text-align: center;
justify-content: space-between;
width: 35%;
border-radius: 20px;
background-size: cover;
background-repeat: no-repeat;
}
.visaForm {
width: 75%;
background: #fff;
box-shadow: 0 20px 38px 0 hsl(0deg 0% 86% / 50%);
border-radius: 20px;
}
.visaForm form {
padding: 2.5em;
font-family: var(--bs-font-family);
}
.visaCalculatorPage h2.pageheading {
color: var(--bs-secondary-bg-blue-700);
padding-bottom: 26px;
}
.visaCalculatorPage h2.pageheading span {
font-weight: var(--bs-font-Light);
color: var(--bs-secondary-bg-blue-700);
line-height: normal;
}
.visaForm label {
margin-bottom: 6px;
font-size: 16px;
font-weight: var(--bs-font-semibold);
}
.VisaLeft h2 {
font-weight: var(--bs-font-Light);
font-size: 42px;
line-height: 54px;
}
.VisaLeft h2 span {
color: var(--bs-shades-bg-white);
font-weight: var(--bs-font-bold);
}
.visaForm label sup {
color: #DA1414;
font-size: 13px;
}
.personalInfo {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 38px 24px;
}
.visaForm label {
display: block;
}
.visaForm input,.visaForm select {
background: #FFFFFF;
border: 1px solid rgb(133 140 148 / 50%);
border-radius: 8px;
padding: 18px;
width: 100%;
outline-color: rgb(133 140 148 / 60%);
line-height: 22px;
}
.nationality,.ageGroup,.financial {
padding: 38px 0;
}
.visaForm select {
appearance: none;
}
.selectwrap {
position: relative;
}
.selectwrap:before {
content: "\f0dd";
font-family: 'FontAwesome';
color: #858C94;
position: absolute;
top: 30px;
right: 16px;
pointer-events: none;
transform: translateY(-70%);
font-size: 20px;
opacity: 0.8;
}
div#other-country-container {
padding-top: 24px;
}
.formField.mailfield {
grid-column: span 2;
}
.radioButton label {
display: flex;
align-items: center;
white-space: nowrap;
column-gap: 6px;
color: #67728A;
font-weight: var(--bs-font-semibold);
}
.radioButton {
display: flex;
align-items: center;
column-gap: 2em;
padding-top: 18px;
}
button#submitForm {
margin: 0 auto;
display: block;
margin-top: 3em;
}
.disclaimer {
background: #F4FAFF;
border: 1px solid #B4DDFF;
border-radius: 6px;
display: flex;
padding: 10px 12px;
column-gap: 0.8em;
margin-top: 2.5em;
}
.disclaimer p {
margin: 0;
color: #373737;
line-height: normal;
font-size: 12px;
line-height: normal;
text-align: left;
}
.disclaimer i {
color: #0059C8;
padding-top: 4px;
}
.radioButton label {
position: relative;
padding-left: 26px;
}
.radioButton input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.radioButton span.checkmark {
position: absolute;
top: 50%;
left: 0;
height: 16px;
width: 16px;
background-color: #eee;
border-radius: 50%;
transform: translateY(-50%);
}
.radioButton label input:checked ~ .checkmark {
background-color: #0059C8;
box-shadow: 0 0 0 3px #98CBFF;
}
.radioButton label input:checked ~ .checkmark:after {
background: white;
}
.radioButton .checkmark:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: #5A657C;
}
.visaTipsBox h4 {
color: var(--bs-shades-bg-white);
padding-bottom: 0.5em;
}
.visaTipsBox h4 span{
font-weight: var(--bs-font-bold);
}
.visaTipsBox p.small {
color: var(--bs-shades-bg-white);
margin: 0;
text-align: left;
}
.visaTipsBox .points {
display: flex;
align-items: center;
column-gap: 12px;
padding-bottom: 16px;
}
.visaTipsBox .points img {
height: 18px;
width: auto;
} #visa-success-modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.5);
}
#visa-success-modal .modal-content {
max-width: 563px;
width: 100%;
border-radius: 32px;
background: #fff;
text-align: center;
padding: 3em;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#visa-success-modal p.contactMsg {
margin: 0;
line-height: normal;
font-size: 18px;
color: #444444;
margin-bottom: 3em;
}
#visa-success-modal  p.visascoretext {
color: #003537;
font-weight: var(--bs-font-semibold);
margin-bottom: 26px;
}
#visa-success-modal.good .modal-body {
position: relative;
}
#visa-success-modal img{
display: none;
}
#visa-success-modal.good img{
display: block;
position: absolute;
height: 100%;
width: 100%;
}
#visa-success-result strong {
font-size: 50px;
line-height: normal;
padding-top: 0.5em;
display: block;
}
#visa-success-result p {
margin: 0;
}
div#visa-success-modal.good {
color: #0CA222;
}
div#visa-success-modal.average {
color: #F58120;
}
div#visa-success-modal.bad {
color: #E60000;
}
#visa-success-modal button.btn.btn-small {
padding: 10px 32px;
height: auto;
min-width: auto;
z-index: 1;
position: relative;
}
#visa-success-modal h2.responseText {
color: var(--bs-secondary-bg-blue-700);
}
.ModalOpened {
overflow: hidden;
padding-right: 17px;
}
span.error-msg {
color: red;
font-size: 13px;
} @media screen and (max-width: 1200px) and (min-width: 992px){
.VisaLeft {
padding: 2em 1.5em;
}
.visaForm input, .visaForm select {
border-radius: 6px;
padding: 12px 14px;
font-size: 14px;
}
.personalInfo {
grid-gap: 30px 24px;
}
.nationality, .ageGroup, .financial {
padding: 30px 0;
}
.radioButton {
padding-top: 14px;
}
.visaForm label {
font-size: 14px;
}
.visaForm form {
padding: 2em;
}
.selectwrap:before {
top: 24px;
font-size: 16px;
}
}
@media screen and (max-width: 992px) and (min-width: 768px){
.VisaSuccess {
column-gap: 14px;
}
.VisaLeft {
padding: 1.5em 1.5em;
width: 35%;
}
.visaForm {
width: calc(65% - 14px);
}
.VisaLeft img {
width: 80%;
margin: 0 auto;
}
.visaForm form {
padding: 1.5em;
}
.visaForm label {
font-size: 14px;
}
.visaForm input, .visaForm select {
border-radius: 6px;
padding: 12px 14px;
font-size: 14px;
}
.personalInfo {
grid-gap: 24px 16px;
}
.nationality, .ageGroup, .financial {
padding: 24px 0;
}
.radioButton {
column-gap: 1.5em;
padding-top: 12px;
}
.disclaimer {
padding: 0.6em 1em;
column-gap: 0.8em;
margin-top: 2.5em;
}
.VisaLeft {
border-radius: 14px;
}
span.error-msg {
font-size: 12px;
display: block;
padding-top: 2px;
}
.visaTipsBox p.small {
font-size: 13px;
}
.visaTipsBox .points img {
height: 14px;
}
button#submitForm {
height: auto;
padding: 8px 18px;
font-size: 14px;
}
.selectwrap:before {
top: 24px;
font-size: 16px;
}
}
@media screen and (max-width: 768px){
.VisaSuccess {
flex-direction: column;
row-gap: 20px;
}
.VisaLeft, .visaForm {
width: 100%;
}
.VisaLeft {
padding: 1.5em 1.5em;
}
.VisaLeft img {
width: 39%;
margin: 0 auto;
}
.visaForm form {
padding: 1.5em;
}
.visaForm label {
font-size: 14px;
}
.visaForm input, .visaForm select {
border-radius: 6px;
padding: 10px 14px;
font-size: 14px;
}
.personalInfo {
grid-gap: 24px 16px;
}
.nationality, .ageGroup, .financial {
padding: 24px 0;
}
.radioButton {
column-gap: 1.5em;
padding-top: 12px;
}
.disclaimer {
padding: 0.6em 1em;
column-gap: 0.8em;
margin-top: 2.5em;
}
.VisaLeft {
border-radius: 14px;
}
span.error-msg {
font-size: 12px;
display: block;
padding-top: 2px;
}
.visaTipsBox p.small {
font-size: 13px;
}
.visaTipsBox .points img {
height: 14px;
margin: 0;
}
button#submitForm {
height: auto;
padding: 8px 18px;
font-size: 14px;
margin-top: 2em;
}
.selectwrap:before {
top: 22px;
font-size: 16px;
}
.visaTipsBox h4 {
text-align: left;
}
.visaForm{
border-radius: 16px;
}
}
@media screen and (max-width: 576px){
.radioButton {
flex-wrap: wrap;
gap: 0.5em 1.5em;
}
.personalInfo {
grid-template-columns: 1fr !important;
}
.formField.mailfield {
grid-column: auto;
}
.visaCalculatorPage h2.pageheading {
padding-bottom: 14px;
}
.visaForm form {
padding: 1.5em;
}
.visaForm,.VisaLeft {
border-radius: 10px;
}
.VisaLeft {
padding: 1.5em;
row-gap: 1em;
}
.VisaLeft img {
width: 55%;
margin: 0 auto;
}
span.error-msg {
font-size: 10.5px;
}
#visa-success-modal .modal-content {
max-width: 94%;
border-radius: 14px;
padding: 2em  1.2em;
}
#visa-success-modal h2.responseText {
font-size: 24px;
}
#visa-success-result strong {
font-size: 36px;
padding-top: 0.1em;
}
#visa-success-modal p.visascoretext {
margin-bottom: 16px;
}
#visa-success-modal p.contactMsg {
padding: 12px;
font-size: 13px;
padding-top: 0;
}
#visa-success-modal button.btn.btn-small {
padding: 6px 23px;
font-size: 14px;
}
.disclaimer p {
font-size: 10px;
}
.disclaimer {
padding: 0.4em 0.5em;
column-gap: 0.6em;
margin-top: 1.5em;
}
.disclaimer i {
font-size: 12px;
}
}
@media screen and (max-width: 1200px){
.ModalOpened {
padding-right: 0;
}
}
@media screen and (max-width: 1440px) and (min-width: 992px){
#visa-success-modal h2.responseText {
font-size: 36px;
}
#visa-success-result strong {
font-size: 46px;
padding-top: 0.2em;
}
#visa-success-modal p.contactMsg {
font-size: 16px;
}
#visa-success-modal .modal-content {
max-width: 500px;
border-radius: 20px;
padding: 2.5em;
}
}
@media screen and (max-width: 992px) and (min-width: 576px){
#visa-success-modal .modal-content {
max-width: 500px;
border-radius: 16px;
padding: 2em;
}
#visa-success-modal h2.responseText {
font-size: 28px;
}
#visa-success-result strong {
font-size: 38px;
padding-top: 0.1em;
}
#visa-success-modal p.visascoretext {
margin-bottom: 16px;
}
#visa-success-modal p.contactMsg {
padding: 10px;
font-size: 14px;
margin-bottom: 1.8em;
}
#visa-success-modal button.btn.btn-small {
padding: 6px 24px;
font-size: 14px;
}
.disclaimer {
margin-top: 2em;
}
}