html{
    height: 100%
}

body {
    margin: 0;
    font-family: Roboto, sans-serif, Segoe UI;
    background-color: #01a1c0;
    color: #4d4c4e;
    background: url('/images/login_bg_2023.jpg') no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100%;
}

.cs-lgn-pg {
    display: flex;
    height: 100%;
}


    .cs-lgn-pg .rgt {
        width: 100%;
        position: relative;
        height: 82%;
    }

        .cs-lgn-pg .rgt .contnr {
            display: flex;
            justify-content: center;
            height: 100%;
            flex-direction: column;
            text-align: center
        }


.cs-lgn-contnr {
    display: flex;
    justify-content: center;
}

.cslogo {
    padding-bottom: 15px;
}

.cs-lgn-box {
    position: relative;
    width: 320px;
    background: #fff;
    margin: 0 auto;
    text-align: center;
    border-radius: 20px;
    box-shadow: 0px 0px 8px 0px rgba(2,37,117,.25);
    padding: 12px;
    z-index: 1;
    box-shadow: 0px 0px 13px 0px rgba(0,64,148,0.5);
}

    .cs-lgn-box h3 {
        font-size: 26px;
        font-weight: bold;
        margin-bottom: 0;
        color: #363636;
        margin: 12px 0;
    }

    .cs-lgn-box .hlptxt {
        font-size: 15px;
        color: #555a65;
    }

    .cs-lgn-box .cs-form {
        text-align: center;
        padding-top: 20px;
    }

        .cs-lgn-box .cs-form .terms {
            padding-top: 15px;
            font-size: 12px;
            line-height: 18px;
            padding-bottom: 10px;
        }

            .cs-lgn-box .cs-form .terms a {
                color: #2653ba;
                text-decoration: none;
            }

        .cs-lgn-box .cs-form a {
            text-decoration: none;
        }

            .cs-lgn-box .cs-form a:hover {
                text-decoration: underline;
            }

        .cs-lgn-box .cs-form .holder {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 15px;
        }

            .cs-lgn-box .cs-form .holder .input-holder {
                position: relative;
            }

                .cs-lgn-box .cs-form .holder .input-holder .input {
                    font-size: 14px;
                    padding: 16px 15px;
                    border-radius: 6px;
                    border: 1px solid #d6dce5;
                    width: 310px;
                    outline: none;
                }

                    .cs-lgn-box .cs-form .holder .input-holder .input:not(:placeholder-shown).input:not(:focus) + .placeholder {
                        transform: scale(.75) translateY(-39px) translateX(-5px);
                        color: #6c798d;
                        font-size: 13px;
                    }

                    .cs-lgn-box .cs-form .holder .input-holder .input:focus {
                        border-color: #0b369a;
                        font-size: 13px;
                    }

                        .cs-lgn-box .cs-form .holder .input-holder .input:focus + .placeholder {
                            transform: scale(.75) translateY(-29px) translateX(-5px);
                            color: #0b369a;
                        }

                .cs-lgn-box .cs-form .holder .input-holder .placeholder {
                    position: absolute;
                    top: 16px;
                    left: 8px;
                    pointer-events: none;
                    font-size: 14px;
                    padding: 0 8px;
                    background-color: white;
                    transition: transform 150ms cubic-bezier(0.4,0,0.2,1), opacity 150ms cubic-bezier(0.4,0,0.2,1);
                    color: #6c798d;
                }

.r-rm {
    display: flex;
    justify-content: space-between;
    padding: 0 37px 18px 37px;
}

    .r-rm .txt {
        font-size: 13px;
        color: #63656d;
    }

    .r-rm .chckbox input[type=checkbox] {
        width: 13px;
        height: 13px;
    }

    .r-rm .chckbox label {
        margin-bottom: 5px;
    }

    .r-rm a {
        color: #0b369a;
        text-decoration: none;
        font-weight: 550;        
    }

        .r-rm a:hover {
            text-decoration: none;
        }

        .lgn-btn {
            background-color: #008abf;
            background: linear-gradient(to right, rgba(0,117,189,1) 0%, rgba(1,194,194,1) 100%) !important;
            display: inline-block;
            padding: 14px 25px;
            width: 80%;
            text-align: center;
            border-radius: 6px;
            font-size: 16px;
            font-weight: bold;
            color: #fff;
            text-decoration: none;
        }

    .lgn-btn:hover {
        background: linear-gradient(to right, rgba(1,194,194,1) 0%, rgba(0,117,189,1) 100%) !important;
        text-decoration: none !important;
    }

.h-in-m {
    display: none;
}

.show-in-m {
    display: block;
}

.ftr {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 15px
}

    .ftr a {
        color: #fff;
        text-decoration: underline;
    }

        .ftr a:hover {
            color: #fff;
            text-decoration: none;
        }

    .ftr .ftr-contnr {
        display: flex;
        justify-content: space-between;
    }

        .ftr .ftr-contnr .txt {
            color: #fff;
            font-size: 12px;
        }

.cs-err:empty{
    border: none;
    display: block;
}

.cs-err{
    min-height: 20px;
}


@media (min-width:768px) {
    .cs-lgn-box {
        width: 420px;
    }

        .cs-lgn-box h3 {
            font-size: 30px;
        }

        .cs-lgn-box .cs-form .holder .input-holder .input {
            width: 330px;
        }
}