:root {
	--col-main-bold: #f4bf46;
	--col-main-partbg: black;
	--col-active-blue: #0b3d91;
	--col-active-red: #dd361c;
	--col-background: #ede7db; /*#8499a3;*/
}
body {
	font-family: monospace;
	background-color: var(--col-background);
	color: white;
}
h1 {
	color: #48104A;
	margin-top: 10px;
	margin-left: 20px;
}
#logout-button {
	position: absolute;
	top: 0;
	right: 0;
}
#page_logo {
	position: absolute;
	right: 8px;
	top: -5px;
	max-height: 90px;
	max-width: 25%;
}
#working_overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	background-color: green;
	z-index: 123;
	height: 100%;
	width: 100%;
}
#working_overlay div {
	position: absolute;
	top: 0; bottom: 0;
	left: 0; right:0;
	margin: auto;
	width: fit-content;
	height: fit-content;
}
#working_overlay p {
	color: white;
}

/* For Subpage animated logos...*/
#logo-container {
	width: fit-content;
	position: relative;
	margin: auto;
	border-radius: 100%;
}
#logo-container .placeholder {
	position: absolute;
	color: black;
	border-radius: 100%;
	height: 50px; width: 50px;
	background-color: white;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.breadcrumb {
	top: 0;
}
.breadcrumb a {
	color: inherit;
    text-decoration: inherit;
}
.header_logo {
	text-align: center;
	margin: 8px;
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.header_logo a {
	height: 100%;
}
.header_logo img {
	height: 100%;
	/*width: 100%;*/
}
.header_logo h1 {
	
}

/* Tool Tips*/
.tooltip .tooltiptext {
	visibility: hidden;
	width: 120px;
	font-size: 50%;
	background-color: #48104A;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;

	/* Position the tooltip */
	position: absolute;
	z-index: 1;
	top: 120%;
	left: 50%;
	margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
.tooltip .tooltiptext::after {
	content: " ";
	position: absolute;
	bottom: 100%;  /* At the top of the tooltip */
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent #48104A transparent;
}
.tooltip:hover .tooltiptext {
	visibility: visible;
}
@media screen and (max-width: 600px) {
	.tooltip .tooltiptext {display:none;}
	.tooltip .tooltiptext {color: red;}
}

/* SECTIONS */

.section_holder {
	position: relative;
	background-color: white;
	padding: 6px;
	border-radius: 6px;
	margin: 4px auto;
}
/*
.section_holder.passive .heading_switch:hover, 
.section_holder.active .heading_switch:hover {
	background-color: #fbfbfb00;
}
*/
.section_holder.passive {background-color: lightsteelblue;}
.section_holder.active {background-color: darkseagreen;}

.section_holder .button_switch {
	position: absolute;
	display: flex;
    justify-content: center;
    align-items: center;
	right: 6px; top: 6px;
	padding: 2px;
	background-color: grey;
	cursor: pointer;
	border-radius: 4px;
	font-size: 180%;
    width: 28px;
    height: 26px;
    text-align: center;
	user-select: none;
}
.section_holder .button_switch:hover {color: lightblue;}

.heading_switch {cursor: pointer; border-radius: 4px; user-select: none; position: relative;}
/*.heading_switch:hover {color: #48104A; background-color: #fbfbfb;}*/
.heading_switch:hover {color: #48104A;}
.heading_switch:hover + .button_switch {color: lightblue;}
.heading_switch .info {font-size: 40%;display:none;}
@media screen and (max-width: 600px) {
	.heading_switch .info {display:block;}
}
/*
@media screen and (max-width: 992px) {
	.heading_switch .info:before {
		content: '\A';
		white-space: pre;
	}
}
*/

/* For the auto-generated details*/
.section_holder.webapp-detail {
	background-color: transparent;
}
.webapp-detail .heading_switch {text-align: center;}
.webapp-detail .heading_switch:hover {/*color: #48104A;*/ background-color: transparent;}
.webapp-detail .section_content {
	background-color: white;
	padding: 16px;
	border-radius: 12px;
}

.section_content {display: none;}
.section_content .about {
	color: black;
    padding: 0 24px;
}
.section_main {
	border-radius: 6px;
	margin: 6px;
	padding: 1px 8px 8px;
	background-color: #E0E8E8;
}
.section_main > p {
	color: darkslateblue;
	margin-left: 6px;
}
.section_main h2 {
	color: darkslateblue;
}
.notes-section {
	color: #67446B;
}
.input_flow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.input_flow .i_sect {
	margin: 4px;
	width: 250px;
	min-height: 82px;
	text-align: center;
	padding: 2px;
	border-radius: 6px;
	background-color: #67446B;
}
.input_flow .i_sect input {
	width: 98%;
	margin: 2% auto;
	font-size: 112%;
}
.input_flow .i_sect input[type=number] {
	text-align: right;
}
.input_flow .i_sect p {
	text-align: center;
	font-weight: bold;
}
.input_flow .i_sect a {
	color: white;
}

@media screen and (max-width: 600px) {
	.input_flow {justify-content: center;}
}

.as_button_holder {
	background-color: white;
	margin: 4px auto;
	padding: 20px;
	border-radius: 12px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.as_button_holder > form {
	margin: 0;
}
.as_button {
	cursor: pointer;
	position: relative;
	text-align: center;
	margin: 4px;
	width: 180px;
	height: 80px;
	border-radius: 12px;
	overflow: hidden;
	background-color: var(--col-main-bold); /*lightblue;*/
	border: 2px solid darkgray;
	/* to centre text */
	display: flex;
	flex-wrap: wrap;
	align-content: center;
    justify-content: center;
    align-items: center;
}
.as_button > p {
	pointer-events: none;
	font-size: 140%;
	margin: 2px;
}

.as_button:hover {
	border-color: black;
}
.as_button input {
	z-index: 80085;
}
/*Department button themes*/
.loading-text {color: #E0E8E8;font-style: italic;}
.as_button.login {background-color: var(--col-main-bold);}
/*.as_button.signavision {background-color: #C89518;color: #ededed;}*/
.as_button.signasync {background-color: #47B866; color: white;}
.as_button.administration {background-color: #596273; color: white;}
/* Button hover changes...*/
.as_button.infotech:hover, .as_button.infotech-itsupport:hover,
.as_button.infotech-networkadmin:hover, .as_button.infotech-automation:hover
{border-color: teal;}
.as_button.skeleton:hover {border-color: #e82121; color: #e82121;}

.as_button_title {
	color: black;
	width: 100%;
}
.as_button_title h2 {
	margin: 0;
}

.click_span {
	position: absolute;
	top: 0; bottom: 0;
	left: 0; right: 0;
}
.button_main {
	cursor: pointer;
	width: 120px;
	background-color: #A20B35;
	border-radius: 12px;
	color: white;
	height: 50px;
	font-weight: 700;
	margin: auto 4px;
}
.button_main.add {
	background-color: green;
}
.button_main:hover {background-color: red;}
.button_main.add:hover {background-color: darkgreen;}
.button_second {
	cursor: pointer;
	color: orange;
}

.button_main.non_standard {
	background-color: cadetblue;
}

.generating_overlay {
	display: none;
	position: absolute;
	text-align: center;
	top:0; bottom: 0;
	left: 0; right: 0;
	background-color: black;
	color: #67446B;
	align-content: center;
	justify-content: center;
	align-items: center;
}
.generating_overlay p {
	font-size: 120%;
}
#overlay_text {
	position: relative;
}
.inp_first_disp {
	color: white;
	cursor: pointer;
	font-size: 112%;
}
.inp_first_disp.modified {
	color: yellow;
}
.bignum {
	font-size: 142%;
}
.bottom_button_section {
	display: inline-flex;
}
.big_text_entry {
	width: 512px;
	padding: 2px;
	border-radius: 6px;
	background-color: #67446B;
	margin: 4px;
	text-align: center;
}
.big_text_entry textarea {
	width: 90%;
	min-height:100px;
	margin-bottom: 6px;
}

/* Scheduled Enteries */
.scheduled_entry {
	display: flex;
	color: navy;
	background-color: white;
	border-radius: 6px;
	margin: 6px;
	padding: 6px;
}
.scheduled_entry button {
	cursor: pointer;
}
.scheduled_entry div {
	margin-left: 6px;
}
.scheduled_entry p {
	margin-left: 12px;
}
.scheduled_entry .val_old {color:orange;}
.scheduled_entry .val_new {color:green;}

/* Toast Popup */

#toaster {
	pointer-events: none;
	position: fixed;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	bottom: 0;
	left: 0;
	right: 0;
	min-height: 80px;
	justify-content: center;
	z-index: 99999;
	align-items: center;
}
.toast {
	padding: 16px;
    background-color: #333;
    min-width: 50px;
    margin: 12px;
    text-align: center;
    color: #fff;
    border-radius: 8px;
    opacity: 0;
	transform: translateY(150%);
    transition: 0.3s ease-in-out;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    height: fit-content;
}

.toast.standard {
  background-color: #333;
}
.toast.bad {
  background-color: red;
  color: white;
}
.toast.good {
  background-color: green;
  color: white;
}
.toast.show {
  opacity: 1;
  transform: translateY(0%);
}