@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --prim-clr: #1F2067;
    --sec-clr: #00BD57;
    --mid-clr: #CF0210;
    --mid-clr-2: #E78087;
    --white-clr: #fff;
    --black-clr: #000;
    --black-clr-1: #1F1F1F;
    --black-clr-2: #191919;
    --grey-clr: #8F8F8F;
    --grey-clr-2: #C4C4C4;
    --grey-clr-3: rgb(0 0 0 / 0.1);
    --grey-clr-4: #E6E6E6;
    --grey-clr-5: #EFEFEF;
    --grey-clr-6: #D2D2D2;
    --grey-clr-7: #898A8D;
    --grey-clr-8: #CFCFCF;
    --grey-clr-9: #737373;
    --grey-clr-10: rgb(143 143 143 / 0.5);
    --lt-yellow: #FFFBD9;
    --dk-yellow: #CD8700;

    --prim-bg: #1F2067;
    --sec-bg: #00BD57;
    --lt-sec-bg: #E5F8EE;
    --mid-bg: #CF0210;
    --mid-bg-2: #FAE6E7;
    --white-bg: #fff;
    --white-bg-2: #F6F6FB;
    --white-bg-3: #BCBDD2;
    --white-bg-4: #F5F5FF;
    --black-bg: #000;
    --black-bg-1: #333;
    --lt-grey-bg: #E9E9F0;
    --lt-grey-bg-2: #F5F7F9;
    --lt-grey-bg-3: #DBE2EA;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

body {
    overflow-x: hidden;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 400;
    color: var(--grey-clr);
    transition: all 0.2s ease-in-out;
    height: 100%;
}

main {
    overflow: hidden;
    position: relative;
    height: 100%;
}

a {
    text-decoration: none;
}

button:focus {
    outline: none !important;
    box-shadow: none !important;
}

textarea:focus,
input:focus,
select:focus {
    outline: none !important;
    box-shadow: none !important;
}

ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--black-clr-1);
    text-transform: capitalize;
}

p {
    color: var(--grey-clr);
    line-height: normal;
}

.multi-card {
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0px 4px 75px 0px rgba(0, 0, 0, 0.06);
    border: none;
    margin: 0 0 24px 0;
}

.multi-card .top-area {
    margin: 0 0 16px;
}

.multi-card .top-area h4 {
    font-weight: 700;
    font-size: 20px;
    margin: 0 0 4px 0;
    color: var(--black-clr-1);
    text-transform: capitalize;
}

.multi-card .top-area p {
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
    text-transform: capitalize;
}


/********************* loader styles start *********************/

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000000;
}

.overlay .overlayDoor:before,
.overlay .overlayDoor:after {
    content: "";
    position: absolute;
    width: 50%;
    height: 100%;
    background: var(--lt-grey-bg-2);
    transition: 0.5s cubic-bezier(0.77, 0, 0.18, 1);
    transition-delay: 0.8s;
}

.overlay .overlayDoor:before {
    left: 0;
}

.overlay .overlayDoor:after {
    right: 0;
}

.overlay.loaded .overlayDoor:before {
    left: -50%;
}

.overlay.loaded .overlayDoor:after {
    right: -50%;
}

.overlay.loaded .overlayContent {
    opacity: 0;
    margin-top: -15px;
}

.overlay .overlayContent {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: 0.5s cubic-bezier(0.77, 0, 0.18, 1);
}

.loader {
    width: 128px;
    height: 128px;
    border: 3px solid var(--prim-bg);
    border-bottom: 3px solid transparent;
    border-radius: 50%;
    position: relative;
    animation: spin 1s linear infinite;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader .inner {
    width: 64px;
    height: 64px;
    border: 3px solid transparent;
    border-top: 3px solid var(--prim-bg);
    border-radius: 50%;
    animation: spinInner 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes spinInner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-720deg);
    }
}

/********************* loader styles close *********************/

/********************* header styles start *********************/
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
}

header .navbar {
    background: var(--prim-bg);
    padding: 25px 0;
}

header .navbar .navbar-brand {
    margin: 0;
    padding: 0;
}

header .navbar .navbar-brand .thumb {
    width: auto;
    height: 30px;
    object-fit: contain;
    object-position: center;
    padding: 0 0 0 20px;
}

header .navbar .navbar-nav .nav-item {
    position: relative;
}

header .navbar .navbar-nav .nav-item .nav-link {
    padding: 0;
    position: relative;
    cursor: pointer;
}

header .navbar .nav-item .nav-link .icon-main .bell-icon {
    color: var(--white-clr);
    position: relative;
    margin: 0 50px 0 0;
}

header .navbar .nav-item .nav-link .bell-icon.notification::before {
    content: attr(data-text);
    position: absolute;
    top: 2px;
    right: 2px;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background: var(--mid-bg);
    font-size: 0;
    border: 1px solid var(--prim-bg);
}

header .navbar .nav-item .nav-link .bell-icon.notification-read::before {
    content: attr(data-text);
    position: absolute;
    top: 2px;
    right: 2px;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background: grey;
    font-size: 0;
    border: 1px solid var(--prim-bg);
}

header .navbar .nav-item .sub-menu {
    position: absolute;
    max-width: 339px;
    min-width: 339px;
    background: var(--white-bg);
    box-shadow: 4px 0px 25px 0px rgb(0 0 0 / 0.1);
    right: 100%;
    border-radius: 5px;
    z-index: 1;
}

header .navbar .nav-item .sub-menu .top-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 15px;
}

header .navbar .nav-item .sub-menu .top-area h4 {
    display: inline-flex;
    align-items: center;
    color: var(--prim-clr);
    font-weight: 700;
    font-size: 16px;
}

header .navbar .nav-item .sub-menu .top-area h4 span {
    margin: 0 12px 0 0;
    display: inline-flex;
}

header .navbar .nav-item .sub-menu .top-area .mark-btn {
    height: 30px;
    max-width: 98px;
    width: 100%;
    border-radius: 5px;
    background: var(--lt-grey-bg);
    color: var(--prim-clr);
    text-transform: capitalize;
    font-weight: 500;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    margin: 0;
}

header .navbar .nav-item .sub-menu .top-area .mark-btn:hover {
    background: var(--prim-bg);
    color: var(--white-clr);
}

header .navbar .nav-item .sub-menu .notif-area {
    min-height: 310px;
    max-height: 310px;
    /* overflow: hidden; */
    overflow-x: hidden;
    overflow-y: scroll;
    margin: 24px 0 0 0;
}

/* width */
header .navbar .nav-item .sub-menu .notif-area::-webkit-scrollbar {
    width: 5px;
}

/* Track */
header .navbar .nav-item .sub-menu .notif-area::-webkit-scrollbar-track {
    background: var(--white-bg);
    border-radius: 50px;
}

/* Handle */
header .navbar .nav-item .sub-menu .notif-area::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
header .navbar .nav-item .sub-menu .notif-area::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}

header .navbar .nav-item .sub-menu .notif-area .notif-box .top-area {
    background: var(--lt-grey-bg-2);
    padding: 14px 16px;
}

header .navbar .nav-item .sub-menu .notif-area .notif-box .top-area h5 {
    color: var(--black-clr);
    text-transform: capitalize;
    font-weight: 700;
    font-size: 14px;
}

header .navbar .nav-item .sub-menu .notif-area .notif-box .notif-single {
    padding: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}

header .navbar .nav-item .sub-menu .notif-area .notif-box .notif-single:not(:last-child) {
    border-bottom: 1px solid var(--grey-clr-3);
}

header .navbar .nav-item .sub-menu .notif-area .notif-box .notif-single .img-main .thumb {
    max-height: 32px;
    max-width: 32px;
    min-height: 32px;
    min-width: 32px;
    width: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

header .navbar .nav-item .sub-menu .notif-area .notif-box .notif-single .desc {
    padding: 0 0 0 8px;
    width: 55%;
}

header .navbar .nav-item .sub-menu .notif-area .notif-box .notif-single .desc .link {
    color: var(--black-clr);
    text-transform: capitalize;
    font-weight: 700;
    font-size: 14px;
    margin: 0 0 4px 0;
}

header .navbar .nav-item .sub-menu .notif-area .notif-box .notif-single .desc h6 {
    color: var(--black-clr);
    text-transform: capitalize;
    font-weight: 400;
    font-size: 12px;
    margin: 0 0 4px 0;
    white-space: nowrap;
    max-width: 80%;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

header .navbar .nav-item .sub-menu .notif-area .notif-box .notif-single .desc p {
    color: var(--grey-clr);
    font-weight: 400;
    font-size: 12px;
}

header .navbar .nav-item .sub-menu .notif-area .notif-box .notif-single .side-area {}

header .navbar .nav-item .sub-menu .notif-area .notif-box .notif-single .side-area span {
    color: var(--grey-clr);
    font-weight: 400;
    font-size: 12px;
    position: relative;
    display: inline-flex;
    align-items: center;
}

header .navbar .nav-item .sub-menu .notif-area .notif-box .notif-single .side-area span::after {
    content: '';
    display: inline-flex;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background: var(--mid-bg);
    margin: 0 0 0 10px;
}

header .navbar .navbar-toggler {
    padding: 0;
    color: var(--white-clr);
}

/********************* header styles close *********************/

/********************* side-bar styles start *********************/
.side-bar {
    position: fixed;
    max-width: 230px;
    min-width: 230px;
    top: 82px;
    bottom: 0;
    height: 100%;
    background: var(--white-bg);
    box-shadow: 4px 0px 25px 0px rgb(0 0 0 / 0.1);
    z-index: 100;
    left: 0;
    transition: all 0.2s ease-in-out;
    padding: 16px 0 0 0;
}

.side-bar.sidebar-close {
    max-width: 58px;
    min-width: 58px;
}

.side-bar .side-bar-toggle {
    position: absolute;
    top: 20%;
    right: -24px;
    height: 80px;
    width: 24px;
    clip-path: polygon(0 0, 100% 15%, 100% 85%, 0% 100%);
    background: var(--prim-bg);
    color: var(--white-clr);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0;
    transition: all 0.2s ease-in-out;
}

.side-bar .side-bar-toggle .arrow-ct {
    transform: rotate(180deg);
}

.side-bar.sidebar-close .side-bar-toggle .arrow-ct {
    transform: rotate(0);
}

.side-bar .side-top {
    padding: 15px 10px;
    margin: 0 0 8px 0;
}

.side-bar .side-top .side-logo .thumb {
    height: 23px;
    object-fit: contain;
    object-position: center;
    margin: 0;
}

.side-bar .menu-main {
    height: 100%;
}

.side-bar .menu-area {
    height: calc(100% - 170px);
    overflow-y: scroll;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* width */
.side-bar .menu-area::-webkit-scrollbar {
    width: 5px;
}

/* Track */
.side-bar .menu-area::-webkit-scrollbar-track {
    background: var(--white-bg);
}

/* Handle */
.side-bar .menu-area::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.side-bar .menu-area::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}

.side-bar .menu-area .logout-btn {
    max-height: 48px;
    min-height: 48px;
    height: 100%;
    max-width: 80%;
    width: 100%;
    border-radius: 6px;
    background: var(--mid-bg);
    color: var(--white-clr);
    text-transform: capitalize;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    margin: 0 auto;
    transition: all 0.2s ease-in-out;
}

.side-bar .menu-area .logout-btn .icn-btn {
    font-size: 24px;
}

.side-bar .menu-area .logout-btn .btn-txt {
    margin: 0 0 0 8px;
}

.side-bar.sidebar-close .menu-area .logout-btn .btn-txt {
    display: none;
}

.side-bar.sidebar-close .menu-area .logout-btn {
    max-width: 100%;
    border-radius: 0;
}

.side-bar .menu-area .main-ul {}

.side-bar .menu-area .main-ul .mn-item {}

.side-bar .menu-area .main-ul .mn-item .mn-link {
    padding: 20px 15px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    text-transform: capitalize;
    font-size: 14px;
    color: var(--prim-clr);
    transition: all 0.2s ease-in-out;
    position: relative;
}

.side-bar .menu-area .main-ul .mn-item .mn-link .link-txt {
    display: inline-flex;
    margin: 0 0 0 8px;
    opacity: 1;
}

.side-bar .menu-area .main-ul .mn-item .mn-link.menu-toggle .down-arrow {
    position: absolute;
    right: 20px;
    transition: all 0.2s ease-in-out;
}

.side-bar .menu-area .main-ul .mn-item .mn-link.toggle-active .down-arrow {
    transform: rotate(180deg);
    opacity: 1;
}

.side-bar.sidebar-close .menu-area .main-ul .mn-item .mn-link .link-txt {
    opacity: 0;
}

.side-bar.sidebar-close .menu-area .main-ul .mn-item .mn-link.menu-toggle .down-arrow {
    opacity: 0;
}

.side-bar .menu-area .main-ul .mn-item .mn-link:hover {
    background: var(--prim-bg);
    color: var(--white-clr);
}

.side-bar .menu-area .main-ul .mn-item .mn-link.mn-active {
    background: var(--prim-bg);
    color: var(--white-clr);
}

.side-bar .menu-area .main-ul .mn-item .mn-link.toggle-active {
    background: var(--prim-bg);
    color: var(--white-clr);
}

.side-bar .menu-area .sub-menu {
    background: var(--prim-bg);
}

.side-bar .menu-area .sub-menu .sb-ul .sb-li .sb-link {
    color: var(--white-clr);
    font-size: 14px;
    font-weight: 400;
    display: inline-flex;
    padding: 12px 16px 12px 48px;
}

.side-bar.sidebar-close .menu-area .sub-menu {
    display: none !important;
    /* opacity: 0; */
}

/********************* side-bar styles close *********************/

/********************* sidebar-edit-details styles start *********************/
.sidebar-right {
    position: fixed;
    min-width: 600px;
    max-width: 600px;
    top: 82px;
    right: 0;
    bottom: 0;
    height: 100%;
    background: var(--white-bg);
    box-shadow: 4px 0px 25px 0px rgb(0 0 0 / 0.1);
    z-index: 100;
    transition: all 0.2s ease-in-out;
    padding: 16px 0 0 0;
    transform: translateX(0);
    padding: 0;
}

.sidebar-right.sidebar-close {
    /* right: -230px; */
    transform: translateX(600px);
}

.sidebar-right .side-bar-toggle {
    position: absolute;
    top: 20%;
    left: -24px;
    height: 80px;
    width: 24px;
    clip-path: polygon(0 15%, 100% 0, 100% 100%, 0% 85%);
    background: var(--prim-bg);
    color: var(--white-clr);
    display: none;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0;
    transition: all 0.2s ease-in-out;
}

.sidebar-right .arrow-ct {
    transform: rotate(180deg);
}

.sidebar-right.sidebar-close .arrow-ct {
    transform: rotate(0);
}

/********************* sidebar-edit-details styles close *********************/

/********************* edit-area styles start *********************/
.edit-area {
    height: 100%;
    padding: 28px 20px 28px 28px;
}

.edit-area .edit-form {
    height: calc(100% - 260px);
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 0 5px 0 0;
}

/* width */
.edit-area .edit-form::-webkit-scrollbar {
    width: 5px;
}

/* Track */
.edit-area .edit-form::-webkit-scrollbar-track {
    background: var(--white-bg);
}

/* Handle */
.edit-area .edit-form::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.edit-area .edit-form::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}

.edit-area .edit-form .top-bar {}

.edit-area .edit-form .top-bar {
    margin: 0 0 24px 0;
}

.edit-area .edit-form .top-bar .head {}

.edit-area .edit-form .top-bar .head h4 {
    font-weight: 700;
    text-transform: capitalize;
    font-size: 24px;
    color: var(--black-clr-1);
    letter-spacing: -0.16px;
    margin: 0 0 4px 0;
}

.edit-area .edit-form .top-bar .head p {
    font-weight: 400;
    font-size: 18px;
    color: var(--grey-clr);
}

.edit-area .edit-form .top-bar .save-btn {
    background: var(--prim-bg);
    color: var(--white-clr);
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    padding: 8px 4px;
    margin: 0 0 0 auto;
    border-radius: 100px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 35px;
    max-width: 122px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.edit-area .edit-form .top-bar .save-btn:hover {
    background: var(--lt-grey-bg-2);
    color: var(--prim-clr);
}

.edit-area .edit-form .mid-area {}

.edit-area .edit-form .mid-area .inp-grp {
    margin: 0 0 16px 0;
    position: relative;
}

.edit-area .edit-form .mid-area .inp-grp .ct-inp {
    height: 48px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid var(--grey-clr-6);
    padding: 5px 14.5px;
    font-size: 16px;
    color: var(--grey-clr);
    font-weight: 400;
}

.edit-area .edit-form .mid-area .inp-grp .ct-inp::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: var(--grey-clr);
    font-size: 16px;
    text-transform: capitalize;
}

.edit-area .edit-form .mid-area .inp-grp .ct-inp::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--grey-clr);
    font-size: 16px;
    text-transform: capitalize;
}

.edit-area .edit-form .mid-area .inp-grp .ct-inp:-ms-input-placeholder {
    /* IE 10+ */
    color: var(--grey-clr);
    font-size: 16px;
    text-transform: capitalize;
}

.edit-area .edit-form .mid-area .inp-grp .ct-inp:-moz-placeholder {
    /* Firefox 18- */
    color: var(--grey-clr);
    font-size: 16px;
    text-transform: capitalize;
}

.edit-area .edit-form .mid-area .inp-grp .field-icon1 {
    z-index: 2;
    position: absolute;
    top: 35%;
    right: 20px;
    color: var(--black-clr-1);
    cursor: pointer;
}

.edit-area .edit-form .mid-area h5 {
    font-weight: 700;
    text-transform: capitalize;
    font-size: 18px;
    color: var(--black-clr-1);
    margin: 0 0 16px 0;
}

.edit-area .edit-form .mid-area .notif {
    margin: 10px 0 24px 0;
}

.edit-area .edit-form .mid-area .notif h6 {
    font-weight: 700;
    text-transform: capitalize;
    font-size: 18px;
    color: var(--black-clr-1);
    margin: 0;
}

.edit-area .edit-form .mid-area .notif .ct-switch {
    padding: 0;
}

.edit-area .edit-form .mid-area .notif .ct-switch .form-check-input {
    height: 24px;
    max-width: 44px;
    width: 100%;
    margin: 0 0 0 auto;
    float: none;
    display: block;
    background-color: var(--grey-clr-4);
    border-color: var(--grey-clr-4);
    background-image: url(../images/switch-bg.png);
    background-size: 25px;
    background-position-y: top;
}

.edit-area .edit-form .mid-area .notif .ct-switch .form-check-input:checked {
    background-color: var(--sec-bg);
    border-color: var(--sec-clr);
}

.edit-area .edit-form .mid-area .languages h6 {
    font-weight: 700;
    text-transform: capitalize;
    font-size: 18px;
    color: var(--black-clr-1);
    margin: 0 0 16px 0;
}

.edit-area .edit-form .mid-area .languages .ct-check {
    padding: 14px 0;
}

.edit-area .edit-form .mid-area .languages .ct-check .form-check-input {
    height: 24px;
    min-width: 24px;
    max-width: 24px;
    width: 100%;
    float: none;
    margin: 0;
    background-size: 33px;
}

.edit-area .edit-form .mid-area .languages .ct-check .form-check-input:checked {
    background-color: var(--sec-bg);
    border-color: var(--sec-clr);
}

.edit-area .edit-form .mid-area .languages .ct-check .form-check-label {
    margin: 0 0 0 13px;
}

/********************* edit-area styles close *********************/

/********************* sec-login-sign styles start *********************/
.sec-login-sign {
    position: relative;
    overflow: hidden;
    height: 100vh;
}

.sec-login-sign .container-ct {
    max-width: 1920px;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
}

/* login form css start */
.sec-login-sign .login-main {
    width: 80%;
    height: calc(100% - 40px);
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 0 0.8% 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

/* width */
.sec-login-sign .login-main::-webkit-scrollbar {
    width: 5px;
}

/* Track */
.sec-login-sign .login-main::-webkit-scrollbar-track {
    background: var(--white-bg);
    border-radius: 50px;
}

/* Handle */
.sec-login-sign .login-main::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.sec-login-sign .login-main::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}

.sec-login-sign .login-main .top-area {
    margin: 0 0 72px 0;
}

.sec-login-sign .login-main .top-area .logo-main .thumb {
    height: 70px;
    object-fit: contain;
    object-position: center;
}

.sec-login-sign .login-main .mid-area {
    width: 100%;
}

.sec-login-sign .login-main .mid-area .login-form .icon-main {
    background: var(--lt-grey-bg);
    border-radius: 10px;
    border: 2px solid var(--prim-bg);
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--prim-clr);
    margin: 0 0 24px 0;
}

.sec-login-sign .login-main .mid-area .login-form .head-area {
    margin: 0 0 24px 0;
}

.sec-login-sign .login-main .mid-area .login-form .head-area h6 {
    font-size: 35px;
    color: var(--black-clr);
    letter-spacing: -0.16px;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.sec-login-sign .login-main .mid-area .login-form .head-area p {
    font-size: 18px;
    color: var(--grey-clr);
    font-weight: 400;
    text-align: left;
    margin: 0;
}

.sec-login-sign .login-main .mid-area .login-form .input-main {
    margin: 0 0 16px;
    position: relative;
}

.sec-login-sign .login-main .mid-area .login-form .input-main .ct-inp {
    height: 48px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid var(--grey-clr-6);
    padding: 5px 14.5px;
    font-size: 16px;
    color: var(--prim-clr);
    font-weight: 400;
}

.sec-login-sign .login-main .mid-area .login-form .input-main .ct-inp::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: var(--grey-clr-6);
    font-size: 16px;
}

.sec-login-sign .login-main .mid-area .login-form .input-main .ct-inp::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--grey-clr-6);
    font-size: 16px;
}

.sec-login-sign .login-main .mid-area .login-form .input-main .ct-inp:-ms-input-placeholder {
    /* IE 10+ */
    color: var(--grey-clr-6);
    font-size: 16px;
}

.sec-login-sign .login-main .mid-area .login-form .input-main .ct-inp:-moz-placeholder {
    /* Firefox 18- */
    color: var(--grey-clr-6);
    font-size: 16px;
}


.sec-login-sign .login-main .mid-area .login-form .input-main .field-icon1 {
    z-index: 2;
    position: absolute;
    top: 35%;
    right: 20px;
    color: var(--black-clr-1);
}

#changePasswordForm .input-main span {
    position: absolute;
    top: 40%;
    right: 20px;
    color: black;
}

.sec-login-sign .login-main .mid-area .login-form .redir-link {
    font-size: 18px;
    text-align: right;
    text-transform: capitalize;
    font-weight: 500;
    color: var(--prim-clr);
    display: block;
}

.sec-login-sign .login-main .mid-area .login-form .submit-btn {
    background: var(--prim-bg);
    color: var(--white-clr);
    font-weight: 700;
    font-size: 16px;
    text-transform: capitalize;
    padding: 6px;
    margin: 48px 0 0 0;
    border-radius: 8px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sec-login-sign .login-main .mid-area .login-form .submit-btn.submitting {
    background: var(--lt-grey-bg);
    color: var(--prim-clr);
}

.sec-login-sign .login-main .mid-area .login-form .submit-btn .spinner-border {
    margin: 0 8px 0 0;
}

.sec-login-sign .login-main .mid-area .login-form p {
    margin: 16px 0 0 0;
    font-size: 16px;
    font-weight: 400;
    color: var(--black-clr-1);
    text-align: center;
}

.sec-login-sign .login-main .mid-area .login-form p .re-link {
    color: var(--prim-clr);
    font-weight: 600;
    text-transform: capitalize;
}

.sec-login-sign .login-main .btm-area {
    margin: 15% 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.sec-login-sign .login-main .btm-area .link {
    display: inline-block;
}

.sec-login-sign .login-main .btm-area .link:not(:last-child) {
    margin: 0 7px 0 0;
}

/* login form css close */

/* ct-account css start */
.sec-login-sign .ct-account-main {
    width: 80%;
    /* height: calc(100% - 40px); */
    /* overflow-y: scroll; */
    /* overflow-x: hidden; */
    padding: 0 0.8% 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: auto;
}

/* width */
.sec-login-sign .ct-account-main::-webkit-scrollbar {
    width: 5px;
}

/* Track */
.sec-login-sign .ct-account-main::-webkit-scrollbar-track {
    background: var(--white-bg);
    border-radius: 50px;
}

/* Handle */
.sec-login-sign .ct-account-main::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.sec-login-sign .ct-account-main::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}

.sec-login-sign .ct-account-main .top-area {
    margin: 0 0 72px 0;
}

.sec-login-sign .ct-account-main .top-area .logo-main .thumb {
    height: 70px;
    object-fit: contain;
    object-position: center;
}

.sec-login-sign .ct-account-main .mid-area {
    width: 100%;
}
/* form one css start */
.backBtn {
    background: var(--lt-grey-bg);
    border-radius: 10px;
    border: 2px solid var(--prim-bg);
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--prim-clr);
    margin: 0 0 24px 0;
}
.sec-login-sign .ct-account-main .mid-area .ct-account-form-one .icon-main {
    background: var(--lt-grey-bg);
    border-radius: 10px;
    border: 2px solid var(--prim-bg);
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--prim-clr);
    margin: 0 0 24px 0;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-one .head-area {
    margin: 0 0 24px 0;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-one .head-area h6 {
    font-size: 35px;
    color: var(--black-clr);
    letter-spacing: -0.16px;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-one .head-area p {
    font-size: 18px;
    color: var(--grey-clr);
    font-weight: 400;
    text-align: left;
    margin: 0;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-one .input-main {
    margin: 0 0 8px;
    position: relative;
}
.sec-login-sign .ct-account-main .mid-area .ct-account-form-one .input-main span {
    font-size: 16px;
    color: var(--prim-clr);
    font-weight: 600;
    position: absolute;
    top: 12px;
    left: 14px;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-one .input-main .ct-inp {
    height: 48px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid var(--grey-clr-6);
    padding: 5px 14.5px 5px 38.5px;
    font-size: 16px;
    color: var(--prim-clr);
    font-weight: 400;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-one .input-main .ct-inp::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: var(--grey-clr-6);
    font-size: 16px;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-one .input-main .ct-inp::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--grey-clr-6);
    font-size: 16px;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-one .input-main .ct-inp:-ms-input-placeholder {
    /* IE 10+ */
    color: var(--grey-clr-6);
    font-size: 16px;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-one .input-main .ct-inp:-moz-placeholder {
    /* Firefox 18- */
    color: var(--grey-clr-6);
    font-size: 16px;
}


.sec-login-sign .ct-account-main .mid-area .ct-account-form-one .input-main .field-icon1 {
    z-index: 2;
    position: absolute;
    top: 35%;
    right: 20px;
    color: var(--black-clr-1);
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-one .message {
    padding: 15px 25px;
    background: var(--mid-bg-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    display: block;
    margin: 10px auto 0;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-one .message p {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    color: var(--mid-clr);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-one .message p span {
    margin: 0 10px 0 0;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-one .redir-link {
    font-size: 14px;
    text-align: left;
    font-weight: 400;
    color: var(--prim-clr);
    display: block;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-one .submit-btn {
    background: var(--prim-bg);
    color: var(--white-clr);
    font-weight: 700;
    font-size: 16px;
    text-transform: capitalize;
    padding: 6px;
    margin: 48px 0 0 0;
    border-radius: 8px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-one .submit-btn.submitting {
    background: var(--lt-grey-bg);
    color: var(--prim-clr);
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-one .submit-btn .spinner-border {
    margin: 0 8px 0 0;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-one p {
    margin: 16px 0 0 0;
    font-size: 16px;
    font-weight: 400;
    color: var(--black-clr-1);
    text-align: center;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-one p .re-link {
    color: var(--prim-clr);
    font-weight: 600;
    text-transform: capitalize;
}
/* form one css close */

/* form two css start */
.sec-login-sign .ct-account-main .mid-area .ct-account-form-two .icon-main {
    background: var(--lt-grey-bg);
    border-radius: 10px;
    border: 2px solid var(--prim-bg);
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--prim-clr);
    margin: 0 0 24px 0;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-two .head-area {
    margin: 0 0 24px 0;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-two .head-area h6 {
    font-size: 35px;
    color: var(--black-clr);
    letter-spacing: -0.16px;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-two .head-area p {
    font-size: 18px;
    color: var(--grey-clr);
    font-weight: 400;
    text-align: left;
    margin: 0;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-two .input-main {
    margin: 0 0 8px;
    position: relative;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-two .input-main .ct-inp {
    height: 48px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid var(--grey-clr-6);
    padding: 5px 14.5px;
    font-size: 16px;
    color: var(--prim-clr);
    font-weight: 600;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-two .input-main .ct-inp::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: var(--grey-clr-6);
    font-size: 16px;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-two .input-main .ct-inp::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--grey-clr-6);
    font-size: 16px;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-two .input-main .ct-inp:-ms-input-placeholder {
    /* IE 10+ */
    color: var(--grey-clr-6);
    font-size: 16px;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-two .input-main .ct-inp:-moz-placeholder {
    /* Firefox 18- */
    color: var(--grey-clr-6);
    font-size: 16px;
}


.sec-login-sign .ct-account-main .mid-area .ct-account-form-two .input-main .field-icon1 {
    z-index: 2;
    position: absolute;
    top: 35%;
    right: 20px;
    color: var(--black-clr-1);
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-two .submit-btn {
    background: var(--prim-bg);
    color: var(--white-clr);
    font-weight: 700;
    font-size: 16px;
    text-transform: capitalize;
    padding: 6px;
    margin: 48px 0 0 0;
    border-radius: 8px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-two .submit-btn.submitting {
    background: var(--lt-grey-bg);
    color: var(--prim-clr);
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-two .submit-btn .spinner-border {
    margin: 0 8px 0 0;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-two .ct-p {
    margin: 16px 0 0 0;
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-clr);
    text-align: center;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-two .redir-link {
    font-size: 16px;
    text-align: left;
    font-weight: 400;
    color: var(--prim-clr);
    text-decoration: underline;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-two p {
    margin: 16px 0 0 0;
    font-size: 16px;
    font-weight: 400;
    color: var(--black-clr-1);
    text-align: center;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-two p .re-link {
    color: var(--prim-clr);
    font-weight: 600;
    text-transform: capitalize;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-two .message {
    padding: 15px 25px;
    background: var(--mid-bg-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    display: block;
    margin: 10px auto 0;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-two .message p {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    color: var(--mid-clr);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sec-login-sign .ct-account-main .mid-area .ct-account-form-two .message p span {
    margin: 0 10px 0 0;
}

/* form two css close */

.sec-login-sign .ct-account-main .btm-area {
    margin: 15% 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.sec-login-sign .ct-account-main .btm-area .link {
    display: inline-block;
}

.sec-login-sign .ct-account-main .btm-area .link:not(:last-child) {
    margin: 0 7px 0 0;
}

/* ct-account form css close */

/* step-form-main css start */
.step-form-main {
    position: relative;
    padding: 0 5px;
}
.step-form-main .progress-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    margin: 0 0 24px 0;
}
.step-form-main .progress-main::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 0;
    width: calc(100% - 10px);
    height: 2px;
    background: var(--white-bg-3);
    z-index: -1;
    margin: 0 auto;
    display: block;
}
.step-form-main .progress-main .prog-step {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.step-form-main .progress-main .prog-step:first-child {
    align-items: flex-start;
    justify-content: flex-start;
}
.step-form-main .progress-main .prog-step:last-child {
    align-items: flex-end;
    justify-content: flex-end;
}
.step-form-main .progress-main .prog-step .step-number {
    height: 18px;
    width: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white-bg-3);
    transition: all 0.2s ease-in-out;
}
.step-form-main .progress-main .prog-step.active-progress .step-number {
    background: var(--prim-bg);
    box-shadow: 0 0 0 4px var(--lt-grey-bg);
}
.step-form-main .progress-main .prog-step.completed .step-number {
    background: var(--prim-bg);
    box-shadow: 0 0 0 4px var(--lt-grey-bg);
}
.step-form-main .progress-main .prog-step h6 {
    color: var(--white-bg-3);
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    transition: all 0.2s ease-in-out;
    margin: 15px 0 0 0;
}
.step-form-main .progress-main .prog-step.active-progress h6 {
    color: var(--prim-clr);
}
.step-form-main .progress-main .prog-step.completed h6 {
    color: var(--prim-clr);
}
.step-form-main .step-form-area {

}
.step-form-main .step-form-area .step-form {

}
.step-form-main .step-form-area .step-form .head-area {
    margin: 0 0 24px 0;
}
.step-form-main .step-form-area .step-form .head-area h4 {
    font-size: 35px;
    color: var(--black-clr);
    letter-spacing: -0.16px;
    font-weight: 700;
    margin: 0 0 8px 0;
}
.step-form-main .step-form-area .step-form .head-area p {
    font-size: 18px;
    color: var(--grey-clr);
    font-weight: 400;
    text-align: left;
    margin: 0;
}
.step-form-main .step-form-area .step-form .ct-floating {
    margin: 0 0 16px 0;
    position: relative;
}
.step-form-main .step-form-area .step-form .ct-floating .ct-inp {
    height: 48px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid var(--grey-clr-6);
    padding: 5px 14.5px;
    font-size: 16px;
    color: var(--prim-clr);
    font-weight: 600;
}
.step-form-main .step-form-area .step-form .ct-floating .ct-inp:focus {
    border: 1px solid var(--prim-clr);
}
.step-form-main .step-form-area .step-form .ct-floating .field-icon1 {
    z-index: 2;
    position: absolute;
    top: 35%;
    right: 20px;
    color: var(--black-clr-1);
    cursor: pointer;
}
.step-form-main .step-form-area .step-form .ct-floating>label {
    font-size: 16px;
    color: var(--grey-clr);
    font-weight: 400;
    text-transform: capitalize;
    left: 2px;
}
.step-form-main .step-form-area .step-form .ct-floating>.ct-inp:focus~label, .ct-floating>.ct-inp:not(:placeholder-shown)~label {
    transform: scale(.85) translateY(-1.8rem) translateX(0.15rem);
    color: var(--prim-clr);
}
.step-form-main .step-form-area .step-form .prev-btn {

}
.step-form-main .step-form-area .step-form .prev-btn,.step-form-main .step-form-area .step-form .next-btn {
    background: var(--prim-bg);
    color: var(--white-clr);
    font-weight: 700;
    font-size: 16px;
    text-transform: capitalize;
    padding: 6px;
    margin: 0;
    border-radius: 8px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.step-form-main .step-form-area .step-form .prev-btn {
    background: var(--lt-grey-bg);
    color: var(--prim-clr);
}
.step-form-main .ct-m {
    margin: 30% 0 0 0;
}
/* step-form-main css close */

/* terms-condition-main css start */
.terms-condition-main {

}
.terms-condition-main .head-area {
    margin: 0 0 24px 0;
}
.terms-condition-main .head-area h4 {
    font-size: 35px;
    color: var(--black-clr);
    letter-spacing: -0.16px;
    font-weight: 700;
    margin: 0 0 8px 0;
}
.terms-condition-main .head-area p {
    font-size: 18px;
    color: var(--grey-clr);
    font-weight: 400;
    text-align: left;
    margin: 0;
}
.terms-condition-main .head-area p>a {
    color: var(--prim-clr);
    font-weight: 500;
}
.terms-condition-main .desc {
    padding: 16px;
    border-radius: 10px;
    background: var(--lt-grey-bg-2);
    margin: 0 0 80px 0;
    overflow-y: scroll;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 0 0.8% 0 0;
    height: 500px;
}

/* width */
.terms-condition-main .desc::-webkit-scrollbar {
    width: 5px;
}

/* Track */
.terms-condition-main .desc::-webkit-scrollbar-track {
    background: var(--white-bg);
    border-radius: 50px;
}

/* Handle */
.terms-condition-main .desc::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.terms-condition-main .desc::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}

.terms-condition-main .desc p {
    font-size: 16px;
    color: var(--grey-clr);
    font-weight: 400;
    text-align: left;
    line-height: 24px;
}
.terms-condition-main .desc>p:not(:last-child) {
    margin: 0 0 20px 0;
}
.terms-condition-main .desc p>a {
    font-weight: 500;
    color: var(--prim-clr);
}
.terms-condition-main .prev-btn,.terms-condition-main .next-btn {
    background: var(--prim-bg);
    color: var(--white-clr);
    font-weight: 700;
    font-size: 16px;
    text-transform: capitalize;
    padding: 6px;
    margin: 0;
    border-radius: 8px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.terms-condition-main .prev-btn {
    background: var(--lt-grey-bg);
    color: var(--prim-clr);
}
/* terms-condition-main css close */

/* account-created-main css start */
.account-created-main {

}
.account-created-main .account-created-area {

}
.account-created-main .account-created-area .desc {
    text-align: center;
}
.account-created-main .account-created-area .desc .verified-icn {
    color: var(--prim-clr);
    font-variation-settings:
    'FILL' 1,
    'wght' 400;
    font-size: 90px;
}
.account-created-main .account-created-area .desc h3 {
    font-size: 35px;
    color: var(--black-clr);
    letter-spacing: -0.16px;
    font-weight: 700;
    margin: 32px 0 8px 0;
}
.account-created-main .account-created-area .desc p {
    font-size: 18px;
    color: var(--grey-clr);
    font-weight: 400;
    line-height: 24px;
}
.account-created-main .account-created-area .desc .thumb {
    display: block;
    margin: 43px auto 10%;
    height: 245px;
    object-fit: contain;
    object-position: center;
}
.account-created-main .account-created-area .desc .start-btn {
    background: var(--prim-bg);
    color: var(--white-clr);
    font-weight: 700;
    font-size: 16px;
    text-transform: capitalize;
    padding: 6px;
    margin: 0;
    border-radius: 8px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* account-created-main css close */

/* po-req-sent-main css start */
.po-req-sent-main {

}
.po-req-sent-main .po-req-sent-area {

}
.po-req-sent-main .po-req-sent-area .desc {
    text-align: center;
}
.po-req-sent-main .po-req-sent-area .desc .verified-icn {
    color: var(--prim-clr);
    font-variation-settings:
    'FILL' 1,
    'wght' 400;
    font-size: 90px;
}
.po-req-sent-main .po-req-sent-area .desc h3 {
    font-size: 28px;
    color: var(--black-clr);
    letter-spacing: -0.16px;
    font-weight: 700;
    margin: 32px 0 8px 0;
}
.po-req-sent-main .po-req-sent-area .desc p {
    font-size: 18px;
    color: var(--grey-clr);
    font-weight: 400;
    line-height: 24px;
}
.po-req-sent-main .po-req-sent-area .desc .thumb {
    display: block;
    margin: 43px auto 10%;
    height: 245px;
    object-fit: contain;
    object-position: center;
}
.po-req-sent-main .po-req-sent-area .desc .start-btn {
    background: var(--prim-bg);
    color: var(--white-clr);
    font-weight: 700;
    font-size: 16px;
    text-transform: capitalize;
    padding: 6px;
    margin: 0 auto;
    border-radius: 8px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    max-width: 226px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* po-req-sent-main css close */

/* reset form css start */
.sec-login-sign .reset-main {
    width: 80%;
    height: calc(100% - 40px);
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 0 0.8% 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

/* width */
.sec-login-sign .reset-main::-webkit-scrollbar {
    width: 5px;
}

/* Track */
.sec-login-sign .reset-main::-webkit-scrollbar-track {
    background: var(--white-bg);
    border-radius: 50px;
}

/* Handle */
.sec-login-sign .reset-main::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.sec-login-sign .reset-main::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}

.sec-login-sign .reset-main .top-area {
    margin: 0 0 72px 0;
}

.sec-login-sign .reset-main .top-area .logo-main .thumb {
    height: 70px;
    object-fit: contain;
    object-position: center;
}

.sec-login-sign .reset-main .mid-area {
    width: 100%;
}

.sec-login-sign .reset-main .mid-area .reset-form .icon-main {
    background: var(--lt-grey-bg);
    border-radius: 10px;
    border: 2px solid var(--prim-bg);
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--prim-clr);
    margin: 0 0 24px 0;
}

.sec-login-sign .reset-main .mid-area .reset-form .head-area {
    margin: 0 0 24px 0;
}

.sec-login-sign .reset-main .mid-area .reset-form .head-area h6 {
    font-size: 35px;
    color: var(--black-clr);
    letter-spacing: -0.16px;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.sec-login-sign .reset-main .mid-area .reset-form .head-area p {
    font-size: 18px;
    color: var(--grey-clr);
    font-weight: 400;
    text-align: left;
}

.sec-login-sign .reset-main .mid-area .reset-form .head-area p span {
    color: var(--black-clr);
    font-weight: 500;
}

.sec-login-sign .reset-main .mid-area .reset-form .input-main {
    margin: 0 0 40% 0;
    position: relative;
}

.sec-login-sign .reset-main .mid-area .reset-form .input-main .ct-inp {
    height: 48px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid var(--grey-clr-6);
    padding: 5px 14.5px;
    font-size: 16px;
    color: var(--prim-clr);
    font-weight: 600;
}

.sec-login-sign .reset-main .mid-area .reset-form .input-main .ct-inp::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: var(--grey-clr-6);
    font-size: 16px;
    font-weight: 400;
}

.sec-login-sign .reset-main .mid-area .reset-form .input-main .ct-inp::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--grey-clr-6);
    font-size: 16px;
    font-weight: 400;
}

.sec-login-sign .reset-main .mid-area .reset-form .input-main .ct-inp:-ms-input-placeholder {
    /* IE 10+ */
    color: var(--grey-clr-6);
    font-size: 16px;
    font-weight: 400;
}

.sec-login-sign .reset-main .mid-area .reset-form .input-main .ct-inp:-moz-placeholder {
    /* Firefox 18- */
    color: var(--grey-clr-6);
    font-size: 16px;
    font-weight: 400;
}

.sec-login-sign .reset-main .mid-area .reset-form .submit-btn {
    background: var(--prim-bg);
    color: var(--white-clr);
    font-weight: 700;
    font-size: 16px;
    text-transform: capitalize;
    padding: 6px;
    margin: 20px 0 0 0;
    border-radius: 8px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sec-login-sign .reset-main .mid-area .reset-form .submit-btn.submitting {
    background: var(--lt-grey-bg);
    color: var(--prim-clr);
}

.sec-login-sign .reset-main .mid-area .reset-form .submit-btn .spinner-border {
    margin: 0 8px 0 0;
}

.sec-login-sign .reset-main .mid-area .reset-form p {
    margin: 16px 0 0 0;
    font-size: 16px;
    font-weight: 400;
    color: var(--black-clr-1);
    text-align: center;
}

.sec-login-sign .reset-main .mid-area .reset-form .message {
    padding: 15px 25px;
    background: var(--sec-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.sec-login-sign .reset-main .mid-area .reset-form .message p {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    color: var(--black-clr-1);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white-clr);
}

.sec-login-sign .reset-main .mid-area .reset-form .message p span {
    margin: 0 10px 0 0;
}



.sec-login-sign .reset-main .mid-area .reset-form p a {
    color: var(--prim-clr);
    font-weight: 600;
    text-transform: capitalize;
}

/* reset form css close */

/* slider css start */
.sec-login-sign .fix-desc {
    background: var(--black-bg);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 10px;
    height: 10%;
}

.sec-login-sign .fix-desc p {
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-clr);
    line-height: 24px;
    text-align: center;
}

.sec-login-sign .fix-desc p a {
    color: var(--white-clr);
    text-transform: capitalize;
}

.sec-login-sign .log-sign-slider {
    height: 90%;
}

.sec-login-sign .log-sign-slider .owl-stage-outer {
    height: 100%;
}

.sec-login-sign .log-sign-slider .owl-stage {
    height: 100%;
}

.sec-login-sign .log-sign-slider .owl-stage .owl-item {
    height: 100%;
}

.sec-login-sign .log-sign-slider .owl-stage .owl-item .item {
    height: 100%;
}

.sec-login-sign .log-sign-slider .owl-dots {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin-top: 0 !important;
}

.sec-login-sign .log-sign-slider .owl-dots .owl-dot span {
    height: 10px;
    width: 10px;
    background: var(--black-bg-1);
    transition: all 0.2s ease-in-out;
    margin: 0 4px;
}

.sec-login-sign .log-sign-slider .owl-dots .owl-dot.active span {
    background: var(--white-bg);
}

.sec-login-sign .log-sign-slider .box-img {
    height: 100%;
    position: relative;
}

.sec-login-sign .log-sign-slider .box-img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 20%, rgba(0, 0, 0, 0.50) 40%, rgb(0 0 0 / 85%) 65%, rgba(0, 0, 0, 1) 100%);
    height: 100%;
    width: 100%;
    z-index: 1;
}

.sec-login-sign .log-sign-slider .box-img .thumb {
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.sec-login-sign .log-sign-slider .box-img .desc {
    position: absolute;
    inset: 0;
    height: 95%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    z-index: 1;
    text-align: center;
}

.sec-login-sign .log-sign-slider .box-img .desc h6 {
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    color: var(--grey-clr);
    text-transform: unset;
    margin: 0 0 8px 0;
}

.sec-login-sign .log-sign-slider .box-img .desc h4 {
    font-size: clamp(24px, 5vw, 48px);
    letter-spacing: -0.16px;
    text-transform: capitalize;
    color: var(--white-clr);
    font-weight: 700;
}

/* slider css close */
.ct-height {
    height: 100%;
}

/********************* sec-login-sign styles close *********************/


/********************* sec-main styles start *********************/
.sec-main {
    position: relative;
    overflow: hidden;
    /* overflow-x: hidden;
    overflow-y: scroll;
    height: calc(100% - 80px); */
    width: calc(100% - 55px);
    /* width: calc(100% - 230px); */
    padding: 90px 0 0 0;
    margin: 0 0 0 auto;
    transition: margin 0.5s ease, padding 0.5s ease;
}

.hv-100 {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.sec-main.full-width {
    width: calc(100% - 0px);
}

body.sidebar-nonactive .sec-main {
    /* width: calc(100% - 85px);*/
}

.alert-success {
    padding: 15px;
    background: var(--sec-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    position: fixed;
    bottom: 15px;
    left: 0;
    right: 0;
    max-width: 385px;
    margin: 0 auto;
}
.alert-success p {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    color: var(--black-clr-1);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white-clr);
}
.alert-success p span {
    margin: 0 10px 0 0;
}
.sec-main .inner-area {
    padding: 0 80px 20px 20px;
}

.sec-main.full-width .inner-area {
    padding: 0 80px 20px 80px;
}

.sec-main.full-width .inner-area.disabled-area{
    position: relative;
}

.sec-main.full-width .inner-area.disabled-area::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    background-color: #ffffff61;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.sec-main .container-ct {
    max-width: 1920px;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
}

.sec-main .main-top-bar {
    border-bottom: 1px solid var(--grey-clr-3);
    padding: 32px 0;
    margin: 0 0 24px 0;
}

.sec-main .main-top-bar .bar-inner {
    padding: 0 80px 0 10px;
}

.sec-main.full-width .main-top-bar .bar-inner {
    padding: 0 80px 0 80px;
}

.sec-main .main-top-bar .bar-inner h4 {
    font-weight: 700;
    text-transform: capitalize;
    font-size: clamp(20px,2vw,28px);
    color: var(--black-clr-1);
    letter-spacing: -0.16px;
    margin: 0 0 4px 0;
}

.sec-main .main-top-bar .bar-inner p {
    font-weight: 400;
    font-size: clamp(16px,2vw,20px);
    color: var(--grey-clr);
}

.sec-main .main-top-bar .bar-inner .ct-flex {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.sec-main .main-top-bar .bar-inner .ct-flex .back-btn {
    height: 48px;
    width: 48px;
    border-radius: 10px;
    background: var(--prim-bg);
    color: var(--white-clr);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 16px 0 0;
}

.sec-main .main-top-bar .bar-inner .action-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
    flex-wrap: wrap;
}
.sec-main .main-top-bar .bar-inner .action-btn>*:not(:last-child) {
    margin: 0 16px 0 0;
}
.sec-main .main-top-bar .bar-inner .action-btn .get-bid {
    background: var(--prim-bg);
    color: var(--white-clr);
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    padding: 6px;
    border-radius: 5px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    max-width: 150px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sec-main .main-top-bar .bar-inner .action-btn .get-bid span {
    margin: 0 8px 0 0;
}

.sec-main .main-top-bar .bar-inner .action-btn .cancle-btn {
    background: var(--grey-clr-4);
    color: var(--grey-clr-9);
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    padding: 8px 4px;
    border-radius: 5px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    max-width: 124px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sec-main .main-top-bar .bar-inner .action-btn .cancle-btn span {
    margin: 0 8px 0 0;
}
.sec-main .main-top-bar .bar-inner .action-btn .reject-btn {
    background: var(--mid-bg-2);
    color: var(--mid-clr);
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    padding: 8px 4px;
    border-radius: 5px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    max-width: 180px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sec-main .main-top-bar .bar-inner .action-btn .reject-btn span {
    margin: 0 8px 0 0;
}

.sec-main .main-top-bar .bar-inner .action-btn .accept-btn {
    background: var(--sec-bg);
    color: var(--white-clr);
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    padding: 8px 4px;
    border-radius: 5px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    max-width: 185px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sec-main .main-top-bar .bar-inner .action-btn .accept-btn span {
    margin: 0 8px 0 0;
}

.sec-main .main-top-bar .bar-inner .action-btn .slip-btn {
    background: var(--prim-bg);
    color: var(--white-clr);
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    padding: 6px;
    border-radius: 5px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    max-width: 240px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sec-main .main-top-bar .bar-inner .action-btn .slip-btn span {
    margin: 0 8px 0 0;
}

.sec-main .main-top-bar .bar-inner .action-btn .slip-det-btn {
    background: var(--prim-bg);
    color: var(--white-clr);
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    padding: 6px;
    border-radius: 5px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    max-width: 226px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sec-main .main-top-bar .bar-inner .action-btn .slip-rev-btn {
    background: var(--prim-bg);
    color: var(--white-clr);
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    padding: 6px;
    border-radius: 5px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    max-width: 226px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sec-main .main-top-bar .bar-inner .action-btn .po-req-btn {
    background: var(--sec-bg);
    color: var(--white-clr);
    font-weight: 500;
    font-size: 18px;
    text-transform: capitalize;
    padding: 20px;
    border-radius: 5px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    max-width: 226px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sec-main .main-top-bar .bar-inner .action-btn .notes-btn {
    background: var(--sec-bg);
    color: var(--white-clr);
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    padding: 6px;
    border-radius: 5px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    max-width: 226px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sec-main .main-top-bar .bar-inner .search-area {}

.sec-main .main-top-bar .bar-inner .search-area .input-main {
    position: relative;
}

.sec-main .main-top-bar .bar-inner .search-area .input-main .ct-inp {
    height: 48px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid var(--grey-clr-4);
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
    padding: 14.5px 46.5px 14.5px 14.5px;
}

.sec-main .main-top-bar .bar-inner .search-area .input-main .ct-inp::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: var(--grey-clr);
}

.sec-main .main-top-bar .bar-inner .search-area .input-main .ct-inp::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--grey-clr);
}

.sec-main .main-top-bar .bar-inner .search-area .input-main .ct-inp:-ms-input-placeholder {
    /* IE 10+ */
    color: var(--grey-clr);
}

.sec-main .main-top-bar .bar-inner .search-area .input-main .ct-inp:-moz-placeholder {
    /* Firefox 18- */
    color: var(--grey-clr);
}

.sec-main .main-top-bar .bar-inner .search-area .search-btn {
    height: 24px;
    width: 24px;
    border-radius: 5px;
    background: var(--white-bg);
    color: var(--prim-clr);
    border: none;
    padding: 5px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 12px;
    right: 14px;
}

/********************* sec-main styles close *********************/

/********************* home-area styles start *********************/
.home-area {
    position: relative;
}

/* card chart-area start */

.home-area .multi-card.acc-ord-card .inp-grp .ct-select {
    height: 36px;
    width: 100%;
    border-radius: 5px;
    background-color: var(--lt-grey-bg);
    --bs-form-select-bg-img: url(../images/chevron_down.png);
    background-size: 12px 8px;
    border: 1px solid var(--lt-grey-bg);
    padding: 5px 12px;
    font-size: 16px;
    color: var(--prim-clr);
    font-weight: 500;
    margin: 0;
}

.home-area .multi-card.acc-ord-card .income-area {

}

.home-area .multi-card.acc-ord-card .income-area h5 {
    color: var(--sec-clr);
    font-size: clamp(22px,2vw,32px);
    letter-spacing: -0.64px;
    font-weight: 700;
    margin: 0 0 4px 0;
}
.home-area .multi-card.acc-ord-card .income-area p {
    font-size: 16px;
    color: var(--grey-clr);
}

.home-area .multi-card.acc-ord-card .income-area {

}
.home-area .multi-card.acc-ord-card .income-area .ct-table {
    margin: 16px 0 0 0;
}
.home-area .multi-card.acc-ord-card .income-area .ct-table .table thead {
    vertical-align: baseline;
}
.home-area .multi-card.acc-ord-card .income-area .ct-table .table thead tr {

}
.home-area .multi-card.acc-ord-card .income-area .ct-table thead tr th {
    background: var(--lt-grey-bg-2);
    font-size: 14px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
    line-height: normal;
    padding: 16px 12px;
}
.home-area .multi-card.acc-ord-card .income-area .ct-table {
    position: relative;
height: 200px;
overflow: auto;
}

/* width */
.home-area .multi-card.acc-ord-card .income-area .ct-table::-webkit-scrollbar {
    width: 5px;
}

/* Track */
.home-area .multi-card.acc-ord-card .income-area .ct-table::-webkit-scrollbar-track {
    background: var(--lt-grey-bg-3);
    border-radius: 50px;
}

/* Handle */
.home-area .multi-card.acc-ord-card .income-area .ct-table::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.home-area .multi-card.acc-ord-card .income-area .ct-table::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}

.home-area .multi-card.acc-ord-card .income-area .ct-table tbody tr {

width: auto;
}
.home-area .multi-card.acc-ord-card .income-area .ct-table tbody tr td {
    font-size: 14px;
    font-weight: 400;
    color: var(--black-clr-1);
    text-transform: capitalize;
    padding: 16px 12px;
}

.home-area .multi-card .chart-area {
    margin: 16px 0 0 0;
}

.home-area .multi-card .chart-area .nav-pills {}

.home-area .multi-card .chart-area .nav-pills .nav-item .nav-link {
    background: var(--lt-grey-bg);
    color: var(--prim-clr);
    font-weight: 500;
    font-size: 14px;
    text-transform: capitalize;
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    transition: all 0.2s ease-in-out;
}

.home-area .multi-card .chart-area .nav-pills .nav-item:not(:last-child) .nav-link {
    margin: 0 8px 0 0;
}

.home-area .multi-card .chart-area .nav-pills .nav-item .nav-link.active {
    background: var(--prim-bg);
    color: var(--white-clr);
}

.home-area .multi-card .chart-area .nav-pills .nav-item .nav-link:hover {
    background: var(--prim-bg);
    color: var(--white-clr);
}

.home-area .multi-card .chart-area .apexcharts-legend-series {
    background: var(--grey-clr-5);
    border-radius: 4px;
    padding: 4px;
    cursor: pointer;
}

.home-area .multi-card .chart-area .apexcharts-legend-series .apexcharts-legend-text {
    color: var(--black-clr);
}

/* card chart-area close */

/* card search area start */
.home-area .multi-card.buy-supp-card .search-area {}

.home-area .multi-card.buy-supp-card .search-area .input-main {
    position: relative;
}

.home-area .multi-card.buy-supp-card .search-area .input-main .ct-inp {
    height: 48px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid var(--grey-clr-4);
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
    padding: 14.5px 46.5px 14.5px 14.5px;
}

.home-area .multi-card.buy-supp-card .search-area .input-main .ct-inp::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: var(--grey-clr);
}

.home-area .multi-card.buy-supp-card .search-area .input-main .ct-inp::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--grey-clr);
}

.home-area .multi-card.buy-supp-card .search-area .input-main .ct-inp:-ms-input-placeholder {
    /* IE 10+ */
    color: var(--grey-clr);
}

.home-area .multi-card.buy-supp-card .search-area .input-main .ct-inp:-moz-placeholder {
    /* Firefox 18- */
    color: var(--grey-clr);
}

.home-area .multi-card.buy-supp-card .search-area .search-btn {
    height: 24px;
    width: 24px;
    border-radius: 5px;
    background: var(--white-bg);
    color: var(--prim-clr);
    border: none;
    padding: 5px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 12px;
    right: 14px;
}

.home-area .multi-card.buy-supp-card .search-area .search-results {
    min-height: 310px;
    max-height: 310px;
    /* overflow: hidden; */
    overflow-x: hidden;
    overflow-y: scroll;
    margin: 24px 0 0 0;
}

/* width */
.home-area .multi-card.buy-supp-card .search-area .search-results::-webkit-scrollbar {
    width: 5px;
}

/* Track */
.home-area .multi-card.buy-supp-card .search-area .search-results::-webkit-scrollbar-track {
    background: var(--white-bg);
    border-radius: 50px;
}

/* Handle */
.home-area .multi-card.buy-supp-card .search-area .search-results::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.home-area .multi-card.buy-supp-card .search-area .search-results::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}

.home-area .multi-card.buy-supp-card .search-area .search-results .search-single {
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.home-area .multi-card.buy-supp-card .search-area .search-results .search-single:not(:last-child) {
    margin: 0 0 20px 0;
}

.home-area .multi-card.buy-supp-card .search-area .search-results .search-single .img-main .thumb {
    max-height: 40px;
    max-width: 40px;
    min-width: 40px;
    min-height: 40px;
    width: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

.home-area .multi-card.buy-supp-card .search-area .search-results .search-single .desc {
    padding: 0 0 0 8px;
}

.home-area .multi-card.buy-supp-card .search-area .search-results .search-single .desc .link {
    color: var(--black-clr);
    text-transform: capitalize;
    font-weight: 700;
    font-size: 14px;
    margin: 0 0 4px 0;
}

.home-area .multi-card.buy-supp-card .search-area .search-results .search-single .desc p {
    color: var(--grey-clr);
    font-weight: 400;
    font-size: 14px;
}

/* card search area close */
/* map card start */
.home-area .multi-card.map-card {
    padding: 0;
}

.home-area .multi-card .map {
    height: 260px;
    width: 100%;
    border-radius: 10px;
}

/* map card close */
.home-area .multi-card.td-pickup {
    padding-bottom: 0;
    /* padding-left: 0;
    padding-right: 0; */
}

.home-area .multi-card.td-pickup .top-area {
    padding: 0;
}

/* picks-slider layout start */
.home-area .slider-area .today-picks-slider {
    position: unset;
}

.home-area .slider-area .today-picks-slider .owl-stage {
    padding: 0 0 20px 0;
}

.home-area .slider-area .today-picks-slider .owl-nav {
    position: absolute;
    top: 14%;
    right: 12px;
    max-width: 64px;
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: space-around;
}

.home-area .slider-area .today-picks-slider .owl-nav .owl-prev,
.home-area .slider-area .today-picks-slider .owl-nav .owl-next {
    margin: 0;
    padding: 0;
    color: var(--black-bg);
}

.home-area .slider-area .today-picks-slider .owl-nav .owl-next {}

.home-area .slider-area .today-picks-slider .owl-nav .owl-prev:hover,
.home-area .slider-area .today-picks-slider .owl-nav .owl-next:hover {
    background: transparent;
    color: inherit;
}

/* picks-slider layout close */
/* slider cards start */
.home-area .slider-area .sl-card {
    padding: 0;
    border-radius: 12px;
    box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.06);
    border: none;
}

.home-area .slider-area .sl-card .img-main {
    position: relative;
}

.home-area .slider-area .sl-card .img-main .tag-rej,
.home-area .slider-area .sl-card .img-main .tag-rec,
.home-area .slider-area .sl-card .img-main .tag-po-req {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    border-radius: 5px;
    background: var(--mid-bg);
    color: var(--white-clr);
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
    padding: 7px 16px;
}

.home-area .slider-area .sl-card .img-main .tag-rec {
    background: var(--sec-bg);
}

.home-area .slider-area .sl-card .img-main .tag-po-req {
    background: purple;
}

.home-area .slider-area .sl-card .img-main .thumb {
    height: 138px;
    object-fit: contain;
    object-position: center;
    border-radius: 12px 12px 0 0;
}

.home-area .slider-area .sl-card .desc {
    padding: 16px 12px;
}

.home-area .slider-area .sl-card .desc ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    font-size: 14px;
    color: var(--black-clr-1);
    text-transform: capitalize;
}

.home-area .slider-area .sl-card .desc ul li:not(:last-child) {
    margin: 0 0 8px 0;
}

.home-area .slider-area .sl-card .desc ul li a {
    font-weight: 400;
    font-size: 14px;
    color: var(--grey-clr);
    text-transform: capitalize;
    text-align: right;
    display: inline-block;
}

.home-area .slider-area .sl-card .desc ul li span {
    font-weight: 400;
    font-size: 14px;
    color: var(--grey-clr);
    text-transform: capitalize;
    text-align: right;
    display: inline-block;
}

.home-area .slider-area .sl-card .desc a {
    font-size: 16px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
}

.home-area .slider-area .sl-card .desc small {
    font-size: 14px;
    font-weight: 400;
    color: var(--grey-clr);
    text-transform: capitalize;
    display: block;
}

.home-area .slider-area .sl-card .desc small span {
    font-size: 14px;
    font-weight: 500;
    color: var(--mid-bg);
    margin: 0 5px 0 0;
}

/* slider cards close */
/********************* home-area styles close *********************/

/********************* account-area styles start *********************/
.account-area {
    position: relative;
}

.account-area .acc-setting-side-bar {}

.account-area .acc-setting-side-bar ul {}

.account-area .acc-setting-side-bar ul li {}

.account-area .acc-setting-side-bar ul li a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 56px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    color: var(--black-clr);
    text-transform: capitalize;
    background: var(--lt-grey-bg-2);
    padding: 16px;
    position: relative;
}

.account-area .acc-setting-side-bar ul li a.active-link {
    background: var(--prim-bg);
    color: var(--white-clr);
}

.account-area .acc-setting-side-bar ul li:not(:last-child) a {
    margin: 0 0 16px 0;
}

.account-area .acc-setting-side-bar ul li a .arrow-icn {
    position: absolute;
    top: 16px;
    right: 16px;
}

.account-area .acc-setting-side-bar ul li a .link-txt {
    margin: 0 0 0 8px;
}

.account-area .acc-details-area {
    border: 1px solid var(--grey-clr-4);
    border-radius: 20px;
}

.account-area .acc-details-area .profile-box {}

.account-area .acc-details-area .profile-box .top-area {
    border-bottom: 1px solid var(--grey-clr-4);
    padding: 32px 32px 0 32px;
}

.account-area .acc-details-area .profile-box .top-area .img-area {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 0 0 24px 0;
}

.account-area .acc-details-area .profile-box .top-area .profile-main {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    border: 1px solid var(--grey-clr-4);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.account-area .acc-details-area .profile-box .top-area .profile-main .icn-thumb {
    height: auto;
}

.account-area .acc-details-area .profile-box .top-area .profile-main .thumb {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center;
}

.account-area .acc-details-area .profile-box .top-area .desc {
    padding: 0 0 0 16px;
}

.account-area .acc-details-area .profile-box .top-area .desc h6 {
    font-size: 16px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
}

.account-area .acc-details-area .profile-box .top-area .desc p {
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-clr);
    text-transform: unset;
    display: block;
}

.account-area .acc-details-area .profile-box .top-area .add-img {
    width: 100%;
    max-width: 101px;
    height: 35px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--prim-bg);
    color: var(--white-clr);
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    padding: 8px;
    margin: 0 0 0 auto;
    position: relative;
}

.account-area .acc-details-area .profile-box .top-area .add-img .img-upload {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.account-area .acc-details-area .profile-box .top-area .count-box {
    border: none;
    border-radius: 8px;
    background: var(--white-bg-2);
    text-align: center;
    padding: 12px;
    margin: 0 0 24px 0;
}

.account-area .acc-details-area .profile-box .top-area .count-box h6 {
    font-size: 20px;
    font-weight: 500;
    color: var(--prim-clr);
    text-transform: capitalize;
    margin: 0 0 8px;
}

.account-area .acc-details-area .profile-box .top-area .count-box p {
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-clr);
    text-transform: capitalize;
}

.account-area .acc-details-area .profile-box .mid-area {
    padding: 18px 32px;
    border-bottom: 1px solid var(--grey-clr-4);
}

.account-area .acc-details-area .profile-box .mid-area .mid-info {}

.account-area .acc-details-area .profile-box .mid-area .mid-info h5 {
    font-size: 18px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}

.account-area .acc-details-area .profile-box .mid-area .mid-info p {
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-clr);
    text-transform: unset;
}

.account-area .acc-details-area .profile-box .mid-area .edit-btn {
    background: var(--lt-grey-bg);
    color: var(--prim-clr);
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    padding: 8px 4px;
    margin: 0 0 0 auto;
    border-radius: 100px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 35px;
    max-width: 105px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-area .acc-details-area .profile-box .btm-area {
    padding: 24px 32px;
}

.account-area .acc-details-area .profile-box .btm-area .info-box {
    margin: 0 0 16px 0;
}

.account-area .acc-details-area .profile-box .btm-area .info-box h6 {
    font-size: 16px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}

.account-area .acc-details-area .profile-box .btm-area .info-box p {
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-clr);
    text-transform: unset;
}

.account-area .acc-details-area .content-box {
    padding: 32px;
}

.account-area .acc-details-area .content-box h6 {
    font-size: 18px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 16px 0;
}

.account-area .acc-details-area .content-box p {
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-clr);
    text-transform: unset;
    line-height: 24px;
}

.account-area .acc-details-area .content-box p:not(:last-child) {
    margin: 0 0 20px 0;
}

.account-area .acc-details-area .content-box p a {
    color: var(--prim-clr);
    font-weight: 500;
}

.account-area .acc-details-area .faq-box {
    padding: 32px;
}

.account-area .acc-details-area .faq-box .head {
    margin: 0 0 24px 0;
}

.account-area .acc-details-area .faq-box .head h6 {
    font-size: 18px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}

.account-area .acc-details-area .faq-box .head p {
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-clr);
    text-transform: unset;
}

.account-area .acc-details-area .faq-box .accordion-main {}

.account-area .acc-details-area .faq-box .accordion-main .accordion {}

.account-area .acc-details-area .faq-box .accordion-main .accordion .accordion-item {
    border: 1px solid var(--grey-clr-4);
    transition: all 0.5s ease-in-out;
    border-radius: 10px;
    overflow: hidden;
}

.account-area .acc-details-area .faq-box .accordion-main .accordion .accordion-item:not(:last-child) {
    margin: 0 0 24px 0;
}

.account-area .acc-details-area .faq-box .accordion-main .accordion .accordion-item:has(> .accordion-collapse.show) {
    border: 1px solid var(--black-clr-1);
    transition: all 0.5s ease-in-out;
    background: var(--grey-bg-1);
}

.account-area .acc-details-area .faq-box .accordion-main .accordion .accordion-item .accordion-header {}

.account-area .acc-details-area .faq-box .accordion-main .accordion .accordion-item .accordion-header .accordion-button {
    font-weight: 400;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: unset;
    text-align: center;
    padding: 14.5px 16px;
    background: var(--white-bg);
    position: relative;
    border-radius: 0;
    transition: all 0.3s ease-in-out;
    border-bottom: none;
    box-shadow: none;
}

.account-area .acc-details-area .faq-box .accordion-main .accordion .accordion-item .accordion-header .accordion-button::after {
    background-image: none;
    content: '\f078';
    font-family: 'Font Awesome 6 Pro';
    font-weight: 900;
    font-size: 14px;
    transform: rotate(0deg);
    height: 24px;
    width: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white-bg);
}

.account-area .acc-details-area .faq-box .accordion-main .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
    color: var(--black-clr-1);
    background: var(--white-bg);
    border-bottom: none;
    padding: 14.5px 16px;
}

.account-area .acc-details-area .faq-box .accordion-main .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::after {
    background-image: none;
    content: '\f078';
    font-family: 'Font Awesome 6 Pro';
    transform: rotate(180deg);
    color: #000;
}

.account-area .acc-details-area .faq-box .accordion-main .accordion .accordion-item .accordion-collapse {
    background: var(--white-bg);
    box-shadow: none;
    border-radius: 0;
    margin: 0;
}

.account-area .acc-details-area .faq-box .accordion-main .accordion .accordion-item .accordion-collapse .accordion-body {
    padding: 0 16px 16px 16px;
}

.account-area .acc-details-area .faq-box .accordion-main .accordion .accordion-item .accordion-collapse .accordion-body p {
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    margin: 0 0 5px 0;
    color: var(--grey-clr);
}

/********************* account-area styles close *********************/

/********************* chat-main styles start *********************/
.chat-main {
    position: relative;
    overflow: hidden;
    padding: 0;
}

.chat-main .chat-sidebar {
    padding: 24px 0 0 20px;
    height: 100%;
}

.chat-main .ct-bdr {
    border-right: 1px solid var(--grey-clr-3);
}

/* card search area start */
.chat-main .chat-sidebar .search-area {
    height: 100%;
}
.chat-main .chat-sidebar .search-area>form {
    height: 100%;
}

.chat-main .chat-sidebar .search-area .input-main {
    position: relative;
}

.chat-main .chat-sidebar .search-area .input-main .ct-inp {
    height: 48px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid var(--grey-clr-4);
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
    padding: 14.5px 46.5px 14.5px 14.5px;
}

.chat-main .chat-sidebar .search-area .input-main .ct-inp::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: var(--grey-clr);
}

.chat-main .chat-sidebar .search-area .input-main .ct-inp::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--grey-clr);
}

.chat-main .chat-sidebar .search-area .input-main .ct-inp:-ms-input-placeholder {
    /* IE 10+ */
    color: var(--grey-clr);
}

.chat-main .chat-sidebar .search-area .input-main .ct-inp:-moz-placeholder {
    /* Firefox 18- */
    color: var(--grey-clr);
}

.chat-main .chat-sidebar .search-area .search-btn {
    height: 24px;
    width: 24px;
    border-radius: 5px;
    background: var(--white-bg);
    color: var(--prim-clr);
    border: none;
    padding: 5px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 12px;
    right: 14px;
}

.chat-main .chat-sidebar .search-area .search-results {
    height: calc(100vh - 325px);
    overflow-x: hidden;
    overflow-y: scroll;
    margin: 24px 5px 0px 0;
    padding: 0 5px 0 0;
}

/* width */
.chat-main .chat-sidebar .search-area .search-results::-webkit-scrollbar {
    width: 5px;
}

/* Track */
.chat-main .chat-sidebar .search-area .search-results::-webkit-scrollbar-track {
    background: var(--lt-grey-bg-3);
    border-radius: 50px;
}

/* Handle */
.chat-main .chat-sidebar .search-area .search-results::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.chat-main .chat-sidebar .search-area .search-results::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}

.chat-main .chat-sidebar .search-area .search-results .search-single {
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.chat-main .chat-sidebar .search-area .search-results .search-single:not(:last-child) {
    margin: 0 0 24px 0;
}

.chat-main .chat-sidebar .search-area .search-results .search-single .img-main .thumb {
    max-height: 50px;
    max-width: 50px;
    min-width: 50px;
    min-height: 50px;
    width: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

.chat-main .chat-sidebar .search-area .search-results .search-single .desc {
    padding: 0 0 0 8px;
    width: calc(100% - 60px);
    position: relative;
}

.chat-main .chat-sidebar .search-area .search-results .search-single .desc.multi-msg::after {
    content: attr(data-text);
    position: absolute;
    bottom: 0;
    right: 0;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    background: var(--prim-bg);
    color: var(--white-clr);
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: normal;
    padding: 2px;
}

.chat-main .chat-sidebar .search-area .search-results .search-single .desc .ct-flex {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;
}

.chat-main .chat-sidebar .search-area .search-results .search-single .desc .link {
    color: var(--black-clr-1);
    text-transform: capitalize;
    font-weight: 700;
    font-size: 18px;
    margin: 0 0 4px 0;
}

.chat-main .chat-sidebar .search-area .search-results .search-single .desc p {
    color: var(--grey-clr);
    font-weight: 400;
    font-size: 16px;
    white-space: nowrap;
    max-width: 80%;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* card search area close */

.chat-main .chat-not-found {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 30px 0;
}

.chat-main .chat-not-found .chat-logo .thumb {
   height: clamp(50px,10vw,130px);
   object-fit: contain;
   object-position: center;
   display: block;
   margin: 0 auto;
}

.chat-main .chat-top-bar {
    border-bottom: 1px solid var(--grey-clr-3);
    padding: 0 0 24px;
    margin: 0 0 24px 0;
}

.chat-main .chat-top-bar .bar-inner {
    padding: 0 0 0 10px;
}

.chat-main .chat-top-bar .bar-inner .supp-detail {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    cursor: pointer;
}

.chat-main .chat-top-bar .bar-inner .supp-detail .supp-members {
    display: inline-flex;
    position: relative;
}

.chat-main .chat-top-bar .bar-inner .supp-detail .supp-members.multi-members::after {
    content: attr(data-text);
    position: absolute;
    bottom: 0;
    right: 0;
    height: 22px;
    width: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--prim-bg);
    color: var(--white-clr);
    border: 1px solid var(--white-clr);
    font-size: 12px;
    font-weight: 400;
    z-index: 5;
}

.chat-main .chat-top-bar .bar-inner .supp-detail .supp-members .thumb {
    height: 50px;
    width: 50px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    position: relative;
}

.chat-main .chat-top-bar .bar-inner .supp-detail .supp-members .thumb:nth-child(1) {
    z-index: 1;
}

.chat-main .chat-top-bar .bar-inner .supp-detail .supp-members .thumb:nth-child(2) {
    z-index: 2;
    margin-left: -40px;
}

.chat-main .chat-top-bar .bar-inner .supp-detail .supp-members .thumb:nth-child(3) {
    z-index: 3;
    margin-left: -40px;
}

.chat-main .chat-top-bar .bar-inner .supp-detail .supp-members .thumb:nth-child(4) {
    z-index: 4;
    margin-left: -40px;
}

.chat-main .chat-top-bar .bar-inner .desc {
    padding: 0 0 0 16px;
}

.chat-main .chat-top-bar .bar-inner .desc h4 {
    font-weight: 600;
    text-transform: capitalize;
    font-size: clamp(16px,2vw,20px);
    color: var(--black-clr-1);
    margin: 0 0 4px 0;
}

.chat-main .chat-top-bar .bar-inner .desc p {
    font-weight: 400;
    font-size: clamp(12px,2vw,16px);
    color: var(--grey-clr);
}
.chat-main .chat-area {
    padding: 0 80px 0 20px;
    height: calc(100vh - 470px);
    overflow-y: scroll;
    overflow-x: hidden;
}
/* width */
.chat-main .chat-area::-webkit-scrollbar {
    width: 5px;
}

/* Track */
.chat-main .chat-area::-webkit-scrollbar-track {
    background: var(--lt-grey-bg-3);
    border-radius: 50px;
}

/* Handle */
.chat-main .chat-area::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.chat-main .chat-area::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}

.chat-main .chat-area .reply-area {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    margin: 0 0 24px 0;
}

.chat-main .chat-area .reply-area .img-main {}

.chat-main .chat-area .reply-area .img-main .thumb {
    height: 40px;
    max-width: 40px;
    width: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

.chat-main .chat-area .reply-area .detail {
    position: relative;
    margin: 0 0 0 8px;
}

.chat-main .chat-area .reply-area .detail span {
    font-weight: 400;
    font-size: 14px;
    color: var(--grey-clr);
    margin: 0;
    text-transform: capitalize;
    display: block;
    text-align: left;
}

.chat-main .chat-area .reply-area .detail .desc {
    padding: 16.5px;
    background: var(--lt-grey-bg);
    border-radius: 15px 15px 15px 0;
    max-width: 460px;
    width: 100%;
    margin: 8px 0 0 0;
}

.chat-main .chat-area .reply-area .detail .desc p {
    font-weight: 400;
    font-size: 18px;
    color: var(--black-clr-2);
    line-height: 24px;
}

.chat-main .chat-area .reply-area .detail .desc a {
    color: black;
    text-decoration: underline;
}
.chat-main .chat-area .reply-area .detail .attachments .img-area {
    display: flex;
    align-items: start;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
    max-width: 500px;
    width: 100%;
}
.chat-main .chat-area .reply-area .detail .attachments .img-area .attach-img {
    margin-top: 8px;
}
.chat-main .chat-area .reply-area .detail .attachments .img-area .attach-img:not(:last-child) {
    margin-right: 8px;
}
.chat-main .chat-area .reply-area .detail .attachments .img-area .attach-img .thumb {
    height: 200px;
    width: 100%;
    max-width: 200px;
    min-width: 200px;
    object-fit: cover;
    border-radius: 10px;
}

.chat-main .chat-area .reply-area .detail .attachments .files-area .attach-file {
    padding: 16.5px;
    background: var(--lt-grey-bg);
    border-radius: 15px 15px 15px 0;
    max-width: 250px;
    width: 100%;
    margin: 8px 0 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.chat-main .chat-area .reply-area .detail .attachments .files-area .attach-file small {
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
    max-width: 80%;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--black-clr-2);
}
.chat-main .chat-area .reply-area .detail .attachments .files-area .attach-file .att-file-save {
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat-main .chat-area .reply-area .detail .attachments .files-area .attach-file .att-file-save .save-icn {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 24px;
    color: var(--black-clr-2);
    margin: 0;
}

.chat-main .chat-area .sent-area {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    margin: 0 0 24px 0;
}

.chat-main .chat-area .sent-area .img-main {}

.chat-main .chat-area .sent-area .img-main .thumb {
    height: 40px;
    max-width: 40px;
    width: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

.chat-main .chat-area .sent-area .detail {
    position: relative;
    margin: 0 8px 0 0;
}

.chat-main .chat-area .sent-area .detail span {
    font-weight: 400;
    font-size: 14px;
    color: var(--grey-clr);
    margin: 0 0 8px 0;
    text-transform: capitalize;
    text-align: right;
    display: block;
}

.chat-main .chat-area .sent-area .detail .desc {
    padding: 16.5px;
    background: var(--prim-bg);
    border-radius: 15px 15px 0 15px;
    max-width: 460px;
    width: 100%;
}

.chat-main .chat-area .sent-area .detail .desc p {
    font-weight: 400;
    font-size: 18px;
    color: var(--white-clr);
    line-height: 24px;
}

.chat-main .chat-area .sent-area .detail .desc a {
    color: white;
    text-decoration: underline;
}

.chat-main .chat-area .sent-area .detail .attachments .img-area {
    display: flex;
    align-items: start;
    justify-content: flex-end;
    flex-wrap: wrap;
    flex-direction: column;
    max-width: 500px;
    width: 100%;
}
.chat-main .chat-area .sent-area .detail .attachments .img-area .attach-img {
    margin-top: 8px;
}
.chat-main .chat-area .sent-area .detail .attachments .img-area .attach-img:not(:last-child) {
    margin-right: 8px;
}
.chat-main .chat-area .sent-area .detail .attachments .img-area .attach-img .thumb {
    height: 200px;
    width: 100%;
    max-width: 200px;
    min-width: 200px;
    object-fit: cover;
    border-radius: 10px;
}

.chat-main .chat-area .sent-area .detail .attachments .files-area .attach-file {
    padding: 16.5px;
    background: var(--prim-bg);
    border-radius: 15px 15px 0 15px;
    max-width: 250px;
    width: 100%;
    margin: 8px 0 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.chat-main .chat-area .sent-area .detail .attachments .files-area .attach-file small {
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
    max-width: 80%;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--white-clr);
}
.chat-main .chat-area .sent-area .detail .attachments .files-area .attach-file .att-file-save {
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat-main .chat-area .sent-area .detail .attachments .files-area .attach-file .att-file-save .save-icn {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 24px;
    color: var(--white-clr);
    margin: 0;
}

.chat-main .chat-btm-bar {
    border-top: 1px solid var(--grey-clr-3);
    padding: 24px 0 24px 0;
    margin: 24px 0 0 0;
    /* position: fixed;
    bottom: 0; */
    width: calc(100% - 0px);
    background: var(--white-bg);
    position: relative;
}
.chat-main .chat-btm-bar .attachments-popup {
    max-width: 500px;
    background: var(--white-bg);
   position: absolute;
   bottom: 100%;
   left: 30px;
   z-index: 20;
   padding: 10px;
   border-radius: 10px;
   box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.06);
}
.chat-main .chat-btm-bar .attachments-popup .file-pop-area {
   width: 100%;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   flex-direction: row;
   flex-wrap: wrap;
}
.chat-main .chat-btm-bar .attachments-popup .file-pop-area .file-main {
    max-width: 220px;
    min-width: 220px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin: 0 15px 15px 0;
    padding: 16.5px;
    background: var(--lt-grey-bg);
    border-radius: 15px 15px 15px 0;
}
.chat-main .chat-btm-bar .attachments-popup .file-pop-area .file-main small {
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
    max-width: 80%;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--prim-clr);
}
.chat-main .chat-btm-bar .attachments-popup .file-pop-area .file-main .remove-file {
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat-main .chat-btm-bar .attachments-popup .file-pop-area .file-main .remove-file .dlt-icn {
    color: var(--prim-clr);
}
.chat-main .chat-btm-bar .attachments-popup .img-pop-area {
    max-width: 500px;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
}
.chat-main .chat-btm-bar .attachments-popup .img-pop-area .img-main {
    position: relative;
    z-index: 1;
}
.chat-main .chat-btm-bar .attachments-popup .img-pop-area .img-main:not(:last-child) {
    margin: 0 15px 0 0;
}

.chat-main .chat-btm-bar .attachments-popup .img-pop-area .img-main .pop-img {
    height: 100px;
    width: 100px;
    border-radius: 10px;
    object-fit: cover;
    object-position: center;
    margin: 0 0 15px 0;
}
.chat-main .chat-btm-bar .attachments-popup .img-pop-area .img-main .remove-img {
    position: absolute;
    top: -10px;
    right: -10px;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background: var(--mid-clr);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.chat-main .chat-btm-bar .attachments-popup .img-pop-area .img-main .remove-img .dlt-icn {
    color: var(--white-clr);
    font-size: 20px;
}

.chat-main .chat-btm-bar .bar-inner {
    padding: 0 20px 0 20px;
}

.chat-main .chat-btm-bar .bar-inner .send-area {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.chat-main .chat-btm-bar .bar-inner .send-area .inp-grp {
    position: relative;
    overflow: hidden;
    max-width: 1800px;
    width: 100%;
}

.chat-main .chat-btm-bar .bar-inner .send-area .inp-grp .ct-inp {
    /* height: 48px; */
    width: 100%;
    border-radius: 5px;
    border: none;
    background: var(--grey-clr-5);
    padding: 14.5px 13px 14.5px 45px;
    font-size: 16px;
    font-weight: 400;
    color: var(--black-clr-1);
}

.chat-main .chat-btm-bar .bar-inner .send-area .inp-grp .ct-inp::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: var(--grey-clr);
    font-size: 16px;
    text-transform: capitalize;
}

.chat-main .chat-btm-bar .bar-inner .send-area .inp-grp .ct-inp::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--grey-clr);
    font-size: 16px;
    text-transform: capitalize;
}

.chat-main .chat-btm-bar .bar-inner .send-area .inp-grp .ct-inp:-ms-input-placeholder {
    /* IE 10+ */
    color: var(--grey-clr);
    font-size: 16px;
    text-transform: capitalize;
}

.chat-main .chat-btm-bar .bar-inner .send-area .inp-grp .ct-inp:-moz-placeholder {
    /* Firefox 18- */
    color: var(--grey-clr);
    font-size: 16px;
    text-transform: capitalize;
}

.chat-main .chat-btm-bar .bar-inner .send-area .inp-grp .attach-file {
    position: absolute;
    top: 12px;
    left: 12px;
    overflow: hidden;
    height: 24px;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-main .chat-btm-bar .bar-inner .send-area .inp-grp .attach-file .file {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.chat-main .chat-btm-bar .bar-inner .send-area .inp-grp .attach-file .file-icn {
    font-variation-settings:
        'FILL' 0,
        'wght' 300,
        'GRAD' 0,
        'opsz' 24
}

.chat-main .chat-btm-bar .bar-inner .send-area .send-btn {
    height: 48px;
    max-width: 48px;
    width: 100%;
    border-radius: 0;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--prim-clr);
}

.chat-main .chat-btm-bar .bar-inner .send-area .send-btn .send-icn {
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

/********************* chat-main styles close *********************/

/********************* chat-area-side styles start *********************/
.chat-area-side {
    height: 100%;
    /* padding: 28px 20px 28px 28px; */
}

.chat-area-side .chat-form-side {
    height: calc(100% - 100px);
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 0 5px 0 0;
}

/* width */
.chat-area-side .chat-form-side::-webkit-scrollbar {
    width: 5px;
}

/* Track */
.chat-area-side .chat-form-side::-webkit-scrollbar-track {
    background: var(--white-bg);
}

/* Handle */
.chat-area-side .chat-form-side::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.chat-area-side .chat-form-side::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}

.chat-area-side .chat-form-side .top-bar {}

.chat-area-side .chat-form-side .top-bar {
    padding: 28px 28px 16px 28px;
    border-bottom: 1px solid var(--grey-clr-3);
}

.chat-area-side .chat-form-side .top-bar .head {}

.chat-area-side .chat-form-side .top-bar .head h4 {
    font-weight: 700;
    text-transform: capitalize;
    font-size: 24px;
    color: var(--black-clr-1);
    letter-spacing: -0.16px;
    margin: 0 0 4px 0;
}

.chat-area-side .chat-form-side .top-bar .head p {
    font-weight: 400;
    font-size: 18px;
    color: var(--grey-clr);
}

.chat-area-side .chat-form-side .top-bar .supp-detail {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 16px 0 0 0;
}

.chat-area-side .chat-form-side .top-bar .supp-detail .supp-members {
    display: inline-flex;
    position: relative;
}

.chat-area-side .chat-form-side .top-bar .supp-detail .supp-members::after {
    content: attr(data-text);
    position: absolute;
    bottom: 0;
    right: 0;
    height: 22px;
    width: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--prim-bg);
    color: var(--white-clr);
    border: 1px solid var(--white-clr);
    font-size: 12px;
    font-weight: 400;
    z-index: 5;
}

.chat-area-side .chat-form-side .top-bar .supp-detail .supp-members .thumb {
    height: 50px;
    width: 50px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    position: relative;
}

.chat-area-side .chat-form-side .top-bar .supp-detail .supp-members .thumb:nth-child(1) {
    z-index: 1;
}

.chat-area-side .chat-form-side .top-bar .supp-detail .supp-members .thumb:nth-child(2) {
    z-index: 2;
    margin-left: -40px;
}

.chat-area-side .chat-form-side .top-bar .supp-detail .supp-members .thumb:nth-child(3) {
    z-index: 3;
    margin-left: -40px;
}

.chat-area-side .chat-form-side .top-bar .supp-detail .supp-members .thumb:nth-child(4) {
    z-index: 4;
    margin-left: -40px;
}
.chat-area-side .chat-form-side .mid-area {
    padding: 24px 28px;
    border-bottom: 1px solid var(--grey-clr-3);
}
.chat-area-side .chat-form-side .mid-area .media-area {

}
.chat-area-side .chat-form-side .mid-area .media-area .ct-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 0 16px 0;
}
.chat-area-side .chat-form-side .mid-area .media-area h6 {
    font-weight: 500;
    font-size: 16px;
    color: var(--black-clr);
    text-transform: capitalize;
}
.chat-area-side .chat-form-side .mid-area .media-area span {
    font-weight: 400;
    font-size: 14px;
    color: var(--black-clr);
}
.chat-area-side .chat-form-side .mid-area .attachments {
    white-space: nowrap; /* Prevent items from wrapping to the next line */
    overflow-x: auto; /* Add a horizontal scrollbar when content overflows */
    scroll-snap-type: x mandatory; /* Enable snap scrolling along the horizontal axis */
    display: flex;
    scroll-behavior: smooth;
    padding: 0 0 8px 0;
}
/* For WebKit browsers (Chrome, Safari) */
.chat-area-side .chat-form-side .mid-area .attachments::-webkit-scrollbar {
    height: 5px;
  }

  /* Handle */
  .chat-area-side .chat-form-side .mid-area .attachments::-webkit-scrollbar-thumb {
    background-color: var(--prim-bg);
    border-radius: 6px;
  }

  /* Track */
  .chat-area-side .chat-form-side .mid-area .attachments::-webkit-scrollbar-track {
    background-color: var(--lt-grey-bg-3);
  }

  /* Handle on hover */
  .chat-area-side .chat-form-side .mid-area .attachments::-webkit-scrollbar-thumb:hover {
    background-color: var(--prim-bg);
  }
.chat-area-side .chat-form-side .mid-area .attachments>*:not(:last-child) {
    margin: 0 10px 0 0;
    flex: 0 0 auto;
    scroll-snap-align: start;
}
.chat-area-side .chat-form-side .mid-area .attachments .thumb {
    height: 100px;
    max-width: 100px;
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
    object-position: center;
}
.chat-area-side .chat-form-side .mid-area .attachments .file {
    height: 100px;
    max-width: 100px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--white-bg-2);
}
.chat-area-side .chat-form-side .mid-area .attachments .file span {
    color: var(--prim-clr);
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
    text-decoration: underline;
    white-space: nowrap;
    max-width: 65px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-area-side .chat-form-side .btm-area {
    padding: 24px 28px;
}
.chat-area-side .chat-form-side .btm-area h6 {
    color: var(--black-clr);
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
}
.chat-area-side .chat-form-side .btm-area .participants-results {
    min-height: 320px;
    max-height: 320px;
    /* overflow: hidden; */
    overflow-x: hidden;
    overflow-y: scroll;
    margin: 16px 0 0 0;
}

/* width */
.chat-area-side .chat-form-side .btm-area .participants-results::-webkit-scrollbar {
    width: 5px;
}

/* Track */
.chat-area-side .chat-form-side .btm-area .participants-results::-webkit-scrollbar-track {
    background: var(--grey-clr-2);
    border-radius: 50px;
}

/* Handle */
.chat-area-side .chat-form-side .btm-area .participants-results::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.chat-area-side .chat-form-side .btm-area .participants-results::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}

.chat-area-side .chat-form-side .btm-area .participants-results .part-single {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.chat-area-side .chat-form-side .btm-area .participants-results .part-single:not(:last-child) {
    margin: 0 0 20px 0;
}

.chat-area-side .chat-form-side .btm-area .participants-results .part-single .img-main .thumb {
    max-height: 64px;
    max-width: 64px;
    min-width: 64px;
    min-height: 64px;
    width: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

.chat-area-side .chat-form-side .btm-area .participants-results .part-single .desc {
    padding: 0 0 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 80%;
}

.chat-area-side .chat-form-side .btm-area .participants-results .part-single .desc .link {
    color: var(--black-clr);
    text-transform: capitalize;
    font-weight: 700;
    font-size: 16px;
    margin: 0 0 4px 0;
}

.chat-area-side .chat-form-side .btm-area .participants-results .part-single .desc p {
    color: var(--grey-clr);
    font-weight: 400;
    font-size: 16px;
}


/********************* chat-area-side styles close *********************/

/********************* completed-orders styles start *********************/
.queries-area .completed-orders {

}

/* order-card start */
.queries-area .completed-orders .order-card {
    padding: 0;
    border-radius: 12px;
    box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.06);
    border: none;
    margin: 0 0 15px 0;
}

.queries-area .completed-orders .order-card .img-main {
    position: relative;
}

.queries-area .completed-orders .order-card .img-main .tag-rej,
.queries-area .completed-orders .order-card .img-main .tag-rec {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    border-radius: 5px;
    background: var(--mid-bg);
    color: var(--white-clr);
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
    padding: 7px 16px;
}

.queries-area .completed-orders .order-card .img-main .tag-rec {
    background: var(--sec-bg);
}

.queries-area .completed-orders .order-card .img-main .thumb {
    height: 138px;
    object-fit: cover;
    object-position: center;
    border-radius: 12px 12px 0 0;
    width: 100%;
}

.queries-area .completed-orders .order-card .desc {
    padding: 16px 12px;
}

.queries-area .completed-orders .order-card .desc ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    font-size: 14px;
    color: var(--black-clr-1);
    text-transform: capitalize;
}

.queries-area .completed-orders .order-card .desc ul li:not(:last-child) {
    margin: 0 0 8px 0;
}

.queries-area .completed-orders .order-card .desc ul li a {
    font-weight: 400;
    font-size: 14px;
    color: var(--grey-clr);
    text-transform: capitalize;
    text-align: right;
    display: inline-block;
    margin: 0;
}

.queries-area .completed-orders .order-card .desc a {
    font-size: 16px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 8px 0;
    display: block;
}

.queries-area .completed-orders .order-card .desc small {
    font-size: 14px;
    font-weight: 400;
    color: var(--grey-clr);
    text-transform: capitalize;
    display: block;
}

.queries-area .completed-orders .order-card .desc small span {
    font-size: 14px;
    font-weight: 500;
    color: var(--mid-bg);
    margin: 0 5px 0 0;
}
/* order-card close */

.order-comp-area-side {
    height: 100%;
}
.order-comp-area-side .order-comp-form-side {
    height: 100%;
    overflow: hidden;
}
.order-comp-area-side .order-comp-form-side form {
    height: 100%;
}

.order-comp-area-side .order-comp-form-side .top-bar {
    padding: 26px 28px 0 28px;
    border-bottom: 1px solid var(--grey-clr-3);
}

.order-comp-area-side .order-comp-form-side .top-bar .head h4 {
    font-weight: 700;
    text-transform: capitalize;
    font-size: 24px;
    color: var(--black-clr-1);
    letter-spacing: -0.16px;
    margin: 0 0 4px 0;
}
.order-comp-area-side .order-comp-form-side .top-bar .head h6 span {
    color: red;
}
.order-comp-area-side .order-comp-form-side .top-bar .head p {
    font-weight: 400;
    font-size: 18px;
    color: var(--grey-clr);
}

.order-comp-area-side .order-comp-form-side .nav-pills {
    margin: 16px 0 0 0;
}
.order-comp-area-side .order-comp-form-side .nav-pills .nav-item {

}
.order-comp-area-side .order-comp-form-side .nav-pills .nav-item .nav-link {
    background: var(--white-bg);
    border-radius: 0;
    margin: 0;
    padding: 12.5px 24px;
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
    text-transform: capitalize;
}
.order-comp-area-side .order-comp-form-side .nav-pills .nav-item .nav-link.active {
    background: var(--white-bg);
    color: var(--prim-clr);
    font-weight: 500;
    border-bottom: 2px solid var(--prim-clr);
}
.order-comp-area-side .order-comp-form-side .nav-pills .nav-item .nav-link:hover {
    color: var(--prim-clr);
}

.order-comp-area-side .order-comp-form-side .mid-area {
    height: calc(100% - 260px);
    overflow-y: scroll;
    overflow-x: hidden;
    margin: 24px 10px 0 0;
}

.order-comp-area-side.po-req-area-side .order-comp-form-side.po-req-form-side .mid-area{
    height: auto;
    overflow-y: hidden;
    overflow-x: hidden;
    margin: 24px 10px 0 0;
}

/* .order-comp-area-side .order-comp-form-side .mid-area.mid-area-complete-side{
    height: auto;
    overflow-y: hidden;
    overflow-x: hidden;
    margin: 24px 10px 0 0;
} */

/* width */
.order-comp-area-side .order-comp-form-side .mid-area::-webkit-scrollbar {
    width: 6px;
}

/* Track */
.order-comp-area-side .order-comp-form-side .mid-area::-webkit-scrollbar-track {
    background: var(--lt-grey-bg-3);
    border-radius: 50px;
}

/* Handle */
.order-comp-area-side .order-comp-form-side .mid-area::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.order-comp-area-side .order-comp-form-side .mid-area::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}

.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details {
    padding: 0 16px 16px 28px;
}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main {
    border: 1px solid var(--grey-clr-3);
    border-radius: 10px;
    margin: 0 0 20px 0;
}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-top {
    padding: 24px 24px 0 24px;
}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-top .date-area {
    margin: 0 0 24px 0;
}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-top .date-area .img-main {

}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-top .date-area .img-main .logo {

}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-top .date-area .desc {
    text-align: right;
}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-top .date-area .desc h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-top .date-area .desc ul {

}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-top .date-area .desc ul li {
    font-size: 14px;
    font-weight: 400;
    color: var(--black-clr);
    text-transform: capitalize;
}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-top .date-area .desc ul li span {
    color: var(--grey-clr);
    text-transform: unset;
}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-top .date-area .desc small {
    color: var(--grey-clr);
    text-transform: capitalize;
}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-top .address .desc {
    margin: 0 0 24px 0;
}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-top .address .desc h6 {
    font-size: 16px;
    font-weight: 500;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-top .address .desc p {
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-clr);
    line-height: auto;
}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-top .other-details .desc {
    margin: 0 0 16px 0;
}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-top .other-details .desc h6 {
    font-size: 16px;
    font-weight: 500;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-top .other-details .desc p {
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-clr);
    line-height: auto;
}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-mid {
    margin: 8px 0 0 0;
    padding: 0 24px 24px 24px;
}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-mid .ct-table .table thead {
    vertical-align: baseline;
}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-mid .ct-table .table thead tr {

}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-mid .ct-table thead tr th {
    background: var(--lt-grey-bg-2);
    font-size: 14px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
    line-height: normal;
}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-mid .ct-table tbody {
    border-bottom: 1px dashed var(--grey-clr-7);
}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-mid .ct-table tbody tr {

}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-mid .ct-table tbody tr td {
    font-size: 14px;
    font-weight: 400;
    color: var(--black-clr-1);
    text-transform: capitalize;
    padding: 16px 8px;
}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-mid .ct-table tfoot {

}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-mid .ct-table tfoot tr {

}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-mid .ct-table tfoot tr td {
    padding: 16px 12px;
}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-mid .ct-table tfoot tr td:first-child {
    font-size: 14px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-mid .ct-table tfoot tr td:last-child {
    font-size: 14px;
    font-weight: 400;
    color: var(--black-clr-1);
    text-align: right;
}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-mid .shipment-detail {
}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-mid .shipment-detail .desc {
    margin: 0 0 16px 0;
}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-mid .shipment-detail .desc h6 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-mid .shipment-detail .desc p {
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-clr);
    text-transform: capitalize;
    line-height: 24px;
}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-mid .signature-area {

}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-mid .signature-area .signature-main {

}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-mid .signature-area .signature-main .thumb {
    margin: 0 auto;
    display: block;
}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-mid .signature-area .signature-main .label {
    margin: 12px 0 0 0;
    padding: 8px 0 0 0;
    border-top: 1px solid var(--black-clr-1);
}
.order-comp-area-side .order-comp-form-side .mid-area .comp-order-details .order-main .order-mid .signature-area .signature-main .label span {
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    color: var(--black-clr-1);
    text-align: center;
    display: block;
}

.queries-area .incompleted-orders {

}

/* order-card start */
.queries-area .incompleted-orders .order-card {
    padding: 0;
    border-radius: 12px;
    box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.06);
    border: none;
    margin: 0 0 15px 0;
}

.queries-area .incompleted-orders .order-card .img-main {
    position: relative;
}

.queries-area .incompleted-orders .order-card .img-main .tag-rej,
.queries-area .incompleted-orders .order-card .img-main .tag-rec {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    border-radius: 5px;
    background: var(--mid-bg);
    color: var(--white-clr);
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
    padding: 7px 16px;
}

.queries-area .incompleted-orders .order-card .img-main .tag-rec {
    background: var(--sec-bg);
}

.queries-area .incompleted-orders .order-card .img-main .thumb {
    height: 138px;
    object-fit: cover;
    object-position: center;
    border-radius: 12px 12px 0 0;
    width: 100%;
}

.queries-area .incompleted-orders .order-card .desc {
    padding: 16px 12px;
}

.queries-area .incompleted-orders .order-card .desc ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    font-size: 14px;
    color: var(--black-clr-1);
    text-transform: capitalize;
}

.queries-area .incompleted-orders .order-card .desc ul li:not(:last-child) {
    margin: 0 0 8px 0;
}

.queries-area .incompleted-orders .order-card .desc ul li a {
    font-weight: 400;
    font-size: 14px;
    color: var(--grey-clr);
    text-transform: capitalize;
    text-align: right;
    display: inline-block;
}

.queries-area .incompleted-orders .order-card .desc a {
    font-size: 16px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 8px 0;
    display: block;
}

.queries-area .incompleted-orders .order-card .desc small {
    font-size: 14px;
    font-weight: 400;
    color: var(--grey-clr);
    text-transform: capitalize;
    display: block;
}

.queries-area .incompleted-orders .order-card .desc small span {
    font-size: 14px;
    font-weight: 500;
    color: var(--mid-bg);
    margin: 0 5px 0 0;
}
/* order-card close */

.incomplete-area-side {
    height: 100%;
    padding: 5px 3px 5px 0;
}
.incomplete-area-side .incomplete-form-side {
    /* height: 100%;
    overflow: hidden; */
    height: calc(100% - 90px);
    overflow-y: scroll;
    overflow-x: hidden;
}
/* width */
.incomplete-area-side .incomplete-form-side::-webkit-scrollbar {
    width: 6px;
}

/* Track */
.incomplete-area-side .incomplete-form-side::-webkit-scrollbar-track {
    background: var(--lt-grey-bg-3);
    border-radius: 50px;
}

/* Handle */
.incomplete-area-side .incomplete-form-side::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.incomplete-area-side .incomplete-form-side::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}
.incomplete-area-side .incomplete-form-side form {
    height: 100%;
}
.incomplete-area-side .incomplete-form-side .ct-flex {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    justify-content: space-between;
}

.incomplete-area-side .incomplete-form-side .top-bar {
    padding: 26px 28px 0 28px;
    border-bottom: 1px solid var(--grey-clr-3);
}

.incomplete-area-side .incomplete-form-side .top-bar .head h4 {
    font-weight: 700;
    text-transform: capitalize;
    font-size: 24px;
    color: var(--black-clr-1);
    letter-spacing: -0.16px;
    margin: 0 0 4px 0;
}
.incomplete-area-side .incomplete-form-side .top-bar .head p {
    font-weight: 400;
    font-size: 18px;
    color: var(--grey-clr);
}

.incomplete-area-side .incomplete-form-side .top-bar .edit-btn {
    background: var(--lt-grey-bg);
    color: var(--prim-clr);
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    padding: 6px;
    border-radius: 10px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 44px;
    max-width: 133px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 auto;
}
.incomplete-area-side .incomplete-form-side .top-bar .edit-btn span {
    margin: 0 8px 0 0;
    font-variation-settings: 'FILL' 1, 'wght' 400;
}

.incomplete-area-side .incomplete-form-side .nav-pills {
    margin: 0;
}
.incomplete-area-side .incomplete-form-side .nav-pills .nav-item {

}
.incomplete-area-side .incomplete-form-side .nav-pills .nav-item .nav-link {
    background: var(--white-bg);
    border-radius: 0;
    margin: 0;
    padding: 12.5px 24px;
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
    text-transform: capitalize;
}
.incomplete-area-side .incomplete-form-side .nav-pills .nav-item .nav-link.active {
    background: var(--white-bg);
    color: var(--prim-clr);
    font-weight: 500;
    border-bottom: 2px solid var(--prim-clr);
}
.incomplete-area-side .incomplete-form-side .nav-pills .nav-item .nav-link:hover {
    color: var(--prim-clr);
}

.incomplete-area-side .incomplete-form-side .mid-area {
    /* height: calc(100% - 260px);
    overflow-y: scroll;
    overflow-x: hidden; */
    margin: 24px 10px 0 0;
}

/* width */
.incomplete-area-side .incomplete-form-side .mid-area::-webkit-scrollbar {
    width: 6px;
}

/* Track */
.incomplete-area-side .incomplete-form-side .mid-area::-webkit-scrollbar-track {
    background: var(--lt-grey-bg-3);
    border-radius: 50px;
}

/* Handle */
.incomplete-area-side .incomplete-form-side .mid-area::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.incomplete-area-side .incomplete-form-side .mid-area::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}

.incomplete-area-side .incomplete-form-side .mid-area .req-order-details {
    padding: 0 16px 16px 28px;
}
.incomplete-area-side .incomplete-form-side .mid-area .req-order-details .incomplete-req-main {
    border-radius: 10px;
    margin: 0 0 20px 0;
}

.incomplete-area-side .incomplete-form-side .mid-area .req-order-details .incomplete-req-main .incomplete-req-details {

}
.incomplete-area-side .incomplete-form-side .mid-area .req-order-details .incomplete-req-main .incomplete-req-details .po-req-info .desc {
    margin: 0 0 16px 0;
}
.incomplete-area-side .incomplete-form-side .mid-area .req-order-details .incomplete-req-main .incomplete-req-details .po-req-info .desc h6 {
    font-weight: 500;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}
.incomplete-area-side .incomplete-form-side .mid-area .req-order-details .incomplete-req-main .incomplete-req-details .po-req-info .desc p {
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
}
.incomplete-area-side .incomplete-form-side .mid-area .req-order-details .incomplete-req-main .incomplete-req-details .po-req-info .desc a {
    font-weight: 500;
    font-size: 16px;
    color: var(--sec-clr);
    text-transform: capitalize;
    text-decoration: underline;
}
.incomplete-area-side .incomplete-form-side .mid-area .req-order-details .incomplete-req-main .incomplete-req-details .view-toggle {
    font-weight: 500;
    font-size: 16px;
    color: var(--prim-clr);
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.incomplete-area-side .incomplete-form-side .mid-area .req-order-details .incomplete-req-main .incomplete-req-details .multi-img {
    margin: 0 0 16px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.incomplete-area-side .incomplete-form-side .mid-area .req-order-details .incomplete-req-main .incomplete-req-details .multi-img .img-main {
    margin: 0 16px 5px 0;
}
.incomplete-area-side .incomplete-form-side .mid-area .req-order-details .incomplete-req-main .incomplete-req-details .multi-img .thumb {
    width: 100%;
    border-radius: 5px;
    height: 83px;
    object-fit: cover;
    object-position: center;
}
.incomplete-area-side .incomplete-form-side .mid-area .req-order-details .incomplete-req-main .incomplete-req-details .desc-item {

}
.incomplete-area-side .incomplete-form-side .mid-area .req-order-details .incomplete-req-main .incomplete-req-details .desc-item h6 {
    font-weight: 500;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 8px 0;
}
.incomplete-area-side .incomplete-form-side .mid-area .req-order-details .incomplete-req-main .incomplete-req-details .desc-item p {
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
    line-height: 22px;
}

.incomplete-area-side .incomplete-form-side .mid-area .req-order-details .incomplete-req-main .total-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 24px 0;
    border-top: 2px dashed var(--grey-clr-8);
}
.incomplete-area-side .incomplete-form-side .mid-area .req-order-details .incomplete-req-main .total-value h6 {
    font-size: 16px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
}
.incomplete-area-side .incomplete-form-side .mid-area .req-order-details .incomplete-req-main .total-value span {
    font-size: 16px;
    font-weight: 400;
    color: var(--black-clr-1);
}


/********************* completed-orders styles close *********************/


/********************* accepted-orders styles start *********************/
.queries-area .accepted-orders {

}

/* order-card start */
.queries-area .accepted-orders .order-card {
    padding: 0;
    border-radius: 12px;
    box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.06);
    border: none;
    margin: 0 0 15px 0;
}

.queries-area .accepted-orders .order-card .img-main {
    position: relative;
}

.queries-area .accepted-orders .order-card .img-main .tag-rej,
.queries-area .accepted-orders .order-card .img-main .tag-rec {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    border-radius: 5px;
    background: var(--mid-bg);
    color: var(--white-clr);
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
    padding: 7px 16px;
}

.queries-area .accepted-orders .order-card .img-main .tag-rec {
    background: var(--sec-bg);
}

.queries-area .accepted-orders .order-card .img-main .thumb {
    height: 138px;
    object-fit: cover;
    object-position: center;
    border-radius: 12px 12px 0 0;
    width: 100%;
}

.queries-area .accepted-orders .order-card .desc {
    padding: 16px 12px;
}

.queries-area .accepted-orders .order-card .desc ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    font-size: 14px;
    color: var(--black-clr-1);
    text-transform: capitalize;
}

.queries-area .accepted-orders .order-card .desc ul li:not(:last-child) {
    margin: 0 0 8px 0;
}

.queries-area .accepted-orders .order-card .desc ul li a {
    font-weight: 400;
    font-size: 14px;
    color: var(--grey-clr);
    text-transform: capitalize;
    text-align: right;
    display: inline-block;
    margin: 0;
}

.queries-area .accepted-orders .order-card .desc a {
    font-size: 16px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 8px 0;
    display: block;
}

.queries-area .accepted-orders .order-card .desc small {
    font-size: 14px;
    font-weight: 400;
    color: var(--grey-clr);
    text-transform: capitalize;
    display: block;
}

.queries-area .accepted-orders .order-card .desc small span {
    font-size: 14px;
    font-weight: 500;
    color: var(--mid-bg);
    margin: 0 5px 0 0;
}
/* order-card close */

/********************* accept-bid-area-side styles start *********************/
.accept-bid-area-side {
    height: 100%;
    padding: 5px 3px 5px 0;
}
.accept-bid-area-side .accept-bid-form-side {
    /* height: 100%;
    overflow: hidden; */
    height: calc(100% - 90px);
    overflow-y: scroll;
    overflow-x: hidden;
}
/* width */
.accept-bid-area-side .accept-bid-form-side::-webkit-scrollbar {
    width: 6px;
}

/* Track */
.accept-bid-area-side .accept-bid-form-side::-webkit-scrollbar-track {
    background: var(--lt-grey-bg-3);
    border-radius: 50px;
}

/* Handle */
.accept-bid-area-side .accept-bid-form-side::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.accept-bid-area-side .accept-bid-form-side::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}
.accept-bid-area-side .accept-bid-form-side form {
    height: 100%;
}
.accept-bid-area-side .accept-bid-form-side .ct-flex {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    justify-content: space-between;
}

.accept-bid-area-side .accept-bid-form-side .top-bar {
    padding: 26px 28px 0 28px;
    border-bottom: 1px solid var(--grey-clr-3);
}

.accept-bid-area-side .accept-bid-form-side .top-bar .head h4 {
    font-weight: 700;
    text-transform: capitalize;
    font-size: 24px;
    color: var(--black-clr-1);
    letter-spacing: -0.16px;
    margin: 0 0 4px 0;
}
.accept-bid-area-side .accept-bid-form-side .top-bar .head h5 {
    font-weight: 700;
    text-transform: capitalize;
    font-size: 20px;
    color: var(--black-clr-1);
    margin: 0 0 4px 0;
}
.accept-bid-area-side .accept-bid-form-side .top-bar .head p {
    font-weight: 400;
    font-size: 18px;
    color: var(--grey-clr);
    margin: 0 0 16px 0;
}
.accept-bid-area-side .accept-bid-form-side .top-bar .status-wait {
    text-align: right;
}
.accept-bid-area-side .accept-bid-form-side .top-bar .status-rec {
    text-align: right;
}
.accept-bid-area-side .accept-bid-form-side .top-bar .status-wait span {
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 400;
    color: var(--dk-yellow);
    text-transform: capitalize;
    background: var(--lt-yellow);
    display: inline-block;
    margin: 0;
}
.accept-bid-area-side .accept-bid-form-side .top-bar .status-rec span {
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 400;
    color: var(--sec-clr);
    text-transform: capitalize;
    background: var(--lt-sec-bg);
    display: inline-block;
    margin: 0;
}

.accept-bid-area-side .accept-bid-form-side .nav-pills {
    margin: 16px 0 0 0;
}
.accept-bid-area-side .accept-bid-form-side .nav-pills .nav-item {

}
.accept-bid-area-side .accept-bid-form-side .nav-pills .nav-item .nav-link {
    background: var(--white-bg);
    border-radius: 0;
    margin: 0;
    padding: 12.5px 24px;
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
    text-transform: capitalize;
}
.accept-bid-area-side .accept-bid-form-side .nav-pills .nav-item .nav-link.active {
    background: var(--white-bg);
    color: var(--prim-clr);
    font-weight: 500;
    border-bottom: 2px solid var(--prim-clr);
}
.accept-bid-area-side .accept-bid-form-side .nav-pills .nav-item .nav-link:hover {
    color: var(--prim-clr);
}

.accept-bid-area-side .accept-bid-form-side .mid-area {
    /* height: calc(100% - 260px);
    overflow-y: scroll;
    overflow-x: hidden; */
    margin: 24px 10px 0 0;
}

/* width */
.accept-bid-area-side .accept-bid-form-side .mid-area::-webkit-scrollbar {
    width: 6px;
}

/* Track */
.accept-bid-area-side .accept-bid-form-side .mid-area::-webkit-scrollbar-track {
    background: var(--lt-grey-bg-3);
    border-radius: 50px;
}

/* Handle */
.accept-bid-area-side .accept-bid-form-side .mid-area::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.accept-bid-area-side .accept-bid-form-side .mid-area::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}

.accept-bid-area-side .accept-bid-form-side .mid-area .reject-order-details {
    padding: 0 16px 16px 28px;
}
.accept-bid-area-side .accept-bid-form-side .mid-area .reject-order-details .reject-bid-main {
    border-radius: 10px;
    margin: 0 0 20px 0;
}

.accept-bid-area-side .accept-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details {

}
.accept-bid-area-side .accept-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .bid-detail-info .desc {
    margin: 0 0 16px 0;
}
.accept-bid-area-side .accept-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .bid-detail-info .desc h6 {
    font-weight: 500;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}
.accept-bid-area-side .accept-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .bid-detail-info .desc p {
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
}

.accept-bid-area-side .accept-bid-form-side .mid-area .reject-order-details .reject-bid-main .total-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 24px 0;
    border-top: 2px dashed var(--grey-clr-8);
}
.accept-bid-area-side .accept-bid-form-side .mid-area .reject-order-details .reject-bid-main .total-value h6 {
    font-size: 16px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
}
.accept-bid-area-side .accept-bid-form-side .mid-area .reject-order-details .reject-bid-main .total-value span {
    font-size: 16px;
    font-weight: 400;
    color: var(--black-clr-1);
}

.accept-bid-area-side .accept-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .view-toggle {
    font-weight: 500;
    font-size: 16px;
    color: var(--prim-clr);
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.accept-bid-area-side .accept-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .multi-img {
    margin: 0 0 16px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

}
.accept-bid-area-side .accept-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .multi-img .img-main {
    margin: 0 16px 5px 0;
}
.accept-bid-area-side .accept-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .multi-img .thumb {
    width: 100%;
    border-radius: 5px;
    height: 83px;
    object-fit: cover;
    object-position: center;
}
.accept-bid-area-side .accept-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .desc-item {

}
.accept-bid-area-side .accept-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .desc-item h6 {
    font-weight: 500;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}
.accept-bid-area-side .accept-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .desc-item p {
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
    line-height: 24px;
}

.accept-bid-area-side .accept-bid-form-side .btm-area {
    padding: 24px 28px 0 28px;
    height: 100%;
}
.accept-bid-area-side .accept-bid-form-side .btm-area .bid-actions {

}
.accept-bid-area-side .accept-bid-form-side .btm-area.ct-shadow {
    box-shadow: 0px -5px 25px 0px rgb(0 0 0 / 11%);
}
.accept-bid-area-side .accept-bid-form-side .btm-area .bid-actions .reject-btn {
    background: var(--mid-bg-2);
    color: var(--mid-clr);
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    padding: 8px 4px;
    margin: 0 0 5px 0;
    border-radius: 5px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.accept-bid-area-side .accept-bid-form-side .btm-area .bid-actions .reject-btn span {
    margin: 0 8px 0 0;
}
.accept-bid-area-side .accept-bid-form-side .btm-area .bid-actions .accept-btn {
    background: var(--sec-bg);
    color: var(--white-clr);
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    padding: 8px 4px;
    margin: 0 0 5px 0;
    border-radius: 5px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.accept-bid-area-side .accept-bid-form-side .btm-area .bid-actions .accept-btn span {
    margin: 0 8px 0 0;
}
/********************* accept-bid-area-side styles close *********************/

/********************* accepted-orders styles close *********************/


/********************* reject-bid-area styles start *********************/
.queries-area .rejected-orders {

}

/* order-card start */
.queries-area .rejected-orders .order-card {
    padding: 0;
    border-radius: 12px;
    box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.06);
    border: none;
    margin: 0 0 15px 0;
}

.queries-area .rejected-orders .order-card .img-main {
    position: relative;
}

.queries-area .rejected-orders .order-card .img-main .tag-rej,
.queries-area .rejected-orders .order-card .img-main .tag-rec {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    border-radius: 5px;
    background: var(--mid-bg);
    color: var(--white-clr);
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
    padding: 7px 16px;
}

.queries-area .rejected-orders .order-card .img-main .tag-rec {
    background: var(--sec-bg);
}

.queries-area .rejected-orders .order-card .img-main .thumb {
    height: 138px;
    object-fit: cover;
    object-position: center;
    border-radius: 12px 12px 0 0;
    width: 100%;
}

.queries-area .rejected-orders .order-card .desc {
    padding: 16px 12px;
}

.queries-area .rejected-orders .order-card .desc ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    font-size: 14px;
    color: var(--black-clr-1);
    text-transform: capitalize;
}

.queries-area .rejected-orders .order-card .desc ul li:not(:last-child) {
    margin: 0 0 8px 0;
}

.queries-area .rejected-orders .order-card .desc ul li a {
    font-weight: 400;
    font-size: 14px;
    color: var(--grey-clr);
    text-transform: capitalize;
    text-align: right;
    display: inline-block;
}

.queries-area .rejected-orders .order-card .desc a {
    font-size: 16px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0;
    display: block;
}

.queries-area .rejected-orders .order-card .badge-wait {
    padding: 7.5px 11.5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--dk-yellow);
    text-transform: capitalize;
    background: var(--lt-yellow);
    display: inline-block;
    margin: 8px 0;
}
.queries-area .order-card .badge-pending {
    padding: 7.5px 11.5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--dk-yellow);
    text-transform: capitalize;
    background: var(--lt-yellow);
    display: inline-block;
    margin: 8px 0;
}
.queries-area .order-card .badge-waiting-for-custom-bid {
    padding: 7.5px 11.5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--dk-yellow);
    text-transform: capitalize;
    background: var(--lt-yellow);
    display: inline-block;
    margin: 8px 0;
}
.queries-area .order-card .badge-custom-bid-received {
    padding: 7.5px 11.5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--sec-clr);
    text-transform: capitalize;
    background: var(--lt-sec-bg);
    display: inline-block;
    margin: 8px 0;
}
.queries-area .rejected-orders .order-card .badge-reject {
    padding: 7.5px 11.5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--mid-clr);
    text-transform: capitalize;
    background: var(--mid-bg-2);
    display: inline-block;
    margin: 8px 0;
}
.order-card .badge-bid-rejected {
    padding: 7.5px 11.5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--mid-clr);
    text-transform: capitalize;
    background: var(--mid-bg-2);
    display: inline-block;
    margin: 8px 0;
}
.order-card .badge-custom-bid-sent {
    padding: 7.5px 11.5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--sec-clr);
    text-transform: capitalize;
    background: var(--lt-sec-bg);
    display: inline-block;
    margin: 8px 0;
}
.queries-area .rejected-orders .order-card .badge-rec {
    padding: 7.5px 11.5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--sec-clr);
    text-transform: capitalize;
    background: var(--lt-sec-bg);
    display: inline-block;
    margin: 8px 0;
}

.order-card .badge-signed {
    padding: 7.5px 11.5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--sec-clr);
    text-transform: capitalize;
    background: var(--lt-sec-bg);
    display: inline-block;
    margin: 8px 0;
}

.queries-area .rejected-orders .order-card .desc small {
    font-size: 14px;
    font-weight: 400;
    color: var(--grey-clr);
    text-transform: capitalize;
    display: block;
}

.queries-area .rejected-orders .order-card .desc small span {
    font-size: 14px;
    font-weight: 500;
    color: var(--mid-bg);
    margin: 0 5px 0 0;
}
/* order-card close */


/* reject-modal start */
.reject-modal {

}
.reject-modal .modal-dialog {

}
.reject-modal .modal-dialog .modal-content {
    border-radius: 16px;
}
.reject-modal .modal-dialog .modal-content .modal-body {
    padding: 28px;
}
.reject-modal .modal-dialog .modal-content .modal-body .desc {
    text-align: center;
}
.reject-modal .modal-dialog .modal-content .modal-body .desc .icon {
    font-size: 50px;
}
.reject-modal .modal-dialog .modal-content .modal-body .desc h4 {
    font-size: 28px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 24px 0 4px 0;
}
.reject-modal .modal-dialog .modal-content .modal-body .desc p {
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    color: var(--grey-clr);
}
.reject-modal .modal-dialog .modal-content .modal-body .desc p span {
    color: var(--black-clr);
    font-weight: 500;
}
.reject-modal .modal-dialog .modal-content .modal-body .btn-cancel {
    background: var(--mid-bg-2);
    color: var(--mid-clr);
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    padding: 8px 4px;
    margin: 32px 0 0 0;
    border-radius: 5px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.reject-modal .modal-dialog .modal-content .modal-body .btn-proceed {
    background: var(--sec-bg);
    color: var(--white-clr);
    font-weight: 500;
    font-size: 16px;
    text-transform: none;
    padding: 8px 4px;
    margin: 32px 0 0 0;
    border-radius: 5px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* reject-modal close */

.text-change{
    font-weight: 450 !important;
}

.reject-bid-area-side {
    height: 100%;
    padding: 5px 3px 5px 0;
}
.reject-bid-area-side .reject-bid-form-side {
    /* height: 100%;
    overflow: hidden; */
    height: calc(100% - 90px);
    overflow-y: scroll;
    overflow-x: hidden;
}
/* width */
.reject-bid-area-side .reject-bid-form-side::-webkit-scrollbar {
    width: 6px;
}

/* Track */
.reject-bid-area-side .reject-bid-form-side::-webkit-scrollbar-track {
    background: var(--lt-grey-bg-3);
    border-radius: 50px;
}

/* Handle */
.reject-bid-area-side .reject-bid-form-side::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.reject-bid-area-side .reject-bid-form-side::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}
.reject-bid-area-side .reject-bid-form-side form {
    height: 100%;
}
.reject-bid-area-side .reject-bid-form-side .ct-flex {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    justify-content: space-between;
}

.reject-bid-area-side .reject-bid-form-side .top-bar {
    padding: 26px 28px 0 28px;
    border-bottom: 1px solid var(--grey-clr-3);
}

.reject-bid-area-side .reject-bid-form-side .top-bar .head h4 {
    font-weight: 700;
    text-transform: capitalize;
    font-size: 24px;
    color: var(--black-clr-1);
    letter-spacing: -0.16px;
    margin: 0 0 4px 0;
}
.reject-bid-area-side .reject-bid-form-side .top-bar .head p {
    font-weight: 400;
    font-size: 18px;
    color: var(--grey-clr);
}
.reject-bid-area-side .reject-bid-form-side .top-bar .status-wait {
    text-align: right;
}
.reject-bid-area-side .reject-bid-form-side .top-bar .status-rec {
    text-align: right;
}
.reject-bid-area-side .reject-bid-form-side .top-bar .status-wait span {
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 400;
    color: var(--dk-yellow);
    text-transform: capitalize;
    background: var(--lt-yellow);
    display: inline-block;
    margin: 0;
}
.reject-bid-area-side .reject-bid-form-side .top-bar .status-rec span {
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 400;
    color: var(--sec-clr);
    text-transform: capitalize;
    background: var(--lt-sec-bg);
    display: inline-block;
    margin: 0;
}

.reject-bid-area-side .reject-bid-form-side .nav-pills {
    margin: 16px 0 0 0;
}
.reject-bid-area-side .reject-bid-form-side .nav-pills .nav-item {

}
.reject-bid-area-side .reject-bid-form-side .nav-pills .nav-item .nav-link {
    background: var(--white-bg);
    border-radius: 0;
    margin: 0;
    padding: 12.5px 24px;
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
    text-transform: capitalize;
}
.reject-bid-area-side .reject-bid-form-side .nav-pills .nav-item .nav-link.active {
    background: var(--white-bg);
    color: var(--prim-clr);
    font-weight: 500;
    border-bottom: 2px solid var(--prim-clr);
}
.reject-bid-area-side .reject-bid-form-side .nav-pills .nav-item .nav-link:hover {
    color: var(--prim-clr);
}

.reject-bid-area-side .reject-bid-form-side .mid-area {
    /* height: calc(100% - 260px);
    overflow-y: scroll;
    overflow-x: hidden; */
    margin: 24px 10px 0 0;
}

/* width */
.reject-bid-area-side .reject-bid-form-side .mid-area::-webkit-scrollbar {
    width: 6px;
}

/* Track */
.reject-bid-area-side .reject-bid-form-side .mid-area::-webkit-scrollbar-track {
    background: var(--lt-grey-bg-3);
    border-radius: 50px;
}

/* Handle */
.reject-bid-area-side .reject-bid-form-side .mid-area::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.reject-bid-area-side .reject-bid-form-side .mid-area::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}

.reject-bid-area-side .reject-bid-form-side .mid-area .reject-order-details {
    padding: 0 16px 16px 28px;
}
.reject-bid-area-side .reject-bid-form-side .mid-area .reject-order-details .reject-bid-main {
    border-radius: 10px;
    margin: 0 0 20px 0;
}
.reject-bid-area-side .reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .buyer-note {
    background: var(--lt-grey-bg-2);
    border-radius: 8px;
    padding: 16px;
    margin: 0 0 16px 0;
}
.reject-bid-area-side .reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .buyer-note h6 {
    font-weight: 500;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}
.reject-bid-area-side .reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .buyer-note p {
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
}
.reject-bid-area-side .reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .supplier-note {
    margin: 0 0 16px;
}
.reject-bid-area-side .reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .supplier-note h6 {
    font-weight: 500;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}
.reject-bid-area-side .reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .supplier-note p {
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
}

.reject-bid-area-side .reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details {

}

.reject-bid-area-side .reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .total-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 24px 0;
    border-top: 2px dashed var(--grey-clr-8);
}
.reject-bid-area-side .reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .total-value h6 {
    font-size: 16px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
}
.reject-bid-area-side .reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .total-value span {
    font-size: 16px;
    font-weight: 400;
    color: var(--black-clr-1);
}

.reject-bid-area-side .reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .desc {
    margin: 0 0 16px 0;
}
.reject-bid-area-side .reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .desc h6 {
    font-weight: 500;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}
.reject-bid-area-side .reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .desc p {
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
}
.reject-bid-area-side .reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .view-toggle {
    font-weight: 500;
    font-size: 16px;
    color: var(--prim-clr);
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.reject-bid-area-side .reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .multi-img {
    margin: 0 0 16px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

}
.reject-bid-area-side .reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .multi-img .img-main {
    margin: 0 16px 5px 0;
}
.reject-bid-area-side .reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .multi-img .thumb {
    width: 100%;
    border-radius: 5px;
    height: 83px;
    object-fit: cover;
    object-position: center;
}
.reject-bid-area-side .reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .desc-item {

}
.reject-bid-area-side .reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .desc-item h6 {
    font-weight: 500;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}
.reject-bid-area-side .reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .desc-item p {
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
    line-height: 24px;
}

.reject-bid-area-side .reject-bid-form-side .btm-area {
    padding: 24px 28px 0 28px;
    height: 100%;
}
.reject-bid-area-side .reject-bid-form-side .btm-area .price-area .desc h4 {
    font-weight: 700;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 16px 0;
}
.reject-bid-area-side .reject-bid-form-side .btm-area .price-area .desc h6 {
    font-weight: 400;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 16px 0;
    text-align: right;
}
.reject-bid-area-side .reject-bid-form-side .btm-area .bid-actions {

}
.reject-bid-area-side .reject-bid-form-side .btm-area.ct-shadow {
    box-shadow: 0px -5px 25px 0px rgb(0 0 0 / 11%);
}
.reject-bid-area-side .reject-bid-form-side .btm-area .bid-actions .reject-btn {
    background: var(--mid-bg-2);
    color: var(--mid-clr);
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    padding: 8px 4px;
    margin: 0 0 5px 0;
    border-radius: 5px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.reject-bid-area-side .reject-bid-form-side .btm-area .bid-actions .reject-btn span {
    margin: 0 8px 0 0;
}
.reject-bid-area-side .reject-bid-form-side .btm-area .bid-actions .accept-btn {
    background: var(--sec-bg);
    color: var(--white-clr);
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    padding: 8px 4px;
    margin: 0 0 5px 0;
    border-radius: 5px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.reject-bid-area-side .reject-bid-form-side .btm-area .bid-actions .accept-btn span {
    margin: 0 8px 0 0;
}

.buyer-reject-bid-area-side {
    height: 100%;
    padding: 5px 3px 5px 0;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side {
    /* height: 100%;
    overflow: hidden; */
    height: calc(100% - 90px);
    overflow-y: scroll;
    overflow-x: hidden;
}

/* width */
.buyer-reject-bid-area-side .buyer-reject-bid-form-side::-webkit-scrollbar {
    width: 6px;
}

/* Track */
.buyer-reject-bid-area-side .buyer-reject-bid-form-side::-webkit-scrollbar-track {
    background: var(--lt-grey-bg-3);
    border-radius: 50px;
}

/* Handle */
.buyer-reject-bid-area-side .buyer-reject-bid-form-side::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.buyer-reject-bid-area-side .buyer-reject-bid-form-side::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side form {
    height: 100%;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .ct-flex {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    justify-content: space-between;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .top-bar {
    padding: 26px 28px 0 28px;
    border-bottom: 1px solid var(--grey-clr-3);
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .top-bar .head h4 {
    font-weight: 700;
    text-transform: capitalize;
    font-size: 24px;
    color: var(--black-clr-1);
    letter-spacing: -0.16px;
    margin: 0 0 4px 0;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .top-bar .head p {
    font-weight: 400;
    font-size: 18px;
    color: var(--grey-clr);
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .top-bar .order-no {
    margin: 15px 0 24px 0;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .top-bar .order-no h6 {
    font-weight: 700;
    text-transform: capitalize;
    font-size: 20px;
    color: var(--black-clr-1);
    letter-spacing: -0.16px;
    margin: 0 0 4px 0;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .top-bar .order-no span {
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
    display: block;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .top-bar .status-rej {
    text-align: right;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .top-bar .status-rec {
    text-align: right;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .top-bar .status-rej span {
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 400;
    color: var(--mid-clr);
    text-transform: capitalize;
    background: var(--mid-bg-2);
    display: inline-block;
    margin: 0;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .top-bar .status-rec span {
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 400;
    color: var(--sec-clr);
    text-transform: capitalize;
    background: var(--lt-sec-bg);
    display: inline-block;
    margin: 0;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .top-bar .buyer-note .ct-floating {
    margin: 0 0 16px 0;
    position: relative;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .top-bar .buyer-note .ct-floating .ct-inp {
    height: 48px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid var(--grey-clr-6);
    padding: 5px 14.5px;
    font-size: 16px;
    color: var(--prim-clr);
    font-weight: 600;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .top-bar .buyer-note .ct-floating .ct-inp:focus {
    border: 1px solid var(--prim-clr);
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .top-bar .buyer-note .ct-floating .field-icon1 {
    z-index: 2;
    position: absolute;
    top: 35%;
    right: 20px;
    color: var(--black-clr-1);
    cursor: pointer;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .top-bar .buyer-note .ct-floating>label {
    font-size: 16px;
    color: var(--grey-clr);
    font-weight: 400;
    text-transform: capitalize;
    left: 2px;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .top-bar .buyer-note .ct-floating>.ct-inp:focus~label,
.ct-floating>.ct-inp:not(:placeholder-shown)~label {
    transform: scale(.85) translateY(-1.8rem) translateX(0.15rem);
    color: var(--prim-clr);
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .top-bar .supplier-note {
    background: var(--lt-grey-bg-2);
    border-radius: 8px;
    padding: 16px;
    margin: 0;
    margin-left: -8px;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .top-bar .supplier-note h6 {
    font-weight: 500;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
    margin-left: -6px;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .top-bar .supplier-note p {
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
    margin-left: -6px;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .nav-pills {
    margin: 24px 0 0 0;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .nav-pills .nav-item {}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .nav-pills .nav-item .nav-link {
    background: var(--white-bg);
    border-radius: 0;
    margin: 0;
    padding: 12.5px 24px;
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
    text-transform: capitalize;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .nav-pills .nav-item .nav-link.active {
    background: var(--white-bg);
    color: var(--prim-clr);
    font-weight: 500;
    border-bottom: 2px solid var(--prim-clr);
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .nav-pills .nav-item .nav-link:hover {
    color: var(--prim-clr);
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .mid-area {
    /* height: calc(100% - 260px);
    overflow-y: scroll;
    overflow-x: hidden; */
    margin: 24px 10px 0 0;
}

/* width */
.buyer-reject-bid-area-side .buyer-reject-bid-form-side .mid-area::-webkit-scrollbar {
    width: 6px;
}

/* Track */
.buyer-reject-bid-area-side .buyer-reject-bid-form-side .mid-area::-webkit-scrollbar-track {
    background: var(--lt-grey-bg-3);
    border-radius: 50px;
}

/* Handle */
.buyer-reject-bid-area-side .buyer-reject-bid-form-side .mid-area::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.buyer-reject-bid-area-side .buyer-reject-bid-form-side .mid-area::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .mid-area .reject-order-details {
    padding: 0 16px 16px 28px;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .mid-area .reject-order-details .reject-bid-main {
    border-radius: 10px;
    margin: 0 0 20px 0;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .mid-area .reject-order-details .amount-area .ct-floating {
    margin: 0 0 16px 0;
    position: relative;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .mid-area .reject-order-details .amount-area .ct-floating .ct-inp.dollar-icn {
    padding: 5px 45px 5px 14.5px;
    background-image: url(../images/attach_money.png);
    background-position: 95% 50%;
    background-size: 10px;
    background-repeat: no-repeat;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .mid-area .reject-order-details .amount-area .ct-floating .ct-inp {
    height: 48px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid var(--grey-clr-6);
    padding: 5px 14.5px;
    font-size: 16px;
    color: var(--prim-clr);
    font-weight: 600;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .mid-area .reject-order-details .amount-area .ct-floating .ct-inp:focus {
    border: 1px solid var(--prim-clr);
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .mid-area .reject-order-details .amount-area .ct-floating .field-icon1 {
    z-index: 2;
    position: absolute;
    top: 35%;
    right: 20px;
    color: var(--black-clr-1);
    cursor: pointer;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .mid-area .reject-order-details .amount-area .ct-floating>label {
    font-size: 16px;
    color: var(--grey-clr);
    font-weight: 400;
    text-transform: capitalize;
    left: 2px;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .mid-area .reject-order-details .amount-area .ct-floating>.ct-inp:focus~label,
.ct-floating>.ct-inp:not(:placeholder-shown)~label {
    transform: scale(.85) translateY(-1.8rem) translateX(0.15rem);
    color: var(--prim-clr);
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .desc {
    margin: 0 0 16px 0;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .desc h6 {
    font-weight: 500;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .desc p {
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .view-toggle {
    font-weight: 500;
    font-size: 16px;
    color: var(--prim-clr);
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .multi-img {
    margin: 0 0 16px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .multi-img .img-main {
    margin: 0 16px 5px 0;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .multi-img .thumb {
    width: 100%;
    border-radius: 5px;
    height: 83px;
    object-fit: cover;
    object-position: center;
}

.multi-img{
    margin: 0 0 16px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.multi-img .img-main{
    margin: 0 16px 0 0;
}

.multi-img .img-main .thumb{
    width: 100%;
    border-radius: 5px;
    height: 83px;
    object-fit: cover;
    object-position: center;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .desc-item {
    margin: 0 0 16px 0;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .desc-item h6 {
    font-weight: 500;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .desc-item p {
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
    line-height: 24px;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .total-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 16px 0;
    border-top: 2px dashed var(--grey-clr-8);
    border-bottom: 2px dashed var(--grey-clr-8);
    margin: 0 0 16px 0;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .total-price h6 {
    font-size: 16px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .mid-area .reject-order-details .reject-bid-main .bid-details .total-price span {
    font-size: 16px;
    font-weight: 400;
    color: var(--black-clr-1);
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .btm-area {
    padding: 24px 28px 0 28px;
    height: 100%;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .btm-area .price-area .desc h4 {
    font-weight: 700;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 16px 0;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .btm-area .price-area .desc h6 {
    font-weight: 400;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 16px 0;
    text-align: right;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .btm-area .bid-actions {}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .btm-area.ct-shadow {
    box-shadow: 0px -5px 25px 0px rgb(0 0 0 / 11%);
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .btm-area .bid-actions .accBid-btn {
    background: var(--prim-bg);
    color: var(--white-clr);
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    padding: 8px 4px;
    margin: 0 0 5px 0;
    border-radius: 5px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .btm-area .bid-actions .accBid-btn span {
    margin: 0 8px 0 0;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .btm-area .bid-actions .sendBid-btn {
    background: var(--sec-bg);
    color: var(--white-clr);
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    padding: 8px 4px;
    margin: 0 0 5px 0;
    border-radius: 5px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.buyer-reject-bid-area-side .buyer-reject-bid-form-side .btm-area .bid-actions .sendBid-btn span {
    margin: 0 8px 0 0;
}
/********************* reject-bid-area styles close *********************/


/********************* bid-req-sent-area-side styles start *********************/
.bid-req-sent-area-side {
    height: 100%;
    padding: 5px 3px 5px 0;
}

.bid-req-sent-area-side .bid-req-sent-area-main {
    height: calc(100% - 90px);
    overflow-y: scroll;
    overflow-x: hidden;
}

.bid-req-sent-area-side .bid-req-sent-area-main .ct-flex {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    justify-content: space-between;
}

/* width */
.bid-req-sent-area-side .bid-req-sent-area-main::-webkit-scrollbar {
    width: 6px;
}

/* Track */
.bid-req-sent-area-side .bid-req-sent-area-main::-webkit-scrollbar-track {
    background: var(--lt-grey-bg-3);
    border-radius: 50px;
}

/* Handle */
.bid-req-sent-area-side .bid-req-sent-area-main::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.bid-req-sent-area-side .bid-req-sent-area-main::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}
.bid-req-sent-area-side .bid-req-sent-area-main .top-bar {
    padding: 26px 28px 0 28px;
}

.bid-req-sent-area-side .bid-req-sent-area-main .top-bar .head h4 {
    font-weight: 700;
    text-transform: capitalize;
    font-size: 24px;
    color: var(--black-clr-1);
    letter-spacing: -0.16px;
    margin: 0 0 4px 0;
}

.bid-req-sent-area-side .bid-req-sent-area-main .top-bar .head p {
    font-weight: 400;
    font-size: 18px;
    color: var(--grey-clr);
}

.bid-req-sent-area-side .bid-req-sent-area-main .desc {
    text-align: center;
    margin: 15% 0 0 0;
}

.bid-req-sent-area-side .bid-req-sent-area-main .desc .verified-icn {
    color: var(--prim-clr);
    font-variation-settings:
        'FILL' 1,
        'wght' 400;
    font-size: 90px;
}

.bid-req-sent-area-side .bid-req-sent-area-main .desc h3 {
    font-size: 28px;
    color: var(--black-clr);
    letter-spacing: -0.16px;
    font-weight: 700;
    margin: 32px 0 8px 0;
}

.bid-req-sent-area-side .bid-req-sent-area-main .desc p {
    font-size: 18px;
    color: var(--grey-clr);
    font-weight: 400;
    line-height: 24px;
}

.bid-req-sent-area-side .bid-req-sent-area-main .desc .thumb {
    display: block;
    margin: 43px auto 10%;
    height: 245px;
    object-fit: contain;
    object-position: center;
}

.bid-req-sent-area-side .bid-req-sent-area-main .action-box {
    padding: 24px 28px 0 28px;
    height: 100%;
}

.bid-req-sent-area-side .bid-req-sent-area-main .action-box.ct-shadow {
    box-shadow: 0px -5px 25px 0px rgb(0 0 0 / 11%);
}

.bid-req-sent-area-side .bid-req-sent-area-main .action-box .action-area .back-po-btn {
    background: var(--prim-bg);
    color: var(--white-clr);
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    padding: 8px 4px;
    margin: 0 0 5px 0;
    border-radius: 5px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/********************* bid-req-sent-area-side styles close *********************/


/********************* po-sent-orders styles start *********************/
.queries-area .po-sent-orders {

}

/* order-card start */
.queries-area .po-sent-orders .order-card {
    padding: 0;
    border-radius: 12px;
    box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.06);
    border: none;
    margin: 0 0 15px 0;
}

.queries-area .po-sent-orders .order-card .img-main {
    position: relative;
}

.queries-area .po-sent-orders .order-card .img-main .tag-rej,
.queries-area .po-sent-orders .order-card .img-main .tag-rec {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    border-radius: 5px;
    background: var(--mid-bg);
    color: var(--white-clr);
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
    padding: 7px 16px;
}

.queries-area .po-sent-orders .order-card .img-main .tag-rec {
    background: var(--sec-bg);
}

.queries-area .po-sent-orders .order-card .img-main .thumb {
    height: 138px;
    object-fit: cover;
    object-position: center;
    border-radius: 12px 12px 0 0;
    width: 100%;
}

.queries-area .po-sent-orders .order-card .desc {
    padding: 16px 12px;
}

.queries-area .po-sent-orders .order-card .desc ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    font-size: 14px;
    color: var(--black-clr-1);
    text-transform: capitalize;
}

.queries-area .po-sent-orders .order-card .desc ul li:not(:last-child) {
    margin: 0 0 8px 0;
}

.queries-area .po-sent-orders .order-card .desc ul li a {
    font-weight: 400;
    font-size: 14px;
    color: var(--grey-clr);
    text-transform: capitalize;
    text-align: right;
    display: inline-block;
}

.queries-area .po-sent-orders .order-card .desc a {
    font-size: 16px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0;
    display: block;
}

.queries-area .po-sent-orders .order-card .badge-wait {
    padding: 7.5px 11.5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--dk-yellow);
    text-transform: capitalize;
    background: var(--lt-yellow);
    display: inline-block;
    margin: 8px 0;
}
.queries-area .po-sent-orders .order-card .badge-reject {
    padding: 7.5px 11.5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--mid-clr);
    text-transform: capitalize;
    background: var(--mid-bg-2);
    display: inline-block;
    margin: 8px 0;
}
.order-card .badge-not-signed-yet {
    padding: 7.5px 11.5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--mid-clr);
    text-transform: capitalize;
    background: var(--mid-bg-2);
    display: inline-block;
    margin: 8px 0;
}
.queries-area .po-sent-orders .order-card .badge-rec {
    padding: 7.5px 11.5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--sec-clr);
    text-transform: capitalize;
    background: var(--lt-sec-bg);
    display: inline-block;
    margin: 8px 0;
}

.queries-area .po-sent-orders .order-card .desc small {
    font-size: 14px;
    font-weight: 400;
    color: var(--grey-clr);
    text-transform: capitalize;
    display: block;
}

.queries-area .po-sent-orders .order-card .desc small span {
    font-size: 14px;
    font-weight: 500;
    color: var(--mid-bg);
    margin: 0 5px 0 0;
}
/* order-card close */
.po-sent-area-side {
    height: 100%;
    padding: 5px 3px 5px 0;
}

.po-sent-area-side .po-sent-form-side {
    height: calc(100% - 90px);
    overflow-y: scroll;
    overflow-x: hidden;
}

/* width */
.po-sent-area-side .po-sent-form-side::-webkit-scrollbar {
    width: 6px;
}

/* Track */
.po-sent-area-side .po-sent-form-side::-webkit-scrollbar-track {
    background: var(--lt-grey-bg-3);
    border-radius: 50px;
}

/* Handle */
.po-sent-area-side .po-sent-form-side::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.po-sent-area-side .po-sent-form-side::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}

.po-sent-area-side .po-sent-form-side form {
    height: 100%;
}

.po-sent-area-side .po-sent-form-side .ct-flex {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    justify-content: space-between;
}

.po-sent-area-side .po-sent-form-side .top-bar {
    padding: 26px 28px 0 28px;
    border-bottom: 1px solid var(--grey-clr-3);
}

.po-sent-area-side .po-sent-form-side .top-bar .head h4 {
    font-weight: 700;
    text-transform: capitalize;
    font-size: 24px;
    color: var(--black-clr-1);
    letter-spacing: -0.16px;
    margin: 0 0 4px 0;
}

.po-sent-area-side .po-sent-form-side .top-bar .head p {
    font-weight: 400;
    font-size: 18px;
    color: var(--grey-clr);
}

.po-sent-area-side .po-sent-form-side .top-bar .status-not-sign {
    text-align: right;
}

.po-sent-area-side .po-sent-form-side .top-bar .status-sign {
    text-align: right;
}

.po-sent-area-side .po-sent-form-side .top-bar .status-not-sign span {
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 400;
    color: var(--mid-clr);
    text-transform: capitalize;
    background: var(--mid-bg-2);
    display: inline-block;
    margin: 0;
}

.po-sent-area-side .po-sent-form-side .top-bar .status-sign span {
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 400;
    color: var(--sec-clr);
    text-transform: capitalize;
    background: var(--lt-sec-bg);
    display: inline-block;
    margin: 0;
}

.po-sent-area-side .po-sent-form-side .nav-pills {
    margin: 16px 0 0 0;
}

.po-sent-area-side .po-sent-form-side .nav-pills .nav-item {}

.po-sent-area-side .po-sent-form-side .nav-pills .nav-item .nav-link {
    background: var(--white-bg);
    border-radius: 0;
    margin: 0;
    padding: 12.5px 24px;
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
    text-transform: capitalize;
}

.po-sent-area-side .po-sent-form-side .nav-pills .nav-item .nav-link.active {
    background: var(--white-bg);
    color: var(--prim-clr);
    font-weight: 500;
    border-bottom: 2px solid var(--prim-clr);
}

.po-sent-area-side .po-sent-form-side .nav-pills .nav-item .nav-link:hover {
    color: var(--prim-clr);
}

.po-sent-area-side .po-sent-form-side .mid-area {
    /* height: calc(100% - 260px);
    overflow-y: scroll;
    overflow-x: hidden; */
    margin: 24px 10px 0 0;
}

/* width */
.po-sent-area-side .po-sent-form-side .mid-area::-webkit-scrollbar {
    width: 6px;
}

/* Track */
.po-sent-area-side .po-sent-form-side .mid-area::-webkit-scrollbar-track {
    background: var(--lt-grey-bg-3);
    border-radius: 50px;
}

/* Handle */
.po-sent-area-side .po-sent-form-side .mid-area::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.po-sent-area-side .po-sent-form-side .mid-area::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details {
    padding: 0 16px 16px 28px;
}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main {
    border: 1px solid var(--grey-clr-3);
    border-radius: 10px;
    margin: 0 0 20px 0;
}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-top {
    padding: 24px 24px 0 24px;
}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-top .date-area {
    margin: 0 0 24px 0;
}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-top .date-area .img-main {}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-top .date-area .img-main .logo {}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-top .date-area .desc {
    text-align: right;
}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-top .date-area .desc h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-top .date-area .desc ul {}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-top .date-area .desc ul li {
    font-size: 14px;
    font-weight: 400;
    color: var(--black-clr);
    text-transform: capitalize;
}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-top .date-area .desc ul li span {
    color: var(--grey-clr);
    text-transform: unset;
}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-top .date-area .desc small {
    color: var(--grey-clr);
    text-transform: capitalize;
}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-top .address .desc {
    margin: 0 0 24px 0;
}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-top .address .desc h6 {
    font-size: 16px;
    font-weight: 500;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-top .address .desc p {
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-clr);
    line-height: auto;
}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-top .other-details .desc {
    margin: 0 0 16px 0;
}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-top .other-details .desc h6 {
    font-size: 16px;
    font-weight: 500;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-top .other-details .desc p {
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-clr);
    line-height: auto;
}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-mid {
    margin: 8px 0 0 0;
    padding: 0 24px 24px 24px;
}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-mid .ct-table .table thead {
    vertical-align: baseline;
}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-mid .ct-table .table thead tr {}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-mid .ct-table thead tr th {
    background: var(--lt-grey-bg-2);
    font-size: 14px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
    line-height: normal;
}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-mid .ct-table tbody {
    border-bottom: 1px dashed var(--grey-clr-7);
}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-mid .ct-table tbody tr {}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-mid .ct-table tbody tr td {
    font-size: 14px;
    font-weight: 400;
    color: var(--black-clr-1);
    text-transform: capitalize;
    padding: 16px 8px;
}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-mid .ct-table tfoot {}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-mid .ct-table tfoot tr {}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-mid .ct-table tfoot tr td {
    padding: 16px 12px;
}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-mid .ct-table tfoot tr td:first-child {
    font-size: 14px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-mid .ct-table tfoot tr td:last-child {
    font-size: 14px;
    font-weight: 400;
    color: var(--black-clr-1);
    text-align: right;
}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-mid .shipment-detail {}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-mid .shipment-detail .desc {
    margin: 0 0 16px 0;
}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-mid .shipment-detail .desc h6 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-mid .shipment-detail .desc p {
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-clr);
    text-transform: capitalize;
    line-height: 24px;
}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-mid .signature-area {}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-mid .signature-area .signature-main {}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-mid .signature-area .signature-main .thumb {
    margin: 0 auto;
    display: block;
}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-mid .signature-area .signature-main .label {
    margin: 12px 0 0 0;
    padding: 8px 0 0 0;
    border-top: 1px solid var(--black-clr-1);
}

.po-sent-area-side .po-sent-form-side .mid-area .comp-order-details .order-main .order-mid .signature-area .signature-main .label span {
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    color: var(--black-clr-1);
    text-align: center;
    display: block;
}

.po-sent-area-side .po-sent-form-side .btm-area {
    padding: 24px 28px 0 28px;
}

.po-sent-area-side .po-sent-form-side .btm-area .bid-actions {}

.po-sent-area-side .po-sent-form-side .btm-area.ct-shadow {
    box-shadow: 0px -5px 25px 0px rgb(0 0 0 / 11%);
}

.po-sent-area-side .po-sent-form-side .btm-area .bid-actions .accept-btn {
    background: var(--sec-bg);
    color: var(--white-clr);
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    padding: 8px 4px;
    margin: 0 0 5px 0;
    border-radius: 5px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.po-sent-area-side .po-sent-form-side .btm-area .bid-actions .accept-btn span {
    margin: 0 8px 0 0;
}


.po-sent-area-side .po-sent-form-side .btm-area .bid-actions .mark-complete-btn {
    background: var(--sec-bg);
    color: var(--white-clr);
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    padding: 8px 4px;
    margin: 0 0 5px 0;
    border-radius: 5px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.po-sent-area-side .po-sent-form-side .btm-area .bid-actions .mark-complete-btn span {
    margin: 0 8px 0 0;
}

/********************* po-sent-orders styles close *********************/

/********************* po-orders styles start *********************/
.queries-area .po-orders {

}

/* order-card start */
.queries-area .po-orders .order-card {
    padding: 0;
    border-radius: 12px;
    box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.06);
    border: none;
    margin: 0 0 15px 0;
}

.queries-area .po-orders .order-card .img-main {
    position: relative;
}

.queries-area .po-orders .order-card .img-main .tag-rej,
.queries-area .po-orders .order-card .img-main .tag-rec {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    border-radius: 5px;
    background: var(--mid-bg);
    color: var(--white-clr);
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
    padding: 7px 16px;
}

.queries-area .po-orders .order-card .img-main .tag-rec {
    background: var(--sec-bg);
}

.queries-area .po-orders .order-card .img-main .thumb {
    height: 138px;
    object-fit: contain;
    object-position: center;
    border-radius: 12px 12px 0 0;
    width: 100%;
}

.queries-area .po-orders .order-card .desc {
    padding: 16px 12px;
}

.queries-area .po-orders .order-card .desc ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    font-size: 14px;
    color: var(--black-clr-1);
    text-transform: capitalize;
}

.queries-area .po-orders .order-card .desc ul li:not(:last-child) {
    margin: 0 0 8px 0;
}

.queries-area .po-orders .order-card .desc ul li a {
    font-weight: 400;
    font-size: 14px;
    color: var(--grey-clr);
    text-transform: capitalize;
    text-align: right;
    display: inline-block;
}

.queries-area .po-orders .order-card .desc a {
    font-size: 16px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0;
    display: block;
}

.queries-area .po-orders .order-card .badge-wait {
    padding: 7.5px 11.5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--dk-yellow);
    text-transform: capitalize;
    background: var(--lt-yellow);
    display: inline-block;
    margin: 8px 0;
}
.queries-area .order-card .badge-waiting-for-completion {
    padding: 7.5px 11.5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--sec-clr);
    text-transform: capitalize;
    background: var(--lt-sec-bg);
    display: inline-block;
    margin: 8px 0;
}
.queries-area .po-orders .order-card .badge-req-sign {
    padding: 7.5px 11.5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--prim-clr);
    text-transform: capitalize;
    background: var(--lt-grey-bg);
    display: inline-block;
    margin: 8px 0;
}

.queries-area .order-card .badge-signature-required {
    padding: 7.5px 11.5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--prim-clr);
    text-transform: capitalize;
    background: var(--lt-grey-bg);
    display: inline-block;
    margin: 8px 0;
}

.queries-area .po-orders .order-card .desc small {
    font-size: 14px;
    font-weight: 400;
    color: var(--grey-clr);
    text-transform: unset;
    display: block;
}

.queries-area .po-orders .order-card .desc small span {
    font-size: 14px;
    font-weight: 500;
    color: var(--mid-bg);
    margin: 0 5px 0 0;
}
/* order-card close */
.po-req-area-side {
    height: 100%;
    padding: 5px 3px 5px 0;
}
.po-req-area-side .po-req-form-side {
    /* height: 100%;
    overflow: hidden; */
    height: calc(100% - 90px);
    overflow-y: scroll;
    overflow-x: hidden;
}
/* width */
.po-req-area-side .po-req-form-side::-webkit-scrollbar {
    width: 6px;
}

/* Track */
.po-req-area-side .po-req-form-side::-webkit-scrollbar-track {
    background: var(--lt-grey-bg-3);
    border-radius: 50px;
}

/* Handle */
.po-req-area-side .po-req-form-side::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.po-req-area-side .po-req-form-side::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}
.po-req-area-side .po-req-form-side form {
    height: 100%;
}
.po-req-area-side .po-req-form-side .ct-flex {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    justify-content: space-between;
}

.po-req-area-side .po-req-form-side .top-bar {
    padding: 26px 28px 0 28px;
    border-bottom: 1px solid var(--grey-clr-3);
}

.po-req-area-side .po-req-form-side .top-bar .head h4 {
    font-weight: 700;
    text-transform: capitalize;
    font-size: 24px;
    color: var(--black-clr-1);
    letter-spacing: -0.16px;
    margin: 0 0 4px 0;
}
.po-req-area-side .po-req-form-side .top-bar .head p {
    font-weight: 400;
    font-size: 18px;
    color: var(--grey-clr);
}
.po-req-area-side .po-req-form-side .top-bar .status-wait {
    text-align: right;
}
.po-req-area-side .po-req-form-side .top-bar .status-req {
    text-align: right;
}
.po-req-area-side .po-req-form-side .top-bar .status-wait span {
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 400;
    color: var(--dk-yellow);
    text-transform: capitalize;
    background: var(--lt-yellow);
    display: inline-block;
    margin: 0;
}
.po-req-area-side .po-req-form-side .top-bar .status-wait-completion span {
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 400;
    color: var(--sec-clr);
    text-transform: capitalize;
    background: var(--lt-sec-bg);
    display: inline-block;
    margin: 0;
}
.po-req-area-side .po-req-form-side .top-bar .status-req span {
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 400;
    color: var(--prim-clr);
    text-transform: capitalize;
    background: var(--lt-grey-bg);
    display: inline-block;
    margin: 0;
}

.po-req-area-side .po-req-form-side .top-bar .action-area {
    margin: 29px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.po-req-area-side .po-req-form-side .top-bar .action-area .logo-main {

}
.po-req-area-side .po-req-form-side .top-bar .action-area .logo-main .thumb {
    height: 35px;
    width: auto;
    display: block;
    margin: 0;
}
.po-req-area-side .po-req-form-side .top-bar .action-area .action-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.po-req-area-side .po-req-form-side .top-bar .action-area .action-btn .ct-btn {
   background: var(--grey-clr-5);
   border-radius: 5px;
   padding: 8px;
   font-size: 14px;
   font-weight: 500;
   color: var(--black-clr);
   text-transform: capitalize;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}
.po-req-area-side .po-req-form-side .top-bar .action-area .action-btn .ct-btn:not(:last-child) {
    margin: 0 8px 0 0;
}
.po-req-area-side .po-req-form-side .top-bar .action-area .action-btn .ct-btn .icn {
    font-size: 22px;
    margin: 0 8px 0 0;
}
.po-req-area-side .po-req-form-side .top-bar .action-area .action-btn .ct-btn .share-icn {
    font-variation-settings:
    'FILL' 1,
    'wght' 400
}

.po-req-area-side .po-req-form-side .top-bar .payment-details {

}

.po-req-area-side .po-req-form-side .top-bar .payment-details .desc {
    margin: 0 0 16px 0;
}
.po-req-area-side .po-req-form-side .top-bar .payment-details .desc h6 {
    font-weight: 500;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}
.po-req-area-side .po-req-form-side .top-bar .payment-details .desc p {
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
}

.po-req-area-side .po-req-form-side .nav-pills {
    margin: 0;
}
.po-req-area-side .po-req-form-side .nav-pills .nav-item {

}
.po-req-area-side .po-req-form-side .nav-pills .nav-item .nav-link {
    background: var(--white-bg);
    border-radius: 0;
    margin: 0;
    padding: 12.5px 24px;
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
    text-transform: capitalize;
}
.po-req-area-side .po-req-form-side .nav-pills .nav-item .nav-link.active {
    background: var(--white-bg);
    color: var(--prim-clr);
    font-weight: 500;
    border-bottom: 2px solid var(--prim-clr);
}
.po-req-area-side .po-req-form-side .nav-pills .nav-item .nav-link:hover {
    color: var(--prim-clr);
}

.po-req-area-side .po-req-form-side .mid-area {
    /* height: calc(100% - 260px);
    overflow-y: scroll;
    overflow-x: hidden; */
    margin: 24px 10px 0 0;
}

/* width */
.po-req-area-side .po-req-form-side .mid-area::-webkit-scrollbar {
    width: 6px;
}

/* Track */
.po-req-area-side .po-req-form-side .mid-area::-webkit-scrollbar-track {
    background: var(--lt-grey-bg-3);
    border-radius: 50px;
}

/* Handle */
.po-req-area-side .po-req-form-side .mid-area::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.po-req-area-side .po-req-form-side .mid-area::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}

.po-req-area-side .po-req-form-side .mid-area .req-order-details {
    padding: 0 16px 16px 28px;
}
.po-req-area-side .po-req-form-side .mid-area .req-order-details .po-req-main {
    border-radius: 10px;
    margin: 0 0 20px 0;
}

.po-req-area-side .po-req-form-side .mid-area .req-order-details .po-req-main .po-req-details {

}
.po-req-area-side .po-req-form-side .mid-area .req-order-details .po-req-main .po-req-details .po-req-info .desc {
    margin: 0 0 16px 0;
}
.po-req-area-side .po-req-form-side .mid-area .req-order-details .po-req-main .po-req-details .po-req-info .desc h6 {
    font-weight: 500;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}
.po-req-area-side .po-req-form-side .mid-area .req-order-details .po-req-main .po-req-details .po-req-info .desc p {
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
}
.po-req-area-side .po-req-form-side .mid-area .req-order-details .po-req-main .po-req-details .po-req-info .desc a {
    font-weight: 500;
    font-size: 16px;
    color: var(--sec-clr);
    text-transform: capitalize;
    text-decoration: underline;
}
.po-req-area-side .po-req-form-side .mid-area .req-order-details .po-req-main .po-req-details .view-toggle {
    font-weight: 500;
    font-size: 16px;
    color: var(--prim-clr);
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.po-req-area-side .po-req-form-side .mid-area .req-order-details .po-req-main .po-req-details .multi-img {
    margin: 0 0 16px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.po-req-area-side .po-req-form-side .mid-area .req-order-details .po-req-main .po-req-details .multi-img .img-main {
    margin: 0 16px 5px 0;
}
.po-req-area-side .po-req-form-side .mid-area .req-order-details .po-req-main .po-req-details .multi-img .thumb {
    width: 100%;
    border-radius: 5px;
    height: 83px;
    object-fit: cover;
    object-position: center;
}
.po-req-area-side .po-req-form-side .mid-area .req-order-details .po-req-main .po-req-details .desc-item {

}
.po-req-area-side .po-req-form-side .mid-area .req-order-details .po-req-main .po-req-details .desc-item h6 {
    font-weight: 500;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 8px 0;
}
.po-req-area-side .po-req-form-side .mid-area .req-order-details .po-req-main .po-req-details .desc-item p {
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
    line-height: 22px;
}

.po-req-area-side .po-req-form-side .mid-area .req-order-details .po-req-main .total-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 24px 0;
    border-top: 2px dashed var(--grey-clr-8);
}
.po-req-area-side .po-req-form-side .mid-area .req-order-details .po-req-main .total-value h6 {
    font-size: 16px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
}
.po-req-area-side .po-req-form-side .mid-area .req-order-details .po-req-main .total-value span {
    font-size: 16px;
    font-weight: 400;
    color: var(--black-clr-1);
}
.po-req-area-side .po-req-form-side .mid-area .req-order-details .address-details {
    border-top: 2px dashed var(--grey-clr-8);
    padding: 24px 0 0 0;
    margin: 24px 0 0 0;
}
.po-req-area-side .po-req-form-side .mid-area .req-order-details .address-details .address-grp {
    margin: 0 0 8px 0;
}
.po-req-area-side .po-req-form-side .mid-area .req-order-details .address-details .head h5 {
    font-weight: 500;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}
.po-req-area-side .po-req-form-side .mid-area .req-order-details .address-details .desc h6 {
    font-weight: 400;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}
.po-req-area-side .po-req-form-side .mid-area .req-order-details .address-details .desc p {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--grey-clr);
}

.signature-area {
    margin: 15px 0 0 0;
}

.signature-area .action-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 0 12px 0;
}
.signature-area .action-area h6 {
    font-weight: 500;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}
.signature-area .action-area .clear-sign {
    font-weight: 400;
    font-size: 16px;
    color: var(--mid-clr-2);
    text-transform: capitalize;
    margin: 0;
    text-decoration: underline;
}
.signature-area .sign-area {
    height: 120px;
    border: 1px solid var(--grey-clr-3);
    border-radius: 10px;
    overflow: hidden;
}
.signature-area .sign-area .sign-canvas {
    /* margin: 0 auto; */
    display: block;
    width: 100%;
    height: 100%;
}
.signature-area span {
    text-align: center;
    display: block;
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
    margin: 8px 0 0 0;
}
.po-req-area-side .po-req-form-side .btm-area {
    padding: 24px 28px 0 28px;
    height: 100%;
}
.po-req-area-side .po-req-form-side .btm-area .price-area .desc h4 {
    font-weight: 700;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 16px 0;
}
.po-req-area-side .po-req-form-side .btm-area .price-area .desc h6 {
    font-weight: 400;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 16px 0;
    text-align: right;
}
.po-req-area-side .po-req-form-side .btm-area .bid-actions {

}
.po-req-area-side .po-req-form-side .btm-area.ct-shadow {
    box-shadow: 0px -5px 25px 0px rgb(0 0 0 / 11%);
}
.po-req-area-side .po-req-form-side .btm-area .bid-actions .accept-btn {
    background: var(--sec-bg);
    color: var(--white-clr);
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    padding: 8px 4px;
    margin: 0 0 5px 0;
    border-radius: 5px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.po-req-area-side .po-req-form-side .btm-area .bid-actions .accept-btn span {
    margin: 0 8px 0 0;
}


.po-review-area-side {
    height: 100%;
}
.po-review-area-side .po-review-form-side {
    height: 100%;
    overflow: hidden;
}
.po-review-area-side .po-review-form-side form {
    height: 100%;
}

.po-review-area-side .po-review-form-side .top-bar {
    padding: 26px 28px 0 28px;
    border-bottom: 1px solid var(--grey-clr-3);
}

.po-review-area-side .po-review-form-side .top-bar .head h4 {
    font-weight: 700;
    text-transform: capitalize;
    font-size: 24px;
    color: var(--black-clr-1);
    letter-spacing: -0.16px;
    margin: 0 0 4px 0;
}
.po-review-area-side .po-review-form-side .top-bar .head p {
    font-weight: 400;
    font-size: 18px;
    color: var(--grey-clr);
}

.po-review-area-side .po-review-form-side .top-bar .action-area {
    margin: 29px 0 0 0;
}
.po-review-area-side .po-review-form-side .top-bar .action-area .action-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.po-review-area-side .po-review-form-side .top-bar .action-area .action-btn .ct-btn {
   background: var(--grey-clr-5);
   border-radius: 5px;
   padding: 8px;
   font-size: 14px;
   font-weight: 500;
   color: var(--black-clr);
   text-transform: capitalize;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}
.po-review-area-side .po-review-form-side .top-bar .action-area .action-btn .ct-btn:not(:last-child) {
    margin: 0 8px 0 0;
}
.po-review-area-side .po-review-form-side .top-bar .action-area .action-btn .ct-btn .icn {
    font-size: 22px;
    margin: 0 8px 0 0;
}
.po-review-area-side .po-review-form-side .top-bar .action-area .action-btn .ct-btn .share-icn {
    font-variation-settings:
    'FILL' 1,
    'wght' 400
}

.po-review-area-side .po-review-form-side .nav-pills {
    margin: 16px 0 0 0;
}
.po-review-area-side .po-review-form-side .nav-pills .nav-item {

}
.po-review-area-side .po-review-form-side .nav-pills .nav-item .nav-link {
    background: var(--white-bg);
    border-radius: 0;
    margin: 0;
    padding: 12.5px 24px;
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
    text-transform: capitalize;
}
.po-review-area-side .po-review-form-side .nav-pills .nav-item .nav-link.active {
    background: var(--white-bg);
    color: var(--prim-clr);
    font-weight: 500;
    border-bottom: 2px solid var(--prim-clr);
}
.po-review-area-side .po-review-form-side .nav-pills .nav-item .nav-link:hover {
    color: var(--prim-clr);
}

.po-review-area-side .po-review-form-side .mid-area {
    height: calc(100% - 300px);
    overflow-y: scroll;
    overflow-x: hidden;
    margin: 24px 10px 0 0;
}

/* width */
.po-review-area-side .po-review-form-side .mid-area::-webkit-scrollbar {
    width: 6px;
}

/* Track */
.po-review-area-side .po-review-form-side .mid-area::-webkit-scrollbar-track {
    background: var(--lt-grey-bg-3);
    border-radius: 50px;
}

/* Handle */
.po-review-area-side .po-review-form-side .mid-area::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.po-review-area-side .po-review-form-side .mid-area::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}

.po-review-area-side .po-review-form-side .mid-area .po-review-order-details {
    padding: 0 16px 16px 28px;
}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main {
    border: 1px solid var(--grey-clr-3);
    border-radius: 10px;
    margin: 0 0 20px 0;
}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-top {
    padding: 24px 24px 0 24px;
}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-top .date-area {
    margin: 0 0 24px 0;
}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-top .date-area .img-main {

}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-top .date-area .img-main .logo {

}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-top .date-area .desc {
    text-align: right;
}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-top .date-area .desc h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-top .date-area .desc ul {

}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-top .date-area .desc ul li {
    font-size: 14px;
    font-weight: 400;
    color: var(--black-clr);
    text-transform: capitalize;
}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-top .date-area .desc ul li span {
    color: var(--grey-clr);
    text-transform: unset;
}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-top .date-area .desc small {
    color: var(--grey-clr);
    text-transform: capitalize;
}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-top .address .desc {
    margin: 0 0 24px 0;
}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-top .address .desc h6 {
    font-size: 16px;
    font-weight: 500;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-top .address .desc p {
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-clr);
    line-height: auto;
}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-top .other-details .desc {
    margin: 0 0 16px 0;
}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-top .other-details .desc h6 {
    font-size: 16px;
    font-weight: 500;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-top .other-details .desc p {
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-clr);
    line-height: auto;
}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-mid {
    margin: 8px 0 0 0;
    padding: 0 24px 24px 24px;
}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .ct-table .table thead {
    vertical-align: baseline;
}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .ct-table .table thead tr {

}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .ct-table thead tr th {
    background: var(--lt-grey-bg-2);
    font-size: 14px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
    line-height: normal;
}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .ct-table tbody {
    border-bottom: 1px dashed var(--grey-clr-7);
}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .ct-table tbody tr {

}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .ct-table tbody tr td {
    font-size: 14px;
    font-weight: 400;
    color: var(--black-clr-1);
    text-transform: capitalize;
    padding: 16px 8px;
}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .ct-table tfoot {

}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .ct-table tfoot tr {

}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .ct-table tfoot tr td {
    padding: 16px 12px;
}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .ct-table tfoot tr td:first-child {
    font-size: 14px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .ct-table tfoot tr td:last-child {
    font-size: 14px;
    font-weight: 400;
    color: var(--black-clr-1);
    text-align: right;
}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .shipment-detail {
}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .shipment-detail .desc {
    margin: 0 0 16px 0;
}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .shipment-detail .desc h6 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .shipment-detail .desc p {
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-clr);
    text-transform: capitalize;
}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .signature-area {

}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .signature-area .signature-main {

}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .signature-area .signature-main .thumb {
    margin: 0 auto;
    display: block;
}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .signature-area .signature-main .label {
    margin: 12px 0 0 0;
    padding: 8px 0 0 0;
    border-top: 1px solid var(--black-clr-1);
}
.po-review-area-side .po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .signature-area .signature-main .label span {
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    color: var(--black-clr-1);
    text-align: center;
    display: block;
}

.buyer-po-req-area-side {
    height: 100%;
    padding: 5px 3px 5px 0;
}

.buyer-po-req-area-side .buyer-po-req-form-side {
    /* height: 100%;
    overflow: hidden; */
    height: calc(100% - 90px);
    overflow-y: scroll;
    overflow-x: hidden;
}

/* width */
.buyer-po-req-area-side .buyer-po-req-form-side::-webkit-scrollbar {
    width: 6px;
}

/* Track */
.buyer-po-req-area-side .buyer-po-req-form-side::-webkit-scrollbar-track {
    background: var(--lt-grey-bg-3);
    border-radius: 50px;
}

/* Handle */
.buyer-po-req-area-side .buyer-po-req-form-side::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.buyer-po-req-area-side .buyer-po-req-form-side::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}

.buyer-po-req-area-side .buyer-po-req-form-side form {
    height: 100%;
}

.buyer-po-req-area-side .buyer-po-req-form-side .ct-flex {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    justify-content: space-between;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar {
    padding: 26px 28px 0 28px;
    border-bottom: 1px solid var(--grey-clr-3);
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .head h4 {
    font-weight: 700;
    text-transform: capitalize;
    font-size: 24px;
    color: var(--black-clr-1);
    letter-spacing: -0.16px;
    margin: 0 0 4px 0;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .head p {
    font-weight: 400;
    font-size: 18px;
    color: var(--grey-clr);
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .btn-grp {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .btn-grp .edit-btn {
    background: var(--lt-grey-bg);
    color: var(--prim-clr);
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    padding: 6px;
    border-radius: 10px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 44px;
    max-width: 107px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .btn-grp .edit-btn>.edit-icn {
    margin: 0 4px 0 0;
    font-variation-settings: 'FILL' 1, 'wght' 400;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .btn-grp .save-btn {
    background: var(--sec-bg);
    color: var(--white-clr);
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    padding: 6px;
    border-radius: 10px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 44px;
    max-width: 87px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .order-no {
    margin: 15px 0 24px 0;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .order-no h6 {
    font-weight: 700;
    text-transform: capitalize;
    font-size: 20px;
    color: var(--black-clr-1);
    letter-spacing: -0.16px;
    margin: 0 0 4px 0;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .order-no span {
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
    display: block;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar {}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .add-info .inp-grp {
    margin: 0 0 16px 0;
    position: relative;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .add-info .inp-grp .ct-inp {
    height: 48px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid var(--grey-clr-6);
    padding: 5px 14.5px;
    font-size: 16px;
    color: var(--black-clr);
    font-weight: 400;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .add-info .inp-grp .ct-inp::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: var(--grey-clr);
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .add-info .inp-grp .ct-inp::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--grey-clr);
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .add-info .inp-grp .ct-inp:-ms-input-placeholder {
    /* IE 10+ */
    color: var(--grey-clr);
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .add-info .inp-grp .ct-inp:-moz-placeholder {
    /* Firefox 18- */
    color: var(--grey-clr);
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .add-info .inp-grp .ct-inp[type="date"]::-webkit-calendar-picker-indicator {
    background-image: url(../images/calendar_month.png);
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .add-info .inp-grp .ct-inp[type="time"]::-webkit-calendar-picker-indicator {
    background-image: url(../images/pace.png);
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .payment-details {}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .payment-details .desc {
    margin: 0 0 16px 0;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .payment-details .desc h6 {
    font-weight: 500;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .payment-details .desc p {
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .payment-details .desc a {
    font-weight: 500;
    font-size: 16px;
    color: var(--sec-clr);
    text-transform: capitalize;
    text-decoration: underline;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .inp-grp .ct-lbl {
    font-size: 16px;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--black-clr-1);
    margin: 0 0 8px 0;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .inp-grp .inp-rev {
    height: 24px;
    width: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--prim-clr);
    background: var(--white-bg);
    border: 2px solid var(--prim-clr);
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .inp-grp .inp-rev[aria-expanded="true"] {
    color: var(--mid-clr);
    border: 2px solid var(--mid-clr);
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .inp-grp .inp-rev[aria-expanded="true"] .plus {

    display: none;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .inp-grp .inp-rev[aria-expanded="true"] .minus {
    display: block;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .inp-grp .inp-rev[aria-expanded="false"] .plus {
    display: block;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .inp-grp .inp-rev[aria-expanded="false"] .minus {
    display: none;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .inp-grp .inp-rev>span {
    font-size: 20px;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .inp-grp .ct-txt {
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--grey-clr-6);
    padding: 14.5px;
    font-size: 16px;
    color: var(--black-clr);
    font-weight: 400;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .inp-grp .ct-txt::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: var(--grey-clr);
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .inp-grp .ct-txt::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--grey-clr);
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .inp-grp .ct-txt:-ms-input-placeholder {
    /* IE 10+ */
    color: var(--grey-clr);
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
}

.buyer-po-req-area-side .buyer-po-req-form-side .top-bar .inp-grp .ct-txt:-moz-placeholder {
    /* Firefox 18- */
    color: var(--grey-clr);
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
}

.buyer-po-req-area-side .buyer-po-req-form-side .nav-pills {
    margin: 0;
}

.buyer-po-req-area-side .buyer-po-req-form-side .nav-pills .nav-item {}

.buyer-po-req-area-side .buyer-po-req-form-side .nav-pills .nav-item .nav-link {
    background: var(--white-bg);
    border-radius: 0;
    margin: 0;
    padding: 12.5px 24px;
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
    text-transform: capitalize;
}

.buyer-po-req-area-side .buyer-po-req-form-side .nav-pills .nav-item .nav-link.active {
    background: var(--white-bg);
    color: var(--prim-clr);
    font-weight: 500;
    border-bottom: 2px solid var(--prim-clr);
}

.buyer-po-req-area-side .buyer-po-req-form-side .nav-pills .nav-item .nav-link:hover {
    color: var(--prim-clr);
}

.buyer-po-req-area-side .buyer-po-req-form-side .mid-area {
    /* height: calc(100% - 260px);
    overflow-y: scroll;
    overflow-x: hidden; */
    margin: 24px 10px 0 0;
}

/* width */
.buyer-po-req-area-side .buyer-po-req-form-side .mid-area::-webkit-scrollbar {
    width: 6px;
}

/* Track */
.buyer-po-req-area-side .buyer-po-req-form-side .mid-area::-webkit-scrollbar-track {
    background: var(--lt-grey-bg-3);
    border-radius: 50px;
}

/* Handle */
.buyer-po-req-area-side .buyer-po-req-form-side .mid-area::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.buyer-po-req-area-side .buyer-po-req-form-side .mid-area::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}

.buyer-po-req-area-side .buyer-po-req-form-side .mid-area .req-order-details {
    padding: 0 16px 16px 28px;
}

.buyer-po-req-area-side .buyer-po-req-form-side .mid-area .req-order-details .po-req-main {
    border-radius: 10px;
    margin: 0 0 20px 0;
}

.buyer-po-req-area-side .buyer-po-req-form-side .mid-area .req-order-details .po-req-main .po-req-details {}

.buyer-po-req-area-side .buyer-po-req-form-side .mid-area .req-order-details .po-req-main .po-req-details .po-req-info .desc {
    margin: 0 0 16px 0;
}

.buyer-po-req-area-side .buyer-po-req-form-side .mid-area .req-order-details .po-req-main .po-req-details .po-req-info .desc h6 {
    font-weight: 500;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}

.buyer-po-req-area-side .buyer-po-req-form-side .mid-area .req-order-details .po-req-main .po-req-details .po-req-info .desc p {
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
}

.buyer-po-req-area-side .buyer-po-req-form-side .mid-area .req-order-details .po-req-main .po-req-details .po-req-info .desc a {
    font-weight: 500;
    font-size: 16px;
    color: var(--sec-clr);
    text-transform: capitalize;
    text-decoration: underline;
}


.buyer-po-req-area-side .buyer-po-req-form-side .mid-area .req-order-details .po-req-main .po-req-details .desc-item {}

.buyer-po-req-area-side .buyer-po-req-form-side .mid-area .req-order-details .po-req-main .po-req-details .desc-item h6 {
    font-weight: 500;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 8px 0;
}

.buyer-po-req-area-side .buyer-po-req-form-side .mid-area .req-order-details .po-req-main .po-req-details .desc-item p {
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
    line-height: 22px;
}

.buyer-po-req-area-side .buyer-po-req-form-side .mid-area .req-order-details .po-req-main .total-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 16px 0;
    border-top: 2px dashed var(--grey-clr-8);
    border-bottom: 2px dashed var(--grey-clr-8);
    margin: 0 0 16px 0;
}

.buyer-po-req-area-side .buyer-po-req-form-side .mid-area .req-order-details .po-req-main .total-value h6 {
    font-size: 16px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
}

.buyer-po-req-area-side .buyer-po-req-form-side .mid-area .req-order-details .po-req-main .total-value span {
    font-size: 16px;
    font-weight: 400;
    color: var(--black-clr-1);
}

.buyer-po-req-area-side .buyer-po-req-form-side .mid-area .add-info .inp-grp {
    margin: 0 0 16px 0;
    position: relative;
}

.buyer-po-req-area-side .buyer-po-req-form-side .mid-area .add-info .inp-grp .ct-inp {
    height: 48px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid var(--grey-clr-6);
    padding: 5px 14.5px;
    font-size: 16px;
    color: var(--black-clr);
    font-weight: 400;
}

.buyer-po-req-area-side .buyer-po-req-form-side .mid-area .add-info .inp-grp .ct-inp::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: var(--grey-clr);
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
}

.buyer-po-req-area-side .buyer-po-req-form-side .mid-area .add-info .inp-grp .ct-inp::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--grey-clr);
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
}

.buyer-po-req-area-side .buyer-po-req-form-side .mid-area .add-info .inp-grp .ct-inp:-ms-input-placeholder {
    /* IE 10+ */
    color: var(--grey-clr);
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
}

.buyer-po-req-area-side .buyer-po-req-form-side .mid-area .add-info .inp-grp .ct-inp:-moz-placeholder {
    /* Firefox 18- */
    color: var(--grey-clr);
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
}

.buyer-po-req-area-side .buyer-po-req-form-side .mid-area .add-info .inp-grp .ct-inp[type="date"]::-webkit-calendar-picker-indicator {
    background-image: url(../images/calendar_month.png);
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.buyer-po-req-area-side .buyer-po-req-form-side .mid-area .add-info .inp-grp .ct-inp[type="time"]::-webkit-calendar-picker-indicator {
    background-image: url(../images/pace.png);
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.buyer-po-req-area-side .buyer-po-req-form-side .btm-area {
    padding: 24px 28px 0 28px;
    height: 100%;
}

.buyer-po-req-area-side .buyer-po-req-form-side .btm-area .price-area .desc h4 {
    font-weight: 700;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 16px 0;
}

.buyer-po-req-area-side .buyer-po-req-form-side .btm-area .price-area .desc h6 {
    font-weight: 400;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 16px 0;
    text-align: right;
}

.buyer-po-req-area-side .buyer-po-req-form-side .btm-area .bid-actions {}

.buyer-po-req-area-side .buyer-po-req-form-side .btm-area.ct-shadow {
    box-shadow: 0px -5px 25px 0px rgb(0 0 0 / 11%);
}

.buyer-po-req-area-side .buyer-po-req-form-side .btm-area .bid-actions .gen-po-btn {
    background: var(--prim-bg);
    color: var(--white-clr);
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    padding: 8px 4px;
    margin: 0 0 5px 0;
    border-radius: 5px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.buyer-po-review-area-side {
    height: 100%;
    padding: 5px 3px 5px 0;
}

.buyer-po-review-area-side .buyer-po-review-form-side {
    /* height: 100%;
    overflow: hidden; */
    height: calc(100% - 90px);
    overflow-y: scroll;
    overflow-x: hidden;
}

/* width */
.buyer-po-review-area-side .buyer-po-review-form-side::-webkit-scrollbar {
    width: 6px;
}

/* Track */
.buyer-po-review-area-side .buyer-po-review-form-side::-webkit-scrollbar-track {
    background: var(--lt-grey-bg-3);
    border-radius: 50px;
}

/* Handle */
.buyer-po-review-area-side .buyer-po-review-form-side::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.buyer-po-review-area-side .buyer-po-review-form-side::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}

.buyer-po-review-area-side .buyer-po-review-form-side form {
    height: 100%;
}

.buyer-po-review-area-side .buyer-po-review-form-side .top-bar {
    padding: 26px 28px 0 28px;
    border-bottom: 1px solid var(--grey-clr-3);
}

.buyer-po-review-area-side .buyer-po-review-form-side .top-bar .head h4 {
    font-weight: 700;
    text-transform: capitalize;
    font-size: 24px;
    color: var(--black-clr-1);
    letter-spacing: -0.16px;
    margin: 0 0 4px 0;
}

.buyer-po-review-area-side .buyer-po-review-form-side .top-bar .head p {
    font-weight: 400;
    font-size: 18px;
    color: var(--grey-clr);
}

.buyer-po-review-area-side .buyer-po-review-form-side .top-bar .action-area {
    margin: 29px 0 0 0;
}

.buyer-po-review-area-side .buyer-po-review-form-side .top-bar .action-area .action-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.buyer-po-review-area-side .buyer-po-review-form-side .top-bar .action-area .action-btn .ct-btn {
    background: var(--grey-clr-5);
    border-radius: 5px;
    padding: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--black-clr);
    text-transform: capitalize;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.buyer-po-review-area-side .buyer-po-review-form-side .top-bar .action-area .action-btn .ct-btn:not(:last-child) {
    margin: 0 8px 0 0;
}

.buyer-po-review-area-side .buyer-po-review-form-side .top-bar .action-area .action-btn .ct-btn .icn {
    font-size: 22px;
    margin: 0 8px 0 0;
}

.buyer-po-review-area-side .buyer-po-review-form-side .top-bar .action-area .action-btn .ct-btn .share-icn {
    font-variation-settings:
        'FILL' 1,
        'wght' 400
}

.buyer-po-review-area-side .buyer-po-review-form-side .nav-pills {
    margin: 16px 0 0 0;
}

.buyer-po-review-area-side .buyer-po-review-form-side .nav-pills .nav-item {}

.buyer-po-review-area-side .buyer-po-review-form-side .nav-pills .nav-item .nav-link {
    background: var(--white-bg);
    border-radius: 0;
    margin: 0;
    padding: 12.5px 24px;
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
    text-transform: capitalize;
}

.buyer-po-review-area-side .buyer-po-review-form-side .nav-pills .nav-item .nav-link.active {
    background: var(--white-bg);
    color: var(--prim-clr);
    font-weight: 500;
    border-bottom: 2px solid var(--prim-clr);
}

.buyer-po-review-area-side .buyer-po-review-form-side .nav-pills .nav-item .nav-link:hover {
    color: var(--prim-clr);
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area {
    /* height: calc(100% - 300px);
    overflow-y: scroll;
    overflow-x: hidden; */
    margin: 24px 10px 0 0;
}

/* width */
.buyer-po-review-area-side .buyer-po-review-form-side .mid-area::-webkit-scrollbar {
    width: 6px;
}

/* Track */
.buyer-po-review-area-side .buyer-po-review-form-side .mid-area::-webkit-scrollbar-track {
    background: var(--lt-grey-bg-3);
    border-radius: 50px;
}

/* Handle */
.buyer-po-review-area-side .buyer-po-review-form-side .mid-area::-webkit-scrollbar-thumb {
    background: var(--prim-bg);
    border-radius: 50px;
}

/* Handle on hover */
.buyer-po-review-area-side .buyer-po-review-form-side .mid-area::-webkit-scrollbar-thumb:hover {
    background: var(--prim-bg);
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details {
    padding: 0 16px 16px 28px;
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main {
    border: 1px solid var(--grey-clr-3);
    border-radius: 10px;
    margin: 0 0 20px 0;
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-top {
    padding: 24px 24px 0 24px;
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-top .date-area {
    margin: 0 0 24px 0;
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-top .date-area .img-main {}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-top .date-area .img-main .logo {}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-top .date-area .desc {
    text-align: right;
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-top .date-area .desc h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-top .date-area .desc ul {}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-top .date-area .desc ul li {
    font-size: 14px;
    font-weight: 400;
    color: var(--black-clr);
    text-transform: capitalize;
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-top .date-area .desc ul li span {
    color: var(--grey-clr);
    text-transform: unset;
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-top .date-area .desc small {
    color: var(--grey-clr);
    text-transform: capitalize;
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-top .address .desc {
    margin: 0 0 24px 0;
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-top .address .desc h6 {
    font-size: 16px;
    font-weight: 500;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-top .address .desc p {
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-clr);
    line-height: auto;
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-top .other-details .desc {
    margin: 0 0 16px 0;
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-top .other-details .desc h6 {
    font-size: 16px;
    font-weight: 500;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-top .other-details .desc p {
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-clr);
    line-height: auto;
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-mid {
    margin: 8px 0 0 0;
    padding: 0 24px 24px 24px;
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .ct-table .table thead {
    vertical-align: baseline;
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .ct-table .table thead tr {}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .ct-table thead tr th {
    background: var(--lt-grey-bg-2);
    font-size: 14px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
    line-height: normal;
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .ct-table tbody {
    border-bottom: 1px dashed var(--grey-clr-7);
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .ct-table tbody tr {}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .ct-table tbody tr td {
    font-size: 14px;
    font-weight: 400;
    color: var(--black-clr-1);
    text-transform: capitalize;
    padding: 16px 8px;
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .ct-table tfoot {}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .ct-table tfoot tr {}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .ct-table tfoot tr td {
    padding: 16px 12px 0 0;
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .ct-table tfoot tr td:first-child {
    font-size: 14px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .ct-table tfoot tr td:last-child {
    font-size: 14px;
    font-weight: 400;
    color: var(--black-clr-1);
    text-align: right;
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .shipment-detail {}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .shipment-detail .desc {
    margin: 0 0 16px 0;
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .shipment-detail .desc h6 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .shipment-detail .desc p {
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-clr);
    text-transform: capitalize;
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .signature-area {}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .signature-area .signature-main {}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .signature-area .signature-main .thumb {
    margin: 0 auto;
    display: block;
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .signature-area .signature-main .label {
    margin: 12px 0 0 0;
    padding: 8px 0 0 0;
    border-top: 1px solid var(--black-clr-1);
}

.buyer-po-review-area-side .buyer-po-review-form-side .mid-area .po-review-order-details .order-main .order-mid .signature-area .signature-main .label span {
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    color: var(--black-clr-1);
    text-align: center;
    display: block;
}

.buyer-po-review-area-side .buyer-po-review-form-side .btm-area {
    padding: 24px 28px 0 28px;
    height: 100%;
}

.buyer-po-review-area-side .buyer-po-review-form-side .btm-area .bid-actions {}

.buyer-po-review-area-side .buyer-po-review-form-side .btm-area.ct-shadow {
    box-shadow: 0px -5px 25px 0px rgb(0 0 0 / 11%);
}

.buyer-po-review-area-side .buyer-po-review-form-side .btm-area .bid-actions .sendPO-btn {
    background: var(--sec-bg);
    color: var(--white-clr);
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    padding: 8px 4px;
    margin: 0 0 5px 0;
    border-radius: 5px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.buyer-po-review-area-side .buyer-po-review-form-side .btm-area .bid-actions .sendPO-btn .send-icn {
    margin: 0 8px 0 0;
}


/********************* po-req-area styles close *********************/

/********************* live-bid-area styles start *********************/
.live-bid-area {
    position: relative;
}
.live-bid-area .live-bid-main {

}

.live-bid-area .live-bid-main .order-det-card {
    border: 1px solid var(--grey-clr-4);
    border-radius: 20px;
    margin: 0 0 10px 0;
    padding: 32px;
}
.live-bid-area .live-bid-main .order-det-card .top-det-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 0 20px 0;
}
.live-bid-area .live-bid-main .order-det-card .top-det-area .head {
    margin: 0 0 4px 0;
}
.live-bid-area .live-bid-main .order-det-card .top-det-area .head h6 {
    font-size: 20px;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--black-clr-1);
    margin: 0 0 8px 0;
}
.live-bid-area .live-bid-main .order-det-card .top-det-area .head p {
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-clr);
}
.live-bid-area .live-bid-main .order-det-card .top-det-area .det-actions {
    margin: 0 0 4px 0;
}
.live-bid-area .live-bid-main .order-det-card .top-det-area .det-actions .dlt-btn {
    padding: 12px;
    border-radius: 5px;
    background: var(--mid-bg-2);
    color: var(--mid-clr);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.live-bid-area .live-bid-main .order-det-card .top-det-area .det-actions .dlt-btn span {
    font-variation-settings:
    'FILL' 1,
    'wght' 400
}
.live-bid-area .live-bid-main .order-det-card .disabled-area {
    position: relative;
}
.live-bid-area .live-bid-main .order-det-card .disabled-area::before {
    content: '';
    position: absolute;
    inset: -20px 0 0 0;
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, 0.5);
    z-index: 1;
}
.live-bid-area .live-bid-main .order-det-card .det-img-add {
    margin: 0 0 20px 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 9px;
}
.live-bid-area .live-bid-main .order-det-card .det-img-add>*:not(:last-child) {
    margin: 0 16px 0 0;
}
.live-bid-area .live-bid-main .order-det-card .det-img-add .add-img {
    height: 99px;
    width: 99px;
    border-radius: 5px;
    border: 2px dashed var(--prim-clr);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 15px 5px;
    margin-bottom: 4px;
    position: relative;
}
.live-bid-area .live-bid-main .order-det-card .det-img-add .add-img p {
    text-transform: capitalize;
    color: var(--prim-clr);
    font-weight: 400;
    font-size: 16px;
    text-align: center;
}
.live-bid-area .live-bid-main .order-det-card .det-img-add .add-img>input {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
}
.live-bid-area .live-bid-main .order-det-card .det-img-add .add-img span {
    margin: 0 auto 8px auto;
    display: block;
}
.live-bid-area .live-bid-main .order-det-card .det-img-add .img-main {
    position: relative;
}
.live-bid-area .live-bid-main .order-det-card .det-img-add .img-main .dlt-btn {
    height: 32px;
    width: 32px;
    position: absolute;
    top: -10px;
    right: -5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mid-bg);
    color: var(--white-clr);
}
.live-bid-area .live-bid-main .order-det-card .det-img-add .img-main .dlt-btn>span {
    font-size: 18px;
}
.live-bid-area .live-bid-main .order-det-card .det-img-add .img-main .thumb {
    margin-bottom: 5px;
    height: 99px;
    width: 99px;
    border-radius: 5px;
    object-fit: cover;
    object-position: center;
}
.live-bid-area .live-bid-main .order-det-card .defin-specs {

}
.live-bid-area .live-bid-main .order-det-card .defin-specs .inp-grp .ct-select {
    height: 48px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid var(--grey-clr-6);
    padding: 5px 14.5px;
    font-size: 16px;
    color: var(--prim-clr);
    font-weight: 400;
    margin: 0 0 16px 0;
}
.live-bid-area .live-bid-main .order-det-card .defin-specs .inp-grp .ct-select option {
    font-size: 16px;
    color: var(--prim-clr);
    font-weight: 400;
}

.live-bid-area .live-bid-main .order-det-card .defin-specs .ct-floating {
    margin: 10px 0;
    position: relative;
}
.live-bid-area .live-bid-main .order-det-card .defin-specs .ct-floating .ct-inp.get-value {
    font-weight: 600;
}
.live-bid-area .live-bid-main .order-det-card .defin-specs .ct-floating .ct-inp {
    height: 48px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid var(--grey-clr-6);
    padding: 5px 14.5px;
    font-size: 16px;
    color: var(--prim-clr);
    font-weight: 600;
}
.live-bid-area .live-bid-main .order-det-card .defin-specs .ct-floating .ct-inp:focus {
    border: 1px solid var(--prim-clr);
}
.live-bid-area .live-bid-main .order-det-card .defin-specs .ct-floating .field-icon1 {
    z-index: 2;
    position: absolute;
    top: 35%;
    right: 20px;
    color: var(--black-clr-1);
    cursor: pointer;
}
.live-bid-area .live-bid-main .order-det-card .defin-specs .ct-floating>label {
    font-size: 16px;
    color: var(--prim-clr);
    font-weight: 400;
    text-transform: capitalize;
    left: 2px;
}
.live-bid-area .live-bid-main .order-det-card .defin-specs .ct-floating>.ct-inp:focus~label, .ct-floating>.ct-inp:not(:placeholder-shown)~label {
    transform: scale(.85) translateY(-1.8rem) translateX(0.15rem);
    color: var(--prim-clr);
}
.live-bid-area .live-bid-main .order-det-card .defin-specs h6 {
    margin: 8px 0 16px 0;
    font-size: 16px;
    color: var(--black-clr-1);
    font-weight: 700;
    text-transform: capitalize;
}
.live-bid-area .live-bid-main .order-det-card .defin-specs .ct-flex {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
}
.live-bid-area .live-bid-main .order-det-card .defin-specs .ct-flex .ct-radio {
    padding: 14px;
    border: 1px solid var(--grey-clr-6);
    border-radius: 5px;
    min-height: fit-content;
    margin: 0 0 16px 0;
}
.live-bid-area .live-bid-main .order-det-card .defin-specs .ct-flex .ct-radio.checked {
    border: 1px solid var(--prim-clr);
}
.live-bid-area .live-bid-main .order-det-card .defin-specs .ct-flex .ct-radio:not(:last-child) {
    margin: 0 16px 16px 0;
}
.live-bid-area .live-bid-main .order-det-card .defin-specs .ct-flex .ct-radio .form-check-input {
    float: none;
    margin: 0;
    height: 20px;
    width: 20px;
    border: 2px solid var(--grey-clr);
}
.live-bid-area .live-bid-main .order-det-card .defin-specs .ct-flex .ct-radio .form-check-input[type="radio"]:checked {
    --bs-form-check-bg-image: url(../images/radio_button_checked.png);
    border: none;
    background-color: var(--white-bg);
}

.live-bid-area .live-bid-main .order-det-card .defin-specs .ct-flex .ct-radio .form-check-label {
    font-size: 16px;
    color: var(--black-clr-1);
    font-weight: 400;
    text-transform: capitalize;
    margin: 0 0 0 8px;
}
.live-bid-area .live-bid-main .order-det-card .inp-grp .ct-lbl {
    font-size: 16px;
    color: var(--black-clr-1);
    font-weight: 700;
    text-transform: capitalize;
    margin: 0 0 16px 0;
}
.live-bid-area .live-bid-main .order-det-card .inp-grp .ct-txt {
    padding: 14px;
    border: 1px solid var(--grey-clr-6);
    border-radius: 10px;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    color: var(--prim-clr);
}
.live-bid-area .live-bid-main .order-det-card .inp-grp .ct-txt::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: var(--grey-clr-6);
    font-size: 16px;
        font-weight: 400;
}

.live-bid-area .live-bid-main .order-det-card .inp-grp .ct-txt::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--grey-clr-6);
    font-size: 16px;
        font-weight: 400;
}

.live-bid-area .live-bid-main .order-det-card .inp-grp .ct-txt:-ms-input-placeholder {
    /* IE 10+ */
    color: var(--grey-clr-6);
    font-size: 16px;
        font-weight: 400;
}

.live-bid-area .live-bid-main .order-det-card .inp-grp .ct-txt:-moz-placeholder {
    /* Firefox 18- */
    color: var(--grey-clr-6);
    font-size: 16px;
        font-weight: 400;
}

.live-bid-area .live-bid-main .total-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 24px 0 0 0;
}
.live-bid-area .live-bid-main .total-area h6 {
    font-size: 16px;
    color: var(--black-clr-1);
    font-weight: 700;
    text-transform: capitalize;
}
.live-bid-area .live-bid-main .total-area span {
    font-size: 16px;
    color: var(--black-clr-1);
    font-weight: 400;
}

.live-bid-area .live-bid-main .add-item-main {
    height: 100%;
    width: 100%;
}
.live-bid-area .live-bid-main .add-item-main .add-order {
    height: 100%;
    width: 100%;
    background: var(--white-bg-4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px dashed var(--prim-clr);
    font-size: 18px;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--prim-clr);
    border-radius: 20px;
}
.live-bid-area .live-bid-main .add-item-main .add-order span {
    font-size: 32px;
}

.live-bid-area .live-bid-main .pickup-ref-card {
    border: 1px solid var(--grey-clr-4);
    border-radius: 20px;
    margin: 0 0 10px 0;
    padding: 32px;
}

.live-bid-area .live-bid-main .pickup-ref-card .top-ref-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 0 20px 0;
}
.live-bid-area .live-bid-main .pickup-ref-card .top-ref-area .head {
    margin: 0 0 4px 0;
}
.live-bid-area .live-bid-main .pickup-ref-card .top-ref-area .head h6 {
    font-size: 20px;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--black-clr-1);
    margin: 0 0 8px 0;
}
.live-bid-area .live-bid-main .pickup-ref-card .top-ref-area .head p {
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-clr);
}
.live-bid-area .live-bid-main .pickup-ref-card .mid-ref-area {

}
.live-bid-area .live-bid-main .pickup-ref-card .mid-ref-area .ct-floating>label {
    font-size: 16px;
    color: var(--grey-clr-6);
    font-weight: 400;
    text-transform: capitalize;
    left: 2px;
}
.live-bid-area .live-bid-main .pickup-ref-card .mid-ref-area .ct-floating>.ct-txt:focus~label, .ct-floating>.ct-txt:not(:placeholder-shown)~label {
    transform: scale(.85) translateY(-1.8rem) translateX(0.15rem);
    color: var(--prim-clr);
}
.live-bid-area .live-bid-main .pickup-ref-card .mid-ref-area .ct-floating .ct-txt:focus {
    border: 1px solid var(--prim-clr);
}

.live-bid-area .live-bid-main .pickup-ref-card .mid-ref-area .ct-floating .ct-txt {
    padding: 14px;
    border: 1px solid var(--grey-clr-6);
    border-radius: 10px;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    color: var(--prim-clr);
}

.live-bid-area .live-bid-main .pickup-ref-card .mid-ref-area .ct-floating .ct-txt::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: var(--grey-clr-6);
    font-size: 16px;
        font-weight: 400;
}

.live-bid-area .live-bid-main .pickup-ref-card .mid-ref-area .ct-floating .ct-txt::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--grey-clr-6);
    font-size: 16px;
        font-weight: 400;
}

.live-bid-area .live-bid-main .pickup-ref-card .mid-ref-area .ct-floating .ct-txt:-ms-input-placeholder {
    /* IE 10+ */
    color: var(--grey-clr-6);
    font-size: 16px;
        font-weight: 400;
}

.live-bid-area .live-bid-main .pickup-ref-card .mid-ref-area .ct-floating .ct-txt:-moz-placeholder {
    /* Firefox 18- */
    color: var(--grey-clr-6);
    font-size: 16px;
        font-weight: 400;
}

/* categ-modal start */
.categ-modal {

}
.categ-modal .modal-dialog {

}
.categ-modal .modal-dialog .modal-content {
    border-radius: 16px;
}
.categ-modal .modal-dialog .modal-content .modal-header {
    border: none;
    padding: 28px 28px 0;
}
.categ-modal .modal-dialog .modal-content .modal-header .btn-close {
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    width: auto;
    opacity: 1;
}
.categ-modal .modal-dialog .modal-content .modal-header .btn-close span {
    color: var(--black-clr-1);
    font-size: 35px;
}
.categ-modal .modal-dialog .modal-content .modal-body {
    padding: 0 28px 28px 28px;
}
.categ-modal .modal-dialog .modal-content .modal-body .desc {
    text-align: center;
}
.categ-modal .modal-dialog .modal-content .modal-body .desc h4 {
    font-size: 28px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 8px 0;
}
.categ-modal .modal-dialog .modal-content .modal-body .desc p {
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    color: var(--grey-clr);
}
.categ-modal .modal-dialog .modal-content .modal-body .desc p span {
    color: var(--black-clr);
    font-weight: 500;
}
.categ-modal .modal-dialog .modal-content .modal-body .categ-select-area .categ-main {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0;
    margin: 24px 0 0 0;
}
.categ-modal .modal-dialog .modal-content .modal-body .categ-select-area .categ-main .img-main {
    position: relative;
    overflow: hidden;
    min-height: 88px;
    max-width: 88px;
    width: 100%;
    border-radius: 10px;
    background: var(--lt-grey-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.categ-modal .modal-dialog .modal-content .modal-body .categ-select-area .categ-main .img-main .thumb {
    height: auto;
    display: block;
    margin: 0 auto;
}
.categ-modal .modal-dialog .modal-content .modal-body .categ-select-area .categ-main .form-check-input {
    float: none;
    margin: 0;
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    background: none;
    border-radius: 10px;
    border: 2px solid transparent;

}
.categ-modal .modal-dialog .modal-content .modal-body .categ-select-area .categ-main .form-check-input:checked {
    border: 2px solid var(--prim-clr);
}
.categ-modal .modal-dialog .modal-content .modal-body .categ-select-area .categ-main .form-check-label {
    font-size: 16px;
    font-weight: 400;
    color: var(--prim-clr);
    margin: 8px 0 0 0;
}
.categ-modal .modal-dialog .modal-content .modal-body .btn-proceed {
    background: var(--prim-bg);
    color: var(--white-clr);
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    padding: 8px 4px;
    margin: 32px 0 0 0;
    border-radius: 8px;
    border: none;
    transition: all 0.2s ease-in-out;
    height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* categ-modal close */

/********************* live-bid-area styles close *********************/


/********************* pickup-area styles start *********************/
.pickup-area {
    position: relative;
}
.pickup-area .pickup-main {
    margin-bottom: 150px;
}

.pickup-area .pickup-main .pickup-det-card {
    border: 1px solid var(--grey-clr-4);
    border-radius: 20px;
    margin: 0 0 10px 0;
    padding: 32px;
}

.pickup-area .pickup-main .pickup-det-card .top-det-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 0 20px 0;
}
.pickup-area .pickup-main .pickup-det-card .top-det-area .head {
    margin: 0 0 4px 0;
}
.pickup-area .pickup-main .pickup-det-card .top-det-area .head h6 {
    font-size: 20px;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--black-clr-1);
    margin: 0 0 8px 0;
}
.pickup-area .pickup-main .pickup-det-card .top-det-area .head p {
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-clr);
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area {

}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .inp-grp {
    margin: 0 0 16px 0;
    position: relative;
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .inp-grp .inp-rev {
    height: 18px;
    width: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white-clr);
    background: var(--mid-clr);
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .inp-grp .inp-rev[aria-expanded="true"] .plus {

    display: none;
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .inp-grp .inp-rev[aria-expanded="true"] .minus {
    display: block;
}

.pickup-area .pickup-main .pickup-det-card .mid-det-area .inp-grp .inp-rev[aria-expanded="false"] .plus {
    display: block;
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .inp-grp .inp-rev[aria-expanded="false"] .minus {
    display: none;
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .inp-grp .inp-rev>span {
    font-size: 18px;
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .inp-grp .ct-txt {
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--grey-clr-6);
    padding: 14.5px;
    font-size: 16px;
    color: var(--black-clr);
    font-weight: 400;
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .inp-grp .ct-inp.lbs-inp {
    padding: 5px 60px 5px 14.5px;
    /* background-image: url(../images/change-record-type.png);
    background-position: 95% 50%;
    background-size: 18px;
    background-repeat: no-repeat; */
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .inp-grp .lbs-lbl {
    font-size: 16px;
    font-weight: 500;
    color: var(--grey-clr);
    position: absolute;
    bottom: 12px;
    right: 16%;
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .inp-grp .tgl-unit {
    position: absolute;
    bottom: 12px;
    right: 5%;
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .inp-grp .tgl-unit>img{
    width: 20px;
    object-fit: contain;
    object-position: center;
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .inp-grp .ct-inp.get-radio-val {
    padding: 5px 45px 5px 70px;
    background-image: url(../images/change-record-type.png);
    background-position: 95% 50%;
    background-size: 25px;
    background-repeat: no-repeat;
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .packaging-slip-fields {
    margin: 8px 0 8px 0;
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .inp-grp .ct-lbl {
    font-size: 16px;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--black-clr-1);
    margin: 0 0 8px 0;
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .inp-grp .ct-lbl abbr {
    color: var(--mid-clr);
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .inp-grp .rd-lbl {
    position: absolute;
    top: 12px;
    left: 14.5px;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    color: var(--black-clr-1);
    margin: 0;
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .inp-grp .rd-lbl abbr {
    color: var(--mid-clr);
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .inp-grp .ct-inp {
    height: 48px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid var(--grey-clr-6);
    padding: 5px 14.5px;
    font-size: 16px;
    color: var(--black-clr);
    font-weight: 400;
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .inp-grp .ct-inp[type="date"]::-webkit-calendar-picker-indicator {
    background-image: url(../images/calendar_month.png);
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .inp-grp .ct-inp[type="time"]::-webkit-calendar-picker-indicator {
    background-image: url(../images/pace.png);
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .inp-grp .ct-inp::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: var(--grey-clr-6);
    font-size: 16px;
        font-weight: 400;
}

.pickup-area .pickup-main .pickup-det-card .mid-det-area .inp-grp .ct-inp::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--grey-clr-6);
    font-size: 16px;
        font-weight: 400;
}

.pickup-area .pickup-main .pickup-det-card .mid-det-area .inp-grp .ct-inp:-ms-input-placeholder {
    /* IE 10+ */
    color: var(--grey-clr-6);
    font-size: 16px;
        font-weight: 400;
}

.pickup-area .pickup-main .pickup-det-card .mid-det-area .inp-grp .ct-inp:-moz-placeholder {
    /* Firefox 18- */
    color: var(--grey-clr-6);
    font-size: 16px;
    font-weight: 400;
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .head {
    margin: 8px 0 20px 0;
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .head h6 {
    font-size: 16px;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--black-clr-1);
    margin: 0 0 4px 0;
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .head p {
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-clr);
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .head p>b {
    color: var(--black-clr);
}

.pickup-area .pickup-main .pickup-det-card .mid-det-area .ct-radio {
    padding: 11px;
    border: 1px solid var(--grey-clr-6);
    border-radius: 5px;
    min-height: fit-content;
    margin: 0 0 16px 0;
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .ct-radio.checked {
    border: 1px solid var(--prim-clr);
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .ct-radio:not(:last-child) {
    margin: 0 16px 16px 0;
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .ct-radio .form-check-input {
    float: none;
    margin: 0;
    height: 20px;
    width: 20px;
    border: 2px solid var(--grey-clr);
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .ct-radio .form-check-input[type="radio"]:checked {
    --bs-form-check-bg-image: url(../images/radio_button_checked.png);
    border: none;
    background-color: var(--white-bg);
}

.pickup-area .pickup-main .pickup-det-card .mid-det-area .ct-radio .form-check-label {
    font-size: 16px;
    color: var(--black-clr-1);
    font-weight: 400;
    text-transform: capitalize;
    margin: 0 0 0 8px;
}

.pickup-area .pickup-main .pickup-det-card .mid-det-area .total-area .grand-total,.pickup-area .pickup-main .pickup-det-card .mid-det-area .total-area .total-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .total-area .grand-total h6,.pickup-area .pickup-main .pickup-det-card .mid-det-area .total-area .grand-total span {
    font-size: 16px;
    color: var(--black-clr-1);
    font-weight: 700;
    text-transform: capitalize;
}
.pickup-area .pickup-main .pickup-det-card .mid-det-area .total-area .grand-total span {
    font-weight: 400;
}

.pickup-area .pickup-main .pickup-det-card .mid-det-area .total-area .total-value h6,.pickup-area .pickup-main .pickup-det-card .mid-det-area .total-area .total-value span {
    font-size: 16px;
    color: var(--prim-clr);
    font-weight: 700;
    text-transform: capitalize;
}


.pickup-area .pickup-main .pickup-ref-card {
    border: 1px solid var(--grey-clr-4);
    border-radius: 20px;
    margin: 0 0 10px 0;
    padding: 32px;
}

.pickup-area .pickup-main .pickup-ref-card .top-ref-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 0 20px 0;
}
.pickup-area .pickup-main .pickup-ref-card .top-ref-area .head {
    margin: 0 0 4px 0;
}
.pickup-area .pickup-main .pickup-ref-card .top-ref-area .head h6 {
    font-size: 20px;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--black-clr-1);
    margin: 0 0 8px 0;
}
.pickup-area .pickup-main .pickup-ref-card .top-ref-area .head p {
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-clr);
}
.pickup-area .pickup-main .pickup-ref-card .mid-ref-area {

}
.pickup-area .pickup-main .pickup-ref-card .mid-ref-area .action-btn {

}

.pickup-area .pickup-main .pickup-ref-card .mid-ref-area .action-btn .ct-btn {
    background: var(--grey-clr-5);
    border-radius: 5px;
    padding: 8px;
    height: 48px;
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    color: var(--black-clr);
    text-transform: capitalize;
    display: inline-flex;
    align-items: center;
    justify-content: center;
 }
 .pickup-area .pickup-main .pickup-ref-card .mid-ref-area .action-btn .ct-btn:not(:last-child) {
     margin: 0 8px 0 0;
 }
 .pickup-area .pickup-main .pickup-ref-card .mid-ref-area .action-btn .ct-btn .icn {
     font-size: 24px;
     margin: 0 8px 0 0;
 }
 .pickup-area .pickup-main .pickup-ref-card .mid-ref-area .action-btn .ct-btn .share-icn {
     font-variation-settings:
     'FILL' 1,
     'wght' 400
 }
.pickup-area .pickup-main .pickup-ref-card .mid-ref-area .desc {
    margin: 0 0 16px 0;
}
.pickup-area .pickup-main .pickup-ref-card .mid-ref-area .desc h6 {
    font-size: 16px;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--black-clr-1);
    margin: 0 0 4px 0;
}
.pickup-area .pickup-main .pickup-ref-card .mid-ref-area .desc p {
    display: inline-flex;
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-clr);
}

.pickup-area .pickup-main .order-main {
    border: 1px solid var(--grey-clr-3);
    border-radius: 20px;
    margin: 0 0 20px 0;
}

.pickup-area .pickup-main .order-main .order-top {
    padding: 32px;
}
.pickup-area .pickup-main .order-main .order-top .date-area {
    margin: 0 0 24px 0;
}
.pickup-area .pickup-main .order-main .order-top .date-area .desc {
    text-align: right;
}
.pickup-area .pickup-main .order-main .order-top .date-area .desc h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}
.pickup-area .pickup-main .order-main .order-top .date-area .desc ul {

}
.pickup-area .pickup-main .order-main .order-top .date-area .desc ul li {
    font-size: 14px;
    font-weight: 400;
    color: var(--black-clr);
    text-transform: capitalize;
}
.pickup-area .pickup-main .order-main .order-top .date-area .desc ul li span {
    color: var(--grey-clr);
    text-transform: unset;
}
.pickup-area .pickup-main .order-main .order-top .date-area .desc small {
    color: var(--grey-clr);
    text-transform: capitalize;
}
.pickup-area .pickup-main .order-main .order-top .address .desc {
    margin: 0 0 24px 0;
}
.pickup-area .pickup-main .order-main .order-top .address .desc h6 {
    font-size: 16px;
    font-weight: 500;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}
.pickup-area .pickup-main .order-main .order-top .address .desc p {
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-clr);
    line-height: auto;
}
.pickup-area .pickup-main .order-main .order-top .other-details .desc {
    margin: 0 0 16px 0;
}
.pickup-area .pickup-main .order-main .order-top .other-details .desc h6 {
    font-size: 16px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}
.pickup-area .pickup-main .order-main .order-top .other-details .desc p {
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-clr);
    line-height: auto;
}
.pickup-area .pickup-main .order-main .order-mid {
    margin: 8px 0 0 0;
    padding: 0 32px 32px 32px;
}
.pickup-area .pickup-main .order-main .order-mid .ct-table .table thead {
    vertical-align: baseline;
}
.pickup-area .pickup-main .order-main .order-mid .ct-table .table thead tr {

}
.pickup-area .pickup-main .order-main .order-mid .ct-table thead tr th {
    background: var(--lt-grey-bg-2);
    font-size: 14px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
    line-height: normal;
}
.pickup-area .pickup-main .order-main .order-mid .ct-table tbody {
    border-bottom: 1px dashed var(--grey-clr-7);
}
.pickup-area .pickup-main .order-main .order-mid .ct-table tbody tr {

}
.pickup-area .pickup-main .order-main .order-mid .ct-table tbody tr td {
    font-size: 14px;
    font-weight: 400;
    color: var(--black-clr-1);
    text-transform: capitalize;
    padding: 16px 8px;
}
.pickup-area .pickup-main .order-main .order-mid .ct-table tfoot {

}
.pickup-area .pickup-main .order-main .order-mid .ct-table tfoot tr {

}
.pickup-area .pickup-main .order-main .order-mid .ct-table tfoot tr td {
    padding: 16px 12px;
}
.pickup-area .pickup-main .order-main .order-mid .ct-table tfoot tr td:first-child {
    font-size: 16px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
}
.pickup-area .pickup-main .order-main .order-mid .ct-table tfoot tr td:last-child {
    font-size: 16px;
    font-weight: 400;
    color: var(--black-clr-1);
    text-align: right;
}
.pickup-area .pickup-main .order-main .order-mid .shipment-detail {
}
.pickup-area .pickup-main .order-main .order-mid .shipment-detail .desc {
    margin: 0 0 16px 0;
}
.pickup-area .pickup-main .order-main .order-mid .shipment-detail .desc h6 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
}
.pickup-area .pickup-main .order-main .order-mid .shipment-detail .desc p {
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-clr);
    text-transform: capitalize;
    line-height: 24px;
}
.pickup-area .pickup-main .order-main .order-mid .signature-area .signature-main .thumb {
    margin: 0 auto;
    display: block;
}
.pickup-area .pickup-main .order-main .order-mid .signature-area .signature-main .label {
    margin: 12px 0 0 0;
    padding: 8px 0 0 0;
    border-top: 1px solid var(--black-clr-1);
}
.pickup-area .pickup-main .order-main .order-mid .signature-area .signature-main .label span {
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    color: var(--black-clr-1);
    text-align: center;
    display: block;
}

.pickup-area .pickup-main .req-detail-main {

}
.pickup-area .pickup-main .req-detail-main>.row>.col-12:first-child {
    border-right: 1px solid var(--grey-clr-3);
}

.pickup-area .pickup-main .req-detail-main .ct-row {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.pickup-area .pickup-main .req-detail-main .ct-col-top {
    padding: 0 24px;
}
.pickup-area .pickup-main .req-detail-main .payment-details {
    margin: 24px 0 0 0;
}

.pickup-area .pickup-main .req-detail-main .payment-details .desc {
    margin: 0 0 24px 0;
}
.pickup-area .pickup-main .req-detail-main .payment-details .desc h6 {
    font-weight: 700;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}

.pickup-area .pickup-main .req-detail-main .payment-details .desc p {
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
}
.pickup-area .pickup-main .req-detail-main .payment-details .desc a {
    color: var(--mid-clr);
    font-weight: 500;
    font-size: 16px;
}

.pickup-area .pickup-main .req-detail-main .desc-area .view-toggle {
    font-weight: 500;
    font-size: 16px;
    color: var(--prim-clr);
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 0 20px 0;
}

.pickup-area .pickup-main .req-detail-main .desc-area .multi-img {
    margin: 0 0 16px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.pickup-area .pickup-main .req-detail-main .desc-area .multi-img .img-main {
    margin: 0 16px 5px 0;
}
.pickup-area .pickup-main .req-detail-main .desc-area .multi-img .thumb {
    width: 100%;
    border-radius: 5px;
    height: 83px;
    object-fit: cover;
    object-position: center;
    display: block;
}
.pickup-area .pickup-main .req-detail-main .desc-area .desc-item {
    margin: 0 0 20px 0;
}
.pickup-area .pickup-main .req-detail-main .desc-area .desc-item h6 {
    font-weight: 500;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 8px 0;
}
.pickup-area .pickup-main .req-detail-main .desc-area .desc-item p {
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
    line-height: 22px;
}

.pickup-area .pickup-main .req-detail-main .total-value-area {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;
    background: var(--lt-grey-bg-2);
    padding: 24px;
}

.pickup-area .pickup-main .req-detail-main .total-value-area h5 {
    font-weight: 700;
    font-size: 16px;
    color: var(--black-clr-1);
    text-transform: capitalize;
}

.pickup-area .pickup-main .req-detail-main .total-value-area span {
    font-weight: 400;
    font-size: 16px;
    color: var(--black-clr-1);
}

.pickup-area .pickup-main .req-detail-main .grand-total-area {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;
    background: var(--prim-bg);
    padding: 24px;
}

.pickup-area .pickup-main .req-detail-main .grand-total-area h5 {
    font-weight: 700;
    font-size: 16px;
    color: var(--white-clr);
    text-transform: capitalize;
}

.pickup-area .pickup-main .req-detail-main .grand-total-area span {
    font-weight: 400;
    font-size: 16px;
    color: var(--white-clr);
}

/* topbar poreq start */
.po-req-top-bar {
    border-bottom: 1px solid var(--grey-clr-3);
    padding: 8px 0 0 0;
}

.po-req-top-bar .bar-inner {
    padding: 0 80px 0 80px;
}
.po-req-top-bar .bar-inner .head {
    text-align: right;
}
.po-req-top-bar .bar-inner .head h6 {
    font-size: 20px;
    font-weight: 700;
    color: var(--black-clr-1);
    text-transform: capitalize;
    margin: 0 0 4px 0;
}
.po-req-top-bar .bar-inner .head p {
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
}
.po-req-top-bar .bar-inner .badges {
    text-align: right;
}
.po-req-top-bar .bar-inner .badges .badge-wait {
    padding: 7.5px 11.5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--dk-yellow);
    text-transform: capitalize;
    background: var(--lt-yellow);
    display: inline-block;
    margin: 8px 0;
}

.po-req-top-bar .bar-inner .nav-pills {
    margin: 32px 0 0 0;
}
.po-req-top-bar .bar-inner .nav-pills .nav-item {

}
.po-req-top-bar .bar-inner .nav-pills .nav-item .nav-link {
    background: var(--white-bg);
    border-radius: 0;
    margin: 0;
    padding: 12.5px 24px;
    font-weight: 400;
    font-size: 16px;
    color: var(--grey-clr);
    text-transform: capitalize;
}
.po-req-top-bar .bar-inner .nav-pills .nav-item .nav-link.active {
    background: var(--white-bg);
    color: var(--prim-clr);
    font-weight: 500;
    border-bottom: 2px solid var(--prim-clr);
}
.po-req-top-bar .bar-inner .nav-pills .nav-item .nav-link:hover {
    color: var(--prim-clr);
}
/* topbar poreq close */

/********************* pickup-area styles close *********************/





@media only screen and (min-width: 1600px) and (max-width: 1920px) {}

@media only screen and (min-width: 1445px) and (max-width: 1599px) {}

@media only screen and (min-width: 1400px) and (max-width: 1444px) {}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {}

@media only screen and (min-width: 992px) and (max-width: 1199px) {}

@media only screen and (min-width: 768px) and (max-width: 991px) {

    /* sec-main .inner-area 768 to 991 start */
    .sec-main .inner-area {
        padding: 0 20px 20px 20px;
    }
    .sec-main.full-width .inner-area {
        padding: 0 20px 20px 20px;
    }

    .sec-main .main-top-bar .bar-inner {
        padding: 0 0 20px 20px;
    }
    .sec-main.full-width .main-top-bar .bar-inner {
        padding: 0 20px 0 20px;
    }

    /* sec-main .inner-area 768 to 991 close */

    /* sec-login-sign 768 to 991 start */
    .sec-login-sign {
        overflow-x: hidden;
        overflow-y: scroll;
        height: calc(100% - 0px);
    }

    .ct-height {
        height: auto;
    }

    .sec-login-sign .login-main {
        height: auto;
        margin: 20px 0;
    }

    .sec-login-sign .fix-desc {
        height: auto;
    }

    .sec-login-sign .log-sign-slider {
        height: auto;
    }

    .sec-login-sign .ct-account-main {
        height: auto;
        padding: 30px 0;
    }

    /* sec-login-sign 768 to 991 close */

    /* reset-main 768 to 991 close */
    .sec-login-sign .reset-main {
        height: auto;
        margin: 20px 0;
    }

    .sec-login-sign .reset-main .mid-area .reset-form .input-main {
        margin: 0 0 20px 0;
    }

    /* reset-main 768 to 991 close */

    /* .chat-main  768 to 991 start */
    .chat-main .chat-area {
        padding: 0 20px 0 20px;
    }

    .chat-main .chat-btm-bar .bar-inner {
        padding: 0 10px 0 10px;
    }

    /* .chat-main  768 to 991    close */
}

@media only screen and (min-width: 576px) and (max-width: 767px) {

    /* sec-main .inner-area 576 to 767 start */
    .sec-main .inner-area {
        padding: 0 20px 20px 20px;
    }

    .sec-main.full-width .inner-area {
        padding: 0 20px 20px 20px;
    }

    .hv-100 {
        height: auto;
        padding: 100px 0;
    }

    .sec-main .main-top-bar .bar-inner {
        padding: 0 0 20px 20px;
    }
    .sec-main.full-width .main-top-bar .bar-inner {
        padding: 0 20px 0 20px;
    }

    /* sec-main .inner-area 576 to 767 close */
    /* sec-login-sign 576 to 767 start */
    .sec-login-sign {
        overflow-x: hidden;
        overflow-y: scroll;
        height: calc(100% - 0px);
    }

    .ct-height {
        height: auto;
    }

    .sec-login-sign .login-main {
        height: auto;
        margin: 20px 0;
    }

    .sec-login-sign .fix-desc {
        height: auto;
    }

    .sec-login-sign .log-sign-slider {
        height: auto;
    }

    .sec-login-sign .ct-account-main {
        height: auto;
        padding: 30px 0;
    }

    /* sec-login-sign 576 to 767 close */

    /* reset-main 576 to 767 close */
    .sec-login-sign .reset-main {
        height: auto;
        margin: 20px 0;
    }

    .sec-login-sign .reset-main .mid-area .reset-form .input-main {
        margin: 0 0 20px 0;
    }

    /* reset-main 576 to 767 close */

    /* .chat-main  576 to 767 start */
    .chat-main .chat-area {
        padding: 0 20px 0 20px;
    }

    .chat-main .chat-btm-bar .bar-inner {
        padding: 0 10px 0 10px;
    }

    /* .chat-main  576 to 767 close */

        /* .sidebar-right  576 to 767 close */
        .sidebar-right {
            min-width: auto;
        }
        .sidebar-right .side-bar-toggle {
            left: auto;
            top: 30%;
            clip-path: polygon(0 0, 100% 15%, 100% 85%, 0% 100%);
        }
        /* .sidebar-right  576 to 767 close */
}

@media only screen and (min-width: 300px) and (max-width: 575px) {

    /* sec-main .inner-area 300 to 575 start */
    .sec-main .inner-area {
        padding: 0 0 20px 20px;
    }
    .sec-main.full-width .inner-area {
        padding: 0 20px 20px 20px;
    }

    .hv-100 {
        height: auto;
        padding: 100px 0;
    }

    .sec-main .main-top-bar .bar-inner {
        padding: 0 0 20px 20px;
    }

    .sec-main.full-width .main-top-bar .bar-inner {
        padding: 0 20px 0 20px;
    }

    .home-area .slider-area .today-picks-slider {
        position: relative;
    }

    .home-area .slider-area .today-picks-slider .owl-nav {
        position: relative;
        top: auto;
        right: auto;
        margin: 0 auto;
    }

    /* sec-main .inner-area 300 to 575 close */
    /* sec-login-sign 300 to 575 start */
    .sec-login-sign {
        overflow-x: hidden;
        overflow-y: scroll;
        height: calc(100% - 0px);
    }

    .ct-height {
        height: auto;
    }

    .sec-login-sign .login-main {
        height: auto;
        margin: 20px 0;
    }

    .sec-login-sign .fix-desc {
        height: auto;
    }

    .sec-login-sign .log-sign-slider {
        height: auto;
    }

    .sec-login-sign .ct-account-main {
        height: auto;
        padding: 30px 0;
    }

    /* sec-login-sign 300 to 575 close */

    /* reset-main 300 to 575 close */
    .sec-login-sign .reset-main {
        height: auto;
        margin: 20px 0;
    }

    .sec-login-sign .reset-main .mid-area .reset-form .input-main {
        margin: 0 0 20px 0;
    }

    /* reset-main 300 to 575 close */

    /* .chat-main  300 to 575 start */
    .chat-main .chat-area {
        padding: 0 20px 0 20px;
    }

    .chat-main .chat-btm-bar .bar-inner {
        padding: 0 10px 0 10px;
    }

    .chat-main .chat-sidebar .search-area .search-results .search-single .desc.multi-msg::after {
        top: 0;
        right: 99%;
        bottom: auto;
    }
    .chat-main .chat-sidebar .search-area .search-results .search-single .desc .ct-flex {
        flex-direction: column-reverse;
    }

    /* .chat-main  300 to 575 close */

    /* .sidebar-right  300 to 575 close */
    .sidebar-right {
        min-width: 100%;
        max-width: 100%;
    }
    .sidebar-right .side-bar-toggle {
        left: auto;
        top: 30%;
        clip-path: polygon(0 0, 100% 15%, 100% 85%, 0% 100%);
    }
    /* .sidebar-right  300 to 575 close */
}