@font-face {
	font-family: qidd-standard;
	font-style: normal;
	src: url('../fonts/Manrope-Regular.ttf');
}
@font-face {
	font-family: qidd-standard-old;
	font-style: normal;
	src: url('../fonts/Murecho-Regular.ttf');
}
@font-face {
	font-family: qidd-titles;
	font-style: normal;
	src: url('../fonts/Manrope-Medium.ttf');
}
@font-face {
	font-family: qidd-subtitles;
	font-style: normal;
	src: url('../fonts/Manrope-Regular.ttf');
}
h1, h2, h3, h4, h5, h6 {
	letter-spacing: -0.02em;
	text-transform: none;
}
body {
	margin: 0;
	background-color: var(--primary-8);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
/* Scroll bar */
/* width */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
/* Track */
::-webkit-scrollbar-track {
	background: rgba(200,200,200,0);
}
/* Handle */
::-webkit-scrollbar-thumb {
	background-color: rgba(100,100,100,1);
	border-radius: 0px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background-color: rgba(50,50,50,1);
}
::-webkit-scrollbar-button {
	display: none;
}
p {
	font-family: qidd-subtitles;
	color: rgba(0,0,0,1);
	font-weight: normal;
	margin: 5px;
}
h1, h2, h3, h4, h5, h6 {
	font-family: qidd-titles;
	color: rgba(0,0,0,1);
	font-weight: normal;
	margin: 5px;
}
h1 {font-size: 23px;}
h2 {font-size: 22px;}
h3 {font-size: 21px;}
h4 {font-size: 20px;}
h5 {font-size: 19px;}
h6 {font-size: 18px;}
p {font-size: 14px;}
span.small {font-size: 13px;}
span.strong {font-family: qidd-subtitles;}
span.light {color: rgba(150,150,150,1);}
span.caps {text-transform: uppercase;}
span.wide {letter-spacing: 1px;}
@media (max-width: 900px) {
h1 {font-size: 21px;}
h2 {font-size: 20px;}
h3 {font-size: 19px;}
h4 {font-size: 18px;}
h5 {font-size: 17px;}
h6 {font-size: 16px;}
p {font-size: 14px;}
span.small {font-size: 12px;}
}
@media (max-width: 500px) {
h1 {font-size: 20px;}
h2 {font-size: 19px;}
h3 {font-size: 18px;}
h4 {font-size: 17px;}
h5 {font-size: 16px;}
h6 {font-size: 15px;}
p {font-size: 13px;}
span.small {font-size: 11px;}
}

a {
	text-decoration: none;
	color: rgba(0,0,0,1);
}

.clickable:hover {
	cursor: pointer;
}

p.request {
	padding: 2px 5px;
	margin-right: 10px;
	background-color: rgba(240,240,240,1);
	border: 1px solid rgba(200,200,200,1);
	border-radius: 5px;
	color: rgba(200,200,200,1);
	transition: 0.2s all ease-in-out;
}
p.request:hover {
	cursor: pointer;
	background-color: rgba(220,220,220,1);
}
p.request.active, p.request.mergeactive, p.request.mergeselect {
	background-color: rgba(180,220,180,1);
	color: rgba(0,0,0,1);
}

.appointment-icons {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 15px;
	width: 100%;
}
.appointment-icons-item {
	position: relative;
	float: right;
	margin: 0px 5px 2px 0px;
	height: 13px;
	width: 20px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.qidd-admin-container {
	position: relative;
	box-sizing: border-box;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	padding: 0px;
	width: 900px;
	min-height: 100%;
	text-align: center;
	z-index: 99999;
}
@media (max-width: 900px) {
.qidd-admin-container {
	width: 100%;
	padding: 0px;
}
}
@media (max-width: 500px) {
.qidd-admin-container {
	width: 100%;
	padding: 0px;
}
}
#qidd-sidebar {
	margin-left: 0px;
	transition: 0.2s all ease-in-out;
}
#qidd-sidebar.off {
	margin-left: -200px;
}


#qidd-admin-inner {
	width: calc(100% - 230px);
	min-height: calc(100vh - 50px);
	padding: 10px;
	box-sizing: border-box;
	transition: 0.2s all ease-in-out;
}

#qidd-admin-inner {
	width: calc(100% - 250px);
	min-height: calc(100vh - 50px);
	margin-top: 50px;
	margin-left: 50px;
	padding: 0px;
	box-sizing: border-box;
	background-color: var(--primary-8);
	border-left: 1px solid rgba(255,255,255,1);
	transition: 0.2s all ease-in-out;
}

@media (max-width: 450px) {
	#qidd-admin-inner {
		width: calc(100% - 200px);
		min-height: calc(100vh - 90px);
		margin-left: 0px;
		padding: 0px;
		box-sizing: border-box;
		transition: 0.2s all ease-in-out;
	}
}


#qidd-admin-inner.off {
	width: calc(100% - 50px);
}
@media (max-width: 450px) {
	#qidd-admin-inner.off {
		width: 100%;
	}
}


.qidd-admin-sidebar {
	position: relative;
	float: left;
	top: 50px;
	left: 50px;
	padding: 0px;
	width: 200px;
	height: 100%;
	box-sizing: border-box;
}
@media (max-width: 450px) {
	.qidd-admin-sidebar {
		left: 0px;
	}
}
.qidd-admin-sidebar-collapse {
	position: fixed;
	float: left;
	width: 50px;
	height: 40px;
	border-right: 1px solid rgba(255,255,255,1);
	background-color: rgba(220,220,220,1);
	background-size: 50%;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 999999;
}
.qidd-admin-sidebar-collapse:hover {
	cursor: pointer;
}
@media (max-width: 600px) {
.qidd-admin-menu-button {
	position: fixed;
	top: 0px;
	right: 0px;
	height: 40px;
	width: 40px;
	background-color: var(--primary-2);
	border-radius: 0px 0px 0px 5px;
	z-index: 99999999999999999999999;
	transition: 0.5s ease-in-out;
}
.qidd-admin-menu-button.show {
	right: 200px;
	transition: 0.5s ease-in-out;
}
.qidd-admin-menu-button:hover {
	cursor: pointer;
}
.qidd-admin-menu-button-strip {
	position: relative;
	height: 2px;
	width: 20px;
	background-color: rgba(230,230,230,1);
	transition: 0.5s ease-in-out;
}
.qidd-admin-menu-button-strip.top {
	top: 11px;
	left: 10px;
}
.qidd-admin-menu-button-strip.middle {
	top: 15px;
	left: 10px;
}
.qidd-admin-menu-button-strip.bottom {
	top: 19px;
	left: 10px;
}
.qidd-admin-menu-button.show .qidd-admin-menu-button-strip.top {
	transform: rotate(45deg);
	top: 18px;
}
.qidd-admin-menu-button.show .qidd-admin-menu-button-strip.middle {
	background-color: rgba(230,230,230,0);
}
.qidd-admin-menu-button.show .qidd-admin-menu-button-strip.bottom {
	transform: rotate(-45deg);
	top: 14px;
}
}
@media (max-width: 600px) {
#qidd-menu {
	position: fixed;
	display: inline-block;
	padding-top: 40px;
	top: 0px;
	right: -200px;
	height: 100vh;
	width: 200px;
	background-color: var(--primary-2);
	box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
	z-index: 999999999999999999999;
	transition: 0.5s ease-in-out;
}
#qidd-menu.show {
	right: 0px;
}
.qidd-admin-menu-item p {
	color: var(--secondary-1);
}
.qidd-admin-menu-item {
	float: left;
	width: 100%;
	color: var(--secondary-1) !important;
}
.qidd-admin-menu-item:hover {
	color: var(--secondary-8) !important;
}
}
.qidd-admin-inner {
	position: relative;
	float: left;
	width: calc(100% - 220px);
	background-color: rgba(255,255,255,1);
}
#qidd-main-page-container.blur {
	transition: 0s;
	
}
@media (max-width: 900px) {
.qidd-admin-inner {
	position: relative;
	float: left;
	width: 100%;
	background-color: rgba(255,255,255,1);
}	
}
.qidd-intercept {
	visibility: hidden;
	display: none;
	opacity: 0;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,0.8);
	transition: 0.2s all ease-in-out;
	z-index: 99;
	z-index: 9999999999999999999999999999999999999;
}
.qidd-intercept.show {
	visibility: visible;
	display: block;
	opacity: 1;
	top: 0;
}
.qidd-intercept2 {
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,0.6);
	transition: 0.1s all ease-in-out;
	animation-name: intercept-open;
	animation-duration: 0.1s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	z-index: 9999999999999999999999999999999999999;
}
@keyframes intercept-open {
  from {opacity: 0;}
  to {opacity: 1;}
}
.qidd-intercept-inner {
	position: absolute;
	padding: 0px 10px;
	top: 50%;
	left: 50%;
	width: 500px;
	max-height: 90%;
	overflow-y: scroll;
	transform: translate(-50%, -50%);
	border-radius: 7px;
	background-color: rgba(255,255,255,1);
	box-shadow: 0px 0px 10px rgba(0,0,0,1);
}
@media (max-width: 520px) {
.qidd-intercept-inner {
	width: 97%;
}
}

.dot-menu {
	position: absolute;
	top: 5px;
	right: 5px;
	height: 25px;
	width: 25px;
}
.dot-menu:hover {
	cursor: pointer;
}
.dot-menu .a, .dot-menu .b, .dot-menu .c {
	position: absolute;
	right: 11px;
	height: 3px;
	width: 3px;
	background-color: rgba(0,0,0,0.6);
	border-radius: 50%;
	transition: 0.2s all ease-in-out;
}
.dot-menu .a {top: 4px;}
.dot-menu .b {top: 10px;}
.dot-menu .c {top: 16px;}
.dot-menu:hover .a {right: 5px; top: 10px;}
.dot-menu:hover .c {right: 17px; top: 10px;}
.dot-menu .wrapper {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	padding: 5px;
	top: 50px;
	right: 0px;
	height: fit-content;
	width: fit-content;
	background-color: rgba(255,255,255,1);
	box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
	transition: 0.2s all ease-in-out;
	z-index: 99999999999999999999999999999999999;
}
.dot-menu .wrapper.on {
	visibility: visible;
	opacity: 1;
	top: 27px;
}
.dot-menu p {
	font-family: qidd-subtitles;
	font-size: 14px;
	padding: 5px;
	margin: 0;
	float: left;
	text-align: center;
	min-width: 100px;
}
.dot-menu p:hover {
	background-color: rgba(0,0,0,0.1);
}

.qidd-close-button {
	position: absolute;
	height: 40px;
	width: 40px;
	top: 4px;
	right: 4px;
	border-radius: 50%;
	background-color: rgba(100,100,100,0);
	transition: 0.2s all ease-in-out;
	z-index: 99999999999999999999;
}
.qidd-close-button:hover {
	background-color: rgba(200,200,200,0);
	cursor: pointer;
}
.qidd-close-button::before {
	content: "";
	position: absolute;
	height: 2px;
	width: 19px;
	top: 18px;
	left: 11px;
	transform: rotate(45deg);
	background-color: rgba(100,100,100,1);
	transition: 0.2s all ease-in-out;
}
.qidd-close-button::after {
	content: "";
	position: absolute;
	height: 2px;
	width: 19px;
	top: 18px;
	left: 11px;
	transform: rotate(-45deg);
	background-color: rgba(100,100,100,1);
	transition: 0.2s all ease-in-out;
}
.qidd-close-button:hover::before, .qidd-close-button:hover::after {
	background-color: rgba(50,50,50,1);
}

.qidd-logo {
	position: absolute;
	float: left;
	left: 0;
	top: 10px;
	margin-left: 20px;
	height: 20px;
	width: 195px;
	background-size: contain;
	background-repeat: no-repeat;
	transition: all ease-in-out 0.2s;
	z-index: 999;
}
@media (max-width: 900px) {
.qidd-logo {
}
}
.qidd-admin-menu {
	position: relative;
	height: 40px;
	background-color: var(--primary-2);
	box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
	z-index: 9999;
}
.qidd-admin-menu-item {
	position: relative;
	padding: 5px;
	height: 30px;
	font-family: qidd-titles;
	line-height: 30px;
	color: rgba(255,255,255,1);
	font-size: 14px;
	text-align: center;
	transition: 0.2s all ease-in-out;
}
.qidd-admin-menu-item:hover {
	cursor: pointer;
	color: var(--secondary-1);
	transition: 0.1s all ease-in-out;
}
.qidd-admin-menu-item.selected {
	color: var(--secondary-1);
}
.qidd-admin-sidebar-menu-item {
	float: left;
	padding: 5px;
	margin: 0px 0px;
	height: 30px;
	width: calc(100% - 10px);
	font-family: qidd-titles;
	line-height: 30px;
	color: rgba(50,50,50,1);
	font-size: 14px;
	text-align: center;
	transition: 0.2s all ease-in-out;
	outline: 1px solid rgba(255,255,255,1);
	background-image: linear-gradient(to top right, var(--primary-7), var(--primary-8));
}
.qidd-admin-sidebar-menu-item:hover {
	cursor: pointer;
	background-image: linear-gradient(to bottom right, var(--primary-5), var(--primary-6));
	transition: 0.1s all ease-in-out;
}

/*===================================
 JUDJANG ADMIN MENU AND HEADER
=====================================*/
.judjang-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background-color: var(--primary-2);
	z-index: 999999999999999999999999999;
}
.judjang-logo {
	position: fixed;
	top: 10px;
	left: 60px;
	height: 30px;
	width: 100%;
	box-sizing: border-box;
	background-size: contain;
	background-position: left;
	background-repeat: no-repeat;
}
.judjang-logo-icon {
	position: fixed;
	top: 0px;
	left: 0px;
	height: 50px;
	width: 50px;
	border-right: 1px solid rgba(255,255,255,1);
	box-sizing: border-box;
	background-color: var(--primary-3);
	background-size: contain;
	background-position: left;
	background-repeat: no-repeat;
}
.version-info {
	opacity: 0.5;
	position: fixed;
	top: 15px;
	right: 10px;
	height: 20px;
	width: 20px;
	box-sizing: border-box;
	background-size: contain;
	background-position: left;
	background-repeat: no-repeat;
}
.version-info:hover {
	opacity: 1;
	cursor: pointer;
}

.judjang-admin-menu {
	position: fixed;
	top: 50px;
	left: 0;
	height: calc(100vh - 40px);
	width: 50px;
	background-color: var(--primary-7);
	z-index: 99990;
}
.judjang-admin-menu-item {
	position: relative;
	opacity: 0.7;
	box-sizing: border-box;
	float: left;
	margin: 0px;
	height: calc((100vh - 50px) * 0.1111111111);
	width: 50px;
	border-top: 1px solid var(--primary-7);
	border-right: 1px solid rgba(255,255,255,1);
	background-color: var(--primary-5);
	background-size: 80%;
	background-position: center;
	background-repeat: no-repeat;
	transition: all 0.1s ease-in-out;
}
.judjang-admin-menu-item:hover {
	cursor: pointer;
	background-color: var(--primary-5);
	background-size: 90%;
	opacity: 1;
}
@media (max-width: 450px) {
	.judjang-admin-menu {
		bottom: 0px;
		top: auto;
		height: 50px;
		width: 100%;
	}
	.judjang-admin-menu-item {
		margin: 0px;
		height: 50px;
		width: 11.11%;
		border-top: 1px solid var(--primary-6);
		border-right: 1px solid var(--primary-6);
	}
}
.judjang-admin-menu-item.selected {
	background-color: var(--primary-5);
	opacity: 1;
}
.judjang-admin-menu-item.sidebar {
	background-color: var(--primary-7);
}

.judjang-secondary-menu {
	position: fixed;
	top: 0;
	left: 0;
	height: 40px;
	width: 100%;
	background-color: var(--greyscale-7);
	z-index: 9999;
}
.judjang-secondary-menu-inner {
	position: relative;
	float: right;
}
.judjang-secondary-menu-item-wrapper {
	position: relative;
	float: right;
}
.judjang-secondary-menu-item {
	position: relative;
	box-sizing: border-box;
	float: left;
	padding: 0px 10px;
	margin: 0;
	height: 40px;
	width: fit-content;
	border-right: 1px solid var(--greyscale-6);
	background-color: var(--greyscale-7);
	background-size: 50%;
	background-position: center;
	background-repeat: no-repeat;
	transition: all 0.1s ease-in-out;
	font-family: qidd-subtitles;
	font-size: 14px;
	line-height: 40px;
	text-align: center;
	color: rgba(0,0,0,1);
}
.judjang-secondary-menu-item:hover {
	color: var(--secondary-1);
	cursor: pointer;
}

.judjang-menu-button {
	visibility: hidden;
	display: none;
	position: relative;
	margin-right: 20px;
	height: 40px;
	width: 40px;
	background-color: rgba(255,255,255,0);
}
.judjang-menu-button-line {
	position: absolute;
	height: 2px;
	width: 80%;
	background-color: rgba(0,0,0,1);
	transition: all 0.2s ease-in-out;
}
.judjang-menu-button-line.a {
	left: 0;
	top: 15px;
}
.judjang-menu-button-line.b {
	right: 0;
	top: 23px;
}
.judjang-menu-button:hover {
	cursor: pointer;
}
.judjang-menu-button:hover .judjang-menu-button-line {
	width: 100%;
}


@media (max-width: 450px) {
	.judjang-menu-button {
		visibility: visible;
		display: inline-block;
	}
	.judjang-secondary-menu-item-wrapper {
		visibility: hidden;
		position: fixed;
		min-width: 100%;
		top: 40px;
		left: 100vw;
		height: calc(100vh - 40px);
		background-color: rgba(255,255,255,0);
	}
	.judjang-secondary-menu-item-wrapper.on {
		visibility: visible;
		top: 40px;
		left: 0;
	}
	.judjang-secondary-menu-item {
		height: 50px;
		width: 100%;
		line-height: 50px;
		margin-left: 100vw;
		border-right: 0px solid var(--greyscale-6);
		border-bottom: 1px solid var(--greyscale-6);
		border-top: 1px solid var(--greyscale-6);
		transition: all 0.3s ease-in-out;
	}
	.judjang-secondary-menu-item-wrapper.on .judjang-secondary-menu-item {
		margin-left: 0;
	}
}

/*===================================
 GRID FOR CHOOSING TREATMENT/TIME
=====================================*/
.qidd-grid-container {
	position: relative;
	display: grid;
	column-gap: 0px;
	row-gap: 0px;
	width: 100%;
	box-sizing: border-box;
}
.qidd-grid-container.col-1{grid-template-columns: auto;}
.qidd-grid-container.col-2{grid-template-columns: auto auto;}
.qidd-grid-container.col-3{grid-template-columns: auto auto auto;}
.qidd-grid-container.col-4{grid-template-columns: auto auto auto auto;}
.qidd-grid-container.col-5{grid-template-columns: auto auto auto auto auto;}
.qidd-grid-container.col-6{grid-template-columns: auto auto auto auto auto auto;}
.qidd-grid-container.col-7{grid-template-columns: auto auto auto auto auto auto auto;}
.qidd-grid-container.col-8{grid-template-columns: auto auto auto auto auto auto auto auto;}
.qidd-grid-container.col-9{grid-template-columns: 4.5% 13% 13% 13% 13% 13% 13% 13% 4.5%;}
.qidd-grid-container.col-10{grid-template-columns: auto auto auto auto auto auto auto auto auto auto;}
.qidd-grid-container.col-11{grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto;}
.qidd-grid-container.col-12{grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto;}
@media (max-width: 1300px) {
.qidd-grid-container.col-1{grid-template-columns: auto;}
.qidd-grid-container.col-2{grid-template-columns: auto auto;}
.qidd-grid-container.col-3{grid-template-columns: auto auto auto;}
.qidd-grid-container.col-4{grid-template-columns: auto auto auto auto;}
.qidd-grid-container.col-5{grid-template-columns: auto auto auto auto auto;}
.qidd-grid-container.col-6{grid-template-columns: auto auto auto auto auto auto;}
.qidd-grid-container.col-7{grid-template-columns: auto auto auto auto auto auto auto;}
.qidd-grid-container.col-8{grid-template-columns: auto auto auto auto auto auto auto auto;}
.qidd-grid-container.col-9{grid-template-columns: 4.5% 13% 13% 13% 13% 13% 13% 13% 4.5%;}
.qidd-grid-container.col-10{grid-template-columns: auto auto auto auto auto auto auto auto auto auto;}
.qidd-grid-container.col-11{grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto;}
.qidd-grid-container.col-12{grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto;}	
}
@media (max-width: 500px) {
.qidd-grid-container.col-1{grid-template-columns: auto;}
.qidd-grid-container.col-2{grid-template-columns: auto auto;}
.qidd-grid-container.col-3{grid-template-columns: auto auto auto;}
.qidd-grid-container.col-4{grid-template-columns: auto auto auto auto;}
.qidd-grid-container.col-5{grid-template-columns: auto auto auto auto auto;}
.qidd-grid-container.col-6{grid-template-columns: auto auto auto auto auto auto;}
.qidd-grid-container.col-7{grid-template-columns: auto auto auto auto auto auto auto;}
.qidd-grid-container.col-8{grid-template-columns: auto auto auto auto auto auto auto auto;}
.qidd-grid-container.col-9{grid-template-columns: 4.5% 13% 13% 13% 13% 13% 13% 13% 4.5%;}
.qidd-grid-container.col-10{grid-template-columns: auto auto auto auto auto auto auto auto auto auto;}
.qidd-grid-container.col-11{grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto;}
.qidd-grid-container.col-12{grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto;}
}
.qidd-grid-container.gap-1{padding: 1px; column-gap: 1px; row-gap: 1px;}
.qidd-grid-container.gap-2{padding: 5px; column-gap: 5px; row-gap: 5px;}
.qidd-grid-container.gap-3{column-gap: 10px; row-gap: 10px;}
.qidd-grid-container.gap-4{padding: 15px; column-gap: 15px; row-gap: 15px;}
.qidd-grid-container.gap-5{padding: 20px; column-gap: 20px; row-gap: 20px;}

.qidd-grid-container.settings {
	width: fit-content;
	margin-right: 10px;
}

.qidd-grid-container.footer .qidd-grid-item {
	border-top: 1px solid rgba(0,0,0,0.2);
	background-color: rgba(255,255,255,1);
}
.qidd-grid-container.footer.no-border .qidd-grid-item {
	border-top: 0px solid rgba(0,0,0,0.2);
}

.qidd-grid-item {
	position: relative;
	display: flex;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0);
}
.qidd-grid-item.justify-left{justify-content: left;}
.qidd-grid-item.justify-right{justify-content: right;}
.qidd-grid-item.align-top{align-items: start;}
.qidd-grid-item.vertical{flex-direction: column;}
.qidd-grid-item.dark{background-color: rgba(80,80,80,1);}
.qidd-grid-item.light{background-color: rgba(180,180,180,1);}
.qidd-grid-item.bluegradient{background-image: linear-gradient(to bottom, rgba(200,200,250,1), rgba(150,150,200,1));}
.qidd-grid-item.bluegradient:hover{background-image: linear-gradient(to bottom, rgba(140,140,180,1), rgba(80,80,140,1));}
.qidd-grid-item.bluegradient.selected{background-image: linear-gradient(to bottom, rgba(100,100,140,1), rgba(40,40,100,1));}
.qidd-grid-item.bluegradient p{color: rgba(255,255,255,1);}
.qidd-grid-item.lightgradient{background-image: linear-gradient(to bottom, rgba(250,250,250,1), rgba(200,200,200,1));}
.qidd-grid-item.lightgradient:hover{background-image: linear-gradient(to bottom, rgba(180,180,180,1), rgba(120,120,120,1));}
.qidd-grid-item.fontmargin-0 p{margin: 0;}
.qidd-grid-item.shadow {box-shadow: 0px 0px 5px rgba(0,0,0,0.1);}
.qidd-grid-item.selected{background-color: rgb(200,200,200,1);}
.qidd-grid-item.curved{border-radius: 3px; border: 1px solid rgba(200,200,200,1); margin: 5px; padding: 10px; background-color: rgba(255,255,255,1);}
.qidd-grid-item.buttons{border-radius: 10px; padding: 0px; background-color: rgba(255,255,255,0); box-shadow: 0px 0px 0px rgba(0,0,0,0);}

a .qidd-grid-item:hover{background-color: rgba(200,200,200,1);}

.qidd-grid-item.s-1{grid-column-start: 1;}
.qidd-grid-item.s-2{grid-column-start: 2;}
.qidd-grid-item.s-3{grid-column-start: 3;}
.qidd-grid-item.s-4{grid-column-start: 4;}
.qidd-grid-item.s-5{grid-column-start: 5;}
.qidd-grid-item.s-6{grid-column-start: 6;}
.qidd-grid-item.s-7{grid-column-start: 7;}
.qidd-grid-item.s-8{grid-column-start: 8;}
.qidd-grid-item.s-9{grid-column-start: 9;}
.qidd-grid-item.s-10{grid-column-start: 10;}
.qidd-grid-item.s-11{grid-column-start: 11;}
.qidd-grid-item.s-12{grid-column-start: 12;}

.qidd-grid-item.e-1{grid-column-end: 1;}
.qidd-grid-item.e-2{grid-column-end: 2;}
.qidd-grid-item.e-3{grid-column-end: 3;}
.qidd-grid-item.e-4{grid-column-end: 4;}
.qidd-grid-item.e-5{grid-column-end: 5;}
.qidd-grid-item.e-6{grid-column-end: 6;}
.qidd-grid-item.e-7{grid-column-end: 7;}
.qidd-grid-item.e-8{grid-column-end: 8;}
.qidd-grid-item.e-9{grid-column-end: 9;}
.qidd-grid-item.e-10{grid-column-end: 10;}
.qidd-grid-item.e-11{grid-column-end: 11;}
.qidd-grid-item.e-12{grid-column-end: 12;}

.qidd-grid-item.py-1{padding: 5px 0px;}
.qidd-grid-item.py-2{padding: 10px 0px;}
.qidd-grid-item.py-3{padding: 15px 0px;}
.qidd-grid-item.py-4{padding: 20px 0px;}
.qidd-grid-item.py-5{padding: 25px 0px;}

.qidd-grid-item.left {
	align-items: start;
	justify-content: left;
}
.qidd-grid-item.right {
	align-items: end;
	justify-content: right;
}
.qidd-grid-item.centre {
	align-items: center;
	justify-content: center;
}

.qidd-grid-item.border-bottom {
	border-bottom: 1px solid rgba(0,0,0,0.3);
}
.qidd-grid-item.border-top {
	border-top: 1px solid rgba(0,0,0,0.3);
}

.treatments-box {
	
}
.treatments-box .footer {
	position: relative;
	width: 100%;
	border-top: 1px solid rgba(0,0,0,0.2);
}
.treatments-box .footer .qidd-js-button {
	float: left;
}


.qidd-grid-container form {
	height: 100%;
	width: 100%;
	
}


.qidd-grid-container [type=submit].confirm {
	background-image: linear-gradient(to bottom, rgba(65,145,65,1), rgba(35,115,35,1));
}
.qidd-grid-container [type=submit].cancel {
	background-image: linear-gradient(to bottom, rgba(145,65,65,1), rgba(115,35,35,1));
}
.qidd-grid-container [type=submit].confirm:hover {
	background-image: linear-gradient(to bottom, rgba(35,115,35,1), rgba(15,85,15,1));
}
.qidd-grid-container [type=submit].cancel:hover {
	background-image: linear-gradient(to bottom, rgba(115,35,35,1), rgba(85,15,15,1));
}
#submit_voucher_button {
	visibility: hidden;
}
#submit_voucher_button.show {
	visibility: visible;
}


/*===================================
 END
=====================================*/
.request-warning::after {
	content: "Warning: you are changing a therapist who was requested.";
    position: absolute;
    top: 0;
    left: 100%;
    font-family: 'qidd-standard';
    font-size: 12px;
    line-height: 30px;
	color: rgba(255,0,0,1);
}
.qidd-toggle {
	position: relative;
	height: 16px;
	width: 40px;
	border-radius: 3px;
	border: 1px solid rgba(200,200,200,1);
	background-color: rgba(230,230,230,1);
}
.qidd-toggle::before {
	content: "";
	position: absolute;
	top: -3px;
	left: -1px;
	height: 20px;
	width: 20px;
	border-radius: 3px;
	border: 1px solid rgba(100,100,200,1);
	background-color: rgba(100,100,200,1);
	transition: 0.2s all ease-in-out;
}
.qidd-toggle:hover {
	cursor: pointer;
}
.qidd-toggle.block::before {
	left: 21px;
}

.qidd-capacity-gauge {
	position: absolute;
	left: 5px;
	top: 5px;
	height: calc(100% - 10px);
  	width: 3px;
  	border-radius: 5px;
	border: 0px solid rgba(240,240,240,1);
  	background-color: var(--primary-2);
}
.qidd-capacity-gauge-bar {
 	position: absolute;
	bottom: 0;
  	width: 3px;
	border-radius: 5px;
  	background-color: rgba(255,0,0,1);
}
.qidd-grid-item.hidden {
	visibility: hidden;
	display: none;
}
.qidd-grid-item.show {
	visibility: visible;
	display: flex;
}

/*===================================
 CALENDAR
=====================================*/
.qidd-grid-container.calendar-7{
	grid-template-columns: 14.29% 14.29% 14.29% 14.29% 14.29% 14.29% 14.29%;
	background-color: var(--primary-7);
}
.qiddadmincalendar {
	position: relative;
	box-sizing: border-box;
	height: 660px;
	width: 100%;
	padding: 5px;
	margin-top: 0px;
	margin-bottom: 80px;
	border-radius: 0px;
	background-color: rgba(255,255,255,1);
	box-shadow: 0px 3px 8px rgba(0,0,0,0);
}
.qiddadmincalendar p, .qiddadmincalendar h3 {
	padding: 0;
	margin: 0;
	text-align: center
}
.qiddadmincalendar-timecol {
	float: left;
	height: 100%;
	width: 60px;
	margin: 0px 0px;
}
.qiddadmincalendar-timeslot {
	position: relative;
	width: 100%;
	height: calc(100%/23);
	box-sizing: border-box;
}
.qiddadmincalendar-scrollcol {
	float: left;
	height: calc(100% + 6px);
	width: calc(100% - 65px);
	margin: 0px 0px;
	overflow-x: scroll;
	overflow-y: hidden;
}
.qiddadmincalendar-header {
	position: relative;
	height: 30px;
	width: 100%;
}
.qiddadmincalendar-content {
	position: relative;
	height: calc(100% - 30px);
	width: 100%;
}
.weekarrow {
	opacity: 0.6;
	height: 35px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-color: rgba(255,255,255,0);
	transition: 0.2s all ease-in-out;
}
.weekarrow:hover {
	opacity: 1;
	background-color: rgba(255,255,255,0) !important;
}
.dayselect {
	height: 50px;
	border-top: 1px solid var(--primary-8);
	border-left: 0px solid var(--primary-8);
	border-right: 1px solid var(--primary-8);
	background-color: var(--primary-6) !important;
	transition: 0.2s all ease-in-out;
}
.dayselect.selected {
	background-color: var(--secondary-1) !important;
	border-top: 1px solid var(--primary-8) !important;
}
.dayselect:hover {
	background-color: var(--primary-5) !important;
	border-top: 1px solid var(--primary-8) !important;
}
.dayselect.selected:hover {
	background-color: var(--secondary-1) !important;
}
.dayselect p{
	color: var(--primary-3) !important;
}
.dayselect:hover p{
	color: rgba(0,0,0,1) !important;
	font-weight: bold;
}
.dayselect.selected p{
	font-weight: bold;
	color: rgba(0,0,0,1) !important;
}
.qiddadmincalendar-timeslot {
	position: absolute;
	left: 0%;
	width: 100%;
	z-index: 10;
	transition: 0.2s all ease-in-out;
}
.qiddadmincalendar-timeslot p {
	font-size: 12px;
	margin-top: -6px;
}
.qiddadmincalendar-staffwrapper {
	position: relative;
	height: 100%;
}
.qiddadmincalendar-indicator {
	position: absolute;
	height: 1px;
	width: 100%;
	background-image: linear-gradient(to right, rgba(0,0,0,0.7) 3px, rgba(0,0,0,0) 3px );
	background-size: 5px 100%;
	z-index: 9999;
}


.qiddadmincalendar-staffcol {
	float: left;
	height: 100%;
	width: 250px;
	margin: 0px 2px;
	border-radius: 10px 10px 0px 0px;
	background-color: rgba(255,255,255,1);
}
.qiddadmincalendar-bookings {
	position: relative;
	height: calc(100% - 30px);
	width: 100%;
}
.qiddadmincalendar-appt {
	position: absolute;
	padding: 3px 6px;
	width: 100%;
	box-sizing: border-box;
	border-bottom: 1px solid rgba(255,255,255,1);
	border-radius: 8px;
	background-color: rgba(130,130,170,1);
	color: rgba(255,255,255,1);
	z-index: 20;
	transition: 0.2s all ease-in-out;
}

.qiddadmincalendar-appt.request::before, .qiddadmincalendar-appt.info::after {
	position: absolute;
	height: 10px;
	padding: 0px 3px;
	font-family: qidd-standard;
	font-weight: bold;
	font-size: 10px;
	line-height: 10px;
	bottom: 3px;
	border-radius: 5px;
	background-color: rgba(255,255,255,1);
	color: rgba(0,0,0,1);
}
.qiddadmincalendar-appt.info::after {
	content: "i";
	right: 3px;
}
.qiddadmincalendar-appt.request::before {
	content: "Request";
	left: 3px;
}
.qiddadmincalendar-appt.couples::before {
	content: "";
	position: absolute;
	width: 32px;
	height: 10px;
	left: 39px;
	bottom: 3px;
	background-size: cover;
	background-image: url('../images/icon-couple.svg');
}
.qiddadmincalendar-appt p {
	text-align: left;
	font-size: 12px !important;
	color: rgba(255,255,255,1) !important;
	line-height: 14px !important;
}
.qiddadmincalendar-apptfree {
	position: absolute;
	left: 0%;
	width: 100%;
	background-color: rgba(255,255,255,0);
	z-index: 10;
	transition: 0.2s all ease-in-out;
}
.qiddadmincalendar-apptfree.outsideHours {
	background-color: rgba(240,240,240,1);
}
.qiddadmincalendar-appt:hover {
	background-color: var(--primary-2) !important;
	cursor: pointer;
}
.qiddadmincalendar-appt.checkout:hover {
	background-color: rgba(205,150,85,1) !important;
}
.qiddadmincalendar-apptfree:hover {
	background-color: var(--primary-7);
	cursor: pointer;
}
.qiddadmincalendar-apptfree:hover::after {
	content: "New";
	font-family: qidd-standard;
	position: absolute;
	left: 50%;
	top: 50%;
	font-size: 10px;
	line-height: 30px;
	color: rgba(255,255,255,1);
	transform: translateX(-50%) translateY(-50%);
}




/*===================================
 END
=====================================*/


































.qidd-booking-header {
	position: relative;
	height: 60px;
	width: 100%;
}

.qidd-booking-header-item {
	position: relative;
	float: right;
	margin-right: 20px;
	height: 60px;
}
.qidd-booking-header-item h6 {
	font-size: 12px;
	margin: 0;
	line-height: 60px;
	transition: 0.2s all ease-in-out;
}
.qidd-booking-header-item:hover h6 {
	text-decoration: underline;
}


button-select {
	padding: 5px;
	margin: 0px 20px;
	background-color: rgba(240,240,240,1);
	color: rgba(0,0,0,1);
	transition: 0.3s all ease-in-out;
}
.button-select:hover {
	cursor: pointer;
	background-color: rgba(200,200,200,1);
}





.booking-calendar-header {
	position: relative;
	width: 100%;
	height: 40px;
}
.booking-calendar-header-item {
	float: left;
	font-size: 15px;
	width: 20%;
	height: 40px;
	line-height: 40px;
	color: rgba(210,210,210,1);
	background-color: rgba(80,80,100,0);
	background-image: linear-gradient(to bottom, rgba(95,95,115,1), rgba(65,65,85,1));
	border-radius: 3px;
}
.booking-calendar-header-item:hover {
  background-image: linear-gradient(to bottom, rgba(65,65,85,1), rgba(35,35,55,1));
}
.booking-calendar-header-item.month {
	width: 60%;
	color: rgba(0,0,0,1);
	background-image: linear-gradient(to bottom, rgba(95,95,115,0), rgba(65,65,85,0));
}
.booking-calendar-header-item.month:hover {
  background-image: linear-gradient(to bottom, rgba(65,65,85,0), rgba(35,35,55,0));
}

.qidd-close {
	position: absolute;
	top: -10px;
	right: -10px;
	height: 30px;
	width: 30px;
	background-color: rgba(255,255,255,1);
	box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
	border-radius: 50%;
	transition: 0.1s all ease-in-out;
}
.qidd-close::before {
	content: "";
	position: absolute;
	top: 14px;
	right: 5px;
	height: 1px;
	width: 20px;
	transform: rotate(45deg);
	background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1), rgba(0,0,0,0));
	transition: 0.3s all ease-in-out;
}
.qidd-close::after {
	content: "";
	position: absolute;
	top: 14px;
	right: 5px;
	height: 1px;
	width: 20px;
	transform: rotate(-45deg);
	background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1), rgba(0,0,0,0));
	transition: 0.3s all ease-in-out;
}
.qidd-close:hover {
	cursor: pointer;
}

.date-picker {
	float: left;
	width: 100%;
	margin-top: 10px;
}
.date-picker p {
	font-size: 13px;
}
.date-picker .date {
	float: left;
	min-height: 30px;
	width: calc(100% / 7);
	text-align: center;
	background-color: rgba(200,200,200,0);
}
.date-picker .date:hover {
	cursor: pointer;
	background-color: rgba(30,30,30,1);
}
.date-picker .date.selected {
	color: rgba(255,255,255,1);
	background-color: rgba(30,30,30,1);
}
.date-tag {
	float: left;
	margin-top: -1px;
	width: 100%;
	color: rgba(255,255,255,1);
	background-color: rgba(30,30,30,1);
}
.date.greyOut p{
	color: rgba(150,150,150,1);
}
.time-picker {
	float: left;
	margin-top: 10px;
	width: 100%;
}
.time-picker p {
	font-weight: bold;
	font-size: 15px;
	line-height: 3em;
	margin: 1px;
	color: rgba(210,210,210,1);
}
.time-picker .time-container {
	position: relative;
	float: left;
	width: 50%;
	padding: 1px;
}
.time-picker .time {
	height: 50px;
	border-radius: 1px;
	background-image: linear-gradient(to bottom, rgba(95,95,115,1), rgba(65,65,85,1));
}
.time-picker .time:hover {
	cursor: pointer;
	background-image: linear-gradient(to bottom, rgba(65,65,85,1), rgba(35,35,55,1));
}




.treatment-picker {
	position: relative;
	display: grid;
	grid-template-columns: auto auto;
	width: 100%;
}
@media (max-width: 1300px) {
.treatment-picker {
	grid-template-columns: auto auto;
}	
}
@media (max-width: 500px) {
.treatment-picker {
	grid-template-columns: auto;
}
}
.choose-treatment {
	position: relative;
	border: 1px solid rgba(55,55,65,1);
	width: 100%;
	height: 100px;
	background-image: linear-gradient(to bottom, rgba(95,95,115,1), rgba(65,65,85,1));
}
@media (max-width: 1300px) {
.choose-treatment {
	height: 100px;
}
}
@media (max-width: 500px) {
.choose-treatment {
}
}
.choose-treatment-item {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	padding: 5px;
	width: 100%;
	border-radius: 1px;
	transition: all ease-in-out 0.3s;
}
.choose-treatment:hover {
	background-image: linear-gradient(to bottom, rgba(65,65,85,1), rgba(35,35,55,1));
}
.choose-treatment-item p, .choose-treatment-item a {
	margin: 0 0 7px 0;
}

.choose-staff {
	position: relative;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 80%;
	height: 40px;
	background-color: rgba(255,255,255,1);
}
.choose-staff-item {
	visibility: hidden;
	display: none;
	opacity: 0;
	position: relative;
	width: 100%;
	height: 40px;
	background-color: rgba(220,220,220,1);
	border: 1px solid rgba(255,255,255,1);
	transition: 0.3s all ease-in-out;
}
.choose-staff-item:hover {
	cursor: pointer;
	background-color: rgba(200,200,200,1);
}
.choose-staff-item.selected {
	visibility: visible;
	opacity: 1;
	display: inline-block;
}
.choose-staff-item.permanent {
	visibility: visible !important;
	opacity: 1 !important;
	display: inline-block !important;
}
.choose-staff-item p, .choose-staff-item a {
	color: rgba(0,0,0,1);
	line-height: 40px;
	margin: 0;
}



.qidd-loading-hold, #loading {
	position: fixed;
	visibility: visible;
	opacity: 1;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(55,55,65,0.9);
	z-index: 9999999999999999;
	transition: 0.3s all ease-in-out;
}
.qidd-loading-hold::after, #loading::after {
	content: "PLEASE WAIT";
	font-family: qidd-standard;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	color: rgba(210,210,210,1);
	letter-spacing: 2px;
}
.qidd-loading-hold.load {
	visibility: visible;
	opacity: 0.9;
}
.qidd-customer-appointment {
	position: relative;
	padding: 10px;
	width: 100%;
	background-color: rgba(30,30,30,1);
	border: 1px solid rgba(255,255,255,0.5);
}

/*===================================
 FORM ELEMENTS
=====================================*/

select {
	font-family: qidd-standard;
	font-size: 14px;
	height: 30px;
	width: 100%;
	outline: none;
	border-radius: 5px;
	border-top: 1px solid rgba(180,180,180,1);
	border-left: 1px solid rgba(180,180,180,1);
	border-right: 1px solid rgba(180,180,180,1);
	border-bottom: 1px solid rgba(180,180,180,1);
}
option {
	font-family: qidd-standard;
	font-size: 14px;
}

input {
	font-family: qidd-standard;
	font-size: 14px;
	padding: 0px 5px;
	height: 30px;
	color: rgba(30,30,30,1);
	outline: none;
	border-radius: 5px;
	border-top: 1px solid rgba(180,180,180,1);
	border-left: 1px solid rgba(180,180,180,1);
	border-right: 1px solid rgba(180,180,180,1);
	border-bottom: 1px solid rgba(180,180,180,1);
	background-color: rgba(255,255,255,0);
}
input[type=file] {
	padding: 5px 5px;
	height: fit-content;
}

input[type=time], input[type=time]:focus-visible, input[type=text], input[type=text]:focus-visible {
	-webkit-appearance: none;
	font-family: qidd-standard;
	font-size: 14px;
	height: 30px;
	color: rgba(30,30,30,1);
	outline: none;
	border-radius: 5px;
	border-top: 1px solid rgba(180,180,180,1);
	border-left: 1px solid rgba(180,180,180,1);
	border-right: 1px solid rgba(180,180,180,1);
	border-bottom: 1px solid rgba(180,180,180,1);
}
input[type=checkbox] {
	height: 20px;
    width: 17px;
}
input[type=checkbox].request {
	margin-right: 30px;
	margin-left: 14px;
	width: 23px;
}
input[type=checkbox].request::before {
	content: "Request";
	position: absolute;
	font-size: 10px;
	top: 20px;
	left: 3px;
}
textarea, textarea:focus-visible {
	height: 90%;
	width: 100%;
	padding: 3px 6px;
	outline: none;
	border: 1px solid rgba(200,200,200,1);
	border-radius: 7px;
	box-sizing: border-box;
	color: rgba(30,30,30,1);
	font-family: qidd-standard;
	font-size: 14px;
	background-color: rgba(245,245,245,1);;
}

[type=submit], .qidd-js-button {
	height: 40px;
	min-width: 100px;
	margin: 10px;
	padding: 0px 10px;
	border: 0;
	color: rgba(50,50,50,1);
	font-family: qidd-subtitles;
	border-radius: 9px;
	background-image: linear-gradient(to bottom, rgba(240,240,240,1), rgba(200,200,200,1));
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
[type=submit].grey, .qidd-js-button.grey {
	background-image: linear-gradient(to bottom, rgba(220,220,220,1), rgba(180,180,180,1));
}
[type=submit].grey:hover, .qidd-js-button.grey:hover {
	background-image: linear-gradient(to bottom, rgba(200,200,200,1), rgba(160,160,160,1));
}
[type=submit].green, .qidd-js-button.green {
	background-image: linear-gradient(to bottom, rgba(180,220,180,1), rgba(140,180,140,1));
}
[type=submit].green:hover, .qidd-js-button.green:hover {
	background-image: linear-gradient(to bottom, rgba(140,200,140,1), rgba(100,160,100,1));
}
[type=submit].red, .qidd-js-button.red {
	background-image: linear-gradient(to bottom, rgba(240,140,140,1), rgba(200,100,100,1));
}
[type=submit].red:hover, .qidd-js-button.red:hover {
	background-image: linear-gradient(to bottom, rgba(240,100,140,1), rgba(160,100,100,1));
}
[type=submit].image, .qidd-js-button.image {
	height: 20px;
	min-width: 20px;
	width: 20px;
	margin-left: 50%;
    transform: translateX(-50%);
}
.qidd-js-button.hide {
	visibility: hidden;
}
.qidd-js-button.show {
	visibility: visible;
}
.qidd-js-button.text {
	height: 20px;
	margin-left: 50%;
    transform: translateX(-50%);
}
.qidd-js-button.text p {
	line-height: 20px;
}

[type=submit].solid-red, .qidd-js-button.solid-red {
	background-color: rgba(200,100,100,1);
}
[type=submit].solid-red:hover, .qidd-js-button.solid-red:hover {
	background-color: rgba(160,60,60,1);
}
[type=submit].solid-green, .qidd-js-button.solid-green {
	background-color: rgba(100,200,100,1);
}
[type=submit].solid-green:hover, .qidd-js-button.solid-green:hover {
	background-color: rgba(60,160,60,1);
}
[type=submit].solid-blue, .qidd-js-button.solid-blue {
	background-color: rgba(160,160,210,1);
}
[type=submit].solid-blue:hover, .qidd-js-button.solid-blue:hover {
	background-color: rgba(140,140,190,1);
}
[type=submit].solid-orange, .qidd-js-button.solid-orange {
	background-color: rgba(200,120,20,1);
}
[type=submit].solid-orange:hover, .qidd-js-button.solid-orange:hover {
	background-color: rgba(160,80,0,1);
}
[type=submit].solid-grey, .qidd-js-button.solid-grey {
	background-color: rgba(200,200,200,1);
}
[type=submit].solid-grey:hover, .qidd-js-button.solid-grey:hover {
	background-color: rgba(160,160,160,1);
}
[type=submit].small, .qidd-js-button.small {
	font-size: 12px;
	min-width: 40px;
	margin: 2px;
}
[type=submit].checkout, .qidd-js-button.checkout {
	float: left;
	font-size: 12px;
	min-width: 80px;
	margin: 1px;
	background-color: rgba(220,220,220,1);
	background-image: none !important;
	border-radius: 1px;
}
[type=submit].checkout:hover, .qidd-js-button.checkout:hover {
	background-color: rgba(200,200,200,1);
}
[type=submit].small:hover, .qidd-js-button.small:hover {
	
}
[type=submit].slim, .qidd-js-button.slim {
	font-size: 12px;
	height: 25px;
	margin: 2px;
}
.qidd-js-button.slim p {
	line-height: 25px;
}

[type=submit]:hover, .qidd-js-button:hover {
	cursor: pointer;
	background-image: linear-gradient(to bottom, rgba(200,200,200,1), rgba(160,160,160,1));
}

/*===================================
 TABLE ELEMENTS
=====================================*/
table {
	margin-top: 0px;
	border-spacing: 0px;
}
table tr {
	background-color: rgba(250,250,250,1);
}
table th {
	background-color: rgba(255,255,255,1);
    color: rgba(0,0,0,1);
	border-bottom: 1px solid rgba(0,0,0,0.2);
}
table th p, table th h1, table th h2, table th h3, table th h4, table th h5, table th h6 {
	color: rgba(0,0,0,1);
}
table th h1, table th h2, table th h3, table th h4, table th h5, table th h6 {
	text-align: left;
}
table thead th {
	border-radius: 5px 5px 0px 0px;
}

table th {
	font-family: qidd-subtitles;
	font-size: 14px;
	padding: 5px;
	font-weight: normal;
}
table td {
	font-family: qidd-subtitles;
	font-size: 14px;
	padding: 5px;
	font-weight: normal;
}
table.clear tr {
	background-color: rgba(245,245,245,0);
}




.qidd-checkout-item {
	background-color: rgba(220,220,220,1);
	border: 1px solid rgba(200,200,200,1);
	padding: 10px;
    margin: 2px;
}
.qidd-checkout-item:hover {
	background-color: rgba(200,200,200,1);
	cursor: pointer;
}

.qidd-js-button p {
	font-family: qidd-subtitles;
	color: rgba(50,50,50,1);
	line-height: 40px;
	width: 100%;
	margin: 0;
    text-align: center;
}

#txtHint, #txtHintEdit {
	position: relative;
	visibility: hidden;
	display: none;
	max-height: 200px;
	width: 100%;
	overflow-y: scroll;
	z-index: 99999999999999999999999999999999;
}
#txtHint.show, #txtHintEdit.show {
	visibility: visible;
	display: inline-block;
}
#txtHint p, #txtHintEdit p{
	font-family: 'qidd-standard';
	color: rgba(255,255,255,1);
	margin: 0;
    padding: 5px;
}
.hint-item {
	border-bottom: 1px solid rgba(255,255,255,1);
	background-color: rgba(130,130,170,1);
}
.hint-item:hover {
	background-color: rgba(150,150,190,1);
	cursor: pointer;
}

/*===================================
 END
=====================================*/

.booking-intercept [type=submit] {
	background-image: linear-gradient(to bottom, rgba(95,95,115,1), rgba(65,65,85,1));
	border: 0px;
    border-radius: 1px;
    padding: 7px 14px;
	color: rgba(255,255,255,1);
    width: 150px;
}
.booking-intercept [type=submit]:hover {
	background-image: linear-gradient(to bottom, rgba(65,65,85,1), rgba(35,35,55,1));
	outline: none;
}
.booking-intercept [type=submit].confirm {
	background-color: rgba(50,150,50,1);
}

/*===================================
 SIDEBAR CALENDAR
=====================================*/
.qidd-cal-wrapper {
	float: left;	
	margin: 10px;
	outline: 1px solid rgba(255,255,255,1);
	outline-offset: 10px;
	background-color: rgba(100,100,100,0);
}
.qidd-cal-year {
	float: left;
	width: 100%;
	height: 20px;
	text-align: center;
	line-height: 20px;
	font-family: qidd-subtitles;
	font-size: 15px;
	color: rgba(0,0,0,1);
}
.qidd-cal-header {
	float: left;
	width: 33.3%;
	height: 30px;
	text-align: center;
	line-height: 15px;
	font-family: qidd-subtitles;
	color: rgba(0,0,0,1);
}
.qidd-cal-header.grey {
	color: rgba(0,0,0,0.2);
}
.qidd-cal-header.grey:hover {
	cursor: pointer;
	color: rgba(0,0,0,1);
}
.qidd-cal-week {
	float: left;
	width: 100%;
	border-radius: 5px;
	background-color: rgba(255,255,255,0);
}
.qidd-cal-week:hover {
	cursor: pointer;
	background-color: var(--primary-6);
}
.qidd-cal-week.highlight {
	background-color: var(--primary-4);
}
.qidd-cal-week.highlight .qidd-cal-date {
	color: rgba(255,255,255,1);
}
.qidd-cal-week.highlight:hover {
	cursor: pointer;
	background-color: var(--primary-6);
}
.qidd-cal-day, .qidd-cal-date {
	float: left;
	width: calc(100% / 7);
	height: 25px;
	text-align: center;
	line-height: 25px;
	font-family: qidd-subtitles;
	font-size: 12px;
}
.qidd-cal-date {
	border-radius: 10px;
	color: rgba(0,0,0,1);
}
.qidd-cal-date.grey {
	color: rgba(0,0,0,0.3);
}
.qidd-cal-date.highlight {
    color: rgba(255,255,255,1);
	background-color: var(--primary-4);
}
.qidd-cal-date:hover {
	cursor: pointer;
	background-color: var(--primary-6);
}
.qidd-cal-footer {
	float: left;
	height: 30px;
	line-height: 30px;
	width: 50%;
	font-family: qidd-subtitles;
	font-size: 12px;
}

.qidd-customer-score {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}
.qidd-customer-score-item {
	position: relative;
}
.qidd-customer-score-item h5, .qidd-customer-score-item h6 {
	margin: 0;
	padding: 0;
	line-height: 20px;
	text-align: center;
	color: rgba(255,255,255,1);
}
.qidd-customer-score-item h6 {
	font-size: 18px;
}
.qidd-customer-score-item h5 {
	font-size: 12px;
}

#loader {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(255,255,255,0.7);
	background-image: radial-gradient(rgba(255,255,255,1), rgba(255,255,255,0));
	animation-name: loading-start;
	animation-duration: 0.4s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	z-index: 9999999999999999;
}
@keyframes loading-start {
  from {opacity: 0;}
  to {opacity: 1;}
}
.loader-bar-container {
	position: fixed;
	top: 50%;
	left: 50%;
	height: 50px;
	width: 100px;
	transform: translate(-50%, -50%);
	background-color: rgba(255,255,255,0);
}
.loader-circle-1, .loader-circle-2, .loader-circle-3 {
	opacity: 0;
	position: absolute;
	top: -70px;
	height: 100px;
	width: 100px;
	background-color: rgba(0,0,0,0);
	border-radius: 50%;
	border: 2px solid rgba(0,0,0,1);
	animation-name: loadingcircle;
	animation-duration: 3s;
	animation-direction: normal;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}
.loader-circle-1 {animation-delay: 0s;}
.loader-circle-2 {animation-delay: 1s;}
.loader-circle-3 {animation-delay: 2s;}
@keyframes loadingcircle {
  from {transform: scale(0,0); opacity: 1;}
  to {transform: scale(1,1); opacity: 0;}
}
.loader-bar-1, .loader-bar-2, .loader-bar-3, .loader-bar-4, .loader-bar-5, .loader-bar-6, .loader-bar-7, .loader-bar-8, .loader-bar-9, .loader-bar-10 {
	position: absolute;
	height: 10px;
	width: 10px;
	background-color: rgba(0,0,0,1);
	border-radius: 50%;
	animation-name: loading;
	animation-duration: 1s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}
.loader-bar-1 {animation-delay: 0s; left: 0px;}
.loader-bar-2 {animation-delay: 0.1s; left: 10px;}
.loader-bar-3 {animation-delay: 0.2s; left: 20px;}
.loader-bar-4 {animation-delay: 0.3s; left: 30px;}
.loader-bar-5 {animation-delay: 0.4s; left: 40px;}
.loader-bar-6 {animation-delay: 0.5s; left: 50px;}
.loader-bar-7 {animation-delay: 0.6s; left: 60px;}
.loader-bar-8 {animation-delay: 0.7s; left: 70px;}
.loader-bar-9 {animation-delay: 0.8s; left: 80px;}
.loader-bar-10 {animation-delay: 0.9s; left: 90px;}
@keyframes loading {
  from {top: 0px;}
  to {top: -50px;}
}
.loader-bar-text {
	position: absolute;
	height: 20px;
	width: 100px;
	bottom: 0;
	left: 0;
	color: rgba(0,0,0,1);
	text-align: center;
	letter-spacing: 1px;
}
.loader-bar-text::after {
	content: "Please wait";
	font-family: qidd-standard;
}

input[type="file"].file_input_hidden {
	display: block !important;
}

#new-treatment-image-thumbnail {
	background-color: rgba(240,240,240,1);
	text-align: center;
}
#new-treatment-image-thumbnail p {
	width: 100%;
	margin-top: 85px;
}

.marketing-drop-down {
	visibility: hidden;
}
.marketing-drop-down.show {
	visibility: visible;
}
.marketing-after {
	visibility: hidden;
}
.marketing-after.show {
	visibility: visible;
}

.chart-wrapper {
	position: relative;
	height: 300px;
	width: 600px;
	margin: 30px 0px 20px 0px;
}
.chart-y-axis {
	position: absolute;
	top: 0;
	left: 0;
	height: 10%;
	width: 9%;
}
.chart-y-axis-mark {
	position: absolute;
	left: 9%;
	height: 9%;
	width: 1%;
	border-right: 1px solid rgba(0,0,0,1);
	border-top: 1px solid rgba(0,0,0,1);
}
.chart-y-axis-mark.base {
	border-bottom: 1px solid rgba(0,0,0,1);
}
.chart-x-axis {
	position: absolute;
	top: calc(90% + 1px);
	left: 10%;
	height: 1px;
	width: 90%;
	border-top: 1px solid rgba(0,0,0,1);
}
.chart-x-axis-mark {
	position: absolute;
	top: calc(90% + 1px);
	height: 2%;
	width: 1px;
	border-left: 1px solid rgba(0,0,0,1);
}
.chart-x-axis-mark.base {
	border-left: 1px solid rgba(0,0,0,1);
}
.chart-x-axis-label {
	position: absolute;
	top: calc(90% + 1px);
}
.chart-y-axis-label {
	position: absolute;
	right: 91%;
}
.chart-y-axis-text {
	position: absolute;
	right: 94%;
	transform: rotate(-90deg);
}
.chart-x-axis-label p, .chart-y-axis-label p {
	font-size: 12px;
}
.chart-bar {
	position: absolute;
	height: 0%;
	bottom: calc(9% + 2px);
	background-color: var(--primary-3);
	border-right: rgba(255,255,255,1);
	transition: 0.5s all ease-in-out;
}

.gauge {
	float: left;
	margin: 15px;
	padding: 15px;
	min-height: 150px;
	min-width: 150px;
	background-color: var(--primary-6);
	border-radius: 10px;
}

.gauge h6 {
	font-size: 3em;
}

/*===================================
 TOGGLE
=====================================*/

.toggle {
	position: relative;
	height: 20px;
	border-radius: 10px;
}
.toggle:hover {
	cursor: pointer;
}
.toggle-wrapper {
	position: relative;
	float: left;
	height: 20px;
	width: 40px;
	border: 1px solid var(--primary-3);
	border-radius: 10px;
	background-color: var(--primary-3);
}
.toggle-button {
	position: relative;
	float: left;
	top: 0;
	left: 0;
	height: 20px;
	width: 20px;
	border-radius: 10px;
	background-color: rgba(255,255,255,1);
	transition: 0.2s all ease-in-out;
}
.toggle.right .toggle-button {
	left: 20px;
}
.toggle-left {
	position: relative;
	float: left;
	margin-right: 5px;
	height: 20px;
	font-family: qidd-standard;
	font-size: 14px;
	line-height: 20px;
}
.toggle-right {
	position: relative;
	float: left;
	margin-left: 5px;
	height: 20px;
	font-family: qidd-standard;
	font-size: 14px;
	line-height: 20px;
}
.toggle.left .toggle-left, .toggle.right .toggle-right {
	font-weight: bold;
	color: rgba(0,0,0,1);
}
.toggle.right .toggle-left, .toggle.left .toggle-right {
	font-weight: bold;
	color: rgba(100,100,100,1);
}

#discount-code {
	text-transform: uppercase;
	border: 1px solid rgba(200,200,200,1);
	background-color: rgba(245,245,245,1);
	border-radius: 7px;
}

.qidd-grid-item.buttons [type=submit] {
	margin: 7px;
	border-radius: 9px;
}

.vouchernav:hover {
	cursor: pointer;
	text-decoration: underline;
}

.settings-logo {
	position: relative;
	float: left;
	height: 60px;
	width: 60px;
	box-sizing: border-box;
	background-size: contain;
	background-position: left;
	background-repeat: no-repeat;
}

.customerbadge {
	position: absolute;
	top: 2px;
	right: 2px;
	height: 15px;
	width: 15px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}