/* body {background:#474c55;} */
pre {
    text-align: start;    
}

* {
      font-family: "Segoe UI Light", Arial, sans-serif;
}

body {
    margin:0px;
    text-align: center;
    background:#ffffff;
    color: black;
    
}
.centered {
    max-width:800px;
    margin:auto;
    
}

#nav-menu {
    display: flex;
    background: #444;
    padding: 10px;
}
#nav-menu a {
    text-decoration:none;
    text-align: left;
    padding:10px;
    width:100%;
    color: black;
}


/* Pages */

.page-logo {
    padding:10px;
}
.page-logo img {
    max-width: 100%;    
}




#group img {

    max-width: 100%;
    height: auto;
}
#group .details {
    margin:5px;
    padding:5px;
}

#group .social {
    display: flex;
    gap:10px;
    justify-content: space-evenly;
    margin: 20px 0;
}

#group .social-icon img {
   height: 30px;
}


#company-list {
    border:1px solid #ddd;
    margin:10px;
}
    .company-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap:5px
    }
    
    @media (min-width: 768px) {
        .company-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);

        }
    }    
  
      @media (min-width: 768px) {
          
        #company-list {
            border:1px solid #ddd;
            margin:10px;
            padding:10px;
        }  
        .company-grid {
            display: flex;
            flex-wrap: wrap; 
            justify-content: center;
        }
        .company-grid-item {
            flex: 1 1 33%;
            max-width:33%;

        }
    }    
  
    
    .company-grid-item {
        margin:5px;
        padding:10px;
    border:1px solid #ddd;
    }    
    .company-grid-item img {
        object-fit: cover;
        max-width: 100%;
    }   

@media (min-width: 768px) {
    .main-body {
        margin: auto;
        width: 50%;
    }
}


/* Staff Grid */

    .staff-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap:5px
    }
    .staff-grid-item {
        margin:5px;
        border: 1px solid #dddddd;
    }    
    .staff-grid-item img {
        object-fit: cover;
        max-width: 100%;
    }

    @media (min-width: 768px) {
        .staff-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
        }
    }


      @media (min-width: 768px) {
        .staff-grid {
            display: flex;
            flex-wrap: wrap; 
            justify-content: center;
        }
        .staff-grid-item {
            flex: 1 1 22%;
            max-width:25%;

        }
    }    
  



    #staff-img,
    #staff-details,
    #staff-contact,
    #staff-social,
    #staff-address  
    {
        margin:20px;
    }
    
    
/* Documents */

#documents {
    margin: 20px 10px;
}

sl-button.download-button::part(base) {
font-size:1.5em;
}

#documents sl-drawer {
     text-align: start;   
}
#documents-list {
    text-align: start;
    font-size:20px;
}

.document-link {
    padding:10px;
}
.document-link sl-icon {
        margin-right:15px;
}

/* Forms */

.form-checklist {
    margin: 10px 0px;
    text-align:start;
}

/* HTML Render */

.html-render {

}

.html-render h1,
.html-render h2,
.html-render h3,
.html-render h4,
.html-render h5 {
   margin-bottom: .5em;
}

.html-render p{
   margin-bottom: 1em;
}

.html-render ul,
.html-render ol
{
   margin-left:3em;
    margin-bottom: 1.5em;
    padding-left: 1em;
}

.html-render ol li[data-list="bullet"]  {
    list-style-type: disc;
}

.html-render blockquote {
    border-left: 5px solid #eeeeee;
    padding: 0 20px;
    margin-left: 3em;
    margin-right: 6em;
    margin-bottom: 1em;
    
}