/**
 * 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;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
/***************************** 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;
}


/* Suppress focus ring on the grid container itself; individual buttons handle focus */
.rw-calendar .rw-calendar-grid {
	outline: none;
}

/* Suppress focus ring on header buttons for mouse/touch interactions only */
.rw-calendar .rw-header button:not(:focus-visible) {
	outline: none;
}

/* WCAG 2.1 §2.4.7 – visible focus indicator for prev/next month arrows */
.rw-calendar .rw-header .rw-btn-left:focus,
.rw-calendar .rw-header .rw-btn-left:focus-visible,
.rw-calendar .rw-header .rw-btn-right:focus,
.rw-calendar .rw-header .rw-btn-right:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px #005fcc;
	border-radius: 2px;
	position: relative;
	z-index: 2;
}

.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;
}

/* Allow focus rings on buttons to extend beyond the table cell boundary */
.rw-calendar-grid td {
	overflow: visible;
}

/* WCAG 2.1 §2.4.7 – visible focus indicator for date cells during keyboard navigation.
   Uses box-shadow instead of outline so the ring follows the button's border-radius
   and cannot be clipped by a parent overflow or stacking context. z-index raises the
   focused button above its siblings so the ring is never hidden by an adjacent cell. */
.rw-calendar-grid td .rw-btn:focus,
.rw-calendar-grid td .rw-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px #424242;
	position: relative;
	z-index: 2;
}

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

/* Unavailable dates – visually greyed, not-allowed cursor, no hover highlight */
.rw-calendar-grid td .rw-btn[aria-disabled="true"] {
	background-color: #DBDBDB;
	cursor: not-allowed;
}

.rw-calendar-grid td .rw-btn[aria-disabled="true"]:hover {
	background-color: #DBDBDB;
	cursor: not-allowed;
}

/* Focus on an unavailable date: distinct shadow so the user knows
   they can see it but cannot select it */
.rw-calendar-grid td .rw-btn[aria-disabled="true"]:focus,
.rw-calendar-grid td .rw-btn[aria-disabled="true"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px #666666;
	position: relative;
	z-index: 2;
}

.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;
}

.paymentSummaryDetails div {
	font-size: 14px !important;
	text-align: left !important;
	color: #000 !important;
	font-weight: 400 !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;
}
.contrast-font-color{
	color: #333333;
}
button.btn-override {
	border:none !important;
	background: none !important;
	color: #212121;
	font-size: 14px !important;
	text-decoration: underline;
}
button.btn-override:hover, button.btn-override:focus {
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
	background: none !important;
	color: #66AFE9 !important;
	font-size: 14px !important;
	text-decoration: underline;
}
		/**************************************************************************************
        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;
	}

	/* Force normal block flow for the print modal when printing natively
	   (e.g. right-click > Print). The on-screen modal uses display:inline-block with
	   vertical-align:middle for centering, but inline-block ignores internal page breaks
	   (page-break-after) and cannot paginate tall content across pages, which produced
	   blank pages and prevented the Spanish letter from starting on its own page. */
	.appointment-print,
	.appointment-print .modal-dialog,
	.appointment-print .modal-content {
		display: block;
		vertical-align: top;
	}

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

	/* Disable the vertical-centering spacer for the print modal so it does not add
	   blank pages before the appointment content during a native page print. */
	.appointment-print:before {
		display: none;
		content: none;
	}

	/* Remove the modal's body/content padding when printing natively so the bottom
	   padding does not overflow the last page and produce a trailing blank page. */
	.appointment-print .modal-content {
		padding: 0;
	}

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

	/* Reset the inherited Bootstrap body line-height (1.428) to the browser default so
	   the printed letter has the same tight line spacing as the Print link / Ctrl+P
	   output (which renders in a bare window with no app stylesheet). */
	.appointment-print .modal-body,
	.appointment-print .modal-body p {
		line-height: normal;
	}

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

	/* When the appointment print modal is open and the page is printed natively
	   (right-click > Print), print ONLY the modal's content. Everything else is hidden
	   with visibility so it leaves no ink, and the wrapper chain spacing is collapsed so
	   the letter starts at the top of the page - mirroring the Print link / Ctrl+P output.
	   The modal stays in normal flow (NOT absolutely positioned) so multi-page letters
	   paginate correctly instead of being clipped to a single page. */
	body.modal-open * {
		visibility: hidden;
	}

	body.modal-open .appointment-print.in,
	body.modal-open .appointment-print.in * {
		visibility: visible;
	}

	body.modal-open {
		padding-right: 0 !important;
		margin: 0 !important;
	}

	/* Match the clean Ctrl+P window's content column exactly. There the letter renders in
	   a bare <body> (8px default margin) plus the template's own 18px padding = 26px inset
	   per side. Since the native-print wrappers are all zeroed above, give the letter the
	   same 26px horizontal inset so the left/right edges and line wrapping line up. */
	body.modal-open .appointment-print.in #customPrintContent > div {
		/* Reduce the side padding so the text column is wider and spreads across more of
		   the page on both sides (right-click print only). */
		padding-left: 10px !important;
		padding-right: 16px !important;
		/* Small even shift so the wider column stays balanced and does not clip on the right. */
		position: relative;
		left: -8px;
		top: 0;
	}

	/* Shift only the top-right letterhead (HUMAN SERVICES + address) ~3 characters right
	   and one line down. Right-click print only - Ctrl+P / Print button render in a bare
	   window with no app stylesheet, so they are unaffected. */
	body.modal-open .appointment-print.in #customPrintContent .print-letterhead-right {
		position: relative;
		left: 18px;
		top: 18px;
	}

	/* Collapse the margins/padding/positioning of every wrapper between the page and the
	   modal so the in-flow letter content begins at the very top of the page. */
	body.modal-open .container,
	body.modal-open .content-container,
	body.modal-open #account-profile-container,
	body.modal-open .col-sm-9,
	body.modal-open .nav-tabs-wrapper,
	body.modal-open .tab-pane,
	body.modal-open .appointment-container-row,
	body.modal-open #page-content,
	body.modal-open .main-content-container {
		position: static !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.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
**************************************************************************************/