html,
body {
    height: 100%
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    overflow: hidden;
    font-family: 'VAG Rounded Next', sans-serif;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /*background-image: url(https://cdn.pixabay.com/photo/2016/04/05/11/04/nepal-1309205_960_720.jpg);*/
    opacity: 0.5; /* set the opacity to 50% */
    background-repeat: no-repeat;
    background-size: cover;
}

.shiftLeft {
    position: relative;
    left: -16px;
    display: contents;
}

.text-muted {
    color: #999 !important;
}

.alert {
    font-size: 12px !important;
}

.error {
    font-size: 14px;
    color: #f32a3c !important;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                     supported by Chrome and Opera */
}

.login-panel {
    width: 670px;
    border-radius: 10px;
    position: relative;
    z-index: 100;
    animation-duration: 1s;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

.circle-design {
    position: relative;
    height: 50px;
    margin-bottom: -50px;
}

.circle-design:before, .circle-design:after {
    content: "";
    position: absolute;
    /*background: #2876BD;*/
    background: #26C281;
    border-radius: 50%;
    z-index: 5;
}

.circle-design:before {
    width: 14px;
    height: 14px;
    top: 10px;
    left: 204px;
}

.circle-design:after {
    width: 50px;
    height: 50px;
    top: -30px;
    left: 220px;
}

.login-panel > .row {
    margin: 0;
}

.login-panel .col-left {
    background: linear-gradient(135deg, #e0ffe7 0%, #b5c327 60%, #26C281 100%);
    padding: 35px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.login-panel .col-right {
    /*background-color: #2876BD;*/
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    color: #fff;
    padding: 35px;
    font-size: 14px;
    line-height: 18px;
    /*background-image: url("https://images.unsplash.com/photo-1585409677983-0f6c41ca9c3b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80");*/
}

.login-panel .logo-sm {
    position: absolute;
    top: 15px;
    right: 15px;
}

.login-panel h4 {
    font-weight: 400;
    margin-bottom: 5px;
    /*color: #2876BD !important;*/
    color: #26C281 !important;
}

.login-panel .col-left p.text-muted {
    font-size: 14px;
}

.login-panel .form-container {
    min-height: 249px;
    display: flex;
    align-items: center;
}

.login-panel form {
    width: 100%;
}

.login-panel .md-form form-control:not(.browser-default):focus:not([readonly]) {
    /*border-color: #2876BD !important;*/
    border-color: #26C281 !important;
    /*box-shadow: 0 1px 0 0 #2876BD !important;*/
    box-shadow: 0 1px 0 0 #26C281 !important;
}

.login-panel .md-form {
    margin-top: 1.9rem;
    margin-bottom: 1.5rem;
}

.login-panel .md-form .form-control {
    color: #212529;
    padding: .7rem 0 .3rem;
}

.login-panel .select-wrapper input.select-dropdown {
    height: inherit;
    line-height: inherit;
}

.login-panel .md-form .form-control {
    border-color: #999 !important;
    transition: none !important;
}

.login-panel .md-form .material-icons {
    position: absolute;
    top: 8.5px;
    right: 0;
    /*color: #2876BD;*/
    color: #26C281;
    text-shadow: -2px 2px 3px #dfeedb;
}

.login-panel .md-form .visibility {
    cursor: pointer;
}

.dropdown-primary .dropdown-content li a, .dropdown-primary .dropdown-content li span:hover, .dropdown-primary .dropdown-content li.active {
    /*background-color: #2876BD !important;*/
    background-color: #26C281 !important;
}

.dropdown-content li > a, .dropdown-content li > span {
    color: #26C281;
}

.login-panel .md-form .form-control:hover {
    border-color: #26C281 !important;
    box-shadow: 0 1px 0 0 #26C281 !important;
}

.login-panel .md-form .form-control:focus ~ label {
    color: #26C281 !important;
}

.btn-login {
    background-color: #26C281 !important;
    margin: 0;
    padding: .7rem 2rem;
    border-radius: 4px;
}

.powered-by-text {
    position: absolute;
    bottom: 10px;
    right: 100px;
    font-size: 11px;
    line-height: 11px;
    text-align: center;
    background-color: whitesmoke;!important;
}


.login-panel .info-item {
    height: 307px;
    display: flex;
    display: -ms-flexbox !important;
    justify-content: center;
    align-items: center;
}

.login-panel .carousel-indicators li {
    width: .425rem;
    height: .425rem;
    margin-right: 5px;
    margin-left: 5px;
}


/*shapes*/
.shapes > * {
    position: absolute;
    z-index: 2;
}

.shapes .text {
    top: 0;
    left: 0;
    font-size: 100px;
    font-weight: bold;
    white-space: nowrap;
    width: 100%;
    text-align: center;
    color: #dfeedb;
    z-index: 1;
}

.shapes .shape1 {
    bottom: 5%;
    left: 45%;
}

.shapes .shape2 {
    top: -100px;
    right: 30px;
}

.shapes .shape3, .shapes .shape4 {
    color: #26C281;
}

.shapes .shape3 {
    top: 32%;
    left: 18%;
    font-size: 40px;
    -webkit-animation-name: wiggle;
    animation-name: wiggle;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.shapes .shape4 {
    bottom: 100px;
    right: 10%;
    -webkit-animation-name: wiggle;
    animation-name: wiggle;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}

@keyframes wiggle {
    0% {
        transform: translate(0);
    }
    25% {
        transform: translate(-2px, 0);
    }
    50% {
        transform: translate(1px, 0);
    }
    75% {
        transform: translate(-2px, 2px);
    }
    75% {
        transform: translate(0, -2px);
    }
}

@media (min-width: 768px) {
    body {
        background-color: #dfeedb;
    }

    .login-panel {
        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .25);
    }

    .circle-design {
        overflow: visible;
    }
}


@media (max-width: 767.99px) {
    .login-panel {
        width: 100%;
    }

    .btn-login {
        width: 100%;
        margin-top: 15px;
    }

    .powered-by-text {
        right: 35px;
    }

    .login-panel .col-right {
        display: none;
    }

    .shapes {
        display: none;
    }
}

.text-gradient, .login-panel h4, .shapes .shape3, .shapes .shape4, .powered-by-text,
.md-form label.active, .md-form .material-icons,
.dropdown-primary .dropdown-content li:not(.active) span {
    background-image: linear-gradient(142deg, #26C281 0%, #164A7B 92%);
    background-size: 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dropdown-primary .dropdown-content li:hover span {
    background-image: initial;
    background-size: initial;
    background-repeat: initial;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
}

.dropdown-content li.active, .dropdown-content li:hover {
    background: unset !important;
}

.login-panel .col-right, .btn-login, .circle-design:before, .circle-design:after,
.dropdown-primary .dropdown-content li a, .dropdown-primary .dropdown-content li span:hover, .dropdown-primary .dropdown-content li.active {
    /*background: linear-gradient(45deg, #7d5ff9 0%, #2876BD 92%) !important;*/
    background: linear-gradient(20deg, #b5c327 10%, #26C281 92%) !important;
}

.login-panel .md-form .material-icons {
    text-shadow: unset !important;
}

.background-video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}