/*
	FirstPoint Colour Guide
	Light Blue: #DEEBF7
	Medium-Light: #75AFFF
	Medium-Dark: 0067B0 (original FP colour)
	Dark Blue: #0070C0
	Grey: #EEEEEE
	Dark Grey: #A6A6A6
*/

html { height: 100%; }

body {
	display: flex;
	flex-direction: column;
	font-family: Arial, sans-serif;
	font-size: 12pt;
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: #f0f2f5; /* Light grey background for the page */
    color: #333;
    overflow-y: auto;

}
/* General body styling */
/*
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    height: 100%;
    overflow: hidden;
}
*/
details {
	border: 1px #CCCCCC solid;
	border-radius: 10px;
	margin: 3px;
		box-shadow: 0 0 6px #0070C0;
}

details > summary {
	border-radius: 10px;
	font-weight: bold;
	padding: 5px;
}

details > summary > img {
	width: 32px;
	height: auto;
}

header {
	align-items: center;
	color: #FFFFFF;
	background-color: #0067B0;
	display: grid;
	font-weight: bold;
	font-size: 20pt;
	grid-template-columns: auto auto;
	width: 100%;
}

header > div {
	display: flex;
	padding: 5px;
}

header > div > span {
	align-self: center;	
}

header > div:last-child {
	justify-content: right;
	text-align: right;
}

header > div > img, .dropdown > img {
	height: 32px;
	width: 32px;
	padding: 5px;
}

header > div > img:hover, .dropdown > img:hover {
	cursor: pointer;
}

input[type=submit], input[type=button] {
	color: #FFFFFF;
	background: #0070C0;
	border: 1px #0070C0 solid;
	font-family: Arial, sans-serif;
	font-size: 14pt;
	padding: 5px;
}

input[type=checkbox] {
	width: 20px;
	height: 20px;
	margin: 3px;
}
input.danger[type=submit], input.danger[type=button] {
	background: #FF0000;
	border: 1px #FF0000 solid;	
}

select, input {
	color: #000000;
	background-color: #FFFFFF;
	border: 1px #0070C0 solid;
	font-family: Arial, sans-serif;
	font-size: 14pt;
	padding: 5px;
}

select[disabled=disabled], input[disabled=disabled] {
	color: #A6A6A6;
	background-color: #EEEEEE;
	border: 1px #A6A6A6 solid;
}

.disabled-button {
     opacity: 0.5;
     pointer-events: none;
     transition: opacity 0.3s;
   }

input:hover {
	cursor: pointer;
}

div.oneColumn, div.twoColumn {
	display: flex;
	width: 99vw;
	min-height: 93vh;
	vertical-align: top;
}

div.tableCell {
	display: inline-table;
	margin: 10px;
	padding: 10px;
}

div.blockCell {
	display: block;
	margin: 10px;
	padding: 10px;
}

div.fileSelector {
	text-align: center;
}

.singleSelector {
	width: 20%;	
}

.twinSelector {
	width: 47.5%;
	height: 100%;
}

div.fileSelector > div {
	align-items: center;
	background-color: #DEEBF7;
	display: flex;
	font-size: 10pt;
	margin: 5px;
	text-align: left;
}

div.fileSelector > div:first-child {
	margin-top: revert;
}

div.fileSelector > div:hover {
	background-color: #EEEEEE;
}

div.fileSelector > div > img {
	height: 24px;
	width: auto;
	margin: 5px;
}

div.dataSelector {
	width: 80%;
}

div.dataViewer {
	width: 100%;
}

.bordered {
	border: 1px #0070C0 solid;	
}

.fillSpace {
	width: 100%;
	height: 100%;
	text-align: center;
	vertical-align: top;
}

.leftAligned {
	text-align: left;
}

.scrollable {
	overflow-y: scroll;	
}

div.dataSelector > div, div.dataViewer > div {
	margin-bottom: 10px;
	padding: 10px;
	width: 100%
}

p.placeholder {
	color: #A6A6A6;
	font-size: 18pt; 
	font-weight: normal;
	text-align: center;
}

object {
	width: 100%;
	height: 100%;
}

span.information {
	font-size: 12pt;
	font-weight: normal;
}

table {
	width: 100%;
	border-collapse: collapse;
}

th {
	color: #FFFFFF;
	background-color: #0070C0;
	font-family: Arial, sans-serif;
	font-size: 14pt;	
	padding: 5px;
}

td {
	padding: 5px;	
	/*text-align: center;
	vertical-align: middle;*/
}

td > img {
	height: 24px;
	width: auto;
}

tr:nth-child(even){
	background-color: #DEEBF7;
}

tr:hover {
	background-color: #EEEEEE;
}
/*
div[data-selected=selected] {
	background-color: #75AFFF !important;
	color: #FFFFFF;
}
*/
div.drag-object {
	padding: 10px;
	cursor: move;
	z-index: 10;
	background-color: #2196F3;
	color: #fff;
}

div.drag-new-object {
	background-color: rgb(255, 128, 64) !important;
}

div.drag-new-object > h3{
	background-color: rgb(255, 128, 64) !important;
}
div.fixed-height {
    display: flex;
    height: 100%;
}

div.grid-container {
  display: grid;
  grid-template-columns: 50% 49%;
  gap: 5px;
}

div.grid-container > div {
  margin-bottom: 5px;
  padding: 5px;
  text-align: left;
}

div.grid-item {
  margin: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
}

div.grid-item > label {
  display: inline-block;
  width: 120px;
  text-align: right;
}

div.grid-item > input {
	font-family: Arial, sans-serif;
	font-size: 11pt !important;
	padding: 5px;
	margin: 5px;
}

div.grid-item > input[type=text] {
	width: 70%;
}
div.fixed-max-height {
	max-height: 100%;
	overflow-y: auto;
}

@media screen and (max-width: 2190px) and (min-width: 1900px){
	div.grid-item > input[type=text] {
		width: 60%;
	}
}
@media screen and (max-width: 1900px) and (min-width: 1500px) {
	div.grid-item > input[type=text] {
		width: 50%;
	}
}
@media screen and (max-width: 1500px) and (min-width: 900px) {
	div.grid-item > input[type=text] {
		width: 40%;
	}
}
div[hidden] {
    display: none !important;
}

div.scroll {
    display: flex;
    height: 100%;
  	overflow-y: auto;
  	overflow-x: hidden;
}

div.scroll::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

div.scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 5px;
}

div.scroll::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

div.scroll::-webkit-scrollbar-thumb:horizontal {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    border-radius: 5px;
}