body, *{
  padding:0px;
  margin:0px;
  box-sizing: border-box;
}
.calendar
{
  background-color: white;
  padding: 20px;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.4);
}

.calendar .dropdown
{
  display: none;
  position: absolute;
  background-color: rgba(11, 0, 32);
  color: #1caff6;
  text-align: center;
  font-size: 14pt;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  width: 120px;
  left: 0px;
  z-index: 2000;
}

.calendar .dropdown .dropdown-item
{
  cursor:pointer;
  opacity: .7;
  transition: .5s opacity;
}

.calendar .dropdown .dropdown-item:hover
{
  opacity: 1;
}

.calendar .years
{
  display:none;
}

.calendar .title
{
  text-align:center;
  font-size:20pt;
}

.calendar .calendar-btn
{
  float: left;
  background-color: #24aeff;
  color: white;
  text-align: center;
  font-size: 14pt;
  padding-top: 5px;
  padding-bottom: 5px;
  position: relative;
  /* width: 20%;  */
  cursor: pointer;
  transition: .5s background-color;
}

.calendar .calendar-btn:hover{
  background-color:#1f71a1;
}

.calendar-btn {
	box-shadow: 0px 1px 0px 0px #f0f7fa;
	background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
	background-color:#33bdef;
	border-radius:6px;
	border:1px solid #057fd0;
	/* display:inline-block; */
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px;
	text-decoration:none;
	text-shadow:0px -1px 0px #5b6178;
}
.calendar-btn:hover {
	background:linear-gradient(to bottom, #019ad2 5%, #33bdef 100%);
	background-color:#019ad2;
}
.calendar-btn:active {
	position:relative;
	top:1px;
}

        

.calendar .year-btn
{
  float:right;
}

.calendar .calendar-dates .days .day
{
  float:left;
  width: 12%;
  margin: 1%;
  /* padding: 1%; */
  font-size:12pt;
  text-align:center;
  border-radius: 10px;
  border: solid 1px #ddd;
  color: #222;
  height: 50px;
  padding-top: 12px;  
}
.clinic-on{
  background-color: rgb(187, 255, 198);  
  cursor: pointer;
}
.clinic-on:hover{
  background-color: rgb(74, 255, 104);
}
.not-available{
  background-color: rgba(255, 45, 45, 0.6);
  cursor: default;
}

.calendar .calendar-dates .days .day.blank
{
  background-color: white;
  border:none;
}

.calendar .calendar-dates .days .day.selected
{
  background-color: #3c00aa;
  color: white;
  cursor:pointer;
  opacity: .5;
  transition: .5s opacity;
}

/* .calendar .calendar-dates .days .day.selected:hover
{
  opacity: 1;
} */

.calendar .calendar-dates .days .day.label
{
  height: 40px;
  background-color: white;
  color: black;
  border:none;
  font-weight:bold;
}

.clear{
  clear:both;
}

#new-form{
  background-color: rgb(58, 58, 58);
  border: 2px solid rgb(27, 0, 0);
  color: #fff;
  margin: 20px 0px 50px 0px;
  padding: 20px;
}

#new-form .disabled{
  background-color: #acacac;
}

.option-disabled{
  color: #acacac;
  text-decoration: line-through;
}

.slots{
  color:#2c2c2c; 
  font-weight:bold;
}

.heading{
  font-size: 20px;
}
.sub-heading{
  font-size: 15px;
}

.contact{
  border: 1px solid rgb(32, 17, 17);
  padding: 20px;
  border-left: 10px solid rgb(44, 0, 0);
  background-color: rgba(0, 0, 0, 0.363);
}

@media only screen and (max-width: 960px) {
  .calendar{
      width: 100%;
      margin: 0px;
      margin: 0px;
      box-sizing: border-box;
      position: relative;
      left: 0px;
  }
}

@media only screen and (max-width: 480px){
  .heading{
    font-size: 16px;
  }
  .sub-heading{
    font-size: 13px;
  }
}