@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&family=Public+Sans:wght@200;300;400;500;600;700&display=swap');
.bottom_box_nav{
    padding: 40px 43px 40px 42px !important;
    width: 100% !important;
    max-width: 100% !important;
 
}
.inner_content_section{
    background-color: #fff;
}
.bottom_box_nav .left_side_box h2{
    color: var(--gray-900, #191B1C);
    font-family: Public Sans;
    font-size: 34px;
    font-style: normal;
    font-weight: 600;
    line-height: 23px; /* 67.647% */
}
.btn_new_dash{
    border-radius: 160px;
border: 1px solid #D2D2D2 !important;
background: var(--gray-white, #FFF);
color: var(--gray-900, #191B1C);
font-family: Public Sans;
font-size: 15px;
font-style: normal;
font-weight: 600;
line-height: 40px; /* 266.667% */
text-transform: capitalize;
padding: 0px 30px;
margin-bottom: 0 !important;
}

.left_side_box .button_group{
    margin-top: 22px !important;
    gap: 16px;
    display: flex;
}

.btn_p{
    border-radius: 30px;
    background: #E3E3E3;
box-shadow: unset !important;
color: #191B1C;
font-family: Public Sans;
font-size: 15px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 133.333% */
text-transform: capitalize;
display: flex;
align-items: center;
}

.btn_new_dash.active{
    border-radius: 160px;
background: #006A0D;
color: var(--gray-white, #FFF);
font-family: Public Sans;
font-size: 15px;
font-style: normal;
font-weight: 600;
line-height: 40px; /* 266.667% */
text-transform: capitalize;
}

.ranges li{
 background-color: unset !important;
 color: #191B1C !important;
font-family: Public Sans;
font-size: 15px !important;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 133.333% */
border: 0 !important;
}
.ranges li.active{
    color: #191B1C !important;
font-family: Public Sans;
font-size: 15px !important;
font-style: normal;
font-weight: 600;
background-color: #c4c0c03d !important;
line-height: 20px; /* 133.333% */
}
.ranges ul {
    margin: 0 !important;
}
button.applyBtn.btn.btn-sm.btn-success{
    background: #006A0D !important;
    color: #fff !important;
}


.background_inner{
    background: #F6F7F8;
    padding: 35px 41px 26px 40px;
}
.card_box_content{
    padding: 28px 24px 24px 24px !important;
    border-radius: 8px;
background: #FFF;
}

.card_iconss .icon{
    border-radius: 100px;
    background: #F0F6FF;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px ;
    height: 70px;
}
.card_iconss .icon1{
    border-radius: 100px;
    background: #FFFAC2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px ;
    height: 70px;
}
.card_iconss .icon2{
    border-radius: 100px;
    background: #E7F7EF;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px ;
    height: 70px;
}
.card_iconss .icon3{
    border-radius: 100px;
    background: #FDEDED;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px ;
    height: 70px;
}

.numbers p{
    color: var(--gray-600, #626C70);

/* Label/Regular */
font-family: Public Sans;
font-size: 12px  !important;
font-style: normal;
font-weight: 500;
line-height: 100%; /* 12px */
text-transform: uppercase !important;
white-space: nowrap;
}
.numbers h5{
    color: var(--calendar-label-black, #191B1C);
font-family: Public Sans;
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 32px; /* 100% */
}

.numbers h5 span{

font-family: Public Sans;
font-size: 15px !important;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 133.333% */
}

.numbers h6{
    color: #7A8CA8;
font-family: Public Sans;
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 153.846% */
white-space: nowrap;
}


/* .card_red .numbers h5 span{
    color: var(--danger-500, #E84646) !important;
} */

.rate_section{
    background: #F6F7F8;
    padding: 26px 41px 26px 40px;
}

.rate_section .bounce_rate{
    /* padding: 24px; */
    background: #fff;
}

.bounce_rate .sub_heading p{
    color: var(--gray-900, #191B1C);
font-family: Public Sans;
font-size: 22px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 109.091% */
}
.bounce_rate .sub_heading{
background: var(--gray-white, #FFF);
box-shadow: 0px -1px 0px 0px #E5E7E8 inset;
padding: 12px 24px 12px 24px;
}


.rate_box_line{
    padding: 29px 24px;
}

.rate_box_line h4{
    color: var(--calendar-label-black, #191B1C);
    font-family: Public Sans;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px; /* 100% */
}

.rate_box_line .span_text{
    color: var(--success-500, #0FAF62);
    font-family: Public Sans;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 125% */
}

.chart_section,
.chart_n_box,
.chart_n_box1{

    border-radius: 8px;
background: #FFF;
}

.background_spacing{
    padding: 0px 41px 0px 40px;
}
.top_chart_head h6{
    color: var(--calendar-label-black, #191B1C);
font-family: Public Sans;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 32px; /* 133.333% */
}

.list_boxes ul li .dark_bg{
    width: 18px;
    height: 10px;
    background: #E0A34C;
}

.list_boxes ul li .light_bg{
    width: 18px;
    height: 10px;
    background: #FFD599;
}

.list_boxes ul li {
    color: #000;
    font-family: Public Sans;
    font-size: 15px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}


.chart_n_box .new_head h3,
.chart_n_box1 .new_head h3{
color: var(--gray-900, #191B1C);
font-family: Public Sans;
font-size: 22px;
font-style: normal;
font-weight: 500;   
line-height: 24px; /* 109.091% */
}

.chart_n_box .new_head,
.chart_n_box1 .new_head{
background: var(--gray-white, #FFF);
box-shadow: 0px -1px 0px 0px #E5E7E8 inset;
padding: 12px 24px 12px 24px !important; 
}
.numbers h5 span{
    white-space: nowrap;
}

.daterangepicker.ltr {
    border-radius: 8px;
    border: 1px solid var(--gray-100, #E5E7E8);
    background: var(--gray-white, #FFF);
    
    /* dropdown-shadow */
    box-shadow: 0px 4px 24px 0px rgba(25, 27, 28, 0.06);
}
.daterangepicker td.in-range{
    border-radius: 4px !important;
background: #EDFBF4 !important;
}

.daterangepicker td.active, .daterangepicker td.active:hover{
    border-radius: 4px 0px 0px 4px !important;
background: var(--brand-primary, #006A0D) !important;
}
.daterangepicker_input {
    border-radius: 4px;
    border: 1px solid var(--gray-100, #E5E7E8);
    background: var(--gray-white, #FFF);
}

.daterangepicker .calendar th, .daterangepicker .calendar td {
    color: var(--gray-900, #191B1C);
    text-align: center;
    font-family: Public Sans;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 142.857% */
}

.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date{
    color: var(--gray-300, #B0B7BA);
text-align: center;

/* Body/Regular/400 */
font-family: Public Sans;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 32px; /* 142.857% */
}
.daterangepicker.ltr .calendar.left{
    margin-right: 25px !important;
}

.daterangepicker.ltr .calendar.right {
    margin-left: 5px !important;
}
.daterangepicker.show-calendar .calendar {
    width: 100% !important;
}


.daterangepicker {
    width: 634px !important;
    padding: 24px !important;
    margin-top: 10px !important;
}

.ranges {
    width: 100% !important;
    text-align: end !important;
}

button.applyBtn.btn.btn-sm.btn-success {
    background: #006A0D !important;
    color: #fff !important;
    padding: 13px 27px !important;
    color: #FFF;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 125% */
}

button.cancelBtn.btn.btn-sm.btn-default{
    padding: 13px 19px !important;  
    border-radius: 8px;
border: 1px solid #C7C7C7;
background: #FFF;
color: #8D8D8D;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 125% */
box-shadow: none !important;
}
.range_inputs {
    display: flex !important;
    align-items: center;
    justify-content: end;
    gap: 18px !important;
    margin: 10px 0 0 0;
}

.daterangepicker td.available:hover,
.daterangepicker th.prev.available, .daterangepicker th.available:hover {
    border-radius: 100px !important;
    background: #EDFBF4 !important;
}
.daterangepicker td.available:hover, .daterangepicker th.available:hover,
.daterangepicker th.next.available{
    border-radius: 100px !important;
    background: #EDFBF4 !important;  
}

.daterangepicker td.active, .daterangepicker td.active:hover {
    background: #006A0D !important;
    color: #fff !important;
    border-radius: unset !important;
}
td.active.start-date.available {
    border-radius: 4px 0px 0px 4px !important;
    background: var(--brand-primary, #006A0D);
}

td.active.end-date.in-range.available {
    border-radius: 0px 4px 4px 0px !important;
}
.calendar-table {
    margin-top: 12px !important;
}

.color-green {
    color: var(--success-500, #0FAF62) !important;
}

.color-red {
    color: var(--danger-500, #E84646) !important;
}


.daterangepicker .input-mini{
    color: #191B1C !important;
    font-family: Public Sans;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.daterangepicker .daterangepicker_input i {
    display: none;
    position: unset !important;
}
.daterangepicker .input-mini {
    padding: 0 6px 0 13px !important;
}

.daterangepicker:after,
.daterangepicker.opensleft:before {
 content: unset !important;
 }








/* RESPONSIVE CSS START */
@media (min-width:1200px) and  (max-width:1399px){
    /* .daterangepicker .calendar{
        max-width: 100% !important;
    } */
    .range_inputs {
        padding: 0px 24px;
    }
    .btn_new_dash {
        font-size: 14px;
        padding: 0px 20px;
    }

    .left_side_box .button_group {
        gap: 10px;
    }
    .bottom_box_nav .left_side_box h2 {
        font-size: 30px;
        line-height: 27px;
    }
    .numbers h5 {
        font-size: 22px;
        line-height: 32px;
    }
    .card_box_content {
        padding: 18px 16px 16px 16px !important;
    }
    .bottom_box_nav {
        padding: 20px 44px 17px 42px !important;
    }
    .card_iconss .icon1,
    .card_iconss .icon,
    .card_iconss .icon2,
    .card_iconss .icon3 {
        width: 45px;
        height: 45px;
    }
    .numbers p {
        font-size: 10px !important;
    }
    .numbers h5 span {
        font-size: 11px !important;
        line-height: 20px;
        white-space: nowrap;
    }
    .top_chart_head h6 ,
    .chart_n_box .new_head h3, .chart_n_box1 .new_head h3,
    .bounce_rate .sub_heading p{
        font-size: 20px;
        line-height: 24px;
    }

        .rate_box_line h4 {
            font-size: 25px;
            line-height: 32px;
        }
    
        .rate_box_line {
            align-items: center !important;
        }
        .numbers h6 {
            font-size: 11px;
        }
        .numbers h5 span{
            white-space: nowrap;
        }
}
@media (min-width:992px) and  (max-width:1199px){
    /* .daterangepicker .calendar{
        max-width: 100% !important;
    } */
    .range_inputs {
        padding: 0px 24px;
    }
    .daterangepicker:after {
        display: none;
     }
    .btn_new_dash {
        font-size: 13px;
        padding: 0px 20px;
    }
    .btn_new_dash {
        font-size: 14px;
        padding: 0px 20px;
    }
    .bottom_box_nav{
     flex-wrap: unset !important;
    }
    .left_side_box .button_group {
        gap: 7px;
    }
    .bottom_box_nav .left_side_box h2 {
        font-size: 30px;
        line-height: 27px;
    }
    .numbers h5 {
        font-size: 22px;
        line-height: 32px;
    }
    .card_box_content {
        padding: 18px 16px 16px 16px !important;
    }
    .bottom_box_nav {
        padding: 20px 44px 17px 42px !important;
    }
    .card_iconss .icon1,
    .card_iconss .icon,
    .card_iconss .icon2,
    .card_iconss .icon3 {
        width: 55px;
        height: 55px;
    }
    .numbers p {
        font-size: 10px !important;
    }
    .numbers h5 span {
        font-size: 11px !important;
        line-height: 20px;
    }
    .top_chart_head h6 ,
    .chart_n_box .new_head h3, .chart_n_box1 .new_head h3,
    .bounce_rate .sub_heading p{
        font-size: 20px;
        line-height: 24px;
    }

        .rate_box_line h4 {
            font-size: 25px;
            line-height: 32px;
        }
    
        .rate_box_line {
            align-items: center !important;
        }
    
    
}
@media (min-width:768px) and  (max-width:991px){
    /* .daterangepicker .calendar{
        max-width: 100% !important;
    } */
    .range_inputs {
        padding: 0px 24px;
    }
    button.cancelBtn.btn.btn-sm.btn-default {
        line-height: 17px;
    }
        button.applyBtn.btn.btn-sm.btn-success,
        button.cancelBtn.btn.btn-sm.btn-default {
            font-size: 12px;
            padding: 10px 20px !important;
        }
    .dropdown .dropdown-toggle:after, .dropup .dropdown-toggle:after, .dropstart .dropdown-toggle:after, .dropend .dropdown-toggle:after {
        font-size: 12px !important;
    }
    .btn_new_dash {
        font-size: 13px;
        padding: 0px 27px;
    }
    .dropdown-toggle::after{
        border-top: 0 !important;
    }
    .top_navbar {
        flex-wrap: unset !important;
    }
    .bottom_box_nav {
        padding: 30px 30px 17px 40px !important;
    }
    .bottom_box_nav .left_side_box h2 {
        font-size: 30px;
        line-height: 23px;
    }
    .background_inner {
        padding: 17px 27px 0px 27px;
    }
    .card_box_content {
        margin-bottom: 20px;
    }
    .numbers h5 {
        font-size: 22px;
        line-height: 32px;
    }
    .top_chart_head h6, .chart_n_box .new_head h3, .chart_n_box1 .new_head h3, .bounce_rate .sub_heading p {
        font-size: 15px;
        line-height: 32px;
    }
    .list_boxes ul li {
        font-size: 13px !important;
        line-height: 20px;
    }    
    .rate_box_line h4 {
        font-size: 19px;
        line-height: 32px;
    }
    .rate_box_line .span_text {
        font-size: 13px;
        line-height: 20px;
    }
    .rate_box_line {
        align-items: baseline !important;
    }
    .bounce_rate .sub_heading ,
    .rate_box_line{
        padding: 12px 24px 12px 10px;
    }
    .rate_section {
        padding: 20px 41px 26px 40px !important;
    }
    
    
}
@media (min-width:320px) and  (max-width:767px){
    .daterangepicker .calendar{
        max-width: 100% !important;
    }
    .btn_p {
        font-size: 12px;
    line-height: 12px;
    padding: 11px 19px;
    }
    .daterangepicker .calendar th, .daterangepicker .calendar td {
        font-size: 12px;
    }
    

button.cancelBtn.btn.btn-sm.btn-default {
    line-height: 17px;
}
    button.applyBtn.btn.btn-sm.btn-success,
    button.cancelBtn.btn.btn-sm.btn-default {
        font-size: 12px;
        padding: 10px 20px !important;
    }
    .range_inputs {
        padding: 0px 13px !important;
    }
    .daterangepicker {
        width: 93% !important;
        padding: 24px !important;
        margin-top: 3px !important;
    }
    .btn_new_dash,
    .btn_new_dash.active{
        line-height: 29px;
    }
    .practice_patient_box {
        gap: 10px !important;
    }
    .dropdown .dropdown-toggle:after, .dropup .dropdown-toggle:after, .dropstart .dropdown-toggle:after, .dropend .dropdown-toggle:after {
        font-size: 12px !important;
    }
    .inner_content_section .bottom_box_nav {
        padding: 24px 26px 0px 26px !important;
    }
    .bottom_box_nav .left_side_box h2 {
        font-size: 27px !important;
    }
    .dropdown-toggle::after{
        border-top: 0 !important;
    }
    .btn_new_dash {
        font-size: 13px !important;
        padding: 0px 18px !important;
    }
    .left_side_box .button_group {
        gap: 7px !important;
    }
    .background_inner {
        padding: 18px 20px 15px 20px !important;
    }
    .numbers h5 {
        font-size: 20px !important;
        line-height: 27px !important;
    }
    .numbers h5 span {
        font-size: 14px !important;
        line-height: 20px;
    }
    .card_box_content {
        margin-bottom: 10px;
    }
    .background_spacing {
        padding: 0px 20px 0px 20px;
    }
    .top_chart.d-flex.align-items-center.justify-content-between {
        flex-direction: column;
        align-items: baseline !important;
    }
    .top_chart_head h6,
    .chart_n_box .new_head h3, .chart_n_box1 .new_head h3,
    .bounce_rate .sub_heading p {
        font-size: 18px;
        line-height: 32px;
    }
    .chart_section, .chart_n_box, .chart_n_box1 ,
    .chart_n_box .new_head, .chart_n_box1 .new_head{
        margin-bottom: 10px;
    }
    .rate_section {
        padding: 2px 20px 20px 20px !important;
    }
    .rate_box_line h4 {
        font-size: 22px;
        line-height: 14px;
    }
    .rate_section .bounce_rate {
        margin-bottom: 15px;
    }
    
    

}