:root {
    --text-color: #5E7599;
    --icon-color: #ACB9CD;
    --primary-color: #000000;

    --primary-blue: #0047FE;
}

* {
    font-family: 'Inter', sans-serif;
}

html, body {
    height: 100%;
    margin: 0;
}

.material-symbols-outlined {
    color: var(--icon-color);
}

.input-group-text {
    width: 50px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.form-control {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.panel-container {

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    height: 100%;
    width: 100%;

    @media (min-width: 600px) and (max-width: 767px) {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    @media (max-width: 599px) {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .splash-panel {

        height: 100%;
        width: 40vw;

        @media (min-width: 768px) and (max-width: 959px) {
            width: 50vw;
        }
        @media (min-width: 600px) and (max-width: 767px) {
            height: 40vh;
            width: 100%;
        }
        @media (max-width: 599px) {
            height: 40vh;
            width: 100%;
        }

        .splash-panel-container {

            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;

            height: 100%;
            width: 100%;

            padding: 48px;

            @media (min-width: 960px) and (max-width: 1279px) {
                padding: 40px;
            }
            @media (min-width: 768px) and (max-width: 959px) {
                padding: 32px;
            }
            @media (min-width: 600px) and (max-width: 767px) {
                padding: 24px;
            }
            @media (max-width: 599px) {
                padding: 20px;
            }

            background: radial-gradient(circle at 100% 100%, #0047FE, #0641CD, #0A225C);


            .logo-row {

                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;

                width: 100%;
                gap: 16px;

                & > .engageware-logo {

                    @media (min-width: 768px) {
                        display: none;
                    }

                }

                & > .appointment-scheduler-logo {

                    width: 163px;

                }

            }

            .splash-panel-content {

                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;

                color: white;

                margin: .5em 0;

                @media (min-width: 600px) and (max-width: 767px) {
                    flex-grow: 2;
                }
                @media (max-width: 599px) {
                    flex-grow: 2;
                }

                .splash-panel-header {

                    font-weight: 700;

                    font-size: 32px;
                    line-height: 1.4em;

                    @media (max-width: 959px) {
                        line-height: 1.5em;
                    }

                    @media (min-width: 600px) and (max-width: 959px) {
                        font-size: 24px;
                    }

                    @media (max-width: 599px) {
                        font-size: 20px;
                    }

                }

                .splash-panel-text {

                    font-weight: 700;

                    font-size: 20px;
                    line-height: 1.5em;

                    @media (max-width: 959px) {
                        line-height: 1.6em;
                    }

                    @media (max-width: 599px) {
                        font-size: 14px;
                    }

                }

                .splash-panel-text-line-2 {

                    @media (max-width: 599px) {
                        font-size: 14px;
                    }
                }

                .splash-panel-link {
                    a {
                        color: white;
                        @media (max-width: 599px) {
                            font-size: 14px;
                        }
                    }
                }

                div {
                    @media (max-width: 599px) {
                        height: 12px;
                    }
                }

            }

            .logo-row ~ .engageware-logo {

                @media (max-width: 767px) {
                    display: none;
                }

            }

        }

    }

    .interface-panel {

        height: 100%;
        width: 60vw;

        @media (min-width: 768px) and (max-width: 959px) {
            width: 50vw;
        }
        @media (min-width: 600px) and (max-width: 767px) {
            width: 100%;
            height: 60vh;
        }
        @media (max-width: 599px) {
            width: 100%;
            height: 60vh;
            padding: 20px;
        }

        display: flex;
        justify-content: center;
        align-items: center;

        .interface-panel-content {

            width: 30vw;
            gap: 16px;

            @media (min-width: 768px) and (max-width: 1279px) {
                width: 40vw;
            }
            @media (min-width: 600px) and (max-width: 767px) {
                width: 60vw;
            }
            @media (max-width: 599px) {
                width: 100%;
                gap: 8px;
            }

            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;

            .interface-icon-container {

                display: flex;
                justify-content: center;
                align-items: center;

                width: 48px;
                height: 48px;

                border-radius: 10px;
                background-color: #E8F7FF;

                .material-symbols-outlined {
                    color: var(--primary-blue);
                }

                .password-icon {
                    transform: rotate(90deg);
                }

                &.success {
                    background-color: #EAFFF4;

                    .material-symbols-outlined {
                        color: #00D386;
                    }

                }

                &.error {
                    background-color: #FEF2F2;

                    .material-symbols-outlined {
                        color: #DC2626;
                    }

                }
            }

            .interface-panel-header {

                color: var(--primary-color);
                font-weight: 600;

                font-size: 16px;
                line-height: 1.5em;

            }

            .interface-panel-sub-header {

                color: var(--text-color);
                font-weight: 400;

                text-align: center;

                font-size: 14px;
                line-height: 1.5em;

            }

            ul {

                display: flex;
                flex-direction: column;
                gap: 12px;

                li {

                    color: var(--text-color);
                    font-weight: 400;

                    font-size: 14px;
                    line-height: 18px;

                    @media (min-width: 768px) and (max-width: 1279px) {
                        font-size: 14px;
                        line-height: 18px;
                    }
                    @media (min-width: 600px) and (max-width: 767px) {
                        font-size: 12px;
                        line-height: 14px;
                    }

                }

            }

            .interface-form {

                width: 100%;

                color: var(--text-color);

                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: stretch;

                gap: 8px;
                margin-top: 16px;

                @media (max-width: 599px) {
                    margin-top: 8px;
                }

                .error-message {
                    color: #F44336;
                    font-size: 12px;
                    font-weight: 400;
                    letter-spacing: 0.4px;
                    line-height: 20px;
                    margin-left: 64px;
                    margin-top: 4px;
                }

                .buttons-container {

                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: stretch;

                    gap: 16px;

                    @media (max-width: 599px) {
                        gap: 8px;
                    }

                    .primary-button {

                        height: 40px;

                        background-color: var(--primary-blue);
                        font-weight: 500;
                        font-size: 14px;

                    }

                    .secondary-button {

                        height: 40px;
                        width: 100%;

                        border-radius: 4px;

                        color: var(--primary-blue);
                        font-weight: 500;
                        font-size: 14px;

                    }

                    .error-container {

                        visibility: hidden;

                        width: 100%;

                        font-size: 14px;
                        line-height: 20px;
                        font-weight: 400;

                        display: flex;
                        flex-direction: row;
                        justify-content: flex-start;
                        align-items: center;

                        padding-left: 16px;

                        color: white;
                        background-color: #D02C29;
                        height: 48px;
                        border-radius: 4px;

                        &.show-error {
                            visibility: visible;
                        }

                    }

                }

            }

        }

    }

}