/* === Vacancy Table === */
.vacancy-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
  font-family: Arial, sans-serif;
}
.vacancy-cell {
  vertical-align: middle;
  padding: 10px;
  background: #fff8e1;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.post-title {
  font-size: 16px;
  color: #5d4037;
}

.vacancy-count-btn {  
 display: inline-block;   
padding: 5px 10px;
  background: #ffe0b2;
  color: #e65100;
  font-weight: bold;
  font-size: 16px;
  border-radius: 20px;
  box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.8),
              inset -1px -1px 3px rgba(0, 0, 0, 0.1),
              2px 2px 6px rgba(0, 0, 0, 0.1);
  transition: background 0.3s ease;
  text-align: center;
  text-decoration: none;
}

.vacancy-count-btn:hover {
  background: #ffcc80;
}

.vacancy-center {
  text-align: center;
}
/* === Fee Table === */
.fee-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
  font-family: Arial, sans-serif;
}

.fee-cell {
  vertical-align: middle;
  padding: 5px;
  background: #f1f8e9;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.fee-category {
  font-size: 16px;
  color: #33691e;
}

.fee-amount-btn {   display: inline-block;   padding: 4px 10px;
  background: #dcedc8;
  color: #1b5e20;
  font-weight: bold;
  font-size: 16px;
  border-radius: 20px;
  box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.8),
              inset -1px -1px 3px rgba(0, 0, 0, 0.1),
              2px 2px 6px rgba(0, 0, 0, 0.1);
  transition: background 0.3s ease;
  text-align: center;
  text-decoration: none;
}

.fee-amount-btn:hover {
  background: #c5e1a5;
}

.fee-center {
  text-align: center;
}

/* === Dates Table === */
.dates-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
  font-family: Arial, sans-serif;
}

.dates-cell {
  vertical-align: middle;
  padding: 10px;
  background: #fce4ec;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.dates-label {
  font-size: 16px;
  color: #880e4f;
}

.dates-btn {   display: inline-block;   padding: 5px 10px;
  background: #f8bbd0;
  color: #880e4f;
  font-weight: bold;
  font-size: 16px;
  border-radius: 50px;
  box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.8),
              inset -1px -1px 3px rgba(0, 0, 0, 0.1),
              2px 2px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  text-decoration: none;
  transition: background 0.3s;
}

.dates-btn:hover {
  background: #f48fb1;
}

.dates-cell.red {
  background: #ffebee;
}

.dates-btn.red {
  background: #ffcdd2;
  color: #c62828;
}

.dates-btn.red:hover {
  background: #ef9a9a;
}

.dates-center {
  text-align: center;
}

/* === Eligibility Table === */
.elig-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
  font-family: Arial, sans-serif;
}

.elig-cell {
  vertical-align: middle;
  padding: 10px;
  background: #e8f5e9;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.elig-text {
  font-size: 16px;
  color: #2e7d32;
}

.elig-btn {   display: inline-block;   padding: 5px 10px;
  background: #c8e6c9;
  color: #1b5e20;
  font-weight: bold;
  font-size: 16px;
  border-radius: 50px;
  text-decoration: none;
  text-align: center;
  box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.8),
              inset -1px -1px 3px rgba(0, 0, 0, 0.1),
              2px 2px 6px rgba(0, 0, 0, 0.1);
  transition: background 0.3s ease;
}

.elig-btn:hover {
  background: #a5d6a7;
}

.elig-center {
  text-align: center;
}

/* === Documents Table === */
.doc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
  font-family: Arial, sans-serif;
}

.doc-cell {
  padding: 15px;
  background: #e3f2fd;
  border-radius: 10px;
  font-size: 16px;
  color: #0d47a1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}

.doc-icon {
  height: 10px;
  width: 10px;
  background-color: #0d47a1;
  border-radius: 50%;
  flex-shrink: 0;
} 
.cas {
  background: linear-gradient(to right, #fffde7, #ffffff);
  padding: 20px;
  border-radius: 10px;
  font-size: 16px;
  color: #333;
  font-family: Arial, sans-serif;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 5px 0; /* Top & bottom: 5px, Left & right: 0 */
}



.form-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0 10px;
      font-family: Arial, sans-serif;
    }

    .form-cell {
      vertical-align: middle;
      padding: 10px;
      background: #f9f9f9;
      border-radius: 10px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .form-details {
      font-size: 16px;
      color: #333;
    }
 
    .form-btn-link {
      position: relative;
      display: inline-block;
      padding: 4px 10px;
      background: #e0f7fa;
      color: #00796b;
      text-decoration: none;
      border-radius: 8px;
      font-weight: bold;
      box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.8),
                  inset -1px -1px 3px rgba(0, 0, 0, 0.1),
                  2px 2px 5px rgba(0,0,0,0.1);
      transition: background 0.3s;
    }

    .form-btn-link:hover {
      background: #b2ebf2;
    }

    .form-center-btn {
      text-align: center;
    }

    /* Tooltip Styles (multi-line supported) */
   /* Tooltip Styles (multi-line supported) */
    .tooltip {
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ffffff, #e0f7fa);
  color: #00796b;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: normal;
  min-width: 300px;
  max-width: 90vw;
  white-space: normal;
  line-height: 1.4em;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 999;
  box-sizing: border-box;
}
    .form-btn-link:hover .tooltip {
      opacity: 1;
      transform: translateX(-50%) translateY(5px);
    }

    .tooltip.align-left {
      left: auto;
      right: 0;
      transform: translateX(0) translateY(5px);
    }

    .tooltip::after {
      content: "";
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 0 8px 8px 8px;
      border-style: solid;
      border-color: transparent transparent #ffffff transparent;
    }

    .tooltip.align-left::after {
      left: auto;
      right: 10px;
      transform: none;
    }
    
    .application-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 14px;
  font-family: 'Verdana', sans-serif;
}

.application-row {
  vertical-align: middle;
  padding: 16px;
  background: #f3e5f5;
  border-radius: 12px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

.application-title {
  font-size: 16px;
  color: #6a1b9a;
}

.application-button-cell {
  text-align: center;
}

.application-btn {   display: inline-block;   padding: 5px 10px;
  background: #e1bee7;
  color: #4a148c;
  font-size: 15px;
  font-weight: bold;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.3s ease;
  box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.75),
              inset -1px -1px 3px rgba(0, 0, 0, 0.1),
              2px 2px 5px rgba(0, 0, 0, 0.1);
}

.application-btn:hover {
  background: #ce93d8;
} 

.fancy-more-btn {
      display: block;
      margin: 15px auto;
      padding: 10px 20px;
      background: linear-gradient(45deg, #ff8a00, #da1b60);
      color: white;
      border: none;
      border-radius: 25px;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .fancy-more-btn:hover {
      background: linear-gradient(45deg, #da1b60, #ff8a00);
      transform: scale(1.05);
    }

    .spsli {
      display: none;
    }

    .spsli.visible {
      display: list-item;
    }

    @import url('https://fonts.googleapis.com/css2?family=Laila:wght@400;500;600&display=swap');

    .scroll-style {
      font-family: 'Laila', serif;
      font-size: 17px;
      line-height: 1.6;
      color: #333;
      background: #fefefe;
      border: 1px solid #ddd;
      border-radius: 6px;
      padding: 15px 20px;
      max-height: 500px;
      
      overflow-y: auto;
      box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
    }

    .scroll-style::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      border-radius: 10px;
      background-color: #F5F5F5;
    }

    .scroll-style::-webkit-scrollbar {
      width: 12px;
      background-color: #F5F5F5;
    }

    .scroll-style::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
      background-color: #00A3FF;
    }

    .scrollbar {
      overflow-y: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .scrollbar::-webkit-scrollbar {
      display: none;
    }

    /* Added Link Effects */
    a:link {
      color: blue;
      background-color: transparent;
      text-decoration: none;
    }

    a:visited {
      color: #FF003C;
      background-color: transparent;
      text-decoration: none;
    }

    a:hover {
      color: red;
      text-decoration: underline;
    }

    a:active {
      color: #FF00A8;
      background-color: transparent;
      text-decoration: underline;
    }

    /* Updated .spsli Styles */
    .spsli {
      color: #b30000;
      background: linear-gradient(to right, #9AE7E6, #fff5f5);
      padding: 5px 10px;
      margin: 10px;
      font-weight: 500;
      border-left: 4px solid #ff4d4d;
      border-radius: 6px;
      box-shadow: 2px 2px 6px rgba(0,0,0,0.05);
      transition: all 0.3s ease;
      height: auto;

      
    }

    .spsli:hover {
      background: linear-gradient(to right, #F2FF00, #ffeaea);
      color: #800000;
      transform: scale(1.02);
      box-shadow: 3px 3px 10px rgba(255, 0, 0, 0.15);
    }
    
   

    
    .time-tag {
  position: absolute;
  top: 60;
  right: -25px; /* push it outside more due to rotation */
  
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: #FF0027;
  color: white;
  padding: 0 6px;
  border-radius: 15px;
  font-weight: bold;
  transform: rotate(90deg);
  transform-origin: top right;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}
.tagli {
  position: relative;
  margin-bottom: 10px;
  list-style-type: none;
  padding: 8px;
  background: #f5f5f5;
  border-radius: 6px;
  min-height: 40px;
}
.abli {
  color: #b30000;
  background: linear-gradient(to right, #9AE7E6, #fff5f5);
  padding: 5px 10px;
  margin: 10px;
  font-weight: 500;
  border-left: 4px solid #ff4d4d;
  border-radius: 6px;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  height: auto;
}

.abli:hover {
  background: linear-gradient(to right, #9AE7E6, #fff5f5); /* Same as .spsli:hover */
  color: #800000;
  transform: scale(1.02);
  box-shadow: 3px 3px 10px rgba(255, 0, 0, 0.15);
}