/* --------------------------------

Main Components 

-------------------------------- */
.salonic-calendar {
	position: relative;
	margin: 1em 0;
}

.salonic-calendar::before {
	/* never visible - this is used in js to check the current MQ */
	content: 'mobile';
	display: none;
}

.salonic-calendar {
	width: 100%;
}

.salonic-calendar::after {
	clear: both;
	content: "";
	display: block;
}

.salonic-calendar::before {
	content: 'desktop';
}

.salonic-calendar .timeline {
	display: none;
}

.salonic-calendar .timeline {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	padding-top: 105px;
}

.salonic-calendar-week .timeline {
	top: 0;
	padding-top: 100px;
}

.salonic-calendar .timeline li {
	position: relative;
	height: 40px;
	padding-left: 10px;
}

.salonic-calendar.calendar-interface-size-small .timeline li,
.salonic-calendar.calendar-interface-size-small .portlet-placeholder2 {
	height: 20px;
	font-size: 11px;
}

.salonic-calendar.calendar-interface-size-medium .timeline li,
.salonic-calendar.calendar-interface-size-medium .portlet-placeholder2 {
	height: 30px;
	font-size: 12px;
}

.salonic-calendar.calendar-interface-size-default .timeline li,
.salonic-calendar.calendar-interface-size-default .portlet-placeholder2 {
	height: 40px;
}

.salonic-calendar.calendar-interface-size-big .timeline li,
.salonic-calendar.calendar-interface-size-big .portlet-placeholder2 {
	height: 60px;
}

.salonic-calendar .timeline li::after {
	/* this is used to create the table horizontal lines */
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: #EAEAEA;
}

/* .salonic-calendar .timeline li:last-of-type::after {
	display: none;
}

.salonic-calendar .timeline li span {
	display: none;
}

.salonic-calendar .timeline li:nth-of-type(2n) span {
	display: none;
} */

.salonic-calendar .timeline li::after {
	width: calc(100% - 50px);
	left: 50px;
}

.salonic-calendar .timeline li span {
	display: inline-block;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.salonic-calendar .events {
	position: relative;
	z-index: 1;
	border-left: 1px solid #EAEAEA;
}

.salonic-calendar .events-group {
	margin-bottom: 30px;
	position: relative;
}

.salonic-calendar .events-group .line-vertical {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	border-left: 2px dotted #ff0000;
	transform: translate(-50%);
}

.salonic-calendar .top-info {
	width: 100%;
	padding: 10px 5%;
	height: 75px;
	border-bottom: 1px solid #ddd;
	background-color: #f3f4f5;
	box-shadow: 2px 2px 20px 0px rgba(0, 0, 0, 0.1);
	text-align: center;
}

.salonic-calendar .top-info > .day-label {
	font-weight: 600;
	margin: 0;
	position: relative;
}

.day-label.today {
	font-weight: bold !important;
}

.day-label.today:before {
	position: absolute;
	top: 7px;
	left: -9px;
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	background-color: #FFAD46;
	margin-right: 5px;
}

.salonic-calendar .top-info > span {
	display: inline-block;
	line-height: 1.2;
	margin-bottom: 10px;
	font-weight: bold;
}

.salonic-calendar .events-group > ul {
	position: relative;
	padding: 0 5%;
	/* force its children to stay on one line */
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
	/* border-right: 2px solid #f5f5f5 !important; */
	border-right: 2px solid #ddd !important;
}


.salonic-calendar .events-group > ul {
	border-right: 2px solid #E3E7F0;
}

.salonic-calendar .events-group > ul.last,
.top-info-container.last {
	border-right: none !important;
}

.salonic-calendar .events-group > ul::after {
	/* never visible - used to add a right padding to .events-group > ul */
	display: inline-block;
	content: '-';
	width: 1px;
	height: 100%;
	opacity: 0;
	color: transparent;
}

.salonic-calendar .events .single-event, .salonic-calendar .events .free-event {
	/* force them to stay on one line */
	-ms-flex-negative: 0;
	flex-shrink: 0;
	float: left;
	height: 150px;
	width: 70%;
	max-width: 300px;
	box-shadow: inset 3px 0 0 rgba(0, 0, 0, 0.2);
	margin-right: 20px;
}

.salonic-calendar .events .single-event:last-of-type {
	margin-right: 5%;
}

.salonic-calendar .events .single-event .appointment, .salonic-calendar .events .free-event a {
	display: block;
	height: 100%;
	padding: .6em;
	text-decoration: none;
}

.salonic-calendar .events .free-event a span {
	display: block;
	content: "";
}

.salonic-calendar .events .single-event, .salonic-calendar .events .free-event {
	width: 40%;
}

/* @media only screen and (max-width: 800px) {
	.free-event {
		display: none;
	}

	.top-info-container ul {
		position: relative;
		padding: 0 5%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
		border-right: 1px solid #EAEAEA;
	}
} */

.salonic-calendar .events {
	float: left;
	width: 100%;
}

.salonic-calendar .events-group {
	width: 20%;
	float: left;
	border-bottom: 1px solid #EAEAEA;
	/* reset style */
	margin-bottom: 0;
}

.salonic-calendar .events-group:not(:first-of-type) {
	border-left-width: 0;
}

.salonic-calendar .top-info {
	/* vertically center its content */
	display: table;
	height: auto;
	border-bottom: 1px solid rgba(232, 232, 232, 0.6) !important;
	background-color: #FDFDFD;
	/* reset style */
	padding: 5px 0 5px 0;
	box-shadow: none;
	text-align: center;
}

.salonic-calendar .top-info-day,
.salonic-calendar .top-info-week {
	width: 100%;
	padding: 5px 5%;
	border-bottom: 1px solid rgba(232, 232, 232, 0.6) !important;
	background-color: #f3f4f5;
	box-shadow: 2px 2px 20px 0px rgba(0, 0, 0, 0.1);
	text-align: center;
	font-size: 18px;
	line-height: 1em;
	position: relative;
}

.top-info-week::after {
	content: "";
	position: absolute;
	right: -1px;
	width: 1px;
	height: 37px;
	top: 50%;
	transform: translateY(-50%);
	background: #E3E7F0;

}

.top-info-week::before {
	content: "";
	position: absolute;
	bottom: 0;
	right: -1px;
	width: 1px;
	height: 100%;
	background: #FAFAFB;
}

.salonic-calendar .top-info-day small,
.salonic-calendar .top-info-week small {
	font-size: 12px;
	color: #5D84FE;
	font-weight: 600
}

.salonic-calendar .employee-container {
}

/* .cd-schedule-day .top-info {
	height: 104px;
} */

/* .cd-schedule-week .top-info-employees, .cd-schedule-3day .top-info-employees {
	min-height: 63px;
	max-height: 63px;
} */

.salonic-calendar .top-info div.employeeName {
	font-size: 13px;
}

.salonic-calendar .top-info div.employee-specializations {
	font-size: 10px;
}

.salonic-calendar .top-info div.span {
	/* vertically center inside its parent */
	vertical-align: middle;
	display: block;
	width: 100%;
	/* padding: 0 .5em; */
	text-align: center;
	/* reset style */
	font-weight: normal;
	margin-bottom: 0;
}

.salonic-calendar .events-group > ul {
	/* min-height: 950px; */
	height: 100%;
	/* reset style */
	display: block;
	overflow: visible;
	padding: 0;
}

.salonic-calendar .events-group > ul::after {
	clear: both;
	content: "";
	display: block;
}

.salonic-calendar .events-group > ul::after {
	/* reset style */
	display: none;
}

.salonic-calendar .events .free-event {
	border-bottom: 1px solid #E3E7F0;
	background: white;
}

.salonic-calendar .events .free-event {
	/* z-index: 3; */
	/* top position and height will be set using js */
	width: calc(100%);
	/* left: -1px; */
	left: 0;
	/* reset style */
	-ms-flex-negative: 1;
	flex-shrink: 1;
	height: auto;
	max-width: none;
	margin-right: 0;
}

.salonic-calendar .events .single-event {
	position: absolute;
	/* z-index: 3; */
	/* top position and height will be set using js */
	width: calc(100%);
	/* left: -1px; */
	left: 0;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
	/* border-bottom: 1px inset #EAEAEA; */
	/* reset style */
	-ms-flex-negative: 1;
	flex-shrink: 1;
	height: auto;
	max-width: none;
	margin-right: 0;
}

.salonic-calendar .events .free-event {
	box-shadow: none;
	text-align: center;
}

.salonic-calendar .events .free-event:hover {
	/* background-color: rgba(170, 227, 103, .2); */
	background: #28c647;
	border: 1px dashed darkgrey;
}

.salonic-calendar .events .add-break-in-progress:hover {
	/* background-color: rgba(170, 227, 103, .2); */
	background-color: red !important;
	border: 1px dashed white;
}

.salonic-calendar .events .single-event, .salonic-calendar .events .free-event a {
	/* padding: 1.2em; */
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	font-size: 8px;
}

.salonic-calendar .events .free-event .free-event-text {
	opacity: .2;
	width: 100%;
	height: 100%;
	padding-top: 15px;

	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	/* Required to make elements draggable in old WebKit */
	-khtml-user-drag: element;
	-webkit-user-drag: element;
}

.salonic-calendar .events .single-event:last-of-type {
	/* reset style */
	margin-right: 0;
}

.salonic-calendar .events .single-event.selected-event {
	/* the .selected-event class is added when an user select the event */
	/* visibility: hidden; */
}

.salonic-calendar .events {
	/* 60px is the .timeline element width */
	width: calc(100% - 50px);
	margin-left: 50px;
}

.salonic-calendar .events-header {
	width: calc(100% - 50px);
	margin-left: 60px;
	min-height: 49px;
}

.salonic-calendar.loading .events .single-event {
	/* the class .loading is added by default to the .salonic-calendar element
		 it is removed as soon as the single events are placed in the schedule plan (using javascript) */
	opacity: 0;
}

.salonic-calendar .event-name,
.salonic-calendar .event-date {
	display: block;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.salonic-calendar .event-name {
	font-size: 1.2rem;
}

.salonic-calendar .appointment-duration-length-1 .event-name {
	height: 46px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-height: none;
}

/* .salonic-calendar .appointment-duration-length-1 .event-name {
	height: 70px;
} */

.calendar-interface-size-big .appointment-duration-length-1 .event-name {
	height: 47px;
}

.calendar-interface-size-medium .appointment-duration-length-1 .event-name {
	height: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-height: none;
}

/* .salonic-calendar .appointment-duration-length-1 .appointment-status-icon {
	font-size: 1em;
} */

/* .salonic-calendar .appointment-duration-length-1 .appointment {
	padding: 0 0.5em !important;
} */

@media only screen and (min-width: 1300px) {
	.salonic-calendar .event-name {
		font-size: 1.3rem;
		max-height: 95%;
	}
}

.salonic-calendar .event-date {
	/* they are not included in the the HTML but added using JavScript */
	font-size: 1.4rem;
	opacity: .7;
	line-height: 1.2;
	margin-bottom: .2em;
}

.salonic-calendar .single-event[data-event="event-1"],
.salonic-calendar [data-event="event-1"] .header-bg {
	/* this is used to set a background color for the event and the modal window */
	background: #577F92;
}

.salonic-calendar .single-event[data-event="event-1"]:hover {
	background: #618da1;
}

.salonic-calendar .single-event[data-event="event-2"],
.salonic-calendar [data-event="event-2"] .header-bg {
	background: #443453;
}

.salonic-calendar .single-event[data-event="event-2"]:hover {
	background: #513e63;
}

.salonic-calendar .single-event[data-event="event-3"],
.salonic-calendar [data-event="event-3"] .header-bg {
	background: #A2B9B2;
}

.salonic-calendar .single-event[data-event="event-3"]:hover {
	background: #b1c4be;
}

.salonic-calendar .single-event[data-event="event-4"],
.salonic-calendar [data-event="event-4"] .header-bg {
	background: #f6b067;
}

.salonic-calendar .single-event[data-event="event-4"]:hover {
	background: #f7bd7f;
}

.salonic-calendar .event-modal {
	position: fixed;
	z-index: 3;
	top: 0;
	right: 0;
	height: 100%;
	width: 100%;
	visibility: hidden;
	/* Force Hardware acceleration */
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-transform: translateX(100%);
	-ms-transform: translateX(100%);
	transform: translateX(100%);
	-webkit-transition: visibility .4s, -webkit-transform .4s;
	transition: visibility .4s, -webkit-transform .4s;
	transition: transform .4s, visibility .4s;
	transition: transform .4s, visibility .4s, -webkit-transform .4s;
	-webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
	transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
}

.salonic-calendar .event-modal .header {
	position: relative;
	height: 70px;
	/* vertically center its content */
	display: table;
	width: 100%;
}

.salonic-calendar .event-modal .header .content {
	position: relative;
	z-index: 3;
	/* vertically center inside its parent */
	display: table-cell;
	vertical-align: middle;
	padding: .6em 5%;
}

.salonic-calendar .event-modal .body {
	position: relative;
	width: 100%;
	/* 70px is the .header height */
	height: calc(100% - 70px);
}

.salonic-calendar .event-modal .event-info {
	position: relative;
	z-index: 2;
	line-height: 1.4;
	height: 100%;
	overflow: hidden;
}

.salonic-calendar .event-info {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.salonic-calendar .event-modal .event-info > div {
	overflow: auto;
	height: 100%;
	padding: 1.4em 5%;
}

.salonic-calendar .event-modal .header-bg, .salonic-calendar .event-modal .body-bg {
	/* these are the morphing backgrounds - visible on desktop only */
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.salonic-calendar .event-modal .body-bg {
	z-index: 1;
	background: white;
	-webkit-transform-origin: top left;
	-ms-transform-origin: top left;
	transform-origin: top left;
}

.salonic-calendar .event-modal .header-bg {
	z-index: 2;
	-webkit-transform-origin: top center;
	-ms-transform-origin: top center;
	transform-origin: top center;
}

.salonic-calendar .event-modal .close {
	/* this is the 'X' icon */
	position: absolute;
	top: 0;
	right: 0;
	z-index: 3;
	background: rgba(0, 0, 0, 0.1);
	/* replace text with icon */
	color: transparent;
	white-space: nowrap;
	text-indent: 100%;
	height: 70px;
	width: 70px;
}

.salonic-calendar .event-modal .close::before, .salonic-calendar .event-modal .close::after {
	/* these are the two lines of the 'X' icon */
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2px;
	height: 22px;
	background: white;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.salonic-calendar .event-modal .close::before {
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	-ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.salonic-calendar .event-modal .close::after {
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
	-ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
	transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

.salonic-calendar .event-modal .event-date {
	display: none;
}

.salonic-calendar .event-modal.no-transition {
	-webkit-transition: none;
	transition: none;
}

.salonic-calendar .event-modal.no-transition .header-bg, .salonic-calendar .event-modal.no-transition .body-bg {
	-webkit-transition: none;
	transition: none;
}

.salonic-calendar .event-modal {
	/* reset style */
	right: auto;
	width: auto;
	height: auto;
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	will-change: transform, width, height;
	-webkit-transition: height .4s, width .4s, visibility .4s, -webkit-transform .4s;
	transition: height .4s, width .4s, visibility .4s, -webkit-transform .4s;
	transition: height .4s, width .4s, transform .4s, visibility .4s;
	transition: height .4s, width .4s, transform .4s, visibility .4s, -webkit-transform .4s;
	-webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
	transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
}

.salonic-calendar .event-modal .header {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	height: 100%;
}

.salonic-calendar .event-modal .header .content {
	/* reset style */
	display: block;
	padding: .8em;
}

.salonic-calendar .event-modal .event-info > div {
	padding: 2em 3em 2em 2em;
}

.salonic-calendar .event-modal .body {
	height: 100%;
	width: auto;
}

.salonic-calendar .event-modal .header-bg, .salonic-calendar .event-modal .body-bg {
	/* Force Hardware acceleration */
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	will-change: transform;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.salonic-calendar .event-modal .header-bg {
	-webkit-transition: -webkit-transform .4s;
	transition: -webkit-transform .4s;
	transition: transform .4s;
	transition: transform .4s, -webkit-transform .4s;
	-webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
	transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
}

.salonic-calendar .event-modal .body-bg {
	opacity: 0;
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
}

.salonic-calendar .event-modal .event-date {
	display: block;
}

.salonic-calendar .event-modal .close, .salonic-calendar .event-modal .event-info {
	opacity: 0;
}

.salonic-calendar .event-modal .close {
	width: 40px;
	height: 40px;
	background: transparent;
}

.salonic-calendar .event-modal .close::after, .salonic-calendar .event-modal .close::before {
	background: #222222;
	height: 16px;
}

@media only screen and (min-width: 1000px) {
	body.isMobileOrTablet .cd-schedule-3day .events.expanded,
	body.isMobileOrTablet .cd-schedule-week .events.expanded {
		overflow: hidden;
		overflow-x: scroll;
	}

	body.isMobileOrTablet .events.expanded .salonic-calendar-event-container {
		min-width: 2000px !important;
	}

	.salonic-calendar .event-modal .header .content {
		padding: 1.2em;
	}
}

.salonic-calendar.modal-is-open .event-modal {
	/* .modal-is-open class is added as soon as an event is selected */
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	visibility: visible;
}

.salonic-calendar.modal-is-open .event-modal .event-info > div {
	/* smooth scroll on iOS touch devices */
	-webkit-overflow-scrolling: touch;
}

.salonic-calendar.animation-completed .event-modal .close,
.salonic-calendar.content-loaded.animation-completed .event-modal .event-info {
	/* 	the .animation-completed class is added when the modal animation is completed
			the .content-loaded class is added when the modal content has been loaded (using ajax) */
	opacity: 1;
	-webkit-transition: opacity .2s;
	transition: opacity .2s;
}

.salonic-calendar.modal-is-open .body-bg {
	opacity: 1;
	-webkit-transition: -webkit-transform .4s;
	transition: -webkit-transform .4s;
	transition: transform .4s;
	transition: transform .4s, -webkit-transform .4s;
	-webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
	transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
}

.salonic-calendar .cover-layer {
	/* layer between the content and the modal window */
	position: fixed;
	z-index: 2;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(0, 0, 0, 0.8);
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity .4s, visibility .4s;
	transition: opacity .4s, visibility .4s;
}

.salonic-calendar.modal-is-open .cover-layer {
	opacity: 1;
	visibility: visible;
}

.hidden {
	display: none !important;
}

.salonic-calendar .events-header .events-group {
	border-bottom: 0;
}

.salonic-calendar .events-header .top-info {
	border-bottom: 0;
}

.salonic-calendar-week .affix {
	top: 0;
}

.top-info-container {
	z-index: 8000;
	background-color: #fff;
	border-right: 1px solid #C0C0C0;
	border-top: 1px solid #EAEAEA;
}

/*
.top-info-container .top-info span {
	border-right: 1px solid #EAEAEA;
}

.top-info-container .top-info span:last-of-type {
	border-right: 0;
} */

.affix {
	position: fixed;
}

.salonic-calendar-day .affix {
	top: 0;
}

.salonic-calendar .employee-off {
	/* cursor: not-allowed !important; */
	cursor: pointer;
	/* opacity: .1; */
	background: #eee !important;
}

.salonic-calendar .employee-holiday {
	background: rgba(240, 61, 37, 0.25) !important;
}

.allowDoubleBookings .isOff, .allowDoubleBookings .isBreak, .allowDoubleBookings .employee-off {
	word-break: break-all;
}

.salonic-calendar .currentTime {
	position: absolute;
	top: -60px;
	left: -65px;
	height: 106px;
	background-color: #f3f4f5;
	border: 1px solid #ddd;
	box-shadow: 2px 2px 20px 0px rgba(0, 0, 0, 0.1);
	text-align: center;
	min-width: 65px;
	z-index: 9999;
}

.salonic-calendar .currentTime > div {
	padding-top: 10px;
}

.headerSize-small .currentTime > div {
	padding-top: 0;
}

.cd-schedule-week .currentTime > div {
	padding-top: 25% !important;
}

.salonic-calendar .employee-specializations {
	max-height: 25px;
	overflow: hidden;
}

.salonic-calendar .appointment-status-6, .salonic-calendar .appointment-status-5 {
	background-image: linear-gradient(-45deg, transparent 15%, rgba(255, 255, 255, 0.2) 15%, rgba(255, 255, 255, 0.2) 50%, transparent 50%, transparent 65%, rgba(255, 255, 255, 0.2) 65%);
	background-size: 6px 6px;
}

.salonic-calendar .month-view-th {
	padding: 7px 5px;
	font-size: 1.3em;
	border-bottom: 1px solid #ddd;
	background-color: #f3f4f5;
	box-shadow: 2px 2px 20px 0px rgba(0, 0, 0, 0.1);
	text-align: center;
}

.appointmentsTableContainer {
	width: 99%;
}

.calendarInterfaceButtons-monthViewMode {
	margin-left: 15px !important;
}

.salonic-calendar .rowData-listViewMode td {
	padding: 10px;
}

.salonic-calendar .currentHour {
	background-color: #f3f4f5;
	color: red;
}

.salonic-calendar .tooltip-inner {
	background-color: #112f54;
}

.salonic-calendar .tooltip {
	z-index: 999999 !important;
}

.salonic-calendar .tooltip.top .tooltip-arrow {
	border-top-color: #112f54;
}

@keyframes pulse {
	0% {
		opacity: 1;
	}
	50% {
		opacity: .5;
	}
	100% {
		opacity: 1;
	}
}

@keyframes scale {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.02);
	}
	100% {
		transform: scale(1);
	}
}

.animation-pulse {
	animation: scale 1s;
	animation-iteration-count: 1;
}

#appointmentsData {
	-webkit-overflow-scrolling: touch;
}

#appointmentsData .appointmentNotConfirmed,
#appointmentsData .appointment-status-10 {
	/* animation: pulse 2s infinite; */
	color: black !important;
}

#appointmentsData .appointment-status-10 {
	background-color: #ffad46 !important;
}

#appointmentsData .appointmentNotConfirmed .appointment,
#appointmentsData .appointment-status-10 .appointment {
	opacity: .5;
}

.current-time-line .time {
	z-index: 1000;
	min-width: 60px;
	padding-left: 15px;
	border-radius: 3px;
	background: #5D84FE;
	position: absolute;
	top: 0;
	color: white;
	font-size: 10px;
}

.current-time-line {
	left: 0;
	position: absolute;
	z-index: 999;
	pointer-events: none;
	height: 16px;
	width: 100%;
}

.current-time-line:before {
	content: "";
	top: 50%;
	left: 0;
	position: absolute;
	z-index: 200;
	transform: translateY(-50%);
	background: #5D84FE;
	height: 2px;
	width: 100%;
	opacity: .7;
}

.happyHourContainer {
	/* padding: 10px; */
	opacity: .3;
	position: relative;
	float: left;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Prevent the text contents of draggable elements from being selectable. */
[draggable] {
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	/* Required to make elements draggable in old WebKit */
	-khtml-user-drag: element;
	-webkit-user-drag: element;
}

.drag-item {
	cursor: pointer;
}

.drag-item.over {
	border: 2px dashed #ccc;
}

.drag-item.dragging {
	opacity: .4;
}

.portlet-placeholder2 {
	float: left;
	height: 40px;
	width: 100%;
	background-color: #aae367;
	border: 1px dashed darkgrey;
	text-align: center;
	padding-top: 5px;
	color: #484848;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	/* Required to make elements draggable in old WebKit */
	-khtml-user-drag: element;
	-webkit-user-drag: element;
}

/* .cd-schedule-day .currentTime > div {
	-webkit-transform: translateY(50%);
	-ms-transform: translateY(50%);
	transform: translateY(50%);
} */

#add-new-appointment .jconfirm-buttons {
	float: none;
}

#add-new-appointment .jconfirm-title-c {
	text-align: center;
}

#add-new-appointment button {
	float: none;
	text-transform: inherit;
	font-size: 16px;
	font-weight: normal;
	line-height: 2em;
}

.dragIsInProgress {
	transform: scale(.9);
}

@media only screen and (max-width: 1024px) {
	.dragIsInProgress {
		transform: scale(1);
	}
}

.appointment-preview {
	opacity: .6;
	border: 2px solid red;
}

.appointment-highlight {
	border: 2px solid darkgrey;

	background-image: repeating-linear-gradient(
			-45deg,
			transparent,
			transparent 1rem,
			rgba(255, 255, 255, 0.3) 1rem,
			rgba(255, 255, 255, 0.3) 2rem
	);
	background-size: 200% 200%;
	animation: barberpole 10s linear infinite;
}

/* .salonic-calendar .timeline li span:after {
	content: '';
	position: absolute;
	top: 9px;
	left: 39px;
	width: 8px;
	height: 1px;
	background: #EAEAEA;
}

.salonic-calendar .timeline li span sup {
	border-bottom: 1px solid #EAEAEA;
}

 */


.salonic-calendar .employee-off {
	cursor: pointer;
	background-image: linear-gradient(
			45deg, #ededed 25%, #dddddd 25%, #dddddd 50%, #ededed 50%, #ededed 75%, #dddddd 75%, #dddddd 100%) !important;
	background-size: 4px 4px !important;
}

@media (max-width: 700px) {
	.salonic-calendar .events-group > ul.last {
		border-right: 1px solid rgba(232, 232, 232, 0.6) !important;
	}

	.salonic-calendar .employee-off {
		cursor: pointer;
		background-image: linear-gradient(45deg, #ededed 25%, #dddddd 25%, #dddddd 50%, #ededed 50%, #ededed 75%, #dddddd 75%, #dddddd 100%) !important;;
		background-size: 4.00px 4.00px !important;
	}

	.salonic-calendar .employee-holiday {
		background: rgba(240, 61, 37, 0.25) !important;
	}

	.date-indicator-container.overflow-hack {
		overflow: unset;
		white-space: unset;
		height: 46px;
	}

	.date-indicator-container {
		width: 380px;
		overflow: hidden;
		overflow-x: auto;
		white-space: nowrap;
		padding-left: 35px;
		padding-right: 10px;
	}

	.salonic-calendar .top-info-day small, .salonic-calendar .top-info-week small {
		font-size: 9px !important;
	}

	.calendarInterfaceButtons {
		/* align-items: center; */

		width: 380px;
		/* overflow: hidden;
		overflow-x: auto;
		white-space: nowrap; */

		padding-left: 10px;
		padding-right: 10px;
	}

	.calendarInterfaceButtons .btn {
		font-size: 14px !important;
	}

	.availability-dot:after {
		left: 0 !important;
		width: 4px !important;
		height: 4px !important;
		-moz-border-radius: 2px !important;
		-webkit-border-radius: 2px !important;
		border-radius: 2px !important;
		top: 17px !important;
	}

	.employee-selector {
		overflow: hidden;
		overflow-y: scroll;
		max-height: 65%;
	}

	.salonic-calendar {
		margin: 0;
		overflow: hidden;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
	}

	.cd-schedule-3day .events.expanded,
	.cd-schedule-week .events.expanded {
		min-width: 950px !important;
	}

	.cd-schedule-week .events,
	.cd-schedule-3day .events,
	.cd-schedule-day .events {
		min-width: calc(100% - 50px) !important;
		width: calc(100% - 50px) !important;
	}

	.cd-schedule-day .events.employee-single {
		min-width: calc(100% - 50px) !important;
		width: calc(100% - 50px) !important;
	}

	.day-label.today:before {
		display: none;
	}

	.top-info-week.today {
		background-color: #e4e4e4 !important;
	}

	.salonic-calendar .top-info > .day-label {
		font-weight: normal;
	}

	.cd-schedule-day .events.expanded {
		min-width: 550px !important;
	}

	.calendarInterfaceButtons {
		margin-bottom: 5px;
	}

	.buttons-icons .btn {
		margin-bottom: 4px;
	}

	.cd-schedule-week .top-info-employees .employeeName img,
	.cd-schedule-3day .top-info-employees .employeeName img {
		width: 20px !important;
		height: 20px !important;
	}

	.cd-schedule-week .top-info,
	.cd-schedule-3day .top-info {
		padding: 5px 0;
		font-size: 13px;
	}
}

/* .employee-name-container {
	font-weight: bold !important;
} */

.cd-schedule-week .employee-name-container,
.cd-schedule-3day .employee-name-container {
	font-size: 12px !important;
}

.ui-sortable-helper {
	border: 1px dashed darkgrey;
}

.employee-selector .employee-item.active .image {
	position: relative;
}

.employee-selector .employee-item.active .image:before {
	content: "";
	background: url(data:image/png;base64,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) no-repeat bottom right;
	background-size: 50%;
	position: absolute;
	width: 30px;
	height: 30px;
	color: #31CE36 !important;
	right: -3px;
	top: -2px;
	z-index: 999;
}

.employee-selector .employee-item .image img {
	height: 30px !important;
}

.employee-selector .employee-item.active .image img {
	border: 2px solid #3dc71b;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	opacity: 0.9;
}

.employee-selector > .employee-item.active > a,
.employee-selector > .employee-item.active > a:focus,
.employee-selector > .employee-item.active > a:active {
	background: none !important;
	color: black !important;
}

.employee-selector-button,
.specialization-selector-button {
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.employee-selector > .employee-item .text {
	padding-left: 3px;
}

.employee-selector > .employee-item.active .text {

}

.allowDoubleBookings .salonic-calendar .events .single-event {
	width: 80%;
	word-break: break-all;
}

.expand-calendar-button.active {
	background-color: #49c5db;
	border-color: #49c5db;
	color: white;
}

@keyframes barberpole {
	100% {
		background-position: 100% 100%;
	}
}

.headerSize-small .top-info-employees .employee-container {
	max-height: 40px !important;
}

.headerSize-small .top-info-employees .employeeName img {
	height: 25px !important;
	width: 25px !important;
}

.appointment-details-scroll {
	max-height: 650px;
	overflow-y: auto;
}


.text-primary2 {
	color: #5D84FE;
}

.guest-data-container .currentDateText {
	font-size: 16px !important;
}

@-webkit-keyframes heartBeat {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	14% {
		-webkit-transform: scale(1.05);
		transform: scale(1.05);
	}

	28% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	42% {
		-webkit-transform: scale(1.05);
		transform: scale(1.05);
	}

	70% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

@keyframes heartBeat {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	14% {
		-webkit-transform: scale(1.05);
		transform: scale(1.05);
	}

	28% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	42% {
		-webkit-transform: scale(1.05);
		transform: scale(1.05);
	}

	70% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

.heartBeat {
	-webkit-animation-name: heartBeat;
	animation-name: heartBeat;
	-webkit-animation-duration: 1.3s;
	animation-duration: 1.3s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
}

#guestAppointmentHistory {
	padding: 0;
}

.appointment-details .panel-heading {
	position: relative;
}

.appointment-comment {
	opacity: .5;
	display: block;
	font-size: 10px;
}

.salonic-calendar .tooltip-inner, .tooltip-inner {
	min-width: 150px;
	background-color: #f9fbfd;
	color: #484848;
	border-radius: 5px;
	-webkit-box-shadow: 2px 6px 15px 0px rgba(69, 65, 78, 0.1);
	-moz-box-shadow: 2px 6px 15px 0px rgba(69, 65, 78, 0.1);
	box-shadow: 2px 6px 15px 0px rgba(69, 65, 78, 0.1);
	border-left: 3px solid #5D84FE;
}

.salonic-calendar .tooltip.top .tooltip-arrow,
.tooltip.top .tooltip-arrow {
	border-top-color: #f9fbfd;
}

.salonic-calendar .tooltip.left .tooltip-arrow,
.tooltip.left .tooltip-arrow {
	border-left-color: #f9fbfd;
}

.salonic-calendar .tooltip.bottom .tooltip-arrow,
.tooltip.bottom .tooltip-arrow {
	border-bottom-color: #f9fbfd;
}

.salonic-calendar .tooltip.right .tooltip-arrow,
.tooltip.right .tooltip-arrow {
	border-right-color: #49c5db;
}

.expand-calendar-button i {
	transform: rotate(45deg);
}

.page-calendar-index-container .jconfirm .jconfirm-box {
	background: #f9fbfd !important;
}

.appointment-service-container {
	border-left: 3px solid #5D84FE;
	padding-left: 4px;
	margin-bottom: 8px;
	border-bottom: 1px solid #EEF0F2;
}

.paymet-waiting-icon {
	font-size: 10px;
}

.padder .dropup.btn {
	padding: 0;
}

.calendar-guest {
	font-size: 85%;
}

.isBreak .event-service-title {
	font-weight: bold;
}

.appointment-bottom-container {
	position: absolute;
	bottom: 4px;
	left: 8px;
	right: 11px;
	height: 18px;
}

.updatedCalendarView {
	padding-bottom: 65px;
}

.appointment-time-text {
	opacity: .7;
	font-size: 80%;
	display: block;
}

.cd-schedule-day .dailyNote {
	position: absolute;
	left: 0;
	top: 5px;
	width: 30px;
}

.cd-schedule-3day .dailyNote,
.cd-schedule-week .dailyNote {
	font-size: 14px;
}

/* .picker__day--selected, .picker__day--selected:hover, .picker--focused .picker__day--selected {
	background: none !important;
	color: black !important;
} */

.availability-red:after {
	background-color: rgba(218, 38, 48, 1);
	color: white !important;
}

.picker__day {
	position: relative;
}

#datePickerContainer .tooltip.in {
	/* background-color: #1572E8 !important;
	color: #ffffff !important; */
	opacity: 1 !important;
}

#datePickerContainer .tooltip-inner {
	background-color: #f3f4f5 !important;
	color: #484848 !important;
}

.picker__weekday {
	text-align: center;
}

.availability-orange:after {
	background-color: #fbad00 !important;
	color: white !important;
}

.availability-dot:after {
	position: absolute;
	top: 18px;
	left: 16px;
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}


.availability-green:after {
	background-color: #36d96b !important;
	color: white !important;
}

.deposit-container.disabled {
	opacity: .5;
}

.btn-disabled {
	opacity: .5;
}

.calendar-interface-size-small .free-event-text {
	padding-top: 3px !important;
}

.calendar-interface-size-medium .free-event-text {
	padding-top: 9px !important;
}

.calendar-interface-size-big .free-event-text {
	padding-top: 25px !important;
}

.date-short-day {
	display: block;
	font-size: 200%;
}

.headerSize-small .date-short-day {
	font-size: 150%;
}


.timeline .text-sub {
	padding-left: 20px !important;
	font-size: 10px;
	opacity: .7;
}


.ui-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	display: block;
	-ms-touch-action: none;
	touch-action: none;
}

.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
	display: none;
}

.ui-resizable-n {
	cursor: n-resize;
	height: 7px;
	width: 100%;
	top: -5px;
	left: 0;
}

.ui-resizable-s {
	cursor: s-resize;
	height: 7px;
	width: 100%;
	bottom: -5px;
	left: 0;
}

.ui-resizable-e {
	cursor: e-resize;
	width: 7px;
	right: -5px;
	top: 0;
	height: 100%;
}

.ui-resizable-w {
	cursor: w-resize;
	width: 7px;
	left: -5px;
	top: 0;
	height: 100%;
}

.ui-resizable-se {
	cursor: se-resize;
	width: 12px;
	height: 12px;
	right: 1px;
	bottom: 1px;
}

.ui-resizable-sw {
	cursor: sw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	bottom: -5px;
}

.ui-resizable-nw {
	cursor: nw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	top: -5px;
}

.ui-resizable-ne {
	cursor: ne-resize;
	width: 9px;
	height: 9px;
	right: -5px;
	top: -5px;
}

.employee-is-off {
	opacity: .4;
}

.calendarInterfaceButtonsBottom .add-type-selector {
	bottom: 100%;
	top: auto;
}

.top-info-employees {
	position: relative;
}

.top-info-employees::before {
	content: "";
	position: absolute;
	width: 1px;
	height: 100%;
	right: -1px;
	background: white;
	top: 0;
}

.top-info-employees::after {
	content: "";
	position: absolute;
	width: 1px;
	height: 19px;
	top: 50%;
	transform: translateY(-50%);
	background: #E3E7F0;
}

/* .salonic-calendar-controls {
	overflow: hidden;
	overflow-x: auto;
	white-space: nowrap;
} */


.top-info-container,
.top-info-container > div {
	transition: 0.15s ease-out;
}

.msbc-scroll-progress .employee-container {
	font-size: .7em !important;
}

.msbc-scroll-progress .employee-name-container {
	font-size: .9rem;
}

.msbc-scroll-progress .employeeName img {
	width: 15px;
	height: auto;
}


.salonic-calendar .events-group > ul.separate-day {
	border-right: 2px solid rgba(93, 132, 254, .6) !important;
}