body {
      font-family: Arial, sans-serif;
      background: white;
    }

    .filters-bar {
      margin-bottom: 20px;
    }

    .filter-tag {
      background-color: #6fcf97;
      color: white;
      border-radius: 20px;
      padding: 5px 12px;
      margin-right: 8px;
      display: inline-block;
      cursor: pointer;
      font-size: 14px;
    }

    .filter-tag span {
      margin-left: 8px;
      font-weight: bold;
    }

    .clear-all {
      color: #3cc68a;
      cursor: pointer;
      font-weight: bold;
      margin-left: 10px;
      font-size: 14px;
    }

    .top-controls {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-bottom: 20px;
    }

    .top-controls button {
      background-color: #3cc68a;
      color: white;
      border: none;
      padding: 8px 14px;
      border-radius: 4px;
      cursor: pointer;
    }

    .main-content {
      display: flex;
    }

    .sidebar {
      /* width: 50%; */
      background: #f5f5f5;
      border: 1px solid #ddd;
      padding: 20px;
      /* margin-right: 20px; */
      height: auto;
    }

    .sidebar h3 {
      margin-top: 0;
    }

    .sidebar label {
      display: block;
      margin-bottom: 10px;
      font-family: "Gilroy Regular", sans-serif;
      color: #2e2e30;
      font-weight: 600;
      font-size: 14px;
    }

    .titlehead {
      font-family: "Gilroy Regular", sans-serif;
      color: #2e2e30;
      font-weight: 600;
      font-size: 14px;
    }

    .results {
      flex: 1;
    }

    .job-card {
      background: white;
      border: 1px solid #ddd;

      margin-bottom: 15px;
    }

    .job-title {
      color: #6fcf97;
      font-size: 16px;
      margin: 0;
      FONT-WEIGHT: 600;
    }

    .job-meta {
      color: #333;
      font-size: 14px;
      margin: 5px 0;
      text-align: right;
      font-weight: 500;
    }

    .job-desc {
      margin-top: 40px;
      font-size: 14px;
      color: black;
      font-weight: 500;
      text-align: left;
    }

    .job-actions {
      margin-top: 15px;
    }

    .job-actions button {
      background-color: #61dca3 !important;
      border: none;
      padding: 8px 14px;
      color: white;
      font-size: 12px;
      margin-right: 8px;
      border-radius: 4px;
      cursor: pointer;
      float: inline-end;
      line-height: 1.42857143;
      font-weight: 600;
      letter-spacing: .0px;
    }

    .pagination {
      display: flex;
      justify-content: center;
      margin-top: 30px;
      gap: 8px;
    }

    .pagination button {
      background: white;
      border: 1px solid #6fcf97;
      color: #6fcf97;
      padding: 6px 12px;
      border-radius: 4px;
      cursor: pointer;
    }

    .pagination button.active {
      background-color: #6fcf97;
      color: white;
    }

    .modal {
      display: none;
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.4);
    }

    .modal-content {
      background-color: #fff;
      margin: 10% auto;
      padding: 20px;
      border-radius: 5px;
      width: 90%;
      max-width: 400px;
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
    }

    .close {
      cursor: pointer;
      font-size: 20px;
      color: #666;
    }

    .modal label {
      display: block;
      margin-top: 10px;
    }

    .modal input[type="text"],
    .modal input[type="email"] {
      width: 100%;
      padding: 8px;
      margin-top: 5px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    .frequency-buttons {
      display: flex;
      gap: 10px;
      margin-top: 10px;
    }

    .frequency-buttons button {
      flex: 1;
      padding: 8px;
      border-radius: 4px;
      border: 1px solid #6fcf97;
      cursor: pointer;
    }

    .frequency-buttons .selected {
      background-color: #6fcf97;
      color: white;
    }

    .modal-actions {
      display: flex;
      gap: 10px;
      margin-top: 20px;
    }

    .modal-actions button {
      flex: 1;
      padding: 10px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .modal-actions .cancel {
      background-color: #e0e0e0;
    }

    .modal-actions .save {
      background-color: #6fcf97;
      color: white;
    }


    .list-group-flush .list-group-item {
      border-right: 0;
      border-left: 0;
      border-radius: 0;
      font-size: 14px;
      /* color: #000; */
      font-family: "Gilroy Regular", sans-serif;
      font-weight: 500;
    }


    /* Estilo del switch */
    .switch {
      position: relative;
      display: inline-block;
      width: 40px;
      height: 22px;
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      transition: 0.4s;
      border-radius: 22px;
    }

    .slider:before {
      position: absolute;
      content: "";
      height: 16px;
      width: 16px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      transition: 0.4s;
      border-radius: 50%;
    }

    /* Encendido */
    input:checked+.slider {
      background-color: #4cd964;
      /* Verde Apple */
    }

    input:checked+.slider:before {
      transform: translateX(18px);
    }


    .newbtn {
      background-color: #61dca3 !important;
      border: none;
      padding: 16px 16px;
      color: white;
      font-size: 20px;
      margin-right: 0px;
      border-radius: 0px;
      cursor: pointer;
      float: inline-end;
      line-height: 1.42857143;
      font-weight: 600;
      letter-spacing: .0px;
      width: 100%;
    }

    .newbtn:hover {
      color: #61dca3 !important;
      background-color: rgba(0, 0, 0, 0) !important;
      border: 1px solid #61dca3;
    }


    .btnprint {
      margin-right: 0px;
      border-radius: 0px;
      cursor: pointer;
      float: inline-end;
      line-height: 1.42857143;
      font-weight: 600;
      letter-spacing: .0px;
      width: 100%;
      border: 1px solid #61dca3;
      color: #61dca3 !important;
      background-color: rgba(0, 0, 0, 0) !important;
      padding: 10px 8px;
      font-size: 12px;
      font-weight: 500;
    }

    .btnprint:hover {
      background-color: #61dca3 !important;
      color: white !important;
    }

    /* Custom Multi-Select Dropdown */
    .custom-select-wrapper {
      position: relative;
      user-select: none;
      width: 100%;
    }

    .custom-select {
      position: relative;
      display: flex;
      flex-direction: column;
    }

    .custom-select-trigger {
      position: relative;
      display: block;
      width: 100%;
      padding: 10px;
      font-size: 14px;
      font-weight: 400;
      color: #333;
      line-height: 20px;
      background: #fff;
      border: 1px solid #ccc;
      border-radius: 4px;
      cursor: pointer;
    }

    .custom-select-trigger:after {
      position: absolute;
      display: block;
      content: '';
      width: 8px;
      height: 8px;
      top: 50%;
      right: 15px;
      margin-top: -6px;
      border-bottom: 1px solid #333;
      border-right: 1px solid #333;
      transform: rotate(45deg);
      transition: all .4s ease-in-out;
    }

    .custom-select.open .custom-select-trigger:after {
      margin-top: -2px;
      transform: rotate(-135deg);
    }

    .custom-options {
      position: absolute;
      display: block;
      top: 100%;
      left: 0;
      right: 0;
      border: 1px solid #ccc;
      border-top: 0;
      background: #fff;
      transition: all .4s ease-in-out;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(-15px);
      z-index: 100;
      max-height: 300px;
      overflow-y: auto;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .custom-select.open .custom-options {
      opacity: 1;
      visibility: visible;
      pointer-events: all;
      transform: translateY(0);
    }

    .custom-header {
      padding: 10px;
      font-weight: bold;
      border-bottom: 1px solid #eee;
      background: #f9f9f9;
      font-size: 13px;
    }

    .custom-option {
      position: relative;
      display: block;
      padding: 8px 10px;
      font-size: 14px;
      font-weight: 400;
      color: #333;
      cursor: pointer;
      transition: all .2s;
    }

    .custom-option:hover {
      background-color: #f2f2f2;
    }

    .custom-option label {
      cursor: pointer;
      margin-bottom: 0;
      font-weight: normal;
      display: inline-block;
      width: calc(100% - 30px);
    }

    .custom-option input[type="checkbox"] {
      margin-right: 10px;
      vertical-align: middle;
      cursor: pointer;
    }

    /* Work Type Mobile Menu Styles */
    .work-type-header-mobile {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: default;
    }

    .mobile-dots {
      display: none;
      cursor: pointer;
      padding: 5px 10px;
      color: #3cc68a;
      font-size: 18px;
    }

    .work-type-item {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      cursor: pointer;
      font-size: 14px;
      color: #2e2e30;
      font-family: "Gilroy Regular", sans-serif;
      font-weight: 600;
    }

    .work-type-item input {
      margin-right: 10px;
    }

    .wt-label {
      flex: 1;
    }

    .wt-count {
      color: #999;
      font-size: 12px;
      margin-left: 5px;
    }

    @media (max-width: 768px) {
      .sidebar {
        width: 100% !important;
        margin-bottom: 25px !important;
        padding: 10px 15px !important;
        position: relative;
        background: #fff !important;
        border: 1px solid #eee !important;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      }

      .work-type-header-mobile {
        cursor: pointer;
      }

      .mobile-dots {
        display: block;
      }

      .work-type-content {
        display: none; /* Hidden by default */
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        border: 1px solid #eee;
        z-index: 1000;
        padding: 15px;
        border-radius: 0 0 8px 8px;
        margin-top: 2px;
      }

      .work-type-content.open {
        display: block;
        animation: wtPopIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }

      @keyframes wtPopIn {
        from { opacity: 0; transform: scale(0.95) translateY(-5px); }
        to { opacity: 1; transform: scale(1) translateY(0); }
      }
    }

    /* Job Card Responsive Alignments */
    .job-card-side-info {
      text-align: right;
      min-width: 140px;
    }

    .job-actions-container {
      margin-top: 10px;
      display: flex;
      gap: 8px;
      justify-content: flex-end;
    }

    .job-actions-container .btn-quick-apply {
        background-color: #61dca3 !important;
        color: white !important;
        border: none !important;
        padding: 8px 16px !important;
        border-radius: 6px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        box-shadow: 0 2px 4px rgba(97, 220, 163, 0.2);
        font-size: 13px !important;
        line-height: normal !important;
    }
    
    .job-actions-container .btn-quick-apply:hover {
        background-color: #52c18f !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(97, 220, 163, 0.3);
    }

    .work-type-header-mobile {
        display: none;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0;
        border-bottom: 1px solid #eee;
        margin-bottom: 10px;
    }

    @media (max-width: 768px) {
        .work-type-header-mobile {
            display: flex !important;
        }
    }

    @media (max-width: 768px) {
      .job-card-side-info {
        flex: 1;
        min-width: 100% !important;
        text-align: right !important;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid #eee;
      }

      .job-card-side-info .job-meta {
        text-align: right !important;
      }

      .job-actions-container {
        justify-content: flex-end !important;
        margin-top: 15px;
      }
    }