a, body, h1, h2, h3, h4, h5, p {
     font-family: "Open Sans", sans-serif !important;
     font-feature-settings: "kern", "liga", "pnum"
}
 body {
     font-size: 0.75rem !important;
}
 h4 {
     font-weight: 700;
}
 .navbar {
     overflow: hidden
}
 body {
     margin: 0
}
 .row {
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     margin-right: 20px !important;
     margin-left: 20px !important;
}
 .title {
    /* border-radius: 25px;
     */
     background: #D3D3D3;
     border: 2px solid black;
     text-align: center;
     margin-top: 20px;
     padding: 8px;
     box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1);
}
 .genus-selector, .genus-psu-selector {
    /* border-radius: 25px;
     */
     background: #D3D3D3;
     border: 2px solid black;
     text-align: center;
     margin-top: 20px;
     padding: 10px;
     box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1);
}
 .genus-counter {
    /* border-radius: 25px;
     */
     background: #D3D3D3;
     border: 2px solid black;
     text-align: center;
     margin-top: 20px;
     padding-top: 10px;
     padding-bottom: 10px;
     box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1);
}
 @media (max-width: 988px) {
     .col-md-6 {
         -ms-flex: 0 0 100 !important;
         flex: 0 0 100% !important;
         max-width: 100% !important;
    }
     .col-md-3 {
         -ms-flex: 0 0 100 !important;
         flex: 0 0 100% !important;
         max-width: 100% !important;
    }
}
 #slots_free {
     padding-top: .5em;
     padding-bottom: .5em;
}
 .module-select {
     text-align: left;
     width: 100%;
     margin-top: 20px;
}
 .module-select button {
     background-color: #134655;
     color: #FFFFFF;
     padding: 5px;
     margin-top: .5em;
     border: 2px black solid;
}
 .module-select button:hover {
     border: 2px white solid;
}
 .module-select button:active {
     border: 2px #17a2b8 solid;
}
 .selector {
     text-align: left;
     width: 100%;
}
 .module-settings {
     text-align: left;
     width: 100%;
     margin-bottom: 10px;
     margin-top: 10px;
}
 .module-settings button, .button {
     background-color: #134655;
     color: #FFFFFF;
     padding: 5px;
     margin-top: .5em;
     border: 2px black solid;
}
 .module-settings button:hover, .button:hover {
     border: 2px white solid;
}
 .module-settings button:active, button:active {
     border: 2px #17a2b8 solid;
}
 .module-info {
     text-align: left;
     width: 100%;
     margin-top: 20px;
     padding-left: 20px;
     font-weight: 600;
}
.modules-fitted {
    background: #D3D3D3;
    /* border-radius: 25px;
    */
    margin-bottom:  20px;
    padding: 20px;
    border: 2px solid black;
    box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1);
}
 @media (max-width: 998px) {
     .modules-fitted {
         background: #D3D3D3;
        /* border-radius: 25px;
         */
         margin-top: 20px;
         padding: 20px;
         border: 2px solid black;
         margin-bottom: 20px;
    }
}
 .module-family {
     background: #D3D3D3;
     /* border-radius: 25px;
     */
     padding: 20px;
     margin-bottom: 30px;
     border: 2px solid black;
     text-align: center;
     box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1);
}
 #slots_contents {
     font-weight: 700;
}
 #Chassis-Selector, #PSU-Selector {
     width: 100%;
     font-size: 0.8m;
     text-align: center;
}
 #selector {
     width: 100%;
     font-size: 0.8m;
     text-align: center;
}
 .chassi1 {
     width: 100%;
     height: 100%;
}
 .chassi2 {
     width: 100%;
     height: 100%;
}
 .chassi3 {
     width: 100%;
     height: 100%;
}
 .chassi4 {
     width: 100%;
     height: 100%;
}
 .chassi5 {
     width: 100%;
     height: 100%;
}
 .genus-chassis {
     width: auto;
     text-align: center;
     padding: 20px;
}
 .genus-chassis img {
     max-width: 100%;
     height: auto;
     box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1);
}
 .genusmodules1 {
     z-index: 99;
     position: relative;
     height: 7.5vw;
     top: -7.5vw;
     width: 76%;
     margin-left: 10%;
     margin-bottom: -7vw;
}
.genusmodules2 {
    z-index: 99;
    position: relative;
    height: 7.5vw;
    top: -15vw;
    width: 76%;
    margin-left: 10%;
    margin-bottom: -7vw;
}
.genusmodules3 {
    z-index: 99;
    position: relative;
    height: 7.5vw;
    top: -22.5vw;
    width: 76%;
    margin-left: 9.2%;
    margin-bottom: -7vw;
}
 @media (max-width: 985px) {
      .genusmodules1 {
           display: none;
      }
      .genusmodules2 {
          display: none;
     }
     .genusmodules3 {
         display: none;
    }
     .genus-chassis {
         display: none;
    }
     .selector {
         margin-top: 20px;
    }
}
 @media (max-width: 985px) {
     .genusmodules1 {
          display: none;
     }
     .genusmodules2 {
         display: none;
    }
    .genusmodules3 {
        display: none;
   }
     .genus-chassis {
         display: none;
    }
     .selector {
         margin-top: 20px;
    }
}
 .form-container {
     background: #D3D3D3;
    /* border-radius: 25px;
     */
     margin-top: 20px;
     padding: 20px;
     border: 2px solid black;
     margin-bottom: 20px;
     box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1);
     min-height: 39em;
}
 .form-container label {
     clear: both;
}
 #form-button {
     background-color: #134655;
     color: #FFFFFF;
     padding: 5px;
     border: 2px black solid;
     margin-top: 1em;
}
 #form-button:hover {
     border: 2px white solid;
}
 .current-modules {
     background: #D3D3D3;
    /* border-radius: 25px;
     */
     margin-top: 20px;
     padding: 20px;
     border: 2px solid black;
     margin-bottom: 20px;
     box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1);
}

.modules {
     background: #D3D3D3;
    /* border-radius: 25px;
     */
     margin-top: 20px;
     padding: 20px;
     border: 2px solid black;
     margin-bottom: 20px;
     box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1);
     height: auto;
}

 #moduleFamily button {
     background-color: #134655;
     color: #FFFFFF;
     padding: 5px;
     margin-left: 5px;
     border: 2px black solid;
     margin-bottom: .5em;
     margin-top: .5em;
}
 #moduleFamily button:hover {
     border: 2px white solid;
}
 .familySelector {
     width: 100%;
     margin-top: 10px;
     margin-bottom: 10px;
}
 #moduleInfo {
     text-align: left;
     font-weight: 700;
}
#module-information {
    max-width: 60em;
    width: 60em;
    height: 100%;
    margin-right: 10px;
    float: left;
}
 .module {
     float: left;
     margin-right: 5px;
}
 .bg-etl {
     background-color: #134655 !important;
}
 @media (min-width:0px){
     .navbar-expand-lg {
         -ms-flex-flow: row nowrap !important;
         flex-flow: row nowrap !important;
         -ms-flex-pack: start !important;
         justify-content: flex-start !important;
    }
}
 #configuration {
     display: none;
}
 i {
     font-size: 0.6em;
}
 .form-enter {
     margin-top: 10px;
}
 #form-enter-button {
     background-color: #134655;
     color: #FFFFFF;
     padding: 5px;
     border: 2px black solid;
     margin-top: 1em;
}
 #form-enter-button:hover {
     border: 2px white solid;
}
 .config-enter {
     text-align: left;
}
 #placeConfig {
     display: none ;
}
 .module-settings input {
     font-size: 1em;
}

.form-container input, .form-container select {
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
  padding-left: 0.2em;
}

 #download_link {
     background-color: #134655;
     color: #FFFFFF;
     padding: 5px;
     border: 2px black solid;
     margin-top: 1em;
}
 #download_link:hover {
     border: 2px white solid;
}
 .download {
     margin-top: 1em;
     margin-bottom: 0.5em;
}
 .login {
     font-weight: bold;
}

#myInput {
  background-position: 10px 12px; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  width: 100%; /* Full-width */
  font-size: 16px; /* Increase font-size */
  padding: 12px 20px 12px 40px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
    margin-top: 30px;
}

.btn-filter {
    margin-top: 2em;
    margin-bottom: 2em;
}

.page-break {
  page-break-after: always;
  page-break-inside: avoid;
  clear:both;
}
.page-break-before {
  page-break-before: always;
  page-break-inside: avoid;
  clear:both;
}

textarea {
    overflow: auto;
    resize: vertical;
    padding-left: 0.2em;
    width: 100%;
    height: 100px;
}

#current_imageUrl, .current_imageUrl {
  display: none;
}

 .show-modules {
    display:-webkit-inline-flex;
    display:inline-flex;
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
    -webkit-align-items:baseline;
    align-items:baseline;
    margin: 5px;
}

.modules-modules {

    margin-left: 5px;
    margin-right: 5px;
}
.description-modules {
    margin-left: 5px;
    margin-right: 5px;
    line-height: 2.00em;
    font-size: 0.8em !important;
}

#current_connectors {
    /* display: none; */
}
 
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 15%; /* Location of the box */
    left: 0;
    top: 0;
    width: 50%; /* Full width */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }

  .modal-content {
    width: 50% !important;
    padding: 1.5em !important;
}
  
  /* Modal Content */
  .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }
  
  /* The Close Button */
  .close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }