@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

.loginPage{
background: url('https://i.postimg.cc/YqycMvqg/Eswatini.jpg');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /*background-position: 0 40px;*/
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 1024px;

    /* Set up proportionate scaling */
    width: 100%;
    height: auto;

    /* Set up positioning */
    position: fixed;
    top: 0px;
    left: -8px;
    margin:0px;
    /*background-color:#337ab7;*/
}

.loginPage #flagArea{
    display:none;
}


.loginPage #titleArea {
    position: absolute;
    top: 210px;
    left: 100px;
    width: 20%;
    height: auto;
    color: #000035;
    font-weight: bold;
    text-align: left;
    font-size: x-large;
    padding-top: 100px; /* creates space below the image for the text */
    z-index: 2;
    font-family:'Rubik';
}

/* Add the image above the text using ::before */
.loginPage #titleArea::before {
    content: "";
    background-image: url('https://i.postimg.cc/N0wnGJCZ/Logo-1-1-768x320.png'); /* Replace with your image URL */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    height: 130px;  /* height of the image */
    width: 130px;
    padding-left:340px;
    position: absolute;
    top: -90px;
    left: -80px;
}

.loginPage #introArea {
  display: none;
  /*justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #D3D3D3;
  width: 100%;*/
 /* height: 60px;*/ /* slightly increased height */
  /*background: #FFFFFF;*/
  /*padding: 0 15px;*/
 /* position: absolute;
  top: 0;
  left: 20px;
  right:100px;
  z-index: 1;*/
 /*padding-right:100px;*/
}

.loginPage #introArea::before {
  content: "";
  display: inline-block;
  background-image: url('https://i.postimg.cc/W4c0DhnS/dhis2-logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 130px;  /* increased width */
  height: 40px;  /* increased height */
  margin-right: auto;
}

.loginPage #introArea a {
  color: #000035;
  text-decoration: none;
  margin-right: 15px;
  position: relative;
  padding: 0.375rem 0.5rem;
  font-size: 0.9rem;
  font-family: "Inter", sans-serif;
  display:Block;
  white-space:nowrap;
}

/* Add arrow for external links */
.loginPage #introArea a::after {
  content: "↗";
  position: absolute;
  right: 0;
  top: 0;
  font-size: 0.9rem;
}



.loginPage #loginField{
    position: absolute;
  left: 0px;
    margin-top: 0px;
    width:  510px;
    height:100%;
    background: #FFFFFF;
    /*border-radius: 18px;*/
   /* border: solid 1px #e1dad1;*/
}

.loginPage #loginField #loginArea{
    /*width: 100%;*/
    /*margin: 1% 2%; */
    /*float: left; */
   /* margin-bottom: 20px;*/
    background: #FFFFFF;
    opacity: 0.8;
    /*border-radius: 18px;*/
    /*border: solid 1px #e1dad1;*/
    text-align: left;
    padding-top: 300px;
    padding-left:100px;
    height: 100%;
    font-family:'Lato';
}
.loginPage #bannerArea{
    background-image: url('https://i.postimg.cc/N0wnGJCZ/Logo-1-1-768x320.png');
    
}
.loginPage #bannerArea a{
   display: none;
   color: #000035;
}
.loginPage #footerArea{
    background: #FFFFFF;
    border-top: 2px solid #D3D3D3;
    padding:0;
    width:100%;
    color:#000035;
}
.loginPage #footerArea a{
    /*display:none;*/
    color: #000035;
    /*padding-left:20px;
    padding-right:10px;*/
}


.loginPage #footerArea #applicationFooter{
    /*background: #8f1421;*/
    color: #000035;
}
.loginPage #footerArea #applicationRightFooter{
    color: #000035;
}
.app-wrapper a{
     background: #037200;
}
#loginArea #notificationArea{
    background-color: #FFFFFF;
    color: #000035;
    margin: 0 0 15px 0;
    padding: 5px;
    padding-left:0px;
    border-radius: 3px;
    text-align:left;
    font-size:large;
    /*background-color: #c52c0b;
    color: #fcfafa;*/
}

.loginPage #loginField #loginArea #loginForm #submitDiv #submit.button{
    font-family:LiberationSansBold, arial;
    background:#000035;
    height:34px;
    border:1px solid #444;
    border-radius:3px;
    color: #FFFFFF;
    width:315px;
    font-size:large;
}

#loginField input[type=text],input[type=password],input[type=code]
{
  width: 300px;
  height: 22px;
  border: 1px solid #888;
  padding: 6px 6px;
  margin: 4px 0;
  border-radius: 3px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.14);
}