/**
 * setup
 *
 * @format
 */

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

:root {
	--hue: 30;
	--saturation: 10%;

	--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: hsl(var(--hue), var(--saturation), 50%);
	--highlight-bright: hsl(var(--hue), var(--saturation), 60%);
	--highlight-brightest: hsl(var(--hue), var(--saturation), 70%);

	--main: hsl(0, 0%, 90%);
	--footer-color: hsl(0, 0%, 0%);

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

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

a {
	text-decoration: none !important;
}

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

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

.alignButtonsLeft {
	width: 100% !important;
	align-items: left !important;
	justify-content: left !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 {
	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-brightest), var(--highlight));
	background-size: cover;
	width: 100%;
	height: 100%;
}

/* DASHBOARD */

#backToTop {
	align-items: center;
	position: fixed;
	background-color: var(--main-color);
	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-brightest), 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(auto-fit, minmax(min(300px, 100%), 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 img {
	filter: invert(0.5);
}

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

.dashboardMenu .houseCard img {
	filter: none !important;
	width: 100%;
	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(--shallow);
	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);
}

.kulcsosRow,
.kulcsosRow2,
.kulcsosRow3 {
	width: 100%;
	height: 300px;
	display: flex;
	background: var(--bg-dark);
	padding: var(--padding-s);
	border-radius: var(--border-radius-m);
	box-shadow: var(--default-box-shadow);
}

.kulcsosRow2 {
	height: 150px;
}

.kulcsosRow3 {
	height: 100px;
}


.kulcsosRow span,
.kulcsosRow2 span,
.kulcsosRow3 span {
	font-size: 15px;

	min-height: 50px;

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

	padding: var(--padding-s);
	border-right: 1px solid var(--shallow);
}

.kulcsosRow3 span {
	font-size: var(--font-size-m);
}

.kulcsosRow3 .material-symbols-outlined {
	font-size: var(--font-size-xxxl);
}


.kulcsosRow span img,
.kulcsosRow2 span img {
	max-width: 100%;
	max-height: 100%;
}

.kulcsosRow span a,
.kulcsosRow2 span a {
	color: white;
	text-decoration: underline;
	transition: all var(--transition-short);
}

.kulcsosRow span a:hover,
.kulcsosRow2 span a:hover {
	color: var(--highlight);
}

/* CHILD 1 */

.kulcsosRow span:nth-child(1) {
	width: 2% !important;
}

.kulcsosRow2 span:nth-child(1) {
	width: 2% !important;
}

.kulcsosRow3 span:nth-child(1) {
	width: 10% !important;
}

/* CHILD 2 */

.kulcsosRow span:nth-child(2) {
	width: 8% !important;
}

.kulcsosRow2 span:nth-child(2) {
	width: 12% !important;
}

.kulcsosRow3 span:nth-child(2) {
	width: 60% !important;
}

/* CHILD 3 */

.kulcsosRow span:nth-child(3) {
	width: 15% !important;

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

	overflow-x: auto !important;
	scrollbar-width: none;
}

.kulcsosRow2 span:nth-child(3) {
	width: 25% !important;
}

.kulcsosRow3 span:nth-child(3) {
	width: 10% !important;
}

/* CHILD 4 */

.kulcsosRow span:nth-child(4) {
	width: 40% !important;

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

	overflow-x: auto !important;
	scrollbar-width: none;
}

.kulcsosRow2 span:nth-child(4) {
	width: 7% !important;
}

.kulcsosRow3 span:nth-child(4) {
	width: 10% !important;
	box-shadow: none !important;
}

/* CHILD 5 */

.kulcsosRow span:nth-child(5) {
	width: 26% !important;
}

.kulcsosRow2 span:nth-child(5) {
	width: 25% !important;
	text-wrap: wrap;
}

.kulcsosRow3 span:nth-child(5) {
	width: 10% !important;
	border-right: none !important;
}

/* CHILD 6 */

.kulcsosRow span:nth-child(6) {
	width: 3% !important;
}

.kulcsosRow2 span:nth-child(6) {
	width: 13% !important;
}

/* CHILD 7 */

.kulcsosRow span:nth-child(7) {
	width: 3% !important;
	border-right: none !important;
}

.kulcsosRow2 span:nth-child(7) {
	width: 3% !important;
}

/* CHILD 8 */

.kulcsosRow2 span:nth-child(8) {
	width: 3% !important;
	border-right: none !important;
}

.kulcsosRow span>a>span,
.kulcsosRow2 span>a>span,
.kulcsosRow span>.material-symbols-outlined,
.kulcsosRow2 span>.material-symbols-outlined {
	border: none;
	color: var(--deep);
	font-size: var(--font-size-l) !important;
}

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

.kulcsosRow .material-symbols-outlined:hover,
.kulcsosRow2 .material-symbols-outlined:hover {
	transform: scale(1.5);
	color: var(--deep);
}

.kulcsosRow3 .material-symbols-outlined:hover {
	color: var(--deep);
}

.kulcsosRow span>input[type="checkbox"],
.kulcsosRow2 span>input[type="checkbox"] {
	width: 30px;
	height: 30px;
}

.kulcsosRow3 span>input[type="checkbox"] {
	width: 40px;
	height: 40px;
}

.kulcsosRowHeader,
.kulcsosRowHeader2 {
	height: fit-content !important;
}

.kulcsosRowHeader>span,
.kulcsosRowHeader2>span {
	height: fit-content !important;
	border-right: none !important;
	justify-content: center !important;
	align-items: center !important;
}

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

/* FORM STYLES */
form {
	width: 40%;
	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);
}

.deleteConfirmation div{
	background: var(--bg-dark);
	border-radius: 20px;
	padding: var(--padding-s) var(--padding-l);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.deleteConfirmation div div{
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-direction: row;
	align-items: center;
}

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

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

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

#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-m);
	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;
}

/* 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: 60%;
	transition: all var(--transition-short);
	margin-left: 50px;
}

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

/* RESERVATIONS PAGE */

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

.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: 20vw;
	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;
}

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

.uploaderMessage>a {
	margin: var(--margin-xl) 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: 55vh !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;
}

/* footer */
footer {
	display: flex;
	background: var(--footer-color);
	width: 100%;
	justify-content: space-around;
	padding: var(--padding-m) 0px;
}

footer img {
	width: 75px;
	transition: all var(--transition-long);
	margin: 0px var(--margin-xl);
}

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

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

.footerLogo span {
	color: var(--shallow);
	font-weight: 300;
	font-size: var(--font-size-xs);
}

.footerLogo a {
	color: var(--shallow);
	font-weight: 600;
	transition: all var(--transition-short);
}

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

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

footer .navbar a {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-regular);
	margin: 3px 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);
	}
}