* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

nav {
  display: flex;
  height: max-content;
  background: #FF9800;
  align-items: center;
  justify-content: space-between;
  padding: 1%;
  flex-wrap: wrap;
}

nav .logo {
  color: #ffffff;
  font-size: 2em;
  font-weight: 600;
}

nav a {
  text-decoration: none;
  color: #ffffff;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin-right: 15%;
  margin-left: 15%
}

nav ul li {
  margin: 0 5px;
}

nav ul li a, .nav-link {
  color: #ffffff;
  text-decoration: none;
  font-size: 1.2em;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 10px;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

nav ul li a.active, nav ul li a:hover, .nav-link:focus, .nav-link:hover {
  color: #111;
  background: #fff;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: #ffffff;
}

.navbar-collapse {
  text-align: center;
}

.subhead {
  background: #c5c5c5;
  text-align: center;
  color: #ffffff;
  outline: none;
  text-decoration: none;
}

.subhead ul {
  /*display: inline-flex;*/
  list-style-type: none;
  text-align: center;
  margin: 0 auto;
  padding: 0;
}

.content {
  text-align: center;
  margin: 1% 10%;
}


.content .manual-style {
  text-align: left;
  display: inline-block;
  margin: 1%;
}


.noFormat {
  color: #1b1b1b;
  outline: none;
  text-decoration: none;
}

.content .myCSSform {
  text-align: left;
  margin: 1% 22%;
}

.content p {
  margin: 1% 0%;
}

.content .left {
  margin: 1% 22%;
  text-align: left;
}

/*
.content label, .content input {
  margin: 1% 0%;
}
*/

.content table .planningTable, .content .planningTable th, .content .planningTable td {
  border: 1px solid #1b1b1b;
  border-collapse: collapse;
  border-radius: 5px;
  margin: 1% auto;
  padding: 5px;
  text-align: center;
}

.content table caption {
  font-weight: bold;
}

.content .center {
  text-align: center;
  margin: 1% auto;
}

form .inline {
  display: inline-block;
}

.input-group-format {
  display: flex;
  align-items: center;
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #ced4da;
  border-radius: .25rem
}

.myrow>* {
  padding: 0%;
}

.edit-popup {
  position: relative;
  text-align: center;
  width: 100%;
}

.form-popup {
  display: none;
  position: fixed;
  padding: 2%;
  left: 50%;
  top: 25%;
  transform: translate(-45%, 5%);
  border: 2px solid #666;
  background-color: #ffffff;
  z-index: 9;
}

.content .myTable{
  border-collapse: separate;
  width: 40%;
  vertical-align: top;
  border-radius: 5px;
  border-spacing: 5px;
  text-align: center;
  margin: 1% auto;
  padding: 5px;
}
.content .myTable thead, .content .myTable thead th{
  vertical-align: top;
  border-radius: 50px;
  margin: 1% auto;
  text-align: center;
  margin: 1% auto;
  padding: 5px;
  text-align: center;
  background-color: #e9ecef;
}

.content .myTable tbody{
  vertical-align: top;
  border: 1px solid #ced4da; 
  border-radius: 50px;
  margin: 1% auto;
  text-align: center;
  margin: 1% auto;
  padding: 5px;
  text-align: center;
}

.content .listIngTable{
  border-collapse: collapse;
  width: 40%;
  vertical-align: top;
  text-align: center;
  margin: 1% auto;
}
.content .listIngTable thead{
  vertical-align: top;
  text-align: center;
  border-radius: 50px;
  background-color: #e9ecef;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
  background-color: #f1f1f1;
}

.dropdown-content a {
  display: block;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown .dropdown-content ul{
  columns: 3;
  list-style: none;
}

@media (max-width: 1400px) {

  .content .myCSSform {
    text-align: left;
    margin: 1% 8%;
  }

  .content .left {
    margin: 1% 8%;
    text-align: left;
  }

}

@media (max-width: 1000px) {

  .content .myCSSform {
    text-align: left;
    margin: 1% 2%;
  }

  .content .left {
    margin: 1% 2%;
    text-align: left;
  }

}