/**
 * Version 2.0
 *
 * CONTENT SECTIONS:
 * Theme Color Styles
 * Font Size Styles
 * Bootstrap Override Styles
 * Helper Styles
 * Date Picker Styles
 * Header Styles
 * Footer Styles
 * Modal Styles
 * Form Styles
 * Pagination Styles
 * Sidebar Styles
 * Events Styles
 * Manage Appointments Styles
 * General Styles
 * Print Styles
 * Bootstrap Extra Small Screens Styles
 * Bootstrap Small Screens Styles
 * Bootstrap Medium Screens Styles
 * Bootstrap Large Screens Styles
 * Other Screen Size Screens Styles / Miscellaneous Screen Size Styles
 *
 * ASCII Style Guide Reference
 * https://patorjk.com/software/taag/#p=display&v=0&f=Star%20Wars&t=Footer%20styles
 */



/**************************************************************************************
.___________. __    __   _______ .___  ___.  _______      ______   ______    __        ______   .______              _______.___________.____    ____  __       _______     _______.
|           ||  |  |  | |   ____||   \/   | |   ____|    /      | /  __  \  |  |      /  __  \  |   _  \            /       |           |\   \  /   / |  |     |   ____|   /       |
`---|  |----`|  |__|  | |  |__   |  \  /  | |  |__      |  ,----'|  |  |  | |  |     |  |  |  | |  |_)  |          |   (----`---|  |----` \   \/   /  |  |     |  |__     |   (----`
    |  |     |   __   | |   __|  |  |\/|  | |   __|     |  |     |  |  |  | |  |     |  |  |  | |      /            \   \       |  |       \_    _/   |  |     |   __|     \   \
    |  |     |  |  |  | |  |____ |  |  |  | |  |____    |  `----.|  `--'  | |  `----.|  `--'  | |  |\  \----.   .----)   |      |  |         |  |     |  `----.|  |____.----)   |
    |__|     |__|  |__| |_______||__|  |__| |_______|    \______| \______/  |_______| \______/  | _| `._____|   |_______/       |__|         |__|     |_______||_______|_______/

Theme Color Styles
**************************************************************************************/

/***************************** Theme Color *****************************/

.text-primary,
.form-control,
input::placeholder,
input.form-control::placeholder,
.form-control::-webkit-input-placeholder,
.form-control:-moz-placeholder,
.form-control::-moz-placeholder,
.form-control:-ms-input-placeholder,
.btn-default,
/* Override Bootstrap style */
.nav.nav-tabs li a,
/* Override Bootstrap style */
.dropdown-menu > li > a,
.navbar-default .navbar-nav > li > a:not(
	#book-button-header-large,
	#book-button-header-mobile,
	.btn-book-appt
) {
	color: #757575;
}

/* Override Bootstrap style */
/* TODO - no idea why, but when this class is added above, the style is ignored, not overwritten, but ignored. */
.btn-default,
.text-primary {
	color: #757575;
}

.timezone-tool-tip .toolTipText {
	border: 1px solid #757575;
}

.progress-row-container .faux-progress-bar {
	background-color: #757575;
}

/***************************** Theme Color *****************************/
/* Exists in Bootstrap 4 but not in Bootstrap 3 */
.text-secondary,
.primary-label,
.history-toggle-container .side-bar-section .section-title,
.rw-btn,
.progress-container .file-confirmation-heading,
.progress-container .file-confirmation-text {
	color: #424242
}

.page-heading {
	background-color: #424242;
}

.rw-calendar .rw-btn.rw-state-selected,
.rw-calendar-grid td.active:before,
.rw-calendar-grid td.active:hover:before {
	border: 1px solid #424242;
}

.nav.nav-tabs li.active a {
	border-top: 2px solid #424242;
}

/***************************** Theme Color *****************************/
.text-white,
.modal .close.text-white,
.btn-book-appt,
.navbar-default .navbar-nav > li > a.btn-book-appt,
.form-group.with-errors span.help-block,
.form-group.with-errors span.help-block-alt,
.rw-calendar-grid thead:after,
.modal .page-heading .close,
.page-heading,
.tooltip-inner {
	color: #FFFFFF;
}

/* TODO - New Manage Appointments page design; to be reviewed. */
.btn-date-range-form:hover,
/* TODO - New Manage Appointments page design; to be reviewed. */
.btn-date-range-form {
	color: #FFFFFF !important;
}

/* Exists in Bootstrap 4 but not in Bootstrap 3 */
.bg-white,
/* TODO - New Manage Appointments page design; to be reviewed. */
.white-background-active:active,
/* TODO - New Manage Appointments page design; to be reviewed. */
.white-background-focus:focus,
/* Override Bootstrap style */
.navbar-default,
/* Override Bootstrap style */
.modal-dialog,
/* Override Bootstrap style */
.tab-content,
 /* Override React Widget Calendar style */
.rw-calendar,
.selection-item,
.content-list,
.spacing-container,
.landingPageCustomContent,
.history-toggle-container .side-bar-section .fa,
/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments-date-range .input-group-addon,
.toolTipText {
	background-color: #FFFFFF;
}

/***************************** Theme Color *****************************/
a,
a:active,
.text-ternary,
.modal .close,
button.close,
.history-toggle-container .side-bar-section .fa-circle,
.navbar-default .navbar-nav li a.active,
.timezone-tool-tip.icon-question-circle:before {
	color: #212121;
}

/*Some text comes from the Legacy Admin interface and is applying a style, so we need to override it */
.modal a,
.modal a:active {
	color: #212121 !important;
}

/***************************** Theme Color *****************************/
.btn-ternary,
.pagination-wrap button {
	color: #212121;
	background-color: #FFFFFF;
	border: 1px solid #D6D6D6;
}

/***************************** Theme Color *****************************/
.history-toggle-container .side-bar-section.selected-border {
	border-left: 1px solid #1F2933;
}

/***************************** Theme Color *****************************/
.selected-add-on-service {
	background-color: #F3F9FD;
}

/***************************** Theme Color *****************************/
a:focus,
a:hover,
.modal .close:focus,
.modal .close:hover,
button.close:focus,
button.close:hover,
.navbar-default .navbar-nav > li > a:hover:not(
	#book-button-header-large,
	#book-button-header-mobile,
	.nav-tabs > li.active > a,
	.btn-book-appt
),
.navbar-default .navbar-nav > li > a:focus:not(
	#book-button-header-large,
	#book-button-header-mobile,
	.nav-tabs > li.active > a,
	.btn-book-appt
) {
	color: #66AFE9;
}

/*Some text comes from the Legacy Admin interface and is applying a style, so we need to override it */
.modal a:focus,
.modal a:hover {
	color: #66AFE9 !important;
}

/***************************** Theme Color *****************************/
.default-border,
.rw-calendar,
.modal-dialog,
.modal-content,
input[type=checkbox],
input[type=radio] {
	border: 1px solid #F5F5F5;
}

.default-border-l,
.rw-calendar:after {
	border-left: 1px solid #F5F5F5;
}

.default-border-r {
	border-right: 1px solid #F5F5F5;
}

.default-border-t,
.rw-calendar .rw-footer,
.rw-calendar:after {
	border-top: 1px solid #F5F5F5;
}

.default-border-b,
.selection-list > li,
.content-list li,
.nav-tabs,
.rw-calendar-grid thead th,
.rw-calendar thead > tr,
.rw-calendar:after,
.content-list li {
	border-bottom: 1px solid #F5F5F5;
}

.default-border-x,
.selection-list > li,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
	border-left: 1px solid #F5F5F5;
	border-right: 1px solid #F5F5F5;
}

.default-border-y {
	border-top: 1px solid #F5F5F5;
	border-bottom: 1px solid #F5F5F5;
}

.selection-list .account-holder {
	border-bottom: 5px solid #F5F5F5;
}

/***************************** Theme Color *****************************/
/* Override Bootstrap */
.navbar-default .mobile-burger-stack .navbar-toggle .icon-bar {
	background-color: #989898;
}

/***************************** Theme Color *****************************/
.rw-calendar-grid td .rw-btn.rw-off-range {
	color: #B3B3B3;
}

/***************************** Theme Color *****************************/
.rw-calendar-grid td .rw-btn:hover {
	background-color: #F0F0F0;
}

/***************************** Theme Color *****************************/
.container.select-date-and-time .hours-col a.disabled {
	color: #C1C1C1;
	border-color: #DADADA;
}

.container.select-date-and-time .hours-col a.disabled span {
	color: #C1C1C1;
}

/***************************** Theme Color *****************************/
.progress-row-container .file-delete-row {
	background-color: #FFFCF4;
}

/***************************** Theme Color *****************************/
.progress-container .progress-error-container {
	background-color: #FFF0F0;
	border: 2px solid #DE5F5F;
}

.progress-container .progress-error-container,
.progress-container .error-icon.fa-exclamation-circle {
	color: #DE5F5F
}

/***************************** Theme Color *****************************/
.progress-container .progress-warning-container {
	background-color: #FFF3CD;
	border: 2px solid #FFEEBA;
}

/***************************** Theme Color *****************************/
.progress-container .progress-warning-container,
.progress-container .warning-icon.fa-exclamation-circle {
	color: #856404;
}

/***************************** Theme Color *****************************/
.progress-container .progress-success-container {
	background-color: #F3FCF9;
	border: 2px solid #00C18D;
}

.progress-container .progress-success-container .fa {
	color: #00C18D;
}

/***************************** Theme Color *****************************/
.progress-row-container .file-delete-row .file-delete-confirm a,
.progress-row-container .file-delete-row .file-delete-confirm a:hover,
.progress-row-container .file-delete-row .file-delete-confirm a:active,
.progress-row-container .file-delete-row .file-delete-confirm a:visited {
	color: #FF6F6E;
}

/***************************** Theme Color *****************************/
.progress-row-container .file-delete-row .file-delete-cancel a,
.progress-row-container .file-delete-row .file-delete-cancel a:hover,
.progress-row-container .file-delete-row .file-delete-cancel a:active,
.progress-row-container .file-delete-row .file-delete-cancel a:visited {
	color: #169DDC;
}

/***************************** Theme Color *****************************/
/* TODO - New Manage Appointments page design; to be reviewed. */
.btn-date-range-form:hover {
	background-color: #0070C4;
}

/***************************** Theme Color *****************************/
.history-toggle-container .side-bar-section .fa-circle-o {
	color: #BDBDBD;
}

/***************************** Theme Color *****************************/
.btn-primary,
.button,
button,
a.btn,
input[type=button],
input[type=submit],
button[type=submit],
.side-nav li > a.active:first-child,
.event-list .event-full-icon {
	color: #FFFFFF;
	background-color: #616161;
	border: 1px solid #616161;
}

/* Override Bootstrap style */
/* TODO - no idea why, but when this class is added above, the style is ignored, not overwritten, but ignored. */
.btn-primary {
	color: #FFFFFF;
	background-color: #616161;
	border: 1px solid #616161;
}

.appointment-count-label {
	background-color: #616161;
}

/***************************** Theme Color *****************************/
.btn-secondary,
a.btn-secondary,
a.btn.btn-secondary,
button.btn-secondary,
input[type=button].btn-secondary,
input[type=submit].btn-secondary{
	color: #212121;
	background-color: #FFFFFF;
	border: 1px solid #212121;
}

/***************************** Theme Color *****************************/
.btn-primary:focus,
.btn-primary:hover,
button:not(.close, .rw-btn):focus,
button:not(.close, .rw-btn):hover,
.button:focus,
.button:hover,
.btn-ternary:focus,
.btn-ternary:hover,
button.btn:focus,
button.btn:hover,
input[type=button]:focus,
input[type=button]:hover,
input[type=submit]:focus,
input[type=submit]:hover,
.pagination-wrap button:focus,
.pagination-wrap button:hover,
.side-nav li > a.active:first-child:focus,
.side-nav li > a.active:first-child:hover {
	color: #FFFFFF;
	background-color: #424242;
	border: 1px solid #424242;
}

/* Override Bootstrap styles */
a.btn:focus,
a.btn:hover {
	color: #FFFFFF !important;
	background-color: #424242 !important;
	border: 1px solid #424242 !important;
}

/***************************** Theme Color *****************************/
.btn-primary.disabled,
.btn-primary.disabled.active,
.btn-primary.disabled.focus,
.btn-primary.disabled:active,
.btn-primary.disabled:focus,
.btn-primary.disabled:hover,
.btn-primary[disabled],
.btn-primary[disabled].active,
.btn-primary[disabled].focus,
.btn-primary[disabled]:active,
.btn-primary[disabled]:focus,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary,
fieldset[disabled] .btn-primary.active,
fieldset[disabled] .btn-primary.focus,
fieldset[disabled] .btn-primary:active,
fieldset[disabled] .btn-primary:focus,
fieldset[disabled] .btn-primary:hover,

.btn-secondary.disabled,
.btn-secondary.disabled.active,
.btn-secondary.disabled.focus,
.btn-secondary.disabled:active,
.btn-secondary.disabled:focus,
.btn-secondary.disabled:hover,
.btn-secondary[disabled],
.btn-secondary[disabled].active,
.btn-secondary[disabled].focus,
.btn-secondary[disabled]:active,
.btn-secondary[disabled]:focus,
.btn-secondary[disabled]:hover,
fieldset[disabled] .btn-secondary,
fieldset[disabled] .btn-secondary.active,
fieldset[disabled] .btn-secondary.focus,
fieldset[disabled] .btn-secondary:active,
fieldset[disabled] .btn-secondary:focus,
fieldset[disabled] .btn-secondary:hover,

button.disabled,
button.disabled.active,
button.disabled.focus,
button.disabled:active,
button.disabled:focus,
button.disabled:hover,
button[disabled],
button[disabled].active,
button[disabled].focus,
button[disabled]:active,
button[disabled]:focus,
button[disabled]:hover,
fieldset[disabled] button,
fieldset[disabled] button.active,
fieldset[disabled] button.focus,
fieldset[disabled] button:active,
fieldset[disabled] button:focus,
fieldset[disabled] button:hover,

.button.disabled,
.button.disabled.active,
.button.disabled.focus,
.button.disabled:active,
.button.disabled:focus,
.button.disabled:hover,
.button[disabled],
.button[disabled].active,
.button[disabled].focus,
.button[disabled]:active,
.button[disabled]:focus,
.button[disabled]:hover,
fieldset[disabled] .button,
fieldset[disabled] .button.active,
fieldset[disabled] .button.focus,
fieldset[disabled] .button:active,
fieldset[disabled] .button:focus,
fieldset[disabled] .button:hover,

.btn-ternary.disabled,
.btn-ternary.disabled.active,
.btn-ternary.disabled.focus,
.btn-ternary.disabled:active,
.btn-ternary.disabled:focus,
.btn-ternary.disabled:hover,
.btn-ternary[disabled],
.btn-ternary[disabled].active,
.btn-ternary[disabled].focus,
.btn-ternary[disabled]:active,
.btn-ternary[disabled]:focus,
.btn-ternary[disabled]:hover,
fieldset[disabled] .btn-ternary,
fieldset[disabled] .btn-ternary.active,
fieldset[disabled] .btn-ternary.focus,
fieldset[disabled] .btn-ternary:active,
fieldset[disabled] .btn-ternary:focus,
fieldset[disabled] .btn-ternary:hover,

.btn.disabled,
.btn.disabled.active,
.btn.disabled.focus,
.btn.disabled:active,
.btn.disabled:focus,
.btn.disabled:hover,
.btn[disabled],
.btn[disabled].active,
.btn[disabled].focus,
.btn[disabled]:active,
.btn[disabled]:focus,
.btn[disabled]:hover,
fieldset[disabled] .btn,
fieldset[disabled] .btn.active,
fieldset[disabled] .btn.focus,
fieldset[disabled] .btn:active,
fieldset[disabled] .btn:focus,
fieldset[disabled] .btn:hover,

input[type=button].disabled,
input[type=button].disabled.active,
input[type=button].disabled.focus,
input[type=button].disabled:active,
input[type=button].disabled:focus,
input[type=button].disabled:hover,
input[type=button][disabled],
input[type=button][disabled].active,
input[type=button][disabled].focus,
input[type=button][disabled]:active,
input[type=button][disabled]:focus,
input[type=button][disabled]:hover,
fieldset[disabled] input[type=button],
fieldset[disabled] input[type=button].active,
fieldset[disabled] input[type=button].focus,
fieldset[disabled] input[type=button]:active,
fieldset[disabled] input[type=button]:focus,
fieldset[disabled] input[type=button]:hover,

.text-muted,
a.text-muted:hover,
.text-muted:hover {
	color: #9E9E9E;
	background-color: rgba(189, 189, 189, 0.1);
	border: 1px solid #EEEEEE;
}

a:disabled {
	color: #9E9E9E;
}


input[type="checkbox"].disabled {
	appearance: none !important;
	width: 16px;
	height: 16px;
	border: 1px solid #BDBDBD !important;
	border-radius: 2px !important;
	cursor: not-allowed !important;
	pointer-events: none;
	background-color: #ffffff !important;
}

/* Style for the checked state with a custom checkmark color */
input[type="checkbox"].disabled:checked {
	background-color: #BDBDBD !important;
	border-color: #BDBDBD !important;
	position: relative !important;
	opacity: 0.5 !important;
}

/* Create the custom checkmark */
input[type="checkbox"].disabled:checked::after {
	content: "" ;
	position: absolute !important;
	top: 0px !important;
	left: 4px !important;
	width: 6px !important;
	height: 12px !important;
	border: solid rgb(255,255,255,0.9) !important;
	border-width: 0 3px 3px 0 !important;
	transform: rotate(35deg) !important;
}

/*Some text comes from the Legacy Admin interface and is applying a style */
.modal a:disabled {
	color: #9E9E9E !important;
}

/***************************** Theme Color *****************************/
.event-list .event-details-border {
	border: solid 1px rgba(193, 199, 200, 0.27);
}

/***************************** Theme Color *****************************/
/* TODO - New Manage Appointments page design; to be reviewed. */
.primary-theme-color,
/* TODO - New Manage Appointments page design; to be reviewed. */
.primary-color-icon:hover,
/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments-row .edit-icon-item:hover .edit-icon,
/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments-row .book-again-icon-item:hover .book-again-icon,
/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments-row .email-icon-item:hover .email-icon,
/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments-row .print-icon-item:hover .print-icon,
/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments-row .add-to-calendar-icon-item:hover .add-to-calendar-icon,
/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments-date-range .input-group-addon {
	color: #189CDC !important;
}

/* TODO - New Manage Appointments page design; to be reviewed. */
.primary-theme-background,
/* TODO - New Manage Appointments page design; to be reviewed. */
.btn-date-range-form {
	background-color: #189CDC !important;
}

/* TODO - New Manage Appointments page design; to be reviewed. */
.primary-theme-border {
	border: 1px solid #189CDC;
}

/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments-container .filter-buttons .calendar-button:active,
.manage-appointments-container .filter-buttons .calendar-button:focus {
	border: 1px solid #189CDC !important;
}

/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments-header .list-group-item .active-item {
	border-bottom: 3px solid #189CDC;
}

/***************************** Theme Color *****************************/
/* TODO - New Manage Appointments page design; to be reviewed. */
.default-text-color,
/* TODO - New Manage Appointments page design; to be reviewed. */
.default-text-color-active:active,
/* TODO - New Manage Appointments page design; to be reviewed. */
.default-text-color-focus:focus {
	color: #545454;
}

/***************************** Theme Color *****************************/
/* Override Bootstrap style */
.text-success {
	color: #00C38F !important;
}

/***************************** Theme Color *****************************/
/* TODO - New Manage Appointments page design; to be reviewed. */
.error-theme-text-color,
.text-alert {
	color: #F6705E;
}

.form-group.with-errors span.help-block,
.form-group.with-errors span.help-block-alt {
	background: #F6705E;
}

/***************************** Theme Color *****************************/
.rw-calendar:after {
	border-color: transparent transparent #CCCCCC transparent;
}

/***************************** Theme Color *****************************/
.progress-row-container .file-type-details .fa {
	color: #CCCCCC;
}

/***************************** Theme Color *****************************/
/* TODO - New Manage Appointments page design; to be reviewed. */
.item-label,
/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments-container .appointment-print-modal-dialog .modal-print-value,
/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments .appointment-cancellation-modal .close-cancellation-btn {
	color: #232323 !important;
}

/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments-lower-row,
/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments-details-row,
/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments-row .invalid-icon {
	color: #232323;
}

/***************************** Theme Color *****************************/
/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments-row .toggle-icon,
.manage-appointments-upper-row,
.manage-appointments .appointment-cancellation-modal h1,
.open-actions-icon,
.manage-appointments-row .dropdown,
.manage-appointments-row .dropdown a {
	color: #393939;
}

/***************************** Theme Color *****************************/
/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments-date-range .bootstrap-datetimepicker-widget th.next,
.manage-appointments-date-range .bootstrap-datetimepicker-widget th.prev {
	color: #439EF7;
}

/***************************** Theme Color *****************************/
/* TODO - New Manage Appointments page design; to be reviewed. */
.primary-border {
	border: 1px solid #C1C7C8 !important;
}
/* TODO - New Manage Appointments page design; to be reviewed. */
.primary-border-t {
	border-top: 1px solid #C1C7C8 !important;
}
/* TODO - New Manage Appointments page design; to be reviewed. */
.primary-border-r {
	border-right: 1px solid #C1C7C8 !important;
}
/* TODO - New Manage Appointments page design; to be reviewed. */
.primary-border-l {
	border-left: 1px solid #C1C7C8 !important;
}
/* TODO - New Manage Appointments page design; to be reviewed. */
.primary-border-b {
	border-bottom: 1px solid #C1C7C8 !important;
}
/* TODO - New Manage Appointments page design; to be reviewed. */
.primary-border-x {
	border-top: 1px solid #C1C7C8 !important;
	border-bottom: 1px solid #C1C7C8 !important;
}
/* TODO - New Manage Appointments page design; to be reviewed. */
.primary-border-y {
	border-left: 1px solid #C1C7C8 !important;
	border-right: 1px solid #C1C7C8 !important;
}

/***************************** Theme Color *****************************/
.history-toggle-container .history-toggle-row,
.control-bar,
.control-gray-bar {
	background-color: #EDEDED;
}

/***************************** Theme Color *****************************/
.container.select-date-and-time .hours-col.striped,
.container.select-date-and-time .hours-col a.disabled {
	background-color: #F7F7F7;
}

/***************************** Theme Color *****************************/
/* TODO - New Manage Appointments page design; to be reviewed. */
.inactive-item,
a.inactive-item,
.inactive-item a {
	color: #575757;
}

/***************************** Theme Color *****************************/
/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments-row .cancel-icon:hover,
.appointment-error-color,
.manage-appointments-row .invalid-icon .fa,
.invalid-appointment-message .fa {
	color: #D0021B;
}

/* TODO - New Manage Appointments page design; to be reviewed. */
.invalid-manage-appointment-row {
	border-left: 2px solid #D0021B !important;
}

/***************************** Theme Color *****************************/
/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments-date-range .bootstrap-datetimepicker-widget .day,
.manage-appointments-date-range .bootstrap-datetimepicker-widget .switch,
/*"dow" is not a typo, the library defines this for "day of the week"*/
.manage-appointments-date-range .bootstrap-datetimepicker-widget .dow,
.manage-appointments-container .date-range-text {
	color: #454D4F;
}

/***************************** Theme Color *****************************/
/* TODO - New Manage Appointments page design; to be reviewed. */
.red-text {
	color: #CA261D;
}

/* TODO - New Manage Appointments page design; to be reviewed. */
.red-background,
.manage-appointments .appointment-cancellation-modal .cancellation-btn:focus {
	background-color: #CA261D;
}

/***************************** Theme Color *****************************/
.overlay,
.react-overlay {
	background-color: #EFEFEF;
}

/***************************** Theme Color *****************************/
.form-control {
	border: 1px solid #CBCBCB;
}

/***************************** Theme Color *****************************/
/* TODO - New Manage Appointments page design; to be reviewed. */
.default-box-border {
	border: 1px solid #BABABA;
}

/***************************** Theme Color *****************************/
.tooltip-inner {
	border: 1px solid #3A3A3A;
	background-color: #3A3A3A;
}

/***************************** Theme Color *****************************/
.rw-calendar .rw-header {
	background: rgb(219, 219, 219);
}

/***************************** Theme Color *****************************/
.rw-btn {
	background: none;
	background-image: none;
	border: 1px solid transparent;
}

/***************************** Theme Color *****************************/
/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments-date-range .bootstrap-datetimepicker-widget .day {
	border: solid 0.8px #DBDBDB;
}

.rw-calendar-day-disabled {
	background-color: #DBDBDB;
}

/***************************** Theme Color *****************************/
/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments-date-range .bootstrap-datetimepicker-widget .day.active {
	background-color: #47A0F7;
	color: #FFFFFF;
}

/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments-date-range .bootstrap-datetimepicker-widget .day.today {
	border-bottom: 3px solid #47A0F7;
}

/***************************** Theme Color *****************************/
/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments-date-range .bootstrap-datetimepicker-widget .day.disabled {
	color: #A9A9A9;
}

/***************************** Theme Color *****************************/
/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments-date-range .bootstrap-datetimepicker-widget thead tr:nth-child(2) {
	border: solid 0.8px #D3D3D3;
}

/***************************** Theme Color *****************************/
/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments-row .favorite-icon {
	color: #EBB522;
}

/***************************** Theme Color *****************************/
/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments-row .dropdown-menu > li > a:focus,
.manage-appointments-row .dropdown-menu > li > a:hover {
	background-color: #F8F8F8;
}

/***************************** Theme Color *****************************/
/* TODO - New Manage Appointments page design; to be reviewed. */
.appointment-icons,
.appointment-icons a {
	color: #A8A8A8;
}

/***************************** Theme Color *****************************/
/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments .appointment-cancellation-modal .form-group {
	color: #383838;
}

/***************************** Theme Color *****************************/
/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments .appointment-cancellation-modal textarea.form-control,
.manage-appointments .appointment-cancellation-modal .close-cancellation-btn,
.manage-appointments .appointment-cancellation-modal .close-cancellation-btn:focus {
	border: 1px solid #CDCDCD;
}

/***************************** Box Shadow Color *****************************/
.progress-row-container,
.container.select-date-and-time .hours-col a.disabled,
.form-control:focus,
.btn,
.form-control.btn,
.rw-calendar .rw-header .rw-btn-view[disabled],
.manage-appointments-container .filter-buttons .calendar-button:active,
.manage-appointments-container .filter-buttons .calendar-button:focus {
	box-shadow: none;
	-webkit-box-shadow: none;
}

/***************************** Box Shadow Color *****************************/
.cookie-overlay {
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

/***************************** Box Shadow Color *****************************/
.btn:focus {
	box-shadow: 0 0 8px #74C4EA;
	-webkit-box-shadow: 0 0 8px #74C4EA;
}

/***************************** Box Shadow Color *****************************/
.event-list .event-details-border {
	box-shadow: inset 0 2px 8px 0 rgba(0, 0, 0, 0.05);
}

/***************************** Box Shadow Color *****************************/
.modal-content {
	box-shadow: 0 0 14px rgba(0, 0, 0, 0.2);
	-webkit-border-radius: 5px;
}

.rw-calendar {
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/***************************** Box Shadow Color *****************************/
.rw-calendar:before {
	border: inset 6px;
	border-color: transparent transparent #FFFFFF transparent;
	border-bottom-style: solid;
}

/***************************** Box Shadow Color *****************************/
/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments-details-row {
	-webkit-box-shadow: 0px 2px 8px 0 rgba(193, 199, 200, 0.27);
	-moz-box-shadow: 0px 2px 8px 0 rgba(193, 199, 200, 0.27);
	box-shadow: inset 0 2px 8px 0 rgba(0, 0, 0, 0.05), inset 0 -2px 8px 0 rgba(0, 0, 0, 0.05);
}

/***************************** Box Shadow Color *****************************/
/* TODO - New Manage Appointments page design; to be reviewed. */
.popover.date-range-container {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.17);
}

/**************************************************************************************
End Theme Color Styles
**************************************************************************************/


/**************************************************************************************

 _______   ______   .__   __. .___________.        _______. __   ________   _______         _______.___________.____    ____  __       _______     _______.
|   ____| /  __  \  |  \ |  | |           |       /       ||  | |       /  |   ____|       /       |           |\   \  /   / |  |     |   ____|   /       |
|  |__   |  |  |  | |   \|  | `---|  |----`      |   (----`|  | `---/  /   |  |__         |   (----`---|  |----` \   \/   /  |  |     |  |__     |   (----`
|   __|  |  |  |  | |  . `  |     |  |            \   \    |  |    /  /    |   __|         \   \       |  |       \_    _/   |  |     |   __|     \   \
|  |     |  `--'  | |  |\   |     |  |        .----)   |   |  |   /  /----.|  |____    .----)   |      |  |         |  |     |  `----.|  |____.----)   |
|__|      \______/  |__| \__|     |__|        |_______/    |__|  /________||_______|   |_______/       |__|         |__|     |_______||_______|_______/
Font Size Styles
**************************************************************************************/
/* TODO pixels should really be converted to ems or percentage */
.font-size-8 {
	font-size: 8px;
}

.font-size-9 {
	font-size: 9px;
}

.font-size-10,
/*"dow" is not a typo, the library defines this for "day of the week"*/
.manage-appointments-date-range .bootstrap-datetimepicker-widget .dow,
.history-toggle-container .side-bar-section .fa.fa-check {
	font-size: 10px;
}

.font-size-11 {
	font-size: 11px;
}

.font-size-12,
.form-group.with-errors span.help-block,
.form-group.with-errors span.help-block-alt,
.item-detail-description {
	font-size: 12px;
}

.font-size-13,
.history-toggle-container .side-bar-section .section-title,
.rw-calendar .rw-header .rw-btn-left,
.rw-calendar .rw-header .rw-btn-right {
	font-size: 13px;
}

#add-profile label,
.font-size-14,
.font-size-default,
.form-control,
.form-group .input-group-date,
.history-toggle-container .side-bar-section,
.landingPageCustomContent,
.primary-label,
.rw-calendar-grid td,
.rw-calendar-grid th,
.text-success,
.text-alert,
.text-muted,
.tooltip-inner {
	font-size: 14px;
}

.font-size-15 {
	font-size: 15px;
}

.font-size-16,
.navbar-default .navbar-nav.main-nav > li > a,
.btn-lg,
.book-appointment-button-mobile .btn-lg,
.manage-appointments-date-range .bootstrap-datetimepicker-widget .switch,
.page-heading,
.selection-item .item-name,
.manage-appointments-container .filter-buttons .dropdown .fa {
	font-size: 16px;
}

.font-size-17,
.modal .modal-subtitle{
	font-size: 17px;
}

.font-size-18,
.item-name,
.manage-appointments-row .invalid-icon .fa {
	font-size: 18px;
}

.font-size-20,
.history-toggle-container .side-bar-section .fa {
	font-size: 20px;
}

.font-size-21 {
	font-size: 21px;
}

.font-icon-size-22 {
	font-size: 22px;
}

.font-size-24,
.modal .modal-title {
	font-size: 24px;
}

.font-size-25 {
	font-size: 25px;
}

.font-size-28 {
	font-size: 28px;
}

.font-size-30,
.progress-row-container .file-type-details .fa {
	font-size: 30px;
}

.font-icon-size-40,
.manage-appointments-date-range .bootstrap-datetimepicker-widget th.next,
.manage-appointments-date-range .bootstrap-datetimepicker-widget th.prev {
	font-size: 40px;
}

.font-size-75 {
	font-size: 75px;
}

/***************************** Text Print Sizes *****************************/
@media print {
	.font-point-size-14,
	.inline p,
	.inline h5 {
		/* 14pt = 18.6667px */
		font-size: 14pt;
	}

	.font-point-size-10-5,
	.font-print-size-default,
	/* Need this here to override the above .inline p and .inline h5 */
	.appointment-print-modal-dialog p,
	.appointment-print-modal-dialog h5,
	/* Make this style match .navbar-default .navbar-nav.main-nav > li > a */
	.navbar-nav.nav-content-logged-in > li > a {
		/* 10.5pt = 14px */
		font-size: 10.5pt;
	}

	.font-point-size-16,
	.font-size-16,
	.auth-form-container .btn-login,
	.auth-form-container .btn-login-optional-login,
	.landingPageCustomContent,
	.landingPageCustomContent p,
	.navbar-nav.nav-content-logged-in > li > a,
	.auth-form-container .btn-login,
	.auth-form-container .btn-login-optional-login,
	.landingPageCustomContent {
		/* 12pt = 16px */
		font-size: 12pt;
	}
}

/**************************************************************************************
End Font Size Styles
**************************************************************************************/


/**************************************************************************************
.______     ______     ______   .___________.    _______.___________..______          ___      .______        ______   ____    ____  _______ .______      .______       __   _______   _______         _______.___________.____    ____  __       _______     _______.
|   _  \   /  __  \   /  __  \  |           |   /       |           ||   _  \        /   \     |   _  \      /  __  \  \   \  /   / |   ____||   _  \     |   _  \     |  | |       \ |   ____|       /       |           |\   \  /   / |  |     |   ____|   /       |
|  |_)  | |  |  |  | |  |  |  | `---|  |----`  |   (----`---|  |----`|  |_)  |      /  ^  \    |  |_)  |    |  |  |  |  \   \/   /  |  |__   |  |_)  |    |  |_)  |    |  | |  .--.  ||  |__         |   (----`---|  |----` \   \/   /  |  |     |  |__     |   (----`
|   _  <  |  |  |  | |  |  |  |     |  |        \   \       |  |     |      /      /  /_\  \   |   ___/     |  |  |  |   \      /   |   __|  |      /     |      /     |  | |  |  |  ||   __|         \   \       |  |       \_    _/   |  |     |   __|     \   \
|  |_)  | |  `--'  | |  `--'  |     |  |    .----)   |      |  |     |  |\  \----./  _____  \  |  |         |  `--'  |    \    /    |  |____ |  |\  \----.|  |\  \----.|  | |  '--'  ||  |____    .----)   |      |  |         |  |     |  `----.|  |____.----)   |
|______/   \______/   \______/      |__|    |_______/       |__|     | _| `._____/__/     \__\ | _|          \______/      \__/     |_______|| _| `._____|| _| `._____||__| |_______/ |_______|   |_______/       |__|         |__|     |_______||_______|_______/
Bootstrap Override Styles
**************************************************************************************/
.nav a,
a.button,
a.btn,
.nav.nav-tabs li a,
.event-list .event-list-item a {
	text-decoration: none;
}

a[role="button"].btn.disabled,
fieldset[disabled] a[role="button"].btn {
	pointer-events: initial;
}

.navbar-default {
	-webkit-transition: height 500ms ease-in-out;
	-o-transition: height 500ms ease-in-out;
	transition: height 500ms ease-in-out;
}

.navbar ul.nav-content-lower > li {
	margin-top: 24px;
}

.navbar ul li > a {
	-webkit-transition: all 250ms ease-in;
	-o-transition: all 250ms ease-in;
	transition: all 250ms ease-in;
}

.navbar-default .navbar-nav > li > a {
	padding: 9px 10px;
}

.navbar-default .navbar-nav li a.active:hover {
	background-color: transparent;
}

.navbar-default .navbar-nav.main-nav > li > a {
	text-transform: uppercase;
	padding: 15px 20px;
}

.dropdown-menu > li > a {
	padding-top: 5px;
	padding-bottom: 5px;
}

.dropdown a.dropdown-toggle span.icon-angle-down {
	-webkit-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
}

.dropdown.open a.dropdown-toggle span.icon-angle-down {
	-webkit-transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	transform: rotate(-180deg);
}

.close {
	opacity: 1;
	outline: none;
}

.modal-backdrop.in,
.overlay,
.react-overlay {
	opacity: 0.75;
}

input.form-control::placeholder,
::placeholder,
.form-control::-webkit-input-placeholder,
.form-control:-moz-placeholder,
.form-control::-moz-placeholder,
.form-control:-ms-input-placeholder {
	opacity: 1;
}

.close:after {
	position: absolute;
	display: inline-block;
	top: 38px;
	right: 34px;
	content: "\f00d";
	font-family: FontAwesome;
	font-style: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.appointment-print .close:after {
	top: 33px;
	right: 36px;
}

.close:active {
	top: 1px
}

/* These styles help center all modals to the center of the screen */
.modal:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

.modal-dialog {
	/* These styles help center all modals to the center of the screen */
	display: inline-block;
	vertical-align: middle;
	text-align: left;
	min-width: 300px;
	width: auto;
	max-width: 98%;
	border-radius: 5px;
}

.modal-content {
	border-radius: 5px;
	height: inherit;
	padding: 18px 20px 29px 20px;
}

.modal .modal-title,
.modal .modal-subtitle {
	font-family: FKDisplay-Regular, Helvetica, Arial, sans-serif;
}

.modal .modal-subtitle {
	padding: 0px 15px 10px 15px;
}

.modal-body {
	padding-top: 8px;
}

/* Exists in Bootstrap 4 but not in Bootstrap 3 */
.modal-dialog-centered {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	min-height: calc(100% - (.5rem * 2));
}

.appointmentCancellationModal .modal-dialog .modal-content {
	padding-left: 30px;
}

.appointmentCancellationModal .modal-dialog .modal-body {
	padding: 15px 39px 15px 0px;
}

.appointmentCancellationModal .modal-dialog .modal-header {
	padding: 15px 15px 0px 0px;
}

.appointment-cancellation-modal  .modal-dialog {
	width: 40%;
}

.form-control {
	padding: 8px 12px;
	height: 36px;
}

.form-control#searchBar {
	height: 34px;
}

select.date-form-control {
	padding: 8px 6px;
}

.alert .message {
	margin-left: 10px;
}

.btn,
.form-control.btn {
	margin-bottom: 10px;
	-webkit-transition: all 200ms ease-in;
	-o-transition: all 200ms ease-in;
	transition: all 200ms ease-in;
	text-overflow: ellipsis;
}

.btn-lg {
	padding: 10px 16px;
	line-height: 1.3333333;
	border-radius: 5px;
}

/* This exists in bootstrap 4, but not in our version, bootstrap 3 */
.rounded {
	border-radius: .25rem !important;
}

/* This exists in bootstrap 4, but not in our version, bootstrap 3 */
.rounded-bottom {
	border-bottom-right-radius: .25rem !important;
	border-bottom-left-radius: .25rem !important;
}

.tab-content {
	padding: 0px 20px 0;
}

.nav.nav-tabs li span.appointment-count-label.label-default {
	display: inline-block;
	top: -2px;
	left: 4px;
	position: relative;
}

.btn-group .dropdown-toggle.btn-lg {
	text-transform: none;
	margin-bottom: 0px;
	position: relative;
	top: -5px;
	max-width: 240px;
}

.dropdown.scrollable .dropdown-menu {
	overflow-y: scroll;
	max-height: 200px;
	width:100%;
}

.dropdown-menu li a {
	word-break: break-all;
	white-space: normal;
	text-decoration: none;
}

.dropdown .glyphicon {
	position: absolute;
	right: 10px;
	top: 10px;
}

.appointment-count-label {
	line-height: 1;
	white-space: nowrap;
	padding: 1px 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	margin-left: 2px;
}

input[type=checkbox],
input[type=radio] {
	margin-top: 0px;
}

.form-group input[type=radio] {
	height: 15px;
	width: 15px;
}

#add-profile input[type="radio"] {
	margin-top: 10px;
}

/* Exists in Bootstrap 4 but not in Bootstrap 3 */
.font-weight-bolder {
	font-family: DMSans-Bold, DMSans-Regular, Helvetica, Arial, sans-serif;
	font-weight: 700 !important; /* Default: Bolder */
}

/* Exists in Bootstrap 4 but not in Bootstrap 3 */
.font-weight-bold,
.rw-calendar .rw-btn.rw-now,
.rw-calendar .rw-header,
.tooltip-inner,
.btn-group .dropdown-toggle.btn-lg,
.btn,
.form-control.btn,
.navbar-default .navbar-nav li a.active,
.navbar-default .navbar-nav li a.active:focus,
.navbar-default .navbar-nav li a.active:hover,
.page-heading,
.side-nav li > a.active:first-child,
.primary-label,
.history-toggle-container .side-bar-section .section-title,
.progress-container .file-confirmation-heading {
	font-family: DMSans-Medium, DMSans-Regular, Helvetica, Arial, sans-serif;
	font-weight: 500 !important; /* Default: 500 */
}

/* Exists in Bootstrap 4 but not in Bootstrap 3 */
.font-weight-normal {
	font-weight: 400 !important; /* Default: 400 */
}

/* Exists in Bootstrap 4 but not in Bootstrap 3 */
.font-weight-light {
	font-weight: 300 !important; /* Default: 300 */
}

/* Exists in Bootstrap 4 but not in Bootstrap 3 */
.font-italic {
	font-family: DMSans-Italic, DMSans-Regular, Helvetica, Arial, sans-serif;
	font-style: italic;
}

.mobile-burger-stack .navbar-toggle {
	padding: 10px;
	height: 40px;
	width: 50px;
	/* TODO Browsers render floats differently; value provided by designer */
	margin-top: 28.9px;
	margin-right: 6px;
}

.mobile-burger-stack .icon-bar {
	height: 3px;
	width: 30px;
}

.modal-header .close {
	margin-right: 1px;
	margin-top: 5px;
}

.modal-sm {
	width: 300px;
}

.tooltip-inner {
	padding: 6px 20px;
}

.show > .dropdown-menu {
	display: block;
	position: absolute;
}

/**************************************************************************************
END Bootstrap Override Styles
**************************************************************************************/


/**************************************************************************************
 __    __   _______  __      .______    _______ .______              _______.___________.____    ____  __       _______     _______.
|  |  |  | |   ____||  |     |   _  \  |   ____||   _  \            /       |           |\   \  /   / |  |     |   ____|   /       |
|  |__|  | |  |__   |  |     |  |_)  | |  |__   |  |_)  |          |   (----`---|  |----` \   \/   /  |  |     |  |__     |   (----`
|   __   | |   __|  |  |     |   ___/  |   __|  |      /            \   \       |  |       \_    _/   |  |     |   __|     \   \
|  |  |  | |  |____ |  `----.|  |      |  |____ |  |\  \----.   .----)   |      |  |         |  |     |  `----.|  |____.----)   |
|__|  |__| |_______||_______|| _|      |_______|| _| `._____|   |_______/       |__|         |__|     |_______||_______|_______/
Helper Styles
**************************************************************************************/
.header-font {
	font-family: FKDisplay-Regular, Helvetica, Arial, sans-serif;
	font-weight: 700;
}

/* TODO Bootstrap 4+ has classes that handle this */
.w-100 {width: 100%;}
.w-75 {width: 75%;}
.w-50 {width: 50%;}
.w-25 {width: 25%;}

.w-90 {width: 90%;}

.position-static {
	position: static;
}

.position-relative {
	position: relative !important;
}

.position-absolute {
	position: absolute !important;
}

.position-fixed {
	position: fixed;
}

/* IE11 and IE10 will render position: sticky as position: relative */
.position-sticky {
	position: sticky;
	position: -webkit-sticky; /* safari correction */
}

.strikethrough {
	text-decoration: line-through;
}

.antialiased {
	-webkit-font-smoothing: antialiased;
}

/* TODO Bootstrap 4+ has classes that handle this: margin-l-0 */
.margin-l-0 {
	margin-left: 0 !important;
}

/* TODO Bootstrap 4+ has classes that handle this: margin-r-0 */
.margin-r-0 {
	margin-right: 0 !important;
}

/* TODO Bootstrap 4+ has classes that handle this: margin-x-0 */
.margin-x-0 {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* TODO Bootstrap 4+ has classes that handle this: margin-y-0 */
.margin-y-0 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* TODO Bootstrap 4+ has classes that handle this: margin-b-0 */
.margin-b-0 {
	margin-bottom: 0 !important;
}

/* TODO Bootstrap 4+ has classes that handle this: margin-t-0 */
.margin-t-0 {
	margin-top: 0 !important;
}

/* TODO Bootstrap 4+ has classes that handle this: margin-0 */
.margin-0 {
	margin: 0 !important;
}

/* TODO Bootstrap 4+ has classes that handle this: margin-x-auto */
.margin-x-auto {
	margin: 0 auto !important;
}

/* TODO Bootstrap 4+ has classes that handle this: padding-l-0 */
.padding-l-0 {
	padding-left: 0 !important;
}

/* TODO Bootstrap 4+ has classes that handle this: padding-r-0 */
.padding-r-0 {
	padding-right: 0 !important;
}

/* TODO Bootstrap 4+ has classes that handle this: padding-b-0 */
.padding-b-0 {
	padding-bottom: 0 !important;
}

/* TODO Bootstrap 4+ has classes that handle this: padding-t-0 */
.padding-t-0 {
	padding-top: 0 !important;
}

/* TODO Bootstrap 4+ has classes that handle this: padding-y-0 */
.padding-y-0 {
	padding-bottom: 0 !important;
	padding-top: 0 !important;
}

/* TODO Bootstrap 4+ has classes that handle this: padding-x-0 */
.padding-x-0 {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* TODO Bootstrap 4+ has classes that handle this: padding-0 */
.padding-0 {
	padding: 0 !important;
}

/* TODO Bootstrap 4+ has classes that may help with this: See "Bootstrap spacing" */
.xs-padding-0, .sm-padding-0, .md-padding-0, .lg-padding-0,
.xs-padding-l-0, .sm-padding-l-0, .md-padding-l-0, .lg-padding-l-0,
.xs-padding-r-0, .sm-padding-r-0, .md-padding-r-0, .lg-padding-r-0 {
	/* initialize the class names and set them by the different media query statements */
}

.cursor-default {
	cursor: default !important;
}

.no-clicks {
	pointer-events: none;
}

/*cross browser word wrap helper */
.wordwrap {
	white-space: pre-wrap;      /* CSS3 */
	white-space: -moz-pre-wrap; /* Firefox */
	white-space: -o-pre-wrap;   /* Opera 7 */
	word-wrap: break-word;      /* IE */

	overflow-wrap: break-word;
	word-break: break-word;

	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* TODO Bootstrap 4+ has classes that handle this */
.border-0,
.modal-header {
	border: 0;
}

/* TODO Bootstrap 4+ has classes that handle this */
.border-b-0 {
	border-bottom: 0;
}

/* TODO Bootstrap 4+ has classes that handle this */
.border-t-0 {
	border-top: 0;
}

/* initialized the classes here */
.pull-xs-left,
.pull-xs-right,
.pull-xs-none,
.pull-sm-left,
.pull-sm-right,
.pull-sm-none,
.pull-md-left,
.pull-md-right,
.pull-md-none,
.pull-lg-left,
.pull-lg-right,
.pull-lg-none,
.pull-xl-left,
.pull-xl-right,
.pull-xl-none {}

/* initialized the classes here */
.text-center-xs,
.text-center-sm,
.text-center-md,
.text-center-lg,
.text-center-xl,
.text-right-xs,
.text-right-sm,
.text-right-md,
.text-right-lg,
.text-right-xl,
.text-left-xs,
.text-left-sm,
.text-left-md,
.text-left-lg,
.text-left-xl {}

.text-center-i {
	text-align: center !important;
}

.text-left-i {
	text-align: left !important;
}

.text-right-i  {
	text-align: right !important;
}

.white-space-normal {
	white-space: normal;
}


.truncate-text-base,
.truncate-text-base-block,
.manage-appointments-header .list-group-item a {
	/*A width needs to be set on the element where this is called,
	this forces the truncation: */
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.truncate-text-base {
	/*A width needs to be set on the element where this is called */
	display: inline-block;
}

.truncate-text-base-block,
.manage-appointments-header .list-group-item a {
	/*A width needs to be set on the element where this is called */
	display: block; /* this element needs to be block for this to work*/
}

/* initialized the classes here; these already exist in Bootstrap 4 */
.d-inline {
	display: inline !important;
}

/* initialized the classes here; these already exist in Bootstrap 4 */
.d-table-head-group {
	display: table-header-group !important;
}

/* initialized the classes here; these already exist in Bootstrap 4 */
.d-inline-block-xs,
.d-inline-block-sm,
.d-inline-block-md,
.d-inline-block-lg {}
.d-inline-block {
	display: inline-block !important;
}

.d-block-xs,
.d-block-sm,
.d-block-md,
.d-block-lg {}
.d-block {
	display: block !important;
}

/* ADA compliance helper */
.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/**
 If the .visually-hidden class is applied to natively focusable elements (such as a, button, input, etc)
 they must become visible when they receive keyboard focus. Otherwise, a sighted keyboard user would
  have to try and figure out where their visible focus indicator had gone to.
 */
.visually-hidden:not(:focus):not(:active) {}

/**************************************************************************************
END Helper Styles
**************************************************************************************/


/**************************************************************************************
 _______       ___   .___________. _______    .______    __    ______  __  ___  _______ .______              _______.___________.____    ____  __       _______     _______.
|       \     /   \  |           ||   ____|   |   _  \  |  |  /      ||  |/  / |   ____||   _  \            /       |           |\   \  /   / |  |     |   ____|   /       |
|  .--.  |   /  ^  \ `---|  |----`|  |__      |  |_)  | |  | |  ,----'|  '  /  |  |__   |  |_)  |          |   (----`---|  |----` \   \/   /  |  |     |  |__     |   (----`
|  |  |  |  /  /_\  \    |  |     |   __|     |   ___/  |  | |  |     |    <   |   __|  |      /            \   \       |  |       \_    _/   |  |     |   __|     \   \
|  '--'  | /  _____  \   |  |     |  |____    |  |      |  | |  `----.|  .  \  |  |____ |  |\  \----.   .----)   |      |  |         |  |     |  `----.|  |____.----)   |
|_______/ /__/     \__\  |__|     |_______|   | _|      |__|  \______||__|\__\ |_______|| _| `._____|   |_______/       |__|         |__|     |_______||_______|_______/
Date Picker Styles
**************************************************************************************/
.rw-i-calendar:before {
	content: '\e804';
}

.rw-popup-container.rw-calendar-popup {
	right: auto;
	width: 18em;
}

.calendar-container {
	margin: 10px 0 0 -143px;
	position: absolute;
	left: 50%;
	z-index: 1;
}

.rw-calendar {
	padding: 10px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	width: 288px;
	z-index: 1;
	outline: none;
}

.rw-calendar:before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	top: -11px;
	z-index: 99;
	left: 50%;
	margin-left: -7px;
}

.rw-calendar:after {
	left: 50%;
	margin-left: -8px;
}

/* This is the triangle/caret element above the date picker*/
.rw-calendar:after {
	content: "";
	display: block;
	width: 10px;
	height: 8px;
	border-bottom: none;
	transform: translate(-50%, -50%) rotate(45deg);
	position: absolute;
	top: 0;
	left: 52.5%;
	z-index: 98;
}


.rw-calendar .rw-calendar-grid,
.rw-calendar .rw-header button {
	outline: none;
}

.rw-calendar .rw-header .rw-btn-left,
.rw-calendar .rw-header .rw-btn-right {
	width: 12.5%;
	height: 26px;
	font-family: FontAwesome;
	line-height: 25px;
}

.rw-calendar .rw-header .rw-btn-left:before {
	content: "";
}

.rw-calendar .rw-header .rw-btn-right:after {
	content: "";
}

.rw-calendar .rw-header .rw-btn-view {
	width: 75%;
	border-radius: 4px;
}

.rw-calendar .rw-header .rw-btn-view[disabled] {
	cursor: not-allowed;
}

.rw-calendar-grid {
	height: 14.28571429em;
	table-layout: fixed;
	width: 100%;
}

.rw-calendar-grid th {
	text-align: right;
	padding: 0 .4em 0 .1em;
}

.rw-calendar-grid .rw-btn {
	width: 100%;
	text-align: right;
}

.rw-calendar-grid td .rw-btn {
	border-radius: 20px;
	outline: 0;
	text-align: center;
	width: 35px;
	height: 35px;
	line-height: 2.3em;
}

.rw-calendar-grid td .rw-btn:hover {
	cursor: pointer;
}

.rw-calendar-grid.rw-nav-view .rw-btn {
	padding: .25em 0 .3em;
	display: inline-block;
	overflow: hidden;
	text-align: center;
	white-space: normal;
	line-height: 1.7em;
}

.rw-btn {
	line-height: 2.286em;
	display: inline-block;
	margin: 0;
	text-align: center;
	vertical-align: middle;
	padding: 0;
	white-space: nowrap;
}

.rw-calendar-grid thead:after {
	line-height: 10px;
	content: "-";
	display: block;
}

.rw-calendar-grid thead th {
	text-transform: uppercase;
	height: 35px;
	text-align: center;
}

.rw-calendar-grid td,
.rw-calendar-grid td span {
	text-align: center;
}

.rw-calendar-grid td:before {
	z-index: -1;
	content: "";
	margin-top: -10px;
	margin-left: 6px;
	display: block;
	width: 32px;
	height: 32px;
	-webkit-border-radius: 9999px;
	border-radius: 9999px;
	position: absolute;
}

.rw-calendar-grid td:before {
	z-index: -1;
	content: "";
	margin-top: -10px;
	margin-left: 6px;
	display: block;
	width: 32px;
	height: 32px;
	-webkit-border-radius: 9999px;
	border-radius: 9999px;
	position: absolute;
}

.rw-calendar-day-disabled {
	cursor: default;
	border-radius: 26px;
}

.rw-calendar-grid .calendar-day {
	width: 34px;
	display: inline-table;
}

.manage-appointments-date-range .bootstrap-datetimepicker-widget {
	padding: 4px 10px;
}

.manage-appointments-date-range .bootstrap-datetimepicker-widget .day,
.manage-appointments-date-range .bootstrap-datetimepicker-widget .switch {
	cursor: pointer;
}

.manage-appointments-date-range .bootstrap-datetimepicker-widget .day.disabled {
	cursor: not-allowed;
}

.manage-appointments-date-range .bootstrap-datetimepicker-widget th.next,
.manage-appointments-date-range .bootstrap-datetimepicker-widget th.prev {
	top: -8px;
	position: relative;
}

.manage-appointments-date-range .bootstrap-datetimepicker-widget th.prev {
	text-align: right;
}

.manage-appointments-date-range .bootstrap-datetimepicker-widget .switch {
	text-align: center;
	padding-bottom: 15px;
}

/*"dow" is not a typo, the library defines this for "day of the week"*/
.manage-appointments-date-range .bootstrap-datetimepicker-widget .dow {
	text-transform: uppercase;
}

.manage-appointments-date-range .bootstrap-datetimepicker-widget .month,
.manage-appointments-date-range .bootstrap-datetimepicker-widget .year {
	padding: 4px;
}

/**************************************************************************************
END Date Picker Styles
**************************************************************************************/


/**************************************************************************************
 __    __   _______     ___       _______   _______ .______              _______.___________.____    ____  __       _______     _______.
|  |  |  | |   ____|   /   \     |       \ |   ____||   _  \            /       |           |\   \  /   / |  |     |   ____|   /       |
|  |__|  | |  |__     /  ^  \    |  .--.  ||  |__   |  |_)  |          |   (----`---|  |----` \   \/   /  |  |     |  |__     |   (----`
|   __   | |   __|   /  /_\  \   |  |  |  ||   __|  |      /            \   \       |  |       \_    _/   |  |     |   __|     \   \
|  |  |  | |  |____ /  _____  \  |  '--'  ||  |____ |  |\  \----.   .----)   |      |  |         |  |     |  `----.|  |____.----)   |
|__|  |__| |_______/__/     \__\ |_______/ |_______|| _| `._____|   |_______/       |__|         |__|     |_______||_______|_______/
Header Styles
**************************************************************************************/
.navbar-upper {
	/* Override Bootstrap style */
	min-height: 40px;
}

.branding-container {
	margin-top: 21px;
	margin-bottom: 21px;
}

/* TODO - this does not fix the fact that the browser still has to accept an "any size" image and resize it down for display. This is a loading and design issue */
.branding-container #client-logo {
	max-width: 60px;
	height: 60px;
}

/* TODO - this does not fix the fact that the browser still has to accept an "any size" image and resize it down for display. This is a loading and design issue */
.branding-container #custom-client-logo {
	max-width: 250px;
	max-height: 100px;
}

.branding-container .text-branding-column-left {
	margin-right: 10px;
}

.branding-container .text-branding-column-right {
	max-width: 140px;
}

.branding-container.text-branding-container h1 {
	line-height: 1;
	cursor: auto;
	display: block;
	margin-bottom: 5px;
}

.header-button-alignment {
	margin-right: -30px !important;
}

.navbar-no-header {
	min-height: 0px !important;
}

/**************************************************************************************
END Header Styles
**************************************************************************************/


/**************************************************************************************
 _______   ______     ______   .___________. _______ .______              _______.___________.____    ____  __       _______     _______.
|   ____| /  __  \   /  __  \  |           ||   ____||   _  \            /       |           |\   \  /   / |  |     |   ____|   /       |
|  |__   |  |  |  | |  |  |  | `---|  |----`|  |__   |  |_)  |          |   (----`---|  |----` \   \/   /  |  |     |  |__     |   (----`
|   __|  |  |  |  | |  |  |  |     |  |     |   __|  |      /            \   \       |  |       \_    _/   |  |     |   __|     \   \
|  |     |  `--'  | |  `--'  |     |  |     |  |____ |  |\  \----.   .----)   |      |  |         |  |     |  `----.|  |____.----)   |
|__|      \______/   \______/      |__|     |_______|| _| `._____|   |_______/       |__|         |__|     |_______||_______|_______/
Footer Styles
**************************************************************************************/
#page-footer {
	/* TODO Browsers render floats differently; value provided by designer */
	padding: 26.5px 0;
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
}

#page-footer .container {}

#page-footer .footer-links {}

#page-footer .powered-by {}

/**************************************************************************************
END Footer Styles
**************************************************************************************/



/**************************************************************************************
.___  ___.   ______    _______       ___       __              _______.___________.____    ____  __       _______     _______.
|   \/   |  /  __  \  |       \     /   \     |  |            /       |           |\   \  /   / |  |     |   ____|   /       |
|  \  /  | |  |  |  | |  .--.  |   /  ^  \    |  |           |   (----`---|  |----` \   \/   /  |  |     |  |__     |   (----`
|  |\/|  | |  |  |  | |  |  |  |  /  /_\  \   |  |            \   \       |  |       \_    _/   |  |     |   __|     \   \
|  |  |  | |  `--'  | |  '--'  | /  _____  \  |  `----.   .----)   |      |  |         |  |     |  `----.|  |____.----)   |
|__|  |__|  \______/  |_______/ /__/     \__\ |_______|   |_______/       |__|         |__|     |_______||_______|_______/
Modal Styles
**************************************************************************************/
.modal-dialog-sm { width: 25% !important;}
.modal-dialog-md { width: 35% !important;}
.modal-dialog-lg { width: 50% !important;}

.session-timeout-body-text {
	margin: 0 0 22px;
}

.session-timeout-counter {
	margin: 0 0px 4px;
}

.session-timeout-seconds {
	margin-bottom: 29px;
}

.btn-timer {
	text-align: center;
	height: 56px;
	width: 203px;
	border-radius: 7px;
	margin: 0px 0px 4px 0px;
	padding: 8px 9px 8px 11px;
}

.btn-cookie {
	min-height: 30px;
	width: 80%;
	margin: 0px 0px 4px 0px;
	border-radius: 4px;
	padding: 8px 9px 8px 11px;
}

.cookie-overlay {
	padding: 10px;
}

.modal .modal-vertical-center-container {
	display: table;
	height: 100%;
	width: 100%;
	/* This makes sure that we can still click outside of the modal to close it */
	pointer-events: none;
}

.modal .modal-vertical-center {
	/* To center vertically */
	display: table-cell;
	vertical-align: middle;
	pointer-events: none;
}

.modal-dialog-centered-ap {
	-webkit-transform: translate(0, -50%);
	-o-transform: translate(0, -50%);
	transform: translate(0, -50%);
	top: 50%;
	margin: 0 auto;
}

.modal.login-modal.modal-dialog-centered-ap {
	/* need to override .modal-dialog-centered-ap to adjust for form height */
	-webkit-transform: translate(0, -36%);
	-o-transform: translate(0, -36%);
	transform: translate(0, -36%);
	top: 36%;
}

.modal.password-reset-modal.modal-dialog-centered-ap {
	/* need to override .modal-dialog-centered-ap to adjust for form height */
	-webkit-transform: translate(0, -36%);
	-o-transform: translate(0, -36%);
	transform: translate(0, -36%);
	top: 36%;
}

/**************************************************************************************
END Modal Styles
**************************************************************************************/


/**************************************************************************************
 _______   ______   .______      .___  ___.         _______.___________.____    ____  __       _______     _______.
|   ____| /  __  \  |   _  \     |   \/   |        /       |           |\   \  /   / |  |     |   ____|   /       |
|  |__   |  |  |  | |  |_)  |    |  \  /  |       |   (----`---|  |----` \   \/   /  |  |     |  |__     |   (----`
|   __|  |  |  |  | |      /     |  |\/|  |        \   \       |  |       \_    _/   |  |     |   __|     \   \
|  |     |  `--'  | |  |\  \----.|  |  |  |    .----)   |      |  |         |  |     |  `----.|  |____.----)   |
|__|      \______/  | _| `._____||__|  |__|    |_______/       |__|         |__|     |_______||_______|_______/
Form Styles
**************************************************************************************/
.input-label-row {
	line-height: 1;
	cursor: auto;
	display: block;
	margin-bottom: 5px;
	margin-right: 15px;
}

legend.primary-label {
	margin-bottom: 5px;
	border: none;
	font-family: DMSans-Regular, Helvetica, Arial, sans-serif;
	font-weight: 400;
	line-height: 1;
	cursor: auto;
}

.input-group-date {
	margin-bottom: 4px;
}

/** START - FILE UPLOAD FEATURE STYLES **/

.progress-container-modal {
	/* 'vh' is the unit measurement of the browser's viewport */
	max-height: calc(100vh - 400px);
	overflow-y: auto;
}

.progress-container [type=file] {
	/*Setting the property values to zero ends up throwing the element out of tab party in some browsers*/
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	/*guarantees the element does not interfere with the sibling elements*/
	position: absolute;
	z-index: -1;
}

.progress-container [type=file] + label {
	text-transform: uppercase;
}

/*keyboard navigation - indicating when the element is focused*/
.progress-container [type=file]:focus + label {
	/*for browsers that do not understand the -webkit… expression*/
	outline: 1px dotted #000;
	/*a little trick for obtaining default outline looks on Chrome, Opera and Safari.*/
	outline: -webkit-focus-ring-color auto 5px;
}

/*
In case using a library for eliminating the 300ms tap-pause on touch-capable devices,
 and have plans to add some extra markup to the content of a label, the button won’t work without this
*/
.progress-container [type=file] + label * {
	pointer-events: none;
}

.progress-container .file-spinner-row {
	line-height: 1;
}

.progress-container .file-spinner {
	margin-right: 6px;
}

.progress-container .progress-container-description {
	margin: 16px 0px;
}

.modal-body .progress-container .progress-container-description {
	margin-top: 8px !important;
}

.progress-row-container {
	width: 100%;
}

.progress-row-container .faux-progress-bar {
	width: 0%;
}

.progress-row-container .file-upload-progress,
.progress-row-container .faux-progress-bar {
	height: 2px;
}

.progress-row-container .progress-row-details {
	padding: 10px 10px 10px 0px;
	position: relative;
}

.progress-row-container .file-type-details img {
	max-width: 50px;
	max-height: 50px;
}

.progress-row-container .file-type-text {
	padding-top: 6px;
}

.progress-row-container .file-name {
	padding: 2% 0%;
}

.progress-row-container .file-delete-row {
	padding: 8px 0px;
}

.progress-row-container .close::after {
	top: 8px;
	right: 8px;
}

.progress-row-container .file-size {
	margin-top: 4px;
}

.progress-container .progress-error-container .fa,
.progress-container .progress-warning-container .fa {
	margin-right: 10px;
}

.progress-container .progress-error-container ol,
.progress-container .progress-warning-container ol {
	margin-bottom: 0px;
}

.progress-container .progress-error-container ol .sub-items-list,
.progress-container .progress-warning-container ol .sub-items-list {
	margin-left: -14px;
}

.progress-container .file-confirmation-heading {
	margin-bottom: 6px;
}

.progress-container  .progress-success-container .file-confirmation-heading {
	margin-top: 8px;
}

.progress-container .progress-error-container,
.progress-container .progress-warning-container,
.progress-container .progress-success-container,
.progress-row-container {
	margin-top: 10px;
	margin-bottom: 4px;
	padding: 14px;
}

.progress-row-container .file-delete-row a,
.progress-row-container .file-delete-row a:hover,
.progress-row-container .file-delete-row a:active,
.progress-row-container .file-delete-row a:visited {
	text-decoration: none;
	padding: 2px 0px;
}

/** END - FILE UPLOAD FEATURE STYLES **/

.btn-group .dropdown-toggle.btn-lg span.customer-dropdown-name {
	display: inline-block;
	min-width: 120px;
	text-align: left;
}

.selection-item .btn-selection-item .fa {
	position: relative;
	top: 1px;
	left: 2px;
}

button .icon {
	display: inline-block;
	padding: 0px 4px;
}

/* TODO this name seems wrong or maybe the implementation is; review */
.imitate-label {
	cursor: auto;
	display: block;
	margin-bottom: 5px;
	line-height: 30px;
}

.form-group.with-errors span.help-block,
.form-group.with-errors span.help-block-alt {
	display: block;
	padding: 5px;
	margin-bottom: 15px;
	margin-top: -5px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	z-index: -99;
}

.form-group.with-errors span.help-block.search-bar-error {
	float: left;
	margin-top: 1px;
}

.form-group.multi-controls-field .multi-controls-field-text {
	margin: 4px 0px 0px 24px;
}

.form-group .multi-controls-row {
	margin-bottom: 4px;
}

.form-group-with-custom-error {
	margin-bottom: 5px;
}

span.required-icon {}/* TODO update this when the design comes in */

#add-profile .form-control {
	margin-bottom: 15px;
}

#add-profile .with-errors .form-control {
	margin-bottom: 5px;
}

#add-profile textarea {
	max-width: 424px;
	height: 30px;
}

#add_edit_profile textarea {
	resize: none;
}

.searchBar {
	margin: 5px 0px 5px 10px;
}

#searchBar-container .right-addon input {
	padding-right: 30px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

#searchBar-container .search-btn-group {
	position: absolute;
	top: 0px;
}

.search-btn-group .btn-default {
	padding-bottom: 7px;
}

.textNotificationSection button {
	padding: 8px 10px;
	margin-bottom: 0px;
}

.textNotificationSection .textNotificationButtonReadMode {
	margin-left: 6px;
}

.textNotificationSection .textNotificationTextReadMode {
	margin: 4px 0px;
}

.appointment-note-padding {
	padding: 6px;
}

/*TODO this is used exclusively on the Account Settings page for the timezone tooltip. All tooltips should use the same library/design */
.toolTipText {
	/* Need to override the FontAwesome font family applied to the toolip icon */
	font-family: DMSans-Regular, Helvetica, Arial, sans-serif;
	font-weight: 400;
	visibility: hidden;
	text-align: left;
	border-radius: 5px;
	padding: 5px;
	cursor: auto;
	z-index: 1;
}

/*TODO this is used exclusively on the Account Settings page for the timezone tooltip. All tooltips should use the same library/design */
.timezone-tool-tip {
	padding: 3px 7px;
	cursor: help;
	display: inline;
	position: relative;
	margin-left: 122px;
}

/*TODO this is used exclusively on the Account Settings page for the timezone tooltip. All tooltips should use the same library/design */
.timezone-tool-tip:hover .toolTipText {
	visibility: visible;
}

/*TODO the Account Settings page for the timezone tooltip is mis-using / mis-styling a p tag as a label */
.timezone-label {
	position: absolute;
	line-height: 1;
}

.login-form-container .login-form-title {
	font-family: DMSans-Medium, DMSans-Regular, Helvetica, Arial, sans-serif;
	font-weight: 500;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
}

.login-form-content .hidden-lg .login-form-title {
	letter-spacing: 0.17px; /* TODO the browser will choose how to render float pixels */
}

.login-form-content .hidden-lg {
	padding: 0 20px;
}

.login-form-container label,
.reset-password-container label,
.login-form-container a,
.show-password-text,
.forgot-password {
	margin-bottom: 8px;
}

.login-form-container .show-password-row {
	margin-top: -4px;
}

.login-form-container .form-group {
	margin-top: 0px;
	margin-bottom: 14px;
}

.login-form-container hr {
	margin-top: 0px;
	margin-bottom: 8px; /* (.form-group margin-bottom) + this = 18px */
}

.show-password-text {
	vertical-align: super;
	margin-left: 6.1px; /* TODO the browser will choose how to render float pixels */
}

.auth-form-container .btn-login,
.auth-form-container .btn-login-optional-login {
	padding: 7.5px 16px;
	margin-bottom: 15px;
}

.auth-form-container .btn-login,
.auth-form-container .btn-login-optional-login,
.login-form-content .book-appointment-button-mobile {
	margin-bottom: 18px;
}

.login-form-content.book-appointment-button-only-mobile {
	padding: 0 4px;
}

.login-form-container .new-user-text {
	margin-top: 1px;
}

.login-form-container.auth-form-container {
	margin: 0px -15px;
}

/* Reduce the padding right in the form, when the forgot password label is next to it */
.password-field-label {
	padding-right: 10px;
}

.login-form-book-btn .btn-alt-primary {
	/* TODO Browsers render floats differently; value provided by designer */
	padding-bottom: 7.5px;
	padding-top: 7.5px;
}

.search-bar-instructions {
	padding: 8px 0px;
	font-size: 13px;
	font-weight: bold;
}

.btn-map-toggle {
	margin-top: 6px;
	font-size: 16px;
}

.searchBarLabel {
	font-size: 13px;
	font-weight: bold;
}

/**************************************************************************************
END Form Styles
**************************************************************************************/


/**************************************************************************************
.______      ___       _______  __  .__   __.      ___   .___________. __    ______   .__   __.         _______.___________.____    ____  __       _______     _______.
|   _  \    /   \     /  _____||  | |  \ |  |     /   \  |           ||  |  /  __  \  |  \ |  |        /       |           |\   \  /   / |  |     |   ____|   /       |
|  |_)  |  /  ^  \   |  |  __  |  | |   \|  |    /  ^  \ `---|  |----`|  | |  |  |  | |   \|  |       |   (----`---|  |----` \   \/   /  |  |     |  |__     |   (----`
|   ___/  /  /_\  \  |  | |_ | |  | |  . `  |   /  /_\  \    |  |     |  | |  |  |  | |  . `  |        \   \       |  |       \_    _/   |  |     |   __|     \   \
|  |     /  _____  \ |  |__| | |  | |  |\   |  /  _____  \   |  |     |  | |  `--'  | |  |\   |    .----)   |      |  |         |  |     |  `----.|  |____.----)   |
| _|    /__/     \__\ \______| |__| |__| \__| /__/     \__\  |__|     |__|  \______/  |__| \__|    |_______/       |__|         |__|     |_______||_______|_______/
Pagination Styles
**************************************************************************************/
.pagination-wrap .pagination-info {
	white-space: nowrap;
}

.pagination-wrap .icon-chevron-left,
.pagination-wrap .icon-chevron-right {
	position: relative;
	top: 1px;
}

.pagination-wrap .glyphicon-chevron-left {
	margin-right: 8px;
}

.pagination-wrap .glyphicon-chevron-right {
	margin-left: 8px;
}

.pagination-wrap .btn-pagination-left {}

.pagination-wrap .btn-pagination-right {
	margin-left: 11px;
}

.pagination-wrap .btn-pagination {
	text-overflow: initial !important;
}

/**************************************************************************************
END Pagination Styles
**************************************************************************************/


/**************************************************************************************
     _______. __   _______   _______ .______        ___      .______              _______.___________.____    ____  __       _______     _______.
    /       ||  | |       \ |   ____||   _  \      /   \     |   _  \            /       |           |\   \  /   / |  |     |   ____|   /       |
   |   (----`|  | |  .--.  ||  |__   |  |_)  |    /  ^  \    |  |_)  |          |   (----`---|  |----` \   \/   /  |  |     |  |__     |   (----`
    \   \    |  | |  |  |  ||   __|  |   _  <    /  /_\  \   |      /            \   \       |  |       \_    _/   |  |     |   __|     \   \
.----)   |   |  | |  '--'  ||  |____ |  |_)  |  /  _____  \  |  |\  \----.   .----)   |      |  |         |  |     |  `----.|  |____.----)   |
|_______/    |__| |_______/ |_______||______/  /__/     \__\ | _| `._____|   |_______/       |__|         |__|     |_______||_______|_______/
Sidebar Styles
**************************************************************************************/
.side-nav {
	margin: 0;
	padding: 15px 0;
	list-style-type: none;
	list-style-position: inside;
}

.side-nav li {
	margin: 0 0 5px 0;
}

.side-nav li a {
	display: block;
	padding: 10px 15px;
	line-height: 1;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-webkit-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
}

.history-toggle-container .history-toggle-row {
	padding: 10px;
	text-align: center;
}

.history-toggle-container .side-bar-section {
	line-height: 20px;
	padding-left: 18px;
	padding-bottom: 22px;
}

.history-toggle-container .side-bar-section .section-title,
.history-toggle-container .side-bar-section .section-subtitle {
	margin-bottom: 5px;
	line-height: 20px;
	text-transform: uppercase;
}

.history-toggle-container .side-bar-section .section-subtitle {
	line-height: 8px;
	margin-bottom: 3px;
}

.history-toggle-container .side-bar-section .fa {
	position: absolute;
	left: 7px;
}

.history-toggle-container .side-bar-section .fa-check {
	left: 10px;
	margin-top: 5px;
	background-color: transparent;
}

.history-toggle-container .side-bar-section .selected-add-on {
	margin-top: 6px;
	line-height: 12px;
}

.history-toggle-container .event-info-row {
	padding: 0px 0px 12px 0px;
}

.history-toggle-container .collapse .side-bar-section .fa-check {
	left: 13px;
}

.history-toggle-container .collapse .side-bar-section .background-circle,
.history-toggle-container .collapse .side-bar-section .fa-circle-o {
	left: 10px;
}

.history-toggle-container .collapse {
	padding: 26px 8px 2px 18px;
}

.history-toggle-container .collapse .in {
	-webkit-transition: height 350ms;
	-moz-transition: height 350ms;
	-ms-transition: height 350ms;
	-o-transition: height 350ms;
	transition: height 350ms;
}

.history-toggle-container button .history-icon {
	margin-left: 4px;
}

.history-toggle-container button .chevron-icon {
	margin-left: 8px;
}

/* Set animation rotation to the chevron when toggling */
.history-toggle-container button.collapsed .chevron-icon {
	-webkit-transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	transform: rotate(-180deg);
}

/* Set animation speed to the chevron when toggling */
.history-toggle-container button.collapsed .chevron-icon {
	-webkit-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
}

/**************************************************************************************
END Sidebar Styles
**************************************************************************************/


/**************************************************************************************
 ___________    ____  _______ .__   __. .___________.    _______.        _______.___________.____    ____  __       _______     _______.
|   ____\   \  /   / |   ____||  \ |  | |           |   /       |       /       |           |\   \  /   / |  |     |   ____|   /       |
|  |__   \   \/   /  |  |__   |   \|  | `---|  |----`  |   (----`      |   (----`---|  |----` \   \/   /  |  |     |  |__     |   (----`
|   __|   \      /   |   __|  |  . `  |     |  |        \   \           \   \       |  |       \_    _/   |  |     |   __|     \   \
|  |____   \    /    |  |____ |  |\   |     |  |    .----)   |      .----)   |      |  |         |  |     |  `----.|  |____.----)   |
|_______|   \__/     |_______||__| \__|     |__|    |_______/       |_______/       |__|         |__|     |_______||_______|_______/
Events Styles
**************************************************************************************/
#eventListContainer .event-filters {
	padding: 20px 24px 20px 0px;
}

#eventListContainer .pagination-wrap {
	padding-left: 16px;
}

.event-list .event-list-item {
	padding: 20px 10px;
}

.event-list .event-list-item .event-title {
	line-height: 29px;
}

.event-list .event-description-title {
	line-height: 1.31;
	/* TODO we should be avoiding pixel floats; browsers decide the rendering here */
	letter-spacing: 0.3px;
	margin-bottom: 15px;
}

.event-list .event-details-border {
	padding: 26px 46px 30px 52px;
}

.event-list .event-description-row {
	margin-bottom: 20px;
}

.event-list .event-full-icon {
	margin-left: 12px;
	margin-bottom: 0px;
	text-transform: uppercase;
	padding: 2px 6px 0px 6px !important;
}

.event-list .resource-description .collapse[aria-expanded="false"] {
	display: none;
}

.event-list .event-date-margin {
	margin-left: 24px;
	margin-bottom: 6px;
}

.event-list .event-date-margin .event-date {
	margin-right: 10px;
}

.event-list .event-date-margin .event-time {
	margin-left: 10px;
}

.event-list .caret-icon {
	margin-right: 8px;
	position: relative;
	top: 6px;
}

.event-list .event-detail-item {
	margin-bottom: 10px;
}

.event-list .collapse .in
,.manage-appointments-row .collapse .in {
	-webkit-transition: height 350ms;
	-moz-transition: height 350ms;
	-ms-transition: height 350ms;
	-o-transition: height 350ms;
	transition: height 350ms;
}

/* Set animation rotation to the caret when toggling */
.event-list .collapsed .caret-icon,
.manage-appointments-row .collapsed .caret-icon {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

/* Set animation speed to the caret when toggling */
.event-list .collapsed .caret-icon,
.manage-appointments-row .collapsed .caret-icon {
	-webkit-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
}

.event-list .resource-description a:not(.collapsed):after {
	content: none;
}

/**************************************************************************************
END Events Styles
**************************************************************************************/


/**************************************************************************************
.___  ___.      ___      .__   __.      ___       _______  _______         ___      .______   .______     ______    __  .__   __. .___________..___  ___.  _______ .__   __. .___________.    _______.        _______.___________.____    ____  __       _______     _______.
|   \/   |     /   \     |  \ |  |     /   \     /  _____||   ____|       /   \     |   _  \  |   _  \   /  __  \  |  | |  \ |  | |           ||   \/   | |   ____||  \ |  | |           |   /       |       /       |           |\   \  /   / |  |     |   ____|   /       |
|  \  /  |    /  ^  \    |   \|  |    /  ^  \   |  |  __  |  |__         /  ^  \    |  |_)  | |  |_)  | |  |  |  | |  | |   \|  | `---|  |----`|  \  /  | |  |__   |   \|  | `---|  |----`  |   (----`      |   (----`---|  |----` \   \/   /  |  |     |  |__     |   (----`
|  |\/|  |   /  /_\  \   |  . `  |   /  /_\  \  |  | |_ | |   __|       /  /_\  \   |   ___/  |   ___/  |  |  |  | |  | |  . `  |     |  |     |  |\/|  | |   __|  |  . `  |     |  |        \   \           \   \       |  |       \_    _/   |  |     |   __|     \   \
|  |  |  |  /  _____  \  |  |\   |  /  _____  \ |  |__| | |  |____     /  _____  \  |  |      |  |      |  `--'  | |  | |  |\   |     |  |     |  |  |  | |  |____ |  |\   |     |  |    .----)   |      .----)   |      |  |         |  |     |  `----.|  |____.----)   |
|__|  |__| /__/     \__\ |__| \__| /__/     \__\ \______| |_______|   /__/     \__\ | _|      | _|       \______/  |__| |__| \__|     |__|     |__|  |__| |_______||__| \__|     |__|    |_______/       |_______/       |__|         |__|     |_______||_______|_______/
Manage Appointments Styles
**************************************************************************************/
.list-group-horizontal .list-group-item {
	display: inline-block;
}

/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments-header .list-group-item {
	padding: 10px 14px 0px 14px;
	text-align: center;
	background-color: initial;
	border: none;
}

.manage-appointments-header .list-group-item:last-child,
.manage-appointments-header .list-group-item:last-child a {
	padding-right: 0px;
	margin-bottom: -1px;
}

.manage-appointments-header .list-group-item a {
	padding-left: 5px;
	padding-right: 5px;
	max-width: 84px;
}

.manage-appointments-container .filter-buttons .btn-lg {
	padding: 5px 16px;
}

.manage-appointments-container .filter-buttons .dropdown.filter-field,
.manage-appointments-container .filter-buttons .calendar-button {
	width: 163px;
}

/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments-container .filter-buttons .calendar-button:active,
.manage-appointments-container .filter-buttons .calendar-button:focus {
	outline: none;
	outline-offset: 0px;
}

.manage-appointments-container .filter-buttons .dropdown .truncate-text-width,
.manage-appointments-container .filter-buttons .dropdown .fa,
.manage-appointments-container .filter-buttons .calendar-button .fa {
	position: relative;
	top: 3px;
}

.manage-appointments-container .filter-buttons .dropdown .truncate-text-width {
	max-width: 82%;
}

.manage-appointments-container .filter-buttons .dropdown.filter-field {
	margin-left: 10px;
}

.manage-appointments-header .list-group-item .active-item,
.manage-appointments-header .list-group-item .inactive-item {
	padding-bottom: 20px;
}

.manage-appointments-row,
.manage-appointments-row .toggle-icon-container,
.manage-appointments-row .appointment-icons {
	height: 86px;
}

.manage-appointments-row .toggle-icon-container {
	width: 27px;
	padding-top: 30px;
}

.sub-actions-icon-item .action-icon-label-offset {
	margin-left: -20px;
}

.manage-appointments-row .dropdown .dropdown-menu-right {
	top: -60px;
	margin-right: 8px;
	min-width: 224px;
}

.manage-appointments-row .appointment-error-icon {
	padding-left: 4px;
}

/* Two icons are in the markup, but have only one visible at a time, toggling them based on :hover state */
.toggle-favorite-icon > .fa + .fa,
.toggle-favorite-icon:hover > .fa {
	display: none;
}

.toggle-favorite-icon:hover > .fa + .fa {
	display: inherit;
}

.fa.stacked-secondary-icon {
	left: -25px;
}

.manage-appointments-row-content {
	padding-top: 18px;
	width: 89%;
}

.manage-appointments-upper-row,
.manage-appointments-row-title-xs {
	height: 30px;
}

.manage-appointments-upper-row > .manage-appointments-row-title:first-child,
.manage-appointments-upper-row > .manage-appointments-row-title:last-child,
.manage-appointments-row-title-xs {
	-webkit-flex: 1;
	padding: 2px 4px 2px 0px;
}

.manage-appointments-upper-row > .manage-appointments-row-title:first-child,
.manage-appointments-upper-row > .manage-appointments-row-title-extended:first-child {
	-webkit-order: 1;
	-webkit-flex: 0 1 auto;
}

.manage-appointments-upper-row > .manage-appointments-row-title:first-child {
	max-width: 50%;
}

.manage-appointments-upper-row > .manage-appointments-row-title-extended:first-child {
	max-width: 99%;
}

.manage-appointments-upper-row > .manage-appointments-row-title:last-child,
.manage-appointments-row-title-xs {
	-webkit-order: 2;
	max-width: 50%;
}

.manage-appointments-upper-row .manage-appointments-text-delimiter {
	padding-right: 10px;
	padding-left: 6px;
}

.manage-appointments-lower-row .truncate-text-width {
	position: relative;
	top: 5px;
}

.manage-appointments-lower-row .map-marker-icon {
	margin-left: 6px;
}

.manage-appointments-lower-row .manage-appointments-text-delimiter {
	padding-left: 8px;
	padding-right: 8px;
}

.appointment-icons {
	padding-top: 27px;
}

.appointment-icons .primary-action-icon {
	padding: 6px;
	cursor: pointer;
}

.appointment-icons .open-actions-icon {
	padding-left: 10px;
	padding-right: 10px;
}

.manage-appointments-row .invalid-icon {
	position: relative;
	top: -4px;
}

.manage-appointments-row .invalid-icon .fa {
	padding-right: 6px;
}

.appointment-icons .list-group-item {
	background-color: inherit;
	border: none;
	padding: 0px 5px 0px 0px;
}

.appointment-icons-invalid .visible-xs {
	display: inline !important;
}

.appointment-icons .list-group-item:last-child {
	padding: 0px;
}

.appointment-icons-invalid .list-group-item .primary-action-icon {
	padding: 0px 0px 0px 6px;
}

.manage-appointments-row .sub-actions-icon-item .fa {
	margin-right: 14px;
}

.manage-appointments-none-outer {
	height: 67vh;
	display: table;
	overflow: hidden;
}

.manage-appointments-none-inner {
	display: table-cell;
	vertical-align: middle;
}

.manage-appointments-none-outer .no-results-title {
	margin-bottom: 7px;
}

.manage-appointments-details-row {
	min-height: 50px; /*TODO the jquery spinner alters the height and creates an unpleasant grow/shrink behavior */
	padding: 34px 16px 34px 40px;
}

.manage-appointments-details-row .appointment-detail-top-padding {
	margin-top: 20px;
}

.manage-appointments-details-row .fa,
.manage-appointments-details-row .detail-edit-icon {
	padding-left: 4px;
}

.manage-appointments-details-row .detail-edit-icon {
	position: relative;
	top: 2px;
}

.invalid-appointment-message .fa {
	padding-left: 0px;
	padding-right: 10px;
}

.invalid-appointment-message {
	margin-bottom: 33px;
}

.manage-appointments-details-row .display-customer-notes {
	/*TODO get Product requirements to see if notes just flow unlimited or within a scroll bar*/
	max-height: 90px;
	overflow-y: auto;
}

.manage-appointments-details-row textarea.edit-customer-notes {
	width: 98%;
	padding: 6px;
	min-height: 28px;
}

.manage-appointments-details-row .notes-button-row {
	text-align: left;
	margin-top: 20px;
}

.manage-appointments-details-row .notes-save-button {
	margin-right: 10px;
}

.manage-appointments-details-row .notes-save-button,
.manage-appointments-details-row .notes-cancel-button {
	width: 80px;
	height: 34px;
	margin-bottom: 0px;
}

/* TODO - New Manage Appointments page design; to be reviewed. */
.popover.date-range-container {
	width: 260px;
	margin-top: 8px;
	margin-left: -48px;
	border-radius: 4px;
}

.popover.date-range-container .popover-content {
	padding: 24px 17px 25px 16px;
}

.popover.date-range-container > .arrow,
.popover.date-range-container > .arrow:after {
	display: none !important;
}

.popover.date-range-container label {
	margin-bottom: 7px;
}

.popover.date-range-container .input-group.date {
	margin-bottom: 16px;
}

.popover.date-range-container .clear-btn {
	margin-left: 10px;
}

.popover.date-range-container .btn-date-range-form {
	border-radius: 4px;
}

.popover.date-range-container .close:after {
	right: 16px;
	top: 26px;
}

/* TODO - New Manage Appointments page design; to be reviewed. */
.manage-appointments-date-range .input-group-addon {
	cursor: pointer;
}

.manage-appointments-container .date-range-text {
	min-height: 40px;
	padding: 12.5px 4px 6px 4px;
}

.appointment-print-modal-dialog h5 {
	margin-bottom: 3px !important;
}

.appointment-print-modal-dialog p,
.appointment-print-modal-dialog .print-client-address-container,
.appointment-print-modal-dialog .print-customer-address-container,
.appointment-print-modal-dialog .modal-print-value {
	margin-bottom: 13px !important;
}

.manage-appointments-container .appointment-print-modal-dialog .appointment-print-icon {
	margin-top: 10px;
}

.manage-appointments-container .modal-print-body {
	height: 70vh;
	overflow-y: auto;
	padding: 15px 0px 15px 15px;
	width: 100%;
}

.manage-appointments .appointment-cancellation-modal .cancellation-icon {
	margin-right: 7px;
}

.manage-appointments .appointment-cancellation-modal .form-group {
	margin-bottom: 18px;
}

.manage-appointments .appointment-cancellation-modal .cancellation-policy-text {
	overflow-y: auto;
	max-height: 300px;
}

.manage-appointments .appointment-cancellation-modal .item-label {
	margin-bottom: 9px;
}

.manage-appointments .appointment-cancellation-modal .buttons-row {
	margin-top: 24px;
}

.manage-appointments .appointment-cancellation-modal .close-cancellation-btn-row {
	margin-top: 6px;
}

.manage-appointments .appointment-cancellation-modal .cancellation-btn,
.manage-appointments .appointment-cancellation-modal .close-cancellation-btn {
	padding-bottom: 15px;
	padding-top: 14px;
}

.manage-appointments .appointment-cancellation-modal textarea.form-control {
	max-height: 80px;
	overflow-y: auto;
}

.manage-appointments .appointment-cancellation-modal .form-group.with-errors span.help-block {
	margin-top: -1px;
	margin-bottom: 0px;
}

.manage-appointments .appointment-cancellation-modal .cancellation-spinner {
	top: 60px;
}

.manage-appointments .appointment-cancellation-modal .appointment-cancellation-errors {
	margin-bottom: 12px;
}

.manage-appointments .appointment-cancellation-modal .close-cancellation-btn .truncate-text-width,
.manage-appointments .appointment-cancellation-modal .cancellation-btn .truncate-text-width {
	max-width: 90%;
}

/**************************************************************************************
END Manage Appointments Styles
**************************************************************************************/


/**************************************************************************************

  _______  _______ .__   __.  _______ .______          ___       __              _______.___________.____    ____  __       _______     _______.
 /  _____||   ____||  \ |  | |   ____||   _  \        /   \     |  |            /       |           |\   \  /   / |  |     |   ____|   /       |
|  |  __  |  |__   |   \|  | |  |__   |  |_)  |      /  ^  \    |  |           |   (----`---|  |----` \   \/   /  |  |     |  |__     |   (----`
|  | |_ | |   __|  |  . `  | |   __|  |      /      /  /_\  \   |  |            \   \       |  |       \_    _/   |  |     |   __|     \   \
|  |__| | |  |____ |  |\   | |  |____ |  |\  \----./  _____  \  |  `----.   .----)   |      |  |         |  |     |  `----.|  |____.----)   |
 \______| |_______||__| \__| |_______|| _| `._____/__/     \__\ |_______|   |_______/       |__|         |__|     |_______||_______|_______/
General Styles
**************************************************************************************/
.main-content-container {
	position: relative;
	/* set min height to 100% of viewport */
	min-height: 100vh;
	/** this sets the height of the footer */
	padding-bottom: 140px;
}

.no-select {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

#page-content {
	/* TODO Browsers render floats differently; value provided by designer */
	margin-top: 44.7px;
}

/* Top bar TODO - this is only used in Laravel templates - do we need this? */
.top-bar {
	-webkit-transition: height 400ms ease-in-out;
	-o-transition: height 400ms ease-in-out;
	transition: height 400ms ease-in-out;
}

/* TODO - this is only used in Laravel templates - do we need this? might be able to replace with margin-b-0 and list-unstyled */
.top-bar ul {
	margin-bottom: 0;
	list-style: none;
}

/* TODO - this is only used in Laravel templates - do we need this? */
.top-bar .row {
	max-width: none;
}

/* TODO - this is only used in Laravel templates - do we need this? can be replaced with margin-b-0 */
.top-bar form,
.top-bar input {
	margin-bottom: 0;
}

/* TODO - this is only used in Laravel templates - do we need this? */
.top-bar input {
	height: 2.45em;
}

/* TODO - this is only used in Laravel templates - do we need this? */
.top-bar .title-area:before,
.top-bar .title-area:after {
	content: " ";
	display: table;
}

/* TODO - this is only used in Laravel templates - do we need this? */
.top-bar .title-area:after {
	clear: both;
}

.content-list {
	list-style-type: none;
	padding-left: 0;
	margin-bottom: 0;
	clear: both;
}

.content-list li {
	padding: 20px;
}

.profile-pic {
	margin-bottom: 10px;
}

/*.heading-bar*/
.page-heading {
	margin: 0;
	padding: 15px 10px;
	line-height: 1;
	text-transform: uppercase;
}

/* TODO Bootstrap 4+ has classes that may handle this better */
.spacing-container {
	padding: 15px 10px;
}

.tab-content .appointment-row,
.tab-content .locations-row,
.tab-content .services-row,
.tab-content .staff-row {
	padding: 20px 10px 20px 0;
}

/* TODO Bootstrap 4+ has classes that may help with this: See "Bootstrap spacing" */
.tab-content .appointment-row p {
	margin-bottom: 20px;
}

.tab-content .tab-pane {
	margin-top: -10px;
}

/* TODO Bootstrap 4+ has classes that may help with this: See "Bootstrap spacing" */
.tab-content .tab-pane .btns-container{
	padding: 10px;
}

.tab-content .staff-row img {
	display: inline-block;
	float: left;
	margin-right: 20px;
}

.control-bar {
	position: relative;
	padding: 10px 15px 0 15px;
	margin: 0;
	clear: both;
}

.control-bar .control-bar-default-row {
	margin-left: -15px;
	margin-right: -15px;
}

.clients-map-container{
	height: 562px !important;
}

.no-clients-container {
	height: 530px;
}

.location-map,
.clients-list {
	height: 100%;
}

.map-marker {
	position: absolute;
	left: auto;
	text-align: center;
	width: 17px;
	height: 26px;
	background: transparent url(../img/location/map-marker.svg) no-repeat left top;
	/* affects the font inside the map*/
	font-family: DMSans-Regular, Helvetica, Arial, sans-serif;
	line-height: 20px;
}

.selection-item-map-marker {
	margin-left: 14px;
}

/* attempting to fix some odd Bootstrap 3 behavior in the collapse functionality */
.resource-description .collapse.in {
	display: block !important;
}

.resource-description .collapse[aria-expanded="false"] {
	display: block;
	min-height: 20px;
	max-height: 34px !important;
	overflow: hidden;
	text-overflow: ellipsis;
}

.resource-description-height {
    min-height: 34px !important;
}

.resource-description .collapse.show[aria-expanded="false"] {
	height: 25px !important;
}

.resource-description .collapsed:after {
	content: 'Read more';
}

.resource-description a:not(.collapsed):after {
	content: 'Read less';
}

.optional-header-text {
	text-transform: none;
}

.add-on-services-static-row div.add-on-services-skip-btn {
	margin-right: 20px;
	margin-left: 12px;
}

.add-on-services-list {
	max-height: 500px;
	overflow-y: auto;
}

.add-on-services-wrapper {
	display: inline-block;
	width: 100%;
}

/* TODO Bootstrap 4+ has classes that may help with this: See "Bootstrap spacing" */
.selection-list {
	list-style-type: none;
	margin: 0;
	padding-left: 0;
}

.item-name,
.item-detail-description,
.pagination-wrap .pagination-info,
.resource-description .read-more {
	padding-left: 12px;
}

.item-name {
	flex-basis: 100%;
	margin-bottom: 8px;
}

.item-detail-description {
	line-height: 1.4;
}

.selection-item,
.pagination-wrap,
.event-filters {
	display: flex;
	width: 100%;
	min-height: 70px;
	margin: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	padding: 15px 18px 15px 10px;
	text-align: left;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
}

.selection-item .btn-selection-item {
	min-height: 30px;
	margin: 0px 0px 4px 0px !important;
	border-radius: 4px;
	padding: 8px 9px 8px 11px;
}

.control-gray-bar {
	position: relative;
	padding: 10px 10px 0 10px;
}

.container.select-date-and-time .hours-col a {
	display: block;
	padding: 8px 0;
}

.container.select-date-and-time .hours-col a.disabled {
	cursor: not-allowed;
}

.container.select-date-and-time .hours-col a.disabled span {
	cursor: not-allowed;
}

.container.select-date-and-time .date-time-heading {
	padding: 15px 10px;
	line-height: 18px;
}

.container.select-date-and-time .date-time-heading .previous-dates a,
.container.select-date-and-time .date-time-heading .next-dates a {
	white-space: nowrap;
}

.container.select-date-and-time .date-time-heading .icon {
	display: inline-block;
	margin: 0 3px;
}

.container.select-date-and-time .calendar-button {
	display: inline-block;
	margin: 0 5px;
}

.container.select-date-and-time .calendar-button .icon-calendar-o {
	cursor: pointer;
	font-weight: 700;/* Increasing the weight of an icon here, not text */
	text-decoration: none;
	line-height: inherit;
	-webkit-transition: color 0.15s ease-in-out;
	-moz-transition: color 0.15s ease-in-out;
	transition: color 0.15s ease-in-out;
}

.container.select-date-and-time legend.date-column-title {
	padding-top: 15px;
	margin-bottom: 15px;
	border-bottom: none;
}

.container.select-date-and-time .gridMsg {
	width: 100%;
	text-align: center;
	position: absolute;
	top: 50%;
}

.reset-password-container {
	max-width: 350px;
}

.passwordResetSuccess {
	height: 250px;
	padding: 50px 0;
}

/* TODO this seems incorrectly name or incorrectly used. "ajax" and "load" are in the name but this is just a min height class. */
.ajax-load {
	min-height: 200px;
}

.content-container {
	position: relative;
	margin: 14px -10px 0px -10px;
}

/* TODO review this for usage; not sure if it is actually used */
.spinner {
	z-index: 10 !important;
}

.landingPageCustomContent {
	padding: 20px;
	min-height: 260px;
}

.disableCustViewMsg {
	width: 100%;
	height: 100%;
}

.disableCustViewMsg table {
	margin: 0 auto;
}

.profileText {
	margin-right: 10px;
	float: left;
}

.timezone-header {
	margin-left: -5px;
}

.overlay,
.react-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1000;
	top: 0px;
	left: 0px;
}

.react-overlay {
	display: none;
}

.select-location-headings {
	padding: 7px;
}

.skip-map {
	padding: 8px;
}

.billingLabel{
	margin-bottom: 16px !important;
}
.new-user-text {
	padding-bottom: 15px;
}

.credit-card-info {
	font-size: 14px;
	margin-bottom:15px;
}

.new-card-btn {
	margin-top: 30px;
}

.margin-t-10 {
	margin-top: 10px !important;
}

.margin-t-16 {
	margin-top: 16px !important;
}

.text-align-right{
	text-align: right!important;
}
.text-align-center{
	text-align: center!important;
}
.paymentSummary {
	border-collapse:separate;
	border: 1px solid #CDCDCD !important;
	border-radius: 5px !important;
	width: 100%;
}
.paymentSummary th {
	border: 1px solid #CDCDCD !important;
	background: rgba(0, 0, 0, 0.08);
	border-top: none;
}
.paymentSummary td {
	border-bottom: 1px #CDCDCD !important;
}
.paymentSummary td:first-child, th:first-child {
	border-left: none;
}
.paymentSummary table,th,td {
	font-size: 14px !important;
	padding: 8px !important;
	color: #000 !important;
	font-weight: 400 !important;
}
.paymentSummaryDetails {
	border-collapse:separate;
	border: 1px solid #CDCDCD !important;
	border-radius: 5px !important;
	width: 100%;
}
.paymentSummaryDetails td:first-child, th:first-child {
	border-left: none;
}
.paymentSummaryDetails tr td {
	font-size: 14px !important;
	padding: 8px !important;
	text-align: left !important;
	color: #000 !important;
	font-weight: 400 !important;
}
.paymentSummaryDetails tr td+td {
	font-size: 14px !important;
	padding: 8px !important;
	text-align: center !important;
	color: #000 !important;
	font-weight: 400 !important;
}
.paymentSummaryDetails tr:first-child td {
	border-bottom: 1px solid #CDCDCD !important;
}

.optionRadio {
	accent-color: #1087D7;
	width: 13px;
	height: 13px;
	vertical-align: middle;
}

.finalizeButton{
	color: white;
	font-size: 16px !important;
	font-family: DMSans-Regular, Helvetica, Arial, sans-serif;
	font-weight: 400 !important;
	line-height: 22px;
	word-wrap: break-word;
}

.noteDisplay {
	font-size: 10px !important;
	color: #000 !important;
	font-weight: 700 !important;
	font-style: italic !important;
}

hr{
	margin-top: 16px !important;
	margin-bottom: 16px !important;
}
/**************************************************************************************
END General Styles
**************************************************************************************/


/**************************************************************************************
.______   .______       __  .__   __. .___________.        _______.___________.____    ____  __       _______     _______.
|   _  \  |   _  \     |  | |  \ |  | |           |       /       |           |\   \  /   / |  |     |   ____|   /       |
|  |_)  | |  |_)  |    |  | |   \|  | `---|  |----`      |   (----`---|  |----` \   \/   /  |  |     |  |__     |   (----`
|   ___/  |      /     |  | |  . `  |     |  |            \   \       |  |       \_    _/   |  |     |   __|     \   \
|  |      |  |\  \----.|  | |  |\   |     |  |        .----)   |      |  |         |  |     |  `----.|  |____.----)   |
| _|      | _| `._____||__| |__| \__|     |__|        |_______/       |__|         |__|     |_______||_______|_______/
Print Styles
**************************************************************************************/
@media print {
	.inline {
		display: inline-block;
		vertical-align: top;
	}

	.inline p {
		line-height: 125%;
	}

	.inline h5 {
		font-style: normal;
		text-rendering: optimizeLegibility;
		margin-top: 0;
		margin-bottom: 0;
	}

	.print-w-100 {
		width: 100%;
	}

	.print-w-100-i {
		width: 100% !important;
	}

	.print-w-custom {
		width: 198px;
	}

	.modal,
	.modal-content,
	.modal-dialog {
		border: none;
	}

	/* Need this here to override the above .inline p */
	.appointment-print-modal-dialog p {
		line-height: normal;
	}

	/* Need this here to override the above .inline p */
	.appointment-print-modal-dialog .print-customer-address-container p {
		margin-bottom: 0px !important;
	}

	/* Need this here to override the above .inline h5 */
	.appointment-print-modal-dialog h5 {
		margin-bottom: 3px !important;
	}

	.manage-appointments-row,
	.manage-appointments-container .primary-border-t {
		border: none !important
	}

	.tooltip,
	.tooltip *,
	.modal .close {
		display: none !important;
	}

	.appointment-print .modal-dialog {
		min-width: 100%;
	}

	.appointment-print {
		position: relative;
		top: 0;
	}

	.appointment-print-modal-dialog {
		vertical-align: top;
		margin: 0px;
	}

	.appointment-print-modal-dialog .modal-body {
		padding-top: 0px;
	}

	.appointment-print-modal-dialog .modal-content {
		padding: 0px;
	}

	.appointment-print-modal-dialog .modal-print-body {
		overflow-y: visible;
		height: 90vh;
		padding: 0px;
		margin: 0px;
	}

	.appointment-print-modal-dialog .appointment-print-icon {
		visibility: hidden;
		display: none;
	}
}

/**************************************************************************************
END Print Styles
**************************************************************************************/


/**************************************************************************************
.______     ______     ______   .___________.    _______.___________..______          ___      .______       __________   ___ .___________..______          ___              _______..___  ___.      ___       __       __              _______.  ______ .______       _______  _______ .__   __.      _______.        _______.___________.____    ____  __       _______     _______.
|   _  \   /  __  \   /  __  \  |           |   /       |           ||   _  \        /   \     |   _  \     |   ____\  \ /  / |           ||   _  \        /   \            /       ||   \/   |     /   \     |  |     |  |            /       | /      ||   _  \     |   ____||   ____||  \ |  |     /       |       /       |           |\   \  /   / |  |     |   ____|   /       |
|  |_)  | |  |  |  | |  |  |  | `---|  |----`  |   (----`---|  |----`|  |_)  |      /  ^  \    |  |_)  |    |  |__   \  V  /  `---|  |----`|  |_)  |      /  ^  \          |   (----`|  \  /  |    /  ^  \    |  |     |  |           |   (----`|  ,----'|  |_)  |    |  |__   |  |__   |   \|  |    |   (----`      |   (----`---|  |----` \   \/   /  |  |     |  |__     |   (----`
|   _  <  |  |  |  | |  |  |  |     |  |        \   \       |  |     |      /      /  /_\  \   |   ___/     |   __|   >   <       |  |     |      /      /  /_\  \          \   \    |  |\/|  |   /  /_\  \   |  |     |  |            \   \    |  |     |      /     |   __|  |   __|  |  . `  |     \   \           \   \       |  |       \_    _/   |  |     |   __|     \   \
|  |_)  | |  `--'  | |  `--'  |     |  |    .----)   |      |  |     |  |\  \----./  _____  \  |  |         |  |____ /  .  \      |  |     |  |\  \----./  _____  \     .----)   |   |  |  |  |  /  _____  \  |  `----.|  `----.   .----)   |   |  `----.|  |\  \----.|  |____ |  |____ |  |\   | .----)   |      .----)   |      |  |         |  |     |  `----.|  |____.----)   |
|______/   \______/   \______/      |__|    |_______/       |__|     | _| `._____/__/     \__\ | _|         |_______/__/ \__\     |__|     | _| `._____/__/     \__\    |_______/    |__|  |__| /__/     \__\ |_______||_______|   |_______/     \______|| _| `._____||_______||_______||__| \__| |_______/       |_______/       |__|         |__|     |_______||_______|_______/
Bootstrap Extra Small Screens Styles / Bootstrap XS Screens Styles
**************************************************************************************/
/* Bootstrap's definition of "extra small" screens in Landscape orientation (e.g. cell phones). */
/* https://getbootstrap.com/docs/3.3/css/#grid */
@media screen and (max-width: 767px) {
	.xs-padding-0 {
		padding: 0 !important;
	}

	.xs-padding-l-0 {
		padding-left: 0px !important;
	}

	.xs-padding-r-0 {
		padding-right: 0px !important;
	}

	#searchBar-container .right-addon input {
		width: 67%;
	}

	#searchBar-container .search-btn-group {
		right: 32%;
	}

	#searchBar-container .btn-search-clear {
		padding: 6px;
	}

	.add-on-services-static-row div.add-on-services-skip-btn {
		margin-right: 18px;
	}

	.pull-xs-left { float: left !important; }
	.pull-xs-right { float: right !important; }
	.pull-xs-none { float: none !important; }

	.form-group .multi-controls-row {
		margin-bottom: 10px;
	}

	.btn-cookie {
		width: 80%;
	}

	input[type=checkbox] {
		height: 16px;
		width: 16px;
	}

	.branding-container .text-branding-column-right {
		max-width: 190px;
	}

	#page-footer .gdpr-text {
		margin-bottom: 10px;
	}

	.login-form-content {
		/* add in the styles of .row */
		margin: 0px -15px;
	}

	.login-form-content:after {
		display: table;
		content: " ";
		clear: both;
	}

	.header-button-alignment {
		float: left;
		margin-right: 0px !important;
		margin-left: 0px !important;
		text-align: center;
		width: 100%;
	}

	ul.main-nav,
	ul.main-nav .dropdown-menu {
		text-align: center;
	}

	/*TODO this is a temp fix until i figure out why the margins, padding and width is all messed up */
	ul.main-nav {
		width: 110%;
	}

	.branding-container {
		/* TODO Browsers render floats differently; value provided by designer */
		margin-top: 13.9px;
		margin-bottom: 17.1px;
	}

	.text-center-xs {
		text-align: center;
	}

	.text-right-xs {
		text-align: right;
	}

	.text-left-xs {
		text-align: left;
	}

	.auth-form-container .btn-login,
	.auth-form-container .btn-login-optional-login,
	.landingPageCustomContent,
	.landingPageCustomContent p,
	/* Make .navbar-nav.nav-content-logged-in > li > a match .navbar-default .navbar-nav.main-nav > li > a */
	.navbar-nav.nav-content-logged-in > li > a {
		font-size: 16px;
	}

	#page-footer .powered-by {
		margin-top: 20px
	}

	.main-content-container {
		/** this sets the height of the footer */
		padding-bottom: 166px;
	}

	.navbar-default {
		/* NOTE: This is the same padding as .container */
		padding-left: 15px;
		padding-right: 15px;
	}

	/* Make .navbar-nav.nav-content-logged-in > li > a match .navbar-default .navbar-nav.main-nav > li > a */
	.navbar-nav.nav-content-logged-in > li > a {
		padding: 15px 20px;
	}

	/* Make this style match .navbar ul.nav-content-lower > li */
	.navbar-nav.nav-content-logged-in > li.logout-button {
		margin-top: 24px;
	}

	.nav.nav-tabs li.profiles-dropdown-cont {
		margin-top: 14px;
	}

	.d-inline-block-xs {
		display: inline-block;
	}

	.d-block-xs {
		display: block;
	}

	.manage-appointments-container {
		padding-left: 0px;
		padding-right: 0px;
	}

	.manage-appointments-row {
		height: 204px;
	}

	.appointment-icons,
	.appointment-icons-invalid {
		margin-left: 34px;
		padding-top: 20px;
		height: auto !important;
	}

	.appointment-icons:not(.appointment-icons-invalid) {
		margin-left: 22px;
	}

	.manage-appointments-row .invalid-icon-xs {
		margin-left: 11px;
		top: -2px;
	}

	.manage-appointments-lower-row {
		padding-top: 11px;
	}

	.manage-appointments-lower-row .lower-row-detail-xs {
		padding: 4px 0px;
	}

	/* TODO - New Manage Appointments page design; to be reviewed. */
	.manage-appointments-container .filter-buttons {
		background-color: #FFFFFF;
		border-top: 1px solid #C1C7C8 !important;
		border-right: 1px solid #C1C7C8 !important;
		border-left: 1px solid #C1C7C8 !important;
		padding: 20px 0px 10px 0px !important;
	}

	.manage-appointments-row .dropdown .dropdown-menu-right {
		margin-right: -180px;
		top: -138px;
	}

	.manage-appointments-lower-row .appointment-error-icon {
		top: -5px;
	}

	.manage-appointments-lower-row .truncate-text-width {
		max-width: 95%;
	}

	.manage-appointments-row-title,
	.manage-appointments-row-title-xs {
		width: 100% !important;
		max-width: 100% !important;
	}

	.manage-appointments-details-row .appointment-detail-top-padding-xs {
		margin-top: 20px;
	}

	.manage-appointments-lower-row .map-marker-icon {
		position: relative;
		top: -6px;
	}

	.textNotificationSection .textNotificationButtonWriteMode {
		padding-left: 15px;
		padding-right: 15px;
		margin-top: 16px;
	}

	.textNotificationSection .countryCallingCodeFieldGroup {
		margin-bottom: 15px;
	}

}

/**************************************************************************************
END Bootstrap Extra Small Screens Styles / Bootstrap XS Screens Styles
**************************************************************************************/


/**************************************************************************************
.______     ______     ______   .___________.    _______.___________..______          ___      .______           _______..___  ___.      ___       __       __              _______.  ______ .______       _______  _______ .__   __.      _______.        _______.___________.____    ____  __       _______     _______.
|   _  \   /  __  \   /  __  \  |           |   /       |           ||   _  \        /   \     |   _  \         /       ||   \/   |     /   \     |  |     |  |            /       | /      ||   _  \     |   ____||   ____||  \ |  |     /       |       /       |           |\   \  /   / |  |     |   ____|   /       |
|  |_)  | |  |  |  | |  |  |  | `---|  |----`  |   (----`---|  |----`|  |_)  |      /  ^  \    |  |_)  |       |   (----`|  \  /  |    /  ^  \    |  |     |  |           |   (----`|  ,----'|  |_)  |    |  |__   |  |__   |   \|  |    |   (----`      |   (----`---|  |----` \   \/   /  |  |     |  |__     |   (----`
|   _  <  |  |  |  | |  |  |  |     |  |        \   \       |  |     |      /      /  /_\  \   |   ___/         \   \    |  |\/|  |   /  /_\  \   |  |     |  |            \   \    |  |     |      /     |   __|  |   __|  |  . `  |     \   \           \   \       |  |       \_    _/   |  |     |   __|     \   \
|  |_)  | |  `--'  | |  `--'  |     |  |    .----)   |      |  |     |  |\  \----./  _____  \  |  |         .----)   |   |  |  |  |  /  _____  \  |  `----.|  `----.   .----)   |   |  `----.|  |\  \----.|  |____ |  |____ |  |\   | .----)   |      .----)   |      |  |         |  |     |  `----.|  |____.----)   |
|______/   \______/   \______/      |__|    |_______/       |__|     | _| `._____/__/     \__\ | _|         |_______/    |__|  |__| /__/     \__\ |_______||_______|   |_______/     \______|| _| `._____||_______||_______||__| \__| |_______/       |_______/       |__|         |__|     |_______||_______|_______/
Bootstrap Small Screens Styles
**************************************************************************************/
/* Bootstrap's definition of "small" screens in Landscape orientation (e.g. cell tablets). */
@media only screen and (min-width: 768px) {
	#searchBar-container .right-addon input {
		width: 82%;
	}

	#searchBar-container .search-btn-group {
		right: 17%;
	}

	.form-group .multi-controls-row {
		margin-bottom: 10px;
	}

	.btn-cookie {
		width: 35%;
	}

	input[type=checkbox] {
		height: 16px;
		width: 16px;
	}

	.branding-container .text-branding-column-right {
		max-width: 190px;
	}

	#page-footer .gdpr-text {
		margin-bottom: 10px;
	}

	.header-button-alignment {
		float: left;
		margin-right: 0px !important;
		margin-left: 0px !important;
		text-align: center;
		width: 100%;
	}

	.auth-form-container .btn-login,
	.auth-form-container .btn-login-optional-login,
	.landingPageCustomContent  {
		font-size: 16px;
	}

	.main-content-container {
		/** this sets the height of the footer */
		padding-bottom: 166px;
	}

	li.btn-book-appt-list-item {
		float: right;
	}

	/* Make .navbar-nav.nav-content-logged-in > li > a match .navbar-default .navbar-nav.main-nav > li > a */
	.navbar-nav.nav-content-logged-in > li > a,
	#tempPasswordModal .modal-dialog,
	#message-modal .modal-dialog {
		font-size: 14px;
	}

	/* Make this style match .navbar-default .navbar-nav.main-nav > li > a */
	.navbar-nav.nav-content-logged-in > li > a {
		padding: 15px 20px;
	}

	.add-on-button-container {
		margin-top: 5px;
		margin-left: 10px;
	}

	.appointmentCancellationModal .modal-dialog {
		width: 450px;
	}

	.appointmentCancellationModal .button-row {
		margin: 0px 0px;
	}

	#tempPasswordModal .modal-dialog {
		width: 350px;
	}

	#text-reminder-confirm {
		margin: 0 auto;
		max-width: 350px;
	}

	#modalErrorMessage .modal-dialog {
		width: 350px;
	}

	#message-modal .modal-dialog {
		width: 500px;
	}

	.modal:before {
		display: inline-block;
		vertical-align: middle;
		content: " ";
		height: 100%;
	}

	.content-container {
		margin-left: 0;
		margin-right: 0;
	}

	.page-heading {
		padding-right: 20px;
		padding-left: 20px;
	}

	/* TODO Bootstrap 4+ has classes that may handle this better */
	.spacing-container {
		padding: 20px;
	}

	.dl-horizontal dt, .dl-horizontal dd {
		margin-bottom: 0;
	}

	.dl-horizontal dt {
		float: left;
		width: 10em;
		overflow: hidden;
		clear: none;
		text-align: left;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.dl-horizontal dd {
		margin-left: 10em;
	}

	.control-gray-bar {
		padding-left: 15px;
		padding-right: 15px;
	}

	.date-time-heading {
		padding-left: 20px;
		padding-right: 20px;
	}

	.clients-list.col-md-6 {
		float: right;
		padding-left: 0;
	}

	.location-map {
		padding-right: 0;
		overflow: hidden;
	}

	.branding-container {
		/* TODO Browsers render floats differently; value provided by designer */
		margin-top: 13.9px;
		margin-bottom: 17.1px;
	}

	.d-inline-block-sm {
		display: inline-block;
	}

	.d-block-sm {
		display: block;
	}

	.manage-appointments-container {
		padding-left: 0px;
		padding-right: 0px;
	}

	.manage-appointments-row-content {
		width: 92%;
	}

	.manage-appointments-lower-row .truncate-text-width {
		max-width: 55%;
	}

	.textNotificationSection .textNotificationButtonWriteMode {
		padding: 0px;
		top: 20px;
	}

	.textNotificationSection .textNotificationButtonWriteMode button {
		margin-left: 15px;
	}

}

/* Limit the usage of these styles to this screen size */
@media screen and (min-width: 768px) and (max-width: 991px) {
	.sm-padding-0 {
		padding: 0 !important;
	}

	.sm-padding-l-0 {
		padding-left: 0px !important;
	}

	.sm-padding-r-0 {
		padding-right: 0px !important;
	}

	.pull-sm-left { float: left !important; }
	.pull-sm-right { float: right !important; }
	.pull-sm-none { float: none !important; }

	.text-center-sm {
		text-align: center;
	}

	.text-right-sm {
		text-align: right;
	}

	.text-left-sm {
		text-align: left;
	}

	ul.main-nav,
	ul.main-nav .dropdown-menu {
		text-align: center;
	}
}

/**************************************************************************************
END Bootstrap Small Screens Styles
**************************************************************************************/


/**************************************************************************************
.______     ______     ______   .___________.    _______.___________..______          ___      .______      .___  ___.  _______  _______   __   __    __  .___  ___.         _______.  ______ .______       _______  _______ .__   __.      _______.        _______.___________.____    ____  __       _______     _______.
|   _  \   /  __  \   /  __  \  |           |   /       |           ||   _  \        /   \     |   _  \     |   \/   | |   ____||       \ |  | |  |  |  | |   \/   |        /       | /      ||   _  \     |   ____||   ____||  \ |  |     /       |       /       |           |\   \  /   / |  |     |   ____|   /       |
|  |_)  | |  |  |  | |  |  |  | `---|  |----`  |   (----`---|  |----`|  |_)  |      /  ^  \    |  |_)  |    |  \  /  | |  |__   |  .--.  ||  | |  |  |  | |  \  /  |       |   (----`|  ,----'|  |_)  |    |  |__   |  |__   |   \|  |    |   (----`      |   (----`---|  |----` \   \/   /  |  |     |  |__     |   (----`
|   _  <  |  |  |  | |  |  |  |     |  |        \   \       |  |     |      /      /  /_\  \   |   ___/     |  |\/|  | |   __|  |  |  |  ||  | |  |  |  | |  |\/|  |        \   \    |  |     |      /     |   __|  |   __|  |  . `  |     \   \           \   \       |  |       \_    _/   |  |     |   __|     \   \
|  |_)  | |  `--'  | |  `--'  |     |  |    .----)   |      |  |     |  |\  \----./  _____  \  |  |         |  |  |  | |  |____ |  '--'  ||  | |  `--'  | |  |  |  |    .----)   |   |  `----.|  |\  \----.|  |____ |  |____ |  |\   | .----)   |      .----)   |      |  |         |  |     |  `----.|  |____.----)   |
|______/   \______/   \______/      |__|    |_______/       |__|     | _| `._____/__/     \__\ | _|         |__|  |__| |_______||_______/ |__|  \______/  |__|  |__|    |_______/     \______|| _| `._____||_______||_______||__| \__| |_______/       |_______/       |__|         |__|     |_______||_______|_______/
Bootstrap Medium Screens Styles
**************************************************************************************/
/* Bootstrap's definition of "medium" screens in Landscape orientation (e.g. desktops). */
@media only screen and (min-width: 992px) {
	.appointmentCancellationModal .cancellation-btn {
		margin-left: 10px;
	}

	.textNotificationSection .textNotificationButtonWriteMode button {
		width: 65%;
	}

	#searchBar-container .right-addon input {
		width: 82%;
	}

	#searchBar-container .search-btn-group {
		right: 17%;
	}

	.btn-cookie {
		width: 80%;
	}

	.navbar-default {
		padding-left: 6%;
		padding-right: 6%;
	}

	.branding-container #custom-client-logo {
		max-width: 200px;
		max-height: 65px;
	}

	.add-on-services-static-row div.add-on-services-skip-btn {
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	.branding-container .text-branding-column-right {
		max-width: 286px;
	}

	.d-inline-block-md {
		display: inline-block;
	}

	.d-block-md {
		display: block;
	}

	.manage-appointments-container {
		padding-left: 10%;
		padding-right: 10%;
	}

	.manage-appointments-row-content {
		width: 94%;
	}

	.manage-appointments-lower-row .truncate-text-width {
		max-width: 52%;
	}

	.textNotificationSection .textNotificationButtonWriteMode button {
		margin-left: 0px;
	}
}

/* Limit the usage of these styles to this screen size */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.md-padding-0 {
		padding: 0 !important;
	}

	.md-padding-l-0 {
		padding-left: 0px !important;
	}

	.md-padding-r-0 {
		padding-right: 0px !important;
	}

	.pull-md-left { float: left !important; }
	.pull-md-right { float: right !important; }
	.pull-md-none { float: none !important; }

	.text-center-md {
		text-align: center;
	}

	.text-right-md {
		text-align: right;
	}

	.text-left-md {
		text-align: left;
	}
}

/**************************************************************************************
END Bootstrap Medium Screens Styles
**************************************************************************************/


/**************************************************************************************
.______     ______     ______   .___________.    _______.___________..______          ___      .______       __          ___      .______        _______  _______         _______.  ______ .______       _______  _______ .__   __.      _______.        _______.___________.____    ____  __       _______     _______.
|   _  \   /  __  \   /  __  \  |           |   /       |           ||   _  \        /   \     |   _  \     |  |        /   \     |   _  \      /  _____||   ____|       /       | /      ||   _  \     |   ____||   ____||  \ |  |     /       |       /       |           |\   \  /   / |  |     |   ____|   /       |
|  |_)  | |  |  |  | |  |  |  | `---|  |----`  |   (----`---|  |----`|  |_)  |      /  ^  \    |  |_)  |    |  |       /  ^  \    |  |_)  |    |  |  __  |  |__         |   (----`|  ,----'|  |_)  |    |  |__   |  |__   |   \|  |    |   (----`      |   (----`---|  |----` \   \/   /  |  |     |  |__     |   (----`
|   _  <  |  |  |  | |  |  |  |     |  |        \   \       |  |     |      /      /  /_\  \   |   ___/     |  |      /  /_\  \   |      /     |  | |_ | |   __|         \   \    |  |     |      /     |   __|  |   __|  |  . `  |     \   \           \   \       |  |       \_    _/   |  |     |   __|     \   \
|  |_)  | |  `--'  | |  `--'  |     |  |    .----)   |      |  |     |  |\  \----./  _____  \  |  |         |  `----./  _____  \  |  |\  \----.|  |__| | |  |____    .----)   |   |  `----.|  |\  \----.|  |____ |  |____ |  |\   | .----)   |      .----)   |      |  |         |  |     |  `----.|  |____.----)   |
|______/   \______/   \______/      |__|    |_______/       |__|     | _| `._____/__/     \__\ | _|         |_______/__/     \__\ | _| `._____| \______| |_______|   |_______/     \______|| _| `._____||_______||_______||__| \__| |_______/       |_______/       |__|         |__|     |_______||_______|_______/
Bootstrap Large Screens Styles
**************************************************************************************/
/* Bootstrap's definition of "large" screens in Landscape orientation (e.g. large desktops). */
@media only screen and (min-width: 1200px) {
	.lg-padding-0 {
		padding: 0 !important;
	}

	.lg-padding-l-0 {
		padding-left: 0px !important;
	}

	.lg-padding-r-0 {
		padding-right: 0px !important;
	}

	.pull-lg-left { float: left !important; }
	.pull-lg-right { float: right !important; }
	.pull-lg-none { float: none !important; }

	.container.select-date-and-time .col-hours-lg {
		width: 20%;
	}

	.text-center-lg {
		text-align: center;
	}

	.text-right-lg {
		text-align: right;
	}

	.text-left-lg {
		text-align: left;
	}

	.navbar-default {
		padding-left: 6%;
		padding-right: 5.5%;
	}

	.d-inline-block-lg {
		display: inline-block;
	}

	.d-block-lg {
		display: block;
	}

	.branding-container #custom-client-logo {
		max-width: 200px;
		max-height: 65px;
	}

	.add-on-button-container {
		margin-top: 10px;
	}

	.manage-appointments-lower-row .truncate-text-width {
		max-width: 60%;
	}

	.textNotificationSection .textNotificationButtonWriteMode button {
		margin-left: 0px;
	}
}

/**************************************************************************************
END Bootstrap Large Screens Styles
**************************************************************************************/


/**************************************************************************************
  ______   .___________. __    __   _______ .______              _______.  ______ .______       _______  _______ .__   __.         _______. __   ________   _______         _______.___________.____    ____  __       _______     _______.
 /  __  \  |           ||  |  |  | |   ____||   _  \            /       | /      ||   _  \     |   ____||   ____||  \ |  |        /       ||  | |       /  |   ____|       /       |           |\   \  /   / |  |     |   ____|   /       |
|  |  |  | `---|  |----`|  |__|  | |  |__   |  |_)  |          |   (----`|  ,----'|  |_)  |    |  |__   |  |__   |   \|  |       |   (----`|  | `---/  /   |  |__         |   (----`---|  |----` \   \/   /  |  |     |  |__     |   (----`
|  |  |  |     |  |     |   __   | |   __|  |      /            \   \    |  |     |      /     |   __|  |   __|  |  . `  |        \   \    |  |    /  /    |   __|         \   \       |  |       \_    _/   |  |     |   __|     \   \
|  `--'  |     |  |     |  |  |  | |  |____ |  |\  \----.   .----)   |   |  `----.|  |\  \----.|  |____ |  |____ |  |\   |    .----)   |   |  |   /  /----.|  |____    .----)   |      |  |         |  |     |  `----.|  |____.----)   |
 \______/      |__|     |__|  |__| |_______|| _| `._____|   |_______/     \______|| _| `._____||_______||_______||__| \__|    |_______/    |__|  /________||_______|   |_______/       |__|         |__|     |_______||_______|_______/
Other Screen Size Styles / Miscellaneous Screen Size Styles
**************************************************************************************/
/*TODO Stop using all of this once Laravel has been removed */
/* Non Bootstrap standard media query for Landscape orientation */
@media only screen and (min-width: 850px) {
	/*TODO Used for a Laravel template page*/
	.w-100 .top-bar {
		margin: 0 auto;
	}
}

/* Non Bootstrap standard media query for Landscape orientation */
@media only screen and (min-width: 800px) {
	/*TODO Used for a Laravel template page*/
	#page-header {
		position: relative;
		height: 120px;
		overflow: visible;
	}

	/*TODO Used for a Laravel template page*/
	.w-100 .top-bar {
		margin: 0 auto;
		margin-bottom: 0; /*TODO this doesn't make sense to write it like this*/
	}

	/*TODO Used for a Laravel template page*/
	.top-bar:before,
	.top-bar:after {
		content: " ";
		display: table
	}

	/*TODO Used for a Laravel template page*/
	.top-bar:after {
		clear: both
	}
}

/* Non Bootstrap standard media query for iPad Mini (portrait mode) */
@media only screen and (max-width: 768px) {
	.manage-appointments-row .truncate-text-upper-row {
		width: 250px;
	}

	.appointment-icons .list-group-item {
		padding-right: 2px;
	}

	.add-on-button-container {
		margin-top: 5px;
		margin-left: 10px;
	}
}

/* Non Bootstrap standard media query for Surface Duo widths (portrait mode) */
@media only screen and (max-width: 540px) {
	.manage-appointments-row .truncate-text-upper-row {
		width: 420px;
		max-width: 420px
	}

	.popover.date-range-container {
		margin-left: 48px;
	}

	.manage-appointments-date-range .bootstrap-datetimepicker-widget .month,
	.manage-appointments-date-range .bootstrap-datetimepicker-widget .year {
		display: inline-block;
	}
}

/* Non Bootstrap standard media query for iPhone 6/7/8 Plus/XR widths (portrait mode) */
@media only screen and (max-width: 414px) {
	.manage-appointments-row .truncate-text-upper-row {
		width: 308px;
	}

	.manage-appointments-lower-row .truncate-text-width {
		max-width: 92%;
	}

	.popover.date-range-container {
		margin-left: 38px;
	}
}

/* Non Bootstrap standard media query for Galaxy S20 Ultra / Galaxy A51/71 widths (portrait mode) */
@media only screen and (max-width: 412px) {

}

/* Non Bootstrap standard media query for Pixel 2 / Pixel 2 XL widths (portrait mode) */
@media only screen and (max-width: 411px) {

}

/* Non Bootstrap standard media query for Pixel 5 widths (portrait mode) */
@media only screen and (max-width: 393px) {

}

/* Non Bootstrap standard media query for iPhone 12 Pro widths (portrait mode) */
@media only screen and (max-width: 390px) {

}

/* Non Bootstrap standard media query for iPhone 6/7/8/X/SE widths (portrait mode) */
@media only screen and (max-width: 375px) {
	.manage-appointments-row .truncate-text-upper-row {
		width: 250px;
	}

	.popover.date-range-container {
		margin-left: 20px;
	}
}

/* Non Bootstrap standard media query for Moto G4 / Galaxy S5 / Galaxy S8+ widths (portrait mode) */
@media only screen and (max-width: 360px) {
	.manage-appointments-row .truncate-text-upper-row {
		width: 308px;
	}

	.manage-appointments-row .truncate-text-upper-row {
		width: 256px;
	}

	.manage-appointments-header .list-group-item {
		padding: 10px 10px 0px 10px;
	}

	.manage-appointments-row .dropdown .dropdown-menu-right {
		margin-right: -106px;
	}

	.manage-appointments-container .filter-buttons .dropdown.filter-field {
		margin-left: 0px;
	}

	.manage-appointments-container .filter-buttons .dropdown.filter-field,
	.manage-appointments-container .filter-buttons .calendar-button {
		width: 90%;
	}

	.manage-appointments-container .filter-buttons .btn-group .dropdown-toggle.btn-lg {
		top: 0px;
		max-width: 100%;
	}

	.manage-appointments-container .filter-buttons .dropdown .truncate-text-width {
		max-width: 90%;
	}

	.popover.date-range-container {
		margin-left: 2px;
	}
}

/* Non Bootstrap standard media query for iPhone 5/SE widths (portrait mode) */
@media only screen and (max-width: 320px) {
	.manage-appointments-row .truncate-text-upper-row {
		width: 220px;
	}

	.manage-appointments-header .list-group-item {
		padding: 10px 6px 0px 6px;
	}

	.manage-appointments-row .dropdown .dropdown-menu-right {
		margin-right: -86px;
	}

	.manage-appointments-row {
		height: 216px;
	}

	.popover.date-range-container {
		margin-left: 0px;
	}
}

/* Non Bootstrap standard media query for Galaxy Fold widths (portrait mode) */
@media only screen and (max-width: 280px) {
	.manage-appointments-row-content {
		width: 86%;
	}

	.manage-appointments-row {
		height: 232px;
	}

	.manage-appointments-row .truncate-text-upper-row {
		width: 178px;
	}

	.lower-row-detail-time {
		display: inline-block;
	}

	.modal-dialog {
		min-width: 258px;
		width: inherit;
	}

	.manage-appointments-header .list-group-item {
		padding: 10px 1px 0px 1px;
	}

	.manage-appointments-row .dropdown .dropdown-menu-right {
		margin-right: -66px;
	}

	.popover.date-range-container {
		margin-left: 1px;
	}
}

/**************************************************************************************
END Other Screen Size Styles / Miscellaneous Screen Size Styles
**************************************************************************************/