* {
  /* we need this to avoid scroll bars     */
  margin: 0px;
  padding: 0px;
}
.loaderParent{
  height: 100%;
  display: flex;
  justify-content: center;
align-self: center;

}
.loader {

  border: 8px solid #f3f3f3; /* Light grey */
  border-top: 8px solid #004028; /* Blue */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  align-items: center;
  align-self: center;
  animation: spin 2s linear infinite;
  text-align: center;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


html,
body {
  font-family: "Roboto", -apple-system, "Helvetica Neue", "Lucida Grande",
    "Roboto", "Ebrima", "Nirmala UI", "Gadugi", "Segoe Xbox Symbol",
    "Segoe UI Symbol", "Meiryo UI", "Khmer UI", "Tunga", "Lao UI", "Raavi",
    "Iskoola Pota", "Latha", "Leelawadee", "Microsoft YaHei UI",
    "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa",
    "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa",
    "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli",
    "Myanmar Text", "Cambria Math";
}

#contentWrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-size: contain;
  background: url(/assets/cloud.png) no-repeat center fixed,
    url(/assets/others.png) no-repeat #f2f2e9 center fixed;
}

#content {
  background-color: #fff;
  min-height: 466px;
  max-width: 289px;
  width: calc(100% - 20px);
  padding: 1.5% 2% 0.5% 2%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  overflow: auto;
  border-radius: 15px;
}

#header {
  background-size: 215px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
#img {
  display: flex;
  justify-content: center;
  align-items: center;

  margin: 15px 0px 15px 0px;
}
#msg {
  font-size: medium;
  color: #6d6d72;

  text-align: center;
  margin: 15px 0px 15px 0px;
}
#Lmsg {
  font-size: large;
  color: #6d6d72;

  text-align: center;
  margin: 15px 0px 15px 0px;
}

#footer {
  margin-top: 19px;
  font-size: 0.9rem;
  color: #9e9ea5;
  display: flex;
}

#buttons {
  align-items: flex-start;
  background-color: #a49775;
  border-image-outset: 0px;
  border-image-repeat: stretch;
  border-image-slice: 100%;
  border-image-source: none;
  border-image-width: 1;
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  cursor: pointer;
  direction: ltr;
  display: inline-block;
  font-family: "Roboto", -apple-system, "Helvetica Neue", "Lucida Grande",
    Roboto, Ebrima, "Nirmala UI", Gadugi, "Segoe Xbox Symbol", "Segoe UI Symbol",
    "Meiryo UI", "Khmer UI", Tunga, "Lao UI", Raavi, "Iskoola Pota", Latha,
    Leelawadee, "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic",
    "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue",
    "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti",
    "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
  font-size: 1rem;
  text-align: center;
  padding: 10px;
  text-overflow: ellipsis;
  width: 100%;
  border-radius: 5px;
  border: none;
}

#buttons:hover {
  background-color: #918567;
}
a {
  text-decoration: none;
}
#pnf {
  margin-top: 10px;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

input {
  border: none;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #535353;
  cursor: auto;
  font-family: "Roboto", -apple-system, "Helvetica Neue", "Lucida Grande",
    Roboto, Ebrima, "Nirmala UI", Gadugi, "Segoe Xbox Symbol", "Segoe UI Symbol",
    "Meiryo UI", "Khmer UI", Tunga, "Lao UI", Raavi, "Iskoola Pota", Latha,
    Leelawadee, "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic",
    "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue",
    "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti",
    "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
  line-height: 20px;
  height: 36px;
  font-size: 0.9375rem;
  padding: 4px 5px 3px 6px;
  width: 97%;
}

input.text:focus {
  border-top: none;
  border-left: none;
  border-right: none;
}

@media (max-width: 1971px), (max-height: 937px) {
  #header {
    height: 94px;
    background-size: 180px !important;
  }

  #content {
    min-height: 452px;
    top: 55%;
    min-width: 332px;
    max-width: 342px;
    width: calc(100% - 80px);
    padding: 2% 2% 1.5% 2%;
    overflow-y: initial;
  }
}

@media (max-width: 1300px), (max-height: 600px) {
  #img {
    margin: 0px !important;
  }
  #contentWrapper {
    background-size: 700px;
  }
  #msg,
  #Lmsg {
    font-size: small;
  }

  #header {
    height: 50px;
    width: 216px;
    background-size: 85px !important;
    /* margin-top: 6px; */
  }

  #content {
    min-height: 307px;
    min-width: 120px;
    max-width: 222px;
    width: calc(100% - 80px);
    padding: 1% 2% 0.5% 2%;
    overflow-y: initial;
  }

  @media (max-width: 1000px), (max-height: 600px) {
    img {
      margin: 0px;
    }
    #header img {
      width: 39%;
    }
    span.submit,
    input[type="submit"] {
      padding-bottom: 10px;
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 10px;
    }
  }

  @media (max-width: 600px), (max-height: 392px) {
    #content {
      position: relative;
      top: 0;
      left: 0;
      transform: none;
      background-color: #ffffff;
      margin-bottom: 28px;
      margin-left: auto;
      margin-right: auto;
      min-height: 290px;
      min-width: 320px;
      max-width: 412px;
      width: calc(100% - 40px);
      height: auto;
      padding: 20% 3%;
      box-shadow: 0 0 0 rgba(0, 0, 0, 0);
      border: 0px solid rgba(0, 0, 0, 0);
      overflow-y: initial;
      max-height: initial;
    }
  }
}