:root{

    /* --primary-color: #222fb9; */

    --primary-color: #cd00bf;

    /* --secondary-color: #ff6175; */

    --secondary-color: #a735ff;

    --success-color: #21b731;

    --danger-color: #ff2625;

    --main-dark: #431038;

}

body{

    font-family: 'Poppins', sans-serif;

}

h1,h2,h3,h4,h5,h6{

    font-weight: 500;

}

p {

    margin: 0 0 20px;

    color: #777;

    font-size: 14px;

}

.row {

    margin-left: -15px;

    margin-right: -15px;

}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {

    padding-left: 15px;

    padding-right: 15px;

}

.text-primary{

    color: var(--primary-color) !important;

}

.text-secondary{

    color: var(--secondary-color) !important;

}

.text-success{

    color: var(--success-color) !important;

}

.text-danger{

    color: var(--danger-color) !important;

}

.bg-primary{

    background: var(--primary-color) !important;

}

.bg-secondary{

    background: var(--secondary-color) !important;

}

.bg-success{

    background: var(--success-color) !important;

}

.bg-danger{

    background: var(--danger-color) !important;

}

.text-muted{

    color: #6c757d !important

}

.btn {

    border-radius: 8px;

}

.tags_list .btn {

    margin-bottom: 10px;

    width: 220px;

    padding: 5px 8px !important;

}

.btn-primary {

    background-color: var(--primary-color) !important;

    border-color: var(--primary-color) !important;

    color: #fff !important;

}

.btn-secondary {

    background-color: var(--secondary-color) !important;

    border-color: var(--secondary-color) !important;

    color: #fff !important;

}

.btn-label-primary, .btn-info {

    background-color: #edd7ff !important;

    border-color: #edd7ff !important;

    color: var(--primary-color) !important;

}

.btn-label-primary:hover {

    background-color: var(--primary-color) !important;

    border-color: var(--primary-color) !important;

    color: #fff !important;

}

.btn-label-secondary {

    background-color: #ffdcfd !important;

    border-color: #ffdcfd !important;

    color: var(--secondary-color) !important;

}

.btn-label-secondary:hover,

.btn-info:hover {

    background-color: var(--secondary-color) !important;

    border-color: var(--secondary-color) !important;

    color: #fff !important;

}

.btn-outline-primary {

    background-color: transparent !important;

    border-color: var(--primary-color) !important;

    color: var(--primary-color) !important;

}

.btn-outline-primary:hover {

    background-color: var(--primary-color) !important;

    border-color: var(--primary-color) !important;

    color: #fff !important;

}

.btn-outline-secondary {

    background-color: transparent !important;

    border-color: var(--secondary-color) !important;

    color: var(--secondary-color) !important;

}

.btn-outline-secondary:hover {

    background-color: var(--secondary-color) !important;

    border-color: var(--secondary-color) !important;

    color: #fff !important;

}

.btn-success {

    background-color: var(--success-color) !important;

    border-color: var(--success-color) !important;

    color: #fff !important;

}

.btn-label-danger {

    background-color: #ffc9c8 !important;

    border-color: #ffc9c8 !important;

    color: var(--danger-color) !important;

}

.btn-danger,

.btn-label-danger:hover {

    background-color: var(--danger-color) !important;

    border-color: var(--danger-color) !important;

    color: #fff !important;

}



.f-12{

    font-size:12px !important;

}

.f-14{

    font-size:14px !important;

}

.f-16{

    font-size:16px !important;

}

.f-18{

    font-size:18px !important;

}

.f-20{

    font-size:20px !important;

}

.f-22{

    font-size:22px !important;

}

.f-24{

    font-size:24px !important;

}

.f-26{

    font-size:26px !important;

}

.f-28{

    font-size:28px !important;

}

.f-30{

    font-size:30px !important;

}

.fw-1{

    font-weight:100 !important;

}

.fw-2{

    font-weight:200 !important;

}

.fw-3{

    font-weight:300 !important;

}

.fw-4{

    font-weight:400 !important;

}

.fw-5{

    font-weight:500 !important;

}

.fw-6{

    font-weight:600 !important;

}

.fw-7{

    font-weight:700 !important;

}

.fw-8{

    font-weight:800 !important;

}

.fw-9{

    font-weight:900 !important;

}

.headbar{

    background: #fff;

    margin-top: -10px;

    margin-left: -45px;

    margin-right: -50px;

    height: 68px;

    padding: 8px 20px;

}

@media (max-width:500px){

    .headbar {

        background: #fff;

        margin-top: -10px;

        margin-left: -15px;

        margin-right: -15px;

        height: 68px;

        padding: 8px 20px;

        position: relative;

        top: 7px;

        z-index: 999;

        display: flex !important;

        justify-content: end;

    }

}

.navbar-toggler{

    background: #cd00bf;

    font-size: 16px;

    padding: 5px 7px;

}



main.page-container {

    background: #f8f8f8;

}

 .navbar-main {

    background-color: #fff;

}

.leftbar:not(.leftbar-closed) .navbar-main .navbar-nav a.nav-link {

    color: #000;

    font-size: 14px;

    padding-top: 9px !important;

    padding-bottom: 9px !important;

    border-radius: 10px;

    text-transform: capitalize;

}

.navbar-nav li.nav-item.active .nav-link:hover, .leftbar:not(.leftbar-closed) .navbar-main .navbar-nav .nav-item:hover a.nav-link, .leftbar:not(.leftbar-closed) .navbar-main .navbar-nav .nav-item.active a.nav-link {

    background: var(--primary-color) !important;

    color: #fff !important;

    position: relative;

}

.navbar-nav li.nav-item{

    margin: 0 8px;

}

.leftbar .navbar-main .dropdown-toggle::after {

    right: 10px;

}

/* .navbar-nav li.nav-item.active .nav-link:before {

    content: '';

    height: 100%;

    width: 3px;

    background: var(--primary-color);

    position: absolute;

    right: 0;

} */

.navbar-nav li.nav-item:hover .nav-link{

    background: #eeeffc !important;

    color: var(--primary-color);

    position: relative;

    border-top-left-radius: 20px;

    border-bottom-left-radius: 20px;

}

.navbar-main .navbar-brand {

    min-height: 43px;

    margin-top: 5px;

    margin-bottom: 7px;

}

.headbar li.nav-item.dropdown {

    list-style: none;

}

.leftbar .main-menu {

    max-height: calc(100vh - 115px);

}

.leftbar:not(.leftbar-closed) .navbar-main:not(.navbar-right) .dropdown-menu {

    background-color: transparent;

    box-shadow: none !important;

    /* margin-left: 10px !important; */

    /* margin-right: 10px !important; */

    /* border-radius: 4px !important; */

    margin-bottom: 5px;

}

.leftbar:not(.leftbar-closed) .navbar-nav > .nav-item .dropdown-menu:not(.top-user-menus) a.dropdown-item .navbar-icon {

    margin-right: 0.6rem;

}

.dropdown-menu li.nav-item a {

    padding-left: 20px !important;

    /* color: #999 !important; */

}

.leftbar:not(.leftbar-closed) .navbar-main:not(.navbar-right) .main-menu ul.dropdown-menu:not(.top-user-menus) .nav-item a.dropdown-item {

    color: #000;

}

.leftbar:not(.leftbar-closed) .navbar-main:not(.navbar-right) .main-menu ul.dropdown-menu:not(.top-user-menus) .nav-item:hover a.dropdown-item,

.leftbar:not(.leftbar-closed) .navbar-main:not(.navbar-right) .main-menu ul.dropdown-menu:not(.top-user-menus) .nav-item:hover a.dropdown-item i{

    color: var(--primary-color) !important;

}



.app_search_input + [class^="material-"]{

    border-radius: 6px;

}

.welcome-banner {

    background: var(--secondary-color);

    padding: 35px 25px;

    margin: 60px 0px 30px 0;

    border-radius: 9px;

    position: relative;

}

.welcome-banner .wlcmimg {

    position: absolute;

    width: 275px;

    bottom: -26px;

    right: 25px;

}

.title {

    font-size: 18px;

    font-weight: 500;

    margin-bottom: 0;

}

.card {

    margin-bottom: 1.875rem;

    background-color: #fff;

    transition: all .5s ease-in-out;

    position: relative;

    border: 0rem solid transparent;

    border-radius: 10px;

    box-shadow: 0rem 0.3125rem 0.3125rem 0rem rgb(82 63 105 / 5%);

    /* height: calc(100% - 30px); */

}

.card-body {

    padding: 0.85rem 1.075rem;

}

.quota_box .card-icon {

    height: 45px;

    width: 45px;

    background: #5ad7b2;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 4px;

    color: #fff;

    font-size: 20px;

    margin-bottom: 8px;

}

.quota_box img.overlay {

    position: absolute;

    bottom: 0px;

    width: 400px;

    right: 0px;

}

.quota_box .card label {

    color: #5ad7b2;

}

.quota_box .card2 .card-icon {

    background: #53d9f4;

}

.quota_box .card2 label {

    color: #53d9f4;

}

.quota_box .card3 .card-icon {

    background: #ff8796;

}

.quota_box .card3 label {

    color: #ff8796;

}

.quota_box .card4 .card-icon {

    background: #9473d1;

}

.quota_box .card4 label {

    color: #9473d1;

}

.whatdo .card.card1 {

    background: #c5b5e5;

}

.whatdo .card .card-icon {

    height: 55px;

    width: 55px;

    background: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-size: 24px;

}

.whatdo .card.card1 i {

    color: #9473d1;

}

.whatdo .card i {

    transition: .35s;

}

.whatdo .card:hover i {

    transform: scale(1.1) rotate(-45deg);

}

.whatdo .card.card2 {

    background: #a9e9f6;

}

.whatdo .card.card2 i {

    color: #53d9f4;

}

.whatdo .card.card3 {

    background: #fbd0d5;

}

.whatdo .card.card3 i {

    color: #ff8796;

}

.whatdo .card.card4 {

    background: #96e3cc;

}

.whatdo .card.card4 i {

    color: #5ad7b2;

}

.whatdo .card .card-cont {

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.whatdo .card h5 {

    color: #37474f;

}

.empty-list {

    width: 100%;

    display: block;

    /* border: solid 1px #ddd; */

    border-radius: 10px;

    padding: 25px 20px 50px 20px;

    margin: 0px;

    /* background: #eff3f5; */

    background: #fff;

    text-align: center;

    margin-top: 0px;

    box-shadow: 0rem 0.3125rem 0.3125rem 0rem rgb(82 63 105 / 5%);

}

.empty-list img {

    opacity: .7;

}

.select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {

    border-top-left-radius: 0;

    border-top-right-radius: 0;

    background: #F8F8F8;

    border: 0.0625rem solid #ececec;

    padding: 0.3125rem 1.25rem;

    color: #6e6e6e;

    border-radius: 8px;

}

.select2-selection--single:not([class*=bg-]):not([class*=border-]) {

    height: 35px;

    display: flex;

    align-items: center;

    background: #fff;

    border: 0.0625rem solid #dbd8d8;

    padding: 0.3125rem .5rem;

    color: #6e6e6e;

    border-radius: 8px;

}

.tracking-domain-scheme-name .select2-selection--single:not([class*=bg-]):not([class*=border-]){

    border-radius: 8px 0px 0px 8px;

}

.knowledge-base {

    padding: 0 15px;

    margin: 0;

    list-style: none;

}

.knowledge-base li a {

    color: var(--bs-dark) !important;

    display: flex;

    font-weight: 400 !important;

    padding: 10px 0;

    border-bottom: 1px dashed #ccc;

}

.knowledge-base li i {

    color: var(--primary-color);

    font-size: 20px;

    margin-top: 3px;

    margin-right: 5px;

}

.footer {

    background: #fff;

    width: 100%;

    left: 0;

    text-align: center;

    padding: inherit;

}

.action-log-box {

    max-height: 400px;

    height: auto;

}

a:not(.btn, .dropdown-item, .nav-link) {

    color: var(--secondary-color) !important;

    font-weight: 500;

}

a:not(.btn, .dropdown-item, .nav-link):hover{ 

    color: var(--primary-color)  !important;

}

.leftbar .top-sticky-content {

    top: 0;

    background: #fff;

    border: 0px;

    padding: 13px 15px;

    border-radius: 8px;

    box-shadow: none;

    margin-top: 0px;

    margin-bottom: 10px;

    overflow: visible;

    z-index: 999;

}

.page-title{

    display: flex;

    flex-direction: row-reverse;

    justify-content: space-between;

}

.page-title h1 {

    font-weight: 500;

    font-size: 24px;

    margin-bottom: 10px;

}

.breadcrumb-item+.breadcrumb-item::before {

    font-family: "Font Awesome 5 Pro";

    content: '\f054';

    opacity: 0.7;

    padding-right: 5px;

    transform: translateY(3px);

    font-size: 10px;

}

.breadcrumb > li > a, .page-title .breadcrumb > li + li:before, [class^="theme-"] .breadcrumb > li > a {

    font-weight: 400;

    color: var(--secondary-color) !important;

}

.filter-box input.search {

    background: #F8F8F8;

    border: 0.0625rem solid #ececec;

    padding: 0.3125rem .75rem;

    color: #6e6e6e;

    border-radius: 8px;

    padding-right: 32px;

}

.theme-blue .styled[type="radio"]:checked ~ .check-symbol:after {

    background-color: var(--primary-color) !important;

    

}

.leftbar .navbar-brand > img {

    max-width: 155px;

}

.theme-blue .nav-tabs > li.active > a.nav-link, .theme-blue .nav-tabs > li > a.nav-link.active, .theme-blue .nav-tabs > li > a.nav-link:hover, .theme-blue .nav-tabs > li > a.nav-link:focus {

    border-bottom-color: #1b5f9e;

    border-bottom: 2px solid var(--primary-color) !important;

    color: var(--primary-color);

}

.nav-tabs {

    border: 0px;

    background: #eee;

    padding: 10px;

    border-radius: 10px;

}

.nav-tabs .nav-item .nav-link {

    padding: 5px 22px;

    color: #000;

    font-weight: 500;

    font-size: 14px;

    border-radius: 0.375rem;

    border: 0px !important;

}

.nav-tabs .nav-item .nav-link:hover{

    color: var(--main-dark) !important;

}

.nav-tabs .nav-item.active .nav-link,

.nav-tabs .nav-item.active .nav-link:hover {

    background: var(--main-dark);

    color: #fff !important;

    border: 0px !important;

}

.theme-blue .dropdown-menu > .active > a, .theme-blue .dropdown-menu > .active > a:hover, .theme-blue .dropdown-menu > .active > a:focus {

    background-color: #eeeffc !important;

}

.nav-underline .dropdown-toggle::after {

    content: '\f107';

    font-family: "Font Awesome 5 Pro";

    line-height: 21px;

}

.theme-blue .nav-tabs > li.active > a.nav-link, .theme-blue .nav-tabs > li > a.nav-link.active, .theme-blue .nav-tabs > li > a.nav-link:hover, .theme-blue .nav-tabs > li > a.nav-link:focus{

    border: 0px !important;

}

.nav-underline .nav-item .nav-link {

    padding: 6px 12px;

    margin-right: 10px;

}

.form-control {

    font-size: 0.92rem;

    background: #fff;

    border: 1px solid #dbd8d8;

    padding: 0.3125rem 1rem;

    color: #6e6e6e;

    border-radius: 8px;

}

.form-select {

    font-size: 0.92rem;

    border: 1px solid #dbd8d8;

    padding: 0.3125rem 1rem;

    color: #6e6e6e;

    border-radius: 8px;

}

.form-control:focus {

    border-color: var(--primary-color);

    box-shadow: none;

}

.emojionearea.emojionearea-inline {

    height: 34px;

    background: #fff !important;

    border: 1px solid #dbd8d8 !important;

    padding: 0.3125rem 1rem !important;

    color: #6e6e6e;

    border-radius: 8px !important;

    box-shadow: none !important;

}

label.checker input:checked ~ .checker-symbol::before {

    background-color: var(--secondary-color);

    border-color: var(--secondary-color);

}

.hover-list li {

    width: 50%;

    border: dashed 2px #aaa;

}

.hover-list li:hover {

    border: dashed 2px var(--secondary-color);

}

form#classic-builder-form {

    margin-top: 14px;

}

div#PreheaderBox h2 {

    font-size: 24px;

    font-weight: 500;

}

.confirm-campaign-box {

    width: 100%;

}

.modal-content {

    border: 0px;

    border-radius: 10px;

}

.modal-body {

    padding: 1rem 1.5rem;

}

.modal-title {

    font-size: 17px;

    margin-bottom: 0;

    line-height: 1.3;

}

.modal-header {

    padding-left: 1.5rem;

}

.modal-footer {

    justify-content: end;

    border: 0px;

    padding-top: 0px;

}

.modal-footer .btn{

    min-width: 80px;

}

.box-list .box-item p {

    margin-bottom: 0;

    color: #424242;

}

.box-list .box-item {

    border-color: var(--primary-color);

    border-radius: 10px;

}

.box-list .box-item:hover{

    border-color: var(--secondary-color) !important;

}

.box-list .box-item:hover span,.box-list .box-item:hover i{

    color: var(--secondary-color) !important;

}

.navbar-backend .main-menu {

    max-height: calc(100vh - 160px);

}

@media (max-width:768px){

    .navbar-backend .main-menu {

        max-height: 100%;

    } 

}

.but-change-theme-mode {

    display: none;

}

.form-group label {

    font-weight: 500;

}

.leftbar:not(.leftbar-closed) .navbar-main:not(.navbar-right) .main-menu ul.dropdown-menu:not(.top-user-menus) .nav-item.active a.dropdown-item, .leftbar:not(.leftbar-closed) .navbar-main:not(.navbar-right) .main-menu ul.dropdown-menu:not(.top-user-menus) .nav-item:hover a.dropdown-item, .leftbar:not(.leftbar-closed) .navbar-main:not(.navbar-right) .main-menu ul.dropdown-menu:not(.top-user-menus) .nav-item.active a.dropdown-item .navbar-icon, .leftbar:not(.leftbar-closed) .navbar-main:not(.navbar-right) .main-menu ul.dropdown-menu:not(.top-user-menus) .nav-item:hover a.dropdown-item .navbar-icon {

    color: var(--primary-color) !important;

    opacity: 1;

    transition: all 0.2s ease-in-out;

}

.dropdown-toggle::after {

    content: '\f107';

    font-family: 'Font Awesome 5 Pro';

}

.dropdown-toggle.activities-menu-item:after {

    content: '\f08e' !important;

    font-family: 'Font Awesome 5 Pro' !important;

    font-size: 13px;

}

.table tr {

    background: #fff;

    position: relative;

}

table td, table td a {

    font-size: 14px;

}

.stat-num {

    font-size: 14px;

}

.camptype {

    padding: 3px 10px;

    margin: 0px;

    min-width: 55px;

    background: #69b190;

    font-size: 12px;

    color: #fff;

    border-radius: 4px;

    white-space: nowrap;

    margin-top: 22px;

}



table.table {

    border-collapse: separate;

    border-spacing: 0 12px;

}

table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {

    border: 0px !important;

}

.table-box tr td:first-child {

    padding-left: 15px !important;

    padding-right: 15px !important;

    border-top-left-radius: 10px;

    border-bottom-left-radius: 10px;

}

.table-box tr th:first-child{

    border-top-left-radius: 10px;

    border-bottom-left-radius: 10px;

}

.table-box tr th{

    font-weight: 500;

}

.table-box tr td:last-child,

.table-box tr th:last-child {

    border-top-right-radius: 10px;

    border-bottom-right-radius: 10px;

}

.table > tbody > tr > td, .table > tfoot > tr > td {

    border-color: transparent;

    vertical-align: middle;

    padding: 17px 15px;

}

.num_per_page label {

    font-size: 14px;

    color: #999;

}

.user-welcome h3 {

    font-size: 18px;

    margin: 0px;

    font-weight: 600;

}

.user-welcome p {

    color: #888;

    font-weight: 500; 

    margin-top: -7px;

}

.user-welcome {

    padding-left: 25px;

    margin-top: -5px;

    display: none;

}

.user-welcome img{

    width: 32px; 

}

.dash-tabs {

    background: #eee;

    padding: 10px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.dash-tabs .nav-item .nav-link{

    padding: 5px 22px;

    color: #000;

    font-weight: 500;

    font-size: 14px;

}

.dash-tabs .nav-item .nav-link:hover{

    color: var(--primary-color);

}

.dash-tabs .nav-item .nav-link.active{

    background: var(--primary-color);

    color: #fff;

}

.dropdown-menu {

    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.1) !important;

    border: 0px;

    border-radius: 10px;

    padding: 8px;

}

.dropdown-menu .dropdown-item{

    border-radius: 8px;

    font-size: 14px;

    font-weight: 400;

}

.dropdown-item.active, .dropdown-item:active {

    background-color: var(--primary-color);

}

.dropdown-menu .head {

    border: 0px !important;

    border-radius: 4px;

    margin: 4px 0;

}

.dropdown-menu .dropdown-item:hover{

    background: #eeeffc !important;

}

.leftbar .navbar-main:not(.navbar-right) .main-menu ul.dropdown-menu:not(.top-user-menus) .nav-item a.dropdown-item:hover {

    background: #f5dfff !important;

    color:var(--primary-color) !important;

}

.btn-filter,.btn-filter:active, .btn-filter:focus,.btn-filter:hover {

    background: #fff;

    border: 1px solid #ddd;

} 

.dash-tabs .btn-filter{

    height: 32px;

}

.dropdown-filter .dropdown-item{

    font-size: 13px;

    font-weight: 400;

    border-radius: 6px;

}

.getstart-dropdown .dropdown-item{

    padding: 6px 10px;

    font-size: 14px;

    font-weight: 400;

}

.getstart-dropdown .dropdown-item span{

    font-size: 12px;

    color: #999;

}

.getstart-dropdown .dropdown-item:hover{

    color: var(--primary-color);

}

.getstart-dropdown .dropdown-menu{

    min-width: 300px;

}

.stats-card{

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0.85rem 1.075rem;

}

.stats-card h6 {

    font-size: 15px;

    margin-bottom: 4px;

}

.stats-card h4{

    font-weight: 600;

    font-size: 22px;

    margin-bottom: 12px;

}

.stats-card p{

    line-height: 1;

    color: #999;

    font-size: 13px;

    font-weight: 300;

}



.starting-steps .steps-top {

    background: #460843;

    padding: 20px;

}

.starting-steps .steps-top h6{

    margin: 0px;

    font-weight: 400;

    font-size: 14px;

    color: var(--secondary-color);

}

.progress-bar {

    background-color: #f474ef !important;

}

.progress{

    height: 10px;

    margin-bottom: 6px;

}

.steps-items{

    list-style: none;

    margin: 0px;

    padding: 10px;

}

.steps-items a:after {

    content: '\f054';

    position: absolute;

    font-family: "Font Awesome 5 Pro";

    right: 20px;

    top: 50%;

    translate: 0 -50%;

    color: #999;

    font-size: 13px;

}

.steps-items a{

    position: relative;

    color: #222;

}

.steps-items a p{

    font-size: 12px;

    color: #999;

    font-weight: 400;

    padding-left: 23px;

}

.steps-items a {

    position: relative;

    color: #222 !important;

    padding: 10px 30px 10px 12px;

    display: block;

    font-size: 14px;

    border-radius: 8px;

    transition: .3s;

}

.steps-items a:hover{

    background:#eeeffc ;

}

.progress-right-info {

    font-size: 15px; 

}

.dashboard-accord .accordion-header button i {

    height: 30px;

    width: 30px;

    background: #faefff;

    color: var(--primary-color);

    border-radius: 5px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right: 6px;

    font-size: 13px;

}

.dashboard-accord .accordion-header button span {

    font-size: 13px;

    color: #999;

}

.dashboard-accord .accordion-item{

    background-color: #fff;

    transition: all .5s ease-in-out;

    position: relative;

    border: 0rem solid transparent;

    border-radius: 10px !important;

    box-shadow: 0rem 0.3125rem 0.3125rem 0rem rgb(82 63 105 / 5%);

    overflow: hidden;

}

.accordion-button:not(.collapsed) {

    background: #fff;

    border: 0px !important;

    box-shadow: none !important;

    outline: none  !important;

    color: var(--primary-color);

}



ul.accor-fea-list {

    list-style: none;

    margin: 0px;

    padding: 0px;

}

ul.accor-fea-list a{

    display: flex;

    align-items: center;

    padding: 6px 10px;

    border-radius: 8px;

}

ul.accor-fea-list a svg{

    width: 17px;

    margin-right: 8px;

}

ul.accor-fea-list a i.navbar-icon {

    width: 25px;

    margin-right: 4px;

}

ul.accor-fea-list a {

    display: flex;

    align-items: center;

    padding: 7px 10px;

    border-radius: 8px;

    font-size: 13px;

    margin-bottom: 4px;

    font-weight: 400;

    color: #222 !important;

    position: relative;

}

ul.accor-fea-list a:hover{

    color: var(--primary-color) !important;

    background: #eeeffc;

}

ul.accor-fea-list a:hover {

    color: var(--primary-color) !important;

    background: #faedff !important;

}

ul.accor-fea-list a:after {

    content: '\f054';

    position: absolute;

    font-family: "Font Awesome 5 Pro";

    right: 20px;

    top: 50%;

    translate: 0 -50%;

    color: #999;

    font-size: 13px;

}

ul.accor-fea-list li {

    border-top: 1px dashed #ececec;

    margin-top: 5px;

    padding-top: 5px;

}

.dashboard-accord {

    margin-bottom: 20px;

}

.dashboard-accord .accordion-button:after {

    background-size: 14px !important;

}

ul.accor-fea-list li i.far {

    margin-right: 8px;

}

.switchery[type="checkbox"].half_checked ~ .check-symbol:before, .styled[type="checkbox"].half_checked ~ .check-symbol:before {

    background: var(--secondary-color);

    border-color: var(--secondary-color);

}

.switchery[type="checkbox"]:checked ~ .check-symbol:before, .styled[type="checkbox"]:checked ~ .check-symbol:before {

    background-color: var(--primary-color) !important;

    border-color: var(--primary-color) !important;

}

.bg-connected, .bg-published, .bg-activated, .label-success, .bg-settled, .bg-sent, .bg-recurring, .bg-deliverable, .bg-current_active, .bg-current, .bg-cron-running, .bg-running, .bg-starting, .bg-pending-sending, .bg-active, .bg-confirmed, .bg-paid, .bg-sending, .bg-subscribed {

    background-color: var(--success-color);

    border-color: var(--success-color);

    color: #fff;

}



.bg-verified,

.bg-done {

    background-color: var(--success-color);

    border-color: var(--success-color);

    color: #fff;

}

.bg-pending {

    background-color: var(--bs-warning) !important;

    border-color: var(--bs-warning) !important;

}

[name=keyword] + [class^="far"]{

    color: #aaa;

    font-size: 15px;

    display: inline-block;

    line-height: 10px;

    margin-left: -27px;

    transform: translateY(1px);

}



.popup-wizard .wizard-sidebar {

    padding-top: 16px;

    margin-left: 25px;

    border:0px;

}

.popup-wizard .wizard-content {

    border: 0px;

    padding-right: 60px;

}

.wizard-steps li .import-tab.current {

    background: #eeeffc !important;

    color: var(--primary-color);

}



.dropzone {

    border-color: var(--secondary-color) !important;

    background: #fff3f4 !important;

}

.tox-tinymce {

    border-radius: 8px !important;

    box-shadow: none !important;

    border: 1px solid #ccc

}

.tox .tox-menubar {

    background-color: #f6f6f6 !important;

}

.tox .tox-menubar+.tox-toolbar, .tox .tox-menubar+.tox-toolbar-overlord .tox-toolbar__primary {

    background: #f6f6f6 !important;

}



.select-template-layout.selected:before {

    content: '\f00c';

    font-family: 'Font Awesome 5 Pro';

    background: var(--secondary-color);

    font-size: 15px;

    text-indent: -7px;

    font-weight: 300;

}

.select-template-layout.selected {

    border: solid 3px var(--secondary-color);

    border-radius: 10px;

}

.layout-dark .navbar-main {

    background-color: #fff !important;

    border-color: #fff !important;

    border-bottom: 1px solid #ececec !important;

}

.navbar-brand > img {

    max-height: 55px;

    max-width: 160px;

}

ul.navbar-nav .nav-link {

    color: #000 !important;

}



.automation-title {

    color: #000 !important;

    font-size: 18px;

    margin-left: 30px;

}

li.nav-item.dropdown .nav-link:hover{

    background: transparent  !important;

}

.diagram .history {

    position: absolute;

    top: 77px !important;

    left: 10px !important;

    display: flex;

    border-radius: 5px !important;

    overflow: hidden;

}

.diagram .history a {

    background: #000 !important;

    color: #fff !important;

    font-size: 13px !important;

    display: inline-flex !important;

    align-items: center;

    justify-content: center;

    border-radius: 0px !important;

    border-right: .5px dashed #ececec;

}

.diagram .history a:hover{

    background-color: var(--secondary-color) !important;

}



.btn-tabs .btn.focus {

    background: var(--secondary-color) !important;

    border-color: var(--secondary-color);

    border-width: 2px;

    color: #fff;

    box-shadow: none !important;

}

.btn-tabs .btn{

    background-color: #fff !important;

}

.pagination,

.pagination.border-start {

    border: 0px !important;

    gap: 8px;

}



.page-item .page-link, .page-item.disabled .page-link {

    border-color: transparent;

    border-radius: 5px !important;

    font-size: 14px;

    font-weight: 400;

    color: #222 !important;

}

.page-item.disabled .page-link{

    color: #999 !important;

}

.page-item.active .page-link {

    background-color: #f0ddff !important;

    border-color: var(--secondary-color) !important;

    color: var(--secondary-color) !important;

}

code {

    color: #777;

}

.payment-box {

    border-radius: 8px;

    box-shadow: none;

}

.top-user-menus {

    width: 310px;

}

.top-user-menus .backdrop  {

    display: none !important;

}

.bg-new {

    background-color: var(--secondary-color);

    border-color: var(--secondary-color);

    color: #fff;

}

.frontend .leftbar-hide-menu svg {

    color: #000;

}

.navbar.frontend .navbar-right{

    display: none !important;

}

.leftbar-closed .navbar-main .navbar-nav .lvl-1 {

    text-indent: 0;

    padding: 15px 15px !important;

    border-radius: 0px !important;

    

}

.leftbar-closed .navbar-main .navbar-nav .lvl-1 span {

    display: none;

}

@media (max-width:768px){

    .leftbar-closed .navbar-main .navbar-nav .lvl-1 span {

        display: block;



    }   

}

.leftbar-closed .navbar-main .dropdown-toggle::after {

    right: 0px;

}

.leftbar .navbar-nav .dropdown-menu-bottom{

    top: 0;

    bottom: auto;

}

/* ================Backend================ */

.navbar-backend .navbar-nav a.nav-link{

    color: #fff !important;

}



.navbar-backend .navbar-nav li.nav-item.active .nav-link:hover, .leftbar:not(.leftbar-closed) .navbar-backend .navbar-nav .nav-item:hover a.nav-link, .leftbar:not(.leftbar-closed) .navbar-backend .navbar-nav .nav-item.active a.nav-link{



    background: #fff !important;

    color: var(--secondary-color) !important;

}

.leftbar:not(.leftbar-closed) .navbar-backend:not(.navbar-right) .main-menu ul.dropdown-menu:not(.top-user-menus) .nav-item a.dropdown-item {

    color: #fff !important;

}



.leftbar:not(.leftbar-closed) .navbar-backend:not(.navbar-right) .main-menu ul.dropdown-menu:not(.top-user-menus) .nav-item.active a.dropdown-item, .leftbar:not(.leftbar-closed) .navbar-backend:not(.navbar-right) .main-menu ul.dropdown-menu:not(.top-user-menus) .nav-item:hover a.dropdown-item, .leftbar:not(.leftbar-closed) .navbar-backend:not(.navbar-right) .main-menu ul.dropdown-menu:not(.top-user-menus) .nav-item.active a.dropdown-item .navbar-icon, .leftbar:not(.leftbar-closed) .navbar-backend:not(.navbar-right) .main-menu ul.dropdown-menu:not(.top-user-menus) .nav-item:hover a.dropdown-item .navbar-icon {

    color: var(--secondary-color) !important;

    opacity: 1;

    transition: all 0.2s ease-in-out;

}

.dropdown-menu-bottom.top-user-menus{

    background: #fff !important;

}

.leftbar .leftbar-hide-menu {

    top: 23px;

    right: 10px;

}

.navbar-backend  .top-user-menus {

    bottom: 10px !important;

    top: auto !important;

}

/* ================/Backend================ */



table.table-log tr th {

    padding: 10px 10px;

    font-size: 14px;

    white-space: nowrap;

}



table ul.dropdown-menu {

    max-height: 300px;

    overflow: auto;

}

table.table.table-box.pml-table th {

    padding: 17px 15px;

}

.dropzone .dz-default.dz-message:before {

    content: '\f574' !important;

    font-family: 'Font Awesome 5 Pro' !important;

    font-weight: 300;

    translate: 0 -5px;

}

.badge.badge-new {

    font-size: 14px;

    background: var(--secondary-color);

    font-weight: 500;

    padding: 5px 12px;

}

.badge.badge-improve {

    font-size: 14px;

    background: var(--primary-color);

    font-weight: 500;

    padding: 5px 12px;

}

ul.changlog-list {

    padding-left: 50px;

    list-style: none;

    margin-top: 15px;

    margin-bottom: 30px;

    position: relative;

}

ul.changlog-list:before {

    content: '';

    width: 1px;

    height: 86%;

    background: #ccc;

    position: absolute;

    left: 34.5px;

    top: 5px;

}

ul.changlog-list li {

    position: relative;

    font-size: 14px;

    margin-bottom: 10px;

}

ul.changlog-list li:before {

    height: 10px;

    width: 10px;

    content: '';

    border: 3px solid var(--secondary-color);

    position: absolute;

    left: -20px;

    top: 5px;

    background: #fff;

    border-radius: 50%;

}

ul.changlog-list.improve li:before {

    border: 3px solid var(--primary-color);

}

li.nav-item.active .fa-info-circle {

    color: var(--primary-color) !important;

}

.alert-warning:before {

    content: "\f05a";

    font-family: 'Font Awesome 5 Pro';

}

.empty-list .far {

    font-size: 50px;

    opacity: .7;

}

.progress-bar-striped {

    background-image: linear-gradient(45deg, rgba(255, 255, 255, .45) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, .45) 75%, transparent 75%, transparent);

    background-size: var(--bs-progress-height) var(--bs-progress-height);

}

#mainAppNav .navbar-icon {

    margin-right: 2px;

}

.theme-blue .select2-container--default .select2-results__option--highlighted[aria-selected] {

    background: #f5dfff !important;

}

.switchery[type="checkbox"]:checked ~ .check-symbol:before, .styled[type="checkbox"]:checked ~ .check-symbol:before, .styled[type="radio"]:checked ~ .check-symbol:before {

    content: '\f00c';

    font-family: 'Font Awesome 5 Pro';

}

.input-group-text {

    line-height: 1.3;

}

.search-control .fa-search {

    background: #f3f3f3;

    width: 40px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 16px;

    color: #999;

}

.bg-slate-800{

    background-color: #e1e1e1 !important;

}

#tinymce .text-white{

    color:#000 !important;

}

button.btn.btn-label-primary.sort-direction {

    background: #ddd !important;

    color: #222 !important;

    border-color: #ddd !important;

}

rect.trigger {

    fill: var(--primary-color) !important;

    stroke: #fff !important;

    width: 250px;

}

#trigger_textlink  text[alignment-baseline="middle"] {

    translate: 14px;

}

tspan#trigger_title {

    fill: #fff;

    font-weight: 500;

    font-family: poppins;

}

/* tspan#trigger_title:hover {

    fill: var(--primary-color) !important;

} */

#trigger_textlink tspan[font-family="FontAwesome"] {

    fill: #fff !important;

}

/* #trigger_textlink tspan[font-family="FontAwesome"]:hover {

    fill: var(--primary-color) !important;

} */

.modal-header .back {

    width: 50px;

}

rect.action {

    fill: #fff !important;

    stroke: rgb(154 181 214);

    width: 250px !important;

}

tspan[font-family="Arial"] {

    font-family: poppins;

    fill:#000;

}

tspan[font-family="Arial"]:hover {

    fill:var(--primary-color) !important;

}

tspan[font-family="FontAwesome"] {

    fill: #000 !important;

}

tspan[font-family="FontAwesome"]:hover{

    fill: var(--primary-color) !important;

}

.alert-info {

    color: #cd00bf !important;

    background: #cd00bf0f !important;

}

.card.upgrade-card {

    background: linear-gradient(45deg, #f6e2fb, #f9ecdc);

    padding: 25px 20px;

    text-align: left;

    align-items: start;

}

.essential-upgrade{

    background-image: linear-gradient(90deg, #bc64ff, #ff5ff4 30%, #ff7a5a 70%, #ffbc41);

    padding: 1px;

    border-radius: 10px;

    margin-top: 30px;

}

.essential-upgrade .inner{

    background:#fff;

    padding: 12px 20px;

    border-radius: 10px;

    align-items: center;

}

button.btn.dissmiss-upgrade {

    position: absolute;

    right: 2px;

    font-size: 20px;

    top: 2px;

}

.essential-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: #f1f1f1;

    padding: 12px 16px;

    border-radius: 10px;

}

.card.upgrade-card ul li {

    color: #777;

    list-style: none;

    font-size: 14px;

    margin-bottom: 2px;

    position: relative;

}

.card.upgrade-card ul li:before {

    content: '';

    height: 4px;

    width: 4px;

    position: absolute;

    background: #fff;

    outline: 3px solid #cd00bf;

    border-radius: 50%;

    top: 8px;

    left: -14px;

}

.media {

    display: -ms-flexbox;

    display: flex;

    -ms-flex-align: start;

    align-items: flex-start;

}

.media-image-wrap {

    line-height: 1.5;

}

.media-image-wrap {

    background-color: #fae8f9;

    color: var(--primary-color);

    padding: 4px 10px;

    border-radius: 8px;

    border: 1px solid var(--primary-color);

    font-size: 24px;

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    line-height: 1.3;

    margin-top: -3px;

}

.upgrade-dets li {

    position: relative;

    margin-bottom: 12px;

    list-style: none;

}

.upgrade-dets li:before{

    content: '';

    height: 4px;

    width: 4px;

    position: absolute;

    background: #fff;

    outline: 3px solid #cd00bf;

    border-radius: 50%;

    top: 9px;

    left: -14px;

}

ul.upgrade-dets {

    position: relative;

}

ul.upgrade-dets:before {

    content: '';

    height: 94%;

    background: #ececec;

    width: 1px;

    position: absolute;

    left: 20px;

    top: 6px;

}

.gredcard{

    background: linear-gradient(45deg, #f6e2fb, #f9ecdc);

    padding: 40px;

    border-radius: 16px;

}

.upgrade-item {

    background-image: linear-gradient(90deg, #bc64ff, #ff5ff4 30%, #ff7a5a 70%, #ffbc41);

    padding: 1px;

    border-radius: 10px;

}

.upgrade-item .item-inner{

    background-color: #fff;

    padding: 20px;

    border-radius: 10px;

    text-align: center;

}

.adminitem{

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 15px 20px;

    border: 1px solid #ccc;

    border-radius: 10px;

    margin-bottom: 20px;

}

.ribbon {

    width: 90px;

    height: 90px;

    overflow: hidden;

    position: absolute;

}

.ribbon::before {

    position: absolute;

    content: '';

    display: block;

    border: 5px solid #cc7d41;

    top: 0px;

    right: 22px;

}

.ribbon::after{

    position: absolute;

    content: '';

    display: block;

    border: 5px solid #a544b3;

    top: 59px;

}

.ribbon span {

    position: absolute;

    display: block;

    width: 130px;

    padding: 2px 0;

    background: linear-gradient(90deg, #bc64ff, #ff5ff4 30%, #ff7a5a 70%, #ffbc41);

    color: #fff;

    font-size: 14px;

    text-shadow: 0 1px 1px rgba(0, 0, 0, .2);

    text-transform: uppercase;

    text-align: center;

}

.ribbon-top-left {

    top: -7px;

    left: -7px;

}

.ribbon-top-left::before,

.ribbon-top-left::after {

    border-top-color: transparent;

    border-left-color: transparent;

}



.ribbon-top-left span {

    right: 1px;

    top: 15px;

    transform: rotate(-45deg);

}

  



@media (max-width:500px){

    .leftbar .top-sticky-content{

        top: 64px !important;

    }

    .num_per_page{

        /* flex-direction: column; */

        margin-bottom: 10px !important;

    }

    .pagination, .pagination.border-start {

        border: 0px !important;

        gap: 2px;

        padding-bottom: 30px;

        padding-top: 10px;

        width: 320px;

        overflow: auto;

        justify-content: start !important;

    }

    .page-title{

        display: block !important;

    }

}