.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; } /** * TAB SPECIFICATIONS WITH RADIO BUTTONS AND LABELS */ .tab-content table { width:99%; border-radius: 8px; padding:8px; border:1px solid #d3d3d3;} .tab-content table tr:nth-child(even) {background-color: #f3f3f3;} /* .tab-content {width:80%;} */ .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; }