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

@view-transition {
	navigation: auto;
}

body {
	background-color: #f8f9fa;
	font-size: 14px;
	font-family: Roboto,sans-serif !important;
	font-weight: 400;
	line-height: 24px;
	margin: 0;
	height: 100vh;
	height: 100dvh;
	accent-color: rebeccapurple;
}

a:link {
	color: blue;
	text-decoration: none;
}

a:visited {
	color: blue;
	text-decoration: none;
}

a:active {
	color: rebeccapurple;
	text-decoration: underline;
}

a:hover {
	color: rebeccapurple;
	text-decoration: underline;
}

h2 {
	letter-spacing: .05rem;
}

div.container {
	width: 100%;
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: auto;
}

div.stickyheader {
	position: sticky;
	top: 0;
	z-index: 2;
	box-shadow: 0 -6px 10px 5px rgba(0,0,0,0.5);
}

div.contentcontainer {
	width: fit-content;
	display: grid;
	grid-template-columns:  repeat(2, minmax(min-content, max-content));
	grid-template-rows: auto;
	grid-gap: 15px;
}

div.headermenu {
	height: fit-content;
	width: 100%;
	padding: 10px;
	background-color: #a79bff;
	background-image: url('wickedbackground.svg');
	background-position: center top;
	-webkit-background-size: cover;
	background-size: cover;
	color: white;
	font-size: 1.1rem;
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: auto;
	grid-gap: 15px;
}

#hamburger {
	display: flex;
    justify-self: flex-start;
    align-self: center;
	border: 6px solid #c5bbff;
    border-radius: 15px;
}

#title {
	display: flex;
	justify-self: flex-end;
	text-align: right;
	align-self: center;
	flex-direction: column;
	background-color: #f8f7ff;
    border-radius: 15px;
	border: 4px solid rebeccapurple;
}

@media not (prefers-reduced-motion: reduce) {
	#title {
		view-transition-name: title;
	}
	#hamburger {
		view-transition-name: hamburger;
	}
	.contentcontainer {
		view-transition-name: contentcontainer;
	}
}

span.menuitem {
	margin: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
}

div.main {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 5vh;
	padding-bottom: 5vh;
	width: 100%;
	height: fit-content;
	background-color: #f8f9fa;
	color: #190e68;
}

div.card {
	margin-bottom: 15px;
	background-color: white;
	padding: 25px; 
	width: fit-content;
	max-width: 90vw;
	overflow-x: auto;
	height: fit-content;
	border-radius: 15px;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

div.headercard {
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1rem;
	gap: 1rem;
}

div.errorcard {
	text-align: center;
	color: red;
	font-weight: bold;
	padding: 25px;
}

div.footer {
	display: none;
	height: fit-content;
	width: 100%;
	background-color: #b8abffcf;
	padding: 10px;
	text-align: right;
	color: white;
	border-top: 2px solid #4f39b45e;
}

div.footer > a {
	color: white;
}

div.footer:hover {
	cursor: pointer;
	background-color: #9d8df3cf;
}

.companybar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 10px 5px 10px;
	min-height: 1vh;
	width: 100%;
	text-align: center;
	font-size: .8rem;
	letter-spacing: .012rem;
	/* color: #190e68; */
	color: rebeccapurple;
	background-color: #c5bbff;
	border-bottom: 2px solid #4f39b45e;
}

.companybar > div:first-child {
	text-align: left;
}

.companybar > div:last-child {
	text-align: right;
}

/* Search functionality in companybar */
.searchboxdiv {
	display: flex;
	align-items: center;
	gap: 5px;
	justify-content: flex-start;
}

.searchboxdiv img {
	width: 16px;
	height: 16px;
}

.searchboxdiv input[type="search"] {
	padding: 4px 8px;
	border: 1px solid #4f39b45e;
	border-radius: 4px;
	font-size: 0.75rem;
	width: 200px;
	max-width: 100%;
}

.searchboxdiv input[type="search"]:focus {
	outline: none;
	border-color: rebeccapurple;
	box-shadow: 0 0 0 2px rgba(102, 51, 153, 0.2);
}

.searchboxdiv button {
	padding: 4px 8px;
	background-color: #eddcff;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.75rem;
}

.searchboxdiv button:hover {
	background-color: #7b3f9e;
}

/* Override the global focus-visible background for companybar search */
.searchboxdiv input[type="search"]:focus-visible {
	background-color: white !important;
}

/* Responsive design for companybar */
@media (max-width: 768px) {
	.companybar {
		flex-direction: column;
		gap: 10px;
		padding: 10px;
	}
	
	.searchboxdiv {
		order: 1;
	}
	
	.searchboxdiv input[type="search"] {
		width: 150px;
	}
}

#usernotifications {
	display: flex;
	anchor-name: --notificationbutton;
	justify-content: flex-end;
}

#usernotifications button {
	margin: 0 .25rem;
	font-size: .75rem;
}

#usernotifications button:hover {
	transform: scale(1.1);
}

.notifications {
	background-color: white;
	border-radius: 15px;
	padding: 10px 5px 10px 5px;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.notifications:hover {
	cursor: pointer;
	background-color: red;
}

.notificationclose {
	cursor: pointer; 
	padding: 5px; 
	border: 1px dashed #f0f0f0;
}

.notificationclose:hover {
	background-color: #ffc0cbb3;
}

a.thisnotification:hover {
	text-decoration: none;
}

.newnotifications {
	border: none;
	background-color: #fa3e3e;
	border-radius: 12px;
	color: white;
	padding: 5px;
	font-size: .8rem;
}

.nonotifications, .noemailnotifications {
	background-color: unset;
	box-shadow: none;
	padding: 0px 5px;
	border: none;
	font-size: .8rem;
	color: rebeccapurple;
}

.nonotifications:hover {
	background-color: unset !important;
}

.notificationsbar {
	position-anchor: --notificationbutton; 
	top: anchor(--notificationbutton bottom); 
	justify-self: anchor-center; 
	position-area: bottom; 
	margin-right: 5px;
    min-width: 20vw;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	position: absolute;
	border-radius: 15px;
	background-color: white;
	overflow-y: auto;
	padding: 5px 0px;
	border: none;
	font-size: .75rem;
	color: rebeccapurple;
	opacity: 0;
	transform: scale(0);
	max-height: 0px;
	margin-top: -3rem;
	transition-property: display,opacity,transform,max-height,margin-top;
  	transition-duration: .5s;
  	transition-behavior: allow-discrete;
}

.notificationsbar:popover-open {
	opacity: 1;
	transform: scale(1);
	max-height: 75vh;
	margin-top: .5rem;
	@starting-style {
		opacity: 0;
		transform: scale(0);
		max-height: 0px;
		margin-top: -3rem;
	}
}

.notificationsbar::backdrop {
	backdrop-filter: brightness(.5);
}

.notificationsbar:not(:popover-open):not(dialog[open]) {
    display: none;
	opacity: 0;
	transform: scale(0);
	max-height: 0px;
	margin-top: -3rem;
}

.notificationsbar > ul {
	list-style-type: none;
	padding: .25rem;
}

.notificationsbar > ul > li {
	border-bottom: 1px dashed #f0f0f0;
	border-radius: 15px;
	padding: .5rem;
}

.notificationsbar > ul > li:last-child {
	border-bottom: none;
}

.notificationsbar > ul > li:hover {
	cursor: pointer;
	background-color: #f0f0f0;
}

.notificationsbar > ul > li > a:hover {
	text-decoration: none;
}

.notificationread {
	font-weight: normal;
	transform: scale(.9);
}

.notificationunread {
	font-weight: bold;
}

#backtotop { 
	text-decoration: underline;
}
#backtotop:hover {
	cursor: pointer;
}

.button-38, input[type=submit], #bobDialogCancelButton {
	background-color: #FFFFFF;
	border: 0;
	border-radius: .5rem;
	box-sizing: border-box;
	color: #111827;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.25rem;
	padding: .75rem .75rem;
	text-align: center;
	text-decoration: none #D1D5DB solid;
	text-decoration-thickness: auto;
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 31%), 0 1px 2px 0 rgba(0, 0, 0, 31%);
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}

.button-38:hover, input[type=submit]:hover, #bobDialogCancelButton:hover {
	background-color: rgb(223 239 255);
}

.button-38:focus, input[type=submit]:focus, #bobDialogCancelButton:focus {
	outline: 2px solid rebeccapurple;
	outline-offset: 2px;
}

.button-38:focus-visible, input[type=submit]:focus-visible, #bobDialogCancelButton:focus-visible {
	box-shadow: none;
}

.button-38:disabled {
	background-color: #f1f1f1;
	color: #b8bbc3;
}

.button-38active {
	box-shadow: inset 0px 0px 5px #c1c1c1;
    background-color: #f0f0f0;
}

.button-38active:hover {
	background-color: #f0f0f0;
}

button.button-38small, #bobDialogCancelButton {
	padding: .5rem .5rem;
	font-size: .75rem;
}

.button-38tiny, input[type=submit].button-38tiny {
	border-radius: 3px;
	font-size: .6rem;
    padding: .1rem .3rem;
}

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

.buttonicon > img {
	margin-right: 5px;
}

input[type=email], input[type=password], input[type=text], select, textarea {
	field-sizing: content;
	min-width: 171px;
}

textarea {
	min-width: 250px;
    min-height: 100px;
}

input[type=text]:focus-visible, input[type=password]:focus-visible, input[type=tel]:focus-visible, input[type=email]:focus-visible, input[type=url]:focus-visible, input[type=search]:focus-visible {
    background-color: #cbc2fd57;
}

input[type=search] {
	border-radius: 7px;
	padding: .5rem;
}

input[type=text], input[type=password], input[type=email], input[type=number], input[type=date], input[type=url], select, div[contenteditable="true"], textarea, .swal2-input {
	border-radius: 7px !important;
	padding: .25rem !important;
}

div.checkbox {
	display: flex;
	width: fit-content;
	gap: .25rem;
	background-color: #b8abff21;
	border-radius: 7px;
    padding: .25rem .5rem;
}

div.checkbox label {
	font-size: x-small;
	cursor: pointer;
	font-weight: normal;
}

label.checkbox:hover {
	color: darkblue;
	font-weight: 500;
}

.cust:focus-visible, .vend:focus-visible {
	background-color: #cbc2fd57 !important;
}

/* menu */

.dropdown {
	position: relative;
	display: inline-block;
	margin: auto auto;
}

.dropbtn {
	opacity: 1;
	transition: all .3s ease-in-out;
	display: flex;
	align-items: center;
	border-radius: 7px;
	font-weight: bold;
	background-color: white;
	color: black;
	padding: 16px;
	font-size: 16px;
	border: none;
	letter-spacing: .1rem;	
}

.dropbtn:hover {
	background-color: #c5bbff;
	transition: all .3s ease-in-out;
	cursor: pointer;
}

.dropdown-menuitem {
	border-top: 1px solid #ededed;
}

.dropdown-menuitem:first-child {
	border-top: none;
}

.dropdown-content > .dropdown-menuitem:first-child > .dropdown-contentbg {
	border-top-right-radius: 7px;
	border-top-left-radius: 7px;
}
.dropdown-content > .dropdown-menuitem:last-child > .dropdown-contentbg {
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
}

.dropdown-content {
	transform: scale(0);
	transition: all .3s ease-in-out;
	transform-origin: top left;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 22ch;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 6px 12px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
	z-index: 1;
	border-radius: 7px;
	border-top: none;
	margin-top: 1px;
}

.dropdown-content a {
	font-size: .8rem;
	letter-spacing: .05rem;
	color: black;
	padding: .75rem;
	text-decoration: none;
	display: flex;
	align-items: center;
}

.dropdown-content a:hover, .dropdown-content a:active {
	color: #7304c5;
}

.dropdown-content a > img {
	margin-right: 2rem;
}

.dropdown-contentbg:hover {
	background-color: #ddeff5;
}

.dropdown-content.open {
    transform: scale(1);
}

.searchboxdiv {
	display: grid;
	grid-gap: 5px;
	grid-template-columns: auto auto auto;
}

/* google places autocomplete */
/* Container styling for the dropdown */
.pac-container {
	background-color: #fff;
	border: none;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	overflow: hidden;
	margin-top: 4px;
}
  
/* Styling for each suggestion item */
.pac-item {
	padding: 12px 16px;
	color: #190e68;
	cursor: pointer;
	transition: background-color 0.2s ease-in-out;
}
  
/* Hover and selection state */
.pac-item:hover, .pac-item-selected {
	background-color: #f0f0f0;
}

  
/* small screen media query */
@media only screen and (max-width: 600px) {	
	#title { 
		grid-area: title; 
		font-size: .9rem; 
		justify-self: center;
		text-align: center;
	}
	#hamburger { grid-area: hamburger; }

	div.headermenu {
		background-image: url('wickedbackground2.png');
		grid-template-rows: auto auto;
		grid-template-columns: auto;
		grid-template-areas: 
		"title"
		"hamburger";
	}
	
	#hamburger {
		justify-self: center;
	}
	
	.dropdown-content {
		right: -100%;
		transform-origin: top center;
	}

	.notificationsbar {
		width: 90vw;
	}
	
	div.contentcontainer {
		grid-template-rows: auto auto;
		grid-template-columns: auto;
	}

	.card {
		width: 100% !important;
		text-align: center;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}