/* =============================================================================
    This is the stylesheet for the full page dialog. For ease of layout it uses
    css grid styling, except in a few instances were css flexbox is the better
    choice. Here are two good links to understanding these layout types.

    Grid: https://css-tricks.com/snippets/css/complete-guide-grid/
    Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Each selector rule here represents the default values for the various
    options available. But they can all be overriden for the specific dialog
    being implemented. The basic premise is that there should never be a reason
    to use an !important rule on a style attribute. On the outer-most div of the
    dialog you can add a class, and that class can be used in your own
    stylesheet to create a more specific selector. Selectors with more
    specificity will have precedence.

    For more information on selector specificity see this page:
    https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

    There are no hardcoded styles in this implementation, except were the
    component used required it.
============================================================================= */
.fullpage-modal {
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    grid-template-columns: auto 560px auto;
    grid-template-areas:
        "banner banner banner"
        ". header ."
        ". modal-body ."
        ". support-footer . ";
    min-width: 100vw;
    min-height: 100vh;
    background: #ffff;
    color: var(--text-dark);
    overflow-x: hidden;
    align-items: start;
    justify-content: stretch;
}

/* error-page-view */
.fullpage-modal.error-page-view {
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto 1fr;
    padding: 7em;
}
.fullpage-modal.no-banner.no-banner.error-page-view .fullpage-modal-body {
    padding-top:0 ;
}
.fullpage-modal.error-page-view .fullpage-modal-body {
    width: 100%;
    height:100%;
}
.fullpage-modal.error-page-view .fullpage-modal-body .fullpage-modal-content {
    padding-top: 0; 
    height:100%;
    grid-template-rows: 1fr auto auto;
}
.fullpage-modal.error-page-view .fullpage-modal-body .fullpage-modal-content .fullpage-modal-content-body {
    padding: 0;
}

/* error-page-view end */

.fullpage-modal.full-width-header.full-width,
.fullpage-modal.full-width {
    grid-template-columns: auto;
    grid-template-areas:
        "banner"
        "header"
        "modal-body"
        "support-footer";
}

.fullpage-modal.full-width-header {
    grid-template-areas:
        "banner banner banner"
        "header header header"
        ". modal-body ."
        ". support-footer . ";
}

.fullpage-modal.no-banner.fullpage-modal.full-width-header {
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header"
        ". modal-body ."
        ". support-footer . ";
}
.fullpage-modal.full-width, 
.fullpage-modal.show-banner, 
.fullpage-modal.full-width-header {
    padding: 0px;
}

.fullpage-modal h1 {
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    text-align: left;
    margin: 0px 0px 10px 0px;
}

/* already-existing-account-view */

.fullpage-modal.already-existing-account-view{
    padding: 7em;
}


.fullpage-modal.already-existing-account-view .fullpage-modal-body{
    padding: 0;
    width: 100%;
    max-width: 510px;
}

.fullpage-modal.already-existing-account-view .fullpage-modal-body .fullpage-modal-intro .fullpage-modal-description p{
    margin-top: 10px;
}

.fullpage-modal.already-existing-account-view .fullpage-modal-body .fullpage-modal-content{
    padding-top: 0;
}
.fullpage-modal.already-existing-account-view .fullpage-modal-body .fullpage-modal-content .fullpage-modal-content-body{
    font-weight: bold;
    padding: 0px 0px 16px 0px;
}

.fullpage-modal.already-existing-account-view .fullpage-modal-body .fullpage-modal-content .fullpage-modal-content-body .email{
    font-size: 18px;
}
.fullpage-modal.already-existing-account-view .fullpage-modal-body .fullpage-modal-content .fullpage-modal-content-body .email .top{
    padding-bottom: 22px;
    display: inline-block;
}

.fullpage-modal.already-existing-account-view .fullpage-modal-body .fullpage-modal-content .fullpage-modal-content-body .email .info-icon-content{
    position: relative;
    top: 7px;
    display: inline-block;
    margin-left: 5px;
    cursor: pointer;
}

.fullpage-modal.already-existing-account-view .fullpage-modal-body .fullpage-modal-content .fullpage-modal-content-body .email .info-icon-content .arrow-top {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    left: 3px;
    bottom: -15px;
    border-bottom: 15px solid #2d2d2d;
}


.fullpage-modal.already-existing-account-view .fullpage-modal-body .fullpage-modal-content .fullpage-modal-content-body .email .details-box-new {
    max-height: 255px;
    background-color: rgba(255, 255, 255, 0.15);
    margin-bottom: 30px;
    text-align: left;
    position: relative;
    background-color: #e7ecf0;
    overflow: auto;
}

.fullpage-modal.already-existing-account-view .fullpage-modal-body .fullpage-modal-content .fullpage-modal-content-body .email .details-box-new .demographic-account-details{
    padding: 2px 35px 20px;
}

.fullpage-modal.already-existing-account-view .fullpage-modal-body p{
    font-size: 18px;
    line-height: 1.33;
    letter-spacing: normal;
    font-weight: normal;
    text-align: left;
}

.fullpage-modal.already-existing-account-view .fullpage-modal-body .fullpage-modal-content .fullpage-modal-content-body .email .details-box-new .demographic-account-details p{
    font-size: 14px;
}
.fullpage-modal.already-existing-account-view .fullpage-modal-body .fullpage-modal-content .fullpage-modal-content-body .email .details-box-new .demographic-account-details h4{
    font-size: 17px;
}

.fullpage-modal.no-header.no-banner.already-existing-account-view .fullpage-modal-body{
    padding-top: 0;
} 

/* =============================================================================
    Styles for the banner section
*/
.show-banner .fullpage-modal-banner {
    display: grid;
    grid-area: banner;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "banner-logo banner-controls";
    padding: 15px 15px 7px 15px;
}

.fullpage-modal-banner {
    display: grid;
    grid-area: banner;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "banner-logo banner-controls";
    padding: 15px 15px 7px 15px;
}

.fullpage-modal-banner.rule {
    border-style: none;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-color: black;
}

.fullpage-modal-banner-logo {
    display: grid;
    grid-area: banner-logo;
    justify-self: start;
}

.fullpage-modal-banner-controls {
    display: grid;
    grid-area: banner-controls;
    justify-self: end;
}

/* =============================================================================
    Styles for the header section
*/
.fullpage-modal-header {
    display: grid;
    grid-area: header;
    grid-template-areas:
        "header-content";
    padding: 10px 16px 10px 16px;
}

.full-width .fullpage-modal-header {
    grid-template-areas:
        "header-content";
}

.fullpage-modal-header-content {
    display: grid;
    grid-area: header-content;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "header-logo header-controls";

    padding: 10px 0px 10px 0px;
}

.full-width .fullpage-modal-header-content {
    padding: 0px;
}

.full-width.show-banner .fullpage-modal-header {
    padding: 25px 30px 0px 30px;
}

.no-banner.full-width .fullpage-modal-header {
    padding: 10px 30px 0px 0px;
}

.fullpage-modal-header-logo {
    display: grid;
    grid-area: header-logo;
    justify-self: start;
}

.fullpage-modal-header-logo svn,
.fullpage-modal-header-logo img,
.fullpage-modal-banner-logo svn,
.fullpage-modal-banner-logo img {
    max-height: 32px;
}

.has-close .fullpage-modal-header-logo {
    padding: 17px 0px;
}


.no-banner .fullpage-modal-header-logo {
    margin-left: 0px;
}

.fullpage-modal-header-logo .sharecare-logo-black {
    margin-top: -18px;
    padding-left: 0px;
}

.full-width .fullpage-modal-header-logo .sharecare-logo-black {
    margin-top: -15px;
    padding-left: 23px;
}

.fullpage-modal-header-controls {
    display: grid;
    grid-area: header-controls;
    justify-self: end;
    grid-template-columns: auto auto;
    grid-template-areas:
        "locale close";
}

.no-banner.full-width .fullpage-modal-header-controls {
    padding-top: 10px;
}

.fullpage-modal-header-controls.no-controls {
    display: none;
}

.fullpage-modal-header-close {
    display: grid;
    grid-area: close;
    vertical-align: top;
}

.has-close .fullpage-modal-header-locale {
    padding: 17px 0px;
}


/* =============================================================================
    Styles shared by both the header and banner for the locale switch component.
*/
.fullpage-modal-banner-locale,
.fullpage-modal-header-locale {
    display: grid;
    grid-area: locale;
    position: static;
    margin: 0px 10px 0px 0px;
}

.fullpage-modal-banner-locale .dd-wrapper,
.fullpage-modal-header-locale .dd-wrapper {
    position: relative;
}

.fullpage-modal-banner-locale .dd-wrapper #spn,
.fullpage-modal-header-locale .dd-wrapper #spn {
    position: static;
    margin-top: -3px;
}

.fullpage-modal-banner-locale .dd-wrapper > div,
.fullpage-modal-header-locale .dd-wrapper > div {
    display: grid !important;
}

/* =============================================================================
    Styles for content body
*/
.fullpage-modal-body {
    display: grid;
    grid-area: modal-body;
    grid-template-rows: auto auto auto 1fr;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        ". message ."
        ". icon ."
        ". intro ."
        ". modal-content .";
    align-items: start;
    padding: 16px;
}

.full-width .fullpage-modal-body {
    grid-template-columns: 1fr;
    grid-template-areas:
        "message"
        "icon"
        "intro"
        "modal-content";
    padding: 20px 30px 0px 30px;
}

.fullpage-modal.no-header.no-banner .fullpage-modal-body {
    padding-top: 64px;
}


.fullpage-modal-message {
    display: grid;
    grid-area: message;
}

.fullpage-modal-message .form-message {
    margin: 0px 0px 30px;
}


.fullpage-modal-icon {
    display: grid;
    grid-area: icon;
    justify-self: center;
}

.fullpage-modal-icon svg {
    width: 64px;
    height: 64px;
}

.fullpage-modal-icon svg {
    margin: 0px 0px 24px 0px;
}


.fullpage-modal-intro {
    display: grid;
    grid-area: intro;
    text-align: center;
}

.fullpage-modal-description {
    font-size: 18px;
    text-align: left;
}

.fullpage-modal-description p {
    margin-top: 0px;
}

.fullpage-modal-content {
    padding-top: 20px;
    display: grid;
    grid-area: modal-content;
    grid-template-rows: auto auto;
    grid-template-areas:
        "content-body"
        "buttons"
}

/* =============================================================================
    this class is used if the implementor wants to add the support footer
*/
.fullpage-modal-footer {
    display: grid;
    grid-area: support-footer;
    padding: 0px 16px;
}

/* =============================================================================
    These classes should be used in the implementation of the content children
    of the FullPageModal component. Using these will properly handle the default
    styles and reactive behaviors. They are not necessary, but are highly
    encouraged. To use these styles, structure your FullPageModal componment
    like this

        <FullPageModal
            className="my-modal"
            . . .
        >
            <div className="fullpage-modal-content-body">
                [content here]
            </div>
            <div className="fullpage-modal-content-buttons">
                <button></button>
                <button></button>
            </div>
        </FullPageModal>

    Using the class "fullpage-modal-content-buttons" will automatically set the
    buttons up for two, placed side by side, and will stack them at 100 percent
    for a mobile device. To handle more than two buttons, just override the
    "fullpage-modal-content-buttons button" stlyle:

        .my-modal .fullpage-modal-content-buttons button{
            width: 30%;
        }

    The width should be enough to leave a gap between buttons.

    If you have set pinMobileButtons to true, the buttons will move to the very
    bottom of the page when the screen width hits 480px, which is about the size
    of the largest mobile phone display.
*/
.fullpage-modal-content-body {
    display: grid;
    grid-area: content-body;
    padding: 0px 0px 30px 0px;
}

.fullpage-modal-content-buttons {
    grid-area: buttons;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.fullpage-modal-content-buttons button.MuiButton-root.round-button {
    width: 48%;
    height: 56px;
    border-radius: 10px;
    margin: 0 0px 10px 0;
}

/* already-existing-account-view */


@media only screen and (max-width: 767px){
    .fullpage-modal.already-existing-account-view{
        padding:4em 0.5em 0.5em 0.5em;
        grid-template-columns: auto 100% auto;
    }
    .fullpage-modal-content-buttons button.MuiButton-root.round-button {
        width:100%;
        min-width: 100%;
    }
    .fullpage-modal.already-existing-account-view .fullpage-modal-body {
        max-width: 100%;
    }
    .fullpage-modal-content-buttons #create-new-credentials{
        border:0;
    }
} 

@media only screen and (max-width: 592px) {
    .fullpage-modal.already-existing-account-view{
        grid-template-columns: auto;
    }
}

@media only screen and (max-width: 525px) {
    .fullpage-modal.already-existing-account-view{
        padding: 4em 1em 1em;
    }
}

@media only screen and (max-width: 480px) {
    .fullpage-modal.already-existing-account-view.pin-mobile-buttons {
        grid-template-rows: auto auto auto 1fr;
    }
}

/* =============================================================================
    These are the reactive changes to the above styles. With a default content
    width of 560px, and accounting for padding of 16px on either side, when the
    screen size hits 592px, it is time to remove the extra columns used to
    center the content
*/
@media only screen and (max-width: 592px) {
    .fullpage-modal.full-width-header,
    .fullpage-modal {
        grid-template-columns: 1fr;
        grid-template-areas:
            "banner"
            "header"
            "modal-body"
            "support-footer";
    }

    .fullpage-modal-body {
        grid-template-columns: 1fr;
        grid-template-areas:
            "message"
            "icon"
            "intro"
            "modal-content";
    }
}

/*  At 480 pixels the controls move from the banner to the header and the banner
    logo gets centered */
@media only screen and (max-width: 480px) {

    .show-banner .fullpage-modal-banner {
        grid-template-columns: auto auto auto;
        grid-template-areas:
            ". banner-logo .";
        justify-content: center;
        padding: 30px 0px 30px 0px;
    }

    .fullpage-modal-header {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header-content";
        padding: 10px;
    }
}

/* =============================================================================
    At 480px the buttons become 100% and move to the bottom. 480px
    looks to be about the largest mobile device screen width.
*/
@media only screen and (max-width: 480px) {
    .pin-mobile-buttons.fullpage-modal {
        grid-template-rows: auto auto 1fr auto;
    }

    .pin-mobile-buttons .fullpage-modal-body {
        box-sizing: border-box;
        height: 100%;
    }
    .pin-mobile-buttons .fullpage-modal-content {
        grid-template-rows: 1fr auto;
        box-sizing: border-box;
        height: 100%;
    }

    .fullpage-modal-content-buttons button.MuiButton-root.round-button {
        box-sizing: border-box;
        width: 100%;
        margin: 0px 0px 16px 0px;
    }
}