html {
    font-size: small;
}
body {
    /* --font-family-sans-serif: #{inspect($font-family-sans-serif)};
    --font-family-monospace: #{inspect($font-family-monospace)}; */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    margin:0px;
    padding:0px;
    background-color: #f1f1f1 !important;
  }

  .header {
    margin-right: 0px !important;
  }

  .main {
    border-radius:25px;
    margin-top: 25px;
    margin-bottom: 25px;
    box-shadow: 5px 5px 5px 5px rgb(159 154 154);
  }

  .logo_section{
    text-align: center;
  }


  .logo_section img{
    margin-top: 80px;
  }

  .logo_section h2 {
    margin-top: 25px;
    /* color: #01411C; */
    color: #f1f1f1 !important;
  }
  .text-white {
    color: #f1f1f1;
  }
  .login_form{
    background: #E9E8E8;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
  }

  .login_form h3 {
    text-align: center;
    padding-top: 25px;
  }

  .icons_row {
    justify-content: space-around;
    margin-top: 15px;
    color: #01411C;
  }

  .icons_row a {
    color: #01411C;
    text-decoration: none;
  }

  .icons_row a:hover {
    color: #01411C;
    text-decoration: none;
  }

  .icons_row i{
    color: #01411C;
    margin-right: 15px;
  }

  .register_btn{
    background-color: #01411C;
    color: white;
  }

  /* sidebar CSS */

  .sidebar {
      margin: 0;
      padding: 0;
      width: 320px;
      background-color: #003459;
      position: fixed;
      font-size: 20px;
      height: -webkit-fill-available;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .sidebar a {
      display: block;
      padding: 15px 20px 15px 25px;
      font-weight: bold;
      font-size: 16px;
      text-decoration: none;
      color: white;
    }

    .sidebar a.active {
      background-color: rgb(51 149 212);
      color: white;
    }

    .sidebar a:hover:not(.active) {
      background-color: rgb(51 149 212);
      color: white;
    }

    div.content {
      margin-left: 328px;
      /* padding: 1px 16px; */
    }


    .logout_btn {
      background-color: rgb(51 149 212);
      /* width: 330px; */
    }
    .sidebar img {
      width: 30px;
    }

    .sidebar i{
      margin-right: 10px;
    }

    .menus{
      width: 320px;
      /* width: 385px; */
      /* padding-left: 12px; */
    }

    .org_name span {
      text-decoration: underline;
    }

    .org_name h4 {
      font-weight: bold;
    }

    .org_name img{
      width: 65px;
    }

    .org_name{
      padding: 5px;
      /* width: 385px; */
      display: flex;
      justify-content: center;
      color: white;
      border: 1px solid #dfdede;
    }

    .org_name:hover {
      color:#01411C;
    }

    .org_name h4 {
      font-weight: bold;
      font-size: 14px;
      margin-top: 15px;
    }

    .topbar {
      background-color: #003459;
      height: 69px;
      margin-left: 320px;
      display: flex;
      justify-content: space-between;
      padding: 10px !important;
      border: 1px solid #dfdede;
    }

    .Imp_link_btn {
      background-color:white;
      border-radius: 0.375rem !important;
    }

    .search {
      color: #555;
      display: flex;
      padding: 2px;
      border: 1px solid currentColor;
      border-radius: 5px;
      margin: 0 0 30px;
    }

    input[type="search"] {
      border: none;
      background: transparent;
      margin: 0;
      padding: 7px 8px;
      font-size: 14px;
      color: inherit;
      border: 1px solid transparent;
      border-radius: inherit;
    }

    input[type="search"]::placeholder {
      color: #bbb;
    }

    button[type="submit"] {
      text-indent: -999px;
      overflow: hidden;
      width: 40px;
      padding: 0;
      margin: 0;
      border: 1px solid transparent;
      border-radius: inherit;
      background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
      cursor: pointer;
      opacity: 0.7;
    }

    button[type="submit"]:hover {
      opacity: 1;
    }

    button[type="submit"]:focus,
    input[type="search"]:focus {
      box-shadow: 0 0 3px 0 #01411C;;
      border-color: #01411C;
      outline: none;
    }

    form.nosubmit {
      border: none;
      padding: 0;
      color: #555;
      margin-top: 10px;
      display: flex;
      border-radius: 5px;
      /* margin: 0 0 0px; */
  }

    input.nosubmit {
      border: 1px solid #555;
      border-radius: 25px;
      margin-left: 25px;
      width: 100%;
      padding: 5px 4px 5px 40px;
       background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 13px center;
    }

    .profile_icon{
      padding-top: 8px;
    }

    .profile_icon a{
      font-size: 15px;
      color: #01411C;
      text-decoration: none;
    }

    .profile_icon a:hover{
      font-size: 15px;
      color: #01411C;
      text-decoration: none;
    }

    .profile_icon img {
      width: 30px;
    }

    .card {
      width: 15rem;
      border-radius: 20px;
    }

    .sec_cards {
      padding: 15px 0px 0px 0px;
    }

    .info_card {
      display: flex;
      justify-content: space-around;
      margin-bottom: 25px;
    }

    .card {
      border-radius: 20px !important;
      display: flex;
        justify-content: space-around;
        /* margin-bottom: 25px; */
        /* padding: 20px; */
        background-color: white;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .card:hover {
        transform: translateY(-10px); /* Lift the card */
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2), 0 15px 40px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
    }
    .card-body {
      text-align: center;
    }


    .card-body img{
      width: 58px;
      background-color: #01411c7a;
      border-radius: 30px;
      padding: 2px;
      object-fit: none;
    }

    .card-body h3{
      margin-top: 10px;
      font-size: 22px;
    }

    .card-body h5{
      font-size: 16px;
    }

    .row h5 {
        font-weight: 500;
    }
    .row h3 {
        font-weight: 700;
        font-size: larger;
    }
    .row h1 {
        font-weight: 700;
        font-size: xx-large;
    }
    .application_table{
      border: 1px solid rgba(0,0,0,.125);
      border-radius: 25px;
      margin: 8px !important;
      background-color: white;
      padding: 20px 40px 20px 40px;
    }
    .application_table:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2), 0 15px 40px rgba(0, 0, 0, 0.2);
    }
    .section_card{
      border: 1px solid rgba(0,0,0,.125);
      border-radius: 25px;
      margin: 8px !important;
      background-color: white;
      padding: 20px 40px 20px 40px;
    }
    .section_card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2), 0 15px 40px rgba(0, 0, 0, 0.2);
    }
    .table tr:hover {
        /* transform: translateY(-1px); */
        box-shadow: 0 10px 15px rgba(247, 241, 241, 0.2), 0 15px 40px rgba(158, 157, 157, 0.2);
    }
    .application_table th {
      padding: 8px !important;
    }

    .organization {
      flex-direction: column;
      padding: 20px;
      border-radius: 25px;
      background-color: white;
      border: 1px solid #c3bebe;
      margin: 10px 50px 10px 50px !important;
    }

    .organization_table {
      flex-direction: column;
      padding: 20px;
      border-radius: 25px;
      background-color: white;
      border: 1px solid #c3bebe;
      margin: 10px 10px 10px 10px !important;
    }

    .sctnt_profile {
      justify-content:space-around;
      margin-top: 20px;
    }

    .sctnt_profile input{
      margin-bottom: 20px;
    }

    .old_record {
      border-bottom: 1px solid #555;
      padding: 5px 0px 5px 0px ;
    }

    .apply_app {
      flex-direction: column;
      padding: 20px;
      border-radius: 25px;
      background-color: white;
      border: 1px solid #c3bebe;
      margin: 80px 50px 10px 50px !important;
    }

    .search_new {
      color: #555;
      display: flex;
      padding: 2px;
      border: 1px solid currentColor;
      border-radius: 5px;
      margin: 0 0 10px;
    }

    form.nosubmit_new {
      border: none;
      padding: 0;
      color: #555;
      margin-top: 10px;
      display: flex;
      border-radius: 5px;
      /* margin: 0 0 0px; */
  }

    input.nosubmit_new {
      border: 1px solid white;
      border-radius: 25px;
      margin-left: 25px;
      width: 100%;
      padding: 5px 4px 5px 40px;
       background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 13px center;
    }

    .prv_proposal_div {
      padding: 25px;
      border: 1px solid;
      margin: 20px 20px 0px 20px;
      border-radius: 25px;
      background-color: white;
    }

    .previous_proposal {
      border: 1px solid #c3bebe;
      background-color: #003459;
      color: white;
      justify-content: space-between;
    }

    .prv_record h4{
      font-size: 16px;
    }

    .prv_record p{
      margin-bottom: 2px !important;
      font-size: 14px;
    }

    .status_btn {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .view_btn {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .view_btn button{
      background-color: #209004F5;
      border-color: #209004F5;
      color: white;
    }

    .bell_icon {
      float: right;
      font-size: 22px !important;
      padding-top: 10px;
    }

    .envelop_icon {
      font-size: 40px !important;
    }

    .form_label{
      display: flex;margin-bottom: 5px !important;
    }

    .form_input {
      padding: 0px 0px 0px 10px !important;
      font-size: 14px !important;
      height: 30px;
    }

    #applicationsPieChart, #applicationsBarChart {
      width: 600px !important;
      height: 300px !important;
    }

    @media screen and (max-width: 1024px) {
      #applicationsPieChart, #applicationsBarChart {
        width: 300px !important;
        height: 150px !important;
      }
    }



    @media screen and (max-width: 800px) {
      .sidebar {
        width: 90%;
        height: auto;
        position: relative;
      }
      .sidebar a {
        float: left;
      }
      div.content {
        margin-left: 0;
      }

      .topbar{
          margin-left: 0;
          display: flex;
          flex-direction: column;
          height: 160px;
          align-items: center;
      }
      .organization_table {
        padding: 20px;
        flex-direction: column;
        border-radius: 25px;
        background-color: transparent;
        border: none;
        margin: 0px !important;
      }
      .application_table {
        border: none;
        border-radius: none;
        margin: 10px 25px 10px 25px !important;
        background-color: transparent;
        padding: 20px 40px 20px 40px;
      }
      #applicationsPieChart, #applicationsBarChart {
        width: 400px !important;
        height: 200px !important;
      }

    }


    @media screen and (max-width: 700px) {
      .sidebar {
        width: 100%;
        height: auto;
        position: relative;
      }
      .sidebar a {
        float: left;
      }
      div.content {
        margin-left: 0;
      }

      .topbar{
          margin-left: 0;
          display: flex;
          flex-direction: column;
          height: 160px;
          align-items: center;
      }
      .organization_table {
        padding: 20px;
        flex-direction: column;
        border-radius: 25px;
        background-color: transparent;
        border: none;
        margin: 0px !important;
      }
      .application_table {
        border: none;
        border-radius: none;
        margin: 10px 25px 10px 25px !important;
        background-color: transparent;
        padding: 20px 40px 20px 40px;
      }
      #applicationsPieChart, #applicationsBarChart {
        width: 300px !important;
        height: 150px !important;
      }

    }

    @media screen and (max-width: 400px) {
      .sidebar a {
        text-align: center;
        float: none;
      }
      .organization_table {
        padding: 20px;
        flex-direction: column;
        border-radius: 25px;
        background-color: transparent;
        border: none;
        margin: 0px !important;
      }
      .application_table {
        border: none;
        border-radius: none;
        margin: 10px 25px 10px 25px !important;
        background-color: transparent;
        padding: 20px 40px 20px 40px;
      }

      #applicationsPieChart, #applicationsBarChart {
        width: 300px !important;
        height: 150px !important;
      }
    }

    .menu-container {
        max-height: 80vh;
        /* Adjust the height as needed */
        overflow-y: overlay;
        /* This will add a vertical scrollbar if necessary */
    }

    .menu-container::-webkit-scrollbar {
        width: 0;
        /* Hide the scrollbar on WebKit browsers */
    }

    /* Styles for sidebar, topbar, and menus */
    /* Same CSS as before... */

    /* Hide menu on mobile screens by default */
    @media screen and (max-width: 768px) {
        .menus {
            display: none;
        }

        .menu-container.hidden .menus {
            display: block;
        }
    }

    /* Button styles for mobile toggle */
    .toggle-menu-btn {
        display: none;
        background-color: transparent;
        border: none;
        padding: 10px;
        cursor: pointer;
        font-size: 24px;
        color: #fff;
    }

    .toggle-menu-btn-bars {
        width: 30px;
        height: 3px;
        background-color: #fff;
        margin: 6px 0;
        transition: 0.4s;
    }

    .toggle-menu-btn-bars.middle {
        margin: 6px 0 0;
    }

    .toggle-menu-btn.active .toggle-menu-btn-bars.top {
        transform: rotate(-45deg) translate(-5px, 5px);
    }

    .toggle-menu-btn.active .toggle-menu-btn-bars.middle {
        opacity: 0;
    }

    .toggle-menu-btn.active .toggle-menu-btn-bars.bottom {
        transform: rotate(45deg) translate(-5px, -5px);
    }

    @media screen and (max-width: 768px) {
        .toggle-menu-btn {
            display: block;
            position: absolute;
            top: 20px;
            right: 20px;
        }
    }


    .blue-light{
        background-color:rgb(51 149 212);
        color:white
    }