.form-layout {
    border:1px solid #def;
    border-radius:5px;
    padding:10px 3px 10px 3px;
    background-color:#fcfcfc;
}

.form-layout .header, .form-layout .footer{
    border-bottom:1px solid #eee;
    padding:5px;
}
.form-layout .buttons{
    padding:10px
}
.form-layout fieldset{
    border:0;
    padding:5px;
    margin:0; 

}
form .buttons *{
    margin-right:30px;
}

field{ 
    display:block;
 width:100%;
    padding:20px 3px; 
    border-bottom:1px solid #eee;
}

field.long-text{
    grid-column: 1 / -1;
}
field label{
     
    font-size: 0.8em;
    color: #999; 
}

field[required] label:after{
    content:" * ";
    color: #ff7700;
}
button, input[type=submit]{
    background-color: #369;
    color: #fff;
    border: 2px ridge #eee;
    border-radius:10px;
    font-weight:bold;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
    font-size:1.2em;
    padding:5px 15px 5px 15px;
}
button:hover, input[type=submit]:hover{
    background-color: #39c;
}

input:not([type='checkbox'])
{ 
    border-radius: 8px; 
    background-color: #fff;
    color: #123;
    min-height: 1.5em;
    line-height: 1.5em;
    font-size: 1em;  
   
}
input:not([type='checkbox']), textarea{
    background-color:#fff;
    border:2px solid #abc;
    outline:none; 
    padding:6px;
}
input:not([type='checkbox']):focus, textarea:focus{
    border:2px solid #39c;
}
input[disabled], textarea[disabled]{
    background-color:#ddd;
} 

textarea{ 
    min-height:200px; 
    
}
field input:not([type='checkbox']), field textarea, field drop-down{
   display:block;
   width:98%; 
} 
.form-layout textarea.long-text{ 
    min-height:400px; 
}

 
ol.list-layout {
    list-style-position:inside;
    margin:3px;
    padding:3px;
}



   ol.list-layout > li {
         
        padding-bottom: 5px;
        border-bottom: 1px dashed #e9eff0;
        border-radius: 5px;
        break-inside: avoid-column;
    }

    ol.list-layout > li > dl  {
        font-size: 0.9em;
        display:grid;
        grid-template-columns:70px auto;
    } 
    ol.list-layout > li > dl > dt {
        color: #998;
        font-size: 0.8em;
        padding-left: 10px;
        width: 90px;
    }
.list-layout nav{
    padding:5px 10px;
    border:1px solid #eee;
    border-radius:3px;
    display:block;
    text-align:right;
    background-color:#c9cfd9;
    border-radius:5px;
    font-size:0.9em;
}

.list-layout nav a{
    padding:3px 7px 3px 7px;
    border:1px solid #ddd;
    border-radius:4px;
    margin:0; 
    text-decoration: none; 
    background-color:#eee;
    color:#367;
}


.list-layout nav a:hover{
    background-color:#39C;

}

table.list-layout thead{
    background-color:#567;
    color:#fff;
    text-align: left;
}


dl.layout dt{
    color:#888;
    font-weight:bold;
    margin-top:10px;
    border-top:1px solid #eee;
    
}
  

@media screen and (min-width:700px ) {
    ol.list-layout {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(400px, auto));
          column-gap: 10px;
          justify-content: space-between;
      }
      input,textarea:not(.long-text),drop-down{
        max-width:500px;
      }
       
     
  }