:root {
  /* Main background and container */
  --background: rgba(240,240,240,0);
  --backgroundimage: url('../images/background-whiteabstract.jpg');
  --containershadow: 0px 0px 15px rgba(0,0,0,0);
  
  /* Cards */
  --fill: rgba(255,255,255,1);
  --fillgradient: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,1));
  --fillhover: rgba(188,180,177,1);
  --fillgradienthover: linear-gradient(to top right, rgba(255,255,255,0), rgba(255,255,255,0));
  
  --fontprimary: rgba(0,0,0,1);
	
  --primary: rgba(255,255,255,1);
  --secondary: rgba(255,255,255,1);
  --tertiary: rgba(100,100,100,1);
  
  --primarytransparent: rgba(0,0,0,0.6);
  --secondarytransparent: rgba(255,255,255,0.6);
  --tertiarytransparent: rgba(100,100,100,0.6);
  
  --border: 0px solid rgba(150,150,150,1);
  --shadow: 0px 0px 10px rgba(0,0,0,0.2);
  
  
  --dateborder: 0px solid rgba(150,150,150,1);
  --dateshadow: 0px 0px 10px rgba(0,0,0,0);
  --dateselectedshadow: 0px 0px 10px rgba(0,0,0,0.2);
  --datefill: rgba(255,255,255,0);
  --datefillgradient: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0));
  --datefillhover: rgba(255,255,255,1);
  --dateselectedfill: rgba(255,255,255,1);
  --dateselectedfillgradient: linear-gradient(to bottom left, rgba(255,255,255,1), rgba(255,255,255,1));

  --footerbackground: rgba(0,0,0,0.2); 
  --footertext: rgba(255,255,255,1);
 
  --defaultbuttonfill: rgba(230,230,230,1);
  --defaultbuttongradient: linear-gradient(to bottom, rgba(95,95,115,1), rgba(65,65,85,1));
  --defaultbuttongradienthover: linear-gradient(to bottom, rgba(65,65,85,1), rgba(35,35,55,1));
  --defaultbuttonborder: 0px;
  
  --greenbuttonfill: rgba(50,230,50,1);
  --greenbuttongradient: linear-gradient(to bottom, rgba(65,145,65,1), rgba(35,115,35,1));
  --greenbuttongradienthover: linear-gradient(to bottom, rgba(35,115,35,1), rgba(5,85,5,1));
  
  --redbuttonfill: rgba(230,50,50,1);
  --redbuttongradient: linear-gradient(to bottom, rgba(145,65,65,1), rgba(115,35,35,1));
  --redbuttongradienthover: linear-gradient(to bottom, rgba(115,35,35,1), rgba(85,5,5,1));
  
  --cancelbuttongradient: linear-gradient(to bottom, rgba(165,165,165,1), rgba(145,145,145,1));
  --cancelbuttongradienthover: linear-gradient(to bottom, rgba(145,145,145,1), rgba(115,115,115,1));
}



@font-face {
	font-family: qidd-standard;
	font-style: normal;
	src: url('../fonts/Roboto-Light.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/Roboto-Medium.ttf');
}
@font-face {
	font-family: qidd-subtitles;
	font-style: normal;
	src: url('../fonts/Manrope-Medium.ttf');
}
h1, h2, h3, h4, h5, h6 {
	letter-spacing: 0px;
	text-transform: none;
}

body {
	margin: 0;
	min-height: 100vh;
	overflow-x: hidden;
	background-color: var(--background);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-image: var(--backgroundimage);
}
/* Scroll bar */
/* width */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
/* Track */
::-webkit-scrollbar-track {
	background: rgba(200,200,200,1);
}
/* Handle */
::-webkit-scrollbar-thumb {
	background-color: rgba(100,100,100,1);
	border-radius: 3px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background-color: rgba(50,50,50,1);
}
::-webkit-scrollbar-button {
	display: none;
}
p {
	font-family: qidd-standard;
	color: var(--fontprimary);
	font-weight: normal;
	margin: 10px;
}
h1, h2, h3, h4, h5, h6 {
	font-family: qidd-subtitles !important;
	color: var(--fontprimary);
	font-weight: normal !important;
	margin: 10px;
}
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: 16px;}
@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;}
}
@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;}
}


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

.qidd-client-container {
	position: relative;
	box-sizing: border-box;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	padding: 20px;
	width: 900px;
	min-height: 100vh;
	text-align: center;
	border-radius: 15px;
	box-shadow: var(--containershadow);
	background-color: var(--background);
	z-index: 99999;
}

@media (max-width: 900px) {
.qidd-client-container {
	width: 100%;
	padding: 10px;
}
}
@media (max-width: 500px) {
.qidd-client-container {
	width: 100%;
	padding: 5px;
}
}
.qidd-client-container-header {
	margin-top: 30px;
}
.qidd-client-container-inner {
	margin-top: 20px;
}

.qidd-booking-header {
	position: relative;
	height: 60px;
	width: 100%;
}
.qidd-logo {
	position: relative;
	float: left;
	margin-left: 20px;
	height: 60px;
	width: 60px;
	background-size: cover;
	transition: all ease-in-out 0.2s;
}
.qidd-booking-header-logout, .qidd-booking-header-logo {
	position: absolute;
	height: 30px;
	width: 100%;
	top: 50%;
	right: 5px;
	transform: translateY(-50%);
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
	background-color: rgba(255,255,255,1);
	transition: 0.1s all ease-in-out;
}
.qidd-booking-header-logout:hover, .qidd-booking-header-logo:hover {
	
}

.qidd-booking-header-user {
	position: absolute;
	width: 25px;
	height: 30px;
	top: 50%;
	right: 5px;
	transform: translateY(-50%);
	background-size: 30px;
	background-repeat: no-repeat;
	background-position: right;
	background-color: rgba(0,0,0,0);
	border-radius: 15px;
	transition: 0.1s all ease-in-out;
	z-index: 99999999999999999999999999999999999999999999999999999999999;
}
.qidd-booking-header-line {
	position: absolute;
	opacity: 1;
	height: 2px;
	width: 100%;
	border-radius: 3px;
	background-color: rgba(0,0,0,1);
	transition: 0.2s all ease-in-out;
}
.qidd-booking-header-line.top {
	top: 3px;
}
.qidd-booking-header-line.middle {
	top: 12px;
}
.qidd-booking-header-line.bottom {
	top: 21px;
}
#qidd-menu-bar-top.show {
	top: 11px;
	transform: rotate(45deg);
}
#qidd-menu-bar-middle.show {
	opacity: 0;
	transform: rotate(-45deg);
}
#qidd-menu-bar-bottom.show {
	top: 11px;
	transform: rotate(135deg);
}
.qidd-booking-header-user:hover {
	cursor: pointer;
}
.qidd-booking-header-user p {
	font-size: 12px;
	line-height: 30px;
	margin: 0px 40px 0px 10px;
}
.qidd-user-menu {
	position: fixed;
	visibility: hidden;
	opacity: 0;
	top: 0;
	left: 100vw;
	height: 100vh;
	width: 100%;
	background-color: rgba(255,255,255,0.8);
	z-index: 9999999;
	transition: 0.3s opacity ease-in-out;
}
.qidd-user-menu.show {
	visibility: visible;
	left: 0px;
	opacity: 1;
}
.qidd-user-menu .qidd-user-menu-item {
	position: relative;
	transition: 0.2s all ease-in-out;
}
.qidd-user-menu .qidd-user-menu-item p {
	font-family: qidd-subtitles;
	font-size: 30px;
	line-height: 80px;
	text-align: center;
	margin: 0px 10px;
}
.qidd-user-menu .qidd-user-menu-item:hover {
	background-color: rgba(235,235,235,1);
	cursor: pointer;
}

.qidd-booking-header-logo {
	left: 5px;
	background-color: rgba(255,255,255,0);
	background-size: contain;
}
.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;
}








.qidd-toggle-container {
	position: relative;
	height: 30px;
	width: 170px;	
	border-radius: 15px;
	background-color: rgba(0,0,0,0.2);
	z-index: 10;
}
.qidd-toggle-container:hover {
	cursor: pointer;
}
.qidd-toggle-item-left {
	position: absolute;
	top: 0;
	left: 0;
	height: 30px;
	width: 85px;
	border-radius: 15px;
	text-align: center;
	z-index: 12;
}
.qidd-toggle-item-right {
	position: absolute;
	top: 0;
	right: 0;
	height: 30px;
	width: 85px;
	border-radius: 15px;
	text-align: center;
	z-index: 12;
}
.qidd-toggle-item-left p {
	font-family: qidd-subtitles;
	font-size: 11px;
	line-height: 30px;
	padding: 0;
	margin: 0;
	color: rgba(0,0,0,1);
}
.qidd-toggle-item-right p {
	font-family: qidd-subtitles;
	font-size: 11px;
	line-height: 30px;
	padding: 0;
	margin: 0;
	color: rgba(255,255,255,1);
}
.qidd-toggle-container.right .qidd-toggle-item-left p {
	color: rgba(255,255,255,1);
}
.qidd-toggle-container.right .qidd-toggle-item-right p {
	color: rgba(0,0,0,1);
}
.qidd-toggle-highlight {
	position: absolute;
	top: 0;
	left: 0;
	height: 30px;
	width: 85px;
	border-radius: 15px;
	background-color: rgba(255,255,255,1);
	transition: 0.2s ease-in-out;
	z-index: 11;
}
.qidd-toggle-container.right .qidd-toggle-highlight {
	left: 85px;
}



@keyframes loading-start {
  from {opacity: 0;}
  to {opacity: 1;}
}

.qidd-intercept {
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,0.6);
	transition: 0.2s all ease-in-out;
	animation-name: intercept-open;
	animation-duration: 0.3s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	z-index: 9999999999999999999999999999999999999;
}
@keyframes intercept-open {
  from {opacity: 0;}
  to {opacity: 1;}
}
.qidd-intercept input[type="checkbox" i]{
	height: 20px;
	width: 20px;
	margin: 0px 10px;
}
.qidd-intercept-inner {
	position: absolute;
	padding: 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%;
}
}
.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: 10px;
	transform: rotate(45deg);
	background-color: rgba(150,150,150,1);
	transition: 0.2s all ease-in-out;
}
.qidd-close-button::after {
	content: "";
	position: absolute;
	height: 2px;
	width: 19px;
	top: 18px;
	left: 10px;
	transform: rotate(-45deg);
	background-color: rgba(150,150,150,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);
}





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-intercept-inner {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 700px;
	max-width: 1000px;
	max-height: calc(100% - 160px);
	text-align: center;
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
}
@media (max-width: 800px) {
.booking-intercept-inner {
	width: 90%;
	min-width: 0%;
	max-width: 100%;
	max-height: calc(100% - 160px);
}
} 
@media (max-width: 500px) {
.booking-intercept-inner {
	width: 100%;
	min-width: 0%;
	max-width: 100%;
	max-height: calc(100% - 160px);
}
}

.booking-intercept-header {
	position: relative;
	width: 100%;
}
.booking-intercept-header h3 {
	line-height: 50px;
}

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




/*===================================
 GRID FOR LOGIN SCREENS
=====================================*/
.qidd-grid-login {
	position: relative;
	display: grid;
	column-gap: 5px;
	row-gap: 5px;
	grid-template-columns: auto;
	width: 100%;
	min-height: 100vh;
}
.qidd-grid-login-item {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	border-radius: 0px;
	box-sizing: border-box;
	border: 0px;
	transition: 0.3s all ease-in-out;
}
.qidd-grid-login input {
	height: 30px;
	font-size: 16px;
	font-family: qidd-standard;
}
.qidd-grid-login [type=submit] {
	height: 35px;
	width: 100%;
	border: var(--defaultbuttonborder);
	border-radius: 7px;
	color: var(--defaultbuttonfill);
	font-family: qidd-subtitles;
	background-image: var(--defaultbuttongradient);
}
.qidd-grid-login [type=submit]:hover {
	background-image: linear-gradient(to bottom, rgba(65,65,85,1), rgba(35,35,55,1));
}
.qidd-grid-login img {
	width: auto;
	height: 40px;
	margin-left: 50%;
	transform: translateX(-50%);
}


/*===================================
 GRID FOR CHOOSING TREATMENT/TIME
=====================================*/
.qidd-grid-container {
	position: relative;
	display: grid;
	column-gap: 7px;
	row-gap: 7px;
	grid-template-columns: auto auto;
	width: 100%;
}
.qidd-grid-container.col-1 {grid-template-columns: auto;}
@media (max-width: 1300px) {
.qidd-grid-container {
	grid-template-columns: 50% 50%;
}
}
@media (max-width: 650px) {
.qidd-grid-container {
	grid-template-columns: 100%;
}
}
.qidd-grid-container.progress {
	grid-template-columns: 20% auto 20% auto 20% auto 20%;
}
.qidd-grid-container.calendar {
	grid-template-columns: 13.4% 13.4% 13.4% 13.4% 13.4% 13.4% 13.4%;
	column-gap: 1%;
}
.qidd-grid-container.times {
	grid-template-columns: 33% 33% 33%;
}
.qidd-grid-container.confirm {
	grid-template-columns: 50% 50%;
}
.qidd-grid-container.navigation {
	grid-template-columns: 25% 25% 25% 25%;
}
.qidd-grid-container.bookings {
	grid-template-columns: 100%;
}
.qidd-grid-container.header {
	grid-template-columns: auto auto auto;
	margin-top: 10px;
	z-index: 99999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;
}
.qidd-grid-container.footer .qidd-grid-item {
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
	background-color: rgba(255,255,255,1);
}
.qidd-intercept .qidd-js-button {
	float: left;
	height: 40px;
	width: 100px;
	border: var(--defaultbuttonborder);
	border-radius: 7px;
	line-height: 40px;
	color: var(--defaultbuttonfill);
	font-family: qidd-subtitles;
	background-image: var(--defaultbuttongradient);
	text-align: center
}
.qidd-grid-item {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 100px;
	border-radius: 7px;
	box-sizing: border-box;
	background-color: rgba(255,255,255,0);
	transition: 0.2s all ease-in-out;
}
.qidd-grid-item.subtreatment {
	grid-column-start: 1;
	grid-column-end: 3;
}
@media (max-width: 650px) {
.qidd-grid-item.subtreatment {
	grid-column-start: 1;
	grid-column-end: 2;
}
}

.qidd-grid-item.card {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 100px;
	border-radius: 7px;
	box-sizing: border-box;
	box-shadow: var(--shadow);
	border: var(--border);
	background-color: var(--fill);
	transition: 0.2s all ease-in-out;
}
.qidd-grid-item.card .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 40%;
	height: 100%;
	border-radius: 7px 0px 0px 7px;
}
.qidd-grid-item.card .text {
	position: relative;
	margin-left: 40%;
	width: 60%;
	height: 100%;
	text-align: center;
}
.qidd-grid-item.card p {
	font-size: 0.9em;
	margin-top: 0px;
}
.qidd-grid-item.card h6 {
	font-size: 0.9em;
	text-align: right;
}
.qidd-grid-item.clickable:hover {
	cursor: pointer;
}
.qidd-grid-item.card {
	transform: scale(1,1);
}
.qidd-grid-item.card.no-image .image, .qidd-grid-item.styleB.no-image .image {
	visibility: hidden;
}
.qidd-grid-item.card.no-image .text, .qidd-grid-item.styleB.no-image .text {
	margin-left: 0;
	width: 100%;
}
.qidd-grid-item.card.hide {
	transform: scale(0,0);
}
@media (max-width: 1300px) {
.qidd-grid-item {
	min-height: 100px;
}
}
@media (max-width: 500px) {
.qidd-grid-item {
}
}
.qidd-grid-item.card:hover {
	background-color: var(--fillhover);
	background-image: var(--fillgradienthover);
}

.qidd-grid-container.header .qidd-grid-item {
	min-height: 30px;
	height: 30px;
	background-image: none;
	background-color: rgba(255,255,255,0);
	border: 0px;
}
.qidd-grid-item.vertical{flex-direction: column;}
.qidd-grid-item.justify-left{align-items: start;}
.qidd-grid-item.align-left{justify-content: start;}
.qidd-grid-item.align-center{justify-content: center;}
.qidd-grid-item.align-right{justify-content: end;}
.qidd-grid-item.transparent, .qidd-grid-container.bookings .qidd-grid-item.transparent {border: 0px; background-image: none; background-color: rgba(0,0,0,0);}
.qidd-grid-item.transparent:hover .qidd-grid-container.bookings .qidd-grid-item.transparent:hover {background-image: none; background-color: rgba(0,0,0,0);}
.qidd-grid-item.cursor:hover{cursor: pointer;}
.qidd-grid-item.styleB {
	padding: 10px;
	margin: 10px 0px 10px 0px;
	min-height: 100px;
	box-sizing: border-box;
	box-shadow: var(--shadow);
	border: var(--border);
	background-color: var(--fill);
	background-image: var(--fillgradient);
	transition: 0.2s all ease-in-out;
}
.qidd-grid-item.styleB .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 40%;
	height: 100%;
	border-radius: 7px 0px 0px 7px;
}
.qidd-grid-item.styleB .text {
	position: relative;
	margin-left: 40%;
	width: 60%;
	height: 100%;
	text-align: center;
}
.qidd-grid-item.styleB .text h4, .qidd-grid-item.styleB .text h6, .qidd-grid-item.styleB .text p {
	text-align: left;
}
.qidd-grid-item-subitem {
	position: relative;
	margin-top: 20px;
	height: 50px;
	width: 100%;
}
.qidd-grid-item-subitem .qidd-js-button {
	float: right;
	margin: 5px;
	height: 40px;
	width: 100px;
	border: var(--defaultbuttonborder);
	border-radius: 7px;
	line-height: 40px;
	color: var(--defaultbuttonfill);
	font-family: qidd-subtitles;
	background-image: var(--defaultbuttongradient);
}

.qidd-grid-container.calendar .qidd-grid-item {
	min-height: 40px;
}
.qidd-grid-container.navigation .qidd-grid-item {
	min-height: 50px;
}
.qidd-grid-container.bookings .qidd-grid-item {
	min-height: 100px;
	border: 1px solid rgba(255,255,255,0.2);
	background-color: rgba(0,0,0,0.2);
	background-image: none;
}
.qidd-grid-item.unhoverable:hover {
	background-image: var(--fillgradient);
	background-color: var(--fill);
}
.qidd-grid-container.progress .qidd-grid-item {
	opacity: 0.2;
	flex-direction: column;
	background-image: linear-gradient(to bottom, rgba(180,180,180,0), rgba(180,180,180,0));
	background-color: rgba(0,0,0,0);
	border: 0px;
	min-height: 30px;
}
.qidd-grid-container.progress .qidd-grid-item:hover {
	background-color: rgba(0,0,0,0);
}
.qidd-grid-container.progress .qidd-grid-item.clickable:hover {
	opacity: 1;
}
.qidd-grid-container.progress .qidd-grid-item.here {
	opacity: 1;
}
.qidd-grid-container.progress .qidd-grid-item.here:hover {
	cursor: pointer;
}
.qidd-grid-container.progress .qidd-grid-item .step {
	position: relative;
	display: block;
	min-height: 30px;
	width: 30px;
	border-radius: 50%;
	background-color: rgba(255,255,255,1);
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
.qidd-grid-container.progress .qidd-grid-item .step p {
	line-height: 30px;
	font-family: qidd-subtitles;
	font-size: 12px;
	margin: 0;
	color: rgba(30,30,30,1);
}
.qidd-grid-container.progress .qidd-grid-item .line {
	position: relative;
	display: block;
	min-height: 1px;
	width: 100%;
	background-color: rgba(255,255,255,1);
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}

.qidd-grid-container.progress .qidd-grid-item p {
	font-family: qidd-subtitles;
	font-size: 12px;
}

.qidd-grid-container.calendar .qidd-grid-item.weeknav {
	
}

.qidd-grid-container.calendar .qidd-grid-item.weeknav:hover p {
	font-weight: bold;
}

.qidd-grid-container.calendar .qidd-grid-item.date {
	min-height: 50px;
	border-radius: 25px;
	box-sizing: border-box;
	border: var(--dateborder);
	box-shadow: var(--dateshadow);
	background-color: var(--datefill);
	background-image: var(--datefillgradient);
}
.qidd-grid-container.calendar .qidd-grid-item.date:hover {
	background-color: var(--datefillhover);
}
.qidd-grid-container.calendar .qidd-grid-item.date.selected {
	box-shadow: var(--dateselectedshadow);
	background-color: var(--dateselectedfill);
	background-image: var(--dateselected);
}
.qidd-grid-container.calendar .qidd-grid-item.date.selected p {
	color: rgba(0,0,0,1);
	font-weight: bold;
}
.qidd-grid-container.times .qidd-grid-item.time {
	min-height: 40px;
	box-sizing: border-box;
	box-shadow: var(--shadow);
	border: var(--border);
	background-color: var(--fill);
	background-image: var(--fillgradient);
}
.qidd-grid-container.times .qidd-grid-item.time:hover {
	background-color: var(--fillhover);
	background-image: var(--fillgradienthover);
}
.qidd-grid-container.times .qidd-grid-item.time p {
	font-size: 14px;
}
.qidd-grid-container.calendar .qidd-grid-item.dark {
	background-image: linear-gradient(to bottom, rgba(35,35,55,1), rgba(5,5,25,1));
	min-height: 50px;
	font-size: 12px;
}
.qidd-grid-container.calendar .qidd-grid-item.date p {
	font-size: 12px;
}
.qidd-grid-container.calendar .qidd-grid-item.date span {
	font-family: qidd-subtitles;
	font-size: 16px;
}
.qidd-grid-container.confirm .qidd-grid-item {
	background-image: linear-gradient(to bottom, rgba(35,35,55,0), rgba(5,5,25,0));
}
.qidd-grid-container .qidd-grid-item.transparent {
	background-image: linear-gradient(to bottom, rgba(95,95,115,0), rgba(65,65,85,0));
}
.qidd-grid-container .qidd-grid-item.transparent p {
	color: rgba(0,0,0,1);
}

.qidd-grid-item a{
	width: 100%;
}
.qidd-grid-item-inner {
	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;
}

.qidd-grid-item-inner p, .qidd-grid-item-inner a {
	margin: 0 0 7px 0;
}




.qidd-grid-container form {
	height: 100%;
	width: 100%;
}
.qidd-grid-container textarea, textarea {
	padding: 10px;
	box-sizing: border-box;
	height: 90%;
	width: 100%;
	border: 0;
	color: rgba(30,30,30,1);
	font-family: qidd-standard;
	font-size: 16px;
	background-color: rgba(255,255,255,1);;
}
.discountcode {
	padding: 10px;
	box-sizing: border-box;
	height: 90%;
	width: 100px;
	border: 0;
	color: rgba(30,30,30,1);
	font-family: qidd-standard;
	font-size: 16px;
	text-transform: uppercase;
	background-color: rgba(255,255,255,1);;
}
.qidd-grid-container [type=submit], .qidd-button {
	height: 100%;
	min-height: 40px;
	width: 100%;
	border: var(--defaultbuttonborder);
	border-radius: 7px;
	color: var(--defaultbuttonfill);
	font-family: qidd-subtitles;
	background-image: var(--defaultbuttongradient);
}
.qidd-grid-container [type=submit]:hover {
	background-image: linear-gradient(to bottom, rgba(65,65,85,1), rgba(35,35,55,1));
}
.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));
}
.qidd-js-button {
	height: 40px;
	width: 100%;
	border: var(--defaultbuttonborder);
	border-radius: 7px;
	line-height: 40px;
	color: var(--defaultbuttonfill);
	font-family: qidd-subtitles;
	background-image: var(--defaultbuttongradient);
}
.qidd-js-button.green {
	background-image: var(--greenbuttongradient);
}
.qidd-js-button.green:hover {
	background-image: var(--greenbuttongradienthover);
	cursor: pointer;
}
.qidd-js-button.red {
	background-image: var(--redbuttongradient);
}
.qidd-js-button.red:hover {
	background-image: var(--redbuttongradienthover);
	cursor: pointer;
}
.qidd-js-button.cancel {
	background-image: var(--cancelbuttongradient);
}
.qidd-js-button.cancel:hover {
	background-image: var(--cancelbuttongradienthover);
	cursor: pointer;
}
.qidd-js-button:hover {
	background-image: var(--defaultbuttongradienthover);
	cursor: pointer;
}
.qidd-js-button.narrow {
	max-width: 200px;
}


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

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

#loader {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(255,255,255,0.7);
	animation-name: loading-start;
	animation-duration: 1s;
	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-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;
}

.qidd-loading-hold {
	position: fixed;
	visibility: hidden;
	opacity: 0;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(35,35,55,0.9);
	z-index: 9999999999999999;
	transition: 0.3s all ease-in-out;
}
.qidd-loading-hold::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);
}


[type=submit]:hover {
	cursor: pointer;
}

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

.disclaimer-button {
	position: relative;
	height: 20px;
	width: 100px;
	padding: 1px;
	border-radius: 5px;
	text-align: center;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
.disclaimer-button.No {
	background-image: url('../images/disclaimer-toggle-no.svg');
}
.disclaimer-button.Yes {
	background-image: url('../images/disclaimer-toggle-yes.svg');
}
.disclaimer-button:hover {
	cursor: pointer;
}

/*===================================
 FOOTER
=====================================*/
.qidd-footer {
	position: relative;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	background-color: var(--footerbackground);
}
.qidd-footer .qidd-grid-container {
	grid-template-columns: auto;
}
.qidd-footer .qidd-grid-container .qidd-grid-item p, .qidd-footer .qidd-grid-container .qidd-grid-item h1, .qidd-footer .qidd-grid-container .qidd-grid-item h2, .qidd-footer .qidd-grid-container .qidd-grid-item h3, .qidd-footer .qidd-grid-container .qidd-grid-item h4, .qidd-footer .qidd-grid-container .qidd-grid-item h5, .qidd-footer .qidd-grid-container .qidd-grid-item h6 {
	color: var(--footertext);
}
.qidd-footer a {
	width: auto;
	transition: 0.2s all ease-in-out;
}
.qidd-footer a:hover {
	letter-spacing: 1px;
}


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


/*===================================
 TABLES
=====================================*/

table.checkout {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
}
table.checkout tr.discount-item {
	display: none;
}
table.checkout tr.discount-item.on {
	display: table-row;
}
table.checkout td {
	padding: 10px;
}
table.checkout td.item {
	background-color: rgba(255,255,255,0.7);
	text-align: right;
}
table.checkout td.price {
	background-color: rgba(255,255,255,0.7);
}
table.checkout td.item-total {
	background-color: rgba(255,255,255,0.7);
	text-align: right;
}
table.checkout td.price-total {
	background-color: rgba(255,255,255,0.7);
}

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