/* Common style */

/* page structure */

html,
body {
	height: 100vh; /* fallback, older style, that mostly works (this line must come first) */
	height: 100dvh; /* newer, for mobile browsers with disappearing address bars (https://stackoverflow.com/a/72245072) */
	margin: 0;
	padding: 0;
}
body {
	display: flex;
	flex-flow: column nowrap;
}

#header_pane,
#footer_pane {
	flex: 0 0 auto;
	margin: 0 auto;
	width: 85vw;
}

#main_pane {
	flex: 1 1 auto; /* shrink:1 is necessary to cause .foot to stick to the floor, and for the overflow-scroll (below) to work as expected... */
	overflow-y: auto; /* ... causing an overflow to result in a .content-contained vertical scrollbar */
	margin: 0 auto;
	width: 85vw;
}

/* special screens */

#gray_screen {
	position: absolute;
	z-index: 2;
	opacity: 0.7;
	left: 0;
	right: 0;

	margin: 0;
	padding: 0;
	background-color: #444;
	height: 100%;
	width: 100%;
}

#dialog_screen {
	position: absolute;
	z-index: 5;
	left: 0;
	right: 0;

	height: auto;
	max-height: 80vh;
	min-width: 50vw;
	max-width: 80vw;

	margin: 2% auto auto;
	padding: 10px;
	border: 4px solid #555;
	border-radius: 10px;
	background-color: #fff;
	overflow-y: auto;
	overflow-x: auto;
}

/* for new 'dialog' use ... someday, will replace dialog_screen !!! */
::backdrop {
	background-color: #444;
	opacity: 0.7;
}


/* defaults / variations */

div {
	margin: 2px;
	padding: 2px;
}

div.container {
	padding: 0; /* zero-impact container (elements within space as if this container didn't contain them) */
	margin: 0;
}

span.invalid {
	color: red;
}


hr {
	height: 1px;
	border: 0;
	background-color: black;
	margin: 4px;
	margin-right: -12px;
	padding: 0;
}

hr.top {
	height: 2px;
	background-color: #6567a8;
}

hr.gray {
	background-color: #e8e8e8;
}

table {
	border-collapse: collapse; /* to avoid double-lines */
}

table, tr {
	border: none;
}

th, td {
	padding-left: 0.3em;
	padding-right: 0.3em;
	border-right: 1px solid #ddd;
}

th:last-child, td:last-child {
	border-right: none; /* interior lines only */
}

td.top {
	vertical-align: top;
}
td.right {
	text-align: right;
}
td.left {
	text-align: left;
}
th.top {
	vertical-align: top;
}
th.right {
	text-align: right;
}
th.left {
	text-align: left;
}

/* bordered content */

fieldset, .info, .warning, .error {
	border: 2px solid #888;
	border-radius: 7px;
}

.info, .warning, .error {
	padding: 8px;
}

.info {
	background-color: #8e8;
}
.warning {
	background-color: #0ee;
}
.error {
	background-color: #e88;
}

.bluish {
	background-color: #cacaf5;
}

.bumper {
	width: 8px;
}

/* dynamics */

.show {
	display: block;
}
.hide {
	display: none;
}

@keyframes pulse {
	0% {
		background-color: #ffffff;
	}
	10% {
		background-color: #c3ffba;
	}
	100% {
		background-color: #ffffff;
	}
}

.injection {
	animation: pulse 4s;
}

@keyframes fadeout {
	0% {
		opacity: 1;
		display: block;
	}
	100% {
		opacity: 0;
		display: none;
	}
}
@keyframes fadeout_delayed {
	0% {
		opacity: 1;
		display: block;
	}
	80% {
		opacity: 1;
		display: block;
	}
	100% {
		opacity: 0;
		display: none;
	}
}

.fadeout_short {
	animation: fadeout 5s;
}
.fadeout_mid {
	animation: fadeout_delayed 10s;
}
.fadeout_long {
	animation: fadeout_delayed 30s;
}

/* mix-ins */

.italic {
	font-style: italic;
}

.bold {
	font-weight: bold;
}

.full_width {
	width: 100%;
}

.gray {
	color: gray;
}


.pointered {
	cursor: pointer;
}

.center {
	margin: 0 auto; /* doesn't seem to work, usually; use center_flex container instead..? */
}

.red_bg {
	background-color: #a22;
}

.green_bg {
	background-color: #2a2;
}

.highlight {
	background-color: #fff780;
}

div.yellow_border {
	border: 2px;
	border-color: #ffff9a;
	border-style: solid;
}

.changeable {
	background-color: #babbeb;
}
.changeable :hover {
	background-color: #6567a8;
	cursor: pointer;
}

.center_flex {
	display: flex;
	flex-direction: column;
	align-items: center;
}


/* content edit area (invisible edit-box) */

[contenteditable="true"]:active, [contenteditable="true"]:focus
{
	border:none;
	outline:none;
}

/* ------------------------------------------------------------------------- */

.week_header {
	font-weight: bold;
}

.assignment_header {
	font-weight: bold;
}

/* ------------------------------------------------------------------------- */

.dialog {
	padding: 0;
}

.media_container {
	margin: 0;
	padding: 0;
}

button {
	min-width: 20px;
	min-height: 20px;
	margin: 1px 1px;
	padding: 2px 4px;
	font-size: 1em;
	border: 2px;
	border-radius: 5px;
	border-style: solid;
	color: white;
	background-color: #6567a8;
	cursor: pointer;
	box-shadow: none;
}
.green {
	background-color: #2ca12c;
}

button:hover {
	background-color: #999999;
}

.buttonbar {
	display: flex;
	flex-flow: row wrap; /* should wrap only when screen is too narrow */
}

.buttonbar button.selected {
	background-color: #18a266;
}

.buttonbar button.unselected {
	background-color: #6567a8;
}

.buttonbar .spacer {
	flex-grow: 1;
}

.buttonbar .indent { /* kludgey "indent" */
	width: 2em;
}


.i {
	 width: 16px; /* YES, must do this (width and height AND set the same info inline, below, in the background: line!) */
	 height: 16px;
	 display: block;
	 filter: invert(100%);
}
/* most from dripicons - https://icon-icons.com/users/PHEoYFqoi7DZt6BnC1SoR/icon-sets/ */
.i-stash {
    background: url(ico/stash.png) center center/16px 16px no-repeat; /* https://icon-icons.com/download/87541/PNG/32/ - https://icon-icons.com/icon/download-folder/87541 */
}
.i-reply {
    background: url(ico/reply.png) center center/16px 16px no-repeat; /* https://icon-icons.com/download/87524/PNG/32/ */
}
.i-pin {
    background: url(ico/pin.png) center center/16px 16px no-repeat; /* https://icon-icons.com/download/259178/PNG/32/ */
}
.i-trash {
	background: url(ico/trash.png) center center/16px 16px no-repeat; /* https://icon-icons.com/download/87481/PNG/32/ - https://icon-icons.com/icon/trash-container-side/87481 */
}
.i-one {
	background: url(ico/one.png) center center/16px 16px no-repeat; /* https://icon-icons.com/download/87493/PNG/32/ - https://icon-icons.com/icon/user/87493 */
}
.i-all {
	background: url(ico/group.png) center center/16px 16px no-repeat; /* https://icon-icons.com/icon/user-group/87485 */
}
.i-edit {
	background: url(ico/edit.png) center center/16px 16px no-repeat; /* https://icon-icons.com/download/87517/PNG/32/ - https://icon-icons.com/icon/edit-document-button/87517 */
}
.i-send {
	background: url(ico/send.png) center center/16px 16px no-repeat; /* https://icon-icons.com/download/87506/PNG/32/ - https://icon-icons.com/icon/mice-pointer/87506 */
}
.i-messages {
	background: url(ico/messages.png) center center/16px 16px no-repeat; /* https://icon-icons.com/download/87519/PNG/32/ - https://icon-icons.com/icon/conversation-bubbles/87519 */
}
.i-folder {
	background: url(ico/folder.png) center center/16px 16px no-repeat; /* https://icon-icons.com/download/87547/PNG/32/ - https://icon-icons.com/icon/computer-folder/87547 */
}
.i-attach {
	background: url(ico/attach.png) center center/16px 16px no-repeat; /*  */
}
.i-downvote {
	background: url(ico/downvote.png) center center/16px 16px no-repeat; /* https://icon-icons.com/download/87539/PNG/32/ - https://icon-icons.com/icon/thumb-down/87539 */
}
.i-upvote {
	background: url(ico/upvote.png) center center/16px 16px no-repeat; /* https://icon-icons.com/download/87486/PNG/32/ - https://icon-icons.com/icon/thumb-up/87486 */
}
.i-close {
	background: url(ico/close.png) center center/16px 16px no-repeat; /* https://icon-icons.com/download/105037/PNG/32/ - https://icon-icons.com/icon/close-cross-circular-interface-button/105037 */
}
.i-clear {
	background: url(ico/clear.png) center center/16px 16px no-repeat; /* https://icon-icons.com/download/180808/PNG/32/ - https://icon-icons.com/icon/edit-clear/180808 */
}
.i-thread {
	background: url(ico/thread.png) center center/16px 16px no-repeat; /* https://icon-icons.com/download/3121/PNG/32/ - https://icon-icons.com/icon/needle/3121 */
}
.i-download {
	background: url(ico/download.png) center center/16px 16px no-repeat; /* https://icon-icons.com/download/144412/PNG/32/ - https://icon-icons.com/icon/cloud-download/144412 */
}
.i-class {
	background: url(ico/class.png) center center/16px 16px no-repeat; /* https://icon-icons.com/download/266881/PNG/32/ - https://icon-icons.com/icon/presentation-coaching-education-class-teaching-blackboard/266881 */
}
.i-defer {
	background: url(ico/defer.png) center center/16px 16px no-repeat; /* https://icon-icons.com/icon/delay-circle-clock/259182 */
}
.i-ok {
	background: url(ico/ok3.png) center center/16px 16px no-repeat; /* https://icon-icons.com/icon/ok-hand-gestures/246119 */
}





/* ------------------------------------------------------------------------- */
/* TODO: FIX! */

.singleton_button { /* TODO: CONSOLIDATE! ALMOST SAME as .button_band button -- consolidate! */
	width: 2.3em;
	margin: 1px 2px;
	padding: 1px 5px;
	font-size: 1em;
	border: 2px;
	border-radius: 5px;
	border-style: solid;
	color: white;
	cursor: pointer;
	box-shadow: none;
}



/* ------------------------------------------------------------------------- */
/* NOTE: this section stolen from ohs... needs refactoring!


/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content */
.dropdown_content {
  position: absolute;
  background-color: #f1f1f1;
  min-width: 60px; /* ?!!! */
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown_content div {
  color: black;
  padding: 4px;
  text-decoration: none;
  display: block;
  cursor: pointer;
}

/* Change color of dropdown links on hover */
.dropdown_content div:hover {
	background-color: #ddd
}

/* ------------------------------------------------------------------------- */

@media print {
	.page_break_after {
		page-break-after: always;
	}
}

div.zero {
	padding: 0;
	margin: 0;
}