/**
* This file implements styling for menus i.e we have 
*   1. Traditional menus and 
*   2. Tabbed menus
*/
.menu {
    padding:8px;
    border:1px solid #CAD5E0 ;
    
    display:grid;
    grid-column: 1 / span 2;
    grid-template-columns: 92px repeat(7,auto);
    gap:4px;
    text-transform: capitalize;
    align-items: center;
    
}
.menu .icon {padding:4px;}
.menu .icon img {width:30px; height:30px;}
.menu .item {
    font-weight:bold;
    cursor:pointer;
    padding:4px;
    text-align: left;
   
    
   
    
    
}

.menu .sub-menu {
    
    display:none;
    position:absolute;
    
    margin-top:2px;
    min-width:10%;
    z-index:90;
    padding:8px;
    font-weight:lighter;
    text-align:left;
    align-items:left; 
    background-color: rgba(255,255,255,0.8);
    
}

.menu .item:hover .sub-menu{
    
    display:block;
    height:auto;    
}

/**
* This section shows how we use css to implement tabs i.e we will be using radio boxes and labels
*
*/
.tabs {display:grid; grid-template-columns: repeat(auto-fit,209px); gap:0px; align-content:center; 
    /* background-color: #f3f3f3; */
    padding-top:4px;
    padding-left:4px;
    padding-right:4px;
}
.tabs input[type=radio] {display:none; }
.tabs input[type=radio] + label { font-weight:lighter;  
    border:1px solid transparent;
    border-bottom-color: #CAD5E0;
    background-color: #f3f3f3;
    padding:8px;
    padding-right:10px; padding-left:10px;
    
    cursor:pointer
}
.tabs input[type=radio]:checked +label {
    background-color: #ffffff;
    border-top-right-radius: 8px; 
    border-top-left-radius: 8px;
    font-weight:bold;
    border-color: #CAD5E0;
    border-bottom-color: #FFFFFF;
}