/* Main Landing page CSS to enforce 5 items in a row */
@media (min-width: 1024px) { 
    .project-list {
      grid-template-columns: repeat(5, 1fr); /* Forces exactly 5 items per row on wider screens */
    }
  }

.landingmain {
    height: 100%;
    display: flex !important; /* Allow child elements to grow and fill the available space */
    flex-direction: column; /* Allow the content to be arranged vertically */
    margin-left:-280px !important;
    width: calc(99vw - 23px) !important;
  }
  
/* CSS for Side Menu removal for mobile */
.mobile-login-container {
    display: flex;
  }
  
.googlechart_mobile {
  width: 50%;
}

.vueSidebarId{
  display: none;
}

@media (max-width: 1024px) { /* Adjust this value based on your requirement */
    /* General div class to remove items for mobile */
    body.mobile-disabled {
    .mobileremoved {
        display: none !important;
    }
    .container-fluid{
      display:flex!important;
      height: 100%;
    }
    /* Div classes for adjusting the 4 metric cards in main to be mobile friendly */
    .mobiledashboardmetric {
      display: flex;
      flex-direction: column; /* Ensure items stack in a column */
      gap: 15px; /* Adds spacing between items */
      align-items: center; /* Center items horizontally */
      width: 60%;
    }
    .mobiledashboardmetric > * {  /* Targets direct child elements */
        width: 100%; /* Makes each item take up full width */
        max-width: 100%; /* Prevents any unwanted width constraints */
        transform: scale(1.5); /* Doubles everything inside */
        transform-origin: top left; /* Ensures scaling happens from the top-left */
    }
    .responsive {
      width:100%;
    }
    
    #smallcard .row {
      padding-bottom:8vh;
      padding-left:10%;
    }

    /* Mobile Friendly Sidemenu and Top Nav Bar */
    .topnavbarscaled-wrapper {
      width: calc(100% / 1.5)!important; 
    }
    
    .parameter-versioning {
        display:none;
    }
    
    .toolbar-hamburger {
        transform: scale(1.5);
        transform-origin: top left;
    }
    
    .q-drawer {
      top : 120px!important;
      width: 100%!important;
    }
    
    .col-md-12 {
      max-width: calc(100vw - 23px)!important;
      transition:  0.3s ease !important;
    }
    
    .q-route-tab i {
      font-size: 1.2rem; /* Adjust icon size */
      margin-right: 5px; /* Add spacing */
    }
    
    .googlechart_mobile {
      width: 100% !important;
    }
    .logincontainer {
        width: 80%; /* Full width on smaller screens */
    }

    .mobilebottomnavbar {
      display: flex;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 5vh; 
      background-color: rgb(46, 169, 226); 
      justify-content: center; 
      align-items: center; 
      text-align: center;
      z-index: 9000; 
    }
    .overallcontainer {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100vh; /* Full height of the viewport */
    }
    
    #layout-container {
      flex: 1; /* Takes up remaining space */
      width: 100%;
      overflow: auto; /* Ensures content is scrollable if necessary */
    }
    
    #vue-footer {
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 0;
      height: 8vh; /* Adjust height */
      background-color: white; /* Set background to white */
      z-index: 9000; /* Ensures it stays above other elements */
      display: flex;
      border-top: 3px solid rgb(46, 169, 226); /* Blue outline (3px) */
    }
    
    .footer-container {
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 0;
      height: 8vh;
      background-color: white; /* White background */
      z-index: 9000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 0;
    }
    
    .footer-toolbar {
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      padding: 0 15px;
    }
    
    .footer-item {
      flex: 1;
      text-align: center;
      padding: 15px 0; /* Added 5px padding top and bottom */
    }
    
    .footer-item:active {
      background-color: rgb(46, 169, 226); /* Turns blue when clicked */
      padding: 15px 0; /* Ensure padding also turns blue */
    }
    
    .footer-link {
      text-decoration: none;
      color: black; /* Icons and text in black */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    
    .footer-link:focus,
    .footer-link:active {
      text-decoration: none; /* Remove blue underline when clicked */
      color: black; /* Ensure text stays black */
    }
    
    .footer-icon {
      font-size: 36px; /* Increased icon size */
      color: black; /* Icon color black */
    }
    
    .footer-text {
      font-size: 16px; /* Increased text size */
      margin-top: 6px;
      color: black; /* Text color black */
    }
    

    /* #vue-footer {
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 0;
      height: 8vh; 
      background-color: rgb(46, 169, 226);
      z-index: 9000;
      display: flex;
    }

    .footer-container {
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 0;
      height: 8vh;
      outline: rgb(46, 169, 226);
      outline-width: 1px;
      z-index: 9000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 0; 
    }
    
    .footer-toolbar {
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      padding: 0 15px;
    }
    
    .footer-item {
      flex: 1;
      text-align: center;
    }
    
    .footer-link {
      text-decoration: none;
      color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    
    .footer-icon {
      font-size: 36px; 
    }
    
    .footer-text {
      font-size: 16px;
      margin-top: 6px;
      font-weight: bold;
    } */
    
    .sidebar-text {
      font-size: 28px; /* Bigger text */
    }
    
    .sidebar-items .q-icon,
    .motion-arrow .q-icon,
    .sidebar-dropdown-items .q-icon { /* Ensure child icons increase */
      font-size: 36px !important; /* Force icon size */
      width: 36px !important;  
      height: 36px !important; 
      line-height: 36px !important; 
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    
    .sidebar-text-size {
      padding: 18px 0; /* Increase padding for better touch */
    }
    
    .card-body.mobileforms {
      padding-bottom:8vh;
    }

    .card {
      padding-bottom:8vh;
    }

    .mobilecard {
      padding-bottom:0;
    }

    .modal-dialog {
      width: 80% !important;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* Scale everything inside the modal */
    .modal-content {
        width:50%!important;
        transform: scale(2);  /* 2x scaling */
        transform-origin: center; /* Ensures it scales from the center */
    }
    
    .signnaturebox {
      max-width:80%!important;
      align-items:center!important;
      justify-content:center!important;
      margin-right:30px!important;
    }
    
    /* .breadcrumbreroute {
      display:none!important;
    } */
  
    #multipleapprove-btn {
      transform : scale(1.2);
      transform-origin: right;
      margin:20px;
    }

    #submit-id-approve {
      transform : scale(1.2);
      transform-origin: right;
      margin-top:20px;
      margin-left:20px;
      margin-bottom:20px;
    }

    #submit-id-reject  {
      transform : scale(1.2);
      transform-origin: right;
      margin-top:20px;
      margin-left:20px;
      margin-right:20px;
      margin-bottom:20px;
    }

    .notmobileremoved {
      display:block;
    }
  }
}

@media (min-width: 1024px) {
  #vue-footer{
    display:none;
  }
}