body{
    font-family: Arial, 'Open Sans', sans-serif;
    background: #f0f1f1;
    margin: 0 auto 0 auto;  
    width: 100%; 
    text-align: center;
    margin: 20px 0px 20px 0px;
  }
  
  p{
    font-size:12px;
    text-decoration: none;
    color:#ffffff;
  }
  
  h1{
    font-size:1.5em;
    color:#525252;
  }
  
  .box{
    background:white;
    width:300px;
    border-radius:6px;
    margin: 0 auto 0 auto;
    padding:0px 0px 70px 0px;
    border: #2980b9 4px solid; 
  }
  
  .password{
    border-radius:4px;
    background:#ecf0f1;
    border: #ccc 1px solid;
    padding: 8px;
    width:250px;
    font-size:1em;
  }
  
  .btn{
    background:#2ecc71;
    min-width: 90%;
    padding-top:5px;
    padding-bottom:5px;
    color:white;
    border-radius:4px;
    border: #27ae60 1px solid;
    
    margin-top:20px;
    margin-bottom:20px;
    float:left;
    margin-left:16px;
    font-weight:800;
    font-size:0.8em;
  }
  
  .btn:hover{
    background:#2CC06B; 
  }
  
  #btn2{
    float:left;
    background:#3498db;
    width:125px;  padding-top:5px;
    padding-bottom:5px;
    color:white;
    border-radius:4px;
    border: #2980b9 1px solid;
    
    margin-top:20px;
    margin-bottom:20px;
    margin-left:10px;
    font-weight:800;
    font-size:0.8em;
  }
  
  #btn2:hover{ 
  background:#3594D2; 
  }

  /* enable absolute positioning */
.inner-addon {
  position: relative;
}

/* style glyph */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align glyph */
.left-addon .glyphicon  { left:  0px; color: #bebec4}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

.loginbutton {
  background-color: #299bfd;
  border: none;
  color: #fff;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;
  margin-left: 15px;
}

.loginbutton:hover {
  background-color: #4ee44e;
}

.form-control:focus {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px #299bfd;
}

input[type=checkbox]:before {

    font-size: 15px;
    
    border: 1px solid red;
    border-radius: 5px;
}

.panel-default > .panel-heading-custom {
  text-align: left;
  background-color:#0b0f54;
  color:#fff;
  padding:10px;
  font-weight:bold;
}

.passwordMgmtInput {
  height:40px;
  border: 0px;
  background-color:#f0f0f5;
  font-size:10px;
}

.passwordMgmtFooter {
  background-color: white;
  border:0px;
  font-size: 11px;
  color: silver;
}

.divMargin {
  margin: 20px;
}


.currentPassword-toggle-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  cursor: pointer;
  color: #333;
  transform: translate(0%,-50%);
}

.currentPassword-toggle-icon i {
  font-size: 12px;
  line-height: 1;
  color: #333;
  transition: color 0.3s ease-in-out;
  margin-bottom: 20px;
}

.currentPassword-toggle-icon i:hover {
  color: lightblue;
}

#validator-output {
  .valid {
    color: green;
  }
  .invalid {
    color: red;
  }
}