/*!*******************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/header.scss ***!
  \*******************************************************************/

.header-container {
  background-color: #2f81b8;
  .navbar {
    background-color: transparent !important;
    padding: 10px 0;
    .nav-bar-container {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding-top: 10px;
      width: 100%;
      @media screen and (max-width: 991px) {
        flex-direction: column;
     }

      .nav-bar-row {
        display: flex;
        width: 100%;
        @media screen and (max-width: 991px) {
          flex-direction: column;
       }
       .navbar-toggler{
        width: fit-content;
        margin-left: auto;
        border-color: #ffffff;
        border-radius: 0px;
        .navbar-toggler-icon{
background-image: url(2f4b6de31efc0ed1c6e1.png);
        }
       }
        .navbar-brand {
          .logo-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
            .logo-images {
              display: flex;
              flex-direction: row;
              align-items: center;
              gap: 20px;
              .image-tu {
                img {
                  width: 300px;
                }
              }
              .image-cc {
                img {
                  width: 130px;
                }
              }
            }

            .logo-text {
              color: #61e2f7;
              font-size: 18px;
              letter-spacing: 1px;
              margin-bottom: 10px;
            }
          }
        }
        .nav-bar-right {
          display: flex;
          @media screen and (min-width: 991px) {
            margin-left: auto;
            flex-direction: column;
         }
          .nav-bar-right-container {
            display: flex;
            gap: 80px;
            align-items: center;
            .languge-set {
              .langs {
                display: flex;
                gap: 42px;
                align-items: center;
                .lang-item {
                  font-size: 42px;
                  color: #ffffff;
                  position: relative;
                  line-height: 47px;
                  height: 55px;
                  font-weight: 600;
                  cursor: pointer;

                  &::before {
                    position: absolute;
                    content: "";
                    width: 2px;
                    height: 36px;
                    background-color: #ffffff;
                    top: 0;
                    bottom: 0;
                    left: -20px;
                    margin: auto;
                  }

                  &:first-child {
                    line-height: 56px;

                    &::before {
                      display: none;
                    }
                  }
                }
              }
            }

            .sign-in-container {
              .item-sign-in {display: flex;
                background-color: #edf7ff;
                border-radius: 6px;
                box-shadow: 0px 0 10px #2371a6;
                cursor: pointer;
                cursor: pointer;
                .sign-in-label {
                  padding: 8px 32px;
                                    color: #3181b8;
                                    font-size: 18px;
                }
                .sign-in-icon {
                  display: none;
                  width: 34px;
                  height: 34px;
                  margin-top: 6px;
                  margin-right: 6px;
                  border-radius: 20px;
                  background-color: #000000;
                  background-image: url(059e232140b03f36e60c.png);
                  background-repeat: no-repeat;
                  background-size: 50%;
                  background-position: center;
                }
              }
            }
          }
        }
        .navbar-nav {
          margin-left: -24px;
          .nav-item {
            .nav-link {
              color: #ffffff;
              font-size: 16px;
              text-transform: uppercase;
              font-family: "Open Sans", sans-serif;
              font-weight: 600;
              padding: 6px 24px;

              &.active{color: #3181b8;
                background: #ffffff;
                border-radius: 28px;
              }
            }
          }
        }
      }
    }
  }
}

/*!*****************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/home.scss ***!
  \*****************************************************************/
.home-container{
padding: 24px 0;
@media screen and (max-width: 991px) {

padding: 100px 0;

}

.description{
    text-align: center;
    font-size: 18px;
    font-weight: lighter;
    margin-bottom: 10px;
}
.home-item {
    text-align: center;
    width: 515px;
    cursor: pointer;
    padding: 5px;
    height: auto;
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    box-shadow: 0 0 10px #d4eeff;
    }
.center-item {
    display: grid;
    place-items: center; // Centers both horizontally & vertically
    height: 100vh; // Full screen height
    }
.div-with-button {
    margin-top: 20px; /* Adds space above the div */
    border: 1px solid #e4e4e4; /* 2px thick, solid black border */
    padding: 10px; /* Optional: adds space inside the div */
    background-color: #edf7ff;
    font-weight: bold;
    box-shadow: 0 0 10px #d4eeff;
    border-radius: 10px;
    }
.div-top-space {
    margin-top: 20px;
    }
.home-item {
    text-align: left;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    cursor: pointer;
    padding: 10px;
    color: :#000;
    }
.icon-heading::before {
    font-family: "Font Awesome 6 Free";
    content: "✔"; /* Star icon */
    font-weight: 900; /* Needed for solid icons */
    color: #09568a;
    margin-right: 8px;
    font-size: 18px;
    }
.report-item{
    text-align: center;
    cursor: pointer;
    padding: 50px;
    height: 250px;
    border:1px solid #e4e4e4;
    border-radius: 10px;
    box-shadow: 0 0 10px #d4eeff;

    &:hover{
        transition: all .2s ;
        transform: scale(1.05);
    }
    .report-icon{
        margin-bottom: 20px;

    }
    .report-label{
        font-size: 20px;
        font-weight: 600;
        color: #2d5874;
    }
}
}

/*!****************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/map.scss ***!
  \****************************************************************/
.map-filter-container {
  display: flex;

  width: 100%;
  gap: 20px;
  border: 1px solid #e4e4e4;
  border-radius: 6px;
  padding: 20px;
  box-shadow: 0 0 10px #e2e0e0;
  .filter-section {
    width: 20%;
    .filter-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .filter-input-container {
      select {
        width: 100%;
        padding: 10px;
        border-radius: 6px;
        border: 1px solid #aaaaaa;
      }

      input{
        width: 100%;
        padding: 8px;
        border-radius: 6px;
        border: 1px solid #aaaaaa;
      }
}

.filter-button-container{
    button{
      background: #c9e0f2;
      border: navajowhite;
      padding: 9px 24px;
      font-size: 16px;
      border-radius: 6px;
      margin-top: 34px;
      cursor: pointer;
      color: #256998;
    }
  }
  }
}

.map-container {
  display: flex;

  width: 100%;
  gap: 20px;
  border: 1px solid #e4e4e4;
  border-radius: 6px;
  padding: 20px;
  box-shadow: 0 0 10px #e2e0e0;
  margin-top: 20px;
  .map-section {
    width: 100%;
    position: relative;
    .details-section {
      position: absolute;
      z-index: 1000;
      right: 10px;
      top: 10px;
      width: 360px;
      height: fit-content;
      background-color: #ffffff;
      border-radius: 6px;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);

      .counter-section {
display: flex;
gap: 10px;
        .counter-item {
    border: 1px solid #333;
    padding: 0 10px;
    font-size: 14px;
            .count {

            }
        }
    }

    .legend-section {
    margin-top: 20px;
        .legend-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
        }

        .legend-set {
    display: flex;
    gap: 20px;
            .legend-item {
    display: flex;
    gap: 2px;
    align-items: center;
                .legend-icon {
                    width: 18px;
                    height: 18px;
                    background-size: contain;
                    background-position: center;
                    background-repeat: no-repeat;
    &.tob{
        background-image: url(92efa4266d115f70307d.png);
    } &.alc{
        background-image: url(4ab0d673d8bbac0dfd79.png);
    } &.other{
        background-image: url(2a5391f78634a41fa93a.png);
    }
                }

                .legend-label {
    font-size: 14px;
                }
            }
        }
    }
    }
  }
}

/*!*******************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/footer.scss ***!
  \*******************************************************************/
.footer-container{
    background-color: #09568a;
    padding: 30px 10px 20px 10px !important;

    .footer{
        color: #ffffff;
        text-align: center;

        p.copyright{
            font-size: 12px;
        }
    }
}
/*!*******************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/common.scss ***!
  \*******************************************************************/
.page-container {
  padding: 30px 0;

  h1 {
    font-size: 26px;
    margin-bottom: 20px;
  }
}

#ui-datepicker-div {
  z-index: 1001 !important;
}

/* login register */

.sign-in-container {
  .sign-in-box {
    margin: 100px auto;
    padding: 20px;
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    box-shadow: 0 0 10px #e2e0e0;
    width: 420px;
    .sign-in-title {
      margin-bottom: 2px;
      width: 100%;
      font-size: 20px;
      font-weight: 600;
      text-align: center;
      color: #215f8a;
    }
    .sign-in-sub-title {
      margin-bottom: 20px;
      width: 100%;
      text-align: center;
      color: #446074;
    }

    .user-input-group {
      color: #3c3d51;
      margin-bottom: 20px;
      .user-input-label {
        margin-bottom: 6px;
      }

      .user-input-input {
        .text-box {
          width: 100%;
          padding: 8px;
          border-radius: 6px;
          border: 1px solid #aaaaaa;
        }
      }

      .checkbox-container {
        display: flex;
        gap: 8px;
        align-items: center;
        span {
          #remember {
            border: 1px solid #333;
            width: 18px;
            height: 18px;
          }
          label {
            cursor: pointer;
          }
        }
      }
      .button-container{
        text-align: center;
      .btn-sign-in{
        border: none;
        background: #edf7ff;
        padding: 8px 30px;
        border: 1px solid #b1cadd;
        color: #3181b8;
        border-radius: 6px;
        font-size: 16px;
        width: 100%;
      }
    }
    }

    .register-container {
        text-align: center;
        display: flex;
        gap: 8px;
        justify-content: center;
      span {
        &.dnthv{
opacity: 0.5;
}
        .register-btn{
            cursor: pointer;
opacity: 1;
        }
      }
    }
  }
}

/*!*********************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/style.scss ***!
  \*********************************************************************************************************/
body {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  font-variation-settings: "wdth" 100; }
  body .container-fluid {
    padding: 0px;
    margin: 0; }