/* Write your global styles here, in PostCSS syntax */

/* @tailwind base; */

:root {
	font-family: system-ui, Helvetica, Arial, sans-serif;
	/* line-height: 1.5; */
	/* font-weight: 400; */

	color-scheme: light dark;
	/* color: rgba(255, 255, 255, 0.87); */
	/* background-color: #242424; */

	/* font-synthesis: none; */
	/* text-rendering: optimizeLegibility; */
	/* -webkit-font-smoothing: antialiased; */
	/* -moz-osx-font-smoothing: grayscale; */
	/* -webkit-text-size-adjust: 100%; */
}

body {
	/* margin: 0; */
	/* display: flex;
  place-items: center; */
	/* min-width: 320px; */

	min-height: 100vh;
	/* min-height: fit-content; */
	/* height: 100%; */

	min-width: 100vw;
	/* width: 100%; */

	/* contain: layout; */
	/* contain: size; */
}

address {
	margin-bottom: 0.25em;
	padding-left: 0.5em;
	font-style: italic;
}

pre {
	white-space: pre-wrap;
	word-break: normal;
	word-wrap: normal;

	border: none;
}

textarea {
	/* width: calc(fit-content - 1em); */
	width: 100%;
	max-width: calc(fit-content - 0.5em);
}

button.ae_normal,
.btn.ae_normal {
	/* font: normal 1em sans-serif; */
	font-size: 1rem;
}

button.ae_smaller,
.btn.ae_smaller {
	font-size: 0.8rem;
}

button.ae_smallest,
.btn.ae_smallest {
	font-size: 0.65rem;
}

/* h1 {
    font-size: 3.2em;
    line-height: 1.1;
} */

/* .card {
    padding: 2em;
} */

/* #app {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
} */

/* button {
    border-radius: 8px;
    border: 1px solid transparent;
    padding: 0.6em 1.2em;
    font-size: 1em;
    font-weight: 500;
    font-family: inherit;
    background-color: #1a1a1a;
    cursor: pointer;
    transition: border-color 0.25s;
}
button:hover {
    border-color: #646cff;
}
button:focus,
button:focus-visible {
    outline: 4px auto -webkit-focus-ring-color;
} */

/* @media (prefers-color-scheme: light) {
    :root {
        color: #213547;
        background-color: #ffffff;
    }
    a:hover {
        color: #747bff;
    }
    button {
        background-color: #f9f9f9;
    }
} */

/* BEGIN: Novi and Bootstrap specific fixes */
/* .ae_btn .btn_xs, .btn .btn-xs {
    font-size: .65rem;
} */

.ae_btn.btn-danger,
.ae_btn.btn-info,
.ae_btn.btn-warning {
	border-radius: 60px;
}

/* END: Novi and Bootstrap specific fixes */

.ae_main {
	/* min-height: fit-content; */
	/* min-height: 100vh; */
	/* height: 100%; */

	/* min-width: 100vw; */
	/* width: 100%; */

	/* contain: layout; */
	/* contain: content; */
	/* contain: size; */
}

.ae_dev_in_progress {
	background-color: hsla(300, 80%, 50%, 1);
}

.c_idaa_bb,
.c_idaa_recovery_meetings {
	display: flex;
	flex-direction: column;
	/* align-items: center; */
	/* justify-content: center; */
	/* min-height: 100vh; */

	gap: 1em;
}

.c_idaa_archives > .ae_meta,
.c_idaa_bb > .ae_meta,
.c_idaa_recovery_meetings > .ae_meta {
	background-color: lightgray;
}

.ae_list.archive_obj_li {
	/* border: solid thin gray; */

	display: flex;
	flex-direction: column;
	/* align-items: stretch; */
	/* justify-content: stretch; */
	gap: 0.5em;
}

.ae_list.archive_obj_li .ae_object.archive_obj,
.ae_list.archive_content_obj_li .ae_object.archive_content_obj {
	border-top: solid medium hsla(0, 0%, 90%, 1);
	/* border-bottom: solid thin hsla(0,0%,90%,1); */
	/* margin: 1em .5em; */
	padding: 0.5em 0.5em;

	width: 100%;

	/* grow: 1; */
}

.c_idaa_recovery_meetings section.ae_options fieldset {
	display: flex;
	flex-direction: row;
}

.c_idaa_recovery_meetings section.ae_options fieldset legend {
	display: inline;
	/* border: none; */
	margin: 0;

	width: auto;
}

.ae_list.event_obj_li {
	/* border: solid thin gray; */

	display: flex;
	flex-direction: column;
	/* align-items: stretch; */
	/* justify-content: stretch; */
	gap: 0.5em;
}

.ae_list.event_obj_li .ae_object.event_obj {
	border-top: solid medium hsla(0, 0%, 90%, 1);
	/* border-bottom: solid thin hsla(0,0%,90%,1); */
	/* margin: 1em .5em; */
	padding: 0.5em 0.5em;

	width: 100%;

	/* grow: 1; */
}

/* For now this only affects the IDAA Recovery Meetings when viewing a specific meeting. */
.view__event_obj a,
.view__event_obj a.ae_link {
	/* color: #007bff; */
	color: #82b6e1;
	/* text-decoration: underline; */
	/* background-color: transparent; */
}
.view__event_obj a:hover,
.view__event_obj a:focus,
.view__event_obj a.ae_link:hover,
.view__event_obj a.ae_link:focus {
	color: #0056b3;
	text-decoration: underline;
	/* background-color: transparent; */

	/* scale: 1.1; */
}

.svelte_component {
	margin: 0em;
	padding: 0em;
}

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

.ae_warning {
	color: red;
}

.ae_highlight {
	background-color: hsla(60, 100%, 50%, 1);
}

.ae_d_none,
.d-none {
	display: none;
}

.ae_group {
	/* display: flex; */
	/* flex-direction: row; */
	/* align-items: center; */
	/* justify-content: space-between; */
	/* justify-content: space-evenly; */
}

.ae_column {
	display: flex;
	flex-direction: column;
	/* align-items: center; */
	/* justify-content: space-between; */
	justify-content: space-evenly;
}

.ae_row {
	display: flex;
	flex-direction: row;

	align-items: center;
	/* justify-content: space-between; */
	justify-content: space-evenly;
}

.ae_flex_justify_around {
	justify-content: space-around;
}

.ae_flex_justify_center {
	justify-content: center;
}

.ae_width_25 {
	width: 25%;
	/* max-width: 25%; */
}
.ae_width_30 {
	width: 30%;
	/* max-width: 30%; */
}
.ae_width_50 {
	width: 50%;
	/* max-width: 50%; */
}
.ae_width_100 {
	width: 100%;
	/* max-width: 100%; */
}

.ae_width_md {
	min-width: 16em;
	width: 16em;
	max-width: 16em;
}

.ae_width_lg {
	min-width: 20em;
	width: 22em;
	max-width: 24em;
}

.ae_margin_xs {
	margin: 0.25em;
}
.ae_margin_sm {
	margin: 0.5em;
}
.ae_margin_md {
	margin: 0.75em;
}
.ae_margin_lg {
	margin: 1em;
}
.ae_margin_lg {
	margin: 1.25em;
}

.ae_padding_md {
	padding: 0.75em;
}

.ae_float_right {
	float: right;
	align-self: flex-end;
}

.ae_options {
	padding: 1em;
}

.ae_fade_in {
	/* animation: fadein 1s; */
	opacity: 1;
	/* height: initial; */
	/* max-height: 100%; */
	/* width: initial; */
	/* max-width: 100%; */
	transition:
		opacity,
		height,
		width,
		0.25s ease-in;

	/* transition: height 1s ease-in; */
	/* width: initial; */
	/* transition: opacity, height, width 1s ease-in 1s; */
}
.ae_fade_out {
	/* animation: fadeout 1s; */
	opacity: 0;
	height: 0;
	max-height: 0;
	width: 0;
	max-width: 0;
	transition:
		opacity,
		height,
		width,
		0.25s ease-out;
}

/* .ae_section.ae_options {
    border: solid thin hsla(0,0%,90%,.75); */

/* Display options using flex (row, wrap, space elements equally) */
/* display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center; */
/* justify-content: space-evenly; */
/* align-content: center;
    align-items: center;
} */

.ae_section.ae_meta {
	font-size: smaller;
	color: hsla(0, 0%, 50%, 1);
}

.svelte_component.ae_edit {
	/* outline: dashed thin pink; */
	border: solid medium hsla(220, 100%, 50%, 0.1);
}

.svelte_component.ae_create {
	border: solid medium hsla(0, 100%, 50%, 0.1);
}

/* element_ae_modal ae_modal_showing_container ae_modal modal_cover_body */
.ae_modal {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;

	min-height: 100vh;
	height: 100%;
	/* max-height: 100vh; */

	min-width: 100vw;
	width: 100%;
	max-width: 100vw;

	/* background-color: hsla(180,75%,90%,.75); */
	background-color: hsla(180, 0%, 90%, 0.75);

	display: flex;
	flex-direction: column;

	align-items: center;
	/* align-items: flex-start; */
	/* justify-content: center; */
	/* justify-content: flex-start; */

	/* contain: layout; */
	contain: strict;
	/* contain: size; */

	/* Margin should stay 0 and padding can be used to create space within the modal for the actual content. */
	margin: 0;
	padding: 1em;

	/* pointer-events: auto; */
}

.ae_modal .modal_content {
	z-index: 1001;
	position: relative;

	box-sizing: content-box;

	background-color: white;
	/* margin: 1em;
    padding: .25em .5em; */
	margin: 0em;
	padding: 0em;

	border: solid thin lightgray;
	border-radius: 0.5em;

	/* box-shadow: .5em .5em 1.5em .5em hsla(0, 0%, 0%, .9); */
	box-shadow: 0em 0em 1.5em 0.5em hsla(0, 0%, 0%, 0.9);

	/* min-height: 50vh; */
	max-height: calc(100vh - 2em);
	/* max-height: fit-content; */

	/* min-width: 50vw; */
	max-width: calc(100vw - 2em);
	/* max-width: 100vw; */

	/* scroll-behavior: auto; */
	/* overflow: scroll; */
	/* overflow: auto; */
	/* contain: content; */
	/* contain: strict; */
	/* overflow: auto; */

	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.ae_modal .modal_header {
	background-color: hsla(0, 0%, 90%, 0.5);
	border-bottom: solid thin lightgray;

	margin: 0em;
	padding: 0.25em 0.25em;

	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.ae_modal .modal_body {
	/* outline: dashed medium pink; */

	margin: 0em;
	padding: 0.25em 0.25em;

	/* height: 100vh; */

	/* contain: content; */
	/* pointer-events: auto; */
	overflow: scroll;
	/* overflow-x: auto; */
	/* overflow-y: scroll; */
}

.ae_modal .modal_footer {
	background-color: hsla(0, 0%, 90%, 0.5);
	border-top: solid thin lightgray;

	margin: 0em;
	padding: 0.25em 0.25em;

	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

/* body.modal_cover_body {
    pointer-events: none;
    overflow-y: hidden;
    height: fit-content;
    contain: size;
} */

body.modal_cover_body .ae_modal {
	margin: 0em;
	padding: 0em;
	/* max-width: 100vw; */

	align-items: stretch;
}

body.modal_cover_body .ae_modal .modal_content {
	/* outline: dashed thin pink; */

	border: none;
	border-radius: 0;

	box-shadow: none;

	max-height: calc(100vh - 0.5em);

	max-width: calc(100vw);
}

body.modal_cover_body .ae_modal .modal_body {
	/* outline: dashed medium pink; */
}

form {
	display: flex;
	flex-direction: column;
	/* justify-content: flex-start; */
	/* align-items: center; */

	padding: 0.75em;
}

form fieldset {
	display: flex;
	flex-direction: column;
	/* justify-content: flex-start; */
	/* align-items: center; */
}

/* Make readonly input fields grayed out and hide border*/
form input:read-only {
	/* background-color: hsla(0,0%,90%,1); */
	border: none;
}
/* @tailwind components; */
@tailwind utilities;
