:root {
    --color-first: #0056a3;
}
body {
  padding-top: 80px;
  padding-bottom: 0px;
  background-color: #4A72B2 !important;
  color: #4A72B2 !important;
}
body > div > footer > p {
  color: #ffffff !important;
  text-align: center;
  margin-top: 35px;
}
.miadmin {
  color: #4A72B2 !important;
  position: relative;
  top: 12px;
}
.login-pd .content-img {
    width: 1140px;
    padding: 0px;
    height: 94px;
    margin-left: 0px! important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-pd .content-img > img {
    margin-left: auto;
    margin-right: auto;
}
.login-pd .logo-login {
    width: 220px;
    /*position: relative;*/
    top: 16px;
}
.body-pd {
  margin-top: 78px;
  margin-bottom: 41px;
  margin-left: auto;
  margin-right: auto;
}
.body-pd .content {
  margin-left: 33%; 
  width: 33.666667%;
}
.body-pd .panel-title {
  text-align: center;
}
.body-pd .content-icon {
  width: 10%;
  position: relative;
  top: 34px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  background: var(--color-first);
  color: #ffffff;
  border: 1px;
}
.body-pd .icon-pd {
  position: relative;
  left: -2px;
}
.body-pd .mod-username {
  width: 90%;
  margin-left: 30px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.body-pd .mod-password {
  width: 81%;
  margin-left: 30px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.body-pd .content-icon-1 {
    width: 10%;
    float: right;
    position: relative;
    top: -34px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    cursor: pointer;
}
.body-pd .icon-pd-1 {
    position: relative;
    left: -5px;
    color: var(--color-first);
}
.body-pd .content-btn {
  padding-left: 122px;
  padding-right: 122px;
}
.body-pd .text-read {
  text-align: center;
}
.btn-login {
  background: #ffffff;
  color: #777777ad;
  border: 1px solid;
}
.content-btn .btn-login:hover {
  color: var(--color-first);
  border: 1px solid;
}
.content-btn .btn-login:focus {
  outline:0;
  box-shadow: 1px 2px 3px var(--color-first);
  color: var(--color-first);
}

@media only screen and (min-width: 320px) and (max-width: 359px) {
  .login-pd .content-img {
    width: 320px;
    padding: 0px;
    height: 94px;
  }
  .body-pd .content {
    margin-left: unset;
    width: unset;
  }
  .body-pd .content-icon, 
  .body-pd .content-icon-1 {
    width: 13%;
  }
  .body-pd .icon-pd {
    position: relative;
    left: -3px;
  }
  .body-pd .icon-pd-1 {
    left: -7px;
}
  .body-pd .mod-username {
    width: 87%;
    margin-left: 29px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  } 
  .body-pd .mod-password {
    width: 79%;
    margin-left: 29px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }
  .body-pd .content-btn {
    padding-left: 75px;
    padding-right: 75px;
  }
}

@media only screen and (min-width: 360px) and (max-width: 639px) {
  .login-pd .content-img {
    width: 360px;
    padding: 0px;
    height: 94px;
  }
  .body-pd .content {
    margin-left: unset;
    width: unset;
  }
  .body-pd .content-icon, 
  .body-pd .content-icon-1 {
    width: 12%;
  }
  .body-pd .icon-pd {
    position: relative;
    left: -3px;
  }
  .body-pd .mod-username {
    width: 90%;
    margin-left: 29px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  } 
  .body-pd .mod-password {
    width: 79%;
    margin-left: 29px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }
  .body-pd .content-btn {
    padding-left: 95px;
    padding-right: 95px;
  }
}

@media only screen and (min-width: 640px) and (max-width: 767px)  {
  .login-pd .content-img {
    width: 640px;
  }
  .body-pd .content {
    margin-left: 18%;
  }
  .body-pd .panel-default {
    width: 360px;
  }
  .body-pd .mod-password {
    width: 82%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px)  {
  .login-pd .content-img {
    width: 720px;
  }
  .body-pd .content {
    margin-left: 23%;
  }
  .body-pd .panel-default {
    width: 360px;
  }
  .body-pd .mod-password {
    width: 82%;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1199px)  {
  .login-pd .content-img {
    width: 944px;
  }
  .body-pd .content {
    margin-left: 29%;
  }
  .body-pd .panel-default {
    width: 360px;
  }
  .body-pd .mod-password {
    width: 82%;
  }
}