﻿.sk-spinner-wave.sk-spinner {
    font-size: 10px;
    height: 30px;
    margin: 20px auto;
    text-align: center;
    width: 50px;
}

.spinner_layout div {
    margin-left: 4px;
}

.sk-spinner-wave div {
    animation: 1.2s ease-in-out 0s normal none infinite running sk-waveStretchDelay;
    background-color: rgb(224,19,35);
    display: inline-block;
    height: 100%;
    width: 6px;
}

.sk-spinner-wave .sk-rect2 {
    animation-delay: -1.1s;
}

.sk-spinner-wave .sk-rect3 {
    animation-delay: -1s;
}

.sk-spinner-wave .sk-rect4 {
    animation-delay: -0.9s;
}

.sk-spinner-wave .sk-rect5 {
    animation-delay: -0.8s;
}


@-webkit-keyframes sk-waveStretchDelay {
    0%, 40%, 100% {
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0.4);
    }

    20% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}

@keyframes sk-waveStretchDelay {
    0%, 40%, 100% {
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0.4);
    }

    20% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}


.containerRdo {
    position: relative;
    display: inline-block;
    padding-left: 30px;
    margin-bottom: -5px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default radio button */
    .containerRdo input {
        position: absolute;
        opacity: 0 !important;
        cursor: default;
    }

/* Create a custom radio button */
.checkmarkRdo {
    position: absolute;
    top: 0;
    left: 0;
    height: 23px;
    width: 23px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.containerRdo:hover input ~ .checkmarkRdo {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.containerRdo input:checked ~ .checkmarkRdo {
    background-color: black;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmarkRdo:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.containerRdo input:checked ~ .checkmarkRdo:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.containerRdo .checkmarkRdo:after {
    top: 7px;
    left: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}


/* The container */
.containerChk {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: -5px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default checkbox */
    .containerChk input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

/* Create a custom checkbox */
.checkmarkChk {
    position: absolute;
    top: 0;
    left: 0;
    height: 23px;
    width: 23px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.containerChk:hover input ~ .checkmarkChk {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.containerChk input:checked ~ .checkmarkChk {
    background-color: black;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmarkChk:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.containerChk input:checked ~ .checkmarkChk:after {
    display: block;
}

/* Style the checkmark/indicator */
.containerChk .checkmarkChk:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*login page css start*/

body {
    font-family: 'Roboto', Arial, Tahoma, sans-serif !important;
}

.font17bold {
    font-size: 16px !important;
    font-weight: bold !important;
}

.Text-GreenColor {
    color: #008000 !important;
}

.sortable-moves {
    cursor: move;
    margin-bottom: 0;
    -webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.14);
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.14);
    margin-bottom: 20px;
    padding: 15px 0 15px 60px
}

section {
    margin-top: 40px;
}

    section:last-of-type {
        margin-bottom: 40px;
    }

.bsk-container {
}

.x-icon {
    height: 1em;
    width: 1em;
    top: .125em;
    position: relative;
}

.x-alt {
    color: #777;
}

.login_header {
    z-index: 1;
}

.login-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    bottom: 0px;
    width: 50%;
    right: 15px;
    background-color: rgba(0,0,0,0.4);
    padding: 10px 50px;
    height: 100vh;
}

    .login-footer ul {
        margin: 0;
        padding: 0;
    }

        .login-footer ul li {
            color: #FFF;
            font-size: 18px;
            line-height: 40px;
            list-style-type: none;
        }

            .login-footer ul li::before {
                color: #F91838;
                font-size: 28px;
                content: "\2022";
                line-height: 38px;
                font-weight: bold;
                margin-right: 10px;
                display: inline-block;
                vertical-align: middle;
            }

.subtext-p {
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
}

.login-footer .separator {
    color: #F91838;
}
/*login page css end*/


/*register css start*/

.Sign-up-form h1 {
    text-align: center;
    color: #000;
}

.Sign-up-form {
    padding-top: 70px;
}

    .Sign-up-form p {
        text-align: center;
        color: #666;
        font-family: "Roboto", sans-serif;
    }

    .Sign-up-form .btn-enterprise {
        width: 100%;
        background-color: #ED1429;
        padding: 10px 20px;
        display: inline-block;
        cursor: pointer;
        color: #fff;
        font-size: 15px;
        line-height: 20px;
        text-transform: uppercase;
        height: 40px;
    }

    .Sign-up-form ul#role_selection {
        list-style-type: none;
        text-align: center;
    }

    .Sign-up-form a:focus, a:hover {
        text-decoration: none !important;
    }

    .Sign-up-form .header-text {
        padding: 20px 0px;
        margin-bottom: 20px;
    }

    .Sign-up-form .sign-in-text {
        margin-top: 10px;
        padding-top: 30px;
        border-top: 1px solid #ed1426;
        text-align: center;
    }

    .Sign-up-form .button-section {
        margin-top: 30px;
        padding-top: 10px;
    }

    .Sign-up-form img {
        margin: 0 auto;
        display: table;
    }

header {
    background-color: black;
    padding: 10px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 9;
}

a.header-btn {
    float: right;
    color: #fff;
    margin: 0px 20px;
}

.footer {
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 7px 3px 9px #a59b9b;
    padding: 10px 20px;
    /*height: 110px;*/
}

.height50 {
    height: 50px;
    width: auto !important;
}

a.register-box {
    float: left;
    width: 100%;
    text-align: center;
    background: #5F5F5F;
    color: #fff;
    position: relative;
    transition: .3s all ease;
    text-decoration: none;
    border-radius: 2px;
    font-family: 'Barlow';
    height: 100%;
    max-height: 200px;
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 10px 0px;
}

.register-box h2 {
    font-family: 'Barlow';
    font-weight: 500;
    line-height: 44px;
    margin: 0px;
    text-transform: uppercase;
}

a.register-box:hover h2 {
    display: none;
}

a.register-box:focus {
    color: #fff;
}

a.register-box p {
    margin: 0 20px;
}

a.register-box:hover {
    background: #000;
    color: #fff;
    width: 100%;
    padding: 20px;
}

a.register-box .p1 {
    display: block;
}

a.register-box:hover .p1 {
    display: none;
}

a.register-box .p2 {
    display: none;
}

a.register-box:hover .p2 {
    display: block;
    color: #fff;
    text-align: left;
    font-size: 18px;
    line-height: 30px;
    font-family: 'Barlow';
}

.separator {
    color: #ed1426;
}

.subtext-p {
    font-size: 15px;
    font-weight: bold;
    color: #000 !important;
}

    .subtext-p span {
        font-weight: bold;
        font-size: 16px;
        padding: 3px;
    }

.product-offering-title {
    font-size: 26px;
    line-height: 26px;
    text-align: left !important;
}

.product-offering-div {
    margin-top: 35px;
}

/*.action-button {
    width: 100px;
    background: #ed1426;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 0px 0px;
    margin: 0px 10px 0px 0px;
    float: right;
    text-transform: uppercase;
    height: 46px;
    line-height: 24px;
    font-size: 16px;
}*/

    /*.action-button:hover, .action-button:focus {
        background-color: black !important;
        color: white;
    }*/

.product-offering-desc-div {
    margin-top: 20px;
}

.product-offering-subtitle {
    font-size: 17px;
    font-weight: bold;
    color: #000 !important;
    text-align: left !important;
}

.product-offering-desc {
    text-align: justify !important;
}

span.error {
    font-size: 12px;
    display: block;
    margin-top: 5px;
    font-weight: normal;
    color: #F44336;
}

.register-dropdown .bootstrap-select.btn-group .dropdown-toggle .filter-option {
    top: 0px;
    font-size: 14px;
    margin-left: 3px;
    position: relative;
}

.register-dropdown .dropdown-menu > li > a {
    padding: 7px 15px !important;
}

.register-dropdown .bootstrap-select.btn-group .dropdown-toggle .caret {
    right: -2px;
    margin-top: 1px;
}

::-webkit-scrollbar {
    width: 10px;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #999999;
    border-radius: 7px;
}

.sign-in-text .anchor {
    color: #428bca;
    text-decoration: none;
}

/*register css end*/

/*Customer Sign sup css start*/
/*.customer-wizard {
    overflow-y: auto !important;
}*/

    .customer-wizard #msform {
        position: relative;
        margin-bottom: 0 !important;
    }

        /*.customer-wizard #msform .action-button:hover, #msform .action-button:focus {
            background-color: black !important;
            color: white;
        }*/

.header-btn:hover, header-btn:focus {
    color: #ed1426;
    text-decoration: none;
}

.sign-in-text a {
    color: #ed1426;
}

.customer-wizard #msform fieldset {
    /*background: white;
    border: 0 none;
    border-radius: 0.5rem;
    box-sizing: border-box;
    width: 100%;*/
    margin: 0;
    padding-bottom: 20px;
    position: relative
}

.customer-wizard .form-card {
    text-align: left
}

.customer-wizard #msform fieldset:not(:first-of-type) {
    display: none
}

/*.customer-wizard .sign-up-form input[type=text], textarea {
    border-left: none;
    padding: 8px 15px 8px 15px;
    border: 1px solid #AEAEAE;
    margin-top: 2px;
    width: 100%;
    color: #2C3E50;
    background-color: transparent;
    font-size: 16px;
}

.customer-wizard #msform select {
    border-left: none;
    padding: 8px 15px 8px 15px;
    border-bottom: 1px solid #ccc;
    margin-top: 2px;
    width: 100%;
    color: #2C3E50;
    background-color: transparent;
    font-size: 16px;
    letter-spacing: 1px;
    border-top: none;
    border-right: none;
}*/

.customer-wizard .sign-up-form {
    padding: 0px 40px 30px;
    border-left: 1px solid #eeeeee;
}


.customer-wizard #msform .action-button {
    float: right;
    /*width: 100px;
    background: #ed1426;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 0px 10px 5px;
    text-transform: uppercase;*/
}

    /*.customer-wizard #msform .action-button:hover,
    #msform .action-button:focus {
        background-color: black !important;
        color: white;
    }*/

.customer-wizard #msform .action-button-previous {
    float: right;
    /*width: 100px;
    background: #000;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px 10px 0px;
    text-transform: uppercase;*/
}

   /* .customer-wizard #msform .action-button-previous:hover,
    #msform .action-button-previous:focus {
        background-color: #000000
    }*/

.customer-wizard .card {
    z-index: 0;
    border: none;
    position: relative
}

.customer-wizard .fs-title {
    font-size: 30px;
    font-weight: 500;
    color: #333;
    line-height: 35px;
    margin-bottom: 30px;
    margin-top: 15px;
    text-align: center;
}


.customer-wizard p {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 30px;
    padding: 0px 20px;
}

.customer-wizard .fieldlabels {
    color: black;
    text-align: left;
}

.customer-wizard #progressbar {
    overflow: hidden;
    color: lightgrey;
    margin-bottom: 0px;
}

    .customer-wizard #progressbar .active {
        color: #ed1426;
    }

    .customer-wizard #progressbar li {
        list-style-type: none;
        font-size: 15px;
        width: 25%;
        float: left;
        position: relative;
        font-weight: 400
    }

.customer-wizard .progress {
    height: 10px !important;
}

.customer-wizard .progress-bar {
    background-color: #ed1426 !important;
}

.customer-wizard .signup-btn {
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 7px 3px 9px #a59b9b;
    padding: 10px 20px;
}

.customer-wizard h2.form-text {
    text-align: center;
    margin-bottom: 50px;
    font-size: 35px;
    font-weight: 600;
}

.customer-wizard p.sign-in-text {
    text-align: center;
    margin-top: 40px;
}

.customer-wizard {
    margin-top: 70px;
}

a.header-btn {
    float: right;
    color: #fff;
    margin: 0px 20px;
}

.height50 {
    height: 50px;
    width: auto !important;
}

.customer-wizard-footer {
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 7px 3px 9px #a59b9b;
    padding: 10px 20px;
    height: 80px;
    line-height: 60px
}

.ui-autocomplete {
    max-height: 400px;
    overflow-y: auto
}

.spinner {
    background: url('/Content/images/please-wait.gif') no-repeat 98% center;
    background-size: 50px 50px;
}

.previous-new {
    float: left !important;
   /* padding-left: 16px !important;
    background: #000000 !important;*/
}

    /*.previous-new:hover, .previous-new:focus {
        background-color: #000000 !important;
        text-decoration: none !important;
    }*/

.d-flex {
    display: flex;
}

.login_section {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: end;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: top right;
    background-image: url('../../images/login_bg_right.jpg');
    background-size: 360px 100%;
}

    .login_section .login_page_box {
        margin: auto 0;
        padding-left: 135px;
        padding-right: 135px;
    }

    .login_section .login_box {
        z-index: 1;
        border-radius: 15px;
        padding: 35px 30px;
        background-color: #FFF;
    }

        .login_section .login_box .logo {
            width: 140px;
            margin: 0px auto 30px;
        }

        .login_section .login_box h4 {
            margin-top: 0;
            font-size: 18px;
            font-weight: 400;
            text-align: center;
            margin-bottom: 25px;
        }

        .login_section .login_box h5 {
            margin: 15px 0;
            font-size: 12px;
            line-height: 16px;
            font-weight: 600;
        }

        .login_section .login_box h4 span {
            color: #F91838;
        }

        .login_section .login_box .input-group .form-line {
            border-bottom: none;
        }

        .login_section .login_box .input-group {
            margin-bottom: 10px;
        }

            .login_section .login_box .input-group:nth-child(2) {
                margin-bottom: 0;
            }

            .login_section .login_box .input-group .form-control {
                border: 1px solid #AEAEAE;
                padding: 9px 15px !important;
                font-size: 12px;
                font-weight: 300;
                height: 35px;
                color: #000;
            }

                .login_section .login_box .input-group .form-control::placeholder {
                    color: #000;
                }

        .login_section .login_box .forgot_password_text {
            font-size: 12px;
        }

            .login_section .login_box .forgot_password_text a {
                color: #EE3340;
            }

        .login_section .login_box .get_started_text {
            font-size: 12px;
            font-weight: 400;
            line-height: 16px;
            text-align: center;
        }

            .login_section .login_box .get_started_text a {
                color: #EE3340;
            }

        .login_section .login_box .signin_microsoft {
            color: #333;
            display: flex;
            font-size: 12px;
            grid-gap: 0.5rem;
            font-weight: 600;
            line-height: 16px;
            font-weight: bold;
            padding: 9px 16px;
            border-radius: 7px;
            align-items: center;
            background-color: #FFF;
            justify-content: center;
            text-transform: uppercase;
            border: 1px solid #EBEBEB;
            transition: all ease-in-out .5s;
        }

            .login_section .login_box .signin_microsoft:hover {
                border-color: #DEE2E6;
                color: #5E5E5E !important;
                transform: translateY(-2px);
                box-shadow: 0 4px 15px rgba(222,226,230,0.3);
                -webkit-box-shadow: 0 4px 15px rgba(222,226,230,0.3);
            }

        .login_section .login_box .privacy_policy_text {
            font-size: 12px;
            font-weight: 400;
            line-height: 16px;
            text-align: center;
        }

            .login_section .login_box .privacy_policy_text a {
                font-weight: 600;
            }

        .login_section .login_box .signin_microsoft:hover {
            color: #F91838 !important;
        }

        .login_section .login_box .btn {
            color: #FFF;
            background-color: #000 !important;
            font-weight: 600;
            font-size: 12px;
            line-height: 16px;
        }

            .login_section .login_box .btn:hover {
                color: #F91838 !important;
            }

    .login_section .footer_text_block h4 {
        color: #EC1F31;
    }

    .login_section .login_footer {
        top: 45%;
        width: 100%;
        position: absolute;
    }

    .login_section .footer_text {
        padding-right: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .login_section .footer_text h3 {
            font-size: 45px;
            line-height: 57px;
            font-weight: 500;
            color: #000;
            margin: 0;
            margin-bottom: 20px;
        }

            .login_section .footer_text h3 span {
                font-weight: 600;
            }

        .login_section .footer_text p {
            font-size: 21px;
            line-height: 30px;
            font-weight: 600;
            color: #000;
            margin: 0;
            margin-bottom: 30px;
        }

            .login_section .footer_text p span {
                color: #EC1F31;
            }

        .login_section .footer_text .logo_block {
            display: grid;
            grid-template-columns: repeat(3,1fr);
            gap: 5px;
        }

            .login_section .footer_text .logo_block img {
                height: 101px;
                /*max-width:100%;*/
            }

    .login_section .login_footer ul {
        padding: 0;
        display: table;
        margin: 0 auto;
    }

        .login_section .login_footer ul li {
            color: #000;
            font-size: 18px;
            font-weight: bold;
            line-height: 40px;
            list-style-type: none;
        }

            .login_section .login_footer ul li::before {
                color: #F91838;
                font-size: 28px;
                content: "\2022";
                line-height: 38px;
                font-weight: bold;
                margin-right: 10px;
                display: inline-block;
                vertical-align: middle;
            }

.containercontent {
    gap: 1rem;
    display: flex;
    margin-bottom: 15px;
}

    .containercontent section {
        margin: 0 !important;
        width: 100% !important;
    }

input:-webkit-autofill-selected {
    background-color: transparent !important; /* Ensures background is transparent */
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    background-color: transparent !important; /* Ensures background is transparent */
}

header .planbox {
    display: flex;
    align-items: center;
}

    header .planbox img {
        z-index: 1;
        width: 50px;
        border-radius: 50px;
        border: 2px solid #000;
    }

    header .planbox span {
        color: #FFF;
        margin-left: -5px;
        background-color: #EC1F31;
        padding: 3px 6px 3px 10px;
        border-radius: 0 5px 5px 0;
    }

.planbox {
    float: right;
    position: relative;
}

.customer-wizard [type="checkbox"].filled-in:checked + label:before {
    border-right: 2px solid #fff !important;
    border-bottom: 2px solid #fff !important;
}

.customer-wizard [type="checkbox"].filled-in:checked + label:after {
    top: 0 !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 6px;
    border: 2px solid black !important;
    background-color: black !important;
    z-index: 0 !important;
}

.customer-wizard [type="checkbox"] + label {
    font-size: 14px !important;
    height: initial !important;
    line-height: inherit !important;
}

@media (max-width:1200px) {

    .login_section .login_page_box {
        padding-left: 90px;
        padding-right: 90px;
    }

    .login_section .footer_text {
        padding-right: 40px;
    }

        .login_section .footer_text h3 {
            font-size: 37px;
            line-height: 42px;
            margin-bottom: 15px;
        }

        .login_section .footer_text p {
            font-size: 23px;
            line-height: 27px;
            margin-bottom: 40px;
        }

        .login_section .footer_text .logo_block {
            gap: 15px;
        }
}

@media (max-width:980px) {

    .login_section .footer_text {
        padding-right: 20px;
    }

    .login_section {
        background-size: 270px 100%;
    }

        .login_section .footer_text h3 {
            font-size: 32px;
            line-height: 37px;
            margin-bottom: 10px;
        }

        .login_section .footer_text p {
            font-size: 21px;
            line-height: 26px;
            margin-bottom: 30px;
        }

        .login_section .login_page_box {
            padding-left: 40px;
            padding-right: 40px;
        }

        .login_section .login_box {
            padding: 40px 15px;
        }

        .login_section .login_footer {
            display: none;
        }

        .login_section .footer_text .logo_block {
            gap: 10px;
        }
}

@media (max-width:767px) {
    .login_section .footer_text {
        display: none;
    }

    .login_section .login_page_box {
        padding-left: 0px;
        padding-right: 0px;
    }

    .login_section {
        padding-left: 15px;
        padding-right: 15px;
    }

    .login_section {
        background-size: 50% 100%;
    }
}

@media (max-width:480px) {

    .Sign-up-form .header-text {
        margin-bottom: 5px;
    }

        .Sign-up-form .header-text h1 {
            font-size: 28px;
        }

    .Sign-up-form {
        padding-bottom: 120px;
    }

        .sign-up-form .subtext-p {
            font-size: 13px;
        }
}

/*Customer sign sup css end*/

