* {box-sizing: border-box}
.tablink {
  background-color: #ffff;
  color: black;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 5px 60px; 
  font-size: 17px;
  /*padding: 5px 59px;*/
  /*font-size: 15px;*/
  width: auto;
  border-bottom: 1px solid #ccc;
}
.tablink:hover {
  border-bottom: 1px solid red;
}
.tabcontent {
  color: black;
  display: none;
  padding: 100px 20px;
  height: 100%;
} 
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}
img.avatar {
  width: 25%;
  border-radius:5px;
}

.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}



.tabs1 {
  float: left;
  /*border: 1px solid #ccc;*/
  background-color: #f1f1f1;
  width: 30%;
  }
  .tabs1 a {
    display: block;
    background-color: inherit;
    color: black;
    padding: 15px 15px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-size: 16px;
  }
  .tabs1 a:hover {
    background-color: #ddd;
    border-color: none;
  }
  .tabs1 a.active {
    background-color: #ccc;
    border-color: none;
  }
  .tabcontentdata {
    float: left;
    padding: 0px 12px;
    /*border: 1px solid #ccc;*/
    width: 70%;
    border-left: none;
    /*height: 225px;*/
    height: 449px;
  }