/**
 * setup
 *
 * @format
 */

@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");

:root {
	--hue: 352;
	--saturation: 100%;

	--alpha-03: 0.3;
	--alpha-05: 0.5;
	--alpha-07: 0.7;

	--bg-dark: hsl(0, 0%, 80%);
	--bg: hsl(0, 0%, 90%);
	--bg-light: hsl(0, 0%, 100%);

	--highlight-dark: hsl(var(--hue), var(--saturation), 50%);
	--highlight: hsl(var(--hue), var(--saturation), 90%);
	--highlight-bright: hsl(var(--hue), var(--saturation), 95%);
	--highlight-brightest: hsl(var(--hue), var(--saturation), 100%);

	--sweeten: rgb(212, 32, 39);

	--font-color-dark: hsl(0, 0%, 00%);
	--font-color-medium: hsl(0, 0%, 35%);
	--font-color-light: hsl(0, 0%, 50%);

	--main: hsl(0, 0%, 90%);
		--footer-color: hsl(var(--hue), 50%, 90%);
	/* --footer-color: linear-gradient(to right, hsl(var(--hue), var(--saturation), 70%), hsl(var(--hue), var(--saturation), 41.76%), hsl(var(--hue), var(--saturation), 70%)); */
	/* --footer-color: conic-gradient(from 0deg, var(--highlight-brightest), var(--highlight), var(--highlight-brightest)); */
	--footer-highlight: hsl(var(--hue), 100%, 50%);

	--shallow: hsl(0, 0%, 100%);
	--misty: hsl(0, 0%, 60%);
	--deep: hsl(0, 0%, 20%);

	--shallow-op3: hsla(0, 0%, 100%, var(--alpha-03));
	--shallow-op5: hsla(0, 0%, 100%, var(--alpha-05));
	--shallow-op7: hsla(0, 0%, 100%, var(--alpha-07));

	--misty-op3: hsla(0, 0%, 50%, var(--alpha-03));
	--misty-op5: hsla(0, 0%, 50%, var(--alpha-05));
	--misty-op7: hsla(0, 0%, 50%, var(--alpha-07));

	--deep-op3: hsla(0, 0%, 0%, var(--alpha-03));
	--deep-op5: hsla(0, 0%, 0%, var(--alpha-05));
	--deep-op7: hsla(0, 0%, 0%, var(--alpha-07));

	--warning: hsl(0, 100%, 50%);
	--attention: hsl(30, 100%, 50%);
	--success: hsl(120, 100%, 50%);

	--padding-xs: 5px;
	--padding-s: 10px;
	--padding-m: 15px;
	--padding-l: 20px;
	--padding-xl: 30px;
	--padding-xxl: 40px;
	--padding-xxxl: 50px;
	--padding-xxxxl: 60px;

	--margin-xs: 5px;
	--margin-s: 10px;
	--margin-m: 15px;
	--margin-l: 20px;
	--margin-xl: 30px;
	--margin-xxl: 40px;
	--margin-xxxl: 50px;
	--margin-xxxxl: 60px;

	--border-radius-xs: 10px;
	--border-radius-s: 20px;
	--border-radius-m: 30px;
	--border-radius-l: 40px;
	--border-radius-xl: 50px;

	--font-size-xs: 0.75rem;
	--font-size-s: 1rem;
	--font-size-m: 1.3rem;
	--font-size-l: 1.7rem;
	--font-size-xl: 2rem;
	--font-size-xxl: 2.5rem;
	--font-size-xxxl: 3rem;

	--font-weight-xlight: 100;
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-m: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extra-bold: 800;
	--font-weight-black: 900;

	--transition-short: 0.3s;
	--transition-medium: 0.5s;
	--transition-long: 1s;

	--animation-short: 0.3s;
	--animation-medium: 0.5s;
	--animation-long: 1s;
	--animation-extra-long: 2s;

	--gap-xs: 5px;
	--gap-s: 10px;
	--gap-m: 20px;
	--gap-l: 30px;
	--gap-xl: 40px;
	--gap-xxl: 50px;

	--default-box-shadow: inset 0 5px 10px var(--bg-light), 0 5px 10px var(--deep-op3);
	--calendar-box-shadow-dark: inset 0 0px 10px var(--deep-op5);
	--calendar-box-shadow-light: inset 0 0px 10px var(--bg-light);
}

* {
	font-family: "Raleway", sans-serif;
	color: var(--font-color-dark);
}

::selection {
	color: black;
	background: var(--highlight-bright);
}

a {
	text-decoration: none !important;
}

body,
h1,
h2,
h3,
h4,
p {
	margin: 0;
}

/* gallery css */
.modal {
	position: fixed;
	z-index: 999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: var(--deep-op7);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: all 0.3s;
}

.modal .exit {
	width: 90%;
	display: flex;
	justify-content: end;
}

.modal-content {
	max-width: 80%;
	max-height: 80%;
}

#close {
	width: 50px;
	height: 50px;

	display: flex;
	justify-content: center;
	align-items: center;

	color: var(--shallow);
	background-color: rgba(255, 255, 255, 0.3);

	font-size: 25px;
	font-weight: bold;

	border-radius: 50%;
	cursor: pointer;
	transition: all 0.3s;
}

#close:hover {
	color: var(--deep);
}

#largeGallery {
	display: grid;
	grid-template-columns: repeat(4, 300px);
	gap: 20px;
}

#largeGallery img {
	width: 100%;
	cursor: pointer;
	transition: all 0.3s;
}

#largeGallery img:hover {
	transform: scale(1.05);
}

.largeGalleryNoJs {
	padding: 50px 0px;
	display: grid;
	grid-template-columns: repeat(4, 300px);
	gap: 20px;
	justify-content: center;
}

.largeGalleryNoJs img {
	width: 100%;
	cursor: pointer;
	transition: all 0.3s;
	max-height: 150px;
	object-fit: cover;
	max-width: 350px;
	object-position: center;
	border-radius: 10px;
}

.largeGalleryNoJs img:hover {
	transform: scale(1.05);
}

/* Carousel */
.slideshow {
	display: flex;
	justify-content: space-around;
	width: 100%;
}

.slideshow .slide {
	transition: all 0.3s;
	display: flex;
	justify-content: center;
}

.slideshow .slide img {
	max-width: 50vw;
	max-height: 85vh;
}

.carouselWrap {
	display: flex;
	justify-content: center;
	width: 90%;
}

#prev,
#next {
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	color: var(--shallow);
	font-weight: bold;
	font-size: 60px;
	transition: all 0.6s;
	border-radius: 0 3px 3px 0;
	user-select: none;
}

#prev:hover,
#next:hover {
	color: #777;
}

.slideshow-dots {
	margin-top: 30px;
	display: flex;
}

.dot {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 5px;
	background-color: #bbb;
	border-radius: 50%;
	transition: all 0.1s;
}

.currentDot {
	background-color: #444;
}

.dot:hover {
	background-color: #444;
}

/* BUTTONS */

.ctaSectionFlex {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: var(--margin-xl);
	gap: var(--gap-m);
}

.narrowButtons {
	gap: var(--gap-s) !important;
}

.disabledButton {
	pointer-events: none;
	filter: brightness(0.5);
}

.noMargin {
	margin: 0 !important;
	padding: 0 !important;
}

.maxWidth {
	width: 100% !important;
}

.alignButtonsLeft {
	width: 100% !important;
	align-items: left !important;
	justify-content: left !important;
}

.noScaleButton {
	transform: none !important;
}

.mainButton,
.secondaryButton {
	width: 200px;
	height: 50px;

	display: flex;
	align-items: center;
	justify-content: center;

	cursor: pointer;
	text-decoration: none;
	transition: all var(--transition-short);

	background: var(--bg);
	border-radius: var(--border-radius-m);
	box-shadow: inset 0 5px 10px var(--bg-light), 0 5px 10px var(--deep-op3);
}

.secondaryButton {
	background: var(--highlight-bright);
	box-shadow: inset 0 5px 10px var(--highlight-brightest), 0 5px 10px var(--deep-op3);
}

.mainButton span,
.secondaryButton span {
	display: flex;
	align-items: center;
	justify-content: center;

	font-size: var(--font-size-m);
	font-weight: var(--font-weight-semibold) !important;

	color: var(--deep) !important;

	user-select: none;
	text-decoration: none;

	transition: all var(--transition-short);
}

/* .secondaryButton span {
	color: var(--shallow) !important;
} */

.mainButton:hover {
	transform: scale(1.1);
	box-shadow: inset 0 10px 15px var(--bg-light), 0 10px 15px var(--deep-op7);
}

.secondaryButton:hover {
	transform: scale(1.1);
	box-shadow: inset 0 10px 15px var(--highlight-brightest), 0 10px 15px var(--deep-op7);
}

.narrowButton {
	width: 50px !important;
}

.wideButton {
	width: 300px !important;
}

.extraWideButton {
	width: 400px !important;
}

.doubleIcon {
	width: 80px !important;
}

/* AUTH PAGE */

.loginWrap {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 90vh;
}

.loginBox {
	padding: var(--padding-xxxxl);
	border-radius: var(--border-radius-m);
	background: var(--bg-dark);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--gap-m);
}

.loginBox form {
	min-height: unset;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0px;
	width: fit-content;
}

.loginBox form label {
	color: var(--shallow);
}

.loginBox form input {
	border-radius: 30px;
	border: 0px;
	padding: 10px;
}

.loginBackground {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	background: conic-gradient(from 90deg, var(--highlight), var(--highlight-bright), var(--highlight));
	background-size: cover;
	width: 100%;
	height: 100%;
}

.marginTop30 {
	margin-top: 30px !important;
}

/* DASHBOARD */

#backToTop {
	align-items: center;
	position: fixed;
	background-color: var(--deep);
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	border-radius: 5px;
	right: 50;
	cursor: pointer;
	bottom: 50;
	transition: all var(--transition-short);
	border: 1px solid var(--shallow);
}

#backToTop span {
	color: var(--shallow);
	font-weight: 500;
	font-size: 20px;
	transition: all var(--transition-short);
}

#backToTop:hover {
	width: 32px;
	height: 32px;
	box-shadow: 1px 1px var(--shallow);
}

#backToTop:hover>span {
	font-weight: 700;
	font-size: 22px;
}

.dashboardBackground {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	background: conic-gradient(from 90deg, var(--highlight), var(--highlight-bright), var(--highlight));
	background-size: cover;
	width: 100%;
	height: 100%;
}

#firstSection {
	box-sizing: border-box;
	width: 80%;
	padding: 15vh 0;
	margin: 0 auto;
	min-height: 90.4vh;
}

.dashboardContent {
	box-sizing: border-box;
	width: 80%;
	padding: 15vh 0;
	margin: 0 auto;
	min-height: 90.4vh;
}

.dashboardContent h1 {
	width: 100%;
	border-bottom: 2px solid var(--deep);
	text-align: left;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--margin-m);
	padding-bottom: var(--padding-m);
}

.dashboardMenu {
	display: grid;
	gap: var(--gap-m);
	grid-template-columns: repeat(4, 1fr);
}

.dashboardMenu .dashboardMenuItem {
	gap: var(--gap-m);

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	background: var(--bg);
	padding: var(--padding-m);
	border-radius: var(--border-radius-m);
	box-shadow: var(--default-box-shadow);

	transition: all var(--transition-short);
}

.dashboardMenu .dashboardMenuItem:hover {
	transform: scale(1.05);
	box-shadow: inset 0 10px 15px var(--bg-light), 0 10px 15px var(--deep-op7);
}

.dashboardMenu .dashboardMenuItem h2 {
	font-size: var(--font-size-m);
	font-weight: var(--font-weight-semibold);
	color: var(--deep);
}

.dashboardMenu .dashboardMenuItem span{
	color: var(--sweeten);
	font-size: 70px;
}

.dashboardMenu .houseCard img {
	filter: none !important;
	width: 300px;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
}

/* Szobák és Foglalások */

.crudWrap {
	width: 90% !important;
}

.crudTable {
	width: 100%;
	margin-bottom: 100px;
}

.crudHeader {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--padding-m);
}

.crudHeader h1 {
	color: var(--deep);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
}

.noElements {
	color: var(--shallow);
	text-align: center;
	padding: var(--padding-xxxxl);
	font-size: var(--font-size-xxxxl);
	font-weight: var(--font-weight-bold);
}

.crudBody #deleteData {
	width: 100%;

	display: flex;
	flex-direction: column;

	gap: var(--gap-s);
}

.crudBody #deleteData>div>span {
	color: var(--deep);
}

/* STAFF CARDS */

.staffCardsWrapper {
	width: 100%;

	display: grid;
	grid-template-columns: repeat(auto-fit, calc((100% - var(--gap-m) * 3) / 4));
	gap: var(--gap-m);

	margin: 0px auto;
	/* padding: var(--padding-m); */
}

.staffCard {
	box-sizing: border-box;
	border-radius: var(--border-radius-m);
	padding: var(--padding-m);

	background: var(--bg-light);

	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	gap: 0;

	/* height: 300px; */
}

.staffCard img {
	width: 100%;
	object-fit: cover;
	border-radius: calc(var(--border-radius-m) - var(--padding-m));
}

.staffCard h2,
.staffCard p {
	color: var(--font-color-dark);
}

.staffCard h2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.staffCard h2 span {
	color: var(--font-color-medium);
}

.actionsStaffWrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--gap-m);
}

.staffCard h2 input[type="checkbox"] {
	box-shadow: none !important;
	width: 20px;
	height: 20px;
	background: none !important;
	cursor: pointer;
}

.staffCard h2 input[type="checkbox"]:hover {
	filter: brightness(0.8);
}

.editStaffButton {
	cursor: pointer;
	transition: all var(--transition-short);
}

.editStaffButton:hover {
	transform: scale(1.3);
}

.editAvailabilityButton {
	cursor: pointer;
	transition: all var(--transition-short);
}

/* BLOG TAGS CARDS */

.blogTagCardsWrapper {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, calc((100% - var(--gap-m) * 3) / 4));
	gap: var(--gap-m);
	margin: 0px auto;
}

.blogTagCard {
	box-sizing: border-box;
	border-radius: var(--border-radius-m);
	padding: var(--padding-m);

	background: var(--bg-light);

	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 6;
	gap: 10px;
}

.blogTagCard h2,
.blogTagCard p {
	color: var(--font-color-dark);
}

.blogTagCard p strong {
	color: var(--deep);
}

.blogTagCard h2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.blogTagCard h2 span {
	color: var(--font-color-medium);
}

.actionsBlogTagWrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--gap-m);
}

.blogTagCard h2 input[type="checkbox"] {
	box-shadow: none !important;
	width: 20px;
	height: 20px;
	background: none !important;
	cursor: pointer;
}

.blogTagCard h2 input[type="checkbox"]:hover {
	filter: brightness(0.8);
}

.editBlogTagButton {
	cursor: pointer;
	transition: all var(--transition-short);
}

.editBlogTagButton:hover {
	transform: scale(1.3);
}

/* BLOG CARDS */

.blogCardsWrapper {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap-m);
	margin: 0px auto;
}

.blogCard {
	box-sizing: border-box;
	border-radius: var(--border-radius-m);
	padding: var(--padding-m);

	background: var(--bg-light);

	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 6;
	gap: 10px;
}

.blogCard img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: calc(var(--border-radius-m) - var(--padding-m));
	max-height: 200px;
	max-width: 200px;
}

.blogCard h2,
.blogCard p {
	color: var(--font-color-dark);
}

.blogCard p strong {
	color: var(--deep);
}

.blogCard h2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.blogCard h2 span {
	color: var(--font-color-medium);
}

.actionsBlogWrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--gap-m);
}

.blogCard h2 input[type="checkbox"] {
	box-shadow: none !important;
	width: 20px;
	height: 20px;
	background: none !important;
	cursor: pointer;
}

.blogCard h2 input[type="checkbox"]:hover {
	filter: brightness(0.8);
}

.editBlogButton {
	cursor: pointer;
	transition: all var(--transition-short);
}

.editBlogButton:hover {
	transform: scale(1.3);
}

/* STORES CARDS */

.storesCardsWrapper {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, calc((100% - var(--gap-m) * 3) / 4));
	gap: var(--gap-m);
	margin: 0px auto;
}

.storesCard {
	box-sizing: border-box;
	border-radius: var(--border-radius-m);
	padding: var(--padding-m);

	background: var(--bg-light);

	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 6;
	gap: 0;
}

.storesCard img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: calc(var(--border-radius-m) - var(--padding-m));
}

.storesCard h2,
.storesCard p {
	color: var(--font-color-dark);
}

.storesCard p strong {
	color: var(--deep);
}

.storesCard h2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.storesCard h2 span {
	color: var(--font-color-medium);
}

.actionsStoresWrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--gap-m);
}

.storesCard h2 input[type="checkbox"] {
	box-shadow: none !important;
	width: 20px;
	height: 20px;
	background: none !important;
	cursor: pointer;
}

.storesCard h2 input[type="checkbox"]:hover {
	filter: brightness(0.8);
}

.editStoresButton {
	cursor: pointer;
	transition: all var(--transition-short);
}

.editStoresButton:hover {
	transform: scale(1.3);
}

/* SERVICES CARDS */

.servicesCardsWrapper {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, calc((100% - var(--gap-m) * 3) / 4));
	gap: var(--gap-m);
	margin: 0px auto;
}

.servicesCard {
	box-sizing: border-box;
	border-radius: var(--border-radius-m);
	padding: var(--padding-m);

	background: var(--bg-light);

	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	gap: 0;
}

.servicesCard img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: calc(var(--border-radius-m) - var(--padding-m));
}

.servicesCard h2,
.servicesCard p {
	color: var(--font-color-dark);
}

.servicesCard h2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: var(--font-size-m);
}

.servicesCard h2 span {
	color: var(--font-color-medium);
}

.actionsServicesWrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--gap-m);
}

.servicesCard h2 input[type="checkbox"] {
	box-shadow: none !important;
	width: 20px;
	height: 20px;
	background: none !important;
	cursor: pointer;
}

.servicesCard h2 input[type="checkbox"]:hover {
	filter: brightness(0.8);
}

.editServicesButton {
	cursor: pointer;
	transition: all var(--transition-short);
}

.editServicesButton:hover {
	transform: scale(1.3);
}

/* NEWSLETTER CARDS */

.newsletterCardsWrapper {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, calc((100% - var(--gap-m) * 1) / 2));
	gap: var(--gap-m);
	margin: 0px auto;
}

.newsletterCard {
	box-sizing: border-box;
	border-radius: var(--border-radius-m);
	padding: var(--padding-m);
	background: var(--bg-light);
}

.newsletterCard h2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: var(--font-size-m);
	color: var(--font-color-dark);
}

.newsletterCard h2 span {
	color: var(--font-color-medium);
}

.actionsNewsletterWrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--gap-m);
}

.newsletterCard h2 input[type="checkbox"] {
	box-shadow: none !important;
	width: 20px;
	height: 20px;
	background: none !important;
	cursor: pointer;
}

.newsletterCard h2 input[type="checkbox"]:hover {
	filter: brightness(0.8);
}

.editNewsletterButton {
	cursor: pointer;
	transition: all var(--transition-short);
}

.editNewsletterButton:hover {
	transform: scale(1.3);
}

.emailCheckbox {
	cursor: pointer;
	transition: all var(--transition-short);
}

.emailCheckbox:hover {
	transform: scale(1.3);
}

#email_content,
#email_content2 {
	resize: vertical;
}

/* STORE PHOTOS */

.storesPhotosWrapper {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--gap-m);
	/* height: 300vh; */
}

.storesPhotosWrapper h2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: var(--font-size-l);
	font-weight: var(--font-weight-semibold);
	color: var(--deep);
	margin-bottom: var(--margin-s);
	margin-top: var(--margin-xxxxl);
	padding-bottom: var(--padding-s);
	border-bottom: 3px solid var(--highlight-dark);
	line-height: 1.4;
}

.storePhotosCardsWrapper {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, calc((100% - var(--gap-m) * 4) / 5));
	gap: var(--gap-m);
}

.storePhoto {
	background: var(--bg-light);
	object-fit: cover;
	border-radius: var(--border-radius-m);
	transition: all var(--transition-short);
	cursor: pointer;
}

.storePhoto img {
	aspect-ratio: 1/1;
	width: 100%;
	object-fit: cover;
	border-radius: var(--border-radius-m);
}

.storePhoto input[type="checkbox"] {
	display: none;
	cursor: pointer;

	height: 20px;
	width: 20px;

	margin: 10px;
	margin-left: 20px;

	background: none !important;
	box-shadow: none !important;
}

.storePhoto input[type="checkbox"]:focus {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.storePhoto input[type="checkbox"]:hover {
	/* background: var(--bg-dark) !important; */
	filter: brightness(0.9);
}

/* STORE SERVICES */

.storeServicesWrapper {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--gap-m);
}

.storeServicesWrapper h2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: var(--font-size-l);
	font-weight: var(--font-weight-semibold);
	color: var(--deep);
	margin-bottom: var(--margin-s);
	margin-top: var(--margin-xxxxl);
	padding-bottom: var(--padding-s);
	border-bottom: 3px solid var(--highlight-dark);
	line-height: 1.4;
}

.storeServicesCardsWrapper {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, calc((100% - var(--gap-m) * 7) / 8));
	gap: var(--gap-m);
}

.storeService {
	box-sizing: border-box;
	padding: var(--padding-m);

	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	gap: 0;

	object-fit: cover;

	background: var(--bg-light);

	border-radius: var(--border-radius-m);
	transition: all var(--transition-short);
	cursor: pointer;
}

.storeService img {
	aspect-ratio: 1/1;
	width: 80%;
	margin: 0 auto;
	object-fit: cover;
	border-radius: var(--border-radius-m);
}

.storeService p {
	color: var(--deep);
	font-size: var(--font-size-s);
	font-weight: var(--font-weight-semibold);
	text-align: center;
	margin-top: var(--margin-s);
}

.storeService input[type="checkbox"] {
	display: none;
	cursor: pointer;
	pointer-events: none;

	height: 20px;
	width: 20px;
}

.storeService input[type="checkbox"]:focus {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.storeService input[type="checkbox"]:hover {
	filter: brightness(0.9);
}

.editStoreServicesButton {
	cursor: pointer;
	transition: all var(--transition-short);
}

.editStoreServicesButton:hover {
	transform: scale(1.3);
}

/* FORM DESIGNS */

.formWrapper {
	background: rgb(0, 0, 0, 0.5);
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999999;
}

#deleteForm form{
	background: var(--bg-dark);
    padding: var(--padding-xxxl);
    border-radius: var(--border-radius-m);
}

.inputRow{
	display: flex;
	flex-direction: row;
	width: 100%;
    justify-content: space-between;
}

.inputRowElement{
	display: flex;
	flex-direction: column;
	width: 48%;
}

/* FORM STYLES */
form {
	width: 50%;
	min-height: 200px;
	gap: var(--gap-m);

	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;

	background: var(--bg-dark);

	padding: var(--padding-xxxl);
	border-radius: var(--border-radius-m);
}

form * {
	color: var(--shallow);
}

form label {
	box-sizing: border-box;
	width: 100%;

	color: var(--shallow);

	font-weight: 400;
	font-size: var(--font-size-m);
}

form input,
form textarea {
	box-sizing: border-box;
	width: 100%;

	margin: var(--margin-xs) 0px;
	padding: var(--padding-s) var(--padding-l);

	color: var(--deep);
	background: var(--bg);

	font-weight: 600;
	font-size: var(--font-size-m);

	border: none;
	border-radius: 20px;

	box-shadow: inset 0 5px 10px var(--bg-light), 0 5px 10px var(--deep-op3);
}

form textarea {
	height: 150px;
	overflow-y: auto;
	resize: vertical;
	scrollbar-width: thin;
	scrollbar-color: var(--bg-light) var(--deep-op3);
}

form input:focus,
form textarea:focus {
	outline: 2px solid var(--highlight);
	outline-offset: -2px;
	box-shadow: inset 0 5px 10px var(--bg-light), 0 5px 10px var(--deep-op3);
}

form select {
	box-sizing: border-box;
	width: 100%;
	padding: var(--padding-s) var(--padding-l);
	color: var(--deep);
	background: var(--bg);
	font-weight: 600;
	font-size: var(--font-size-m);
	border: none;
	border-radius: 20px;
	box-shadow: inset 0 5px 10px var(--bg-light), 0 5px 10px var(--deep-op3);
}

form select option{
	color: var(--deep);
}

form select:focus {
	outline: 2px solid var(--highlight);
	outline-offset: -2px;
	box-shadow: inset 0 5px 10px var(--bg-light), 0 5px 10px var(--deep-op3);
}

.labelAndInput {
	box-sizing: border-box;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#uploadDataOpeningHours,
#editDataOpeningHours {
	width: 40%;
}

.formDataUploadOpeningHoursGrid,
.formDataEditOpeningHoursGrid {
	display: flex;
	flex-direction: column;
	gap: var(--gap-xs);

	width: 100%;
}

.formDataItemOpeningHours,
.formDataItemOpeningHoursHeader,
.formDataUploadOpeningHoursHeader,
.formDataEditOpeningHours,
.formDataEditOpeningHoursHeader {
	width: 100%;
	display: grid;
	grid-template-columns: 2fr 3fr 3fr 2fr;
	gap: var(--gap-xs);
}

.formDataItemOpeningHours label,
.formDataEditOpeningHours label {
	color: var(--deep);
	display: flex;
	align-items: center;
	justify-content: left;
}

.formDataItemOpeningHoursHeader p,
.formDataEditOpeningHoursHeader p {
	color: var(--deep);
	display: flex;
	align-items: center;
	justify-content: left;
	border-bottom: 1px solid var(--shallow);
}

.formDataItemOpeningHoursHeader,
.formDataEditOpeningHoursHeader {
	border-bottom: 1px solid var(--shallow);
}

.formDataItemOpeningHoursHeader .centerText,
.formDataEditOpeningHoursHeader .centerText {
	text-align: center;
	margin: auto;
}

.formDataItemOpeningHours input[type="checkbox"],
.formDataEditOpeningHours input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: auto;
	box-shadow: none !important;
}

.formDataItemOpeningHours input[type="checkbox"]:focus,
.formDataEditOpeningHours input[type="checkbox"]:focus {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.formDataItemOpeningHours input[type="checkbox"]:hover,
.formDataEditOpeningHours input[type="checkbox"]:hover {
	filter: brightness(0.9);
}

#setOpeningHoursButton,
#setEditOpeningHoursButton {
	width: 96%;
	margin: 0 auto;
	margin-top: 5px;
	padding-right: var(--padding-l);
	color: var(--deep);
	font-weight: 500;
	transition: all var(--transition-short);
}

#setOpeningHoursButton span,
#setEditOpeningHoursButton span {
	margin-right: 5px;
}

#setOpeningHoursButton:hover,
#setEditOpeningHoursButton:hover {
	transform: scale(1.0);
	background: var(--highlight-brightest);
}


#deleteDataSingle input[type="checkbox"] {
	box-shadow: none !important;
}

#deleteData {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
}

#deleteDataSingle {
	width: 100% !important;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
}

.formDataGrid {
	box-sizing: border-box;
	width: 100%;
	display: grid;
	gap: var(--gap-s);
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.infoBlock {
	width: 100%;
	display: flex;
	justify-content: left;
}

.infoBlock label {
	width: fit-content;
}

.infoBlock abbr {
	cursor: help;
}

.infoBlock abbr span {
	font-size: var(--font-size-m);
	color: var(--warning);
}

.infoBlock abbr[title] {
	cursor: help;
}

.infoBlock abbr[title] {
	font-size: var(--font-size-m);
	color: var(--warning);
}

.deleteConfirmation {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9999999;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgb(0, 0, 0, 0.5);
}

.deleteConfirmationCard {
	display: flex;
	flex-direction: column;
	background: var(--bg-dark) !important;
	border-radius: 20px;
	justify-content: center;
	align-items: center;
	padding: 50px;
}

.deleteConfirmationCard h1 {
	color: var(--shallow);
	/* margin-bottom: var(--margin-xl); */
}

.deleteConfirmationCard div {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.formDataGridFullWidth {
	grid-column: span 3 !important;
}

.uploadFormStoreServices form {
	width: fit-content;
}

#uploadServiceId {
	width: 100%;
	margin: 0 auto;
	padding-right: var(--padding-l);
}

/* NAVBAR */

nav {
	width: 100%;
	height: 100px;

	display: flex;
	justify-content: center;
	align-items: center;

	position: absolute;
	z-index: 999;

	animation: fadeInTop var(--transition-long);
}

.navbar {
	display: flex;
}

.navbar a {
	/* color: var(--shallow); */
	transition: all var(--transition-medium);
	font-size: 21px;
	font-weight: 500;
	margin: 0px 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
}

.navbar a:hover {
	color: var(--main-color);
	transform: scale(1.1);
}

.logo {
	height: 40%;
	transition: all var(--transition-short);
	margin-left: 50px;
}

.logo:hover {
	transform: scale(1.01);
}

/* RESERVATIONS PAGE */

.crudBody.calendarView {
	display: flex;
	gap: var(--gap-m);
}

.kulcsosHeaderTitle {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	color: var(--deep);
	text-shadow: 1px 1px 1px var(--shallow);
	padding: var(--padding-m) 0px;
}

.crudBodyTable {
	/* background-color: var(--highlight); */

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
	gap: var(--gap-m);
}

.kulcsosRowWrap {
	background-color: var(--highlight);
	border-radius: var(--border-radius-m);
	padding: var(--padding-l);
	box-shadow: var(--default-box-shadow);
	transition: all var(--transition-short);
	cursor: pointer;
}


.kulcsosRowRes {
	width: 100%;
	display: flex;
}

.kulcsosRowRes span {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	min-height: 50px;

	font-size: var(--font-size-s);

	border: 1px solid var(--shallow);
	padding: 5px 10px;

	color: var(--shallow);
	/* background: var(--bg-dark); */
}

.kulcsosRowRes span img {
	max-width: 80px;
	max-height: 60px;
}

.kulcsosRowRes span a {
	color: var(--shallow);
	text-decoration: underline;
	transition: all var(--transition-short);
}

.kulcsosRowRes span a:hover {
	color: var(--deep);
}

.kulcsosRowRes span:nth-child(1) {
	width: 2%;
}

.kulcsosRowRes span:nth-child(2) {
	width: 13%;
}

.kulcsosRowRes span:nth-child(3) {
	width: 13%;
}

.kulcsosRowRes span:nth-child(4) {
	width: 12%;
	overflow: hidden;
}

.kulcsosRowRes span:nth-child(5) {
	width: 10%;
	word-break: break-all;
}

.kulcsosRowRes span:nth-child(6) {
	width: 6%;
}

.kulcsosRowRes .material-symbols-outlined {
	cursor: pointer;
	transition: all var(--transition-short);
	font-size: 20px;
}

.kulcsosRowRes span:nth-child(7) {
	width: 8%;
}

.kulcsosRowRes span:nth-child(8) {
	width: 8%;
}

.kulcsosRowRes span:nth-child(9) {
	width: 13%;
}

.kulcsosRowRes span:nth-child(10) {
	width: 2%;
}

.kulcsosRowRes span:nth-child(11) {
	width: 2%;
}

.radioButtons {
	box-shadow: none !important;
	background: none !important;
	display: flex;
	align-items: center;
	width: 100%;
	padding: 5px 0px;
}

.radioButtons input {
	box-shadow: none !important;
	background: none !important;
	width: 40px !important;
	height: 40px !important;
	margin: 0px 20px !important;
}

.radioButtons input:focus {
	box-shadow: none !important;
	border-radius: 50% !important;
	outline: none !important;
}

/* UPLOADER */

.uploaderMessage {
	position: absolute;

	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	width: 25vw;
	height: 20vh;

	background: var(--bg-dark);

	box-shadow: var(--default-box-shadow);
	border-radius: var(--border-radius-m);

	padding: var(--padding-xxxl);

	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
}

.uploaderMessage h1,
.uploaderMessage>span {
	color: var(--deep);
	font-size: var(--font-size-xl);
	font-weight: 600;
}

.uploaderMessage>a {
	margin: var(--margin-l) 0px;
	font-size: var(--font-size-l);
}


.uploaderMessage>span {
	font-size: var(--font-size-xxl);
	animation: loadingRotation var(--animation-extra-long) infinite;
}

/* calendar */

.catHeader {
	display: flex;
	justify-content: left;
	align-items: center;
	gap: var(--gap-xxl);
}

.catHeader h1 {
	font-size: var(--font-size-xxl);
	font-weight: var(--font-weight-semibold);
	color: var(--shallow);
	text-shadow: 1px 1px 1px var(--deep-op5);
	padding-bottom: var(--padding-s);
}

.sideBySide {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--margin-xxxl);
	gap: var(--gap-xl);
}

.calendar {
	width: 60%;
	display: flex;
	flex-direction: column;
}

.week {
	display: flex;
}

.day,
.calendar .dayname {
	width: 25%;
	height: 75px;
	background-color: var(--highlight);
	color: var(--shallow);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: var(--font-size-m);
	border: 0.1px solid var(--deep-op3);
	cursor: pointer;
	transition: all var(--transition-short);
}

.day span,
.day div,
.day input {
	pointer-events: none;
}

.calendar .dayname {
	background-color: var(--highlight-brightest);
	cursor: default;
	color: var(--deep);
}

.calendar .monthControl {
	font-size: var(--font-size-m);
	font-weight: var(--font-weight-semibold);
	cursor: pointer;
	transition: all var(--transition-short);
}

.calendar .monthControl:hover {
	box-shadow: var(--calendar-box-shadow-dark);
}

.calendar #increaseMonth span,
.calendar #decreaseMonth span {
	font-size: var(--font-size-xl);
}

.day:hover {
	box-shadow: var(--calendar-box-shadow-light);
}

.dateControlMenu {
	flex-direction: column;
	position: absolute;
	background: var(--sweeten);
	padding: 20px;
	animation: fadeInTop var(--animation-long);
	z-index: 999;
}

.dateControlMenu span {
	padding: var(--padding-s) var(--padding-xl);
	width: 140px;

	z-index: 999;
	cursor: pointer;

	font-size: var(--font-size-m);
	text-align: center;

	color: var(--deep);
	background: var(--bg);

	transition: all var(--transition-short);
}

.dateControlMenu span:hover {
	text-decoration: underline;
}

#dateControlMenu1 {
	margin-top: 60px;
}

#dateControlMenu2 {
	margin-left: 220px;
	margin-top: 60px;
}

.calendar .otherMonth {
	filter: contrast(0.9);
	background-color: var(--misty-op7);
}

.calendar .previousMonth {
	background-color: var(--deep-op7);
	filter: brightness(0.7);
	cursor: default;
	pointer-events: none;
}

.calendarInfo {
	width: 40%;
	min-height: 300px;
	max-height: unset !important;
	height: 100% !important;

	background: var(--bg-dark);

	/* margin: 0px var(--margin-xl); */
	padding: var(--padding-m);

	border-radius: var(--border-radius-m);

	box-shadow: var(--default-box-shadow);
	transition: all var(--transition-short);
}

.calendarInfo div {
	padding: 50px;
	transition: all var(--transition-short);
}

.calendarInfo div h1 {
	color: var(--shallow);
	text-shadow: 1px 1px 1px var(--deep-op5);
	font-size: var(--font-size-xl);
	transition: all var(--transition-short);
	padding-bottom: 20px;
}

.calendarInfo div h2 {
	color: var(--attention);
	font-size: var(--font-size-m);
	font-weight: var(--font-weight-semibold);
	padding-bottom: var(--padding-s);
}

.calendarInfo div .mainButton,
.calendarInfo div .secondaryButton {
	height: 50px;
	width: 150px;
	padding: 0;
	margin: var(--margin-s) 0px 0px 0px;
}

.calendarInfo div p {
	color: var(--deep);
	padding: var(--padding-xs);
	/* text-shadow: 1px 1px 1px var(--deep-op5); */
	display: flex;
	align-items: center;

	font-size: var(--font-size-m);
	font-weight: var(--font-weight-regular);
}

.calendarInfo div p span {
	margin-left: var(--margin-m);
	font-weight: 600;
}

.calendarInfo div p div {
	padding: 0;
	margin-left: var(--margin-m);
}

.status-green,
.status-yellow,
.status-red {
	height: 7px;
	width: 7px;
	border-radius: 50%;
	background: var(--success);
}

.status-yellow {
	background: var(--attention);
}

.status-red {
	background: var(--warning);
}

.status-large div {
	height: 20px !important;
	width: 20px !important;
}

/* tasks */
.task-table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
	font-family: Arial, sans-serif;
}

.task-table th,
.task-table td {
	padding: 12px;
	text-align: center;
	border-bottom: 1px solid var(--main);
}

.bgd {
	background-color: var(--deep);
}

/* columns that are in the middle  => text align center*/
.task-table .task-description {
	text-align: left;
}

.task-table th {
	background-color: var(--deep);
	font-weight: bold;
	color: var(--shallow);
	border-bottom: 1px solid var(--shallow);
}

.task-table .task-description {
	width: 28%;
}

.task-table .task-time {
	width: 4%;
}

.task-table .task-name,
.task-table .task-status,
.task-table .task-user,
.task-table .task-department {
	width: 10%;
}

.task-table .task-actions {
	width: 10%;
	text-align: center;
}

.task-table tr:hover {
	background-color: var(--main);
}

.task-status-red {
	color: #d32f2f;
	font-weight: bold;
}

.task-status-yellow {
	color: #f57c00;
	font-weight: bold;
}

.task-status-green {
	color: #388e3c;
	font-weight: bold;
}

.btn-edit,
.btn-delete {
	background: none;
	border: none;
	cursor: pointer;
	padding: 5px;
	margin: 0 2px;
	border-radius: 4px;
	color: var(--main);
}

.task-row:hover .btn-edit,
.task-row:hover .btn-delete {
	background-color: var(--main);
	color: var(--deep);
}

.btn-edit:hover,
.btn-delete:hover {
	background-color: var(--deep);
	color: var(--highlight);
}

.no-tasks {
	text-align: center;
	color: var(--shallow);
	font-size: 30px;
	font-weight: 500;
	font-style: italic;
	padding: 20px;
}

#uploadForm .dropdown-row {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

#editForm .dropdown-row {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

#task-name,
#task-name-edit {
	width: 100% !important;
	max-width: 100% !important;
	height: 50px;
	font-size: 15px;
	border-radius: 8px;
	padding: 10px;
	box-sizing: border-box;
	overflow-y: auto;
	white-space: pre-wrap;
	word-wrap: break-word;
}

#uploadForm #task-date,
#uploadForm #task-status,
#uploadForm #task-user,
#uploadForm #task-deadline,
#uploadForm #task-department,
#uploadForm #task-project,
#uploadForm #task-store,
#uploadForm #task-deadline-date-label {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1rem;
	margin-left: 1.5%;
	margin-right: 1.5%;
	width: 30% !important;
	max-width: 100% !important;
	height: 50px;
	color: var(--deep);
}

#uploadForm #task-store option{
	color: var(--deep);
}

#editForm #task-status-edit,
#editForm #task-user-edit,
#editForm #task-project-edit,
#editForm #task-department-edit {
	font-size: 1rem;
	width: 30% !important;
	max-width: 100% !important;
	height: 50px;
}

.dateSectionFlex {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	width: 100%;
}

#task-upload-date-label-edit,
#task-deadline-date-label-edit {
	width: 45% !important;
	max-width: 100% !important;
	height: 50px;
	font-size: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 1.5%;
	margin-right: 1.5%;
	text-align: right;
}

#editForm #task-upload-date-edit,
#editForm #task-deadline-date-edit {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	font-size: 1rem;
	margin-left: 1.5%;
	margin-right: 1.5%;
	width: 45% !important;
	max-width: 100% !important;
	height: 50px;
}

.w50px {
	width: 50px;
}

.w50px p{
	font-size: 10px;
}

.uploadDataTask, .editDataTask, .deleteDataTask, .dailyMailTask {
	background-color: var(--highlight);
	width: 30% !important;
	height: auto;
}

.startTimer, .stopTimer {
	background-color: var(--highlight);
	width: 20% !important;
	height: 20%;
	border-radius: 30px;
}

.stopTimer input[type="text"]#timer-reason-stop {
  width: 100%;
  height: 50px;
  font-size: 15px;
  border-radius: 8px;
  padding: 10px;
  box-sizing: border-box;
  overflow-y: auto;
  margin-top: 20px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.deleteDataTask, .dailyMailTask, .startTimer, .stopTimer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-left: 35%;
	margin-top: 15%;
	padding: 50px;
	background-color: var(--main);
	box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.9);
}

#task-to-delete-name {
	width: 100%;
	height: 50px;
	font-size: 15px;
}

.headerLeftSide {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

.headerRightSide {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

#filterByUsers {
	width: 550px !important;
	height: 50px;
}

#filterByDate,
#timer_filterByDate {
	width: 150px !important;
	padding-left: 10px;
	height: 50px;
}

.filterDropdownHeader {
	cursor: pointer;
	background: transparent;
	padding: 10px 10px;
	border-radius: 8px;
	width: 170px;
	transition: all 0.3s;
	border: 2px solid var(--deep);
}

.filterDropdownHeader h1 {
	font-size: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	user-select: none;
	transition: all 0.3s;
	color: var(--deep);
	font-weight: 300;
	max-height: 70px;
	overflow: hidden;
	align-items: start;
}

.filterDropdownHeader:hover h1 {
	color: var(--shallow);
}

.filterDropdown {
	flex-direction: column;
	width: inherit;
	position: absolute;
	margin-top: 10px;
	height: 30vh;
	overflow-y: auto;
	animation: fadeInTop 0.5s;
	background: var(--highlight);
	border: 2px solid var(--deep);
}

.filterDropdown a {
	padding: 8px 20px;
	font-size: 15px;
	color: var(--deep);
	z-index: 99;
	background: var(--highlight);
	transition: all 0.3s;
	border-bottom: 1px solid var(--shallow);
}

.filterDropdown a:hover {
	background: var(--deep);
	color: var(--shallow);
}

input[type="text"]#filterByFile,
input[type="date"]#filterByDate,
input[type="date"]#timer_filterByDate, 
input[type="date"]#schedule_filterByDate {
	border: 1px solid var(--deep);
	border-radius: 6px;
	height: 54px;
	/* padding: 2px !important; */
	width: 150px !important;
	box-sizing: border-box;
	font-size: 1rem;
	color: var(--deep);
	line-height: 1.5;
	background-color: var(--highlight);
	outline: none;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input[type="date"]#filterByDate:hover,
input[type="date"]#timer_filterByDate:hover {
	border-color: var(--main);
}

input[type="date"]#filterByDate:focus,
input[type="date"]#timer_filterByDate:focus {
	border-color: var(--main);
	box-shadow: 0 0 0 3px var(--highlight);
}

input[type="date"]#filterByDate::-webkit-calendar-picker-indicator,
input[type="date"]#timer_filterByDate::-webkit-calendar-picker-indicator {
	filter: invert(0.5) sepia(1) saturate(5) hue-rotate(170deg) brightness(0.8);
	cursor: pointer;
	opacity: 1;
}

input[type="date"]#filterByDate::-ms-clear,
input[type="date"]#timer_filterByDate::-ms-clear {
	display: none;
}

input[type="date"]#filterByDate::placeholder,
input[type="date"]#timer_filterByDate::placeholder {
	color: #a0a0a0;
}

.paginationWrap {
	width: 100%;
	/* height: 100px; */
	padding-top: 30px;
	display: flex;
	justify-content: center;
}

.pagination {
	color: var(--shallow);
	font-size: 20px;
	display: flex;
	justify-content: center;
	width: 80%;
	gap: 10px;
	overflow: hidden;
}

.pagination a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 20px;
	padding: 3px;
	color: var(--highlight);
	cursor: pointer;
	transition: all 0.3s;
}

.pagination a:hover {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 20px;
	padding: 3px;
	border-radius: 3px;
	color: var(--shallow);
	transform: scale(1.1);
	background-color: var(--main);
}

.currentPage {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 20px;
	padding: 3px;
	margin-bottom: 3px;
}

/* footer */
/* footer */
footer {
	display: flex;
	flex-direction: column;
	width: 100%;
	justify-content: space-around;
	align-items: center;
	padding: 10px 0px;
	color: var(--deep);
	background: var(--footer-color);
	/* filter: brightness(0.5); */
	backdrop-filter: blur(10px);
}

footer img {
	width: 75px;
	transition: all 1s;
	margin: 0px 30px;
	/* filter: invert(1); */
}

footer img:hover {
	transform: scale(1.1);
}

.footerLogo {
	display: flex;
	justify-content: center;
	align-items: center;
}

.footerLogo span {
	color: var(--deep);
	font-weight: 300;
	font-size: 14px;
}

.footerLogo a {
	color: var(--deep);
	font-weight: 600;
	transition: all 0.3s;
}

.footerLogo a:hover {
	color: var(--footer-highlight);
}

.footerNav {
	display: flex;
	justify-content: center;
	align-items: start;
	flex-direction: column;
}

footer .navbar a {
	font-size: 18px;
	font-weight: 400;
	margin: 3px 0px;
	color: var(--deep);
}

footer .navbar a:hover {
	transform: scale(1.05);
}

.footerListWrap {
	display: flex;
	width: 100%;
	justify-content: space-around;
	margin: 100px 0px 50px 0px;
}

.footerList {
	display: flex;
	flex-direction: column;
}

.footerList a {
	color: var(--deep);
	transition: all 0.3s;
}

.footerList a:hover {
	color: var(--footer-highlight);
	transform: translatex(4px);
	text-shadow: 0 0 10px var(--shallow-op5);
}

.footerList ul {
	padding-left: 25px;
	margin: 5px 0px;
}

.footerList li::marker {
	color: var(--deep);
}

.footerIcons {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: start;
	gap: 10px;
}

.footerIcons a {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	color: var(--deep);
	transition: all 0.3s;
}

.footerIcons a:hover {
	color: var(--footer-highlight);
	transform: translatex(4px);
	text-shadow: 0 0 10px var(--shallow-op5);
}

.footerIcons a span {
	color: var(--deep);
	transition: all 0.3s;
}

.footerIcons a:hover span {
	color: var(--footer-highlight);
}

.footerLegal {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

.footerLegal a {
	color: var(--deep);
	transition: all 0.3s;
}

.footerLegal a:hover {
	color: var(--footer-highlight);
	transform: translatex(4px);
	text-shadow: 0 0 10px var(--shallow-op5);
}

.footerLegal img {
	width: 200px;
	transition: all 0.3s;
	/* filter: invert(1); */
}

.footerIcons a:hover svg * {
	color: var(--footer-highlight);
	fill: var(--footer-highlight);
	stroke: var(--footer-highlight);
}

.footerIcons a:hover img {
	/* Make black icons the accent highlight color, but shift more red */
	filter: invert(43%) sepia(87%) saturate(5158%) hue-rotate(-6deg) brightness(105%) contrast(113%) brightness(0.8);
}

.footerMediaIcon {
	width: 25px;
	height: 25px;
	margin: 0px;
}

/* mobile */
.navbar-mobile {
	display: none;
}

#mobileMenuIcon {
	display: none;
}

/* ANIMATIONS */

@keyframes fadeInTop {
	from {
		opacity: 0;
		transform: translateY(-50%);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes loadingRotation {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}