/*   Reset - Copied from: http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126   */

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
    menu, route, nav, output, ruby, section, summary, time, mark, audio, video
      { margin: 0; padding: 0; border: 0; outline: 0; border-style: none; text-indent: 0;
        font-size: 100%; font: inherit; vertical-align: baseline; text-decoration: none; }
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, route, nav, section
      { display: block; }
    html, body { text-align: center; height: 100%; overflow: auto; vertical-align: top; box-sizing: border-box; }
    html { background: #DDD; }
    body { font-family: Arial; font-size: 10pt; line-height: 110%; }
    ol, ul { list-style: none; text-align: left; }
    blockquote, q { quotes: none; }
    blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
    table { box-sizing: border-box; border-collapse: collapse; border-spacing: 0; height: auto;
            table-layout: fixed; background-color: transparent; vertical-align: top; }
    th, td { box-sizing: border-box; height: auto; text-align: left; vertical-align: top; overflow: hidden; }
    a:hover { text-decoration: underline; cursor: pointer; }
    h1,h2,h3,h4 { font-weight: bold; }
    h1 { font-size: 1.5em; }
    h2 { font-size: 1.3em; }
    h3 { font-size: 1.2em; }
    h4 { font-size: 1.1em; }

    /*  Button Styles  */

    select, textarea, input { margin: 0px; }
    select { padding-top: 2px; }
    input[type="text"], textarea { padding-left: 2px; }
    input[type="button"], input[type="submit"], input[type="reset"] { padding-left: 5px; padding-right: 5px; }
    input[type="checkbox"] { margin-top: 2px; margin-bottom: -2px; }

    /*  Date Picker  */

    .ui-datepicker-trigger { position: relative; top: 1px; left: 1px; width: 20px; height: 20px; margin: 0px;
      padding: 0px 2px 0px 2px; line-height: 4px; vertical-align: top; }

    /*   General List Table Styles   */

    table.list { border-style: solid; }
    th.colhead, td.colhead, th.header, td.header { font-weight: bold; border-width: 1px; }
    th.header, td.header { font-size: 11pt; line-height: 120%; }
    th.colend, td.colend { border-right-width: 1px; border-right-style: solid; }
    th.heading, td.heading, td.buttonpanel
      { border-width: 0; border-style: solid; border-bottom-width: 1px;
        font: 1.2em Arial, helvetica, "sans serif"; font-weight: bold; }
    th.head,   td.head   { font-weight: bold;  border-bottom-width: 1px; }
    th.label,  td.label  { text-align: right;  }
    th.num,    td.num    { text-align: right;  }
    th.flag,   td.flag   { text-align: center; overflow: hidden; }
    th.time,   td.time   { text-align: center; }
    td.buttonpanel       { text-align: center; }
    th.image, td.image { text-align: center; white-space: nowrap; }
    td.success { color: #FFFFFF; font-weight: bolder; }
    td.search { padding-top: 6px; padding-bottom: 3px; }
    td.totals
      { border-top-width: 1px; border-top-style: solid;
        border-bottom-width: 3px; border-bottom-style: double; }
    .clickable:hover
      { text-decoration: underline; cursor: pointer; background: #FFEFEF; }
    .recordRow { font-size: 8pt; }
    .reconAlert {background-color: tomato}
    tr.disabled { text-decoration: line-through; }
    div.floating_link
      { position: absolute; background: transparent; z-index: 9999999; }
    div.floating_link:hover, img.clickable:hover
      { cursor: pointer; background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.2); }

    /*   General Panel Table Styles   */

    table.panelouter
      { display: inline-table; border-collapse: separate; table-layout: fixed;
        border-width: 3px; border-style: solid; }
    table.panelinner { border: 0; padding: 2px; margin: 0; width: 100%; table-layout: fixed; }
    td.panelouter, td.panelinner { border: 0; margin: 0; padding: 0; width: auto; text-align: center; }
    td.panelouter { vertical-align: top; }
    font.rangelabel { font-weight: bold; }
    th.paneltitle, td.paneltitle, th.panelhead, td.panelhead, th.panelbuttons, td.panelbuttons
      { font: 1.2em Arial, helvetica, "sans serif"; font-weight: bold; padding: 5px; vertical-align: middle; }
    th.paneltitle, td.paneltitle, th.panelhead, td.panelhead { border-style: solid; border-bottom-width: 1px; }
    th.paneltitle, td.paneltitle { text-align: center;}
    th.panelhead, td.panelhead, td.panelseparator { text-align: left; }
    th.panelbuttons, td.panelbuttons { text-align: center; border-style: solid; border-top-width: 1px; }
    td.panellabel { vertical-align: middle; padding: 1px; text-align: right; font-weight: bold; }
    td.panelvalue { vertical-align: middle; padding: 1px; text-align: left; }
    td.instruction { padding-top: 9px; padding-left: 5px; padding-right: 5px; text-align: center; }
    td.reportitem { padding-top: 10px; padding-left: 3px; cursor: pointer}
    td.reportitem:hover {color: #A88E2F}
    td.report_footer { display: none; }
    td.heading1, td.heading2, td.heading3, td.heading4,
    th.heading1, th.heading2, th.heading3, th.heading4 { font-weight: bold; text-align: center; }
    td.heading1, th.heading1 { font-size: 150%; }
    td.heading2, th.heading2 { font-size: 130%; }
    td.heading3, th.heading3 { font-size: 120%; }
    td.heading4, th.heading4 { font-size: 110%; }

    /*   General for this site.   */

    body { color: #172033; background: #FFF; }

    /*  DIV Matrix  */

    div.banner, div.logo, div.menu, div.route, div.content
      { text-align: left; overflow: visible; display: block; position: absolute;
        -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    div.banner, div.logo, div.menu, div.route { overflow-y: visible; z-index: 1000; }
    div.banner  { width: 960px; height: 90px; }
    div.logo    { width: 130px; height: 90px; background-size: 122px auto; background-color: #FFFFFF; background-position: center;
                  background-repeat: no-repeat; background-image: url("../../main/image/tollink-logo.png?v=tollink_2_7_1_2_20260820_222852"); }
    div.menu    { top: 0px; left: 130px; width: 830px; height: 90px; background: #FFF; }
    div.route   { top: 60px; left: 50%; margin-left: 320px; right: auto; width: 100px; height: auto; background: transparent;
                  position: absolute; z-index: 2000; font-size: 150%; font-weight: bold; text-align: center; }
    div.content { top: 0px; left: 0px; width: 960px; height: auto; padding: 10px; margin-top: 90px;
                  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
                  background: #FFF; overflow-y: auto;  }
    div.bannervis { -webkit-box-sizing: padding-box; -moz-box-sizing: padding-box; box-sizing: padding-box;
                    display: block; position: absolute; top: 0px; left: 50%; margin-left: 423px; width: 56px; height: 56px;
                    z-index: 1200; background-color: #EEE; background-repeat: no-repeat;
                    background-image: linear-gradient(to bottom, #FFF, #BBB);
                    background-position: center; box-shadow: inset 0 0 0 1px #FFF; cursor: pointer;
                    border-width: 0px 0px 1px 1px; border-style: solid; border-color: #AAA;
                    border-radius: 0px 0px 0px 25px; }
    div.bannervis img { position: relative; left: 3px; top: 1px; }
    div.smallmap { width: 400px; height: 300px; border: 1px solid #ccc; }

    /*   Menu   */

    div.topmenu, div.mainmenu
      { overflow: visible; vertical-align: top; color: #222;
        font-weight: bold; font-style: normal; font-size: 12px; font-family: Arial; }
    div.topmenu ul, div.mainmenu ul
      { display: inline-block; position: relative; float: left; }
    div.topmenu ul li ul, div.mainmenu ul li ul
      { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%; }
    div.topmenu ul li ul li ul, div.mainmenu ul li ul li ul
      { visibility: hidden; position: absolute; top: -1px; left: 151px; }
    div.topmenu ul li:hover ul, div.mainmenu ul li:hover ul { visibility: visible; }
    div.topmenu ul li:hover ul li ul, div.mainmenu ul li:hover ul li ul { visibility: hidden; }
    div.topmenu ul li ul li:hover ul, div.mainmenu ul li ul li:hover ul { visibility: visible; }
    div.topmenu ul li, div.mainmenu ul li
      { display: inline-block; position: relative; float: left;
        width: 80px; text-align: center; padding-top: 9px; padding-bottom: 8px;
        background-color: #DDD; background-image: linear-gradient(to bottom, #FFF, #EEE);
        box-shadow: inset 0 0 0 1px #FFF; text-shadow: 0 1px #FFF; }
    div.topmenu ul li:hover, div.mainmenu ul li:hover
      { text-decoration: underline; cursor: pointer; }
    div.topmenu ul li ul li, div.mainmenu ul li ul li
      { width: 150px; float: none; border-bottom-style: dotted; border-bottom-color: black; border-bottom-width: 1px; }

    div.topmenu
      { float: right; height: 34px; padding-left: 40px; margin-top: 10px; margin-right: 62px; background: #D5D5D5;
        border-color: #D5D5D5 #D2D2D2 #CCC #FFF; border-width: 1px; border-style: solid; border-radius: 4px; }
    div.topmenu ul li
      { border-width: 1px; border-style: solid; border-color: #DDD; }
    div.topmenu ul li:first-child { border-radius: 3px 0 0 3px; }
    div.topmenu ul last-child { border-radius: 0 3px 3px 0; }
    div.topmenu ul li:hover { border-color: #BBB; }
    div.topmenu ul li:active, div.topmenu ul li.active { border-color: #0D1F61; background: #FFF; }
    div.topmenu .badge
      { display: block; position: absolute; top: -12px; right: 3px; width: 16px; height: 16px;
        color: white; padding: 0 5px; border: 1px solid; border-radius: 10px; }

    div.mainmenu
      { font-size: 11px; display: block; position: absolute; top: 50px; left: 30px; width: 800px; height: 30px;
        border-bottom-width: 10px; border-bottom-style: solid; border-bottom-color: #0D1F61; }
    div.mainmenu ul li
      { color: #222; font-weight: bold; border-top-color: #FFF; border-top-width: 1px; border-top-style: solid;
        border-right-color: #BBB; border-right-width: 1px; border-right-style: solid;
        padding-top: 9px; padding-bottom: 9px; }
    div.mainmenu ul li:hover
      { border-top-color: #CCC; border-right-color: #888; }
    div.mainmenu ul li:active, div.mainmenu ul li.active
      { text-shadow: none; font-weight: normal; box-shadow: none;
        background: #0D1F61; color: white; border-top-color: #0D1F61; }

    /*   Table Styles   */

    table.list { border-color: #0D1F61; border-width: 3px; }
    th.colhead, td.colhead, th.header, td.header { color: #040f59; background: #a5c0f2; border-style: outset; }
    th.heading, td.heading, td.buttonpanel
      { background: #a5c0f2; color: #0D1F61; border-color: #0D1F61; }
    td.totals { border-top-color: #cfcfcf; border-bottom-color: #cfcfcf; }
    .dormant { text-decoration: line-through; }

    /*   Panel Styles   */

    table.panelouter { border-color: #0D1F61; }
    font.rangelabel { color: #0D1F61; }
    th.paneltitle, td.paneltitle, th.panelhead, td.panelhead { color: #0D1F61; background: #a5c0f2; }
    th.paneltitle, td.paneltitle { border-color: #0D1F61; }
    th.panelhead, td.panelhead { color: #0D1F61; background: #a5c0f2; }
    td.panelseparator { font: 1em Arial; font-weight: bold; padding: 4px 5px 2px 20px; color: #040f59; background: #a5c0f2;
                        border-style: solid; border-width: 1px 0 1px 0; }
    th.panelbuttons, td.panelbuttons
      { color: #0D1F61; background: #a5c0f2; padding: 5px; border-color: #0D1F61; }

    /*   Styles used on the view period selector.   */

    div.view_period { width: 1000px; height: 67px; }
    td.view_period, td.view_run { background-position: bottom; background-repeat: no-repeat; }
    td.view_period, td.view_period_label { padding: 0px; margin: 0px; border: 0px; }
    td.view_period_label { text-align: right; font-weight: bold; padding-top: 3px; padding-right: 2px; }
    td.view_period_value { padding: 1px; margin: 0px; border: 0px; }
    td.view_run { padding: 0px; height: 54px; width: 48px; }
    select.view_period { padding: 0px; font-size: 12px; width: 100px; height: 20px; }
    td.view_dates { padding-top: 9px; white-space: nowrap; }
    span.text { padding-left: 2px; font-weight: bold; }

    /*   Chart Styles   */

    img.toggle_button { cursor: pointer; backgroundColor: #000000; }

    /*   Validation List   */

    table.valentry
      { padding: 0; color: #000000; background: #CFCFCF;
        border-color: #000000; border-style: solid; border-width: 1px; }
    td.valentry { padding: 0; }
    td.valentry_h1, td.valentry_h2, td.valentry_h3, td.valentry_h4
      { color: #000000; font-weight: bold; line-height: 130%; }
    td.valentry_h1 { font-size: 18px; }
    td.valentry_h2 { font-size: 15px; }
    td.valentry_h3 { font-size: 13px; }
    td.valentry_h4 { font-size: 12px; }
    td.valentry_label { color: #000000; text-align: right; }
    td.valentry_value { color: #000000; background: #FFFFFF; border-color: #CFCFCF; border-style: outset; border-width: 1px; }
    .vehicle_state_green { color: green; }
    .vehicle_state_red   { color: red; }
    .vehicle_state_nol   { color: #AAA; text-decoration: line-through; }
    .vehicle_state_bgrey { color: grey; }
    .vehicle_state_pgrey { color: grey; }
    .vehicle_state_vosi  { color: blue; }
    .vehicle_state_imre  { color: red; }

    /*    Notifications style      */

    .wait, .info, .success, .warning, .error
      { font-size: 11pt; border: 2px solid; margin: 10px 0px; padding:15px 10px 15px 50px; background-repeat: no-repeat;
        background-position: 10px center; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; }
    .wait    { color: #00529B; background-color: #BDE5F8; }
    .info    { color: #00529B; background-color: #BDE5F8; background-image: url('/main/image/info.png');    }
    .success { color: #4F8A10; background-color: #DFF2BF; background-image: url('/main/image/success.png'); }
    .warning { color: #9F6000; background-color: #FEEFB3; background-image: url('/main/image/warning.png'); }
    .error   { color: #D8000C; background-color: #FFBABA; background-image: url('/main/image/error.png');   }

    /*   Styles used on the lane table.   */

    td.lane { padding-left: 50px; }
    td.lane_cc { font-weight: bold; font-size: 14px; }
    td.lane_pl { font-weight: bold; font-size: 14px; padding-left: 10px; }
    td.lane_ln { font-weight: bold; font-size: 12px; padding-left: 21px; }

    /*   Styles used for modal dialogs.   */

    .modal_background { position: absolute; z-index: 99999999; background-color: rgba(127, 127, 127, 0.75); top: 0; left: 0; width: 960px; height: 100%;}
    .modal_background .modal { position: relative; margin: 50px; width: 860px;  border: 2px solid #666; border-radius: 12px; background-color: #FFF; }
    .modal_background .modal .close { position: absolute; top: 5px; left: 831px; background-image: url('/main/image/cancel.png');
                                      z-index: 999999999; width: 24px; height: 24px; }
    .modal_background .modal h2 { padding: 10px 5px 5px 5px; }
    .modal_background .modal button { margin-bottom: 0.5em; }
    .modal_background .modal .inner_content { padding: 10px 5px 5px 5px; }

    /*   Styles used on the traffic comparison graphs.   */

    #PeriodSelector { overflow: visible; }
    .tabs { height: 30px; overflow: visible;
            -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 2px; }
    .tabs div { background-color: #AAA; border-width: 3px; border-style: solid; border-radius: 12px 12px 0px 0px;
                -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
                border-color: #CAAF46 #CAAF46 #0D1F61 #CAAF46; height: 28px; display: inline-block; padding-top: 4px;
                text-align: center; vertical-align: middle; font-weight: bolder; cursor: pointer; }
    .tabs div:hover { background-color: silver; }
    .tabs .active, .tabs .active:hover { background-color: #FFFFFF; border-color: #0D1F61; border-bottom-width: 0; }
    .tabs .active:hover { cursor: default;  }

    /*   Styles used for charts.   */

    .highcharts-container { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
                            border-style: solid; border-width: 0px; border-color: #0D1F61; }

    /*   Styles used for progress panels.   */

    table.progress_panel { width: 100%; margin: 0; border: 0; padding: 0; table-layout: fixed; }
    table.progress_panel > tr > td { padding: 0px 4px 0px 0px; }
    div.progress_title { width: 100%; height: 40px; margin-top: 10px; font-size: 18px; text-decoration: underline;
                         font-weight: bold; overflow: hidden; display: inline-block; }
    div.progress_back { width: 100%; height: 20px; background: #BBB; margin: 1px;
                        border-radius: 10px; border-width: 1px; border-color: #840; border-style: solid; }
    div.progress_bar  { width: 14px; height: 14px; background-color: #CAAF46; margin: 2px;
                        border-radius: 7px; border-style: outset; border-width: 1px; border-color: #CAAF46; }
    div.progress_caption { z-index: 10; width: 100%; height: 100%; position: relative; padding: 3px; top: -20px; left: -1px;
                           color: white; font-weight: bold; background: transparent; text-align: center; }
    div.progress_panel > input { float: right; }

    /*   Help Page Styles   */

    body.help h1, body.help h2, body.help h3, body.help h4, body.help p { text-align: left; padding-left: 1em; padding-right: 1em; }
    body.help h1, body.help h2, body.help h3, body.help h4 { padding-top: 1em; padding-bottom: 1em; }
    body.help ul.disc { padding: 1em 1em 1em 1em; display: table; }
    body.help ul.disc li { display: table-row; padding-left: 2em; }
    body.help ul.disc li:before { content: "-"; display: table-cell; padding-right: 0.5em; }

    /*   Layer switcher   */

    .olControlLayerSwitcher
      { position: absolute; top: 25px; right: 0px; width: 20em; font-family: sans-serif; font-weight: bold;
        margin-top: 3px; margin-left: 3px; margin-bottom: 3px; font-size: smaller; font-color: white; color: white;
        background-color: transparent; }
    .olControlLayerSwitcher .layersDiv
      { color: white; width: 100%; height: 100%; padding-top: 5px; padding-left: 10px; padding-bottom: 5px;
        padding-right: 75px; background-color: #0D1F61; }
    .olControlLayerSwitcher .layersDiv .baseLbl,
    .olControlLayerSwitcher .layersDiv .dataLbl
      { color: white; margin-top: 3px; margin-left: 3px; margin-bottom: 3px; }
    .baseLbl, .dataLbl { padding-top: 3px; padding-bottom: 3px; font-weight: bold; }
    .labelSpan { padding-left: 5px; line-height: 120%; }
    .olControlMousePosition { color: black; background-color: yellow; opacity:0.7; font-weight: bold;  }
    .olControlLayerSwitcher .layersDiv .baseLayersDiv,
    .olControlLayerSwitcher .layersDiv .dataLayersDiv
      { color: white; padding-left: 10px; }
    .olControlLayerSwitcher .maximizeDiv, .olControlLayerSwitcher .minimizeDiv
      { color: white; top: 5px; right: 0px; }
    .olLayerGooglePoweredBy, .olLayerGoogleCopyright, .gmnoprint { display: none; }

    /*   Open Layers Map Styles   */

    div.olMap { z-index: 0; padding: 0px !important; margin: 0px !important; cursor: default; }
    div.olMapViewport { text-align: left; }
    div.olLayerDiv { -moz-user-select: none; }
    .olLayerGoogleCopyright { left: 2px; bottom: 2px; }
    .olLayerGooglePoweredBy { left: 2px; bottom: 15px; }
    .olControlAttribution { font-size: smaller; right: 3px; bottom: 4.5em; position: absolute; display: block; }
    .olControlScale { right: 3px; bottom: 3em; display: block; position: absolute; font-size: smaller; }
    .olControlScaleLine { display: block; position: absolute; left: 10px; bottom: 15px; font-size: xx-small; }
    .olControlScaleLineBottom { border: solid 2px black; border-bottom: none; margin-top:-2px; text-align: center; }
    .olControlScaleLineTop { border: solid 2px black; border-top: none; text-align: center; }
    .olControlPermalink { right: 3px; bottom: 1.5em; display: block; position: absolute; font-size: smaller; }
    div.olControlMousePosition
      { bottom: 0em; right: 3px; display: block; position: absolute; font-family: Arial; font-size: smaller; }
    .olControlOverviewMapContainer { position: absolute; bottom: 0px; right: 0px; }
    .olControlOverviewMapElement
      { padding: 10px 18px 10px 10px; background-color: #00008B; -moz-border-radius: 1em 0 0 0; }
    .olControlOverviewMapMinimizeButton { right: 0px; bottom: 80px; }
    .olControlOverviewMapMaximizeButton { right: 0px; bottom: 80px; }
    .olControlOverviewMapExtentRectangle
      { overflow: hidden; background-image: url("img/blank.gif"); cursor: move; border: 2px dotted red; }
    .olControlOverviewMapRectReplacement
      { overflow: hidden; cursor: move; background-image: url("img/overview_replacement.gif");
        background-repeat: no-repeat; background-position: center; }
    .olLayerGeoRSSDescription { float:left; width:100%; overflow:auto; font-size:1.0em; }
    .olLayerGeoRSSClose { float:right; color:gray; font-size:1.2em; margin-right:6px; font-family:sans-serif; }
    .olLayerGeoRSSTitle { float:left;font-size:1.2em; }
    .olPopupContent { padding:5px; overflow: auto; }
    .olControlNavToolbar { width:0px; height:0px; }
    .olControlNavToolbar div { display:block; width:  28px; height: 28px; top: 300px; left: 6px; position: relative; }
    .olControlNavigationHistory
      { background-image: url("img/navigation_history.png"); background-repeat: no-repeat; width: 24px; height: 24px; }
    .olControlNavigationHistoryPreviousItemActive { background-position: 0px 0px; }
    .olControlNavigationHistoryPreviousItemInactive { background-position: 0px -24px; }
    .olControlNavigationHistoryNextItemActive { background-position: -24px 0px; }
    .olControlNavigationHistoryNextItemInactive { background-position: -24px -24px; }
    .olControlNavToolbar .olControlNavigationItemActive
      { background-image: url("img/panning-hand-on.png"); background-repeat: no-repeat; }
    .olControlNavToolbar .olControlNavigationItemInactive
      { background-image: url("img/panning-hand-off.png"); background-repeat: no-repeat; }
    .olControlNavToolbar .olControlZoomBoxItemActive
      { background-image: url("img/drag-rectangle-on.png"); background-color: #CAAF46; background-repeat: no-repeat; }
    .olControlNavToolbar .olControlZoomBoxItemInactive
      { background-image: url("img/drag-rectangle-off.png"); background-repeat: no-repeat; }
    .olControlEditingToolbar
      { float:right; right: 0px; height: 30px; width: 200px; }
    .olControlEditingToolbar div
      { background-image: url("img/editing_tool_bar.png"); background-repeat: no-repeat;
        float:right; width: 24px; height: 24px; margin: 5px; }
    .olControlEditingToolbar .olControlNavigationItemActive { background-position: -103px -23px; }
    .olControlEditingToolbar .olControlNavigationItemInactive { background-position: -103px -0px; }
    .olControlEditingToolbar .olControlDrawFeaturePointItemActive { background-position: -77px -23px; }
    .olControlEditingToolbar .olControlDrawFeaturePointItemInactive { background-position: -77px -0px; }
    .olControlEditingToolbar .olControlDrawFeaturePathItemInactive { background-position: -51px 0px; }
    .olControlEditingToolbar .olControlDrawFeaturePathItemActive { background-position: -51px -23px; }
    .olControlEditingToolbar .olControlDrawFeaturePolygonItemInactive { background-position: -26px 0px; }
    .olControlEditingToolbar .olControlDrawFeaturePolygonItemActive { background-position: -26px -23px; }
    div.olControlSaveFeaturesItemActive
      { background-image: url(img/save_features_on.png); background-repeat: no-repeat; background-position: 0px 1px; }
    div.olControlSaveFeaturesItemInactive
      { background-image: url(img/save_features_off.png); background-repeat: no-repeat; background-position: 0px 1px; }
    .olHandlerBoxZoomBox
      { border: 2px solid red; position: absolute; background-color: white;
        opacity: 0.50; font-size: 1px; filter: alpha(opacity=50); }
    .olHandlerBoxSelectFeature
      { border: 2px solid blue; position: absolute; background-color: white;
        opacity: 0.50; font-size: 1px; filter: alpha(opacity=50); }
    .olControlPanPanel { top: 10px; left: 5px; }
    .olControlPanPanel div
      { background-image: url(img/pan-panel.png); height: 18px; width: 18px; cursor: pointer; position: absolute; }
    .olControlPanPanel .olControlPanNorthItemInactive { top: 0px; left: 9px; background-position: 0px 0px; }
    .olControlPanPanel .olControlPanSouthItemInactive { top: 36px; left: 9px; background-position: 18px 0px; }
    .olControlPanPanel .olControlPanWestItemInactive
      { position: absolute; top: 18px; left: 0px; background-position: 0px 18px; }
    .olControlPanPanel .olControlPanEastItemInactive
      { top: 18px; left: 18px; background-position: 18px 18px; }
    .olControlZoomPanel { top: 71px; left: 14px; }
    .olControlZoomPanel div
      { background-image: url(img/zoom-panel.png); position: absolute; height: 18px; width: 18px; cursor: pointer; }
    .olControlZoomPanel .olControlZoomInItemInactive { top: 0px; left: 0px; background-position: 0px 0px; }
    .olControlZoomPanel .olControlZoomToMaxExtentItemInactive { top: 18px; left: 0px; background-position: 0px -18px; }
    .olControlZoomPanel .olControlZoomOutItemInactive { top: 36px; left: 0px; background-position: 0px 18px; }
    .olPopupCloseBox { background: url("img/close.gif") no-repeat; cursor: pointer; }
    .olFramedCloudPopupContent { padding: 5px; overflow: auto; }
    .olControlNoSelect { -moz-user-select: none; }
    .olImageLoadError { background-color: pink; opacity: 0.5; filter: alpha(opacity=50); }
    .olCursorWait { cursor: wait; }
    .olDragDown { cursor: move; }
    .olDrawBox { cursor: crosshair; }
    .olControlDragFeatureOver { cursor: move; }
    .olControlDragFeatureActive.olControlDragFeatureOver.olDragDown { cursor: -moz-grabbing; }
    div.ajax-loading{
                position: fixed;
                top: 0;
                left: 0;
                height:100%;
                width:100%;
                z-index: 9999999;
                background-image:url('../image/ajax-loader.gif');
                background-repeat:no-repeat;
                background-attachment:fixed;
                background-position:center;
                background-color: #000000;
                opacity: 0.3;
                filter: alpha(opacity=30); /* ie */
                -moz-opacity: 0.3; /* mozilla */
                /*display:none;*/
            }


    /* ============================================================
       TOLLINK EPG UI v2.6.3 - ORIGINAL LAYOUT, CENTRED
       ------------------------------------------------------------
       Original EPG layout geometry is intentionally untouched.
       Only the fixed 960px application is centred on wider screens.
       ============================================================ */

    html, body {
      margin: 0;
      padding: 0;
      background: #FFFFFF;
    }

    /* Original source is a fixed 960px application. Centre that exact canvas. */
    div.banner,
    div.content {
      left: 50%;
      margin-left: -480px;
    }

    /* On a viewport narrower than the original 960px design, use the
       original left-aligned behaviour rather than clipping half the page. */
    @media (max-width: 959px) {
      div.banner,
      div.content {
        left: 0;
        margin-left: 0;
      }

      div.route {
        left: 800px;
        margin-left: 0;
      }

      div.bannervis {
        left: 903px;
        margin-left: 0;
      }
    }

    /* Clean Tollink header surfaces; dimensions remain original. */
    div.banner,
    div.menu,
    div.logo,
    div.topmenu {
      background-color: #FFFFFF;
    }

    div.banner {
      border-bottom: 1px solid #D9E1EB;
    }

    div.topmenu {
      position: relative;
      z-index: 1300;
    }

    div.mainmenu {
      z-index: 1100;
      border-bottom-width: 0;
      border-bottom-style: none;
      border-bottom-color: transparent;
    }

    div.banner::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 8px;
      background: #CAAF46;
      z-index: 1050;
      pointer-events: none;
    }

    /* Main navigation branding only; no sizing changes. */

    div.mainmenu ul li:active,
    div.mainmenu ul li.active {
      background: #0D1F61;
      color: #FFFFFF;
      border-top-color: #CAAF46;
    }

    div.mainmenu ul li:hover {
      color: #0D1F61;
    }

    /* Light white/navy/gold theme without changing panel geometry. */
    table.list {
      border-color: #0D1F61;
    }

    th.colhead, td.colhead, th.header, td.header {
      color: #0D1F61;
      background: #FFFFFF;
    }

    table.panelouter {
      border-color: #0D1F61;
    }

    font.rangelabel {
      color: #0D1F61;
    }

    th.paneltitle, td.paneltitle,
    th.panelhead, td.panelhead,
    td.panelseparator,
    th.panelbuttons, td.panelbuttons {
      color: #0D1F61;
      background: #FFFFFF;
    }

    th.paneltitle, td.paneltitle,
    th.panelbuttons, td.panelbuttons {
      border-color: #CAAF46;
    }

    /* Retain the improved standalone Tollink login without affecting EPG forms. */
    body.login-page {
      min-width: 0;
      min-height: 100vh;
      margin: 0;
      padding: 24px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #FFFFFF;
    }

    .login-shell {
      width: min(92vw, 500px);
      text-align: center;
    }

    .login-brand {
      margin: 0 auto 18px;
      padding: 10px 16px 4px;
      text-align: center;
      background: transparent;
    }

    .login-brand img {
      display: block;
      width: min(320px, 78vw);
      height: auto;
      margin: 0 auto;
    }

    .login-panel {
      width: 100% !important;
      margin: 0 auto;
      background: #FFFFFF;
      border: 2px solid #0D1F61;
      border-collapse: separate;
      border-spacing: 0;
      box-shadow: 0 8px 24px rgba(13,31,97,0.14);
    }

    .login-panel .paneltitle {
      padding: 8px 10px;
      background: #FFFFFF;
      color: #0D1F61;
      border-color: #CAAF46;
      font-size: 12pt;
    }

    .login-panel .instruction {
      padding: 12px;
      text-align: center;
    }

    .login-panel .panellabel,
    .login-panel .panelvalue {
      padding-top: 5px;
      padding-bottom: 5px;
    }

    .login-panel .login-input {
      width: min(220px,100%) !important;
      height: 28px;
    }

    .login-panel .panelbuttons {
      padding: 12px;
      background: #FFFFFF;
      border-color: #CAAF46;
    }

    .login-panel .panelbuttons input {
      min-width: 90px;
      margin: 0 6px;
    }

    /* Deployment verification only. */
    body::after {
      content: "Tollink EPG UI v2.7.1.2";
      position: fixed;
      right: 8px;
      bottom: 6px;
      z-index: 99999;
      padding: 3px 7px;
      font: bold 10px Arial, Helvetica, sans-serif;
      color: #0D1F61;
      background: rgba(255,255,255,0.96);
      border: 1px solid #CAAF46;
      border-radius: 3px;
      pointer-events: none;
      white-space: nowrap;
    }


    /* ============================================================
       Tollink EPG UI v2.7.1.2 - SAFE CENTRED / v2.6.4.4 VISUAL BASELINE (ALT TOLL IMAGE)
       Visual-only: legacy EPG layout geometry remains untouched.
       ============================================================ */

    html {
      min-height: 100%;
      background: #071D33 url("../../main/image/tollink-epg-background.png?v=tollink_2_7_1_2_20260820_222852")
                  center center / cover fixed no-repeat;
    }

    body {
      min-height: 100vh;
      background: rgba(255,255,255,0.18);
    }

    div.banner {
      background: rgba(255,255,255,0.90);
      box-shadow: 0 3px 14px rgba(0,0,0,0.16);
    }

    div.logo,
    div.menu,
    div.topmenu {
      background-color: rgba(255,255,255,0.78);
    }

    div.content {
      background: rgba(255,255,255,0.94);
      box-shadow: 0 8px 24px rgba(0,0,0,0.16);
    }

    body.login-page {
      background:
        rgba(255,255,255,0.20)
        url("../../main/image/tollink-epg-background.png?v=tollink_2_7_1_2_20260820_222852")
        center center / cover fixed no-repeat;
    }

    .login-shell {
      padding: 20px;
      background: rgba(255,255,255,0.90);
      border-radius: 6px;
      box-shadow: 0 12px 34px rgba(0,0,0,0.22);
    }


    /* ============================================================
       v2.7.1 SAFE LARGE-SCREEN VERTICAL CENTRING
       ------------------------------------------------------------
       IMPORTANT:
       - No width/height/grid/chart/master-detail geometry changes.
       - Horizontal centring remains the original fixed 960px solution.
       - JavaScript only supplies --tollink-safe-center-y.
       - Smaller screens and tall pages automatically use 0px.
       ============================================================ */
    :root {
      --tollink-safe-center-y: 0px;
    }

    div.banner,
    div.content,
    div.route,
    div.bannervis {
      transform: translateY(var(--tollink-safe-center-y));
    }

    /* Plaza/smaller displays must never be vertically centred. */
    @media (max-width: 1399px), (max-height: 899px) {
      :root {
        --tollink-safe-center-y: 0px !important;
      }
    }


    /* ============================================================
       v2.7.1.2 RESPONSIVE BACKGROUND TOLLINK LOGO
       ------------------------------------------------------------
       The logo is no longer baked into the cover-scaled photograph.
       This prevents background cropping from cutting it off.
       The real transparent logo is rendered as a separate fixed layer.
       It is never scaled above the native 267px asset width.
       ============================================================ */
    body::before {
      content: "";
      position: fixed;
      left: clamp(14px, 1.8vw, 34px);
      bottom: clamp(24px, 4vh, 48px);
      width: clamp(160px, 14vw, 267px);
      aspect-ratio: 267 / 78;
      background-image: url("../../main/image/tollink-logo.png?v=tollink_2_7_1_2_20260820_222852");
      background-position: left center;
      background-size: contain;
      background-repeat: no-repeat;
      z-index: 1;
      pointer-events: none;
    }

    /* Keep the EPG itself above the decorative background logo. */
    div.content {
      z-index: 10;
    }

    /* Typical plaza/smaller display: smaller logo and modest lift. */
    @media (max-width: 1399px), (max-height: 899px) {
      body::before {
        left: 14px;
        bottom: 22px;
        width: clamp(150px, 18vw, 210px);
      }
    }

    /* Very short screens: preserve as much usable viewport as possible. */
    @media (max-height: 699px) {
      body::before {
        left: 10px;
        bottom: 12px;
        width: 145px;
      }
    }