* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

body{
    padding:0;
}
.form-group{
   padding: .3rem;
   
}
header {
    text-align: center;
    background-color: rgb(11, 132, 212);
    color: #fff;
    font-size: 2rem;
    padding: 1.5rem;
    margin:0;
}




.form-label{
   font-size: .9rem;
   word-wrap: normal;
  
}
.add{
    width:3px;
    height:12px;
   margin-top:2rem;
   margin-left:1.5rem;
 font-size: 2rem;
 font-weight: bold;
   padding:.1rem;
   text-justify: center;
   cursor: pointer;  
}
.wrapform{
    margin:auto;
}

.btngroup{
    display: flex;
justify-items: center;
justify-content:center
}
.btngroup > .btn{
height:auto;
margin:.8rem;
}

.rmlist{
    color:rgb(176, 29, 29);
    cursor: pointer;
    font-weight: bold; 
}
form{
    display: flex;
}
.message{
    width:40%;
    font-size: 1rem;
    text-align: center;
    margin: auto;
}
.success{
    background-color: rgb(204, 252, 206);
    color:#333;
    padding:.5rem;
    border-radius: 10px;
}
.danger{
    background-color: rgb(246, 182, 154);
    color:#333;
    padding:.5rem;
    border-radius: 10px;
}
table,th, td{
    text-align: center;
    ;
}
.tdlist{
    display:none;
}
@media only screen and (max-width: 1000px) {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    form {
      display: block;
    }
    
    
    th{
        font-size: .8rem;
    }
    td{
        font-size: .8rem;
    }
    .add{
        width:3px;
        height:12px;
       margin-top:1.5rem;
       margin-left:15rem;
     font-size: 2rem;
     font-weight: bold;
       padding:.1rem;
       text-justify: center;
       cursor: pointer;  
    }
    .btngroup{
        display: flex;
    justify-items: center;
    justify-content:center
    }
    .btngroup > .btn{
    height:auto;
    margin:.8rem;
    font-size: .8rem;
    }
  }

  @media only screen and (max-width: 700px) {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    form {
      display: block;
    }
  
    th{
        font-size: .7rem;
    }
    td{
        font-size: .7rem;   
    }
    .add{
        width:3px;
        height:12px;
       margin-top:1.5rem;
       margin-left:10rem;
       font-size: 2rem;
       font-weight: bold;
       padding:.1rem;
       text-justify: center;
       cursor: pointer;
    
       
    }
    .btngroup{
        display: flex;
    justify-items: center;
    justify-content:center
    }
    .btngroup > .btn{
    height:auto;
    margin:.8rem;
    font-size: .6rem;
    }
  }

  @media only screen and (max-width: 450px) {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    form {
      display: block;
    }
    .topbar{
        font-family: 'Anton', sans-serif;
        font-size: 5rem;
        font-weight: bold;
        margin:auto;
    }
    th{
        font-size: .7rem;
    }
    td{
        font-size: .7rem;   
    }
    .add{
        width:3px;
        height:12px;
       margin-top:1.5rem;
       margin-left:6rem;
       font-size: 2rem;
       font-weight: bold;
       padding:.1rem;
       text-justify: center;
       cursor: pointer;
    
       
    }
    .btngroup{
        display: flex;
    justify-items: center;
    justify-content:center
    }
    .btngroup > .btn{
    height:auto;
    margin:.8rem;
    font-size: .6rem;
    }
  }