.show-date-range {

    cursor: pointer;
}

#calendar-icon {
    cursor: pointer;
    transition: transform 0.3s ease; 
}

.rotate {
    transform: rotate(180deg);
}

.date-range-input {
    display: none; 
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 10px;
}

.visible {
    display: block; /* Show input when visible class is added */
}

.date-card {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    gap: 5px;
}

input#dateRangePicker {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    margin-top: 10px;
}
div#dateRangeContainer {
    width: 325px;
    height: 100px;
    background-color: #f2f2f2;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 9;
}
.month-date-range{
    position: relative;
}

/* ---------------------------------------------- */
select.select-list {
    border: none;
    background: transparent;
    width: 250px;
}
select:focus-visible {
    outline: 0px;
}

/* --------------------------------------------------- */
.chart-bottom a {
    text-decoration: none;
    color: black;
    font-size: 14px;
}
.chart-bottom a i {
    margin-right: 10px;
}


/* -------------------------------------------------- */



body{
    background-color: #E3E7EA;
}
h3{
    font-size: 20px;
    font-weight: 400;
}
h3.w-line{
    position: relative;
}
h3.w-line::after {
    content: '';
    width: calc(100% + 80%);
    height: 1px;
    background: #ffffff;
    position: absolute;
    top: 52%;
    left: 127px;
}
.boxes {
    grid-template-columns: repeat(5, 1fr);
}
.boxes> div {
    border-right: 1px solid rgba(128, 128, 128, 0.234);
}
.boxes> div:last-child {
    border-right: none;
}
.table.chart-table td, .table.chart-table th {
    padding: 10px 20px;
    font-size: 13px;
}



/* variations */

.variation .boxes {
    grid-template-columns: repeat(3, 1fr);
}

/* Revenue */
.revenue .boxes {
    grid-template-columns: repeat(4, 1fr);
}
.rev tr td:first-child, .rev tr.tab-head td:first-child {
    background: #F0F0F0;
}
.rev tr.tab-head td {
    background: #F8F9FA;
}


/* Category */
.search-category {
    grid-template-columns: 10% 90%;
}
.search-category button {
    height: min-content;
}


/* Coupons */
.coupons .boxes {
    grid-template-columns: repeat(2, 1fr);
}