/**
 * Custom Definitions:
 *  Primary Color: #949494
 *  Secondary Color: #efefef
 *  Alert Color: #bc4044
 *  Success Color: #3872ab
**/

.asj-roman-font {
    font-family: "ITC Galliard W01 Roman", "リュウミン L-KL", "Ryumin Light KL", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
}
.shadowed-text {
    text-shadow: 0 3px 7px #000000;
}
.shadowed-box {
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4);
}

body.gateway {
    .first-page {
        .logo {
            position: fixed;
            top: 1.0rem;

            &.asj {
                left: 1.0rem;
                width: 111px;
                height: 70px;
            }
            &.cosnavi {
                right: 2.0rem;
                height: 70px;
                line-height: 70px;
                font-size: 2.0em;
                color: white;
                .asj-roman-font;
                .shadowed-text;
            }
        }

        .login-form {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            width: 32em;
            margin: auto;

            form {
                > .row {
                    > div {
                        background-color: rgba(255, 255, 255, 0.3);
                        padding: 1.0rem;
                    }
                }
            }
            .notice {
                @notice-margin: 0.5rem;
                margin-top: @notice-margin;
                margin-bottom: @notice-margin;
                .callout {
                    margin-bottom: 0.5rem;
                    background-color: rgba(255, 255, 255, 0.5);
                    font-size: smaller;
                }
            }
            .copyright {
                .asj-roman-font;
                font-size: smaller;
                .shadowed-text;
            }
            .button {
                .shadowed-box;
            }
            label, .help-text {
                .shadowed-text;
            }
        }

        #login-background {
            visibility: hidden;
            width: 100%;
            height: 100%;
            // position: relative;
            position: absolute;

            &.ns_nerveSlider.ns_horizontal.light {
                position: absolute;
            }
            .ns_slides .ns_slidesTrack .ns_slideContainer {
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }

        #supersized {
            position: static;
            li { position: absolute; }
            ul { margin: 0; }
        }

        .direct-to-easy_cosnavi {
            text-align: center;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 1.0rem;
            * {
                color: white;
                text-shadow: 0 3px 7px #000000;
            }
        }
    }

    .second-page {
        .typeform-widget, iframe {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
        iframe {
            width: 100%;
            height: 100%;
        }
    }
}


/*
body.public-easy-images {
    background-color: transparent;

    .gallery {
        &.title {
            color: white;
            font-family: Poiret One, sans-serif;
            font-size: 20px;
            margin: 1.0em 1.0em;
        }
    }

    #baguetteBox-slider {
        .full-image {
            padding: 1.5em;
        }
    }
}
*/


body.public-easy-test {
    background-color: #f0f0f0;
    .parent-frame {
        border: 1px solid #666666;
    }
    .easy-images-frame {
        border: 1px solid #886666;
        background-color: initial;
    }
}