nav img {
  display: block;
  max-height: 20px;
  max-width: 20px;
  float: left;
}

nav p {
  text-align: left;
  padding: 0px 30px;
}

#layout {
  display: block;
  height: 100%;
}
/*
.form-control {
  background-color: #444;
  color: #FFF;
  pointer-events: none;
}*/

.form-control:disabled {
  background-color: transparent;
}

.layout-left {
  display: block;
  min-width: 150px;
  max-width: 20%;
  background-color: #111;
  height: inherit;
  float: left;
}

.layout-right {
  display: block;
  background-color: #444;
}

#menu-wrapper {
  height: 100%;
}


#logo {
  display: block;
  min-width: 180px;
  width: 100%;
  height: 100px;
  background: url("../img/threadfin.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}


#page {
  max-width: 950px;
  margin: auto;
  background-color: #444;

  /*
  height: -webkit-calc(100% - 130px);
  height: -moz-calc(100% - 130px);
  height: calc(100% - 130px);
  */

  min-height: -webkit-calc(100% - 120px);
  min-height: -moz-calc(100% - 120px);
  min-height: calc(100% - 120px);


  box-shadow: 0px 5px 5px #222;

}

#uiSetting {
  float: right;
  margin-right: 25px;
}

#box input[type=text],
#box input[type=password] {
  width: -webkit-calc(100% - 20px);
  width: -moz-calc(100% - 20px);
  width: calc(100% - 20px);
}

#box input[type=submit] {
  margin: 50px auto;
}

#settings {
  display: block;
  padding: 10px 10px;
}

#settings h5 {
  margin: 50px 0px 10px 0px;
}

#content-interaction .search {
  width: 200px;
  border: 1px solid #000;
  padding: 9px;
  background-color: #333;
  margin: 10px;
  float: right;
  border-radius: 3px;

}

#myStreams {
  position: fixed;
  bottom: 0px;
  background-color: #111;
  width: 100%;
  max-width: 950px;

  /*
  max-height: 100px;
  */
  margin-bottom: 0px;
}

#myStreams img {
  width: 4%;
  padding: 2px 5px;
  cursor: pointer;
  float: right;
}

/* Wizard*/
#box {
  background-color: #444;
  min-height: 400px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#box p {
  padding: 10px 0px;
}

#box-footer {
  margin-top: auto;
}

#box-footer {
  margin: auto;
  padding: 10px;
}

#headline {
  background-color: #222;
  border-bottom: solid 2px #222;
  transition: all 0.5s;
  padding: 10px 0px;
  display: block;
}

#content {
  display: block;
  overflow: auto;
  padding: 10px;
}

/* --- */


#clientInfo,
#activeStreams,
#inactiveStreams {
  font-family: monospace;
  display: block;
  font-size: 12px;
  color: #00E6FF;
  padding: 0px;
}

#activeStreams thead,
#inactiveStreams thead {
  font-size: 2em;
}

#openStreams {
  width: 20px;
  height: 200px;
  cursor: pointer;
  float: right;
  position: absolute;
  right: 0px;
  bottom: 0px;
  background: url("../img/touch.png");
  background-color: #111;

  background-position: bottom right;
}

#allStreams {
  padding: 2px;
}

#activeStreams .tdKey,
#inactiveStreams .tdKey {
  width: 115px;
  letter-spacing: 0px;
}

caption {
  color: #FFF;
  font-size: 2em;
}

.tdKey {
  text-align: left;
}

.tdVal {
  text-align: left;
}

.modal-header {
  background-color: #212529;
}
.modal-body {
  background-color: #444;
}

#inactiveStreams .tdKey {
  color: red;
}

#clientInfo .tdVal,
#logInfo .tdVal,
#activeStreams .tdVal,
#inactiveStreams .tdVal,
#mappingInfo .tdVal {
  color: #aaa;
  white-space: inherit;
}

#box-wrapper {
  display: inline-block;
  width: 100%;

  overflow-y: scroll;
}

#contentTable,
#inactiveContentTable,
#mapping-detail-table,
#contentTable {
  display: table;
  --bs-table-color: none;
  border-collapse: collapse;
  overflow-y: scroll;
}

#inactiveContentTable {
  margin-top: 2%;
}


#contentTable .contentTableHeader,
#inactiveContentTable .inactiveContentTableHeader {
  background-color: #333;
  height: 50px;
  border-bottom: solid 1px #111;
  border-left: solid 3px #333;
  cursor: auto;

}


tbody {
  width: 100%;
}


.tableEllipsis {
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#contentTable img,
#inactiveContentTable img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 60px;
}

#contentTable tr,
#inactiveContentTable tr {
  border-left: solid 3px 444;
  border-bottom: solid 1px #333;
  cursor: pointer;
}

#contentTable tr:hover,
#inactiveContentTable tr:hover {
  background-color: #333;
}

#contentTable td,
#inactiveContentTable td {

  padding: 0px 2px;
}

#contentTable input[type=text],
#inactiveContentTable input[type=text] {
  width: 80%;
  min-width: 35px;
  max-width: 60px;
  border: 0px;
  background-color: #333;
  margin-left: 5px;
  text-align: left;
}

/*
#contentTable input[type=checkbox],
#inactiveContentTable input[type=checkbox] {
  max-width: 25px;
  margin: auto;
}
*/


.showBulk {
  display: block;
}

.hideBulk {
  display: none;
}

#contentTable tr.activeEPG,
#inactiveContentTable tr.activeEPG {
  border-left: solid 3px lawngreen;
}

#contentTable tr.notActiveEPG,
#inactiveContentTable tr.notActiveEPG {
  border-left: solid 3px red;
}


#logScreen p {
  white-space: pre;
  font-size: 10px;
  /*
  line-height: 1.6em;
  font-family: "Arial", sans-serif;
  */
  letter-spacing: 1px;
  font-family: monospace;
  font-size: 12px;
  font-style: normal;
  font-variant: normal;
  line-height: 1.6em;
}

#mapping-detail,
#user-detail,
#file-detail {
  box-shadow: 0px 5px 40px #000;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;

  max-width: 600px;
  background-color: #222;
  padding: 10px;
  overflow: auto;
}

#file-detail input[type=text] {
  width: -webkit-calc(100% - 20px);
  width: -moz-calc(100% - 20px);
  width: calc(100% - 20px);
}

#mapping-detail img {
  display: block;
  max-height: 30px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
}

#mapping-detail input[type=text],
#content_settings input[type=text],
#content_settings input[type=password] {
  border: solid 1px;
  border-color: transparent;
  background-color: #333;
  text-align: left;
  width: -webkit-calc(100% - 20px);
  width: -moz-calc(100% - 20px);
  width: calc(100% - 20px);
}

#mapping-detail-table,
#user-detail-table {
  display: inline-table;
  width: 100%;
}

#content_settings table {
  display: inline-table;
  table-layout: fixed;
  width: 100%;
}


#mapping-detail-table td,
#user-detail-table td {
  padding: 10px 0px;

}

#mapping-detail-table td.left,
#user-detail-table td.left {
  width: 38%;
}

.interaction,
#interaction {
  margin-top: 20px;
  display: inline-flex;
  float: right;
}

.interaction input[type=button],
.interaction input[type=submit] {
  background-color: #000;
  min-width: 100px;
  margin: 0px 10px;
  text-align: center;
}

#notification {
  display: block;
  position: fixed;
  right: 0px;
  height: 100%;
  width: 250px;

  background-color: #222;
  box-shadow: 0px 0px 20px #000;
}

#notification h5 {
  background-color: #121212;
  padding: 5px 10px 5px 10px;
}

#notification pre {
  padding: 0px 10px 0px 10px;
}

#notification p {
  font-size: 10 px;
  margin: 0px;
  padding: 0px 10px 5px 10px;
}

#notification .element {
  /*padding: 0px 5px;*/
  margin: 5px 5px;
  border-radius: 5px;
  background-color: #181818;
  border-left: 10px solid green;
}


@media only screen and (min-width: 620px) {
  body {
    width: 100%;
    background-color: #444;
  }

  h1 {
    font-size: 26px;
    letter-spacing: 3px;
  }

  nav p {
    display: block;
  }



  #header_config {
    display: block;
    height: 100px;
    background: url("../img/logo_w_600x200.png");
    background-repeat: no-repeat;

    background-size: 300px 100px;
  }

  #screenLog {
    margin-left: 300px;

    transition: none;
    background-color: transparent;
    border-bottom: solid 1px transparent;
    box-shadow: 0px 0px 0px #222;
  }

  #settings {
    /*
    height: -webkit-calc(100% - 100px);
    height: -moz-calc(100% - 100px);
    height: calc(100% - 100px);
    */
    position: relative;
    overflow: auto;
  }


  .screenLogHidden {
    transform: translate(0px, 0px);
  }


  #box {
    display: block;
    min-height: 500px;
    max-width: 500px;
    margin: 10px auto;
    background-color: #444;
    box-shadow: 0px 5px 5px #222;

    display: flex;
    flex-direction: column;
  }
}

@media only screen and (max-width: 620px) {
  body {
    background-color: #444; /* Ensure the background color is consistent */
  }

  /* Add any other styles specific to small devices here */
}


/*
=============== 
Sidebar
===============
*/
:root {
  /* dark shades of primary color*/
  --clr-primary-1: hsl(205, 86%, 17%);
  --clr-primary-2: hsl(205, 77%, 27%);
  --clr-primary-3: hsl(205, 72%, 37%);
  --clr-primary-4: hsl(205, 63%, 48%);
  /* primary/main color */
  --clr-primary-5: hsl(205, 78%, 60%);
  /* lighter shades of primary color */
  --clr-primary-6: hsl(205, 89%, 70%);
  --clr-primary-7: hsl(205, 90%, 76%);
  --clr-primary-8: hsl(205, 86%, 81%);
  --clr-primary-9: hsl(205, 90%, 88%);
  --clr-primary-10: hsl(205, 100%, 96%);
  /* darkest grey - used for headings */
  --clr-grey-1: hsl(209, 61%, 16%);
  --clr-grey-2: hsl(211, 39%, 23%);
  --clr-grey-3: hsl(209, 34%, 30%);
  --clr-grey-4: hsl(209, 28%, 39%);
  /* grey used for paragraphs */
  --clr-grey-5: hsl(210, 22%, 49%);
  --clr-grey-6: hsl(209, 23%, 60%);
  --clr-grey-7: hsl(211, 27%, 70%);
  --clr-grey-8: hsl(210, 31%, 80%);
  --clr-grey-9: hsl(212, 33%, 89%);
  --clr-grey-10: hsl(210, 36%, 96%);
  --clr-white: #fff;
  --clr-red-dark: hsl(360, 67%, 44%);
  --clr-red-light: hsl(360, 71%, 66%);
  --clr-green-dark: hsl(125, 67%, 44%);
  --clr-green-light: hsl(125, 71%, 66%);
  --clr-orange: hsl(14,93%,53%);
  --clr-black: #222;
  --ff-primary: 'Roboto', sans-serif;
  --ff-secondary: 'Open Sans', sans-serif;
  --transition: all 0.3s linear;
  --spacing: 0.1rem;
  --radius: 0.25rem;
  --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  --max-width: 1170px;
  --fixed-width: 620px;
}

.sidebar-toggle {
  position: fixed;
  top: 44rem;
  left: 11rem;
  font-size: 2rem;
  background: transparent;
  border-color: transparent;
  color: var(--clr-orange);
  transition: var(--transition);
  cursor: pointer;
  /* animation: bounce 10s ease-in-out infinite; */
}
.sidebar-toggle:hover {
  color: var(--clr-orange);
  animation: expand .5s ease-in forwards;
}
.sidebar-toggle:not(:hover) {
  color: var(--clr-orange);
  animation: collapse .5s ease-out forwards;
}
@keyframes expand {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1.25);
  }
}
@keyframes collapse {
  0% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
}
.close-btn {
  position: fixed;
  top: 44rem;
  left: 70rem;
  font-size: 2rem;
  background: transparent;
  border-color: transparent;
  color: var(--clr-orange);
  transition: var(--transition);
  cursor: pointer;
  display: none;
}
.close-btn:hover {
  color: var(--clr-orange);
  animation: expand .5s ease-in forwards;
}
.close-btn:not(:hover) {
  color: var(--clr-orange);
  animation: collapse .5s ease-out forwards;
}
.logo {
  justify-self: center;
  height: 40px;
}

.links a {
  display: block;
  font-size: 1.5rem;
  text-transform: capitalize;
  padding: 1rem 1.5rem;
  color: var(--clr-grey-5);
  transition: var(--transition);
}
.links a:hover {
  background: var(--clr-primary-8);
  color: var(--clr-primary-5);
  padding-left: 1.75rem;
}
.social-icons {
  justify-self: center;
  display: flex;
  padding-bottom: 2rem;
}
.social-icons a {
  font-size: 1.5rem;
  margin: 0 0.5rem;
  color: var(--clr-primary-5);
  transition: var(--transition);
}
.social-icons a:hover {
  color: var(--clr-primary-1);
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--clr-black);
  display: grid;
  grid-template-rows: auto 1fr auto;
  row-gap: 1rem;
  box-shadow: var(--clr-red-dark);
  transition: var(--transition);
  transform: translate(-100%);
}
.show-sidebar {
  transform: translate(0);
}
.show-sidebar .close-btn {
  display: block;
}

.sidebar .card {
  width: 44em;
  margin: 3em;
}
.card {
  /* color: var(--clr-black); */
  border: 5px solid var(--clr-orange);
}
/* .card input[type=text] {
  color: var(--clr-black);
  outline: var(--clr-black);
  border: solid 1px var(--clr-black);
} */
.card label {
  margin-top: 2em;
}
.card label:first-of-type {
  margin-top: 1em;
}