@font-face {
  font-family: ttcthin;
  src: url(ttcthin.woff2);
}
@font-face {
  font-family: ttcbold;
  src: url(ttcbold.woff2);
}
@font-face {
  font-family: ttcblack;
  src: url(ttcblack.woff2);
}
@font-face {
  font-family: ttcmedium;
  src: url(ttcmedium.woff2);
}
@font-face {
  font-family: ttcregular;
  src: url(ttcregular.woff2);
}
/*Header */
header {
    width: 100%;
    background-color: #fff;
    color: #000;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    border-bottom-color: #000;
border-bottom-style: solid;
    border-bottom-width: 2px;
    font-family: ttcmedium;
}
.banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.top-left {
    font-size: 18px;
}

.burger-menu {
    font-size: 24px;
    cursor: pointer;
}

.container {
    display: flex;
    margin-top: 60px; /* Adjust based on header height */
}
/* The sidebar menu */
.sidenav {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 160px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
margin-top: 50px;
  left: 0;
  background-color: #fff;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
    padding-right: 10px;
    border-right-style: solid;
    border-right-color: #dee2e6;
    border-right-width: 1px;
    text-align: right;
}
/* The navigation menu links */
.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #000;
  display: block;
font-family: ttcthin;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #ff0096;
}

/* Style page content */
.main {
  margin-left: 160px; /* Same as the width of the sidebar */
  padding: 0px 10px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}


body {
  font-family: sans-serif;
background-color: #f5f5f5;
margin: 15px
}

h1 {
  margin-top: 0;
background-color: #DCDCDC;
padding: 1px 4px;
font-size: 16px;
font: DMSans;
display: inline-block;
}
h2 {
  margin-top: 0;
background-color: #fff;
padding: 1px 4px;
font-size: 16px;
font: DMSans;
display: inline-block;
}

button {
  background-color: #ffffff;
border: 1px solid #000;
border-left: 10px solid #000;
color: #000;
height: auto;
cursor: pointer;

}


#version {
  margin-top: 0;
background-color: #DCDCDC;
padding: 1px 4px;
font-size: 16px;
font: DMSans;
display: inline-block;
}

.input-group {
  margin-bottom: 1em;
}

#mac-input {
  width: 200px;
background-color: #ffffff;
border: 1px solid #000;
padding-left: 2px;
color: #000;
height: auto
}

.copy-button {
  background-color: #ffffff;
border: 1px solid #000;
border-left: 10px solid #000;
color: #000;
height: auto;
cursor: pointer;

}


#paste-button {
  background-color: #ffffff;
border: 1px solid #000;
border-left: 10px solid #000;
color: #000;
height: auto;
cursor: pointer;
}

#paste-button:hover {
background-color: #88AACC;
color: #FFFFFF;
}

#output {
  margin-top: 1em;
  padding: 1em;
}

.manufacturer {
  margin-bottom: 1em;
}

.mac-address {
width: 200px;
background-color: #ffffff;
border: 1px solid #000;
padding-left: 2px;
color: #000;
height: auto
}

.copy-button {
  padding: 5px;
  margin-left: 1em;
}


a {
color: #000;
}
a:hover {
color: #ff0096;
}
a:active {
color: #ff0096;
}

.responded {
    color:green;
}
.checking,.unchecked {
    color:#FF8C00;
}
.timeout {
    color:red;
}
}