/* Variables */
:root{
    --cpListWid: 160px; /* Control Panel List width */
    --cpWid: 312px;     /* Control Panel width */
    --infoHt: 20px;
/* CommandTree */
    --ctWid: 220px;     /* Command Tree width */
    --ctSplitWid: 5px;  /* Command Tree Splitter width */
/* htShrink. For what ever reason the layout of the BC will be slightly
   larger than browser window size. This creates an annoying scroll bar to
   scroll up and down those few pixels. So instead of 100% height we hack a
   slightly smaller than 100% height. */
    --htShrink: 4px;
/* Calculate the width the openlayers map has avaliable. When various gui
   elements are hidden this value is updated in CliDoc.ts::initHtmlGuiCode().
   If this value changes, update that code too! */
    --mapWid: calc(100% - var(--cpListWid) - var(--cpWid) - var(--ctWid) - 4px);
}


/*
/////////////////
// Generic Widgets
/////////////////
*/

/* Button that looks like a hyperlink */
.doCeReport, .doUnitReport {
    background: none;
    border: none;
    color: #0051de;
    font-size: 14px;
    padding: 0px;
    cursor: pointer;
}

/* Tooltip div */
#tooltip {
    font-size: 12px;
    color: #222;
    background-color: #f6f0f0;
    padding: 2px;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
}

/* Cursor text */
#cursorText {
    position: absolute;
    font-size: 12px;
    background-color: #fffa;
    border-radius: 7px;
    padding: 3px 5px;
    /* Do not consume mouse clicks, pass them on */
    pointer-events: none;
    /* Do not allow selection of the cursor text */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Half circle button */
.hideLeftButton {
    position: absolute;
    z-index: 1;  /* place on top of the OpenLayers map */
    width: 15px;
    height: 30px;
    background-color: '#888';
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    border: 2px solid black;
    border-left: 0;
}

/* Move the OpenLayers Zoom controls down a bit */
.ol-zoom {
    top: 36px;
}


/* Add 10 pixels of horizontal space */
.hspace10 { width: 10px; }


/*
/////////////////
// ControlPanel Widgets
// All control panel widgets should use these styles
/////////////////
*/
/* == Group Box == */
.cpLegend {
    font-size: 12px;
    font-weight: bold;
    color: #888;
}
.cpFieldSet {
    font-size: 12px;
    width: 90%;
}
/* cpFieldSetLeft and cpFieldSetRight can be side by side in a Control Panel */
.cpFieldSetLeft {
    font-size: 12px;
    float: left;
    padding: 6px 2px;
}
.cpFieldSetRight {
    font-size: 12px;
    float: right;
    padding: 6px 2px;
}

/* == Button to show more GUI elements == */
.cpButtonShowGui {
    border: none;
    margin: 2px;
    padding: 10px 20px 10px 10px; /* trbl */
    font-size: 12px;
    background: linear-gradient(120deg, #c5b7a9, #dfd1c1 80%, transparent 80%);
    /* Do not allow selection of the text */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.cpButtonShowGui:hover {
    background: linear-gradient(120deg, #d4c9be, #e6dcd0 80%, transparent 80%);
}
.cpButtonShowGui:active { position: relative; top: 1px; left: 1px; }

/* == Button == */
.cpButton {
    transition: 400ms;
    background-color: #adcdb6;
    border-radius: 4px;
    border: 1px solid #425c45;
    color: #051401;
    font-size: 12px;
    padding: 2px 6px;
    box-shadow: 2px 2px 3px -1px;
    /* Do not allow selection of the text */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.cpButton:hover { background-color: #7dadb6; }
.cpButton:active { position: relative; top: 1px; left: 1px; }

/* Table to align buttons */
.cpButtonTable {
    border-spacing: 2px 10px;
}
/* Table to align combo boxes */
.cpComboTable {
    border-spacing: 2px 2px; /* tb lr */
}

/* == Radio == */
/* Don't show the acutaly circle radio for CP Radios. The label styling
   below will handle it all. */
.cpRadioInput { display: none; }
/* Control Panel Radio buttons - One of these may have CONTEXT
   Default non selected style for CP radio labels. This style will transition
   to the style below when the radio is clicked */
.cpRadioLabel {
    transition: 300ms;
    font-size: 12px;
    background: #dbe2ed;
    padding: 2px 3px;
    border-style: solid;
    border-width: 2px;
    border-color: #ccccdd;
    border-radius: 8px;
    /* Do not allow selection of the text */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.cpRadioLabel:hover { background: #cbd2dd; }

/* When cpRadioInput is checked have all sibling elements with class cpRadioLabel
   use the following style. Note cpRadioLabel will transition to this style. */
.cpRadioInput:checked ~ .cpRadioLabel {
    transition-timing-function: ease-out;
    background: #8ab4d2;
    padding: 2px 8px;
    border-color: #444;
}

/* Label for a secondary Radio Group - not one of the main contexts.
   Overrides base cpRadioLabel colors above. */
.cpRadioLabelSecondary {
    background: #feddc0;
    border-color: #e4c5a8;
}
.cpRadioLabelSecondary:hover { background: #eacbaf; }
.cpRadioInput:checked ~ .cpRadioLabelSecondary {
    background: #e8b790;
    border-color: #b88760;
}


/* == CheckBox == */
/* Control Panel Check buttons - default/unchecked style.
   This style will transition to the style below when checked */
.cpCheckLabel {
    transition: 200ms;
    font-size: 12px;
    background: #f4f4f4;
    padding: 2px 3px;
    border-radius: 4px;
    /* Do not allow selection of the text */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* When cpCheckInput is checked have all sibling elements with class
   cpCheckLabel use the following style.
   Note cpCheckLabel will transition to this style. */
.cpCheckInput:checked ~ .cpCheckLabel {
    transition-timing-function: ease-out;
    background: #80de80;
    padding: 2px 8px;
    border-radius: 8px;
}
/* Grey out the text when disabled */
.cpCheckInput:disabled ~ .cpCheckLabel {
    transition-timing-function: ease-out;
    color: #888;
}

/* == ComboBox == */
/* Generic Control Panel Combo Boxes */
.cpComboBox {
    font-size: 11px;
}

/* Movement Node Combo Boxes */
.moveComboBox {
    font-size: 10px;
    width: 86px;
}
/* Movement Node Units (dist, speed) Combo Boxes */
.unitComboBox {
    font-size: 10px;
    width: 26px;
}

/* ControlPanel table for aligning radio buttons */
.cpButtonTable td {
    padding: 0px;
}

/* ControlPanel table for aligning check buttons */
.cpCheckTable td tr {
    padding: 0px;
}

/* Number input for Units (dist, speed) */
.inputNumberUnit {
    width: 50px;
    font-size: 12px;
}

/* Time (duration) input */
.cpInputTime {
    width: 30px;
    font-size: 12px;
}

/*
/////////////////
// Main layout
/////////////////
*/
html, body { width: 100%; height: calc(100% - var(--htShrink)); margin: 0; }

#vfMain {
    height: calc(100% - var(--htShrink));
}

/* Control Panels, Map */
#hfTop {
    height: calc(70% - var(--infoHt));
    overflow: hidden;
}

/* Feedback */
#hfMid {
    height: var(--infoHt);
    overflow: hidden;
    background-color: #f4f4f4;
    border-width: 0px 1px 1px 1px;
    border-color: #777;
    border-style: solid;
}

/* Info, Reports */
#hfBot {
    height: calc(30% - var(--htShrink));
    overflow: hidden;
}

/* hr (Horizontal Rule) splitter for adjusting height ratio */
.hrSplitter {
    height: 5px;
    margin: 0px;
    cursor: ns-resize;
}

/* Splitter widget for adjusting the width of the CommandTree */
#splitterCommandTree {
    float: left;
    width: var(--ctSplitWid);
    height: calc(100% - 2px); /* account for 2px border */
    cursor: ew-resize;
    background-color: #666;
}

#divCPGui {
    float: left;
    height: 100%;
}

/* == Control Panel List (cpList) == */
/* List of control panels on the left of the browser client. Clicking one
   of the items shows that control panel. */
#divCPList {
    position: relative; /* So llnlLogo can be position: absolute */
    float: left;
    width: var(--cpListWid);
    height: 100%;
    background-color: #555555;
}

/* CPList elements are radio buttons */
#divCPList input { display: none; }
#divCPList label {
    transition: 300ms;
    display: block;
    font-size: 20px;
    padding: 2px 4px;
    background-color: #6b7287;
    color: #d8d9de;
    transition-duration: 0.3s;
    border: 1px solid #5f667a;
    /* Do not allow selection of the text */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#divCPList label:hover {
    background-color: #8b92a7;
}
#divCPList input:checked + label {
    transition-timing-function: ease-out;
    background-color: #4b5267;
}

/* The div for a Control Panel*/
.divCP {
    float: left;
    width: var(--cpWid);
    height: calc(100% - 2px); /* account for 2px border */
    background-color: #e8ede8;
    border: 1px solid #a0a0a0;
    overflow-y: scroll;
}

:root{
    --clockWid: 200px;
}

#divClock {
    float: left;
    width: var(--clockWid);
    height: var(--infoHt);
    border-style: solid;
    border-width: 0px;
}

#divForce {
    float: left;
    width: calc(var(--mapWid) - var(--clockWid) - 4px); /* 4px border*/
    height: var(--infoHt);
    border-style: solid;
    border-width: 0px 0px 0px 1px;
}

#divMap {
    position: relative;
    float: left;
    width: var(--mapWid);
    height: calc(100% - 20px - 2px); /* account for 2px border */
    background-color: #aad3df;
    border: 1px;
    border-style: solid none solid none;
}

#divMapStatusOverlay {
    position: absolute;
    bottom: 2px;
    left: 5px;
    z-index: 1;  /* place the status on top of the OpenLayers map */
    letter-spacing: 1px;
    /* Do not allow selection of the cursor text */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.spanMapStatusOverlaySuccess {
    color: #228c27;
    text-shadow: -1px 0px #0e5211, 1px 0px #0e5211, 0px -1px #0e5211, 0px 1px #0e5211;
}
.spanMapStatusOverlayError {
    color: #b32e2e;
    text-shadow: -1px 0px #771111, 1px 0px #771111, 0px -1px #771111, 0px 1px #771111;
}

#divCommandTreeArea {
    float: right;
    width: calc(var(--ctWid));
    height: calc(100% - 2px); /* account for 2px border */
    border: 1px solid #000000;
    background-color: #d5d5cd;
}

#divCommandTree {
    position: relative;
    float: left;
    width: calc(var(--ctWid) - var(--ctSplitWid));
    height: calc(100% - 2px); /* account for 2px border */
    overflow-y: auto;
    overflow-x: hidden;
    white-space: nowrap;
}

#divOutputTabBook
{
    float: left;
    width: 33%;
    height: 100%;
    font-size: small;
}

#divReportTabBook
{
    float: left;
    width: 67%;
    height: 100%;
    font-size: small;
}

#divMidInfo {
    float: left;
    width: calc(var(--cpListWid) + var(--cpWid));
    height: var(--infoHt);
    font-size: small;
}
#divPrompt {
    float: left;
    width: calc((100% - var(--cpListWid) - var(--cpWid)) * 0.35);
    height: var(--infoHt);
    font-size: small;
    background-color: #dd9; /* only shows when there is text */
}
#divFeedback {
    float: left;
    width: calc((100% - var(--cpListWid) - var(--cpWid)) * 0.35);
    height: var(--infoHt);
    font-size: small;
    background-color: #cc9; /* only shows when there is text */
}
#divMousePos {
    float: left;
    width: calc((100% - var(--cpListWid) - var(--cpWid)) * 0.3);
    height: var(--infoHt);
    font-size: small;
    background-color: #dd9; /* only shows when there is text */
}


/*
/////////////////
// Other widgets
/////////////////
*/
.llnlLogo {
    position: absolute;
    bottom: 0px;
}


/*
/////////////////
// DialogBox
/////////////////
*/
.dialogBoxDiv {
  position: absolute;
  left: calc(var(--cpListWid) + var(--cpWid) + 20px);
  top: 300px;
  background-color: #cbb7a7;
  border: 3px solid #444;
  z-index: 10;
}

/*
/////////////////
// AccessWarningBox
/////////////////
*/
:root{
  --accessWid: 700px;
  --accessHt: 700px;
}

#accessWarningBoxTextArea {
  width: var(--accessWid);
  height: calc(var(--accessHt) - 100px);
}

#accessWarningBox {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: calc(var(--accessWid) / -2);
  margin-right: calc(var(--accessWid) / -2);
  margin-top: calc(var(--accessHt) / -2);
  margin-bottom: calc(var(--accessHt) / -2);
  width: var(--accessWid);
  height: var(--accessHt);
  background-color: #cbb7a7;
  border: 3px solid #444;
  padding: 0px 0px 0px 20px;  /* trbl */
  z-index: 1000001;
}

/*
/////////////////
// "Connecting..." box
/////////////////
*/
:root{
  --alertWid: 600px;
  --alertHt: 300px;
}

#ConnectingBox {
  position: absolute;
  left: 50%;
  top: 40%;
  margin-left: calc(var(--alertWid) / -2);
  margin-right: calc(var(--alertWid) / -2);
  margin-top: calc(var(--alertHt) / -2);
  margin-bottom: calc(var(--alertHt) / -2);
  width: var(--alertWid);
  height: var(--alertHt);
  background-color: #dddd2299;
  border: 3px solid #444;
  padding: calc(var(--alertHt) / 2) 10px 10px;
  text-align: center;
  font-size: 200%;
  z-index: 1000000;
}

.connComboBox {
  border-radius: 4px;
  border: 2px solid #333029;
  padding: 2px 4px;
}

.connTextField {
  border-radius: 15px;
  border: 2px solid #333029;
  padding: 6px 10px;
}
.connButton {
    transition: 400ms;
    background-color: #eae0c2;
    border-radius: 8px;
    border: 2px solid #333029;
    padding: 8px 16px;
    /* Do not allow selection of the text */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.connButton:hover { background-color: #dad0b; }
.connButton:active { position: relative; top: 1px; left: 1px; }