body {
  max-width: 1024px;
  margin: auto;
  padding: 1em;
  line-height: 1.5em;
}

/* header and footer areas */
.menu { 
    padding: 10px; 
    width: 98%;
    background-image: linear-gradient(to bottom, #FFF, #F2F2F2);
    border: 1px solid #D4D4D4;
    border-radius: 4px;
    background-color: #FAFAFA;
    background-repeat: repeat-x;
    box-shadow: 0px 1px 4px rgb(0 0 0 / 7%);
    
}
.status_icon{
  width:1.5em;
}
.menu li { 
  display: inline-block; 
  margin-left: 0.5em;
}
.article-meta, .menu a {
  text-decoration: none;
  padding: 5px;
  border-radius: 5px;
  text-transform: uppercase;
  font-size: 14px;
  color: black;
}
.menu, .article-meta { text-align: left; }
footer { text-align: center; }
.title { font-size: 1.1em; }
footer a { text-decoration: none; }
hr {
  border-style: dashed;
  color: #ddd;
}

/* code */
pre {
  border: 1px solid #ddd;
  box-shadow: 5px 5px 5px #eee;
  padding: 1em;
  overflow-x: auto;
}
/*code { background: #f9f9f9; }*/
pre code { background: none; }

/* misc elements */
img, iframe, video { max-width: 100%; }
main { hyphens: auto; }
blockquote {
  background: #f9f9f9;
  border-left: 5px solid #ccc;
  padding: 3px 1em 3px;
}
/*Custom tabling for lists*/
table {
  margin: auto;
  /*border-top: 1px solid #666;
  border-bottom: 1px solid #666;*/
  border-spacing: 0em;
}
table thead th { border-bottom: 1px solid #ddd; background-color:#5e9dc8; color:White; }
th, td { padding: 5px; }
thead, tfoot, tr:nth-child(odd) { background: #F5F1DE; }

th.first_element{
  border-radius: 15px 0 0 0;
}

th.last_element {
  border-radius: 0 15px 0 0;
}

tr:hover{background-color:#aac2c3;color:White}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

  /* Force table to not be like tables anymore */
  table, thead, tbody, th, td, tr { 
    display: block; 
  }
  
  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  tr { border: 1px solid #ccc; }
  
  td { 
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding-left: 50%; 
  }
  
  td:before { 
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
  }


  
  /*
  Label the data
  */
  td:nth-of-type(1):before { content: "Status"; }
  td:nth-of-type(2):before { content: "Component Name"; }
  td:nth-of-type(3):before { content: "Vulnerability"; }
  td:nth-of-type(4):before { content: "Version"; }
  td:nth-of-type(5):before { content: "Disclosed By"; }
  td:nth-of-type(6):before { content: "Disclosure Date"; }
  td:nth-of-type(7):before { content: "CVE-Number"; }
}




/*Menu Here we go*/

.no-js .menu__btn {
  display: none;
}

.menu__btn {
  display: block;
  width: 100%;
  padding: 0;
  font: inherit;
/*  color: #fff; 
  background: #2a2a2a;*/
  border: 0;
  outline: 0;
}

.menu__btn-title {
  position: relative;
  display: block;
  padding: 10px 15px;
  padding: 0.625rem 0.9375rem;
  font-weight: 700;
  text-align: right;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

:focus > .menu__btn-title {
  box-shadow: inset 0 0 1px 3px #e22d30;
}

button:not(:-moz-focusring):focus > .menu__btn-title {
  box-shadow: none;
}

.menu__btn:focus,
.menu__btn-title:focus {
  outline: 0;
}

.js .menu__btn--active {
  color: #e22d30;
}

.menu__list,
.submenu__list {
  list-style: none;
  margin: 0em;
}

.menu__item:hover > a {
  color: grey;
}

.menu__item:first-child {
  border: 0;
}

.menu__item--active {
  background: #e22d30;
}

.menu__link {
  display: block;
  padding: 10px 15px;
  padding: 0.625rem 0.9375rem;
  font-weight: 700;
/*  color: #fff;*/
  text-transform: uppercase;
}

.menu__list .menu__item .submenu__list {
  background: #ffffff;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  max-width: 15rem;
  transition: all 0.5s ease;
  border: 2px solid #efefef;
  display: none;
  padding-inline-start: 0px;
}

.menu__item.menu__dropdown input[type="checkbox"] {
  display: none;
}

.menu__list .menu__item:hover > .submenu__list,
.menu__list .menu__item:focus-within > .submenu__list,
.menu__list .menu__item .submenu__list:hover,
.menu__list .menu__item .submenu__list:focus {
  visibility: visible;
  opacity: 1;
  display: block;
}

.menu__link:hover {
  color: #fff;
}

.js .menu__list {
  position: absolute;
  z-index: 1;
  width: 100%;
  visibility: hidden;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: top left;
  transform-origin: top left;
}

.js .menu__list--active {
  visibility: visible;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

.menu__list--transition {
  transition: visibility 0.15s ease, transform 0.15s ease,
    -webkit-transform 0.15s ease;
}

@media screen and (min-width: 767px) {
  
  .menu__btn {
    display: none;
  }

  .menu__list,
  .js .menu__list {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    visibility: visible;
    border: 0;
    -webkit-transform: none;
    transform: none;
  }

  
}

@media screen and (max-width: 767px) {
  .menu__item.menu__dropdown .drop-icon {
    position: absolute;
    right: 1rem;
    top: auto;
  }

  .menu__item.menu__dropdown input[type="checkbox"] + .submenu__list {
    display: none;
  }

  .menu__item.menu__dropdown input[type="checkbox"]:checked + .submenu__list {
    border: none;
    padding-left: 20px;
    visibility: visible;
    opacity: 1;
    display: block;
    position: relative;
    max-width: 100%;
  }
}

@media screen and (max-width: 620px) {
  .menu__item.menu__dropdown .drop-icon {
    position: absolute;
    right: 1rem;
    top: auto;
  }

  .menu__item.menu__dropdown input[type="checkbox"] + .submenu__list {
    display: none;
  }

  .menu__item.menu__dropdown input[type="checkbox"]:checked + .submenu__list {
    border: none;
    padding-left: 20px;
    visibility: visible;
    opacity: 1;
    display: block;
    position: relative;
    max-width: 100%;
  }
}