@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

/* Custom Reset */
body {
     font-family: "Inter", serif;
}

.wrapper {
     overflow: hidden;
}

a.active,
a:focus,
button:focus,
button.active {
     outline: none;
     font-size-adjust: none;
}

a {
     text-decoration: none;
}

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

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

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

a {
     text-decoration: none;
     transition: all 0.5s ease-in-out;
}

a:hover {
     text-decoration: none;
}

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

ul li {
     list-style: none;
}

p {
     margin: 0;
     padding: 0;
}

input:focus,
select:focus,
textarea:focus {
     outline: none;
     font-size-adjust: none;
}

img {
     border-style: none;
     display: inline-block;
     max-width: 100%;
     height: auto;
}

* {
     box-sizing: border-box;
}

/*  */
.dashboard-wrapper {
     display: flex;
}

.sidebar {
     max-width: 312px;
     width: 100%;
     background: #fff;
     border-right: 1px solid #e4e7ec;
     padding: 32px 16px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     width: 100%;
     height: 100vh;
     overflow-y: scroll;
     position: fixed;
     left: 0;
     top: 0;
}

.nav-list {
     margin-top: 32px;
}

.nav-list li {
     margin-bottom: 4px;
}

.nav-list .nav-link:hover,
.nav-list .nav-link.active {
     background: #f9fafb;
}

.nav-list .nav-link {
     color: #475467;
     font-size: 16px;
     font-weight: 600;
     border-radius: 6px;
     line-height: 24px;
     display: flex;
     align-items: center;
     grid-gap: 12px;
     width: 100%;
     padding: 8px 12px;
}

.user-img {
     border-radius: 200px;
     width: 40px;
     height: 40px;
}

.sidebar-footer {
     display: flex;
     align-items: start;
     justify-content: space-between;
     padding: 24px 0px 0px;
     margin-top: 24px;
     border-top: 1px solid #e4e7ec;
}

.left-bar {
     display: flex;
     align-items: center;
     grid-gap: 12px;
}

.left-bar h6 {
     color: #101828;
     font-size: 14px;
     font-weight: 600;
     line-height: 20px;
}

.left-bar span {
     color: #475467;
     font-size: 14px;
     font-weight: 400;
     line-height: 20px;
}

.sidebar::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
textarea::-webkit-scrollbar {
     display: none;
}

.sidebar,
.modal-body {
     -ms-overflow-style: none;
     scrollbar-width: none;
}

.top-header {
     display: flex;
     justify-content: space-between;
}

.header-left-side h2 {
     color: #101828;
     font-size: 30px;
     font-weight: 600;
     line-height: 38px;
     margin-bottom: 4px;
}

.header-left-side p {
     color: #475467;
     font-size: 16px;
     font-weight: 400;
     line-height: 24px;
}

.right-content {
     width: calc(100% - 311px);
     margin-left: auto;
     padding: 32px;
}

.form-group {
     position: relative;
}

.header-right-side input {
     border-radius: 8px !important;
     border: 1px solid #e4e7ec;
     background: #fff !important;
     padding: 10px 14px;
     min-width: 260px;
     width: fit-content;
     padding-left: 40px;
     color: #101828;
     font-size: 14px;
     font-weight: 600;
     line-height: 20px;
}

.header-right-side input::placeholder {
     color: #101828;
}

.header-right-side .image-holder {
     position: absolute;
     top: 44%;
     transform: translate(0, -50%);
     left: 14px;
}

.metric-card-wrapper {
     display: grid;
     grid-template-columns: 3fr 3fr 3fr 3fr;
     grid-gap: 18px;
     margin: 32px 0px 22px;
}

.metric-card {
     border-radius: 8px;
     border: 1px solid #e4e7ec;
     background: #fff;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
     padding: 24px;
}

.metric-card span {
     color: #101828;
     font-size: 16px;
     font-weight: 600;
     line-height: 24px;
}

.metric-card h4 {
     color: #101828;
     font-size: 36px;
     font-weight: 600;
     line-height: 44px;
     letter-spacing: -0.72px;
     margin: 16px 0px;
}

.metric-card .text-wrapper {
     display: flex;
     align-items: center;
     grid-gap: 4px;
}

.text-wrapper p {
     color: #475467;
     font-size: 14px;
     font-weight: 500;
     line-height: 20px;
}

.text-wrapper p span {
     color: #027a48;
     display: inline-block;
     /* margin-right: 12px; */
}

.text-wrapper p span.green {
     color: #027A48;
}

.text-wrapper p span.red {
     color: #dc3545;
}

.chart__container {
     width: 100%;
     display: inline-block;
     height: 400px;
}

.chart-box {
     display: flex;
     align-items: center;
     justify-content: end;
     grid-gap: 8px;
     margin: 24px 0px 16px;
}

.chart-box h6 {
     color: #475467;
     font-size: 14px;
     font-weight: 400;
     line-height: 20px;
}

.chart-box span {
     width: 8px;
     background-color: #4880ff;
     border-radius: 50%;
     height: 8px;
}

.btn-secondary {
     color: #fff;
     font-size: 14px;
     font-weight: 600;
     line-height: 20px;
     border-radius: 8px;
     border: 1px solid #0f8fa0;
     background: #0f8fa0;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
     padding: 9px 16px;
}

.header-right-side .form {
     display: flex;
     align-items: center;
     grid-gap: 12px;
}

/* account-page */
.account-box {
     border-radius: 12px;
     border: 1px solid #e4e7ec;
     background: #fff;
     margin-top: 28px;
     /* box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06); */
}

.account-box h4 {
     color: #101828;
     font-size: 18px;
     font-weight: 500;
     line-height: 28px;
}

.account-box-heading {
     padding: 20px 24px;
     display: flex;
     align-items: center;
     justify-content: space-between;
}

.table> :not(caption)>*>* {
     padding: 0px;
     background-color: transparent;
     border-bottom-width: 0px;
     box-shadow: none;
}

.account-box .table thead tr th img {
     height: 16px;
     filter: brightness(0);
     vertical-align: top;
}

.account-box .table thead tr th {
     color: #475467;
     font-size: 12px;
     font-weight: 500;
     line-height: 18px;
     padding: 13px 24px;
     border-bottom: 1px solid #e4e7ec;
     background: #f9fafb;
     cursor: pointer;
     vertical-align: top;
}

.account-box .table tfoot tr td {
     color: #475467;
     font-size: 14px;
     font-weight: 500;
     line-height: 18px;
     padding: 13px 24px;
     border-top: 1px solid #e4e7ec;
     background: #f9fafb;
     cursor: pointer;
     vertical-align: top;
}

.account-box .table {
     margin-bottom: 0px;
}

.table> :not(:last-child)> :last-child>* {
     border-bottom-color: #e4e7ec;
}

.heading-row {
     display: flex;
     align-items: center;
     grid-gap: 4px;
}

.account-box .table tbody tr td {
     color: #475467;
     font-size: 14px;
     font-weight: 400;
     line-height: 20px;
     padding: 6px 24px;
     vertical-align: top;
     border-bottom: 1px solid #e4e7ec;
}

.west-audi-box .table tbody tr td {
     height: 52px;
}

.action-btn {
     display: flex;
     align-items: center;
     grid-gap: 4px;
}

.active-tag {
     color: #027a48;
     font-size: 12px;
     font-weight: 500;
     border-radius: 16px;
     background: #ecfdf3;
     line-height: 18px;
     padding: 2px 8px;
     max-width: fit-content;
}

.bg-gray {
     background: #f9fafb;
}

.inactive-tag {
     color: #344054;
     font-size: 12px;
     font-weight: 500;
     border-radius: 16px;
     background: #e9edf5;
     line-height: 18px;
     padding: 2px 8px;
     max-width: fit-content;
}

.account-box .pagination {
     justify-content: space-between;
     align-items: center;
     padding: 14px 24px 18px;
}

.account-box .pagination .page-item {
     display: flex;
     align-items: center;
     grid-gap: 2px;
}

.account-box .pagination .page-link {
     color: #667085;
     font-size: 14px;
     font-weight: 500;
     line-height: 20px;
     border-radius: 8px;
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: none;
}

.account-box .pagination .page-link.active {
     background: #ebf4f5;
}

.page-btns {
     border-radius: 8px;
     border: 1px solid #d0d5dd;
     background: #fff;
     padding: 8px 14px;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
     color: #344054;
     font-size: 14px;
     font-weight: 600;
     line-height: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     grid-gap: 8px;
}

.account-box .pagination button:disabled {
     opacity: 0.4;
}

.breacrumbs {
     display: flex;
     align-items: center;
     grid-gap: 4px;
     margin-bottom: 24px;
}

.breacrumbs li a,
.breacrumbs li span {
     color: #475467;
     font-size: 14px;
     font-weight: 600;
     line-height: 20px;
     display: flex;
     align-items: center;
     grid-gap: 4px;
}

.breacrumbs li span {
     font-weight: normal;
}

.btn-activity {
     color: #ff4b4b;
     font-size: 14px;
     font-weight: 600;
     line-height: 20px;
     border-radius: 8px;
     background: #faf4f4;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
     padding: 10px 16px;
}

.account-page .metric-card-wrapper {
     grid-template-columns: 6fr 6fr;
}

.account-page .metric-card h4 {
     margin: 24px 0px 16px;
}

.btn-add {
     color: #0f8fa0;
     font-size: 14px;
     font-weight: 600;
     width: fit-content;
     line-height: 20px;
     border-radius: 8px;
     background: #f4f7fa;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
     padding: 10px 16px;
     display: flex;
     align-items: center;
     grid-gap: 8px;
}

.paused-tag {
     color: #344054;
     font-size: 12px;
     font-weight: 500;
     line-height: 18px;
     border-radius: 16px;
     background: #e9edf5;
     padding: 2px 8px;
     max-width: fit-content;
}

.account-page .account-box .table tbody tr:last-child td:first-child {
     border-bottom-left-radius: 12px;
}

.account-page .account-box .table tbody tr:last-child td:last-child {
     border-bottom-right-radius: 12px;
}

.account-page .account-box .table tbody tr:last-child td {
     border: none;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
     background: #0f8fa0;
     border-color: #0f8fa0;
}

.form-control:focus {
     box-shadow: none;
     border-color: #e4e7ec;
}

.hidden {
     display: none;
}

.cross-icon,
.hamburger {
     display: none;
}

.btn-secondary:hover {
     background-color: #6941c6;
}

.btn-activity:hover {
     background-color: #ff4b4b;
}

.btn-activity:hover {
     background-color: #f4ebff;
     color: #ff4b4b;
}

.btn-secondary:focus {
     background-color: #7f56d9;
     box-shadow: none !important;
}

.feed-table .table thead th:last-child {
     width: 177px;
}

/* login-page-css */
.login-wrapper {
     display: flex;
}

.login-left {
     width: 50%;
}

.login-left h2 {
     color: #000;
     font-size: 33px;
     font-weight: 400;
     line-height: 24px;
     margin: 75px 0px 0px;
}

.login-left form .form-group {
     margin-top: 36px;
}

.form-wrapper label {
     color: #101828;
     font-size: 14px;
     font-weight: 500;
     line-height: 20px;
     margin-bottom: 8px;
}

.form-wrapper .form-control {
     color: #353b41;
     font-size: 16px;
     font-weight: 400;
     line-height: 24px;
     border-radius: 8px;
     border: 1px solid #e0e0e0;
     background-color: #fff;
     padding: 0px 16px;
     height: 48px;
}

.form-wrapper .form-control::placeholder {
     color: #a8b5c2;
}

.btn-link {
     color: #000;
     font-size: 14px;
     font-weight: 600;
     line-height: 20px;
     text-decoration: none;
     display: block;
     display: flex;
     align-items: center;
}

.small-spacer {
     margin: 16px 0px 32px;
}

.login-left p {
     color: #475467;
     font-size: 14px;
     font-weight: 400;
     line-height: 20px;
     text-align: center;
     margin-top: 24px;
}

.login-left p a {
     color: #0f8fa0;
     text-decoration-line: underline;
     text-decoration: none;
}

.login-left-inner {
     max-width: 453px;
     margin: auto;
     height: 100vh;
     overflow-y: scroll;
     display: flex;
     flex-direction: column;
     justify-content: center;
     width: 100%;
}

.login-left-inner .btn-secondary {
     font-size: 18px;
     width: 100%;
     height: 44px;
     padding: 10px 0px;
}

.login-left-inner::-webkit-scrollbar {
     display: none;
}

.login-left-inner {
     -ms-overflow-style: none;
     scrollbar-width: none;
}

.logo {
     max-width: 138px;
}

.login-right {
     background: #1c2b5a;
     width: 50%;
     height: 100vh;
     position: relative;
     z-index: 1;
}

.login-text-box {
     max-width: 475px;
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     height: 100%;
     justify-content: center;
}

.login-text-box h2 {
     color: #fff;
     font-size: 64px;
     font-weight: 900;
     line-height: normal;
     margin-bottom: 60px;
}

.login-text-box p {
     color: #fff;
     font-size: 24px;
     font-weight: 400;
     line-height: 143%;
}

.login-right span {
     color: #fff;
     font-size: 20px;
     font-weight: 300;
     line-height: normal;
     max-width: 434px;
     margin: 0 auto;
     position: absolute;
     bottom: 26px;
}

.login-right .img-holder {
     position: absolute;
     top: 0;
     right: 0;
     text-align: center;
     margin: 0 auto;
     z-index: -1;
}

.circle-img {
     position: absolute;
     top: 96px;
     right: 0px;
}

.modal-header .btn-close {
     background-image: none;
     padding: 0;
     margin: 0;
     width: 24px;
     height: 24px;
}

.modal-header h5 {
     color: #000;
     font-size: 22px;
     font-weight: 700;
     line-height: 30px;
}

.modal-header {
     padding: 32px 32px 24px;
}

.acoount-modal .modal-lg {
     max-width: 666px;
}

.modal-body h5 {
     color: #000;
     font-size: 18px;
     font-weight: 600;
     font-family: "Open Sans", sans-serif;
     line-height: 22px;
     margin-bottom: 22px;
}

.modal-body {
     padding: 0;
     height: calc(100vh - 274px);
     overflow-y: scroll;
}

.rooftop-box {
     padding: 24px 32px 11px;
     border-bottom: 1px solid #e6e6e6;
}

.modal-body .form-group {
     margin-bottom: 32px;
}

.modal-footer {
     border: none;
     padding: 12px 32px;
     grid-gap: 8px;
     border-top: 1px solid #e6e6e6;
}

.btn-cancel {
     color: #344054;
     font-size: 14px;
     font-weight: 600;
     line-height: 20px;
     border-radius: 8px;
     border: 1px solid #d0d5dd;
     background: #fff;
     padding: 10px 16px;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.btn-cancel:hover {
     background: #f9fafb;
}

.modal-content {
     border-radius: 12px;
     background: #fff;
     box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
}

#exampleModal2 .modal-body {
     padding: 24px;
}

.modal-body p {
     color: #000;
     font-size: 16px;
     font-weight: 400;
     line-height: 20px;
     flex: 1;
}

.roadmap {
     margin-top: 20px;
     position: relative;
}

.roadmap::after {
     content: "";
     background-color: #d1d5d9;
     width: 1px;
     height: calc(100% - 70px);
     position: absolute;
     left: 10px;
     top: 26px;
}

#exampleModal2 .modal-body h5 {
     margin-bottom: 15px;
}

.font-light {
     font-weight: 300 !important;
}

.roadmap li {
     display: flex;
     grid-gap: 24px;
     margin-bottom: 28px;
}

.roadmap li:last-child {
     margin-bottom: 0px;
}

.roadmap li span {
     border: 1px solid #d1d5d9;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     position: relative;
}

.roadmap li span::after {
     content: "";
     background-color: #d1d5d9;
     width: 10px;
     height: 10px;
     border-radius: 50%;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
}

.btns-list {
     display: flex;
     align-items: center;
     width: 100%;
     grid-gap: 16px;
     margin-top: 36px;
}

#exampleModal2 .modal-dialog {
     max-width: 366px;
}

.btns-list li {
     width: 50%;
}

.btns-list li button {
     width: 100%;
}

.modal h4 {
     color: #000;
     font-size: 22px;
     font-weight: 700;
     line-height: 30px;
     margin-bottom: 24px;
}

.text-gray {
     color: #475467 !important;
}

.modal-footer>* {
     margin: 0px;
}

.deactivate-modal .rooftop-box {
     padding: 32px 32px 56px;
}

.btn-danger {
     color: #fff;
     font-size: 14px;
     font-weight: 600;
     line-height: 20px;
     border-radius: 8px;
     background: #be123c;
     padding: 10px 16px;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.input-group span {
     border-radius: 8px 0px 0px 8px;
     padding: 10px 12px;
     color: #353b41;
     font-size: 16px;
     font-weight: 400;
     line-height: 24px;
     border: 1px solid #d0d5dd;
}

.rooftop-box textarea {
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
     padding: 10px 14px !important;
     height: 128px !important;
}

.acoount-modal .campain-modal .modal-lg {
     max-width: 1083px;
}

.acoount-modal .campain-modal .modal-header {
     border-bottom: none;
}

.acoount-modal .campain-modal .rooftop-box {
     padding: 0px 32px 11px;
}

.disabled {
     pointer-events: none;
     background-color: #f9fafb !important;
}

.campain-modal .modal-body .form-group {
     margin-bottom: 24px;
}

.form-check-input:checked[type="checkbox"] {
     background-image: url(../images/check.svg);
     background-color: transparent;
     border: 1px solid #0f8fa0;
     background-size: 10px;
}

.top-space {
     margin-top: 12px;
}

.form-check {
     margin-bottom: 0;
}

.slider-container {
     position: relative;
     width: 100%;
     margin: 20px auto 27px;
     display: flex;
     align-items: center;
}

/* Track line */
.slider-track {
     position: relative;
     width: 100%;
     height: 3px;
     background-color: #0f8fa0;
     border-radius: 2px;
     display: flex;
     justify-content: space-between;
     align-items: center;
}

/* Small circles on the track */
.track-markers {
     position: absolute;
     display: flex;
     justify-content: space-between;
     width: 100%;
}

.track-markers div {
     width: 12px;
     height: 12px;
     background-color: #fff;
     border: 3px solid #0f8fa0;
     border-radius: 50%;
}

.track-markers div:first-child,
.track-markers div:last-child {
     opacity: 0;
}

/* The input slider (hidden for custom styling) */
.slider {
     position: absolute;
     width: 100%;
     height: 4px;
     opacity: 0;
     z-index: 2;
     cursor: pointer;
}

/* Custom thumb (highlighted circle) */
.slider-thumb {
     position: absolute;
     top: -12px;
     width: 24px;
     height: 24px;
     border-radius: 9999px;
     border: 8px solid #0f8fa0;
     background: #fff;
     box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
     border-radius: 50%;
     pointer-events: none;
     transition: left 0.2s ease;
}

.range-slider-text {
     display: flex;
     align-items: center;
     justify-content: space-between;
}

.range-slider-text span {
     color: #101828;
     font-size: 14px;
     font-weight: 500;
     line-height: 24px;
}

.deactivate-modal .modal-body,
#feed-modal .modal-body,
#feed-modal2 .modal-body {
     height: 100%;
}

.step-list {
     display: grid;
     grid-template-columns: 3fr 3fr 3fr 3fr;
     grid-gap: 16px;
     margin: 0px 32px 32px;
}

.step-list li span {
     width: 100%;
     background-color: #e4e7ec;
     height: 4px;
     display: block;
}

.step-list li p {
     color: #a8b5c2;
     font-size: 12px;
     font-weight: 500;
     margin-top: 4px;
     line-height: 20px;
}

.step-list li.active span {
     background-color: #0f8fa0;
}

.step-list li.active p {
     color: #344054;
}

.h-full .modal-body {
     height: 100%;
     overflow-y: inherit;
}

.link {
     color: #475467 !important;
}

textarea.msg-input {
     color: #aaa;
     padding: 12px 14px !important;
     height: 90px !important;
}

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

.dropdown-btn img {
     width: 16px;
}

textarea.msg-textarea {
     height: 292px !important;
     margin-bottom: 16px;
}

.preview-img {
     margin-bottom: 16px;
}

.detail-box .table tbody tr td {
     color: #475467;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     padding: 16px 24px;
     line-height: 20px;
     border-top: 1px solid #e4e7ec;
}

.detail-box {
     border: 1px solid #e4e7ec;
     border-radius: 12px;
     margin-bottom: 32px;
}

.detail-box .table {
     margin-bottom: 0px;
}

.detail-box .table tbody tr td:first-child {
     font-weight: 600;
}

.detail-box .table tbody tr:first-child td {
     border-top: none;
}

.detail-box .table tbody tr:first-child td:first-child {
     border-top-left-radius: 12px;
}

.detail-box .table tbody tr:first-child td:last-child {
     border-top-right-radius: 12px;
}

.detail-box .table tbody tr:last-child td:first-child {
     border-bottom-left-radius: 12px;
     width: 30%;
}

.detail-box .table tbody tr:last-child td:last-child {
     border-bottom-right-radius: 12px;
}

.weat-audipage .metric-card-wrapper {
     grid-template-columns: 12fr;
}

.badge-base {
     border-radius: 16px;
     background: #fffaeb;
     padding: 2px 8px;
     color: #b54708;
     font-size: 12px;
     font-weight: 500;
     line-height: 18px;
}

.card-wrapper {
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
}

.grapgh-sec .chart__container {
     height: 240px;
}

.disable {
     pointer-events: none;
     opacity: 0.5;
}

.account-box .table tbody tr:last-child td {
     border-bottom: none;
     border-bottom-left-radius: 12px;
     border-bottom-right-radius: 12px;
}

.west-audi-box .table thead th:first-child {
     border-top-left-radius: 12px;
}

.west-audi-box .table thead th:last-child {
     border-top-right-radius: 12px;
}

.campain-page .top-header {
     margin-bottom: 28px;
}

.campain-page .metric-card h4 {
     margin: 24px 0px 16px;
}

.report-page .form-wrapper .form-group {
     margin-bottom: 18px;
}

.report-page .chart__container {
     height: 240px;
}

.account-box-heading p {
     color: #475467;
     font-size: 14px;
     font-weight: 400;
     line-height: 20px;
     margin-top: 4px;
}

.tool-page .rooftop-box {
     border-top: 1px solid #e4e7ec;
     padding: 25px 0px 20px;
}

.inputs-group {
     display: flex;
     align-items: center;
     grid-gap: 24px;
}

.inputs-group .form-control {
     max-width: 254px;
}

.inputs-group .disable {
     background: #f9fafb;
     opacity: 1;
}

.account-box-heading p a {
     text-decoration-line: underline;
     color: #475467;
     max-width: 888px;
}

.support-page .account-box-heading p {
     font-size: 18px;
     max-width: 888px;
     line-height: 30px;
}

.support-page .account-box h4 {
     font-size: 24px;
     font-weight: 600;
     line-height: 44px;
     letter-spacing: -0.48px;
     margin-bottom: 20px;
}

.support-page .account-box {
     margin-top: 68px;
}

.faq-box {
     display: grid;
     grid-template-columns: 6fr 6fr;
     grid-gap: 62px 24px;
     padding: 40px 0px 64px;
}

.faq-desciption h4 {
     color: #101828;
     font-size: 18px;
     font-weight: 600;
     line-height: 28px;
     margin-bottom: 8px;
}

.faq-desciption p {
     color: #475467;
     font-size: 16px;
     font-weight: 400;
     line-height: 24px;
}

.faq-contact {
     border-radius: 16px;
     background: #f9fafb;
     padding: 32px;
     display: flex;
     align-items: start;
     justify-content: space-between;
     grid-gap: 20px;
}

.faq-contact-description h4 {
     color: #101828;
     font-size: 20px;
     font-weight: 500;
     line-height: 30px;
     margin-bottom: 8px;
}

.faq-contact-description p {
     color: #475467;
     font-size: 18px;
     font-weight: 400;
     line-height: 28px;
}

.faq-contact .btn-secondary {
     font-size: 16px;
}

.faq-contact-description {
     flex: 1;
}

.campain-popups #exampleModal2 label {
     color: #344054;
     font-size: 14px;
     font-weight: 500;
     line-height: 20px;
}

.campain-popups #exampleModal2 .modal-dialog {
     max-width: 402px;
}

.campain-popups #exampleModal2 .form-check {
     margin-bottom: 12px;
}

.campain-popups .modal-body p {
     font-size: 14px;
}

.dropdown-content {
     display: none;
     position: absolute;
     border-radius: 8px;
     border: 1px solid #e0e0e0;
     background: #fff;
     padding: 8px;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.08), 0px 1px 4px 0px rgba(16, 24, 40, 0.04);
     width: 100%;
     z-index: 999;
     margin-top: 10px;
}

.dropdown-content li a {
     color: #353b41;
     font-size: 16px;
     font-weight: 400;
     line-height: 140%;
     padding: 8px;
     width: 100%;
     display: block;
}

.dropdown-content li {
     position: relative;
}

.dropdown-content.show {
     display: block;
}

.access-box {
     color: #344054;
     font-size: 12px;
     font-weight: 500;
     line-height: 18px;
     border-radius: 6px;
     border: 1px solid #d0d5dd;
     background: #fff;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
     display: flex;
     align-items: center;
     grid-gap: 4px;
     width: 84px;
     position: absolute;
     top: 50%;
     left: 100px;
     transform: translate(0px, -50%);
     height: 22px;
     justify-content: center;
}

.access-box span {
     background-color: #ff3b30;
     width: 8px;
     height: 8px;
     border-radius: 50%;
}

.step-list li.line-fill span {
     background-color: #0f8fa0;
}

#compain-modal61 .step-list,
#compain-modal71 .step-list {
     grid-template-columns: 3fr 3fr 3fr;
}


.custom-dropdown .select2-results__option {
     background-color: #e0e7ff;
     /* Custom background */
     color: #333;
     /* Custom text color */
}

.custom-dropdown .select2-results__option--highlighted {
     background-color: #4f46e5;
     /* Background on hover */
     color: #fff;
     /* Text color on hover */
}