:root {
    --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

.repl-div {
  margin-left: 4em;
}
#com-label{
    height: 2em;
    vertical-align: bottom;
}
#com-div, .com-list-div {
    font-family: var(--bs-font-sans-serif);
}
#com-title {
    color: #81C3EB;
     font-family: var(--bs-font-sans-serif);
     border-bottom: solid darkgray;
  margin-bottom: 1em;
  padding-bottom: 1em;
}
#form-div , .reply-form-div{
  color: darkgray;
}
#form-div {
    display: none;
}
.form-row {
  display: flex;
}
#name, #title, #comment, #rating {
    width: 90%;
    border:0;
    margin: .2em;
    border-radius: 1em;
    height: 2em;
    padding: 0.3em;
    padding-left: 0.3em;
    padding-left: 0.8em;
    background-color: #e0e0e0;
}
#comment{
   height: 4.5em; 
}

.com-label {
    width: 8em;
    display: inline-block;
    text-align: right;
    padding-right: 3px;
    min-width: fit-content;
}
.headline {
    margin-bottom: 0;
    color: #81C3EB;
    font-size: 18px;
    font-weight: 600;

}
.headline.reply-hdln {
  margin-top: 0;
}
.reply-hdln{
    
    
}
.l-comment {
    margin-top: 0;
    margin-bottom: 0;
    background-color: #eaeaea;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    background: var(--color-background);
    color: var(--font-color) !important;
    overflow: auto;
}
.com-btn{
    float:right;
    border: 0;
    border-radius: 1rem;
    background-color: #81C3EB;
    padding: 0.3rem 1.8rem;
    color: white;
    font-size: larger;
}
.com-btn
{
  z-index: 7;
  position: relative;
}
.com-list-div{
  position: relative;
  border-bottom: solid darkgray;
  margin-bottom: 1em;
  padding-bottom: 1em;
}