.pswc{
	text-align: center;
	padding-bottom: 50%;
}

.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

.dha{
	float: center;
	text-align: center;
}
.dhac{
	float: center;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 10px;
}
.datepick{
  padding: 0 1rem;
}
.table{
  text-align: center;
}
.buttondate{
  border: solid 3px #9c27b0;
  padding: .2rem .3rem;
  background: transparent;
  color: #9c27b0;
  font-weight: 600;
}
.buttondate:hover{
  background-color:#9c27b0;
  padding: .4rem .4rem;
  font-weight: 600;
  color: white;
  border: none;
}

.container {
  padding: 16px;
}
.mainpanel{
	position: relative;
  float: right;
  width: calc(100% - 30%);
  padding-top:5%;
  transition: 0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1);
}
.mainpanelR{
	position: relative;
  float: right;
  width: calc(100% - 30%);
  padding-top:5%;
  transition: 0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1);
}

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.container {
  padding: 2px 16px;
}
.card-b{
	padding:2rem 1rem;
}
.btn-add{
	background-color:#9c27b0;
	padding: .5rem .5rem;
}
.btn-add i{
	color:#fff;
}
.btn-add:hover{
	background-color:#e91e63;
	padding: .5rem .5rem;
}

span.psw {
  float: right;
  padding-top: 16px;
  padding-bottom: 40px;
}










/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}