.price-editor {
    position: fixed;
    inset: 168px 16px 16px 312px;
    box-shadow: 0 1px 0 0 #dedede;
    .price-editor-container {
        background-color: #fff;
        width: 100%;
        height: 100%;
        border-radius: 4px;
        &.empty-status {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .price-editor-add-edit-submit {
            padding: 24px;
            position: sticky;
            top: 0px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            .toggle-switch {
                position: relative;
    
                .plan {
                    font-weight: 600;
                    font-size: 14px;
                    line-height: 16px;
                }
    
                .offer {
                    font-weight: 400;
                    font-size: 10px;
                    line-height: 14px;
                    text-align: end;
                }
    
                .switch {
                    margin: 0 15px;
                    position: relative;
                    display: inline-block;
                    width: 180px;
                    height: 39px;
    
                    &::before{
                        position: absolute;
                        left: 16px;
                        top: 9px;
                        z-index: 1;
                        content: "Monthly";
                        color: var(--month-color);
                    }
                    &::after{
                        position: absolute;
                        right: 22px;
                        top: 9px;
                        z-index: 1;
                        content: "Yearly";
                        color: var(--year-color);
                    }
                    input {
                        opacity: 0;
                        width: 0;
                        height: 0;
    
                        &:checked+.slider:before {
                            transform: translateX(90px);
                        }
                    }
    
                    .slider {
                        position: absolute;
                        cursor: pointer;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        transition: .4s;
                        border: 1px solid #131313;
                        &:before {
                            position: absolute;
                            content: "";
                            height: 30px;
                            width: 80px;
                            left: 4px;
                            bottom: 4px;
                            background-color: #F62369;
                            transition: .4s;
                        }
                    }
    
                    .round {
                        border-radius: 34px;
    
                        &:before {
                            border-radius: 20px;
                        }
                    }
                }
            }
            button {
                border-radius: 4px;
                padding: 8px 16px;
                font-weight: 600;
                font-size: 14px;
            }
            .add-plan-btn {
                background: #F62369;
                border: 1px solid #F62369;
                color: #ffffff;
                &.active {
                    cursor: not-allowed;
                    opacity: 0.3;
                    &:hover {
                        background: #F62369;
                        color: #ffffff;
                    }
                }
                &:hover {
                    background: #FFF3F7;
                    color: #F62369;
                }
            }
            .submit-btn {
                background: #F62369;
                border: 1px solid #F62369;
                color: #ffffff;
                &:hover {
                    background: #FFF3F7;
                    color: #F62369;
                }
            }
        }
        .price-editor-body {
            padding: 24px;
            padding-top: 0px;
            overflow-y: auto;
            height: ~"calc(100vh - 272px)";
            display: flex;
            flex-direction: column;
            position: relative;
            .flex-spacing {
                display: flex;
                justify-content: center;
                align-items: center;
                .delete-icon {
                    margin-left: 8px;
                }
            }
            &:hover::-webkit-scrollbar-thumb {
                display: block;
            }
            .text-align-left {
                text-align: left !important;
            }
            .price-editor-table {
                cursor: pointer;
                min-width: 700px;
                width: 100%;
                .price-editor-header {
                    height: 46px;
                    position: sticky;
                    top: 0px;
                    z-index: 2;
                    background: #ffffff;
                    box-shadow: 0px 4px 4px #F4F4F4;
                    th {
                        text-align: center;
                        font-weight: 500;
                        font-size: 15px;
                        line-height: 22px;
                        width: 15%;
                        padding: 8px 16px;
                    }
                }
                .price-editor-table-body {
                    overflow-y: auto;
                    .change-on-over {
                        &.fixed-top {
                            position: sticky;
                            top: 38px;
                            z-index: 99;
                        }
                    }
                    tr {
                        height: 46px;
                        text-align: center;
                        font-weight: 400;
                        font-size: 13px;
                        line-height: 16px;
                        width: 22%;
                        // border-top: 1px solid transparent;
                        // border-bottom: 1px solid transparent;
                        td {
                            padding: 8px 16px;
                            .status-option {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                .image-text-flex {
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    padding: 4px 16px;
                                    &.go-live-info {
                                        color: #FF2929;
                                        border: 1px solid #FF2929;
                                        border-radius: 26px;
                                    }
                                    img {
                                        margin-right: 8px;
                                    }
                                    .img-text {
                                        font-weight: 400;
                                        font-size: 12px;
                                        line-height: 16px;
                                    }
                                    &.disabled {
                                        cursor: not-allowed;
                                        background: #f4f4f4;
                                    }
                                }
                            }
                        }
                        // &:nth-child(odd) {
                        //     background-color: #FAFAFA;
                        // }
                        // &:nth-child(even) {
                        //     background-color: #FFFFFF;
                        // }
                        // &:hover {
                        //     background-color: #FBF0F5 !important;
                        // }
                    }
                    tr.change-on-over:hover td {
                        background-color: #FBF0F5;
                    }
                    tr:nth-child(odd) td {
                        background: #FAFAFA;
                    }
                    tr:nth-child(even) td {
                        background: #ffffff;
                    }
                }
                .circle-loader {
                    margin: 0;
                    border: 2px solid rgba(0, 0, 0, 0.2);
                    border-left-color: #F62369;
                    animation-name: loader-spin;
                    animation-duration: 1s;
                    animation-iteration-count: infinite;
                    animation-timing-function: linear;
                    position: relative;
                    display: inline-block;
                    vertical-align: top;
                }
                .circle-loader, .circle-loader:after {
                    border-radius: 50%;
                    width: 24px;
                    height: 24px;
                }
                  
                .success {
                    -webkit-animation: none;
                    animation: none;
                    border-color: #5cb85c;
                    transition: border opacity 500ms ease-out;
                }
                .success .status.draw:after {
                    animation-duration: 1.2s;
                    animation-timing-function: ease;
                    animation-name: checkmark;
                    transform: scaleX(-1) rotate(135deg);
                }
                .success .status:after {
                    opacity: 1;
                    height: 14px;
                    width: 7px;
                    transform-origin: left top;
                    border-right: 2px solid #5cb85c;
                    border-top: 2px solid #5cb85c;
                    content: "";
                    left: 2px;
                    top: 11px;
                    position: absolute;
                }
                  
                .failed {
                    -webkit-animation: none;
                    animation: none;
                    border-color: #FF0000;
                    transition: border opacity 500ms ease-out;
                }
                .failed .status {
                    top: 50%;
                    left: 50%;
                    position: absolute;
                }
                .failed .status.draw:before, .failed .status.draw:after {
                    animation-duration: 1.2s;
                    animation-timing-function: ease;
                    animation-name: crossmark;
                }
                .failed .status.draw:before {
                    transform: scaleX(-1) rotate(45deg);
                }
                .failed .status.draw:after {
                    transform: scaleX(-1) rotate(225deg);
                }
                .failed .status:before, .failed .status:after {
                    opacity: 1;
                    height: 10px;
                    width: 10px;
                    transform-origin: left top;
                    border-right: 2px solid #FF0000;
                    border-top: 2px solid #FF0000;
                    content: "";
                    position: absolute;
                }
                .failed .status:before {
                    left: ~"calc(10px - 4px)";
                    top: ~"calc(4px - 11px)";
                }
                .failed .status:after {
                    left: ~"calc(3.5px - 9px)";
                    top: ~"calc(9px - 2px)";
                }
                  
                @keyframes loader-spin {
                    0% {
                        transform: rotate(0deg);
                    }
                    100% {
                        transform: rotate(360deg);
                    }
                }
                @keyframes checkmark {
                    0% {
                        height: 0;
                        width: 0;
                        opacity: 1;
                    }
                    20% {
                        height: 0;
                        width: 7px;
                        opacity: 1;
                    }
                    40% {
                        height: 14px;
                        width: 7px;
                        opacity: 1;
                    }
                    100% {
                        height: 14px;
                        width: 7px;
                        opacity: 1;
                    }
                }
                @keyframes crossmark {
                    0% {
                        height: 0;
                        width: 0;
                        opacity: 1;
                    }
                    20% {
                        height: 0;
                        width: 10px;
                        opacity: 1;
                    }
                    40% {
                        height: 10px;
                        width: 10px;
                        opacity: 1;
                    }
                    100% {
                        height: 10px;
                        width: 10px;
                        opacity: 1;
                    }
                }
            }
            .pluse-icon {
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 16px auto;
                cursor: pointer;
                img {
                    margin-right: 8px;
                }
                span {
                    font-size: 20px;
                }
            }
        }
    }
}

.price-editor-options {
    height: 100vh;
    width: 0;
    position: fixed;
    z-index: 99;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.4);
    transition: 0.10s;
    &.active {
        width: 100vw;
        transition: 0.1s;
    }
    .error-message {
        color: #EF4E40;
        font-size: 12px;
        margin-top: 4px;
        font-weight: 500;
    }

    .price-editor-options-sidenav {
        height: 100%;
        width: 0px;
        position: fixed;
        z-index: 1;
        top: 0;
        right: 0px;
        background-color: #ffffff;
        transition: 0.5s;
        &.active {
            width: 450px;
            transition: 0.5s;
        }
        .title {
            font-size: 14px;
            color: #000000;
            margin-bottom: 8px;
        }
        .sub-title {
            font-size: 12px;
            color: #F62369;
        }
        .price-editor-options-section {
            margin-bottom: 16px;
            &:last-child {
                margin-bottom: 0px;
            }
        }
        .survey-popup-answer {
            display: flex;
            cursor: pointer;
            overflow-x: auto;
            justify-content: space-between;
            .survey-popup-option {
                font-size: 12px;
                padding: 8px 10px;
                border-radius: 4px;
                border: solid 1px #000;
                width: 100%;
                white-space: nowrap;
                margin-right: 12px;
                text-align: center;
                &:last-child {
                    margin-right: 0px;
                }
                &.active {
                    border: solid 1px #f62369;
                    color: #f62369;
                }
            }
        }
        .d-flex {
            display: flex;
        }
        input {
            color: #333333;
            border-radius: 4px;
            border: 1px solid #C5C9CD;
            padding: 12px 16px;
            font-size: 12px;
            outline: 0px;
            &.error-field {
                border: 1px solid #EF4E40;
            }
        }
        textarea {
            resize: none;
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #C5C9CD;
            border-radius: 4px;
            color: #333333;
            font-size: 14px;
            &.error-field {
                border: 1px solid #EF4E40;
            }
            &:focus-visible {
                outline: 0px;
            }
        }
        .textbox-count {
            font-size: 10px;
            margin-top: 4px;
            color: #716f83;
            display: flex;
            justify-content: flex-end;
        }
        /* Chrome, Safari, Edge, Opera */
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        input[type=number] {
            -moz-appearance: textfield;
        }

        input[type=text] {
            -moz-appearance: textfield;
        }

        .width-50 {
            width: 50%;
            &:first-child {
                margin-bottom: 16px;
            }
        }

        .app-search-section {
            display: flex;
            flex-direction: column;
        }

        .discount-value {
            display: flex;
            align-items: center;
            width: 100%;
            .app-search-section {
                margin-right: 8px;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                input {
                    margin-right: 8px;
                }
                .original-yearly-plan {
                    position: relative;
                    color: #ADADAD;
                    font-size: 14px;
                    .strike-line {
                        margin: auto;
                        position: absolute;
                        inset: 0px;
                        height: 1px;
                        background-color: #ADADAD;
                        width: 100%;
                    }
                }
                .yearly-plan {
                    margin-left: 8px;
                    font-size: 16px;
                    font-weight: 500;
                }
                &:last-child {
                    padding-right: 0px;
                }
            }
        }

        .dropdown {
            &:first-child {
                margin-bottom: 16px;
            }
            .form-control {
                height: auto !important;
                box-shadow: none;
            }
            .input-group .form-control:first-child {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }
            &.open>.dropdown-menu {
                width: 100% !important;
            }
        }
        .select-option-icon {
            position: relative;
            width: 100%;
            &::before {
                content: '\f078';
                font: normal normal normal 12px/1 FontAwesome;
                color: #000000;
                right: 12px;
                height: 100%;
                padding: 15px 0px;
                position: absolute;
                pointer-events: none;
            }
        }
        .select-option {
            appearance: none;
            width: 100%;
            border: solid 1px #d9d9d9;
            background: #ffffffff;
            border-radius: 4px;
            padding: 12px 16px;
            font-size: 12px;
            &.error-field {
                border: 1px solid #EF4E40;
            }
            &:focus-visible {
                outline: 0px;
            }
        }
        .streaming-type-toggle {
            display: flex;
            .title {
                margin-bottom: 0px;
            }
            .switch-outer {
                margin: auto 0;
                margin-left: 16px;
                .switch {
                    width: 24px;
                    height: 14px;
                    margin-bottom: 0;
                    input:checked + .slider {
                        background: #40d08b;
                        &:before {
                            transform: translateX(10);
                            -webkit-transform: translateX(10px);
                            -ms-transform: translateX(10px);
                        }
                    }
                    .slider {
                        background: rgba(0, 0, 0, 0.4);
                        &:before {
                            width: 8px;
                            height: 8px;
                            top: 50%;
                            margin-top: -4px;
                            left: 3px;
                            background-color: #FFFFFF;
                        }
                    }
                }
            }
        }
        .price-editor-options-header {
            background: #ffffff;
            position: sticky;
            top: 0px;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #DEDEDE;
            z-index: 9;
            .heading {
                font-weight: 500;
                font-size: 18px;
                color: #333333;
            }
        }
        .price-editor-options-body {
            height: ~"calc(100vh - 133px)";
            overflow-y: auto;
            &:hover::-webkit-scrollbar-thumb {
                display: block;
            }
            .price-editor-options-padding {
                padding: 20px;
                .price-editor-options-section {
                    .dropdown {
                        .form-control[readonly] {
                            background-color: #fff !important;
                        }
                        &.open {
                            .datetimepicker {
                                width: 100% !important;
                            }
                        }
                    }
                }
            }
            .space-between-div {
                height: 4px;
                background: rgba(240, 239, 248, 0.5);
            }
            .price-editor-options-title {
                font-size: 16px;
                color: #000000;
                margin-bottom: 16px;
                // font-weight: 600;
            }
            .selected-plan-text {
                font-weight: 500;
                font-size: 16px;
                margin-bottom: 16px;
            }
        }
        .price-editor-options-footer {
            display: flex;
            position: sticky;
            bottom: 0;
            right: 0;
            left: 0;
            padding: 14px 20px;
            box-shadow: 0px -4px 24px rgba(0, 0, 0, 0.12);
            background: #ffffff;
            button {
                border-radius: 4px;
                padding: 8px 16px;
                font-weight: 600;
                font-size: 14px;
            }
            .cancel-btn {
                background: #FFFFFF;
                border: 1px solid #D3D3D3;
                color: #333333;
                margin-right: 10px;
                &:hover {
                    background: rgba(211, 211, 211, 0.2);
                }
            }
            .create-btn {
                background: #F62369;
                border: 1px solid #F62369;
                color: #ffffff;
                &.active {
                    cursor: not-allowed;
                    opacity: 0.3;
                    &:hover {
                        background: #F62369;
                        color: #ffffff;
                    }
                }
                &:hover {
                    background: #FFF3F7;
                    color: #F62369;
                }
            }
        }
        .price-editor-options-set-template-checkbox {
            display: flex;
            align-items: flex-start;
            align-items: center;
            .price-editor-options-checkbox {
                margin-right: 12px;
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                outline: 0;
                background: #fff;
                height: 20px;
                width: 20px;
                border-radius: 4px;
                border: 1px solid #000;
                padding: 0px;
                margin-top: 0px;
                &:checked {
                    border: 1px solid #F62369;
                    background-color: #F62369;
                    &::after {
                        display: block;
                    }
                }
                &::after {
                    content: '';
                    position: relative;
                    left: 30%;
                    top: 10%;
                    width: 35%;
                    height: 70%;
                    border: solid #fff;
                    border-width: 0 2px 2px 0;
                    transform: rotate(45deg);
                    display: none;
                }
            }
            .price-editor-options-content {
                .checkbox-title {
                    font-weight: 500;
                    font-size: 14px;
                    color: #000000;
                }
                .checkbox-sub-title {
                    font-weight: 400;
                    font-size: 12px;
                    color: #333333;
                }
            }
        }
    }
}

.admin-plan-pop-up {
    position: absolute;
    inset: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99;
    &.active {
        display: block;
    }
    .admin-plan-pop-up-container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        .admin-plan-pop-info {
            height: auto;
            width: 500px;
            background-color: #ffffff;
            border-radius: 4px;
            .admin-plan-pop-header {
                padding: 16px;
                border-bottom: 1px solid #DEDEDE;
                /* Chrome, Safari, Edge, Opera */
                input::-webkit-outer-spin-button,
                input::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                    margin: 0;
                }

                /* Firefox */
                input[type=number] {
                    -moz-appearance: textfield;
                }

                input[type=text] {
                    -moz-appearance: textfield;
                }

                input {
                    color: #333333;
                    border-radius: 4px;
                    border: 1px solid #C5C9CD;
                    padding: 12px 16px;
                    font-size: 12px;
                    outline: 0px;
                    &.error-field {
                        border: 1px solid #EF4E40;
                    }
                }
                textarea {
                    resize: none;
                    width: 100%;
                    padding: 12px 16px;
                    border: 1px solid #C5C9CD;
                    border-radius: 4px;
                    color: #333333;
                    font-size: 14px;
                    &.error-field {
                        border: 1px solid #EF4E40;
                    }
                    &:focus-visible {
                        outline: 0px;
                    }
                }

                .admin-plan-pop-title {
                    color: #000000;
                    font-weight: 600;
                    font-size: 16px;
                    margin-bottom: 16px;
                }

                .error-message {
                    color: #EF4E40;
                    font-size: 12px;
                    margin-top: 4px;
                    font-weight: 500;
                }

                .admin-plan-pop-up-section {
                    margin-bottom: 16px;
                    &:last-child {
                        margin-bottom: 0px;
                    }
                }
                .title {
                    font-size: 14px;
                    color: #000000;
                    margin-bottom: 8px;
                }
                .sub-title {
                    font-size: 12px;
                    color: #F62369;
                }
                .app-search-section {
                    display: flex;
                    flex-direction: column;
                }
            }
            .admin-plan-pop-footer {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                padding: 16px;
                button {
                    padding: 8px 16px;
                    font-weight: 600;
                    font-size: 14px;
                    border-radius: 4px;
                }
                .cancel-btn {
                    background: #ffffff;
                    color: #333333;
                    border: 1px solid #333333;
                    margin-right: 8px;
                    &:hover {
                        background: rgba(211, 211, 211, 0.2);
                    }
                }
                .submit-btn {
                    background: #F62369;
                    color: #FFFFFF;
                    border: 1px solid #F62369;
                    &.active {
                        cursor: not-allowed;
                        opacity: 0.3;
                        &:hover {
                            background: #F62369;
                            color: #ffffff;
                        }
                    }
                    &:hover {
                        background: #FFF3F7;
                        color: #F62369;
                    }
                }
            }
        }
    }
}
.usage-charge {
    position: fixed;
    inset: 168px 16px 16px 312px;
    box-shadow: 0 1px 0 0 #dedede;
    .usage-charge-container {
        background-color: #fff;
        width: 100%;
        height: 100%;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow-y: auto;
        &.empty-status {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .card {
            border-radius: 10px;
            box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
            width: 600px;
            background-color: #ffffff;
            padding: 10px 30px 40px;
            h3 {
                font-size: 22px;
                font-weight: 600;
            }
            .drop_box {
                margin: 10px 0;
                padding: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                border: 3px dotted #a3a3a3;
                border-radius: 5px;
                h4 {
                    font-size: 16px;
                    font-weight: 400;
                    color: #2e2e2e;
                }
                p {
                    margin-top: 10px;
                    margin-bottom: 20px;
                    font-size: 12px;
                    color: #a3a3a3;
                }
            }
            .btn {
                text-decoration: none;
                background-color: #005af0;
                color: #ffffff;
                padding: 10px 20px;
                border: none;
                outline: none;
                transition: 0.3s;
                &:hover{
                    text-decoration: none;
                    background-color: #ffffff;
                    color: #005af0;
                    padding: 10px 20px;
                    border: none;
                    outline: 1px solid #010101;
                }
            }
            label.label input[type="file"] {
                position: absolute;
                top: -1000px;
            }
            .label {
                cursor: pointer;
                background: #F62369;
                border: 1px solid #F62369;
                border-radius: 4px;
                padding: 8px 16px;
                display: inline-block;
                color: #ffffff;
                font-weight: 600;
                font-size: 14px;
                &:hover {
                    background: #FFF3F7;
                    color: #F62369;
                }
            }
        }
    }

    .usage-charge-table-container {
        background-color: #fff;
        width: 100%;
        height: 100%;
        border-radius: 4px;
        .price-editor-add-edit-submit {
            padding: 24px;
            position: sticky;
            top: 0px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 9;
            label.label input[type="file"] {
                position: absolute;
                top: -1000px;
            }
            .label {
                cursor: pointer;
                background: #F62369;
                border: 1px solid #F62369;
                border-radius: 4px;
                padding: 8px 16px;
                display: inline-block;
                color: #ffffff;
                font-weight: 600;
                font-size: 14px;
                margin: 0px;
                &:hover {
                    background: #FFF3F7;
                    color: #F62369;
                }
                &.active {
                    opacity: 0.5;
                    cursor: not-allowed;
                    &:hover {
                        background: #F62369;
                        color: #ffffff;
                    }
                }
            }
            .toggle-switch {
                position: relative;
    
                .plan {
                    font-weight: 600;
                    font-size: 14px;
                    line-height: 16px;
                }
    
                .offer {
                    font-weight: 400;
                    font-size: 10px;
                    line-height: 14px;
                    text-align: end;
                }
    
                .switch {
                    margin: 0 15px;
                    position: relative;
                    display: inline-block;
                    width: 180px;
                    height: 39px;
    
                    &::before{
                        position: absolute;
                        left: 16px;
                        top: 9px;
                        z-index: 1;
                        content: "Monthly";
                        color: var(--month-color);
                    }
                    &::after{
                        position: absolute;
                        right: 22px;
                        top: 9px;
                        z-index: 1;
                        content: "Yearly";
                        color: var(--year-color);
                    }
                    input {
                        opacity: 0;
                        width: 0;
                        height: 0;
    
                        &:checked+.slider:before {
                            transform: translateX(90px);
                        }
                    }
    
                    .slider {
                        position: absolute;
                        cursor: pointer;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        transition: .4s;
                        border: 1px solid #131313;
                        &:before {
                            position: absolute;
                            content: "";
                            height: 30px;
                            width: 80px;
                            left: 4px;
                            bottom: 4px;
                            background-color: #F62369;
                            transition: .4s;
                        }
                    }
    
                    .round {
                        border-radius: 34px;
    
                        &:before {
                            border-radius: 20px;
                        }
                    }
                }
            }
            button {
                border-radius: 4px;
                padding: 8px 16px;
                font-weight: 600;
                font-size: 14px;
            }
            .add-plan-btn {
                background: #F62369;
                border: 1px solid #F62369;
                color: #ffffff;
                &.active {
                    cursor: not-allowed;
                    opacity: 0.3;
                    &:hover {
                        background: #F62369;
                        color: #ffffff;
                    }
                }
                &:hover {
                    background: #FFF3F7;
                    color: #F62369;
                }
            }
            .submit-btn {
                background: #F62369;
                border: 1px solid #F62369;
                color: #ffffff;
                &:hover {
                    background: #FFF3F7;
                    color: #F62369;
                }
            }
            .dropdown {
                .form-control {
                    height: auto !important;
                    box-shadow: none;
                }
                .input-group .form-control:first-child {
                    border-top-right-radius: 0;
                    border-bottom-right-radius: 0;
                }
                &.open>.dropdown-menu {
                    width: 100% !important;
                }
                .form-control[readonly] {
                    background-color: #fff !important;
                }
                &.open {
                    .datetimepicker {
                        width: 100% !important;
                    }
                }
            }
            .date-picker-container {
                position: relative;
                .date-picker-disable {
                    position: absolute;
                    inset: 0px;
                    z-index: 5;
                    cursor: not-allowed;
                    background: rgba(255, 255, 255, 0.3);
                    border-radius: 4px;
                }
            }
            .export-viewer-container {
                margin-right: 8px;
                cursor: pointer;
                color: #F62369;
                font-weight: 600;
                font-size: 14px;
            }
        }
        .price-editor-body {
            padding: 24px;
            padding-top: 0px;
            overflow-y: auto;
            height: ~"calc(100vh - 266px)";
            display: flex;
            justify-content: center;
            align-items: flex-start;
            position: relative;
            &.active {
                height: ~"calc(100vh - 352px)";
            }
            .flex-spacing {
                display: flex;
                justify-content: center;
                align-items: center;
                .delete-icon {
                    margin-left: 8px;
                }
            }
            &:hover::-webkit-scrollbar-thumb {
                display: block;
            }
            .text-align-left {
                text-align: left !important;
            }
            .price-editor-table {
                cursor: pointer;
                min-width: 700px;
                width: 100%;
                .price-editor-header {
                    height: 46px;
                    position: sticky;
                    top: 0px;
                    z-index: 2;
                    background: #ffffff;
                    box-shadow: 0px 4px 4px #F4F4F4;
                    th {
                        text-align: center;
                        font-weight: 500;
                        font-size: 15px;
                        line-height: 22px;
                        width: 15%;
                        padding: 8px 16px;
                    }
                }
                .price-editor-table-body {
                    overflow-y: auto;
                    .change-on-over {
                        &.fixed-top {
                            position: sticky;
                            top: 38px;
                            z-index: 99;
                        }
                        &.active {
                            color: #FF2929;
                        }
                    }
                    tr {
                        height: 46px;
                        text-align: center;
                        font-weight: 400;
                        font-size: 13px;
                        line-height: 16px;
                        width: 22%;
                        // border-top: 1px solid transparent;
                        // border-bottom: 1px solid transparent;
                        td {
                            padding: 8px 16px;
                            .status-option {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                .image-text-flex {
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    padding: 4px 16px;
                                    &.go-live-info {
                                        color: #FF2929;
                                        border: 1px solid #FF2929;
                                        border-radius: 26px;
                                    }
                                    img {
                                        margin-right: 8px;
                                    }
                                    .img-text {
                                        font-weight: 400;
                                        font-size: 12px;
                                        line-height: 16px;
                                    }
                                    &.disabled {
                                        cursor: not-allowed;
                                        background: #f4f4f4;
                                    }
                                }
                            }
                        }
                        // &:nth-child(odd) {
                        //     background-color: #FAFAFA;
                        // }
                        // &:nth-child(even) {
                        //     background-color: #FFFFFF;
                        // }
                        // &:hover {
                        //     background-color: #FBF0F5 !important;
                        // }
                    }
                    tr.change-on-over:hover td {
                        background-color: #FBF0F5;
                    }
                    tr:nth-child(odd) td {
                        background: #FAFAFA;
                    }
                    tr:nth-child(even) td {
                        background: #ffffff;
                    }
                }
                .circle-loader {
                    margin: 0;
                    border: 2px solid rgba(0, 0, 0, 0.2);
                    border-left-color: #F62369;
                    animation-name: loader-spin;
                    animation-duration: 1s;
                    animation-iteration-count: infinite;
                    animation-timing-function: linear;
                    position: relative;
                    display: inline-block;
                    vertical-align: top;
                }
                .circle-loader, .circle-loader:after {
                    border-radius: 50%;
                    width: 24px;
                    height: 24px;
                }
                  
                .success {
                    -webkit-animation: none;
                    animation: none;
                    border-color: #5cb85c;
                    transition: border opacity 500ms ease-out;
                }
                .success .status.draw:after {
                    animation-duration: 1.2s;
                    animation-timing-function: ease;
                    animation-name: checkmark;
                    transform: scaleX(-1) rotate(135deg);
                }
                .success .status:after {
                    opacity: 1;
                    height: 14px;
                    width: 7px;
                    transform-origin: left top;
                    border-right: 2px solid #5cb85c;
                    border-top: 2px solid #5cb85c;
                    content: "";
                    left: 2px;
                    top: 11px;
                    position: absolute;
                }
                  
                .failed {
                    -webkit-animation: none;
                    animation: none;
                    border-color: #FF0000;
                    transition: border opacity 500ms ease-out;
                }
                .failed .status {
                    top: 50%;
                    left: 50%;
                    position: absolute;
                }
                .failed .status.draw:before, .failed .status.draw:after {
                    animation-duration: 1.2s;
                    animation-timing-function: ease;
                    animation-name: crossmark;
                }
                .failed .status.draw:before {
                    transform: scaleX(-1) rotate(45deg);
                }
                .failed .status.draw:after {
                    transform: scaleX(-1) rotate(225deg);
                }
                .failed .status:before, .failed .status:after {
                    opacity: 1;
                    height: 10px;
                    width: 10px;
                    transform-origin: left top;
                    border-right: 2px solid #FF0000;
                    border-top: 2px solid #FF0000;
                    content: "";
                    position: absolute;
                }
                .failed .status:before {
                    left: ~"calc(10px - 4px)";
                    top: ~"calc(4px - 11px)";
                }
                .failed .status:after {
                    left: ~"calc(3.5px - 9px)";
                    top: ~"calc(9px - 2px)";
                }
                  
                @keyframes loader-spin {
                    0% {
                        transform: rotate(0deg);
                    }
                    100% {
                        transform: rotate(360deg);
                    }
                }
                @keyframes checkmark {
                    0% {
                        height: 0;
                        width: 0;
                        opacity: 1;
                    }
                    20% {
                        height: 0;
                        width: 7px;
                        opacity: 1;
                    }
                    40% {
                        height: 14px;
                        width: 7px;
                        opacity: 1;
                    }
                    100% {
                        height: 14px;
                        width: 7px;
                        opacity: 1;
                    }
                }
                @keyframes crossmark {
                    0% {
                        height: 0;
                        width: 0;
                        opacity: 1;
                    }
                    20% {
                        height: 0;
                        width: 10px;
                        opacity: 1;
                    }
                    40% {
                        height: 10px;
                        width: 10px;
                        opacity: 1;
                    }
                    100% {
                        height: 10px;
                        width: 10px;
                        opacity: 1;
                    }
                }
            }
            .loader-container {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
                width: 100%;
            }
            .full-state {
                width: 100%;
                height: 100%;
                .empty-state {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 100%;
                    width: 100%;
                }
            }
        }
        .price-editor-footer {
            padding: 24px;
            button {
                border-radius: 4px;
                padding: 8px 16px;
                font-weight: 600;
                font-size: 14px;
            }
            .add-plan-btn {
                background: #F62369;
                border: 1px solid #F62369;
                color: #ffffff;
                margin-right: 8px;
                &.active {
                    cursor: not-allowed;
                    opacity: 0.3;
                    &:hover {
                        background: #F62369;
                        color: #ffffff;
                    }
                }
                &:hover {
                    background: #FFF3F7;
                    color: #F62369;
                }
            }
            .add-plan-cancel-btn {
                background: #FFFFFF;
                border: 1px solid #D3D3D3;
                color: #333333;
                margin-right: 10px;
                &:hover {
                    background: rgba(211, 211, 211, 0.2);
                }
            }
        }
    }
}
.new-admin-utils-screen {
    padding: 20px 10px;
    border-radius: 2px;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
    background-color: #ffffff;
    position: absolute;
    overflow: hidden;
    bottom: 16px;
    top: 148px;
    width: 100%;
    overflow-y: scroll;

    &:after {
        position: relative;
        line-height: 1;
    }
    .row {
        height: 100%;
    }
}


.admin-utils-tab-wrapper {
    padding: 20px 10px;
    border-radius: 2px;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
    background-color: #FFFFFF;
    // position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    // bottom: 16px;
    // top: 148px;
    overflow-y: scroll;

    scrollbar-width: thin;

   
    

    .admin-utils-tab {
        position: relative;
        display: block;
        color: #000000;
        padding: 12px 40px 12px 16px;
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: 0.28px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition: all .6s ease;
        cursor: pointer;
        &:not(:last-child) {
            margin-bottom: 8px;
        }
        &:after {
            content: "\e907";
            font-family: "vajro-icon";
            position: absolute;
            top: 50%;
            margin-top: -6px;
            right: 16px;
            font-size: 12px;
            line-height: 1;
        }
        &:hover {
            background-color: #fafafa;
            color: @theme-color;
        }
        &.active {
            color: #ffffff;
            background-color: @theme-color;
            font-weight: bold;
        }
    }
}
.admin-utils-card-wrapper {
    .admin-utils-card {
        position: relative;
        display: block;
        padding: 16px;
        background-color: #ffffff;
        border-radius: 2px;
        box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
        overflow: hidden;
        transition: all .4s ease;
        margin: 0 24px 24px 0;
        cursor: pointer;
        height: auto;
        .admin-utils-card-view {
            position: relative;
            display: flex;
            height: 128px;
        }
        .how-to-enable {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            bottom: 16px;
            width: 100%;
            div {
                cursor: pointer;
                border-bottom: 1px solid #f62369;
                color: #f62369;
                font-size: 12px;
                line-height: 1.5;
                text-decoration: none;
                padding-bottom: 0.5px;
                font-weight: 600;
            }
        }
        &:hover {
            box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
        }
        .locked-icon {
            width: 48px;
            height: 48px;
            position: absolute;
            top: 0;
            right: 0;
            &:before {
                content: '';
                width: 0;
                height: 0;
                display: inline-block;
                border-top: 48px solid @theme-color;
                border-left: 48px solid transparent;
            }
            i {
                position: absolute;
                top: 6px;
                right: 6px;
                color: #FFFFFF;
                font-size: 16px;
            }
        }
        .admin-only-badge {
            color: #FFFFFF;
            font-size: 11px;
            line-height: 1.2;
            position: absolute;
            top: 20px;
            right: -24px;
            background-color: #ff4540;
            padding: 4px 24px;
            transform: rotate(45deg);
        }
        .enabled-btn {
            font-size: 12px;
            font-weight: 500;
            line-height: 1.5;
            text-align: center;
            color: #26bf8c;
            padding: 2px 6px;
            border-radius: 2px;
            border: 1px dashed #26bf8c;
            position: absolute;
            right: 16px;
            bottom: 0px;
        }
        .left-col {
            width: 25%;
            text-align: center;
            img {
                display: block;
                width: 64px;
                height: 64px;
                object-fit: contain;
                background-color: #FFFFFF;
                border-radius: 2px;
                box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
                margin: 0 auto 4px;
            }
            a {
                color: rgba(0, 0, 0, 0.8);
                font-size: 10px;
                line-height: 1.5;
                text-decoration: none;
                padding-bottom: 1px;
                border-bottom: 1px solid rgba(0, 0, 0, 0.8);
            }
        }
        
        .right-col {
            width: 75%;
            padding-left: 16px;
            p {
                color: rgba(0, 0, 0, .8);
                font-size: 11px;
                line-height: 1.5;
                margin-bottom: 6px;
                span {
                    display: block;
                    color: #000000;
                    font-size: 14px;
                    font-weight: 500;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    margin-bottom: 2px;
                }
                &.txt {
                    font-size: 12px;
                    color: #adadad;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    margin-bottom: 0;
                }
            }
        }
    }
}
body {
  background: @vajro_bg !important;
  font-family: @vajro-font !important;
  color: @gray-dark !important;
  height: auto !important;
  padding-right: 0px !important;
}
@import "../components/bootstrap/less/mixins.less";
@import "../components/bootstrap/less/variables.less";

@vajro_font_family: Kaushan Script, cursive;
.override_meterial {
  height: 0px !important;
  min-height: 0px !important;
}
a {
  color: #337ab7;
}

.not_hyper {
  &:hover {
    text-decoration: none !important;
  }
}
.global_font {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
}

.center-element {
  margin: auto;
  display: table;
  width: 50%;
}

.middle-element {
  margin: auto;
  display: table;
  width: 45%;
}
.no_bg {
  .widget {
    .box-shadow(none);
    border: none;
  }
}
.no_bg_color {
  .widget {
    background: initial;
  }
  .widget-body {
    padding: 0;
    button {
      margin: 0px;
    }
  }
}
.contact-control-label {
  padding-left: 0px !important;
  padding-right: 0px !important;
}
.table > thead:first-child > tr:first-child > th {
  outline: none;
}

.grippy_text {
  cursor: move;
}
.grippy {
  content: "...";
  .square(25px);
  display: inline-block;
  overflow: hidden;
  line-height: 5px;
  cursor: move;
  vertical-align: middle;
  font-size: 12px;
  font-family: sans-serif;
  letter-spacing: 2px;
  color: #cccccc;
  text-shadow: 1px 0 1px black;

  &:after {
    content: "... ... ...";
  }
}

.ph-row div {
  border-radius: 3px;
  background-color: #dfe3e8 !important;
  margin-bottom: 5px !important;
  height: 8px !important;
}
.ph-col-3 {
  -webkit-box-flex: 0;
  flex: 0 0 23%;
  margin: 0 1%;
}

.non_focus {
  outline: none;
  border-radius: 50%;

  &:hover {
    box-shadow: 0px 0px 6px 3px #ccc;
  }
}

/* Buttons */

@padding-small-vertical: 4px;
@padding-small-horizontal: 20px;
@padding-base-vertical: 12px;
@padding-base-horizontal: 30px;
@padding-large-vertical: 12px;
@padding-large-horizontal: 36px;
@font_size-base: 16px;
.btn_vajro {
  display: inline-block !important;
  text-align: center !important;
  outline: none !important;
  font-weight: @headings-font-weight !important;
  border: 0 !important;
  vertical-align: middle !important;
  touch-action: manipulation !important;
  white-space: nowrap !important;
  &.disabled {
    background: linear-gradient(to bottom, #cacaca, #cacaca) !important;
    border-color: #cacaca !important;
    .box-shadow(inset 0 1px 0 0 #cacaca) !important;
  }
}
.btn_toggle {
  background: @theme-color;
  border: 1px solid #c4cdd5 !important;
  -webkit-box-shadow: 0 1px 0 0 rgba(22, 29, 37, 0.05);
  box-shadow: 0 1px 0 0 rgba(22, 29, 37, 0.05);
  color: #212b36;
  &.active {
    background: linear-gradient(180deg, @shopify-bg, @shopify-bg) !important;
    border-color: @shopify-dark-bg !important;
    box-shadow: inset 0 0 0 0 transparent, 0 1px 0 0 rgba(22, 29, 37, 0.05),
      0 0 1px 0 #38469b !important;
    color: #fff;
  }
}
.filter_model {
  button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }
}
.btn_transparent {
  background: transparent;
  border-color: rgba(99, 115, 129, 0.4);
  box-shadow: none;
  color: #374047;
  &:hover {
    background: rgba(99, 115, 129, 0.05);
    border-color: rgba(99, 115, 129, 0.4);
  }
}
.btn-small {
  background-color: @theme-color;
  color: #fff;
  .button-size(@padding-small-vertical, @padding-small-horizontal, @font-size-base, unset, @btn-border-radius-base) !important;
}
.btn-base {
  .button-size(@padding-base-vertical, @padding-base-horizontal, @font_size-base, unset, @btn-border-radius-base) !important;
}
.btn-large {
  .button-size(@padding-large-vertical, @padding-large-horizontal, @font-size-large, unset, @btn-border-radius-large) !important;
}
.btn_size-base {
  width: 120px;
}
.btn_border {
  border: 2px solid #616fc6 !important;
}
.padding-small {
  padding: 8px 14px !important;
}
.padding-base {
  padding: 4px 20px !important;
  font-weight: 400 !important;
}
.padding-medium {
  padding: 10px 24px !important;
}
.btn-violet {
  background: @shopify-bg !important;
  color: @body-bg !important;
  &:hover {
    background-color: @shopify-dark-bg !important;
    color: @body-bg !important;
  }
}
.btn-purple {
  background: @shopify-purple !important;
  color: @body-bg !important;
  &:hover {
    background-color: @shopify-dark-bg !important;
  }
}
.btn_invert-black {
  color: @body-bg;
  box-shadow: 0 0 2px 0 @body-bg, 0 0 2px 0 @body-bg;
  background-color: #2c2d34;
  &:hover {
    color: @gray-base;
    background-color: @body-bg;
  }
}
.btn_vajro-invert {
  border-radius: @border-radius-base;
  display: inline-block;
  text-align: center;
  outline: none;
  font-weight: @headings-font-weight;
  border: 0;
  .transition-duration(0.4s);
  &:hover {
    background-color: #565656 !important;
    color: @body-bg;
  }
}
.btn_invert-purple {
  background-color: @body-bg;
  border: 2px solid @shopify-bg !important;
  .transition-duration(0.4s);
  color: @shopify-bg;
  &:hover {
    background-color: @shopify-bg !important;
    color: @body-bg;
  }
}
.shopifyBtn {
  .button-size(10px;
    @font-size-h2;
    15px;
    unset;
    @border-radius-small) !important;
  background-color: @shopify-bg !important;
  border: none !important;
  text-align: center !important;
  color: @body-bg !important;
  outline: none !important;
  &:hover {
    background-color: @shopify-dark-bg !important;
  }
}
// to hide the HSL and RGB tab in color picker
.md-color-picker-preview {
  md-tab-item {
    min-width: 100% !important;
  }
}
.btn-model {
  .transition(all 0.2s ease-in-out);
  margin: 0.375rem !important;
  border: 0 !important;
  text-transform: uppercase;
  .button-size(1.1rem;
    2.4rem;
    1.1rem;
    2;
    0.25rem) !important;
  .text-overflow();
}
.translate_everything {
  display: table;
  float: right;
  top: -35px;
  position: relative;
}
.fs-small {
  font-size: @font-size-small !important;
}

.fs-base {
  font-size: @font-size-base !important;
}

.fs-medium {
  font-size: 16px !important;
}

.fs-large {
  font-size: @font-size-large !important;
}

.text-overflow {
  .text-overflow();
}

/* End */

.border-left-curve {
  .border-left-radius(4px);
}
.rn-carousel-indicator {
  span {
    outline: none;
  }
}
/* rd-widgets */

rd-widget {
  & + rd-widget {
    margin-top: 20px;
    display: inherit;
  }
  rd-widget-body {
    &.space {
      margin-bottom: 220px;
      display: inherit;
    }
  }
}
/* Scrollbar Styles */
.badge {
  &.sidebar_badge {
    background-color: #ff7800;
    color: white !important;
    font-size: 10px !important;
  }
}
.sidebar_body::-webkit-scrollbar-thumb {
  background-color: #a6a6a6;
  -webkit-border-radius: @border-radius-base;
  border-radius: @border-radius-base;
  border: 1px solid #c1c1c1;
}
.sidebar_body::-webkit-scrollbar {
  background-color: #e5e5e5;
  width: 8px;
}
.demoController::-webkit-scrollbar-thumb {
  background-color: #838383;
  -webkit-border-radius: @border-radius-base;
  border-radius: @border-radius-base;
  border: 1px solid #838383;
}
.demoController::-webkit-scrollbar {
  background-color: #d9d9d9;
  width: 5px;
}
.Polaris-Tabs::-webkit-scrollbar {
  .responsive-invisibility();
}
.appHeadFoot::-webkit-scrollbar {
  .responsive-invisibility();
}
.appFullTheme::-webkit-scrollbar {
  background-color: @body-bg;
  width: 5px;
}
.appFullTheme::-webkit-scrollbar-thumb {
  background-color: #a6a6a6;
  -webkit-border-radius: @border-radius-base;
  border-radius: @border-radius-base;
  border: 1px solid #c1c1c1;
}
.themeImage::-webkit-scrollbar-thumb {
  background-color: #838383;
  -webkit-border-radius: @border-radius-base;
  border-radius: @border-radius-base;
  border: 1px solid #838383;
}
.themeImage::-webkit-scrollbar {
  background-color: #d9d9d9;
  width: 5px;
}
/* category popup */

.category_popup_form::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  -webkit-border-radius: @border-radius-base;
  border-radius: @border-radius-base;
  border: 1px solid #c1c1c1;
}
.category_popup_form::-webkit-scrollbar {
  background-color: #f2f2f2;
  width: 7px;
  border-radius: @border-radius-small;
}
/* End */

/* Default Css */

.noafter {
  &:after {
    .responsive-invisibility();
  }
}

/* Login Page */

.shopifyLogin {
  .shopifyLoginBtn {
    background-color: #6371c7;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    height: 50px;
    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
    width: 100%;
    display: flex;
    flex-direction: row;
    outline: none;

    &:hover {
      background-color: #4959bd;
      box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1),
        0 3px 6px rgba(0, 0, 0, 0.08);
    }

    .fb_login {
      text-align: left;
      width: 50%;

      .shopify_logo {
        width: 40px;
        vertical-align: middle;
        border-style: none;
        margin-top: 2px;
        float: right;
        margin-right: 15px;
      }
    }

    .login_text {
      font-size: 18px;
      line-height: 48px;
      letter-spacing: 0.025em;
      width: 100%;
      text-align: left;
      text-transform: uppercase;
    }
  }
}
.shopify_login_btn {
  background-color: #6371c7;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  height: 50px;
  width: 100%;
  font-weight: 500;
  outline: none;

  &:hover {
    background-color: #4959bd;
    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
  }
}

.shopify_input {
  &:focus {
    border-color: #6371c7 !important;
    box-shadow: none !important;
    border: 2px solid #6371c7 !important;
  }

  &.norad_bottom {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  &.norad_top {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

/* End */

.app-page {
  /* Side menu */
  .side-bar {
    background: @side-menu-bg;
    min-height: 100% !important;
    width: @side-bar-width !important;
    padding: 0;
    position: fixed !important;
    display: flex;
    z-index: 1;

    .scroll-view {
      .side-menu {
        .abs-position(0;
                0;
                0;
                0);
        padding: 0;
        margin: 0;
        list-style: none;
        overflow-x: hidden;
        overflow-y: auto;

        .side-menu-item {
          display: flex;
          a {
            min-height: 60px;
            margin: 5px auto;
            color: @gray-text;
            font-size: @font-size-base;
            &:focus {
              border-left: none;
              background: none;
              outline: none;
            }
            &:hover {
              background: none;
            }
          }
          .side-menu-item-icon {
            filter: @side-bar-item-inactive-img-filter;
          }
          span {
            color: @side-bar-item-inactive-text-color;
            font-size: @font-size-small;
            // text-transform: uppercase;
          }
          &.active-side-menu-item {
            .side-menu-item-icon {
              filter: none !important;
            }
            span {
              color: @side-bar-item-active-text-color !important;
            }
          }
          &.first-side-menu-item {
            a {
              margin-top: 10px !important; //bcoz first icon needs extra space in the top, as it wouldn't have the bottom margin space (from a previous item)
            }
          }
          &:hover {
            background: @side-menu-hover-bg !important;
          }
        }
      }
    }
  }
  .left_col {
    background: @side-menu-bg;
    min-height: 100% !important;
    width: @side-bar-width !important;
    padding: 0;
    position: fixed !important;
    display: flex;
    z-index: 1;
    .scroll-view {
      .sidebar_body {
        .abs-position(0;
                inherit;
                0;
                inherit);
        padding: 0;
        margin: 0;
        list-style: none;
        overflow-x: hidden;
        overflow-y: auto;
        .nav_title {
          .size(@side-bar-width;70px);
          background: @side-menu-bg;
          border-radius: 0;
          margin-bottom: 0;
          .site_title {
            .size(100%;
                        70px);
            display: block;
            text-align: center;
            margin: 13px auto;
            text-decoration: none;
            margin-left: -10px;
            cursor: default;
            .vj_image {
              width: 20%;
            }
            .navbar_logo {
              margin-right: 0;
              font-size: 25px;
              vertical-align: middle;
              font-family: @vajro_font_family;
              color: @button-bg;
            }
          }
        }
        .profile {
          .profile_pic {
            width: 25%;
            float: left;
            .profile_img {
              width: 70%;
              background: @body-bg;
              margin-left: 15%;
              z-index: @zindex-navbar;
              margin-top: 20px;
              padding: 2px;
            }
            a {
              &:focus {
                outline: none;
              }
            }
          }
          .profile_info {
            padding: 20px 0px 0px;
            width: 65%;
            float: left;
            .storeName {
              font-size: @font-size-base;
              line-height: @font-size-h2;
              color: @gray-text;
              .text-overflow();
            }
            h2 {
              font-size: @font-size-base;
              color: @gray-text;
              margin: 0;
              margin-bottom: 5px;
              .text-overflow();
            }
          }
        }
        .main_menu_side {
          .menu_section {
            margin-bottom: 15px;
            &:last-child {
              margin-bottom: 40px !important;
            }
            .side-menu {
              margin-top: 10px;
              li {
                a {
                  color: @gray-text;
                  font-size: @font-size-base;
                  &:focus {
                    border-left: none;
                    background: @side-menu-hover-bg;
                    outline: none;
                  }
                  i {
                    width: 26px;
                    .opacity(0.99);
                    display: inline-block;
                    font-family: FontAwesome;
                    font-style: normal;
                    font-weight: 400;
                    font-size: @font-size-large;
                    -moz-osx-font-smoothing: grayscale;
                  }
                }
                &.active_sidebar {
                  border-left: 3px solid @button-bg !important;
                  background: @side-menu-bg;
                  a {
                    &:hover {
                      background: @side-menu-hover-bg !important;
                    }
                  }
                }
                &:not(.active_sidebar):not(.live) {
                  a {
                    &:hover {
                      border-left: 3px solid @button-bg;
                      background: @side-menu-hover-bg;
                    }
                  }
                }
                &.live {
                  border-left: 3px solid @light-green !important;
                  a {
                    &:hover {
                      background: @side-menu-hover-bg !important;
                    }
                  }
                }
              }
            }
            span {
              color: @blue-gray;
              margin-left: 5px;
              text-transform: uppercase;
              font-size: @font-size-small;
            }
          }
        }
        .brandSection {
          margin-bottom: 50px;
          .brandText {
            text-align: center;
            .vajroText {
              font-size: 22px;
              font-family: @vajro_font_family;
              color: @button-bg;
              letter-spacing: 1px;
            }
          }
        }
      }
      .sidebar-footer {
        background: #232834;
        .box-shadow(0 2px @font-size-small 0 rgba(0, 0, 0, 0.57));
        div {
          a {
            &:focus {
              text-decoration: none;
            }
          }
        }

        .nav_title {
          .size(230pz;
                    70px);
          background: @side-menu-bg;
          border-radius: 0;
          margin-bottom: 0;
          .site_title {
            .size(100%;
                        70px);
            display: block;
            text-align: center;
            margin: 13px auto;
            text-decoration: none;
            margin-left: -10px;
            cursor: default;
            .vj_image {
              width: 20%;
            }
            .navbar_logo {
              margin-right: 0;
              font-size: 25px;
              vertical-align: middle;
              font-family: @vajro_font_family;
              color: @button-bg;
            }
          }
        }
      }
    }
  }
  .right_col {
    margin-left: @side-bar-width;
    background-color: @vajro_bg;
    .topbar-container {
      position: fixed;
      top: 0;
      left: @side-bar-width;
      // right: 0;
      width: @main-content-width;
      display: table;
      z-index: 5;
      background-color: white;
      .topbar {
        height: @topbar-height;
        background-color: white;
        // position: fixed;
        // top: 0;
        // left: @side-bar-width;
        // right: 0;
        display: table-row;
        border-bottom: 1px solid #999;
        .topbar-left-section {
          float: left;
          display: flex;
          .topbar-left-section-app-status-container {
            display: table;
            overflow: hidden;
            height: @topbar-height;
            .topbar-left-section-app-status {
              display: table-cell;
              vertical-align: middle;
              padding-left: 15px;
              text-decoration: none;
              img {
                margin-top: -5px;
              }
              span {
                color: #b0b0b0;
              }
              &:hover {
                cursor: default;
              }
              &.status-live {
                span {
                  color: #353535;
                }
                &:hover {
                  cursor: pointer !important;
                }
              }
            }
          }
        }
        .topbar-right-section {
          float: right;
          display: flex;
          .topbar-right-section-container {
            display: table;
            overflow: hidden;
            height: @topbar-height;
            .topbar-right-section-app-status {
              display: table-cell;
              vertical-align: middle;
              padding-right: 12.5px;
              padding-left: 12.5px;
              text-decoration: none;
              img {
                margin-top: -5px;
              }
              span {
                color: #777777;
              }
            }
          }
        }
        .topbar-vertical-separator {
          display: block;
          margin-top: 10px;
          background: #bbb;
          width: 1px;
          height: 50px;
        }
      }
      .tabs-container {
        display: table-row;

        .topbar-tabs {
          // display: table-row;
          // left: @side-bar-width;
          // right:0;
          // top: @topbar-height;
          .topbar-tabs-title {
            line-height: 0px !important;
            font-size: 13px !important;
          }
          .onboard-tabs-left-section {
            display: flex;
            float: left;
          }
          .onboard-tabs-right-section {
            display: flex;
            float: right;
            padding: 5px 0px;
            vertical-align: middle;
            .onboard-tabs-right-section-app-status {
              margin-right: 10px;
              text-decoration: none;

              img {
                margin-top: -5px;
              }
              span {
                color: #b0b0b0;
              }
              &.status-live {
                span {
                  color: #353535;
                }
                &:hover {
                  cursor: pointer !important;
                }
              }
            }
            &:hover {
              cursor: default;
            }
          }
        }
      }
    }
    .main-content {
      padding-top: @topbar-height;
      &.with-tabs-open {
        padding-top: calc(@topbar-height + @topbar-tab-height) !important;
      }
      &.tabs-container-embedded-inside-shopify {
        padding-top: 5px !important;
      }
      &.tabs-container-embedded-inside-shopify .with-tabs-open {
        padding-top: @topbar-tab-height !important;
      }
    }
  }
}
.bottom-edge-shadow {
  -webkit-box-shadow: 0 4px 6px -6px #454545;
  -moz-box-shadow: 0 4px 6px -6px #454545;
  box-shadow: 0 4px 6px -6px #454545;
}
.faq-container {
  margin: 0px 45px;
  &.faq_full_width {
    margin: 0 !important;
  }
  .panel-group {
    margin-bottom: 20px !important;
    .faqHeader {
      font-size: 27px;
      margin: 20px 0;
    }
    .panel {
      cursor: pointer;
    }
    .faq-text-font {
      font-size: 16px;
      text-transform: none;
      margin-bottom: 0px !important;
      .panel-body {
        color: #6e6969;
      }
    }
    .panel-body {
      text-align: justify;
    }
    .quest_text {
      &:after {
        content: @triangle;
        font-family: "Glyphicons Halflings";
        font-size: @font-size-small !important;
        color: @button-bg;
        display: inline-block;
        font-size: @font-size-large;
        line-height: 22px;
        .rotate(-90deg);
      }
    }
    .collapsed .panel-title .quest_text:after {
      .rotate(90deg);
      color: @gray-dark;
    }
  }
}
/* Theme */

.themePage {
  .themeTitle {
    text-align: center;
    margin-bottom: 40px;
  }
  .themesContainer {
    .themes {
      margin-bottom: 40px;
      .theme-frame {
        width: 204px;
        margin: auto;
        position: relative;
        outline: none;
        .themesImage {
          background-image: url("https://res.cloudinary.com/vajrohq/image/upload/v1598006364/admin_console/general/iphone.png");
          .size(210px;
                    430px);
          background-size: 210px;
          background-position-x: 210px;
          background-repeat: repeat-x;
        }
        .theme-frame-image {
          .abs-position(53px;
                    inherit;
                    inherit;
                    @font-size-base);
          .size(182px;
                    323px);
          overflow: hidden;
        }
        &:hover {
          cursor: pointer;
        }
      }
      .imageScale {
        &:hover {
          transform: translateY(-3.5px) scale(1);
        }
      }
      .theme_name {
        margin: 15px auto;
        font-size: 20px;
      }
    }
  }
}
.border_none {
  border: none !important;
}
/* Initiate */

#AppFrame {
  width: 260px;
  position: relative;
  // img {
  //     z-index: 100;
  // }
  .appHeadFoot {
    .abs-position(44px;
        inherit;
        inherit;
        @font-size-large);
    width: 224px;
    .app-cart {
      background: @body-bg;
      height: 75px;
      padding: 20px 0;
      .app-cart-in {
        margin: 0 15px;
        text-align: center;
        .app-cart-text {
          padding: 8px;
          color: @body-bg;
        }
      }
    }
    .interMediate {
      height: 290px;
    }
  }
}
.initiateFrame {
  .preview_title {
    font-size: 20px;
    padding: 0 20px;
  }
}

/* Themes */

.themePreview {
  .themeDetails {
    margin: 50px auto;
    .themeNameContainer {
      .themeName {
        font-size: 3em;
        margin-bottom: 20px;
        font-kerning: normal;
        font-family: "Poppins", sans-serif;
        color: @gray-dark;
        font-weight: 700;
        letter-spacing: -0.025em;
      }
      .badge {
        margin: 21px 5px 0px;
        &.premium_badge {
          background-color: @badge-bg;
        }
        &.selected_badge {
          background-color: @card-green;
        }
        &.sidebar_badge {
          background-color: #f26102;
          color: white !important;
        }
      }
    }
    .themeDescription {
      margin-bottom: 20px;
      line-height: 1.222;
      color: #212b35;
      font-size: 1.5em;
    }
    .themeCustomize {
      margin-top: 50px;
      .customizeBtn {
        padding: 15px @font-size-h2;
        margin-left: 0;
      }
    }
  }
  .themeImageContainer {
    width: 212px;
    margin: auto;
    position: relative;
    .themeImage {
      .abs-position(53px;
            inherit;
            inherit;
            15px);
      .size(182px;
            323px);
      overflow-x: hidden;
    }
  }
}
/* Build */

.mobile-app-preview-width {
  width: @mobile-app-preview-width;
}

.placeholder {
  .size(100%;100%);
  background: whitesmoke;
  border: 3px dashed gray;
  box-sizing: border-box;
}
.cursor_move {
  cursor: -webkit-grabbing;
  cursor: move;
}
.product-group {
  border-bottom: none;
  .box-shadow(0 0 3px rgba(0, 0, 0, 0.32));
  .button-size(0px;
    0px;
    @font-size-large;
    unset;
    @border-radius-base);
  .fields {
    margin-bottom: 0px !important;
    border-bottom: 1px solid #e1e1e1;
    background-color: @body-bg;
    &:first-child {
      .border-top-radius(4px);
    }
    &:last-child {
      .border-bottom-radius(4px);
    }
    .row_number {
      margin-bottom: 0 !important;
      padding: 0px;
      text-align: center;
      height: 60px;
      line-height: 60px;
    }
    .editor {
      float: left;
      width: 100%;
      margin-bottom: 1px;
      .addon_title {
        padding: 0 22px;
      }
      .addon_config {
        padding: 0 22px;
        color: #777;
        font-size: 13px;
        button {
          padding: 5px 12px !important;
          font-size: 12px !important;
        }
        .advanced_config {
          margin: 20px !important;
        }
      }
    }
    .prod-group {
      cursor: default;
      margin-bottom: 0 !important;
      padding: 10px;
      line-height: @font-size-h2;
      .product-name {
        line-height: 40px;
      }
    }
  }
}

.productGrid {
  padding: 20px 20px @font-size-h2;
  max-width: 1300px;
  margin: 0 auto;
  list-style: none;
  text-align: center;
  padding: 10px;
  li {
    display: inline-block;
    margin: 0;
    padding: 10px;
    text-align: left;
    position: relative;
    .addProdcutElement {
      border: 1px solid #c5c5c5;
      border-radius: @border-radius-small;

      .dummyimage {
        max-height: 100%;
        min-height: 100%;
        min-width: 100%;
      }
    }
    .addImageIcon {
      border-style: dashed;
      border-color: #999;
      .square(200px);
    }
    .addPlusIcon {
      .abs-position(80px;
            inherit;
            inherit;
            85px);
      .addSign {
        width: 60px;
        cursor: pointer;
      }
    }
    .addProdcutContainer {
      .transition(0.5s ease);
      .abs-position(50%;
            inherit;
            inherit;
            50%);
      .translate(-50%;
            -50%);
      .addSign {
        width: 60px;
        cursor: pointer;
      }
    }
  }

  figure {
    margin: 0;
    overflow: hidden;
    position: relative;
    .fig_image_container {
      width: 100%;
      padding-bottom: 100%;
      position: relative;
      background-color: #e4e4e4;
      &:before {
        content: "";
        .abs-position(0;
                0;
                0;
                0;
                1);
        border: 1px solid @gray-light;
      }
      img {
        .abs-position(0;
                0;
                0;
                0);
        max-width: 100%;
        max-height: 100%;
        display: block;
        margin: auto;
      }
    }
  }
  figcaption {
    .figureContainer {
      display: flex;
      font-size: 16px;
      border: 1px solid @gray-light;
      .border-bottom-radius(3px);
      border-top: 0px;
      font-family: "Poppins", sans-serif;
      .figcap_button {
        display: inline-block;
        margin: 0;
        padding: 5px 0;
        font-weight: 400;
        text-transform: none;
        vertical-align: middle;
        .box-shadow(0 1px 0 0 rgba(22, 29, 37, 0.05));
        line-height: 3rem;
        flex: 1 0 auto;
        border: none;
        background-color: #f0f0f0;
        &.big_font {
          font-size: 22px;
        }
        .edit {
          margin: 0 @font-size-small;
        }
        &:first-child {
          border-right: 1px solid @gray-light;
          border-bottom-left-radius: 3px;
        }
        &:last-child {
          border-left: 1px solid @gray-light;
          border-bottom-right-radius: 3px;
        }
        &:hover {
          background-color: @shopify-bg;
          color: @body-bg;
          font-weight: 600;
        }
        &:focus {
          outline: none;
        }
      }
    }
  }
}
figure {
  margin: 0;
  overflow: hidden;
  position: relative;
  .fig_image_container {
    width: 100%;
    padding-bottom: 100%;
    position: relative;
    background-color: #e4e4e4;
    &:before {
      content: "";
      .abs-position(0;
            0;
            0;
            0;
            1);
      border: 1px solid @gray-light;
    }
    img {
      .abs-position(0;
            0;
            0;
            0);
      max-width: 100%;
      max-height: 100%;
      display: block;
      margin: auto;
    }
  }
}
figcaption {
  .figureContainer {
    display: flex;
    font-size: 16px;
    border: 1px solid @gray-light;
    .border-bottom-radius(3px);
    border-top: 0px;
    font-family: "Poppins", sans-serif;
    .figcap_button {
      display: inline-block;
      margin: 0;
      padding: 5px 0;
      font-weight: 400;
      text-transform: none;
      vertical-align: middle;
      .box-shadow(0 1px 0 0 rgba(22, 29, 37, 0.05));
      line-height: 3rem;
      flex: 1 0 auto;
      border: none;
      background-color: #f0f0f0;
      &.big_font {
        font-size: 22px;
      }
      .edit {
        margin: 0 @font-size-small;
      }
      &:first-child {
        border-right: 1px solid @gray-light;
        border-bottom-left-radius: 3px;
      }
      &:last-child {
        border-left: 1px solid @gray-light;
        border-bottom-right-radius: 3px;
      }
      &:hover {
        background-color: @shopify-bg;
        color: @body-bg;
        font-weight: 600;
      }
      &:focus {
        outline: none;
      }
    }
  }
}
.appFullTheme {
  .abs-position(44px;
    inherit;
    inherit;
    @font-size-large);
  .size(224px;
    400px); // overflow-y: scroll;
  overflow-x: hidden;
  .preview_header {
    width: 225px;
    z-index: 100;
    .app-build-head {
      height: 35px;
      display: flex;
      .app-build-head-name {
        line-height: 32px;
        color: @body-bg;
        font-size: @font-size-small;
        text-align: center;
        width: 150px;
        .text-overflow();
      }
      .app-nav {
        width: 35px;
        position: relative;
        height: 35px;
        .app-head-navicon {
          .abs-position(4px;
                    inherit;
                    inherit;
                    10px;
                    1);
          font-size: @font-size-large;
          color: @body-bg;
        }
      }
      .cart_btn {
        width: 40px;
        .cart {
          width: 30px;
          text-align: center;
          vertical-align: middle;
          position: relative;
          font-size: 18px;
          color: @body-bg;
          &:before {
            line-height: 36px;
          }
          .number {
            // content: attr(data-count);
            position: absolute;
            height: 14px;
            top: 2px;
            right: 0px;
            width: 14px;
            text-align: center;
            line-height: 14px;
            font-size: 10px;
            border-radius: 50%;
            font-family: sans-serif;
            font-weight: bold;
          }
        }
      }
    }
  }
  .preview_body {
    &.top_space {
      padding-top: 35px;
    }

    .app {
      &:not(:first-child) {
        margin-top: 4px;
      }
    }
  }
}

.widgetList {
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 99.5%;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.32);

  li {
    border-bottom: 1px solid #ccc;
    border-radius: 0 !important;

    &:last-child {
      border-bottom: none;
    }
  }
}

/* Preview */

.categoryGrid {
  .category-modify {
    position: relative;
    margin-bottom: 5px !important;
    &:nth-child(odd) {
      padding-right: 3px;
      padding-left: 2px;
    }
    &:nth-child(even) {
      padding-left: 3px;
      padding-right: 2px;
    }
    img {
      min-height: 100%;
      object-fit: cover;
      min-width: 100%;
    }
  }
  .category-3col {
    padding: 1px;
    margin-bottom: -6px !important;
  }
  .category-4col {
    padding: 1px;
    margin-bottom: -6px !important;
  }
  .col2 {
    width: 50%;
    float: left;
    position: relative;
    min-height: 1px;
  }
  .col3 {
    width: 33.33333333%;
    float: left;
    position: relative;
    min-height: 1px;
  }
  .col4 {
    width: 20.33333333%;
    float: left;
    position: relative;
    min-height: 1px;
    margin-left: 5px;
    margin-right: 5px;
  }
}
.slider {
  .carouselList {
    .layer {
      img {
        min-height: 100%;
        object-fit: cover;
      }
    }
  }
}
.widgetTitle {
  margin: 5px 0 !important;
  font-size: @font-size-small;
}
.horizontalList {
  .swiper-container {
    margin-top: 15px;
  }
  .row-modify {
    font-size: 9px;
    margin-bottom: 8px !important;
    .text-overflow();
    text-align: left;
  }
  .horizonDyn {
    img {
      max-height: 100%;
    }

    &.horizontal_circle_list {
      img {
        width: 53px;
        height: 53px;
        object-fit: contain;
      }
    }
  }
  .horizonProduct {
    margin-bottom: 10px;
    height: 56px;
    img {
      max-height: 100%;
      object-fit: cover;
    }
  }
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
.instaContainer {
  padding: 0 22px;
  .instaHandle {
    .insta_input {
      width: 50%;
      .box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));
      border: 1px solid #ccc;
      .button-size(6px;
            6px;
            17px;
            unset;
            @border-radius-small) !important;
    }
  }
}
.Polaris-Card {
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05),
    0 1px 3px 0 rgba(63, 63, 68, 0.15);
  border-radius: 4px;

  .card-tabs {
    .Polaris-Tabs {
      display: -ms-flexbox;
      display: flex;
      margin: 0;
      padding: 0;
      border-bottom: 1px solid #dfe3e8;
      list-style: none;
      overflow-y: scroll;
      .Polaris-Tabs__TabContainer {
        display: flex;
        margin: 0;
        padding: 0;
        outline: none;
        .Polaris-Tabs__Tab {
          color: inherit;
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          margin: 0;
          padding: 0;
          background: none;
          border: none;
          font-size: inherit;
          line-height: inherit;
          font-size: 1.5rem;
          font-weight: 400;
          line-height: 2rem;
          text-transform: none;
          letter-spacing: normal;
          color: #637381;
          position: relative;
          -ms-flex-pack: center;
          justify-content: center;
          width: 100%;
          min-width: 100%;
          margin-top: 1px;
          margin-bottom: -1px;
          padding: 0 1.6rem;
          outline: none;
          text-align: center;
          white-space: nowrap;
          text-decoration: none;
          cursor: pointer;
          &:visited {
            color: #637381;
          }
          &:hover {
            .Polaris-Tabs__Title {
              font-weight: 400;
              color: #212b36;
              text-decoration: none;
              border-bottom: 0.3rem solid #dfe3e8;
            }
          }
          &:focus {
            .Polaris-Tabs__Title {
              font-weight: 400;
              color: #212b36;
              border-bottom: 0.3rem solid #b3bcf5;
            }
          }
          .Polaris-Tabs__Title {
            display: block;
            padding: 1.6rem 0 1.3rem;
            border-bottom: 0.3rem solid transparent;
          }
        }
        .Polaris-Tabs__Tab--selected {
          font-weight: 400;
          color: #212b36;
          .Polaris-Tabs__Title {
            border-bottom: 0.3rem solid #5c6ac4 !important;
          }
          .Polaris-inner-Tabs__Title {
            display: block;
            padding: 1.6rem 0 1.3rem;
            border-bottom: 0.3rem solid #ff2f00 !important;
          }
        }
      }
    }
  }
  .Polaris-Card__Section {
    padding: 2rem;

    .listDetails {
      font-size: 16px;
    }
  }
}
@media (min-width: 40em) {
  .Polaris-Tabs__Tab {
    font-size: 1.4rem;
  }
}
/* Features */

.featureContent {
  .featuresList {
    margin-top: @font-size-h2;
    .section {
      border-bottom: 1px solid #ccc;
      margin: 20px 0;
      padding-bottom: 22px;
      .features_leftContainer {
        .features_info {
          width: 90%;
          .feature_title {
            font-size: @font-size-large;
            font-weight: 600;
            margin: 15px 0;
          }
          .features_subtitle {
            font-size: 13px;
            color: #727272;
          }
        }
      }
      .features_rightContainer {
        .widget {
          background-color: @body-bg;
          border-radius: 6px;
          box-shadow: 0 0 3px rgba(0, 0, 0, 0.32);
          border: 1px solid #ccc;
        }
        .feature_card {
          padding: 20px;
          .card_container {
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            flex-direction: column;
            max-width: 100%;
            box-sizing: border-box;
            margin: 0;
            padding: 8px;
            padding-right: 0;
            h2 {
              font-size: 1.6rem;
              margin: 0;
              font-weight: 400;
              line-height: 2.4rem;
              span {
                font-weight: 600;
              }
            }
            .card_button {
              margin-top: 20px;
            }
            label {
              display: block;
              margin-bottom: 0.4rem;
              font-size: 1.5rem;
              font-weight: 400;
              line-height: 2rem;
              text-transform: initial;
              letter-spacing: initial;
              cursor: pointer;
            }
            .input_text {
              margin: 0;
              border-style: inset;
              color: black;
              -webkit-appearance: none;
              -moz-appearance: none;
              border: 1px solid #c4cdd5;
              font-weight: 400;
              text-transform: initial;
              letter-spacing: initial;
              box-sizing: border-box;
              display: block;
              width: 100%;
              .button-size(5px;
                            10px;
                            1.6rem;
                            2.4rem;
                            @border-radius-small);
              &:focus {
                border: 1px solid #5c6ac4;
                .box-shadow(0 0 0 1px #5c6ac4);
                outline: none;
              }
            }
            select {
              &:focus {
                border: 1px solid #5c6ac4 !important;
                .box-shadow(0 0 0 1px #5c6ac4);
                outline: none;
              }
            }
            .select_search {
              background: linear-gradient(to bottom, white, #f9fafb);
              border-color: #c4cdd5;
              .box-shadow(0 1px 0 0 rgba(22, 29, 37, 0.05));
              border: 1px solid #c4cdd5;
              border-radius: @border-radius-small;
              -webkit-box-sizing: border-box;
              .transition(all 0.2s ease-out);
              box-sizing: border-box;
              position: relative;
              background: white;
              overflow: hidden;
              vertical-align: bottom;
              select {
                font-weight: 400;
                line-height: 2.4rem;
                text-transform: initial;
                letter-spacing: initial;
                box-sizing: border-box;
                display: block;
                height: 3.4rem;
                width: 100%;
                padding: 0.4rem 0.8rem;
                padding-right: 2.8rem;
                padding-left: 0.6rem;
                background: transparent;
                border: 0;
                max-width: none;
                -webkit-transition-property: background, border,
                  -webkit-box-shadow;
                transition-property: background, border, -webkit-box-shadow;
                transition-property: background, border, box-shadow;
                transition-property: background, border, box-shadow,
                  -webkit-box-shadow;
                .transition-timing-function(cubic-bezier(0.64, 0, 0.35, 1));
                .transition-duration(200ms);
              }
            }
            .enable_plugins {
              -webkit-box-align: center;
              -webkit-align-items: center;
              -ms-flex-align: center;
              align-items: center;
              flex-wrap: wrap;
              display: flex;
              .plugins_title {
                -webkit-box-flex: 1;
                -webkit-flex: 1 1 auto;
                -ms-flex: 1 1 auto;
                flex: 1 1 auto;
              }
            }
          }
        }
      }
    }
  }
  .save_features {
    .save_feat_container {
      display: flex;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: end;
      -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
      justify-content: flex-end;
      .save_content {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        margin-top: 0.8rem;
        margin-left: 0.8rem;
        max-width: calc(100% - 0.8rem);
        min-width: 0;
      }
    }
  }
}

/* Anchor colors */
.anchor-link {
  color: @shopify-cta-color !important;
  text-decoration: none;
  font-weight: 600;
}

/* Launch */

.wrong_icon_status {
  color: red;
}
.correct_icon_status {
  color: #2bb94f;
}
.admin-link-anchor {
  text-decoration: none;
  font-weight: 900;
  color: #000;
  margin: 0px 0px 0px 30px;
}
.admin-link-button {
  width: auto;
  border: none;
  padding: 5px 15px;
  margin: 5px;
  background-color: #272727;
  border-radius: 5px;
  color: #fff;
  outline: none;
}
.priceSection {
  .payment_window {
    .price-box-title {
      text-align: center;
      font-size: 20px;
    }
    .toggle-checkbox {
      width: 100%;
      margin: 15px 0;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      .toggle-checkbox__input {
        visibility: hidden;
        &:checked {
          & ~ .toggle-checkbox__left {
            color: #222b3a;
          }
          & ~ .toggle-checkbox__input-label {
            &:before {
              left: calc(100% - 4px);
              -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
              .box-shadow(0 8px 15px @shopify-bg);
            }
            &:after {
              left: calc(100% - 4px);
              -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
            }
          }
          & ~ .toggle-checkbox__right {
            color: @shopify-bg;
          }
        }
      }
      .toggle-checkbox__left {
        color: @shopify-bg;
        padding-right: 15px;
        font-size: 15px !important;
        padding-top: 10px;
      }
      .toggle-checkbox__right {
        color: #222b3a;
        padding-left: 15px;
        font-size: 15px !important;
        padding-top: 10px;
      }
      .toggle-checkbox__input-label {
        cursor: pointer;
        text-indent: -9999px;
        .size(72px;
                32px);
        background: @shopify-bg;
        display: block;
        border-radius: 100px;
        position: relative;
        .transition(all 0.3s);
        margin-top: -5px;
        &:before {
          content: "";
          .abs-position(4px;
                    inherit;
                    inherit;
                    4px);
          .square(@font-size-h3);
          background: transparent;
          border-radius: 50%;
          .transition(0.3s);
          .opacity(0.5);
          .box-shadow(0 8px 15px @shopify-bg);
        }
        &:after {
          content: "";
          .abs-position(4px;
                    inherit;
                    inherit;
                    4px);
          .square(@font-size-h3);
          background: @body-bg;
          border-radius: 50%;
          .transition(0.3s);
        }
      }
    }
    .priceContainer {
      text-align: center;
      .price-text {
        font-size: 20px;
      }
      .price-titletext {
        font-size: @font-size-h2;
      }
      .price-subtext {
        font-size: @font-size-small;
      }
    }
    .active-btn {
      text-align: center;
      margin: 25px 0 0;
      .btnActivate {
        background-color: @shopify-bg;
        border: none;
        text-align: center;
        color: @body-bg;
        outline: none;
        .button-size(10px;
                @font-size-h2;
                15px;
                unset;
                @border-radius-small);
        &:hover {
          background-color: @shopify-dark-bg;
        }
      }
      .btnInactive {
        background-color: @inactive-btn-color;
        border: none;
        text-align: center;
        color: @primary-text-color;
        outline: none;
        .button-size(10px;
                @font-size-h2;
                15px;
                unset;
                @border-radius-small);
      }
      .btnActivateSubtext {
        color: #6e6969;
        font-size: @font-size-small;
        margin-top: 5px;
      }
      .previewContent {
        color: #6e6969;
        font-size: 16px;
        margin: 15px 0;
      }
    }
  }
}
.custom_charge {
  margin-top: 40px;
  .widget-body {
    padding-bottom: 0;
  }
  .form-horizontal {
    & + .form-horizontal {
      border-top: 1px solid #e9e9e9;
      padding-top: 15px;
    }
    &.last_card {
      margin-bottom: @font-size-h2;
    }
    .cus_prize_title {
      font-size: 22px;
    }
    .cus_prize_container {
      .cus_prize {
        font-size: @font-size-h2;
      }
    }
    .activate_button {
      .card {
        color: #11a562;
        font-size: 20px;
        .active_card {
          border: 2px solid #11a562;
          border-style: dashed;
          padding: 10px @font-size-small;
        }
      }
    }
  }
}
.storeSection {
  .developer-console {
    background-color: #2c2d34;
    color: @body-bg;
    padding: 20px;
    margin-bottom: 40px;
    .dev-console {
      .console-head {
        margin-top: 20px;
        margin-bottom: 50px;
        font-size: @font-size-large;
        text-align: center;
      }
      .storeContainer {
        .appleStore,
        .androidStore {
          float: left;
          width: 50%;
          text-align: center;
          font-size: @font-size-small;
          .appleStoreText,
          .androidStoreText {
            margin: 20px 0 0;
            height: 60px;
          }
          .appleStoreImage,
          .androidStoreImage {
            height: 60px;
            img {
              margin: 10px;
              width: 142px;
            }
          }
        }
      }
    }
  }
  .previewContainer {
    text-align: center;
    .previewTitle {
      font-size: 22px;
    }
    .previewContent {
      color: #6e6969;
      font-size: 16px;
      margin: 15px 0;
    }
  }
}
.statusContainer {
  margin: 35px @font-size-h2 0 !important;
  .statusContent {
    color: @gray-dark !important;
    .statusTitleContainer {
      font-size: 15px;
      .statusTitleIcon {
        color: #a4a4a4;
        margin-right: 10px;
        font-size: 20px;
        vertical-align: middle;

        &.finish {
          color: @button-bg !important;
        }
      }
      .statusText {
        vertical-align: text-bottom;
      }
    }
    .statusIconContainer {
      vertical-align: baseline;
      margin: 10px auto;
      padding-left: 42px;
      .storeStatus {
        font-size: @font-size-base;
        line-height: @font-size-h2;
        .text-overflow();

        .statusIcon {
          margin-right: 10px;
          color: @thin-gray;
          vertical-align: middle;

          &.finish {
            color: @button-bg !important;
          }
        }
      }
    }
  }
}
.dev-icons{
    display: inline-block;
    margin-left: 5%;
}
/* Preview Page */

.previewPage {
  .appCard {
    border: 1px solid #ccc;
    border-radius: @border-radius-large;
    padding: 20px;
    .box-shadow(0 0 3px rgba(0, 0, 0, 0.32));
    background-color: #ffffff;
    .tabSection {
      text-align: center;
      margin-bottom: @font-size-h2;
      .tabs {
        display: inline-table;
        .tab {
          display: table-cell;
          padding: 10px 40px;
          border: 1px solid #ccc;
          cursor: pointer;
          outline: none;
          &:first-child {
            border-right: none;
          }
          &.selected_tab {
            background-color: @shopify-bg;
            color: @body-bg;
          }
        }
      }
    }
    .getApps {
      .flow_steps {
        .title {
          font-size: 17px;
          display: flex;
          align-items: center;

          b {
            font-size: 30px;
          }
        }
        .app_badge {
          text-align: left;
          margin: 0;
          img {
            max-width: 20%;
          }
        }
        .btnCenter {
          text-align: center;
          margin-top: 10px !important;
        }
      }
    }
    .preview_title {
      margin-bottom: 20px;
      .main_title {
        font-size: 21px;
        margin-bottom: 28px;
        color: #616fc6;
        font-weight: 650;
      }
      .title1 {
        font-size: 16px;
        color: #666;
      }
      .title2 {
        font-size: 16px;
        margin-top: 15px;
        color: #666;
      }
    }
  }
}
/* Other page */

.category_popup {
  .form-group {
    margin: 15px 10px;
    overflow-y: scroll;
    height: 135px;

    .popupContainer {
      .popup_ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        .popup_list {
          margin: 0;
          font-size: 17px;
          cursor: pointer;
          border-radius: @border-radius-small;
          outline: none;

          &:hover {
            background: #5c6ac4;
            color: @popover-bg;
          }
          .popup_list_container {
            padding: 10px;
            width: 100%;
            display: flex;
            margin: 0 auto;

            .popup_list_content {
              padding: 0;
              width: 100%;
              display: flex;
              margin: 0 auto;
              flex: 1 1 0%;
              .text-overflow();
            }
          }
        }
        .popover_empty_state {
          font-size: 14px !important;
          .popup_list_container {
            padding: 5px !important;
          }
          &:hover {
            background: @light-gray !important;
            color: @primary-text-color !important;
          }
        }
      }
    }
  }
}
.popup_category_container {
  border: 1px solid #c4cdd5;
  font-weight: 400;
  text-transform: initial;
  letter-spacing: initial;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  padding-right: 7px;
  background-color: #ffffff;
  height: 40px;
  .button-size(2px;
    10px;
    1.6rem;
    2.4rem;
    @border-radius-small);
  .popup_category_content {
    display: flex;
    margin-top: 0;
    margin-left: 0;
    padding-left: 8px;
    .popup_category_text {
      flex: 1 1 auto;
      min-width: 0;
      max-width: 100%;
      .text-overflow();
      line-height: 3.8rem;
      font-family: "Poppins", sans-serif;
      font-weight: 500;
      font-size: 15px;
    }
    .popup_category_close {
      min-width: 0;
      max-width: 100%;
      .popup_close_btn {
        display: block;
        padding: 0px 20px;
        height: 40px;
        border: 0;
        background: #e5e5e5;
        color: #999;
        line-height: 40px;
        &:hover {
          cursor: pointer;
        }
        &:focus {
          outline: none;
        }
      }
    }
  }
}
/* Popover */

.upgrade_popup {
  padding: 10px;
  .upgrade_popup_body {
    padding: 10px;
  }
}
.popover_overide {
  left: 0 !important;
  cursor: auto;
}
.popup-group {
  .form-control {
    width: 70% !important;
  }
  .input-group-addon {
    width: 30% !important;
    padding: 9px 10px !important;
    margin: 0;
    &:hover {
      background-color: @card-green;
      color: @body-bg !important;
    }
  }
}
.category_edit_popover {
  color: @gray-base;
  .form-group {
    margin: 15px 10px !important;
    .input-group {
      width: 100%;
      .input {
        padding: 6px;
        border: 1px solid @light-gray;
        border-radius: @border-radius-base;
        width: 100%;
      }
    }
  }
}
/* End */

.input-short {
  height: 41px;
  .box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));
  border: 1px solid @light-gray;
  border-radius: @border-radius-base;
  font-size: 15px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
}
.navbar_mbl_logo {
  border: none !important;
  width: 100px;
  margin: 0 !important;
  &:focus,
  &:hover {
    background: none !important;
  }
  img {
    max-width: 60%;
    width: 60%;
  }
  &:after {
    color: @gray-base;
    display: inline-block;
    .square(0);
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
  }
}
/* Modal */

.modal_bg_image.modal-body {
  padding: 0 !important;
}
.modal_img {
  position: relative;
  img {
    min-width: 100%;
    .border-bottom-radius(6px);
  }
  .modal_text_container {
    .abs-position(inherit;
        inherit;
        60px;
        50px);
    .modal_title {
      text-align: center;
      text-transform: uppercase;
      .modal_subtitle {
        font-size: 16px;
      }
      .modal_maintitle {
        font-size: 22px;
        margin: 10px auto;
        font-weight: @badge-font-weight;
      }
    }
    .footer_btn {
      text-align: center;
      margin-top: 20px;
    }
  }
  .modal_note {
    position: absolute;
    top: inherit;
    right: inherit;
    bottom: 25px;
    left: 25px;
    z-index: inherit;
  }
}
.modal-dialog.cascading-modal {
  margin-top: 10%;
}

/* center */

.modal {
  text-align: center;
  padding: 0 !important;
}

.modal:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

/* End */

/* Sweet Alert */

.swal2-container {
  font-family: "Poppins", sans-serif;
  .swal2-popup {
    width: 400px;
    padding: 40px;
    font-size: 11px;
    .swal2-content {
      font-size: 16px;
      font-weight: 400;
    }
    .swal2-actions {
      button {
        font-size: 15px;
      }
    }
  }
}
/* End */

/* Polaris */

.polaris_banner {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  &.polaris_card {
    transition: box-shadow 0.2s cubic-bezier(0.64, 0, 0.35, 1);
    transition-delay: 0.1s;
    border-radius: 0 0 3px 3px;
    padding: 1.6rem;
  }
  &.polaris_card_yellow {
    box-shadow: inset 0 3px 0 0 #eec200, inset 0 0 0 0 transparent,
      0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15);
    background-color: #fdf7e3;
  }
  &.polaris_card_blue {
    box-shadow: inset 0 3px 0 0 #47c1bf, inset 0 0 0 0 transparent,
      0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15);
    background-color: #eef9f9;
  }
  .polaris_banner_ribbon {
    padding-right: 1.6rem;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 3.2rem;
    flex: 0 0 3.2rem;
    .polaris_icon {
      display: block;
      .square(2rem);
      max-height: 100%;
      max-width: 100%;
      align-items: center;
      margin: auto;
      color: @body-bg;
      &.polaris_icon_yellow {
        fill: #9c6f19;
        &:after {
          background-color: #ffea8a;
        }
      }
      &.polaris_icon_blue {
        fill: #00848e;
        &:after {
          background-color: #b7ecec;
        }
      }
      &.polaris_icon_dropback {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin: 0.4rem;
        &:after {
          content: "";
          position: absolute;
          z-index: 1;
          top: -0.4rem;
          bottom: -0.4rem;
          left: -0.4rem;
          right: -0.4rem;
          border-radius: 50%;
        }
      }
      .polaris_icon_svg {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 100%;
        max-height: 100%;
      }
    }
  }
  .polaris_banner_text {
    .polaris_banner_heading {
      padding-top: 0.2rem;
      .polaris_heading {
        font-size: 1.6rem;
        font-weight: 600;
        line-height: 2.4rem;
        margin: 0;
      }
    }
    .polaris_banner_content {
      padding: 0.4rem 0;
    }
  }
}
.faq_width {
  width: 61.5%;
}
.nomargin {
  margin: 0px !important;
}
.nomargin_top {
  margin-top: 0px !important;
}
.left_margin {
  margin-left: 3% !important;
}
.nopadding_left {
  padding-left: 0 !important;
}
.nopadding_right {
  padding-right: 0 !important;
}
.nomargin_left {
  margin-left: 0 !important;
}
.nomargin_right {
  margin-right: 0 !important;
}
.nopadding_tb {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.nopadding_lr {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.nomargin_tb {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.nomargin_lr {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.noradius_right {
  .border-right-radius(0) !important;
}
.noradius_left {
  .border-left-radius(0) !important;
}
.noradius_top {
  .border-top-radius(0) !important;
}
.noradius_bottom {
  .border-bottom-radius(0) !important;
}
.vajro_logo {
  margin-right: 0;
  font-size: @font-size-h2;
  vertical-align: middle;
  font-family: @vajro_font_family;
  color: @button-bg;
}
.navbar-brand {
  height: 52px !important;
  padding: @font-size-small 15px !important;
}
.textoverflow {
  .text-overflow();
}
.textcenter {
  margin: auto;
  display: table;
  position: relative;
}
/* Angular UI Tree */

.tree-node {
  border: 1px solid #dae2ea;
  background: #f8faff;
  color: #7c9eb2;
  .tree-handle {
    padding: 10px;
    margin-right: 10px;
    border: none;
    border-right: 1px solid #dae2ea;
  }
  .tree-node-content {
    margin: 10px;
  }
}
/* Angular Meterial */

/* MD input */

md-actions {
  .md-mini.md-button {
    font-weight: 700;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
  }
}
md-content {
  background-color: @body-bg !important;
  md-input-container {
    label {
      font-weight: 600;
      font-family: "Poppins", sans-serif;
    }
  }
}
/* MD Checkbox */

md-checkbox.md-checked .md-icon {
  background-color: @shopify-bg !important;
}
/* MD Toast */

md-toast {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  padding: 0px !important;
  z-index: 10000 !important;
  top: 0 !important;
  height: 70px;

  &.notifyToast {
    position: fixed !important;
    right: 0;
    top: 15px !important;
    left: 0;
    pointer-events: none;
    transition: all 600ms ease 0s;
  }
  &.success {
    .md-toast-content {
      border-radius: 8px;
      box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.12);
      border: solid 1px #21c693;
      background-color: #21c693;
      color: #FFF;
    }
  }
  &.warning {
    .md-toast-content {
      color: #000;
      border-radius: 8px;
      box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.12);
      border: solid 1px #ee9502;
      background-color: #ee9502;
    }
  }
  &.error {
    .md-toast-content {
      color: #000;
      border-radius: 8px;
      box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.12);
      border: solid 1px #ea4e2c;
      background-color: #ea4e2c;
    }
  }
  .md-toast-content {
    justify-content: center !important;
    -webkit-justify-content: center !important;
  }
}
/* MDColor Picker */

.md-color-picker-preview {
  &:focus {
    outline: none;
  }
}
/* End */

/* Bootstrap 4 */

.card-group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}
.flex-row {
  -ms-flex-direction: row !important;
  flex-direction: row !important;
}
.flex-column {
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}

.order-first {
  -ms-flex-order: -1;
  order: -1;
}

.order-last {
  -ms-flex-order: 13;
  order: 13;
}

.order-0 {
  -ms-flex-order: 0;
  order: 0;
}

.order-1 {
  -ms-flex-order: 1;
  order: 1;
}

.order-2 {
  -ms-flex-order: 2;
  order: 2;
}

.order-3 {
  -ms-flex-order: 3;
  order: 3;
}

.order-4 {
  -ms-flex-order: 4;
  order: 4;
}

.order-5 {
  -ms-flex-order: 5;
  order: 5;
}

.order-6 {
  -ms-flex-order: 6;
  order: 6;
}

.order-7 {
  -ms-flex-order: 7;
  order: 7;
}

.order-8 {
  -ms-flex-order: 8;
  order: 8;
}

.order-9 {
  -ms-flex-order: 9;
  order: 9;
}

.order-10 {
  -ms-flex-order: 10;
  order: 10;
}

.order-11 {
  -ms-flex-order: 11;
  order: 11;
}

.order-12 {
  -ms-flex-order: 12;
  order: 12;
}

/* End */

.fields {
  &:first-child {
    .v-task {
      .ui-adder {
        display: none;
      }
    }
  }
  .v-task {
    margin: 0px !important;
    position: relative;

    .ui-adder,
    .ui-adder-bg,
    .ui-adder-icon {
      position: absolute;
      width: 28px;
      height: 28px;
      cursor: pointer;
      z-index: 1;
    }

    .ui-adder {
      top: -15px;
      left: 50%;
      margin-left: -14px;
      outline: none;
      &.hover {
        .ui-adder-bg,
        .icon-plus {
          -webkit-transform: scale(1) !important;
          transform: scale(1) !important;
        }
      }

      &.is-last {
        display: block;
        top: auto;
        bottom: -38px;
      }
      &:hover,
      &.hovered {
        .ui-adder-bg,
        .ui-adder-icon {
          -webkit-transform: scale(1);
          transform: scale(1);
        }
      }

      .ui-adder-bg,
      .ui-adder-icon {
        -webkit-transform: scale(0);
        transform: scale(0);
      }

      .ui-adder-bg,
      .ui-adder-icon {
        transition: -webkit-transform 0.2s;
        transition: transform 0.2s;
        transition: transform 0.2s, -webkit-transform 0.2s;
      }

      .ui-adder-bg {
        background-color: white;
        box-shadow: 0px 1px 1px 0px rgba(130, 145, 153, 0.5),
          0 0 1px rgba(23, 25, 26, 0.2);
        border-radius: 28px;
        outline: none;
      }

      .ui-adder-icon-parent {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -5px 0 0 -5px;

        .ui-adder-icon {
          position: absolute;
          top: 0;
          left: 0;
        }
      }
    }

    &:last-child {
      .ui-adder {
        &.is-last {
          display: block;
          top: auto;
          bottom: -38px;
        }
      }
    }
  }
}

/* ngProgress (red color progress bar on top) */

#ngProgress-container {
  // top: 72px;
  z-index: 10 !important;

  // #ngProgress {
  //     box-shadow: none;
  // }
}

.foregroundImage-size-small {
  position: absolute;
  width: 40%;
  margin-left: 25%;
  margin-top: 65%;
}

.foregroundImage-size-medium {
  position: absolute;
  width: 60%;
  margin-left: 15%;
  margin-top: 55%;
}

.foregroundImage-size-large {
  position: absolute;
  width: 80%;
  margin-left: 5%;
  margin-top: 45%;
}

/* Screenshot Editor Page Css*/

.screenshotEditorDropdownRowCss {
  padding-top: 10px;
}
.screenshotEditorDropdownText {
  text-align: center;
  padding-top: 10px;
}
.screenshotEditorDownloadButton {
  margin: auto;
}
.screenshotEditor_container_fluid {
  display: flex;
  overflow-x: auto;
  margin-bottom: -15px !important;
}
.screenshotEditor_text_align {
  text-align: center;
}
#screenshotEditor_listItems_display {
  display: contents;
}
.screenshotEditor_fig_image_container {
  width: 225px;
  height: 400px;
  top: 8px;
}
.screenshotEditor_figureContainer {
  width: 225px;
}
#screenshotEditor_upload_button {
  padding: 15px 5px 5px 0px;
}
#screenshotEditor_edit_button {
  padding: 15px 5px 5px 0px;
}
.screenshotEditor_addImageIcon {
  width: 220px !important;
  height: 400px !important;
}
.screenshotEditor_addPlusIcon {
  top: 165px !important;
  left: 90px !important;
}

.cc-unoo {
  display: none !important;
}
.sync-product-btn-wrapper {
  text-align: center;
}
.translation-suggestion-subtitle {
  font-size: 8px;
  padding: 5px;
  border-radius: 5px;

  &.default-node-badge {
    background-color: #efa57a;
  }
  &.app-specific-node-badge {
    background-color: #bae9f7;
  }
}
/* ngIf animation  currently used for animating the selected widget entry in BuilderController*/
.animationIf.ng-enter {
  //   -webkit-transition: opacity ease-in-out 1s;
  //   -moz-transition: opacity ease-in-out 1s;
  //   -ms-transition: opacity ease-in-out 1s;
  //   -o-transition: opacity ease-in-out 1s;
  //   transition: opacity ease-in-out 1s;
  animation: my_fade_animation 0.5s ease-in-out;
  -webkit-animation: my_fade_animation 0.5s ease-in-out;
}

@keyframes my_fade_animation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes my_fade_animation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
// .animationIf.ng-enter,
// .animationIf.ng-leave.ng-leave-active {
//   opacity: 0;
// }
// // .animationIf.ng-leave,
// .animationIf.ng-enter.ng-enter-active {
//   opacity: 1;
// }

//image card starts
.square-image-banner-upload {
  width: 150px;
  height: 150px;

  figure {
    width: 80%;
    height: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 3px;
    background-color: #f4f4f4;
  }
}
.banner-image-table-column {
  padding-left: 10vh;
}
.btn-wrapper-save {
  margin-left: 2vh;
}
// Image card ends

.no-before {
    .vajro-bell-fill::after{
        display: none;
    }
}
// Extend trial days
.reason-for-approval-section {
  .reason-for-approval-title {
    margin-bottom: 8px;
  }
  textarea {
    resize: none;
    width: 50%;
    height: 100px;
    padding: 8px;
    border-radius: 4px;
  }
}
// Announcement bar style
.announcement-bar {
  position: relative;
  left: 0;
  right: 0;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  z-index: 10;
  .trial_flag{
    transform: rotate(-55deg);
    color: #fff;
    font-weight:600;
    font-size:18px;
    background-color:#F62369;
    padding: 5px;
    width: 208px;
    text-align: center;
  }
  .ab_blue {
    color: #1a7fb9;
  }
  .ab_orange {
    color: #d9651c;
  }
  .ab_red {
    color: #e84238;
  }
  .ab_dull_red {
    color: transparent;
  }
  a {
    font-weight: bold;
    color: black;
    text-decoration: underline;
  }
  i.vajro-close {
    font-size: 20px;
    margin-left: 16px;
  }
}
// .announcement-bar-open {
//   .main-content {
//     padding-top: 160px;
//   }
//   .widgets-container {
//     top: 112px !important;
//   }
//   .preview-popup {
//     top: 112px;
// }
// }
@media (max-width: 425px) {
  .announcement-bar {
    color: white;
    a {
      color: white;
    }
  }
  .ab_blue,
  .ab_orange,
  .ab_red {
    color: white !important;
  }
}

.billing-features-container {
    color:@secondary-text-color !important;
    line-height:35px;
    padding:17.5px;
    i {
        margin: 5px;
    }
}
.billing-view-comparison {
    text-align: center;
    a {
        color: @shopify-bg !important;
        text-decoration: none;
    }
}
.plan_window {
    .widget-body {
        background: #fcfcfc;
    }
}
.highlighted-plan {
    .widget {
        border: 1px solid transparent;    
        border-color: #a9a9a9;
    }
}
.highlighted-plan-body {
    .widget-body {
        background: #ffffff !important;
    }
}
.billing-plan-comparison-table {
    width: 100%;
    td {
        line-height: 20px;
        border: 1px solid #dfe3e8;
    }
    th {
        line-height: 30px;
        border: 1px solid #dfe3e8;
    }
    .billing-plan-comparison-group-title {
        background: #f6f6f6;
        line-height: 30px;
    }
    .billing-plan-comparison-subtitle {
        color: #777;
        font-size: 12px;
    }

    .billing-plan-comparison-first-column {
       width: 40%;
       padding: 10px;
    }
    .billing-plan-comparison-other-column {
        width: 20%;
        text-align: center !important;
    }

}


.strikeout_plan{
    text-decoration: line-through;
    font-size: 20px;
    color:#999;
    .mo {
        font-size: 15px;
    }
}

// Badges

.pro_plan_badge {
    background-color: @pro-badge-bg;
    font-size: 10px !important;
}
.account-setting {
    width: 100%;
    position: relative;
    display: flex;
    height: 100%;
    flex-direction: column;
    &:hover::-webkit-scrollbar-thumb {
        display: block;
    }
    .main-tab-list {
        position: relative;
        border-bottom: 4px solid rgba(240, 239, 248, 0.5);
        overflow-y: auto;
        flex: 0 0 44px;
        &:hover::-webkit-scrollbar-thumb {
            display: block;
        }
        .list {
            padding: 0px 24px;
            height: 100%;
            display: flex;
            justify-content: space-around;
            min-height: 40px;
            /* scroll bar style starts */
            &::-webkit-scrollbar {
                display: none;
            }
            &::-webkit-scrollbar-track {
                display: none;
            }
            &::-webkit-scrollbar-thumb {
                display: none;
            }
            &::-webkit-scrollbar-thumb:hover {
                display: none;
            }
            /* scroll bar style ends */
        }
        .tab-list {
            position: relative;
            cursor: pointer;
            outline: 0 none;
            white-space: nowrap;
            &.active {
                .title {
                    color: #f62369;
                    font-weight: bold;
                }
                &:before {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    height: 2px;
                    background: #F62369;
                }
            }
            .title {
                min-height: 40px;
                margin: auto 16px;
                color: #333333;
                font-size: 12px;
                display: flex;
                justify-content: center;
                align-items: center;
                // margin-bottom: 4px;
            }
            .sub-title {
                font-size: 12px;
                color: rgba(0, 0, 0, 0.4);
            }
            &:last-child {
                margin-bottom: 0px;
            }
        }
    }
    .tab-content {
        flex: 1 1 auto;
        height: ~"calc(100vh - 194px)";
        overflow-y: auto;
        position: relative;
        &:hover::-webkit-scrollbar-thumb {
            display: block;
        }

        .account-setting-card {
            padding: 16px;
            border: 1px solid #e6e6e6;
            border-radius: 4px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
            min-height: 125px;
            margin-bottom: 30px;
            
            .switch-with-content {
                display: flex;
                justify-content: space-between;
                align-items: center;
                min-height: 40px;
                .account-setting-img-heading {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    img {
                        margin-right: 8px;
                    }
                    div {
                        font-size: 14px;
                        font-weight: bold;
                        color: #333333;
                        padding-right: 16px;
                    }
                }
                .switch-outer {
                    margin: auto 0;
                    .switch {
                        width: 32px;
                        height: 18px;
                        margin-bottom: 0;
                        input:checked + .slider {
                            background: #40d08b;
                            box-shadow: none;
                            &:before {
                                transform: translateX(13px);
                                -webkit-transform: translateX(13px);
                                -ms-transform: translateX(13px);
                            }
                        }
                        .slider {
                            background: #eaecf5;
                            &:before {
                                width: 15px;
                                height: 15px;
                                top: 50%;
                                margin-top: -7.5px;
                                left: 2px;
                                background-color: #FFFFFF;
                            }
                        }
                    }
                }
            }
            .account-setting-content {
                margin-top: 16px;
                font-size: 12px;
                color: #333333;
            }
        }

        .account-setting-vajro-loader-new {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            position: absolute;
            inset: 0px;
            background: rgba(0, 0, 0, 0.4);
            z-index: 9;
        }

        .account-setting-heading-btn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 24px;
            position: sticky;
            top: 0;
            background: #ffffff;
            z-index: 9;
            .custom-features-heading {
                font-size: 18px;
                font-weight: 600;
            }
            .account-setting-submit-btn {
                background: #F62369;
                border-radius: 4px;
                padding: 8px 80px;
                color: #FFFFFF;
                border: 1px solid #F62369;
                font-weight: 600;
                font-size: 14px;
                &:hover {
                    color: #F62369;
                    background: #FFF3F7;
                }
            }
        }

        .not-allowed-users-to-access {
            position: absolute;
            inset: 0px;
            background: rgba(0, 0, 0, 0.4);
            z-index: 9;
            display: flex;
            align-items: center;
            justify-content: center;
            .not-allowed-users-to-access-model {
                background: #ffffff;
                border-radius: 4px;
                .not-allowed-users-to-access-heading {
                    font-size: 18px;
                    font-weight: 600;
                    align-items: center;
                    padding: 32px;
                }
                .not-allowed-users-to-access-footer {
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    padding: 16px 32px;
                    border-top: 1px solid #DEDEDE;
                    button {
                        background: #F62369;
                        border-radius: 4px;
                        padding: 8px 16px;
                        color: #FFFFFF;
                        border: 1px solid #F62369;
                        font-size: 14px;
                        &:hover {
                            color: #F62369;
                            background: #FFF3F7;
                        }
                    }
                }
            }
        }

        /* Broadercaster */
        .account-setting-broadcaster {
            height: 100%;
            position: relative;
            .account-setting-main-content {
                height: 100%;
            }
            .custom-features-heading {
                .sub-custom-features-heading {
                    position: absolute;
                    bottom: 20px;
                    font-size: 10px;
                    color: rgba(0, 0, 0, 0.4);
                }
            }
            .row {
                padding: 0px 9px 24px;
                height: ~"calc(100% - 86px)";
                overflow-y: auto;
                &:hover::-webkit-scrollbar-thumb {
                    display: block;
                }
            }
        }

        /* Viewers */
        .account-setting-viewer {
            height: 100%;
            position: relative;
            .account-setting-main-content {
                height: 100%;
            }
            .row {
                padding: 0px 9px 24px;
                height: ~"calc(100% - 86px)";
                overflow-y: auto;
                &:hover::-webkit-scrollbar-thumb {
                    display: block;
                }
            }
        }

        /* Bots */
        .account-setting-bots {
            height: 100%;
            position: relative;
            .account-setting-main-content {
                height: 100%;
            }
            .custom-features-heading {
                .sub-custom-features-heading {
                    position: absolute;
                    bottom: 20px;
                    font-size: 10px;
                    color: rgba(0, 0, 0, 0.4);
                }
            }
            .row {
                padding: 0px 9px 24px;
                height: ~"calc(100% - 86px)";
                overflow-y: auto;
                &:hover::-webkit-scrollbar-thumb {
                    display: block;
                }
                .viewer-broadcaster-options {
                    margin-top: 16px;
                    .option-for-view-broadcaster-checkbox {
                        .target-audience-checkbox {
                            display: flex;
                            margin-bottom: 16px;
                            .checkbox-section {
                                display: flex;
                                align-items: center;
                                &.gray-text {
                                    input[type=checkbox] {
                                        border: 1px solid #787878 !important;
                                    }
                                }
                                input {
                                    margin: auto 8px auto 0px;
                                }
                                .disabled {
                                    opacity: 0.5;
                                    cursor: not-allowed !important;
                                }
                                input[type=checkbox] {
                                    cursor: pointer;
                                    -webkit-appearance: none;
                                    -moz-appearance: none;
                                    appearance: none;
                                    outline: 0;
                                    background: #fff;
                                    height: 20px;
                                    width: 20px;
                                    border-radius: 4px;
                                    border: 1px solid #000;
                                    &:checked {
                                        border: 1px solid #F62369;
                                        background-color: #F62369;
                                        &::after {
                                            display: block;
                                        }
                                    }
                                    &::after {
                                        content: '';
                                        position: relative;
                                        left: 30%;
                                        top: 10%;
                                        width: 35%;
                                        height: 70%;
                                        border: solid #fff;
                                        border-width: 0 2px 2px 0;
                                        transform: rotate(45deg);
                                        display: none;
                                    }
                                    &:disabled {
                                        &::after {
                                            border-color: #fff;
                                        }
                                    }
                                }
                                &:first-child {
                                    margin-right: 16px;
                                }
                                div {
                                    font-size: 12px;
                                    vertical-align: super;
                                }
                            }
                        }
                        .bots-container-textarea {
                            margin-top: 16px;
                            textarea {
                                resize: none;
                                width: 100%;
                                height: 80px;
                                border: solid 1px #C5C9CD;
                                padding: 12px 16px;
                                font-size: 12px;
                                color: #333333;
                                border-radius: 4px;
                                &:focus-visible {
                                    outline: none;
                                }
                                &.active {
                                    border: 1px solid #EF4E40;
                                }
                            }
                            .bots-container-error-characters {
                                display: flex;
                                justify-content: flex-end;
                                position: relative;
                                &.active {
                                    justify-content: space-between;
                                    .error-message {
                                        display: block;
                                        font-size: 10px;
                                        padding-top: 4px;
                                        color: #EF4E40;
                                    }
                                    .bots-container-textarea-counter {
                                        color: #EF4E40;
                                    }
                                }
                                .error-message {
                                    display: none;
                                }
                                .bots-container-textarea-counter {
                                    position: absolute;
                                    top: -20px;
                                    right: 4px;
                                    font-size: 10px;
                                    padding-top: 4px;
                                    color: #716f83;
                                }
                            }
                        }
                    }
                }
            }
        }

        .account-setting-vajro-loader {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }
        .billing {
            .plan-details {
                border-radius: 4px;
                border: solid 1px #efefef;
                padding: 24px;
                .title {
                    font-size: 14px;
                }
                .paln-main-info {
                    margin-top: 16px;
                    .plan-info {
                        font-size: 12px;
                        margin-bottom: 8px;
                    }
                    .plan-type {
                        font-size: 12px;
                        font-weight: 600;
                        .plan-type-discount {
                            font-size: 10px;
                            color: rgba(0, 0, 0, 0.4);
                        }
                    }
                }
                .plan-usage {
                    padding: 16px;
                    margin-top: 16px;
                    border-radius: 2px;
                    border: solid 1px #e3e3e3;
                    .plan-usage-title {
                        font-size: 12px;
                        font-weight: 600;
                        margin-bottom: 4px;
                    }
                    .plan-usage-date-total {
                        display: flex;
                        justify-content: space-between;
                        font-size: 10px;
                        .plan-usage-total {
                            font-weight: 600;
                        }
                    }
                }
                .plan-benefits {
                    margin-top: 16px;
                    .plan-benefits-title {
                        font-size: 12px;
                        color: rgba(0, 0, 0, 0.5);
                    }
                    ul {
                        font-size: 10px;
                        padding: 12px 0px;
                        padding-left: 18px;
                        li {
                            margin-bottom: 12px;
                            &:last-child {
                                margin-bottom: 0px;
                            }
                        }
                    }
                }
                .cancel-subscription {
                    font-size: 12px;
                    color: #e62525;
                    cursor: pointer;
                }
                .orders {
                    margin-top: 16px;
                    .orders-title {
                        font-size: 10px;
                        font-weight: 600;
                        margin-bottom: 4px;
                    }
                    .orders-progress {
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        height: 1rem;
                        overflow: hidden;
                        font-size: .75rem;
                        background-color: #ededed;
                        border-radius: 2px;
                        .progress-bar {
                            display: -webkit-box;
                            display: -ms-flexbox;
                            display: flex;
                            -webkit-box-orient: vertical;
                            -webkit-box-direction: normal;
                            -ms-flex-direction: column;
                            flex-direction: column;
                            -webkit-box-pack: center;
                            -ms-flex-pack: center;
                            justify-content: center;
                            color: #fff;
                            text-align: center;
                            background-color: #F62369;
                            transition: width .6s ease;
                            border-radius: 2px;
                        }
                    }
                }
                .order-info {
                    display: flex;
                    font-size: 10px;
                    margin-top: 8px;
                    .order-info-circle {
                        border-radius: 100%;
                        width: 8px;
                        height: 8px;
                        background-color: #F62369;
                        margin: auto 0;
                        margin-right: 8px;
                    }
                    .order-info-number {
                        font-weight: 600;
                        padding-right: 4px;
                    }
                }
            }
            .billing-history {
                border-radius: 4px;
                border: solid 1px #efefef;
                padding: 24px;
                margin-top: 16px;
                .billing-history-change-plan {
                    display: flex;
                    justify-content: space-between;
                    font-size: 12px;
                    margin-bottom: 10px;
                    .change-plan {
                        cursor: pointer;
                        color: #F62369;
                    }
                }
                .subscription-price {
                    font-size: 14px;
                    font-weight: 600;
                    margin-bottom: 8px;
                }
                .subscription-date {
                    font-size: 12px;
                    margin-bottom: 24px;
                }
                .download-invoice {
                    font-size: 12px;
                    font-weight: 600;
                    cursor: pointer;
                }
            }
        }
        .blocked-users {
            height: 100%;
            position: relative;
            overflow-y: auto;
            padding: 24px;
            &:hover::-webkit-scrollbar-thumb {
                display: block;
            }
            .no-blocked-users-found {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 16px;
                height: 100%;
                padding: 24px;
                div {
                    text-align: center;
                }
            }
            .blocked-users-tag {
                background: #ffffff;
                border-bottom: solid 1px #707070;
                position: sticky;
                top: 0px;
                z-index: 99;
                .blocked-users-tag-list {
                    font-size: 12px;
                    padding: 12px;
                    width: fit-content;
                    &.active {
                        border-bottom: 4px solid #000000;
                    }
                }
            }
            .blocked-users-list {
                background-color: #ffffff;
                .blank-space {
                    height: 24px;
                    position: sticky;
                    top: 46px;
                    background-color: #ffffff;
                    z-index: 99;
                }
                input[type=checkbox] {
                    height: 20px;
                    width: 20px;
                    margin: auto;
                    border: 1.5px solid #acacac;
                    border-radius: 2.3px;
                }
                .blocked-users-table-head {
                    position: sticky;
                    top: 70px;
                    background: #f8f8f8;
                    z-index: 99;
                    border-bottom: 1px solid #e1dfea;
                    .blocked-users-align-head-center {
                        display: flex;
                        height: 45px;
                    }
                    .blocked-users-align-head-title {
                        margin: auto;
                        margin-left: 0px;
                        font-size: 14px;
                    }
                    .blocked-users-align-head-img {
                        margin: auto;
                        margin-right: 0px;
                        position: relative;
                        img {
                            cursor: pointer;
                        }
                    }
                }
                .blocked-users-table-body {
                    font-size: 12px;
                    .row {
                        border-bottom: 1px solid #e1dfea;
                    }
                    .blocked-users-align-center {
                        display: flex;
                        height: 48px;
                        .blocked-users-align-title {
                            margin: auto;
                            margin-left: 0px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                        .blocked-users-align-date {
                            margin: auto;
                            margin-left: 0px;
                            .added-date {
                                color: rgba(0, 0, 0, 0.5);
                                font-size: 10px;
                                margin-bottom: 4px;
                            }
                        }
                        .blocked-users-align-remove-btn {
                            margin: auto;
                            margin-right: 0px;
                            .remove-btn {
                                cursor: pointer;
                                border-radius: 4px;
                                background-color: #edf1ff;
                                padding: 4px 8px;
                                color: #4e71e6;
                            }
                        }
                    }
                }
            }
        }
        .blocked-users-app-update {
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            margin: auto;
            height: 100%;
            div {
                margin-bottom: 16px;
                &:last-child {
                    margin-bottom: 0px;
                }
            }
            .title {
                font-size: 16px;
            }
            .content-text {
                font-size: 12px;
                text-align: center;
                width: 75%;
                margin: 0px auto 16px;
            }
            .request-btn {
                background: #5c65aa;
                border: 1px solid #5c65aa;
                padding: 8px 14px;
                color: #fff;
                font-size: 14px;
                border-radius: 4px;
            }
        }
        .custom-features {
            font-size: 12px;
            height: 100%;
            position: relative;
            .custom-features-scroll {
                overflow-y: auto;
                height: ~"calc(100% - 76px)";
                &:hover::-webkit-scrollbar-thumb {
                    display: block;
                }
                .custom-features-title {
                    font-size: 14px;
                    font-weight: 600;
                    margin-bottom: 12px;
                }
                .custom-features-sub-title {
                    margin-bottom: 16px;
                }
                .custom-features-container {
                    display: flex;
                    .section-for-viewer, .section-for-broadcaster {
                        width: 50%;
                        padding: 24px;
                        overflow-y: auto;
                        .custom-features-heading {
                            font-size: 14px;
                            font-weight: 600;
                            padding-bottom: 24px;
                            position: relative;
                            .sub-custom-features-heading {
                                position: absolute;
                                font-size: 10px;
                                color: rgba(0, 0, 0, 0.4);
                            }
                        }
                        .switch-with-content {
                            margin-bottom: 16px;
                            display: flex;
                            .switch-outer {
                                margin: auto 0;
                                margin-right: 8px;
                                .switch {
                                    width: 26px;
                                    height: 16px;
                                    margin-bottom: 0;
                                    input:checked + .slider {
                                        background: #40d08b;
                                        box-shadow: none;
                                        &:before {
                                            transform: translateX(9px);
                                            -webkit-transform: translateX(9px);
                                            -ms-transform: translateX(9px);
                                        }
                                    }
                                    .slider {
                                        background: rgba(246, 36, 36, 0.8);
                                        &:before {
                                            width: 10px;
                                            height: 10px;
                                            top: 50%;
                                            margin-top: -5px;
                                            left: 3px;
                                            background-color: #FFFFFF;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                .custom-features-textarea {
                    margin-top: 8px;
                    .custom-features-textarea-title {
                        margin-bottom: 12px;
                    }
                    textarea {
                        resize: none;
                        height: 100px;
                        width: 75%;
                    }
                }
                .save-custom-features-btn {
                    // position: absolute;
                    // bottom: 0;
                    // right: 0;
                    // left: 0;
                    width: 100%;
                    background: #fff;
                    padding: 0px 24px 24px; 
                    .custom-features-save-btn {
                        margin-top: 16px;
                        padding: 8px 40px;
                        color: #ffffff;
                        font-size: 14px;
                        border-radius: 4px;
                        border: 0px;
                        background-color: #F62369;
                    }
                }
                .bots-container {
                    .heading {
                        font-size: 14px;
                        font-weight: 600;
                        padding: 0px 24px 24px 24px;
                        position: relative;
                    }
                    .list-bots-options {
                        display: flex;
                        flex-wrap: wrap;
                    }
                    .bots-container-card {
                        padding: 0px 24px 24px 24px;
                        width: 50%;
                    }
                    .switch-with-content {
                        margin-bottom: 16px;
                        display: flex;
                        .switch-outer {
                            margin: auto 0;
                            margin-right: 8px;
                            .switch {
                                width: 26px;
                                height: 16px;
                                margin-bottom: 0;
                                input:checked + .slider {
                                    background: #40d08b;
                                    box-shadow: none;
                                    &:before {
                                        transform: translateX(9px);
                                        -webkit-transform: translateX(9px);
                                        -ms-transform: translateX(9px);
                                    }
                                }
                                .slider {
                                    background: rgba(246, 36, 36, 0.8);
                                    &:before {
                                        width: 10px;
                                        height: 10px;
                                        top: 50%;
                                        margin-top: -5px;
                                        left: 3px;
                                        background-color: #FFFFFF;
                                    }
                                }
                            }
                        }
                    }
                    .viewer-broadcaster-options {
                        .option-for-view-broadcaster-checkbox {
                            .target-audience-checkbox {
                                display: flex;
                                margin-bottom: 16px;
                                .checkbox-section {
                                    display: flex;
                                    align-items: center;
                                    &.gray-text {
                                        input[type=checkbox] {
                                            border: 1px solid #787878 !important;
                                        }
                                    }
                                    input {
                                        margin: auto 8px auto 0px;
                                    }
                                    .disabled {
                                        opacity: 0.5;
                                        cursor: not-allowed !important;
                                    }
                                    input[type=checkbox] {
                                        cursor: pointer;
                                        -webkit-appearance: none;
                                        -moz-appearance: none;
                                        appearance: none;
                                        outline: 0;
                                        background: #fff;
                                        height: 20px;
                                        width: 20px;
                                        border-radius: 4px;
                                        border: 1px solid #000;
                                        &:checked {
                                            border: 1px solid #F62369;
                                            background-color: #F62369;
                                            &::after {
                                                display: block;
                                            }
                                        }
                                        &::after {
                                            content: '';
                                            position: relative;
                                            left: 30%;
                                            top: 10%;
                                            width: 35%;
                                            height: 70%;
                                            border: solid #fff;
                                            border-width: 0 2px 2px 0;
                                            transform: rotate(45deg);
                                            display: none;
                                        }
                                        &:disabled {
                                            &::after {
                                                border-color: #fff;
                                            }
                                        }
                                    }
                                    &:first-child {
                                        margin-right: 16px;
                                    }
                                }
                            }
                            .bots-container-textarea {
                                textarea {
                                    resize: none;
                                    width: 100%;
                                    height: 80px;
                                    border: solid 1px #C5C9CD;
                                    padding: 12px 16px;
                                    font-size: 14px;
                                    color: #333333;
                                    border-radius: 4px;
                                    &:focus-visible {
                                        outline: none;
                                    }
                                    &.active {
                                        border: 1px solid #EF4E40;
                                    }
                                }
                                .bots-container-error-characters {
                                    display: flex;
                                    justify-content: flex-end;
                                    &.active {
                                        justify-content: space-between;
                                        .error-message {
                                            display: block;
                                            font-size: 10px;
                                            padding-top: 4px;
                                            color: #EF4E40;
                                        }
                                        .bots-container-textarea-counter {
                                            color: #EF4E40;
                                        }
                                    }
                                    .error-message {
                                        display: none;
                                    }
                                    .bots-container-textarea-counter {
                                        font-size: 10px;
                                        padding-top: 4px;
                                        color: #716f83;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .submit-bots {
                position: sticky;
                bottom: 0;
                left: 0;
                right: 0;
                width: 100%;
                background: #fff;
                padding: 0px 24px 24px; 
                .submit-bots-btn {
                    margin-top: 16px;
                    padding: 8px 40px;
                    color: #ffffff;
                    font-size: 14px;
                    border-radius: 4px;
                    border: 0px;
                    background-color: #F62369;
                }
            }
        }
        .email-template {
            padding: 24px;
            overflow-y: auto;
            &:hover::-webkit-scrollbar-thumb {
                display: block !important;
            }
            .email-template-heading {
                font-weight: 500;
                font-size: 16px;
                line-height: 24px;
            }
            .email-template-text {
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                color: #333333;
            }
            .email-template-information {
                .email-template-heading {
                    margin-bottom: 8px;
                }
                .email-template-text {
                    a {
                        color: #F62369;
                        &:hover {
                            color: #F62369;
                            text-decoration: underline;
                        }
                    }
                }
            }
            .email-template-line {
                height: 1px;
                background: #E4E4E4;
                width: 100%;
                margin: 32px 0px;
            }
            .email-template-category {
                .email-template-select-category{
                    margin-top: 16px;
                    .email-template-heading {
                        margin-bottom: 16px;
                    }
                    .email-template-list-of-options {
                        margin-bottom: 38px;
                        .email-template-select-btn {
                            position: relative;
                            background: #FFF3F7;
                            border: 2px solid #F62369;
                            border-radius: 4px;
                            padding: 8px;
                            font-weight: 500;
                            font-size: 14px;
                            color: #F62369;
                            .tick-mark {
                                position:absolute;
                                right: -8px;
                                top: -8px;
                                background: #F62369;
                                height: 20px;
                                width: 20px;
                                border-radius: 100%;
                                &::after {
                                    content: "";
                                    display: inline-block;
                                    transform: rotate(45deg);
                                    height: 12px;
                                    width: 6px;
                                    border-bottom: 2px solid #ffffff;
                                    border-right: 2px solid #ffffff;
                                    border-radius: 2px;
                                }
                            }
                        }
                    }
                }
            }
            .email-template-customize-section {
                .email-template-create-template {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 14px;
                    .email-template-customize-btn {
                        padding: 8px 16px;
                        color: #ffffff;
                        background: #F62369;
                        border-radius: 4px;
                        border: 1px solid #F62369;
                        &:hover {
                            background: #FFF3F7;
                            color: #F62369;
                        }
                    }
                }
                .email-template-list-of-templates {
                    display: flex;
                    .email-template-card {
                        width: 33.33333%;
                        background: #FFFFFF;
                        border: 1px solid #DEDEDE;
                        border-radius: 4px;
                        padding: 14px 12px;
                        margin-top: 16px;
                        &:hover {
                            box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, .2);
                        }
                        .email-template-title-option {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            margin-bottom: 16px;
                            .email-template-text {
                                width: 75%;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                color: #000000;
                                font-weight: 500;
                                font-size: 12px;
                            }
                            .email-template-image {
                                cursor: pointer;
                                position: relative;
                                .dropdown-menu {
                                    left: -108px;
                                    top: 28px;
                                }
                            }
                        }
                        .email-template-primary-template {
                            background: #E8EEFF;
                            border: 1px solid #A0B9FF;
                            border-radius: 4px;
                            padding: 4px 8px;
                            color: #2E64FF;
                            width: max-content;
                            font-weight: 500;
                            font-size: 14px;
                            margin-bottom: 16px;
                        }
                        .email-template-text-heading {
                            color: #000000;
                            font-weight: 500;
                            font-size: 14px;
                            margin-bottom: 8px;
                        }
                        .email-template-subject {
                            margin-bottom: 16px;
                        }
                    }
                }
            }
        }

        .fb-direct-message {
            padding: 24px;
            overflow-y: auto;
            &:hover::-webkit-scrollbar-thumb {
                display: block !important;
            }
            .fb-message-heading {
                font-weight: 500;
                font-size: 16px;
                line-height: 24px;
            }
            .fb-message-text {
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                color: #333333;
            }
            .fb-message-information {
                .fb-message-heading {
                    margin-bottom: 8px;
                }
                .fb-message-text {
                    a {
                        color: #F62369;
                        &:hover {
                            color: #F62369;
                            text-decoration: underline;
                        }
                    }
                }
            }
            .fb-message-line {
                height: 1px;
                background: #E4E4E4;
                width: 100%;
                margin: 32px 0px;
            }
            .fb-message-category {
                .fb-message-select-category{
                    margin-top: 16px;
                    .fb-message-heading {
                        margin-bottom: 16px;
                    }
                    .fb-message-list-of-options {
                        margin-bottom: 38px;
                        .fb-message-select-btn {
                            position: relative;
                            background: #FFF3F7;
                            border: 2px solid #F62369;
                            border-radius: 4px;
                            padding: 8px 16px;
                            font-weight: 500;
                            font-size: 14px;
                            color: #F62369;
                            .tick-mark {
                                position:absolute;
                                right: -8px;
                                top: -8px;
                                background: #F62369;
                                height: 20px;
                                width: 20px;
                                border-radius: 100%;
                                &::after {
                                    content: "";
                                    display: inline-block;
                                    transform: rotate(45deg);
                                    height: 12px;
                                    width: 6px;
                                    border-bottom: 2px solid #ffffff;
                                    border-right: 2px solid #ffffff;
                                    border-radius: 2px;
                                }
                            }
                        }
                    }
                }
            }
            .fb-message-empty-status-img {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                .fb-message-empty-status-container {
                    .fb-message-empty-status-heading {
                        color: #000000;
                        font-weight: 500;
                        font-size: 16px;
                        margin-bottom: 8px;
                    }
                    .fb-message-empty-status-sub-heading {
                        color: #333333;
                        font-weight: 400;
                        font-size: 14px;
                    }
                }
            }
            .fb-message-customize-section {
                .fb-message-create-template {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 14px;
                    .fb-message-customize-btn {
                        padding: 8px 16px;
                        color: #ffffff;
                        background: #F62369;
                        border-radius: 4px;
                        border: 1px solid #F62369;
                        &.active {
                            cursor: not-allowed;
                            opacity: 0.5;
                            &:hover {
                                opacity: 0.5;
                                background: #F62369;
                                color: #ffffff;
                            }
                        }
                        &:hover {
                            background: #FFF3F7;
                            color: #F62369;
                        }
                    }
                }
                .fb-message-list-of-templates {
                        --bs-gutter-x: 1.5rem;
                        --bs-gutter-y: 0;
                        display: flex;
                        flex-wrap: wrap;

                    .fb-message-list-of-templates-padding {
                        padding-right: 12px;
                        padding-left: 12px;
                    }
                    .card-bottom {
                        margin-top: auto;
                        width: 100%;
                    }
                    .fb-message-card {
                        background: #F1F1F1;
                        border: 1px solid #DEDEDE;
                        width: 100%;
                        border-radius: 4px;
                        padding: 14px 12px;
                        margin-top: 16px;
                        position: relative;
                        display: flex;
                        flex-direction: column;
                        cursor: pointer;
                        &:hover {
                            box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, .2);
                        }
                        .fb-message-title-option {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            margin-bottom: 16px;
                            height: 24px;
                            .fb-message-text {
                                width: 75%;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                color: #000000;
                                font-size: 12px;
                                font-weight: 500;
                                &.active {
                                    width: 100%;
                                }
                            }
                            .fb-message-image {
                                cursor: pointer;
                                position: relative;
                                .dropdown-menu {
                                    margin-top: 0px;
                                    padding: 8px;
                                    left: -186px;
                                    top: 28px;
                                    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
                                    width: 210px;
                                    div {
                                        padding: 4px 8px;
                                        color: #000000;
                                        font-weight: 500;
                                        font-size: 14px;
                                        border-radius: 4px;
                                        &:hover {
                                            background: #F4F4F4;
                                        }
                                    }
                                }
                            }
                        }
                        .fb-message-primary-template-flex {
                            width: 100%;
                            display: flex;
                            justify-content: flex-end;
                            align-items: center;
                            height: 28px;
                            .fb-message-primary-template {
                                background: #E8EEFF;
                                border: 1px solid #A0B9FF;
                                border-radius: 4px;
                                padding: 4px 8px;
                                color: #2E64FF;
                                width: max-content;
                                font-weight: 500;
                                font-size: 12px;
                            }
                        }
                        .fb-message-primary-image {
                            width: 100%;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            margin-bottom: 10px;
                            border: 1px solid #ccc;
                            p{
                                position: absolute;
                                color: #acacac;
                            }
                        }
                        .fb-message-text-heading {
                            color: #000000;
                            font-weight: 600;
                            font-size: 12px;
                            margin-bottom: 8px;
                        }
                        .fb-message-text-content {
                            color: #333333;
                            font-weight: 500;
                            font-size: 12px;
                        }
                        .fb-message-button {
                            background: #ffffff;
                            border-radius: 4px;
                            width: 85%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            text-align: center;
                            margin: 8px auto 8px auto;
                            padding: 8px;
                            font-weight: 600;
                            font-size: 12px;
                            &.margin-bottom-0 {
                                margin: 0px auto 0px;
                            }
                        }
                    }
                }
            }
        }
    }
    .frequently-asked {
        padding: 24px;
        font-size: 12px;
        .faq-heading {
            font-size: 14px;
            margin-bottom: 12px;
        }
    
        .row {
            margin-right: -12px !important;
            margin-left: -12px !important;
    
            &>div {
                margin-bottom: 0;
            }
    
            [class*='col-'] {
                padding: 0 12px;
            }
        }
    
        .panel-group {
            .panel {
                background-color: transparent;
                border: solid fade(@theme-color, 20%);
                border-width: 1px 0 0;
                border-radius: 0;
                box-shadow: none;
                margin: 0;
                transition: border .25 ease-in, border-radius .25 ease;
    
                &:last-child {
                    border-bottom-width: 1px;
                }
    
                .panel-heading {
                    position: relative;
                    text-transform: none;
                    padding: 20px 0;
                    background-color: transparent;
                    border: none;
                    cursor: pointer;
                    transition: background-color .25s ease;
    
                    &:hover {
                        .panel-title {
                            color: @theme-color;
                        }
                    }
    
                    &:before, &:after {
                        background: @theme-color;
                        transition: background-color .25s ease;
                    }
    
                    &:before {
                        content: '';
                        position: absolute;
                        width: 12px;
                        height: 2px;
                        top: 50%;
                        right: 20px;
                        margin-top: -1px;
                        margin-right: -1px;
                    }
    
                    &:after {
                        content: '';
                        position: absolute;
                        width: 2px;
                        height: 12px;
                        top: 50%;
                        right: 24px;
                        margin-top: -6px;
                        -ms-transform: rotate(-90deg);
                        transform: rotate(-90deg);
                        opacity: 0;
                        transition: transform .25s ease,opacity .25s ease 75ms;
                    }
    
                    &.collapsed:after {
                        -ms-transform: rotate(0deg);
                        transform: rotate(0deg);
                        opacity: 1;
                    }
    
                    .panel-title {
                        max-width: 85%;
                        color: #4d4d4d;
                        font-size: 14px;
                        line-height: 1.4;
                    }
                }
    
                .panel-body {
                    color: #666666;
                    padding: 24px 16px;
                    font-size: 14px;
                    line-height: 1.75;
                    background-color: fade(@theme-color, 05%);
                    border-radius: 3px;
                    margin-bottom: 16px;
                }
            }
        }
    }
    .quick-link-popup-container {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.25);
        &.active {
            display: flex;
        }
        .quick-link-popup-card {
            height: auto;
            width: 300px;
            margin: auto;
            background: #FFFFFF;
            border-radius: 8px;
            padding: 24px 16px;
            text-align: center;
            .quick-link-popup-header {
                padding-bottom: 16px;
                .quick-link-popup-title {
                    color: #000000;
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 22px;
                }
            }
            .quick-link-popup-content {
                padding-bottom: 24px;
                .quick-link-popup-text {
                    color: #000000;
                    font-weight: 400;
                    font-size: 14px;
                    line-height: 22px;
                }
            }
            .quick-link-popup-actions {
                .quick-link-popup-cancel {
                    background: #FFFFFF;
                    border: 1px solid #ADADAD;
                    border-radius: 4px;
                    padding: 8px 12px;
                    margin-right: 8px;
                }
                .quick-link-popup-confirm {
                    padding: 8px 12px;
                    background: #FD3232;
                    border: 1px solid #FD3232;
                    border-radius: 4px;
                    color: #ffffff;
                }
            }
        }
    }
}

.create-email-template {
    height: 100vh;
    width: 0;
    position: fixed;
    z-index: 99;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.4);
    transition: 0.10s;
    &.active {
        width: 100vw;
        transition: 0.1s;
    }
    .create-email-template-sidenav {
        height: 100%;
        width: 0px;
        position: fixed;
        z-index: 1;
        top: 0;
        right: 0px;
        background-color: #ffffff;
        overflow-x: hidden;
        transition: 0.5s;
        &.active {
            width: 680px;
            transition: 0.5s;
        }
        .create-email-template-main-content {
            position: relative;
            padding: 20px;
            height: 100%;
            .create-email-template-body {
                overflow-y: auto;
                &:hover::-webkit-scrollbar-thumb {
                    display: block;
                }
                .create-email-template-heading-close-btn {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 32px;
                    .heading {
                        font-weight: 500;
                        font-size: 18px;
                        color: #333333;
                    }
                }
                .create-email-template-title {
                    font-weight: 500;
                    font-size: 16px;
                    color: #000000;
                    margin-bottom: 20px;
                }
                .create-email-template-sub-title {
                    font-weight: 500;
                    font-size: 14px;
                    color: #000000;
                }
                .create-email-template-configure-template {
                    margin-bottom: 32px;
                    .input-title {
                        font-weight: 400;
                        font-size: 14px;
                        margin-bottom: 4px;
                    }
                    .create-email-template-input {
                        position: relative;
                        input {
                            width: 100%;
                            padding: 12px 16px;
                            font-weight: 400;
                            font-size: 14px;
                            color: #333333;
                            border: 1px solid #C5C9CD;
                            border-radius: 4px;
                            &:focus-visible {
                                outline: none;
                            }
                            &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
                                color: #CFCFCF;
                                opacity: 1; /* Firefox */
                            }
                              
                            &:-ms-input-placeholder { /* Internet Explorer 10-11 */
                                color: #CFCFCF;
                            }
                              
                            &::-ms-input-placeholder { /* Microsoft Edge */
                                color: #CFCFCF;
                            }
                            &.active {
                                border: 1px solid #EF4E40;
                            }
                        }
                        .show-error-message {
                            position: absolute;
                            bottom: -20px;
                            left: 0;
                            color: #EF4E40;
                            font-weight: 500;
                            font-size: 12px;
                        }
                    }
                }
                .create-email-template-customize-email-content {
                    .create-email-template-subject {
                        font-weight: 400;
                        font-size: 14px;
                        color: #333333;
                        margin-top: 8px;
                        margin-bottom: 20px;
                    }
                    .title {
                        font-weight: 400;
                        font-size: 14px;
                        color: #000000;
                        margin-bottom: 4px;
                    }
                }
                .create-email-template-set-template-checkbox {
                    display: flex;
                    align-items: flex-start;
                    .create-email-template-checkbox {
                        margin-right: 12px;
                        height: 20px;
                        width: 20px;
                    }
                    .create-email-template-content {
                        .checkbox-title {
                            font-weight: 500;
                            font-size: 14px;
                            color: #000000;
                            margin-bottom: 4px;
                        }
                        .checkbox-sub-title {
                            font-weight: 400;
                            font-size: 12px;
                            color: #333333;
                        }
                    }
                }
            }
            .create-email-template-footer {
                position: sticky;
                bottom: 0;
                right: 0;
                left: 0;
                padding: 14px 20px;
                box-shadow: 0px -4px 24px rgba(0, 0, 0, 0.12);
                background: #ffffff;
                button {
                    border-radius: 4px;
                    padding: 8px 16px;
                    font-weight: 600;
                    font-size: 14px;
                }
                .cancel-btn {
                    background: #FFFFFF;
                    border: 1px solid #D3D3D3;
                    color: #333333;
                    margin-right: 10px;
                    &:hover {
                        background: rgba(211, 211, 211, 0.2);
                    }
                }
                .create-btn {
                    background: #F62369;
                    border: 1px solid #F62369;
                    color: #ffffff;
                    &:hover {
                        background: #FFF3F7;
                        color: #F62369;
                    }
                }
            }
        }
    }
}


.create-fb-message {
    height: 100vh;
    width: 0;
    position: fixed;
    z-index: 99;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.4);
    transition: 0.10s;
    &.active {
        width: 100vw;
        transition: 0.3s;
    }
    .create-fb-message-sidenav {
        height: 100%;
        width: 0px;
        position: fixed;
        z-index: 1;
        top: 0;
        right: 0px;
        background-color: #ffffff;
        transition: 0.5s;
        &.active {
            width: 912px;
            transition: 0.2s;
        }
        .create-fb-message-main-content {
            position: relative;
            height: 100%;
            .create-fb-message-header {
                background: #ffffff;
                position: sticky;
                top: 0px;
                padding: 20px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #DEDEDE;
                z-index: 9;
                .heading {
                    font-weight: 500;
                    font-size: 18px;
                    color: #333333;
                }
                img {
                    &.active {
                        cursor: not-allowed;
                    }
                }
            }
            .create-fb-message-body {
                display: flex;
                .create-fb-message-title {
                    font-weight: 500;
                    font-size: 16px;
                    color: #000000;
                    margin-bottom: 20px;
                }
                .create-fb-message-sub-title {
                    font-weight: 500;
                    font-size: 14px;
                    color: #000000;
                    &.error-message {
                        color: #EF4E40;
                    }
                }
                .error-message {
                    color: #EF4E40;
                    font-size: 12px;
                    margin-top: 4px;
                    font-weight: 500;
                }
                
                .create-fb-message-input-container {
                    margin-bottom: 32px;
                    .create-fb-message-sub-title {
                        margin-bottom: 8px;
                    }
                    input {
                        padding: 12px 16px;
                        border: 1px solid #C5C9CD;
                        border-radius: 4px;
                        color: #333333;
                        font-weight: 400;
                        font-size: 14px;
                        width: 100%;
                        &:focus-visible {
                            outline: none;
                        }
                        &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
                            color: #CFCFCF;
                            opacity: 1; /* Firefox */
                        }
                          
                        &:-ms-input-placeholder { /* Internet Explorer 10-11 */
                            color: #CFCFCF;
                        }
                          
                        &::-ms-input-placeholder { /* Microsoft Edge */
                            color: #CFCFCF;
                        }
                        &.active {
                            border: 1px solid #EF4E40;
                        }
                    }
                }
                .create-fb-message-textarea-container {
                    .create-fb-message-textarea {
                        margin-bottom: 20px;
                        .create-fb-message-flex {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            margin-bottom: 8px;
                        }
                    }
                    textarea {
                        resize: none;
                        width: 100%;
                        padding: 12px 16px;
                        border: 1px solid #C5C9CD;
                        border-radius: 4px;
                        color: #333333;
                        font-size: 14px;
                        &:focus-visible {
                            outline: none;
                        }
                        &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
                            color: #CFCFCF;
                            opacity: 1; /* Firefox */
                        }
                          
                        &:-ms-input-placeholder { /* Internet Explorer 10-11 */
                            color: #CFCFCF;
                        }
                          
                        &::-ms-input-placeholder { /* Microsoft Edge */
                            color: #CFCFCF;
                        }
                        &.active {
                            border: 1px solid #EF4E40;
                        }
                    }
                }
                .create-fb-message-value-update {
                    width: 60%;
                    padding: 20px;
                    overflow-y: auto;
                    height: ~"calc(100vh - 133px)";
                    &:hover::-webkit-scrollbar-thumb {
                        display: block;
                    }
                    .create-fb-message-set-template-checkbox {
                        display: flex;
                        align-items: flex-start;
                        .create-fb-message-checkbox {
                            margin-right: 12px;
                            -webkit-appearance: none;
                            -moz-appearance: none;
                            appearance: none;
                            outline: 0;
                            background: #fff;
                            height: 20px;
                            width: 20px;
                            border-radius: 4px;
                            border: 1px solid #000;
                            &:checked {
                                border: 1px solid #F62369;
                                background-color: #F62369;
                                &::after {
                                    display: block;
                                }
                            }
                            &::after {
                                content: '';
                                position: relative;
                                left: 30%;
                                top: 10%;
                                width: 35%;
                                height: 70%;
                                border: solid #fff;
                                border-width: 0 2px 2px 0;
                                transform: rotate(45deg);
                                display: none;
                            }
                        }
                        .create-fb-message-content {
                            .checkbox-title {
                                font-weight: 500;
                                font-size: 14px;
                                color: #000000;
                                margin-bottom: 4px;
                            }
                            .checkbox-sub-title {
                                font-weight: 400;
                                font-size: 12px;
                                color: #333333;
                            }
                        }
                    }
                }
                .create-fb-message-preview {
                    width: 40%;
                    overflow-y: auto;
                    height: ~"calc(100vh - 133px)";
                    &:hover::-webkit-scrollbar-thumb {
                        display: block;
                    }
                    .create-fb-message-preview-main-heading {
                        text-align: center;
                        color: #000000;
                        font-weight: 500;
                        font-size: 16px;
                        padding: 20px;
                        position: sticky;
                        top: 0px;
                        background: #ffffff;
                        z-index: 9;
                    }
                    .create-fb-message-preview-container {
                        position: relative;
                        height: ~"calc(100vh - 196px)";
                        .create-fb-message-preview-header {
                            display: flex;
                            padding: 12px 16px;
                            align-items: center;
                            flex: 0 0 68px;
                            position: sticky;
                            top: 63px;
                            background: #ffffff;
                            border-top: 1px solid #DEDEDE;
                            border-left: 1px solid #DEDEDE;
                            height: 63px;
                            .create-fb-message-preview-back-arrow {
                                margin-right: 8px;
                                display: flex;
                                flex: 0 0 24px;
                            }
                            .create-fb-message-preview-user-name-logo {
                                display: flex;
                                align-items: center;
                                flex: 1 1 auto;
                                img {
                                    height: 44px;
                                    border-radius: 50%;
                                    margin-right: 8px;
                                }
                                .user-name-active-time {
                                    width: 100%;
                                    .user-name {
                                        color: #000000;
                                        font-weight: 600;
                                        font-size: 14px;
                                        width: 200px;
                                        white-space: nowrap;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                    }
                                    .active-time {
                                        color: #808080;
                                        font-weight: 500;
                                        font-size: 12px;
                                    }
                                }
                            }
                        }
                        .create-fb-message-preview-message-body {
                            display: flex;
                            flex: 1 1 auto;
                            border-left: 1px solid #DEDEDE;
                            background: url('/img/blynk/config/fb-bg-image.svg') 10px 5px no-repeat;
                            height: auto;
                            overflow-y: auto;
                            .preview-message-body-card {
                                display: flex;
                                padding: 16px;
                                overflow-y: auto;
                                height: ~"calc(100vh - 357px)";
                                .user-logo {
                                    display: flex;
                                    flex: 0 0 44px;
                                    align-items: flex-end;
                                    .client-log {
                                        height: 44px;
                                        border-radius: 50%;
                                    }
                                }
                                .fb-chat-card {
                                    cursor: pointer;
                                    flex: 1 1 auto;
                                    margin-left: 16px;
                                    display: flex;
                                    align-items: flex-end;
                                    .fb-chat-card-width {
                                        display: flex;
                                        flex-direction: column;
                                        width: 90%;
                                        background: #F1F1F1;
                                        border-radius: 4px;
                                        padding: 16px;
                                        min-width: 200px;
                                        .product-image {
                                            display: flex;
                                            flex-direction: column;
                                            justify-content: center;
                                            align-items: center;
                                            margin-bottom: 24px;
                                            img {
                                                margin-bottom: 8px;
                                            }
                                            div {
                                                color: #9B9B9B;
                                                font-weight: 400;
                                                font-size: 10px;
                                            }
                                        }
                                        .fb-chat-content {
                                            margin-bottom: 24px;
                                            color: #333333;
                                            .fb-chat-content-heading {
                                                font-weight: 600;
                                                font-size: 12px;
                                                margin-bottom: 8px;
                                                overflow-wrap: anywhere;
                                            }
                                            .fb-chat-content-body {
                                                font-weight: 400;
                                                font-size: 12px;
                                                overflow-wrap: anywhere;
                                            }
                                        }
                                        .fb-chat-button {
                                            div {
                                                font-weight: 600;
                                                font-size: 12px;
                                                line-height: 18px;
                                                padding: 8px;
                                                background: #FFFFFF;
                                                border-radius: 4px;
                                                text-align: center;
                                                width: 100%;
                                            }
                                            .fb-chat-button-buy-now {
                                                margin-bottom: 8px;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        .create-fb-message-preview-message {
                            flex: 1 1 97px;
                            border-left: 1px solid #DEDEDE;
                            position: sticky;
                            bottom: 0;
                            height: 97px;
                        }
                    }
                }
            }
            .create-fb-message-footer {
                position: sticky;
                bottom: 0;
                right: 0;
                left: 0;
                padding: 14px 20px;
                box-shadow: 0px -4px 24px rgba(0, 0, 0, 0.12);
                background: #ffffff;
                button {
                    border-radius: 4px;
                    padding: 8px 16px;
                    font-weight: 600;
                    font-size: 14px;
                }
                .cancel-btn {
                    background: #FFFFFF;
                    border: 1px solid #D3D3D3;
                    color: #333333;
                    margin-right: 10px;
                    &.active {
                        cursor: not-allowed;
                        opacity: 0.3;
                        &:hover {
                            background: rgba(211, 211, 211, 0.2);
                        }
                    }
                    &:hover {
                        background: rgba(211, 211, 211, 0.2);
                    }
                }
                .create-btn {
                    background: #F62369;
                    border: 1px solid #F62369;
                    color: #ffffff;
                    &.active {
                        cursor: not-allowed;
                        opacity: 0.3;
                        &:hover {
                            background: #F62369;
                            color: #ffffff;
                        }
                    }
                    &:hover {
                        background: #FFF3F7;
                        color: #F62369;
                    }
                }
            }
        }
    }
}

.fb-delete-popup {
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 99;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    justify-content: center;
    align-items: center;
    margin: auto;
    &.active {
        display: flex;
    }
    .fb-delete-popup-card {
        width: 40%;
        height: auto;
        background: #FFFFFF;
        border-radius: 4px;
        .fb-delete-popup-body {
            padding: 16px;
            border-bottom: 1px solid #DEDEDE;
            .fb-delete-popup-body-header {
                color: #000000;
                font-weight: 600;
                font-size: 16px;
                margin-bottom: 16px;
            }
            .fb-delete-popup-body-para {
                font-weight: 400;
                font-size: 14px;
                &.first-child {
                    margin-bottom: 8px;
                }
            }
        }
        .fb-delete-popup-footer {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding: 16px;
            button {
                padding: 8px 16px;
                font-weight: 600;
                font-size: 14px;
                border-radius: 4px;
            }
            .fb-delete-popup-footer-cancel {
                background: #ffffff;
                color: #333333;
                border: 1px solid #333333;
                margin-right: 8px;
                &:hover {
                    background: rgba(211, 211, 211, 0.2);
                }
            }
            .fb-delete-popup-footer-delete {
                background: #F62369;
                color: #FFFFFF;
                border: 1px solid #F62369;
                &:hover {
                    background: #FFF3F7;
                    color: #F62369;
                }
            }
        }
    }
}
.mb-8px{
    margin-bottom: 8px;
}
.d-flex{
    display: flex!important;
}
.align-items-stretch{
    align-items: stretch;
}
@media only screen and (max-width: 768px) {
    .col-sm-w-100{
        width: 100%;
    }
}
.blynk-dashboard {
    .blynk-main-container {
        .app-version-update {
            width: 100%;
            display: flex;
            .header-title {
                font-size: 16px;
                line-height: 1.75;
                color: #262626;
                margin-bottom: 16px;
                font-weight: 600;
            }
            .title {
                font-size: 14px;
                color: #262626;
                display: flex;
                justify-content: left;
                align-items: center;
            }
            .update-view {
                padding: 24px;
                flex: 0 0 50%;
                overflow-y: auto;
                /* scroll bar style starts */
                &::-webkit-scrollbar {
                    height: 6px;
                    background-color: #F5F5F5;
                    display: block !important;
                }
                &::-webkit-scrollbar-track {
                    background: #DDDDDD;
                    margin: 0;
                }
                &::-webkit-scrollbar-thumb {
                    background: #BDBDBD;
                    display: block !important;
                }
                &::-webkit-scrollbar-thumb:hover {
                    background: rgba(0, 0, 0, .35); 
                }
                /* scroll bar style ends */
                .app-version-update-section {
                    margin-bottom: 16px;
                    width: 100%;
                    .input-group {
                        display: flex;
                        margin-bottom: 8px;
                        .title {
                            width: 50%;
                        }
                        input:focus-visible {
                            outline: 0px;
                        }
                        input::-webkit-outer-spin-button,
                        input::-webkit-inner-spin-button {
                            display: none;
                            -webkit-appearance: none;
                            margin: 0;
                        }

                        input[type=number] {
                            -moz-appearance:textfield; /* Firefox */
                        }
                        input {
                            border: solid 1px #C5C9CD;
                            padding: 6px 16px;
                            font-size: 14px;
                            color: #262626;
                            border-radius: 4px;
                            width: 120px;
                        }
                    }
                    .switch-group {
                        display: flex;
                        .title {
                            width: 50%;
                        }
                        .switch-outer {
                            margin: auto 0;
                            margin-right: 4px;
                            .switch {
                                width: 24px;
                                height: 14px;
                                margin-bottom: 0;
                                input:checked + .slider {
                                    background: #40d08b;
                                    &:before {
                                        transform: translateX(10);
                                        -webkit-transform: translateX(10px);
                                        -ms-transform: translateX(10px);
                                    }
                                }
                                .slider {
                                    background: rgba(0, 0, 0, 0.4);
                                    &:before {
                                        width: 8px;
                                        height: 8px;
                                        top: 50%;
                                        margin-top: -4px;
                                        left: 3px;
                                        background-color: #FFFFFF;
                                    }
                                }
                            }
                        }
                    }
                }
                .app-version-update-message {
                    margin-bottom: 16px;
                    .title {
                        margin-bottom: 8px;
                    }
                    textarea {
                        resize: none;
                        width: 100%;
                        height: 100px;
                        border: solid 1px #C5C9CD;
                        padding: 12px 16px;
                        font-size: 14px;
                        color: #262626;
                        border-radius: 4px;
                        &:focus-visible {
                            outline: 0px;
                        }
                    }
                }
                .app-version-update-submit-btn {
                    display: flex;
                    align-items: center;
                    justify-content: right;
                    .update-submit-btn {
                        width: 35%;
                        border-radius: 4px;
                        background: #F62369;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin: auto 0;
                        padding: 8px 20px;
                        color: #ffffff;
                    }
                }
            }
            .mobile-view {
                padding: 24px;
                flex: 1 1 50%;
                overflow-y: auto;
                /* scroll bar style starts */
                &::-webkit-scrollbar {
                    height: 6px;
                    background-color: #F5F5F5;
                    display: block !important;
                }
                &::-webkit-scrollbar-track {
                    background: #DDDDDD;
                    margin: 0;
                }
                &::-webkit-scrollbar-thumb {
                    background: #BDBDBD;
                    display: block !important;
                }
                &::-webkit-scrollbar-thumb:hover {
                    background: rgba(0, 0, 0, .35); 
                }
                /* scroll bar style ends */

                .mobile-preveiw-toggle {
                    margin-bottom: 20px;
                    padding-top: 10px;
                }
                .preview-iphone-frame {
                    width: 230x;
                    height: 450px;
                    position: relative;
                    margin: 0 auto;
                    .iphone-bar {
                        position: absolute;
                        width: 144px;
                        height: 20px;
                        top: 12px;
                        left: 50%;
                        margin-left: -72px;
                        background-color: #fff;
                        border-radius: 0 0 16px 16px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        z-index: 1;
                        .iphone-speaker {
                            width: 32px;
                            height: 4px;
                            background-color: #cfd3d7;
                            border-radius: 4px;
                            display: inline-block;
                        }
                        .iphone-camera {
                            width: 8px;
                            height: 8px;
                            background-color: #cfd3d7;
                            border-radius: 50%;
                            border: 2px solid #cfd3d7;
                            // background-image: -webkit-gradient(linear, right top, left top, from(#1a1a1a), to(#2363a6));
                            margin-left: 8px;
                        }
                    }
                    .preview-iphone-framecontent {
                        position: absolute;
                        left: 0;
                        right: 0;
                        top: 0;
                        bottom: 0;
                        background: url("../img/iphone-wallpaper-20.jpg");
                        background-size: cover;
                        overflow: hidden;
                
                        .preview-iphone-container {
                            position: relative;
                        }
                
                        .iphone_preview {
                            position: absolute;
                            top: 150px;
                            right: 2px;
                            left: 2px;
                            border-radius: 10px;
                            box-shadow: rgba(212, 212, 213, 1) 0px 1px 3px 0px;
                            max-width: 360px;
                            background-color: white;
                            overflow-y: hidden;
                            padding: 8px;
                            width: 98%;
                            cursor: pointer;
                
                            &.showPreview {
                                top: 35px;
                                transition: top 0.4s ease-in-out;
                            }
                    
                            .iphone_preview_header {
                                color: rgb(85, 85, 85);
                                display: flex;
                                -webkit-box-pack: justify;
                                justify-content: space-between;
                                font-weight: 300;
                                line-height: 20px;
                                font-size: 11px;
                                .iphone_preview_header_icon {
                                .fa-apple {
                                    margin-right: 3px;
                                    background: black;
                                    color: white;
                                    padding: 2px 3.29px;
                                    border-radius: 4px;
                                }
                                }
                                .app-name {
                                    text-transform: uppercase;
                                }
                            }
                            .iphone_preview_img {
                                margin: 5px -8px 10px;
                                img {
                                    height: 125px;
                                    width: 100%;
                                    object-fit: cover;
                                }
                            }
                            .iphone_preview_body {
                                width: 100%;
                                margin-top: 8px;
                                display: flex;
                                justify-content: space-between;
                                .iphone_preview_body_content_text {
                                    width: 80%;
                                    .notification-title {
                                        font-size: 10px;
                                        color: #000000;
                                        line-height: 16px;
                                    }
                                    .notification-msg {
                                        color: #000000;
                                        font-size: 10px;
                                        line-height: 16px;
                                    }
                                }
                                .iphone_preview_content_image {
                                    align-self: flex-start;
                                    width: 35px;
                                    height: 35px;
                                    border-radius: 3px;
                                    object-fit: cover;
                        
                                    &.in {
                                        display: none;
                                    }
                                }
                            }
                        }
                    }
                }
                
                .preview-android-frame {
                    width: 260px;
                    height: 496px;
                    position: relative;
                    margin: 0 auto;
                    .android-bar {
                        position: absolute;
                        height: 20px;
                        top: 12px;
                        right: 0;
                        left: 0;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        z-index: 1;
                        .android-speaker {
                            width: 64px;
                            height: 4px;
                            background-color: #cfd3d7;
                            border-radius: 4px;
                            display: inline-block;
                        }
                        .camera-light {
                            display: flex;
                            width: 30px;
                            justify-content: space-between;
                            position: absolute;
                            left: 40px;
                        }
                        .android-camera {
                            width: 8px;
                            height: 8px;
                            border-radius: 50%;
                            border: 2px solid #cfd3d7;
                        }
                        .android-camera-light {
                            width: 8px;
                            height: 8px;
                            border-radius: 50%;
                            border: 2px solid #cfd3d7;
                        }
                    }
                    .android-bottom-bar {
                        position: absolute;
                        right: 0;
                        left: 0;
                        bottom: 16px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        z-index: 1;
                        .android-bottom-speaker {
                            width: 64px;
                            height: 4px;
                            background-color: #cfd3d7;
                            border-radius: 4px;
                            display: inline-block;
                        }
                    }
                    .preview-android-framecontent {
                        position: absolute;
                        left: 0;
                        right: 0;
                        top: 0;
                        bottom: 0;
                        border: 8px solid #fff;
                        border-top-width: 40px;
                        border-bottom-width: 40px;
                        border-radius: 24px;
                        background: url("../img/iphone-wallpaper-20.jpg");
                        background-size: cover;
                        overflow: hidden;
                        box-shadow: 14px 21px 42px 10px rgba(0, 0, 0, 0.2);
                
                        .preview-android-container {
                            position: relative;
                        }
                
                        .android_preview {
                            position: absolute;
                            top: 150px;
                            right: 2px;
                            left: 2px;
                            border-radius: 2px;
                            max-width: 360px;
                            background-color: rgb(254, 254, 254);
                            overflow-y: hidden;
                            padding: 8px;
                            width: 98%;
                            cursor: pointer;
                            box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px;
                
                            .android_preview_header {
                                display: flex;
                                font-size: 12px;
                                line-height: 15px;
                                .down-up-icon {
                                    color: #000000;
                                }
                                .android_preview_header_icon {
                                    color: #000000;
                                    margin-right: 4px;
                                }
                                .android_preview_header_name {
                                    font-size: 10px;
                                    line-height: 13px;
                                    color: #636363;
                                    margin: auto 0;
                                    margin-right: 4px;
                                }
                            }
                            .android_preview_img {
                                margin-top: 5px;
                                img {
                                    height: 125px;
                                    width: 100%;
                                    object-fit: cover;
                                }
                            }
                            .android_preview_body {
                                width: 100%;
                                margin-top: 8px;
                                display: flex;
                                justify-content: space-between;
                                .android_preview_body_content_text {
                                    width: 80%;
                                .notification-title {
                                    font-size: 10px;
                                    color: rgb(83, 83, 83);
                                    line-height: 16px;
                                }
                                .notification-msg {
                                    color: rgb(117, 117, 117);
                                    font-size: 10px;
                                    line-height: 16px;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                                }
                                .android_preview_body_content_image {
                                    height: 32px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
.blynk-dashboard {
    button, input, select, textarea {
        font-family: 'Poppins', serif !important;
    }
    .announcement-bar-open {
        .main-content {
            padding-top: 72px !important;
        }
        // .sidenav-bar {
        //     top: 124px;
        // }
        // .main-content {
        //     padding-top: 124px;
        //     .blynk-main-container {
        //         top: 180px;
        //     }
        //     .account-setting {
        //         .main-tab-list {
        //             .list {
        //                 top: 220px;
        //             }
        //         }
        //     }
        // }
    }
    .main-content {
        .color-9b9b9b {
            color: #9b9b9b;
        }
        .color-000000 {
            color: #000000;
        }
        .color-ffffff {
            color: #ffffff;
        }
        .row>div {
            margin-bottom: 0px;
        }
        .back-btn {
            padding: 10px 24px;
            display: flex;
            align-items: center;
            .back-arrow {
                .vajro-arrow-right {
                    display: inline-block;
                    transform: scaleX(-1);
                    font-size: 16px;
                    vertical-align: -2px;
                    margin-right: 2px;
                    &::before {
                        content: "\e919";
                    }
                }
            }
            
        }
        .blynk-top-navigation-bar {
            background-color: #ffffff;
            position: fixed;
            right: 16px;
            left: 312px;
            top: 88px;
            overflow-x: scroll;
            border-radius: 4px;
            min-height: 40px;
            &::-webkit-scrollbar {
                display: none;
            }
            .back-arrow {
                cursor: pointer;
                &.active {
                    cursor: not-allowed !important;
                }
            }
            ul {
                display: flex;
                align-items: center;
                padding: 0 24px;
                list-style: none;
                margin: 0;
                justify-content: space-around;
                li {
                    position: relative;
                    font-size: 12px;
                    letter-spacing: 0.28px;
                    color: #333333;
                    outline: 0 none;
                    cursor: pointer;
                    white-space: nowrap;
                    &.active {
                        color: #F62369;
                        font-weight: bold;
                        &:before {
                            content: "";
                            position: absolute;
                            bottom: 0;
                            width: 100%;
                            height: 2px;
                            background: #F62369;
                        }
                    }
                    .blynk-top-navigation-bar-title {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin: auto 16px;
                        min-height: 40px;
                    }
                    .blynk-top-navigation-bar-sub-title {
                        position: absolute;
                        font-size: 7px;
                        text-align: center;
                        width: 100%;
                        bottom: 1px;
                    }
                }
            }
        }
        
        // Report page
        .over-all-report {
            margin: 48px;
            width: 100%;
            overflow-y: scroll;
            .report-list {
                margin-bottom: 18px;
                font-size: 16px;
                .sale-name-time {
                    margin-bottom: 8px;
                    .time {
                        padding-left: 4px;
                        color: rgba(0, 0, 0, 0.5); 
                     }
                }
                .type-of-sale {
                    a {
                        font-size: 12px;
                        border-radius: 4px;
                        background: #f5f5f5;
                        padding: 8px;
                        color: #727272;
                        &:hover {
                            text-decoration: none;
                        }
                    }
                }
            }
        }
    }
    .tooltip-font-size {
        font-size: 12px !important;
        max-width: unset !important;
        white-space: pre-wrap;
        max-height: unset !important;
        height: unset;
        line-height: unset;
        padding: 4px 16px;
    }
}

// Close side bar 
.no-side-bar {
    .sidenav-bar, .blynk-top-navigation-bar {
        display: none;
    }
}
.blynk-dashboard {
    // .announcement-bar-open {
    //     .go-live-setup .align-items-center .back-btn, .go-live-video-wrapper .go-live-back-navigation-bar {
    //         top: 110px;
    //     }
    // }
    .upgrade-plan-popup {
        .modal {
            &.active {
                display: flex;
                position: fixed;
                inset: 88px 16px 16px 312px;
                border-radius: 4px;
                overflow-y: auto;
                .modal-dialog {
                    margin: auto !important;
                    display: flex !important;
                    align-items: center;
                    justify-content: center;
                }
            }
            &.reduce-top {
                inset: 134px 16px 16px 312px !important; 
            }
        }
    }

    // Go live page
    .blynk-main-container {
        display: flex;
        background-color: #ffffff;
        position: fixed;
        top: 134px;
        right: 16px;
        bottom: 16px;
        left: 312px;
        border-radius: 4px;
        overflow: auto;
        .survey-popup {
            position: absolute;
            display: none;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: ~"calc(100vh - 72px)";
            background-color: rgba(222, 222, 222, 0.72);
            top: -15px;
            bottom: 0px;
            right: 0px;
            left: 0px;
            z-index: 999;
            &.active {
                display: flex;
            }
            .survey-popup-content {
                width: 460px;
                height: auto;
                border-radius: 8px;
                background: #ffffff;
                position: relative;
                .survey-popup-not-allowed {
                    position: absolute;
                    top: 0px;
                    bottom: 0px;
                    right: 0px;
                    left: 0px;
                    cursor: not-allowed;
                }
                .survey-popup-content-header {
                    position: relative;
                    .close-arrow {
                        font-size: 20px;
                        position: absolute;
                        top: 20px;
                        right: 20px;
                    }
                }
                .survey-popup-content-body {
                    padding: 32px;
                    text-align: center;
                    .survey-popup-title {
                        color: #f62369;
                        font-size: 14px;
                        font-weight: 600;
                        letter-spacing: 0.32px;
                    }
                    .survey-popup-sub-title {
                        padding-top: 20px;
                        color: #000;
                        font-size: 16px;
                        letter-spacing: 0.36px;
                    }
                    .survey-popup-rating {
                        padding-top: 16px;
                        .rating {
                            margin: 0;
                            padding: 0;
                            li {
                                list-style-type: none;
                                display: inline-block;
                                padding: 1px;
                                text-align: center;
                                font-weight: bold;
                                cursor: pointer;
                                margin-right: 14px;
                                &:last-child {
                                    margin-right: 0px;
                                }
                                img {
                                    height: 30px;
                                    width: 30px;
                                }
                            }
                        }
                        ul.rating {
                            display: inline-block;
                        }
                    }
                    .survey-popup-question {
                        color: #000;
                        font-size: 14px;
                        padding-top: 30px;
                    }
                    .survey-popup-answer {
                        padding-top: 16px;
                        display: flex;
                        cursor: pointer;
                        overflow-x: auto;
                        justify-content: space-between;
                        .survey-popup-option {
                            font-size: 12px;
                            padding: 8px 10px;
                            border-radius: 4px;
                            border: solid 1px #000;
                            width: 100%;
                            white-space: nowrap;
                            margin-right: 12px;
                            &:last-child {
                                margin-right: 0px;
                            }
                            &.active {
                                border: solid 1px #f62369;
                                color: #f62369;
                            }
                        }
                    }
                    .survey-popup-button {
                        padding-top: 32px;
                        .submit-btn {
                            font-size: 14px;
                            font-weight: 600;
                            letter-spacing: 0.32px;
                            background-color: #fcd0df;
                            padding: 12px 24px;
                            border: 0px;
                            border-radius: 8px;
                            color: #fff;
                            cursor: not-allowed;
                            &.active {
                                background-color: #f62369;
                                cursor: pointer;
                            }
                        }
                    }
                }
            }
        }
        .live-sale-loader-popup {
            position: absolute;
            display: none;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: ~"calc(100vh - 72px)";
            background-color: rgba(222, 222, 222, 0.72);
            top: -15px;
            bottom: 0px;
            right: 0px;
            left: 0px;
            z-index: 999;
            &.active {
                display: flex;
            }
            .go-live-empty-state-image {
                justify-content: center;
                align-items: center;
            }
        }
        .go-live-empty-state-image {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
        }
        .no-live-setup {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            width: 100%;
            height: 100%;
            margin: auto;
            .image-card {
                position: relative;
                width: 375px;
                height: 200px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #ffffff;
                img {
                    position: absolute;
                }
                .play-button {
                    background-color: #F62369;
                    color: #FFFFFF;
                    border-radius: 100%;
                    box-sizing: border-box;
                    position: relative;
                    display: block;
                    width: 50px;
                    height: 50px;
                    &::before {
                        content: "";
                        display: block;
                        box-sizing: border-box;
                        position: absolute;
                        width: 15px;
                        height: 19px;
                        border-top: 8px solid transparent;
                        border-bottom: 8px solid transparent;
                        border-left: 15px solid;
                        top: 15px;
                        left: 19px;
                        border-radius: 4px;
                    }
                }
            }
            .live-sale-btn {
                margin: 32px auto 0px;
                display: flex;
                .create-walldrops-btn {
                    cursor: pointer;
                    border: solid 1px #F62369;
                    border-radius: 4px;
                    padding: 14px 20px;
                    background: #ffffff;
                    font-size: 16px;
                    color: #F62369;
                    margin-right: 16px;
                    &:hover {
                        text-decoration: none;
                    }
                }
                .create-sale-btn {
                    font-weight: 600;
                    border: solid 1px #F62369;
                    background-color: #F62369;
                    color: #ffffff;
                    font-size: 16px;
                    padding: 14px 40px;
                    border-radius: 4px;
                    &:hover {
                        text-decoration: none;
                    }
                }
            }
        }
        .live-setup {
            height: 100%;
            display: flex;
            flex-direction: column;
            width: 100%;
            .title-create-sale {
                padding: 24px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .new-live-sale-title {
                    font-size: 18px;
                    line-height: 20px;
                    font-weight: 600;
                }
                .create-sale-link {    
                    position: relative;                
                    .create-sale-text {
                        cursor: pointer;
                        font-size: 14px;
                        font-weight: 600;
                        line-height: 20px;
                        color: #fff;
                        background-color: #F62369;
                        margin: auto 0;
                        border-radius: 4px;
                        padding: 8px 12px;
                        img {
                            padding-right: 4px;
                        }
                        .show-info {
                            display: none;
                        }
                        &.disabled {
                            opacity: 0.5;
                            cursor: not-allowed;
                        }
                    }
                    &.show_tooltip:hover {
                        .show-info {
                            display: block;
                        }
                    }
                    .show-info {
                        display: none;
                        width: 214px;
                        background-color: #FFFFFF;;
                        color: #001E3E;
                        border-radius: 4px;
                        padding: 4px 8px;
                        position: absolute;
                        z-index: 9;
                        top: 125%;
                        right: 0%;
                        margin-left: -30px;
                        box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
                        font-size: 11px;
                        line-height: 18px;
                        &::after {
                            content: "";
                            position: absolute;
                            bottom: 100%;
                            right: 20%;
                            margin-left: -5px;
                            border-width: 5px;
                            border-style: solid;
                            border-color: transparent transparent #FFFFFF transparent;
                        }
                    }
                }
            }
            .list-of-create-sale {
                flex: 1 1 auto;
                padding: 0px 24px;
                overflow-y: auto;
                .loop-list {
                    padding: 0px;
                    .box-shadow {
                        cursor: pointer;
                        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08);
                        border-radius: 4px;
                        margin: 0 0 12px;
                        padding: 12px 0px;
                        &:hover {
                            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
                        }
                        .live-sale-name {
                            font-size: 14px;
                            height: 20px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                        .time-status {
                            height: 16px;
                            margin-top: 8px;
                            font-size: 12px;
                            display: flex;
                            justify-content: space-between;
                            .pending {
                                color: #ffae5d;
                            }
                            .ongoing {
                                color: #21c693;
                            }
                        }
                        .product-count-audience {
                            font-size: 12px;
                            .d-flex {
                                display: flex;
                                .color-9b9b9b {
                                    width: 35%;
                                }
                            }
                            .product-count {
                                height: 20px;
                            }
                            .target-audience {
                                height: 16px;
                                margin-top: 8px;
                            }
                        }
                        .go-live-btn {
                            position: relative;
                            .d-flex {
                                display: flex;
                                justify-content: space-between;
                                padding: 3px 0px;
                                .go-live {
                                    width: 120px;
                                    border-radius: 4px;
                                    background: #000000;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    margin: auto 0;
                                    padding: 8px 24px;
                                }
                                .live-sale {
                                    background: #F62369 !important;
                                }
                                .icon {
                                    margin: auto 0;
                                    .dropdown-menu {
                                        padding: 0px;
                                        border-radius: 4px;
                                        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.16);
                                        background: #ffffff;
                                        right: 0px;
                                        top: 20px;
                                        left: -30px;
                                        text-align: center;
                                        width: 175px;
                                        div {
                                            cursor: pointer;
                                            padding: 8px;
                                            font-size: 12px;
                                            &:hover {
                                                background-color: #f4f4f4;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .go-live-table-list {
                flex: 1 1 auto;
                margin: 0px 24px 48px;
                overflow: auto;
                &::-webkit-scrollbar {
                    height: 4px;
                }
                &::-webkit-scrollbar-thumb {
                    display: block;
                }
                .text-align-left {
                    position: sticky;
                    left: 0;
                    z-index: 1;
                    text-align: left !important;
                    &.active {
                        &::after {
                            content: "";
                            position: absolute;
                            top: 0px;
                            right: 0px;
                            bottom: 0px;
                            width: 4px;
                            box-shadow: 4px 0px 4px #f4f4f4;
                        }
                    }
                    div {
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        width: 100%;
                        max-width: 180px;
                    }
                }
                .width-14 {
                    width: 14% !important;
                }
                .width-18 {
                    width: 18% !important;
                }
                .go-live-table {
                    cursor: pointer;
                    min-width: 700px;
                    width: 100%;
                    .go-live-table-header {
                        height: 46px;
                        position: sticky;
                        top: 0px;
                        z-index: 2;
                        background: #ffffff;
                        box-shadow: 0px 4px 4px #F4F4F4;
                        th {
                            text-align: center;
                            font-weight: 500;
                            font-size: 15px;
                            line-height: 22px;
                            width: 22%;
                            padding: 8px 16px;
                        }
                    }
                    .go-live-table-body {
                        overflow-y: auto;
                        .change-on-over {
                            &.fixed-top {
                                position: sticky;
                                top: 38px;
                                z-index: 99;
                            }
                        }
                        tr {
                            height: 46px;
                            text-align: center;
                            font-weight: 400;
                            font-size: 13px;
                            line-height: 16px;
                            width: 22%;
                            // border-top: 1px solid transparent;
                            // border-bottom: 1px solid transparent;
                            td {
                                padding: 8px 16px;
                                .status-option {
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;
                                    .image-text-flex {
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        padding: 4px 16px;
                                        &.go-live-info {
                                            color: #FF2929;
                                            border: 1px solid #FF2929;
                                            border-radius: 26px;
                                        }
                                        img {
                                            margin-right: 8px;
                                        }
                                        .img-text {
                                            font-weight: 400;
                                            font-size: 12px;
                                            line-height: 16px;
                                        }
                                        &.disabled {
                                            cursor: not-allowed;
                                            background: #f4f4f4;
                                        }
                                    }
                                    .icon {
                                        position: relative;
                                        .dropdown-backdrop {
                                            position: unset !important;
                                        }
                                        .select-icon {
                                            width: 26px;
                                            height: 26px;
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;
                                            img {
                                                height: 18px;
                                            }
                                        }
                                        &.open {
                                            background: #F2F2F2;
                                            border-radius: 100%;
                                        }
                                        .dropdown-menu {
                                            position: absolute;
                                            background: #FFFFFF;
                                            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);
                                            left: -145px;
                                            top: 20px;
                                            border-radius: 4px;
                                            .image-text-flex {
                                                padding: 8px 16px;
                                                justify-content: flex-start;
                                                img {
                                                    height: 16px;
                                                    width: 16px;
                                                }
                                                .img-text {
                                                    font-weight: 400;
                                                    font-size: 12px;
                                                    line-height: 16px;
                                                    &.red-color {
                                                        color: #FF2929;
                                                    }
                                                }
                                                &:hover {
                                                    background-color: #f4f4f4;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                            // &:nth-child(odd) {
                            //     background-color: #FAFAFA;
                            // }
                            // &:nth-child(even) {
                            //     background-color: #FFFFFF;
                            // }
                            // &:hover {
                            //     background-color: #FBF0F5 !important;
                            // }
                        }
                        tr.change-on-over:hover td {
                            background-color: #FBF0F5;
                        }
                        tr:nth-child(odd) td {
                            background: #FAFAFA;
                        }
                        tr:nth-child(even) td {
                            background: #ffffff;
                        }
                    }
                }
            }
            .go-live-mobile-view-list {
                display: none;
                flex: 1 1 auto;
                padding: 0px 16px 16px;
                overflow: auto;
                &::-webkit-scrollbar {
                    height: 4px;
                }
                &::-webkit-scrollbar-thumb {
                    display: block;
                }
                .cart-view {
                    background: #FFFFFF;
                    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.16);
                    border-radius: 4px;
                    margin-bottom: 12px;
                    padding: 16px;
                    &.fixed-top {
                        position: sticky;
                        top: 0px;
                        z-index: 99;
                    }
                    &:last-child {
                        margin-bottom: 0px;
                    }
                    &:hover {
                        background: rgba(246, 35, 105, 0.05);
                    }
                    .live-name-status {
                        display: flex;
                        width: 100%;
                        margin-bottom: 16px;
                        .live-sale-name-time {
                            width: 65%;
                            .live-sale-name {
                                font-weight: 600;
                                font-size: 16px;
                                margin-bottom: 4px;
                                width: 80%;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                            .live-sale-time {
                                font-weight: 400;
                                font-size: 14px;
                            }
                        }
                        .live-sale-status {
                            width: 35%;
                            .status-option {
                                display: flex;
                                justify-content: space-between;
                                align-items: flex-start;
                            }
                            .image-text-flex {
                                display: flex;
                                padding: 4px 12px;
                                font-weight: 400;
                                font-size: 12px;
                                justify-content: center;
                                align-items: center;
                                img {
                                    margin-right: 4px;
                                    width: 16px;
                                    height: 16px;
                                }
                                &.go-live-info {
                                    border: 1px solid #FF2929;
                                    border-radius: 20px;
                                    color: #FF2929;
                                }
                            }
                            .icon {
                                position: relative;
                                margin: auto 0;
                                .dropdown-backdrop {
                                    position: unset !important;
                                }
                                .select-icon {
                                    width: 18px;
                                    height: 18px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    img {
                                        height: 16px;
                                    }
                                }
                                .dropdown-menu {
                                    position: absolute;
                                    background: #FFFFFF;
                                    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);
                                    left: -145px;
                                    top: 20px;
                                    border-radius: 4px;
                                    .image-text-flex {
                                        padding: 8px 16px;
                                        justify-content: flex-start;
                                        img {
                                            height: 16px;
                                            width: 16px;
                                        }
                                        .img-text {
                                            font-weight: 400;
                                            font-size: 12px;
                                            line-height: 16px;
                                            &.red-color {
                                                color: #FF2929;
                                            }
                                        }
                                        &:hover {
                                            background-color: #f4f4f4;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    .product-count {
                        display: flex;
                        margin-bottom: 8px;
                        font-size: 12px;
                        font-weight: 400;
                        .title {
                            margin-right: 4px;
                            color: rgba(0, 0, 0, 0.4);
                            flex: 0 0 105px;
                        }
                        .title-info {
                            flex: 1 1 auto;
                        }
                    }
                    .audience {
                        display: flex;
                        font-size: 12px;
                        font-weight: 400;
                        .title {
                            margin-right: 4px;
                            color: rgba(0, 0, 0, 0.4);
                            flex: 0 0 105px;
                        }
                        .title-info {
                            flex: 1 1 auto;
                        }
                    }
                }
            }
        }
    }
    // Go live setup page
    .go-live-setup-main-container {
        background-color: #ffffff;
        border-radius: 4px;
        flex-direction: column;
        overflow-y: auto;
        .go-live-setup {
            padding: 24px;
            position: relative;
            overflow-y: auto;
            height: ~"calc(100vh - 150px)";
            &:hover::-webkit-scrollbar-thumb {
                display: block;
            }
            &.active {
                overflow: hidden !important;
            }
        }
        &.active {
            overflow: hidden !important;
        }
        &:hover::-webkit-scrollbar-thumb {
            display: block;
        }
        .go-live-loader-image {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }
        .next-prev-btn {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            user-select: none;
            -moz-user-select: none;
            -webkit-user-drag: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            margin: auto 0;
            margin-top: 8px;
            .disable {
                opacity: 0.5;
                cursor: not-allowed;
            }
        
            button {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 2px;
                min-width: 24px;
                min-height: 24px;
                font-size: 12px;
                font-weight: normal;
                line-height: 1.5;
                letter-spacing: 0.12px;
                color: #000000;
                background-color: #ffffff;
                border-radius: 2px;
                border: 1px solid #dbdbdb;
                cursor: pointer;
        
                &:not(:last-child) {
                    margin-right: 5px;
                }
        
                &.active {
                    color: #ffffff;
                    background-color: #000000;
                    border-color: #000000;
                }
        
                &.no-border {
                    border: none;
                }
        
                .left-arrow {
                    transform: scale(-1);
                }
            }
        }
        .title {
            font-size: 16px;
            line-height: 1.75;
            color: #262626;
            margin-bottom: 8px;
        }
        input[type=checkbox], input[type=radio] {
            margin: 0px;
        }
        input, textarea, select {
            &:focus-visible {
                outline: 0px !important;
            }
        }
        .input-text {
            width: 50%;
            border: 0px;
            border-bottom: solid 1px #C5C9CD;
            padding: 8px 4px;
            font-size: 14px;
            color: #262626;
        }
        .live-sale-section, .target-audience-section, .push-notification-section, .streaming-type, .schedule-live-sale {
            margin-bottom: 16px;
        }
        .push-notification-section, .push-notification-message-section {
            .title {
                font-weight: 500;
                font-size: 14px;
                span {
                    color: #F62369;
                }
            }
        }
        .push-notification-enabled-disabled {
            display: flex;
            margin-bottom: 24px;
            .push-notification-title {
                font-size: 16px;
                line-height: 1.75;
                color: #262626;
            }
            .push-notification-switch {
                display: flex;
                justify-content: center;
                align-items: center;
                .switch-outer {
                    margin: auto 0;
                    margin-left: 16px;
                    .switch {
                        width: 24px;
                        height: 14px;
                        margin-bottom: 0;
                        input:checked + .slider {
                            background: #40d08b;
                            &:before {
                                transform: translateX(10);
                                -webkit-transform: translateX(10px);
                                -ms-transform: translateX(10px);
                            }
                        }
                        .slider {
                            background: rgba(0, 0, 0, 0.4);
                            &:before {
                                width: 8px;
                                height: 8px;
                                top: 50%;
                                margin-top: -4px;
                                left: 3px;
                                background-color: #FFFFFF;
                            }
                        }
                    }
                }
            }
        }
        .live-sale-section {
            .textbox-count {
                font-size: 10px;
                padding-top: 4px;
                width: 50%;
                color: #716f83;
                display: flex;
                justify-content: flex-end;
            }
        }
        .streaming-type {
            width: 50%;
            .streaming-type-toggle {
                display: flex;
                &.show-pointer {
                    .switch-outer {
                        cursor: not-allowed;
                        opacity: 0.5;
                        .switch .slider {
                            cursor: not-allowed;
                        }
                    }
                }
                .mat-tooltip.tooltip {
                    background-color: red;
                    font-size: 12px;
                }
                .streaming-type-show-card {
                    display: flex;
                    position: relative;
                    // &.active {
                    //     .switch-outer {
                    //         cursor: not-allowed;
                    //         opacity: 0.5;
                    //         .switch .slider {
                    //             cursor: not-allowed;
                    //         }
                    //     }
                    // }
                }
                .streaming-type-note {
                    margin-top: 8px;
                    background: #FFF6F5;
                    border-radius: 4px;
                    padding: 16px;
                    font-size: 12px;
                    line-height: 20px;
                    color: #000000;
                    p {
                        margin-bottom: 8px;
                        line-height: 20px;
                    }
                    ul {
                        padding-left: 16px;
                        li {
                            margin-bottom: 8px;
                            line-height: 20px;
                            &:last-child {
                                margin-bottom: 0px;
                            }
                        }
                    }
                }
                .title {
                    margin-bottom: 0px;
                }
                .switch-outer {
                    margin: auto 0;
                    margin-left: 16px;
                    .switch {
                        width: 24px;
                        height: 14px;
                        margin-bottom: 0;
                        .active + .slider {
                            background: #40d08b;
                            &:before {
                                transform: translateX(10) !important;
                                -webkit-transform: translateX(10px) !important;
                                -ms-transform: translateX(10px) !important;
                            }
                        }
                        .ng-not-empty + .slider {
                            &:before {
                                transform: translateX(0);
                                -webkit-transform: translateX(0);
                                -ms-transform: translateX(0);
                            }
                        }
                        .disable + .slider {
                            &:before {
                                transform: translateX(0);
                                -webkit-transform: translateX(0);
                                -ms-transform: translateX(0);
                            }
                        }
                        .slider {
                            background: rgba(0, 0, 0, 0.4);
                            &:before {
                                width: 8px;
                                height: 8px;
                                top: 50%;
                                margin-top: -4px;
                                left: 3px;
                                background-color: #FFFFFF;
                            }
                        }
                    }
                }
                .streaming-type-tooltip {
                    position: relative;
                    display: inline-block;
                    margin: auto;
                    margin-left: 8px;
                    cursor: pointer;
                    .streaming-type-tooltip-icon {
                        display: flex;
                        &:hover {
                            svg {
                                path {
                                    stroke: #F62369;
                                }
                            }
                        }
                    }
                    .streaming-type-tooltip-text {
                        visibility: hidden;
                        width: 300px;
                        background-color: #FFFFFF;
                        color: #001E3E;
                        border-radius: 4px;
                        padding: 4px 8px;
                        position: absolute;
                        z-index: 1;
                        top: 150%;
                        left: 50%;
                        margin-left: -30px;
                        box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
                        font-size: 11px;
                        line-height: 18px;
                        &::after {
                            content: "";
                            position: absolute;
                            bottom: 100%;
                            left: 10%;
                            margin-left: -5px;
                            border-width: 5px;
                            border-style: solid;
                            border-color: transparent transparent #FFFFFF transparent;
                        }
                        .streaming-type-title {
                            font-weight: 600;
                            padding-bottom: 4px;
                        }
                        ol {
                            padding-left: 16px;
                            margin-bottom: 0px;
                        }
                        .streaming-type-link {
                            margin-top: 12px;
                            a {
                                color: #F62369;
                                &:hover {
                                    text-decoration: none;
                                }
                            }
                        }
                    }
                }
                .streaming-type-tooltip:hover .streaming-type-tooltip-text {
                    visibility: visible;
                }
            }
            .streaming-type-flex {
                display: flex;
                md-radio-button .md-container {
                    width: 16px;
                    height: 16px;
                }
                md-radio-button.md-default-theme.md-checked .md-off, md-radio-button.md-checked .md-off, md-radio-button.md-default-theme .md-off, md-radio-button .md-off {
                    border-color: #000;
                }
                md-radio-button .md-off, md-radio-button .md-on {
                    width: 16px;
                    height: 16px;
                }
                md-radio-button.md-default-theme .md-on, md-radio-button .md-on {
                    background-color: #000;
                }
                md-radio-button .md-off {
                    border-width: 1.5px;
                }
                md-radio-button .md-label {
                    font-size: 13px;
                    margin-left: 24px;
                }
            }
            .time-stamp {
                width: 50%;
                margin-top: 16px;
                input {
                    border-radius: 4px;
                    border: solid 1px #C5C9CD;
                    padding: 8px;
                    font-size: 14px;
                    color: #262626;
                    width: 100%;
                    background: #fff;
                    &::-webkit-datetime-edit-ampm-field {
                        display: none;
                    }
                }
                .time-stamp-title {
                    display:flex;
                    justify-content: space-between;
                    .sub-title {
                        text-align: center;
                        width: 100%;
                    }
                }
                .time-stamp-select-option {
                    display: flex;
                    justify-content: space-between;
                    .select-option-with-icon {
                        position: relative;
                        width: 100%;
                        .select-option {
                            appearance: none;
                            border: solid 1px #C5C9CD;
                            padding: 12px 16px;
                            font-size: 14px;
                            color: #262626;
                            width: 100%;
                            &.first-child {
                                border-radius: 4px 0px 0px 4px;
                                border-right: 0px;
                            }
                            &.last-child {
                                border-radius: 0px 4px 4px 0px;
                                border-left: 0px;
                            }
                        }
                        .text-with-icon {
                            display: flex;
                            position: absolute;
                            top: 50%;
                            right: 8px;
                            line-height: 1;
                            div {
                                margin-top: -7px;
                            }
                            .vajro-chevron-down {
                                margin-left: 4px;
                                font-size: 12px;
                                margin-top: -5px;
                            }
                        }
                    }
                    .colon {
                        border: solid 1px #C5C9CD;
                        padding: 4px 8px;
                        font-size: 18px;
                        color: #262626;
                        border-right: 0px;
                        border-left: 0px;
                    }
                }
            }
        }
        .target-audience-section {
            .target-audience-checkbox {
                width: 50%;
                display: flex;
                .checkbox-section {
                    display: flex;
                    align-items: center;
                    &.gray-text {
                        input[type=checkbox] {
                            border: 1px solid #787878 !important;
                        }
                    }
                    input {
                        margin-right: 8px;
                    }
                    input[type=checkbox] {
                        cursor: pointer;
                        -webkit-appearance: none;
                        -moz-appearance: none;
                        appearance: none;
                        outline: 0;
                        background: #fff;
                        height: 20px;
                        width: 20px;
                        border-radius: 4px;
                        border: 1px solid #000;
                        &:checked {
                            border: 1px solid #F62369;
                            background-color: #F62369;
                            &::after {
                                display: block;
                            }
                        }
                        &::after {
                            content: '';
                            position: relative;
                            left: 30%;
                            top: 10%;
                            width: 35%;
                            height: 70%;
                            border: solid #fff;
                            border-width: 0 2px 2px 0;
                            transform: rotate(45deg);
                            display: none;
                        }
                        &:disabled {
                            &::after {
                                border-color: #fff;
                            }
                        }
                    }
                    &:first-child {
                        margin-right: 16px;
                    }
                }
            }
            .target-audience-not-facebook {
                width: 50%;
                display: flex;
                justify-content: space-between;
                margin-top: 16px;
            }
            .target-audience-facebook {
                width: 50%;
                margin-top: 16px;
                margin-bottom: 16px;
                display: flex;
                flex-direction: column;
                .logout-fb {
                    margin-top: 8px;
                }
            }
            .selected-option-facebook {
                width: 50%;
                .select-drop-down {
                    .group-precautions {
                        border-radius: 4px;
                        border: solid 1px #78A2CC;
                        background-color: rgba(120, 162, 204, 0.25);
                        margin-bottom: 24px;
                        padding: 16px;
                        ul {
                            padding-left: 16px;
                            li {
                                text-align: justify;
                                font-size: 12px;
                                padding-bottom: 8px;
                                letter-spacing: 0.5px;
                                &:last-child {
                                    padding-bottom: 0px;
                                }
                            }
                        }
                    }
                    .group-precautions-new {
                        border-radius: 4px;
                        background: #EDF5FD;
                        margin-bottom: 24px;
                        padding: 16px;
                        ul {
                            padding-left: 16px;
                            li {
                                text-align: justify;
                                font-size: 12px;
                                padding-bottom: 8px;
                                letter-spacing: 0.5px;
                                &:last-child {
                                    padding-bottom: 0px;
                                }
                            }
                        }
                    }
                    .select-facebook-title-option {
                        margin-bottom: 24px;
                    }
                    .select-facebook-title {
                        font-size: 12px;
                        margin-bottom: 8px;
                    }
                    .select-option-icon {
                        position: relative;
                        &::before {
                            content: '\f078';
                            font: normal normal normal 12px/1 FontAwesome;
                            color: #000000;
                            right: 12px;
                            height: 100%;
                            padding: 15px 0px;
                            position: absolute;
                            pointer-events: none;
                        }
                        .diableOption {
                            position: absolute;
                            z-index: 0;
                            background: rgba(0, 0, 0, 0.10);
                            content: "";
                            top: 0px;
                            bottom: 0px;
                            right: 0px;
                            left: 0px;
                            border-radius: 4px;
                        }
                        .error-text {
                            color: #ff0000;
                            font-size: 12px;
                            position: absolute;
                        }
                    }
                    .checkbox-section {
                        margin-top: 16px;
                        display: flex;
                        align-items: center;
                        &.gray-text {
                            input[type=checkbox] {
                                border: 1px solid #787878 !important;
                            }
                        }
                        input {
                            margin: 0;
                            margin-right: 8px;
                        }
                        input[type=checkbox] {
                            cursor: pointer;
                            -webkit-appearance: none;
                            -moz-appearance: none;
                            appearance: none;
                            outline: 0;
                            background: #fff;
                            height: 20px;
                            width: 20px;
                            border-radius: 4px;
                            border: 1px solid #000;
                            &:checked {
                                border: 1px solid #F62369;
                                background-color: #F62369;
                                &::after {
                                    display: block;
                                }
                            }
                            &::after {
                                content: '';
                                position: relative;
                                left: 30%;
                                top: 10%;
                                width: 35%;
                                height: 70%;
                                border: solid #fff;
                                border-width: 0 2px 2px 0;
                                transform: rotate(45deg);
                                display: none;
                            }
                            &:disabled {
                                &::after {
                                    border-color: #fff;
                                }
                            }
                        }
                        &:first-child {
                            margin-right: 16px;
                        }
                    }
                    .select-option {
                        appearance: none;
                        width: 100%;
                        border: solid 1px #d9d9d9;
                        background: #ffffffff;
                        border-radius: 4px;
                        padding: 12px 16px;
                        font-size: 12px;
                        &:focus-visible {
                            outline: 0px;
                        }
                    }
                }
                .group-precautions {
                    border-radius: 4px;
                    border: solid 1px #78A2CC;
                    background-color: rgba(120, 162, 204, 0.25);
                    margin-top: 16px;
                    padding: 16px;
                    ul {
                        padding-left: 16px;
                        li {
                            text-align: justify;
                            font-size: 12px;
                            padding-bottom: 8px;
                            letter-spacing: 0.5px;
                            &:last-child {
                                padding-bottom: 0px;
                            }
                        }
                    }
                }
                .selected-option {
                    margin-top: 16px;
                    .select-facebook-option-title {
                        font-size: 12px;
                        margin-bottom: 8px;
                        &.margin-top {
                            margin-top: 16px;
                        }
                    }
                    .select-facebook-option-dropdown {
                        position: relative;
                        .select-option-with-icon {
                            position: relative;
                            .vajro-chevron-down {
                                font-size: 12px;
                                position: absolute;
                                top: 50%;
                                margin-top: -5px;
                                right: 16px;
                                line-height: 1;
                            }
                        }
                        .select-option {
                            appearance: none;
                            border-radius: 4px;
                            border: solid 1px #C5C9CD;
                            padding: 8px;
                            font-size: 14px;
                            color: #262626;
                            width: 100%;
                            background: #fff;
                        }
                        .error-text {
                            color: #ff4540;
                            font-size: 12px;
                            margin-top: 4px;
                        }
                        .diableOption {
                            position: absolute;
                            z-index: 1;
                            background: rgba(0, 0, 0, 0.10);
                            content: "";
                            top: 0px;
                            bottom: 22px;
                            right: 0px;
                            left: 0px;
                            border-radius: 4px;
                        }
                    }
                }
                .selected-option-radio-btn {
                    margin-bottom: 8px;
                    md-radio-button {
                        margin-bottom: 0px;
                        .md-label {
                            margin-left: 20px;
                            font-size: 14px !important;
                        }
                        .md-off {
                            border-width: 1px;
                        }
                        &:first-child {
                            padding-right: 16px;
                        }
                    }
                    md-radio-button .md-off, md-radio-button .md-on, md-radio-button .md-container {
                        height: 14px;
                        width: 14px;
                    }
                    md-radio-button.md-default-theme .md-on, md-radio-button .md-on {
                        background: #F62369;
                    }
        
                    md-radio-button[disabled].md-checked .md-off, md-radio-button[disabled].md-default-theme .md-off, md-radio-button[disabled] .md-off {
                        border-color: rgba(246,35,105,0.38);
                    }
        
                    md-radio-button.md-checked .md-off, md-radio-button.md-default-theme .md-off, md-radio-button .md-off {
                        border-color: #F62369;
                    }
                    md-radio-group.md-default-theme .md-checked:not([disabled]).md-primary .md-ink-ripple, md-radio-group .md-checked:not([disabled]).md-primary .md-ink-ripple, md-radio-group.md-default-theme.md-primary .md-checked:not([disabled]) .md-ink-ripple, md-radio-group.md-primary .md-checked:not([disabled]) .md-ink-ripple {
                        color: rgba(246,35,105,0.26);
                    }
                }
            }
        }
        .facebook-login {
            border: 0px;
            background: #2692F5;
            color: #ffffff;
            border-radius: 4px;
            opacity: 0.85;
            font-size: 14px;
            line-height: 16px;
            font-family: inherit;
            padding: 4px 8px;
            i {
                margin-right: 4px;
            }
        }
        .select-scan-products-section {
            margin-bottom: 16px;
            .search-scan-products {
                display: flex;
                .dropdown-search-product {
                    width: 50%;
                    position: relative;
                    .input-custom-search {
                        position: relative;
                        .search-box {
                            border-radius: 4px;
                            border: solid 1px #C5C9CD;
                            padding: 12px 16px;
                            font-size: 14px;
                            color: #262626;
                            width: 100%;
                        }
                        .vajro-chevron-down {
                            font-size: 12px;
                            position: absolute;
                            top: 50%;
                            margin-top: -5px;
                            right: 16px;
                            line-height: 1;
                        }
                    }
                    .input-search-menu {
                        position: absolute;
                        top: 50px;
                        z-index: 9;
                        overflow-y: scroll;
                        background: #fff;
                        height: 160px;
                        font-size: 12px;
                        line-height: 1.75;
                        letter-spacing: 0.24px;
                        padding: 0;
                        margin-top: 0px;
                        border-radius: 2px;
                        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
                        overflow: hidden;
                        overflow-y: scroll;
                        width: 100%;
                        .input-search-menu-flex {
                            color: #000000;
                            display: block;
                            padding: 12px 20px;
                            transition: background-color .4s;
                            cursor: pointer;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            &:hover {
                                background-color: #fafafa;
                            }
                            &.not-allow {
                                cursor: not-allowed;
                            }
                        }
                        .no-result {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            min-height: 160px;
                        }
                    }
                }
                .scan-import-view-type {
                    width: 50%;
                    display: flex;
                    justify-content: space-between;
                    .scan-barcode-import-products {
                        display: flex;
                    }
                    .scan-barcode, .import-products {
                        width: 46px;
                        height: 46px;
                        border-radius: 4px;
                        background-color: #f5f5f5;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        cursor: pointer;
                    }
                    .scan-barcode {
                        margin-left: 16px;
                    }
                    .import-products {
                        position: relative;
                        margin-left: 8px;
                        .live-history-menu {
                            overflow-y: scroll;
                            position: absolute;
                            top: 50px;
                            height: 200px;
                            width: 250px;
                            left: 0px;
                            background: #fff;
                            box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
                            border-radius: 4px;
                            font-size: 14px;
                            z-index: 9;
                            .live-history-list {
                                padding: 8px 16px;
                                border-bottom: 1px solid rgba(240, 239, 248, 0.5);
                                &:last-child {
                                    border-bottom: 0px;
                                }
                                &:hover {
                                    background-color: #fafafa;
                                }
                            }
                        }
                    }
                    .view-list-products {
                        width: 38px;
                        height: 38px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        cursor: pointer;
                    }
                }
            }
        }
        .show-products {
            margin: 16px 0px 0px;
            width: 100%;
            .list-type-view {
                .list-type-view-img {
                    position: relative;
                    height: 104px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin: auto;
                    margin-top: 8px;
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: scale-down;
                    }
                    .overlay {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background: rgba(0, 0, 0, 0);
                    }
                    .delete-btn {
                        cursor: pointer;
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        text-align: center;
                        top: 0px;
                        bottom: 0px;
                        right: 0px;
                        left: 0px;
                        visibility: hidden;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        .vajro-delete {
                            width: 24px;
                            height: 24px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            background: rgba(255, 255, 255, 0.56);
                            border-radius: 100%;
                        }
                    }
                    &:hover .overlay {
                        display: block;
                        background: rgba(59, 53, 55, 0.45);
                    }
                    &:hover .delete-btn {
                        visibility: visible;
                    }
                }
            }
            .detail-type-list {
                .detail-type-list-container {
                    display: flex;
                    padding-top: 8px;
                    padding-bottom: 8px;
                    .left-product-col {
                        width: 72px;
                        height: 104px;
                        margin-right: 8px;
                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: scale-down;
                        }
                    }
                    .right-product-col {
                        width: 170px;
                        height: 104px;
                        color: #262626;
                        display: flex;
                        flex-direction: column;
                        cursor: pointer;
                        .product-list-title {
                            font-size: 14px;
                            margin-top: 8px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                        .view-inventory-btn {
                            margin-top: 8px;
                            font-size: 10px;
                        }
                        .delete-btn {
                            margin-top: 20px;
                            color: #ff8777;
                            font-size: 12px;
                        }
                    }
                }
            }
        }
        .push-notification-message-section {
            margin-bottom: 32px;
            textarea {
                resize: none;
                width: 50%;
                height: 80px;
                border: solid 1px #C5C9CD;
                padding: 12px 16px;
                font-size: 14px;
                color: #262626;
                border-radius: 4px;
            }
        }
        .save-create-sale-btn {
            font-size: 16px;
            display: flex;
            width: 50%;
            .save-as-draft-btn {
                color: #000000;
                border-radius: 4px;
                border: 1px solid #000000;
                margin-right: 16px;
                background-color: #fff;
                width: 65%;
                padding: 13px;
            }
            button[disabled]  {
                opacity: 0.5;
                cursor: not-allowed;
            }
            .create-sale-btn {
                border-radius: 4px;
                background-color: #F62369;
                border: solid 1px #F62369;
                color: #fff;
                width: 35%;
                padding: 13px;
            }
        }
        .schedule-live-sale {
            .schedule-live-sale-toggle {
                display: flex;
                .title {
                    margin-bottom: 0px;
                }
                .switch-outer {
                    margin: auto 0;
                    margin-left: 16px;
                    .switch {
                        width: 24px;
                        height: 14px;
                        margin-bottom: 0;
                        input:checked + .slider {
                            background: #40d08b;
                            &:before {
                                transform: translateX(10);
                                -webkit-transform: translateX(10px);
                                -ms-transform: translateX(10px);
                            }
                        }
                        .slider {
                            background: rgba(0, 0, 0, 0.4);
                            &:before {
                                width: 8px;
                                height: 8px;
                                top: 50%;
                                margin-top: -4px;
                                left: 3px;
                                background-color: #FFFFFF;
                            }
                        }
                    }
                }
            }
            .date-picker-icon {
                width: 50%;
                margin-top: 16px;
                .dropdown {
                    .form-control[readonly] {
                        background-color: #fff !important;
                        height: 46px;
                    }
                    &.open {
                        .datetimepicker {
                            width: 100% !important;
                        }
                    }
                }
            }
        }
    }

    // Live sale page
    .go-live-video-wrapper {
        // height: ~"calc(100vh - 72px)";
        color: #000000;
        position: relative;
        // common css starts
        :focus, :active:focus {
            outline: 0 none;
        }
    
        .btn {
            font-size: 14px;
            font-weight: bold;
            line-height: 1.2;
            letter-spacing: 0.28px;
            padding: 10px 24px;
            border-radius: 3px;
            margin: 0;
            outline: 0 none;
            
            &.btn-outline {
                color: #000000;
                border-color: #000000;
                background-color: #FFFFFF;
            }
    
            &.black-btn {
                color: #FFFFFF;
                background-color: #000000;
                border-color: #000000;
            }
        }
        // common css ends

        .go-live-back-navigation-bar {
            position: sticky;
            top: 84px;
            background-color: #ffffff;
            display: flex;
            align-items: center;
            padding: 12px 24px;
            z-index: 9;
            border-radius: 4px;
            .back-arrow {
                color: #000000;
                font-size: 14px;
                font-weight: normal;
                line-height: 0.86;
                letter-spacing: 0.28px;
                cursor: pointer;
          
                i {
                  display: inline-block;
                  transform: scaleX(-1);
                  font-size: 16px;
                  vertical-align: -2px;
                  margin-right: 2px;
                }
            }
        }
    
        .initial-screen {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: ~"calc(100vh - 72px)";
    
            img {
                width: 176px;
                height: 216px;
                object-fit: cover;
                margin: 0 auto 32px;
            }
        
            .black-btn {
                margin: 0 0 8px;
            }
        
            p {
                max-width: 392px;
                text-align: center;
                font-size: 12px;
                font-weight: normal;
                line-height: 1.5;
                letter-spacing: 0.12px;
                margin-bottom: 0;
            }
        }
        .initial-screen-post-live{
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            align-items: center;
            justify-content: center;
    
            img {
                width: 176px;
                height: 216px;
                object-fit: cover;
                margin: 0 auto 32px;
            }
        
            .black-btn {
                margin: 0 0 8px;
            }
        
            p {
                max-width: 392px;
                text-align: center;
                font-size: 12px;
                font-weight: normal;
                line-height: 1.5;
                letter-spacing: 0.12px;
                margin-bottom: 0;
            }
    
        }
    
        .live-home {
            width: 100%;
            padding: 24px 120px 24px 24px;
        
            .live-home-table {
                padding: 24px 32px 32px 24px;
                background-color: #ffffff;
                border-radius: 3px;
                box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
                margin-bottom: 24px;
    
                .switch-outer {
                    margin: 0px;
                }
                .section-title {
                    position: relative;
                    display: flex;
                    flex-wrap: nowrap;
                    align-items: center;
    
                    p {
                        flex: 1;
                        color: rgba(0, 0, 0, 0.5);
                        font-size: 14px;
                        line-height: 1.5;
                        letter-spacing: 0.14px;
                        padding-right: 80px;
                        margin-bottom: 0;
                        
    
                        span {
                            color: #000000;
                            display: block;
                            font-size: 18px;
                            font-weight: bold;
                            line-height: 1.5;
                            letter-spacing: normal;
                            margin-bottom: 8px;
                        }
                    }
    
                    .black-btn {
                        padding: 11px 24px;
                    }
    
                    .tbl-pagination {
                        margin: auto;
                        .blocked-users {
                            color: #FFFFFF;
                            background-color: #000000;
                            border: 0px;
                            font-size: 12px;
                            font-weight: bold;
                            line-height: 1.2;
                            letter-spacing: 0.28px;
                            padding: 10px 18px;
                            border-radius: 4px;
                            margin: 0;
                            margin-right: 8px;
                            outline: 0 none;
                        }
                    }
                }
    
                .dashboard-table {
                    .tbl-row {
                        &.disabled {
                            .tbl-cell {
                                color: rgba(0, 0, 0, .4);
                                
                                .pill-with-square {
                                    color: rgba(0, 0, 0, .4);
                                }
                            }
                        }
    
                        .tbl-cell {                        
                            .pill {
                                color: #ffffff;
                                display: inline-block;
                                font-size: 12px;
                                font-weight: normal;
                                line-height: 1;
                                letter-spacing: 0.24px;
                                text-align: center;
                                padding: 4px 16px;
                                -webkit-border-radius: 10px;
                                -moz-border-radius: 10px;
                                border-radius: 10px;
                                -moz-background-clip: padding;
                                -webkit-background-clip: padding-box;
                                background-clip: padding-box;
                
                                &.pending {
                                    background-color: #ffb146;
                                }
                                &.completed {
                                    background-color: #26bf8c;
                                }
                                &.live {
                                    background-color: #ff4540;
                                }
                            }
                
                            .pill-with-square {
                                color: #000000;
                                display: inline-block;
                                font-size: 12px;
                                font-weight: normal;
                                line-height: 1;
                                letter-spacing: 0.24px;
                                text-transform: capitalize;
                
                                .square {
                                    display: inline-block;
                                    font-style: normal;
                                    width: 8px;
                                    height: 8px;
                                    border-radius: 2px;
                                    background-color: #000000;
                                    margin-right: 4px;
                                }
                
                                &.pending .square{
                                    background-color: #ffb146;
                                }
                                &.completed .square{
                                    background-color: #26bf8c;
                                }
                                &.live .square{
                                    background-color: #ff4540;
                                }
                                &.cancelled .square{
                                    background-color: #901616;
                                }
                            }
    
                            .custom-tooltip-wrapper { 
                                position: relative;
                                display: inline-block;
                                vertical-align: middle;
                                margin-left: 8px;
                                cursor: pointer;
    
                                i {
                                    font-size: 16px;
                                    color: #ff8f3c;
    
                                    &.vajro-minus-circle {
                                        color: #de3333;
                                    }
                                    &.vajro-clock
                                    {
                                        color: #F9B233;
                                    }
                                    
                                    &:hover + .custom-tooltip {
                                        opacity: 1;
                                        visibility: visible;
                                        display: inline-block;
                                        animation: fadeInLeft .4s ease-in-out;
                                    }
                                }
    
                                .custom-tooltip {
                                    position: absolute;
                                    top: 50%;
                                    margin-top: -20px;
                                    min-width: 144px;
                                    font-size: 10px;
                                    line-height: 1.4;
                                    font-weight: normal;
                                    text-align: left;
                                    color: #3b3b3b;
                                    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.16);
                                    background-color: #c7c7c7;
                                    border-radius: 4px;
                                    padding: 8px 12px;
                                    display: none;
                                    opacity: 0;
                                    visibility: hidden;
                                    transition: opacity 100ms, visibility 100ms;
                                    margin-left: 20px;
    
                                    &:before {
                                        content: '';
                                        height: 0;
                                        width: 0;
                                        position: absolute;
                                        pointer-events: none;
                                        border-style: solid;
                                        border-image: initial;
                                        border-color: transparent #c7c7c7;
                                        border-width: 10px 10px 10px 0px;
                                        top: 50%;
                                        margin-top: -10px;
                                        left: -8px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    
        .live-sale {
            display: flex;
            width: 100%;
            margin-top: 24px;
    
            .left-column {
                width: 55%;
                min-height: 440px;
                background-color: #ffffff;
                border-radius: 4px;

                .group-auto-invoicing {
                    margin: 16px 24px 0px;
                    font-size: 12px;
                    height: 100px;
                    overflow-y: scroll;
                    border-radius: 4px;
                    border: solid 1px #ffe6ee;
                    background-color: #fff7fa;
                    padding: 8px 16px;
                    .group-auto-invoicing-text {
                        padding-bottom: 8px;
                        &:last-child {
                            padding-bottom: 4px;
                        }
                    }
                    ul {
                        padding-left: 16px;
                        li {
                            padding-bottom: 4px;
                            &:last-child {
                                padding-bottom: 0px;
                            }
                        }
                    }
                    &::-webkit-scrollbar-thumb {
                        display: block !important;
                    }
                }
    
                .section-title {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 12px 0;
                    margin: 0 32px 0 16px;
                    border-bottom: 1px solid #f4f4f4;
    
                    span {
                        color: #000000;
                        font-size: 16px;
                        font-weight: 500;
                        letter-spacing: 0.32px;
                        padding-right: 24px;
                    }
    
                    .btn {
                        color: #ffffff;
                        background-color: #26bf8c;
                        border-color: #26bf8c;
                        padding: 7px 16px;
                    }
                }
    
                .sale-card-wrapper {
                    .sale-card {
                        width: 60%;
                        display: flex;
                        padding: 24px 0 8px;
                        margin: 0 128px 0 104px;
    
                        figure {
                            min-width: 128px;
                            max-width: 128px;
                            height: 200px;
                            border-radius: 3px;
                            background-size: cover;
                            background-position: center;
                            background-repeat: no-repeat;
                        }
    
                        .rgt-content {
                            position: relative;
                            width: 100%;
                            padding: 48px 0 0 16px;
    
                            .live-tag {
                                display: inline-block;
                                font-size: 12px;
                                line-height: 1;
                                color: #f1f2f2;
                                padding: 4px;
                                position: absolute;
                                top: 16px;
                                background-color: #ff4540;
                                border-radius: 3px;
                            }
    
                            p {
                                color: #000000;
                                margin-bottom: 0;
    
                                &.title {
                                    font-size: 16px;
                                    font-weight: 500;
                                    line-height: 1.5;
                                    letter-spacing: 0.16px;
                                    display: -webkit-box;
                                    -webkit-line-clamp: 2;
                                    -webkit-box-orient: vertical;
                                    overflow: hidden;
                                    margin-bottom: 8px;
                                }
    
                                &.price-txt {
                                    font-size: 12px;
                                    font-weight: normal;
                                    line-height: 1.42;
                                    letter-spacing: 0.24px;
                                    margin-bottom: 5px;
    
                                    .instock-txt {
                                        color: #ff8f3c;
                                        margin-left: 16px;
                                    }
                                    .variant-txt {
                                        color: #ff8f3c;
                                        margin-left: 0px;
                                    }
                                }
                            }
    
                            .btn-wrapper {
                                display: flex;
                                align-items: center;
    
                                .black-btn {
                                    font-weight: 500;
                                    height: 35px;
                                    width: 100px;
                                    padding: 0px;
                                    &.active {
                                        -webkit-transition: width 5s ease;
                                        -moz-transition: width 5s ease;
                                        -o-transition: width 5s ease;
                                        transition: width 5s ease;
                                        width: 50px;
                                    }
                                }
    
                                i {
                                    color: #ff4540;
                                    font-size: 16px;
                                    margin-left: 16px;
                                    cursor: pointer;
                                }
                            }

                            .btn-wrapper-go-live {
                                display: flex;
                                align-items: center; 
                                .background-color {
                                    background: #000;
                                    border-radius: 3px;
                                    width: 50px;
                                    height: 35px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    .live-sale-btn-loader {
                                        border: 2px solid #f3f3f3; /* Light grey */
                                        border-top: 2px solid #3498db; /* Blue */
                                        border-radius: 50%;
                                        width: 16px;
                                        height: 16px;
                                        animation: spin 2s linear infinite;
                                    }
                                    
                                    @keyframes spin {
                                        0% { transform: rotate(0deg); }
                                        100% { transform: rotate(360deg); }
                                    }
                                }
                            }

                            .blynk-loader {
                                border: 4px solid #f3f3f3;
                                border-radius: 50%;
                                border-top: 4px solid #F62369;
                                width: 25px;
                                height: 25px;
                                -webkit-animation: spin 2s linear infinite; /* Safari */
                                animation: spin 2s linear infinite;
                            }
                              
                              /* Safari */
                            @-webkit-keyframes spin {
                                0% { -webkit-transform: rotate(0deg); }
                                100% { -webkit-transform: rotate(360deg); }
                            }
                              
                            @keyframes spin {
                                0% { transform: rotate(0deg); }
                                100% { transform: rotate(360deg); }
                            }
                        }
                    }
    
                    .select-card-wrapper {
                        display: flex;
                        flex-wrap: nowrap;
                        overflow: hidden;
                        overflow-x: scroll;
                        padding-top: 16px;
                        margin: 0 72px 24px;
    
                        .select-card {
                            position: relative;
                            display: flex;
                            flex-wrap: wrap;
                            flex-direction: column;
                            align-items: center;
                            margin: 0 16px 16px 0;
                            cursor: pointer;
    
                            &.active {
                                figure {
                                    opacity: 1;
                                    box-shadow: inset 0 0 0 1px #FFFFFF;
                                    border: 2px solid #000000;
                                }
                            }
    
                            &.live {
                                figure {
                                    opacity: 1;
                                    box-shadow: inset 0 0 0 1px #FFFFFF;
                                    border: 2px solid #ff4540;
                                }
    
                                // .pill.square {
                                //     color: #ffffff;
                                //     background-color: #ff4540;
                                // }
                            }
    
                            &.vertical-line-wrapper {
                                margin-right: 32px;
                            }
    
                            .highlight {
                                position: absolute;
                                top: 0;
                                right: 0;
                                display: inline-block;
                                width: 16px;
                                height: 16px;
                                z-index: 1;
    
                                i {
                                    &.wave {
                                        display: inline-block;
                                        width: 16px;
                                        height: 16px;
                                        font-style: normal;
                                        background-color: #ff4540;
                                        border-radius: 100%;
                                        animation: pulseEffect 2s ease-out;
                                        animation-iteration-count: infinite;
                                    }
    
                                    &.bg-wave {
                                        position: absolute;
                                        top: 0;
                                        left: 0;
                                        border: 0;
                                        width: 16px;
                                        height: 16px;
                                        border-radius: 100%;
                                        animation: splooshEffect 2s cubic-bezier(0.165, 0.84, 0.44, 1);
                                        -webkit-animation: splooshEffect 2s cubic-bezier(0.165, 0.84, 0.44, 1);
                                        animation-iteration-count: infinite;
                                        -webkit-animation-iteration-count: infinite;
    
                                        &:nth-child(2) {
                                            animation-delay: .33s;
                                            -webkit-animation-delay: .33s;
                                            animation-duration: 2.2s;
                                            -webkit-animation-duration: 2.2s;
                                        }
                                    }
                                }
                            }
    
                            .tick-mark {
                                color: #FFFFFF;
                                position: absolute;
                                top: 0;
                                right: 0;
                                width: 24px;
                                height: 24px;
                                font-style: normal;
                                border-radius: 100%;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                background-color: #49ce9d;
                                border: 3px solid #FFFFFF;
                                z-index: 1;
    
                                &:before {
                                    content: "\e91e";
                                    font-family: 'vajro-icon';
                                    font-size: 10px;
                                    line-height: 1;
                                }
                            }
    
                            figure {
                                opacity: 0.5;
                                width: 64px;
                                height: 64px;
                                background-position: center;
                                background-repeat: no-repeat;
                                background-size: cover;
                                border-radius: 100%;
                                box-shadow: inset 0 0 0 1px transparent;
                                border: 2px solid #FFFFFF;
                            }
    
                            .pill.square {
                                min-width: 60px;
                                color: #000000;
                                display: inline-block;
                                font-size: 11px;
                                font-weight: 500;
                                letter-spacing: 0.22px;
                                text-align: center;
                                text-align: center;
                                padding: 4px 12px;
                                -webkit-border-radius: 3px;
                                -moz-border-radius: 3px;
                                border-radius: 3px;
                                -moz-background-clip: padding;
                                -webkit-background-clip: padding-box;
                                background-clip: padding-box;
                                background-color: #ffffff;
                                box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
                                margin-top: -8px;
                                z-index: 1;
                            }
                        }
    
                        .vertical-line {
                            display: inline-block;
                            min-width: 1px;
                            height: 56px;
                            background-color: rgba(0, 0, 0, 0.2);
                            margin: 8px 16px 0 0;
    
                            &.pos-absolute {
                                position: absolute;
                                top: 16px;
                                right: -16px;
                                display: inline-block;
                                background-color: rgba(0, 0, 0, 0.2);
                                margin: 0; 
                            }
                        }
    
                        /* scroll bar style starts */
                        &::-webkit-scrollbar {
                            height: 6px;
                            background-color: #F5F5F5;
                            display: block !important;
                        }
                        &::-webkit-scrollbar-track {
                            background: #DDDDDD;
                            margin: 0;
                        }
                        &::-webkit-scrollbar-thumb {
                            background: #BDBDBD;
                            display: block !important;
                        }
                        &::-webkit-scrollbar-thumb:hover {
                            background: rgba(0, 0, 0, .35); 
                        }
                        /* scroll bar style ends */
                    }
    
                    .tbl-pagination {
                        margin: 0 24px 16px;
                    }
                }
                .no-product-added {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    height: 90%;
                    img { 
                        margin-bottom: 16px;
                    }
                    p {
                        font-size: 16px;
                        line-height: 1.4;
                        text-align: center;
                        color: rgba(0, 0, 0, 0.4);
                        width: 40%;
                        margin-bottom: 0px;
                    }
                    .btn {
                        margin-top: 26px;
                        color: #ffffff;
                        background-color: #26bf8c;
                        border-color: #26bf8c;
                        padding: 7px 16px;
                    }
                }
            }
            
            .right-column {
                width: 45%;
                display: flex;
                flex-wrap: wrap;
                flex-direction: column;
                margin-left: 24px;
    
                .facebook-status {
                    height: 54px;
                    margin-bottom: 8px;
                    background: #ffffff;
                    padding: 11px 20px;
                    display: flex;
                    border-radius: 4px;
                    .fb-icon {
                        width: 32px;
                        height: 32px;
                        margin: 0 8px 0 0;
                        padding: 8px 10px 0 10px;
                        border-radius: 20px;
                        background-image: linear-gradient(to bottom, #5a7ced, #0d3edd);
                        img {
                            width: 12px;
                            height: 24px;
                        }
                    }
                    .fb-text {
                        cursor: pointer;
                        margin: auto;
                        margin-left: 0px;
                        font-size: 11px;
                        letter-spacing: 0.22px;
                        .name {
                            color: #000000;
                            margin-bottom: 0px;
                        }
                        .url {
                            color: #adadad;
                            padding-top: 4px;
                            margin-bottom: 0px;
                            &:hover {
                                text-decoration: none;
                            }
                        }
                    }
                    .fb-login {
                        margin: auto;
                    }
                }
    
                .chat-container {
                    position: relative;
                    border-radius: 3px;
                    background-color: #ffffff;
                    height: 382px;
                    border-radius: 4px;
                    .chat-header {
                        height: 108px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 20px 20px 12px;
                        position: sticky;
                        top: 0;
                        left: 20px;
                        right: 20px;
                        background-color: #FFFFFF;
                        border-bottom: 1px solid #f4f4f4;
        
                        .title {
                            flex: 1 1 0%;
                            color: #000000;
                            font-size: 14px;
                            font-weight: 500;
                            line-height: 1;
                            letter-spacing: 0.28px;
                            padding-right: 24px;
                            .show-chat {
                                display: flex;
                                width: 100%;
                                flex-wrap: wrap;
                                .active {
                                    color: #ffffff;
                                    background-color: #323237;
                                    &:hover {
                                        color: #ffffff;
                                        background-color: #323237;
                                    }
                                }
                                button {
                                    margin-top: 8px;
                                    cursor: pointer;
                                    border-radius: 2px;
                                    background-color: #ffffff;
                                    height: 20px;
                                    padding: 3px 12px;
                                    color: #000000;
                                    font-size: 12px;
                                    border: solid 1px #eaeaea;
                                    margin-right: 4px;
                                    font-weight: 400;
                                    &:last-child {
                                        margin-right: 0px;
                                    }
                                }
                                .inactive {
                                    background-color: #f5f5f5;
                                    cursor: no-drop;
                                    color: rgba(0, 0, 0, 0.5);
                                }
                            }
                        }
    
                        .rgt-content {
                            span {
                                font-size: 14px;
                                font-weight: normal;
                                line-height: 1;
                                letter-spacing: 0.28px;
                                color: #adadad;
    
                                &:not(:last-child) {
                                    margin-right: 16px;
                                }
    
                                i {
                                    color: #9d9d9d;
                                    font-size: 16px;
                                    vertical-align: -2px;
                                    margin-right: 8px;
                                }
                            }
                        }
                    }
    
                    .chat-body {
                        width: 100%;
                        padding: 20px;
                        position: absolute;
                        top: 108px;
                        left: 0;
                        bottom: 62px;
                        overflow: hidden;
                        overflow-y: auto;
                        &:hover::-webkit-scrollbar-thumb {
                            display: block;
                        }
    
                        &.bg-image {
                            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23dddddd' fill-opacity='0.4'%3E%3Cpath d='M24.37 16c.2.65.39 1.32.54 2H21.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06A5 5 0 0 1-17.45 28v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H-20a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1L.9 19.22a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0L2.26 23h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM-13.82 27l16.37 4.91L18.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H-13.1z'/%3E%3Cpath id='path6_fill-copy' d='M284.37 16c.2.65.39 1.32.54 2H281.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06a5 5 0 0 1-2.24-8.94v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H240a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM246.18 27l16.37 4.91L278.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H246.9z'/%3E%3Cpath d='M159.5 21.02A9 9 0 0 0 151 15h-42a9 9 0 0 0-8.5 6.02 6 6 0 0 0 .02 11.96A8.99 8.99 0 0 0 109 45h42a9 9 0 0 0 8.48-12.02 6 6 0 0 0 .02-11.96zM151 17h-42a7 7 0 0 0-6.33 4h54.66a7 7 0 0 0-6.33-4zm-9.34 26a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-7a7 7 0 1 1 0-14h42a7 7 0 1 1 0 14h-9.34zM109 27a9 9 0 0 0-7.48 4H101a4 4 0 1 1 0-8h58a4 4 0 0 1 0 8h-.52a9 9 0 0 0-7.48-4h-42z'/%3E%3Cpath d='M39 115a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm6-8a6 6 0 1 1-12 0 6 6 0 0 1 12 0zm-3-29v-2h8v-6H40a4 4 0 0 0-4 4v10H22l-1.33 4-.67 2h2.19L26 130h26l3.81-40H58l-.67-2L56 84H42v-6zm-4-4v10h2V74h8v-2h-8a2 2 0 0 0-2 2zm2 12h14.56l.67 2H22.77l.67-2H40zm13.8 4H24.2l3.62 38h22.36l3.62-38z'/%3E%3Cpath d='M129 92h-6v4h-6v4h-6v14h-3l.24 2 3.76 32h36l3.76-32 .24-2h-3v-14h-6v-4h-6v-4h-8zm18 22v-12h-4v4h3v8h1zm-3 0v-6h-4v6h4zm-6 6v-16h-4v19.17c1.6-.7 2.97-1.8 4-3.17zm-6 3.8V100h-4v23.8a10.04 10.04 0 0 0 4 0zm-6-.63V104h-4v16a10.04 10.04 0 0 0 4 3.17zm-6-9.17v-6h-4v6h4zm-6 0v-8h3v-4h-4v12h1zm27-12v-4h-4v4h3v4h1v-4zm-6 0v-8h-4v4h3v4h1zm-6-4v-4h-4v8h1v-4h3zm-6 4v-4h-4v8h1v-4h3zm7 24a12 12 0 0 0 11.83-10h7.92l-3.53 30h-32.44l-3.53-30h7.92A12 12 0 0 0 130 126z'/%3E%3Cpath d='M212 86v2h-4v-2h4zm4 0h-2v2h2v-2zm-20 0v.1a5 5 0 0 0-.56 9.65l.06.25 1.12 4.48a2 2 0 0 0 1.94 1.52h.01l7.02 24.55a2 2 0 0 0 1.92 1.45h4.98a2 2 0 0 0 1.92-1.45l7.02-24.55a2 2 0 0 0 1.95-1.52L224.5 96l.06-.25a5 5 0 0 0-.56-9.65V86a14 14 0 0 0-28 0zm4 0h6v2h-9a3 3 0 1 0 0 6H223a3 3 0 1 0 0-6H220v-2h2a12 12 0 1 0-24 0h2zm-1.44 14l-1-4h24.88l-1 4h-22.88zm8.95 26l-6.86-24h18.7l-6.86 24h-4.98zM150 242a22 22 0 1 0 0-44 22 22 0 0 0 0 44zm24-22a24 24 0 1 1-48 0 24 24 0 0 1 48 0zm-28.38 17.73l2.04-.87a6 6 0 0 1 4.68 0l2.04.87a2 2 0 0 0 2.5-.82l1.14-1.9a6 6 0 0 1 3.79-2.75l2.15-.5a2 2 0 0 0 1.54-2.12l-.19-2.2a6 6 0 0 1 1.45-4.46l1.45-1.67a2 2 0 0 0 0-2.62l-1.45-1.67a6 6 0 0 1-1.45-4.46l.2-2.2a2 2 0 0 0-1.55-2.13l-2.15-.5a6 6 0 0 1-3.8-2.75l-1.13-1.9a2 2 0 0 0-2.5-.8l-2.04.86a6 6 0 0 1-4.68 0l-2.04-.87a2 2 0 0 0-2.5.82l-1.14 1.9a6 6 0 0 1-3.79 2.75l-2.15.5a2 2 0 0 0-1.54 2.12l.19 2.2a6 6 0 0 1-1.45 4.46l-1.45 1.67a2 2 0 0 0 0 2.62l1.45 1.67a6 6 0 0 1 1.45 4.46l-.2 2.2a2 2 0 0 0 1.55 2.13l2.15.5a6 6 0 0 1 3.8 2.75l1.13 1.9a2 2 0 0 0 2.5.8zm2.82.97a4 4 0 0 1 3.12 0l2.04.87a4 4 0 0 0 4.99-1.62l1.14-1.9a4 4 0 0 1 2.53-1.84l2.15-.5a4 4 0 0 0 3.09-4.24l-.2-2.2a4 4 0 0 1 .97-2.98l1.45-1.67a4 4 0 0 0 0-5.24l-1.45-1.67a4 4 0 0 1-.97-2.97l.2-2.2a4 4 0 0 0-3.09-4.25l-2.15-.5a4 4 0 0 1-2.53-1.84l-1.14-1.9a4 4 0 0 0-5-1.62l-2.03.87a4 4 0 0 1-3.12 0l-2.04-.87a4 4 0 0 0-4.99 1.62l-1.14 1.9a4 4 0 0 1-2.53 1.84l-2.15.5a4 4 0 0 0-3.09 4.24l.2 2.2a4 4 0 0 1-.97 2.98l-1.45 1.67a4 4 0 0 0 0 5.24l1.45 1.67a4 4 0 0 1 .97 2.97l-.2 2.2a4 4 0 0 0 3.09 4.25l2.15.5a4 4 0 0 1 2.53 1.84l1.14 1.9a4 4 0 0 0 5 1.62l2.03-.87zM152 207a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6 2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-11 1a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-6 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3-5a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-8 8a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm0 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4 7a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5-2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5 4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-5-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-24 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm16 5a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm7-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0zm86-29a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1 246 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM275 214a29 29 0 0 0-57.97 0h57.96zM72.33 198.12c-.21-.32-.34-.7-.34-1.12v-12h-2v12a4.01 4.01 0 0 0 7.09 2.54c.57-.69.91-1.57.91-2.54v-12h-2v12a1.99 1.99 0 0 1-2 2 2 2 0 0 1-1.66-.88zM75 176c.38 0 .74-.04 1.1-.12a4 4 0 0 0 6.19 2.4A13.94 13.94 0 0 1 84 185v24a6 6 0 0 1-6 6h-3v9a5 5 0 1 1-10 0v-9h-3a6 6 0 0 1-6-6v-24a14 14 0 0 1 14-14 5 5 0 0 0 5 5zm-17 15v12a1.99 1.99 0 0 0 1.22 1.84 2 2 0 0 0 2.44-.72c.21-.32.34-.7.34-1.12v-12h2v12a3.98 3.98 0 0 1-5.35 3.77 3.98 3.98 0 0 1-.65-.3V209a4 4 0 0 0 4 4h16a4 4 0 0 0 4-4v-24c.01-1.53-.23-2.88-.72-4.17-.43.1-.87.16-1.28.17a6 6 0 0 1-5.2-3 7 7 0 0 1-6.47-4.88A12 12 0 0 0 58 185v6zm9 24v9a3 3 0 1 0 6 0v-9h-6z'/%3E%3Cpath d='M-17 191a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2H3a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2H4zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1-14 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM15 214a29 29 0 0 0-57.97 0h57.96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
                            background-size: 80% 80%;
                            background-position: left center;
                            background-repeat: repeat;
                            background-color: #FCFCFE;
                        }
    
                        .chat-message {
                            margin-bottom: 16px;
    
                            .message-box {
                                width: 100%;
                                display: flex;
                                align-items: flex-end;
                                &.right {
                                    flex-direction: row-reverse;
    
                                    .message-detail {
                                        border-radius: 4px 4px 0px 4px;
                                        background-color: #ffffff;
                                    }
                                    .message-txt {
                                        color: #333333 !important;
                                    }
                                }
    
                                .user-initials, .message-img {
                                    min-width: 24px;
                                    max-width: 24px;
                                    height: 24px;
                                    border-radius: 50%;
                                }
                                
                                .user-initials {
                                    color: #FFFFFF;
                                    background-color: #323237;
                                    font-weight: bold;
                                    border-radius: 100%;
                                    margin-right: 12px;
                                    font-size: 11px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                }
    
                                .message-img {
                                    display: inline-block;
                                    background-size: cover;
                                    background-position: center;
                                    background-repeat: no-repeat;
                                    margin-left: 12px;
                                }
    
                                .message-detail {
                                    max-width: 300px;
                                    border-radius: 4px 4px 4px 0px;
                                    padding: 8px;
                                    min-width: 175px;
                                    background-color: #323237;
                                    box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, 0.12);
                                    position: relative;
    
                                    .message-info {
                                        display: flex;
                                        justify-content: space-between;
                                        margin-bottom: 5px;
                                        font-size: 10px;
                                        color: #adadad;
                                        .name {
                                            width: 60%;
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                            white-space: nowrap;
                                            margin: auto 0px;
                                        }
                                        .time-block-msg {
                                            display: flex;
                                            .time {
                                                margin: auto 0;
                                            }
                                            img {
                                                margin-left: 8px;
                                                cursor: pointer;
                                            }
                                        }
                                    }
                                    .message-txt {
                                        word-wrap: break-word;
                                        font-size: 12px;
                                        font-weight: 600;
                                        color: #ffffff;
                                        letter-spacing: 0.5px;
                                    }
                                    .message-send {
                                        margin-top: 5px;
                                        width: 100%;
                                        display: flex;
                                        color: #adadad;
                                        font-size: 10px;
                                        img {
                                            height: 12px;
                                            margin-right: 4px;
                                        }
                                    }
                                    .block-user-message {
                                        position: absolute;
                                        top: 28px;
                                        right: -56px;
                                        height: 24px;
                                        padding: 5px 22px;
                                        background-color: #f2f2f2;
                                        font-size: 10px;
                                        letter-spacing: 0.5px;
                                        font-weight: 500;
                                        color: #333333;
                                        border-radius: 4px;
                                        box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
                                    }
                                }
                            }
                        }
    
                        .unread-btn-wrapper {
                            text-align: center;
                            position: sticky;
                            bottom: 0;
        
                            .btn {
                                font-size: 12px;
                                font-weight: bold;
                                line-height: 1;
                                letter-spacing: 0.28px;
                                margin: 0;
                                outline: 0 none;
                                color: #ffffff;
                                background-color: #26bf8c;
                                border-color: #26bf8c;
                                padding: 4px 16px;
                                border-radius: 15px;
                            }
                        }
    
                        /* scroll bar style starts */
                        &::-webkit-scrollbar {
                            width: 5px;
                            background-color: #F5F5F5;
                            display: block !important;
                        }
                        &::-webkit-scrollbar-track {
                            background: #DDDDDD;
                            margin: 0;
                        }
                        &::-webkit-scrollbar-thumb {
                            background: #BDBDBD;
                            display: block !important;
                        }
                        &::-webkit-scrollbar-thumb:hover {
                            background: rgba(0, 0, 0, .35); 
                        }
                        /* scroll bar style ends */
                    }
    
                    .chat-footer {
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        min-height: 42px;
                        width: 100%;
                        padding: 0px 20px 20px;
                        background-color: #FFFFFF;
    
                        .chat-input {
                            position: relative;
                            height: 70px;
                            border: 1px solid #dbdbdb;
                            background-color: #fafafa;
                            border-radius: 3px;
    
                            .form-control {
                                color: #000000;
                                padding-right: 56px;
                                min-height: 42px;
                                border: none;
                                background-color: transparent;
                                box-shadow: none;
                            }
    
                            .send-btn {
                                color: #9d9d9d;
                                font-size: 20px;
                                line-height: 1;
                                position: absolute;
                                top: 15px;
                                // margin-top: -10px;
                                right: 16px;
    
                                &.send-btn-live {
                                    color: #26bf8c;
                                }
    
                                &.send-btn-disable {
                                    opacity: .6;
                                    cursor: not-allowed;
                                }
                            }
                        }
    
                        .display-text {
                            margin-top: 4px;
                            font-size: 10px;
                            color: #adadad;
                            letter-spacing: 0.28px;
                        }
                    }
    
                    .empty-text {
                        font-size: 14px;
                        color: #adadad;
                        letter-spacing: 0.28px;
                        width: 300px;
                        height: 100%;
                        display: flex;
                        margin: auto;
                        justify-content: center;
                        align-items: center;
                        text-align: center;
                    }
                }
            }
        }
    
        .fb-comment-div {
            margin-top:10px;
            padding:10px;
            border-radius: 10px;
            border: 1px solid;
            p {
                margin-bottom: 0px !important;
            }
        }
        .fb-comment-option-text {
            color:grey;
        }
    
        .fb-comment-text-size {
            font-size:12px;
        }

        .live-sale-modal {
            position: absolute;
            top: -15px;
            height: auto;
            z-index: 9;
            margin-top: 0;
            background-color: rgba(0, 0, 0, 0.3);
        
            .pdg-content {
                .pdg-content-header {
                    justify-content: flex-end;
                    .popover {
                        display: none !important;
                    }
                }
                
                .pdg-content-body {
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: column;
                    justify-content: space-between;
        
                    .tick-mark {
                        color: #FFFFFF;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 184px;
                        height: 184px;
                        border-radius: 100%;
                        background-color: #26bf8c;
                        border: 16px solid #26bf8c;
                        box-shadow: inset 0 0 0 16px #ffffff;
                        margin: 0 auto 16px;
        
                        i {
                            font-size: 64px;
                        }
                    }
        
                    p {
                        color: #000000;
                        text-align: center;
                        font-size: 18px;
                        font-weight: normal;
                        line-height: 1.5;
                        letter-spacing: 0.36px;
                        padding: 0 6%;
                        margin-bottom: 0;
                    }
                }
            }
        }

        .live-video-pdg {
            display: none;
            align-items: center;
            justify-content: center;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.3);
        
            &.in {
                display: flex;
            }
        
            &.add-product-modal {
                width: auto;
                height: ~"calc(100vh - 72px)";
                position: absolute;
                top: -15px;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 9;
                margin-top: 0;
                .switch-outer {
                    margin: auto 0;
                    margin-left: 16px;
                    .switch {
                        width: 24px;
                        height: 14px;
                        margin-bottom: 0;
                        input:checked + .slider {
                            background: #40d08b;
                            &:before {
                                transform: translateX(10);
                                -webkit-transform: translateX(10px);
                                -ms-transform: translateX(10px);
                            }
                        }
                        .slider {
                            background: rgba(0, 0, 0, 0.4);
                            &:before {
                                width: 8px;
                                height: 8px;
                                top: 50%;
                                margin-top: -4px;
                                left: 3px;
                                background-color: #FFFFFF;
                            }
                        }
                    }
                }
            }
        
            // common css starts
            :focus, :active:focus {
                outline: 0 none;
            }
        
            .btn {                
                color: #000000;
                background-color: #dbdbdb;
                border-color: #dbdbdb;
                font-size: 14px;
                font-weight: bold;
                line-height: 1.2;
                letter-spacing: 0.28px;
                padding: 10px 24px;
                border-radius: 3px;
                margin: 0;
                outline: 0 none;
        
                &.active, &:active, &:focus {
                    box-shadow: none;
                    outline: 0 none;
                }
        
                &.btn-block {
                    display: block;
                    width: 100%;
                }
        
                &.active, &.green-btn {
                    color: #FFFFFF;
                    background-color: #26bf8c;
                    border-color: #26bf8c;
                }
            }
            
            .btn-active-live-setup{
                color: #dbdbdb;
                background-color:#000000 ;
            }
        
            .form-group {
                margin: 0 0 16px;
            }
        
            .control-label {
                display: block;
                color: #000000;
                font-size: 14px;
                font-weight: 500;
                line-height: 1.29;
                letter-spacing: 0.28px;
        
                .grey-txt {
                    display: block;
                    margin-top: 6px;
                    color: #9d9d9d;
                    font-size: 12px;
                    font-weight: normal;
                    line-height: 1;
                    letter-spacing: 0.24px;
                }
            }
        
            .form-control {
                height: 40px;
                border-radius: 2px;
                box-shadow: none;
        
                &::placeholder {
                    color: rgba(0, 0, 0, .2);
                }
            }
        
            textarea.form-control {
                height: auto;
                resize: none;
                padding: 8px 16px;
            }
        
            .live-history-menu {
                height: 200px;
                width: 200px;
                position: absolute;
                top:40px;
                right:10px;
                z-index: 100;
                font-size: 12px;
                line-height: 1.75;
                letter-spacing: 0.24px;
                padding: 0;
                margin-top: 8px;
                border-radius: 2px;
                box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
                overflow: hidden;
                overflow-y: scroll;
                background: white;
        
                .past-live-name {
                    color: #000000;
                    display: block;
                    padding: 12px 20px;
                    transition: background-color .4s;
                    cursor: pointer;
        
                    &:hover {
                        background-color: #f5f5f5;
                    }
                }
        
                .live-history-list {
                    padding: 5px 10px !important;
                    border-bottom: 1px solid #eee;
                    &:last-child {
                        border-bottom: 0px;
                    }
                }
        
                .no-result {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    min-height: 160px;
                }
            }
        
            .input-search-menu {
                height: 160px;
                font-size: 12px;
                line-height: 1.75;
                letter-spacing: 0.24px;
                padding: 0;
                margin-top: 8px;
                border-radius: 2px;
                box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
                overflow: hidden;
                overflow-y: scroll;
                
                .popover-suggested-product {
                    display: flex;
                    flex-direction: column;
                    color: #000000;
                    display: block;
                    padding: 12px 20px;
                    transition: background-color .4s;
                    cursor: pointer;
                    .popover-suggested-product-info {
                        margin-top: 4px;
                        font-size: 10px;
                        color: #f62369;
                    }
                    &:hover {
                        background-color: #fafafa;
                    }
                }
                span {
                    color: #000000;
                    display: block;
                    padding: 12px 20px;
                    transition: background-color .4s;
                    cursor: pointer;
        
                    &:hover {
                        background-color: #fafafa;
                    }
                }
        
                .no-result {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    min-height: 160px;
                }
            }
            // common css ends
        
            .pdg-content {
                position: relative;
                width: 416px;
                height: 424px;
                background-color: #ffffff;
                overflow: hidden;
        
                .pdg-content-header {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    padding: 12px 16px;
                    min-height: 48px;
                    position: absolute;
                    top: 0;
                    left: 0;
                    .popover {
                        display: none !important;
                    }
        
                    .back-arrow, .close-arrow {
                        color: #000000;
                        font-size: 14px;
                        font-weight: 500;
                        line-height: 1.2;
                        letter-spacing: 0.28px;
                        cursor: pointer;
        
                        i {
                            font-size: 16px;
                            vertical-align: text-top;
                            margin-right: 8px;
                        }
                    }
        
                    .back-arrow {
                        i {
                            display: inline-block;
                            transform: scaleX(-1);
                        }
                    }
        
                    &.flex-end {
                        justify-content: flex-end;
                    }
                }
        
                .pdg-content-body {
                    color: #000000;
                    width: 100%;
                    padding: 16px 24px;
                    position: absolute;
                    top: 48px;
                    left: 0;
                    bottom: 0;
                    overflow: hidden;
                    overflow-y: scroll;
                    animation: 0.5s ease 0s 1 normal none running slideInRight;
        
                    .heading-txt {
                        color: #000000;
                        font-size: 18px;
                        font-weight: bold;
                        line-height: 1;
                        letter-spacing: 0.36px;
                        text-align: center;
                        margin-bottom: 32px;
                    }
                    
                    .select-list-wrapper {
                        display: flex;
                        flex-wrap: wrap;
                        flex-direction: column;
                        margin-bottom: 64px;
        
                        .select-list {
                            position: relative;
                            padding: 10px 40px 10px 16px;
                            background-color: #fafafa;
                            border-radius: 5px;
                            margin-bottom: 8px;
                            transition: all .4s ease;
                            cursor: pointer;
        
                            &:hover {
                                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
                                transform: translateY(-2px);
                            }
        
                            &:after {
                                content: "\e907";
                                font-family: 'vajro-icon';
                                font-size: 10px;
                                position: absolute;
                                top: 50%;
                                margin-top: -8px;
                                right: 16px;
                            }
        
                            span {
                                color: #000000;
                                display: block;
                                font-size: 14px;
                                font-weight: 500;
                                line-height: 1;
                                letter-spacing: 0.28px;
        
                                &.txt {
                                    color: #9d9d9d;
                                    font-size: 12px;
                                    font-weight: normal;
                                    line-height: 1.2;
                                    letter-spacing: 0.24px;
                                    margin-top: 8px;
                                }
                            }
                        }
                    }
        
                    .select-product-wrapper {
                        display: flex;
                        flex-wrap: wrap;
                        flex-direction: column;
        
                        .select-product-list {
                            color: rgba(0, 0, 0, 0.5);
                            font-size: 14px;
                            font-weight: normal;
                            line-height: 1.5;
                            letter-spacing: 0.28px;
                            padding: 24px 40px;
                            text-align: center;
                            background-color: #fafafa;
                            border: 1px solid #fafafa;
                            border-radius: 5px;
                            margin-bottom: 24px;
                            transition: all .4s ease;
                            cursor: pointer;
        
                            &:hover, &.active {
                                background-color: #ffffff;
                                border-color: #000000;
                                transform: translateY(-2px);
                            }
        
                            span {
                                display: block;
                                color: #000000;
                                font-size: 16px;
                                font-weight: 500;
                                line-height: 0.75;
                                letter-spacing: 0.32px;
                                margin-bottom: 8px;
                            }
                        }
                    }
        
                    .note-txt {
                        font-size: 12px;
                        font-weight: normal;
                        line-height: 1.5;
                        letter-spacing: 0.24px;
                        text-align: center;
                        padding: 0 4%;
                        margin-bottom: 0;
                    }
        
                    .pro-tip-txt {
                        color: #000000;
                        font-size: 14px;
                        font-weight: normal;
                        line-height: 1.21;
                        letter-spacing: 0.28px;
                        text-align: center;
                        padding: 8px 12px;
                        background-color: #f4f4f4;
                    }
        
                    .datetimepicker {
                        width: 100%;
                        margin: 0;            
                    }
        
                    .product-deatils-wrapper {
                        position: relative;
        
                        &.enable-tab-header {
                            .tab-body {
                                top: 48px;
                            }
                        }
                        &.enable-tab-footer {
                            .tab-body {
                                bottom: 56px;
                            }
                        }
        
                        .tab-header {
                            display: flex;
                            align-items: center;
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            padding-left: 0;
                            list-style: none;
                            margin: 0;
        
                            &:after {
                                content: '';
                                position: absolute;
                                bottom: 0;
                                left: 0;
                                width: 100%;
                                height: 3px;
                                background-color: #f4f4f4;
                            }
        
                            li {
                                position: relative;
                                width: 100%;
        
                                &:last-child:after {
                                    content: '';
                                    position: absolute;
                                    bottom: 0;
                                    left: 0;
                                    width: 100%;
                                    height: 3px;
                                    background-color: #000000;
                                    z-index: 1;
                                    transition: all 0.3s;
                                }
        
                                a {
                                    display: block;
                                    color: #adadad;
                                    font-size: 14px;
                                    font-weight: 500;
                                    line-height: 0.86;
                                    letter-spacing: 0.28px;
                                    padding: 10px 16px;
                                    text-align: center;
                                    text-decoration: none;
                                }
        
                                // HOVER & ACTIVE STYLE 
                                &:first-child.active ~ li:last-child:after {
                                    left: -100%;
                                }
                                &.active a {
                                    color: #000000;
                                }
                            }
                        }
        
                        .tab-body {
                            position: absolute;
                            top: 0;
                            left: 0;
                            bottom: 0;
                            width: 100%;
                            overflow: hidden;
                            overflow-y: scroll;
                        }
        
                        .tab-footer {
                            width: 100%;
                            display: flex;
                            position: absolute;
                            left: 0;
                            bottom: 0;
                            padding: 8px 24px;
                            min-height: 56px;
                            background-color: #ffffff;
                            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.16);
        
                            .btn {
                                display: block;
                                width: 100%;
                                background-color: #26bf8c;
                                border-color: #26bf8c;
                                border-radius: 5px;
                            }
                        }
        
                        .product-deatils-list {
                            .list {
                                display: flex;
                                margin-bottom: 8px;
                                
                                .left-col {
                                    width: 70%;
                                    position: relative;
                                    display: flex;
                                    align-items: center;
                                    padding-left: 32px;
        
                                    .list-no {
                                        color: #ffffff;
                                        position: absolute;
                                        top: 0;
                                        left: 0;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        width: 20px;
                                        height: 20px;
                                        font-size: 11px;
                                        font-style: normal;
                                        font-weight: normal;
                                        line-height: 1;
                                        letter-spacing: 0.24px;
                                        background-color: #000000;
                                        border-radius: 100%;
                                    }
        
                                    img {
                                        width: 72px;
                                        height: 72px;
                                        object-fit: contain;
                                        border-radius: 3px;
                                        margin-right: 8px;
                                    }
        
                                    .title {
                                        color: #000000;
                                        max-width: 96px;
                                        font-size: 12px;
                                        font-weight: normal;
                                        line-height: 1.5;
                                        letter-spacing: 0.12px;
                                        display: -webkit-box;
                                        -webkit-line-clamp: 3;
                                        -webkit-box-orient: vertical;
                                        overflow: hidden;
                                    }
                                }
                                .right-col {
                                    width: 30%;
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                    
                                    .view-inventory-btn {
                                        color: #ff8f3c;
                                        max-width: 64px;
                                        text-align: center;
                                        font-size: 10px;
                                        font-weight: normal;
                                        line-height: 1.5;
                                        letter-spacing: 0.1px;
                                        padding: 6px;
                                        display: inline-block;
                                    }
        
                                    i {
                                        color: #ff4540;
                                        font-size: 16px;
                                        cursor: pointer;
                                    }
                                }
                            }
                        }
                    }
        
                    .choose-advanced-options {
                        .form-control {
                            height: 36px;
                        }
                    }
        
                    .facebook-login {
                        border: 0px;
                        background: #2692F5;
                        color: #ffffff;
                        border-radius: 4px;
                        opacity: 0.85;
                        font-size: 14px;
                        line-height: 16px;
                        font-family: inherit;
                        padding: 4px 8px;
                    }
                    .choose-target-audience {
                        .widget-header {
                            .row>div {
                                margin-bottom: 0px;
                            }
                            .pull-left {
                                display: flex;
                            }
                            .pull-right {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                height: 30px;
                                &.logout-fb {
                                    justify-content: flex-start;
                                }
                            }
                        }
                        .select-facebook-option-title {
                            font-size: 12px;
                            margin-bottom: 8px;
                            text-align: left;
                            font-family: 'Poppins', serif !important;
                        }
                        .select-facebook-option-dropdown {
                            position: relative;
                            margin-bottom: 24px;
                            font-family: 'Poppins', serif !important;
                            &::before {
                                content: '\f078';
                                font: normal normal normal 12px/1 FontAwesome;
                                color: #000000;
                                right: 12px;
                                height: 100%;
                                padding: 15px 0px;
                                position: absolute;
                                pointer-events: none;
                            }
                            .diableOption {
                                position: absolute;
                                z-index: 1;
                                background: rgba(0, 0, 0, 0.10);
                                content: "";
                                top: 0px;
                                bottom: 0px;
                                right: 0px;
                                left: 0px;
                                border-radius: 4px;
                            }
                            .error-text {
                                color: #ff0000;
                                font-size: 12px;
                                position: absolute;
                            }
                        }
                        .select-option {
                            appearance: none;
                            width: 100%;
                            border: solid 1px #C5C9CD;
                            background: #ffffffff;
                            border-radius: 4px;
                            padding: 12px 16px;
                            font-size: 12px;
                            font-family: 'Poppins', serif !important;
                            &:focus-visible {
                                outline: 0px;
                            }
                        }
                    }
        
                    /* scroll bar style starts */
                    &::-webkit-scrollbar {
                        width: 4px;
                        background-color: #F5F5F5;
                    }
                    &::-webkit-scrollbar-track {
                        background: #FFFFFF;
                        margin: 0;
                    }
                    &::-webkit-scrollbar-thumb {
                        background: rgba(0, 0, 0, 0.4);
                    }
                    &::-webkit-scrollbar-thumb:hover {
                        background: rgba(0, 0, 0, .35); 
                    }
                    /* scroll bar style ends */
        
                    &.enable-footer {
                        bottom: 64px;
                    }
                }
        
                .pdg-content-footer {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 10px 24px 16px;
                    min-height: 64px;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                }
            }
        }

        .survey-popup {
            position: absolute;
            display: none;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: ~"calc(100vh - 72px)";
            background-color: rgba(222, 222, 222, 0.72);
            top: -15px;
            bottom: 0px;
            right: 0px;
            left: 0px;
            z-index: 999;
            &.active {
                display: flex;
            }
            .survey-popup-content {
                width: 460px;
                height: auto;
                border-radius: 8px;
                background: #ffffff;
                position: relative;
                .survey-popup-not-allowed {
                    position: absolute;
                    top: 0px;
                    bottom: 0px;
                    right: 0px;
                    left: 0px;
                    cursor: not-allowed;
                }
                .survey-popup-content-header {
                    position: relative;
                    .close-arrow {
                        font-size: 20px;
                        position: absolute;
                        top: 20px;
                        right: 20px;
                    }
                }
                .survey-popup-content-body {
                    padding: 32px;
                    text-align: center;
                    .survey-popup-title {
                        color: #f62369;
                        font-size: 14px;
                        font-weight: 600;
                        letter-spacing: 0.32px;
                    }
                    .survey-popup-sub-title {
                        padding-top: 20px;
                        color: #000;
                        font-size: 16px;
                        letter-spacing: 0.36px;
                    }
                    .survey-popup-rating {
                        padding-top: 16px;
                        .rating {
                            margin: 0;
                            padding: 0;
                            li {
                                list-style-type: none;
                                display: inline-block;
                                padding: 1px;
                                text-align: center;
                                font-weight: bold;
                                cursor: pointer;
                                margin-right: 14px;
                                &:last-child {
                                    margin-right: 0px;
                                }
                                img {
                                    height: 30px;
                                    width: 30px;
                                }
                            }
                        }
                        ul.rating {
                            display: inline-block;
                        }
                    }
                    .survey-popup-question {
                        color: #000;
                        font-size: 14px;
                        padding-top: 30px;
                    }
                    .survey-popup-answer {
                        padding-top: 16px;
                        display: flex;
                        cursor: pointer;
                        overflow-x: auto;
                        justify-content: space-between;
                        .survey-popup-option {
                            font-size: 12px;
                            padding: 8px 10px;
                            border-radius: 4px;
                            border: solid 1px #000;
                            width: 100%;
                            white-space: nowrap;
                            margin-right: 12px;
                            &:last-child {
                                margin-right: 0px;
                            }
                            &.active {
                                border: solid 1px #f62369;
                                color: #f62369;
                            }
                        }
                    }
                    .survey-popup-button {
                        padding-top: 32px;
                        .submit-btn {
                            font-size: 14px;
                            font-weight: 600;
                            letter-spacing: 0.32px;
                            background-color: #fcd0df;
                            padding: 12px 24px;
                            border: 0px;
                            border-radius: 8px;
                            color: #fff;
                            cursor: not-allowed;
                            &.active {
                                background-color: #f62369;
                                cursor: pointer;
                            }
                        }
                    }
                }
            }
        }

        .live-video-completed {
            position: absolute;
            display: none;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: ~"calc(100vh - 72px)";
            background-color: rgba(222, 222, 222, 0.72);
            top: -15px;
            bottom: 0px;
            right: 0px;
            left: 0px;
            z-index: 9;
            &.active {
                display: flex;
            }
            .live-video-completed-content {
                width: 400px;
                height: auto;
                border-radius: 8px;
                background: #ffffff;
                .live-video-completed-header {
                    position: relative;
                    .close-arrow {
                        font-size: 18px;
                        position: absolute;
                        top: 16px;
                        right: 16px;
                    }
                }
                .live-video-completed-body {
                    padding: 32px;
                    text-align: center;
                    .live-video-completed-title {
                        font-size: 16px;
                        color: #f62369;
                        font-weight: 600;
                    }
                    .live-video-completed-sub-title {
                        padding-top: 10px;
                        font-size: 14px;
                    }
                    .live-video-completed-tick-mark {
                        width: 175px;
                        height: 175px;
                        margin: auto;
                    }
                    .live-video-completed-info {
                        font-size: 16px;
                    }
                    .live-video-completed-sub-info {
                        padding-top: 10px;
                        font-size: 14px;
                    }
                    .live-video-completed-download-btn {
                        padding-top: 16px;
                        button {
                            padding: 8px 16px;
                            border: 0px;
                            border-bottom: solid 1px #f62369;
                            background-color: #fff;
                            color: #f62369;
                            font-size: 14px;
                            font-weight: 500;
                            img {
                                margin-right: 4px;
                            }
                        }
                    }
                }
            }
        }

        .inventory-management {
            width: 100%;
            display: none;
            position: fixed;
            inset: 0px;
            background: rgba(0, 0, 0, 0.27);
            z-index: 9;
            .w-60 {
                width: 60%;
            }
            .w-40 {
                width: 40%;
            }
            .w-46 {
                width: 46%;
            }
            .w-20 {
                width: 20%;
            }
            .w-14 {
                width: 14%;
            }
            .text-align-center {
                justify-content: center;
                align-items: center;
            }
            .text-align-right {
                justify-content: flex-end;
                align-items: center;
            }
            &.active {
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .inventory-management-container {
                background: #FFFFFF;
                max-height: 500px;
                width: 500px;
                border-radius: 2px;
            }
            .inventory-management-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 8px 16px;
                .inventory-management-img-title {
                    display: flex;
                    align-items: center;
                    .product-image {
                        width: 40px;
                        height: 40px;
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: cover;
                        border-radius: 4px;
                    }
                    .title {
                        margin-left: 8px;
                        color: #131313;
                        font-weight: 600;
                        font-size: 14px;
                        line-height: 20px;
                        color: #131313;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        width: 350px;
                        cursor: pointer;
                    }
                }
            }
            .inventory-management-body {
                position: relative;
                .inventory-management-table-header {
                    position: sticky;
                    top: 0px;
                    background-color: #FFFFFFF;
                    border-bottom: 1px solid #EAECF0;
                    .inventory-management-header-list {
                        display: flex;
                        width: 100%;
                        justify-content: space-between;
                        align-items: center;
                        div {
                            display: flex;
                            padding: 8px 16px;
                            color: #646464;
                            font-weight: 400;
                            font-size: 14px;
                            line-height: 20px;
                        }
                    }
                }
                .inventory-management-table-body {
                    max-height: 300px;
                    overflow-y: auto;
                    &::-webkit-scrollbar {
                        height: 6px;
                        background-color: #F5F5F5;
                        display: block !important;
                    }
                    &::-webkit-scrollbar-track {
                        background: #DDDDDD;
                        margin: 0;
                    }
                    &::-webkit-scrollbar-thumb {
                        background: #BDBDBD;
                        display: block !important;
                    }
                    &::-webkit-scrollbar-thumb:hover {
                        background: rgba(0, 0, 0, .35); 
                    }
                    .inventory-management-body-list {
                        position: relative;
                        background-color: #FFFFFFF;
                        border-bottom: 1px solid #EAECF0;
                        .inventory-management-body-list-detail {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            border-bottom: 1px solid #EEEEEE;
                            .inventory-title {
                                background: #EEEEEE;
                                border-radius: 4px;
                                padding: 4px 8px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                cursor: pointer;
                            }
                            .label-title {
                                width: 100%;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                            div {
                                position: relative;
                                padding: 8px 16px;
                                color: #131313;
                                font-weight: 400;
                                font-size: 12px;
                                line-height: 20px;
                                display: flex;
                            }
                            .rotate-img {
                                &.active {
                                    transform: rotate(180deg);
                                }
                            }
                            .streaming-type-tooltip {
                                position: relative;
                                margin-left: 8px;
                                cursor: pointer;
                                .streaming-type-tooltip-icon {
                                    display: flex;
                                    &:hover {
                                        svg {
                                            path {
                                                stroke: #F62369;
                                            }
                                        }
                                    }
                                }
                                .streaming-type-tooltip-text {
                                    display: none;
                                    width: 200px;
                                    background-color: #FFFFFF;;
                                    color: #001E3E;
                                    border-radius: 4px;
                                    padding: 4px 8px;
                                    position: absolute;
                                    z-index: 99;
                                    top: -5px;
                                    right: 0px;
                                    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
                                    font-size: 11px;
                                    line-height: 18px;
                                    margin-right: 24px;
                                    &::after {
                                        content: "";
                                        position: absolute;
                                        top: 50%;
                                        left: 100%;
                                        margin-top: -5px;
                                        border-width: 5px;
                                        border-style: solid;
                                        border-color: transparent transparent transparent #FFFFFF;
                                    }
                                    .streaming-type-title {
                                        font-weight: 600;
                                        padding-bottom: 4px;
                                    }
                                    ol {
                                        padding-left: 16px;
                                        margin-bottom: 0px;
                                    }
                                    .streaming-type-link {
                                        margin-top: 12px;
                                        a {
                                            color: #F62369;
                                            &:hover {
                                                text-decoration: none;
                                            }
                                        }
                                    }
                                }
                            }
                            .streaming-type-tooltip:hover .streaming-type-tooltip-text {
                                display: block;
                            }
                        }
                        .list-of-user-loading {
                            display: none;
                            max-height: 200px;
                            background: #F7F7F7;
                            &.active {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }
                        }
                        .list-of-user {
                            display: none;
                            max-height: 200px;
                            background: #F7F7F7;
                            &.active {
                                display: flex;
                            }
                            .list-of-user-title {
                                position: sticky;
                                top: 0px;
                                color: #000000;
                                font-weight: 500;
                                font-size: 12px;
                                line-height: 20px;
                            }
                            .list-of-user-overflow {
                                height: 148px;
                                overflow-y: auto;
                                &::-webkit-scrollbar {
                                    height: 6px;
                                    background-color: #F5F5F5;
                                    display: block !important;
                                }
                                &::-webkit-scrollbar-track {
                                    background: #DDDDDD;
                                    margin: 0;
                                }
                                &::-webkit-scrollbar-thumb {
                                    background: #BDBDBD;
                                    display: block !important;
                                }
                                &::-webkit-scrollbar-thumb:hover {
                                    background: rgba(0, 0, 0, .35); 
                                }
                            }
                            .list-of-user-continer, .list-of-user-continer-no-user {
                                display: flex;
                                flex-wrap: wrap;
                                div {
                                    margin-top: 8px;
                                    margin-right: 8px;
                                    border-radius: 20px;
                                    padding: 4px 12px;
                                    color: #000000;
                                    font-weight: 400;
                                    font-size: 12px;
                                    line-height: 20px;
                                }
                            }
                            .list-of-user-continer-no-user {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                width: 100%;
                                height: 100%;
                                div {
                                    margin-top: 8px;
                                    margin-right: 8px;
                                    border-radius: 20px;
                                    padding: 4px 12px;
                                    color: #000000;
                                    font-weight: 400;
                                    font-size: 12px;
                                    line-height: 20px;
                                }
                            }
                            .list-of-user-reserved {
                                position: relative;
                                background: #FFFFFF;
                                width: 50%;
                                padding: 8px;
                                margin: 8px;
                                margin-right: 4px;
                                .list-of-user-continer {
                                    div {
                                        background: #FCBDD3;
                                    }
                                }
                            }
                            .full-width {
                                width: 100% !important;
                            }
                            .list-of-user-waitlist {
                                position: relative;
                                background: #FFFFFF;
                                width: 50%;
                                padding: 8px;
                                margin: 8px;
                                margin-left: 4px;
                                .list-of-user-continer {
                                    div {
                                        background: #FFE0B3;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .go-live-popup-model {
        display: none;
        position: absolute;
        top: 0px;
        right: 0px;
        left: 0px;
        bottom: 0px;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9;
        &.active {
            display: block;
        }
        .go-live-popup-model-card {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: auto;
            height: 100%;
            .go-live-popup-card-view {
                position: relative;
                width: 400px;
                height: 200px;
                background: #ffffff;
                border-radius: 4px;
                padding: 24px;
                .close-btn {
                    position: absolute;
                    right: 24px;
                    top: 24px;
                    font-size: 16px;
                }
                .text-content {
                    font-size: 18px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 100%;
                    div {
                        text-align: center;
                        padding: 16px;
                    }
                }
            }
        }
    }

    .go-live-setup-popup-model {
        display: none;
        position: absolute;
        top: 0px;
        right: 0px;
        left: 0px;
        bottom: 0px;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9;
        &.active {
            display: block;
        }
        .go-live-popup-model-card {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: auto;
            height: 100%;
            .go-live-popup-card-view {
                position: relative;
                width: 480px;
                height: auto;
                background: #ffffff;
                border-radius: 4px;
                padding: 34px 20px;
                .close-btn {
                    position: absolute;
                    right: -48px;
                    top: -48px;
                    padding: 16px;
                    background: #fff;
                    border-radius: 50%;
                    height: 48px;
                    width: 48px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .text-content {
                    font-size: 18px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 100%;
                    flex-direction: column;
                    .text {
                        text-align: center;
                        font-size: 16px;
                        margin: 36px 24px 4px;
                    }
                }
            }
        }
    }

    .push-notification-popup-model, .streaming-type-popup-model {
        display: none;
        position: absolute;
        top: 0px;
        right: 0px;
        left: 0px;
        bottom: 0px;
        background: rgba(0, 0, 0, 0.25);
        z-index: 9;
        &.active {
            display: flex;
        }
        .streaming-type-popup-model-card, .push-notification-popup-model-card {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: auto;
            height: ~'calc(100vh - 158px)';
            .streaming-type-popup-card-view, .push-notification-popup-card-view {
                position: relative;
                width: 350px;
                height: auto;
                background: #ffffff;
                border-radius: 8px;
                padding: 32px 28px;
                .text-content {
                    text-align: center;
                    .streaming-type-title, .push-notification-title {
                        font-weight: 500;
                        font-size: 16px;
                        line-height: 22px;
                        margin-bottom: 8px;
                    }
                    .streaming-type-sub-title, .push-notification-sub-title {
                        font-size: 14px;
                        line-height: 22px;
                        margin-bottom: 32px;
                    }
                    .push-notification-btn, .streaming-type-btn {
                        .push-notification-cancel-btn, .streaming-type-cancel-btn {
                            padding: 8px 12px;
                            background: #FFFFFF;
                            border: 1px solid #ADADAD;
                            border-radius: 4px;
                            font-weight: 600;
                            font-size: 14px;
                            line-height: 20px;
                            margin-right: 12px;
                        }
                        .streaming-type-submit-btn, .push-notification-submit-btn {
                            padding: 8px 12px;
                            background: #FD3232;
                            border-radius: 4px;
                            font-weight: 600;
                            font-size: 14px;
                            line-height: 20px;
                            border: 1px solid #FD3232;
                            color: #fff;
                        }
                    }
                }
                .close-btn {
                    cursor: pointer;
                    position: absolute;
                    right: 24px;
                    top: 24px;
                    img {
                        height: 20px;
                        padding: 2px;
                        border-radius: 50%;
                        border: 2px solid #000;
                    }
                }
            }
        }
    }

    .update_needed_popup {
        display: none;
        position: absolute;
        top: 0px;
        bottom: 0px;
        right: 0px;
        left: 0px;
        background: rgba(0, 0, 0, 0.5);
        justify-content: center;
        align-items: center;
        &.active {
            display: flex;
            z-index: 99;
        }
        .update-needed-popup-modal-dialog {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
            width: 400px;
        }
        .modal-content {
            position: relative;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid rgba(0,0,0,.2);
            border-radius: 6px;
            outline: 0;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
            .modal-header {
                padding: 15px;
                border-bottom: 1px solid #e5e5e5;
            }
            .modal-body {
                position: relative;
                padding: 15px;
                .btn_toggle {
                    background: linear-gradient(
                        180deg, #616fc6, #616fc6) !important;
                    border-color: #5c65aa !important;
                    box-shadow: inset 0 0 0 0 transparent, 0 1px 0 0 rgb(22, 29, 37, 0.05), 0 0 1px 0 #38469b !important;
                    color: #fff;
                }
                .btn-small {
                    padding: 8px 14px !important;
                    font-size: 14px !important;
                    line-height: unset !important;
                    border-radius: 4px !important;
                }
            }
        }
    }

    .go-live-setup-modal-safari-issue {
        visibility: hidden;
        position: absolute;
        top: 0px;
        bottom: 0px;
        right: 0px;
        left: 0px;
        width: 100%;
        z-index: 9;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        &.active {
            visibility: visible;
        }
        .go-live-setup-modal-safari-issue-content {
            position: relative;
            display: flex;
            justify-self: center;
            align-items: center;
            width: 400px;
            margin: auto;
            .go-live-setup-modal-safari-issue-content-body {
                background-color: #ffffff;
                position: relative;
                color: #000000;
                width: 100%;
                padding: 24px;
                border-radius: 4px;
                height: auto;
                text-align: center;
                .close-btn {
                    position: absolute;
                    top: 16px;
                    right: 16px;
                    .close-arrow {
                        color: #000000;
                        font-size: 14px;
                        font-weight: 500;
                        line-height: 1.2;
                        letter-spacing: 0.28px;
                        cursor: pointer;
                        i {
                            font-size: 16px;
                            vertical-align: text-top;
                        }
                    }
                }
                .main-title {
                    font-size: 24px;
                    font-weight: 600;
                    padding-bottom: 16px;
                }
                .sub-title {
                    margin-top: 8px;
                    font-size: 12px;
                    font-weight: 500;
                }
                .browers-icon {
                    margin-top: 24px;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    img {
                        height: 56px;
                    }
                }
            }
        }
    }

    .go-live-setup-modal-steps-info {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        z-index: 9;
        background: rgba(0, 0, 0, 0.25);
        overflow-y: auto;
        display: none;
        justify-content: center;
        align-items: center;
        &.active {
            display: flex;
        }
        .go-live-setup-modal-steps-info-content {
            position: relative;
            display: flex;
            justify-self: center;
            align-items: center;
            width: 400px;
            margin: auto;
            .go-live-setup-modal-steps-info-content-body {
                background-color: #ffffff;
                position: relative;
                color: #000000;
                width: 100%;
                padding: 24px;
                border-radius: 4px;
                height: auto;
                .go-live-setup-modal-list-view {
                    .go-live-setup-modal-steps-list {
                        display: flex;
                        width: 100%;
                        margin-bottom: 16px;
                        justify-content: center;
                        align-items: center;
                        &:last-child {
                            margin-bottom:8px;
                        }
                        .go-live-setup-modal-steps-line {
                            flex: 0 0 24px;
                            margin-right: 24px;
                            position: relative;
                            .circle-loader {
                                margin: 0;
                                border: 2px solid rgba(0, 0, 0, 0.2);
                                border-left-color: #F62369;
                                animation-name: loader-spin;
                                animation-duration: 1s;
                                animation-iteration-count: infinite;
                                animation-timing-function: linear;
                                position: relative;
                                display: inline-block;
                                vertical-align: top;
                            }
                            .circle-loader, .circle-loader:after {
                                border-radius: 50%;
                                width: 24px;
                                height: 24px;
                            }
                              
                            .success {
                                -webkit-animation: none;
                                animation: none;
                                border-color: #5cb85c;
                                transition: border opacity 500ms ease-out;
                            }
                            .success .status.draw:after {
                                animation-duration: 1.2s;
                                animation-timing-function: ease;
                                animation-name: checkmark;
                                transform: scaleX(-1) rotate(135deg);
                            }
                            .success .status:after {
                                opacity: 1;
                                height: 14px;
                                width: 7px;
                                transform-origin: left top;
                                border-right: 2px solid #5cb85c;
                                border-top: 2px solid #5cb85c;
                                content: "";
                                left: 2px;
                                top: 11px;
                                position: absolute;
                            }
                              
                            .failed {
                                -webkit-animation: none;
                                animation: none;
                                border-color: #FF0000;
                                transition: border opacity 500ms ease-out;
                            }
                            .failed .status {
                                top: 50%;
                                left: 50%;
                                position: absolute;
                            }
                            .failed .status.draw:before, .failed .status.draw:after {
                                animation-duration: 1.2s;
                                animation-timing-function: ease;
                                animation-name: crossmark;
                            }
                            .failed .status.draw:before {
                                transform: scaleX(-1) rotate(45deg);
                            }
                            .failed .status.draw:after {
                                transform: scaleX(-1) rotate(225deg);
                            }
                            .failed .status:before, .failed .status:after {
                                opacity: 1;
                                height: 10px;
                                width: 10px;
                                transform-origin: left top;
                                border-right: 2px solid #FF0000;
                                border-top: 2px solid #FF0000;
                                content: "";
                                position: absolute;
                            }
                            .failed .status:before {
                                left: ~"calc(10px - 4px)";
                                top: ~"calc(4px - 11px)";
                            }
                            .failed .status:after {
                                left: ~"calc(3.5px - 9px)";
                                top: ~"calc(9px - 2px)";
                            }
                              
                            @keyframes loader-spin {
                                0% {
                                    transform: rotate(0deg);
                                }
                                100% {
                                    transform: rotate(360deg);
                                }
                            }
                            @keyframes checkmark {
                                0% {
                                    height: 0;
                                    width: 0;
                                    opacity: 1;
                                }
                                20% {
                                    height: 0;
                                    width: 7px;
                                    opacity: 1;
                                }
                                40% {
                                    height: 14px;
                                    width: 7px;
                                    opacity: 1;
                                }
                                100% {
                                    height: 14px;
                                    width: 7px;
                                    opacity: 1;
                                }
                            }
                            @keyframes crossmark {
                                0% {
                                    height: 0;
                                    width: 0;
                                    opacity: 1;
                                }
                                20% {
                                    height: 0;
                                    width: 10px;
                                    opacity: 1;
                                }
                                40% {
                                    height: 10px;
                                    width: 10px;
                                    opacity: 1;
                                }
                                100% {
                                    height: 10px;
                                    width: 10px;
                                    opacity: 1;
                                }
                            }
                        }
                        .go-live-setup-modal-steps-content {
                            flex: 1 1 auto;
                            letter-spacing: 0.75px;
                            .go-live-setup-modal-steps-title {
                                font-size: 16px;
                            }
                            .go-live-setup-modal-steps-sub-title {
                                font-size: 14px;
                                color: rgba(0, 0, 0, 0.5);
                                margin-bottom: 12px;
                                display: none;
                                &.active {
                                    display: block;
                                }
                                div:first-child {
                                    margin-bottom: 4px;
                                }
                                div:last-child {
                                    margin-bottom: 8px;
                                }
                            }
                            .go-live-setup-modal-steps-completed {
                                .go-live-setup-modal-steps-completed-circle {
                                    height: 20px;
                                    width: 20px;
                                    margin-right: 4px;
                                }
                                .go-live-setup-modal-steps-completed-text {
                                    font-size: 12px;
                                    color: #4ac691;
                                    font-weight: 600;
                                }
                            }
                            .go-live-setup-modal-steps-completed-btn {
                                font-size: 12px;
                                border-radius: 4px;
                                background-color: #4e71e6;
                                padding: 12px 22px;
                                color: #ffffff;
                                width: fit-content;
                                border: 0px;
                                font-family: 'Poppins', serif !important;
                                &.disable {
                                    display: none;
                                }
                                &.disabled-btn {
                                    cursor: not-allowed;
                                }
                            }
                            .go-live-setup-modal-steps-configure-btn {
                                background-color: #fff !important;
                                border: 1px solid #707070;
                                color: #000000 !important;
                                font-family: 'Poppins', serif !important
                            }
                            @keyframes wave{
                                0%{
                                    background-position: -468px 0;
                                }
                                100%{
                                    background-position: 468px 0;
                                }
                            }
                            
                            @-webkit-keyframes wave{
                                0%{
                                    background-position: -468px 0;
                                }
                                100%{
                                    background-position: 468px 0;
                                }
                            }
                        }
                    }
                }
                .cancel-next-button {
                    padding-top: 16px;
                    display: flex;
                    align-items: center;
                    justify-content: right;
                    button {
                        padding: 8px 16px;
                        border-radius: 4px;
                        width: 100px;
                    }
                    .cancel-button {
                        border: 1px solid #333333;
                        margin-right: 8px;
                        color: #333333;
                        background: #fff;
                    }
                    .next-button {
                        background-color: #F62369;
                        border: solid 1px #F62369;
                        color: #fff;
                        &.active {
                            opacity: 0.5;
                            cursor: not-allowed;
                        }
                    }
                }
            }
        }
    }

    .go-live-loading-popup-update {
        position: absolute;
        top: 0px;
        bottom: 0px;
        right: 0px;
        left: 0px;
        background:rgba(0, 0, 0, 0.2);
        z-index: 99;
        .go-live-loading-popup {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 100%;
        }
    }
}
.facebook-with-tooltip{
    cursor: not-allowed;
    .streaming-type-tooltip {
        position: relative;
        display: inline-block;
        cursor: pointer;
        right: 80px;
        top: 15px;
        .streaming-type-tooltip-icon {
            display: flex;
            &:hover {
                svg {
                    path {
                        stroke: #F62369;
                    }
                }
            }
        }
        .streaming-type-tooltip-text {
            visibility: hidden;
            width: 300px;
            background-color: #FFFFFF;;
            color: #001E3E;
            border-radius: 4px;
            padding: 4px 8px;
            position: absolute;
            z-index: 1;
            top: 150%;
            left: 50%;
            margin-left: -30px;
            box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
            font-size: 11px;
            line-height: 18px;
            &::after {
                content: "";
                position: absolute;
                bottom: 100%;
                left: 10%;
                margin-left: -5px;
                border-width: 5px;
                border-style: solid;
                border-color: transparent transparent #FFFFFF transparent;
            }
            .streaming-type-title {
                font-weight: 600;
                padding-bottom: 4px;
            }
            ol {
                padding-left: 16px;
                margin-bottom: 0px;
            }
            .streaming-type-link {
                margin-top: 12px;
                a {
                    color: #F62369;
                    &:hover {
                        text-decoration: none;
                    }
                }
            }
        }
    }
    .streaming-type-tooltip:hover .streaming-type-tooltip-text {
        visibility: visible;
    }
}

.facebook-with-tooltip:hover .streaming-type-tooltip-text {
    visibility: visible;
}

.live-sale-inventory-popup {
    display: block;
}
.blynk-main-container {
    .history-empty-state-image {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    .empty-state-image {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        .live-sale-btn {
            margin: 32px auto 0px;
            display: flex;
            .create-sale-btn {
                font-weight: 600;
                border: solid 1px #F62369;
                background-color: #F62369;
                color: #ffffff;
                font-size: 16px;
                padding: 14px 40px;
                border-radius: 4px;
            }
        }
    }
    .rewynd-history-page-container {
        height: 100%;
        display: flex;
        flex-direction: column;
        width: 100%;
        position: relative;
        .placeholder-loading {
            position: absolute;
            inset: 0px;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9;
        }
        .title-create-sale {
            padding: 24px 32px;
            display: flex;
            justify-content: space-between;
            .create-sale-link {
                cursor: pointer;
                font-size: 14px;
                color: #9b9b9b;
                margin: auto 0;
            }
            .next-prev-btn {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                user-select: none;
                -moz-user-select: none;
                -webkit-user-drag: none;
                -webkit-user-select: none;
                -ms-user-select: none;
                margin: auto 0;
            
                span {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 2px;
                    min-width: 24px;
                    min-height: 24px;
                    font-size: 12px;
                    font-weight: normal;
                    line-height: 1.5;
                    letter-spacing: 0.12px;
                    color: #000000;
                    background-color: #ffffff;
                    border-radius: 2px;
                    border: 1px solid #dbdbdb;
                    cursor: pointer;
            
                    &:not(:last-child) {
                        margin-right: 5px;
                    }
            
                    &.active {
                        background: rgba(211, 211, 211, 0.2);
                        cursor: not-allowed;
                    }
            
                    &.no-border {
                        border: none;
                    }
            
                    .left-arrow {
                        transform: scale(-1);
                    }
                }
            }
        }
        .loop-list {
            flex: 1 1 auto;
            padding: 8px 24px 24px;
            overflow-y: auto;
            &:hover::-webkit-scrollbar-thumb {
                display: block;
            }
            .box-shadow {
                cursor: pointer;
                box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08);
                border-radius: 4px;
                margin-bottom: 12px;
                padding: 12px 0px;
                &:hover {
                    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
                }
                .live-sale-name, .time-status {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                .d-flex {
                    display: flex;
                }
                .live-sale-name {
                    .live-sale-name-editor {
                        width: 55%;
                        display: flex;
                        align-items: center;
                        .sale-name {
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            max-width: 60%;
                        }
                        .sale-live-name-editor {
                            cursor: pointer;
                            margin-left: 8px;
                            display: flex;
                            align-items: center;
                            img {
                                margin-right: 2px;
                            }
                            div {
                                font-weight: 500;
                                font-size: 14px;
                                color: #F62369;
                            }
                        }
                    }
                    .status {
                        width: 45%;
                        font-size: 12px;
                    }
                }
                .time-status {
                    margin-top: 8px;
                    font-size: 12px;
                    .time {
                        width: 55%;
                    }
                    .duration {
                        width: 45%;
                    }
                }
                .product-count-audience {
                    font-size: 12px;
                    .product-count {
                        margin-bottom: 10px;
                    }
                    .color-9b9b9b {
                        margin-right: 4px;
                    }
                }
                .go-live-btn {
                    height: 45px;
                    display: flex;
                    align-items: center;
                    position: relative;
                    .d-flex {
                        justify-content: space-between;
                        width: 100%;
                    }
                    .video-status {
                        .processing-video {
                            padding: 10px 16px;
                            border-radius: 8px;
                            background-color: #fff7f4;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            .custom-tooltip, .vajro-clock {
                                color: #ffae5d;
                                font-size: 12px;
                            }
                            .custom-tooltip {
                                margin-left: 5px;
                            }
                        }
                        .download-video {
                            cursor: pointer;
                            padding: 10px 16px;
                            border-radius: 8px;
                            background-color: rgba(240, 239, 248, 0.5);
                            font-size: 12px;
                            color: #716f83;
                            &.disabled {
                                display: none;
                            }
                        }
                        .deletion-date {
                            position: absolute;
                            font-size: 10px;
                            color: #ff4540;
                        }
                        .video-unavailable {
                            cursor: pointer;
                            padding: 10px 16px;
                            border-radius: 8px;
                            background-color: rgba(255, 69, 64, 0.05);
                            font-size: 12px;
                            color: rgba(255, 69, 64, 0.75);
                        }
                    }                    
                    .icon { 
                        position: relative;
                        display: flex;
                        .menu-item {
                            display: flex;
                            align-items: center;
                            color: #000000;
                            font-size: 12px;
                            line-height: 1.75;
                            padding: 6px 16px;
                            cursor: pointer;
                            &.disabled {
                                color: rgba(0, 0, 0, 0.2);
                                cursor: not-allowed;
                            }
                            &:hover {
                                background-color: #eaeaea;
                            }
                            .switch-outer {
                                display: flex;
                                justify-content: center;
                                margin: 0px;
                                margin-left: auto;
                                .switch {
                                    width: 24px;
                                    height: 14px;
                                    margin-bottom: 0;
    
                                    .active + .slider {
                                        background: #40d08b;
        
                                        &:before {
                                            transform: translateX(10);
                                            -webkit-transform: translateX(10px);
                                            -ms-transform: translateX(10px);
                                        }
                                    }
        
                                    .slider {
                                        background: #000000;
                                        &.disabled {
                                            opacity: 0.25;
                                            cursor: not-allowed;
                                        }
                                        &:before {
                                            width: 8px;
                                            height: 8px;
                                            top: 50%;
                                            margin-top: -4px;
                                            left: 3px;
                                            background-color: #FFFFFF;
                                        }
                                    }
                                }
                            }
                        }
                        .dropdown-menu {
                            min-width: 168px;
                            left: auto;
                            right: 12px;
                            border-radius: 2px;
                            box-shadow: 0 4px 10px 0 rgba(0, 0, 0,0.16);
                            padding: 2px 0px;
                            margin: 0;
                            top: 10px;
                            .gray-text {
                                color: #787878 !important;
                            }
                        }
                        i {
                            display: inline-block;
                            font-size: 9px;
                            vertical-align: middle;
                            margin-left: 8px;
                        }
                        &.open > .dropdown-toggle {
                            color: #000000;
                            font-size: 12px;
                            font-weight: 500;
                            line-height: 1;
                            letter-spacing: 0.24px;
                            border-radius: 20px;
                            background: #f4f4f4;
                            border: 1px solid #f4f4f4;
                            padding: 9px 16px;
                            margin: 0;
                            outline: 0;
                            box-shadow: none;
                        } 
                    }
                }
            }
        }
    }
    .live-video-name-change-pop-up {
        position: absolute;
        inset: 0px;
        background: rgba(0, 0, 0, 0.4);
        display: flex;
        justify-content: center;
        align-items: center;
        .live-video-name-change-modal {
            width: 40%;
            background: #ffffff;
            border-radius: 4px;
            .live-video-name-change-body {
                position: relative;
                padding: 32px;
                .live-video-name-change-close-btn {
                    cursor: pointer;
                    position: absolute;
                    top: 16px;
                    right: 16px;
                }
                .title-name {
                    font-weight: 500;
                    font-size: 16px;
                    color: #000000;
                    margin-bottom: 24px;
                }
                .live-sale-input {
                    .live-sale-name-change-count {
                        font-size: 14px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-bottom: 2px;
                        .live-sale-name-change-count-view {
                            font-size: 12px;
                            &.active {
                                color: #EF4E40;
                            }
                        }
                    }
                    .live-sale-name-change-input {
                        width: 100%;
                        border: 1px solid #ACACAC;
                        border-radius: 4px;
                        padding: 8px 10px;
                        font-size: 14px;
                        color: #333333;
                        &.active {
                            border: 1px solid #EF4E40;
                        }
                        &:focus-visible {
                            outline: none;
                        }
                    }
                    .live-sale-name-change-error-message {
                        color: #EF4E40;
                        font-size: 12px;
                        margin-top: 8px;
                    }
                }
            }
            .live-video-name-change-footer {
                padding: 12px 16px;
                border-top: 1px solid #DEDEDE;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                button {
                    padding: 8px 16px;
                    border-radius: 4px;
                    font-size: 14px;
                }
                .live-video-name-change-cancel {
                    background: #FFFFFF;
                    border: 1px solid #222222;
                    margin-right: 10px;
                    color: #333333;
                }
                .live-video-name-change-update {
                    background: #F62369;
                    border: 1px solid #F62369;
                    color: #FFFFFF;
                    &.active {
                        cursor: not-allowed;
                        opacity: 0.3;
                    }
                }
            }
        }
    }
    .live-video-image-change-pop-up {
        position: absolute;
        inset: 0px;
        background: rgba(0, 0, 0, 0.4);
        display: flex;
        justify-content: center;
        align-items: center;
        .live-video-image-change-modal {
            background: #ffffff;
            border-radius: 4px;
            min-width: 550px;
            position: relative;
            .live-video-image-change-image {
                .live-video-image-change-body {
                    position: relative;
                    padding: 32px;
                    .live-video-image-change-close-btn {
                        cursor: pointer;
                        position: absolute;
                        top: 16px;
                        right: 16px;
                    }
                    .title-name {
                        font-weight: 500;
                        font-size: 16px;
                        color: #000000;
                        margin-bottom: 24px;
                    }
                    .upload-thumbnail-image-container {
                        display: flex;
                        .thumbnail-image {
                            position: relative;
                            .thumbnail-image-data-img {
                                height: 250px;
                                object-fit: cover;
                                width: 150px;
                            }
                            .upload-thumbnail-play-btn {
                                position: absolute;
                                inset: 0px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                .live-video-image-play-btn {
                                    height: 36px;
                                }
                            }
                            .upload-thumbnail-data {
                                padding: 8px;
                                position: absolute;
                                inset: 0px;
                                display: flex;
                                flex-direction: column;
                                align-items: stretch;
                                justify-content: flex-end;
                                .upload-thumbnail-date {
                                    font-size: 10px;
                                    color: #fff;
                                    margin-bottom: 4px;
                                }
                                .upload-thumbnail-name {
                                    margin-bottom: 4px;
                                    font-size: 12px;
                                    color: #fff;
                                    font-weight: 600;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                                .show-time-viewer {
                                    display: flex;
                                    .time-container {
                                        margin-right: 4px;
                                    }
                                    .time-container, .viewer-container {
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        img {
                                            height: 12px;
                                        }
                                        div {
                                            padding-left: 2px;
                                            font-size: 10px;
                                            color: #FFFFFF;
                                            line-height: 12px;
                                        }
                                    }
                                }
                            }
                        }
                        .upload-thumbnail-image {
                            margin-left: 24px;
                            position: relative;
                            max-width: 360px;
                            overflow: hidden;
                            &.loader-container {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                            }
                            input {
                                position: absolute;
                                top: 0;
                                bottom: 0;
                                left: 0;
                                width: 100%;
                                opacity: 0;
                            }
                            .upload-field {
                                cursor: pointer;
                                display: flex;
                                background: #F9FBFC;
                                border: 1px dashed #BCCCDB;
                                border-radius: 4px;
                                padding: 24px 16px;
                                .file-thumbnail {
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    justify-content: center;
                                    img {
                                        margin-bottom: 12px;
                                    }
                                    .drop-image-content {
                                        font-size: 14px;
                                        line-height: 20px;
                                        color: #333333;
                                        font-weight: 500;
                                        margin-bottom: 4px;
                                        span {
                                            color: #F62369;
                                        }
                                    }
                                    .drop-image-sub-content {
                                        font-weight: 500;
                                        font-size: 12px;
                                        color: #646464;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        flex-wrap: wrap;
                                        .drop-image-sub-content-line {
                                            margin: auto 8px;
                                        }
                                    }
                                } 
                            }
                            .upload-thumbnail-title {
                                font-weight: 500;
                                font-size: 12px;
                                margin-bottom: 8px;
                            }
                            .upload-thumbnail {
                                display: flex;
                                margin-bottom: 8px;
                                img {
                                    margin-right: 8px;
                                }
                                .file-name-size {
                                    .file-name {
                                        font-weight: 500;
                                        font-size: 12px;
                                        color: #333333;
                                        margin-bottom: 4px;
                                        white-space: nowrap;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                    }
                                    .file-size {
                                        font-weight: 400;
                                        font-size: 12px;
                                        color: #646464;
                                    }
                                }
                            }
                            .change-upload-restore-image {
                                display: flex;
                                color: #F62369;
                                font-weight: 500;
                                font-size: 12px;
                                .change-upload-image, .change-restore-image {
                                    cursor: pointer;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    img {
                                        margin-right: 4px;
                                    }
                                }
                                .change-upload-image {
                                    margin-right: 16px;
                                }
                            }
                        }
                    }
                }
                .live-video-image-change-footer {
                    padding: 12px 16px;
                    border-top: 1px solid #DEDEDE;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    button {
                        padding: 8px 16px;
                        border-radius: 4px;
                        font-size: 14px;
                    }
                    .live-video-image-change-cancel {
                        background: #FFFFFF;
                        border: 1px solid #222222;
                        margin-right: 10px;
                        color: #333333;
                    }
                    .live-video-image-change-update {
                        background: #F62369;
                        border: 1px solid #F62369;
                        color: #FFFFFF;
                        &.active {
                            cursor: not-allowed;
                            opacity: 0.3;
                        }
                    }
                }
            }
            .live-video-change-default-image {
                position: absolute;
                inset: 0px;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                backdrop-filter: blur(12px);
                border-radius: 4px;
                .live-video-change-default-model {
                    background: #ffffff;
                    border-radius: 4px;
                    box-shadow: 0px 2px 18px rgba(18, 52, 77, 0.25);
                    .live-video-change-default-image-body {
                        padding: 24px;
                        .header {
                            font-weight: 600;
                            font-size: 16px;
                            color: #131313;
                            margin-bottom: 12px;
                        }
                        .sub-header {
                            font-weight: 400;
                            font-size: 14px;
                            color: #131313;
                            margin-bottom: 12px;
                        }
                        .change-image-content {
                            display: flex;
                            align-items: center;
                            margin-bottom: 12px;
                            .change-image-size {
                                margin-right: 12px;
                                &:last-child {
                                    margin-right: 0px;
                                }
                                .image-text {
                                    font-weight: 400;
                                    font-size: 10px;
                                    margin-bottom: 4px;
                                }
                                .image-view {
                                    height: 135px;
                                    box-shadow: 0px 10px 34px #B0B0B0;
                                }
                            }
                        }
                        .question {
                            font-weight: 400;
                            font-size: 14px;
                            color: #131313;
                        }
                    }
                    .live-video-change-default-image-footer {
                        border-top: 1px solid #DEDEDE;
                        padding: 12px;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        button {
                            border-radius: 4px;
                            padding: 8px 16px;
                            font-size: 14px;
                        }
                        .live-video-change-default-image-footer-no {
                            background: #FFFFFF;
                            border: 1px solid #222222;
                            color: #333333;
                            margin-right: 10px;
                        }
                        .live-video-change-default-image-footer-yes {
                            background: #F62369;
                            border: 1px solid #F62369;
                            color: #FFFFFF;
                        }
                    }
                }
            }
        }
    }
}
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {
    .blynk-dashboard {
        .row [class*='col-']:nth-child(odd) {
            padding-right: 15px !important;
        }
        .announcement-bar-open {
            .main-content .blynk-top-navigation-bar {
                top: 132px !important;
            }
            .main-content .blynk-main-container, .walldrop-new-main-container, .go-live-setup-main-container .go-live-setup .go-live-setup-modal-steps-info {
                top: 190px;
            }
            .main-content {
                padding-top: 72px !important;
            }
            .upgrade-plan-popup {
                .modal {
                    &.active {
                        display: flex;
                        position: fixed;
                        inset: 132px 16px 16px 16px;
                        border-radius: 4px;
                    }
                    &.reduce-top {
                        inset: 192px 16px 16px 16px !important; 
                    }
                }
            }
        }
        .main-content {
            .upgrade-plan-popup {
                .modal {
                    &.active {
                        display: flex;
                        position: fixed;
                        inset: 88px 16px 16px 16px;
                        border-radius: 4px;
                    }
                    &.reduce-top {
                        inset: 134px 16px 16px 16px !important;
                    }
                }
            }
            .blynk-top-navigation-bar {
                left: 16px;
                ul {
                    padding: 0 16px;
                    justify-content: unset;
                }
            }
            .blynk-main-container {
                left: 16px;
                .rewynd-history-page-container .loop-list .box-shadow .live-sale-name, .rewynd-history-page-container .loop-list .box-shadow .time-status {
                    flex-direction: column;
                    align-items: normal;
                }
                .rewynd-history-page-container {
                    .loop-list {
                        .box-shadow {
                            .live-sale-name {
                                .live-sale-name-editor {
                                    width: 100%;
                                    .sale-name {
                                        max-width: 70%;
                                    }
                                }
                                .status {
                                    width: 100%;
                                }
                                .status {
                                    margin-top: 8px;
                                }
                            }
                            .time-status {
                                .time, .duration {
                                    width: 100%;
                                }
                                .duration {
                                    margin-top: 8px;
                                }
                            }
                        }
                        .product-count-audience, .go-live-btn {
                            margin-top: 8px;
                        }
                    }
                }
                .no-live-setup {
                    .image-card {
                        width: 80%;
                    }
                }
                .live-setup {
                    .title-create-sale {
                        padding: 16px;
                        flex-direction: column;
                        align-items: flex-start;
                        .new-live-sale-title {
                            font-size: 16px;
                        }
                        .create-sale-link {
                            width: 100%;
                            margin-top: 16px;
                            text-align: center;
                        }
                    }
                    .list-of-create-sale {
                        .loop-list {
                            .box-shadow {
                                .time-status {
                                    height: auto;
                                    flex-direction: column;
                                    .status {
                                        margin-top: 8px;
                                    }
                                }
                                .go-live-btn {
                                    .show-user-option {
                                        left: auto;
                                        right: 32px;
                                    }
                                }
                            }
                        }
                    }
                    .go-live-table-list {
                        display: none;
                    }
                    .go-live-mobile-view-list {
                        display: block;
                    }
                }
                .blynk-reservation-container {
                    .title-create-sale {
                        padding: 24px;
                        .select-option-icon {
                            width: 75%;
                        }
                    }
                    .reservation-list-container {
                        padding: 0px 24px 24px;
                    }
                    .loop-list {
                        .reservation-list {
                            .product-count-audience {
                                margin-top: 8px;
                                .target-audience {
                                    height: auto;
                                }
                            }
                            .go-live-btn {
                                margin-top: 8px;
                            }
                        }
                    }
                }
                .rewynd-empty-state {
                    .create-sale {
                        padding: 24px;
                        ul {
                            width: 100%;
                        }
                    }
                    .empty-state-img {
                        display: none;
                    }
                    .create-sale-steps {
                        padding: 24px;
                        .create-sale-steps-list {
                            height: 160px;
                        }
                    }
                }
                .over-all-report {
                    margin: 24px;
                }
                .media-queries-list {
                    padding: 0px 24px !important;
                    .loop-list {
                        padding: 0px !important;
                    }
                    .product-count-audience {
                        margin-top: 8px;
                    }
                    .live-sale-name {
                        height: auto;
                    }
                    .time-status {
                        height: auto;
                    }
                    .product-count {
                        height: auto !important;
                        .color-9b9b9b {
                            padding-right: 4px;
                            width: 50% !important;
                        }
                        .width-50 {
                            width: 50%;
                        }
                    }
                    .target-audience {
                        height: auto !important;
                        .color-9b9b9b {
                            padding-right: 4px;
                            width: 50% !important;
                        }
                        .width-50 {
                            width: 50%;
                        }
                    }
                    .go-live-btn {
                        margin-top: 8px;
                    }
                }
                .account-setting {
                    overflow-y: unset;
                    flex-direction: column;
                    .main-tab-list {
                        flex: 0 0 50px;
                        .list {
                            padding: 0px;
                            display: flex;
                            position: absolute;
                            overflow-x: auto;
                            background: #ffffff;
                            z-index: 99;
                            left: 0px;
                            right: 0px;
                            justify-content: unset;
                            padding: 0px 16px;
                            .sub-title {
                                display: none;
                            }
                            .tab-list {
                                margin-bottom: 0px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                .title {
                                    width: 100%;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                }
                            }
                        }
                    }
                    .tab-content {
                        overflow-y: auto;
                        /* scroll bar style starts */
                        &::-webkit-scrollbar {
                            width: 5px;
                            background-color: #F5F5F5;
                            display: block !important;
                        }
                        &::-webkit-scrollbar-track {
                            background: #DDDDDD;
                            margin: 0;
                        }
                        &::-webkit-scrollbar-thumb {
                            background: #BDBDBD;
                            display: block !important;
                        }
                        &::-webkit-scrollbar-thumb:hover {
                            background: rgba(0, 0, 0, .35); 
                        }
                        .custom-features-heading {
                            padding: 16px;
                        }
                        .account-setting-submit-btn {
                            padding: 16px;
                        }
                        .row {
                            padding: 0px 1px 16px;
                            .account-setting-card {
                                margin-bottom: 15px;
                            } 
                        }
                        .account-setting-card {
                            .switch-with-content {
                                min-height: auto;
                                .account-setting-img-heading {
                                    align-items: flex-start;
                                    flex-direction: column;
                                    margin-right: 8px;
                                    img {
                                        margin-bottom: 8px;
                                        margin-right: 0px;
                                        height: 32px;
                                    }
                                    div {
                                        font-size: 13px;
                                    }
                                }
                                .switch-outer {
                                    margin-top: 0px;
                                }
                            }
                        }
                        .account-setting-viewer, .account-setting-bots {
                            .row {
                                height: ~"calc(100% - 122px)";
                            }
                        }
                        .account-setting-bots {
                            .viewer-broadcaster-options {
                                .option-for-view-broadcaster-checkbox {
                                    .target-audience-checkbox {
                                        flex-direction: column;
                                        .checkbox-section:first-child {
                                            margin-right: 0px;
                                            margin-bottom: 16px;
                                        }
                                    }
                                }
                            }
                        }
                        .account-setting-broadcaster {
                            .row {
                                height: ~"calc(100% - 136.28px)";
                            }
                        }
                        /* scroll bar style ends */
                        .fb-direct-message {
                            padding: 16px;
                            .fb-message-line {
                                margin: 16px 0px;
                            }
                            .fb-message-category {
                                .fb-message-select-category {
                                    .fb-message-list-of-options {
                                        margin-bottom: 16px;
                                    }
                                }
                            }
                            .fb-message-customize-section {
                                .fb-message-create-template {
                                    align-items: flex-start;
                                    flex-direction: column;
                                    .fb-message-heading {
                                        margin-bottom: 8px;
                                    }
                                }
                                .fb-message-list-of-templates {
                                    .fb-message-list-of-templates-padding {
                                        padding-left: 0px;
                                        padding-right: 0px !important;
                                    }
                                }
                            }
                        }
                        .custom-features {
                            .custom-features-scroll {
                                height: ~"calc(100% - 68px)";
                                .custom-features-container {
                                    flex-direction: column;
                                    .section-for-viewer, .section-for-broadcaster {
                                        padding: 16px;
                                        width: 100%;
                                    }
                                    .section-for-broadcaster {
                                        padding-top: 0px;
                                    }
                                }
                                .bots-container {
                                    .heading {
                                        padding: 0px 16px 16px 16px;
                                    }
                                    .bots-container-card {
                                        width: 100%;
                                        padding: 0px 16px 16px 16px;
                                    }
                                    .viewer-broadcaster-options {
                                        .option-for-view-broadcaster-checkbox {
                                            .target-audience-checkbox {
                                                flex-direction: column;
                                                .checkbox-section {
                                                    &:first-child {
                                                        margin-right: 0px;
                                                        margin-bottom: 8px;
                                                    }
                                                }
                                            }
                                            .bots-container-textarea {
                                                textarea {
                                                    height: 125px;
                                                    padding: 12px;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                            .submit-bots {
                                padding: 0px 16px 16px;
                            }
                        }
                    }
                }
                .rewynd-history-container {
                    .loop-list {
                        .box-shadow {
                            .live-sale-name {
                                flex-direction: column;
                                .sale-name, .status {
                                    width: 100%;
                                }
                                .status {
                                    margin-top: 8px;
                                }
                            }
                            .time-status {
                                flex-direction: column;
                                .time, .duration {
                                    width: 100%;
                                }
                                .duration {
                                    margin-top: 8px;
                                }
                            }
                            .go-live-btn .open > .dropdown-menu {
                                left: 0px;
                                width: 87%;
                            }
                        }
                        .product-count-audience, .go-live-btn {
                            margin-top: 8px;
                        }
                    }
                }
                .blynk-report-generation {
                    flex-direction: column;
                    .report-generation-filter, .report-generation-data-view, .empty-state-image-loading {
                        width: 100%;
                        height: 500px;
                    }
                    .empty-state-image {
                        height: 500px;
                    }
                }
                .live-video-name-change-pop-up {
                    .live-video-name-change-modal {
                        width: 80%;
                        .live-video-name-change-body {
                            padding: 16px;
                            .live-sale-input {
                                .live-sale-name-change-count {
                                    flex-direction: column;
                                    align-items: flex-start;
                                    div:first-child {
                                        margin-bottom: 2px;
                                    }
                                }
                            }
                        }
                    }
                }
                .live-video-image-change-pop-up {
                    .live-video-image-change-modal {
                        min-width: 80%;
                        .live-video-image-change-image {
                            .live-video-image-change-body {
                                padding: 16px;
                                overflow-y: scroll;
                                height: 300px;
                                .upload-thumbnail-image-container {
                                    flex-direction: column-reverse;
                                    .thumbnail-image {
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        margin: auto;
                                    }
                                    .upload-thumbnail-image {
                                        margin-left: 0px;
                                        max-width: 200px;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        margin-bottom: 8px;
                                        flex-direction: column;
                                        .upload-field .file-thumbnail .drop-image-content {
                                            text-align: center;
                                        }
                                        .change-upload-restore-image {
                                            flex-direction: column;
                                            .change-upload-image {
                                                margin-bottom: 8px;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .add-walldrop-product-pop-up {
                .add-walldrop-product-pop-up-card {
                    width: 70%;
                }
            }
            .walldrop-products {
                .no-walldrop-products {
                    .image-card {
                        width: 100%;
                    }
                }
            }
        }
        .go-live-setup-main-container {
            .live-sale-section {
                .textbox-count {
                    width: 100%;
                }
            }
            .input-text {
                width: 100%;
            }
            .show-products {
                .detail-type-list {
                    .detail-type-list-container {
                        .right-product-col {
                            width: 132px;
                        }
                    }
                }
            }
            .streaming-type {
                width: 100%;
                .streaming-type-flex {
                    .layout-row {
                        flex-direction: column;
                        md-radio-button {
                            margin-bottom: 8px;
                        }
                    }
                }
                .time-stamp {
                    width: 70%;
                }
                .streaming-type-toggle {
                    .streaming-type-tooltip {
                        .streaming-type-tooltip-text {
                            width: 250px;
                            margin-left: -200px;
                            &::after {
                                left: 80%;
                            }
                        }
                    }
                }
            }
            .target-audience-section {
                .selected-option-facebook {
                    .group-precautions {
                        height: 250px;
                        overflow-y: scroll;
                    }
                    .group-precautions-new {
                        width: 100%;
                        height: 250px;
                        overflow-y: scroll;
                    }
                }
                .target-audience-checkbox, .target-audience-not-facebook, .target-audience-facebook, .selected-option-facebook {
                    width: 100%;
                }
            }
            .select-scan-products-section {
                .search-scan-products {
                    flex-direction: column;
                    .dropdown-search-product, .scan-import-view-type {
                        width: 100%;
                    }
                    .scan-import-view-type {
                        margin-top: 8px;
                        .scan-barcode-import-products {
                            .scan-barcode {
                                margin-left: 0px;
                            }
                        }
                        .import-products {
                            .live-history-menu {
                                width: 200px;
                            }
                        }
                    }
                }
            }
            .push-notification-message-section {
                textarea {
                    width: 100%;
                }
            }
            .save-create-sale-btn {
                width: 100%;
                flex-direction: column;
                justify-content: unset;
                .save-as-draft-btn, .create-sale-btn {
                    width: auto;
                    padding: 8px;
                    height: 40px;
                    font-size: 14px;
                }
                .save-as-draft-btn {
                    margin-right: 0px;
                }
                .create-sale-btn {
                    margin-top: 8px;
                }
            }
            .go-live-setup {
                .go-live-setup-modal-steps-info {
                    left: 16px;
                    .go-live-setup-modal-steps-info-content {
                        width: 75%;
                    }
                }
            }
        }
        .walldrop-new-main-container {
            left: 16px !important;
            .add-walldrop-product-pop-up {
                .add-walldrop-product-pop-up-card {
                    width: 70% !important;
                    .import-product-btn {
                        padding: 0px 16px 24px !important;
                    }
                }
            }
            .inventories-modal {
                .modal-dialog {
                    width: 250px;
                    height: 300px;
                    margin: auto;
                    .modal-content {
                        .modal-header {
                            .modal-title {
                                height: 70%;
                                width: 80%;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                        }
                        .modal-body {
                            overflow: scroll;
                            height: 214px;
                        }
                    }
                }
            }
            .walldrop-live-list {
                .add-product-search {
                    flex-direction: column;
                    .facbook-not-working-info {
                        margin-bottom: 8px !important;
                        text-align: center;
                    }
                    .add-product-search-list {
                        justify-content: flex-end;
                    }
                }
                .walldrop-list {
                    .add-product-search {
                        padding: 24px !important;
                    }
                    .list-of-walldrops-products-card {
                        padding: 0px 24px 24px !important;
                        .id-status-walldrops, .image-title-walldrops {
                            margin-bottom: 10px;
                        }
                    }
                }
            } 
        }
        .new-walldrops-setup {
            .walldrop-back-navigation-bar {
                padding: 16px !important;
            }
            .walldrop-setup-container {
                .walldrop-after-fb-setup {
                    .selectFBOption {
                        padding: 16px 1px !important;
                        .streaming-type {
                            .time-stamp {
                                width: 100% !important;
                            }
                        }
                        .select-drop-down {
                            .group-precautions {
                                height: 250px !important;
                                overflow-y: scroll !important;
                            }
                            .group-precautions-new {
                                width: 100%;
                                height: 250px !important;
                                overflow-y: scroll !important;
                            }
                        }
                        .select-option-icon {
                            width: 100% !important;
                        }
                        .facebook-preview {
                            margin-bottom: 40px !important;
                        }
                        .streaming-type {
                            .streaming-type-toggle {
                                .streaming-type-tooltip {
                                    .streaming-type-tooltip-text {
                                        width: 250px;
                                        margin-left: -150px;
                                        &::after {
                                            left: 60%;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    .walldrop-post-message {
                        margin-bottom: 40px !important;
                        textarea, .textbox-count {
                            width: 100% !important;
                        }
                    }
                    .walldrop-setup-cancel-submit {
                        z-index: 2;
                    }
                }
                .walldrop-modal {
                    .pdg-content {
                        width: 80% !important;
                        .pdg-content-body {
                            .tick-mark {
                                width: 120px !important;
                                height: 120px !important;
                                i {
                                    font-size: 32px !important;
                                }
                            }
                        }
                    }
                }
            }
        }
        .go-live-video-wrapper {
            .inventory-management {
                z-index: 99;
                .inventory-management-container {
                    width: 100%;
                }
                .inventory-management-body {
                    .inventory-management-table-body {
                        max-height: 50vh;
                    }
                }
            }
            .go-live-back-navigation-bar {
                position: sticky;
                top: 84px;
            }
            .live-sale {
                margin-top: 24px;
                flex-direction: column;
                .left-column, .right-column {
                    width: 100%;
                }
                .left-column {
                    .section-title {
                        margin: 0px 16px;
                    }
                    .sale-card-wrapper {
                        .sale-card {
                            width: 100%;
                            margin: 0px 16px;
                            .rgt-content {
                                padding: 48px 30px 0px 16px;
                            }
                        }
                        .select-card-wrapper {
                            margin: 0px 16px;
                        }
                    }
                    .modal-content {
                        width: 90%;
                        .modal-title {
                            width: 75%;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                }
                .right-column {
                    margin-top: 16px;
                    margin-left: 0px;
                    .chat-container {
                        margin-bottom: 24px;
                        .chat-header {
                            .title {
                                .show-chat {
                                    overflow-y: scroll;
                                }
                            }
                        }
                        .empty-text {
                            width: 100%;
                        }
                    }
                }
            }
            .survey-popup {
                .survey-popup-content {
                    width: 300px;
                    .survey-popup-content-header {
                        position: relative;
                        .close-arrow {
                            font-size: 20px;
                            position: absolute;
                            top: 12px;
                            right: 12px;
                        }
                    }
                    .survey-popup-content-body {
                        padding: 24px;
                        .survey-popup-title {
                            font-size: 14px;
                        }
                        .survey-popup-sub-title {
                            padding-top: 18px;
                        }
                        .survey-popup-rating {
                            .rating {
                                li {
                                    margin-right: 12px;
                                    &:last-child {
                                        margin-right: 0px;
                                    }
                                    img {
                                        height: 24px;
                                        width: 24px;
                                    }
                                }
                            }
                            ul.rating {
                                display: inline-block;
                            }
                        }
                        .survey-popup-question {
                            color: #000;
                            font-size: 14px;
                            padding-top: 24px;
                        }
                        .survey-popup-answer {
                            padding-top: 16px;
                            overflow-x: none;
                            width: auto;
                            flex-direction: column;
                            .survey-popup-option {
                                margin-right: 0px;
                                margin-bottom: 8px;
                                &:last-child {
                                    margin-right: 0px;
                                    margin-bottom: 0px;
                                }
                            }
                        }
                        .survey-popup-button {
                            padding-top: 24px;
                            .submit-btn {
                                font-size: 14px;
                                padding: 10px 20px;
                            }
                        }
                    }
                }
            }
            .live-video-completed {
                .live-video-completed-content {
                    width: 300px;
                    .live-video-completed-header {
                        .close-arrow {
                            top: 14px;
                            right: 14px;
                        }
                    }
                    .live-video-completed-body {
                        padding: 24px;
                        .live-video-completed-title {
                            font-size: 16px;
                        }
                        .live-video-completed-sub-title {
                            font-size: 12px;
                        }
                        .live-video-completed-tick-mark {
                            width: 120px;
                            height: 120px;
                            margin-top: 16px;
                        }
                        .live-video-completed-info {
                            padding-top: 16px;
                            font-size: 14px;
                        }
                        .live-video-completed-sub-info {
                            padding-top: 8px;
                            font-size: 12px;
                        }
                        .live-video-completed-download-btn {
                            padding-top: 18px;
                            button {
                                padding: 10px 16px;
                                font-size: 14px;
                            }
                        }
                    }
                }
            }
        }
        .blynk-reservation-container {
            .reservation-popup-model  {
                .reservation-popup-model-card {
                    .reservation-popup-card-view {
                        width: 300px !important;
                        height: 250px !important;
                        .reservation-table-condensed  {
                            min-width: 500px !important;
                        }
                        .reservation-body-view {
                            height: 150px !important;
                            overflow: auto !important;
                            .reservation-variant-popup-body {
                                overflow-y: auto;
                            }
                        }
                    }
                }
            }
            .loop-list {
                .reservation-list {
                    .time-status {
                        height: auto !important;
                        flex-direction: column;
                        .status {
                            margin-top: 8px;
                        }
                    }
                }
            }
        }
        .go-live-setup-popup-model {
            .go-live-popup-model-card {
                .go-live-popup-card-view {
                    width: 300px;
                    padding: 24px 16px;
                    .text-content {
                        .text {
                            margin-top: 16px;
                        }
                    }
                    .close-btn {
                        right: -32px;
                        top: -40px;
                        padding: 12px;
                        height: 36px;
                        width: 36px;
                    }
                }
            }
        }
        .blynk-main-container {
            .blynk-report-generation {
                .report-generation-data-view {
                    .app-infomation {
                        &.customer-report-info {
                            flex-direction: column;
                            .record-count {
                                justify-content: flex-start;
                                margin-bottom: 8px;
                            }
                            .customer-report {
                                flex-direction: column;
                                .btn-customize-report {
                                    margin-bottom: 8px;
                                    margin-right: 0px;
                                }
                            }
                        }
                    }
                    .reservation-table-responsive.with-out-app-id {
                        height: ~"calc(100vh - 366px)";
                    }
                    .reservation-table-responsive.with-app-id {
                        height: ~"calc(100vh - 430px)";
                    }
                }
            }
            .live-setup {
                .list-of-create-sale {
                    .loop-list {
                        .box-shadow {
                            .go-live-btn {
                                .d-flex {
                                    justify-content: space-between;
                                    .icon {
                                        .dropdown-menu {
                                            top: -40px;
                                            left: auto;
                                            right: 30px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .app-version-update {
                flex-direction: column;
                .update-view {
                    flex: none;
                    .app-version-update-submit-btn {
                        justify-content: left;
                    }
                }
                .mobile-view {
                    display: none;
                }
            }
        }
        .tab-content {
            .custom-features {
                .custom-features-container {
                    flex-direction: column;
                    .section-for-viewer, .section-for-broadcaster {
                        width: 100%;
                    }
                    .section-for-broadcaster {
                        padding-top: 0px;
                    }
                }
            }
        }
        .create-fb-message {
            .create-fb-message-sidenav {
                &.active {
                    width: 100vw;
                }
                .create-fb-message-main-content {
                    .create-fb-message-header {
                        padding: 16px;
                        .heading {
                            font-size: 14px;
                        }
                    }
                    .create-fb-message-body {
                        flex-direction: column;
                        overflow-y: scroll;
                        height: 100%;
                        .create-fb-message-title {
                            font-size: 12px;
                            margin-bottom: 16px;
                        }
                        .create-fb-message-value-update, .create-fb-message-preview {
                            padding: 16px;
                            width: 100%;
                            height: auto;
                        }
                    }
                }
            }
        }
        .fb-delete-popup {
            .fb-delete-popup-card {
                width: auto;
            }
        }
        .admin-report {
            .admin-report-sidenav {
                &.active {
                    width: 100%;
                }
            }
        }
    }
}

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) {
    .blynk-dashboard {
        .row [class*='col-']:nth-child(odd) {
            padding-right: 15px !important;
        }
        .announcement-bar-open {
            .main-content .blynk-top-navigation-bar {
                top: 132px !important;
            }
            .main-content .blynk-main-container, .walldrop-new-main-container {
                top: 190px;
            }
            .main-content {
                padding-top: 72px !important;
            }
            .upgrade-plan-popup {
                .modal {
                    &.active {
                        display: flex;
                        position: fixed;
                        inset: 132px 16px 16px 16px;
                        border-radius: 4px;
                    }
                    &.reduce-top {
                        inset: 190px 16px 16px 16px !important; 
                    }
                }
            }
        }
        .upgrade-plan-popup {
            .modal {
                &.active {
                    display: flex;
                    position: fixed;
                    inset: 88px 16px 16px 16px;
                    border-radius: 4px;
                }
                &.reduce-top {
                    inset: 134px 16px 16px 16px !important; 
                }
            }
        }
        .walldrop-new-main-container {
            left: 16px !important;
        }
        .main-content {
            .blynk-top-navigation-bar {
                left: 16px;
                ul {
                    padding: 0 16px;
                    li {
                        margin-right: 16px;
                    }
                }
            }
            .blynk-main-container {
                left: 16px;
                .live-setup {
                    .title-create-sale {
                        padding: 24px;
                    }
                }
                .rewynd-empty-state {
                    .create-sale {
                        padding: 24px;
                        ul {
                            width: 100%;
                        }
                    }
                    .empty-state-img {
                        display: none;
                    }
                    .create-sale-steps {
                        padding: 24px;
                        .create-sale-steps-list {
                            height: 160px;
                        }
                    }
                }
                .over-all-report {
                    margin: 24px;
                }
                .media-queries-list {
                    padding: 0px 24px;
                    .loop-list {
                        padding: 0px !important;
                    }
                    .live-sale-name {
                        height: auto;
                    }
                    .time-status {
                        height: auto;
                    }
                    .product-count {
                        height: auto !important;
                        .color-9b9b9b {
                            width: auto !important;
                        }
                    }
                    .target-audience {
                        height: auto !important;
                        .color-9b9b9b {
                            width: auto !important;
                        }
                    }
                    .go-live-btn {
                        margin-top: 8px;
                    }
                    .product-count-audience {
                        margin-top: 8px;
                    }
                }
                .account-setting {
                    overflow-y: unset;
                    flex-direction: column;
                    .main-tab-list {
                        flex: 0 0 50px;
                        .list {
                            padding: 0px;
                            display: flex;
                            position: absolute;
                            overflow-x: auto;
                            background: #ffffff;
                            z-index: 99;
                            left: 0px;
                            right: 0px;
                            .sub-title {
                                display: none;
                            }
                            .tab-list {
                                margin-bottom: 0px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                .title {
                                    width: 100%;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                }
                                &.active:before {
                                    display: none;
                                }
                            }
                            .tab-list.active::after {
                                content: "";
                                position: absolute;
                                height: 4px;
                                left: 0px;
                                bottom: 0px;
                                width: 100%;
                                background: #f62369;
                            }
                        }
                    }
                    .tab-content {
                        overflow-y: auto;
                        /* scroll bar style starts */
                        &::-webkit-scrollbar {
                            width: 5px;
                            background-color: #F5F5F5;
                            display: block !important;
                        }
                        &::-webkit-scrollbar-track {
                            background: #DDDDDD;
                            margin: 0;
                        }
                        &::-webkit-scrollbar-thumb {
                            background: #BDBDBD;
                            display: block !important;
                        }
                        &::-webkit-scrollbar-thumb:hover {
                            background: rgba(0, 0, 0, .35); 
                        }
                        /* scroll bar style ends */
                        .custom-features {
                            .custom-features-scroll {
                                height: ~"calc(100% - 68px)";
                                .custom-features-container {
                                    flex-direction: column;
                                    .section-for-viewer, .section-for-broadcaster {
                                        padding: 16px;
                                        width: 100%;
                                    }
                                    .section-for-broadcaster {
                                        padding-top: 0px;
                                    }
                                }
                                .bots-container {
                                    .heading {
                                        padding: 0px 16px 16px 16px;
                                    }
                                    .bots-container-card {
                                        width: 100%;
                                        padding: 0px 16px 16px 16px;
                                    }
                                    .viewer-broadcaster-options {
                                        .option-for-view-broadcaster-checkbox {
                                            .target-audience-checkbox {
                                                flex-direction: column;
                                                .checkbox-section {
                                                    &:first-child {
                                                        margin-right: 0px;
                                                        margin-bottom: 8px;
                                                    }
                                                }
                                            }
                                            .bots-container-textarea {
                                                textarea {
                                                    height: 125px;
                                                    padding: 12px;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                            .submit-bots {
                                padding: 0px 16px 16px;
                            }
                        }
                    }
                }
            }
            .add-walldrop-product-pop-up {
                .add-walldrop-product-pop-up-card {
                    width: 60%;
                }
            }
        }
        .go-live-setup {
            .col-12 {
                width: 100%;
            }
        }
        .walldrop-new-main-container {
            .walldrop-live-list {
                .add-product-search {
                    flex-direction: column;
                    .facbook-not-working-info {
                        margin-bottom: 8px !important;
                        text-align: center;
                    }
                    .add-product-search-list {
                        justify-content: flex-end;
                    }
                }
                .list-of-walldrops-products-card {
                    .box-shadow {
                        .id-status-walldrops {
                            margin-bottom: 16px;
                        }
                    }
                }
            }
        }
        .blynk-main-container {
            .live-setup {
                .list-of-create-sale {
                    .loop-list {
                        .box-shadow {
                            .go-live-btn {
                                .d-flex {
                                    justify-content: space-between;
                                    .icon {
                                        .dropdown-menu {
                                            left: auto;
                                            right: 30px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .app-version-update {
                flex-direction: column;
                .update-view {
                    flex: none;
                    .app-version-update-submit-btn {
                        justify-content: left;
                    }
                }
                .mobile-view {
                    display: none;
                }
            }
        }
        .go-live-setup-main-container {
            .save-create-sale-btn {
                flex-direction: column;
                .save-as-draft-btn, .create-sale-btn {
                    width: 100%;
                }
                .create-sale-btn {
                    margin-top: 16px;
                }
                .save-as-draft-btn {
                    margin-right: 0px;
                }
            }
            .go-live-setup {
                .go-live-setup-modal-steps-info {
                    left: 16px;
                    .go-live-setup-modal-steps-info-content {
                        width: 360px;
                    }
                }
            }
        }
        .create-fb-message {
            .create-fb-message-sidenav {
                &.active {
                    width: 100vw;
                }
                .create-fb-message-main-content {
                    .create-fb-message-header {
                        padding: 16px;
                        .heading {
                            font-size: 14px;
                        }
                    }
                    .create-fb-message-body {
                        .create-fb-message-title {
                            font-size: 12px;
                            margin-bottom: 16px;
                        }
                        .create-fb-message-value-update {
                            padding: 16px;
                        }
                    }
                }
            }
        }
        .fb-delete-popup {
            .fb-delete-popup-card {
                width: auto;
            }
        }
        .admin-report {
            .admin-report-sidenav {
                &.active {
                    width: 100%;
                }
            }
        }
        .go-live-video-wrapper {
            .inventory-management {
                z-index: 99;
                .inventory-management-container {
                    width: 75%;
                }
                .inventory-management-body {
                    .inventory-management-table-body {
                        max-height: 50vh;
                    }
                }
            }
        }
    }
}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) {
    .blynk-dashboard {
        .row [class*='col-']:nth-child(odd) {
            padding-right: 15px !important;
        }
        .upgrade-plan-popup {
            .modal {
                &.active {
                    display: flex;
                    position: fixed;
                    inset: 88px 16px 16px 252px;
                    border-radius: 4px;
                }
                &.reduce-top {
                    inset: 134px 16px 16px 252px !important; 
                }
            }
        }
        .go-live-setup-main-container, .blynk-main-container {
            left: 252px;
        }
        .walldrop-new-main-container {
            left: 252px !important;
        }
        .main-content {
            .blynk-top-navigation-bar {
                left: 252px;
                ul {
                    li {
                        margin-right: 24px;
                        &:last-child {
                            padding-right: 24px;
                        }
                    }
                }
            }
            .blynk-main-container {
                .live-setup {
                    .title-create-sale {
                        padding: 24px;
                    }
                }
                .rewynd-empty-state {
                    .create-sale {
                        padding: 32px;
                    }
                    .create-sale-steps {
                        .create-sale-steps-list {
                            height: 160px;
                        }
                    }
                }
                .over-all-report {
                    margin: 24px;
                }
                .media-queries-list {
                    padding: 0px 24px;
                    .loop-list {
                        padding: 0px !important;
                    }
                    .live-sale-name {
                        height: auto;
                    }
                    .time-status {
                        height: auto;
                    }
                    .product-count {
                        height: auto !important;
                        .color-9b9b9b {
                            width: auto !important;
                        }
                    }
                    .target-audience {
                        height: auto !important;
                        .color-9b9b9b {
                            width: auto !important;
                        }
                        .width-50 {
                            width: auto !important;
                        }
                    }
                    .go-live-btn {
                        margin-top: 8px;
                    }
                    .product-count-audience {
                        margin-top: 8px;
                    }
                }
                .account-setting {
                    overflow-y: unset;
                    flex-direction: column;
                    .main-tab-list {
                        flex: 0 0 50px;
                        .list {
                            padding: 0px;
                            display: flex;
                            position: absolute;
                            overflow-x: auto;
                            background: #ffffff;
                            z-index: 99;
                            left: 0px;
                            right: 0px;
                            .sub-title {
                                display: none;
                            }
                            .tab-list {
                                margin-bottom: 0px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                .title {
                                    width: 100%;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                }
                                &.active:before {
                                    display: none;
                                }
                            }
                            .tab-list.active::after {
                                content: "";
                                position: absolute;
                                height: 4px;
                                left: 0px;
                                bottom: 0px;
                                width: 100%;
                                background: #f62369;
                            }
                        }
                    }
                    .tab-content {
                        overflow-y: auto;
                        /* scroll bar style starts */
                        &::-webkit-scrollbar {
                            width: 5px;
                            background-color: #F5F5F5;
                            display: block !important;
                        }
                        &::-webkit-scrollbar-track {
                            background: #DDDDDD;
                            margin: 0;
                        }
                        &::-webkit-scrollbar-thumb {
                            background: #BDBDBD;
                            display: block !important;
                        }
                        &::-webkit-scrollbar-thumb:hover {
                            background: rgba(0, 0, 0, .35); 
                        }
                        /* scroll bar style ends */
                    }
                }
            }
            .add-walldrop-product-pop-up {
                .add-walldrop-product-pop-up-card {
                    width: 60%;
                }
            }
        }
        .go-live-setup-main-container {
            .streaming-type {
                .time-stamp {
                    width: 100%;
                }
            }
            .save-create-sale-btn {
                flex-direction: column;
                .save-as-draft-btn, .create-sale-btn {
                    width: 100%;
                }
                .create-sale-btn {
                    margin-top: 16px;
                }
                .save-as-draft-btn {
                    margin-right: 0px;
                }
            }
            .go-live-setup {
                .go-live-setup-modal-steps-info {
                    left: 252px;
                    .go-live-setup-modal-steps-info-content {
                        width: 360px;
                    }
                }
            }
        }
        .walldrop-new-main-container {
            .walldrop-live-list {
                .add-product-search {
                    flex-direction: column;
                    .facbook-not-working-info {
                        margin-bottom: 8px !important;
                        text-align: center;
                    }
                    .add-product-search-list {
                        justify-content: flex-end;
                    }
                }
                .list-of-walldrops-products-card {
                    .box-shadow {
                        .id-status-walldrops {
                            margin-bottom: 16px;
                        }
                    }
                }
            }
        }
        .blynk-main-container {
            .live-setup {
                .list-of-create-sale {
                    .loop-list {
                        .box-shadow {
                            .go-live-btn {
                                .d-flex {
                                    justify-content: space-between;
                                    .icon {
                                        .dropdown-menu {
                                            left: auto;
                                            right: 30px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .create-fb-message {
            .create-fb-message-sidenav {
                &.active {
                    width: 100vw;
                }
                .create-fb-message-main-content {
                    .create-fb-message-header {
                        padding: 16px;
                        .heading {
                            font-size: 14px;
                        }
                    }
                    .create-fb-message-body {
                        .create-fb-message-title {
                            font-size: 12px;
                            margin-bottom: 16px;
                        }
                        .create-fb-message-value-update {
                            padding: 16px;
                        }
                    }
                }
            }
        }
        .fb-delete-popup {
            .fb-delete-popup-card {
                width: auto;
            }
        }
        .admin-report {
            .admin-report-sidenav {
                &.active {
                    width: 100%;
                }
            }
        }
        .go-live-video-wrapper {
            .inventory-management {
                z-index: 99;
                .inventory-management-container {
                    width: 75%;
                }
                .inventory-management-body {
                    .inventory-management-table-body {
                        max-height: 50vh;
                    }
                }
            }
        }
    }
}

@media (min-width: 768px) and (max-width: 1200px) {
    .blynk-dashboard {
        .go-live-setup-main-container {
            .streaming-type {
                .time-stamp {
                    width: 75%;
                }
            }
            .save-create-sale-btn {
                .save-as-draft-btn, .create-sale-btn {
                    width: auto;
                    padding: 10px 16px;
                }
            }
        }
        .blynk-main-container {
            .live-setup {
                .list-of-create-sale {
                    .loop-list {
                        .box-shadow {
                            .go-live-btn {
                                .d-flex {
                                    margin-top: 8px;
                                    .icon {
                                        .dropdown-menu {
                                            left: auto;
                                            right: 30px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

// Large devices (desktops, 992px and up)
@media (min-width: 992px) {
    .blynk-dashboard {
        .main-content {
            .blynk-top-navigation-bar {
                left: 312px;
                ul {
                    li {
                        &:not(:last-child) {
                            // margin-right: 40px;
                        }
                    }
                }
            }
        }
    }
}

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { }

@media (max-height: 500px) { 
    .blynk-dashboard {
        .go-live-video-wrapper {
            .inventory-management {
                z-index: 99;
                .inventory-management-body {
                    .inventory-management-table-body {
                        max-height: 50vh;
                    }
                }
            }
        }
    }
}   
.blynk-main-container {
    .blynk-report-generation {
        position: relative;
        display: flex;
        width: 100%;
        height: 100%;
        .report-generation-filter {
            position: relative;
            width: 40%;
            .title {
                font-size: 16px;
                color: #262626;
                margin-bottom: 8px;
            }
            .report-generation-section {
                margin-bottom: 16px;
                &:last-child {
                    margin-bottom: 0px;
                }
            }
            .survey-popup-answer {
                display: flex;
                cursor: pointer;
                overflow-x: auto;
                justify-content: space-between;
                .survey-popup-option {
                    font-size: 12px;
                    padding: 8px 10px;
                    border-radius: 4px;
                    border: solid 1px #000;
                    width: 100%;
                    white-space: nowrap;
                    margin-right: 12px;
                    text-align: center;
                    &:last-child {
                        margin-right: 0px;
                    }
                    &.active {
                        border: solid 1px #f62369;
                        color: #f62369;
                    }
                }
            }
            .d-flex {
                display: flex;
            }
            input {
                border-radius: 4px;
                border: solid 1px #d9d9d9;
                padding: 12px 16px;
                font-size: 12px;
                outline: 0px;
            }
            .textbox-count {
                font-size: 10px;
                margin-top: 4px;
                color: #716f83;
                display: flex;
                justify-content: flex-end;
            }
            /* Chrome, Safari, Edge, Opera */
            input::-webkit-outer-spin-button,
            input::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }

            /* Firefox */
            input[type=number] {
                -moz-appearance: textfield;
                margin-bottom: 8px;
            }

            .width-50 {
                width: 50%;
                &:first-child {
                    margin-bottom: 16px;
                }
            }

            .app-search-section {
                display: flex;
                flex-direction: column;
                .or-text {
                    color: rgba(0, 0, 0, 0.4);
                    margin-bottom: 8px;
                    text-align: center;
                }
            }

            .dropdown {
                &:first-child {
                    margin-bottom: 16px;
                }
                .form-control {
                    height: auto !important;
                    box-shadow: none;
                }
                .input-group .form-control:first-child {
                    border-top-right-radius: 0;
                    border-bottom-right-radius: 0;
                }
                &.open>.dropdown-menu {
                    width: 100% !important;
                }
            }
            .select-option-icon {
                position: relative;
                width: 100%;
                &::before {
                    content: '\f078';
                    font: normal normal normal 12px/1 FontAwesome;
                    color: #000000;
                    right: 12px;
                    height: 100%;
                    padding: 15px 0px;
                    position: absolute;
                    pointer-events: none;
                }
            }
            .select-option {
                appearance: none;
                width: 100%;
                border: solid 1px #d9d9d9;
                background: #ffffffff;
                border-radius: 4px;
                padding: 12px 16px;
                font-size: 12px;
                &:focus-visible {
                    outline: 0px;
                }
            }
            .streaming-type-toggle {
                display: flex;
                .title {
                    margin-bottom: 0px;
                }
                .switch-outer {
                    margin: auto 0;
                    margin-left: 16px;
                    .switch {
                        width: 24px;
                        height: 14px;
                        margin-bottom: 0;
                        input:checked + .slider {
                            background: #40d08b;
                            &:before {
                                transform: translateX(10);
                                -webkit-transform: translateX(10px);
                                -ms-transform: translateX(10px);
                            }
                        }
                        .slider {
                            background: rgba(0, 0, 0, 0.4);
                            &:before {
                                width: 8px;
                                height: 8px;
                                top: 50%;
                                margin-top: -4px;
                                left: 3px;
                                background-color: #FFFFFF;
                            }
                        }
                    }
                }
            }
            .report-generation-scroll {
                overflow-y: auto;
                height: ~"calc(100% - 74px)";
                &:hover::-webkit-scrollbar-thumb {
                    display: block;
                }
                .report-generation-padding {
                    padding: 24px;
                    .report-generation-section {
                        .dropdown {
                            .form-control[readonly] {
                                background-color: #fff !important;
                            }
                            &.open {
                                .datetimepicker {
                                    width: 100% !important;
                                }
                            }
                        }
                    }
                }
                .space-between-div {
                    height: 4px;
                    background: rgba(240, 239, 248, 0.5);
                }
                .report-generation-title {
                    font-size: 20px;
                    color: #262626;
                    margin-bottom: 16px;
                    font-weight: 600;
                }
            }
            .download-report-btn {
                position: absolute;
                bottom: 0;
                right: 0;
                left: 0;
                background: #ffffff;
                z-index: 1;
                padding: 16px 24px;
                display: flex;
                justify-content: flex-end;
                box-shadow: rgba(0, 0, 0, 0.1) -8px -2px 8px 2px;
                .download-btn {
                    color: #ffffff;
                    padding: 10px 18px;
                    border-radius: 4px;
                    background-color: #000;
                    border: solid 1px #000;
                    cursor: pointer;
                    width: 150px;
                    text-align: center;
                }
            }
        }
        .empty-state-image-loading {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .report-generation-data-view {
            position: relative;
            width: 100%;
            &:hover::-webkit-scrollbar-thumb {
                display: block;
            }
            .empty-state-image {
                height: 100%;
                .customer-report {
                    margin-top: 16px;
                    border-radius: 4px;
                    padding: 8px 16px;
                    font-weight: 600;
                    font-size: 14px;
                    background: #F62369;
                    border: 1px solid #F62369;
                    color: #ffffff;
                    &:hover {
                        background: #FFF3F7;
                        color: #F62369;
                    }
                }
            }
            .app-infomation {
                padding: 24px;
                display: flex;
                justify-content: space-between;
                &.customer-report-info {
                    .record-count {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                    .customer-report {
                        cursor: pointer;
                        display: flex;
                        img {
                            margin-right: 8px;
                        }
                        .btn-download-report {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            border-radius: 4px;
                            padding: 8px 16px;
                            font-weight: 600;
                            font-size: 14px;
                            background: #F62369;
                            border: 1px solid #F62369;
                            color: #ffffff;
                            &:hover {
                                background: #FFF3F7;
                                color: #F62369;
                            }
                        }
                        .btn-customize-report {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            border-radius: 4px;
                            padding: 8px 16px;
                            font-weight: 600;
                            font-size: 14px;
                            background: #F62369;
                            border: 1px solid #F62369;
                            color: #ffffff;
                            margin-right: 8px;
                            &:hover {
                                background: #FFF3F7;
                                color: #F62369;
                            }
                        }
                    }
                }
                div {
                    // margin-bottom: 8px;
                    // &:last-child {
                    //     margin-bottom: 0px;
                    // }
                    span {
                        font-weight: 600;
                    }
                }
            }
            .reservation-table-responsive {
                overflow-x: auto;
                &.with-app-id {
                    height: ~"calc(100% - 130px)";
                    padding: 0px 24px 24px;
                }
                &.with-out-app-id {
                    height: ~"calc(100% - 86px)";
                    margin-top: 24px;
                    padding: 0px 24px 24px;
                }
                &::-webkit-scrollbar {
                    height: 4px;
                }
                &::-webkit-scrollbar-thumb {
                    display: block;
                }
                .reservation-table-condensed {
                    min-width: 100vw;
                    width: 100%;
                    .reservation-tablehead {
                        height: 45px;
                        background-color: #f8f8f8;
                        border-bottom: 1px solid #e1dfea;
                        position: sticky;
                        top: 0px;
                        z-index: 1;
                        tr {
                            th {
                                width: 200px;
                                height: 45px;
                                font-size: 14px;
                                font-weight: 500;
                                text-align: center;
                            }
                        }
                    }
                    .reservation-tablebody {
                        overflow-y: scroll;
                        tr {
                            font-size: 12px;
                            font-weight: 400;
                            height: 45px;
                            background-color: #ffffff;
                            border-bottom: 1px solid #e1dfea;
                            td {
                                max-width: 50px;
                                text-align: center;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                        }
                    }
                }
            }
            .download-report-btn {
                position: absolute;
                bottom: 0;
                right: 0;
                left: 0;
                background: #ffffff;
                z-index: 1;
                padding: 16px 24px;
                display: flex;
                box-shadow: rgba(0, 0, 0, 0.1) 8px -2px 8px 2px;
                .download-btn {
                    border-radius: 4px;
                    padding: 8px 16px;
                    font-weight: 600;
                    font-size: 14px;
                    background: #F62369;
                    border: 1px solid #F62369;
                    color: #ffffff;
                    &:hover {
                        background: #FFF3F7;
                        color: #F62369;
                    }
                }
            }
        }
    }
}

.admin-report {
    height: 100vh;
    width: 0;
    position: fixed;
    z-index: 99;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.4);
    transition: 0.10s;
    &.active {
        width: 100vw;
        transition: 0.1s;
    }
    .admin-report-sidenav {
        height: 100%;
        width: 0px;
        position: fixed;
        z-index: 1;
        top: 0;
        right: 0px;
        background-color: #ffffff;
        transition: 0.5s;
        &.active {
            width: 450px;
            transition: 0.5s;
        }
        .title {
            font-size: 14px;
            color: #000000;
            margin-bottom: 8px;
        }
        .report-generation-section {
            margin-bottom: 16px;
            &:last-child {
                margin-bottom: 0px;
            }
        }
        .survey-popup-answer {
            display: flex;
            cursor: pointer;
            overflow-x: auto;
            justify-content: space-between;
            .survey-popup-option {
                font-size: 12px;
                padding: 8px 10px;
                border-radius: 4px;
                border: solid 1px #000;
                width: 100%;
                white-space: nowrap;
                margin-right: 12px;
                text-align: center;
                &:last-child {
                    margin-right: 0px;
                }
                &.active {
                    border: solid 1px #f62369;
                    color: #f62369;
                }
            }
        }
        .d-flex {
            display: flex;
        }
        input {
            color: #333333;
            border-radius: 4px;
            border: 1px solid #C5C9CD;
            padding: 12px 16px;
            font-size: 12px;
            outline: 0px;
        }
        .textbox-count {
            font-size: 10px;
            margin-top: 4px;
            color: #716f83;
            display: flex;
            justify-content: flex-end;
        }
        /* Chrome, Safari, Edge, Opera */
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        input[type=number] {
            -moz-appearance: textfield;
            margin-bottom: 8px;
        }

        .width-50 {
            width: 50%;
            &:first-child {
                margin-bottom: 16px;
            }
        }

        .app-search-section {
            display: flex;
            flex-direction: column;
            .or-text {
                color: rgba(0, 0, 0, 0.4);
                margin-bottom: 8px;
                text-align: center;
            }
        }

        .dropdown {
            &:first-child {
                margin-bottom: 16px;
            }
            .form-control {
                height: auto !important;
                box-shadow: none;
            }
            .input-group .form-control:first-child {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }
            &.open>.dropdown-menu {
                width: 100% !important;
            }
        }
        .select-option-icon {
            position: relative;
            width: 100%;
            &::before {
                content: '\f078';
                font: normal normal normal 12px/1 FontAwesome;
                color: #000000;
                right: 12px;
                height: 100%;
                padding: 15px 0px;
                position: absolute;
                pointer-events: none;
            }
        }
        .select-option {
            appearance: none;
            width: 100%;
            border: solid 1px #d9d9d9;
            background: #ffffffff;
            border-radius: 4px;
            padding: 12px 16px;
            font-size: 12px;
            &:focus-visible {
                outline: 0px;
            }
        }
        .streaming-type-toggle {
            display: flex;
            .title {
                margin-bottom: 0px;
            }
            .switch-outer {
                margin: auto 0;
                margin-left: 16px;
                .switch {
                    width: 24px;
                    height: 14px;
                    margin-bottom: 0;
                    input:checked + .slider {
                        background: #40d08b;
                        &:before {
                            transform: translateX(10);
                            -webkit-transform: translateX(10px);
                            -ms-transform: translateX(10px);
                        }
                    }
                    .slider {
                        background: rgba(0, 0, 0, 0.4);
                        &:before {
                            width: 8px;
                            height: 8px;
                            top: 50%;
                            margin-top: -4px;
                            left: 3px;
                            background-color: #FFFFFF;
                        }
                    }
                }
            }
        }
        .admin-report-header {
            background: #ffffff;
            position: sticky;
            top: 0px;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #DEDEDE;
            z-index: 9;
            .heading {
                font-weight: 500;
                font-size: 18px;
                color: #333333;
            }
        }
        .admin-report-body {
            height: ~"calc(100vh - 133px)";
            overflow-y: auto;
            &:hover::-webkit-scrollbar-thumb {
                display: block;
            }
            .report-generation-padding {
                padding: 20px;
                .report-generation-section {
                    .dropdown {
                        .form-control[readonly] {
                            background-color: #fff !important;
                        }
                        &.open {
                            .datetimepicker {
                                width: 100% !important;
                            }
                        }
                    }
                }
            }
            .space-between-div {
                height: 4px;
                background: rgba(240, 239, 248, 0.5);
            }
            .report-generation-title {
                font-size: 16px;
                color: #000000;
                margin-bottom: 16px;
                // font-weight: 600;
            }
        }
        .admin-report-footer {
            display: flex;
            position: sticky;
            bottom: 0;
            right: 0;
            left: 0;
            padding: 14px 20px;
            box-shadow: 0px -4px 24px rgba(0, 0, 0, 0.12);
            background: #ffffff;
            button {
                border-radius: 4px;
                padding: 8px 16px;
                font-weight: 600;
                font-size: 14px;
            }
            .cancel-btn {
                background: #FFFFFF;
                border: 1px solid #D3D3D3;
                color: #333333;
                margin-right: 10px;
                &:hover {
                    background: rgba(211, 211, 211, 0.2);
                }
            }
            .create-btn {
                background: #F62369;
                border: 1px solid #F62369;
                color: #ffffff;
                &.active {
                    cursor: not-allowed;
                    opacity: 0.3;
                    &:hover {
                        opacity: 0.3;
                        background: #F62369;
                        border: 1px solid #F62369;
                        color: #ffffff;
                    }
                }
                &:hover {
                    background: #FFF3F7;
                    color: #F62369;
                }
            }
        }
    }
}
.blynk-dashboard {
    // .announcement-bar-open {
    //     .blynk-reservation-container .reservation-detail-list .list-of-reservation-products .list-of-reservation-products-body {
    //         height: ~"calc(100vh - 345px)";
    //     }
    // }

    .no-reservation-list {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        .image-card {
            position: relative;
            width: 375px;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ffffff;
            .play-button {
                background-color: #F62369;
                color: #FFFFFF;
                border-radius: 100%;
                box-sizing: border-box;
                position: relative;
                display: block;
                width: 50px;
                height: 50px;
                &::before {
                    content: "";
                    display: block;
                    box-sizing: border-box;
                    position: absolute;
                    width: 15px;
                    height: 19px;
                    border-top: 8px solid transparent;
                    border-bottom: 8px solid transparent;
                    border-left: 15px solid;
                    top: 15px;
                    left: 19px;
                    border-radius: 4px;
                }
            }
        }
        .facbook-not-working-info {
            text-align: center;
            color: #F62369;
            width: 50%;
            margin-top: 16px;
        }
    }
    .blynk-reservation-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
        .empty-state-image {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            overflow-y: scroll;
        }
        .title-create-sale {
            padding: 24px 32px;
            display: flex;
            justify-content: flex-end;
            &.active {
                justify-content: space-between !important;
            }
            .select-option-icon {
                position: relative;
                width: 25%;
                &::before {
                    content: '\f078';
                    font: normal normal normal 12px/1 FontAwesome;
                    color: #000000;
                    right: 12px;
                    height: 100%;
                    padding: 11px 0px;
                    position: absolute;
                    pointer-events: none;
                }
            }
            .select-option {
                appearance: none;
                width: 100%;
                border: solid 1px #d9d9d9;
                background: #ffffffff;
                border-radius: 4px;
                padding: 8px 16px;
                font-size: 12px;
                &:focus-visible {
                    outline: 0px;
                }
            }
            .tab-view {
                display: flex;
                .tab-card {
                    margin-right: 8px;
                    cursor: pointer;
                    min-height: 24px;
                    border-radius: 2px;
                    background-color: #ffffff;
                    padding: 2px 16px;
                    color: #000000;
                    font-size: 12px;
                    border: solid 1px #eaeaea;
                    font-weight: 400;
                    &:last-child {
                        margin-right: 0px;
                    }
                    &.active {
                        color: #ffffff;
                        background-color: #323237;
                    }
                }
            }
            .create-sale-link {
                cursor: pointer;
                font-size: 14px;
                color: #9b9b9b;
                margin: auto 0;
            }
            .next-prev-btn {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                user-select: none;
                -moz-user-select: none;
                -webkit-user-drag: none;
                -webkit-user-select: none;
                -ms-user-select: none;
                margin: auto 0;
            
                span {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 2px;
                    min-width: 24px;
                    min-height: 24px;
                    font-size: 12px;
                    font-weight: normal;
                    line-height: 1.5;
                    letter-spacing: 0.12px;
                    color: #000000;
                    background-color: #ffffff;
                    border-radius: 2px;
                    border: 1px solid #dbdbdb;
                    cursor: pointer;
            
                    &:not(:last-child) {
                        margin-right: 5px;
                    }
            
                    &.disable {
                        opacity: 0.5;
                        cursor: not-allowed;
                    }
            
                    &.no-border {
                        border: none;
                    }
            
                    .left-arrow {
                        transform: scale(-1);
                    }
                }
            }
        }
        // Reservation home page
        .reservation-list-container {
            flex: 1 1 auto;
            padding: 0px 32px 24px;
            overflow-y: auto;
            &:hover::-webkit-scrollbar-thumb {
                display: block;
            }
            .loop-list {
                .reservation-list {
                    cursor: pointer;
                    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08);
                    border-radius: 4px;
                    margin: 0 0 12px;
                    padding: 12px 0px;
                    &:hover {
                        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
                    }
                    .live-sale-name {
                        font-size: 14px;
                        height: 20px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    .time-status {
                        height: 16px;
                        margin-top: 8px;
                        font-size: 12px;
                        display: flex;
                        justify-content: space-between;
                    }
                    .product-count-audience {
                        font-size: 12px;
                        .d-flex {
                            display: flex;
                            .color-9b9b9b {
                                padding-right: 4px;
                            }
                        }
                        .product-count {
                            height: 20px;
                        }
                        .target-audience {
                            height: 16px;
                            margin-top: 8px;
                        }
                    }
                    .go-live-btn {
                        position: relative;
                        .d-flex {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            padding: 2px 0px;
                            .go-live {
                                border-radius: 4px;
                                background: #F62369;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                margin: auto 0;
                                padding: 8px 20px;
                            }
                            .live-sale {
                                background: #F62369 !important;
                            }
                            .icon {
                                margin: auto 0;
                            }
                        }
                        .show-user-option {
                            position: absolute;
                            border-radius: 4px;
                            box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.16);
                            padding: 8px 24px;
                            background: #ffffff;
                            right: 32px;
                            top: 20px;
                            left: -32px;
                            text-align: center;
                        }
                    }
                }
            }
        }
        // Reservation detail page
        .reservation-detail-list {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            .product-drops-title {
                padding: 24px 32px;
                background: #ffffff;
                display: flex;
                position: sticky;
                top: 0px;
                z-index: 1;
                font-size: 16px;
                text-transform: capitalize;
            }
            .add-product-next-prev {
                padding: 24px 32px;
                display: flex;
                justify-content: flex-end;
                background: #ffffff;
                position: sticky;
                top: 0px;
                z-index: 1;
                span {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 2px;
                    min-width: 24px;
                    min-height: 24px;
                    font-size: 12px;
                    font-weight: normal;
                    line-height: 1.5;
                    letter-spacing: 0.12px;
                    color: #000000;
                    background-color: #ffffff;
                    border-radius: 2px;
                    border: 1px solid #dbdbdb;
                    cursor: pointer;
                    margin: auto 0;

                    &.disable {
                        opacity: 0.5;
                        cursor: not-allowed;
                    }
                     
                    &:not(:last-child) {
                        margin-left: 8px;
                        margin-right: 5px;
                    }
    
                    .left-arrow {
                        transform: scale(-1);
                    }
                }
            }
            .list-of-reservation-products {
                flex: 1 1 auto;
                overflow-y: scroll;
                padding: 0px 24px 32px;
                .text-center {
                    text-align: center;    
                }
                .list-of-reservation-products-head {
                    height: 45px;
                    background-color: #f8f8f8;
                    border-bottom: 1px solid #e1dfea;
                    position: sticky;
                    top: 0px;
                    z-index: 1;
                    .row {
                        .text-center {
                            height: 45px;
                            display: flex;
                            .reservation-products-head-title {
                                font-size: 14px;
                                margin: auto;
                                font-weight: 500;
                            }
                        }
                    }
                }
                .list-of-reservation-products-body {
                    overflow-y: scroll;
                    height: ~"calc(100vh - 320px)";
                    .row {
                        font-size: 12px;
                        font-weight: 400;
                        height: 45px;
                        background-color: #ffffff;
                        border-bottom: 1px solid #e1dfea;
                        .text-center {
                            height: 45px;
                            display: flex;
                            .reservation-products-text {
                                cursor: pointer;
                                margin: auto;
                            }
                            .reservation-products-title {
                                cursor: pointer;
                                margin: auto;
                                width: 75%;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                        }
                    }
                }
            }
            .reservation-table-responsive {
                flex: 1 1 auto;
                overflow: auto;
                padding: 0px 24px 32px;
                &::-webkit-scrollbar {
                    height: 8px !important;
                }
                &::-webkit-scrollbar-thumb {
                    display: block;
                }
                .reservation-table-condensed {
                    min-width: 700px;
                    width: 100%;
                    .reservation-tablehead {
                        height: 45px;
                        background-color: #f8f8f8;
                        border-bottom: 1px solid #e1dfea;
                        position: sticky;
                        top: 0px;
                        z-index: 1;
                        tr {
                            th {
                                height: 45px;
                                font-size: 14px;
                                font-weight: 500;
                                text-align: center;
                            }
                        }
                    }
                    .reservation-tablebody {
                        overflow: scroll;
                        tr {
                            font-size: 12px;
                            font-weight: 400;
                            height: 45px;
                            background-color: #ffffff;
                            border-bottom: 1px solid #e1dfea;
                            td {
                                max-width: 50px;
                                text-align: center;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                        }
                    }
                }
            }
        }
        // Reservation popup model
        .reservation-popup-model {
            display: none;
            position: absolute;
            top: 0px;
            right: 0px;
            left: 0px;
            bottom: 0px;
            background: rgba(0, 0, 0, 0.5);
            z-index: 9;
            &.active {
                display: block;
            }
            .reservation-popup-model-card {
                display: flex;
                align-items: center;
                justify-content: center;
                margin: auto;
                height: 100%;
                .reservation-popup-card-view {
                    width: 500px;
                    height: 350px;
                    background: #ffffff;
                    border-radius: 4px;
                    padding: 16px;
                    .header-view {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .reservation-type-title {
                            text-transform: capitalize;
                        }
                    }
                    .reservation-product-title {
                        margin-top: 8px;
                        font-size: 14px;
                        width: 300px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    .reservation-body-view {
                        margin-top: 8px;
                        height: 250px;
                        overflow: auto;
                        &::-webkit-scrollbar {
                            height: 8px !important;
                        }
                        .reservation-table-condensed {
                            min-width: 300px;
                            width: 100%;
                            .reservation-tablehead {
                                height: 45px;
                                background-color: #f8f8f8;
                                border-bottom: 1px solid #e1dfea;
                                position: sticky;
                                top: 0px;
                                z-index: 1;
                                tr {
                                    th {
                                        height: 45px;
                                        font-size: 14px;
                                        font-weight: 500;
                                        text-align: center;
                                    }
                                }
                            }
                            .reservation-tablebody {
                                overflow: scroll;
                                tr {
                                    font-size: 12px;
                                    font-weight: 400;
                                    height: 45px;
                                    background-color: #ffffff;
                                    border-bottom: 1px solid #e1dfea;
                                    td {
                                        max-width: 50px;
                                        text-align: center;
                                        white-space: nowrap;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                    }
                                }
                            }
                        }

                        .reservation-variant-popup-head {
                            height: 32px;
                            background-color: #f8f8f8;
                            border-bottom: 1px solid #e1dfea;
                            position: sticky;
                            top: 0px;
                            z-index: 1;
                        }
                        .reservation-variant-popup-body {
                            overflow-y: scroll;
                            height: 200px;
                            .reservation-variant-popup-loop {
                                font-size: 12px;
                                font-weight: 400;
                                height: 32px;
                                background-color: #ffffff;
                                border-bottom: 1px solid #e1dfea;
                            }
                        }
                        .list {
                            width: 100%;
                            display: flex;
                            cursor: pointer;
                            .width-25 {
                                width: 25%;
                                margin: auto;
                                height: 32px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                .ellipsis-text {
                                    width: 90%;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                            }
                            .width-50 {
                                width: 50%;
                                margin: auto;
                                height: 32px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                .ellipsis-text {
                                    width: 90%;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
.blynk-dashboard {
    .rewynd-empty-state {
        position: relative;
        height: 100%;
        width: 100%;
        .empty-state-img {
            position: absolute;
            bottom: 0px;
            right: 0px;
            z-index: -1;
        }
        .create-sale {
            padding: 48px;
            height: 100%;
            overflow-y: auto;
            h1 {
                font-size: 16px;
                margin: 0px;
            }
            ul {
                padding: 24px 0px;
                padding-left: 18px;
                margin: 0px;
                width: 80%;
                margin-bottom: 24px;
                li {
                    padding-bottom: 16px;
                    &:last-child {
                        padding-bottom: 0px;
                    }
                }
            }
            .create-sale-btn {
                color: #fff;
                border-radius: 4px;
                background: #F62369;
                padding: 12px 24px;
                width: 150px;
                cursor: pointer;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
        .create-sale-steps {
            padding: 48px;
            height: 100%;
            overflow-y: auto;
            &:hover::-webkit-scrollbar-thumb {
                display: block;
            }
            .create-sale-view-history {
                position: absolute;
                top: 18px;
                right: 18px;
                color: #F62369;
                font-size: 14px;
                cursor: pointer;
                background: #fff;
                padding: 8px 16px;
                border: 1px solid #F62369;
                border-radius: 4px;
            }
            .create-sale-steps-list {
                display: flex;
                width: 100%;
                height: 120px;
            }
            .create-sale-steps-line {
                flex: 0 1 20px;
                margin-right: 24px;
                position: relative;
                .last-active-circle {
                    background-color: #d9d9d9;
                    border: solid 1px #d9d9d9 !important;
                    &::after {
                        display: none;
                    }
                }
                .active-circle {
                    width: 12px;
                    height: 12px;
                    border: solid 1px #000;
                    border-radius: 100%;
                    margin: 4px auto 0px;
                    &::after {
                        content:"";
                        position: absolute;
                        z-index: -1;
                        top: 24px;
                        bottom: 8px;
                        left: 45%;
                        border-left: 2px dotted #707070;;
                    }
                }
                .active {
                    width: 12px;
                    height: 12px;
                    border: solid 1px #F62369 !important;
                    background: #F62369;
                    border-radius: 100%;
                    margin: 4px auto 0px;
                    &::after {
                        content:"";
                        position: absolute;
                        z-index: -1;
                        top: 24px;
                        bottom: 8px;
                        left: 45%;
                        border-left: 2px dotted #F62369;
                    }
                }
            }
            .create-sale-steps-content {
                flex: 1 1 auto;
                letter-spacing: 0.75px;
                .create-sale-steps-title {
                    font-size: 16px;
                    margin-bottom: 12px;
                }
                .create-sale-steps-sub-title {
                    font-size: 14px;
                    color: rgba(0, 0, 0, 0.5);
                    margin-bottom: 12px;
                }
                .create-sale-steps-completed {
                    .create-sale-steps-completed-circle {
                        height: 20px;
                        width: 20px;
                        margin-right: 4px;
                    }
                    .create-sale-steps-completed-text {
                        font-size: 12px;
                        color: #4ac691;
                        font-weight: 600;
                    }
                }
                .create-sale-steps-completed-btn {
                    font-size: 12px;
                    border-radius: 4px;
                    background-color: #4e71e6;
                    padding: 12px 22px;
                    color: #ffffff;
                    width: fit-content;
                    border: 0px;
                    font-family: 'Poppins', serif !important;
                    &.disable {
                        display: none;
                    }
                    &.disabled-btn {
                        cursor: not-allowed;
                    }
                }
                .create-sale-steps-configure-btn {
                    background-color: #fff !important;
                    border: 1px solid #707070;
                    color: #000000 !important;
                    font-family: 'Poppins', serif !important
                }
            }
        }
    }
    .rewynd-container {
        .rewynd-empty-state-image {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
        }
        .update_needed_popup {
            display: none;
            position: absolute;
            top: 0px;
            bottom: 0px;
            right: 0px;
            left: 0px;
            background: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
            &.active {
                display: flex;
            }
            .update-needed-popup-modal-dialog {
                height: 300px;
                width: 400px;
            }
            .modal-content {
                position: relative;
                background-color: #fff;
                background-clip: padding-box;
                border: 1px solid rgba(0,0,0,.2);
                border-radius: 6px;
                outline: 0;
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
                .modal-header {
                    padding: 15px;
                    border-bottom: 1px solid #e5e5e5;
                }
                .modal-body {
                    position: relative;
                    padding: 15px;
                    .btn_toggle {
                        background: linear-gradient(
                            180deg, #616fc6, #616fc6) !important;
                        border-color: #5c65aa !important;
                        box-shadow: inset 0 0 0 0 transparent, 0 1px 0 0 rgb(22, 29, 37, 0.05), 0 0 1px 0 #38469b !important;
                        color: #fff;
                    }
                    .btn-small {
                        padding: 8px 14px !important;
                        font-size: 14px !important;
                        line-height: unset !important;
                        border-radius: 4px !important;
                    }
                }
            }
        }
    }
    .rewynd-history-container {
        height: 100%;
        display: flex;
        flex-direction: column;
        width: 100%;
        .title-create-sale {
            padding: 24px 32px;
            display: flex;
            justify-content: space-between;
            .new-live-sale-title {
                font-size: 18px;
                letter-spacing: 1.5px;
            }
            .create-sale-link {
                cursor: pointer;
                font-size: 14px;
                color: #9b9b9b;
                margin: auto 0;
            }
        }
        .loop-list {
            flex: 1 1 auto;
            padding: 32px 24px;
            overflow-y: scroll;
            .box-shadow {
                cursor: pointer;
                box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08);
                border-radius: 4px;
                margin-bottom: 12px;
                padding: 12px 0px;
                &:hover {
                    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
                }
                .live-sale-name, .time-status {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                .d-flex {
                    display: flex;
                }
                .live-sale-name {
                    .sale-name {
                        width: 55%;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    .status {
                        width: 45%;
                        font-size: 12px;
                    }
                }
                .time-status {
                    margin-top: 8px;
                    font-size: 12px;
                    .time {
                        width: 55%;
                    }
                    .duration {
                        width: 45%;
                    }
                }
                .product-count-audience {
                    font-size: 12px;
                    .product-count {
                        margin-bottom: 10px;
                    }
                    .color-9b9b9b {
                        margin-right: 4px;
                    }
                }
                .go-live-btn {
                    height: 45px;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    position: relative;
                    .open > .dropdown-menu {
                        position: absolute;
                        opacity: 1;
                        transform: rotateX(0deg);
                        transform-origin: top;
                        width: 100%;
                        border: none;
                        top: 18px;
                        left: -30px;
                        min-width: 168px;
                        border-radius: 2px;
                        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
                    }
                    .menu-item {
                        display: flex;
                        align-items: center;
                        color: #000000;
                        font-size: 12px;
                        line-height: 1.75;
                        padding: 6px 16px;
                        cursor: pointer;
                        .switch-outer {
                            display: flex;
                            justify-content: center;
                            margin: 0px;
                            margin-left: auto;
                            .switch {
                                width: 24px;
                                height: 14px;
                                margin-bottom: 0;

                                input:checked + .slider {
                                    background: #40d08b;
    
                                    &:before {
                                        transform: translateX(10);
                                        -webkit-transform: translateX(10px);
                                        -ms-transform: translateX(10px);
                                    }
                                }
    
                                .slider {
                                    background: #000000;
    
                                    &:before {
                                        width: 8px;
                                        height: 8px;
                                        top: 50%;
                                        margin-top: -4px;
                                        left: 3px;
                                        background-color: #FFFFFF;
                                    }
                                }
                            }
                        }
                    }
                    .gray-text {
                        color: #787878 !important;
                    }
                }
            }
        }
    }
}
.blynk-main-container {
    .usage {
        padding: 24px;
        width: 100%;
        overflow-y: scroll;
        .total-sale {
            font-size: 18px;
            margin-bottom: 24px;
            .total-sale-price {
                margin-top: 8px;
                font-size: 32px;
                sup {
                    font-size: 20px;
                }
            }
        }
        .blynk-facebook-sale-report {
            width: 100%;
            display: flex;
            margin-bottom: 32px;
            .card-view {
                position: relative;
                width: 50%;
                border: solid 1px #d9d9d9;
                border-radius: 4px;
                padding: 24px 32px;
                &:first-child {
                    margin-right: 24px;
                }
                .sale-type-name-price {
                    display: flex;
                    justify-content: space-between;
                    font-size: 16px;
                    margin-bottom: 20px;
                    span:last-child {
                        width: 50px;
                    }
                }
                .breakdown-view {
                    .d-flex {
                        display: flex;
                        font-size: 16px;
                        justify-content: space-between;
                        margin-bottom: 20px;
                        span {
                            .breakdown-info-img {
                                cursor: pointer;
                                margin-left: 4px;
                            }
                            &:last-child {
                                width: 50px;
                            }
                        }
                    }
                }
                .view-breakdown-btn {
                    cursor: pointer;
                    text-align: center;
                    font-size: 14px;
                    width: 100%;
                    border-radius: 4px;
                    background-color: #f5f5f5;
                    padding: 12px;
                }
            }
        }
        .transaction-history {
            .title-date-picker {
                display: flex;
                justify-content: space-between;
                margin-bottom: 16px;
                .title {
                    font-size: 18px;
                    display: flex;
                    align-items: center;
                }
                input {
                    width: 25%;
                    border-radius: 3px;
                    border: solid 1px #d9d9d9;
                    padding: 8px 16px;
                    font-size: 12px;
                    color: #000;
                }
            }
            .list-of-usage {
                position: relative;
                .list-of-usage-head {
                    height: 45px;
                    background-color: #f8f8f8;
                    border-bottom: 1px solid #e1dfea;
                    .usage-header {
                        height: 45px;
                        display: flex;
                    }
                    .usage-header-title {
                        font-size: 14px;
                        margin: auto;
                    }
                    .d-flex {
                        display: flex;
                        justify-content: space-between;
                        margin: auto;
                        width: 100%;
                        position: relative;
                        img  {
                            cursor: pointer;
                            margin: auto;
                            margin-right: 0px;
                        }
                        .option {
                            visibility: hidden;
                            cursor: pointer;
                            width: 120px;
                            position: absolute;
                            background: #ffffff;
                            right: 16px;
                            top: 8px;
                            border-radius: 4px;
                            padding: 8px;
                            font-size: 12px;
                            text-align: center;
                            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
                            z-index: 1;
                            &:hover {
                                background-color: #f4f4f4;
                            }
                        }
                    }
                }
                .list-of-usage-body {
                    .row {
                        height: 64px;
                        background-color: #ffffff;
                        border-bottom: 1px solid #e1dfea;
                    }
                    .usage-body {
                        height: 64px;
                        display: flex;
                        font-size: 12px;
                        .margin-auto {
                            margin: auto;
                        }
                        .usage-image {
                            text-align: center;
                        }
                        .usage-product-title {
                            .title {
                                padding-bottom: 4px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                            .variant-list {
                                cursor: pointer;
                                color: rgba(0, 0, 0, 0.4);
                            }
                        }
                        .usage-product-satuts {
                            background-color: #62c195;
                            color: #fff;
                            border-radius: 10px;
                            font-size: 10px;
                            width: 50px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            height: 20px;
                            .circle {
                                width: 6px;
                                height: 6px;
                                background-color: #fff;
                                border-radius: 100%;
                                margin-right: 4px;
                            }
                        }
                        .usage-posted-date {
                            text-align: center;
                        }
                    }
                }
            }
        }
    }
}
.blynk-dashboard {
    // Walldrop Products
    // .announcement-bar-open {
    //     .walldrop-new-main-container {
    //         top: 180px !important;
    //     }
    //     .walldrop-list, .walldrop-modal {
    //         height: ~"calc(100vh - 190px)" !important;
    //     }
    //     .selectFBOption {
    //         height: ~"calc(100vh - 190px)" !important;
    //     }
    //     .list-of-walldrop-products-body {
    //         height: ~"calc(100vh - 360px)" !important;
    //     }
    // }
    
    .walldrop-new-main-container {
        color: #000000;
        display: flex;
        background-color: #ffffff;
        position: fixed;
        top: 134px;
        right: 16px;
        bottom: 16px;
        left: 312px;
        border-radius: 4px;

        .empty-statu-image {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
        }
    
        // common css starts
        :focus, :active:focus {
            outline: 0 none;
        }
    
        button, html, input, select, textarea {
            font-family: 'Poppins', serif !important;
        }
    
        .btn {
            font-size: 14px;
            font-weight: bold;
            line-height: 1.2;
            letter-spacing: 0.28px;
            padding: 10px 24px;
            border-radius: 3px;
            margin: 0;
            outline: 0 none;
            
            &.btn-outline {
                color: #000000;
                border-color: #000000;
                background-color: #FFFFFF;
            }
    
            &.black-btn {
                color: #FFFFFF;
                background-color: #000000;
                border-color: #000000;
            }

            &.vajro-btn {
                color: #FFFFFF;
                background-color: #F62369;
                border-color: #F62369;
            }
        }
    
        .live-product-row {
            cursor: pointer;
        }
    
        .add-walldrop-product-pop-up {
            visibility: hidden;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            z-index: 10;
            background: rgba(0, 0, 0, 0.5);
            width: 100%;
            display: flex;
            &.active {
                visibility: visible;
            }
            .add-walldrop-product-pop-up-card {
                margin: auto;
                position: relative;
                background: #ffffff;
                height: 70%;
                width: 35%;
                border-radius: 4px;
                padding: 24px 16px;
                .close-btn {
                    cursor: pointer;
                    position: absolute;
                    right: 16px;
                    top: 16px;
                    i {
                        font-size: 18px;
                    }
                }
                .input-with-barcode-scanner {
                    display: flex;
                    width: 100%;
                    margin-top: 24px;
                    position: relative;
                    .disabled-input {
                        cursor: not-allowed;
                        position: absolute;
                        background: rgba(0, 0, 0, 0.1);
                        top: 0;
                        bottom: 0px;
                        right: 0;
                        left: 0;
                        content: "";
                        border-radius: 2px;
                    }
                    .search-product {
                        border: solid 1px #c9c9c9;
                        // border-radius: 2px 0px 0px 2px;
                        border-radius: 2px;
                        padding: 8px 12px;
                        width: 100%;
                        // border-right: 0px;
                        &:focus-visible {
                            outline: 0px;
                        }
                    }
                    .barcode-reader-img {
                        display: none;
                        border: solid 1px #c9c9c9;
                        border-radius: 0px 2px 2px 0px;
                        padding: 8px 12px;
                        border-left: 0px;
                    }
                    .pop-up-option {
                        font-size: 12px;
                        line-height: 1.75;
                        letter-spacing: 0.24px;
                        position: absolute;
                        border-radius: 2px;
                        padding: 8px 12px;
                        top: 40px;
                        right: 0px;
                        left: 0px;
                        height: 160px;
                        background: #fff;
                        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
                        z-index: 1;
                        overflow-y: scroll;
                        -ms-overflow-style: none;
                        scrollbar-width: none;
                        &::-webkit-scrollbar {
                            display: none;
                        }
                        .pop-up-option-no-poduct-list {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            color: #c9c9c9;
                            height: 100%;
                        }
                        .pop-up-option-poduct-list {
                            cursor: pointer;
                            padding: 8px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            &:hover {
                                background-color: rgba(0, 0, 0, 0.05);
                            }
                        }
                    }
                }
                .walldrop-no-product-list {
                    position: absolute;
                    top: 90px;
                    right: 16px;
                    bottom: 74px;
                    left: 16px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 14px;
                    color: #c9c9c9;
                    text-align: center;
                }
                .walldrop-product-list {
                    position: absolute;
                    top: 90px;
                    right: 16px;
                    bottom: 74px;
                    left: 16px;
                    overflow-y: scroll;
                    -ms-overflow-style: none;
                    scrollbar-width: none;
                    &::-webkit-scrollbar {
                        display: none;
                    }
                    .import-product-view {
                        position: relative;
                        display: flex;
                        padding: 8px;
                        margin-bottom: 0px;
                        cursor: pointer;
                        justify-content: space-between;
                        &.active {
                            background-color: rgba(0, 0, 0, 0.05);
                        }
                        .vajro-delete {
                            color: #ff4540;
                            font-size: 14px;
                            margin: auto 0px;
                            margin-right: 8px;
                            flex: 1 1 4%;
                            width: 4%;
                        }
                        .import-product-img-title {
                            display: flex;
                            width: 96%;
                            flex: 1 1 96%;
                        }
                        .import-product-img {
                            width: 40px;
                            height: 40px;
                            margin-right: 12px;
                            .product-image {
                                height: 100%;
                                width: 40px;
                                object-fit: scale-down;
                            }
                        }
                        .product-available-variants {
                            width: 70%;
                            .product-title {
                                font-weight: 400;
                                font-size: 12px;
                                margin-bottom: 8px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                height: 16px;
                            }
                            .available-variants {
                                display: flex;
                                font-weight: 400;
                                font-size: 10px;
                                color: #363636;
                                .available {
                                    margin-right: 8px;
                                }
                                .variants {
                                    color: #ff8f3c;
                                }
                            }
                        }
                    }
                }
                .import-product-btn {
                    position: absolute;
                    bottom: 0px;
                    padding: 0px 40px 24px;
                    right: 0px;
                    left: 0px;
                    background: #ffffff;
                    border-radius: 4px;
                    .add-walldrop-product-btn {
                        cursor: pointer;
                        border: 0px;
                        width: 100%;
                        border-radius: 2px;
                        background-color: #21c693;
                        padding-top: 10px;
                        padding-bottom: 10px;
                        font-size: 14px;
                        color: #ffffff;
                        &.disabled {
                            background-color: #dbdbdb;
                            color: rgba(0, 0, 0, 0.65);
                            cursor: not-allowed;
                        }
                    }
                }
            }
        }
        
        .inventories-modal {
            visibility: hidden;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            z-index: 10;
            background: rgba(0, 0, 0, 0.5);
            width: 100%;
            display: flex;
            &.active {
                visibility: visible;
            }
        }

        .walldrop-live-list {
            .row>div {
                margin-bottom: 0px;
            }
            position: relative;
            width: 100%;
            .walldrop-list {
                // height: ~"calc(100vh - 120px)";
                display: flex;
                flex-direction: column;
                width: 100%;
                height: 100%;
            }
            .add-product-search {
                padding: 24px 32px;
                display: flex;
                justify-content: flex-end;
                background: #ffffff;
                padding-bottom: 20px;
                position: sticky;
                top: 0px;
                z-index: 9;
                .add-product-search-list {
                    display: flex;
                    .walldrop-add-product-btn {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                    span {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 2px;
                        min-width: 24px;
                        min-height: 24px;
                        font-size: 12px;
                        font-weight: normal;
                        line-height: 1.5;
                        letter-spacing: 0.12px;
                        color: #000000;
                        background-color: #ffffff;
                        border-radius: 2px;
                        border: 1px solid #dbdbdb;
                        cursor: pointer;
                        margin: auto 0;
                        
                        &:not(:last-child) {
                            margin-left: 8px;
                            margin-right: 5px;
                        }
        
                        .left-arrow {
                            transform: scale(-1);
                        }
                    }
                }
                .facbook-not-working-info {
                    color: #F62369;
                    margin: auto;
                }
            }
            .list-of-walldrop-products {
                position: relative;
                .list-of-walldrop-products-head {
                    height: 45px;
                    background-color: #f8f8f8;
                    border-bottom: 1px solid #e1dfea;
                    position: sticky;
                    top: 54px;
                    z-index: 9;
                    .walldrop-products-header {
                        height: 45px;
                        display: flex;
                    }
                    .walldrop-products-header-title {
                        font-size: 14px;
                        margin: auto;
                        margin-left: 0px;
                    }
                    .d-flex {
                        display: flex;
                        justify-content: space-between;
                        margin: auto;
                        width: 100%;
                        position: relative;
                        img  {
                            cursor: pointer;
                            margin: auto;
                            margin-right: 0px;
                        }
                        .option {
                            visibility: hidden;
                            cursor: pointer;
                            width: 120px;
                            position: absolute;
                            background: #ffffff;
                            right: 16px;
                            top: 8px;
                            border-radius: 4px;
                            padding: 8px;
                            font-size: 12px;
                            text-align: center;
                            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
                            z-index: 1;
                            &:hover {
                                background-color: #f4f4f4;
                            }
                        }
                    }
                }
                .list-of-walldrop-products-body {
                    overflow-y: scroll;
                    height: ~"calc(100vh - 320px)";
                    -ms-overflow-style: none;
                    scrollbar-width: none;
                    &::-webkit-scrollbar {
                        display: none;
                    }
                    .row {
                        height: 64px;
                        background-color: #ffffff;
                        border-bottom: 1px solid #e1dfea;
                    }
                    .walldrop-products-body {
                        height: 64px;
                        display: flex;
                        font-size: 12px;
                        .margin-auto {
                            margin: auto;
                        }
                        .walldrop-products-id {
                            margin-left: 0px;
                        }
                        .walldrop-products-image {
                            width: 48px;
                            height: 48px;
                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: scale-down;
                            }
                        }
                        .walldrop-products-product-title {
                            margin-left: 0px;
                            .title {
                                padding-bottom: 4px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                width: 250px;
                            }
                            .variant-list {
                                cursor: pointer;
                                color: rgba(0, 0, 0, 0.4);
                            }
                        }
                        .walldrop-products-posted-date {
                            display: flex;
                            justify-content: space-between;
                            margin: auto;
                            width: 100%;
                            position: relative;
                            img {
                                cursor: pointer;
                                margin: auto;
                                margin-right: 0px;
                            }
                            .option {
                                visibility: hidden;
                                cursor: pointer;
                                width: 120px;
                                position: absolute;
                                background: #ffffff;
                                right: 16px;
                                top: 8px;
                                border-radius: 4px;
                                font-size: 10px;
                                text-align: center;
                                z-index: 1;
                                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
                                div, a {
                                    color: #000000;
                                    padding: 8px;
                                    border-radius: 4px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    &:hover {
                                        text-decoration: none;
                                        background-color: #f4f4f4;
                                    }
                                }
                                &.active {
                                    visibility: visible;
                                }
                            }
                        }
                    }
                }
                input[type=checkbox] {
                    height: 20px;
                    width: 20px;
                    margin: auto;
                    margin-left: 0px;
                    border: 1.5px solid #acacac;
                    border-radius: 2.3px;
                }
            }
            .list-of-walldrops-products-card {
                padding: 0px 32px 24px;
                overflow-y: auto;
                &:hover::-webkit-scrollbar-thumb {
                    display: block;
                }
                .box-shadow {
                    cursor: pointer;
                    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08);
                    border-radius: 4px;
                    margin-bottom: 12px;
                    padding: 12px 0px;
                    &:hover {
                        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
                    }
                    .id-status-walldrops {
                        height: 48px;
                        display: flex;
                        justify-content: space-between;
                        flex-direction: column;
                        .id-walldrops {
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            font-size: 14px;
                        }
                        .status {
                            font-size: 12px;
                            display: flex;
                            .status-text {
                                color: #9b9b9b;
                                margin-right: 4px;
                            }
                            .posted {
                                color: #333333;
                            }
                            .pending {
                                color: #ffae5d;
                            }
                        }
                    }
                    .image-title-walldrops {
                        display: flex;
                        .products-image-walldrops {
                            width: 48px;
                            height: 48px;
                            margin-right: 8px;
                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: scale-down;
                            }
                        }
                        .products-product-title-walldrops {
                            width: 75%;
                            display: flex;
                            justify-content: space-between;
                            flex-direction: column;
                            .title {
                                font-size: 14px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                            .variant-list {
                                font-size: 12px;
                                cursor: pointer;
                                color: rgba(0, 0, 0, 0.4);
                            }
                        }
                    }
                    .edit-view-walldrops {
                        height: 48px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        .edit-walldrops {
                            cursor: pointer;
                            padding: 8px 24px;
                            border-radius: 8px;
                            background-color: #fff7f4;
                            color: #ffae5d;
                            font-size: 12px;
                        }
                        .view-walldrops {
                            cursor: pointer;
                            padding: 8px 24px;
                            border-radius: 8px;
                            background-color: rgba(240, 239, 248, 0.5);
                            font-size: 12px;
                            color: #716f83;
                            text-decoration: none;
                            &:hover {
                                text-decoration: none;
                            }
                        }
                    }
                }
            }
        }
    
        .walldrop-add-product-btn {
            color: #FFFFFF;
            background-color: #F62369;
            border: 0px;
            font-size: 12px;
            font-weight: bold;
            line-height: 1.2;
            letter-spacing: 0.28px;
            padding: 10px 18px;
            border-radius: 4px;
            outline: 0 none;
        }
    
        // common css ends
        
        .initial-screen {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            overflow-y: scroll;
    
            img {
                width: 176px;
                height: 216px;
                object-fit: cover;
                margin: 0 auto 32px;
            }
        
            .black-btn {
                margin: 0 0 8px;
            }
        
            p {
                max-width: 392px;
                text-align: center;
                font-size: 12px;
                font-weight: normal;
                line-height: 1.5;
                letter-spacing: 0.12px;
                margin-bottom: 0;
            }

            .create-product-drop-btn {
                border: 0px;
                border-radius: 4px;
                color: #fff;
                background-color: #F62369;
                padding: 12px 16px;
                margin: 0px 0px 8px;
            }

            .facbook-not-working-info-empty-state {
                margin-top: 8px;
                color: #F62369;
            }
        }
        .disable-add-product-btn {
            // color: #FFFFFF;
            // background-color: #787878 !important;
            // border-color: #787878 !important;
            opacity: 0.5;
            cursor: not-allowed !important;
        }
    }
    
    .new-walldrops-setup {
        height: ~"calc(100vh - 88px)";
        .walldrop-back-navigation-bar {
            background-color: #ffffff;
            display: flex;
            align-items: center;
            padding: 12px 24px;
            z-index: 9;
            position: sticky;
            top: 84px;
            border-radius: 4px;
            .back-arrow {
                color: #000000;
                font-size: 14px;
                font-weight: normal;
                line-height: 0.86;
                letter-spacing: 0.28px;
                cursor: pointer;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                i {
                  display: inline-block;
                  transform: scaleX(-1);
                  font-size: 16px;
                  vertical-align: -2px;
                  margin-right: 2px;
                }
            }
        }
        .walldrop-setup-container {
            margin-top: 24px;
            position: relative;
            border-radius: 4px;
        
            :focus, :active:focus {
                outline: 0 none;
            }
        
            button, html, input, select, textarea {
                font-family: 'Poppins', serif !important;
            }

            .streaming-type-popup-model {
                display: none;
                position: absolute;
                top: 0px;
                right: 0px;
                left: 0px;
                bottom: 0px;
                background: rgba(0, 0, 0, 0.25);
                z-index: 9;
                &.active {
                    display: flex;
                }
                .streaming-type-popup-model-card {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin: auto;
                    height: 100%; 
                    .streaming-type-popup-card-view {
                        position: relative;
                        width: 350px;
                        height: auto;
                        background: #ffffff;
                        border-radius: 8px;
                        padding: 32px 28px;
                        .text-content {
                            text-align: center;
                            .streaming-type-title {
                                font-weight: 500;
                                font-size: 16px;
                                line-height: 22px;
                                margin-bottom: 8px;
                            }
                            .streaming-type-sub-title {
                                font-size: 14px;
                                line-height: 22px;
                                margin-bottom: 32px;
                            }
                            .streaming-type-btn {
                                .streaming-type-cancel-btn {
                                    padding: 8px 12px;
                                    background: #FFFFFF;
                                    border: 1px solid #ADADAD;
                                    border-radius: 4px;
                                    font-weight: 600;
                                    font-size: 14px;
                                    line-height: 20px;
                                    margin-right: 12px;
                                }
                                .streaming-type-submit-btn {
                                    padding: 8px 12px;
                                    background: #FD3232;
                                    border-radius: 4px;
                                    font-weight: 600;
                                    font-size: 14px;
                                    line-height: 20px;
                                    border: 1px solid #FD3232;
                                    color: #fff;
                                }
                            }
                        }
                    }
                }
            }
        
            .facebook-overlay {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 100%;
            }
            .loginBtn {
                box-sizing: border-box;
                position: relative;
                margin: 0.2em;
                padding: 0 15px 0 46px;
                border: none;
                text-align: left;
                line-height: 34px;
                white-space: nowrap;
                border-radius: 0.2em;
                font-size: 16px;
                color: #FFF;
            }
            .loginBtn:before {
                content: "";
                box-sizing: border-box;
                position: absolute;
                top: 0;
                left: 0;
                width: 34px;
                height: 100%;
            }
            .loginBtn:focus {
                outline: none;
            }
            .loginBtn:active {
                box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
            }
            .loginBtn--facebook {
                background-color: #4C69BA;
                background-image: linear-gradient(#4C69BA, #3B55A0);
                text-shadow: 0 -1px 0 #354C8C;
            }
            .loginBtn--facebook:before {
                border-right: #364e92 1px solid;
                background: url('/img/web_app/live_video/facebook.svg') 10px 5px no-repeat;
            }
            .loginBtn--facebook:hover, .loginBtn--facebook:focus {
                background-color: #5B7BD5;
                background-image: linear-gradient(#5B7BD5, #4864B1);
            }
        
            .facebook-not-login {
                position: absolute;
                top: 0px;
                bottom: 0px;
                right: 0px;
                left: 0px;
                width: 100%;
                z-index: 5;
                background: rgba(0, 0, 0, 0.3);
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 4px;
                &.inactive {
                    display: none;
                }
                .facebook-login-card {
                    position: relative;
                    width: 350px;
                    height: 50%;
                    background-color: #fff;
                    border-radius: 4px;
                    padding: 32px;
                    .facebook-login-main-content {
                        text-align: center;
                        position: absolute;
                        top: 0px;
                        right: 0px;
                        left: 0px;
                        bottom: 76px;
                        padding: 32px;
                        padding-bottom: 0px;
                        overflow-y: scroll;
                        -ms-overflow-style: none;
                        scrollbar-width: none;
                        &::-webkit-scrollbar {
                            display: none;
                        }
                        .fb-login-header {
                            font-size: 14px;
                            margin-bottom: 12px;
                        }
                        .fb-login-body {
                            font-size: 12px;
                        }
                        .icon {
                            width: 64px;
                            height: 64px;
                            background-color: #000;
                            margin: auto;
                            margin-bottom: 8px;
                            border-radius: 100%;
                            .walldrops-icon {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                font-size: 32px;
                                color: #fff;
                                width: 64px;
                                height: 64px;
                            }
                        }
                    }
                    .facebook-login-btn {
                        position: absolute;
                        bottom: 0px;
                        right: 0px;
                        left: 0px;
                        padding: 8px 32px 24px;
                        background-color: #fff;
                        border-radius: 4px;
                        button {
                            padding: 8px;
                            background-color: #2692F5;
                            border-radius: 4px;
                            border: 0px;
                            color: #fff;
                            font-size: 14px;
                            width: 100%;
                        }
                    }
                } 
            }
            .facebook-preview-text-log-out {
                position: sticky;
                top: 0px;
                z-index: 1;
                section {
                    position: absolute;
                    top: -24px;
                    background: #ffffff;
                    right: 0px;
                    left: 0px;
                    display: flex;
                    padding-top: 24px;
                    padding-bottom: 8px;
                    justify-content: space-between;
                    align-items: center;
                }
                button {
                    display: none;
                    margin: 0px;
                    font-size: 12px;
                    line-height: 30px;
                    padding: 0 8px 0 40px;
                }
            }
            .walldrop-after-fb-setup {
                border-radius: 4px;
                box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
                background: #ffffff;
                width: 100%;
                position: relative;
                .selectFBOption {
                    padding: 24px 32px 32px 24px;
                    padding-bottom: 71px;
                    height: ~"calc(100vh - 170px)";
                    overflow-y: scroll;
                    -ms-overflow-style: none;
                    scrollbar-width: none;
                    input, select, textarea {
                        font-family: 'Poppins', serif !important;
                    }
                    &::-webkit-scrollbar {
                        display: none;
                    }
                    .title {
                        font-size: 12px;
                        margin-bottom: 8px;
                    }
                    .select-fb-option {
                        margin-bottom: 24px;
                    }
                    .select-drop-down {
                        .group-precautions {
                            border-radius: 4px;
                            border: solid 1px #78A2CC;
                            background-color: rgba(120, 162, 204, 0.25);
                            margin-bottom: 24px;
                            padding: 16px;
                            ul {
                                padding-left: 16px;
                                li {
                                    text-align: justify;
                                    font-size: 12px;
                                    padding-bottom: 8px;
                                    letter-spacing: 0.5px;
                                    &:last-child {
                                        padding-bottom: 0px;
                                    }
                                }
                            }
                        }
                        .group-precautions-new {
                            border-radius: 4px;
                            background: #EDF5FD;
                            margin-bottom: 24px;
                            padding: 16px;
                            width: 80%;
                            ul {
                                padding-left: 16px;
                                li {
                                    text-align: justify;
                                    font-size: 12px;
                                    padding-bottom: 8px;
                                    letter-spacing: 0.5px;
                                    &:last-child {
                                        padding-bottom: 0px;
                                    }
                                }
                            }
                        }
                        .select-facebook-title-option {
                            margin-bottom: 24px;
                        }
                        .select-facebook-title {
                            font-size: 12px;
                            margin-bottom: 8px;
                        }
                        .select-option-icon {
                            position: relative;
                            width: 80%;
                            &::before {
                                content: '\f078';
                                font: normal normal normal 12px/1 FontAwesome;
                                color: #000000;
                                right: 12px;
                                height: 100%;
                                padding: 15px 0px;
                                position: absolute;
                                pointer-events: none;
                            }
                            .diableOption {
                                position: absolute;
                                z-index: 0;
                                background: rgba(0, 0, 0, 0.10);
                                content: "";
                                top: 0px;
                                bottom: 0px;
                                right: 0px;
                                left: 0px;
                                border-radius: 4px;
                            }
                            .error-text {
                                color: #ff0000;
                                font-size: 12px;
                                position: absolute;
                            }
                        }
                        .checkbox-section {
                            margin-top: 16px;
                            display: flex;
                            align-items: center;
                            &.gray-text {
                                input[type=checkbox] {
                                    border: 1px solid #787878 !important;
                                }
                            }
                            input {
                                margin: 0;
                                margin-right: 8px;
                            }
                            input[type=checkbox] {
                                cursor: pointer;
                                -webkit-appearance: none;
                                -moz-appearance: none;
                                appearance: none;
                                outline: 0;
                                background: #fff;
                                height: 20px;
                                width: 20px;
                                border-radius: 4px;
                                border: 1px solid #000;
                                &:checked {
                                    border: 1px solid #F62369;
                                    background-color: #F62369;
                                    &::after {
                                        display: block;
                                    }
                                }
                                &::after {
                                    content: '';
                                    position: relative;
                                    left: 30%;
                                    top: 10%;
                                    width: 35%;
                                    height: 70%;
                                    border: solid #fff;
                                    border-width: 0 2px 2px 0;
                                    transform: rotate(45deg);
                                    display: none;
                                }
                                &:disabled {
                                    &::after {
                                        border-color: #fff;
                                    }
                                }
                            }
                            &:first-child {
                                margin-right: 16px;
                            }
                        }
                        .select-option {
                            appearance: none;
                            width: 100%;
                            border: solid 1px #d9d9d9;
                            background: #ffffffff;
                            border-radius: 4px;
                            padding: 12px 16px;
                            font-size: 12px;
                            &:focus-visible {
                                outline: 0px;
                            }
                        }
                    }
                    .selectFBOption-radio-btn {
                        display: flex;
                        margin-top: 8px;
                    }
                    .streaming-type {
                        margin-bottom: 24px;
                        .streaming-type-flex {
                            margin-bottom: 8px;
                        }
                        .streaming-type-toggle {
                            display: flex;
                            .title {
                                margin-bottom: 0px;
                            }
                            .switch-outer {
                                margin: auto 0;
                                margin-left: 16px;
                                .switch {
                                    width: 24px;
                                    height: 14px;
                                    margin-bottom: 0;
                                    .active + .slider {
                                        background: #40d08b;
                                        &:before {
                                            transform: translateX(10) !important;
                                            -webkit-transform: translateX(10px) !important;
                                            -ms-transform: translateX(10px) !important;
                                        }
                                    }
                                    .ng-not-empty + .slider {
                                        &:before {
                                            transform: translateX(0);
                                            -webkit-transform: translateX(0);
                                            -ms-transform: translateX(0);
                                        }
                                    }
                                    .disable + .slider {
                                        &:before {
                                            transform: translateX(0);
                                            -webkit-transform: translateX(0);
                                            -ms-transform: translateX(0);
                                        }
                                    }
                                    .slider {
                                        background: rgba(0, 0, 0, 0.4);
                                        &:before {
                                            width: 8px;
                                            height: 8px;
                                            top: 50%;
                                            margin-top: -4px;
                                            left: 3px;
                                            background-color: #FFFFFF;
                                        }
                                    }
                                }
                            }
                            .streaming-type-show-card {
                                display: flex;
                                position: relative;
                                &.active {
                                    .switch-outer {
                                        cursor: not-allowed;
                                        opacity: 0.5;
                                        .switch .slider {
                                            cursor: not-allowed;
                                        }
                                    }
                                }
                            }
                        }
                        .time-stamp {
                            width: 50%;
                            margin-top: 16px;
                            input {
                                border-radius: 4px;
                                border: solid 1px #d9d9d9;
                                padding: 8px;
                                font-size: 14px;
                                color: #262626;
                                width: 100%;
                                background: #fff;
                                &::-webkit-datetime-edit-ampm-field {
                                    display: none;
                                }
                            }
                            .time-stamp-title {
                                display:flex;
                                justify-content: space-between;
                                .sub-title {
                                    text-align: center;
                                    width: 100%;
                                }
                            }
                            .time-stamp-select-option {
                                display: flex;
                                justify-content: space-between;
                                .select-option-with-icon {
                                    position: relative;
                                    width: 100%;
                                    .select-option {
                                        appearance: none;
                                        border: solid 1px #d9d9d9;
                                        padding: 8px;
                                        font-size: 14px;
                                        color: #262626;
                                        width: 100%;
                                        &.first-child {
                                            border-radius: 4px 0px 0px 4px;
                                            border-right: 0px;
                                        }
                                        &.last-child {
                                            border-radius: 0px 4px 4px 0px;
                                            border-left: 0px;
                                        }
                                    }
                                    .text-with-icon {
                                        display: flex;
                                        position: absolute;
                                        top: 50%;
                                        right: 8px;
                                        line-height: 1;
                                        div {
                                            margin-top: -7px;
                                        }
                                        .vajro-chevron-down {
                                            margin-left: 4px;
                                            font-size: 10px;
                                            margin-top: -5px;
                                        }
                                    }
                                }
                                .colon {
                                    border: solid 1px #d9d9d9;
                                    padding: 4px 8px;
                                    font-size: 18px;
                                    color: #262626;
                                    border-right: 0px;
                                    border-left: 0px;
                                }
                            }
                        }

                        .streaming-type-tooltip {
                            position: relative;
                            display: inline-block;
                            margin: auto;
                            margin-left: 8px;
                            cursor: pointer;
                            .streaming-type-tooltip-icon {
                                display: flex;
                                &:hover {
                                    svg {
                                        path {
                                            stroke: #F62369;
                                        }
                                    }
                                }
                            }
                            .streaming-type-tooltip-text {
                                visibility: hidden;
                                width: 300px;
                                background-color: #FFFFFF;;
                                color: #001E3E;
                                border-radius: 4px;
                                padding: 4px 8px;
                                position: absolute;
                                z-index: 1;
                                top: 150%;
                                left: 50%;
                                margin-left: -30px;
                                box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
                                font-size: 11px;
                                line-height: 18px;
                                &::after {
                                    content: "";
                                    position: absolute;
                                    bottom: 100%;
                                    left: 10%;
                                    margin-left: -5px;
                                    border-width: 5px;
                                    border-style: solid;
                                    border-color: transparent transparent #FFFFFF transparent;
                                }
                                .streaming-type-title {
                                    font-weight: 600;
                                    padding-bottom: 4px;
                                }
                                ol {
                                    padding-left: 16px;
                                    margin-bottom: 0px;
                                }
                                .streaming-type-link {
                                    margin-top: 12px;
                                    a {
                                        color: #F62369;
                                        &:hover {
                                            text-decoration: none;
                                        }
                                    }
                                }
                            }
                        }
                        .streaming-type-tooltip:hover .streaming-type-tooltip-text {
                            visibility: visible;
                        }
                    }
                    md-radio-button {
                        margin-bottom: 0px;
                        .md-label {
                            margin-left: 20px;
                            font-size: 14px !important;
                        }
                        .md-off {
                            border-width: 1px;
                        }
                        &:first-child {
                            padding-right: 16px;
                        }
                    }
                    md-radio-button .md-off, md-radio-button .md-on, md-radio-button .md-container {
                        height: 14px;
                        width: 14px;
                    }
                    md-radio-button.md-default-theme .md-on, md-radio-button .md-on {
                        background: #000;
                    }
        
                    md-radio-button[disabled].md-checked .md-off, md-radio-button[disabled].md-default-theme .md-off, md-radio-button[disabled] .md-off {
                        border-color: rgba(0,0,0,0.38);
                    }
        
                    md-radio-button.md-checked .md-off, md-radio-button.md-default-theme .md-off, md-radio-button .md-off {
                        border-color: #000;
                    }
                    .facebook-preview {
                        margin: auto;
                        font-size: 12px;
                        color: #1c1e21;
                        line-height: 1.34;
                        display: flex;
                        flex-direction: column;
                        padding: 8px;
                        padding-top: 32px;
                        .facebook-preview-sticky {
                            border-radius: 8px;
                            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
                            .facebook-preview-header {
                                padding: 12px 16px 0px;
                                margin-bottom: 12px;
                                display: flex;
                                justify-content: space-between;
                                .fb-user-info {
                                    display: flex;
                                    img {
                                        height: 35px;
                                        width: 35px;
                                        border-radius: 100%;
                                        margin-right: 8px;
                                    }
                                    .userName-time {
                                        cursor: pointer;
                                        .time {
                                            color: rgb(101, 103, 107);
                                            .dot {
                                                line-height: 1.2308;
                                            }
                                            img {
                                                width: 12px; 
                                                height: 12px;
                                                margin-right: 0px;
                                            }
                                        }
                                    }
                                }
                                .more-icon {
                                    margin: auto 0px;
                                    width: 4%;
                                    img {
                                        transform: rotate(90deg);
                                    }
                                }
                            }
                            .facebook-preview-body {
                                font-size: 12px;
                                color: rgb(5, 5, 5);
                                .facebook-preview-body-content {
                                    padding: 4px 16px 16px;
                                    line-height: 24px;
                                    .walldrop-post-message {
                                        white-space: pre-line;
                                    }
                                    .walldrop-post-message-option {
                                        display: block;
                                        white-space: inherit;
                                        span {
                                            white-space: inherit;
                                        }
                                    }
                                }
                                .product-image {
                                    width: 100%;
                                    height: 250px;
                                    img {
                                        width: 100%;
                                        height: 100%;
                                        object-fit: scale-down;
                                    }
                                }
                            }
                            .comment-seen {
                                .user-comment-seen {
                                    margin: 0px 16px;
                                    padding: 10px 0px;
                                    display: flex;
                                    justify-content: flex-end;
                                    align-items: center;
                                    color: rgb(101, 103, 107);
                                    font-size: 0.9375rem;
                                }
                                .like-comment-share {
                                    margin: 0px 12px;
                                    padding: 4px;
                                    .d-flex {
                                        display: flex;
                                    }
                                    .border-top-bottom {
                                        cursor: pointer;
                                        justify-content: space-around;
                                        border-top: 1px solid rgb(101, 103, 107);
                                        border-bottom: 1px solid rgb(101, 103, 107);
                                    }
                                    .fb-like, .fb-comment, .fb-share {
                                        height: 44px;
                                        justify-content: center;
                                        padding: 0px 16px;
                                        align-items: center;
                                        color: rgb(101, 103, 107);
                                        img {
                                            height: 24px;
                                            width: 24px;
                                            padding: 4px;
                                        }
                                        span {
                                            padding: 4px;
                                        }
                                    }
                                }
                            }
                            .client-comment-area {
                                display: flex;
                                padding: 4px 16px;
                                font-size: 12px;
                                color: rgb(28, 30, 33);
                                margin-bottom: 4px;
                                img {
                                    height: 32px;
                                    width: 32px;
                                    border-radius: 100%;
                                    margin-right: 8px;
                                }
                                input {
                                    padding: 8px 12px;
                                    width: 100%;
                                    border: 0px;
                                    border-radius: 18px;
                                    color: rgb(28, 30, 33);
                                    font-size: 12px;
                                    background: rgb(240, 242, 245);
                                }
                            }
                        }
                    }
                }
                .walldrop-post-message {
                    textarea {
                        resize: none;
                        height: 124px;
                        border-radius: 4px;
                        border: solid 1px #d9d9d9;
                        width: 80%;
                        padding: 8px;
                        font-size: 12px;
                    }
                    .textbox-count {
                        font-size: 10px;
                        padding-top: 4px;
                        width: 80%;
                        color: #716f83;
                        display: flex;
                        justify-content: flex-end;
                    }
                }
                .walldrop-setup-cancel-submit {
                    background: #ffffff;
                    display: flex;
                    justify-content: flex-end;
                    font-size: 12px;
                    padding: 16px 24px;
                    position: absolute;
                    bottom: 0px;
                    right: 0px;
                    left: 0px;
                    border-radius: 0px 0px 4px 4px;
                    .cancel-btn {
                        background: #ffffff;
                        padding: 10px 24px;
                        border-radius: 4px;
                        border: solid 1px #000;
                        margin-right: 8px;
                        color: #000;
                        cursor: pointer;
                        &.disable-submit-btn {
                            cursor: not-allowed;
                        }
                    }
                    .submit-btn {
                        color: #ffffff;
                        padding: 10px 18px;
                        border-radius: 4px;
                        background-color: #F62369;
                        border: solid 1px #F62369;
                        cursor: pointer;
                        &.disable-submit-btn {
                            cursor: not-allowed;
                        }
                    }
                }
            }
        
            .walldrop-modal {
                visibility: hidden;
                position: absolute;
                top: 0px;
                bottom: 0px;
                right: 0px;
                left: 0px;
                width: 100%;
                // height: ~"calc(100vh - 150px)";
                z-index: 9;
                background: rgba(0, 0, 0, 0.5);
                display: flex;
                border-radius: 4px;
                &.active {
                    visibility: visible;
                }
                .pdg-content {
                    position: relative;
                    width: 30%;
                    height: 80%;
                    margin: auto;
                    background-color: #ffffff;
                    overflow: hidden;
                    border-radius: 4px;
                    .pdg-content-header {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: end;
                        padding: 12px 16px;
                        min-height: 48px;
                        position: absolute;
                        top: 0;
                        left: 0;
        
                        .close-arrow {
                            color: #000000;
                            font-size: 14px;
                            font-weight: 500;
                            line-height: 1.2;
                            letter-spacing: 0.28px;
                            cursor: pointer;
                            i {
                                font-size: 16px;
                                vertical-align: text-top;
                                margin-right: 8px;
                            }
                        }
        
                        &.flex-end {
                            justify-content: flex-end;
                        }
                    }
        
                    .pdg-content-body {
                        color: #000000;
                        width: 100%;
                        padding: 16px 24px;
                        position: absolute;
                        top: 48px;
                        left: 0;
                        bottom: 64px;
                        overflow-y: scroll;
                        animation: 0.5s ease 0s 1 normal none running slideInRight;
                        -ms-overflow-style: none;
                        scrollbar-width: none;
                        &::-webkit-scrollbar {
                            display: none;
                        }
        
                        .tick-mark {
                            color: #FFFFFF;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 184px;
                            height: 184px;
                            border-radius: 100%;
                            background-color: #26bf8c;
                            border: 16px solid #26bf8c;
                            box-shadow: inset 0 0 0 16px #ffffff;
                            margin: 0 auto 16px;
            
                            i {
                                font-size: 64px;
                            }
                        }
        
                        p {
                            text-align: center;
                        }
                    }
        
                    .pdg-content-footer {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 10px 24px 16px;
                        min-height: 64px;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        background-color: #fff;
                        .view-facebook-post-btn {
                            width: 100%;
                            text-align: center;
                            background: #000;
                            height: 38px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            color: #fff;
                            border-radius: 4px;
                            &:hover {
                                text-decoration: none;
                            }
                        }
                    }
                }
            }

            .walldrop-modal-safari-issue {
                visibility: hidden;
                position: absolute;
                top: 0px;
                bottom: 0px;
                right: 0px;
                left: 0px;
                width: 100%;
                // height: ~"calc(100vh - 150px)";
                z-index: 9;
                background: rgba(0, 0, 0, 0.5);
                display: flex;
                &.active {
                    visibility: visible;
                }
                .walldrop-modal-safari-issue-content {
                    position: relative;
                    display: flex;
                    justify-self: center;
                    align-items: center;
                    width: 400px;
                    margin: auto;
                    .walldrop-modal-safari-issue-content-body {
                        background-color: #ffffff;
                        position: relative;
                        color: #000000;
                        width: 100%;
                        padding: 24px;
                        border-radius: 4px;
                        height: auto;
                        text-align: center;
                        .close-btn {
                            position: absolute;
                            top: 16px;
                            right: 16px;
                            .close-arrow {
                                color: #000000;
                                font-size: 14px;
                                font-weight: 500;
                                line-height: 1.2;
                                letter-spacing: 0.28px;
                                cursor: pointer;
                                i {
                                    font-size: 16px;
                                    vertical-align: text-top;
                                }
                            }
                        }
                        .main-title {
                            font-size: 24px;
                            font-weight: 600;
                            padding-bottom: 16px;
                        }
                        .sub-title {
                            margin-top: 8px;
                            font-size: 12px;
                            font-weight: 500;
                        }
                        .browers-icon {
                            margin-top: 24px;
                            display: flex;
                            align-items: center;
                            justify-content: space-around;
                            img {
                                height: 56px;
                            }
                        }
                    }
                }
            }

            .loader-container {
                z-index: 9;
                position: absolute;
                top: 0;
                bottom: 0;
                right: 0;
                left: 0;
                background: rgba(0, 0, 0, 0.2);
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
                width: 100%;
                margin: auto;
                border-radius: 4px;
            }
        } 
    }
}
.bottom-alert-bar {
    color: rgba(255, 255, 255, 0.6);
    background-color: rgba(44,47,66,.9);
    padding: 12px 16px;
    width: 100%;
    min-height: 64px;
    text-align: left;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    bottom: -72px;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease-out;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    border-radius: 0;
    box-shadow: 0 2px 20px 0 rgba(0,0,0,.2);
    z-index: 3;

    @media(min-width: 768px) {
        width: auto;
        bottom: -72px;
        text-align: center;
        border-radius: 8px;
    }

    &.slide-up {
        opacity: 1;
        visibility: visible;
        bottom: 48px;
    }

    .bottom-alert-content {
        display: flex;
        align-items: center;

        p {
            margin: 0 24px 0 0;
        }
    
        .btn {
            border-radius: 3px;
            background-color: #49ce9d;
            border-color: #49ce9d;
        }
    }

}
.bottom-bar-editor {
  color: #000000;
  background-color: #ffffff;
  font-family: @vajro-font;
  margin-top: 0px;

  p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.32px;
    margin-bottom: 16px;

    &.heading {
      font-size: 18px;
      font-weight: 600;
      line-height: 1.06;
      letter-spacing: 0.36px;
      margin-bottom: 24px;
    }
  }

  .text-with-switch {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    place-content: space-between;
    background-color:#f4f4f4;
    padding: 10px 20px;
    border-radius: 4px;
    color: #000000;
    font-family: @vajro-font;
    margin-top: 0px;
    font-size: 16px;

    .switch-outer-bottom-bar {  
      display: flex;
      margin-left: auto;
      
      .switch {
          position: relative;
          display: inline-block;
          width: 40px;
          height: 24px;
          margin-bottom: 0;
    
          input {
              display: none;
      
              &.active + .slider {
                  background-color: #40d08b;
                  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
      
                  &:before {
                      -webkit-transform: translateX(18px);
                      -ms-transform: translateX(18px);
                      transform: translateX(18px);
                      background-color: #ffffff;
                  }
              }
          }
    
          .slider {
              position: absolute;
              cursor: pointer;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background: #889198;
              transition: 0.4s;
              -webkit-transition: 0.4s;
      
              &:before {
                  content: "";
                  height: 14px;
                  width: 14px;
                  position: absolute;
                  top: 50%;
                  margin-top: -7px;
                  left: 4px;
                  background-color: white;
                  transition: 0.4s;
                  -webkit-transition: 0.4s;
              }
  
              /* Rounded sliders */
              &.round {
                  border-radius: 34px;
              }
      
              &.round:before {
                  border-radius: 50%;
              }
          }
      }
    }
  }

  .bottom-bar-editor-col {
    .left-col,
    .right-col {
      width: 50%;
    }

    .left-col {
      padding-right: 80px;
    }

    .right-col {
      .preview-iphone-frame {
        width: 250px;
        margin: 0 auto 0 0;

        .preview-iphone-framecontent {
          &.show-preview_footer {
            .preview_body {
              bottom: 56px;
            }
          }

          .preview_footer {
            min-height: 56px;
            padding: 0;

            .bottom-bar-list {
              position: relative;
              width: 100%;
              height: 56px;
              padding: 4px 12px;
              display: flex;
              align-items: center;
              overflow: hidden;

              .bar-list {
                position: relative;
                flex: 1 1 100%;

                &:active:before {
                  padding-top: 0;
                  padding-left: 0;
                  opacity: 1;
                  transition: 0s;
                }

                &:before {
                  content: "";
                  background: rgba(0, 0, 0, 0.5);
                  display: block;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  border-radius: 50%;
                  padding-top: 200%;
                  padding-left: 200%;
                  opacity: 0;
                  transition: all 0.6s ease;
                }

                input {
                  display: none;
                  .right-col {
                    .preview-iphone-frame {
                      width: 250px;
                      margin: 0 auto 0 0;

                      &:checked ~ label {
                        i {
                          color: #ffffff;
                        }

                        span {
                          opacity: 1;
                          -webkit-transform: translateY(0);
                          transform: translateY(0);
                          height: auto;
                        }
                      }
                    }

                    label {
                      position: relative;
                      display: flex;
                      flex-wrap: nowrap;
                      flex-direction: column;
                      align-items: center;
                      justify-content: center;
                      color: #ffffff;
                      font-size: 10px;
                      font-weight: normal;
                      text-align: center;
                      min-width: 100%;
                      max-width: 100%;
                      height: 56px;
                      padding: 0;
                      margin: 0;
                      z-index: 1;
                      cursor: pointer;

                      i,
                      span {
                        -webkit-transition: all 0.4s ease;
                        transition: all 0.4s ease;
                      }

                      i {
                        color: rgba(255, 255, 255, 0.6);
                        display: inline-block;
                        font-size: 16px;
                      }

                      span {
                        height: 0;
                        display: block;
                        font-weight: 500;
                        margin-top: 4px;
                        opacity: 0;
                        -webkit-transform: translateY(16px);
                        transform: translateY(16px);
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.branding-stickers {
  display: flex;
  background-color: transparent;
  height: 100%;

  // common css starts
  .row {
    & > div {
      margin-bottom: 0;
    }

    [class*="col-"] {
      padding: 0 12px;
    }

    &.no-gutter-spacing {
      margin: 0 -12px !important;
    }
  }

  :focus,
  :active:focus {
    outline: 0 none;
  }

  .form-group {
    margin: 0 0 24px;
  }

  .form-control {
    height: 40px;
    color: #000000;
    font-size: 14px;
    line-height: 1.29;
    letter-spacing: 0.28px;
    padding: 10px 16px;
    border-radius: 2px;
    border: 1px solid #dbdbdb;
    background-color: #fafafa;
    box-shadow: none;

    &::placeholder {
      color: #000000;
    }

    &:focus {
      border-color: #979797;
      background-color: #ffffff;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    }

    &[disabled],
    &[readonly] {
      cursor: not-allowed;
      border-color: #dbdbdb;
      background-color: #f4f4f4;

      &::placeholder {
        color: rgba(0, 0, 0, 0.6);
      }
    }

    &.ng-empty {
      border-color: #ff4540;
    }
  }

  .section-title {
    display: flex;
    align-items: flex-start;
    min-height: 38px;
    margin-bottom: 15px !important;

    p {
      color: #000000;
      font-size: 18px;
      font-weight: bold;
      line-height: 1;
      letter-spacing: 0.36px;
      margin-bottom: 0;
    }

    .btn-wrapper {
      display: flex;
      margin-left: auto;

      .btn {
        i {
          font-size: 16px;
          vertical-align: -2px;
          margin-right: 6px;
        }

        &:not(:last-child) {
          margin-right: 8px;
        }
      }
    }
  }

  .btn {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 0.28px;
    padding: 10px 16px;
    color: #ffffff;
    background-color: @theme-color;
    border-color: @theme-color;
    border-radius: 2px;
    margin: 0;
    outline: 0 none;

    &.btn-outline {
      color: @theme-color;
      border-color: @theme-color;
      background-color: #ffffff;
    }
  }

  // common css ends

  .left-col {
    .branding-stickers-container {
      .step-indicator-wrapper {
        display: table;
        width: 58%;
        margin-bottom: 24px;

        p {
          color: #000000;
          font-size: 14px;
          line-height: 1.5;
          letter-spacing: 0.14px;
          margin-bottom: 16px;
        }

        .step-indicator {
          width: 100%;
          display: flex;
          -webkit-box-pack: justify;
          justify-content: space-between;

          span {
            width: 49.5%;
            height: 5px;
            background-color: #dbdbdb;
            border-radius: 1px;

            &.active {
              background-color: @theme-color;
            }
          }
        }
      }

      .sticker-list {
        display: flex;
        flex-wrap: wrap;
        padding-left: 0;
        list-style: none;
        margin: 0;

        li {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 96px;
          height: 96px;
          border-radius: 3px;
          background-color: #f4f4f4;
          margin: 0 16px 16px 0;
          transition: all 0.4s ease;
          cursor: pointer;

          &:hover,
          &.active {
            background-color: #ffffff;
            border: 1px solid #000000;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
          }

          img {
            max-width: 100%;
          }
        }
      }

      .no-of-days-wrapper {
        color: #000000;
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.13;
        letter-spacing: 0.32px;
        margin-bottom: 20px;

        .no-of-days {
          color: #9d9d9d;
          display: flex;
          align-items: center;
          font-size: 14px;
          font-weight: normal;
          line-height: 1.29;
          letter-spacing: 0.28px;
          margin-left: 16px;

          .form-control {
            width: 96px;
            margin: 0 8px;
          }
        }
      }

      .heading-txt {
        color: #000000;
        font-size: 18px;
        font-weight: bold;
        line-height: 1;
        letter-spacing: 0.36px;
        margin-bottom: 16px;

        b {
          color: #dbdbdb;
        }
      }

      .grey-txt {
        color: #adadad;
        font-size: 14px;
        font-weight: normal;
        line-height: 0.86;
        letter-spacing: 0.28px;
      }

      .input-search-menu {
        height: 160px;
        font-size: 12px;
        line-height: 1.75;
        letter-spacing: 0.24px;
        padding: 0;
        margin-top: 8px;
        border-radius: 2px;
        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
        overflow: hidden;
        overflow-y: scroll;

        span {
          color: #000000;
          display: block;
          padding: 12px 20px;
          transition: background-color 0.4s;
          cursor: pointer;

          &:hover {
            background-color: #fafafa;
          }
        }

        .no-result {
          display: flex;
          align-items: center;
          justify-content: center;
          min-height: 160px;
        }
      }

      .datetimepicker {
        width: 100%;
      }
      .prod-tag-note {
        color: #adadad;
        position: absolute;
        width: 700px;
        padding: 4px;
        font-size: 12px;
      }
    }
  }

  .right-col {
    background-color: #fff;
    padding: 20px;

    .preview-stickers-sec {
      position: relative;
      height: 320px;
      border: 1px solid #dbdbdb;

      figcaption {
        position: absolute;

        &.top-left {
          top: 16px;
          left: 16px;
        }
        // DEFAULT STATES
        &.top-left {
          top: 16px;
          left: 16px;
        }
        &.bottom-left {
          bottom: 16px;
          left: 16px;
        }
        &.bottom-right {
          bottom: 16px;
          right: 16px;
        }

        img {
          width: 56px;
          height: 56px;
          object-fit: contain;
        }
      }
    }
    .preview-stickers-grey-text {
      color: #adadad;
      font-size: 14px;
      font-weight: normal;
      padding: 15px;
      letter-spacing: 0.28px;
    }
  }

  .branding-stickers-container {
    width: 100%;
    min-height: 472px;
    padding: 24px 40px 32px 24px;
    background-color: #ffffff;
    border-radius: 3px;
  }

  &.publish-branding-stickers {
    .branding-stickers-container {
      padding: 24px;

      .section-title {
        margin-bottom: 32px;
      }

      .publish-stickers-info {
        width: 100%;
        .info-wrapper {
          display: -webkit-flex;
          display: -ms-flexbox;
          display: -ms-flex;
          display: flex;
          background-color: #ffffff;
          border: solid #dbdbdb;
          border-width: 1px 1px 0;
          min-height: 72px;

          &:first-child {
            background-color: #fafafa;
            min-height: 32px;
            border: none;

            .info {
              color: #000000;
              font-size: 14px;
              font-weight: 500;
              line-height: 1;
              letter-spacing: 0.28px;
              padding: 8px 12px;
            }
          }

          &:last-child {
            border-bottom: 1px solid #dbdbdb;
          }

          .info {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            font-size: 12px;
            font-weight: normal;
            line-height: 1;
            letter-spacing: 0.24px;
            padding: 20px 12px;

            img {
              height: 32px;
            }

            .dropdown {
              &.open {
                .btn i {
                  transform: scale(-1);
                }
              }
              .btn {
                color: #000000;
                font-size: 12px;
                font-weight: 500;
                line-height: 1;
                letter-spacing: 0.24px;
                border-radius: 20px;
                background-color: #f4f4f4;
                border-color: #f4f4f4;
                padding: 9px 16px;

                &:active {
                  box-shadow: none;
                }

                i {
                  display: inline-block;
                  font-size: 9px;
                  vertical-align: middle;
                  margin-left: 8px;
                }
              }

              .dropdown-menu {
                min-width: 168px;
                left: auto;
                right: 0;
                border-radius: 2px;
                box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
                padding: 0;
                margin: 4px 0 0;

                span {
                  display: block;
                  color: #000000;
                  font-size: 12px;
                  line-height: 1.75;
                  padding: 6px 16px;
                  cursor: pointer;

                  &:hover {
                    background-color: #f4f4f4;
                  }

                  i {
                    font-size: 16px;
                    vertical-align: -1px;
                    margin-right: 8px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .grey-text {
    color: #adadad;
  }
}

.request-sticker-modal {
  align-items: center;
  justify-content: center;
  position: absolute;
  height:100vh;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.24);
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 100ms, visibility 100ms;
  transition: opacity 100ms, visibility 100ms;

  &.in {
    display: flex;
    opacity: 1;
    visibility: visible;
    animation: fadeIn 0.1s ease-in-out;
  }

  .request-sticker-modal-inner {
    position: relative;
    width: 416px;
    height: auto;
    padding: 64px 24px 16px;
    color: #000000;
    background-color: #ffffff;

    .close-btn {
      font-size: 14px;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0.28px;
      position: absolute;
      top: 16px;
      right: 16px;
      cursor: pointer;

      i {
        font-size: 16px;
        vertical-align: text-top;
        margin-right: 8px;
      }
    }

    .heading-txt {
      font-size: 18px;
      font-weight: bold;
      line-height: 0.67;
      letter-spacing: 0.36px;
      text-align: center;
      margin-bottom: 32px;
    }

    .txt {
      font-size: 12px;
      font-weight: normal;
      line-height: 1.5;
      letter-spacing: 0.24px;
      max-width: 232px;
      text-align: center;
      margin: 0 auto 24px;
    }

    .form-control {
      height: 48px;
      border-radius: 3px;
      border: solid 1px #dbdbdb;
      background-color: #fafafa;

      &:focus {
        border-color: #979797;
        background-color: #ffffff;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
      }

      &::placeholder {
        color: #adadad;
      }
    }

    .click-to-upload-image {
      width: 100%;
      height: 96px;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 2px;
      background-color: #f4f4f4;
      border: 2px dashed #adadad;
      cursor: pointer;
      margin-bottom: 20px;

      i {
        color: #9d9d9d;
        font-size: 24px;
        margin-bottom: 16px;
      }

      p {
        color: #adadad;
        font-size: 12px;
        font-weight: normal;
        line-height: 1;
        letter-spacing: 0.24px;
        margin-bottom: 0;
      }
    }

    .btn-black {
      border-radius: 5px;
      width: 100%;
      display: block;
      margin: 0 auto;
      padding: 11px 16px;
      border-color: #adadad;
    }
    .active-request {
      color: #ffffff;
      border-color: #000000;
      background-color: #060606;
    }
  }
  .sticker-list {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    list-style: none;
    margin: 0;
    &.app-specific-list {
      display: block !important;
      overflow-x: scroll;
      max-width: 350px;
      max-height: 100px;
    }
    li {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 96px;
      height: 96px;
      border-radius: 3px;
      background-color: #f4f4f4;
      margin: 0 16px 16px 0;
      transition: all 0.4s ease;
      cursor: pointer;

      &.app-specific-list-item {
        display: inline-flex !important;
        align-items: normal !important;
      }
      &:hover,
      &.active {
        background-color: #ffffff;
        border: 1px solid #000000;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
      }

      &.uploaded-image-preview {
        margin-left: 130px;
        margin-bottom: 0px;
        border: black;
        border-style: dashed;
        border-color: #dbdbdb;
      }

      img {
        max-width: 100%;
      }
    }
  }
  .app-specific-image-div {
    white-space: nowrap;
  }
  .grey-text {
    color: #adadad;
  }
}

.back-navigation-bar {
  & + .branding-stickers {
    padding-top: 60px;
  }
}

// empty state image

.branding-stickers {
  .empty-sticker {
    min-height: 472px;
    color: #000000;
    padding: 40px;
    img {
      padding: 24px;
    }
    .product-stickers-content {
      width: 45%;
      margin: 8px auto 0px;
      h2 {
        margin: 0px;
        font-size: 20px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.26;
        letter-spacing: normal;
      }
      p {
        margin: 8px 0px 24px;
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.4;
        letter-spacing: normal;
      }
      .create-new-sticker-btn {
        height: 38px;
        border: 0px;
        border-radius: 4px;
        color: #ffffff;
        background-color: #000000;
        font-size: 14px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: 0.28px;
        padding: 8px 24px;
      }
    }
  }

  .startup-plan-sticker {
    padding: 16px;
    .row {
      margin-right: -15px !important;
      margin-left: -15px !important;
    }
    h2 {
      font-size: 24px;
      font-weight: 500;
      font-stretch: normal;
      font-style: normal;
      line-height: 1.4;
      letter-spacing: normal;
      text-align: left;
      margin-top: 8px;
      margin-bottom: 32px;
    }
    ul {
      padding-left: 10px;
      list-style-type: "- ";
      width: 80%;
      margin-bottom: 42px;
      li {
        font-size: 16px;
        line-height: 1.58;
        padding-bottom: 20px;
      }
    }
    .btn {
      padding: 14px 58px;
      border-radius: 4px;
    }
    .startup-sticker {
      float: right;
    }
  }
  .sticker-tag-selection {
    margin: 0px;
    .d-flex {
      display: flex;
      align-items: center;
    }
    .input-field {
      .form-control {
        height: 40px;
        color: #000000;
        font-size: 14px;
        line-height: 1.29;
        letter-spacing: 0.28px;
        padding: 10px 16px;
        border-radius: 2px;
        border: 1px solid #dbdbdb;
        background-color: #ffffff;
        box-shadow: none;

        &::placeholder {
          color: rgba(0, 0, 0, 0.2);
        }

        &[disabled],
        &[readonly] {
          cursor: not-allowed;
          border-color: #dbdbdb;
          background-color: #f4f4f4;

          &::placeholder {
            color: rgba(0, 0, 0, 0.2);
          }
        }

        &.ng-empty {
          border-color: #ff4540;
        }
      }
    }
    .validate-btn {
      margin-left: 8px;
      .validate-btn-primary {
        font-size: 14px;
        font-weight: bold;
        line-height: 1.2;
        letter-spacing: 0.28px;
        padding: 10px 16px;
        color: #ffffff;
        background-color: #f62369;
        border-color: #f62369;
        border-radius: 2px;
        margin: 0;
        outline: 0 none;
        border: 0px solid;
      }
      .validate-btn-primary.disabled, .validate-btn-primary[disabled] {
        cursor: not-allowed;
        box-shadow: none;
        opacity: 0.65;
      }
    }
    .popup_category_container {
      width: 75%;
    }
  }
}

.customize-content {
    color: #000000;
    padding: 32px 12px;

    // common styles starts
    :focus {
        outline: 0 none;
    }
    
    .row {
        & > div {
            margin-bottom: 0;
        }

        .form-group, .flex-form-group {
            margin: 0 0 24px;
        }
    
        [class*='col-'] {
            padding: 0 12px;
        }

        &.no-gutter-spacing {
            margin: 0 -12px !important;
        }
    }

    .title {
        font-size: 18px;
        line-height: 1.28;
        font-weight: bold;
        margin-bottom: 24px;

        i {
            font-size: 20px;
            vertical-align: -2px;
            margin-right: 8px;

            &.vajro-hamburger-menu {
                font-size: 16px;
                vertical-align: baseline;
            }
        }
    }

    .form-group {
        margin: 0 0 24px;
        
    }

    .flex-form-group {
        display: flex;
        align-items: center;
        margin: 0 0 24px;

        .control-label {
            padding-right: 40px;
            margin-bottom: 0;
        }
    }

    .control-label {
        color: #000000;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: 0.32px;
        margin-bottom: 16px;
    }

    .form-control {
        height: 40px;
        color: #000000;
        font-size: 14px;
        line-height: 1.29;
        letter-spacing: 0.28px;
        padding: 10px 16px;
        border-radius: 2px;
        border-radius: 2px;
        border: 1px solid #dbdbdb;
        background-color: #fafafa;
        box-shadow: none;
        
        &::placeholder {
            color: rgba(0, 0, 0, .3);
        }
        
        &:focus {
            border-color: #979797;
            background-color: #ffffff;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
        }
    }

    .input-char-counter {
        position: relative;

        .form-control {
            padding-right: 72px;
        }

        textarea.form-control {
            padding-right: 24px;
            padding-bottom: 48px;

            & + .char-counter {
                top: auto;
                margin-top: inherit;
                bottom: 16px;
            }
        }
        
        .char-counter {
            font-size: 14px;
            line-height: 1.6;
            letter-spacing: 0.28px;
            color: rgba(0, 0, 0, .6);
            position: absolute;
            right: 20px;
            top: 50%;
            margin-top: -11px;
        }
    }

    .btn {
        font-size: 14px;
        font-weight: bold;
        line-height: 1.2;
        letter-spacing: 0.28px;
        color: #FFFFFF;
        padding: 10px 16px;
        border-radius: 2px;
        border-color: @theme-color;
        background-color: @theme-color;
        margin-top: 8px;
        outline: 0 none;
        margin-bottom: 8px;

        &.btn-outline {
            color: @theme-color;
            border-color: @theme-color;
            background-color: #FFFFFF;
        }
    }

    .img-wrapper {
        display: table;
        cursor: pointer;

        img {
            width: 240px;
            height: 240px;
            border-radius: 2px;
            background-color: #f4f4f4;
            border: 1px dashed #dbdbdb;
            object-fit: cover;
        }    
    }

    // QUICK LINKS
    .quick-links-box {
        padding: 24px;
        border-radius: 5px;
        background-color: #ffffff;
        .quick-links-header {
            display: flex;
            align-items: flex-end;
            padding-bottom: 24px;
            border-bottom: 1px solid rgba(0, 0, 0, .1);
            margin-bottom: 24px;

            .form-group {
                flex: 1 1;
                margin: 0 24px 0 0;
            }

            .btn-wrapper {
                .btn {     
                    padding: 11px 16px;  
                    margin-bottom: 0px;

                    &:not(:last-child) {
                        margin-right: 8px;
                    }
                }
            }
        }

        .quick-links-body {
            .padding-gutter {
                padding-left: 20px;
                padding-right: 8%;
            }

            fieldset {
                position: relative;

                .vajro-move-icon, .vajro-delete-icon {
                    position: absolute;
                    top: 50%;
                }

                .vajro-move-icon {
                    margin-top: -9px;
                    left: 4px;
                    cursor: move;

                    i {
                        color: #dbdbdb;
                        font-size: 18px;
                    }
                }

                .vajro-delete-icon {
                    color: #ff4540;
                    font-size: 16px;
                    margin-top: -8px;
                    right: 0px;
                }
            }
        }
    }
    // common styles ends


    // customize-navigation-menu starts
    &.customize-navigation-menu {    
        .navigation-menu-content {
            display: grid;
    
            .left-col {
                padding: 32px;
                border-radius: 5px;
                background-color: #FFFFFF;
                // min-height: 500px;
                margin-right: 32px;
                margin-bottom: 32px;
                
                .category-menu-list {
                    list-style: none;
                    padding-left: 0;
                    margin: 0;
    
                    li {
                        &:not(:last-child) {
                            margin-bottom: 8px;
                        }
                    }
    
                    .angular-ui-tree-placeholder {
                        border-radius: 2px;
                        border: 2px dashed #9d9d9d;
                        background-color: #f4f4f4;
                    }
    
                    .tree-node {
                        // display: flex;
                        color:black;
                        align-items: center;
                        padding: 16px 20px;
                        border-radius: 2px;
                        border: 1px solid #dbdbdb;
                        background-color: #ffffff;
                        min-height: 56px;
                        font-size: 15px;
                        .category-menu {
                            float: right;
    
                            i {
                                font-size: 16px;
                                vertical-align: middle;
                                cursor: pointer;
    
                                &.vajro-delete {
                                    color: #ff4540;
                                }
    
                                &:not(:last-child) {
                                    margin-right: 8px;
                                }
                            }
                        }
                        .tree-handle {
                            display: inline-block;
                            font-size: 16px;
                            line-height: 1;
                            padding: 0;
                            background-color: #ffffff;
                            border: 0;
                            min-height: auto;
                            margin: 0 8px 2px 0;
                        }
    
                        .tree-node-content {
                            display: inline-flex;
                            align-items: center;
                            color: #000000;
                            font-size: 16px;
                            font-weight: 500;
                            line-height: 1.5;
                            letter-spacing: 0.32px;
                            margin: 0;
                            margin-bottom: 0 !important;
                            
                            .drop-down-icon {
                                width: 18px;
                                height: 18px;
                                border-radius: 2px;
                                background-color: #000000;
                                margin-left: 8px;
                                display: flex;
                                align-items: center;
                                justify-content: center;

                                &:before {
                                    content: '\e91b';
                                    font-family: 'vajro-icon';
                                    font-size: 11px;
                                    line-height: 1;
                                    color: #FFFFFF;
                                    font-style: normal;
                                    vertical-align: middle;
                                }

                                &.collapsed:before {
                                    transform: rotate(180deg);
                                    margin-bottom: 2px;
                                }
                            }
    
                            
                        }
    
                    }

                    .angular-ui-tree-nodes {
                        margin-top: 8px;
                    }

                    &.child-menu-list {
                        margin-top: 8px;
                        margin-left: 16px;
                    }
                }
    
                .btn-wrapper {
                    padding: 24px 0;
                
                    .btn {            
                        &:not(:last-child) {
                            margin-right: 8px;
                            margin-bottom: 8px;
                        }
                    }
                }
            }
    

        }
        .right-col {

            .sync-card {
                padding: 24px 32px;
                border-radius: 2px;
                background-color: rgba(247, 148, 0, 0.04);
                border-top: 5px solid #f79400;

                p {
                    font-size: 14px;
                    line-height: 1.5;
                    letter-spacing: 0.28px;
                    margin-bottom: 24px;

                    &.heading-txt {
                        font-size: 16px;
                        font-weight: 500;
                        letter-spacing: 0.32px;
                        margin-bottom: 16px;

                        i {
                            color: #f79400;
                            font-size: 24px;
                            vertical-align: bottom;
                            margin-right: 8px;
                        }
                    }

                    &.txt {
                        color: rgba(0, 0, 0, .6);
                    }
                }

                .btn {
                    border-color: #f79400;
                    background-color: #f79400;
                }
            }
        }
    }
    // customize-navigation-menu ends
    

    // customize-contact-page starts
    &.customize-contact-page {
        background-color: #FFFFFF;

        .form-control {
            &:focus {
                &+.char-counter {
                    color: #ff4540;
                }
            }
            
            &:required:invalid {
                border-color: #ff4540;

                &+.char-counter {
                    color: #ff4540;
                }
            }
        }
        
        .btn-wrapper {
            padding: 24px 0;
            text-align: right;
        
            .btn {        
                &:not(:last-child) {
                    margin-right: 8px;
                }
            }
        }
        .btn-remove-image{
            margin-left: 20px;
            margin-top:10px;
        }
    }
    // customize-contact-page ends


    // customize-about-page starts
    &.about-page {
        .widget-list {
            padding: 20px 10px;
            list-style: none;
            min-height: 182px;
            border-radius: 2px;
            background-color: #FFFFFF;
            margin: 0;

            li {
                a {
                    position: relative;
                    display: block;
                    padding: 12px 32px 12px 16px;
                    font-size: 14px;
                    font-weight: normal;
                    line-height: 1.33;
                    letter-spacing: 0.28px;
                    color: #000000;
                    outline: 0 none;
                    text-decoration: none;
    
                    &:hover, &.active {
                        color: #FFFFFF;
                        border-radius: 2px;
                        background-color: @theme-color;
                        font-weight: bold;
                    }

                    .vajro-arrow-right {
                        position: absolute;
                        font-size: 12px;
                        top: 50%;
                        right: 16px;
                        margin-top: -6px;
                    }

                    &.enable-vajro-move-icon {
                        padding: 12px 32px;

                        .vajro-move-icon {
                            position: absolute;
                            left: 12px;
                            cursor: move;
        
                            i {
                                color: #dbdbdb;
                                font-size: 16px;
                            }
                        }
                    }
                }
            }
        }

        .app-header {
            margin: 48px 0;

            .title {
                margin-bottom: 16px;
            }
            .app-header-body {
                padding: 24px 72px 24px 24px;
                border-radius: 2px;
                background-color: #FFFFFF;
    
                .btn-wrapper {
                    padding: 24px 0;
                    text-align: right;
    
                    .btn:not(:last-child) {
                        margin-right: 8px;
                    }
                }
            }
        }

        .about-page-rightside {
            margin: 48px 0;

            .title {
                margin-bottom: 16px;
            }
        }
    }
    // customize-about-page ends


    // editable-CTA-page starts

    &.editable-CTA-page {
        background-color: #FFFFFF;
        
        .btn-wrapper {
            padding: 24px 0;
            text-align: right;
        
            .btn {        
                &:not(:last-child) {
                    margin-right: 8px;
                }
            }
        }
    }
    // editable-CTA-page ends

    //font size for admin-feature title
    .admin-title{
        font-size: 12px !important;
    }
}
@media only screen and (max-width:1024px){
    .quick-links-header{
        display: grid!important;
        .form-group{
            margin-bottom:10px!important;
        }
    } 
}
@media only screen and (max-width:768px){
    .left-col{
        margin-right:0px!important;
    }    
}

@media only screen and (max-width:425px){
    .left-col{
        padding: 10px!important;
        button{
            width:100%;
        }
        .tree-node{
            padding: 16px 0px!important;
            .category-menu{
                float: left!important;
                padding-left: 20px;
            }
        }
    }
    .quick-links-box{
        .quick-links-header{
            .btn{
                width: 100%;
                :not(:last-child) {
                    width: 100%;
                }
            }
            .form-group{
                margin-right: 0px !important;
            }
            button{
                margin-bottom: 8px!important;
            }
        }
    }
    
}
@media only screen and (max-width:375px){
    .customize-content .quick-links-box .quick-links-body fieldset .vajro-delete-icon{
        right: -13px;
    }
}
    
.input-color-picker {
    position: relative;
    width: 110px;

    .form-control {
        padding-right: 40px;
    }            
    
    .color-picker-control {
        width: 20px;
        height: 20px;
        border: none;
        padding: 0;
        margin: 0;
        position: absolute;
        top: 50%;
        margin-top: -10px;
        right: 16px;
        -webkit-appearance: none;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
        transition: all .4s ease;
        cursor: pointer;

        &::-webkit-color-swatch-wrapper {
            padding: 0;
        }

        &::-webkit-color-swatch {
            border-radius: 2px;
            border: none;
        }

        &:hover {
            box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
        }
    }
}



.tree-node-content {
    display: inline-flex;
    align-items: center;
    color: #000000;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.32px;
    margin-bottom: 0 !important;
    
    .drop-down-icon {
        width: 18px;
        height: 18px;
        border-radius: 2px;
        background-color: #000000;
        margin-left: 8px;
        display: flex;
        align-items: center;
        justify-content: center;

        &:before {
            content: '\e91b';
            font-family: 'vajro-icon';
            font-size: 11px;
            line-height: 1;
            color: #FFFFFF;
            font-style: normal;
            vertical-align: middle;
        }

        &.collapsed:before {
            transform: rotate(180deg);
            margin-bottom: 2px;
        }
    }

    
}

.reservation-popup-model-new {
    display: none;
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9;
    &.active {
        display: block;
    }
    .reservation-popup-model-card {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;
        height: 100vh;
        .reservation-popup-card-view {
            width: 600px;
            min-width: 320px;
            height: auto;
            background: #ffffff;
            border-radius: 4px;
            .header-view {
                display: flex;
                padding: 16px;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid lightgray;
               
                .reservation-type-title {
                    font-size: 16px;
                    font-weight: 600;
                    line-height: 1.44;
                }
            }
            .close-btn {
                margin: auto 0px;
                .vajro-close {
                    font-size: 16px;
                }
            }
            .reservation-product-title {
                margin-top: 8px;
                font-size: 14px;
            }
            .reservation-body-view {
                margin-top: 12px;
                padding: 16px;
                .reservation-variant-popup-head {
                    height: 32px;
                    background-color: #f8f8f8;
                    border-bottom: 1px solid #e1dfea;
                    position: sticky;
                    top: 0px;
                    z-index: 1;
                }
                .reservation-variant-popup-body {
                    input {
                        width: 288px;
                        padding: 12px;
                        border-radius: 4px;
                        border: 1px solid #707070;
                        margin-bottom: 12px;
                    }
                    .save-skip-btn {
                        margin-top: 16px;
                        display: flex;
                        align-items: center;
                        .save-btn {
                            padding: 11px;
                            background-color: #f62369;
                            color: #ffffff;
                            border: 0px;  
                            border-radius: 4px;  
                            margin-right: 10px;    
                            margin-bottom: 0;             
                        }
                        .skip-btn {
                            padding: 11px;
                            background-color: #f1f0f5;
                            color: #000;
                            border: 0;
                            border-radius: 4px;
                        }
                    }
                    .reservation-variant-popup-loop {
                        font-size: 12px;
                        font-weight: 400;
                        height: 32px;
                        background-color: #ffffff;
                        border-bottom: 1px solid #e1dfea;
                    }
                }
                .list {
                    width: 100%;
                    display: flex;
                    cursor: pointer;
                    .width-50 {
                        width: 50%;
                        margin: auto;
                        height: 32px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        .ellipsis-text {
                            width: 90%;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                }
            }
        }
    }
}
.dashboard-header {
  position: fixed;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 72px;
  z-index: 10;
  background-color: #ffffff;
  box-shadow: 0 1px 0 0 #e5e5e5;

  // common css starts
  :focus,
  :active:focus {
    outline: 0 none;
  }

  a {
    text-decoration: none;
  }
  .sidebar-setup {
    text-align: center;
    border-radius: 4px;
    border: solid 1px #ffe6ee;
    background-color: #fff7fa;
    margin-bottom: 20px;
    margin-top: 30px;
    .row > div {
      margin-bottom: 0px;
    }

    .setup-head {
      h5 {
        font-family: @vajro-font;
        font-size: 12px;
        font-weight: 600;
        text-align: left !important;
        margin-top: 18px;
        margin-bottom: 5px;
      }
      p {
        font-family: @vajro-font;
        font-size: 11px;
        font-weight: normal;
        text-align: left !important;
        color: #000000;
      }
    }
    .col-sm-12 {
      text-align: center;
      padding-left: 0;
      padding-right: 0;
      .btn-setup {
        width: 100%;
        padding: 10px;
        background-color: #fff;
        border-radius: 4px;
        color: @theme-color;
        border: 1px solid;
        margin-top: 10px;
        font-size: 12px;
        margin-bottom: 10px;
        font-weight: bold;
      }
    }
  }

  .header-list {
    display: flex;
    align-items: center;
    padding-left: 0;
    list-style: none;
    margin: 0;

    li {
      margin-right: 12px;
      a img.active{
        filter: invert(23%) sepia(62%) saturate(4586%) hue-rotate(327deg) brightness(99%) contrast(94%);
      }
      span img.active{
        filter: invert(23%) sepia(62%) saturate(4586%) hue-rotate(327deg) brightness(99%) contrast(94%);
      }
      a,
      span {
        color: #716f83;
        i {
          color: #716f83;
          font-size: 16px;
          vertical-align: -2px;
          position: relative;
          .notification-tooltip {
            visibility: hidden;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;

            /* Position the tooltip */
            position: absolute;
            z-index: 1;
            font-family: @vajro-font;
            font-size: 13px;
            padding: 5px;
            top: -3px;
            left: 38px;
          }
          .preview-tooltip {
            visibility: hidden;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 10px;

            /* Position the tooltip */
            position: absolute;
            z-index: 1;
            left: -26px;
            font-size: 13px;
            font-family: @vajro-font;
            top: -3px;
            left: 38px;
          }
        }
        i:hover .preview-tooltip {
          visibility: visible;
        }
        i:hover .notification-tooltip {
          visibility: visible;
        }
      }
    }
  }
  // common css ends

  .left-col {
    display: flex;
    align-items: center;
    padding-left: 32px;

    .logo-txt {
      color: #ff4747;
      font-size: 28px;
      font-family: "Kaushan Script", cursive !important;
    }

    .header-list {
      margin-left: 24px;

      li {
        &.not-live {
          cursor: not-allowed;

          a {
            color: #dbdbdb;
            pointer-events: none;
          }
        }

        a {
          color: #000000;
        }
      }
    }
    .mobile-show {
      display: none;
    }
  }
  .right-col{
    padding-right: 32px;
  }
  .right-col,
  .mobile-show {
    .mobile-hidden {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-family: @vajro-font;
    }
    .mobile-grid {
      display: block;
    }

    @media (max-width: 786px) {
      .header-list {
        display: none;
      }
    }
    .mobile-visibile {
      display: none;
    }
    .app-store-info {
      font-size: 11px;
      font-weight: 500;
      line-height: 1.33;
      letter-spacing: 0.22px;
      color: #222222;

      span {
        display: block;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.28px;
        margin-bottom: 5px;
      }
    }

    .user-info {
      display: flex;
      align-items: center;
      color: #343434;

      img {
        width: 40px;
        height: 40px;
        border-radius: 100%;
      }

      .app-store-info {
        margin-left: 8px;
      }
    }

    .dropdown {
      .dropdown-menu {
        min-width: 208px;
        max-width: 208px;
        padding: 8px;
        left: auto;
        right: 0;
        background-color: #ffffff;
        border-radius: 2px;
        box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
        margin-top: 12px;

        &.left {
          &:before {
            margin-left: -1px;
            margin-right: auto;
          }
        }

        &:before,
        &:after {
          content: "";
          width: 0px;
          height: 0px;
          position: absolute;
          bottom: 100%;
          right: 14px;
          pointer-events: none;
          border-style: solid;
          border-image: initial;
        }

        &:before {
          margin-right: -1px;
          border-color: rgba(255, 255, 255, 0%) rgba(204, 23, 10, 0)
            rgba(0, 0, 0, 0.05);
          border-width: 7px;
        }

        &:after {
          border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) white;
          border-width: 6px;
        }

        .app-store-info {
          padding: 8px 8px 0;
          margin-bottom: 16px;

          span {
            margin-bottom: 0;
          }
        }

        ul {
          list-style: none;
          padding-left: 0;
          margin: 0;

          li {
            a {
              display: block;
              padding: 10px 16px;
              color: #000000;
              font-size: 12px;
              font-weight: 500;
              line-height: 1.2;
              letter-spacing: 0.24px;
              border-radius: 4px;
              transition: all 0.4s ease;

              &:hover {
                background-color: #f4f4f4;
                padding-left: 16px;
              }

              i {
                font-size: 16px;
                vertical-align: -2px;
                margin-right: 8px;

                &.vajro-profile-16 {
                  font-size: 15px;
                  vertical-align: -2px;
                }
              }
            }

            &.logout {
              a {
                color: #fa4747;

                &:hover {
                  background-color: #fff5f5;
                }
              }
            }
          }
        }
      }
    }

    .btn.blue-btn {
      color: #ffffff;
      font-size: 14px;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0.28px;
      padding: 11px 16px;
      background-color: #0e71eb;
      border-color: #0e71eb;
      border-radius: 5px;
      margin-right: 16px;

      &:focus {
        outline: 0 none;
      }
      &:active {
        box-shadow: none;
      }

      &:hover {
        background-color: darken(#0e71eb, 10%);
        border-color: darken(#0e71eb, 10%);
      }

      i {
        font-size: 16px;
        vertical-align: text-bottom;
        margin-right: 2px;
      }
    }
    .navbar-toggle {
      background-color: #fff;
      border: 1px solid @theme-color;
      margin-right: 0px !important;
      span {
        background-color: @theme-color;
      }
    }

    .header-list {
      li {
        a,
        .notification-bell {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          border-radius: 12px;
        }

        .notification-bell {
          i {
            font-size: 18px;
          }

          &.highlight {
            position: relative;
            &.no-after {
              &:after {
                display: none !important;
              }
            }

            &:after {
              content: "";
              display: block;
              width: 8px;
              height: 8px;
              position: absolute;
              top: 8px;
              right: 8px;
              background-color: #e35168;
              .border-radius(100%);
              .box-shadow(0 0 0 0 fade(#e35168, 50%));
              .circle-pulsate(highlight-circle, fade(#e35168, 80%), 12px);
            }
          }
        }

        .heading {
          display: flex;
          align-items: center;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          padding: 6px 12px;
          min-height: 40px;
          background-color: #ffffff;
          margin: 0;
        }

        .notification-card-wrapper {
          max-height: 296px;
          overflow: hidden scroll;
          padding: 0px 8px 16px 0px;
          margin-right: -12px;

          /* scroll bar style starts */
          &::-webkit-scrollbar {
            width: 4px;
            background-color: #f5f5f5;
          }
          &::-webkit-scrollbar-track {
            background: #ffffff;
            margin: 0;
          }
          &::-webkit-scrollbar-thumb {
            background: #cccccc;
          }
          &::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.35);
          }
          /* scroll bar style ends */

          .notification-card {
            position: relative;
            padding: 12px 10px 12px 56px;
            transition: all 0.5s;
            cursor: pointer;

            &:not(:last-child) {
              border-bottom: 1px solid rgba(112, 112, 112, 0.15);
            }

            &:hover {
              background-color: rgba(233, 233, 240, 0.34);
              border-radius: 1px;
            }

            &.selected-notification-card {
              border: 2px solid rgba(112, 112, 112, 0.5) !important;
            }

            .notification-card-icon {
              position: absolute;
              top: 12px;
              left: 12px;
              width: 32px;
              height: 32px;
              background-color: #e9e9f0;
              border-radius: 8px;
              text-align: center;

              i {
                color: #716f83;
                font-size: 14px;
                line-height: 32px;
              }
            }

            p {
              font-size: 11px;
              line-height: 1.4;
              letter-spacing: 0.11px;
              margin-bottom: 0;

              &.title {
                color: #000000;
                font-size: 12px;
                font-weight: 600;
                line-height: 1.2;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-bottom: 8px;
              }

              &.txt {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
              }
            }
          }
        }

        &.dropdown {
          .dropdown-menu {
            min-width: 240px;
            max-width: 304px;
            min-height: 184px;
            max-height: 376px;
            padding: 40px 12px;
            box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);

            .view-all {
              color: #ffffff;
              display: inline-block;
              padding: 12px 16px;
              font-size: 14px;
              line-height: 1.2;
              font-weight: 500;
              text-align: center;
              background-color: #716f83;
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
              transition: all 0.5s;

              &:hover {
                background-color: darken(#716f83, 10%);
                border-color: darken(#716f83, 10%);
              }
            }
          }
        }
      }
    }
  }
}
.navbar-collapse {
  // color: @theme-color;
  top: 60px;
  right: 0;
  bottom: 0;
  background-color: #fff;
  position: fixed;
  z-index: 10;
  width: 100%;
  border: 1px solid #f2f2f2;
  overflow: scroll;
  &:hover::-webkit-scrollbar-thumb {
    display: block;
  }

  ul {
    list-style: none;
    padding: 18px;
    .design-editor {
      i {
        margin-right: 22px;
      }
    }
    li {
      // color: #9d9d9d;
      outline: 0 none;
      transition: all 0.4s;
      padding: 15px 15px 10px 15px;
      font-size: 12px;

      &.active {
        color: @theme-color;
        background-color: @theme-background;
        border-radius: 2px;
        font-weight: bold;
        i {
          color: @theme-color;
        }
      }
      .vajro-chevron-down {
        float: right;
        font-size: 11px;
        color: @theme-color;
      }
      i {
        // color: #9d9d9d;
        font-size: 18px;
        margin: 0 auto 6px;
        transition: all 0.4s;
      }
      span {
        margin-left: 10px;
        vertical-align: top;
      }
    }
  }
}
@media only screen and (max-width: 786px){
  .dashboard-header .right-col{
    padding-right: 0;
  }
}
@media only screen and (max-width: 767px) {
  .switch-layout{
    left: 0!important;
  }
  .switch-layout:before, .switch-layout:after{
    left: 35px!important;
  }
}
@media only screen and (min-width: 768px) {
  .navbar-collapse.collapse {
    display: none !important;
  }
}

/*
  VAJRO DASHBOARD THEME
*/

// FONTS
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@400;600;700&display=swap|Montserrat:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
@vajro-font: 'Poppins', serif;
@font-primary: 'Montserrat', serif;
@font-serif: 'Source Serif Pro', serif;

input[type="number"]::-webkit-outer-spin-button, 
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}
.modal{
    .downgrade{
        max-width: 596px;
        .modal-content{
            padding: 10px;
            border-radius: 4px;
            hr{
                margin: 10px 0 10px;
            }
            .downgradehead, .feedbackhead{
                border-bottom: 0px;
                padding: 10px;
                .close{
                    opacity: 1;
                    font-weight: 500;
                    font-size: 30px!important;
                }
                .modal-title, .feedback-title{
                    text-align: center;
                    float: unset;
                    color: #000;
                    padding-top: 14px;
                    letter-spacing: 0.4px;
                    font-weight: 600;
                    line-height: 27px;
                }
                .feedback-title{
                    font-size: 16px;
                    padding: 14px 25px 0;
                }
            }
            .feedbackhead{
                padding: 0;
            }
            .downgradedesc{
                .plan-table{
                    margin-top: 8px;
                    text-align: center;
                    a{
                        text-decoration: none;
                        color: #000;
                        font-size: 12px;
                        padding-bottom: 5px;
                        border-bottom: 1px solid;
                        width: fit-content;
                    }
                }
                .content-wrapper,.feedback-wrapper{
                    padding: 0 46px;
                    .note{
                        font-size: 16px;
                        font-weight: 400;
                        line-height: 20px;
                        color: #000;
                    }
                    .list{
                        margin-top: 20px;
                        margin-bottom: 50px;
                    .items{
                        display:flex;
                        align-items: center;
                        margin-bottom: 15px;
                        p{
                            font-size: 14px;
                            line-height: 22.4px;
                            color: #000;
                            margin-bottom: 0;
                        }
                    }
                }
                }
                .feedback-wrapper{
                    padding: 0;
                    .choice-wrapper{
                        padding-left: 10px;
                        .feedback-choice{
                            display: flex;
                            margin-bottom: 10px;
                            .custombox{
                                width: 16px;
                                height: 16px;
                                border: 1px solid #9D9D9D;
                                border-radius: 4px;
                                accent-color: #F62369;
                            }
                            label{
                                padding: 2px 0 0 10px;
                                font-weight: 400;
                                font-size: 14px;
                                line-height: 21px;
                                color: #000;
                            }
                        }
                    }
                    select{
                        margin-bottom: 25px;
                        font-family: "Poppins";
                        color: #000;
                    }
                    .feedback-desc{
                        margin-top: 5px;
                        padding: 16px;
                        height: 112px;
                        width: 100%;
                        font-family: 'Poppins';
                        font-size: 12px;
                        line-height: 20px;
                        background-color: #F9F9F9;;
                        border: none;
                        border-radius: 4px;
                        resize: none;
                    }
                }
                .plans,.feedbacksubmit{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    gap: 10px;
                    .current-plan, .new-plan, .move-new{
                        padding: 12px;
                        width: 250px;
                        border-radius: 4px;
                        border: none;
                        font-weight: 600;
                        font-family: 'Poppins';
                    }
                    .move-new{
                        background-color: #F62369;
                        color: #fff;
                    }
                    .new-plan{
                        background-color: #ff94b8;
                        color: #fff;
                    }
                    .current-plan{
                        border: 1px solid rgba(0, 0, 0, 0.2);
                        background-color: white;
                        color: #000;
                    }
                }
                .feedbacksubmit{
                    display: flex;
                    align-items: center;
                    justify-content: end;
                    margin-top: 20px;
                }
                
            }
            
        }
        
    }
    .thankpopup{
        max-width: 482px;
        min-height: 266px;
        .thankhead{
            border-bottom: 0px;
            .thanktitle{
                font-weight: 600;
                text-align: center;
                font-size: 18px;
                line-height: 20px;
            }
        }
        .thanknote{
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            color: #000;
            text-align: center;
        }
    }
}
@media (max-width: 581px){
    .plans{
        display: block;
        .current-plan, .new-plan{
            width: 100%!important;
        }
    }
}

@media (max-width: 468px){
    .downgradedesc{
        .content-wrapper{
            padding: 12px!important;
        }
    }
}

@media (max-width: 395px){
.modal-body{
    padding: 15px!important;
}
}
.row>div{
    margin-bottom: 0;
}
.form-group{
    margin-top: 0;
}
.content{
    padding: 80px 80px 50px 24px;
    .create-dynamic-link-btn{
        padding: 10px;
        background-color: #fff;
        border-radius: 4px;
        color: #f62369;
        font-size: 12px;
        line-height: 20px;
        border: 1px solid;
        margin-top: 10px;
        margin-bottom: 10px;
        font-weight: bold;
    }
    .custom-tooltip:hover + .custom-tooltip-container {
        display: flex;
    }
    .custom-tooltip-container {
        display: none;
        min-width: 170px;
        max-width: 300px;
        position: absolute;
        background-color: #fff;
        padding: 4px 8px;
        box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
        border-radius: 4px;
        z-index: 2;
    
        .custom-tooltip-body{
            color: #001E3E;
            font-size: 11px;
            line-height: 18px;
            white-space: normal;
        }
    }
    table>thead>tr>th{
        text-align: center;
    }
    th:last-child{
        .custom-tooltip-container{
            margin-left: -60px;
        }
    }
}
@font-face {	
  font-family: 'vajro-icon';	
  src:  url('https://res.cloudinary.com/vajrohq/raw/upload/v1610526874/admin_console/fonts/13-01-21/vajro-icon.eot?hyekb6');	
  src:  url('https://res.cloudinary.com/vajrohq/raw/upload/v1610526874/admin_console/fonts/13-01-21/vajro-icon.eot?hyekb6#iefix') format('embedded-opentype'),	
  url('https://res.cloudinary.com/vajrohq/raw/upload/v1610526873/admin_console/fonts/13-01-21/vajro-icon.ttf?hyekb6') format('truetype'),	
  url('https://res.cloudinary.com/vajrohq/raw/upload/v1610526874/admin_console/fonts/13-01-21/vajro-icon.woff?hyekb6') format('woff');	
  // url('../fonts/vajro-icon.svg?k6fy6l#vajro-icon') format('svg')	
  font-weight: normal;	
  font-style: normal;	
  font-display: block;	
}	

[class^="vajro-"], [class*=" vajro-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'vajro-icon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// vajro logo text styles starts	
[class^="vajro-logo"], [class*=" vajro-logo"] {	
font-family: 'Kaushan Script', cursive !important;	
color: #ff4747 !important;	
}	
// vajro logo text styles ends	

.vajro-log-out:before {
  content: "\e90f";
}
.vajro-eye:before {
  content: "\e951";
}
.vajro-admin-settings:before {
  content: "\e94f";
}
.vajro-profile-block:before {
  content: "\e950";
}
.vajro-minus-circle:before {
  content: "\e94c";
}
.vajro-triangle-info:before {
  content: "\e94d";
}
.vajro-download:before {
  content: "\e94e";
}
.vajro-close-16:before {
  content: "\e94a";
}
.vajro-bell-fill:before {
  content: "\e948";
}
.vajro-bell-fill-with-blink:before {
  content: "\e949";
}
.vajro-about-24:before {
  content: "\e93c";
}
.vajro-blog-24:before {
  content: "\e93d";
}
.vajro-cart-24:before {
  content: "\e93e";
}
.vajro-category-24:before {
  content: "\e93f";
}
.vajro-contact-24:before {
  content: "\e940";
}
.vajro-home-24:before {
  content: "\e941";
}
.vajro-notification-24:before {
  content: "\e942";
}
.vajro-profile-24:before {
  content: "\e943";
}
.vajro-search-24:before {
  content: "\e944";
}
.vajro-wishlist-24:before {
  content: "\e945";
}
.vajro-android:before {
  content: "\e90e";
}
.vajro-apple:before {
  content: "\e90d";
}
.vajro-arrow-right:before {
  content: "\e919";
}
.vajro-bell:before {
  content: "\e909";
}
.vajro-bill:before {
  content: "\e90a";
}
.vajro-calendar:before {
  content: "\e92c";
}
.vajro-chat-user:before {
  content: "\e930";
}
.vajro-chevron-down:before {
  content: "\e91b";
}
.vajro-chevron-right:before {
  content: "\e907";
}
.vajro-chevron-up:before {
  content: "\e91a";
}
.vajro-clock:before {
  content: "\e92d";
  font-size: 18px;
}
.vajro-close:before {
  content: "\e908";
}
.vajro-customize:before {
  content: "\e91f";
}
.vajro-customize-menu:before {
  content: "\e91c";
}
.vajro-delete:before {
  content: "\e903";
}
.vajro-edit:before {
  content: "\e902";
}
.vajro-file-clone:before {
  content: "\e915";
}
.vajro-hamburger-menu:before {
  content: "\e926";
}
.vajro-hide:before {
  content: "\e916";
}
.vajro-history:before {
  content: "\e929";
}
.vajro-info:before {
  content: "\e906";
}
.vajro-instagram:before {
  content: "\e917";
}
.vajro-integration:before {
  content: "\e920";
}
.vajro-keyhole-circle:before {
  content: "\e90c";
}
.vajro-launch:before {
  content: "\e921";
}
.vajro-link:before {
  content: "\e927";
}
.vajro-lock:before {
  content: "\e91d";
}
.vajro-menu:before {
  content: "\e90b";
}
.vajro-message:before {
  content: "\e931";
}
.vajro-move:before {
  content: "\e901";
}
.vajro-phone:before {
  content: "\e914";
}
.vajro-plus-circle:before {
  content: "\e900";
}
.vajro-redirect:before {
  content: "\e905";
}
.vajro-request:before {
  content: "\e947";
}
.vajro-send-arrow:before {
  content: "\e92f";
}
.vajro-setting:before {
  content: "\e92b";
}
.vajro-stopwatch:before {
  content: "\e92a";
}
.vajro-swatchbook:before {
  content: "\e911";
}
.vajro-switch:before {
  content: "\e923";
}
.vajro-sync:before {
  content: "\e925";
}
.vajro-tag:before {
  content: "\e92e";
}
.vajro-themes:before {
  content: "\e922";
}
.vajro-tickmark:before {
  content: "\e91e";
}
.vajro-tickmark-circle:before {
  content: "\e918";
}
.vajro-tool:before {
  content: "\e913";
}
.vajro-unlock:before {
  content: "\e924";
}
.vajro-upload:before {
  content: "\e904";
}
.vajro-user-circle:before {
  content: "\e910";
}
.vajro-video:before {
  content: "\e912";
}
.vajro-video-fill:before {
  content: "\e946";
}
.vajro-widget:before {
  content: "\e928";
}
.vajro-close-24:before {
  content: "\e94b";
}
.vajro-about-16:before {
  content: "\e932";
}
.vajro-blog-16:before {
  content: "\e933";
}
.vajro-cart-16:before {
  content: "\e934";
}
.vajro-category-16:before {
  content: "\e935";
}
.vajro-contact-16:before {
  content: "\e936";
}
.vajro-home-16:before {
  content: "\e937";
}
.vajro-notification-16:before {
  content: "\e938";
}
.vajro-profile-16:before {
  content: "\e939";
}
.vajro-search-16:before {
  content: "\e93a";
}
.vajro-wishlist-16:before {
  content: "\e93b";
}






@font-face {
  font-family: 'vajro-icon';
  src:  url('https://res.cloudinary.com/vajrohq/raw/upload/v1646723707/admin_console/vajro-ui/fonts/onboard-sidebar-icons/vajro-icon.eot?5mevnk');
  src:  url('https://res.cloudinary.com/vajrohq/raw/upload/v1646723707/admin_console/vajro-ui/fonts/onboard-sidebar-icons/vajro-icon.eot?5mevnk#iefix') format('embedded-opentype'),
    url('https://res.cloudinary.com/vajrohq/raw/upload/v1646723707/admin_console/vajro-ui/fonts/onboard-sidebar-icons/vajro-icon.ttf?5mevnk') format('truetype'),
    url('https://res.cloudinary.com/vajrohq/raw/upload/v1646723707/admin_console/vajro-ui/fonts/onboard-sidebar-icons/vajro-icon.woff?5mevnk') format('woff');

  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="vajro"], [class*=" vajro"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'vajro-icon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.vajroPrivacy:before {
  content: "\e971";
}
.vajroMenu:before {
  content: "\e960";
}
.vajroPreview-icon .path1:before {
  content: "\e961";
  color: rgb(240, 239, 248);
  opacity: 0.5;
}
.vajroPreview-icon .path2:before {
  content: "\e962";
  margin-left: -1em;
  color: rgb(49, 57, 60);
}
.vajroPreview-icon .path3:before {
  content: "\e963";
  margin-left: -1em;
  color: rgb(49, 57, 60);
}
.vajroThemes:before {
  content: "\e964";
}
.vajroPush-Notif-vajro:before {
  content: "\e950";
}
.vajroBilling-vajro:before {
  content: "\e965";
}
.vajroBlynk-vajro:before {
  content: "\e952";
}
.vajroBranding-vajro:before {
  content: "\e953";
}
.vajroCustomize-vajro:before {
  content: "\e954";
}
.vajroFeatures-vajro:before {
  content: "\e955";
}
.vajroIntegrations-vajro:before {
  content: "\e956";
}
.vajroLaunch-vajro:before {
  content: "\e957";
}
.vajroStickers-vajro:before {
  content: "\e958";
}
.vajroThemes-vajro:before {
  content: "\e959";
}

.bg_transparent {
    margin: 0px;
    .widget {
        background: transparent !important;
        border: none !important;
        box-shadow: none;
    }
}

.line-clamp {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.full_width {
    width: 96% !important;
}

.porto-sicon-box {
    &.left-icon {
        display: inline-block;
        padding: 10px;
        width: 100%;

        .porto-sicon-left {
            display: table-cell;
            vertical-align: top;

            .porto-sicon-img {
                margin-right: 20px;
            }
        }

        .porto-sicon-body {
            display: table-cell;
            width: 100%;

            .porto-sicon-header {
                width: 100%;
                position: relative;

                .porto-sicon-title {
                    font-size: 1.4em;
                    font-weight: 400;
                    letter-spacing: normal;
                    text-transform: none;
                    margin: 0;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    height: 45px;
                }

                &+.porto-sicon-description {
                    margin-top: 10px;
                }
            }
        }

        .porto-sicon-description {
            float: left;
            width: 100%;
            display: block;
            line-height: 24px;
            height: 54px;
        }

        &.selected {
            border-radius: 4px;
            box-shadow: 0 0 3px 3px rgba(165, 212, 174, 0.87);
            background-color: #fff;
        }
    }

    &.top-icon {
        text-align: center;

        .porto-sicon-img {
            font-size: 250px;
        }

        p {
            font-size: 14px;
        }

        .porto-sicon-description {
            margin-top: 15px;
        }
    }

    .align-icon {
        line-height: 1em;
    }
}

.porto-sicon-wrapper {
    .img-icon {
        -webkit-transition: -webkit-transform 200ms linear;
        transition: -webkit-transform 200ms linear;
        transition: transform 200ms linear;
        transition: transform 200ms linear,-webkit-transform 200ms linear;
    }
}

.porto-sicon-img {
    display: inline-block;
    font-size: 48px;
    width: 1em;
    max-width: 100%;
    -moz-box-sizing: content-box !important;
    -webkit-box-sizing: content-box !important;
    box-sizing: content-box !important;

    .img-icon {
        width: 1em;
        max-width: 100% !important;
        border-radius: 6px !important;
        -webkit-box-shadow: 0 0 6px 1px #c4cdd5!important;
        box-shadow: 0 0 6px 1px #c4cdd5 !important;
        display: block;
        font-size: inherit;
    }
}

.integ_section_body {
    margin-top: 30px;
}

a.porto-sicon-box-link {
    text-decoration: none;
    border: none;
    display: block;
    color: inherit;
    outline: none;
}

.integ_section_desc {
    font-size: 12px;
    color: #777777;

    p {
        line-height: 18px;
        margin: 0;
    }
}


.integrationPage {
    .integration_header {
        height: 70px;
        background-color: #fff;
        box-shadow: 0px 1px 0px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
        border-bottom: 1px solid #dfe3e8;
    }

    .integration_body {
        .integ_title {
            font-size: 30px;
            font-weight: 600;
            line-height: 50px;
        }

        .integ_feature_section {
            section {
                background-color: #fff;
                padding: 20px;
            }

            .feature_section_container {
                padding: 0 5%;
            }
        }

        .integration_section {
            margin-top: 10px;

            .integ_section {
                .integ_section_container {
                    .integ_section_body {
                        display: flex;
                        flex-wrap: wrap;

                        .integ_section_content {
                            margin: 0;

                            a {
                                &.integ_section_link {
                                    text-decoration: none;
                                    border: none;
                                    display: block;
                                    color: inherit;
                                    outline: none;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.filter_model {
    .filter_left_content {
        .filter_image {
            img {
                max-width: 100%;
                border-radius: 6px;
                -webkit-box-shadow: 0 0 6px 1px #c4cdd5;
                box-shadow: 0 0 6px 1px #c4cdd5;
                display: block;
                font-size: inherit;
            }
        }
    }

    .filter_right_content {
        .filter_title {
            font-size: 20px;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            flex-wrap: wrap;
            display: flex;

            p {
                -webkit-box-flex: 1;
                -webkit-flex: 1 1 auto;
                -ms-flex: 1 1 auto;
                flex: 1 1 auto;
            }
        }
        .date-picker {
            height: 40px;
            background-color: #fff;
            &:focus {
                border-color: #ccc;
            }
        }
    }
}

.input_container {
    .input-box {
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 8px;
        padding-right: 0;

        label {
            display: block;
            margin-bottom: 0.4rem;
            font-size: 1.5rem;
            font-weight: 400;
            line-height: 2rem;
            text-transform: initial;
            letter-spacing: initial;
            cursor: pointer;
        }

        .input_text {
            margin: 0;
            border-style: inset;
            color: black;
            -webkit-appearance: none;
            -moz-appearance: none;
            border: 1px solid #c4cdd5;
            font-weight: 400;
            text-transform: initial;
            letter-spacing: initial;
            box-sizing: border-box;
            display: block;
            width: 100%;
            padding: 5px 10px;
            font-size: 1.6rem;
            line-height: 2.4rem;
            border-radius: 3px;
        }
    }

    .pickup_container {
        margin-top: 20px;
    }
}

.dl-flex {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end;

    .first-child {
        flex: 1 1 auto;
        margin: auto;
    }
}

.bg_select {
    color: #10a710;
    background: white;
}

.icon_position {
    position: absolute;
    top: -3px;
    right: -3px;
    font-size: 17px;
}

/* MD-Switch Color */

md-switch.md-checked .md-thumb-container .md-thumb {
    background-color: rgb(108, 122, 205);
}

md-switch.md-checked .md-bar {
    background-color: rgba(108, 122, 205, 0.5);
}

md-switch.md-checked .md-ink-ripple {
    color: rgb(108, 122, 205);
}

.premium_feature_badge
{
    border-radius: 4px;
    box-shadow: 0 0 3px 3px rgb(236, 159, 37);
    background-color: #fff0;
}

// integration editor

.editor-table-image {
    width: 45px; 
    margin: 10px 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    object-fit: cover;
    border-radius: 5px;
}

.editor-table-title {
    margin-left: 10px; width: 22.5%; min-width: 280px;
}

.editor-table-border {
    border: 1px solid #dfe3e8;
}

.data-and-user-privacy-popup {
    .title {
        font-size: 16px;
        color: #262626;
        margin-bottom: 8px;
        span {
            color: #f62369;
        }
    }
    input {
        border-radius: 4px;
        border: solid 1px #d9d9d9;
        padding: 12px 16px;
        font-size: 12px;
        outline: 0px;
        height: auto;
    }
    .select-option-icon {
        position: relative;
        width: 100%;
        &::before {
            content: '\f078';
            font: normal normal normal 12px/1 FontAwesome;
            color: #000000;
            right: 12px;
            height: 100%;
            padding: 15px 0px;
            position: absolute;
            pointer-events: none;
        }
    }
    .select-option {
        appearance: none;
        width: 100%;
        border: solid 1px #d9d9d9;
        background: #ffffffff;
        border-radius: 4px;
        padding: 12px 16px;
        font-size: 12px;
        &:focus-visible {
            outline: 0px;
        }
    }
    .header-info {
        margin-bottom: 16px;
        position: relative;
        display: flex;
        flex-direction: column;
        button {
            position: absolute;
            top: 0;
            right: 0;
        }
        .header-info-discription {
            margin-top: 8px;
            a {
                color: #f62369;
                font-size: 14px;
                &:hover {
                    color: #f62369;
                    text-decoration: none;
                }
            }
        }
    }
    .report-generation-section {
        margin-bottom: 16px;
    }
    .save-btn {
        display: flex;
        justify-content: flex-end;
        button[disabled] {
            cursor: not-allowed;
            opacity: 0.3;
            &:hover {
                background: #F62369;
                color: #ffffff;
            }
        }
        button {
            cursor: pointer;
            background: #F62369;
            border: 1px solid #F62369;
            color: #ffffff;
            border-radius: 4px;
            padding: 8px 16px;
            font-weight: 600;
            font-size: 14px;
            &:hover {
                background: #FFF3F7;
                color: #F62369;
            }
        }
        
    }
}

.admin-feature-integrationPage {
    height: ~"calc(100vh - 164px)";
    background: #ffffff;
    border-radius: 4px;
    .integ-title-header {
        padding: 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        top: 0px;
        background: #fff;
        z-index: 9;
        h1 {
            font-size: 18px;
            line-height: 20px;
            font-weight: 600;
            margin: 0px;
        }
        .select-option-icon {
            position: relative;
            margin-right: 24px;
            &::before {
                content: '\f078';
                font: normal normal normal 12px/1 FontAwesome;
                color: #000000;
                right: 12px;
                height: 100%;
                padding: 15px 0px;
                position: absolute;
                pointer-events: none;
            }
        }
        .select-option {
            appearance: none;
            width: 100%;
            border: solid 1px #d9d9d9;
            background: #ffffffff;
            border-radius: 4px;
            padding: 12px 16px;
            font-size: 12px;
            &:focus-visible {
                outline: 0px;
            }
        }
    }
    .widget {
        margin-top: 0px !important;
    }
    h3 {
        margin-top: 0px;
        font-weight: 500;
        font-size: 18px;
        line-height: 22px;
    }
    .widget-body {
        padding-top: 0px;
    }
    .integration_section {
        margin-top: 0px !important;
        height: ~"calc(100vh - 254px)";
        overflow-y: auto;
    }
    .integ_section_body {
        .porto-sicon-wrapper {
            margin-bottom: 16px !important;
        }
    }
}
// dashboard layout modal style starts
.layout-modal {
    .row {
        margin: 0 -8px !important;

        &>div {
            margin-bottom: 0;
        }

        [class*="col-"] {
            padding: 0 8px;
        }
    }
    
    .layout-card {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: 96px;
        background-color: #f4f4f4;
        border: 1px dashed #9d9d9d;
        margin-bottom: 16px;
        transition: background-color .6s ease;
        cursor: pointer;

        &:hover {
            background-color: #000000;
            border-color: #000000;

            span {
                display: none;
            }
            .btn {
                display: block;
            }
        }

        span {
            max-width: 128px;
            text-align: center;
            color: #9d9d9d;
            font-size: 14px;
            font-weight: 500;
            line-height: 1.5;
            letter-spacing: 0.28px;
        }

        .btn {
            display: none;
            color: #FFFFFF;
            background-color: transparent;
            font-size: 12px;
            letter-spacing: 0.24px;
            border: 1px solid #FFFFFF;
            padding: 4px 24px;
            border-radius: 2px;
            margin: 0;

            &:focus {
                outline: 0 none;
            }
        }
    }
}
// dashboard layout modal style ends
.product_status_visible {
    color: forestgreen;
    line-height: 40px;
}
.product_status_masked {
    color: gray;
    line-height: 40px;
    &:hover {
        color: forestgreen !important;
    }
}
.live-product-image {
    min-width: 80px;
    object-fit: contain;
    padding: 0px;
    max-width: 80px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.live_status_with_background {
    color: white;
    padding: 2.5px 15px;
    border-radius: 10px;  
    font-size: 12px;  
}
.live_done {
    color: green;
}
.live-product-row {
    line-height: 40px;
    white-space: nowrap;
    overflow: hidden;
    font-size: 15px;
    &.live-product-row-title  {
        margin-right: 5px;
        color: #555 !important;
    }
}
.pending-status {
    background-color: darkorange !important;
}
.live-status {
    background-color: tomato !important;
}
.completed-status {
    background-color: forestgreen !important;
}

.stop-live-button {
    color: tomato !important;
}

.live-video-timestamp {
    color:#777;
    font-size: 11px;
    margin-top: -20px;
    position: absolute;
}
.vjr-bigger-checkbox {
	-webkit-appearance: none;
	background-color: #fafafa;
	border: 1px solid #cacece;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	padding: 9px !important;
	border-radius: 3px;
	display: inline-block;
	position: relative;
}
.regular-checkbox:active, .regular-checkbox:checked:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.regular-checkbox:checked {
	background-color: @shopify-cta-color;
	border: 1px solid @shopify-cta-color;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
	color: #99a1a7;
}

.regular-checkbox:checked:after {
	content: '\2714';
	font-size: 14px;
	position: absolute;
	top: 0px;
	left: 3px;
	color: #99a1a7;
}

/* simple chat ui */

:root {
    --msger-bg: #fff;
    --border: 2px solid #ddd;
    --left-msg-bg: #ececec;
    --right-msg-bg: #579ffb;
}

.bdy {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 61vh;
    background-image: var(--body-bg);
    font-family: 'Poppins', sans-serif;
}

.msger {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    width: 100%;
    max-width: 867px;
    margin: 0px 0px;
    border: var(--border);
    border-radius: 5px;
    background: var(--msger-bg);
}

.msger-chat {
    flex: 1;
    overflow-y: scroll;
    padding: 10px;
    height: 350px;
}

.msger-chat::-webkit-scrollbar {
    width: 6px;
}

.msger-chat::-webkit-scrollbar-track {
    background: #ddd;
}

.msger-chat::-webkit-scrollbar-thumb {
    background: #bdbdbd;
}

.msg {
    display: flex;
    align-items: flex-end;
    margin-bottom: 10px;
}

.msg:last-of-type {
    margin: 0;
}

.msg-img {
    width: 35px;
    height: 35px;
    margin-right: 10px;
    background: #000;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 50%;
}

.msg-bubble {
    max-width: 450px;
    padding: 15px;
    border-radius: 15px;
    background: var(--left-msg-bg);
}

.msg-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.msg-info-name {
    margin-right: 10px;
    font-weight: bold;
}

.msg-info-time {
    font-size: 0.85em;
}

.left-msg .msg-bubble {
    border-bottom-left-radius: 0;
}

.right-msg {
    flex-direction: row-reverse;
}

.right-msg .msg-bubble {
    background: var(--right-msg-bg);
    color: #fff;
    border-bottom-right-radius: 0;
}

.right-msg .msg-img {
    margin: 0 0 0 10px;
}

.msger-inputarea {
    display: flex;
    padding: 8px;
    border-top: var(--border);
}

.msger-inputarea * {
    padding: 8px;
    border: none;
    font-size: 1em;
}

.msger-input {
    flex: 1;
    background: rgb(246, 246, 246);
}

.msger-send-btn {
    background: rgb(0, 196, 65);
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.23s;
}

.msger-send-btn:hover {
    background: rgb(0, 180, 50);
}

.msger-send-btn-disable {
    background: rgb(151, 146, 146);
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.23s;
}

.msger-send-btn-disable:hover {
    background: rgb(151, 146, 146);
}

.msger-chat {
    background-color: #fcfcfe;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23dddddd' fill-opacity='0.4'%3E%3Cpath d='M24.37 16c.2.65.39 1.32.54 2H21.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06A5 5 0 0 1-17.45 28v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H-20a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1L.9 19.22a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0L2.26 23h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM-13.82 27l16.37 4.91L18.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H-13.1z'/%3E%3Cpath id='path6_fill-copy' d='M284.37 16c.2.65.39 1.32.54 2H281.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06a5 5 0 0 1-2.24-8.94v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H240a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM246.18 27l16.37 4.91L278.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H246.9z'/%3E%3Cpath d='M159.5 21.02A9 9 0 0 0 151 15h-42a9 9 0 0 0-8.5 6.02 6 6 0 0 0 .02 11.96A8.99 8.99 0 0 0 109 45h42a9 9 0 0 0 8.48-12.02 6 6 0 0 0 .02-11.96zM151 17h-42a7 7 0 0 0-6.33 4h54.66a7 7 0 0 0-6.33-4zm-9.34 26a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-7a7 7 0 1 1 0-14h42a7 7 0 1 1 0 14h-9.34zM109 27a9 9 0 0 0-7.48 4H101a4 4 0 1 1 0-8h58a4 4 0 0 1 0 8h-.52a9 9 0 0 0-7.48-4h-42z'/%3E%3Cpath d='M39 115a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm6-8a6 6 0 1 1-12 0 6 6 0 0 1 12 0zm-3-29v-2h8v-6H40a4 4 0 0 0-4 4v10H22l-1.33 4-.67 2h2.19L26 130h26l3.81-40H58l-.67-2L56 84H42v-6zm-4-4v10h2V74h8v-2h-8a2 2 0 0 0-2 2zm2 12h14.56l.67 2H22.77l.67-2H40zm13.8 4H24.2l3.62 38h22.36l3.62-38z'/%3E%3Cpath d='M129 92h-6v4h-6v4h-6v14h-3l.24 2 3.76 32h36l3.76-32 .24-2h-3v-14h-6v-4h-6v-4h-8zm18 22v-12h-4v4h3v8h1zm-3 0v-6h-4v6h4zm-6 6v-16h-4v19.17c1.6-.7 2.97-1.8 4-3.17zm-6 3.8V100h-4v23.8a10.04 10.04 0 0 0 4 0zm-6-.63V104h-4v16a10.04 10.04 0 0 0 4 3.17zm-6-9.17v-6h-4v6h4zm-6 0v-8h3v-4h-4v12h1zm27-12v-4h-4v4h3v4h1v-4zm-6 0v-8h-4v4h3v4h1zm-6-4v-4h-4v8h1v-4h3zm-6 4v-4h-4v8h1v-4h3zm7 24a12 12 0 0 0 11.83-10h7.92l-3.53 30h-32.44l-3.53-30h7.92A12 12 0 0 0 130 126z'/%3E%3Cpath d='M212 86v2h-4v-2h4zm4 0h-2v2h2v-2zm-20 0v.1a5 5 0 0 0-.56 9.65l.06.25 1.12 4.48a2 2 0 0 0 1.94 1.52h.01l7.02 24.55a2 2 0 0 0 1.92 1.45h4.98a2 2 0 0 0 1.92-1.45l7.02-24.55a2 2 0 0 0 1.95-1.52L224.5 96l.06-.25a5 5 0 0 0-.56-9.65V86a14 14 0 0 0-28 0zm4 0h6v2h-9a3 3 0 1 0 0 6H223a3 3 0 1 0 0-6H220v-2h2a12 12 0 1 0-24 0h2zm-1.44 14l-1-4h24.88l-1 4h-22.88zm8.95 26l-6.86-24h18.7l-6.86 24h-4.98zM150 242a22 22 0 1 0 0-44 22 22 0 0 0 0 44zm24-22a24 24 0 1 1-48 0 24 24 0 0 1 48 0zm-28.38 17.73l2.04-.87a6 6 0 0 1 4.68 0l2.04.87a2 2 0 0 0 2.5-.82l1.14-1.9a6 6 0 0 1 3.79-2.75l2.15-.5a2 2 0 0 0 1.54-2.12l-.19-2.2a6 6 0 0 1 1.45-4.46l1.45-1.67a2 2 0 0 0 0-2.62l-1.45-1.67a6 6 0 0 1-1.45-4.46l.2-2.2a2 2 0 0 0-1.55-2.13l-2.15-.5a6 6 0 0 1-3.8-2.75l-1.13-1.9a2 2 0 0 0-2.5-.8l-2.04.86a6 6 0 0 1-4.68 0l-2.04-.87a2 2 0 0 0-2.5.82l-1.14 1.9a6 6 0 0 1-3.79 2.75l-2.15.5a2 2 0 0 0-1.54 2.12l.19 2.2a6 6 0 0 1-1.45 4.46l-1.45 1.67a2 2 0 0 0 0 2.62l1.45 1.67a6 6 0 0 1 1.45 4.46l-.2 2.2a2 2 0 0 0 1.55 2.13l2.15.5a6 6 0 0 1 3.8 2.75l1.13 1.9a2 2 0 0 0 2.5.8zm2.82.97a4 4 0 0 1 3.12 0l2.04.87a4 4 0 0 0 4.99-1.62l1.14-1.9a4 4 0 0 1 2.53-1.84l2.15-.5a4 4 0 0 0 3.09-4.24l-.2-2.2a4 4 0 0 1 .97-2.98l1.45-1.67a4 4 0 0 0 0-5.24l-1.45-1.67a4 4 0 0 1-.97-2.97l.2-2.2a4 4 0 0 0-3.09-4.25l-2.15-.5a4 4 0 0 1-2.53-1.84l-1.14-1.9a4 4 0 0 0-5-1.62l-2.03.87a4 4 0 0 1-3.12 0l-2.04-.87a4 4 0 0 0-4.99 1.62l-1.14 1.9a4 4 0 0 1-2.53 1.84l-2.15.5a4 4 0 0 0-3.09 4.24l.2 2.2a4 4 0 0 1-.97 2.98l-1.45 1.67a4 4 0 0 0 0 5.24l1.45 1.67a4 4 0 0 1 .97 2.97l-.2 2.2a4 4 0 0 0 3.09 4.25l2.15.5a4 4 0 0 1 2.53 1.84l1.14 1.9a4 4 0 0 0 5 1.62l2.03-.87zM152 207a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6 2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-11 1a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-6 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3-5a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-8 8a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm0 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4 7a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5-2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5 4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-5-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-24 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm16 5a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm7-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0zm86-29a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1 246 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM275 214a29 29 0 0 0-57.97 0h57.96zM72.33 198.12c-.21-.32-.34-.7-.34-1.12v-12h-2v12a4.01 4.01 0 0 0 7.09 2.54c.57-.69.91-1.57.91-2.54v-12h-2v12a1.99 1.99 0 0 1-2 2 2 2 0 0 1-1.66-.88zM75 176c.38 0 .74-.04 1.1-.12a4 4 0 0 0 6.19 2.4A13.94 13.94 0 0 1 84 185v24a6 6 0 0 1-6 6h-3v9a5 5 0 1 1-10 0v-9h-3a6 6 0 0 1-6-6v-24a14 14 0 0 1 14-14 5 5 0 0 0 5 5zm-17 15v12a1.99 1.99 0 0 0 1.22 1.84 2 2 0 0 0 2.44-.72c.21-.32.34-.7.34-1.12v-12h2v12a3.98 3.98 0 0 1-5.35 3.77 3.98 3.98 0 0 1-.65-.3V209a4 4 0 0 0 4 4h16a4 4 0 0 0 4-4v-24c.01-1.53-.23-2.88-.72-4.17-.43.1-.87.16-1.28.17a6 6 0 0 1-5.2-3 7 7 0 0 1-6.47-4.88A12 12 0 0 0 58 185v6zm9 24v9a3 3 0 1 0 6 0v-9h-6z'/%3E%3Cpath d='M-17 191a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2H3a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2H4zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1-14 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM15 214a29 29 0 0 0-57.97 0h57.96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.live-chat-unread-button {
    padding: 4px 13px;
    border-radius: 30px;
    font-size: 13px;
    position: relative;
    bottom: 0px;
    box-shadow: 0 4px 12px rgba(92, 101, 170, 0.65);
}

// Live Video Details Page
.live-detail-product-container {
    border: 1px solid #c4cdd5;
    border-radius: 3px;
    padding: 5px;
}
// @loading-bar-color: #ed3f3a;


// .loading-bars-wrapper {
//     width: 100%;
//     display: flex;
//     align-items: center;
//     justify-content: center;
    
//     &.isFixed {
//         position: fixed;
//         top: 0;
//         left: 0;
//         right: 0;
//         bottom: 0;
//         background-color: #FFFFFF;
//         z-index: 15;
//     }

//     .loading-bars {
//         width: 48px;

//         span {
//             float: left;
//             width: 8px;
//             height: 16px;
//             background-color: @loading-bar-color;
//             margin: 0 2px;
//             animation: loding-bars-anim 1.2s infinite ease-in-out;

//             &.bar2 {
//                 animation-delay: -1.1s;
//             }
//             &.bar3 {
//                 animation-delay: -1s;
//             }
//             &.bar4 {
//                 animation-delay: -0.9s;
//             }
//         }
//     }
// }

// @-webkit-keyframes loding-bars-anim {
//     0%, 40%, 100% {
//         transform: scaleY(0.6);
//     }
//     20% {
//         transform: scaleY(1.2);
//     }
// }

// @keyframes loding-bars-anim {    
//     0%, 40%, 100% {
//         transform: scaleY(0.6);
//     }
//     20% {
//         transform: scaleY(1.2);
//     }
// }



// @loading-bar-color: #ed3f3a;


.loading-bars-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    &.isFixed {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #FFFFFF;
        z-index: 15;
    }

    .loading-bars {
        // width: 48px;
        text-align: center;

    }
}

.loader {
 
  color:#ff4747;
  position: relative;
  padding-top: 100px;
  width: 130px;
  margin: auto;

  .circle {
    position: absolute;
    width: 120px;
    height: 120px;
    opacity: 0;
    transform: rotate(225deg);
    animation-iteration-count: infinite;
    animation-name: orbit;
    animation-duration: 3.5s;
    top: 75px;
    left: -17px;
    
    &:after {
      content: '';
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 10px;
      background: #ff4747; /* Pick a color */
    }
    &:nth-child(1) {  animation-delay: 0ms; }
    &:nth-child(2) {  animation-delay: 240ms; }
    &:nth-child(3) {  animation-delay: 480ms; }
    &:nth-child(4) {  animation-delay: 720ms; }
    &:nth-child(5) {  animation-delay: 960ms; }
 
  }
  .logo-text{
    h5{
     
      color: #ff4747;
      font-family: Kaushan Script;
      font-size: 38px;
      padding-right: 50px;
    }
  }
}

@keyframes orbit { 
  0%   { transform:rotate(225deg); opacity: 1;
         animation-timing-function: ease-out; } 
    
  7%   { transform:rotate(345deg);
         animation-timing-function: linear; }
    
  30%   { transform:rotate(455deg);
          animation-timing-function: ease-in-out; }
    
  39%   { transform:rotate(690deg);
          animation-timing-function: linear; }
    
  70%   { transform:rotate(815deg); opacity: 1;
         animation-timing-function: ease-out; }
    
  75%   { transform:rotate(945deg); 
         animation-timing-function: ease-out; }
    
  76% { transform:rotate(945deg); opacity: 0; }
  100% { transform:rotate(945deg); opacity: 0; } 
}

@media only screen and (max-width: @screen-sm-max) {
  .initiateFrame {
    .app_image {
      float: none;
    }
  }
  .listContainer {
    li {
      width: 25%;
      float: left;
      text-align: center;
    }
  }
  .features_leftContainer {
    .features_info {
      width: 100% !important;
    }
  }
}
@media only screen and (max-width: @screen-xs-max) {
  //col-xs
  .faq-container {
    margin: 0px 10px !important;
  }
  .header-section {
    padding-left: 23px;
    padding-right: 12px;
    font-size: 8px;
  }
  .product-name {
    .text-overflow();
  }
  .launchpage {
    .Polaris-Card__Section {
      padding: 0px !important;
    }
  }
  .features
    .featuresEditor
    .featureEditContainer
    .analyticRadio
    .analyticContent,
  .themePreview .themeDetails .themeNameContainer .card {
    margin: 0 !important;
  }
  .themePreview .themeDetails {
    margin-top: 0;
  }
  .modal_img {
    .modal_text_container {
      bottom: 20px;
      left: 10px;
      .modal_title {
        .modal_subtitle {
          font-size: @font-size-small;
        }
        .modal_maintitle {
          font-size: @font-size-large;
        }
      }
    }
  }
  .features {
    .product-name {
      font-size: @font-size-base;
    }
    .featuresEditor .featureEditContainer .form-check {
      label {
        font-size: 1.5rem !important;
      }
    }
  }
  /* Bootstrap 4 */
}
@media only screen and (min-width: @screen-xs-max) {
  //col-sm and above
  .color_label {
    margin-bottom: 20px;
  }
  .initiateFrame {
    &.top-space {
      margin-top: 40px;
    }
  }
  .popover {
    width: 100%;
  }
  .center-element {
    width: 100%;
  }
}
@media only screen and (max-width: 800px) {
  .dev-console {
    .storeContainer {
      .androidStore,
      .appleStore {
        width: 100% !important;
      }
    }
    .console-head {
      font-size: @font-size-base;
    }
  }
  .listSection {
    .plansContainer {
      .plan-list {
        li {
          font-size: @font-size-base;
        }
      }
    }
  }
  .html_desc {
    width: 98% !important;
  }
}
@media only screen and (max-width: 356px) {
  .card_button1,
  .plugins_enable_opt {
    margin-top: 10px;
  }
}
/* MDToast */

@media (max-width: 959px) {
  .middle-element {
    width: 50%;
  }
}

/* Bootstrap 4 */

@media (max-width: 576px) {
  .shopifyLogin {
    .shopifyLoginBtn {
      .login_text {
        font-size: 12px;
      }
    }
  }
  .popover {
    top:0 !important;
    left: 0 !important;
  }
  .center-element,
  .middle-element {
    width: 100%;
  }
  .topSpace {
    margin-top: 80px;
  }
  .app_badge {
    img {
      max-width: 60% !important;
    }
    .fullWidth {
      max-width: 100% !important;
    }
  }
  .order-xs-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-xs-last {
    -ms-flex-order: 13;
    order: 13;
  }
  .order-xs-0 {
    -ms-flex-order: 0;
    order: 0;
  }
  .order-xs-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-xs-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-xs-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-xs-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-xs-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-xs-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-xs-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-xs-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-xs-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-xs-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-xs-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-xs-12 {
    -ms-flex-order: 12;
    order: 12;
  }
}

@media (min-width: 576px) {
  .shopifyLogin {
    .shopifyLoginBtn {
      .login_text {
        font-size: 14px;
      }
    }
  }
  .center-element {
    width: 50%;
  }
  .topSpace {
    margin-top: 160px;
  }
  .order-sm-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-sm-last {
    -ms-flex-order: 13;
    order: 13;
  }
  .order-sm-0 {
    -ms-flex-order: 0;
    order: 0;
  }
  .order-sm-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-sm-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-sm-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-sm-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-sm-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-sm-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-sm-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-sm-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-sm-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-sm-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-sm-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-sm-12 {
    -ms-flex-order: 12;
    order: 12;
  }
}

@media (min-width: 768px) {
  .order-md-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-md-last {
    -ms-flex-order: 13;
    order: 13;
  }
  .order-md-0 {
    -ms-flex-order: 0;
    order: 0;
  }
  .order-md-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-md-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-md-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-md-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-md-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-md-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-md-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-md-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-md-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-md-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-md-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-md-12 {
    -ms-flex-order: 12;
    order: 12;
  }
}

@media (min-width: 992px) {
  .topSpace {
    margin-top: 10px;
  }
  .order-lg-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-lg-last {
    -ms-flex-order: 13;
    order: 13;
  }
  .order-lg-0 {
    -ms-flex-order: 0;
    order: 0;
  }
  .order-lg-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-lg-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-lg-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-lg-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-lg-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-lg-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-lg-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-lg-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-lg-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-lg-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-lg-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-lg-12 {
    -ms-flex-order: 12;
    order: 12;
  }
}

@media (min-width: 1200px) {
  .order-xl-first {
    -ms-flex-order: -1;
    order: -1;
  }
  .order-xl-last {
    -ms-flex-order: 13;
    order: 13;
  }
  .order-xl-0 {
    -ms-flex-order: 0;
    order: 0;
  }
  .order-xl-1 {
    -ms-flex-order: 1;
    order: 1;
  }
  .order-xl-2 {
    -ms-flex-order: 2;
    order: 2;
  }
  .order-xl-3 {
    -ms-flex-order: 3;
    order: 3;
  }
  .order-xl-4 {
    -ms-flex-order: 4;
    order: 4;
  }
  .order-xl-5 {
    -ms-flex-order: 5;
    order: 5;
  }
  .order-xl-6 {
    -ms-flex-order: 6;
    order: 6;
  }
  .order-xl-7 {
    -ms-flex-order: 7;
    order: 7;
  }
  .order-xl-8 {
    -ms-flex-order: 8;
    order: 8;
  }
  .order-xl-9 {
    -ms-flex-order: 9;
    order: 9;
  }
  .order-xl-10 {
    -ms-flex-order: 10;
    order: 10;
  }
  .order-xl-11 {
    -ms-flex-order: 11;
    order: 11;
  }
  .order-xl-12 {
    -ms-flex-order: 12;
    order: 12;
  }
}

@media (min-width: 768px) {
  md-toast {
    left: 25% !important;
  }

  md-toast .md-toast-content {
    max-width: 55% !important;
  }
}

@media (min-width: 960px) {

  md-toast .md-toast-content {
    max-width: 65% !important;
  }
}

@media (min-width: 550px) {
  md-toast {
    left: 10%;
  }

  md-toast .md-toast-content {
    max-width: 80%;
  }
}

@media (max-width: 768px) {
  .widget-modal {
    .widget-modal-dialog {
      width: 600px !important;
    }
  }
}

@media (max-width: 425px) {
  .top-navigation-bar {
    ul {
      li {
        font-size: 8px !important;
        padding-top: 20px !important;
      }
    }
  }
  .announcement-bar {
    font-size: 10px !important;
  }
  .new-builder-screen {
    padding-right: 5px !important;
    .right-col {
      .customize-app-container {
        .popup-modal {
          top: 10px !important;
          left: 10px !important;
          right: 10px !important;
          bottom: 10px !important;
          padding: 20px 4px 0px !important;
        }
      }
    }
  }
  .widget-modal {
    .widget-modal-dialog {
      width: 300px !important;
    }
  }
  .datetimepicker .hour,
  .datetimepicker .minute {
    margin-right: 31px !important;
  }
  .countdown-timer-wrapper{
    .timer-part-wrapper{
        .timer-part{
            span{
                min-width: 10px !important;
                min-height: 15px !important;
                font-size: 14px !important;
            }
        }
    }
  }
 
}
@media (max-width: 1024px) {
    .preview-popup .preview-design {
        width: 780px !important;
    }
}
@media (max-width: 768px) {
    .preview-popup .preview-design {
        width: 500px !important;
        padding-right: 20px;
        h3{
            font-size: 23px !important;
        }
        h5{
            font-size: 11px;
        }
        .copy-link{
            p{
                font-size: 8px;
            }
        }
        .text-center{
            p{
                font-size: 10px;
            }
        }
        .store{
            img{
                width: 100px;
            }
        }

    }
}
@media (max-width: 425px) {
    .preview-popup .preview-design {
        width: 300px !important;
        padding-right: 20px;
        padding-left: 20px !important;
        h3{
            font-size: 16px !important;
        }
        h5{
            font-size: 11px;
        }
        .copy-link{
            p{
                font-size: 8px;
            }
        }
        .text-center{
            p{
                font-size: 10px;
            }
            img{
                width: 120px;
            }
        }
       
        

    }
}
@media (max-width: 1024px) {
    .preview-popup .preview-design {
        width: 780px !important;
    }
}
@media (max-width: 768px) {
    .preview-popup .preview-design {
        width: 500px !important;
        padding-right: 20px;
        h3{
            font-size: 23px !important;
        }
        h5{
            font-size: 11px;
        }
        .copy-link{
            p{
                font-size: 8px;
            }
        }
        .text-center{
            p{
                font-size: 10px;
            }
        }
        .store{
            img{
                width: 100px;
            }
        }

    }
}
@media (max-width: 425px) {
    .preview-popup .preview-design {
        width: 300px !important;
        padding-right: 20px;
        padding-left: 20px !important;
        h3{
            font-size: 16px !important;
        }
        h5{
            font-size: 11px;
        }
        .copy-link{
            p{
                font-size: 8px;
            }
        }
        .text-center{
            p{
                font-size: 10px;
            }
            img{
                width: 120px;
            }
        }
       
        

    }
}

.new-theme {
    position: relative;
    font-family: @vajro-font;
    color: #000000;
    background-color: #FFFFFF;
    min-height: ~"calc(100vh - 72px)";
    padding: 32px;
    margin-top: -48px;

    // Common css
    :focus, :active:focus {
        outline: 0 none;
    }

    .pill {
        text-align: center;
        display: inline-block;
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.16px;
        padding: 3px 8px;
        line-height: 14px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -moz-background-clip: padding;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        color: #ffffff;
        background-color: #ffa54b;
    }

    .section-title {
        font-size: 14px;
        font-weight: normal;
        line-height: 1.36;
        letter-spacing: 0.28px;
        color: #000000;
        margin-bottom: 24px;

        span {
            display: block;
            font-size: 18px;
            font-weight: 600;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.06;
            letter-spacing: 0.36px;
            color: #000000;
            margin-bottom: 4px;
        }
    }

    .btn {
        font-family: @vajro-font;
        color: #ffffff;
        padding: 8px 24px;
        font-size: 12px;
        line-height: 1.2;
        background-color: #49ce9d;
        border-color: #49ce9d;
        border-radius: 2px;
        box-shadow: none;
        margin: 0;

        &:hover {
            background-color: darken(#49ce9d, 10%);
            border-color: darken(#49ce9d, 10%);
        }

        &:focus {
            outline: 0 none;
        }
    }

    .outer-container {
        max-width: 896px;
        
        .current-theme {
            display: flex;
            margin-bottom: 24px;
            background-color: #fff;
    
            .left-content-box {
                position: relative;
                width: 60%;
                padding: 24px 176px 24px 24px;
                background-color: #ffffff;
                border-radius: 4px;
                box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);

                .box-image {
                    width: 160px;
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: center;
                }
    
                p {
                    font-size: 12px;
                    margin-bottom: 24px;
    
                    span {
                        display: block;
                        font-size: 16px;
                        font-weight: 600;
                        letter-spacing: 0.32px;
                        margin-bottom: 8px;
                    }
                }
    
                .btn {
                    font-weight: 500;
                    letter-spacing: 0.24px;
                    padding: 8px 16px;
                    background-color: #000000;
                    border-color: #000000;
                    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);

                    &:hover {
                        background-color: lighten(#000000, 25%);
                        border-color: lighten(#000000, 25%);
                    }
    
                    i {
                        font-size: 12px;
                        margin-right: 4px;
                    }
                }
            }
    
            .right-content-box {
                width: 40%;
                padding: 16px 32px 16px 16px;
                background-color: #fafafa;
                margin-left: 16px;
    
                a, p {
                    color: #000000;
                    font-size: 12px;
                    font-weight: 500;
                    line-height: 1.5;
                    letter-spacing: 0.24px;
                }
    
                p {
                    margin-bottom: 16px;
                }
    
                a {
                    display: table;
                    margin-bottom: 16px;
                    color:#337ab7 !important;
                }
            }
        }

        .theme-card-wrapper {
            display: flex;
            flex-wrap: wrap;
            
            .theme-card {
                margin: 0 24px 24px 0;
    
                .image-card {
                    position: relative;
                    display: flex;
                    align-items: flex-end;
                    justify-content: center;
                    width: 200px;
                    height: 200px;
                    background-color: rgba(0, 0, 0, .4);
                    border-radius: 3px;
                    margin-bottom: 16px;
                    overflow: hidden;
                    cursor: pointer;
    
                    &.themes_new_1 {
                        background-image: linear-gradient(to bottom, #77edd2, #95d6ff);
                    }
        
                    &.themes_new_2 {
                        background-image: linear-gradient(to top, #8093ff, #72e2e6);
                    }
        
                    &.themes_new_3 {
                        background-image: linear-gradient(to bottom, #abff91, #fcffa5);
                    }
        
                    &.themes_new_4 {
                        background-image: linear-gradient(to bottom, #ffc37c, #e87474);
                    }
    
                    &:hover {
                        &:before, .preview-theme {
                            opacity: 1;
                        }
                    }
    
                    &:before, .preview-theme {
                        opacity: 0;
                        transition: opacity 0.3s;
                        -webkit-transition: opacity 0.3s;
                    }   
                    
                    &:before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background-color: rgba(0, 0, 0, .4);
                    }
    
                    &.disable-preview-theme {
                        &:before, .preview-theme {
                            display: none;
                        }
                    }
    
                    .preview-theme {
                        color: #ffffff;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        margin-top: -20px;
                        margin-left: -76px;
                        z-index: 1;
                        min-width: 152px;
                        padding: 10px 24px;
                        font-size: 12px;
                        font-weight: 500;
                        line-height: 1;
                        letter-spacing: 0.24px;
                        text-align: center;
                        background-color: rgba(0, 0, 0, .5);
                        border-radius: 5px;
    
                        i {
                            font-size: 20px;
                            margin-right: 6px;
                            vertical-align: -3px;
                        }
                    }
    
                    img {
                        width: 200px;
                        height: 200px;
                        object-fit: cover;
                        object-position: top;
                    }
    
                    .pill {
                        position: absolute;
                        top: 8px;
                        right: 8px;
                        background-color: #ff4540;
                        font-size: 14px;
                        font-weight: 600;
                        letter-spacing: 0.28px;
                        padding: 5px 8px;
                        color: #ffffff;
                        z-index: 1;
    
                        &.premium {
                            background-color: #ff9400;
                        }
                    }
                }
    
                .btn.btn-outline {
                    min-width: 200px;
                    font-size: 14px;
                    font-weight: 600;
                    line-height: 1;
                    letter-spacing: 0.28px;
                    height: 40px;
                    padding: 10px 16px;
                    border-radius: 2px;
                    background-color: #ffffff;
                    border: 1px solid #000000;
                    margin: 0;
    
                    &.active, &:active{
                        box-shadow: none;
                    }
    
                    &.black-btn {
                        border-radius: 3px;
                        color: #FFFFFF;
                        background-color: #000000;
                        border-color: #000000;
                        
                        &:hover {
                            background-color: lighten(#000000, 25%);
                            border-color: lighten(#000000, 25%);
                        }

                        .vajro-edit {
                            font-size: 16px;
                            margin-right: 4px;
                        }
                    }
                }
            }       
        }
    }

    .theme-modal {
        display: none;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 72px;
        left: 80px;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 9;
    
        &.in {
            display: flex;
        }
    
        :focus, :active:focus {
            outline: 0 none;
        }
    
        .theme-modal-content {
            position: relative;
            width: 424px;
            border-radius: 3px;
            background-color: #ffffff;

            .close-theme-modal {
                position: absolute;
                top: 16px;
                right: 16px;
                font-size: 16px;
                z-index: 1;
                cursor: pointer;
            }

            .btn {
                font-size: 14px;
                font-weight: 500;
                letter-spacing: 0.28px;
                padding: 10px 20px;
                background-color: #000000;
                border-color: #000000;

                &:hover {
                    background-color: lighten(#000000, 25%);
                    border-color: lighten(#000000, 25%);
                }
            }

            .video-banner {
                height: 232px;

                video {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: top;
                    background-color: #EEEEEE;
                }
                
                iframe {
                    border: none;
                    width: 100%;
                    height: 100%;
                }
            }

            .content {
                padding: 16px 24px 24px;

                p {
                    color: #000000;
                    margin-bottom: 0;
                    
                    &.heading-txt {
                        display: flex;
                        align-items: center;
                        font-size: 18px;
                        font-weight: bold;
                        line-height: 1;
                        letter-spacing: 0.36px;
                        margin-bottom: 8px;

                        .pill {
                            margin-left: 8px;
                        }
                    }

                    &.desc {
                        font-size: 14px;
                        font-weight: normal;
                        line-height: 1.5;
                        letter-spacing: 0.28px;
                        max-height: 80px;
                        padding-right: 16px;
                        margin-right: -16px;
                        overflow: hidden scroll;

                        /* scroll bar style starts */
                        &::-webkit-scrollbar {
                            width: 6px;
                            background-color: #F5F5F5;
                        }
                        &::-webkit-scrollbar-track {
                            background: #FFFFFF;
                            margin: 0;
                            border-radius: 15px;
                        }
                        &::-webkit-scrollbar-thumb {
                            border-radius: 15px;
                            background: #cccccc;
                        }
                        &::-webkit-scrollbar-thumb:hover {
                            background: rgba(0, 0, 0, .35); 
                        }
                        /* scroll bar style ends */
                    }
                }

                .btn-wrapper {
                    text-align: center;
                    margin-top: 64px;
                }
            }
        }
    }

    .modal {
        transition: opacity .15s linear;
    
        :focus, :active:focus {
            outline: 0 none;
        }
    
        .modal-dialog {
            position: relative;
            margin: 40px auto;
            width: 512px;
    
            .modal-content {
                background-color: #ffffff;
                border: none;
                border-radius: 0;
                box-shadow: none;
    
                .modal-header {
                    display: flex;
                    align-items: center;
                    font-size: 16px;
                    font-weight: 500;
                    padding: 4px 16px;
                    min-height: 48px;
    
                    .close {
                        font-size: 16px !important;
                        line-height: 1;
                        font-weight: normal;
                        opacity: 1;
                        position: absolute;
                        top: 16px;
                        right: 24px;
                        margin: 0;
                        z-index: 1;
                    }
                }
    
                .modal-body {
                    padding: 0px 24px 32px 32px;

                    .form-group {
                        margin: 0 0 16px;
                    }
                
                    .form-control {
                        height: 32px;
                        color: #000000;
                        font-size: 12px;
                        background-color: #fafafa;
                        border: 1px solid #dbdbdb;
                        border-radius: 2px;
                        box-shadow: none;

                        &:focus {
                            background-color: #ffffff;
                            border-color: #979797;
                        }

                        &::placeholder {
                            color: rgba(0, 0, 0, .3);
                        }
                    }

                    .control-label {
                        font-size: 14px;
                    }

                    .select-wrapper {
                        width: 60%;
                    }
                }
            }
        }
    
        &.sticky-header {
            .modal-content {
                padding-top: 64px;
    
                .modal-header {
                    width: 100%;
                    position: fixed;
                    top: 0;
                    left: 0;
                }
    
                .modal-body {
                    max-height: ~"calc(100vh - 320px)";
                    overflow: auto;
    
                    /* scroll bar style starts */
                    &::-webkit-scrollbar {
                        width: 6px;
                        background-color: #F5F5F5;
                    }
                    &::-webkit-scrollbar-track {
                        background: #FFFFFF;
                        margin: 0;
                    }
                    &::-webkit-scrollbar-thumb {
                        background: #cccccc;
                    }
                    &::-webkit-scrollbar-thumb:hover {
                        background: rgba(0, 0, 0, .35); 
                    }
                    /* scroll bar style ends */
                }
            }
        }
    }
}
@pricing-screen-text-color: #25c16f;
// @pricing-screen-text-color: #ff4747;
@highlight-skew-bg-color: #feda46;

.preloader{
  display: flex;
  background-color: #ffffff;
  position: fixed;
  top: 88px;
  right: 16px;
  bottom: 16px;
  left: 312px;
  border-radius: 4px;
  overflow: auto;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 989px){
  .preloader{
    left: 250px;
  }  
}
@media screen and (max-width: 767px) {
  .preloader{
    left: 16px;
  }
}
.new_billing {
  // common-css
  .btn {
    color: @pricing-screen-text-color;
    display: inline-block;
    min-width: 100px;
    padding: 7px 20px;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    background-color: transparent;
    border: 1px solid @pricing-screen-text-color;
    border-radius: 3px;
    box-shadow: none;
    white-space: normal;
    transition: background-color 0.15s ease-in;
    margin: 0;

    &:hover {
      color: @pricing-screen-text-color;
      background-color: fade(@pricing-screen-text-color, 10%);
    }

    &:focus,
    &:active:focus {
      outline: 0 none;
      box-shadow: none;
    }

    &.btn_invert-green {
      color: @pricing-screen-text-color;
      background-color: transparent;
      border: 1px solid @pricing-screen-text-color;

      &:hover {
        color: @pricing-screen-text-color;
        background-color: fade(@pricing-screen-text-color, 10%);
      }
    }

    &.active {
      color: #ffffff;
      background-color: @pricing-screen-text-color;

      &:hover {
        background-color: darken(@pricing-screen-text-color, 10%);
        border-color: darken(@pricing-screen-text-color, 10%);
      }
    }

    &.inactive {
      background-color: #000000;
      border-color: #000000;
      color: #ffffff;
    }
  }



  .price-text-details {
    margin: 15px 0;
    text-align: center;
    .currency-symbol {
      font-size: 24px;
      font-weight: 600;
      line-height: 1;
      display: inline-block;
    }

    .price-text {
      display: inline-block;
      font-size: 32px;
      font-weight: 600;
      color: #000;
      &::first-letter {
        font-size: 22px;
        vertical-align: super;
        margin-right: 4px;
      }

      small {
        font-size: 20px;
        font-weight: normal;
        margin-left: 8px;
      }
    }
  }


    .price-text-strikeout {
      color: #cccccc;
      font-size: 40px;
      margin-right: 12px;
      position: relative;
      display: inline-block;
      vertical-align: inherit;

      &::first-letter {
        font-size: 20px;
        vertical-align: super;
        margin-right: 4px;
      }

      &:before {
        content: "";
        width: 90%;
        height: 2px;
        background-color: #cccccc;
        position: absolute;
        top: 50%;
        margin-top: -1px;
        left: 8px;
        transform: rotate(16deg);
      }

      small {
        font-size: 18px;
        font-weight: normal;
        margin-left: 4px;
      }
    }
  }


  .pricing-table {
    display: table;
    width: 100%;
    position: relative;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid fade(@pricing-screen-text-color, 30%);
    border-radius: 10px;

    .coupon-applied-ribbon {
      width: 180px;
      height: 180px;
      position: absolute;
      top: -4px;
      left: -4px;
      overflow: hidden;
      z-index: 2;
      pointer-events: none;

      span {
        position: absolute;
        top: 40px;
        left: -42px;
        display: block;
        color: #ffffff;
        padding: 8px 40px;
        font-size: 13px;
        text-transform: uppercase;
        text-align: center;
        background-color: #7d42a1;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 20%);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 8%);
        transform: rotate(-45deg);
      }
    }

    .pricing-table-row {
      display: table-row;

      .pricing-table-column {
        display: table-cell;
        width: 20%;
        border-right: 1px solid fade(@pricing-screen-text-color, 30%);

        &:last-child {
          border-right: 0;
        }

        .pricing-table-header {
          padding: 24px 16px;
          border-bottom: 1px solid fade(@pricing-screen-text-color, 30%);

          h6 {
            font-size: 24px;
            line-height: 1.44;
            letter-spacing: 0.5px;
            margin: 0 0 8px;
          }

          p {
            max-width: 360px;
            font-size: 16px;
            line-height: 1.6;
            margin: 0 auto;
          }

          .pricing-pill-text {
            position: relative;
            top: -5px;
            display: inline-block;
            color: @pricing-screen-text-color;
            font-size: 8px;
            text-transform: uppercase;
            border-radius: 5px;
            padding: 3px 5px;
            background-color: fade(@pricing-screen-text-color, 10%);
            border: 1px solid fade(@pricing-screen-text-color, 40%);
            margin-left: 3px;
          }

          .highlight-skew {
            position: relative;
            z-index: 1;

            &:before {
              content: "";
              display: inline-block;
              position: absolute;
              top: 0;
              left: 0;
              width: 90%;
              height: 100%;
              background-color: @highlight-skew-bg-color;
              transform: rotate(-2deg);
              -webkit-transform: rotate(-2deg);
              -moz-transform: rotate(-2deg);
              -ms-transform: rotate(-2deg);
              -o-transform: rotate(-2deg);
              z-index: -1;
            }
          }
        }

        .pricing-table-body {
          position: relative;
          padding: 32px 16px;

          .coupon-applied-tag {
            position: absolute;
            top: 8px;
            left: 0;
            overflow: hidden;
            z-index: 1;
            color: #ffffff;
            padding: 4px 16px 4px 8px;
            font-size: 13px;
            font-weight: 500;
            line-height: 1.3;

            &:after {
              content: "";
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              background-color: #7d42a1;
              -webkit-transform-origin: 100% 0;
              -moz-transform-origin: 100% 0;
              -ms-transform-origin: 100% 0;
              transform-origin: 100% 0;
              -webkit-transform-origin: 100% 0 center;
              -moz-transform-origin: 100% 0 center;
              -ms-transform-origin: 100% 0 center;
              -o-transform-origin: 100% 0 center;
              transform: skew(-22deg);
              -webkit-transform: skew(-22deg);
              -moz-transform: skew(-22deg);
              -ms-transform: skew(-22deg);
              -o-transform: skew(-22deg);
              z-index: -1;
            }
          }

          .pricing-subtext {
            color: #666666;
            font-size: 14px;
            line-height: 1.75;
            margin-bottom: 16px;
          }

          .pricing-table-plan-btn {
            padding: 0 0 24px;
            border-bottom: 1px solid fade(@pricing-screen-text-color, 30%);

            .btn {
              color: @pricing-screen-text-color;
              display: inline-block;
              min-width: 100px;
              padding: 7px 20px;
              text-align: center;
              text-transform: uppercase;
              font-size: 12px;
              font-weight: 600;
              letter-spacing: 1px;
              background-color: transparent;
              border: 1px solid @pricing-screen-text-color;
              border-radius: 3px;
              box-shadow: none;
              white-space: normal;
              transition: background-color 0.15s ease-in;
              margin: 0;

              &:hover {
                color: @pricing-screen-text-color;
                background-color: fade(@pricing-screen-text-color, 10%);
              }

              &:focus,
              &:active:focus {
                outline: 0 none;
                box-shadow: none;
              }

              &.btn_invert-green {
                color: @pricing-screen-text-color;
                background-color: transparent;
                border: 1px solid @pricing-screen-text-color;

                &:hover {
                  color: @pricing-screen-text-color;
                  background-color: fade(@pricing-screen-text-color, 10%);
                }
              }

              &.active {
                color: #ffffff;
                background-color: @pricing-screen-text-color;

                &:hover {
                  background-color: darken(@pricing-screen-text-color, 10%);
                  border-color: darken(@pricing-screen-text-color, 10%);
                }
              }

              &.inactive {
                background-color: #000000;
                border-color: #000000;
                color: #ffffff;
              }
            }
          }

          .pricing-table-plan-features {
            list-style: none;
            padding-left: 0;
            margin: 32px 0 24px;

            li {
              position: relative;
              padding-left: 32px;
              font-size: 14px;
              line-height: 1.6;
              text-align: left;

              &:not(:last-child) {
                margin-bottom: 12px;
              }

              .vajro-tickmark {
                // color: #76c125;
                color: @pricing-screen-text-color;
                width: 20px;
                height: 20px;
                font-size: 10px;
                line-height: 22px;
                text-align: center;
                // background-color: rgba(118, 193, 37, 0.1);
                background-color: fade(@pricing-screen-text-color, 10%);
                border-radius: 50%;
                position: absolute;
                top: 0;
                left: 0;
              }

              .beta-tag {
                color: @pricing-screen-text-color;
                border: 1px solid @pricing-screen-text-color;
                border-radius: 3px;
                font-size: 8px;
                vertical-align: middle;
                font-style: inherit;
                padding: 1px;
                text-transform: uppercase;
                letter-spacing: 0.5px;
              }
            }
          }
        }
      }
    }
  }

  .explore-comparison-wrapper {
    text-align: center;
    margin: 24px 0 64px;

    a {
      color: @pricing-screen-text-color;
      font-size: 16px;
      text-decoration: none;
      transition: all 0.4s ease;

      &:hover {
        color: darken(@pricing-screen-text-color, 10%);

        .vajro-chevron-down {
          background-color: darken(@pricing-screen-text-color, 10%);
        }
      }

      .vajro-chevron-down {
        display: inline-block;
        width: 18px;
        height: 18px;
        color: #ffffff;
        font-size: 8px;
        padding-right: 1px;
        line-height: 20px;
        vertical-align: 1px;
        background-color: @pricing-screen-text-color;
        border-radius: 100%;
        transition: all 0.4s ease;

        &.up {
          transform: rotate(180deg);
          padding-right: 0;
        }
      }
    }
  }

  .pricing-faq-section {
    margin: 48px 0;

    .faq-heading {
      font-size: 36px;
      font-weight: 600;
      line-height: 1.33;
      margin-bottom: 32px;
    }

    .row {
      margin-right: -12px !important;
      margin-left: -12px !important;

      & > div {
        margin-bottom: 0;
      }

      [class*="col-"] {
        padding: 0 12px;
      }
    }

    .panel-group {
      .panel {
        max-width: 85%;
        background-color: transparent;
        border: solid fade(@theme-color, 20%);
        border-width: 1px 0 0;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        transition: border 0.25 ease-in, border-radius 0.25 ease;

        &:last-child {
          border-bottom-width: 1px;
        }

        .panel-heading {
          position: relative;
          text-transform: none;
          padding: 20px 0;
          background-color: transparent;
          border: none;
          cursor: pointer;
          transition: background-color 0.25s ease;

          &:hover {
            .panel-title {
              color: @theme-color;
            }
          }

          &:before,
          &:after {
            background: @theme-color;
            transition: background-color 0.25s ease;
          }

          &:before {
            content: "";
            position: absolute;
            width: 12px;
            height: 2px;
            top: 50%;
            right: 20px;
            margin-top: -1px;
            margin-right: -1px;
          }

          &:after {
            content: "";
            position: absolute;
            width: 2px;
            height: 12px;
            top: 50%;
            right: 24px;
            margin-top: -6px;
            -ms-transform: rotate(-90deg);
            transform: rotate(-90deg);
            opacity: 0;
            transition: transform 0.25s ease, opacity 0.25s ease 75ms;
          }

          &.collapsed:after {
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
            opacity: 1;
          }

          .panel-title {
            max-width: 85%;
            color: #4d4d4d;
            font-size: 14px;
            line-height: 1.4;
          }
        }

        .panel-body {
          color: #666666;
          padding: 24px 16px;
          font-size: 14px;
          line-height: 1.75;
          background-color: fade(@theme-color, 05%);
          border-radius: 3px;
          margin-bottom: 16px;
        }
      }
    }
  }

  .pricing-plan-tab {
    display: table;
    list-style: none;
    padding-left: 0;
    margin: 0;

    li {
      width: 264px;
      display: table-cell;
      vertical-align: middle;
      padding: 0 10px;
      text-align: center;
      position: relative;
    }
  }

  .plan-comparison-table {
    width: 96%;
    max-width: 1280px;
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #f5f5f5;
    border-bottom: 0;
    border-right: 0;
    overflow: hidden;
    margin: 0 auto;
    &.on-scroll {
      margin-top: 160px;
    }
    .cmp_row {
      border-bottom: 1px solid #f5f5f5;

      .cmp_cell {
        position: relative;
        padding: 10px;
        text-align: center;
        font-size: 14px;
        font-weight: normal;
        line-height: 1.4;
        border: 1px solid #e9e9e9;

        &:first-child {
          text-align: left;
          white-space: nowrap;
        }

        i {
          font-size: 14px;
          vertical-align: middle;
        }
      }
    }

    thead {
      .cmp_row {
        .cmp_cell {
          padding: 16px 24px 24px;

          h3 {
            font-size: 20px;
            font-weight: normal;
            white-space: nowrap;
            text-transform: uppercase;
          }

          .hide-com-features {
            display: block;
            cursor: pointer;

            &:focus {
              outline: 0 none;
            }

            &:before {
              width: 16px;
              height: 16px;
              border-radius: 3px;
              background-color: #eff0f2;
              content: "";
              display: inline-block;
              vertical-align: -3px;
              margin-right: 6px;
            }

            &.active:before {
              content: "\e91e";
              font-family: "vajro-icon";
              font-size: 9px;
              line-height: 18px;
              font-style: normal;
              text-align: center;
              color: #ffffff;
              background-color: #000000;
              vertical-align: 1px;
              padding-left: 1px;
            }
          }
        }
      }
    }

    tbody {
      .cmp_row {
        &.cmp_row-heading {
          .cmp_cell {
            text-align: left;
            background-color: #e9e9e9;
            font-size: 16px;
            font-weight: 600;
            line-height: 1.2;
          }
        }
      }
    }
  }

  .plan-comparison-table-fixed-layout {
    background: #ffffff;
    top: 0;
    left: 0;

    &.cmp-fixed {
      position: fixed;
      top: 72px;
      left: 80px;
      box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
      overflow: hidden;
      opacity: 1;
      z-index: 9;
      padding: 0 48px;
    }
  }

  .current-plan-details {
    width: 100%;
    padding: 24px 12px;
    text-align: center;
    background-color: #f4f4f4;
    border-radius: 3px;

    .row {
      display: flex;
      align-items: center;

      & > div {
        margin-bottom: 0;
      }

      [class*="col-"] {
        padding: 10px 12px;
      }
    }

    h4 {
      font-size: 20px;
      margin: 0 0 16px;
    }

    p {
      color: #9d9d9d;
      margin-bottom: 0;

      .anchor-link {
        font-weight: normal;
      }
    }

    .btn {
      background-color: #000000;
      border-color: #000000;
      color: #ffffff;
      font-size: 13px;
      padding: 12px 16px;

      &:hover {
        background-color: lighten(#000000, 25%);
        border-color: lighten(#000000, 25%);
      }
    }
  }

  .custom-charges {
    .row {
      display: block;
    }
    hr {
      border-top: 1px dashed #bdbdbd;
    }
    p {
      margin-bottom: 8px;
    }

    .btn {
      padding: 12px 20px;
    }
    .pay-now{
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      text-align: center;
      width: 200px;
      text-transform: uppercase;
      line-height: 1;
      border-radius: 4px;
      padding: 10px 20px;
      background-color: #f62468;
      margin: 0 10px 10px;
      border:none;
    }
    .payment-success {
      color: #000;
      font-size: 14px;
      font-weight: 600;
      text-align: center;
      width: 200px;
      text-transform: uppercase;
      line-height: 1;
      border-radius: 4px;
      padding: 10px 20px;
      background-color: #d6fff2;
      margin: 0 10px 10px;
    }
  }
.coupon-code {
  text-align: center;
  width: 420px;
  margin: 0 auto 64px;

  .form-group {
    margin: 0;

    .control-label {
      color: #aaaaaa;
      display: block;
      font-size: 15px;
      letter-spacing: -0.25px;
      margin-bottom: 24px;
      text-align: center;
    }

    .txtboxes-outer {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: -ms-flex;
      display: flex;
      -webkit-justify-content: space-evenly;
      -ms-justify-content: space-evenly;
      justify-content: space-evenly;

      .form-control {
        color: #2c2f42;
        background-color: #ffffff;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        -moz-background-clip: padding;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        text-align: center;
        padding: 4px 0;
        font-weight: 600;
        width: auto;
        font-size: 24px;
        line-height: 1.2;
        letter-spacing: -0.3px;
        margin: 0 6px;
        border-width: 0 0 2px 0;
        min-width: 0px;

        &:focus {
          border-color: #979797;

          &::placeholder,
          &::-webkit-input-placeholder {
            opacity: 0;
            transition: opacity 0.4s;
          }
        }
      }
    }

    .msg {
      position: relative;
      text-align: left;
      color: #4d4d4d;
      font-size: 15px;
      line-height: 1.5;
      letter-spacing: -0.3px;
      max-width: 336px;
      padding-left: 45px;
      margin: 40px auto 0;

      i {
        color: #ffffff;
        position: absolute;
        left: 0;
        top: 0;
        line-height: 32px;
        font-size: 14px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        text-align: center;
        opacity: 0.8;

        &.vajro-tickmark {
          background-color: #1cad45;
        }

        &.vajro-close-16 {
          background-color: #f44336;
        }
      }
    }
  }
  // .btn {
  //   color: @pricing-screen-text-color;
  //   display: inline-block;
  //   min-width: 100px;
  //   padding: 7px 20px;
  //   text-align: center;
  //   text-transform: uppercase;
  //   font-size: 12px;
  //   font-weight: 600;
  //   letter-spacing: 1px;
  //   background-color: transparent;
  //   border: 1px solid @pricing-screen-text-color;
  //   border-radius: 3px;
  //   box-shadow: none;
  //   white-space: normal;
  //   transition: background-color 0.15s ease-in;
  //   margin: 40px 0 0;

  //   &:hover {
  //     color: @pricing-screen-text-color;
  //     background-color: fade(@pricing-screen-text-color, 10%);
  //   }

  //   &:focus,
  //   &:active:focus {
  //     outline: 0 none;
  //     box-shadow: none;
  //   }

  //   &.btn_invert-green {
  //     color: @pricing-screen-text-color;
  //     background-color: transparent;
  //     border: 1px solid @pricing-screen-text-color;

  //     &:hover {
  //       color: @pricing-screen-text-color;
  //       background-color: fade(@pricing-screen-text-color, 10%);
  //     }
  //   }

  //   &.active {
  //     color: #ffffff;
  //     background-color: @pricing-screen-text-color;

  //     &:hover {
  //       background-color: darken(@pricing-screen-text-color, 10%);
  //       border-color: darken(@pricing-screen-text-color, 10%);
  //     }
  //   }

  //   &.inactive {
  //     background-color: #000000;
  //     border-color: #000000;
  //     color: #ffffff;
  //   }
  // }
}

.new-builder-screen {
    color: #000000;
    padding: 30px;

    background-color: #FFFFFF;

   .row{
    .col-md-4{
        padding-left: 0px;
        padding-right: 0px;
    }
   }

    // common css starts
    :focus, :active:focus {
        outline: 0 none;
    }

    .flex-form-group {
        display: flex;
        align-items: center;
        margin: 0 0 24px;

        .control-label {
            padding-right: 40px;
            margin-bottom: 0;
        }
    }

    hr {
        border-top: 1px dashed #bdbdbd;
    }

    .form-group {
        margin: 0 0 24px;
    }

    .control-label {
        color: #000000;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: 0.24px;
        margin-bottom: 8px;
    }

    .form-control {
        height: 40px;
        color: #000000;
        font-size: 13px;
        line-height: 1.75;
        letter-spacing: 0.24px;
        padding: 10px 16px;
        border-radius: 2px;
        border-radius: 2px;
        border: 1px solid #dbdbdb;
        background-color: #fafafa;
        box-shadow: none;
        
        &::placeholder {
            color: rgba(0, 0, 0, .3);
        }
        
        &:focus {
            border-color: #979797;
            background-color: #ffffff;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
        }
    }

    .btn-wrapper {
        text-align: right;

        .btn {     
            &:not(:last-child) {
                margin-right: 8px;
            }
        }
    }

    .btn {
        color: #FFFFFF;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: 0.24px;
        padding: 8px;
        min-width: 58px;
        background-color: #000000;
        border-color: #000000;
        border-radius: 2px;
        margin: 0;
        outline: 0 none;

        &.btn-outline {
            color: #000000;
            border-color: #000000;
            background-color: #FFFFFF;
        }
        
        &.delete-btn {
            background-color: #de3333;
            border-color: #de3333;
        }
    }
    
    .input-custom-search {
        position: relative;
        // font-size: 12px;
        // line-height: 1.75;
        // letter-spacing: 0.24px;
        // min-height: 40px;
        // cursor: pointer;

        /* Chrome, Safari, Edge, Opera */
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        input[type=number] {
            -moz-appearance: textfield;
        }

        .vajro-close, .drop-down-arrow {
            font-size: 14px;
            position: absolute;
            top: 50%;
            margin-top: -7px;
            right: 12px;
            line-height: 1;
        }

        .vajro-calendar {
            color: #9d9d9d;
            font-size: 16px;
            position: absolute;
            top: 50%;
            margin-top: -8px;
            right: 12px;
            line-height: 1;
        }

        .vajro-close {
            cursor: pointer;
        }

        .drop-down-arrow {
            &:before {
                content: "\e91b";
                font-family: "vajro-icon";
                font-style: normal;
            }
        }
        
        .form-control {
            display: inline-block;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-right: 40px;
        }

        &.searchmenu-open {
            // .drop-down-arrow:before {
            //     content: "\e91a";
            // }

            .search-menu {
                display: block;
                top: 100% !important;
                left: auto !important;
                right: auto !important;
                visibility: visible !important;
            }
        }

        .search-menu {
            display: none;
            position: absolute;
            top: 100%;
            width: 100%;
            height: 160px;
            font-size: 12px;
            line-height: 1.75;
            letter-spacing: 0.24px;
            margin-top: 8px;
            background-color: #FFFFFF;
            border-radius: 2px;
            box-sizing: border-box;
            box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
            z-index: 1;
            overflow: hidden;
            overflow-y: scroll;
            
            span {
                color: #000000;
                display: block;
                padding: 12px 20px;
                transition: background-color .4s;
                cursor: pointer;

                &:hover {
                    background-color: #fafafa;
                }
            }

            .no-result {
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: 160px;
            }
        }
    }

    .custom-tooltip {
        position: relative;
        min-width: 88px;
        color: #FFFFFF;
        font-size: 9px;
        line-height: 1.2;
        letter-spacing: 0.18px;
        background-color: #000000;
        border-radius: 3px;
        padding: 8px 10px;
        display: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 100ms, visibility 100ms;
        margin-left: 20px;

        &:before {
            content: '';
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            border-style: solid;
            border-image: initial;
            border-color: transparent #000000;
            border-width: 4px 6px 4px 0px;
            left: -6px;
        }
    }
    // common css ends


    .left-col {
       
        padding: 0 12px;

        p {
            color: rgba(0, 0, 0, .8);
            font-size: 16px;
            line-height: 1;
            letter-spacing: 0.32px;
            margin-bottom: 16px;

            &.title {
                color: #000000;
                font-weight: bold;
                padding: 0 16px;

                i {
                    vertical-align: bottom;
                    margin-left: 4px;
                    cursor: pointer;
                }
            }
        }

        .section-title {
            display: flex;
            align-items: center;
            min-height: 26px;
            color: #000000;
            font-size: 16px;
            line-height: 1;
            letter-spacing: 0.32px;
            font-weight: bold;
            padding: 0 16px;
            margin-bottom: 16px;
        }

        .add-new-widget {
            display: flex;
            align-items: center;
            margin-left: 8px;

            i {
                font-size: 16px;
                cursor: pointer;

                &:hover + .custom-tooltip {
                    opacity: 1;
                    visibility: visible;
                    display: inline-block;
                    animation: fadeInLeft .4s ease-in-out;
                }
            }

            .vertical-line-landing-page-seperator{
                display: inline-block;
                border-left: 1px solid #ccc;
                height: 15px;
                margin: 0 10px;
        }
        }

       
        .layout-tab-list-wrapper {
            display: flex;
            background-color: #f5f5f5;
            border-radius: 5px;

            .layout-tab-list {
                width: 100%;
                list-style: none;
                padding: 12px 14px;
                overflow: hidden;
                overflow-y: scroll;
                height: 432px;
                margin: 4px 2px;
                a{
                    color: #000;
                }
                a:focus, a:hover {
                    color: #000;
                    text-decoration: none;
                }
        
                li {
                    position: relative;
                    display: flex;
                    align-items: center;
                    padding: 12px 50px 12px 8px;
                    background-color: #ffffff;
                    border: 1px solid transparent;
                    border-radius: 2px;
                    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
                    min-height: 48px;
                    cursor: pointer;
                    transition: all .4s ease;
        
                    &:hover, &.active {
                        border-color: #000000;
                        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
                    }
        
                    &:not(:last-child) {
                        margin-bottom: 8px;
                    }
    
                    &:after {
                        content: "\e907";
                        font-family: 'vajro-icon';
                        position: absolute;
                        color: #000000;
                        right: 24px;
                    }
    
                    span {
                        &.txt {
                            font-size: 12px;
                            letter-spacing: 0.24px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
    
                        &.vajro-move {
                            font-size: 16px;
                            color: #dbdbdb;
                            padding: 8px;
                            vertical-align: -2px;
                            margin-right: 16px;
                            cursor: move;
                        }
                    }
    
                    .clock-icon {
                        color: #9d9d9d;
                        position: absolute;
                        right: 56px;
                        font-size: 18px;
                    }
    
                    .placeholder, & + .placeholder {
                        height: 48px;
                        margin-bottom: 8px;
                    }
                }
                
                &::-webkit-scrollbar {
                    width: 4px;
                }
                &::-webkit-scrollbar-thumb {
                    border-radius: 5px;
                }
                &::-webkit-scrollbar-track {
                    margin: 12px 0;
                }
            }
        }
    }
    @media (max-width: 768px) {
       .middle-col{
       margin:80px 0px;
        }
    }

   

    .right-col {    
        width: 100%;
        padding: 0 12px;


        .txt {
            color: rgba(0, 0, 0, 0.8);
            font-size: 14px;
            line-height: 1.5;
            margin-bottom: 0;
        }

        .customize-app-container {
            position: relative;
            width: 100%;
            min-height: 280px;
            padding: 16px 16px 24px 24px;
            background-color: #FFFFFF;
            border-radius: 2px;
            border: solid 1px #dbdbdb;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
            margin-bottom: 16px;

            .menu-list {
                position: absolute;
                top: 17px;
                right: 16px;
                display: flex;
                list-style: none;
                padding-left: 0;
                margin-bottom: 0;

                li {
                    &:not(:last-child) {
                        margin-right: 16px;
                    }

                    i {
                        color: #000000;
                        font-size: 16px;
                        line-height: 1;
                        vertical-align: middle;
                        cursor: pointer;

                        &.vajro-edit {
                            color: #9d9d9d;
                        }
                    }
                }

                .customize-menu {     
                    position: relative;
                    user-select: none;
                    -moz-user-select: none;
                    -webkit-user-drag: none;
                    -webkit-user-select: none;
                    -ms-user-select: none;
    
                    .dropdown-menu {
                        min-width: 152px;
                        left: auto;
                        right: 0;
                        background-color: #FFFFFF;
                        border-radius: 2px;
                        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
                        margin-top: 8px;
    
                        .menu-item {
                            display: flex;
                            align-items: center;
                            color: #000000;
                            font-size: 12px;
                            line-height: 1;
                            padding: 10px 16px;
                            cursor: pointer;
    
                            &:hover {
                                background-color: #f4f4f4;
                            }
                            
                            &.disable-menu-item {
                                color: #9d9d9d;
                            }
    
                            i {
                                font-size: 16px;
                                vertical-align: -2px;
                                margin-right: 8px;

                                &.disable-menu-item {
                                    color: #9d9d9d;
                                }
                            }
    
                            md-switch {
                                margin: 0 0 0 auto;
                                height: 20px;
                                &.md-checked .md-container .md-thumb-container .md-thumb {
                                   left: auto;
                                   right: -4px;
                                }
    
                                .md-container {
                                    margin: 0;
    
                                    .md-bar {
                                        width: 32px;
                                        height: 11px;
                                        top: 50%;
                                        margin-top: -5.5px;
                                    }
    
                                    .md-thumb-container {
                                        .md-thumb {
                                            width: 18px;
                                            height: 18px;
                                            top: 1px;
                                        }
                                    }
                                }
                            } 

                            .switch-outer {
                                position: absolute;
                                right: 16px;
                            }

                        }
                    
                    }
                }
            }

            .section-title-rewynd {
                display: block !important;
                .sub-title-txt {
                    color: rgba(0, 0, 0, 0.5);
                    font-size: 12px;
                    padding-top: 4px;
                }
            }

            .section-title {
                display: flex;
                align-items: center;
                min-height: 26px;
                padding-right: 56px;

                .title-txt {
                    display: flex;
                    align-items: center;
                    font-size: 15px;
                    line-height: 1;
                    letter-spacing: 0.24px;
                }

                .add-new-slider {
                    display: flex;
                    align-items: center;
                    margin-left: 8px;

                    i {
                        font-size: 16px;
                        cursor: pointer;

                        &:hover + .custom-tooltip {
                            opacity: 1;
                            visibility: visible;
                            display: inline-block;
                            animation: fadeInLeft .4s ease-in-out;
                        }
                    }
                }
            }

            .slider-img-action {
                text-align: right;
                margin-bottom: 8px;

                i {
                    color: #9d9d9d;
                    font-size: 16px;
                    vertical-align: middle;
                    cursor: pointer;

                    &:not(:last-child) {
                        margin-right: 16px;
                    }

                    &.vajro-delete:hover {
                        color: #ff4540;
                    }
                }
            }

            .slider-image {
                width: 100%;                
                
                figure {
                    width: 100%;
                    height: 160px;
                    margin: 0;
                }
            }

            .slider-pagination {
                color: rgba(0, 0, 0, .8);
                font-size: 12px;
                line-height: 1;
                letter-spacing: 0.24px;
                text-align: center;
                margin: 16px 0 0;
            }

            .image-slider {
                display: table;
                margin: 0 24px 8px 8px;

                .slider-img-action {
                    i {
                        &:not(:last-child) {
                            margin-right: 8px;
                        }
                    }
                }

                &.with-text {
                    .square-image {
                        padding: 12px;
                        border: 1px solid #dbdbdb;
                        border-radius: 3px;
                        background-color: #FFFFFF;

                        figure {    
                            position: relative;
                            display: flex;
                            align-items: flex-end;
                            justify-content: center;
                            cursor: default;

                            figcaption {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                padding: 8px;
                                position: absolute;
                                left: 8px;
                                right: 8px;
                                bottom: 22px;
                                text-align: center;
                                background-color: #ffffff;                  
                                z-index: 1;
    
                                span {
                                    color: #000000;
                                    font-size: 14px;
                                    font-weight: 500;
                                    line-height: 1.5;
                                    letter-spacing: 0.28px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                }
        
                                i {
                                    color: #9d9d9d;
                                    font-size: 16px;
                                    cursor: pointer;
                                    margin-left: 8px;
                                }
                            }
                        }
                    }
                }

                .circle-image {
                    width: 150px;
                    height: 150px;
                    padding: 20px 12px;
                    border: 1px solid #dbdbdb;
                    border-radius: 3px;
                    background-color: #FFFFFF;

                    img {
                        display: table;
                        width: 80px;
                        height: 80px;
                        object-fit: cover;
                        border-radius: 100%;
                        margin: 0 auto 8px;
                        &.no-border-radius {
                            border-radius: 0% !important;
                        }
                    }

                    p {
                        display: flex;
                        justify-content: center;
                        color: rgba(0, 0, 0, .8);
                        font-size: 14px;
                        font-weight: 500;
                        line-height: 1.2;
                        letter-spacing: 0.28px;
                        margin-bottom: 0;

                        span {
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        i {
                            color: #9d9d9d;
                            font-size: 16px;
                            cursor: pointer;
                            margin-left: 8px;
                        }
                    }
                }

                .square-image {
                    width: 150px;
                    height: 150px;

                    figure {
                        width: 100%;
                        height: 100%;
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: cover;
                        border-radius: 3px;
                        background-color: #f4f4f4;
                    }
                }
            }

            .live-video-slider {
                figure {
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 100%;
                    height: 160px;
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: cover;
                    border-radius: 2px;
                    overflow: hidden;
                    cursor: pointer;

                    &:before {
                        content: "";
                        position: absolute;
                        left: 0px;
                        top: 0px;
                        bottom: 0px;
                        right: 0px;
                        background: inherit;
                        transition: all 0.3s ease 0s;
                    }

                    &:after {
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background-color: rgba(0, 0, 0, .6);
                    }

                    &:hover:before {
                        transform: scale(1.1);
                    }

                    figcaption {
                        position: absolute;
                        color: #ffffff;                        
                        font-size: 11px;
                        font-weight: 600;
                        line-height: 1.27;
                        z-index: 1;
                    }
                }
            }

            .instagram-feed {
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: 160px;
                background-color: #fafafa;
                border-radius: 2px;
                border: 1px solid #f4f4f4;

                .btn {
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    font-weight: 500;
                    line-height: 1.6;
                    color: #FFFFFF;
                    padding: 12px 32px;
                    background-color: #000000;
                    border-radius: 3px;
                    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
                    cursor: pointer;

                    i {
                        font-size: 24px;
                        margin-right: 6px;
                    }

                    &.connected {
                        color: #26bf8c;
                        background-color: #fafafa;
                        border: 1px solid #46c596;
                        box-shadow: none;
                        i {
                            margin-right: 12px;
                        }
                    }

                    .instagram-profile-pic {
                        display: inline-block;
                        width: 32px;
                        height: 32px;
                        background-size: cover;
                        background-position: center;
                        background-repeat: no-repeat;
                        border-radius: 100%;
                        margin-right: 8px;
                    }
                }
            }

            .popup-modal {
                background-color: #FFFFFF;
                position: absolute;
                top: 24px;
                left: 24px;
                right: 24px;
                bottom: 24px;
                padding: 28px 24px 16px;
                z-index: 2;
                display: none;
                opacity: 0;
                visibility: hidden;
                -webkit-transition: opacity 100ms, visibility 100ms;
                transition: opacity 100ms, visibility 100ms;
                overflow: hidden scroll;

                &.in {
                    display: block;
                    opacity: 1;
                    visibility: visible;
                    animation: fadeIn .1s ease-in-out;
                }

                p {
                    color: rgba(0, 0, 0, .6);
                    font-size: 14px;
                    line-height: 1.5;
                    letter-spacing: 0.28px;
                    margin-bottom: 56px;
                    
                    &.enable-icon {
                        position: relative;
                        padding-left: 24px;

                        i {
                            font-size: 16px;
                            color: #ffb763;
                            position: absolute;
                            top: 4px;
                            left: 0;
                        }
                    }

                    span {
                        display: block;
                        color: #000000;
                        font-size: 16px;
                        font-weight: 500;
                        margin-bottom: 10px;
                    }
                }

                .edit-popup-modal {
                    .close-icon {
                        position: absolute;
                        top: 16px;
                        right: 16px;
                        font-size: 16px;
                        cursor: pointer;
                    }

                    .form-group {
                        margin-bottom: 16px;
                    }

                    .form-control {
                        height: 32px;
                    }

                    .datetimepicker {
                        width: 100%;
                            
                    }
                }
            }

            .delete-popup-modal {
                .btn {
                    padding: 12px 20px;
                }
            }

            .bg-overlay {
                background-color: rgba(0, 0, 0, 0.24);
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: 1;
                display: none;
                opacity: 0;
                visibility: hidden;
                -webkit-transition: opacity 100ms, visibility 100ms;
                transition: opacity 100ms, visibility 100ms;

                &.in {
                    display: block;
                    opacity: 1;
                    visibility: visible;
                    animation: fadeIn .1s ease-in-out;
                }
                .translate-link{
                padding-left: 10px;
                }
            }

            // widget-carousel-slider css starts
            .widget-carousel-slider {
                .rn-carousel-controls {
                    position: relative;
                    display: flex;
                    justify-content: flex-end;
                    margin-top: 16px;

                    .rn-carousel-control {
                        position: relative;
                        top: auto;
                        left: auto;
                        right: auto;
                        bottom: auto;
                        font-size: 18px;
                        line-height: 1;

                        &:before {
                            content: "\e919";
                            font-family: 'vajro-icon';
                            font-style: normal;
                        }

                        &.rn-carousel-control-prev:before {
                            display: inline-block;
                            transform: scaleX(-1);
                        }
                        &.rn-carousel-control-next {
                            margin-left: 16px;
                        }
                    }
                }

                .carousel-indicators {
                    margin-top: -20px;
                    position: relative;

                    .rn-carousel-indicator {
                        span {
                            width: 10px;
                            height: 10px;
                            display: inline-block;
                            line-height: 1;
                            vertical-align: middle;
                            color: transparent;
                            background-color: transparent;
                            border: 1px solid #FFFFFF;
                            border-radius: 100%;
                            
                            &:not(:last-child) {
                                margin-right: 8px;
                            }

                            &.active {
                                background-color: #FFFFFF;
                            }
                        }
                    }
                }
            }
            // widget-carousel-slider css ends

            .replay-live-video {
                .text-with-switch {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 16px;
                    
                    p {
                        max-width: 308px;
                        color: #000000;
                        font-size: 12px;
                        font-weight: normal;
                        line-height: 1.5;
                        letter-spacing: 0.24px;
                        margin-bottom: 0;
                    }

                    .switch-outer {
                        .switch {
                            width: 40px;
                            height: 24px;

                            input:checked + .slider {

                                &:before {
                                    transform: translateX(18px);
                                    -webkit-transform: translateX(18px);
                                    -ms-transform: translateX(18px);
                                }
                            }

                            .slider {

                                &:before {
                                    width: 14px;
                                    height: 14px;
                                    top: 50%;
                                    margin-top: -7px;
                                    left: 4px;
                                    background-color: #FFFFFF;
                                }
                            }
                        }
                    } 
                }

                .dropdown {
                    &.open {
                        .dropdown-toggle .input-custom-search:after {
                            transform: rotate(180deg);
                        }
                    }

                    .dropdown-toggle {
                        .input-custom-search {
                            &:after {
                                content: "\e91b";
                                font-family: "vajro-icon";
                                font-size: 14px;
                                position: absolute;
                                top: 50%;
                                margin-top: -7px;
                                right: 12px;
                                line-height: 1;
                                transition: all .5s ease;
                                transform: rotate(0);
                            }
                        }
                    }

                    .dropdown-menu {
                        background-color: #ffffff;
                        border-radius: 2px;
                        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
                        height: 180px;
                        margin: 8px 0 0;
                        overflow: hidden scroll;

                        li {
                            font-size: 12px;
                            line-height: 1.5;
                            letter-spacing: 0.24px;
                            padding: 12px 24px;
                            cursor: pointer;

                            &:hover {
                                background-color: #fafafa;
                                transition: all .5s;
                            }
                        }
                    }
                }

                .btn-wrapper {
                    text-align: left;
                }
            }
        }
    }

    /* scroll bar style starts */
    ::-webkit-scrollbar {
        width: 3px;
        background-color: #F5F5F5;
    }
    ::-webkit-scrollbar-track {
        background: #F5F5F5;
        margin: 0;
    }
    ::-webkit-scrollbar-thumb {
        background: #cccccc;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, .35); 
    }
    /* scroll bar style ends */

        
    .customize-app-x-scroll {
        display: flex;
        padding-bottom: 8px;
        overflow: hidden;
        overflow-x: scroll;

        &::-webkit-scrollbar {
            height: 8px;
        }
    }

    .banner_image{
        min-width: -webkit-fill-available;
    }

    // ANIMATIONS
    @keyframes fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    @keyframes fadeInLeft {
        0% {
            opacity: 0;
            transform: translateX(-4px);
        }
        100% {
            opacity: 1;
            transform: translateX(0px);
        }
    }
}

.new-integration-screen {
    color: #000000;
    font-family: @vajro-font;

    // common css starts
    .row {

        &>div {
            margin-bottom: 0;
        }

        [class*='col-'] {
            padding: 0 12px;
        }
    }

    :focus, :active:focus {
        outline: 0 none;
    }

    .btn {
        min-width: 160px;
        color: #FFFFFF;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: 0.28px;
        padding: 10px 20px;
        background-color: #000000;
        border: 1px solid #000000;
        border-radius: 2px;
        margin: 0;

        &.btn-outline {
            color: #000000;
            background-color: #fafafa;
            border-color: #000000;
        }
    }
    // common css ends

    .section-title {
        display: flex;
        align-items: center;
        margin-bottom: 24px;

        p {
            font-size: 18px;
            font-weight: 600;
            line-height: 1.12;
            letter-spacing: 0.36px;
            margin-bottom: 0;

            span {
                display: block;
                font-size: 12px;
                font-weight: 300;
                line-height: 1.6;
                letter-spacing: 0.24px;
                margin-top: 4px;
            }
        }

        .view-all {
            color: #000000;
            display: flex;
            align-items: center;
            font-size: 18px;
            font-weight: 300;
            line-height: 1.12; 
            letter-spacing: 0.36px;
            text-decoration: none;
            margin: 0 0 auto auto;

            i {
                font-size: 16px;
                margin-left: 6px;
            }
        }
        
        .right-col {
            display: flex;
            align-items: center;
            margin-left: auto;

            a {
                color: #4e71e6;
                font-size: 12px;
                font-weight: normal;
                line-height: 1;
                letter-spacing: 0.24px;
                text-decoration: none;
                padding-bottom: 4px;
                border-bottom: 1px solid #4e71e6;
                margin-right: 24px;
            }
        }
    }

    .title {
        font-size: 16px;
        line-height: 1.5;
        letter-spacing: normal;
        margin-bottom: 16px;
        padding-left: 15px;
    }

    .integration-card {
        position: relative;
        display: flex;
        height: 152px;
        padding: 16px;
        background-color: #ffffff;
        border-radius: 2px;
        box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
        overflow: hidden;
        transition: all .4s ease;
        margin: 0 24px 24px 0;
        cursor: pointer;

        &:hover {
            box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
        }

        .locked-icon {
            width: 48px;
            height: 48px;
            position: absolute;
            top: 0;
            right: 0;

            &:before {
                content: '';
                width: 0;
                height: 0;
                display: inline-block;
                border-top: 48px solid @theme-color;
                border-left: 48px solid transparent;
            }

            i {
                position: absolute;
                top: 6px;
                right: 6px;
                color: #FFFFFF;
                font-size: 16px;
            }
        }

        .admin-only-badge {
            color: #FFFFFF;
            font-size: 11px;
            line-height: 1.2;
            position: absolute;
            top: 20px;
            right: -24px;
            background-color: #ff4540;
            padding: 4px 24px;
            transform: rotate(45deg);
        }

        .enabled-btn {
            font-size: 12px;
            font-weight: 500;
            line-height: 1.5;
            text-align: center;
            color: #26bf8c;
            padding: 2px 6px;
            border-radius: 2px;
            border: 1px dashed #26bf8c;
            position: absolute;
            right: 16px;
            bottom: 12px;
        }
        .enabled-btn-recommendation {
            font-size: 12px;
            font-weight: 500;
            line-height: 1.5;
            text-align: center;
            color: #26bf8c;
            padding: 2px 6px;
            border-radius: 2px;
            border: 1px dashed #26bf8c;
            position: absolute;
            right: 30px;
        }
        .view-site {
            display: inline-block;
            color: rgba(0, 0, 0, 0.8);
            font-size: 10px;
            line-height: 1.5;
            text-decoration: none;
            padding-bottom: 1px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.8);
            margin-bottom: 16px;
        }

        .left-col {
            width: 24%;
            text-align: center;

            img {
                display: block;
                min-width: 64px;
                height: 64px;
                object-fit: contain;
                background-color: #FFFFFF;
                border-radius: 2px;
                box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
                margin-bottom: 4px;
            }
        }
        
        .right-col {
            width: 76%;
            padding-left: 16px;

            p {
                color: rgba(0, 0, 0, .8);
                font-size: 11px;
                line-height: 1.5;
                margin-bottom: 6px;

                span {
                    display: block;
                    color: #000000;
                    font-size: 14px;
                    font-weight: 500;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    margin-bottom: 2px;
                }

                &.txt {
                    font-size: 12px;
                    color: #adadad;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    margin-bottom: 0;
                }
            }
        }
    }

    .integration-main-layout {
        .row-eq-hgt {
            display: -webkit-flex;
            display: -ms-flexbox;
            display: -ms-flex;
            display: flex;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;

            [class*='col-'] {
                display: -webkit-flex;
                display: -ms-flexbox;
                display: -ms-flex;
                display: flex;
            }
        }

        .integration-card {
            width: 100%;
            height: auto;
            flex-wrap: wrap;
            padding: 24px 20px 40px;  
            border-radius: 4px;
            margin: 0 0 24px;

            &:hover {
                box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.16);
            }

            .left-col {
                width: 68px;

                img {
                    min-width: 68px;
                    height: 68px;
                    margin-bottom: 8px;
                }
            }

            .right-col {
                width: 100%;
                padding-left: 0;

                p {
                    font-size: 12px;
                    margin-bottom: 8px;

                    span {
                        font-size: 15px;
                        margin-bottom: 4px;
                    }

                    &.txt {
                        margin-bottom: 0px;
                    }
                }
            }
        }

        .integration-view-collection-card {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: center;
            text-align: center;
            padding: 32px 16px;
            background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 80%) 0%) 100%, url('https://res.cloudinary.com/vajrohq/image/upload/v1612496782/admin_console/misc/integrations_view_collections_bg_2x.png') no-repeat center / cover;
            border-radius: 4px;
            margin-bottom: 24px;

            p {
                color: #ffffff;
                font-size: 14px;
                font-weight: 500;
                line-height: 1.4;
                letter-spacing: 0.28px;
                margin-bottom: 24px;

                span {
                    display: block;
                    font-size: 20px;
                    font-weight: 600;
                    line-height: 1;
                    letter-spacing: 0.4px;
                    margin-bottom: 12px;
                }
            }

            .btn.black-btn {
                color: #ffffff;
                padding: 8px 24px;
                font-size: 12px;
                font-family: @vajro-font;
                line-height: 1.2;
                letter-spacing: 0.24px;
                background-color: #4e71e6;
                border-color: #4e71e6;
                border-radius: 2px;
                box-shadow: none;
                margin: auto 0 0;

                &:hover {
                    background-color: darken(#4e71e6, 25%);
                    border-color: darken(#4e71e6, 25%);
                }

                &:focus {
                    outline: 0 none;
                }
            }
        }
    }
}

.new-integration-screen-modal {
    transition: opacity .15s linear;

    :focus, :active:focus {
        outline: 0 none;
    }

    .modal-dialog {
        position: relative;
        margin: 40px auto;
        width: 664px;

        .modal-content {
            background-color: #ffffff;
            border: none;
            border-radius: 0;
            box-shadow: none;

            .modal-header {
                padding: 4px 16px;
                min-height: 40px;
                border: none;

                .close {
                    font-size: 16px !important;
                    line-height: 1;
                    font-weight: normal;
                    opacity: 1;
                    position: absolute;
                    top: 16px;
                    right: 24px;
                    margin: 0;
                    z-index: 1;
                }
            }

            .modal-body {
                padding: 0px 24px 32px 32px;
                min-height: 320px;

                .integration-modal-content {
                    padding-left: 256px;

                    .left-content {
                        width: 232px;
                        position: fixed;
                        left: 32px;
    
                        // common css for left content starts
                        p {
                            color: rgba(0, 0, 0, 0.8);
                            font-size: 12px;
                            line-height: 1.5;
                            margin-bottom: 0;
    
                            span {
                                display: block;
                                color: #000000;
                                font-size: 14px;
                                line-height: 1.24;
                                font-weight: 500;
                                margin-bottom: 4px;
                            }
    
                            &.txt {
                                color: #b9b9b9;
                                line-height: 1.4;
                                margin-bottom: 16px;
                            }
                        }
                        // common css for left content ends
                        
                        .integration-card-details {
                            padding: 20px 8px 20px 24px;
                            background-color: #f8f8f8;
                            border-radius: 3px;
                            margin-bottom: 4px;
    
                            .integration-card {
                                display: flex;
                                margin-bottom: 16px;
        
                                .left-col {
                                    width: 25%;
                                    text-align: center;
        
                                    img {
                                        display: block;
                                        width: 44px;
                                        height: 44px;
                                        object-fit: contain;
                                        background-color: #FFFFFF;
                                        border-radius: 2px;
                                        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
                                        margin: 0 auto;
                                    }
                                }
                                .right-col {
                                    width: 75%;
                                    padding: 4px 0 0 8px;
                                }
                                
                            }
                            a {
                                color: #000000;
                                font-size: 12px;
                                line-height: 1;
                                text-decoration: none;
                                padding-bottom: 2px;
                                border-bottom: 1px solid rgba(0, 0, 0, 0.8);
                            }
                        } 
    
                        .how-to-setup {
                            position: relative;
                            padding: 16px 16px 16px 56px;
                            background-color: #f8f8f8;
                            border-radius: 3px;
                            cursor: pointer;
        
                            .file-img {
                                background: url('https://res.cloudinary.com/vajrohq/image/upload/v1610100847/admin_console/misc/file.png') no-repeat center / cover;
                                width: 32px;
                                height: 32px;
                                position: absolute;
                                top: 14px;
                                left: 16px;
                            }
        
                            p {
                                color: rgba(0, 0, 0, 0.5);
                                font-size: 10px;
                                font-weight: normal;
                                line-height: 1;
                                margin-bottom: 0;
        
                                span {
                                    font-size: 12px;
                                    line-height: 1.2;
                                    margin-bottom: 4px;
                                }
                            }
                        }
                        .integration-info{
                            padding-top:25px;
                        }
                         
                    }
    
                    .right-content {
                        padding: 12px 0;
    
                        p {
                            color: #000000;
                            font-size: 16px;
                            font-weight: 500;
                            line-height: 1.3;
                            margin-bottom: 16px;
    
                            .icon-img {
                                vertical-align: text-top;
                                display: inline-block;
                            }
                        }
    
                        .form-group {
                            margin: 0 0 16px;
                        }
    
                        .flex-form-group {
                            display: flex;
                            align-items: center;
                            margin: 0 0 24px;
                    
                            .control-label {
                                padding-right: 40px;
                                margin-bottom: 0;
                            }
                        }
    
                        .control-label {
                            font-size: 14px;
                            font-weight: 500;
                            line-height: 1.29;
                            letter-spacing: 0.28px;
                        }
                    
                        .form-control {
                            height: 32px;
                            color: #000000;
                            font-size: 12px;
                            background-color: #fafafa;
                            border: 1px solid #dbdbdb;
                            border-radius: 2px;
                            box-shadow: none;
    
                            &:focus {
                                background-color: #ffffff;
                                border-color: #979797;
                            }
    
                            &::placeholder {
                                color: rgba(0, 0, 0, .3);
                            }
                        }
    
                        .switch-outer {
                            display: flex;
                    
                            .switch {
                                width: 36px;
                                height: 20px;
                    
                                input:checked {
                                    &~ .slider {
                                        background-color: #13b966;
                                        
                                        &:before {
                                            transform: translateX(16px);
                                        }
                                    }
                                }
                    
                                .slider {
                                    background: #dbdbdb;
                    
                                    &:before {
                                        height: 12px;
                                        width: 12px;
                                        margin-top: -6px;
                                        left: 4px;
                                        background-color: #ffffff;
                                    }
                                }
                            }
                        }
    
                        .btn-wrapper {
                            .btn {
                                position: relative;
                                color: #ffffff;
                                padding: 8px 24px;
                                font-size: 12px;
                                line-height: 1.2;
                                background-color: #49ce9d;
                                border-color: #49ce9d;
                                border-radius: 2px;
                                box-shadow: none;
                                margin: 0;

                                .button-text {
                                    transition: all 0.2s;
                                }

                                &.btn-disabled {
                                    cursor: not-allowed;
                                    .button-text {
                                        visibility: hidden;
                                        opacity: 0;
                                    }
                                    &::after {
                                        content: "";
                                        position: absolute;
                                        width: 24px;
                                        height: 24px;
                                        top: 0;
                                        left: 0;
                                        right: 0;
                                        bottom: 0;
                                        margin: auto;
                                        border: 3px solid transparent;
                                        border-top-color: #ffffff;
                                        border-radius: 50%;
                                        animation: button-loading-spinner 1s ease infinite;
                                    }
                                }
    
                                &:hover {
                                    background-color: darken(#49ce9d, 10%);
                                    border-color: darken(#49ce9d, 10%);
                                }
    
                                &:focus {
                                    outline: 0 none;
                                }
    
                                &.black-btn {
                                    background-color: #000000;
                                    border-color: #000000;
    
                                    &:hover {
                                        background-color: lighten(#000000, 25%);
                                        border-color: lighten(#000000, 25%);
                                    }
                                }

                                @keyframes button-loading-spinner {
                                    from {
                                        transform: rotate(0turn);
                                    }
                                    to {
                                        transform: rotate(1turn);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    &.sticky-header {
        .modal-content {
            padding-top: 40px;

            .modal-header {
                width: 100%;
                position: fixed;
                top: 0;
                left: 0;
            }

            .modal-body {
                max-height: ~"calc(100vh - 320px)";
                overflow: auto;

                /* scroll bar style starts */
                &::-webkit-scrollbar {
                    width: 6px;
                    background-color: #F5F5F5;
                }
                &::-webkit-scrollbar-track {
                    background: #FFFFFF;
                    margin: 0;
                }
                &::-webkit-scrollbar-thumb {
                    background: #cccccc;
                }
                &::-webkit-scrollbar-thumb:hover {
                    background: rgba(0, 0, 0, .35); 
                }
                /* scroll bar style ends */
            }
        }
    }
}

.integration-tab-wrapper {
    padding: 20px 10px;
    border-radius: 2px;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
    background-color: #FFFFFF;
    position: fixed;
    width: 28%;
    overflow: hidden;
    bottom: 16px;
    top: 88px;
    overflow-y: scroll;

    scrollbar-width: thin;

   
    

    .integration-tab {
        position: relative;
        display: block;
        color: #000000;
        padding: 12px 40px 12px 16px;
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: 0.28px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition: all .6s ease;
        cursor: pointer;
        &:not(:last-child) {
            margin-bottom: 8px;
        }
        &:after {
            content: "\e907";
            font-family: "vajro-icon";
            position: absolute;
            top: 50%;
            margin-top: -6px;
            right: 16px;
            font-size: 12px;
            line-height: 1;
        }
        &:hover {
            background-color: #fafafa;
            color: @theme-color;
        }
        &.active {
            color: #ffffff;
            background-color: @theme-color;
            font-weight: bold;
        }
    }
}
.integration-card-wrapper {
    .integration-card {
        position: relative;
        display: block;
        padding: 16px;
        background-color: #ffffff;
        border-radius: 2px;
        box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
        overflow: hidden;
        transition: all .4s ease;
        margin: 0 24px 24px 0;
        cursor: pointer;
        height: auto;
        .integration-card-view {
            position: relative;
            display: flex;
            height: 128px;
        }
        .how-to-enable {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            bottom: 16px;
            width: 100%;
            div {
                cursor: pointer;
                border-bottom: 1px solid #f62369;
                color: #f62369;
                font-size: 12px;
                line-height: 1.5;
                text-decoration: none;
                padding-bottom: 0.5px;
                font-weight: 600;
            }
        }
        &:hover {
            box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
        }
        .locked-icon {
            width: 48px;
            height: 48px;
            position: absolute;
            top: 0;
            right: 0;
            &:before {
                content: '';
                width: 0;
                height: 0;
                display: inline-block;
                border-top: 48px solid @theme-color;
                border-left: 48px solid transparent;
            }
            i {
                position: absolute;
                top: 6px;
                right: 6px;
                color: #FFFFFF;
                font-size: 16px;
            }
        }
        .admin-only-badge {
            color: #FFFFFF;
            font-size: 11px;
            line-height: 1.2;
            position: absolute;
            top: 20px;
            right: -24px;
            background-color: #ff4540;
            padding: 4px 24px;
            transform: rotate(45deg);
        }
        .enabled-btn {
            font-size: 12px;
            font-weight: 500;
            line-height: 1.5;
            text-align: center;
            color: #26bf8c;
            padding: 2px 6px;
            border-radius: 2px;
            border: 1px dashed #26bf8c;
            position: absolute;
            right: 16px;
            bottom: 0px;
        }
        .left-col {
            width: 25%;
            text-align: center;
            img {
                display: block;
                width: 64px;
                height: 64px;
                object-fit: contain;
                background-color: #FFFFFF;
                border-radius: 2px;
                box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
                margin: 0 auto 4px;
            }
            a {
                color: rgba(0, 0, 0, 0.8);
                font-size: 10px;
                line-height: 1.5;
                text-decoration: none;
                padding-bottom: 1px;
                border-bottom: 1px solid rgba(0, 0, 0, 0.8);
            }
        }
        
        .right-col {
            width: 75%;
            padding-left: 16px;
            p {
                color: rgba(0, 0, 0, .8);
                font-size: 11px;
                line-height: 1.5;
                margin-bottom: 6px;
                span {
                    display: block;
                    color: #000000;
                    font-size: 14px;
                    font-weight: 500;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    margin-bottom: 2px;
                }
                &.txt {
                    font-size: 12px;
                    color: #adadad;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    margin-bottom: 0;
                }
            }
        }
    }
}

.preview-app{
    .new-launch-screen{
        .heading{
            font-size: 16px;
        }
        p{
            font-size: 14px;
        }
    }
}
.new-launch-screen {
    color: #000000;
    padding: 24px 12px;
    background-color: #FFFFFF;
    .vl{
        border-left: 15px solid #f3f3f3;
        height: 111.4%;
        position: absolute;
        left: 50%;
    }
    p{
        font-weight: 400;
        font-size: 16px;
        line-height: 32px;
    }
    // common css starts
    :focus, :active:focus {
        outline: 0 none;
    }

    .row {
        &>div {
            margin-bottom: 0;
        }

        [class*='col-'] {
            padding: 0 12px;
        }

        &.no-gutter-spacing {
            margin: 0 -12px !important;
        }
    }

    .heading{
        text-align: center;
        font-weight: 600;
        font-size: 16px;
        display: flex;
        padding-left: 18px;
        align-items: center;
        line-height: 22px;
        padding-top: 20px;
        margin-bottom: 20px;
    }
    .qr-wrapper{
        padding: 10px 24px;
        #qrcode_1 img, #qrcode_2 img{
            width: 150px;
        }
    }
    .section-title {
        p {
            color: rgba(0, 0, 0, .8);
            font-size: 12px;
            line-height: 1.5;
            margin-bottom: 32px;

            span {
                color: #000000;
                display: block;
                font-size: 18px;
                font-weight: bold;
                line-height: 1.28;
                margin-bottom: 8px;
            }
        }
    }

    .tab-section {
        display: flex;
        flex-wrap: wrap;
        padding-left: 0;
        list-style: none;
        margin-bottom: 24px;

        li {
            font-size: 12px;
            font-weight: 500;
            line-height: 1.2;
            padding: 8px 32px;
            background-color: #FFFFFFF;
            border: 1px solid #dbdbdb;
            border-radius: 2px;
            outline: 0 none;
            margin: 0 8px 8px 0;
            transition: all .4s ease;

            &.active {
                color: #FFFFFF;
                background-color: #000000;
                border-color: #000000;
            }
        }
    }

    .get-app-steps {
        .step-card {
            margin-bottom: 32px;

            p {
                font-size: 16px;
                line-height: 1.25;
                margin-bottom: 16px;
            }
            .download-app{
                text-align: center;
                a{
                    img{
                     width: 200px;
                    }
                 }
            }
           

            .img-wrapper {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 24px;
                background-color: #fafafa;
                border-radius: 3px;
                height: 248px;

                img {
                    width: 200px;
                    height: 200px;
                    object-fit: cover;

                    &.app-store-img {
                        width: 224px;
                        height: 64px;
                        object-fit: contain;
                    }
                }
            }
        }
    }

    .scan-qr-code {
        width: 200px;
        height: 200px;
        padding: 20px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        background-image: linear-gradient(to bottom, #1cadea, #00d7fd);
        user-select: none;
        -moz-user-select: none;
        -webkit-user-drag: none;
        -webkit-user-select: none;
        -ms-user-select: none;

        .vajro-white-logo {
            display: block;
            color: #FFFFFF;
            font-size: 48px;
            font-family: 'Kaushan Script', cursive !important;
            margin-bottom: 48px;
        }

        .btn {
            color: #18b1ec;
            font-size: 12px;
            font-weight: 500;
            line-height: 2;
            padding: 7px 16px;
            background-color: #FFFFFF;
            border-color: #FFFFFF;
            border-radius: 3px;
            margin: 0;
            pointer-events: none;
        }
    }

    .note-txt {
        display: table;
        color: #000000;
        font-size: 14px;
        line-height: 1.29;
        padding: 12px 16px;
        border-radius: 3px;
        background-color: transparent;
        margin-bottom: 24px;
    }

    .anchor-link {
        color: #496dce;
        font-size: 14px;
        line-height: 1.29;
    }

    .launch-steps-details {
        margin-bottom: 24px;

        .details-card {
            display: flex;
            align-items: center;
            padding: 24px;
            background-color: #FFFFFF;
            box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);

            p {
                flex: 1 1;
                margin: 0 32px 0 0;

                span {
                    display: block;
                    color: #000000;
                    font-size: 16px;
                    font-weight: 500;
                    line-height: 1.25;
                    
                    &.grey-txt {
                        font-size: 14px;
                        font-weight: normal;
                        line-height: 1.29;
                        color: #adadad;
                    }

                    a {
                        color: #496dce;
                        font-size: 14px;
                        line-height: 1.29;
                        text-decoration: none;
                        margin-left: 8px;
                    }
                }
            }

            a {
                display: inline-block;

                img {
                    height: 40px;
                    width: 128px;
                    object-fit: contain;
                }
            }

            .status-text {
                display: table;
                color: rgba(0, 0, 0, 0.6);
                font-size: 18px;
                line-height: 1.28;

                &.complete {
                    color: #33cc99;
                }

                b {
                    font-weight: normal;
                }

                i {
                    font-size: 20px;
                    vertical-align: -2px;
                    margin-right: 8px;
                }
            }
        }
    }

    .empty-space {
        height: 48px;
    }
    // common css ends
    
    // Creating Developer Accounts starts    
    .creating-developer-accounts {
        padding: 8px 72px 40px 12px;

        .txt {
            color: rgba(0, 0, 0, .8);
            font-size: 12px;
            line-height: 1.5;
            margin-bottom: 32px;

            a {
                color: #496dce;
            }
        }

        .send-us-invite {
            display: table;
            color: #496dce;
            margin-bottom: 16px;
        }
        
        .section-title {
            p {
                margin-bottom: 16px;
            }
        }

        .launch-steps-details {
            margin-bottom: 32px;

            .details-card {
                background-color: #fafafa;
            }
        }
    }
    // Creating Developer Accounts ends

    .edit-app-store {
        .form-group {
            margin: 0 0 24px;
        }

        .control-label {
            color: #000000;
            font-size: 16px;
            font-weight: 500;
            line-height: 1.5;
            letter-spacing: 0.32px;
            margin-bottom: 16px;
        }

        textarea.form-control {
            height: auto;
            resize: none;
        }

        .form-control {
            height: 52px;
            color: #000000;
            font-size: 16px;
            line-height: 1.13;
            letter-spacing: 0.32px;
            padding: 12px 24px;
            border-radius: 2px;
            border: 1px solid #dbdbdb;
            background-color: #fafafa;
            box-shadow: none;

            &::placeholder {
                color: rgba(0, 0, 0, 0.2);;
            }

            &:focus {
                border-color: #979797;
                background-color: #ffffff;
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);

                &+.char-counter {
                    color: #ff4540;
                }
            }

            &.ng-empty {
                border-color: #ff4540;
            }
        }

        .ng-inactive {
            .help-block {
                display: none;
            }
        }

        .help-block {
            display: block;
            color: #ff4540;
            font-size: 13px;
            line-height: 1.23;
            letter-spacing: -0.25px;
            margin-top: 6px;
            margin-bottom: 0;
        }

        .input-char-counter {
            position: relative;

            .form-control {
                padding-right: 72px;

                &.ng-empty + .char-counter {
                    color: #ff4540;
                }
            }

            textarea.form-control {
                padding-right: 24px;
                padding-bottom: 48px;

                & + .char-counter {
                    top: auto;
                    margin-top: inherit;
                    bottom: 16px;
                }
            }
            
            .char-counter {
                font-size: 14px;
                line-height: 1.6;
                letter-spacing: 0.28px;
                color: rgba(0, 0, 0, .6);
                position: absolute;
                right: 20px;
                top: 50%;
                margin-top: -11px;
            }
        }

        .btn-wrapper {
            text-align: right;

            .btn {
                font-size: 14px;
                font-weight: bold;
                line-height: 1.2;
                letter-spacing: 0.28px;
                color: #FFFFFF;
                padding: 10px 16px;
                border-radius: 2px;
                border-color: #000000;
                background-color: #000000;
                margin: 0;

                &.btn-outline {
                    color: #000000;
                    border-color: #000000;
                    background-color: #FFFFFF;
                }

                &:not(:last-child) {
                    margin-right: 8px;
                }
            }
        }

        .image-card {
            display: table;
            margin-bottom: 24px;
    
            p {
                color: ~"rgb(0 0 0 / .5)";
                font-size: 12px;
                line-height: 1;
                letter-spacing: 0.2px;
                margin-bottom: 16px;
    
                span {
                    display: block;
                    margin-bottom: 8px;
    
                    &.title {
                        color: #000000;
                        font-size: 16px;
                        line-height: 1.5;
                        letter-spacing: 0.32px;
                        margin-bottom: 8px;
                    }
    
                    &.grey-txt {
                        color: ~"rgb(0 0 0 / .8)";
                    }
                }
            }
    
            .click-to-upload-image {
                width: 240px;
                height: 240px;
                display: flex;
                flex-wrap: wrap;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                border-radius: 2px;
                background-color: #f4f4f4;
                cursor: pointer;
    
                img {
                    display: block;
                    width: 40px;
                    height: 40px;
                    object-fit: cover;
                    margin: 0 auto 8px;
                }
    
                p {
                    color: ~"rgb(0 0 0 / .3)";
                    font-size: 14px;
                    font-weight: 500;
                    line-height: 1.2;
                    letter-spacing: 0.28px;
                    margin-bottom: 0;
                }
            }
    
            figure {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 240px;
                height: 240px;
                border-radius: 2px;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                overflow: hidden;
    
                &:before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-color: ~"rgb(0 0 0 / .6)";
                    opacity: 0;
                    visibility: hidden;
                    transition: opacity .4s ease;
                }
    
                &:hover {
                    &:before, figcaption {
                        opacity: 1;
                        visibility: visible;
                    }
                }
    
                figcaption {
                    z-index: 1;
                    opacity: 0;
                    visibility: hidden;
                    transition: opacity .4s ease;
                    
                    .btn-wrapper {
                        display: flex;
                        flex-wrap: wrap;
                        flex-direction: column;
    
                        .btn {
                            min-width: 112px;

                            &.btn-outline {
                                background-color: rgba(0, 0, 0, 0.13);
                                border-color: #ffffff;
                                color: #FFFFFF;
                            }
    
                            &:first-child {
                                margin-right: 0;
                                margin-bottom: 16px;
                            }
        
                            &.upload-btn {
                                background-color: #ff4540;
                                border-color: #ff4540;
                            }
                        }
                    }
                }
            }
        }
    }

    &.launch-steps {
        background-color: transparent;
        padding: 24px 72px 72px 24px;

        .note-txt {
            margin: 0 auto 24px;
        }

        .app-status-title {
            color: #ff4540;
            font-size: 18px;
            font-weight: bold;
            line-height: 1.28;
            margin-bottom: 16px; 
        }
    }
}

@media(max-width: 1199px){
.vl{
    display: none;
}
}
.live-setup-container {
    .popup-modal {
        background-color: #FFFFFF;
        position: absolute;
        top: 32px;
        left: 24px;
        right: 24px;
        bottom: 32px;
        padding: 24px 24px 20px 24px;
        z-index: 2;
        display: none;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: opacity 100ms, visibility 100ms;
        transition: opacity 100ms, visibility 100ms;

        &.in {
            display: block;
            opacity: 1;
            visibility: visible;
            animation: fadeIn .1s ease-in-out;
        }

        p {
            color: rgba(0, 0, 0, .6);
            font-size: 14px;
            line-height: 1.5;
            letter-spacing: 0.28px;
            margin-bottom: 56px;
            
            &.enable-icon {
                position: relative;
                padding-left: 24px;

                i {
                    font-size: 16px;
                    color: #ffb763;
                    position: absolute;
                    top: 4px;
                    left: 0;
                }
            }

            span {
                display: block;
                color: #000000;
                font-size: 16px;
                font-weight: 500;
                margin-bottom: 10px;
            }
        }

        .edit-popup-modal {
            .close-icon {
                position: absolute;
                top: 16px;
                right: 16px;
                font-size: 16px;
                cursor: pointer;
            }

            .form-group {
                margin-bottom: 16px;
            }

            .form-control {
                height: 32px;
            }
        }
    }
}

.live-video-wrapper {
    color: #000000;
    margin-top: -48px;

    // common css starts
    :focus, :active:focus {
        outline: 0 none;
    }

    .btn {
        font-size: 14px;
        font-weight: bold;
        line-height: 1.2;
        letter-spacing: 0.28px;
        padding: 10px 24px;
        border-radius: 3px;
        margin: 0;
        outline: 0 none;
        
        &.btn-outline {
            color: #000000;
            border-color: #000000;
            background-color: #FFFFFF;
        }

        &.black-btn {
            color: #FFFFFF;
            background-color: #000000;
            border-color: #000000;
        }
    }
    // common css ends

    .initial-screen {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: ~"calc(100vh - 72px)";

        img {
            width: 176px;
            height: 216px;
            object-fit: cover;
            margin: 0 auto 32px;
        }
    
        .black-btn {
            margin: 0 0 8px;
        }
    
        p {
            max-width: 392px;
            text-align: center;
            font-size: 12px;
            font-weight: normal;
            line-height: 1.5;
            letter-spacing: 0.12px;
            margin-bottom: 0;
        }
    }
    .initial-screen-post-live{
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        img {
            width: 176px;
            height: 216px;
            object-fit: cover;
            margin: 0 auto 32px;
        }
    
        .black-btn {
            margin: 0 0 8px;
        }
    
        p {
            max-width: 392px;
            text-align: center;
            font-size: 12px;
            font-weight: normal;
            line-height: 1.5;
            letter-spacing: 0.12px;
            margin-bottom: 0;
        }

    }

    .live-home {
        width: 100%;
        padding: 24px 120px 24px 24px;
    
        .live-home-table {
            padding: 24px 32px 32px 24px;
            background-color: #ffffff;
            border-radius: 3px;
            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
            margin-bottom: 24px;

            .switch-outer {
                margin: 0px;
            }
            .section-title {
                position: relative;
                display: flex;
                flex-wrap: nowrap;
                align-items: center;

                p {
                    flex: 1;
                    color: rgba(0, 0, 0, 0.5);
                    font-size: 14px;
                    line-height: 1.5;
                    letter-spacing: 0.14px;
                    padding-right: 80px;
                    margin-bottom: 0;
                    

                    span {
                        color: #000000;
                        display: block;
                        font-size: 18px;
                        font-weight: bold;
                        line-height: 1.5;
                        letter-spacing: normal;
                        margin-bottom: 8px;
                    }
                }

                .black-btn {
                    padding: 11px 24px;
                }

                .tbl-pagination {
                    margin: auto;
                    .blocked-users {
                        color: #FFFFFF;
                        background-color: #000000;
                        border: 0px;
                        font-size: 12px;
                        font-weight: bold;
                        line-height: 1.2;
                        letter-spacing: 0.28px;
                        padding: 10px 18px;
                        border-radius: 4px;
                        margin: 0;
                        margin-right: 8px;
                        outline: 0 none;
                    }
                }
            }

            .dashboard-table {
                .tbl-row {
                    &.disabled {
                        .tbl-cell {
                            color: rgba(0, 0, 0, .4);
                            
                            .pill-with-square {
                                color: rgba(0, 0, 0, .4);
                            }
                        }
                    }

                    .tbl-cell {                        
                        .pill {
                            color: #ffffff;
                            display: inline-block;
                            font-size: 12px;
                            font-weight: normal;
                            line-height: 1;
                            letter-spacing: 0.24px;
                            text-align: center;
                            padding: 4px 16px;
                            -webkit-border-radius: 10px;
                            -moz-border-radius: 10px;
                            border-radius: 10px;
                            -moz-background-clip: padding;
                            -webkit-background-clip: padding-box;
                            background-clip: padding-box;
            
                            &.pending {
                                background-color: #ffb146;
                            }
                            &.completed {
                                background-color: #26bf8c;
                            }
                            &.live {
                                background-color: #ff4540;
                            }
                        }
            
                        .pill-with-square {
                            color: #000000;
                            display: inline-block;
                            font-size: 12px;
                            font-weight: normal;
                            line-height: 1;
                            letter-spacing: 0.24px;
                            text-transform: capitalize;
            
                            .square {
                                display: inline-block;
                                font-style: normal;
                                width: 8px;
                                height: 8px;
                                border-radius: 2px;
                                background-color: #000000;
                                margin-right: 4px;
                            }
            
                            &.pending .square{
                                background-color: #ffb146;
                            }
                            &.completed .square{
                                background-color: #26bf8c;
                            }
                            &.live .square{
                                background-color: #ff4540;
                            }
                            &.cancelled .square{
                                background-color: #901616;
                            }
                        }

                        .custom-tooltip-wrapper { 
                            position: relative;
                            display: inline-block;
                            vertical-align: middle;
                            margin-left: 8px;
                            cursor: pointer;

                            i {
                                font-size: 16px;
                                color: #ff8f3c;

                                &.vajro-minus-circle {
                                    color: #de3333;
                                }
                                &.vajro-clock
                                {
                                    color: #F9B233;
                                }
                                
                                &:hover + .custom-tooltip {
                                    opacity: 1;
                                    visibility: visible;
                                    display: inline-block;
                                    animation: fadeInLeft .4s ease-in-out;
                                }
                            }

                            .custom-tooltip {
                                position: absolute;
                                top: 50%;
                                margin-top: -20px;
                                min-width: 144px;
                                font-size: 10px;
                                line-height: 1.4;
                                font-weight: normal;
                                text-align: left;
                                color: #3b3b3b;
                                box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.16);
                                background-color: #c7c7c7;
                                border-radius: 4px;
                                padding: 8px 12px;
                                display: none;
                                opacity: 0;
                                visibility: hidden;
                                transition: opacity 100ms, visibility 100ms;
                                margin-left: 20px;

                                &:before {
                                    content: '';
                                    height: 0;
                                    width: 0;
                                    position: absolute;
                                    pointer-events: none;
                                    border-style: solid;
                                    border-image: initial;
                                    border-color: transparent #c7c7c7;
                                    border-width: 10px 10px 10px 0px;
                                    top: 50%;
                                    margin-top: -10px;
                                    left: -8px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .live-sale {
        display: flex;
        width: 100%;
        padding: 80px 32px 40px 24px;

        .left-column {
            width: 55%;
            min-height: 440px;
            background-color: #ffffff;
            border-radius: 3px;

            .section-title {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 12px 0;
                margin: 0 32px 0 16px;
                border-bottom: 1px solid #f4f4f4;

                span {
                    color: #000000;
                    font-size: 16px;
                    font-weight: 500;
                    line-height: 1;
                    letter-spacing: 0.32px;
                    padding-right: 24px;
                }

                .btn {
                    color: #ffffff;
                    background-color: #26bf8c;
                    border-color: #26bf8c;
                    padding: 7px 16px;
                }
            }

            .sale-card-wrapper {
                .sale-card {
                    width: 60%;
                    display: flex;
                    padding: 24px 0 8px;
                    margin: 0 128px 0 104px;

                    figure {
                        min-width: 128px;
                        max-width: 128px;
                        height: 200px;
                        border-radius: 3px;
                        background-size: cover;
                        background-position: center;
                        background-repeat: no-repeat;
                    }

                    .rgt-content {
                        position: relative;
                        width: 100%;
                        padding: 48px 0 0 16px;

                        .live-tag {
                            display: inline-block;
                            font-size: 12px;
                            line-height: 1;
                            color: #f1f2f2;
                            padding: 4px;
                            position: absolute;
                            top: 16px;
                            background-color: #ff4540;
                            border-radius: 3px;
                        }

                        p {
                            color: #000000;
                            margin-bottom: 0;

                            &.title {
                                font-size: 16px;
                                font-weight: 500;
                                line-height: 1.5;
                                letter-spacing: 0.16px;
                                display: -webkit-box;
                                -webkit-line-clamp: 2;
                                -webkit-box-orient: vertical;
                                overflow: hidden;
                                margin-bottom: 8px;
                            }

                            &.price-txt {
                                font-size: 12px;
                                font-weight: normal;
                                line-height: 1.42;
                                letter-spacing: 0.24px;
                                margin-bottom: 5px;

                                .instock-txt {
                                    color: #ff8f3c;
                                    margin-left: 16px;
                                }
                                .variant-txt {
                                    color: #ff8f3c;
                                    margin-left: 0px;
                                }
                            }
                        }

                        .btn-wrapper {
                            display: flex;
                            align-items: center;

                            .black-btn {
                                padding: 7px 36px;
                                font-weight: 500;
                            }

                            i {
                                color: #ff4540;
                                font-size: 16px;
                                margin-left: 16px;
                                cursor: pointer;
                            }
                        }
                    }
                }

                .select-card-wrapper {
                    display: flex;
                    flex-wrap: nowrap;
                    overflow: hidden;
                    overflow-x: scroll;
                    padding-top: 16px;
                    margin: 0 72px 24px;

                    .select-card {
                        position: relative;
                        display: flex;
                        flex-wrap: wrap;
                        flex-direction: column;
                        align-items: center;
                        margin: 0 16px 16px 0;
                        cursor: pointer;

                        &.active {
                            figure {
                                opacity: 1;
                                box-shadow: inset 0 0 0 1px #FFFFFF;
                                border: 2px solid #000000;
                            }
                        }

                        &.live {
                            figure {
                                opacity: 1;
                                box-shadow: inset 0 0 0 1px #FFFFFF;
                                border: 2px solid #ff4540;
                            }

                            // .pill.square {
                            //     color: #ffffff;
                            //     background-color: #ff4540;
                            // }
                        }

                        &.vertical-line-wrapper {
                            margin-right: 32px;
                        }

                        .highlight {
                            position: absolute;
                            top: 0;
                            right: 0;
                            display: inline-block;
                            width: 16px;
                            height: 16px;
                            z-index: 1;

                            i {
                                &.wave {
                                    display: inline-block;
                                    width: 16px;
                                    height: 16px;
                                    font-style: normal;
                                    background-color: #ff4540;
                                    border-radius: 100%;
                                    animation: pulseEffect 2s ease-out;
                                    animation-iteration-count: infinite;
                                }

                                &.bg-wave {
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    border: 0;
                                    width: 16px;
                                    height: 16px;
                                    border-radius: 100%;
                                    animation: splooshEffect 2s cubic-bezier(0.165, 0.84, 0.44, 1);
                                    -webkit-animation: splooshEffect 2s cubic-bezier(0.165, 0.84, 0.44, 1);
                                    animation-iteration-count: infinite;
                                    -webkit-animation-iteration-count: infinite;

                                    &:nth-child(2) {
                                        animation-delay: .33s;
                                        -webkit-animation-delay: .33s;
                                        animation-duration: 2.2s;
                                        -webkit-animation-duration: 2.2s;
                                    }
                                }
                            }
                        }

                        .tick-mark {
                            color: #FFFFFF;
                            position: absolute;
                            top: 0;
                            right: 0;
                            width: 24px;
                            height: 24px;
                            font-style: normal;
                            border-radius: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            background-color: #49ce9d;
                            border: 3px solid #FFFFFF;
                            z-index: 1;

                            &:before {
                                content: "\e91e";
                                font-family: 'vajro-icon';
                                font-size: 10px;
                                line-height: 1;
                            }
                        }

                        figure {
                            opacity: 0.5;
                            width: 64px;
                            height: 64px;
                            background-position: center;
                            background-repeat: no-repeat;
                            background-size: cover;
                            border-radius: 100%;
                            box-shadow: inset 0 0 0 1px transparent;
                            border: 2px solid #FFFFFF;
                        }

                        .pill.square {
                            min-width: 60px;
                            color: #000000;
                            display: inline-block;
                            font-size: 11px;
                            font-weight: 500;
                            letter-spacing: 0.22px;
                            text-align: center;
                            text-align: center;
                            padding: 4px 12px;
                            -webkit-border-radius: 3px;
                            -moz-border-radius: 3px;
                            border-radius: 3px;
                            -moz-background-clip: padding;
                            -webkit-background-clip: padding-box;
                            background-clip: padding-box;
                            background-color: #ffffff;
                            box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
                            margin-top: -8px;
                            z-index: 1;
                        }
                    }

                    .vertical-line {
                        display: inline-block;
                        min-width: 1px;
                        height: 56px;
                        background-color: rgba(0, 0, 0, 0.2);
                        margin: 8px 16px 0 0;

                        &.pos-absolute {
                            position: absolute;
                            top: 16px;
                            right: -16px;
                            display: inline-block;
                            background-color: rgba(0, 0, 0, 0.2);
                            margin: 0; 
                        }
                    }

                    /* scroll bar style starts */
                    &::-webkit-scrollbar {
                        height: 6px;
                        background-color: #F5F5F5;
                    }
                    &::-webkit-scrollbar-track {
                        background: #DDDDDD;
                        margin: 0;
                    }
                    &::-webkit-scrollbar-thumb {
                        background: #BDBDBD;
                    }
                    &::-webkit-scrollbar-thumb:hover {
                        background: rgba(0, 0, 0, .35); 
                    }
                    /* scroll bar style ends */
                }

                .tbl-pagination {
                    margin: 0 24px 16px;
                }
            }
            .no-product-added {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                height: 90%;
                img { 
                    margin-bottom: 16px;
                }
                p {
                    font-size: 16px;
                    line-height: 1.4;
                    text-align: center;
                    color: rgba(0, 0, 0, 0.4);
                    width: 40%;
                    margin-bottom: 0px;
                }
                .btn {
                    margin-top: 26px;
                    color: #ffffff;
                    background-color: #26bf8c;
                    border-color: #26bf8c;
                    padding: 7px 16px;
                }
            }
        }
        
        .right-column {
            width: 45%;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            margin-left: 24px;

            .facebook-status {
                height: 54px;
                margin-bottom: 8px;
                background: #ffffff;
                padding: 11px 20px;
                display: flex;
                .fb-icon {
                    width: 32px;
                    height: 32px;
                    margin: 0 8px 0 0;
                    padding: 8px 10px 0 10px;
                    border-radius: 20px;
                    background-image: linear-gradient(to bottom, #5a7ced, #0d3edd);
                    img {
                        width: 12px;
                        height: 24px;
                    }
                }
                .fb-text {
                    cursor: pointer;
                    margin: auto;
                    margin-left: 0px;
                    font-size: 11px;
                    letter-spacing: 0.22px;
                    .name {
                        color: #000000;
                        margin-bottom: 0px;
                    }
                    .url {
                        color: #adadad;
                        padding-top: 4px;
                        margin-bottom: 0px;
                        &:hover {
                            text-decoration: none;
                        }
                    }
                }
                .fb-login {
                    margin: auto;
                }
            }

            .chat-container {
                position: relative;
                border-radius: 3px;
                background-color: #ffffff;
                height: 382px;

                .chat-header {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 20px 0 12px;
                    position: absolute;
                    top: 0;
                    left: 20px;
                    right: 20px;
                    background-color: #FFFFFF;
                    border-bottom: 1px solid #f4f4f4;
    
                    .title {
                        flex: 1 1 0%;
                        color: #000000;
                        font-size: 14px;
                        font-weight: 500;
                        line-height: 1;
                        letter-spacing: 0.28px;
                        padding-right: 24px;
                        .show-chat {
                            display: flex;
                            width: 100%;
                            margin-top: 8px;
                            .active {
                                color: #ffffff;
                                background-color: #323237;
                                &:hover {
                                    color: #ffffff;
                                    background-color: #323237;
                                }
                            }
                            button {
                                cursor: pointer;
                                border-radius: 2px;
                                background-color: #ffffff;
                                height: 20px;
                                padding: 3px 12px;
                                color: #000000;
                                font-size: 12px;
                                border: solid 1px #eaeaea;
                                margin-right: 4px;
                                font-weight: 400;
                                &:last-child {
                                    margin-right: 0px;
                                }
                            }
                            .inactive {
                                background-color: #f5f5f5;
                                cursor: no-drop;
                                color: rgba(0, 0, 0, 0.5);
                            }
                        }
                    }

                    .rgt-content {
                        span {
                            font-size: 14px;
                            font-weight: normal;
                            line-height: 1;
                            letter-spacing: 0.28px;
                            color: #adadad;

                            &:not(:last-child) {
                                margin-right: 16px;
                            }

                            i {
                                color: #9d9d9d;
                                font-size: 16px;
                                vertical-align: -2px;
                                margin-right: 8px;
                            }
                        }
                    }
                }

                .chat-body {
                    width: 100%;
                    padding: 20px;
                    position: absolute;
                    top: 75px;
                    left: 0;
                    bottom: 62px;
                    overflow: hidden;
                    overflow-y: scroll;

                    &.bg-image {
                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23dddddd' fill-opacity='0.4'%3E%3Cpath d='M24.37 16c.2.65.39 1.32.54 2H21.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06A5 5 0 0 1-17.45 28v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H-20a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1L.9 19.22a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0L2.26 23h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM-13.82 27l16.37 4.91L18.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H-13.1z'/%3E%3Cpath id='path6_fill-copy' d='M284.37 16c.2.65.39 1.32.54 2H281.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06a5 5 0 0 1-2.24-8.94v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H240a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM246.18 27l16.37 4.91L278.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H246.9z'/%3E%3Cpath d='M159.5 21.02A9 9 0 0 0 151 15h-42a9 9 0 0 0-8.5 6.02 6 6 0 0 0 .02 11.96A8.99 8.99 0 0 0 109 45h42a9 9 0 0 0 8.48-12.02 6 6 0 0 0 .02-11.96zM151 17h-42a7 7 0 0 0-6.33 4h54.66a7 7 0 0 0-6.33-4zm-9.34 26a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-7a7 7 0 1 1 0-14h42a7 7 0 1 1 0 14h-9.34zM109 27a9 9 0 0 0-7.48 4H101a4 4 0 1 1 0-8h58a4 4 0 0 1 0 8h-.52a9 9 0 0 0-7.48-4h-42z'/%3E%3Cpath d='M39 115a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm6-8a6 6 0 1 1-12 0 6 6 0 0 1 12 0zm-3-29v-2h8v-6H40a4 4 0 0 0-4 4v10H22l-1.33 4-.67 2h2.19L26 130h26l3.81-40H58l-.67-2L56 84H42v-6zm-4-4v10h2V74h8v-2h-8a2 2 0 0 0-2 2zm2 12h14.56l.67 2H22.77l.67-2H40zm13.8 4H24.2l3.62 38h22.36l3.62-38z'/%3E%3Cpath d='M129 92h-6v4h-6v4h-6v14h-3l.24 2 3.76 32h36l3.76-32 .24-2h-3v-14h-6v-4h-6v-4h-8zm18 22v-12h-4v4h3v8h1zm-3 0v-6h-4v6h4zm-6 6v-16h-4v19.17c1.6-.7 2.97-1.8 4-3.17zm-6 3.8V100h-4v23.8a10.04 10.04 0 0 0 4 0zm-6-.63V104h-4v16a10.04 10.04 0 0 0 4 3.17zm-6-9.17v-6h-4v6h4zm-6 0v-8h3v-4h-4v12h1zm27-12v-4h-4v4h3v4h1v-4zm-6 0v-8h-4v4h3v4h1zm-6-4v-4h-4v8h1v-4h3zm-6 4v-4h-4v8h1v-4h3zm7 24a12 12 0 0 0 11.83-10h7.92l-3.53 30h-32.44l-3.53-30h7.92A12 12 0 0 0 130 126z'/%3E%3Cpath d='M212 86v2h-4v-2h4zm4 0h-2v2h2v-2zm-20 0v.1a5 5 0 0 0-.56 9.65l.06.25 1.12 4.48a2 2 0 0 0 1.94 1.52h.01l7.02 24.55a2 2 0 0 0 1.92 1.45h4.98a2 2 0 0 0 1.92-1.45l7.02-24.55a2 2 0 0 0 1.95-1.52L224.5 96l.06-.25a5 5 0 0 0-.56-9.65V86a14 14 0 0 0-28 0zm4 0h6v2h-9a3 3 0 1 0 0 6H223a3 3 0 1 0 0-6H220v-2h2a12 12 0 1 0-24 0h2zm-1.44 14l-1-4h24.88l-1 4h-22.88zm8.95 26l-6.86-24h18.7l-6.86 24h-4.98zM150 242a22 22 0 1 0 0-44 22 22 0 0 0 0 44zm24-22a24 24 0 1 1-48 0 24 24 0 0 1 48 0zm-28.38 17.73l2.04-.87a6 6 0 0 1 4.68 0l2.04.87a2 2 0 0 0 2.5-.82l1.14-1.9a6 6 0 0 1 3.79-2.75l2.15-.5a2 2 0 0 0 1.54-2.12l-.19-2.2a6 6 0 0 1 1.45-4.46l1.45-1.67a2 2 0 0 0 0-2.62l-1.45-1.67a6 6 0 0 1-1.45-4.46l.2-2.2a2 2 0 0 0-1.55-2.13l-2.15-.5a6 6 0 0 1-3.8-2.75l-1.13-1.9a2 2 0 0 0-2.5-.8l-2.04.86a6 6 0 0 1-4.68 0l-2.04-.87a2 2 0 0 0-2.5.82l-1.14 1.9a6 6 0 0 1-3.79 2.75l-2.15.5a2 2 0 0 0-1.54 2.12l.19 2.2a6 6 0 0 1-1.45 4.46l-1.45 1.67a2 2 0 0 0 0 2.62l1.45 1.67a6 6 0 0 1 1.45 4.46l-.2 2.2a2 2 0 0 0 1.55 2.13l2.15.5a6 6 0 0 1 3.8 2.75l1.13 1.9a2 2 0 0 0 2.5.8zm2.82.97a4 4 0 0 1 3.12 0l2.04.87a4 4 0 0 0 4.99-1.62l1.14-1.9a4 4 0 0 1 2.53-1.84l2.15-.5a4 4 0 0 0 3.09-4.24l-.2-2.2a4 4 0 0 1 .97-2.98l1.45-1.67a4 4 0 0 0 0-5.24l-1.45-1.67a4 4 0 0 1-.97-2.97l.2-2.2a4 4 0 0 0-3.09-4.25l-2.15-.5a4 4 0 0 1-2.53-1.84l-1.14-1.9a4 4 0 0 0-5-1.62l-2.03.87a4 4 0 0 1-3.12 0l-2.04-.87a4 4 0 0 0-4.99 1.62l-1.14 1.9a4 4 0 0 1-2.53 1.84l-2.15.5a4 4 0 0 0-3.09 4.24l.2 2.2a4 4 0 0 1-.97 2.98l-1.45 1.67a4 4 0 0 0 0 5.24l1.45 1.67a4 4 0 0 1 .97 2.97l-.2 2.2a4 4 0 0 0 3.09 4.25l2.15.5a4 4 0 0 1 2.53 1.84l1.14 1.9a4 4 0 0 0 5 1.62l2.03-.87zM152 207a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6 2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-11 1a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-6 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3-5a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-8 8a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm0 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4 7a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5-2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5 4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-5-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-24 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm16 5a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm7-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0zm86-29a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1 246 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM275 214a29 29 0 0 0-57.97 0h57.96zM72.33 198.12c-.21-.32-.34-.7-.34-1.12v-12h-2v12a4.01 4.01 0 0 0 7.09 2.54c.57-.69.91-1.57.91-2.54v-12h-2v12a1.99 1.99 0 0 1-2 2 2 2 0 0 1-1.66-.88zM75 176c.38 0 .74-.04 1.1-.12a4 4 0 0 0 6.19 2.4A13.94 13.94 0 0 1 84 185v24a6 6 0 0 1-6 6h-3v9a5 5 0 1 1-10 0v-9h-3a6 6 0 0 1-6-6v-24a14 14 0 0 1 14-14 5 5 0 0 0 5 5zm-17 15v12a1.99 1.99 0 0 0 1.22 1.84 2 2 0 0 0 2.44-.72c.21-.32.34-.7.34-1.12v-12h2v12a3.98 3.98 0 0 1-5.35 3.77 3.98 3.98 0 0 1-.65-.3V209a4 4 0 0 0 4 4h16a4 4 0 0 0 4-4v-24c.01-1.53-.23-2.88-.72-4.17-.43.1-.87.16-1.28.17a6 6 0 0 1-5.2-3 7 7 0 0 1-6.47-4.88A12 12 0 0 0 58 185v6zm9 24v9a3 3 0 1 0 6 0v-9h-6z'/%3E%3Cpath d='M-17 191a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2H3a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2H4zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1-14 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM15 214a29 29 0 0 0-57.97 0h57.96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
                        background-size: 80% 80%;
                        background-position: left center;
                        background-repeat: repeat;
                        background-color: #FCFCFE;
                    }

                    .chat-message {
                        margin-bottom: 16px;

                        .message-box {
                            width: 100%;
                            display: flex;
                            align-items: flex-end;
                            &.right {
                                flex-direction: row-reverse;

                                .message-detail {
                                    border-radius: 4px 4px 0px 4px;
                                    background-color: #ffffff;
                                }
                                .message-txt {
                                    color: #333333 !important;
                                }
                            }

                            .user-initials, .message-img {
                                min-width: 24px;
                                max-width: 24px;
                                height: 24px;
                                border-radius: 50%;
                            }
                            
                            .user-initials {
                                color: #FFFFFF;
                                background-color: #323237;
                                font-weight: bold;
                                border-radius: 100%;
                                margin-right: 12px;
                                font-size: 11px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                            }

                            .message-img {
                                display: inline-block;
                                background-size: cover;
                                background-position: center;
                                background-repeat: no-repeat;
                                margin-left: 12px;
                            }

                            .message-detail {
                                max-width: 300px;
                                border-radius: 4px 4px 4px 0px;
                                padding: 8px;
                                min-width: 175px;
                                background-color: #323237;
                                box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, 0.12);
                                position: relative;

                                .message-info {
                                    display: flex;
                                    justify-content: space-between;
                                    margin-bottom: 5px;
                                    font-size: 10px;
                                    color: #adadad;
                                    .name {
                                        width: 60%;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        margin: auto 0px;
                                    }
                                    .time-block-msg {
                                        display: flex;
                                        .time {
                                            margin: auto 0;
                                        }
                                        img {
                                            margin-left: 8px;
                                            cursor: pointer;
                                        }
                                    }
                                }
                                .message-txt {
                                    word-wrap: break-word;
                                    font-size: 12px;
                                    font-weight: 600;
                                    color: #ffffff;
                                    letter-spacing: 0.5px;
                                }
                                .message-send {
                                    margin-top: 5px;
                                    width: 100%;
                                    display: flex;
                                    color: #adadad;
                                    font-size: 10px;
                                    img {
                                        height: 12px;
                                        margin-right: 4px;
                                    }
                                }
                                .block-user-message {
                                    position: absolute;
                                    top: 28px;
                                    right: -56px;
                                    height: 24px;
                                    padding: 5px 22px;
                                    background-color: #f2f2f2;
                                    font-size: 10px;
                                    letter-spacing: 0.5px;
                                    font-weight: 500;
                                    color: #333333;
                                    border-radius: 4px;
                                    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
                                }
                            }
                        }
                    }

                    .unread-btn-wrapper {
                        text-align: center;
                        position: sticky;
                        bottom: 0;
    
                        .btn {
                            font-size: 12px;
                            font-weight: bold;
                            line-height: 1;
                            letter-spacing: 0.28px;
                            margin: 0;
                            outline: 0 none;
                            color: #ffffff;
                            background-color: #26bf8c;
                            border-color: #26bf8c;
                            padding: 4px 16px;
                            border-radius: 15px;
                        }
                    }

                    /* scroll bar style starts */
                    &::-webkit-scrollbar {
                        width: 5px;
                        background-color: #F5F5F5;
                    }
                    &::-webkit-scrollbar-track {
                        background: #DDDDDD;
                        margin: 0;
                    }
                    &::-webkit-scrollbar-thumb {
                        background: #BDBDBD;
                    }
                    &::-webkit-scrollbar-thumb:hover {
                        background: rgba(0, 0, 0, .35); 
                    }
                    /* scroll bar style ends */
                }

                .chat-footer {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    min-height: 42px;
                    width: 100%;
                    padding: 0px 20px 20px;
                    background-color: #FFFFFF;

                    .chat-input {
                        position: relative;

                        .form-control {
                            color: #000000;
                            padding-right: 56px;
                            min-height: 42px;
                            border-radius: 3px;
                            border: 1px solid #dbdbdb;
                            background-color: #fafafa;
                            box-shadow: none;
                        }

                        .send-btn {
                            color: #9d9d9d;
                            font-size: 20px;
                            line-height: 1;
                            position: absolute;
                            top: 50%;
                            margin-top: -10px;
                            right: 16px;

                            &.send-btn-live {
                                color: #26bf8c;
                            }

                            &.send-btn-disable {
                                opacity: .6;
                                cursor: not-allowed;
                            }
                        }
                    }

                    .display-text {
                        position:absolute;
                        margin-top: 4px;
                        font-size: 10px;
                        color: #adadad;
                        letter-spacing: 0.28px;
                        width: 100%;
                    }
                }

                .empty-text {
                    font-size: 14px;
                    color: #adadad;
                    letter-spacing: 0.28px;
                    width: 300px;
                    height: 100%;
                    display: flex;
                    margin: auto;
                    justify-content: center;
                    align-items: center;
                    text-align: center;
                }
            }
        }
    }

    .fb-comment-div {
        margin-top:10px;
        padding:10px;
        border-radius: 10px;
        border: 1px solid;
        p {
            margin-bottom: 0px !important;
        }
    }
    .fb-comment-option-text {
        color:grey;
    }

    .fb-comment-text-size {
        font-size:12px;
    }
}

.live-video-pdg {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: ~"calc(100vh - 72px)";
    background-color: rgba(0, 0, 0, 0.3);
    margin-top: -48px;

    &.in {
        display: flex;
    }

    &.add-product-modal {
        width: auto;
        height: auto;
        position: absolute;
        top: 120px;
        left: 80px;
        right: 0;
        bottom: 0;
        z-index: 1;
        margin-top: 0;
    }

    // common css starts
    :focus, :active:focus {
        outline: 0 none;
    }

    .btn {                
        color: #000000;
        background-color: #dbdbdb;
        border-color: #dbdbdb;
        font-size: 14px;
        font-weight: bold;
        line-height: 1.2;
        letter-spacing: 0.28px;
        padding: 10px 24px;
        border-radius: 3px;
        margin: 0;
        outline: 0 none;

        &.active, &:active, &:focus {
            box-shadow: none;
            outline: 0 none;
        }

        &.btn-block {
            display: block;
            width: 100%;
        }

        &.active, &.green-btn {
            color: #FFFFFF;
            background-color: #26bf8c;
            border-color: #26bf8c;
        }
    }
    
    .btn-active-live-setup{
        color: #dbdbdb;
        background-color:#000000 ;
    }

    .form-group {
        margin: 0 0 16px;
    }

    .control-label {
        display: block;
        color: #000000;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.29;
        letter-spacing: 0.28px;

        .grey-txt {
            display: block;
            margin-top: 6px;
            color: #9d9d9d;
            font-size: 12px;
            font-weight: normal;
            line-height: 1;
            letter-spacing: 0.24px;
        }
    }

    .form-control {
        height: 40px;
        border-radius: 2px;
        box-shadow: none;

        &::placeholder {
            color: rgba(0, 0, 0, .2);
        }
    }

    textarea.form-control {
        height: auto;
        resize: none;
        padding: 8px 16px;
    }

    .live-history-menu {
        height: 200px;
        width: 200px;
        position: absolute;
        top:40px;
        right:10px;
        z-index: 100;
        font-size: 12px;
        line-height: 1.75;
        letter-spacing: 0.24px;
        padding: 0;
        margin-top: 8px;
        border-radius: 2px;
        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
        overflow: hidden;
        overflow-y: scroll;
        background: white;

        .past-live-name {
            color: #000000;
            display: block;
            padding: 12px 20px;
            transition: background-color .4s;
            cursor: pointer;

            &:hover {
                background-color: #f5f5f5;
            }
        }

        .live-history-list {
            padding: 5px 10px !important;
            border-bottom: 1px solid #eee;
            &:last-child {
                border-bottom: 0px;
            }
        }

        .no-result {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 160px;
        }
    }

    .input-search-menu {
        height: 160px;
        font-size: 12px;
        line-height: 1.75;
        letter-spacing: 0.24px;
        padding: 0;
        margin-top: 8px;
        border-radius: 2px;
        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
        overflow: hidden;
        overflow-y: scroll;
        
        span {
            color: #000000;
            display: block;
            padding: 12px 20px;
            transition: background-color .4s;
            cursor: pointer;

            &:hover {
                background-color: #fafafa;
            }
        }

        .no-result {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 160px;
        }
    }
    // common css ends

    .pdg-content {
        position: relative;
        width: 416px;
        height: 424px;
        background-color: #ffffff;
        overflow: hidden;

        .pdg-content-header {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            min-height: 48px;
            position: absolute;
            top: 0;
            left: 0;

            .back-arrow, .close-arrow {
                color: #000000;
                font-size: 14px;
                font-weight: 500;
                line-height: 1.2;
                letter-spacing: 0.28px;
                cursor: pointer;

                i {
                    font-size: 16px;
                    vertical-align: text-top;
                    margin-right: 8px;
                }
            }

            .back-arrow {
                i {
                    display: inline-block;
                    transform: scaleX(-1);
                }
            }

            &.flex-end {
                justify-content: flex-end;
            }
        }

        .pdg-content-body {
            color: #000000;
            width: 100%;
            padding: 16px 24px;
            position: absolute;
            top: 48px;
            left: 0;
            bottom: 0;
            overflow: hidden;
            overflow-y: scroll;
            animation: 0.5s ease 0s 1 normal none running slideInRight;

            .heading-txt {
                color: #000000;
                font-size: 18px;
                font-weight: bold;
                line-height: 1;
                letter-spacing: 0.36px;
                text-align: center;
                margin-bottom: 32px;
            }
            
            .select-list-wrapper {
                display: flex;
                flex-wrap: wrap;
                flex-direction: column;
                margin-bottom: 64px;

                .select-list {
                    position: relative;
                    padding: 10px 40px 10px 16px;
                    background-color: #fafafa;
                    border-radius: 5px;
                    margin-bottom: 8px;
                    transition: all .4s ease;
                    cursor: pointer;

                    &:hover {
                        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
                        transform: translateY(-2px);
                    }

                    &:after {
                        content: "\e907";
                        font-family: 'vajro-icon';
                        font-size: 10px;
                        position: absolute;
                        top: 50%;
                        margin-top: -8px;
                        right: 16px;
                    }

                    span {
                        color: #000000;
                        display: block;
                        font-size: 14px;
                        font-weight: 500;
                        line-height: 1;
                        letter-spacing: 0.28px;

                        &.txt {
                            color: #9d9d9d;
                            font-size: 12px;
                            font-weight: normal;
                            line-height: 1.2;
                            letter-spacing: 0.24px;
                            margin-top: 8px;
                        }
                    }
                }
            }

            .select-product-wrapper {
                display: flex;
                flex-wrap: wrap;
                flex-direction: column;

                .select-product-list {
                    color: rgba(0, 0, 0, 0.5);
                    font-size: 14px;
                    font-weight: normal;
                    line-height: 1.5;
                    letter-spacing: 0.28px;
                    padding: 24px 40px;
                    text-align: center;
                    background-color: #fafafa;
                    border: 1px solid #fafafa;
                    border-radius: 5px;
                    margin-bottom: 24px;
                    transition: all .4s ease;
                    cursor: pointer;

                    &:hover, &.active {
                        background-color: #ffffff;
                        border-color: #000000;
                        transform: translateY(-2px);
                    }

                    span {
                        display: block;
                        color: #000000;
                        font-size: 16px;
                        font-weight: 500;
                        line-height: 0.75;
                        letter-spacing: 0.32px;
                        margin-bottom: 8px;
                    }
                }
            }

            .note-txt {
                font-size: 12px;
                font-weight: normal;
                line-height: 1.5;
                letter-spacing: 0.24px;
                text-align: center;
                padding: 0 4%;
                margin-bottom: 0;
            }

            .pro-tip-txt {
                color: #000000;
                font-size: 14px;
                font-weight: normal;
                line-height: 1.21;
                letter-spacing: 0.28px;
                text-align: center;
                padding: 8px 12px;
                background-color: #f4f4f4;
            }

            .datetimepicker {
                width: 100%;
                margin: 0;            
            }

            .product-deatils-wrapper {
                position: relative;

                &.enable-tab-header {
                    .tab-body {
                        top: 48px;
                    }
                }
                &.enable-tab-footer {
                    .tab-body {
                        bottom: 56px;
                    }
                }

                .tab-header {
                    display: flex;
                    align-items: center;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    padding-left: 0;
                    list-style: none;
                    margin: 0;

                    &:after {
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        height: 3px;
                        background-color: #f4f4f4;
                    }

                    li {
                        position: relative;
                        width: 100%;

                        &:last-child:after {
                            content: '';
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            width: 100%;
                            height: 3px;
                            background-color: #000000;
                            z-index: 1;
                            transition: all 0.3s;
                        }

                        a {
                            display: block;
                            color: #adadad;
                            font-size: 14px;
                            font-weight: 500;
                            line-height: 0.86;
                            letter-spacing: 0.28px;
                            padding: 10px 16px;
                            text-align: center;
                            text-decoration: none;
                        }

                        // HOVER & ACTIVE STYLE 
                        &:first-child.active ~ li:last-child:after {
                            left: -100%;
                        }
                        &.active a {
                            color: #000000;
                        }
                    }
                }

                .tab-body {
                    position: absolute;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    overflow: hidden;
                    overflow-y: scroll;
                }

                .tab-footer {
                    width: 100%;
                    display: flex;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    padding: 8px 24px;
                    min-height: 56px;
                    background-color: #ffffff;
                    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.16);

                    .btn {
                        display: block;
                        width: 100%;
                        background-color: #26bf8c;
                        border-color: #26bf8c;
                        border-radius: 5px;
                    }
                }

                .product-deatils-list {
                    .list {
                        display: flex;
                        margin-bottom: 8px;
                        
                        .left-col {
                            width: 70%;
                            position: relative;
                            display: flex;
                            align-items: center;
                            padding-left: 32px;

                            .list-no {
                                color: #ffffff;
                                position: absolute;
                                top: 0;
                                left: 0;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                width: 20px;
                                height: 20px;
                                font-size: 11px;
                                font-style: normal;
                                font-weight: normal;
                                line-height: 1;
                                letter-spacing: 0.24px;
                                background-color: #000000;
                                border-radius: 100%;
                            }

                            img {
                                width: 72px;
                                height: 72px;
                                object-fit: contain;
                                border-radius: 3px;
                                margin-right: 8px;
                            }

                            .title {
                                color: #000000;
                                max-width: 96px;
                                font-size: 12px;
                                font-weight: normal;
                                line-height: 1.5;
                                letter-spacing: 0.12px;
                                display: -webkit-box;
                                -webkit-line-clamp: 3;
                                -webkit-box-orient: vertical;
                                overflow: hidden;
                            }
                        }
                        .right-col {
                            width: 30%;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            
                            .view-inventory-btn {
                                color: #ff8f3c;
                                max-width: 64px;
                                text-align: center;
                                font-size: 10px;
                                font-weight: normal;
                                line-height: 1.5;
                                letter-spacing: 0.1px;
                                padding: 6px;
                                display: inline-block;
                            }

                            i {
                                color: #ff4540;
                                font-size: 16px;
                                cursor: pointer;
                            }
                        }
                    }
                }
            }

            .choose-advanced-options {
                .form-control {
                    height: 36px;
                }
            }

            .facebook-login {
                border: 0px;
                background: #3B5998;
                color: #ffffff;
                border-radius: 4px;
                opacity: 0.85;
                font-size: 14px;
                line-height: 16px;
                font-family: inherit;
                padding: 4px 8px;
            }
            .choose-target-audience {
                .widget-header {
                    .row>div {
                        margin-bottom: 0px;
                    }
                    .pull-left {
                        display: flex;
                    }
                    .pull-right {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        height: 30px;
                        &.logout-fb {
                            justify-content: flex-start;
                        }
                    }
                }
                .select-facebook-option-title {
                    font-size: 12px;
                    margin-bottom: 8px;
                    text-align: left;
                    font-family: @vajro-font !important;
                }
                .select-facebook-option-dropdown {
                    position: relative;
                    margin-bottom: 24px;
                    font-family: @vajro-font !important;
                    &::before {
                        content: '\f078';
                        font: normal normal normal 12px/1 FontAwesome;
                        color: #000000;
                        right: 12px;
                        height: 100%;
                        padding: 15px 0px;
                        position: absolute;
                        pointer-events: none;
                    }
                    .diableOption {
                        position: absolute;
                        z-index: 1;
                        background: rgba(0, 0, 0, 0.10);
                        content: "";
                        top: 0px;
                        bottom: 0px;
                        right: 0px;
                        left: 0px;
                        border-radius: 4px;
                    }
                    .error-text {
                        color: #ff0000;
                        font-size: 12px;
                        position: absolute;
                    }
                }
                .select-option {
                    appearance: none;
                    width: 100%;
                    border: solid 1px #d9d9d9;
                    background: #ffffffff;
                    border-radius: 4px;
                    padding: 12px 16px;
                    font-size: 12px;
                    font-family: @vajro-font !important;
                    &:focus-visible {
                        outline: 0px;
                    }
                }
            }

            /* scroll bar style starts */
            &::-webkit-scrollbar {
                width: 4px;
                background-color: #F5F5F5;
            }
            &::-webkit-scrollbar-track {
                background: #FFFFFF;
                margin: 0;
            }
            &::-webkit-scrollbar-thumb {
                background: rgba(0, 0, 0, 0.4);
            }
            &::-webkit-scrollbar-thumb:hover {
                background: rgba(0, 0, 0, .35); 
            }
            /* scroll bar style ends */

            &.enable-footer {
                bottom: 64px;
            }
        }

        .pdg-content-footer {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px 24px 16px;
            min-height: 64px;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    }
}

.blocked-users-popup {
    display: none;
    background-color: rgba(0,0,0,.4);
    transition: background-color .1s;
    align-items: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 10px;
    z-index: 99999999999999;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    &.in {
        display: flex;
    }
    .users-popup-content {
        width: 446px;
        height: 420px;
        background-color: #ffffff;
        border-radius: 8px;
    }
}

.blocked-users-slider {
    background-color: rgba(0,0,0,.4);
    transition: background-color .4s ease;
    position: fixed;
    top: 0;
    right: 100%;
    bottom: 0;
    left: 0;
    z-index: 99999999999999;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    &.in {
        right: 0%;
    }
    .users-popup-content {
        position: fixed;
        top: 0;
        bottom: 0px;
        right: -400px;
        background-color: #FFFFFF;
        overflow-x: hidden;
        transition: right .4s ease;
        &.in {
            right: 0px;
            transition: right .4s ease;
        }
        .users-popup-content-header {
            margin: 0px;
            padding: 14px 24px;
            min-height: 73px;
            height: 11.5%;
            .text {
                margin: auto 0px;
            }
        }
        .users-popup-content-body {
            height: 88.5%;
            .blocked-users-list {
                margin: 0px;
                padding: 0px 24px 0px;
            }
            &::-webkit-scrollbar-track {
                margin: 0px;
            }
        }
    }
}

.remove-blocked-users {
    .users-popup-content-header {
        height: 16%;
        display: flex;
        justify-content: space-between;
        padding-top: 14px;
        padding-bottom: 14px;
        margin: 0px 24px;
        border-bottom: 1px solid #e2e2e2;
        .text {
            font-size: 18px;
            font-weight: 500;
            letter-spacing: 0.36px;
            .sub-title {
                font-size: 12px;
                color: rgba(0, 0, 0, 0.5);
            }
        }
        .vajro-close {
            font-size: 16px;
            margin: auto 0;
            cursor: pointer;
        }
    }
    .users-popup-content-body {
        height: 84%;
        overflow-y: scroll;
        .blocked-users-list {
            height: 100%;
            margin: 0px 24px;
            .users-list {
                display: flex;
                justify-content: space-between;
                padding-top: 16px;
                .user-name {
                    display: flex;
                    width: 250px;
                    .user-first-letter {
                        margin: auto 0px;
                        width: 32px;
                        height: 32px;
                        margin-right: 12px;
                        background-color: #323237;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 100%;
                        color: #ffffff;
                        font-size: 15px;
                    }
                    .user-full-name {
                        text-transform: capitalize;
                        margin: auto 0px;
                        height: 18px;
                        font-size: 14px;
                        font-weight: 500;
                        color: #333333;
                        border: 0px;
                        letter-spacing: 0.75px;
                        width: 200px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
                .user-remove-btn {
                    margin: 4px 0px;
                    padding: 4px 8px;
                    border-radius: 4px;
                    background-color: #edf1ff;
                    color: #4e71e6;
                    font-size: 11px;
                    font-weight: 600;
                    border: 0px;
                    letter-spacing: 0.75px;
                }
                &:last-child {
                    padding-bottom: 16px;
                }
            }
        }

        /* scroll bar style starts */
        &::-webkit-scrollbar {
            width: 4px;
            background-color: transparent;
        }
        &::-webkit-scrollbar-track {
            background: transparent;
            margin: 0px 0px 8px;
        }
        &::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.4);
        }
        &::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, .35); 
        }
    }
}

.live-sale-modal {
    position: absolute;
    top: 112px;
    bottom: 0;
    height: auto;
    z-index: 9;
    margin-top: 0;
    background-color: rgba(0, 0, 0, 0.3);

    .pdg-content {
        .pdg-content-header {
            justify-content: flex-end;
        }
        
        .pdg-content-body {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            justify-content: space-between;

            .tick-mark {
                color: #FFFFFF;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 184px;
                height: 184px;
                border-radius: 100%;
                background-color: #26bf8c;
                border: 16px solid #26bf8c;
                box-shadow: inset 0 0 0 16px #ffffff;
                margin: 0 auto 16px;

                i {
                    font-size: 64px;
                }
            }

            p {
                color: #000000;
                text-align: center;
                font-size: 18px;
                font-weight: normal;
                line-height: 1.5;
                letter-spacing: 0.36px;
                padding: 0 6%;
                margin-bottom: 0;
            }
        }
    }
}

// CUSTOM MODAL STARTS
.custom-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 11;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    overflow: hidden;
    display: none;
    opacity: 0;
    transition: opacity .15s linear;

    &.in {
        opacity: 1;
        display: block;
    }

    :focus, :active:focus {
        outline: 0 none;
    }

    .modal-dialog {
        position: relative;
        margin: 40px auto;
        width: 392px;

        .modal-content {
            background-color: #ffffff;
            border: none;
            border-radius: 0;
            box-shadow: none;

            .close {
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 16px !important;
                line-height: 1;
                font-weight: normal;
                opacity: 1;
                position: absolute;
                top: 16px;
                right: 16px;
                margin: 0;
                z-index: 1;
                padding: 4px;
                background-color: #FFFFFF;
                border-radius: 50%;
            }

            .modal-body {
                padding: 24px;
                max-height: ~"calc(100vh - 80px)";
                overflow: auto;

                /* scroll bar style starts */
                &::-webkit-scrollbar {
                    width: 6px;
                    background-color: #F5F5F5;
                }
                &::-webkit-scrollbar-track {
                    background: #FFFFFF;
                    margin: 0;
                }
                &::-webkit-scrollbar-thumb {
                    background: #cccccc;
                }
                &::-webkit-scrollbar-thumb:hover {
                    background: rgba(0, 0, 0, .35); 
                }
                /* scroll bar style ends */

                img {
                    height: 128px;
                    border-radius: 4px;
                    margin-bottom: 12px;
                }

                p {
                    text-align: center;
                    font-size: 16px;
                    font-weight: 600;
                    line-height: 1.25;
                    letter-spacing: 0.32px;
                    margin-bottom: 12px;
                }

                ul {
                    padding-left: 24px;

                    li {
                        position: relative;
                        padding-left: 48px;
                        font-size: 12px;
                        line-height: 1.6;
                        letter-spacing: 0.12px;
                        margin-bottom: 16px;

                        &:last-child {
                            margin-bottom: 24px;
                        }

                        .no {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 32px;
                            height: 32px;
                            position: absolute;
                            top: 4px;
                            left: 4px;
                            font-size: 14px;
                            font-weight: 600;
                            line-height: 1.2;
                            letter-spacing: 0.14px;
                            border-radius: 8px;
                            background-color: #f2f2f2;
                        }
                    }
                }

                .btn-wrapper {
                    .btn {
                        color: #ffffff;
                        padding: 8px 24px;
                        font-size: 13px;
                        font-weight: 500;
                        line-height: 1.54;
                        letter-spacing: 0.26px;
                        border-radius: 3px;
                        box-shadow: none;
                        margin: 0;

                        &:not(:last-child) {
                            margin-bottom: 16px;
                        }

                        &:focus {
                            outline: 0 none;
                        }

                        &.black-btn {
                            background-color: #000000;
                            border-color: #000000;

                            &:hover {
                                background-color: lighten(#000000, 25%);
                                border-color: lighten(#000000, 25%);
                            }
                        }

                        &.btn-outline {
                            color: #000000;
                            background-color: #ffffff;
                            border-color: #000000;

                            &:hover {
                                background-color: lighten(#ffffff, 25%);
                                border-color: lighten(#000000, 25%);
                            }
                        }

                        &.red-btn {
                            background-color: #ff4540;
                            border-color: #ff4540;

                            &:hover {
                                background-color: darken(#ff4540, 25%);
                                border-color: darken(#ff4540, 25%);
                            }
                        }

                        i {
                            font-size: 16px;
                            vertical-align: -1px;
                            margin-right: 8px;
                        }
                    }
                }
            }
        }
    }
}

.custom-modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    background-color: #000;
    opacity: 0;
    display: none;
    transition: opacity .15s linear;

    &.in {
        opacity: .4;
        display: block;
    }
}

// ANIMATION FADE IN LEFT STARTS
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-4px);
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}
// ANIMATION FADE IN LEFT ENDS

// ANIMATION SLIDE IN RIGHT STARTS
@keyframes slideInRight {
    0% {
        transform: translateX(10%);
        opacity: 0;
        transition: all 0.5s ease 0s;
    }
    100% {
        transform: translateX(0px);
        opacity: 1;
        transition: all 0s ease 0s;
    }
}
// ANIMATION SLIDE IN RIGHT ENDS

/* ANIMATION PULSE EFFECT STARTS */
@keyframes splooshEffect {
    0% {
        box-shadow: 0 0 0 0px rgba(255, 69, 64, 0.6);
        background: rgba(255, 69, 64, 0.62);
    }
    80% {
      background: rgba(255, 69, 64, 1);
    }
    100% {
      box-shadow: 0 0 0 16px rgba(255, 69, 64, 0);
    }
}

@-webkit-keyframes splooshEffect {
    0% {
        box-shadow: 0 0 0 0px rgba(255, 69, 64, 0.6);
        background: rgba(255, 69, 64, 0.62);
      }
      80% {
        background: rgba(255, 69, 64, 1);
      }
      100% {
        box-shadow: 0 0 0 16px rgba(255, 69, 64, 0);
      }
}
  
@keyframes pulseEffect {
    0% {
      -webkit-transform: scale(1);
    }
    3.3% {
      -webkit-transform: scale(1.1);
    }
    16.5% {
      -webkit-transform: scale(1);
    }
    33% {
      -webkit-transform: scale(1.1);
    }
    100% {
      -webkit-transform: scale(1);
    }
}

@-webkit-keyframes pulseEffect {
    0% {
      -webkit-transform: scale(1);
    }
    3.3% {
      -webkit-transform: scale(1.1);
    }
    16.5% {
      -webkit-transform: scale(1);
    }
    33% {
      -webkit-transform: scale(1.1);
    }
    100% {
      -webkit-transform: scale(1);
    }
}
/* ANIMATION PULSE EFFECT ENDS */

// @font-face {
//   font-family: 'Poppins';
//   font-style: normal;
//   font-weight: 400;
//   font-display: swap;
//   src: url(https://res.cloudinary.com/vajrohq/raw/upload/v1635604055/admin_console/onboard_ui/new%20dashboard%20/common/fonts/Poppins-Regular.ttf) format('ttf');
//   unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
// }

// Variables
@theme-color: #f62369;
@theme-bg-color: #fba7c3;
@add-widgets-bg-color: #c51b54;
// @vajro-font:'Poppins', sans-serif;
@theme-background: #fdf0f5;
/* width */

::-webkit-scrollbar {
  width: 5.2px;
}
.table-report-pushnotification {
  &::-webkit-scrollbar-thumb {
    display: block;
  }
  &::-webkit-scrollbar {
    height: 5px;
  }
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px @theme-background;
  border-radius: 4px;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #b4b1b3;
  border-radius: 5px;
  display: none;
}

.btn {
  padding: 10px 30px;
  background-color: @theme-color;
  color: #fff;
  font-weight: bold;
  margin-bottom: 10px;
}
.btn:hover {
  color: #fff;
}

.onboard-container {
  margin-left: 312px;
  margin-right: 16px;
  scrollbar-width: none;
  overflow: scroll;
  overflow-x: hidden;

  &:hover::-webkit-scrollbar-thumb {
    display: block;
  }

  .dropdown-menu {
    min-width: 168px;
    left: auto;
    right: 0;
    border-radius: 2px;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
    padding: 0;
    margin: 4px 0 0;

    .menu-item {
      display: flex;
      align-items: center;
      color: #000000;
      font-size: 12px;
      line-height: 1.75;
      padding: 6px 16px;
      cursor: pointer;

      &.disabled {
        color: rgba(0, 0, 0, 0.2);
        cursor: not-allowed;

        .switch-outer {
          pointer-events: none;
          .switch .slider {
            background: rgba(0, 0, 0, 0.2);
          }
        }
      }

      &:hover {
        background-color: #eaeaea;
      }

      i {
        font-size: 16px;
        vertical-align: -1px;
        margin-right: 8px;
        margin-left: 0 !important;
      }
    }
  }
  .rn-carousel-control-prev {
    display: block;
    top: 99% !important;
    left: 40% !important;
  }
  .rn-carousel-control-next {
    display: block;
    top: 99% !important;
    right: 40% !important;
  }

  .widget-modal-body {
    height: ~"calc(100vh - 200px)" !important;
  }
  .carousel-indicators .active {
    background-color: unset;
  }

  .popup-modal {
    background-color: #ffffff;
    position: absolute;
    top: 24px;
    left: 24px;
    right: 24px;
    bottom: 24px;
    padding: 24px 24px 20px 24px;
    z-index: 2;
    display: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 100ms, visibility 100ms;
    transition: opacity 100ms, visibility 100ms;

    &.in {
      display: block;
      opacity: 1;
      visibility: visible;
      animation: fadeIn 0.1s ease-in-out;
    }

    p {
      color: rgba(0, 0, 0, 0.6);
      font-size: 14px;
      line-height: 1.5;
      letter-spacing: 0.28px;
      margin-bottom: 56px;

      &.enable-icon {
        position: relative;
        padding-left: 24px;

        i {
          font-size: 16px;
          color: #ffb763;
          position: absolute;
          top: 4px;
          left: 0;
        }
      }

      span {
        display: block;
        color: #000000;
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 10px;
      }
    }

    .edit-popup-modal {
      .close-icon {
        position: absolute;
        top: 16px;
        right: 16px;
        font-size: 16px;
        cursor: pointer;
      }

      .form-group {
        margin-bottom: 16px;
      }

      .form-control {
        height: 32px;
        padding-right: 50px;
      }
      .update-translation {
        display: inline-block;
        cursor: pointer;
        color: #f62369 !important;
        font-size: 12px;
        opacity: 1;
        &:hover {
          color: #f62369;
          text-decoration: none;
        }
      }
    }
  }

  .bg-overlay {
    background-color: rgba(0, 0, 0, 0.24);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 100ms, visibility 100ms;
    transition: opacity 100ms, visibility 100ms;

    &.in {
      display: block;
      opacity: 1;
      visibility: visible;
      animation: fadeIn 0.1s ease-in-out;
    }
    .translate-link {
      padding-left: 10px;
      cursor: pointer;
      color: #f62369 !important;
      font-size: 12px;
      opacity: 1;
      &:hover {
          color: #f62369;
          text-decoration: none;
      }
    }
  }

  .launch-steps-details {
    margin-bottom: 24px;

    .details-card {
      display: flex;
      align-items: center;
      padding: 24px;
      background-color: #ffffff;
      box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);

      p {
        flex: 1 1;
        margin: 0 32px 0 0;

        span {
          display: block;
          color: #000000;
          font-size: 16px;
          font-weight: 500;
          line-height: 1.25;

          &.grey-txt {
            font-size: 14px;
            font-weight: normal;
            line-height: 1.29;
            color: #adadad;
          }

          a {
            color: #496dce;
            font-size: 14px;
            line-height: 1.29;
            text-decoration: none;
            margin-left: 8px;
          }
        }
      }

      a {
        display: inline-block;

        img {
          height: 40px;
          width: 128px;
          object-fit: contain;
        }
      }

      .status-text {
        display: table;
        color: rgba(0, 0, 0, 0.6);
        font-size: 18px;
        line-height: 1.28;

        &.complete {
          color: #33cc99;
        }

        b {
          font-weight: normal;
        }

        i {
          font-size: 20px;
          vertical-align: -2px;
          margin-right: 8px;
        }
      }
    }
  }
  .app-status-title {
    color: #ff4540;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.28;
    margin-bottom: 16px;
  }
}

.switch-outer {
  display: flex;
  align-items: center;

  .switch {
    width: 30px;
    height: 18px;
    margin-bottom: 0;

    input:checked + .slider {
      background: #40d08b;

      &:before {
        transform: translateX(10);
        -webkit-transform: translateX(10px);
        -ms-transform: translateX(10px);
      }
    }

    .slider {
      background: #000000;

      &:before {
        width: 12px;
        height: 12px;
        top: 50%;
        background-color: #ffffff;
      }
    }
  }
}

.cancel-btn {
  background: #f1f0f5;
  padding: 10px 24px;
  border-radius: 4px;
  border: solid 1px #000;
  margin-right: 8px;
  cursor: pointer;
}

.widget {
  margin-top: 75px;
}

.image-card {
  margin-bottom: 24px;

  &.small {
    p span.title {
      margin-bottom: 8px;
    }

    .click-to-upload-image {
      width: 240px;
      height: 240px;

      img {
        width: 40px;
        height: 40px;
        margin-bottom: 8px;
      }
    }

    figure {
      width: 240px;
      height: 240px;

      figcaption .btn-wrapper {
        flex-wrap: wrap;
        flex-direction: column;

        .btn:first-child {
          margin-right: 0;
          margin-bottom: 16px;
        }
      }
    }
  }

  &.screenshot-image-card {
    flex: 1 1;

    @media (max-width: 1199px) {
      min-width: 184px;
    }

    &:not(:last-child) {
      margin: 0 32px 24px 0;
    }

    p {
      color: ~"rgb(0 0 0 / .4)";
      text-align: center;

      span.title {
        margin-bottom: 8px;
      }
    }

    .click-to-upload-image {
      width: 100%;
      height: 356px;
      border-radius: 2px;
      border: 2px dashed #9d9d9d;

      @media (max-width: 1199px) {
        height: 320px;
      }

      img {
        width: 40px;
        height: 40px;
        margin-bottom: 8px;
      }
    }

    figure {
      align-items: flex-end;
      width: 100%;
      height: 352px;
      padding-bottom: 16px;

      @media (max-width: 1199px) {
        height: 320px;
      }

      &:before {
        background-color: transparent;
        background-image: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.33),
          #000000
        );
      }

      figcaption .btn-wrapper {
        flex-wrap: wrap;
        flex-direction: column;

        .btn:first-child {
          margin-right: 0;
          margin-bottom: 16px;
        }
      }
    }
  }

  p {
    color: ~"rgb(0 0 0 / .5)";
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.2px;
    margin-bottom: 16px;

    span {
      display: block;
      margin-bottom: 8px;

      &.title {
        color: #000000;
        font-size: 16px;
        line-height: 1.5;
        letter-spacing: 0.32px;
        margin-bottom: 16px;
      }

      &.grey-txt {
        color: ~"rgb(0 0 0 / .8)";
      }
    }
  }

  // .click-to-upload-image {
  //   width: 424px;
  //   height: 192px;
  //   display: flex;
  //   flex-wrap: wrap;
  //   flex-direction: column;
  //   align-items: center;
  //   justify-content: center;
  //   border-radius: 2px;
  //   background-color: #f4f4f4;
  //   cursor: pointer;

  //   img {
  //     display: block;
  //     width: 64px;
  //     height: 64px;
  //     object-fit: cover;
  //     margin: 0 auto 16px;
  //   }

  //   p {
  //     color: ~"rgb(0 0 0 / .3)";
  //     font-size: 14px;
  //     font-weight: 500;
  //     line-height: 1.2;
  //     letter-spacing: 0.28px;
  //     margin-bottom: 0;
  //   }
  // }

  figure {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;

    &.bg-grey {
      background-color: ~"rgb(0 0 0 / .5)";
      background-size: contain;
    }

    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: ~"rgb(0 0 0 / .6)";
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.4s ease;
    }

    &:hover {
      &:before,
      figcaption {
        opacity: 1;
        visibility: visible;
      }
    }

    figcaption {
      z-index: 1;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.4s ease;

      .btn-wrapper {
        display: flex;

        .btn {
          min-width: 112px;

          &:first-child {
            margin-right: 16px;
          }

          &.upload-btn {
            background-color: #ff4540;
            border-color: #ff4540;
          }
        }
      }

      i.vajro-delete {
        color: #ffffff;
        font-size: 16px;
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 1;
        cursor: pointer;
      }
    }
  }
}

// All Widgets Admin Option style

.form-control {
  height: 48px;
}
.flx {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .align {
    display: flex;
    span {
      &.active {
        border: solid 2px #889198;
        background-color: white;
      }
      border: 1px solid;
      margin-left: 20px;
      padding: 2px;
      border-radius: 8px;
      color: #f2f2f2;
      background-color: #f2f2f2;
      i {
        font-size: 20px;
        padding: 6px;
        color: #889198;
        background-color: #dee0e2;
        border-radius: 8px;
      }
    }
  }
}

.table-report-push-notification {
  overflow: scroll;
  &::-webkit-scrollbar {
    height: 5px;
  }

  /* Handle */
  &::-webkit-scrollbar-thumb {
    display: block;
  }
}

// All Widgets Admin Option style

.form-control {
  height: 48px;
}
.flx {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .form-control {
    width: 110px;
  }
}
.color {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .form-control {
    width: 100%;
  }
}
.box {
  display: flex;
  place-content: space-between;
  width: 100%;
  margin-bottom: 10px;
  .title_top {
    margin: 0;
    padding-top: 10px;
  }
  .switch_box_en {
    display: flex;
    padding: 10px;
    background-color: #f0fff6;
    border-radius: 8px;
    .label_enabled {
      padding-right: 70px;
      margin-top: 3px;
      color: #50c47d;
    }
  }
  .switch_box_ds {
    display: flex;
    padding: 10px;
    background-color: #f4f4f4;
    border-radius: 8px;
    .label_disabled {
      color: #889198;
      padding-right: 65px;
      margin-top: 3px;
    }
  }
}

.theme-sellect,.Personalize-top{
  .theme-wrap{
    display: flex;
    justify-content: space-between;
    margin: 0px;
    align-items: center;
    white-space: nowrap;
  }
}
@media (max-width: 768px) {
  .label_enabled {
    padding-right: 10px !important;
  }
  .switch_box_ds {
    padding: 8px !important;
  }
  .label_disabled {
    padding-right: 10px !important;
  }
  .title_top {
    font-size: 13px !important;
  }
  .theme-wrap{
    display: grid !important;
    white-space:unset !important;
  }
  .theme-sellect .theme-btn {
    float: left !important;
    margin-top: 10px;
  }
  .Personalize-top .branding-btn{
    float: left!important;
  }
  .personalize-content-height{
    padding: 54px 34px 0px 34px!important; 
  }
}
@media (max-width:767px){
  .personalize-content-height{
    padding: 24px 34px 0px 34px!important; 
  }
}
.modal {
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-backdrop{
    display: none;
}
.upgrade-plan-popup {
    .modal {
        background-color: rgba(0, 0, 0, 0.5);
    }

    .modal-dialog {
        max-width: 450px;
    }

    .premium-plan-body {
        padding: 0px 32px 20px;
        .premium-boost-plan {
            font-weight: 500;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.75);
            span {
                font-weight: 600;
                color: rgba(0, 0, 0, 1);;
            }
        }
        .plan-points {
            padding-left: 16px;
            color: rgba(0, 0, 0, 0.75);
            li {
                padding-top: 8px;
                &:last-child {
                    list-style-type: none;
                }
            }
        }
        .sub-title-normal {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.75);
            width: 90%;
            margin: auto;
            span {
                font-weight: 500;
            }
        }
    }

    .up-banner {
        position: relative;
        background-color: #ffffff;
        border-radius: 2px;
        color: black;
        .banner-header {
            margin-bottom: 14px;
            .modal-header {
                position: relative;
                .close {
                    opacity: 1 !important;
                }
            }
            .growth {
                padding-left: 133px;
                padding-top: 24px;
                font-size: 18px;
                font-weight: 600;
                font-stretch: normal;
                font-style: normal;
                position: relative;
                bottom: 0;
            }
            .text-center {
                position: absolute;
                left: 103px;
                font-size: 12px;
                font-weight: normal;
                font-stretch: normal;
                font-style: normal;
                line-height: 1.4;
                letter-spacing: 0.12px;
                text-align: center;
                bottom:-19px;
            }
        }
        .banner-bg {
            max-width: 355px;
            height: 78px;
            margin: 8px auto;
            padding: 12px 16px;
            border-radius: 8px;
            -webkit-backdrop-filter: blur(30px);
            backdrop-filter: blur(30px);
            background-color: #f5f5f5;
            p {
                font-size: 11px;
                font-weight: 600;
                font-stretch: normal;
                font-style: normal;
                letter-spacing: 0.22px;
                margin-bottom: 5px !important;
            }
            .live-video {
                .col-xs-4 {
                    padding-left: 0 !important;
                    padding-right: 0 !important;
                    .sm-number {
                        font-size: 12px;
                        font-weight: 100;
                        font-stretch: normal;
                        font-style: normal;
                        padding-left: 15px;
                        .first-arrow {
                            margin-left: 5px;
                        }
                        .second-arrow {
                            margin-left: 15px;
                        }
                   }
                   .sm-number2 {
                        font-size: 12px;
                        font-weight: 100;
                        font-stretch: normal;
                        font-style: normal;
                        padding-left: 32px;
                        img {
                            margin-left: 8px;
                        }
                        .first-uparrow {
                            margin-left: 4px;
                        }
                    }
                   .sm-number3 {
                        font-size: 12px;
                        font-weight: 100;
                        font-stretch: normal;
                        font-style: normal;
                        color: var(--black);
                        padding-left: 28px;
                        img {
                            margin-right: 11px;
                        }
                        .Increased {
                            margin-right: 5px;
                        }
                    }
                    .sm-content {
                        font-size: 8px;
                        font-weight: normal;
                        font-stretch: normal;
                        font-style: normal;
                        line-height: 1.25;
                        letter-spacing: 0.16px; 
                    }
                    .sm-content1 {
                        padding-left: 5px;
                        font-size: 8px;
                        font-weight: normal;
                        font-stretch: normal;
                        font-style: normal;
                        line-height: 1.25;
                        letter-spacing: 0.16px;
                    }
                }
            }
        }
       .banner-p {
            width: 355px;
            font-size: 12px;
            letter-spacing: 0.12px;
            text-align: center;
            margin: 16px auto;
            span {
                font-weight: 600;
            }
        }
        &.blynk-plan-upgrade {
            border-radius: 4px;
        }
        .blynk-plan-upgrade-container {
            padding: 32px;
            padding-bottom: 8px;
            .blynk-up-banner-heading {
                font-weight: 600;
                font-size: 16px;
                line-height: 24px;
                color: #131313;
                margin: 0 0 16px;
            }
            .blynk-up-banner-sub-heading {
                font-weight: 400;
                font-size: 14px;
                line-height: 24px;
                color: #131313;
                margin-bottom: 24px;
            }
            .row {
                .col-sm-6 {
                    padding: 0;
                    .downgrade-items {
                        margin-bottom: 24px;
                        display: flex;
                        align-items: flex-start;
                        p {
                            margin: 0 0 0 10px;
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 20px;
                            color: #131313;
                        }
                    }
                }
            }
        }
    }
    
    
    .premium-plan {
        border-radius: 4px;
        position: relative;
        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.16);
        background-color: #ffffff;
        margin: auto;
        color:black;

        &.blynk-plan-upgrade {
            border-radius: 4px;
        }
        .blynk-plan-upgrade-container {
            padding: 32px;
            padding-bottom: 8px;
            .blynk-up-banner-heading {
                font-weight: 600;
                font-size: 16px;
                line-height: 24px;
                color: #131313;
                margin: 0 0 16px;
            }
            .blynk-up-banner-sub-heading {
                font-weight: 400;
                font-size: 14px;
                line-height: 24px;
                color: #131313;
                margin-bottom: 24px;
            }
            .row {
                .col-sm-6 {
                    padding: 0;
                    .downgrade-items {
                        margin-bottom: 24px;
                        display: flex;
                        align-items: flex-start;
                        p {
                            margin: 0 0 0 10px;
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 20px;
                            color: #131313;
                        }
                    }
                }
            }
        }
    }

    .close-btn {
        cursor: pointer;
        position: absolute;
        top: 20px;
        right: 20px;
        .close {
            font-size: 24px !important;
            opacity: 1 !important;
        }
    }

    .premium-plan-header {
        padding: 24px 32px 8px;
        .title {
            font-size: 18px;
            font-weight: 500;
            letter-spacing: 0.5px;
            width: 70%;
            margin: auto;
        }
        .title-new {
            font-size: 16px;
            font-weight: 500;
            letter-spacing: 0.5px;
            padding-bottom: 8px;
            width: 70%;
            margin: auto;
        }
        .sub-title {
            padding-top: 8px;
            font-size: 12px;
            letter-spacing: 0.5px;
            color: rgba(0, 0, 0, 0.75);
            width: 70%;
            margin: auto;
        }
        .sub-title-new {
            font-weight: 500;
            padding-top: 8px;
            font-size: 14px;
            letter-spacing: 0.5px;
            color: rgba(0, 0, 0, 0.75);
            width: 70%;
            margin: auto;
        }
        .font-bold {
            font-weight: 500;
        }
        .sub-title-normal {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.75);
            padding-top: 8px;
            width: 90%;
            margin: auto;
        }
    }

    .premium-plan-footer {
        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.16);
        margin-top: 10px;
        padding: 16px 32px 12px;
        .d-flex {
            display: flex;
            justify-content: space-between;
        }
        .footer-p {
            font-size: 12px;
            letter-spacing: 0.24px;
            color: rgba(0, 0, 0, 0.75);
        }
        .footer-h5 {
            padding-top: 8px;
            font-size: 20px;
        }
        .footer-btn {
            margin: auto 0;
            height: 40px;
            font-size: 14px;
            font-weight: 600;
            border: none;
            color: #ffffff;
            padding: 10px 24px;
            border-radius: 4px;
            background-color: #f62369;
        }
        .footer-note {
            padding-top: 8px;
            font-size: 12px;
            letter-spacing: 0.23px;
            color: rgba(0, 0, 0, 0.5);
            span {
                color: black;
            }
        }
    }
}

.preview-popup{
    position: fixed;
    top: 72px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    z-index: 12;
    background-color: #c8c8c855;
    .preview-design{
        width: 900px;
        background-color: white;
        margin-left: auto;
        margin-right: auto;
        margin-top: 50px;
        padding-left: 35px;
        .qrcode{
            width: 120px;
            height: 120px;
            border: 1px solid #000;
        }
        h3{
            font-size: 35px;
            margin-top: 0px;
            margin-bottom: 15px;
        }
        h5{
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .copy-link{
            padding: 10px;
            background-color: #f7f7f7;
            font-size: 12px;
            margin-bottom: 10px;
            margin-top: 10px;
            p{
                margin-bottom: 0px;
                margin-top: 0px;
            }
        }
        p{
            margin-top: 10px;
        }
        .store{
            margin-top: 20px;
        }
    }
}

.onboard-stickers {
  background-color: #fff;
  padding: 24px;
  .sticker-content {
    h3 {
      padding-top: 150px;
      font-size: 18px;
      font-weight: 600;
      font-stretch: normal;
      font-style: normal;
      line-height: 1.56;
    }
    ul {
      list-style: none;
      padding-left: 0;
      .list {
        display: flex;
        span {
          margin-right: 10px;
        }
      }
    }
    .create-sticker-btn {
      margin-top: 30px;
      font-size: 16px;
      font-weight: 600;
      padding: 8px 10px;
      border-radius: 3px;
      background-color: #571bc7;
      color: #fff;
      border: none;
      width: 100%;
    }
    .Upgrade-plan-btn {
      width: 100%;
      margin-top: 30px;
      font-size: 16px;
      font-weight: 600;
      padding: 8px 10px;
      border-radius: 3px;
      background-color: #31393c;
      color: #fff;
      border: none;
    }
  }
  .sticker-image {
    padding-right: 0px;
    margin-bottom: 20px;
    margin-top: 20px;
    img {
      width: 100%;
      float: right;
    }
  }
}

///// create sticker start //////
.onboard-create-sticker {
  padding: 0px 24px 24px 24px;
  h3 {
    font-family: @vajro-font;
    font-size: 16px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
  }
  input {
    padding: 8px;
    width: 100%;
    border-radius: 4px;
    border: solid 1px #cecece;
  }
  .bg-sticker {
    height: 150px;
    background-color: #fafafa;
    padding: 0 !important;
  }
  p {
    opacity: 0.8;
    font-family: @vajro-font;
    font-size: 14px;
  }
}

.note-section {
  padding: 20px;
  background-color: #fff;
  overflow: scroll;
  height: calc(85vh);
  img {
    width: 100%;
  }
  .note-bg {
    background: #f5f7f9;
    padding: 18px;
    margin-top: 20px;
    border-radius: 8px;
    span {
      color: #ef2929;
    }
    p {
      font-size: 12px;
    }
  }
}

// product stickers

.product-stickers {
  padding: 24px;
  background-color: #fff;
  height: 100vh;
  .header {
    display: flex;
    place-content: space-between;
    h3 {
      font-size: 16px;
      font-weight: 600;
      margin-top: 0;
    }
    .create-stickers {
      padding: 10px 24px;
      border-radius: 3px;
      background-color: #000;
      color: #fff;
      border: none;
    }
  }

  ul {
    list-style: none;
    padding-left: 0;
    display: flex;
    li {
      margin-right: 30px;
      opacity: 0.3;
      font-size: 12px;
      font-weight: 500;
      padding: 0 10px 10px 10px;
      z-index: 10;
      font-weight: bold;
    }
    .active {
      opacity: 1;
      border-bottom: 3px solid;
    }
  }
  hr {
    height: 2px;
    background-color: #cecece;
    margin-top: -3px;
  }
  table {
   width: 100%;
   max-height: 300px;
    .table-header {
      background-color: #f8f8f8;
      font-size: 14px;
      font-weight: 600;
      vertical-align: middle;
    }
    tfoot {
      background-color: #f8f8f8;
      font-size: 12px;
      font-weight: 500;
      vertical-align: middle;
      td{
        i{
          padding-left: 30px;
        }
      }
    }
    tbody {
      tr {
        th {
          vertical-align: middle;
          color: #acacac;
          font-size: 12px;
          font-weight: 500;
        }
        td {
          font-size: 12px;
          font-weight: 500;
          vertical-align: middle;
        }
        button {
          border-radius: 4px;
          font-size: 9px;
          border: none;
          background-color: #62c195;
          color: #fff;
          i {
            font-size: 5px;
          }
        }
        p {
          margin: 0;
          font-size: 9px;
          color: #889198;
        }
      }
    }
  }
}

.image-grid {
  h5 {
    font-size: 16px;
    font-weight: 500;
    margin: 15px 0;
    .update {
      color: #0056ff;
      font-size: 12px;
      font-weight: normal;
      padding-left: 10px;
    }
    span {
      font-size: 14px;
      font-weight: 500;
      opacity: 0.4;
    }
    i {
      float: right;
      background: #efefef;
      width: 20px;
      height: 18px;
      text-align: center;
      border-radius: 4px;
    }
  }
  input {
    padding: 8px;
    width: 100%;
    border-radius: 4px;
    border: solid 1px #cecece;
  }
  .grid-background {
    background-color: #efefef;
    padding: 0px 10px 10px 10px;
    margin-top: 20px;
    display: flex;
    
    overflow: scroll;
    .Grid-boxes {
      display: flex;
      .Product {
        width: 150px;
        height: 180px;
        background-color: #fff;
        margin-top: 10px;
        border: dashed 1px #cfd3d7;
        border-radius: 4px;
        text-align: center;
        padding: 10px;
        margin-right: 10px;
        .widget-icons{
          width: 100%;
          background-color: #f3f3f3;
          padding: 10px;
          display: flex;
          place-content: space-around;
          border-radius: 4px;
        }
        p {
          font-size: 11px;
          font-weight: 500;
        }
        .grid-show {
          height: 80%;
          background-size: 100%,cover;
          background-repeat: no-repeat;
        }
        .grid-hidden {
          margin-top: 65px;
        }
      }
    }
  }
}

.auto-slider-images {
  h5 {
    font-size: 16px;
    font-weight: 500;
    margin: 15px 0;
    span {
      font-size: 14px;
      font-weight: 500;
      opacity: 0.4;
    }
  }
  input {
    padding: 8px;
    width: 100%;
    border-radius: 4px;
    border: solid 1px #cecece;
  }
  .img-bg{
    padding: 75px;
    text-align: center;
    background-color: #f4f4f4;
    color: #000;
    height: 200px;
    margin-top: 20px;
    border-radius: 4px;
    i{
      background-color: #fff;
      color: #000;
      width: 50px;
      height: 50px;
      padding: 12px;
      border-radius: 50%;
    }
  }
}
.billing-main {
  background-color: white;
  padding-left: 0px;
  padding-right: 0px;
  overflow: scroll;
  scrollbar-width: none;
  margin-bottom: 0 !important;
  overflow-x: hidden;
  &:hover::-webkit-scrollbar-thumb {
    display: block;
  }
  .customize-top {
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
    padding: 10px 10px;
    font-size: 16px;
    font-weight: 600;
  .top-header {
    display: flex;
    place-content: space-between;
    align-items: center;
    p {
      i {
        margin-right: 10px;
      }
      span {
        color: #f62468;
        padding-left: 30px;
      }
    }
    .switch-toggle {
      display: flex;
      width: 200px;
      place-content: space-between;
      padding: 0px 5px;
      margin-right: 30px;
    }
  }
}
}

.billing-plans {
  padding: 32px;
  .plans {
    padding: 20px;
    background-color: #fafafa;
    h4 {
      margin-top: 0;
      font-size: 16px;
      font-weight: bold;
      button {
        float: right;
        margin-top: -10px;
        background-color: #f62468;
        border-radius: 4px;
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        border: none;
        padding: 4px;
      }
    }
    h5 {
      font-size: 13px;
      opacity: 0.5;
    }
    h3 {
      font-weight: bold;
      font-size: 20px;
    }
    p {
      font-size: 13px;
      font-weight: bold;
    }
    .plans-items {
      height: 400px;
      overflow-y: scroll;
      .plan-list {
        font-size: 11px;
        display: flex;
        p {
          opacity: 0.8;
          padding-bottom: 15px;
        }
        i {
          padding-top: 3px;
          padding-right: 8px;
        }
      }
    }
    .footer {
      text-align: center;
      padding: 10px;
      button {
        font-size: 14px;
        font-weight: 600;
        padding: 8px 0px;
        width: 100%;
        border-radius: 4px;
        border: 1px solid;
        transition: 0.3s;
      }
      button:hover {
        background-color: #672fff;
        color: white;
        border: 1px solid;
      }
      .active {
        background-color: #672fff;
        color: white;
        border: 1px solid;
      }
      p {
        padding-top: 10px;
      }
    }
  }
}
#billing-header {
  height: unset;
}

// new billing page code started

.billing-page-body {
  padding: 20px 30px;
  font-family: @vajro-font;
  .billing-tabs {
    text-align: center;
    display: flex;
    margin-bottom: 30px;
    .sellect {
      width: 33%;
      padding: 14px 12px;
      border: 1px solid black;
      color: #000;
      background: #fff;
      font-size: 16px;
      font-weight: bold;
      &.fifty-width {
        width: 50%;
      }
    }
    .active {
      color: #fff;
      background: #000;
    }
  }
  .blynk-plan {
    padding: 24px;
    background-color: #fff7fa;
    p {
      margin: unset;
      font-size: 14px;
      padding-top: 8px;
    }
  }

  h3 {
    margin: unset;
    font-size: 14px;
    font-weight: bold;
  }

  .plan-tabs {
    p {
      margin: unset;
      font-size: 12px;
      opacity: 0.8;
      padding-top: 8px;
    }
    .new-plans {
      display: flex;
      align-items: center;
      place-content: space-between;
      margin-top: 20px;
      padding: 20px;
      border-radius: 4px;
      &:hover {
        transition: 0.5s;
        box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);
      }
      &.active {
        box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);
      }
      .strike-price {
        text-decoration: line-through;
        color: gray;
        margin-right: 5px;
        font-size: 12px;
      }
    }
  }
  .plan-list {
    padding-left: 25px;
    p {
      font-size: 12px;
      font-weight: bold;
      padding-top: 8px;
      span {
        color: @theme-color;
        cursor: pointer;
      }
    }
    ul {
      list-style: none;
      padding-left: 0;
      li {
        font-size: 12px;
        opacity: 0.8;
        padding-top: 10px;
      }
    }
    button {
      margin-top: 20px;
      padding: 10px 52px;
      border-radius: 4px;
      border: 1px solid @theme-color;
      color: @theme-color;
      font-weight: bold;
      background-color: #fff;
      &:hover {
        color: #fff;
        background-color: @theme-color;
      }
      &.active {
        color: #fff;
        background-color: @theme-color;
      }
    }
  }

  .View-all-btn {
    margin-top: 30px;
    width: 100%;
    padding: 12px 30px;
    text-align: center;
    background-color: #fafafa;
    color: #000;
    border-radius: 4px;
    border: none;
    font-weight: bold;
    &:hover {
      background-color: #fff;
      color: @theme-color;
      transition: 0.5s;
    }
  }
}


.countdown-timer {
  .schedule {
    text-align: center;
    padding: 20px 0px;
    p {
      span {
        padding: 10px;
        background-color: #cecece;
        color: #000;
        margin: 4px;
        border-radius: 4px;
      }
    }
  }
  h5 {
    font-size: 16px;
    font-weight: 500;
    margin: 15px 0;
    span {
      font-size: 14px;
      font-weight: 500;
      opacity: 0.4;
    }
  }
  input {
    padding: 8px;
    width: 100%;
    border-radius: 4px;
    border: solid 1px #cecece;
  }
  .vedio-upload {
    border-radius: 4px;
    text-align: center;
    p{
      color: #9fa7aa;
      padding-top: 20px;
    }
  }
  .vedio-content{
    padding-top: 20px;
    p{
      color: #9fa7aa;
    }
  }
  
}

.create-account {
  padding: 24px;
  .app-launch {
    padding: 20px;
    .video-bg {
      width: 100%;
      height: 150px;
      text-align: center;
      align-items: center;
      background-color: #efefef;
      border-radius: 4px;
      border: solid 1px #e5e5e5;
      i {
        background-color: #672fff;
        width: 40px;
        height: 40px;
        color: #fff;
        border-radius: 50%;
        margin-top: 50px;
        padding-top: 12px;
        padding-left: 4px;
      }
    }
    .main-content {
      padding: 24px;
      h3 {
        font-size: 16px;
        font-weight: 600;
        padding-bottom: 15px;
        span {
          color: @theme-color;
        }
      }
      ul {
        list-style: none;
        padding-left: 0;
        display: flex;
        color: #181d22;
        font-size: 14px;
        font-weight: normal;
        padding-bottom: 15px;
        i {
          margin-right: 10px;
          color: rgb(75, 71, 71);
        }
        li {
          span {
            color: @theme-color;
          }
        }
      }
    }

    .blue-btn {
      width: 100%;
      padding: 12px 10px;
      background-color: #672fff;
      color: #fff;
      border: 1px solid #672fff;
      font-size: 16px;
      font-weight: 600;
      border-radius: 4px;
    }
    .blue-btn:hover {
      width: 100%;
      padding: 12px 10px;
      background-color: #fff;
      color: #672fff;
    }
  }
}

@theme-button-color:#672fff;



.create-new-app{
    margin-top: 50px;
    .create-app{
        background-color: #fff;
        margin: auto;
        width: 540px;
        font-family: @vajro-font;
        color: #000000;
        padding: 12px 32px 32px;
        border-radius: 8px;
        border: solid 1px #e5e5e5;
        h5{
            font-size:24px !important;
            font-weight:600;
            line-height:1.4;
            letter-spacing:0.24px;
            text-align: left;
        }
        p{
            font-weight: normal;
            margin-top: 20px; 
        }
        label{
          font-weight: normal;
          margin-top: 20px;
        }
        #appName{
            height: 40px;
        }
        #findVajro{
            height: 40px;
        }
        .sellect-android{
            width: 49%;
            border: none;
            height: 40px;
            border-radius: 4px;
        }
       .sellect:hover{
           border: 1px solid black;
           background-color: white;
       }

    
        .sellect-ios{
            width: 49%;
            margin-left: 5px;
            border: none;
            height: 40px;
            border-radius: 4px;
        }
        .btn-continue{
            margin-top: 20px;
            height: 50px;
           border: none;
           background-color: @theme-button-color;
           width: 100%;
           color: #fff;
           border-radius: 4px;
           font-family: @vajro-font;
           font-size: 16px;
           font-weight: 600;
           font-stretch: normal;
           font-style: normal;
           line-height: 1.13;
           letter-spacing: 0.32px;
        }
    }
    .Select-Industry{
        background-color: #fff;
        margin: auto;
        width: 540px;
        font-family: @vajro-font;
        color: #000000;
        padding: 12px 32px 32px;
        border-radius: 8px;
        border: solid 1px #e5e5e5;
        h5{
            font-size:24px !important;
            line-height:1.4;
            letter-spacing:0.24px;
            text-align: left;
            font-family: @vajro-font;
        
            
        }
        .row>div {
            padding:2px;
        }
        .sellect-btn{
            width: 100%;
            border: none;
            height: 60px;
            border-radius: 4px;
            margin-top: 4px;
        }
        .sellect-btn:hover{
            border-radius: 4px;
            margin-top: 4px;
            border: 1px solid black;
            background-color: #fff;
        }
        .btn-continue{
            margin-top: 20px;
            height: 50px;
           border: none;
           background-color: @theme-button-color;
           width: 100%;
           color: #fff;
           border-radius: 4px;
           font-family: @vajro-font;
           font-size: 16px;
           font-weight: 600;
           font-stretch: normal;
           font-style: normal;
           line-height: 1.13;
           letter-spacing: 0.32px;
        }

    }

}

.widgets-wrapper {
 background: rgba(0, 0, 0, 0.5) !important;
  position: fixed;
  right: 0px;
  top: 72px;
  bottom: 0px;
  left: 0px;
  font-family: @vajro-font;
  z-index: 1;
  .widgets-container {  
    position: fixed;
    top: 72px;
    bottom: 0px;
    right: 0px;
    width: 370px;
    background-color: #fff;
    overflow: scroll;
    &:hover::-webkit-scrollbar-thumb{
      display: block;
    }
    .widgets-top {
      display: flex;
      place-content: space-between;
      box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
      padding: 16px;
      position: fixed;
      width: 370px;
      background: #fff;
      h5 {
        font-size: 18px;
        font-weight: 600;
        text-align: center;
      }
      i {
        margin: 12px;
      }
    }
    .widgets-body {
      margin-top: 80px;
      padding: 16px 32px;
      text-align: center;
      .banner-widget {
        background-color: #fde9f0;
        padding: 10px;
        border-radius: 8px;
        color: @add-widgets-bg-color;
        margin-top: 15px;
        .Banner {
          background-color: #fff;
          height: 240px;
          border-radius: 4px;
        }
        .Slider-Banner {
          background-color: #fff;
          height: 120px;
          border-radius: 4px;
        }
        .Slider-Banner {
          background-color: #fff;
          height: 120px;
          border-radius: 4px;
        }
        .add-widgets{
          display: none;
        }
        .Grid-boxes {
          display: flex;
          place-content: space-between;
          .Product {
            width: 48%;
            height: 120px;
            background-color: #fff;
            margin-top: 10px;
            padding-top: 45px;
          }
          .Product-slider{
            width: 48%;
            height: 160px;
            background-color: #fff;
            margin-top: 10px;
            padding-top: 45px;
          }
          .instragram {
            width: 31%;
            height: 85px;
            background-color: #fff;
            margin-top: 10px;
          }
          .rounded{
            width: 85px;
            height: 85px;
            background-color: #fff;
            margin-top: 10px;
            border-radius: 50%;
          }
        }
      }
      .banner-widget:hover {
        background-color: @add-widgets-bg-color;
        transition: 0.3s;
        .Slider-Banner {
          display: none !important;
          .Countdown-Timer{
            display: none;
          }
        }
        #add-banner{
          padding-top: 60px;
        }
        .Banner {
         visibility: hidden;
         height: 120px;
        }
        .add-widgets{
          display: block;
          color: #fff;
          height: 120px;
          padding-top: 10px;
          p{
            font-size: 12px;
            font-weight: 500;
          }
          i{
            background-color: #fff;
            color: @add-widgets-bg-color;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            padding-top: 18px;
            margin-bottom: 10px;
          }
        }
        .Grid-boxes {
          .Product {
            height: 60px;
            visibility: hidden;
          }
          .Product-slider{
            height: 25px;
            visibility: hidden;
          }
          .instragram {
            height: 25px;
            visibility: hidden;
          }
          .rounded {
            display: none;
          }
        }
      }
    }
  }
}

.modal{
    .custom{
        .modal-content{
            padding: 10px;
            border-radius: 8px;
            .customhead{
                border-bottom: 0px;
                padding: 10px;
                .close{
                    opacity: 1;
                    font-weight: 500;
                    font-size: 30px!important;
                }
                .modal-title{
                    text-align: center;
                    float: unset;
                    font-family: "Montserrat";
                    font-size: 20px!important;
                    font-weight: 600;
                    letter-spacing: 0.4px;
                }
            }
            .customdesc{
                text-align: center;
                letter-spacing: 0.28px;
                p{
                    font-family: "Montserrat";
                }
                .fonts{
                    margin-top: 20px;
                    ul{
                        padding: 0px;
                        list-style: none;
                        display: flex;
                        font-size: 12px;
                        justify-content: space-evenly;
                        .merriweather{
                            font-family: 'Merriweather', serif;
                        }
                        .montserrat{
                            font-family: "Montserrat";
                        }
                        .roboto{
                            font-family: 'Roboto', sans-serif;
                        }
                        .oxygen{
                            font-family: 'Oxygen', serif;
                        }
                        .raleway{
                            font-family: 'Raleway', sans-serif;
                        }
                        .quicksand{
                            font-family: 'Quicksand', sans-serif;
                        }
                        .helvetica{
                            font-family: 'Helvetica Neue', sans-serif;
                        }
                        .maven{
                            font-family: "Maven Pro";
                        }
                    }
                }
                .text{
                    font-family: "Montserrat";
                    font-size: 12px!important;
                    font-weight: 600;
                    padding: 13px 24px 12px!important;
                    margin-bottom: 10px;
                }
            }
        }
    }
}
@media (min-width: 768px){
    .custom {
        width: 456px;
    }
}
.customize {
  background-color: white;
  padding-left: 0px;
  padding-right: 0px;
  overflow: scroll;
  margin-bottom: 0 !important;
  overflow-x: hidden;
  &:hover::-webkit-scrollbar-thumb {
    display: block;
  }

  .header-add {
    padding: 15px 25px !important;
  }
  .customize-top {
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
    padding: 10px 10px;
    font-size: 16px;
    font-weight: 600;
    .top-content {
      display: flex;
      place-content: space-between;
      margin-bottom: 0px;
      .coundown-icon {
        display: flex;
        .vajro-edit {
          margin: auto;
          margin-bottom: 21px;
        }
      }
      .menu-list {
        list-style: none;
        margin: revert;
        padding-left: 0;
        .vajro-setting {
          font-size: 18px;
        }
      }

      p {
        padding-top: 15px;
        i {
          margin-right: 10px;
        }
        span {
          padding-left: 10px;
          color: @theme-color;
        }
      }
      span {
        i {
          margin-left: 20px;
        }
      }
    }
    .top-header {
      display: flex;
      place-content: space-between;
      align-items: center;
      p {
        i {
          margin-right: 10px;
        }
        span {
          color: #f62468;
          padding-left: 30px;
        }
      }
      .switch-toggle {
        display: flex;
        width: 200px;
        place-content: space-between;
        padding-right: 30px;
      }
    }

    .customize-btn {
      padding: 10px 25px 10px;
      border-radius: 4px;
      background-color: #f4f4f4;
      float: right;
      border: 1px solid;
    }
    #customize-sellected {
      background-color: #f72369;
      color: white;
    }
  }
  .customize-body {
    padding: 20px;

    .translate-link, .update {
      cursor: pointer;
      color: #f62369 !important;
      font-size: 12px;
      opacity: 1;
      &:hover {
        color: #f62369;
        text-decoration: none;
      }
    }

    .grid-background {
      background-color: #efefef;
      padding: 0px 10px 10px 10px;
      margin-top: 20px;
      display: flex;

      overflow: scroll;
      .Grid-boxes {
        display: flex;
        .Product {
          width: 150px;
          background-color: #fff;
          margin-top: 10px;
          border: dashed 1px #cfd3d7;
          border-radius: 4px;
          text-align: center;
          padding: 10px;
          margin-right: 10px;
          .widget-icons {
            width: 100%;
            background-color: #f3f3f3;
            padding: 10px;
            display: flex;
            place-content: space-around;
            border-radius: 4px;
          }
          p {
            font-size: 11px;
            font-weight: 500;
          }
          .circle-background{
            background-color: #f3f3f3;
            margin-top: 10px;
            padding: 10px;
            .grid-show {
              height: 80%;
              background-size: 100%, cover;
              background-repeat: no-repeat;
              img{
                width: 75%;
                border-radius: 50%;
              }
            }
          }
          
          .grid-hidden {
            margin-top: 65px;
          }
        }
      }
    }

    h5 {
      font-size: 16px;
      font-weight: 500;
      margin: 15px 0;
      .update {
        color: #0056ff;
        font-size: 12px;
        font-weight: normal;
        padding-left: 10px;
      }
      span {
        font-size: 14px;
        font-weight: 500;
        opacity: 0.4;
      }
    }
    .image-size-icons {
      display: flex;
      place-content: space-between;

      .icons-widget {
        align-self: center;
        i {
          margin-left: 10px;
        }
        .vajro-delete:hover {
          color: red;
        }
      }
    }
    .widgets-border {
      border: solid 1px #cfd3d7;
      background-color: #fff;
      padding: 10px;
      margin: 20px 0px;
      border-radius: 4px;
      &.active{
        border: 1px solid #F62369;
        span,i{
          color: #F62369;
        }
        img{
          filter: invert(24%) sepia(63%) saturate(4099%) hue-rotate(326deg) brightness(98%) contrast(97%);
        }
      }
      &:hover{
        border: 1px solid #F62369;
      }
      div {
        margin-bottom: 0px;
        padding-left: 5px;
      }
      p {
        margin-bottom: 0px;
        margin-top: 5px;
        img:hover{
          filter: invert(24%) sepia(63%) saturate(4099%) hue-rotate(326deg) brightness(98%) contrast(97%);
        }
        span {
          padding-left: 10px;
        }
      }
      i{
        float: right;
      }
    }
    .Rewynd {
      padding: 15px;
      input {
        width: 100%;
        padding: 8px 12px;
        border-radius: 4px;
        border: 1px solid #c1c0c0;
      }
    }
  }
  .footer-save {
    padding: 15px;
    position: sticky;
    bottom: 0;
    width: 100%;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
    background-color: #fff;
    .cancel-btn {
      width: 49%;
      padding: 10px 12px;
      margin-right: 0;
      border: none;
    }
    .save-btn {
      width: 49%;
      float: right;
      padding: 10px 12px;
      margin-right: 0;
      border-radius: 3px;
      background-color: #f62468;
      color: #fff;
      border: none;
    }
    .blue-btn {
      width: 100%;
      padding: 10px;
      background-color: #f62369;
      color: white;
      font-size: 21px;
      font-weight: 500;
      border-radius: 3px;
      border: none;
    }
    .save-theme-btn {
      width: 100%;
      padding: 10px 12px;
      border-radius: 3px;
      background-color: @theme-color;
      color: #fff;
      border: none;
    }
  }
}

.icons-widget {
  align-self: center;
  i {
    margin-left: 10px;
  }
  .vajro-delete:hover {
    color: red;
  }
}



.developer-customize {
  font-family: @vajro-font;
  width: 100%;
  &:hover::-webkit-scrollbar-thumb {
    display: block;
  }

  .customize-top {
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
    padding: 10px 10px;
    font-size: 16px;
    font-weight: 600;
    .disableBTN {
      background-color: #f2f2f2;
      color: black;
      padding: 12px 30px;
      border: 1px solid black;
      border-radius: 4px;
      pointer-events: none;
    }
    .disableBTN1 {
      background-color: @theme-color !important;
      color: #fff;
      border: 1px solid @theme-color;
      pointer-events: unset;
    }
    .top-content {
      display: flex;
      place-content: space-between;
      margin-bottom: 0px;
      .coundown-icon {
        display: flex;
        .vajro-edit {
          margin: auto;
          margin-bottom: 21px;
        }
      }
      .menu-list {
        list-style: none;
        margin: revert;
        padding-left: 0;
        .vajro-setting {
          font-size: 18px;
        }
      }

      p {
        padding-top: 15px;
        i {
          margin-right: 10px;
        }
        span {
          padding-left: 10px;
          color: @theme-color;
        }
      }
      span {
        i {
          margin-left: 20px;
        }
      }
    }
    .top-header {
      display: flex;
      place-content: space-between;
      align-items: center;
      p {
        i {
          margin-right: 10px;
        }
        span {
          color: #f62468;
          padding-left: 30px;
        }
      }
      .switch-toggle {
        display: flex;
        width: 200px;
        place-content: space-between;
        padding-right: 30px;
      }
    }

    .customize-btn {
      padding: 10px 25px 10px;
      border-radius: 4px;
      background-color: #f4f4f4;
      float: right;
      border: 1px solid;
    }
    #customize-sellected {
      background-color: #f72369;
      color: white;
    }
  }

  .developer-acount-body {
    padding: 24px;
    font-family: @vajro-font;
    .developer-acount {
      padding: 20px;
      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.09);
      min-height: 250px;
      .upload-receipt{
        display: flex;
        align-items: center;
      }
      h3 {
        margin-top: 0;
        font-size: 20px;
        font-weight: 600;
      }
      h4 {
        margin-top: 0;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 15px;
      }
      .new-dev-account {
        // display: flex;
        img {
          width: 60px;
        }
        p {
          margin-top: 10px;
          font-size: 14px;
          a {
            color: @theme-color;
            text-decoration: none;
          }
        }
      }

      .note {
        font-size: 12px;
        opacity: 0.8;
        text-align: center;
        margin-top: 20px;
        b {
          color: #000;
          font-weight: bold;
        }
      }
      .account-btn {
        padding: 8px 30px;
        margin-right: 10px;
        border-radius: 3px;
        border: solid 1px #000;
        margin-bottom: 20px;
      }
      #selected {
        background-color: @theme-color;
        color: #fff;
        border: 1px solid @theme-color;
      }
      .content {
        font-family: Poppins;
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.71;
        letter-spacing: 0.14px;
        margin-top: 10px;
      }
      .dev-list {
        border-radius: 4px;
        border: dashed 1px #78a2cc;
        background-color: #f0f8ff;
        padding: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
        ul {
          padding-left: 0;
          li {
            list-style: none;
            font-family: Montserrat;
            font-size: 11px;
            font-weight: normal;
            font-stretch: normal;
            font-style: normal;
            padding: 7px;
          }
        }
      }

      .main-item {
        padding: 10px;
        background-color: #fff;
        width: 250px;
      }
      
      .background-masker {
        background-color: #fff;
        position: absolute;
      }
      
      .btn-divide-left {
        top: 0;
        left: 35%;
        height: 100%;
        width: 5%;
      }
      
      @keyframes placeHolderShimmer {
        0% {
          background-position: -800px 0
        }
        100% {
          background-position: 800px 0
        }
      }
      
      .animated-background {
        animation-duration: 2s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: placeHolderShimmer;
        animation-timing-function: linear;
        background-color: #f6f7f8;
        background: linear-gradient(to right, #eeeeee 8%, #bbbbbb 18%, #eeeeee 33%);
        background-size: 800px 104px;
        height: 30px;
        position: relative;
      }
      

      button {
        border-radius: 4px;
        border: 1px solid #000;
        background-color: #fff;
        color: #000;
        font-family: Poppins;
        font-size: 12px;
        padding: 8px 12px;
      }
      .receipt {
        margin-top: 10px;
        margin-bottom: 20px;
        opacity: 0.8;
        font-family: Poppins;
        font-size: 12px;
        font-weight: 300;
        span {
          cursor: pointer;
        }
        a{
          text-decoration: none;
        }
      }
      .check-box {
        display: flex;
        label {
          font-family: Poppins;
          font-size: 12px;
          padding-left: 20px;
        }
      }
      .submit {
        margin-top: 10px;
        border-radius: 4px;
        background-color: #ffc9db;
        padding: 8px 30px;
        border: 1px solid;
        color: #fff;
        pointer-events: none;
      }
      .submit-checked {
        background-color: @theme-color;
        pointer-events: unset;
      }
      .Thank-sub {
        text-align: center;
        padding-top: 100px;
        padding-bottom: 100px;
        h2 {
          font-family: Poppins;
          font-size: 22px;
          font-weight: 500;
          margin-top: 0;
          margin-bottom: 20px;
        }
        p {
          font-size: 14px;
        }
      }

      .custom-checkbox-wrapper {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;

        margin-bottom: 10px;
        .custom-checkbox {
          &:not(:last-child) {
            margin-bottom: 16px;
          }

          input {
            display: none;

            &:checked ~ label .check-btn {
              background-color: @theme-color;
              border-color: @theme-color;
              display: flex;
              align-items: center;
              justify-content: center;

              &:before {
                content: "\e91e";
                font-family: "vajro-icon";
                font-size: 9px;
                font-style: normal;
                color: #ffffff;
                line-height: 1;
              }
            }
          }

          label {
            color: #000000;
            position: relative;
            font-size: 14px;
            font-weight: normal;
            line-height: 1.24;
            letter-spacing: 0.28px;
            padding-left: 28px;
            margin: 0;
            cursor: pointer;
            a{
              text-decoration: none;
            }
          }

          .check-btn {
            font-style: normal;
            position: absolute;
            top: 0;
            left: 0;
            display: inline-block;
            width: 16px;
            height: 16px;
            background-color: #fafafa;
            border: 1px solid #dbdbdb;
            border-radius: 2px;
            transition: background 0.25s linear, border-color 0.25s linear;
          }
        }
      }
    }
    .prefer-account {
      text-align: center;
      font-family: Poppins;
      font-size: 12px;
      margin-top: 10px;
      span {
        color: @theme-color;
        cursor: pointer;
      }
    }

    .receipt-name {
      margin: 0 12px 0 0;
      opacity: 0.8;
      font-family: Montserrat;
      font-size: 12px;
      font-weight: 500;
      font-stretch: normal;
      font-style: normal;
      line-height: 4.42;
      letter-spacing: 0.24px;
      text-align: left;
      color: #000;
    }

    .tab-navigation {
      .tab-list {
        list-style: none;
        display: flex;
        place-content: space-around;
        font-size: 14px;
        font-weight: 500;
        padding-left: 0;
        li {
          cursor: pointer;
          padding-bottom: 10px;
        }
        .active {
          color: @theme-color;
          border-bottom: 2px solid @theme-color;
        }
      }
    }
  }
}

.new-profile {
  background-color: #fff;
  font-family: @vajro-font;

  .header {
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
    padding: 24px;
    h1 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      i {
        margin-right: 20px;
      }
    }
  }
  .body {
    padding: 24px 80px 24px 24px;
    p {
      font-size: 16px;
      font-weight: 500;
      span {
        float: right;
        font-size: 12px;
        font-weight: 500;
        color: #0e71eb;
      }
    }
    input {
      width: 100%;
      padding: 10px 8px;
      margin-bottom: 20px;
      border-radius: 3px;
      border: solid 1px #cecece;
    }
    h2 {
      font-size: 18px;
      font-weight: 500;
    }
  }
  .footer {
    padding: 20px;
    .save-btn {
      width: 100%;
      padding: 10px 8px;
      background-color: @theme-color;
      color: white;
      font-size: 21px;
      font-weight: 500;
      border-radius: 3px;
      border: none;
    }
  }
}

.onboard-feature {
  font-family: @vajro-font;
  .header {
    background-color: #fff;
    right: 16px;
    left: 312px;
    z-index: 1;
    border-radius: 4px;
    
 
    ul {
      list-style: none;
      padding-left: 0;
     display:-webkit-box;
     overflow-x: auto;
     &:hover::-webkit-scrollbar-thumb {
      display: block;
      }

      &::-webkit-scrollbar {
        height: 4px;
    }

     

      li {
       padding: 14px;
        font-size: 14px;
        font-weight: normal;
        opacity: 0.6;
      }
      .active {
        font-weight: 600;
        color: @theme-color;
        opacity: 1;
      }
    }
  }
  .feature-body {
    padding-top: 20px;
   z-index: -1;
   .disable{
     background-color: lightgray!important;
   }
    .features {
      padding: 20px;
      background-color: #fff;
      display: flex;
      height: 150px;
      margin-bottom: 30px;
      img {
        height: 50px;
        margin-right: 10px;
      }
      .img-custom{
        height: fit-content;
      }
      .feature-content {
        width: 100%;
        .feature-header {
          display: flex;
          place-content: space-between; 
          h4 {
            margin: 0;
            font-size: 14px;
            font-weight: 600;
          }
        }
        .by-vajro {
          font-size: 12px;
        }
        p {
          font-size: 14px;
          margin-bottom: 0;
          margin-top: 8px;
        }

        .locked-icon {
          width: 62px;
          height: 62px;
          position: absolute;
          top: 0;
          right: 0;

          &:before {
              content: '';
              width: 0;
              height: 0;
              display: inline-block;
              border-top: 48px solid @theme-color;
              border-left: 48px solid transparent;
          }

          i {
              position: absolute;
              top: 6px;
              right: 20px;
              color: #FFFFFF;
              font-size: 16px;
          }
      }
      }
    }
  }
}

.sticky-head{
  position: fixed;
  top: 88px;
  left: 312px;
  right: 16px;
  background-color: #fff;
  z-index: 2;
  p{
    font-size: 16px;
  }
}
.top-sticky{
  right: 16px!important;
  top: 190px!important;
}
.onboard-stick-top{
  top:235px!important;
}
.sticky-wrapper {
  position: fixed;
  top: 88px;
  bottom: 16px;
  right: 16px;
  left: 312px;
  background-color: #fff;
  overflow-y: scroll;

  &:hover::-webkit-scrollbar-thumb {
    display: block;
  }
  .store-top {
    position: fixed;
    right: 16px !important;
    background-color: white;
    left: 312px;
    padding: 10px;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0px 0px 4px 0px lightgrey;
    z-index: 1;
    .top-content{
      padding-top: 10px;
      margin: 0;
    }
  }
}

.help-section {
  position: fixed;
  right: 16px;
  width: 250px;
  background-color: #fff;
  top: 88px;
  bottom: 16px;
  padding: 20px 24px;
  font-family: @vajro-font;
  color: #000000;
  overflow-y: scroll;
  &:hover::-webkit-scrollbar-thumb {
    display: block;
  }
  h4 {
    font-size: 18px;
    letter-spacing: 0.36px;
  }
  h5 {
    font-size: 15px;
    color: @theme-color;
    margin-top: 20px;
  }
  p {
    opacity: 0.5;
    font-size: 12px;
    line-height: 1.4;
  }
  img {
    margin-top: 20px;
  }
  .top-articles {
    margin-top: 25px;
  }
  .view-all {
    margin-top: 50px;
    text-align: center;
    span {
      color: @theme-color !important;
      font-weight: bold;
    }
    i {
      color: @theme-color;
    }
  }
  a {
    text-decoration: none;
    color: #585F62;
    &:hover {
      color: #585F62;
    }
  }

  .title {
    // box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
    border-bottom: 1px solid rgba(0, 0, 0, 0.16);
  }
}

.getting-start {
  h3 {
    padding-left: 20px;
    font-family: @vajro-font;
    font-size: 20px;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: 0.48px;
  }
  ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-left: 20px;
    padding-top: 30px;

    li {
      list-style: none;
      padding: 5px 15px;
      font-family: @vajro-font;
      font-size: 16px;
      font-stretch: normal;
      font-style: normal;
      line-height: 1.4;
      letter-spacing: 0.32px;
    }
    .active {
      color: @theme-color;
      border-bottom: 4px solid @theme-color;
    }
  }
  hr {
    margin: 5px 0px;
  }

  @media (max-width: 768px) {
    .col-xs-1 {
      padding-right: 0px !important;
    }
  }
  .basic-setup {
    padding: 20px 20px;
    .center-content {
      padding-left: 30px;
      h5 {
        font-family: @vajro-font;
        font-size: 16px;
        margin-top: 0px;
      }
      p {
        opacity: 0.8;
        font-family: @vajro-font;
        font-size: 12px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.4;
        letter-spacing: 0.24px;
        text-align: left;
        color: #000000;
      }
    }
    .number {
      width: 40px;
      height: 40px;
      // padding: 11px 17px 10px;
      text-align: center;
      padding-top: 10px;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
      border: solid 1px #d9d9d9;
      border-radius: 50%;
      position: relative;
      .fa-check {
        display: none;
      }
    }
    .active {
      width: 40px;
      height: 40px;
      padding: 11px 12px 10px;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
      border: solid 1px @theme-color;
      background-color: @theme-color;
      border-radius: 50%;
      position: relative;
      .fa-check {
        display: block;
        color: white;
      }
      p {
        display: none;
      }
    }
    #sellect {
      color: @theme-color;
    }
    .active-stick {
      background-color: @theme-color;
      border: solid 1px @theme-color;
    }
    .stick {
      // position: absolute;
      height: 40px;
      width: 4px;
      text-align: center;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
      border: solid 1px #d9d9d9;
      left: 34px;
      top: 45px;
    }
    .fa-angle-right {
      padding-top: 20px;
    }
  }

  .preview-app {
    .Hover-btn1 {
      color: #fff;
      background-color: black;
      padding: 10px 12px;
      border-radius: 4px;
      border: none;
      width: 120px;
      &:hover {
        -moz-box-shadow: 0 0 12px #999999;
        -webkit-box-shadow: 0 0 12px #999999;
        box-shadow: 0 0 12px #999999;
      }
    }
    .Hover-btn2 {
      color: #000;
      background-color: #fff;
      padding: 10px 12px;
      border-radius: 4px;
      border: 1px solid black;
      width: 120px;
      &:hover {
        -moz-box-shadow: 0 0 12px #999999;
        -webkit-box-shadow: 0 0 12px #999999;
        box-shadow: 0 0 12px #999999;
      }
    }
    .content {
      font-size: 14px;
      opacity: 0.8;
      margin-bottom: 30px;
    }
    .preview-design {
      padding: 25px 40px 0px;
      border-radius: 8px;
      border: 1px solid #dbdbdb;
      .header-content {
        font-size: 16px;
        font-weight: 600;
        text-align: left;
        margin-top: 20px;
        padding: 0;
      }
      h5 {
        font-size: 12px;
        margin-top: 15px;
        margin-bottom: 20px;
      }
      .store {
        img {
          width: 40%;
        }
      }
    }
    .preview-qrcode {
      padding: 20px;
      text-align: center;
      p {
        padding-top: 10px;
        font-size: 9px;
      }
    }
    .previwe-footer {
      padding: 30px;
      .back-btn {
        background-color: #f8f8f8;
        padding: 18px 51px 17px;
        border-radius: 8px;
        border: solid 1px #f2f2f2;
        color: black;
        float: left;
        font-weight: bold;
      }
      .next-btn {
        background-color: @theme-color;
        padding: 18px 51px 17px;
        border-radius: 8px;
        border: none;
        color: white;
        float: right;
        font-weight: bold;
      }
    }
  }
  .Launch-App-setup {
    padding: 20px 20px;
    .center-content {
      padding-left: 30px;
      h5 {
        font-family: @vajro-font;
        font-size: 16px;
        margin-top: 0px;
      }
      p {
        opacity: 0.8;
        font-family: @vajro-font;
        font-size: 12px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.4;
        letter-spacing: 0.24px;
        text-align: left;
        color: #000000;
      }
    }
    .number {
      width: 40px;
      height: 40px;
      padding-top: 10px;
      text-align: center;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
      border: solid 1px #d9d9d9;
      border-radius: 50%;
      position: relative;
      .fa-check {
        display: none;
      }
    }
    .active {
      width: 40px;
      height: 40px;
      padding: 11px 12px 10px;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
      border: solid 1px @theme-color;
      background-color: @theme-color;
      border-radius: 50%;
      position: relative;
      .fa-check {
        display: block;
        color: white;
      }
      p {
        display: none;
      }
    }
    #sellect {
      color: @theme-color;
    }
    .active-stick {
      background-color: @theme-color;
      border: solid 1px @theme-color;
    }
    .stick {
      height: 40px;
      width: 4px;
      text-align: center;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
      border: solid 1px #d9d9d9;
      left: 34px;
      top: 45px;
    }
    .fa-angle-right {
      padding-top: 20px;
    }
  }
}

@media (min-width: 768px) and (max-width: 998px){
  .sticky-head{
    right: 16px!important;
  }
  .onboard-stick-top{
    right: 16px!important;
  }
}

@media (max-width: 992px) {
  .sticky-wrapper .store-top {
    right: 18px !important;
  }
}
@media (max-width: 989px) {
  .sticky-wrapper .store-top {
    left: 253px !important;
  }
}
@media (max-width: 803px){
  .preview-head{
    .top-sticky{
      top: 202px!important;
    }
  }
}
@media (max-width: 767px){
  .preview-head{
    .top-sticky{
      top: 190px!important;
    }
  }
}
@media(min-width: 642px)and(max-width: 767px){
  .top-sticky{
    top: 190px!important;
  }
}
@media (max-width: 767px) {
  .sticky-wrapper .store-top {
    left: 17px !important;
  }
}
@media (max-width: 567px){
  .preview-head{
    .top-sticky{
      top: 202px!important;
    }
  }
}
@media(max-width: 437px){
  .onboard-stick-top{
    top:260px!important;
  }
}
@media (max-width: 320px){
  .preview-head{
    .top-sticky{
      top: 222px!important;
    }
  }
}

.instagram-feed {
    h5 {
      font-size: 16px;
      font-weight: 500;
      margin: 15px 0;
      span {
        font-size: 14px;
        font-weight: 500;
        opacity: 0.4;
      }
      
    }
    input {
      padding: 8px;
      width: 100%;
      border-radius: 4px;
      border: solid 1px #cecece;
    }
    .instagram-bg{
        width: 100%;
        text-align: center;
        background-color: #f7f7f7;
        padding: 35px;
        margin-top: 25px;
        border-radius: 4px;
        button{
            background-color: #000;
            color: #fff;
            border-radius: 4px;
        }
    }
  
  }
.live-video-indicator {
  h5 {
    font-size: 14px;
    font-weight: 500;
    margin: 15px 0;
    span {
      font-size: 12px;
      font-weight: 500;
      opacity: 0.4;
    }
    i {
      float: right;
      background: #efefef;
      width: 20px;
      height: 18px;
      text-align: center;
      border-radius: 4px;
      margin-left: 20px;
    }
  }
  input {
    padding: 8px;
    width: 100%;
    border-radius: 4px;
    border: solid 1px #cecece;
  }
  .video-bg{
    width: 100%;
    height: 200px;
    background-color: @theme-color;
    color: white;
    text-align: center;
    padding-top: 50px;
    i{
      background-color: #f6243c;
      width: 50px;
      height: 50px;
      padding-top: 18px;
      padding-left: 3px;
      border-radius: 50%;
    }
  }
 
}


.disabled-style {
  opacity: 0.5; /* Makes the element appear disabled */
  pointer-events: none; /* Prevents interaction with the element */
  cursor: not-allowed; /* Changes the cursor to indicate the element is disabled */
}
@media(max-width: 1440px){
  .branding-stickers .startup-plan-sticker h2{
    font-size: 23px;
  }
  .branding-stickers .startup-plan-sticker ul li{
    font-size: 15px;
  }
}
@media(max-width: 1200px){
  .branding-stickers .startup-plan-sticker h2{
    font-size: 20px;
  }
  .branding-stickers .startup-plan-sticker ul li{
    font-size: 14px;
  }
}
@media (max-width: 998px) {
  .help-section {
    display: none;
  }
}
@media (max-width: 767px) {
  .sidenav-bar {
    display: none;
  }
  .mobile-hidden {
    display: none !important;
  }
  .mobile-show {
    display: block !important;
  }
  .mobile-visibile {
    display: block !important;
  }
  .sticky-wrapper, .sticky-head {
    right: 16px !important;
    left: 16px !important;
  }
  .theme-sellect {
    right: 16px !important;
    left: 16px !important;
  }
  .onboard-container {
    margin-left: 16px !important;
  }
  .back-navigation-bar {
    left: 16px !important;
  }
  .help-section {
    display: none;
  }
  .onboard-feature {
    .header {
      left: 16px !important;
    }
    .feature-body .features {
      height: unset;
    }
  }
  .theme-sellect .theme-top {
    font-size: 14px !important;
    font-weight: 600 !important;
    left: 16px !important;
  }
  .modal:before {
    height: unset !important;
  }
  .new-integration-screen-modal .modal-dialog {
    width: 90%;
    margin: 125px auto;
  }
  .new-integration-screen-modal
    .modal-dialog
    .modal-content
    .modal-body
    .integration-modal-content {
    padding-left: unset !important;
  }
  .new-integration-screen-modal
    .modal-dialog
    .modal-content
    .modal-body
    .integration-modal-content
    .left-content {
    width: unset;
    position: unset;
    left: unset;
  }
  .new-integration-screen-modal
    .modal-dialog
    .modal-content
    .modal-body
    .integration-modal-content
    .right-content {
    padding: 12px 15px;
  }
  .branding-stickers .startup-plan-sticker h2{
    font-size: 18px;
  }
  .branding-stickers .startup-plan-sticker ul li{
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 989px) {
  .sticky-wrapper, .sticky-head {
    left: 252px;
  }
}
@media (max-width: 992px) {
  .help-section {
    display: none;
  }
  .sticky-wrapper {
    right: 16px !important;
  }
  .onboard-mobile {
    position: unset;
  }
  .header {
    ul {
      li {
        font-size: 12px !important;
      }
    }
  }
  .integration-tab-wrapper {
    position: unset;
    width: unset;
    overflow: unset;
    bottom: unset;
    top: unset;
    overflow-y: unset;
  }
}
@media(max-width:991px){
  .branding-stickers .startup-plan-sticker .startup-sticker{
    display: none;
  }
}

@media (min-width: 1200px) {
  .Personalize {
    position: absolute;
    width: 45%;
    top: 88px;
    bottom: 16px;

    .Personalize-top {
      position: fixed;
      background: #fff;
      width: 45%;
      z-index: 1;
    }
    .Personalize-colors {
      padding-top: 88px;
    }
  }
  .developer-customize {
    position: absolute;
    top: 0px;
    bottom: 16px;
    .customize-top {
      position: fixed;
      background: #fff;
      right: 280px;
      left: 312px;
      z-index: 1;
    }
    .developer-acount-body {
      padding-top: 100px;
    }
  }
  .customize {
    position: absolute;
    width: 45%;
    top: 88px;
    bottom: 16px;
    left: 312px;
    .customize-top {
      position: fixed;
      background: #fff;
      width: 45%;
      z-index: 1;
      left: 312px;
      top: 88px;
    }
    .customize-body {
      padding-top: 88px;
    }
    .navigation-top {
      padding: 0 !important;
    }
    .navigation-body {
      padding-top: 130px;
      .other-items-body {
        margin-top: -80px;
      }
    }
    .PushNotification-top {
      position: fixed;
      background: #fff;
      width: 45%;
      z-index: 1;
    }
    .pushnotification-body {
      padding-top: 150px !important;
    }
    md-switch .md-thumb-container {
      z-index: 0 !important;
    }
  }
  .customize-mobile {
    position: fixed;
    right: 0;
    width: 30%;
  }
}
@media only screen and (min-width: 990px) and (max-width: 1199px) {
  .Personalize {
    position: absolute;
    width: 42%;
    top: 88px;
    bottom: 16px;
    .Personalize-top {
      position: fixed;
      background: #fff;
      width: 42%;
      z-index: 1;
    }
    .Personalize-colors {
      padding-top: 88px;
    }
  }
  .developer-customize {
    position: absolute;
    top: 0px;
    bottom: 16px;
    .customize-top {
      position: fixed;
      background: #fff;
      right: 280px;
      left: 312px;
      z-index: 1;
    }
    .developer-acount-body {
      padding-top: 100px;
    }
  }
  .customize {
    position: absolute;
    width: 42%;
    top: 88px;
    bottom: 16px;
    left: 312px;
    .customize-top {
      position: fixed;
      background: #fff;
      width: 42%;
      z-index: 1;
      left: 312px;
      top: 88px;
    }

    .customize-body {
      padding-top: 88px;
    }
    .navigation-top {
      padding: 0 !important;
    }
    .navigation-body {
      padding-top: 130px;
      .other-items-body {
        margin-top: -80px;
      }
    }
    .PushNotification-top {
      position: fixed;
      background: #fff;
      width: 42%;
      z-index: 1;
    }
    .pushnotification-body {
      padding-top: 150px !important;
    }
    md-switch .md-thumb-container {
      z-index: 0 !important;
    }
  }
  .customize-mobile {
    position: fixed;
    right: 0;
    width: 27%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
  .preview-iphone-frame {
    width: 200px !important;
    height: 380px !important;
  }
  .onboard-container {
    margin-left: 252px !important;
  }
  .back-navigation-bar{
    left: 252px !important;
  }
  .theme-sellect {
    left: 252px !important;
  }
  .sidenav-bar {
    width: 220px !important;
    padding: 15px !important;
    ul {
      li {
        padding: 10px !important;
      }
    }
  }

  .Personalize {
    position: absolute;
    width: 40%;
    top: 88px;
    bottom: 16px;
    .Personalize-top {
      position: fixed;
      background: #fff;
      width: 40%;
      z-index: 1;
    }
    .Personalize-colors {
      padding-top: 88px;
    }
  }
  .developer-customize {
    position: absolute;
    top: 0px;
    bottom: 16px;
    .customize-top {
      position: fixed;
      background: #fff;
      right: 16px;
      left: 252px;
      z-index: 1;
    }
    .developer-acount-body
    {
      padding-top: 100px;
    }
  
  }
  .customize {
    position: absolute;
    width: 40%;
    top: 88px;
    bottom: 16px;
    left: 252px;
    .customize-top {
      position: fixed;
      background: #fff;
      width: 40%;
      z-index: 1;
      left: 252px;
      top: 88px;
      p {
        font-size: 14px;
      }
    }
    .customize-body {
      padding-top: 88px;
      .widgets-border {
        p {
          font-size: 12px;
        }
      }
    }
    .navigation-top {
      padding: 0 !important;
    }
    .navigation-body {
      padding-top: 130px;
      .other-items-body {
        margin-top: -80px;
      }
    }
    .PushNotification-top {
      position: fixed;
      background: #fff;
      width: 40%;
      z-index: 1;
    }
    .pushnotification-body {
      padding-top: 150px !important;
    }
    md-switch .md-thumb-container {
      z-index: 0 !important;
    }
  }
  .customize-mobile {
    position: fixed;
    right: 0;
    width: 28%;
  }
}
@media (min-width: 768px) {
  .max-with-hide {
    display: none;
  }
}
@media (max-width: 768px) {
  .max-with-hide {
    display: unset;
  }
  .Theme-sellect-border {
    height: 120px;
  }
  .dashboard-header {
    min-height: 60px;
  } 
}
@media (max-width: 425px) {
  .mobile-grid {
    display: none !important;
  }
}
@media (max-width: 525px) {
  .publish-stickers-info {
    width: 600px !important;
  }
  .price-text{
    font-size: 18px !important;
  }
  .current-plan-details h4{
    font-size: 14px !important;
  }
  .current-plan-details p{
    font-size: 10px !important;
  }
  .branding-stickers .startup-plan-sticker h2{
    font-size: 16px;
  }
  .branding-stickers .startup-plan-sticker ul li{
    font-size: 12px;
  }
}

@media (max-width: 1024px) {
  #intstagram-btn{
    padding: 8px 10px;
    margin: unset !important;
  }
}
@media (max-width: 374px) {
  .dashboard-header .header-list li {
    margin-right: 0;
  }
  .widgets-wrapper {
    .widgets-container {
      width: 320px;
      .widgets-top {
        width: 320px;
      }
    }
  }
}

.navigation-menu {
  .navigation-link {
    border: solid 1px #e5e5e5;
    ul {
      margin-bottom: 0;
      list-style: none;
      display: flex;
      place-content: space-between;
      padding: 12px 40px 0px 40px;
      li {
        color: #292c31;
        opacity: 0.4;
      }
      .active {
        // border-bottom: 2px solid;
        padding-bottom: 6px;
        opacity: 1;
        color: #f62369;
        font-weight: bold;
      }
    }
  }
  .navigation-content {
    padding: 30px;
    .heading-info {
      font-size: 14px !important;
      color: #757575;
      font-weight: 400;
    }
    .bottom-bar-main-navigation {
      display: flex;
      place-content: space-between;
    }
    .bottom-bar-navigation {
      place-content: space-between;
      padding: 12px 20px;
      border-radius: 4px;
      border: dashed 1px #cfd3d7;
      margin-top: 15px;
      .form-group{
        margin-bottom: 0;
        padding-left: 25px;
      }
      p {
        margin-bottom: 0;
      }
    }
    .navigation {
      display: flex;
      place-content: space-between;
      padding: 12px 20px;
      border-radius: 4px;
      border: dashed 1px #cfd3d7;
      margin-top: 15px;
      p {
        margin-bottom: 0;
      }
    }
    .navigation-top {
      display: flex;
      place-content: space-between;
      padding: 12px 30px;
      border-radius: 4px;
      background-color: #f5f6ff;
      p {
        margin-bottom: 0;
      }
    }
    .side-menu {
      display: flex;
      padding: 15px 20px;
      border-radius: 3px;
      border: solid 1px #cfd3d7;
      place-content: space-between;
      margin-bottom: 20px;
      p {
        margin: 0;
      }
      i {
        padding-top: 4px;
      }
    }

    .custom-checkbox-wrapper {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      

      .custom-checkbox {
        &:not(:last-child) {
          margin-bottom: 16px;
        }

        input {
          display: none;

          &:checked ~ label .check-btn {
            background-color: @theme-color;
            border-color: @theme-color;
            display: flex;
            align-items: center;
            justify-content: center;

            &:before {
              content: "\e91e";
              font-family: "vajro-icon";
              font-size: 9px;
              font-style: normal;
              color: #ffffff;
              line-height: 1;
            }
          }
        }

        label {
          color: #000000;
          position: relative;
          font-size: 14px;
          font-weight: normal;
          line-height: 1.24;
          letter-spacing: 0.28px;
          padding-left: 28px;
          margin: 0;
          cursor: pointer;
        }

        .check-btn {
          font-style: normal;
          position: absolute;
          top: 0;
          left: 0;
          display: inline-block;
          width: 16px;
          height: 16px;
          background-color: #fafafa;
          border: 1px solid #dbdbdb;
          border-radius: 2px;
          transition: background 0.25s linear, border-color 0.25s linear;
        }
      }
    }

    .custom-checkbox-wrapper-topbar {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      .custom-checkbox {
        &:not(:last-child) {
          margin-bottom: 16px;
        }

        &.disabled {
          cursor: not-allowed;
          input, label {
            cursor: not-allowed !important;
          }
          label {
            opacity: 0.4;
          }
          .check-btn {
            background-color: #dbdbdb;
          }
        }

        .checkbox-input {
          display: none;

          &.active ~ label .check-btn {
            background-color: @theme-color;
            border-color: @theme-color;
            display: flex;
            align-items: center;
            justify-content: center;

            &:before {
              content: "\e91e";
              font-family: "vajro-icon";
              font-size: 9px;
              font-style: normal;
              color: #ffffff;
              line-height: 1;
            }
          }
        }

        label {
          color: #000000;
          position: relative;
          font-size: 14px;
          font-weight: normal;
          line-height: 1.24;
          letter-spacing: 0.28px;
          padding-left: 28px;
          margin: 0;
          cursor: pointer;
        }

        .check-btn {
          font-style: normal;
          position: absolute;
          top: 0;
          left: 0;
          display: inline-block;
          width: 16px;
          height: 16px;
          background-color: #fafafa;
          border: 1px solid #dbdbdb;
          border-radius: 2px;
          transition: background 0.25s linear, border-color 0.25s linear;
        }
      }
    }
  }
  .sync-card {
    padding: 24px 32px;
    border-radius: 2px;
    background-color: rgba(247, 148, 0, 0.04);
    border-top: 5px solid #f79400;

    p {
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: 0.28px;
        margin-bottom: 24px;

        &.heading-txt {
            font-size: 16px;
            font-weight: 500;
            letter-spacing: 0.32px;
            margin-bottom: 16px;

            i {
                color: #f79400;
                font-size: 24px;
                vertical-align: bottom;
                margin-right: 8px;
            }
        }

        &.txt {
            color: rgba(0, 0, 0, .6);
        }
    }

    .btn {
        border-color: #f79400;
        background-color: #f79400;
    }
}
  .end-user-custom-translation {
    position: fixed;
    display: none;
    inset: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #000000;
    z-index: 99;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: center;
    padding: 0 !important;
    &:before {
      content: "";
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      margin-right: -4px;
    }
    &.active {
      display: block;
    }
    .modal-dialog {
      display: inline-block;
      text-align: left;
      vertical-align: middle;
      width: 600px;
      margin: 30px auto;
      position: relative;
      .modal-content {
        box-shadow: 0 5px 15px rgba(0,0,0,.5);
        position: relative;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid rgba(0,0,0,.2);
        border-radius: 6px;
        outline: 0;
        .modal-header {
          padding: 15px;
          border-bottom: 1px solid #e5e5e5;
        }
        .modal-body {
          position: relative;
          padding: 15px;
        }
      }
    }
  }
}

.navigation-preview {
  margin-top: 30px;

  .preview-iphone-frame {

    .preview-iphone-framecontent {
      &.show-preview_footer {
        .preview_body {
          bottom: 56px;
        }
      }

      .preview_footer {
        min-height: 56px;
        padding: 0;

        .bottom-bar-list {
          position: relative;
          width: 100%;
          height: 56px;
          // padding: 4px 12px;
          display: flex;
          align-items: center;
          overflow: hidden;

          .bar-list {
            position: relative;
            flex: 1 1 100%;
            label {
              span {
                width: 30px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
              }
            }

            &:active:before {
              padding-top: 0;
              padding-left: 0;
              opacity: 1;
              transition: 0s;
            }

            &:before {
              content: "";
              background: rgba(0, 0, 0, 0.5);
              display: block;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              border-radius: 50%;
              padding-top: 200%;
              padding-left: 200%;
              opacity: 0;
              transition: all 0.6s ease;
            }

            input {
              display: none;

              &:checked ~ label {
                i {
                  color: #ffffff;
                }

                span {
                  opacity: 1;
                  -webkit-transform: translateY(0);
                  transform: translateY(0);
                  height: auto;
                }
              }
            }

            label {
              position: relative;
              display: flex;
              flex-wrap: nowrap;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              color: #ffffff;
              font-size: 10px;
              font-weight: normal;
              text-align: center;
              min-width: 100%;
              max-width: 100%;
              height: 56px;
              padding: 0;
              margin: 0;
              z-index: 1;
              cursor: pointer;

              i,
              span {
                -webkit-transition: all 0.4s ease;
                transition: all 0.4s ease;
              }

              i {
                color: rgba(255, 255, 255, 0.6);
                display: inline-block;
                font-size: 16px;
              }

              span {
                height: 0;
                display: block;
                font-weight: 500;
                margin-top: 4px;
                opacity: 0;
                -webkit-transform: translateY(16px);
                transform: translateY(16px);
              }
            }
          }
        }
      }
    }
  }
}

.navigation-menu-content {
  display: grid;
  .category-menu {
    float: right;

    i {
      font-size: 16px;
      vertical-align: middle;
      cursor: pointer;

      &.vajro-delete {
        color: #ff4540;
      }

      &:not(:last-child) {
        margin-right: 8px;
      }
    }
  }

  .left-col {
    padding: 32px;
    border-radius: 5px;
    background-color: #ffffff;
    // min-height: 500px;
    margin-right: 32px;
    margin-bottom: 32px;

    .category-menu-list {
      list-style: none;
      padding-left: 0;
      margin: 0;

      li {
        &:not(:last-child) {
          margin-bottom: 8px;
        }
      }

      .angular-ui-tree-placeholder {
        border-radius: 2px;
        border: 2px dashed #9d9d9d;
        background-color: #f4f4f4;
      }

      .tree-node {
        // display: flex;
        color: black;
        align-items: center;
        padding: 16px 20px;
        border-radius: 2px;
        border: 1px solid #dbdbdb;
        background-color: #ffffff;
        min-height: 56px;
        font-size: 15px;
       
        .tree-handle {
          display: inline-block;
          font-size: 16px;
          line-height: 1;
          padding: 0;
          background-color: #ffffff;
          border: 0;
          min-height: auto;
          margin: 0 8px 2px 0;
        }

        .tree-node-content {
          display: inline-flex;
          align-items: center;
          color: #000000;
          font-size: 16px;
          font-weight: 500;
          line-height: 1.5;
          letter-spacing: 0.32px;
          margin: 0;
          margin-bottom: 0px !important;

          .drop-down-icon {
            width: 18px;
            height: 18px;
            border-radius: 2px;
            background-color: #000000;
            margin-left: 8px;
            display: flex;
            align-items: center;
            justify-content: center;

            &:before {
              content: "\e91b";
              font-family: "vajro-icon";
              font-size: 11px;
              line-height: 1;
              color: #ffffff;
              font-style: normal;
              vertical-align: middle;
            }

            &.collapsed:before {
              transform: rotate(180deg);
              margin-bottom: 2px;
            }
          }
        }
      }

      .angular-ui-tree-nodes {
        margin-top: 8px;
      }

      &.child-menu-list {
        margin-top: 8px;
        margin-left: 16px;
      }
    }

    .btn-wrapper {
      padding: 24px 0;

      .btn {
        &:not(:last-child) {
          margin-right: 8px;
          margin-bottom: 8px;
        }
      }
    }
  }
}

.billing-wrapper{
    hr{
        border: 12px solid #F2F2F2;
        margin: 0;
    }
    .billing-header{
        display: flex;
        align-items: center;
        padding: 16px;
        .title{
            font-weight: 600;
            font-size: 20px;
            line-height: 28px;
            margin: 0 8px;
        }
    }
    .billing-body{
        padding: 24px;
        .billing-subhead{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            .active-sub-head{
                font-weight: 600;
                font-size: 20px;
                line-height: 28px;
                text-transform: capitalize;
                margin: 0;
            }
            .active-sub-desc{
                font-weight: 400;
                font-size: 16px;
                line-height: 28px;
            }
            .sub-head{
                font-weight: 600;
                font-size: 20px;
                line-height: 28px;
            }
            .toggle-switch{
                position: relative;
                .plan{
                    font-weight: 600;
                    font-size: 14px;
                    line-height: 16px;
                }
                .offer{
                    font-weight: 400;
                    font-size: 10px;
                    line-height: 14px;
                    text-align: end;
                }
                .switch {
                    margin: 0 15px;
                    position: relative;
                    display: inline-block;
                    width: 32px;
                    height: 20px;
                    input { 
                        opacity: 0;
                        width: 0;
                        height: 0;
                        &:checked + .slider {
                            background-color: #21BF86;
                          }
                          
                          &:focus + .slider {
                            box-shadow: 0 0 1px #21BF86;
                          }
                          
                          &:checked + .slider:before {
                            transform: translateX(12px);
                          }
                    }
                    .slider {
                        position: absolute;
                        cursor: pointer;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background-color: #D0D0D0;
                        transition: .4s;
                        &:before {
                            position: absolute;
                            content: "";
                            height: 12px;
                            width: 12px;
                            left: 4px;
                            bottom: 4px;
                            background-color: #FFFFFF;
                            transition: .4s;
                          }
                      }
                      .round {
                        border-radius: 34px;
                        &:before {
                            border-radius: 50%;
                        }
                      }
                }
            }
        }
        .billing-cards{
            margin-bottom: 30px;
            .card-height{
                display: flex;
                flex-wrap: wrap;
                .card{
                    position: relative;
                    height: 100%;
                    background: #FFFFFF;
                    border: 1px solid #a2a1a13d;
                    // box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.24);
                    border-radius: 4px;
                    // max-width: 284px;
                    padding: 20px 16px 50px;
                    &:hover{
                        border: 1px solid #F62369;
                        box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.24);
                        transition: 0.4s ease-in-out;
                        transform: scale(1.02);
                    }
                    .tag{
                        position: absolute;
                        top: -9px;
                        right: 16px;
                    }
                    .card-title{
                        font-weight: 400;
                        font-size: 16px;
                        line-height: 20px;
                        color: #000;
                    }
                    .discount_applied{
                        position: absolute;
                        top: 12px;
                        right: 12px;
                        font-size: 12px;
                        padding: 8px;
                        font-weight: 500;
                        color: white;
                        margin: 0;
                        border-radius: 4px;
                        background-color: #AC035C;
                    }
                    .dollars{
                        font-weight: 600;
                        font-size: 24px;
                        line-height: 34px;
                        margin-bottom: 16px;
                        .plan-type{
                            font-size: 14px;
                            font-weight: 400;
                            line-height: 20px;
                        }
                    }
                    .strike-price{
                        font-weight: 400;
                        font-size: 20px;
                        line-height: 28px;
                        text-decoration: line-through;
                        text-decoration-thickness: 1px;
                        color: #ADADAD;
                    }
                    .annual-total{
                        font-weight: 400;
                        font-size: 16px;
                        line-height: 20px;
                    }
                    .get-started{
                        border: 2px solid #F62369;
                        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.1));
                        color: #F62369;
                        font-family: 'Poppins';
                        border-radius: 4px;
                        text-align: center;
                        padding: 10px;
                        width: -webkit-fill-available;
                        width: -moz-available;
                        font-weight: 500;
                        font-size: 14px;
                        line-height: 21px;
                        background-color: #fff;
                        margin-bottom: 16px;
                    }
                    .anchor-wrapp{
                        display: block;
                        text-align: center;
                        margin-bottom: 24px;
                        .apply{
                            font-weight: 500;
                            text-decoration: none;
                            padding: 3px 5px;
                            font-size: 12px;
                            line-height: 19px;
                            color: #3C548B;
                            border-bottom: 1px solid;
                            text-align: center;
                        }
                    }
                    .features-wrapper{
                        padding-left: 8px;
                        margin-bottom: 20px;
                        .item{
                            display: flex;
                            align-items: baseline;
                            margin-bottom: 16px;
                            p{
                                font-weight: 400;
                                font-size: 12px;
                                line-height: 18px;
                                padding-left: 10px;
                                margin: 0;
                                color: #000;
                            }
                        }
                    }
                    .seemore_wrapper{
                        .panel-group{
                            .panel{
                                background-color: transparent;
                                box-shadow: none;
                                .panel-body{
                                    padding: 0;
                                    .features-wrapper{
                                        padding-left: 8px;
                                        margin-bottom: 20px;
                                        .item{
                                            display: flex;
                                            align-items: baseline;
                                            margin-bottom: 16px;
                                            p{
                                                font-weight: 400;
                                                font-size: 12px;
                                                line-height: 18px;
                                                padding-left: 10px;
                                                margin: 0;
                                                color: #000;
                                            }
                                        }
                                    }
                                }
                                .panel-heading{
                                    display: flex;
                                    justify-content: center;
                                    padding: 0;
                                    position: absolute;
                                    left: 0;
                                    background-color: transparent;
                                    right: 0;
                                    bottom: 30px;
                                    &::after{
                                        display: none;
                                    }
                                    .panel-title{
                                        font-weight: 500;
                                        font-size: 12px;
                                        line-height: 18px;
                                        color: #000;
                                        text-transform: none;
                                        text-decoration: none;
                                    }
                                }
                            }
                        }
                    }
                    .integration{
                        padding: 5px;
                        text-align: center;
                        margin: 0;
                        background-color: rgba(246, 35, 105, 0.1);
                        font-weight: 500;
                        font-size: 12px;
                        color: #000;
                        line-height: 18px;
                        margin-bottom: 20px;
                    }
                }
            }
        }
        .redirect-wrapper{
            display: block;
            text-align: center;
            a{
                text-decoration: none;
                color: rgba(0, 0, 0, 0.8);
                font-weight: 500;
                font-size: 16px;
                line-height: 20px;
            }
        }
        .blynk-note-wrapper{
            margin: 16px 32px;
            padding: 16px;
            text-align: center;
            background: rgba(246, 35, 105, 0.04);
            .head{
                font-weight: 600;
                font-size: 16px;
                line-height: 24px;
                color: #F62369;
            }
            .plan-note{
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                margin-bottom: 16px;
            }
            .desc{
                font-weight: 400;
                font-size: 16px;
                line-height: 20px;
            }
            .note{
                margin-top: 32px;
                font-weight: 400;
                font-size: 16px;
                line-height: 20px;
            }
        }
        .custom-charges-wrapper{
            margin: 16px 32px;
            .panel{
                border: 1px solid #DEDEDE;
                box-shadow: none;
                .panel-heading{
                    background-color: #fff;
                    padding: 16px 20px;
                    border-radius: 4px;
                    .panel-title{
                        font-weight: 600;
                        font-size: 16px;
                        line-height: 24px;
                        color: #000;
                        text-transform: capitalize;
                        text-decoration: none;
                    }
                }
                .panel-body{
                    border: none;
                    border-radius: 4px;
                    padding: 10px 24px 32px 20px;
                    background-color: #fff;
                    ul{
                        padding-left: 20px;
                        .custom-wrapper{
                            display: flex;
                            justify-content: space-between;
                            align-items: baseline;
                            .content{
                                .head{
                                    font-weight: 500;
                                    margin-bottom: 8px;
                                    font-size: 16px;
                                    line-height: 24px;
                                    color: #000;
                                }
                                .desc{
                                    font-weight: 400;
                                    font-size: 16px;
                                    line-height: 24px;
                                    color: #000;
                                    margin-bottom: 20px;
                                }
                            }
                            .dollar{
                                font-weight: 600;
                                font-size: 16px;
                                line-height: 24px;
                                color: #000;
                                padding-left: 50px;
                            }
                        }
                    }
                    .custom-pay{
                        padding: 8px 16px;
                        background-color: #F62369;
                        color: white;
                        font-weight: 500;
                        font-size: 16px;
                        line-height: 20px;
                        border-radius: 4px;
                        border: none;
                    }
                }   
            }
        }
        .blynk-enable{
            margin: 32px 32px 0;
            border: 1px solid #DEDEDE;
            border-radius: 4px;            
            padding: 16px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            p{
                margin: 0;
                font-weight: 600;
                font-size: 16px;
                line-height: 24px;
                color: #000;
            }
            span{
                font-weight: 500;
                font-size: 16px;
                line-height: 24px;
                color: #F62369;
            }
        }
    }
}

.coupon-dialog{
    max-width: 500px;
    .modal-content{
        border-radius: 8px;
        .modal-header{
            padding: 15px 15px 0;
            border: none;
        }
        .modal-body{
            padding: 0 15px 15px;
            .content-wrapper{
                margin-right: 52px;
                .msg{
                    display: flex;
                    align-items: center;
                    padding: 10px 0;
                    i{
                        background-color: #f44336;
                        color: white;
                        padding: 9px;
                        opacity: 1;
                        border-radius: 50%;
                        font-size: 15px!important;
                        margin-right: 15px;
                    }
                }
                .apply{
                    width: 160px;
                    padding: 10px 29px;
                    background: #F62369;
                    border-radius: 4px;
                    border: none;
                    color: #fff;
                    font-weight: 600;
                    font-family: 'Poppins';
                    font-size: 14px;
                    line-height: 21px;
                    margin-top: 15px;
                }
            }
        }
    }
}

.success-coupon-dialog{
    max-width: 375px;
    .modal-content{
        border-radius: 8px;
        .modal-header{
            border: none;
            h4{
                font-weight: 600;
                color: #F62369;
                text-align: center;
                font-size: 14px;
                line-height: 20px;
            }
        }
        .content-wrapper{
            p{
                font-weight: 400;
                font-size: 16px;
                line-height: 20px;
                text-align: center;
            }
        }
    }
}

@media screen and (min-width: 768px) and (max-width:830px) {
    .billing-subhead{
        display: block!important;
        .toggle-switch{
            margin-top: 20px;
            .offer{
                text-align: unset!important;
                margin-left: 120px;
            }
        }
    }    
}
@media screen and (max-width:590px) {
    .billing-subhead{
        display: block!important;
        .toggle-switch{
            margin-top: 20px;
            .offer{
                text-align: unset!important;
                margin-left: 120px;
            }
        }
    }    
}
@media screen and (max-width:425px){
    .billing-wrapper{
        .billing-body{
            padding: 16px;
            .blynk-enable{
                p,span{
                    font-size: 14px;
                }
            }
            .billing-subhead{
                .sub-head{
                    font-size: 18px;
                }
            }
            .redirect-wrapper{
                a{
                    font-size: 14px;
                }
            }
            .blynk-note-wrapper{
                margin: 16px;
                .head{
                    font-size: 14px;
                }
                .plan-note,.desc,.note{
                    font-size: 12px;
                }
            }
            .blynk-enable{
                margin: 32px 16px 0;
                span{
                    padding-left: 20px;
                }
            }
            .custom-charges-wrapper{
                margin: 16px;
                .panel-heading{
                    font-size: 14px!important;
                    .panel-title{
                        font-size: 14px!important;
                    }
                }
                .panel-body{
                    .custom-pay{
                        font-size: 14px!important;
                    }
                }
                .content{
                    .head,.desc{
                        font-size: 14px!important;
                    }
                }
                .dollar{
                    font-size: 14px!important;
                    padding-left: 20px!important;
                }
            }
        }
    }
}
:root {
    --shadow_height: 107px;
    --month-color: #000;
    --year-color: #000;
    --active-slider-color: #F62369;
}

.billing-container {
    background-color: #ffffff;
    position: fixed;
    top: 88px;
    right: 16px;
    bottom: 16px;
    left: 305px;
    border-radius: 16px;
    overflow: auto;
    padding: 16px;
    &.extendBillingView{
        left: 16px !important
    }

    .empty-status {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .billing-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;

        h1 {
            font-weight: 500;
            font-size: 20px;
            line-height: 32px;
            margin: 0 0 8px;
        }

        p {
            color: #646464;
            font-weight: 400;
            font-size: 14px;
            line-height: 24px;

            span {
                font-weight: 600;
            }
        }

        .toggle-switch {
            position: relative;

            .plan {
                font-weight: 600;
                font-size: 14px;
                line-height: 16px;
            }

            .offer {
                font-weight: 400;
                font-size: 10px;
                line-height: 14px;
                text-align: end;
            }

            .switch {
                margin: 0 15px;
                position: relative;
                display: inline-block;
                width: 253px;
                height: 39px;

                &::before{
                    position: absolute;
                    left: 16px;
                    top: 9px;
                    z-index: 1;
                    content: "Monthly";
                    color: var(--month-color);
                }
                &::after{
                    position: absolute;
                    right: 16px;
                    top: 9px;
                    z-index: 1;
                    content: "Yearly (Save 25%)";
                    color: var(--year-color);
                }
                input {
                    opacity: 0;
                    width: 0;
                    height: 0;

                    &:checked+.slider:before {
                        transform: translateX(90px);
                        width: 153px;
                    }
                }

                .slider {
                    position: absolute;
                    cursor: pointer;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    transition: .4s;
                    border: 1px solid #131313;
                    &:before {
                        position: absolute;
                        content: "";
                        height: 30px;
                        width: 80px;
                        left: 4px;
                        bottom: 4px;
                        background-color: #F62369;
                        transition: .4s;
                    }
                }

                .round {
                    border-radius: 34px;

                    &:before {
                        border-radius: 20px;
                    }
                }
            }
        }
    }

    .highlighted-plan-info {
        padding: 8px;
        background: #E3F3FF;
        border: 1px solid #BBDFFF;
        border-radius: 4px;
        display: flex;
        align-items: center;
        width: max-content;

        p {
            margin: 0 0 0 9px;
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            color: #131313;
            span{
                font-weight: 500;
            }
        }
    }

    .active-plan-wrapper {
        padding: 24px;
        border: 1px solid #EEEEEE;
        box-shadow: 0px 2px 12px rgba(20, 20, 43, 0.08);
        border-radius: 16px;
        margin-top: 16px;
        .plan-name {
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: left;
            span{
            text-align: left;
            font-weight: 500;
            font-size: 20px;
            line-height: 32px;
            color: #131313;
            margin-left: 16px;
            }
        }

        .dollar {
            height: 50px;
            text-align: center;
            font-size: 14px;
            line-height: 24px;
            display: flex;
            align-items: baseline;
            justify-content: center;
            border-left: 1px solid #D1D1D1;
            
            span {
                font-weight: 400;
                font-size: 32px;
                line-height: 48px;
            }
        }

        .gmv {
            height: 50px;
            text-align: center;
            font-weight: 400;
            font-size: 14px;
            line-height: 24px;
            color: #646464;
            display: flex;
            align-items: center;
            justify-content: center;
            border-left: 1px solid #D1D1D1;

        }

        .details {
            height: 50px;
            text-align: right;
            display: flex;
            align-items: center;
            justify-content: center;
            border-left: 1px solid #D1D1D1;
            span{
                margin: 0;
                font-weight: 500;
                font-size: 12px;
                line-height: 20px;
                padding: 4px 8px;
                color: #00AA35;
                background-color: #E4F7E8;
                border-radius: 4px;
            }
        }
    }

    .active-beta-plan-wrapper {
        border: 1px solid #EEEEEE;
        box-shadow: 0px 2px 12px rgba(20, 20, 43, 0.08);
        border-radius: 16px;
        margin-top: 16px;
        ul {
            padding: 0; 
            margin-bottom: 24px;
            margin-top: 16px;
            -webkit-column-count: 3;
            -moz-column-count: 3;
            column-count: 3;
        }
        .d-flx {
            display: flex;
            margin-bottom: 16px;
            p {
                margin-bottom: 0px;
                margin-left: 8px;
                font-weight: 400;
                font-size: 12px;
                color: #131313;
            }
        }
        .active-beta-plan-container {
            padding: 24px;
            // padding-bottom: 16px;
        }
        .active-beta-plan-line {
            margin: 0px 24px;
            height: 1px;
            background-color: #EEEEEE;
            &.active {
                margin: 0px;
            }
        }
        .active-beta-plan-view-more-enabled {
            padding: 16px 24px;
            .title {
                font-weight: 500;
                font-size: 16px;
                color: #131313;
            }
            .active-beta-plan-view-more-notes {
                display: flex;
                align-items: center;
                background: #E3F3FF;
                border-radius: 4px;
                padding: 8px;
                border: 1px solid #BBDFFF;
                margin-bottom: 16px;
                .note-text {
                    color: #131313;
                    font-weight: 400;
                    font-size: 14px;
                    margin-left: 8px;
                }
            }
            .active-beta-plan-view-less {
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                div {
                    font-weight: 500;
                    font-size: 14px;
                    color: #F62369;
                    margin-right: 4px;
                }
            }
        }
        .active-beta-plan-view-more {
            padding: 24px;
            padding-top: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            .active-beta-plan-enable {
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 500;
                font-size: 14px;
                color: #F62369;
                div {
                    margin-right: 4px;
                }
            }
        }
        .plan-name {
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: left;
            span{
                text-align: left;
                font-weight: 500;
                font-size: 20px;
                line-height: 32px;
                color: #131313;
            }
        }

        .dollar {
            height: 50px;
            text-align: center;
            font-size: 14px;
            line-height: 24px;
            display: flex;
            align-items: baseline;
            justify-content: center;
            border-left: 1px solid #D1D1D1;
            
            span {
                font-weight: 400;
                font-size: 32px;
                line-height: 48px;
            }
        }

        .gmv {
            height: 50px;
            text-align: center;
            font-weight: 400;
            font-size: 14px;
            line-height: 24px;
            color: #646464;
            display: flex;
            align-items: center;
            justify-content: center;
            border-left: 1px solid #D1D1D1;

        }

        .details {
            height: 50px;
            text-align: right;
            display: flex;
            align-items: center;
            justify-content: center;
            border-left: 1px solid #D1D1D1;
            span{
                margin: 0;
                font-weight: 500;
                font-size: 12px;
                line-height: 20px;
                padding: 4px 8px;
                color: #00AA35;
                background-color: #E4F7E8;
                border-radius: 4px;
            }
        }
    }
    .separator {
        display: flex;
        align-items: center;
        text-align: center;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        &::before,&::after{
            content: '';
            flex: 1;
            border-bottom: 1px solid #ACACAC;;
        }
        &:not(:empty)::before{
            margin-right: 24px;
        }
        &:not(:empty)::after{
            margin-left: 24px;
        }
      }
    .billing-card {
        .card {
            border: 1px solid #EEEEEE;
            box-shadow: 0px 2px 12px rgba(20, 20, 43, 0.08);
            border-radius: 24px;
            padding: 24px 24px 0;
            position: relative;
            height: 100%;
            margin-top: 32px;
            &:hover {
                border: 1px solid #F62369;
                background: #FFFAFB;
                box-shadow: 0px 2px 12px rgba(20, 20, 43, 0.08);
            }
            &.loadOnlyBilling{
                border: 1px solid #F62369;
                background: #FFFAFB;
                box-shadow: 0px 2px 12px rgba(20, 20, 43, 0.08);
            }
            &.active{
                border: 1px solid #00AA35;
                background: #FBFEFC;
                box-shadow: 0px 2px 12px rgba(20, 20, 43, 0.08);
            }
            &.active::before{
                background: linear-gradient(360deg, #FFFFFF 0%, rgba(255, 255, 255, 0.95) 54.76%, rgba(255, 255, 255, 0) 109.52%);   
            }
            &:hover::before{
                background: linear-gradient(360deg, #FFFFFF 0%, rgba(255, 255, 255, 0.95) 54.76%, rgba(255, 255, 255, 0) 109.52%);
            }

            &::before {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: var(--shadow_height);
                border-radius: 0 0 24px 24px;
                background: linear-gradient(360deg, #FFFFFF 0%, rgba(255, 255, 255, 0.95) 54.76%, rgba(255, 255, 255, 0) 109.52%);
            }
            .plan-image{
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                margin-bottom: 8px;
                .active-plan{
                    display: flex;
                    align-items: center;
                    justify-content: end;
                    p{
                        margin: 0 0 0 5px;
                        font-weight: 500;
                        font-size: 12px;
                        line-height: 20px;
                    }
                }
            }
            .tag-wrapper {
                position: absolute;
                left: 50%;
                top: -20px;

                .tag {
                    position: relative;
                    white-space: nowrap;
                    text-align: center;
                    left: -50%;
                    color: #F62369;
                    background-color: #ffffff;
                    font-weight: 500;
                    font-size: 14px;
                    line-height: 20px;
                    border: 1px solid #EEEEEE;
                    border-radius: 24px;
                    padding: 8px 16px;
                }
            }

            .title {
                font-weight: 500;
                font-size: 20px;
                line-height: 32px;
                margin: 0 0 4px;
            }
            .discount-math{
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                color: #00AA35;
                margin: 0 0 8px;
            }
            .desc{
                font-weight: 400;
                font-size: 12px;
                line-height: 20px;
                color: #646464;
                // height: 30px;
            }
            .dollars {
                font-weight: 400;
                font-size: clamp(1em, 10vw, 3em);
                line-height: 72px;
                display: flex;
                align-items: baseline;
                color: #131313;
                .plan-type {
                    font-size: 14px;
                    line-height: 24px;
                }
            }
            .activePlan {
                pointer-events: none;
                opacity: 0.5;
            }
            .amount_strike {
                font-weight: 400;
                font-size: 20px;
                line-height: 28px;
                color: #ADADAD;
            }

            .month-price {
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                color: #000;
                margin: 0 0 10px;
            }

            .note {
                font-weight: 400;
                font-size: 12px;
                line-height: 20px;
                color: #646464;
                .original-max-gmv {
                    position: relative;
                    width: max-content;
                    color: #ADADAD;
                    .strike-line {
                        position: absolute;
                        top: 0px;
                        right: 0px;
                        left: 0px;
                        bottom: 0px;
                        border: 0.5px solid #ADADAD;
                        margin: auto 0px;
                    }
                }
            }

            .success-fee {
                font-weight: 400;
                font-size: 12px;
                line-height: 20px;
                color: #131313;
                margin-bottom: 4px;
            }

            .try-plan {
                font-family: 'Poppins';
                margin-top: 10px;
                font-weight: 500;
                font-size: 14px;
                line-height: 20px;
                text-align: center;
                color: #131313;
                background-color: transparent;
                border: 1px solid #131313;
                border-radius: 20px;
                padding: 8px;
                width: 100%;
            }
            .display-coupon-wrap{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 8px;
                .discount-code{
                    font-weight: 400;
                    font-size: 12px;
                    line-height: 20px;
                    color: #131313;
                    margin: 0;
                    span{
                        font-weight: 600;
                        margin-right: 4px;
                    }
                }
            }
            .saving{
                display: flex;
                align-items: center;
                margin-top: 5px;
                p{
                    margin: 0 0 0 6px;
                    font-size: 10px;
                    line-height: 20px;
                    color: #131313;
                    span{
                        font-weight: 500;
                    }
                }
            }
            .anchor-wrap {
                margin-top: 15px;
                text-align: center;

                .apply {
                    text-decoration: none;
                    font-weight: 500;
                    font-size: 12px;
                    line-height: 20px;
                    color: #F62369;
                }
            }

            .feature-head {
                font-weight: 500;
                font-size: 14px;
                line-height: 24px;
                color: #131313;
                margin-top: 24px;
                margin-bottom: 8px;
            }

            .flx {
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;

                p {
                    margin-left: 8px;
                    font-weight: 400;
                    font-size: 12px;
                    line-height: 20px;
                    color: #131313;
                }
            }

            .view-wrapper {
                position: absolute;
                left: 0;
                bottom: 15px;
                width: 100%;

                .view {
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #F62369;
                    margin: 0;
                    font-weight: 500;
                    font-size: 12px;
                    line-height: 20px;
                }
            }
        }

        .enterprice-wrapper {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            padding: 24px;
            width: 100%;
            border: 1px solid #EEEEEE;
            box-shadow: 0px 2px 12px rgba(20, 20, 43, 0.08);
            border-radius: 24px;
            margin: 21px 5px 0;

            .plan {
                display: flex;
                align-items: center;

                p {
                    font-weight: 500;
                    font-size: 20px;
                    line-height: 32px;
                    color: #131313;
                    margin: 0 0 0 16px;
                }
            }

            p {
                font-weight: 400;
                font-size: 14px;
                line-height: 24px;
                color: #646464;
                margin: 0;
            }

            .try-plan {
                font-family: 'Poppins';
                font-weight: 500;
                font-size: 14px;
                line-height: 20px;
                text-align: center;
                color: #131313;
                background-color: white;
                border: 1px solid #131313;
                border-radius: 20px;
                padding: 8px;
                width: 250px;
            }
        }
    }
    .billing-information {
        text-align: center;
        margin-top: 32px;
        color: #8B8B8B;
        font-size: 12px;
        div {
            &:first-child {
                margin-bottom: 5px;
            }
        }
    }
}

.confirm-dialog {
    max-width: 512px;

    .modal-content {
        border-radius: 24px;

        .confirm-wrapper {
            padding: 0;

            .row {
                display: flex;
                flex-direction: column;
            }
            .main {
                padding: 32px;
                .pad{
                    padding: 0;
                    .downgrade-items{
                        margin-bottom: 24px;
                        display: flex;
                        align-items: flex-start;                    
                        p{
                            margin: 0 0 0 10px;
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 20px;
                            color: #131313;
                        }
                    }
                }
                .downgrade-head{
                    font-weight: 500;
                    font-size: 14px;
                    line-height: 20px;
                    color: #131313;
                }
                textarea{
                    border: 1px solid #ACACAC;
                    border-radius: 4px;
                    width: 100%;
                    height: 124px;
                    padding: 10px 8px;
                    font-family: 'Poppins';
                    &::placeholder{
                        font-weight: 400;
                        font-size: 14px;
                        line-height: 20px;
                        color: #D1D1D1;
                    }
                }
                h4 {
                    font-weight: 600;
                    font-size: 16px;
                    line-height: 24px;
                    color: #131313;
                    margin: 0 0 16px;
                }

                p {
                    font-weight: 400;
                    font-size: 14px;
                    line-height: 24px;
                    color: #131313;
                }

                input {
                    border: 1px solid #ACACAC;
                    border-radius: 4px;
                    padding: 10px 8px;
                    width: 100%;
                    &::placeholder{
                        font-weight: 400;
                        font-size: 14px;
                        line-height: 20px;
                        color: #D1D1D1;
                    }
                }
                .info-wrapper{
                    padding: 12px 8px 12px 14px;
                    background: #E3F3FF;
                    border: 1px solid #BBDFFF;
                    border-radius: 4px;
                    .flx{
                        display: flex;
                        align-items: flex-start;
                        .cont{
                            margin-left: 12px;
                            font-weight: 400;
                            font-size: 14px;
                            line-height: 24px;
                            color: #131313;
                            .head{
                                margin-bottom: 25px;
                                span{
                                    font-weight: 500;
                                }
                            }
                            .desc{
                                margin-bottom: 0;
                            }
                            a{
                                color: #F62369;
                                font-weight: 600;
                                text-decoration: none;
                            }
                        }
                    }
                }
            }

            .actions {
                border-top: 1px solid #EEEEEE;
                padding: 16px;
                display: flex;
                align-items: center;
                justify-content: end;

                .cancel,
                .continue {
                    font-weight: 500;
                    font-size: 14px;
                    line-height: 20px;
                    border-radius: 20px;
                    padding: 8px 16px;
                }

                .cancel {
                    color: #131313;
                    border: 1px solid #131313;
                    background-color: white;
                    margin-right: 10px;
                }

                .continue {
                    border: none;
                    color: #ffffff;
                    background-color: #F62369;
                    &.active {
                        cursor: not-allowed;
                        opacity: 0.3;
                    }
                }
            }
        }
    }
}
@media(max-width: 1199px) {
    .billing-container { 
        .active-beta-plan-wrapper {
            ul {
                -webkit-column-count: auto;
                -moz-column-count: auto;
                column-count: auto;
            }
            .dollar,.gmv,.details {
                border-left: none !important;
            }
            .dollar, .plan-name, .gmv{
                margin-bottom: 20px;
            }
        }
    }
    .active-plan-wrapper{
        .dollar,.gmv,.details{
            border-left: none !important;
        }
        .dollar, .plan-name, .gmv{
            margin-bottom: 20px;
        }
    }
}

@media(max-width: 815px) {
    .billing-header{
        display: block!important;
        .switch{
            margin: 0!important;
        }
    }
}
@media(max-width: 456px){
    .gap{
        width: 100%;
    }
    .old{
        width: 100%;
    }
    .dollar, .gmv{
        margin-bottom: 10px!important;
    }
}
@media(max-width: 989px) {
    .billing-container {
        left: 245px;
    }
}

@media(max-width: 767px) {
    .billing-container {
        left: 0px;
    }
}
.Personalize {
  background-color: white;
  padding-left: 0px;
  padding-right: 0px;
  overflow: scroll;
  margin-bottom: 0 !important;

  overflow-x: hidden;  
  &:hover::-webkit-scrollbar-thumb {    
    display: block;  
  }
  .Personalize-top {
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
    padding: 20px 0px 20px 0px;
    font-size: 16px;
    font-weight: 600;
    .branding-btn {
      padding: 10px 25px 10px;
      border-radius: 4px;
      background-color: #f4f4f4;
      float: right;
      border: 1px solid;
    }
    #branding-sellected {
      background-color: #f72369;
      color: white;
    }
  }
  .Personalize-colors {
    .Personalize-app-color {
      color: #000000;
      font-family: @vajro-font;
      padding: 24px 34px 0px 34px;

      // common styles starts
      :focus,
      :active:focus {
        outline: 0 none;
      }

      .row {
        & > div {
          margin-bottom: 0;
        }

        .form-group {
          margin: 0 0 24px;
        }

        [class*="col-"] {
          padding: 0 12px;
        }

        &.no-gutter-spacing {
          margin: 0 -12px !important;
        }
      }

      .title {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: 0.32px;
        margin-bottom: 16px;
      }

      .form-group {
        margin: 0 0 20px;
      }

      .control-label {
        color: #000000;
        font-size: 13px;
        font-weight: normal;
        line-height: 1.3;
        letter-spacing: 0.26px;
        margin-bottom: 12px !important;
      }

      .form-control {
        height: 32px;
        color: #000000;
        font-size: 13px;
        line-height: 1.2;
        letter-spacing: 0.26px;
        padding: 10px 16px;
        border-radius: 2px;
        border-radius: 2px;
        border: 1px solid #cfd3d7;
        background-color: #ffffff;
        box-shadow: none;

        &::placeholder {
          color: #000000;
        }

        &:focus {
          border-color: #979797;
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
        }

        &[readonly] {
          pointer-events: none;
        }
      }

      .custom-checkbox-wrapper {
        display: flex;

        .custom-checkbox {
          &:not(:last-child) {
            margin-right: 16px;
          }

          input {
            display: none;

            &:checked ~ label .check-btn {
              background-color: #ff4540;
              border-color: #ff4540;
              display: flex;
              align-items: center;
              justify-content: center;

              &:before {
                content: "\e91e";
                font-family: "vajro-icon";
                font-size: 9px;
                font-style: normal;
                color: #ffffff;
                line-height: 1;
              }
            }
          }

          label {
            color: #000000;
            position: relative;
            width: 100%;
            font-weight: 600;
            font-size: 12px;
            line-height: 1.5;
            letter-spacing: 0.24px;
            padding-left: 28px;
            margin: 0;
            cursor: pointer;
          }

          .check-btn {
            font-style: normal;
            position: absolute;
            top: 0;
            left: 0;
            display: inline-block;
            width: 16px;
            height: 16px;
            background-color: #fafafa;
            border: 1px solid #dbdbdb;
            border-radius: 2px;
            transition: background 0.25s linear, border-color 0.25s linear;
          }
        }
      }
      // common styles ends

      .left-side-form {
        width: 520px;
      }

      .color-picker-wrapper {
        display: flex;
        justify-content: space-between;

        .color-picker-col {
          width: 44%;
        }

        .control-label {
          font-size: 12px;
          line-height: 1;
          letter-spacing: 0.24px;
          margin-bottom: 8px;
        }

        .input-color-picker {
          position: relative;

          .form-control {
            padding-right: 40px;
          }

          .color-picker-control {
            width: 20px;
            height: 20px;
            border: none;
            padding: 0;
            margin: 0;
            position: absolute;
            top: 50%;
            margin-top: -10px;
            right: 6px;
            -webkit-appearance: none;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
            transition: all 0.4s ease;
            cursor: pointer;

            &::-webkit-color-swatch-wrapper {
              padding: 0;
            }

            &::-webkit-color-swatch {
              border-radius: 2px;
              border: none;
            }

            &:hover {
              box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
            }
          }
        }
      }
    }
    .Personalize-app-logo {
      color: #000000;
      font-family: @vajro-font;
      padding-bottom: 20px;
      .title {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: 0.32px;
        margin-bottom: 16px;
        margin-top: 15px;
      }
      .content {
        font-size: 13px;
        font-weight: normal;
        letter-spacing: 0.26px;
        color: #7b8591;
      }
      .content-2 {
        width: 246px;
        font-size: 11px;
        font-weight: normal;
        line-height: 1.5;
        letter-spacing: 0.11px;
        color: #7b8591;
      }
      .cloud {
        border-radius: 4px;
        border: dashed 1px #7b8591;
        background-color: #f7f7f7;
        padding: 20px;
        width: 80px;
        text-align: center;
      }
      .cloud-2 {
        margin-top: 10px;
        border-radius: 4px;
        border: dashed 1px #7b8591;
        background-color: #f7f7f7;
        padding: 25px 50px 25px 50px;
        width: 160px;
        text-align: center;
      }
      .image-card {
        margin-bottom: 24px;

        &.small {
          p span.title {
            margin-bottom: 8px;
          }

          // .click-to-upload-image {
          //   width: 240px;
          //   height: 240px;

          //   img {
          //     width: 40px;
          //     height: 40px;
          //     margin-bottom: 8px;
          //   }
          // }

          figure {
            figcaption .btn-wrapper {
              flex-wrap: wrap;
              flex-direction: column;

              .btn:first-child {
                margin-right: 0;
                margin-bottom: 16px;
              }
            }
          }
        }

        &.screenshot-image-card {
          flex: 1 1;

          @media (max-width: 1199px) {
            min-width: 184px;
          }

          &:not(:last-child) {
            margin: 0 32px 24px 0;
          }

          p {
            color: ~"rgb(0 0 0 / .4)";
            text-align: center;

            span.title {
              margin-bottom: 8px;
            }
          }

          .click-to-upload-image {
            width: 100%;
            height: 356px;
            border-radius: 2px;
            border: 2px dashed #9d9d9d;

            @media (max-width: 1199px) {
              height: 320px;
            }

            img {
              width: 40px;
              height: 40px;
              margin-bottom: 8px;
            }
          }

          figure {
            align-items: flex-end;
            width: 100%;
            height: 352px;
            padding-bottom: 16px;

            @media (max-width: 1199px) {
              height: 320px;
            }

            &:before {
              background-color: transparent;
              background-image: linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0.33),
                #000000
              );
            }

            figcaption .btn-wrapper {
              flex-wrap: wrap;
              flex-direction: column;

              .btn:first-child {
                margin-right: 0;
                margin-bottom: 16px;
              }
            }
          }
        }

        p {
          color: ~"rgb(0 0 0 / .5)";
          font-size: 12px;
          line-height: 1;
          letter-spacing: 0.2px;
          margin-bottom: 16px;

          span {
            display: block;
            margin-bottom: 8px;

            &.title {
              color: #000000;
              font-size: 16px;
              line-height: 1.5;
              letter-spacing: 0.32px;
              margin-bottom: 16px;
            }

            &.grey-txt {
              color: ~"rgb(0 0 0 / .8)";
            }
          }
        }

        .click-to-upload-image {
          width: 424px;
          height: 192px;
          display: flex;
          flex-wrap: wrap;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          border-radius: 2px;
          background-color: #f4f4f4;
          cursor: pointer;

          img {
            display: block;
            width: 64px;
            height: 64px;
            object-fit: cover;
            margin: 0 auto 16px;
          }

          p {
            color: ~"rgb(0 0 0 / .3)";
            font-size: 14px;
            font-weight: 500;
            line-height: 1.2;
            letter-spacing: 0.28px;
            margin-bottom: 0;
          }
        }

        figure {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 80px;
          height: 80px;
          border-radius: 2px;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          overflow: hidden;
          margin-top: 20px;

          &.bg-grey {
            background-color: ~"rgb(0 0 0 / .5)";
            background-size: contain;
          }

          &:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: ~"rgb(0 0 0 / .6)";
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease;
          }

          &:hover {
            &:before,
            figcaption {
              opacity: 1;
              visibility: visible;
            }
          }

          figcaption {
            z-index: 1;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease;

            .btn-wrapper {
              display: flex;

              .btn {
                min-width: 112px;

                &:first-child {
                  margin-right: 16px;
                }

                &.upload-btn {
                  background-color: #ff4540;
                  border-color: #ff4540;
                }
              }
            }

            i.vajro-delete {
              color: #ffffff;
              font-size: 16px;
              position: absolute;
              top: 12px;
              right: 12px;
              z-index: 1;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}



.personalize-preview{
  position: fixed;
  right: 100px;
}

@media screen and (max-width:374px){
  .Personalize-app-color{
    padding: 24px 0px 0px 0px!important;
  }
}
.product-grid {
  h5 {
    font-size: 16px;
    font-weight: 500;
    margin: 15px 0;
    span {
      font-size: 14px;
      font-weight: 500;
      opacity: 0.4;
    }
    .update{
      color: #0056ff;
      font-size: 12px;
    }
  }
  input {
    padding: 8px;
    width: 100%;
    border-radius: 4px;
    border: solid 1px #cecece;
  }
  .dropdown{
    button{
      width: 100%;
      padding: 16px;
      .caret{
        float: right;
      }
    }
  }
}
.ds-btn{
  background-color: #ffc9db;
  pointer-events: none;
}
.pn-full-screen {
  width: 78% !important;
}

.push-notification {
  font-family: @vajro-font;

  .PushNotification-top {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
    padding: 30px 25px 0px 25px;
    z-index: 2;
    &.pn-full-screen {
      padding: 32px 24px 0px 24px;
    }
    .header {
      padding-bottom: 25px;
    }
    h2 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
    }
    ul {
      margin-top: 40px;
      display: flex;
      padding-left: 0;
      list-style: none;
      place-content: space-around;
      font-size: 14px;
      font-weight: 500;
      li {
        padding-bottom: 10px;
      }
      .active {
        border-bottom: 2px solid #f62369;
        color: #f62369;
      }
    }
  }
  .pushnotification-body {
    padding: 30px;
    position: relative;
    .input {
      padding: 10px 20px !important;
      width: auto !important;
      border-radius: 0px !important;
      border: solid 0px #cecece !important;
      height: auto !important;
    }
    tags-input .host {
      margin-top: 0px !important;
      margin-bottom: 0px !important;
    }
    tags-input .tags.focused {
      box-shadow: none;
    }
    tags-input .tags {
      padding: 0px;
      border-radius: 3px;
      border: solid 1px #cecece;
    }
    tags-input .tags .tag-item {
      margin: 9px 4.5px !important;
    }
    .loader-icon {
      background: #f62368;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px 48px;
      border-radius: 200px;
      height: 30px;
    }
    .push-notification-loader {
      position: absolute;
      inset: 0px;
      display: flex; 
      align-items: center; 
      justify-content: center;
      background:rgba(0, 0, 0, 0.2);
      z-index: 99;
      height: ~"calc(100vh - 104px)";
    }
    .pushnotification-body-title {
      display: flex; 
      align-items: center; 
      justify-content: space-between; 
      position: relative;
    }
    .gpt-container-disable {
      display: flex; 
      align-items: center;
      justify-content: center;
      cursor: pointer;
      background: #f62369;
      border-radius: 20px;
      padding: 8px 16px;
      font-size: 12px;
      height: 30px;
      img {
        margin-right: 4px;
      }
      .text-content {
        color: rgba(255, 255, 255, 1);
        font-weight: 500;
        span {
          font-weight: 100;
        }
      }
      &:hover {
        background: #E51F66;
      }
    }
    h3 {
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.26px;
      line-height: 1.3;
      color: #000000;
      margin-bottom: 12px;
      span {
        color: #3e3e3e;
        font-size: 14px;
        opacity: 0.8;
      }
      button {
        margin-left: 15px;
        padding: 8px 15px;
        border-radius: 8px;
        background-color: #e6e2ff;
        border: none;
      }
    }
    .widget {
      margin-top: 20px !important;
    }
    .note-content {
      margin-top: 10px;
      color: rgb(64, 64, 65);
      font-size: 12px;
      display: flex;
      place-content: space-between;
    }
    .send-notificationt {
      margin-top: 20px;
      background-color: @theme-color;
      padding: 12px 15px;
      text-align: center;
      border-radius: 3px;
      border: none;
      color: white;
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 20px;
    }
    .Cancel-btn {
      background-color: #f1f0f5 !important;
      color: #000 !important;
    }
    input {
      padding: 10px 20px;
      border-radius: 3px;
      border: solid 1px #cecece;
      width: 100%;
    }
    select {
      padding: 10px 15px;
      border-radius: 3px;
      width: 100%;
      height: 40px;
      border: solid 1px #cecece;
      background-color: unset;
      &.disabled {
        cursor: not-allowed;
        background-color: #eee;
        opacity: 1;
      }
    }
    .background-border {
      width: 100%;
      height: 150px;
      border: dashed 1px #cecece;
      border-radius: 8px;
      background-color: #fafafa;
      padding-top: 35px;
      text-align: center;
    }
    p {
      color: #3e3e3e;
      font-size: 13px;
      opacity: 0.8;
    }
    h4 {
      margin-top: 15px;
      font-size: 14px;
      font-weight: 600;
    }
    .Automated {
      place-content: space-between;
      border-radius: 3px;
      border: solid 1px #cfd3d7;
      display: flex;
      padding: 10px 12px;
      margin-bottom: 20px;
      p {
        font-size: 14px;
        font-weight: 500;
        margin: 0;
      }
    }
    .schedule {
      span {
        .radio-button {
          width: unset;
          margin-right: 10px;
        }
      }
    }
    .msg-anime{
      background-color: #ffde3f!important;
      transition: background-color 2s;
    }

    .message {
      border-radius: 4px;
      background-color: #fdf0f5;
      padding: 15px;
      border: 1px solid #f62369;
      .message-highlight{
        color: #f62369;
      }
      
      p {
        font-size: 14px;
        margin: 0;
      }
    }
    .image-card {
      margin-bottom: 24px;

      &.small {
        p span.title {
          margin-bottom: 8px;
        }

        .click-to-upload-image {
          width: 240px;
          height: 240px;

          img {
            width: 40px;
            height: 40px;
            margin-bottom: 8px;
          }
        }

        figure {
          width: 240px;
          height: 240px;

          figcaption .btn-wrapper {
            flex-wrap: wrap;
            flex-direction: column;

            .btn:first-child {
              margin-right: 0;
              margin-bottom: 16px;
            }
          }
        }
      }

      &.screenshot-image-card {
        flex: 1 1;

        @media (max-width: 1199px) {
          min-width: 184px;
        }

        &:not(:last-child) {
          margin: 0 32px 24px 0;
        }

        p {
          color: ~"rgb(0 0 0 / .4)";
          text-align: center;

          span.title {
            margin-bottom: 8px;
          }
        }

        .click-to-upload-image {
          width: 100%;
          height: 356px;
          border-radius: 2px;
          border: 2px dashed #9d9d9d;

          @media (max-width: 1199px) {
            height: 320px;
          }

          img {
            width: 40px;
            height: 40px;
            margin-bottom: 8px;
          }
        }

        figure {
          align-items: flex-end;
          width: 100%;
          height: 352px;
          padding-bottom: 16px;

          @media (max-width: 1199px) {
            height: 320px;
          }

          &:before {
            background-color: transparent;
            background-image: linear-gradient(
              to bottom,
              rgba(0, 0, 0, 0.33),
              #000000
            );
          }

          figcaption .btn-wrapper {
            flex-wrap: wrap;
            flex-direction: column;

            .btn:first-child {
              margin-right: 0;
              margin-bottom: 16px;
            }
          }
        }
      }

      p {
        color: ~"rgb(0 0 0 / .5)";
        font-size: 12px;
        line-height: 1;
        letter-spacing: 0.2px;
        margin-bottom: 16px;

        span {
          display: block;
          margin-bottom: 8px;

          &.title {
            color: #000000;
            font-size: 16px;
            line-height: 1.5;
            letter-spacing: 0.32px;
            margin-bottom: 16px;
          }

          &.grey-txt {
            color: ~"rgb(0 0 0 / .8)";
          }
        }
      }

      // .click-to-upload-image {
      //   width: 424px;
      //   height: 192px;
      //   display: flex;
      //   flex-wrap: wrap;
      //   flex-direction: column;
      //   align-items: center;
      //   justify-content: center;
      //   border-radius: 2px;
      //   background-color: #f4f4f4;
      //   cursor: pointer;

      //   img {
      //     display: block;
      //     width: 64px;
      //     height: 64px;
      //     object-fit: cover;
      //     margin: 0 auto 16px;
      //   }

      //   p {
      //     color: ~"rgb(0 0 0 / .3)";
      //     font-size: 14px;
      //     font-weight: 500;
      //     line-height: 1.2;
      //     letter-spacing: 0.28px;
      //     margin-bottom: 0;
      //   }
      // }

      figure {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 192px;
        border-radius: 2px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        overflow: hidden;

        &.bg-grey {
          background-color: ~"rgb(0 0 0 / .5)";
          background-size: contain;
        }

        &:before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: ~"rgb(0 0 0 / .6)";
          opacity: 0;
          visibility: hidden;
          transition: opacity 0.4s ease;
        }

        &:hover {
          &:before,
          figcaption {
            opacity: 1;
            visibility: visible;
          }
        }

        figcaption {
          z-index: 1;
          opacity: 0;
          visibility: hidden;
          transition: opacity 0.4s ease;

          .btn-wrapper {
            display: flex;

            .btn {
              min-width: 112px;

              &:first-child {
                margin-right: 16px;
              }

              &.upload-btn {
                background-color: #ff4540;
                border-color: #ff4540;
              }
            }
          }

          i.vajro-delete {
            color: #ffffff;
            font-size: 16px;
            position: absolute;
            top: 12px;
            right: 12px;
            z-index: 1;
            cursor: pointer;
          }
        }
      }
    }
    .dropdown-search-product {
      position: relative;
      .input-custom-search {
        position: relative;
        .search-box {
          border-radius: 3px;
          border: solid 1px #cecece;
          padding: 10px 20px;
          font-size: 14px;
          width: 100%;
          &.disabled {
            background-color: #eee;
            opacity: 1;
            cursor: not-allowed;
          }
        }
      }
      .input-search-menu {
        position: absolute;
        top: 50px;
        z-index: 9;
        overflow-y: scroll;
        background: #fff;
        height: 160px;
        font-size: 12px;
        line-height: 1.75;
        letter-spacing: 0.24px;
        padding: 0;
        margin-top: 0px;
        border-radius: 2px;
        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
        overflow: hidden;
        overflow-y: scroll;
        width: 100%;
        span {
          color: #000000;
          display: block;
          padding: 12px 20px;
          transition: background-color .4s;
          cursor: pointer;
          &:hover {
            background-color: #fafafa;
          }
        }
        .no-result {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 160px;
        }
      }
    }
  }
}

.Push-Notification-Articles {
  font-family: @vajro-font;
  background-color: #fff;
  background-color: white;
  overflow: scroll;
  height: calc(85vh - 0px);
  padding: 24px;
  h2 {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
  }
  h3 {
    font-size: 12px;
    font-weight: 500;
  }
  p {
    font-size: 12px;
  }
  span {
    color: @theme-color;
  }
  img {
    position: absolute;
    bottom: 34px;
    right: 46px;
  }
}

.push-notifications-alert {
  padding: 12px 20px;
  border-radius: 2px;
  background-color: rgba(247, 148, 0, 0.04);
  border-top: 5px solid #f79400;
  margin-bottom: 24px;

  .txt {
    color: rgba(0, 0, 0, 0.8);
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.28px;
  }

  .btn {
    color: #f79400;
    background-color: transparent;
    border-color: #f79400;
  }
}

.pushNotification-mobile {
  .mobile-preveiw-toggle {
    margin-bottom: 20px;
    padding-top: 10px;
  }
  .preview-iphone-frame {
    width: 230x;
    height: 450px;
    position: relative;
    margin: 0 auto;
    .iphone-bar {
      position: absolute;
      width: 144px;
      height: 20px;
      top: 12px;
      left: 50%;
      margin-left: -72px;
      background-color: #fff;
      border-radius: 0 0 16px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
      .iphone-speaker {
        width: 32px;
        height: 4px;
        background-color: #cfd3d7;
        border-radius: 4px;
        display: inline-block;
      }
      .iphone-camera {
        width: 8px;
        height: 8px;
        background-color: #cfd3d7;
        border-radius: 50%;
        border: 2px solid #cfd3d7;
        // background-image: -webkit-gradient(linear, right top, left top, from(#1a1a1a), to(#2363a6));
        margin-left: 8px;
      }
    }
    .preview-iphone-framecontent {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: url("../img/iphone-wallpaper-20.jpg");
      background-size: cover;
      overflow: hidden;

      .preview-iphone-container {
        position: relative;
      }

      .iphone_preview {
        position: absolute;
        top: 150px;
        right: 2px;
        left: 2px;
        border-radius: 10px;
        box-shadow: rgba(212, 212, 213, 1) 0px 1px 3px 0px;
        max-width: 360px;
        background-color: white;
        overflow-y: hidden;
        padding: 8px;
        width: 98%;
        cursor: pointer;

        &.showPreview {
          top: 35px;
          transition: top 0.4s ease-in-out;
        }

        .iphone_preview_header {
          color: rgb(85, 85, 85);
          display: flex;
          -webkit-box-pack: justify;
          justify-content: space-between;
          font-weight: 300;
          line-height: 20px;
          font-size: 11px;
          .iphone_preview_header_icon {
            .fa-apple {
              margin-right: 3px;
              background: black;
              color: white;
              padding: 2px 3.29px;
              border-radius: 4px;
            }
          }
          .app-name {
            text-transform: uppercase;
          }
        }
        .iphone_preview_img {
          margin: 5px -8px 10px;
          img {
            height: 125px;
            width: 100%;
            object-fit: cover;
          }
        }
        .iphone_preview_body {
          width: 100%;
          margin-top: 8px;
          display: flex;
          justify-content: space-between;
          .iphone_preview_body_content_text {
            width: 80%;
            .notification-title {
              font-size: 10px;
              color: #000000;
              line-height: 16px;
            }
            .notification-msg {
              color: #000000;
              font-size: 10px;
              line-height: 16px;
            }
          }
          .iphone_preview_content_image {
            align-self: flex-start;
            width: 35px;
            height: 35px;
            border-radius: 3px;
            object-fit: cover;

            &.in {
              display: none;
            }
          }
        }
      }
    }
  }

  .preview-android-frame {
    width: 260px;
    height: 496px;
    position: relative;
    margin: 0 auto;
    .android-bar {
      position: absolute;
      height: 20px;
      top: 12px;
      right: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
      .android-speaker {
        width: 64px;
        height: 4px;
        background-color: #cfd3d7;
        border-radius: 4px;
        display: inline-block;
      }
      .camera-light {
        display: flex;
        width: 30px;
        justify-content: space-between;
        position: absolute;
        left: 40px;
      }
      .android-camera {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: 2px solid #cfd3d7;
      }
      .android-camera-light {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: 2px solid #cfd3d7;
      }
    }
    .android-bottom-bar {
      position: absolute;
      right: 0;
      left: 0;
      bottom: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
      .android-bottom-speaker {
        width: 64px;
        height: 4px;
        background-color: #cfd3d7;
        border-radius: 4px;
        display: inline-block;
      }
    }
    .preview-android-framecontent {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      border: 8px solid #fff;
      border-top-width: 40px;
      border-bottom-width: 40px;
      border-radius: 24px;
      background: url("../img/iphone-wallpaper-20.jpg");
      background-size: cover;
      overflow: hidden;
      box-shadow: 14px 21px 42px 10px rgba(0, 0, 0, 0.2);

      .preview-android-container {
        position: relative;
      }

      .android_preview {
        position: absolute;
        top: 150px;
        right: 2px;
        left: 2px;
        border-radius: 2px;
        max-width: 360px;
        background-color: rgb(254, 254, 254);
        overflow-y: hidden;
        padding: 8px;
        width: 98%;
        cursor: pointer;
        box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px;

        .android_preview_header {
          display: flex;
          font-size: 12px;
          line-height: 15px;
          .down-up-icon {
            color: #000000;
          }
          .android_preview_header_icon {
            color: #000000;
            margin-right: 4px;
          }
          .android_preview_header_name {
            font-size: 10px;
            line-height: 13px;
            color: #636363;
            margin: auto 0;
            margin-right: 4px;
          }
        }
        .android_preview_img {
          margin-top: 5px;
          img {
            height: 125px;
            width: 100%;
            object-fit: cover;
          }
        }
        .android_preview_body {
          width: 100%;
          margin-top: 8px;
          display: flex;
          justify-content: space-between;
          .android_preview_body_content_text {
            width: 80%;
            .notification-title {
              font-size: 10px;
              color: rgb(83, 83, 83);
              line-height: 16px;
            }
            .notification-msg {
              color: rgb(117, 117, 117);
              font-size: 10px;
              line-height: 16px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          .android_preview_body_content_image {
            height: 32px;
          }
        }
      }
    }
  }
}

@media (max-width: 575.98px) {
  .pushnotification-body-title {
    &.active {
      height: 68px;
      display: block !important;
    }
  }
  .push-report {
    width: 100% !important;
    .push-notification {
      .pn-full-screen {
        width: 100% !important;
      }
      .push-reports-top-note {
        padding: 32px 24px;
      }
      .push-notification-body {
        flex-direction: column;
        align-items: flex-start;
        .export-button-info {
          margin-top: 8px;
        }
      }
      .auto-push-notification {
        .form-group {
          padding-top: 16px;
        }
        .card-layout {
          margin-bottom: 16px;
        }
      }
      .push-notification-body, .auto-push-notification {
        .select-option-icon {
          &::before {
            width: auto;
          }
          .select-option {
            width: 100%;
          }
        }
      }
    }
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .pushnotification-body-title {
    &.active {
      height: 68px;
      display: block !important;
    }
  }
  .push-report {
    width: 100% !important;
    .push-notification {
      .pn-full-screen {
        width: 100% !important;
      }
      .push-reports-top-note {
        padding: 32px 24px;
      }
      .push-notification-body {
        flex-direction: column;
        align-items: flex-start;
        .export-button-info {
          margin-top: 8px;
        }
      }
      .auto-push-notification {
        .form-group {
          padding-top: 16px;
        }
        .card-layout {
          margin-bottom: 16px;
        }
      }
      .push-notification-body, .auto-push-notification {
        .select-option-icon {
          &::before {
            width: auto;
          }
          .select-option {
            width: 100%;
          }
        }
      }
    }
  }
}

.host{
  .loading{
    width:8px;
    height:8px;
    background:#FFF;
    border-radius:100%;
    float:left;
    margin: auto;
    margin-right:5px;
  }
  .loading-0{
      -webkit-animation:bounce 1s infinite;
      -webkit-animation-delay:.1s;
      background:#fff
    
  }
  .loading-1{
      -webkit-animation:bounce 1s infinite;
      -webkit-animation-delay:.3s;
      background:#fff;
  }
  .loading-2{
      -webkit-animation:bounce 1s infinite ease;
      -webkit-animation-delay:.5s;
      background:#fff;
  }
  @-webkit-keyframes bounce {
    0%, 100% {
      opacity:1;
    }
    60% {
      opacity:.0;
     
    }
  }
}

.new-automated {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .cart-view {
    padding: 8px;
    width: 50%;
  }
  .cart {
    border: 1px solid #ACACAC;
    border-radius: 8px;
    padding: 16px;
    .title-switch {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 16px;
      .title {
        color: #131313;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 32px;
        min-height: 65px;
      }
      .switch-outer {
        margin: auto 0;
        margin-left: 16px;
        .switch {
          width: 34px;
          height: 20px;
          margin-bottom: 0;
          input:checked + .slider {
            background: #F62369;
            &:before {
              transform: translateX(14);
              -webkit-transform: translateX(14px);
              -ms-transform: translateX(14px);
            }
          }
          .slider {
            background: rgba(0, 0, 0, 0.4);
            &:before {
              width: 16px;
              height: 16px;
              top: 9%;
              margin-top: 0px;
              left: 2px;
              background-color: #FFFFFF;
            }
          }
        }
      }
    }
    .description {
      color: #646464;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 24px;
      padding-bottom: 16px;
      min-height: 100px;
    }
    .customize-instance {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .cart-btn {
        display: flex;
        padding: 4px 12px;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
        text-align: center;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
      }
      .customize-btn {
        border: 1px solid #131313;
        color: #131313;
        background: #ffffff;
        &:hover {
          border: 1px solid #F62369;
          color: #ffffff;
          background: #F62369;
        }
      }
      .instance {
        border: 1px solid #FFF5F8;
        color: #F62369;
        background: #FFF5F8;
      }
    }
  }
}

.push-notification {
  input, textarea, select {
    &:focus-visible {
      outline: 0px !important;
    }
  }
  .div-line {
    border: 1px solid #D1D1D1;
  }
  .set-instance {
    margin-top: 32px;
    .title {
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 20px;
      color: #131313;
      margin-bottom: 8px;
      span {
        color: #F32E26;
      }
    }
    .information {
      display: flex;
      padding: 8px;
      border-radius: 4px;
      border: 1px solid #BBDFFF;
      background: #E3F3FF;
      margin-bottom: 16px;
      img {
        margin-right: 8px;
      }
      .info-text {
        color: #131313;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
      }
    }
  }
  .rule-auto-push {
    border-radius: 4px;
    border: 1px solid #D1D1D1;
    background: #FFF;
    padding: 16px;
    margin-bottom: 32px;
    .abandoned-cart {
      border-radius: 4px;
      border: 1px solid #EEE;
      background: #F9FAFB;
      padding: 8px;
      display: flex;
      align-items: center;
      div {
        flex: 0 0 auto;
      }
    }
    .add-rule-btn {
      margin-top: 16px;
      button {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 4px 12px;
        border-radius: 20px;
        border: 1px solid #131313;
        background: #ffffff;
        img {
          margin-right: 4px;
        }
        div {
          color: #131313;
          font-size: 12px;
          font-style: normal;
          font-weight: 500;
          line-height: 20px;
        }
      }
    }
  }
  .select-option-icon {
    margin-right: 32px;
    position: relative;
    flex: 0 auto !important;
    width: 100%;
    &::before {
      content: '\f078';
      font: normal normal normal 12px/1 FontAwesome;
      color: #000000;
      right: 12px;
      height: 100%;
      padding: 15px 0px;
      position: absolute;
      pointer-events: none;
    }
    &:focus-visible {
      outline: 0px;
    }
  }
  .select-option {
    height: auto !important;
    appearance: none;
    width: 100%;
    border: solid 1px #ACACAC !important;
    background: #FFF !important;
    border-radius: 4px !important;
    padding: 10px 8px !important;
    font-size: 14px !important;
    &:focus-visible {
      outline: 0px;
    }
  }
  .abandoned-cart-text {
    margin-right: 32px;
    display: flex;
    padding: 10px 8px;
    align-items: center;
    border-radius: 4px;
    border: 1px solid #EEE;
    background: #F6F6F6;
  }
  .input-number {
    flex: 0 auto !important;
    margin-right: 16px;
    width: 100%;
    input {
      width: 100%;
      border-radius: 4px;
      border: 1px solid #ACACAC;
      background: #FFF;
      display: flex;
      padding: 10px 8px !important;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
    }
  }
  .close-button {
    cursor: pointer;
    img {
      width: 16px;
    }
  }
  .abandoned-cart-box {

  }
  .or-option {
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #BBDFFF;
    background: #E3F3FF;
    color: #0D87FF;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    width: fit-content;
    margin: 10px 0px;
  }
}

.pushnotification-body {
  .vajro-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: ~"calc(100vh - 284px)";
  }
  .add-rule-btn {
    button {
      &.active {
        opacity: 0.6;
        cursor: not-allowed;
      }
    }
  }
  .new-auto-push-btn {
    display: flex;
    align-items: center;
    button {
        border-radius: 4px;
        padding: 8px 16px;
        font-weight: 600;
        font-size: 14px;
    }
    .new-auto-disable-btn {
        background: #FFFFFF;
        border: 1px solid #D3D3D3;
        color: #333333;
        margin-right: 10px;
        &:hover {
            background: rgba(211, 211, 211, 0.2);
        }
    }
    .new-auto-enable-btn {
        background: #F62369;
        border: 1px solid #F62369;
        color: #ffffff;
        &.active {
            cursor: not-allowed;
            opacity: 0.3;
            &:hover {
                opacity: 0.3;
                background: #F62369;
                border: 1px solid #F62369;
                color: #ffffff;
            }
        }
        &:hover {
            background: #FFF3F7;
            color: #F62369;
        }
    }
  }
}

button, html, input, select, textarea, option {
  font-family: 'Poppins', sans-serif !important;
}

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {
  .new-automated {
    .cart-view {
      width: 100%;
    }
    .cart {
      .title-switch {
        .title {
          min-height: auto;
        }
      }
      .description {
        min-height: auto;
      }
    }
    .customize-instance {
      align-items: flex-start !important;
      flex-direction: column-reverse;
      .instance {
        margin-bottom: 8px;
      }
    }
  }
}

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) {
  .new-automated {
    .cart-view {
      width: 100%;
    }
    .cart {
      .title-switch {
        .title {
          min-height: auto;
        }
      }
      .description {
        min-height: auto;
      }
    }
  }
}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) {
  .new-automated {
    .cart-view {
      width: 100%;
    }
    .cart {
      .title-switch {
        .title {
          min-height: auto;
        }
      }
      .description {
        min-height: auto;
      }
    }
  }
}

@media (min-width: 768px) and (max-width: 1200px) {
  .new-automated {
    .cart-view {
      width: 100%;
    }
    .cart {
      .title-switch {
        .title {
          min-height: auto;
        }
      }
      .description {
        min-height: auto;
      }
    }
  }
}

form.developer-account-form {
    input {
        padding: 10px 20px;
        border-radius: 3px;
        border: solid 1px #cecece;
        width: 100%;
    }
}

.developer-acount-main {
  .completed-view {
    width: 100%;
    margin: 10rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .status {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.setup-developer-account {
    font-family: @vajro-font;
  
    .top {
      padding: 30px 25px 0px 25px;
      z-index: 2;
      .header {
        padding-bottom: 25px;
      }
      h2 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
      }
      ul {
        margin-top: 30px;
        display: flex;
        padding-left: 0;
        list-style: none;
        place-content: space-around;
        font-size: 14px;
        font-weight: 500;
        li {
          padding-bottom: 10px;
        }
        .active {
          border-bottom: 2px solid #f62369;
          color: #f62369;
        }
      }
    }

    .status {
      border: 1px solid #f62369;
      border-radius: 4rem;
      color: black;
      background-color: #fdf0f5;
      font-size: 8px;
      padding: 1px 2px; 
    }

    .message {
        position: fixed;
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 4px;
        background-color: #fdf0f5;
        padding: 0.5rem 1rem;
        border: 1px solid #f62369;
        z-index: 10;

        p {
            margin: 0;
            font-size: 12px;

            a {
                color: #f62369;
                text-decoration: none;
                font-weight: 600;
            }
        }
    }
    
  }
.slider-banner {
  h5 {
    font-size: 16px;
    font-weight: 500;
    margin: 15px 0;
    span {
      font-size: 14px;
      font-weight: 500;
      opacity: 0.4;
    }
  }
  input {
    padding: 8px;
    width: 100%;
    border-radius: 4px;
    border: solid 1px #cecece;
  }
  .background{
    padding: 50px;
    text-align: center;
    border-radius: 8px;
    background-color: #f7f7f7;
  }
}
.modal{
    .social{
        .modal-content{
            padding: 10px;
            border-radius: 8px;
            .socialhead{
                border-bottom: 0px;
                padding: 10px;
                .close{
                    opacity: 1;
                    font-weight: 500;
                    font-size: 30px!important;
                }
                .modal-title{
                    text-align: center;
                    float: unset;
                    font-family: "Montserrat";
                    font-size: 20px!important;
                    font-weight: 600;
                    letter-spacing: 0.4px;
                }
            }
            .socialdesc{
                font-family: "Montserrat";
                span{
                    a{
                        color: #5271ff;
                    }
                }
                .text{
                    font-family: "Montserrat";
                    font-size: 12px!important;
                    font-weight: 600;
                    padding: 13px 24px 12px!important;
                }
            }
        }
    }
}
@media (min-width: 768px){
.social {
    width: 444px;
}
}
.store-listing {
  padding: 80px 80px 50px 24px;

  font-family: @vajro-font;
  h5 {
    font-size: 16px;
    font-weight: 500;
    padding-bottom: 5px;
    margin-top: 25px;
    .hidde{
      display: none;
      max-width: 300px;
      position: absolute;
      left: 195px;
      margin-top: -24px;
      background-color: #fff;
      padding: 4px 8px;
      box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
      border-radius: 4px;
      .hidde_cont{
      color: #001E3E;
      font-size: 11px;
      line-height: 18px;
      }
    }
    .policy_note_info{
      position: absolute;
    }
    .policy_note_info:hover + .hidde{
      display: inline-flex;
    }
    .star {
      color: @theme-color;
    }
  }
  .message-content {
    color: #989898;
    font-size: 13px;
  }
  h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
  }
  .input-value {
    width: 100%;
    height: 40px;
    border-radius: 3px;
    border: 1px solid #cecece;
  }
  .long-description, .short-description, .app-name{
    width: 100%;
    border-radius: 3px;
    border: 1px solid #cecece;
    height: 100px;
    overflow-y: auto;
    padding-right: 65px;
  }
  .short-description, .app-name{
    height: 40px;
    padding-right: 0;
    // display: grid;
    align-items: center;
  }
  textarea {
    width: 100%;
    border-radius: 3px;
    border: 1px solid #cecece;
  }
  .upload-logo {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background-color: #fafafa;
    margin-bottom: 20px;
    .upload-box{
      border-radius: 4px;
      border: dashed 1px #7b8591;
      background-color: #f7f7f7;
      padding: 20px;
      width: 80px;
      text-align: center;
    }
  }
  ul {
    font-size: 14px;
    font-weight: 500;
    display: flex;
    list-style: none;
    padding-left: 0;
    padding-bottom: 10px;
    li {
      padding-top: 1px;
    }
    input {
      margin-right: 10px;
    }
  }
  .app-name-wrapper{
    position: relative;
    .text-count{
      position: absolute;
      right: 0;
      bottom: 0;
      padding-right: 5px;
    }
  }
  .desc-wrapper {
    position: relative;

    .desc {
      resize: none;
      padding-right: 80px;
    }

    .text-count {
      position: absolute;
      right: 0;
      top: 78px;
      bottom: 0;
      padding-right: 5px;
    }
  }
}
.footer-save{
  padding: 10px;
}
@media screen and (max-width: 1170px) {
  .policy_note_info:hover + .hidde{
    display: block!important;
    margin-top: 8px;
    left: 25px!important;
  }
}
@media screen and (max-width: 375px) {
  .store-listing {
    padding: 80px 24px 24px;
  }
}

.theme-sellect {
  position: fixed;
  left: 312px;
  right: 16px;
  top: 88px;
  bottom: 16px;
  overflow-y: hidden;
  overflow: scroll;

  overflow-x: hidden;
  &:hover::-webkit-scrollbar-thumb {
    display: block;
  }
  .theme-top {
    background-color: white;
    padding: 20px 10px!important;
    font-size: 16px;
    font-weight: 600;
    right: 16px;
    left: 312px;
    z-index: 1;
    .top-content {
      margin-bottom: 0px !important;
      p {
        margin: 0;
      }
    }
    .top-button {
      margin-bottom: 0px !important;
      .theme-btn {
        padding: 10px 25px 10px;
        border-radius: 4px;
        background-color: #f4f4f4;
        float: right;
        border: 1px solid;
      }
      #theme-sellected {
        background-color: @theme-color;
        color: white;
      }
    }
  }
  .onboard-themes {
    padding-top: 16px;
    .notes {
      background-color: #fff;
      padding: 24px;
      display: flex;
      place-content: space-between;
      align-items: center;
      p {
        margin: 0;
      }
      button {
        padding: 12px 10px;
        border-radius: 4px;
        background-color: #fff;
        font-weight: bold;
        border: 1px solid;
        &:hover {
          box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3);
        }
      }
    }
    .theme-bg {
      background-color: white;
      box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);

      .img {
        padding: 20px;
        margin-bottom: 0px;
        img {
          width: 100%;
        }
      }
      .Theme-sellect-border {
        box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
        margin-bottom: 0px;
        display: flex;
        place-content: space-between;
        h3 {
          font-size: 18px;
        }

        .sellect-btn {
          float: right;
          padding: 13px 12px 12px 13px;
          border-radius: 4px;
          background-color: @theme-color;
          color: #fff;
          border: 1px solid;
          margin-top: 16px;
          font-weight: bold;
        }
        .sellected-btn {
          float: right;
          padding: 13px 12px 12px 13px;
          border-radius: 4px;
          background-color: #fff;
          color: rgb(19, 2, 2);
          border: 1px solid;
          margin-top: 16px;
          font-weight: bold;
          &:hover {
            box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3);
          }
        }
      }
    }
  }
}

.welcome-screen{
    display: none !important;
}
.dashboard-container{
    margin: 20px;

.initial-builder-screen {
    padding: 32px 48px 48px 32px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
    position: fixed;
    overflow: scroll;
    top: 88px;
    right: 16px;
    left: 16px;
    bottom: 16px;
    .form-container {
        max-width: 1100px;
        p {
            &.heading {
                color: #000000;
                font-size: 24px;
                font-weight: 600;
                line-height: 1.5;
                letter-spacing: 0.48px;
                margin-bottom: 30px;
            }
        }
    
        .row {
            &>div {
                margin-bottom: 0;
            }
    
            [class*='col-'] {
                padding: 0 12px;
    
                &:nth-child(odd) {
                    padding-right: 40px;
                }
                &:nth-child(even) {
                    padding-right: 40px;
                }
            }
    
            &.no-gutter-spacing {
                margin: 0 -12px !important;
            }
    
            &.mb-8 {
                margin-bottom: 8px !important;
            }
            &.mb-16 {
                margin-bottom: 16px !important;
            }
        }

        .control-label {
            margin-bottom: 16px;
            font-size: 14px;
            font-weight: 500;
            line-height: 1.71;
            letter-spacing: 0.28px;
        }
    
        .form-group {
            margin: 0 0 24px;
        }
    
        .form-control {
            height: 40px;
            color: #000000;
            font-size: 14px;
            line-height: 1.29;
            letter-spacing: 0.28px;
            padding: 10px 16px;
            border-radius: 4px;
            border: 1px solid #dbdbdb;
            background-color: #fafafa;
            box-shadow: none;
            
            &::placeholder {
                color: #adadad;
            }
            
            &:focus {
                border-color: #979797;
                background-color: #ffffff;
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
            }
    
            &[disabled], &[readonly] {
                cursor: not-allowed;
                border-color: #dbdbdb;
                background-color: #f4f4f4;
    
                &::placeholder {
                    color: rgba(0, 0, 0, 0.6);
                }
            }
    
            &.ng-empty {
                border-color: #ff4540;
            }
        }

        .select-wrapper {
            .form-control {
                padding-right: 40px;
            }

            &:after {
                content: "";
                display: inline-block;
                width: 0;
                height: 0;
                vertical-align: middle;
                border-top: 5px solid;
                border-right: 5px solid transparent;
                border-left: 5px solid transparent;
                font-style: normal;
                margin-top: -3px;
            }
        }

        .intl-phone-input {
            display: flex;

            .intl-code-select {
                width: 64px;
                margin-right: 10px;

                &:after {
                    right: 10px;
                    margin-top: -1px;
                }

                .form-control {
                    width: 64px;
                    text-align-last: center;
                    padding: 8px 20px 8px 4px;

                    &.hide-select-box {
                        position: absolute;
                        -webkit-appearance: none;
                        -moz-appearance: none;
                        appearance: none;
                        border: none;
                        background: transparent;
                        height: 100%;
                        width: 100%;
                        opacity: 0;
                        cursor: pointer;
                        z-index: 1;
                    }
                }

                .select-display {
                    line-height: 1.72;
                }
            }
        }

        // ERROR CSS
        .has-error {
            .control-label, .select-wrapper:after {
                color: #ff5f5f;
            }

            .form-control {
                border-color: #ff6060;
            }
        }
    }

    .btn.blue-btn {
        min-width: 152px;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.13;
        color: #ffffff;
        letter-spacing: 0.28px;
        padding: 18px 111px 17px;
        border-radius: 4px;
        background-color: #672fff;
    }
}
}

@media (max-width:425px){
    .initial-builder-screen{
        padding: 32px 32px 48px 32px!important;
        .text-right {
            text-align: left!important;
            .btn.blue-btn{
                width: 100%;
            }
        }
    }
}
@media (max-width:320px){
    .btn.blue-btn{
        width: 100%;
    }
}
@panic-cta-color: #f7433e;

.panic-cta-wrapper {
  :focus,
  :active:focus {
    outline: 0 none;
  }

  .panic-cta {
    position: fixed;
    top: 144px;
    right: -68px;
    z-index: 10;
    transition: right 0.4s ease;
    color: #f7433e;
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 10px 14px 10px 10px;
    background-color: #ffffff;
    border-radius: 12px 0 0 12px;
    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.16);
    cursor: pointer;

    &:before {
      content: "";
      display: inline-block;
      background: no-repeat center / contain;
      background-image: url("https://res.cloudinary.com/vajrohq/image/upload/v1608558454/admin_console/misc/sos.svg");
      width: 24px;
      height: 24px;
      margin-right: 8px;
    }

    &:hover {
      right: 0px;
      span {
        opacity: 1;
      }
    }

    span {
      min-width: 54px;
      display: inline-block;
      font-size: 12px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: normal;
      opacity: 0;
      transition: opacity 0.3s linear;
    }
  }

  .panic-cta-model-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
    display: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 100ms, visibility 100ms;
    transition: opacity 100ms, visibility 100ms;

    &.in {
      display: block;
      opacity: 1;
      visibility: visible;
      animation: fadeIn 0.1s ease-in-out;
    }
  }

  .panic-cta-model {
    width: 464px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.16);
    position: fixed;
    bottom: 100px;
    right: 32px;
    z-index: 11;
    display: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 100ms, visibility 100ms;
    transition: opacity 100ms, visibility 100ms;

    &.in {
      display: block;
      opacity: 1;
      visibility: visible;
      animation: fadeIn 0.1s ease-in-out;
    }

    .panic-cta-model-header {
      position: relative;
      color: #ffffff;
      padding: 20px 56px 20px 24px;
      font-size: 22px;
      font-weight: normal;
      line-height: 1;
      background-color: @panic-cta-color;
      border-radius: 8px 8px 0 0;
      min-height: 64px;

      i {
        font-size: 20px;
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
      }
    }

    .panic-cta-model-body {
      padding: 20px 20px 24px;

      .form-control {
        color: rgba(0, 0, 0, 0.8);
        padding: 20px;
        background-color: #f7f7f7;
        border: 1px solid #eaeaea;
        border-radius: 5px;
        font-size: 16px;
        line-height: 0.88;
        font-weight: normal;
        box-shadow: none;
        resize: none;
        margin-bottom: 20px;

        &::placeholder {
          color: rgba(0, 0, 0, 0.8);
        }

        &:focus {
          border-color: rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.08);
        }
      }

      .btn-wrapper {
        .btn {
          font-size: 16px;
          font-weight: 500;
          line-height: 0.88;
          color: #ffffff;
          background-color: @panic-cta-color;
          border-color: @panic-cta-color;
          padding: 20px 32px;
          border-radius: 8px;
          margin: 0;

          &:active {
            box-shadow: none;
          }

          &:hover {
            background-color: darken(@panic-cta-color, 10%);
            border-color: darken(@panic-cta-color, 10%);
          }

          &.btn-outline {
            border-color: @panic-cta-color;
            background-color: #ffffff;
            color: @panic-cta-color;

            &:hover {
              background-color: darken(#ffffff, 10%);
            }
          }

          &:not(:last-child) {
            margin-right: 8px;
          }
        }
      }
    }

    &.send-escalate-query {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      .panic-cta-model-body {
        text-align: center;
        padding: 56px 56px 32px;

        .circle-tick-mark {
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 80px;
          height: 80px;
          border-radius: 50%;
          background-image: linear-gradient(to bottom, #4de2ba, #29c1c7);
          margin: 0 auto 24px;

          i {
            font-size: 34px;
          }
        }

        p {
          font-size: 18px;
          font-weight: 500;
          line-height: 1.4;
          margin-bottom: 80px;
        }

        .btn {
          color: #ffffff;
          background-color: #000000;
          border-color: #000000;

          &:hover {
            background-color: lighten(#000000, 10%);
            border-color: lighten(#000000, 10%);
          }
        }
      }
    }
  }
}
@media screen and (max-width: 425px) {
  .panic-cta-model {
    width: 310px !important;
  }
}

.personalize-branding {
    color: #000000;
    padding: 32px 20px 120px;
    background-color: #FFFFFF;

    &.mt-minus-48 {
        margin-top: -48px;
    }

    // common styles starts
    :focus, :active:focus {
        outline: 0 none;
    }
    
    .row {
        & > div {
            margin-bottom: 0;
        }

        .form-group {
            margin: 0 0 24px;
        }
    
        [class*='col-'] {
            padding: 0 12px;
        }

        &.no-gutter-spacing {
            margin: 0 -12px !important;
        }
    }

    .title {
        font-size: 16px;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: 0.32px;
        margin-bottom: 16px;
    }

    .form-group {
        margin: 0 0 24px;
    }

    .control-label {
        color: #000000;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: 0.32px;
        margin-bottom: 16px;
    }

    .form-control {
        height: 40px;
        color: #000000;
        font-size: 14px;
        line-height: 1.29;
        letter-spacing: 0.28px;
        padding: 10px 16px;
        border-radius: 2px;
        border-radius: 2px;
        border: 1px solid #dbdbdb;
        background-color: #fafafa;
        box-shadow: none;
        
        &::placeholder {
            color: #000000;
        }
        
        &:focus {
            border-color: #979797;
            background-color: #ffffff;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
        }
    }

    .btn {
        color: #FFFFFF;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0.28px;
        padding: 11px 32px;
        background-color: #000000;
        border: 1px solid #000000;
        border-radius: 2px;
        margin: 0;

        &.btn-outline {
            background-color: rgba(0, 0, 0, 0.13);
            border-color: #ffffff;
        }
        &.download-launch-screen
        {
                margin-left: 10px;
                margin-top: 10px;
                background: #ffffffc9;
                color: #000000;
                border-color: #000000;
        }
        &.delete-btn {
            background-color: #de3333;
            border-color: #de3333;
        }
        .admin-mode-text
        {
            color:#e23105;
        }
    }

    .custom-checkbox-wrapper {
        display: flex;

        .custom-checkbox {
            &:not(:last-child) {
                margin-right: 16px;
            }

            input {
                display: none;
                
                &:checked ~ label .check-btn {
                    background-color: #ff4540;
                    border-color: #ff4540;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    &:before {
                        content: "\e91e";
                        font-family: 'vajro-icon';
                        font-size: 9px;
                        font-style: normal;
                        color: #ffffff;
                        line-height: 1;
                    }
                }
            }
    
            label {
                color: #000000;
                position: relative;
                width: 100%;
                font-weight: 600;
                font-size: 12px;
                line-height: 1.5;
                letter-spacing: 0.24px;
                padding-left: 28px;
                margin: 0;
                cursor: pointer;
            }
    
            .check-btn {
                font-style: normal;
                position: absolute;
                top: 0;
                left: 0;
                display: inline-block;
                width: 16px;
                height: 16px;
                background-color: #fafafa;
                border: 1px solid #dbdbdb;
                border-radius: 2px;
                transition: background 0.25s linear, border-color 0.25s linear;
            }
        }
    }
    // common styles ends

    .left-side-form {
        width: 520px;
    }

    .color-picker-wrapper {
        display: flex;
        justify-content: space-between;

        .color-picker-col {
            width: 248px;
        }

        .control-label {
            font-size: 12px;
            line-height: 1;
            letter-spacing: 0.24px;
            margin-bottom: 8px;
        }   
        
        .input-color-picker {
            position: relative;

            .form-control {
                padding-right: 40px;
            }            
            
            .color-picker-control {
                width: 20px;
                height: 20px;
                border: none;
                padding: 0;
                margin: 0;
                position: absolute;
                top: 50%;
                margin-top: -10px;
                right: 16px;
                -webkit-appearance: none;
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
                transition: all .4s ease;
                cursor: pointer;

                &::-webkit-color-swatch-wrapper {
                    padding: 0;
                }

                &::-webkit-color-swatch {
                    border-radius: 2px;
                    border: none;
                }

                &:hover {
                    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
                }
            }
        }
    }

    .image-card {
        display: table;
        margin-bottom: 24px;

        &.small {
            p span.title {
                margin-bottom: 8px;
            }

            .click-to-upload-image {
                width: 240px;
                height: 240px;

                img {
                    width: 40px;
                    height: 40px;
                    margin-bottom: 8px;
                }
            } 

            figure {
                width: 240px;
                height: 240px;

                figcaption .btn-wrapper {
                    flex-wrap: wrap;
                    flex-direction: column;

                    .btn:first-child {
                        margin-right: 0;
                        margin-bottom: 16px;
                    }
                }
            }
        }

        &.screenshot-image-card {
            flex: 1 1;
            
            @media (max-width: 1199px) {
                min-width: 184px;
            }

            &:not(:last-child) {
                margin: 0 32px 24px 0;
            }

            p {
                color: ~"rgb(0 0 0 / .4)";
                text-align: center;

                span.title {
                    margin-bottom: 8px;
                } 
            }

            .click-to-upload-image { 
                width: 100%;
                height: 356px;
                border-radius: 2px;
                border: 2px dashed #9d9d9d;

                @media (max-width: 1199px) {
                    height: 320px;
                }

                img {
                    width: 40px;
                    height: 40px;
                    margin-bottom: 8px;
                }
            }
            
            figure {
                align-items: flex-end;
                width: 100%;
                height: 352px;
                padding-bottom: 16px;

                @media (max-width: 1199px) {
                    height: 320px;
                }

                &:before {
                    background-color: transparent;
                    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.33), #000000);
                }

                figcaption .btn-wrapper {
                    flex-wrap: wrap;
                    flex-direction: column;

                    .btn:first-child {
                        margin-right: 0;
                        margin-bottom: 16px;
                    }
                }
            }
        }

        p {
            color: ~"rgb(0 0 0 / .5)";
            font-size: 12px;
            line-height: 1;
            letter-spacing: 0.2px;
            margin-bottom: 16px;

            span {
                display: block;
                margin-bottom: 8px;

                &.title {
                    color: #000000;
                    font-size: 16px;
                    line-height: 1.5;
                    letter-spacing: 0.32px;
                    margin-bottom: 16px;
                }

                &.grey-txt {
                    color: ~"rgb(0 0 0 / .8)";
                }
            }
        }

        .click-to-upload-image {
            width: 424px;
            height: 192px;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 2px;
            background-color: #f4f4f4;
            cursor: pointer;

            img {
                display: block;
                width: 64px;
                height: 64px;
                object-fit: cover;
                margin: 0 auto 16px;
            }

            p {
                color: ~"rgb(0 0 0 / .3)";
                font-size: 14px;
                font-weight: 500;
                line-height: 1.2;
                letter-spacing: 0.28px;
                margin-bottom: 0;
            }
        }

        figure {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 424px;
            height: 192px;
            border-radius: 2px;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            overflow: hidden;

            &.bg-grey {
                background-color: ~"rgb(0 0 0 / .5)";
                background-size: contain;
            }

            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: ~"rgb(0 0 0 / .6)";
                opacity: 0;
                visibility: hidden;
                transition: opacity .4s ease;
            }

            &:hover {
                &:before, figcaption {
                    opacity: 1;
                    visibility: visible;
                }
            }

            figcaption {
                z-index: 1;
                opacity: 0;
                visibility: hidden;
                transition: opacity .4s ease;
                
                .btn-wrapper {
                    display: flex;

                    .btn {
                        min-width: 112px;

                        &:first-child {
                            margin-right: 16px;
                        }
    
                        &.upload-btn {
                            background-color: #ff4540;
                            border-color: #ff4540;
                        }
                    }
                }
                
                i.vajro-delete {
                    color: #FFFFFF;
                    font-size: 16px;
                    position: absolute;
                    top: 12px;
                    right: 12px;
                    z-index: 1;
                    cursor: pointer;
                }
            }
        }
    }

    &.screenshot-editor {
        position: relative;
        padding: 16px 56px 16px 32px;
        height: ~"calc(100vh - 120px)";

        .download-section {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-bottom: 32px;
    
            .choose-platform {
                margin-right: 24px;
        
                p {
                    font-size: 12px;
                    font-weight: bold;
                    line-height: 1;
                    letter-spacing: 0.24px;
                    margin-bottom: 8px;
                }
            }
        }
    
        .screenshot-image-card-scroll {
            display: flex;
            overflow: hidden;
            overflow-x: auto;
    
            /* scroll bar style starts */
            &::-webkit-scrollbar {
                height: 12px;
                background-color: #F5F5F5;
            }
            &::-webkit-scrollbar-track {
                background: #F5F5F5;
                margin: 0;
            }
            &::-webkit-scrollbar-thumb {
                background: #cccccc;
            }
            &::-webkit-scrollbar-thumb:hover {
                background: rgba(0, 0, 0, .35); 
            }
            /* scroll bar style ends */
        }

        .popover {
            padding: 12px 12px 20px;
            left: 4px !important;
            right: 4px;
            width: auto;
            
            .form-group {
                margin-bottom: 0;
            }

            .form-control {
                width: 100% !important;
                margin-bottom: 12px;
                height: 36px;
                padding: 8px;
            }

            .btn {
                min-width: auto !important;
                padding: 6px 12px !important;
                width: auto !important;
                background-color: transparent;
                color: #000000;
                display: flex;
                margin-left: auto;

                &:hover {
                    color: #ffffff;
                    background-color: #11a562;
                    border-color: #11a562;
                }
            }
        }
        
        .popup-modal {
            width: 460px;
            height: 260px;
            background-color: #FFFFFF;
            border: 1px solid #707070;
            padding: 24px 24px 20px 24px;
            z-index: 2;
            display: none;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: opacity 100ms, visibility 100ms;
            transition: opacity 100ms, visibility 100ms;
    
            &.in {
                display: block;
                opacity: 1;
                visibility: visible;
                animation: fadeIn .1s ease-in-out;
            }
    
            p {
                color: rgba(0, 0, 0, .6);
                font-size: 14px;
                line-height: 1.5;
                letter-spacing: 0.28px;
                margin-bottom: 56px;
                
                &.enable-icon {
                    position: relative;
                    padding-left: 24px;
    
                    i {
                        font-size: 16px;
                        color: #ffb763;
                        position: absolute;
                        top: 4px;
                        left: 0;
                    }
                }
    
                span {
                    display: block;
                    color: #000000;
                    font-size: 16px;
                    font-weight: 500;
                    margin-bottom: 10px;
                }
            }

            .btn-wrapper {
                text-align: right;
        
                .btn {     
                    &:not(:last-child) {
                        margin-right: 8px;
                    }
                }
            }
        }
        .edit-popup-modal{

            .widget-modal-header {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                
                .close-modal {
                    color: #000000;
                    font-size: 14px;
                    line-height: 1.5;
                    letter-spacing: 0.28px;
                    cursor: pointer;

                    i {
                        font-size: 16px;
                        margin-right: 8px;
                        vertical-align: -2px;
                    }
                }
            }
            
                .close-icon {
                    top: 16px;
                    right: 16px;
                    font-size: 16px;
                    cursor: pointer;
                }

                .form-group {
                    margin-bottom: 16px;
                }

                .form-control {
                        height: 32px;
                }

            }
    
        .delete-popup-modal {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
            
            .btn {
                padding: 12px 20px;
            }
        }
    
        .bg-overlay {
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.24);
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1;
            display: none;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: opacity 100ms, visibility 100ms;
            transition: opacity 100ms, visibility 100ms;
    
            &.in {
                display: flex;
                opacity: 1;
                visibility: visible;
                animation: fadeIn .1s ease-in-out;
            }
        }
    }

    // bottom-alert-bar css
    .bottom-alert-bar {
        .bottom-alert-content .btn {
            border-radius: 3px;
            background-color: #49ce9d;
            border-color: #49ce9d;
        }
    }
}
.preview {
    background-color: #ffffff;
    .previewContainer {
        padding-top: 20px;
        padding-bottom: 40px;
        padding-right: 10px;

        .content {
            .previewHeader {
                .headerContent {
                    margin-bottom: 35px;
                    .vajroLogo {
                        display: inline-block;
                        max-width: 100%;
                    }
                }
            }

            .previewBody {
                .previewViewer {
                    .webPreview {
                        overflow: auto;
                        background-image: url('https://res.cloudinary.com/vajrohq/image/upload/v1598006364/admin_console/general/iphone.png');
                        background-repeat: no-repeat;
                        height: 600px;
                        width: 291px;
                        margin: 0 auto 30px;
                        position: relative;
                        z-index: 1;

                        .frame {
                            height: 454px;
                            width: 256px;
                            position: absolute;
                            top: 73px;
                            left: 17px;
                            overflow: hidden;
                            overflow-y: scroll;
                            z-index: -1;
                        }
                    }
                }
                .wrapperContent{
                    .previewContent {
                        .content_element {
                            margin-bottom: 35px;
                            display: flex;

                            .contentWrapper {
                                width: 100%;
                                .head {
                                    text-align: center;
                                    line-height: 44px;
                                    letter-spacing: 0;
                                    color: #333333;
                                    margin-bottom: 32px;
                                    span {
                                        font-size: 32px;
                                        color: #010101;
                                    }
                                }
                                .paraBody {
                                    text-align: center;
                                    line-height: 24px;
                                    margin: 0 0 20px;
                                    .paraContent {
                                        color: #333333;
                                        line-height: 40px;
                                        font-size: 22px;
                                        letter-spacing: 0;
                                        font-weight: 400;
                                    }
                                }

                                .actionButtons {
                                    text-align: center;
                                    display: flex;

                                    .buttonContainer {
                                        width: 100%;
                                        max-width: 500px;
                                        margin: 0 auto;

                                        .btn-height {
                                            height: 52px;
                                        }

                                        .installButton {
                                            background-color: #FF4540;
                                            width: 100% !important;
                                            color: #fff;
                                            border-width: 0;
                                            border-style: solid;
                                            border-color: transparent;
                                            display: inline-block;
                                            padding: 1.0625em 1.875em;
                                            border-width: 0;
                                            border-style: solid;
                                            border-color: transparent;
                                            border-radius: 5px;
                                            color: #fff;
                                            font-weight: 700;
                                            font-size: 1em;
                                            line-height: 1.133;
                                            -webkit-font-smoothing: antialiased;
                                            -webkit-transition: 150ms ease;
                                            transition: 150ms ease;
                                            -webkit-transition-property: background-color border-color color;
                                            transition-property: background-color border-color color;
                                            text-align: center;
                                            outline: none;

                                            &:hover {
                                                background: #E02621 !important;
                                                color: #fff !important;
                                            }
                                        }

                                        .shopifyListButton {
                                            background-color: #FFF;
                                            width: 100% !important;
                                            color: #F1592B;
                                            border-width: 0;
                                            border-style: solid;
                                            border-color: transparent;
                                            display: inline-block;
                                            padding: 1.0625em 1.875em;
                                            border-width: 0;
                                            border-style: solid;
                                            border-color: #F1592B;
                                            border: 1px solid #F1592B;
                                            border-radius: 5px;
                                            color: #F1592B;
                                            font-weight: 700;
                                            font-size: 1em;
                                            line-height: 1.133;
                                            -webkit-font-smoothing: antialiased;
                                            -webkit-transition: 150ms ease;
                                            transition: 150ms ease;
                                            -webkit-transition-property: background-color border-color color;
                                            transition-property: background-color border-color color;
                                            text-align: center;
                                            outline: none;

                                            &:hover {
                                                background: #f8f8f8 !important;
                                                border: 1px solid #F1592B;
                                                color: #F1592B;
                                            }
                                        }
                                    }
                                }

                                .labelText {
                                    line-height: 24px;
                                    margin: 0 0 20px;
                                    span {
                                        font-size: 12px;
                                        color: #333333;
                                        a {
                                            outline: none !important;
                                            color: #ff4540 !important;
                                        }
                                    }
                                }
                            }

                            .webPreview {
                                overflow: auto;
                                background-image: url('https://res.cloudinary.com/vajrohq/image/upload/v1598006364/admin_console/general/iphone.png');
                                background-repeat: no-repeat;
                                height: 600px;
                                width: 291px;
                                margin: auto;
                                position: relative;
                                z-index: 1;

                                .frame {
                                    height: 454px;
                                    width: 256px;
                                    position: absolute;
                                    top: 73px;
                                    left: 17px;
                                    overflow: hidden;
                                    overflow-y: scroll;
                                    z-index: -1;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (min-width: 992px) {
    .imgHeight {
        height: 70px;
    }
}

@media (max-width: 992px) {
    .bottomSpace {
        padding-bottom: 10px;
    }

    .content_element {
        .contentWrapper {
            .nopad {
                padding-left: 0px !important;
                padding-right: 0px !important;
            }
            .head {
                line-height: 40px !important;
                span {
                    font-size: 25px !important;
                }
            }
            .paraBody {
                .paraContent {
                    line-height: 30px !important;
                    font-size: 18px !important;
                }
            }
        }
    }
}

.no_clip_label {
    md-input-container {
        label {
            overflow: visible !important;
        }
    }
}
// NEW PREVIEW APP CSS
.preview-iphone-frame {
  width: 230px;
  height: 450px;
  position: relative;
  margin: 20px auto;

  .iphone-bar {
    position: absolute;
    width: 144px;
    height: 20px;
    top: 12px;
    left: 50%;
    margin-left: -72px;
    background-color: #fff;
    border-radius: 0 0 16px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;

    .iphone-speaker {
      width: 32px;
      height: 4px;
      background-color: #f4f4f4;
      border-radius: 4px;
      display: inline-block;
    }

    .iphone-camera {
      width: 8px;
      height: 8px;
      background-color: #f4f4f4;
      border-radius: 50%;
      border: 2px solid #f4f4f4;
      // background-image: -webkit-gradient(linear, right top, left top, from(#1a1a1a), to(#2363a6));
      margin-left: 8px;
    }
  }

  .preview-iphone-framecontent {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: transparent;
    border: 14px solid #fff;
    border-radius: 40px;
    box-shadow: 14px 21px 42px 10px rgba(0, 0, 0, 0.2);
    overflow: hidden;

    &.show-preview_header {
      .preview_body {
        top: 64px;
      }
    }
    &.show-preview_footer {
      .preview_body {
        bottom: 68px;
      }
    }
    &.enable-preview_body_scroll {
      .preview_body {
        border-width: 0 1px;
        overflow-y: scroll;
      }
    }

    &.show-search-bar {
      .preview_header {
        min-height: 100px;
      }
      .preview_body {
        top: 100px !important;
      }
    }

    .preview_header {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      min-height: 64px;
    }

    .preview_body {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 100%;
      overflow: hidden;
      background-color: rgb(254, 254, 254);
    }

    .preview_footer {
      position: absolute;
      top: auto;
      bottom: 0;
      left: 0;
      width: 100%;
      min-height: 68px;
      background: #ffffff;
      padding: 16px;

      .app-cart-text {
        color: #ffffff;
        text-align: center;
        padding: 8px;
        border-radius: 2px;
      }
    }

    // common css
    .app-build-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 64px;
      padding: 32px 16px 8px;

      .app-name {
        position: absolute;
        left: 50%;
        margin-left: -72px;
        width: 144px;
        color: #ffffff;
        text-align: center;
        font-size: 12px;
        line-height: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .app-cart {
        position: relative;
        font-size: 18px;
        color: #ffffff;

        .number {
          position: absolute;
          height: 14px;
          top: -6px;
          right: -6px;
          width: 14px;
          text-align: center;
          line-height: 14px;
          font-size: 10px;
          font-style: normal;
          border-radius: 50%;
          font-family: sans-serif;
          font-weight: bold;
        }
      }

      .app-right-icon {
        i {
          vertical-align: middle;

          &:not(:last-child) {
            margin-right: 12px;
          }
        }
      }
    }

    .app-banner-logo {
      background-size: 60% 40%;
      background-repeat: no-repeat;
      background-position-x: 50%;
      background-position-y: 75%;
    }

    .search-bar {
      padding: 0px 4px 4px;

      .input-search-wrap {
        position: relative;

        i {
          color: #000000;
          position: absolute;
          top: 50%;
          margin-top: -7px;
          left: 12px;
        }

        .form-control {
          color: #000000;
          font-size: 10px;
          letter-spacing: 0.24px;
          border-color: #ffffff;
          border-radius: 2px;
          box-shadow: none;
          height: 32px;
          padding-left: 34px;

          &::placeholder {
            color: #000000;
          }
        }
      }
    }

    .launch-screen-preview {
      position: relative;
      width: 100%;
      height: 100%;

      .bg-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .fg-image {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .fg-image-small {
        width: 40%;
      }
      .fg-image-medium {
        width: 60%;
      }
      .fg-image-large {
        width: 80%;
      }
    }
    .spinner {
      margin-top: -40px;
    }
  }

  /* scroll bar style starts */
  ::-webkit-scrollbar {
    width: 3px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
    margin: 0;
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.4);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.6);
  }
  /* scroll bar style ends */
}
/* makes the anchor tag non-clickable. added for image-grid with text*/
.mobile-preview-disable-anchor {
  pointer-events: none;
  cursor: default;
}

.privacy-policy-container {
    display: flex;
    background-color: #ffffff;
    position: fixed;
    top: 88px;
    right: 16px;
    bottom: 16px;
    left: 312px;
    border-radius: 4px;
    overflow: auto;
    .privacy-policy-iframe {
        border: transparent;
        width: 100%;
        height: 100%;
        .navbar {
            display: none;
        }
    }
}
.storefront-token {

    .btn-wrapper {
        text-align: left;

        .btn {     
            &:not(:last-child) {
                margin-right: 8px;
                margin-left: 0px;
            }
        }
    }

    .btn {
        color: #FFFFFF;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0.28px;
        padding: 11px 32px;
        background-color: #000000;
        border: 1px solid #000000;
        border-radius: 2px;
        margin: 0;

        &.btn-outline {
            background-color: rgba(0, 0, 0, 0.13);
            border-color: #ffffff;
        }

    }

}

.push-notifications-modal {
    position: relative; 
    width: 100; 
    height: 90vh; 
    z-index: 100; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background: #0000001f;
    .modal-content {
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center; 
        padding: 3rem 2rem; 
        background: white; 
        border-radius: .5rem;

        button {
            margin-top: 2rem; 
            padding: 1rem; 
            background: #f62369; 
            color: white;
        }
    }
}

.push-notifications {
    color: #000000;
    background-color: #FFFFFF;
    padding: 32px 20px;

    // common css starts
    :focus, :active:focus {
        outline: 0 none;
    }

    .row {
        & > div {
            margin-bottom: 0;
        }
    
        [class*='col-'] {
            padding: 0 12px;
        }

        &.no-gutter-spacing {
            margin: 0 -12px !important;
        }
    }

    .flex-form-group {
        display: flex;
        align-items: center;
        margin: 0 0 24px;

        .control-label {
            padding-right: 40px;
            margin-bottom: 0;
        }
    }

    .form-group {
        margin: 0 0 24px;
    }

    .control-label {
        color: #000000;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: 0.32px;
        margin-bottom: 16px;

        b {
            color: ~"rgb(0 0 0 / .5)";
            font-weight: 500;
        }
    }

    .form-control {
        height: 40px;
        color: #000000;
        font-size: 14px;
        line-height: 1.29;
        letter-spacing: 0.28px;
        padding: 10px 16px;
        border-radius: 2px;
        border-radius: 2px;
        border: 1px solid #dbdbdb;
        background-color: #fafafa;
        box-shadow: none;
        
        &::placeholder {
            color: #adadad;
        }
        
        &:focus {
            border-color: #979797;
            background-color: #ffffff;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
        }
    }

    .select-wrapper {
        position: relative;

        .form-control {
            appearance: none;
            background-color: #FFFFFF;
            padding-right: 40px;
        }

        &:after {
            content: "\e91b";
            font-family: "vajro-icon";
            position: absolute;
            top: 50%;
            margin-top: -5px;
            right: 16px;
            font-size: 10px;
            line-height: 1;
        }
    }

    .btn-wrapper {
        text-align: center;

        .btn {     
            &:not(:last-child) {
                margin-right: 8px;
            }
        }
    }

    .btn {
        color: #FFFFFF;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0.28px;
        padding: 11px 32px;
        background-color: #000000;
        border: 1px solid #000000;
        border-radius: 2px;
        margin: 0;

        &.btn-outline {
            background-color: rgba(0, 0, 0, 0.13);
            border-color: #ffffff;
        }

        &.delete-btn {
            background-color: #de3333;
            border-color: #de3333;
        }
    }

    .pill-outline {
        padding: 0 8px;
        vertical-align: text-top;
        margin-left: 8px;
    }


    p.title {
        font-size: 16px;
        font-weight: bold;
        line-height: 1.31;
        letter-spacing: 0.32px;
        margin-bottom: 16px;
    }
    // common css ends

    .image-card {
        display: table;
        margin-bottom: 24px;

        .pill-outline {
            padding: 0 8px;
            vertical-align: text-top;
            margin-left: 8px;
        }

        p {
            color: ~"rgb(0 0 0 / .5)";
            font-size: 12px;
            line-height: 1;
            letter-spacing: 0.24px;
            margin-bottom: 16px;

            span {
                display: block;
                margin-bottom: 16px;

                &.title {
                    font-size: 16px;
                    font-weight: 500;
                    line-height: 1.5;
                    letter-spacing: 0.32px;
                    margin-bottom: 8px;
                    color: #000000;

                    b {
                        color: ~"rgb(0 0 0 / .5)";
                        font-weight: 500;
                    }
                }
            }
        }

        .disabled-image-wrapper {
            cursor: not-allowed;
        }

      

        .click-to-upload-image {
            width: 338px;
            height: 168px;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 2px;
            background-color: #f4f4f4;
            cursor: pointer;

            img {
                display: block;
                width: 40px;
                height: 40px;
                object-fit: cover;
                margin: 0 auto 8px;
            }

            p {
                color: ~"rgb(0 0 0 / .3)";
                font-size: 14px;
                font-weight: 500;
                line-height: 1.2;
                letter-spacing: 0.28px;
                margin-bottom: 0;
            }
        }

        figure {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 424px;
            height: 192px;
            border-radius: 2px;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            overflow: hidden;

            &.bg-grey {
                background-color: ~"rgb(0 0 0 / .5)";
                background-size: contain;
            }

            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: ~"rgb(0 0 0 / .6)";
                opacity: 0;
                visibility: hidden;
                transition: opacity .4s ease;
            }

            &:hover {
                &:before, figcaption {
                    opacity: 1;
                    visibility: visible;
                }
            }

            figcaption {
                z-index: 1;
                opacity: 0;
                visibility: hidden;
                transition: opacity .4s ease;
                
                .btn-wrapper {
                    display: flex;

                    .btn {
                        min-width: 112px;

                        &:first-child {
                            margin-right: 16px;
                        }
    
                        &.upload-btn {
                            background-color: #ff4540;
                            border-color: #ff4540;
                        }
                    }
                }
                
                i.vajro-delete {
                    color: #FFFFFF;
                    font-size: 16px;
                    position: absolute;
                    top: 12px;
                    right: 12px;
                    z-index: 1;
                    cursor: pointer;
                }
            }
        }
    }

    .video-form-list {
        margin-top: 16px;

        span {
            display: table;
            font-size: 12px;
            letter-spacing: 0.24px;
            line-height: 1;

            &:not(:last-child) {
                margin-bottom: 8px;
            }
        }
    }

    .push-notifications-alert {
        padding: 12px 20px;
        border-radius: 2px;
        background-color: rgba(247, 148, 0, 0.04);
        border-top: 5px solid #f79400;
        margin-bottom: 24px;

        .txt {
            color: rgba(0, 0, 0, 0.8);
            font-size: 14px;
            line-height: 1.5;
            letter-spacing: 0.28px;
        }

        .btn {
            color: #f79400;
            background-color: transparent;
            border-color: #f79400;
        }
    }

    &.automated {
        display: flex;
        padding: 24px;
        background-color: transparent;
        
        .left-col {
            width: 26%;
        }

        .right-col {
            width: 52%;
            margin-left: 24px;
        }

        .vertical-tab-wrapper {
            padding: 20px 10px;
            border-radius: 2px;
            box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
            background-color: #FFFFFF;
    
            .vertical-tab {
                position: relative;
                display: block;
                color: #000000;
                padding: 12px 40px 12px 16px;
                font-size: 14px;
                line-height: 1.5;
                letter-spacing: 0.28px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                transition: all .6s ease;
                cursor: pointer;
    
                &:not(:last-child) {
                    margin-bottom: 8px;
                }
    
                &:after {
                    content: "\e907";
                    font-family: "vajro-icon";
                    position: absolute;
                    top: 50%;
                    margin-top: -6px;
                    right: 16px;
                    font-size: 12px;
                    line-height: 1;
                }
    
                &.active, &:hover {
                    color: #ffffff;
                    background-color: #000000;
                }
            }
        }
    
        .automated-pushnotification-form {
            padding: 24px 40px 24px 24px;
            border-radius: 2px;
            background-color: #FFFFFF;
    
            .form-group {
                margin-bottom: 16px;
            }
    
            .control-label {
                margin-bottom: 8px;
            }
        }
    }

    .preview-iphone-frame {
        width: 230px;
        height: 450px;
        position: relative;
        margin: 0 auto;
        .iphone-bar {
            position: absolute;
            width: 144px;
            height: 20px;
            top: 12px;
            left: 50%;
            margin-left: -72px;
            background-color: #fff;
            border-radius: 0 0 16px 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            .iphone-speaker {
                width: 32px;
                height: 4px;
                background-color: #404040;
                border-radius: 4px;
                display: inline-block;
            }
            .iphone-camera {
                width: 8px;
                height: 8px;
                background-color: #1a1a1a;
                border-radius: 50%;
                border: 2px solid #404040;
                // background-image: -webkit-gradient(linear, right top, left top, from(#1a1a1a), to(#2363a6));
                margin-left: 8px;
            }
        }
        .preview-iphone-framecontent {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background:url("../img/iphone-wallpaper-20.jpg");
            background-size: cover;
            overflow: hidden;

            .preview-iphone-container {
                position: relative;
            }

            .iphone_preview {
                position: absolute;
                top: 150px;
                right: 2px;
                left: 2px;
                border-radius: 10px;
                box-shadow: rgba(212, 212, 213, 1) 0px 1px 3px 0px;
                max-width: 360px;
                background-color:white;
                overflow-y: hidden;
                padding: 8px;
                width: 98%;
                cursor: pointer;

                &.showPreview {
                    top: 35px;
                    transition: top .4s ease-in-out;
                }

                .iphone_preview_header {
                    color: rgb(85, 85, 85);
                    display: flex;
                    -webkit-box-pack: justify;
                    justify-content: space-between;
                    font-weight: 300;
                    line-height: 20px;
                    font-size: 11px;
                    .iphone_preview_header_icon {
                        .fa-apple {
                            margin-right: 3px;
                            background: black;
                            color: white;
                            padding: 2px 3.29px;
                            border-radius: 4px;
                        }
                    }
                    .app-name {
                        text-transform: uppercase;
                    }
                }
                .iphone_preview_img {
                    margin: 5px -8px 10px;
                    img {
                        height: 125px;
                        width: 100%;
                        object-fit: cover;
                    }
                }
                .iphone_preview_body {
                    width: 100%;
                    margin-top: 8px;
                    display: flex;
                    justify-content: space-between;
                    .iphone_preview_body_content_text {
                        width: 80%;
                        .notification-title {
                            font-size: 10px;
                            color: #000000;
                            line-height: 16px;
                        }
                        .notification-msg {
                            color: #000000;
                            font-size: 10px;
                            line-height: 16px;
                        }
                    }
                    .iphone_preview_content_image {
                        align-self: flex-start;
                        width: 35px;
                        height: 35px;
                        border-radius: 3px;
                        object-fit: cover;

                        &.in{
                            display: none;
                        }
                    }
                }
            }
        }
    }
    .mobile-preveiw-toggle{
        margin-bottom: 30px;
        padding-top: 30px;
    }
    .preview-android-frame {
        width: 260px;
        height: 496px;
        position: relative;
        margin: 0 auto;
        .android-bar {
            position: absolute;
            height: 20px;
            top: 12px;
            right: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            .android-speaker {
                width: 64px;
                height: 4px;
                background-color: #404040;
                border-radius: 4px;
                display: inline-block;
            }
            .camera-light {
                display: flex;
                width: 30px;
                justify-content: space-between;
                position: absolute;
                left: 40px;
            }
            .android-camera {
                width: 8px;
                height: 8px;
                background-color: #1a1a1a;
                border-radius: 50%;
                border: 2px solid #404040;
                // background-image: -webkit-gradient(linear, right top, left top, from(#1a1a1a), to(#2363a6));
            }
            .android-camera-light {
                width: 8px;
                height: 8px;
                background-color: #1a1a1a;
                border-radius: 50%;
                border: 2px solid #404040;
                // background-image: -webkit-gradient(linear, right top, left top, from(#1a1a1a), to(#2363a6));
            }
        }
        .android-bottom-bar {
            position: absolute;
            right: 0;
            left: 0;
            bottom: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            .android-bottom-speaker {
                width: 64px;
                height: 4px;
                background-color: #404040;
                border-radius: 4px;
                display: inline-block;
            }
        }
        .preview-android-framecontent {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            border: 8px solid #1a1a1a;
            border-top-width: 40px;
            border-bottom-width: 40px;
            border-radius: 24px;
            background:url("../img/iphone-wallpaper-20.jpg");
            background-size: cover;
            overflow: hidden;

            .preview-android-container {
                position: relative;
            }

            .android_preview {
                position: absolute;
                top: 150px;
                right: 2px;
                left: 2px;
                border-radius: 2px;
                max-width: 360px;
                background-color: rgb(254, 254, 254);
                overflow-y: hidden;
                padding: 8px;
                width: 98%;
                cursor: pointer;
                box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px;
    
                .android_preview_header {
                    display: flex;
                    font-size: 12px;
                    line-height: 15px;
                    .down-up-icon {
                        color: #000000;
                    }
                    .android_preview_header_icon {
                        color: #000000;
                        margin-right: 4px;
                    }
                    .android_preview_header_name {
                        font-size: 10px;
                        line-height: 13px;
                        color: #636363;
                        margin: auto 0;
                        margin-right: 4px;
                    }
                }
                .android_preview_img {
                    margin-top: 5px;
                    img {
                        height: 125px;
                        width: 100%;
                        object-fit: cover;
                    }
                }
                .android_preview_body {
                    width: 100%;
                    margin-top: 8px;
                    display: flex;
                    justify-content: space-between;
                    .android_preview_body_content_text {
                        width: 80%;
                        .notification-title {
                            font-size: 10px;
                            color: rgb(83, 83, 83);
                            line-height: 16px;
                        }
                        .notification-msg {
                            color: rgb(117, 117, 117);
                            font-size: 10px;
                            line-height: 16px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                    .android_preview_body_content_image {
                        height: 32px;
                    }
                }
            }
        }
    }
}

.switch-outer {
    display: flex;
    
    .switch {
        width: 48px;
        height: 26px;
        input:checked {
            &~ .slider {
                background-color: #25c16f;
                &:before {
                    transform: translateX(24px);
                }
            }
            &~ .toggle-left-text {
                color: #4d4d4d;
            }
            &~.toggle-right-text {
                color: #25c16f;
            }
        }
        .slider {
            background: #dbdbdb;
            &:before {
                height: 16px;
                width: 16px;
                margin-top: -8px;
                left: 4px;
                background-color: #ffffff;
            }
        }
        .toggle-left-text, .toggle-right-text {
            font-size: 14px;
            line-height: 1.2;
            font-weight: normal;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        .toggle-left-text {
            color: #25c16f;
            right: 100%;
            margin-right: 8px;
        }
        .toggle-right-text {
            left: 100%;
            margin-left: 8px;
        }
    }
}

.w-100 {
    width: 100% !important;
}
@media only screen and (max-width: 768px){
        .automated {
            display: grid!important;
            background-color: white!important;
            .vertical-tab-wrapper{
                margin-bottom: 20px;
            }
        }
    }
.beta-for-push-reports{
    padding: 0 5px;
    border: 1px solid #3E4A58;
    color: #3E4A58;
    background-color: rgba(62, 74, 88, 0.15);
    border-radius: 2px;
    font-size: 10px;
}
.push-reports-top-note {
    padding: 150px 24px 32px;
    h5 {
        font-size: 16px;
        margin: 0px;
        margin-bottom: 8px;
    }
    p {
        font-size: 14px;
        color: #333333;
        border-bottom: 1px solid #E4E4E4;
        padding-bottom: 32px;
        margin-bottom: 0px;
        a {
            color: #f62369;
            &:hover {
                text-decoration: none;
            }
        }
    }
}
.push-notification-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 24px;
    .select-option-icon {
        position: relative;
        &::before {
            content: '\f078';
            font: normal normal normal 12px/1 FontAwesome;
            color: #000000;
            right: 12px;
            height: 100%;
            width: 52%;
            padding: 15px 0px;
            position: absolute;
            pointer-events: none;
        }
        .select-option {
            appearance: none;
            width: 50%;
            border: solid 1px #d9d9d9;
            background: #ffffffff;
            border-radius: 4px;
            padding: 12px 16px;
            font-size: 12px;
        }
        .diableOption {
            position: absolute;
            z-index: 0;
            background: rgba(0, 0, 0, 0.10);
            content: "";
            top: 0px;
            bottom: 0px;
            right: 0px;
            left: 0px;
            border-radius: 4px;
        }
    }
}
.auto-push-notification {
    display: flex;
    flex-direction: column;
    .form-group {
        padding: 32px 24px 0px;
    }
    .select-option-icon {
        position: relative;
        &::before {
            content: '\f078';
            font: normal normal normal 12px/1 FontAwesome;
            color: #000000;
            right: 12px;
            height: 100%;
            width: 52%;
            padding: 15px 0px;
            position: absolute;
            pointer-events: none;
        }
        .select-option {
            appearance: none;
            width: 50%;
            border: solid 1px #d9d9d9;
            background: #ffffffff;
            border-radius: 4px;
            padding: 12px 16px;
            font-size: 12px;
        }
        .diableOption {
            position: absolute;
            z-index: 0;
            background: rgba(0, 0, 0, 0.10);
            content: "";
            top: 0px;
            bottom: 0px;
            right: 0px;
            left: 0px;
            border-radius: 4px;
        }
    }
    .auto-push-notification-card {
        margin: 24px auto;
        padding: 0px 9px;
        .card-layout {
            background: #FFFFFF;
            border: 1px solid #DEDEDE;
            border-radius: 4px;
            padding: 12px;
            p {
                font-weight: 500;
                font-size: 14px;
                color: #000000;
            }
            table {
                width: 100%;
                tr {
                    padding-bottom: 8px;
                    &:last-child {
                        padding-bottom: 0px;
                    }
                    td {
                        font-weight: 400;
                        font-size: 14px;
                        color: #333333;
                    }
                }
            }
        }
    }
}
.empty-report {
    font-weight: 500;
    font-size: 16px;
    color: #000000;
    text-align: center;
}
.text-red{
    color: red;
}
.push-notification-flex {
    display: flex;
    .mr-2 {
        margin-right: 8px;
    }
}
.export-button-info {
    margin: auto 0px;
    margin-bottom: 0px;
    .export-button {
        padding: 8px 24px;
        border: 1px solid #F62369;
        color: #fff;
        background: #F62369;
        border-radius: 4px;
        font-weight: 600;
        font-size: 14px;
        &:hover {
            background: #FFF3F7;
            color: #F62369;
        }
        img{
            padding-left: 5px;
            margin-bottom: 2px;
            width: 18px;
        }
    }
}

.prev-button{
    padding: 3px 10px;
    background: #fff;
    color: #000;
    border: 0;
}

.next-button{
    padding: 3px 10px;
    background: #FBF0F5;
    color: #000;
    border: 0;
}
.reports-table {
    position:relative; 
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 24px;
    &::-webkit-scrollbar {
        display: none;
    }

    .test {
        position: sticky;
        right: -24px;
        border-top: 0px;
        background-color: #FFFFFF;
        /* background: white; */
        /* z-index: 9; */
        &:before {
            content: " ";
            box-shadow: -100px 0 90px -70px inset rgba(255, 255, 255, 1);
            height: 100%;
            top: 0;
            left: -83px;
            position: absolute;
            width: 83px;
        }
        .test2 {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
        }
    }
}

.reports-push-notification{
    position: relative;
    color: #000000;
    background-color: #FFFFFF;
    height: ~"calc(100vh - 104px)";
    .reports-push-notification-container {
        .next-button{
            padding: 4px 12px;
            background: #f62369;
            color: #fff;
            border: 0;
            border-radius: 4px;
        }
        .prev-button{
            padding: 4px 12px;
            background: #FBF0F5;
            color: #000;
            border-radius: 4px;
            border: 0;
        }
        .custom-tooltip {
            margin-left: 4px;
            cursor: pointer;
        }
        .custom-tooltip:hover + .custom-tooltip-container {
            display: flex;
        }
        .custom-tooltip-container .custom-tooltip-body{
            color: #001E3E;
            font-size: 11px;
            line-height: 18px;
            white-space: normal;
        }
        .custom-tooltip-container{
            display: none;
            min-width: 170px;
            max-width: 300px;
            position: absolute;
            background-color: #fff;
            padding: 4px 8px;
            box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
            border-radius: 4px;
            z-index: 2;
            margin-top: 24px;
        }
        th:last-child{
            .custom-tooltip-container{
                margin-left: -60px;
            }
        }
        .custom-tooltip-container.progress-bar-tool-tip{
            margin-top: -85px;
            margin-left: -30px;
        }

        .progress-bar-tool-tip .col-md-6 span{
            font-size: 18px;
        }
        .progress-bar-tool-tip .col-md-6{
            padding: 10px 0;
            text-align: center;
        }
        .progress-bar-tool-tip .col-md-6:nth-child(1){
            border-right: 1px solid #ccc;
        }

        .table>thead>tr>th {
            border-bottom: 0;
            white-space:nowrap;
            text-align: left;
            padding: 15px;
        }
        .table>thead>tr>td {
            border: 0;
        }
        .table>tbody>tr>td:nth-child(1), .table>tbody>tr>td:nth-child(2){
            text-align: left;
            span{
                display: -webkit-box;
                -webkit-box-orient: vertical;
                min-width: 240px;
            }
        }
        .table>tbody>tr>td {
            text-align: center;
        }
        .progress {
            height: 10px;
            margin-top: 5px;
            margin-bottom: 0px;
            top: 0;
        }
        .progress:after {
            border-radius: 0;
        }
        .progress-bar {
            background-color: #f52368;
            z-index: 1;
            border-width: 0px;
        }
        .md-container {
            background: rgba(245, 35, 104, 0.5);
            width: 75%;
            height: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: auto;
            border-radius: 4px;
        }
        md-progress-linear .md-bar {
            background-color: #f52368;
        }
        md-progress-linear .md-container .md-bar {
            height: 10px;
            border-radius: 4px;
        }
        .vajro-loader {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 24px;
        }
        td i {
            color: #f52368;
        }
        .pt-5 {
            padding-top: 3rem;
        }
        td span {
            margin-left: 5px;
        }

        :focus, :active:focus {
            outline: 0 none;
        }

        .form-group {
            width: 100%;
            margin: 0;
        }
        .xtendForm {
            max-width: 500px;
            margin-left: 30px;
        }
    
        .control-label {
            font-size: 14px;
            color: #000000;
            margin-bottom: 8px;
    
            b {
                color: ~"rgb(0 0 0 / .5)";
                font-weight: 500;
            }
        }
    
        .form-control {
            height: 40px;
            color: #000000;
            font-size: 14px;
            line-height: 1.29;
            letter-spacing: 0.28px;
            padding: 10px 16px;
            border-radius: 2px;
            border-radius: 2px;
            border: 1px solid #dbdbdb;
            background-color: #fafafa;
            box-shadow: none;
            
            &::placeholder {
                color: #adadad;
            }
            
            &:focus {
                border-color: #979797;
                background-color: #ffffff;
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
            }
            &.automated{
                width:25% !important;
            }
        }

        .dashboard-table {
            .tbl-row {
                border-width: 0 1px 1px 1px;

                &.header .tbl-cell {
                    padding: 8px 16px;
                }

                .tbl-cell {
                    max-width: 304px;
                    color: #292c31;
                    font-size: 12px;
                    font-weight: 500;
                    line-height: 1.5;
                    text-align: left;
                    padding: 12px 16px;

                    .view-more {
                        color: #1895b3;
                        font-weight: 400;
                        text-decoration: underline;
                    }
                }
            }
        } 

        .no-preview-data {
            font-weight: 500;
            font-size: 16px;
            color: #000000;
            text-align: center;
            padding: 24px 0px;
        }

        .empty-state-image-container{
            padding-left:60Vh;

            .empty-state-image{
                height:40Vh;
                width:40Vh;
                margin-left:5Vh
            }
            .coming-soon-text{
                font-size: 18px;
                padding-left:15Vh;
                padding-top:1Vh
            }
            .coming-soon-message{
                color:#777777;
                display: flex;
                letter-spacing:-1.3px;
                width:50Vh;
                line-height:1.43;
                text-align:center;
            }
        }

        .integration-card-wrapper {
            display: flex;
            flex-wrap: wrap;
            .integration-card {
                position: relative;
                display: flex;
                padding: 16px;
                background-color: #ffffff;
                border-radius: 2px;
                box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
                overflow: hidden;
                transition: all .4s ease;
                margin: 0 24px 24px 0;
                cursor: pointer;
                box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
                .locked-icon {
                    width: 48px;
                    height: 48px;
                    position: absolute;
                    top: 0;
                    right: 0;
                    &:before {
                        content: '';
                        width: 0;
                        height: 0;
                        display: inline-block;
                        border-top: 48px solid @theme-color;
                        border-left: 48px solid transparent;
                    }
                    i {
                        position: absolute;
                        top: 6px;
                        right: 6px;
                        color: #FFFFFF;
                        font-size: 16px;
                    }
                }
                .admin-only-badge {
                    color: #FFFFFF;
                    font-size: 11px;
                    line-height: 1.2;
                    position: absolute;
                    top: 20px;
                    right: -24px;
                    background-color: #ff4540;
                    padding: 4px 24px;
                    transform: rotate(45deg);
                }
                .enabled-btn {
                    font-size: 12px;
                    font-weight: 500;
                    line-height: 1.5;
                    text-align: center;
                    color: #26bf8c;
                    padding: 2px 6px;
                    border-radius: 2px;
                    border: 1px dashed #26bf8c;
                    position: absolute;
                    right: 16px;
                    bottom: 12px;
                }
                .left-col {
                    width: 25%;
                    text-align: center;
                    img {
                        display: block;
                        width: 64px;
                        height: 64px;
                        object-fit: contain;
                        background-color: #FFFFFF;
                        border-radius: 2px;
                        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
                        margin: 0 auto 4px;
                    }
                    a {
                        color: rgba(0, 0, 0, 0.8);
                        font-size: 10px;
                        line-height: 1.5;
                        text-decoration: none;
                        padding-bottom: 1px;
                        border-bottom: 1px solid rgba(0, 0, 0, 0.8);
                    }
                }
                
                .right-col {
                    width: 75%;
                    padding-left: 16px;
                    p {
                        color: rgba(0, 0, 0, .8);
                        font-size: 11px;
                        line-height: 1.5;
                        margin-bottom: 6px;
                        span {
                            display: block;
                            color: #000000;
                            font-size: 18px;
                            font-weight: 500;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            overflow: hidden;
                            margin-bottom: 2px;

                        }
                        &.txt {
                            font-size: 12px;
                            color: #adadad;
                            display: -webkit-box;
                            -webkit-line-clamp: 3;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                            margin-bottom: 0;
                        }
                    }

                    .automated-push-notification-table{
                        border-collapse: separate;
                        border-spacing: 50px 0;
                    }
                    .automated-push-notification-table-cell{
                        padding: 10px 0;

                    }
                }

            }
        }
    }
  
}

.push-admin-report {
    height: 100vh;
    width: 0;
    position: fixed;
    z-index: 99;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.4);
    transition: 0.10s;
    button, input, select, textarea {
        font-family: 'Poppins', serif !important;
    }
    &.active {
        width: 100vw;
        transition: 0.1s;
    }
    .admin-report-sidenav {
        height: 100%;
        width: 0px;
        position: fixed;
        z-index: 1;
        top: 0;
        right: 0px;
        background-color: #ffffff;
        transition: 0.5s;
        &.active {
            width: 450px;
            transition: 0.5s;
        }
        .title {
            font-size: 14px;
            color: #000000;
            margin-bottom: 8px;
        }
        .report-generation-section {
            margin-bottom: 16px;
            &:last-child {
                margin-bottom: 0px;
            }
        }
        .survey-popup-answer {
            display: flex;
            cursor: pointer;
            overflow-x: auto;
            justify-content: space-between;
            .survey-popup-option {
                font-size: 12px;
                padding: 8px 10px;
                border-radius: 4px;
                border: solid 1px #000;
                width: 100%;
                white-space: nowrap;
                margin-right: 12px;
                text-align: center;
                &:last-child {
                    margin-right: 0px;
                }
                &.active {
                    border: solid 1px #f62369;
                    color: #f62369;
                }
            }
        }
        .d-flex {
            display: flex;
        }
        input {
            color: #333333;
            border-radius: 4px;
            border: 1px solid #C5C9CD;
            padding: 12px 16px;
            font-size: 12px;
            outline: 0px;
        }
        .textbox-count {
            font-size: 10px;
            margin-top: 4px;
            color: #716f83;
            display: flex;
            justify-content: flex-end;
        }
        /* Chrome, Safari, Edge, Opera */
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        input[type=number] {
            -moz-appearance: textfield;
            margin-bottom: 8px;
        }

        .width-50 {
            width: 50%;
            &:first-child {
                margin-bottom: 16px;
            }
        }

        .app-search-section {
            display: flex;
            flex-direction: column;
            .or-text {
                color: rgba(0, 0, 0, 0.4);
                margin-bottom: 8px;
                text-align: center;
            }
        }

        .dropdown {
            &:first-child {
                margin-bottom: 16px;
            }
            .form-control {
                height: auto !important;
                box-shadow: none;
            }
            .input-group .form-control:first-child {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }
            &.open>.dropdown-menu {
                width: 100% !important;
            }
        }
        .select-option-icon {
            position: relative;
            width: 100%;
            &::before {
                content: '\f078';
                font: normal normal normal 12px/1 FontAwesome;
                color: #000000;
                right: 12px;
                height: 100%;
                padding: 15px 0px;
                position: absolute;
                pointer-events: none;
            }
        }
        .select-option {
            appearance: none;
            width: 100%;
            border: solid 1px #d9d9d9;
            background: #ffffffff;
            border-radius: 4px;
            padding: 12px 16px;
            font-size: 12px;
            &:focus-visible {
                outline: 0px;
            }
        }
        .streaming-type-toggle {
            display: flex;
            .title {
                margin-bottom: 0px;
            }
            .switch-outer {
                margin: auto 0;
                margin-left: 16px;
                .switch {
                    width: 24px;
                    height: 14px;
                    margin-bottom: 0;
                    input:checked + .slider {
                        background: #40d08b;
                        &:before {
                            transform: translateX(10);
                            -webkit-transform: translateX(10px);
                            -ms-transform: translateX(10px);
                        }
                    }
                    .slider {
                        background: rgba(0, 0, 0, 0.4);
                        &:before {
                            width: 8px;
                            height: 8px;
                            top: 50%;
                            margin-top: -4px;
                            left: 3px;
                            background-color: #FFFFFF;
                        }
                    }
                }
            }
        }
        .admin-report-header {
            background: #ffffff;
            position: fixed;
            top: 0px;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #DEDEDE;
            z-index: 9;
            width: 450px;
            .heading {
                font-weight: 500;
                font-size: 18px;
                color: #333333;
            }
        }
        .admin-report-body {
            padding-top: 66px;
            height: ~"calc(100vh - 66px)";
            overflow-y: auto;
            &:hover::-webkit-scrollbar-thumb {
                display: block;
            }
            .report-generation-padding {
                padding: 20px;
                .report-generation-section {
                    .dropdown {
                        .form-control[readonly] {
                            background-color: #fff !important;
                        }
                        &.open {
                            .datetimepicker {
                                width: 100% !important;
                            }
                        }
                    }
                }
            }
            .space-between-div {
                height: 4px;
                background: rgba(240, 239, 248, 0.5);
            }
            .report-generation-title {
                font-size: 16px;
                color: #000000;
                margin-bottom: 16px;
                // font-weight: 600;
            }
        }
        .admin-report-footer {
            display: flex;
            position: fixed;
            bottom: 0;
            width: 450px;
            padding: 14px 20px;
            box-shadow: 0px -4px 24px rgba(0, 0, 0, 0.12);
            background: #ffffff;
            button {
                border-radius: 4px;
                padding: 8px 16px;
                font-weight: 600;
                font-size: 14px;
            }
            .cancel-btn {
                background: #FFFFFF;
                border: 1px solid #D3D3D3;
                color: #333333;
                margin-right: 10px;
                &:hover {
                    background: rgba(211, 211, 211, 0.2);
                }
            }
            .create-btn {
                background: #F62369;
                border: 1px solid #F62369;
                color: #ffffff;
                &.active {
                    cursor: not-allowed;
                    opacity: 0.3;
                    &:hover {
                        opacity: 0.3;
                        background: #F62369;
                        border: 1px solid #F62369;
                        color: #ffffff;
                    }
                }
                &:hover {
                    background: #FFF3F7;
                    color: #F62369;
                }
            }
        }
    }
}

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {
    .push-admin-report {
        .admin-report-sidenav {
            &.active {
                width: 100%;
            }
            .admin-report-header, .admin-report-footer {
                width: 100%;
            }
        }
    }
}

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) {
    .push-admin-report {
        .admin-report-sidenav {
            &.active {
                width: 100%;
            }
            .admin-report-header, .admin-report-footer {
                width: 100%;
            }
        }
    }
}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) {
    .push-admin-report {
        .admin-report-sidenav {
            &.active {
                width: 100%;
            }
            .admin-report-header, .admin-report-footer {
                width: 100%;
            }
        }
    }
}
.replay-live-video-mobile-preview {
    padding: 8px 2px;

    .swiper-slide {
        height: 135px;
    }
    p {
        color: #ffffff;
        font-size: 9px;
        letter-spacing: 0.18px;
        margin: 8px 0;
    }

    .view-all {
        position: absolute;
        top: 0px;
        right: 3px;
        bottom: 0px;
        left: 3px;
        background: rgba(0, 0, 0, 0.50);
        z-index: 1;
        div {
            color: #ffffff;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }
    }

    .video-wrap {
        video {
            display: table;
            width: 100%;
            height: 135px;
            object-fit: cover;
            border-radius: 3px;
            background-color: #f4f4f4;
            margin-bottom: 8px;
            position: absolute;
            padding: 0px 2px;
        }

        .play-btn {
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 135px;
            .play-button {
                background-color: rgba(0, 0, 0, 0.25);
                color: #FFFFFF;
                border-radius: 50%;
                box-sizing: border-box;
                position: relative;
                display: block;
                transform: scale(var(--ggs,1));
                width: 22px;
                height: 22px;
                &::before {
                    content: "";
                    display: block;
                    box-sizing: border-box;
                    position: absolute;
                    width: 0;
                    height: 10px;
                    border-top: 5px solid transparent;
                    border-bottom: 5px solid transparent;
                    border-left: 8px solid;
                    top: 6px;
                    left: 8px
                } 
            }
        }

        .title-txt {
            width: 88%;
            position: absolute;
            bottom: 4px;
            left: 8px;
        }

        p {
            color: #ffffff;
            margin: 0px;

            &.title {
                font-size: 12px;
                font-weight: bold;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            &.txt {
                font-size: 10px;
            }
            .show-viewer-count {
                padding-left: 4px;
            }
        }
    }
}

.blynk-replay-live-widget {
    position: relative;
    padding: 24px 232px 32px 24px;
    border-radius: 3px;
    background-color: #ffffff;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;

    &:after {
        content: '';
        background: url('https://res.cloudinary.com/vajrohq/image/upload/v1609912774/admin_console/web_app/blynk/online-shopping-isometric.png') no-repeat right / cover;
        width: 224px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;            
    }

    .section-title {
        p {
            color: rgba(0, 0, 0, 0.5);
            font-size: 14px;
            line-height: 1.5;
            letter-spacing: 0.14px;
            margin-bottom: 56px;
            
            span {
                color: #000000;
                display: block;
                font-size: 18px;
                font-weight: bold;
                line-height: 1.5;
                letter-spacing: normal;
                margin-bottom: 8px;
                
                i {
                    vertical-align: middle;
                    margin-left: 16px;
                }
            }
        }
    }

    .steps-wrapper {
        display: flex;

        .steps {
            position: relative;
            width: 33.33%;
            display: flex;
            flex-flow: column wrap;
            align-items: center;
            text-align: center;

            &:not(:last-child):before, &:not(:last-child):after {
                content: '';
                width: 78%;
                height: 2px;
                background-size: 16px 1px;
                border: none;
                position: absolute;
                top: 16px;
                left: 61%;
            }

            &:not(:last-child):before {
                background-image: linear-gradient(90deg, #d9d9d9, #d9d9d9 60%, transparent 60%, transparent 100%);
            }

            &.complete {
                &:after {
                    background-image: linear-gradient(90deg, #ff8f3c, #ff8f3c 60%, transparent 60%, transparent 100%);
                    animation: status-bar 1s linear;
                    -webkit-animation: status-bar 1s linear 300ms 0 ease;
                    -moz-animation: status-bar 1s linear 300ms 0 ease;
                    -ms-animation: status-bar 1s linear 300ms 0 ease;
                }

                .steps-status {
                    background: #ff8f3c;
                    transform: scale(1.05);
                    
                    &:before {
                        content: "\e91e";
                        font-family: 'vajro-icon';
                        font-size: 13px;
                        color: #FFFFFF;
                        background-color: transparent;
                    }
                }

                .btn {
                    color: #ff8f3c;
                    background-color: #fff2e8;
                    border-color: #fff2e8;
                }
            }

            &.active {
                .steps-status {
                    background: #4e71e6;
                }

                .btn {
                    background-color: #4e71e6;
                    border-color: #4e71e6;

                    &:hover {
                        background-color: darken(#4e71e6, 10%);
                        border-color: darken(#4e71e6, 10%);
                    }
                }
            }

            .steps-status {
                position: relative;
                background: #d9d9d9;
                border-radius: 50%;
                display: inline-block;
                width: 32px;
                height: 32px;
                transition: transform .5s ease;
                margin-bottom: 12px;

                &:before {
                    content: '';
                    width: 16px;
                    height: 16px;
                    background: #FFFFFF;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-top: -8px;
                    margin-left: -8px;
                    border-radius: 50%;
                }
            }

            p {
                max-width: 216px;
                color: rgba(0, 0, 0, .5);
                font-size: 14px;
                margin-bottom: 20px;
                line-height: 1.4;
                margin-bottom: 20px;

                span {
                    display: block;
                    color: #000000;
                    font-size: 16px;
                    line-height: 1.6;
                    font-weight: 500;
                    margin-bottom: 8px;
                }
            }

            .btn {
                color: #ffffff;
                font-size: 14px;
                font-weight: bold;
                line-height: 1.3;
                letter-spacing: 0.28px;
                padding: 11px 32px;
                background-color: #d9d9d9;
                border-color: #d9d9d9;
                border-radius: 4px;
                box-shadow: none;
                margin: auto 0 0;
            }
        }
    }
}

@-webkit-keyframes status-bar {
    0% {
      width: 0%;
    }
  
    100% {
      width: 78%;
    }
}
  
@-moz-keyframes status-bar {
    0% {
        width: 0%;
    }

    100% {
        width: 78%;
    }
}

@-o-keyframes status-bar {
    0% {
        width: 0%;
    }

    100% {
        width: 78%;
    }
}

@keyframes status-bar {
    0% {
        width: 0%;
    }

    100% {
        width: 78%;
    }
}
.request-call-modal {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    position: fixed;
    top: -100%;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 11;
    outline: 0px;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.6);
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    transform-style: preserve-3d;
    overflow: hidden;

    &.in {
        top: 0px;
        opacity: 1;
        visibility: visible;
    }

    .request-call-modal-dialog {
        position: relative;

        @media(min-width: 768px) {
            margin: 40px auto;
            width: 420px;
            background-color: #ffffff;
            border-radius: 3px;
        }

        .request-call-modal-header {

            &.first-time-height{
                width:440px !important;
            }
            position: relative;
            font-family: @vajro-font;
            padding: 24px 48px 24px 24px;
            background-color: #f7f7f7;
            border-radius: 3px 3px 0 0;

            &:after {
                content: '';
                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                position: absolute;
                left: 16px;
                right: 16px;
                bottom: 0;
            }

            .close-modal {
                font-size: 16px;
                position: absolute;
                top: 16px;
                right: 24px;
                cursor: pointer;
            }
            
            p {
                font-size: 24px;
                font-weight: 600;
                line-height: 1.21;
                margin-bottom: 0px;

                span {
                    display: block;
                    font-size: 16px;
                    font-weight: normal;
                    line-height: 1.19;
                    margin-bottom: 4px;
                }
            }
        }
        
        .request-call-modal-body {

            &.first-time-height{
                height: 350px !important;
                width:440px !important;
            }
            height: 320px;
            background-color: #ffffff;
            border-radius: 3px;
            overflow: hidden scroll;

            .inner-content {
                font-family: @vajro-font;
                padding: 24px 32px 40px;
                display: flex;
                flex-wrap: wrap;
                flex-direction: column;
                justify-content: space-between;
                text-align: justify;
                min-height: 100%;

                p {
                    color: #000000;
                    font-size: 14px;
                    line-height: 0.71;
                    letter-spacing: 0.14px;
                    margin-bottom: 12px;
                    margin-left:98px;

                    b {
                        font-weight: 600;
                        
                    }
                    a{
                        text-decoration: underline;
                    }
                }

                // &.first-time-content {
                //     text-align: center;
                //     line-height: 1.71;
                // }

                .zoom-call-text-span
                {
                    margin-top:40px;
                    text-align: center;
                    line-height: 1.71;
                }

                .btn {
                    display: flex;
                    align-items: center;
                    color: #ffffff;
                    font-size: 16px;
                    font-weight: 600;
                    line-height: 2;
                    letter-spacing: 0.16px;
                    background-color: #0e71eb;
                    border-color: #0e71eb;
                    border-radius: 5px;
                    padding: 8px 16px;
                    margin: 0 60px 20px;

                    &.active, &:active {
                        box-shadow: none;
                    }

                    &:hover {
                        background-color: darken(#0e71eb, 10%);
                        border-color: darken(#0e71eb, 10%);
                    }

                    i {
                        font-size: 22px;
                    }
                }
            }
        }
        .first-time-popup{
            font-size: medium;
        }
    }
}
.sidenav-bar {
  font-family: @vajro-font;
  letter-spacing: 0.16px;
  background-color: #ffffff;
  width: 280px;
  position: fixed;
  top: 88px;
  left: 16px;
  bottom: 16px;
  border-radius: 4px;
  overflow-y: scroll;
  padding: 20px;
  overflow-x: hidden;
  
  &:hover::-webkit-scrollbar-thumb {
      display: block;
    }
  


  .sidebar-setup {
    text-align: center;
    border-radius: 4px;
    border: solid 1px #ffe6ee;
    background-color: #fff7fa;
    margin-bottom: 20px;

    .row > div {
      margin-bottom: 0px;
    }

    .setup-head {
      h5 {
        font-family: @vajro-font;
        font-size: 12px;
        font-weight: 600;
        text-align: left !important;
        margin-top: 18px;
        margin-bottom: 5px;
      }
      p {
        font-family: @vajro-font;
        font-size: 11px;
        font-weight: normal;
        text-align: left !important;
        color: #000000;
      }
    }
    .col-sm-12 {
      text-align: center;
      padding-left: 0;
      padding-right: 0;
      .btn-setup {
        width: 100%;
        padding: 10px;
        background-color: #fff;
        border-radius: 4px;
        color: @theme-color;
        font-size: 12px;
        line-height: 20px;
        border: 1px solid;
        margin-top: 10px;
        margin-bottom: 10px;
        font-weight: bold;
      }
    }
  }

  ul {
    list-style: none;
    .design-editor {
      i {
        margin-right: 22px;
      }
    }
    li {
      // color: #9d9d9d;
      outline: 0 none;
      transition: all 0.4s;
      padding: 15px 15px 10px 15px;
      font-size: 12px;

      &.active {
        color: @theme-color;
        background-color: @theme-background;
        border-radius: 2px;
        font-weight: bold;
        i {
          color: @theme-color;
        }
      }
      .vajro-chevron-down {
        float: right;
        font-size: 11px;
        color: @theme-color;
      }
      i {
        // color: #9d9d9d;
        font-size: 18px;
        margin: 0 auto 6px;
        transition: all 0.4s;
      }
      span {
        margin-left: 10px;
        vertical-align: top;
      }
    }
  }
}

.progress {
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: none;
  margin: 0 auto;
  box-shadow: none;
  position: relative;
  top: 16px;
}
.progress:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 6px solid #fba7c3;

  position: absolute;
  top: 0;
  left: 0;
}
.progress > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.progress .progress-left {
  left: 0;
}
.progress .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 6px;
  border-style: solid;
  position: absolute;
  top: 0;
  border-color: @theme-color;
}
.progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.progress .progress-right {
  right: 0;
}
.progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}
.progress .progress-value {
  color: @theme-color;
  display: flex;
  border-radius: 50%;
  font-size: 12px;
  text-align: center;
  line-height: 10px;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-weight: 300;
  padding-bottom: 12px;
}
.progress .progress-value div {
  margin-top: 10px;
}
.progress .progress-value span {
  font-size: 12px;
  text-transform: uppercase;
}

/* This for loop creates the 	necessary css animation names 
  Due to the split circle of progress-left and progress right, we must use the animations on each side. 
  */
.progress[data-percentage="10"] .progress-right .progress-bar {
  animation: loading-1 1.5s linear forwards;
}
.progress[data-percentage="10"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="20"] .progress-right .progress-bar {
  animation: loading-2 1.5s linear forwards;
}
.progress[data-percentage="20"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="30"] .progress-right .progress-bar {
  animation: loading-3 1.5s linear forwards;
}
.progress[data-percentage="30"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="40"] .progress-right .progress-bar {
  animation: loading-4 1.5s linear forwards;
}
.progress[data-percentage="40"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="50"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="50"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="60"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="60"] .progress-left .progress-bar {
  animation: loading-1 1.5s linear forwards 1.5s;
}

.progress[data-percentage="70"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="70"] .progress-left .progress-bar {
  animation: loading-2 1.5s linear forwards 1.5s;
}

.progress[data-percentage="80"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="80"] .progress-left .progress-bar {
  animation: loading-3 1.5s linear forwards 1.5s;
}

.progress[data-percentage="90"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="90"] .progress-left .progress-bar {
  animation: loading-4 1.5s linear forwards 1.5s;
}

.progress[data-percentage="100"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="100"] .progress-left .progress-bar {
  animation: loading-5 1.5s linear forwards 1.5s;
}

@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(36);
    transform: rotate(36deg);
  }
}
@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(72);
    transform: rotate(72deg);
  }
}
@keyframes loading-3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(108);
    transform: rotate(108deg);
  }
}
@keyframes loading-4 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(144);
    transform: rotate(144deg);
  }
}
@keyframes loading-5 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180);
    transform: rotate(180deg);
  }
}
.progress {
  margin-bottom: 1em;
}

.skeleton_container {
    padding: 20px;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    background: @body-bg;
    border: 1px solid transparent;
    border-radius: 2px;
    border-color: #e9e9e9;
}

.Polaris-SkeletonPage__Page {
    .Polaris-SkeletonPage__Header {
        .Polaris-SkeletonDisplayText__DisplayText {
            max-width: 12rem;
            animation: polaris-SkeletonShimmerAnimation .8s linear infinite alternate;
            .backface-visibility(hidden);
            will-change: opacity;
            position: relative;
            height: 2.8rem;

            &:after {
                content: "";
                .abs-position(0; 0; 0; 0);
                display: block;
                background-color: #dfe3e8;
                border-radius: @border-radius-small;
            }
        }
    }

    .Polaris-SkeletonPage__Content {

        .Polaris-Layout {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -ms-flex-pack: center;
            justify-content: center;
            -ms-flex-align: start;
            align-items: flex-start;
            margin-top: -2rem;
            margin-left: -2rem;

            .Polaris-Layout__Section {
                max-width: calc(98%);
                margin-top: 2rem;
                margin-left: 2rem;
                flex: 2 2 48rem;
                min-width: 51%;

                .Polaris-Card {
                    overflow: hidden;
                    background-color: @body-bg;
                    box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15);

                    &+.Polaris-Card {
                        margin-top: 2rem;
                    }

                    .Polaris-Card__Section {
                        padding: 2rem;

                        &+.Polaris-Card__Section {
                            border-top: 1px solid #dfe3e8;
                        }

                        .Polaris-SkeletonBodyText__SkeletonBodyTextContainer {
                            animation: polaris-SkeletonShimmerAnimation .8s linear infinite alternate;
                            .backface-visibility(hidden);
                            will-change: opacity;

                            .Polaris-SkeletonBodyText {
                                height: .8rem;
                                position: relative;

                                &+.Polaris-SkeletonBodyText {
                                    margin-top: 1.2rem;
                                }

                                &:after {
                                    content: "";
                                    .abs-position(0; 0; 0; 0);
                                    display: block;
                                    background-color: #dfe3e8;
                                    border-radius: @border-radius-small;
                                }

                                &:last-child {
                                    &:not(:first-child) {
                                        width: 80%;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .Polaris-Layout__Section--secondary {
                -ms-flex: 1 1 24rem;
                flex: 1 1 24rem;
                min-width: 0;
            }
        }
    }
}

@keyframes polaris-SkeletonShimmerAnimation {
    0% {
        .opacity(.45);
    }

    to {
        .opacity(.9);
    }
}

@media (min-width: 46.5em) {
    .Polaris-SkeletonPage__Content {
        margin-top: 2rem;
    }
}

@media (min-width: 30.625em) {
    .Polaris-Card {
        border-radius: @border-radius-small;
    }
}

// slider image modal style starts
.slider-image-modal {
    .dashboard-modal-dialog .dashboard-modal-body .inner-content {
        padding: 0 24px 48px;
    }

    .row {
        &>div {
            margin-bottom: 0;
        }

        [class*="col-"] {
            padding: 0 12px;
        }
    }

    .slider-image-card, .category-image-card {
        position: relative;
        display: flex;
        margin-bottom: 16px;

        i {
            position: absolute;
            top: 0;
            color: #cccccc;
            font-size: 24px;
            cursor: move;
        }
    }
 

    .slider-image-card {
        img {
            width: 188px;
            height: 96px;
            object-fit: cover;
            margin-left: auto;
        }
    }

    .category-image-card {
        margin-bottom: 32px;

        .category-image {
            width: 150px;
            height: 150px;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            align-items: center;
            padding: 20px 24px;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 3px;
            border: solid 1px #dbdbdb;
            margin-left: auto;
    
            img {
                width: 80px;
                height: 80px;
                object-fit: cover;
                border-radius: 100%;
                margin: 0 auto 8px;
            }

            p {
                font-size: 14px;
                font-weight: 500;
                line-height: 1.2;
                letter-spacing: 0.28px;
                color: rgba(0, 0, 0, 0.8);
                margin-bottom: 0;
            }
        }
    }
}
// slider image modal style starts
.survey-pdg-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: -100%;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 10;
    overflow: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;

    &.in {
        opacity: 1;
        visibility: visible;
        top: 0;
    }

    :focus, :active:focus {
        outline: 0 none;
    }

    .survey-pdg-body {
        position: relative;
        width: 544px;
        height: 400px;
        padding: 24px 16px;
        background-color: #FFFFFF;
        border-radius: 4px;
        overflow: hidden;
        
        @media (min-width: 768px) {
            padding: 32px 24px 24px 32px;
        }
        
        .pdg-close-modal {
            color: #000000;
            position: absolute;
            top: 24px;
            right: 24px;
            font-size: 24px;
            z-index: 2;
            cursor: pointer;
        }
        
        .inner-content {
            font-family: @vajro-font;
            height: 100%;
            animation: 0.5s ease 0s 1 normal none running slideInRight;
    
            h1 {
                color: #ff4540;
                font-size: 20px;
                font-weight: 900;
                line-height: 1.2;
                letter-spacing: 0.2px;
                padding-right: 40px;
                margin: 0 0 24px;
            }
    
            p {
                color: #000000;
                font-size: 16px;
                font-weight: 500;
                line-height: 1.75;
                letter-spacing: 0.12px;
                margin-bottom: 16px;
    
                span {
                    display: block;
                    font-size: 16px;
                    line-height: 1;
                    margin-bottom: 8px;
                }
    
                &.txt {
                    max-width: 272px;
                    font-size: 12px;
                }
            }
    
            .btn {
                min-width: 140px;
                color: #FFFFFF;
                font-size: 14px;
                font-weight: 500;
                line-height: 1.2;
                letter-spacing: 0.28px;
                padding: 10px 20px;
                background-color: #ff4540;
                border-color: #ff4540;
                border-radius: 3px;
                box-shadow: 0 2px 4px 0 rgba(255, 69, 64, 0.33);
                margin: 0;
    
                &.skip-survey {
                    color: #000000;
                    background-color: #f4f4f4;
                    border-color: #f4f4f4;
                    box-shadow: none;
                    margin-bottom: 16px;
                }
                &.preorder-submit
                {
                    margin: 50px 0px 0px 80px;
                }
            }
    
            .stage-one {
                z-index: 1;
            }
    
            .stage-one, .stage-three {
                position: relative;
                display: flex;
                flex-wrap: wrap;
                flex-direction: column;
                align-items: flex-start;
                justify-content: space-between;
                height: 100%;
            }
    
            .stage-one-img {
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                width: 240px;
                height: 240px;
                position: absolute;
                right: 0;
                bottom: 0;
                z-index: -1;
            }
    
            .step-indicator-wrapper {
                display: table;
                width: 58%;
                margin-bottom: 24px;
    
                p {
                    color: #000000;
                    font-size: 16px;
                    font-weight: 500;
                    line-height: 1;
                    letter-spacing: 0.16px;
                    margin-bottom: 16px;
    
                }
    
                .step-indicator {
                    width: 100%;
                    display: flex;
                    -webkit-box-pack: justify;
                    justify-content: space-between;
        
                    span {
                        width: 49.2%;
                        height: 5px;
                        background-color: #ffe4e3;
                        border-radius: 1px;
        
                        &.active {
                            background-color: @theme-color;
                        }
                    }
                }
            }
    
            .custom-checkbox-wrapper {
                display: flex;
                flex-wrap: wrap;
                flex-direction: column;
        
                .custom-checkbox {
                    &:not(:last-child) {
                        margin-bottom: 16px;
                    }        
                    input {
                        display: none;
                        
                        &:checked ~ label .radio-btn {
                            border-color: #ff4540;
                            background-color: #ff4540;
                            box-shadow: inset 0 0 0 2px #FFFFFF;
                        }
                    }
            
                    label {
                        color: rgba(0, 0, 0, .8);
                        position: relative;
                        width: 100%;
                        font-size: 15px;
                        font-weight: normal;
                        line-height: 1.2;
                        letter-spacing: 0.15px;
                        padding-left: 24px;
                        margin: 0;
                        cursor: pointer;
                    }
            
                    .radio-btn {
                        font-style: normal;
                        position: absolute;
                        top: 0;
                        left: 0;
                        display: inline-block;
                        width: 16px;
                        height: 16px;
                        border: 1px solid #9d9d9d;
                        background-color: #ffffff;
                        border-radius: 100%;
                        transition: background 0.25s linear, border-color 0.25s linear;
                    }
                }
                .stage-1
                {
                    width:65% !important;
                }

            }
    
            .success-message {
                display: flex;
                flex-wrap: wrap;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                height: 100%;
    
                img {
                    display: block;
                    width: 176px;
                    height: 176px;
                    object-fit: cover;
                    margin: 0 auto 32px;
                }
    
                p {
                    color:  rgba(0, 0, 0, 0.8);
                    font-size: 12px;
                    font-weight: normal;
                    line-height: 2.33;
                    letter-spacing: 0.12px;
                    text-align: center;
                    margin-bottom: 24px;
    
                    span {
                        color: #000000;
                        display: block;
                        font-size: 18px;
                        font-weight: 500;
                        line-height: 1.94;
                        letter-spacing: 0.18px;
                        margin-bottom: 8px;
                    }
                }
    
                .btn {
                    color: #FFFFFF;
                    background-color: #ff4540;
                    border-color: #ff4540;
                    border-radius: 3px;
                }
            }
        }
    }
    
    // ANIMATION SLIDE IN RIGHT STARTS
    @keyframes slideInRight {
        0% {
            transform: translateX(10%);
            opacity: 0;
            transition: all 0.5s ease 0s;
        }
        100% {
            transform: translateX(0px);
            opacity: 1;
            transition: all 0s ease 0s;
        }
    }
    // ANIMATION SLIDE IN RIGHT ENDS
}
@tickets-for-customers-color: #081feb;


.tickets-for-customers-wrapper {
    position: fixed;
    top: 90VH;
    right: 0;
    z-index: 10;

    :focus, :active:focus {
        outline: 0 none;
    }
    
    .tickets-for-customers {
        color: #081feb;
        display: flex;
        align-items: center;
        min-height: 8VH;
        padding: 10px 20px 10px 10px;
        background-color: #081feb;
        border-radius: 12px 0 0 12px;
        box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.16);
        transform: translateX(68px);
        transition: all .4s ease;
        cursor: pointer;

        &:before {
            content:'Need Help?';
            color:#ffffff;
            display: contents;
            background: no-repeat center / contain;
            // background-image: url('https://res.cloudinary.com/vajrohq/image/upload/v1608558454/admin_console/misc/sos.svg');
            width: 24px;
            height: 24px;
            margin-right: 8px;
        }

        &:hover {
            transform: translateX(0);
            span {
                opacity: 1;
            }
        }

        span {
            min-width: 54px;
            display: inline-block;
            font-size: 12px;
            font-weight: 500;
            line-height: 1;
            letter-spacing: normal;
            opacity: 0;
            transition: opacity .3s linear;
        }
    }

    .tickets-for-customers-model-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 10;
        display: none;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: opacity 100ms, visibility 100ms;
        transition: opacity 100ms, visibility 100ms;

        &.in {
            display: block;
            opacity: 1;
            visibility: visible;
            animation: fadeIn .1s ease-in-out;
        }
    }

    .tickets-for-customers-model {
        width: 464px;
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.16);
        position: inherit;
        top: 8VH;
        right: 0px;
        z-index: 11;
        display: none;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: opacity 100ms, visibility 100ms;
        transition: opacity 100ms, visibility 100ms;

        &.in {
            display: block;
            opacity: 1;
            visibility: visible;
            animation: fadeIn .1s ease-in-out;
        }

        .tickets-for-customers-model-header {
            position: relative;
            color: #ffffff;
            padding: 20px 56px 20px 24px;
            font-size: 22px;
            font-weight: normal;
            line-height: 1;
            background-color: @tickets-for-customers-color;
            border-radius: 8px 8px 0 0;
            min-height: 64px;

            i {
                font-size: 20px;
                position: absolute;
                top: 20px;
                right: 20px;
                cursor: pointer;
            }
        }

        .tickets-for-customers-model-body {
            padding: 20px 20px 24px;

            .form-control {
                color: rgba(0, 0, 0, 0.8);
                padding: 20px;
                background-color: #f7f7f7;
                border: 1px solid #eaeaea;
                border-radius: 5px;
                font-size: 16px;
                line-height: 0.88;
                font-weight: normal;
                box-shadow: none;
                resize: none;
                margin-bottom: 20px;

                &::placeholder {
                    color: rgba(0, 0, 0, 0.8);
                }

                &:focus {
                    border-color: rgba(0, 0, 0, 0.1);
                    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.08);
                }
                select {
                    padding:0px 20px;
                }
            }

            

            .btn-wrapper {
                .btn {
                    font-size: 16px;
                    font-weight: 500;
                    line-height: 0.88;
                    color: #ffffff;
                    background-color: @tickets-for-customers-color;
                    border-color: @tickets-for-customers-color;
                    padding: 10px 32px;
                    border-radius: 8px;
                    margin: 0;

                    &:active {
                        box-shadow: none;
                    }

                    &:hover {
                        background-color: darken(@tickets-for-customers-color, 10%);
                        border-color: darken(@tickets-for-customers-color, 10%);
                    }

                    &.btn-outline {
                        border-color: @tickets-for-customers-color;
                        background-color: #ffffff;
                        color: @tickets-for-customers-color;

                        &:hover {
                            background-color: darken(#ffffff, 10%);
                        }
                        &.upload-btn
                        {
                            padding: 6px 8px;
                        }
                    }

                    &:not(:last-child) {
                        margin-right: 8px;
                    }
                }
            }
        }

        &.send-escalate-query {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            .tickets-for-customers-model-body {
                text-align: center;
                padding: 56px 56px 32px;

                .circle-tick-mark {
                    color: #FFFFFF;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 80px;
                    height: 80px;
                    border-radius: 50%;
                    background-image: linear-gradient(to bottom, #4de2ba, #29c1c7);
                    margin: 0 auto 24px;

                    i {
                        font-size: 34px;
                    }
                }

                p {
                    font-size: 18px;
                    font-weight: 500;
                    line-height: 1.4;
                    margin-bottom: 80px;
                }
    
                .btn {
                    color: #FFFFFF;
                    background-color: #000000;
                    border-color: #000000;

                    &:hover {
                        background-color: lighten(#000000, 10%);
                        border-color: lighten(#000000, 10%);
                    }
                }
            }
        }
    }
}
.top-alert-bar {
  color: rgba(255, 255, 255, 0.6);
  background-color: rgba(44, 47, 66, 0.9);
  padding: 12px 16px;
  width: 100%;
  min-height: 64px;
  text-align: left;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  top: -72px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  border-radius: 0;
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.2);
  z-index: 3;

  @media (min-width: 768px) {
    width: auto;
    top: -72px;
    text-align: center;
    border-radius: 8px;
  }

  &.slide-up {
    visibility: hidden;
  }

  .top-alert-content {
    display: flex;
    align-items: center;

    p {
      margin: 0 24px 0 0;
    }

    .btn {
      border-radius: 3px;
      background-color: #49ce9d;
      border-color: #49ce9d;
    }
  }
}
@media (max-width: 767px) {
  .announcement-bar{
    color:white;
    font-size: 13px;
  }
  .top-alert-bar {
    &.slide-up {
      opacity: 1;
      visibility: visible;
      top: 61px;
    }
  }
  // .bg_blue {
  //   background-color: #1a7fb9 !important;
  // }
  // .bg_orange {
  //   background-color: #d9651c !important;
  // }
  // .bg_red {
  //   background-color: #e84238 !important;
  // }
}

.top-navigation-bar {
    position: fixed;
    top: 88px;
    right: 16px;
    left: 312px;
    background-color: #FFFFFF;
    box-shadow: 0 1px 0 0 #dedede;
    z-index: 9;
    border-radius: 4px;

    ul {
        display: flex;
        align-items: center;
        padding: 0 24px;
        list-style: none;
        margin: 0;
        
        li {
            position: relative;
            padding: 14px 0;
            font-size: 14px;
            letter-spacing: 0.28px;
            color: #000000;
            outline: 0 none;
            min-height: 48px;
            cursor: pointer;

            &:not(:last-child) {
                margin-right: 16px;
            }

            &:after {
                content: '';
                background-color: #ff4540;
                height: 2px;
                width: 0;
                position: absolute;
                left: 0;
                bottom: -1px;
                transition: all .4s ease;
            }

            &.active {
                color: #ff4540;
                
                &:after {
                    width: 100%;
                }
            }

            span.pro-badge {
                display: inline-block;
                color: #ffffff;
                font-size: 12px;
                font-weight: bold;
                line-height: 20px;
                letter-spacing: 0.24px;
                background-color: #ff7d2c;
                border-radius: 5px;
                margin-left: 6px;
                min-width: 40px;
                min-height: 20px;
                text-align: center;
                vertical-align: middle;
            }
        }
    }
}

.admin-container-top-bar {
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 4px;
    min-height: 40px;
    ul {
        li {
            outline: 0 none;
            white-space: nowrap;
            margin-right: 16px !important;
        }
    }
}
.customize-content-translation-editor
{
    color: #000000;
    padding: 75px 12px;
    margin-top: -48px;

.translation-editor-row
{
    padding-top: 75px;
}
.translation-editor-wrapper {
    padding: 20px 10px;
    border-radius: 2px;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
    background-color: #FFFFFF;
    height: 500px;
    overflow: scroll;

    .translation-editor-tab {
        position: relative;
        display: block;
        color: #000000;
        padding: 12px 40px 12px 16px;
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: 0.28px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition: all .6s ease;
        cursor: pointer;

        &:not(:last-child) {
            margin-bottom: 8px;
        }

        &:after {
            content: "\e907";
            font-family: "vajro-icon";
            position: absolute;
            top: 50%;
            margin-top: -6px;
            right: 16px;
            font-size: 12px;
            line-height: 1;
        }

        &:hover {
            background-color: #fafafa;
        }

        &.active {
            color: #ffffff;
            background-color: #000000;
        }
    }
}


li{
    .page-name{

        &:after {
            content: "\e91b";
            font-family: "vajro-icon";
            position: absolute;
            top: 20%;
            margin-top: 0px;
            right: 16px;
            font-size: 10px;
            line-height: 1;
        }
    }
  
}

}
.main-content {
    padding-top: 88px ;
    }

.row-eq-hgt {
    display: -ms-flex;
    display: flex;
    flex-wrap: wrap;
    
    [class*=col-] {
        display: -ms-flex;
        display: flex;
    }
}

.justify-center {
    justify-content: center;
}

// SPACER
@spacer: 8px;

// BOTTOM MARGIN SPACERS
.mb-8 {
    margin-bottom: @spacer;
}

.mb-16 {
    margin-bottom: floor(@spacer * 2);
}

.mb-24 {
    margin-bottom: floor(@spacer * 3);
}

.mb-32 {
    margin-bottom: floor(@spacer * 4);
}

.mb-40 {
    margin-bottom: floor(@spacer * 5);
}

.mb-48 {
    margin-bottom: floor(@spacer * 6);
}

// TOP MARGIN SPACERS
.mt-8 {
    margin-top: @spacer;
}

.mt-16 {
    margin-top: floor(@spacer * 2);
}

.mt-24 {
    margin-top: floor(@spacer * 3);
}

.mt-32 {
    margin-top: floor(@spacer * 4);
}

.mt-40 {
    margin-top: floor(@spacer * 5);
}

.admin-only-text {
    display: table;
    color: #ff4540;
    margin-bottom: 8px;
}

.select-wrapper {
    position: relative;

    .form-control {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        appearance: none;
        background-color: #FFFFFF;
        padding-right: 40px;
    }

    &.cc-dropdown {
        &:after{
            top: 71% !important;
        }
    }

    &:after {
        content: "\e91b";
        font-family: "vajro-icon";
        position: absolute;
        top: 55%;
        margin-top: -5px;
        right: 16px;
        font-size: 10px;
        line-height: 1;
    }
}

// Faq sec css starts
.panel-group {
    .panel {
        border: none;
        box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
        background-color: #fafafa;
        margin-bottom: 16px;

        .panel-heading {
            font-size: 16px;
            font-weight: 500;
            line-height: 1.25;
            padding: 24px;
            outline: 0 none;
            position: relative;

            &.collapsed:after {
                transform: rotate(90deg);
            }

            &:after {
                content: '\e907';
                font-family: 'vajro-icon';
                font-size: 14px;
                line-height: 1;
                position: absolute;
                top: 50%;
                right: 24px;
                margin-top: -7px;
                transform: rotate(-90deg);
                transition: all .4s ease;
            }
        }

        .panel-body {
            color: rgba(0, 0, 0, .8);
            font-size: 16px;
            line-height: 1.5;
            padding: 0 24px 24px;
        }
    }
}
// Faq sec css ends

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fixed-preview-iphone {
    position: fixed;
    top: auto;
    right: 0;
}

.control-label {
    color: #000000;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.32px;
    margin-bottom: 8px;

    b {
        color: #dbdbdb;
        font-weight: normal;
    }
}

.input-custom-search {
    position: relative;

    .vajro-close, .vajro-chevron-down {
        font-size: 10px;
        position: absolute;
        top: 50%;
        margin-top: -5px;
        right: 16px;
        line-height: 1;
    }

    .vajro-calendar {
        color: #9d9d9d;
        font-size: 16px;
        position: absolute;
        top: 50%;
        margin-top: -8px;
        right: 12px;
        line-height: 1;
    }

    .vajro-close {
        cursor: pointer;
    }
    
    .form-control {
        display: inline-block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 40px;

        &::placeholder {
            color: #adadad;
        }

        &.ng-empty {
            border-color: #ff4540;
        }
    }

    &.searchmenu-open {
        .search-menu {
            display: block;
            top: 100% !important;
            left: auto !important;
            right: auto !important;
            visibility: visible !important;
        }
    }

    .search-menu {
        display: none;
        position: absolute;
        top: 100%;
        width: 100%;
        height: 160px;
        font-size: 12px;
        line-height: 1.75;
        letter-spacing: 0.24px;
        margin-top: 8px;
        background-color: #FFFFFF;
        border-radius: 2px;
        box-sizing: border-box;
        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
        z-index: 1;
        overflow: hidden;
        overflow-y: scroll;
        
        span {
            color: #000000;
            display: block;
            padding: 12px 20px;
            transition: background-color .4s;
            cursor: pointer;

            &:hover {
                background-color: #fafafa;
            }
        }

        .no-result {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 160px;
        }
    }
}

// NEW DASHBOADR TABLE CSS STARTS
.dashboard-table {
    display: table;
    border-collapse: collapse;
    width: 100%;

    .tbl-row {
        display: table-row;
        background-color: #ffffff;
        border: solid #dbdbdb;
        border-width: 0 1px 0 1px;
        
        &.header {
            background-color: #fafafa;
            border: none;
            border-bottom: 1px solid #dbdbdb;

            .tbl-cell {
                font-size: 14px;
                font-weight: 500;
                line-height: 1;
                letter-spacing: 0.28px;
                padding: 9px;
            }
        }

        &:last-child {
            border-bottom: 1px solid #dbdbdb;
        }

        .tbl-cell {
            color: #000000;
            font-size: 12px;
            font-weight: normal;
            line-height: 1;
            letter-spacing: 0.24px;
            padding: 12px;
            display: table-cell;
            vertical-align: middle;
            text-align: center;

            .dropdown {
                display: inline-block;
                &.open {
                    .btn i {
                        transform: scale(-1);
                    }
                }

                .btn {
                    color: #000000;         
                    font-size: 12px;
                    font-weight: 500;
                    line-height: 1;
                    letter-spacing: 0.24px;
                    border-radius: 20px;
                    background-color: #f4f4f4;
                    border-color: #f4f4f4;
                    padding: 9px 16px;
                    margin: 0;
    
                    &:active {
                        box-shadow: none;
                    }
    
                    i {
                        display: inline-block;
                        font-size: 9px;
                        vertical-align: middle;
                        margin-left: 8px;
                    }
                }
    
                .dropdown-menu {
                    min-width: 168px;
                    left: auto;
                    right: 0;
                    border-radius: 2px;
                    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
                    padding: 0;
                    margin: 4px 0 0;
            
    
                    .menu-item {
                        display: flex;
                        align-items: center;
                        color: #000000;
                        font-size: 12px;
                        line-height: 1.75;
                        padding: 6px 16px;
                        cursor: pointer;

                        &.disabled {
                            color: rgba(0, 0, 0, .2);
                            cursor: not-allowed;

                            .switch-outer {
                                pointer-events: none;
                                
                                .switch .slider {
                                    background: rgba(0, 0, 0, 0.2);
                                }
                            }
                        }
    
                        &:hover {
                            background-color: #eaeaea;
                        }
    
                        i {
                            font-size: 16px;
                            vertical-align: -1px;
                            margin-right: 8px;
                        }

                        .switch-outer {
                            display: flex;
                            margin-left: auto;

                            .switch {
                                width: 24px;
                                height: 14px;
                                margin-bottom: 0;

                                input:checked + .slider {
                                    background: #40d08b;
    
                                    &:before {
                                        transform: translateX(10);
                                        -webkit-transform: translateX(10px);
                                        -ms-transform: translateX(10px);
                                    }
                                }
    
                                .slider {
                                    background: #000000;
    
                                    &:before {
                                        width: 8px;
                                        height: 8px;
                                        top: 50%;
                                        margin-top: -4px;
                                        left: 3px;
                                        background-color: #FFFFFF;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            
            .pill-with-square {
                color: #000000;
                display: inline-block;
                font-size: 12px;
                font-weight: normal;
                line-height: 1;
                letter-spacing: 0.24px;
                text-transform: capitalize;

                .square {
                    display: inline-block;
                    font-style: normal;
                    width: 8px;
                    height: 8px;
                    border-radius: 2px;
                    background-color: #000000;
                    margin-right: 4px;
                }

                &.pending .square{
                    background-color: #ffb146;
                }
                &.completed .square{
                    background-color: #26bf8c;
                }
                &.live .square{
                    background-color: #ff4540;
                }
                &.cancelled .square{
                    background-color: #901616;
                }
            }
        }
    }
}

.tbl-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    margin-bottom: 16px;

    span {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2px;
        min-width: 24px;
        min-height: 24px;
        font-size: 12px;
        font-weight: normal;
        line-height: 1.5;
        letter-spacing: 0.12px;
        color: #000000;
        background-color: #ffffff;
        border-radius: 2px;
        border: 1px solid #dbdbdb;
        cursor: pointer;

        &:not(:last-child) {
            margin-right: 5px;
        }

        &.active {
            color: #ffffff;
            background-color: #000000;
            border-color: #000000;
        }

        &.no-border {
            border: none;
        }

        .left-arrow {
            transform: scale(-1);
        }
    }
}
// NEW DASHBOADR TABLE CSS ENDS

// switch css starts
.switch-outer {  
    justify-content: unset !important;
    .slider-txt {
        font-size: 12px;
        line-height: 1;
        letter-spacing: 0.24px;
        color: ~"rgb(0 0 0 / .8)";
        margin-right: 16px;
        vertical-align: middle;
    }
    
    .switch {
        position: relative;
        display: inline-block;
        width: 34px;
        height: 20px;
        margin-bottom: 0;
  
        input {
            display: none;
    
            &:checked + .slider {
                background-color: #40d08b;
                box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
    
                &:before {
                    -webkit-transform: translateX(16px);
                    -ms-transform: translateX(16px);
                    transform: translateX(16px);
                    background-color: #ffffff;
                }
            }
        }
  
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #889198;
            transition: 0.4s;
            -webkit-transition: 0.4s;
    
            &:before {
                content: "";
                height: 13px;
                width: 13px;
                position: absolute;
                top: 50%;
                margin-top: -7px;
                left: 3px;
                background-color: white;
                transition: 0.4s;
                -webkit-transition: 0.4s;
            }

            /* Rounded sliders */
            &.round {
                border-radius: 34px;
            }
    
            &.round:before {
                border-radius: 50%;
            }
        }
    }   
}
// switch css ends

// countdown timer css starts
.countdown-timer-wrapper {
    &.small {
        .countdown-timer {
            padding: 12px;
            background-color: transparent;
            border-radius: 0px;
            border: none;
            margin-bottom: 0;
    
            .timer-part-wrapper {
                font-size: 6px;
                font-weight: 500;
                line-height: 1.33;
                letter-spacing: 0px;
    
                &:not(:last-child) {
                    padding-right: 8px;

                    &:after {
                        font-size: 9px;
                        top: 6px;
                        right: 3px;
                    }
                }
    
                .timer-part {
                    margin-bottom: 6px;
    
                    span {
                        min-width: 20px;
                        max-width: 20px;
                        min-height: 24px;
                        padding: 0;
                        font-size: 11px;
                        font-weight: 500;
                        line-height: 1.27;
                        letter-spacing: 0px;
    
                        &:first-child {
                            margin-right: 2px;
                        }
                    }
                }
            } 
        }

        .countdown-banner-image {
            figure {
                height: 56px;
            }
        }
    }

    .preview-title {
        color: #000000;
        font-size: 8px;
        font-weight: bold;
        line-height: 1.25;
        letter-spacing: 0px;
        text-align: center;
        margin-bottom: 4px;
    }

    .countdown-timer {
        display: flex;
        justify-content: center;
        padding: 20px 0;
        background-color: #fafafa;
        border-radius: 3px;
        margin-bottom: 24px;

        &.countdown-start {
            .timer-part-wrapper {
                &:not(:last-child) {
                    .timer-part:after {
                        color: #000000;
                    }
                }

                .timer-part {
                    span {
                        color: #FFFFFF;
                        background-color: #000000;
                    }
                }
            }
        }

        .timer-part-wrapper {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            align-items: center;
            font-size: 8px;
            font-weight: 500;
            line-height: 1.25;
            letter-spacing: 0px;
            color: #000000;

            &:not(:last-child) {
                padding-right: 16px;

                &:after {
                    content: ":";
                    display: inline-block;
                    color: #9d9d9d;
                    font-size: 20px;
                    font-weight: 400;
                    font-family: sans-serif;
                    line-height: 1;
                    position: absolute;
                    top: 10px;
                    right: 5px;
                }
            }

            .timer-part {
                display: flex;
                align-items: center;
                margin-bottom: 8px;

                span {
                    min-width: 32px;
                    max-width: 32px;
                    min-height: 42px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #adadad;
                    font-size: 24px;
                    font-weight: 500;
                    line-height: 1.25;
                    letter-spacing: 0.01px;
                    border-radius: 3px;
                    background-color: #f4f4f4;
                    transition: all .4s ease;

                    &:first-child {
                        margin-right: 4px;
                    }
                }
            }
        }
    }

    .countdown-banner-image {
        .title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;

            span {
                color: #000000;
                font-size: 12px;
                line-height: 0.83;
                letter-spacing: 0.24px;
            }

            i {
                color: #9d9d9d;
                font-size: 16px;
                cursor: pointer;
            
            }
        }

        figure {
            width: 100%;
            height: 136px;
            border-radius: 3px;
            margin: 0;
        }
    }

    .countdown-edit-menu {
        color: #9d9d9d;
        font-size: 16px;
        position: absolute;
        top: 19px;
        right: 48px;
        cursor: pointer;
    }
}
.coundown-timer-question-mark{
    color: #9d9d9d;
    margin-left:5px;
}

// countdown timer css ends

// PILLS & TAGS CSS STARTS
.pill {
    display: inline-block;
    text-align: center;
    padding: 4px 12px;
    color: #ffffff;
    background-color: #49ce9d;
    font-size: 12px;
    letter-spacing: normal;
    line-height: 1.2;
    font-style: normal;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    letter-spacing: -0.23px;

    &.square {
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }
}

.pill-outline {
    color: #f85baa;
    display: inline-block;
    text-align: center;
    padding: 4px 8px;
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 0.24px;
    border: 1px solid;
    border-color: #f85baa;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

.char-counter-widget {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.4);
    position: absolute;
    right: 5px;
    top: 62%;
}

// Back Navigation bar css starts
.back-navigation-bar {
    position: fixed;
    top: 88px;
    left: 312px;
    right: 16px;
    min-height: 48px;
    background-color: #ffffff;
    border: 1px solid #dedede;
    align-items: center;
    padding: 12px 24px;
    z-index: 9;

    .back-arrow {
      color: #000000;
      font-size: 14px;
      font-weight: normal;
      line-height: 0.86;
      letter-spacing: 0.28px;
      cursor: pointer;

      i {
        display: inline-block;
        transform: scaleX(-1);
        font-size: 16px;
        vertical-align: -2px;
        margin-right: 2px;
      }
    }
}

.live-home-delete{
    color: #ff4540;
    padding-left:20px;
}
.translate-link{
    padding-left: 10px;
    }
// Back Navigation bar css ends

.hideIntercom{
    .intercom-lightweight-app-launcher{
        display:none !important
    }
    .intercom-dfosxs{
        display:none !important
    }
}
.border-radius (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

.animation (@name, @duration: 300ms, @delay: 0, @ease: ease) {
    -webkit-animation: @name @duration @delay @ease;
    -moz-animation: @name @duration @delay @ease;
    -ms-animation: @name @duration @delay @ease;
}

.animation-iteration-count(@iteration-count) {
    -webkit-animation-iteration-count: @iteration-count;
    animation-iteration-count: @iteration-count;
}

.keyframes(@name,@rules) {
    @-webkit-keyframes @name {
      @rules();
    }
    @-moz-keyframes @name {
      @rules();
    }
    @-ms-keyframes @name {
      @rules();
    }
    @-o-keyframes @name {
      @rules();
    }
    @keyframes @name {
      @rules();
    }
}

// HIGHLIGHT CIRCLE ANIMATION
.circle-pulsate(@anim-name, @shadow-color, @shadow-val) {
    .keyframes(
      @anim-name,
      {0% {.box-shadow(0 0 0 0 @shadow-color) ;} 70% {.box-shadow(
          0 0 0 @shadow-val transparent
        )
        ;} 100%{.box-shadow(0 0 0 0 transparent) ;}}
    );
    .animation(@anim-name 2s);
    .animation-iteration-count(infinite);
}
@vajro_bg: #f3f3f3;
@button-bg: #ff4747;
@button-dark-bg: #e4413d;
@header-bg: #37465E;
@gray-bg: #808080;
@dark-gray: #505051;
@dark-blue: #0d47a1;
@dark-deep-blue: #222b3a;
@card-green: #11a562;
@light-green: #2bb94f;
@thin-gray: #7b7b7b;
@gray-light: #c5c5c5;
@shopify-bg: #616fc6;
@shopify-cta-color: #616fc6;
@shopify-dark-bg: #5c65aa;
@shopify-purple: #50248F;
@shopify-purple-dark: #230051;
@badge-bg: #FF9400;
@light-gray: #cccccc;
@gray-text: #e7e7e7;
@blue-gray: #7788cc;
@primary-text-color: #333333;
@secondary-text-color: #333333;
@inactive-btn-color: #cccccc;
@inactive-btn-hover-color: #aaaaaa;

@pro-badge-bg: #FF9400;

/* SideBar */
@side-menu-bg: #1F252F;
@side-menu-hover-bg: #111419;
@side-bar-width: 8.333vw;
@side-bar-item-active-text-color: #dfdfdf;
@side-bar-item-inactive-text-color: #838383;
@side-bar-item-inactive-img-filter: hue-rotate(0) saturate(0%) brightness(51%);

/* Topbar */
@main-content-width: calc(100vw - @side-bar-width);
@topbar-height: 70px;
@topbar-tab-height: 33px;
@announcement-bar-height: 40px;

/* Mobile App Preview Width */
@mobile-app-preview-width: 260px;
/* Contents */

@triangle: "\e072";
@arrow-right: "\00bb";


/* Custom Mixins */
.abs-position(@top; @right; @bottom: inherit; @left: inherit; @z-index: inherit) {
    position: absolute;
    top: @top;
    right: @right;
    bottom: @bottom;
    left: @left;
    z-index: @z-index;
}


// /* new dashboard variables  start */
// @theme-color:#f62468;

// /* new dashboard variables  end */
.announcement-bar-open {
    // .walldrop-main-container, .initial-screen {
    //     height: ~"calc(100vh - 112px)" !important;
    // }
    // .walldrop-list, .facebook-not-login, .walldrop-modal {
    //     height: ~"calc(100vh - 190px)" !important;
    // }
    // .selectFBOption {
    //     height: ~"calc(100vh - 208px)" !important;
    // }
    // .list-of-walldrop-products-body {
    //     height: ~"calc(100vh - 315px)" !important;
    // }
}

.walldrop-main-container {
    color: #000000;
    margin-top: -48px;
    position: relative;
    height: ~"calc(100vh - 72px)";

    // common css starts
    :focus, :active:focus {
        outline: 0 none;
    }

    button, html, input, select, textarea {
        font-family: @vajro-font !important;
    }

    .btn {
        font-size: 14px;
        font-weight: bold;
        line-height: 1.2;
        letter-spacing: 0.28px;
        padding: 10px 24px;
        border-radius: 3px;
        margin: 0;
        outline: 0 none;
        
        &.btn-outline {
            color: #000000;
            border-color: #000000;
            background-color: #FFFFFF;
        }

        &.black-btn {
            color: #FFFFFF;
            background-color: #000000;
            border-color: #000000;
        }
    }

    .live-product-row {
        cursor: pointer;
    }

    .add-walldrop-product-pop-up {
        visibility: hidden;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        z-index: 10;
        background: rgba(0, 0, 0, 0.5);
        width: 100%;
        display: flex;
        &.active {
            visibility: visible;
        }
        .add-walldrop-product-pop-up-card {
            margin: auto;
            position: relative;
            background: #ffffff;
            height: 70%;
            width: 30%;
            border-radius: 4px;
            padding: 24px 16px;
            .close-btn {
                cursor: pointer;
                position: absolute;
                right: 16px;
                top: 16px;
                i {
                    font-size: 18px;
                }
            }
            .input-with-barcode-scanner {
                display: flex;
                width: 100%;
                margin-top: 24px;
                position: relative;
                .disabled-input {
                    cursor: not-allowed;
                    position: absolute;
                    background: rgba(0, 0, 0, 0.1);
                    top: 0;
                    bottom: 0px;
                    right: 0;
                    left: 0;
                    content: "";
                    border-radius: 2px;
                }
                .search-product {
                    border: solid 1px #c9c9c9;
                    // border-radius: 2px 0px 0px 2px;
                    border-radius: 2px;
                    padding: 8px 12px;
                    width: 100%;
                    // border-right: 0px;
                    &:focus-visible {
                        outline: 0px;
                    }
                }
                .barcode-reader-img {
                    display: none;
                    border: solid 1px #c9c9c9;
                    border-radius: 0px 2px 2px 0px;
                    padding: 8px 12px;
                    border-left: 0px;
                }
                .pop-up-option {
                    font-size: 12px;
                    line-height: 1.75;
                    letter-spacing: 0.24px;
                    position: absolute;
                    border-radius: 2px;
                    padding: 8px 12px;
                    top: 40px;
                    right: 0px;
                    left: 0px;
                    height: 160px;
                    background: #fff;
                    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
                    z-index: 1;
                    overflow-y: scroll;
                    -ms-overflow-style: none;
                    scrollbar-width: none;
                    &::-webkit-scrollbar {
                        display: none;
                    }
                    .pop-up-option-no-poduct-list {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: #c9c9c9;
                        height: 100%;
                    }
                    .pop-up-option-poduct-list {
                        cursor: pointer;
                        padding: 8px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        &:hover {
                            background-color: rgba(0, 0, 0, 0.05);
                        }
                    }
                }
            }
            .walldrop-no-product-list {
                position: absolute;
                top: 90px;
                right: 16px;
                bottom: 74px;
                left: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                color: #c9c9c9;
            }
            .walldrop-product-list {
                position: absolute;
                top: 90px;
                right: 16px;
                bottom: 74px;
                left: 16px;
                overflow-y: scroll;
                -ms-overflow-style: none;
                scrollbar-width: none;
                &::-webkit-scrollbar {
                    display: none;
                }
                .import-product-view {
                    position: relative;
                    display: flex;
                    padding: 8px;
                    margin-bottom: 0px;
                    cursor: pointer;
                    justify-content: space-between;
                    &.active {
                        background-color: rgba(0, 0, 0, 0.05);
                    }
                    .vajro-delete {
                        color: #ff4540;
                        font-size: 14px;
                        margin: auto 0px;
                        margin-right: 8px;
                        flex: 1 1 4%;
                        width: 4%;
                    }
                    .import-product-img-title {
                        display: flex;
                        width: 96%;
                        flex: 1 1 96%;
                    }
                    .import-product-img {
                        width: 40px;
                        height: 40px;
                        margin-right: 12px;
                        .product-image {
                            height: 100%;
                            width: 40px;
                            object-fit: scale-down;
                        }
                    }
                    .product-available-variants {
                        width: 70%;
                        .product-title {
                            font-weight: 400;
                            font-size: 12px;
                            margin-bottom: 8px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            height: 16px;
                        }
                        .available-variants {
                            display: flex;
                            font-weight: 400;
                            font-size: 10px;
                            color: #363636;
                            .available {
                                margin-right: 8px;
                            }
                            .variants {
                                color: #ff8f3c;
                            }
                        }
                    }
                }
            }
            .import-product-btn {
                position: absolute;
                bottom: 0px;
                padding: 0px 40px 24px;
                right: 0px;
                left: 0px;
                background: #ffffff;
                .add-walldrop-product-btn {
                    cursor: pointer;
                    border: 0px;
                    width: 100%;
                    border-radius: 2px;
                    background-color: #21c693;
                    padding-top: 10px;
                    padding-bottom: 10px;
                    font-size: 14px;
                    color: #ffffff;
                    &.disabled {
                        background-color: #dbdbdb;
                        color: rgba(0, 0, 0, 0.65);
                        cursor: not-allowed;
                    }
                }
            }
        }
    }

    .walldrop-live-list {
        .row>div {
            margin-bottom: 0px;
        }
        position: relative;
        width: 100%;
        padding: 24px 120px 24px 24px;
        .walldrop-list {
            padding: 24px 32px 32px 24px;
            background-color: #ffffff;
            border-radius: 3px;
            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
            position: relative;
            height: ~"calc(100vh - 120px)";
        }
        .add-product-search {
            display: flex;
            justify-content: flex-end;
            background: #ffffff;
            padding-bottom: 20px;
            position: sticky;
            top: 0px;
            z-index: 9;
            .walldrop-add-product-btn {
                display: flex;
                justify-content: center;
                align-items: center;
            }
            span {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 2px;
                min-width: 24px;
                min-height: 24px;
                font-size: 12px;
                font-weight: normal;
                line-height: 1.5;
                letter-spacing: 0.12px;
                color: #000000;
                background-color: #ffffff;
                border-radius: 2px;
                border: 1px solid #dbdbdb;
                cursor: pointer;
                margin: auto 0;
                
                &:not(:last-child) {
                    margin-left: 8px;
                    margin-right: 5px;
                }

                .left-arrow {
                    transform: scale(-1);
                }
            }
        }
        .list-of-walldrop-products {
            position: relative;
            .list-of-walldrop-products-head {
                height: 45px;
                background-color: #f8f8f8;
                border-bottom: 1px solid #e1dfea;
                position: sticky;
                top: 60px;
                z-index: 9;
                .walldrop-products-header {
                    height: 45px;
                    display: flex;
                }
                .walldrop-products-header-title {
                    font-size: 14px;
                    margin: auto;
                    margin-left: 0px;
                }
                .d-flex {
                    display: flex;
                    justify-content: space-between;
                    margin: auto;
                    width: 100%;
                    position: relative;
                    img  {
                        cursor: pointer;
                        margin: auto;
                        margin-right: 0px;
                    }
                    .option {
                        visibility: hidden;
                        cursor: pointer;
                        width: 120px;
                        position: absolute;
                        background: #ffffff;
                        right: 16px;
                        top: 8px;
                        border-radius: 4px;
                        padding: 8px;
                        font-size: 12px;
                        text-align: center;
                        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
                        z-index: 1;
                        &:hover {
                            background-color: #f4f4f4;
                        }
                    }
                }
            }
            .list-of-walldrop-products-body {
                overflow-y: scroll;
                height: ~"calc(100vh - 275px)";
                -ms-overflow-style: none;
                scrollbar-width: none;
                &::-webkit-scrollbar {
                    display: none;
                }
                .row {
                    height: 64px;
                    background-color: #ffffff;
                    border-bottom: 1px solid #e1dfea;
                }
                .walldrop-products-body {
                    height: 64px;
                    display: flex;
                    font-size: 12px;
                    .margin-auto {
                        margin: auto;
                    }
                    .walldrop-products-id {
                        margin-left: 0px;
                    }
                    .walldrop-products-image {
                        width: 48px;
                        height: 48px;
                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: scale-down;
                        }
                    }
                    .walldrop-products-product-title {
                        margin-left: 0px;
                        .title {
                            padding-bottom: 4px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                        .variant-list {
                            cursor: pointer;
                            color: rgba(0, 0, 0, 0.4);
                        }
                    }
                    .walldrop-products-posted-date {
                        display: flex;
                        justify-content: space-between;
                        margin: auto;
                        width: 100%;
                        position: relative;
                        img {
                            cursor: pointer;
                            margin: auto;
                            margin-right: 0px;
                        }
                        .option {
                            visibility: hidden;
                            cursor: pointer;
                            width: 120px;
                            position: absolute;
                            background: #ffffff;
                            right: 16px;
                            top: 8px;
                            border-radius: 4px;
                            font-size: 10px;
                            text-align: center;
                            z-index: 1;
                            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
                            div, a {
                                color: #000000;
                                padding: 8px;
                                border-radius: 4px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                &:hover {
                                    text-decoration: none;
                                    background-color: #f4f4f4;
                                }
                            }
                            &.active {
                                visibility: visible;
                            }
                        }
                    }
                }
            }
            input[type=checkbox] {
                height: 20px;
                width: 20px;
                margin: auto;
                margin-left: 0px;
                border: 1.5px solid #acacac;
                border-radius: 2.3px;
            }
        }
    }

    .walldrop-add-product-btn {
        color: #FFFFFF;
        background-color: #000000;
        border: 0px;
        font-size: 12px;
        font-weight: bold;
        line-height: 1.2;
        letter-spacing: 0.28px;
        padding: 10px 18px;
        border-radius: 4px;
        outline: 0 none;
    }

    // common css ends
    
    .initial-screen {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: ~"calc(100vh - 72px)";

        img {
            width: 176px;
            height: 216px;
            object-fit: cover;
            margin: 0 auto 32px;
        }
    
        .black-btn {
            margin: 0 0 8px;
        }
    
        p {
            max-width: 392px;
            text-align: center;
            font-size: 12px;
            font-weight: normal;
            line-height: 1.5;
            letter-spacing: 0.12px;
            margin-bottom: 0;
        }
    }
}

.walldrop-setup {
    position: relative;
    width: 100%;
    padding: 24px 120px 24px 24px;

    :focus, :active:focus {
        outline: 0 none;
    }

    button, html, input, select, textarea {
        font-family: @vajro-font !important;
    }

    .facebook-overlay {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }
    .loginBtn {
        box-sizing: border-box;
        position: relative;
        margin: 0.2em;
        padding: 0 15px 0 46px;
        border: none;
        text-align: left;
        line-height: 34px;
        white-space: nowrap;
        border-radius: 0.2em;
        font-size: 16px;
        color: #FFF;
    }
    .loginBtn:before {
        content: "";
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 0;
        width: 34px;
        height: 100%;
    }
    .loginBtn:focus {
        outline: none;
    }
    .loginBtn:active {
        box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
    }
    .loginBtn--facebook {
        background-color: #4C69BA;
        background-image: linear-gradient(#4C69BA, #3B55A0);
        text-shadow: 0 -1px 0 #354C8C;
    }
    .loginBtn--facebook:before {
        border-right: #364e92 1px solid;
        background: url('/img/web_app/live_video/facebook.svg') 10px 5px no-repeat;
    }
    .loginBtn--facebook:hover, .loginBtn--facebook:focus {
        background-color: #5B7BD5;
        background-image: linear-gradient(#5B7BD5, #4864B1);
    }

    .facebook-not-login {
        position: absolute;
        top: 0px;
        bottom: 0px;
        right: 0px;
        left: 0px;
        width: 100%;
        height: ~"calc(100vh - 120px)";
        z-index: 999;
        background: rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        &.inactive {
            display: none;
        }
        .facebook-login-card {
            position: relative;
            width: 350px;
            height: 60%;
            background-color: #fff;
            border-radius: 4px;
            padding: 32px;
            .facebook-login-main-content {
                text-align: center;
                position: absolute;
                top: 0px;
                right: 0px;
                left: 0px;
                bottom: 76px;
                padding: 32px;
                padding-bottom: 0px;
                overflow-y: scroll;
                -ms-overflow-style: none;
                scrollbar-width: none;
                &::-webkit-scrollbar {
                    display: none;
                }
                .fb-login-header {
                    font-size: 14px;
                    margin-bottom: 12px;
                }
                .fb-login-body {
                    font-size: 12px;
                }
                .icon {
                    width: 64px;
                    height: 64px;
                    background-color: #000;
                    margin: auto;
                    margin-bottom: 8px;
                    border-radius: 100%;
                    .walldrops-icon {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 32px;
                        color: #fff;
                        width: 64px;
                        height: 64px;
                    }
                }
            }
            .facebook-login-btn {
                position: absolute;
                bottom: 0px;
                right: 0px;
                left: 0px;
                padding: 8px 32px 24px;
                background-color: #fff;
                border-radius: 4px;
                button {
                    padding: 8px;
                    background-color: #5890ff;
                    border-radius: 2px;
                    border: 0px;
                    color: #fff;
                    font-size: 14px;
                    width: 100%;
                }
            }
        } 
    }
    .facebook-preview-text-log-out {
        position: sticky;
        top: 0px;
        z-index: 1;
        section {
            position: absolute;
            top: -24px;
            background: #ffffff;
            right: 0px;
            left: 0px;
            display: flex;
            padding-top: 24px;
            padding-bottom: 8px;
            justify-content: space-between;
            align-items: center;
        }
        button {
            display: none;
            margin: 0px;
            font-size: 12px;
            line-height: 30px;
            padding: 0 8px 0 40px;
        }
    }
    .walldrop-after-fb-setup {
        border-radius: 3px;
        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
        background: #ffffff;
        width: 100%;
        position: relative;
        .selectFBOption {
            padding: 24px 32px 32px 24px;
            padding-bottom: 71px;
            height:  ~"calc(100vh - 168px)";
            overflow-y: scroll;
            -ms-overflow-style: none;
            scrollbar-width: none;
            input, select, textarea {
                font-family: @vajro-font !important;
            }
            &::-webkit-scrollbar {
                display: none;
            }
            .title {
                font-size: 12px;
                margin-bottom: 8px;
            }
            .select-fb-option {
                margin-bottom: 24px;
            }
            .select-drop-down {
                .select-facebook-title-option {
                    margin-bottom: 24px;
                }
                .select-facebook-title {
                    font-size: 12px;
                    margin-bottom: 8px;
                }
                .select-option-icon {
                    position: relative;
                    width: 80%;
                    &::before {
                        content: '\f078';
                        font: normal normal normal 12px/1 FontAwesome;
                        color: #000000;
                        right: 12px;
                        height: 100%;
                        padding: 15px 0px;
                        position: absolute;
                        pointer-events: none;
                    }
                    .diableOption {
                        position: absolute;
                        z-index: 0;
                        background: rgba(0, 0, 0, 0.10);
                        content: "";
                        top: 0px;
                        bottom: 0px;
                        right: 0px;
                        left: 0px;
                        border-radius: 4px;
                    }
                    .error-text {
                        color: #ff0000;
                        font-size: 12px;
                        position: absolute;
                    }
                }
                .select-option {
                    appearance: none;
                    width: 100%;
                    border: solid 1px #d9d9d9;
                    background: #ffffffff;
                    border-radius: 4px;
                    padding: 12px 16px;
                    font-size: 12px;
                    &:focus-visible {
                        outline: 0px;
                    }
                }
            }
            .selectFBOption-radio-btn {
                display: flex;
                margin-top: 8px;
            }
            md-radio-button {
                margin-bottom: 0px;
                .md-label {
                    margin-left: 20px;
                    font-size: 12px !important;
                }
                .md-off {
                    border-width: 1px;
                }
                &:first-child {
                    padding-right: 16px;
                }
            }
            md-radio-button .md-off, md-radio-button .md-on, md-radio-button .md-container {
                height: 12px;
                width: 12px;
            }
            md-radio-button.md-default-theme .md-on, md-radio-button .md-on {
                background: #000;
            }

            md-radio-button[disabled].md-checked .md-off, md-radio-button[disabled].md-default-theme .md-off, md-radio-button[disabled] .md-off {
                border-color: rgba(0,0,0,0.38);
            }

            md-radio-button.md-checked .md-off, md-radio-button.md-default-theme .md-off, md-radio-button .md-off {
                border-color: #000;
            }
            .facebook-preview {
                margin: auto;
                font-size: 12px;
                color: #1c1e21;
                line-height: 1.34;
                display: flex;
                flex-direction: column;
                padding: 8px;
                padding-top: 32px;
                .facebook-preview-sticky {
                    border-radius: 8px;
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
                    .facebook-preview-header {
                        padding: 12px 16px 0px;
                        margin-bottom: 12px;
                        display: flex;
                        justify-content: space-between;
                        .fb-user-info {
                            display: flex;
                            img {
                                height: 35px;
                                width: 35px;
                                border-radius: 100%;
                                margin-right: 8px;
                            }
                            .userName-time {
                                cursor: pointer;
                                .time {
                                    color: rgb(101, 103, 107);
                                    .dot {
                                        line-height: 1.2308;
                                    }
                                    img {
                                        width: 12px; 
                                        height: 12px;
                                        margin-right: 0px;
                                    }
                                }
                            }
                        }
                        .more-icon {
                            margin: auto 0px;
                            width: 4%;
                            img {
                                transform: rotate(90deg);
                            }
                        }
                    }
                    .facebook-preview-body {
                        font-size: 12px;
                        color: rgb(5, 5, 5);
                        .facebook-preview-body-content {
                            padding: 4px 16px 16px;
                            line-height: 24px;
                            .walldrop-post-message {
                                white-space: pre-line;
                            }
                            .walldrop-post-message-option {
                                display: block;
                                white-space: inherit;
                                height: 24px;
                                span {
                                    white-space: inherit;
                                }
                            }
                        }
                        .product-image {
                            width: 100%;
                            height: 250px;
                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: scale-down;
                            }
                        }
                    }
                    .comment-seen {
                        .user-comment-seen {
                            margin: 0px 16px;
                            padding: 10px 0px;
                            display: flex;
                            justify-content: flex-end;
                            align-items: center;
                            color: rgb(101, 103, 107);
                            font-size: 0.9375rem;
                        }
                        .like-comment-share {
                            margin: 0px 12px;
                            padding: 4px;
                            .d-flex {
                                display: flex;
                            }
                            .border-top-bottom {
                                cursor: pointer;
                                justify-content: space-around;
                                border-top: 1px solid rgb(101, 103, 107);
                                border-bottom: 1px solid rgb(101, 103, 107);
                            }
                            .fb-like, .fb-comment, .fb-share {
                                height: 44px;
                                justify-content: center;
                                padding: 0px 16px;
                                align-items: center;
                                color: rgb(101, 103, 107);
                                img {
                                    height: 24px;
                                    width: 24px;
                                    padding: 4px;
                                }
                                span {
                                    padding: 4px;
                                }
                            }
                        }
                    }
                    .client-comment-area {
                        display: flex;
                        padding: 4px 16px;
                        font-size: 12px;
                        color: rgb(28, 30, 33);
                        margin-bottom: 4px;
                        img {
                            height: 32px;
                            width: 32px;
                            border-radius: 100%;
                            margin-right: 8px;
                        }
                        input {
                            padding: 8px 12px;
                            width: 100%;
                            border: 0px;
                            border-radius: 18px;
                            color: rgb(28, 30, 33);
                            font-size: 12px;
                            background: rgb(240, 242, 245);
                        }
                    }
                }
            }
        }
        .walldrop-post-message {
            textarea {
                resize: none;
                height: 124px;
                border-radius: 4px;
                border: solid 1px #d9d9d9;
                width: 80%;
                padding: 8px;
                font-size: 12px;
            }
        }
        .walldrop-setup-cancel-submit {
            background: #ffffff;
            display: flex;
            justify-content: flex-end;
            font-size: 12px;
            padding: 16px 24px;
            position: absolute;
            bottom: 0px;
            right: 0px;
            left: 0px;
            .cancel-btn {
                background: #ffffff;
                padding: 10px 24px;
                border-radius: 4px;
                border: solid 1px #000;
                margin-right: 8px;
                cursor: pointer;
            }
            .submit-btn {
                color: #ffffff;
                padding: 10px 18px;
                border-radius: 4px;
                background-color: #000;
                border: solid 1px #000;
                cursor: pointer;
            }
        }
    }

    .walldrop-modal {
        visibility: hidden;
        position: absolute;
        top: 0px;
        bottom: 0px;
        right: 0px;
        left: 0px;
        width: 100%;
        height: ~"calc(100vh - 120px)";
        z-index: 9;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        &.active {
            visibility: visible;
        }
        .pdg-content {
            position: relative;
            width: 30%;
            height: 80%;
            margin: auto;
            background-color: #ffffff;
            overflow: hidden;

            .pdg-content-header {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 12px 16px;
                min-height: 48px;
                position: absolute;
                top: 0;
                left: 0;

                .close-arrow {
                    color: #000000;
                    font-size: 14px;
                    font-weight: 500;
                    line-height: 1.2;
                    letter-spacing: 0.28px;
                    cursor: pointer;
                    i {
                        font-size: 16px;
                        vertical-align: text-top;
                        margin-right: 8px;
                    }
                }

                &.flex-end {
                    justify-content: flex-end;
                }
            }

            .pdg-content-body {
                color: #000000;
                width: 100%;
                padding: 16px 24px;
                position: absolute;
                top: 48px;
                left: 0;
                bottom: 64px;
                overflow-y: scroll;
                animation: 0.5s ease 0s 1 normal none running slideInRight;
                -ms-overflow-style: none;
                scrollbar-width: none;
                &::-webkit-scrollbar {
                    display: none;
                }

                .tick-mark {
                    color: #FFFFFF;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 184px;
                    height: 184px;
                    border-radius: 100%;
                    background-color: #26bf8c;
                    border: 16px solid #26bf8c;
                    box-shadow: inset 0 0 0 16px #ffffff;
                    margin: 0 auto 16px;
    
                    i {
                        font-size: 64px;
                    }
                }

                p {
                    text-align: center;
                }
            }

            .pdg-content-footer {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 10px 24px 16px;
                min-height: 64px;
                position: absolute;
                bottom: 0;
                left: 0;
                background-color: #fff;
                .view-facebook-post-btn {
                    width: 100%;
                    text-align: center;
                    background: #000;
                    height: 38px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #fff;
                    border-radius: 4px;
                    &:hover {
                        text-decoration: none;
                    }
                }
            }
        }
    }
}

@font-face {
    font-family: 'vajro-walldrops';
    src:  url('https://res.cloudinary.com/vajrohq/raw/upload/v1630585683/admin_console/fonts/02-09-2021/vajro-walldrops.eot?17esuo');
    src:  url('https://res.cloudinary.com/vajrohq/raw/upload/v1630593557/admin_console/fonts/02-09-2021/vajro-walldrops.eot?17esuo#iefix') format('embedded-opentype'),
      url('https://res.cloudinary.com/vajrohq/raw/upload/v1630585683/admin_console/fonts/02-09-2021/vajro-walldrops.ttf?17esuo') format('truetype'),
      url('https://res.cloudinary.com/vajrohq/raw/upload/v1630593557/admin_console/fonts/02-09-2021/vajro-walldrops.woff?17esuor') format('woff');
    //   url('fonts/vajro-walldrops.svg?17esuo#vajro-walldrops') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
[class^="walldrops-"], [class*=" walldrops-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'vajro-walldrops' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.walldrops-icon:before {
    content: "\e990";
}


// @font-face {
//     font-family: 'vajro-walldrops';
//     src:  url('fonts/vajro-walldrops.eot?ekua9t');
//     src:  url('fonts/vajro-walldrops.eot?ekua9t#iefix') format('embedded-opentype'),
//       url('fonts/vajro-walldrops.ttf?ekua9t') format('truetype'),
//       url('fonts/vajro-walldrops.woff?ekua9t') format('woff'),
//       url('fonts/vajro-walldrops.svg?ekua9t#vajro-walldrops') format('svg');
//     font-weight: normal;
//     font-style: normal;
//     font-display: block;
//   }
//   [class^="vajro"], [class*=" vajro"] {
//     /* use !important to prevent issues with browser extensions that change fonts */
//     font-family: 'vajro-walldrops' !important;
//     speak: never;
//     font-style: normal;
//     font-weight: normal;
//     font-variant: normal;
//     text-transform: none;
//     line-height: 1;
//     /* Better Font Rendering =========== */
//     -webkit-font-smoothing: antialiased;
//     -moz-osx-font-smoothing: grayscale;
//   }
//   .vajrovajro-walldrop_icon:before {
//     content: "\e990";
//   }
.whats-new-page {
    color: #000000;
    width: 100%;
    padding:50px;
    background-color: #ffffff;
  
    :focus,
    :active:focus {
      outline: 0 none;
    }
  
    .article-content {
      width: 100%;
      padding: 24px;
      background-color: #ffffff;
      border: 1px solid #e2e2e2;
      border-radius: 5px;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
      margin-top: 50px;
  
      .feature-date-sec {
        display: flex;
        align-items: center;
  
        span {
          margin-bottom: 8px;
  
          &:not(:last-child) {
            margin-right: 12px;
          }
  
          &.pill-outline,
          &.date-txt {
            color: rgba(0, 0, 0, 0.7);
          }
  
          &.pill-outline {
            padding: 4px 6px;
            font-weight: 500;
            line-height: 1.2;
            background-color: #f4f4f4;
            border-radius: 4px;
            border-color: #f4f4f4;
          }
  
          &.date-txt {
            font-size: 14px;
            line-height: 1.44;
          }
        }
      }
  
      h2 {
        font-size: 30px;
        line-height: 35px;
        font-family: @font-serif;
        font-weight: 600;
        margin: 0 0 24px;
      }
  
      h3 {
        font-size: 20px;
        font-weight: 600;
        line-height: 1.33;
        letter-spacing: -0.29px;
        margin: 0 0 16px;
      }
  
      p,
      .p-rich_text_section {
        color: #333333;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: 0.02em;
        margin-bottom: 24px;
      }
  
      a {
        color: #4e71e6;
      }
  
      .p-rich_text_section {
        img {
          display: block;
          margin: 24px 0;
        }
      }
  
      figure {
        margin: 0 0 24px;
  
        img {
          width: 100%;
          object-fit: contain;
          margin-bottom: 8px;
          height: fit-content;
        }
  
        figcaption {
          color: #777777;
          font-size: 12px;
          line-height: 1.6;
          letter-spacing: -0.26px;
          text-align: center;
          padding: 0 24px;
        }
      }
  
      .style-disc,
      .p-rich_text_list {
        list-style-type: disc;
        padding-left: 3.8em;
  
        li {
          color: #333333;
          font-size: 16px;
          line-height: 1.6;
          letter-spacing: -0.25px;
          margin-bottom: 16px;
        }
      }
    }
  
    .article-main-wrapper {
      .article-content {
        position: relative;
        height: 264px;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
        overflow: hidden;
        margin-bottom: 32px;
  
        &:after {
          content: '';
          display: block;
          height: 144px;
          width: 100%;
          position: absolute;
          bottom: 0;
          left: 0;
          background: linear-gradient(0deg, rgb(255, 255, 255), transparent);
          z-index: 1;
        }
  
        h2 {
          cursor: pointer;
  
          &:hover {
            text-decoration: underline;
          }
        }
  
        .readmore-button {
          color: #ffffff;
          font-size: 13px;
          font-weight: 500;
          line-height: 1.3;
          text-decoration: none;
          padding: 10px 16px;
          position: absolute;
          bottom: 24px;
          left: 50%;
          transform: translateX(-50%) translateZ(0);
          background-color: #000000;
          border-radius: 4px;
          box-shadow: none;
          z-index: 2;
          margin: 0;
          transition: all 0.4s ease;
  
          &:hover {
            box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.5);
            text-decoration: underline;
          }
        }
      }
    }
}

.whats-new-editor {
    padding: 32px 40px;
    background-color: #ffffff;
  
    .whats-new-form {
      display: table;
      width: 600px;
      padding: 24px;
      background-color: #ffffff;
      border-radius: 6px;
      box-shadow: 0 1px 16px 0 rgba(0, 0, 0, 0.05);
      margin-bottom: 56px;
  
      .form-group {
        margin: 0 0 24px;
      }
  
      .form-control {
        height: 40px;
        border-radius: 2px;
        box-shadow: none;
  
        &::placeholder {
          color: rgba(0, 0, 0, 0.2);
        }
      }
  
      .select-wrapper:after {
        font-size: 13px;
        top: 46px;
        margin-top: 0;
      }
  
      .btn-wrapper {
        text-align: right;
  
        .btn {
          color: #ffffff;
          font-size: 14px;
          font-weight: bold;
          line-height: 1.2;
          letter-spacing: 0.28px;
          padding: 10px 24px;
          background-color: #000000;
          border-color: #000000;
          border-radius: 3px;
          margin: 0;
          outline: 0 none;
        }
      }
    }
  
    // what's new modal css starts
    .custom-modal {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 10;
      -webkit-overflow-scrolling: touch;
      outline: 0;
      overflow: hidden;
      display: none;
      transition: opacity 0.15s linear;
  
      :focus,
      :active:focus {
        outline: 0 none;
      }
  
      .modal-dialog {
        position: relative;
        margin: 40px auto;
        width: 600px;
  
        .modal-content {
          background-color: #ffffff;
          border: none;
          box-shadow: none;
  
          .modal-header {
            padding: 16px 32px;
            min-height: 56px;
            border: none;
            display: flex;
            align-items: center;
  
            span {
              width: 100%;
              font-size: 16px;
              padding-right: 64px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
  
            i {
              font-size: 20px;
              margin-left: auto;
              cursor: pointer;
            }
          }
  
          .modal-body {
            padding: 24px 32px 48px;
  
            .whats-new-form {
              width: 100%;
              display: block;
              padding: 0;
              border-radius: 0;
              box-shadow: none;
              background-color: transparent;
              margin-bottom: 0;
            }
          }
        }
      }
  
      &.sticky-header {
        .modal-content {
          padding-top: 56px;
  
          .modal-header {
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            box-shadow: 0 -1px 2px 0 #000000;
          }
  
          .modal-body {
            max-height: ~'calc(100vh - 320px)';
            overflow: auto;
          }
        }
      }
    }
  
    .custom-modal-backdrop {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 9;
      background-color: #000;
      opacity: 0;
      transition: opacity 0.15s linear;
  
      &.in {
        opacity: 0.5;
      }
    }
    // what's new modal css ends
  
}
.widget-modal {
    position: fixed;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    outline: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 10;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    &.in {
        opacity: 1;
        visibility: visible;
    }


    .widget-modal-dialog {
        border: 1px solid #d0cdcd;
        width: 900px;
        margin: 40px auto;
        
        .widget-modal-body {
            background-color: #FFFFFF;
            overflow: hidden;
            overflow-y: scroll;
            height: ~"calc(100vh - 75px)";         

            .widget-modal-header {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                padding: 32px 56px;

                .close-modal {
                    color: #000000;
                    font-size: 14px;
                    line-height: 1.5;
                    letter-spacing: 0.28px;
                    cursor: pointer;

                    i {
                        font-size: 16px;
                        margin-right: 8px;
                        vertical-align: -2px;
                    }
                }
            }

            .inner-content {
                padding: 0 56px 64px;
            }
        }
    }
}

.widget-modal-bg-overlay {
    background: rgba(31,24,39,0.24);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    z-index: 9;
    transform: translate3d(100%,0,0);
    transition: opacity .4s,transform 0s .4s;
    transition-timing-function: cubic-bezier(.22,.61,.36,1);

    &.in {
        opacity: 1;
        transition: opacity .5s;
        transform: translateZ(0);
    }
}