/* cyrillic-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/app/font/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7SUc.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/app/font/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7SUc.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/app/font/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7SUc.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/app/font/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7SUc.woff2) format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* vietnamese */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/app/font/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7SUc.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/app/font/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7SUc.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/app/font/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


html {
    scrollbar-width: auto;
    overflow-x: hidden;

}


/** THEME BODY **/
body {
    font-weight: 400;
    color: #404c5e;
    background: #eef2f6;

}


* {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "slnt" 0;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-weight: 700;
    margin: 0
}

p {
    margin: 0
}

.bg-primary {
    background-color: var(--primary) !important;
}

a, .link-primary {
    display: inline-block;
    text-decoration: none;
    color: #626262 !important;
}

a:hover, .link-primary:hover {
    text-decoration: none;
    color: var(--primary) !important;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primary) !important;
    --bs-btn-border-color: var(--primary) !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: var(--primary) !important;
    --bs-btn-hover-border-color: #a53035 !important;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: #a53035 !important;
    --bs-btn-active-border-color: #952c30 !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff !important;
    --bs-btn-disabled-bg: var(--primary) !important;
    --bs-btn-disabled-border-color: var(--primary) !important;
}

.btn-outline-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-bg: white !important;
    --bs-btn-border-color: var(--primary) !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: var(--primary) !important;
    --bs-btn-hover-border-color: var(--primary) !important;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: var(--primary) !important;
    --bs-btn-active-border-color: var(--primary) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff !important;
    --bs-btn-disabled-bg: var(--primary) !important;
    --bs-btn-disabled-border-color: var(--primary) !important;
}

.btn-help {
    font-size: 11px;
}

.btn-secondary {
    background-color: #ccc;
}

.btn-secondary:hover {
    background-color: rgba(204, 204, 204, 0.8);
}


input[type="checkbox"], input[type="radio"] {
    accent-color: var(--primary);
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-check-input {
    width: 17px;
    height: 17px;
    border-color: #a4a4a4;

}

small,
.small {
    display: inline-block
}

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

.wrapper.main-wrapper {
    width: 100vw;
}

.media {
    display: flex;
    align-items: flex-start
}

.media-body {
    flex: 1
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 100000;
    display: flex;
    justify-content: center;
    align-items: center
}

.app-loader svg {
    margin: auto;
    background: none;
    display: block;
    shape-rendering: auto;
}

#preloader img {
    max-width: 150px
}

.app-loader svg circle, svg.table-loader circle {
    stroke: var(--primary);
}

.wrapper .LeftItem {
    position: fixed;
    left: 0;
    top: 0;
    width: 19%;
    height: 100vh;
    padding-top: 0;
    background: #1e293b;
}

.wrapper .LeftItem ::-webkit-scrollbar {
    width: 3px;

}

.wrapper .LeftItem :hover::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(128, 128, 128, .299);
    border-radius: 4px;

}

.wrapper .LeftItem :hover::-webkit-scrollbar-thumb {
    background: rgba(83, 169, 249, .2352941176);
    border-radius: 5px;

}

.wrapper .LeftItem :hover::-webkit-scrollbar-thumb {
    background: rgba(83, 169, 249, .3882352941);

}

.wrapper .LeftItem .mobileButton {
    z-index: 999
}

.wrapper .LeftItem.highlighted {
    width: 0;

}

.wrapper .LeftItem.highlighted nav .navList .navItem .navLink {
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;

}

.wrapper .LeftItem.highlighted nav .navList .navItem .navLink span {
    opacity: 0;
    width: 0;

}

.wrapper .LeftItem.highlighted nav .navList .accordion-button {
    padding-left: 20px;
    padding-right: 20px;

}

.wrapper .LeftItem.highlighted nav .navList .accordion-button::after {
    right: 15px
}

.wrapper .LeftItem.highlighted nav .navList .accordion-button span {
    opacity: 0;
    width: 0;

}

.wrapper .LeftItem.highlighted nav .navList .accordion-collapse ul {
    padding-left: 10px;
    padding-right: 10px
}

.wrapper .LeftItem.highlighted nav .navList .accordion-collapse ul li {
    margin-bottom: 5px
}

.wrapper .LeftItem.highlighted nav .navList .accordion-collapse ul li a {
    font-size: 13px
}

.wrapper .LeftItem.highlighted .TopItem {
    margin-bottom: 30px;

}

.wrapper .LeftItem.highlighted .TopItem a img {
    opacity: 0;


}


.wrapper .LeftItem .TopItem {
    min-height: 45px;
    background-color: #ffffff;
    padding: 10px 10px;
    height: 63px;
}


.wrapper .LeftItem .TopItem a img {

    margin: 5px 8px 5px;
}

.wrapper .LeftItem .TopItem button {
    border: 0;
}

.wrapper .LeftItem .TopItem button:focus {
    outline: none;
    box-shadow: none
}

.wrapper .LeftItem nav .navList {
    overflow-y: auto;
    overflow-x: hidden;
    height: 84vh;
    padding-bottom: 20px;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.wrapper .LeftItem nav .navList::-webkit-scrollbar {
    display: none;
}

.wrapper .LeftItem nav .navList .navItem:hover .navLink {
    color: white !important;

}

.wrapper .LeftItem nav .navList .navItem:hover .navLink::before {
    opacity: 1
}

.wrapper .LeftItem nav .navList .navItem .navLink {
    color: #ccc !important;

    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 15px;
    position: relative
}

.wrapper .LeftItem nav .navList .navItem .navLink svg {
    width: 25px
}

.wrapper .LeftItem nav .navList .navItem .navLink.active {
    color: white !important;
    font-weight: 700;
    background-color: var(--primary);
    box-shadow: rgba(255, 255, 255, 0.2) 0 1px 0 0 inset, rgba(0, 0, 0, 0.07) 0 1px 1px, rgba(0, 0, 0, 0.07) 0 2px 2px, rgba(0, 0, 0, 0.07) 0 4px 4px;
    background-image: linear-gradient(180deg, var(--btn-primary-light) 0%, var(--primary) 100%);
}

.wrapper .LeftItem nav .navList .navItem .navLink.active::before {
    opacity: 1
}

.wrapper .LeftItem nav .navList .accordion-button {
    color: #ccc !important;
    font-weight: 700;

    font-size: 13px;
    font-style: normal;
    line-height: normal;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 15px;
}

.wrapper .LeftItem nav .navList .accordion-button.collapsed {
    color: #ccc !important;
    font-weight: 400;

}

.wrapper .LeftItem nav .navList .accordion-button.collapsed::before {
    opacity: 0
}

.wrapper .LeftItem nav .navList .accordion-button:hover {
    color: white !important;
}


.wrapper .LeftItem nav .navList .accordion-button.active {
    color: white !important;
    font-weight: 700;
    background-color: var(--primary);
}

.wrapper .LeftItem nav .navList .accordion-button.active::before {
    opacity: 1
}

.wrapper .LeftItem nav .navList .accordion-button:not(.collapsed)::after {
    transform: rotate(450deg)
}

.wrapper .LeftItem nav .navList .accordion-button::after {
    flex-shrink: 0;
    width: 10px;
    height: 14px;
    margin-left: auto;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='7' viewBox='0 0 9 14' fill='none'%3E%3Cpath d='M1 13.2695L7 7.1344L0.999999 0.999261' stroke='%23ccc' stroke-width='2.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 7px;

    position: absolute;
    right: 30px
}

.wrapper .LeftItem nav .navList .accordion-collapse ul {
    padding-left: 50px;
    margin-top: 2px;
}

.wrapper .LeftItem nav .navList .accordion-collapse ul li {
    margin-bottom: 20px
}

.wrapper .LeftItem nav .navList .accordion-collapse ul li a {
    transition: all ease .1s;
    color: #ccc !important;

    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: flex;
    gap: 26px;
    align-items: center
}

.wrapper .LeftItem nav .navList .accordion-collapse ul li a:hover,
.wrapper .LeftItem nav .navList .accordion-collapse ul li a.active {
    color: white !important;
}

.wrapper header {
    position: fixed;
    top: 0;
    width: 81%;
    margin-left: 19%;
    padding-right: 20px;
    padding-left: 20px;
    background-color: #fff;
    height: 63px;
    z-index: 100;
}

.wrapper header .searchbar {
    position: relative;
    width: 388px;
    max-width: 100%
}

.wrapper header .searchbar input {
    border-radius: 5px;
    border: none;
    background: #f5f6fa;
    padding: 10px 15px 10px 45px;
    color: #404c5e;

    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.wrapper header .searchbar input::-moz-placeholder {
    color: #404c5e
}

.wrapper header .searchbar input::placeholder {
    color: #404c5e
}

.wrapper header .searchbar button {
    position: absolute;
    top: 50%;
    padding: 0;
    transform: translateY(-50%);
    left: 17px
}

.wrapper header .rightHeader {
    gap: 25px
}

.wrapper header .rightHeader .dropdown button {
    border: 0
}

.wrapper header .rightHeader .dropdown button:focus {
    outline: none;
    box-shadow: none
}

.wrapper header .rightHeader .dropdown button::after {
    display: inline-block;
    margin-left: 0;
    vertical-align: 0;
    content: "";
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M5.00033 3.92439L1.9128 0.83687C1.685 0.609064 1.31565 0.609064 1.08785 0.83687C0.860041 1.06468 0.860041 1.43402 1.08785 1.66183L4.58785 5.16183C4.81565 5.38963 5.185 5.38963 5.4128 5.16183L8.9128 1.66183C9.14061 1.43402 9.14061 1.06468 8.9128 0.83687C8.685 0.609064 8.31565 0.609064 8.08785 0.83687L5.00033 3.92439Z' fill='%23646464'/%3E%3Cmask id='mask0_112_3507' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='10' height='6'%3E%3Cpath d='M5.00033 3.92439L1.9128 0.83687C1.685 0.609064 1.31565 0.609064 1.08785 0.83687C0.860041 1.06468 0.860041 1.43402 1.08785 1.66183L4.58785 5.16183C4.81565 5.38963 5.185 5.38963 5.4128 5.16183L8.9128 1.66183C9.14061 1.43402 9.14061 1.06468 8.9128 0.83687C8.685 0.609064 8.31565 0.609064 8.08785 0.83687L5.00033 3.92439Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_112_3507)'%3E%3C/g%3E%3C/svg%3E");
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 9px;
    height: 5px;
    background-size: 100%;
    background-repeat: no-repeat
}

.wrapper header .rightHeader .dropdown.dpd1 button {
    padding: 0;
    position: relative
}

.wrapper header .rightHeader .dropdown.dpd1 button::after {
    display: none
}

.wrapper header .rightHeader .dropdown.dpd1 button .notiNumber {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #f93c65;
    color: #fff;

    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    display: inline-block;
    position: absolute;
    top: -8px;
    right: -2px
}

.wrapper header .rightHeader .dropdown.dpd2 button {
    display: flex;
    gap: 16px;
    padding: 0 15px 0 0;
    align-items: center
}

.wrapper header .rightHeader .dropdown.dpd3 button {
    padding: 0 40px 0 0;
}

.wrapper header .rightHeader .dropdown.dpd3 button::after {
    background-size: 10px;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    background-position: center;
    border-radius: 50%
}

.wrapper header .rightHeader .dropdown.dpd3 button .media {
    gap: 10px;
    align-items: center
}

.wrapper header .rightHeader .dropdown.dpd3 button .media img {
    width: 30px;
    border-radius: 50%;
    background-color: #d8d8d8
}

.wrapper header .rightHeader .dropdown.dpd3 button .media .media-body {
    text-align: left
}

.wrapper header .rightHeader .dropdown.dpd3 button .media .media-body .userTitle {
    display: block;
    color: #404040;

    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.wrapper header .rightHeader .dropdown.dpd3 button .media .media-body .userRool {
    display: block;
    color: #565656;

    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.wrapper .rightItem {
    padding-top: 90px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    width: 81%;
    margin-left: 19%;

}

.wrapper .rightItem.full {
    padding: 0;
    width: 81%;
    margin-left: 19%;

}

.wrapper .salesOverview .salesOverviewRow {
    --bs-gutter-x: 30px
}

.wrapper .salesOverview .salesItem .item {
    border-radius: 25px;
    background: #fff;
    padding: 25px 27px
}

.wrapper .salesOverview .salesItem .item a {
    display: block
}

.wrapper .salesOverview .salesItem .item a .media {
    gap: 15px
}

.wrapper .salesOverview .salesItem .item a .media .box, .svgbox {
    width: 55px;
    height: 55px;
    background-color: #a8a8a82e;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center
}

.wrapper .salesOverview.customer .salesItem .item a .media .box, .svgbox {
    width: 55px;
    height: 55px;
}


.svgbox {
    width: 60px;
    height: 60px;
    border-radius: 30%;

}

.wrapper .salesOverview .salesItem .item a .media .box.color2 {
    background-color: #a8a8a82e;
}

.wrapper .salesOverview .salesItem .item a .media .box.color3 {
    background-color: #a8a8a82e;
}

.wrapper .salesOverview .salesItem .item a .media .box.color4 {
    background-color: #a8a8a82e;
}

.wrapper .salesOverview .salesItem .item a .media .media-body .title {
    color: #848484;

    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 5px;
    display: block
}

.wrapper .salesOverview .salesItem .item a .media .media-body .numbers {
    color: #404c5e;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    display: block
}

.wrapper .salesOverview .salesOverviewRight {
    border-radius: 25px;
    background: #fff;
    padding-top: 10px;
    padding-bottom: 12px
}

.wrapper .salesOverview .salesOverviewRight .TitleArea {
    padding-right: 11px;
    padding-left: 20px
}

.wrapper .salesOverview .salesOverviewRight .TitleArea h2,
.wrapper .salesOverview .salesOverviewRight .TitleArea .h2 {
    color: #404c5e;

    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    margin-bottom: 0;
    width: 50%;
    max-width: 100%
}

.wrapper .salesOverview .salesOverviewRight .TitleArea select {
    border-radius: 4px;
    border: 1px solid #d5d5d5;
    background-color: #fcfdfd;
    width: 103px;
    color: rgba(43, 48, 52, .4);

    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    text-align: center;
    line-height: 10px;
    height: 28px
}

.wrapper .salesOverview .salesOverviewRight .salesOverviewItem {
    margin-top: 15px;
    padding-left: 47px;
    padding-right: 20px
}

.wrapper .salesOverview .salesOverviewRight .salesOverviewItem .contentItem {
    max-width: 220px
}

.wrapper .salesOverview .salesOverviewRight .salesOverviewItem .contentItem .innerItem {
    margin-bottom: 15px
}

.wrapper .salesOverview .salesOverviewRight .salesOverviewItem .contentItem .innerItem .priceTitle span {
    color: #718ebf;

    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.wrapper .salesOverview .salesOverviewRight .salesOverviewItem .contentItem .innerItem .price span {
    color: #404c5e;

    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.wrapper .salesOverview.smsOverview {
    background: #fff;
    padding: 30px 26px;
    border-radius: 26px;
    margin-bottom: 30px
}

.wrapper .salesOverview.smsOverview .salesItem {
    gap: 8px 0
}

.wrapper .salesOverview.smsOverview .salesItem .item {
    background-color: #f2f4f7
}

.wrapper .salesOverview.smsOverview .salesOverviewRight {
    border-radius: 0;
    background: rgba(0, 0, 0, 0);
    padding-top: 0;
    padding-bottom: 0;
    max-width: 430px
}

.wrapper .salesOverview.smsOverview .salesOverviewRight .TitleArea {
    padding-right: 0;
    padding-left: 0
}

.wrapper .salesOverview.smsOverview .salesOverviewRight .TitleArea h2,
.wrapper .salesOverview.smsOverview .salesOverviewRight .TitleArea .h2 {
    width: 45%
}

.wrapper .salesOverview.smsOverview .salesOverviewRight .salesOverviewItem {
    padding-left: 0;
    padding-right: 0
}

.wrapper .salesOverview.smsOverview .salesOverviewRight .salesOverviewItem .contentItem {
    max-width: 212px;
    margin-left: auto
}

.wrapper .table-overview {
    padding: 22px 30px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 6px 6px 54px 0 rgba(0, 0, 0, .03)
}

.wrapper .table-overview h2,
.wrapper .table-overview .h2 {
    color: #404c5e;

    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.114px;
    margin-bottom: 23px
}

.wrapper .table-overview table thead tr * {
    background: #f1f4f9;
    border: 0
}

.wrapper .table-overview table thead tr th:first-child {
    border-radius: 8px 0 0 8px
}

.wrapper .table-overview table thead tr th:last-child {
    border-radius: 0 8px 8px 0
}

.wrapper .table-overview table tr th {
    color: #404c5e;

    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 15px;
    text-align: left
}

.wrapper .table-overview table tr td {
    color: #404c5e;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    padding: .7rem .7rem;
    border-color: #979797;
    vertical-align: middle
}

.wrapper .table-overview table tr td button {
    border-radius: 5px;
    background: rgba(0, 182, 155, .2);
    padding: 6px 17px;
    color: #00b69b;

    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border: 0;
    width: 93px;
    max-width: 100%
}

.wrapper .table-overview table tr td button.Pending {
    color: var(--primary);
    background: rgba(83, 170, 249, .2)
}

.wrapper .table-overview table tr td button.Failed {
    color: #ef3826;
    background: rgba(239, 56, 38, .2)
}

.wrapper .table-overview nav .pagination {
    align-items: center
}

.wrapper .table-overview nav .pagination .page-item {
    line-height: 1
}

.wrapper .table-overview nav .pagination .page-item span {
    display: block;
    line-height: 1;
    font-weight: 900;
    position: relative;
    top: -3px
}

.wrapper .table-overview nav .pagination .page-item svg {
    width: 20px;
    height: 20px
}

.wrapper .table-overview .pagination .page-item a {
    display: flex;
    width: 30px;
    height: 28px;
    padding: 0 9px;
    align-items: center;
    gap: 6px;
    justify-content: center;
    color: #6b7280;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}

.wrapper .table-overview .pagination .page-item a:hover,
.wrapper .table-overview .pagination .page-item a.active {
    border-radius: 6px;
    background: #e5e7eb
}

.wrapper .ordersOverview {
    margin-top: 20px;
}

.wrapper .ordersOverview .SuccessItem .item {
    border-radius: 14px;
    background: #fff;
    box-shadow: 6px 6px 54px 0 rgba(0, 0, 0, .05);
    padding: 23px 9px 23px 9px;
    margin-bottom: 11px
}

.wrapper .ordersOverview .SuccessItem .item:last-child {
    margin-bottom: 0
}

.wrapper .ordersOverview .SuccessItem .item .leftTitle {
    margin-bottom: 0
}

.wrapper .ordersOverview .SuccessItem .item .leftTitle .titleText {
    color: #404c5e;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 5px
}

.wrapper .ordersOverview .SuccessItem .item .leftTitle .titleNumber, .dashboard-stat .leftTitle .titleNumber {
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 1px
}

.wrapper .ordersOverview .SuccessItem .item .itemButtom {
    color: #606060;

    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    gap: 8px
}

.wrapper .ordersOverview .SuccessItem .item .itemButtom .uptodownGreenText {
    color: #00b69b
}

.wrapper .ordersOverview .SuccessItem .item .itemButtom .uptodownRedText {
    color: #f93c65
}

.wrapper .customer {
    margin-bottom: 30px
}

.wrapper .customer table tbody tr:last-child td {
    border-bottom: 0
}

.wrapper .CampaignsOverview {
    margin-bottom: 30px
}

.wrapper .CampaignsOverview .table-overview .topITem {
    margin-bottom: 23px
}

.wrapper .CampaignsOverview .table-overview .topITem h2,
.wrapper .CampaignsOverview .table-overview .topITem .h2 {
    margin-bottom: 0
}

.wrapper .CampaignsOverview .table-overview .topITem select {
    border-radius: 4px;
    border: 1px solid #d5d5d5;
    background-color: #fcfdfd;
    width: 103px;
    color: rgba(43, 48, 52, .4);

    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    text-align: center;
    line-height: 10px;
    height: 28px
}

.wrapper .CampaignsOverview .table-overview table tr th {
    text-align: center
}

.wrapper .CampaignsOverview .table-overview table tr td {
    border: 0;
    text-align: center;
    vertical-align: middle;
}

.wrapper .CampaignsOverview .table-overview .CampaignsOverviewIem {
    margin-bottom: 34px;
}

.wrapper .CampaignsOverview .table-overview .CampaignsOverviewIem .item {
    border-radius: 25px;
    background: #f2f4f7;
    padding: 11px;
    gap: 15px
}

.wrapper .CampaignsOverview .table-overview .CampaignsOverviewIem .item .contentItem .titleText {
    color: #848484;

    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 5px
}

.wrapper .CampaignsOverview .table-overview .CampaignsOverviewIem .item .contentItem .titleNumber {
    color: #404c5e;

    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.wrapperLoos header {
    width: 100%;
    margin-left: 0;

}

.wrapperLoos .rightItem {
    width: 100%;
    margin-left: 0;


}


.rightHeader .dropdown-menu {
    margin-top: 13px !important;
    border: solid 1px #dce1ef;
    border-radius: 0
}


.loginWrapp {
    margin-top: 60px;
    padding-top: 20px;
    padding-bottom: 40px
}

.loginWrapp .box {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    max-width: 420px;
    min-width: 330px;
}

.loginWrapp .box.large {
    max-width: 800px;
}

.loginWrapp .box .logo {
    text-align: center;
    margin-bottom: 31px
}


.loginWrapp .box .boxInner {
    border-radius: 10px;
    padding: 30px;
}

.loginWrapp .box .boxInner h1,
.loginWrapp .box .boxInner .h1 {
    font-size: 30px;
    color: #404c5e;
    letter-spacing: -0.11px;
    margin-bottom: 15px
}

.loginWrapp .box .boxInner p {
    font-size: 13px;
    letter-spacing: -0.06px;
    color: #404c5e;
    font-weight: 500;
    margin-bottom: 0
}

.loginWrapp .box .boxInner form {
    margin-top: 0
}

.loginWrapp .box .boxInner form button {
    transition: all ease .6s
}

.loginWrapp .box .boxInner form button:hover {

    transition: all ease .6s
}

.loginWrapp .box .boxInner form a:hover {
    color: var(--primary) !important
}

.loginWrapp .box .boxInner form .form-check {
    margin-bottom: 15px
}

.loginWrapp .box .boxInner form .input-container label {
    color: #404c5e;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 15px;
    display: block
}

.loginWrapp .box .boxInner form .input-container input {
    border-color: #d8d8d8;
    background-color: #f4f8fd;
    border-radius: 8px;
    padding: .475rem .85rem;
    font-size: 13px;
    font-weight: 500
}

.loginWrapp .box .boxInner form input.form-check-input {
    padding: 8px 8px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0)
}

.loginWrapp .box .boxInner form input:checked {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important
}

.loginWrapp .box .boxInner form .form-check-label {
    color: #404c5e;
    font-size: 13px;
    font-weight: 500;
    padding-left: 10px;
    padding-top: 3px
}


.loginWrapp .box .boxInner form .passwordItem label {
    margin-bottom: 0
}

.loginWrapp .box .boxInner form .passwordItem a {
    color: #646464;
    font-size: 13px;
    font-weight: 500
}

.loginWrapp .box .boxInner form .signInButton {
    background-color: var(--primary);
    border-radius: 8px;
    width: 418px;
    max-width: 100%;
    display: block;
    font-size: 13px;
    border: 0;
    margin: 0 auto 18px;
    padding: 9px 0;
}

.loginWrapp .box .boxInner form .dontHave {
    font-size: 13px;
    font-weight: 500;
    color: #404c5e;
    text-align: center;
    display: block;
    margin-bottom: 15px
}

.loginWrapp .box .boxInner form .dontHave a {
    color: #646464;
    text-decoration: underline
}

.loginWrapp .box .boxInner form .or {
    position: relative;
    text-align: center;
    margin-bottom: 15px
}

.loginWrapp .box .boxInner form .or::after {
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 1px;
    background-color: #ddd
}

.loginWrapp .box .boxInner form .or span {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    background-color: #fff;
    position: relative;
    z-index: 99;
    padding: 0 10px;
    color: #404c5e
}

.loginWrapp .box .boxInner form ul.social-login li a:hover {
    background-color: var(--primary) !important;
    color: #fff !important;
    transition: all ease .6s
}

.loginWrapp .box .boxInner form ul.social-login li a {
    background-color: var(--primary);
    border-radius: 8px;
    text-decoration: none;
    display: flex;
    justify-content: start;
    font-weight: 700;
    padding: 5px;
    gap: 15px;
    align-items: center;
    border: 0;
    color: #fff;
    transition: all ease .6s;
    cursor: pointer;
    -webkit-appearance: button;
    text-transform: none;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

.loginWrapp .box .boxInner form ul.social-login li:last-child a {
    margin-bottom: 0;
    background-color: #fff;
    color: rgba(0, 0, 0, .54);
    box-shadow: 0 0 .5rem 1px rgba(0, 0, 0, .075)
}

.CharleneReed {
    margin-bottom: 10px
}

.CharleneReed .itemText h2,
.CharleneReed .itemText .h2 {
    font-size: 32px;
    margin-bottom: 0;
    color: #404c5e;
    letter-spacing: -0.11px
}

.CharleneReed .itemLink ul {
    gap: 7px
}

.CharleneReed .itemLink ul li a {
    display: flex;
    text-align: center;
    justify-content: center;
    gap: 10px;
    align-items: center;
    font-size: 13px;
    border-radius: 8px;
    padding: 14px 16px
}


.CharleneReedWrapp {
    padding: 30px 0;
    background-color: #fff;
    border-radius: 25px
}

.CharleneReedWrapp .navWrapp {
    padding-left: 10px;
    padding-right: 10px
}

.CharleneReedWrapp .nav {
    gap: 10px;
    border-bottom: 1px solid #f4f5f7
}

.CharleneReedWrapp .nav .nav-item .nav-link {
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0;
    font-size: 13px;
    color: #575f6c !important;
    font-weight: 500;
    transition: all ease-in-out .6s;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin: 0;
    line-height: 1;
    padding: 8px 15px 10px;
}

.CharleneReedWrapp .nav .nav-item .nav-link .numberText {
    width: 22px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #bdbdbd;
    color: #fff;
    font-size: 10px;
    border-radius: 100%;
    transition: all ease .6s
}

.CharleneReedWrapp .nav .nav-item .nav-link::after {
    position: absolute;
    content: "";
    bottom: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary);
    left: 0;
    border-radius: 10px 10px 0 0;
    opacity: 0;
    transition: all ease .6s
}

.CharleneReedWrapp .nav .nav-item .nav-link.active,
.CharleneReedWrapp .nav .nav-item .nav-link:hover {
    color: var(--primary) !important;
    transition: all ease 0s
}

.CharleneReedWrapp .nav .nav-item .nav-link.active .numberText,
.CharleneReedWrapp .nav .nav-item .nav-link:hover .numberText {
    background-color: var(--primary);
    transition: all ease .6s
}

.CharleneReedWrapp .nav .nav-item .nav-link.active::after,
.CharleneReedWrapp .nav .nav-item .nav-link:hover::after {
    opacity: 1;
    transition: all ease .6s
}

.CharleneReedWrapp .tab-content {
    padding-top: 30px;
    padding-bottom: 30px
}

.CharleneReedWrapp .avatar-upload {
    position: relative;
    max-width: 132px
}

.CharleneReedWrapp .avatar-upload .avatar-edit {
    position: absolute;
    right: 0;
    z-index: 1;
    bottom: 10px
}

.CharleneReedWrapp .avatar-upload .avatar-edit input {
    display: none
}

.CharleneReedWrapp .avatar-upload .avatar-edit input + label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    margin-bottom: 0;
    border-radius: 100%;
    background: var(--primary);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12);
    cursor: pointer;
    font-weight: normal;
    transition: all .2s ease-in-out
}

.CharleneReedWrapp .avatar-upload .avatar-edit input + label:hover {
    transform: scale(1.1)
}

.CharleneReedWrapp .avatar-upload .avatar-preview, .CharleneReedWrapp .avatar-upload .avatar-preview img {
    width: 132px;
    height: 132px;
    position: relative;
    border-radius: 100%
}

.imagePreview {
    object-fit: cover;
    padding: 3px;
    border: solid 1px #f1f1f1
}

.imagePreview-small {
    padding: 0;
    border: 0
}

.CharleneReedWrapp .avatar-upload .avatar-preview > div {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.CharleneReedWrapp .tabTop {
    padding-left: 10px;
    padding-right: 10px
}

.CharleneReedWrapp .tabTop .item {
    border-radius: 15px;
    background-color: #f5f6fa;
    padding: 14px 22px;
    transition: all ease-in-out .5s;
    height: 100%
}


.CharleneReedWrapp .tabTop .item h4,
.CharleneReedWrapp .tabTop .item .h4 {
    color: #a7a7a8;
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 5px;
    transition: all ease-in-out .5s
}

.CharleneReedWrapp .tabTop .item h2,
.CharleneReedWrapp .tabTop .item .h2 {
    font-size: 13px;
    font-weight: 500;
    color: #404c5e;
    margin-bottom: 0;
    transition: all ease-in-out .5s
}

.CharleneReedWrapp.EditYourProfile .tabFrom .groupFrom input,
.CharleneReedWrapp.EditYourProfile .tabFrom .groupFrom select,
.CharleneReedWrapp.EditYourProfile .tabFrom .groupFrom textarea {
    border-radius: 15px;
    border-color: #dfeaf2;
    padding: 15px 24px;
    color: var(--primary)
}

.CharleneReedWrapp.EditYourProfile .tabFrom .groupFrom input::-moz-placeholder,
.CharleneReedWrapp.EditYourProfile .tabFrom .groupFrom select::-moz-placeholder,
.CharleneReedWrapp.EditYourProfile .tabFrom .groupFrom textarea::-moz-placeholder {
    color: var(--primary)
}

.CharleneReedWrapp.EditYourProfile .tabFrom .groupFrom input::placeholder,
.CharleneReedWrapp.EditYourProfile .tabFrom .groupFrom select::placeholder,
.CharleneReedWrapp.EditYourProfile .tabFrom .groupFrom textarea::placeholder {
    color: var(--primary)
}

.CharleneReedWrapp.EditYourProfile .tabFrom .groupFrom select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg width='14' height='9' viewBox='0 0 14 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.998047 1L7.13318 7L13.2683 1' stroke='%2353AAF9' stroke-width='1.5'/%3E%3C/svg%3E%0A")
}

.CharleneReedWrapp.EditYourProfile .tabFrom .groupFrom select::-ms-expand {
    display: none
}

.CharleneReedWrapp.EditYourProfile .tabFrom .buttonFrom button {
    border-radius: 15px;
    width: 195px
}

.CharleneReedWrapp.EditYourProfile .tabFrom {
    margin-top: 0;
    padding-left: 0;
    padding-right: 0
}

.tabFrom {
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 10px
}

.tabFrom .groupFrom label {
    font-size: 13px;
    font-weight: 500;
    color: #404c5e;
    margin-bottom: 8px
}

.tabFrom .groupFrom input[type="text"],
.tabFrom .groupFrom select,
.tabFrom .groupFrom textarea {
    border-radius: 3px;
    border-color: #dfeaf2;
}

.tabFrom .groupFrom input::-moz-placeholder,
.tabFrom .groupFrom select::-moz-placeholder,
.tabFrom .groupFrom textarea::-moz-placeholder {
    color: #8a8a8a
}

.tabFrom .groupFrom input::placeholder,
.tabFrom .groupFrom select::placeholder,
.tabFrom .groupFrom textarea::placeholder {
    color: #8a8a8a
}

.tabFrom .buttonFrom button {
    border-radius: 25px;
    background-color: var(--primary);
    border: 1px solid var(--primary);
    color: #fff;
    width: 235px;
    max-width: 100%;
    margin-left: auto;
    padding: 12px;
    font-size: 13px;
    text-align: center;
    transition: all ease-in-out .6s
}

.tabFrom .buttonFrom button:hover {
    background-color: #fff;
    color: var(--primary)
}

.quickSend {
    padding: 30px;
    background-color: #fff;
    border-radius: 25px
}

.quickSend .groupFrom p {
    margin-bottom: 0;
    margin-top: 12px;
    font-size: 12px;
    color: #a6a6a6
}

.Pricing .titlePricing {
    color: #404c5e;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 30px
}

.Pricing .pricingWrapper .item {
    background-image: url(../img/Bg.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
    border-radius: 25px;
    padding: 40px 30px
}

.Pricing .pricingWrapper .item .itemTop {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #e8e8e8
}

.Pricing .pricingWrapper .item .itemTop .pkgTitle {
    font-size: 13px;
    font-weight: 700;
    color: #404c5e;
    margin-bottom: 10px
}

.Pricing .pricingWrapper .item .itemTop .pkgTime {
    color: #212121;
    font-size: 13px;
    margin-bottom: 10px
}

.Pricing .pricingWrapper .item .itemTop .pkgPrice {
    color: var(--primary);
    font-weight: 800
}

.Pricing .pricingWrapper .item .itemDescription {
    padding-top: 17px;
    padding-bottom: 0;
    border-bottom: 1px solid #e8e8e8
}

.Pricing .pricingWrapper .item .itemDescription ul {
    padding-left: 34px
}

.Pricing .pricingWrapper .item .itemDescription ul li {
    position: relative;
    padding-left: 25px;
    font-size: 13px;
    line-height: 1;
    margin-bottom: 15px;
    font-weight: 500
}

.Pricing .pricingWrapper .item .itemDescription ul li.notAvailable {
    color: rgba(33, 33, 33, .5)
}

.Pricing .pricingWrapper .item .itemDescription ul li.notAvailable::after {
    background-image: url("data:image/svg+xml,%0A%3Csvg width='10' height='11' viewBox='0 0 10 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.44309 10.4451L9.44299 10.4452C9.25093 10.6362 8.99015 10.7437 8.71794 10.7437C8.44837 10.7437 8.19001 10.6382 7.9985 10.4507L5.18823 7.25644L5.00056 7.04313L4.81286 7.25641L2.00187 10.4504C1.90807 10.544 1.79679 10.6186 1.67416 10.6699L1.77078 10.9005L1.67416 10.6699C1.5494 10.7222 1.41543 10.7494 1.27996 10.75C1.1445 10.7505 1.0103 10.7244 0.885117 10.6731C0.759937 10.6219 0.646293 10.5465 0.550705 10.4514C0.45512 10.3564 0.379481 10.2435 0.328082 10.1194C0.276683 9.9953 0.250521 9.86234 0.251071 9.72819C0.25162 9.59405 0.278869 9.46131 0.331284 9.33761C0.383699 9.21391 0.460263 9.10166 0.556627 9.00738L0.563279 9.00087L0.569429 8.99389L3.49916 5.66626L3.64459 5.50108L3.49919 5.33588L0.568389 2.00614L0.562229 1.99914L0.555564 1.99262C0.4592 1.89834 0.382637 1.78609 0.330221 1.66239C0.277807 1.53869 0.250558 1.40595 0.250008 1.27181C0.249459 1.13766 0.275621 1.00471 0.327019 0.880591C0.378419 0.756474 0.454058 0.643614 0.549643 0.548558C0.645231 0.453499 0.758875 0.378128 0.884055 0.32686C1.00924 0.275591 1.14344 0.24946 1.2789 0.250008C1.41436 0.250557 1.54834 0.277774 1.6731 0.330053C1.79572 0.381439 1.907 0.456018 2.0008 0.54955L4.81284 3.74568L5.00057 3.95905L5.18826 3.74564L7.99922 0.549531C8.09301 0.456008 8.20429 0.381435 8.3269 0.330054C8.45166 0.277774 8.58564 0.250557 8.7211 0.250008C8.85656 0.24946 8.99076 0.275591 9.11594 0.32686C9.24113 0.378128 9.35477 0.453499 9.45036 0.548558C9.54594 0.643614 9.62158 0.756474 9.67298 0.880591C9.72438 1.0047 9.75054 1.13766 9.74999 1.27181C9.74944 1.40595 9.72219 1.53869 9.66978 1.66239C9.61736 1.78609 9.5408 1.89834 9.44444 1.99262L9.43776 1.99916L9.43158 2.00617L6.50185 5.33591L6.3565 5.50111L6.5019 5.66626L9.43163 8.99389L9.43716 9.00016L9.44308 9.00605C9.53829 9.10063 9.61375 9.21287 9.66521 9.33631C9.71666 9.45975 9.74313 9.59202 9.74313 9.72556C9.74313 9.85911 9.71666 9.99137 9.66521 10.1148C9.61375 10.2383 9.53829 10.3505 9.44309 10.4451Z' fill='%23212121' stroke='white' stroke-width='0.5'/%3E%3C/svg%3E%0A");
    opacity: .5
}

.Pricing .pricingWrapper .item .itemDescription ul li::after {
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5306 1.53032L5.5306 9.53032C5.46092 9.60024 5.37813 9.65572 5.28696 9.69358C5.1958 9.73143 5.09806 9.75092 4.99935 9.75092C4.90064 9.75092 4.8029 9.73143 4.71173 9.69358C4.62057 9.65572 4.53778 9.60024 4.4681 9.53032L0.968098 6.03032C0.898333 5.96056 0.842993 5.87774 0.805236 5.78658C0.76748 5.69543 0.748047 5.59774 0.748047 5.49907C0.748047 5.40041 0.76748 5.30272 0.805236 5.21156C0.842993 5.12041 0.898333 5.03759 0.968098 4.96782C1.03786 4.89806 1.12069 4.84272 1.21184 4.80496C1.30299 4.76721 1.40069 4.74777 1.49935 4.74777C1.59801 4.74777 1.69571 4.76721 1.78686 4.80496C1.87801 4.84272 1.96083 4.89806 2.0306 4.96782L4.99997 7.9372L12.4693 0.469074C12.6102 0.328178 12.8013 0.249023 13.0006 0.249023C13.1999 0.249023 13.391 0.328178 13.5318 0.469074C13.6727 0.609971 13.7519 0.801067 13.7519 1.00032C13.7519 1.19958 13.6727 1.39068 13.5318 1.53157L13.5306 1.53032Z' fill='black'/%3E%3C/svg%3E%0A");
    background-size: 13px;
    background-repeat: no-repeat;
    background-position: center;
    width: 13px;
    height: 10px
}

.Pricing .pricingWrapper .item .itemButton {
    margin-top: 20px;
    text-align: center;
    margin-bottom: 10px;
}

.Pricing .pricingWrapper .item .itemButton button,
.outline-btn {
    border-radius: 5px;
    border: 1px solid var(--primary);
    background-color: rgba(0, 0, 0, 0);
    padding: 5px 20px;
    color: var(--primary);
}

.Pricing .pricingWrapper .item .itemButton button:hover,
.Pricing .pricingWrapper .item .itemButton button.active,
.outline-btn:hover,
.outline-btn:active {
    background-color: var(--primary);
    color: #fff;
    transition: all ease-in-out .6s
}


.outline-btn svg, .go-back-link svg {
    fill: var(--primary);
}

.Invoice .InvoiceOverview {
    padding: 0 10px
}

.Invoice .InvoiceOverview .invoiceTop .g-4,
.Invoice .InvoiceOverview .invoiceTop .gy-4 {
    --bs-gutter-y: 30px
}

.Invoice .InvoiceOverview .invoiceTop .g-4,
.Invoice .InvoiceOverview .invoiceTop .gx-4 {
    --bs-gutter-x: 10px
}

.Invoice .InvoiceOverview .invoiceTop .itemWrapp .title {
    font-size: 13px;
    color: #404c5e;
    line-height: 1
}

.Invoice .InvoiceOverview .invoiceTop .itemWrapp .titleValue {
    color: #5e5e5e;
    font-size: 13px;
    font-weight: bold
}

.Invoice .invoiceAccordion {
    margin-top: 40px
}

.Invoice .invoiceAccordion h2,
.Invoice .invoiceAccordion .h2 {
    font-size: 13px;
    font-weight: 700;
    color: #404c5e;
    margin-bottom: 21px
}

.Invoice .invoiceAccordion .accordion-item {
    border: 1px solid #d5d5d5;
    background-color: #fbfcff;
    border-radius: 5px;
    padding: 15px 20px 15px 15px;
    margin-bottom: 24px
}

.Invoice .invoiceAccordion .accordion-item:last-child {
    margin-bottom: 0
}

.Invoice .invoiceAccordion .accordion-item .accHead {
    position: relative;
    transition: all ease-in-out .6s
}

.Invoice .invoiceAccordion .accordion-item .accHead.collapsed {
    transition: all ease-in-out .6s
}

.Invoice .invoiceAccordion .accordion-item .accHead.collapsed::before {
    transform: translateY(-50%) rotate(0deg);
    transition: all ease-in-out .6s
}

.Invoice .invoiceAccordion .accordion-item .accHead::before {
    transition: all ease-in-out .6s;
    position: absolute;
    content: "";
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(540deg);
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='9' viewBox='0 0 14 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.998047 1L7.13318 7L13.2683 1' stroke='%2353AAF9' stroke-width='1.5'/%3E%3C/svg%3E");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    width: 17px;
    height: 9px
}

.Invoice .invoiceAccordion .accordion-item ul li button {
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid;
    padding: 5px 10px;
    background-color: rgba(0, 0, 0, 0);
    font-size: 13px;
    font-weight: 400
}

.Invoice .invoiceAccordion .accordion-item ul li button.Success {
    background-color: var(--primary);
    color: #fff
}

.Invoice .invoiceAccordion .accordion-item ul li button.Fedhhd {
    border-color: var(--primary);
    background-color: #dbe6ff;
    color: var(--primary)
}

.Invoice .invoiceAccordion .accordion-body {
    padding-bottom: 0;
    padding-top: 46px;
    padding-left: 20px;
    padding-right: 20px
}

.Invoice .invoiceAccordion .accordion-body .itemDetails h4,
.Invoice .invoiceAccordion .accordion-body .itemDetails .h4 {
    font-size: 13px;
    color: #404c5e
}

.Invoice .invoiceAccordion .accordion-body .itemDetails p {
    color: #5e5e5e;
    font-size: 13px
}

.CustomersTop h2,
.CustomersTop .h2 {
    font-size: 32px;
    color: #404c5e;
    margin-bottom: 0
}

.buttonFilterSearch li button {
    display: flex;
    text-align: center;
    justify-content: center;
    gap: 5px;
    align-items: center;
    border-radius: 3px;
    transition: all ease-in-out .6s
}


.custom-table {
    margin-top: 10px
}

.custom-table .table-overview {
    padding: 0;
    border-radius: 0;
    background: rgba(0, 0, 0, 0);
    box-shadow: none
}

.custom-table .table-responsive {
    padding: 12px 12px 0 12px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 6px 6px 54px 0 rgba(0, 0, 0, .03)
}

.custom-table .table-responsive table {
    margin-bottom: 0
}

.custom-table .table-overview table tr:last-child td {
    border-bottom: 0
}

.custom-table .table-overview table tr th {
    padding: 15px 13px
}

.custom-table .table-overview table tr td {
    padding: 16px 9px 16px 13px;
}

.custom-table .form-check-input {
    --bs-form-check-bg: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

}

.custom-table .table-overview .pagination {
    margin-top: 17px
}

.custom-table-options select {
    color: #404c5e;
    font-weight: 400
}

.searceModal.modal {
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    background: rgba(0, 0, 0, 0);
}

.searceModal .modal-body {
    padding: 26px 40px 1px 40px
}

.searceModal .groupInput {
    margin-bottom: 28px
}

.searceModal .groupInput h4,
.searceModal .groupInput .h4 {
    color: #606060;
    font-size: 13px;
    margin-bottom: 8px;
    font-weight: 700
}

.searceModal .groupInput label {
    font-size: 13px
}

.searceModal .groupComonInput {
    margin-bottom: 28px
}

.searceModal .groupComonInput input {
    border-color: #d5d5d5;
    background-color: #f5f6fa;

    font-size: 13px;
    color: #a6a6a6
}

.searceModal .groupComonInput input::-moz-placeholder {
    color: #a6a6a6
}

.searceModal .groupComonInput input::placeholder {
    color: #a6a6a6
}

.searceModal .groupComonInput label {
    color: #606060;
    font-size: 13px;
    margin-bottom: 8px;
    font-weight: 700
}


.btn {
    border-radius: 3px
}

.btn-primary {
    background-color: var(--btn-primary-light) !important;
    border: 1px solid var(--btn-primary-border) !important;
    color: white !important;
    border-radius: 3px;
    display: flex;
    text-align: center;
    justify-content: center;
    gap: 5px;
    align-items: center;
    padding: .375rem .75rem .375rem .75rem;
    transition: all ease-in-out .6s;
    background-image: linear-gradient(180deg, var(--btn-primary-light) 0%, var(--primary) 100%);
    box-shadow: rgba(255, 255, 255, 0.2) 0 1px 0 0 inset, rgba(0, 0, 0, 0.07) 0 1px 1px, rgba(0, 0, 0, 0.07) 0 2px 2px, rgba(0, 0, 0, 0.07) 0 4px 4px;

}

.btn-primary:hover,
.btn-primary:active {
    background-color: var(--btn-primary-hover) !important;
    background-image: linear-gradient(180deg, var(--primary) 0%, var(--primary) 100%);
    border: 1px solid var(--btn-primary-border-hover) !important;
}

.btn-semidark {
    --bs-btn-color: #fff;
    --bs-btn-bg: #4d4f51;
    --bs-btn-border-color: #555050;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #424649;
    --bs-btn-hover-border-color: #555050;
    --bs-btn-focus-shadow-rgb: 66, 70, 73;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4d4f51;
    --bs-btn-active-border-color: #555050;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #212529;
    --bs-btn-disabled-border-color: #212529;
}

.Ordersinvoice .OrdersinvoiceTop {
    margin-bottom: 64px;
}

.Ordersinvoice .OrdersinvoiceTop .item h2,
.Ordersinvoice .OrdersinvoiceTop .item .h2 {
    font-size: 13px;
    font-weight: 500;
    color: #404040;
    margin-bottom: 12px
}

.Ordersinvoice .OrdersinvoiceTop .item h4,
.Ordersinvoice .OrdersinvoiceTop .item .h4 {
    color: #404040;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px
}

.Ordersinvoice .OrdersinvoiceTop .item p {
    color: #565656;
    font-size: 13px;
    margin-bottom: 0
}

.Ordersinvoice .OrdersinvoiceTop .item p.invoiceDate {
    color: #404040;
    font-size: 13px;
    margin-bottom: 10px
}

.OrdersinvoiceTable .table-overview {
    padding: 0 30px;
    border-radius: 0;
    background: rgba(0, 0, 0, 0);
    box-shadow: none
}

.OrdersinvoiceTable .table-overview .table2 {
    width: 370px;
    max-width: 100%;
    margin-left: auto
}

.OrdersinvoiceTable .table-overview .table2 tr * {
    font-weight: 800
}

.OrdersinvoiceTable .table-overview .table2 tr:last-child td {
    border-bottom: 0;
    color: red
}

.OrdersinvoiceTable .table-overview .table2 tr td {
    padding: 20px
}

.OrdersinvoiceTable .table-overview .table2 tr td:last-child {
    padding-right: 80px
}

.TermsCondition {
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 33px
}

.TermsCondition .itemText {
    padding-top: 27px;
    padding-bottom: 34px;
    border-bottom: 1px solid #e0e0e0
}

.TermsCondition .itemText h4,
.TermsCondition .itemText .h4 {
    font-size: 13px;
    color: #292828;
    margin-bottom: 14px
}

.TermsCondition .itemText p {
    font-size: 13px;
    color: #848484;
    max-width: 930px;
    width: 100%
}

.TermsCondition .itemOnline {
    padding-top: 27px
}

.TermsCondition .itemOnline .onlineLeft h4,
.TermsCondition .itemOnline .onlineLeft .h4 {
    font-size: 13px;
    color: #292828;
    margin-bottom: 14px
}

.TermsCondition .itemOnline .onlineLeft label {
    color: #848484;
    font-size: 13px
}

.TermsCondition .itemOnline .itemOnlineInner {
    margin-bottom: 18px
}

.TermsCondition .itemOnline .onlineRight h4,
.TermsCondition .itemOnline .onlineRight .h4 {
    font-size: 13px;
    color: #292828;
    margin-bottom: 14px
}

.TermsCondition .itemOnline .onlineRight p {
    font-size: 13px;
    color: #848484
}

.TermsCondition .itemOnline .onlineAmount h4,
.TermsCondition .itemOnline .onlineAmount .h4 {
    font-size: 13px;
    color: #292828;
    margin-bottom: 8px
}

.TermsCondition .itemOnline .inputWrapp {
    position: relative;
    width: 214px;
    max-width: 100%
}

.TermsCondition .itemOnline .inputWrapp input {
    border: 1px solid #d5d5d5;
    border-radius: 19px;
    background-color: #f5f6fa;
    padding: 7px 41px 7px 18px;
    -moz-appearance: textfield;
    max-width: 100%
}

.TermsCondition .itemOnline .inputWrapp input::-webkit-outer-spin-button,
.TermsCondition .itemOnline .inputWrapp input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.TermsCondition .itemOnline .inputWrapp button {
    background: rgba(0, 0, 0, 0);
    border: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translatey(-50%);
    height: 100%;
    border-left: 1px solid #ddd;
    padding-left: 14px;
    padding-right: 18px
}

.TermsCondition .itemOnline .buttonOnline {
    margin-top: 27px
}

.TermsCondition .itemOnline .buttonOnline button {
    cursor: pointer;
    border-radius: 15px;
    border: 1px solid;
    padding: 10px 22px;
    font-size: 13px;
    font-weight: bold;
    background-color: var(--primary);
    color: #fff
}

.cSwitch label {
    background-color: #f3f4f6;
    border-radius: 30px;
    display: inline-block;
    width: 52px;
    height: 28px;
    padding: 2px;
    transition: all ease .6s;
    position: relative
}

.cSwitch label::after {
    position: absolute;
    content: "";
    left: 2px;
    width: 24px;
    height: 24px;
    background-color: #fff;
    border-radius: 50%;
    z-index: 1;
    transition: all ease .6s;
    top: 2px
}

.cSwitch label .checkItem {
    display: flex;
    justify-content: space-between;
    transition: all ease .6s
}

.cSwitch label .checkItem .xCheck {
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    z-index: 9;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all ease .6s
}

.cSwitch label .checkItem .xCheck svg {
    transition: all ease .6s
}

.cSwitch label .checkItem .yesCheck {
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    z-index: 9;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all ease .6s
}

.cSwitch label .checkItem .yesCheck svg {
    transition: all ease .6s
}

.cSwitch input:checked + label {
    background-color: #2563eb
}

.cSwitch input:checked + label::after {
    right: 2px;
    left: auto;
    transition: all ease-in .6s
}

.cSwitch input:checked + label .checkItem .xCheck svg path {
    stroke: #fff
}

.cSwitch input:checked + label .checkItem .yesCheck svg path {
    stroke: #2563eb
}

.cSwitch input:disabled + label {
    opacity: .5
}

.cSwitchBg label {
    border: 1px solid #e5e7eb;
    width: 54px;
    height: 30px
}

.cSwitchBg input:checked + label {
    border: 1px solid #93c5fd;
    background-color: #dbeafe
}

.cSwitchBg input:checked + label::after {
    background-color: #2563eb
}

.cSwitchBg input:checked + label .checkItem .xCheck::after {
    background-color: rgba(0, 0, 0, 0)
}

.cSwitchBg input:checked + label .checkItem .xCheck svg path {
    stroke: #2563eb
}

.cSwitchBg input:checked + label .checkItem .yesCheck::after {
    background-color: #2563eb
}

.cSwitchBg input:checked + label .checkItem .yesCheck svg path {
    stroke: #fff
}


.OrdersinvoiceTable .ordersOverviewTable .table2 {
    width: 370px;
    max-width: 100%;
    margin-left: auto;
}

.OrdersinvoiceTable .ordersOverviewTable .table2 tr td {
    padding: 20px;
}

.OrdersinvoiceTable .ordersOverviewTable .table2 tr * {
    font-weight: 800;
}

.wrapper .ordersOverviewTable table tr td {

    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 15px 9px;
    border-bottom: 0;
    vertical-align: middle;
}

.OrdersinvoiceTable .ordersOverviewTable .table2 tr td:last-child {
    padding-right: 30px;
}

.OrdersinvoiceTable .ordersOverviewTable .table2 tr td {
    padding: 0 20px 0 0;

}

.OrdersinvoiceTable .ordersOverviewTable .table2 tr * {
    font-weight: 600;
}


@media (min-width: 1600px) {
    .wrapper .LeftItem {
        width: 300px;
    }

    .wrapper header {
        width: calc(100% - 300px);
        margin-left: 300px;
    }

    .wrapper .rightItem {
        width: calc(100% - 300px);
        margin-left: 300px;
    }

    .wrapper .rightItem.highlighted {
        width: 100%;
        margin-left: 0;
    }

    .wrapperLoos header {
        width: 100%;
        margin-left: 0;
    }
}


@media (min-width: 1200px) {
    .CharleneReedWrapp.EditYourProfile .tabTop .col-lg-2 {
        width: 16.666667%
    }

    .CharleneReedWrapp.EditYourProfile .tabTop .col-lg-10 {
        width: 83.333333%
    }

    .CharleneReedWrapp.EditYourProfile .nav {
        gap: 60px
    }

    .CharleneReedWrapp .tabTop .col-lg-10 {
        width: 84.333333%
    }

    .CharleneReedWrapp .tabTop .col-lg-2 {
        width: 15.666667%
    }

    .CharleneReedWrapp .g-3,
    .CharleneReedWrapp .gy-3 {
        --bs-gutter-y: 15px
    }

    .CharleneReedWrapp .g-3,
    .CharleneReedWrapp .gx-3 {
        --bs-gutter-x: 20px
    }

    .admin-dashboard-callout {
        margin-bottom: 35px
    }
}

@media (max-width: 1199px) {


    .wrapper .LeftItem .TopItem {
        min-height: 35px
    }

    .wrapper .LeftItem nav .navList .navItem .navLink,
    .wrapper .LeftItem nav .navList .accordion-button {
        font-size: 13px;
        gap: 10px;
        padding-top: 12px;
        padding-bottom: 12px;
        padding-left: 20px;
        padding-right: 20px
    }


    .wrapperLoos .rightItem {
        width: 100%;
        margin-left: 0
    }

    .wrapperLoos header {
        width: 100%;
        margin-left: 0
    }

    .wrapper .LeftItem.highlighted {
        width: 0
    }

    .wrapper .LeftItem nav .navList .accordion-button::before {
        width: 3px
    }

    .wrapper .LeftItem nav .navList .accordion-button::after {
        right: 20px
    }

    .wrapper .rightItem {
        padding-right: 15px
    }

    .wrapper .salesOverview.salesOverview .salesOverviewRight {
        max-width: 100%;
        text-align: center;
        margin-top: 30px
    }

    .wrapper .salesOverview.salesOverview .salesOverviewRight .TitleArea h2,
    .wrapper .salesOverview.salesOverview .salesOverviewRight .TitleArea .h2 {
        width: 100%;
        margin-bottom: 15px
    }

    .wrapper .salesOverview.salesOverview .salesOverviewRight .TitleArea {
        margin-bottom: 40px
    }

    .wrapper .salesOverview.salesOverview .salesOverviewRight .salesOverviewItem .contentItem {
        margin: 0 auto;
        margin-top: 25px
    }


    .wrapper .ordersOverview .SuccessItem .item .leftTitle .titleText {
        margin-bottom: 5px
    }

    .wrapper .ordersOverview .SuccessItem .item .leftTitle {
        margin-bottom: 0
    }

    .wrapper .ordersOverview .SuccessItem .item .itemButtom {
        display: none !important
    }


    .wrapper .CampaignsOverview .table-overview .CampaignsOverviewIem .row {
        gap: 20px 0
    }

    .wrapper .LeftItem.highlighted nav .navList .accordion-button {
        padding-left: 17px;
        padding-right: 20px;
    }

    .wrapper .LeftItem nav .navList .accordion-collapse .accordion-body ul {
        padding-left: 58px;
    }

    .wrapper .LeftItem nav .navList .accordion-collapse .accordion-body ul li {
        margin-bottom: 15px
    }

    .admin-dashboard-callout {
        margin-bottom: 35px
    }


}

@media (max-width: 1024px) {
    .breakpoint-message.message-container {
        align-items: center;
    }

    .breakpoint-message.message-container .message {
        background-color: white;
        z-index: 9999;
        max-width: 500px;
        padding: 1rem 3rem 3rem;
        text-align: center;
    }

    .breakpoint-message.message-container .icons {
        background-color: rgba(255, 166, 0, 0.331);
        font-size: 22px;
        padding: 1rem;
        border-radius: 50%;
        width: 80px;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 1.5rem auto 0;
    }

    .admin-dashboard-callout {
        margin-bottom: 35px
    }


}

@media (max-width: 991px) {
    .rightHeader .dropdown-menu {

        border: solid 1px #dce1ef;
        border-radius: 0
    }

    .wrapper header .rightHeader .dropdown.dpd2 button img,
    .wrapper header .rightHeader .dropdown.dpd3 button .media .media-body {
        display: none
    }

    .wrapper header .rightHeader .dropdown.dpd3 button::after {
        display: none
    }

    .wrapper header .rightHeader .dropdown.dpd3 button {
        padding: 0;
    }

    .wrapper .LeftItem .TopItem button {
        display: none
    }

    .wrapper .LeftItem {
        left: -300px;
        top: 0;
        height: 100vh;
        transition: all ease .6s;
        width: 0;
        text-align: left;
        z-index: 10001;
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 30px
    }

    .wrapper .LeftItem.highlighted {
        left: 0;
        width: 230px;
        transition: all ease .6s;
        box-shadow: 5px 0 5px -5px #333;
    }

    .wrapper .LeftItem.highlighted nav .navList .navItem .navLink span {
        display: block;
        width: auto;
        opacity: 1
    }

    .wrapper .LeftItem nav .navList .navItem .navLink::before {
        opacity: 0 !important;
        display: none
    }

    .wrapper header .searchbar {
        position: relative;
        width: 140px;
        max-width: 100%
    }

    .wrapper header {
        padding-right: 20px;
        padding-left: 20px;

        margin-left: 0;
        width: 100%
    }

    .wrapper .rightItem {
        padding-right: 20px;
        padding-left: 20px;
        margin-left: 0;
        width: 100%
    }

    .wrapper .rightItem.highlighted {
        height: 100vh;
        max-height: 100vh;
        overflow-y: hidden;
    }

    .wrapper .LeftItem.highlighted .TopItem a img {
        opacity: 1;
        margin-left: 10px;
        max-height: 50px;
        max-width: 150px;
    }

    .wrapper .LeftItem nav {
        width: 100%;
    }

    .wrapper .LeftItem.highlighted nav .navList .accordion-button {
        text-align: left
    }

    .wrapper .LeftItem.highlighted nav .navList .accordion-button span {
        opacity: 1;
        width: 100%
    }

    .wrapper .LeftItem nav .navList {
        overflow-y: hidden;
        overflow-x: hidden;
        height: auto;
        padding-bottom: 0
    }

    .wrapper .LeftItem.highlighted nav .navList .navItem .navLink {
        padding-left: 15px;
        padding-right: 15px;
    }

    .wrapper .LeftItem nav .navList .accordion-collapse .accordion-body ul {
        padding-left: 50px;
    }


    .wrapper .table-overview table thead tr th:last-child,
    .wrapper .table-overview table tbody tr td:last-child {
        padding-right: 70px
    }

    .loginWrapp .container {
        padding-left: 0;
        padding-right: 0
    }

    .loginWrapp {
        padding-top: 65px
    }

    .loginWrapp .box .boxInner {
        padding-top: 50px;
        padding-left: 35px;
        padding-right: 35px;
        padding-bottom: 50px
    }

    .loginWrapp .box .boxInner p {
        width: 290px;
        max-width: 100%;
        margin: auto
    }

    .loginWrapp .box .boxInner form ul li button {
        font-size: 18px
    }

    .OrdersinvoiceTable .ordersOverviewTable .table2 tr td:last-child {
        padding-right: 20px;
    }

    .wrapper .LeftItem.highlighted .TopItem {
        margin-bottom: 0;
    }


    .wrapperLoos::after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top: -42px;
        width: 100%;
        height: calc(100% + 42px);
        background-color: rgba(45, 62, 80, .79);
        pointer-events: auto;
        opacity: 1;
        z-index: 10000;
        -webkit-transition: opacity .3s cubic-bezier(0, 0, .3, 1);
        transition: opacity .3s cubic-bezier(0, 0, .3, 1);

    }

    .wrapper .LeftItem nav .navList .accordion-button {

        gap: 13px;

    }

    .knowledgebase-modal .knowledgebase-control-panel {
        max-height: 20vh !important;
        height: 20vh !important;
    }

    .knowledgebase-modal .help-content {
        max-height: 70vh !important;
    }


}

@media (max-width: 767px) {

    .wrapper .table-overview .arrows {
        display: flex
    }

    .wrapper .salesOverview .salesOverviewRight .salesOverviewItem {
        margin-top: 15px;
        padding-left: 0;
        padding-right: 0
    }

    .wrapper .ordersOverview .SuccessItem .item {
        padding: 20px 8px 20px 8px
    }

    .wrapper .salesOverview.salesOverview {
        background: rgba(0, 0, 0, 0);
        padding: 0;
        border-radius: 26px;
    }

    .wrapper .salesOverview.salesOverview .salesItem .item {
        background-color: #fff
    }

    .wrapper .salesOverview .salesItem .item a .media {
        display: block;
        text-align: center
    }

    .wrapper .salesOverview .salesItem .item a .media .box {
        margin: auto;
        margin-bottom: 11px
    }

    .wrapper .salesOverview.salesOverview .salesOverviewRight {
        padding: 30px;
        background: #fff;
        border-radius: 26px
    }


    .wrapper .rightItem {
        padding-right: 12px;
        padding-left: 12px
    }

    .wrapper .CampaignsOverview .table-overview .topITem select {
        margin: 0 auto;
        margin-top: 15px
    }

    .wrapper .table-overview {
        padding: 0;
        border-radius: 14px;
        box-shadow: none
    }

    .wrapper .CampaignsOverview .table-overview .CampaignsOverviewIem .item .itemImg {
        margin-bottom: 10px
    }

    .wrapper .CampaignsOverview .table-overview .CampaignsOverviewIem .item span {
        display: block
    }

    .wrapper .CampaignsOverview .table-overview .CampaignsOverviewIem .item {
        border-radius: 25px;
        background: #fff;
        padding: 20px;
        display: block !important;
        text-align: center
    }
    .wrapper .CampaignsOverview .table-overview .CampaignsOverviewIem .row {
        gap: 0 0
    }

    .wrapper .salesOverview.smsOverview .salesItem {
        margin-top: 30px
    }

    .wrapper .table-overview table {
        width: 600px
    }

    .wrapper table thead tr * {
        background: #fff;
        border-bottom: 1px solid #ddd
    }

    .wrapper header .rightHeader {
        gap: 15px
    }

    .wrapper header {
        padding-right: 12px;
        padding-left: 12px
    }

    .toggoleButoonMobile svg {
        width: 15px
    }

    .wrapper header .searchbar {
        position: relative;
        width: 125px;
        max-width: 100%
    }

    .CharleneReedWrapp .tabTop .item {
        padding: 8px 13px;
        text-align: center;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

    .CharleneReedWrapp .tabTop,
    .tabFrom {
        padding-left: 12px;
        padding-right: 12px
    }

    .CharleneReed .itemLink ul {
        margin-top: 10px;
        gap: 4px
    }

    .CharleneReedWrapp .nav {
        gap: 5px;
        flex-wrap: nowrap;
        width: 1000px
    }

    .CharleneReedWrapp .tab-content .avatar-upload {
        margin: 0 auto;
        margin-bottom: 20px
    }

    /**.CharleneReedWrapp {
        margin-left: -12px;
        margin-right: -12px
    }*/
    .CharleneReedWrapp .navWrapp {
        padding-left: 12px;
        padding-right: 12px;
        overflow-x: auto
    }

    .CharleneReed .itemLink ul li a svg {
        width: 14px
    }

    .CharleneReed .itemLink ul li a {
        height: 100%;
        padding: 10px 12px
    }

    .CharleneReed .itemLink ul li a span {
        display: none
    }

    .tabFrom .buttonFrom button {
        margin-right: auto;
        display: block
    }

    .quickSend {
        margin-left: -12px;
        margin-right: -12px;
        padding-left: 12px;
        padding-right: 12px
    }

    .Invoice .InvoiceOverview {
        padding: 0 12px
    }

    .Invoice .invoiceAccordion .accordion-body {
        padding: 20px 0 0;
    }

    .buttonFilterSearch li button.addNew {
        width: auto
    }

    .custom-table-options {
        gap: .2rem !important
    }


    .buttonFilterSearch {
        gap: .3rem !important
    }

    .searceModal .modal-footer {
        padding-bottom: 40px
    }

    .searceModal .groupComonInput,
    .searceModal .groupComonInput .mb-19 {
        margin-bottom: 19px
    }

    .OrdersinvoiceTable .table-overview table tr td,
    .OrdersinvoiceTable .table-overview table tr th {
        font-size: 12px;
        padding: 10px;
        vertical-align: middle
    }

    .wrapper .table-overview table thead tr th:last-child,
    .wrapper .table-overview table tbody tr td:last-child {
        padding-right: 10px
    }

    .OrdersinvoiceTable .table-overview .table2 tr td:last-child {
        padding-right: 10px
    }

    .OrdersinvoiceTable .table-overview .table2 {
        width: 190px;
        max-width: 100%;
        margin-left: auto
    }

    .table-filter {
        width: 75%;
    }


    .wrapper .ordersOverview {
        margin-top: 18px;
    }

    .custom-table-options {
        width: 50%
    }

    .admin-dashboard-callout {
        margin-bottom: 18px
    }

}


@media (max-width: 576px) {
    .wrapper .LeftItem.highlighted {
        width: 100%;
    }
}


.cbtn {
    line-height: 1.2;
    font-weight: 500;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 6px;
    padding: 6px 10px;
    background-color: #dbeafe;
    color: #1e40af;
}

.buttonWrapp {
    gap: 0 60px
}

.buttonWrapp h5,
.buttonWrapp .h5 {
    margin-bottom: 20px
}

.commonBtn {
    color: #1f2937;
    background-color: rgba(0, 0, 0, 0);
    border-color: #e5e7eb;
    gap: 0 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.commonBtn:hover {
    background-color: #1d4ed8
}

.commonBtn:focus {
    box-shadow: 0 0 0 6px #cedffc
}

.commonBtn:disabled {
    background-color: #60a5fa;
    color: #eff6ff;
    border-color: #60a5fa
}

.cbtn {
    line-height: 1.2;
    font-weight: 500;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 6px;
    padding: 6px 10px;
    background-color: #dbeafe;
    color: #1e40af
}

.btnWhite {
    border-color: #e5e7eb;
    background-color: rgba(0, 0, 0, 0);
    color: #1f2937
}

.btnWhite:hover {
    background-color: #1f2937;
    color: #fff
}

.Outlined {
    border-color: #60a5fa;
    color: #2563eb;
    background-color: rgba(0, 0, 0, 0)
}

.Outlined:hover {
    background-color: #2563eb;
    color: #fff
}

.btnSoft {
    background-color: #dbeafe;
    color: #1e40af
}

.btnSoft:hover {
    background-color: #1e40af;
    color: #fff
}

.btnSmall {
    padding: 1px 6px
}

.btnLarge {
    padding: 11px 14px
}

.btnRounded {
    border-radius: 6px
}

.btnPilled {
    border-radius: 30px
}

.Outlined1 {
    background-color: rgba(0, 0, 0, 0);
    border-color: #9ca3af;
    color: #1f2937
}

.Outlined1:hover {
    background-color: #1f2937;
    color: #fff
}

.buttonItem {
    display: flex;
    flex-direction: column;
    gap: 20px 0
}

.buttonItem button:last-child {
    margin-bottom: 0
}

.Outlined2 {
    background-color: rgba(0, 0, 0, 0);
    color: #6b7280;
    border-color: #e5e7eb
}

.Outlined2:hover {
    background-color: #e5e7eb;
    color: #000
}

.Outlined3 {
    background-color: rgba(0, 0, 0, 0);
    border-color: #2dd4bf;
    color: #14b8a6
}

.Outlined3:hover {
    background-color: #14b8a6;
    color: #fff
}

.Outlined4 {
    background-color: rgba(0, 0, 0, 0);
    border-color: #60a5fa;
    color: #2563eb
}

.Outlined4:hover {
    background-color: #2563eb;
    color: #fff
}

.Outlined5 {
    background-color: rgba(0, 0, 0, 0);
    border-color: #f87171;
    color: #ef4444
}

.Outlined5:hover {
    background-color: #ef4444 !important;
    color: #fff
}

.Outlined6 {
    background-color: rgba(0, 0, 0, 0);
    border-color: #facc15;
    color: #eab308
}

.Outlined6:hover {
    background-color: #eab308;
    color: #fff
}

.Soft1 {
    background-color: rgba(0, 0, 0, 0);
    background: #f3f4f6;
    color: #1f2937
}

.Soft1:hover {
    background-color: #1f2937;
    color: #fff
}

.Soft2 {
    background-color: rgba(0, 0, 0, 0);
    background-color: #f8fafc;
    color: #1f2937
}

.Soft2:hover {
    background-color: #1f2937;
    color: #fff
}

.Soft3 {
    background-color: rgba(0, 0, 0, 0);
    background-color: #ccfbf1;
    color: #115e59
}

.Soft3:hover {
    background-color: #115e59;
    color: #fff
}

.Soft4 {
    background-color: rgba(0, 0, 0, 0);
    background-color: #dbeafe;
    color: #1e40af
}

.Soft4:hover {
    background-color: #1e40af;
    color: #fff
}

.Soft5 {
    background-color: rgba(0, 0, 0, 0);
    background-color: #fee2e2;
    color: #991b1b
}

.Soft5:hover {
    background-color: #991b1b;
    color: #fff
}

.Soft6 {
    background-color: rgba(0, 0, 0, 0);
    background-color: #fef9c3;
    color: #854d0e
}

.Soft6:hover {
    background-color: #854d0e;
    color: #fff
}

.Solid {
    background-color: rgba(0, 0, 0, 0);
    background-color: #1f2937;
    color: #fff
}

.Solid:hover {
    background-color: #1f2937;
    color: #fff
}

.Solid1 {
    background-color: rgba(0, 0, 0, 0);
    background-color: #1f2937;
    color: #fff
}

.Solid1:hover {
    background-color: #1f2937;
    color: #fff
}

.Solid2 {
    background-color: rgba(0, 0, 0, 0);
    background-color: #6b7280;
    color: #fff
}

.Solid2:hover {
    background-color: #1f2937;
    color: #fff
}

.Solid3 {
    background-color: rgba(0, 0, 0, 0);
    background-color: #14b8a6;
    color: #fff
}

.Solid3:hover {
    background-color: #1f2937;
    color: #fff
}

.Solid4 {
    background-color: rgba(0, 0, 0, 0);
    background-color: #2563eb;
    color: #fff
}

.Solid4:hover {
    background-color: #1f2937;
    color: #fff
}

.Solid5 {
    background-color: rgba(0, 0, 0, 0);
    background-color: #ef4444;
    color: #fff
}

.Solid5:hover {
    background-color: #1f2937;
    color: #fff
}

.Solid6 {
    background-color: rgba(0, 0, 0, 0);
    background-color: #eab308;
    color: #fff
}

.Solid6:hover {
    background-color: #1f2937;
    color: #fff
}

.Solid7 {
    background-color: rgba(0, 0, 0, 0);
    background-color: #fff;
    color: #1f2937
}

.Solid7:hover {
    background-color: #1f2937;
    color: #fff
}


/** start custom */
body {
    font-size: 13px;
}


body,
.wrapper .table-overview table tr td,
.flatpickr-day,
.flatpickr-time input,
.flatpickr-months .flatpickr-month,
.tabFrom .groupFrom input,
.card {
    color: #404c5e;
}

.dropdown-item {
    font-size: 13px;
}

.btn {
    font-size: 13px;
}

.form-control {
    font-size: 13px;
    border-radius: 4px;
    padding: .415rem .75rem;
    background-color: #f7f7f7ad;
    border: 1px solid #e6e6e6;
}

.tabFrom .groupFrom input,
.tabFrom .groupFrom select,
.tabFrom .groupFrom textarea {
    border-radius: 3px;
    color: #404c5e
}

.card {
    box-shadow: none;
    border: none;
    border-radius: 5px !important;
    padding: 15px 17px !important;
    color: #404c5e;
}

.card.mini {
    border-radius: 5px !important;
    padding: 8px 10px !important;
}

.card.radius-less {
    border-radius: 0 !important;
}

.p-0 {
    padding: 0 !important;
}

.wrapper .salesOverview .salesOverviewRight .salesOverviewItem {
    margin-top: 15px;
    padding-left: 0;
    padding-right: 0;
}

.wrapper .table-overview table tr td {
    color: #404c5e;
    border-color: #f0f0f0;
    vertical-align: middle;
}

.avatar {
    width: 30px;
}

/**.language-picker{
    height: 30px;
    width: 30px;
}*/

.language-flag {
    width: 40px;
    height: 30px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #f4f4f4
}

.form-select {
    padding: .375rem 2.25rem .375rem .75rem;
    border-radius: 4px;
    border: 1px solid #e6e6e6;
}

.table-filter .form-control-sm {
    padding: .375rem 2.25rem .375rem .75rem;
}

.status-badge {
    border-radius: 5px;
    border: solid 1px rgba(0, 182, 155, .2);
    padding: 6px 17px;
    color: #00b69b;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 93px;
    max-width: 100%;
    white-space: nowrap;
    background-color: rgba(0, 182, 155, .05);
}

.status-badge.danger {
    color: #ef3826;
    background: #ef38260f;
    border: solid 1px rgba(239, 56, 38, .2);
}

.status-badge.primary {
    color: #55a6d7;
    background: #55a6d70f;
    border: solid 1px rgba(83, 170, 249, .2);
}

.status-badge.success {
    background: #00b69b0f;
    color: #00b69b;
}

.status-badge.warning {
    background: #d69c000f;
    border: solid 1px rgba(237, 175, 2, 0.2);
    color: #d69c00;
}

.status-badge.secondary {
    background: #8c8c8c0f;
    border: solid 1px #8c8c8c2e;
    color: #505352;
}

.status-badge.info {
    background: #3e5aae0f;
    border: solid 1px #3e5aae2e;
    color: #3e5aae;
}

.status-badge.dark {
    background: #aaa;
    border: solid 1px #b0b0b0;
    color: #fff;
}

.status-badge.suspended {
    background: #fff;
    border: solid 1px #d7d7d7;
    color: #9d9d9d;
}


.table.dataTable {
    margin-top: 0 !important;
}

div.dataTables_scrollBody {
    border-left: 0 !important;
}

.pagination {
    gap: .25rem !important;
}

.page-item.active {
    border-radius: 6px;
    background: #e5e7eb;
}

div.dataTables_wrapper div.dataTables_info {
    padding-top: .95em;
    color: #6b7280;
}

div.dataTables_wrapper div.dataTables_paginate {
    padding-top: .55em;
}

.wrapper .table-overview .pagination .page-item a {
    font-size: 14px
}

div.dataTables_wrapper div.dt-row {
    margin-bottom: 10px;
}


.dataTable th {
    white-space: nowrap;
}

.dataTable .form-check-input:first-child {
    border: var(--bs-border-width) solid #abacac !important;
    width: 17px;
    height: 17px;
}

.dataTable .form-check-input:first-child:checked {
    border-color: var(--primary) !important;

}

.dataTable .form-check-input.select-all:checked {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.dataTable a.main-link, .table .main-link {
    color: var(--primary) !important;
    text-decoration-color: var(--primary) !important
}


.flatpickr-months {
    margin-top: 8px
}

.flatpickr-calendar {
    font-size: 13px;
}

.flatpickr-current-month {
    font-size: 13px;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {

    top: -5px;

}

.flatpickr-current-month .flatpickr-monthDropdown-months option {
    font-size: 13px;
}

.modal-header {
    padding: 15px 30px 15px 30px;

}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    width: 10px;
    height: 10px;
}


.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    top: 0;
}

.wrapper .table-overview table thead tr,
.modal-header, .modal-footer {
    background: #f1f4f9;
    border: 0;
}

.modal-header .modal-title {
    font-size: 13px;
    font-weight: 500;
}

.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title {
    font-size: 13px;
    font-weight: bold;
    color: #404c5e;
}

.fs-sm {
    font-size: 12px !important;
}

.fs-xs {
    font-size: 10px !important;
}

.fs-xxs {
    font-size: 8px !important;
}

.select2-container {
    z-index: 2001;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 33px;
    background-color: #f7f7f7ad;
}

.select2-container--default .select2-selection--multiple {
    background-color: #f7f7f7ad;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    top: 65%;
}

.select2-container--default .select2-selection--single {
    height: 35px;
    border: 1px solid #dfeaf2;
}

.select2-container .select2-choice, .select2-result-label {
    font-size: 14px;
    height: 41px;
    overflow: auto;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #dfeaf2;
}

.select2-dropdown {
    border: 1px solid #dfeaf2;
}


.CharleneReed .itemLink ul li a {

    font-size: 13px;
    border-radius: 3px;
    padding: 5px 10px;
}

.jconfirm .jconfirm-box .jconfirm-buttons button {
    font-size: 12px;
}

.jconfirm .jconfirm-box .btn-primary {
    background-color: var(--primary) !important;
}

.jconfirm .jconfirm-box .jconfirm-buttons button .spinner-border {
    width: 0.8rem;
    height: 0.8rem
}

.pointer:hover {
    cursor: pointer;
}

.chromeless {
    border: 0;
    margin-top: 0;
}

.chromeless .dataTables_length, .chromeless .dataTables_filter {
    margin-bottom: 10px;
}

.chromeless .table-responsive {
    border-radius: 0;
    padding-top: 0;
    padding-left: 12px;
    padding-right: 12px;
    box-shadow: none;
}

.groupFrom .row > * {
    margin-bottom: 30px
}

.cSwitch label::after {
    width: 15px;
    height: 14px;
}

.cSwitch label {
    background-color: #b7b8b9;
    width: 42px;
    height: 18px;
}

.cSwitch input:checked + label {
    background-color: var(--primary);
}

.table > :not(caption) > * > * {
    color: #404c5e;
    background-color: white;
    border-color: #f4f4f4;
}

.wrapper .ordersOverviewTable table tr td {
    border-color: #e8e8e880;
}

.list-item {
    border-bottom: solid 1px #f2f2f2;
}

.ql-container {
    font-size: 13px
}

.text-x-light {
    color: #ccc;
}

.card.hover:hover {
    border: solid 1px #ccc;
}


.CharleneReedWrapp .avatar-upload .avatar-preview.contain > div {
    background-size: contain !important;
}

.jq-toast-wrap {
    width: 300px;
    z-index: 10000 !important;
}

.header-avatar {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #e8e8e8;
}

.modal {
    z-index: 10000;
}

.modal-dialog {
    top: 30px;
}


.header-bar {
    height: 63px;
}

.header-bar .media-body {
    max-height: 30px;
}

.header-bar .dropdown-menu {
    box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
}

.wrapper header .rightHeader .dropdown.dpd3 button .media .media-body .userTitle {
    line-height: 1;
}

.rightHeader .dropdown-menu a, .rightHeader .dropdown-menu {
    padding: 0;
    color: #404c5e;
    width: 250px;
}

.rightHeader .dropdown-menu li {
    padding: 5px 10px
}


.rightHeader .dropdown-menu .language-flag {
    width: 30px;
}

.table-option-icon {
    margin-left: 5px
}

.table-option-icon:hover, .grey-icon-anchor {
    fill: var(--primary);
}

.select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default .select2-selection--multiple {
    border: solid #dfeaf2 1px;
}

.text-primary {
    color: var(--primary) !important
}


.feature-icon-small {
    width: 45px;
    height: 45px;
}

.table-responsive td {
    white-space: nowrap;
}

.developers-description {
    width: 60%;
    max-width: 600px
}

input,
button,
select,
optgroup,
textarea {
    font-size: 13px;
}

.text-lime {
    color: #690;
}

.btn-check:checked + .btn.recipient-separator-container svg {
    fill: #fff;
}


.btn-outline-secondary {
    --bs-btn-border-color: #dfeaf2;
}

.recipient-separator-container {
    width: 20%
}

.max-column-width {
    width: 200px !important;
}

div.dataTables_processing.card {
    padding: 2px !important;
}

.card-header {
    background-color: #eaeaea;
}


.jconfirm .jconfirm-box .jconfirm-buttons button.btn-default {
    color: #404c5e;

}

.jconfirm.jconfirm-material .jconfirm-box div.jconfirm-content {
    color: #404c5e;
}

.CharleneReedWrapp.sectioned {
    padding: 0 !important;
    margin: 0
}

.cSwitch {
    height: 18px
}

.form-select {
    font-size: 13px;
    background-color: #f7f7f7ad;
}


.btn-custom {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    padding: .375rem .75rem .375rem .75rem;
    transition: all ease-in-out .6s;
    gap: 5px;
}

.btn-regular {
    background-color: white;
    color: #404c5e;
    border: solid 1px #c8c8c8;
    padding: .375rem .75rem .375rem .75rem;
}

.btn-regular:hover {
    background-color: #f4f4f4;
    color: #404c5e;
}

a.card-hover {
    color: #404c5e !important;
    border: solid 1px transparent;
}

a.card-hover:hover {
    border: solid 1px var(--primary);
    transition: border 1s;
}

table a {
    text-decoration: underline !important;

}

div.dataTables_processing div {
    display: none;
}

.jq-toast-single {
    font-family: "Inter", sans-serif;
}


.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #e1e1e1;
    color: #404c5e;
}

.ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button:focus .ql-stroke, .ql-snow .ql-toolbar button:focus .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke, .ql-snow .ql-toolbar button.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow.ql-toolbar button:hover .ql-stroke-miter, .ql-snow .ql-toolbar button:hover .ql-stroke-miter, .ql-snow.ql-toolbar button:focus .ql-stroke-miter, .ql-snow .ql-toolbar button:focus .ql-stroke-miter, .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
    stroke: #404c5e;

}

.ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow .ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button:focus .ql-fill, .ql-snow .ql-toolbar button:focus .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-fill, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
    fill: #404c5e;
}

.ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover, .ql-snow.ql-toolbar button:focus, .ql-snow .ql-toolbar button:focus, .ql-snow.ql-toolbar button.ql-active, .ql-snow .ql-toolbar button.ql-active, .ql-snow.ql-toolbar .ql-picker-label:hover, .ql-snow .ql-toolbar .ql-picker-label:hover, .ql-snow.ql-toolbar .ql-picker-label.ql-active, .ql-snow .ql-toolbar .ql-picker-label.ql-active, .ql-snow.ql-toolbar .ql-picker-item:hover, .ql-snow .ql-toolbar .ql-picker-item:hover, .ql-snow.ql-toolbar .ql-picker-item.ql-selected, .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
    color: #404c5e;
}

.spinner-border-sm-2 {
    --bs-spinner-width: 1.25rem;
    --bs-spinner-height: 1.25rem;
    --bs-spinner-border-width: 0.25em;
}

.box-color {
    background-color: var(--box-bg)
}

.dashboard-stat svg {
    fill: var(--primary);
}

.popover,
.popover-header,
.arrow,
.arrow::before {
    background: #1e293b;
    color: white;
    font-size: 12px;
}

.popover {
    --bs-popover-border-color: #fff0;
}

.popover[data-bs-popper-placement^='top'] > .arrow {
    bottom: -12px;
    background: #1e293b;
}


.bs-popover-top > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before {
    bottom: 0;
    border-top-color: #1e293b;
}

.popover .popover-arrow::before,
.popover .popover-arrow::after {
    position: unset;

}


.popover-body {
    color: white;
    font-size: 12px;
    text-align: center;
}

.settings-card {
    min-height: 120px;
}

.dashboard-table {
    min-width: 100%;
}

.dashboard-table div.message {
    width: 80%;
    min-width: 200px;
    max-width: 600px !important;

}


.dashboard-quick-btn {
    background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
}

.dashboard-quick-btn:hover {
    background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
    border-color: var(--btn-primary-border);
}

table.dataTable > tbody > tr.child ul.dtr-details > li {
    padding: .9em 0;
}


.add-contact-btn.dropdown-toggle::after {
    display: none;
}


.bd-callout {
    padding: 1.25rem;
    color: var(--bd-callout-color, inherit);
    background-color: var(--bd-callout-bg, var(--bs-gray-100));
    border-left: 0.25rem solid var(--bd-callout-border, var(--bs-gray-300));
}


.bd-callout-info {
    --bd-callout-color: var(--bs-info-text-emphasis);
    --bd-callout-bg: var(--bs-info-bg-subtle);
    --bd-callout-border: var(--bs-info-border-subtle);
}

.bd-callout-warning {
    --bd-callout-color: #5d6005;
    --bd-callout-bg: #fcf9cf;
    --bd-callout-border: #f9f89e;
}

.btn.dropdown-toggle::after {
    display: none;
}

.bg-secondary-faint {
    background-color: #e2e3e563 !important;
}

.help-summary div.collapse[aria-expanded="false"] {
    display: block;
    height: 39px !important;
    overflow: hidden;
}

.help-summary div.collapsing[aria-expanded="false"] {
    height: 39px !important;
}

.help-summary div.collapse.show[aria-expanded="false"] {
    height: auto !important;
    overflow: visible;
}

.help-summary a.collapsed:after {
    content: '+ Show More';
}

.help-summary a:not(.collapsed):after {
    content: '- Show Less';
}


.tooltip-trigger svg {
    fill: #ccc;

}

.tooltip-inner {
    max-width: 350px;
    width: 350px;
    padding: 10px;
    font-size: 13px;
    --bs-tooltip-bg: #1e293b;
}

.tooltip.bs-tooltip-auto {
    z-index: 10000 !important;
}

.sample-request {
    background-color: #1e293b;
    color: white;
}

.request-header {
    background-color: #646464;
    color: white
}

.border-primary {
    border-color: var(--primary) !important;
}

.b-secondary {
    border: 1px solid var(--btn-primary-border) !important
}

.text-secondary-light {
    color: #868686;
}


.modal {
    --bs-modal-zindex: 1055;
    --bs-modal-width: 500px;
    --bs-modal-padding: 1rem;
    --bs-modal-margin: 0.5rem;
    --bs-modal-color: ;
    --bs-modal-bg: var(--bs-body-bg);
    --bs-modal-border-color: var(--bs-border-color-translucent);
    --bs-modal-border-width: var(--bs-border-width);
    --bs-modal-border-radius: var(--bs-border-radius-lg);
    --bs-modal-box-shadow: var(--bs-box-shadow-sm);
    --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));
    --bs-modal-header-padding-x: 1rem;
    --bs-modal-header-padding-y: 1rem;
    --bs-modal-header-padding: 1rem 1rem;
    --bs-modal-header-border-color: var(--bs-border-color);
    --bs-modal-header-border-width: var(--bs-border-width);
    --bs-modal-title-line-height: 1.5;
    --bs-modal-footer-gap: 0.5rem;
    --bs-modal-footer-bg: ;
    --bs-modal-footer-border-color: var(--bs-border-color);
    --bs-modal-footer-border-width: var(--bs-border-width);
}

.custom-table-options .form-control, .custom-table-options .form-select {
    background-color: white;
}


.input-group-text {
    font-size: 13px;
    padding: 0 .75rem;
    color: #404c5e;
    border-radius: 4px;
}

.form-control:focus {
    border-color: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.modal-dialog-scrollable {
    height: calc(70% - var(--bs-modal-margin) * 2);
}

.list-group-item {
    color: #404c5e;
}

.conversation-badge-counter {
    position: absolute;
    right: 20px;
    background-color: var(--primary) !important;
}


.breakpoint-message.message-container {
    min-width: 300px;
    max-width: 500px;
    width: 100%;
}

.conversations-right-item {
    width: 100% !important;
    margin-left: 0 !important;
}


.hover-underline:hover {
    text-decoration: underline;
}

.mh-auto {
    min-height: auto;
}

.vote-reports .apexcharts-canvas {
    margin: 0 auto;
}

svg.primary {
    fill: var(--primary);
}

svg .fill-primary {
    fill: var(--primary);
}

svg .fill-primary-light {
    fill: var(--primary-light);
}

.help-summary svg {
    max-width: 170px;
}

.single-changelog .log-type {
    width: 100px;
    min-width: 100px;
}

.knowledgebase-popup-trigger {
    max-width: 400px;
    line-height: 2.2;
    color: #a5a5a5;
}

.knowledgebase-popup-trigger:hover {
    background: #efefef !important;
    outline: none;
    color: #808080 !important;
    cursor: pointer;
}

.knowledgebase-search {
    line-height: 2.2;
    color: #a5a5a5;
}

.modal-dialog-scroll {
    height: calc(90% - var(--bs-modal-margin) * 2);
    min-height: calc(90% - var(--bs-modal-margin) * 2);
    overflow: hidden !important;
}

.knowledgebase-modal .knowledgebase-control-panel {
    overflow-y: auto;
    max-height: 85vh;
    height: 85vh;
}

.knowledgebase-modal .help-content {
    overflow-y: auto;
    max-height: 88vh;
}

.knowledgebase-article {
    height: 85vh
}

.knowledgebase-article-title, .help-center-title {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
    padding: 1.5rem !important;
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.knowledgebase-article-content{
    padding: 1.5rem !important;
}


@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

.spinner::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 30%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-top: -12px;
    margin-left: -12px;
    border-radius: 50%;
    border: 5px solid #ccc;
    border-top-color: var(--primary);
    animation: spinner 600ms linear infinite;
}

.spinner {
    position: relative;
}

.knowledgebase-article.spinner::before {
    top: 43%;
}

.invoice-item-row td {
    border-color: #f4f4f4 !important;
}

.otp-container {
    width: 200px;
    border-style: dashed !important
}

.w-150{
    width:150px !important
}

.mw-220{
    max-width: 220px !important;
}

.mw-150{
    max-width: 150px !important;
}

.mw-300{
    max-width: 300px !important;
}


.knowledgebase-chat-container {
    background: #f7f8fa;
    padding: 15px;
    border-radius: 15px;
}
.knowledgebase-message-row {
    display: flex;
    margin: 10px 0;
}

.knowledgebase-sent-row {
    justify-content: flex-start;
}

.knowledgebase-response-row {
    justify-content: flex-end;
}
.knowledgebase-bubble {
    padding: 10px 15px;
    border-radius: 20px;
    max-width: 70%;
    position: relative;
}
.knowledgebase-sms-bubble {
    background-color: #e0f7fa;
    border-bottom-left-radius: 0;
}
.knowledgebase-response-bubble {
    background-color: var(--primary);
    border-bottom-right-radius: 0;
    color: #ffffff;
}

.knowledgebase-article-content-section{
    margin-bottom: 50px;
}

.modal-backdrop {
    z-index: 4000;
}

.kb-message-icon{
    min-width: 40px;
}

.kb-whatsapp-icon .cls-1 {
    fill: url(#linear-gradient);
}

.kb-whatsapp-icon .cls-2 {
    fill: #fff;
}

.danger-hover:hover {
    color: var(--bs-danger);
}