/* All-in on dark theme in this version! */

BODY {
    background-color:   #000000;
    color:              #FFFFFF;
    display:            flex;
    flex-flow:          column;
    font-family:        Arial;
    font-size:          16px;
    height:             100%;
    margin:             0;
    padding:            0;
}

BODY.sl_disconnect {
    border:             2px dotted #FF0000;
}

HTML {
    height:     100%;
    margin:     0;
    padding:    0;
}

TABLE {
    border-collapse:    collapse;
}

DIV.sl_main_content {
    flex:   1 1 auto;
}

/* Clock */

DIV.sl_clock {
    color:          #FC9003;
    font-family:    Monospace;
    font-size:      18px;
    left:           50%;
    position:       fixed;
    top:            0px;
    transform:      translateX(-50%);
}

/* Display of responses */

DIV.sl_response_container {
    position:   fixed;
    right:      1em;
    top:        1em;
}

DIV.sl_response {
    border-radius:  5px;
    margin:         2px;
    opacity:        0;
    padding:        3px;
    transition:     opacity 0.5s ease;
    z-index:        1;
}

DIV.sl_response SPAN {
    margin:         2px;
}

DIV.error {
    background-color:   #600000;
    border:             2px solid red;
}

P.error {
    background-color:   #303030;
    color:              #FF0000;
}

SPAN.error {
    color:      #FFD0D0;
}

DIV.ok {
    background-color:   #000000;
    border:             2px solid green;
}

SPAN.ok {
    color:      #00F000;
}

DIV.spank {
    background-color:   #000000;
    border:             2px solid #FFFF00;
}

P.spank {
    background-color:   #303030;
    color:              #FFFF00;
}

SPAN.spank {
    color:      #FFFF00;
}

BUTTON.sl_clear {
    background-color:   #000000;
    border:             1px solid #D0D0D0;
    border-radius:      3px;
    color:              #D0D0D0;
    margin:             2px;
    margin-left:        5px;
    padding:            2px;
}

/* Page header */

DIV.sl_top_header {
    flex:   0 1 auto;
}

TABLE.sl_top_header {
    border-bottom:  1px solid #0000FF;
    color:          #D000F0;
    margin-bottom:  5px;
    width:          100%;
}

TABLE.sl_top_header TD.left {
    font-size:      24px;
    text-align:     left;
}

TABLE.sl_top_header TD.right {
    font-style:     italic;
    text-align:     right;
}

/* Typical page elements and styles */

.center {
    text-align: center;
}

.disabled {
    color:      #606060;
}

.full_width {
    width:      100%;
}

.init {
    display:    none;
}

.hidden {
    display:    none;
}

.margin_bottom {
    margin-bottom:  10px;
}

.margin_right {
    margin-right:   5px;
}

.margin_top {
    margin-top:  10px;
}

.monospace {
    font-family:    Monospace;
    font-size:      16px;
}

.rw_access {
    display:    none;
}

.updated {
    border: 1px solid #00D0D0;
    color:  #00D0D0;
}

.view_field {
    font-family:    Monospace;
    font-size:      16px;
    padding:        2px;
    margin:         2px;
}

A:link {
    color:      #A0A0FF;
}

A:visited {
    color:      #FF00FF;
}

A:hover {
    color:      #FF0000;
}

A:active {
    color:      #00FFFF;
}

BUTTON {
    background-color:   #404040;
    border:             1px solid #D0D0D0;
    border-radius:      3px;
    color:              #D0D0D0;
    margin:             3px;
    padding:            2px;
}

BUTTON:hover {
    background-color:   #606060;
}

BUTTON:active {
    background-color:   #608060;
    border:             1px solid #000000;
}

BUTTON.selected {
    border: 2px solid #00FF00;
    color:  #00FF00;
}

BUTTON.disabled {
    border:             1px solid #606060;
}

P.div_head {
    border-bottom:  1px solid #00FF00;
    color:          #00FF00;
    font-size:      20px;
    font-weight:    bold;
    margin-bottom:  5px;
    margin-top:     0px;
}


DIV.blue {
    background-color:   #000020;
    border:             1px solid #0000C0;
    border-radius:      5px;
    margin-top:         10px;
    padding:            5px;
}

DIV.blue P.div_head, DIV.blue_section P.div_head {
    border-bottom:  1px solid #5050FF;
    color:          #7070FF;
    font-size:      20px;
    font-weight:    bold;
    margin-bottom:  5px;
    margin-top:     0px;
}

DIV.green {
    background-color:   #003000;
    border:             1px solid #00C000;
    border-radius:      5px;
    margin-top:         10px;
    padding:            5px;
}

DIV.green P.div_head, DIV.green_section P.div_head {
    border-bottom:  1px solid #50FF50;
    color:          #50FF50;
    font-size:      20px;
    font-weight:    bold;
    margin-bottom:  5px;
    margin-top:     0px;
}

DIV.red {
    background-color:   #300000;
    border:             1px solid #C00000;
    border-radius:      5px;
    margin-top:         10px;
    padding:            5px;
}

DIV.red P.div_head, DIV.red_section P.div_head {
    border-bottom:  1px solid #FF3030;
    color:          #FF3030;
    font-size:      20px;
    font-weight:    bold;
    margin-bottom:  5px;
    margin-top:     0px;
}

DIV.teal {
    background-color:   #002020;
    border:             1px solid #00C0C0;
    border-radius:      5px;
    margin-top:         10px;
    padding:            5px;
}

DIV.teal P.div_head, DIV.teal_section P.div_head {
    border-bottom:  1px solid #50FFFF;
    color:          #70FFFF;
    font-size:      20px;
    font-weight:    bold;
    margin-bottom:  5px;
    margin-top:     0px;
}

DIV.yellow {
    background-color:   #202000;
    border:             1px solid #F0F000;
    border-radius:      5px;
    margin-top:         10px;
    padding:            5px;
}

DIV.yellow P.div_head, DIV.yellow_section P.div_head {
    border-bottom:  1px solid #FFFF50;
    color:          #FFFF70;
    font-size:      20px;
    font-weight:    bold;
    margin-bottom:  5px;
    margin-top:     0px;
}


INPUT[type=text]:disabled, TEXTAREA.disabled {
    background-color:   #202020;
    border:             solid 1px #404040;
    color:              #808080;
}

INPUT[type=text].spank, INPUT[type=password].spank, TEXTAREA.spank {
    background-color:   #303030;
    border:             solid 1px #FFFF00;
    color:              #FFFFFF;
}


INPUT[type=text], INPUT[type=password], TEXTAREA {
    background-color:   #303030;
    border:             solid 1px #707070;
    color:              #FFFFFF;
}

P {
    margin-bottom:  0.5em;
    margin-top:     0.5em;
}

P.head_1 {
    color:          #00FFFF;
    font-size:      36px;
    font-weight:    bold;
    text-align:     center;
}

SELECT {
    background-color:   #303030;
    border:             solid 1px #707070;
    color:              #FFFFFF;
}

SPAN.assigned, A.available {
    margin-right:   7px;
    padding:        2px;
    white-space:    nowrap;
}

TD.spank {
    border:             1px solid #FFFF00;
    color:              #FFFF00;
}

/* Using a table to split the page in to two equal columns */

TD.lr_split {
    vertical-align: top;
    width:          50%;
}

/* Typical alternating-row-color table */

TABLE.alternating TD {
    padding:    5px;
}

TABLE.alternating.header TR:nth-child(1) TD {
    background-color:       #404040;
    border-bottom:          solid 1px #F0880A;
    color:                  #FFFF00;
    font-weight:            bold;
}

TABLE.alternating TR:nth-child(2n+1) TD {
    background-color:       #003030;
}

TABLE.alternating TR:nth-child(2n+2) TD {
    background-color:       #303000;
}

/* Table row signifying an item that is to be removed */

TR.remove SELECT {
    color:              #FF0000;
    text-decoration:    line-through;
}

TR.remove TD {
    color:              #FF0000;
    text-decoration:    line-through;
}

/* Formatting of the main page */

DIV.main_container {
    overflow:   hidden;
    width:      100%;
}

DIV.main_container DIV.left_container {
    overflow:   auto;
}

DIV.main_container DIV.log TABLE {
    margin:         0px;
}

DIV.main_container DIV.incidents TABLE {
    margin-bottom:  20px;
    margin-left:    0px;
    margin-right:   0px;
    margin-top:     0px;
}

DIV.main_container DIV.units {
    float:          right;
    margin:         0px;
    margin-left:    5px;
    overflow:       auto;
    padding-left:   3px;
}

/* Use a table to split the page in to sections */

TABLE.sections {
    width:  100%;
}

TD.section {
    vertical-align: top;
}

/* DIVs that act as the visible frames within the invisible table cells */

DIV[class$="section"] {
    border-radius:  5px;
    margin:         0px;
    padding:        5px;
}

DIV.blue_section {
    background-color:   #000020;
    border:             1px solid #0000C0;
}

DIV.green_section {
    background-color:   #003000;
    border:             1px solid #00C000;
}

DIV.red_section {
    background-color:   #200000;
    border:             1px solid #C00000;
}

DIV.teal_section {
    background-color:   #002020;
    border:             1px solid #00C0C0;
}

/* Sort arrow */

.sort_down:after, .sort_up:after {
    content:    ' ';
    position:   relative;
    left:       10px;
    border:     7px solid transparent;
}

.sort_down:after {
    top:                10px;
    border-top-color:   yellow;
}

.sort_up:after {
    bottom:                 10px;
    border-bottom-color:    yellow;
}

.sort_down, .sort_up {
    padding-left:   20px;
}

/* User-to-user or system-to-user messages */

DIV.sl_message {
    background-color:   #000000;
    border:             2px solid #00FFFF;
    border-radius:  5px;
    margin:         2px;
    opacity:        0;
    padding:        3px;
    transition:     opacity 0.5s ease;
    z-index:        1;
}

DIV.sl_message BUTTON {
    margin-left:    10px;
}

DIV.sl_message INPUT {
    margin:    2px;
}

/* Map formatting */

DIV.map {
    color:  #0000FF;
    height: 100%;
}

DIV.map_menu {
    left:               1em;
    position:           fixed;
    top:                3em;
}

DIV.map_menu OL {
    padding-left:   1em;
}

DIV.map_menu OL LI {
    padding-bottom: 5px;
}

DIV.map_place {
    background-color:   #0000FF;
    border:             1px solid #000000;
    color:              #FFFFFF;
    font-size:          12px;
    padding:            2px;
}

DIV.map_place_selected {
    background-color:   #0000FF;
    border:             2px solid #FFFF00;
    color:              #FFFF00;
    font-size:          12px;
    padding:            2px;
}

DIV.map_unit_blk {
    background-color:   #000000;
    border:             1px solid #FFFFFF;
    color:              #FFFFFF;
    font-size:          12px;
    padding:            2px;
}

DIV.map_unit_grn {
    background-color:   #00FF00;
    border:             1px solid #000000;
    color:              #000000;
    font-size:          12px;
    padding:            2px;
}

DIV.map_unit_red {
    background-color:   #FF0000;
    border:             1px solid #000000;
    color:              #FFFFFF;
    font-size:          12px;
    padding:            2px;
}

DIV.map_unit_yel {
    background-color:   #FFFF00;
    border:             1px solid #000000;
    color:              #000000;
    font-size:          12px;
    padding:            2px;
}

[class^="map_place"]:after, [class^="map_unit"]:after {
    content:        '';
    position:       absolute;
    left:           0;
    right:          0;
    top:            99%;
    margin:         0 auto;
    width:          0;
    height:         0;
    border-top:     6px solid #000000;
    border-left:    3px solid transparent;
    border-right:   3px solid transparent;
}