@import url('icons.css');

/*body {
	position:relative;
	height:auto !important;
	height:100%;
	min-height:100%;
	width:100%;
	margin:0px;
	padding:0px;
	background:url('images/bg.gif');
    color:#333;
	font-family:Verdana, "DejaVu Sans";
	font-size:11px;
}*/
body {
    position: relative;
    height: 100%; 
    width: 95%;
    margin: 0;
    padding: 0;
    background: url('/themes/dcore/images/bg.gif') no-repeat center center fixed;
    background-size: cover; /* Ensures the background covers the entire area */
    color: #333;
    font-family: Verdana, "DejaVu Sans", sans-serif;
    font-size: 11px;
    flex: 1;
}

a {
	color:#999;
}

a img {
	border:none;
}

html {
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
}

#footer {
	position:absolute;
	bottom:0px;
	width:100%;
	border-top: 1px solid #dfdfdf;
	background:#fff;
}

#footer_text {
	padding:5px;
	text-align:right;
}

#footer_text .name {
	color:#999;
}

#content {
	padding:10px 4px 30px 150px;
}

#content.horizontal {
	padding:10px 4px 30px 50px;
	width: 100%;
	height: 88%;
	flex: 1;
}

#login_form {
	width:300px;
	text-align:right;
	margin-top:60px;
	margin-left:auto;
	margin-right:auto;
}

#login_form .tf {
	width:150px;
}

#login_form .ib_c {
	height:100px;
}

input {
	border:1px solid #dfdfdf;
	margin:1px;
	color:#666;
	background-color:#fafafa;
	padding:0px 2px 0px 2px;
	font-size:11px;
}

input:disabled {
	background-color:#eee;
	border:1px solid #ccc;
	color:#555;
}

select {
	border:1px solid #dfdfdf;
	margin:1px;
	color:#666;
	background-color:#fafafa;
	padding:0px 2px 0px 2px;
	font-size:11px;
}

textarea {
	border:1px solid #dfdfdf;
	margin:1px;
	color:#666;
	background-color:#fafafa;
	padding:0px 2px 0px 2px;
	font-size:11px;
	font-family:Verdana, "DejaVu Sans", Tahoma;
}

textarea.raw {
	font-family:monospace;
	color:#666;
	font-size:12px;
}

label {
    color:#777;
}

.exception {
	text-align:left;
}

.fr {
	clear:both;
	margin:5px 0px 5px 0px;
	height:15px;
}

.fr img.icon {
	float:left;
	margin-right:5px;
}

.fr .frl {
	float:left;
	color:#fff;
}

.fr.mid .frl {
	width:50%;
}

.fr .frt {
	text-align:center;
	font-weight:bold;
}

.fr .frt img.icon {
	float:none;
	position:relative;
	top:3px;
	margin:0px;
}

.state_good {
	color:#00dd44;
	font-weight:bold;
}

.state_bad {
	color:red;
}

.dtable {
	background:#222;
	border:1px solid #333;
	padding:5px;
}

.highlight, .highlight a {
	color:#000;
	font-weight:bold;
}

#header {
	padding-top:20px;
	height:60px;
	border-bottom:1px solid #ccc;
}

#menu {
	float:left;
	background-color:#fff;
	margin-right:10px;
	padding-top:5px;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
}

#menu.horizontal {
	float:none;
	background:none;
	border:none;
	margin:none;
	padding-top:0px;
	padding-left: 30px;
	padding-bottom: 20px;
}

#menu.horizontal ul li a {
	background:url('/images/button_blue_hor.png') no-repeat;
	width:109px;
	height:28px;
	color:#fff;
	font-weight:bold;
	font-size:14px;
	font-family:Arial,Verdana, "DejaVu Sans";
	text-align: center;
	padding-right: 1px;
	line-height:28px;
	text-decoration:none;
}

#menu.horizontal ul li {
	float:left;
}

#menu ul {
	list-style-type:none;
	margin:0px;
	padding:0px 15px 15px 15px;
}

#menu ul li a {
	display:block;
	background:url('/images/button_blue.png') no-repeat;
	width:109px;
	height:33px;
	color:#fff;
	font-weight:bold;
	font-size:14px;
	font-family:Arial,Verdana, "DejaVu Sans";
	text-align:left;
	line-height:33px;
	text-decoration:none;
}

#menu a.menuamber {
	background:url('/images/button_amber.png') no-repeat;
}

#menu ul li {
	padding-top:5px;
}

#menu.horizontal ul li {
	padding-top:0px;
}

#menu ul li a img.icon {
	float:left;
	margin-left:8px;
	margin-top:8px;
	margin-right:5px;
}

#menu.horizontal ul li a img.icon {
	float:none;
	margin-left:4px;
	margin-top:4px;
	margin-right:2px;
}

#header {
	background-color:#fff;
}

#subheader {
	margin-top:43px;
}

#subheader .topForm {
	margin-left:5px;
	margin-top:5px;
}

.hor_sep {
	background-color:#ff8401;
	height:4px;
	font-size:0px;
}

.ib .title {
	font-weight:bold;
	font-size:12px;
	padding:3px;
	text-decoration:underline;
	text-align:center;
}

.team_spec {
	color:#fff;
}

.team_red {
	color:#aa0000;
}

.team_blue {
	color:#2277ff;
}

.team_blue.team_idle {
	color:#114477;
}

.team_red.team_idle {
	color:#550000;
}

tr.subtitle th {
	color:#999;
}

.log_frame {
	height:300px;
	overflow-x:auto;
}

.console_frame {
	height:400px;
	overflow-x:auto;
	font-family:"Lucida Console", "Courier New", Consolas;
	font-size:12px;
}

.ib .ib_t .icon {
	margin-bottom:-4px;
}

input.sbim {
	position:relative;
	top:5px;
	margin-top:-5px;
}

span.additional {
	color:#666;
}

.msc {
	padding:2px;
}

.ms {
	background-color:red;
	padding-bottom:2px;
}

.ms img {
	float:left;
	position:relative;
	bottom:12px;
	left:3px;
}

.msc.confirm {
	border:1px solid #70b546;
}

.msc.warning {
	border:1px solid #b48204;
}

.msc.error {
	border:1px solid #c64c4c;
}

.msc.warning .ms {
	background-color:#e2a400;
	color:#fff;
}

.msc.confirm .ms {
	background-color:#70b546;
	color:#fff;
}

.msc.error .ms {
	background-color:#c64c4c;
	color:#fff;
}

.msl {
	text-align:center;
	font-weight:bold;
	padding-top:5px;
	padding-bottom:3px;
}

.ftable td {
	height:23px;
}

.ftable th.title {
	border:none;
}

.notice {
	font-size:10px;
	color:#aaa;
}

div.notice {
	clear:both;
}

ul.title_menu {
	position:relative;
	top:3px;
}

/* IE fix */
ul.title_menu li {
	display:inline;
	margin:3px;
}

ul.title_menu li a, a.menu_button {
	padding:5px 7px 5px 7px;
	border:1px solid #dfdfdf;
	background-color:#fff;
	margin:1px;
	text-decoration:none;
	font-size:11px;
	margin-bottom:8px;
}

ul.title_menu li a img, a.menu_button img {
	vertical-align:middle;
	padding-bottom:2px;
}

a.menu_button {
	display:block;
	float:left;
}

ul.title_menu {
	padding:10px;
	display:inline;
}

div.title {
	font-size:16px;
	font-weight:bold;
	line-height:30px;
	padding-left:10px;
	height:38px;
}

div.title .title_notice {
	font-size:12px;
	color:#aaa;
}

#msg {
	position:fixed;
	top:60px;
	left:50%;
	margin-left:-175px;
	width:350px;
}

hr {
	border-color:#dfdfdf;
}

table td.label img.icon {
	margin-bottom:-4px;
}

.ftable td img.icon {
	margin-bottom:-2px;
}

.label {
	color:#777;
}

input.sbc {
	border:none;
	background:#333;
	padding:3px;
	border:1px solid #444;
}

.loading {
	background:url('images/loader.gif') center no-repeat;
	height:24px;
}

table.ftable {
	background-color:#fff;
	border:1px solid #dfdfdf;
	padding:10px 5px 8px 5px;
	margin: 0px 3px 3px 0px;
}

table.ftable th {
	color:#999;
	font-family:Arial,Helvetica;
	font-size:12px;
	border-bottom:1px solid #ddd;
	padding:0px 0px 2px 0px;
}

table.ftable tr.hr {

}

.exception {
	padding:10px;
}

.exception h3 {
	margin:0px;
	padding:10px 0px 10px 0px;
}

.topForm {
	background-color:#fff;
	border:1px solid #dfdfdf;
	padding:10px 5px 8px 5px;
	width:800px;
}

.topForm h3 {
	margin-top:0px;
}

.ltable {
	width:100%;
	/* max-width:912px; */
	margin-top:4px;
#	padding:2px 2px 8px 2px;
	background-color:#999;
#	border:1px solid #dfdfdf;
	margin:0px 3px 3px 0px;
	text-align:center;
}

.ltable tr {
	margin-top:3px;
	background-color:#fff;
}

.ltable tr.nohover:hover td {
	background-color:#fff;
}

.ltable th, .ltable td {
	padding-left:1px;
	padding-right:1px;
	height:18px;
	background-color:#fff;
	font-size:10px;
}

.ltable th, .itable th {
	height:22px;
	background:url('images/table_head.png') no-repeat #ffd000;
	color:#333;
}

.ltable tr.subtitle th {
#	border-bottom:1px solid #dfdfdf;
	padding-bottom:2px;
	background:#fff;
	height:22px;
	line-height:22px;
	font-size:11px;
}

.ltable tr.sumtitle td {
#	border-top:1px solid #dfdfdf;
	padding-bottom:2px;
}

.ltable tr.no_results td {
	text-align:center;
	font-style:italic;
	color:#999;
	font-size:10px;
}

.itable {
	max-width:912px;
	margin-top:4px;
	padding:2px 2px 8px 2px;
	background-color:#fff;
	border:1px solid #dfdfdf;
	margin:0px 3px 3px 0px;
}

.itable td {
	height:20px;
}

.itable tr.tmenu td {
	text-align:center;
	background-color:#fcfcfc;
}

.itable tr.tmenu img.icon {
	float:left;
}

.itable tr.tmenu td a {
	text-decoration:none;
	color:#666;
	font-weight:bold;
}

.clickable {
	cursor:pointer;
}

span.information {
	color:#999;
}

tr.bill_status_ready td {
	background-color:#fffedf;
}

.bill_status_ready {
	color:#c6ab3d;
}

tr.green_status td, .ltable tr.green_status:hover td {
	background-color:#f8fff0;
}

.bill_status_paid {
	color:#7ec63d;
}

tr.red_status td {
	background-color:#ffe9e9;
}

span.bill_status_overdue {
	color:#cb3a3a;
	font-weight:bold;
}

/* The main calendar widget.  DIV containing a table. */

div.calendar { position: relative; }

.calendar, .calendar table {
  border: 1px solid #556;
  font-size: 11px;
  color: #000;
  cursor: default;
  background: #eef;
  font-family: tahoma,verdana,"DejaVu Sans", sans-serif;
}

/* Header part -- contains navigation buttons and day names. */

.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
  text-align: center;    /* They are the navigation buttons */
  padding: 2px;          /* Make the buttons seem like they're pressing */
}

.calendar .nav {
  background: #778 url(menuarrow.gif) no-repeat 100% 100%;
}

.calendar thead .title { /* This holds the current "month, year" */
  font-weight: bold;      /* Pressing it will take you to the current date */
  text-align: center;
  background: #fff;
  color: #000;
  padding: 2px;
}

.calendar thead .headrow { /* Row <TR> containing navigation buttons */
  background: #778;
  color: #fff;
}

.calendar thead .daynames { /* Row <TR> containing the day names */
  background: #bdf;
}

.calendar thead .name { /* Cells <TD> containing the day names */
  border-bottom: 1px solid #556;
  padding: 2px;
  text-align: center;
  color: #000;
}

.calendar thead .weekend { /* How a weekend day name shows in header */
  color: #a66;
}

.calendar thead .hilite { /* How do the buttons in header appear when hover */
  background-color: #aaf;
  color: #000;
  border: 1px solid #04f;
  padding: 1px;
}

.calendar thead .active { /* Active (pressed) buttons in header */
  background-color: #77c;
  padding: 2px 0px 0px 2px;
}

/* The body part -- contains all the days in month. */

.calendar tbody .day { /* Cells <TD> containing month days dates */
  width: 2em;
  color: #456;
  text-align: right;
  padding: 2px 4px 2px 2px;
}
.calendar tbody .day.othermonth {
  font-size: 80%;
  color: #bbb;
}
.calendar tbody .day.othermonth.oweekend {
  color: #fbb;
}

.calendar table .wn {
  padding: 2px 3px 2px 2px;
  border-right: 1px solid #000;
  background: #bdf;
}

.calendar tbody .rowhilite td {
  background: #def;
}

.calendar tbody .rowhilite td.wn {
  background: #eef;
}

.calendar tbody td.hilite { /* Hovered cells <TD> */
  background: #def;
  padding: 1px 3px 1px 1px;
  border: 1px solid #bbb;
}

.calendar tbody td.active { /* Active (pressed) cells <TD> */
  background: #cde;
  padding: 2px 2px 0px 2px;
}

.calendar tbody td.selected { /* Cell showing today date */
  font-weight: bold;
  border: 1px solid #000;
  padding: 1px 3px 1px 1px;
  background: #fff;
  color: #000;
}

.calendar tbody td.weekend { /* Cells showing weekend days */
  color: #a66;
}

.calendar tbody td.today { /* Cell showing selected date */
  font-weight: bold;
  color: #00f;
}

.calendar tbody .disabled { color: #999; }

.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
  visibility: hidden;
}

.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
  display: none;
}

/* The footer part -- status bar and "Close" button */

.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
  text-align: center;
  background: #556;
  color: #fff;
}

.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
  background: #fff;
  color: #445;
  border-top: 1px solid #556;
  padding: 1px;
}

.calendar tfoot .hilite { /* Hover style for buttons in footer */
  background: #aaf;
  border: 1px solid #04f;
  color: #000;
  padding: 1px;
}

.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
  background: #77c;
  padding: 2px 0px 0px 2px;
}

/* Combo boxes (menus that display months/years for direct selection) */

.calendar .combo {
  position: absolute;
  display: none;
  top: 0px;
  left: 0px;
  width: 4em;
  cursor: default;
  border: 1px solid #655;
  background: #def;
  color: #000;
  font-size: 90%;
  z-index: 100;
}

.calendar .combo .label,
.calendar .combo .label-IEfix {
  text-align: center;
  padding: 1px;
}

.calendar .combo .label-IEfix {
  width: 4em;
}

.calendar .combo .hilite {
  background: #acf;
}

.calendar .combo .active {
  border-top: 1px solid #46a;
  border-bottom: 1px solid #46a;
  background: #eef;
  font-weight: bold;
}

.calendar td.time {
  border-top: 1px solid #000;
  padding: 1px 0px;
  text-align: center;
  background-color: #f4f0e8;
}

.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
  padding: 0px 3px 0px 4px;
  border: 1px solid #889;
  font-weight: bold;
  background-color: #fff;
}

.calendar td.time .ampm {
  text-align: center;
}

.calendar td.time .colon {
  padding: 0px 2px 0px 3px;
  font-weight: bold;
}

.calendar td.time span.hilite {
  border-color: #000;
  background-color: #667;
  color: #fff;
}

.calendar td.time span.active {
  border-color: #f00;
  background-color: #000;
  color: #0f0;
}

img.icon {
	background-image:url('images/icons.png');
	background-repeat:none;
	height:16px;
	width:16px;
}

.topForm {
	margin-bottom:3px;
}

.nobreak {
	white-space: nowrap;
}

.ltable a {
	color:#333;
}

.ltable tr:hover td {
	background-color:#c3d9ed;
}

.ltable tr.sumtitle:hover td {
	background-color:#fff;
}

pre.log {
	width:903px;
	border:1px solid #dfdfdf;
	background-color:#fafafa;
	overflow:hidden;
	padding:3px;
}

.hidden {
	display:none;
}

#debug {
	position:absolute;
	top:60px;
	right:30px;
	background-color:#ffe8cc;
	border:1px solid #999;
	opacity:0.8;
	padding-left:5px;
	padding-right:5px;
}

#debug h2 {
	padding-left:10px;
	padding-right:10px;
}

#debug pre {
	background-color:#fefefe;
	border:1px solid #aaa;
	color:#000;
	padding:3px;
	max-width:600px;
	overflow:auto;
}

#debug a.close {
	float:right;
	color:#000;
	text-decoration:none;
}

#debug .exception {
	padding:0px;
}

#fsBackground {
	width:100%;
	height:100%;
	z-index:900;
	background:#000;
	position:absolute;
	top:0px;
	opacity:0.5;
}

#fsContainer {
	width:100%;
	height:80%;
	z-index:900;
	position:absolute;
	top:0px;
}

#fsMessage {
	width:300px;
	height:16px;
	z-index:950;
	background:#ddd;
	margin:auto;
	text-align:center;
	vertical-align:middle;
	padding:5px;
	border:1px solid #999;
	color:#333;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-8px;
	margin-left:-150px;
}

#fsDynamicMessage {
	z-index:950;
	background:#eee;
	text-align:center;
	vertical-align:middle;
	padding:5px;
	border:1px solid #aaa;
	color:#333;
	position:absolute;
	top:50%;
	left:50%;
}

h3 {
	padding-left:10px;
	margin-bottom:3px;
}

#logo {
	position:absolute;
	left:50%;
	margin-left:-94px;
	top:10px;
}

input.cb {
	background:none;
	border:none;
}

form {
	margin:0px;
}

.grey_status td {
	background-color:#cacaca;
}

.yellow_status td {
	background-color:#FFFFCC;;
}

.ltable td.green_status_td {
	background-color:#99FF99;; // #f8fff0;
}

.progress {
	width:130px;
	position:relative;
	height:20px;
	border:1px solid #666;
	margin-right:10px;
}

.progress_inner {
	background-color:#74ac47;
	position:absolute;
	top:1px;
	left:1px;
	height:18px;
}

#peek_logo {
	position:absolute;
	top:20px;
	left:80%;
	margin-left:-100px;
}

#clock {
	position:absolute;
	left:300px;
	top:25px;
	font-size:20px;
	font-weight:bold;
	width:100px;
	text-align:center;
}
#swfclock {
	position:absolute;
	left:400px;
	top:10px;
	font-size:20px;
	font-weight:bold;
	width:100px;
	text-align:center;
}

#date {
	position:absolute;
	left:300px;
	top:50px;
	font-size:12px;
	color:#999;
	width:100px;
	text-align:center;
}

iframe {
	padding:0px;
	margin:0px;
	border:0px;
}

img.icon.cal {
	margin-bottom:-4px;
}

td img.icon, th img.icon {
	vertical-align:text-top;
}

span.ajax_loading {
	color:#882c2c;
}

.legend {
	height:12px;
	display:inline;
	border:1px solid #666;
	padding-left:14px;
	margin-left:6px;
	margin-right:3px;
}

.legend.black_status {
	background-color:black;
}

.legend.grey_status {
	background-color:grey;
}

.legend.yellow_status {
	background-color:yellow;
}

.legend.green_status {
	background-color:green;
}

.legend.red_status {
	background-color:red;
}

#fsDynamicMessage .ltable {
	margin:0px;
}

#activeUser {
	font-size:12px;
	width:200px;
	text-align:center;
	position:absolute;
	top:60px;
	left:0px;
}

td a.menu_button {
	float:none;
	display:inline;
}

.osm_map {
	cursor:crosshair;
}

.row-duplicate {
	float:left;
	padding-right:5px;
}

.row-remove {
	float:right;
}

/*#osm-container .osm-legend {
	display:none;
}

*/

/* Osm Container Adjustments */
#osm-container, #osm-map {
    flex: 1; /* Allows the container to grow and fill the map-section */
    position: relative;
/*    width: 100%; */ /* Already responsive */
    height: 100%; /* Fills the parent (.map-section) */
    background: white;
    overflow: hidden; /* Prevent internal scrollbars */
}

#osm-container.fullscreen .osm-legend {
	display:block;
	height:30px;
	z-index:100;
	line-height:30px;
	float:right;
	padding-right:30px;
	position:absolute;
	top:0px;
	right:0px;
	background:white;
	border-bottom:1px solid #999;
	border-left:1px solid #999;
}

/*#osm-container, #osm-map {
	width:800px; 
	width:100%;
	height:600px; 
	height:50%;
	background:white;
}

*/

/* Map */
/*
#osm-map {
    width: 100%; 
    height: 85vh;
    background: white;
    border: 1px solid #ccc; 
    border-radius: 4px; 
}
*/
#osm-container.fullscreen {
	margin: 0;
	width: 100%;
	height: 100%;
	position:absolute;
	top:0px;
	left:0px;
}

#osm-container.fullscreen #osm-map {
	margin: 0;
	width: 100%;
	height: 100%;
	position:absolute;
	top:0px;
	left:0px;
	z-index:0;
}
/* Flexbox Container */
.container {
    display: flex;
    flex-direction: column;
    height: 100%; /* Full viewport height */
    width: 100%;
}
/* Map Section */
.map-section {
    flex: 1; /* Takes up all remaining space */
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 10px; /* Optional: Add padding for inner spacing */
}

/*.container, .map-section, #osm-container, #osm-map {
    border: 3px solid red; /* Temporary: Remove after debugging */
}
*/