body{
    font-family: Arial, verdina, Helvetica, sans-serif;
    box-sizing: border-box;
    margin: 10px;
    padding: 10px;
    /* color: #666; */
    /* background: #f8f8f8; */
    font-size: 90%;

}
h1{
    font-weight: bolder;
}
ul{ list-style: none;
    padding: 2px;
}

li::before {

    content: '';
    display: inline-block;
    height: 0.7em;
    width: 0.7em;
    background-image: url('../images/icon.png');
    background-repeat: no-repeat;
    background-size: contain;
    padding: 0.8px 0.8px;
    margin: 0 10px;
  }
  table{
      border-spacing: 0;
      padding-top: 10px;
  }
  .border{
      border-bottom: 1px solid rgb(196, 206, 209);
  }

  table th{
      background:#90b4d6;
      color: #f8f8f8;
      padding: 5px 2px;
      border-bottom: 2px solid #547ca0;
}
  td{
      padding: 5px 15px;
      margin: 7px 5px;
      background: rgb(224, 237, 241);
      font-size: 95%;

  }
  fieldset{
      margin: 10px 0;
      width: 30%;
      padding:0 3rem;
      height: 225px;
}

   input{ 
       width: 40%;
       float: right;
    padding: 3px;  }
select{
    float: right;
    width: 30%;
    margin-right: 48px;
    padding: 5px;
}
.option{
 
    width: 7.5%;
    float: right;
 padding: 0 10px;
 }
 :root{--grey:#547ca0;
    --white:#fff;
    --optional:#D1D1D1;
  }
.btn{
    display: flex;
    align-items: flex-end;
    width: 300px;
    height: 18vh;
    margin: auto;
}
.btn-but{
  display: flex;
 justify-content: center;
 align-items: center;
 background: none;
 color: var(--black);
 border: 2px solid black;
 text-transform: capitalize;
 font-size: 25px;
 margin: 30px auto;
 padding: 15px 25px;
 border-radius: 5px;
 position: relative;
 transition: color 0.3s ease-in-out;
 width: 180px;
 text-align: center;
 text-decoration: none;
 font-weight: 700;
}

.btn-but::before{
content: "";
position: absolute;
width: 0;height: 100%;
background: var(--grey);
top: 0;left: 0;
transition: width 0.3s ease-in-out;
z-index: -1;
}
.btn-but:hover::before{width: 100%;}

.btn-but:hover{color: var(--white);}