@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');

body {
    font-family: Roboto,Open Sans,Arial,Helvetica,sans-serif;
}

/***************** Content (Headers & tables) *****************/
/* Header of the page */
.title-header {
    margin-left: 5%;    
    margin-top: 2%;
}

/* Table container */
.container {
    width:50%;
    float:left;
    display: none;
}

/* Table header (product line) */
.container h2{
    margin-left: 5%;
    margin-bottom: -1%;
}

/* Each table */
table {
    font-size: 15px;
    letter-spacing: 0.03em;
    border-radius: 2px;
    padding: 25px 30px;
    margin: auto;
    width:100%;
    float: left;
    justify-content: space-between;
}

/* Product name */
table th {
    font-size: 13px;
    text-align:left;
    padding-left: 1.5%;
    padding-right: -20%;
    width: 25%;
}

/* Table header (version, language, doctype) */
table thead th {
    font-size: 12px;
    text-align: center;    
}

/* Table's each row (data) */
table tr {
    font-size: 12px;
    border-radius: 2px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    display:-moz-inline-grid;
    width: 70%;
    background-color: #ffffff;
    box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.1);
    color: #6c7a89;
    text-align:center;
}

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

/***************** Filter: Dropdown button *****************/
/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}
  
/* Dropdown Button */
.dropdown-content {
    background-color: #f1f1f1;
    width:100%;
    display: none;
    position: absolute;
    box-shadow: 0px 8px 16px 0px #1A1A1A;
    z-index: 1;

    /* Dropdown scroll: only vertical scroll */
    overflow-y: scroll;
    overflow-x: hidden;
    height: 200px;
}
    
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;

}
    
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #ddd;

}

.dropbtn {
    border: none;
    outline: none;
    width: 100%;
    padding: 10px 10px;
    text-align: left;
    background-color: #f1f1f1;
    cursor: pointer;
}

/******************** Buttons under the dropdown button ********************/
/* The "show" class is added to the filtered elements */
.show {
    display: block;
}

.btn {
    border: none;
    outline: none;
    width: 100%;
    font-size: small;
    padding: 10px 10px;
    background-color: #f1f1f1;
    cursor: pointer;
    text-align: left;

}

/* Add a light grey background on mouse-over */
.btn:hover {
    background-color: #ddd;
}
  
/******************** Search bar ********************/
#myInput {
    background-image: url('../image/search.png'); /* Add a search icon to input */
    background-size: 10%;
    background-position: 10px 7px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    width: 10%; /* Full-width */
    font-size: 15px; /* Increase font-size */
    padding: 8px 20px 8px 40px; /* Add some padding */
    border: 1px solid #ddd; /* Add a grey border */
    margin-bottom: 10px; /* Add some space below the input */
}

#content {
display: block;
}