@charset "utf-8";
/* CSS Document */
:root {
	--lightblue: #bcf;
	--blue: #29f;
	--white: #fec;
	--grey: #ccc;
	--dark:#222;
    --darktrans: rgba(22, 22, 22, 0.9);
    --verydark:#171717;
	--transbg: rgba(33,33,44,0.5);
	--transbg2: rgba(255,255,255,0.1);
	}
* {
    box-sizing:border-box;
    }
html {
    height:100%;
    }
body {
    font-family:"Noto Sans", sans-serif;
    background-image:url('/assets/pexels.jpg');
    background-size:cover;
    background-attachment:fixed;
    min-height:100%;
    margin:0;
    color: var(--white);
    /* [disabled]padding:20px; */
    }
::backdrop {
    background-image: linear-gradient(
        0deg,
        #000,
        #222,
        #446
    );
    opacity: 0.75;
    }
.hidden {
    display:none !important;
}
.portal {
    width:360px;
    margin: 0 auto;
}
.portal p {
    text-align:center;
}
header {
	text-align:center;
	margin: 0 auto;
	padding:30px 0 0;
	}
header nav {
	color:#666;
	background-color:var(--dark);
	display:flex;
	margin:0;
	border-bottom:#333 solid 15px;
	position:relative;
	justify-content: space-between;
	padding:0 20px;
	}
p {
    margin: 5px 0;
}
/*Search bar and results */
.tool-search {
	color:#ccc;
	background-color:var(--dark);
	margin:0;
	display:inline-block;
	position: sticky;
	z-index:10;
	height:50px;
	right:0;
	top: 0;
	padding: 0 40px;
	}
.tool-search::after {
	content:'';
	position: absolute;
	top: 0;
	right: -50px;
	border-bottom: 50px solid transparent;
	border-left: 50px solid var(--dark);
	width: 0;
	}
#system-search-results {
	min-width:340px;
	position: absolute;
	background-color: var(--dark);
	padding: 0;
}
#system-search-results ul {
	padding: 0 20px 20px 20px;
}
/**/
nav ul {
	margin:0;
	padding:0;
	display:flex;
	list-style:none;
	}
nav ul li {
    margin:0;
	padding:10px; 
    cursor: pointer;
}
header nav ul li {
	padding:20px;
    cursor: auto;
	}
button {
    cursor: pointer;
}
header div.breadcrumbs {
	color:#ccc;
	font-size:0.8em;
	position: absolute;
	bottom:-15px;
	left:40px;
	}
h1, h2, h3 {
		font-family:"Montserrat Subrayada", sans-serif;
		}
h4 {
    margin:10px 0;
    color:#ddd;
}
h4.packet {
    color:#f90;
}
h4.packet::after {
    content: '⏏';
    color:#f90;
    position:absolute;
    padding-left:10px;
    margin-top:-3px;
    font-size:1.2em;
}
header h1 {
	font-size:3em;
	margin:0;
	}
h1.logo {
    width:350px;
	margin:0 auto;
    position:relative;
	}
h1.logo:after {
    content: 'CLOSED BETA';
    position: absolute;
    bottom: -5px;
    left: 220px;
    font-size: 16px;
    color: rgb(221, 156, 25);
    }
img {
	display:block;
	margin:0 auto;
	}
input, textarea, select {
	border: var(--white) 1px solid;
	background-color: var(--transbg);
	color: var(--white);
	border-radius: 5px;
	padding: 4px;
	display:inline-block;
	font-size:1em;
	width:300px;
	margin:10px 0px;
	}
textarea {
    height:100px;
}
input[type="number"] {
    appearance: textfield;
  }
input.short {
	width:50px;
	}
input.medium {
    width:100px;
}
td>input {
	width:100px;
	}
label {
	display:block;
	}
input.reverse {
	background-color:var(--white);
	color:var(--dark);
	}
label input.switch {
	display:inline-block;
	vertical-align:middle;
	padding:0;
	margin:0 10px 0 0;
	}
#add-bgs h4 {
    cursor: pointer;
}
#add-bgs section {
    display: flex;
    flex-wrap: wrap;
}

#add-bgs section>p {
    width:100%;
}
#add-bgs section>div {
border:#666 1px solid;
padding:10px 30px;
margin:8px 20px 8px 0;
}
#add-bgs table {
    margin: 5px 0;
}
#add-bgs td {
    padding:0 15px;
}

input[type="checkbox"].switch{
  font-size: 16px;
  appearance: none;
  width: 2.5em;
  height: 1.5em;
  background: var(--transbg);
  border-radius: 0.5em;
  position: relative;
	vertical-align:middle;
	top:-1px;
  cursor: pointer;
  outline: none;
  transition: all .2s ease-in-out;
  }
	
	.info {
		cursor:help;
		position:relative;
	}
.graph {
	flex-basis:70%;
	min-width:320px;
    min-height:250px;
	}
.system-information {
	flex-basis:30%;
	flex-grow:1;
	}
button {
	display:inline-block;
	border:1px solid #000;
	background-color:#f92;
	color:#000;
	border-radius:6px;
	min-width:90px;
	text-align:center;
	font-size:0.9em;
	padding: 1px 10px 3px 10px;
    height:26px;
	}
.tasking-tools a {
	width:200px;
	padding:5px;
	}
.system-tools a span {
	font-size:1.3em;
	vertical-align:-1px;
	}
.system-tools a.tool-remove {
	background-color:#c30;
	}
.system-tools a:hover {
	background-color:#fc3;
	color:#000;
	}
.systems.list .summary, .systems.list ul, ul.factions li>div  {
	list-style-type:none;
	}
.systems.list .summary, ul.factions li>div:first-child  {
	display:flex;
	justify-content:space-between;
  }
.systems.list>li {
	border-bottom:1px solid #666;
	display:grid;
	grid-template-columns:auto 40%;
	padding: 10px 0;
	grid-column-gap: 40px;
	}
.systems.list>li:first-child {
    border-top:1px solid #666;
    }
.conflict {
    font-size:12px;
    padding-left:20px;
    color:var(--lightblue);
}
.factions li {
    display:grid;
    grid-template-columns:60% auto auto;
    padding: 5px 15px;
    grid-column-gap: 10px;
}
.systems.list ul.factions {
	grid-column:1 /3;
	padding:0;
	display:block;
	}
ul.factions li:nth-child(even) {
	background: var(--dark);
}
ul.factions li:nth-child(odd) {
	background: #282828;
	}
.systems.list>:not(.open) .expands, .systems.list>.open .hides  {
	display:none;
	}
.planning {
	display:flex;
	justify-content:space-between;
	}
.factions .tools {
    grid-column:3;
}
.tools {
    text-align:right;
}
.filter {
    border-radius:5px;
    padding:2px;
    margin:10px;
    border:#bcf 1px solid;
    display:inline-block;
}
.tags {
	min-width:250px;
	padding:0;
	justify-content:left;
	}
.tags li {
	display:inline-block;
	border:#999 1px solid;
	background-color:var(--dark);
	border-radius:4px;
	padding:2px;
	margin:0 10px;
	font-size:0.8em;
	}
.tags li.tag-active {
	border:#f93 1px solid;
	}
.tags li.tag-duplicate {
	border:#f30 1px solid;
	}
  
.active-state, .pending-state {
    border-radius:5px;
    font-size:12px;
    padding:2px;
    position:relative;
}
.active-state{
    border:1px solid #666;
    color:#222;
    background-color: #ccc;
}
.pending-state {
    border:1px solid #666;
    padding-left:5px;
}
.pending-state::before {
    content:"Pending";
    position:absolute;
    top:-6px;
    left:1px;
    font-size:9px;
}

  input[type="checkbox"].switch:checked{
  background: #9cf;
  }
  
  input[type="checkbox"].switch::after{
  position: absolute;
  content: "";
  width: 1.5em;
  height: 1.5em;
  border-radius: 25%;
  background: #fff;
	box-shadow: 0 0 .25em rgba(0,0,0,.3);
	transform: scale(.7);
  left: 0;
  transition: all .2s ease-in-out;
	top: -1px;
  }
  
  input[type="checkbox"].switch:checked::after{
  left: calc(100% - 1.5em);
  }
div.form-group {
	margin:0px auto;
	padding:10px;
	}
div.form-group.login {
	width:320px;
	}
div.form-group.register {
	width:350px;
	}
main {
	display:block;
	background-color: var(--darktrans);
	padding:20px 20px 50px 20px;
	margin:0 0 50px 0;
	}
.flex {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        }
.flex>div {
    flex-basis: 49%;
    border:#666 1px solid;
    padding:20px;
    border-radius: 20px;
}
a {
	text-decoration:none;
	color: var(--lightblue);
	}
a:hover {
	color: var(--blue);
	}	
ul.systemItems {
	font-size:0.8em;
	}
ul.systems.list {
	margin:15px 0;
	padding:0;
	}
p.filters {
    margin:15px 0;
}
	/*
ul.systems.list>li {
	display:grid;
	grid-template-columns: 900px auto;
	list-style-type:none;
	margin:10px 0;
	}
.system {
	background-color: var(--transbg2);
	width:900px;
	padding:10px;
	margin:10px 0;
	border:var(--white) 1px solid;
	border-radius:5px;
	position:relative;
	}*/
.system {
	position:relative;
	}
.system.active {
	background-color:rgba(204,255,255,0.1);
	}
/*.system.active::after {
    content: "active";
		color:#000;
		font-size:0.6em;
    position: absolute;
    top: -2px;
    right: 0;
		padding:1px 3px;
		background-color:#ffcc00;
		border-bottom-left-radius:5px;
}*/
/*
.system li.faction-list {
	padding:5px;
	margin:5px 0;
	border:var(--grey) 1px solid;
	border-radius:5px;
	position:relative;}
li.faction-list>div {
	display:flex;
	justify-content: space-between;
	}*/
.system ul, .system li {
	list-style:none;
	}
.systemInfo {
	display:block;
	height:200px;
	overflow:auto;
	font-size:10px;
	}
.copy-btn {
	background-color:transparent;
	cursor:copy;
	}
.copy-btn:hover {
	background-color:rgba(255,255,255,0.1);
	}
p.flex-links {
	display:flex;
	justify-content: space-between;
	}
.info-tip {
		font-size:1.5em;
	}
table span.sum {
    color:#666;
    font-size: 12px;
}
table .manual {
    color:#fff;
    position:relative;
}
table, th, td {
  border: 1px solid #666;
}
.system td:first-child, .system th:first-child {
  text-align:left;
}
table {
    color:#ccc;
    font-size:14px;
	width:100%;
	border-collapse: collapse;
	border-radius:5px;
	font-size:0.9em;
	text-align:center;
	}
output {
	color:#fc0;
	width:110px;
	display:inline-block;
	text-align:right;
	position:relative;
	padding-right:20px;
	}
output::before {
	content:"❯❯";
	position:absolute;
	left:0;
	}
output.up::after, output.win::after {
	color:#0c0;
	content:"▲";
	position:absolute;
	right:0;
	}
output.down::after, output.loss::after {
	color:#f30;
	content:"▼";
	position:absolute;
	right:0;
	}
ul.threat-references {
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
	position:relative;
	list-style:none;
	padding:0;
	margin:0;
	}
.threat-references li {
	font-size:0.8em;
	margin: 2px 10px;
	padding:4px;
	border: #ccc 1px solid;
	border-radius:3px; 
	}
.copy-btn::after {
	content: " ⧉ ";
	font-size:0.7em;
	position:relative;
	top:-5px;
	}
li.staledata::after, li.highinf::after, li.danger::after {
	color:#000;
	position: absolute;
  top: 0;
  right: 0;
	padding:2px 5px;
	border-bottom-left-radius:5px;
	}
li.staledata::after {
	content:"old data";
	background-color:#ccc;
	}
li.highinf {
	border-color:#fd3;
	}
li.highinf::after {
	content:"60+";
	background-color:#fd3;
	}
li.highinf.staledata {
	border-color:#f90;
	}
li.highinf.staledata::after {
	content: "old data, 60+";
	background-color:#f90;
	}
li.danger::after {
	content:"70+";
	background-color:#f30;
	}
li.danger {
	border-color:#f30;
	}
.threat-info {
	margin-right:100px;
	}
	/*
.controlling {
	background-color:rgb(64,160,255,0.1);
	}*/
.faction-name {
    width:40%;
}
div.states {
    flex-grow:1;
    text-align:left;
}
.controlling div.faction-name::after {
	content: "Controlling";
	font-size: 0.6em;
	padding:1px;
	position:relative;
	bottom:2px;
	padding: 1px;
	background-color: #666;
	border-radius: 4px;
	}
.player div.faction-name>span::after {
	content: "Player";
	font-size: 0.6em;
	padding:1px;
	background-color:#960;
	border-radius:4px;
	position:relative;
	bottom:2px;
	}
.native div.faction-name::before {
	content:"N";
	font-size: 0.6em;
	padding:1px;
	background-color:#069;
	border-radius:4px;
	margin-right:5px;
	position:relative;
	bottom:2px;
	}
a.inara {
	font-size: 0.6em;
	padding:1px 4px;
	background-color: #333;
	border-radius:4px;
	position:relative;
	bottom:2px;
	}
.system .summary {
	display:flex;
	flex-flow:row;
    flex-wrap:nowrap;
	justify-content:space-between;
    margin:0 15px;
	}
.system-planning {
    margin:0 15px;
    }
	
.task-item {
	cursor:grab;
	}
.task-item:active {
	cursor:grabbing;
	}
.dad {min-height:50px;
    background-color: #333;
    }
ul#operationlist {
	min-width:500px;
	width:50%;
	}
ul#operationlist, ul#operationlist ul {
	list-style-type:none;
}
ul#operationlist>li {
	background-color:rgba(51,51,51,0.8);
	padding:10px;
	margin:10px;
	border-radius:8px;
	}
ul#operationlist ul {
	border-top:2px #666 solid;
	padding:5px 0 0 0;
	}
.task-item {
	padding:8px;
	margin:5px;
	border:1px #666 solid;
	border-radius:6px;
	}

#factionlist li {
    position: relative;
    padding:10px;
    list-style: none;
    border:#666 1px solid;
    margin:3px;
    background-color:#222;
    border-radius:10px;
}
#factionlist li:first-child {
    color:#0c0;
}
#factionlist li:first-child:before {
    content: 'Primary';
    position: absolute;
    top: -8px;
    font-size:11px;
    background-color:#222;
    left:0px;
}

ul.dashboard li.category {
    padding:10px;
}

ul.dashboard ul.items {
    margin-top:10px;
}

ul.dashboard li {
    position:relative;
    padding:5px;
    list-style: none;
    border:#666 1px solid;
    margin:3px;
    border-radius:10px;
}

/*Squadron page - added 21 May 2023*/

*[draggable] {
    cursor:move;
}

list-editor {
    display:block;
    position:relative;
}
search-menu {
    color:#ccc;
	background-color:var(--dark);
	margin:-20px -20px -50px auto;
	display:block;
	width:400px;
    position: sticky;
	z-index:10;
	height:50px;
    right:0px;
	top: 0;
	padding: 0 40px;
}
search-menu::before {
	content:'';
	position: absolute;
	top: 0;
	left: -50px;
	border-bottom: 50px solid transparent;
	border-right: 50px solid var(--dark);
	width: 0;
	}
search-tool {
    display: inline-block;
    position:absolute;
    right:5px;
    top:5px;
    padding:0 5px;
}
search-tool input {
    margin:0;
}
search-tool .results, search-menu .results {
    position: absolute;
    left:5px;
    right:5px;
    width:auto;
    background-color:#222;
    z-index:200;
    margin:0;
    padding:10px 15px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    list-style: none;
}
search-tool .results li, search-menu .results li {
    border:0;
    padding:3px 0;
    margin:0;
    cursor:pointer;
}

.system .delete {
    position:relative;
    right:0px;
}

li.system.hidden
{
    display:none;
}

/*.delete, .add {
    border-radius:8px;
    padding:3px 15px;
    border:0px;
}*/

.delete {
    background-color:#c30 !important;
    color:#eee !important;
}
.delete:active, .delete:hover {
    background-color:#f30 !important;
}
.add {
    background-color:#ccc;
}
.add:active, .add:hover {
    background-color:#eee;
}
dialog
{
    max-height:96vh;
    color:var(--white);
    margin:2vh auto;
    max-width:800px;
    padding: 10px 20px;
    background-color:#444;
    border-radius:10px;
    border-width: 0;
    box-shadow: 0px 10px 15px var(--dark);
}
dialog p {
    font-size:12px;
    margin:5px 0;
    padding-left:10px;
}
div.tab {
    background-color:#222;
    padding: 2px 20px 15px 20px; 
}
nav ul li.tab {
    margin:5px 20px 0 0;
    border-radius:8px 8px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-color:#333;
}
nav ul li.tab.active {
    background-color:#222;
}
.task {
    grid-column:2;
    text-align: left;
    position: relative;
    padding:5px 80px 5px 0;
}
ul.factions th:last-child, .factions td:last-child {
    border-color: transparent;
}
.task button.delete {
    position:absolute;
    right:0px;
}
.error {
    border:#f30 solid 1px;
    border-radius:4px;
}
.feedback, .error {
    color:#f60;
}
.squad-factions {
    display:flex;
}
.squad-factions p {
    border:#666 solid 1px;
    border-radius:4px;
    padding:5px;
    margin-right:10px;
}
#toolpane {
    margin:10px 0 30px 0;
}

/*
 * New way to display list items as grid and have tools on the right
 * First child to column 1, .toolkit or button to the right, everything else to column 2
 * Supports nested lists (.editor) up to 1 level.
 */
.editor {
    display:grid;
    grid-template-columns: auto auto max-content;
}
.editor>li, .editor .editor, .editor>li {
    grid-column:1 / -1;
    display:grid;
    grid-template-columns: subgrid;
}
.editor>li>*:not(.editor, button, .toolkit) {
    grid-column: 2;
}
.editor>li>*:first-child, .editor .editor>li>*:first-child  {
    grid-column: 1;
}
.editor li>.toolkit, .editor li>button {
    grid-column: 3;
}
.toolkit {
    justify-content: flex-end;
    display:flex;
    gap:5px;
}
.tag.checked {
    background-color:darkolivegreen;
}
.tag.checked::after {
    content:" ✔";
}


/*
* Editor window stuff
*/
p.caution {
    border: #960 1px solid;
    border-radius:5px;
    padding:10px;
    font-size:1.2em;
}