.loginTemplateWidth {
    width: 100%;
}

.logo-link {
    background-size: 100% auto;
    height: 66px;
    width: 308px;
    float: left;
}

#access-loginheader span {
    display: block;
    box-sizing: border-box;
    background-position-x: 10px;
    padding-bottom: 0;
}

.access-loginform-quicklinks > div {
    margin-left: auto!important;
    margin-right: auto!important;
}

.access-loginform-quicklinks>div a {
    text-align: center;
    padding: 0;
    display: block;
    font-size: 1.1em;
}

.regColLabel>div>label, .regColLabel>div>span {
    display: inline-block;
    min-width: 180px;
}


.regColLabel>div>label {
    vertical-align: top;
    margin-top: 4px;
    background: transparent;
}

.regColLabel>div>span select {
    width: 260px;
    padding: 10px;
    box-sizing: border-box;
    margin: 0 5px;
}

.regColLabel>div>span input {
    width: 278px;
    padding: 6px!important;
    box-sizing: border-box;
}

#registration-wrapper #idDivInit {
    width: 100%!important;
}

#registration-wrapper {
    height: auto !important;
    margin: auto;
    margin-top: 15px;
}

.regSteps {
    height: auto;
}

.footer-btns-section {
    text-align: right;
    margin-top: 20px;
}

.footer-btns-section button:first-child {
    float: right;
    margin-left: 15px;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.float-none {
    float: none;
}

.btn-disabled {
    pointer-events: none;
    opacity: .3;
}

.whitebtn {
    background: linear-gradient(#FFFFFF, #F3F3F3);
    border: 1px solid #BCBCBC;
    color: #123353;
    font-size: 1em!important;
    font-weight: 700;
}

@media only screen and (min-width: 769px) {
    /* styles for desktops layouts */ 
    .menu-gradient3, .access-container {
        width:1024px;
        border: none;
    }

    .logo-link-registration {
        padding-left: 10px;
    }

    #registrationLogo {
        float: left;
        width: 250px;
        height: 66px;
    }

    #idLoginIdForm {
        padding: 0 12px;
    }

    #login_panel_id {
        padding: 0 20px;
        box-sizing: border-box;
    }

    #access-mobile-app>table>tbody>tr>td {
        width: 50%;
    }

    #access-mobile-app>table>tbody>tr>td:last-child {
        text-align: center;
    }

    .access-footnote {
        width: 1024px;
        margin: auto;
    }

    html>body #registration-wrapper {
        min-height: 80vh!important;
    }
	
    .preSteps,.regSteps  {
        min-height: 400px;
        height: auto;
    }

    .regColLabel .regDate {
        padding: 0!important;
        min-width: 10px;
    }

    .regColLabel .regDate:first-child {
        width: 140px;
    }

    .regColLabel .regDate .ui-selectonemenu {
        width: 100%!important;
    }

    .regColLabel .regDate input {
        width: 100%!important;
    }

    .regColLabel .regDate:nth-child(2) {
        width: 42px;
        padding: 0 15px !important;
    }

    .regColLabel .regDate:last-child {
        width: 65px;
        /* padding: 0 5px !important; */
    }

    #registration-wrapper .tacFields {
        padding: 0;
        padding-top: 0!important;
        display: inline-block;
        width: 170px;
    }

    #registration-wrapper .tacFields:last-child {
        width: 75%;
    }

    #registration-wrapper .tacFields>table input {
        margin-top: 0;
    }

    .hide-md {
        display: none;
    }

    .show-xs, .show-xs-inline {
        display: none;
    }

    .validationTblClass {
        width: 300px;
        margin-left: 180px;
    }

    .validationClass {
        width: 50%;
    }
}

@media only screen and (max-width: 768px){
    /* Styles for mobile layout */ 
    html,body {
        width:100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }

    .realblue {
        border-bottom: none!important;
        border-left: none!important;
        border-right: none!important;
        box-sizing: border-box;
    }

    .loginTemplateWidth {
        background: #FFF!important;
        height: 100vh!important;
    }

    .logo-link {
        background: url(../img/hlbsymbol.png) no-repeat center #ffffff;
        height: 82px!important;
        background-size: auto 70%;
        margin-bottom: 2px;
        margin-top: 10px;
    }

    .skyblue {
        min-width: 300px;
        height: auto!important;
    }

    .rightPanel,#sidePanel, .ui-dialog, #access-links.hide-in-mobile,.chat-initiator {
        display: none;
    }
	 #idTooltip, #idTooltip2{
        left: 30px !important;
    }
    .new_connect_login_logo {
        background: url(../img/Connect-Logo-New-mobile.png) no-repeat center;
        height: 130px;
        padding: 10px;
        background-size: auto 100%;
        image-rendering: -webkit-optimize-contrast;
        margin: 15px 0;
        box-sizing: border-box;
    }

    .login_panel {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        height: auto!important;
    }

    .access-loginbox-securepic>div {
        float: none!important;
        display: inline-block;
        vertical-align: top;
    }

    .access-loginbox-securepic span {
        font-size: 1.15em;
        line-height: 1.4;
    }

    .access-loginbox-securepic img {
        margin-left: 20px;
    }
	
    .access-loginbox-form input {
        height: 50px;
        font-size:1.25rem;
    }
    
    .access-loginbox-form span, .access-loginbox-form label{
    	font-size:1.2em;
    }
	
    .ui-button {
        border-radius: 30px;
        height: 50px;
    }
    
    #access-mobile-app > a {
        display: block;
        padding: 20px;
        padding-bottom:10px;
        box-sizing: border-box;
    }

    #access-mobile-app img {
        width: 100%;
        margin: auto;
    }

    #singlecontent>#content {
        display: block;
    }

    #access-loginheader label {
        font-size: 1.3em;
    }

    #access-loginbox {
        width: 100%;
        box-sizing: border-box;
    }

    #idLoginIdForm, #idPswdForm {
        padding: 20px!important;
    }

    .access-loginbox-form {
        width: 100%;
    }

    .access-loginform-quicklinks {
        text-align: center;
    }

    .access-footnote .terms {
        width: auto!important;
    }

    .access-footnote .access-terms .compreg, .access-terms .freeapp {
        padding-left: 0;
        padding-bottom: 20px;
    }

    .access-terms .freeapp a img {
        width: 100px!important;
    }

    #access-menu .logo-link {
        margin-left: auto!important;
        width: 100%!important;
    }

    .compreg {
        float: left;
        padding-top: 32px!important;
    }

    .freeapp {
        float: right;
        height: auto;
        padding-top: 0;
    }

    .freeapp a {
        float: none!important;
        margin: 0!important;
    }

    .access-terms {
        width: 100%;
        display: block;
        margin: 0;
        padding: 5px 20px;
        box-sizing: border-box;
    }

    .access-terms ul.footer-links {
        padding: 0;
        width: 100%;
        float: left;
        clear: both;
    }

    .access-terms .footer-links li {
        padding: 0 4px 0 0;
        margin-right: 4px;
        float: none;
    }

    .regTitleBorder {
        display: none;
    }

    .menu-gradient3.registration-bg {
        height: 90px;
        background-color: #f2f2f2;
        border-left: none;
        padding: 0 20px;
    }

    .menu-gradient3.registration-bg.with-title {
        height: 160px;
    }

    .menu-gradient3.registration-bg.with-title .regTitle {
        margin: auto;
        text-align: center;
        width: 100%;
        display: block;
        padding: 0;
        margin-top: 10px;
    }

    .logo-link-registration {
        background: url('../img/hlb-connect-1line-mobile.png') no-repeat center #f2f2f2;
        height: 90px!important;
        background-size: contain;
        width: 54vw!important;
    }

    .registration-bg #access-links li div {
        padding: 0;
    }

    .registration-bg #access-links {
        background-color: transparent;
    }

    .registration-bg #access-links li {
        margin: 0;
        line-height: 76px;
        padding-left: 0;
        text-align: right;
    }

    .registration-bg #access-links li a {
        background: #fff;
        color: #000!important;
        padding: 6px 14px;
        box-sizing: border-box;
        border-radius: 20px;
        margin: 0;
    }

    .registration-bg #access-links li a:first-child {
        margin-right: 10px;
    }

    #registration-wrapper {
        width: 100%;
        padding: 0 30px;
        box-sizing: border-box;
        line-height: 1.2;
    }

    .preSteps, .regSteps {
        min-height: 62vh;
        height: auto;
    }

    .regSteps {
        padding-left: 0;
    }
    
	.regColLabel {
    	padding: 5px 0!important;
	}
	
    .regColLabel>div>label, .regColLabel>div>span {
        display: block;
        width: 100%;
        vertical-align: middle;
        margin: 5px 0;
        padding: 0;
    }

    .regColLabel>div>span .ui-selectonemenu, .regColLabel>div>span .ui-selectonemenu label.ui-selectonemenu-label {
        width: 100%!important;
        height: 50px;
        vertical-align: middle;
        line-height: 2;
        margin: 0;
        background: #fff;
    }

    .regColLabel>div>span select {
        width: 100%;
        box-sizing: border-box;
        margin: 0 5px;
    }

    .regColLabel>div>span input, .regColLabel>div input {
        width: 100%;
        padding: 6px!important;
        box-sizing: border-box;
        height: 50px;
        box-shadow: none;
    }

    .regColLabel>div>label, .regColLabel label, .regHeaders, .ui-watermark, .regColLabel>div>span input, .regColLabel>div input, .regHeadersBlue, .regFieldDetails, .regMessage, .ui-message-error-detail {
        box-sizing: border-box;
        padding-left: 15px!important;
        display: block;
        margin-left: 0;
    }
	.regHeaders{
		max-width:75%;
	}
    .validationClass .regFieldDetails {
        display: inline-block;
        padding-left: 0!important;
    }

    .regFieldLabel.ui-state-error {
        background: none;
    }

    .regHeadersBlue {
        font-size: 1.2rem;
    }

    .regColLabel .regDate:first-child {
        width: 50%;
    }

    .regColLabel .regDate:nth-child(2) {
        width: 20%;
    }

    .regColLabel .regDate:last-child {
        width: auto;
    }

    .regColLabel .regDate {
        padding-top: 2px!important;
        padding-bottom: 2px!important;
    }

    .regColLabel .regDate select {
        width: 100%!important;
        height: 50px;
        vertical-align: middle;
        line-height: 2;
        margin: 0;
        padding: 10px;
        background: #fff;
    }

    .regColLabel .regDate input {
        width: 100%;
        padding: 6px!important;
        box-sizing: border-box;
        height: 50px;
        box-shadow: none;
    }

    .footer-btns-section {
        margin-top: 0;
    }

    .footer-btns-section button {
        display: block;
        width: 100%;
        margin: 5px 0;
        padding: 8px;
    }

    .custom-mobile-select {
        position: relative;
        display: block;
    }

    .custom-mobile-select:before {
        content: "";
        width: 32px;
        height: 46.5px;
        position: absolute;
        background: #fff;
        right: 1px;
        top: 1.5px;
        z-index: 1;
        pointer-events: none;
    }

    .custom-mobile-select:after {
        content: "";
        width: 16px;
        height: 16px;
        position: absolute;
        background: url("../img/dropdown-arrow.png") no-repeat;
        background-position: center;
        background-size: contain;
        right: 8px;
        top: 16px;
        z-index: 1;
        pointer-events: none;
    }

    #registration-wrapper hr {
        display: none;
    }

    #registration-wrapper .tacFields {
        box-sizing: border-box;
        padding-top: 0!important;
        padding: 0;
        display: block;
        width: 100%;
        height: auto;
        min-height: 24px;
    }

    #registration-wrapper .tacFields table td span, #registration-wrapper .tacFields table td span input {
        width: 100%!important;
        margin: 0;
        height: 38px;
    }

    #registration-wrapper .tacFields table td span.regFieldDetails {
        height: auto;
    }

    #registration-wrapper .tacFields table td span button, .fullbutton {
        padding: 8px;
        width: 100%;
    }

    #registration-wrapper .access-bluebtn {
        height: 50px;
        margin: 0;
    }

    #registration-wrapper .tacFields table td span button span, .fullbutton span {
        height: 16px;
        margin: 0;
        line-height: 1.4;
        padding: .4em 1em;
        width: auto!important;
    }

    .bluebtn2 {
        background: linear-gradient(#569ED1, #123353 10%);
        border: 1px solid #123353;
        color: #fff;
        font-size: 1.2em!important;
    }
    .whitebtn {
        font-size: 1.2em!important;
    }

    .hide-xs {
        display: none;
    }

    .show-xs {
        display: block;
    }

    .show-xs-inline {
        display: inline-block;
    }

    .grey-message {
        width: 100%;
        box-sizing: border-box;
        margin-top: 10!important;
    }
    
	.tac-container .ui-messages-error.ui-message-error{
        padding-left:15px;
        display: block;
        height:auto!important;
    }
    
    .stepdetail h5 {
        display: none;
    }

    .done .stepdetail h5 {
        display: block;
    }

    .three-step {
        display: flex;
        margin-left: -15px;
        margin-right: -15px;
        display: none;
    }

    .three-step .stepblock {
        width: auto;
        flex-basis: auto;
    }

    .three-step .stepblock.done {
        flex-grow: 10;
        flex-basis: auto;
    }

    .three-step .stepblock.done.completed {
        flex-grow: 0;
    }

    .three-step .stepblock.done.completed h5 {
        display: none;
    }

    .validationClass {
        width: 50%;
        padding-left: 15px;
    }

    .ui-carousel-viewport {
        width: 100%!important;
        height: auto!important;
        overflow: visible !important;
        margin: 15px auto;
    }

    .ui-carousel .ui-carousel-viewport ul {
        width: auto;
        position: relative;
        text-align: center;
        margin-left: -1px;
    }

    .ui-carousel .ui-carousel-viewport ul li {
        float: none;
        display: inline-block;
        margin: 0;
        padding-left: 10px;
        box-sizing: border-box;
        width: 33.3%;
        height: 110px;
        text-align: center;
    }

     .ui-carousel .ui-carousel-viewport ul li:nth-child(3n+1):nth-child(-3n+7) {
        padding-left: 5px;
    }
    
     .ui-carousel .ui-carousel-viewport ul li:nth-child(3n):nth-child(-3n+9) {
        padding-right: 5px;
    }

    .ui-carousel .ui-carousel-viewport ul li .picture-row-reg {
        margin: 0;
        height: auto;
        width: 100%;
        box-sizing: border-box;
    }

    .ui-carousel .ui-carousel-viewport ul li .picture-row-reg img {
        width: 100%!important;
        height: auto!important;
        max-height: 100px!important;
    }

    .ui-chkbox {
        padding-left: 0!important;
        padding-right: 10px;
    }

    .summaryPage {
        width: 100%;
    }

    .regMessageSummary {
        text-align: center;
        display: block;
    }

    .summary-username-table tr td span {
        padding-left: 0!important;
        padding-top: 2px;
    }

    .summary-username-table tr td>label:after {
        content: ":";
        font-weight: bold;
        padding-left: 1px;
    }

    .mobile-margin-auto {
        margin: auto;
    }
	.mobile-text-center,
    .resetInfo span {
        text-align: center;
    }

    .resetInfo .regFieldLabel, .resetInfo a {
        display: block;
        padding: 2px 0;
    }
}
@media only screen and (min-width: 300px) and (max-width: 360px) and (orientation: portrait) {
	.logo-link-registration {
        width: 50vw!important;
    }
    .regHeaders{
		max-width: 90%;
		font-size: 1.2rem;
	}
}