#exampleModal{
    background: rgba(0,0,0,0.4);
}
#exampleModal .modal-content {
    box-shadow: none;
    border: 0;
    border-radius: 0;
}
.modal
{
    z-index: 9999999 !important;
}

.wgl-calendar-slot-setting{
	max-width: 800px;
	margin:50px auto;

}

#request-app{

	width: 50%;
	margin:10px 0;
	float: left;
}

#dates{

	width: 50%;

	margin:10px 0;

	float: left;

	padding-left: 30px;

}

#dates h1{

	font-size: 16px;

	text-transform: capitalize;

	margin-top: 0;

	line-height: 43px;

	margin-bottom: 15px;

	font-weight: 700;

}


#dates ul{

	flex-flow: nowrap;

	display: flex;

	justify-content: center;

	/*align-items: center;*/

	flex-wrap: wrap;

	margin: 0;

	padding:0;

}

#dates ul li {

	/*max-width: 15.6666%;*/

	flex: 0 0 15.6666%;

	display: block;

	/*float: left;*/

	margin: 0 1% 1% 0;

	list-style-type: none;

	padding: 10px 5px;

	background: #fff;

	color: #7e7e7e;

	background: #f3f3f4;

}

#dates ul li.fullwidth{

	flex:0 0 100%;

	text-align: center;

}

#dates ul li span {

	color: #3c3c3c;

	font-weight: bold;

}

#dates ul li span.slot{

	text-align: center;

	margin-bottom: 10px;

	display: block;

}

#dates ul li span.room{

	display: block;

	font-weight: 400;

	cursor: pointer;

	padding: 5px;

	text-align: center;

	font-size: 12px;

}

#dates ul li span.room:hover, #dates ul li span.room.active{

	background: #cfcfda;

}

#request-appointment{

	/*width: 700px;

	float: left;*/

}

#request-appointment h1{
    font-family: "Fahkwang",Sans-serif;
	color: #3c3c3c;
    letter-spacing: 1px;
	font-weight: bold;
    margin-top: 0;
    margin-bottom: 20px;

}



.form-block-inner{

	/*overflow: auto;*/

	width: 100%;

	float: left;

}



.form-block-inner::after {

  content: "";

  display: block; 

  clear: both;

}

.field-wrap.half {

	width: 49%;

	margin-right: 2%;

	float: left;

	margin-bottom: 2rem;

	position : relative ;

}

.field-wrap.half.last{

	margin-right: 0;

}
.field-wrap label.error {
    text-transform: none;
    font-weight: 300;
    font-size: 10px;
    line-height: 12px;
    color: red;
    position: absolute;
    top: 70px;
    left: 0;
}
.field-wrap input.error
{
    border:1px solid red;
}
.field-wrap label{

	margin-bottom: .7rem;

	text-transform: capitalize;
    
    font-size: 15px;

	display: block;
    
    letter-spacing: 1px;
    
    font-family: "Helvetica W01",Sans-serif;

}

.field-wrap input, .field-wrap select{

	width: 100%;

	border: 1px solid #3c3c3c;

	background: #fff;

	padding: 5px 10px;

	letter-spacing: .05rem;

	color: #000;

	outline: none;

	height: 40px;

	font-size: 15px;
    
    font-family: "Helvetica W01",Sans-serif;
    
    border-radius: 0;

}
.save-change-status.error {
    color: red;
}
/* calendar */

table.calendar {

	border: 1px solid #999;

	font-size: 15px;

	margin: 18px 0;

	width: 100%;

}

.white-version table.calendar{

	border:none;

}

tr.calendar-row {

}

td.calendar-day {

	height: 40px;

	/*font-size: 11px;*/

	position: relative;

}





td.calendar-day-np {

	background: #eee;

	min-height: 80px;

}

* html div.calendar-day-np {

	height: 40px;

}

td.calendar-day-head {

	background: #FFFF00;

	color: #000;

	font-weight: bold;

	text-align: center;

	width: 120px;

	padding:10px 5px;

	border-bottom: 1px solid #000;

	border-top: 1px solid #000;

	border-right: 1px solid #000;

}

.white-version td.calendar-day-head{

	background: #fff;

	border:none;

}

div.day-number {

	/*background: #fff;*/

	/*padding: 5p;x*/

	color: #000;

	font-weight: bold;

	height: 40px;

	line-height: 40px;

    /*float: right;

    */

    /*margin: -5px -5px 0 0;

    */

    width: 100%;

    text-align: center;

    cursor: pointer;

}

div.day-number:hover,

div.day-number a:hover{

	cursor: pointer;

}

div.day-number a{

	color: #000;

	line-height: 40px;

	display: block;

}


.calendar-event{

	height: 40px;

	display: none;

}

.calendar-event a{

	display: block;

	color: #000;

	line-height: 40px;

	text-align: center;

	text-decoration: underline;

}

.calendar-event:hover,

.calendar-event a:hover{

	cursor: pointer;

}

/* shared */

td.calendar-day, td.calendar-day-np {

	width: 120px;

    /*padding: 5px;

    */

    border-bottom: 1px solid #000;

    border-right: 1px solid #000;

}

.white-version td.calendar-day, 

.white-version td.calendar-day-np{

	border:none;

	padding: 1px;

}

.white-version td.calendar-day.active .wrap,

.white-version td.calendar-day:hover .wrap{

	border-color: #e2b6ac;

	background: #e2b6ac;

}

.white-version td.calendar-day:hover .wrap div.day-number,

.white-version td.calendar-day:hover .wrap div.day-number a,

.white-version td.calendar-day:hover .wrap div.calendar-event,

.white-version td.calendar-day:hover .wrap div.calendar-event a{

	background: #e2b6ac;

	color: #fff;

}



.white-version td.calendar-day.past-date,

.white-version td.calendar-day.Fully,

.white-version td.calendar-day.Closed{

	opacity: .4;
    cursor: not-allowed;
}
.white-version td.calendar-day.past-date a:before,

.white-version td.calendar-day.Fully a:before,

.white-version td.calendar-day.Closed a:before{

	z-index:1;
    position: absolute;
    width:100%;
    height:40px;
    left:0;
    top:0;
    content:" ";
}


.white-version td.calendar-day.Closed:hover .day-number:before{

	content: 'CLOSED';
    font-size:10px;
	position : relative ;

	top:0;

	left:0;

	right:0;

	bottom:0;

	color: #000;

}

.white-version td.calendar-day.Closed:hover .day-number a{

	display: none;

}



.white-version td.calendar-day.Fully:hover .day-number:before{

	content: 'FULLY BOOKED';
    font-size:8px;
	position : relative ;
    white-space: pre-wrap;

	top:0;

	left:0;

	right:0;

	bottom:0;

	color: #000;

}

.white-version td.calendar-day.Fully:hover .day-number a{

	display: none;

}

.white-version td.calendar-day.Closed:hover .day-number,

.white-version td.calendar-day.Fully:hover .day-number{

	cursor: default;

}



.white-version td.calendar-day.past-date:hover .wrap,

.white-version td.calendar-day.past-date:hover .wrap div.day-number,

.white-version td.calendar-day.past-date:hover .wrap div.day-number a,

.white-version td.calendar-day.past-date:hover .wrap div.calendar-event,

.white-version td.calendar-day.past-date:hover .wrap div.calendar-event a{

	background: none;

	color: inherit;

	cursor: default;

}



/*.white-version td.calendar-day.active .wrap .day-number{

	background: inherit;

}*/

.white-version td.calendar-day.active .wrap .day-number, .white-version td.calendar-day.active .wrap .day-number a, .white-version td.calendar-day.active .wrap .calendar-event a{

	color: #fff;

}

.white-version td.calendar-day .wrap, .white-version td.calendar-day-np .wrap{

	border: 1px solid #999;

}

.white-version td.calendar-day-np{

	background: #fff;

}
#apptSubmitButton {
    letter-spacing: 0.1em;
    background: #7F5939;
    border-radius: 200px;
    transition: all 0.2s ease, visibility 0s;
}

#apptSubmitButton:hover {
    background: #FFFFFF;
  border: 1px solid #402C1C;
  color: #000;
  font-size: 13px;
}

@media (min-width: 768px){

	.modal-dialog {

		width: 1000px !important;

	}

}

.modal-header .close {
    position: absolute;
    top: 10px;
    right: 10px;
}

.modal-header .close svg {
    width: 27px;
}

#employees-hidden{

	display: none;

}

#room-default-setting #employees-hidden{

	display: block;

}



#room-default-setting thead th,

#room-default-setting tbody td{

	line-height: 34px;

	color: #000000b8;

}

#room-default-setting thead th{

	text-align: center;

}



#room-default-setting select{

 	background-image: url(https://vivienneatelier.com/wp-content/themes/crocal/images/graphics/select-icon.png);

    background-position: center right;

    background-repeat: no-repeat;

    text-indent: 0;

    -webkit-appearance: none;

    -moz-appearance: none;

 }



.select-date-alert{

	display: none;

}

#special_date{

	text-align: center;

	border: none;

	line-height: 34px;

	font-weight: bold;

	background: none;

}

/*-----------------------*\ SPINNER \*-----------------------*/

.spinner {

	margin: 100px auto;

	width: 50px;

	height: 40px;

	text-align: center;

	font-size: 10px;

}
.form-working .spinner
{
    margin: 0px auto;
}
.spinner > div {

	background-color: #333;

	height: 100%;

	width: 6px;

	display: inline-block;

	margin: 0 3px 0 0;

	-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;

	animation: sk-stretchdelay 1.2s infinite ease-in-out;

}

.spinner .rect2 {

	-webkit-animation-delay: -1.1s;

	animation-delay: -1.1s;

}

.spinner .rect3 {

	-webkit-animation-delay: -1.0s;

	animation-delay: -1.0s;

}

.spinner .rect4 {

	-webkit-animation-delay: -0.9s;

	animation-delay: -0.9s;

}

.spinner .rect5 {

	-webkit-animation-delay: -0.8s;

	animation-delay: -0.8s;

}

@-webkit-keyframes sk-stretchdelay {

	0%, 40%, 100% {

		-webkit-transform: scaleY(0.4) 

	}

	20% {

		-webkit-transform: scaleY(1.0) 

	}

}

@keyframes sk-stretchdelay {

	0%, 40%, 100% {

		transform: scaleY(0.4);

		-webkit-transform: scaleY(0.4);

	}

	20% {

		transform: scaleY(1.0);

		-webkit-transform: scaleY(1.0);

	}

}







#app-store{

	max-width: 200px;

	float: right;

}

.date-choose a{

	font-size: 15px;

	margin: 0 10px;

}



#app-change-month,

#app-change-year{

	text-align: center;

	border:none;

	font-size: 16px;

	font-weight: 700;

	max-width: 100px;

	display: inline-block;

	margin-bottom: 0;

	padding: 0 !important;

}

#app-change-month:focus,

#app-change-year:focus{

	outline: none;

}







.wgl-calendar-slot-setting p{

	margin-bottom: 0;

	line-height: 44px;

}



.popup-notification{

	display: none;

}





.save-change-status{

	color: green;

    line-height: 40px;

}

@media (max-width: 767px)
{
    #dates,
    #request-app{
        width:100%;
    }
    #request-appointment h1
    {
            font-size: 20px;
    }
    
}

@media (max-width: 480px){
    #dates {
        padding-left: 0;
    }
    .field-wrap label {
        font-size: 13px;
        letter-spacing: 0.5px;
     }
     .field-wrap input, .field-wrap select {
        padding: 3px 5px;
        letter-spacing: .05rem;
        height: 32px;
        font-size: 13px;
        
    }
    .field-wrap label.error{
        top: 58px;
        font-size: 10px;
    }
}