/* @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; */
/* @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; */
/* @import '../node_modules/@syncfusion/ej2-calendars/styles/material.css'; */
/* @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; */
/* @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; */
/* @import '../node_modules/@syncfusion/ej2-lists/styles/material.css'; */
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-schedule/styles/material.css';
/* @import "../node_modules/primeng/resources/themes/lara-light-blue/theme.css"; */
/* @import "../node_modules/primeng/resources/primeng.css"; */
@import "../node_modules/@ng-select/ng-select/themes/default.theme.css";

/*
	Theme Name: Master Theme
	Theme URI: https://forty8creates.com
	Description: A starter theme based on HTML5 Blank
	Version: 1.0.0
	Author: Forty8Creates
	Author URI: https://forty8creates.com
	Tags: Blank, HTML5, CSS3

	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/


/*------------------------------------*\
    CONTENTS
/*------------------------------------*\
    - Normalize
	- Angular Specifics
	- Mobile Overrides
    - Webfonts
	- Variables
    - SVG
    - Flexbox
    - Main/fonts
	- Calendar
    - Structure
	- Lottie
	- Line Clamp
	- Badges/Flags
    - Ratios
    - Pages
    - Buttons/Links
    - Lists
    - Forms/Inputs
	- Dash Layouts
	- Tabs
	- Details
	- Tables
	- Select2
	- Alert Cards & Toasts
	- Modals
    - Grid (the col grid system)
	- Primary Nav
	- Toolbar
	- Notifications
    - Misc
	- iOS Safari Fixes
	- Test
\*------------------------------------*/

#changedatetime-group,
#changebooking-group {
    display: none;
}


/*------------------------------------*\
    Normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css
\*------------------------------------*/

button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}abbr[title]{border-bottom:none;text-decoration:underline dotted}b,strong{font-weight:bold}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;appearance:button;}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}


/*------------------------------------*\
    ANGULAR SPECIFICS
\*------------------------------------*/

/* The body has a display of flex and main is set to flex 1, however Angular adds a <app-root> element between body and main rendering main's css redundant */

body app-root {
  flex: 1;
}

.date-container.angular-fix:before,
.time-container.angular-fix:before,
.select-container.angular-fix:before {
	margin-top: unset;
	top: 15.5px;
	transform: unset!important;
}

.time-container.angular-fix .ng-value-container,
.select-container.angular-fix .ng-value-container {
	align-self: flex-end;
	padding-bottom: 5.5px;
}

.time-container.angular-fix .ng-value-container ~ span,
.select-container.angular-fix .ng-value-container ~ span {
	display: none;
}

@media only screen and (max-width: 418px) {
	
	.time-container.angular-fix .ng-value-container {
		padding-bottom: 6px;
	}

}


/*------------------------------------*\
    MOBILE OVERRIDES
\*------------------------------------*/

section.panel-main {
	touch-action: pan-y;
}

/*------------------------------------*\
    VARIABLES
\*------------------------------------*/

/* Use the Google Webfonts Helper - https://gwfh.mranftl.com/fonts */
/* dm-sans-regular - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/dm-sans-v13-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-sans-500 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 500;
	src: url('fonts/dm-sans-v13-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* dm-sans-700 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 700;
	src: url('fonts/dm-sans-v13-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* DON'T FORGET TO PRELOAD THESE fonts IN YOUR HEADER.PHP */


/*------------------------------------*\
    VARIABLES
\*------------------------------------*/

:root {
  --primary: #EF3957;
  --primary-light: #FF6F87;
  --primary-pastel: #FEE8EC;
  --secondary: #00A686;
  --secondary-light: #49BDA6;
  --secondary-pastel: #E8FFFA;
  --active: #00DB00;
  --error: #FF1800;
  --error-light: #FF6D74;
  --error-pastel: #fff2f4;
  --success: #00C743;
  --success-dark: #0a4c20;
  --success-pastel: #e4fded;
  --alert: #EE990B;
  --alert-pastel: #fff0d9;
  --notice: #007AFF;
  --notice-mid: #2d93ff;
  --notice-light: #010101;
  --notice-pastel: #E2EFFC;
  --notice-pastel-hover: #D7E7F7;
  --text: #6C7179;
  --text-dark: #2A323D;
  --button-light: #3c4857;
  --text-light: #B7BEC8;
  --bg-dark: #424C5C;
  --bg-light: #F2F4F8;
  --nav-border: #D4DBEA;
}


/*------------------------------------*\
    SVG
\*------------------------------------*/

.svgbg,
button:before,
.primary-nav .lottie-icon,
button.btn.send-message:before,
.e-schedule .e-schedule-toolbar .e-hor-nav:before {
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-position: center center;
	-webkit-mask-position: center center;
}

/*------------------------------------*\
    FLEXBOX
\*------------------------------------*/

.flex {
	display: flex;
}

.align-center {
	align-items: center;
}

.align-start {
	align-items: flex-start;
}

.align-self-center {
	align-self: center;
}

.align-self-start {
	align-self: flex-start;
}

.align-self-end {
	align-self: flex-end;
}

.justify-center {
	justify-content: center;
}

.justify-end {
	justify-content: flex-end;
}

.wrap {
	flex-wrap: wrap;
}

.space-between {
	justify-content: space-between;
}

.column {
	flex-direction: column;
}

.row {
	flex-direction: row;
}

.gap-2 {
	gap: 2px;
}

.gap-5 {
	gap: 5px;
}

.gap-10 {
	gap: 10px;
}

.gap-15 {
	gap: 15px;
}

.left-auto {
	margin-left: auto;
}

.no-wrap {
	flex-wrap: nowrap!important;
}

/*------------------------------------*\
    MAIN/fonts
\*------------------------------------*/

.mobile-only {
	display: none;
}

*,
*:after,
*:before {
	box-sizing:border-box;
}

/* disallow address bar to shrink - this is a potential fix for scrolling issues on iOS when fixed bottom nav moves */

/* html {
	overflow: hidden;
	overscroll-behavior: none;
	height: -webkit-fill-available;
	min-height: 100%;
}

main {
	padding: 80px 2em 2em;
	flex: 1;
    margin-left: 250px;
	height: 100vh;
	overflow-y: scroll;
	position: fixed;
} */

/* Allow address bar to shrink */

html {
	/* height: -webkit-fill-available; */
	min-height: 100%;
}

main {
	padding: calc(80px + 2em) 2em 2em;
	flex: 1;
    margin-left: 250px;
	overflow: auto;
}

#calendar-main {
	padding-top: 81px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}

html.modal-open {
	overflow: hidden;
    width: 100%;
    height: 100%;
	touch-action: none!important;
	overscroll-behavior: none;
	height: -webkit-fill-available;
	overscroll-behavior-x: none;
}

body {
	font: 400 16px/1.6 'DM Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	color: var(--text);
	margin: 0;
	overflow-x: hidden;
	font-display: swap; /* This is important for performance */ 
	position: relative;
	left: 0;
	display: flex;
    flex-direction: row;
    /* height: 100%; */
    min-height: 100vh;
	background-color: var(--bg-light);
	overscroll-behavior-x: none;
}

img {
	width: 100%;
	border-style: none;
	display: block;
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-head span {
	font-weight: 700;
	/* margin: .67em auto; */
	margin: 0;
	line-height: 1.2;
	position: relative;
	color: var(--text-dark);
}

h1 {
	font-size: 1.75em;
}

h1.large {
	font-size: 2.5em;
}

h2 {
	font-size: 1.5em;
}

h3,
.section-head span,
.section-option.checkbox label {
	font-size: 1.17em;
}

h3 {
	line-height: 1.6;
}

h4 {
	font-size: 1em;
}

h4.form-cell-title {
	margin-bottom: 8px;
}

h5 {
	font-size: .83em;
}

h6 {
	font-size: .67em;
}

.x-small {
	font-size: 12px;
}

.small {
	font-size: 0.875em;
}

address {
	font-style: normal;
	line-height: 2;
	margin-bottom: 1em;
}

.there-are-more {
	font-weight: 500;
	color: var(--text);
}

table .there-are-more {
	margin-left: 10px;
}

.dark {
	color: var(--text-dark);
}

.default {
	color: var(--text);
}

.lh-small {
	line-height: 1.2;
}

.lh-medium {
	line-height: 1.6;
}

@media only screen and (max-width: 666px) {
	body {
		font-size: 18px;
	}

	h3,
	.section-head span,
	.form-cell-wrapper.checkbox.toggle label:not(.x-small) {
		font-size: 1.1em;
	}
}


/*------------------------------------*\
    CALENDAR
\*------------------------------------*/

.e-toolbar-item.e-today,
.e-toolbar-item.e-separator,
.e-schedule .e-schedule-toolbar .e-toolbar-items .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-icon-right.e-btn-icon.e-icon-down-arrow,
.e-schedule-table tr:first-child td.e-time-slots span {
	display: none;
}

.e-active-view {
	pointer-events: none;
}

.e-schedule {
	height: calc(100vh - 112px)!important;
	height: calc(100vh - 81px)!important;
	/* height: calc(100vh - 144.41px)!important; */
	/* border: 1px solid var(--nav-border);
	border-width: 0 0 1px 0;
	border-radius: 0 0 8px 0; */
	border: none;
	background: transparent;
	display: flex;
    flex-direction: column;
	/* gap: 24px; */
}

.e-schedule-table.e-outer-table {
	overflow: hidden;
	height: 100%;
}

/* toolbar */

.e-schedule-toolbar-container {
	background: var(--bg-light);
	padding-left: 32px;
}

.e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-right, 
.e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-left {
	position: static;
}

.e-toolbar .e-toolbar-items {
	background: var(--bg-light);
}

.e-schedule .e-schedule-toolbar {
	box-shadow: none;
	margin-bottom: 0;
	min-height: unset;
	display: flex;
	gap: 5px;
	background: var(--bg-light);
}

.e-schedule .e-schedule-toolbar .e-tbar-btn .e-tbar-btn-text {
	text-transform: unset;
	font-size: 1em;
	padding: 0;
}

.e-schedule .e-schedule-toolbar .e-toolbar-items.e-tbar-pos,
.e-schedule.e-device .e-schedule-toolbar .e-toolbar-items.e-tbar-pos,
.e-schedule.e-device .e-schedule-toolbar {
	height: 42px;
	min-height: 42px;
}

.e-schedule .e-schedule-toolbar .e-toolbar-items.e-tbar-pos > div,
.e-schedule.e-device .e-schedule-toolbar .e-toolbar-items.e-tbar-pos > div {
	height: 34px;
}

.e-schedule .e-schedule-toolbar .e-toolbar-items.e-tbar-pos {
	height: auto;
	display: flex;
	flex: 1;
	margin: 5px 0;
}

.e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-right {
	background: #fff;
	border-radius: 100px;
	display: flex;
	padding: 4px;
	width: 42px;
}

.e-toolbar .e-hor-nav {
	position: static;
}

.e-toolbar .e-toolbar-item {
	min-height: unset;
}

.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item.e-date-range .e-tbar-btn .e-tbar-btn-text {
	font-size: 1.339em;
}

.e-toolbar-item.e-date-range {
	margin-left: 5px;
}

.e-schedule .e-schedule-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-right,
.e-schedule:is(.e-device, .e-keyboard) .e-schedule-toolbar .e-hor-nav {
	display: none!important;
}

/* toolbar buttons */

.e-toolbar .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child, 
.e-toolbar .e-toolbar-items:not(.e-tbar-pos):not(.e-toolbar-multirow) .e-toolbar-item:first-child {
	margin-left: 0;
}

.e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child, 
.e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child {
	margin-right: 0;
}

.e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
	color: var(--text-dark);
}

.e-toolbar .e-toolbar-item .e-tbar-btn {
	margin: 0;
	background: transparent;
	color: var(--text-dark);
	font-weight: 600;
}

.e-schedule:is(.e-device, .e-keyboard) .e-schedule-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-right .e-toolbar-item .e-tbar-btn {
	border-radius: 100px;
	padding: 3px 9px;
}

.e-schedule:is(.e-device, .e-keyboard) .e-schedule-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-right .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
	color: var(--text);
}
.e-schedule:is(.e-device, .e-keyboard) .e-schedule-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-right .e-toolbar-item .e-tbar-btn .e-tbar-btn-text:is(:hover,:active),
.e-schedule:is(.e-device, .e-keyboard) .e-schedule-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-right .e-toolbar-item.e-active-view .e-tbar-btn .e-tbar-btn-text {
	color: var(--text-dark);
}

.e-schedule:is(.e-device, .e-keyboard) .e-schedule-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-right .e-toolbar-item.e-active-view .e-tbar-btn {
	background: var(--bg-light);
}

.e-toolbar .e-toolbar-item .e-tbar-btn:is(:hover,:active,:focus) {
    background: unset;
    border-color: unset;
    border-style: solid;
    border-width: 0;
    border-radius: unset;
    box-shadow: none;
    color: unset;
}

.e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer),
.e-toolbar .e-toolbar-item .e-tbar-btn,
.e-toolbar .e-toolbar-item .e-tbar-btn:hover, 
.e-toolbar .e-toolbar-item .e-tbar-btn:focus, 
.e-toolbar .e-toolbar-item .e-tbar-btn:active {
	min-width: unset;
	padding: unset;
}

.e-schedule:is(.e-device, .e-keyboard) .e-schedule-toolbar .e-toolbar-items .e-toolbar-left .e-tbar-btn.e-icon-btn:focus {
	border-radius: 5px;
	background-color: transparent;
}

.e-schedule:is(.e-device, .e-keyboard) .e-schedule-toolbar .e-hor-nav {
	display: inline-block;
    color: var(--text-dark);
    background-color: transparent;
    padding: calc(0.75em - 2px);
    border: 2px solid transparent;
    border-radius: 5px;
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 500;
    position: relative;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
	text-indent: -999em;
    width: 42px;
    height: 42px;
}

.e-schedule .e-schedule-toolbar .e-hor-nav:is(:hover,:active,:hover:active) {
	display: none!important;
}

.e-schedule .e-schedule-toolbar .e-hor-nav:is(:hover,:active,:hover:active),
.e-toolbar.e-toolpop .e-hor-nav.e-nav-active, .e-toolbar.e-toolpop .e-hor-nav.e-nav-active:not(.e-expended-nav),
.e-toolbar.e-toolpop .e-hor-nav.e-nav-active:focus, .e-toolbar.e-toolpop .e-hor-nav.e-nav-active:not(.e-expended-nav):focus {
	background-color: rgba(0, 0, 0, 0.05);
	border: 2px solid transparent;
	border-radius: 5px;
}

.e-schedule:is(.e-device, .e-keyboard) .e-schedule-toolbar .e-hor-nav:active {
	transform: scale(0.95);
}

.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
	display: none;
}

.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn {
	font-size: 1em;
	display: flex!important;
	justify-content: center;
	height: 42.4px;
}

.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text {
	font-size: 100%;
	display: block;
	line-height: 1.15;
}

.e-active-view {
	height: 42.4px;
	border-radius: 5px;
	border: 2px solid var(--notice);
}

.e-toolbar .e-toolbar-pop .e-toolbar-item:not(.e-separator) {
	height: unset;
}

.action-nest.calendar-views {
	position: absolute;
    z-index: 3;
    right: 15px;
	margin-top: 5px;
}

/* cells */

.e-schedule .e-vertical-view .e-timeline-wrapper, 
.e-schedule .e-vertical-view .e-day-wrapper, 
.e-schedule .e-vertical-view .e-all-day-appointment-wrapper {
	background: #fff;
    border-left: 1px solid var(--nav-border);
}

.e-schedule .e-vertical-view .e-work-cells {
	background: #fff;
}

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-time-cells-wrap .e-time-cells {
	border-bottom-color: rgba(0, 0, 0, 0);
}

.e-schedule:is(.e-device, .e-keyboard) .e-hide-childs > * {
	display: block;
}

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view.e-by-date .e-date-header-wrap table tbody td.e-header-cells {
	cursor: pointer;
	position: relative;
	overflow: visible;
}

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view.e-by-date .e-date-header-wrap table tbody td.e-header-cells:after {
	content: '';
	width: 1px;
	height: 108px;
	background: var(--nav-border);
	position: absolute;
	top: 0;
	right: 0;
}

.e-schedule.e-device .e-month-view .e-date-header-wrap td {
	border-left-width: 1px!important;
}

.e-schedule:is(.e-device, .e-keyboard) .e-month-view .e-date-header-wrap table td.e-current-day, 
.e-schedule:is(.e-device, .e-keyboard) .e-month-agenda-view .e-date-header-wrap table td.e-current-day,
.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-header-cells.e-current-day {
	background: var(--notice-pastel);
}

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-time-cells-wrap table td, 
.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-work-cells {
	height: 20px;
	padding: 0!important;
}

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-alternate-cells {
	border-bottom-color: #eaf1ff!important;
}

.e-left-indent + td {
	border: 1px solid var(--nav-border);
	border-right: none;
	border-bottom: none;
	border-radius: 8px 0 0 0;
}

.e-table-wrap.e-month-view {
	border: 1px solid var(--nav-border);
	border-right: none;
	border-left: none;
}

.e-table-wrap.e-month-view .e-content-wrap {
	border-left: none;
}

.e-content-wrap {
	border: 1px solid var(--nav-border);
	border-top: none;
	border-right: none;
	border-bottom: none;
}



.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-work-cells:is(:hover,:focus),
.e-schedule:is(.e-device, .e-keyboard) .e-month-view .e-work-cells:is(:hover,:focus), 
.e-schedule:is(.e-device, .e-keyboard) .e-month-agenda-view .e-work-cells:is(:hover,:focus),
.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-selected-cell,
.e-schedule:is(.e-device, .e-keyboard) .e-month-view .e-selected-cell, 
.e-schedule:is(.e-device, .e-keyboard) .e-month-agenda-view .e-selected-cell {
	background: #fafafa;
	outline: none;
}

.e-schedule:is(.e-device, .e-keyboard).e-vertical-view .e-time-cells-wrap table td, 
.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-work-cells {
	padding: 0;
}

.e-schedule:is(.e-device, .e-keyboard).e-vertical-view .e-work-cells:not(.e-work-hours),
.e-schedule:is(.e-device, .e-keyboard) .e-month-view .e-work-cells:not(.e-work-days) {
	background: #fff;
}

.e-schedule:is(.e-device, .e-keyboard) .e-month-view .e-work-cells {
	overflow: hidden;
	position: relative;
}

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-time-cells-wrap table td {
	font-size: 0.75em;
	font-weight: 600;
	color: var(--text-dark);
	text-align: right;
}

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-left-indent-wrap table tbody td,
.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-time-cells-wrap table td {
	background-color: var(--bg-light);
	position: relative;
	overflow: visible;
	border-color: transparent;
}

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-time-cells-wrap table td span {
	position: absolute;
    top: -9.6px;
	background: var(--bg-light);
	/* left: 50%;
    transform: translateX(-50%); */
	left: 0;
	width: 32px;
	text-align: center;
}

.e-schedule .e-vertical-view .e-left-indent,
.e-schedule.e-device .e-vertical-view .e-left-indent,
.e-schedule.e-device .e-vertical-view .e-time-cells-wrap {
	width: 32px;
	position: relative;
	overflow: visible;
}

.e-schedule .e-vertical-view .e-left-indent:after,
.e-schedule.e-device .e-vertical-view .e-left-indent:after {
	content: '';
	width: 32px;
	height: 35px;
	background: linear-gradient(to bottom,  rgba(242,244,248,1) 0%,rgba(242,244,248,0) 100%);
	position: absolute;
	bottom: -35px;
	right: 0;
	z-index: 1;
}

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-left-indent .e-all-day-cells {
	background: var(--bg-light);
}

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-header-cells .e-header-date:hover {
	text-decoration: none;
}

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-header-cells .e-header-day,
.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-header-cells .e-header-date,
.e-schedule:is(.e-device, .e-keyboard) .e-month-view .e-date-header-wrap table td span {
	display: inline-block;
	font-size: 1.2em;
	margin: 2px;
	font-weight: 500;
	color: var(--text-dark);
}

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-header-cells.e-current-day .e-header-day,
.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-header-cells.e-current-day .e-header-date,
.e-schedule:is(.e-device, .e-keyboard) .e-month-view .e-date-header-wrap table td.e-current-day span, 
.e-schedule:is(.e-device, .e-keyboard) .e-month-agenda-view .e-date-header-wrap table td.e-current-day span {
	font-weight: 600;
	color: var(--notice);
}

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-date-header-wrap table tbody td,
.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-work-cells {
	border-color: var(--nav-border);
}

/* .e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-date-header-wrap table tbody .e-header-row:nth-child(2) td {
	border-bottom: 1px solid var(--notice)!important;
	position: relative;
	overflow: visible;
}

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-date-header-wrap table tbody .e-header-row:nth-child(2) td:after {
	content: '';
	width: 1px;
	height: 1px;
	background: var(--notice);
	position: absolute;
	bottom: -1px;
	left: -1px;
} */

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view tr.e-all-day-row td {
	border: 1.5px solid var(--notice)!important;
}

ejs-schedule.spanish:not(.no-swipe) .e-schedule-toolbar:after {
    content: "\003C  Deslizar \003E";
}

ejs-schedule:not(.no-swipe) .e-schedule-toolbar:after {
    content: "\003C  swipe \003E";
    font-size: 0.65em;
    font-weight: 700;
    background: var(--notice);
    color: #fff;
    padding: 3px 6px 4px;
    border-radius: 100px;
    position: absolute;
    left: 12px;
    top: 153.5px;
	z-index: 3;
	line-height: 1.3;
    height: 20.5px;
}

@media only screen and (max-width: 666px) {

	ejs-schedule:not(.no-swipe) .e-schedule-toolbar:after {
		left: 44px;
		top: 143px;
		height: 22px;
	}

}

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-work-cells:has(+ .e-work-cells[data-group-index="0"]) {
	border-right: 1px solid var(--nav-border);
}

.e-schedule .e-vertical-view .e-resource-cells {
	padding-left: 8px;
}

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-date-header-wrap table tbody td.e-header-cells {
	text-align: center;
}

.e-schedule:is(.e-device, .e-keyboard) .e-month-view .e-date-header-wrap table td {
	text-align: center;
}

.e-schedule:is(.e-device, .e-keyboard) .e-month-view .e-work-cells, 
.e-schedule:is(.e-device, .e-keyboard) .e-month-agenda-view .e-work-cells {
	color: var(--text-dark);
}

.e-schedule:is(.e-device, .e-keyboard) .e-month-view .e-date-header {
	font-weight: 500;
	z-index: 2;
	position: relative;
}

.e-schedule:is(.e-device, .e-keyboard) .e-month-view .e-other-month .e-date-header {
	opacity: 0.3;
}

.e-schedule:is(.e-device, .e-keyboard) .e-month-view .e-current-date .e-date-header, 
.e-schedule:is(.e-device, .e-keyboard) .e-month-agenda-view .e-current-date .e-date-header {
	background: var(--notice);
	font-weight: 700;
	border-radius: 4px;
}

/* appointment cards */

.e-schedule .e-vertical-view .e-day-wrapper .e-appointment .e-appointment-details,
.e-schedule .e-agenda-view .e-appointment {
	padding: 0;
}

.e-schedule .e-vertical-view .e-day-wrapper .e-appointment .e-appointment-details #appointment-renderer,
.e-schedule .e-agenda-view .e-appointment #appointment-renderer {
	padding: 0 4px;
	overflow: hidden;
}

#appointment-renderer {
	width: 100%;
}

.e-schedule:is(.e-device, .e-keyboard) .e-month-view .e-appointment #appointment-renderer {
	padding: 3px 4px;
}

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-day-wrapper .e-appointment .e-up-icon,
.e-schedule .e-vertical-view .e-day-wrapper .e-appointment .e-down-icon {
	display: none;
}

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-day-wrapper .e-appointment,
.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-all-day-appointment-wrapper .e-appointment,
.e-schedule:is(.e-device, .e-keyboard) .e-month-view .e-appointment,
.e-bigger .e-more-popup-wrapper .e-appointment, 
.e-more-popup-wrapper .e-appointment,
.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-agenda-item .e-appointment {
	border: none;
	border-radius: 3px;
	box-shadow: 0px 0px 0px 1px #fff;
	background: #d3caf5;
	overflow-y: scroll;
	color: var(--text-dark);
}

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-day-wrapper .e-appointment .e-subject {
	font-weight: 700;
}

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-day-wrapper .e-appointment .e-time {
	font-weight: 500;
	opacity: 0.6;
}

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-day-wrapper .e-appointment:not(:has(.e-appointment-details :is(.closed, .not-available))) {
	z-index: 2;
	display: flex;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-day-wrapper .e-appointment:not(:has(.e-appointment-details :is(.closed, .not-available)))::-webkit-scrollbar {
	display: none;
}

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-day-wrapper .e-appointment:not(:has(.e-appointment-details :is(.closed, .not-available))) .e-appointment-details {
	display: flex;
}

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-day-wrapper .e-appointment:hover:not(:has(.e-appointment-details :is(.closed,.not-available,.holiday))) {
	height: auto!important;
	width: 100%!important;
	z-index: 4;
	left: 0!important;
}

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-day-wrapper .e-appointment:has(.e-appointment-details :is(.closed,.not-available,.holiday)),
.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-day-wrapper .e-appointment:focus:has(.e-appointment-details :is(.closed,.not-available,.holiday)),
.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-day-wrapper .e-appointment.e-appointment-border:has(.e-appointment-details :is(.closed,.not-available,.holiday)) {
	box-shadow: none;
}

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-day-wrapper .e-appointment.e-appointment-border:has(.e-appointment-details :not(.closed,.not-available,.holiday)), 
.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-day-wrapper .e-appointment:not(.closed,.not-available,.holiday):focus {
	border: none;
	border-color: inherit;
	/* box-shadow: inset 0px 0px 0px 3px #d3caf5, 0px 0px 0px 1px #fff; */
}

.e-schedule:is(.e-device, .e-keyboard) :is(.e-vertical-view, .e-month-view) .e-appointment:not(:has(.e-appointment-details :is(.closed,.not-available,.holiday))),
.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-agenda-item .e-appointment:not(:has(:is(.closed,.not-available,.holiday))) {
	cursor: pointer;
}

/* CLOSED */

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-day-wrapper .e-appointment:has(.e-appointment-details :is(.closed,.not-available,.holiday)) {
	text-indent: -999em;
	width: 100%!important;
	left: 0!important;
	border: none;
	z-index: 1;
	opacity: 0.2;
	border-radius: 0;
	background-color: #ffffff;
	background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-day-wrapper .e-appointment:has(.e-appointment-details .closed) {
	z-index: 1;
}

.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-agenda-item :has(.closed) {
	background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
	opacity: 0.2;
	text-indent: -999em;
	box-shadow: none;
	background-color: #fff;
}

/* NOT AVAILABLE */

.e-schedule:is(.e-device, .e-keyboard) :is(.e-vertical-view, .e-month-view) .e-appointment:has(.e-appointment-details .not-available) {
	opacity: 0.1!important;
	background-color: #000000!important;
	background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E")!important;
}

.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-agenda-item :has(.not-available) {
	opacity: 0.1!important;
	background-color: #000000!important;
	background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E")!important;
	text-indent: -999em;
	box-shadow: none;
}

/*  BREAKS */

.e-schedule:is(.e-device, .e-keyboard) :is(.e-vertical-view, .e-month-view) .e-appointment:has(.e-appointment-details .break),
.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-agenda-item :has(.break) {
	background-color: var(--nav-border);
	box-shadow: inset 0px 0px 0px 3px var(--nav-border), 0px 0px 0px 1px #fafafa;
	color: var(--text-dark)!important;
}

.e-schedule:is(.e-device, .e-keyboard) :is(.e-vertical-view, .e-month-view) .e-appointment:has(.e-appointment-details .break) h5,
.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-agenda-item :has(.break) h5 {
	color: var(--text-dark);
	line-height: 1.55;
}

/* PENDING */

.e-schedule:is(.e-device, .e-keyboard) :is(.e-vertical-view, .e-month-view) .e-appointment:has(.e-appointment-details :is(.pending, .pending-deposit, .rescheduled)),
.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-agenda-item .e-appointment:has(.pending, .pending-deposit, .rescheduled) {
	background-color: #fff!important;
	color: var(--text-dark)!important;
}

.e-schedule:is(.e-device, .e-keyboard) :is(.e-vertical-view, .e-month-view) #appointment-renderer:is(.pending, .pending-deposit, .rescheduled),
.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-agenda-item #appointment-renderer:is(.pending, .pending-deposit, .rescheduled) {
	background-color: transparent!important;
	color: var(--text-dark)!important;
	background-image: none!important;
}

.e-schedule:is(.e-device, .e-keyboard) :is(.e-vertical-view, .e-month-view) .e-appointment:has(.e-appointment-details :is(.pending, .pending-deposit, .rescheduled)) #booking-data-card .appointment-card-status,
.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-agenda-item .e-appointment:has(:is(.pending, .pending-deposit, .rescheduled)) #booking-data-card .appointment-card-status {
	background-color: var(--alert);
	color: #fff;
}

/* REQUEST */

.e-schedule:is(.e-device, .e-keyboard) :is(.e-vertical-view, .e-month-view) .e-appointment:has(.e-appointment-details .requested),
.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-agenda-item .e-appointment:has(.requested) {
	background-color: #fff;
	color: var(--text-dark);
	background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='rgb(211,%20202,%20245)' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

.e-schedule:is(.e-device, .e-keyboard) :is(.e-vertical-view, .e-month-view) #appointment-renderer:is(.requested),
.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-agenda-item #appointment-renderer:is(.requested) {
	background-color: transparent!important;
	color: var(--text-dark)!important;
}

.e-schedule:is(.e-device, .e-keyboard) :is(.e-vertical-view, .e-month-view) .e-appointment:has(.e-appointment-details .requested) #booking-data-card .appointment-card-status,
.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-agenda-item .e-appointment:has(.requested) #booking-data-card .appointment-card-status {
	background-color: var(--alert);
	color: #fff;
}

/* NO SHOW */

.e-schedule:is(.e-device, .e-keyboard) :is(.e-vertical-view, .e-month-view) .e-appointment:has(.e-appointment-details .no-show),
.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-agenda-item .e-appointment:has(.no-show) {
	color: var(--text-dark);
	background-color: #ffffff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23d3caf5' fill-opacity='0.5'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
}

.e-schedule:is(.e-device, .e-keyboard) :is(.e-vertical-view, .e-month-view) #appointment-renderer:is(.no-show),
.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-agenda-item #appointment-renderer:is(.no-show) {
	color: var(--text-dark)!important;
	background-color: #ffffff!important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23d4dbea' fill-opacity='0.5'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E")!important;
}

.e-schedule:is(.e-device, .e-keyboard) :is(.e-vertical-view, .e-month-view) .e-appointment:has(.e-appointment-details .no-show) #booking-data-card .appointment-card-status,
.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-agenda-item .e-appointment:has(.no-show) #booking-data-card .appointment-card-status {
	background-color: var(--primary);
	color: #fff;
}

/* COMPLETED */

.e-schedule:is(.e-device, .e-keyboard) :is(.e-vertical-view, .e-month-view) .e-appointment:has(.e-appointment-details .completed),
.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-agenda-item .e-appointment:has(.completed) {
	background-color: #fff!important;
}

.e-schedule:is(.e-device, .e-keyboard) :is(.e-vertical-view, .e-month-view) #appointment-renderer:is(.completed),
.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-agenda-item #appointment-renderer:is(.completed) {
	opacity: 0.4;
}

/* SALON HOLIDAY */

.e-schedule:is(.e-device, .e-keyboard) .e-vertical-view .e-day-wrapper .e-appointment:has(.e-appointment-details .holiday) {
	background-image: none;
	z-index: 2;
	/* background-color: rgba(0,122,255,0.2); */
	background-color: rgba(238,153,11,0.2);
	background-color: rgba(211,202,245,0.4);
	text-indent: 0;
	opacity: 1;
	width: 93%!important;
}

.e-schedule:is(.e-device, .e-keyboard) .e-month-view .e-appointment:has(.e-appointment-details .holiday) {
	position: absolute;
    top: -25px!important;
    height: 200px;
    border-radius: 0;
    z-index: 1;
	background-color: rgba(211,202,245,0.4);
	text-indent: -999em;
	box-shadow: none;
}

.e-schedule:is(.e-device, .e-keyboard) .e-month-view .e-appointment:not(:has(.e-appointment-details .holiday)) {
	z-index: 2;
}

.e-schedule .e-agenda-view .e-agenda-item :has(.holiday) {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.e-schedule .e-agenda-view .e-agenda-item .e-appointment:has(.holiday) {
	background-color: rgba(211, 202, 245, 0.4);
	box-shadow: none;
}

/* BOOKED BY OWNER */

.e-schedule:is(.e-device, .e-keyboard) :is(.e-vertical-view, .e-month-view) #appointment-renderer:is(.by-owner):before,
.e-schedule:is(.e-device, .e-keyboard) :is(.e-vertical-view, .e-month-view) #appointment-renderer:is(.by-owner):after,
.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-agenda-item #appointment-renderer:is(.by-owner):before,
.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-agenda-item #appointment-renderer:is(.by-owner):after,
.e-schedule:is(.e-device, .e-keyboard) :is(.e-vertical-view, .e-month-view) #appointment-renderer:is(.rescheduled):before,
.e-schedule:is(.e-device, .e-keyboard) :is(.e-vertical-view, .e-month-view) #appointment-renderer:is(.rescheduled):after,
.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-agenda-item #appointment-renderer:is(.rescheduled):before,
.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-agenda-item #appointment-renderer:is(.rescheduled):after {
	content: '';
	width: 19.83px;
	height: 19.83px;
	background-color: inherit;
	position: absolute;
	top: 0;
	right: 0;
	border-radius: 0 3px 0 3px;
	box-shadow: 0px 0px 0px 1px #fff;
}

.e-schedule:is(.e-device, .e-keyboard) :is(.e-vertical-view, .e-month-view) #appointment-renderer:is(.by-owner):after,
.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-agenda-item #appointment-renderer:is(.by-owner):after,
.e-schedule:is(.e-device, .e-keyboard) :is(.e-vertical-view, .e-month-view) #appointment-renderer:is(.rescheduled):after,
.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-agenda-item #appointment-renderer:is(.rescheduled):after {
	background-color: #fff;
	border-radius: 0;
	box-shadow: none;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-size: 15px;
	-webkit-mask-size: 15px;
	mask-position: center center;
	-webkit-mask-position: center center;
	mask-image: url(img/svg/solid/system-solid-187-contacts.svg);
    -webkit-mask-image: url(img/svg/solid/system-solid-187-contacts.svg); 
}

.e-schedule:is(.e-device, .e-keyboard) :is(.e-vertical-view, .e-month-view) #appointment-renderer:is(.rescheduled):after,
.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-agenda-item #appointment-renderer:is(.rescheduled):after {
	mask-image: url(img/svg/solid/system-solid-150-refresh-change.svg);
    -webkit-mask-image: url(img/svg/solid/system-solid-150-refresh-change.svg);
}

.e-schedule:is(.e-device, .e-keyboard) .e-month-view #appointment-renderer:is(.by-owner):before,
.e-schedule:is(.e-device, .e-keyboard) .e-month-view #appointment-renderer:is(.by-owner):after,
.e-schedule:is(.e-device, .e-keyboard) .e-month-view #appointment-renderer:is(.rescheduled):before,
.e-schedule:is(.e-device, .e-keyboard) .e-month-view #appointment-renderer:is(.rescheduled):after {
	width: 22px;
	height: 22px;
}

.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-agenda-item #appointment-renderer:is(.by-owner):before,
.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-agenda-item #appointment-renderer:is(.by-owner):after,
.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-agenda-item #appointment-renderer:is(.rescheduled):before,
.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-agenda-item #appointment-renderer:is(.rescheduled):after {
	top: 14px;
}

app-calendar-holiday-card {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

app-calendar-holiday-card h5 {
	font-size: 80%;
}

app-calendar-holiday-card * {
	color: #925B00;
	color: #4B3699;
	color: var(--text-dark);
	line-height: 1;
}

app-calendar-holiday-card small {
	opacity: 0.6;
}

/* DAY NOTES / ALL DAY EVENTS */

#event-desc:not(:empty) {
	background: var(--text-dark);
    color: #fff;
    border-radius: 3px;
    padding: 3px 5px;
}

.e-schedule:is(.e-device, .e-keyboard) .e-month-view .e-appointment:has(.e-appointment-details .all-day-event) {
	background-color: var(--text-dark);
	box-shadow: inset 0px 0px 0px 3px var(--text-dark), 0px 0px 0px 1px #fafafa;
    color: #fff !important;
}

.e-schedule:is(.e-device, .e-keyboard) .e-month-view .e-appointment:has(.e-appointment-details .all-day-event) h5 {
	line-height: 1.55;
	color: #fff;
}

#event-desc p {
	margin: 0;
}

/* AGENDA VIEW */

.e-schedule .e-agenda-view .e-agenda-parent,
.e-schedule .e-agenda-view .e-agenda-item {
	position: relative;
}

.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-agenda-item .e-appointment {
	width: 100%;
	border: none;
}

.e-schedule .e-agenda-view .e-content-wrap table td:first-child, .e-schedule .e-agenda-view .e-date-column {
	width: 75px!important;
}

.e-schedule .e-agenda-view .e-resource-column {
	width: 20%;
	font-size: 13px;
}

.e-schedule:is(.e-device, .e-keyboard) .e-agenda-view .e-content-wrap {
	border-left: none;
	overflow-x: hidden;
	border-top: 1px solid var(--nav-border);
}

.e-schedule .e-agenda-view .e-day-date-header {
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font-size: 0.9em;
	font-weight: 500;
	line-height: 1.2;
}

.e-schedule .e-agenda-view .e-day-date-header .e-header-day {
		font-size: 0.8em;
	}

	.e-schedule .e-agenda-view .e-day-date-header .e-header-date {
		font-weight: 600;
	}

.e-schedule .e-agenda-view .e-content-wrap table td:first-child {
	border-bottom: 2px solid var(--nav-border);
	position: relative;
	overflow: visible;
}

.e-schedule .e-agenda-view .e-content-wrap table td:first-child:before {
	content: '';
	height: 2px;
	width: 100vw;
	background: var(--nav-border);
	position: absolute;
	bottom: -2px;
	left: 0;
	user-select: none;
}

.e-schedule .e-agenda-view #event-desc:not(:empty) {
	width: 55px;
	cursor: pointer;
}

/* CARD DATA */

#booking-data-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#booking-data-card * {
	line-height: 1.55;
}

#booking-data-card small {
	font-weight: 700;
}

#booking-data-card ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	font-size: 80%;
}

#booking-data-card ul li {
	display: flex;
	flex-direction: column;
}

#booking-data-card ul li div {
	margin-top: 0!important;
	display: flex;
	flex-direction: column;
}

#booking-data-card h5.appointment-title {
	font-size: 80%;
	color: inherit;
}

#booking-data-card .appointment-card-status {
	font-size: 8px;
    -webkit-text-stroke: .2px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 2px 2px 3px;
    border-radius: 3px;
    color: var(--text-dark);
    background-color: #fff;
    display: inline;
    align-self: flex-start;
    margin-bottom: 5px;
	margin-left: 1px;
    letter-spacing: 0.5px;
	cursor: pointer;
	display: flex;
    align-items: center;
    gap: 2px;
}

#booking-data-card img {
	width: 11px;
	height: 11px;
	overflow: hidden;
	display: block;
	position: relative;
	top: -0.5px;
}

#booking-data-card .pet_name {
	font-weight: 700;
	display: flex;
    align-items: center;
    gap: 3px;
}

#booking-data-card .pet_name .name {
	flex: 1;
}

#booking-data-card .pet_details {
	flex: 1;
	opacity: 0.6;
}

#booking-data-card .pet_details ~ span {
	display: block;
	width: 100%;
	opacity: 0.5;
}

/* Date picker */

p-calendar span.p-calendar {
	width: 100%;
}

.p-datepicker,
.e-schedule .e-header-calendar {
	padding: 1em;
    border-radius: 12px;
    box-shadow: rgba(100, 100, 111, .2) 0 7px 29px 0;
	background: #fff;
	width: 371.5px;
	user-select: none;
	z-index: 100!important;
}

.e-week-header {
	text-align: center;
}

.e-header-calendar .e-cell span {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.p-datepicker table:not(.e-schedule-table),
.e-header-calendar table:not(.e-schedule-table) {
	min-width: unset;
}

.p-datepicker tbody,
.e-calendar-content-table,
.p-yearpicker,
.p-monthpicker {
	color: var(--text-dark);
}

:is(.p-datepicker-other-month,.e-other-month) span,
.p-datepicker table .p-disabled {
	color: #bfc1c4;
}

.p-datepicker table .p-disabled,
.p-yearpicker-year.p-disabled,
.p-monthpicker-month.p-disabled {
	cursor: not-allowed;
	color: #bfc1c4;
	pointer-events: none;
}

:is(.e-header-calendar,.p-datepicker) tbody td {
	width: 14.28%;
	position: relative;
	height: 48.5px;
}

.p-yearpicker-year,
.p-monthpicker-month {
	height: 48.5px;
}

:is(.e-header-calendar,.p-datepicker) tbody td span {
	overflow: visible;
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.p-highlight,
.e-cell.e-selected,
.p-monthpicker-month.p-disabled + .p-monthpicker-month:not(.p-disabled),
.p-yearpicker-year.p-disabled + .p-yearpicker-year:not(.p-disabled) {
	font-weight: 700;
	color: #fff;
}

.p-highlight + .p-hidden-accessible {
	display: none;
}

:is(.e-header-calendar,.p-datepicker) tr {
	border: none;
}

:is(td.p-datepicker-today,td.e-today) {
	font-weight: 700;
	color: var(--notice);
}

:is(td.p-datepicker-today,td.e-today) span:after {
	content: '';
	width: 4px;
	height: 4px;
	background: var(--notice);
	border-radius: 100px;
	position: absolute;
	bottom: 9px;
	left: 50%;
	transform: translateX(-50%);
}

:is(td.p-datepicker-today,td.e-today) .p-disabled:after {
	background: #bfc1c4;
}

:is(td.p-datepicker-today,td.e-today) .p-highlight:after,
.e-cell.e-selected span:after {
	background: #fff;
}

.p-datepicker-title,
.e-day.e-title {
	font-size: 1.171em;
	color: var(--text-dark);
	font-weight: 600;
}

.e-day.e-title {
	position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.p-datepicker-title button {
	padding: 0;
	margin: 0;
	border: none;
	outline: none;
	background: transparent;
	font-weight: 600;
	cursor: pointer;
}

.p-datepicker-title button:last-child:not(:only-child) {
	margin-left: 6px;
}

.e-footer-container {
	font-size: 12px;
	display: flex;
	justify-content: center;
	padding-top: 16px;
	border-top: 1px solid var(--bg-light);
}

/* DATE MARKER */

.p-element.p-disabled:before {
	display: none;
}

.p-element:before,
.p-element.p-highlight:before,
.e-cell:before {
	content: '';
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	margin: 1px;
	border-radius: 5px;
	background: var(--bg-light);
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	z-index: -1;
}

.e-cell:before {
	z-index: 0;
}

.p-datepicker tbody td:hover .p-element:before,
.e-cell:hover:before,
.p-yearpicker-year:hover:before,
.p-monthpicker-month:hover:before {
	opacity: 1;
}

.p-element.p-highlight:before,
.e-cell.e-selected:before,
.p-monthpicker-month.p-disabled + .p-monthpicker-month:not(.p-disabled):before,
.p-yearpicker-year.p-disabled + .p-yearpicker-year:not(.p-disabled):before {
	background: var(--notice);
	opacity: 1;
}

.e-schedule .e-month-view .e-more-indicator {
	font-weight: 600;
}

/* Reporting Range */

#reporting-range {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#reporting-range p-calendar span.p-calendar {
	width: auto;
	height: 42px;
}

#reporting-range input {
	margin: 0;
	height: auto;
	font-weight: 600;
	font-size: 1.171em;
	cursor: pointer;
	user-select: none;
	field-sizing: content;
}

/* Team Selector */

#select-calendar,
#select-booking-status {
	margin: 5px 0 0;
	position: absolute;
	z-index: 10;
}

#select-calendar.ng-select.ng-select-multiple .ng-select-container,
#select-booking-status.ng-select.ng-select-single .ng-select-container {
	min-height: 42px;
}

.e-schedule-resource-toolbar-container,
.e-schedule .e-schedule-toolbar .e-icon-next::before,
#select-calendar.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left,
#select-calendar.ng-select.ng-select-multiple .ng-clear-wrapper,
#select-calendar.ng-select.ng-select-multiple .ng-select-container .ng-value-container,
#select-calendar.ng-select.ng-select-multiple .ng-select-container:after,
#select-booking-status.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-value .ng-value-icon.left,
#select-booking-status.ng-select.ng-select-single .ng-clear-wrapper,
#select-booking-status.ng-select.ng-select-single .ng-select-container .ng-value-container,
#select-booking-status.ng-select.ng-select-single .ng-select-container:after {
	display: none;
}

#select-calendar.ng-select .ng-arrow-wrapper,
#select-booking-status.ng-select .ng-arrow-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}

#select-calendar.ng-select .ng-dropdown-panel.ng-select-bottom,
#select-booking-status.ng-select .ng-dropdown-panel.ng-select-bottom {
	padding: 1em;
    border-radius: 12px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    min-width: 200px;
    right: 0;
    background: #fff;
	outline: none;
	border: none;
	text-align: center;
}

#select-calendar .ng-dropdown-panel .ng-dropdown-panel-items .ng-option,
#select-booking-status .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
	padding: calc(0.75em - 2px);
    line-height: 1.15;
	border: 2px solid transparent;
	border-radius: 5px;
}

#select-calendar .ng-dropdown-panel .ng-dropdown-panel-items .ng-option:not(.ng-option-selected):hover,
#select-booking-status .ng-dropdown-panel .ng-dropdown-panel-items .ng-option:not(.ng-option-selected):hover {
	background-color: rgba(0, 0, 0, 0.05);
}

#select-calendar .ng-dropdown-panel .ng-dropdown-panel-items .ng-option span,
#select-booking-status .ng-dropdown-panel .ng-dropdown-panel-items .ng-option span {
	font-weight: 500!important;
}

/* #select-calendar.ng-select .ng-select-container {
	border-radius: 5px;
} */

#select-calendar.ng-select .ng-dropdown-panel.ng-select-bottom,
#select-booking-status .ng-dropdown-panel.ng-select-bottom {
	width: 200px;
	right: 0;
	left: unset;
}

#select-calendar.ng-select .ng-select-container {
	border: none;
	background: transparent url(img/svg/nav/system-regular-96-groups.svg) center center/25px no-repeat;
}

#select-booking-status .ng-select-container {
	border: none;
	background: transparent url(img/svg/line/system-regular-110-filter.svg) center center/25px no-repeat;
}

#select-calendar.ng-select.ng-select-opened .ng-select-container,
#select-calendar.ng-select:hover .ng-select-container,
#select-booking-status.ng-select.ng-select-opened .ng-select-container,
#select-booking-status.ng-select:hover .ng-select-container {
	background-color: rgba(0, 0, 0, 0.05);
	cursor: pointer;
	border-radius: 6px!important;
}

#select-calendar.ng-select:active .ng-select-container,
#select-booking-status.ng-select:active .ng-select-container {
	transform: scale(0.95);
}

#select-calendar {
	width: 42px;
	right: 57px;
}

#select-booking-status {
	width: 42px;
	right: 99px;
} 

/* Current time */

.e-schedule .e-vertical-view .e-previous-timeline, 
.e-schedule .e-vertical-view .e-current-timeline {
	z-index: 6;
	pointer-events: none;
}

.e-schedule .e-vertical-view .e-current-timeline {
    border-top: 2px solid #e3165b;
	position: relative;
}

.e-schedule .e-vertical-view .e-current-timeline:first-child:before {
	content: '';
	width: 12px;
	height: 12px;
	border-radius: 100px;
	background: #e3165b;
	position: absolute;
	top: -7px;
	left: -6px;
}

.e-schedule .e-vertical-view .e-previous-timeline {
	border-color: var(--primary);
}

body:not(.collapse) .e-schedule .e-schedule-table {
	width: calc(100vw - 249px);
}

body.collapse .e-schedule .e-schedule-table {
	width: calc(100vw - 79px);
}

.e-table-wrap.e-vertical-view:is(.e-week-view,.e-work-week-view,.e-day-view):before {
	content: '';
	width: 10px;
	height: 10px;
	position: absolute;
	top: 0;
	left: 32px;
	background: transparent;
	z-index: 1;
	border-radius: 8px 0 0 0;
	border: 1px solid var(--nav-border);
	border-right-width: 0;
	border-bottom-width: 0;
	user-select: none;
}

.e-table-container:has(.e-table-wrap.e-vertical-view:is(.e-week-view,.e-work-week-view,.e-day-view)):before {
	content: '';
	width: 100vw;
	height: 1px;
	position: absolute;
	top: 0;
	left: 42px;
	background: var(--nav-border);
	user-select: none;
	z-index: 1;
}

.e-table-container:has(.e-table-wrap.e-vertical-view:is(.e-week-view,.e-work-week-view,.e-day-view)):after {
	content: '';
	width: 1px;
	height: 101px;
	position: absolute;
	top: 10px;
	left: 32px;
	background: var(--nav-border);
	user-select: none;
	z-index: 1;
}

@media only screen and (max-width: 666px) {

	#reporting-range {
		padding-left: 15px;
	}
	
	.e-schedule .e-schedule-table {
		width: 100vw!important;
	}
	
	.e-schedule .e-agenda-view .e-day-date-header {
		flex-direction: column;
		align-items: center;
		line-height: 1.2;
	}

	.e-schedule .e-agenda-view .e-content-wrap table td:first-child, .e-schedule .e-agenda-view .e-date-column {
		width: 55px!important;
	}

	.e-schedule .e-agenda-view #event-desc:not(:empty) {
		width: 35px!important;
	}
	
	#calendar-main {
        padding: 53px 0 85.8px;
    }
	
	.e-schedule {
		height: calc(100vh - 138.8px)!important;
	}

	.action-nest.calendar-views {
		right: 0;
		margin-top: 0;
	}

	.e-schedule-toolbar-container {
		padding-left: 4px;
	}

	.e-schedule .e-schedule-toolbar .e-toolbar-items.e-tbar-pos {
		margin: 0;
	}

	#select-calendar {
		right: 40px;
		width: 34px;
		margin-top: 4px;
	}

	#select-booking-status {
		right: 74px;
		width: 34px;
		margin-top: 4px;
	}

	#select-calendar.ng-select.ng-select-multiple .ng-select-container,
	#select-booking-status.ng-select.ng-select-single .ng-select-container {
		min-height: 34px;
	}

	#select-booking-status.ng-select.ng-select-single .ng-select-container {
		height: 34px;
	}

	.action-nest.calendar-views > .secondary-action {
		width: 34px;
		height: 34px;
		right: 4px;
		top: 4px;
	}

	.action-nest.calendar-views .nest {
		right: 1em;
		margin-top: 1em;
	}

}

@media only screen and (max-width: 375px) {

	.e-schedule {
		height: calc(100vh - 117px) !important
	}

	#calendar-main {
        padding: 53px 0 64px;
    }

}

/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	display: flex;
}

header.primary {
	background: #fff;
	border-bottom: 1px solid var(--nav-border);
	user-select: none;
}

.logo {
	width: 80px;
	padding: 15px;
}

body.collapse .primary-nav + main,
body.collapse main {
	margin-left: 80px;
}

@media only screen and (max-width: 666px) {
	
	#tuft-logo {
		display: none;
	}

}


/*------------------------------------*\
    LOTTIE
\*------------------------------------*/

.primary-nav .lottie-icon {
	display: block;
	flex: 0 0 25px;
	width: 25px;
	height: 25.59px;
	margin-right: 0.75em;
	background-color: #121331;
}

.system-regular-23-calendar {
	mask-image: url('img/svg/nav/system-regular-23-calendar.svg');
	-webkit-mask-image: url('img/svg/nav/system-regular-23-calendar.svg');
}

.system-regular-88-pets {
	mask-image: url('img/svg/nav/system-regular-88-pets.svg');
	-webkit-mask-image: url('img/svg/nav/system-regular-88-pets.svg');
}

.system-regular-43-pie-chart-diagram {
	mask-image: url('img/svg/nav/system-regular-43-pie-chart-diagram.svg');
	-webkit-mask-image: url('img/svg/nav/system-regular-43-pie-chart-diagram.svg');
}

.system-regular-190-mail-envelope-open {
	mask-image: url('img/svg/nav/system-regular-190-mail-envelope-open.svg');
	-webkit-mask-image: url('img/svg/nav/system-regular-190-mail-envelope-open.svg');
}

.system-regular-40-add-card {
	mask-image: url('img/svg/nav/system-regular-40-add-card.svg');
	-webkit-mask-image: url('img/svg/nav/system-regular-40-add-card.svg');
}

.system-regular-47-chat {
	mask-image: url('img/svg/nav/system-regular-47-chat.svg');
	-webkit-mask-image: url('img/svg/nav/system-regular-47-chat.svg');
}

.system-regular-57-help-question {
	mask-image: url('img/svg/nav/system-regular-57-help-question.svg');
	-webkit-mask-image: url('img/svg/nav/system-regular-57-help-question.svg');
}

.system-regular-27-view-4 {
	mask-image: url('img/svg/nav/system-regular-27-view-4.svg');
	-webkit-mask-image: url('img/svg/nav/system-regular-27-view-4.svg');
}

.system-regular-96-groups {
	mask-image: url('img/svg/nav/system-regular-96-groups.svg');
	-webkit-mask-image: url('img/svg/nav/system-regular-96-groups.svg');
}

.system-regular-63-settings-cog {
	mask-image: url('img/svg/nav/system-regular-63-settings-cog.svg');
	-webkit-mask-image: url('img/svg/nav/system-regular-63-settings-cog.svg');
}

.system-regular-82-extension {
	mask-image: url('img/svg/nav/system-regular-82-extension.svg');
	-webkit-mask-image: url('img/svg/nav/system-regular-82-extension.svg');
}

.system-regular-163-upgrade {
	mask-image: url('img/svg/nav/system-regular-163-upgrade.svg');
	-webkit-mask-image: url('img/svg/nav/system-regular-163-upgrade.svg');
}


/*------------------------------------*\
    LINE CLAMP
\*------------------------------------*/

.primary-nav .section-title,
.ellipsis,
.secondary-nav li a span.section-title,
#fadeTitle1, 
#fadeTitle2, 
header.with-title .modal-title,
#booking-data-card .pet_details,
#booking-data-card .pet_details ~ span,
#booking-data-card .pet_name .name {
  	white-space: nowrap;
  	overflow: hidden;
	text-overflow: ellipsis;
}

[class*="clamp-"] {
	display: -webkit-box!important;
	-webkit-box-orient: vertical;  
	overflow: hidden;
}

.clamp-1,
#booking-data-card .pet_details,
#booking-data-card .pet_details ~ span,
#booking-data-card .pet_name .name {
	-webkit-line-clamp: 1;
	line-clamp: 1;
}

.clamp-2 {
	-webkit-line-clamp: 2;
	line-clamp: 2;
}


/*------------------------------------*\
    BADGES/FLAGS
\*------------------------------------*/

.badge {
	/* font-size: 0.55em; */
	font-size: 8.8px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 3px 2px 2px;
	border-radius: 3px;
	border: 1.5px solid;
	line-height: 1;
	margin-left: 5px;
	opacity: 1;
	user-select: none;
	background-color: #e0edff;
}

.badge.pro {
	color: var(--secondary);
	border-color: var(--secondary);
	background: var(--secondary-pastel);
}

.badge.success {
	color: var(--success);
	border-color: var(--success);
	background: var(--success-pastel);
}

.badge.pending,
.badge.alert {
	color: var(--alert);
	border-color: var(--alert);
	background: var(--alert-pastel);
}

.badge.cancelled,
.badge.error {
	color: var(--error);
	border-color: var(--error);
	background: var(--error-pastel);
}

.badge.notice {
	color: var(--notice);
	border-color: var(--notice);
	background: var(--notice-pastel);
}

.badge.number,
.badge.indicator {
	background: var(--primary);
	border-color: var(--primary);
	border-radius: 100px;
	color: #fff;
	font-style: normal;
	min-width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0 7px;
	line-height: 1.2;
	margin: 0;
	border: 2px solid #fff;
	position: absolute;
    top: 0;
    left: 25px;
}

.badge.indicator {
	width: 15px;
	height: 15px;
	min-width: 15px;
	padding: 0;
	top: 4.5px;
	left: 30px;
}

.badge.number {
	padding: 0 6px;
}

.badge.number span {
	flex: 1 0 100%;
    text-align: center;
	font-size: 12px;
	font-weight: 500;
	margin-top: 1px;
}

.tabular-nav.with-badges .badge {
	position: static;
}

.primary-nav li:is(:hover,:active) > a .badge:is(.number,.indicator),
.primary-nav li.active > a .badge:is(.number,.indicator) {
	border-color: var(--notice-pastel);
}

.app-detector {
	width: 9px;
	height: 9px;
	border-radius: 100px;
	margin-right: 0.5em;
	background-color: var(--bg-light);
	text-indent: -999em;
}

.app-detector.has-app {
	background-color: var(--success);
}

.app-detector.no-app {
	background-color: var(--alert);
}

.avatar .app-detector {
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0;
	z-index: 5;
	width: 15px;
	height: 15px;
	box-shadow: 0 0 0 2.5px rgba(255,255,255,1);
}

.avatar .app-detector.bg-light {
	box-shadow: 0 0 0 2.5px rgba(242,244,248,1);
}

table .avatar .app-detector {
	width: 9px;
	height: 9px;
}

.flags {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	align-self: center;
	line-height: 1.6;
	user-select: none;
	position: relative;
}

table .profile-data .flags {
	flex: 1 0 60px;
    justify-content: flex-end;
}

.pet-record .flags {
	margin-bottom: 0;
}

.flag {
	font-size: 0.75em;
	font-weight: 700;
	color: var(--text-dark);
	padding: 4px 8px;
	border-radius: 100px;
	position: relative;
	width: 28px;
	height: 28px;
}

.flag.balance,
.flag.deposit {
	background: rgba(0,0,0,0.05);
	color: #fff;
	display: flex;
	align-items: center;
	margin-left: auto;
	border-radius: 7px;
	gap: 3px;
	padding: 4px;
}

.flags.payment-status {
	margin-left: auto;
	position: relative;
}

.flags.payment-status :is(.flag.balance,.flag.deposit) {
	margin-left: unset;
}

.flag.new {
	background-color: var(--primary);
	color: #fff;
	width: auto;
}

.flag.photo-consent {
	background-color: var(--notice-pastel);
}

.flag.balance.paid {
	background-color: var(--success);
}

.flag.deposit.paid {
	background-color: var(--notice);
}

.flag.balance i,
.flag.deposit i {
	width: 19px;
	height: 19px;
	background-color: #fff;
	display: inline-block;
	mask-image: url('img/svg/payments.svg');
	-webkit-mask-image: url('img/svg/payments.svg');
}

.flag.deposit i {
	mask-image: url('img/svg/line/system-regular-115-money-cash.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-115-money-cash.svg');
}

.flag.paid.is-refunded:after {
	content: '';
	width: 14px;
	height: 14px;
	position: absolute;
	bottom: 0;
	right: 0;
	border-radius: 3px;
	background: var(--text-dark) url('img/svg/refunded.svg') center center/60% no-repeat;
}

.refunded {
	display: flex;
	align-items: center;
}

.refunded i {
	display: inline-block;
	margin-left: 3px;
	width: 14px;
	height: 14px;
	border-radius: 3px;
	background: var(--text-dark) url('img/svg/refunded.svg') center center/60% no-repeat;
}

.flags.with-detail {
	margin-bottom: 1em;
}

.is-deceased .flags.with-detail {
	filter: grayscale(100%);
	opacity: 0.3;
}

.flag-container {
	display: flex;
    align-items: center;
    gap: 5px;
    background: var(--bg-light);
    padding: 3px 8px 3px 2px;
    border-radius: 3px;
}

.flag-container .description {
	font-size: 0.75em;
    font-weight: 700;
	color: var(--text-dark);
}

@media only screen and (max-width: 666px) {
	.badge.number span {
		margin-top: 0;
	}
	.toolbar .app-detector {
		width: 9px;
		height: 9px;
	}
}

/*------------------------------------*\
    RATIOS
\*------------------------------------*/

[class*="ratio-"],
.image-block {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	position: relative;
}

[class*="ratio-"].placeholder {
	background-color: var(--bg-color);
	background-size: 70%;
	background-position: center center;
	background-repeat: no-repeat;
	position: relative;
}

.ratio-1x1 {
	aspect-ratio: 1 / 1;
}

.ratio-4x3 {
	aspect-ratio: 4 / 3;
}

.ratio-16x9 {
	aspect-ratio: 16 / 9;
}


/*------------------------------------*\
    LOGIN
\*------------------------------------*/

:is(.page-template-signup-essential, .page-template-signup-login, .page-template-signup-step1, .page-template-signup-step2, .page-template-signup-step3, .page-template-signup-step4) :is(header.primary, .primary-nav) {
	display: none;
}

/* the above code won't live on the live site, it's on here as the header and sidebar are part of WP header */

.page-template-signup-login.body {
	background: var(--primary);
	padding: 2em 2.5%;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	padding-top: constant(safe-area-inset-top) !important; 
	padding-top: env(safe-area-inset-top)!important;
}

.page-template-signup-login.body>.flex.column {
	flex: 1;
}

.login-card {
	box-shadow: rgba(7, 35, 65, 0.07) 0px 1px 2px, rgba(7, 35, 65, 0.07) 0px 2px 4px, rgba(7, 35, 65, 0.07) 0px 4px 8px, rgba(7, 35, 65, 0.07) 0px 8px 16px, rgba(7, 35, 65, 0.07) 0px 16px 32px, rgba(7, 35, 65, 0.07) 0px 32px 64px;
}

#login-main,
.login-logo {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-self: center;
	overflow: visible;
}

.login-logo {
	width: 70px;
	height: 70px;
	background-image: url('img/svg/tuft-logo-white.svg');
	margin: 8.5px 0 2em;
}

.login-wrap {
	max-width: 400px;
	width: 100%;
}

.login-card {
	display: flex;
	flex-direction: column;
	max-height: 100%;
	overflow: hidden;
	background-color: #fff;
	border-radius: 12px;
	transform: translateZ(0);
	transition: all .5s ease-in-out;
	position: relative;
	margin-bottom: 2em;
	box-shadow: rgba(75, 9, 20, 0.07) 0px 1px 2px, rgba(75, 9, 20, 0.07) 0px 2px 4px, rgba(75, 9, 20, 0.07) 0px 4px 8px, rgba(75, 9, 20, 0.07) 0px 8px 16px, rgba(75, 9, 20, 0.07) 0px 16px 32px, rgba(75, 9, 20, 0.07) 0px 32px 64px;
}

.login-card .modal-inner {
	padding: 2em;
}

.login-card i[class*="icon-"] {
	width: 40px;
	height: 40px;
	background-color: var(--text);
	display: inline-block;
}

.login-card h2 {
	margin: 0 0 1em;
}
.login-card.signup {
	max-width: 800px;
	flex-direction: row;
	flex-wrap: wrap;
}

.login-card.signup :is(.modal-sidebar, .modal-inner) {
	flex: 1 0 320px;
}

.login-card.signup .modal-sidebar {
	padding: 2em;
	background-color: var(--bg-light);
	border-radius: 12px 0 0 12px;
}

.login-card.signup .modal-sidebar h2 {
	margin: 0;
}

.login-card.onboarding h2 {
	margin-bottom: 0;
}

.onboarding-steps li,
.process-steps li {
	background-color: var(--notice-pastel);
	height: 44px;
	border-radius: 100px;
	border: 2px solid var(--notice-pastel);
	position: relative;
}

.process-steps li {
	text-indent: -999em;
	width: 20px;
	height: 20px;
}

.process-steps.pulse {
	margin-top: 10px;
}

.process-steps.pulse li.active {
	box-shadow: 0px 0px 0px 5px rgba(0,122,255,0.5);
    animation: pulse-shadow 1s ease-out infinite;
	z-index: 2;
}

.process-steps li.completed:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	mask-image: url('img/svg/checkbox.svg');
	mask-position: center center;
	mask-repeat: no-repeat;
	mask-size: cover;
	-webkit-mask-image: url('img/svg/checkbox.svg');
	-webkit-mask-position: center center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: cover;
	background-color: var(--notice);
}

@-webkit-keyframes pulse-shadow {
    0%   { box-shadow: 0px 0px 0px 0px rgba(0,122,255,0.5); }
    100%  { box-shadow: 0px 0px 0px 5px rgba(0,122,255,0); }
}

.login-card .onboarding-steps i[class*="icon-"] {
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center center;
	-webkit-mask-position: center center;
	mask-size: 70%;
	-webkit-mask-size: 70%;
	background-color: #fff;
}

app-login+h4 {
	text-align: center;
	margin-bottom: 32px;
}

app-login+h4+.x-small {
	margin-top: auto;
}

.onboarding-steps li.active {
	background-color: var(--notice);
	border-color: var(--notice);
}

.onboarding-steps li.completed {
	background-color: #fff;
	border-color: var(--notice);
}

.onboarding-steps li.completed i[class*="icon-"] {
	background-color: var(--notice);
}

.onboarding-steps li:nth-child(n+2):before {
	content: '';
	width: 25px;
	height: 2px;
	border-radius: 30px;
	background: var(--notice-pastel);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: -30px;
}

.process-steps li:nth-child(n+2):before {
	width: 15px;
	left: -20px;
}

.onboarding-steps li:is(.active, .completed):before {
	background-color: var(--notice);
}

@media only screen and (max-width: 673px) {
	.login-card.signup .modal-sidebar {
		border-radius: 12px 12px 0 0;
	}
}

@media only screen and (max-width: 666px) {
	.page-template-signup-login.body {
		padding: 2.5%;
	}

	.login-logo {
		width: 50px;
		height: 50px;
		margin-bottom: 2.5%;
	}
}

/*------------------------------------*\
    BUTTONS/LINKS
\*------------------------------------*/

a:is([href*="mailto:"]:not(#email-us),[href*="tel:"]),
a:is([href*="mailto:"]:not(#email-us),[href*="tel:"]):visited {
	font-weight: 600;
	color: var(--notice);
}

a:is([href*="mailto:"]:not(#email-us),[href*="tel:"]):hover,
a:is([href*="mailto:"]:not(#email-us),[href*="tel:"]):active {
	font-weight: 600;
	color: var(--notice-mid); 
}

a, button, input[type="submit"], input[type="button"], input[type="color"], input[type="radio"], input[type="checkbox"], label, .remove-tap-bg {
    -webkit-tap-highlight-color: transparent;
}

.button-container {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 5px;
}

.btn.wide {
	flex: 1;
}

a.btn.lottie {
	display: flex;
}

a,
a:visited {
	color:#444;
	text-decoration:none;
	background-color:transparent
}
a:hover,
a:active {
	outline:0;
	color:#444;
}
a:focus {
	outline:0;
}

a.primary,
a.primary:visited {
	color: var(--primary);
}

a.primary:is(:hover,:active) {
	color: var(--primary-light);
}

a.secondary,
a.secondary:visited {
	color: var(--secondary);
}

a.secondary:is(:hover,:active) {
	color: var(--secondary-light);
}

a.notice,
a.notice:visited {
	color: var(--notice);
}

a.notice:is(:hover,:active) {
	color: var(--notice-mid);
}

input[type="submit"],
button.btn,
a.btn,
a.btn:visited,
button.e-btn.e-today,
.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn {
	display: inline-block;
	color: #fff;
	background-color: var(--text-dark);
    padding: calc(0.75em - 2px);
	border: 2px solid var(--text-dark);
    border-radius: 5px;
    font-family: 'DM Sans', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	font-weight: 500;
	position: relative;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	outline: none;
	line-height: 1.15;
}

button.btn.x-small,
a.btn.x-small {
	padding: 5px calc(0.75em - 2px);
}

button.btn.align-left,
a.btn.align-left {
	text-align: left;
}

input[type="submit"]:is(:hover),
a.btn:is(:hover),
button.btn:is(:hover),
button.e-btn.e-today:is(:hover,:active) {
	background-color: var(--button-light);
	border-color: var(--button-light);
}

input[type="submit"]:active:not([disabled],.disabled),
a.btn:active:not([disabled],.disabled),
button.btn:active:not([disabled],.disabled) {
	transform: scale(0.95);
}

a.btn.outline,
button.btn.outline {
	background-color: #d0d9e4;
	color: var(--text-dark);
	border: 2px solid var(--text-dark);
}

a.btn.secondary,
a.btn.secondary:visited,
input[type="submit"].secondary,
button.btn.secondary {
	background-color: var(--secondary);
	border: 2px solid var(--secondary);
}

a.btn.secondary:is(:hover,:active),
input[type="submit"].secondary:is(:hover,:active),
button.btn.secondary:is(:hover,:active) {
	background-color: var(--secondary-light);
	border: 2px solid var(--secondary-light);
}

a.btn.notice,
a.btn.notice:visited,
input[type="submit"].notice,
button.btn.notice {
	background-color: var(--notice);
	border: 2px solid var(--notice);
}

a.btn.notice:is(:hover,:active),
input[type="submit"].notice:is(:hover,:active),
button.btn.notice:is(:hover,:active) {
	background-color: var(--notice-mid);
	border: 2px solid var(--notice-mid);
}

a.btn.tertiary,
a.btn.tertiary:visited,
button.btn.tertiary {
	background-color: var(--primary);
	border: 2px solid var(--primary);
}

a.btn.tertiary:is(:hover,:active),
input[type="submit"].tertiary:is(:hover,:active),
button.btn.tertiary:is(:hover,:active) {
	background-color: var(--primary-light);
	border: 2px solid var(--primary-light);
}

a.btn.secondary.outline,
button.btn.secondary.outline {
	background-color: var(--secondary-pastel);
	color: var(--secondary);
}

a.btn.notice.outline,
button.btn.notice.outline {
	background-color: var(--notice-pastel);
	color: var(--notice);
}

a.btn.tertiary.outline,
button.btn.tertiary.outline {
	background-color: var(--primary-pastel);
	color: var(--primary);
}

a.btn.hollow,
a.btn.secondary.hollow,
button.btn.hollow,
button.btn.secondary.hollow,
a.btn.tertiary.hollow,
button.btn.tertiary.hollow,
a.btn.notice.hollow,
button.btn.notice.hollow {
	background-color: transparent;
	color: var(--text-dark);
}

a.btn.discourage,
button.btn.discourage {
	background-color: transparent;
	border-color: transparent;
	color: var(--text);
	font-weight: 400;
}

a.btn.discourage:not(.disabled):is(:hover,:active),
button.btn.discourage:not([disabled]):is(:hover,:active) {
	color: var(--text-dark);
}

input[type="submit"][disabled],
button.btn[disabled],
a.btn.disabled,
input[type="submit"][disabled]:is(.primary,.secondary,.tertiary,.notice):hover,
button.btn[disabled]:is(.primary,.secondary,.tertiary,.notice):hover,
a.btn.disabled:is(.primary,.secondary,.tertiary,.notice):hover {
	background-color: var(--bg-light);
	border-color: var(--bg-light);
	color: var(--text-light);
	cursor: not-allowed;
}

button.btn.discourage[disabled],
a.btn.discourage.disabled {
	background-color: transparent;
	border-color: transparent;
}

a.btn.disable,
a.btn.disable:visited,
input[type="submit"].disable,
button.btn.disable {
	background-color: var(--bg-light);
	border: 2px solid var(--bg-light);
	color: var(--text-light);
	cursor: not-allowed;
}

a.btn.disable:active,
a.btn.disable:visited:active,
input[type="submit"].disable:active,
button.btn.disable:active {
	transform: scale(1);
}

button.btn.secondary-action,
a.btn.secondary-action,
.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn {
	background-color: transparent;
	border-color: transparent;
	color: var(--text-dark);
}

button.btn.secondary-action:is(:hover,:active),
a.btn.secondary-action:is(:hover,:active),
.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn:is(:hover,:active) {
	background-color: rgba(0, 0, 0, 0.05);
	border-color: transparent;
}

button.btn.secondary-action[class*="layout-"]:is(:hover,:active) {
	background-color: rgba(0, 0, 0, 0);
}

button.btn.discreet {
	background-color: var(--nav-border);
	border-color: var(--nav-border);
	color: var(--text-dark);
	font-weight: bold;
}

button.btn.discreet.hollow {
	background-color: transparent;
	border-color: var(--nav-border);
	color: #929bb0;
}

/* INLINE LINKS */

a.link,
a.link:visited {
	font-weight: bold;
	color: var(--notice);
}

a.link:hover,
a.link:active {
	color: var(--notice-mid);
}

/* CLICK TO COPY */

.copy-container {
	display: flex;
	align-items: center;
}

button.click-to-copy,
button.click-to-copy:hover {
	background-color: transparent;
	border: none;
	width: 42px;
	height: 42px;
}

button.click-to-copy:active {
	transform: scale(0.9);
	background-color: var(--notice-pastel);
}

.click-to-copy:before {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	mask-image: url('img/svg/line/system-regular-99-2.svg');
	mask-size: 30px;
	-webkit-mask-image: url('img/svg/line/system-regular-99-2.svg');
	-webkit-mask-size: 30px;
	background-color: var(--notice);
}

/* MORE OPTIONS */

.action-nest > .secondary-action {
	text-indent: -999em;
	width: 42px;
	height: 42px;
}

.action-nest > .secondary-action:before,
.e-schedule .e-schedule-toolbar .e-hor-nav:before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--text-dark);
	mask-image: url('img/svg/line/system-regular-188-kebab.svg');
	mask-size: 25px;
	-webkit-mask-image: url('img/svg/line/system-regular-188-kebab.svg');
	-webkit-mask-size: 25px;
}

.action-nest.calendar-views > .secondary-action:before {	
	mask-image: url('img/svg/line/system-regular-176-view-week.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-176-view-week.svg');
}

button.btn.secondary-action.message {
	border-color: var(--text-dark);
}

button.secondary-action.filter:before,
button.secondary-action.compose:before,
button.secondary-action.layout-grid:before,
button.secondary-action.layout-grid.selected:before,
button.secondary-action.layout-rows:before,
button.secondary-action.layout-rows.selected:before,
button.secondary-action.layout-columns:before,
button.secondary-action.layout-columns.selected:before {
	background-color: var(--notice);
}

button[class*="layout-"] {
	border: none;
}

button.secondary-action.filter:before {
	mask-image: url('img/svg/filter.svg');
	-webkit-mask-image: url('img/svg/filter.svg');
	mask-size: 30px;
	-webkit-mask-size: 30px;
}

button.secondary-action.refresh:before,
.dot.retry:before {
	mask-image: url('img/svg/line/system-regular-18-autorenew.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-18-autorenew.svg');
}

button.secondary-action.compose:before,
i.icon-send-all {
	mask-image: url('img/svg/line/system-regular-114-edit-pencil-rename.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-114-edit-pencil-rename.svg');
}

button.secondary-action.send-reminder:before {
	mask-image: url('img/svg/line/system-regular-46-notification-bell.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-46-notification-bell.svg');
}

button.secondary-action.layout-grid:before {
	mask-image: url('img/svg/layout-grid-deselected.svg');
	-webkit-mask-image: url('img/svg/layout-grid-deselected.svg');
}

button.secondary-action.layout-grid.selected:before,
button.secondary-action.layout-grid:hover:before {
	mask-image: url('img/svg/layout-grid-selected.svg');
	-webkit-mask-image: url('img/svg/layout-grid-selected.svg');
}

button.secondary-action.layout-rows:before {
	mask-image: url('img/svg/layout-rows-deselected.svg');
	-webkit-mask-image: url('img/svg/layout-rows-deselected.svg');
}

button.secondary-action.layout-rows.selected:before,
button.secondary-action.layout-rows:hover:before {
	mask-image: url('img/svg/layout-rows-selected.svg');
	-webkit-mask-image: url('img/svg/layout-rows-selected.svg');
}

button.secondary-action.layout-columns:before {
	mask-image: url('img/svg/layout-columns-deselected.svg');
	-webkit-mask-image: url('img/svg/layout-columns-deselected.svg');
}

button.secondary-action.layout-columns.selected:before,
button.secondary-action.layout-columns:hover:before {
	mask-image: url('img/svg/layout-columns-selected.svg');
	-webkit-mask-image: url('img/svg/layout-columns-selected.svg');
}

button.selected {
	pointer-events: none;
}

/* ROUNDELS */

button.roundel,
a.roundel {
	width: 60px;
    height: 60px;
    border-radius: 200px;
    outline: none;
    border: none;
	-webkit-appearance: none;
	appearance: none;
	text-indent: -999em;
	padding: 0;
	background-color: var(--text-dark);
	cursor: pointer;
	position: relative;
	transition: .3s cubic-bezier(.68,-.55,.27,1.55);
	transform: scale(1);
	display: block;
}

button.roundel:hover,
a.roundel:hover {
	transform: scale(.95);
}

button.roundel:hover:active,
a.roundel:hover:active {
	animation: scaleAnimation 0.5s ease forwards 1;
}

@keyframes scaleAnimation {
    0% {
        transform: scale(.95);
    }
    50% {
        transform: scale(0.85);
    }
    100% {
        transform: scale(.95);
    }
}

button.roundel:before,
a.roundel:before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	mask-image: url(img/svg/line/system-regular-29-cross-2.svg);
	mask-size: 40px;
	mask-position: center center;
	mask-repeat: no-repeat;
	-webkit-mask-image: url(img/svg/line/system-regular-29-cross-2.svg);
	-webkit-mask-size: 40px;
	-webkit-mask-position: center center;
	-webkit-mask-repeat: no-repeat;
	background-color: #fff;
	transform: rotate(45deg);
}

button.roundel.success:before,
a.roundel.success:before {
	mask-image: url(img/svg/line/system-regular-141-history.svg);
	-webkit-mask-image: url(img/svg/line/system-regular-141-history.svg);
	transform: rotate(0deg) scaleX(-1);
	mask-size: 35px;
	-webkit-mask-size: 35px;
}

button.roundel.shadow,
a.roundel.shadow {
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
	/* box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px; */
	/* box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, var(--nav-border) 0px -12px 30px, var(--nav-border) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; */
}

button.roundel.shadow:hover,
a.roundel.shadow:hover {
	box-shadow: rgba(50, 50, 93, 0.5) 0px 13px 27px -5px, rgba(0, 0, 0, 0.5) 0px 8px 16px -8px;
	/* box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px; */
	/* box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, var(--nav-border) 0px -12px 30px, var(--nav-border) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; */
}

button.roundel.notice,
a.roundel.notice {
	background-color: var(--notice);
}

button.roundel.success,
a.roundel.success {
	background-color: var(--success);
}

/* DOTS / FORM ACTIONS */

button.dot,
span.dot {
	text-indent: -999em;
	width: 19px;
	max-width: 19px;
	height: 19px;
	background: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	position: relative;
	padding: 0;
}

button.dot:active,
span.dot:active {
	transform: scale(0.9);
}

button.dot:before,
span.dot:before {
	content: '';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: var(--text-dark);
	position: absolute;
}

.dot.delete:before {
	mask-image: url('img/svg/line/system-regular-39-trash.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-39-trash.svg');
	background-color: var(--error);
}

.dot.cancel:before {
	mask-image: url('img/svg/close.svg');
	-webkit-mask-image: url('img/svg/close.svg');
	background-color: var(--text);
	mask-size: 25px;
	-webkit-mask-size: 25px;
}

.dot.refund:before {
	mask-image: url('img/svg/refunded.svg');
	-webkit-mask-image: url('img/svg/refunded.svg');
	mask-size: 60%;
	-webkit-mask-size: 60%;
}

.dot.copy:before {
	mask-image: url('img/svg/line/system-regular-99-2.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-99-2.svg');
}

.dot.add:before,
.dot.close:before {
	mask-image: url('img/svg/close.svg');
	-webkit-mask-image: url('img/svg/close.svg');
}

.dot.edit:before {
	mask-image: url('img/svg/line/system-regular-114-edit-pencil-rename.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-114-edit-pencil-rename.svg');
	background-color: var(--notice);
	mask-size: 22px;
	-webkit-mask-size: 22px;
}

button.dot.add {
	background-color: var(--notice);
	border-radius: 100px;
}

button.dot.refund {
	background-color: var(--text-dark);
	border-radius: 100px;
}

button.dot.add:hover {
	background-color: #288fff;
}

.dot.refund:before {
	background-color: #fff;
}

.dot.add:before {
	background-color: #fff;
	transform: rotate(45deg);
}

.dot.close {
	background-color: var(--primary);
	border-radius: 100px;
}
.dot.close:hover {
	background-color: var(--primary-light);
}

.dot.close:before {
	background-color: #fff
}

.dot[disabled],
.dot[disabled]:is(:hover,:active),
.dot.add[disabled],
.dot.add[disabled]:is(:hover,:active) {
	cursor: not-allowed;
	background-color: var(--bg-light);
	transform: scale(1);
}
.dot[disabled]:before {
	background-color: var(--text-light);
}
.dot:is(.retry,.delete)[disabled] {
	background-color: transparent;
}

.dot.edit[disabled] {
	background-color: transparent;
}

a {
	-webkit-touch-callout: none;
}

/* MODAL ACTIONS */

button.modal-action {
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    border: none;
    background: transparent;
    color: var(--notice);
    cursor: pointer;
	padding: 0;
}

button.modal-action.save {
	position: absolute;
    right: 16px;
	font-weight: 500;
}

button.modal-action[disabled] {
    color: var(--text-light);
	cursor: not-allowed;
}

/* CHAT BUTTONS */

button.btn.send-message {
	width: 42.4px;
	height: 42.4px;
	text-indent: -999em;
	border-radius: 100px;
	align-self: flex-end;
}

button.btn.send-message:before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #fff;
	mask-image: url('img/svg/send.svg');
	-webkit-mask-image: url('img/svg/send.svg');
	mask-size: 25px;
	-webkit-mask-size: 25px;
	mask-position: left 9px center;
	-webkit-mask-position: left 9px center;
}

button.btn.send-message[disabled],
button.btn.send-message[disabled]:is(:hover,:active) {
	background-color: #e6e8eb;
	border-color: #e6e8eb;
	cursor: not-allowed;
}

/*------------------------------------*\
    LISTS
\*------------------------------------*/

table.default.client-list.no-select ul.list-none {
	padding-left: 24px;
}

.secondary-nav {
	list-style-type: none;
	padding: 0;
	margin: 0;
	user-select: none;
}

.secondary-nav li.active > a {
	font-weight: 700;
	color: var(--text-dark);
}

.secondary-nav a {
	padding: 0.5em 1em;
	display: block;
	color: var(--text);
	position: relative;
	display: flex;
	align-items: center;
}

.secondary-nav a:is(:hover,:active) {
	color: var(--text-dark);
}

ul.unset {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

ul.inline li {
	display: inline;
}

ul.flex {
	gap: 15px;
}

.unset.stats {
	margin-bottom: 1em;
}

.stats li,
.profile-completion li {
	display: flex;
	justify-content: space-between;
	position: relative;
}

.report-grid ul.stats {
	margin-top: 1em;
	margin-bottom: 0;
}

ul.revenue li:last-child {
	color: var(--text);
	font-weight: 600;
	justify-content: flex-end;
	gap: 15px;
	border-top: 1px solid var(--bg-light);
	padding-top: 6px;
	margin-top: 6px;
}

ul.with-header li:first-child .metric {
	font-weight: 600;
	color: var(--text-dark);
	padding-bottom: 6px;
	margin-bottom: 6px;
}

ul.revenue li:last-child .value {
	color: var(--text);
}

ul.grid {
	display: grid;
	gap: 15px;
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: 15px;
}

ul.grid li {
	position: relative;
	border-radius: 5px;
    border: 1px solid var(--nav-border);
	box-shadow: 0 0 0 0 rgba(0, 125, 250, .6), inset 0 0 0 0 #f2faff;
    transition: box-shadow 0.3s ease-in-out;
}

ul.grid li:is(:hover, :active) {
	box-shadow: 0 0 0 4px rgba(0, 125, 250, .6), inset 0 0 0 1000px #f2faff;
    border-color: #0071e3;
}

ul.grid li.selected {
	box-shadow: 0 0 0 4px rgb(0 250 8 / 60%), inset 0 0 0 1000px #f8fff2;
    border-color: var(--active);
}

ul.grid.suppliers img {
	aspect-ratio: 4 / 3;
}

.stats .value,
.stats-container .value {
	font-weight: 600;
	color: var(--text-dark);
}

.stats-container .stat {
	display: flex;
	justify-content: space-between;
}

.stats-container .stat:not(:last-child) {
	border-bottom: 1px solid var(--bg-light);
    padding-bottom: 6px;
    margin-bottom: 6px;
}

.stats-container .value {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.is-deceased .stats .value {
	text-decoration: line-through;
}

:is(.user-notes,.booking-history) li {
	display: flex;
	gap: 10px;
	margin-bottom: 14px;
}

:is(.user-notes,.booking-history) li:not(:last-child) {
	padding-bottom: 14px;
	border-bottom: 1px solid var(--nav-border);
}

:is(.user-notes,.booking-history) .note {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.booking-history .note {
	gap: 0;
	padding-left: 25px;
	position: relative;
}

.booking-history .note i {
	position: absolute;
	top: 0;
	left: 0;
	mask-size: 16px;
	-webkit-mask-size: 16px;
}

.action.salon i {
	background-color: var(--notice);
}

.action.system i {
	background-color: var(--primary);
}

.action.client i {
	background-color: var(--secondary);
}

:is(.user-notes,.booking-history) .actions,
.prices .actions {
	width: 49px;
	margin-left: auto;
	display: flex;
	justify-content: flex-end;
}

.prices .actions.single-action {
	width: 19px;
}

ul.prices {
	display: flex;
	flex-direction: column;
}

.prices li {
	padding: 10px 0;
	border-bottom: 1px dashed var(--nav-border);
}

.prices li:is(.failed,.pending) .price-block .name,
.prices li:is(.failed,.pending) .price-block .price .custom {
	color: var(--text);
	font-weight: 500;
}

.prices li.total.large {
	font-size: 1.17em;
}

.prices li.total,
.prices li:has(+li.total) {
	border-bottom: 2px solid var(--nav-border);
}

.prices li:has(+li.subtotal) {
	border-bottom: 1px solid var(--nav-border);
}

.prices li.groomer {
	padding-top: 25px;
}

.prices li.groomer:not(:last-child) {
	padding-bottom: 25px;
}

.pet-record {
	margin-bottom: 1.5em;
}

.pet-record .prices li:first-child {
	padding-top: 0;
}

.prices li:last-child {
	border-bottom: none;
}

.prices li.subtotal {
	border-top: 1px solid var(--nav-border);
	border-bottom: 2px solid var(--nav-border);
}

.no-padding .prices li.deposit {
	border-bottom-style: solid;
}

.prices li.deposit {
	border-bottom-style: dashed;
}

.prices li.balance .price .value {
	font-size: 1.5em;
}

ul.prices.special {
	gap: 6px;
}

.prices.special li {
	padding: 7px;
	background: var(--alert-pastel);
	border-radius: 5px;
	gap: 10px;
	display: flex;
	border: none;
}

.prices .actions {
	align-items: center;
}

.prices .price-block {
	flex: 1;
	display: flex;
	gap: 0 10px;
}

.prices .price-block .details {
	display: flex;
	gap: 10px;
}

.prices .revised :is(.service,.details),
.prices .revised .price .custom {
	color: var(--text);
	font-style: italic;
	font-weight: 500;
}

.prices .revised .price-block .details {
	gap: 10px;
	align-items: center;
}

.prices .details .price,
.prices .details .duration {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.prices .price .custom,
.prices .duration .custom,
.prices .service {
	font-weight: 600;
	color: var(--text-dark);
}

.prices.payments li:not(.revision) .name {
	display: flex;
	align-items: center;
}

.prices .revision .name {
	flex: 1;
	text-align: right;
}

.prices .price .original,
.prices .duration .original {
 text-decoration: line-through;
}

.prices .service {
	flex: 1;
	flex-direction: column;
	display: flex;
}

.no-padding .prices li.subtotal {
	background-color: var(--bg-light);
}

.no-padding .prices li {
	padding: 10px 24px;
}

.no-padding .prices li.balance {
	border-radius: 0 0 7px 7px;
}

ul.package-features {
	margin: 1em 0;
}

ul.package-features li:not(:last-child) {
	margin-bottom: 0.25em;
}

ul.package-features li {
    padding-left: 32px;
    position: relative;
}

ul.package-features li:before {
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    top: 3.6px;
    left: 0;
    background-color: #bbb;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: center center;
    -webkit-mask-position: center center;
    mask-image: url('img/svg/check-hollow.svg');
    -webkit-mask-image: url('img/svg/check-hollow.svg');
}

ul.onboarding-steps {
	margin-bottom: 2em;
	gap: 30px;
}

ul.process-steps {
	gap: 20px;
}

.alert-card ul {
	padding-left: 13px;
	margin-top: 0.5em;
}

ul.tabular-nav {
	padding: 5px;
	margin: 0;
	background: #fff;
	border-radius: 100px;
	display: flex;
	list-style-type: none;
	user-select: none;
}

ul.tabular-nav li {
	flex: 1 0 auto;
}

ul.tabular-nav a {
	padding: 8px 1em;
	border-radius: 100px;
	font-weight: 600;
	display: block;
	text-align: center;
	color: var(--text);
}

ul.tabular-nav.with-badges a {
	display: flex;
	align-items: center;
}

ul.tabular-nav li.active a {
	background-color: var(--bg-light);
	color: var(--text-dark);
	pointer-events: none;
}

ul.tabular-nav li a.has-badge {
	gap: 3px;
	padding-right: 8px;
}

ul.tabular-nav li:not(.active):hover a {
	color: var(--text-dark);
}

.feature-bullets {
	list-style-type: none;
	padding-left: 25px;
	margin: 0;
}

.feature-bullets li {
	position: relative;
	margin: 0.3em 0;
}

.feature-bullets li:before {
    content: '';
    width: 15px;
    height: 15px;
    background: no-repeat center/15px url(img/svg/check.svg);
    position: absolute;
    top: 3px;
    left: -25px;
}

.feature-bullets.lost li:before,
.feature-bullets li.lost:before {
    background-image: url(img/svg/cross.svg);
}

.profile-completion {
	user-select: none;
}

.profile-completion li:not(.complete) {
	font-weight: 600;
	color: var(--text-dark);
}

.profile-completion li {
	padding: 1em 0 1em 1.5em;
}

.profile-completion li:before {
	content: '';
	width: 15px;
	height: 15px;
	background: #fff;
    border: 2px solid #d3d4d7;
    border-radius: 100px;
    position: absolute;
    left: 0;
    top: 50%;
	transform: translateY(-50%);
}

.profile-completion li.complete:before {
	background: var(--notice) url(img/svg/checkbox.svg) center center/15px no-repeat;
	border-color: var(--notice);
}

.profile-completion li.complete .metric {
	text-decoration: line-through;
}

.profile-completion li:not(:last-child) {
	border-bottom: 1px solid var(--bg-light);
}

.profile-completion i {
	mask-image: url(img/svg/chevron-right.svg);
	-webkit-mask-image: url(img/svg/chevron-right.svg);
}

.profile-completion li.complete i {
	opacity: 0.3;
}

.profile-completion li:not(.complete):hover i {
	background-color: var(--notice);
}

.profile-completion li:not(.complete):hover {
	color: var(--notice);
}

@media only screen and (max-width: 666px) {
	
	table.default.client-list.no-select ul.list-none {
		padding-left: 15px;
	}

}

@media only screen and (max-width: 478px) {
	ul.grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*------------------------------------*\
    FORMS/INPUTS
\*------------------------------------*/

.NgxEditor__Wrapper {
	margin-bottom: 15px;
}

.NgxEditor > div {
	height: 210px;
    overflow-y: scroll;
}

input::placeholder {
	user-select: none;
}

form.flex {
	align-content: center;
    flex-wrap: wrap;
    flex: 1;
    gap: 14px;
}

form.flex :is(button,input[type="submit"]) {
	align-self: center;
}

.field-messages i {
	width: 12px!important;
	height: 12px!important;
	min-width: 12px!important;
	min-height: 12px!important;
	background: var(--text);
	display: block;
	margin-right: 3px;
	mask-image: url('img/svg/error-solid.svg');
	-webkit-mask-image: url('img/svg/error-solid.svg');
	align-self: flex-start;
	margin-top: 2px;
}

.field-message a,
.field-message a:visited {
	color: inherit;
	text-decoration: underline;
}

.field-message a:is(:hover,:active) {
	text-decoration: none;
}

.hide-placeholder::placeholder {
	color: transparent;
	opacity: 0;
}

.form-cell-wrapper,
.radio-group {
	position: relative;
}

.form-cell-wrapper:not(.table-controls,.radio,.miniature) {
	width: 100%;
}

.radio-group {
	margin-top: 14px;
	display: flex;
	gap: 14px;
	margin-bottom: 22px;
	user-select: none;
}

.radio-group .form-cell-wrapper.radio:last-child {
	margin-bottom: 0;
}

.form-cell-wrapper.special-dropdown {
	margin-bottom: 11px;
}

.form-cell-wrapper.checkbox label,
.form-cell-wrapper.radio label {
	margin-left: 0.5em;
}

.form-cell-wrapper.checkbox:not(.toggle) {
	margin-bottom: 14px;
}

.form-cell-wrapper.checkbox.toggle,
.form-cell-wrapper.checkbox.toggle.can-have-notice .toggle-container {
	flex-direction: row-reverse;
	flex-wrap: nowrap;
}

.form-cell-wrapper.checkbox.toggle .form-cell-wrapper {
	margin-top: 14px;
}

.form-cell-wrapper.checkbox.toggle .label-container {
	margin-right: auto;
	user-select: none;
}

.form-cell-wrapper.checkbox.toggle label {
	margin-left: 0;
	font-weight: 600;
	color: var(--text-dark);
	display: block;
}

.form-cell-wrapper.checkbox.toggle p {
	margin: 0.5em 0 0;
}

.form-cell-wrapper.checkbox.toggle input[type="checkbox"] {
	width: 54.55px;
	height: 30px;
	border-radius: 100px;
	background-color: #e9e9eb;
	border: none;
	box-shadow: inset 0px 0px 2px 0px rgba(0,0,0,0.2);
	overflow: hidden;
	flex: 0 0 54.55px;
	cursor: pointer;
}

.form-cell-wrapper.checkbox.toggle input[type="checkbox"]:before {
	display: block;
	opacity: 0;
	transition: 0.1s ease-in-out;
}

.form-cell-wrapper.checkbox.toggle input[type="checkbox"]:checked:before {
	opacity: 1;
}

.form-cell-wrapper.checkbox.toggle input[type="checkbox"]:after {
	width: 27.27px;
	height: 27.27px;
	position: absolute;
	top: 1.36px;
	transform: translateX(1.36px);
	background: #fff;
	display: block;
	border-radius: 100px;
	box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15);
	transition: 0.3s ease-in-out;
}

.toggle-wrapper.small .form-cell-wrapper.checkbox.toggle label,
.toggle-wrapper.small .form-cell-wrapper.checkbox.toggle p {
	margin: 0;
}

.form-cell-wrapper.range {
	align-items: center;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  margin-right: 15px;
  width: 200px;
  height: 4px;
  background: #e9e9eb;
  border-radius: 5px;
  background-image: linear-gradient(var(--notice), var(--notice));
  background-size: 50% 100%;
  background-repeat: no-repeat;
}

[dir="rtl"] input[type="range"] {
  background: var(--notice);
  background-image: linear-gradient(#fff, #fff);
  background-size: 30% 100%;
  background-repeat: no-repeat;
}

/* Input Thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: #fff;
  cursor: ew-resize;
  box-shadow: 2px 4px 6px 2px rgba(0,0,0,0.08), 0px 0px 5px 0px rgba(0,0,0,0.15);
  transition: background .3s ease-in-out;
}

input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: #fff;
  cursor: ew-resize;
  box-shadow: 2px 4px 6px 2px rgba(0,0,0,0.10);
  transition: background .3s ease-in-out;
}

input[type="range"]::-ms-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: #fff;
  cursor: ew-resize;
  box-shadow: 2px 4px 6px 2px rgba(0,0,0,0.10);
  transition: background .3s ease-in-out;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background: #fff;
}

input[type="range"]::-moz-range-thumb:hover {
  background: #fff;
}

input[type="range"]::-ms-thumb:hover {
  background: #fff;
}

.form-cell-wrapper.checkbox.toggle input[type="checkbox"]:checked:after {
	transform: translateX(25.92px);
	box-shadow: -3px 3px 3px 0px rgba(0,0,0,0.15);
}

.select-container:before,
/* .select2-selection:before, */
.date-container:before,
.time-container:before,
.search-container:before {
	content: '';
    width: 25px;
    height: 25px;
    right: 0;
    top: 50%;
    margin-top: -18px;
    background: url(img/svg/chevron-down.svg) right center/25px no-repeat;
    position: absolute;
    z-index: 5;
	pointer-events: none;
}

.select-container:has(.form-textbox-input:disabled):before {
	opacity: 0.2;
}

.time-container:before {
	z-index: 1002;
}

.form-cell-wrapper.table-controls.select-container:before,
.form-cell-wrapper.miniature.select-container:before {
	transform: translateY(-50%);
	margin-top: unset;
}

.no-margin.select-container:before,
.no-margin.select2-selection:before,
.no-margin.date-container:before,
.no-margin.time-container:before {
	transform: translateY(-50%);
	margin-top: 0;
}

.disabled.select-container:before,
.disabled.select2-selection:before,
.disabled.date-container:before,
.disabled.time-container:before {
	opacity: 0.2;
}


.date-container:before {
	background: transparent url('img/svg/calendar.svg') center center/25px no-repeat;
	right: 10px;
}

.time-container:before {
	background: transparent url('img/svg/clock.svg') center center/25px no-repeat;
	right: 10px;
}

.search-container:before {
	mask-image: url('img/svg/search.svg');
	mask-position: center center;
	mask-repeat: no-repeat;
	mask-size: 25px;
	-webkit-mask-image: url('img/svg/search.svg');
	-webkit-mask-position: center center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 25px;
	background-color: var(--text-light);
	top: calc(50% + 6px);
	left: 10px;
}

.search-container:focus:before {
	background-color: var(--notice);
}

.time-container.no-icon:before {
	display: none;
}

.time-container.duration:before {
	background-image: url('img/svg/hourglass.svg');
}

.select2-selection:before {
	margin-top: -12.5px;
}

input:is([type="text"],[type="tel"],[type="email"],[type="date"],[type="time"],[type="color"],[type="number"],[type="search"],[type="password"]),
select,
textarea,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: hsla(0,0%,100%,.8);
    margin: 0;
    border: 1px solid #d2d2d7;
	text-overflow: ellipsis;
	border-radius: 12px;
	padding: 1.05882rem 0.94118rem 0;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	line-height: 1.5;
	width: 100%;
    height: 56px;
	margin-bottom: 14px;
	color: var(--text-dark);
	position: relative;
	touch-action: manipulation;
}

p-calendar.has-label input {
	padding-bottom: 0;
}

input[type="number"].no-steps::-webkit-outer-spin-button,
input[type="number"].no-steps::-webkit-inner-spin-button {
	-webkit-appearance: none;
 	margin: 0;
}

input[type="search"] {
	padding-bottom: .95rem!important;
	padding-left: 40px!important;
	background-color: var(--bg-light)!important;
	border-color: #d2d2d7!important;
	margin-bottom: 0!important;
}

.create-booking input[type="search"] {
	background-color: #fff!important;
}

input[type="search"]::placeholder {
	color: var(--text);
}

.form-cell-wrapper.table-controls select,
.form-cell-wrapper.miniature select {
	height: 30px;
    padding: 0 25px 0 10px;
    margin: 0;
    border-radius: 5px;
    border: 2px solid var(--nav-border);
}

.no-margin :is(input,select,textarea, ng-select) {
	margin: 0;
}

select.plain {
	border: none;
	outline: none;
	padding: 0;
	cursor: pointer;
	width: auto;
	height: auto;
	margin: unset;
	background: url(img/svg/chevron-down.svg) right center/25px no-repeat;
	padding-right: 25px;
}

select.plain:focus {
	box-shadow: none;
	border: none;
}

select:not(.with-label) {
	line-height: 1.2;
}

textarea {
	padding: 1.5em 0.94118rem 2em;
	min-height: 210px;
	max-width: 100%;
	resize: vertical;
	display: block;
}

.charCount {
	text-align: right;
	position: absolute;
	bottom: 0.75rem;
	font-size: 0.75em;
    line-height: 1.33337;
    color: var(--text-light);
	right: 1rem;
	user-select: none;
}

textarea.ng-invalid + .charCount {
	bottom: 3.456rem;
}

/* textarea.ng-invalid:not(.ng-untouched) {
	margin-bottom: 0;
} */

input[type="color"] {
	width: 56px;
	padding: 1px 3px;
}

input[type="color"]::-webkit-color-swatch {
	border: none;
	border-radius: 10px;
}

input[type="checkbox"],
input[type="radio"] {
	background-color: hsla(0,0%,100%,.8);
    margin: 0;
    border: 1px solid #d2d2d7;
	width: 25.59px;
	height: 25.59px;
	-webkit-appearance: none;
    -moz-appearance: none;
	appearance: none;
	display: block;
	border-radius: 5px;
	position: relative;
}

input[type="radio"] {
	border-radius: 100px;
}

input[type="checkbox"]:before,
input[type="checkbox"]:after,
input[type="radio"]:before {
	content: '';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: var(--notice);
	display: none;
	border-radius: 3px;
	position: absolute;
}

input[type="radio"]:before {
	border-radius: 100px;
	outline: 5px solid #fff;
	outline-offset: -5px;
}

input[type="checkbox"]:after {
	background: transparent url('img/svg/checkbox.svg') center center/25px no-repeat;
	display: block;
}

input[type="checkbox"]:not(:checked):after {
	background-image: none;
}

input[type="checkbox"]:checked:before,
input[type="radio"]:checked:before {
	display: block;
}

input[type="checkbox"]:checked {
	border-color: var(--notice);
}

input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value {
	text-align: left;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
	color: transparent;
	background: transparent;
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.form-cell-wrapper.range {
	display: flex;
	gap: 12px;
}

input[type="range"] {
	flex: 1;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
	margin-bottom: 0;
}

input:not(.hide-placeholder,[type="submit"],[type="checkbox"],[type="radio"],[type="time"],[type="color"],[type="number"],[type="range"]),
select,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
	padding-bottom: 0.95rem;
}

select.with-label {
	padding-bottom: 0;
}

select {
	padding-right: 1.35em;
}

input:not(.hide-placeholder,.with-label) + .form-textbox-label {
	display: none;
}

.form-textbox-label {
	position: absolute;
    pointer-events: none;
    transition-timing-function: ease-in;
    transition-duration: .125s;
    top: 1.05882rem;
    white-space: nowrap;
    overflow: hidden;
    max-width: calc(100% - 32px);
    left: 1rem;
    line-height: 1.5;
	user-select: none;
}

.field-messages,
.field-messages.no-cell-wrapper {
	font-size: 12px;
	font-weight: 500;
    margin-top: -5px;
	padding-bottom: 14px;
	line-height: 1.3em;
}

.field-messages.no-cell-wrapper {
	flex: 100%;
}

.no-margin .field-messages {
	margin-top: 14px;
}

/* .special-dropdown .field-messages {
	margin-top: 6px;
} */

.form-textbox-input:not(:placeholder-shown)~.form-textbox-label, 
.form-textbox-input:focus-within~.form-textbox-label, 
.form-textbox-input:focus~.form-textbox-label, 
.form-textbox-input:valid[required]~.form-textbox-label,
.special-dropdown.with-label .form-textbox-label,
.form-textbox-label.focus,
ng-select.has-label~.form-textbox-label {
	font-size: 0.75em;
    line-height: 1.33337;
	top: 0.58824rem;
	color: var(--text-light);
	z-index: 5;
}

ng-select.has-label~.form-textbox-label {
	z-index: 109;
}

input:not([type="submit"],[type="range"]):focus,
select:focus,
textarea:focus {
	box-shadow: 0 0 0 4px rgba(0,125,250,.6), inset 0 0 0 1000px #f2faff;
	border-color: #0071e3;
	outline: none;
}

/* FIELD WITH ACTIONS */

.field-with-actions {
	position: relative;
	/* z-index: 5; */
}

.field-with-actions input:is([type="text"],[type="tel"],[type="email"],[type="date"],[type="time"],[type="color"],[type="number"]),
.field-with-actions select,
.field-with-actions textarea {
	margin-bottom: 0;
}

.field-with-actions:not(:last-child) {
	margin-bottom: 8px;
}

.field-with-actions .form-cell-wrapper {
	flex: 1;
}

.field-with-actions .cell-group {
	width: 100%;
}

.field-with-actions .cell-group.related {
	row-gap: 7px;
}

.field-with-actions .actions,
table.notes .actions {
	width: 43px;
	flex: 1 0 43px;
	margin-left: 6px;
	display: flex;
	gap: 5px;
	justify-content: flex-start;
	align-items: center;
}

table.notes .actions {
	display: table-cell;
	padding-left: 6px;
	width: 49px;
	text-align: left;
}

.field-with-actions .select-container:before, 
.field-with-actions .select2-selection:before, 
.field-with-actions .date-container:before, 
.field-with-actions .time-container:before {
	margin-top: unset;
	transform: translateY(-50%);
}

/* ERRORS */

.form-textbox-input[aria-invalid="true"]:not(:focus),
select.mySelect[aria-invalid="true"] + .select2-container :is(.select2-selection--single,.select2-selection--multiple),
p-calendar.ng-invalid.ng-touched input:not(:focus) {
	border-color: var(--error);
	background-color: var(--error-pastel);
}

.form-textbox-input[aria-invalid="true"]:not(:placeholder-shown)~.form-textbox-label,
.form-textbox-input[aria-invalid="true"] + .form-textbox-label,
.field-messages.error,
p-calendar.ng-invalid.ng-touched + .form-textbox-label {
	color: var(--error);
}

.field-messages.error i {
	background-color: var(--error);
	mask-image: url('img/svg/error-solid.svg');
	-webkit-mask-image: url('img/svg/error-solid.svg');
}

/* DISABLED */

input:disabled,
.form-textbox-input:disabled,
input:is([type="checkbox"],[type="radio"]):disabled {
	background-color: var(--bg-light);
	color: var(--text-light);
}

input:is([type="checkbox"],[type="radio"]):checked:disabled:before {
	background-color: var(--text-light);
}

input:is([type="checkbox"],[type="radio"]):checked:disabled {
	border-color: #d2d2d7;
}

.form-textbox-input:disabled + .form-textbox-label,
input:is([type="checkbox"],[type="radio"]):disabled + label,
input:disabled::placeholder {
	color: var(--text-light);
}

.form-cell-wrapper.checkbox.toggle input[type="checkbox"]:disabled {
	background-color: #eee;
	box-shadow: inset 0px 0px 2px 0px rgba(0,0,0,0.1);
	cursor: not-allowed;
}

.form-cell-wrapper.checkbox.toggle input[type="checkbox"]:disabled:after {
	background-color: var(--bg-light);
	box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.05);
}

/* LAYOUTS */

.form-cell-wrapper.cell-x-small {
	max-width: 100px;
	flex: 1 0 100px;
}

.form-cell-wrapper.cell-small {
	max-width: 186px;
	flex: 1 0 186px;
}

.cell-group .form-cell-wrapper.cell-time {
	flex: 1 0 calc(50% - 14px);
}

.form-cell-wrapper.cell-medium {
	max-width: 300px;
	/* flex: 1 0 300px; */
	flex: 1;
}

.cell-group {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	column-gap: 14px;
}

.cell-group.related {
	column-gap: 7px;
}

.cell-group .form-cell-wrapper {
	flex: 1 0 176px;
}

.cell-group.with-actions .form-cell-wrapper {
	flex: 1 0 150px;
}

.cell-group.special-flex .form-cell-wrapper {
	flex: 1;
}

.form-group:not(:last-child) {
	border-bottom: 1px solid var(--nav-border);
	padding-bottom: 1em;
    margin-bottom: 1em;
}

.form-group .form-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
	user-select: none;
}

button {
	-webkit-appearance: none;
	appearance: none;
}

button.toggle {
	border: none;
	outline: none;
	text-indent: -999em;
	background: url('img/svg/chevron-down.svg') center center/25px no-repeat;
	width: 35px;
	height: 49.59px;
	position: absolute;
	top: 0;
	right: 0;
	border-radius: 0 5px 5px 0;
	border-left: 1px solid #fff;
	opacity: 1;
}

button.nav-toggle {
	text-indent: -999em;
	border-radius: 100px;
	width: 30px;
	height: 30px;
	border: 1px solid var(--nav-border);
	background: #fff url('img/svg/chevron-down.svg') center center/25px no-repeat;
	transform: rotate(90deg);
	position: absolute;
	top: 80px;
	right: -15px;
	overflow: hidden;
	z-index: 10;
	padding: 0;
}

button.toggle.close {
	width: 25px;
	height: 25px;
	position: relative;
	padding: 0;
	border-radius: 3px;
	background: transparent url('img/svg/close.svg') center center/30px no-repeat;
	border: none;
}

header.with-title button.toggle.close {
	position: absolute;
	top: 15px;
	left: 15px;
}

button.toggle:is(:hover,:active),
button.nav-toggle:is(:hover,:active) {
	background-color: var(--notice-pastel-hover);
	cursor: pointer;
}

button.toggle[aria-expanded="true"] {
	transform: scaleY(-1);
	background-color: var(--notice-pastel);
}

button.nav-toggle[aria-expanded="false"] {
	transform: rotate(-90deg);
}

/* IMAGE UPLOAD */

input[type="file"] {
	max-width: 300px;
}

#image-display {
	width: 100%;
	display: grid;
	gap: 15px;
	grid-template-columns: repeat(3, 1fr);
	position: relative;
	border-radius: 5px;
}

#image-display .image {
	border-radius: 5px;
	border: 1px solid var(--nav-border);
	overflow: hidden;
	position: relative;
}

#image-display .image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

#image-display .image span {
	position: absolute;
	top: 4px;
	right: 4px;
	cursor: pointer;
	font-size: 22px;
	color: white;
}

#image-display .image span:hover {
	opacity: 0.8;
}

#image-display .span--hidden{
	visibility: hidden;
}

/* AVATAR UPLOAD */

.upload-avatar {
	margin-bottom: 24px;
}

.upload-avatar .input-container {
	width: 100px;
	height: 100px;
	position: relative;
	border-radius: 100px;
}

.upload-avatar img {
	border-radius: 100px
}

.upload-avatar .input-container:before {
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 200px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: transparent;
    z-index: 2;
}

.upload-avatar .input-container.no-image {
	background: linear-gradient(to bottom,  rgba(165,171,185,1) 0%,rgba(133,137,148,1) 100%);
}

.no-image img {
	display: none;
}

.upload-avatar .input-container.no-image:after {
	content: '';
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 200px;
	mask-image:url('img/svg/line/system-regular-123-camera.svg');
	mask-position: center top 12px;
	mask-size: 70%;
	mask-repeat: no-repeat;
	-webkit-mask-image:url('img/svg/line/system-regular-123-camera.svg');
	-webkit-mask-position: center top 12px;
	-webkit-mask-size: 70%;
	-webkit-mask-repeat: no-repeat;
	background-color: #fff;
}

.upload-avatar input[type="file"],
#add-attachment {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	padding: 0;
	z-index: 10;
	border-radius: 100px;
	cursor: pointer;
}

/* BADGE PICKER */

.badge-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mood-check {
	position: relative;
	display: inline-block;
}

.mood-check input[type="checkbox"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 100px;
	background: transparent;
	border: none;
	cursor: pointer;
}

.mood-check .label {
	border-radius: 100px;
	background: transparent;
	padding: 1px 7px;
	border: 1px solid #d2d2d7;
}

.mood-check input[type="checkbox"]:after,
.mood-check input[type="checkbox"]:checked:before {
	display: none;
}

.mood-check input[type="checkbox"]:checked + .label {
	background-color: var(--notice);
	border-color: var(--notice);
	color: #fff;
}

.mood-check input[type="checkbox"]:not([type="submit"],[type="range"]):focus {
	box-shadow: none;
}

/* PROGRESS BAR */

.progress-bar {
	width: 100%;
    display: flex;
    height: 10px;
    background: var(--bg-light);
    border-radius: 30px;
}

.progress-bar .percentage {
	background: var(--notice);
    flex: 0 0 20%;
    border-radius: 30px;
}
.progress-bar .percentage[data-percentage="25"] {
    flex: 0 0 40%;
}
.progress-bar .percentage[data-percentage="50"] {
    flex: 0 0 60%;
}
.progress-bar .percentage[data-percentage="75"] {
    flex: 0 0 80%;
}
.progress-bar .percentage[data-percentage="100"] {
    flex: 0 0 100%;
}

.section-option.vertical .progress-bar {
	margin: 1em 0;
}

@media only screen and (max-width: 666px) {
	input:is([type="text"],[type="tel"],[type="email"],[type="date"],[type="time"],[type="color"],[type="number"],[type="search"],[type="password"]),
	select,
	.ng-select.ng-select-single .ng-select-container {
		height: 60px;
	}
	input[type="color"] {
		width: 60px;
	}
	.form-cell-wrapper.cell-medium.search-container {
		max-width: 100%;
	}
	.field-messages i {
		margin-top: 1px;
	}

	.upload-avatar .input-container {
		width: 150px;
		height: 150px;
	}

	.upload-avatar .input-container.no-image:after {
		mask-position: center top 20px;
		-webkit-mask-position: center top 20px;
	}
	.date-container.angular-fix:before {
		top: 17.5px;
	}

	.alert-card ul {
		padding-left: 0;
	}
	
	button.dot,
	span.dot {
		width: 27px;
		max-width: 27px;
		height: 27px;
	}

	.prices .actions.single-action {
		width: 27px;
	}

	.dot.edit:before {
		mask-size: 30px;
		-webkit-mask-size: 30px;
	}

	.dot.cancel:before {
		mask-size: 33px;
		-webkit-mask-size: 33px;
	}

	.field-with-actions .actions, 
	table.notes .actions {
		width: 59px;
		flex: 1 0 59px;
	}
}

@media only screen and (max-width: 478px) {

	.modal-medium .form-cell-wrapper.cell-small {
		max-width: 100%;
	}

	#image-display {
		grid-template-columns: repeat(2, 1fr);
	}

}

@media only screen and (max-width: 447px) {
	#changebooking-group .field-with-actions:not(:last-child) {
		margin-bottom: 1em;
	}
}

@media only screen and (max-width: 430px) {
	.cell-group.with-actions .form-cell-wrapper {
		flex: 1 0 180px;
	}
}

@supports (-webkit-touch-callout: none) {
	input[type="color"]::-webkit-color-swatch {
		padding: 3px;
	}
}

/*------------------------------------*\
    NG SELECT CONTAINER
\*------------------------------------*/

.ng-select.hide-clear .ng-clear-wrapper {
	display: none;
}

.ng-select {
	/* z-index: 6; */
	margin-bottom: 14px;
}

ng-select.has-label .ng-value-container,
.select2-selection__rendered.ng-star-inserted {
	align-self: flex-end;
    padding-bottom: 6px;
}

.select2-selection__rendered.ng-star-inserted {
	padding: 0 1.5rem 6px 0.94118rem!important;
	line-height: 1.6!important;
}

.ng-select .ng-arrow-wrapper {
	background: url(img/svg/chevron-down.svg) right center / 25px no-repeat;
    text-indent: -999em;
}

.ng-select .ng-select-container,
.select2-selection.select2-selection--single {
	border-radius: 12px!important;
	border-color: #d2d2d7!important;
	min-height: 56px;
}

.select2-selection.select2-selection--single {
	padding: 0;
	margin-bottom: 0!important;
}

.select2-container--open .select2-selection.select2-selection--single,
.ng-select.ng-select-opened.ng-select-bottom .ng-select-container {
	border-radius: 12px 12px 0 0!important;
}

.ng-select.ng-select-opened.ng-select-top .ng-select-container {
	border-radius: 0 0 12px 12px!important;
}

.ng-select .ng-select-container:hover {
	box-shadow: none;
}

.ng-select.ng-select-opened > .ng-select-container {
	border-color: #d2d2d7;
}

.ng-select.ng-select-multiple .ng-select-container .ng-value-container {
	gap: 5px;
}

.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input,
.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input,
.select2-selection__arrow.ng-star-inserted {
	display: none!important;
}

.ng-select .ng-select-container .ng-value-container {
	padding-left: 0.94118rem;
}

.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
	background-color: var(--notice);
    border: 1px solid #005cb9;
    border-radius: 4px;
    display: inline-block;
    padding: 0;
    color: #fff;
	margin: 0;
}

.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left {
	border-right: 1px solid #005cb9;
	border-radius: 3px 0 0 3px;
}

.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover {
	background-color: #005cb9;
}

.ng-select.ng-select-multiple .ng-select-container .ng-value-container {
	padding: 2em .94118rem 0.875em;
}

.ng-dropdown-panel.ng-select-bottom,
.ng-dropdown-panel.ng-select-top {
	background-color: #fff;
    outline: 4px solid #61adf9;
    border: 1px solid #0071e3;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.ng-dropdown-panel.ng-select-top {
	border-radius: 4px 4px 0 0;
}

.ng-dropdown-panel.ng-select-bottom {
	border-radius: 0 0 4px 4px;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup,
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child {
	padding: 8px 10px;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup {
	color: var(--text-dark);
	font-weight: normal;
}

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected:hover,
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked,
.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,
.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected:hover,
.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked {
	color: var(--text-dark);
	background-color: var(--notice-pastel-hover);
}

@media only screen and (max-width: 870px) {

	#select-calendar.ng-select.ng-select-multiple .ng-select-container {
		border-radius: 6px!important;
	}

}

/*------------------------------------*\
    DASH LAYOUTS
\*------------------------------------*/

.panel-content {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

aside.panel-sidebar {
	width: 200px;
}

:is(#post-service, #post-package, #post-holidays, #post-reporting) aside.panel-sidebar {
	width: 500px;
}

:is(#post-requests) aside.panel-sidebar {
	width: 320px;
}

#post-service aside.panel-sidebar.with-tabular-nav,
#post-package aside.panel-sidebar.with-tabular-nav {
	width: auto;
}

article.stacked aside.panel-sidebar {
	width: auto;
}

article.stacked .panel-content.column aside.panel-sidebar {
	margin-right: auto;
}

section.panel-main {
	flex: 1 0 350px;
	max-width: 800px;
	overflow-x: visible;
}

section.panel-main.large {
	max-width: unset;
}

.panel-content.column section.panel-main.stacked {
	flex: 1;
	/* max-height: calc(100vh - 236px); */
	/* max-height: calc(100vh - 160.41px); */
	max-height: calc(100vh - 144.41px);
	max-width: 100%;
}

section.panel-main.stacked {
	max-width: unset;
	flex: 100%;
}

section.panel-main.stacked.flex .dash-section {
	flex: 1;
	max-width: 50%;
}

section.panel-main.stacked.flex.with-client-details .dash-section {
	max-width: 33.33%;
}

/* BLOCKS */

.panel-controls.floating {
	position: fixed;
	bottom: 2em;
	right: 2em;
	z-index: 100;
	display: flex;
    flex-direction: column;
    gap: 10px;
}

.dash-section {
	border: 1px solid var(--nav-border);
	background: #fff;
	border-radius: 8px;
	margin-bottom: 24px;
}

.dash-section.no-head img.add-on-hero {
	border-radius: 7px 7px 0 0;
}

.panel-controls.floating + .dash-section,
.panel-controls.floating + app-box-with-title .dash-section {
	margin-bottom: 3em;
}

.section-head {
	padding: 15px 24px;
	border-bottom: 1px solid var(--nav-border);
	border-radius: 8px 8px 0 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.section-head.has-actions {
	padding: 8.975px 8.975px 8.975px 24px;
}

.dash-section.highlight .section-head i {
	background-color: var(--notice);
}

.dash-section.highlight.alert .section-head i {
	background-color: var(--alert);
}

.dash-section.highlight.warning .section-head i {
	background-color: var(--error);
}

.dash-section.highlight.success .section-head i {
	background-color: var(--success);
}

.dash-section.pro .section-head i {
	background-color: var(--secondary);
}

.section-head :is(h3,h4) {
	display: flex;
	align-items: center;
	user-select: none;
}

.section-head :is(h3,h4).selectable {
	user-select: initial;
}

.section-head :is(h3,h4) i,
ul.profile-completion i {
	width: 25px;
	height: 25px;
	background-color: var(--text);
	margin-right: 5px;
	display: inline-block;
}

ul.profile-completion i {
	margin: 0;
}

.no-data {
	color: var(--text-light);
}

.no-data i {
	width: 40px;
	height: 40px;
	background-color: var(--text-light);
	display: inline-block;
}

.section-footer:is(:empty) {
	display: none;
}

.section-footer,
.section-footer .table-controls {
	padding: 15px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px 25px;
	flex-wrap: wrap;
	user-select: none;
}

.section-footer .table-controls {
	padding: 0;
	width: 100%;
}

.section-footer.justify-center {
	justify-content: center;
}

.dash-section.has-table,
#post-service .panel-content,
#post-package .panel-content {
	container-type: inline-size;
}

.section-footer.table-controls .controls-right,
.section-footer .table-controls .controls-right {
	display: flex;
	gap: 25px;
}

.section-footer.table-controls .controls-left p,
.section-footer .table-controls .controls-left p {
	margin: 0;
}

.section-footer.table-controls .controls-left,
.section-footer .table-controls .controls-left {
	flex: 1;
	justify-content: space-between;
}

i.finance {
	mask-image: url('img/svg/payments.svg');
	-webkit-mask-image: url('img/svg/payments.svg');
}

i.cardreader,
:is(.modal-card,.p-dialog) i.icon-cardreader {
	mask-image: url('img/svg/line/system-regular-38-credit-card.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-38-credit-card.svg');
}

i.reviews,
.reviews i {
	mask-image: url('img/svg/line/system-regular-95-star.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-95-star.svg');
}

i.graph {
	mask-image: url('img/svg/line/system-regular-10-analytics.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-10-analytics.svg');
}

i.pie {
	mask-image: url('img/svg/line/system-regular-43-pie-chart-diagram.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-43-pie-chart-diagram.svg');
}

i.help {
	mask-image: url('img/svg/line/system-outline-158-support.svg');
	-webkit-mask-image: url('img/svg/line/system-outline-158-support.svg');
}

i.link {
	mask-image: url('img/svg/line/system-regular-98-link.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-98-link.svg');
}

i.details,
.details i {
	mask-image: url('img/svg/receipt.svg');
	-webkit-mask-image: url('img/svg/receipt.svg');
}

i.account-flags {
	mask-image: url('img/svg/line/system-regular-100-flag.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-100-flag.svg');
}

i.photo {
	mask-image: url('img/svg/line/system-regular-72-photo.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-72-photo.svg');
}

i.time,
.is-break .avatar.pet.no-image:after,
:is(.modal-card,.p-dialog) i.icon-time {
	mask-image: url('img/svg/line/system-regular-7-alarm.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-7-alarm.svg');
}

i.holiday {
	mask-image: url('img/svg/line/system-regular-86-pin.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-86-pin.svg');
}

i.terms,
.terms i {
	mask-image: url('img/svg/line/system-regular-76-newspaper.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-76-newspaper.svg');
}

i.security {
	mask-image: url('img/svg/line/system-regular-90-lock-closed.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-90-lock-closed.svg');
}

i.closed,
.closed i {
	mask-image: url('img/svg/closed.svg');
	-webkit-mask-image: url('img/svg/closed.svg');
}

i.settings {
	mask-image: url('img/svg/line/system-regular-109-slider-toggle-settings.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-109-slider-toggle-settings.svg');
}

i.setup {
	mask-image: url('img/svg/line/system-regular-22-build.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-22-build.svg');
}

i.chat {
	mask-image: url('img/svg/line/system-regular-47-chat.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-47-chat.svg');
}

i.deposit {
	mask-image: url('img/svg/line/system-regular-115-money-cash.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-115-money-cash.svg');
}

i.contacts {
	mask-image: url('img/svg/line/system-regular-96-groups.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-96-groups.svg');
}

i.vets {
	mask-image: url('img/svg/line/system-regular-172-masks.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-172-masks.svg');
}

i.services,
.services i,
:is(.modal-card,.p-dialog) i.icon-services {
	mask-image: url('img/svg/nav/system-regular-40-add-card.svg');
	-webkit-mask-image: url('img/svg/nav/system-regular-40-add-card.svg');
}

i.build,
.build i {
	mask-image: url('img/svg/line/system-regular-27-view-4.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-27-view-4.svg');
}

i.account,
.account i {
	mask-image: url('img/svg/nav/system-regular-63-settings-cog.svg');
	-webkit-mask-image: url('img/svg/nav/system-regular-63-settings-cog.svg');
}

i.mobile,
.mobile i {
	mask-image: url('img/svg/line/system-regular-118-phone-iphone.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-118-phone-iphone.svg');
}

i.team {
	mask-image: url('img/svg/line/system-regular-96-groups.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-96-groups.svg');
}

.no-data i {
	mask-image: url('img/svg/line/system-regular-9-inbox.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-9-inbox.svg');
}

i.clients,
i.pets,
:is(.modal-card,.p-dialog) i.icon-clients {
	mask-image: url('img/svg/line/system-regular-88-pets.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-88-pets.svg');
}

i.sort {
	mask-image: url('img/svg/sort.svg');
	-webkit-mask-image: url('img/svg/sort.svg');
}

i.user,
.is-client .avatar.pet.no-image:after {
	mask-image: url('img/svg/line/system-regular-8-account.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-8-account.svg');
}

i.subscription {
	mask-image: url('img/svg/line/system-regular-70-ticket.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-70-ticket.svg');
}

i.downgrade {
	mask-image: url('img/svg/line/system-regular-163-upgrade.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-163-upgrade.svg');
	transform: rotateX(180deg);
}

i.salon {
	mask-image: url('img/svg/line/system-regular-153-store.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-153-store.svg');
}

i.bookings,
.is-booking .avatar.pet.no-image:after {
	mask-image: url('img/svg/line/system-regular-23-calendar.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-23-calendar.svg');
}

i.thumbs-up {
	mask-image: url('img/svg/line/system-regular-124-thumb-up.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-124-thumb-up.svg');
}

i.cardreader {
    mask-image: url('img/svg/line/system-regular-38-credit-card.svg');
    -webkit-mask-image: url('img/svg/line/system-regular-38-credit-card.svg');
}

/* Body elements */

.section-body {
	padding: 15px 24px;
}

.section-body.user-list,
#post-team-list .section-body {
	padding: 0;
}

#post-team-list .section-body .alert-card {
	margin: 0 24px 15px;
}

.section-body.user-list.chat {
	overflow-y: scroll;
}

.section-body.no-padding {
	padding: 0;
}

.panel-buttons {
	display: flex;
	align-items: center;
	gap: 5px;
}

.action-nest {
	position: relative;
	/* z-index: 50; */
	user-select: none;
	margin-left: auto;
}

.nest {
	padding: 1em;
    border-radius: 12px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	display: none;
	min-width: 200px;
	position: absolute;
	right: 0;
	background: #fff;
}

table tr:not(:first-child) .nest, table tr:only-child .nest {
	bottom: 0;
}

table .nest {
	position: absolute;
	right: 24px;
}

.e-toolbar .e-toolbar-pop {
	padding: 1em;
    border-radius: 12px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	min-width: 200px;
	max-width: 200px;
	position: absolute;
	right: 0;
	background: #fff;
}

.nest.open {
	display: flex;
}

.nest.vertical {
	flex-direction: column;
	z-index: 10;
}

.nest.vertical.above {
	bottom: 50px;
}

.section-body h3,
.section-option.checkbox label {
	margin-bottom: 8px;
	display: flex;
	align-items: center;
}

.section-body h3:has(+ h3) {
	margin: 0;
}

.section-option.checkbox input[type="checkbox"] {
	align-self: center;
}

.section-body.user-list h3 {
	margin-bottom: 0;
}

.section-body p {
	margin-top: 0;
}

.section-body p:last-child {
	margin-bottom: 0;
}

.section-option.can-have-notice {
	display: block;
}

.section-option.can-have-notice .alert-card {
	margin-top: 14px;
}

.section-option,
.section-option .toggle-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
}

.user-list .section-option,
.client-list .section-option {
	flex-wrap: nowrap;
	padding: 14px 24px;
	margin: 0;
	user-select: none;
	min-height: 93.46px;
}

.user-list .section-option:last-child,
.client-list .section-option:last-child {
	padding-bottom: 14px!important;
}

.client-list .section-option {
	min-height: unset;
}

.user-list .section-option:hover,
.client-list .section-option:hover {
	background-color: var(--bg-light);
	cursor: pointer;
}

.section-option.checkbox {
	flex-wrap: nowrap;
}

.section-option.checkbox.wrap {
	flex-wrap: wrap;
}

.option-row {
	display: flex;
	gap: 12px 14px;
}

.matrix-table .option-row {
	width: 100%;
}

.option-row .cell-group {
	flex: 1;
	flex-wrap: nowrap;
}

.matrix-table {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.matrix-table p {
	margin: 0;
}

.matrix-table .ng-dropdown-panel {
	z-index: 1051;
}

.section-option.hours .option-row .form-cell-wrapper.checkbox.toggle,
.matrix-table .option-row .form-cell-wrapper.checkbox.toggle {
	align-items: center;
	flex: 1 0 90px;
	max-width: 90px;
}

.option-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1 0 280px;
	user-select: none;
}

.section-body.user-list .option-text {
	flex: 1;
	justify-content: flex-start;
}

.section-body.user-list .option-text p {
	line-height: 1.5;
	position: relative;
}

.section-body.user-list .option-text.sent p,
.section-body.user-list .option-text.received p {
	text-indent: 25px;
	display: block!important;
	word-break: break-word;
}

i.message-status {
	position: absolute;
    width: 22px;
    height: 22px;
    background: var(--text-light);
	top: 0;
	left: 0;
	mask-image: url('img/svg/message-status.svg');
	-webkit-mask-image: url('img/svg/message-status.svg');
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-position: center top -1.5px;
	-webkit-mask-position: center top -1.5px;
}

.timestamp i.message-status {
	display: block;
	position: static;
	background-color: #9cb494;
}

i.message-status.read,
.timestamp i.message-status.read {
	background-color: var(--notice);
}

.section-body.user-list .option-text h3 {
	line-height: 1.2;
}

.option-row .row-text {
	display: flex;
	align-items: center;
	flex: 1;
    background: var(--bg-light) url(img/svg/closed.svg) left 0.94118rem center/25px no-repeat;
    border-radius: 12px;
    padding: 0 0.94118rem 0 3em;
	user-select: none;
}

.matrix-table .option-row .row-text {
	background-image: url(img/svg/denied-grey.svg);
}

.section-option.hours .option-row .row-text,
.matrix-table .option-row .row-text {
	min-height: 56px;
}

.section-option {
	padding-bottom: 14px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--nav-border);
	position: relative;
}

.section-option:last-child,
.checkbox.toggle:last-child {
	padding-bottom: 0!important;
    border-bottom: none!important;
}

.section-option.vertical {
	flex-direction: column;
}

.section-option.vertical .option-text {
	margin-bottom: 15px;
	flex: 1 0 auto;
}

.section-option.vertical .button-container + p {
	margin-top: 1em;
}

.section-option:not(.vertical) .form-cell-wrapper {
	display: flex;
	align-items: center;
}

/* Footer elements */


/* Highlights */

.dash-section.highlight,
.dash-section.highlight .section-head {
	border-color: var(--notice);
}

.dash-section.highlight.alert,
.dash-section.highlight.alert .section-head {
	border-color: var(--alert);
}

.dash-section.highlight.warning,
.dash-section.highlight.warning .section-head {
	border-color: var(--error);
}

.dash-section.highlight.success,
.dash-section.highlight.success .section-head {
	border-color: var(--success);
}

.dash-section.pro,
.dash-section.pro .section-head {
	border-color: var(--secondary);
}

.dash-section.highlight .section-head {
	background-color: var(--notice-pastel);
}

.dash-section.highlight.alert .section-head {
	background-color: var(--alert-pastel);
}

.dash-section.highlight.warning .section-head {
	background-color: var(--error-pastel);
}

.dash-section.highlight.success .section-head {
	background-color: var(--success-pastel);
}

.dash-section.pro .section-head {
	background-color: var(--secondary-pastel);
}


/* Card Containers */

.layout-switcher {
	border-bottom: 1px solid #f2f4f8;
	margin-bottom: 14px;
}

.card-container {
	display: flex;
	flex-wrap: wrap;
	gap: 0 2.5%;
}

.card-container.thirds .card {
	width: calc(33.33% - 1em);
	flex: 1 0 300px;
}

.card .card-title {
    padding: 1em;
    border-radius: 12px 12px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
	border-bottom: 1px solid #f2f4f8;
	margin-bottom: 1em;
}

.card.padding-inline-none :is(.card-title, .inner) {
	padding-inline: 0;
}

.card.with-inner-card .card-title {
	border: none;
	margin-bottom: 0;
}

.card .inner {
    padding: 0 1em 1em;
	border-radius: 0 0 12px 12px;
}

.card.with-inner-card .inner {
	padding: 1em;
	border-radius: 12px;
	background-color: var(--bg-light);
}

.payment-form {
	margin-top: 1em;
}

/* CHAT */

.user-list.chat .section-option .details {
	position: relative;
}

.user-list.chat .section-option.unread .details {
	color: var(--notice);
	font-weight: 600;
}

.user-list.chat .section-option .details .badge {
	position: static;
	align-self: self-end;
	margin-right: -2px;
	background-color: var(--notice);
}

.user-list.chat .section-option:hover .details .badge {
	border-color: var(--bg-light);
}

.user-list.chat p.from-salon {
	position: relative;
	padding-left: 25px;
	overflow: visible;
}

.user-list.chat p.from-salon:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 22px;
	height: 14px;
	background-color: var(--text-light);
	mask-image: url(img/svg/read-receipt.svg);
	-webkit-mask-image: url(img/svg/read-receipt.svg);
	mask-size: 35px;
	-webkit-mask-size: 35px;
}

.dash-section.chat-list {
	border-radius: 8px 0 0 8px;
	display: flex;
	flex-direction: column;
}

.dash-section.chat-window,
.dash-section.chat-list {
	margin-bottom: 0;
}

.dash-section.chat-window {
	border-radius: 0 8px 8px 0;
	border-left: none;
	background-color: #eae5df;
	background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23f1edea' fill-opacity='1' fill-rule='evenodd'/%3E%3C/svg%3E");
	display: flex;
	flex-direction: column;
}

.chat-window .chat-log {
	flex: 1;
	overflow-y: scroll;
	padding: 24px;
}

.chat-log .alert-card,
.with-search + .modal-inner .alert-card {
	flex: unset;
}

.chat-window .section-head {
	padding: 14px 24px;
	border-radius: 0 8px 0 0;
	background-color: hsl(25.71deg 20% 93.14%);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
	user-select: none;
}

.chat-window .chat-controls {
	min-height: 61px;
	background: var(--bg-light);
	border-top: 1px solid var(--nav-border);
	border-radius: 0 0 8px 0;
	padding: 15px 24px;
	display: flex;
	gap: 7px;
}

.chat-window .message {
	display: flex;
	user-select: none;
}

.chat-window .message .inner {
	color: var(--text-dark);
	font-size: 0.875em;
	border-radius: 12px;
	display: flex;
	gap: 14px;
	padding: 5px 10px;
	position: relative;
	box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.1);
	line-height: 1.4;
}

.chat-window .message .inner p,
.message .timestamp {
	margin: 0;
	position: relative;
	z-index: 5;
}

.chat-window .message .inner p:after {
	content: '';
	display: inline-block;
	width: 115px;
}

.message .timestamp {
	display: flex;
	position: absolute;
    right: 0;
    bottom: -5px;
    font-size: 0.75em;
    font-weight: 500;
    align-items: center;
    gap: 2px;
    color: #7f8b7f;
	height: 22px;
}

.chat-window .message .tail {
	width: 19.2px;
    height: 19px;
    position: absolute;
    bottom: 0;
}

.chat-window .message.sent {
	justify-content: flex-end;
	margin-bottom: 4px;
}

.message.received + .message.sent {
	margin-top: 1.5em;
}

.chat-window .message.sent .tail {
	right: -4px;
    fill: #e7fed8;
}

.chat-window .message.sent .inner {
	background-color: #e7fed8;
	margin-left: 20%;
}

.chat-window .message.sent .inner p span,
.chat-window .message.received .inner p span {
	word-break: break-word;
}

.message.sent + .message.received {
	margin-top: 1.5em;
}

.chat-window .message.received .tail {
	left: -4px;
    fill: #fff;
    transform: rotateY(-180deg);
}

.chat-window .message.received {
	justify-content: flex-start;
	margin-bottom: 4px;
}

.chat-window .message.received .inner {
	background-color: #fff;
	margin-right: 20%;
}

.input-container.attachment {
	width: 42.4px;
    height: 42.4px;
    position: relative;
    border-radius: 100px;
	background-color: var(--text);
	mask-image: url('img/svg/line/system-regular-75-attachment.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-75-attachment.svg');
	mask-size: 25px;
	-webkit-mask-size: 25px;
	cursor: pointer;
	align-self: flex-end;
	overflow: hidden;
}

.input-container.attachment:active {
	transform: scale(0.95);
}

.chat-controls span.textarea,
#enterMessage {
	flex: 1;
	max-width: calc(100% - 98.8px);
	max-height: 193.97px;
	overflow-y: scroll;
	background: #fff;
	border: 1px solid var(--nav-border);
	border-radius: 20px;
	padding: 12px 15px;
	font-size: 0.875em;
	color: var(--text-dark);
	outline: none;
	line-height: 1.2;
	margin-bottom: 0;
	height: auto;
}

#enterMessage:focus {
	box-shadow: none;
}

.with-client-details .client-details {
	margin: 0 0 0 24px;
}

.chat-window .message img {
	margin-top: 5px;
	border-radius: 9px;
	max-width: 320px;
	background: rgba(0,0,0,0.1);
}

/* Reports */

.report-grid {
	display: flex;
	gap: 24px;
	flex-direction: column;
}

.report-grid .dash-section {
	margin-bottom: 0;
}

.grid-section:not(.vertical) .dash-section {
	flex: 1 0 350px;
}

.report-grid .grid-section {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

.report-grid .grid-section.vertical {
	flex-direction: column;
}

#post-requests section.panel-main {
	max-width: unset;
}

@media only screen and (max-width: 1338px) {
	body:not(.collapse) :is(#post-service, #post-package, #post-holidays, #post-reporting) aside.panel-sidebar,
	body:not(.collapse) main.services-layout aside.panel-sidebar {
		flex: 1 0 350px;
	}	
}

@media only screen and (max-width: 1168px) {
	body.collapse :is(#post-service, #post-package, #post-holidays, #post-reporting) aside.panel-sidebar,
	body.collapse main.services-layout aside.panel-sidebar {
		flex: 1 0 350px;
	}	
}

@media only screen and (max-width: 986px) {
	.create-booking .card-container {
		gap: 0;
	}
	.card-container {
		gap: 10px;
	}
	.card-container.thirds .card {
		flex: 1 0 100%;
	}
	.card-container.thirds .card:not(:last-child),
	.card-container.column .card:not(:last-child) {
		box-shadow: 0px 10px 0px 0px rgba(242,244,248,1);
		border-bottom: 1px solid var(--nav-border);
	}
}

/* @media only screen and (max-width: 887px) {

	body:not(.collapse) aside.panel-sidebar {
		order: 2;
	}

} */

@media only screen and (max-width: 717px) {

	body.collapse aside.panel-sidebar {
		order: 2;
	}

}

@media only screen and (max-width: 666px) {
	
	
	:is(#post-requests) .dash-section {
		margin-bottom: 0;
	}

	:is(#post-requests) aside.panel-sidebar {
		order: 2;
	}

	section.panel-main {
		flex: 1 0 320px;
	}
	
	#post-team-list .section-body .alert-card {
		margin: 0 15px 15px;
	}
	
	.chat-window .message .inner p:after {
		width: 125px;
	}
	
	.dash-section.chat-window,
	.dash-section.chat-list.mobile-list.hide-list,
	.dash-section.chat-window.mobile-list.hide-chat {
		display: none;
	}

	.dash-section.chat-window.mobile-list.show-chat {
		display: flex;
		position: fixed;
		top: 53px;
		border: none;
		height: calc(100vh - 53px);
		z-index: 1101;
		width: 100%;
	}

	.chat-window .chat-controls,
	.chat-window .section-head {
		border-radius: 0;
	}

	section.panel-main.stacked.flex .dash-section {
		max-width: 100%;
	}
	
	.chat .option-text h3 {
		margin-bottom: 3px;
	}
	.chat .option-text p {
		line-height: 1.3;
	}
	
	/* .panel-content {
		flex-direction: column;
	} */
	#post-user aside.panel-sidebar,
	#post-team aside.panel-sidebar,
	#post-messages aside.panel-sidebar,
	#post-service aside.panel-sidebar,
	#post-services aside.panel-sidebar,
	#post-package aside.panel-sidebar,
	#post-packages aside.panel-sidebar,
	#post-reporting aside.panel-sidebar,
	section.panel-main {
		order: 1;
	}
	aside.panel-sidebar {
		width: 100%;
	}
	.section-option.hours .option-row .row-text,
	.matrix-table .option-row .row-text {
		min-height: 60px;
	}
	.dash-section.has-table .section-body {
		padding-bottom: 0;
	}
	.panel-controls.floating {
		right: 1em;
		bottom: calc(85.8px + 1em);
	}
	.panel-controls.floating + .dash-section {
		margin-bottom: 24px;
	}
	.section-body,
	.section-head,
	.section-footer {
		padding: 15px;
	}
	#post-service aside.panel-sidebar.with-tabular-nav,
	#post-package aside.panel-sidebar.with-tabular-nav,
	.panel-sidebar.with-tabular-nav {
		display: flex;
		justify-content: center;
		width: 100%;
	}
	#post-messages .panel-content,
	#post-services .panel-content,
	#post-packages .panel-content {
		justify-content: center;
	}
	.user-list .section-option {
		min-height: 96.69px;
	}
	.chat-window .section-head {
		padding: 14.75px 24px;
	}
	.client-card footer.main .action-nest > .secondary-action {
		width: 47.7px;
		height: 47.7px;
	}
	.nest.vertical.above {
		bottom: 70px;
	}

	.section-head.has-actions {
		padding-left: 15px;
	}

	.dash-section.chat-list {
		border: none;
	}

	main#chat {
		padding: 53px 0 85.8px;
	}

	.panel-content.column section.panel-main.stacked {
		max-height: calc(100vh - 138.8px);
	}

	.panel-controls.floating + app-box-with-title .dash-section {
		margin-bottom: 24px;
	}
}

@media only screen and (max-width: 480px) {

	.chat-window .chat-controls {
		padding: 10px;
	}

}

@media only screen and (max-width: 380px) {
	.section-option.hours .option-row .form-cell-wrapper.checkbox.toggle,
	.matrix-table .option-row .form-cell-wrapper.checkbox.toggle {
		flex-direction: column-reverse;
		align-items: flex-start;
		justify-content: center;
		max-width: 55px;
	}
	.section-option.hours .option-row .form-cell-wrapper.checkbox.toggle input[type="checkbox"],
	.matrix-table .option-row .form-cell-wrapper.checkbox.toggle input[type="checkbox"] {
		flex: unset;
	}
	.section-option.hours .option-row .cell-group .form-cell-wrapper,
	.matrix-table .option-row .cell-group .form-cell-wrapper {
		flex: 1 0 100px;
	}
}

@media only screen and (max-width: 375px) {
	.panel-controls.floating {
		bottom: calc(64px + 1em);
	}
	main#chat {
		padding-bottom: 64px;
	}
	.panel-content.column section.panel-main.stacked {
        max-height: calc(100vh - 117px);
    }
}

@container (max-width: 723px) {
	#post-service aside.panel-sidebar:not(.with-tabular-nav),
	#post-package aside.panel-sidebar:not(.with-tabular-nav) {
		width:100%;
	}
	#post-service aside.panel-sidebar:not(.with-tabular-nav) .dash-section,
	#post-package aside.panel-sidebar:not(.with-tabular-nav) .dash-section {
		margin-bottom: 0;
	}
}

@container (max-width: 637px) {
  .section-footer.table-controls,
  .section-footer.table-controls .controls,
  .section-footer .table-controls,
  .section-footer .table-controls .controls {
    flex-direction: column;
	gap: 15px;
  }
  .section-footer.table-controls .controls-left,
  .section-footer .table-controls .controls-left {
	width: 100%;
  }
}

/*------------------------------------*\
    TABS
\*------------------------------------*/

.tab-content {
	display: none;
}

.tabs {
	box-shadow: inset 0px -2px 0px 0px rgba(242,244,248,1);
	margin-bottom: 1em;
	user-select: none;
}

.tabs.flex {
	gap: 1.2em;
}

button.tab {
	border: none;
	border-bottom: 2px solid transparent;
	background: transparent;
	font-weight: 700;
	color: var(--text);
	outline: none;
	padding: 0 0 0.5em;
	cursor: pointer;
}

button.tab.active {
	color: var(--notice);
	border-color: var(--notice);
}

button.tab:not(.active):hover {
	border-color: var(--nav-border);
}

.card.pets.with-inner-card .inner {
	padding: 0;
}

/* .inner.receipt {
	border-radius: 0 0 12px 12px;
	background-color: var(--bg-light);
	padding-bottom: 2em;
	overflow: hidden;
} */

.inner.receipt {
	padding-inline: 0;
}

.inner.receipt ul {
	padding: 15px;
	background: var(--bg-light);
	position: relative;
 	z-index: 0;
	border-radius: 0 0 12px 12px;
}

.create-booking .inner.receipt ul {
	margin: 0 1em;
	border-radius: 12px;
}

.tabs.pets {
	margin: 0 0 14px;
	white-space: nowrap;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	padding: 0.5em;
	display: flex;
	border-radius: 12px;
}

.tab-pet, .tab-creator {
	background-color: #fff;
	border-radius: 5px;
	padding: 1em;
	border: 1px solid #fff;
	cursor: pointer;
	width: calc(25% - 1em);
	min-width: 150px;
	display: inline-block;
	margin: 4px;
	scroll-snap-align: none center;
	flex: 1 0 auto;
	position: relative;
	max-width: 25%;
	/* max-width: 238.03px;
	flex: 1 0 238.03px; */
}

.tab-creator {
	width: auto;
	max-width: unset;
	user-select: none;
	box-shadow: 0 0 0 0 rgba(0, 125, 250, .6), inset 0 0 0 0 #f2faff;
	transition: box-shadow 0.3s ease-in-out;
}

.tab-creator:is(:hover,:active) {
	box-shadow: 0 0 0 4px rgba(0, 125, 250, .6), inset 0 0 0 1000px #f2faff;
    border-color: #0071e3;
}

.tab-pet .ellipsis {
	max-width: 130px;
	width: 100%;
}

.has-special-prices {
	width: 25px;
	height: 25px;
	position: absolute;
	top: 5px;
	right: 5px;
	background-color: var(--notice);
	mask-image: url(img/svg/solid/system-regular-71-discount-coupon.svg);
	mask-position: center center;
	mask-repeat: no-repeat;
	mask-size: cover;
    -webkit-mask-image: url(img/svg/solid/system-regular-71-discount-coupon.svg);
	-webkit-mask-position: center center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: cover;
}

.flag.has-special-prices {
	position: relative;
	top: unset;
	right: unset;
	text-indent: -999em;
	padding: 0;
}

.tab-pet.active {
	box-shadow: 0 0 0 4px rgba(0,125,250,.6), inset 0 0 0 1000px #f2faff;
    border-color: #0071e3;
}

.tab-pet.is-deceased {
	filter: grayscale(100%);
}

/* .tab-pet.is-deceased:before {
	content: 'Deceased';
	background: #4b4b4b;
	color: #fff;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 3px 10px;
	font-size: 0.75em;
	position: absolute;
	top: 2.2em;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	border: 2px solid #fff;
} */

.tab-pet.is-deceased .avatar,
.tab-pet.is-deceased strong,
.tab-pet.is-deceased span,
.tab-pet.is-deceased .flags,
.tab-pet.is-deceased .has-special-prices,
.tab-pet.is-deceased .there-are-more {
	opacity: 0.3;
}

.tab-pet.active.is-deceased:before {
	border-color: #f9f9f9;
}

@media only screen and (max-width: 666px) {
	.tabs.pets {
		scroll-snap-type: x proximity;
	}
	.tab-pet.is-deceased:before {
		top: 2.5em;
	}
	.tabs.flex {
		gap: 0;
	}
	.tabs.flex button.tab {
		flex: 1;
	}
}

/*------------------------------------*\
    DETAILS
\*------------------------------------*/

.panel-main > details,
.panel-main app-account-management > details {
	margin-bottom: 24px;
}

.panel-main > details summary,
.panel-main app-account-management > details summary {
	padding-left: 24px;
}

.panel-main > details .inner,
.panel-main app-account-management > details .inner {
	padding: 0 24px 15px;
}

details {
	border-radius: 12px;
	background: var(--bg-light);
	margin-bottom: 1em;
}

.card-container.indent.mobile-noindent details {
	border-bottom: 1px solid #f2f4f8;
	border-radius: 0;
	margin-bottom: 0;
}

/* .card-container.indent.mobile-noindent details:last-child {
	border-bottom: none;
} */

details.light {
	background-color: #fff;
}

details.with-border {
	border: 1px solid var(--nav-border);
	border-radius: 8px;
}

details.with-border[open] summary {
	border-bottom: 1px solid var(--nav-border);
	border-radius: 8px 8px 0 0;
	margin-bottom: 15px;
}

details > summary {
	list-style: none;
	padding: 1em;
	padding-right: calc(2em + 25px);
	border-radius: 12px;
	cursor: pointer;
	outline: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	position: relative;
}

.create-booking .modal-sidebar details > summary {
	padding-top: calc(1em - 1.025px);
	padding-bottom: calc(1em - 1.025px);
}

details > summary::-webkit-details-marker {
	display: none;
}

details > summary:before {
	content: '';
	width: 25px;
	height: 25px;
	background: url(img/svg/chevron-down.svg) center center/25px no-repeat;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 1em;
}

details[open] > summary:before {
	transform: translateY(-50%) scaleY(-1);;
}

details .inner {
	padding: 0 1em 1em;
}

details .inner.payment-buttons {
	border-bottom: 5px solid var(--bg-light);
	margin-bottom: 1em;
}

.notes-container {
	max-height: 150px;
	overflow-y: scroll;
	position: relative;
}

.action-container {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	color: var(--text-dark);
	margin-top: 1em;
	padding-top: 1em;
	border-top: 1px solid var(--nav-border);
	flex: 1;
}

.form-group .action-container,
.card-title .action-container,
.cell-group .action-container {
	padding: 0;
	margin: 0;
	border: none;
}

.cell-group .action-container {
	margin-bottom: 14px;
	min-width: 19px;
}


@media only screen and (max-width: 666px) {

	details {
		margin-bottom: 14px;
	}

	.panel-main > details summary,
	.panel-main app-account-management > details summary {
		padding-left: 15px;
	}

	.panel-main > details .inner,
	.panel-main app-account-management > details .inner {
		padding: 0 15px 15px;
	}

}


/*------------------------------------*\
    TABLES
\*------------------------------------*/

.scrollable-table-container {
    overflow-x: scroll; /* Enables horizontal scrolling */
    max-width: 100%; /* Adjust this as needed */
	position: relative;
}

.scrollable-table-container.prompt table.default thead tr {
	border-bottom: 3px solid var(--notice);
	position: relative;
}

.scrollable-table-container.prompt table {
	margin-top: -25px;
}

.scrollable-table-container.prompt.spanish:before {
	content: '\003C  Deslizar \003E'
}

.scrollable-table-container.prompt:before {
	content: '\003C  swipe \003E';
    font-size: 0.65em;
    font-weight: 700;
    background: var(--notice);
    color: #fff;
    padding: 3px 6px 4px;
    border-radius: 100px;
    position: sticky;
    left: 12px;
    /* top: 67.5px; */
	top: 47px;
}

.scrollable-table-container.prompt th {
	padding-top: 15px;
	padding-bottom: 15px;
}

.scrollable-table-container.prompt tbody tr:first-child td {
	padding-top: 15px;
}

table:not(.e-schedule-table ) {
	width: 100%;
	border-collapse: collapse;
	min-width: 750px;
}

table .hyphen {
	display: block;
    line-height: 0.5;
    color: var(--text-light);
}

thead {
	text-align: left;
	color: var(--text-dark);
}

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

:is(th,td) {
	padding: 10px;
}

th .with-sort {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 5px;
	cursor: pointer;
}

th .with-sort i {
	width: 25px;
	height: 25px;
	background-color: var(--nav-border);
}

th .with-sort:hover,
th .with-sort:is(.ascending,.descending) {
	color: var(--notice);
}

th .with-sort:hover i {
	background-color: var(--notice);
}

th .with-sort.ascending i {
	background: linear-gradient(to top,  #d4dbea 50%,#007aff 50%);
}

th .with-sort.descending i {
	background: linear-gradient(to bottom,  #d4dbea 50%,#007aff 50%);
}

tr {
	border-bottom: 1px solid var(--nav-border);
}

tr:has(td[colspan="5"]) {
	border-bottom: none;
	pointer-events: none;
}

tr:has(td[colspan="5"]):hover {
	background-color: #fff;
}

table.default {
	color: var(--text-dark);
}

table.default thead th:first-child,
table.default tbody tr td:first-child {
	padding-left: 24px;
}

table.default thead th:last-child,
table.default tbody tr td:last-child {
	padding-right: 24px;
}

.all-clickable tr {
	cursor: pointer;
}

.all-clickable tr:hover {
	background-color: var(--bg-light);
}

.all-clickable tr.draft {
	background-color: var(--alert-pastel);
}

.all-clickable tr.group-title:hover,
.all-clickable tr.group-title {
	background-color: #fff;
	pointer-events: none;
}

.all-clickable tr:hover .avatar .app-detector {
	box-shadow: 0 0 0 2.5px rgba(242,244,248, 1);
}

/* TABLE CONTROLS */

.pagination {
    display: flex;
    align-items: center;
    font-weight: 700;
}

.pagination .page-numbers,
.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item.e-prev .e-icon-prev, 
.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item.e-next .e-icon-next,
.p-datepicker-next,
.p-datepicker-prev,
.e-next,
.e-prev {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid transparent;
    border-radius: 5px;
    margin-right: 2px;
	color: var(--text-dark);
}

.p-datepicker-next,
.p-datepicker-prev,
.e-next,
.e-prev {
	margin: 0;
	text-indent: -999em;
}

.e-icon-container {
	display: flex;
	justify-content: space-between;
}

.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item.e-prev .e-icon-prev, 
.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item.e-next .e-icon-next {
	margin: 0;
}

.pagination .page-numbers.current {
    border-color: var(--nav-border);
	color: var(--text-dark);
}

.pagination a.page-numbers, .pagination a.page-numbers:visited,
.pagination button.page-numbers {
    color: var(--text-dark);
    text-decoration: none;
}

.pagination button[disabled],
.pagination button[disabled]:is(:hover,:active) {
	opacity: 0.3;
	cursor: not-allowed;
	background-color: transparent;
}

.pagination a.page-numbers:is(:hover,:active),
.pagination .page-numbers:not(.current,[disabled]):is(:hover,:active),
.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-left .e-tbar-btn.e-icon-btn:is(:hover,:active),
.p-datepicker-next:is(:hover,:active),
.p-datepicker-prev:is(:hover,:active),
.e-next:is(:hover,:active),
.e-prev:is(:hover,:active) {
    background-color: var(--nav-border);
	cursor: pointer;
	border-radius: 5px;
}

.pagination a.page-numbers:is(.next,.prev),
.pagination button.page-numbers:is(.next,.prev),
.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item.e-prev .e-icon-prev, 
.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item.e-next .e-icon-next,
.p-datepicker-next,
.p-datepicker-prev,
.e-next,
.e-prev {
    text-indent: -999em;
    background: url(img/svg/chevron-right.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 25px;
	background-color: transparent;
}

.pagination a.page-numbers.prev,
.pagination button.page-numbers.prev,
.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item.e-prev .e-icon-prev,
.p-datepicker-prev,
.e-prev {
    background-image: url(img/svg/chevron-left.svg);
}

/* FINANCE */

table.finance,
table.notifications,
table.notes {
	min-width: unset;
}

table.finance :is(th,td),
table.notifications :is(th,td),
table.notes :is(th,td) {
	vertical-align: top;
	padding: 10px 0;
}

table.finance thead,
table.notifications thead {
	display: none;
}

table.finance :is(th,td).date,
table.notifications :is(th,td).date,
table.notifications :is(th,td).time {
	width: 60px;
}

table.notes th {
	font-weight: normal;
}

table.notes td.booking {
	width: 120px;
}

table.notes td.description {
	width: calc(100% - 175px);
}

table.finance td.description {
	display: flex;
}

table.finance :is(th,td).price {
	width: 80px;
	text-align: right;
	font-weight: 700;
}

table.finance :is(th,td).actions {
	width: 30px;
	text-align: right;
}

table.finance tbody tr,
table.notifications tbody tr,
table.notes tbody tr {
	border-bottom: 1px solid var(--bg-light);
}

table.finance tbody tr:last-child,
table.finance tfoot tr:not(:last-child),
table.notes thead {
	border-bottom: 2px solid var(--nav-border);
}

table.finance tfoot tr:not(:last-child) {
	font-size: 1em;
}

table.finance td.line-item,
table.notes th.line-item,
.receipt-total {
	text-align: right;
}

table.finance tfoot {
	font-weight: 700;
}

table.finance tfoot tr:last-child {
	color: var(--text-dark);
	font-size: 1.5em;
}

table.finance .badge {
	align-self: center;
}

table.finance tr:is(.cancelled,.pending) :is(.date,.price),
table.finance tr:is(.cancelled,.pending) span {
	color: var(--text-light);
}

table.finance tr.cancelled :is(.date,.price),
table.finance tr.cancelled span {
	text-decoration: line-through;
}

/* CLOSED DAYS */

table.closed-days th.date-range {
	width: 240px;
}
table.closed-days th.days {
	width: 70px;
}
table.closed-days th.type {
	width: 150px;
}
table.closed-days th.description {
	min-width: 290px;
}
table.closed-days th.actions {
	width: 100px;
}

/* CLIENT LIST */

table.client-list th.client-name,
table.client-list th.pets {
	min-width: 250px;
}

table.client-list th.contact {
	min-width: 200px;
}

table.client-list th:is(.upcoming-booking) {
	width: 175.8px;
	min-width: 175.8px;
}

table.client-list th:is(.last-booking) {
	width: 180px;
	min-width: 180px;
}

table.client-list th:is(.total-paid,.total-bookings) {
	width: 110px;
	min-width: 110px;
}

/* BOOKING LIST */

.status {
	font-weight: 600;
}

.status.notice {
	color: var(--notice);
}

.status.success {
	color: var(--success);
}

.status.alert {
	color: var(--alert);
}

.status.warning {
	color: var(--error);
}

.status.delete {
	text-decoration: line-through;
}

table.booking-list th.booking-date {
	min-width: 100px;
}

table.booking-list th.pets {
	min-width: 180px;
}

table.booking-list td.pets * {
	max-width: 180px;
	width: 100%;
}

table.booking-list th.status {
	min-width: 135px;
}

table.booking-list th.source {
	min-width: 100px;
}

table.booking-list tr td :is(strong, span) {
	display: block;
}

.modal-content {
	outline: none!important;
	border: none!important;
}

@media only screen and (max-width: 957px) {
	.modal-content .section-footer.table-controls,
	.modal-content .section-footer .table-controls {
		flex-direction: column;
		gap: 15px;
	}
	.section-footer.table-controls .controls-left,
	.section-footer .table-controls .controls-left {
		width: 100%;
	}
}

@media only screen and (max-width: 666px) {

	:is(th,td) {
		padding: 12px 10px;
	}

	.scrollable-table-container.prompt:before {
		/* top: 76px; */
		top: 54px;
	}

	.scrollable-table-container.prompt th {
		padding-top: 18px;
		padding-bottom: 18px;
	}

	.scrollable-table-container.prompt tbody tr:first-child td {
		padding-top: 18px;
	}

	.scrollable-table-container.prompt table {
		margin-top: -28px;
	}

	table.default thead th:first-child,
	table.default tbody tr td:first-child {
		padding-left: 15px;
	}

	table.default thead th:last-child,
	table.default tbody tr td:last-child {
		padding-right: 15px;
	}

	table.closed-days th.date-range {
		width: 340px;
	}

}

/*------------------------------------*\
    SELECT2
\*------------------------------------*/

/* .select-multiple + .select2-container--open ~ .form-textbox-label {
	display: none;
} */

.select2-search--inline {
	display: none;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
	padding: 0!important;
}

.select2-container {
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    position: relative;
    vertical-align: middle;
}
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    user-select: none;
    -webkit-user-select: none;
	margin-bottom: 3px;
	padding-bottom: 0;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.select2-container .select2-selection--single .select2-selection__clear {
    background-color: transparent;
    border: none;
    font-size: 1em;
}
.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
    padding-right: 8px;
    padding-left: 20px;
}
.select2-container .select2-selection--multiple {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    min-height: 56px;
	height: auto;
    user-select: none;
    -webkit-user-select: none;
	padding-top: calc(0.95rem - 5px);
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: calc(1em + 5px);
    list-style: none;
    padding: 0;
}
.select2-container .select2-selection--multiple .select2-selection__clear {
    background-color: transparent;
    border: none;
    font-size: 1em;
}
.select2-container .select2-search--inline .select2-search__field {
    box-sizing: border-box;
    border: none;
    font-size: 100%;
    margin-top: 5px;
    margin-left: 5px;
    padding: 0;
}
.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
    -webkit-appearance: none;
}
.select2-dropdown {
    background-color: white;
	outline: 4px solid #61adf9;
	border: 1px solid #0071e3;
    border-radius: 4px;
    box-sizing: border-box;
    display: block;
    position: absolute;
    left: -100000px;
    width: 100%;
    z-index: 1051;
	/* z-index: 50!important; */
}
.select2-results {
    display: block;
}
.select2-results__options {
    list-style: none;
    margin: 0;
    padding: 0;
}
.select2-results__option,
.select2-container--default .select2-results__option--highlighted {
    padding: 8px 10px!important;
    user-select: none;
    -webkit-user-select: none;
}
.select2-results__option--selectable {
    cursor: pointer;
}
.select2-container--open .select2-dropdown {
    left: 0;
}
.select2-container--open .select2-dropdown--above {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
	border-color: var(--notice)!important;
}
.select2-container--open .select2-dropdown--below {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
	border-color: var(--notice)!important;
}
.select2-search--dropdown {
    display: block;
    padding: 0;
}

.select2-search--dropdown {
	padding: 0!important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    padding: 1.05882rem 0.94118rem 0.95rem 40px!important;
	width: 100%;
    box-sizing: border-box;
	border: none!important;
    border-bottom: 1px solid #d2d2d7 !important;
    border-radius: 0;
    background: var(--bg-light) url('img/svg/search.svg') left 10px center/25px no-repeat !important;
}

.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
    -webkit-appearance: none;
}
.select2-search--dropdown.select2-search--hide {
    display: none;
}
.select2-close-mask {
    border: 0;
    margin: 0;
    padding: 0;
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: auto;
    opacity: 0;
    z-index: 99;
    background-color: #fff;
    filter: alpha(opacity=0);
}
.select2-hidden-accessible {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 2.2;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold;
    height: 26px;
    margin-right: 20px;
    padding-right: 0px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #999;
}
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
    float: left;
}
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
    left: 1px;
    right: auto;
}
.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #eee;
    cursor: default;
}
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
    display: none;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #888 transparent;
    border-width: 0 4px 5px 4px;
}
.select2-container--default .select2-selection--multiple .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold;
    height: 20px;
    margin-right: 10px;
    margin-top: 5px;
    padding: 1px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--notice);
    border: 1px solid #005cb9;
    border-radius: 4px;
    display: inline-block;
    /* margin-left: 5px;
    margin-top: 5px; */
    padding: 0;
	color: #fff;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    cursor: default;
    padding-left: 2px;
    padding-right: 5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    background-color: transparent;
    border: none;
    border-right: 1px solid #005cb9;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    color: #005cb9;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    padding: 0 4px;
	height: 24px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    background-color: #005cb9;
    color: #fff;
    outline: none;
}
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: #eee;
    cursor: default;
}
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border: none;
	box-shadow: none;
}
.select2-container--default .select2-search--inline .select2-search__field {
    background: transparent;
    border: none;
    outline: 0;
    box-shadow: none;
    -webkit-appearance: textfield;
	appearance: textfield;
}
.select2-container--default .select2-results > .select2-results__options {
    max-height: 200px;
    overflow-y: auto;
	color: var(--text-dark);
}
.select2-container--default .select2-results__option--disabled {
    color: #999;
}
.select2-container--default .select2-results__option--selected {
    background-color: #fff;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--notice-pastel)!important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	color: var(--text-dark)!important;
}
.select2-container--default .select2-results__option--selectable.select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected=true] {
	background-color: var(--notice-pastel-hover)!important;
	font-weight: 700;
}

.select2-container--default .select2-results__option[aria-selected][aria-disabled=true] {
	color: #999!important;
	cursor: not-allowed!important;
	background-color: #fff!important;
}

@media only screen and (max-width: 666px) {

	.select2-container .select2-selection--single {
		height: 60px!important;
	}
	.select2-container--default .select2-results > .select2-results__options {
		max-height: 215px;
		overflow-y: auto;
		color: var(--text-dark);
	}
	.select2-container .select2-selection--multiple {
		min-height: 60px;
	}

}


/*------------------------------------*\
    ALERT CARDS & TOASTS
\*------------------------------------*/

.p-toast.p-component {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

p-toastitem {
	align-self: flex-end;
}

.alert-card,
.p-toast-message {
	/* border: 2px solid; */
	padding: 0.75em 1em 0.75em 0.5em;
	display: flex;
	flex-direction: row;
	border-radius: 5px;
	margin-bottom: 14px;
	gap: 6px;
	color: var(--text-dark);
	line-height: 1.3;
	flex: 1 0 100%;
	user-select: none;
}

.p-toast-message {
	background-color: var(--text-dark);
	color: #fff;
	margin-bottom: 0;
}

.p-toast-message button {
	display: none;
}

.p-toast-message-content {
	gap: 6px;
}

.p-toast-summary {
	font-weight: 700;
}

.section-option .alert-card {
	margin-bottom: 0;
}

.alert-card h1 {
	font-size: 1.1em;
	margin: 0;
}

.alert-card.success {
	border-color: var(--success);
	background: var(--success-pastel);
}

.alert-card.success i,
.p-toast-message-success .p-toast-message-icon {
	background-color: var(--success);
	mask-image: url('img/svg/success-solid.svg');
	-webkit-mask-image: url('img/svg/success-solid.svg');
}

.alert-card.pro {
	border-color: var(--secondary);
	background: var(--secondary-pastel);
}

.alert-card.pro i {
	background-color: var(--secondary);
	mask-image: url('img/svg/nav/system-solid-163-upgrade.svg');
	-webkit-mask-image: url('img/svg/nav/system-solid-163-upgrade.svg');
	mask-size: contain;
	-webkit-mask-size: contain;
}

.alert-card.banner.success,
.p-toast-message-success {
	background: var(--success);
}

.alert-card.notice {
	border-color: var(--notice);
	background: var(--notice-pastel);
}

.alert-card.notice i,
.p-toast-message-info .p-toast-message-icon {
	background-color: var(--notice);
	mask-image: url('img/svg/notice-solid.svg');
	-webkit-mask-image: url('img/svg/notice-solid.svg');
}

.alert-card.banner.notice,
.p-toast-message-info {
	background: var(--notice);
}

.alert-card.alert {
	border-color: var(--alert);
	background: var(--alert-pastel);
}

.alert-card.alert i,
.p-toast-message-warn .p-toast-message-icon {
	background-color: var(--alert);
	mask-image: url('img/svg/error-solid.svg');
	-webkit-mask-image: url('img/svg/error-solid.svg');
}

.alert-card.banner.alert,
.p-toast-message-warn {
	background: var(--alert);
}

.alert-card.warning {
	border-color: var(--error);
	background: var(--error-pastel);
}

.alert-card.warning i,
.p-toast-message-error .p-toast-message-icon {
	background-color: var(--error);
	mask-image: url('img/svg/warning.svg');
	-webkit-mask-image: url('img/svg/warning.svg');
}

.alert-card.banner.warning,
.p-toast-message-error {
	background: var(--error);
}

.alert-card i,
.p-toast-message-icon {
	width: 18px!important;
	height: 18px!important;
	flex: 0 0 18px;
	margin-top: 1.1px;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	text-indent: -999em;
}

:is(.p-toast-message-success, .p-toast-message-info, .p-toast-message-warn, .p-toast-message-error) .p-toast-message-icon {
	background-color: #fff;
}

.alert-card.small i {
	margin-top: 0;
}

.alert-card.banner:is(.success,.notice,.alert,.warning) {
	color: #fff;
}

.alert-card.banner:is(.success,.notice,.alert,.warning) i {
	background-color: #fff;
}

.alert-card p {
	margin-top: 0.5em;
}

.alert-card p:last-child,
.alert-card ul:last-child {
	margin-bottom: 0;
}

@media only screen and (max-width: 666px) {
	.alert-card i {
		margin-top: 2.5px;
	}
	.alert-card.small i {
		margin-top: 1px;
	}

	p-toastitem {
		font-size: 12px;
	}

	.p-toast-message {
		padding: 5px 8px 5px 5px;
	}

	.p-toast-message-icon {
		width: 12px!important;
		height: 12px!important;
		flex: 1 0 12px;
		margin-top: 1.5px;
	}

	
}


/*------------------------------------*\
    MODALS
\*------------------------------------*/

.modal-container,
.modal-container-nested,
.tools-container,
.p-dialog-mask.p-component-overlay {
	align-items: center;
    box-sizing: border-box;
    display: none;
    height: 100%;
    justify-content: center;
    position: fixed;
    top: 0;
	left: 0;
    width: 100%;
    /* z-index: 99999!important; For Toasts message to work appropriately- This is commented */
	background-color: rgba(232,232,237,.9);
	padding: 60px;
}

.page-template :is(.modal-container,.modal-container-nested,.tools-container,.p-dialog-mask.p-component-overlay) {
	z-index: 99999!important;
}

.tools-container.open,
.modal-container.open,
.modal-container-nested.open,
.p-dialog-mask.p-component-overlay {
	display: flex;
}

.modal-card,
.p-dialog {
	display: flex;
    filter: drop-shadow(0 11px 34px rgba(0,0,0,.2));
    flex-direction: column;
    max-height: 100%;
    overflow: hidden;
    max-width: 690px;
	width: 100%;
	background-color: #fff;
    border-radius: 12px;
    transform: translateZ(0);
    /* transition: all .5s ease-in-out; */
	max-height: 650px;
	position: relative;
}

.modal-card.acts-as-page {
	background-color: var(--bg-light);
}

.grabber {
	display: none;
	width: 36px;
	height: 5px;
	border-radius: 100px;
	background: #C4C4C6;
	position: absolute;
	top: 6px;
	left: 50%;
	transform: translateX(-50%);
}

.tools-container > .modal-card,
.p-dialog.open,
.p-dialog.open .modal-card.client-card {
	width: 100%;
	max-width: unset;
	height: 100%;
	max-height: unset;
}

.modal-inner {
	overflow-y: scroll;
	padding: 60px 80px;
	margin-top: constant(safe-area-inset-top) !important;
    margin-top: env(safe-area-inset-top) !important;
	outline: none;
	border: none;
}

.add-clients-message {
	padding: 0 80px 60px;
}

.fadein1s {
	-webkit-animation: 1s ease 0s normal forwards 1 fadein1s;
    animation: 1s ease 0s normal forwards 1 fadein1s;
}

@keyframes fadein1s{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes fadein1s{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

.acts-as-page .modal-inner.no-indent {
	padding: 0;
}

.acts-as-page .modal-inner {
	padding: 60px 2.5%;
}

.full-width-content .modal-inner {
	padding-inline: 0;
}

.with-search + .modal-inner {
	padding-top: 129px;
}

.modal-inner.with-form .modal-header {
	margin-bottom: 3em;
}

.modal-container-nested .modal-inner,
:is(app-edit-requested-booking, app-booking-request-reschedule) .modal-inner {
	padding: 60px 52px;
}

.tools-container .modal-inner {
	overflow-y: scroll;
	padding: 60px 52px;
	flex: 1;
}

.modal-header {
	text-align: center;
}

/* .modal-header :is(h1,h2,h3,h4) {
	margin-top: 10px;
} */

:is(.modal-card,.p-dialog) i[class*="icon-"] {
	width: 60px;
	height: 60px;
	background-color: var(--notice);
	display: inline-block;
}

:is(.modal-card,.p-dialog) i[class*="icon-"].muted {
	width: 40px;
    height: 40px;
    background-color: var(--text);
}

:is(.modal-card,.p-dialog) i.icon-info {
	mask-image: url('img/svg/notice.svg');
	-webkit-mask-image: url('img/svg/notice.svg');
}

:is(.modal-card,.p-dialog) i.icon-review {
	mask-image: url('img/svg/line/system-regular-95-star.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-95-star.svg');
}

:is(.modal-card,.p-dialog) i.icon-calendar {
	mask-image: url('img/svg/calendar.svg');
	-webkit-mask-image: url('img/svg/calendar.svg');
}

:is(.modal-card,.p-dialog).success i[class*="icon-"] {
	background-color: var(--success);
	mask-image: url('img/svg/success.svg');
	-webkit-mask-image: url('img/svg/success.svg');
}

:is(.modal-card,.p-dialog).alert i[class*="icon-"] {
	background-color: var(--alert);
}

:is(.modal-card,.p-dialog).warning i[class*="icon-"],
:is(.modal-card, .p-dialog) i.icon-warning {
	background-color: var(--error);
	mask-image: url('img/svg/warning.svg');
	-webkit-mask-image: url('img/svg/warning.svg');
}

:is(.modal-card,.p-dialog) i.icon-create {
	mask-image: url('img/svg/line/system-regular-91-folder-plus-add.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-91-folder-plus-add.svg');
}

.modal-buttons {
	margin-top: 3em;
}

.modal-buttons.equal {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	justify-content: center;
}

.modal-buttons.equal button {
	flex: 170px 0 1;
}

.sidebar-section:not(:last-child) {
	margin-bottom: 1em;
}

.modal-section {
	margin-bottom: 1em;
}

/* SYSTEM UPDATE */

.modal-body.post-layout h3 {
	margin: 1.5em 0 1em;
}

.modal-body.post-layout img {
	display: block;
	width: 100%;
	height: auto;
	user-select: none;
	pointer-events: none;
}

/* BOOKING CARD */

.edit-services .profile-data {
	padding: 1em;
	border-bottom: 1px dashed var(--nav-border);
}

.edit-services .profile-data .actions {
	margin-left: auto;
}

.form.edit-services-modal {
	margin: 14px;
}

form.reschedule-booking-modal .date-container.angular-fix input,
form.reschedule-booking-modal .time-container.angular-fix select {
	margin-bottom: 14px;
}

.form.edit-services-modal:last-child {
	margin-bottom: 0;
}

.edit-services .pet-record {
    background: var(--bg-light);
    border-radius: 12px;
	padding-bottom: 1em;
}

.modal-card.booking-card {
	flex-direction: row;
	max-width: 100%;
}

.booking-card .no-scroll-wrap,
.booking-card .scroll-wrap {
	display: flex;
	width: 100%;
}

.booking-card .modal-sidebar {
	padding: 60px 32px;
	width: 32.61%;
	/* width: 587px; */
	background-color: var(--bg-light);
	border-radius: 0 12px 12px 0;
	overflow-y: scroll;
}

.booking-card header.compact-menu-header.main {
	width: 67.39%;
	/* width: calc(100% - 587px); */
	border-radius: 12px 0 0 0;
}

.flex-container {
	width: 67.39%;
	display: flex;
}

.booking-card .modal-status {
	padding: 60px 2.5%;
	width: 34.37%;
	/* padding: 60px 52px; */
	/* width: 417px; */
	overflow-y: scroll;
}

.booking-card .modal-content {
    /* padding: 60px 52px 60px 0; */
	padding: 60px 2.5% 60px 0;
	flex: 1;
	overflow-y: scroll;
}

.booking-card header.compact-menu-header.sidebar {
	width: 32.61%;
	/* width: 587px; */
    border-radius: 0 11px 0 0;
	background-color: hsla(220deg,30%,96.08%,0.2);
	right: 0;
    z-index: 20;
    left: unset;
}

.p-dialog .modal-card.acts-as-page:not(.create-tool) header.compact-menu-header,
.modal-card.acts-as-page:not(.create-tool) header.compact-menu-header {
	background-color: hsla(220deg, 30%, 96.08%, 0.2);
}

.p-dialog .modal-card.acts-as-page.create-tool header.compact-menu-header,
.modal-card.acts-as-page.create-tool header.compact-menu-header {
	background-color: transparent;
	-webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.booking-header {
	font-weight: 700;
	color: var(--text-dark);
}

.booking-header p:first-child:not(.totals) {
	color: var(--text);
	font-weight: 500;
}

.booking-header select {
	margin-left: 0.5em;
	font-weight: 700;
}

.booking-header .totals {
	margin-left: auto;
}

.modal-status .date-time {
	margin-bottom: 3em;
	display: flex;
    align-items: center;
    justify-content: space-between;
}

details i,
.card i {
	width: 25px;
	height: 25px;
	background-color: var(--text);
	margin-right: 0.5em;
}

.revise i {
	mask-image: url('img/svg/edit.svg');
	-webkit-mask-image: url('img/svg/edit.svg');
}

.notes i,
i.notes {
	mask-image: url('img/svg/line/system-regular-86-pin.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-86-pin.svg');
}

.postit i,
i.postit,
.icon-postit {
	mask-image: url('img/svg/line/system-regular-152-sticky-note.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-152-sticky-note.svg');
}

.history i,
i.history {
	mask-image: url('img/svg/line/system-regular-141-history.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-141-history.svg');
}

i.warning {
	mask-image: url('img/svg/line/system-regular-56-warning.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-56-warning.svg');
}

.payments i,
.finance i {
	mask-image: url('img/svg/payments.svg');
	-webkit-mask-image: url('img/svg/payments.svg');
}

.vital-stats i {
	mask-image: url('img/svg/line/system-regular-48-favorite-heart.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-48-favorite-heart.svg');
}

.grooming i,
i.grooming {
	mask-image: url('img/svg/line/system-regular-198-cut.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-198-cut.svg');
}

.special-prices i,
i.special-prices {
	mask-image: url('img/svg/line/system-regular-71-discount-coupon.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-71-discount-coupon.svg');
}

.account-flags i {
	mask-image: url('img/svg/line/system-regular-100-flag.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-100-flag.svg');
}

.action.salon i {
	mask-image: url('img/svg/solid/system-solid-41-home.svg');
	-webkit-mask-image: url('img/svg/solid/system-solid-41-home.svg');
}

.action.system i {
	mask-image: url('img/svg/solid/system-solid-117-bolt.svg');
	-webkit-mask-image: url('img/svg/solid/system-solid-117-bolt.svg');
}

.action.client i {
	mask-image: url('img/svg/solid/system-solid-187-contacts.svg');
	-webkit-mask-image: url('img/svg/solid/system-solid-187-contacts.svg');
}

.user i {
	mask-image: url('img/svg/line/system-regular-8-account.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-8-account.svg');
}

.contacts i {
	mask-image: url('img/svg/line/system-regular-96-groups.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-96-groups.svg');
}

.vets i {
	mask-image: url('img/svg/line/system-regular-172-masks.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-172-masks.svg');
}

.pets i {
	mask-image: url('img/svg/line/system-regular-88-pets.svg');
	-webkit-mask-image: url('img/svg/line/system-regular-88-pets.svg');
}

.bookings i {
	mask-image: url('img/svg/calendar.svg');
	-webkit-mask-image: url('img/svg/calendar.svg');
}

.pet-record .profile-data {
	width: 100%;
}

.pet-record .profile-data .details,
.light.client summary {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.pet-booking-notes {
	overflow: auto;
	margin-bottom: 2em;
}


/* CLIENT CARD */

.modal-card.client-card {
	flex-direction: row;
	max-width: 100%;
}

.client-card .no-scroll-wrap,
.client-card .scroll-wrap,
.create-booking .no-scroll-wrap {
	display: flex;
	width: 100%;
}

.client-card .modal-sidebar {
	padding: 80px 2.5%;
	background: var(--bg-light);
	border-radius: 12px 0 0 12px;
	overflow-y: scroll;
	width: 32.61%;
	z-index: 101;
	border: none;
	outline: none;
}

.client-card .modal-sidebar.booking-details,
.acts-as-page.create-tool,
.acts-as-page.create-booking,
.create-booking .modal-sidebar {
	background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%23e2e4e7' fill-opacity='0.2' fill-rule='evenodd'/%3E%3C/svg%3E")
}

.client-card .modal-sidebar.booking-details.pending {
	background-color: var(--alert-pastel);
	background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%23f8e2bf' fill-opacity='0.3' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.client-card .modal-sidebar.booking-details.confirmed {
	background-color: var(--notice-pastel);
	background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%23c5e2ff' fill-opacity='0.3' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.client-card header.compact-menu-header.sidebar {
	width: 32.61%;
	background-color: hsla(220deg, 30%, 96.08%, 0.2);
	border-radius: 11px 0 0 0;
	z-index: 110;
}

.client-card header.compact-menu-header.main {
	width: 67.39%;
	border-radius: 0 12px 0 0;
	right: 0;
	left: unset;
}

.client-card footer.main,
.create-booking footer.main {
	position: absolute;
	width: 67.39%;
	border-radius: 0  0 12px 0;
	right: 0;
	bottom: 0;
	background: #fff;
	border-top: 2px solid var(--bg-light);
	z-index: 100;
	padding: 15px;
	display: flex;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
	align-items: flex-start;
}

.client-card footer.main .button-container,
.create-booking footer.main .button-container {
	margin-left: auto;
}

.client-card .modal-content {
	width: 67.39%;
	padding: 60px 0;
	border-radius: 0 12px 0 0;
	overflow-y: scroll;
}

.client-card .modal-content.with-footer,
.modal-inner.with-footer {
	padding-bottom: 135px;
}

.client-card .modal-content .indent {
	padding-inline: 2.5%;
}

/* CREATE BOOKING */

.create-booking.acts-as-page .modal-inner {
	padding: 80px 0 0;
}

.create-booking .modal-footer {
    padding: 1em 0 calc(1em + 60px);
    background: #fff;
    border-top: 10px solid var(--bg-light);
}

.modal-card.acts-as-page.create-booking {
	min-height: 420px;
}

.create-booking .scroll-wrap {
	overflow-y: scroll;
	display: block;
	max-height: 650px;
	width: 100%;
}

.create-booking .modal-sidebar {
	padding: 80px 0 1em;
}

.autocomplete-container #suggestions.is-visible,
.autocomplete-container #suggestions.is-visible ~ .not-found {
	background-color: #fff;
    outline: 4px solid #61adf9;
    border: 1px solid #0071e3;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	opacity: 1!important;
}

.autocomplete-container #suggestions.is-visible ~ .not-found {
	position: relative;
	z-index: 2;
}

.autocomplete-container .suggestions-container ul li:hover {
	background-color: #f5faff!important;
}

.autocomplete-container .suggestions-container .complete-selected {
	background-color: var(--notice-pastel-hover)!important;
}

.ng-invalid .autocomplete-container:not(.active) #suggestions.is-visible {
	opacity: 0!important;
	border: none!important;
	outline: none!important;
}

.create-booking .modal-content {
	background: #fff;
	box-shadow: 0px 10px 0px 0px rgba(242, 244, 248, 1);
    border-bottom: 1px solid var(--nav-border);
	padding: 1em 0 30px;
}

.create-booking .indent {
	padding-inline: 2.5%;
}

.create-booking .indent.large {
	padding-inline: 60px;
	padding-bottom: 16px;
}

.create-booking .modal-footer {
	padding: 1em 0 60px;
	background: #fff;
	border-top: 10px solid var(--bg-light);
}

.create-booking .modal-inner.with-footer .modal-footer {
	padding-bottom: 135px;
}

.create-booking .card-container details:not(:last-child) {
	border-bottom: 1px solid var(--bg-light);
	border-radius: 0;
}

.create-booking details {
	margin-bottom: 0;
}

.create-booking .field-with-actions .actions {
	width: 19px;
    flex: 1 0 19px;
}

.create-booking .tab-pet.selected {
	box-shadow: inset 0 0 0 1000px #f8fff2;
    border-color: var(--active);
}

.create-booking footer.main {
	width: 100%;
	border-radius: 0 0 12px 12px;
	z-index: 1000;
}

.autocomplete-container .input-container input {
	background: #fff url('img/svg/search.svg') left 10px center/25px no-repeat!important;
	height: 56px!important;
	font-size: 1em!important;
	border: 1px solid #d2d2d7!important;
	padding-left: 40px !important;
}

.autocomplete-container.active .input-container input {
	border-radius: 12px 12px 0 0!important;
}

.autocomplete-container {
	box-shadow: none!important;
	height: 56px!important;
}

.autocomplete-container .not-found {
	padding: 14px 15px!important;
}

@media only screen and (max-height: 768px) {
	.tools-container,
	.p-dialog-mask.p-component-overlay {
		padding: 0;
	}
	.modal-sidebar,
	.tools-container > .modal-card,
	.p-dialog.open,
	.p-dialog.open .modal-card,
	.p-dialog.open .client-card header.compact-menu-header.main,
	.p-dialog.open .client-card header.compact-menu-header.sidebar {
		border-radius: 0;
	}
}

@media only screen and (max-height: 700px) {
	.modal-card,
	.p-dialog {
		max-height: 450px;
	}
}

@media only screen and (max-width: 1366px) {

	.tools-container,
	.p-dialog-mask.p-component-overlay {
		padding: 0;
	}
	.modal-sidebar,
	.tools-container > .modal-card,
	.client-card .modal-sidebar,
	.client-card footer.main,
	.p-dialog.open,
	.p-dialog.open .modal-card,
	.p-dialog.open .client-card header.compact-menu-header.main,
	.p-dialog.open .client-card header.compact-menu-header.sidebar {
		border-radius: 0;
	}

}

@media only screen and (max-width: 1280px) {

	.flex-container {
		flex-direction: column;
	}

	.booking-card .modal-status,
	.booking-card .modal-content {
		width: 100%;
		padding-inline: 32px;
		overflow: auto;
	}

	.booking-card .modal-status {
		padding-bottom: 32px;
	}

	.booking-card .modal-content {
		padding-top: 0;
	}

	.flex-container {
		overflow-y: scroll;
		display: block;
	}

	.modal-status .date-time {
		margin-bottom: 2em;
	}

	.booking-card .modal-sidebar,
	.booking-card header.compact-menu-header.sidebar {
		width: 40%;
	}

	.flex-container,
	.booking-card header.compact-menu-header.main {
		width: 60%;
	}

}

@media only screen and (max-width: 1024px) {

	.booking-card .modal-sidebar,
	.booking-card header.compact-menu-header.sidebar,
	.flex-container,
	.booking-card header.compact-menu-header.main {
		width: 50%;
	}

}

@media only screen and (max-width: 986px) {

	.client-card .modal-content .indent.mobile-noindent,
	.create-booking .indent.mobile-noindent {
		padding-inline: 0;
	}
	
}

@media only screen and (max-width: 980px) {

	.client-card .modal-sidebar,
	.client-card header.compact-menu-header.sidebar {
		width: 320px;
	}

	.client-card .modal-content,
	.client-card header.compact-menu-header.main,
	.client-card footer.main {
		width: calc(100% - 320px);
	}

}

@media only screen and (max-width: 900px) {

	.booking-card header.compact-menu-header.sidebar {
		display: none;
	}
	
	.booking-card .no-scroll-wrap {
		overflow-y: auto;
		height: 100%;
	}

	.booking-card .scroll-wrap {
		overflow-y: scroll;
		display: block;
	}
	
	.booking-card .modal-sidebar,
	.flex-container,
	.booking-card header.compact-menu-header.main {
		width: 100%;
	}

	.booking-card .modal-content {
		padding-bottom: calc(60px - 1em);
	}

	.booking-card .modal-status,
	.booking-card .modal-content,
	.booking-card .modal-sidebar {
		padding-inline: 20px;
	}

	.booking-card .scroll-wrap {
		background: var(--bg-light);
	}

	.flex-container {
		background: #fff;
	}

}

@media only screen and (max-width: 768px) {

	.client-card .scroll-wrap {
		overflow-y: scroll;
		display: block;
	}

	.client-card header.compact-menu-header.main {
		display: none;
	}

	.client-card header.compact-menu-header.sidebar,
	.client-card .modal-sidebar,
	.client-card .modal-content,
	.client-card footer.main {
		width: 100%;
	}

	.client-card header.compact-menu-header.sidebar,
	.client-card .modal-sidebar {
		border-radius: 12px 12px 0 0;
	}

	.client-card .modal-sidebar {
		padding-bottom: 1em;
	}

	.client-card .modal-content {
		padding-top: 32px;
	}

}

@media only screen and (max-width: 734px) {

	.modal-container,
	.modal-container-nested {
		padding: 0;
	}

	.modal-container .modal-card,
	.modal-container-nested .modal-card,
	.p-dialog:not(.open),
	.p-dialog:not(.open) .modal-card {
		height: 100%;
		width: 100%;
		max-height: unset;
		max-width: unset;
		border-radius: 0;
	}

	.modal-container-nested .modal-buttons,
	.p-dialog:not(.open) .modal-buttons {
		position: fixed;
		width: 100%;
		border-radius: 0;
		left: 0;
		bottom: 0;
		background: #fff;
		border-top: 2px solid var(--bg-light);
		z-index: 30;
		padding: 15px;
		display: flex;
		box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
		align-items: flex-start;
	}

	.modal-container-nested .modal-card .modal-inner,
	.p-dialog:not(.open) .modal-inner {
		padding-bottom: 135px;
	}

}

@media only screen and (max-width: 666px) {
	
	:is(.modal-card,.p-dialog) i[class*="icon-"] {
		width: 54px;
		height: 54px;
	}
	
	.grabber {
		display: block;
	}

	.p-dialog-mask.p-component-overlay {
		padding: 0;
	}

	.modal-container {
		padding: 30px 2.5%;
	}
	.p-dialog-mask.p-component-overlay {
		background-color: rgba(255, 255, 255, .95);
	}
	.modal-container header.compact-menu-header,
	.modal-container-nested header.compact-menu-header,
	.p-dialog header.compact-menu-header {
		display: block;
		top: 0;
		left: unset;
		transform: unset;
		max-width: unset;
	}
	.modal-container header.with-title.compact-menu-header,
	.client-card header.compact-menu-header.sidebar,
	.modal-container-nested header.compact-menu-header,
	.p-dialog .modal-card.acts-as-page header.compact-menu-header {
		display: flex;
		height: 53px!important;
		padding: 6px 15px;
		background-color: #fff;
		border-bottom: 1px solid var(--nav-border);
		border-radius: 0;
	}
	.modal-card.acts-as-page:not(.create-tool) header.compact-menu-header,
	.p-dialog .modal-card.acts-as-page:not(.create-tool) header.compact-menu-header  {
		background-color: #fff;
	}
	.modal-container-nested header.compact-menu-header,
	.modal-container .create-tool header.with-title.compact-menu-header,
	.p-dialog .modal-card.acts-as-page.create-tool header.compact-menu-header {
		border: none;
	}
	header.with-title button.toggle.close {
		top: 13.5px;
	}
	.modal-container-nested header.compact-menu-header button.toggle.close {
		top: 7.6px;
	}
	.modal-container {
		background-color: rgba(255,255,255,.8);
		padding: 0;
		justify-content: center;
		align-items: flex-end;
	}
	.modal-container .modal-card {
		border-radius: 12px 12px 0 0;
		height: 100%;
		width: 100%;
		transition: unset;
		max-height: unset;
	}
	.modal-inner {
		padding: 60px 20px;
	}

	.add-clients-message {
		padding: 0 20px 60px;
	}

	.modal-container-nested {
		background-color: rgba(255,255,255,.9);
	}

	.modal-container .modal-card.acts-as-page,
	.modal-card.acts-as-page {
		border-radius: 0;
		background-color: var(--bg-light);
	}

	.modal-container .modal-card.acts-as-page .modal-inner,
	.modal-card.acts-as-page .modal-inner {
		padding: 80px 15px 60px;
	}

	.modal-card.acts-as-page.create-booking .modal-inner {
		padding: 80px 0 0;
		height: 100%;
	}

	.modal-container .modal-card.acts-as-page .modal-inner.no-indent,
	.modal-card.acts-as-page .modal-inner.no-indent {
		padding: 0;
	}

	.modal-container .modal-card.acts-as-page.full-width-content .modal-inner {
		padding-inline: 0;
	}

	.modal-container .modal-card.acts-as-page .with-search + .modal-inner {
		padding-top: 131px;
	}

	.booking-card header.compact-menu-header.main,
	.client-card header.compact-menu-header.sidebar {
		display: flex;
		top: 0;
		left: 0;
		max-width: 100%;
		transform: unset;
	}

	.modal-card.small-detent {
		height: 310px;
	}

	.modal-card.medium-detent {
		height: 60vh;
	}

	.modal-card.large-detent {
		height: 93vh;
	}

	.client-card footer.main,
	.create-booking footer.main {
		height: 86.5px;
		padding-top: 12px;
	}

	.client-card footer.main .button-container,
	.create-booking footer.main .button-container {
		width: 100%;
	}

	.client-card footer.main .button-container > button:not(.message),
	.create-booking footer.main .button-container > button:not(.message) {
		flex: 1;
	}

	.modal-container-nested .modal-card .modal-inner,
	:is(app-edit-requested-booking, app-booking-request-reschedule) .modal-inner {
		padding: 60px 20px 135px;
	}

	.modal-container-nested .modal-buttons {
		flex-direction: column;
		height: 86.5px;
        padding-top: 12px;
		justify-content: flex-start;
	}

	.modal-container-nested .modal-buttons.space-between {
		flex-direction: inherit;
		justify-content: space-between;
	}

	.modal-container-nested .modal-buttons.equal button,
	.p-dialog:not(.open) .modal-buttons.equal button {
		flex: unset;
		width: 100%;
	}

	.modal-container-nested .modal-buttons.equal button.discourage,
	.p-dialog:not(.open) .modal-buttons.equal button.discourage {
		display: none;
	}

	.p-dialog:not(.p-dialog-draggable),
	.p-dialog:not(.p-dialog-draggable) .modal-card {
		max-height: 100vh;
		border-radius: 0;
	}

	.create-booking .indent.large {
		padding-inline: 1em;
	}

}

@media only screen and (max-width: 522px) {

	.modal-medium .modal-inner {
		padding: 60px 30px;
	}

}

/* @media only screen and (max-width: 430px) {

	button.btn.secondary-action.message {
		width: 47.7px;
		height: 47.7px;
		flex: unset;
		text-indent: -999em;
	}

	button.btn.secondary-action.message:before {
		display: block;
	}

} */

@media only screen and (max-width: 400px) {

	.medium-detent .modal-inner {
		padding: 60px 15px;
	}

}

@media only screen and (max-width: 375px) {

	.create-booking .select-services.indent {
		padding-inline: 0;
	}

}


/*------------------------------------*\
    GRID
\*------------------------------------*/

/* wrapper */
.wrapper-medium {
	max-width:1300px;
	margin:0 auto;
	position:relative;
}

.row {box-sizing: border-box; overflow: auto;}

[class*="col-"] {float: left; padding: 15px; position: relative;}

.col-1 	{width: 8.33%;}
.col-2 	{width: 16.66%;}
.col-3 	{width: 25%;}
.col-4 	{width: 33.33%;}
.col-5 	{width: 41.66%;}
.col-6 	{width: 50%;}
.col-7 	{width: 58.33%;}
.col-8 	{width: 66.66%;}
.col-9 	{width: 74.5%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}



/*------------------------------------*\
    PRIMARY NAV
\*------------------------------------*/

.primary-nav {
	position: fixed;
	display: flex;
	height: 100%;
	z-index: 10;
}

.primary-nav .inner {
	background: #fff;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 0 15px;
	width: 250px;
	flex: 0 0 250px;
	border-right: 1px solid var(--nav-border);
	position: relative;
}

.primary-nav li {
	position: relative;
	margin-bottom: 1px;
}

.primary-nav ul.main-list {
	padding-top: 115px;
	height: 100%;
	padding-bottom: 150px;
	overflow-y: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
	user-select: none;
}

body.collapse .primary-nav ul.main-list {
	overflow: visible;
}

.primary-nav ul,
.primary-nav li > ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	font-weight: 500;
}

.primary-nav li > ul.visible {
	display: block;
}

.primary-nav a:not(.btn) {
	position: relative;
	display: flex;
	padding: 0.75em;
	border-radius: 5px;
	align-items: center;
	justify-content: flex-start;
	color: var(--text-dark);
}  

.primary-nav li.has-subnav > a {
	padding: 0.75em calc(0.75em + 36px) 0.75em 0.75em;
}

.primary-nav li > ul {
	display: none;
	margin-bottom: 1em;
	border-bottom: 1px solid var(--nav-border);
}

body.collapse .primary-nav li > ul {
	display: none;
}

.primary-nav li:last-child > ul {
	border-bottom: none;
}

.primary-nav li:hover > a,
.primary-nav li.active > a {
	background-color: var(--notice-pastel);
}

.primary-nav li.active > a {
	font-weight: 700;
}

.primary-nav .nested-list {
	padding: 0.75em 0;
	font-weight: 400;
}

.primary-nav li.active > a:before,
.primary-nav .nested-list li > a:before,
.secondary-nav li.active > a:before {
	content: '';
	width: 4px;
	height: 25px;
	background: var(--notice);
	border-radius: 0 3px 3px 0;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

.primary-nav .nested-list li > a:before {
	background: var(--notice-pastel);
}

.primary-nav .nested-list li.active > a:before,
.primary-nav .nested-list li:is(:hover,:active) > a:before {
	background: var(--notice);
}

.primary-nav .nested-list li > a:is(:link,:visited) {
	background-color: transparent;
	padding: 0.5em 1em;
	color: var(--text);
}

.primary-nav .nested-list li > a:is(:hover,:active),
.primary-nav .nested-list li.active > a {
	color: var(--text-dark);
	background-color: transparent;
}

.primary-nav .count {
	font-weight: 700;
	color: var(--text-dark);
	margin-left: auto;
	width: 25.59px;
	text-align: center;
	font-size: 0.875em;
}

.special-notices {
	border-top: 1px solid var(--nav-border);
	padding: 1em 15px;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 249px;
	background: #fff;
}

.special-notices .notice {
	font-size: 0.75em;
	font-weight: 500;
	text-align: center;
	color: var(--text-dark);
	margin-top: 0;
}

/* Collapsed */

body.collapse .primary-nav .inner {
	flex: 0 0 80px;
	width: 80px;
}

body.collapse .primary-nav :is(.badge.pro, button.toggle),
body.collapse .primary-nav .special-notices .notice {
	display: none;
}

body.collapse .primary-nav li.has-subnav a {
	padding-right: 0.75em;
}

body.collapse .primary-nav .lottie-icon {
	margin-right: 0;
}

body.collapse .primary-nav li > a .section-title {
	opacity: 0;
    position: absolute;
    z-index: 100;
    color: var(--primary-dark);
    left: 30px;
    background: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    box-shadow: 0px 0px 20px 0px rgba(24,54,64,0.3);
    display: inline-block;
    width: 0;
    overflow: hidden;
}

body.collapse .primary-nav li:hover > a .section-title {
	opacity: 1;
    left: 55px;
    transition: all 0.3s ease-in-out;
    width: auto;
}

body.collapse .primary-nav .special-notices {
	width: 79px;
}

/* Mobile */

header.compact-menu-header,
.p-dialog header.compact-menu-header {
	background-color: hsla(0,0%,100%,.5);
	-webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
	border-radius: 0;
	height: 79px;
	position: fixed;
    top: 0;
    width: 249px;
	left: 0;
	z-index: 102;
	padding: 15px;
	margin-top: constant(safe-area-inset-top) !important;
    margin-top: env(safe-area-inset-top) !important;
}

@-moz-document url-prefix() {
	header.compact-menu-header,
	.p-dialog header.compact-menu-header {
		backdrop-filter: unset!important;
		background-color: hsla(0,0%,100%,.9)!important;
	}
	.client-card header.compact-menu-header.sidebar {
		background-color: hsla(220deg, 30%, 96.08%, 0.9)!important;
	}
}  

.modal-container header.compact-menu-header,
.modal-container-nested header.compact-menu-header,
.tools-container header.compact-menu-header,
.p-dialog header.compact-menu-header {
	width: 100%;
	height: 55px;
	border-radius: 12px 12px 0 0;
}

.modal-container header.compact-menu-header.with-search {
	height: auto;
}

.modal-container header.compact-menu-header.with-search .search-container {
	margin-top: 43px;
}

.modal-container header.compact-menu-header.with-search input[type="search"] {
	margin: 0;
}

body.collapse .primary-nav header.compact-menu-header {
	width: 79px;
}

.expand-menu {
	order: 5;
}

button.open-menu {
	display: none;
	border: none;
	outline: none;
	background: #fff url('img/svg/menu.svg') center center/35px no-repeat;
	cursor: pointer;
}

@media only screen and (max-width: 666px) {
	body.collapse .primary-nav + main,
	body.collapse main,
	main {
        padding: 80px 15px 150px;
		margin-left: 0;
    }

	main.mobile-full_width,
	body.collapse .primary-nav + main.mobile-full_width,
	body.collapse main.mobile-full_width {
		padding: 80px 0 150px;
	}

	main.mobile-full_width .dash-section {
		border-right: none;
		border-left: none;
		border-radius: 0;
	}

	.mobile-only {
		display: block;
	}

	.primary-nav.open .mobile-only.expand-menu,
	.primary-nav:not(.open) .version  {
		display: none;
	}

	body.collapse .primary-nav header.compact-menu-header,
	header.compact-menu-header {
		top: 27px;
		height: 55px;
		width: calc(100% - 2px);
		left: 50%;
		border-radius: 12px 12px 0 0;
		max-width: 598px;
    	transform: translateX(-50%);
	}

	body.keyboard-open .primary-nav {
		opacity: 0;
	}
	
	.primary-nav {
		width: 100%;
		flex: 1;
		position: fixed;
		top: unset;
		right: 0;
		bottom: 0;
		left: 0;
		padding: 0;
		justify-content: flex-end;
		align-items: center;
		flex-direction: column;
		z-index: 1100;
		height: 85.8px;
	}
	.primary-nav .inner,
	body.collapse .primary-nav .inner {
		max-width: 600px;
		width: 100%;
		height: 100%;
    	flex: 1;
		border-radius: 12px 12px 0 0;
		border: 1px solid var(--nav-border);
		padding-top: 15px;
		overflow-y: hidden;
		overflow-x: hidden;
		scroll-behavior: smooth;
	}
	body.collapse .primary-nav:not(.open) .inner,
	.primary-nav:not(.open) .inner {
		padding-top: 2px;
	}
	.primary-nav:not(.open) .main-list,
	body.collapse .primary-nav:not(.open) li > a {
		display: flex;
	}
	body.collapse .primary-nav:not(.open) .main-list,
	.primary-nav:not(.open) .main-list {
		justify-content: space-between;
		padding-top: 0;
		height: auto;
		padding-bottom: 0;
		overflow-y: unset;
	}
	body.collapse .primary-nav:not(.open) li > a {
		justify-content: center;
		text-align: center;
	}
	.primary-nav:not(.open) li.has-subnav > a {
		padding: 0.75em;
	}
	.primary-nav:not(.open) li {
		max-width: 55.8px;
		max-height: 55.8px;
		width: 100%;
		height: 100%;
	}
	.primary-nav:not(.open) li.active > a:before {
		/* width: 25px;
		height: 4px;
		border-radius: 3px 3px 0 0;
		transform: translateX(-50%);
		left: 50%;
		top: unset;
		bottom: 0; */
		display: none;
	}
	.primary-nav:not(.open) .lottie-icon {
		flex: 0 0 28.8px;
		width: 28.8px;
		margin-right: 0;
	}
	.primary-nav:not(.open) li.active .lottie-icon {
		background-color: var(--notice);
	}
	.primary-nav:not(.open) li.active .lottie-icon.system-regular-23-calendar {
		mask-image: url(img/svg/nav/system-solid-23-calendar.svg);
    	-webkit-mask-image: url(img/svg/nav/system-solid-23-calendar.svg);
	}
	.primary-nav:not(.open) li.active .lottie-icon.system-regular-88-pets {
		mask-image: url(img/svg/nav/system-solid-88-pets.svg);
    	-webkit-mask-image: url(img/svg/nav/system-solid-88-pets.svg);
	}
	.primary-nav:not(.open) li.active .lottie-icon.system-regular-43-pie-chart-diagram {
		mask-image: url(img/svg/nav/system-solid-43-pie-chart-diagram.svg);
    	-webkit-mask-image: url(img/svg/nav/system-solid-43-pie-chart-diagram.svg);
	}
	.primary-nav:not(.open) li.active .lottie-icon.system-regular-47-chat {
		mask-image: url(img/svg/nav/system-solid-47-chat.svg);
    	-webkit-mask-image: url(img/svg/nav/system-solid-47-chat.svg);
	}
	/* body.collapse .primary-nav:not(.open) li > a .section-title, 
	body.collapse .primary-nav:not(.open) li:hover > a .section-title, */
	.primary-nav:not(.open) li:nth-child(n+6),
	.primary-nav:not(.open) li button.toggle,
	.primary-nav:not(.open) ul.nested-list,
	.primary-nav .special-notices,
	.compact-menu-header {
		display: none;
	}
	body.collapse .primary-nav ul.main-list {
		overflow-y: scroll;
	}
	.primary-nav.open {
		height: 100%;
		top: 0;
	}
	.primary-nav.open .inner,
	body.collapse .primary-nav.open .inner {
		min-height: 200px;
		max-height: calc(100% - 26px);
		overflow-y: auto;
		padding-top: 0;
		box-shadow: 0 11px 34px 0 rgba(0,0,0,.2);
	}
	.primary-nav.open .inner > ul {
		padding-top: 70px;
	}
	button.toggle {
		height: 55.8px;
	}
	button.nav-toggle {
		display: none;
	}
	body.collapse .primary-nav li > ul.visible {
		display: block;
	}
	body.collapse .primary-nav.open :is(.badge.pro, button.toggle),
	body.collapse .primary-nav.open .special-notices .notice,
	.primary-nav.open .compact-menu-header,
	.primary-nav.open .special-notices,
	button.open-menu {
		display: block;
	}
	body.collapse .primary-nav li > a .section-title,
	body.collapse .primary-nav li:hover > a .section-title {
		opacity: 1;
		position: relative;
		z-index: unset;
		left: unset;
		background: unset;
		padding: unset;
		border-radius: unset;
		box-shadow: none;
		display: inline-block;
		width: auto;
		overflow: hidden;
	}
	body.collapse .primary-nav:not(.open) li > a .section-title {
		position: absolute;
		left: 50%;
		color: var(--text);
		font-weight: 500;
	}
	body.collapse .primary-nav.open .lottie-icon {
		margin-right: 0.75em;
	}
	body.collapse .primary-nav .special-notices,
	.special-notices {
		max-width: 598px;
		left: 50%;
		transform: translateX(-50%);
		width: calc(100% - 2px);
		padding: 1em 3em;
	}
	.special-notices {
		box-shadow: 0 11px 34px 0 rgba(0,0,0,.2);
	}

	.primary-nav:not(.open) li:hover > a,
	.primary-nav:not(.open) li.active > a {
		background-color: transparent;
	}

	.primary-nav:not(.open) li:is(:hover,:active) > a .badge:is(.number,.indicator), 
	.primary-nav:not(.open) li.active > a .badge:is(.number,.indicator) {
		border-color: #fff;
	}

	.primary-nav:not(.open) .section-title {
		font-size: 11px;
		position: absolute;
		bottom: -5px;
		transform: translateX(-50%);
		left: 50%;
		color: var(--text);
		font-weight: 500;
		pointer-events: none;
	}

	body.collapse .primary-nav:not(.open) li.active .section-title,
	.primary-nav:not(.open) li.active .section-title {
		color: var(--notice);
	}
}

@media only screen and (max-width: 600px) {

	.primary-nav .inner,
	body.collapse .primary-nav .inner {
		border-radius: 0;
		border-right: none;
		border-left: none;
	}

}

@media only screen and (max-width: 375px) {
	.primary-nav {
		height: 64px;
	}
	
	main,
	body.collapse .primary-nav + main,
	body.collapse main,
	.modal-container .modal-card.acts-as-page .modal-inner,
	.modal-card.acts-as-page .modal-inner {
		padding: 80px 0 150px;
	}

	.page-controls {
		padding: 0 15px;
	}

	main .dash-section,
	.modal-container .modal-card.acts-as-page .modal-inner .dash-section,
	.modal-card.acts-as-page .modal-inner .dash-section {
		border-right: none;
		border-left: none;
		border-radius: 0;
	}

	.dash-section .section-head {
		border-radius: 0;
	}

	.modal-sidebar .dash-section .section-head {
		border-radius: 8px 8px 0 0;
	}
}

@media (hover: none) and (pointer: coarse) {
	.primary-nav li:not(.active):is(:hover,:active) > a,
	button.toggle:not([aria-expanded="true"]):is(:hover,:active) {
		background-color: transparent;
	}
	.primary-nav li:not(.active):hover > a .badge:is(.number,.indicator) {
		border-color: #fff;
	}
}

/*------------------------------------*\
    TOOLBAR
\*------------------------------------*/

.toolbar.settings {
	display: none;
	height: 52px;
}

.toolbar.settings .action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: var(--notice);
    position: absolute;
    bottom: 6px;
    left: 0;
}

.toolbar.settings i {
    width: 30px;
    height: 40px;
    background: var(--notice);
    display: inline-block;
    mask-image: url('img/svg/chevron-left.svg');
    -webkit-mask-image: url('img/svg/chevron-left.svg');
    mask-size: 45px;
    -webkit-mask-size: 45px;
}

.toolbar {
    padding: 15px 2em;
    margin-left: auto;
    width: calc(100% - 250px);
    display: flex;
    align-items: center;
    user-select: none;
	position: relative;
	gap: 10px;
}

body.collapse .toolbar {
	width: calc(100% - 80px);
}

.toolbar.profile .profile-data .details {
	line-height: 1;
}

.profile-data.user {
	max-width: 220px;
}

.toolbar .profile-data:nth-child(2) {
	margin-left: auto;
}

.profile-data {
	position: relative;
	display: flex;
    align-items: center;
}

.profile-data.salon {
	max-width: calc(100% - 188px);
}

.profile-data strong {
	color: var(--text-dark);
}

.avatar {
	flex: 1 0 50px;
	max-width: 50px;
	width: 50px;
	height: 50px;
	background-color: var(--bg-light);
	border-radius: 100px;
	margin-right: 10px;
	color: #fff;
	font-weight: 700;
	font-size: 1.2em;
	position: relative;
}

details.pet .avatar {
	flex: 1 0 32px;
	max-width: 32px;
	width: 32px;
	height: 32px;
	margin-right: 0.5em;
}

.sidebar-section .avatar {
	width: 100px;
	height: 100px;
	max-width: 100px;
	flex: 1 0 100px;
	font-size: 2em;
	margin-right: 0;
}

.sidebar-section .avatar .app-detector {
	bottom: 7px;
	right: 7px;
}

.prices li:is(.groomer,.pet) .avatar {
	width: 32px;
	height: 32px;
	max-width: 32px;
	flex: 1 0 32px;
}

.section-option .avatar {
	margin-right: 0;
}

.avatar.no-image {
	background-color: var(--bg-dark);
}

.avatar.pet.no-image:after {
	content: '';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	background-color: #fff;
	mask-image: url('img/svg/line/system-regular-88-pets.svg');
	mask-position: center center;
	mask-repeat: no-repeat;
	mask-size: 30px;
	-webkit-mask-image: url('img/svg/line/system-regular-88-pets.svg');
	-webkit-mask-position: center center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 30px;
}

.create-booking .modal-content details .avatar.pet.no-image:after,
ul.prices li.pet .avatar.pet.no-image:after {
	mask-size: 20px;
	-webkit-mask-size: 20px;
}

.is-dog .avatar.pet.no-image:after {
	mask-image: url('img/svg/pet-dog.svg');
	-webkit-mask-image: url('img/svg/pet-dog.svg');
}

.is-cat .avatar.pet.no-image:after {
	mask-image: url('img/svg/pet-cat.svg');
	-webkit-mask-image: url('img/svg/pet-cat.svg');
}

.is-rabbit .avatar.pet.no-image:after {
	mask-image: url('img/svg/pet-rabbit.svg');
	-webkit-mask-image: url('img/svg/pet-rabbit.svg');
}

.is-rodent .avatar.pet.no-image:after {
	mask-image: url('img/svg/pet-rodent.svg');
	-webkit-mask-image: url('img/svg/pet-rodent.svg');
}

.avatar:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 200px;
	border: 1px solid rgba(0,0,0,0.05);
	background: transparent;
	z-index: 2;
}

.avatar img {
	border-radius: 100px;
}

.chat-window .avatar,
table .avatar,
.client-list .avatar,
.prices .assigned-groomer .avatar {
	flex: 1 0 32px;
	max-width: 32px;
	width: 32px;
	height: 32px;
	font-size: 0.75em;
}

/* .profile-data .details {
	width: 100%;
} */

tbody .profile-data .details {
	min-height: 44.79px;
	line-height: 1.2;
}

.page-title {
	margin-bottom: 24px;
}

#fadeTitle1,
#fadeTitle2,
header.with-title .modal-title {
	font-size: 1em;
	font-weight: bold;
	display: inline-block;
	color: var(--text-dark);
	position: absolute;
	max-width: 150px;
	width: 100%;
	text-align: center;
	margin-inline: 70px;
}

header.with-title .booking-id {
	font-size: 1em;
	font-weight: bold;
	color: var(--text-dark);
	margin-left: auto;
}

.client-card header.with-title .modal-title {
	display: none;
}

header.with-title.with-search .modal-title {
	top: 15px;
}

#fadeTitle2 {
	transform: translate(0px, 18.8px);
	opacity: 0;
}

@media only screen and (max-width: 666px) {
	.toolbar,
	body.collapse .toolbar,
	body.collapse.modal-open .toolbar {
		width: 100%;
		padding: 6px 15px;
	}
	.avatar {
		flex: 1 0 40px;
		max-width: 40px;
		width: 40px;
		height: 40px;
	}
	.section-body.user-list .avatar,
	.tab-creator .avatar {
		flex: 1 0 50px;
		max-width: 50px;
		width: 50px;
		height: 50px;
	}
	.client-card .profile-data .avatar,
	#changebooking-group .profile-data .avatar,
	.create-booking .profile-data .avatar {
		max-width: 60px;
		width: 60px;
		height: 60px;
		flex: unset;
	}
	.client-card .sidebar-section .profile-data .avatar,
	.create-booking .sidebar-section .profile-data .avatar {
		max-width: 100px;
		width: 100px;
		height: 100px;
	}
	.profile-data.salon {
		max-width: calc(100% - 88px);
	}
	.profile-data.user .avatar {
		margin-right: 0;
	}
	.profile-data.user .details .names,
	body:not(.home) .toolbar.profile.show-header {
		display: none;
	}
	body:not(.home) .toolbar.settings.show-header {
		display: flex;
		justify-content: center;
	}
	.client-card header.with-title .modal-title {
		display: block;
	}
	tbody .profile-data .details {
		min-height: 47.99px;
	}
}

/*------------------------------------*\
    NOTIFICATIONS
\*------------------------------------*/

.toolbar .avatar {
	margin-right: 0;
}

.toolbar .profile-data {
	gap: 10px;
}

.profile-data.notifications .badge.number {
	top: -2px;
	right: -2px;
	left: unset;
	z-index: 3;
	pointer-events: none;
}

.profile-data.notifications .avatar {
	background-color: #fff;
	cursor: pointer;
}

.profile-data.notifications:not(.active):hover .avatar {
	background-color: var(--bg-light);
}

.profile-data.notifications.active .avatar {
	background-color: var(--notice-pastel);
}

.profile-data.notifications i.svgbg {
	width: 25px;
	height: 25px;
	background-color: #121331;
}

.profile-data.notifications.active i.svgbg {
	background-color: var(--notice);
}

.profile-data.notifications.active i.notifications {
	mask-image: url('img/svg/nav/system-solid-46-notification-bell.svg');
	-webkit-mask-image: url('img/svg/nav/system-solid-46-notification-bell.svg');
}

i.notifications {
	mask-image: url('img/svg/nav/system-regular-46-notification-bell.svg');
	-webkit-mask-image: url('img/svg/nav/system-regular-46-notification-bell.svg');
}

.review-solid i {
	mask-image: url('img/svg/nav/system-solid-95-star.svg');
	-webkit-mask-image: url('img/svg/nav/system-solid-95-star.svg');
}

.request-solid i,
.booking-solid i {
	mask-image: url('img/svg/nav/system-solid-23-calendar-2.svg');
	-webkit-mask-image: url('img/svg/nav/system-solid-23-calendar-2.svg');
}

.cancelled-solid i {
	mask-image: url('img/svg/nav/system-solid-29-cross.svg');
	-webkit-mask-image: url('img/svg/nav/system-solid-29-cross.svg');
}

.update-solid i {
	mask-image: url('img/svg/nav/system-solid-117-bolt.svg');
	-webkit-mask-image: url('img/svg/nav/system-solid-117-bolt.svg');
}

.maintenance-solid i {
	mask-image: url('img/svg/nav/system-solid-22-build.svg');
	-webkit-mask-image: url('img/svg/nav/system-solid-22-build.svg');
}

.bug-solid i {
	mask-image: url('img/svg/nav/system-solid-21-bug.svg');
	-webkit-mask-image: url('img/svg/nav/system-solid-21-bug.svg');
}

.rescheduled-solid i {
	mask-image: url('img/svg/nav/system-solid-150-refresh-change.svg');
	-webkit-mask-image: url('img/svg/nav/system-solid-150-refresh-change.svg');
}

.payment-solid i {
	mask-image: url('img/svg/nav/system-solid-4-account.svg');
	-webkit-mask-image: url('img/svg/nav/system-solid-4-account.svg');
}

.refund-solid i {
	mask-image: url('img/svg/nav/refunded.svg');
	-webkit-mask-image: url('img/svg/nav/refunded.svg');
}

.message-solid i {
	mask-image: url('img/svg/nav/system-solid-190-mail-envelope-close.svg');
	-webkit-mask-image: url('img/svg/nav/system-solid-190-mail-envelope-close.svg');
}

.drawer {
	display: none;
	box-shadow: #64646f33 0 7px 29px;
	background: #fff;
	border-radius: 12px;
	width: 430px;
	height: 800px;
	border: 1px solid var(--nav-border);
	position: absolute;
	right: 0;
	top: 60px;
	flex-direction: column;
	overflow: hidden;
}

.notifications.active .drawer {
	display: flex;
}

.drawer .card-title {
	border: none;
	position: relative;
	z-index: 2;
	background-color: #fff;
}

.drawer .card-footer {
	padding: 1em;
	display: flex;
}

.drawer .card-footer .btn {
	flex: 1;
}

.drawer .tabs.indent {
	padding : 0 16px;
	margin-bottom: 0;
	box-shadow: 0px 0px 5px 10px rgba(42,50,61,0);
	transition: 0.3s ease-in-out;
}

.drawer .tabs.indent:has(+ .scrolled) {
	box-shadow: 0px 0px 10px 10px rgba(42,50,61,0.1);
	z-index: 1;
}

.drawer .card-footer {
	box-shadow: 0px 0px 5px 10px rgba(42,50,61,0);
	transition: 0.3s ease-in-out;
}

.drawer .card-footer.shadow {
	box-shadow: 0px 0px 10px 10px rgba(42,50,61,0.1)!important;
	z-index: 1;
}

.drawer button.tab {
	display: flex;
	gap: 5px;
}

.drawer button.tab.active .badge.number {
	background-color: var(--notice);
	color: #fff;
}

.drawer  .badge.number span {
	font-weight: 700;
}

.drawer .badge.number {
	position: static;
    color: var(--text);
    background: var(--bg-light);
    padding: 1px 5px;
    border-radius: 3px;
    border: none;
    width: auto;
	height: unset;
    min-width: 20px;
    min-height: unset;
}

.drawer .tab-content {
	flex: 1 1 auto;
	overflow-y: scroll;
	position: relative;
}

.notification-item {
	padding: 16px;
	border-bottom: 1px solid var(--nav-border);
	background-color: #fff;
	overflow: hidden;
}

.notification-item .identifier {
	width: 37.5px;
	height: 37.5px;
	border-radius: 7.5px;
	background-color: var(--notice-pastel);
	/* flex: 1 0 37.5px; */
}

.notification-item .identifier i.svgbg {
	margin: 0;
	width: 17.5px;
	height: 17.5px;
}

.notification-text {
	/* width: 100%;
	width: calc(100% - 47.5px); */
	flex: 1;
	min-width: 0;
}

.notification-text .description {
	flex: 1;
}

.notification-text .x-small {
	font-weight: 500;
}

.notification-text p.title {
	font-size: 1em;
	line-height: 1.4;
    color: var(--text-dark);
	font-weight: 500;
}

.notification-text p {
	margin: 0;
}

.notification-message {
	padding: 1em 1em 2em;
}

/* UNREAD */

.notification-item.unread {
	background-color: var(--notice-pastel);
}

.notification-item.unread .identifier {
	background-color: var(--notice);
}

.notification-item.unread .identifier i.svgbg {
	background-color: #fff;
}

.notification-item.unread p.title {
	color: var(--notice);
	font-weight: 700;
}

/*------------------------------------*\
    MISC
\*------------------------------------*/

.faded {
	opacity: 0.5;
}

span.client-name,
.name-breed strong,
.service-name {
	text-transform: capitalize;
}

.tap-feedback:active {
	transform: scale(0.97);
}
 
a.fill-container {
	z-index: 10;
}

.fill-container {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	text-indent: -999em;
}

.no-select,
summary,
.card-title :is(h3,h4),
label,
.label,
select {
	user-select: none;
	-webkit-user-select: none;
}

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

i {
	font-style: normal;
}

.fit-cover {
	object-fit: cover;
}

.hide-scrollbar::-webkit-scrollbar {
	display: none;
}

.hide-scrollbar {
	-ms-overflow-style: none;
  	scrollbar-width: none; 
}

.no-margin {
	margin: 0!important;
}

.no-border {
	border: none;
}

.no-margin-bottom {
	margin-bottom: 0;
}

.w-regular {
	font-weight: 400;
}

.w-medium {
	font-weight: 500;
}

.w-bold {
	font-weight: 700;
}

.t-light {
	color: var(--text-light);
}

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

.cursor-pointer {
	cursor: pointer;
}

.full-height {
	height: 100%;
}

.allow-overflow {
	overflow: visible!important;
}

@media only screen and (max-width: 666px) {
	* {
		user-select: none;
		-webkit-user-select: none;
	}
	.e-content-wrap::-webkit-scrollbar {
		display: none;
	}

	.e-content-wrap {
		-ms-overflow-style: none;
		scrollbar-width: none; 
	}
}



/*------------------------------------*\
    iOS SAFARI FIXES
\*------------------------------------*/

/* _::-webkit-full-page-media, 
_:future,
:root body.ios-safari {
	overflow: hidden;
} */

@media only screen and (max-width: 430px) {
	_::-webkit-full-page-media, 
	_:future,
	:root .e-schedule {
		max-width: 100%;
		height: calc(100vh - 216px)!important;
	}
	_::-webkit-full-page-media, 
	_:future, 
	:root section.panel-main.stacked.flex .dash-section {
		max-width: 100%;
		height: calc(100vh - 221px)!important;
	}
}

@media only screen and (max-width: 375px) {
	_::-webkit-full-page-media, 
	_:future,
	:root .e-schedule {
		max-width: 100%;
		height: calc(100vh - 190px)!important;
	}
	_::-webkit-full-page-media, 
	_:future, 
	:root section.panel-main.stacked.flex .dash-section {
		max-width: 100%;
		height: calc(100vh - 195px)!important;
	}
}

/* iPad Air 11-inch M2 */
@media (min-width: 820px) and (max-width: 1180px), /* Portrait */
       (min-width: 1180px) and (max-width: 820px) { /* Landscape */
    _::-webkit-full-page-media, 
	_:future,
	:root .e-schedule {
		max-width: 100%;
		height: calc(100vh - 141px)!important;
	}
	_::-webkit-full-page-media, 
	_:future, 
	:root section.panel-main.stacked.flex .dash-section {
		max-width: 100%;
		height: calc(100vh - 208px)!important;
	}
}

/* iPad Pro 11-inch M4 */
@media (min-width: 834px) and (max-width: 1194px), /* Portrait */
       (min-width: 1194px) and (max-width: 834px) { /* Landscape */
     _::-webkit-full-page-media, 
	_:future,
	:root .e-schedule {
		max-width: 100%;
		height: calc(100vh - 141px)!important;
	}
	_::-webkit-full-page-media, 
	_:future, 
	:root section.panel-main.stacked.flex .dash-section {
		max-width: 100%;
		height: calc(100vh - 208px)!important;
	}
}

/* iPad Air 13-inch M2 */
@media (min-width: 1024px) and (max-width: 1366px), /* Portrait */
       (min-width: 1366px) and (max-width: 1024px) { /* Landscape */
    _::-webkit-full-page-media, 
	_:future,
	:root .e-schedule {
		max-width: 100%;
		height: calc(100vh - 141px)!important;
	}
	_::-webkit-full-page-media, 
	_:future, 
	:root section.panel-main.stacked.flex .dash-section {
		max-width: 100%;
		height: calc(100vh - 207px)!important;
	}
}

/* iPad Pro 13-inch M4 */
@media (min-width: 1368px) and (max-width: 2048px), /* Portrait */
       (min-width: 2048px) and (max-width: 1368px) { /* Landscape */	
	_::-webkit-full-page-media, 
	_:future, 
	:root section.panel-main.stacked.flex .dash-section {
		max-width: 100%;
		height: calc(100vh - 207px)!important;
	}
}

/* iPad Mini 6th generation */
@media (min-width: 744px) and (max-width: 1133px), /* Portrait */
       (min-width: 1133px) and (max-width: 744px) { /* Landscape */
    _::-webkit-full-page-media, 
	_:future,
	:root .e-schedule {
		max-width: 100%;
		height: calc(100vh - 141px)!important;
	}
	_::-webkit-full-page-media, 
	_:future, 
	:root section.panel-main.stacked.flex .dash-section {
		max-width: 100%;
		height: calc(100vh - 208px)!important;
	}
}