/*******************************Calendar Top Navigation*********************************/

div#calendar{margin:0 auto;padding:0;width:602px;font-family:Helvetica,"Times New Roman",Times,serif}
div#calendar div.box{position:relative;top:0;left:0;width:100%;background-color:#787878;height:47px}
div#calendar div.header{line-height:40px;vertical-align:middle;position:absolute;left:11px;top:0;width:582px;height:40px;text-align:center}
div#calendar div.header a.next,
div#calendar div.header a.prev{position:absolute;top:0;height:17px;display:block;cursor:pointer;text-decoration:none;color:#FFF}
div#calendar div.header span.title{color:#FFF;font-size:18px}
div#calendar div.header a.prev{left:0}
div#calendar div.header a.next{right:0}
 
div#calendar ul.dates>li,
div#calendar ul.label li{padding:0;vertical-align:middle;float:left;list-style-type:none;text-align:center}
div#calendar div.box-content{border:1px solid #787878;border-top:none}
div#calendar ul.label{float:left;margin:5px 0 0 5px;padding:0;border:1px solid #333}
div#calendar ul.label li{margin:0 5px 0 0;width:79px;height:40px;line-height:40px;color:#000;font-size:15px;background-color:transparent}
div#calendar ul.dates{float:left;margin:0 0 5px 5px;padding:0}
div#calendar ul.dates>li{margin:0;line-height:80px;width:80px;height:80px;font-size:18px;color:#595959;border:thin solid transparent}
:focus{outline:0}
div.clear{clear:both}

/* -------------------------  Ramesh ------------------------- */

form#prevmonthform{ float: left;}
form#nextmonthform{   float: right;}
div#calendar ul.dates > li.prev-month, 
div#calendar ul.dates > li.next-month { opacity: 0; visibility: hidden;}

div#calendar ul.dates > li.cl-open.unavailable,
div#calendar ul.dates > li.unavailable{   background-color: #E4ADAD; color: #fff;}

div#calendar ul.dates > li.cl-open.booked,
div#calendar ul.dates > li.booked{background-color: #E4ADAD;color: #fff;}


/*----------------------------------------------------------- PB --*/

div#calendar ul.dates > li{position:relative;cursor:pointer;}
div#calendar ul.dates > li .fa{position: relative;left: 0.8em; display:none;font-size:13px;color:#c65c5e;}
div#calendar ul.dates > li .inner-ul {position: absolute;left: 0;top: 100%;display: none;width:300px;margin:0; padding: 0;list-style:none; background-color: #FFF;box-shadow: 0 0 2px 1px #CCC;}

div#calendar ul.dates > li.cl-open.unavailable,
div#calendar ul.dates > li.cl-open{ border-color:#c7c7c7; background-color:#FFF;z-index:1;}
div#calendar ul.dates > li.cl-open .fa{display:inline-block;}
div#calendar ul.dates > li.cl-open .inner-ul{display:block;}
div#calendar ul.dates > li.booked.cl-open .inner-ul,
div#calendar ul.dates > li.next-month.cl-open .inner-ul,
div#calendar ul.dates > li.prev-month.cl-open .inner-ul{display:none;visibility:hidden;}


/*------------------------------------------ modelcalendar PB --*/

.modelcalendar div#calendar{ width:690px; padding-top:3em;}
.modelcalendar div#calendar div.box {background-color:initial;}
.modelcalendar div#calendar div.box-content {border: 0;border-top:none;}

.modelcalendar div#calendar div.header {width: 93%;}
.modelcalendar div#calendar div.header span.title {color: #5a5a5a;font-size: 18.48px;line-height: 36.96px;text-transform: uppercase;font-family: 'Avenir LT 35 Light';}
.modelcalendar div#calendar ul.label {width: 100%; margin-top:0;margin-left: 0;margin-bottom: 3.8em;text-transform: uppercase; border: 0; border-bottom: thin solid #e5e5e5; background-color: initial;}
.modelcalendar div#calendar ul.label li {margin-right: 0;width: 14.25%;height: 90px;line-height:85px;color: #5a5a5a;font-size: 18px;font-family: 'Avenir LT 35 Light';font-weight: normal;text-transform: uppercase;	text-shadow: none; max-width:90px;}

.modelcalendar form#nextmonthform,
.modelcalendar form#prevmonthform{position:relative;}
.modelcalendar form#prevmonthform {left:4%;}
.modelcalendar form#nextmonthform {right:7%;}
.modelcalendar form#nextmonthform input[type=submit],
.modelcalendar form#prevmonthform input[type=submit]{opacity:0;}
.modelcalendar form#nextmonthform::before {	position: absolute;left: 0;right: 0;top: 0;bottom: 0;color: #999999; content: "\f105";display: inline-block;font: normal normal normal 14px/1 FontAwesome; font-size:37px; line-height:23px; text-rendering: auto;-webkit-font-smoothing: antialiased;z-index: -1;	}
.modelcalendar form#prevmonthform::before {	position: absolute;left: 0;right: 0;top: 0;bottom: 0;color: #999999; content: "\f104";display: inline-block;font: normal normal normal 14px/1 FontAwesome; font-size:37px; line-height:23px; text-rendering: auto;-webkit-font-smoothing: antialiased;z-index: -1;	}

.modelcalendar div#calendar ul.dates {width: 100%;margin-left:0;}
.modelcalendar div#calendar ul.dates > li { width: 14.25%;height: 90px;line-height:85px;font-size: 18px;color: #5a5a5a;font-family: 'Avenir LT 35 Light'; border:2px solid transparent;max-width: 90px;}
.modelcalendar div#calendar ul.dates > li.booked{color:#FFF;}
.modelcalendar div#calendar ul.dates > li .inner-ul {top: 104%; /*box-shadow: initial;background-color: initial;*/}
.modelcalendar div#calendar ul.dates > li .timepicker{width:170px;height:50px;margin:3em auto; padding:0 1em;font-size:16px;color:#5a5a5a;font-family: 'Avenir LT 35 Light'; border-radius:2px;border:thin solid #d1d1d1;background:#FFF url('../images/timepickertextboxicon.png') no-repeat center right;}
.modelcalendar div#calendar ul.dates > li .fa {position: absolute;top: 50%;left: 50%;width: 23px;height: 22px; margin-top: -11px;margin-left: -11px;   font-size: 21px;color: #FFF;border-radius: 2px;	background-color: #E4ADAD;}
.modelcalendar div#calendar ul.dates > li.cl-open.unavailable, 
.modelcalendar div#calendar ul.dates > li.cl-open{font-size: 0;border-color: #E4ADAD;}
.modelcalendar div#calendar ul.dates > li.pastdate {color: #5a5a5a;cursor: default;opacity: 0.5; visibility: visible;}
.modelcalendar div#calendar ul.dates > li.pastdate.booked{color:#FFF;}

.modelcalendar div#calendar ul.dates > li.cl-open.unavailable, 
.modelcalendar div#calendar ul.dates > li.unavailable{background-color: #E4ADAD;color: #fff;}


.modelcalendar  .bottomtimepc{ display:none;}
.bootstrap-timepicker-widget.dropdown-menu {padding: 0.3em 0.45em; border: 1px solid #d1d1d1;box-shadow: initial;background-color: #f4f4f4;}
.bootstrap-timepicker-widget.timepicker-orient-top{margin-top: 13px;}
.bootstrap-timepicker-widget.timepicker-orient-top::before {top:-11px; border-bottom: 12px solid #dadada;border-left: 11px solid transparent;border-right: 11px solid transparent;	}
.bootstrap-timepicker-widget.timepicker-orient-top::after{top:-10px; border-bottom:12px solid #f4f4f4;border-left: 10px solid transparent;border-right: 10px solid transparent;}
.bootstrap-timepicker-widget.timepicker-orient-bottom{margin-top: -7px;}
.bootstrap-timepicker-widget.timepicker-orient-bottom::before {top:initial; bottom: -11px;border-top: 11px solid #dadada;border-left: 11px solid transparent;border-right: 11px solid transparent;	}
.bootstrap-timepicker-widget.timepicker-orient-bottom::after {top:117px; bottom:inherit;border-top:11px solid #f4f4f4;border-left: 10px solid transparent;border-right: 10px solid transparent;	}

.bootstrap-timepicker-widget table td input {width: 54px;height: 50px;margin: 0 8.5px; text-align: center;border-radius: 0;border-color: #e6e6e6;box-shadow: initial;}
.bootstrap-timepicker-widget table td {height: inherit;padding: 0;}
.bootstrap-timepicker-widget table td.separator{display:none;}
.bootstrap-timepicker-widget table td a > span {width: 21px;height: 14px;background-color: #FFF;}
.bootstrap-timepicker-widget table td a{border:0;}
.bootstrap-timepicker-widget table td a:hover {background-color: initial;border-radius: 0;}



/*------------------------------------------ Schedule Calendar --*/

.book_calpopup div#calendar {padding: 58px 0 0;width: 595px;}
.book_calpopup div#calendar div.box {background-color:initial;}
.book_calpopup div#calendar div.box-content {border: 0;border-top:none;}

.book_calpopup div#calendar div.header {width: 100%;}
.book_calpopup div#calendar div.header span.title {color: #5a5a5a;font-size: 18.48px;line-height: 36.96px;text-transform: uppercase;font-family: 'Avenir LT 35 Light';}
.book_calpopup div#calendar ul.label {width: 100%; margin-top:0;margin-left: 0;margin-bottom: 3.8em;text-transform: uppercase; border: 0; border-bottom: thin solid #e5e5e5; background-color: initial;}
.book_calpopup div#calendar ul.label li {margin-right: 0;width: 14%;height: 90px;line-height:85px;color: #5a5a5a;font-size: 18px;font-family: 'Avenir LT 35 Light';font-weight: normal;text-transform: uppercase;	text-shadow: none; max-width:80px}

.book_calpopup form#nextmonthform,
.book_calpopup form#prevmonthform{position:relative; z-index: 0;}
.book_calpopup form#prevmonthform {left:0;}
.book_calpopup form#nextmonthform {right:10%;}
.book_calpopup form#nextmonthform input[type=submit],
.book_calpopup form#prevmonthform input[type=submit]{opacity:0;}
.book_calpopup form#nextmonthform::before {	position: absolute;left: 0;right: 0;top: 0;bottom: 0;color: #999999; content: "\f105";display: inline-block;font: normal normal normal 14px/1 FontAwesome; font-size:37px; line-height:23px; text-rendering: auto;-webkit-font-smoothing: antialiased;z-index: -1;	}
.book_calpopup form#prevmonthform::before {	position: absolute;left: 0;right: 0;top: 0;bottom: 0;color: #999999; content: "\f104";display: inline-block;font: normal normal normal 14px/1 FontAwesome; font-size:37px; line-height:23px; text-rendering: auto;-webkit-font-smoothing: antialiased;z-index: -1;	}

.book_calpopup div#calendar ul.dates {width: 100%;margin-left:0;}
.book_calpopup div#calendar ul.dates > li {width: 14%;line-height:85px;font-size: 18px;color: #5a5a5a;font-family: 'Avenir LT 35 Light'; border:2px solid transparent;max-width:80px}
.book_calpopup div#calendar ul.dates > li.booked{color:#FFF;}
.book_calpopup div#calendar ul.dates > li .inner-ul {top: 104%; /*box-shadow: initial;background-color: initial;*/}
.book_calpopup .modal-body .timebox {margin: 76px 0 42px;text-align: center;}
.book_calpopup .modal-body .timebox > .timepicker{width:170px;height:50px;margin:0 auto; padding:0 1em;font-size:16px;color:#5a5a5a;font-family: 'Avenir LT 35 Light'; border-radius:2px;border:thin solid #d1d1d1;background:#FFF url('../images/timepickertextboxicon.png') no-repeat center right;}
.book_calpopup div#calendar ul.dates > li .fa {position: absolute;top: 50%;left: 50%;width: 23px;height: 22px; margin-top: -11px;margin-left: -11px;   font-size: 21px;color: #FFF;border-radius: 2px;	background-color: #E4ADAD;}
.book_calpopup div#calendar ul.dates > li.cl-open.unavailable, 
.book_calpopup div#calendar ul.dates > li.cl-open{font-size: 0;border-color: #E4ADAD;}
.book_calpopup div#calendar ul.dates > li.pastdate {color: #5a5a5a;cursor: default;opacity:0.5;}
.book_calpopup div#calendar ul.dates > li.pastdate.booked{color:#FFF;}
.book_calpopup div#calendar ul.dates > li.pastdate.booked,
.book_calpopup div#calendar ul.dates > li.pastdate.unavailable{color: #5A5A5A;background-color: initial;}
.book_calpopup div#calendar ul.dates > li.unavailable {
  color: #ffffff;
}

/******************************* my calendar ******************************/
.mycalandarpg .modelcalendar div#calendar ul.dates > li .fa{ display:none;visibility:hidden; }
.mycalandarpg .modelcalendar div#calendar ul.dates > li { border:1px solid transparent; } 
.mycalandarpg .modelcalendar div#calendar ul.dates > li.cl-open { font-size: inherit; border: 1px solid #d9534f;}


.modelcalendar div#calendar ul.dates li:nth-child(7n+1) {
    clear: both;
}
div#calendar ul.dates > li.pastdate.prev-month, 
div#calendar ul.dates > li.pastdate.next-month { opacity: 0; visibility:visible;}
/*---------------------------------------------------------------------*/
ul.dates .unavailable {
    border-radius: 100%;
}

div#calendar ul.dates > .unavailable {
    border: 0 !important;
    border-radius: 0;
    background-color: transparent !important;
    color: #5a5a5a !important;
    opacity: 0.5;
	cursor: default;
}
.modelcalendar div#calendar ul.dates > li.pastdate.booked {
    cursor: pointer;
}



@media screen and (max-width:1500px) {
    .mycalandarpg .modelcalendar div#calendar { width: 100%; }
}

@media screen and (max-width:1450px){
   .modelcalendar div#calendar ul.dates > li:nth-of-type(7n+7) .inner-ul {left: inherit;right: 0;}
}
@media screen and (max-width:1370px){
.book_calpopup .modal-dialog {
  max-width: 640px;
}
.book_calpopup div#calendar {
  width: 600px;
}
    .book_calpopup div#calendar ul.label{
        margin-bottom:5px;
    }   
}
@media screen and (max-width:1290px){
    
   .modelcalendar div#calendar ul.dates > li:nth-of-type(7n+6) .inner-ul {left:inherit;right: 0;}
}

@media screen and (max-width:1179px){
   .schedulreCLD_pg .modelcalendar div#calendar,
    .modelcalendar div#calendar{width: 100%;}
   .modelcalendar div#calendar ul.dates > li:nth-of-type(7n+5) .inner-ul {left:inherit;right: 0;}
   .schedulreCLD_pg .modelcalendar div#calendar ul.dates > li:nth-of-type(7n+5) .inner-ul {left:inherit;right:0;}
   .modelcalendar div#calendar ul.dates > li {
    width: 14.25%;
    height: 75px;
    line-height: 78px;
    font-size: 18px;
    color: #5a5a5a;
    font-family: 'Avenir LT 35 Light';
    border: 2px solid transparent;
}
}

@media screen and (max-width:991px){ 
  .book_calpopup div#calendar { width: 100%;}
  .modelcalendar div#calendar ul.dates > li {
    width: 14.25%;
    height: 105px;
    line-height: 102px;
    font-size: 18px;
    color: #5a5a5a;
    font-family: 'Avenir LT 35 Light';
    border: 2px solid transparent;
}
}
@media screen and (max-width:767px){
	.font-16{
		font-size:14px;
	}
}
@media screen and (max-width:480px){ 
.book_calpopup div#calendar ul.label li { font-size: 13px; }

.mycalandarpg .modelcalendar div#calendar ul.label li {height:50px;line-height:50px;font-size: 13px;}
.mycalandarpg .modelcalendar div#calendar ul.dates > li{height:50px;line-height:50px;font-size: 13px;}
.mycalandarpg .cld_leftside ul.info_colorul li{
	font-size:14px;
}

}

@media screen and (max-width:480px){
    .mycalandarpg .modelcalendar div#calendar ul.label {margin-bottom: 2em;}
}
@media screen and (max-width:414px){
   .book_calpopup div#calendar ul.dates > li {
        height: 50px;
        line-height: 50px;
        width: 50px;
    }
}
@media screen and (max-width:380px){
    .book_calpopup div#calendar ul.dates > li {
        height: 45px;
        line-height: 45px;
        width: 45px;
        font-size: 16px;
    }
}
@media screen and (max-width:360px){
   .mycalandarpg .modelcalendar div#calendar ul.dates > li {
    height: 41px;
    line-height: 40px;
}
}

div#calendar ul.dates > li.pastdate.unavailable {
    border: 0px solid #e4adad !important;
}

.modelcalendar div#calendar ul.dates > li.pastdate.booked {
    color: #ffffff !important;
}

div#calendar ul.dates > li.pastdate.booked {
    background-color: none !important;
    color: #5a5a5a !important;
}
div#calendar ul.dates > .pastdate.unavailable {
    background-color: transparent !important;
	color:#5a5a5a !important;
}
div#calendar ul.dates > li.current-date {
	border-radius: 50%;
	background-color: #d9534f !important;
	color: #fff !important;
	border: 1px solid #d9534f !important;
}