/*
#
#  UK Particle Physics Travel Management System and UKLO Administrative Portal
#  Version 2.0
#  travel.css
#
#  This contains css definitions
#
#  The order of components is top right bottom left or top/bottom left/right
#
#  Copyright (c) 2013-24 Steve Lloyd, Queen Mary University of London. 
#  All rights reserved.
#
#===========================================================================
*/
:root,:root.light{
	--heading-bgcolor: #116abc;

	--created-bgcolor: #00aaff;
	--pending-bgcolor: #ffff00;
	--approved-bgcolor: #00ff00;
	--rejected-bgcolor: #ff0000;
	--accepted-bgcolor: #ccffcc;
	--completed-bgcolor: #00dd00;
	--cancelled-bgcolor: #aaaaaa;

	--applicant-bgcolor: #ccffcc;
	--budget-bgcolor: #ccccff;
	--uklo-bgcolor: #ffcccc;
	
	--future-bgcolor: #ffffcc;
	--student-bgcolor: #ccffcc;
	--staff-bgcolor: #ffccff;
	--special-bgcolor: #ffeeff;
	--short-term-bgcolor: #ffeeff;
	--other-bgcolor: #ccffff;
	--commuter-bgcolor: #ccffff;
	
	--free-bgcolor: #ffffff;
	--weekend-bgcolor: #e0e0e0;
	--select-bgcolor: #ccffcc;
	--selected-bgcolor: #00ff00;
	--today-color: #ff0000;
	--excluded-bgcolor: #cccccc;
	--leeway-bgcolor: #eeeeee;
	
	--compare-black-color: #000000;
	--compare-red-color: #ff0000;
	--compare-green-color: #00aa00;

	--reconciled-color: #008000;
	--unreconciled-color: #dc143c;
	--announce-color: #ff0000;
	--drop-area-highlight-color: #800080;

	--sticky-note-color: #000000;
	--sticky-note-shadow-color: #eeeeee;
	--sticky-note-green-bgcolor: #90ee90;
	--sticky-note-yellow-bgcolor: #ffff00;
	--sticky-note-pink-bgcolor: #ffb6c1;
	--sticky-note-cyan-bgcolor: #00ffff;
}
:root.dark{
/*
  @media (prefers-color-scheme: dark) {
*/
	--heading-bgcolor: #116abc;

	--created-bgcolor: #0000aa;
	--pending-bgcolor: #ddaa00;
	--approved-bgcolor: #00aa00;
	--rejected-bgcolor: #aa0000;
	--accepted-bgcolor: #009900;
	--completed-bgcolor: #006600;
	--cancelled-bgcolor: #aaaaaa;

	--applicant-bgcolor: #225522;
	--budget-bgcolor: #0000aa;
	--uklo-bgcolor: #993333;

	--future-bgcolor: #666600;
	--student-bgcolor: #336633;
	--staff-bgcolor: #663366;
	--special-bgcolor: #663366;
	--short-term-bgcolor: #003333;
	--other-bgcolor: #336666;
	--commuter-bgcolor: #006666;

	--free-bgcolor: #1f2127;
	--weekend-bgcolor: #555555;
	--select-bgcolor: #336633;
	--selected-bgcolor: #004400;
	--today-color: #ff0000;
	--excluded-bgcolor: #444444;
	--leeway-bgcolor: #666666;

	--compare-black-color: #000000;
	--compare-red-color: #660000;
	--compare-green-color: #006600;

	--reconciled-color: #008000;
	--unreconciled-color: #dc143c;
	--announce-color: #ec5c29;


	--drop-area-highlight-color: #800080;
	
	--sticky-note-color: #000000;
	--sticky-note-shadow-color: #666666;
/*  } */
}

.created-bgcolor{
	background-color: var(--created-bgcolor);
	color: var(--cell-text-color);
}
.pending-bgcolor{
	background-color: var(--pending-bgcolor);
	color: var(--cell-text-color);
}
.approved-bgcolor{
	background-color: var(--approved-bgcolor);
	color: var(--cell-text-color);
}
.rejected-bgcolor{
	background-color: var(--rejected-bgcolor);
	color: var(--cell-text-color);
}
.accepted-bgcolor{
	background-color: var(--accepted-bgcolor);
	color: var(--cell-text-color);
}
.completed-bgcolor{
	background-color: var(--completed-bgcolor);
	color: var(--cell-text-color);
}
.cancelled-bgcolor{
	background-color: var(--cancelled-bgcolor);
	color: var(--cell-text-color);
}

.applicant-bgcolor{	background-color: var(--applicant-bgcolor);}
.budget-bgcolor{ background-color: var(--budget-bgcolor);}
.uklo-bgcolor{ background-color: var(--uklo-bgcolor);}
/*
.approvals-bgcolor{
	background-color: var(--approvals-bgcolor);
	color: var(--dark-text-color);
}
*/
.future-bgcolor{ background-color: var(--future-bgcolor);}
.student-bgcolor{ background-color: var(--student-bgcolor);}
.staff-bgcolor{ background-color: var(--staff-bgcolor);}
.special-bgcolor{ background-color: var(--special-bgcolor);}
.short-term-bgcolor{ background-color: var(--short-term-bgcolor);}
.other-bgcolor{ background-color: var(--other-bgcolor);}
.commuter-bgcolor{ background-color: var(--commuter-bgcolor);}

.free-bgcolor{ background-color: var(--free-bgcolor);}
.excluded-bgcolor {background-color: var(--excluded-bgcolor);}
.leeway-bgcolor {background-color: var(--leeway-bgcolor);}
.weekend-bgcolor{ background-color: var(--weekend-bgcolor);}
.select-bgcolor{ background-color: var(--select-bgcolor);}
.selected-bgcolor{ background-color: var(--selected-bgcolor);}
.today-color{
	color: var(--today-color);
	border-color: var(--table-border-color);
}

.compare-black-color{ color: var(--compare-black-color);}
.compare-red-color{ color: var(--compare-red-color);}
.compare-green-color{ color: var(--compare-green-color);}

.reconciled-color{ color: var(--reconciled-color);}
.unreconciled-color{ color: var(--unreconciled-color);}
.announce-color{ color: var(--announce-color);}

.drop-area-highlight-color{ color: var(--drop-area-highlight-color);}

/*
* {
  box-sizing: border-box;
}
*/
/*
html, body {
    background-color: var(--main-bg-color);
    color: var(--main-color);
}
body {
	display: table;
	min-width: 100%;
}
h4 {
	margin: 10px 0px 10px 0px;
}
pre {
	font-family: "Courier New", "Courier", monospace;
}
*/

/*
#container {
	background-color: var(--main-bg-color); 
	margin-left:0px;
	margin-right:0px;
}
#main {
	padding:15px 10px 40px 10px;
    border-top: 1px solid var(--main-color);
}
*/
/*
#heading{
    background-color: var(--travel-blue-color);
    color: #ffffff;
    padding: 15px 20px 0px 20px;
    height: 80px;
}
#title{
    text-align: center;
    width: 100%;
}
*/
/*
#announce{
    display: inline-block;
    font-size: 11px;
	margin:10px 0px 0px 0px;
	padding: 3px;
    border: 1px solid var(--border-color);
}
*/
/*---------- Login Form -----------*/

.login-form{
    background-color: var(--heading-bgcolor);
    color: #ffffff;
    padding: 15px 20px 0px 20px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    align: center;
    border: 1px solid #000000;
    border-radius: 5px;
    width: 400px;
}
.login-header {
    color: #ffffff;
	font-size: 18px;
}
.login-text {
    color: #ffffff;
    padding: 5px 0px 5px 0px;
	font-size: 12px;
}
.login-table{
	margin: 0 auto;
}
/*
#footer{
    background-color: var(--travel-blue-color);
    color: #ffffff;
	padding:0px 10px 0px 10px;
	border-top: 1px solid #000000;
	margin-top: 10px;
}
*/
/*td[rowspan] {
/*  vertical-align: top; */
/*  text-align: left;*/
/*} */
/*
.w3-table {
	width: auto;
}
tr {
	height: 30px;
}
td {
	padding: 0px 10px 0px 10px;
}
th {
	padding: 0px 10px 0px 10px;
}
*/

/* Colours */
/*
.bg-default{ background-color: #ffffff;}
.bg-ok{ background-color: #00ff00;}
.bg-grey{ background-color: #cccccc;}
.bg-light-grey{ background-color: #eeeeee;}
.bg-weekend{ background-color: #cce6ff;}
.bg-select { background-color: #ccffcc; }
*/
/*
.code-bgcolor{
    background-color: var(--code-bgcolor);
}
*/
/*
.title-colour { 
	background-color: #116abc;
    color: #ffffff;
}
.error-colour { 
	background-color: var(--error-color); 
}
.text-red{ 
	color: var(--error-color); 
}

.big-box {
    border: 1px solid #000000;
	border-radius: 5px;
	padding: 5px 10px 10px 10px;
	width: fit-content;
}
.button {
	background-color: var(--button-bgcolor);
	color: var(--button-color);
	border: 1px solid var(--button-border-color);
}
.button:hover {
	background-color: var(--button-hover-bgcolor);
	color: var(--button-hover-color);
}
.button-disabled{
	background-color: var(--button-disabled-bgcolor);
	color: var(--button-disabled-color);
}
*/

/*---------- Dashboard -----------*/

.dashboard-box {
	display: inline-block;
    border: 1px solid var(--box-border-color);
	border-radius: 5px;
	padding: 10px 10px 10px 10px;
	margin: 10px 10px 10px 10px;
	width: fit-content;
}
.dashboard-box td {
	padding: 5px 10px 5px 5px;
}
.dashboard-heading {
	font-size: 14pt;
	font-weight: bold;
	margin: auto;
	padding: 10px 10px 0px 10px;
	width: fit-content;
}
/*
.max-height-300 {
	overflow: auto;
	max-height: 300px;
}
*/
/*
.plain-link-white {
	cursor: pointer;
	text-decoration: none;
	color: white;
}
.plain-link-white:visited {
	color: white;
}
*/
/*
.sort-link {
	cursor: pointer;
	text-decoration: none;
	color: var(--table-header-color);
}
.sort-link:hover {
	background: transparent;
}
*/
/*
.action-link {
	cursor: pointer;
    text-decoration: none;
    color: var(--action-link-color);
}
.action-link:hover, .action-link a:active {
    background-color: transparent;
}
.action-disabled {
	color: #cccccc;
}
*/
/*
.inline-link {
	cursor: pointer;
    text-decoration: none;
    color: var(--link-color);
}
*/
/*
.divider-row {
	height: 5px !important;
	border-width: 1px 0px 1px 0px;
}
.sticky	th {
	position: sticky;
	top: 0;
	background: #ffffff;
    border-bottom: 1px solid #aaaaaa;
	padding: 0px 10px 0px 10px;
}
.sticky {
	border-collapse: collapse;
}
.x-scroll {
	overflow-x:auto;
}

.table-header-colors{
    background-color: var(--table-header-bgcolor);
    color: var(--table-header-color);
}
.table-row-color{
    color: var(--table-row-color);
}
*/
/*
.plain-table{
    background-color: var(--code-bgcolor);
	padding: 5px;
}
.editable {
  background: #ffffdd;
}
.editable-border {
	padding-left: 5px !important;
	border: 1px solid #aaaaaa !important;
}
.fixed-table {
	table-layout: fixed;
}
td input{
	background-color: #ffffff;
    color: #000000;
    border-color: #ffffff;
}
*/
/*Setting the table width is important!*/
/*
table.occupancy {table-layout:fixed; width:1060px; word-break:break-all;}
table.occupancy td {overflow:hidden;}
table.occupancy td:nth-of-type(1) {width:140px;}
table.occupancy td:nth-of-type(2) {width:80px;}
table.occupancy td:nth-of-type(3):nth-of-type(58) {width:20px;}
.hidden-row {height:0; margin:0; padding:0; visibility:collapse; line-height:0;}
*/

/*---------- Drop Area -----------*/

.drop-area {
  border: 2px dashed #ccc;
  border-radius: 20px;
  width: 480px;
  font-family: sans-serif;
  margin: 3px;
  padding: 20px;
  text-align: center;
}
.drop-area-highlight {
  border-color: var(--drop-area-highlight-color);
}
/*
.box-section {
    border: 1px solid #aaaaaa;
    padding: 0px 10px 10px 10px;
    margin: 10px 20px 0px 0px;
}
*/
/*---------- Miscellaneous -----------*/

.file-input {
  display: none;
}
.message-div{
	padding: 0px 0px 6px 0px;
}
.plotdiv {
    border: 1px solid #aaaaaa;
    margin: 10px 10px 10px 0px;
    display: inline-block;
}
.three-column-container {
	column-count: 3;
}
/*
.doc-button {
  display: inline-block;
  padding: 2px 4px 2px 4px;
  background: #ffffff;
  border-radius: 5px;
  border: 1px solid #ccc;
}
*/
/*---------- Sticky Notes -----------*/

.sticky-notes {
	width: 100%;
	height: 100%;
	display: flex;
	flex-flow: row wrap; /* Align on the same line */
	align-items: center;
}	
.sticky-note {
	color: var(--sticky-note-color);
	border: 1px solid var(--border-color);
	border-radius: 5px;
	display: inline-block;
	box-shadow: 10px 10px var(--sticky-note-shadow-color);
	width: 300px;
	height: 300px;
	margin: 15px;
	padding: 5px;
	Overflow: hidden;
}
.sticky-note-header {
	width: 100%;
	border-bottom: 1px solid var(--dark-border-color);
	padding-bottom: 5px;
	margin-bottom: 5px;
	display: flex;
	flex-flow: row nowrap; /* Align on the same line */
	justify-content: space-between; /* Equal margin between the child elements */
	align-items: center;
}
.sticky-note-sharing {
	cursor: pointer;
}
.sticky-note-editing {
	cursor: pointer;
}
.sticky-note textarea {
	width: 100%;
	height: 85%;
}
.sticky-note-details {
	white-space: pre-wrap;
}
.sticky-note-circle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
	border: 1px solid var(--dark-border-color);
	display: inline-block;
	margin: 0px 0px -1px 0px;
	cursor: pointer;
}
.sticky-note-green {
	background-color: var(--sticky-note-green-bgcolor);
}
.sticky-note-yellow {
	background-color: var(--sticky-note-yellow-bgcolor);
}
.sticky-note-pink {
	background-color: var(--sticky-note-pink-bgcolor);
}
.sticky-note-cyan {
	background-color: var(--sticky-note-cyan-bgcolor);
}
/*
.circle-green {
    background: #90ee90;
}
.circle-yellow {
    background: #ffff00;
}
.circle-pink {
    background: #ffb6c1;
}
.circle-cyan {
    background: #00ffff;
}
*/
/*
.no-link {
	text-decoration: none;
	color: #000000;
}
*/
/*
.text-color-black {
	color: #000000;
}
.text-color-red {
	color: #ff0000;
}
.text-color-green {
	color: #00aa00;
}
*/
/*
a.linkbox:link, a.linkbox:visited {
    color: var(--button-color);
    background-color: var(--button-bgcolor);
    border: 1px solid var(--button-color);
}
a.linkbox:hover, a.linkbox:active {
    background-color: var(--button-hover-bgcolor);
    border: 1px solid var(--button-border-color);
}
*/
/*
input[type="submit"] {
    display: inline-block;
	font-size: 11px;
    color: var(--button-color);
    background-color: var(--button-bgcolor);
    border-radius: 6px;
	min-width: 50px;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    white-space:nowrap;
    border: 1px solid var(--button-border-color);
}

input[type="submit"]:hover,input[type="submit"]:active {
    background-color: var(--button-hover-bgcolor);
    border: 1px solid var(--button-hover-color);
}
*/

/*
table a:hover, table a:active {
    background-color: #E3F2FD;
}
>>>>>>> master
nav {
	background-color: #333333;
	margin-bottom: 0px;
}
nav ul {
	background-color: #333333; 
	z-index: 1000;
}
nav ul ul {
	top: 30px;
}

nav ul ul li {
	background-color: #333333; 
}
nav ul li:hover {
	background-color: #4b545f;
}
nav ul li:hover a {
	color: #ffffff;
}
nav ul ul li a:hover {
	background-color: #4b545f;
}
*/

/*
.togglebox {
    display: inline-block;
	font-size: 11px;
    color: #ffffff;
    color: #000000;
    background-color: #96a0b0;
    background-color: #ffffff;
    border-radius: 6px;
	min-width: 50px;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    white-space:nowrap;
    border: 1px solid #aaaaaa;
}
.togglebox:hover {
    background-color: #dddddd;
    border: 1px solid #cccccc;
}
*/

/* Tooltips */

/* Tooltip container */
.tooltip {
	position: relative;
	display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
	visibility: hidden;
	width: 200px;
	background-color: black;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;	
	margin-left: -100px; 
	position: absolute;
	z-index: 1;
	bottom: 150%;
	left: 50%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  border-width: 8px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.show {
	display: inline-block;
}
.hide {
	display: none;
}
/* Help Pages */