/* css reset */
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
	box-sizing: border-box;
}
/* 2. Remove default margin */
*:not(dialog) {
	margin: 0;
}
/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
	html {
	interpolate-size: allow-keywords;
	}
}
body {
	font-size: 16px;
	/* 4. Increase line-height */
	line-height: 1.5;
	/* 5. Improve text rendering */
	-webkit-font-smoothing: antialiased;
	font-family: system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
/* 6. Improve media defaults */
img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}
/* 7. Inherit fonts for form controls */
input, button, textarea, select {
	font: inherit;
}
/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}
/* 9. Improve line wrapping */
p {
	text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}
/*
	10. Create a root stacking context
*/
#root, #__next {
	isolation: isolate;
}

/* color variables */
:root {
	color-scheme: light dark;
	
	&[data-color-scheme="light"] {
		color-scheme: light;
	}
	&[data-color-scheme="dark"] {
		color-scheme: dark;
	}

	--background-color-l: #efefef;
	--bar-background-color-l: #ffffff;
	--bar-highlight-color-l: #efefef;
	--highlight-color-l: rgb(179 194 174);
	--label-font-color-l: #1d5c58;
	--highlight-text-color-l: var(--primary-font-hilight-color-l);
	--primary-font-color-l: #616161;
	--primary-font-hilight-color-l: #000000;
	--box-shadow-color-l: #9d9d9da8;
	--add-background-color-l: #f2f2f2;
	--inactive-text-l: darkred;

	--background-color-d: rgb(24, 28, 20);
	--bar-background-color-d: rgb(60, 61, 55);
	--bar-highlight-color-d: #626262;
	--primary-font-color-d: rgb(236, 223, 204);
	--primary-font-hilight-color-d: #ffffff;
	--highlight-color-d: rgb(105, 117, 101);
	--box-shadow-color-d: #505050a8;
	--add-background-color-d: #363636;
	--highlight-text-color-d: #000000;
	--label-font-color-d: var(--highlight-color-d);
	--inactive-text-d: #ff9c9c;

	--background-color: light-dark(var(--background-color-l),var(--background-color-d));
	--bar-background-color: light-dark(var(--bar-background-color-l),var(--bar-background-color-d));
	--bar-highlight-color: light-dark(var(--bar-highlight-color-l),var(--bar-highlight-color-d));
	--highlight-color: light-dark(var(--highlight-color-l),var(--highlight-color-d));
	--label-font-color: light-dark(var(--label-font-color-l),var(--label-font-color-d));
	--highlight-text-color: light-dark(var(--highlight-text-color-l),var(--highlight-text-color-d));
	--primary-font-color: light-dark(var(--primary-font-color-l),var(--primary-font-color-d));
	--primary-font-hilight-color: light-dark(var(--primary-font-hilight-color-l),var(--primary-font-hilight-color-d));
	--box-shadow-color: light-dark(var(--box-shadow-color-l),var(--box-shadow-color-d));
	--add-background-color: light-dark(var(--add-background-color-l),var(--add-background-color:-d));
	--inactive-text: light-dark(var(--inactive-text-l),var(--inactive-text-d));
}

a {
	color: var(--inactive-text);
	opacity: .8;
}
a:hover {
	opacity: 1;
}

/* the rest */
html,
body {
	height: 100%;
}
.disabled {
	pointer-events: none;
	opacity: .7;
}
option[disabled]{
	display: none;
}
.pe-none {
	pointer-events: none;
}
.flex {
	display: flex;
}
.flex-column {
	flex-direction: column;
}
.align-items-center {
	align-items: center;
}
.text-content-center {
	text-align: center;
}
.no-flex-shrink {
	flex-shrink: 0;
}
.w-100 {
	width: 100%;
}
.justify-content-between {
	justify-content: space-between;
}
option {
	background-color: var(--bar-background-color);
	color: var(--primary-font-color);
}
.list-group-item {
	padding: 1rem;
    border-radius: .5rem;
    display: flex;
    margin-bottom: .5rem;
}
.list-group-item:hover {
	cursor: pointer;
	background-color: var(--bar-highlight-color);
}
.list-group-item.current {
    background-color: var(--highlight-color);
	color: var(--highlight-text-color);
}
.inactive-text {
	color: var(--inactive-text);
	font-style: italic;
}
#calendar header {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	justify-content: center;
}
#calendarMonth,
#calendarYear {
	margin: 0;
	width: unset;
}
i.bi.bi-cake2-fill {
    color: lightcoral;
}
article.today {
    color: orangered;
}
#sioPowered {
	font-size: .65rem;
	text-align: center;
}
.dropdown-menu {
	position: fixed;
    background: var(--bar-background-color);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    border: 1px solid #6a6a6a;
    border-radius: .5rem;
    box-shadow: var(--box-shadow-color) 3px 3px 6px;
	z-index: 10;
}
article > div {
    margin-bottom: .4rem;
}
input[type=search] {
    border-radius: 1rem;
    border: 1px solid grey;
    padding: .55rem 1rem;
    padding-left: 1.9rem;
    padding-right: 2.5rem;
    background: var(--add-background-color);
    color: var(--primary-font-color);
}
ul {
	list-style: none;
	padding-left: 0;
}
li {
    padding: .25rem 0;
}
button {
	padding: .5rem 1rem;
	background: rgba(102, 209, 255,.7);
    border: 0;
    border-radius: 4px;
    color: rgb(0, 36, 51);
    transition: background .3s;
    line-height: 1.2rem;
    margin: 0 .2rem;
	box-shadow: inset 1px 1px 4px #ffffff85;
}
button:hover {
	background: rgba(102, 209, 255,1);
	cursor: pointer;
}
#mainNav li {
    margin-bottom: .3rem;
	border: 1px solid;
    border-color: rgba(255, 255, 255, 0);
}
.btn-success {
	background: rgba(72, 199, 142,.7)
}
.btn-success:hover {
	background: rgba(72, 199, 142,1)
}
.btn-warning {
	background: rgba(255, 183, 15,.7);
}
.btn-warning:hover {
	background: rgba(255, 183, 15,1);
}
.btn-light {
	background: rgba(212, 212, 212,.7);
}
.btn-light:hover {
	background: rgba(212, 212, 212,1);
}
span#itemSeachButton {
    position: relative;
    left: 28px;
}
dialog {
    border: 1px solid black;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 3px 4px 9px var(--box-shadow-color);
}
dialog article {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
dialog footer {
    display: flex;
    justify-content: space-around;
}
.cards {
	padding: 1rem;
}
.form-floating {
    background: white;
}
.form-signin {
	max-width: 330px;
    padding: 1rem;
    background: var(--add-background-color);
    border-radius: 6px;
}
.buttons {
	display: flex;
	justify-content: space-between;
	justify-self: end;
}
.navButton:hover ,
.dropdown-item:hover {
	cursor: pointer;
	transition: background .6s, box-shadow .6s, border .6s;
    color: var(--highlight-color);
}
.navButton.current {
    color: var(--primary-font-hilight-color);
}
.userDropdown:hover {
	cursor: pointer;
}

.form-signin .form-floating:focus-within {
	z-index: 2;
}
body {
	background-color: var(--background-color);
	color: var(--primary-font-color);
	transition: background 0.3s;
}
#topBar {
	height: 40px;
    display: flex;
    align-items: center;
    gap: .5rem;
}
#clientName {
	font-size: 1.5rem;
	line-height: 1.5rem;
}
div#banner {
    text-align: center;
}
#mainContainer {
	height: calc(100vh - 40px);
	display: flex;
	flex-wrap: nowrap;
}
#searchbar {
	display: flex;
	gap: 2rem;
	padding-bottom: 8px;
	justify-content: center;
}
#searchbar select {
	border: none;
	background: unset;
}
#leftBar {
	width: 9rem;
	padding-top: 1rem;
	justify-content: space-between;
}
#leftBar.mini {
	width: 1.5rem;
}
#leftBar.mini a {
	padding: 0;
}
#leftBar.mini span {
	display: none;
}
#leftBar.mini i.bi{
	font-size: 1rem;
	margin: 0;
	padding: 1px 5px;
}
#leftBar.mini #banner,
#leftBar.mini #sioPowered {
	display: none;
}
#leftBar i.bi {
	font-size: 1.5em;
	margin: 0 .75rem;
}
#topBar ul.nav{
	justify-content: space-between;
	height: 40px;
}
#middleBar {
	width: 34rem;
}
#middleBar,
#rightBar {
    border-radius: 10px;
    padding: 1rem;
    margin: 1rem;
    background: var(--bar-background-color);
	transition: background 0.3s;
}
#rightBar {
	flex-grow: 2;
	max-width: 40rem;
}
#closeRightBar {
	cursor: pointer;
}
#printPage {
    position: absolute;
    width: 100%;
    z-index: 200;
    top: 0;
    background: white;
	min-height: 100%;
}
#printContents {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
#printButtons {
	position: sticky;
    top: 1rem;
    text-align: right;
    margin-right: 1rem;
    margin-top: 1rem;
}
#printContents .notForPrint {
	display: none;
}
.widthThird {
	width: 33%;
}
.widthSixth {
	width: 16.5%;
}
.widthHalf {
	width: 50%;
}
#printPage .list-group-item {
	break-inside: avoid;
}
#printPage .list-group-item:hover {
	background: unset;
	cursor: default;
}
#printPage .addBackground {
	background-color: unset;
	padding: unset;
	margin: unset;
	color: unset;
}
#printContents button {
	display: none;
}
#printContents h1 {
	width: 100%;
    text-align: center;
	page-break-before: always;
}
#printPage {
	color: #616161!important;
}
#printContents .printBold {
	font-weight: bold;
}
.hidden {
	display: none!important;
}
.scrollarea {
	overflow-y: auto;
}
#toggler {
	border-radius: 4rem;
	padding: 4px 8px;
	margin-left: .5rem;
	visibility: hidden;
}
#details,
#edit {
    padding: 2rem;
	padding-top: 0;
}
summary {
    text-align: center;
    background: var(--bar-highlight-color);
    cursor: pointer;
    color: var(--highlight-text-color);
}
.fullText article {
    padding: 1rem;
}
#edit article {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 1rem;
}
#edit form {
    display: flex;
    flex-direction: column;
	gap: 1.5rem;
    padding: 1rem 2rem;
}
/* #edit label {
    display: flex;
    gap: .5rem;
    align-items: center;
} */
#edit footer {
    display: flex;
    justify-content: space-around;
}
.eventBody,
.commentBody,
.addBackground {
	background: var(--add-background-color);
    border-radius: 8px;
    padding: .5rem;
	color: var(--primary-font-color);
	margin: .5rem 0;
	white-space: pre-line;
}
#filterDropdown {
	font-size: .8rem;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 0.2rem;
	gap: 1rem;
}
.add {
    margin-left: 1.25rem;
}
.add:hover {
	cursor: pointer;
	text-decoration: underline;
}
.filterDropdown {
	position: relative;
    left: -38px;
}
.mb1 {
    margin-bottom: 1rem;
}
.fullText h3 {
	margin: 1rem;
}
.fullText p:not(:empty){
	display: flex;
    justify-content: space-between;
	margin-bottom: .5rem;
	display: flex;
}
article p:not(:empty) {
	padding: 8px;
	border-radius: 1rem;
}
table#searchResults {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#searchResults tr.selected {
    background: var(--highlight-color);
}
#searchResults tr:hover {
	cursor: pointer;
	background-color: var(--bar-highlight-color);
}
#toggler:hover {
	background: rgb(223, 223, 223);
	cursor: pointer;
}
section[layer="family"] .card:hover{
	cursor: pointer;
}
.letterCircle {
	font-size: 1.5rem;
	color: white;
	border-radius: 50%;
	width: 3rem;
	height: 3rem;
	display: flex;
	justify-content: center;
	align-items: center;
	align-self: center;
}
div#invoiceInstructionsDiv {
	text-align: center;
    background: var(--add-background-color);
    padding: 4px;
    border-radius: 4px;
    font-size: .9rem;
    margin-bottom: .5rem;
    white-space: break-spaces;
}
div#invoiceTotalsDiv {
    display: flex;
    justify-content: space-around;
}
#totalFeeCalc {
	background: unset;
	border: 0;
}
.upcomingEvent {
	padding: .25rem;
	margin-bottom: .5rem;
}
.eventHolder {
	font-size: .9rem;
    margin-left: 2rem;
    margin-right: 2rem;
}
.eventHolder div {
	margin: .5rem 0;
}
.eventHolder div[uuid] {
	border-radius: 4px;
    color: var(--primary-font-hilight-color);
    padding: .25rem;
	text-align: center;
}
.anEvent:hover {
	opacity: 75%;
	cursor: pointer;
}
.eventHolder div {
	cursor: default;
}
.toast-container {
	z-index: 100;
}

.calendarTypeButtons.current {
	font-weight: bold;
}


.formItem {
	position: relative;
	border: 1px solid #c0c0c0;
	border-radius: 8px;
	padding: .2rem;
	background: var(--background-color);
    color: var(--primary-font-color);
}
.formItem input:focus,
.formItem select:focus,
.formItem textarea:focus {
	outline: none;
}
.formItem input {
    border-width: thin;
	border-radius: 4px;
    padding: 1rem;
    padding-top: 1.25rem;
	width: 100%;
	border: 0;
	background: unset;
}
.formItem select {
	background: unset;
    padding: 1rem .5rem;
	width: 100%;
	border: 0;
	background: unset;
}
.formItem textarea {
	padding: 1rem;
	width: 100%;
	border: 0;
	background: unset;
}
.formItem select + label {
	top: 0;
	left: .2rem;
	color: var(--label-font-color);
	font-size: .8rem;
}
.formItem textarea::placeholder {
	opacity: 0;
}
.formItem input::placeholder {
	opacity: 0;
}
.formItem label {
  	position: absolute;
    left: 1rem;
    top: 1.2rem;
    pointer-events: none;
	transition: all .3s;
}
.formItem input:focus + label,
.formItem input:not(:placeholder-shown) + label,
.formItem textarea:not(:placeholder-shown) + label,
.formItem textarea:focus + label  {
  	transform: translateY(calc(-50% - 14px));
	left: .2rem;
	top: 1.5rem;
	color: var(--label-font-color);
	font-size: .8rem;
}
div#emailList {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#emailList div {
    text-align: center;
	margin: .5rem;
}
#emailListOptions .detailsText {
    padding: 1rem;
	text-align: center;
    background: var(--background-color);
    border: 1px solid;
    border-color: var(--box-shadow-color);
    border-radius: 1rem;
    margin-top: .5rem;
    margin-bottom: .5rem;
}
#emailListOptions summary {
    text-align: left;
	padding: .25rem;
    margin: .25rem;
}
#manualCopy {
	margin-top: .5rem;
}
.emailItem.notIncluded {
	text-decoration: line-through;
	opacity: .5;
}
.emailItem:hover {
	cursor: pointer;
}

#theme-switcher legend {
	position: absolute;
	left: -100vw;
}
#theme-switcher label {
	position: relative;
	padding: 2px;
}
input[name="color-theme"] {
	height:1em;
	width:1em;
	position: absolute;
	left:-0.05em;
	top:0.2em;
	opacity: 0;
}
#theme-switcher label {
  	translate: 0 calc(0.5ex – 0.5cap);
}
#theme-switcher label i.bi {
	font-size: 1rem;
	opacity: 0.4;
	transition-property: color, opacity;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	cursor: pointer;
}
#theme-switcher label:hover i,
#theme-switcher input[name="color-theme"]:focus + i  {
  	opacity: 1;
}
#theme-switcher input[name="color-theme"]:checked + i {
	opacity: 0.8;
	cursor: auto;
}
#theme-switcher {
  	display: none;
}
@supports(color:light-dark(#fff,#000)) {
	#theme-switcher.visible {
		display: flex;
		justify-content: center;
		border: 0;
	}
}
@media (max-width: 576px) {
	.widthThird, .widthSixth, .widthHalf {
		width: 100%;
	}
	#mainContainer {
		height: calc(100vh - 55px);
	}
	#mainContent {
		display: block;
	}
	ul#mainNav {
		margin-top: 2rem;
        display: flex;
        align-items: flex-start;
        padding: 0;
        margin-left: 8rem;
	}
	#leftBar {
		height: calc(100vh - 50px);
        position: absolute;
        background:var(--bar-background-color);;
        top: 50px;
        padding-top: 0;
        z-index: 10;
        width: 100%;
    }
	#closeRightBar {
		padding: 1rem;
		width: 50%;
	}
	div#banner {
		font-size: 1.2rem;
		text-align: center;
	}
	#topBar ul.nav {
		height: 55px;
	}
	.dropdown {
		/* display: inline-block; */
		left: -42px;
	}
	#leftBar.mini {
		display: none;
	}
	#edit footer {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
	}
	#middleBar,
	#rightBar {
		width: calc(100vw - 1rem);
        margin-left: .5rem;
        height: calc(100vh - 55px - 1rem);
	}
	#rightBar {
		z-index: 2;
		position: absolute;
	}
	#clientName {
		font-size: 1rem;
        line-height: 1.5rem;
        margin-top: 10px;
		color: var(--label-font-color);
	}
	#leftBar.open:not(.mini) .navButton,
	#leftBar.open:not(.mini) .userDropdown div:first-child{
		font-size: 1.25rem;
	}
	.userDropdown {
		display: block;
	}
	.userDropdown .dropdown-menu {
		justify-self: center;
	}
	#sioPowered {
		font-size: 1rem;
	}
	#toggler {
		font-size: 1.5rem;
    	margin-top: 10px;
		visibility:visible;
	}
	#searchGroup {
		display: inline;
	}
	#calendar header {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1rem;
	}
	#calendarMonth,
	#calendarYear {
		margin: 0 1rem;
		width: unset;
	}
	#filterDropdown {
		gap: .25rem;
	}
	/* #edit label {
		justify-content: flex-end;
	} */
}
@media print {
	body {
		font-size: 10px;
	}
	#printButtons {
		display: none;
	}
	h1,h2,h3,h4,h5 {
		margin: 0!important;
	}
	p {
		margin: 0!important;
		padding: 0!important;
	}
	.list-group-item {
		padding: .25rem;
		margin-bottom: 0;
	}
}