#overlay{
  position: fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  pointer-events: none;
  background-color: lightgray;
  opacity: 0;
  z-index: 90;
}

#overlay.active{
  opacity: 0.5;
  pointer-events: all;
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: fixed;
  top : 50%;
  left : 50%;
  border: 3px solid #f1f1f1;
  z-index: 100;
  transform: translate(-50%, -50%);
}

#pc-popup{
  height: 60px;
  width: 400px;
  background-color: white;
  display: none;
  position: fixed;
  padding-right: 15px;
  
  z-index: 100;
  line-height: 60px;
  align-items: center;
  border-style: solid;
  border-color: lightgray;
  border-width: 2px;
}

#pc-popup label{
  padding-left: 10px;
  width: 200px;
}

#pc-popup button{
  padding: 11px;  
  margin-left: 15px;
  font-family: Roboto, Arial;
  font-size: 15px;
  font-weight: 700;
  border: none;
  color: white;
}

#pc-popup button:hover{
  opacity: 0.7;
}

#confirm{
  background-color:#04AA6D;
}

#cancel{
  background-color:red;
}

#ports-pairing{
  display:flex;
  flex-direction: column;
  width:300px;
  padding: 10px;
  box-sizing:border-box;
  border-width:2px;
  border-style:solid;
  border-color: lightgray;
  background-color: white;
  justify-content:space-between;
}

#portpair-title{
  font-family: Roboto, Arial;
  font-size: 14px;
  font-weight:bold;
  padding:0;
}

#conn-title{
  margin-top:10px;
  margin-left: 4px;
  margin-right: 4px;
  padding: 10px;

  font-family: Roboto, Arial;
  font-size: 20px;
  font-weight: bold;
  background: lightgray;
  text-align: center;
}

.portpair{
  /*margin-top: 5px;*/
  margin-left: 4px;
  margin-right: 4px;
  height : 40px;
  display : flex;
}

.module-conn{
  flex:1;
  display:flex;
  margin-right:10px;
  align-items: center;
  justify-content: center;
}

.board-conn{
  flex:1;
  display:flex;
  align-items: center;
  justify-content:center;
}

.module-conn label{
  box-sizing:border-box;
  width: 70%;
  height: 30px;
  text-align: center;
  padding-top: 6px;
  background-color: darkgray;
  color:white;
  border-radius: 10px;
}

/* Add styles to the form container */
.form-container {
  width: 300px;
  padding: 10px;
  background-color: white;
}

#module-container{
  height: 560px;
}

#rm-module-container{
  height: 550px;
}

/*Set style for Add Main Board Header*/
#md-header,
#module-header{
  background-color: darkgray;
  color: white;
  text-align: center;
}

#board-image,
#module-image,
#rm-module-image{
  height: 200px;
  width: 85%;
  padding: 20px;
}

label{
  font-family: Roboto, Arial;
  font-size: 16px;
  font-weight: bold;
}

#rm-module-id{
  display: block;
  margin-top: 10px;
  text-align: center;
  border-radius: 5px;
  padding : 5px;
  background-color: lightseagreen;
  color: white;
}


/* Set a style for the submit/login button */
.form-container .btn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-top:10px;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}

.overflow { 
  max-height: 300px; 
}

#current-board{
  display: block;
  background-color: lightgrey;
  color: rgb(75, 75, 75);
  line-height : 30px;

  padding-left : 5px;
  height: 30px;
  width:100%;
  margin-top: 5px;

  font-family: Roboto, Arial;
  font-size: 18px;
}

#mb-change-container{
  height: 585px;
}

#port-change-group{
  width: 400px;
  height: 600px;
  background-color: white;
  border-color: lightgray;
  border-width: 2px;
  border-style:solid;
  
}

#port-change{
  width: 90%;
  height:490px;
  padding-left: 10px;
  padding-right: 10px;
  overflow-y: auto;
  overflow-x: auto;
}

#sub-heading{
  width: 100%;
  height: 50px;

  margin-top: 10px;

  font-family: Roboto, Arial;
  font-size: 24px;
  text-align: center;
  display: block;
  line-height: 50px;
  background-color: cornflowerblue;
  color: white;
}

.name-div{
  margin-top: 5px;
}

.name-div,
.type-div,
.change-port{
  display:flex;
  flex-direction: row;
  height: 30px;
  line-height: 30px;
}

.mNameLabel,
.mTypeLabel{
  flex:1;
  text-align: right;
}

.mName,
.mType{
  flex: 5;
  padding-left: 10px;
}

.change-port{
  margin-top: 5px;
  text-align: center;
}

.current-port{
  flex: 1;
}

.port-name{
  flex: 1;
  background-color: lightgray;
  border-radius: 5px;
  margin-right: 10px;
}

.change-to{
  flex: 1;
  margin-right: 5px;
}

.option_class{
  font-size: 15px !important;
  text-align: center;
  
  flex: 2;
}

hr{
  border-top:1px;
  border-style: solid; 
  border-color: cornflowerblue;
}

#status{
  background-color: gray;
  margin-left: 3px;
  margin-right: 3px;
  color: white;
  display:block;
  height: 25px;
  line-height: 25px;
  padding-left : 10px;
}

#status.alert{
  background-color: yellow;
  color: red;
}

#empty-label{
  margin-left: 5px;
}