body {
            animation: image 15s infinite alternate;
            font-family: 'Roboto Condensed', sans-serif;
        }
        @keyframes image {
            0% {
                background-image:  url(../img/bg1.jpg);
            }

            25% {
                background-image: url(../img/bg2.jpg);
            }

            50% {
                background-image: url(../img/bg3.jpg);
            }

             75% {
                background-image: url(../img/bg1.jpg);
            }

            100% {
                background-image: url(../img/bg2.jpg);
            }
        }
        .login-box {
            background: rgba(255,255,255,0.7);
            border-radius: 30px;
        }
        .login-title {
            font-family: 'Noto Serif', serif;
            color: #ffffff;
        }

        .title-text {
            font-size: 20px;
            color: #1d536e;
            margin: 15px 0;
        }

        .form-group {
            position: relative;
            margin-top: 30px;
        }

        .form-control {
            display: block;
            width: 100%;
            border-radius: 0;
            font-size: 14pt;
            border: none;
            border-bottom: 1px solid #ccc;
        }

            .form-control:focus {
                outline: none;
            }

        /*label {
            position: absolute;
            top: 10px;
            left: 5px;
            color: #999;
            font-size: 14pt;
            font-weight: normal;
            pointer-events: none;
            transition: all 0.2s ease;
        }*/

        .form-control:focus ~ label,
        .form-control:valid ~ label {
            top: -25px;
            font-size: 12pt;
            color: #263ea3;
        }

        .bar {
            display: block;
            position: relative;
            width: 100%;
        }

            .bar:before,
            .bar:after {
                content: "";
                height: 2px;
                width: 0;
                bottom: 1px;
                position: absolute;
                background: #5264AE;
                transition: all 0.2s ease;
            }

            .bar:before {
                left: 0%;
            }

            .bar:after {
                right: 0%;
            }

        .form-control:focus ~ .bar:before,
        TextBox:focus ~ .bar:after {
            width: 100%;
        }

        .form-control:focus, .form-select:focus{
            border-color: none;
            border-radius: 0;
            box-shadow: none;
        }
        .form-label{
            font-size: 12pt;
            color: #263ea3;
            padding-left: 5px;
        }
        .btn {
            background: #3c81a9;
            border: none !important;
            color: #fff;
            font: 500 1rem sans-serif;
            padding: 1rem 0rem;
            width: 25%;
            border-radius: 0;
            /* margin: auto; */
            position: relative;
            cursor: pointer;
            margin: 1rem 37.5%;
        }
        .btn-animation {
            border: 2px solid #fbbf24;
            outline: 2px solid #fff;
            transition: outline-offset 200ms ease;
        }
            .btn-animation:hover {
                outline: 2px solid #ffe000;
                outline-offset: -6px;
                color: #ffe000;
            }