.sign-up-container {
    font-family: Roboto, sans-serif;
    margin-top: 0px !important;

    .container-fluid {
        padding: 0px !important;
    }

    .body-content {
        background: url("../assets/images/hq-lite-signup-background.jpg") center center / cover;

        .card-body {
           background: rgba(6, 6, 6, 0.698);
           filter: opacity(1);
        }

        .modal-dialog {
            width: 515px;
            height: auto;
            
            .legalname-background {
                background: url("../assets/images/legalNameModal.png") center center / cover;
                width: 515px;
                height: 300px;
            }
        }       
    }    
}

.card-header {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    background-color: rgb(255, 255, 255);
    max-height: 70px;
    height: 70px;
    padding-left: 30px;
    padding-right: 30px;

    .header-logo {
        background-color: rgb(255, 255, 255);
        padding: 1rem;
        img {
            height: 40px;
            max-height: 40px;
        }
    }

    .header-email {
        display: flex;
        flex-direction: row;
        gap: 5px;
        font-weight: 500;
        font-size: 14px;
        color: rgb(17, 17, 17);
        padding: 1rem;
        margin-left: auto !important;

        a {
            color: rgb(17, 17, 17) !important;
        }
    }
}

.card-body {
    display: flex;
    flex-direction: row;
    padding: 50px 30px;
   
    .left-panel {
        max-width: 40%;

        .left-panel-header {
            font-size: 44px;
            font-weight: 500;
            color: rgb(255, 255, 255);
            margin-bottom: 35px;
        }

        .left-panel-content {
            font-size: 24px;
            font-weight: 600;
            color: rgb(255, 255, 255);
            p {
                margin-bottom: 30px;
            }

            .text-image {
                display: flex;
                flex-direction: column;
                img {
                    position: absolute;
                    margin-top: 20px;
                    margin-left: 120px;
                }
            }
        }

        .left-panel-steps {
            display: flex;
            flex-direction: column;
            gap: 20px;

            .step {
                border-left: 2px solid rgb(255, 255, 255);
                border-top: 2px solid rgb(255, 255, 255);
                border-bottom: 2px solid rgb(255, 255, 255);
                height: 82px;
                width: 80%;
                position: relative;
                background: transparent;
                color: rgb(255, 255, 255);

                .step-header {
                    font-size: 24px;
                    font-weight: 600;
                    padding-left: 20px;
                    padding-top: 5px;
                }

                .step-detail {
                    font-size: 16px;
                    font-weight: 400;
                    padding-left: 20px;
                }
            }

            .step::after {
                content: "";
                position: absolute;
                height: 0px;
                width: 0px;
                left: 100%;
                top: 0px;
                border: 39px solid transparent;
            }

            .step::before {
                content: "";
                position: absolute;
                height: 58px;
                width: 58px;
                left: 100%;
                top: -2px;
                border-width: 2px;
                border-style: solid;
                border-image: initial;
                transform-origin: 0px 0px;
                transform: rotate(45deg);
                border-color: white white transparent transparent;
            }

            .step.active {
                background: rgb(181, 227, 255);
                color: rgb(17, 17, 17);
            }

            .step.active::after {
                border-left: 39px solid rgb(181, 227, 255);
            }
        }
    }

    .right-panel {
        position: relative;
        display: flex;
        flex-direction: column;
        height: auto;
        max-width: 70%;
        padding: 20px;
        gap: 40px;
        border-radius: 5px;
        background: rgb(255, 255, 255);
        color: rgb(17, 17, 17);
        margin-left: auto !important;

        #signUpForm {
            height: auto;
            width: 720px;

            .form-header {
                display: inline;
            }

            .mobile-form-header {
                display: none;
            }

            p {
                font-size: 14px;
                font-weight: 400;
            }

            .custom-row {
                display: flex;
                align-items: end;
            }

            .label-row{
                margin-bottom: 0px !important;
            }

            .p-info {
                margin: 0 0 5px !important;
            }

            .btn-warning {
                background-color: #FF9500 !important;
                border-color: #FF9500 !important;
            }

            .btn-primary, .btn-active {
                color: #fff !important; 
                background-color: #013D70 !important;
                border-color: #013D70 !important;
            }

            .select2-container{
                width: 100% !important;
            }

            #legalNameModalBtn {
                cursor: pointer !important;
            }
        }

        .errorMessage {
            color: #f44336;
            padding: 6px 0 6px 0;
            font-size: 14px;
            margin: 10px 0;
            display: inline !important;
        }

        .form-header {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 20px;
        }

        .form-content {
            .business {
                padding: 10px 0px;

                .sub-header {
                    font-size: 16px;
                    font-weight: 600;
                }

                label {
                    font-size: 16px;
                    font-weight: 400;
                    color: rgb(153, 153, 153);
                }

                p {
                    font-size: 14px;
                    font-weight: 400;
                    font-style: italic;
                }
            }

            .sub-header-step1 {
                font-size: 16px;
                font-weight: 500;
            }
            
        }

        .form-group-sign-up {
            margin-bottom: 30px;
        }

        .hs-btn-group {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            gap: 20px;
            margin-bottom: 30px;
        }

        p {
            font-size: 16px;
            font-weight: 400;
            color: rgb(85, 85, 85);
        }

        label {
            font-size: 14px;
            font-weight: 500;
            color: rgb(85, 85, 85);
        }

        .float-right {
            float: right;
            padding: 15px;
        }

        .form-footer {
            margin-bottom: 2px;

            a {
                text-decoration: underline;
            }
        }

        .required-label::after {
            content: "*";
            color: red;
        }

        .red-start {
            color: red;
        }

        .glyphicon-info-sign {
            color: blue;
            font-size: 10px;
        }

        .step-body {
            display: none;
        }

        .current {
            display: block !important;
        }

        .hs-btn-footer-group {
            padding: 15px;

            .right {
                float: right;
            }
        }

        .btn-back::before {
            content: "<";
        }

        .btn-next::after {
            content: ">";
        }

        .business {
            p {
              padding-top: 20px !important;
            }
        }

        .invisible {
            display: none !important;
        }

        .location {
            background: url("../assets/images/location.svg") center center / cover;
            width: 10px;
            height: 14px;
        }

        #businessNameSection {
            background-color: #0277BD0D;
            color: #000000;
            font-size: 16px;
            border: 1px solid #0277BD;
            border-radius: 5px;
            padding: 10px;
            margin: 0px 0px 5px 0px !important;
            ul {
                li {                      
                        list-style-type: none;
                        font-size: 16px;
                        font-weight: 400;
                        color: #111111;

                        label {
                            font-size: 16px !important;
                            font-weight: 500 !important;
                            color: #111111;
                        }

                        p {
                            font-size: 16px !important;
                            font-weight: 400 !important;
                        }

                        a {
                            text-decoration: underline;
                        }
                    }
            }

            #businessNameList{
                padding-top: 10px;
                padding-left: 0px;
                max-height: 200px;
                overflow-y: auto;
                position: relative;
            }
            
            .bn-title{
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
        }

        #validationEmailSection {
            background-color: #0277BD0D;
            color: #000000;
            font-size: 16px;
            border: 1px solid #0277BD;
            border-radius: 5px;
            padding: 10px;
            margin: 0px 0px 5px 0px !important;

            .title-validation {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

            p {
                font-size: 16px !important;
                font-weight: 400 !important;
            }

            a {
                text-decoration: underline;
            }
        }

        .mg-l-10 {
            margin-left: 10px !important;
        }
    }
}

@media screen and (max-width: 1140px) {
     #signUpForm {
        width: 100% !important;

        .form-header {
            display: inline !important;
        }

        .mobile-form-header {
            display: none !important;
        }

        .custom-row{
            display: flex;
            flex-direction: row !important;

            .form-group {
                width: 100% !important;
            }
        }
    }

    .card-body {
        flex-direction: column !important;
        gap: 40px;

        .right-panel, .left-panel {
            max-width: 100% !important;
            margin-left: 0 !important;

            .left-panel-header {
                font-size: 38px !important;
                font-weight: 500 !important;
                margin-bottom: 20px !important;
            }
            
            .left-panel-content {
                font-size: 24px !important;
                font-weight: 600 !important;
                margin-bottom: 20px !important;                   
            }

            .left-panel-steps {
                display: flex !important;
                width: 100%;
                gap: 0px;
                flex-direction: row !important;
                overflow: hidden;

                .step {
                    width: calc(33% - 8px);
                    display: flex;
                    flex-direction: column;
                    gap: 4px;
                    justify-content: center;

                    .step-header {
                        font-size: 20px !important;
                        font-weight: 600 !important;
                    }

                    .step-detail {
                        font-size: 16px !important;
                         font-weight: 400 !important;
                    }
                }

                .step:not(:first-child) {
                    border-left: none !important;

                    .step-header, .step-detail {
                        padding-left: 40px;
                    }
                }

                .step.active::after {
                    border-left: 20px solid rgb(181, 227, 255) !important;
                }

                .step::before {
                    left: calc(100% - 6px);
                    top: -15px;
                    transform: rotate(45deg) skew(18deg, 18deg);
                    z-index: 1;
                }
            }
        }

        .business{
            p {
              padding-top: 20px !important;
            }
        }
    }
}

@media screen and (max-width: 1024px) {
    #signUpForm {
        width: 100% !important;

        .form-header {
            display: inline !important;
        }

        .mobile-form-header {
            display: none !important;
        }

        .custom-row{
            display: flex;
            flex-direction: row !important;

            .form-group {
                width: 100% !important;
            }
        }
    }

    .card-body {
        flex-direction: column !important;
        gap: 40px;

        .right-panel, .left-panel {
            max-width: 100% !important;
            margin-left: 0 !important;

            .left-panel-header {
                font-size: 38px !important;
                font-weight: 500 !important;
                margin-bottom: 20px !important;
            }
            
            .left-panel-content {
                font-size: 24px !important;
                font-weight: 600 !important;
                margin-bottom: 20px !important;                   
            }

            .left-panel-steps {
                display: flex !important;
                width: 100%;
                gap: 0px;
                flex-direction: row !important;
                overflow: hidden;

                .step {
                    width: calc(33% - 8px);
                    display: flex;
                    flex-direction: column;
                    gap: 4px;
                    justify-content: center;

                    .step-header {
                        font-size: 20px !important;
                        font-weight: 600 !important;
                    }

                    .step-detail {
                        font-size: 16px !important;
                         font-weight: 400 !important;
                    }
                }

                .step:not(:first-child) {
                    border-left: none !important;

                    .step-header, .step-detail {
                        padding-left: 40px;
                    }
                }

                .step.active::after {
                    border-left: 20px solid rgb(181, 227, 255) !important;
                }

                .step::before {
                    left: calc(100% - 6px);
                    top: -15px;
                    transform: rotate(45deg) skew(18deg, 18deg);
                    z-index: 1;
                }
            }
        }

        .business{
            p {
              padding-top: 20px !important;
            }
        }
    }
}

@media screen and (max-width: 991px) {
    .sign-up-container {
        .modal-dialog {
            width: 343px !important;
            height: auto;
            .legalname-background {
                background: url("../assets/images/legalNameModal-300.png") center center / cover !important;
                width: 343px !important;
                height: 197px !important;
            }
        }
    }    

    #signUpForm {
        height: auto;
        width: 100% !important;

        .row{
            margin: 0 0 10px !important;
        }

        .label-row {
            margin-bottom: 0px !important;
        }

        .custom-row{
            display: flex;
            flex-direction: column !important;
            align-items: flex-start !important;

            .form-group {
                width: 100% !important;
            }
            .non-mobile {
                display: none !important;
            }
        }

        button {
            width: 100%!important;
        }

        .hs-btn-footer-group {
            display: flex;
            flex-direction: column!important;
            gap: 10px !important;
        }

        .form-header {
            display: none !important;
        }

        .float-right {
            float: none!important;
        }

        .mobile-form-header {
            display: block !important;
            background: #B5E3FF;
            color: #111111;
            border-radius: 5px 5px 0 0;

            .header {
                font-size: 20px;
                font-weight: 600;
                padding: 15px 15px 0px 15px !important;
            }
            .detail {
                font-size: 14px;
                font-weight: 400;
                padding: 0px 15px 15px 15px !important;
            }
        }
        
        #step3 {
            .indicates {
                display: none !important;
            }
        }

       /* #legalNameModalBtn {
            display: none !important;
        }*/
       #businessNameSection {
           margin: 0px 15px 5px 15px !important;
       }

        #validationEmailSection {
            margin: 15px !important;
        }
    }

    .card-header {
        max-height: 50px;
        height: 50px;
        padding-left: 10px;
        padding-right: 10px;

        .header-logo {
            background-color: rgb(255, 255, 255);
            padding: 1rem;
            img {
                height: 30px;
                max-height: 30px;
            }
        }

        .header-email {
            span {
                display: none!important;
            }
        }
    }

    .card-body {
        gap: 0;
        padding: 20px !important;
        
        .right-panel {
            border-radius: 5px !important;
            padding: 0px !important;
            gap: 0px;

            .form-content {
                padding:5px !important;

                .indicates {
                    padding: 10px !important;
                    margin-bottom: 0px !important;
                }

                .sub-header-step1 {
                    font-size: 16px;
                    font-weight: 500;
                }      
                
                .business {
                    .sub-header {
                        padding: 10px !important;
                     }

                    p {
                        padding: 10px !important;
                    }
                }
            }

            .hs-btn-group {
                gap: 10px !important;
            }

            .form-footer {
                padding: 5px !important;
            }
        }

        .right-panel, .left-panel {
            max-width: 100% !important;
            margin-left: 0 !important;

            .left-panel-header {
                font-size: 30px !important;
                font-weight: 500 !important;
                margin-bottom: 20px !important;
            }
            
            .left-panel-content {
                font-size: 16px !important;
                font-weight: 400 !important;
                margin-bottom: 20px !important;

                .text-image {
                    img {
                        margin-left: 70px !important;
                        width: 150px !important;
                    }
                }
            }

            .left-panel-steps {
                display: none !important;
            }

            .left-panel-steps {
                width: 100%;
                gap: 0px;
                flex-direction: column !important;
                overflow: hidden;
        
                .step {
                    display: none;
                    width: 100%;
                    flex-direction: column;
                    gap: 4px;
                    border: none !important;
                    border-radius: 5px 5px 0 0;
                    height: 75px;
                    justify-content: center;
            
                    .step-header {
                        font-size: 16px !important;
                        padding-left: 16px;
                        padding-top: 0;
                    }

                    .step-detail {
                        font-size: 14px !important;
                        padding-left: 16px;
                    }
                }

                .step.active {
                    display: flex;
                }

                .step.active::after {
                    display: none;
                }

                .step::before {
                    display: none;
                }
            }
        }
    }

    .card-footer {
        flex-direction: column !important;
        justify-content: flex-start !important;
        height: auto !important;
        padding: 5px !important;
        align-items: flex-start !important;

        .footer-right{
                padding: 10px !important;
            }
    }
}

.card-footer {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    background-color: rgb(255, 255, 255);
    height: 70px;
    padding-left: 30px;
    padding-right: 30px;
    bottom: 0px;

    .footer-left {
        padding: 1rem;
    }

    .footer-right {
        display: flex;
        justify-content: space-between;
        padding: 1rem;
        gap: 30px;

        a {
            color: rgb(17, 17, 17) !important;
        }
    }
}

/*handle loading spinner*/
.loading-overlay {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: rgb(243 239 239 / 70%);
    filter: opacity(0.6);
}

.skeleton-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 4px solid rgb(6 6 6);
    border-top: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    animation: spin 1s infinite linear;
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.loading-inline {
    display: flex;
    flex-direction: row;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    .verify-loading {
        position: relative;
        top: -10px;
        color: #0277BD;
    }
}

.skeleton-spinner-inline {
    position: static;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid #0277BD;
    border-top: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    animation: spin 1s infinite linear;
    margin-left: 30px;
}
/*loading spinner end*/