#header {
    grid-area: header;
    background-color: #003B74;
    color:#D9D8D7;
    padding:10px;
    overflow:auto;
    top:0;
    width: 100%;
    position: sticky;
    z-index:100;
}

#header a:link{
    color:#D9D8D7;
    text-decoration: none;
}

#header a:visited{
    color:#D9D8D7;
}

#header-rel{
    position:relative;
}

#header-content{
    float:left;
}

#header-search{
    float:right;
    padding-right:50px;
}

#header-menu{
    float:right;
    cursor: pointer;
}

#footer {
    grid-area: footer;
    background-color: #003B74;
    color:#D9D8D7;
    position: fixed; 
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    z-index:100;
}

#footer-content{
    float:left;
    padding: 15px;
}

#footer-btn{
    float:right;
}

#footer a:link{
    color:#D9D8D7;
    text-decoration: none;
}

#footer a:visited{
    color:#D9D8D7;
}

/*#right-sidebar {
    grid-area: rsidebar;
    background-color: #003b741a;
    padding:10px;
    position: relative;

    
}*/

#right-sidebar
{
    position: sticky;
    grid-area: rsidebar;
    background-color: #d2d8df;
    padding:10px    ;
    right: 0;
    height:100%;
    width: 290px;
    z-index:10;
}

#right-content {
  position:fixed;
}

body {
    background-color:#D9D8D7;
    margin:0px;
}

#content {
    background-color: #eeeeee;
    grid-area: content;
}
#content.sticky {
    /*position:fixed;*/
}

#wrapper {
    display: grid;
    grid-template-columns: auto 300px;
    grid-template-areas: 'header header ' ' content rsidebar'  'footer footer ';
}

table {
    margin:10px;
    /*position: relative;*/
    border-collapse: collapse;
}

td, th { 
    /*border: 1px solid #111;*/
    padding: 6px; 
}
th { 
    font-weight: 700;
    font-size:18px;
    text-decoration-line: underline;
    color:#003B74;
    cursor: pointer;
    text-align:left;
    position: sticky;
    top: 188px;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    background-color:white;
    z-index: 1;
}

#th-sticky{
    /*top:300px;*/
}

th:hover {
    color: black; 
}

tr:nth-child(even) {background-color: #D9D8D7;}

html {
  scroll-padding-top: 300px; /* height of sticky header */
}

#sort {
    display:none;
}

.zoom {
    border:1px solid black;
    padding: 0px;
    background-color: #003B74;
    width: auto;
    height: 100px;
    margin: 0 5px;
}

.listimg{
  position: relative;
}

.listimg img { display: block; }

.listimg .fa-search { 
  position: absolute;
  bottom:3px; left:8px; 
  color:black;
  background-color:white;
  padding:3px;


}



/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
     #right-sidebar {
        display:none;
    }
    #content{
        
    }
    .tdimg img{
        max-width:100px;
    }

    #articles {
      overflow: scroll; 
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
     #right-sidebar {
        display:none;
    }
    .tdimg img{
        height:50px;
    }
    #content{
        
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    #content{
        
    }

    
}
    

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    #content{
        
    }
    #right-sidebar {
        display:none;
    }
    .tdimg img{
        height:100px;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    
    #right-sidebar {
        display:block;
    }
    #footer-btn{
        /*display:none;*/
    }    
}

@media only screen and (max-width: 1800px) {
    .tdimg img{
        max-width:200px;
    }
}

@media only screen and (min-width: 1800px) {
    #header-search {
        float:right;
    }
}

button {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 18px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

button:focus { outline: none; }

#dealerrequest {
    background-color: #d27b31; /* Green */
}

#correctmail {
    background-color: #4cafaa; /* Green */
}

#develomentmode {
    background-color: #4c5daf; /* Green */
}

#updated {
    padding-left:5px;
}

/* Navbar container */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #0761b7;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: fixed;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a:link{
    color:black !important;
}

.dropdown-content a:visited{
    color:black !important;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content .left{
  float:left; 
}
.dropdown-content .right{
  float:left; 
}

.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(images/loader-64x/Preloader_2.gif) center no-repeat #fff;
}

.menu-element {
   font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

.menu-element:hover {
  background-color: #0761b7;
  color:
}

.menu-element a {
  text-align: left;
}