/* Calendar */

.calendar-info { padding:20px 0 0}

.calendar-info .col-1 { width:15%; 
						text-align:center;
						font-size:18px;}
						
.calendar-info .col-2 { width:85%}

	#cal-proc-info .name {padding-bottom:6px;
						  font-size:16px}
	
	#cal-proc-info ul.cal-cosmo-list { margin:0 0 5px}
	
		#cal-proc-info ul.cal-cosmo-list > li {margin-bottom: 7px}
	
		#cal-proc-info ul.cal-cosmo-list > li > a {display: block;
												  position: relative;
												  cursor: pointer;
												  text-decoration: none}
		
			#cal-proc-info ul.cal-cosmo-list > li > a .info {display: none;
															position: absolute;
															z-index: 2;
															top: 200%;
															left: 0;
															width: 450px;
															padding: 15px;
															background: #fcfcfc;
															border: solid 1px #006633}
															
			#cal-proc-info ul.cal-cosmo-list > li > a:hover .info { display:block}	
			
				#cal-proc-info ul.cal-cosmo-list > li > a .info .photo {float: left; 
																		margin: 0 15px 15px 0}
																		
				#cal-proc-info ul.cal-cosmo-list > li > a .info .text { color:#333}																		
	

.calendar { margin-top:10px}

.calendar .calendar-h {background: linear-gradient(to bottom, #fff 0%, #fbfbfb 40%, #f4f4f4 100%);
					   border-bottom: solid 1px #ccc;
					   padding: 0 0 12px}

.calendar .col { float:left; width:10%}

	.calendar .col .calendar-h {padding-top:22px}

.cosmo-in-head { list-style:none; 
				  margin:0}
				  
u..cosmo-in-head > li { margin:0}

.calendar .col-2 { width:90%}

.lock-bl { position:relative; 
		   padding-left:37px}

.i-lock:before {background-position: -278px -66px}

.lock-bl:before { position:absolute; left:0; top:0}

#cal-auth-msg { margin-bottom:28px}


	.cal-cell-info { padding:20px 0 7px;
					 border-bottom:solid 1px #797979;
					 text-align:right}
	
	.cal-cell-info span { padding-left:20px}
	
	.cal-cell-info span:before {content:''; 
								display: inline-block;
								width: 12px;
								height: 12px;
								margin: 0 8px 0 0;
								border: solid 1px #ccc; 
								vertical-align:middle}
	
		.leg1:before {background: #e8e8e8}
		.leg2:before {background: #fcfcfc}
		.leg3:before {background: var(--purple-color)}


.calendar-body .column {float:left;
					    width:14.28%; 
					    padding:0;
					    text-align:center}

.calendar .calendar-h {padding:4px 10px 10px; 
					   min-height:130px; 
					   font-size:13px; 
					   border-right:solid 1px #fff}

.calendar .cur-day .calendar-h {background: linear-gradient(to bottom, #fff 0%, #fff 20%, #ccc 60%, #c4c4c4 100%); 
								font-weight:bold}


.calendar .week-name {font-style:italic}
					  
.calendar-body .column  p {color:#333;
						   padding:3px 0}

.calendar div.cosmo_other  {display:none}

.calendar .cosmo-in-head a { color:#797979}

.calendar a.cosmo_default {color:#000}

	.calendar .cal-row {height:25px; 
						padding:4px 10px; 
						background:#fcfcfc;
						border-bottom:solid 1px #999; 
						border-right:solid 1px #fff;
						  -webkit-touch-callout: none;  
						    -webkit-user-select: none;
						       -moz-user-select: none;
						            user-select: none; 
						font-size:13px}
	
	.calendar .old_date,
	.calendar .no_places { background:#e8e8e8}
	
	.calendar .col-time  {background:#fff}
	
	.calendar .you_request {background:var(--purple-color);
							border-color:var(--purple-color);
							color:#fff}
	
	.calendar .cell_hover { background-color:#797979;
							border-color:#797979;
							cursor:pointer;
							color:#fff}	


		.calendar .duration .time-bl {color:#fff}
		
			.calendar .duration .time-bl span {font-weight:normal;
											   color:#fff}

		.calendar .cell_hover .duration .time-bl, 
		.calendar .cell_hover .duration .time-bl span { color:#fff}

	.calendar-body .btn-nav { display:none}

	#cal-login-promt { position:absolute;
					   z-index:1100;
					   width:250px;
					   padding:10px;
					   background:#fcfcfc;
					   border:solid 1px #797979;
					   margin-top:15px;
					   margin-left:0px;
					   color:#333; 
					   font: normal 13px/19px Tahoma, Geneva, sans-serif;
					   text-align:center}
								  
		.cal-nav {position:relative;
				  padding:32px 0}
				  
			.cal-nav .center {position: absolute;
							  left: 50%;
							  margin-left: -80px}
						  
			.cal-nav .fright a {margin-left: 18px}
			
			.cal-nav .fleft a {margin-right: 18px}
			
			.cal-nav .wlist-btn { position:absolute;
								  left:50%;
								  margin:0 0 0 -87px}
			
			.call-drop-down-menu {position: absolute;
								  z-index: 3;
								  width: 190px;
								  top: 0;
								  left: 0;
								  background: #fff;
								  border: solid 1px #ccc;
								  box-shadow: 0 0 10px #999;
								  padding: 10px;
								  font-size: 0;
								  line-height: 0}
								  
				.call-drop-down-menu .call-menu-msg {font: normal 12px/14px Arial, Helvetica, sans-serif}
				
					.call-drop-down-menu a.cal-panel-button {   display: block;
																position: relative;
																padding: 5px 5px;
																margin: 4px 0;
																font-size: 11px;
																line-height: 14px;
																color: #000;
																border-bottom: solid 1px #ccc;
																box-shadow: 0 0 5px #999;
																text-decoration: none }
																
					.call-drop-down-menu a.cal-panel-button:hover { background:#ccc; color:#fff}											

#calendar-clinic-id { font-size:13px}


.calendar-body .btn-nav {
    display: none;
}

	
#cal-form-id .popup-btn-bl { text-align:center}


@media (max-width: 760px) {
    .calendar-body .column {
        width: 100%;
    }
	 
	.calendar .col {
        width: 30%;
    }
	
	.calendar .col-2 {
        width: 70%;
    }
		
	
	.cal-nav .fleft, .cal-nav .fright {
        display: none;
    }
	
	.swiper-container .btn-nav {
		position: absolute;
		z-index: 3;
		display: block;
		background: url(/images/slider_arrow.svg) 0 0 no-repeat;
		width: 33px;
		height: 33px;
		top: 65px;
		cursor: pointer;
		transform: rotate(180deg);
	}
	
	.swiper-container .btn-nav {
		background-image: url(/images/slider_arrow_active.svg?2);
	}
	
	.swiper-container .swiper-button-disabled {
		opacity: 0.2;
	}
	 
	.swiper-container .next {
		right: 0;		 
		transform: rotate(0deg);
	}
	
	.calendar-body .next {
        right: 10px;
    }
	
	.swiper-container .prev {
		left: 0;
	}
	
	.calendar-body .prev {
        left: 10px;
    }
	
	.calendar-body .btn-nav {
        display: block;
        top: 40px;
    }

}

@media (max-width: 600px) {	

	.calendar-info { 
		padding-top:0
	}
	
	.calendar-info,
	.cal-cell-info	{ 
		text-align:center;
		font-size:12px
	}
	
	.calendar-info .col { 
		float:none; 
		width:100%;
		font-size:12px
	}
	
	.calendar-info .col-1 {
		padding-bottom:10px;
		font-size:12px
	}
		 
}
	
/* //Calendar */