/* .table{
    
} */
.table{
    display: flex;
    flex-direction: column;
    align-items: center;
}
/*CHOICES*/
    .table__choice-container{
        display: none;
        justify-content: space-evenly;
        border-top: 2px solid var(--clr-slate600);
        padding: 10px 0px;
        width: 300px;
        padding-top: 25px;

    }
    .table__choice{
        text-align: center;
        width:100%;
    }
    
    .table__choice span{
        color: rgb(134, 143, 156);
        font-weight: 500;
        /* color: var(--clr-options); */
       
        padding: 5px 0px;
    }
    .table__choice span:hover{
        cursor: pointer;
         }
    .table__choice .active{
        color: rgb(255, 255, 255);
        font-weight: 500;
        /* color: var(--clr-options); */
        border-bottom: 2px solid var(--clr-info);
        padding: 5px 0px;
    }
        
/*TABLE over flow*/
.table__scroll{
    overflow-x:hidden;
    width: 300px;
    box-shadow: 0 50px 30px rgba(0, 0, 0,0.15);
   
}
.table__width{
    overflow-x:hidden;
    width: 200%;
    
}
.table__container{
    display: flex;
    justify-content:space-between;
    /* width: 100%; */
    /* border: 1px solid; */
    
}

/* TABLE STYLING */

.tables{
    border-collapse: collapse;
    width: 50%;
    margin: 25px  0;
    font-size: 0.9em;
    border-radius: 5px 5px 0 0 ;
    overflow: hidden;
}
.tables thead tr{
    background-color: var(--clr-interaction);
    color: var(--clr-light);
    text-align: left;
    font-weight: bold;
}
.tables th,.tables td{
    padding: 10px 15px;
    
}
.tables tbody tr{
    border-bottom: 1px solid var(--clr-slate600);
}
tr .cell2{
    font-style: italic;
    /* for handling the triangle of price fluctuation */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
    gap: 3px;
}
tbody tr:nth-of-type(even){
    background-color: #1e293b8a;
}
tbody tr:last-of-type{
    border-bottom: 2px solid  var(--clr-interaction);
}
/* 2xs */
@media(min-width :380px){
    .table__scroll{
        width: 400px;
    }
    .table__choice-container{
        width: 400px;
    }
}
/* xs */
/* @media(min-width :475px){
 
} */
/* s */
/* @media(min-width :640px){
   
} */
/* m */
@media(min-width :768px){
   
}
/* l */
/* @media(min-width :1024px){
   
} */
/* xl */
@media(min-width :1280px){
    .table__choice-container{
        border: none;
    }
}
/* 2xl */
/* @media(min-width :1536px){