/**********************************
 * Custom Styles
 *********************************/
body {
	background-color: #eff2fa;
}
.sidebar {
	background-color: #002447;
}
.navbar {
	background-color: #eff2fa;
}
.header-button-right {
	right: 10px;
}
#sidebarMenu .nav-link {
	color: #eff2fa;
}
#sidebarMenu .nav-link.active {
	color: #6fbedc;
	border-radius: 5px;
}
#sidebarMenu .nav-link:not(.active):hover {
	color: #6fbedc;
	border-radius: 5px;
}
#sidebarMenu .nav-link:focus {
	color:  #eff2fa;
}

/**********************************
 * Signup Styles
 *********************************/
.signup {
	background-color: #85B2D6;
}
.signup-red {
	background-color: #ff7459;
}
.signup-green {
	background-color: #0c7387;
}
.signup-darkgreen {
	background-color: #06363f;
}
.signup-lightgreen {
	background-color: #14c0e1;
}
.signup-lightestgreen {
	background-color: #e4f9fd;
}
/**********************************
 * Dashboard Page
 *********************************/
.SectionHeader {
	background-color: #0c7387;
	font-size: 28px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
section {
	border-radius: 10px;
	background-color: #fff;
}
.ModalHeader {
	background-color: #0c7387;
}


.color-box {
  	width: 30px;
  	height: 30px;
  	border-radius: 5px;
}
.color-box:hover {

}
.color-box.active {

}

#Upcoming {
	max-height: 750px;
	overflow: scroll;
}
.time-slot {
	width: 100%;
	height: 60px;
	border-radius: 5px;
    text-align: center;
    box-sizing: border-box;
    -webkit-transition: border .2s ease-in;
    -moz-transition: border .2s ease-in;
    -o-transition: border .2s ease-in;
    transition: border .2s ease-in;
}
.time-slot.available {
	color: #2662F0;
	border: 1px solid #2662F0;
	transition: width 0.5s;
}
.time-slot.blocked {
	color: red;
	border: 1px solid red;
	transition: width 0.5s;
}
.time-slot.blocked:hover {
	cursor: pointer;
	border-width: 2px;
}
.time-slot.disabled {
	color: #cecece;
	border: 1px solid #cecece;
}
.time-slot.available:hover {
	cursor: pointer;
	border-width: 2px;
}
.block-slot, .remove-block-slot {
	width: 45%;
	height: 60px;
	border: 1px solid red;
	border-radius: 5px;
    text-align: center;
    box-sizing: border-box;
}
.availability-holder {
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
}

#ClientsTable tr:hover {
	cursor: pointer;
}


/**********************************
 * Welcome Message
 *********************************/
.welcome-back {
	background-color: #0c7387;
    background-size: contain;
}
.welcome-back .lap-person {
	margin-top: -70px;
	margin-bottom: -30px;
	width: 250px;
}
.welcome-back .lap-person img {
	width: 100%;
}

/**********************************
 * Upcoming Meetings Section
 *********************************/
.meeting {
	height: 75px;
}
.meeting-icon p {
	height: 50px;
	width: 50px;
	font-size: 30px;
	border-radius: 10px;
	margin-right: 20px;
}
.meeting-icon.red p {
	color: #EC957A;
	background-color: #FFE9E2;
}
.meeting-icon.yellow p {
	color: #F4C100;
	background-color: #FFF6D4;
}
.meeting-icon.purple p {
	color: #7159DB;
	background-color: #D9D1FC;
}
.meeting-title {
	font-weight: bold;
}

/**********************************
 * Calendar Area
 *********************************/
#NextMonth:hover, #PreviousMonth:hover {
	cursor: pointer;
}
#MonthName {
	text-transform: uppercase;
}
#DashboardCalendar td {
	min-height: 50px;
	width: 14.26%;
	border: 1px solid #cecece;
	border-radius: 5px;
	background-color: #fff;
}
#DashboardCalendar td.today {
	background-color: #6fbedc;
}
#DashboardCalendar td.inactive {
	background-color: #f9fbfd;
}
#DashboardCalendar td.thisMonth:hover {
	background-color: #dedede;
	cursor: pointer;
}
#DashboardCalendar td.today:hover {
	cursor: pointer;
}
#DashboardCalendar td.clicked {
	background-color: #dedede;
}
#DashboardCalendar td.clicked:hover {
	cursor: auto;
}
.MonthHolder {
	background-color: #0c7387;
	font-size: 2em;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.CalendarArea {
	border: 1px solid #cecece;
	border-radius: 10px;
}
#DashboardCalendar th {
	font-size: 1.0em;
}

#DashboardCalendar tbody tr td:first-child {
	border-left: none;
}
#DashboardCalendar tbody tr td:last-child {
	border-right: none;
}

.day-field-wrapper, .events-wrapper {
	padding-left: 10px;
	min-height: 30px;
}
.meeting-dot {
	height: 12px;
	width: 12px;
	border-radius: 12px;
	padding-right: 5px;
	display: inline-block;
}



/*Custom Tooltip Area for Calendar TRIAL */
.tooltips {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltips .tooltiptext {
  visibility: hidden;
  width: 250px;
  background-color: #F8E9FF;
  text-align: left;
  border-radius: 1px;
  border-left:5px solid #BC2DFF;
  padding: 5px 0 5px 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: 0px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltips:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}


/**********************************
 * Clients Area
 *********************************/
.ClientsArea {
	border-radius: 10px;
	position: relative;
	background-color: #fff;
}
.AddClientButton {
	position: absolute;
	right: 10px;
}
.sessions-list {
	list-style-type: none;
	width: 100%;
	max-width: 190px;
	overflow-x: scroll;
}
.session-dot {
	height: 24px;
	width: 24px;
	border-radius: 24px;
	margin-right: 8px;
}
.session-dot:hover {
	cursor: pointer;
}
.session-dot-modal {
	height: 40px;
	width: 40px;
	border-radius: 40px;
	display: inline-block;
	text-align: center;
	margin: 6px;
	padding-top: 4px;
	font-size: 20px;
}
.sessions-used-total {
	font-size: 20px;
}


div.Tooltip {
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 1em;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
div.Tooltip:hover span {
  opacity: 1;
  transform: translate(-50%, 0);
}
div.Tooltip span {
  position: absolute;
  left: 50%;
  bottom: 100%;
  opacity: 0;
  margin-bottom: 1em;
  padding: 1em;
  background-color: #fff;
  border: 1px solid #ADC9E0;
  font-size: 0.6em;
  line-height: 1.6;
  text-align: left;
  white-space: wrap;
  width: 300px;
  transform: translate(-50%, 1em);
  transition: all 0.15s ease-in-out;
}
div.Tooltip span::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  border: 0.5em solid transparent;
  border-top-color: #000;
  transform: translate(-50%, 0);
}



.color-picker{
    position: relative;
}
.color-indicator{
    display: inline-block;
    width: 200px;
    height: 200px;
    background-color: #fff;
    border-radius: 20px;
    vertical-align: middle;
}
#color-picker{
    display: inline-block;
    vertical-align: middle;
    margin-left: 40px;
}

/**********************************
 * Client Area
 *********************************/
#AddContractButton {
	right: 10px;
}

/*#ContractsToSignTable th, #ContractsToSignTable td {
	text-align: center;
}*/

#ContractsTable tr:hover {
	cursor: pointer;
}
table th {
	font-size: 16px;
}

/*#SessionsTable th, #SessionsTable td, #InvoicesTable th, #InvoicesTable td {
	text-align: center;
}*/

#InvoicesTable, #SessionsTable, #ContractsTable, #ContractsToSignTable {
	width: 90%;
}
#SessionsTable tr:hover {
	cursor: pointer;
}

.session-box {
  	width: 30px;
  	height: 30px;
  	border-radius: 5px;
}
.session-box.ok {
	background-color: #cecece;
}
.session-box.future {
	background-color: yellow;
}
.session-box.missed {
	background-color: red;
}
.session-box.success {
	background-color: green;
}

.LimitHeightArea {
	max-height: 500px;
	overflow: scroll;
}

#CopyLinkButton:hover {
	cursor: pointer;
}

/**********************************
 * Invoices Area
 *********************************/
.InvoicesArea {
	border-radius: 10px;
	background-color: #fff;
}
.invoice-status {
	border-radius: 5px;
}
.AddInvoiceButton {
	position: absolute;
	right: 10px;
}
#Invoices {
	position: relative;
}
#InvoicesTable tr:hover {
	cursor: pointer;
}

img.stripe-invoices-logo {
	max-width: 50px;
}




/**********************************
 * Profile Area
 *********************************/
.ProfileImage {
	border-radius: 50%;
	width: 200px;
	height: 200px;
	border: 5px solid #85B2D6;
}
.ProfileImageUpload {
	background-color: #85B2D6;
	border-radius: 50%;
	position: absolute;
	bottom: 0%;
	right: 40%;
}
/* Drag/Drop File area */
.upload-drop-zone {
  height: 200px;
  border-width: 2px;
  margin-bottom: 20px;
  color: #ccc;
  border-style: dashed;
  border-color: #ccc;
  line-height: 200px;
  text-align: center
}

/**********************************
 * Schedule Area
 *********************************/
.cal-icon-holder {
	width: 50px;
	height: 50px;
	border-radius: 50%;
}
.disconnect-calendar:hover {
	cursor: pointer;
	text-decoration: underline;
}

.scroll-list {
	list-style-type: none;
	padding-left: 0;
}
.scroll-list:before, .scroll-list:after {
	content: "";
    display: block;
    width: 100%;
    height: 80px;
}

.start_selecttime.active {
	color: blue;
}

/**********************************
 * Contracts Area
 *********************************/
.folder-holder {
	background-color: #85B2D6;
	border-radius: 5px;
}
#CreateContract {
	right: 10px;
}

.DeleteContract:hover {
	cursor: pointer;
}

/**********************************
 * Themes Area
 *********************************/
.theme-holder {
	text-align: center;
}
.theme-holder.active {
	border: 1px solid #75B2D6;
	border-radius: 5px;
}
.theme-holder img {
	width: 50px;
	height: auto;
}

/**********************************
 * Meeting Types Area
 *********************************/
#AddMeetingType {
	right: 10px;
}
.MeetingTypesDescription {
	height: 50px;
	max-height: 50px;
	overflow: scroll;
}

/**********************************
 * Booked Meetings Page
 *********************************/
.accordion-button-class:hover {
	cursor: pointer;
	background-color: #cecece;

}
/**********************************
 * Booking page
 *********************************/
.BookingInfoCalendar {
	background-color: #425c76;
	color: #fff;
}
.ProfileImageArea img {
	border-radius: 50%;
	width: 100px;
	height: 100px;
	border: 3px solid #fff;
}
.ProfileImageAreaBook {
	border-radius: 50%;
	width: 100px;
	height: 100px;
	border: 3px solid #fff;
}
.BookMonthHolder {
	background-color: #C7E0F4;
	font-size: 1.5em;
	border-radius: 5px;
}
#BookCalendar {
	border-collapse: separate;
	border-spacing: 10px 10px;
}
#BookCalendar th {
	text-transform: uppercase;
	text-align: center;
}
#BookCalendar td {
	height: 50px;
	width: 50px;
	background-color: #F1F3F5;
	margin: 5px;
	text-align: center;
	vertical-align: middle;
}
#BookCalendar td.date_lastmonth {

}

#BookCalendar td .time-slot {
	display: none;
}
#BookCalendar td .day-wrapper {
	width: 25px;
	margin: auto;
	padding-bottom: 2px;
	border-radius: 2px;
}
#BookCalendar td.has-availability .day-wrapper {
	border-bottom: 4px solid #2662F0;
}
#BookCalendar td.today {
	border: 3px solid #C7E0F4;
	border-radius: 5px;
}
#BookCalendar td.has-availability:hover {
	cursor: pointer;
	background-color: #85B2D6;
}
#BookCalendar td.active {
	background-color: #85B2D6;
	color: #fff;
}



#BookCalendarNew {
	border-collapse: separate;
	border-spacing: 10px 10px;
}
#BookCalendarNew th {
	text-transform: uppercase;
	text-align: center;
	color: #fff;
	font-size: 16px;
}
#BookCalendarNew td {
	background-color: #F1F3F5;
	opacity: 0.7;
	text-align: center;
	padding: 0;
	vertical-align: middle;
	border: 3px solid transparent;
	border-radius: 5px;
}
#BookCalendarNew td.date_lastmonth {

}

#BookCalendarNew td .time-slot {
	display: none;
}
#BookCalendarNew td .day-wrapper {
	width: 25px;
	margin: auto;
	padding-bottom: 2px;
	border-radius: 2px;
}

#BookCalendarNew td.has-availability .day-wrapper {
	border-bottom: 4px solid #2662F0;
}
#BookCalendarNew td.today {
	border: 3px solid #C7E0F4;
	border-radius: 5px;
}
#BookCalendarNew td.has-availability {
	opacity: 1;
}
#BookCalendarNew td.has-availability:hover {
	cursor: pointer;
	background-color: #85B2D6;
}
#BookCalendarNew td.active {
	background-color: #85B2D6;
	color: #fff;
}
#BookCalendarNew td.inactive {
	opacity: 0.4;
}

#TimeSlotsNew {
	max-height: 500px;
	overflow: scroll;
}




#alert-success .feather {
	width: 100px;
	height: 100px;
}

.time-slot-to-choose {
	width: 100%;
	color: #2662F0;
	border: 1px solid #2662F0;
	border-radius: 2px;
  text-align: center;
  box-sizing: border-box;
  -webkit-transition: border .2s ease-in;
  -moz-transition: border .2s ease-in;
  -o-transition: border .2s ease-in;
  transition: border .2s ease-in;
}
.time-slot-to-choose:hover {
	cursor: pointer;
	border-width: 2px;
}

#loader {
    border: 12px solid #f3f3f3;
    border-radius: 50%;
    border-top: 12px solid #444444;
    width: 70px;
    height: 70px;
    animation: spin 1s linear infinite;
}
  
@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}
  
.center {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
#loader_out{
  z-index: 9999;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #bfbbb79c;
  /*display: none;*/
}


.mobi-show {
	display: none;
}
/**************************
 * Canvas Area
***************************/
canvas {
  cursor: crosshair;
  border-bottom: 1px dashed #000 !important;
} 


@media (max-width: 575.98px) {
	.vh-sm-50 {
		height: 50vh !important;
	}
	.mobi-hide {
		display: none;
	}
	.sessions-list {
		width: 50% !important;
	}
	#BookCalendarNew th {
		font-size: 12px;
		padding: 0px;
	}
	#BookCalendarNew {
		border-spacing: 5px 5px;
	}
	#BookCalendarNew td .day-wrapper {
		width: 75%;
		font-size: 14px;
	}
	.mobi-show {
		display: inline-block;
	}
	.ProfileImage {
		width: 150px;
		height: 150px;
	}
}