﻿body {
    color: #080d1a;
    font-size: 14px;
    background-color: #f5f5f5;
    font-weight: normal;
}

    body:before {
        width: 100%;
        height: 100%;
        content: '';
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-size: cover;
        background-image: url(../img/analytics33.png);
        background-attachment: fixed;
        z-index: -1;
        animation: zoominout 5s infinite linear;
    }

@media screen and (max-width:767px) {
    body {
        font-size: 12px;
    }
}

@media screen and (min-width:1440px) {
    body {
        font-size: 16px;
    }
}

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #9ea1a6;
    cursor: pointer;
}

.btn-primary {
    background: linear-gradient(to right bottom,#4b4c6a 0%,#4b4c6a 100%);
    border: 0;
}

    .btn-primary:hover {
        color: #fff;
        background: linear-gradient(to right bottom,#848dad 0%,#4b4c6a 100%);
    }

.btn-generateotp {
    background-color: #414141;
    color: #fff;
}

    .btn-generateotp:hover {
        color: #fff;
        background: #4b4c6a;
    }

.btn-startover {
    background-color: #4d3293;
    color: #fff;
}

    .btn-startover:hover {
        color: #fff;
        background: #8051ff;
    }

.text-primary {
    color: #565758 !important;
}

.btn {
    font-size: 14px;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

@media screen and (min-width:1440px) {
    .btn {
        font-size: 16px;
    }
}

.btn.btn-link {
    color: #9ea1a6;
    text-decoration: none;
}

.btn.btn-theme {
    background: linear-gradient(45deg,#565758,#9ea1a6);
    border: 0;
    color: #fff;
}

.btn.btn-outline-primary {
    color: #565758;
    border-color: #565758 !important;
}

.no-arrow .dropdown-toggle:before, .no-arrow .dropdown-toggle:after {
    display: none;
}

header {
    background: linear-gradient(45deg,#565758,#9ea1a6);
}

@media screen and (min-width:576px) {
    header .header-slide {
        text-wrap: nowrap;
    }
}

header .navbar-brand img {
    max-height: 40px;
    filter: brightness(0) invert(1);
}

header .header-wave {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg,rgba(255,255,255,0) 2.2%,#d7d7d7 2.2%);
    padding-left: 25px;
}

    header .header-wave::before {
        content: "";
        position: absolute;
        background: url(../img/header-shape.png) left top;
        background-size: 100% 100%;
        width: 100px;
        height: 100px;
        left: -15px;
        top: -7px;
        z-index: 1;
    }

header .header-slide i {
    color: #9ea1a6;
    transform: rotate(90deg);
    display: inline-block;
}

.login-input .input-group-text {
    background-color: #4b4c6a !important;
    border-right: 0;
    font-size: 1.5rem;
    padding: 0;
    padding-left: .5rem;
    padding-right: 1px;
}

.login-input .form-control {
    border-left: 0;
}

.btn-gap {
    position: relative;
    color: #565758;
}

    .btn-gap::before, .btn-gap::after {
        content: "";
        background-color: #ddd;
        height: 3px;
        width: 40%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 100%;
    }

    .btn-gap::before {
        left: calc(50% + 25px);
    }

    .btn-gap::after {
        right: calc(50% + 25px);
    }

main .form-bg {
    padding: 5px;
    overflow: hidden;
}

main .form {
    padding: 1rem;
    position: relative;
}

    main .form::before {
        content: '';
        position: absolute;
        left: 0%;
        top: 0%;
        background: linear-gradient(45deg,#565758,#9ea1a6,#414141,#4d3293,#4b4c6a);
        width: calc(100% + 0);
        height: calc(100% + 0);
        z-index: -1;
        filter: blur(10px);
        animation: roll 20s infinite linear;
    }

@media screen and (min-width:576px) {
    main .form {
        padding: 2rem;
    }
}

/*.login-box {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-image: url(../img/loginbgnew3.png);
    min-height: 750px;
}

.login-box-body {
    width: 40%;
    margin-top: 103px;
    min-height: 400px;
}*/
.login-box {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-image: url(../img/loginbgnew3.png);
    min-height: 830px;
}

.login-box-body {
    width: 40%;
    margin-top: 103px;
    min-height: 400px;
}
.carousel-control-next, .carousel-control-prev {
    width: 16px;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    width: 1rem;
    height: 2rem;
    background-color: #000;
}

.menu-bg .menu {
    border-radius: 0;
    transition: .5s ease;
    background-color: #fff !important;
}

    .menu-bg .menu:hover {
        transform: scale(1.1);
    }

    .menu-bg .menu:first-child {
        border-radius: 50rem 0 0 50rem;
    }

    .menu-bg .menu:last-child {
        border-radius: 0 50rem 50rem 0;
    }

@keyframes roll {
    0%,100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(360deg);
    }
}

@keyframes zoominout {
    0%,100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.marquee {
    font-size: 1.1vw;
    color: #333;
    height: 2.5vw !important;
    overflow: hidden;
    font-weight: 500;
    position: relative;
    padding: 5px;
}

    .marquee div {
        display: block;
        width: 200%;
        position: absolute;
        overflow: hidden;
        animation: marquee 12s linear infinite;
    }

    .marquee span {
        float: left;
        width: 50%;
    }

@keyframes marquee {
    0% {
        left: 0;
    }

    100% {
        left: -100%;
    }
}

.form-check-input:checked {
    background-color: #ff0082;
    border-color: #ff0082;
}

.text-pink {
    color: #ff0082;
}
@media screen and (max-width: 1366px) {
    .login-box {
        min-height: 540px;
    }


    .header .header-wave::before {
        left: -20px !important;
    }
}

.footer {
    background: rgb(58 58 58/.8);
    color: #a1a4a9;
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    padding: 1px 0;
}

    .footer img {
        filter: invert(1);
    }