:root {
    --Headblue: #6499E9;
    --buttoncolor: #4F709C;
    --ColorYellow: #f2bc08;
    --fontColor: #000;
    --whiteColor: #fff;
}

.fontcolor {
    color: var(--fontColor) !important;
}

.whiteColor {
    color: var(--whiteColor) !important;
    font-size: 20px;
}

.HeaderColor {
    background-color: var(--Headblue) !important
}

.goog-te-gadget-icon {
    display: none;
}


.goog-te-gadget-simple {
    background-color: #ecebf0 !important;
    border: 0 !important;
    font-size: 10pt;
    font-weight: 800;
    display: inline-block;
    padding: 10px 10px !important;
    cursor: pointer;
    zoom: 1;
}

    .goog-te-gadget-simple span {
        color: #3e3065 !important;
    }

.intro-section {
    /*  background-image: url(https://st.depositphotos.com/1630589/4148/v/600/depositphotos_41489573-stock-illustration-real-estate-background.jpg);*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 15px 40px;
    /*    min-height: 100vh;*/
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    color: #ffffff;
    background: #fdfbfbf2;
}

.brand-wrapper {
    display: flex;
}

.intro-title {
    color: black;
    font-weight: 700;
    padding-left: 15px;
    font-size: 34px;
    min-height: 90px;
    padding-top: 45px;
}

.brand-wrapper .logo {
    width: 120px;
}



.intro-content-wrapper {
    max-width: 100%;
}

    .intro-content-wrapper .intro-title {
        font-size: 40px;
        font-weight: bold;
        margin-bottom: 17px;
    }

    .intro-content-wrapper .intro-text {
        font-size: 19px;
        line-height: 1.37;
    }

    .intro-content-wrapper .btn-read-more {
        background-color: #fff;
        padding: 13px 30px;
        border-radius: 0;
        font-size: 16px;
        font-weight: bold;
        color: #000;
    }

        .intro-content-wrapper .btn-read-more:hover {
            background-color: transparent;
            border: 1px solid #fff;
            color: #fff;
        }



.intro-section-footer .footer-nav a {
    font-size: 20px;
    font-weight: bold;
    color: inherit;
}

@media (max-width: 767px) {
    .intro-section-footer .footer-nav a {
        font-size: 14px;
    }
}

.intro-section-footer .footer-nav a + a {
    margin-left: 30px;
}

.form-section {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding: 68px 40px;
    /* min-height: 100vh;*/
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    color: #ffffff;
    background: rgb(41 57 102 / 91%);
}


.login-wrapper {
    width: 300px;
    max-width: 100%;
}

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

.login-wrapper .form-control {
    border: 0;
    border-bottom: 1px solid #e7e7e7;
    border-radius: 0;
    font-size: 14px;
    font-weight: bold;
    padding: 15px 10px;
    margin-bottom: 7px;
}

    .login-wrapper .form-control::-webkit-input-placeholder {
        color: #b0adad;
    }

    .login-wrapper .form-control::-moz-placeholder {
        color: #b0adad;
    }

    .login-wrapper .form-control:-ms-input-placeholder {
        color: #b0adad;
    }

    .login-wrapper .form-control::-ms-input-placeholder {
        color: #b0adad;
    }

    .login-wrapper .form-control::placeholder {
        color: #b0adad;
    }

.login-title {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 30px;
}

.login-btn {
    padding: 13px 30px;
    background-color: #000;
    border-radius: 0;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}

    .login-btn:hover {
        border: 1px solid #000;
        background-color: transparent;
        color: #000;
    }

.forgot-password-link {
    font-size: 14px;
    color: #080808;
    text-decoration: underline;
}

.social-login-title {
    font-size: 15px;
    color: #919aa3;
    display: -webkit-box;
    display: flex;
    margin-bottom: 23px;
}

    .social-login-title::before, .social-login-title::after {
        content: "";
        background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#f4f4f4));
        background-image: linear-gradient(#f4f4f4, #f4f4f4);
        -webkit-box-flex: 1;
        flex-grow: 1;
        background-size: calc(100% - 20px) 1px;
        background-repeat: no-repeat;
    }

    .social-login-title::before {
        background-position: center left;
    }

    .social-login-title::after {
        background-position: center right;
    }

.social-login-links {
    text-align: center;
    margin-bottom: 32px;
}

.social-login-link img {
    width: 40px;
    height: 40px;
    -o-object-fit: contain;
    object-fit: contain;
}

.social-login-link + .socia-login-link {
    margin-left: 16px;
}

.login-wrapper-footer-text {
    font-size: 14px;
    text-align: center;
}

body {
    margin: 0;
    color: #6a6f8c;
    background: #c8c8c8;
}

*, :after, :before {
    box-sizing: border-box
}

.clearfix:after, .clearfix:before {
    content: '';
    display: table
}

.clearfix:after {
    clear: both;
    display: block
}

a {
    color: inherit;
    text-decoration: none
}

.login-wrap {
    width: 100%;
    margin-top: -25%;
    max-width: 600px;
    position: relative;
    /*    background: url(https://raw.githubusercontent.com/khadkamhn/day-01-login-form/master/img/bg.jpg) no-repeat center;*/
    /*   box-shadow: 0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);*/
    border-radius: 16px;
}

.login-html {
    width: 100%;
    height: 100%;
    padding: 0px 0px 0px 0px;
    /*   background: rgba(40,57,101,.9);*/
    border-radius: 16px;
    display: block;
    text-align: inherit;
}

    .login-html .sign-in-htm,
    .login-html .sign-up-htm {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        position: absolute;
        transform: rotateY(180deg);
        backface-visibility: hidden;
        transition: all .4s linear;
    }

    .login-html .sign-in,
    .login-html .sign-up,
    .login-form .group .check {
        display: none;
    }



    .login-html .tab {
        font-size: 22px;
        margin-right: 15px;
        padding-bottom: 5px;
        margin: 0 15px 35px 15px;
        display: inline-block;
        border-bottom: 2px solid transparent;
    }

    .login-html .sign-in:checked + .tab,
    .login-html .sign-up:checked + .tab {
        color: #fff;
        border-color: #1161ee;
        border: 1px solid white;
        padding: 6px;
        border-radius: 10px;
        border-radius: 10px;
        background: #bfd9ff;
        color: #403b27;
    }

.login-form {
    min-height: 345px;
    position: relative;
    perspective: 1000px;
    transform-style: preserve-3d;
}

    .login-form .group {
        margin-bottom: 15px;
    }

        .login-form .group .label,
        .login-form .group .input,
        .login-form .group .button {
            width: 100%;
            display: block;
        }

        .login-form .group .input,
        .login-form .group .button {
            border: none;
            padding: 10px 15px;
            border-radius: 8px;
            /*  background: rgba(255,255,255,.1);*/
            background: #fff;
            font-size: 18px;
            opacity: 1;
            color: black;
        }

        .login-form .group input[data-type="password"] {
            text-security: circle;
            -webkit-text-security: circle;
        }

        .login-form .group .label {
            color: white;
            font-size: 20px;
            text-align: left;
        }

        .login-form .group .button {
            /* background: #1161ee;
            color: white;*/
            background: #f2bc08;
            color: #0d0101;
            font-weight: 600;
        }

        .login-form .group label .icon {
            width: 15px;
            height: 15px;
            border-radius: 2px;
            position: relative;
            display: inline-block;
            background: rgba(255,255,255,.1);
        }

            .login-form .group label .icon:before,
            .login-form .group label .icon:after {
                content: '';
                width: 10px;
                height: 2px;
                background: #fff;
                position: absolute;
                transition: all .2s ease-in-out 0s;
            }

            .login-form .group label .icon:before {
                left: 3px;
                width: 5px;
                bottom: 6px;
                transform: scale(0) rotate(0);
            }

            .login-form .group label .icon:after {
                top: 6px;
                right: 0;
                transform: scale(0) rotate(0);
            }

        .login-form .group .check:checked + label {
            color: #fff;
        }

            .login-form .group .check:checked + label .icon {
                background: #1161ee;
            }

                .login-form .group .check:checked + label .icon:before {
                    transform: scale(1) rotate(45deg);
                }

                .login-form .group .check:checked + label .icon:after {
                    transform: scale(1) rotate(-45deg);
                }

.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm {
    transform: rotate(0);
}

.login-html .sign-up:checked + .tab + .login-form .sign-up-htm {
    transform: rotate(0);
}

.hr {
    height: 2px;
    margin: 15px 0 15px 0;
    background: rgba(255,255,255,.2);
}

.foot-lnk {
    text-align: center;
    font-size: 22px;
}

li {
    padding-bottom: 30px;
    font-size: 20px;
}

    li a {
        background: #1161ee;
        padding: 15px;
        border-radius: 12px;
        min-width: 320px;
        display: block;
    }

        li a:hover {
            background: #2a3864;
            padding: 15px;
            border-radius: 12px;
            color: white;
        }

.az-signup-wrapper {
    /* background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%) !important;*/
    background: url(https://wgrs.works.haryana.gov.in/Content/Home/assets/img/hero-bg.jpg);
}

.btn-primary {
    background: #1161ee;
    background: #1161ee;
    text-align: inherit;
    font-size: 20px;
    padding: 15px;
    border-radius: 0px;
    background: linear-gradient(90deg, #2a3864 10%, #444021 10%);
    background-image: linear-gradient(90deg, #09203f 10%, #537895 10%);
    background-image: linear-gradient(90deg, #f2bc08 9%, #394867 9%);
    border-color: #f6f6f7;
}

    .btn-primary:hover {
        background: #2a3864;
    }

.fa {
    color: #394867;
    margin-right: 50px;
}

.btn-primary:hover .fa {
    color: white;
}

.companyname {
    font-size: 25px;
    font-weight: 800;
    /*       border-bottom: 1px solid;
        padding-bottom: 8px;*/
    margin-bottom: 20px;
    margin-top: 15px;
    min-height: 80px;
}

.k-dropdown .k-state-default {
    border-color: transparent;
    background-position: 50% 50%;
    background-color: transparent;
    border-radius: 10px;
}

ul {
    /*columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;*/
    list-style: none;
    padding: 15px;
}

.card-title {
    font-size: 24px;
}

.card {
    border-radius: 10px !important;
}

.card-body {
    border: 1px solid #edd8d8;
    z-index: 9;
}

#scroll-container {
    /*  border: 3px solid black;
    border-radius: 5px;*/
    /*   height: 100px;*/
    overflow: hidden;
}

#scroll-text {
    height: 100%;
    text-align: center;
    /* animation properties */
    -moz-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -moz-animation: my-animation 10s linear infinite;
    -webkit-animation: my-animation 10s linear infinite;
    animation: my-animation 10s linear infinite;
    color: black !important;
    text-align: left;
}

    #scroll-text span {
        padding-bottom: 10px;
        border-bottom: 1px solid grey;
        padding-top: 10px;
    }

.scrolldiv:hover #scroll-text {
    animation-play-state: paused;
}
/* for Firefox */
@-moz-keyframes my-animation {
    from {
        -moz-transform: translateY(100%);
    }

    to {
        -moz-transform: translateY(-100%);
    }
}

/* for Chrome */
@-webkit-keyframes my-animation {
    from {
        -webkit-transform: translateY(100%);
    }

    to {
        -webkit-transform: translateY(-100%);
    }
}

@keyframes my-animation {
    from {
        -moz-transform: translateY(100%);
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }

    to {
        -moz-transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}

.Notificationdiv {
    color: black;
    text-align: center;
}

.Notificationp {
    padding-top: 4%;
    -moz-animation: marquee 5s linear infinite;
    -webkit-animation: marquee 5s linear infinite;
    animation: marquee 5s linear infinite;
    text-align: initial;
    border-bottom: 1px solid #edd8d8;
    font-size: 18px;
}

@-moz-keyframes marquee {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(0, -80%);
    }
}

@-webkit-keyframes marquee {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(0, -80%);
    }
}

@keyframes marquee {
    0% {
        -moz-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    100% {
        -moz-transform: translate(0, -100%);
        -webkit-transform: translate(0, -100%);
        transform: translate(0, -80%);
    }
}

.footerContent {
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 1;
}

.footerLink a {
    color: white;
    font-size: 18px;
}

body {
    font-family: "Poppins", Arial, sans-serif;
}

.highresolution {
    POSITION: absolute;
    right: 0;
    z-index: 2;
}

.half-a-border-on-top {
    border-top: 1px solid;
    border-image: linear-gradient(to right, #000 50%, transparent 50%) 100% 1;
}

i span {
    /*  border-left: 2px solid white;
        height: 60px;
        position: absolute;
        left: 12%;
        top: 0px;*/
    margin-left: 6px;
}

i {
    margin-right: 12px;
}

.toggle {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    width: 200px;
    height: 40px;
    color: white;
    outline: 0;
    text-decoration: none;
    border-radius: 500px;
    border: 2px solid #f7f6f7;
    background-color: #263238;
    transition: all 500ms;
}

    .toggle:active {
        background-color: #1c2429;
    }

    .toggle:hover:not(.toggle--moving):after {
        background-color: #455a64;
    }

    .toggle:after {
        display: block;
        position: absolute;
        top: 4px;
        bottom: 4px;
        left: 4px;
        width: calc(50% - 4px);
        line-height: 25px;
        text-align: center;
        text-transform: uppercase;
        font-size: 15px;
        color: white;
        background-color: #37474f;
        border: 2px solid;
        transition: all 500ms;
    }

.toggle--on:after {
    content: "ENGLISH";
    border-radius: 50px 5px 5px 50px;
    color: #f6f5f6;
}

.toggle--on:before {
    content: "हिन्दी";
    border-radius: 50px 5px 5px 50px;
    color: #f6f5f6;
    padding-left: 130px;
    font-size: 18px;
    line-height: 38px;
}

.toggle--off:after {
    content: "हिन्दी";
    border-radius: 5px 50px 50px 5px;
    transform: translate(100%, 0);
    color: #f6f5f6;
}

.toggle--off:before {
    content: "English";
    border-radius: 5px 50px 50px 5px;
    transform: translate(100%, 0);
    color: #f6f5f6;
    font-size: 18px;
    padding-left: 20px;
    padding-top: 25px;
    margin-top: 23px;
    line-height: 34px;
}

.toggle--moving {
    background-color: #1c2429;
}

    .toggle--moving:after {
        color: transparent;
        border-color: #435862;
        background-color: #222c31;
        transition: color 0s, transform 500ms, border-radius 500ms, background-color 500ms;
    }

#google_translate_element2 {
    display: none !important;
}

input[type="radio"] {
    opacity: 0;
    width: 100%;
    height: 42px;
    background-color: blue;
    position: relative;
    z-index: 1
}

group {
    display: flex;
    margin-bottom: 20px;
}

.input-container {
    height: 42px;
    width: 100%;
    line-height: 42px;
    text-align: center;
    position: relative;
}

input[type=radio] {
    opacity: 0;
    width: 100%;
    height: 42px;
    background-color: blue;
    position: relative;
    z-index: 1;
}

.input-container:first-child label {
    border-radius: 5px 0 0 5px;
    border: none;
}

.input-container:nth-child(2) label {
    border-radius: 5px 0 0 5px;
}

.radiolabel {
    width: 100%;
    height: 100%;
    position: absolute;
    border: 2px solid #faf9f9;
    border-right: inherit;
    top: 0;
    left: 0;
    color: #ffffff;
    font-size: 18px;
}

input:checked + .radiolabel {
    background-color: #faf9f9;
    top: 0;
    left: 0;
    border: 2px solid #faf9f9 !important;
    z-index: 2;
    font-size: 18px;
    color: #212a3e;
}

.input-container:last-child .radiolabel {
    border-radius: 0 5px 5px 0;
    border-right: 2px solid #CCC;
}

.en {
    display: none;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
    background: #2a3864 !important;
    color: white !important;
}

.button_lang {
    cursor: pointer;
    background-color: #777;
    color: #FFF;
    padding: 8px 20px;
    border-radius: 5px;
    -webkit-transition: background-color .3s ease-in-out;
    -moz-transition: background-color .3s ease-in-out;
    -o-transition: background-color .3s ease-in-out;
    -ms-transition: background-color .3s ease-in-out;
    transition: background-color .3s ease-in-out;
}

    .button_lang:hover, .current_lang {
        background-color: #33c02e;
        -webkit-transition: background-color .3s ease-in-out;
        -moz-transition: background-color .3s ease-in-out;
        -o-transition: background-color .3s ease-in-out;
        -ms-transition: background-color .3s ease-in-out;
        transition: background-color .3s ease-in-out;
    }

ul li {
    width: auto;
    display: block;
}

.social {
    position: absolute;
    right: 0;
    z-index: 2;
    display: flex;
}

.brand-wrapper {
    padding-bottom: 30px;
}

.coloryellow {
    color: #fec401;
    font-size: 22px !important;
}

.click:hover {
    color: #fec401;
}

.radiodrop {
    padding: 0px !important;
}

.error {
    color: #f2bc08;
    font-size: large;
}

.success {
    color: #10ee10;
    font-size: large;
}

.footercontent {
    font-size: 16px;
    color: #283865;
    font-weight: 800;
}

li {
    font-size: 16px;
}

.btn-primary:hover {
    color: white;
}

@media only screen and (max-width : 1600px) {
    .btn-primary {
        background-image: linear-gradient(90deg, #f2bc08 0%, #394867 0%);
    }

    .fa {
        color: white;
        margin-right: 10px;
    }
}

@media (max-width: 991px) {
    .intro-section {
        padding-left: 50px;
        padding-rigth: 50px;
    }
}



@media (max-width: 575px) {
    .intro-section {
        min-height: auto;
    }

    .Notificationp {
        padding-top: 25%;
    }
}

@media screen and (max-width: 768px) {
    .footercontent {
        color: white;
    }

    intro-section {
        min-height: auto;
    }

    .Notificationp {
        padding-top: 25%;
    }
}

@media screen and (max-width: 1024px) {
    .footercontent {
        color: white;
    }

    intro-section {
        min-height: auto;
    }
}

@media screen and (max-width: 1200px) {
    .footercontent {
        color: white;
    }

    intro-section {
        min-height: auto;
    }

    .btn-primary {
        background: #2a3864;
        border-color: #f6f6f7;
    }
}

@media (max-width: 767px) {
    .intro-section {
        padding: 60px 0px 10px 10px;
    }

    .Notificationp {
        padding-top: 25%;
    }

    .intro-title {
        margin-top: 30px;
    }

    .intro-content-wrapper {
        margin-top: 0px !important;
    }

    .brand-wrapper {
        padding-bottom: 0px;
    }

    .fa {
        color: #f9f8f8;
        margin-right: 0px;
    }

    .contentdiv {
        padding: 0px 3px 0px 5px;
    }

    .btn-primary {
        background-image: linear-gradient(90deg, #394867 9%, #394867 9%);
    }

    .intro-section-footer {
        margin-top: 35px;
    }

    .form-section {
        padding: 0px;
    }

    .login-wrap {
        min-height: 1110px;
        margin-top: 20px;
    }

    group {
        display: block;
    }

    .footercontent {
        color: white;
    }

    .foot-lnk {
        color: #f9c204;
    }

    .login-html .sign-in-htm, .login-html .sign-up-htm {
        padding: 15px;
    }

    .selectmc {
        margin-bottom: 10px;
    }

    .login-html .tab {
        margin: 0px 15px 6px 15px;
    }

    .footercontent {
        color: white;
    }
}