body {
    margin-top: env(safe-area-inset-top); /* This accounts for the status bar height */
  }
  
  :root {
    --main-color: #1E9C43 !important;
    /* --main-color: #20A848 !important */
  }
  
  /* @overRides */
  .bg-success {
    background-color: var(--main-color) !important;
  }
  .btn-success {
    background-color: var(--main-color) !important;
  }
  .btn-outline-success {
    border: 1px var(--main-color) !important;
  }
  .text-success {
    color: var(--main-color) !important;
  }
  
  /* @shadows */
  .shadow-1 {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  }
  .shadow-2 {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  }
  .shadow-3 {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  }
  .shadow-4 {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  }
  .shadow-5 {
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  }
  
  /* @progress bar */
  .range-fluid {
    width:1%;
    height: 10px;
    transition: 500ms;
    background-color: var(--main-color);
  }
  
  
  /* @farm selection */
  .farm-list-viewer   {
    height: 70vh;
    overflow-y: auto;
  }
  .farm-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  .farm-list li {
    padding: 4%;
    margin-bottom: 3%;
    background-color: white;
    /* outline: 1px solid var(--main-color); */
  }
  
  .form-container {
    height: 65vh;
    overflow-y: auto;
  }
  
  code {
    font-family: 'Courier New', monospace;
    /* Other styling properties can be added as needed */
  }
  

  .active-tab {
    transition: 500ms;
    border-bottom: 3px solid var(--main-color) !important;
}
  
  /* @general */
  .full-height {
    height: 100vh;
    overflow-y: hidden !important;
  }
  .pointer {
      cursor: pointer;
  }
  .fix-to-top {
      position: fixed; 
      top: 0;  
      z-index: 10;
  }
  
  .fix-above-bottom {
      position: fixed; 
      bottom: 9%;
      left: 80%;  
      z-index: 40;
  }
  .fix-to-bottom {
      position: fixed; 
      bottom: 2%;
      left: 0;  
      z-index: 10;
  }
  
  
  input:focus, select:focus, textarea:focus, button:focus {
    outline: none !important;
    box-shadow: none !important;
    border: 1px solid var(--main-color) !important;
  }
  
  
  .circular-div {
      width: 150px;
      height: 150px;
      background-color: var(--main-color); /* Set your desired background color */
      border-radius: 50%;
    }
    .circular-div > h1 {
      font-size: 105px !important;
    }
  
  .icon {
      width: 200px; 
      height: 200px; 
      display: block; 
      margin: auto;
  }
  .icon-sm {
      width: 50px; 
      height: 50px; 
      display: block; 
      margin: auto;
  }
  .icon-sm-sm {
    width: 50px; 
    height: 50px; 
    display: block; 
    margin: auto;
  }
  
  [activity="page"] {
      margin-top: 5%
  }
  
  .preview-photo{
      width: 100px; 
      height: 100px; 
      border: 4px solid white;
      margin: 1.5%;
      border-radius: 10px;
  }
  
  #scroll-container {
      width: 100%; /* Adjust the width as needed */
      overflow-x: scroll;
      white-space: nowrap;
      padding: 10px;
  }
  
  #scroll-container img {
      width: 100px; /* Set the width of each image */
      height: auto; /* Maintain the aspect ratio */
      margin-right: 10px; /* Adjust the margin between images */
  }
  
  .upload-toast {
      position: fixed;
      bottom: 0;
      left: 0;
      transform: translate(-50%, -50%);
  }
  
  #forms-list {
    height: 60vh;
    overflow-y: scroll !important;
  }
  


  .bottomsheet-modal-backdrop {
    display: none; 
    width: 100% !important; 
    height: 100vh !important; 
    position: fixed !important; 
    top: 0 !important; 
    /* background: #12d84d; */
    background: rgba(0,0,0,0.5); 
    backdrop-filter: blur(10px); 
    z-index: 80;
  }
  
  /* Style for the container */
  .ellipsis-container {
      width: 100%; /* Set the width of the container */
      /* width: 200px; Set the width of the container */
      white-space: nowrap; /* Prevent text from wrapping to the next line */
      overflow: hidden; /* Hide any overflowing content */
    }
    
    /* Style for the text with ellipsis */
    .ellipsis-text {
      text-overflow: ellipsis; /* Display an ellipsis (...) when text overflows */
      overflow: hidden; /* Hide any overflowing content */
    }
  
  .goal {
      font-size: larger;
      list-style-image:  url('/www/css/library/fontawesome-free-6.5.1-web/svgs/solid/bullseye.svg');
  }
  .objecttives {
      list-style-image:  url('/www/css/library/fontawesome-free-6.5.1-web/svgs/regular/file-lines.svg');
  }
  
  
  .goal { margin: 1em; }
  
  .goal input {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    }
  
  .goal input ~ ul { display: none; }
  
  .goal input:checked ~ ul { display: block; }
  
  

  .collapsible-objectives {
    background-color: var(--main-color);
  }
  .collapsible-outcomes {
    background-color: #12d84d;
  }

  .collapsible {
      /* background-color: var(--main-color); */
      color: white;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
    }
    
    /* .active, .collapsible:hover {
      /* background-color: #b13535; */
    /* }  */
    
    .collapsible:after {
      content: '\002B';
      color: white;
      font-weight: bold;
      float: right;
      margin-left: 5px;
    }
    
    .collapsible .active:after {
      content: "\2212";
    }
    
    .content {
      /* padding: 0 18px; */
      max-height: 0;
      overflow: auto;
      transition: max-height 0.2s ease-out;
      background-color: #f1f1f1;
    }
  
  
  


    
      /* Switch */
      .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
      }
      
      .switch input { 
        opacity: 0;
        width: 0;
        height: 0;
      }
      
      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
      }
      
      .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
      }
      
      input:checked + .slider {
        background-color:  var(--main-color);
      }
      
      input:focus + .slider {
        box-shadow: 0 0 1px  var(--main-color);
      }
      
      input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
      }
      
      /* Rounded sliders */
      .slider.round {
        border-radius: 34px;
      }
      
      .slider.round:before {
        border-radius: 50%;
      }
      /* Switch  END*/
  
  

      .range-container {
        width: 100%; /* Ensure the parent div is full width */
    }
    
    .range-input {
        -webkit-appearance: none; /* Remove default styling */
        appearance: none;
        width: 100%; /* Full width */
        height: 10px; /* Increase height */
        background: #ddd; /* Background color */
        border-radius: 5px; /* Rounded corners */
    }
    
    .range-input::-webkit-slider-thumb {
        -webkit-appearance: none; /* Remove default styling */
        appearance: none;
        width: 20px; /* Thumb width */
        height: 20px; /* Thumb height */
        background: #4CAF50; /* Thumb color */
        border-radius: 50%; /* Round thumb */
        cursor: pointer; /* Change cursor on hover */
    }
    
    .range-input::-moz-range-thumb {
        width: 20px; /* Thumb width */
        height: 20px; /* Thumb height */
        background: #4CAF50; /* Thumb color */
        border-radius: 50%; /* Round thumb */
        cursor: pointer; /* Change cursor on hover */
    }








  
  
  @media only screen and (max-width:900px), (max-device-width: 900px) {
      [activity="page"] {
          margin-top: 10%
      }
  }
  @media only screen and (max-width:412px), (max-device-width: 412px) {
      [activity="page"] {
          margin-top: 20%
      }
  }