.form-table.appointment-boffin
{
	 background: white;
	 margin-top: 0.5em;
	 border-collapse: inherit !IMPORTANT;
	 padding: 0px 6px !IMPORTANT;
  
	 padding-left:20px;
}

.formall
{
	background: #fff;
	padding-top:20px;
	padding-left:20px;
	padding-bottom:20px;
	  box-shadow: 0px 0px 15px rgb(0 0 0 / 20%);
	 width:50%;
	 	margin-top:5px;
}

.form-table.appointment-boffin th
{
		width:100px;
}


.notification .form-table.appointment-boffin th
{
	width:400px !important;
}


.formall select
{
	width:10em;
}

.appointment-info
{
	color:green;
}

#myBtn
{
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
}

#myBtn2
{
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
}

#myBtn3
{
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
}

#myBtn4
{
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
}

.create-appoint
{
    padding: 13.1px;
    font-size: 16.1px;
    box-shadow: 3px -4px 21px rgb(0 0 0 / 50%);
	cursor:pointer;
}

.create-appoint:hover
{

	padding: 13px;
    font-size: 16px;
    box-shadow: 3px 4px 21px rgb(0 0 0 / 50%);
}

/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
   
  bottom: 23px;
  right: 28px;
  width: 280px;
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}

.list-table
{
    background: white;
    margin-top: 0.5em;
    border-collapse: inherit !IMPORTANT;
    padding: 0px 6px !IMPORTANT;
    padding-left: 20px; 
	width:100%;
}

.list-table th
{
  padding-left: 20px; 
  padding-top: 15px; 
  padding-right: 20px; 
  padding-bottom:15px; 
 border: 1px solid gray;
     text-align: left;
	     font-size: 17px;
}
.list-table td
{
  padding-left: 20px; 
  padding-top: 25px; 
  padding-right: 20px; 
  padding-bottom:20px; 
 border: 1px solid gray;
  font-size: 17px;
}

.list-table-tr
{
 border-bottom: 1px solid gray;	
}

 .fa-trash
{
    color: #d11a2a;
    background: transparent;
    border: none;
	    font-size: 17px;
}

.fa-trash:hover
{
    color: #000;
    background: transparent;
    border: none;
	cursor:pointer;
}


.fa-edit
{
  padding-left:5px;	
}

 .fa-edit:hover
{
 color: #000;
}

.greentext
{
	 color:green;
	 font-size:20px;
}

#message
{
    position: fixed;
    background: white;
    width: 50%;
    padding: 15px 18px;
    border: 1px solid green;
	    box-shadow: 0px 0px 15px rgb(0 0 0 / 20%);
		z-index:111111;
}


.navtop {
    background-color: #3b4656;
    height: 60px;
    width: 100%;
    border: 0;
}
.navtop div {
    display: flex;
    margin: 0 auto;
    width: 800px;
    height: 100%;
}
.navtop div h1, .navtop div a {
    display: inline-flex;
    align-items: center;
}
.navtop div h1 {
    flex: 1;
    font-size: 24px;
    padding: 0;
    margin: 0;
    color: #ebedee;
    font-weight: normal;
}
.navtop div a {
    padding: 0 20px;
    text-decoration: none;
    color: #c4c8cc;
    font-weight: bold;
}
.navtop div a i {
    padding: 2px 8px 0 0;
}
.navtop div a:hover {
    color: #ebedee;
}
 

.calendar {
    display: flex;
    flex-flow: column;
}
.calendar .header .month-year {
    font-size: 20px;
    font-weight: bold;
    color: #636e73;
    padding: 20px 0;
}
.calendar .days {
    display: flex;
    flex-flow: wrap;
}
.calendar .days .day_name {
    width: calc(100% / 7);
    border-right: 1px solid #2c7aca;
    padding: 20px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    color: #818589;
    color: #fff;
    background-color: #448cd6;
}
.calendar .days .day_name:nth-child(7) {
    border: none;
}
.calendar .days .day_num {
    display: flex;
    flex-flow: column;
    width: calc(100% / 7);
    border-right: 1px solid #e6e9ea;
    border-bottom: 1px solid #e6e9ea;
    padding: 15px;
    font-weight: bold;
    color: #7c878d;
    cursor: pointer;
    min-height: 100px;
}
.calendar .days .day_num span {
    display: inline-flex;
    width: 30px;
    font-size: 14px;
}
.calendar .days .day_num .event {
    margin-top: 10px;
    font-weight: 500;
    font-size: 14px;
    padding: 3px 6px;
    border-radius: 4px;
    background-color: #f7c30d;
    color: #fff;
    word-wrap: break-word;
}
.calendar .days .day_num .event.green {
    background-color: #51ce57;
}
.calendar .days .day_num .event.blue {
    background-color: #518fce;
}
.calendar .days .day_num .event.red {
    background-color: #ce5151;
}
.calendar .days .day_num:nth-child(7n+1) {
    border-left: 1px solid #e6e9ea;
}
.calendar .days .day_num:hover {
    background-color: #fdfdfd;
}
.calendar .days .day_num.ignore {
    background-color: #fdfdfd;
    color: #ced2d4;
    cursor: inherit;
}
.calendar .days .day_num.selected {
    background-color: #f1f2f3;
    cursor: inherit;
}


.right-timeplots24
{
	display:none;
	width:200px;
	float:left;
	border:1px solid;
	    margin-top: 72px;
}

.right-timeplots24 li
{
 list-style: none;
 padding-left:10px;
  padding-top:10px;
}


/* The container */
.container-calander {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container-calander input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container-calander:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container-calander input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container-calander input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container-calander .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

 .right-slots{
    position: absolute;
    background: #fff;
    width: 500px;	 
 }
 
 	.mew
		{
  width: 49px !IMPORTANT;
    font-size: 0px !IMPORTANT;
    height: 44px !IMPORTANT;
    border: 2px solid green !IMPORTANT;
    -webkit-appearance: checkbox !IMPORTANT;
}

.full-width-table
  {
	 width:100%;
	}
	
	.days-name
	{
		font-size:18px;
		font-weight:bold;
	}
	
	.time-name
	{
		font-size:18px;
		font-weight:bold;
		    
	}
	
	
	.days-name
	{
		text-transform:uppercase;
	}
	
 .unique-table tr { display: block; float: left; }
 .unique-table th, td { display: block; }
 .unique-table th
 {
   
    width: 113px;
    text-align: center;
    height: 67px;
    border-bottom: 1px solid;
    border-top: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;

 }
 
 
 /* The wed (background) */
.wed {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99999999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* wed Content */
.wed-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}
 
 
.closesun {
    color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.closesun:hover,
.closesun:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}


.closemon {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.closemon:hover,
.closemon:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.closetue {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.closetue:hover,
.closetue:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.closewed {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.closewed:hover,
.closewed:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.closethu {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.closethu:hover,
.closethu:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.closefri {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.closefri:hover,
.closefri:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.closesat {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.closesat:hover,
.closesat:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.wed-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.wed-body {padding: 2px 16px;}

.wed-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}




/* The sun (background) */
.sun {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99999999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* sun Content */
.sun-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.sun-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.sun-body {padding: 2px 16px;}

.sun-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}


 
/* The mon (background) */
.mon {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99999999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* mon Content */
.mon-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.mon-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.mon-body {padding: 2px 16px;}

.mon-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}
 
 
  
/* The tue (background) */
.tue {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99999999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* tue Content */
.tue-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.tue-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.tue-body {padding: 2px 16px;}

.tue-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}
 
 
 
 
/* The thu (background) */
.thu {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99999999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* thu Content */
.thu-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.thu-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.thu-body {padding: 2px 16px;}

.thu-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}
 
 
 
/* The fri (background) */
.fri {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99999999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* fri Content */
.fri-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.fri-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.fri-body {padding: 2px 16px;}

.fri-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}
 

 
/* The sat (background) */
.sat {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99999999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* sat Content */
.sat-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.sat-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.sat-body {padding: 2px 16px;}

.sat-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}
 

.stylepart #capacity
{
	    height: 50px;
    width: 150px;
}


  
/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.sun-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.sun-body {padding: 2px 16px;}

.sun-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}
 
.plans-appointment {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;

  max-width: 970px;
  padding: 30px 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #fff;
  border-radius: 20px;
  -webkit-box-shadow: 0px 8px 10px 0px #d8dfeb;
  box-shadow: 0px 8px 10px 0px #d8dfeb;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.plans-appointment .plan input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.plans-appointment .plan {
  cursor: pointer;
  width: 10.5%;
  margin-bottom:10px;
}

.plans-appointment .plan .plan-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 2px solid #e1e2e7;
  border-radius: 10px;
  -webkit-transition: -webkit-box-shadow 0.4s;
  transition: -webkit-box-shadow 0.4s;
  -o-transition: box-shadow 0.4s;
  transition: box-shadow 0.4s;
  transition: box-shadow 0.4s, -webkit-box-shadow 0.4s;
  position: relative;
}

.plans-appointment .plan .plan-content img {
  margin-right: 30px;
  height: 72px;
}

.plans-appointment .plan .plan-details span {
    margin-bottom: 7px;
    margin-top: 6px;
    display: block;
    font-size: 18px;
    line-height: 24px;
    color: #252f42;
	margin-left: 6px;
}

.container-appointment .title-appointment {
  font-size: 16px;
  font-weight: 500;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  color: #252f42;
  margin-bottom: 20px;
}

.plans-appointment .plan .plan-details p {
  color: #646a79;
  font-size: 14px;
  line-height: 18px;
}

.plans-appointment .plan .plan-content:hover {
  -webkit-box-shadow: 0px 3px 5px 0px #e8e8e8;
  box-shadow: 0px 3px 5px 0px #e8e8e8;
}

.plans-appointment .plan input[type="radio"]:checked + .plan-content:after {
  content: "";
  position: absolute;
  height: 8px;
  width: 8px;
  background: #216fe0;
  right: 20px;
  top: 20px;
  border-radius: 100%;
  border: 3px solid #fff;
  -webkit-box-shadow: 0px 0px 0px 2px #0066ff;
  box-shadow: 0px 0px 0px 2px #0066ff;
}

.plans-appointment .plan input[type="radio"]:checked + .plan-content {
  border: 2px solid #216ee0;
  background: #eaf1fe;
  -webkit-transition: ease-in 0.3s;
  -o-transition: ease-in 0.3s;
  transition: ease-in 0.3s;
}

@media screen and (max-width: 991px) {
  .plans-appointment {
    margin: 0 20px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding: 40px;
  }

  .plans-appointment .plan {
    width: 100%;
  }

  .plan.complete-plan {
    margin-top: 20px;
  }

  .plans-appointment .plan .plan-content .plan-details {
    width: 70%;
    display: inline-block;
  }

  .plans-appointment .plan input[type="radio"]:checked + .plan-content:after {
    top: 45%;
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    transform: translate(-50%);
  }
}

@media screen and (max-width: 767px) {
  .plans-appointment .plan .plan-content .plan-details {
    width: 60%;
    display: inline-block;
  }
}

@media screen and (max-width: 540px) {
  .plans-appointment .plan .plan-content img {
    margin-bottom: 20px;
    height: 56px;
    -webkit-transition: height 0.4s;
    -o-transition: height 0.4s;
    transition: height 0.4s;
  }

  .plans-appointment .plan input[type="radio"]:checked + .plan-content:after {
    top: 20px;
    right: 10px;
  }

  .plans-appointment .plan .plan-content .plan-details {
    width: 100%;
  }

  .plans-appointment .plan .plan-content {
    padding: 20px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
  }
}

/* inspiration */
.inspiration {
  font-size: 12px;
  margin-top: 50px;
  position: absolute;
  bottom: 10px;
  font-weight: 300;
}

.inspiration a {
  color: #666;
}
@media screen and (max-width: 767px) {
  /* inspiration */
  .inspiration {
    display: none;
  }
}



.dateslected
{
      font-size: 20px;
    font-weight: 500;
    padding-left: 9px;
}	
 
.plan-content.disabledslot
{
    background: #bab6bf;
	border:1px solid #bab6bf !IMPORTANT;
}

#dateslected
{
  margin-bottom:5px;	
   margin-top:5px;
}

#dateslected2
{
   margin-bottom:5px;	
   margin-top:5px;	
}

#dateslected3
{
   margin-bottom:5px;	
   margin-top:5px;	
}

#dateslected4
{
   margin-bottom:5px;	
   margin-top:5px;	
}

#dateslected5
{
   margin-bottom:5px;	
   margin-top:5px;	
}

#dateslected6
{
   margin-bottom:5px;	
   margin-top:5px;	
}

#dateslected7
{
  margin-bottom:5px;	
   margin-top:5px;	
}

#dateslected8
{
  margin-bottom:5px;	
   margin-top:5px;	
}


 
.calendar{
  color: #fff;
  margin: 10px auto;
  background: #04b6e2;
  padding: 60px 40px 80px 40px;
  width: 95%;
  max-width: 600px;
  
  border-radius: 5px;
  box-shadow: 0px 2px 6px rgba(2,2,2,0.2);
  position: relative;
}
.calendar__title{
  text-align: center;
}
.calendar--day-view{
  position: absolute;
  border-radius: 3px;
  top: -2.5%;
  left: -2.5%;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,1);
 box-shadow: 3px 12px 5px rgba(2,2,2,0.16);
  z-index: 2;
  overflow: hidden;
  transform: scale(0.9) translate(30px,30px);
  opacity: 0;
  visibility: hidden;
/*   border-radius: 5px; */
  display: none;
  align-items: flex-start;
  flex-wrap: wrap;
}
.day-view-content{
  color: #222;
  width: 100%;
  padding-top: 55px;
}
.day-highlight, .day-add-event{
  padding: 8px 10px;
  margin: 12px 15px;
  border-radius: 4px;
  background: #e7e8e8;
  color: #222;
  font-size: 14px;
  font-weight: 600;
  font-family: "Avenir", sans-serif;
}
.row{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.row .qtr{
  width: 40%;
}
.row .half{
  width: 100%;
}
@media (min-width: 800px){
  .row{
    flex-wrap: nowrap;
  }
  .row .half{
    width: 35%;
  }
  .row .qtr{
    width: 25%;
  }
}

.day-add-event{
  background: #04b6e2;
  color: #fff;
  padding: 16px;
  display: none;
  transform: translateY(-15px);
  opacity: 0;
}
.day-add-event[data-active="true"]{
  display: block;
  animation: popIn 250ms 1 forwards;
}
.add-event-label{
  padding: 10px 0;
  font-size: 18px;
  font-family: 'Avenir', sans-serif;
  color: #fff;
  font-weight: 400;
  font-size: 12px;
  color: rgba(255,255,255,0.8);
}
.add-event-edit{
  display: block;
  margin: 4px 0;
  max-width: 70%;
  border-bottom: 2px solid #fff;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}
.add-event-edit--long{
  max-width: 90%;
}

input.add-event-edit{
  border: none;
  border-bottom: 2px solid #fff;
  background: transparent;
  outline: none;
  font: inherit;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}
.add-event-edit--error, input.add-event-edit--error{
  border-color: #ff5151;
  animation: shake 300ms 1 forwards;
}
@keyframes shake {
  20%, 60%{
    transform: translateX(4px);
  }
  40%, 80%{
    transform: translateX(-4px);
  }
}
input.add-event-edit::-webkit-input-placeholder {
   color: #fff;
}

input.add-event-edit:-moz-placeholder { /* Firefox 18- */
   color: #fff;  
}

input.add-event-edit::-moz-placeholder {  /* Firefox 19+ */
   color: #fff;  
}

input.add-event-edit:-ms-input-placeholder {  
   color: #fff;  
}
.event-btn{
  padding: 3px 8px;
  border: 3px solid #fff;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  width: 65px;
  margin: 5px 0;
  text-align: center;
}

.event-btn--save{
  border-color: #fff;
   background: #74c500;
  color: #fff;
  border-color: transparent;
}
.event-btn--save:hover{
  box-shadow: 0px 2px 4px rgba(2,2,2,0.2);
}
.event-btn--cancel{
  background: #ff5151;
  color: #fff;
  border-color: transparent;
}
.event-btn--cancel:hover{
  box-shadow: 0px 2px 4px rgba(2,2,2,0.2);
}
/* .add-event-btn:hover, .add.event-btn:focus{
  background: #00258e;
  box-shadow: 0px -1px 2px rgba(3,2,2,0.2);
} */
.day-highlight .day-events-link{
  border-bottom: 2px solid #222;
  padding: 0;
  cursor: pointer;
}
#add-event{
  color: #04b6e2;
  border-color: #04b6e2;
}
.day-view-exit{
  position: absolute;
  top: 24px;
  line-height: 1em;
  left: 22px;
  font-size: 22px;
  color: #252525;
  font-family: 'Avenir', sans-serif;
  font-weight: 800;
  cursor: pointer;
  opacity: 0;
  animation: popIn 200ms 1 forwards;
  text-transform: uppercase;
}
.day-view-date{
  position: absolute;
  top: 19px;
  right: 22px;
  text-align: right;
  font-size: 22px;
  font-family: 'Avenir', sans-serif;
  font-weight: 800;
  color: #393939;
  border-bottom: 2px solid #222;
  cursor: pointer;
}
.day-inspiration-quote{
  position: absolute;
/*   top: 90px; */
  margin-top: -40px;
  left: 10%;
  width: 80%;
  height: calc(100% - 110px);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1px;
  color: #ddd;
  line-height: 1.1em;
  font-family: 'Avenir', sans-serif;
  z-index: -1;
}
.day-event-list-ul{
  list-style: none;
  margin: auto;
  width: 95%;
  padding: 0;
  max-height: 300px;
  overflow: auto;
}
.day-event-list-ul li {
  padding: 10px;
  margin: 10px 0;
/*   background: #04b6e2; */
/*   box-shadow: 0px 1px 1px  rgba(2,2,2,0.5); */
  position: relative;
}
.event-dates small{
  font-size: 0.65em;
  color: #444;
}
.event-dates{
  font-weight: 800;
  font-family: 'Avenir', sans-serif;
  color: #04b6e2;
  font-size: 18px;
  text-transform: lowercase;
/*   position: relative; */
}
.event-delete{
  position: absolute;
  right: 10px;
  top: 0px;
  font-size: 12px;
  color: #f25656;
  cursor: pointer;
}
.event-name{
  font-size: 19px;
  font-family: 'Avenir', sans-serif;
  color: #222;
  padding:10px;
  background: #f7f7f7;
  margin: 2px 0;
  display: block;
  text-transform: initial;
}
.calendar--day-view-active{
  animation: popIn 200ms 1 forwards;
  visibility: visible;
  display: flex;
  transition: visibility 0ms;

}
.calendar--view{
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  width: 100%;
}
.cview__month{
  width: 100%;
  text-align: center;
  font-weight: 800;
  font-size: 22px;
  font-family: 'Avenir', sans-serif;
  padding-bottom: 20px;
  color: #222;
  text-transform: uppercase;
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-around;
}
.cview__month-last,.cview__month-next,.cview__month-current{
  width: 33.33333%;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  color: #222;
}
.cview__month-last:hover,.cview__month-next:hover{
  color: #fff;
}

.cview__month-current{
  font-size: 22px;
  cursor: default;
  animation: popIn 200ms 1 forwards !Important;
  transform: translateY(20px);
  opacity: 0;
  position: relative;
}
.cview__month-reset{
  animation: none;
}
.cview__month-activate{
  animation: popIn 100ms 1 forwards;
}
.cview--spacer, .cview__header, .cview--date{
  width: 14.28571428571429%;
  max-width: 14.28571428571429%;
  padding: 10px;
  box-sizing: border-box;
  position: relative;
  text-align: center;
  overflow: hidden;
  text-overflow: clip;
  font-size: 14px;
  font-weight: 900;
}
.cview--date{
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
}
.has-events::after{
  border-radius:100%;
  animation: popIn 200ms 1 forwards;
  background: rgba(255,255,255,0.95);
  transform: scale(0);
  content: '';
  display: block;
  position: absolute;
  width: 8px;
  height: 8px;
  top: 8px;
  left: 12px;
  
}
.cview--date:hover::before{
  background: rgba(255,255,255,0.2);
}
.cview--date.today{
  color: #111;  
}
.cview--date.today::before{
  animation: popIn 200ms 1 forwards;
  background: rgba(255,255,255,0.2);
  transform: scale(0);
}
@keyframes popIn{

  100%{
    transform: scale(1);
    opacity: 1;
  }
}
.cview--date::before{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  transform: scale(0.8);
  z-index: 0;
}
 
.container-appointment button
{
	margin-top:12px;
}

#style-section-tb th
{
	width: 320px;
}

#basic-changes th
{
	width:250px;
}

.data-th
{
	font-weight: 400;
	line-height: 28px;
}

.shortcode_code
{
 background:#f0f0f1;
 color: green;
}

.form-group
{
    margin-bottom: 15px;
}

#mysun
{
	max-width:100% !Important;
}