dashboard.css

.maingrid {
    display: grid;
    border: 2px solid #181818;  
    border-radius: 16px;
    overflow: hidden;
    grid-template-columns: 50% 50%;
    grid-auto-rows: 40vh 40vh; /* adjusted for full view with other elements on 16:9, no scroll */
    grid-gap: 1px;
    background-color: #181818;
    width: max(1200px, 92vw);
    place-content: center;
    margin-inline: auto;
}


@media ( max-width: 1200px ) { /* fill more of screen at smaller sizes */
    .maingrid {  
        width: 98vw;
    }
  }
  

@media ( max-width: 750px ) { /* mobile view */
    .maingrid {  
      grid-template-columns: 1fr;
      grid-template-areas: " item1 "
                           " item3 "
                           " item2 "  
    }
  }
  
.section {
    
    border: 1px solid #181818; 
    background-color: #f8f9fb;
    text-align: center;
    padding-top: 10px;
}

body {  
    font-family: Arial, Helvetica, sans-serif;
    background-color: white;
    align-items: center;
    display: grid;
} 
.section::-webkit-scrollbar {
    width: 20px;
    padding-right: 5px;
}

.section::-webkit-scrollbar-track {
    border-radius: 8px;
}


.infolist {
    max-height: 35vh;
    overflow: auto;
    /* float:left;
    clear:left; */
}

#category {
    text-align: center;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

#subhead {
    text-align: center;
    padding: .5em;
    border: 0;
    margin-bottom: .5em;
    display: block;
}

h6 { 
    border: 0;
    padding: 0;
    margin: 0;
}

#toggleData {
    display: block;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: .25em;
}

.errormessage{
    color:red;
    font-size: large;
}

.invisible {
    display: none !important;
}