/* DEGUGGING AND DEVELOPER NOTICES */
.TBD {
	background-color: #fefede;
	border: 1px solid #faa;
}
.REMOVE, .HIGHLIGHT {
	background-color: #faa;
}
.DELETE {
	display:none!important;
}
.debug_id {
	color: #aaa;
}

.debugmessage {
	/* display: inline-block; */
	display: block;
	border-bottom: 1px solid #900;
	background-color: #fffcfc;
	z-index: 2000;
	/* display: none; */
}
.debug {
	color: #ff0000;
}

.hidden {
	display: none!important;;
}

.spacer {
	/* margin: 5px 0px 5px 0px; */
	color: var(--standard-text-color);
}

/* _________________ JQUERY_UI SORTABLE _________________ */

.ui-draggable, .ui-droppable {
	background-position: top;
} 
#sortable { 
	list-style-type: none; 
	margin: 0; 
	padding: 0; 
	/* width: 60%; */

}
/* #sortable li { margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
height: 1.5em;
cursor: pointer;} */
#sortable li { margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
}
#sub_1 li { margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
}
/* html>body 
#sortable 
li { height: 1.5em;
	line-height: 1.2em;
	cursor: pointer;
} */
html>body #sortable li { 
	line-height: 1.2em;
}
html>body #sub_1 li { 
	line-height: 1.2em;
}
.ui-state-highlight { 
	height: 1.5em;
	line-height: 1.2em;
}



/* _________________ STATUS _________________ */
#page_status_wrapper {
	vertical-align: middle;
	/* margin: auto; */
	/* text-align: center; */
	
}
#page_status {
	display: block;
	min-width: 275px;
	min-height: 25px;
	margin-top: auto;
	margin-bottom: auto;
	/* text-align: center; */
	/* vertical-align: middle; */
	/* border: 1px solid #777; */
	border: 1px solid var(--standard-border-color);
	padding: 3px 7px;
	
}

.status_ready, .status_okay, .status_complete {
	color: var(--color-ready);
}
.status_error {
	color: var(--color-error);
}
.status_warning, .status_loading, .status_not_saved {
	color: var(--color-warning);
}
.status_box_ready, .status_box_okay, .status_box_complete {
	width: fit-content;
	padding: 0px 5px 0px 5px;
	color: var(--color-ready);
	border: 1px solid var(--color-ready);
}
.status_box_error {
	width: fit-content;
	padding: 0px 5px 0px 5px;
	color: var(--color-error);
	border: 1px solid var(--color-error);
}
.status_box_warning, .status_box_loading, .status_box_saving, .status_box_not_saved, .status_box_in_progress {
	width: fit-content;
	padding: 0px 5px 0px 5px;
	color: var(--color-warning);
	border: 1px solid var(--color-warning);
}
.status_gallery_loading {
	color: var(--color-warning);
}
.status_gallery_ready {
	/* display: none; */
	color: var(--color-ready);
}


/* _________________ SITEWIDE _________________ */
body {
	min-height: 100vh;
	min-height: -webkit-fill-available;
	max-height: 100vh;
	max-height: -webkit-fill-available;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	color: var(--standard-text-color);
	font-family: var(--default_font-family);

}

#pagewrapper {
	/* background-color: #faa; */
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	height: 100vh;
	min-height: 100vh;
	max-height: 100vh;
	width: 100%;
	/* border: 1px solid #f00; */
}

a {
	color: var(--standard-link-color);
	text-decoration: none;
}
a:hover, .link:hover {
	color: var(--color-darker);
}
a.no_hover, a.no_hover:hover {
	color: var(--standard-text-color)!important;
	cursor: normal!important;
	cursor: default!important;
	background-color: var(--page-background-color)!important;
}
.link {
	width: fit-content;
	cursor: pointer;
	color: var(--standard-link-color);
}
.pointer {
	cursor: pointer;
}
.link_selected, .link_selected:hover {
	color: var(--color-link_selected)!important;
	/* border: var(--standard-border); */
	border: 1px solid var(--standard-border-color);
}

input {
	appearance: auto;
}
.inline {
	display: inline-block;
}
.center {
	text-align: center;
}
.float_left {
	float: left;
}
.float_right {
	float: right;
}
.align_left {
	text-align: left;
}

.small_print, .smallprint {
	font-size: 0.8rem !important;
	font-style: italic !important;
	
}


/* SPECIFIC CLASSES AND ELEMENTS */

header {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: #000;
	height: var(--header-height);
	min-height: var(--header-height);
	max-height: var(--header-height);
	margin-bottom: var(--header-padding-bottom);
}

#header_bar {
	display: flex;
	flex-wrap: nowrap;
	flex-flow: row;
	flex-direction: row;
	justify-content: space-between;
	
	/* position: relative; */
	
	height: var(--header-height);
	/* padding: 0px;
	margin: 0px; */
	
	margin-bottom: auto;
	vertical-align: bottom;
	
}

#logo_wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	/* flex-flow: row; */
	/* position: relative; */
	bottom: 0;
	vertical-align: bottom;
}
.page_logo {
	display: block;
	position: relative;
	/* vertical-align: baseline; */
	/* bottom: 0px; */
	max-height: 90px;
	max-width: 170px;
	padding: 10px 60px 5px 40px;
	
}
#page_title_wrapper {
	display: flex;
	flex-grow: 1;
	flex-direction: row;
	flex-wrap: nowrap;
	/* flex-flow: row; */
	/* position: relative; */
	
	justify-content: center;
	
	height: 100%;
	
	vertical-align: bottom;
}
#page_title {
	/* display: flex;
	flex-direction:column;
	position: relative;
	bottom: 0px;
	vertical-align: bottom;
	
	padding: 0px 40px 0px 0px; */
	/* border: 1px solid #f00; */
	
	color: #fff;
	font-size: 1.5em;
	font-weight: var(--bold-weight);
	display: flex;
	vertical-align: bottom;
	padding: 10px;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: left;
	justify-content: flex-end;
	align-items: center;
}
.top_space {
	display: flex;
	flex-grow: 1;
	flex-direction:column;
	flex-wrap: nowrap;
	
}

#user_initials_wrapper {
	display: flex;
	flex-grow: 0;
	flex-direction: column;
	flex-wrap: nowrap;
	/* flex-flow: row; */
	/* position: relative; */
	
	height: 100%;
	
	vertical-align: bottom;
	
}
#user_initials {
	color: #fff;
	font-size: 1.5em;
	font-weight: var(--bold-weight);
	display: flex;
	/* vertical-align: bottom; */
	padding: 10px;
	border: 1px solid #fff;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: left;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 50px;
	height: 50px;
	
	margin: 15px;
	
}


main {
	display: block;
	position: fixed;
	top: calc(var(--header-height) + var(--header-padding-bottom));
	height: var(--main-height);
	min-height: var(--main-height);
	max-height: var(--main-height);
	/* margin: 0px var(--main-margin-x); */
	margin: 0;
	/* background-color: #ff0; */
	/* border: 1px solid #f00; */
	/* vertical-align: top; */
	
}

#workarea {
	/* background-color: #00f; */
	display: inline-block;
	height: var(--main-height);
	max-height: var(--main-height);
	min-height: var(--main-height);
	overflow: auto;
	vertical-align: top;
	/* width: 1270px; */
	width: 100VW;
}

#inner_workarea {
	display: inline-block;
	padding: 20px 10px;
	
}

footer {
	display: block;
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	height: var(--footer-height);
	min-height: var(--footer-height);
	max-height: var(--footer-height);
	margin-top: var(--footer-padding-top);
	/* border-top: var(--standard-border); */
	background-color: #000;
	color: #fff;
	padding: 0px var(--main-padding-x);
	/* border: 1px solid #f00; */
	
}

#footer_wrapper {
	/* margin: 5px var(--main-margin-x); */
	margin: 15px 0px;
}




/* _____________________ MAIN PAGE FIELDSETS _____________________ */
fieldset {
	vertical-align: top;
	/* border: 1px solid #777; */
	border: 1px solid var(--standard-border-color);
}
legend {
	border: 1px solid #777;
	padding: 5px 10px;
	font-size: 1.1rem;
	font-weight: var(--bold-weight);
}
fieldset, legend {
	background-color: var(--fieldset-bg-color)
}
.fs_page_section {
	display: inline-block;
	position: fixed;
	/* background-color: #f0f; */
	margin-top: -20px
}
.fs_page_data {
	display: inline-block;
	position: fixed;
	width: 60%;
	height: calc(100% - 210px);
	overflow: auto;
	
}
#fs_options {
	display: inline-block;
	/* width: 350px; */
	width: 25%;
	height: calc(100% - 40px);
}
#fs_categories {
	display: inline-block;
	/* width: 350px; */
	width: 25%;
	max-width: 25%;
	height: calc(100% - 40px);
}
.fs_form_section {
	padding: 5px 10px;
	margin: 5px 0px 15px 0px;
	
}

.fs_borderless_invisible {
	padding: 0;
	border: none;
	background-color: var(--page-bg-color);
}

/* #fs_courses, #fs_syllabi {
	
} */

.btn_save_complete {
	border: 2px solid var(--color-ready);
}

.btn_save_data_changed {
	border: 2px solid var(--color-warning);
}

.option_button {
	border: 1px solid #333;
	background-color: var(--brand-color-1);
	color: var(--brand-color-4);
	border-radius: 25px;
	padding: 5px 10px;
	margin: 5px 0px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
}
.option_button:hover {
	background-color: var(--brand-color-2);
}

.option_button_small {
	width: 100px;
}
.option_button_medium {
	color: var(--brand-color-1);
	border: 1px solid var(--brand-color-1);
	background-color: #fafafa;
	width: 200px;
	/* font-weight: bold; */
	
}
.option_button_copy {
	display: inline-block;
	color: var(--standard-text-color);
	border: 1px solid var(--standard-border-color);
	padding: 3px 10px;
	vertical-align: middle;
	border-radius: 7px;
	cursor: pointer;
	background-color: #fafafa;
	/* font-weight: bold; */
	margin-top: auto;
	margin-bottom: auto;
	font-size: 0.8em;
	font-style: italic;
	
	
}
.option_button_print_syllabus {
	color: var(--brand-color-1);
	border: 1px solid var(--brand-color-1);
	background-color: #fafafa;
	width: 140px;
	vertical-align: middle;
	margin-left: 10px;
	/* font-weight: bold; */
}
.option_button_large {
	width: 300px;
}
.option_fs_button {
	/* border: 1px solid #333; */
	border: 1px solid var(--standard-border-color);
	background-color: var(--brand-color-1);
	color: var(--brand-color-4);
	font-weight: normal;
}
.text_input {
	width: 85%;
	max-width: 400px;
}
select.text_input {
	width: 85%;
	max-width: 410px;
}
.text_input_h1 {
	font-size: 1.4em;
	font-weight: bold;
	color: var(--brand-color-1);
}
.icon_small {
	max-height: 20px;
	vertical-align: middle;
	padding: 5px; 
}
.icon_med {
	max-height: 50px;
	vertical-align: middle;
	padding: 5px; 
}
.icon_wrapper  {
	vertical-align: top;
}
.form_heading, form_heading_1 {
	font-weight: var(--bold-weight);
}
.form_heading_2 {
	font-size: 1.0rem;
	font-weight: bold;
	/* font-style: italic; */
	color: var(--heading-color-alt);
}

.display_id {
	font-size: 0.8rem;
	font-weight: normal;;
}

.popup {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 100;
}

.section_heading {
	font-weight: bold;
	font-size: 1.2rem;
	
}

#txt_global_item_text {
	/* background-color: #0ff; */
	min-width: 400px;
	width: calc(100% - 40px); 
	padding: 5px 20px;
}

.input_cke {
	display: block;
	position: relative;
	min-height: 100px;
	max-height: 100px;
	max-width: 85%;
	/* border: 1px solid #c0c0c0; */
	border: 1px solid var(--standard-border-color);
	background-color: #fff;
	padding: 3px 7px;
	font-size: 0.9rem;
	overflow: auto;
	cursor: pointer;
}

#ckeditor_wrapper {
	display: block;
	position: absolute;
	/* top: 10px; */
	/* left: 120px; */
	width: fit-content;
	max-width: calc(100% - 300px);
	height: fit-content;
	max-height: calc(100% - 70px);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	overflow: auto;
	/* border: 1px solid #c0c0c0; */
	border: 1px solid var(--standard-border-color);
	
	background-color: #fff;
	
}

#cke_button_wrapper {
	display: block;
	position: relative;
	width: fit-content;
	/* min-width: 775px; */
	/* margin-left: auto;
	margin-right: auto; */
	padding: 15px 30px;
	
}

#cke_popup_heading {
	text-align: center;
	/* font-weight: bold; */
	font-size: 1.2rem;
	padding-top: 10px;
}


#clean_db {
	padding-left: 15px;
}

.syllabus_list_item_wrapper {
	padding: 5px 0px;
}
.item_list_name {
	/* font-weight: bold; */
	padding-top: 3px;
	padding-left: 7px;
}

.password_message {
	font-size: 0.8rem;
	font-style: italic;
	color: var(--brand-color-1);
}

.data_source_message {
	font-size: 0.8rem;
	/* font-weight: bold; */
	font-style: italic;
	padding-left: 7px;
}

.data_source_message_custom {
	color: var(--color-warning-dark);
}

.list_link {
	font-size: 0.9rem;
	padding-left: 5px;
}

/* UI QUERY DRAG AND SORT */
.sortable-placeholder {
	background-color: var(--brand-color-7);
	/* border 1px solid #c0c0c0; */
	border: 1px solid var(--standard-border-color);
}
.highlight {
	background-color: #ff0;
}


.general_item_name {
	/* padding: 2px 5px 2px 0px; */
	/* border: 1px solid #c0c0c0; */
	border: 1px solid var(--standard-border-color);
	padding: 1px 5px;
	margin-left: 5px;
	/* width: calc(100% - 60px); */
	background-color: #fff;
	overflow: hidden;
	
}

.move_icon {
	/* padding: 2px 5px 2px 0px; */
	vertical-align: top;
	cursor: move;	
}


.rad_source_wrapper {
	/* padding: 10px; */
	/* margin: 5px 5px 5px 0px; */
	display: block;
	position: relative;
	/* margin: 0px; */
	margin-top: auto;
	margin-bottom: auto;
	padding: 5px 0px;
	font-size: 0.8em;
	font-style: italic;
	/* vertical-align: middle; */
}

.rad_source_label {
	display: inline-block;
	position: relative;
	color: var(--standard-text-color);
	background-color: #fafafa;
	border: 1px solid var(--standard-border-color);
	padding: 3px 10px;
	vertical-align: middle;
	border-radius: 7px;
	cursor: pointer;
}
.rad_source {
	appearance: none;
	display: inline-block;
	position: relative;
	width: 1em;
	height: 1em;
	vertical-align: middle;
	border: 1px solid var(--standard-border-color);
	border-radius: 7px;
	top: -3px;
}
.rad_source:checked {
	background-color: var(--brand-color-1);
	/* border: 1px solid var(--brand-color-1); */
}


.no_edit {
	display: block;
	position: relative;
	min-height: 100px;
	max-height: 100px;
	max-width: 85%;
	background-color: #f1f1f1;
	border: 1px solid var(--standard-border-color);
	padding: 3px 7px;
	overflow: auto;
	
}

.syllabus_list_item_left {
	vertical-align: middle;
	padding-left: 7px;
	width: 50%;
}
.syllabus_list_item_right {
	vertical-align: middle;
}

#name_display {
	/* color: var(--brand-color-1); */
	font-size: bold;
}

/*  LISTS and User Table */
.row_odd {
	background-color: #fafafa;
}
.row_even {
	background-color: #f1f1f1;
}

#list_users {
	border: 1px solid var(--standard-border-color);
}
.col_user {
	border 0;
	border-collapse: collapse;
}
.col_head {
	font-weight: bold;
	/* font-size: 1.1em; */
	border: 1px solid #ddd;
	border-collapse: collapse;
}
.col_id {
	width: 75px;
}
.col_first_name {
	width: 150px;
}
.col_last_name {
	width: 150px;
}
.col_email {
	width: 350px;
}


.form_input_status {
	display: inline;
	font-size: 0.8em;
}
.form_input_status_changed {
	color: #930;
	cursor: pointer;
}
.form_input_status_saved {
	color: #090;
}