form {
  max-width: 800px;
  margin: 10px auto;
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

label {
  display: block;
  margin-bottom: 4px;
  font-weight: bold;
  color: #333;
  font-size: 0.6rem;
}
.input-group-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:4px;
}
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
input[type="password"],
select,
textarea {
  width: 100%;
  padding: 5px;
  margin-bottom: 8px;
  border: 1px solid #ccc;
  border-radius: var(--radius);
  box-sizing: border-box; /* Ensures padding doesn't affect width */
  font-size: 0.8rem;
  color: #444;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
textarea:focus,select.focus {
  border-color: #0066cc;
  outline: none;
  box-shadow: 0 0 4px rgba(0, 102, 204, 0.2);
}

textarea {
  resize: vertical;
  min-height: 80px;
}

input[type="submit"] {
  background-color: #0066cc;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius:var(--radius);
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  width: 100%;
  transition: background-color 0.2s ease;
}

input[type="submit"]:hover {
  background-color: #004c99;
}

.table-wrapper{
    min-width:90%;
    max-height:80%;
    max-width:100%;
    overflow-x:auto;
    white-space:nowrap;
    
}

table.compact{
  border-collapse: collapse;
  font-size:small;
    max-width:inherit;
    overflow:auto;

}

 .compact tr,td {
    border:1px solid gray;
    white-space:nowrap;
    padding:4px;
    text-align:center;
    background-color:white;
}

.compact th{
    color:white;
    background-color:var(--navy);
    padding:3px;
}
table button{
    font-size:smaller; margin:2px;
}
.alert{
  color:rgb(225, 0, 0);
  font-weight:bold;
  text-transform:uppercase;
}
tr:nth-child(even) td{background-color: var(--lightbg);}
.activity-grid{
display:grid;
grid-template-columns:1fr 1fr;
grid-template-areas:"link link" "location dates" "organization leader" "approvals approvals";
gap:3px;
padding:4px;
background-color:white;

 .link{  grid-area:link; a{display:block; width:100%;}}.location{ grid-area:location;}.dates{grid-area:dates;}
 .description{grid-area:description;}.purpose{grid-area:purpose;}
 .organization{grid-area:organization;}.leader{grid-area:leader;}.approvals{grid-area:approvals;}
 
}.title{color:var(--teal);margin-left:20px;}
.activity-element{
  padding:5px;
}
.activity-label{
  font-weight:bold;
  font-size:small;
  display:block;
  width:100%;
}
.activityplans{
  display:flex;
  flex-direction:row;
  justify-content:space-around;
  flex-wrap:wrap;
  gap:15px;
  
}
section.activity{
  border:3px solid var(--navy);
  width: 450px;
  border-radius:var(--radius);
  background-color:var(--activitybg);
  margin-bottom:25px;
  box-shadow:var(--shadow);
  padding-bottom:8px;
  > p,h4,h2{
    padding:5px;
  }
  .del{
   /* border-top-left-radius:var(--radius);
    border-top-right-radius:var(--radius);*/
    text-align:right;
    padding:10px;
    background-color:var(--navy);
    a{color:white;}
  }
  
}
 div.tabs{border-bottom:1px solid black;
padding-left:10px;}
div.tab{
  padding:6px 15px 6px 15px;
  cursor:pointer;
background-color:var(--teal);
color:white;
  border:1px solid black;
  border-top-right-radius:var(--radius);
  border-top-left-radius:var(--radius);
  display:inline-block;

}
div.tab.active{
  background-color:white;
  font-weight:bold;
  border-bottom:2px solid white;
  color:black;
  margin-bottom:-1px;
}
.pselement.qr{
  display:none;
}
.activity-element.link, .activity-element.permission-slips{
  display:none;
}
.activity:hover{
    box-shadow:var(--shadow-hover);
  }
section.just-slips{
  background-color:var(--psbg);
}


.centered-main{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:75%;
    text-align:center;
    flex-direction:column;
    gap:10px;
    max-width:800px;
    margin: 0 auto;
    p{
    display:block;
 text-align:justify;
 padding:0.25em;
}
label{
  text-align:left;
}
 }
 .ps-wrapper{
  padding:0;
  padding-bottom:10px;
 }
 .permissionslip{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  width:100%; 
  background-color:var(--light);
  justify-content:flex-start;
  background-color:white;
  gap:20px;
  margin-bottom:15px;
  padding:10px;
  border-top:4px solid var(--navy);
  border-bottom:4px solid var(--navy);
  .pstitle{
    font-weight:bold;
    color:var(--navy);
    width:100%;
  }
 .pselement{
  .pse-label{
    font-weight:bold;
    display:block;
      width:100%;
      font-size:small;
  }
  .pse-value{
color:black;
  }
  
 }
 .wide{
    width:100%;
  }
}
 input[type=radio], input[type=checkbox]{
  transform:scale(1.25);
 }
 @media(max-width:1350px){
.activityplans{
  flex-direction:column;
  .activity{
    width:100%;
  }
}
form{
  margin:0;
  width:100%;
  max-width:100%;
}
.input-group-2{
  display:flex;
  flex-direction:column;
}
.table-wrapper{
  width:auto;
  max-width:95vw;
  margin:0;
}
 }
@media(max-width:800px){
    
    
    tr{
        margin-top:5px;
        margin-bottom:5px;
    }
    form{
      margin:0;
      max-width:100vw;
    }
}