html{
  height: 100%;
}
body {
  height: 100%;
  background-image: url('../img/bg_login.jpg');
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  background-color: #ecf0f5;
}
.body-overlay{
  height: 100%;
  padding: 100px 10px 0px 10px;
}
.body-overlay:before{
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  background: #203a58a8;
  top:0;
  left: 0;
}

.sigap {
    max-width: 100%;
    margin: auto;
    width: 400px;
    min-height: 310px;
    background-size: 100%;
    background-repeat: no-repeat;
    margin-top: 100px;
    padding: 30px 9px;
}

.sigap .container {
    max-width: 100%;
}

input.form-control {
    border: 1px solid #CCC;
    box-shadow: none;
    border-radius: 0;
    font-size: 13px;
}

.sigap-item {
    /*background: #FFF;*/
    padding: 20px 16px;
    /*border-top: 2px solid #414142;*/
    border-radius: 4px;
}

.img-login {
    width: 100px;
    height: 100px;
    overflow: hidden;
    float: left;
    transform: rotate(0deg);
    margin: -32px 13px 15px -62px;
    background: #004775;
    border: 2px solid #1d6c9c;
    border-radius: 100%;
}

.img-login img{
    width:100%;
}

.header {
/*    background: #000;
    color: #FFF;*/
    padding: 10px 20px;
    /* text-align: center; */
    /*border-bottom: 2px solid #eee;*/
    font-size: 17px;
    border-radius: 3px;
    margin: -1px -1px 4px;
}

.app_name{
  font-size: 41px;
}

.btn-success {
    color: #ffffff;
    background-color: #000;
    border-color: #08164a;
    font-size: 12px;
    border-radius: 2px;
}

.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success:active:hover {
    color: #fff;
    background-color: #2774a0;
    border-color: #1f638a;
}

.footer {
    text-align: center;
    font-size: 11px;
    margin-top: 20px;
    color: #a2a2a2;;
}

i.fa {
    width: 15px;
}

.alert {
    padding: 10px 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 0px;
    font-size: 12px;
}

.alert {
    background: #c75a5a;
    color: #FFF;
    border-bottom: 1px solid #a25354;
    padding: 8px 15px;
    margin: -20px -16px 20px;
    border-radius: 2px 2px 0 0;
}

.alert i.fa {
    float: left;
    margin: 2px 6px 0;
}

/*
See the explanation of the animation here:
https://codepen.io/timseverien/pen/yvJkm
*/
@-webkit-keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 10px;
  }
  50% {
    height: 20px;
    width: 10px;
  }
}
@-moz-keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 10px;
  }
  50% {
    height: 20px;
    width: 10px;
  }
}
@-ms-keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 10px;
  }
  50% {
    height: 20px;
    width: 10px;
  }
}
@keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 10px;
  }
  50% {
    height: 20px;
    width: 10px;
  }
}


.checkbox, .checkbox-alt {
    /* background-color: #fff; */
    display: inline-block;
    height: 50px;
    margin: -17px 0.25em 0 -10px;
    width: 50px;
}
.checkbox label, .checkbox-alt label {
  display: block;
  height: 50px;
  position: relative;
  width: 50px;
}
.checkbox label:after, .checkbox-alt label:after {
  /*
  This element has a border on the right, and top. By rotating it looks like a check symbol, but the wrong way. That's why I'm flipping it with scaleX(-1)
  */
  -moz-transform: scaleX(-1) rotate(135deg);
  -ms-transform: scaleX(-1) rotate(135deg);
  -webkit-transform: scaleX(-1) rotate(135deg);
  transform: scaleX(-1) rotate(135deg);
  /*
  I want to position the symbol using the left top, because when increasing the width and height of an object, it expands from the top left corner as well. That is what makes it looks like it's being drawn.
  */
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  border-right: 4px solid #cee0;
  border-top: 4px solid #cee0;
  content: '';
  display: block;
  height: 20px;
  left: 14px;
  position: absolute;
  top: 26px;
  width: 10px;
}
.checkbox label:hover:after, .checkbox-alt label:hover:after {
  border-color: #bdd;
}
.checkbox input, .checkbox-alt input {
  display: none;
}
.checkbox input:checked + label:after, .checkbox-alt input:checked + label:after {
  -webkit-animation: check 0.8s;
  -moz-animation: check 0.8s;
  -o-animation: check 0.8s;
  animation: check 0.8s;
  border-color: #6aa;
}
.checkbox.checkbox-alt label:hover:after, .checkbox-alt.checkbox-alt label:hover:after {
  -webkit-animation: check 0.8s ease infinite;
  -moz-animation: check 0.8s ease infinite;
  -o-animation: check 0.8s ease infinite;
  animation: check 0.8s ease infinite;
}
.checkbox.checkbox-alt input:checked + label:after, .checkbox-alt.checkbox-alt input:checked + label:after {
  -webkit-animation: none;
  -moz-animation: none;
  -o-animation: none;
  animation: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 100;
}

.arc-box {
    float: left;
    border: 2px solid #ababab;
    height: 25px;
    width: 25px;
    border-radius: 4px;
    background: #f7f7f7;
}

p.petugas {
    float: left;
    color: #696969;
    font-weight: 600;
    font-size: 12px;
    padding: 4px;
}

.notif {
    color: #cc3434;
    font-size: 12px;
    margin-bottom: 15px;
}

.icon {
    float: left;
}

.captcha {
    position: absolute;
    background: #fff;
    margin-top: 30px;
    border: 2px solid #000;
    box-shadow: 1px 1px 13px #CCC;
    padding: 0px 10px 10px;
    border-radius: 4px;
    display: none;
    height: 134px;
}

.captcha p {
    font-size: 12px;
    margin: 0;
}

input.txtcaptcha {
    font-size: 18px;
    padding: 5px 10px;
    border: 2px solid #c7c7c7;
    border-radius: 3px;
    margin: 3px -9px -9px;
    background: #f7f7f7;
}

img#changecaptcha {
    right: 5px;
    top: 5px;
    position: absolute;
    cursor: pointer;
}

img#captcha {
    height: 70px;
}