/*++++++++++++++++++++++ Mobile Styles ++++++++++++++++++++++++++++++++++*/

@media only screen and (max-width: 812px) {

  body {
    overflow-x: hidden;
    background-color: #FAFAFA;
    height: 100%;
  }

  .errorpage img {
    width: 200px;
    height: 200px;
  }

  .errorpage a {
    font-size: 20px;
    height: 25px;
  }

  /* Adjust maps and tools for mobile */
  .maps {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
  }

  .location_coordinates {
    position: absolute;
    z-index: 2;
    width: 90%;
    left: 15%;
    top: 5px;
  }

  .location_coordinates input, 
  .location_coordinates button, 
  .location_coordinates select {
    width: 40%;
    height: 25px;
    margin-bottom: 1px;
  }

.drawingtools {
  position: absolute;
  z-index: 2;
  width: 30px;
  left: 0;
  top: 150px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  height: auto;
  overflow: visible; /* Ensure overflow is visible */
}

  .drawingtools button {
    width: 35px;
    height: 35px;
    margin: 2px;
  }

    .drawingtools img {
    width: 25px;
    height: 25px;
      }
  .gpslocation {
    z-index: 2;
    width: 100%;
    left: 0;
    height: 30px;
    bottom: 10px; /* Distance from the bottom of the viewport */
    text-align: center;
    display: none; /* Change to block to make it visible */
    position: fixed; /* Fixes the position relative to the viewport */
  }

  /* Adjust sidemenu for mobile */
  .sidemenu {
    position: absolute;
    top: 15%;
    right: 10px;
    width: 40px;
    z-index: 3;
  }

  .sidemenu button {

    width: 40px;
    height: 40px;
    margin-bottom: 5px;
  }

  /* Adjust import/export popups for mobile */
  .dataex, .dataim {
    width: 70%;
    height: auto;
    top: 20%;
    left: 10%;
    transform: translate(0, 0);
  }

  .typeco, .projco {
    width: 100%;
  }

  .typeco button, .projco button, .typeco a, .projco label {
    width: 100%;
    margin: 5px 0;
  }

  /* Adjust converter and GPS tools for mobile */
  .convert, .gotogps {
    width: 70%;
    bottom: 10px;
    right: 10%;
    left: 10%;
    transform: translate(0, 0);
  }

  .convert button, .gotogps button {
    width: 100%;
  }

  .convert input, .gotogps input, .convert select, .gotogps select {
    width: 100%;
  }

  #xin, #yin, #xout, #yout {
    width: 100%;
  }

  /* Adjust login system for mobile */
    /* Login/Logout Buttons */
    .login_btn, .logout_btn {
        position: fixed;
        top: 10px;
        right: 10px;
        width: 45px;
        height: 45px;
        z-index: 1000;
    }

    .login_btn img, .logout_btn img {
        width: 25px;
        height: 25px;
    }

    /* Login Forms */
    .log_div {
        width: 95% !important;
        height: 85% !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        border-radius: 15px;
        padding: 20px;
    }

    .log_div h3 {
        font-size: 20px;
        margin-bottom: 20px;
        text-align: center;
    }

    /* Form Inputs */
    .logsys input[type=text],
    .logsys input[type=password],
    .logsys input[type=email] {
        width: 90% !important;
        left: 5% !important;
        height: 35px;
        font-size: 14px; /* Prevents zoom on iOS */
        margin: 8px 0;
    }

    .logsys .btn {
        width: 90% !important;
        left: 5% !important;
        height: 40px;
        font-size: 18px;
        margin: 15px 0;
    }

    /* Labels and Text */
    .logsys label {
        left: 5% !important;
        font-size: 14px;
    }

    .logsys p {
        left: 5% !important;
        font-size: 14px;
        text-align: center;
    }

    /* Cloudflare Turnstile */
    .cf-turnstile {
        left: 5% !important;
        transform: scale(0.9);
        transform-origin: left center;
    }

    /* Close Button */
    .btnhide {
        width: 35px;
        height: 35px;
        top: 10px;
        right: 10px;
    }

    .btnhide img {
        width: 20px;
        height: 20px;
    }

    /* Logout Menu Items */
    .labelout {
        font-size: 14px;
        display: block;
    }

    .labelout img {
        width: 18px;
        height: 18px;
        margin-right: 10px;
    }

    /* Change Password Form */
    #changePasswordForm input[type=password] {
        width: 90% !important;
        left: 5% !important;
        height: 45px;
        font-size: 16px;
        margin: 8px 0;
    }

    /* Ensure forms are centered properly */
    .log_div > * {
        
        line-height: 0.5 !important;
        margin-bottom: 5px !important;
    }








}