body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  background-color: #000000;
  counter-reset: Serial;
}

.txtWhite{
	color: #FFFFFF;
}

.txtRed{
	color: #FF0000;
}

.txtBold{
	font-weight: bold;
}

.txt18{
	font-size: 18px;
}

.txt20{
	font-size: 20px;
}

.inputPort{
	width:75px;
}

.inputIpAddress{
	width:135px;
}

.inputHostname{
	width:200px;
}

.inputFirewallRule{
	width:600px;
}

.sections{
	display: none;
}

.borderless{
    border: none;
	border-top: none;
}

.autoCounter:first-child:before{
  counter-increment: Serial; 
  content: counter(Serial); 
}

#mainBody {
  background: rgba(0, 0, 0, 0.9);
}

/*Iphone CheckBox*/
.material-switch > input[type="checkbox"] {
    display: none;   
}

.material-switch > label {
    cursor: pointer;
    height: 0px;
    position: relative; 
    width: 40px;  
}

.material-switch > label::before {
    background: rgb(200, 0, 0);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    content: '';
    height: 16px;
    margin-top: -8px;
    position:absolute;
    opacity: 0.3;
    transition: all 0.4s ease-in-out;
    width: 40px;
}
.material-switch > label::after {
    background: rgb(200, 0, 0);
    border-radius: 16px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    content: '';
    height: 24px;
    left: -4px;
    margin-top: -8px;
    position: absolute;
    top: -4px;
    transition: all 0.3s ease-in-out;
    width: 24px;
}
.material-switch > input[type="checkbox"]:checked + label::before {
    background: inherit;
    opacity: 0.5;
}
.material-switch > input[type="checkbox"]:checked + label::after {
    background: inherit;
    left: 20px;
}

/*PopUp*/
.modalVerticalCenter{
  position: relative;
  top: 40%;
  transform: translateY(-40%);
}