body {
	margin: 0px;
	font-family: arial;
	background-image: url("/content/insco.pe/graph_paper.jpg");
  	background-repeat: repeat;
}

h1, h2, h3, h4, h5 {
	margin-top: 0px;
	margin-bottom: 0px;
}

.in_maintenance_logo {
	width: 250px;
	margin-top: 100px;
}

.login_form {
	padding-right: 30px;
}

#login_form_div {
	width: 300px;
	margin: 0 auto;
}

#response_div {
	z-index: 9999999;
	padding: 3px;
	position: absolute;
	text-align: center;
	bottom: 20px;
	left: -webkit-calc(50%);
	left: -moz-calc(50%);
	left: calc(50%);
	background-color: var(--element-border-colour);
	color: var(--secondary-text-colour);
	font-size: 12px;
	border-radius: 5px;
	overflow: hidden;
	border: 1px solid var(--element-border-colour);
	transform: translateX(-50%);
	display: none;
	opacity: 0;
	filter: alpha(opacity="0");
}

.circular_form {
	border: solid 1px var(--primary-colour);
	border-radius: 50%;
	height: 365px;
	width: 400px;
	padding-top: 35px;
	background-color: var(--primary-colour);
	background-image: url('/content/insco.pe/insco.pe_target_white_faded.png');
	background-size: contain;
}

.circular_header_logo {
	width: 250px;
	margin-top: 25px;
}

#login_submit_button {
	background-color: var(--secondary-colour);
	border: solid 1px var(--element-border-colour);
	border-radius: 5px;
}

#forgot_password_submit_button {
	background-color: var(--secondary-colour);
	border: solid 1px var(--element-border-colour);
	border-radius: 5px;
}

#reset_password_submit_button {
	background-color: var(--secondary-colour);
	border: solid 1px var(--element-border-colour);
	border-radius: 5px;
}

#signup_submit_button {
	background-color: var(--secondary-colour);
	border: solid 1px var(--element-border-colour);
	border-radius: 5px;
}

#confirm_submit_button {
	background-color: var(--secondary-colour);
	border: solid 1px var(--element-border-colour);
	border-radius: 5px;
}

#upgrade_submit_button {
	background-color: var(--secondary-colour);
	border: solid 1px var(--element-border-colour);
	border-radius: 5px;
}

#resend_confirmation_button {
	background-color: var(--secondary-colour);
	border: solid 1px var(--element-border-colour);
	border-radius: 5px;
}

#add_application_submit_button {
	background-color: var(--secondary-colour);
	border: solid 1px var(--element-border-colour);
	border-radius: 5px;
}

#header_div {
	position: absolute;
	left: 10;
	top: 10;
	z-index: 999999;
}

#header_logo {
	cursor: pointer;
	width: 170px;
}

#header_logo_text {
	margin-top: -10px;
	font-size: 20px;
	display: inline-block;
}

#top_right_controls_div {
	position: absolute;
	top: 10;
	right: 10;
	z-index: 999999;
}

#footer_div {
	margin: 0px;
	background-color: var(--primary-colour);
	height: 25px;
	width: auto;
	position: fixed;
	bottom: 0;
	right: 0;
	border-top-left-radius: 10px;
	z-index: 999999;
}

.inverted_text {
	color: var(--secondary-text-colour);
}

.secondary_text {
	color: var(--secondary-colour);
}

#logged_in_username {
	float: left;
	vertical-align: center;
	font-size: 16px;
	font-weight: bold;
	text-align: top;
	margin-right: 15px;
	margin-top: 4px;
}

.speech_bubble {
	border: solid 4px var(--main-text-colour);
	border-radius: 10px;
	padding: 10px;
	max-width: 160px;
	background-color: var(--main-bg-colour);
	margin-left: 15px;
	color: var(--main-text-colour);
}

#orientation_warning {
    display: none;
    position: absolute;
    padding: 50px;
	margin-left: 25%;
    width: calc(50% - 25px);
    border: solid 1px black;
    border-radius: 5px;
    top: 10%;
    justify-content: center;
    z-index: 9999999;
    background-color: rgba(255,255,255,0.95);
    text-align: center;
    font-weight: bold;
    font-size: 22px;
}

#dashboard_div {
	display: none;
}

#initial_dashboard_div_content {
	width: 402px;
	height: 402px;
	background-image: url('/content/insco.pe/insco.pe_target_large_faded.png');
	background-size: contain;
}

#dashboard_div_content {
	width: auto;
	height: 452px;
}

#upper_scroll_indicator {
	color: var(--primary-colour);
	pointer-events: none;
	position: absolute;
	top: -20;
	left: 200;
}

#lower_scroll_indicator {
	color: var(--primary-colour);
	pointer-events: none;
	position: absolute;
	bottom: -40;
	left: 200;
}

.dashboard_panel_fixed {
	display: inline-block;
	height: 380px;
	width: 400px;
	margin: 10px;
	overflow: hidden;
	pointer-events: none;
}

.dashboard_panel {
	display: inline-block;
	vertical-align: top;
	max-height: 380px;
	width: 400px;
	margin: 10px;
}

.category_indicator {
	min-width: 15px;
	min-height: 15px;
	border: solid 1px black;
	border-radius: 5px;
	float: right;
	margin-top: -2px;
	margin-right: 3px;
	padding-top: 2px;
	padding-right: 2px;
	padding-left: 2px;
	background-color: var(--primary-colour);
	color: white;
}

.scrollable {
	overflow-y: scroll !important;
}

.choose_project_node {
	position: relative;
	border-radius: 10px;
	padding: 5px;
	margin-bottom: 5px;
	background-color: var(--semi-opaque-primary);
}

.choose_project_node:hover {
	background-color: var(--primary-colour);
	cursor: pointer;
	color: var(--secondary-text-colour);
}

.pinned {
	background-color: var(--semi-opaque-primary-2);
}

#logged_in_div {
	display: none;
}

#logged_out_div {
	display: none;
	position: relative;
	height: 100%;
}

#logged_out_div_content {
	width: 402px;
	height: 402px;
}

#logged_out_language_div {
	position: absolute;
	top: 10;
	right: 10;
}

#version_div {
	position: absolute;
	top: 32;
	left: 182;
	font-size: 10px;
	color: var(--primary-colour);
}

.centred_panel {
	width: 50%;
	height: 50%;
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	text-align: center;
}

.insco_button {
	border: solid 1px var(--nav-bg-colour);
    border-radius: 5px;
    cursor: pointer;
}

.insco_button:disabled,
.insco_button[disabled]{
	text-decoration: none;
	cursor: default;
	border: solid 1px lightgray !important;
	background-color: lightgray !important;
}

.primary {
	color: var(--primary-colour);
}

.grey_tick {
	color: var(--greyed-out-tick);
}

.primary_button {
	background-color: var(--primary-colour);
	color: var(--secondary-text-colour);
}

.secondary_button {
	background-color: var(--secondary-colour);
	color: var(--main-text-colour);
}

.warning_button {
	background-color: var(--warning-colour);
	color: var(--secondary-text-colour);
	border: solid 1px var(--warning-colour);
}

#login_button {
	background-color: var(--primary-colour);
	color: var(--secondary-text-colour);
}

#logout_button {
	background-color: var(--primary-colour);
	color: var(--secondary-text-colour);
}

.validation_div {
	display: none;
	padding: 5px;
	padding-left: 8px;
	margin-top: 3px;
	border-radius: 5px;
	font-weight: bold;
	background-color: var(--primary-colour);
	color: var(--secondary-text-colour);
}

.viewer_div {
	border: solid 1px black;
	border-radius: 5px;
	display: inline-block;
	padding: 3px;
	background-color: var(--viewer-div-colour);
	cursor: pointer;
}

.delete_viewer {
	margin-top: -6px !important;
	margin-bottom: -7px !important;
	margin-right: 0px !important;
	margin-left: 4px;
}

.button:hover,
.button:focus {
	text-decoration: none;
	cursor: pointer;
	background-color: var(--secondary-text-colour) !important;
}

.button:disabled,
.button[disabled]{
	text-decoration: none;
	cursor: default;
	background-color: lightgray !important;
}

.nav_button {
	border-radius: 5px;
	width: auto;
	height: auto;
	padding: 2px;
}

.nav_button_no_focus {
	border-radius: 5px;
	width: auto;
	height: auto;
	padding: 2px;
}

.nav_button:hover,
.nav_button:focus {
	text-decoration: none;
	cursor: pointer;
	background-color: var(--secondary-text-colour);
}

.nav_button_no_focus:hover,
.nav_button_no_focus:focus {
	text-decoration: none;
	cursor: pointer;
}

.nav_button:disabled,
.nav_button[disabled]{
	text-decoration: none;
	cursor: default;
	background-color: lightgray;
}

.nav_button_no_focus:disabled,
.nav_button_no_focus[disabled]{
	text-decoration: none;
	cursor: default;
	background-color: lightgray;
}

.text_nav_button {
	padding-top: 0px;
	padding-left: 5px;
	padding-right: 5px;
	min-width: 24px;
	height: 20px;
}

.text_nav_button:hover,
.text_nav_button:focus {
	text-decoration: none;
	cursor: pointer;
	background-color: var(--secondary-text-colour) !important;
}

.text_nav_button:disabled,
.text_nav_button[disabled]{
	text-decoration: none;
	cursor: default;
	background-color: lightgray !important;
}

.button_icon {
	height: 14px;
	width: 14px;
}

.text_with_thick_outline {
	text-shadow: 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000, -2px 0 0 #000;
}

.text_with_outline {
	text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}

.link {
	text-decoration: none;
	color: var(--secondary-text-colour);
	font-size: 12px;
}

.primary_coloured_link {
	color: var(--primary-colour) !important;
}

.coloured_link {
	color: var(--secondary-colour) !important;
}

.modal {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(255,255,255,0.85);
	z-index: 9999990;
}

.modal-content {
	background-color: rgba(255,255,255,0.85);
	color: var(--main-text-colour);
	margin: 17% auto;
	padding: 10px;
	border: 1px solid var(--primary-colour);
	width: 400px;
	border-radius: 10px;
	font-size: 14px;
	z-index: 9999999;
}

.tall-modal-content {
	background-color: rgba(255,255,255,0.85);
	color: var(--main-text-colour);
	margin: 5% auto;
	padding: 10px;
	padding-bottom: 0px;
	border: 1px solid var(--primary-colour);
	width: 800px;
	max-height: 500px;
	border-radius: 10px;
	font-size: 14px;
	z-index: 9999999;
}

.inverted_colours {
	color: var(--secondary-text-colour) !important;
	background-color: var(--primary-colour) !important;
}

.close {
	color: var(--secondary-colour);
	float: right;
	margin-top: -8px;
	margin-right: -2px;
	font-size: 28px;
	font-weight: bold;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.close:hover,
.close:focus {
	color: var(--primary-colour);
	text-decoration: none;
	cursor: pointer;
}

.absolute_close {
	display: none;
	position: absolute;
	color: var(--secondary-colour);
	top: 43;
	right: 13;
	font-size: 28px;
	font-weight: bold;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.delete_project {
	margin-top: -6px;
	margin-bottom: -7px;
	margin-right: 0px;
}

.modal_text_input {
	width: 100%;
}

.modal_text_area {
	width: 100%;
}

.modal_table {
	width: 100%;
}

.modal_form {
	padding: 0px;
	margin: 0px;
}

#main_view_div {
	height: 100%;
	width: 100%;
	position: relative;
	z-index: 9999;
}

#main_view_sub_div {
	position: absolute;
	height: 100%;
	width: 100%;
	float: left;
	z-index: 999;
}

#main_view_overlay {
	position: absolute;
	height: 100%;
	width: 100%;
	float: left;
	z-index: 99999;
	pointer-events: none;
}

#selection_box {
	color: var(--primary-colour);
	background-color: var(--semi-opaque-primary);
	display: none;
}

#total_progress_div {
	height: auto;
	width: auto;
	position: absolute;
	top: 34;
	right: 10;
}

#burger_menu {
	position: absolute;
	padding: 0px;
	display: none;
	border-radius: 5px;
	border: solid 2px var(--primary-colour);
	background-color: var(--modal-bg-colour);
	z-index: 999999;
}

.burger_menu_item {
	cursor: pointer;
	padding: 10px;
}

.burger_menu_item:hover {
	background-color: var(--semi-opaque-primary);
	cursor: pointer;
	color: var(--primary-colour);
}

.invalid_burger_menu_item {
	background-color: var(--greyed-out-background);
	color: var(--greyed-out-text);
	pointer-events: none;
}

#top_banners {
	position: absolute;
	top: 70;
	width: 100%;
	justify-content: center;
	z-index: 99999;
	display: flex;
}

#bottom_banners {
	position: absolute;
	bottom: 50;
	width: 100%;
	justify-content: center;
	z-index: 99999;
	display: flex;
}

#project_controls {
	position: absolute;
	padding: 0px;
	display: none;
	width: 100%;
	top: 10;
	justify-content: center;
	z-index: 9999;
}

#project_controls_inner_div {
	padding: 5px;
	border-radius: 5px;
	border: solid 2px var(--primary-colour);
	background-color: var(--modal-bg-colour);
}

#project_name_div {
	position: absolute;
	top: 50;
	left: 15;
	max-width: 180px;
}

#right_click_menu {
	position: absolute;
	padding: 0px;
	display: none;
	border-radius: 5px;
	border: solid 2px var(--primary-colour);
	background-color: var(--modal-bg-colour);
	min-width: 170px;
	z-index: 999999;
}

.right_click_menu_item {
	cursor: pointer;
	padding: 10px;
}

.right_click_menu_item:hover {
	background-color: var(--semi-opaque-primary);
	cursor: pointer;
	color: var(--primary-colour);
}

.invalid_right_click_menu_item {
	background-color: var(--greyed-out-background);
	color: var(--greyed-out-text);
	pointer-events: none;
}

#associated_nodes_menu {
	position: absolute;
	padding: 0px;
	display: none;
	border-radius: 5px;
	border: solid 2px var(--primary-colour);
	background-color: var(--modal-bg-colour);
	min-width: 105px;
	max-height: calc(100% - 37px);
	overflow-y: scroll;
	z-index: 999999;
}

#grouped_nodes_menu {
	position: absolute;
	padding: 0px;
	display: none;
	border-radius: 5px;
	border: solid 2px var(--primary-colour);
	background-color: var(--modal-bg-colour);
	min-width: 105px;
	max-height: calc(100% - 37px);
	overflow-y: scroll;
	z-index: 999999;
}

#text_align_menu {
	position: absolute;
	padding: 0px;
	display: none;
	border-radius: 5px;
	border: solid 2px var(--primary-colour);
	background-color: var(--modal-bg-colour);
	min-width: 105px;
	max-height: calc(100% - 37px);
	overflow-y: scroll;
	z-index: 999999;
}

#linked_projects_menu {
	position: absolute;
	padding: 0px;
	display: none;
	border-radius: 5px;
	border: solid 2px var(--primary-colour);
	background-color: var(--modal-bg-colour);
	min-width: 105px;
	max-height: calc(100% - 37px);
	overflow-y: scroll;
	z-index: 999999;
}

#set_priority_menu {
	position: absolute;
	padding: 0px;
	display: none;
	border-radius: 5px;
	border: solid 2px var(--primary-colour);
	background-color: var(--modal-bg-colour);
	min-width: 105px;
	z-index: 999999;
}

#set_order_menu {
	position: absolute;
	padding: 0px;
	display: none;
	border-radius: 5px;
	border: solid 2px var(--primary-colour);
	background-color: var(--modal-bg-colour);
	min-width: 105px;
	z-index: 999999;
}

#set_node_type_menu {
	position: absolute;
	padding: 0px;
	display: none;
	border-radius: 5px;
	border: solid 2px var(--primary-colour);
	background-color: var(--modal-bg-colour);
	min-width: 105px;
	z-index: 999999;
}

#set_category_menu {
	position: absolute;
	padding: 0px;
	display: none;
	border-radius: 5px;
	border: solid 2px var(--primary-colour);
	background-color: var(--modal-bg-colour);
	min-width: 105px;
	z-index: 999999;
}

.node {
	display: block;
	border: solid 1px var(--element-border-colour);
	padding: 10px;
	position: absolute;
	text-align: center;
	border-radius: 5px;
	background-color: var(--modal-bg-colour);
}

.node:hover {
	background-color: var(--semi-opaque-primary);
	cursor: pointer;
	border: solid 1px var(--primary-colour);
	color: var(--primary-colour);
}

.completed_node {
	display: block;
	border: solid 1px var(--completed-outline-colour);
	padding: 10px;
	position: absolute;
	text-align: center;
	border-radius: 5px;
	background-color: var(--semi-opaque-completed-colour);
	color: var(--completed-outline-colour);
}

.completed_node:hover {
	background-color: var(--selected-completed-colour);
	cursor: pointer;
}

.closed_node {
	display: block;
	border: solid 1px var(--closed-outline-colour);
	padding: 10px;
	position: absolute;
	text-align: center;
	border-radius: 5px;
	background-color: var(--semi-opaque-closed-colour);
	color: var(--closed-outline-colour);
}

.closed_node:hover {
	background-color: var(--selected-closed-colour);
	cursor: pointer;
}

.text_node {
	display: block;
	padding: 3px;
	position: absolute;
	text-align: center;
}

.text_node:hover {
	cursor: pointer;
}

.group_node {
	color: var(--main-text-colour);
}

.group_node:hover {
	color: var(--main-text-colour) !important;
}

.selected {
	background-color: var(--semi-opaque-primary) !important;
}

.completed_selected {
	background-color: var(--selected-completed-colour) !important;
}

.closed_selected {
	background-color: var(--selected-closed-colour) !important;
}

.nodeText {
	margin-left: -1px;
	pointer-events: none;
	z-index: 1;
}

.emphasised {
	border: solid 2px var(--element-border-colour);
	font-weight: bold;
}

.emphasised:hover {
	border: solid 2px var(--primary-colour) !important;
}

.emphasised_closed {
	border: solid 2px var(--closed-outline-colour);
	font-weight: bold;
}

.emphasised_closed:hover {
	border: solid 2px var(--closed-outline-colour) !important;
}

.text_emphasised {
	font-weight: bold;
}

.progress_bar_housing {
	width: 100%;
	height: 5px;
	border: solid 1px;
	border-color: inherit;
	margin-left: -1px;
	margin-top: 5px;
	pointer-events: none;
}

.progress_bar {
	height: 100%;
	background-color: var(--primary-colour);
	pointer-events: none;
}

.progress_segment {
	width: 100%;
	height: 100%;
	position: absolute;
	margin-left: -10px;
	border-radius: 50%;
	pointer-events: none;
}

.completed_tick {
	color: inherit;
	border-radius: 50%;
	background-color: none;
	min-width: 17px;
	max-width: 17px;
	min-height: 17px;
	max-height: 17px;
	text-align: center;
	position: absolute;
	right: 5;
	top: 10;
}

.completed_tick:hover {
	color: var(--secondary-text-colour) !important;
	background-color: var(--primary-colour);
}

.menu_node_tick {
	color: var(--primary-colour);
	border-radius: 50%;
	background-color: none;
	min-width: 17px;
	max-width: 17px;
	min-height: 17px;
	max-height: 17px;
	text-align: center;
	position: absolute;
	right: 5;
	top: 10;
}

.node_order_div {
	position: absolute;
	top: -12;
	right: -12;
	border: solid 2px black;
	border-radius: 50%;
	background-color: var(--modal-bg-colour);
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	color: var(--main-text-colour);
	min-width: 20px;
	max-width: 20px;
	min-height: 17px;
	max-height: 17px;
	padding-top: 3px;
	pointer-events: none;
	z-index: 1;
}

.node_link_div {
	position: absolute;
	top: -12;
	right: -12;
	border: solid 2px black;
	border-radius: 50%;
	background-color: var(--modal-bg-colour);
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	color: var(--main-text-colour);
	min-width: 20px;
	max-width: 20px;
	min-height: 17px;
	max-height: 17px;
	padding-top: 3px;
	z-index: 1;
}

.node_link_div:hover {
	cursor: pointer;
	border: solid 2px var(--primary-colour);
}

.node_link {
	width: 14px;
	pointer-events: none;
}

.node_link:hover {
	cursor: pointer;
}

.circular_node {
	border-radius: 50% !important;
	aspect-ratio : 1 / 1;
	display: flex;
	align-items: center;
}

#notesDiv {
	display: none;
	position: absolute;
	padding: 5px;
	width: fit-content;
	max-width: 500px;
	max-height: 95%;
	overflow-y: scroll;
	border: 2px solid var(--primary-colour);
	border-radius: 5px;
	color: black;
	background-color: white;
	z-index: 99999999999999999999;
	box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.25);
}

#monitoring_div {
	width: 50%;
	margin: 0 auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	text-align: center;
}

.metrics_div {
	overflow-y: hidden;
	overflow-x: scroll;
}

.metrics_sub_div {
	padding: 5px;
	overflow-wrap: break-word;
	background-color: var(--modal-bg-colour);
	font-size: 12px;
	border-radius: 10px;
	border: 1px solid var(--primary-colour);
	float: left;
	height: 125px;
	max-width: 100px;
}

#metrics_detail {
	overflow-y: scroll;
	overflow-x: hidden;
	overflow-wrap: break-word;
}

#cookie_overlay {
	width: 100%;
	height: auto;
	background-color: var(--nav-bg-colour);
	color: var(--secondary-text-colour);
	position: absolute;
	bottom: 0px;
	text-align: center;
	z-index: 999999;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

:root {
	--primary-colour: #42c2f5;
	--secondary-colour: yellow;
	--warning-colour: red;
	--main-text-colour: black;
	--secondary-text-colour: white;
	--high-priority-colour: #42c2f5;
	--low-priority-colour: yellow;
	--completed-colour: #42c2f5;
	--completed-outline-colour: #42c2f5;
	--semi-opaque-completed-colour: rgba(66,194,245,0.35);
	--selected-completed-colour: rgba(66,194,245,0.65);
	--closed-outline-colour: red;
	--semi-opaque-closed-colour: rgba(255,0,0,0.25);
	--selected-closed-colour: rgba(255,0,0,0.35);
	--main-bg-colour: white;
	--nav-bg-colour: #42c2f5;
	--modal-bg-colour: white;
	--viewer-div-colour: rgba(66,194,245,0.4);
	--semi-opaque-primary: rgba(66,194,245,0.15);
	--semi-opaque-primary-2: rgba(66,194,245,0.40);
	--very-faded-primary: rgba(66,194,245,0.05);
	--element-border-colour: black;
	--semi-opaque-white: rgba(255,255,255,0.7);
	--greyed-out-background: rgba(230,230,230,1.0);
	--greyed-out-text: rgba(150,150,150,1.0);
	--greyed-out-tick: rgba(200,200,200,1.0);
}