#pageLogin {
    & .page-body {
        padding-bottom: 0;
    }

    & #divBody {
        & #divContractDateEvent {
            & .message {
                & .line1 {
                    text-align: center;
                }

                & .line11,
                & .line12 {
                    display: inline;
                }

                & .line2 {
                    margin: 0 auto;
                }

                & .line21,
                & .line22,
                & .line23 {
                    font-size: 0.875rem;

                    & span {
                        display: inline-block;
                    }
                }

                & .th {
                    & .line2 {
                        width: 240px;
                    }

                    & .line21,
                    & .line22 {
                        & span:first-child {
                            width: 38px;
                        }

                        & span:last-child {
                            width: 116px;
                        }
                    }
                }

                & .en {
                    & .line2 {
                        width: 170px;
                    }

                    & .line22,
                    & .line23 {
                        & span:first-child {
                            width: 42px;
                        }

                        & span:last-child {
                            width: 86px;
                        }
                    }
                }
            }

            & .message-error {
                @media only screen and (max-width: 530px) {
                    & .th {
                        & .line1 {
                            width: 240px;
                            text-align: left;
                            letter-spacing: 0.02rem;
                            margin: 0 auto;
                        }

                        & .line11,
                        & .line12 {
                            display: block;
                        }
                    }
                }

                @media only screen and (max-width: 748px) {
                    & .en {
                        & .line1 {
                            width: 315px;
                            text-align: left;
                            margin: 0 auto;
                        }

                        & .line11,
                        & .line12 {
                            display: block;
                        }

                        & .line11 {
                            letter-spacing: 0.018rem
                        }
                    }
                }
            }

            & .message-success {
                @media only screen and (max-width: 380px) {
                    & .th {
                        & .line1 {
                            width: 240px;
                            text-align: left;
                            margin: 0 auto;
                        }

                        & .line11,
                        & .line12 {
                            display: block;
                        }

                        & .line11 {
                            text-align: center;
                        }

                        & .line12 {
                            letter-spacing: 0.02rem
                        }
                    }
                }

                @media only screen and (max-width: 660px) {
                    & .en {
                        & .line1 {
                            width: 315px;
                            text-align: left;
                            margin: 0 auto;
                        }

                        & .line11,
                        & .line12 {
                            display: block;
                        }

                        & .line11 {
                            text-align: center;
                        }
                    }
                }
            }
        }

        & #divLoginForm {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
            margin-top: 1rem;
            margin-bottom: 0;

            & .col .card.medium {
                height: 407px;
                margin-top: 0;
                border: 1px solid rgba(0, 0, 0, 0.16);
                border-radius: 0.75rem;
                box-shadow: none;

                & .card-content {
                    height: 124px;
                }
            }

            & .card.medium {
                & .card-image {
                    & .login-card-image {
                        width: 100%;
                        height: 100%;
                        background-size: cover;
                        background-repeat: no-repeat;
                        background-position: center center;
                        position: absolute;
                        top: 0;
                        left: 0;
                    }

                    & #loginImage4Student {
                        background-image: url("images/student.jpg");
                    }

                    & #loginImage4Parent {
                        background-image: url("images/parent.jpg");
                    }

                    & .card-content {
                        height: 100px;
                    }
                }
            }

            &.show-parent-login-from {
                @media only screen and (max-width: 1406px) {
                    & .col .card.medium {
                        height: 431px;
                    }

                    & .card.medium .card-content {
                        height: 148px;
                    }
                }

                @media only screen and (max-width: 1190px) {
                    & .col .card.medium {
                        height: 456px;
                    }

                    & .card.medium .card-content {
                        height: 173px;
                    }
                }

                @media only screen and (max-width: 1148px) {
                    & .col .card.medium {
                        height: 480px;
                    }

                    & .card.medium .card-content {
                        height: 197px;
                    }
                }

                @media only screen and (max-width: 788px) {
                    & .col .card.medium {
                        height: 505px;
                    }

                    & .card.medium .card-content {
                        height: 222px;
                    }
                }

                @media only screen and (max-width: 687px) {
                    & .col .card.medium {
                        height: 529px;
                    }

                    & .card.medium .card-content {
                        height: 246px;
                    }
                }

                @media only screen and (max-width: 664px) {
                    & .col .card.medium {
                        height: 554px;
                    }

                    & .card.medium .card-content {
                        height: 271px;
                    }
                }

                @media only screen and (max-width: 614px) {
                    & .col .card.medium {
                        height: 576px;
                    }

                    & .card.medium .card-content {
                        height: 293px;
                    }
                }

                & .col:last-child {
                    @media only screen and (max-width: 600px) {
                        & .card.medium {
                            height: 456px;

                            & .card-content {
                                height: 173px;
                            }
                        }
                    }
                    
                    @media only screen and (max-width: 590px) {
                        & .card.medium {
                            height: 480px;

                            & .card-content {
                                height: 197px;
                            }
                        }
                    }

                    @media only screen and (max-width: 413px) {
                        & .card.medium {
                            height: 505px;

                            & .card-content {
                                height: 222px;
                            }
                        }
                    }
                }
            }

            @media only screen and (max-width: 600px) {
                & .col:first-child {
                    & .card.medium {
                        height: 382px;

                        & .card-content {
                            height: 100px;
                        }
                    }
                }
            }
        }

        & .card.medium {
            & .card-action {
                padding-bottom: 15px;

                & .btn {
                    width: 120px;
                    margin-right: 0;
                }
            }

            & #loginForm4Parent {
                padding: 1rem;

                & #loginFormInputField4Parent {
                    padding-top: 0.5rem;

                    & .row {
                        padding-left: 0;
                        padding-right: 0;
                    }
                }

                & #loginFormRecommend {
                    font-size: 0.875rem;
                    line-height: 1.75;
                    padding-bottom: 0.5rem;

                    & p {
                        margin-top: 5px;

                        & i {
                            position: relative;
                            top: 2px;
                        }
                    }
                }
            }
        }
    }
}