/*
*
* ==========================================
* Common CSS
* ==========================================
*
*/


:root {
    --green: #0DD17F;
    --blue: #32b9eb;
    --white: #fff;
    --black: #000;
    --light-blue: #b4eafd;
    --red: #af3641;
}

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-family: "Poppins-Ragular";
    list-style-type: none;
}

html {
    scroll-behavior: smooth;
}

a:hover {
    text-decoration: none;
}

:focus-visible {
    outline: none !important;
}

button.filedrop-btn[disabled] {
    cursor: not-allowed;
}

/* Body Styles */
body {
    margin: 0px;
    padding: 0px;
    font-family: "Poppins-Ragular";
    box-sizing: border-box;
}


.container,
.container-lg,
.container-md,
.container-sm,
.container-xl {
    max-width: 1440px;
}


/* scrollbar */
/*=======FireFox==========*/
* {
    scrollbar-width: thin;
    scrollbar-color: #32b9eb #f1f1f1;
}

::-webkit-scrollbar {
    width: 8px;
    height: 7px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #32b9eb;
    border-radius: 10px;
    opacity: .8;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #bfbebd;
        opacity: 1;
    }


/* preloader */
.no-scroll {
    overflow: hidden;
}

.preloader {
    width: 100%;
    height: 100%;
    position: fixed;
    background: #fff;
    z-index: 11111;
    text-align: center;
    opacity: .80;
}

.preloader_inner {
    position: absolute;
    left: 45%;
    top: 35%;
    text-align: center;
}

.loader {
    border: 3px solid #d6336c;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border-left-color: transparent;
    border-right-color: transparent;
    animation: rotate 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;
}

.loader_level1 {
    border: 3px solid #d6336c;
    width: 160px;
    position: absolute;
    top: 30px;
    left: 30px;
    height: 160px;
    border-radius: 50%;
    border-left-color: transparent;
    border-right-color: transparent;
    animation: rotate 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;
}

.loader_level2 {
    border: 3px solid #3bc9db;
    width: 180px;
    height: 180px;
    position: absolute;
    top: 20px;
    border-left-color: transparent;
    border-right-color: transparent;
    animation: rotate2 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;
    left: 20px;
}

.loader_level3 {
    border: 3px solid #d6336c;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 10px;
    left: 10px;
    border-left-color: transparent;
    border-right-color: transparent;
    animation: rotate 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;
}

.loader_level4 {
    border: 3px solid #3bc9db;
    width: 220px;
    height: 220px;
    position: absolute;
    top: 0;
    left: 0;
    border-left-color: transparent;
    border-right-color: transparent;
    animation: rotate2 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;
}

@keyframes rotate {
    0% {
        transform: rotateZ(-360deg);
    }

    100% {
        transform: rotateZ(0deg);
    }
}

@keyframes rotate2 {
    0% {
        transform: rotateZ(360deg);
    }

    100% {
        transform: rotateZ(0deg);
    }
}

.preloader-text {
    color: #767676;
    font-size: 20px;
    position: absolute;
    top: 0;
    left: 0;
    font-family: "Pacifico-Regular";
    transform: translate(70px, 90px);
}

/*  */

.signer-canvas {
    position: relative;
}

    .signer-canvas img {
        width: 100%;
        /*position: absolute;
    top: 0;
    left: 0;*/
        pointer-events: none;
        /*background: #fff;*/
    }


/*-----------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------
Login css start 
-----------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------*/


.login-section {
    width: 100%;
}

.login-left {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: var(--light-blue);
}

    .login-left img {
        height: 500px;
    }


.login-right {
    padding: 100px 200px;
    width: 100%;
}

.login-right-already {
    padding: 250px 80px;
    width: 100%;
}

.release-notes {
    border-right: 1px solid #ddd;
    padding-right: 18px;
}

    .release-notes i {
        font-size: 24px;
        color: var(--blue);
    }

.logo {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

    .logo img {
        height: 80px;
    }

.top-title {
    width: 100%;
    display: flex;
    justify-content: center;
}

    .top-title h1 {
        font-size: 28px;
        font-weight: bold;
        color: #333;
        margin-bottom: 20px;
    }

.tearms-right-main {
    max-height: 100vh;
    overflow: auto;
}

.tearms-right {
    padding: 50px;
}

    .tearms-right h1 {
        font-size: 24px;
        font-family: "Poppins-SemiBold";
    }

    .tearms-right p {
        font-size: 14px;
    }

    .tearms-right ul {
        padding: 0;
        padding-left: 18px;
    }

    .tearms-right li {
        list-style-type: disc;
        font-size: 14px;
    }

.form-group select {
    width: 100%;
    font-size: 14px;
    border-radius: 3px;
    padding: 6px 10px;
    border: 1px solid #c1c1c1;
}

.form-group h6 {
    font-size: 14px;
    color: #444;
    padding: 10px 10px;
    background-color: #f2f2f2;
    border-radius: 3px;
}

.remember-me a {
    display: flex;
    justify-content: end;
    color: var(--blue);
}


.form-group p {
    text-align: center;
}



.email-confirm h1 {
    font-size: 32px;
    font-weight: bold;
    color: #000;
    margin-bottom: 20px;
}

.email-confirm p {
    font-size: 18px;
    color: #333;
    margin-bottom: 8px;
    margin-top: 30px;
}

/*-----------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------
section css start 
-----------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------*/


.page-header {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px 30px;
    box-shadow: rgba(149, 157, 165, 0.1) 0px 8px 24px;
    border-bottom: 1px solid #dfdfdf;
    position: sticky;
    top: 0;
    z-index: 1040;
    background: #fff;
}

.head-logo {
    position: relative;
}

    .head-logo img {
        height: 70px;
    }




/* main dropdown  header */

.head-drop-btn {
    /* display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    background-color: rgb(188, 187, 200);
    border-radius: 50%;
    font-weight: bold;
    cursor: pointer; */
}




.doc-dropdown {
    background-color: #fff;
}

.head-username {
    border-radius: 50%;
    /* border: 1px solid var(--blue); */
    width: 40px;
    height: 40px;
    line-height: 40px;
    padding-left: 8px;
    cursor: pointer;
}

.btn-info {
    background-color: var(--blue);
    border-color: var(--blue)
}

.head-profile-dropdown {
    padding: 5px;
    width: auto;
    min-width: 5rem;
    text-align: center;
}


    .head-profile-dropdown a {
        color: var(--black);
    }

.btn.focus,
.btn:focus {
    box-shadow: none;
}



.header-navbar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}



@media screen and (min-width: 992px) {

    .head-nav {
        width: 100%;
    }

        .head-nav ul {
            display: flex;
            /* width: 50%; */
            justify-content: space-evenly;
            align-items: center;
            margin: auto;
            /* margin-top: 20px; */
        }

            .head-nav ul li {
                list-style-type: none;
                margin: 0 40px;
            }

        .head-nav a {
            font-weight: bold;
            color: var(--black);
        }


        .head-nav .active a {
            color: var(--blue);
        }

        .head-nav a:hover {
            color: var(--blue);
        }

        .head-nav ul {
            margin-top: 10px;
        }
}




/* index section start */
.index-main {
    padding: 50px;
}

.index-left {
    width: 100%;
    position: relative;
}


.il-profile-img {
    height: 50px;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    padding: 4px;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

    .il-profile-img.with-profile {
        border: 1px solid var(--blue);
    }



    .il-profile-img.without-profile {
        border: 1px solid var(--blue);
        background-color: var(--blue);
    }

        .il-profile-img.without-profile i {
            font-size: 22px;
            color: #fff;
        }

    .il-profile-img img {
        width: 100%;
    }

.il-profile {
    padding: 0 20px;
}

    .il-profile a {
        display: block;
        width: fit-content;
    }

.il-profile-title h1 {
    font-size: 22px;
    color: var(--black);
    font-family: "Poppins-Bold";
    text-transform: uppercase;
    margin-top: 10px;
    word-break: break-word;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.il-action {
    border-right: 1px solid #dfdfdf;
    width: 100%;
    margin-top: 30px;
    display: block;
}

.la-main {
    width: 100%;
    padding: 10px 20px;
}

    .la-main:hover {
        background-color: #e1e1e1;
    }

    .la-main h2 {
        font-size: 30px;
        color: var(--black);
        font-family: "Poppins-Bold";
        margin: 0;
    }

    .la-main span {
        font-size: 16px;
        color: #717171;
    }

.action-bb {
    border-bottom: 1px solid #dfdfdf;
    width: 70%;
}


/* index right */

.file-review {
    padding: 16px;
    /* background: #F6F6F6; */
    margin-top: 90px;
}

.file-review-main {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(217, 217, 217);
    border-radius: 3px;
    box-shadow: rgb(0 0 0 / 10%) 0px 1px 2px 0px;
    display: inline-block;
    vertical-align: top;
    width: inherit;
    height: auto;
}

.file-review-top {
    position: relative;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(217, 217, 217);
    border-radius: 3px;
    box-shadow: rgb(0 0 0 / 10%) 0px 1px 2px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: top;
    width: 100%;
    min-height: 140px;
}

.file-review-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1e1e1ea6;
    display: none;
}

.file-review-top:hover .file-review-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
}

.file-review-btn {
    font-weight: 600;
    border-radius: 2px;
    letter-spacing: 0.66px;
    font-size: 12px;
    padding: 4px 14px;
    background-color: transparent;
    border: 1px solid rgb(255, 255, 255);
    color: rgb(255, 255, 255);
}

.file-review-close {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: var(--black);
    border: none;
    border-radius: 30px;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .file-review-close svg {
        fill: var(--white);
    }

.file-review-top img {
    height: 140px;
    width: 100%;
}


.file-review-bottom {
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 10px 16px;
    position: relative;
}

    .file-review-bottom h2 {
        font-size: 12px;
        font-weight: bold;
        width: 20ch;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .file-review-bottom p {
        font-size: 10px;
        margin: 0;
    }

.filedrop-btn-span {
    font-size: 11px;
}



.preview-popup-main {
    /* width: 100%;
    background-color: rgb(233, 233, 233);
    padding: 50px 100px;
    overflow: auto;
    height: 80vh; */

    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    flex: 1 1 auto;
    background-attachment: local, local, scroll, scroll;
    background-color: rgb(255, 255, 255);
    background-image: rgb(255, 255, 255);
    background-position: 0px 0px, 0px 100%, 0px 0px, 0px 100%;
    background-repeat: no-repeat;
    background-size: 100% 12px, 100% 12px, 100% 4px, 100% 4px;
    overflow-y: auto;
    padding: 0px;
}

.preview-popup-inner {
    background: rgb(233, 233, 233);
    padding: 20px 20px;
    max-height: 800px;
    overflow: auto;
    position: relative;
    display: grid;
    grid-template-columns: auto;
    gap: 20px;
}



.doc-replace {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: inherit;
    padding: 60px 30px;
}

    .doc-replace p {
        font-size: 12px;
        color: #333;
        margin-top: 10px;
    }

    .doc-replace svg {
        fill: var(--blue);
        height: 70px;
    }

.preview-popup-inner img {
    max-width: 100%;
    height: auto;
}

.preview-model {
    position: relative;
}

.preview-model-head {
    margin-bottom: 0 !important;
}

.index-right {
    padding: 16px 25px;
    background: #F6F6F6;
    margin-top: 115px;
}

.preview-model-close {
    position: absolute;
    top: 10px;
    right: 10px;
}

.index-right-input {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}


.input-filedrop {
    height: auto;
    align-content: center;
    align-items: center;
    border: 2px dashed #ccc;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-wrap: nowrap;
    justify-content: center;
    padding: 10px 24px;
    text-align: center;
    transition: border-color .2s ease;
}

.filedrop-text {
    color: #666;
    font-size: 18px;
    line-height: 24px;
    margin: 0 0 16px 0;
}

/* index bottom */

.index-bottom {
    width: 100%;
    /* display: flex;
    justify-content: center;
    align-items: center; */
    margin-top: 120px;
    background-color: transparent;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.ib-left {
    height: 100%;
    width: 100%;
    background-color: var(--light-blue);
    display: flex;
    justify-content: center;
    align-items: center;
}

    .ib-left img {
    }

.ib-right {
    height: 220px;
    display: flex;
    /* flex-wrap: wrap; */
    padding: 25px 20px 20px 10px;
    flex-direction: column;
}

    .ib-right h6 {
        font-size: 20px;
        font-weight: bold;
        color: var(--black);
    }


    .ib-right p {
        font-size: 18px;
        color: #333;
    }

    .ib-right a {
        color: var(--blue);
        font-weight: bold;
    }


/* footer */

.sec-footer {
    height: 40px;
    background-color: var(--black);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 30px;
    box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;
    position: fixed;
    bottom: 0;
    z-index: 111;
}

.foot-logo img {
    height: 30px;
}



.foot-content p {
    color: rgb(238, 235, 235);
    text-align: right;
    font-size: 10px;
    margin: 0;
}

.foot-content a {
    color: var(--white);
}





/* popip css */

/* .modal-dialog {
    width: 70% !important;
    max-width: 60% !important;
} */

.modal-content {
    width: 100%;
}

.sign-delete-model-header {
    margin-bottom: 0 !important;
}

    .sign-delete-model-header .close {
        position: absolute;
        right: 0;
        top: 0;
        width: 30px;
        height: 30px;
        background: var(--red);
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        border-radius: 30px;
        z-index: 1;
        opacity: 1;
    }

.modal-header {
    width: 100%;
    position: relative;
    display: table;
    border: none;
    margin-bottom: 30px;
}

.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    border: none;
    margin: 0 !important;
    padding: 0 !important;
}

.modal-content h1 {
    font-size: 28px;
    font-family: "Poppins-Bold";
    text-align: center;
    letter-spacing: .5px;
    margin-top: 30px;
}

.modal-content p {
    font-size: 18px;
    text-align: center;
}

.popup-content {
    width: 100%;
    position: relative;
}

.popup-content-inner {
    width: 100%;
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: center;
    flex-direction: column;
}

    .popup-content-inner h6 {
        font-size: 20px;
        margin-top: 30px;
        color: var(--black);
        font-weight: bold;
    }

    .popup-content-inner p {
        font-size: 14px;
        padding: 0 30px;
        line-height: 20px;
    }










/* ------------------------------------------------------
   select file start 
   ----------------------------------------------------*/

.select-files-section {
    width: 100%;
    position: relative;
    padding: 30px 0 75px 0px;
}

.select-file {
    width: 100%;
    position: relative;
    border: 1px solid var(--blue);
    /*box-shadow: #fb776633 0px 8px 24px;*/
    margin-bottom: 30px;
}

.select-file-title {
    position: absolute;
    left: -1px;
    top: -15px;
}

    .select-file-title h6 {
        background-color: var(--blue);
        color: var(--blue);
        padding: 10px 30px;
        color: var(--white);
        font-weight: bold;
        border-radius: 5px 5px 5px 0;
    }

.index-right-alt {
    margin: 50px 180px;
    height: -webkit-fill-available;
}

.sf-main {
    margin: 50px 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.file-preview-main {
    flex-direction: unset;
}

.sf-inner {
    margin: 10px 180px;
}

.select-file-form {
    position: relative;
    background: #F6F6F6;
    display: flex;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    margin: 20px 0;
}

    .select-file-form label {
        margin: 0;
    }

.select-file-form-white {
    position: relative;
    background: #ffffff;
    display: flex;
    border-radius: 10px;
    box-shadow: none;
    margin: 20px 0 10px 0;
}

.select-file-form-1 {
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: none;
    background: none;
}

.drop-file-sec {
    position: absolute;
    width: 15px;
    height: 40px;
    background-color: var(--blue);
    left: 0px;
    top: 50%;
    transform: translate(0, -50%);
    border-radius: 2px;
    display: none;
    cursor: grab;
}

.shallow-draggable:hover .drop-file-sec {
    display: flex;
    justify-content: center;
    align-items: center;
}

.drop-file-sec svg {
    height: 30px;
    fill: var(--white);
}


.shallow-draggable:hover .sf-left svg {
    display: block;
    fill: var(--white);
    height: 30px;
}


.sf-right {
    width: 99%;
    /* margin-left: 20px; */
    margin: 0 20px;
    padding: 28px 0 12px 0;
    /*margin-top: 20px;*/
}

.sf-field {
    display: flex;
    width: 100%;
}

.sf-radio svg {
    fill: var(--red);
}

.sf-radio input[type=radio] {
    accent-color: var(--red);
}



.add-recipient {
    /*padding: 30px 150px;*/
    padding: 0px;
}

.wizardFirstRecipient {
    overflow: hidden;
    padding: 30px 150px;
    position: relative;
}

.signer-setting {
    width: 100%;
    margin-top: 20px;
}

    .signer-setting h1 {
        color: var(--black);
        font-weight: bold;
        font-size: 18px;
    }


.sf-massage {
    width: 100%;
    padding: 50px 150px;
}

.sf-massage-inner {
    background-color: #f6f6f6;
    padding: 20px 40px;
    border-radius: 10px;
    /*box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;*/
}


span.mandatory-field-symbol {
    color: var(--red);
}

.signer-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 15px 0;
    position: relative;
}

.ccer-fields {
    display: flex;
    flex-direction: column;
    gap: 60px;
    margin: 50px 0;
}

.recipient-buttons {
    width: 100%;
    display: flex;
    gap: 10px;
    justify-content: end;
    margin: 10px 0;
}

.advance-settings {
    display: flex;
    gap: 10px;
    justify-content: end;
    margin: 50px 180px -20px 180px;
}

.ccer-buttons {
    width: 100%;
    display: flex;
    gap: 10px;
    justify-content: end;
    margin: 20px 0;
}

.no-ccer-part {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0 0 0;
    padding: 40px 0;
    background-color: #ffffff;
    border-radius: 10px;
}

    .no-ccer-part p {
        margin: 0;
        color: #b1b1b1;
        font-size: 16px;
    }

.hr-lines:before {
    content: " ";
    display: block;
    height: 2px;
    width: 200px;
    position: absolute;
    top: 50%;
    left: 0;
    background: #37bae8;
}

.hr-lines {
    position: relative;
    /*new lines  */
    max-width: 500px;
    margin: 50px auto;
    text-align: center;
}

    .hr-lines:after {
        content: " ";
        height: 2px;
        width: 200px;
        background: #37bae8;
        display: block;
        position: absolute;
        top: 50%;
        right: 0;
    }

.ccer-part p {
    font-weight: bold;
    font-size: 20px;
}

.sf-recipients {
    position: absolute;
    top: -14px;
    left: 0;
    background-color: var(--blue);
    padding: 2px 15px;
    border-radius: 5px 5px 5px 0;
}

    /*.sf-recipients-ccer {
    position: absolute;
    top: -14px;
    left: 0;
    background-color: var(--blue);
    padding: 2px 15px;
    border-radius: 5px 5px 5px 0;
}
*/

    .sf-recipients svg {
        height: 13px;
        fill: var(--white);
    }

    .sf-recipients label {
        font-size: 12px;
        margin: 0;
        color: var(--white) !important;
    }




/* ------------------------------------------------------
   select file start 
   ----------------------------------------------------*/

.pdf-section {
    width: 100%;
    position: relative;
}

.pdf-sec-left {
    width: 100%;
    height: calc(100vh - 100px);
    position: relative;
    overflow: auto;
    z-index: 1;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.pdf-manage-box {
    width: 100%;
    position: relative;
    background-color: var(--white);
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    box-shadow: rgba(149, 157, 165, 0.1) 0px 8px 24px;
    border-bottom: 1px solid #dfdfdf;
}

.pmb-inner {
    position: relative;
    display: flex;
    gap: 10px;
}

.pmb-inner-hide {
    display: none;
}

.pmb-inner a {
    color: var(--black);
    width: 30px;
    height: 30px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .pmb-inner a:hover {
        background-color: var(--blue);
        color: var(--white);
    }

.pmb-inner select {
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    border: 1px solid #333;
    background-color: #ffffff;
    font-family: "Poppins";
}

.pdf-box-inner select option {
    font-family: "Poppins";
}

.pmb-inner:after {
    display: none;
    content: "";
    position: absolute;
    right: -25px;
    top: 0;
    height: 100%;
    width: 1px;
    background-color: #e0e0e0;
}

.pmb-inner:last-child:after {
    display: none;
}


.pdf-sec-middle {
    width: 100%;
    /* height: 90vh; */
    height: 100vh;
    height: calc(100vh - 222px);
    position: relative;
    overflow: auto;
    background-color: #E9E9E9;
    padding: 0 100px;
}

.img-box-main {
    width: 100%;
    /*height: 100%;*/
    margin: auto;
    display: block;
}

.image-box {
    width: 100%;
    position: relative;
    max-width: 100%;
    margin: 30px 0 60px 0;
    background-color: var(--white);
}

    .image-box img {
        height: 100%;
        mix-blend-mode: multiply;
    }

.img-boxsigner-canvas {
    width: 100%;
    height: 100%;
    position: relative;
}

.pdf-sec-right {
    /* width: 100%;
    height: 90vh;
    position: relative;
    overflow: auto; */

    width: 100%;
    /* height: 90vh; */
    height: 100vh;
    height: calc(100vh - 140px);
    position: relative;
    overflow: auto;
    z-index: 1;
    box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
}

.psr-img-box-main {
    width: 100%;
    position: relative;
    background: #FFF;
    padding: 10px 0;
}

.psr-image-box {
    width: 60%;
    margin: 10px auto;
    border: 1px solid #333;
}

    .psr-image-box a {
        height: 100%;
        display: block;
    }

    .psr-image-box img {
        height: auto;
        width: 100%;
    }

.psr-title {
    width: 100%;
    border-bottom: 1px solid #E9E9E9;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .psr-title h1 {
        margin: 0;
        padding: 0;
        font-size: 22px;
        font-weight: bold;
        text-align: center;
    }




.psl-top-dropdown {
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}


    .psl-top-dropdown button {
        width: 100%;
        border-radius: 0;
        background-color: var(--white);
        border: none;
        color: var(--blue);
        display: flex;
        align-items: center;
        padding: 0px 40px;
        height: 60px;
    }

        .psl-top-dropdown button:hover {
            background-color: #f3f3f3 !important;
            color: var(--blue);
        }

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
    background-color: none !important;
    border: none !important;
    box-shadow: none !important;
    border-color: none !important;
}

.psl-top-svg {
    margin-left: auto;
}

.psl-top-dot {
    background-color: var(--blue);
    height: 10px;
    width: 10px;
    min-width: 10px;
    border-radius: 100px;
    display: inline-block;
    margin-right: 8px;
}

.psl-top-dot1 {
    background-color: var(--pink);
}

.psl-top-dropdown-menu {
    width: 100%;
    padding: 0;
    /*transform: translate3d(0px, 36px, 0px) !important;*/
}

ul.dropdown-menu.psl-top-dropdown-menu li {
    border-bottom: 1px solid #e3e3e3;
}


.modal-open .modal.sign-model-right .modal-backdrop {
    display: none !important;
}

.psl-top-title {
    color: var(--black);
    font-family: "Poppins-SemiBold";
    margin-left: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.dropdown-toggle::after {
    color: var(--black) !important;
}


.psl-body {
    width: 100%;
    margin-top: 30px;
}

.psl-body-left {
    width: 20%;
    float: left;
    border-right: 1px solid #dfdfdf;
    /* height: 100vh; */
    height: 100%;
    margin-top: 1px;
}

.psl-body-right {
    width: 80%;
    float: right;
    margin-top: 1px;
}

.sign-right-tab {
    margin-bottom: 20px;
}

.psl-body-title {
    font-family: "Poppins-SemiBold";
    font-size: 18px;
    padding: 0 20px;
    margin-bottom: 20px;
    margin-top: 20px;
}

    .psl-body-title svg {
        height: 22px;
    }

.psl-body-fields {
    width: 100%;
}

.psl-body-btn1 {
    padding: 0 !important;
}

.psl-body-btn.active {
    background-color: #f3f3f3;
}

/*.psl-body-btn:hover {
    background-color: #f3f3f3;
}*/

.next-fixed {
    width: 100%;
    padding: 15px 50px;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1040;
    background-color: var(--white);
    /*box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;*/
    border-top: 1px solid #ededed;
    display: flex;
    justify-content: space-between;
}

/*    .next-fixed button {
        float: right;
    }*/








/* dashboard */


.document-field-sec {
    width: 100%;
    padding: 10px 50px;
    margin: 5px 0;
    opacity: .7;
}

    .document-field-sec.active,
    .document-field-sec:hover {
        background-color: #f3f3f3;
        opacity: 1;
    }


.document-field {
    border: none;
    background: none !important;
    display: flex;
    align-items: center;
    padding: 0;
    color: var(--black);
    font-weight: bold;
    font-size: 14px;
}

    .document-field:hover {
        color: inherit;
    }

    .document-field svg {
        height: 22px;
        margin-right: 10px;
    }




/* Document css Start */

.document-body {
    width: 100%;
    height: calc(100vh - 112px);
    /* min-height: 90vh; */
    position: relative;
    overflow: auto;
    background-color: #E9E9E9;
    overflow-x: hidden;
}

.document-body-top {
    background-color: var(--white);
    padding: 40px;
    border-bottom: 1px solid #ededed;
}

    .document-body-top h1 {
        font-size: 24px;
        font-family: "Poppins-SemiBold";
        margin: 0;
    }

.back-btn {
    font-size: 14px;
    font-family: "Poppins-Bold";
    margin: 0;
}


.document-body-top h2 {
    font-size: 20px;
    font-family: "Poppins-SemiBold";
    margin: 0;
    margin-bottom: 10px;
    padding-top: 20px;
}



.document-body-top h6 {
    font-size: 14px;
    font-family: "Poppins-SemiBold";
    margin: 0;
    margin-top: 20px;
    display: flex;
    align-items: center;
}

    .document-body-top h6 svg {
        height: 13px;
        margin-right: 5px;
    }

.document-body-top p {
    color: rgb(102, 102, 102);
    line-height: 1;
    margin-top: 8px;
    margin-bottom: 0px;
    font-size: 13px;
    display: block;
}

.document-body-field {
    width: 100%;
    /* display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 200px; */
}

.field-body {
    background-color: var(--white);
    margin-bottom: 10px;
}

.dbf-badge {
    width: 5px;
    height: 70px;
    background-color: var(--blue);
}

.dbf-name h6 {
    font-family: "Poppins-SemiBold";
    font-size: 16px;
    color: var(--black);
    margin-bottom: 0px;
    /* margin-left: 20px; */
}


.field-top {
    padding: 10px 0;
    border-bottom: 1px solid #ededed;
    background-color: #f6f6f6;
}

.dbf-btn {
    display: flex;
    justify-content: flex-end;
    margin-right: 15%;
}

.bdf-dropdown {
    width: 100%;
    padding: 10px;
}

.dbf-menu button:hover {
    background-color: #c1c1c1;
}

.bdf-dropdown.dropdown-menu.show {
    display: flex;
    flex-wrap: wrap;
    transform: translate3d(-110px, 39px, 0px) !important;
}

.bdf-dropdown a {
    width: 100%;
    color: var(--black);
    padding: 5px 10px;
}

.dbf-status p,
.dbf-date p {
    margin: 0;
    padding: 0;
    position: relative;
}

.dbf-status p {
    /* padding-left: 30px;
    display: flex;
    align-items: center; */
}

    .dbf-status p a {
        color: var(--blue);
    }


/* .dbf-status p::before {
    position: absolute;
    top: 2px;
    left: 0;
    content: "";
    height: 20px;
    width: 20px;
    border-radius: 50px;
    background-color: #c8c8c8;
} */



/* ------------------------------------------------------
   Sign Bulb Email
   ----------------------------------------------------*/





table.blueTable {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}

    table.blueTable td,
    table.blueTable th {
        padding: 3px 2px;
    }

    table.blueTable tbody td {
        font-size: 13px;
    }

    table.blueTable tr:nth-child(even) {
        background: #fbfbfb;
    }

    table.blueTable thead {
        background: #f6f6f6;
        border-top: 1px solid #e9e9e9;
        border-bottom: 1px solid #e9e9e9;
    }

        table.blueTable thead th {
            font-size: 15px;
            font-weight: bold;
            color: var(--black);
        }

    table.blueTable tbody {
        background-color: var(--white);
    }

    table.blueTable tfoot {
        font-size: 14px;
        font-weight: bold;
        color: #FFFFFF;
        background: transparent;
    }

        table.blueTable tfoot td {
            font-size: 14px;
        }

        table.blueTable tfoot .links {
            text-align: center;
            margin-top: 30px;
        }

.blueTable tbody tr {
    /*cursor: pointer;*/
}

    .blueTable tbody tr:hover,
    .blueTable tbody tr:nth-child(even):hover {
        background: #e1f0ff;
    }






/* complate document */


.complate-document-body {
    width: 100%;
    min-height: 90vh;
    position: relative;
    overflow: auto;
    background-color: var(--white);
    overflow-x: hidden;
    padding: 50px;
}



.complete-doc-title {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

    .complete-doc-title h2 {
        margin: 20px 0;
        font-size: 18px;
        font-weight: 600;
        line-height: 24px;
    }



/* complate doc table */


table.complete-doc-table {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}

    table.complete-doc-table td,
    table.complete-doc-table th {
        padding: 3px 2px;
    }

    table.complete-doc-table tbody td {
        font-size: 13px;
    }

    /* table.complete-doc-table tr:nth-child(even) {
    background: #fbfbfb;
} */

    table.complete-doc-table thead {
        background: #f6f6f6;
        border-top: 1px solid #e9e9e9;
        border-bottom: 1px solid #e9e9e9;
    }

        table.complete-doc-table thead th {
            font-size: 15px;
            font-weight: bold;
            color: var(--black);
        }

    table.complete-doc-table tbody {
        background-color: var(--white);
    }

    table.complete-doc-table tfoot {
        font-size: 14px;
        font-weight: bold;
        color: #FFFFFF;
        background: transparent;
    }

        table.complete-doc-table tfoot td {
            font-size: 14px;
        }

        table.complete-doc-table tfoot .links {
            text-align: center;
            margin-top: 30px;
        }

            table.complete-doc-table tfoot .links a {
                display: inline-block;
                background: var(--red);
                color: #FFFFFF;
                padding: 2px 8px;
                border-radius: 5px;
            }

.complete-doc-table tbody tr:last-child {
    border-bottom: 1px solid #e9e9e9;
}


.doc-td-one {
    width: 100px;
    font-size: 14px !important;
    color: #333;
    font-weight: bold;
}

.doc-td-two {
    width: 5%;
}

.doc-td-four {
    width: 40px;
}

.doc-td-five {
    width: 40%;
}

h4.row-status {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    /* margin: 10px 0; */
    text-transform: uppercase;
    position: relative;
    width: auto;
    background-color: #fff;
}

.row-status span {
    background-color: #ffffff;
    z-index: 2;
    position: relative;
    padding: 0 15px;
}

h4.row-status::before {
    border-bottom: 1px solid #e9e9e9;
    content: "";
    height: 9px;
    position: absolute;
    top: 0;
    width: 45%;
    left: 0;
    margin-right: 10px;
    z-index: 1
}

h4.row-status::after {
    border-bottom: 1px solid #e9e9e9;
    content: "";
    height: 9px;
    position: absolute;
    top: 0;
    right: 0;
    width: 45%;
    margin-left: 10px;
    z-index: 10;
    height: calc(100vh - 156px);
}

.complete-doc-foot {
    margin: 100px 0 0 0;
}

    .complete-doc-foot h2 {
        margin: 0px;
        font-size: 18px;
        font-weight: 600;
        line-height: 24px;
    }

    .complete-doc-foot p {
        margin: 24px 0px;
        font-size: 14px;
        display: block;
        word-break: break-word;
        overflow-wrap: break-word;
        color: rgb(102, 102, 102);
        font-weight: 400;
    }


.cdp-name h6 {
    font-family: "Poppins-SemiBold";
    font-size: 14px;
    color: var(--black);
    margin-bottom: 5px;
    /* margin-left: 20px; */
}

.cdp-name span {
    font-size: 12px;
    margin-top: 5px;
}


/* PDF sec open Right model  */


.modal-backdrop.show {
    /* display: none !important; */
}

.modal.sign-model-right {
    padding-right: 0px !important;
    position: absolute;
    top: 0px;
    bottom: 0px;
    z-index: 11;
}

    .modal.sign-model-right .modal-dialog {
        margin: auto;
        height: 100%;
    }


    .modal.sign-model-right .modal-content {
        height: 100%;
        overflow-y: auto;
    }

    .modal.sign-model-right .modal-body {
        padding: 15px 15px 80px;
        overflow: auto;
    }

    /*Right*/

    .modal.sign-model-right .modal-dialog {
        -webkit-transform: translate3d(0%, 0, 0);
        -ms-transform: translate3d(0%, 0, 0);
        -o-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);
    }

    /*Right*/
    .modal.sign-model-right.fade .modal-dialog {
        right: -50%;
        -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
        -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
        -o-transition: opacity 0.3s linear, right 0.3s ease-out;
        transition: opacity 0.3s linear, right 0.3s ease-out;
    }



    .modal.sign-model-right.fade.show .modal-dialog {
        right: 0;
        box-shadow: 0px 0px 19px rgba(0, 0, 0, .5);
    }



.sign-modal-dialog {
    width: 100% !important;
    max-width: 100% !important;
}

    .sign-modal-dialog.modal-dialog .modal-content {
        border-radius: 0 !important;
        border: none !important;
    }

.modal-open {
    padding-right: 0 !important;
}

.smr-header {
    padding: 0;
    margin: 0;
}


.signer-model-user {
    width: 100%;
    background-color: var(--white);
    /*border-bottom: 1px solid #dfdfdf;*/
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    padding: 20px 10px 0 10px;
    font-size: 18px;
}

.signer-model-user-title {
    color: var(--black);
    text-transform: capitalize;
    white-space: nowrap;
}

.sign-model-inner .psl-top-title {
    margin-left: 0;
}

.sign-model-inner .psl-top-dot {
    margin-right: 0;
}

.sign-model-inner {
    width: 100%;
    padding: 0;
    font-size: 16px;
}

.model-required {
    width: 100%;
    position: relative;
    padding: 0px 10px;
}

    .model-required p {
        margin: 0;
        text-align: left;
        font-family: "Poppins-SemiBold";
        font-size: 16px;
    }

    .model-required input[type="checkbox"] {
        height: 20px;
        width: 20px;
    }

    .model-required input {
        padding: 5px;
        border: 1px solid #cccccc;
        border-radius: 4px;
        font-size: 12px;
        font-family: "Poppins-SemiBold";
    }


        .model-required input.fields-formatting {
            width: 50px;
        }

        .model-required input.fields-datalabel {
            width: 100%;
        }

.model-required-fields {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    align-items: center;
}

    .model-required-fields label {
        margin: 0;
    }



.smr-body {
    padding: 0 !important;
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    /* padding: 0 !important;
    margin: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    /* padding: 0 !important;
    margin: 0;
    display: flex;
    align-items: end; */
}

.sign-model-content {
    list-style: none;
    flex-grow: 1;
}

.sign-model-content {
    list-style: none;
    flex-grow: 1;
}

.sign-modal-delete {
    width: 100%;
    flex-shrink: 0;
    display: flex;
}

.sign-modal-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-size: 18px;
    color: var(--white);
    gap: 10px;
    padding: 10px 0;
}

    .sign-modal-btn svg {
        height: 22px;
        fill: var(--white);
    }

    .sign-modal-btn.signmodal-save {
        width: 70%;
        background-color: var(--blue);
    }

    .sign-modal-btn.signmodal-delete {
        width: 30%;
        background-color: var(--red);
    }

.smr-top {
    /* width: 100%;
    display: flex; */
    background-color: var(--light-blue);
    padding: 13px 24px;
    border-bottom: 1px solid rgb(217, 217, 217);
    display: flex;
    -webkit-box-pack: justify;
    -webkit-box-align: center;
    align-items: center;
    justify-content: inherit;
}

.smr-top-text {
    display: flex;
    -webkit-box-pack: justify;
    -webkit-box-align: center;
    align-items: center;
}

    .smr-top-text svg {
        height: 20px;
        fill: var(--black);
    }

    .smr-top-text p {
        font-size: 18px;
        color: var(--black);
        font-weight: 500;
        margin-bottom: 0;
        font-family: "Poppins-SemiBold";
    }

.smr-delet-btn {
    background-color: var(--black);
    border-radius: 50px;
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

    .smr-delet-btn svg {
        height: 16px;
        fill: var(--white);
    }


/* Manage Profile css */

.manage-profile-body {
    width: 100%;
    height: calc(100vh - 112px);
    position: relative;
    overflow: auto;
    background-color: #E9E9E9;
    /* padding: 50px 100px; */
    padding: 50px;
}

    .manage-profile-body::-webkit-scrollbar {
        display: none;
    }

.mpb-sec {
    background-color: var(--white);
    border-radius: 2px;
    box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
    padding: 20px 50px;
}



/* select file */
.mbp-select-profile {
    width: 100%;
    position: relative;
    padding: 20px 0;
}

    .mbp-select-profile [type="file"] {
        height: 0;
        overflow: hidden;
        width: 0;
        position: absolute;
        left: 0;
        top: 0;
    }

        .mbp-select-profile [type="file"] + label {
            display: flex !important;
            justify-content: center;
            flex-direction: column;
            background: #efefef;
            border-radius: 5px;
            color: var(--black);
            cursor: pointer;
            font-size: inherit;
            font-weight: 500;
            outline: none;
            padding: 80px 50px;
            position: relative;
            transition: all 0.3s;
            vertical-align: middle;
            margin-bottom: 0;
        }

    .mbp-select-profile svg {
        height: 100px;
    }

    .mbp-select-profile span {
        text-align: center;
    }


/*  */

.mbp-right {
    width: 60%;
}

.mpb-sec-title {
    margin-bottom: 20px;
}

    .mpb-sec-title h1 {
        font-size: 24px;
        font-family: 'Poppins-Bold';
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin: 0;
    }

.sf-right-row {
    align-items: center;
}

.mpb-sec-left {
    padding: 0px;
}

    .mpb-sec-left h6 {
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 10px;
        color: var(--black);
    }

    .mpb-sec-left p {
        font-size: 14px;
        margin-bottom: 0px;
        color: #333;
    }

/* signature */

.signature-table {
    font-weight: 400;
    /* border-collapse: separate; */
    border-spacing: 0px;
    color: rgb(30, 30, 30);
    width: 100%;
    font-size: 14px;
}

.signature-model-table {
    background-color: #f9f9f9;
}

thead.manage-plan-head tr {
    border-radius: 10px 10px 0 0;
}

.signature-model-table tr {
    padding: 0 30px;
    border-top: 1px solid rgb(233, 233, 233);
    border-bottom: 1px solid rgb(233, 233, 233);
}

.signature-table tr {
    /* border-top: 1px solid rgb(233, 233, 233); */
    border-bottom: 1px solid rgb(233, 233, 233);
    width: 100%;
    display: flex;
    align-items: center;
}

.signature-table td,
.signature-table th {
    padding: 15px 0;
    width: 100%;
}

.signature-table1 {
}

.signature-actions {
    display: flex;
    justify-content: end;
    width: auto !important;
}

.signature-actions1 {
    width: 150px !important;
}

.sign-sec {
    font-size: 11px;
    font-weight: bold;
    padding: 0px 0px 0px 25px;
    position: relative;
    width: 100%;
}

    .sign-sec p {
        font-size: 12px;
        text-align: left;
    }

.signature-page-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.sign-sec :before {
    border-bottom: 2px solid var(--blue);
    border-left: 2px solid var(--blue);
    border-radius: 0px 0px 0px 25px;
    border-top: 2px solid var(--blue);
    content: "";
    display: block;
    height: 45px;
    left: 0px;
    position: absolute;
    top: 6px;
    width: 20px;
}

.sign-sec h6 {
    font-size: 28px;
    margin: 5px 0px 5px 2px;
    text-overflow: ellipsis;
    overflow: hidden;
    /* white-space: pre-wrap; */
    width: 95%;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ss-1 h6 {
    font-family: "signbulb-1";
}


.ss-2 h6 {
    font-family: "signbulb-2";
}

.ss-3 h6 {
    font-family: "signbulb-3";
}


/* dignature  model */

.signature-modal-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 0;
}

.signature-model-top {
    border-bottom: 1px solid #dee2e6;
    padding: 20px;
}

.signature-model-bottom {
    margin: 4px 0;
    margin: 4px 0;
}

.nav.nav-tabs.signature-model-tab-ul {
    border-bottom: 0;
    padding: 10px 0;
    gap: 22px;
}


.nav-link.signature-model-tab-a {
    margin-bottom: 0;
    border: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    color: var(--black);
    font-family: "Poppins-Bold";
    padding: 0;
}

    .nav-link.signature-model-tab-a.active {
        font-weight: 600;
        border-top: 0;
        border-right: 0;
        border-left: 0;
        border-bottom: 2px solid var(--blue) !important;
        border-radius: 0px;
        /* padding: 6px 0px 16px; */
        position: relative;
        color: var(--blue);
    }


.nav-tabs .nav-link:hover {
    border: 0;
}

.signature-model-body {
    padding: 0;
    padding: 0;
    height: 452px;
    overflow: auto;
}

/*  */

.sf-right.mbp-right img {
    width: 100%;
}

.signature-pad {
    width: 100% !important;
    height: 200px !important;
    border: 1px dashed #c7c7c7;
}

.signpad {
    /*margin-left: 20px;*/
}

.signlabel span,
.signlabel button {
    font-size: 12px;
}

.signature-model-footer {
    justify-content: flex-start;
}

    .signature-model-footer p {
        font-size: 12px;
        color: #717171;
        text-align: left;
    }

.cansel-btn {
    background: none !important;
    color: var(--black);
}


/* =========== Workspace ============== */

.workspace-new-main {
    background-color: #ffffff;
    padding: 15px 15px;
    margin: 10px 0;
    border-radius: 10px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s linear;
}

    .workspace-new-main:hover {
        scale: 1.02;
    }

    .workspace-new-main i {
        font-size: 38px;
        color: #af3641;
    }

    .workspace-new-main .workspace-new-title h5 {
        font-size: 18px;
        font-family: 'Poppins-SemiBold';
        color: #af3641;
        margin: 0;
    }

.workspace-main {
    background-color: #fff;
    padding: 18px 15px;
    margin: 10px 0;
    border-radius: 10px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s linear;
}

    .workspace-main:hover {
        scale: 1.02;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    }

    .workspace-main .workspace-title h3 {
        font-size: 22px;
        font-family: 'Poppins-SemiBold';
        margin-bottom: 0;
        text-overflow: ellipsis;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        display: -webkit-box;
    }

    .workspace-main .workspace-icons-main .switch-workspace-title a {
        font-size: 15px;
        color: #2e78f0;
        font-family: 'Poppins-SemiBold';
    }

    .workspace-main .workspace-icons-main {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        flex: 0 0 auto;
    }

.workspace-model-body {
    height: auto;
}

.modal-content .signature-model-body p {
    text-align: left !important;
}

.workspace-model-top h4 {
    font-size: 24px;
    font-family: "Poppins-Medium";
}

.workspace-model-top p {
    font-size: 16px;
    font-family: "Poppins-Ragular";
}
/* .workspace-model-right{
    background-color: #b4eafd;
} */


/* ========== teams =========== */
.user-licenses {
    background-color: var(--white);
    padding: 25px 20px;
    border-radius: 15px;
}

.user-license-title h1 {
    margin-bottom: 2px;
}

.license-main {
    background-color: #fff;
    border: 1px solid rgb(193, 193, 193);
    border-left: 5px solid #af3641;
    padding: 15px 15px;
    margin: 10px 0;
    border-radius: 5px;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.1s linear;
}

    .license-main .license-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .license-main .license-title h3 {
            font-size: 22px;
            font-family: 'Poppins-Bold';
            margin-bottom: 0;
        }

        .license-main .license-title i {
            font-size: 18px;
            color: #474747;
        }

    .license-main .license-icons-main {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 0 0 auto;
    }

        .license-main .license-icons-main .license-icons-main-sub span {
            font-family: 'Poppins-SemiBold';
        }

.user-current-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .user-current-title h1 {
        margin-bottom: 0;
    }

    .user-current-title i {
        font-size: 20px;
    }

.table-user-main {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .table-user-main .table-user-img img {
        max-width: 100%;
        height: auto;
        border-radius: 50%;
    }

    .table-user-main .table-user-content h5 {
        margin-bottom: 2px;
        font-family: 'Poppins-SemiBold';
        font-size: 14px;
        width: 30ch;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .table-user-main .table-user-content p {
        margin: 0;
        font-size: 14px;
        font-family: 'Poppins-Ragular';
        color: #717171;
    }


.table-main {
    margin-top: 25px;
}

.table-main {
    width: 100%;
    overflow-x: auto;
}

    .table-main tr {
        border-bottom: 1px solid #cdcdcd;
    }

        .table-main tr td {
            vertical-align: middle;
        }

            .table-main tr td select {
                border: none;
                background-color: transparent;
                padding-right: 5px;
                color: rgb(103, 103, 103);
            }
/* .table-main tr td select option{
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border: none;
    outline: none;
} */




/*sign confirmation screen */

.sign-confirmation {
    /* background-color: var(--blue); */
    height: calc(100vh - 111px);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.notification-signature-done {
    height: calc(100vh - 61px) !important;
    background-color: #f2f3f8;
}

.customHrLine {
    margin: 40px auto;
    width: 80%;
}

.set-password {
    height: calc(100vh - 40px) !important;
}

.set-password-inner {
    background-color: transparent;
    box-shadow: none;
    width: 70%;
    margin: auto;
}


.sign-confirmation-inner {
    width: 50%;
    background-color: var(--white);
    border-radius: 20px;
    padding: 50px;
    margin: auto;
}

.signUp-confirmation-inner {
    padding: 20px 20px !important;
}

.sign-confirmation-inner-invited {
    padding: 30px 50px !important;
    width: 65%;
}

.sign-confirmation-inner h3 {
    font-size: 42px;
    color: var(--black);
    font-family: "Poppins-Bold";
    margin-top: 20px;
}

.sign-confirmation-inner h1 {
    font-size: 35px;
    color: var(--black);
    font-family: "Poppins-Bold";
    margin-top: 15px;
}

.sign-confirmation-icon {
    position: relative;
    top: 25px;
    left: 0;
}

    .sign-confirmation-icon svg {
        height: 50px;
        fill: #13e280;
        background-color: #fff;
        border-radius: 40px;
    }


.purchaseBtnInner {
    display: flex;
    gap: 20px;
    align-items: center;
    margin: 20px 0;
}

.sign-purchase-inner h3 {
    font-size: 36px;
}

    .sign-purchase-inner h3 span {
        font-size: 40px;
        vertical-align: middle;
    }

.submitBtnAlt .input-submit {
    border-radius: 5px !important;
    background-color: var(--green);
    border: 1px solid var(--green) !important;
    font-size: 18px !important;
}

.declineBtnAlt .input-submit {
    border-radius: 5px !important;
    background-color: var(--red);
    border: 1px solid var(--red) !important;
    font-size: 18px !important;
}


.sign-confirmation-inner h3 span {
    color: #34a3d6;
    font-family: "Poppins-Bold";
}

.sc-sec-icon {
    position: relative;
    top: 25px;
    left: 0;
}

    .sc-sec-icon svg {
        height: 50px;
        fill: #13e280;
        background-color: #fff;
        border-radius: 40px;
    }

.sc-sec-icon-decline svg {
    height: 50px;
    fill: #cb2328;
    background-color: #fff;
    border-radius: 40px;
}

.sc-sec-icon-decline {
    position: relative;
    top: 25px;
    left: 0;
}

.sc-sec-text {
    width: 80%;
    border: 1px solid #dee0e2;
    border-radius: 4px;
    margin: auto;
    padding: 40px 0 30px 0;
}

    .sc-sec-text h2 {
        font-size: 20px;
        line-height: 20px;
        text-align: center;
    }

    .sc-sec-text a {
        /*color: var(--blue)*/
    }

.reasons-main {
    display: flex;
}

    .reasons-main h2 {
        font-size: 20px;
        font-weight: bold;
        line-height: 20px;
    }

    .reasons-main ul li {
        list-style-type: disc !important;
    }

.sc-sec-link {
    margin-top: 20px;
    font-size: 20px;
}

    .sc-sec-link a {
        font-size: 16px;
        text-transform: capitalize;
        font-weight: bold;
        text-align: center;
        padding: 8px 25px;
        background-color: var(--blue);
        color: var(--white);
        border-radius: 2px;
    }


/* access document css */

.access-document-main {
    width: 100%;
    position: relative;
    height: auto;
}

.access-document-inner {
    width: 80%;
    background-color: transparent;
    margin: auto;
    margin-bottom: 40px;
}

.access-document-doc img {
    width: 100%;
}

.access-document-doc img {
    width: 100%;
    height: 100%;
    margin-top: 40px;
    box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
}




/* wiz-2 tabs css */

.left-tabs {
    border: 0;
    display: block;
}


.left-tabs-a:hover {
    border: 0;
}

.left-tabs-a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    padding: 0;
    margin: 0;
}

    .left-tabs-a.active {
        border: 0;
        border-radius: 0;
        background-color: #f4f4f4 !important;
    }

        .left-tabs-a.active:after {
            content: "";
            display: block;
            position: absolute;
            top: 50%;
            right: 0px;
            width: 3px;
            height: 28px;
            background-color: var(--blue);
            transform: translateY(-50%);
        }

    .left-tabs-a svg {
        fill: var(--black);
        height: 25px;
    }

    .left-tabs-a.disabled {
        opacity: .2;
    }

    .left-tabs-a.active svg {
        fill: var(--blue);
    }





/* welcome-mail css */

.welcome-mail {
    height: auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px;
}

.welcome-mail-inner {
    padding: 50px 100px;
}

.welcome-inner h1 {
    font-size: 28px;
    margin: 30px 0;
    font-family: "Poppins-SemiBold";
}

.welcome-inner p {
    text-align: left;
    margin-top: 40px;
    font-size: 16px;
}

.div-disabled {
    opacity: .5;
    pointer-events: none;
}


/* profile pic css */

.cropit-preview {
    background-color: #F8F8F8;
    background-size: cover;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-top: 7px;
    width: 250px;
    height: 250px;
    overflow: hidden;
}

.brandLogoPreview {
    width: 340px;
    height: 120px;
    margin: 0;
}

.image-editor.brandImageEditor {
    gap: 10px !important;
}
/* Show move cursor when image has been loaded */
.cropit-preview.cropit-image-loaded .cropit-preview-image-container {
    cursor: move;
}

/* Hide file input */
input.cropit-image-input {
    display: none;
}

span.thumb {
    visibility: hidden;
    display: none;
}

.cropit-image-zoom-input.custom {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 5px;
    background: #eee;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    outline: none;
    width: 250px;
}
/* --------------------- */
/*SIgn Delete Model*/
.modal-header.sign-delete-model-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dee2e6;
    background: #b4eafd;
    color: #2a2a2a;
}

    .modal-header.sign-delete-model-header p {
        margin: 0;
    }


.modal-header.sign-regular-model-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dee2e6;
    background: #b4eafd;
    margin-bottom: 0 !important;
}

    .modal-header.sign-regular-model-header p {
        margin: 0;
    }


/*stamp box*/
.pdf-stamp {
    height: 90px;
    width: 90px;
}

    .pdf-stamp img {
        height: auto;
        max-width: 100%;
        width: 100%;
    }

.btn-group button {
    padding: 0;
}



/* password strenght */

/* .password-strength {
    border-radius: 10px;
    height: 5px;
}

.small, small{
    font-size: 70%;
    display:flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
} */

.ps-required-fields {
    text-align: left;
    font-size: 12px;
    color: #818080;
    margin-top: 14px;
}

/* #passwordEye{
    margin-left: -30px;
    cursor: pointer;
    position: absolute;
    top: 17px;
    color: #818080;
} */








/*  */

.progress {
    height: 3px !important;
}



.progress-bar-danger {
    background-color: #e90f10;
}

.progress-bar-warning {
    background-color: #ffad00;
}

.progress-bar-success {
    background-color: #02b502;
}

.fa-eye {
    color: #022255;
    cursor: pointer;
}

.ex-account p a {
    color: #f6086e;
    text-decoration: underline;
}

.fa-circle {
    font-size: 6px;
}

.fa-check {
    color: #02b502;
}



/* manage-plan */

.manage-plans-sec {
    padding: 0;
    border: 1px solid #adadad;
    border-radius: 10px;
}

/* .manage-plan-table{
    border: 1px solid #adadad;
} */

.manage-plan-head {
}

.plan-details-a {
    font-family: 'Poppins-Medium';
    color: var(--blue);
}

.manage-plan-head tr {
    background: #e9ecef;
}

.manage-plan-table tr {
    padding: 10px 30px;
}


    .manage-plan-table tr:last-child {
        border: 0;
    }




/* upgrade plan section  */

.upgrade-plan-section {
    width: 100%;
    position: relative;
}

.upgradeplan-inner {
    width: 100%;
    height: 880px;
    position: relative;
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
    padding: 20px 20px;
    margin: 10px 0px 50px 0;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.upgradeplan-title {
    width: 100%;
}

.upgradeplan-title {
    width: 100%;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: flex-start;
    /*padding: 0 0 20px 0;*/
}

.upgradeplan-title-plan {
    text-align: center;
    border-bottom: 1px solid lightgray;
    padding: 10px 0;
}

.upgradeplan-title-content h1 {
    font-size: 28px;
    font-family: "Poppins-SemiBold";
    margin: 0;
}

.upgradeplan-title-content p {
    font-size: 14px;
    font-family: "Poppins-medium";
    margin: 0;
    color: gray;
}

.upgradeplan-title img {
    width: 40px;
}



.upgradeplan-content {
    width: 100%;
    margin-top: 20px;
    /* height: 180px; */
    flex-grow: 1;
}

    .upgradeplan-content p {
        font-size: 14px;
        color: #474747;
    }

.plans-details-sec {
    /* background-color: var(--white); */
    /* box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px; */
    width: 100%;
}

.plan-details-left,
.plan-details-right {
    background-color: var(--white);
    box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
    border-radius: 10px;
    width: 100%;
}

.plan-status {
    width: 100%;
}

    .plan-status h1 {
        font-size: 22px;
        font-family: "Poppins-SemiBold";
        margin: 0;
        margin-bottom: 10px;
    }

    .plan-status p {
        font-size: 14px;
        margin-bottom: 10px;
        color: #717171;
    }

        .plan-status p span {
            font-weight: bold;
        }


.plans-details-left-bottom {
    width: 100%;
    position: relative;
    padding-bottom: 10px;
}

    .plans-details-left-bottom ul {
        padding: 0;
    }

    .plans-details-left-bottom li {
        margin: 10px 0;
    }

        .plans-details-left-bottom li:hover {
            background-color: #f5f5f5;
        }

.plan-detail-links {
    display: flex;
    gap: 10px;
    font-size: 16px;
    color: #717171;
    font-family: "Poppins-Medium";
    padding: 5px 30px;
    cursor: pointer;
}

    .plan-detail-links span svg {
        height: 20px;
        fill: #717171;
        height: 20px;
    }

.plans-details-left-top {
    padding: 20px 20px 0px 20px;
}



.plan-details-right {
    padding: 20px;
}

    .plan-details-right h1 {
        font-size: 22px;
        font-family: "Poppins-SemiBold";
        margin: 0;
    }

.plan-details-right-top {
    margin-top: 15px;
    width: 100%;
    position: relative;
}

    .plan-details-right-top h1 {
        font-size: 16px;
        color: var(--black);
        font-family: "Poppins-Medium";
        display: flex;
        gap: 8px;
    }

    .plan-details-right-top i {
        background-color: #717171;
        color: var(--white);
        border-radius: 100px;
        height: 15px;
        width: 15px;
        font-size: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .plan-details-right-top p {
        font-size: 14px;
        color: #717171;
        margin-top: 8px;
        margin-bottom: 0;
    }


    .plan-details-right-top a {
        font-size: 14px;
        margin-top: 8px;
        margin-bottom: 0;
    }


.plan-price-table {
    width: 100%;
    position: relative;
    margin-top: 10px;
}

    .plan-price-table table {
        width: 100%;
        position: relative;
        border: 1px solid #e3e3e3;
        color: #767676;
        font-size: 14px;
    }

    .plan-price-table thead {
        background-color: #f5f5f5;
        padding: 20px;
        position: sticky;
        top: 0;
        border: 1px solid #e3e3e3;
    }

        .plan-price-table thead tr {
            border: 1px solid #e3e3e3;
        }

    .plan-price-table table tbody {
        display: block;
        height: auto;
        overflow: auto;
        max-height: 185px;
    }

    .plan-price-table tr {
        border-bottom: 1px solid #e3e3e3;
        vertical-align: baseline;
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    .plan-price-table th,
    .plan-price-table td {
        padding: 10px;
    }

.billing-details {
    width: 100%;
    position: relative;
    /*margin-top: 30px;*/
    border: 1px solid #e3e3e3;
    padding: 15px;
}

.plan-billing-title h1 {
    font-size: 22px;
    font-family: "Poppins-SemiBold";
    color: #717171;
    margin: 0;
}

/* Only For Responsive */
.responsive-section {
    display: none;
}



.signature-pad {
    width: 238px !important;
    height: 62px !important;
}

    .signature-pad.maxSize {
        width: 450px !important;
        height: 200px !important;
    }

#full-width {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
}

.resizable {
    /*background: white;*/
    /*width: 100px;
    height: 100px;*/
    position: absolute;
    top: 100px;
    left: 100px;
}

    .resizable .resizers {
        width: 100%;
        height: 100%;
        border: 3px solid #4286f4;
        box-sizing: border-box;
    }

        .resizable .resizers .resizer {
            width: 10px;
            height: 10px;
            border-radius: 50%; /*magic to turn square into circle*/
            /*background: white;*/
            border: 3px solid #4286f4;
            position: absolute;
        }

            .resizable .resizers .resizer.top-left {
                left: -5px;
                top: -5px;
                cursor: nwse-resize; /*resizer cursor*/
            }

            .resizable .resizers .resizer.top-right {
                right: -5px;
                top: -5px;
                cursor: nesw-resize;
            }

            .resizable .resizers .resizer.bottom-left {
                left: -5px;
                bottom: -5px;
                cursor: nesw-resize;
            }

            .resizable .resizers .resizer.bottom-right {
                right: -5px;
                bottom: -5px;
                cursor: nwse-resize;
            }


.signer-checkbox .signer-a {
    text-decoration: none;
}

    .signer-checkbox .signer-a:hover {
        cursor: pointer;
        color: #af3641;
    }

.pricing-ul {
    padding-left: 4px;
    list-style: none;
}

.upgradeplan-content .pricing-ul .pricing-li {
    /*list-style-type: disc !important;*/
    margin: 12px 0;
    font-size: 14px;
    padding-left: 28px;
    position: relative;
    color: #4a515a;
}

.pricing-ul .pricing-li::before {
    content: "\f00c";
    font-family: "FontAwesome";
    display: inline-block;
    position: absolute;
    left: 0;
    height: 20px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    color: #0756ee;
    background-color: #ecf3ff;
    border-radius: 10px;
}

.sub-type {
    margin: 20px 0;
    min-height: 60px;
}

    .sub-type label {
        color: #000000;
        font-weight: 600;
        font-size: 15px;
    }

    .sub-type select {
        font-size: 15px;
    }


.pricing-amount {
    margin: 30px;
    flex-grow: 0;
}

    .pricing-amount h2 {
        color: #0756ee;
        display: flex;
        gap: 5px;
        flex-direction: column;
        font-family: "Poppins-SemiBold";
        text-align: center;
    }


.pricing-amount-free h2 {
    color: #000000;
    display: flex;
    gap: 5px;
    flex-direction: column;
    font-family: "Poppins-SemiBold";
    text-align: center;
    font-size: 25px;
}

h2.planPricing {
    position: relative;
    font-size: 42px;
    width: fit-content;
    margin: auto;
}

h2.USPricing:before {
    content: '\f155';
    font-family: FontAwesome;
    position: absolute;
    left: -19px;
    font-size: 24px;
    /* font-weight: 700; */
    top: -4px;
}

h2.IndiaPricing:before {
    content: '\e1bc';
    font-family: FontAwesome;
    position: absolute;
    left: -19px;
    font-size: 24px;
    top: -4px;
}

.pricing-amount span {
    font-size: 16px;
    color: #757575;
    width: 100%;
    display: block;
    text-align: center;
}

.sign-sec img {
    height: 2vw;
}

.sign-sec placefield img {
    height: 40px;
    width: fit-content;
}

.radioButtonPlaceField {
    height: auto !important;
}

.checkBoxPlaceField {
    height: auto !important;
}

.checkboxContentPreview {
    margin-right: auto;
}

.radio-placefield-top {
    width: fit-content !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

.radio-placefield-top.radio-placefield-vertical {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: auto !important;
    min-width: auto !important;
}

/* Signature image styling for proper scaling in resizable placefields */
.signature-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

/* Ensure signature images maintain aspect ratio */
.placefield-main img.signature-image,
.dropped-image img.signature-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
}

.radio-placefield-top.radio-placefield-horizontal {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Ensure wrapper div fills container for proper background display */
.radioButtonPlaceField .psl-body-btn.placefield-section {
    height: 100% !important;
    width: 100% !important;
    min-height: 100% !important;
    min-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    }

.radio-placefield-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 8px !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    margin: 2px 4px !important;
    flex-shrink: 0 !important;
    gap: 5px !important;
}

/* Vertical direction specific styles */
.radio-placefield-top.radio-placefield-vertical .radio-placefield-inner {
    width: auto !important;
    max-width: none !important;
    min-width: fit-content !important;
    white-space: nowrap !important;
    display: flex !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    margin: 2px 4px !important;
    flex-shrink: 0 !important;
    gap: 5px !important;
}

.radio-placefield-inner input[type="radio"] {
    width: auto !important;
    min-width: auto !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

    .radio-placefield-top.radio-placefield-vertical .radio-placefield-inner input[type="radio"] {
        flex-shrink: 0 !important;
        width: 18px !important;
        min-width: 18px !important;
        height: 18px !important;
        margin-right: 5px !important;
    }

    /* Prevent character-by-character breaking in vertical radio buttons */
    .radio-placefield-top.radio-placefield-vertical .radio-placefield-inner .fields-radio-btn-label,
    .radio-placefield-top.radio-placefield-vertical .radio-placefield-inner .fields-btn-text,
    .radio-placefield-top.radio-placefield-vertical .radio-placefield-inner label {
        line-break: normal !important;
        word-break: normal !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        display: inline-block !important;
        width: auto !important;
        min-width: fit-content !important;
        max-width: none !important;
        flex-shrink: 0 !important;
    }

/* Horizontal direction specific styles - ensure it works as before */
.radio-placefield-top.radio-placefield-horizontal .radio-placefield-inner {
    width: auto !important;
    max-width: none !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

.radio-placefield-top.radio-placefield-vertical .radio-placefield-inner input[type="radio"] {
    flex-shrink: 0 !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    margin-right: 5px !important;
}

/* Prevent character-by-character breaking in vertical radio buttons */
.radio-placefield-top.radio-placefield-vertical .radio-placefield-inner .fields-radio-btn-label,
.radio-placefield-top.radio-placefield-vertical .radio-placefield-inner .fields-btn-text,
.radio-placefield-top.radio-placefield-vertical .radio-placefield-inner label {
    line-break: normal !important;
    word-break: normal !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: inline-block !important;
    width: auto !important;
    min-width: fit-content !important;
    max-width: none !important;
    flex-shrink: 0 !important;
}

/* Horizontal direction specific styles - ensure it works as before */
.radio-placefield-top.radio-placefield-horizontal .radio-placefield-inner {
    width: auto !important;
    max-width: none !important;
    flex-shrink: 0 !important;
}

.radio-placefield-inner label {
    margin-bottom: 0px;
}

.fields-radio-btn-label {
    line-break: normal;
    word-break: normal;
}

/* Override for vertical radio buttons to prevent character stacking */
.radio-placefield-top.radio-placefield-vertical .fields-radio-btn-label,
.radio-placefield-top.radio-placefield-vertical label.fields-radio-btn-label,
.radio-placefield-top.radio-placefield-vertical .fields-btn-text {
    line-break: normal !important;
    word-break: normal !important;
    white-space: nowrap !important;
    display: inline-block !important;
    width: auto !important;
    min-width: fit-content !important;
    max-width: none !important;
}

.radio-placefield-main {
    padding: 10px !important;
    width: 400px !important;
    line-break: normal;
    word-break: normal;
    }

    .radio-placefield-main input[type="radio"] {
    height: 40px !important;
    width: 40px !important;
}

.radio-placefield-main label {
    font-size: 60px !important;
}

.delete-radio-option {
    background-color: #dc3545 !important;
    border: 2px solid #dc3545 !important;
    transform: translate(-2px, 0px);
}

.radio-button-div {
    height: auto !important;
    width: 500px !important;
}

.modal-editRadio {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

    .modal-editRadio input {
        border: 1px solid #d5d5d5;
        /*border-right: 0;*/
        outline: navajowhite;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 12px;
    }

.modal-editRadio-delete {
    display: none;
}

.delete-radio-option svg {
    height: 14px;
}

.editRadio-inner {
    display: flex;
    align-items: center;
}
/****************************************************************** Payment Gateway *******************************************************************/

.orderAmount-main {
    position: relative;
    width: 100%;
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    height: 100%;
    overflow: auto;
}

.orderAmount-mainAlt {
    height: 160px;
}

.orderAmount-top {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
}

    .orderAmount-top h5 {
        font-size: 20px;
        font-weight: 700;
        color: #383737;
        margin: 0;
    }

.orderAmount-content {
    width: 100%;
    position: relative;
}

.amount-text {
    background-color: #c0eeff;
    padding: 4px 20px;
    font-size: 16px;
    font-weight: 700;
    color: #00a3e0;
    border-radius: 45px;
    display: flex;
    flex-direction: column;
    text-align: center;
}

    .amount-text span {
        font-size: 16px;
        font-weight: 700;
        color: #00a3e0;
    }

    .amount-text .perLicenceTitle {
        font-size: 11px;
        color: #00a3e0;
        margin-top: -6px;
    }

    .amount-text.inline {
        flex-direction: row;
        gap: 1px;
    }

.applyCoupon .model-inp {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 0px;
    margin-bottom: 10px;
}

.applyCoupon p {
    font-size: 12px;
    font-family: "Poppins-Medium";
    text-align: left;
    color: #0dd17f;
    margin: 0;
}

.applyCoupon-btn {
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 5px;
    color: var(--white);
    border: 0;
    background-color: var(--green);
    transition: all 0.15s ease;
}

.removeCoupon-btn {
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 5px;
    color: var(--white);
    border: 0;
    transition: all 0.15s ease;
    background-color: red;
}

.invalidCoupon {
    color: red !important;
}

.orderAmount-img {
    width: 100%;
    position: relative;
    display: flex;
    flex-flow: revert;
    gap: 16px;
    margin: 22px 0;
    flex-wrap: wrap;
}

    .orderAmount-img img {
        width: 55px;
        flex: 0 1;
    }

.orderAmount-type {
    width: 100%;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .orderAmount-type h6 {
        font-size: 14px;
        margin: 0;
        color: #757575;
    }

        .orderAmount-type h6 span {
            font-weight: 600;
            color: #000;
        }

    .orderAmount-type a {
        color: #32b9eb;
        font-family: 'Poppins-Medium';
    }

.arCall-btn {
    position: fixed;
    width: 50px;
    height: 50px;
    bottom: 60px;
    right: 40px;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    box-shadow: 2px 2px 3px #999;
    transition: 0.2s ease-in;
    z-index: 2;
    background-color: #0b81fe;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .arCall-btn svg {
        fill: #fff;
        height: 22px;
    }


/*************************************************************************************************************************************/


.model-inp {
    position: relative;
    margin: auto;
    width: 100%;
    margin-bottom: 15px;
}

    .model-inp input {
        width: 100%;
        padding: 8px 12px;
        font-size: 12px;
        font-weight: 500;
        border: 1px solid #cccccc;
        border-radius: 5px;
        color: #757575;
        transition: all 0.15s ease;
    }

    .model-inp textarea {
        width: 100%;
        padding: 8px 12px;
        font-size: 13px;
        font-weight: 500;
        border: 1px solid #cccccc;
        border-radius: 10px;
        color: #757575;
        transition: all 0.15s ease;
        resize: none;
    }

    .model-inp select {
        width: 100%;
        padding: 8px 12px;
        font-size: 12px;
        font-weight: 500;
        border: 1px solid #cccccc;
        border-radius: 5px;
        color: #757575;
        transition: all 0.15s ease;
    }

        .model-inp select option {
            font-size: 12px;
            background-color: #f0f8ff;
            color: #000000;
            font-weight: 400;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

.alt-model-inp {
    display: flex;
    flex-direction: column;
}

label {
    font-size: 12px;
    color: #757575 !important;
    font-weight: 500;
}


/* ==== */
.detailContentContainer {
    margin: 20px 0;
}

.brandManagementDetailInner {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: flex-start;
}

.sideDetailContainer {
    display: grid;
    grid-template-columns: 250px 1fr;
    align-items: flex-start;
    gap: 40px;
}

.sideDetailCheckContainer {
    align-items: center;
}

.sideDetailTitle span {
    font-size: 14px;
    color: #757575;
}

.sideDetailContent .companyTagline {
    font-size: 15px;
    color: var(--black);
    margin: 0;
}

.sideDetailContent .separate-field {
    width: 340px;
    margin: 0;
}

.inlineCheckbox {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .inlineCheckbox label {
        font-size: 14px;
        margin: 0;
    }

.brandEnableCheckMain label {
    font-weight: 600;
}

.companyLogoUplaod {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 10px;
    align-items: flex-start;
}

.brandManageUplaodButtons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 0;
    margin-top: 0px !important;
}

    .brandManageUplaodButtons .filedrop-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        /* width: 100%; */
        padding: 8px 10px !important;
        border-radius: 5px;
    }

        .brandManageUplaodButtons .filedrop-btn i {
            font-size: 16px;
            color: #fff;
        }

.checkOnlyMain input[type="checkbox"] {
    width: 16px;
    height: 16px;
}





.select-city-dd select {
    background-color: rgba(255, 255, 255, 0.9);
    width: 100%;
    padding: 5px;
    border: 1px solid #f2f2f2;
    border-radius: 2px;
    height: 3rem;
    /*display: none;*/
}

.select-city-dd .select-wrapper {
    position: relative;
}

.separate-field {
    position: relative;
    margin: auto;
    width: 100%;
    margin-bottom: 15px;
}

    .separate-field input {
        width: 100%;
        padding: 8px 12px;
        font-size: 12px;
        font-weight: 500;
        border: 1px solid #cccccc;
        border-radius: 5px;
        color: #757575;
        transition: all 0.15s ease;
    }

    .separate-field textarea {
        width: 100%;
        padding: 8px 12px;
        font-size: 13px;
        font-weight: 500;
        border: 1px solid #cccccc;
        border-radius: 10px;
        color: #757575;
        transition: all 0.15s ease;
        resize: none;
    }

    .separate-field select {
        width: 100%;
        padding: 8px 12px;
        font-size: 12px;
        font-weight: 500;
        border: 1px solid #cccccc;
        border-radius: 5px;
        color: #757575;
        transition: all 0.15s ease;
    }

        .separate-field select option {
            font-size: 12px;
            background-color: #f0f8ff;
            color: #000000;
            font-weight: 400;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

.alt-separate-field {
    display: flex;
    flex-direction: column;
}

label {
    font-size: 12px;
    color: #757575 !important;
    font-weight: 500;
}

.dropdown-content.select-dropdown {
    position: absolute;
    width: 100% !important;
    top: 36px !important;
    height: fit-content !important;
    max-height: 250px !important;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    background-color: #fff;
    display: none;
    opacity: 0;
    z-index: 999;
}

.select-city-dd .select-dropdown.dropdown-content li.selected {
    background-color: rgba(0, 0, 0, 0.03);
}

.select-city-dd .dropdown-content li {
    list-style-type: none;
    clear: both;
    color: #000;
    cursor: pointer;
    line-height: 1.3rem;
    width: 100%;
    text-align: left;
    text-transform: none;
    padding: 0 10px;
}

    .select-city-dd .dropdown-content li > a, .select-city-dd .dropdown-content li > span {
        font-size: 0.9rem;
        color: #4285f4;
        display: block;
        padding: 0.5rem 0;
    }


.select-city-dd .select-wrapper .caret {
    position: absolute;
    right: 0;
    top: 3px;
    bottom: 0;
    margin: 0;
    z-index: 0;
    fill: rgba(0, 0, 0, 0.87);
}

.select-city-dd .disabled, .select-city-dd :disabled {
    pointer-events: none !important;
}

.select-city-dd.dropdowncheckbox select {
    display: none;
}

.dropdowncheckbox .select-wrapper ul {
    background-color: #f0f8ff !important;
}

.queue-col-select {
    display: flex !important;
    align-items: center;
}


.requiredfield label {
    position: relative;
}

    .requiredfield label:after {
        content: "*";
        position: absolute;
        color: red;
        padding-left: 2px;
        font-size: 14px;
    }

.requiredfield span {
    color: red !important;
}

.card-elements {
    width: 100%;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #cccccc;
    border-radius: 5px;
    color: #757575;
    transition: all 0.15s ease;
}

/* Card css start */


.savedCard {
    position: relative;
    background: #fff;
    padding: 30px 20px 10px 20px;
    margin: 10px 0;
    /*width: 400px;*/
    height: 220px;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* margin-bottom: 30px; */
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

.savedCards-top {
    display: flex;
    align-items: self-start;
    justify-content: space-between;
    width: 100%;
}

    .savedCards-top h1 {
        font-size: 18px;
        font-family: 'Poppins-Bold';
        margin: 0;
    }

.saveCard-img {
    height: 22px;
}

    .saveCard-img img {
        max-height: 100%;
        width: auto;
    }

.savedCards-number {
    margin: 22px 0;
    width: 100%;
    position: relative;
}

    .savedCards-number p {
        font-size: 12px;
        font-family: 'Poppins-Medium';
        color: #757575;
        margin: 0;
    }

    .savedCards-number h1 {
        font-size: 16px;
        margin: 0;
        color: #000;
        font-family: 'Poppins-Bold';
        letter-spacing: 3px;
    }

.defaultCard {
    position: absolute;
    top: 0;
    left: 0;
    background: #404040;
    padding: 5px 10px;
    border-radius: 0 0 5px 0;
}

    .defaultCard h2 {
        font-size: 18px;
        margin: 0;
        font-family: 'Poppins-Bold';
        background-image: linear-gradient( to right, #a07f0d 0, #e7be2f 28%, #dcbf59 50%, #e7be2f 70%, #a07f0d 100% );
        color: transparent;
        -webkit-background-clip: text;
    }

.savedCards-bottom {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

    .savedCards-bottom p {
        font-size: 10px;
        font-family: 'Poppins-Medium';
        color: #757575;
        margin: 0;
    }

    .savedCards-bottom h1 {
        font-size: 14px;
        margin: 0;
        color: #000;
        font-family: 'Poppins-Bold';
    }

.cardHolder-name h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    /* white-space: nowrap; */
    width: 16vw;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.savedCards-btns {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    transition: .5s ease;
    background: #0000005c;
    z-index: 1;
    transition: 1s ease;
    backdrop-filter: blur(3px);
}

.savedCard:hover .savedCards-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    display: flex;
    transition: 1s ease;
}

.add-newCard {
    width: 100%;
    position: relative;
    margin: 10px 0;
}

    .add-newCard button {
        position: relative;
        border: 1px dashed #333;
        background: #fff;
        height: 220px;
        border-radius: 20px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
    }


    .add-newCard i {
        font-size: 50px;
        color: #757575;
    }

.savedCards-btnsInner {
    display: flex;
    gap: 5px;
}

    .savedCards-btnsInner button {
        border: 0;
        height: 30px;
        width: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        color: #fff;
    }

        .savedCards-btnsInner button.deleteCards {
            background: #dc3545;
        }

        .savedCards-btnsInner button.editCards {
            background: #0DD17F;
        }

/**/
.saveCards-main .bgColor1 {
    background: #FFEFBA;
    background: -webkit-linear-gradient(to right, #FFFFFF, #FFEFBA);
    background: linear-gradient(to right, #FFFFFF, #FFEFBA);
}

.saveCards-main .bgColor2 {
    background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}

.saveCards-main .bgColor3 {
    background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%);
}

.saveCards-main .bgColor4 {
    background: #F2994A; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #F2C94C, #F2994A); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #F2C94C, #F2994A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.saveCards-main .bgColor5 {
    background: #ff6e7f; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #bfe9ff, #ff6e7f); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #bfe9ff, #ff6e7f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
/**/

.modal-card-dialog {
    /*margin: auto;*/
    width: 40% !important;
    max-width: 40% !important;
    max-height: calc(100vh - 162px);
    transform: translate(0,0px) !important;
}

.signature-card-model-body {
    height: auto;
    overflow: auto;
    align-items: center;
    position: relative;
    display: table;
}

.savecard-default {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.defaultCard-checkbox {
    display: flex;
    align-items: center;
    gap: 5px;
}

    .defaultCard-checkbox label {
        margin: 0;
    }

.cardNotes {
    width: 100%;
    position: relative;
    margin-top: 10px;
    display: flex;
    align-items: start;
    gap: 10px;
}

    .cardNotes p {
        font-size: 12px;
        font-family: 'Poppins-Ragular';
        text-align: left;
        color: red;
        margin: 0;
    }

.savedCard-expiry-row {
    width: 100%;
    position: relative;
    display: flex;
}

.modelInp-inputAlt {
    display: flex;
    justify-content: space-between;
}

    .modelInp-inputAlt a {
        font-size: 14px;
    }

.multiBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.model-textbox {
    padding: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #000 !important;
}

.paymentStatus {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 5px;
    align-items: center;
    margin-bottom: 12px;
}

    .paymentStatus i {
        font-size: 70px;
        color: #0dd17f;
    }

    .paymentStatus h1 {
        font-size: 26px;
        margin: 0;
        color: #0dd17f;
        margin-top: 5px;
        font-family: 'Poppins-Medium';
    }

    .paymentStatus h6 {
        margin: 0;
        font-size: 18px;
        font-family: 'Poppins-Medium';
        color: #4c4c4c;
        text-align: center;
        margin-top: 10px;
        line-height: 1.4;
        width: 90%;
    }

.paymentCancel i {
    color: #f82d2d;
}

.paymentCancel h1 {
    color: #f82d2d;
}

.halfWidthModal-dialog {
    width: 30% !important;
    max-width: 30% !important;
}

.upgradePlanModal-main {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .upgradePlanModal-main svg {
        height: 100px;
    }

    .upgradePlanModal-main h1 {
        font-size: 24px;
        font-family: 'Poppins-Bold';
        margin: 0;
        color: #32b9eb;
    }

    .upgradePlanModal-main p {
        font-size: 16px;
        margin: 0;
        color: #757575;
        font-family: 'Poppins-Medium';
    }

.upgradePlanModal-btn {
    width: 100%;
    position: relative;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .upgradePlanModal-btn .btn-blue {
        background: #35b9eb;
        color: #fff;
        border: 0;
    }

.workspaceMain {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .workspaceMain h4 {
        font-size: 22px;
        color: #000;
        font-family: 'Poppins-SemiBold';
        margin: 0;
    }

    .workspaceMain p {
        font-size: 14px;
        margin: 0;
        color: #757575;
        text-align: left;
    }

.delete-text {
    font-size: 18px;
    margin: 10px 0;
}

.planDetails-standard {
    height: 27em;
}

/*.planDetails-type {
    height: 240px;
    overflow: auto;
}*/

.alertSec {
    width: 100%;
    position: relative;
    background: #ffe7e7;
    padding: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .alertSec h6 {
        margin: 0;
        font-size: 14px;
        color: #ed1b1b;
    }

    .alertSec a {
        margin: 0;
        font-size: 14px;
        font-family: "Poppins-SemiBold";
    }

.close-alertPopup {
    position: absolute;
    right: 0;
    top: 50%;
    padding: 2px;
    transform: translate(-10px, -50%);
}

    .close-alertPopup a {
        font-size: 20px;
        color: #ed1b1b;
        font-family: "Poppins-Bold";
    }

.pdfFieldsec-left {
    height: calc(100vh - 110px);
}


.delete-account {
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
    cursor: pointer;
}

    .delete-account:hover a {
        color: #af3641;
    }

.delete-account-popup p {
    text-align: left !important;
}

.understand-checkbox {
    margin-top: 10px;
}

    .understand-checkbox label {
        font-size: 17px;
        font-weight: 500;
    }

.mpb-sec-title.myPro-title {
    display: flex;
    justify-content: space-between;
}

.delete-account-popup li {
    list-style-type: disc;
    font-family: "Poppins-Ragular";
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
}

.delete-account-popup ul {
    padding-left: 20px;
}

.delete-account-popup h6 {
    font-family: "Poppins-SemiBold";
    font-size: 20px;
}

.bg-yellow {
    background-color: #ffd65b !important;
}


.welcome-modal .popup-content-inner h6 {
    text-align: center;
}

.modal-dialog {
    width: 60%;
    max-width: 60%;
}

.header-sub-nav {
    display: none;
}

.upload-range-main {
    display: flex;
    align-items: center;
    gap: 5px;
}

.image-editor {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

span.thumb.active {
    display: none;
}

.sfImageLeft {
    margin-top: 28px;
}

.upload-image-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.cropit-image-btn {
    padding: 5px 8px !important;
}

.settings-left {
    margin: 20px 0 10px 0 !important;
}

.planDetails-standard {
    margin-top: 20px;
}

.plan-details-center {
    overflow: unset !important;
}

.popup-content-inner img {
    height: 180px;
}



/* =========================== wizard-preview ========================= */

.preview-main {
    background-color: var(--white);
}

.preview-row-main {
    padding-bottom: 70px;
}

.wizard-first-content::after {
    position: absolute;
    content: "";
    height: 100%;
    border-radius: 50px;
    background-color: #e9e9e9;
    width: 1px;
    top: 0%;
    right: 0%;
    /* border-right: 1px solid #e9e9e9; */
}

.preview-workspace-main {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .preview-workspace-main p {
        margin: 0;
        font-family: 'Poppins-Medium';
        color: var(--black);
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .preview-workspace-main span {
        font-family: 'Poppins-Medium';
        font-size: 14px;
        color: #959595;
        /*overflow: hidden;
        text-overflow: ellipsis;*/
        white-space: nowrap;
    }

.wizardPreviewTopContent .previewWorkspaceMainAlt {
    width: 100%;
}

.content-show-inner {
    border: 1px solid #CECECE;
    /*border-radius: 10px;*/
    padding: 15px 20px 10px 20px;
    margin: 0 0 30px 0;
}

.recipient-title-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

    .recipient-title-top span {
        font-size: 17px;
        font-family: 'Poppins-SemiBold';
        color: var(--red);
        position: relative;
        padding-bottom: 6px;
    }

        .recipient-title-top span::after {
            position: absolute;
            content: "";
            height: 3px;
            border-radius: 50px;
            background-color: var(--red);
            width: 75%;
            left: 0%;
            bottom: 0%;
        }


.recipient-legend-top {
    display: flex;
    gap: 30px;
    align-items: center;
    margin: 20px 0 10px 0;
}

.recipient-legend-inner {
    display: flex;
    gap: 6px;
    align-items: center;
}

    .recipient-legend-inner div {
        height: 14px;
        width: 14px;
        border-radius: 50%;
    }

.signer-legend div {
    background-color: #32B9EB;
}

.approver-legend div {
    background-color: #FF5785;
}

.recipient-legend-inner p {
    font-size: 15px;
    font-family: 'Poppins-Medium';
    color: var(--black);
    margin-bottom: 0;
}


.previewTable {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    /*margin-bottom: 25px;*/
}

    .previewTable thead {
        background: #f6f6f6;
        border-top: 1px solid #e9e9e9;
        border-bottom: 1px solid #e9e9e9;
        border-left: 1px solid #e9e9e9;
        border-right: 1px solid #e9e9e9;
    }

        .previewTable thead th {
            font-size: 14px;
            font-weight: bold;
            color: var(--black);
            padding: 6px 2px;
        }

    .previewTable tbody {
        background-color: var(--white);
        border-left: 1px solid #e9e9e9;
        border-right: 1px solid #e9e9e9;
    }

        .previewTable tbody td {
            font-size: 14px;
            font-family: 'Poppins-Medium';
            color: #555555;
            padding: 3px 2px;
            border-bottom: 1px solid #e9e9e9;
            vertical-align: middle;
        }

.cceirTable tbody td {
    padding: 9px 2px;
}

.previewTable tbody td p {
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
    width: 32ch;
    margin-bottom: 0;
}

.signer-badge {
    width: 5px;
    height: 40px;
    background-color: #32B9EB;
}

.approver-badge {
    width: 5px;
    height: 40px;
    background-color: #FF5785;
}

.cceir-heading {
    background-color: var(--blue);
    padding: 6px 10px;
    border-radius: 4px 4px 0 0;
}

    .cceir-heading h5 {
        margin-bottom: 0;
        color: var(--white);
        font-size: 18px;
        font-family: 'Poppins-SemiBold';
    }



.email-subject-main {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0;
}

    .email-subject-main span {
        width: max-content;
        white-space: nowrap;
    }

.email-message-main {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

    .email-message-main span {
        width: max-content;
        white-space: nowrap;
    }

.email-subject-main p {
    margin: 0;
    font-family: 'Poppins-Medium';
    color: var(--black);
    font-size: 15px;
    width: 52ch;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.email-subject-main span {
    font-family: 'Poppins-Medium';
    font-size: 15px;
    color: #959595;
}

.email-message-main p {
    margin: 0;
    font-family: 'Poppins-Medium';
    color: var(--black);
    font-size: 15px;
    width: 52ch;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.email-message-main span {
    font-family: 'Poppins-Medium';
    font-size: 15px;
    color: #959595;
}


.file-preview-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*margin: 30px 0 20px 0;*/
}

    .file-preview-top p {
        margin: 0;
        font-family: 'Poppins-Medium';
        color: var(--black);
        font-size: 16px;
        width: 45ch;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .file-preview-top select {
        border: 1px solid #e9e9e9;
        padding: 7px 70px 7px 10px;
        border-radius: 4px;
        color: #6b6b6b;
        font-size: 16px;
        width: max-content;
        -webkit-appearance: none;
    }

.signer-dropdown {
    background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
    background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.4em;
    background-size: 5px 5px, 5px 5px, 1px 1.5em;
    background-repeat: no-repeat;
}

.preview-file-main {
    border: 1px solid #CECECE;
    width: 100%;
    height: 720px;
    overflow: auto;
    padding: 10px 10px 0 10px;
    background-color: #e9e9e9;
}

    .preview-file-main img {
        width: 100%;
        height: auto;
    }


.signPreview-SignerDropdown {
    /*width: fit-content;*/
    width: 180px;
}

    .signPreview-SignerDropdown button {
        padding: 3px 12px;
        height: fit-content;
        gap: 8px;
        font-size: 14px;
    }

    .signPreview-SignerDropdown .psl-top-title {
        margin: 0;
    }

    .signPreview-SignerDropdown .psl-top-dot {
        margin: 0;
    }

    .signPreview-SignerDropdown .dropdown-menu.show {
        display: block;
        border: 1px solid #e3e3e3;
        margin: 0;
    }

.document-main {
    background-color: #fff;
    position: relative;
    overflow: visible;
}


.preview-inner-image {
    background-color: #ffffff;
    position: relative;
    overflow: visible;
    }

.placefield-main {
    position: absolute;
    box-sizing: border-box;
    overflow: visible;
}

.radioButtonPlaceField {
    position: absolute;
    box-sizing: border-box;
    overflow: visible;
}
.previewtableHead {
    margin-bottom: 25px;
}

.previewTable tr {
    /*float: left;*/
    width: 100%;
}

    .previewTable tr td p {
        width: 80%;
        text-overflow: ellipsis;
        text-wrap: nowrap;
        overflow: hidden;
        margin-bottom: 0;
    }

    .previewTable tr td span {
        text-wrap: nowrap;
        margin: 0 8px;
    }

.currentWorkspaceHalf {
    width: 20ch !important;
}

.pdf-name-wrap {
    display: -webkit-box;
    -webkit-line-clamp: 1; /* Number of lines to show */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdf-TwoLine-wrap {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Number of lines to show */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


.signerUserTitleSide {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 18ch;
}

.email-message-main {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.radioPlacefieldPreview {
    height: 10px;
    width: 10px;
}

.signature-dropped-image img {
    position: absolute;
}

.make-transparent {
    mix-blend-mode: multiply;
}

.checkBoxPlacefieldPreview {
    height: 13px;
    width: 13px;
    margin-top: 12px;
}

.checkboxPlacefieldTop {
    padding: 0px 5px;
    display: flex;
    gap: 4px;
    align-items: center;
    height: 100%;
    width: 100% !important;
}

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


.mobileTogglePlacefields {
    padding: 12px 10px;
    background-color: #eaf7ff;
}

.mobileTogglePlacefields-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

    .mobileTogglePlacefields-inner h4 {
        margin-bottom: 0;
        font-size: 15px;
        font-weight: 600;
        color: #32b9eb;
    }

    .mobileTogglePlacefields-inner i {
        color: #32b9eb;
        font-size: 14px;
    }

#mobileTogglePlacefields {
    display: none;
}

.orderAmount-topRight {
    width: auto;
}

.amountLegend {
    width: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

.amountLegendAlt {
    justify-content: flex-end;
    /*margin-bottom: 10px;*/
}

.amountLegend del {
    font-size: 14px;
    font-family: "Poppins-SemiBold";
}

.orderAmount-topRight p {
    font-size: 14px;
    font-family: "Poppins-Medium";
    text-align: right;
    color: #0dd17f;
    margin-bottom: 0;
}

    .orderAmount-topRight p span {
        font-size: 14px;
        font-family: "Poppins-Medium";
        text-align: right;
        color: #0dd17f;
    }

.orderAmountFullWidth {
    width: 100% !important;
}



.downgradeModal-footer {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

    .downgradeModal-footer button {
        font-size: 14px;
    }


.planDetailDiscount {
    font-size: 15px;
    font-weight: 600;
    color: #32b9eb;
}



.delegateLegends {
    display: flex;
    gap: 35px;
    align-items: center;
    padding: 5px 0 15px 0;
    border-bottom: 1px solid rgb(233, 233, 233);
}

.delegateTopLegend {
    display: flex;
    gap: 6px;
    align-items: center;
}

    .delegateTopLegend div {
        height: 10px;
        width: 10px;
    }

    .delegateTopLegend .active {
        background-color: #29d18b;
    }

    .delegateTopLegend .deactive {
        background-color: #a3a3a3;
    }

    .delegateTopLegend span {
        font-family: 'Poppins-Medium';
        font-size: 13px;
    }

.delegateGridRecord h6 {
    margin-bottom: 2px;
    font-family: 'Poppins-SemiBold';
    font-size: 14px;
    width: 25ch;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.aliasGridRecord h6 {
    width: 40ch;
}

.aliasGridRecord .aliasEmail {
    width: 44ch;
}

.delegateGridRecord label {
    margin-bottom: 0px;
    font-family: 'Poppins-SemiBold';
    font-size: 14px;
    width: 25ch;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: rgb(30, 30, 30) !important;
}

.delegateGrid-legend {
    width: 5px;
    height: 50px;
    background-color: #a3a3a3;
}

    .delegateGrid-legend.active {
        background-color: #29d18b;
    }

.guestUserSignup {
    width: 97%;
    margin: 25px auto;
    border: 1px solid #dfdfdf;
    padding: 20px 30px 95px 30px;
    border-radius: 10px;
    position: relative;
}

.guestUserSignupTitle h2 {
    margin-bottom: 25px;
    font-family: 'Poppins-SemiBold';
    font-size: 22px;
    line-height: 30px;
}

.guestUserSignupForm {
    text-align: left;
}

.guestUserButton {
    background: #2064e2;
    border: 1px solid #2064e2;
    text-decoration: none !important;
    font-weight: 500;
    margin-top: 20px;
    color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    padding: 10px 24px;
    display: inline-block;
    border-radius: 50px;
}

.visitCardText {
    /*background-color: #f2f2f2;*/
    padding: 6px 20px;
    width: 60%;
    margin: auto;
    /*position:absolute;*/
    /*bottom: -60px;
    right: -15px;
    border-radius: 10px 0 10px 0;*/
    text-align: center;
    margin-top: 5px;
}

    .visitCardText a {
        text-decoration: none;
        color: #0045c5;
        position: relative;
    }

    .visitCardText span {
        font-size: 13px;
        font-weight: 500;
    }

    .visitCardText .visitTextIcon {
        font-size: 12px;
        margin-left: 3px;
        position: absolute;
        right: -10px;
        bottom: 4px;
        animation: rightanimate;
        animation-duration: 1.2s;
        animation-iteration-count: infinite;
    }

@keyframes rightanimate {
    0% {
        right: -10px;
    }

    50% {
        right: -13px;
    }

    100% {
        right: -10px;
    }
}


.whiteMain-section {
    background-color: var(--white);
    border-radius: 15px;
    box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
    padding: 20px 50px;
}

.whiteMain-section-title h1 {
    font-size: 24px;
    font-family: 'Poppins-Bold';
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
}

.current-workspace {
    background-color: var(--white);
    padding: 25px 20px;
    border-radius: 15px;
    margin: 30px 0;
}

.sign-regular-model-header .close {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;
    background: var(--red);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 30px;
    z-index: 1;
    opacity: 1;
}

.acknowledgeModal {
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100%;
    height: 100%;
    display: block !important;
    opacity: 1 !important;
    transition: 0.3s all linear;
}

    .acknowledgeModal.hide {
        visibility: hidden !important;
        opacity: 0 !important;
    }

    .acknowledgeModal .modal-dialog {
        /* background-color: #6072FE; */
        width: 35%;
        margin: auto;
    }

    .acknowledgeModal .modal-content {
        background-color: #fff;
        padding: 30px 30px 20px 30px;
        border-radius: 20px;
        position: relative;
        overflow: hidden;
    }

.acknowledgeModalBody {
    text-align: center;
}

    .acknowledgeModalBody p {
        color: #343434;
        font-weight: 500;
        font-size: 20px;
        margin-bottom: 35px;
        font-family: 'Poppins-Medium';
    }

    .acknowledgeModalBody img {
        width: 200px;
        height: auto;
        margin-bottom: 20px;
    }

    .acknowledgeModalBody::before {
        content: '';
        display: block;
        border-radius: 50%;
        width: 170px;
        height: 170px;
        background-color: #94e2ff;
        /* color: black; */
        opacity: .2;
        position: absolute;
        top: -80px;
        left: -80px;
    }

    .acknowledgeModalBody::after {
        content: '';
        display: block;
        border-radius: 50%;
        width: 110px;
        height: 110px;
        background-color: #94e2ff;
        /* color: black; */
        opacity: .2;
        position: absolute;
        bottom: 20px;
        right: -50px;
    }

    .acknowledgeModalBody .acknowledgeButton {
        background-color: #32b9eb;
        border: 1px solid #32b9eb;
        color: #fff;
        padding: 8px 40px;
        border-radius: 100px;
        font-size: 17px;
        /* transition: all 0.1s linear; */
    }

        .acknowledgeModalBody .acknowledgeButton:hover {
            opacity: .9;
        }

.radiobutton-main {
    display: flex;
    gap: 6px;
    align-items: center;
    /* margin:5px 0; */
    padding: 4px 0;
}

.radiofirst-main {
    border-bottom: 1px solid #e1e1e1;
}

.radiobutton-main label {
    margin-bottom: 0;
    font-size: 14px;
    color: #565656 !important;
    font-family: 'Poppins-Ragular';
    /* font-weight: 600; */
}

.radiobutton-main input[type="radio"] {
    accent-color: #000;
}


.emptydelegates {
    text-align: center;
}

    .emptydelegates h1 {
        font-size: 25px;
        margin-bottom: 0;
        color: #828282;
    }


.delegate-table tr th {
    color: #a3a3a3;
    font-size: 13px;
}

.documentSec-dropdown {
    display: flex;
    gap: 20px;
}

/* -- User Notice */

.userNotice {
    width: 100%;
    position: relative;
    background-color: #E9E9E9;
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
}

.userNoticeIbber {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
}

    .userNoticeIbber h1 {
        font-size: 14px;
        font-family: "Poppins-Medium";
        color: var(--red);
        margin: 0;
    }

    .userNoticeIbber a {
        font-size: 14px;
        font-family: "Poppins-semiBold";
        color: var(--red);
        margin: 0;
        text-decoration: underline;
    }

.userNotice-icon {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--white);
    margin-right: 18px;
}

    .userNotice-icon i {
        font-size: 16px;
        color: var(--red);
    }

.documentSettings-main {
    margin: 20px 180px;
    margin-top: -30px;
}

.indexDocument {
    margin: 40px 40px 25px;
    height: 75%;
    height: -webkit-fill-available;
}

.indexDelect-file {
    /*height: 300px;*/
    height: 390px;
}

.indexDelect-filePreview {
    height: 390px;
}


.otpMainContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.inputsContainer {
    display: flex;
    gap: 30px;
    align-items: center;
}

.OTPInput {
    width: 40px;
    border: none;
    border-bottom: 2px solid rgba(0, 0, 0, 0.3);
    text-align: center;
    font-size: 28px;
    color: #000000;
}

    .OTPInput:focus {
        border-bottom: 2px solid #20c5ff;
        outline: none;
    }

    .OTPInput:disabled {
        border-bottom: 2px solid #e7e7e7;
        background-color: transparent !important;
    }



.verifyOTPTitle {
    margin-bottom: 50px;
}

    .verifyOTPTitle h1 {
        font-size: 28px;
        font-weight: bold;
        color: #000;
        margin-bottom: 10px;
    }

    .verifyOTPTitle p {
        font-size: 16px;
        color: #848484;
    }

        .verifyOTPTitle p a {
            font-weight: 600;
        }

.verifyOTPMessage {
    margin-bottom: 20px;
}

    .verifyOTPMessage span {
        font-size: 16px;
        color: #848484;
    }

.resendOTPContainer {
    text-align: right;
    margin-top: 16px;
}

    .resendOTPContainer h2 {
        font-size: 15px;
        color: #8c8a88;
        margin-right: 20px;
    }

        .resendOTPContainer h2 a {
            font-weight: 600;
            color: #32b9eb;
        }

.verifyOTP-btn {
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 5px;
    letter-spacing: 1px;
    color: var(--white);
    border: 0;
    background-color: var(--green);
    transition: all 0.15s ease;
    margin-right: 20px;
}


.buyLicenceTop p {
    font-size: 15px;
    text-align: right;
}

.buyLicenceTop .licenceDiscountText {
    background-color: #ceffef;
    padding: 3px 10px;
    color: #14ab46;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
}

.licenceModelInp {
    width: 27%;
    margin: 0;
}

.quantityLicence {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
}

.licenseMinus,
.licensePlus {
    display: block;
    width: 30px;
    height: 28px;
    margin: 0;
    background: #dee0ee;
    text-decoration: none;
    text-align: center;
    line-height: 28px;
    font-size: 18px;
}

    .licenseMinus:hover,
    .licensePlus:hover {
        background: #d8deff;
        color: #fff;
    }

.licenseMinus {
    border-radius: 3px 0 0 3px;
}

.licensePlus {
    border-radius: 0 3px 3px 0;
}

.licenseInput {
    width: 60px;
    height: 28px;
    margin: 0;
    padding: 0;
    text-align: center;
    border-top: 2px solid #dee0ee;
    border-bottom: 2px solid #dee0ee;
    border-left: 1px solid #dee0ee;
    border-right: 2px solid #dee0ee;
    background: #fff;
    color: #8184a1;
    font-size: 14px;
}

.licenseMinus:link,
.licensePlus:link {
    color: #8184a1;
}

.licenseMinus:visited,
.licensePlus:visited {
    color: #8184a1;
}

.licenseField {
    font-size: 14px;
    font-weight: 500;
}

.totalAmountBottom {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 10px;
    gap: 10px;
}

.totalAmountBottomTitle span {
    font-size: 14px;
    font-weight: 500;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.inlineCheckbox {
    display: flex;
    gap: 10px;
}

    .inlineCheckbox input {
        width: auto !important;
    }

    .inlineCheckbox label {
        font-size: 16px !important;
        margin-bottom: 0;
    }

.authentication-toggle-btn input {
    display: none !important;
}

.authenticationImageMain img {
    max-width: 100%;
    height: auto;
}


/*=========switch============*/
.is2FAEnableInner {
    width: 16rem;
    position: relative;
    display: flex;
    gap: 5px;
    padding: 0;
    background: #ededed;
    line-height: 3rem;
    border-radius: 100px;
    align-items: center;
    z-index: 1;
}

    .is2FAEnableInner.active {
        background: #d0f2ff;
    }

    .is2FAEnableInner input {
        visibility: hidden;
        position: absolute;
        top: 0;
    }

    .is2FAEnableInner label {
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 0;
        width: 50%;
        padding: 0;
        margin: 0;
        text-align: center;
        cursor: pointer;
        color: var(--blue);
    }

.switch-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    padding: 5px 6px;
    z-index: 3;
    transition: transform .5s cubic-bezier(.77, 0, .175, 1);
}

.is2FASwitch {
    border-radius: 100px;
    background: #858585;
    height: 100%;
    z-index: 1;
    color: var(--white);
}

    .is2FASwitch.active {
        background: var(--blue);
    }

    .is2FASwitch div {
        font-size: 15px;
        font-weight: 500;
        width: 100%;
        text-align: center;
        opacity: 0;
        display: block;
        color: var(--white);
        transition: opacity .2s cubic-bezier(.77, 0, .175, 1) .125s;
        will-change: opacity;
        position: absolute;
        top: 0;
        left: 0;
    }

.is2FAEnableInner input:nth-of-type(1):checked ~ .switch-wrapper {
    transform: translateX(0%);
}

.is2FAEnableInner input:nth-of-type(2):checked ~ .switch-wrapper {
    transform: translateX(100%);
}

.is2FAEnableInner input:nth-of-type(1):checked ~ .switch-wrapper .is2FASwitch div:nth-of-type(1) {
    opacity: 1;
}

.is2FAEnableInner input:nth-of-type(2):checked ~ .switch-wrapper .is2FASwitch div:nth-of-type(2) {
    opacity: 1;
}

.recordsDown {
    font-size: 20px;
    color: #32b9eb;
}

.mapping-table td, .mapping-table th {
    padding: 15px 10px;
    width: auto !important;
    border: 1px solid #d2d2d2;
}

.deviceTypeTitle {
    text-align: left;
}

    .deviceTypeTitle h1 {
        font-size: 19px;
        margin-bottom: 0;
        color: #464646;
        font-weight: 600;
    }

.gridMainHeader {
    background-color: #ededed;
}

.gridSubHeader {
    background-color: #ecfaff;
}

.mapping-table .mappingInnerGrid {
    padding: 0 !important;
}

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


.googleBtnDiv {
    margin-bottom: 14px;
}

.btn-google {
    width: 100%;
    background-color: #f2f2f2;
    color: #212529;
    font-weight: 500;
    border: none;
    padding: 10px 30px;
    border-radius: 8px;
}

    .btn-google img {
        max-width: 5%;
        height: auto;
    }

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

.loginMethodsLink {
    border-radius: 4px;
    font-size: 15px;
    font-weight: 500;
    color: #0072ff;
    width: 100%;
    display: block;
    text-align: center;
}

    .loginMethodsLink:hover {
        color: #0072ff;
    }

.listTopMain {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.userlistTopMain {
    padding: 30px 20px;
}

.filterMain {
    display: flex;
    gap: 15px;
    align-items: center;
    width: 80%;
}

.filterIconMain {
    background-color: #E5F8FF;
    border-radius: 4px;
    padding: 8px 14px;
}

    .filterIconMain i {
        font-size: 18px;
        color: #0B81FE;
    }

.filterTxtMain {
    width: 30%;
}

    .filterTxtMain input[type="text"] {
        font-size: 13px;
        border-radius: 4px;
        padding: 8px 12px;
        font-weight: 500;
        border: 1px solid #cccccc;
        color: #757575;
        width: 100%;
    }

.filterDropdownMain {
    width: 30%;
}

    .filterDropdownMain select {
        font-size: 13px;
        border-radius: 4px;
        padding: 8px 12px;
        font-weight: 500;
        border: 1px solid #cccccc;
        color: #757575;
        width: 100%;
    }

.filterBtnsMain {
    display: flex;
    gap: 10px;
    align-items: center;
}

.filterSearch button {
    background-color: #3CC7D2;
    border: 1px solid #3CC7D2;
    padding: 6px 14px;
}

    .filterSearch button i {
        color: var(--white);
        font-size: 17px;
    }

.filterCancel button {
    background-color: #DC3545;
    border: 1px solid #DC3545;
    padding: 6px 14px;
}

    .filterCancel button i {
        color: var(--white);
        font-size: 18px;
    }

.newTemplateContainer {
    display: flex;
    justify-content: center;
}

    .newTemplateContainer .newTemplateBtn {
        width: 87%;
        background-color: #32b9eb;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 9px 0;
        margin: auto;
    }

.sideLeftBtn {
    display: flex;
    padding: 13px 60px !important;
}

    .sideLeftBtn.active {
        background-color: #e8f5ff !important;
        color: #32b8ea !important;
    }

    .sideLeftBtn button {
        font-size: 15px;
    }

    .sideLeftBtn.active button span {
        color: #32b8ea !important;
    }

.sideLeftTitleMain {
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 8px;
}

    .sideLeftTitleMain svg {
        width: 17px;
        height: auto;
    }

.sideLeftTitle {
    padding: 0;
}


.separateOption:before {
    content: " ";
    display: block;
    height: 2px;
    width: 45px;
    position: absolute;
    top: 50%;
    left: 40px;
    background: #ccc;
}

.separateOption {
    position: relative;
    /*new lines  */
    max-width: 500px;
    margin: 10px auto;
    text-align: center;
    font-size: 17px;
    color: #7e7e7e;
}

    .separateOption:after {
        content: " ";
        height: 2px;
        width: 45px;
        background: #ccc;
        display: block;
        position: absolute;
        top: 50%;
        right: 40px;
    }

.wizardDocumentBtn {
    width: 100%;
}

.gridDivInner {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 90%;
}

    .gridDivInner h6 {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 90% !important;
    }

    .gridDivInner.gridInnerTitle {
        font-family: "Poppins-SemiBold";
        font-size: 15px;
        color: var(--black);
        margin-bottom: 0px;
    }

.radioButtonInline {
    display: flex;
    align-items: center;
    gap: 20px;
}

.fileDropContainer {
    width: 100%;
    margin: auto;
}

.uploadDocumentMain {
    display: flex;
    justify-content: center;
    gap: 40px;
    align-items: center;
    width: 100%;
    /* flex-direction: row; */
    padding: 0 25px;
}

.noRecordText {
    margin-bottom: 0;
    font-size: 16px !important;
    color: #939393;
}

.radioInlineText {
    display: flex;
    gap: 7px;
    align-items: center;
}

.browseTemplateName {
    width: 100%;
    margin: auto;
    margin-top: 10px;
}

.browseTemplateNameInner {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

    .browseTemplateNameInner img {
        max-width: 12%;
        height: auto;
    }

    .browseTemplateNameInner h4 {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 0;
        text-overflow: ellipsis;
        overflow: hidden;
        /*width: 98%;*/
        white-space: nowrap;
    }


.documentListContainer {
    height: 80%;
}

.uploadDocumentButtonAlt {
    width: 50%;
    margin: auto;
}

.templateListContainer {
    height: 80%;
}

.templateListBody {
    height: calc(100vh - 200px) !important;
}

.templateLeftMain {
    height: 100%;
    height: calc(100vh - 100px);
    /*height: calc(100vh - 231px);*/
}

.noTemplateMain {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

    .noTemplateMain h4 {
        font-size: 16px;
        color: #828282;
    }

.recepientGridMain tr th {
    color: #818181;
    font-size: 15px;
}


/* For portrait layouts only */
.sign-regular-model-header .close {
    align-items: center !important;
}

.image-editor {
    gap: 20px !important;
}

.actions-square-btn button svg {
    height: 16px;
    width: 16px;
}

.signer-options-link {
    gap: 40px !important;
}

.nav.nav-tabs.signature-model-tab-ul {
    gap: 22px !important;
}

.dark-textBox select {
    width: 100%;
    height: auto;
    font-size: 12px;
    font-weight: 500;
    background: none;
    transition: all 0.15s ease;
    padding: 15px 10px;
    border-radius: 5px;
    border: none;
    box-shadow: rgb(149 157 165 / 10%) 0px 8px 24px;
    background-color: #efefef;
    border: 1px solid #cccccc;
}

.workspace-icons-main-sub {
    display: flex;
    gap: 2px;
}

    .workspace-icons-main-sub .grid-round-btn {
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .workspace-icons-main-sub .grid-round-btn svg {
            height: 16px;
            width: 16px;
        }

.documentBodyScroll {
    padding-bottom: 40px;
}

.documentHeadInner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 0 10px;
}


.userListTable tr {
    border-bottom: 1px solid #dee2e6;
}

    .userListTable tr th {
        font-size: 15px;
        color: #a1a1a1;
    }

    .userListTable tr th, .userListTable tr td {
        border: none;
        vertical-align: middle;
    }

.actionGridButtonCenter {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: flex-end;
}

.viewBtn {
    background-color: #32b9eb;
}

    .viewBtn i {
        color: #ffffff;
        font-size: 14px;
    }

.modalBodyMain {
    height: auto;
    max-height: 450px;
    overflow: auto;
}

.uploadDocumentMainAlt {
    width: 50%;
    margin: auto;
}

.newTemplateContainerDisabled {
    cursor: not-allowed;
}

    .newTemplateContainerDisabled a {
        filter: grayscale(1);
        cursor: not-allowed;
        pointer-events: none;
    }

.templateListTableBody {
    height: 250px;
    min-height: 100%;
    overflow: auto;
}

.userLicensesTop {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.btnBuyLicence {
    color: #fff;
    background-color: #32b9eb;
    border-color: #32b9eb;
}

.template-preview {
    padding: 30px;
    border: 1px solid #a5a5a5;
    margin: 30px 0px;
    border-radius: 20px;
    position: relative;
    background: #f9f9f9;
}

.template-preview-close {
    position: absolute;
    right: 0;
    top: 0;
    height: 40px;
    width: 40px;
    border-radius: 0 20px 0 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #dc3545;
    color: #fff;
    font-weight: bold;
}

.pricing-amount-text {
    justify-content: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .pricing-amount-text span {
        display: inline;
    }


.regionLabelAlt {
    display: block !important;
    position: relative !important;
}

.regionSpanTitle {
    margin-bottom: 6px;
}

.regionLabelAlt svg {
    position: absolute;
    top: 55%;
    right: 2%;
    height: 20px;
    width: 20px;
}

    .regionLabelAlt svg path {
        color: #444;
    }

.regionSpanDropdown {
    width: 100%;
    border-radius: 8px;
    padding: 10px 20px;
    border: 1px solid #c1c1c1;
    display: block;
    margin-top: 8px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.recaptchaMain {
    width: fit-content;
    position: absolute;
    bottom: 1%;
    right: 1%;
}

.regionCurrencyField {
    display: grid;
    grid-template-columns: 1fr 100px;
    align-items: center;
    column-gap: 10px;
}

.currencySpanTitle {
    width: 100%;
    border-radius: 8px;
    padding: 10px 15px;
    border: 1px solid transparent;
    background-color: #f2f2f2;
    display: block;
    margin-top: 8px;
}

.signup-right {
    padding: 15px 200px;
}

.signatureDoneNotify {
    height: calc(100vh - 0px) !important;
}

.uploadDocumentFullSec {
    width: 60%;
}

.uploadDocumentMainAlt .uploadDocumentFullSec {
    width: 40%;
}

.actionBtnMain {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.documentGridResponsive {
    overflow: auto;
}

.formNameGroup {
    display: flex;
    gap: 10px;
    align-items: center;
}

.formEmailGroup {
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: center;
}

.paymentInlineButton {
    margin: 25px 0;
}


@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    /* For portrait layouts only */
    .sign-regular-model-header .close {
        align-items: center !important;
    }

    .image-editor {
        gap: 20px !important;
    }

    .actions-square-btn button svg {
        height: 16px;
        width: 16px;
    }

    .signer-options-link {
        gap: 40px !important;
    }

    .nav.nav-tabs.signature-model-tab-ul {
        gap: 22px !important;
    }

    .dark-textBox select {
        width: 100%;
        height: auto;
        font-size: 12px;
        font-weight: 500;
        background: none;
        transition: all 0.15s ease;
        padding: 15px 10px;
        border-radius: 5px;
        border: none;
        box-shadow: rgb(149 157 165 / 10%) 0px 8px 24px;
        background-color: #efefef;
        border: 1px solid #cccccc;
    }

    .preloader_inner {
        position: absolute;
        left: 37% !important;
        top: 35%;
        text-align: center;
    }

    .workspace-icons-main-sub {
        display: flex;
        gap: 2px;
    }

        .workspace-icons-main-sub .grid-round-btn {
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .workspace-icons-main-sub .grid-round-btn svg {
                height: 16px;
                width: 16px;
            }
}


@media only screen and (min-device-width: 360px) and (max-device-width: 767px) and (orientation:portrait) {
    /* For portrait layouts only */
    .sign-regular-model-header .close {
        align-items: center !important;
    }

    .image-editor {
        gap: 20px !important;
    }

    .actions-square-btn button svg {
        height: 16px;
        width: 16px;
    }

    .signer-options-link {
        gap: 40px !important;
    }

    .nav.nav-tabs.signature-model-tab-ul {
        gap: 22px !important;
    }

    .dark-textBox select {
        width: 100%;
        height: auto;
        font-size: 12px;
        font-weight: 500;
        background: none;
        transition: all 0.15s ease;
        padding: 15px 10px;
        border-radius: 5px;
        border: none;
        box-shadow: rgb(149 157 165 / 10%) 0px 8px 24px;
        background-color: #efefef;
        border: 1px solid #cccccc;
    }

    .preloader_inner {
        position: absolute;
        left: 25% !important;
        top: 35%;
        text-align: center;
    }

    .workspace-icons-main-sub {
        display: flex;
        gap: 2px;
    }

        .workspace-icons-main-sub .grid-round-btn {
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .workspace-icons-main-sub .grid-round-btn svg {
                height: 16px;
                width: 16px;
            }

    .documentBodyScroll {
        padding-bottom: 40px;
        overflow-x: auto;
    }

    .documentHeadInner {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 0 10px;
    }
}

.expDateField input[type="text"] {
    font-size: 14px;
    border-radius: 4px;
    padding: 6px 8px;
    font-weight: 500;
    border: 1px solid #cccccc;
    color: #757575;
    width: 100%;
}

.expNotesMain {
    margin-top: 0px;
}

    .expNotesMain span {
        font-size: 12px;
        color: #e14c4c;
        font-weight: 600;
    }

.model-required-fields .expDateCheckLabel {
    font-size: 13px;
    color: #262a2e !important;
    font-family: "Poppins-Ragular";
}

.wizardPreviewTopContent {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    margin-top: 25px;
    margin-bottom: 10px;
}

.dbf-workspace .documentWorkspace {
    font-size: 13px;
    color: var(--black);
    margin: 0;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: normal;
}

.docSubjectDetail {
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin-top: 4px;
}

.login-form input[type="text"] {
    padding-right: 45px !important;
}

.login-form input[type="password"] {
    padding-right: 45px !important;
}
/* for Signup, Forgot p/w &  change p/w */
.detail-password-field input[type="text"] {
    padding-right: 46px !important;
}

.detail-password-field input[type="password"] {
    padding-right: 47px !important;
}

.detail-password-field .show-pass {
    right: 6px;
}

.pdf-sec-middle pdfPreviewContainer {
    overflow: scroll;
}

.filterDocumentTopMain {
    padding: 15px 20px;
    background-color: #fff;
    border-bottom: 1px solid #e9e9e9;
}

.filterMainDocument {
    display: flex;
    gap: 15px;
    align-items: center;
    width: 100%;
}

.documentGrid thead {
    position: sticky;
    top: -1px;
    z-index: 10;
}

.templateGrid thead {
    position: sticky;
    top: -1px;
    z-index: 10;
}

.ui-datepicker {
    z-index: 9999 !important;
}

.filterSmallScreenMain {
    display: none;
}

.filterSmallScreen {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .filterSmallScreen h2 {
        font-size: 18px;
        color: var(--black);
        font-family: "Poppins-SemiBold";
        margin: 0;
    }

    .filterSmallScreen .filterBtnMain {
        background-color: #aaaaaa;
        border: none;
        color: #ffffff;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 7px 9px;
        position: relative;
    }

        .filterSmallScreen .filterBtnMain.applied {
            background-color: #dcf6ff;
            color: #32b9eb;
        }

        .filterSmallScreen .filterBtnMain i {
            font-size: 18px;
        }

        .filterSmallScreen .filterBtnMain:hover {
            background-color: #f2f2f2;
            color: var(--black);
        }




/*======================================*/
.modal.modalright {
    transform: none !important;
    transition: opacity 0.1s linear;
}

.modalright .modal-dialog {
    position: fixed;
    margin: auto;
    width: 27%;
    max-width: 27%;
    height: 98%;
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(10%, 0, 0);
}
/*Right*/
.modalright.fade .modal-dialog {
    right: -20%;
    transform: translate(20%, 1%);
    transition: transform 0.2s linear, right 0.2s linear;
}

.modal.modalright.fade.show .modal-dialog {
    right: 1%;
    transform: translate(2%, 1%);
}

.modalright.fade.open .modal-dialog {
    right: 0;
    transform: translate(0, 0px);
}

.modalright .modal-content {
    height: 100%;
}

.modalright .modal-header {
    background-color: #ffffff;
    padding: 18px 20px 16px 20px;
    border-bottom: 1px solid #DBDBDB;
    position: relative;
    margin: 0px;
}

    .modalright .modal-header .rightCloseBtn {
        background-color: #EBEBEB;
        border-radius: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 7px 10px;
        position: absolute;
        top: 30px;
        right: 35px;
        opacity: 1;
    }

        .modalright .modal-header .rightCloseBtn:hover {
            opacity: 1;
        }

        .modalright .modal-header .rightCloseBtn i {
            font-size: 20px;
            color: #4E4E4E;
        }

    .modalright .modal-header .modal-title {
        font-size: 16px;
        font-weight: 600;
        margin: 0;
        color: #25313E;
    }

.modalright .modal-body {
    padding: 15px 20px;
    background-color: #ffffff;
    overflow: auto;
}

.modalright .modal-footer {
    background-color: #ffffff;
}

.documentNameBox {
    padding: 12px 10px;
    border-radius: 5px;
    border: 1px solid #e1e1e1;
    margin-bottom: 20px;
}

.documentNameBoxInner {
    display: flex;
    align-items: center;
    gap: 8px;
}

.documentIcon svg {
    height: 34px;
    width: 34px;
    fill: #4c7fff;
}

.documentBoxDetail h2 {
    font-size: 14px;
    color: #25313E;
    font-family: "Poppins-Medium";
    margin-bottom: 3px;
}

.documentBoxDetail h4 {
    font-size: 13px;
    color: #91a2b4;
    font-family: "Poppins-Medium";
    margin: 0;
}

.twoDetailContent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
}

.detailContent {
    margin-bottom: 20px;
}

    .detailContent h4 {
        font-size: 13px;
        color: #91a2b4;
        font-family: "Poppins-Medium";
        margin-bottom: 4px;
    }

    .detailContent h2 {
        font-size: 14px;
        color: #25313E;
        font-family: "Poppins-Medium";
        margin: 0;
        word-break: break-word;
    }

.docDetailBottomMain {
    background-color: #ffffff;
    padding: 10px 10px;
    border-radius: 6px;
    margin-top: 12px;
    border: 1px solid #ededed;
}

.detailCollapseTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid #f2f2f2;
}

.detailCollapseTwoTitle {
    display: flex;
    gap: 10px;
    align-items: center;
}

    .detailCollapseTwoTitle .detailTitleDevider {
        color: #c6c6c6;
        font-size: 16px;
    }

.detailCollapseTitle {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .detailCollapseTitle svg {
        height: 16px;
        width: 16px;
        fill: #4c7fff;
    }

    .detailCollapseTitle h2 {
        font-size: 13px;
        color: #25313E;
        font-family: "Poppins-Medium";
        margin: 0;
    }

.detailCollapseCount span {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 7px;
    background-color: #f2f2f2;
    border-radius: 50px;
}

    .detailCollapseCount span i {
        font-size: 14px;
        color: #25313E;
    }

.detailCollapseContent {
    padding-top: 5px;
}

.detailCollapseInner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    margin: 8px 4px;
}

    .detailCollapseInner svg {
        fill: #4c7fff;
        height: 14px;
        width: 14px;
        margin-top: 2px;
    }

    .detailCollapseInner i {
        color: #767e8d;
    }

.signerApproverDetail {
    display: flex;
    flex-direction: column;
    gap: 1px;
    align-items: flex-start;
}

.detailCollapseInner span {
    color: #767e8d;
    font-family: "Poppins-Medium";
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 20vw;
}

.detailCollapseInner h6 {
    color: #4c7fff;
    font-family: "Poppins-Medium";
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    background-color: #edf2ff;
    margin: 0;
    height: 20px;
    width: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.detailCollapseNoData {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0 5px 0;
}

    .detailCollapseNoData h4 {
        font-size: 13px;
        color: #91a2b4;
        font-family: "Poppins-Medium";
        margin-bottom: 4px;
        margin: 0;
    }

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

.twoLineEllipse {
    word-break: break-word;
    white-space: normal !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.threeLineEllipse {
    word-break: break-word;
    white-space: normal !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.customDropdown {
    position: relative;
    /*display: inline-block;*/
}

.customDropdownToggle {
    width: 100%;
    padding: 8px 20px 8px 12px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #cccccc;
    border-radius: 5px;
    color: #757575;
    transition: all 0.15s ease;
    background-color: #fff;
    text-align: start;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customDropdownToggleAlias {
    width: 100%;
    padding: 8px 20px 8px 12px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #cccccc;
    border-radius: 5px;
    color: #757575;
    transition: all 0.15s ease;
    background-color: #fff;
    text-align: start;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .customDropdownToggleAlias::after {
        content: '\f0dd';
        font-family: "FontAwesome";
        position: absolute;
        right: 12px;
        top: 44%;
        transform: translateY(-50%);
        font-size: 12px;
        color: #7a7f8c;
        pointer-events: none;
    }

.customDropdownToggle::after {
    content: '\f0dd';
    font-family: "FontAwesome";
    position: absolute;
    right: 12px;
    top: 44%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #7a7f8c;
    pointer-events: none;
}

.customDropdownMenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 997;
    background-color: white;
    border: 1px solid #d7d7d7;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
}

    .customDropdownMenu li {
        padding: 6px 10px;
        cursor: pointer;
        font-size: 14px;
        color: #7a7f8c;
        transition: all 0.2s linear;
        word-break: break-word;
    }

        .customDropdownMenu li:hover {
            background-color: #eaf6ff;
            color: #3b4147;
        }

.customDropdownSearch {
    width: 100%;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #cccccc;
    border-radius: 5px;
    color: #757575;
    transition: all 0.15s ease;
}

.customDropdown.open .customDropdownMenu {
    display: block;
}


.rightModalTitle {
    display: flex;
    align-items: center;
    gap: 12px;
}

input[type="password"]::-ms-reveal {
    display: none;
}


.teamMemberMain {
    display: grid;
    grid-template-columns: 350px 1fr;
    column-gap: 15px;
}

.workspaceDetailMain {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.workspaceIcon {
    border-radius: 120px;
    padding: 25px;
    background-color: #f2f2f2;
}

    .workspaceIcon svg {
        height: 60px;
        width: 70px;
        fill: #dbdbdb;
    }

.workspaceDetailsTitle {
    font-size: 20px;
    color: var(--black);
    font-weight: 600;
    text-align: center;
    word-break: break-word;
}

.preview-doc-container {
    margin: 10px 0 10px 0;
    height: 34px;
}

.preview-temp-container {
    margin: 20px 0 10px 0;
    height: 30px;
}

/*============= wizard-steps ===========*/
.step-indicator {
    border-collapse: separate;
    display: flex;
    justify-content: space-evenly;
    margin-left: 0px;
    position: relative;
    /* table-layout: fixed; */
    vertical-align: middle;
    margin: 0;
    width: 44%;
}

    .step-indicator li {
        display: flex;
        justify-content: center;
        /* float: none; */
        align-items: center;
        padding: 0;
        gap: 8px;
        position: relative;
        width: 100%;
    }

        .step-indicator li:before {
            background-color: #e3e3e3;
            content: "";
            display: block;
            height: 1px;
            position: absolute;
            top: 50%;
            left: 70%;
            width: 55%;
        }

        /*.step-indicator li:first-child:before {
            left: 50%;
        }*/

        .step-indicator li:last-child:before {
            content: unset;
        }


    .step-indicator .step {
        background-color: #ffffff;
        border: 1px solid #b9b9b9;
        color: #b9b9b9;
        font-size: 18px;
        width: 36px;
        height: 36px;
        line-height: 34px;
        border-radius: 18px;
        /*margin: 0 auto;*/
        position: relative;
        z-index: 1;
    }

        .step-indicator .step svg {
            height: 18px;
            width: 18px;
            fill: #b9b9b9;
        }

    .step-indicator .caption {
        box-sizing: border-box;
        color: #b9b9b9;
        /*padding: 11px 16px;*/
        background-color: #fff;
        z-index: 2;
        font-size: 16px;
        padding-right: 4px;
        font-family: "Poppins-Medium";
    }

    .step-indicator .wizard-steps.active .step {
        background-color: #32b9eb;
        border: 1px solid #32b9eb;
    }

        .step-indicator .wizard-steps.active .step svg {
            fill: #ffffff;
        }

    .step-indicator .wizard-steps.active .caption {
        color: #32b9eb;
    }


.firstPrev {
    visibility: hidden;
}

.reminder-content {
    padding: 40px 50px;
    display: grid;
    gap: 60px;
    align-items: flex-start;
    grid-template-columns: repeat(2, 1fr);
}

.reminder-content-inner {
    position: relative;
}

.reminder-content-inner-first::after {
    content: "";
    background-color: #e9e9e9;
    height: 100%;
    width: 1px;
    position: absolute;
    top: 0;
    right: -30px;
}

.reminder-toggle input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
}

.reminder-action {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.flex-file-title h6 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.flex-file-title i {
    font-size: 16px;
    transition: all 0.2s linear;
}

.flex-file-title.collapsed i {
    transform: rotate(180deg);
}

.advanceSettingsMain {
    position: relative;
}

.advanceSettingsButton {
    background-color: var(--blue);
    /* border: 1px solid var(--blue); */
    color: var(--white);
    border-radius: 5px 5px 5px 0px;
    padding: 10px 20px;
    z-index: 11;
    width: fit-content;
    justify-self: start;
    position: absolute;
    top: -12px;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-weight: bold;
}

    .advanceSettingsButton.advanceSettingsCollapse {
        background-color: var(--white);
        /* border: 1px solid var(--blue); */
        color: #116eff;
        font-weight: bold;
        border-radius: 5px 5px 5px 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4px;
        /* margin-bottom: 10px; */
        width: fit-content;
        justify-self: start;
        position: absolute;
        top: -12px;
        left: 0px;
        z-index: 11;
        padding: 0px;
    }

    .advanceSettingsButton span {
        font-size: 14px;
        text-decoration: unset;
    }

    .advanceSettingsButton.advanceSettingsCollapse span {
        font-size: 14px;
        text-decoration: underline;
    }

    .advanceSettingsButton i {
        font-size: 16px;
        transition: all 0.2s linear;
    }

    .advanceSettingsButton.advanceSettingsCollapse i {
        transform: rotate(0deg);
    }

    .advanceSettingsButton i {
        transform: rotate(180deg);
    }

.separate-field.disabled {
    opacity: 0.5;
    /*pointer-events: none;*/
    cursor: not-allowed;
}

    .separate-field.disabled label {
        cursor: not-allowed;
        pointer-events: none;
    }

    .separate-field.disabled select {
        cursor: not-allowed;
        pointer-events: none;
    }

    .separate-field.disabled input {
        cursor: not-allowed;
        pointer-events: none;
    }

    .separate-field.disabled .expNotesMain span {
        pointer-events: none;
        filter: grayscale(1);
    }


.downloadSettingsMain {
    margin-top: 16px;
}

    .downloadSettingsMain h4 {
        font-size: 14px;
        margin-bottom: 6px;
        font-weight: 600;
    }

.attachFileCheckbox {
    margin-bottom: 20px;
}



.drag-file-sec {
    position: absolute;
    width: 15px;
    height: 40px;
    background-color: var(--blue);
    left: 0px;
    top: 27px;
    border-radius: 2px;
    display: none;
}

.shallow-draggable:hover .drag-file-sec {
    display: flex;
    justify-content: center;
    align-items: center;
}

.drag-file-sec svg {
    height: 30px;
    fill: var(--white);
}

.advanceSettingsPreview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}


.detailContentTwoLine {
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin-bottom: 10px;
}

    .detailContentTwoLine p {
        margin: 0;
        font-family: 'Poppins-Medium';
        color: var(--black);
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .detailContentTwoLine span {
        font-family: 'Poppins-Medium';
        font-size: 14px;
        color: #959595;
        /*overflow: hidden;
        text-overflow: ellipsis;*/
        white-space: nowrap;
    }

.docSettingsMainGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.previewLeftContentMain {
    height: 720px;
    overflow-y: auto;
}

.invoice-table tr {
    display: table-row;
}

    .invoice-table tr th:first-child {
        border-radius: 10px 0 0 0;
    }

    .invoice-table tr th:last-child {
        border-radius: 0 10px 0 0;
    }

    .invoice-table tr td, .invoice-table tr th {
        width: auto;
        padding: 15px;
    }

.wizardOneSenderSec {
    margin: 50px 150px;
}

.securitySignatureSection {
    height: calc(100vh - 100px);
}

pricingIcon {
    position: relative;
    /*font-size: 42px;*/
    width: fit-content;
    margin: auto;
}

span.USPricing:before {
    content: '\f155';
    font-family: FontAwesome;
}

span.IndiaPricing:before {
    content: '\e1bc';
    font-family: FontAwesome;
}

.checkbox-placefield-inner {
    display: flex;
    align-items: center;
    gap: 3px;
}

    .checkbox-placefield-inner .checkBoxPlacefieldPreview {
        margin: 0;
    }

    .checkbox-placefield-inner label {
        margin: 0;
        font-size: 11px;
    }

.orderAmount-topRight .amountDeletePrice {
    color: #212529;
    font-size: 14px;
    margin-bottom: 0;
}

.amountCurrentPrice.amount-text {
    background-color: #c0eeff;
    padding: 4px 16px;
    font-size: 16px;
    font-weight: 700;
    color: #00a3e0;
    border-radius: 45px;
    display: flex;
    flex-direction: row;
    gap: 5px;
    text-align: center;
}

    .amountCurrentPrice.amount-text .pricingIcon {
        font-size: 15px;
    }

.signer-fields .ui-state-highlight {
    height: 159px;
    border: 1px dashed #ccc;
    background: #fbfbfb;
    border-radius: 10px;
}

/*======================Recipients-Settings=========================*/
.recipientSettings {
    background-color: var(--white);
    /* border: 1px solid var(--blue); */
    color: var(--blue);
    font-weight: bold;
    border-radius: 5px 5px 5px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    /* margin-bottom: 10px; */
    width: fit-content;
    justify-self: start;
    z-index: 11;
    padding: 0px;
}

    .recipientSettings span {
        font-size: 13px;
        letter-spacing: 1px;
        font-weight: normal;
        font-family: "Poppins-SemiBold";
        letter-spacing: 1.1px;
    }

    .recipientSettings i {
        transform: rotate(180deg);
        font-size: 16px;
        transition: all 0.2s linear;
    }

    .recipientSettings.collapsed i {
        transform: rotate(0deg);
    }

.recipientSettingsContent {
}

.recipientSettingsSwitch {
    display: grid;
    column-gap: 30px;
    grid-template-columns: 326px 1fr;
}

.authenticationSettings {
    margin-top: 5px;
    margin-bottom: 10px;
}

.recipientSettingsSwitch .signer-toggle-btn .toggleSwitchMain {
    position: relative;
    width: 28px;
    height: 16px;
    display: inline-block;
    background: #666666;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    margin: 0;
}

    .recipientSettingsSwitch .signer-toggle-btn .toggleSwitchMain:after {
        content: "";
        position: absolute;
        left: 2px;
        top: 2px;
        width: 12PX;
        height: 12PX;
        background: #FFF;
        border-radius: 50%;
        /* box-shadow: 1px 3px 6px #666666; */
    }

.recipientSettingsSwitch .signer-toggle-btn input:checked + .toggleSwitchMain {
    background: var(--blue);
}

    .recipientSettingsSwitch .signer-toggle-btn input:checked + .toggleSwitchMain:after {
        left: auto;
        right: 2px;
    }

.recipientSettingsSwitch .signer-toggle-btn .toggleSwitchText {
    margin: 0;
    font-size: 13px;
    cursor: pointer;
    font-family: "Poppins-Medium";
    color: #404040 !important;
}

.authenticationSettingsInner {
    display: grid;
    row-gap: 0px;
    margin-top: 10px;
}

.authenticationSettingsRadio {
    display: flex;
    gap: 30px;
    align-items: center;
}

    .authenticationSettingsRadio .disableElement {
        opacity: 0.5;
    }

.authenticationSettingsInner .recipientRadioField {
    margin: 0px 0px;
    cursor: pointer;
    display: flex;
    gap: 5px;
    align-items: center;
}

    .authenticationSettingsInner .recipientRadioField label {
        cursor: pointer;
        color: #25182c !important;
    }

    .authenticationSettingsInner .recipientRadioField input[type=radio] {
        width: 12px;
        height: auto;
    }

.privateMessageSettings {
    margin-top: 5px;
    margin-bottom: 10px;
}

.privateMessageSettingsInner {
    margin-top: 12px;
}

.accessCodeField {
    margin-top: 10px;
    /* display: none; */
}

.separate-field.recipient-field {
    margin: 0;
    width: 326px;
    margin-bottom: 0;
    display: flex;
    gap: 10px;
}

.separate-field.privateMsgTextarea {
    width: 100%;
}

.separate-field.recipient-field textarea {
    height: 62px;
    font-size: 12px;
}

.attachFinalDocCheckbox {
    margin: 10px 0;
}

.accessCodeInputField {
    position: relative;
    width: 100%;
}

.AccessCodeGenerate {
    position: absolute;
    top: 1px;
    right: 1px;
    background-color: #e9e9e9;
    padding: 4px 8px;
    color: #232323;
}

.copyAccessCode {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e0e0e0;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
}

    .copyAccessCode svg {
        height: auto;
        width: 22px;
        fill: #232323;
    }


.tooltip-inner {
    color: #fff;
    font-size: 12px;
    max-width: 300px;
    padding: 6px;
}

/*=====================authenticate Modal===============================*/
.authenticateModal {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1051;
    width: 100%;
    height: 100%;
    display: block !important;
    opacity: 1 !important;
    transition: 0.3s all linear;
}

    .authenticateModal.hide {
        visibility: hidden !important;
        opacity: 0 !important;
    }

    .authenticateModal .modal-dialog {
        /* background-color: #6072FE; */
        width: 25%;
        margin: auto;
    }

    .authenticateModal .modal-content {
        background-color: #fff;
        padding: 10px 30px 0px 30px;
        border-radius: 20px;
        position: relative;
        overflow: hidden;
    }

    .authenticateModal .modal-body {
        padding: 1rem 0;
    }

.authenticateModalBody {
    text-align: center;
}

    .authenticateModalBody p {
        color: #343434;
        font-weight: 500;
        font-size: 16px;
        margin-bottom: 14px;
        font-family: 'Poppins-Medium';
    }

.roundThemeButton {
    background-color: #32b9eb;
    border: 1px solid #32b9eb;
    color: #fff;
    padding: 6px 30px;
    border-radius: 100px;
    font-size: 16px;
    /* transition: all 0.1s linear; */
}

    .roundThemeButton:hover {
        opacity: .9;
        background-color: #32b9eb;
        border: 1px solid #32b9eb;
    }

.authenticateModalBody .separate-field {
    margin-bottom: 4px;
}

    .authenticateModalBody .separate-field input {
        font-size: 14px;
        border-radius: 8px;
        padding: 10px 12px;
    }

.authResendBtn {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0px;
}

    .authResendBtn .authResendButton {
        background-color: transparent;
        border: 1px solid transparent;
        color: #32b9eb;
        padding: 0px;
        font-family: "Poppins-Medium";
        font-size: 14px;
    }

        .authResendBtn .authResendButton:hover {
            opacity: .9;
        }

.authPasswordProtectMain {
    margin-bottom: 8px;
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.newModalIconSpan {
    background-color: #e3f7ff;
    padding: 18px;
    /* height: 20px; */
    border-radius: 50px;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .newModalIconSpan svg {
        height: 44px;
        width: 44px;
        fill: #32b9eb;
    }

.authPasswordProtectMain h6 {
    color: #343434;
    font-weight: 500;
    font-size: 16px;
    margin: 0;
    font-family: 'Poppins-Medium';
}


/*==================*/
.privateMessageModal {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1051;
    width: 100%;
    height: 100%;
    display: block !important;
    opacity: 1 !important;
    transition: 1s all linear;
}

    .privateMessageModal .modal-dialog {
        transform: translate(0px, 0px) skewX(0deg) scaleX(1);
    }

    .privateMessageModal.hide {
        visibility: hidden !important;
        opacity: 0 !important;
    }

        .privateMessageModal.hide .modal-dialog {
            animation: roadRunnerOut 0.8s forwards;
        }

@keyframes roadRunnerOut {
    0% {
        transform: translate(0px, 0px) skewX(0deg) scaleX(1);
    }

    100% {
        transform: translate(900px, 500px) skewX(30deg) scale(0);
    }
}


.privateMessageModal .modal-dialog {
    /* background-color: #6072FE; */
    width: 25%;
    margin: auto;
}

.privateMessageModal .modal-content {
    background-color: #fff;
    padding: 0px 0px 0px 0px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.privateMessageModal .modal-body {
    padding: 1rem;
}

.privateMessageModalBody {
    text-align: center;
    max-height: 500px;
    height: auto;
    overflow: auto;
    padding: 1rem;
}

    .privateMessageModalBody h4 {
        color: #343434;
        font-weight: 500;
        font-size: 18px;
        margin-bottom: 10px;
        font-family: 'Poppins-SemiBold';
    }

    .privateMessageModalBody p {
        color: #343434;
        font-weight: 500;
        font-size: 14px;
        margin-bottom: 0px;
        font-family: 'Poppins-Ragular';
        word-break: break-all;
    }


/*=======================private message body=======================*/
.privateMessageBody {
    width: 16%;
    margin: auto;
    padding: 0px 6px;
    position: fixed;
    bottom: 0;
    right: 0%;
    transform: translate(-2%, 0px);
    overflow: hidden;
    max-height: 100%;
    /* right: auto; */
    z-index: 998;
    transition: all 0.2s linear;
}

    .privateMessageBody.close {
        opacity: 1;
    }

        .privateMessageBody.close .privateMessageContent {
            max-height: 0px;
            padding: 0;
        }

        .privateMessageBody.close:hover {
            opacity: 1 !important;
        }

        .privateMessageBody.close .privateMessageContent {
            opacity: 0;
            pointer-events: none;
        }

        .privateMessageBody.close .privateMessageBodyBtn i {
            transform: rotate(0deg);
            transition: transform 0.2s linear;
        }

.privateMessageBodyAction {
    display: flex;
    justify-content: flex-end;
}

.privateMessageBodyBtn {
    background-color: #32b9eb;
    border: 1px solid #32b9eb;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 14px;
    border-radius: 6px 6px 0 0;
    font-size: 16px;
}

    .privateMessageBodyBtn:hover {
        background-color: #32b9eb;
        border: 1px solid #32b9eb;
        color: #fff;
    }

.privateMessageContent {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 8px 0 8px 8px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    max-height: 400px;
    overflow: auto;
    transition: all 0.2s linear;
}

    .privateMessageContent h6 {
        color: #141414;
        font-weight: 500;
        font-size: 14px;
        margin-bottom: 5px;
        font-family: 'Poppins-Medium';
    }

    .privateMessageContent p {
        color: #383838;
        font-weight: 500;
        font-size: 14px;
        margin-bottom: 0px;
        font-family: 'Poppins-Ragular';
        word-break: break-all;
    }


.gridRecordFlex {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
}

    .gridRecordFlex h6 {
        width: 40ch;
    }

    .gridRecordFlex h4 {
        font-family: 'Poppins-Medium';
        font-size: 12px;
        width: 40ch;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        color: #818181;
        margin: 0;
    }

.invalid-phone {
    border: 1px solid red;
    background-color: #fff0f0;
    color: #a94442;
}


/* =======================wizard-1======================= */

.select-file-section {
    width: 100%;
    position: relative;
    padding: 30px 0 75px 0px;
}

.wizardFirstInner {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    column-gap: 15px;
}

.wizardFirstLeftMain {
    position: relative;
    padding: 5px 15px;
    background-color: #fff;
    height: 100%;
}

    .wizardFirstLeftMain::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 1px;
        height: 100%;
        background-color: #dddddd;
    }

.wizardFirstLeftSticky {
    position: sticky;
    top: 121px;
    height: 79vh;
}
/* .wizardFirstLeftSticky::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background-color: #dddddd;
} */

.wizardFirstLeftInner {
    display: grid;
    row-gap: 10px;
    border: none !important;
}

.wizardLeftTabLink {
    text-decoration: none;
    color: #787878;
    font-size: 14px;
    border: none !important;
    display: flex;
    gap: 10px;
    align-items: center;
}

    .wizardLeftTabLink:hover {
        color: #0D0D0D !important;
    }

    .wizardLeftTabLink.active {
        color: #0D0D0D !important;
        border: none !important;
        background-color: #F5F5F5 !important;
        font-weight: 600;
    }

    .wizardLeftTabLink i {
        font-size: 16px;
    }

.wizardRightSettings {
    padding-bottom: 10px;
    border-bottom: 1px solid #DBDBDB;
}

.wizardFirstRightMain {
    padding: 5px 0;
}

.wizardRightTopSettings {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

    .wizardRightTopSettings .wizardRightBottomSettings {
        display: none;
    }

.docSettingsDropdown {
    width: 28%;
}

    .docSettingsDropdown select {
        background-color: #F5F5F5;
        border-radius: 4px;
        border: none;
        font-size: 14px;
        padding: 7px 10px;
        font-family: "Poppins-Medium";
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width: 100%;
    }

.docSettingsRadioMain {
    display: flex;
    gap: 6px;
    /* align-items: center; */
    flex-direction: column;
}

.downloadSettingsRadioMain {
    display: flex !important;
    gap: 6px;
    /* align-items: center; */
    flex-direction: column;
    margin-top: 15px;
}

    .downloadSettingsRadioMain h6 {
        font-size: 14px;
        font-family: "Poppins-Medium";
        margin: 0;
    }

.radiobutton-main {
    display: flex;
    gap: 6px;
    align-items: center;
    /* background-color: #F5F5F5; */
    border-radius: 4px;
    /* margin: 5px 0; */
    padding: 0px 0px;
}

    .radiobutton-main label {
        margin-bottom: 0;
        font-size: 14px;
        color: #565656 !important;
        font-family: 'Poppins-Ragular';
        /* font-weight: 600; */
    }

    .radiobutton-main input[type="radio"] {
        accent-color: #000;
    }

.expDateMain {
    /*margin-top: 10px;*/
    display: flex;
    align-items: center;
    gap: 10px;
    /*height: 35px;*/
}

.expDateField input[type="text"] {
    font-size: 13px;
    border-radius: 4px;
    padding: 5px 8px;
    font-weight: 500;
    border: 1px solid #cccccc;
    color: #757575;
    width: 100%;
}

.expDateNotes i {
    color: #a3a3a3;
    font-size: 14px;
    cursor: pointer;
}

.tooltip-inner {
    /* background-color: #f00 !important; */
    color: #fff;
    font-size: 12px;
    max-width: 300px;
    padding: 6px;
}

.wizardFileUploadInner {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    justify-content: center;
    background-color: #F6F9FF;
    padding: 40px 0;
    border-radius: 10px;
    margin: 12px 0;
    position: relative;
    border: 1px dashed transparent;
    cursor: pointer;
}

    .wizardFileUploadInner.is-active {
        background-color: rgba(241, 245, 255, 1);
        border: 1px dashed #356efb;
    }

.wizardFileUploadInnerContainer {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    justify-content: center;
    /*z-index: 2;*/
    width: 50%;
}

.wizardFileUploadInner i {
    font-size: 32px;
    color: #356EFB;
}

.wizardFileUploadInner .uploadDragTitle {
    font-size: 16px;
    font-family: "Poppins-Medium";
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /*width: 92%;*/
}

.wizardFileUploadInner .uploadFileSupport {
    font-size: 13px;
    font-family: "Poppins-Ragular";
    color: #777777;
}

.wizard1FileUpload {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
    opacity: 0;
}

.uploadBtn {
    background-color: #356EFB;
    border-radius: 4px;
    padding: 3px 14px;
    color: #fff !important;
    font-size: 14px;
    margin-top: 5px;
}

    .uploadBtn:hover {
        color: #fff;
    }

.wizardRecipientTitle {
    margin: 20px 0 0px 0;
}

    .wizardRecipientTitle h4 {
        font-size: 18px;
        font-family: "Poppins-SemiBold";
        margin: 0;
    }

.wizardBackgroundMain {
    background-color: #F9F9F9;
    padding: 15px 25px;
    border-radius: 10px;
    margin: 10px 0 20px 0;
}

.wizardBackgroundMainMessage {
    margin: 10px 0 0 0;
}

.backgroundContainerTitle {
    display: flex;
    gap: 5px;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid #DBDBDB;
}

    .backgroundContainerTitle svg {
        width: 16px;
        height: 16px;
    }

    .backgroundContainerTitle span {
        font-size: 16px;
        font-family: "Poppins-Medium";
    }

.signer-option .signer-a {
    text-decoration: none;
    color: #0D0D0D;
    font-size: 14px;
    font-family: "Poppins-Ragular";
}

    .signer-option .signer-a:hover {
        cursor: pointer;
        color: #1173f3;
    }

.signerOptionNew .signer-a {
    color: #32b9eb;
    /*padding: 4px 10px;*/
}

    .signerOptionNew .signer-a:hover {
        color: #32b9eb;
    }

/*.signerOptionNew .signer-a:hover {
        border-radius: 4px;
        background-color: #efefef;
        color: #3c3c3c;
    }*/

.select-file-form {
    position: relative;
    background: #F6F6F6;
    display: flex;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

    .select-file-form label {
        margin: 0;
    }

.select-file-form-white {
    position: relative;
    background: #ffffff;
    display: flex;
    border-radius: 10px;
    box-shadow: none;
}



.recipientInnerFileds {
    width: 99%;
    /* margin-left: 20px; */
    margin: 0 20px;
    padding: 28px 0 12px 0;
    /* margin-top: 20px; */
}

.recipientCcerFileds {
    padding: 12px 0;
}

.drop-file-sec {
    position: absolute;
    width: 15px;
    height: 40px;
    background-color: var(--blue);
    left: 0px;
    transform: translate(0, -50%);
    top: 50%;
    border-radius: 2px;
    display: none;
}

.shallow-draggable:hover .drop-file-sec {
    display: flex;
    justify-content: center;
    align-items: center;
}

.drop-file-sec svg {
    height: 30px;
    fill: var(--white);
}

.drag-file-sec {
    position: absolute;
    width: 15px;
    height: 40px;
    background-color: var(--blue);
    left: 0px;
    transform: translate(0, -50%);
    top: 50%;
    border-radius: 2px;
    display: none;
}

.shallow-draggable:hover .drag-file-sec {
    display: flex;
    justify-content: center;
    align-items: center;
}

.drag-file-sec svg {
    height: 30px;
    fill: var(--white);
}

.recipientRadioField {
    display: flex;
    gap: 5px;
    align-items: center;
    margin: 4px 0px;
}

    .recipientRadioField svg {
        fill: var(--red);
        height: 14px;
        width: auto;
    }

.signer-fields {
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin: 10px 0 10px 0;
}

.wizardMessageMain {
    width: 100%;
    /* padding: 50px 180px; */
}

.wizardMessageInner {
    padding: 10px 0;
    /* box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; */
}

.wizardOneNext .wizardOneNextBtn {
    padding: 6px 30px;
}


/* ------- wizard templates-tab ------- */
.templateListMain {
    margin-top: 10px;
}

.templateListAltMain {
    margin-top: 20px;
}

.wizardTemplateTitle {
    padding-bottom: 10px;
    border-bottom: 1px solid #DBDBDB;
    margin-bottom: 10px;
}

    .wizardTemplateTitle h4 {
        font-size: 16px;
        font-family: "Poppins-SemiBold";
        margin: 0;
    }

.templateListInner {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}

.wizardTemplateMain {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.blankTemplateMain {
    height: 100%;
    width: 100%;
    /* border: 1px solid #e7e7e7; */
    background-color: #EBEBEB;
    padding: 12px;
    cursor: pointer;
}

.blankTemplateInner {
    height: 100%;
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .blankTemplateInner i {
        font-size: 28px;
        color: #C7C7C7;
    }

.wizardTemplateImage {
    border: 1px solid #e7e7e7;
    border-radius: 4px;
    position: relative;
    height: 240px;
}

    .wizardTemplateImage:hover .templateOverlay {
        opacity: 0.7;
        visibility: visible;
    }

    .wizardTemplateImage .templateOverlay {
        background-color: #000;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s linear;
    }

    .wizardTemplateImage:hover .templateBtn {
        visibility: visible;
        opacity: 1;
    }

.templateBtn {
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
    font-size: 11px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 5px 10px;
    width: max-content;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s linear;
}

    .templateBtn:hover {
        color: #fff;
    }

.wizardTemplateImage img {
    max-width: 100%;
    height: 100%;
}

.wizardTemplateName span {
    font-size: 13px;
    font-family: "Poppins-Medium";
}



.advanceSettingsToggleBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 4px;
    background-color: #ffffff;
    font-size: 14px;
    border: 1px solid #356EFB;
    color: #356efb;
    transition: all 0.2s linear;
}

    .advanceSettingsToggleBtn svg {
        height: 16px;
        width: auto;
        fill: #356efb;
    }

    .advanceSettingsToggleBtn span {
        font-family: "Poppins-Medium";
    }

    .advanceSettingsToggleBtn:hover {
        background-color: #f6f9ff;
    }

.advanceSettingsContainer {
    position: relative;
}

.advanceSettingsTooltip {
    position: absolute;
    top: 45px;
    right: 0;
    padding: 16px 20px;
    border-radius: 6px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    z-index: 1042;
    background-color: #ffffff;
    min-width: 540px;
    display: none;
}

.advanceSettingsTitle {
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

    .advanceSettingsTitle h6 {
        font-size: 15px;
        font-family: "Poppins-SemiBold";
        margin: 0;
    }

.advanceSettingsBtnMain {
    margin-top: 10px;
    padding: 10px 0 0 0;
    border-top: 1px solid #e7e7e7;
    text-align: center;
}

.settingsSave {
    background-color: #356EFB;
    border-radius: 4px;
    padding: 5px 20px;
    color: #fff !important;
    font-size: 14px;
}

.advanceSettingsFiledAction {
    display: grid;
    /* flex-direction: column; */
    /* gap: 20px; */
    grid-template-columns: 34% 1fr;
    /* justify-content: space-between; */
    margin-top: 8px;
    align-items: center;
}

    .advanceSettingsFiledAction .separate-field {
        margin-bottom: 0;
        width: 280px;
        margin: 0
    }

        .advanceSettingsFiledAction .separate-field label {
            display: flex;
        }

        .advanceSettingsFiledAction .separate-field input {
            padding: 8px 8px;
        }

        .advanceSettingsFiledAction .separate-field select {
            padding: 6px 6px;
        }

    .advanceSettingsFiledAction .signer-toggle-btn .toggleSwitchText {
        font-size: 13px;
        color: #262a2e !important;
        font-family: "Poppins-Ragular";
    }

.advanceSettingsLabel {
    display: flex;
    align-items: center;
}

    .advanceSettingsLabel span {
        font-size: 13px;
        color: #262a2e !important;
        font-family: "Poppins-Ragular";
    }

.reminder-toggle input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
}

.reminder-toggle p {
    margin: 0;
    font-size: 13px !important;
    color: #262a2e !important;
    font-family: "Poppins-Ragular";
}

.signerOrderNumber {
    background-color: #32b9eb;
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 12px;
    /* width: 90px; */
    height: 24px;
    border-radius: 10px 0px 10px;
    display: flex;
    justify-content: center;
    gap: 5px;
    align-items: center;
    font-family: "Poppins-Medium";
    font-size: 12px;
}

    .signerOrderNumber svg {
        height: 12px;
        width: 12px;
        fill: #fff;
    }

.detailContentVisible {
    overflow: visible;
}

.noMatchesFound {
    background-color: #f6f6f6;
    display: flex !important;
    justify-content: center;
    align-items: center;
    height: 200px;
    border-radius: 4px;
}

    .noMatchesFound span {
        font-size: 14px;
        color: #ababab;
        font-family: "Poppins-Medium";
    }

.advanceSettingsBackground {
    position: fixed;
    background-color: #505050;
    opacity: .1;
    width: 100%;
    height: 100%;
    z-index: 1041;
    display: none;
}

    .advanceSettingsBackground.active {
        display: block;
    }

.inviteTeamFieldsMain {
    display: flex;
    gap: 15px;
}

.modalFixedHeight {
    height: auto;
    max-height: 500px;
    overflow: auto;
    padding: 20px;
}

.fieldAlignButton {
    margin-top: 30px;
    width: 10%;
}
/*==========GridList==========*/
.workspaceRoleNote {
    padding: 8px 14px;
    border-radius: 6px;
    background-color: #f2f2f2;
    display: flex;
    gap: 6px;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 10px;
}

    .workspaceRoleNote svg {
        height: auto;
        width: 34px;
        fill: #878787;
    }

    .workspaceRoleNote p {
        margin: 0;
        font-size: 14px;
        font-family: "Poppins-Medium";
        color: #212529;
        text-align: left !important;
    }

.gridListScroll {
    height: auto;
    max-height: 380px;
    overflow: auto;
    border: 1px solid #d2d2d2;
}

.gridListMain {
    width: 100%;
}

    .gridListMain thead {
        background-color: #ffffff;
        position: sticky;
        top: -1px;
    }

        .gridListMain thead tr th {
            font-family: "Poppins-SemiBold";
        }

    .gridListMain tbody tr td {
        font-family: "Poppins-Medium";
    }

    .gridListMain thead tr th, .gridListMain tbody tr td {
        padding: 6px 10px;
        font-size: 14px;
        border: 1px solid #d2d2d2;
        vertical-align: middle;
    }

.viewRoleButton {
    display: flex;
    align-items: center !important;
    padding: 6px 10px !important;
    gap: 4px;
    border-radius: 4px !important;
    background-color: #00bcec !important;
}

    .viewRoleButton svg {
        fill: #fff;
        height: auto;
        width: 22px;
    }

.gridListScroll {
    border-radius: 8px;
}

.plan-details {
    display: flex;
    align-items: center;
}

.authPasswordProtectMain {
    margin-bottom: 8px;
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.newModalIconSpan {
    background-color: #e3f7ff;
    padding: 18px;
    border-radius: 50px;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .newModalIconSpan svg {
        height: 44px;
        width: 44px;
        fill: #32b9eb;
    }

.authPasswordProtectMain h6 {
    color: #343434;
    font-weight: 500;
    font-size: 16px;
    margin: 0;
    font-family: 'Poppins-Medium';
}

/*========== Plan UpgradeDowngrade =============--*/

.viewPaymentSummaryBtn {
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    padding: 0px 0px !important;
    border-radius: 34px !important;
    background-color: #dddddd !important;
    height: 30px;
    width: 30px;
}

    .viewPaymentSummaryBtn svg {
        fill: #0c0c0c;
        height: auto;
        width: 22px;
        height: 22px;
    }

.payment-item {
    flex-direction: column;
}

.payment-amount {
    text-align: right;
}

.payment-card {
    background: white;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid #dedede;
}

.payment-header {
    background-color: #f8f9fa;
    padding: 6px 14px;
    border-bottom: 1px solid #eaecef;
    font-weight: 600;
    color: #1f2c38;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

    .payment-header i {
        font-size: 15px;
    }

.payment-item {
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    padding: 6px 14px;
    font-size: 14px;
    font-family: "Poppins-Medium";
    border-bottom: 1px solid #f1f2f6;
}

    .payment-item div {
        font-family: "Poppins-Medium";
    }

    .payment-item .payment-amount {
        font-family: "Poppins-SemiBold";
    }

        .payment-item .payment-amount span {
            font-family: "Poppins-SemiBold";
        }

    .payment-item:last-child {
        border-bottom: none;
    }

    .payment-item.total {
        background-color: #e8f5e9;
        font-family: "Poppins-SemiBold";
        font-size: 14px;
        color: #2e7d32;
        padding: 8px 14px;
    }

    .payment-item.credit {
        color: #388e3c;
    }

    .payment-item.discount {
        color: #7b1fa2;
    }

.billItems {
    margin-left: 0%;
}

.paymentDiscountMsg {
    font-family: "Poppins-SemiBold";
    font-size: 14px;
}

    .paymentDiscountMsg span {
        font-family: "Poppins-SemiBold";
        font-size: 14px;
    }

.paymentSummaryNote {
    padding: 6px 8px;
    border-radius: 6px;
    background-color: #f2f2f2;
    display: flex;
    gap: 6px;
    justify-content: flex-start;
    align-items: center;
}

    .paymentSummaryNote svg {
        height: auto;
        width: 24px;
        fill: #878787;
    }

    .paymentSummaryNote p {
        margin: 0;
        font-size: 14px;
        font-family: "Poppins-Medium";
        color: #212529;
        text-align: left !important;
    }

    .paymentSummaryNote.message {
        padding: 8px 10px;
        border-radius: 6px;
        background-color: #ecf6ff;
        display: flex;
        gap: 6px;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 10px;
    }

        .paymentSummaryNote.message p {
            color: #1f8fff;
        }

.wizardFileUploadInnerContainer ::-webkit-file-upload-button {
    display: none;
}

.wizardFileUploadInnerContainer ::file-selector-button {
    display: none;
}

.uploadFileTitleContainer {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 70%;
}

.removeUploadedFile {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 3;
}

    .removeUploadedFile svg {
        height: 24px;
        width: 24px;
        fill: #ff6969;
    }

.wizardFileUploadContainer {
    z-index: 1;
}

.advanceSettingsFiledAction .separate-field .accessCode-input {
    padding: 8px 36px 8px 8px;
}

.fileUploadedSuccess {
    display: flex;
    gap: 4px;
    align-items: center;
}

    .fileUploadedSuccess svg {
        height: 18px;
        width: 18px;
        fill: #5dc68f;
    }

    .fileUploadedSuccess span {
        font-size: 13px;
        font-family: "Poppins-SemiBold";
        color: #5dc68f;
    }

.setPassFieldMain.disabled {
    opacity: 0.5;
    /* pointer-events: none; */
    cursor: not-allowed;
}

    .setPassFieldMain.disabled input {
        pointer-events: none;
        cursor: not-allowed;
    }

    .setPassFieldMain.disabled button {
        pointer-events: none;
        cursor: not-allowed;
    }

    .setPassFieldMain.disabled .copyAccessCode {
        opacity: 0.5;
        pointer-events: none;
        cursor: not-allowed;
    }

.divRecipientRadio {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 1px;
}

/* Tempalte selection */
.workspace-model-body {
    max-height: 70vh;
    overflow-y: auto;
}

.section-title {
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.selection-counter {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.workspace-item, .template-item {
    padding: 12px 15px;
    border: 1px solid #e9ecef;
    border-radius: 5px;
    margin-bottom: 8px;
    transition: all 0.2s;
}

    .workspace-item:hover, .template-item:hover {
        background-color: #f8f9fa;
        border-color: #007bff;
    }

.workspace-name, .template-name {
    font-weight: 500;
    display: block;
}

.custom-control-label {
    width: 100%;
    cursor: pointer;
}

#btnConfirmDowngrade:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.alert-info, .alert-warning {
    border-left: 4px solid;
}

.alert-info {
    border-left-color: #17a2b8;
}

.alert-warning {
    border-left-color: #ffc107;
}

.alertCustom p {
    text-align: left;
    margin: 0;
    font-size: 14px;
}

.workspace-list, .template-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.disabled-template {
    opacity: 0.6;
    background-color: #f8f9fa;
}

    .disabled-template .custom-control-label {
        color: #6c757d;
        cursor: not-allowed;
    }

.disabled-by-limit {
    opacity: 0.6;
}

.template-workspace {
    font-size: 0.8rem;
    color: #6c757d;
    display: block;
    margin-top: 2px;
}


.noSelectionModal {
    backdrop-filter: blur(4px);
}

.noSelectionBody p {
    margin: 0;
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    color: #ff4444;
}

.noSelectionBody .noSelectionTitle {
    margin: 0;
    font-size: 16px;
    color: #333;
    margin-bottom: 8px;
    background-color: #e8e8e8;
    padding: 6px;
    border-radius: 4px;
}


/*=====================Verify Number===============================*/
.verifyNumberModal {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1051;
    width: 100%;
    height: 100%;
    display: block !important;
    opacity: 1 !important;
    transition: 0.1s all linear;
}

    .verifyNumberModal.hide {
        visibility: hidden !important;
        opacity: 0 !important;
    }

.verifyMobileNumberModal .modal-dialog {
    /* background-color: #6072FE; */
    width: 28%;
    margin: auto;
}

.verifyMobileNumberModal .modal-content {
    background-color: #fff;
    padding: 10px 30px 0px 30px;
    border-radius: 20px;
    position: relative;
}

.verifyMobileNumberModal .modal-body {
    padding: 1rem 0;
}

.verifyNumberModalBody {
    text-align: center;
}

    .verifyNumberModalBody p {
        color: #787878;
        font-weight: 500;
        font-size: 14px;
        margin-bottom: 14px;
        font-family: 'Poppins-Ragular';
    }

    .verifyNumberModalBody .mobileNumberVerifyMsg {
        width: 85%;
        text-align: center;
        margin: auto;
        margin-bottom: 14px;
    }

    .verifyNumberModalBody .separate-field {
        margin-bottom: 4px;
    }

        .verifyNumberModalBody .separate-field input {
            font-size: 14px;
            border-radius: 8px;
            padding: 10px 12px;
        }

.verifyNumberIconMessage {
    margin-bottom: 10px;
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

    .verifyNumberIconMessage h6 {
        color: #343434;
        font-weight: 500;
        font-size: 20px;
        margin: 0;
        font-family: 'Poppins-SemiBold';
    }


/*==============*/
.verifyNumberOTPModal {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1051;
    width: 100%;
    height: 100%;
    display: block !important;
    opacity: 1 !important;
    transition: 0.1s all linear;
}

    .verifyNumberOTPModal.hide {
        visibility: hidden !important;
        opacity: 0 !important;
    }


.resendOTPContainer {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0px;
}

    .resendOTPContainer .resendOTPButton {
        background-color: transparent;
        border: 1px solid transparent;
        color: #32b9eb;
        padding: 0px;
        font-family: "Poppins-Medium";
        font-size: 14px;
    }

        .resendOTPContainer .resendOTPButton:hover {
            opacity: .9;
        }

.verifyNumberOTPMessage {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    margin-bottom: 14px;
}

    .verifyNumberOTPMessage p {
        color: #787878;
        font-weight: 500;
        font-size: 14px;
        font-family: 'Poppins-Ragular';
        margin: 0;
    }

.verifyNumberOTPEdit {
    display: flex;
    gap: 7px;
    align-items: center;
}

    .verifyNumberOTPEdit span {
        color: #32b9eb;
        font-family: "Poppins-Medium";
        cursor: pointer;
        font-weight: 500;
        font-size: 14px;
        margin: 0;
    }

body.modal-open {
    overflow: hidden;
}

.verifyNumberModal .iti__flag-container .iti__country-list .iti__country {
    font-size: 14px;
}

.verifyMobileNumberModal input::-webkit-inner-spin-button,
.verifyMobileNumberModal input::-webkit-outer-spin-button {
    display: none;
}

.roleAccessibility tr .roleAccessibilityCorrect i {
    font-size: 18px;
    color: #35af7d;
}

.roleAccessibility tr .roleAccessibilityWrong i {
    font-size: 18px;
    color: #f85959;
}

.modalCloseBtn {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .modalCloseBtn svg {
        fill: #fff;
        height: 18px;
        width: 18px;
    }

.workspaceTemplateModal .signature-model-body {
    height: auto;
    max-height: 650px;
}

.optionsDirectionSection {
    margin-top: 10px;
}

.modal.wizardSideModal .modal-content {
    height: calc(100vh - 10pc);
    overflow-y: auto;
}

.placefieldSettingsProperty label {
    font-size: 12px;
    color: #848484 !important;
    font-weight: 500;
    font-family: "Poppins-Medium";
    margin-bottom: 3px;
}

.placefiledFullGridInner {
    position: relative;
}

    .placefiledFullGridInner input[type="radio"] {
        position: absolute;
        top: 0;
        left: 0;
        visibility: hidden;
    }

    .placefiledFullGridInner input[type="radio"]:checked + label {
        border: 1px solid #1a9bff;
        background-color: #ECF7FF;
    }

    .placefiledFullGridInner input[type="radio"]:checked + label svg {
        fill: #0088F1;
    }

    .placefiledFullGridInner label {
        margin: 0;
        display: flex;
        gap: 5px;
        align-items: center;
        justify-content: center;
        padding: 6px 10px;
        margin-bottom: 0px !important;
        cursor: pointer;
        border: 1px solid #cccccc;
    }


    .placefiledFullGridInner:first-child label {
        border-radius: 5px 0 0 5px;
    }

.textDirection {
    display: flex;
}

.placefiledFullGridInner:last-child label {
    border-radius: 0 5px 5px 0;
}

.placefiledFullGridInner label svg {
    height: 18px;
    width: 18px;
    fill: #575757;
}

.placefiledFullGridInner input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
}

    .placefiledFullGridInner input[type="checkbox"]:checked + label {
        border: 1px solid #1a9bff;
        background-color: #ECF7FF;
    }

        .placefiledFullGridInner input[type="checkbox"]:checked + label svg {
            fill: #0088F1;
        }

.placefiledHalfGridInner {
    position: relative;
}

.optionsDirectionSection .placefiledHalfGridInner {
    width: 100%;
}

.placefiledHalfGridInner input[type="radio"] {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
}

    .placefiledHalfGridInner input[type="radio"]:checked + label {
        border: 1px solid #1a9bff;
        background-color: #ECF7FF;
    }

 .placefiledHalfGridInner input[type="radio"]:checked + label svg {
     fill: #0088F1;
 }

.placefiledHalfGridInner label {
    margin: 0;
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    margin-bottom: 0px !important;
    cursor: pointer;
    border: 1px solid #cccccc;
}

.placefiledHalfGridInner:first-child label {
    border-radius: 5px 0 0 5px;
}

.placefiledHalfGridInner:last-child label {
    border-radius: 0 5px 5px 0;
}

.radio-placefield-addradiobutton {
    padding: 4px 14px !important;
    border-radius: 3px;
    margin: auto;
    width: fit-content !important;
}

.radio-placefield-addradiobutton svg {
    height: 16px !important;
    width: 16px !important;
}

.radio-placefield-addradiomain{
    justify-items: center;
    width: 100%
}