﻿body {
    background: #FBFBFD;
}

.homephone-field {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
}

.text-danger {
color: #fa6900;
}

.Margin-Bottom-lg {
margin-bottom: 32px;
}
h4 {
    line-height: 1.5em;
}
.btn-lg {
padding: 12px 16px;
}

.Icon-Box {
    border: thin solid #D4E1F0;
    border-right: none;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    padding: 13px 12px;
    color: #bdbdbd;
}
.Icon-Box-Right {
    border: thin solid #D4E1F0;
    border-left: none;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    padding: 13px 12px;
    color: #bdbdbd;
    background: #fafafb;
}
.Padding-Box-lg {
padding: 0px 32px;
}
@media(max-width: 992px){
.Padding-Box-lg {
padding: 0px 16px;
}
}

.Padding-Right-Register {
padding-right: 480px;
}

.Padding-Left-Register {
padding-left: 480px;
}

.Padding-Top-lg {
padding-top: 128px;
}

.Padding-Left-md {
padding-left: 64px;
}

.Title {
font-size: 5em;
font-weight: bolder;
}

.SubTitle {
font-weight: 100;
font-size: 2em;
}

.Z-sm {
z-index: 99999;
}

.Overlay.White {
background: rgba(255, 255, 255, 0.2);
}

.Overlay {
background: rgba(0, 0, 0, 0.15);
}

.Text-Shadow {
text-shadow: 0px 2px 14px rgba(0,0,0,0.1);
}

.dot {
display: block;
height: 14px;
width: 14px;
border-radius: 100%;
margin: 3px 6px;
background: rgba(255, 255, 255, 0.3);
transition: 0.4s;
/*box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.4)*/
}


.dot.Open {
background: #fff;
/*box-shadow: 0px 0px 12px rgba(255, 255, 255, 0.4);*/
}

.dot.Pending {
/*box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.4)*/
}

.dot.Open.Transitioning {
background: rgba(255, 255, 255, 0.3);
}

.SlideText {
transition: 0.6s;
position: absolute;
bottom: 128px;
max-width: 640px;
width: calc(100vw - 600px);
}

.SlideText.Next {
margin-left: 100px;
opacity: 0 !important;
}

.SlideText.Open {
margin-left: 0px;
opacity: 1 !important;
}

.SlideText.Open.Transitioning {
opacity: 0 !important;
margin-left: -100px;
}

.SlideText.Next.Open.Transitioning {
margin-left: 0px;
}

.SlideText.Pending {
opacity: 0 !important;
margin-left: -100px;
}


.SlideImg {
width: 100VW;
transition: left 0.8s;
}

.SlideImg.Next {
left: -100vw;
z-index: 99;
}

.SlideImg.Next.Open.Transitioning {
z-index: 999;
}

.SlideImg.Open {
left: 0px;
z-index: 999;
}

.SlideImg.Open.Transitioning {
left: 0px;
z-index: 100;
}

.SlideImg.Pending {
z-index: -1;
}

.MaxHeight120 {
max-height: 120px;
}
.validation-summary-errors {
    list-style: none;
    background: #d82222;
    color: #fff !important;
    border-radius: 4px;
    padding: 6px;
    margin-bottom: 6px;
}
.validation-summary-errors ul{
    text-decoration: none;
    list-style: none;
    margin: 0px;
    padding: 0px;
}

#PasswordError ul {
    list-style: none;
    color: #8795AC;
    padding: 4px 0;
}
#PasswordError.active ul {
    color: #EF6B0B;
}

.Required .form-control, .Required.form-control {
    border-color: #fa6900 !important;
}

/* Mobile signup viewport fix (CU-86d3tc1dc).
   At <=992px the body is position:fixed (.Mobile-Fixed), so this panel is the only scroll
   surface. .FullHeight (height:100vh) resolves to the iOS *large* viewport, so the panel's
   bottom — including the "Get Started" button — sits behind the Safari/Chrome toolbar, and
   because the content is not taller than 100vh, .Scroll (overflow:auto) has no scroll range
   to reveal it. Use dvh (the visual viewport on iOS, excluding chrome) with a vh fallback,
   trim the oversized 128px top padding, and enable momentum touch scrolling so the button is
   always on-screen or reachable. Compound selectors (.Register-Panel.X) win over the single-
   class utilities regardless of stylesheet order. */
@media (max-width: 992px) {
    .Register-Panel.FullHeight {
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* dvh is only honoured on iOS 16.4+/Chrome 108+ and it ignores the on-screen keyboard, so on
       older devices and on short viewports (landscape, or keyboard open) the panel is still taller
       than the visible area and the submit button stays under the browser chrome. Register.cshtml
       measures window.visualViewport and sets --register-panel-height, then adds .Measured-Height —
       gated on the class so a browser with JS disabled keeps the dvh/vh fallback above rather than
       falling back to height:auto. */
    .Register-Panel.FullHeight.Measured-Height {
        height: var(--register-panel-height);
    }

    /* Trim the oversized 128px top padding, and keep a bottom gap so the button is never flush
       against the panel edge (and the scroll range always clears it). */
    .Register-Panel.Padding-Top-lg {
        padding-top: 40px;
        padding-bottom: 32px;
    }
}

/* The mobile logo (.Mobile-Show, visible only <=992px) was capped at an inline 35px and
   rendered too small; give it a sensible mobile size. */
.Register-Logo {
    max-height: 56px;
}
