html, body{
    background:var(--background);
    height:100%;
    width:100%;
    font-family: "Inter", sans-serif;
    line-height:1.8;
    font-size: 14px;
    font-weight: 600;
    -webkit-font-smoothing: antialiased; /* For macOS/iOS */
    -moz-osx-font-smoothing: grayscale; /* For Firefox on macOS */
    text-rendering: optimizeLegibility; /* Prioritizes text clarity */
    font-smooth: always; /* Non-standard, but can help in some browsers */
}

.row{
    margin-bottom: 20px;
}

.theme-btn{
    background: var(--themeColor);
    border:1px solid var(--themeColor);
    color: var(--btnColor);
    font-size:13px;
    border:none;
    border-radius:4px;
    padding:7px 15px;
    font-weight: 600 !important;
    font-family: "Inter";
    transition:.5s;
    opacity:1;
}

.theme-btn:hover{
    opacity:0.8;
}

.table-btn{
    background: var(--border);
    color: var(--text);
    font-size: 14px;
    border: none;
    border-radius: 4px;
    padding: 7px 15px;
    font-weight: 600 !important;
    font-family: "Inter";
    font-size: 12px;
    width: 75px;
}

th i{
    font-size: 14px;
    position: relative;
    left: 5px;
    top: 1;
    cursor: pointer;
    opacity: .6;
}

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

p{
    margin-top: 20px;
}

.input{
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 4px;
    outline: none;
    color: var(--text) !important;
    padding: 8px 20px;
    width: 100%;
    font-size: 14px;
    font-family: "Inter";
    height: 60px;
    font-weight: 600;
}

.rotate-180 {
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

input::placeholder, textarea::placeholder {
    color: #888;
    font-style: italic;
    opacity: 0.7;
    font-weight: 400;
  }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    background-color: var(--background) !important; /* Apply your background color */
    -webkit-box-shadow: 0 0 0px 1000px var(--background) inset; /* Fix the background color */
    transition: background-color 5000s ease-in-out 0s;
    color: var(--text) !important; /* Force white text color */
    -webkit-text-fill-color: var(--text) !important; /* Force white text color */
    font-weight: 700 !important; /* Attempt to make text bold */
}
  

a{
color:var(--themeColor);
}

/* Hide arrows in number input */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.container{
    max-width:unset;
}

.main {
    position: relative;
    width: auto;
    height: 100%;
    margin-top: 85px;
    margin-left: 90px;
    margin-right: 15px;
    transition: opacity 0.3s ease;
}

.mod-box{
    background: var(--mod);
    padding:20px;
    border-radius: 4px;
    color:var(--text);
    position:relative;
}

.data-box{
    height:110px;
}

.chart-box, .table-box{
    height:500px;
}

tr:nth-child(even) {
    background-color: var(--tableRowBG); 
}
tr:nth-child(odd) {
    background-color: var(--mod); 
}

.table-box{
    overflow:auto;
}

.filter-row{
    position:relative;
}

.box-filters,.box-filters-ad, .support-list{
    float:right;
}

.box-filters li{
    float: left;
    margin-left: 15px;
    transition: .5s;
    background: var(--mod);
    font-size: 12px;
}

.box-filter-title{
    position: absolute;
    left: 12px;
    top: 4px;
    color: var(--text);
    background: none;
    padding: 0;
    border-radius: 4px;
    box-shadow: none;
    font-size: 15px;
}


.filter-btn, .av-filter-btn, .gm-filter-btn, .g4-filter-btn, .cc-btns, .filter-btn-ad{
    padding: 7px 12px;
    box-shadow: 1px 0px 3px var(--shadow);
    border-radius: 4px;
    cursor: pointer;
    color: var(--text);
}

.filter-clicked{
    background:var(--themeColor) !important;
    color:var(--clicked) !important;
}

.box-filters li:hover, .av-filter-btn:hover, .gm-filter-btn:hover, .g4-filter-btn:hover, .cc-btns:hover{
    background:var(--themeColor);
    color:var(--clicked);
}

.db-data{
    font-family: "Inter", sans-serif;
    font-size:27px;
    color:var(--brightText);
    font-weight:900;
}

.db-perc{
    font-size: 15px;
    position: relative;
    top: -5px;
}

.perc-up{
    color:var(--themeColor);
}

.perc-arrow{
    margin-left: 20px;
    font-size: 22px;
    margin-right: 5px;
}

.down-carat{
    position:relative;
    top:-2px;
}
.table {
    color: var(--text);
    font-size: 13px;
}

table {
    padding: 20px;
    width: 100%;
    border-radius: 2px;
    margin-bottom: 50px;
    margin-top: 20px;
    border-collapse: collapse;
    /* Remove table-level borders */
    border: none;
}

table th {
    text-align: left;
}

table td, table th {
    text-align: left;
    vertical-align: middle;
    border: none;
}

table td {
    height: 50px;
    padding: 20px 10px !important;
    transition: .5s;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    color: var(--text);
    font-size: 13px;
    opacity: 0.9;
}

/* Remove default borders from all table elements */
tbody, td, tfoot, th, thead, tr {
    border: none;
    padding-top:20px !important;
}

/* Add top and bottom border to thead */
thead {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* Remove any conflicting border styles */
.table>:not(:last-child)>:last-child>* {
    border-bottom: none;
    padding-bottom: 20px;
    font-weight: bold;
    opacity: 1;
}

table>:not(caption)>*>* {
    padding: .5rem .5rem;
    background-color: none !important;
    border: none !important;
    box-shadow: none !important;
}
.cb-title{
    color:var(--brightText);
    font-weight: 600;
}

.db-title{
    font-weight: 600;
    opacity:0.7;
}

.table-perc-up{
    background: var(--chartColor);
    color: var(--clicked);
    padding: 9px;
    border-radius: 100px;
    width: 85px;
    position: relative;
    display: block;
    text-align: center;
}

.table-perc-down{
    background: var(--background);
    color: var(--text);
    padding: 9px;
    border-radius: 100px;
    width: 85px;
    position: relative;
    display: block;
    text-align: center;
}

.table-dd-ico {
    opacity: 0 !important;
    transition:.5s;
}

.table tr:hover .table-dd-ico {
    opacity: 1 !important;
}

.campaign-table tr{
    cursor:pointer;
}