/*

This file is part of Kronekeeper, a web based application for 
recording and managing wiring frame records.

Copyright (C) 2016-2020 NP Broadcast Limited

Kronekeeper is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Kronekeeper is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with Kronekeeper.  If not, see <http://www.gnu.org/licenses/>.

*/





/* Styling to allow use of Ligature Symbol font
 * See: http://kudakurage.com/ligature_symbols/
 */

:root {
	--text-color: #eaf2ff;
	--ring: 0 0 0 3px color-mix(in oklab, var(--brand) 35%, transparent);
	--card: #231222;
	--brand: #d1399c;
	--hover-color: #3f183e;
	--radius: 14px;
	--radius-sm: 10px;
	--shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

@font-face {
	font-family: 'LigatureSymbols';
	src: url('/css/LigatureSymbols-2.11.woff');
	font-weight: normal;
	font-style: normal;
}

body {
	background: linear-gradient(135deg, #180b16, #0e060c);
	font-family: Sans-Serif;
	color: var(--text-color);
}

a {
	color: var(--text-color);
	border-radius: 3px;
	border: 1px solid transparent;
}

input,
select,
textarea {
	background: var(--card);
	border: 1px solid #542749;
	border-radius: 10px;
	outline: none;
	padding: 10px;
	width: 100%;
	color: var(--text-color);
	font-size: 14px;
	line-height: 12px;
}

input:focus,
select:focus,
textarea:focus {
	border-color: #8f2a63;
	box-shadow: 0 0 0 3px color-mix(in oklab, #d1397b 35%, #0000);
	box-shadow: var(--ring);
}

button {
	border: 0;
	background: var(--brand);
	color: #052a20;
	font-weight: 900;
	letter-spacing: .3px;
	padding: 10px 14px;
	border-radius: 10px;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(57, 209, 125, .35)
}

.lsf {
	font-family: 'LigatureSymbols';
}

.masthead {
	margin-bottom: 2em;
	display: flex;
	flex-direction: column;
	padding: 12px;
	max-width: 960px;
	width: 100%;
	margin: 0 auto;
}

.masthead .top-section {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.masthead .message {
	color: var(--text-color);
	font-size: 12px;
}

.menu {
	display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    background: color-mix(in oklab, var(--card) 92%, #000 8%);
    padding: 6px;
    border-radius: 999px;
    box-shadow: var(--shadow);
}

.menu a {
	font-size: 18px;
	font-weight: normal;
	color: var(--text-color);
	padding: 8px 12px;
	border-radius: 8px;
	text-decoration: none;
	text-transform: capitalize;

	border: 0;
    padding: 10px 14px;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    font-weight: 700;
}

.menu a:hover {
	background: var(--hover-color);
	color: white;
	border-color: transparent;
}

.container {
	width: 90%;
	margin: auto;
	position: relative;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.content {
	background-color: white;
	border: 3px solid #aaa;
	padding: 1em;
}

.footer {
	clear: both;
	padding-top: 12em;
	text-align: center;
	font-size: 6pt;
}

.footer .footer-text {
	margin-bottom: 20px;
	display: block;
	font-size: 12px;
}

.footer a {
	color: var(--text-color);
	font-size: 14px;
}

.footer ul {
	list-style: none;
	padding: 0px;
}

.footer li {
	display: inline-block;
}

.dialog span.ui-icon {
	float: left;
	margin-top: 0;
	margin-right: 0.5em;
}

div.credits.container {
	padding-top: 2em;
}


.frame_list table,
.add_frame table {
	margin-top: 1em;
	margin-left: 1em;
}

.dialog h1 {
	text-align: center;
}

.dialog ul {
	list-style-type: none;
}

.dialog li {
	padding: 1em;
	position: relative;
}

.dialog label {
	text-align: right;
	margin-top: 3px;
	display: inline-block;
	float: left;
	padding: 3px;
	width: 25%;
}

.dialog label:after {
	content: ":";
}

.dialog input {
	height: 15px;
	width: 60%;
	padding: 5px 8px;
}

.dialog button {
	margin-left: 50%;
	margin-right: 50%;
	font-size: 100%;
}

.dialog p.error {
	text-align: center;
	color: red;
}



/* Styling for the frame view, which shows all blocks */
.frame table {
	text-align: center;
	margin: 0 auto;
}

.frame th {
	width: 2em;
}

.frame caption {
	margin-bottom: 0.5em;
}


/* the size of a block is fixed and defined here. */
.frame td {
	min-width: 17em;
	height: 24pt;
	border: 1px solid var(--text-color);
	font-size: 12pt;
	border-radius: 6px;
}

.frame td.highlighted {
	border: 1px solid red;
	font-weight: bold;
	box-shadow: 0px 0px 2px 2px #f00;
}

.frame .block.is_free div.label {
	color: var(--text-color);
	font-style: italic;
	font-size: 12px;
}

.frame td.block.is_free {
	background: inherit;
}

.frame td.block.unavailable {
	background: inherit;
	border-color: transparent;
}

.frame .block.unavailable div.label {
	color: var(--text-color);
	font-size: 6pt;
	font-style: italic;
}

.frame td.block.in_use:hover {
	background-color: var(--text-color);
}

.container table {
	border-spacing: 4px;
}

.frame th div.container,
.frame .block div.container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 12px;
	position: relative;
	width: 100%;
	height: 100%;
}

.block div.container {
	width: 100%;
	margin: 0px;
}

.frame .block div.label,
.frame .block span.name {
	position: absolute;
	width: 15em;
	margin: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-height: 26pt;
	font-size: 11pt;

	/* This handles overflow of single line, which
	 * applies when the line contains no opportunities
	 * for line breaks. The template/javascript puts
	 * a further limit on the number of characters to
	 * limit vertical extent.
	 */
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Make link cover entire table cell */
.frame .block a.link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: var(--text-color);
	border-color: transparent;
	background: transparent;
}



/* Don't display block link unless a block is placed there */
.frame .is_free a.link,
.frame .unavailable a.link {
	display: none;
}

/* Don't display 'unused' or 'unavailable label if block is in use */
.frame .block div.label {
	/* By default display neither label */
	display: none;
}

.frame .block.unavailable div.label.unavailable {
	display: initial;
}

.frame .block.is_free div.label.unused {
	display: initial;
}

/* The menu button is overlaid in the top right corner */
.frame .block div.menu_button,
.block div.menu_button {
	position: absolute;
	right: 0px;
	top: 0px;
	text-align: right;
}

.frame div.frame_menu.menu_button {
	position: static;
}

.frame .menu_button a {
	right: 0px;
	font-size: 12pt;
	text-decoration: none;
	color: var(--text-color);
}

.block .menu_button a {
	font-size: 12px;
	background: inherit;
}

.frame div.designation {
	position: absolute;
	bottom: 0px;
	left: 0px;
	text-align: left;
	line-height: 12px;
	font-size: 12px;
	margin-left: 3px;
	border: 0px;
	background: inherit;
}

.frame div.block_type {
	position: absolute;
	bottom: 0px;
	right: 0px;
	text-align: right;
	font-size: 6pt;
	border: 0px;
	background: inherit;
}

.frame .block.unavailable div.designation,
.frame .block.unavailable div.block_type {
	display: none;
}

.block table,
.frame_list table,
.list table,
.kris_jumper_colours table table {
	border-collapse: collapse;
}

.block td,
.block th,
.frame_list td,
.frame_list th,
.list td,
.list th,
.kris_jumper_colours td,
.kris_jumper_colours th {
	border: 1px solid black;
	padding: 8px;
}

.activity_log th,
.block th,
.frame_list th,
.list th,
.kris_jumper_colours th {
	background: var(--hover-color);
}

.activity_log th {
	text-align: left;
}


.block td,
.list td,
.kris_jumper_colours td {
	background: black;
	height: 10pt;
}

.frame_list td {
	background: black;
}


.block td.cable_reference {
	width: 5em;
}

.block td.name,
.block td.connection {
	width: 12em;
}

.block td.jumper {
	width: 4em;
	vertical-align: top;
}

.block td.jumper.inactive {
	background: var(--hover-color);
}

.block .jumper div.wire,
.wiretype div.wire {
	border: 1px solid black;
	float: left;
	width: 45%;
	margin-left: auto;
	margin-right: auto;
	font-size: 50%;
	font-weight: 600;
	text-align: center;
}


.block caption,
.frame caption {
	text-align: left;
	font-weight: bold;
	font-size: 120%;
}

.block caption dd,
.frame caption dd {
	margin-top: 12px;
}

.block tbody input {
	width: 100%;
	height: 100%;
	border: none;
	padding: 0px;
	background: transparent;
}

.block caption input,
.frame caption input {
	width: 24em;
}

.block caption input.editing {
	border: 1px solid var(--text-color);
}

.block td.change_pending,
.block input.change_pending,
.frame input.change_pending {
	color: black;
	background: #ffdede;
}

.block td.circuit_buttons {
	background: inherit;
	border: none;
	padding-left: 0.5em;
	vertical-align: middle;
}

.list td.buttons {
	min-width: 4em;
	text-align: center;
}

.frame_list td.buttons {
	min-width: 6em;
	text-align: center;
}

.activity_log,
a.notes_button,
.activity_log,
a.menu_button,
.list .buttons a,
.custom-select a.button,
.frame_list td a,
.block .circuit_buttons a {
	text-decoration: none;
	outline: none;
	color: var(--text-color);
	border-radius: 3px;
	padding: 4px 8px;
	font-size: 16px;
	line-height: 16px;
}

.activity_log a.notes_button:hover,
.activity_log a.menu_button:hover,
.list .buttons a:hover,
.frame_list td a:hover,
.block .circuit_buttons a:hover {
	color: var(--text-color);
	background: var(--hover-color);
	border-color: transparent;
}

.list .buttons a,
.frame_list .buttons a {
	font-size: 16pt;
}

.activity_log a.notes_button,
.block a.notes_button {
	font-size: 16pt;
	color: var(--text-color);
}

.activity_log a.menu_button {
	font-size: 11pt;
	color: var(--text-color);
}

.activity_log a.notes_button.has_note,
.block a.notes_button.has_note {
	font-size: 16pt;
	color: var(--text-color);
}

.block a.add_jumper {
	font-size: 8pt;
	position: relative;
	padding: 4pt;
	top: -3pt;
}

.block div.shortcuts {
	padding-top: 2em;
	font-size: 8pt;
}

.block .shortcuts ul {
	margin-top: 0px;
}

.designation {
	background: #eeeeee;
	border: 1px solid var(--text-color);
	border-radius: 3px;
}


.place_template,
.choose_jumper_type {
	font-size: 65%;
	text-align: center;
}

.choose_jumper_type table {
	margin-left: auto;
	margin-right: auto;
}

.option_group div.option_item {
	background: #ddd;
	border: 1px solid var(--text-color);
	border-radius: 5px;
	margin: 5px;
}

.choose_jumper_type .option_group div:hover.option_item,
.choose_jumper_type .option_group div.selected.option_item {
	background: var(--hover-color);
}

.choose_jumper_type .option_group div:hover.option_item table,
.choose_jumper_type .option_group div.selected.option_item table {
	border: 1px solid var(--text-color);
}

.option_item table {
	border: 1px solid white;
	border-radius: 5px;
	margin-bottom: 1em;
	background: white;
}

.option_item table.wire_list,
.option_group div.selected.option_item table.wire_list {
	margin: 0px;
	border: 0px;
}

.option_item .wire_list td {
	padding: 0px;
}

.option_group div:hover.option_item table.wire_list {
	border: none;
}

.place_template .message,
.choose_jumper_type .message {
	font-size: 150%;
	font-style: italic;
	font-weight: bold;
	margin-top: 1em;
}

.wire_colours td {
	width: 4em;
	height: 12pt;
}


.list div.wire_group {
	display: flex;
	justify-content: center;
}

.list div.wire_colour {
	width: 7em;
	text-align: center;
	padding: 0.1rem;
	border: 1px solid var(--text-color);
	font-size: 66%;
}

.list div.wire_colour:not(:first-child) {
	border-left: none;
}

#circuit_note_dialog .message {
	margin-top: 1em;
	font-style: italic;
	text-align: center;
}

.choose_block_colour dt {
	margin-top: 1em;
	margin-bottom: 0.25em;
	font-weight: bold;
	font-size: 75%;
}

.choose_block_colour dd {
	margin-left: 0px;
}

.choose_block_colour a {
	font-size: 60%;
}

/* Override jQueryUI background when a dialog is displayed */
.ui-widget-overlay {
	opacity: 0.5;
	background-color: var(--text-color);
}

/* Override jQueryUI to centre buttons on a dialog */
.ui-dialog .ui-dialog-buttonpane {
	text-align: center;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: none;
}


/* Override jqUI menu highlighted item colour */
.ui-state-active,
.ui-widget-content .ui-state-active {
	border: 0;
	color: var(--text-color);
	background: transparent;
}

.ui-widget.ui-widget-content {
	overflow: hidden;
	border-color: var(--text-color);
}

/* Class to allow dialog close button to be disabled */
.no-close .ui-dialog-titlebar-close {
	display: none;
}


/* Set width of per-block/per-jumper context-menu */
.context_menu {
	width: auto;
	position: absolute;
	display: none;
	border-radius: 8px;
	color: var(--text-color);
	font-size: 10pt;
	background: linear-gradient(135deg, #091018, #0f1725);
}

.ui-menu .ui-menu-item {
	padding: 8px 10px;
}

.ui-menu .ui-menu-item:hover {
	background: var(--hover-color);
}

.change_password form ul,
.edit form ul {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	list-style-type: none;
	list-style-position: outside;
	margin: 0px;
	padding: 0px;
}

.change_password form li,
.edit form li {
	padding: 3px;
	position: relative;
}

.change_password form label,
.edit form label {
	width: 8em;
	text-align: right;
	display: inline-block;
	padding: 3px;
	left: 0px;
}

.add_frame form div.buttons {
	margin-top: 1em;
	margin-left: 2em;
}

.change_password form li.message,
.change_password form li.buttons {
	width: 28em;
	text-align: center;
	margin-top: 1em;
}

.edit .message div,
.dialog.password_result .message div,
.change_password .message div {
	display: none;
}

.add_frame .message {
	margin-top: 1em;
	font-style: italic;
	text-align: left;
}

.edit .message .error,
.dialog.password_result .message .error,
.change_password .message .error {
	color: red;
}

.edit .message .success,
.dialog.password_result .message .success,
.change_password .message .success {
	color: green;
}

#jumper_template_form ol {
	display: inline-block;
	vertical-align: top;
}

#jumper_template_form ol li:last-child {
	list-style: none;
}



.credits dt {
	max-width: 14em;
	width: 14em;
	float: left;
	text-align: right;
}

.credits dt::after {
	content: "\2014";
	/* em-dash */
}

.credits dd {
	margin-left: 10.5em;
}

td.jumper.highlight,
.highlight td:not(.circuit_buttons) {
	background: yellow;
}


.kris_jumper_colours {
	font-size: 80%;
}

.filename {
	font-family: monospace;
}


.kris_jumper_colours table {
	margin-left: auto;
	margin-right: auto;
}

.kris_jumper_colours th,
.kris_jumper_colours tr {
	height: 2em;

}

.kris_jumper_colours td:nth-child(1) {
	text-align: center;
}

.kris_jumper_colours td:nth-child(2) {
	border-right: none;
	padding-left: 0.5em;
}

.kris_jumper_colours td:nth-child(3) {
	border-left: none;
}

.kris_jumper_colours td:nth-child(4),
.kris_jumper_colours th:nth-child(3) {
	background: inherit;
	border: none;
	width: 2em;
	text-align: center;
}

.kris_jumper_colours td:nth-child(5) {
	padding-left: 0.5em;
	width: 20em;
}

.kris_jumper_colours .empty_table td {
	font-style: italic;
	font-size: 80%;
	background: inherit;
	text-align: center;
}



.wiretype div.wire {
	height: 2em;
	width: 4em;
	margin-top: 1px;
	font-size: 50%;
}

.wiretype div.wire_b {
	border-left: 0px;
	margin-right: 0.5em;
}

td.arrow {
	font-weight: bold;
}

#wiretype_upload_form p.error,
#krn_upload_form p.error {
	margin: 0px;
	color: red;
	font-weight: bold;
}

#wiretype_upload_form p.success,
#krn_upload_form p.success {
	margin: 0px;
	color: green;
	font-weight: bold;
}









/* Custom drop-down select styling, which allows rich html options
 * this is used to display and select jumper template options for the
 * KRIS import process.
 * Inspired by:
 *   http://jsfiddle.net/6zcRk/ and
 *   http://stackoverflow.com/questions/9548618/custom-drop-down-panel-with-jquery
 *   http://www.jankoatwarpspeed.com/reinventing-a-drop-down-with-css-and-jquery/
 */
.custom-select {
	position: relative;
	display: inline-block;
}

.custom-select div.selection {
	display: inline-block;
	width: 20em;
	cursor: pointer;
	background: #fff;
}

#jumper_template_form div.selection {
	width: 11em;
}

.custom-select .selection span.arrow {
	margin-right: 0.25em;
	float: right;
}

.custom-select ul {
	position: absolute;
	display: none;
	border: 1px solid #333;
	width: 15em;
	max-height: 300px;
	overflow: auto;
	z-index: 10000;
	list-style: none;
	padding: 0px;
	margin-top: 1px;
	background: #fff;
}

.custom-select ul li {
	padding: 5px;
	border-bottom: 1px solid black;
	cursor: pointer;
}

.custom-select ul li:hover {
	background-color: var(--hover-color);
	color: var(--text-color);
}

.custom-select ul li:last-child {
	border-bottom: none;
}

.custom-select div.wire {
	border: 1px solid black;
	width: 4em;
	font-size: 50%;
	font-weight: 600;
	text-align: center;
	height: 2em;
	float: left;
	margin-top: 1px;
}

#jumper_template_form .custom-select span.wire {
	border: 1px solid black;
	display: inline-block;
	width: 11em;
	font-size: 85%;
	text-align: center;
	margin: 2px;
}


.custom-select div.wire_b {
	margin-right: 1em;
	border-left: 0px;
}



/* Used to display dark background over page, with loading message */
.overlay .background {
	background: black;
	opacity: 0.5;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.overlay .message span {
	color: white;
	font-weight: bold;
	font-size: 150%;
	padding: 1em;
	background: black;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


.user_list .inactive td.name,
.user_list .inactive td.email {
	text-decoration: line-through;
	color: #999;
}

/* Hide inactive users in user list */
.user_list tr.inactive {
	display: none;
}

.edit_user form .roles label {
	text-align: left;
	margin-left: 2em;
}

.edit_user form .roles input {
	margin-left: -2em;
}

.edit form input.name,
.edit form input.email,
.edit form input.jumper_designation {
	width: 25em;
}

.edit_account form input.frame_limit {
	width: 4em;
}

.edit_account form li.buttons,
.edit_account form li.message,
.edit_user form li.message,
.edit_user form li.buttons {
	min-width: 5em;
	text-align: center;
	margin-top: 1em;
	margin-left: auto;
	margin-right: auto;
}

.edit_account form fieldset,
.edit_user form fieldset {
	margin-left: auto;
	margin-right: auto;
}

.edit_account fieldset {
	max-width: 40em;
}

.edit_account form fieldset,
.edit_user form fieldset {
	max-width: 60em;
}

.edit_account form fieldset div,
.edit_user form fieldset div {
	max-width: 50em;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.edit_account form fieldset label,
.edit_user form fieldset label {
	min-width: 15em;
}

.edit_account form ul.fields,
.edit_user form ul.fields {
	width: 40em;
	margin-left: auto;
	margin-right: auto;
}


.dialog.password_result p.password {
	background: #eeeeee;
	border: 1px solid #555555;
	border-radius: 3px;
	text-align: center;
}

p.small {
	font-size: 70%;
	font-style: italic;
	color: blue;
}

.dialog.password_result .message div {
	text-align: center;
}

.dialog.hidden {
	display: none;
}


.activity_log dl {
	margin-bottom: 10px;
}

#activity_log_table tr.completed {
	background: #ccffcc
}

#activity_log_table tr.next_task {
	background: #ffffcc
}


.validation_error {
	box-shadow: 0px 0px 2px 2px red;
}