@import url('https://fonts.cdnfonts.com/css/sf-pro-display');
*{
    font-family: 'SF Pro Display', sans-serif;
}

:root {
    --body-bg-color: #F1F4FA;
    --content-bg-color: #FFF;
    --border-color: #D9E1E7;
}
body{
    background-color: var(--body-bg-color);
}

/* ======top nav============= */
.navbar-custom .topbar-nav {
    height: 80px !important;
}
.top-nav-text{
    padding: 10px 0;
}
.top-nav-text h6{
    padding: 0;
    margin: 5px 0px 0px;
    font-size: 18px;
    color: #06152B;
}
.top-nav-text p{
    padding: 0;
    margin: 0;
    font-size: 16px;
    color: #809FB8;
}
/* =========end top nav========= */


/* ========left nav============= */
.navbar-custom {
    border-bottom: none !important;
}
.left-sidenav {
    background: none !important;
}
.card,
.card .card-header {
    border: none;
}
.page-wrapper {
    padding: 5px 7px 7px 0px;
}
.page-content{
    background: var(--content-bg-color) !important;
    border-end-start-radius: 30px;
    border-end-end-radius: 30px;
        
}
.navbar-custom {
    padding-top: 15px;
    border-start-start-radius: 15px ;
    border-start-end-radius: 15px;
}

.topbar.row{
        margin-right: 0 !important;
        margin-left: 0 !important;
}

.blanco_notification a{
    border: 1px solid var(--border-color);
    line-height: 50px !important;
    margin-top: 5px !important;
    border-radius: 10px;
    padding: 0 15px !important;
}
.navbar-custom .nav-link {
    max-height: 75px !important;
}
.thumb-xs {
    height: 60px !important;
    width: 60px !important;
}

/* ===========start left menu=========== */
.brand{
    font-size: 42px;
    font-weight: 700;
    color: #000;
    margin-top: 10px;
}

.menu-item-top{
    font-size: 16px;
    font-weight: 700;
    margin: 45px 15px 15px;
    padding: 15px;
    cursor: pointer;
    background-color: #fff;
    border-radius: 15px;
    position: relative;
}
.menu-item-top p {
    font-size: 16px;
        font-weight: 700;
        color: #000;
        margin: 0;
}
.menu-item-top h3{
 font-size: 22px;
 font-weight: 700;
 color: #000;
 margin: 0;
} 

ul{
    justify-content: center;
}
ul.left-sidenav-menu li{
    font-size: 20px;
    font-weight: 700;
    align-items: center;
    padding-left: 15px;
    margin: 5px 0;
}
ul.left-sidenav-menu li a{
    color: #000;
}
ul.left-sidenav-menu li a img{
    padding: 10px 15px 10px 10px;
}

ul.left-sidenav-menu li:hover {
    background: #6630FF;
    border-radius: 15px;
}
ul.left-sidenav-menu li:hover a{
    color: #FFFFFF;
}
ul.left-sidenav-menu li.active{
    background: #6630FF;
    border-radius: 15px;
}
ul.left-sidenav-menu li.active a {
    color: #FFFFFF !important;
}

.menu-settings{
    font-size: 16px;
    font-weight: 700;
    /* text-align: center; */
    margin: 150px 20px 10px;
    padding: 10px;
    padding-left: 35px;
    cursor: pointer;
}
.menu-settings img{
    margin-right: 15px;
}
.menu-settings:hover{
    border: 1px solid #6630FF;
    border-radius: 15px;
}

/* ---------end left menu----------- */

.sale-info{
    padding-top: 20px;
    padding-bottom: 20px;
}
.sale-info div{
    border: none;
    overflow: visible;
}
.sale-info div:nth-child(4) .report-card {
    background: #6630FF;
        border-radius: 15px;
}
.past-year{
    margin-top: 25px;
}
.past-year p,
.past-year h3{
    color: #FCFDFE;
}

.progress-bar div {
    rotate: 120deg;
}
.progress-bar div span{
    rotate: -120deg;
}

/* -------sales analytics chart--------- */
.sales-analytics{
    font-size: 22px;
    color: #06152B;
}
.apexcharts-legend.position-bottom.apexcharts-align-right,
.apexcharts-legend.position-top.apexcharts-align-right {
    justify-content: flex-start !important;
    padding-left: 200px;
    margin-top:2px;
}

.sale-analytics .card{
    position: relative;
}
.sale-analytics .card-header{
    position: absolute;
    width: 100%;
    z-index: 9999999999 !important;
    background: transparent;
    border-bottom: transparent;
}

.apexcharts-toolbar{
    display: none !important;
}

.impression .card-title{
    position: absolute;
    top: -5px;
    left: 15px;
    /* padding-left: 15px !important; */
}

.campaigns thead,
tbody,
tfoot,
tr,
td,
th {
    border: transparent;
}
.campaigns thead th{
    background: none;
    font-size: 13px;
        font-weight: 500;
        color: #99A6B7;
}
.campaigns-title{
    font-size: 22px;
    color: #06152B;
}
.genert-report{
    background: #3A36DB;
    border-radius: 15px;
    border: none;
    color: #FEFEFE;
    font-size: 14px;
    font-weight: 400;
    width: 176px;
    height: 52px;
    text-align: center;
}
.genert-report span{
    padding-left: 10px;
}

.apexcharts-series path{
 background: red !important;
 color:#fff !important;
}
/* -------end sales analytics chart---- */

@media (max-width: 1316.98px)  {
    .left-sidenav{
        background: var(--content-bg-color) !important;
    }
}

/* ==============END DASHBOARD================= */



/* =========START MANAGE_ADS PAGE============== */
.camp-overview .card-body {
    position: relative;
    background: #3A36DB;
    border-radius: 10px;
    padding: 30px;
    margin: 15px;
}
.coins23{
    position: absolute;
    bottom: 5px;
    right: 0px;
    width: 200px;
    height: auto;
}
.camp-overview .message {
    width: 50%;
}
.camp-overview h4{
    font-size: 36px;
    color: #FEFEFE;
}
.camp-overview p {
    font-size: 18px;
    color: #A2A0FF;
    line-height: 1.4;
    padding: 15px 0;
}

.camp-button{
    padding: 5px 0;
}
.camp-button button{
    background: #FFFFFF;
    color: #06152B;
    width: 150px;
    border-radius: 10px;
    padding: 7px;
    border: none;
    font-size: 16px;
    color: #06152B;
}
.camp-button button:nth-child(1){
    margin-right: 30px;
}

/* .manage-add-tbl tr td{
 padding-bottom: 20px;
} */

.package{
    height: 50px;
    width: 50px;
    border-radius: 10px;
    background: #99A6B7;
    padding: 0;
    margin: 0 0 15px;
}
.package-one{
    background: rgba(84, 56, 255, 0.4);
}
.package-two {
    background: rgba(0, 26, 255, 0.4);
}

.status-online{
    background: rgba(26, 213, 152, .4);
    padding: 5px 20px;
    border-radius: 7px;
}
td.add-actions{
    padding-top: 27px;
}
.add-actions .btn-outline-light {
    color: #06152B;
    background-image: none;
    background-color: transparent;
    border-color: #e3ebf6;
    border-radius: 7px;
    padding: 4px 15px;
}
.add-actions .form-check-input[type="checkbox"] {
    border-radius: 0.45em;
    width: 26px;
    height: 26px;
    padding: 0;
    margin: 0;
}

/* =========END MANAGE_ADS PAGE============== */


/* ===========START CAMPAIGN PAGE============ */
ol.campaign-left-nav{
    margin-top: 70px;
    list-style-type: decimal;
    padding-left: 50px;
}
ol.campaign-left-nav li{
    position: relative;
    list-style-type: decimal;
    font-size: 14px;
    color: #000;
    margin-bottom: 18px;
}
ul.campaign-left-nav ol a{
    font-size: 14px;
}
ol.campaign-left-nav li::before {
    content: '';
    position: absolute;
    top: 1px;
    left: -35px;
    width: 25px;
    height: 25px;
    border: 1px solid #775DA6;
    color: #202020;
    border-radius: 50%;
    padding: 2px 7px;
}
ol.campaign-left-nav li:nth-child(1):before {
    content: '1';
}
ol.campaign-left-nav li:nth-child(2):before {
    content: '2';
}
ol.campaign-left-nav li:nth-child(3):before {
    content: '3';
}
ol.campaign-left-nav li:nth-child(1):after,
ol.campaign-left-nav li:nth-child(2):after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: -22px;
    width: 1px;
    height: 25px;
    background: #DCDCDC;
    z-index: -99;
}

.campaign-card{
    margin: 25px;
}
.help-link{
    text-align: right;
}
.campaign-card-body{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
}
.objective{
    padding: 22px;
}
.objective h4{
    font-size: 22px;
    font-weight: 600;
    color: #202020;
}
.objective p{
    color: #5A5A5A;
}
.objective-options{
    margin-bottom: 42px;    
}
.objective-options .form-check-input[type="checkbox"] {
    border-radius: 0.45em;
    width: 52px;
    height: 50px;
    padding: 0;
    margin: 0;
    background: #D9D9D9;
}
.objective-options .form-check-input:checked{
background: #4440FF;
}
.objective-options .form-check label{
    margin: 15px;
    font-size: 16px;
    font-weight: 700;
    color: #000;
}
.objective-text-field{
    padding-left: 20px;
}
.objective-text-field div input,
.objective-text-field div select{
    width: 70%;
}
.objective-text-field label{
    margin-bottom: 9px;
        margin-left: 2px;
}
.objective-button{
    padding-left: 20px;
}
.objective-button button{
    padding: 5px 25px;
    border: 1px solid #DCDCDC;
    border-radius: 5px;
    background: #FFFFFF;
    min-width: 100px;
}
.objective-button .next button {
    background: #775DA6;
    color: #fff;
}
.objective-options .form-group {
    padding:0;
}
 /* ===========END CAMPAIGN PAGE============ */

 /* =========start budget page========= */
 .target_autience select{
    width: 90% !important;
 }
 .page-content-100{
    min-height: 100% !important;
    border-radius: 25 px;
 }

 ol.campaign-left-nav li.active::before {
     /* background-color: #775DA6; */
     color: #775DA6;
     border: 1px solid #775DA6;
 }

 ol.campaign-left-nav li.pre-active::before {
     background-color: #775DA6;
     color: #fff;
 }

 ol.campaign-left-nav li.pre-active::after {
     background-color: #775DA6;
 }

.campaign-card-body.budget {
    width: 90%;
}

.budget-box {
    padding: 0 20px;
}
.budget-box p{
    margin-bottom: 20px;
}
.budget-box h4{
    font-size: 20px;
    font-weight: 600;
}
 .select-country div{
    width: 30%;
    border: 1px solid #775DA6;
    padding: 25px 10px;
    border-radius: 25px;
    text-align: center;
}
.select-country div select{
    border-radius: 20px;
    padding: 3px 10px;
}
.customer-input{
    margin-top: 40px;
}
.budget-button{
    padding-left: 3.5rem;
}
.campgain-duration{
    margin-top: 30px;
}
.campgain-duration div{
    width: 30%;
}
.campgain-duration div p{
    padding: 0;
    margin: 0;
    font-size: 10px;
    font-weight: 600;
    padding-left: 5px;
}
.campgain-duration input{
    background: #D9D9D9;
    text-align: center;
}

.budget-box p{
    padding: 0;
    margin: 10px 0 0;
    line-height: 1.2;
    font: 10px;
    width: 80%;
}
.objective-options-budget{
    padding-top: 25px;
}
 /* =========end budget page========= */

 /* ========start campain add setup============ */
.campaign-card-body-adds{
    margin-top: 0;
    width: 100%;
}

.campaign-card-body-adds input,
.campaign-card-body-adds select,
.campaign-card-body-adds textarea{
    background: #EFEEEE;
}

.budget-box div label{
    padding: 0;
    margin: 0 0 5px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #000 !important;

}

 /* ========end campain add setup============ */

 /* =======start analytics page ======== */
 .analytics .progress-bar,
 .analytics .progress-bar div span {
    background:#fff;
    color: #06152B;
    /* font-size: 26px; */
 }

 .impression-country{
    padding: 0px 0 0px 60px;
    position: relative;
    margin-bottom: 25px;
 }
 .impression-country img{
    position: absolute;
    top: 0;
    left: 0;
 }
 .impression-country p{
    padding: 0;
    margin: 0;
 }
 .impression-country p span:nth-child(2){
     color: #809FB8;
     font-size: 12px;
 }


 .sales-donat .progress-bar div span {
     color: transparent !important;
     /* font-size: 26px; */
 }
 .impression .progress-bar,
 .impression .progress-bar div span {
    /* margin-left: auto; */
    margin-right: auto;
 }

 .new-customer{
    /* padding: 20px; */
 }
 .new-customer span:nth-child(1){
    padding: 5px 35px ;
    border-radius: 15px;
 }
  .new-customer span:nth-child(2) {
      padding-left: 20px;
  }
  .new-customer span:nth-child(2) h6{
    font-size: 26px;
    color: #06152B;
  }
  .new-customer span:nth-child(2) p span {
      color: #809FB8;
      padding: 0;
      margin: 0;
  }
/* =======end analytics page ======== */

/* ==========start sales page================ */
.sales-page .card{
        box-shadow: 0 0 3px #dfdfe0;
}
  .sales-chart .apexcharts-legend.position-bottom.apexcharts-align-right,
  .sales-chart .apexcharts-legend.position-top.apexcharts-align-right {
    justify-content: flex-end !important;
    padding-right: 120px;
  }

  .sales-report>div>div{
    border: 1px solid #000;
    padding: 10px;
  }

  .sales-report table tr{
    border-bottom: 1px solid #D9E1E7;
  }
  .sales-report table tr:last-child {
      border-bottom: none;
  }
  .sales-report table tr td:nth-child(1){
    border-right:1px solid #D9E1E7;
  }
  .sales-report table tr td{
    height: 85px;
  }

  h3.target{
      padding: 20px 20px 0 0 !important;
    }
h3.target span{
    padding-top: 5px;
}
  h3.target small{
    font-size: 16px;
    padding-top: 5px !important;
  }
  .ales-chart{
    padding: 20px;
  }
/* ==========end sales page================ */


/* =============START ACCOUNT SETTINGS========== */
#settings .menu-item-top{
    background-color: transparent;
    border-radius: none;
}
#settings ul.left-sidenav-menu li:hover{
    background: transparent;
}
#settings ul.left-sidenav-menu li.active,
#settings ul.left-sidenav-menu li a.active {
    background: transparent;
    color: rgba(119, 93, 166,.6) !important;
    color: #5A5A5A !important;
    border-radius: 15px;
}

#settings ul.left-sidenav-menu li a{
    color: #5A5A5A !important;
    font-size: 14px;
}
#settings ul.nav-second-level{
    padding-left: 0;
    margin-left: 0;
}

#settings .menu-billing{
    font-size: 14px;
    font-weight: 600;
    margin: 100px 20px 10px;
    padding: 10px;
    cursor: pointer;
}
#settings .menu-billing span { 
    color: #5A5A5A;
    font-weight: 500;
}

#settings .ac-head{
    font-size: 16px;
    font-weight: 600;
    padding-right: 30px;
    color:#202020;
    margin-bottom: 10px;
}

#settings .ac-head+span {
    margin-top: 5px;
    padding: 5px 20px 0px;
    background: rgba(119, 93, 166, .2);
    border-radius: 3px;
    margin-bottom: 15px;
}
.text-right{
    text-align:right !important;
}
.shado-1{
    box-shadow: 0px 1px 1px #dfdfdf;
}
.com-info{
    padding:30px 0;
}
.com-info p{
    margin-top:10px;
}
.com-info p span{
    font-size: 14px;
    font-weight: 600;
    width: 150px;
    display: inline-block;
}
.basic-info div.row{
    padding-bottom: 20px;
}

.connected-account{
    display: inline-block;
    margin-left: 20px;
}
.connected-account h6{
    font-size: 16px;
        font-weight: bold;
        padding: 0;
        margin: 0;
}
.connected-account p{
    color: #898989;
    padding-top: 5px;
}
.basic-info .form-switch .form-check-input {
    width: 4rem;
    height: 2rem;
}
.basic-info .form-check-input:checked {
    background-color: #775DA6;
    border-color: #775DA6;
}
.btn-violate{
    background-color: #775DA6;
    border-color: #775DA6;
    color: #fff;
}
.btn-violate:hover{
    background: #674f92;
    color: #fff;
}
/* =============END ACCOUNT SETTINGS========== */

/* ========start billing============ */
/* ========start billing============ */
.bill-amount{
    background: #202020;
    border-radius: 15px;
    padding: 30px;
    color: #fff;
    
}
.bill-amount span:first-child{
    display: inline-block;
    padding: 7px 20px;
    border-radius: 5px;
    margin-right: 30px;
    background: #fff;
    color: #202020;
    font-size: 26px;
    font-weight: 600;
}

.bill-amount span:nth-child(2) h6,
.bill-amount span:nth-child(2) p {
    padding: 0;
    margin: 0;
}
.bill-amount span:nth-child(2) h6{
    font-size: 16px;
    font-weight: 600;
    color: #F3CC5C;
    margin-bottom: 10px;
}
.text-bold{
    font-weight: bold !important;
}
.text-600 {
    font-weight: 600 !important;
}
/* ========end billing============ */


/* =====start sing in======== */
.h-100vh{
    height: 100vh;
}
.bg-gradian{
    background-image: linear-gradient(#020080, #FD1392);
}
.sign-in-container{
}
.sign-in{
    margin: 50vh 5vw;
    transform: translateY(-50%);
}
.sign-in h4{
    margin-bottom: 30px;
}
.sign-in input,
.sign-in button{
    margin-bottom: 20px;
    border-radius: 5px;
    padding: 10px;
}
.sign-in p{
    font-size: 12px;
    color: #898989;
    position:relative;
}
.sign-in p.or:before{
    content:'';
    position:absolute;
    width:45%;
    height:1px;
    background: rgba(137, 137, 137, .5);
    top:50%;
    left:0;
}
.sign-in p.or:after {
    content: '';
    position: absolute;
    width: 45%;
    height: 1px;
    background: rgba(137, 137, 137,.5);
    top: 50%;
    right: 0;
}
.sign-in-with button{
    padding:5px 20px;
}
p.dont-have-ac{
    font-size: 14px;
    color:#202020;
    margin-top: 30px;
}
p.dont-have-ac a{
    margin-left:5px;
    color: #775DA6;
}
p.cauton{
    padding-left: 10px;
}
 /* =====end sing in======== */

 /* =======START ONBOARDING========= */
 h4.joined-business{
    margin-top: 30%;
    margin-left: 50%;
    color: #fff;
    transform: translateX(-20%);
 }
.company-type{
    padding-left: 0;
    margin-bottom: 15px;
}
.company-type input+label{
    border-radius: 15px;
    color: #898989;
}
.company-type input:checked+label{
    border:1px solid #775DA6;
    border-radius: 15px;
    color:#898989;
    position: relative;
}
span.label-text{
    color: #898989;
    padding-left: 10px !important;
    margin-top: 5px;
    
}
.company-type input:checked+label::before {
    content: url('../images/icons/Shape.png');
    /* url('blackCarrot.png'); */
    position: absolute;
    top: 50%;
    right: 5%;
    width: 10px;
    height: 10px;
    transform: translateY(-50%);
}
 .company-type label{
    border:1px solid #dfdfdf;
    padding: 10px;
    width: 100%;
 }
 .onboarding-change h4{
    margin: 0 !important;
 }
 .onboarding-btn-container button{
    width: 100px;
    padding: 5px;
 }
 .onboarding-country .select-country div select {
     border-radius: 20px;
     padding: 10px 10px 10px 30px;
     margin-top: 20px;
     /* height: 35px; */
 }

 .question div label{
    font-size: 10px;
 }
 /* =======END ONBOARDING========= */


 /* ======general style re-write========= */