:root{
    --navy:#0b3554;
    --teal:#006d8f;
    --gray:#8d8f91;
    --line:#8f8f8f;
    --light:#efefef;
    --text:#222;
    --lightbg:#f9f9f9;
    --activitybg:#d8effc;    
    --psbg:#dffcd8;
    --link:#000c7a;
    --linkbg:#dbe7ee;
    --lightgraybodybg:#f3f3f3;
 
    --modalbg:linear-gradient(to bottom, rgba(0,0,0,0.3),rgba(255,255,255,0.9),white,rgba(255,255,255,0.9),rgba(0,0,0,0.3));

    
  /* System Typography */
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  
  /* Functional Spacing & Radii */
  --radius: 8px;
  --transition: all 0.25s ease-in-out;
  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
  --shadow-hover: 0 10px 15px -3px rgb(0 0 0 / 0.7), 0 4px 6px -4px rgb(0 0 0 / 0.7);
  }
@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
@keyframes slideOut{
  from{transform: translateX(0);}
to{transform: translateX(-100%);}
}

  *{box-sizing:border-box}
 body{
      display: flex;
  flex-direction: column;
  min-height: 100dvh;
  }
  html,body{
    margin:0;
    padding:0;
    background-color:var(--lightgraybodybg);
    color:var(--text);
    font-family:var(--font-stack)}
  main{
    flex:1;
    max-width:1000px;
    margin:0 auto;
    padding:18px;
  /*margin-top:35px;*/}

  
  input[type=text], select, input[type=date], input[type=tel], input[type=email], input[type=number], textarea{
    width:100%;
    max-width:100%;
    /*border:1px solid var(--line);*/border:none;
    outline:none;
    background:transparent;
    padding:0;
    color:#111;
    .plain{
        border:1px solid black;
    width:auto;
    padding:4px;
    border-radius:var(--radius);
    }
  }
  .req{
    color:red;
    font-weight:bold;
  }
  /*textarea{resize:none;overflow:hidden;line-height:1.15}*/
    input[type=checkbox]{width:10px;height:10px;margin:0}
 
  .hidden-diag{display:none;};

  
input[type=text].plain, input[type=date].plain, select.plain, input[type=tel].plain, input[type=email].plain, textarea.plain{
    border:1px solid black;
    width:auto;
    padding:4px;
    border-radius:var(--radius);
  }
  
  a{
  white-space:nowrap;
  border-radius:var(--radius);
  padding:3px 8px;
  font-weight:bold;
  margin:3px 3px;
  text-decoration:none;
  color:navy;
 }
 a:hover, a:focus{
  color:white;
  background-color:black;
  box-shadow:var(--shadow-hover);
 }
 header{
  width:100%; 
position:sticky;
top:0;left:0;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-around;
background-color:var(--navy);
color:var(--light);
z-index:1000;
box-shadow:var(--shadow);
/*{align-items:center;display:flex;}*/
a{color:white;}
a:hover{
background-color:white; color:var(--navy);}
h1{margin:8px;font-size:32px;letter-spacing:.2px;font-weight:700;/*a{margin:0;padding:0;}*/
}
.mobilemenu{height:100%;vertical-align:center;}
}
footer{
  width:100%;
  background-color:var(--text);
  text-align:center;
  border-top:1px solid black;
  
  padding:4px;
p,a{font-size:10px;
color:white;}
}

 dialog:modal{
    box-shadow:var(--shadow-hover);
   }
 dialog::backdrop{
  backdrop-filter: blur(4px);
  }
  table,tr,td,th .compact{
    white-space:nowrap;
    text-align:center;
  }
  fieldset{
    width:100%;
    border:none;
    padding:0;
    margin:0;
    
  }
  fieldset.plain{
      border:1px solid var(--line);
      padding:4px;
      margin:4px;
    }
  p,h1,h2,h3,h4{
  margin-top:8px;
  margin-bottom:8px;
}
img.psqr{
max-height:400px;
min-height:200px;
}
/* Container stays hidden by default, fixed to the bottom */
.cookie-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(40, 40, 40, 0.95);
  color: #ffffff;
  padding: 15px 20px;
  box-shadow: var(--shadow-hover);
  z-index: 9999;
  display: none; /* Controlled by JavaScript */
}

/* Flexbox layout for clean spacing */
.cookie-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  font-family: Arial, sans-serif;
}

.cookie-content p {
  margin: 0;
  font-size: 14px;
}

/* Button styling */
.cookie-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 8px 20px;
  cursor: pointer;
  border-radius:var(--radius);
  font-weight: bold;
  transition: background 0.3s ease;
}

.cookie-btn:hover {
  background-color: #45a049;
}
nav{
  position:fixed;
  padding-top:20px;
  top:59px;
  gap:10px;
  height:100vh;
  overflow:hidden;
  width:175px;
  left:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  background-color:white;
  z-index:999;
  border-right:1px solid var(--navy);
  box-shadow:0px 2px 10px black;
  a{
  display:inline-block;
  text-align:center;
  }
}
.mobilemenu{display:none;cursor:pointer;}
#helloUser{
  text-align:right;
  right:10px;
  font-weight:bold;
}

@media(max-width:1350px){
 .mobilemenu{
  display:block;
}
body{
main{
  padding:3px;
}
header{
  justify-content:space-between;
  h1{font-size:20px;}
}}
nav{
  top:45px;
  display:flex;
  animation: slideIn 0.25s ease-in-out forwards;
transition: display 0.25s allow-discrete;

  max-height:100vh;

}
nav.hidden{
display:none;
animation: slideOut 0.25s ease-in-out forwards;
}
@starting-style{
  nav{
    transform: translateX(-100%);
  }
}

}
  @media(max-width:800px){
    

    main{
      font-size:16px;
    }
    
    select{
      width:100%;
    }
    input[type=submit]{
      width:90%;
      margin: 0 auto;
    }
    
   .centered{
    width:100%;
    text-align:center;
   }
  
  }