/* ::: Raleway Fonts
 *  **************************************************/
@font-face { font-family: rw-BlackItalic;               src: url("/css/fonts/Raleway-BlackItalic.ttf"); }
@font-face { font-family: rw-Black;                     src: url("/css/fonts/Raleway-Black.ttf"); }
@font-face { font-family: rw-BoldItalic;                src: url("/css/fonts/Raleway-BoldItalic.ttf"); }
@font-face { font-family: rw-Bold;                      src: url("/css/fonts/Raleway-Bold.ttf"); }
@font-face { font-family: rw-ExtraBoldItalic;           src: url("/css/fonts/Raleway-ExtraBoldItalic.ttf"); }
@font-face { font-family: rw-ExtraBold;                 src: url("/css/fonts/Raleway-ExtraBold.ttf"); }
@font-face { font-family: rw-ExtraLightItalic;          src: url("/css/fonts/Raleway-ExtraLightItalic.ttf"); }
@font-face { font-family: rw-ExtraLight;                src: url("/css/fonts/Raleway-ExtraLight.ttf"); }
@font-face { font-family: rw-LightItalic;               src: url("/css/fonts/Raleway-LightItalic.ttf"); }
@font-face { font-family: rw-Light;                     src: url("/css/fonts/Raleway-Light.ttf"); }
@font-face { font-family: rw-MediumItalic;              src: url("/css/fonts/Raleway-MediumItalic.ttf"); }
@font-face { font-family: rw-Medium;                    src: url("/css/fonts/Raleway-Medium.ttf"); }
@font-face { font-family: rw-RegularItalic;             src: url("/css/fonts/Raleway-RegularItalic.ttf"); }
@font-face { font-family: rw-Regular;                   src: url("/css/fonts/Raleway-Regular.ttf"); }
@font-face { font-family: rw-SmeiBoldItalic;            src: url("/css/fonts/Raleway-SemiBoldItalic.ttf"); }
@font-face { font-family: rw-SemiBold;                  src: url("/css/fonts/Raleway-SemiBold.ttf"); }
@font-face { font-family: rw-ThinItalic;                src: url("/css/fonts/Raleway-ThinItalic.ttf"); }
@font-face { font-family: rw-Thin;                      src: url("/css/fonts/Raleway-Thin.ttf"); }


/* ::: Custom property colors
 **************************************************/
:root {
    --c-black: #24272a;
    --c-white: #eceff3;
    --c-orange: #f3762a;
    --c-grey: #a5bac9;
    --c-grey-bg: #5a676f;
    --c-grey-input: #edeff3;
    --c-red: #ff4f63;
    --c-yellow: #ffc14f;
    --c-blue: #416ba9;
    --c-blue-bg: #023863;
    --c-green: #2bd570;
}


/* ::: Normalize
 **************************************************/
* {
    font-family: rw-Regular, sans-serif;
    font-size: 11pt;
}
body {
    background-color: var(--c-blue-bg);
}
html, body, th, td {
    margin: 0px;
    padding: 0px;
    text-align: left;
}
table {
    border-spacing: 0px;
    width: 100%;
}
canvas {
    display: block;
}
input {
    font-family: rw-Regular, sans-serif !important;
    background-color: var(--c-grey-input);
    width: 95.5%;
}
input:-webkit-autofill {
    -webkit-box-shadow: 0px 0px 0px 25px rgb(238,238,238) inset;    /* Hide any yellow autofill bg's */
}
button:focus {
    outline: none;
}
hr {
    border: 1px solid var(--c-blue);
    border-bottom: none;
}
a {
    color: var(--c-black);
}


/* ::: General Settings
 **************************************************/

/* GENERAL ---> Main Layout section: Menu, Header, Content, and Footer
 *              Stack order from top to bottom:  menu, footer, menu_bg
 */

/* +++ Page Container
 * -------------------------------------------------- */
#container {
    width: 1280px;
    background-color: transparent;
}

/* +++ Menu
 * -------------------------------------------------- */
#menu_bg {
    position: fixed;
    z-index: -1;
    top: 0px;
    left: 0px;
    width: 214px;
    height: 2160px;
    background-color: var(--c-black);
}

#menu {
    float: left;
    position: relative;
    z-index: 1;
    top: 0px;
    width: 214px;
    color: var(--c-white);
    background-color: var(--c-black);
}
#menu td.logo {
    padding: 20px 0px;
}
/* Original size: 200 x 110 */
#menu td.logo img {
    width:  120px;      /* 60% */
    height: 66px;       /* 60% */
}
#menu td.menu_icon {
    padding: 20px 10px 20px 0px;
}
/* Original size: 35 x 35 */
#menu td.menu_icon img {
    width:  28px;       /* 80% */
    height: 28px;       /* 80% */
}
#menu td.menu_title {
    font-family: rw-Bold;
    padding: 20px 0px;
    font-size: 11pt;
}
#menu td.selected {
    background-color: var(--c-grey-bg);
}

/* +++ Header + Content
 * -------------------------------------------------- */
#header_content {
    float: left;
    width: 1066px;
    color: var(--c-white);
    background-color: var(--c-blue-bg);
}

/* +++ Header
 * -------------------------------------------------- */
#header {
    height: 100px;
    border: 1px solid transparent;
}
#header > div.banner {
    margin-top: 20px;
    padding-left: 45px;
    color: var(--c-white);
    height: 80px;
}
#header > div.banner td {
    font-size: 10pt;
}
#header > div.banner td.attrib {
    font-family: rw-Bold;
}
#header > div.banner td.attrib[data-field=device_name] {
    height: 16px;
    width: 110px;
    display: inline-block;
    overflow: hidden;
}
#header > div.banner input[data-field=device_name] {
    height: 14px;
    width: 110px;
    border: none;
}
#header > hr {
    margin: 0px 0px 0px 25px;
}

/* UPGRADE and LICENSE (File Upload) from Header.
 * Also KEY FILE (File Upload) from Configuration | Input 
 * Also the browse button when adding User-defined Trigger. */
#browse_upgrade,
#browse_license,
#browse_keyfile,
#browse_import,
#browse_trigger_file {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

/* +++ Clock in header
 * -------------------------------------------------- */
#clock {
    font-family: rw-Bold;
    width: 100px;
    margin:0px auto;
    text-align: center;
    height: 42px;
    padding-top: 6px;
    color: var(--c-white);
    border-left: 1px solid var(--c-blue);
    border-right: 1px solid var(--c-blue);
}
#clock label.time {
    font-family: rw-SemiBold;
}
#clock label.date {
    font-family: rw-SemiBold;
}

/* +++ Content
 * -------------------------------------------------- */
#content > div.main {               /* Main box */
    float: left;
    margin: 25px 0px 0px 45px;
    width: 700px;
}
#content > div.sidebar {            /* Sidebar box */
    float: right;
    width: 250px;
    margin-right: 11px;
}

/* +++ Footer (below Menu on left)
 * -------------------------------------------------- */
#footer {
    position: fixed;
    z-index: 0;
    bottom: 0px;
    width: 214px;
    height: 40px;
    color: var(--c-white);
}
#footer div.company {
    float: left;
    padding: 2px 0px 0px 6px;
    font-size: 8pt;
}
#footer div.back {
    display: none;
    float: right;
    padding-right: 6px;
    font-family: rw-SemiBold;
    font-size: 32pt;
    line-height: 30px;
}

/* GENERAL ---> Search section (Configuration & System Info TABs) */

/* Search ... */
div.search {
    height: 24px;
    padding-bottom: 10px;
}
div.search div.icon,
div.search div.box {
    float: left;
}
div.search img {
    height: 24px;               /* Height of magnifier */
    padding: 0px 0px 0px 18px;
}
div.search input {
    height: 24px;
    margin-left: 10px;
    width: 475px;
    background-color: transparent;
    color: var(--c-white);
    border: none;
}
div.search input:focus {
    outline: none;
    border-bottom: 2px solid white;
}
div.search_results {
    display: none;
    padding: 20px 18px 20px 20px;
    color: var(--c-black);
    background-color: var(--c-white);
    border-bottom: 1px solid var(--c-grey);
}
div.search_results div.heading {
    float: left;
    font-family: rw-ExtraBold;
    font-size: 14pt;
}
div.search_results div.reset_search {
    float: right;
}
div.end_search_results {
    display: none;
    text-align: center;
    font-family: rw-Medium;
    margin-top: 25px;
}

/* GENERAL ---> Sidebar section (Configuration & System Info TABs) */

/* Upper Sidebar */
div.sidebar > div.upper_spacer {
    height: 50px;
}
div.sidebar > div.upper {
    height: 80px;
}
div.sidebar > div.upper > div.button_spacer {
    height: 30px;
}
div.sidebar > div.upper > div.button_spacer2 {
    height: 10px;
}
div.sidebar > div.upper > table.buttons td:nth-child(1) {
    width: 108px;
}
div.sidebar > div.upper > table.buttons td:nth-child(2) {
    padding-left: 34px;
}
div.sidebar > div.upper > table.buttons {
    height: 40px;
}

/* GENERAL ---> Miscellaneous section */
.click {
    cursor: pointer;
}
.templ {
    display: none;
}
div.clearfloat {
    clear: both;
}
img.toggle {
    cursor: pointer;
}
img.toggle-disabled {
    cursor: auto !important;
}
input.fake_credentials {
    display: none;
}
div.no_audio_license {
    display: none;
}

.disable-text-select {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by any browser but < IE9 */
}

/* Error message and pass/fail image */
div.errmsg {
    color: red;
    font-size: 8pt;
}
img.passfail {
    display: none;
}

/* Rotate counter-clockwise 90deg */
.rotate {
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
/* Rotate clockwise 90deg */
.rotatec {
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

/* Text Alignment */
.left {
    text-align: left !important;
}
.center {
    text-align: center !important;
}
.right {
    text-align: right !important;
}

/* Buttons */
div.button {
    font-family: rw-Bold;
    width: 100px;
    margin: 0px auto;
    text-align: center;
    height: 24px;
    padding-top: 6px;
    /* Disable Text Select ... */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by any browser but < IE9 */
}
div.b-disabled {    /* Button disabled state over white background */
    cursor: auto;
    margin: 0px;
    color: var(--c-white);
    background-color: var(--c-grey-bg);
    border: 4px solid #ffffff;
}
div.b-lock_to_preferred{
    width:150px;
}
div.b-blue {
    background-color: var(--c-blue);
    border: 4px solid var(--c-blue-bg);
}
div.b-blue:hover {
    border: 4px double var(--c-blue-bg);
}
div.b-blue2 {
    margin: 0px;
    color: var(--c-white);
    background-color: var(--c-blue);
    border: 4px solid #ffffff;
}
div.b-blue2:hover,
div.b-blue2:focus {
    border: 4px double var(--c-white);
}
div.b-blue3 {
    color: var(--c-white);
    background-color: var(--c-blue);
    border: 2px solid var(--c-white);
}
div.b-blue3:hover {
    border: 2px solid var(--c-white);
}
div.b-orange {
    background-color: var(--c-orange);
    border: 4px solid var(--c-blue-bg);
}
div.b-orange:hover {
    border: 4px double var(--c-blue-bg);
}
div.b-orange2 {
    color: var(--c-white);
    background-color: var(--c-orange);
    border: 4px solid #ffffff;
}
div.b-orange2:hover,
div.b-orange2:focus {
    border: 4px double var(--c-white);
}
div.b-green {
    background-color: var(--c-green);
    border: 4px solid var(--c-blue-bg);
}
div.b-green:hover {
    border: 4px double var(--c-blue-bg);
}
div.b-green2 {
    color: var(--c-white);
    background-color: var(--c-green);
    border: 4px solid #ffffff;
}
div.b-green2:hover,
div.b-green2:focus {
    border: 4px double var(--c-white);
}
div.b-white {                   /* Reversed look */
    color: var(--c-white);
    background-color: var(--c-blue-bg);
    border: 2px solid var(--c-white);
}
div.b-white:hover {
    box-shadow: 0 0 0 2px var(--c-blue-bg);
}
div.b-white.selected {
    color: var(--c-blue-bg);
    background-color: var(--c-white);
    border: 4px double var(--c-blue-bg);
}

/* Dots */
span.dot,
span.dot2 {
    /* Disable Text Select ... */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by any browser but < IE9 */
}
span.dot {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
span.click_dot {
    cursor: pointer;
}
span.red-dot {
    background-color: var(--c-red);
}
span.orange-dot {
    background-color: var(--c-orange);
}
span.green-dot {
    background-color: var(--c-green);
}
span.yellow-dot {
    background-color: var(--c-yellow);
}
span.white-dot {
    background-color: var(--c-white);
}
/* Dots with an outer circle */
span.dot2 {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--c-blue-bg);
}
span.red-dot2 {
    box-shadow: 0 0 0 2px var(--c-red);
    background-color: var(--c-red);
}
span.orange-dot2 {
    box-shadow: 0 0 0 2px var(--c-orange);
    background-color: var(--c-orange);
}
span.green-dot2 {
    box-shadow: 0 0 0 2px var(--c-green);
    background-color: var(--c-green);
}
span.yellow-dot2 {
    box-shadow: 0 0 0 2px var(--c-yellow);
    background-color: var(--c-yellow);
}
span.white-dot2 {
    box-shadow: 0 0 0 2px var(--c-white);
    background-color: var(--c-white);
}

span.red {
    color: var(--c-red);
}

/* Blinking Text */
.blink {
    animation: blinker 1s step-start infinite;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}


/* ::: Alertify
 **************************************************/
.ajs-header,
.ajs-content {
    /* Disable Text Select ... */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by any browser but < IE9 */
}

/* Modal Lockout Alert Message Style */
#lockmsg {
    font-family: rw-Bold;
    font-size: 18pt;
    color: var(--c-black);
    margin-top: 18px;
    text-align: center;
}

/* Upgrade File Upload Progress bar Style */
#progress-container { 
    text-align: center;
}
#progress-container label {
    margin-top: 5px;
    font-family: rw-Bold;
    font-size: 18pt;
    color: var(--c-black);
}
#progress-bar { /* Style the progress bar */
    width: 100%;
    height: 20px;
    margin-bottom: 25px;
}
#progress-message {  /*Style the progress message */
    font-size: 12;
    font-weight: bold;
}

/* ::: Accordion
 **************************************************/
.ui-accordion-header {
    cursor: pointer;
    margin: 0px;
    padding: 20px;
    color: var(--c-blue-bg);
    background-color: var(--c-white);
    border-bottom: 1px solid var(--c-grey);
    font-size: 14pt;
    /* Disable Text Select ... */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by any browser but < IE9 */
}
.ui-accordion-header span.desc {
    float: right;
    height: 24px;
    font-family: rw-Thin;
    font-size: 14pt;
}
.ui-accordion-header span.desc > span.arrow {
    float: right;
    width: 20px;
    height: 20px;
    margin: -3px 0px 0px 20px;
}
.ui-accordion-header span.desc > span.arrow_right {
    background: url(../img/arrow_right.png) no-repeat;
}
.ui-accordion-header span.desc > span.arrow_down {
    background: url(../img/arrow_down.png) no-repeat;
}
.ui-accordion-header-active {
    font-family: rw-Bold;
}
.ui-accordion-header-icon {
    display: none !important;
}
.ui-accordion-content {
    color: var(--c-black);
    background-color: #ffffff;
    border-bottom: 1px solid var(--c-grey);
}
.ui-accordion-content div.top {
    height: 25px;
    background-image: linear-gradient(var(--c-grey), #ffffff);
}
.ui-accordion-content div.middle {
    padding: 0px 20px 20px 20px;
}


/* ::: /user/profile
 **************************************************/
div.profile {
    margin-top: 60px;
    color: var(--c-black);
    background-color: #ffffff;
    height: 250px;
}
div.profile div.header {
    margin: 0px;
    padding: 20px;
    color: var(--c-blue-bg);
    background-color: var(--c-white);
    border-bottom: 1px solid var(--c-grey);
    font-size: 14pt;
    /* Disable Text Select ... */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by any browser but < IE9 */
    font-family: rw-Bold;
}
div.profile div.top {
    height: 25px;
    background-image: linear-gradient(var(--c-grey), #ffffff);
}
div.profile table {
    width: 80%;
    margin: 20px;
}
div.profile td {
    height: 26px;
}
div.profile td select {
    padding: 0px 5px 5px 8px;
    border: none;
    outline: none;
    height: 22px;
    background-color: var(--c-grey-input);
}
div.profile td input {
    padding: 0px 0px 0px 8px;
    border: none;
    outline: none;
    height: 22px;
}


/* ::: /user/login
 **************************************************/
div.login img.heading {
    margin: 60px 0px 0px 475px;
}
div.login div.userpass {
    margin: 40px 0px 0px 475px;
    padding-top: 10px;
    width: 320px;
    height: 235px;
    background-color: #ffffff;
}
div.login div.userpass > div.input {
    width: 275px;
    margin: 0px auto;
}
div.login div.userpass div.label {
    margin: 12px 0px 6px 0px;
    font-family: rw-Medium;
    font-size: 12pt;
}
div.login div.userpass input {
    padding: 0px 0px 0px 8px;
    border: none;
    outline: none;
    width: 265px;
    height: 30px;
    font-size: 12pt;
}
div.login div.userpass table.buttons {
    margin-top: 30px;
}
div[data-button=login] {
    width: 275px;
    height: 28px;
    font-family: rw-Regular;
    font-size: 14pt;
}
div[data-button=logout] {
    margin: 0px 10px 0px auto;
}


/* ::: /system/status
 **************************************************/

/* ##### main -- Playback Timer */
div.playback_timer_box {            /* Unfinished bug 31977 - add timeshifting. */
    height: 25px;
}

/* ##### main -- System Tree */
div.system_tree {
    margin-top: 25px;
    min-height: 550px;
}
#systree td {
    height: 100px;
}
#systree tr.row1 td {
    height: 50px;
}
#systree td.col1 {              /* >>> Input */
    width: 120px;
    height: 550px;              /* 50 for row1 + 100 for each remaining row */
}
#systree td.col2 {              /* >>> "Active" Line to 1st Channel. Channel to Channel. */
    width: 95px;
    height: 550px;              /* 50 for row1 + 100 for each remaining row */
}
#systree td.col3 {              /* Channel Text + Left/Right VU Meters */
}
#systree td.col4 {              /* Arrow from Channel Text to Output */
    width: 40px;
}
#systree td.col5 {              /* Channel Output */
    width: 125px;
}

#systree div.input {            /* Ie. Primary, Backup, or Playlist */
    margin-top: 12px;
    height: 36px;
    text-align: center;
    white-space: nowrap;
}
#systree div.input1 {           /* When 1-line display */
    font-family: rw-Bold;
    padding-top: 8px;
}
#systree div.item {
    font-family: rw-Bold;
    padding: 9px 12px 7px 12px;
    border: 2px solid transparent;

    /* Disable Text Select ... */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by any browser but < IE9 */
}
#systree div.selected {
    padding: 7px 10px 5px 10px !important;
    color: var(--c-blue-bg) !important;
    border: 4px double var(--c-blue-bg) !important;
}

#systree div.backup,
#systree div.playlist {
    border-image-width: 1 !important;
    border-image-slice: 8% !important;
    border-image-repeat: round !important;
}
div.red_dashes {
    border: 1px solid red !important;
    padding: 10px 13px 8px 13px !important;
    border-image-source: url(../img/dashed_red.png) !important;
}
div.white_dashes {
    border: 1px solid white !important;
    padding: 10px 13px 8px 13px !important;
    border-image-source: url(../img/dashed_white.png) !important;
}
div.yellow_dashes {
    border: 1px solid yellow !important;
    padding: 10px 13px 8px 13px !important;
    border-image-source: url(../img/dashed_yellow.png) !important;
}
div.lockbox {
    display: block;
    width: 18px;
    height: 18px;
    position: relative;
    left: 110px;
    top: -64px;
}
div.locked {
    background-image: url(../img/input2_locked.png) !important;
}
div.unlocked {
    background-image: url(../img/input2_unlocked.png) !important;
}

#systree div.backup_failover,
#systree div.playlist_failover,
#systree div.channel,
#systree div.output {
    display: none;
}

/* -> div.Channel (container)
      \-> div.Channel (text)
          table.VU Meter
   -> div.Channel (output)
*/
#systree div.channel {          /* Channel (container) */
    height: 48px;
}
#systree div.channel_text {     /* Channel (text) */
    font-family: rw-Bold;
    height: 26px;
}

#systree table.vumeter {        /* VU Meter (tabled) */
    width: 250px;
}
#systree table.vumeter td.mid_vu {
    height: 3px;
}
#systree table.vumeter td.vu {
    border: 1px solid var(--c-blue-bg);
    height: 6px;
    visibility: hidden;
}
#systree table.vumeter td.green {
    background-color: #53bb6b;
}
#systree table.vumeter td.yellow {
    background-color: #ffc050;
}
#systree table.vumeter td.red {
    background-color: #f85265;
}

#systree div.output {           /* Channel (output) */
    height: 18px;
}

/* ##### main -- Status Log (heading & data) */
div.system_log {
    display: none;
    margin-top: 32px;
}
div.system_log > div.heading {
    height: 46px;
    font-family: rw-Bold;
}
div.system_log > div.heading div.log_spacer {
    height: 22px;
}
div.system_log > div.data {
    height: 625px;
    overflow: auto;
}

/* @SYSLOG (Heading)
 ********************/
#syslog_heading td {
    font-family: rw-Bold;
    height: 24px;
}
#syslog_heading td:nth-child(1) {
    width: 30px;
}
#syslog_heading td:nth-child(2) {
    width: 50px;
}
#syslog_heading td:nth-child(3) {
    width: 90px;
}
#syslog_heading td:nth-child(4) {
    /* floating column width */
}
#syslog_heading td span.sort {
    float: left;
    font-family: rw-Bold;
    font-size: 16pt;
}

/* @SYSLOG (Data)
 ********************/
#syslog_data td:nth-child(1) {
    width: 30px;
}
#syslog_data td:nth-child(2) {
    width: 140px;   /* Col 2 + 3 of heading */
}
#syslog_data td:nth-child(3) {
    /* floating column width */
}
#syslog_data td span.date {
    display: inline-block;
    width: 65px;
}
#syslog_data td span.time {
}
#syslog_data td span.message {
    display: inline-block;
    width: 515px;
    margin: 8px 0px;
}

/* @SYSLOG (Pagination)
 ********************/
#pagination {
    margin: 10px 0px 30px 0px;
    height: 40px;
    /* Disable Text Select ... */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by any browser but < IE9 */
}
#pagination div {
    display: inline-block;
    float: left;
    font-family: rw-Bold;
}
#pagination div.first,
#pagination div.prev,
#pagination div.page,
#pagination div.next,
#pagination div.last {
    border: 1px solid transparent;
    margin-top: 5px;
    height: 28px;
    font-size: 14pt;
    text-align: center;
}
#pagination div.first,
#pagination div.prev,
#pagination div.next,
#pagination div.last {
    cursor: pointer;
}
#pagination div.first {
    margin-left: 20px;
}
#pagination div.prev {
    margin-right: 10px;
}
#pagination div.next {
    margin-left: 10px;
}
#pagination div.first,
#pagination div.last {
    width: 24px;
}
#pagination div.prev,
#pagination div.next {
    width: 28px;
}
#pagination div.page {
    border: 1px solid var(--c-grey-bg);
    min-width: 40px;
    padding: 0px 8px;
}
#pagination div.current {
    border: 1px solid white;
}
#pagination div[data-button] {
    float: right;
}

/* ##### Sidebar (upper) -- System Status (Dots)  OR  Buttons */
div.status_upper {
    display: inline;
}
div.status_upper > div.heading {
    height: 212px;
    margin: 30px 0px 0px -12px;     /* Shift entire LED heading 12px to the left */
}
div.status_upper > div.heading div.title {
    font-family: rw-SemiBold;
    font-size: 12pt;
    margin: 0px 0px 10px 6px;
}
div.status_upper > div.heading table.dots td {
    font-family: rw-SemiBold;
}
div.status_upper > div.heading table.dots td.dot_box {
    width: 40px;
    height: 32px;
    text-align: center;
}
div.status_upper > div.heading table.dots span.count {
    font-family: rw-SemiBold;
    padding-left: 10px;
}

/* ##### Sidebar (upper) -- System Config (Dots)*/
div.config_upper {
    display: inline;
}
div.config_upper > div.heading {
    height: 150px;
    margin: 30px 0px 0px -12px;     /* Shift entire LED heading 12px to the left */
}
div.config_upper > div.heading div.title {
    font-family: rw-SemiBold;
    font-size: 12pt;
    margin: 0px 0px 10px 6px;
}
div.config_upper > div.heading table.dots td {
    font-family: rw-SemiBold;
}
div.config_upper > div.heading table.dots td.dot_box {
    width: 40px;
    height: 32px;
    text-align: center;
}
div.config_upper > div.heading table.dots span.count {
    font-family: rw-SemiBold;
    padding-left: 10px;
}                                                                
/* ##### Sidebar (lower) -- Links  OR  Input  OR  Audio */
div.details {
    display: none;
}
div.details span {
    font-family: rw-Bold;
}
div.details span.arrow_link {
    float: right;
    margin-right: 10px;
}

div.details .file-list li {         /*Sidebar Backup Playlist file list*/
    margin-top: 4px;
    padding-left: 4px;
    list-style-type: circle;
    font-size: 10pt;
}
div.links_lower div:nth-child(1) {                              /* Top row of links */
    margin-top: 10px;
}
div.links_lower div {
    margin: 20px 0px;
}
div.links_lower div.main_link {
}
div.links_lower div.decoder_link {
    padding-left: 20px;
}

div.input_lower > table.detail_input tr.in {
    display: none;
}

div.input_lower > table.detail_input div.input_label {
    margin: 2px 0px 5px 0px;
}
div.input_lower > table.detail_input tr:nth-child(1) td {       /* Top row of INPUT Status */
    margin-top: 10px;
    padding: 0px;
}
div.input_lower > table.detail_input td {
    padding: 4px 0px;
    font-size: 10pt;
}
div.input_lower > table.detail_input td.heading {
    font-family: rw-Bold;
}
div.input_lower > table.detail_input td.heading a {
    color: var(--c-white);
    font-family: rw-Bold;
    font-size: 12pt;
}
div.input_lower > table.detail_input div[data-name=RSUncorrectedPackets] {
    float: left;
}
div.input_lower > table.detail_input div.reset_uncorrected {
    float: right;
    width: 55px;
}

div.audio_lower > table.detail_audio div.audio_label {
    margin: 2px 0px 5px 0px;
}
div.audio_lower > table.detail_audio tr:nth-child(1) td {       /* Top row of INPUT Status */
    margin-top: 10px;
    padding: 0px;
}
div.audio_lower > table.detail_audio td {
    padding: 4px 0px;
    font-size: 10pt;
}
div.audio_lower > table.detail_audio td.heading {
    font-family: rw-Bold;
}
div.audio_lower > table.detail_audio td.heading a {
    color: var(--c-white);
    font-family: rw-Bold;
    font-size: 12pt;
}

td.detail_spacer {
    padding: 0px;
    height: 10px;
}

/* ##### Sidebar (lower) -- Zixi Stats */
tr.zixi-in td div.zixi_stat_lbl {
    margin: 10px 0px 0px 0px;
}
tr.zixi-in td div.zixi_stat {
    font-family: rw-Light;
}


/* ::: /config/edit
 **************************************************/
#pvr {
    margin-top: 25px;
}
#pvr legend.heading {
    font-weight: bold;
}
#pvr input.recording_name {
    width: 350px;
}
#pvr div.record_button {
    margin: 0px;
    width: 150px;
}

#pvr_content .selectBox-dropdown {
    min-width: 350px !important;
}
#pvr_content .ff_rew {
    margin-left: 10px;
    color: var(--c-blue);
}
#pvr_content div.playback_buttons div.button {
    float: left;
    width: 75px;
    margin: 0px 4px;
}

div.config_spacer {
    height: 25px;
}

tr.lw,
tr.lw_no_fwd {
    display: none;
}
tr.lw_no_fwd input.lw_id {
    width: 60px;
}
tr.lw_no_fwd input.lw_desc {
    width: 150px;
}

#configuration td {
    height: 26px;
}

#configuration td input {
    padding: 0px 0px 0px 8px;
    border: none;
    outline: none;
    height: 22px;
}

#configuration .alarm4,                     /* alarm4 = "Zixi" */
#configuration tr.alarm-warning-hidden0,
#configuration tr.alarm-warning-hidden1,
#configuration tr.alarm-warning-hidden2,
#configuration tr.alarm-warning-hidden3,
#configuration tr.threshold {
    display: none;
}

#configuration div.service_products {
    background-color: var(--c-grey-input);
    width: 325px;
    height: 34px;
    overflow: auto;
}

#datetimepicker {
    width: 150px;
}
input.spinner_volumes {
    width: 35px;
}
input.spinner_limit {
    width: 35px;
}
span.dateformat {
    font-family: rw-Bold;
    padding-left: 10px;
}

/* %%% pidbox */
#pidbox {
    float: left;
    border: 1px solid var(--c-grey);
    padding: 20px 25px 0px 15px;
    width: 375px;
    height: 200px;
    overflow: auto;
}
#pidbox table {
    width: 375px;
}
#pidbox tr.odd {
}
#pidbox tr.even {
    background-color: var(--c-grey);
}
#pidbox td.pidtype {
    font-weight: bold;
    width: 80px;
}
#pidbox td.pidnumber {
    width: 60px;
}
#pidbox td.piddelete {
    width: 30px;
}
#pidbox td.pid_deleted {
    text-decoration: line-through;
}
#pidbox td.piddelete img.del_pid_btn {
    cursor: pointer;
}
#pidbox td.piddelete img.no_pid {
    display: none;
}

/* %%% pidadd */
#pidadd {
    float: right;
    margin: 20px 20px 0px 0px;
    width: 210px;
}
#pidadd fieldset {
    border: 1px solid var(--c-grey);
    padding: 14px 0px 20px 10px;
}
#pidadd legend {
    font-family: rw-Bold;
}
#pidadd label {
    display: inline-block;
    width: 65px;
    height: 30px;
}
#pidadd .add_item {
    margin-left: 4px;
}
#pidadd input.add_item {
    padding: 0px 0px 0px 8px;
    border: none;
    outline: none;
    height: 22px;
}
#pidadd div.add_pid_btn {
    cursor: pointer;
    margin: 15px 0px 0px 130px;
}
#pidadd .selectBox-dropdown {
    min-width: 100px !important;
}

/* %%% piderr */
#piderr {
    margin-top: 10px;
    height: 24px;
}

/* %%% pidmpeg */
#pidmpeg {
    margin-top: 20px;
    width: 415px;
}
#pidmpeg fieldset {
    border: 1px solid var(--c-grey);
    padding: 14px 0px 20px 10px;
}
#pidmpeg legend {
    font-family: rw-Bold;
}
/* %%% pidmpeg -- RTP Headers Enabled: UDP or RTP */
#pidmpeg ul.rtp_headers {
    display: inline-block;
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
#pidmpeg ul.rtp_headers li {
    float: left;
    margin-right: 15px;
}
#pidmpeg ul.rtp_headers li input {
    height: 14px;
    margin: 0px 4px 0px 0px;
    width: unset;
}

#mpts-tree {
    margin-top: 10px;
    height: 275px;
    overflow: auto;
    border: 1px solid var(--c-grey);
}

/* %%% zixi */
#zixi {
    margin-top: 20px;
    width: 450px;
}
#zixi fieldset {
    border: 1px solid var(--c-grey);
    padding: 14px 0px 20px 10px;
}
#zixi legend {
    font-family: rw-Bold;
}

/* %%% zenmaster */
#zenmaster {
    margin-top: 20px;
    width: 550px;
}
#zenmaster fieldset {
    border: 1px solid var(--c-grey);
    padding: 14px 0px 20px 10px;
}
#zenmaster legend {
    font-family: rw-Bold;
}

/* %%% rawip */
#rawip {
    margin-top: 20px;
    width: 450px;
}
#rawip fieldset {
    border: 1px solid var(--c-grey);
    padding: 14px 0px 20px 10px;
}
#rawip legend {
    font-family: rw-Bold;
}
#rawip tr.addressing_mode td {
    padding-bottom: 15px;
}
#rawip tr.addressing_mode input[name=ip_mode] {
    width: unset;
}
#rawip tr.addressing_mode input[name=ip_mode]:nth-child(2) {
    margin-left: 25px;
}

/* %%% hls_urls */
#hlsbackup {
    margin-top: 20px;
    width: 660px;
}
#hlsbackup fieldset {
    border: 1px solid var(--c-grey);
    padding: 14px 0px 20px 10px;
}
#hlsbackup legend {
    font-family: rw-Bold;
}

div.zixi_and_zen {
    display: none;
}

/* %%% xd_license */
#xd_license {
    margin-top: 20px;
    width: 500px;
}
#xd_license fieldset {
    border: 1px solid var(--c-grey);
    padding: 14px 0px 20px 10px;
}
#xd_license legend {
    font-family: rw-Bold;
}

/* %%% Trigger Activate */
#trigger_activate {
    display: inline-block;
    list-style-type: none;
    padding: 0px;
    margin: 0px 0px 20px 0px;
}
#trigger_activate li {
    padding-top: 8px;
    float: left;
}
#trigger_activate li.label {
    font-family: rw-Bold;
    margin-right: 4px;
}
#trigger_activate li.decoder {
    margin-right: 10px;
    display: none;
}
#trigger_activate li.decoder input[type=radio] {
    margin-right: 4px;
    width: unset;
}
#trigger_activate li.trigger {
    width: 150px;
    margin: 0px 25px;
}
#trigger_activate li.commit {
    padding-top: 0px;
}

/* %%% Backup Trigger */
#trigger_backup {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    row-gap: 4px;   /* vertical spacing between rows */
    column-gap: 20px; /* horizontal spacing between items */
}
/* Make "Backup Trigger:" span full width */
#trigger_backup .label.full-width {
    flex: 1 0 100%;
    font-family: rw-Bold;
    margin-bottom: 4px;
}
#trigger_backup .decoder label {
    font-weight: bold;
    margin-bottom: 4px;
}
/* Style decoders in a grid-style */
#trigger_backup .decoder {
    display: flex;
    flex-direction: column;
    min-width: 140px; /* Optional: control width */
    margin-bottom: 8px;
}
#trigger_backup li.decoder {
    display: show; /*Need to default as show so Dropbox.select sizes correctly*/
}

/* %%% triggers */
#triggers tr.trigger {
    cursor: pointer;
}
#triggers tr.trigger:hover {
    background-color: var(--c-grey);
}
#triggers tr.trigger td div.TriggerID {
    width: 70px;
    word-wrap: break-word;
}
#triggers tr.trigger td div.Description {
    width: 320px;
    word-wrap: break-word;
    margin: 6px 0px;
}
#triggers tr.trigger_content {
    display: none;
}
#triggers tr.trigger_content tr.content td div.FileName {
    font-family: rw-RegularItalic;
    width: 570px;
    word-wrap: break-word;
    margin: 6px 0px;
}
#triggers tr.trigger_content tr.fade_row div.FadeInfo{ 
    width: 570px;
    word-wrap: break-word;
    margin: 6px 0px; 
}
#triggers tr.incomplete {       /* Entire row for either Trigger or Trigger Content */
    color: var(--c-red);
}

/* %%% User-Defined trigger properties */
#add_trigger_properties #trigger_id{
    width: 80px;
    padding: 0px 8px 0px 8px
}
#add_trigger_properties #earliest_datepicker{
    width: 80px;
    padding: 0px 8px 0px 8px
}
#add_trigger_properties #expiry_datepicker{
    width: 80px;
    padding: 0px 8px 0px 8px
}

#triggerFileList{
    margin-left: 100px;
}
#triggerFileList tr.trigger_content div.FileIdx {
    font-family: rw-RegularItalic;
    width: 25px;
}
#triggerFileList tr.trigger_content div.FileName {
    font-family: rw-RegularItalic;
    width: 450px;
    word-wrap: break-word;
}

/* %%% channels - listing */
#channels {
    margin-top: 50px;
}

#channels table {
    margin-top: 14px;
}

#channels th {
    padding: 2px 0px 2px 6px;
    border-bottom: 1px solid var(--c-grey);
}
#channels td {
    height: 36px;
}
#channels td.data_col {
    padding: 2px 4px;
}
#channels td.button_col {
    padding: 2px 0px;
}
#channels td {
    border-bottom: 1px solid var(--c-grey);
}
#channels td.left {
    border-left: 1px solid var(--c-grey);
}
#channels td.right {
    border-right: 1px solid var(--c-grey);
    padding: 0px 5px;
}

#channels img.inedit {
    display: none;
}

#channels div.add_channel_btn {
    cursor: pointer;
    margin: 30px 0px 10px 0px;
}

/* %%% channel_add - add box */
#channel_add {
    margin-top: 25px;
    display: none;
}

#channel_add div.channel_button {
    width: 125px;
}

/* %%% trigger_add - add box */
#trigger_add {
    margin: 0px 20px 20px 20px;
    display: none;
}

/* %%% General Audio parameters */
table.audio {
    margin-top: 25px;
}

/* Input Widths for Channel List and Channel Add */
div[data-c_list=id] {
    width: 60px;
}
input[data-c_add=id] {
    width: 90px;
}
input[data-c_list=name],
input[data-c_add=name] {
    width: 136px;
}
input[data-c_add=description] {
    width: 250px;
}
select[data-c_list=type],
select[data-c_add=type] {
    width: 60px;
}
input[data-c_list=ip],
input[data-c_add=ip] {
    width: 110px;
}
input[data-c_list=port],
input[data-c_add=port] {
    width: 46px;
}
input[data-c_list=pid],
input[data-c_add=pid] {
    width: 46px;
}

div.videoSettingsLine {
    height: 22px;
    width: 360px;
}
div.autoSettingsLine {
    display: none;
    padding: 2px 5px;
    height: 18px;
    width: 350px;
    color: var(--c-grey-bg);
    background-color: var(--c-grey-input);
    /* Disable Text Select ... */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by any browser but < IE9 */
}


/* ::: /system/info
 **************************************************/
#share_line {
    margin-top: 7px;
    border: 1px solid var(--c-blue);
    border-bottom: none;
}
#share_info {
    display: none;
    border: 1px solid var(--c-blue);
    border-top: none;
    padding: 8px;
    height: 175px;
}
#share_info input {
    padding: 0px 0px 0px 8px;
    border: none;
    outline: none;
    height: 22px;
}
div.share_label {
    margin-bottom: 4px;
}

#contact_info > div.heading {
    font-family: rw-Bold;
    margin: 20px 0px 30px 0px;
}
#contact_info > div.info a {
    color: var(--c-white);
    text-decoration: none;
}

#downloads > div.heading {
    font-family: rw-Bold;
    margin: 20px 0px 20px 0px;
}
#downloads a {
    color: var(--c-orange);
    text-decoration: none;
}

#sysinfo div.pidbox {
    border: 1px solid var(--c-grey);
    padding: 20px 25px 0px 15px;
    margin-bottom: 20px;
    width: 375px;
    height: 200px;
    overflow: auto;
}
#sysinfo div.pidbox > table.pidlist_section {
    width: 375px;
    margin-bottom: 20px;
}
#sysinfo div.pidbox > table.pidlist_section tr.odd {
}
#sysinfo div.pidbox > table.pidlist_section tr.even {
    background-color: var(--c-grey);
}
#sysinfo div.pidbox > table.pidlist_section td.pidtype {
    font-weight: bold;
    width: 80px;
}
#sysinfo div.pidbox > table.pidlist_section td.pidnumber {
    width: 60px;
}