@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0; }

html, body {
  height: 100%;
  width: 100%; }

/* media Queries */
ol, ul {
  list-style: none; }

a, img {
  text-decoration: none;
  outline: none; }

input, textarea, select {
  outline: none; }

input[type=text] {
  display: block;
  height: 42px;
  width: 100%;
  padding: 6px 8px;
  box-sizing: border-box;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  font: 500 14px "Montserrat", sans-serif;
  color: #000;
  text-align: left; }

input[type=submit] {
  display: block;
  height: 42px;
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-radius: 6px;
  font: 500 14px "Montserrat", sans-serif;
  color: #fff;
  text-align: center;
  cursor: pointer;
  appearance: none;
  background-color: #2B51B9; }
  input[type=submit]:hover {
    background-color: #1A3C9A; }

select {
  display: block;
  height: 42px;
  width: 100%;
  padding: 6px 8px;
  box-sizing: border-box;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  appearance: none;
  background: url(../icons/arrow_drop_down.svg) no-repeat right 6px center #fff;
  background-size: 24px;
  font: 500 14px "Montserrat", sans-serif;
  color: #000;
  text-align: left; }

label {
  display: block;
  text-align: left;
  font: 500 14px "Montserrat", sans-serif;
  color: #505050;
  margin-bottom: 8px; }

.error {
  display: block;
  text-align: left;
  width: 100%;
  font: 400 13px/22px "Montserrat", sans-serif;
  color: red;
  background: url(../icons/error.svg) no-repeat left center;
  background-size: 18px;
  padding-left: 30px;
  box-sizing: border-box;
  margin-top: 3px; }

.wrapper {
  width: 100%;
  max-width: 1140px;
  padding: 24px;
  box-sizing: border-box;
  margin: 0 auto; }
  .wrapper header {
    width: 100%; }
    .wrapper header ul {
      width: 100%;
      display: grid;
      grid-gap: 16px;
      grid-template-columns: repeat(2, 1fr);
      align-items: center; }
      @media (max-width: 768px) {
        .wrapper header ul {
          grid-template-columns: repeat(1, 1fr); } }
      .wrapper header ul li {
        width: 100%; }
        @media (max-width: 768px) {
          .wrapper header ul li {
            text-align: center; } }
        .wrapper header ul li img {
          display: inline-block;
          width: 100%;
          max-width: 338px; }
        .wrapper header ul li h1 {
          text-align: right;
          font: 700 32px "Montserrat", sans-serif;
          color: #000; }
          @media (max-width: 768px) {
            .wrapper header ul li h1 {
              text-align: center; } }
  .wrapper .search {
    width: 100%;
    margin-top: 24px;
    display: grid;
    grid-gap: 16px;
    grid-template-columns: 280px 280px auto 160px;
    align-items: flex-start; }
    @media (max-width: 1024px) {
      .wrapper .search {
        grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px) {
      .wrapper .search {
        grid-template-columns: repeat(1, 1fr); } }
    .wrapper .search li {
      width: 100%; }
      .wrapper .search li input[type=submit] {
        margin-top: 25px; }
        @media (max-width: 560px) {
          .wrapper .search li input[type=submit] {
            margin: 0; } }
      .wrapper .search li .dob {
        width: 100%;
        display: grid;
        grid-gap: 4px;
        grid-template-columns: 72px auto 90px;
        align-items: center; }
  .wrapper .studentinfo {
    width: 100%;
    padding: 16px;
    background-color: #f4f4f4;
    border-radius: 8px;
    display: grid;
    grid-gap: 8px;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    box-sizing: border-box;
    margin-top: 24px; }
    @media (max-width: 768px) {
      .wrapper .studentinfo {
        grid-template-columns: repeat(1, 1fr); } }
    .wrapper .studentinfo li {
      width: 100%; }
      .wrapper .studentinfo li dl {
        width: 100%;
        display: grid;
        grid-gap: 8px;
        grid-template-columns: 72px auto;
        align-items: center; }
        @media (max-width: 560px) {
          .wrapper .studentinfo li dl {
            grid-template-columns: repeat(1, 1fr); } }
        .wrapper .studentinfo li dl dt {
          width: 100%; }
          .wrapper .studentinfo li dl dt .photo {
            width: 100%;
            height: 72px;
            border-radius: 8px;
            overflow: hidden; }
            @media (max-width: 560px) {
              .wrapper .studentinfo li dl dt .photo {
                width: 72px; } }
            .wrapper .studentinfo li dl dt .photo img {
              display: block;
              width: 100%; }
          .wrapper .studentinfo li dl dt h2 {
            text-align: left;
            font: 600 16px "Montserrat", sans-serif;
            color: #000; }
          .wrapper .studentinfo li dl dt p {
            margin-top: 6px;
            font: 500 14px "Montserrat", sans-serif;
            color: #505050; }
      .wrapper .studentinfo li p {
        color: #000;
        margin: 4px 0; }
        .wrapper .studentinfo li p span {
          font: 500 14px "Montserrat", sans-serif;
          display: inline-block;
          color: #505050;
          width: 140px; }
        .wrapper .studentinfo li p .password {
          font: 700 14px "Montserrat", sans-serif;
          display: inline-block;
          color: red;
          width: 140px; }
  .wrapper .downloadreportcard {
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 2px solid #DDDDDD;
    margin-top: 24px; }
    .wrapper .downloadreportcard h1 {
      text-align: left;
      font: 600 22px "Montserrat", sans-serif;
      color: #000; }
    .wrapper .downloadreportcard .links {
      width: 100%;
      margin-top: 24px;
      display: grid;
      grid-gap: 16px;
      grid-template-columns: repeat(3, 1fr);
      align-items: center; }
      @media (max-width: 768px) {
        .wrapper .downloadreportcard .links {
          grid-template-columns: repeat(2, 1fr); } }
      @media (max-width: 560px) {
        .wrapper .downloadreportcard .links {
          grid-template-columns: repeat(1, 1fr); } }
      .wrapper .downloadreportcard .links a {
        height: 42px;
        width: 100%;
        display: block;
        text-align: center;
        font: 500 14px/42px "Montserrat", sans-serif;
        color: #2B51B9;
        border: 1px solid #2B51B9;
        border-radius: 6px;
        box-sizing: border-box;
        background-color: #E8EEFF; }
        .wrapper .downloadreportcard .links a:hover {
          color: #fff;
          background-color: #2B51B9; }
  .wrapper .notfound {
    margin-top: 24px;
    width: 100%;
    border: 2px dashed red;
    border-radius: 8px;
    background-color: #FFF3F3;
    display: flex;
    flex-flow: column;
    align-items: center;
    padding: 72px 0; }
    .wrapper .notfound .icon {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center; }
      .wrapper .notfound .icon img {
        display: block;
        width: 100%;
        max-width: 124px; }
    .wrapper .notfound h1 {
      text-align: center;
      margin-top: 48px;
      font: 600 24px "Montserrat", sans-serif;
      color: red; }