﻿
.registerbox {
    background-color: rgba(255, 255, 255, 0.5) !important;
    padding: 10px;
    border-radius: 5px;
    width:80%;
    color: #000;
    height: 95%;

    display: flex;
    flex-direction: column;
}


@media screen and (min-width: 1440px) {

    .registerbox {
       /* height: 770px;*/
        margin: auto 0;
    }

    /*.registercontainer {*/
        /*height: 840px;*/
        /*height: 100%;
        
    }*/

    .right_form_section {
       /* height: 820px;*/
        height: 100%;
    }

    .data_table{
        margin-top: 20px;
    }


    .left_form_section {
        /*height: 820px;*/
        height: 100%
    }

}
    @media screen and (max-height: 740px) {
    .registerbox {
        height: 750px;
        margin: auto 0;
    }

    .right_form_section {
      height: 800px;
    }

    .left_form_section {
       height: 800px;
    }

    .registercontainer {
        height: 800px;
    }

    .business_section {
        margin-top: 20px;
    }

    .horizontal_line{
         right: 26px !important;
        }

    .members_horizontal_line{
        right: 18px;
        width: 80px;
    }
}


@media screen and (max-width: 768px){
    .input_control_margin{
        margin-left: 0 !important;
    }

    .registerbox{
        height: 800px
    }

    .left_form_section{
        height: 100%;
    }

    .right_form_section{
       /* height: 550px;*/
        display:none;
    }

    #pnlBusiness {  
        margin-top: 20px;
    }

    .registercontainer{
        height: 100%;
    }

    .controlabel {
        font-size: calc(0.1vw + 0.7rem);
    }

    .business_heading h3, .account_heading h3, .members_heading h3{
        font-size: 1.25rem;
    }

    .account_heading{
        margin-top: 5%;
    }

    #pnlRepresentative .account_heading{
        margin-top: 10px;
    }

    .business_section {
        margin-top: 20px;
    }

    .horizontal_line {
        border-top: 4px solid #2d73a6 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 70px;
        position: absolute;
        right: 31px;
        top: 24px;
    }


    .step6_horizontal_line{
        right: 198px !important;
    }
    /* .controlabel{
       font-size: 0.75rem;
   }
*/
    .step1_input {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .step3_input{
        display: flex;
        flex-direction: column;
        justify-content:center;
        align-items:center;
    }


    .business_profile_heading {
        margin: 3.2% 0;
    }

    .client_manager_code_para{
      /* padding-left: 21% !important;*/
       font-size: calc(1vw + 0.3rem) !important;
    }

    .step3_radiobuttons{
        display: flex;
        flex-direction: row;
        justify-content:center;
        align-items:center;
    }

 /*   .product_type_required_padding{
        padding-left: 21% !important; 
    }
*/
    .pdfcontainer{
        height: 240px;
    }
  
}



@media screen and (min-width: 768px) and (max-width: 1025px) {
    .business_profile_labels .controlabel {
        font-size: 1.1rem;
    }

    .step6_horizontal_line {
        right: 318px !important;
    }

    .members_horizontal_line{
        right: 19px;
    }
}


@media screen and (min-width: 1025px) and (max-width: 1281px){
    .step6_horizontal_line{
        right: 408px;
    }

    .members_horizontal_line{
        right: 31px;
    }
}
/*@media screen and (min-width: 1024px) and (max-width: 1200px) {
    .registerbox{
        height: 800px
    }
}

@media screen and (min-width: 1200px) and (max-width: 1600px) {
   .registerbox{
       height: 900px
   }
}

@media screen and (min-width: 1600px){
    .registerbox{
        height: 800px;
    }
}
*/
.dx-datagrid .dx-row-alt > td, .dx-datagrid .dx-row-alt > tr > td {
    background-color: #DFDFDF !important;
}


@media screen and (min-width: 4096px) {
    #txtPostcode {
        width: 98.8% !important;
        float: right;
        border-radius: 0px 4px 4px 0px !important;
    }
}


@media screen and (min-width: 3840px) and (max-width: 4096px){
    #txtPostcode {
        width: 98.8% !important;
        float: right;
        border-radius: 0px 4px 4px 0px !important;
    }
}

/*@media screen and (max-width: 2160px) and (min-width:29px) {
    #txtPostcode {
        width: 91.5% !important;
        float: right;
        border-radius: 0px 4px 4px 0px !important;
    }
}*/

@media screen and (max-width: 2553px) and (min-width:2160px) {
    #txtPostcode {
        width: 98.5% !important;
        float: right;
        border-radius: 0px 4px 4px 0px !important;
    }
}


@media screen and (max-width: 3840px) and (min-width:2159px) {
    #txtPostcode {
     width: 93% !important;
        float: right;
        border-radius: 0px 4px 4px 0px !important;
    }
}

@media screen and (max-width: 2160px) and (min-width:1921px) {
    #txtPostcode {
        width: 90.5% !important;
        float: right;
        border-radius: 0px 4px 4px 0px !important;
    }
}

@media screen and (max-width: 1679px) and (min-width:1600px) {
    #txtPostcode {
        width: 88% !important;
        float: right;
        border-radius: 0px 4px 4px 0px !important;
    }
}

@media screen and (min-width: 1440px) and (max-width: 1921px){
    #txtPostcode{
         width: 88.4% !important;
    }
}

@media screen and (max-width: 1440px) and (min-width:1401px) {
    #txtPostcode {
        width: 86% !important;
        float: right;
        border-radius: 0px 4px 4px 0px !important;
    }
}



@media screen and (max-width: 1400px) and (min-width:1367px) {
    #txtPostcode {
        width: 86% !important;
        float: right;
        border-radius: 0px 4px 4px 0px !important;
    }
}

@media screen and (max-width: 1366px) {
    #txtPostcode {
        width: 85% !important;
        float: right;
        border-radius: 0px 4px 4px 0px !important;
    }

    h4, .h4 {
        font-size: 1.3rem;
    }

    .planBox {
        height: 600px!important;
    }
}

@media screen and (max-width: 1280px) {
    #txtPostcode {
       width: 85% !important;
        float: right;
        border-radius: 0px 4px 4px 0px !important;
    }

    h4, .h4 {
        font-size: 1.1rem;
    }

    .planBox {
        height: 600px !important;
    }
}

@media screen and (max-width: 1152px) {
    #txtPostcode {
        width: 83% !important;
        float: right;
        border-radius: 0px 4px 4px 0px !important;
    }
    h4, .h4 {
        font-size: 1.1rem;
    }

    .planBox {
        height: 600px !important;
    }
    
}

@media screen and (max-width: 1112px) {
    #txtPostcode {
       width: 82% !important;
        float: right;
        border-radius: 0px 4px 4px 0px !important;
    }
    h4, .h4 {
        font-size: 1.1rem;
    }

    .planBox {
        height: 600px !important;
    }
    
}

@media screen and (max-width: 1080px) {
    #txtPostcode {
        width: 80% !important;
        float: right;
        border-radius: 0px 4px 4px 0px !important;
    }

    h4, .h4 {
        font-size: 1.1rem;
    }

    .planBox {
        height: 600px !important;
    }
}


@media screen and (max-width: 1024px) {
    #txtPostcode {
        width: 77%!important;
        float: right;
        border-radius: 0px 4px 4px 0px !important;
    }

    .logincontainer {
        margin-top: 2%;
    }
}

@media screen and (max-width: 768px) {
    #txtPostcode {
        width: 72% !important;
        float: right;
        border-radius: 0px 4px 4px 0px !important;
    }
}

@media screen and (max-width: 720px) {
    #txtPostcode {
       width: 87% !important;
        float: right;
        border-radius: 0px 4px 4px 0px !important;
    }
}

@media screen and (max-width: 834px) and (min-width: 801px) {
    #txtPostcode {
        width: 74.5% !important;
        float: right;
        border-radius: 0px 4px 4px 0px !important;
    }
}


@media screen and (max-width: 800px) and (min-width: 769px) {
    #txtPostcode {
        width: 73% !important;
        float: right;
        border-radius: 0px 4px 4px 0px !important;
    }
}

/*@media screen and (min-width: 2100px) {
    .registerbox {
        width: 35% !important;
    }
}

@media screen and (max-width: 2099px) and (min-width: 1880px) {
    .registerbox {
        width: 40% !important;
    }
}

@media screen and (max-width: 1879px) and (min-width: 1921px) {
    .registerbox {
        width: 45% !important;
    }
}

@media screen and (max-width: 1920px) and (min-width: 1741px) {
    .registerbox {
        width: 65% !important;
    }
}

@media screen and (max-width: 1740px) and (min-width: 1640px) {
    .registerbox {
        width: 75% !important;
    }
}*/

@media screen and (max-width: 1639px) and (min-width: 1520px) {
  /*  .registerbox {
        width: 75% !important;
    }*/

    img.banner {
        width: 500px;
    }
}

@media screen and (max-width: 1519px) and (min-width: 1367px) {
   /* .registerbox {
        width: 65% !important;
    }
*/
    img.banner {
        width: 500px;
    }
}


@media screen and (max-width: 1366px) and (min-width:1230px) {
   /* .registerbox {
        width: 70%;
    }*/

    img.banner {
        width: 500px;
    }

    
}

@media screen and (max-width: 1366px) and (min-width:1361px) {
    .logincontainer {
        margin-top: 2%;
    }
}


@media screen and (max-width: 1360px) and (min-width:1281px) {

    img.banner {
        width: 500px;
    }

    .logincontainer {
        margin-top: 3%;
    }

    #txtPostcode {
        width: 86% ;
        float: right;
        border-radius: 0px 4px 4px 0px !important;
    }
}


@media screen and (max-width: 1280px) and (min-width:1230px) {
  /*  .registerbox {
        width: 70%;
    }*/

    img.banner {
        width: 500px;
    }

    .logincontainer {
        margin-top: 2%;
    }

    #txtPostcode {
        float: right;
        border-radius: 0px 4px 4px 0px !important;
    }
}


@media screen and (max-width: 1229px) {
 /*   .registerbox {
        width: 85%;
    }
*/
    img.banner {
        width: 450px;
        top: 15px;
        position: relative;
    }
}

@media screen and (max-width: 1024px) {
    img.banner {
        width: 415px;
        top: 40px;
        position: relative;
    }

    img.banner {
        width: 100%;
        top: 0px !important;
    }

    .feature {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    .ctrls {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin-bottom: 50px;
    }
}

@media screen and (max-width: 800px) {
  /*  .registerbox {
        width: 98%;
    }
*/
    .logincontainer {
        margin: 0px !important;
    }

    .container-fluid.h-100 {
        margin-bottom: 80px;
    }

    img.banner {
        width: 100%;
        top: 0px !important;
    }

    .feature {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    .ctrls {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin-bottom: 50px;
    }
}

@media screen and (max-width: 540px) {
    img.banner {
        width: 470px;
        top: 0px;
        position: relative;
    }

    .col-md-7.col-sm-12.col-xs-12.feature {
        margin-top: 5% !important;
    }
}

/*
New changes */


.registercontainer {
    /* margin: 0 auto !important;*/
    font-size: 18px;
}

#pnlBusiness, #pnlTeamMembers, #pnlBusinessInfo {
    position: relative;
}


.signup_logo {
    width: calc(5vw + 5rem) !important;
    position: absolute;
    margin-left: 25px;
    margin-top: 5px;
}


.members_heading {
    width: 15%;
    margin: 1% auto;
}



@media screen and (min-width: 768px) {
    .members_heading {
        width: 20%;
    }
}


@media screen and (min-width: 1024px) {
    .members_heading  {
        width: 15%;
    }
}


@media screen and (min-width: 1200px) {
    .members_heading {
        width: 13%;
    }
}


@media screen and (min-width: 1440px) {
    .members_heading {
        width: 135px;
    }
}

/*.business_section {
    margin: 2.5% 0;
}*/

.business_section, .account_section {
    padding: 1% 5%;
    height: 50%;
}


    .business_section{
        padding-top: 1%;
    }

    .account_heading, .business_heading, members_heading {
        margin: 0 auto;
        width: 120px;
    }

#btnAddNewTeamMember{
    margin-left: 140px;
}


@media screen and (min-width: 768px){

    #btnAddNewTeamMember {
        margin-left: 0;
    }
}

.business_heading {
    width: 126px !important;
}

.business_heading, .account_heading, .members_heading {
    position: relative;
}

.business_heading h3, .account_heading h3, .members_heading h3 {
    font-weight: 600;
    font-size: 1.5rem;
}


.business_profile_heading{
    display: flex;
    flex-direction: column;
    margin: 2.5% 0;

}

.business_profile_heading h3{
    margin: 0 auto;
    font-size: 1.5rem !important;
}

.horizontal_line {
    border-top: 4px solid #2d73a6 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute;
    width: 75px !important;
    right: 18px !important;
    top: 27px !important;
}

.members_horizontal_line { 
    right: 18px;
    top: 27px;
}

/*.horizontal_line {
    
}*/


.business_profile_horizontal_line {
    border-top: 4px solid #2d73a6 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 145px;
    position: relative;
    bottom: 0;
    right: -21px;
}


.members_horizontal_line {
    border-top: 4px solid #2d73a6 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    width: 75px;
    right: 31px;
}

.dx-dropdownlist-popup-wrapper .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item-content {
    font-weight: 600 !important;
}

/*step 3 */
.business_profile_labels {
    padding-left: 45px !important;
}

#step1, #step2, #step3{
    margin: auto 0;
}

/*.dx-item-content{
    color: #fff;
}*/


/*step 5 */

#step5 {
    position: absolute;
    margin: 2% auto;
}
