@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
    padding: 0;
}

:root {
    /* --theme-primary-color: #bdf200;
    --theme-secondry-color: #000000; */
    --theme-primary-color: #bdf200;
    --theme-secondry-color: #03002b;
    --color-0f3148: #0F3148;
    --color-light-blue: #0190FF;
    --color-light-orange: #F29850;
    --color-yellow: #F9CE41;
    --color-gray: #99A7B0;
    --color-E9D79D: #E9D79D;
    --color-B58DFB: #B58DFB;
    --color-eeeeee50: #eeeeee50;
    --theme-default-color: #fff;
    --summary-field-bg: #eaeef1;
    --unnamed-color-0ecb86: #0ecb86;
    --unnamed-bg-dff3ec: #dff3ec;
    --unnamed-color-eeeeee: #EEEEEE;
    --unnamed-color-f2f9ff: #f2f9ff;
    --unnamed-color-eaeef1: #EAEEF1;
    --color-f2f5f7: #f2f5f7;
    --color-ef495f1f: #ef495f1f;
    --unnamed-color-000: #000;
    --font-size-38: 38px;
    --font-size-28: 28px;
    --font-size-22: 22px;
    --font-size-20: 20px;
    --font-size-12: 12px;
    --font-size-13: 13px;
    --font-size-14: 14px;
    --font-size-15: 15px;
    --font-size-16: 16px;
    --font-size-18: 18px;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-normal: 400;
    --letter-spacing: 0px;
    --line-spacing-28: 28px;
    --character-space-0-14: 0.14px;
    --in-progress-color: #0ecb86;
    --revision-color: #f29850;
    --queue-color: #f9ce41;
    --cancle-color: #ef495f;
    --review-color: #0190ff;
    --draft-color: #99a7b0;
    --hold-color: #0f3148;
    --unnamed-color-fff: #fff;
    --unnamed-color-f9ce41: #f9ce41;
    /*font waight*/
    --unnamed-font-weight-medium: 500;
    --border-radius-50: 50%;
    --border-radius-5: 5px;
    /*--theme-primary-color: #ff495f;*/
    /* --theme-secondry-color: #0f3148; */
    --color-light-blue: #0190ff;
    --color-light-orange: #f29850;
    --color-yellow: #f9ce41;
    --color-gray: #99a7b0;
    --color-ebf2f7: #ebf2f7;
    --color-0ecb86: #0ecb86;
    --bg-dff3ec: #dff3ec;
    --color-eeeeee: #eeeeee;
    --color-eeeeee50: #eeeeee50;
    --color-f2f9ff: #f2f9ff;
    --color-eaeef1: #eaeef1;
    --color-eaeef160: #eaeef160;
    --color-f7f3e5: #f7f3e5;
    --color-000: #000;
    --color-e7faf3: #e7faf3;
    --color-e6f4ff: #e6f4ff;
    --color-fef5ee: #fef5ee;
    --color-fefaec: #fefaec;
    --color-f1f1f17d: #f1f1f17d;
    --color-f1f1f126: #f1f1f126;
    --color-99a7b00f: #99a7b00f;
    --color-c7c7c7: #c7c7c7;
    --color-54545457: #54545457;
    --color-f0f2f4: #f0f2f4;
    --color-f1f1f124: #f1f1f124;
    --color-ffe2e6: #ffe2e6;
    --color-theme-bg: #f7f7f7;
    --color-fafbfb: #fafbfb;
    --color-f7fbff: #f7fbff;
    --color-f4f6f7: #f4f6f7;
    --color-fef7f1: #fef7f1;
    --color-f6f6f0: #f6f6f0;
    --color-0190ff21: #0190ff21;
    --color-222: #222;
    --color-ddd: #ddd;
    --color-607D8B: #607D8B;
    --color-ff9800: #ff9800;
    --color-f44336: #f44336;
    --color-0198ff: #0198ff;
    --color-58ba83: #58ba83;
    --color-7c7c7c: #7c7c7c;
    --color-2196F3: #2196F3;
    --color-0360a5: #0360a5;
    --color-08ca42: #08ca42;
    --color-808080: #808080;
    --color-8F8F8F: #8F8F8F;
    --color-0e0e0e: #0e0e0e;
    --color-081D31: #081D31;
    --color-1F1F70: #1F1F70;
    --color-16181b: #16181b;
    --color-757575: #757575;
    --color-e5f4ff: #e5f4ff;
    --color-f5f6f7: #f5f6f7;
    --color-b9b9b9: #b9b9b9;
    --color-a2b7c5: #a2b7c5;
    --color-F64E71: #F64E71;
    --color-FE635E: #FE635E;
    --color-2c3e50: #2c3e50;
    --color-ebebeb: #ebebeb;
    --color-f5f5f5: #f5f5f5;
    --color-dcdcdc: #dcdcdc;
    --color-d2d2d2: #d2d2d2;
    --color-0000: #0000;
    --color-666: #666;
    --color-333: #333;
    --color-737c82: #737c82;
    --font-size-38: 38px;
    --font-size-35: 35px;
    --font-size-34: 34px;
    --font-size-32: 32px;
    --font-size-30: 30px;
    --font-size-26: 26px;
    --font-size-27: 27px;
    --font-size-28: 28px;
    --font-size-22: 22px;
    --font-size-20: 20px;
    --font-size-12: 12px;
    --font-size-10: 10px;
    --font-size-13: 13px;
    --font-size-14: 14px;
    --font-size-15: 15px;
    --font-size-16: 16px;
    --font-size-17: 17px;
    --font-size-18: 18px;
    --font-size-10: 10px;
    --font-size-44: 44px;
    --font-size-50: 50px;
    --font-size-58: 58px;
    --font-size-40: 40px;
    --font-size-60: 60px;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-normal: 400;
    --letter-spacing: 0px;
    --line-height-74: 74px;
    --line-height-70: 70px;
    --line-height-64: 64px;
    --line-height-56: 56px;
    --line-height-50: 50px;
    --line-height-47: 47px;
    --line-height-40: 40px;
    --line-height-36: 36px;
    --line-height-34: 34px;
    --line-height-31: 31px;
    --line-height-30: 30px;
    --line-height-27: 27px;
    --line-height-25: 25px;
    --line-height-24: 24px;
    --line-height-22: 22px;
    --line-height-21: 21px;
    --line-height-20: 20px;
    --line-height-16: 16px;
    --line-height-12: 12px;
    --line-height-7: 7px;
    --line-spacing-28: 28px;
    --character-space-0-14: 0.14px;
    --in-progress-color: #0ecb86;
    --color-fff: #fff;
    /*font waight*/
    --border-radius-3: 3px;
    --border-radius-4: 4px;
    --border-radius-5: 5px;
    --border-radius-6: 6px;
    --border-radius-7: 7px;
    --border-radius-10: 10px;
    --border-radius-12: 12px;
    --border-radius-17: 17px;
    --border-radius-18: 18px;
    --border-radius-50: 50%;
    --border-radius-100: 100%;
    --border-radius-8: 8px;
    --border-radius-20: 20px;
    --border-radius-30: 30px;
    --border-radius-34: 34px;
    --border-radius-36: 36px;
    --border-radius-50x: 50px;
    --border-radius-54x: 54px;
    --color-70707024: #70707024;
}

body {
    padding: 0;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-medium);
    overflow-x: hidden;
}

button {
    border: none;
}


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

a,
a:hover {
    text-decoration: none;
}

.opacity-5 {
    opacity: .5;
}

.b-radius-5 {
    border-radius: var(--border-radius-5);
}

.b-radius-10 {
    border-radius: var(--border-radius-10);
}

.b-radius-8 {
    border-radius: var(--border-radius-8);
}

.border-eaeeff-1px {
    border: 1px solid var(--unnamed-color-eaeef1);
}

.font-medium {
    font-weight: var(--font-weight-medium);
}

.font-semibold {
    font-weight: var(--font-weight-semibold);
}

.font-normal {
    font-weight: var(--font-weight-normal);
}

.letter-spacing-0 {
    --letter-spacing: 0px;
}

.font-size-10 {
    font-size: var(--font-size-10);
}

.font-size-12 {
    font-size: var(--font-size-12);
}

.font-size-13 {
    font-size: var(--font-size-13);
}

.font-size-14 {
    font-size: var(--font-size-14);
}

.font-size-15 {
    font-size: var(--font-size-15);
}

.font-size-18 {
    font-size: var(--font-size-18);
}

.font-size-22 {
    font-size: var(--font-size-22);
}

.font-size-28 {
    font-size: var(--font-size-28);
}

.font-size-38 {
    font-size: var(--font-size-38);
}

.line-height-21 {
    line-height: var(--line-height-21);
}

.line-height-28 {
    line-height: var(--line-height-28);
}

.bg-color-default {
    background: var( --theme-default-color);
}

.bg-color-white {
    background: var(--theme-default-color);
}

.bg-color-red {
    background: var(--cancle-color);
}
.bg-color-red:hover {
	background: var(--cancle-color);
}

.bg-color-blue {
    background: var(--review-color);
}

.bg-color-green {
    background: var(--in-progress-color);
}

.bg-color-orange {
    background: var(--revision-color);
}

.bg-color-yellow {
    background: var(--queue-color);
}

.bg-color-gray {
    background: var(--draft-color);
}

.bg-color-light-gray {
    background: var(--unnamed-color-eaeef1);
}

.bg-color-dark {
    background: var(--hold-color);
}

.bg-secondry {
    background: var(--theme-secondry-color);
}

.color-primary {
    color: var(--theme-primary-color);
}

/* .color-secondry {
    color: var(--theme-secondry-color);
} */

.color-light-blue {
    color: var(--review-color);
}

.color-light-orange {
    color: var(--revision-color);
}

.color-green {
    color: var(--in-progress-color);
}

.color-yellow {
    color: var(--queue-color);
}

.color-white {
    color: var(--theme-default-color);
}

.color-dark {
    color: var(--hold-color);
}

.input-background {
    background: rgb(234 238 241 / 60%);
}

.color-gray {
    color: var(--draft-color);
}

.color-gray-dark {
    color: var(--gray-dark);
}

.bg-color-light-green {
    background: rgba(14, 203, 134, .1);
}

.bg-color-light-red {
    background: rgba(239, 73, 95, .1);
}

.bg-color-light-yellow {
    background: rgba(249, 206, 65, .1);
}

.mediam-font {
    font-weight: var(--unnamed-font-weight-medium);
}

.m0 {
    margin: 0px;
}

.mt-0 {
    margin-top: 0px;
}

.mb-50 {
    margin-bottom: 50px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-22 {
    margin-bottom: 22px;
}

.mb-35 {
    margin-bottom: 35px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mt-27 {
    margin-top: 27px;
}

.mt-15 {
    margin-top: 27px;
}

.ml-24 {
    margin-left: 24px;
}

.ml-15 {
    margin-left: 15px;
}

.px-41 {
    padding-left: 41px;
    padding-right: 41px;
    padding-bottom: 2px;
}

.btn.focus,
.btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0 #0000;
}

.pos-relative {
    position: relative;
}

.content-panel-span {
    border-radius: var(--border-radius-18);
    background: var(--theme-primary-color);
    margin-bottom: 19px;
    padding: 5px 48px;
}

.btn:hover {
    color: #fff;
    text-decoration: none;
}
.submit-dot-comment-js:hover {
    color: #bdf100;
    text-decoration: none;
    background: var(--color-000);
}


/*-------------------------------*/


/*       buttoncss        */


/*-------------------------------*/

.gz-status {
    font-size: var(--font-size-14);
    /*width: 80px;*/
    height: 28px;
    padding: 0 10px;
    text-decoration: none;
    text-align: center;
    line-height: var(--line-height-31);
    border-radius: var(--border-radius-5);
    display: inline-block;
    font-weight: var(--font-weight-medium);
}

.st-active,
.st-active:hover {
    color: var(--review-color);
    background: rgb(1 144 255 / 5%);
}

.st-in-queue,
.st-in-queue:hover {
    color: var(--revision-color);
    background: rgb(242 152 80 / 10%);
}

.gz-btn,
.gz-btn:hover {
    font-size: var(--font-size-15);
    color: var(--color-000);
    padding: 0 14px;
    border-radius: var(--border-radius-5);
    box-shadow: none;
    display: inline-block;
    text-align: center;
    height: 40px;
    line-height: var(--line-height-40);
    white-space: nowrap;
    margin: 5px;
    font-weight: 500;
}

.btn-lg,
.btn-lg:hover,
.btn-lg:focus {
    text-align: center;
    line-height: var(--line-height-50) !important;
    width: 144px !important;
    height: 50px !important;
}

a,
button:focus,
input:focus,
button {
    text-decoration: none;
    outline: none;
}

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

.custom-container {
    width: 100%;
    padding-right: 40px;
    padding-left: 40px;
    margin-right: auto;
    margin-left: auto;
}

.navbar .custom-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

#wrapper.toggled {
    padding-left: 230px;
}

#wrapper.hov-toggled {
    padding-left: 230px;
}

#sidebar-wrapper {
    z-index: 1000;
    left: 200px;
    width: 80px;
    height: 100%;
    margin-left: -200px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--theme-secondry-color);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#sidebar-wrapper::-webkit-scrollbar {
    display: none;
}

#wrapper.toggled #sidebar-wrapper {
    width: 230px;
}

#wrapper.hov-toggled #sidebar-wrapper {
    width: 230px;
}

.sidebar-nav-span {
    opacity: 0;
    transition: .76s all;
    white-space: nowrap;
}

#wrapper.toggled .sidebar-nav-span {
    opacity: 1;
}

#page-content-wrapper {
    width: 100%;
    background: var(--color-theme-bg);
    min-height: 100vh;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    /* overflow-y: auto; */
}

.bg-graylight {
    background: var(--color-theme-bg);
}

.reciever-inner_msg {
    display: flex;
}

.sender-inner_msg {
    display: flex;
}

.page-footer {
    margin-top: auto;
}


/*-------------------------------*/


/*     Sidebar nav styles        */


/*-------------------------------*/

#wrapper.toggled .full {
    display: block;
    margin: 15px auto 5px;
}

#wrapper.toggled .mini {
    display: none;
}

#wrapper .full {
    display: none;
}

.navbar {
    padding: 0;
}

#wrapper.toggled .sidebar-nav {
    width: 100%;
}

.sidebar-nav-li {
    position: relative;
    line-height: var(--line-height-20);
    display: inline-block;
    width: 100%;
}

.sidebar-nav-lia {
    color: #fff;
    padding: 12px 0px 12px 25px;
    display: flex;
    align-items: center;
    /* margin: 0 15px; */
}

.sidebar-nav-i {
    margin-right: 8px;
}


.sidebar-nav-lia:hover,
.sidebar-nav-lia:active,
.sidebar-nav-lia:focus,
.sidebar-nav-li.open .sidebar-nav-lia:hover,
.sidebar-nav-li.open .sidebar-nav-lia:active,
.sidebar-nav-li.open .sidebar-nav-lia:focus {
    color: var(--theme-primary-color);
    text-decoration: none;
    /* background-color: rgb(0 0 0 / 10%); */
    /* border-radius: var(--border-radius-4); */
}

.sidebar-nav-lia:hover .sidebar-nav-i,
.sidebar-nav-lia:active .sidebar-nav-i,
.sidebar-nav-lia:focus .sidebar-nav-i {
    color: var(--theme-primary-color);
}

.sidebar-header {
    text-align: center;
    font-size: var(--font-size-20);
    position: relative;
    width: 100%;
    display: inline-block;
    height: 110px;
    padding: 10px;
    padding-top: 0;
}

#wrapper.toggled .sidebar-header {
    margin-bottom: -6px;
}

.sidebar-branda {
    color: var(--color-ddd);
}

.sidebar-branda:hover {
    color: var(--color-fff);
    text-decoration: none;
}

#wrapper.toggled .hamburger {
    transform: rotateY(180deg);
}

.sidebar-nav .dropdown-menu {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    border-radius: 0;
    border: none;
    background-color: var(--color-222);
    box-shadow: none;
}


/*.dropdown i {
    cursor: pointer;
    color: var(--color-gray);
}*/

.dropdown-item {
    font-size: var(--font-size-14);
    color: var(--gray-dark);
    font-size: var(--font-size-14);
    padding: 0.50rem 0.5rem;
    margin: 0;
    display: flex;
}

.dropdown-item i {
    padding-right: 6px;
}

.navbar-header {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    padding: 1px 0px;
}

.navbar-header-h2 {
    margin-bottom: 0;
    font-size: var(--font-size-20);
    transition: 0.36s;
}

#wrapper.toggled .navbar-header-h2 {
    /*margin-left: 30px;*/
}

.navbar-header-h2spn {
    font-size: var(--font-size-18);
    color: var(--color-gray);
    margin-left: 10px;
    font-weight: var(--font-weight-normal);
}

#wrapper.toggled .btn-upgrade-sm {
    display: flex;
    align-items: center;
    background: #f5b307;
    font-weight: 300;
    justify-content: center;
    width: 144px;
    height: 34px;
    transition: 0.76s all;
    position: fixed;
    left: 41px;
    right: auto;
    bottom: 10px;
}

.navbar-inverse .sidebar-nav {
    margin-bottom: 100px;
}

#wrapper.toggled .upgrade-icon {
    background: transparent;
    padding: 0;
    color: var(--color-fff);
    font-size: var(--font-size-15);
    margin-right: 8px;
    transition: 0.36s all;
}

#wrapper.toggled .upgrade-text {
    color: var(--color-fff);
    font-size: var(--font-size-15);
    transition: 0.36s all;
}

#wrapper.toggled .btn-upgrade {
    display: flex;
    opacity: 1;
    /* transition: 0.76s; */
}

.approve-btn {
    background: var(--in-progress-color);
    color: var(--color-fff);
    font-weight: 500;
}

.upgrade-icon {
    background: #f5b307;
    border-radius: var(--border-radius-5);
    padding: 11px;
    color: var(--color-fff);
    font-size: var(--font-size-15);
}

.upgrade-icon-text {
    color: var(--color-gray);
    font-size: var(--font-size-10);
}

.hamburger {
    position: absolute;
    z-index: 999;
    display: inline-block;
    width: 14px;
    height: 14px;
    background: transparent;
    border: none;
    top: 39%;
    left: 15px;
}

.hamburger .hamb-top,
.hamburger .hamb-middle,
.hamburger .hamb-bottom {
    position: absolute;
    left: 0;
    height: 2px;
    background-color: var(--color-gray);
}

.hamburger .hamb-top {
    top: 0px;
    width: 9px;
    -webkit-transition: all .35s ease-in-out;
}

.hamburger .hamb-middle {
    top: 6px;
    width: 100%;
}

.hamburger .hamb-bottom {
    bottom: 0px;
    width: 9px;
    -webkit-transition: all .35s ease-in-out;
}

.header-blog {
    margin-bottom: 48px;
    margin-top: 16px;
}

.pro-circle-img-xxs {
    width: 38px;
    height: 38px;
    border-radius: var(--border-radius-50);
    line-height: var(--line-height-36);
    text-align: center;
    overflow: hidden;
    position: relative;
    margin: 0;
    border: 2px solid var(--color-f0f2f4);
}

.pro-circle-img-xxs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.list-setting .dropdown-menu {
    right: 0px;
    margin-top: 15px;
    left: auto;
    padding: 0;
    border: 0;
    -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .20);
    z-index: 9999;
    background-color: var(--color-fff);
    border-radius: 0;
    min-width: 250px;
}

.right-action-ul {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
}

.right-action-li {
    margin: 10px;
    position: relative;
}

.right-action-li:last-child {
    margin-right: 0px;
}

.right-action i {
    vertical-align: middle;
}

.head-notifications {
    font-size: var(--font-size-16);
    margin: 0;
    background: #03002b;
    color: var(--color-fff);
    border-radius: .25rem .25rem 0 0;
    padding: 12px;
}

.mail_text {
    font-size: var(--font-size-13);
    display: block;
    font-weight: var(--font-weight-normal);
    letter-spacing: 0.5px;
    margin-top: 5px;
    line-height: 1;
}

.list-header-blogli {
    display: inline-block;
    vertical-align: middle;
    padding-bottom: 6px;
    padding-right: 6px;
}


/* .list-header-blog>li a {
    color: var(--color-gray);
    font-size: 14px;
    border: 0;
    text-decoration: none;
    margin-right: 7px;
    font-weight: 500;
    padding: 0 14px 0 0;
    border-radius: 0;
    display: inline-block;
    text-transform: uppercase;
} */

.list-header-blogli.active .list-header-bloglia {
    color: var(--theme-primary-color);
    background: var(--theme-secondry-color);
    border-radius: 3px;
    text-align: center;
    padding: 4px 6px;
}

.badge-danger {
    text-align: center;
    font-size: var(--font-size-12);
    background: var(--theme-primary-color);
    line-height: var(--line-height-20);
    font-weight: var(--font-weight-medium);
    padding: 0 4px;
    color: var(--theme-secondry-color);
}
.list-header-blogli.active .badge-danger {
    font-weight: var(--font-weight-semibold);
}

.list-header-blogli.active .list-header-bloglia span {
    display: inline-block;
}

.new_labelwdth {
    width: calc(100% - 41px);
}

.search-box.magic_search {
    right: 0;
    width: 100%;
}

.search_text {
    opacity: 0;
    position: absolute;
    z-index: 999;
    top: -8px;
    bottom: 0;
    height: 45px;
    border-radius: var(--border-radius-30);
    cursor: pointer;
    /* transition: .26s all; */
    box-shadow: 0 0 6px rgb(0 0 0 / 13%);
}

.search-btn {
    width: 45px;
    background: transparent;
    color: var(--color-gray);
    margin-top: 2px;
}

.search-box.magic_search .search-btn{
    margin-top: 7px;;
}

.list-grid .view_class {
    display: none;
}

.list-grid .view_class.active {
    display: block;
}

.search-box.magic_search .search_text {
    opacity: 1;
    height: 100%;
    border: 0;
    padding: 7px 15px;
    right: 0;
    height: 45px;
    font-size: var(--font-size-14);
}

.list-grid a {
    color: var(--color-gray);
}

.right-filtration {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.search-first {
    flex: 1;
    margin-right: 2%;
    line-height: var(--line-height-12);
    z-index: 9;
}

.filter-file {
    margin-right: 3%;
    line-height: var(--line-height-12);
    position: relative;
}

.right-filtration .list-grid {
    margin-right: 5%;
    line-height: var(--line-height-12);
}

.client-manage .list-grid {
    margin-right: 0%;
    line-height: var(--line-height-12);
}

.search-box {
    width: 60px;
    position: relative;
    margin-left: auto;
}

.grid-box {
    box-shadow: 0px 5px 20px rgb(153 167 176 / 6%);
    border-radius: var(--border-radius-5);
    background: var(--color-fff);
    padding: 20px 10px;
    /* height: 100%; */
}

.top-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-img {
    text-align: center;
    /* margin-bottom: 30px;
    margin-top: 30px; */
}

.product_before_content {
    font-size: 18px;
    color: var(--color-0f3148);
    text-align: center;
}

.img-titleh3 {
    font-size: 18px;
    color: var(--color-0f3148);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* text-align: center; */
}

.grid-box-p,
.sche-psec {
    font-size: 12px;
    color: #838688;
    text-align: center;
    margin-bottom: 0;
}

.grid-box-p i,
.sche-psec i {
    margin-right: 5px;
    font-size: 14px;
    transform: translateY(2px);
}

.three-togle {
    color: var(--color-gray);
    font-size: 18px;
}

.right-action-li .dropdown-menu {
    right: 0px;
    left: auto;
    padding: 0;
    border: 0;
    -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .20);
    z-index: 9999;
    background-color: var(--color-fff);
    min-width: 250px;
    max-height: 299px;
    min-height: 40px;
    overflow: auto;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}


/* Track */

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


/* Handle */

::-webkit-scrollbar-thumb {
    background: var(--theme-secondry-color);
    border-radius: 10px;
}

.right-action-li .dropdown-menu li a {
    padding: 10px 0px;
    font-weight: var(--font-weight-medium);
    color: var(--dark-gray);
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.right-action-li .dropdown-menu li a i {
    padding-right: 10px;
}

.right-action-li .dropdown-menu li {
    padding: 2px 12px;
    border-bottom: 1px solid #dde3e7;
}

.right-action-li .dropdown-menu li:hover {
    background: #dadada;
}

.right-action-li .dropdown>a {
    color: var(--color-gray);
}

.white-list {
    background: var(--color-fff);
    padding: 15px;
    box-shadow: 0px 5px 20px #99A7B00F;
    border-radius: var(--border-radius-10);
    width: 100%;
    font-size: 14px;
    color: var(--color-gray);
    margin-bottom: 15px;
    position: relative;
}

.added-byimg,
.shared-byimg {
    width: 27px;
    height: 27px;
    object-fit: cover;
}

.three-tod a.three-togle {
    display: block;
    line-height: var(--line-height-7);
}

.productimg {
    width: 70px;
    height: 70px;
    object-fit: cover;
    margin-right: 20px;
}

.w-20 {
    width: 64px;
}

.white-list ul li {
    text-align: left;
}

.coments-by_before {
    color: var(--queue-color);
    display: flex;
    align-items: center;
}

.coments-by_beforespn {
    background: rgb(249 206 65 / 20%);
    border-radius: var(--border-radius-100);
    width: 18px;
    height: 18px;
    text-align: center;
    margin-left: 0;
    font-size: 12px;
    position: absolute;
    bottom: 18px;
    left: 17px;
}

.product-grid-show,
.product-list-show {
    display: none;
}

.product-grid-show.active,
.product-list-show.active {
    display: block;
}

.inque-li {
    width: 100%;
}

.msg-toggle {
    display: flex;
}

.msg-toggle .coments-by {
    margin-right: 15px;
}

.img-name-title {
    display: flex;
    align-items: center;
}

.flex-show {
    display: flex;
    align-items: center;
}

.spare-dot {
    display: flex;
    justify-content: space-between;
}

.th-rows>div:first-child {
    /*padding-left: 50px;*/
}

.th-rows.row {
    padding: 0 0px;
    margin-bottom: 20px;
    opacity: 0.5;
    color: var(--color-gray);
}

.th-rows.inque {
    margin-bottom: 15px;
}

.copy-right {
    color: var(--color-gray);
    margin: 40px auto;
}

.zoom_img {
    position: relative;
}

.comnt_point {
    /* width: 30px;
    height: 30px; */
    float: left;
    margin-right: 9px;
}


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

          Add Project Page

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

.blue-popup-header {
    background: var(--hold-color);
    color: var(--color-fff);
    margin-bottom: 50px;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 999;
}

.margin_top_add {
    padding-top: 90px !important;
}

.close-info {
    display: flex;
}

.blue-popup-header .flex-show {
    justify-content: space-between;
}

.h2-bluepop {
    font-size: var(--font-size-20);
    margin-top: 6px;
}

.close-info-a {
    color: var(--color-fff);
    margin: 15px;
    display: inline-block;
}

.theme-heading {
    font-size: var(--font-size-28);
    text-transform: capitalize;
    font-weight: var(--font-weight-medium);
    margin-bottom: 8px;
}

.theme-heading-2 {
    font-size: var(--font-size-22);
    text-transform: capitalize;
    font-weight: var(--font-weight-medium);
}

.popup-formlbl {
    font-size: var(--font-size-18);
    color: var(--color-737c82);
    font-weight: var(--font-weight-medium);
}

.gray-label {
    font-size: var(--font-size-18);
    color: var(--color-gray);
    font-weight: var(--font-weight-medium);
}

.popup-form .form-control {
    height: auto;
    max-height: 185px;
}

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

.btn-listing {
    position: relative;
}

.btn-listing-li {
    position: relative;
    border: 1px solid var(--unnamed-color-eaeef1);
    border-radius: var(--border-radius-5);
    background: var(--theme-default-color);
    display: inline-block;
    margin: 7px 15px 7px 0;
}

.btn-listing-li.active i {
    display: none;
}

.btn-listing-li.active i:last-child {
    display: block;
}


/* .btn-listing input[type="radio"]:checked + label{
    background: var(--review-color);
    color: #fff;
} */

.btn-listing input[type="checkbox"]:checked+label {
    background: var(--review-color);
    color: var(--color-fff);
}

.btn-listing-li i:last-child {
    display: none;
}

.steps-count li.active a {
    color: var(--queue-color);
}

.btn-listing-li a i {
    margin-right: 5px;
    font-size: var(--font-size-16);
}

.steps-count {
    position: sticky;
    top: 0;
    border: 0;
    margin-top: 70px;
}

.steps-count li {
    width: 100%;
    margin: 20px 0;
    position: relative;
    padding: 0 20px;
}

.steps-count li.active::before {
    content: '';
    content: '';
    position: absolute;
    background: var(--color-yellow);
    width: 14px;
    height: 14px;
    border-radius: var(--border-radius-100);
    top: 2px;
    left: -7px;
    z-index: 9;
    border: 3px solid var(--color-fff);
}

.steps-count li a {
    display: block;
    color: var(--color-gray);
}

.steps-count li a::before {
    width: 2px;
    height: 61px;
    background: var(--unnamed-color-eaeef1);
    content: "";
    position: absolute;
    left: 0;
}

.steps-count li a::after {
    content: '';
    position: absolute;
    background: var(--unnamed-color-eaeef1);
    width: 18px;
    height: 18px;
    border-radius: var(--border-radius-100);
    top: 0;
    left: -9px;
}

.steps-count li a.active::before {
    background: var(--color-yellow);
}

.steps-count li a.active::after {
    background: var(--color-yellow);
}

.steps-count li:last-child a::before {
    display: none;
}

.outer-context {
    max-width: 700px;
    margin: auto;
    padding: 0 15px;
}

.cat-img-listingli {
    display: inline-block;
    /* width: 122px; */
    margin-right: 8px;
}

.bdr-top-wh {
    border-top: 1px solid #fff;
}

.categories-selection {
    height: 100%;
    position: relative;
    display: flex;
    margin: 15px 0;
}

.categories-selection input[type="radio"] {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    margin: 0;
    cursor: pointer;
    opacity: 0;
}

.categories-selection input[type="radio"]:checked+.sub_catg_img .wiz_cat_check {
    opacity: 1;
    color: var(--review-color);
}

.categories-selection input[type="radio"]:checked+.sub_catg_img {
    border-color: var(--review-color);
}

.categories-selection input[type="radio"]:checked+.sub_catg_imgspn {
    color: var(--review-color);
}


/*CSS for checkbox*/

.categories-selection input[type="checkbox"] {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    margin: 0;
    cursor: pointer;
    opacity: 0;
}

.categories-selection input[type="checkbox"]:checked+.sub_catg_img .wiz_cat_check {
    opacity: 1;
    color: var(--review-color);
}

.categories-selection input[type="checkbox"]:checked+.sub_catg_img {
    border-color: var(--review-color);
}

.categories-selection input[type="checkbox"]:checked+.sub_catg_imgspn {
    color: var(--review-color);
}


/*CSS for checkbox*/


/*CSS for checkbox*/

.btn-listing input[type="checkbox"] {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    margin: 0;
    cursor: pointer;
    opacity: 0;
    color: var(--color-000);
}

.btn-listing input[type="checkbox"]:checked+.sub_catg_img .wiz_cat_check {
    opacity: 1;
    color: var(--review-color);
}

.btn-listing input[type="checkbox"]:checked+.sub_catg_img {
    border-color: var(--review-color);
}

.btn-listing input[type="checkbox"]:checked>lable i {
    display: none;
}

.btn-listing input[type="checkbox"]:checked>lable i:last-child {
    display: block;
}


/*CSS for checkbox*/

/* .sub_catg_img {
    text-align: center;
    border-radius: var(--border-radius-10);
    border: 1px solid var(--unnamed-color-eaeef1);
    width: 120px;
    height: 120px;
    padding: 20px 0;
} */

.sub_catg_img {
    text-align: center;
    border-radius: var(--border-radius-10);
    border: 1px solid var(--unnamed-color-eaeef1);
    width: 175px;
    height: 135px;
    padding: 20px 0;
}

.sub_catg_imgtag {
    width: 60px;
    margin: auto;
    margin-bottom: 10px;
}

.wiz_cat_check {
    position: absolute;
    right: 7px;
    top: 5px;
    display: flex;
    transition: all 0.2s ease-out;
    opacity: 0;
}

.wiz_cat_check i {
    font-size: var(--font-size-20);
}

.sub_catg_imgspn {
    display: block;
    font-size: var(--font-size-13);
    color: var(--color-0f3148);
    font-weight: var(--font-weight-medium);
    text-transform: capitalize;
}

.upload-file-sm {
    height: 120px;
    border-radius: var(--border-radius-10);
    border: 1px dashed #D4DCE2;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-direction: column;
    cursor: pointer;
    margin: 15px 0;
}

.upload-file-sm input[type="file"] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    border: 0;
    opacity: 0;
    height: 100%;
    width: 100%;
}

.upload-file-sm .add-file {
    height: 60px;
    width: 60px;
    text-align: center;
    background: rgb(153 167 176 / 10%);
    border-radius: var(--border-radius-100);
    line-height: var(--line-height-74);
    margin-bottom: 10px;
}

.upload-file-sm span {
    display: block;
    font-size: var(--font-size-13);
    color: var(--color-0f3148);
    font-weight: var(--font-weight-medium);
}

.output-outer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* flex-wrap: wrap; */
}

.custom-color select {
    width: 100%;
    font-size: var(--font-size-18);
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: 0;
    font-weight: var(--font-weight-medium);
    color: var(--color-0f3148);
}

.custom-color-select {
    width: 100%;
    font-size: var(--font-size-18);
    border: 0;
    background: rgb(234 238 241 / 60%);
    box-shadow: none;
    outline: 0;
    border-radius: 3px;
    padding: 12px 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-0f3148);
}

.custom-color a i {
    color: var(--color-gray);
    font-size: var(--font-size-16);
    transform: translate(8px, 2px);
}

.output-color span {
    width: 24px;
    height: 24px;
    border-radius: var(--border-radius-100);
    /*background: #0EC5CB;*/
    display: inline-block;
    margin-right: 10px;
    box-shadow: 0 0 2px #a0a0a0;
}

.custom-color input[type="text"] {
    width: 136px;
    border: 1px solid var(--color-gray);
    border-radius: var(--border-radius-8);
    height: 34px;
    padding: 9px;
    text-transform: capitalize;
    color: var(--color-gray);
    background: transparent;
    display: inline-block;
}


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

      Add Project Page Question Tab

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

.message-tab label {
    color: var( --color-gray);
    ;
    font-weight: 300;
}

.message-tab .form-group {
    margin-bottom: 2px;
}

form.popup-form.message-tab input {
    font-weight: var(--font-weight-medium);
}

.message-tab input::-webkit-input-placeholder {
    color: var(--color-0f3148);
}

.message-tab input:-moz-placeholder {
    color: var(--color-0f3148);
}

.message-tab input::-moz-placeholder {
    color: var(--color-0f3148);
}

.message-tab input:-ms-input-placeholder {
    color: var(--color-0f3148);
}

.message-tab .design-req::-webkit-input-placeholder {
    color: var(--draft-color);
}

.custm-form-control::placeholder {
    color: var(--color-gray);
}

.btn-listing input[type=radio] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.btn-listing input[type=checkbox] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.btn-listing-li.active label {
    color: var( --color-fff);
}

ul.yes-no-btn-list a {
    display: flex;
    color: var(--review-color);
    font-size: var(--font-size-14);
    padding: 11px 20px;
    font-weight: var(--font-weight-medium);
    align-items: center;
    display: block;
}

.btn-listing label {
    display: flex;
    width: 100%;
    /* height: 20px; */
    text-align: center;
    padding: 1px 0;
    margin-bottom: 0;
    border-radius: var(--border-radius-5);
    font-size: var(--font-size-14);
    align-items: center;
    color: var(--review-color);
}

ul.yes-no-btn-list li.active {
    background: var(--review-color);
}

ul.yes-no-btn-list li.active a {
    color: white;
}

ul.yes-no-btn-list {
    margin-bottom: 16px;
}

.bg-color-default,
.bg-color-default:hover {
    color: var(--draft-color);
    box-shadow: 0px 5px 20px #0000001A;
    transition-duration: 1s;
}

.attachments-image {
    border-radius: var(--border-radius-10);
    position: relative;
    margin: 10px 0;
}

.attachments-image:hover .cut-image {
    opacity: 10;
    transition: 0.3s;
}

.attachment-data-single:hover .cut-image {
    opacity: 10;
    transition: 0.3s;
}

.cut-image {
    position: absolute;
    right: 4px;
    top: 4px;
    opacity: 0;
}

.cut-image i {
    font-size: var(--font-size-18);
    color: var( --color-fff);
    background: #000000cf;
    border-radius: 50%;
    cursor: pointer;
}

.document_options button {
    width: 150px;
    height: 40px;
    border-radius: var(--border-radius-5);
    background: var(--theme-primary-color);
    color: var( --color-fff);
    font-size: var(--font-size-14);
    position: relative;
}

.document_options_btn {
    width: 150px;
    height: 40px;
    border-radius: var(--border-radius-5);
    background: var(--theme-primary-color);
    color: var( --color-fff);
    font-size: var(--font-size-14);
    position: relative;
}

.document_options button i {
    margin-right: 5px;
}

.document_options button i.link-icon {
    transform: rotate(45deg);
}

.document-atach-file {
    text-align: center;
    font-size: var(--font-size-15);
    position: relative;
    border: 1px dashed rgba(153, 167, 176, .6);
    padding: 48px 0 0;
    border-radius: var(--border-radius-10);
    overflow: hidden;
    min-height: 279px;
}

#add_files {
    width: 100%;
    height: 100%;
    padding: 4px;
    background: transparent;
    position: absolute;
    cursor: pointer;
    top: 0px;
    box-shadow: none;
    font-size: 0;
    border: none;
    opacity: 0;
}

#add_files::before {
    content: '';
    position: absolute;
    background: transparent;
    font-size: var(--font-size-20);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

#add_files::after {
    content: '';
    position: absolute;
    color: var(--color-808080);
    font-size: var(--font-size-20);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.document-atach-file img {
    width: 80px;
    margin: auto;
}

.document-atach-file strong {
    display: block;
    font-weight: var(--font-weight-semibold);
    margin: 12px 0;
    font-size: var(--font-size-18);
    color: var(--color-0f3148);
    margin-bottom: 0;
}

.document-atach-file span b {
    color: var(--color-light-blue);
    font-weight: var(--font-weight-medium);
}

.document-atach-file p {
    margin-top: 30px;
    margin-bottom: 30px;
    color: var(--draft-color);
    font-size: var(--font-size-13);
    line-height: var(--line-height-21);
}

.flex-show2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.document-atach-file p span {
    display: block;
}

.search-stok-outr button {
    position: absolute;
    top: 20px;
    right: 22px;
    background: transparent;
}

.search-stok-outr {
    position: relative;
}

.sumary-label {
    background: var(--summary-field-bg);
    border: 1px solid var(--summary-field-bg);
    ;
    border-radius: var(--border-radius-10);
    height: auto;
    color: var(--color-0f3148);
    font-size: var(--font-size-15);
    padding: 15px 30px 3px;
    position: relative;
    margin-bottom: 15px;
    cursor: pointer;
}

.sumary-label h6 {
    font-size: var(--font-size-15);
    font-weight: var(--font-weight-normal);
    margin-bottom: 3px;
    color: var(--draft-color)
}

.edit-summary {
    position: absolute;
    right: 10px;
    color: var(--color-light-blue);
    text-align: center;
    font-size: var(--font-size-13);
    top: 24px;
    transition: all 0.2s ease-out;
    opacity: 0;
    right: 20px;
}

.sumary-label:hover {
    border: 1px solid var(--color-light-blue);
}

.sumary-label:hover a {
    opacity: 1;
}

.addi-qustion-outr {
    margin: 43px 0;
}

.addi-qustion-outr h5 {
    color: var(--draft-color);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-25);
    margin: 31px 0 12px;
}

.addi-qustion-outr .sumary-label {
    height: auto;
    display: flex;
    padding-top: 19px;
    margin-bottom: 0px;
    padding: 18px 30px;
    margin-bottom: 2px;
}

.addi-qustion-outr .sumary-label label {
    font-size: var(--font-size-15);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 0;
}

.addi-qustion-outr a.edit-summary {
    top: 19px;
}

.bodr-tp-radis-0 {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.bodr-btm-radis-0 {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

#search-images .modal-header {
    border: 0;
    position: sticky;
    top: 0px;
    z-index: 99;
    background: #fff;
    border-radius: var(--border-radius-20);
}

#search-images .modal-dialog .modal-content {
    border-radius: var(--border-radius-20);
}

#search-images .modal-header button.close {
    position: absolute;
    right: 20px;
    color: var(--color-gray);
}

#search-images .modal-dialog {
    max-width: 1040px;
    width: 100%;
}

#search-images .modal-dialog .search-stok-outr {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: auto;
}

#search-images .modal-dialog .search-stok-outr input {
    background: rgb(234 238 241 / 60%);
    border: 0;
    border-radius: var(--border-radius-10);
    height: 60px;
    color: var(--color-gray);
    font-size: var(--font-size-15);
    padding: 0 30px;
}

#search-images ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 0;
    /*-webkit-column-count: 5;
    -webkit-column-gap: 0px;
    -moz-column-count: 5;
    -moz-column-gap: 0px;
    column-count: 5;
    column-gap: 24px;*/
    display: grid;
    grid-template-columns: auto auto auto auto auto;
}

#search-images ul li {
    border-radius: var(--border-radius-10);
    margin: 12px 0;
    display: inline-block;
}

.px-50 {
    padding-left: 20px;
    padding-right: 20px;
}

.py-38 {
    padding-top: 38px;
    padding-bottom: 38px;
}

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


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

          Famous-Design css-start --------A

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

/* .header-blog .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #bdf200;
    background-color: black;
} */
.header-blog .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background: var(--theme-secondry-color);
    color: #fff;
}

.header-blog .nav-pills .nav-link {
    position: relative;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.14px;
    font-size: var(--font-size-14);
    padding: .5rem .7rem;
    margin-bottom: 5px;
}

.header-blog .nav-pills .nav-item:first-child .nav-link {
    /* padding-left: 0; */
}
.bg-color-og {
    background: #ffd9b7;
}
.header-blog .nav-pills .nav-item:first-child .nav-link.active:before {
    left: 0;
}

/* .header-blog .nav-pills .nav-link.active:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: .7rem;
    width: 30px;
    height: 2px;
    background: var(--theme-primary-color);
} */

.famous-design-topbar {
    padding: 0px 0px 30px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fdt-single-filed {
    display: flex;
    align-items: center;
}

.fdt-single-filed .fdt-title {
    padding: 0px 0px 0px 20px;
}

.fdt-title-h2 {
    color: var(--color-0f3148);
    font-size: var(--font-size-28);
    font-weight: var(--font-weight-medium);
    margin-bottom: 10px;
}

.fdt-single-filed a i {
    width: 20px;
    margin: 0px 8px 0px 0px;
    fill: var(--in-progress-color);
}

.fdt-img img {
    width: 71px;
    height: 71px;
    object-fit: cover;
    border-radius: var(--border-radius-5);
}

.dsd-single-field {
    position: relative;
    box-shadow: 0px 5px 20px #99A7B00F;
    background: var( --color-fff);
    border-radius: var(--border-radius-5);
}

.dsd-single-field .team-card-options {
    top: 10px;
    right: 10px;
    z-index: 9;
}

.dsd-single-field .dropdown-item {
    padding: .25rem .5rem;
}

.dsd-single-field .team-card-options button {
    background: transparent;
}

.dsd-single-field-img {
    background-position: top;
    height: 230px;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 5px 5px 0px 0px;
}

.dsd-single-field-img.shared-file-img {
    background-position: top;
    height: 150px;
}

.dsd-single-field h3 {
    font-size: var(--font-size-13);
    line-height: var(--line-height-21);
    color: var(--color-0f3148);
    font-weight: medium;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dsd-single-field-content {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    position: relative;
}

.card-favorite {
    position: absolute;
    right: 5px;
    bottom: 2px;
}

.dsd-single-field-content p {
    font-size: var(--font-size-13);
    line-height: var(--line-height-21);
    color: var(--draft-color);
    text-align: center;
    margin-bottom: 0;
    white-space: nowrap;
}

.dsd-single-field-content p i {
    margin-right: 5px;
    font-size: var(--font-size-14);
    transform: translateY(2px);
}

.famous-design-sidebar {
    position: fixed;
    width: 400px;
    right: 0;
    background: var( --color-fff);
    padding: 32px 22px;
    transition: 0.5s ease-in-out;
    top: 60px;
    height: 100%;
    overflow: auto;
    z-index: 9;
}

.fd-sidebar-topbar button {
    background: transparent;
    color: var(--draft-color);
    display: inline-flex;
}

.fd-sidebar-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.make-comment {
    position: relative;
    padding: 8px 12px;
    border: 1px solid var(--draft-color);
    margin: 10px 0px 18px;
    border-radius: var(--border-radius-10);
    display: flex;
    /* justify-content: center;
    align-items: center; */
}

.make-comment input {
    width: 100%;
    /*padding-right: 70px;*/
    border: none;
    font-weight: var(--font-weight-normal);
}

.make-comment input::placeholder {
    font-style: italic;
}


/*.make-comment .make-comment-icon{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}*/

.make-comment a {
    color: var(--draft-color);
}

.make-comment-icon.options a i {
    font-size: var(--font-size-22);
}

.reciever-msg {
    background: var(--color-e5f4ff);
    padding: 10px 10px;
    border-radius: 10px 10px 10px 0px;
    margin: 0px 0px 4px 0px;
    /* width: 80%; */
    margin-right: auto;
    position: relative;
}
.bdr-btm {
    border-bottom: 1px solid #c7c7c7;
    margin-bottom: 10px;
}
.message-image {
    text-align: left;
    padding: 10px 13px;
}

.reciever-msg-img {
    width: 30px;
    height: 30px;
    border-radius: var(--border-radius-50);
    float: left;
    object-fit: cover;
    margin-right: 10px;
}


/*.reciever-msg span {
    line-height: 22px;
    font-size: 13px;
    color: var(--theme-secondry-color);
}*/

.reciever-msg-text {
    line-height: var(--line-height-22);
    font-size: var(--font-size-13);
    color: var(--color-0f3148);
    display: flex;
    justify-content: flex-start;
    word-break: break-word;
    hyphens: manual;
    text-align: left;
    padding-bottom: 4px;
}

.sender-msg {
    background: var(--color-f5f6f7);
    padding: 10px 10px;
    border-radius: 10px 10px 10px 0px;
    margin: 0px 0px 4px 0px;
    /* width: 80%; */
    margin-left: auto;
    position: relative;
    /*display: flex;*/
    /*align-items: flex-start;*/
}

.public_linkspan {
    width: calc(100% - 25px);
}

.sender-msg-img {
    width: 30px;
    height: 30px;
    border-radius: var(--border-radius-50);
    float: left;
    object-fit: cover;
}

.reciever-msg-time {
    color: var(--draft-color);
    padding: 0px 0px 0px 10px;
    margin-bottom: 10px;
    font-size: var(--font-size-12);
    display: block;
    white-space: nowrap;
}

.sender-msg-time span {
    color: var(--color-gray);
    padding: 0px 10px 0px 0px;
    margin-bottom: 10px;
    font-size: var(--font-size-12);
    display: block;
}

.align-sidebar {
    height: 100%;
    z-index: 1;
    transition: 0.5s;
    margin-top: -170px;
}

.fd-sidebar-topbar button i {
    fill: var(--draft-color);
    font-size: var(--font-size-18);
    padding: 0px 6px 0px 0px;
}


/*information-css-start*/

.id-single-field {
    /* background: var(--summary-field-bg); */
    padding: 5px 20px;
    /* margin: 0px 0px 20px 0px; */
    /* border-radius: var(--border-radius-10); */
}

.page-title {
    padding: 0px 0px 10px 0px;
    color: var(--color-0f3148);
    font-size: var(--font-size-28);
    line-height: var(--line-height-34);
    font-weight: var(--font-weight-medium);
}

.color-code ul li {
    display: inline-flex;
    padding: 10px 10px;
    border: 1px solid var(--unnamed-color-eaeef1);
    align-items: center;
    color: var(--color-0f3148);
}

.color-code ul li span {
    width: 25px;
    height: 25px;
    display: inline-block;
    margin: 0px 10px 0px 0px;
    border-radius: var(--border-radius-50);
}

.clr1 span {
    background: var(--unnamed-color-0ecb86);
}

.clr2 span {
    background: var(--color-E9D79D);
}

.clr3 span {
    background: var(--color-B58DFB);
}

.clr4 span {
    background: var(--unnamed-color-eaeef1);
}

.id-single-field span {
    color: var(--draft-color);
    padding: 8px 0px;
    display: inline-block;
}


.make-comment span a {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.allow-user .form-check label {
    color: var(--draft-color);
}

.link-access {
    padding: 30px 0px;
    margin-bottom: 55px;
}

.link-access img {
    width: auto;
    height: 50px;
    margin: 0px 10px 0px 0px;
}

.link-access span {
    display: block;
    padding: 0px 0px 20px 0px;
    color: var(--draft-color);
    text-transform: uppercase;
    font-size: var(--font-size-15);
}

.link-access button {
    background: var(--color-ef495f);
    color: var(--theme-default-color);
    border-radius: var(--border-radius-50x);
    display: inline-flex;
}

.link-access button:hover,
.link-access button:focus {
    color: var(--theme-default-color);
    ;
}

/* .design-deliver {
    padding: 30px 0px;
} */

.design-deliver ul li {
    display: inline-block;
    padding: 10px 10px;
    margin: 0px 10px 0px 0px;
    background: var(--color-light-blue);
    border-radius: var(--border-radius-5);
}

.design-deliver ul li a svg {
    width: 20px;
    margin: 0px 10px 0px 0px;
    fill: var(--theme-default-color);
}

.s-title {
    line-height: var(--line-height-27);
    color: var(--color-0f3148);
    font-size: var(--font-size-18);
    padding: 10px 0px 0px 0px;
}

.information-subtitle {
    color: var(--draft-color);
    font-size: var(--font-size-20);
    letter-spacing: 0.5px;
    word-spacing: 0.5px;
    font-weight: var(--font-weight-normal);
}

.design-deliver ul li a {
    color: var(--theme-default-color);
    display: inline-flex;
    align-items: center;
}

.design-deliver ul li a i {
    font-size: var(--font-size-12);
    padding: 0px 5px 0px 0px;
}

.additional-single-field h6 {
    background: var(--unnamed-color-eaeef1);
    padding: 20px 20px;
    border-radius: 10px 10px 0px 0px;
    margin-bottom: 2px;
    color: var(--color-0f3148);
}

.additional-last-single-field h6 {
    background: var(--unnamed-color-eaeef1);
    padding: 20px 20px;
    border-radius: 0px 0px 10px 10px;
    color: var(--color-0f3148);
}

.attachment-data {
    display: flex;
    flex-wrap: wrap;
}

.attachment-data-single {
    margin-right: 10px;
    margin-bottom: 10px;
    position: relative;
}

.btn.view-del-btn {
    color: #343a40!important;
    background: #fff;
    margin: 0 4px;
    padding: 2px 10px;
    text-align: center;
}

.attachment-data-single img {
    border-radius: var(--border-radius-10);
    width: 120px;
    height: 140px;
    object-fit: cover;
}

.attachment-data-img {
    border-radius: var(--border-radius-10);
    width: 120px;
    height: 120px;
    object-fit: cover;
}

.attachment-data-svg {
    width: 20px;
    position: absolute;
    right: 15px;
    top: 5px;
}

.color-code h6 {
    color: var(--draft-color);
}

.design-deliver h6 {
    color: var(--draft-color);
}

.active-sidebar-menu {
    color: var(--theme-primary-color);
}

.allow-user h6 {
    color: var(--draft-color);
}

.make-comment-icon a i {
    color: var(--draft-color);
}

.famous-design-main {
    display: flex;
}

a.public-link {
    color: var(--review-color);
}

.allow-user .form-check label:before,
.allow-user .form-check label:after {
    width: 17px;
    height: 17px;
    top: 2px;
    border-radius: 0px;
}

.allow-user input[type="checkbox"]:checked~.custom-control-label::before {
    border: none;
    background-color: var(--color-0ecb86) !important;
}

.allow-user input[type="checkbox"]:checked {
    background-color: var(--color-0ecb86);
}

.allow-user .form-check-label label {
    padding: 6px;
}

.tab-main {
    /* padding: 0px 20px 0px 0px; */
    width: 100%;
}


/*activity-timeline*/

.avtivity-timeline {
    background: var(--theme-default-color);
    padding: 30px 30px;
    border-radius: var(--border-radius-10);
}

.timeline-content-single-field {
    display: flex;
    align-items: center;
    margin: 10px 0px;
    position: relative;
    padding: 10px 0px;
}

.timeline-content-single-field::after {
    height: 50px;
    content: "";
    position: absolute;
    width: 1px;
    left: 27px;
    bottom: -8px;
    background: var(--unnamed-color-eeeeee);
    transform: translate(-50%, 50%);
}

.timeline-content-single-field:last-child::after {
    display: none;
}

.timeline-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border: 3px solid var(--color-yellow);
    border-radius: var(--border-radius-50);
    margin-right: 12px;
}

.timeline-title {
    font-size: var(--font-size-18);
    color: var(--color-0f3148);
    margin: 0px;
    padding-top: 18px;
}

.timeline-title p {
    font-size: var(--font-size-13);
    color: var(--draft-color);
    font-weight: var(--font-weight-normal);
    padding: 10px 0px;
    margin: 0px;
}

.fd-sidebar-topbar .nav-pills .nav-link {
    color: var(--draft-color);
    text-transform: uppercase;
    letter-spacing: 0.14px;
    background: transparent;
    display: inline-flex;
    padding: .5rem .7rem;
}

.fd-sidebar-topbar a i {
    font-size: var(--font-size-18);
    padding: 0px 6px 0px 0px;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: var(--theme-primary-color);
    background-color: transparent;
}

.t-title-fade-content {
    color: var(--draft-color);
}

.t-title-status {
    color: var(--in-progress-color)
}

.make-comment-icon a i {
    font-size: var(--font-size-20);
    padding: 0px 5px;
}


/*team-sectrion-css-start*/

.add-single-team {
    border: 1px dashed #ccc;
    display: flex;
    align-items: center;
    padding: 10px 10px;
    justify-content: center;
    background: var(--theme-default-color);
    height: 291px;
}

.team-img {
    width: 100px;
    height: 100px;
    border-radius: var(--border-radius-50);
}

.single-team {
    display: flex;
    align-items: center;
    padding: 10px 10px;
    height: 291px;
    background: var(--theme-default-color);
    border-radius: var(--border-radius-5);
    border: 1px solid var(--unnamed-color-eeeeee);
    justify-content: center;
    position: relative;
}

.add-single-team-data span {
    color: var(--draft-color);
}

.single-team-data {
    /*position: relative;*/
    text-align: center;
}

.team-card-options {
    position: absolute;
    top: 8px;
    right: 17px;
}

.one-line {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: break-all;
}

.one-line2 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 96px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.team-card-options .switch {
    margin-left: 0;
}

.team-card-options .dropdown-menu {
    left: auto !important;
}

.team-card-options button {
    background: transparent;
}

.team-card-options i {
    font-size: var(--font-size-20);
}

.add-single-team-data {
    text-align: center;
}

.add-item-title {
    padding: 10px 0px;
    color: var(--draft-color);
    font-weight: var(--font-weight-normal);
    text-transform: capitalize;
}

.s-subtitle {
    display: block;
    padding: 0px 0px 15px 0px;
    color: var(--draft-color);
    font-size: var(--font-size-12);
    line-height: var(--line-height-21);
}

.team-btn {
    color: var(--review-color);
    background-color: var(--unnamed-color-f2f9ff);
    /* width: 150px; */
    padding: 0 4px;
    height: 28px;
    border-radius: var(--border-radius-5);
    font-weight: var(--unnamed-font-weight-medium);
}

.deactivat-btn {
    color: var(--cancle-color);
    background-color: var(--unnamed-color-f2f9ff);
    width: 150px;
    height: 28px;
    border-radius: var(--border-radius-5);
    font-weight: var(--unnamed-font-weight-medium);
}


/*add-new-team-member*/

.new-member {
    margin: 0 auto;
    width: 800px;
}

.password-field {
    position: relative;
}

.relative-field {
    position: relative;
}

.field-status {
    position: absolute;
    right: 22px;
    top: 30px;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-semibold);
    transform: translateY(-50%);
    color: var(--review-color);
}

i.add-field {
    color: var(--cancle-color);
}


/*add-team-switch-btn-css*/

.switch {
    position: relative;
    display: inline-block;
    width: 41px;
    height: 22px;
    margin: 0 15px;
    margin-bottom: .5rem;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--unnamed-color-eaeef1);
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 4px;
    bottom: 3.3px;
    background-color: var(--draft-color);
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: var(--unnamed-color-eaeef1);
}

input:focus+.slider {
    box-shadow: 0 0 1px var(--color-2196F3);
}

input:checked+.slider:before {
    -webkit-transform: translateX(19px);
    -ms-transform: translateX(19px);
    transform: translateX(19px);
    background-color: var(--unnamed-color-0ecb86);
}

.slider.round {
    border-radius: var(--border-radius-34);
}

.slider.round:before {
    border-radius: var(--border-radius-50);
}


/*add-team-switch-btn-css-end*/

.view-all-btn {
    text-transform: uppercase;
}


/*file-management-css-start*/

.file-management-data .dsd-single-field-content h3 i {
    color: var(--queue-color);
    margin-right: 5px;
    font-size: var(--font-size-18);
    transform: translateY(4px);
}

.dsd-single-field-content.file-mgnt h3 {
    text-align: left;
}

.dsd-single-field-content.file-mgnt p {
    text-align: left;
}

.file-management .magic_search {
    right: 0;
    width: 100%;
}

.shared-file-img {
    position: relative;
}

.shared-file-img i {
    height: 30px;
    width: 30px;
    position: absolute;
    left: 10px;
    top: 5px;
    color: var(--theme-default-color);
    background: var(--color-a2b7c5);
    border-radius: var(--border-radius-50);
    text-align: center;
}

.folder-data {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.single-folder {
    border: 1px solid var(--unnamed-color-eeeeee);
    padding: 10px;
    margin: 0px 20px 20px 0px;
    width: 18%;
}

.single-folder i {
    margin-right: 5px;
    font-size: var(--font-size-24);
    transform: translateY(6px);
}

.single-folder span {
    font-size: var(--font-size-13);
}

.blue-icon {
    color: var(--review-color);
}

.green-icon {
    color: var(--in-progress-color)
}

.orange-icon {
    color: var(--revision-color);
}

.grey-icon {
    color: var(--draft-color);
}

.yellow-icon {
    color: var(--queue-color)
}


/*files-management-files-css-start*/

.dsd-single-field-img.shared-file-img img {
    height: 150px;
    border-radius: 5px 5px 0px 0px;
    width: 100%;
    object-fit: cover;
}

.files-data {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.single-files {
    margin: 0px 20px 20px 0px;
    width: 18%;
}

.single-files h3 i {
    color: var(--draft-color);
    margin-right: 5px;
    font-size: var(--font-size-18);
    transform: translateY(2px);
}


/*Brand Profile List Page*/

.relative-field input,
.password-field input {
    padding-right: 136px;
}

.brand-card-info,
.brand_filter_bar {
    height: 100%;
    display: flex;
}

.brand_filter_bar {
    margin-bottom: 14px;
}

.brand_filter_bar select {
    background: transparent;
    color: var(--draft-color);
    font-weight: var(--font-weight-medium);
}

.bdr-dropdown button {
    background: transparent;
    color: var(--draft-color);
    font-weight: var(--font-weight-medium);
    border: 1px solid #ced4da;
    border-radius: .25rem;
    padding: 7px 0;
}

.add_new_brand {
    border: 1px dashed var(--color-gray);
    height: 100%;
    border-radius: var(--border-radius-5);
}

.add_new_brand i,
.add_new_brand p {
    color: var(--draft-color);
}

.add_new_brand i {
    font-size: var(--font-size-30);
    opacity: 54%;
}

.add_new_brand p {
    font-size: var(--font-size-18);
    opacity: 64%;
    text-align: center;
}

.brand-card-info {
    padding: 1.3rem .8rem;
    border: 1px solid var(--unnamed-color-eaeef1);
    border-radius: var(--border-radius-5);
    background: var(--theme-default-color);
}

.brand_pic,
.brand_pic img {
    width: 100px;
    height: 100px;
    border-radius: var(--border-radius-50);
    object-fit: cover;
}

.brand_data h1 {
    /*font-weight: var(--font-weight-semibold);*/
    color: var(--theme-secondry-color);
    font-size: var(--font-size-18);
}

.brand_data p {
    color: var(--draft-color);
    font-size: var(--font-size-12);
}

.brand_circle_group li {
    width: 20px;
    height: 20px;
    border-radius: var(--border-radius-50);
    border: 2px solid var( --color-fff);
    margin-right: -7px;
}

.brand_circle_group li.red {
    background: var(--color-F64E71);
}

.brand_circle_group li.orange {
    background: var(--color-FE635E);
}

.brand_circle_group li.dark-gray {
    background: var(--draft-color);
}

.brand_circle_group li.light-gray {
    background: var(--unnamed-color-eeeeee);
}


/*Add Brand Profile List Page*/

.relative-field p {
    background: rgb(234 238 241 / 60%);
    padding: 20px 30px;
    font-size: var(--font-size-18);
    line-height: var(--line-height-21);
    color: var(--hold-color);
}

.multi-fields-form .relative-field:first-child p {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.multi-fields-form .relative-field:last-child p {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.relative-field .contain-fonts {
    font-size: var(--font-size-13);
    color: var(--draft-color);
    font-weight: var( --font-weight-medium);
}

.pright-40 {
    padding-right: 40px;
}

.descr_field p {
    padding: 0px 30px;
    font-size: var(--font-size-13);
    line-height: var(--line-height-20);
    color: var(--draft-color);
}

.descr_field p.desc_content {
    color: var(--hold-color);
    padding: 20px 30px;
    border-radius: var(--border-radius-10);
    font-size: var(--font-size-15);
    line-height: var(--line-height-21);
}

.mall_icon,
.gallery_icon {
    font-size: var(--font-size-60);
    color: var(--unnamed-color-eeeeee);
}

.tab-bg {
    border-radius: var(--border-radius-10);
    background: var(--color-eeeeee50);
}


/*White Label Page*/


/*Email Templates*/

.email-grid {
    border-radius: var(--border-radius-10);
}

.email-pic,
.email-pic img {
    width: 70px;
    height: 70px;
    border-radius: var(--border-radius-50);
    object-fit: cover;
}

.email-action-btns button.edit-btn {
    border: 1px solid rgba(1, 144, 255, .2);
    color: var(--review-color);
    font-weight: var(--font-weight-normal);
    width: 80px;
}

.email-action-btns select {
    border: 1px solid rgba(1, 144, 255, .2);
    color: var(--review-color);
    font-weight: var(--font-weight-normal);
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 20px;
}

.email-action-btns select:focus {
    border: 1px solid rgba(1, 144, 255, .2);
    color: var(--review-color);
}

.email-action-btns button {
    vertical-align: top;
}

.email-action-btns button.preview-btn {
    background: var(--review-color);
    color: var( --color-fff);
    width: 120px;
}


/*Color Perfer START*/

.color-prefer-table td {
    vertical-align: middle;
}

.color-plate .color-plate-circle {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    border-radius: var(--border-radius-50);
}

.color-plate input[type="text"] {
    border: none;
    font-style: var(--font-size-14);
    color: var(--hold-color);
    line-height: var(--line-height-28);
    font-weight: var(--font-weight-medium);
}

input[type=color] {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: var(--border-radius-50);
    background: none;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-moz-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: 1px solid var(--unnamed-color-eaeef1);
    /*change color of the swatch border here*/
    border-radius: var(--border-radius-50);
}

input[type="color"]::-moz-color-swatch {
    border: 1px solid var(--unnamed-color-eaeef1);
    /*change color of the swatch border here*/
    border-radius: var(--border-radius-50);
}


/*Color Prefer END*/


/*Contact Info TAB CSS*/

.preview-panel {
    background: var(--theme-default-color);
    border-radius: var(--border-radius-10);
    padding: 10px 0;
    /*width: 480px;*/
    height: 368px;
}

.preview-panel .title-bar {
    width: 142px;
    margin-left: 20px;
    border-radius: 10px 10px 0 0;
    background: var(--unnamed-color-eaeef1);
}

.preview-panel .title-logo {
    width: 22px;
    height: 22px;
    object-fit: cover;
    border-radius: var(--border-radius-5);
}

.top-dots span {
    width: 15px;
    height: 15px;
    display: inline-block;
    background: var(--unnamed-color-eaeef1);
    border-radius: var(--border-radius-50);
    margin: 0 3px;
}

.preview-panel .search-bar {
    border-radius: 10px 10px 0 0;
    background: var(--unnamed-color-eaeef1);
}

.main-contact-panel p.header {
    font-size: var(--font-size-20);
    line-height: var(--line-height-30);
    font-weight: var( --font-weight-medium);
}

.main-contact-panel i.contact_icons {
    font-size: var(--font-size-40);
    color: var(--unnamed-color-eaeef1);
}

.inline-color-hint {
    display: none;
}

.email_show_panel {
    word-break: break-all;
}


/*Contact Info TAB CSS END*/


/*Email Settings TAB START*/

.email_preview_panel {
    height: 321px;
}

.preview-panel .simple-bar {
    border: 1px solid #707070;
    border-radius: var(--border-radius-7);
    opacity: .1;
}

.preview-panel .simple-search-bar {
    height: 13px;
}

.main-contact-panel .logo,
.main-contact-panel .logo img {
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-5);
}

.main-contact-panel .block-outline {
    border: 1px solid #707070;
    width: 118px;
    height: 72px;
    margin-left: 48px;
    border-radius: var(--border-radius-7);
    opacity: .1;
}

.email_bar .simple-bar {
    width: 118px;
    height: 8px;
}

.group-bars .simple-bar {
    width: 250px;
    height: 4px;
}

.outline-btns {
    margin-left: 48px;
}

.outline-btns span {
    display: inline-block;
    width: 91px;
    height: 33px;
    border: 1px solid #707070;
    opacity: .1;
    border-radius: var(--border-radius-7);
}

.email_bar p {
    word-break: break-all;
}


/*Email Settings TAB END*/


/*Branding TAB START*/

.sub-domain-panel {
    height: 218px;
    border-radius: 10px 10px 0 0;
}

.logo-box {
    width: 209px;
    margin-right: 30px;
    background: var( --color-fff);
    border-radius: var(--border-radius-10);
    border: 1px solid var(--unnamed-color-eaeef1);
    position: relative;
}


/*.logo-img input {
    position: absolute;
    width: 100%;
    height: 209px;
    opacity: 0;
}*/

.logo-img-input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    left: 0;
    top: 0;
    cursor: pointer;
}

.logo-img-input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    left: 0;
    top: 0;
    cursor: pointer;
}

.logo-img img {
    border-radius: 10px 10px 0 0;
    width: 100%;
    height: 209px;
    object-fit: cover;
    position: relative;
}

.logo-box p,
.favicon-box p {
    padding: 5px 0;
    line-height: var(--line-height-34);
}

.favicon-box {
    width: 120px;
    height: 150px;
    background: var(--color-fff);
    border-radius: var(--border-radius-10);
    border: 1px solid var(--unnamed-color-eaeef1);
    position: relative;
}

.favicon-img {
    width: 100%;
    padding: 29px 29px 20px;
}

.favicon-img input {
    position: absolute;
    width: 62px;
    height: 62px;
    opacity: 0;
}

.favicon-img img {
    border-radius: var(--border-radius-10);
    width: 62px;
    height: 62px;
    object-fit: cover;
}


/*Company-logo-panel*/

.company-logo-panel {
    height: 306px;
}

.company-logo-panel .title-div {
    border-bottom: 1px solid var(--unnamed-color-eaeef1);
}

.main-contact-panel .sidebar-preview {
    position: relative;
    width: 161px;
    height: 255px;
    background: var(--hold-color);
    border-radius: 0 0 0 10px;
}

.sidebar-preview img {
    position: absolute;
    top: 21px;
    right: 27px;
    width: 106px;
    height: 19px;
}

.company-brand-colors .color-plate {
    width: 133px;
    margin-right: 15px;
}

.company-brand-colors .color-plate input[type="text"] {
    width: 80px;
}

.company-brand-panel {
    height: 214px;
    padding: 0;
    border-radius: 10px 10px 10px 0px;
    overflow: hidden;
}

.company-brand-panel .sidebar-preview {
    position: relative;
    width: 161px;
    background: var(--hold-color);
    border-radius: 10px 0 0 0px;
    height: 214px;
}

.sidebar-preview .sidebar-content {
    position: relative;
    top: 21px;
    left: 26px;
    display: inline-block;
}

.sidebar-preview .sidebar-content .bars {
    width: 118px;
    height: 18px;
    background: rgba(234, 238, 241, .1);
    border-radius: var(--border-radius-5);
    margin-bottom: 9px;
}

.company-brand-panel .sidebar-preview img {
    position: relative;
    top: 0;
    right: 0;
    margin-bottom: 40px;
}

.content-panel {
    width: 319px;
    padding: 21px 13px;
}

.content-panel .row_box {
    width: 81px;
    height: 90px;
    margin-left: 11px;
    background: var(--draft-color);
    opacity: .1;
    border-radius: var(--border-radius-5);
    margin: 8px 8px;
}

.content-panel button {
    width: 90px;
    height: 26px;
    border-radius: var(--border-radius-18);
    background: var(--theme-primary-color);
    margin-bottom: 19px;
}


/*.group-bars
{
    display: flex;
}*/


/*Branding TAB END*/


/*White Label Page CSS END*/

.fd-information {
    padding: 30px;
    background: var( --color-fff);
    border-radius: var(--border-radius-10);
}


/*Product Show Page CSS START*/

.product-options {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.products-pics-list .product-img {
    width: 122px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--border-radius-10);
}

#hubble-container {
    overflow: hidden;
}


/*.full-view-image img
{
    width: 100%;
}
*/

.famous-design-action {
    text-align: center;
    width: 554px;
    transition: 0.5s ease-in-out;
    display: flex;
    justify-content: center;
}

.range-slider {
    width: 100%;
}

.range-slider__range {
    -webkit-appearance: none;
    width: 148px;
    height: 2px;
    border-radius: var(--border-radius-10);
    background: var(--unnamed-color-eaeef1);
    outline: none;
    padding: 0;
    margin: 0;
}

.range-slider__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: var(--border-radius-50);
    background: var(--color-light-blue);
    cursor: pointer;
    -webkit-transition: background .15s ease-in-out;
    transition: background .15s ease-in-out;
}

.range-slider__range::-webkit-slider-thumb:hover {
    background: var(--review-color);
}

.range-slider__range:active::-webkit-slider-thumb {
    background: var(--review-color);
}

.range-slider__range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: var(--border-radius-50);
    background: var(--color-2c3e50);
    cursor: pointer;
    -moz-transition: background .15s ease-in-out;
    transition: background .15s ease-in-out;
}

.range-slider__range::-moz-range-thumb:hover {
    background: var(--review-color);
}

.range-slider__range:active::-moz-range-thumb {
    background: var(--review-color);
}

.range-slider__range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px var( --color-fff), 0 0 0 6px var(--review-color);
}

.range-slider__value {
    display: inline-block;
    position: relative;
    width: 60px;
    color: var(--draft-color);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-21);
    font-size: var(--font-size-14);
    text-align: center;
    border-radius: var(--border-radius-3);
    padding: 5px 10px;
    margin-left: 8px;
}


/*End Product Show Page*/

.rb-heading {
    display: none;
}

.search-stok-outr input {
    padding-right: 70px;
}

.top-bar-btn .dropdown-menu {
    top: 7px !important;
    left: auto !important;
    right: 0;
    border: none;
    min-width: 11rem !important;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .2);
}

i.create_new_icon {
    font-size: var(--font-size-27);
    vertical-align: middle;
}

.project-dropdown-select {
    /* width: auto; */
    height: 40px;
    line-height: 40px;
    border: none;
    padding: 0 32px 0 8px;
    border-radius: var(--border-radius-5);
    background-image: url(/assets/front/common/images/expand_more-greeen.svg);
    background-size: 27px;
    background-repeat: no-repeat;
    background-position: center right 5px;
}

.ccm-select-arow {
    background-image: url(/assets/front/common/images/expand_more-blue.svg);
    background-size: 27px;
    background-repeat: no-repeat;
    background-position: center right 5px;
}

.dropdown-toggle::after {
    margin-left: 2rem;
}

.fdt-single-filed .dropdown-menu {
    /*top: 7px !important;*/
    left: auto !important;
    right: 0;
    border: none;
    min-width: 11rem !important;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}


/*Client Management Page Start CSS*/


/*Client Management TAB Start CSS*/

.client_card_row {
    border-radius: var(--border-radius-20);
    padding: 40px 30px;
}

.earned_content h3 {
    font-size: var(--font-size-18);
    line-height: var(--line-height-21);
    color: var(--hold-color);
    margin-bottom: 10px;
}

.client_grid_row {
    display: flex;
}

.client_col_card {
    width: 280px;
    margin-left: 20px;
    padding: 16px 20px;
    border-radius: var(--border-radius-20);
    color: var( --color-fff);
}

.client_col_card.green-gradient {
    background: rgba(14, 203, 134, 1) url('../images/tinder-redesign-graphics_dezeen_hero-1-852x479.png') 50% 40% no-repeat padding-box;
    background-size: 550px;
}

.client_col_card.blue-gradient {
    background: #0190ff url('../images/tinder-redesign-graphics_dezeen_hero-1-852x479.png') 50% 40% no-repeat padding-box;
    background-size: 550px;
}

.client_col_card.orange-gradient {
    background: linear-gradient(45deg, rgba(242, 152, 80, 1), rgba(242, 152, 80, .7)) 50% 40% no-repeat padding-box;
}

.client_col_card i {
    position: relative;
    font-size: var(--font-size-50);
    line-height: var(--line-height-64);
    opacity: .94;
}

.client_col_card i:before {
    content: '';
    position: absolute;
    width: 72px;
    height: 72px;
    top: -5px;
    left: -10px;
    background: rgba(14, 203, 134, .2) url('../images/circle.png') 0% 0% no-repeat padding-box;
    border-radius: var(--border-radius-36);
    mix-blend-mode: lighten;
    opacity: .2;
}

.earned_content h2 {
    font-size: var(--font-size-38);
    line-height: var(--line-height-47);
    color: var(--hold-color);
}

.client-cards .value-count {
    font-size: var(--font-size-28);
    line-height: var(--line-height-34);
}

.client-cards .value-name {
    font-size: var(--font-size-14);
    line-height: var(--line-height-21);
    font-weight: var(--font-weight-normal);
    letter-spacing: var(--character-space-0-14);
    opacity: .94;
    text-transform: uppercase;
}

.client-cards .earned_notify_text {
    font-size: var(--font-size-12);
    line-height: var(--line-height-21);
    font-weight: var(--font-weight-normal);
}

.add_single_client {
    border: 1px dashed var(--color-gray);
    text-align: center;
    border-radius: var(--border-radius-5);
    padding: 15px 0 10px;
}

tbody {
    border-collapse: collapse;
    border-radius: var(--border-radius-12);
    border: 1px solid var(--unnamed-color-eaeef1);
}

.client_table th {
    border-bottom: none !important;
    font-size: var(--font-size-16);
    line-height: var(--line-height-28);
    font-weight: var(--font-weight-normal);
    color: rgba(153, 167, 176, .5);
}

.client_table tbody td {
    vertical-align: middle;
}

.client_table .client-pic,
.client_table .client-pic img {
    width: 50px;
    height: 50px;
    border-radius: var(--border-radius-50);
}

.client-pic-img {
    min-width: 50px;
    min-height: 50px;
    max-width: 50px;
    max-height: 50px;
    border-radius: var(--border-radius-50);
}

.client_table .client-name h4 {
    font-size: var(--font-size-18);
    line-height: var(--line-height-21);
}

.client-name-heading {
    font-size: var(--font-size-18);
    line-height: var(--line-height-21);
    color: #000000;
}

.client-email {
    font-size: var(--font-size-14);
    color: #000000;
    word-break: break-all;
}


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

          Famous-Design css-End --------A

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


/**********************************************
          Comment & share toggel right side css-End --------A
**********************************************/

.project-topleft {
    padding-right: 381px;
}

#sidebar-commnet-wrapper {
    left: 278px;
    /* left: auto; */
    width: 400px;
    /* height: 100%; */
    /* margin-left: -200px; */
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
    ;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrap_2.toggled #sidebar-commnet-wrapper {
    width: 80px;
}

#wrap_2.toggled .famous-design-sidebar {
    position: fixed;
    width: 80px;
    background: var( --color-fff);
    padding: 40px 20px;
    transition: 0.3s ease-in-out;
    z-index: 999;
}

section.famous-design-section {
    width: 100%;
    transition: .4s;
}

#wrap_2 .famous-design-main {
    padding-right: 400px;
}

#wrap_2.toggled .famous-design-main {
    padding-right: 80px;
    transition: .5s;
}

#wrap_2.toggled section.famous-design-section {
    width: 100%;
}

#wrap_2.toggled .comment_icon {
    color: var(--theme-primary-color);
}

#wrap_2.toggled .famous-tab-items {
    display: none;
    transition: .76s all;
}

#wrap_2 .famous-tab-items {
    display: block;
    color: #000;
}

#wrap_2.toggled .fd-sidebar-topbar .nav-pills .nav-link.active,
#wrap_2.toggled .fd-sidebar-topbar .nav-pills .show>.nav-link {
    color: var(--draft-color);
    background-color: transparent;
}

#wrap_2.toggled #sidebar-commnet-wrapper .nav {
    display: initial !important;
}

.scroll {
    flex: 1;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.rb-card {
    flex: auto;
    flex-shrink: 0;
    max-width: 300px;
}

.add-item-title span {
    font-size: var(--font-size-32);
}


/*.flex-column {
    max-width: 195px;
}
*/


/*img {
    margin: 5px;
}*/

.pics img {
    background: var(--unnamed-color-eaeef1);
    box-shadow: 0px 5px 20px #99A7B01A;
    border-radius: var(--border-radius-10);
}


/*add-new-client-css-start*/

.subscription-plan-single {
    display: flex;
    border-radius: var(--border-radius-10);
    justify-content: space-between;
}

.sp-single-title {
    color: var(--unnamed-color-000);
    text-align: left;
    padding: 10px 0px 0px 0px;
}

.sp-single-title p {
    color: var(--draft-color);
    font-size: var(--font-size-14);
}

.sp-single-para {
    color: var(--draft-color);
    font-size: var(--font-size-14);
}

.subscription-plan-single.active .sp-single-title {
    color: var(--theme-default-color);
}

.subscription-plan-single.active .sp-single-title p {
    color: var(--theme-default-color);
}

.status-btn-color {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: var(--border-radius-50);
    display: inline-table;
}

.status-front-color {
    width: 24px;
    height: 24px;
    border-radius: var(--border-radius-50);
    background: none;
    border: 1px solid #ccc;
    display: inline-table;
}

.stc-1 {
    background-color: var(--in-progress-color);
}

.stc-2 {
    background-color: var(--unnamed-color-f29850);
}

.stc-3 {
    background-color: var(--unnamed-color-f9ce41);
}

.stc-4 {
    background-color: var(--unnamed-color-ef495f);
}

.stc-5 {
    background-color: var(--unnamed-color-0190ff);
}

.stc-6 {
    background-color: var(--unnamed-color-99a7b0);
}

.stc-7 {
    background-color: var(--unnamed-color-0f3148);
}

.sfc-1 {
    background-color: var(--unnamed-color-fff);
}

.color-white {
    color: var(--unnamed-color-fff)
}

.hello {
    opacity: 1;
}


/*.full {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}*/

.full .content {
    background-color: rgba(0, 0, 0, 0.75);
    height: 100%;
    width: 100%;
    display: grid;
}

.full .content img {
    left: 50%;
    transform: translate3d(0, 0, 0);
    animation: zoomin 1s ease;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}

.byebye {
    opacity: 0;
}

.byebye:hover {
    transform: scale(0.2) !important;
}

.gallery {
    display: grid;
    grid-column-gap: 8px;
    grid-row-gap: 1px;
    grid-template-columns: repeat(auto-fill, minmax(194px, 1fr));
    grid-auto-rows: 8px
}

.gallery img {
    max-width: 100%;
    border-radius: var(--border-radius-8);
    box-shadow: 0 0 16px var(--color-333);
    transition: all 1.5s ease;
}

.gallery img:hover {
    box-shadow: 0 0 32px var(--color-333);
}

.gallery .content {
    padding: 4px;
}

.gallery .gallery-item {
    transition: grid-row-start 300ms linear;
    transition: transform 300ms ease;
    transition: all 0.5s ease;
    cursor: pointer;
}

.gallery .gallery-item:hover {
    transform: scale(1.025);
}


/*subscription-css-start*/

.add-plan {
    color: var(--theme-primary-color);
}

.add-plan:hover,
.add-plan:focus {
    color: var(--theme-primary-color);
}

.subscription-data tr {
    background: var(--theme-default-color);
    margin: 20px 0px;
}

.subscription-table table {
    border-collapse: separate;
    border-spacing: 0 1em;
}

.subscription-table table tbody tr {
    border-radius: var(--border-radius-10);
}

.currency-status {
    position: relative;
}

.currency-status input {
    padding-left: 136px;
}

.currency-status-text {
    position: absolute;
    left: 30px;
    top: 50%;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-semibold);
    transform: translateY(-50%);
    color: var(--review-color);
}

.grid {
    display: grid;
    grid-gap: 9px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-auto-rows: 20px;
}
.stock-grid {
    overflow-y: scroll;
    max-height: calc(100vh - 300px);
    overflow-x: hidden;
}

.item {
    background-color: var(--color-fff);
    padding: 0px 7px;
}

.photothumb {
    width: 100%;
}

.content img {
    width: 100%;
    border-radius: var(--border-radius-10);
}

.attachment-outer {
    /* width: 129px; */
    border-radius: var(--border-radius-10);
    border: 1px solid var(--unnamed-color-eaeef1);
    /* height: 115px; */
    background: #e3e3e3;
    text-align: center;
}

.attachment-outer img {
    border-radius: var(--border-radius-10);
    /* border: 1px solid var(--unnamed-color-eaeef1); */
    object-fit: contain;
    background: #e3e3e3;
    width: 48px;
    height: 48px;
}
.img-preview {
    text-align: left;
}

.product-combine {
    padding: 15px 15px;
    background: var(--theme-default-color);
    border-radius: var(--border-radius-5);
    border: 1px solid var(--unnamed-color-eeeeee);
}

.title {
    padding: 20px;
}


/* .single-img {
    height: 100%;
}*/


/* .single-img img {
    height: 100%;
}
 */

.ccl-2 {
    position: absolute;
    width: 23px;
    height: 23px;
    top: 5px;
    left: 1px;
}

.title h3 {
    font-size: 1.2em;
    color: var(--color-fff);
    text-transform: uppercase;
}

.project .title {
    background-color: var(--color-607D8B);
}

.blog .title {
    background-color: var(--color-ff9800);
}

.photo .title {
    background-color: var(--color-f44336);
}

.desc {
    padding: 10px 10px 5px 10px;
}

.desc img {
    width: 50%;
    margin: 0 10px 10px 0;
    float: left;
}

.desc p {
    margin-bottom: 10px;
}

.subscription-data tr td i {
    cursor: pointer;
}

.client_table tr td i {
    cursor: pointer;
}

.Permissions-section {
    background: var(--unnamed-color-eaeef1);
    border-radius: var(--border-radius-10);
    padding: 20px 20px;
}

.toggle-switch-btn {
    background: var(--theme-default-color);
    margin: 10px 0px;
    border-radius: var(--border-radius-5);
    padding: 0px 0px;
    display: flex;
    align-items: center;
}

.focusout-search-box .magic_search {
    right: 0;
    width: 100%;
}

.transition {
    transition: all .3s ease-out;
}

.heading {
    text-align: center;
    font-size: 0.8em;
}

.center-align {
    width: 100%;
    left: 50%;
    top: 50%;
    display: table;
}

.ffhfg input[type="radio"] {
    visibility: hidden;
    height: 0;
    width: 0;
}

.ffhfg label {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    background-color: var( --color-f2f9ff);
    color: var( --color-0198ff);
    padding: 5px 10px;
    border-radius: var(--border-radius-3);
}

.ffhfg input[type="radio"]:checked+label {
    background-color: var( --color-58ba83);
}

.subscription-plan-single a {
    width: 100%;
    display: block;
}

.subscription-plan-single label {
    padding: 30px 20px;
    height: 100%;
    width: 100%;
    display: block;
}

.dash-project.toggled .hide-btn {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9;
    opacity: 0;
    top: 0;
    left: 0;
    cursor: pointer;
}

.color-plate input[type="text"] {
    width: calc(100% - 34px);
}

.sp-single-content {
    width: 100%;
}


/*Client Management Additional Settings Start*/

.btn-listing.shared_designer_choose li {
    width: 60px;
    height: 60px;
    margin: 7px 0px 7px 0;
    border-radius: var(--border-radius-10);
}

.btn-listing.shared_designer_choose li label {
    height: 100%;
    display: block;
    text-align: center;
    font-size: var(--font-size-24);
    line-height: var(--line-height-21);
    font-weight: var(--font-weight-normal);
}

.additional_tab .sub-title label {
    font-size: var(--font-size-22);
    line-height: var(--line-height-27);
    font-weight: var(--font-weight-medium);
    margin-right: 10px;
}

.sub-title label {
    font-size: var(--font-size-22);
    line-height: var(--line-height-27);
    font-weight: var(--font-weight-medium);
    margin-right: 10px;
    color: var(--color-0f3148);
}

.tab-bg.additional_tab {
    border-radius: 0;
    margin-bottom: 1px;
}

.tab-bg.additional_tab:first-child {
    border-radius: 10px 10px 0 0;
}

.tab-bg.additional_tab:last-child {
    border-radius: 0 0 10px 10px;
}

.bdt-none .table th {
    border-top: none;
}

.client-name h4 {
    margin: 0;
}

.bdt-none .table thead th {
    vertical-align: top;
    border-bottom: 2px solid #dee2e6;
}


/*Client Management Additional Settings Start end*/

.relative-field.verified .field-status {
    color: var(--unnamed-color-0ecb86);
    text-transform: uppercase;
}

.relative-field.verified input {
    background: rgba(14, 203, 134, .1)
}

.group-barss {
    display: flex;
    flex-wrap: wrap;
    padding-top: 8px;
}

.all-pg-pd {
    padding: 15px 0 40px 0;
}

.py-10 {
    padding: 70px 0;
}

.subscription-plan_icon {
    background: var( --color-fff);
    color: var(--color-light-blue);
    border-radius: var(--border-radius-50);
    padding: 4px 4px;
}

.no-bdr-table td,
.no-bdr-table th {
    border: none;
}

.adjust .dropdown-menu {
    right: 0px !important;
    left: auto !important;
    padding: 0;
    border: 0;
    -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .20);
    z-index: 9999;
    background-color: var( --color-fff);
    border-radius: 0;
    /* min-width: 250px; */
}

/* .dropdown-menu.show {
    display: block;
    left: auto !important;
    right: 0;
    background: var(--unnamed-color-fff);
    top: 10px !important;
    transform: translate3d(0px, 24px, 0px) !important;
    padding: 7px 8px;
} */

.user-face-icon {
    width: 48px;
}

.face-icon ul li {
    display: inline-block;
    padding: 12px 5px 0;
    position: relative;
}

.availed_mgmt {
    color: var(--color-gray);
    font-size: var(--font-size-30);
    font-weight: 300;
    margin-bottom: 0;
}

.tick_svg_icn {
    position: absolute;
    width: 20px;
    right: 0;
}

.crown_icon {
    width: 52px;
}

.left-comment-point {
    background: var(--theme-primary-color);
    width: 16px;
    height: 16px;
    right: 0;
    top: 20px;
    transform: translate(-50%, -50%);
    border-radius: var(--border-radius-50);
    box-shadow: 0 0 0 7px #ef495f24;
    position: absolute;
    text-align: center;
    line-height: var(--line-height-16);
    color: var( --color-fff);
}

.left-comment-point-2 {
    background: var(--color-yellow);
    width: 16px;
    height: 16px;
    left: 20px;
    bottom: 48px;
    border-radius: var(--border-radius-50);
    box-shadow: 0 0 0 5px var(--color-yellow);
    text-align: center;
    line-height: var(--line-height-16);
    color: var( --color-fff);
}

.comment-point-3,
.comment-point-2 {
    color: #fff;
}

.comment-point {
    background: var(--color-light-blue);
    width: 16px;
    height: 16px;
    right: -10px;
    top: 4px;
    transform: translate(-50%, -50%);
    border-radius: var(--border-radius-50);
    box-shadow: 0 0 0 7px #0190ff0d;
    position: absolute;
    position: absolute;
    text-align: center;
    line-height: var(--line-height-16);
    color: var( --color-fff);
}

.comment-point-2 {
    background: var(--theme-primary-color);
    width: 16px;
    height: 16px;
    left: 68%;
    top: 43%;
    transform: translate(-50%, -50%);
    border-radius: var(--border-radius-50);
    box-shadow: 0 0 0 7px #ef495f24;
    position: absolute;
    position: absolute;
    text-align: center;
    line-height: var(--line-height-16);
    color: var( --color-fff);
}

.comment-point-3 {
    background: var(--color-light-blue);
    width: 16px;
    height: 16px;
    left: 54%;
    top: 16%;
    transform: translate(-50%, -50%);
    border-radius: var(--border-radius-50);
    box-shadow: 0 0 0 7px #0190ff0d;
    position: absolute;
    text-align: center;
    line-height: var(--line-height-16);
    color: var( --color-fff);
}


/*step form css*/


/*form styles*/

#msform {
    margin: 50px auto;
    position: relative;
}

#msform fieldset {
    background: white;
    /* border: 0 none;
  border-radius: 3px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  padding: 20px 30px;

  box-sizing: border-box;
  width: 80%;
  margin: 0 10%; */
    /*stacking fieldsets above each other*/
    position: absolute;
}


/*Hide all except first fieldset*/

#msform fieldset:not(:first-of-type) {
    display: none;
}


/*inputs*/


/*buttons*/

#msform .action-button {
    cursor: pointer;
    margin: 10px 5px;
    text-align: center;
    line-height: var(--line-height-50);
    width: 144px;
    height: 50px;
    font-size: 15px;
    color: var( --color-fff);
    padding: 0 14px;
    border-radius: var(--border-radius-5);
    box-shadow: none;
    display: inline-block;
    background: var(--cancle-color);
    border: none;
    font-weight: var(--font-weight-medium);
}

#msform .action-button:hover,
#msform .action-button:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px @secondary-color;
}


/*headings*/

.fs-title {
    font-size: 16px;
    text-transform: uppercase;
    color: @primary-color;
    margin-bottom: 10px;
}

.fs-subtitle {
    font-weight: var( --font-weight-medium);
    font-size: 14px;
    color: var(--color-666);
    margin-bottom: 20px;
}


/*progressbar*/

#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    /*CSS counters to number the steps*/
    counter-reset: step;
}

#progressbar li.active {
    color: var(--queue-color);
}

#progressbar li:before {
    content: "";
    /* counter-increment: step; */
    width: 20px;
    line-height: var(--line-height-20);
    display: block;
    font-size: 10px;
    color: var(--color-333);
    background: var(--color-b9b9b9);
    border-radius: var(--border-radius-3);
    /* margin: 0 auto 5px auto; */
    width: 17px;
    height: 17px;
    margin-right: 22px;
    border-radius: var(--border-radius-50);
    border: navajowhite;
    box-shadow: navajowhite;
}


/*progressbar connectors*/

#progressbar li:after {
    content: "";
    width: 100%;
    height: 2px;
    background: white;
    position: absolute;
    left: -50%;
    top: 26px;
    z-index: -1;
    /*put it behind the numbers*/
}

#progressbar li:last-child:after {
    /*connector not needed before the first step*/
    content: none;
}


/*marking active/completed steps green*/


/*The number of the step and the connector before it = green*/

#progressbar li.active:before {
    line-height: var(--line-height-20);
    display: block;
    font-size: 10px;
    color: var(--queue-color);
    background: var(--queue-color);
    border-radius: var(--border-radius-3);
    /* margin: 0 auto 5px auto; */
    width: 17px;
    height: 17px;
    border-radius: var(--border-radius-50);
    border: 1px solid var(--queue-color);
    box-shadow: inset 0 0 0px 3px white;
}

#progressbar li.active:after {
    /* background: @secondary-color; */
    line-height: var(--line-height-20);
    display: block;
    font-size: 10px;
    border-radius: var(--border-radius-3);
    /* margin: 0 auto 5px auto; */
    width: 17px;
    height: 17px;
    border-radius: var(--border-radius-50);
    border: 1px solid var(--queue-color);
    box-shadow: inset 0 0 0px 3px var(--queue-color);
    height: 67px;
    border-radius: 0;
    width: 1px;
    left: 12px;
}

.help-block {
    font-size: 0.8em;
    color: var(--color-7c7c7c);
    text-align: left;
    margin-bottom: 0.5em;
}


/* Affiliate css */

.no-data-img {
    position: relative;
    height: 400px;
}

.no-data {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: auto;
}

.canvas-con-inner {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sub-head-2 {
    font-size: var(--font-size-18);
    color: var(--color-0f3148);
    opacity: 0.84;
}

.point-aff {
    font-size: var(--font-size-28);
}

.lower-text {
    font-size: var(--font-size-14);
    color: var(--color-0f3148);
    font-weight: var(--font-weight-normal);
}

.social-pr::before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    left: -14px;
    top: 8px;
    border-radius: var(--border-radius-50);
}

.chart-list li {
    position: relative;
}

.color-1::before {
    background: var(--color-light-blue);
}

.color-2::before {
    background: var(--cancle-color);
}

.color-3::before {
    background: var(--color-yellow);
}

.color-4::before {
    background: var(--color-yellow);
}

.social-pr {
    color: var(--color-0f3148);
    font-size: var(--font-size-13);
    font-weight: var(--font-weight-medium);
    margin-right: 12px;
}

.social-text {
    color: var(--color-gray);
    font-size: var(--font-size-13);
}

.visit-no.m-0 {
    font-size: var(--font-size-28);
}

.visitar-card {
    background: linear-gradient(45deg, #025137, #01ce5a);
    color: var( --color-fff);
    padding: 24px;
    border-radius: var(--border-radius-10);
}

.visit-new {
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-normal);
}

.user-c-icon i {
    font-size: 57px;
}

.earn-comm-amt {
    font-size: var(--font-size-38);
    color: var(--color-0f3148);
    font-weight: var(--font-weight-medium);
}

.withdraw {
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-normal);
    color: var(--color-light-blue);
    text-transform: uppercase;
}

.pass-generate {
    position: relative;
    background: var(--unnamed-color-fff);
    padding: 19px 25px;
    border-radius: var(--border-radius-10);
    color: var(--color-0f3148);
}

.all-label {
    font-size: var(--font-size-18);
    color: var(--draft-color);
    font-weight: var( --font-weight-medium);
}

.red-link {
    color: var(--cancle-color);
    font-size: var(--font-size-14);
}

.social_ic i {
    padding: 0 10px;
    color: var(--color-gray);
    font-size: var(--font-size-22);
}

.profile-name {
    color: var(--color-0f3148);
    font-size: var(--font-size-28);
    font-weight: var(--font-weight-normal);
}

.agency-plan {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-18);
    letter-spacing: var(--letter-spacing);
    margin-bottom: 7px;
}

.dd-design {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-14);
}

.add-dtl {
    color: var(--color-0f3148);
    font-size: var(--font-size-15);
    margin-left: 11px;
    font-weight: var(--font-weight-normal);
    word-break: break-all;
}

.prof-ic i {
    color: var(--color-light-blue);
}

.address-pr li {
    padding: 6px 0;
}

.sub-sub-head {
    font-size: var(--font-size-18);
    color: var(--color-0f3148);
    font-weight: var(--font-weight-medium);
}

.sub-title {
    color: var(--draft-color);
    font-size: var(--font-size-15);
    font-weight: var(--font-weight-normal);
}

.bl-text {
    color: var(--color-light-blue);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-medium);
}

.sap-list {
    color: var(--color-0f3148);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-15);
    padding: 4px 0px;
    display: flex;
    /* flex: 0 0 47%; */
}

.plan-check {
    font-size: var(--font-size-18);
    margin-right: 8px;
    color: var(--color-yellow);
}

.plan-act-btn {
    float: right;
}

.wht-plan-crd {
    padding: 20px 20px 45px 20px;
    background: var(--unnamed-color-fff);
    border-radius: var(--border-radius-5);
    height: 100%;
}

.brand-profile-view .custom-color {
    margin-right: 15px;
}

.brand-profile-view {
    display: flex;
    flex-wrap: wrap;
}

.subscription-btns {
    position: absolute;
    bottom: -11px;
    left: 0;
    margin: 0;
    width: 100%;
    text-align: center;
}

.subs_plans_modal .modal-dialog {
    max-width: 95%;
}


/*brand profile modal css*/

.header-title {
    color: var(--color-gray);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-normal);
}

.header-title-2 {
    color: var(--color-gray);
    font-size: var(--font-size-13);
    font-weight: var(--font-weight-normal);
}

.soc-m-icon {
    display: inline-block;
    color: var(--color-gray);
    padding: 0 4px;
}

.MBP-heading {
    font-size: var(--font-size-20);
    color: var(--unnamed-color-eaeef1);
    font-weight: var(--font-weight-medium);
    text-transform: capitalize;
    text-align: center;
}

.modal-left-icon {
    text-align: right;
}

.m-logo {
    width: 60px;
    height: 60px;
}

#b_profile .modal-header {
    align-items: center;
    padding: 0 34px;
    border-bottom: none;
    position: sticky;
    top: 0;
    background: var(--theme-secondry-color);
    border-radius: 20px 20px 0 0;
}

.md-brand-pic {
    width: 150px;
    height: 150px;
    border-radius: var(--border-radius-50);
}

.modal-top-b {
    background: var(--theme-secondry-color);
    border-radius: 20px 20px 0 0;
}

.TDU-head {
    font-size: var(--font-size-28);
    color: var(--unnamed-color-fff);
    font-weight: var(--font-weight-normal);
}

.md-web-link {
    font-size: var(--font-size-18);
    color: var(--review-color);
    font-weight: var(--font-weight-normal);
}

.md-para {
    font-size: var(--font-size-15);
    color: var(--color-gray);
    font-weight: var(--font-weight-mediuml);
}

.custom-label {
    font-size: var(--font-size-18);
    color: var(--draft-color);
    font-weight: var(--font-weight-normal);
}

.blc-title {
    text-align: center;
    padding: 4px 0;
    color: var(--color-gray);
    font-size: var(--font-size-13);
    font-weight: var(--font-weight-normal);
}

.BL-card {
    border: 1px solid var(--unnamed-color-eaeef1);
    border-radius: var(--border-radius-10);
    background: var(--unnamed-color-fff);
    width: 120px;
    height: 150px;
    margin: 5px 6px;
}


/*file management page modal*/

.UF-heading {
    font-size: var(--font-size-20);
    color: var(----color-0f3148);
    font-weight: var(--font-weight-medium);
    text-transform: capitalize;
}

.document-atach-file-para {
    color: var(--draft-color);
    font-size: var(--font-size-13);
    line-height: var(--line-height-21);
    text-align: center;
}


/*dahboard*/

.mn-head-para {
    color: var(--color-gray);
    font-size: var(--font-size-15);
    font-weight: var(--font-weight-normal);
}

.adver-head {
    background: var(--color-light-blue);
    padding: 20px 0;
    border-radius: 10px 10px 0 0;
}

.advr-head-deading {
    color: var(--unnamed-color-fff);
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-medium);
}

.advr-head-title {
    color: var(--unnamed-color-fff);
    font-size: var(--font-size-15);
    font-weight: var(--font-weight-normal);
}

.adver-area {
    background-color: var(--color-eeeeee50);
    border-radius: var(--border-radius-10);
}

.comp-step {
    display: flex;
    justify-content: space-between;
    padding: 33px 0;
}

.com-step-text {
    color: var(--color-0f3148);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-medium);
}

.green-btn {
    color: var(--unnamed-color-0ecb86);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-medium);
    border: none;
}

.g-r-tick {
    color: var(--unnamed-color-0ecb86);
}

.y-r-alert {
    color: var(--color-yellow);
}

.add-dtl-btn {
    background: var(--cancle-color);
    border-radius: var(--border-radius-5);
    width: 120px;
    height: 40px;
    line-height: var(--line-height-40);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-normal);
    color: var(--unnamed-color-fff);
    text-align: center;
}

.add-dtl-btn:hover {
    color: var(--unnamed-color-fff);
}

.user-ls {
    border-radius: 0 0 10px 10px;
}

.dash-btm-icon {
    color: var(--color-gray);
    padding-top: 20px;
    @
}


/*dashboard project modal*/

.md-apply-link {
    font-size: var(--font-size-14);
    color: var(--review-color);
    font-weight: var(--font-weight-mediam);
}


/*custom check box*/


/* The container */

.cus_check {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: var(--font-size-18);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* Hide the browser's default checkbox */

.cus_check input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}


/* Create a custom checkbox */

.checkmark {
    position: absolute;
    top: 1px;
    left: 0;
    height: 24px;
    width: 24px;
    border: 2px solid #eee;
    border-radius: var(--border-radius-3);
}


/* On mouse-over, add a grey background color */


/*.cus_check:hover input ~ .checkmark {
  background-color: #ccc;
}*/


/* When the checkbox is checked, add a blue background */

.cus_check input:checked~.checkmark {
    background-color: var(--color-2196F3);
}


/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}


/* Show the checkmark when checked */

.cus_check input:checked~.checkmark:after {
    display: block;
}


/* Style the checkmark/indicator */

.cus_check .checkmark:after {
    left: 8px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.M-filter-card {
    padding: 15px 8px;
}

.collaps-arrow {
    color: var(--draft-color);
}


/*custom drop down*/

.dropdown-item:focus,
.dropdown-item:hover {
    color: #16181b;
    text-decoration: none;
    background-color: #dadada78;
    margin: 0 !important;
}

.dropdown-menu.show:before {
    content: '';
    display: inline-block;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid #ccc;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: -10px;
    right: 9px;
}

.dropdown-menu.show:after {
    content: '';
    background-color: transparent;
    border-right: 8px solid transparent;
    position: absolute;
    border-left: 8px solid transparent;
    border-bottom: 8px solid #fff;
    border-top: 8px solid transparent;
    top: -16px;
    right: 10px;
    bottom: auto;
}

.pd-show-comment-drop .dropdown-menu.show {
    left: auto !important;
    right: -141px;
    top: -13px !important;
    width: 390px;
    padding: 20px;
    border: none;
    background: var(--unnamed-color-fff);
}

.drop-down__menu-box:before {
    content: '';
    background-color: transparent;
    border-right: 8px solid transparent;
    position: absolute;
    border-left: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-top: 8px solid var( --color-fff);
    bottom: -15px;
    right: 36%;
}

.chat-pp.d-flex {
    background: var(--unnamed-color-eeeeee);
    padding: 11px 10px;
    border-radius: var(--border-radius-10);
}

.share-pop-icon span {
    font-size: 20px;
    color: var(--color-gray);
    padding: 0 4px;
}

.rply-chat {
    background: var(--unnamed-color-eeeeee);
    padding: 11px 10px;
    border-radius: 0 10px 10px 10px;
    margin-top: 2px;
    width: 85%;
    margin-left: auto;
}

.dropdown-toggle-split {
    padding-right: 0px;
    padding-left: 3px;
}

.mdd-pop-heading {
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-medium);
}

.resolve-btn {
    color: var(--cancle-color);
    font-size: var(--font-size-14);
    text-transform: uppercase;
    font-weight: var(--font-weight-medium);
}

.comment-point-3 .pd-show-comment-drop .dropdown-menu.show {
    top: 10px !important;
}

.comment-point-3 .drop-down__menu-box:before {
    border-bottom: 8px solid var( --color-fff);
    border-top: 8px solid transparent;
    top: -16px;
    right: 37%;
    bottom: auto;
}

.comment-point-3 .make-comment {
    margin: 10px 0px 1px;
    border-radius: var(--border-radius-10);
}

.thumb_down {
    color: var(--cancle-color);
    font-size: var(--font-size-30);
    padding-left: 10px;
}

.thumb_up {
    color: var(--unnamed-color-0ecb86);
    font-size: var(--font-size-30);
    padding-right: 10px;
}

.no-btn {
    width: 100px;
    height: 46px;
    border-radius: var(--border-radius-10);
    position: relative;
    text-align: left;
    padding: 0 15px;
    border: 1px solid #707070;
    background: var( --color-fff);
    display: flex;
    align-items: center;
}

.yes-btn {
    width: 100px;
    height: 46px;
    border-radius: var(--border-radius-10);
    text-align: right;
    padding: 0 14px;
    position: relative;
    border: 1px solid #707070;
    background: var( --color-fff);
    display: flex;
    align-items: center;
}

.modal-head {
    padding: 21px 24px 0;
}

.mid-mmd-area {
    margin-right: 18px;
}

li.ldd-line {
    position: relative;
    display: inline-block;
    margin: 0 8px;
}

.ldd-line:before {
    content: "";
    position: absolute;
    width: 13px;
    height: 4px;
    background: var(--color-yellow);
    border-radius: var(--border-radius-54);
}

.product_video {
    width: 600px;
    margin: auto;
    box-shadow: 0 0 17px #0000004f;
    border-radius: var(--border-radius-10);
}

.video-d-area {
    width: 600px;
    text-align: center;
    margin: 19px auto;
    position: relative;
}

.vido-back span {
    font-size: var(--font-size-58);
    padding-top: 6px;
}

.vido-back2 span {
    font-size: var(--font-size-58);
    padding-top: 6px;
}

.vido-back2 {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    background: var(--cancle-color);
    width: 70px;
    height: 70px;
    line-height: var(--line-height-70);
    border-radius: var(--border-radius-50);
    color: var( --color-fff);
}

.neutral-box {
    box-shadow: 0 0 4px 0px #70707045;
    border-radius: 3px;
    margin: 0 10px;
}

.neutral-smily img {
    width: 45px;
    margin-top: -20px;
    background: #fff;
    padding: 7px;
    box-shadow: 0 0 4px 0px #70707045;
    border-radius: 50%;
}

.nt-heading {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    padding: 7px 2px 16px;
    color: #f7d242;
}

.nt-heading2 {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    padding: 7px 2px 16px;
    color: #f6a103;
}

.nt-heading3 {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    padding: 7px 2px 16px;
    color: #65b7fc;
}

.dropdown-toggle.top-p-drop::after {
    margin-left: 11px;
}


/*home share experience pop-up*/

button.chatbox-open {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 52px;
    height: 52px;
    color: var( --color-fff);
    background-color: var(--color-0360a5);
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.15);
    border: 0;
    border-radius: var(--border-radius-5);
    cursor: pointer;
    margin: 16px;
}

button.chatbox-close {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 52px;
    height: 52px;
    color: var( --color-fff);
    background-color: var(--color-0360a5);
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.15);
    border: 0;
    border-radius: var(--border-radius-50);
    cursor: pointer;
    display: none;
    margin: 16px calc(2 * 16px + 52px) 16px 16px;
}

.chatbox-popup {
    display: -webkit-box;
    display: flex;
    position: fixed;
    box-shadow: 5px 5px 25px 0 rgba(46, 61, 73, 0.2);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    display: block;
    bottom: 76px;
    right: 16px;
    width: 300px;
    height: auto;
    background-color: var( --color-fff);
    border-radius: var(--border-radius-17);
    padding: 10px;
    z-index: 999;
}

img.minireviw-img {
    width: 81px;
    height: 81px;
    object-fit: cover;
    border-radius: var(--border-radius-5);
}

.review-smily {
    display: flex;
}

.fmt-head {
    color: var(--color-0f3148);
    font-size: var(--font-size-15);
    font-weight: var(--font-weight-medium);
}

.sye-para {
    font-size: var(--font-size-12);
    color: var(--color-gray);
    padding-bottom: 6px;
    font-weight: var(--font-weight-normal);
}

.close_icn {
    color: var(--color-gray);
    font-size: var(--font-size-20);
}

.tbl-head {
    color: var(--color-gray);
    opacity: 0.5;
    padding: 12px 12px;
}


/*.hv-white-color a {
    color: var(--unnamed-color-fff);
}
*/

.hv-white-color a:hover {
    color: #ffffff;
}

.material-icons {
    cursor: pointer;
}

.project {
    position: relative;
}

.project input[type="checkbox"]:checked+label {
    border-radius: var(--border-radius-10);
    border: 2px solid var(--review-color);
    box-shadow: 0 0 9px 2px #0190ff7d;
}

.project input[type="checkbox"] {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    margin: 0;
    cursor: pointer;
    opacity: 0;
}

#Survey-Modal .modal-dialog {
    /*-webkit-transform: none;
    transform: none;
    position: fixed;
    bottom: 10%;
    margin: 0;
    left: 16%;*/
}

.ccm-checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: var(--font-size-15);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: var(--color-gray);
    font-weight: var(--font-weight-normal);
}


/* Hide the browser's default checkbox */

.ccm-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}


/* Create a custom checkbox */

.checkmarkk {
    position: absolute;
    top: 17px;
    left: 0;
    height: 25px;
    width: 25px;
    border: 1px solid #9c9c9c;
    background: var( --color-fff);
    border-radius: var(--border-radius-2);
}


/* On mouse-over, add a grey background color */

.ccm-checkbox:hover input~.checkmarkk {
    background-color: var( --color-fff);
}


/* When the checkbox is checked, add a blue background */

.ccm-checkbox input:checked~.checkmarkk {
    background-color: var(--color-08ca42);
    /*#2196F3;*/
    border: none;
}


/* Create the checkmark/indicator (hidden when not checked) */

.checkmarkk:after {
    content: "";
    position: absolute;
    display: none;
}


/* Show the checkmark when checked */

.ccm-checkbox input:checked~.checkmarkk:after {
    display: block;
}


/* Style the checkmark/indicator */

.ccm-checkbox .checkmarkk:after {
    left: 9px;
    top: 5px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.send-invite {
    background: var(--theme-primary-color);
    width: 200px;
    height: 40px;
    border-radius: var(--border-radius-5);
    color: var(--unnamed-color-fff);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-medium);
}

.right-action .dropdown-menu.show {
    left: auto !important;
    right: 0;
    /*background: var(--color-light-blue);*/
    top: 25px !important;
}


/*survey stepform*/


/*step form css*/


/*form styles*/

#surveyforms {
    margin: 50px auto;
    position: relative;
}

#surveyform fieldset {
    /*background: white;*/
    /* border: 0 none;
  border-radius: 3px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  padding: 20px 30px;

  box-sizing: border-box;
  width: 80%;
  margin: 0 10%; */
    /*stacking fieldsets above each other*/
    /*position: absolute;*/
}


/*Hide all except first fieldset*/

#surveyform fieldset:not(:first-of-type) {
    display: none;
}


/*inputs*/


/*buttons*/

#surveyform .action-button {
    cursor: pointer;
    margin: 10px 5px;
    text-align: center;
    line-height: var(--line-height-50);
    width: 144px;
    height: 50px;
    font-size: var(--font-size-15);
    color: var( --color-fff);
    padding: 0 14px;
    border-radius: var(--border-radius-5);
    box-shadow: none;
    display: inline-block;
    background: var(--cancle-color);
    border: none;
    font-weight: var(--font-weight-medium);
}

#surveyform .action-button:hover,
#surveyform .action-button:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px @secondary-color;
}


/*headings*/

.fs-title {
    font-size: var(--font-size-16);
    text-transform: uppercase;
    color: @primary-color;
    margin-bottom: 10px;
}

.fs-subtitle {
    font-weight: var( --font-weight-medium);
    font-size: var(--font-size-14);
    color: var(--color-666);
    margin-bottom: 20px;
}


/*progressbar*/

#progressbar li {
    list-style-type: none;
    color: var(--color-gray);
    text-transform: uppercase;
    font-size: var(--font-size-15);
    width: 100%;
    /* float: left; */
    position: relative;
    display: flex;
    padding: 20px 5px;
    align-items: center;
}

#progressbar li:before {
    content: "";
    /* counter-increment: step; */
    width: 20px;
    line-height: var(--line-height-20);
    display: block;
    font-size: var(--font-size-10);
    color: var(--color-333);
    background: var(--color-b9b9b9);
    border-radius: var(--border-radius-3);
    /* margin: 0 auto 5px auto; */
    width: 17px;
    height: 17px;
    margin-right: 22px;
    border-radius: var(--border-radius-50);
    border: navajowhite;
    box-shadow: navajowhite;
}


/*progressbar connectors*/

#progressbar li:after {
    content: "";
    width: 100%;
    height: 2px;
    background: white;
    position: absolute;
    left: -50%;
    top: 26px;
    z-index: -1;
    /*put it behind the numbers*/
}

#progressbar li:last-child:after {
    /*connector not needed before the first step*/
    content: none;
}


/*marking active/completed steps green*/


/*The number of the step and the connector before it = green*/

#progressbar li.active:before {
    line-height: var(--line-height-20);
    display: block;
    font-size: var(--font-size-10);
    color: var(--queue-color);
    background: var(--queue-color);
    border-radius: var(--border-radius-3);
    /* margin: 0 auto 5px auto; */
    width: 17px;
    height: 17px;
    border-radius: var(--border-radius-50);
    border: 1px solid var(--queue-color);
    box-shadow: inset 0 0 0px 3px white;
}

#progressbar li.active:after {
    /* background: @secondary-color; */
    line-height: var(--line-height-20);
    display: block;
    font-size: var(--font-size-10);
    border-radius: var(--border-radius-3);
    /* margin: 0 auto 5px auto; */
    width: 17px;
    height: 17px;
    border-radius: var(--border-radius-50);
    border: 1px solid var(--queue-color);
    box-shadow: inset 0 0 0px 3px var(--queue-color);
    height: 67px;
    border-radius: 0;
    width: 1px;
    left: 12px;
}

.help-block {
    font-size: 0.8em;
    color: var(--color-7c7c7c);
    text-align: left;
    margin-bottom: 0.5em;
}

.form_btn_action {
    position: sticky;
    text-align: center;
    bottom: 0;
    /*width: 700px;*/
    /*background: linear-gradient(1deg, white, #fbfbfba1);*/
}

fieldset {
    width: 100%;
}

#survey_steps li.active:before {
    line-height: var(--line-height-20);
    color: var(--queue-color);
    background: var(--queue-color);
    border-radius: var(--border-radius-3);
    width: 10px;
    height: 4px;
    border-radius: var(--border-radius-5);
    border: 1px solid var(--queue-color);
}

#survey_steps li:before {
    content: "";
    display: block;
    width: 10px;
    height: 4px;
    background: var(--unnamed-color-eaeef1);
    border-radius: var(--border-radius-5);
}

#survey_steps li {
    list-style-type: none;
    color: var(--color-gray);
    padding-top: 20px;
    display: inline-block;
}

#survey_steps {
    counter-reset
}

.modal-dialog-bottom {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: flex-end;
    min-height: calc(100% - 1rem);
}

.logo-img {
    width: 60px;
}

.filter-modal {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: flex-end;
    min-height: calc(100% - 1rem);
    position: fixed;
    bottom: 0px;
    right: 0px;
    margin: 0px;
    width: 500px;
}

.filter-modal .modal-content {
    border-radius: 20px 20px 0;
}

.mod-heading {
    color: var(--color-0f3148);
    font-size: var(--font-size-22);
    font-weight: var(--font-weight-medium);
}

.mod-para-thnx {
    color: var(--color-0f3148);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-normal);
}

.mod-botm-para {
    color: var(--color-gray);
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-normal);
}

.py-40 {
    padding: 0 40px;
}

.px-26 {
    padding: 26px 0px;
}


/*white branding additional stiing tab css*/

.T-script-tab {
    font-size: var(--font-size-18);
    color: var(--color-0f3148);
    padding: 2px 18px;
    margin: 14px 0;
}

.T-script-tab.active {
    border-left: 3px solid;
    padding: 2px 15px;
    border-radius: 0;
}

.script-name {
    color: var(--color-0f3148);
    font-size: var(--font-size-18);
    background: var(--unnamed-color-fff);
    padding: 18px 30px;
    border-radius: var(--border-radius-5);
    margin-bottom: 10px;
}

.bdr-none {
    border-bottom: none;
}

.avil-balance {
    font-size: var(--font-size-28);
    font-weight: var(--font-weight-medium);
    color: var(--unnamed-color-0ecb86);
}

.avil-price {
    line-height: 1;
    text-align: center;
}

.bdr-btm-tbl {
    border: 1px solid var(--unnamed-color-eaeef1);
    padding: 10px 12px;
    margin-bottom: 10px;
    border-radius: 10px 10px 0 0;
}

.add__card {
    /* width: 150px; */
    height: 100%;
    padding: 58px 0;
    border-radius: var(--border-radius-10);
    border: 1px dashed var(--color-gray);
    text-align: center;
}

.debit_card {
    width: 350px;
    padding: 12px 20px 0px;
    border-radius: var(--border-radius-20);
    color: var( --color-fff);
    background: linear-gradient(45deg, #0174c2, #0ec6f5);
}

.debit_card_view {
    width: 350px;
    padding: 12px 20px 0px;
    border-radius: var(--border-radius-20);
    color: var( --color-fff);
    background: linear-gradient(45deg, #0174c2, #0ec6f5);
}

.oip-img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

.bank-name {
    opacity: .54;
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-medium);
    margin-bottom: 0;
}

.holder-name {
    text-transform: uppercase;
    font-size: var(--font-size-14);
}

.valid-till {
    opacity: 0.54;
}

.modal-header {
    border-bottom: none;
    justify-content: space-between;
}

.wht-bdr-crd {
    border: 1px solid var(--unnamed-color-eaeef1);
    border-radius: var(--border-radius-10);
    padding: 22px 32px 0px;
}

.green-bdr-crd {
    border: 1px solid var(--unnamed-color-eaeef1);
    border-radius: var(--border-radius-5);
    padding: 22px 32px 0px;
    background: var(--unnamed-color-0ecb86);
}

.green-bdr-crd h4,
.green-bdr-crd p,
.green-bdr-crd li {
    color: var( --color-fff);
}

#subs_plans .modal-dialog {
    width: 100%;
    max-width: 90%;
}

.pop-grn-btn {
    text-align: center;
    line-height: var(--line-height-50);
    width: 144px;
    height: 50px;
    font-size: var(--font-size-15);
    color: var(--unnamed-color-0ecb86);
    padding: 0 14px;
    border-radius: var(--border-radius-5);
    box-shadow: none;
    background: var( --color-fff);
    border: 1px solid var(--unnamed-color-0ecb86)
}

.hover-drag-icon {
    opacity: 0;
    position: absolute;
    top: 40%;
}

.grid-box:hover .hover-drag-icon {
    opacity: 0.3;
}

.Upload-new-draft {
    border: 1px dashed #ccc;
    display: flex;
    align-items: center;
    padding: 10px 10px;
    justify-content: center;
    background: var(--theme-default-color);
    height: 292px;
}

.devide-head {
    color: var(--color-gray);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-medium);
    margin-bottom: 16px;
    margin-top: 30px;
    opacity: 0.5;
}

.no-wrap {
    white-space: nowrap;
}

.project-top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/*Client Management TAB CSS END*/


/*21-dec-2020*/

.product_before_img {
    margin: auto;
    width: 160px;
    height: 160px;
    border-radius: var(--border-radius-50);
    object-fit: cover;
    background-color: var(--unnamed-color-eaeef1);
}

.moreicon_before {
    color: var(--unnamed-color-eaeef1);
}

.product_before_content {
    background: var(--unnamed-color-eaeef1);
    border-radius: var(--border-radius-5);
    width: 200px;
    margin: auto;
    height: 20px;
}

.make-comment_textarea {
    width: 78%;
    border: none;
    font-weight: var(--font-weight-normal);
    resize: none;
    height: 28px;
    overflow-y: auto;
}

.make-comment_textarea:focus {
    outline: none;
}
.make-comment-wrap {
    background: #fff;
    position: fixed;
    bottom: 0;
    width: 354px;
}
.conversation-container-js {
    padding-bottom: 180px;
}

.upload_images_bfrcmnt {
    margin-bottom: 0;
    text-align: center;
    position: relative;
    border: none;
    padding: 0;
    display: inline-block;
}

.uploaded_pro_img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: var(--border-radius-10);
}

.make_checkbox:checked~.custom-control-label::before {
    border: none;
    background-color: var(--color-0ecb86) !important;
}

.make_label {
    color: var(--draft-color);
}

.make_label:before {
    width: 17px;
    height: 17px;
    top: 2px;
    border-radius: 0px !important;
}

.make_label:after {
    width: 17px;
    height: 17px;
    top: 2px;
    border-radius: 0px;
}

.delete_reply_buttons {
    display: flex;
    justify-content: flex-end;
}

.buttons_delete {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-left: 8px;
}

.make_com_checkbox {
    margin-bottom: 10px;
    display: inline-block;
    margin-right: 20px;
}

.sender_sec_text {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding-bottom: 5px;
    border-bottom: 1px solid #c7c7c7;
    margin-bottom: 10px;
}

.sender_images {
    /* max-width: 230px; */
    max-width: fit-content;
    width: 100%;
    border-radius: var(--border-radius-10);
    height: 160px;
    object-fit: contain;
    background: #e4e4e4;
}

.sender_sec_img {
    text-align: center;
    padding-bottom: 10px;
    width:100%;
}

.delete_span {
    color: #050505;
    font-size: var(--font-size-13);
    padding-left: 3px;
}

.deleticonsfont {
    font-size: var(--font-size-16);
}

.hv-white-color.show {
    transform: translate3d(0px, 24px, 0px) !important;
}

.makecmnt_replyto {
    padding: 10px;
    margin-bottom: 10px;
    justify-content: space-between;
}

.img_closeicon {
    position: absolute;
    right: -10px;
    top: -10px;
    background: var(--color-fff);
    border-radius: var(--border-radius-50);
    color: var(--color-0e0e0e);
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: var(--font-weight-semibold);
    box-shadow: 0px 0px 5px 4px rgb(1 2 2 / 10%);
    font-size: var(--font-size-20);
}

.add_new_role {
    float: right;
    color: var(--cancle-color);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-medium);
}

.permissions_lisec {
    background: var(--unnamed-color-eaeef1);
}


/*21-dec-2020-end*/


/*22-dec-2020-start*/

.down_angle {
    position: absolute;
    right: 20px;
    top: 10px;
    color: var(--color-light-blue);
}

.portfolio_arrow {
    top: 20px;
}

.select_arrow_none:focus {
    outline: none;
}

.select_box {
    position: relative;
}

.select_arrow_none {
    /* for Firefox */
    -moz-appearance: none;
    /* for Chrome */
    -webkit-appearance: none;
}


/* For IE10 */

.select_arrow_none::-ms-expand {
    display: none;
}

.img_sec_bl {
    background: var(--unnamed-color-eaeef1);
    width: 70px;
    height: 70px;
    object-fit: cover;
    margin-right: 20px;
    border-radius: var(--border-radius-50);
}

.product_before_contentp {
    background: var(--unnamed-color-eaeef1);
    border-radius: var(--border-radius-5);
    width: 160px;
    margin: auto;
    height: 13px;
    margin-top: 10px;
}

.mt-space_before {
    width: 27px;
    height: 27px;
    background: var(--unnamed-color-eaeef1);
    display: inline-block;
}

.st-in-queue_before {
    height: 30px;
    width: 90px;
}


/*22-dec-2020-end*/


/*29-dec-20-start*/

.reply_reciever-msg {
    border-top-left-radius: 0;
    border-bottom-left-radius: 10px;
    width: 70%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.recievertext_padding {
    padding-left: 30px;
    width: calc(100% - 16px);
}

.sender_replypart {
    border-top-left-radius: 10px;
    border-top-right-radius: 0;
}

.text_numberchat {
    align-items: flex-start;
    display: flex;
    width: 100%;
}

.reci_msg_main {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

.reply_imgcnt {
    display: flex;
    justify-content: flex-start;
    width: 100%;
}


/*29-dec-20-end*/


/*25-jan-21-start*/

.content_new {
    background: #4fb6df69;
    color: #000000;
}
.video-type-button {
    background-color: #ffe4ff;
    color: #d700d8;
}

.content_new:hover, .video-type-button:hover {
    color: inherit;
}

.corwn_plan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

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

.visitar-card_inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.design_cnt_btns {
    margin-bottom: 20px;
    text-align: center;
    display: flex;
}


/*25-jan-2021-end*/


/*19-2-21 start*/

.mrgn_left_ryt {
    margin-right: 30px;
    margin-left: 30px;
}


/*19-2-21 end*/

.hide_butn {
    cursor: pointer;
}


/*22-2-2021 start*/

/* select {
    -webkit-appearance: none;
    -moz-appearance: none;
} */

.emailtemp_arrow {
    top: 7px;
    right: 0;
    position: absolute;
    color: var(--color-light-blue);
}

.pymt_arrow {
    top: 30px;
}


/* START TOOLTIP STYLES */

[tooltip] {
    position: relative;
    /* opinion 1 */
}


/* Applies to all tooltips */

[tooltip]::before,
[tooltip]::after {
    text-transform: none;
    /* opinion 2 */
    font-size: .9em;
    /* opinion 3 */
    line-height: 1;
    user-select: none;
    pointer-events: none;
    position: absolute;
    display: none;
    opacity: 0;
}

[tooltip]::before {
    content: '';
    border: 5px solid transparent;
    /* opinion 4 */
    z-index: 1001;
    /* absurdity 1 */
}

[tooltip]::after {
    content: attr(tooltip);
    /* magic! */
    /* most of the rest of this is opinion */
    font-family: Helvetica, sans-serif;
    text-align: center;
    /*
    Let the content set the size of the tooltips
    but this will also keep them from being obnoxious
    */
    min-width: 3em;
    max-width: 21em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1ch 1.5ch;
    border-radius: .3ch;
    box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
    background: var(--color-0f3148);
    color: var( --color-fff);
    z-index: 1000;
    /* absurdity 2 */
}


/* Make the tooltips respond to hover */

[tooltip]:hover::before,
[tooltip]:hover::after {
    display: block;
}


/* don't show empty tooltips */

[tooltip='']::before,
[tooltip='']::after {
    display: none !important;
}


/* FLOW: UP */

[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
    bottom: 100%;
    border-bottom-width: 0;
    border-top-color: var(--color-333);
}

[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
    bottom: calc(100% + 5px);
}

[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
    left: 50%;
    transform: translate(-50%, -.5em);
}


/* FLOW: DOWN */

[tooltip][flow^="down"]::before {
    top: 100%;
    border-top-width: 0;
    border-bottom-color: var(--color-0f3148);
}

[tooltip][flow^="down"]::after {
    top: calc(100% + 5px);
}

[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
    left: 50%;
    transform: translate(-50%, .5em);
}


/* FLOW: LEFT */

[tooltip][flow^="left"]::before {
    top: 50%;
    border-right-width: 0;
    border-left-color: var(--color-333);
    left: calc(0em - 5px);
    transform: translate(-.5em, -50%);
}

[tooltip][flow^="left"]::after {
    top: 50%;
    right: calc(100% + 5px);
    transform: translate(-.5em, -50%);
}


/* FLOW: RIGHT */

[tooltip][flow^="right"]::before {
    top: 50%;
    border-left-width: 0;
    border-right-color: var(--color-333);
    right: calc(0em - 5px);
    transform: translate(.5em, -50%);
}

[tooltip][flow^="right"]::after {
    top: 50%;
    left: calc(100% + 5px);
    transform: translate(.5em, -50%);
}


/* KEYFRAMES */

@keyframes tooltips-vert {
    to {
        opacity: .9;
        transform: translate(-50%, 0);
    }
}

@keyframes tooltips-horz {
    to {
        opacity: .9;
        transform: translate(0, -50%);
    }
}


/* FX All The Things */

[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
    animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
    animation: tooltips-horz 300ms ease-out forwards;
}


/*22-2-2021 end*/


/*23-2-21 start*/

.btn-listing .active label {
    background: var(--color-light-blue);
    color: var(--color-fff);
}

.viewal_actv {
    border: none;
}

.viewal_actv.active label {
    background: none;
}

.viewcard_sign {
    position: absolute;
    top: 0;
    right: 0;
}

.viewcard_sign i {
    background: var(--cancle-color);
    color: var(--color-fff);
}

.viewal_actv_label {
    padding: 0;
}


/*23-2-20 end*/

.mobile_show {
    display: none;
}

.drop_dwn_mobile {
    display: none;
}

.drop_dwn_mobile .dropdown i {
    position: absolute;
    top: 8px;
    right: 10px;
}

.drop_dwn_mobile {
    position: relative;
    padding: 0 !important;
}

.file_approve_main {
    display: none;
}


/*04-03-2021-start*/

.drop_font {
    font-size: var(--font-size-20);
}


/*04-03-2021-end*/

input.rb_radio_btn {
    width: 1em;
    height: 1em;
    margin-right: 6px;
}

.outline_mail {
    font-size: var(--font-size-40);
    color: var(--unnamed-color-eaeef1);
}

.copy-right p {
    margin-bottom: 0;
}


/*Admin-css-start*/

p {
    margin: 0;
    word-break: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    word-break: break-word;
}

ul {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}

body {
    padding: 0;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-medium);
    overflow-x: hidden;
}

button {
    border: none;
}

a,
a:hover {
    text-decoration: none;
}

.p-20 {
    padding: 20px;
}

.opacity-5 {
    opacity: .5;
}

.b-radius-5 {
    border-radius: var(--border-radius-5);
}

.b-radius-10 {
    border-radius: var(--border-radius-10);
}

.border-eaeeff-1px {
    border: 1px solid var(--color-eaeef1);
}

.font-semibold {
    font-weight: var(--font-weight-semibold);
}

.font-normal {
    font-weight: var(--font-weight-normal);
}

.letter-spacing-0 {
    --letter-spacing: 0px;
}

.font-size-12 {
    font-size: var(--font-size-12);
}

.font-size-13 {
    font-size: var(--font-size-13);
}

.font-size-14 {
    font-size: var(--font-size-14);
}

.font-size-16 {
    font-size: var(--font-size-16);
}

.font-size-17 {
    font-size: var(--font-size-17);
}

.font-size-18 {
    font-size: var(--font-size-18);
}

.font-size-22 {
    font-size: var(--font-size-22);
}

.font-size-28 {
    font-size: var(--font-size-28);
}

.line-height-30 {
    line-height: var(--line-height-30);
}

.line-height-28 {
    line-height: var(--line-height-28);
}

.bg-default {
    background: var( --color-fff);
}

.bg-white {
    background: var(--color-fff);
}

.bg-red {
    background: var(--theme-primary-color);
}

.bg-blue {
    background: var(--color-light-blue) !important;
}

.bg-green {
    background: var(--in-progress-color) !important;
}

.bg-orange {
    background: var(--color-light-orange) !important;
}

.bg-yellow {
    background: var(--color-yellow);
}

.bg-gray {
    background: var(--color-light-gray);
}

.bg-light-gray {
    background: var(--color-eaeef1);
}

.color-light-gray {
    /* color: var(--color-eaeef1) !important; */
    color: #c4c6c8 !important;
}

.bg-dark {
    background: var(--hold-color);
}

.color-primary {
    color: var(--theme-primary-color) !important;
}

/* .color-secondry {
    color: var(--theme-secondry-color) !important;
} */

.color-light-blue {
    color: var(--color-light-blue) !important;
}

.color-light-orange {
    color: var(--color-light-orange);
}

.color-yellow {
    color: var(--color-yellow);
}

.color-white {
    color: var(--color-fff);
}

.color-dark {
    color: var(--hold-color) !important;
}

.input-background {
    background: rgb(234 238 241 / 60%);
}

.color-gray {
    color: var(--color-gray) !important;
}

.bg-color-light-red {
    background: rgba(239, 73, 95, .1) !important;
}

.bg-color-light-yellow {
    background: rgba(249, 206, 65, .1);
}

.border-radius-20 {
    border-radius: var(--border-radius-20) !important;
}

.mediam-font {
    font-weight: var(--unnamed-font-weight-medium) !important;
}

.skyblue-light {
    background: var( --color-f2f9ff);
}

.color-f4f6f7 {
    background: var( --color-f4f6f7);
}

.light-skinclr {
    background: var(--color-fef7f1);
}

.border-top-left-radius {
    border-top-left-radius: 0 !important;
}

.border-bottom-left-radius {
    border-bottom-left-radius: 0 !important;
}

.border-top-right-radius {
    border-top-right-radius: 0 !important;
}

.m0 {
    margin: 0px;
}

.mt-0 {
    margin-top: 0px;
}

.mb-50 {
    margin-bottom: 50px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-22 {
    margin-bottom: 22px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-35 {
    margin-bottom: 35px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mt-27 {
    margin-top: 27px;
}

.mt-15 {
    margin-top: 15px;
}

.ml-15 {
    margin-left: 15px;
}

.mr-10 {
    margin-right: 10px;
}

.mr-16 {
    margin-right: 16px;
}

.px-41 {
    padding-left: 41px;
    padding-right: 41px;
    padding-bottom: 2px;
}

.pos-relative {
    position: relative;
}

.content-panel-span {
    border-radius: var(--border-radius-18);
    background: var(--theme-primary-color);
    margin-bottom: 19px;
    padding: 5px 48px;
}


/*-------------------------------*/


/*       buttoncss        */


/*-------------------------------*/

.gz-status {
    font-size: var(--font-size-14);
    width: auto;
    height: 28px;
    text-decoration: none;
    text-align: center;
    line-height: var(--line-height-31);
    border-radius: var(--border-radius-5);
    display: inline-block;
    font-weight: var(--font-weight-medium);
}

.st-active,
.st-active:hover {
    color: var(--color-light-blue);
    background: rgb(1 144 255 / 5%);
}

.st-in-queue,
.st-in-queue:hover {
    color: var(--color-light-orange);
    background: rgb(242 152 80 / 10%);
}

.bg-red {
    background: var(--theme-primary-color);
}

.btn-lg,
.btn-lg:hover,
.btn-lg:focus {
    text-align: center;
    line-height: var(--line-height-50);
    width: 144px;
    height: 50px;
}

a,
button:focus,
input:focus,
button {
    text-decoration: none;
    outline: none;
}

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

#wrapper {
    padding-left: 80px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    float: left;
    width: 100%;
}

#sidebar-wrapper::-webkit-scrollbar {
    display: none;
}

.bg-wrapper-gray {
    background: var(--color-theme-bg);
}

header.nav-section {
    position: sticky;
    left: 0;
    right: 0;
    top: 0;
    background: var(--theme-secondry-color);
    z-index: 99;
    box-shadow: 0px 2px 20px rgb(0 0 0 / 8%);
    color: #fff;
}


/*-------------------------------*/


/*     Sidebar nav styles        */


/*-------------------------------*/

#wrapper.toggled .full {
    display: block;
    margin: 15px auto 5px;
}

#wrapper.toggled .mini {
    display: none;
}

.navbar {
    padding: 0;
}

#wrapper.toggled ul.nav.sidebar-nav {
    width: 100%;
}

#wrapper.toggled .sidebar-header {
    margin-bottom: -6px;
}

.sidebar-brand a:hover {
    color: var(--color-fff);
    text-decoration: none;
}

#wrapper.toggled .hamburger {
    transform: rotateY(180deg);
}

.sidebar-nav .dropdown-menu {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    border-radius: 0;
    border: none;
    background-color: var(--color-222);
    box-shadow: none;
}

.navbar-header .left-data {
    display: flex;
    align-items: center;
}

.Dashboard_hding {
    margin-bottom: 0;
    font-size: var(--font-size-20);
    transition: 0.36s;
}

.Dashboard_hding_spn {
    font-size: var(--font-size-18);
    color: var(--color-gray);
    margin-left: 10px;
    font-weight: var(--font-weight-normal);
}

.Dashboard_hding_spn:hover {
    color: var(--color-gray);
}

.btn-upgrade-sm {
    /*position: relative;*/
    bottom: 0px;
    right: 0;
    left: 0;
    width: 75px;
    margin: auto;
    transition: 0s;
    margin-bottom: 10px;
    position: fixed;
    left: 2px;
    right: auto;
}

#wrapper.toggled button.btn.btn-upgrade {
    display: flex;
    opacity: 1;
    /* transition: 0.76s; */
}

.nav-section .approve-btn {
    background: var(--in-progress-color);
    color: var(--color-fff);
    padding-right: 25px;
    text-align-last: center;
}

.hamburger .hamb-middle {
    top: 6px;
    width: 100%;
}

.hamburger .hamb-bottom {
    bottom: 0px;
    width: 9px;
    -webkit-transition: all .35s ease-in-out;
}

.list-setting .dropdown-menu {
    right: 0px;
    margin-top: 15px;
    left: auto;
    padding: 0;
    border: 0;
    -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .20);
    z-index: 9999;
    background-color: var(--color-fff);
    border-radius: 0;
    min-width: 250px;
}

.list-header-bloglia {
    color: var(--color-gray);
    font-size: var(--font-size-14);
    border: 0;
    text-decoration: none;
    /* margin-right: 7px; */
    font-weight: var(--font-weight-medium);
    padding: 0 5px 0 0;
    border-radius: 0;
    display: inline-block;
    text-transform: uppercase;
}

.list-header-bloglia:hover {
    color: var(--color-gray);
}

.tab-count {
    background: rgb(239 73 95 / 10%);
    /* font-weight: var(--font-weight-normal); */
    padding: 0 4px;
    text-align: center;
    font-size: var(--font-size-12);
    line-height: var(--line-height-20);
    color: var(--theme-primary-color);
    margin-left: 6px;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    font-weight: var(--font-weight-medium);
    display: none;
}

.list-header-bloglia span {
    display: none;
}

.focusout-search-box {
    position: relative;
}

.search-box.magic_search {
    right: 0;
    width: 316px;
    position: absolute;
    left: 0;
    top: -13px;
}

.list-grid .view_class {
    display: none;
}

.list-grid .view_class.active {
    display: block;
}

.search-box.magic_search input.search_text {
    opacity: 1;
    height: 100%;
    border: 0;
    padding: 7px 15px;
    right: 0;
    height: 45px;
    font-size: var(--font-size-14);
}

.list-grid a {
    color: var(--color-gray);
}

.filter-notif:before {
    background: var(--color-yellow) 0% 0% no-repeat padding-box;
    ;
    width: 9px;
    height: 9px;
    content: "";
    position: absolute;
    border-radius: var(--border-radius-50);
    right: 0;
    top: 0;
    border: 1px solid var(--color-fff);
}

.client-manage .list-grid {
    margin-right: 0%;
    line-height: var(--line-height-12);
}

.top-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-img_img {
    text-align: center;
    max-width: 160px;
    max-height: 160px;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.pro_tdtexth5:hover {
    color: #000000;
}

.img-title p {
    font-size: var(--font-size-12);
    color: var(--color-gray);
    text-align: center;
    margin-bottom: 0;
}

.grid-box p i,
.img-title p i {
    margin-right: 5px;
    font-size: var(--font-size-14);
    transform: translateY(2px);
}

.three-togle {
    color: var(--color-gray);
    font-size: var(--font-size-18);
}

.product-list-show .white-list {
    background: var(--color-fff);
    padding: 15px;
    box-shadow: 0px 5px 20px #99a7b00f;
    border-radius: var(--border-radius-10);
    width: 100%;
    font-size: var(--font-size-14);
    color: var(--color-gray);
    margin-bottom: 15px;
    position: relative;
}

.added-by img,
.shared-by img {
    width: 27px;
    height: 27px;
    object-fit: cover;
}

.three-tod a.three-togle {
    display: block;
    line-height: var(--line-height-7);
}

.white-list ul li .img-title p {
    text-align: left;
}

.coments-by a {
    color: var(--color-yellow);
    display: flex;
    align-items: center;
}

.th-rows.inque li {
    width: 100%;
}

.drag-box {
    color: var(--color-gray);
    transform: translateX(-10px);
    width: 24px;
    opacity: 0.3;
}

.msg-toggle {
    display: flex;
}

.img-name-title {
    display: flex;
    align-items: center;
}

.mt-space {
    margin-top: 20px;
    /* text-align: center; */
}

.img-name-title p {
    text-align: left;
}

.th-rows {
    padding: 0 10px;
    opacity: 1;
    margin-bottom: 20px;
    color: var(--color-gray);
    display: flex;
    /* justify-content: space-between; */
    align-items: baseline;
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-medium);
    text-transform: capitalize;
}

.th-rows.inque {
    margin-bottom: 15px;
}


/* .th-rows>div {
    text-align: center;
} */

.copy-right {
    color: var(--color-gray);
    margin: 40px auto;
}

.zoom_img {
    position: relative;
}

.projecttable_wdth1 {
    width: 20%;
}

.projecttable_wdth2 {
    width: 10%;
}

.projecttable_wdth3 {
    width: 10%;
}

.projecttable_wdth4 {
    width: 10%;
}

.projecttable_wdth5 {
    width: 10%;
}

.projecttable_wdth6 {
    width: 16%;
}

.projecttable_wdth7 {
    width: 18%;
}

.projecttable_wdth8 {
    width: 6%;
}

.servicetable_wdth1 {
    width: 30%;
}

.servicetable_wdth2 {
    width: 25%;
}

.servicetable_wdth3 {
    width: 15%;
}

.servicetable_wdth4 {
    width: 20%;
}

.servicetable_wdth5 {
    width: 10%;
}

.pt_wdth1 {
    width: 30%;
}

.pt_wdth2 {
    width: 25%;
}

.pt_wdth3 {
    width: 15%;
}

.pt_wdth4 {
    width: 10%;
}

.pt_wdth5 {
    width: 10%;
}

.pt_wdth6 {
    width: 10%;
}


/* .draft-view-area-js {
    width: auto;
    overflow-y: auto;
    margin: auto;
    text-align: center;
    max-height: calc(100vh - 54px);
    min-height: calc(100vh - 54px);
} */

.single-team.brand-profile-card {
    padding: 42px 10px;
}


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

      Add Project Page Question Tab

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

.project_links.active {
    color: var(--theme-primary-color);
}

.project_links:hover {
    color: var(--theme-primary-color);
}

.project_links {
    color: var(--color-gray);
    font-size: var(--font-size-14);
    text-transform: uppercase;
    padding: 0 25px 0 0;
}

.project_links.active .tab-count {
    display: inline-block;
}


/*table view project*/

.project_tr {
    display: flex;
    background: var(--color-fff);
    padding: 20px 10px;
    margin-bottom: 15px;
    border-radius: var(--border-radius-10);
    align-items: center;
    width: 100%;
}

.project_main_td {
    display: flex;
    align-items: center;
    padding-right: 15px;
}

.pro_tdimg {
    display: inline-block;
}

.pro_tdimages {
    border-radius: var(--border-radius-50);
    min-height: 70px;
    min-width: 70px;
    max-height: 70px;
    max-width: 70px;
    margin-right: 10px;
}

.pro_tdimages2 {
    border-radius: var(--border-radius-50);
    min-height: 50px;
    min-width: 50px;
    max-height: 50px;
    max-width: 50px;
    margin-right: 10px;
}

.pro_tdtexth5 {
    font-size: var(--font-size-18);
    color: #000000;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 10px 0;
}

.pro_tdtextp {
    margin-bottom: 0;
    font-size: var(--font-size-12);
    color: var(--color-gray);
    font-weight: var(--font-weight-normal);
}

.pro_vertdh6 {
    color: var(--color-0ecb86);
    font-size: var(--font-size-14);
    text-transform: capitalize;
    display: flex;
    margin-bottom: 0;
}

.inprogressh6 {
    font-size: var(--font-size-14);
    color: var(--color-light-blue);
    background: var(--color-ebf2f7);
    border-radius: var(--border-radius-5);
    padding: 6px 10px;
    margin-bottom: 0;
    display: inline-block;
    cursor: pointer;
}

.task_btngreen {
    background: var(--color-0ecb86);
    border: 1px solid var(--color-0ecb86);
    border-radius: var(--border-radius-5);
    color: var(--color-fff);
    padding: 4px 20px;
    font-size: var(--font-size-14);
    white-space: nowrap;
}

.more_horizicon {
    color: var(--color-gray);
    vertical-align: middle;
    cursor: pointer;
}

.pcd-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    margin: 0 4px;
    border-radius: var(--border-radious-50);
}


/* border colors match the previously defined border colors and background/section color */

.bdr-tl-bl {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.bdr-tr-br {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.table td,
.table th {
    padding: .75rem;
    vertical-align: center;
    /*border-top: 1px solid #dee2e6;*/
}

.tble-head {
    color: var(--color-gray);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-medium);
    opacity: 0.5;
}

.task_btntimeyellow {
    background: var(--color-yellow);
    border: 1px solid var(--color-yellow);
    border-radius: var(--border-radius-5);
    color: var(--color-fff);
    padding: 4px 20px;
    font-size: var(--font-size-14);
}

.add-ic-tb {
    color: var(--color-light-blue);
    background: var(--color-eaeef1);
    border-radius: var(--border-radius-50);
    font-size: var(--font-size-18);
    width: 40px;
    height: 40px;
    line-height: var(--line-height-40);
    text-align: center;
}

.pro_vertdh6.pro_veri-gray {
    color: var(--color-eeeeee);
}

.inprogressrevision {
    font-size: var(--font-size-14);
    color: var(--color-yellow);
    background: var(--color-f7f3e5);
    border-radius: var(--border-radius-5);
    width: 90px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
}

.task_expired {
    background: var(--theme-primary-color);
    border: 1px solid var(--theme-primary-color);
    border-radius: var(--border-radius-5);
    color: var(--color-fff);
    padding: 4px 20px;
    font-size: var(--font-size-14);
    text-transform: capitalize;
}


/*profile setting css*/

.tab-bg {
    border-radius: var(--border-radius-10);
    background: var(--color-eeeeee50);
}

.epf-img {
    width: 100px;
    height: 100px;
    border-radius: var(--border-radius-50);
}

.profile-name {
    color: var(--color-0f3148);
    font-size: var(--font-size-28);
    font-weight: var(--font-weight-normal);
}

.prof-ic i {
    color: var(--color-light-blue);
}

.add-dtl {
    color: var(--color-0f3148);
    font-size: var(--font-size-15);
    margin-left: 11px;
    font-weight: var(--font-weight-normal);
    word-break: break-all;
}

.address-pr li {
    padding: 6px 0;
}

.visitar-card {
    background: var(--color-fff);
    color: var(--color-000);
    padding: 24px;
    border-radius: var(--border-radius-10);
    box-shadow: 0px 5px 20px rgb(153 167 176 / 26%);
}

.agency-plan {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-18);
    letter-spacing: var(--letter-spacing);
    margin-bottom: 7px;
}

.dd-design {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-14);
}

.visit-new {
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-normal);
    margin-bottom: 10px;
}

.header-title {
    color: var(--color-gray);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-normal);
}
.brouse-file {
    border: 2px dashed var(--color-light-blue);
    padding: 5px 25px;
    border-radius: 6px;
    color: var(--color-light-blue);
    background: #fff;
}
.document-atach-file-2 {
    font-size: var(--font-size-15);
    border: 1px dashed rgba(153, 167, 176, .6);
    padding: 20px 20px;
    border-radius: var(--border-radius-10);
    position: relative;
}
.document-atach-file-2 img {
    width: 35px;
}
.custm-form-control {
    background: rgb(234 238 241 / 60%);
    border: 1px solid #696969;
    border-radius: var(--border-radius-10);
    height: 60px;
    color: var(--color-0f3148);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-medium);
    /* line-height: var(--line-height-21); */
    padding: 15px 30px;
}

.ccstum-select .select2-selection {
    background: rgb(234 238 241 / 60%);
    border: 0;
    border-radius: var(--border-radius-10);
    height: 60px;
    color: var(--color-0f3148);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-medium);
    /* line-height: var(--line-height-21); */
    padding: 15px 30px;
    position: relative;
}

.select2-container--default .select2-selection--single {
    background-color: #0000 !important;
    border: 1px solid #0000 !important;
    border-radius: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none;
}

.select2-container--open .select2-dropdown {
    left: 0;
    top: 2px;
}

.ccstum-select {
    background: rgb(234 238 241 / 60%);
    /* height: 63px; */
    background-image: url(/assets/front/common/images/expand_more-blue.svg);
    background-size: 27px;
    background-repeat: no-repeat;
    background-position: center right 5px;
    border: none;
}

.select2-container .select2-selection--single {
    height: 63px !important;
}

.lable-gray {
    font-size: var(--font-size-18);
    color: var(--color-gray);
    font-weight: var(--font-weight-medium);
}

.cont-icon {
    font-size: var(--font-size-16);
    margin-top: 4px;
    color: var(--color-light-blue);
}

.crown_icon {
    width: 52px;
}

.currency-status {
    position: relative;
}


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

      Dashboard-Project-page

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

.circle_images {
    height: 70px;
    width: 70px;
    border-radius: var(--border-radius-50);
}


/*clients page*/

.clientadd_request {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    border-radius: var(--border-radius-5)
}

.Addnewclient {
    border-style: dashed;
    height: 100%;
    text-align: center;
    color: var(--color-gray);
    text-transform: capitalize;
    display: flex;
    align-items: center;
    min-height: 312px;
    justify-content: center;
    opacity: 0.54;
}

.clientactive_col {
    border: 1px solid var(--color-eeeeee);
    padding: 10px;
    margin-bottom: 10px;
    position: relative;
}

.clientactive_col:hover .clientcoloptions {
    opacity: 10;
}

.clientcoloptions {
    display: flex;
    justify-content: flex-end;
}

.col-circle-img {
    text-align: center;
}

.client_nameid {
    text-align: center;
    padding: 28px 0 23px;
}

.client_nameh5 {
    font-size: var(--font-size-18);
    color: var(--color-0f3148);
}

.client_idh6 {
    font-size: var(--font-size-12);
    color: var(--color-gray);
    padding-top: 6px;
    padding-bottom: 20px;
}

.clients3_imges {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.clients3_imgesimg {
    margin: 2px;
    height: 27px;
    width: 27px;
    border-radius: var(--border-radius-50);
}

.client_bg {
    background-color: var(--color-fff);
}

.clientadd_request i {
    color: var(--color-fff);
}


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

      Dashboard-Project-page-end

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


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

      project-report-main-page-start

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

span.project_re_boxspan {
    background: var(--color-0ecb86);
    height: 70px;
    width: 100px;
    border-radius: var(--border-radius-5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-fff);
    font-size: var(--font-size-20);
}

.project_re_boxcontent {
    padding-left: 20px;
}

.project_re_box_h6 {
    padding-bottom: 0;
}

.project_re_boxmain:hover {
    box-shadow: 0px 0 15px var(--color-54545457);
}

.project_re_boxmain:hover .project_re_boxbtn {
    display: block;
}

.project_re_boxbtn {
    margin-left: 90px;
    display: none;
}

.project_re_boxyellow {
    background: var(--color-yellow) !important;
    color: var(--color-fff);
}

.add_request {
    background: var(--cancle-color);
    border: none;
    color: var(--color-fff);
    text-transform: capitalize;
    border-radius: var(--border-radius-5);
    height: 40px;
    width: 120px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add_request:hover {
    display: flex;
}

.project_tabcontent {
    margin-top: 30px;
}


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

      project-report-main-page-end

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


/*project-listing-start*/

.circle_icon {
    font-size: var(--font-size-18);
    vertical-align: middle;
    padding-bottom: 4px;
    padding-right: 10px;
}

.proreporttable_wdth1 {
    width: 45%;
}

.proreporttable_wdth2 {
    width: 14%;
}

.proreporttable_wdth3 {
    width: 15%;
    text-align: center;
}

.proreporttable_wdth4 {
    text-align: center;
    width: 20%;
}

.back-arrow {
    background: var(--cancle-color);
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-5);
    color: var(--color-fff);
    display: flex;
    justify-content: center;
    align-items: center;
}


/*project-listing-end*/


/*Additional Modules*/

.add_blogprt {
    border: 1px solid var(--color-70707024);
    padding: 15px 20px;
    border-radius: var(--border-radius-10);
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.add_blogprt_img {
    background: var(--color-light-blue);
    border-radius: var(--border-radius-5);
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 70px;
    max-width: 70px;
    width: 70px;
    height: 70px;
}

.add_blogprt_text {
    padding-left: 20px;
}

.blog_iconsadd {
    font-size: var(--font-size-28);
    color: var(--color-fff);
}

.additional_moduls_sections {
    margin-top: 25px;
}

.add_blogprt_texth5 {
    color: var(--color-0f3148);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-normal);
    text-transform: capitalize;
}

.additional_moduls_sections .col-md-4 {
    padding: 0 !important;
}


/*Additional Modules-end*/


/*additional-blog-page-start*/

.top_blogbar {
    display: flex;
    align-items: center;
}

.blog_sechdingh4 {
    font-size: var(--font-size-14);
    color: #000000;
    margin-left: 40px;
    text-transform: uppercase;
}

.blog_sechdingh4:hover {
    color: #000000;
}

.blog_columssec {
    margin-top: 40px;
}

.business_funsec_img {
    width: 100%;
    border-radius: 5px 5px 0 0;
}

.business_funsec {
    background: var(--color-fff);
    margin-bottom: 60px;
}

.business_funsectextprt {
    padding: 30px 10px 20px;
    text-align: center;
}

.business_funsectextp {
    /* padding-top: 7px; */
}


/*additional-blog-page-end*/


/* additional-portfolio start*/

.business_funsecclock i {
    font-size: var(--font-size-16);
    vertical-align: middle;
    padding-right: 8px;
    padding-bottom: 2px;
}


/* additional-portfolio end*/


/*billiing and subscription start*/

.billingtable_wdth1 {
    width: 11%;
    text-align: center;
}

.billingtable_wdth2 {
    width: 33%;
}

.billingtable_wdth3 {
    width: 8%;
}

.billingtable_wdth4 {
    text-align: center;
    width: 10%;
    justify-content: center;
}

.billingtable_wdth5 {
    text-align: center;
    width: 10%;
    justify-content: center;
}

.billingtable_wdth6 {
    text-align: center;
    width: 12%;
    justify-content: center;
}

.billingtable_wdth7 {
    width: 10%;
    justify-content: flex-end;
}

.billingtable_wdth8 {
    width: 4%;
    justify-content: flex-end;
}

.billing_tdtextp {
    margin-bottom: 0;
    color: var(--color-gray);
    font-size: var(--font-size-15);
    padding-top: 3px;
    line-height: var(--line-height-16);
}


/*billiing and subscription end*/


/*project draft filter start*/

.pro_fil_image {
    width: 100%;
    border-radius: var(--border-radius-5);
}

.pro_filter_columssec .col-lg-2 {
    padding: 4px;
}


/*project draft filter end*/


/*additional-reporting-page-start*/

.links_bottom_bordr.active:before {
    content: '';
    position: absolute;
    bottom: -8px;
    width: 30px;
    height: 2px;
    left: 1px;
    background: var(--theme-primary-color);
}

.links_bottom_bordr {
    position: relative;
}

.daily_report_overmain {
    background: var(--color-fff);
    border-radius: var(--border-radius-20);
    padding: 20px 20px 30px;
    margin-bottom: 10px;
}

.daily_report_heh2 {
    font-weight: var(--font-weight-medium);
    color: var(--color-0f3148);
}

.daily_report_hep {
    font-size: var(--font-size-13);
    font-weight: var(--font-weight-normal);
}

.daily_report_colsec {
    padding: 10px 20px 10px 30px;
    border-radius: var(--border-radius-10);
    margin-bottom: 19px;
}

.daily_report_bgcolor1 {
    background: var(--color-e7faf3);
    border-left: 10px solid var(--color-0ecb86);
}

.daily_report_numcolor1 {
    color: var(--color-0ecb86);
}

.daily_report_bgcolor2 {
    background: var(--color-e6f4ff);
    border-left: 10px solid var(--color-light-blue);
}

.daily_report_numcolor2 {
    color: var(--color-light-blue);
}

.daily_report_bgcolor3 {
    background: var(--color-fef5ee);
    border-left: 10px solid var(--color-light-orange);
}

.daily_report_numcolor3 {
    color: var(--color-light-orange);
}

.daily_report_bgcolor4 {
    background: var(--color-fefaec);
    border-left: 10px solid var(--color-yellow);
}

.daily_report_numcolor4 {
    color: var(--color-yellow);
}

.daily_report_cols {
    margin-top: 20px;
}

.daily_report_colnum {
    font-size: var(--font-size-28);
    font-weight: var(--font-weight-medium);
    margin-bottom: 5px;
}

.daily_report_colh5 {
    font-size: var(--font-size-14);
    color: var(--color-0f3148);
    padding-bottom: 4px;
    min-height: 37px;
}

.project_links.active hr {
    display: block !important;
}

.Pro_statusover_main {
    border-radius: var(--border-radius-10);
    padding: 20px;
    position: relative;
}

.Pro_statusover_h5 {
    color: var(--color-fff);
}

.Pro_statusover_progress {
    height: 5px;
    background-color: var(--color-f1f1f126);
    border-radius: var(--border-radius-8);
}

.Pro_statusover_progressbar {
    background: var(--color-fff);
}

.Pro_statusover_per {
    font-size: var(--font-size-12);
    color: var(--color-f1f1f17d);
}

.pro_materialicon i {
    font-size: var(--font-size-44);
    color: var(--color-fff);
    background: var(--color-e5e5e51c);
    border-radius: var(--border-radius-50);
    height: 72px;
    width: 72px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pro_materialicon {
    position: absolute;
    top: 18px;
    right: 10px;
    background: var(--color-f1f1f124);
    border-radius: var(--border-radius-50);
}

.Pro_statusover_gradient1 {
    background: linear-gradient(to top right, #003984d9 10%, #0ecb86c4 80%);
}

.Pro_statusover_gradient3 {
    background: linear-gradient(to top right, #7554bb 10%, #7a88bc 80%);
}

.Pro_statusover_gradient2 {
    background: linear-gradient(to top right, #0274c2 10%, #07abc3 80%);
}

.Pro_statusover_gradient4 {
    background: linear-gradient(to top right, #f2986a 10%, #f2b06b 80%);
}

.no_record {
    justify-content: center;
    display: flex;
    align-items: center;
    margin: 22px 0;
}

.error_icon {
    color: var(--color-gray);
    font-size: var(--font-size-50);
}

.No_record_text {
    text-transform: capitalize;
    padding-left: 10px;
    font-size: var(--font-size-28);
    color: var(--color-gray);
    font-weight: var(--font-weight-normal);
}


/*designer-tab*/

.designer_cir_img {
    width: 100px;
    height: 100px;
    border-radius: var(--border-radius-50);
}

.designer_img {
    text-align: center;
}

.designer_tab {
    text-align: center;
}

.designer_tab_texth5 {
    font-size: var(--font-size-26);
    font-weight: var(--font-weight-bold);
}

.designer_tab_text {
    margin-top: 12px;
}

.list_per {
    margin-top: 15px;
    color: var(--theme-primary-color);
    font-weight: var(--font-weight-medium);
}

.desinger-table {
    display: flex;
    border-bottom: 1px solid var(--color-eeeeee);
}

.desinger-table-main {
    border: 1px solid var(--color-eeeeee);
    border-radius: var(--border-radius-10);
    margin-top: 8px;
}

.table_data_des {
    padding: 17px 20px;
    border-right: 1px solid var(--color-eeeeee);
    width: 34%;
}

.des_table_td {
    font-size: var(--font-size-16);
    display: flex;
    align-items: center;
}

.des_table_span {
    padding-right: 10px;
    white-space: nowrap;
}


/*date-picker*/

.Messages-Overdate_picker {
    position: relative;
}

#startDate,
#startDate2,
#startDate3,
#startDate4,
#startDate5,
#endDate,
#endDate2 {
    border: none;
    border-radius: var(--border-radius-10);
    padding: 0px !important;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    height: auto;
    margin-right: 10px;
    background: transparent;
    width: 130px;
}

.Messages-Overdate_picker .btn.btn-outline-secondary {
    border: none;
    position: absolute;
    height: 100%;
    right: -10px;
}

.Messages-Overdate_picker .btn.btn-outline-secondary:active {
    background-color: transparent;
    border-color: var(--color-eaeef1);
    outline: none;
}

.Messages-Overdate_picker .btn.btn-outline-secondary:focus {
    border-color: var(--color-eaeef1);
    outline: none;
}

.Messages-Overdateleft,
.Messages-Overdateright {
    position: relative;
    display: flex;
    align-items: center;
}


/*message-overview*/

.Messages-Overdatecont {
    border: 1px solid var(--color-eaeef1);
    border-radius: var(--border-radius-10);
    padding: 10px 20px;
    display: flex;
    align-items: center;
}

.light_mess {
    color: var(--color-gray);
    font-size: var(--font-size-15);
    padding-right: 10px;
}

.mess_date {
    color: var(--color-0f3148);
    font-size: var(--font-size-15);
    text-transform: capitalize;
    font-weight: var(--font-weight-semibold)
}

.mess_date:hover {
    color: var(--color-0f3148);
}

.dropdwn_list {
    padding: 10px;
    top: 43px;
    left: 2px;
}

.mess_calender {
    color: var(--color-light-blue);
    padding-left: 30px;
    vertical-align: middle;
    position: absolute;
    right: 6px;
    top: 10px;
}

.mess_calender2 {
    top: 0;
}

.light_arrowmess {
    color: var(--color-eaeef1);
    vertical-align: middle;
    padding: 0 40px 0 29px;
}

#mess_select {
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
}

.Messages-Overselect {
    width: 160px;
    margin-right: 10px;
    position: relative;
}

.Analytics_cnt_color {
    background: var(--color-99a7b00f);
    border-left: 10px solid var(--color-gray);
}

.Messages-Overright {
    display: flex;
}

.Categories_cnt_color {
    background: var(--color-99a7b00f);
}

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

.md-none {
    display: none;
}


/*additional-reporting-page-end*/


/*add new intake form css*/

.blue-popup-heading {
    font-size: var(--font-size-20);
    margin-top: 6px;
}

.logo-img {
    width: 60px;
}

.label-h-title {
    font-size: var(--font-size-18);
    color: var(--color-0f3148);
    font-weight: var( --font-weight-medium);
}

.sumary-label {
    background: var(--color-eaeef160);
    border: 1px solid var(--color-eaeef160);
    border-radius: var(--border-radius-10);
    height: auto;
    color: var(--color-0f3148);
    font-size: var(--font-size-15);
    padding: 15px 30px;
    position: relative;
    margin-bottom: 15px;
    cursor: pointer;
}

.sumary-label:hover {
    border: 1px solid var(--color-light-blue);
}

.sumary-label:hover a {
    opacity: 1;
}

.edit-summary {
    position: absolute;
    right: 10px;
    color: var(--color-light-blue);
    text-align: center;
    font-size: var(--font-size-13);
    top: 24px;
    transition: all 0.2s ease-out;
    opacity: 0;
    right: 20px;
}

.pass-generate {
    position: relative;
    background: var(--color-fff);
    padding: 19px 25px;
    border-radius: var(--border-radius-10);
    color: var(--color-0f3148);
}

.px-41 {
    padding-left: 41px;
    padding-right: 41px;
}

.custm-form-control-2 {
    background: var(--color-0000);
    border: 0;
    border-radius: 0;
    height: 25px;
    color: var(--color-0f3148);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-21);
    padding: 0 20px 0 0;
}

.custm-form-control-2:focus {
    color: var(--color-0f3148);
    background-color: var(--color-0000);
    border-color: var(--color-0000);
    outline: 0;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, .25);
}

.upload_file {
    width: 100%;
    height: 100%;
    padding: 4px;
    background: transparent;
    position: absolute;
    cursor: pointer;
    top: 0px;
    box-shadow: none;
    font-size: 0;
    border: none;
    opacity: 0;
}


/*add new intake form css end*/


/*add-team-switch-btn-css*/

.switch {
    position: relative;
    display: inline-block;
    width: 41px;
    height: 22px;
    margin: 0 15px;
    margin-bottom: .5rem;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-eeeeee);
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 4px;
    bottom: 3.3px;
    background-color: var(--color-c7c7c7);
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: var(--color-eeeeee);
}

input:focus+.slider {
    box-shadow: 0 0 1px var(--unnamed-color-eeeeee);
}

input:checked+.slider:before {
    -webkit-transform: translateX(19px);
    -ms-transform: translateX(19px);
    transform: translateX(19px);
    background-color: var(--color-light-blue);
}

.slider.round {
    border-radius: var(--border-radius-34);
}

.slider.round:before {
    border-radius: var(--border-radius-50);
}

.ffl-file-icon {
    padding: 0 40px;
}

.side-s-icon li {
    padding: 11px 0;
}

.side-s-icon {
    position: absolute;
    right: -62px;
    top: 118px;
    background: var(--color-light-blue);
    padding: 21px 16px;
    border-radius: var(--border-radius-5);
    color: var(--color-fff);
}


/*add-team-switch-btn-css-end*/


/*blue-popup-header-start*/

.blue-popup-header h2 {
    font-size: var(--font-size-20);
    margin-top: 6px;
}

.blue-popup-header .close-info {
    display: flex;
}

.close-info a {
    color: var(--color-gray);
    margin: 15px;
    display: inline-block;
}


/*blue-popup-header-end*/


/*add-new-category-start*/

.basicinfo_input {
    padding-right: 136px;
}

.add-field {
    color: var(--color-ef495f);
}

.basic_fonts_P {
    background: rgb(234 238 241 / 60%);
    padding: 20px 30px;
    font-size: var(--font-size-18);
    line-height: var(--line-height-21);
    color: var(--color-0f3148);
}

.border-topradius {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.border-endradius {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.custom-color {
    background: rgb(234 238 241 / 60%);
    border: 0;
    border-radius: var(--border-radius-10);
    color: var(--color-gray);
    padding: 0px 10px;
}

.output-color {
    position: relative;
    display: inline-flex;
    /* background: var(--color-fff); */
    padding: 5px 0px;
    color: var(--color-0f3148);
    border-radius: var(--border-radius-5);
    margin: 10px 10px 10px 0px;
    align-items: center;
    font-size: var(--font-size-15);
}

.output-color span {
    width: 24px;
    height: 24px;
    border-radius: var(--border-radius-100);
    background: var(--color-0ecb86);
    display: inline-block;
    margin-right: 10px;
}

.gray_crossicon i {
    color: var(--color-gray);
    font-size: var(--font-size-16);
    transform: translate(8px, 2px);
}

.addhexcode_input {
    width: 150px;
    border: 1px solid var(--color-gray);
    border-radius: var(--border-radius-8);
    height: 34px;
    padding: 9px;
    text-transform: capitalize;
    color: var(--color-gray);
    background: transparent;
    display: inline-block;
}

.desc_content {
    color: var(--color-0f3148);
    padding: 20px 30px;
    border-radius: var(--border-radius-10);
    font-size: var(--font-size-15);
    line-height: var(--line-height-21);
}

.desc_content2 {
    padding: 0px 30px;
    font-size: var(--font-size-13);
    line-height: 20px;
    color: var(--color-gray);
    margin-top: 1rem;
}

.document-atach-file {
    text-align: center;
    font-size: var(--font-size-15);
    position: relative;
    border: 1px dashed rgba(153, 167, 176, .6);
    padding: 48px 0 0;
    border-radius: var(--border-radius-10);
    overflow: hidden;
    min-height: 279px;
}

/* #add_files {
    width: 100%;
    height: 100%;
    padding: 4px;
    background: transparent;
    position: absolute;
    cursor: pointer;
    top: 0px;
    box-shadow: none;
    font-size: 0;
    border: none;
    margin-top: -11px;
}

#add_files::before {
    content: '';
    position: absolute;
    background: transparent;
    font-size: var(--font-size-20);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

#add_files::after {
    content: '';
    position: absolute;
    color: var(--color-808080);
    font-size: var(--font-size-20);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} */

.document-atach-fileimg {
    width: 80px;
    margin: auto;
}

.document-atach-filestrong {
    display: block;
    font-weight: var(--font-weight-semibold);
    margin: 12px 0;
    font-size: var(--font-size-18);
    color: var(--color-0f3148);
    margin-bottom: 0;
}

.document-atach-filespan {
    color: var(--color-0f3148);
    font-size: var(--font-size-15);
}

.document-atach-filep {
    margin-top: 30px;
    color: var(--color-gray);
    font-size: var(--font-size-13);
    line-height: var(--line-height-21);
}

.mall_icon,
.gallery_icon {
    font-size: var(--font-size-60);
    color: var(--color-eeeeee);
}

.prevs-next-btn {
    position: sticky;
    bottom: 0;
    padding: 15px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 66px;
    margin-bottom: 30px;
    /* background: #ffffffbf; */
    /*box-shadow: 0px 0px 10px #0000001A !important;*/
}

.font_styesspan {
    font-size: var(--font-size-13);
    color: var(--color-gray);
    font-weight: var( --font-weight-medium);
}

.select_arrow_none {
    /* for Firefox */
    -moz-appearance: none;
    /* for Chrome */
    -webkit-appearance: none;
}

:focus {
    outline: -webkit-focus-ring-color auto 0px;
}

.select_box {
    position: relative;
}

.portfolio_arrow {
    top: 20px;
}

select {
    outline: none;
}


/* The switch - the box around the slider */

.portfolio_switch {
    position: relative;
    display: block;
    width: 50px;
    height: 20px;
}


/* Hide default HTML checkbox */

.portfolio_switch input {
    opacity: 0;
    width: 0;
    height: 0;
}


/* The slider */

.portfolio_slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-eaeef1);
    -webkit-transition: .4s;
    transition: .4s;
}

.portfolio_slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.portfolio_slider:before {
    background-color: var(--color-0ecb86);
}

input:focus+.portfolio_slider {
    box-shadow: 0 0 1px var(--color-2196F3);
}

input:checked+.portfolio_slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.portfolio_slider.round {
    border-radius: var(--border-radius-34);
}

.portfolio_slider.round:before {
    border-radius: var(--border-radius-50);
}

.toggle_switch_main {
    display: flex;
}

.toggle_switch_active {
    padding-left: 10px;
    color: var(--color-0ecb86);
}


/*add-new-category-end*/


/*Designer-skills-start*/

.brand_logos_ulli {
    background: var(--color-eaeef1);
    border-radius: var(--border-radius-10);
    margin-right: 5px;
    padding: 17px 20px;
    font-size: var(--font-size-15);
}

.bg-greenclrf {
    background-color: var(--color-0ecb86);
    color: var(--color-fff);
}


/*Designer-skills-end*/


/*Dashboard-Designer-2-start*/

.designertable_wdth1 {
    width: 25%;
}

.designertable_wdth2 {
    width: 12%;
}

.designertable_wdth7 {
    width: 15%;
}


/*Dashboard-Designer-2-end*/


/*additional-feedback-matrix-start*/

.feedback_h5 {
    text-transform: uppercase;
    font-weight: var(--font-weight-normal);
}

.feedback_gradient1 {
    background: linear-gradient(to top right, #9962b7 10%, #9b7ab9 80%);
}

.feedback_gradient2 {
    background: linear-gradient(to top right, #078685 10%, #16ca8a 80%);
}

.feedback_gradient3 {
    background: linear-gradient(to top right, #003dbf 10%, #0ea4c0 80%);
}

.feedback_gradient4 {
    background: linear-gradient(to top right, #fb9500 10%, #fdbf04 80%);
}

.feedmatrix_wdth1 {
    width: 25%;
    text-align: left;
}

.feedmatrix_wdth3 {
    width: 10%;
}

.feedmatrix_wdth4 {
    width: 14%;
}

.feedmatrix_wdth5 {
    width: 20%;
}

.feedmatrix_wdth6 {
    width: 30%;
}

.feedback-rating {
    background: rgb(234 238 241 / 60%);
    display: flex;
    border-radius: var(--border-radius-20);
    padding: 8px;
    align-items: center;
}

.Qa_questions_main {
    padding: 10px 0;
}

.ratingdetail_wdth1 {
    width: 9%;
    text-align: left;
}

.ratingdetail_wdth2 {
    width: 30%;
    text-align: left;
}

.ratingdetail_wdth3 {
    width: 10%;
}

.ratingdetail_wdth4 {
    width: 16%;
}

.ratingdetail_wdth5 {
    width: 10%;
}

.ratingdetail_wdth6 {
    width: 11%;
}

.ratingdetail_wdth7 {
    width: 10%;
}

.ratingdetail_wdth8 {
    width: 10%;
}

.ratingdetail_wdth9 {
    width: 2%;
}

.Categories_wdth1 {
    width: 24%;
}

.Categories_wdth2 {
    width: 18%;
}

.Categories_wdth3 {
    width: 10%;
}

.Categories_wdth4 {
    width: 20%;
}

.Categories_wdth5 {
    width: 20%;
}

.Categories_wdth6 {
    width: 10%;
}

.designerqastats_wdth1 {
    width: 20%;
}

.designerqastats_wdth2 {
    width: 10%;
}

.designerqastats_wdth3 {
    width: 20%;
}

.designerqastats_wdth4 {
    width: 20%;
}

.designerqastats_wdth5,
.designerqastats_wdth6,
.designerqastats_wdth7 {
    width: 12%;
}

.designerqastats_wdth8 {
    width: 3%;
}


/*additional-feedback-matrix-end*/


/*additional-affiliate-user-start*/

.bglight-gray {
    background-color: var(--color-f0f2f4) !important;
}

.Commission-Owed {
    padding-left: 15px;
}

.affiliate_wdth3,
.affiliate_wdth4,
.affiliate_wdth5,
.affiliate_wdth6 {
    width: 20%;
    justify-content: center;
}

.affiliate_wdth7 {
    width: 10%;
}


/*additional-affiliate-user-end*/


/*additional-nagative-rating-monitoring-start*/

.monitoring_wdth1 {
    width: 5%;
}

.monitoring_wdth2,
.monitoring_wdth3 {
    width: 21%;
}

.monitoring_wdth4 {
    width: 12%;
    justify-content: center;
}

.monitoring_wdth5 {
    width: 6%;
}

.monitoring_wdth6 {
    width: 11%;
    justify-content: flex-end;
}

.monitoring_img {
    height: 46px;
    width: 46px;
}

.monitoring_wdth7,
.monitoring_wdth8,
.monitoring_wdth9 {
    width: 8%;
    justify-content: flex-start;
}

.monitoring_wdth10 {
    width: 5%;
    justify-content: flex-end;
}

.QA_sec {
    position: relative;
}

.text_icons {
    color: var(--color-yellow);
    position: absolute;
    bottom: -14px;
    left: 12px;
}


/*additional-nagative-rating-monitoring-end*/


/*additional-abandoned-user-list-start*/

.Abandoned_wdth3,
.Abandoned_wdth4 {
    width: 20%;
}

.Abandoned_wdth2 {
    width: 30%;
}

.Abandoned_wdth1 {
    width: 27%;
}

.Abandoned_wdth5 {
    width: 4%;
    justify-content: flex-end;
}


/*additional-abandoned-user-list-end*/


/*additional-cancel-request-user-start*/

.Reason_wdth1 {
    width: 16%;
}

.Reason_wdth2 {
    width: 13%;
}

.Reason_wdth3 {
    width: 13%;
    justify-content: center;
}

.Reason_wdth4 {
    width: 9%;
    justify-content: center;
}

.Reason_wdth5 {
    width: 13%;
    justify-content: center;
}

.Reason_wdth6 {
    width: 12%;
}

.Reason_wdth7 {
    width: 9%;
}

.Reason_wdth8 {
    width: 9%;
}

.Reason_wdth9 {
    width: 6%;
}


/*additional-cancel-request-user-end*/

.magic_search_mobile {
    display: none;
}


/*chat-start*/

.chat_left_sec {
    width: 450px;
    background: var(--color-fff);
    padding: 30px 20px;
    min-width: 450px;
}

.input-search {
    position: relative;
}

.chat-input {
    background: var(--color-fafbfb);
    border: none;
    width: 100%;
    padding: 12px 20px;
    border-radius: var( --border-radius-6);
}

.chat-search {
    position: absolute;
    top: 9px;
    right: 10px;
}

.chat-innertab {
    background: none;
    border: 1px solid var(--color-eaeef1);
}

.star-iconchat {
    display: block;
    text-align: center;
    margin-top: 18px;
    padding-right: 10px;
}

.chat-innertab.active {
    background: var(--color-f7fbff) !important;
}

.chat_right_sec {
    margin: 20px;
    width: 100%;
}

.chat_right_innerleft {
    width: 98%;
}

.today-card {
    background: var(--color-fff);
    border-radius: var(--border-radius-6);
    padding: 10px;
}

.hi_isha_bg {
    padding: 10px 20px;
    margin-bottom: 2px;
    border-radius: var(--border-radius-17);
}

.hi_isha_p {
    font-size: var(--font-size-16);
    text-transform: capitalize;
}

.today-chat_section {
    padding: 8px 0px;
}

.chat-vedioimg {
    width: 100%;
    max-width: 330px;
}

.vido-back {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    background: var(--color-f6f6f0);
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: var(--border-radius-50);
    display: flex;
    justify-content: center;
    align-items: center;
}

.vedio-back-icon {
    font-size: var(--font-size-40);
    padding-top: 0;
}

.v-pills-tabcnt {
    position: absolute;
    width: 57%;
    right: 269px;
    top: 20px;
}

.v-pills-tabcnt2 {
    position: absolute;
    width: 57%;
    right: 269px;
    top: 20px;
}

.text_msg {
    background: var(--color-fff);
    border-radius: var(--border-radius-6);
    padding: 10px;
    position: relative;
}

.Today-chat-flex {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.text_msg_todaychat {
    width: 100%;
    margin-right: 5px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.text_msg_unread {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    width: 132px;
}

.unread_mg {
    background: var(--color-e6f4ff);
    border-radius: var(--border-radius-5);
    padding: 10px;
}

.unread_icon {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.unread_content {
    text-align: center;
    font-weight: var(--font-weight-semibold);
    margin-top: 7px;
}

.unreadmsg_img {
    margin-top: 10px;
}

.unreadmsg_img {
    margin-top: 10px;
    height: 70px;
    overflow: hidden;
    border-radius: var(--border-radius-5);
}

.unread_icon3 {
    background: var(--color-0190ff21);
}

.start-writing-input {
    width: 100%;
    border: none;
    padding: 20px;
    border-radius: var(--border-radius-5);
}

.start-writing-input::placeholder {
    font-style: italic;
    color: var(--color-gray);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-15);
}

.start-writing-msg {
    position: sticky;
    bottom: 0;
    z-index: 1;
}

.start-writing-icons {
    position: absolute;
    right: 18px;
    top: 8px;
}

.text-top_icons {
    position: sticky;
    top: 60px;
    background: #fff;
    padding: 14px 0;
    z-index: 2;
}

.chat-drop {
    position: absolute;
    top: 14px;
    right: 0;
}


/*chat-end*/


/*email-setting-start*/

.emailseting_btns {
    display: flex;
}

.email_nav_tabs {
    float: left;
    display: block;
    margin-right: 20px;
    border-bottom: 0;
    border-right: 1px solid transparent;
    padding-right: 15px;
}

.email_ryt_tab {
    border-radius: var(--border-radius-10);
    background: var(--color-f0f2f4);
    margin: 5px 0;
    padding: 20px;
    width: 440px;
}

.email_ryt_tab.active .pro_tdtexth5 {
    color: var(--color-light-blue);
}

.email_ryt_tab.active {
    border: none;
}

.email-rightactive {
    display: none;
}

.email_ryt_tab.active .email-rightactive {
    display: block;
}

.email_setting_tabcontent {
    background: var(--color-fff);
    border-radius: var(--border-radius-10);
    margin-left: 475px;
    padding: 30px 25px;
}

.tab_content_topheader {
    background: var(--theme-secondry-color);
    text-align: center;
    padding: 30px 0;
    border-top-right-radius: var(--border-radius-10);
    border-top-left-radius: var(--border-radius-10);
}

.email_head_logo {
    max-width: 200px;
}

.customer_name_content {
    padding: 30px 40px;
}

.post_a_new_pro {
    margin: 30px 0;
    text-align: center;
}

.your_sincerely {
    margin-bottom: 50px;
}

.request_cat_switch {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}


/*email-setting-end*/


/*request-categories-start*/

.req_category_img {
    background: var(--color-f0f2f4);
    height: 60px;
    width: 60px;
    border-radius: var(--border-radius-50);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
}

.req_categoryimages {
    width: 100%;
    max-width: 40px;
}

.req_cate_wdth1 {
    width: 48%;
}

.req_cate_wdth2 {
    width: 20%;
}

.req_cate_wdth3 {
    width: 20%;
}

.req_cate_wdth4 {
    width: 20%;
}

.dotted_line {
    width: 90%;
    border-bottom: 1px solid var(--color-f0f2f4);
    border-bottom-style: dashed;
    border-top: none;
    margin-top: 0;
    float: right;
}

.req_cate_switch:before {
    background: var(--theme-primary-color);
}

.req_switchtoggle {
    position: absolute;
    bottom: 19px;
    right: 25px;
    display: flex;
    align-items: flex-end;
}


/*request-categories-end*/

.modal-content {
    border-radius: var(--border-radius-10);
}

.margin-lr {
    margin-left: 30px;
    margin-right: 30px;
}

.pass_gene_flex {
    display: flex;
    align-items: center;
}

.quest_styling {
    border-radius: var(--border-radius-10);
    padding: 10px;
    background: var(--color-ebebeb);
}

.footer {
    float: left;
    width: 100%;
}

.dropdown_populr {
    position: relative;
    right: -4px;
    margin-bottom: 0;
}


/*new-style-start*/


/*28-1-21-start*/

.design_viewall {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.input_designs {
    width: 45%;
    margin: 0 5px;
}

.sub_catg_img2 {
    width: 100%;
    height: auto;
}

.new_modal_design .modal-header {
    border-bottom: 1px solid #dee2e6;
}

.Design_imgwidth {
    width: 100%;
    max-width: 220px;
    min-height: 212px;
}

.design_spn {
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-semibold);
    position: relative;
    display: inline-block;
}

.devide-head2 {
    font-size: var(--font-size-15);
}


/**/

.sub_catg_img2:hover {
    box-shadow: 0px 0px 5px 2px rgb(1 2 2 / 10%);
}


/* ul.cat-img-listing {
    text-align: center;
} */


/*28-1-21-end*/


/*//new*/

.coments-by {
    position: relative;
}


/*for live site(message icons with text)-end*/


/*content background variable*/

.color-view-all {
    color: var(--cancle-color);
    font-size: var(--font-size-14);
}

.color-view-all:hover {
    color: var(--cancle-color);
}


/*////////new add//////*/

.make-comment-icon.options a label .material-icons {
    transform: rotate( -90deg);
}

.img_des_app {
    width: 100%;
    max-width: 110px;
    margin-bottom: 20px;
}

.Design_sec_modal2 {
    padding: 0 40px 70px;
}


/*///////////////new add (class also add in html)/////////////////*/


/*>>>>>>>>>>>>>Info tab<<<<<<<*/

.page-title2 {
    font-size: var(--font-size-22);
}

.info_cnt_h6 {
    font-size: var(--font-size-18);
}

.Project_title_info {
    font-size: var(--font-size-14);
}

.id-single-field_frtab {
    margin-bottom: 5px;
}


/*///////////////number-show on hover////////////*/


/*>>>>>>>>>>>>>>>>>>> css <<<<<<<<<<<<<*/

.dummyseo_cnt {
    position: relative;
}

.dummyseo_hvr_cnt {
    position: absolute;
    display: none;
}

.dummyseo_cnt:hover .dummyseo_hvr_cnt {
    display: block;
}

.comment_numbr {
    background: var(--theme-primary-color);
    width: 16px;
    height: 16px;
    /* left: 68%;
    top: 43%; */
    transform: translate(-50%, -50%);
    border-radius: var(--border-radius-50);
    box-shadow: 0 0 0 7px #ef495f70;
    position: absolute;
    position: absolute;
    text-align: center;
    line-height: 16px;
    color: var(--color-fff);
}


/*2-2-21 end*/


/*3-2-21 start*/


/*for-comment-tab-upload-image-start*/


/*image selected css(show check icon when image is active) start*/

.products-pics-list .nav-link.active {
    position: relative;
}

.products-pics-list .nav-link.active .done_check {
    opacity: 1;
}

.done_sign {
    color: var(--in-progress-color);
}

.done_check {
    opacity: 0;
    position: absolute;
    background: var(--color-fff);
    border-radius: var(--border-radius-50);
    height: 24px;
    width: 24px;
    top: 4px;
    right: 4px;
}


/*image selected css(show check icon when image is active) end*/


/*3-2-21 end*/


/*8-2-21-start*/

#add_filesprosett {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

.edit_pro_imgmain {
    position: relative;
    display: inline-block;
}

.upload_prosetimg {
    background: var(--color-f5f5f5);
    box-shadow: 0px 5px 10px 0px #bebebe;
    border-radius: var(--border-radius-50);
    width: 28px;
    height: 28px;
    position: absolute;
    bottom: 0;
    right: 0px;
    text-align: center;
}

.upload_prosetimg_camera {
    font-size: var(--font-size-18);
    position: absolute;
    top: 5px;
    right: 5px;
    color: var(--draft-color);
}


/*8-2-21-end*/


/*16-2-21-start*/


/* For[ subscription_plan_col.html ] subscription plan section (graphic and content) -start*/


/*new-add*/

.Graphic_subcription {
    margin: 0px 7px;
    padding: 20px;
    background: var(--color-f2f5f7);
    height: 100%;
}

.Graphic_subcription .subscription-plan {
    margin-bottom: 0;
}

.secgc_li {
    background: transparent;
    margin-bottom: 10px;
}

.graphic_h5 {
    font-size: var(--font-size-16);
}

.crown_icon2 {
    width: 45px;
}


/* For [ subscription_plan_col.html ] subscription plan section (graphic and content) -end*/


/* for remove box shadow around the input field*/


/* .form-control:focus {
    border-color: transparent;
    outline: 0 !important;
    box-shadow: none !important;
} */


/* // For [ profile-setting.html ] subscription plan spacing  // */


/*new-add*/

.hding_forsub {
    /* margin-top: 20px; */
    height: 100%;
    position: relative;
}

.Graphic_section {
    padding: 20px;
    margin-bottom: 15px;
    background: var(--color-f2f5f7);
}


/* for blue card view all card section start*/


/*new add*/

.blue_viewcard {
    border: none;
    width: auto;
}

.debit_card_viewall {
    width: 150px;
}


/* for blue card view all card section end*/


/* for Graphic and content font-weight in subscription-plan section start*/


/*new add*/

.sub_newdiv {
    font-weight: var(--font-weight-semibold);
    margin-bottom: 10px;
}


/* for Graphic and content font-weight in subscription-plan section start*/


/* for payment method modal form (already added in main.css) start*/

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

.proof-input-signup {
    background: var(--color-fff);
    border: #ccc solid 1px;
    border-radius: var(--border-radius-3);
    padding: 10px 10px 10px 20px;
    position: relative;
    width: 49%;
}

.proof-input-signup label {
    font-size: var(--font-size-12);
    color: var(--color-8F8F8F);
    margin-bottom: 0px;
    width: 100%;
}

.formflex2 input {
    flex: 1;
    display: flex;
    justify-content: center;
    border: #ccc solid 0px;
    border-radius: var(--border-radius-3);
    padding: 8px 0px;
    margin: 0px;
    transition: all 0.3s;
    font-size: var(--font-size-12);
    font-weight: var( --font-weight-medium);
    width: 100%;
}

.formflex2 select {
    flex: 1;
    display: flex;
    justify-content: center;
    border: #ccc solid 0px;
    border-radius: var(--border-radius-3);
    padding: 12px 0px;
    margin: 0px;
    transition: all 0.3s;
    font-size: var(--font-size-12);
    font-weight: var( --font-weight-medium);
    width: 100%;
}

.planamout-proof {
    text-align: left;
    margin-top: 15px;
}

.planamout-proof p {
    padding: 0px 5px;
}

.planamout-proof p span {
    font-weight: var(--font-weight-semibold);
    color: var(--color-081D31);
    float: right;
}

.donthv-acc {
    font-size: var(--font-size-12);
    text-align: center;
    margin-top: 40px;
}

.donthv-acc a {
    font-size: var(--font-size-12);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    color: var(--color-1F1F70);
}

.formflex2 select:focus {
    border: 0px;
    outline: none;
}


/* for payment method modal form (already added in main.css) end*/


/*for payment method(modal) back button start */


/*new add*/

.pay_backbtn {
    font-size: var(--font-size-14);
    line-height: 1.7;
    color: var(--color-666);
    margin: 0px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
}

.pay_backbtn:hover {
    color: var(--color-666);
}


/*for payment method(modal) back button end */


/*for stripe account detail modal start*/

.stripe_inner_data {
    display: flex;
    padding-bottom: 20px;
}

.stripe_detailtext {
    font-weight: var(--font-weight-semibold);
    width: 165px;
}

.stripe_detailtext_p {
    font-size: var(--font-size-16);
}

.box-shadow {
    box-shadow: 0px 5px 20px #0000001A;
}

.border-none {
    border: none;
}


/*for stripe account detail modal end*/


/*for add "Resellable resources" text over availed 3/4 start*/

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


/*for add "Resellable resources" text over availed 3/4 end*/


/*for make a comment icons alignment start*/


/*new add */

.make-comment-icon a label {
    margin-bottom: 0;
}


/*for make a comment icons alignment end*/

.cancel_btnsup {
    background: var(--color-0000);
}

.custm-form-control2 {
    background: var(--theme-default-color);
    border: 0;
    border-radius: var(--border-radius-10);
    height: 60px;
    color: var(--hold-color);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-medium);
    line-height: 60px;
    padding: 0 30px;
}

.pause_bgnew {
    background: var(--color-dcdcdc);
}


/*admin-new-style-start*/


/*for intake-form-section heading background styling start*/

.sec_intakeform {
    display: inline-block;
    background: var(--color-ef495f);
    color: var(--color-fff);
    padding: 8px 10px 4px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

#intake_ques2 {
    border-top: 7px solid var(--color-ef495f);
    border-top-left-radius: 0;
}

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

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

.is_multi_required {
    display: flex;
    margin-top: 10px;
}

.toggle_switch_bl {
    color: var(--color-000);
}


/*for intake-form-section heading background styling end*/


/*for page crown icon*/

.crown_icon_admin {
    width: 40px;
}

.rotate_dotsdrag {
    transform: rotate(90deg);
}

.check_1 {
    padding-top: 1px;
}


/*22-03-2021*/

.action_clr {
    white-space: normal;
    color: var(--color-16181b);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.action_main_nw {
    display: flex;
}

.action_dat {
    font-size: var(--font-size-10);
    color: var(--color-16181b);
    padding-top: 10px;
}

.action_nw_des {
    border-bottom: 1px solid #e2e2e2;
}

.drop_down_action {
    background: var(--theme-default-color);
    min-width: 350px;
}

.action_nw_des:active {
    background: var(--theme-default-color);
}

.noti_drop {
    background: var(--color-light-blue);
    padding: 10px;
}

.noti_adiv {
    padding: 10px;
}

.noti_count {
    background: var(--color-fff);
    border-radius: var(--border-radius-50);
    width: 18px;
    height: 18px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-15);
    font-weight: var(--font-weight-medium);
    color: var(--color-757575);
    margin-left: 5px;
}


/*24-03-2021*/

.select_com:after {
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
    position: absolute;
    top: 20px;
    right: 12px;
}

.select_com {
    position: relative;
}

.select_com1 {
    color: var(--in-progress-color);
}

.select_com2 {
    color: var(--color-fff);
    margin-right: 6px;
}

.select_com2 select {
    width: 120px !important;
}

.select_com1 select:focus {
    color: var(--in-progress-color);
    background: rgba(14, 203, 134, .1);
}
.filter-grid {
    padding-top: 2px;
}
.filter-grid a {
    color: var(--color-gray);
    padding-left: 4px;
}
.summary-form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
    background-color: #e9ecef;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    opacity: 1;
}
/*for tabs*/

.nav_des_li_a.active {
    color: var(--theme-secondry-color);
    /* background: var(--theme-secondry-color); */
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom: 2px solid var(--theme-primary-color);
}

.nav_des_li {
    font-size: var(--font-size-15);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray);
}

.nav_des_li_a {
    color: var(--color-gray);
    padding: 10px 21px;
    width: 234px;
    display: inline-block;
    text-align: center;
}

.nav_des_li_a:hover {
    color: var(--color-gray);
}

.des-tab-ct {
    padding-top: 20px;
}

.select_comtag option {
    color: var(--color-000);
    background: var(--color-fff);
}

.select_comtag {
    text-align-last: center;
}


/*24-03-2021 end*/

.comp-step-flex {
    display: flex;
}

.project-tabs-nav {
    display: flex;
    justify-content: space-between;
}

.btn-shownew {
    display: none;
}

.client-man-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.payment-history {
    display: flex;
    justify-content: space-between;
}

.send_email_w {
    width: calc(100% - 41px);
}

.all-label {
    display: flex;
}

.chat_closebtn {
    color: var(--color-gray);
    font-size: var(--font-size-35);
    position: absolute;
    top: 0;
    display: none;
}

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

.sub_plan_mngt {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.visitar-card-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.earned_content {
    min-width: 160px;
}

.add-pr-right {
    text-align: right;
}

.add_modle_onl {
    padding-left: 20px;
}

.desktop-none {
    display: none;
}

.Messages-OverviewDate {
    display: flex;
    align-items: center;
}

.subscrip-w-1 {
    width: 8%;
}

.subscrip-w-2 {
    width: 35%;
}

.subscrip-w-3 {
    width: 20%;
}

.subscrip-w-4 {
    width: 10%;
}

.subscrip-w-5 {
    width: 20%;
}

.subscrip-w-6 {
    width: 10%;
}

.add_new_brand-min {
    border: 1px dashed var(--color-gray);
    border-radius: var(--border-radius-5);
    width: 120px;
    height: 120px;
    padding: 20px 0;
    text-align: center;
}

.tasktym-leftbtn {
    font-size: var(--font-size-13);
    color: var(--color-808080);
    font-weight: var(--font-weight-medium);
    width: 100%;
    background: var(--color-0000);
}

.expired-red {
    text-transform: uppercase;
    color: var(--cancle-color);
    font-weight: var(--font-weight-medium);
}

.clndr-img {
    width: 100%;
    max-width: 17px;
}

.tasktym-icon {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gz-breadcrumb li a {
    font-size: 18px;
    color: #212529;
    margin-right: 8px;
    font-weight: 500;
}

.gz-breadcrumb li:last-child a {
    color: var(--cancle-color);
    pointer-events: none;
}

.gz-breadcrumb li {
    display: inline-block;
}

.nav-project-head {
    position: sticky;
    box-shadow: 0px 2px 20px rgb(0 0 0 / 8%);
    width: 100%;
    background: #fff;
    z-index: 1027;
    top: 0;
}

.mt-10 {
    margin-top: 68px;
}

.items-list {
    position: fixed;
    left: 0;
    width: 166px;
    background: var( --color-fff);
    padding: 32px 22px;
    transition: 0.5s ease-in-out;
    top: 76px;
    height: 100vh;
    overflow: auto;
    text-align: center;
}

.project-topleft {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dtl-btn {
    background: #fff;
    display: flex;
    align-items: center;
    color: #fff;
    padding: 5px 9px;
    font-weight: 500;
    border: 1px solid #909090;
    text-align: center;
    border-radius: 4px;
    color: #0d0d0d;
}

.th-rows>div {
    padding-right: 15px;
}

.email-action-btns {
    white-space: nowrap;
}

.form__radio-input_shr {
    display: none;
}

.form__label-radio_shr {
    font-size: 16px;
    cursor: pointer;
    position: relative;
    color: #cacaca;
    padding-top: 12px;
    width: 19px;
    text-align: center;
}

.form__radio-button_shr {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    display: inline-block;
    background: #cacaca;
    position: absolute;
    left: 0;
    top: -12px;
}

.form__radio-button_shr::after {
    content: "";
    display: block;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--theme-primary-color);
    opacity: 0;
    transition: opacity 0.2s;
}

.form__radio-input_shr:checked~.form__label-radio_shr .form__radio-button_shr::after {
    opacity: 1;
}

.shared_des_drop {
    background-color: #0f3148;
    width: 300px;
}

.form__group_shr {
    display: flex;
    justify-content: space-between;
    border-top: 2px solid #cacaca;
}

.shred_form_sec {
    padding: 30px 10px 0px;
}

.form__radio-input_shr:checked~.form__label-radio_shr {
    color: #fff;
}

.form__radio-input_shr:checked~.form__label-radio_shr .form__radio-button_shr {
    background: #fff;
}

.dropdown-menu.shared_des_drop {
    right: auto;
    left: 0;
    background: var(--theme-secondry-color);
    border-radius: 16px;
}

.d-droped-2 .dropdown-menu.show:after {
    content: '';
    background-color: transparent;
    border-right: 12px solid transparent;
    position: absolute;
    border-left: 12px solid transparent;
    border-bottom: 12px solid var(--theme-secondry-color);
    border-top: 12px solid transparent;
    top: -24px;
    left: 14px;
    bottom: auto;
    width: 19px;
}

.d-droped-2 .dropdown-menu.show:before {
    display: none;
}

.frg-radio-2 .form__radio-button::after {
    content: "";
    display: block;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    position: absolute;
    top: 4px;
    left: 49%;
    transform: translateX(-50%);
    background-color: #c8c8c8;
    opacity: 10;
    transition: opacity 0.2s;
}

.frg-radio-2 .form__radio-button {
    height: 24px;
    width: 24px;
    border: 2px solid #c8c8c8;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    left: 0;
}

.form__radio-input:checked~.form__label-radio .form__radio-button::after {
    opacity: 1;
    background: var(--cancle-color);
}

.frg-radio-2 .form__radio-input:checked~.form__label-radio .form__radio-button {
    border: 2px solid #ef495f;
}

.bg-mgs {
    border-bottom: 1px solid #dedede;
    padding: 18px 5px;
    background: #F9F9FA;
    margin: 0 18px;
}

.bg-83899C {
    background: #83899c0f;
    padding: 20px 1px;
}

.single-team:hover .hide-action-icon {
    opacity: 10;
    transition: 0.3s;
}

.hide-action-icon {
    opacity: 0;
    transition: 0.3s;
}

.categories-selection:hover .design_spn {
    color: var(--cancle-color);
}

.design_spn:before {
    content: "";
    position: absolute;
    border-bottom: 4px solid var(--cancle-color);
    width: 62%;
    bottom: -5px;
    left: 0;
}

.ssl-color-view {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    box-shadow: 0 0 1px #d8d8d8;
    background: #000;
}

.list-header-blog {
    /* white-space: nowrap; */
    padding-bottom: 10px;
    /* overflow: auto; */
    /* margin-right: 10px; */
}

.r-green-btn {
    color: var(--in-progress-color);
    height: 40px;
    line-height: 40px;
    border: none;
    border-radius: var(--border-radius-5);
    font-size: var(--font-size-15);
    font-weight: var(--font-weight-medium);
    padding: 0 16px;
    white-space: nowrap;
}

.header-blog .nav.nav-pills {
    margin-bottom: 10px;
}

.close-ham-icon {
    font-size: 30px;
    background: #0f3148c7;
    border: 2px solid #fff;
    color: #fff;
    border-radius: 50%;
    padding: 4px;
}

.prod-over {
    display: none;
}

.humburg-outer.close-ham {
    position: absolute;
    top: 20px;
    right: 38px;
}

.survey-steps {
    margin: auto;
    background: #000000b3;
    padding: 4px 12px;
    margin-bottom: 10px;
    border-radius: 10px;
}

.cus_mdal_survey {
    position: sticky;
    bottom: 0;
    z-index: 9;
    padding: 0 62px;
}


/* .full-view-image {
    overflow: auto;
    overflow-y: auto;
    margin: auto;
    text-align: center;
    max-height: calc(100vh - 74px);
    min-height: calc(100vh - 74px);
} */

.project_role {
    display: flex;
    justify-content: space-between;
    background: var(--color-fff);
    padding: 10px 15px;
    margin-bottom: 12px;
    align-items: center;
    border-radius: var(--border-radius-10);
}

.two-line-text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/*responsive start*/


/*767 start*/

@media only screen and (max-width: 767px) {
    .famous-design-sidebar {
        top: 60px;
    }
    /* .project-topleft {
        display: block;
        text-align: center;
    } */
    .project-topleft div {
        text-align: center;
    }
    .video-d-area {
        width: 100%;
    }
    .product_video {
        width: 100%;
    }
    .comp-step {
        display: block;
    }
    .adver-head {
        padding: 20px 10px;
    }
    .comp-step-flex {
        margin-bottom: 10px;
    }
    .btn-shownew2 {
        display: none;
    }
    .btn-shownew {
        display: block;
        margin-bottom: 10px;
    }
    .des-cnt-nav {
        display: flex;
        overflow: auto;
    }
    .client_card_row {
        padding: 0;
    }
    .client_col_card {
        width: 100%;
    }
    .client_col_card.green-gradient,
    .client_col_card.blue-gradient {
        background-size: 580px;
    }
    .client-man-flex {
        display: block;
    }
    .save-cancelbtn .gz-btn {
        margin-left: 0;
        margin-bottom: 10px;
    }
    .payment-history {
        display: block;
    }
    .field-status {
        /*top: 10px;*/
    }
    .famous-design-topbar {
        display: block;
    }
    .fdt-single-filed {
        margin-bottom: 10px;
        display: block;
    }
    .fdt-single-filed .fdt-title {
        padding: 0;
        margin-top: 10px;
    }
    #wrap_2 .famous-design-main {
        padding-right: 0;
    }
    .nav_des_li_a {
        width: 122px;
    }
    .input_designs {
        width: 100% !important;
    }
    .timeline-content-single-field {
        display: block;
    }
    .avtivity-timeline {
        padding: 0px;
    }
    .top-bar-btn {
        text-align: right;
    }
    .pause_bgnew {
        margin-top: 10px;
    }
    .all-label {
        display: block;
    }
    .social_ic {
        justify-content: flex-start;
        margin-left: 0 !important;
        margin-top: 10px;
    }
    .chat_prt_onmobile {
        position: absolute;
        width: 0;
        left: 0px;
        top: 140px;
        height: 100%;
        transition: 0.5s;
    }
    .chat_closebtn {
        display: block;
        z-index: 1;
    }
    .chat_right_innerleft {
        display: none;
    }
    .chat_right_innerleft.chat_mobile {
        display: block;
    }
    .start-writing-msg textarea {
        height: 60px;
    }
    #sidebar-wrapper {
        width: 0px;
    }
    #wrapper {
        padding-left: 0px;
    }
    #wrapper.toggled {
        padding-left: 0;
    }
    .th-rows {
        display: none;
    }
    .navbar-header .left-data {
        margin-top: 10px;
    }
    .project_main_td {
        display: block;
        text-align: center;
    }
    .pro_tdtext {
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: center;
    }
    .inprogressrevision {
        margin: auto;
    }
    .project_tr {
        display: block;
        text-align: center;
        position: relative;
    }
    .chat_left_sec {
        width: 100%;
        min-width: 100%;
    }
    .top_blogbar_flex {
        display: block;
    }
    .top_blogbar {
        margin-bottom: 10px;
    }
    .px-41 {
        padding: 10px 0px;
    }
    .sub_plan_mngt {
        display: block;
    }
    .sub_plan_mngt h2 {
        margin-bottom: 10px;
    }
    .form-group.save-cancelbtn.text-center.py-10 {
        padding: 10px 0;
    }
    .save-cancelbtn {
        padding: 10px 0;
    }
    .copy-link-text {
        padding-right: 40px;
    }
    .main-contact-panel .sidebar-preview {
        height: 230px;
    }
    .projecttable_wdth1 {
        width: 100%;
    }
    .projecttable_wdth4,
    .projecttable_wdth2 {
        width: 22%;
        display: inline-block;
    }
    .projecttable_wdth3 {
        width: 50%;
        display: inline-block;
    }
    .projecttable_wdth5 {
        width: 100%;
        margin: 15px 0;
    }
    .projecttable_wdth6,
    .projecttable_wdth7 {
        width: 100%;
        margin-bottom: 5px;
    }
    .pro_vertdh6 {
        justify-content: center;
    }
    .more_horizicon {
        position: absolute;
        top: 10px;
        right: 10px;
    }
    .more_responsive_dropdown {
        position: unset;
    }
    .email_nav_tabs {
        margin-right: 0;
        padding-right: 0;
        width: 100%;
    }
    .email_ryt_tab {
        width: 100%;
    }
    .email_setting_tabcontent {
        margin-left: 0;
        float: left;
        width: 100%;
        padding: 0;
        margin-top: 20px;
    }
    .req_cate_wdth1,
    .req_cate_wdth2,
    .req_cate_wdth3,
    .req_cate_wdth4 {
        width: 100%;
    }
    .req_category_img {
        margin: auto;
    }
    .toggle_switch_main {
        justify-content: center;
    }
    .right-action {
        width: 100%;
    }
    .position-unset-m {
        position: unset;
    }
    .subscription-table {
        /* display: none; */
    }
    .desktop-none {
        display: block;
    }
    .feedmatrix_wdth1 {
        width: 100%;
    }
    .affiliate_wdth3,
    .affiliate_wdth4,
    .affiliate_wdth5,
    .affiliate_wdth6 {
        width: auto;
        display: inline-flex;
        margin: 0 13px;
    }
    .feedmatrix_wdth1 .pro_tdimg {
        display: block;
        text-align: center;
    }
    .daily_report_heh2 {
        font-size: var(--font-size-22);
        margin-bottom: 5px;
    }
    .blog_sechdingh4 {
        font-size: var(--font-size-14);
        color: var(--theme-primary-color);
        margin-left: 10px;
    }
    .message_ove_mhding {
        display: block;
    }
    .Messages-OverviewDate {
        display: block;
    }
    .Messages-Overdateleft,
    .Messages-Overdateright {
        display: block;
    }
    .Messages-Overdatecont {
        margin-bottom: 10px;
    }
    .new-member {
        width: 100%;
    }
    .h2-bluepop {
        display: none;
    }
    .rb-heading {
        display: block;
        /*text-align: center;*/
        margin-bottom: 10px;
    }
    .mobile_padding0 {
        padding: 0;
    }
    .permissions_lisec {
        width: 100%;
    }
}


/*767 end*/


/*768 --- 1024 start */

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .chat_left_sec {
        width: 350px;
        min-width: 350px;
    }
    .chat_right_innerleft {
        width: 100%;
    }
    .project_tr {
        padding: 20px 0px;
    }
    .px-41 {
        padding: 10px 0px;
    }
    .visitar-card-inner {
        display: block;
    }
    .corwn_plan {
        display: block;
        text-align: center;
    }
    .agenc_btns {
        width: 100%;
    }
    .pause_bgnew {
        margin-top: 10px;
    }
    .projecttable_wdth1 {
        width: 100%;
    }
    .project_main_td {
        display: block;
    }
    .projecttable_wdth4,
    .projecttable_wdth2 {
        width: 22%;
        display: inline-block;
    }
    .projecttable_wdth3 {
        width: 50%;
        display: inline-block;
    }
    .projecttable_wdth5 {
        width: 100%;
        margin: 15px 0;
    }
    .projecttable_wdth6,
    .projecttable_wdth7 {
        width: 100%;
        margin-bottom: 5px;
    }
    .pro_vertdh6 {
        justify-content: center;
    }
    .more_horizicon {
        position: absolute;
        top: 10px;
        right: 10px;
    }
    .more_responsive_dropdown {
        position: unset;
    }
    .project_tr {
        display: inline-block;
        text-align: center;
        position: relative;
        width: 250px;
    }
    .th-rows {
        display: none;
    }
    .email_ryt_tab {
        width: 100%;
    }
    .pro_tdtexth5 {
        font-size: var(--font-size-13);
    }
    .pro_tdtextp {
        font-size: var(--font-size-10);
    }
    .email_nav_tabs {
        width: 225px;
    }
    .email_setting_tabcontent {
        margin-left: 225px;
    }
    .req_cate_wdth1,
    .req_cate_wdth2,
    .req_cate_wdth3,
    .req_cate_wdth4 {
        width: 100%;
    }
    .req_category_img {
        margin: auto;
    }
    .toggle_switch_main {
        justify-content: center;
    }
    .pro_tdtext {
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: center;
    }
    .desktop-none {
        display: block;
    }
    .subscription-table {
        /* display: none; */
    }
    .feedmatrix_wdth1 {
        width: 100%;
        text-align: left;
    }
    .affiliate_wdth3,
    .affiliate_wdth4,
    .affiliate_wdth5,
    .affiliate_wdth6 {
        width: 100%;
        justify-content: center;
    }
    .feedmatrix_wdth1 .pro_tdimg {
        display: block;
        text-align: center;
    }
    .affiliate_wdth3,
    .affiliate_wdth4,
    .affiliate_wdth5,
    .affiliate_wdth6 {
        width: auto;
        display: inline-flex;
        margin: 0 13px;
    }
    .pro_materialicon i {
        font-size: var(--font-size-20);
        height: 42px;
        width: 42px;
    }
    #wrap_2 .famous-design-main {
        /* padding-right: 0; */
    }
    .new-member {
        width: 100%;
    }
}


/*768 --- 1024 end */


/*991 start*/

@media only screen and (max-width: 991px) {
    .famous-design-action {
        width: 100%;
    }
    .project-top-nav {
        display: block;
        justify-content: space-between;
        align-items: center;
    }
    .items-list {
        position: inherit;
        left: 0;
        width: 100%;
        top: 0px;
        height: auto;
        overflow: auto;
        padding-right: 0px;
    }
    .mt-10 {
        margin-top: 36px;
    }
    .products-pics-list .product-img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border-radius: var(--border-radius-10);
        margin-right: 15px;
    }
    .subscription-table table td,
    th {
        white-space: nowrap;
    }
    .corwn_plan {
        display: block;
        text-align: center;
    }
    .agenc_btns {
        width: 100%;
    }
    .debit_card {
        margin: 5px auto !important;
    }
    .add__card {
        height: auto;
        margin: auto;
        margin-bottom: 10px;
    }
    .debit_card_viewall {
        width: 350px;
    }
    .Pro_statusover_main {
        margin-bottom: 10px;
    }
    .Commission-Owed {
        margin-bottom: 20px;
    }
}


/*991 end*/


/*1200 start*/

@media only screen and (max-width: 1200px) {
    .client_grid_row {
        display: block;
    }
    .earned_content {
        margin-bottom: 20px;
    }
    .client_col_card {
        margin-bottom: 10px;
        margin-left: 2px;
    }
    .add__card {
        /* width: 130px; */
    }
    .comp-step-flex {
        margin-bottom: 10px;
    }
    .btn-shownew2 {
        display: none;
    }
    .btn-shownew {
        display: block;
        margin-bottom: 10px;
    }
    .des-cnt-nav {
        display: flex;
        overflow: auto;
    }
    .client_card_row {
        padding: 0;
    }
    .client_col_card {
        width: 100%;
    }
    .client_col_card.green-gradient,
    .client_col_card.blue-gradient {
        background-size: 580px;
    }
    .client-man-flex {
        display: block;
    }
    .header-blog .nav.nav-pills {
        /* flex-wrap: nowrap;
        white-space: nowrap; */
        margin-bottom: 10px;
        /* overflow: auto; */
    }
    .save-cancelbtn .gz-btn {
        margin-left: 0;
        margin-bottom: 10px;
    }
    .payment-history {
        display: block;
    }
    .field-status {
        /*top: 10px;*/
    }
    /* .famous-design-topbar {
        display: block;
    } */
    /* .fdt-single-filed {
        margin-bottom: 10px;
        display: block;
    } */
    /* .fdt-single-filed .fdt-title {
        padding: 0;
        margin-top: 10px;
    } */
    #wrap_2 .famous-design-main {
        /* padding-right: 0; */
    }
    .famous-design-sidebar {
        width: 80px;
    }
    #wrap_2.toggled .famous-design-sidebar {
        position: fixed;
        width: 400px;
        right: 0;
        background: var( --color-fff);
        padding: 32px 22px;
        transition: 0.5s ease-in-out;
        top: 60px;
        height: 100vh;
        overflow: auto;
        z-index: 999;
    }
    #wrap_2 .famous-tab-items {
        display: none;
        transition: .76s all;
    }
    #wrap_2.toggled .famous-tab-items {
        display: block;
        transition: .76s all;
    }
    .dash-project .hide-btn {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 9;
        opacity: 0;
        top: 0;
        left: 0;
        cursor: pointer;
    }
    .dash-project.toggled .hide-btn {
        position: relative;
        width: auto;
        height: auto;
        z-index: auto;
        opacity: 10;
        top: 0;
        left: 0;
        cursor: pointer;
    }
    .input_designs {
        width: 100% !important;
    }
    .timeline-content-single-field {
        display: block;
    }
    .avtivity-timeline {
        padding: 0px;
    }
    .top-bar-btn {
        text-align: right;
    }
    .pause_bgnew {
        margin-top: 10px;
    }
    .all-label {
        display: block;
    }
    .social_ic {
        justify-content: flex-start;
        margin-left: 0 !important;
        margin-top: 10px;
    }
    .chat_prt_onmobile {
        position: absolute;
        width: 0;
        left: 0px;
        top: 140px;
        height: 100%;
        transition: 0.5s;
    }
    .chat_closebtn {
        display: block;
        z-index: 1;
    }
    .chat_right_innerleft {
        display: none;
    }
    .chat_right_innerleft.chat_mobile {
        display: block;
    }
    .start-writing-msg textarea {
        height: 60px;
    }
    #sidebar-wrapper {
        width: 0px;
    }
    #wrapper {
        padding-left: 0px;
    }
    #wrapper.toggled {
        padding-left: 0;
    }
    .th-rows {
        display: none;
    }
    .navbar-header .left-data {
        margin-top: 10px;
    }
    .project_main_td {
        display: block;
        text-align: center;
    }
    .pro_tdtext {
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: center;
    }
    .inprogressrevision {
        margin: auto;
    }
    .project_tr {
        /* display: block;
        text-align: center;
        position: relative; */
    }
    .chat_left_sec {
        width: 100%;
        min-width: 100%;
    }
    .top_blogbar_flex {
        display: block;
    }
    .top_blogbar {
        margin-bottom: 10px;
    }
    .px-41 {
        padding: 10px 0px;
    }
    .sub_plan_mngt {
        display: block;
    }
    .sub_plan_mngt h2 {
        margin-bottom: 10px;
    }
    .form-group.save-cancelbtn.text-center.py-10 {
        padding: 10px 0;
    }
    .save-cancelbtn {
        padding: 10px 0;
    }
    .copy-link-text {
        padding-right: 40px;
    }
    .main-contact-panel .sidebar-preview {
        height: 230px;
    }
    .projecttable_wdth1 {
        width: 100%;
    }
    .projecttable_wdth4,
    .projecttable_wdth2 {
        width: 22%;
        display: inline-block;
    }
    .projecttable_wdth3 {
        width: 50%;
        display: inline-block;
    }
    .projecttable_wdth5 {
        width: 100%;
        margin: 15px 0;
    }
    .projecttable_wdth6,
    .projecttable_wdth7 {
        width: 100%;
        margin-bottom: 8px;
    }
    .pro_vertdh6 {
        justify-content: center;
    }
    .more_horizicon {
        /* position: absolute;
        top: 10px;
        right: 10px; */
    }
    .more_responsive_dropdown {
        position: unset;
    }
    .email_nav_tabs {
        margin-right: 0;
        padding-right: 0;
        width: 100%;
    }
    .email_ryt_tab {
        width: 100%;
    }
    .email_setting_tabcontent {
        margin-left: 0;
        float: left;
        width: 100%;
        padding: 0;
        margin-top: 20px;
    }
    .req_cate_wdth1,
    .req_cate_wdth2,
    .req_cate_wdth3,
    .req_cate_wdth4 {
        width: 100%;
    }
    .req_category_img {
        margin: auto;
    }
    .toggle_switch_main {
        justify-content: center;
    }
    .right-action {
        width: 100%;
    }
    .position-unset-m {
        position: unset;
    }
    .desktop-none {
        display: block;
    }
    .feedmatrix_wdth1 {
        width: 100%;
    }
    .affiliate_wdth3,
    .affiliate_wdth4,
    .affiliate_wdth5,
    .affiliate_wdth6 {
        width: auto;
        display: inline-flex;
        margin: 0 13px;
    }
    .feedmatrix_wdth1 .pro_tdimg {
        display: block;
        text-align: center;
    }
    .daily_report_heh2 {
        font-size: var(--font-size-22);
        margin-bottom: 5px;
    }
    .blog_sechdingh4 {
        font-size: var(--font-size-14);
        color: var(--theme-primary-color);
        margin-left: 10px;
    }
    .message_ove_mhding {
        display: block;
    }
    .Messages-OverviewDate {
        display: block;
    }
    .Messages-Overdateleft,
    .Messages-Overdateright {
        display: block;
    }
    .Messages-Overdatecont {
        margin-bottom: 10px;
    }
    .new-member {
        width: 100%;
    }
    .h2-bluepop {
        display: none;
    }
    .rb-heading {
        display: block;
        /*text-align: center;*/
        margin-bottom: 10px;
    }
    .mobile_padding0 {
        padding: 0;
    }
    .permissions_lisec {
        width: 100%;
    }
    .subscrip-w-1,
    .subscrip-w-2,
    .subscrip-w-3,
    .subscrip-w-4,
    .subscrip-w-5,
    .subscrip-w-6 {
        width: 100%;
        margin-bottom: 7px;
    }
    .subscrip-w-2 .sp-single-title {
        text-align: center;
    }
}


/*767 end*/


/*768 --- 1024 start */

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .chat_left_sec {
        width: 350px;
        min-width: 350px;
    }
    .chat_right_innerleft {
        width: 100%;
    }
    .project_tr {
        padding: 20px 0px;
    }
    .px-41 {
        padding: 10px 0px;
    }
    .visitar-card-inner {
        display: block;
    }
    .corwn_plan {
        display: block;
        text-align: center;
    }
    .agenc_btns {
        width: 100%;
    }
    .pause_bgnew {
        margin-top: 10px;
    }
    .projecttable_wdth1 {
        width: 100%;
    }
    .project_main_td {
        display: block;
    }
    .projecttable_wdth4,
    .projecttable_wdth2 {
        width: 22%;
        display: inline-block;
    }
    .projecttable_wdth3 {
        width: 50%;
        display: inline-block;
    }
    .projecttable_wdth5 {
        width: 100%;
        margin: 15px 0;
    }
    .projecttable_wdth6,
    .projecttable_wdth7 {
        width: 100%;
        margin-bottom: 5px;
    }
    .pro_vertdh6 {
        justify-content: center;
    }
    .more_horizicon {
        position: absolute;
        top: 10px;
        right: 10px;
    }
    .more_responsive_dropdown {
        position: unset;
    }
    .project_tr {
        display: inline-block;
        text-align: center;
        position: relative;
        width: 250px;
    }
    .th-rows {
        display: none;
    }
    .email_ryt_tab {
        width: 100%;
    }
    .pro_tdtexth5 {
        font-size: var(--font-size-13);
    }
    .pro_tdtextp {
        font-size: var(--font-size-10);
    }
    .email_nav_tabs {
        width: 225px;
    }
    .email_setting_tabcontent {
        margin-left: 225px;
    }
    .req_cate_wdth1,
    .req_cate_wdth2,
    .req_cate_wdth3,
    .req_cate_wdth4 {
        width: 100%;
    }
    .req_category_img {
        margin: auto;
    }
    .toggle_switch_main {
        justify-content: center;
    }
    .pro_tdtext {
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: center;
    }
    .desktop-none {
        display: block;
    }
    .feedmatrix_wdth1 {
        width: 100%;
        text-align: left;
    }
    .affiliate_wdth3,
    .affiliate_wdth4,
    .affiliate_wdth5,
    .affiliate_wdth6 {
        width: 100%;
        justify-content: center;
    }
    .feedmatrix_wdth1 .pro_tdimg {
        display: block;
        text-align: center;
    }
    .affiliate_wdth3,
    .affiliate_wdth4,
    .affiliate_wdth5,
    .affiliate_wdth6 {
        width: auto;
        display: inline-flex;
        margin: 0 13px;
    }
    .pro_materialicon i {
        font-size: var(--font-size-20);
        height: 42px;
        width: 42px;
    }
    #wrap_2 .famous-design-main {
        /* padding-right: 0; */
    }
    .new-member {
        width: 100%;
    }
    .subscrip-w-1,
    .subscrip-w-2,
    .subscrip-w-3,
    .subscrip-w-4,
    .subscrip-w-5,
    .subscrip-w-6 {
        width: 100%;
        margin-bottom: 7px;
    }
    .subscrip-w-2 .sp-single-title {
        text-align: center;
    }
    .tasktym-icon {
        display: block;
    }
    .clndr-img {
        margin-left: 10px;
    }
}


/*768 --- 1024 end */


/*991 start*/

@media only screen and (max-width: 991px) {
    .subscription-table table td,
    th {
        white-space: nowrap;
    }
    .corwn_plan {
        display: block;
        text-align: center;
    }
    .agenc_btns {
        width: 100%;
    }
    .list-header-blog {
        padding-bottom: 10px;
        margin-right: 10px;
    }
    .debit_card {
        margin: 5px auto !important;
    }
    .add__card {
        height: auto;
        margin: auto;
        margin-bottom: 10px;
    }
    .debit_card_viewall {
        width: 350px;
    }
    .Pro_statusover_main {
        margin-bottom: 10px;
    }
    .Commission-Owed {
        margin-bottom: 20px;
    }
    .tasktym-icon {
        display: block;
    }
    .clndr-img {
        margin-left: 10px;
    }
}


/*991 end*/


/*1200 start*/

@media only screen and (max-width: 1200px) {
    .client_grid_row {
        display: block;
    }
    .earned_content {
        margin-bottom: 20px;
    }
    .client_col_card {
        margin-bottom: 10px;
        margin-left: 2px;
    }
    .add__card {
        /* width: 130px; */
    }
}


/*1200 end*/

li.nav-item.prev-space {
    margin-bottom: 26px;
}

#progressbar-step2 {
    margin-bottom: 30px;
    overflow: hidden;
    counter-reset: step;
}

.progressbr-steps-li {
    list-style-type: none;
    color: #808080;
    text-transform: uppercase;
    font-size: var(--font-size-15);
    width: 100%;
    position: relative;
    padding: 20px 5px 0;
    text-align: center;
}

.progressbr-steps-li.active {
    color: var(--theme-primary-color);
}

.progressbr-steps-li:before {
    content: "";
    width: 20px;
    line-height: 20px;
    display: block;
    font-size: var(--font-size-10);
    color: var(--color-333);
    background: var( --color-808080);
    border-radius: var(--border-radius-3);
    /* margin: 0 auto 5px auto; */
    width: 17px;
    height: 17px;
    margin-right: 22px;
    border-radius: var(--border-radius-50);
    border: navajowhite;
    box-shadow: navajowhite;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.progressbr-steps-li:after {
    content: "";
    width: 1px;
    display: block;
    background: var(--color-d2d2d2);
    margin: 10px auto;
    height: 70px;
    text-align: center;
}

.progressbr-steps-li:last-child:after {
    content: none;
}

.progressbr-steps-li.active:before {
    line-height: 20px;
    display: none;
    font-size: var(--font-size-10);
    color: var(--theme-primary-color);
    background: var(--theme-primary-color);
    border-radius: var(--border-radius-3);
    /* margin: 0 auto 5px auto; */
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 1px solid var(--theme-primary-color);
    box-shadow: inset 0 0 0px 3px white;
}

.step-form-hdings {
    height: 100%;
    background: var(--color-theme-bg);
    padding: 40px 0;
    text-align: center;
}

.step-formnew-field {
    /* padding: 30px 30px 0; */
    padding: 30px 0px 0;
    position: unset !important;
}

.checkspn-div {
    display: none;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
}

.progressbr-steps-li.active .checkspn-div {
    display: block;
}

.radiobtn-li {
    padding: 0 0 0 30px;
    margin: 0 !important;
    border: none !important;
    width: 49%;
}

.radiobtn-li input[type=radio] {
    opacity: 1;
    width: 20px;
    height: 20px;
    top: 10px;
    left: 10px;
}

.radiobtn-li input[type="radio"]:checked+label {
    background: #0000;
    color: var(--review-color);
}

.radiobtn-li input[type="checkbox"]:checked+label {
    background: #0000;
    color: var(--review-color);
}

.radiobtn-li input[type="checkbox"] {
    opacity: 0;
    width: 20px;
    height: 20px;
    top: 10px;
    left: 10px;
}

.custm-form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    border: 1px solid var(--color-light-blue);
}

.step-formnew-field .outer-context {
    max-width: 100%;
}


/* .logo-checkboxnew {
    width: 13% !important;
} */

.attch-color {
    background: #ebebeb;
    padding: 10px 18px;
}

.attachments-hding-icn {
    display: flex;
    justify-content: space-between;
    text-align: center;
}

.attachments-block {
    width: 100%;
}


/*new*/

.action-button2 {
    color: var(--draft-color);
    box-shadow: 0px 5px 20px #0000001a;
    transition-duration: 1s;
    background: var( --theme-default-color);
    cursor: pointer;
    margin: 10px 5px;
    text-align: center;
    line-height: 50px;
    width: 144px;
    height: 50px;
    font-size: var(--font-size-15);
    padding: 0 14px;
    border-radius: 5px;
    display: inline-block;
    border: none;
    font-weight: 500;
}

.label_fles_brnd {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.Addnewbrand {
    font-size: var(--font-size-14);
    color: var(--cancle-color);
    background: var(--color-0000);
    font-weight: 600;
}

.popup-form-label {
    font-size: var(--font-size-18);
    color: var(--color-737c82);
    font-weight: var(--font-weight-medium);
}

.radiobtn-li-chk input[type="checkbox"]:checked {
    background-color: var(--cancle-color);
}

.checkbox-stepfrm-new:before {
    position: absolute;
    top: .25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    background-color: #fff;
    border: #adb5bd solid 1px;
}

.checkbox-stepfrm-new::after {
    position: absolute;
    top: .25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background: no-repeat 50%/50% 50%;
}

.checkbox-stepfrm-new:before,
.checkbox-stepfrm-new:after {
    width: 25px;
    height: 25px;
    top: 7px;
    border-radius: 0px;
    left: 0;
}

.radiobtn-li-chk input[type="checkbox"]:checked~.checkbox-stepfrm-new::before {
    border: none;
    background-color: var(--cancle-color) !important;
}

.radiobtn-li-chk input[type="checkbox"]:checked~.checkbox-stepfrm-new::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}

.checkbox-stepfrm-new {
    color: var(--color-gray);
}

.form-input-btm-brd::placeholder {
    color: var(--color-gray);
    font-weight: 400;
    font-size: 16px;
}

#chose-clr-code {
    display: none;
}

.form__radio-input {
    display: none;
}

.form__label-radio {
    font-size: var(--font-size-14) !important;
    cursor: pointer;
    position: relative;
    padding-left: 2.5rem;
}

.form__radio-button {
    height: 24px;
    width: 24px;
    border: 2px solid var(--cancle-color);
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    left: 0;
}

.form__radio-button::after {
    content: "";
    display: block;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    position: absolute;
    top: 4px;
    left: 49%;
    transform: translateX(-50%);
    background-color: var(--cancle-color);
    opacity: 0;
    transition: opacity 0.2s;
}

.form__radio-input:checked~.form__label-radio .form__radio-button::after {
    opacity: 1;
}

.icon_trail {
    padding-left: 10px;
    display: flex;
}

.form_icons {
    width: 28px;
    height: 28px;
    font-size: 16px;
    background: var(--cancle-color);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 50%;
}

/* .popup-form label {
    font-size: var(--font-size-18);
    color: var(--color-737c82);
    font-weight: var(--font-weight-medium);
} */
.popup-form label {
    font-size: var(--font-size-18);
    color: #212529;
    font-weight: var(--font-weight-medium);
}

/* .btn-listing li {
    position: relative;
    border: 1px solid var(--unnamed-color-eaeef1);
    border-radius: 5px;
    background: var(--theme-default-color) !important;
    display: inline-block;
    margin: 7px 15px 7px 0;
} */

.btn-listing li {
    position: relative;
    border: 1px solid #a7c3d8;
    border-radius: 5px;
    background: var(--theme-default-color) !important;
    display: inline-block;
    margin: 7px 15px 7px 0;
}

.grid-container {
    display: grid;
}



/* .custom-item {
    padding-right: 15px;
    padding-left: 15px;
} */


/*.custom-item.first {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}*/


/*.custom-item.second {
    grid-column: 2 / 2;
    grid-row: 1 / 3;
}*/

.th-row-sapcing>div {
    padding-right: 15px;
}

ul.cat-img-listing li {
    display: inline-block;
    margin-right: 15px;
}

.dd-drop2.dropdown-menu.show {
    display: block;
    right: auto !important;
    left: 0;
    background: var(--theme-secondry-color);
    top: 10px !important;
    transform: auto !important;
    padding: 0;
}

.dd-drop2.dropdown-menu.show:after {
    content: '';
    background-color: transparent;
    border-right: 8px solid transparent;
    position: absolute;
    border-left: 8px solid transparent;
    border-bottom: 8px solid #0f3148;
    border-top: 8px solid transparent;
    top: -16px;
    left: 10px;
    right: auto;
    bottom: auto;
}

.dd-drop2.dropdown-menu.show:before {
    content: '';
    display: inline-block;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid #ccc;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: -10px;
    left: 9px;
    right: auto;
}


/* radio 2 */

.form__radio-input2 {
    display: none;
}

.form__label-radio2 {
    font-size: var(--font-size-14) !important;
    cursor: pointer;
    position: relative;
    padding-left: 2.5rem;
}

.form__radio-button2 {
    height: 24px;
    width: 24px;
    border: 2px solid var(--cancle-color);
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    left: 0;
}

.form__radio-button2::after {
    content: "";
    display: block;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    position: absolute;
    top: 4px;
    left: 49%;
    transform: translateX(-50%);
    background-color: var(--cancle-color);
    opacity: 0;
    transition: opacity 0.2s;
}

.form__radio-input2:checked~.form__label-radio2 .form__radio-button2::after {
    opacity: 1;
}

.form__radio-input:checked~.form__label-radio .form__radio-button::after {
    opacity: 1;
}

@media only screen and (max-width: 992px) {
    .logo-checkboxnew {
        width: 120px !important;
    }
    .radiobtn-li {
        width: 100%;
    }
}


/* Toaster CSS */

@keyframes show_toast {
    0% {
        transform: translateX(-100%);
    }
    40% {
        transform: translateX(10%);
    }
    80%,
    100% {
        transform: translateX(20px);
    }
}

.toast-wrapper.hide {
    animation: hide_toast 1s ease forwards;
}

@keyframes hide_toast {
    0% {
        transform: translateX(20px);
    }
    40% {
        transform: translateX(10%);
    }
    80%,
    100% {
        opacity: 0;
        pointer-events: none;
        transform: translateX(-100%);
    }
}

.toast-wrapper .toast-area {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 999;
    background: #fff;
    padding: 20px 15px 20px 20px;
    border-radius: 10px;
    border-left: 5px solid #dc3545;
    box-shadow: 1px 7px 14px -5px rgba(0, 0, 0, 0.15);
    width: 430px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.toast-wrapper .toast.offline {
    border-color: #ccc;
}

.toast .content {
    display: flex;
    align-items: center;
}

.toast .content .icon {
    font-size: 25px;
    color: #fff;
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    background: #2ecc71;
}

.toast.offline .content .icon {
    background: #ccc;
}

.toast .content .details {
    margin-left: 15px;
}

.toast .details span {
    font-size: 20px;
    font-weight: 500;
}

.toast .details p {
    color: #878787;
}

.toast .close-icon {
    color: #878787;
    font-size: 23px;
    cursor: pointer;
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    background: #f2f2f2;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast .close-icon:hover {
    background: #efefef;
}

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

.cat-img-listing {
    /* text-align: center; */
}

.pro_tdtext {
    width: 100%;
    overflow: hidden;
}

.create-ac-btn {
    color: var(--draft-color);
    box-shadow: 0px 5px 20px #0000001a;
    transition-duration: 1s;
    background: var( --theme-default-color);
    cursor: pointer;
    text-align: center;
    font-size: var(--font-size-15);
    padding: 12px 25px;
    border-radius: 5px;
    display: inline-block;
    border: none;
    font-weight: 500;
}

.view-p-btn {
    font-size: 12px;
    font-weight: 500;
    padding: 2px 5px;
    border-radius: 3px;
    color: var(--color-light-blue);
    background: rgb(1 144 255 / 5%);
    white-space: nowrap;
}

.hide-btn {
    cursor: pointer;
}

@media (max-width:575px) {}

.edt-ic-hvr {
    position: absolute;
    top: 0px;
    left: 4px;
    background: #212121b3;
    width: 40px;
    height: 40px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: 0;
}

.pro_clienttd:hover .edt-ic-hvr {
    opacity: 10;
}

.pro_clienttd {
    position: relative;
}

.livewire-custom-pagination{
    position: relative;
    top: 35px;
    display: flex;
    justify-content: center;
}
.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #0f3148;
    border-color: #0f3148;
}

.slack-intigrate-box{
    background-color: #fff;
    border-radius: 5px;
    padding: 20px 30px 20px 30px;
}
.slack-text h4{
    font-size: 24px;
    font-weight: bold;
    color: #103147;
}
.slack-prg{
    font-size: var(--font-size-14);
    line-height: 18px;
    color: #103147;
}
.month-price{
    color: #EC495F;
}
.active-add-btn{
    background-color: #FFCED4;
    border-radius: 11px;
    color: #EC495F;
    font-size: 15px;
    font-weight: bold;
    padding: 4px;
    height: 29px;
    width: 143px;
}

.submit_flag{
    background: transparent;
    /* z-index: 99999;
    border-radius: 3px;
    padding: 4px;
    width: 25px;
    height: 25px; */

}
.attachments-image:hover .cut-image-comment {
    opacity: 10;
    transition: 0.3s;
}

.attachment-data-single:hover .cut-image-comment {
    opacity: 10;
    transition: 0.3s;
}

.cut-image-comment {
    position: absolute;
    right: 4px;
    top: 4px;
    opacity: 0;
}

.cut-image-comment i {
    font-size: var(--font-size-18);
    color: var( --color-fff);
    background: #000000cf;
    border-radius: 50%;
    cursor: pointer;
}

.sender_images_multi {
    width: 100%;
    border-radius: var(--border-radius-10);
    height: 91px;
    object-fit: contain;
    margin-left: -3px;
    background: #e4e4e4;
}

.mycancellable:hover{
    color:#212529;
}
.mini{
    position: relative;
    top: 15px;
}

/*-- 24-11-2021 --*/

.mob-hide{
    display: block;
}
#wrap_2.toggled .items-list {
    width:240px;
    text-align: center;
}

/*-- 23/02/2022 --*/
				 
.slack-comm {
    background-color: #fff;
    padding: 15px;
    border-radius: 20px;
    /* width: 370px;
    margin: 0 auto; */
    box-shadow: 0 0 18px #c5c3f95c;
}
.slack-comm h2{
    font-size: 40px;
    margin-left: 5px;
}
.slack-img{
    width: 30px;
    position: relative;
    top: -3px;
}
.slack-comm p{
    text-align: center;
    margin-bottom: 0px;
    font-size: 18px;
}

/*-- 07/03/2022 --*/
.flag_tab {
    position: absolute;
    right: 0px;
    top: -3px;
    color: #f5b307;
    font-size: 30px;
    -webkit-animation: ring 2s .7s ease-in-out infinite;
    -webkit-transform-origin: 50% 4px;
    -moz-animation: ring 2s .7s ease-in-out infinite;
    -moz-transform-origin: 50% 4px;
    animation: ring 2s .7s ease-in-out infinite;
    transform-origin: 50% 4px;
}
.counter-notification {
    position: absolute;
    top: -7px;
    right: -4px;
    background: red;
    width: 20px;
    height: 20px;
    font-size: 11px;
    line-height: 0px;
    /* padding: 9px 6px; */
    display: flex;
    color: #fff;
    border-radius: 19px;
    align-items: center;
    justify-content: center;
}
.notification_box {
    position: absolute;
    top: 0px;
    right: 55px;
}
.add-design-project {
    background: #bdf200;
    color: #000 !important;
    font-size: 12px;
    display: block;
    text-align: center;
    padding: 7px 0;
    margin: 10px 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}
.add-design-project:hover {
    color: inherit;
}
.form-control.date-input {
    font-size: 12px;
}
.select-date {
    font-size: 12px;
    padding: 0.5rem 0.5rem;
}
@-webkit-keyframes ring {
    0%,
    25%,
    83%,
    100% {
      transform: rotatez(0deg);
    }
    32.5%,
    62.5% {
      transform: rotatez(-10deg);
    }
    47.5%,
    75.5% {
      transform: rotatez(10deg);
    }
  }

  .swal-button--confirm, .swal-button--confirm:hover{
    background-color: var(--cancle-color) !important;
    color: var(--color-fff) !important;
    border-radius: var(--border-radius-5) !important;
  }

.top-bar-btn {
    display: flex;
}

.icon-radio .cat-img-listingli {
    display: inline-block;
    width: 180px;
    margin-right: 15px;
}

.icon-radio .sub_catg_img {
    text-align: center;
    border-radius: var(--border-radius-10);
    border: 1px solid var(--unnamed-color-eaeef1);
    width: 180px;
    height: 190px;
    padding: 5px 5px;
    font-family: 'Montserrat', sans-serif;
}
.icon-radio .sub_catg_imgspn {
    display: block;
    /* font-size: var(--font-size-13); */
    color: var(--color-0f3148);
    font-weight: var(--font-weight-medium);
    text-transform: capitalize;
    text-align: left;
    line-height: 14px;
    font-size: 11px;
}
.icon-radio .sub_catg_imgtag {
    width: 126px;
    margin: auto;
    /* margin-bottom: 10px; */
}
.icon-radio .sub_catg_img {
    text-align: center;
    border-radius: var(--border-radius-10);
    border: 1px solid var(--unnamed-color-eaeef1);
    width: 180px;
    height: 190px;
    padding: 5px 5px;
    font-family: 'Montserrat', sans-serif;
}
.logofly-title-radio{
    display: none;
}
.icon-checks .radiobtn-li {
    padding: 0 0 0 0px;
    margin: 0 !important;
    border: none !important;
    width: 31%;
}
.icon-image{
    max-width: 288px;
    padding: 20px 0;
    border: 1px solid #ccc;
    border-radius: 8px;
    width: 100%;
    text-align: center;
    box-shadow: 1px 4px 10px 2px #00000024;
}
.icon-image img{
    max-width: 200px;
    width: 100%;
    margin-bottom: 0px;
}
.icon-checks li label {
    font-size: 14px;
    padding: 20px 35px;
    font-weight: 500;
    align-items: center;
    margin-bottom: 0;
    border-radius: 5px;
    color: #000!important;
    font-family: 'Montserrat', sans-serif;
}
.icon-checks .checkbox-stepfrm-new:after, .icon-checks .checkbox-stepfrm-new:before {
    border-radius: 0px;
    bottom: 7px;
    top: unset;
}

.logofly-simple-radio .form__label-radio {
    font-size: var(--font-size-14) !important;
    cursor: pointer;
    position: relative;
    padding-left: 0.5rem;
    text-align: center;
    margin-right: 35px;
}
.logofly-simple-radio .progressbar_start{
    margin-right: 46px;
    position: relative;
    top: 16px;
}
.logofly-simple-radio .progressbar_end{
    margin-left: 15px;
    position: relative;
    top: 15px;
}
.logofly-simple-radio .logofly-title-radio{
    background: #673ab7;
    padding: 10px;
    color: #fff;
}
.logofly-simple-radio .form__radio-group{
    /* text-align: center;
    padding-top: 50px;
    padding-bottom: 90px; */
    display: inline-block;
}
.logofly-simple-radio{
    border: 1px solid;
    border-radius: 5px;
    width: 95%;
}

.icon-count-category {
	color: #673ab7;
	font-weight: 700 !important;
}
.input_designs_category {
	width: 29%;
	margin: 0 5px;
}
.icon-checks .radiobtn-li-chk {
	margin-bottom: 30px !important;
}

.switch_btn_plan_logofly{
    width: 200px !important;
}

.switch_btn_plan_logofly ul{
    justify-content: center;
}

.switch_btn_plan_logofly ul li{
    width: 100%;
}

.plan-list-dtl {
	/* display: flex;
	flex-wrap: wrap; */
	text-decoration: none;
	justify-content: space-between;
    overflow: auto;
    height: 247px;
}

.required_icon {
	color: #ef2929;
}
.ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_summary .ff_fileupload_filename {
    max-width: 680px;
}
@media (max-width:767px){
    .ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_summary .ff_fileupload_filename {
        max-width: 230px;
    }
}




.cs_loader {
    /* background-color: #fff; */
    height: 100%;
    position: relative;
  }
  
  .cs_sec_loader {
    width: 30px;
    /* left: 50%;
    transform: translate(-50%, -50%);
    position: absolute; */
  }
  
  .loader-wheel {
    animation: spin 1s infinite linear;
    border: 2px solid rgba(30, 30, 30, 0.5);
    border-left: 4px solid #000;
    border-radius: 50%;
    height: 30px;
    margin-bottom: 10px;
    width: 30px;
  }
  
  @keyframes spin {
      from {
          transform: rotate(0deg);
      }
      to { 
          transform: rotate(360deg);
      }
  }

.delet_absolute{
    position: absolute;
    right: 7px;
    bottom: 18px;
}

.color-custom-blue{
    color: #0190FF;
}

.info-submit-icon, .info-cancel-icon {
	font-size: 18px;
	padding: 5px;
}
.info-submit-icon{
    color: green;
}
.info-cancel-icon{
    color: red;
}
.info-container-bar label {
    color: var(--draft-color);
    font-weight: 500;
    font-size: 1rem;
}