/* Styles for the whole site.
 */
 :root{
   /* Colors*/
   --main-bg-color: #2F3D92;
   --secondary-bg-color: #D0DCF9;
   --light-bg-color: #E2E9F9 ;
   --ultra-light-bg-color: white;
}
@media all {
   /* Reset area */
   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, caption,
   dl, dt, dd, ol, ul, li, input, button,
   fieldset, form, label, legend,
   table, caption, tbody, tfoot, thead, tr, th, td,
   article, aside, canvas, details, embed, 
   figure, figcaption, footer, header, hgroup, 
   menu, nav, output, ruby, section, summary,
   time, mark, audio, video {
       margin: 0;
       padding: 0;
       border: 0;
       font-size: 12px;
       font-family: Arial,Helvetica,sans-serif;
   }
   /* HTML5 display-role reset for older browsers */
   article, aside, details, figcaption, figure, 
   footer, header, hgroup, menu, nav, section {
       display: block;
   }
   body {
       line-height: 1;
   }
   ol, ul {
       list-style: none;
   }
   blockquote, q {
       quotes: none;
   }
   blockquote:before, blockquote:after,
   q:before, q:after {
       content: '';
       content: none;
   }
   table {
       border-collapse: collapse;
       border-spacing: 0;
   }

   /* Standard HTML elements styles.
    * Standard elements design using CSS.
    */
   a:link,
   a:visited {
       color: #003EB1;
       text-decoration: none;
       font-weight: bold;
   }
   a:hover {
       color: #FFAB19;
       text-decoration: underline;
       font-weight: bold;
   }
   input,
   textarea,
   select {
       background-color: white;
       border: 1px solid var(--main-bg-color);
       font-size: 12px;
       font-family: Arial, Helvetica, sans-serif !important;
     padding: 2px;
     margin: 2px;
   }
   input[type="radio"],
   input[type="checkbox"] {
       border: none;
       background: transparent;
   }
   input[type="button"],
   input[type="submit"],
   input[type="reset"],
   button {
       text-align: center;
       vertical-align: middle;
       /* For incompatible browsers */
       background-color: var(--light-bg-color);
       /* IE10 Consumer Preview */
       background-image: -ms-linear-gradient(top, #FFFFFF 0%, var(--light-bg-color) 100%);
       /* Mozilla Firefox */
       background-image: -moz-linear-gradient(top, #FFFFFF 0%, var(--light-bg-color) 100%);
       /* Opera */
       background-image: -o-linear-gradient(top, #FFFFFF 0%, var(--light-bg-color) 100%);
       /* Webkit (Safari/Chrome 10) */
       background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF),
           color-stop(1, var(--light-bg-color)) );
       /* Webkit (Chrome 11+) */
       background-image: -webkit-linear-gradient(top, #FFFFFF 0%, var(--light-bg-color) 100%);
       /* W3C Markup, IE10 Release Preview */
       background-image: linear-gradient(to bottom, #FFFFFF 0%, var(--light-bg-color) 100%);
       border-color: #DEE6E9 #9EB3CD #9EB3CD #DEE6E9 !important;
       border-style: solid;
       border-width: 1px;
       padding: 2px 10px;
       margin: var(--margin-section);
       height: 28px;
   }
   h1,
   h2,
   h3,
   h4 {
       color: var(--main-bg-color);
   }
   h1 {
       font-size: x-large;
       margin-bottom: 15px;
   }
   h2 {
       font-size: large;
       margin-bottom: 10px;
   }
   h3 {
       font-size: larger;
       margin-bottom: 7px;
   }
   h4 {
       font-size: larger;
       font-style: italic;
       margin-bottom: 7px;
   }
   ul {
      margin: 10px 0;
      list-style: disc inside none;
   }
   ul li {
      margin: 2px 0;
   }

   #details_group {
      margin-top:0.5rem;
   }
   /* Styles for heading part. */
  .head_table {
       border: 0 !important;
       margin: 0;
       padding: 0;
       background-color: white;
       width: 100%;
  }
  .head_table td, tr {
       border: 0 !important;
       margin: 0;
       padding: 0;
  }
  .head_table td.td_logo {
       padding: 5px;
  }
  .head_table td.td_logo img {
       height: 52px;
  }
  .head_table td.td_menu {
       width: 100%;
       vertical-align: bottom;
   }
   .head_table td.td_user_panel {
       text-align: right;
       vertical-align: top;
       padding: 10px;
       width: 100%;
   }
   .head_table td.td_bar {
       height: 10px;
       background-color: var(--secondary-bg-color);
   }
   .footer {
       margin: 10px !important;
   }
   .footer table {
       width: 100%;
   }
   .about {
       vertical-align: middle;
       text-align: right;
       padding-right: 10px;
   }
   .wabtec-logo img {
       height: 30px;
   }


   /* Main container */
   .wrapper {
      width: 100%;
      min-width: 700px;
   }


   /* Site global blocks */
   .wrapper *.header {
      
   }
   .wrapper *.content {
      margin: 10px;
   }


   /* Main menu control */
   .menu {
      white-space: nowrap;
   }
   .menu * {
      display: block;
      color: white;
      background-color: var(--main-bg-color);
      margin: 4px 4px 0px 0px;
      padding: 7px 10px;
      border-radius: 6px 6px 0px 0px;
      font-weight: bold;
      float: left;
      text-transform: capitalize;
   }
   .menu a:link,.menu a:visited {
      color: white;
      text-decoration: none;
   }
   .menu a:hover {
      color: #FFAB19 !important;
   }
   .menu *.menu_selected {
      background-color: var(--secondary-bg-color);
      color: var(--main-bg-color) !important;
   }


   /* User panel control */
   .user_panel {
      display: block;
      white-space: nowrap;
      text-transform: capitalize;
   }
   .user_panel * {
      
   }
   .user_panel *.user_panel_separator {
      padding: 0px 2px 0px 2px;
   }

   /* Action panel */
   .action_panel {
      border-radius: 6px;
      background-color: var(--secondary-bg-color);
      padding: 7px;
      margin: 5px 0;
   }

   /* Error panel */
   .error_panel {
      border-radius: 6px;
      background-color: #FF9999;
      padding: 7px;
      margin: 5px 0;
      font-weight: bold;
   }

   /* Content panel and main content title */
   .content_panel {
      margin: 5px 0;
      padding: 7px;
      border: 1px solid var(--secondary-bg-color);
      border-radius: 6px;
   }
   .content_panel h1,.content h1 {
      color: var(--main-bg-color);
      font-size: 15px;
      font-weight: bold;
      padding-bottom: 5px;
      margin-bottom: 10px;
      border-bottom: 1px solid var(--secondary-bg-color);
   }
   .content_panel.hiddeable h1 {
      cursor: pointer;
   }
   .error_content_panel {
      margin: 10px 0;
      padding: 7px;
      border: 3px solid #FF0000;
      border-radius: 6px;   
   }
   .error_content_panel h1{
      color: var(--main-bg-color);
      font-size: 15px;
      font-weight: bold;
      padding-bottom: 5px;
      margin-bottom: 10px;
      border-bottom: 1px solid #FF0000;
   }
   
   /* Message classes */
   .message_error {
      font-weight: bold;
      color: #FF0000;
   }
   .message_warning {
      font-weight: bold;
      color: #FF9900;
   }
   .message_success {
      font-weight: bold;
      color: #00CC00;
   }
   .message_info {
      font-weight: bold;
      color:var(--main-bg-color);
   }
   .message_debug {
      font-weight: bold;
      color: #D46E00;
   }

   /* Tab control */
   .tab_control {
      
   }
   .tab_control table {
      width: 100%;
   }
   .tab_control table.info_table {
        width: auto;
    }
   .tab_control.menu {
      white-space: nowrap;
   }
   .tab_control.menu a {
      display: block;
      color: white;
      background-color:var(--main-bg-color);
      margin: 4px 4px 0px 0px;
      padding: 7px 10px;
      border-radius: 6px 6px 0px 0px;
      font-weight: bold;
      float: left;
      text-transform: capitalize;
   }
   .tab_control.menu a:link,.menu a:visited {
      color: white;
      text-decoration: none;
   }
   .tab_control.menu a:hover {
      color: #FFAB19;
   }
   .tab_control .selected {
      background-color: var(--secondary-bg-color);
      color: var(--main-bg-color) !important;
   }
   .tab_control .bar {
      height: 10px;
      background-color: var(--secondary-bg-color);
      border-radius: 0px 6px 0px 0px;
   }
   .tab_control .content {
   }
   .tab_control .content_block {
      border: 1px solid var(--secondary-bg-color);
      padding: 5px;
      border-radius: 0px 0px 6px 6px;
   }


   /* Hidden control */
   .hidden_ctrl {
      display: none;
   }


   /* Table with formatting */
   .std_table,.std_table tr,.std_table td,.std_table th {
      border: 1px solid var(--secondary-bg-color);
   }
   /* When CSS3 will be supported, use commented below instead... */
   .std_table tr.odd {
      background-color: white;
   }
   .std_table tr.even {
      background-color: var(--light-bg-color);
   }
   /*
    .std_table tr {
        background-color: white;
    }
    .std_table tr:nth-child(2n+3) {
        background-color: var(--light-bg-color);
    }
    */
   .std_table th {
      font-weight: bold;
      padding: 4px;
      color: white;
      background-color: var(--main-bg-color);
   }
   .std_table caption {
      font-weight: bold;
      text-align: left;
      margin: 0 0 2px 0;
   }

   /* Icons */
   .icon {
      width: 20px;
      height: 20px;
   }
   .stat_icon {
      width: 16px;
      height: 16px;
   }
  .icon_container {
      text-align: center;
      vertical-align: middle;
   }
   span.icon,p.icon {
      display: inline-block;
   }
   span.stat_icon,p.stat_icon {
      display: inline-block;
   }
   .icon_gray {
      background-image: url("../images/gray.png");
   }
   .icon_green {
      background-image: url("../images/green.png");
   }
   .icon_blue {
      background-image: url("../images/blue.png");
   }
   .icon_orange {
      background-image: url("../images/orange.png");
   }
   .icon_red {
      background-image: url("../images/red.png");
   }
   .icon_warning {
      background-image: url("../images/warning.png");
   }
   .icon_event_info {
      background-image: url("../images/event_info.png");
   }
   .icon_event_tick {
      background-image: url("../images/event_tick.png");
   }
   .icon_event_warn {
      background-image: url("../images/event_warn.png");
   }

   /* Comments */
   .comment_content {
      margin: 0;
      padding: 7px;
      border-radius: 6px;
      /* For colors: set full color, then set saturation to 16 */
   }
   .comment_content.anomaly {
      background-color: #FFD6D6;
   }
   .comment_content.ljf {
      background-color: #D6D6FF;
   }
   .comment_content .title {
      padding-bottom: 5px;
      margin-bottom: 10px;
      border-bottom: 1px solid var(--main-bg-color);
      font-weight: bold;
   }
   .comment_content.new_comment {
      border: 1px solid var(--secondary-bg-color);
      margin: 20px 0;
   }
   .comment {
      margin: 20px 0;
   }
   .comment_top_title {
      display: block;
      margin: 10px 20px 0 20px;
      padding: 6px 15px 6px 4px;
      font-weight: bold;
   }
   .comment_top_title.open {
      border-radius: 6px 6px 0 0;
   }
   .comment_top_title.close {
      border-radius: 6px;
   }
   .comment_top_title.anom {
      background-color: #FFD6D6;
   }
   .comment_top_title.ljf {
      background-color: #D6D6FF;
   }
   .comment_collapse_sign {
      display: inline-block;
      text-align: center;
      vertical-align: middle;
      margin: 0 6px 0 2px;
      width: 15px;
      height: 15px;
      background-color: white;
      border: 1px solid white;
      border-radius: 3px;
   }
   .comment_add_text {
      width: 100%;
      height: 200px;
      display: block;
   }
   .comment_edit_text {
      width: 100%;
      height: 100px;
      display: block;
   }
   .add_comment_button {
      text-align: right;
      margin-top: 10px;
   }


   /* Filter panel specifics */
   .filter_radio {
      margin-right: 15px;
   }
   .filter_criteria {
      margin: 10px 0;
   }
   .filter_criteria .control {
      margin-right: 5px;
   }
   .filter_criteria .message {
      color: #FF0000;
      font-weight: bold;
   }
   .filter_button {
      width: 130px;
   }
   .filter_delete_criterion {
      background-image: url("../images/icon_delete.png");
      height: 16px;
      width: 16px;
      display: inline-block;
      cursor: pointer;
      vertical-align: middle;
      margin: 0 5px 0 5px;
   }


   /* Specifics for caption */
   .caption_block {
      display: inline-block;
      margin: 0 10px 0 0;
   }
   .caption_item_text {
      line-height: 20px;
      display: inline-block;
      vertical-align: top;
      margin: 0 0 0 2px;
   }


   /* Information panel formatting */
   .info_table td {
      padding: 10px 4px;
   }
   .info_table tr.odd {
      background-color: white;
   }
   .info_table tr.even {
      background-color: var(--light-bg-color);
   }
   .info_table td.col_name {
      width: 200px;
      font-weight: bold;
   }
   .info_table td.col_value {
      width: 200px;
   }


   /* Specifics for switcher control */
   .switcher_control {
      width: 100%;
      table-layout: fixed;
   }
   .switcher_control .selector {
      vertical-align: top;
      height: 150px;
   }
   .switcher_control .selector .title {
      font-weight: bold;
      margin-bottom: 3px;
   }
   .switcher_control .selector .container {
      background-color: white;
      border: 1px solid var(--main-bg-color);
      padding: 0 2px;
      margin: 2px;
      height: 100%;
      overflow: auto;
   }
   .switcher_control .selector .container .element {
      display: block;
      background-color: #FFFFFF;
      margin: 4px 0;
   }
   .switcher_control .selector .container .element input {
      vertical-align: text-bottom;
   }
   .switcher_control .selector .select {
      width: 100%;
      height: 100%;
   }
   .switcher_control .control {
      width: 140px;
      vertical-align: middle;
   }
   .switcher_control .control .button {
      display: block;
      width: 120px;
      margin: 20px 10px;
   }


   /* Specifics for datatable */
   .datatable {
      width: 100%;
      table-layout: auto;
   }
   .clear {
      clear: both;
   }
   .datatable th {
      color: white;
      border: 1px solid var(--secondary-bg-color);
      text-align: left;
      background-color: var(--main-bg-color);
      padding: 0 3px;
   }
   .datatable tr {
      border: 1px solid var(--secondary-bg-color);
      height: 30px;
   }
   .datatable tr.odd {
      background-color: white;
   }
   .datatable tr.even {
      background-color: var(--light-bg-color);
   }
   .datatable td {
      border: 1px solid var(--secondary-bg-color);
      padding: 0 3px;
   }
   .sorting,.sorting_asc,.sorting_desc {
      cursor: pointer;
      padding-left: 15px !important;
   }
   .sorting,.sorting_disabled {
      background: url("../images/sort_both.png") no-repeat left center var(--main-bg-color);
   }
   .sorting_asc {
      background: url("../images/sort_asc.png") no-repeat left center var(--main-bg-color);
   }
   .sorting_desc {
      background: url("../images/sort_desc.png") no-repeat left center var(--main-bg-color);
   }
   .sorting_disabled {
      padding-left: 15px !important;
      color: #C3C3C3 !important;
   }
   .sorting_asc_disabled {
      background: url("../images/sort_asc_disabled.png") no-repeat left center
      var(--main-bg-color);
   }
   .sorting_desc_disabled {
      background: url("../images/sort_desc_disabled.png") no-repeat left
         center var(--main-bg-color);
   }
   .paginate_button,.paginate_active {
      margin: 0 4px;
      display: inline-block;
      text-align: center;
      vertical-align: middle;
      min-width: 20px;
      color: black;
   }
   .paginate_button {
      cursor: pointer;
   }
   .paginate_active,.paginate_active:hover {
      color: black;
      cursor: auto;
      font-weight: bold;
      text-decoration: underline;
   }
   .first,.previous,.next,.last {
      height: 20px;
   }
   .paginate_button.first {
      background-image: url("../images/first_on.png");
      cursor: pointer;
   }
   .paginate_button_disabled.first {
      background-image: url("../images/first_off.png");
      cursor: auto;
   }
   .paginate_button.last {
      background-image: url("../images/last_on.png");
      cursor: pointer;
   }
   .paginate_button_disabled.last {
      background-image: url("../images/last_off.png");
      cursor: auto;
   }
   .paginate_button.next {
      background-image: url("../images/next_on.png");
      cursor: pointer;
   }
   .paginate_button_disabled.next {
      background-image: url("../images/next_off.png");
      cursor: auto;
   }
   .paginate_button.previous {
      background-image: url("../images/previous_on.png");
      cursor: pointer;
   }
   .paginate_button_disabled.previous {
      background-image: url("../images/previous_off.png");
      cursor: auto;
   }
   .dataTables_paginate {
      float: right;
   }
   .dataTables_info {
      font-weight: bold;
      margin-bottom: 5px;
   }
   .dataTables_processing {
      font-weight: bold;
      text-align: center;
   }

   /* Specifics for logo */
   .logo.login {
      max-width: 220px !important;
      margin: 5px;
   }
   .logo.mainpage {
      max-height: 50px !important;
      max-width: 160px !important;
      margin: 5px;
   }


   /* Specifics for AJAX loading picture */
   .loading_area {
      display: block;
      text-align: center;
      padding: 20px;
      margin: 0 auto;
   }

   .loading_area .text {
      font-weight: bold;
      margin: 5px;
   }


   /* Specifics for drag&drop elements */

   .draganddrop {
       width: 100%;
       height: 100%;
   }
   .draganddrop table {
       width: 100%;
       height: 100%;
       border-collapse: separate !important;
   }
   .draganddrop tr {
       width: 100%;
       height: 100%;
   }
   .draganddrop tbody {
       width: 100%;
       height: 100%;
   }
   .draganddrop tr.heading td {
       width: 100%;
       padding: 10px;
       border: 1px solid var(--secondary-bg-color);
   }
   .draganddrop tr.heading td.current {
       width: 100%;
       background-color: var(--secondary-bg-color);
       border-top-left-radius: 6px;
       border-top-right-radius: 6px;
       font-weight: bold;
       text-align: center;
   }
   .draganddrop tr.heading td.available {
       border: none;
   }
   .draganddrop td.current, .draganddrop td.available {
       width: 100%;
       border: 1px solid var(--secondary-bg-color);
       height: 100%;
   }
   .draganddrop tr.dropArea td.current {
       width: 100%;
       border-bottom-left-radius: 6px;
   }
   .draganddrop tr.dropArea td.available {
       border-bottom-right-radius: 6px;
       border-top-right-radius: 6px;
       border-left: 0;
   }
   .draganddrop ul {
       list-style-type: none;
       margin: 0; 
       padding: 0;
       height: 100%;
       overflow-y: scroll;
       background-color: #FFFFFF;
   }
   .draganddrop ul.current {
       /* ul.available height + 64 */
       height: 264px;
       width: 100%;
       border-bottom-left-radius: 6px;
   }
   .draganddrop ul.available {
       height: 200px;
       /* li width + 40 */
       min-width: 290px;
   }
   .draganddrop li {
       text-align: center;
       margin: 5px;
       padding: 5px;
       width: 250px;
       background-color: var(--light-bg-color);
       border-radius: 6px;
       cursor: move;
       height: 20px;
   }
   .draganddrop .hidden {
       display: none;
   }
   .draganddrop td.available div.items {
       border-radius: 6px;
       background-color: var(--secondary-bg-color);
       text-align: center;
       padding: 5px;
       margin: 5px;
   }
   .draganddrop td.available div.items div.title {
       padding: 3px;
       font-weight: bold;
   }
   .draganddrop td.available div.items .search {
       margin: 3px;
   }
   .draganddrop li.station {
       background-color: var(--light-bg-color);
   }
   .draganddrop li.message {
       background-color: #E5FBE8;
   }
   .draganddrop li table td {
       border: 0px;
   }
   .draganddrop li table .action {
       cursor: pointer;
       border-radius: 6px;
       font-weight: bold;
       width: 30px;
       height: 20px;
   }
   .draganddrop li.available table .action {
       display: none;
   }
   /* Timeline Styles */
  ul.timeline-colors {
       display: flex;
   }
   ul.timeline-colors li {
       list-style: none;
       flex: 1 1 0px;
       text-align: center;
       margin: 10px;
       padding: 5px;
   }
   .datatable tr.inactive {
      opacity: 0.7;
   }
   .datatable tr.inactive td {
      color: #999;
   }
}