.marginauto{
    margin: auto;
}
body{
  color: rgba(54, 54, 54, 0.705);
}

table{
  border-collapse: collapse;
  height: 250px;
  margin-top: 30px !important;

    
}
table,th,td{
  border: 0.5px solid rgba(54, 54, 54, 0.192);
}
th,td{
  padding: 20px;
}
th{
  text-align: left;
  background-color: rgba(73, 72, 72, 0.061);
  color: rgba(54, 54, 54, 0.705);
}
.checkcontainer input{
    width: 100%;
    height: 40px;
    padding: 5px;
    border: 0.5px solid rgba(54, 54, 54, 0.192);
    

}
td>img{
  height: 25px;
  width: 25px;
}
td>a{
  text-decoration: none;
}
td>.save{
  font-size: 14px;
  font-weight: bold;
  border: 0.5px solid rgba(54, 54, 54, 0.192);
  width: 80px;
  text-align: center;
  padding: 5px;
}
.checkcontainer{
  border: 0.5px solid rgba(54, 54, 54, 0.192); 
    margin-top: 30px !important;  
    
}
.personalcontainer{
  border-bottom: 0.5px solid rgba(54, 54, 54, 0.192);
    width: 90%;
    margin: -10px auto 10px auto;
    background-color: #fff;
    font-size: 22px;
    color: #000;
    
}
.personalitems{
    width: 90%;
    margin: 30px auto;
    
}
.personalitems>h3{
  font-size: 15px;
  padding: 5px 0;
}
.personalitems>div>span{
  font-weight: bold;
}

.total{
  border: 0.5px solid rgba(54, 54, 54, 0.192);
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    
}

.purchasebutton{
  background-color: rgb(6, 212, 212);
  width: 130px;
  text-align: center;
  height: 40px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding: 5px;
  display: grid;
  align-items: center;
  margin: 10px 0 10px 0;
  box-shadow: 0 3px 0px 0 rgb(3, 190, 190);
}

.purchasebutton:hover{
  opacity: 0.7;
}

.total0{
  font-weight: bold;
}




/* responsive */

@media only screen and (max-width: 600px) {
    [class*="col-"] {
       width: 95%;
       margin: auto;
       
     }
     .container-2{
         margin-top: 0;
     }
     #logo{
       position: absolute;
       top: 40%;
       left: 50%;
       transform: translate(-50%,-50%);
     }
     ul{
       position: absolute;
       top: 80%;
       left: 0%;
       transform: translate(0%,-50%);
     }
     nav{
         height: 100px;
     }
    
    
   }
     
     @media only screen and (min-width: 600px )and (max-width : 767px) {
       /* For tablets: */
       .col-s-1 {width: 8.33%;}
       .col-s-2 {width: 16.66%;}
       .col-s-3 {width: 25%;}
       .col-s-4 {width: 33.33%;}
       .col-s-5 {width: 41.66%;}
       .col-s-6 {width: 50%;}
       .col-s-7 {width: 58.33%;}
       .col-s-8 {width: 66.66%;}
       .col-s-9 {width: 75%;}
       .col-s-10 {width: 83.33%;}
       .col-s-11 {width: 91.66%;}
       .col-s-12 {width: 100%;}
       #logo{
           position: absolute;
           top: 40%;
           left: 50%;
           transform: translate(-50%,-50%);
         }
         ul{
           position: absolute;
           top: 80%;
           left: 0%;
           transform: translate(0%,-50%);
           width: auto;
   
         }
         nav{
             height: 100px;
         }
        
      
       
     }
     
     @media only screen and (min-width: 768px) {
       /* For desktop: */
       .col-1 {width: 8.33%;}
       .col-2 {width: 16.66%;}
       .col-3 {width: 25%;}
       .col-4 {width: 33.33%;}
       .col-5 {width: 41.66%;}
       .col-6 {width: 50%;}
       .col-7 {width: 58.33%;}
       .col-8 {width: 66.66%;}
       .col-9 {width: 75%;}
       .col-10 {width: 83.33%;}
       .col-11 {width: 91.66%;}
       .col-12 {width: 100%;}
       .container2{display: flex;}
       .pcont{display: flex;}
      
     }