body{
      width: 100%;
      background-color: #E9EDF1;
      font-size: 1rem;
      padding: 1em;
}
input, select, button {font-size: 1rem; width: 100%; box-sizing: border-box;}
table.tbl_out{
    background-color: #ffffff;
      border-radius: 16px;
      width: 90%; 
      max-width: 90%;
      margin: auto;
      text-align: center;
      box-shadow: 0 10px 30px #696767;
      z-index: 1;
      position: relative    
}
.head_top {border-bottom: none;padding: 8px 0 2px;}
.company-title-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
}
.company-title-wrap::before,
.company-title-wrap::after{
  content: "";
  flex: 1 1 auto;
  min-width: 36px;
  border-top: 1px solid #7a7a7a;
}
.company-title{
  display: inline-block;
  font-size: 32px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #6f6f6f;
  padding: 6px 18px 10px;
  border-radius: 10px;
  max-width: 100%;
  text-align: center;
  word-break: break-word;
}
.footer{padding-top:10px;color:#3f3f3f;font-size:12px;text-align:center;}
.footer a:link{color:#5b5b5b;text-decoration:none;font-size:12px;}
.footer a:hover{color:#1f4ba8;font-size:12px;}
.footer a:visited{color:#5b5b5b;font-size:12px;}
.footer-card{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 10px;padding:10px 16px;margin:0 auto;border-top:1px solid #d6d6d6;color:#4b4b4b;line-height:1.7;text-align:center;text-transform:capitalize;}
.footer-label{font-weight:700;color:#6a6a6a;letter-spacing:0.04em;}
.footer-dev{font-weight:700;color:#2d2d2d;}
.footer-separator{color:#a0a0a0;}
.footer-phone{display:inline-flex;align-items:center;font-weight:600;}
.developer-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(18,18,18,0.68);z-index:2600;}
.developer-modal.is-open{display:flex;}
.developer-modal-card{width:min(92vw,420px);padding:22px 20px 18px;border-radius:18px;background:linear-gradient(180deg,#ffffff 0%,#f7f7f7 100%);box-shadow:0 20px 44px rgba(0,0,0,0.28);text-align:center;}
.developer-modal-title{margin:0;color:#1f1f1f;font-size:22px;font-weight:800;text-transform:capitalize;}
.developer-modal-subtitle{margin:6px 0 18px;color:#777777;font-size:13px;text-transform:capitalize;}
.developer-modal-info{display:grid;gap:10px;text-align:left;}
.developer-modal-row{padding:10px 12px;border:1px solid #e1e1e1;border-radius:12px;background:#ffffff;}
.developer-modal-label{display:block;margin-bottom:4px;color:#808080;font-size:11px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;}
.developer-modal-value{display:block;color:#222222;font-size:15px;font-weight:700;word-break:break-word;text-transform:none;}
.developer-modal-value a{color:#1f4ba8;text-decoration:none;}
.developer-modal-actions{margin-top:18px;display:flex;justify-content:center;}
.developer-modal-close{border:none;border-radius:999px;padding:9px 20px;background:#2f2f2f;color:#ffffff;font-size:13px;font-weight:700;cursor:pointer;text-transform:capitalize;}
body.developer-modal-open{overflow:hidden;}
@media (max-width: 600px){
  .footer-card{padding:10px 8px;gap:6px 8px;font-size:11px;line-height:1.8;}
  .footer-label,
  .footer-dev,
  .footer-phone,
  .footer a:link,
  .footer a:hover,
  .footer a:visited{font-size:11px;}
  .developer-modal-card{padding:18px 14px 14px;border-radius:14px;}
  .developer-modal-title{font-size:19px;}
  .developer-modal-value{font-size:13px;}
}
.tbl_inside_ndani{border-collapse: collapse;width:100%;background-color: white; border-radius:10px;padding: 10px;}
.tbl_inside_two{border-collapse: collapse;width:100%;background-color: white; border-radius:10px;padding: 10px;}
.tbl_head_kichwa{font-size: 25px; color: gray;padding: 10px;font-weight: bold;height: 5px;}
.layout-menu-cell{vertical-align:top;text-align:left;}
.layout-content-cell{vertical-align:top;text-align:left;position:relative;}
.layout-content-cell > table{margin-left:0;}
.layout-main-row{
  position: relative;
}
.layout-main-row > .layout-menu-cell{
  width: 170px;
  min-width: 170px;
}
.layout-main-row > .layout-content-cell{
  width: auto;
}
.mobile-menu-close,
.mobile-menu-overlay{display:none;}
.sidebar-edge-toggle{
  position: absolute;
  top: 110px;
  left: 0;
  margin-left: -13px;
  width: 26px;
  height: 92px;
  border: none;
  border-radius: 0 14px 14px 0;
  background: linear-gradient(180deg, #f4f4f4 0%, #d9d9d9 100%);
  color: #222222;
  box-shadow: 0 10px 22px rgba(0,0,0,0.16);
  cursor: pointer;
  z-index: 1300;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: left 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
.sidebar-edge-toggle:hover{
  background: linear-gradient(180deg, #ffffff 0%, #dddddd 100%);
}
.sidebar-edge-toggle-icon{
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
}
body.desktop-menu-collapsed .sidebar-edge-toggle{
  left: 0;
  margin-left: 0;
}
body.desktop-menu-collapsed .layout-menu-cell{
  display: block;
  flex: 0 0 58px;
  width: 58px !important;
  min-width: 58px !important;
  padding: 0 2px 0 0;
  overflow: visible;
  text-align: left !important;
}
body.desktop-menu-collapsed .layout-menu-cell > *{
  opacity: 1;
  pointer-events: auto;
}
body.desktop-menu-collapsed .layout-content-cell{
  display: block;
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
}
body.desktop-menu-collapsed .layout-content-cell > table,
body.desktop-menu-collapsed .tbl_inside_ndani,
body.desktop-menu-collapsed .tbl_inside_two,
body.desktop-menu-collapsed .uwanja_wa_kazi{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.desktop-menu-collapsed .sidebar-edge-toggle{
  margin-left: -10px;
}
body.desktop-menu-collapsed .layout-main-row{
  display: flex;
  align-items: flex-start;
  width: 100%;
}

@media (min-width: 901px) {
  .layout-main-row{
    display: flex;
    align-items: flex-start;
    width: 100%;
  }

  .layout-menu-cell{
    display: block;
    flex: 0 0 170px;
    padding-right: 10px;
    box-sizing: border-box;
  }

  .layout-content-cell{
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    padding-top: 0;
  }

  .layout-content-cell > table,
  .tbl_inside_ndani,
  .tbl_inside_two,
  .uwanja_wa_kazi{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
.mytext{
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 1rem;
    } 

/* Phone size: keep text readable */
@media (max-width: 600px) {
  .mytext {
    font-size: 100%;
  }

  .head_top {
    padding: 4px 8px 0;
  }

  .company-title-wrap{
    gap: 10px;
  }

  .company-title-wrap::before,
  .company-title-wrap::after{
    border-top-width: 1px;
  }

  .company-title{
    font-size: 20px;
    letter-spacing: 0.4px;
    line-height: 1.2;
    padding: 2px 8px 6px;
  }
}

@media (max-width: 900px) {
  body {
    padding: 0.4em;
  }

  table.tbl_out {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
  }

  .layout-main-row {
    display: block;
    width: 100%;
  }

  .layout-main-row > td,
  .layout-menu-cell,
  .layout-content-cell {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
    vertical-align: top;
  }

  .layout-menu-cell {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: min(72vw, 280px) !important;
    min-width: 0;
    max-width: 280px;
    padding: 56px 12px 16px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(0,0,0,0.22);
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    z-index: 1200;
  }

  .layout-content-cell {
    padding: 0;
    width: 100% !important;
    display: block;
    min-width: 0;
  }

  .uwanja_wa_kazi {
    text-align: left !important;
  }

  .layout-menu-cell table {
    width: 100%;
  }

  .layout-content-cell table[align="center"] {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  body.mobile-menu-open .layout-menu-cell {
    transform: translateX(0);
  }

  .sidebar-edge-toggle{
    position: fixed;
    top: 88px;
    left: 10px;
    margin-left: 0;
    transform: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
  }

  .mobile-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 1px solid #cfcfcf;
    border-radius: 50%;
    background: #ffffff;
    color: #111111;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
  }

  .mobile-menu-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 17, 0.12);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 1100;
  }

  body.mobile-menu-open .mobile-menu-overlay {
    opacity: 1;
    visibility: visible;
  }
}

@media (max-width: 640px) {
  .layout-content-cell {
    min-width: 0;
  }

  .tbl_inside_ndani,
  .tbl_inside_two {
    padding: 6px;
  }

  .layout-menu-cell {
    width: min(68vw, 240px) !important;
    max-width: 240px;
  }
}

@media (max-width: 420px) {
  .company-title-wrap{
    gap: 8px;
  }

  .company-title-wrap::before,
  .company-title-wrap::after{
    min-width: 22px;
  }

  .company-title {
    font-size: 17px;
    letter-spacing: 0.2px;
    padding: 0 4px 4px;
  }

  .sidebar-edge-toggle {
    top: 84px;
    left: 8px;
    width: 34px;
    height: 34px;
  }
}


a:link{text-decoration: none;}
table.tbl_login{border-collapse: collapse;width:100%;background-color: #DEFAD9;}
table.uwanja_wa_kazi{background-color: #C3FAB9;}
.mybuttons {
  background-color: #666666;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 15px;
  font-size: 14px;
  cursor: pointer;
  height: 30px; /* Ensure the button height matches the date containers */
  width: 150px;
}
.adrress{width: 600px;
    height: 60px;
    text-align: center;
    font-size: 20px;
    border-radius: 5px;
    background-size: 30px;
    background-color: #78FA61;
    color: navy;}
.dawa_search{width: 650px;
    height: 35px;
    text-align: left;
    font-size: 20px;
    border-radius: 5px;
    background-size: 30px;
    background-color: #E8F0FE;
    color: navy;}
 /* Animation background container */
    .burst-container {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .water-burst, .ripple {
      position: absolute;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .water-burst {
      background: radial-gradient(circle, rgba(79,195,247,0.5) 30%, transparent 80%);
      animation: waterBurst 4s infinite ease-in-out;
      z-index: 0;
    }

    .ripple {
      border: 3px solid rgba(79,195,247,0.4);
      animation: rippleWave 3s infinite ease-out;
      z-index: 0;
    }

    @keyframes waterBurst {
      0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
      }
      50% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0.9;
      }
    }

    @keyframes rippleWave {
      0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
      }
      100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
      }
    }

    /* Login Form */
    .login-container {
      background-color: #ffffff;
      border-radius: 16px;
      padding: 40px 30px;
      width: 400px;
      text-align: center;
      box-shadow: 0 10px 30px #DCDBE7;
      z-index: 1;
      position: relative;
    }

    .login-container img.logo {
      width: 80px;
      margin-bottom: 20px;
    }

    .login-container h2 {
      color: #333;
      margin-bottom: 20px;
    }

    .login-container input[type="text"],
    .login-container input[type="number"],
    .login-container input[type="password"] {
      width: 100%;
      padding: 12px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 8px;
      outline: none;
    }

    .login-container input[type="number"]::-webkit-outer-spin-button,
    .login-container input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .login-container input[type="number"] {
      -moz-appearance: textfield;
      appearance: textfield;
    }

    .login-container input[type="submit"] {
      background-color: #4FC3F7;
      border: none;
      padding: 12px;
      width: 100%;
      border-radius: 8px;
      color: white;
      font-weight: bold;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .login-container input[type="submit"]:hover {
      background-color: #0288d1;
    }
    .myfields2{width: 50%; padding: 7px; border: 1px solid #ccc;  border-radius: 5px;    box-sizing: border-box;}
    .heads_users{background-color: #49983B;padding: 20px;color: white;border-radius: 10px;font-weight: bold;}