:root{
  --lightningcss-light:initial;
  --lightningcss-dark: ;
  color-scheme:light dark
}
@media (prefers-color-scheme:dark){
  :root{
    --lightningcss-light: ;
    --lightningcss-dark:initial
  }
}
h1{
  text-align:center;
  font-size:3rem
}
details[name=broker-group]{
  cursor:pointer;
  border:1px solid #ccc;
  border-radius:10px;
  margin-bottom:1rem;
  padding:1rem
}
details[name=broker-group] #card{
  justify-content:space-between;
  align-items:flex-start;
  display:flex
}
details[name=broker-group] .name{
  text-align:center;
 font-weight:700
}
details[name=broker-group] #notes-section{
  flex-direction:column;
  align-items:center;
  display:flex
}
details[name=broker-group] #notes-section textarea{
  width:100%;
  height:100px;
  margin-bottom:10px
}
details[name=broker-group] #notes-section #save-button{
  cursor:pointer;
  border:none;
  border-radius:10px;
  align-self:flex-end;
  padding:.5rem 1rem;
  font-size:.75rem
}
.note-group{
  scrollbar-width:thin;
  max-height:5rem;
  list-style-type:none;
  overflow-y:auto
}
.note-group li{
  margin-bottom:.5rem
}
.note-group li .note-link{
  cursor:pointer;
  background:0 0;
  border:none
}
@media screen and (max-width: 600px) {
  details[name="broker-group"] {
    #card {
      flex-direction: column;
      align-items: center;
    }
    #notes-section{
      width: 100%;
    }
  }