.animate-box {
    opacity: 0;
}

/************************************************** Common **************************************************/
.calendzoom-navbar{
	height: 63px; 
	display: flex; 
	align-items: center; 
	justify-content: center;
}

/* blue */
.calendzoom-btn-primary, .calendzoom-btn-primary:disabled{
	background-color: #1F1A50;
	color: white;
	font-weight: bold;
	padding: 5px 20px 5px 20px;
}

.calendzoom-btn-primary:hover{
	background-color: #13087c;
	color: white;
}

.calendzoom-text-primary{
	color: #1F1A50;
}

.calendzoom-text-secondary{
	color: #d6ad00;
}

.mandatory{
	color: red;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/************************************************** Header **************************************************/
.calendzoom-top-logo{
	width: 160px;
}

.nav-item a{
	color: white !important;
	font-weight: bold;
	margin-right: 50px;
}


@media only screen and (max-width: 550px){	
	.calendzoom-top-logo{
		width: 200px; 
		margin: 0 auto;
	}
}

.custom-toggler.navbar-toggler {
  border-color: rgb(255,102,203);
} 
 
/************************************************** Sidebar **************************************************/
.calendzoom-aside{
	width: 100%;
	padding: 30px;
	background: url('../../assets/images/bg-1.jpg'); 
	background-size: auto 100px;
	position: absolute;
	height: 90vh;
	overflow-y: scroll;
	box-shadow: 0 0 30px rgb(0 0 0 / 5%);
	
	-ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

.calendzoom-aside::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}


.calendzoom-main-menu, .calendzoom-main-menu ul, .calendzoom-main-menu ul li, .calendzoom-main-menu ul li a{
	margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    display: block;
    position: relative;
	box-sizing: border-box;
}

.calendzoom-main-menu{
	margin-bottom: 70px;
}

.calendzoom-main-menu > ul > li > a{
	color: #999;
	text-decoration: none;
	margin: 10px 0 0 0;
    padding: 0 0 10px 0;
    list-style: none;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
	
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

.calendzoom-main-menu > ul > li > a:hover, .calendzoom-main-menu > ul > li.active > a, .calendzoom-main-menu > ul > li.open > a {
    color: #fff;
}

/************************************************** Mobile view **************************************************/

.calendzoom-is-desktop-view{
	display: inline-block;
}

.calendzoom-is-mobile-view{
	display: none;
}


@media only screen and (max-width: 550px){
	
	.calendzoom-is-desktop-view{
		display: none;
	}

	.calendzoom-is-mobile-view{
		display: block;
	}
}



.mobile-nav{
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 55px;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
	background-color: #ffffff;
	display: none;
	overflow-x: auto;
}

.mobile-header{
	width: 100%;
	height: 55px;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
	background-color: #ffffff;
	display: none;
	overflow-x: auto;
}

.mobile-social-links{
	display: none;
}

@media screen and (max-width: 700px){
	.mobile-nav{
		display: flex;
	}

	.mobile-social-links{
		display: block;
	}

	.mobile-header{
		display: flex;
	}
	
	.calendzoom-aside{
		display: none;
	}
	
	.calendzoom-main{
		width: 100%;
	}
}

.mobile-nav-link{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-grow: 1;
	min-width: 50px;
	overflow: hidden;
	white-space: nowrap;
	font-size: 13px;
	color: #ffffff;
	text-decoration: none;
	-webkit-tap-hightlight-color: transparent;
	transition: background-color 0.1s ease-in-out;
}

.mobile-nav-link:hover{
	background-color: #eeeeee;
}

.mobile-nav-link-active{
	color: #009578;
}

.mobile-nav-icon{
	font-size: 18px;
}

@media only screen and (max-width: 550px){
	.mobile-bottom-space{
		height: 300px;
	}
}


/*********************************************** Booking Page ***************************************/
.calendzoom-input-holder{
	margin-top: 24px;
}

.calendzoom-label{
	font-weight: bold;
}

.calendzoom-input-text{
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 5px 15px 0 rgba(0, 0, 0, 0.19);
}

.calendzoom-schedule-event-details{
	margin-top: 50px;
}

@media only screen and (max-width: 550px){
	.calendzoom-schedule-event-details{
		margin-top: 0px;
	}
}















