input:focus, .form-select:focus{
    box-shadow: unset!important;
    border-color: #2DCCD3!important;
    color: #48606A!important;
}

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

/* typeahead */
.tt-query {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999
}

.tt-menu {
    width: 235px;
    margin-top: 4px;
    padding: 4px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    line-height: 24px;
}

.tt-suggestion.tt-cursor,.tt-suggestion:hover {
    color: #fff;
    background-color: #0097cf;

}

.tt-suggestion p {
    margin: 0;
}

.signupBody{
    background: linear-gradient(180deg, #CBE8F1 0%, #F4F7F6 36%);
    padding-top: 75px;
    padding-bottom: 53px;
}

.signupBody h1{
    color: #1381AF;
    text-align: center;
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: 69px; /* 115% */
}

.hr-line{
    width: 1px;
    height: 119px;
    display: block;
    position: relative;
    border: 1px solid #0076A8;
    margin: 18px auto;
    background-color: #0076A8;
}

#empSignUpForm{
    margin-top: 50px;
}

.steps.clearfix::before{
    content: '';
    position: absolute;
    width: calc(100% - 60%);
    height: 1px;
    display: block;
    left: 0;
    right: 0;
    top: -1px;
    bottom: 50px;
    background: #E3E3E3;
    margin: auto;
}

/* Step 1 css */
.priceMainBox{
    padding: 30px;
    border-radius: 20px;
    background: #EFF9FC;
}

#empSignUpForm h4{
    color: #212439;
    text-align: center;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 44.5px; /* 202.273% */
}

.btnWrap{
    margin-top: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-next{
    border-radius: 5px;
    background: #0076A8;
    box-shadow: 0px 10px 20px 0px rgba(0, 204, 150, 0.20);
    padding: 9px 25px;
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 133.333% */
}

.btn-next:hover{
    color: #FFF;
    background: #0076A8;
}

.btn-next span{
    color: #2DCCD3;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
    text-transform: uppercase;
    display: flex;
}

.btn-prev{
    border-radius: 5px;
    background: #E7E7E7;
    padding: 9px 25px;
    color: #A39D9D;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 133.333% */
}

.btn-prev:hover{
    color: #A39D9D;
    background: #E7E7E7;
}

.btn-prev span{
    color: #B6B6B6;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
    text-transform: uppercase;
    display: flex;
}

.btn-radio-wrap{
    max-width: 285px;
    width: 100%;
    margin: auto;
    border-radius: 52px;
    background: #DBE7EA;
    display: flex;
    padding: 8px;
    align-items: center;
    justify-content: space-between;
}

.btn-radio-wrap input[type="radio"], .pboxes input[type="radio"]{
    opacity: 0.011;
    z-index: 100;
    height: 0px;
    visibility: hidden;
    top: -20px;
    left: -20px;
    position: absolute;
}

.btn-radio-wrap input[type="radio"]:checked + label {
    color: #212439;
    border-radius: 52px;
    background: #FFF;
}
.btn-radio-wrap label {
    cursor: pointer;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    font-style: normal;
    font-weight: 600;
    line-height: 41px;
    color: #7B7878;
}

.btn-radio-wrap label span{
    color: #FFF;
    text-align: center;
    font-size: 19px;
    font-style: normal;
    font-weight: 600;
    line-height: 41px;
    border-radius: 22px;
    background: #BBB;
    max-width: 38px;
    width: 100%;
    height: 23px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
}

.btn-radio-wrap label.yearly{
    width: 150px;
}

.btn-radio-wrap label.monthly{
    width: 119px;
}

.pboxes > .d-flex > .pbox{
    width: 30%;
}

.pboxes input[type="radio"]:checked + label {
    border-radius: 10px;
    border: 2px solid var(--silvergray, #D2D2D2);
    background: #FFF;
    box-shadow: 0px 15px 13px 0px rgba(0, 0, 0, 0.05);
}
.pboxes label {
    border-radius: 10px;
    border: 2px solid rgba(191, 155, 48, 0.50);
    box-shadow: 0px 15px 13px 0px rgba(0, 0, 0, 0.05);
    width: 100%;
    height: 100%;
    padding: 50px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

.pboxes label h3{
    color: #212439;
    font-family: 'Inter', sans-serif;;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 27px;
    margin-bottom: 46px;
}

.pboxes label h2{
    color: #0076A8;
    font-family: 'Inter', sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 27px;
}

.pboxes label h2 span{
    color: #8E8E8E;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 27px;
    margin-left: 4px;
}

.pboxes label p{
    color: #2DCCD3;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 27px;
}

.pboxes label p.no-fee {
    text-decoration: line-through;
}

.pboxes label p del {
    color: #d97c8e;
}

.pboxes label > span{
    color: #8E8E8E;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 27px;
}

.pboxes label .pCheck{
    position: absolute;
    top: 30px;
    right: 30px;
    display: none;
}

.pboxes input[type="radio"]:checked + label .pCheck{
    display: block;
}

.yearlyDisTag{
    color: #C1C1C1;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 30.5px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}


/* Second Step css */
.infoBox{
    padding: 30px;
    border-bottom: 1px solid #EEE;
}

.infoBox label{
    color: #8d8d8d;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 24.5px;
}

.infoBox label.error {
    font-weight: 400;
    font-size: .75em;
    margin-top: 4px;
    color: #a91f21;
}

.infoBox input, .infoBox select{
    border-radius: 10px;
    border: 1px solid #dfdfdf;
    padding: 11.8px 20px;
    color: #48606A;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 24.5px;
}


/* Third Step css */
.summaryBox{
    border-radius: 10px;
    background: #173B47;
    padding: 30px;
}

.summaryBox > .d-flex > .first{
    max-width: 192px;
    width: 100%;
    border-right: 1px solid #2C6578;
}

.summaryBox > .d-flex > .last{
    max-width: 648px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid #2C6578;
    padding: 0px 16px;
}

.summaryBox > .d-flex > .first h6{
    color: #B4CBCC;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 27px;
}

.summaryBox > .d-flex > .first h5{
    color: #FFF;
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 27px;
    margin-bottom: 14px;
}

.summaryBox > .d-flex > .first a{
    color: #2DCCD3;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 27px;
    text-decoration-line: underline;
}

.summaryBox > .d-flex > .last .first{
    max-width: 383px;
    width: 100%;
    border-right: 1px solid #2C6578;
    padding: 14px 30px 14px 0px;
}

.summaryBox > .d-flex > .last .last{
    max-width: 224px;
    width: 100%;
}

.summaryBox > .d-flex > .last h6{
    color: #FFF;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 27px;
}

.summaryBox > .d-flex > .last h5{
    font-family: 'Inter', sans-serif;
    color: #2DCCD3;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 27px;
}

.summaryBox > .d-flex > .last span{
    color: #739394;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 27px;
    margin-left: 3px;
}

.summaryBox > .d-flex > .last .add{
    color: #FFF;
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 27px; 
}

.form-check-label{
    color: #48606A;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.submit{
    border-radius: 5px;
    background: #0076A8;
    border-color: #0076A8;
    box-shadow: 0px 10px 20px 0px rgba(0, 204, 150, 0.20);
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    padding: 12px 24px;
    border: 1px solid;
}

#pmBox-error, #pyBox-error{
    position: absolute;
    border: 0;
    box-shadow: unset;
    top: 177px;
    width: 100%;
    height: unset;
    color: red;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}

#pmBox-error{top: 139px;}

.wizard > .steps .error a .step, .wizard > .steps .error a:hover .step, .wizard > .steps .error a:active .step {
    border: none;
}

label#package_plan-error,
.signup-error {
    border: 2px solid #d39a9a;
    text-align: center;
    margin: 30px 0 0 0;
    padding: 20px;
    color: #a91f21;
    background: #f2d2d2;
    border-radius: 10px;
    box-shadow: 0px 15px 13px 0px rgba(0, 0, 0, 0.05);
    display: block;
}
.signup-error {
    margin: 0 0 30px 0;
    border: none;
    font-size: .75em;
}
.signup-error p {
    padding: 4px 0;
    text-align: left;
}
label#tos-error {
    display: block;
    font-size: .75em;
    color: #a91f21;
}

/* MEDIA QUERY */
@media only screen and (min-width: 992px) and (max-width: 1199px){

    .summaryBox > .d-flex > .first{max-width: 23%;}
    .summaryBox > .d-flex > .last{max-width: 75%;}
    .summaryBox > .d-flex > .last .first{max-width: 70%;}
    .summaryBox > .d-flex > .last .last{max-width: 30%;}
    .summaryBox > .d-flex > .first h5{margin-bottom: 4px;}
}


@media only screen and (min-width: 768px) and (max-width: 991px)  {
    .signupBody h1{font-size: 50px;}
    .wizard > .steps a, .wizard > .steps a:active{font-size: 16px;}
    .wizard > .steps > ul > li{width: 28%;}
    .steps.clearfix::before{width: calc(100% - 43.1%);}
    .pboxes > .d-flex{justify-content: center!important;gap: 30px;}
    .pboxes > .d-flex > .pbox{width: 47%;}
    .btnWrap a{width: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;}

    /* second step css */
    .infoBox{padding: 0 0 30px 0;}
    .scndStpBtnWrap a{align-items: start;width: 48.5%;}

    /* third step css */
    .summaryBox > .d-flex > .first{max-width: 23%;}
    .summaryBox > .d-flex > .last{max-width: 75%;padding: 0px 0px 0 16px;}
    .summaryBox > .d-flex > .last .first{max-width: 72%;}
    .summaryBox > .d-flex > .last .last{max-width: 28%;}
    .summaryBox > .d-flex > .last h5, .summaryBox > .d-flex > .first h5{font-size: 22px;}
    .summaryBox > .d-flex > .first h5{margin-bottom: 4px;}
}


@media only screen and (max-width: 767px){
    .signupBody h1{font-size: 36px;line-height: 43px;max-width: 265px;margin: auto;}
    .hr-line{height: 80px;}
    .wizard > .steps a, .wizard > .steps a:active{font-size: 13px;line-height: 27px;padding: 1em 0em;}
    .wizard > .steps > ul > li{width: 33%;}
    .steps.clearfix::before{width: calc(100% - 32.1%);bottom: 42px;}
    .px-0-mob{padding: 0;}
    .wizard > .content{border-radius: 0;padding: 20px;}
    .pboxes > .d-flex > .pbox{width: 100%;margin-bottom: 30px;}
    .btnWrap a{width: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;}

    /* second step css */
    .infoBox{padding: 0 0 30px 0;}
    .mb-mob-3{margin-bottom: 1rem;}
    .btnWrap{flex-wrap: wrap;}
    .btnWrap > a:first-child{margin-bottom: 20px;}

    /* Third step css */
    .summaryBox{padding: 20px;}
    .summaryBox > .d-flex > .first{max-width: 100%;border-right: 0;}
    .summaryBox > .d-flex > .first .flex-column{flex-direction: unset!important;justify-content: space-between;align-items: center;}
    .summaryBox > .d-flex > .first h6{font-size: 13px;}
    .summaryBox > .d-flex > .first h5{font-size: 22px;}
    .summaryBox > .d-flex > .last{padding: 0;}
    .summaryBox > .d-flex > .last .first{padding: 10px 20px 10px 20px;border-bottom: 1px solid #2C6578;max-width: 100%;border-right: 0;}
    .summaryBox > .d-flex > .last h5{display: flex;flex-direction: column;align-items: center;}
    .summaryBox > .d-flex > .last .last{max-width: 100%;padding-bottom: 14px; padding-top: 10px;}
    .submit{width: 100%;padding: 20px;}
}