@font-face {
  font-family: 'Poppins';
  src: url('./font/poppins-v22-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('./font/poppins-v22-latin-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('./font/poppins-v22-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

/* Apply Poppins font to all elements */
* {
  font-family: 'Poppins', sans-serif !important;
}


/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

/* Buttons */
.btn {
  display: inline-flex;
  /* Align icon and text */
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px 15px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  white-space: nowrap;
  /* Prevent wrapping */
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.btn svg {
  /* Style icons within buttons */
  width: 1em;
  /* Use em for size relative to font */
  height: 1em;
}

.btn-primary {
  background-color: #4f46e5;
  color: white;
  border-color: #4f46e5;
}

.btn-primary:hover {
  background-color: #4338ca;
  border-color: #3730a3;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
  border-color: #6c757d;
}

.btn-secondary:hover {
  background-color: #5a6268;
  border-color: #545b62;
}

.btn-success {
  background-color: #198754;
  color: white;
  border-color: #198754;
}

.btn-success:hover {
  background-color: #157347;
  border-color: #146c43;
}

.btn-danger {
  background-color: #dc3545;
  color: white;
  border-color: #dc3545;
}

.btn-danger:hover {
  background-color: #bb2d3b;
  border-color: #b02a37;
}

.btn-outline {
  background-color: transparent;
  color: #6c757d;
  border-color: #6c757d;
}

.btn-outline:hover {
  background-color: #6c757d;
  color: white;
}

.btn-edit {
  background-color: #e3ebfb;
  color: #3f5f9a;
  border: none;
}

.btn-edit:hover {
  background-color: #c4d0e7;
}

.btn-delete {
  background-color: #fbe3e3;
  color: #9a3f3f;
  border: none;
}

.btn-delete:hover {
  background-color: #ebbebe;
}

.btn-lg {
  padding: 12px 15px;
  font-size: 16px;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-row-scholarship {
  display: flex
;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.justify-between {
  justify-content: space-between;
}

body {
  background-color: #ffffff;
}

/* App Layout Structure */
.app-layout {
  display: flex;
  min-height: 100vh;
}

input,
select,
textarea,
button {
  outline: none;
  border: 1px solid #ddd;
  transition: border-color 0.3s ease;
  min-height: 45px;
}

/* Custom focus styles */
input:focus,
select:focus,
textarea:focus {
  border-color: #007bff;
  /* Your primary color */
  box-shadow: 0 0 0 2px rgb(0 123 255 / 10%);
  /* Optional: adds a subtle glow */
}

/* Optional: Add a subtle hover effect */
input:hover,
select:hover {
  border-color: #0056b3;
  /* Slightly darker than focus color */
}



/* Content Area Styles */
.content-area {
  width: calc(100% - 250px);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}


/* Main Content Area */
.main-content {
  height: calc(100vh - 110px);
  flex-grow: 1;
  overflow-y: scroll;
}

/* Logo Styling */
.logo-area .logo {
  display: flex;
  align-items: center;
}

/* Scholarship specific logo */
.app-sidebar .logo-area .logo {
  font-weight: bold;
  color: #3366cc;
  font-size: 18px;
}

/* Additional Styles for the logo in sidebar */
.app-sidebar .logo-area {
  display: flex;
  justify-content: center;
  padding-bottom: 25px;
}

/* Style for the eagle logo shown in the image */
.app-sidebar .logo img {
  max-width: 150px;
  height: auto;
}

p.save-reminder {
  font-size: 14px;
  margin-block: 5px;
  color: #173f87;
  font-style: italic;
  font-weight: 400;
  padding-inline: 5px;
}

/* User dropdown styling */
.user-profile-dropdown {
  display: flex;
  align-items: center;
}

.user-profile-dropdown span {
  margin-left: 5px;
  font-weight: 500;
  color: #333;
}

.Toastify__toast {
  min-width: 330px !important;
  font-size: 13px !important;
}



.Toastify__close-button {
  top: 11px !important;
  right: 7px !important;
}

/* Make icons and indicators more visible */
.notification-icon {
  position: relative;
}

.notification-icon .badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #ff4d4f;
  color: white;
  font-size: 10px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Page specific styles */
.page-title {
  font-size: 24px;
  font-weight: 500;
  color: #333;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
  .app-layout {
    flex-direction: column;
  }

  .app-sidebar {
    width: 100%;
    height: auto;
  }

  .content-area {
    width: 100%;
  }
}



/* ... (Rest of your existing CSS for .login-page and .registration-page forms) ... */
/* MyApplications.css */
.my-applications-page {
  max-width: 100%;
  padding: 24px;
  color: #333;
  background-color: white;
  min-height: calc(100vh - 70px);
}

.my-applications-page h2 {
  font-size: 20px;
  margin-bottom: 6px;
  font-weight: 600;
  color: #333;
}

.my-applications-page p {
  color: #777;
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 14px;
}

.info-message {
  background-color: #f1f2fe;
  border-left: 4px solid #023E84;
  padding: 14px 20px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  color: #555;
  font-size: 14px;
}

.success-message {
  background-color: #edf0ec;
  border-left: 4px solid #21CF98;
  padding: 14px 20px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  color: #555;
  font-size: 14px;
}

.error-message {
  color: #ef4444;
  padding-inline: 10px;
  padding-block: 6px;
  margin-block: 10px;
  background-color: #fef1f1;
  border-left: 4px solid #ef4444;
  display: flex;
  align-items: center;
  border-radius: 4px;
  color: #555;
  font-size: 14px;
}

.info-circle-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #e74c3c;
  border-radius: 50%;
  margin-right: 12px;
  position: relative;
  flex-shrink: 0;
}

.info-circle-icon::after {
  content: "!";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  font-size: 14px;
}

.info-message a {
  color: #2964e5;
  text-decoration: none;
  font-weight: 500;
}

.info-message a:hover {
  text-decoration: underline;
}

.filters {
  margin-bottom: 20px;
}

.filter-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}


.filter-row select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-width: 200px;
  background-color: white;
  font-size: 14px;
  color: #333;
}


/* Scholarships Page Styling */
.scholarships-page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  max-width: 100%;
  color: #333;
}

.scholarships-page h2 {
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 600;
}

/* Degree Level Filter Styling */
.degree-level-filters {
  display: flex;
  gap: 0;
  margin-bottom: 30px;
  border-bottom: 1px solid #e5e7eb;
}

.degree-level-filter-button {
  padding: 12px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  position: relative;
}

.degree-level-filter-button.active {
  color: #1e40af;
  font-weight: 600;
}

.degree-level-filter-button.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #1e40af;
}

.degree-level-filter-button:hover:not(.active) {
  color: #4b5563;
}

.scholarship-list {
  display: flex;
  padding: 30px;
  flex-direction: row;
}


/* General Page Styling */
.my-background-page {
  max-width: 100%;
  color: #333;
  background-color: white;
}

.my-background-page h2 {
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 600;
}

/* Tabs Component Styling */
.tabs-component {
  width: 100%;
  position: relative;
}

.tabs-header {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 5;
  list-style: none;
  padding: 0;
  background-color: white;
  margin: 0;
  border-bottom: 1px solid #e0e0e0;
  white-space: nowrap;
}

.tab-item {
  padding: 15px 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: #848484;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.2s ease-in-out;
}

.tab-item svg {
  width: 16px;
  height: 16px;
  stroke-width: 2px;
}

li.tab-item:hover {
  background-color: #f9f9f9;
}

.tab-item.active {
  color: #3f3f3f;
  background-color: #f9f9f9;
}


.tab-item.active::after {
  /* Changed from :after */
  content: '';
  position: absolute;
  bottom: -1px;
  /* Adjust if your border is thicker */
  left: 0;
  width: 100%;
  height: 3px;
  /* Adjust thickness as needed */
  background-color: #173f87;
  /* Default active color (e.g., blue) */
  transition: background-color 0.3s ease;
  /* Add smooth transition */
}

.tab-item.active.tab-incomplete::after {
  /* Changed from :after */
  background-color: #dc3545;
  /* Red */
}

/* Style for ACTIVE tab when COMPLETE */
.tab-item.active.tab-complete::after {
  /* Changed from :after */
  background-color: #93af90;
  /* Green */
}

.tab-item .status-icon {
  margin-left: 6px;
  /* Space between tab text and icon */
  vertical-align: middle;
  /* Align with text */
  flex-shrink: 0;
  /* Prevent shrinking */
  /* Adjust size via the 'size' prop in the component */
}

/* Color ONLY for the incomplete icon */
.tab-item .status-icon.incomplete-icon {
  color: #dc3545;
  /* Red */
}

.tabs-content {
  padding-inline: 40px;
  padding-top: 40px;
}

.document-upload-group {
  flex: 1;
}

.final-save-actions {
  margin-top: 2rem;
  position: sticky;
  background: linear-gradient(90deg, #FFF 0%, rgba(255, 255, 255, 0.50) 15%, rgb(255 255 255 / 39%) 85%, #FFF 100%);
  backdrop-filter: blur(10px);
  padding-block: 20px;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 1px solid #f5f3f3;
  border-image: linear-gradient(to right, white, lightgray, white);
  border-image-slice: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-shadow: -1px -20px 7px -20px rgba(0, 0, 0, 0.05);
  justify-content: space-between;
}

.full-initial a {
  display: flex !important;
  padding: 12px 17px 14px 14px !important;
  align-items: center !important;
  gap: 10px;
  color: #859F81 !important;
  border-radius: 12px !important;
  border: 0.3px solid rgba(116, 160, 110, 0.32) !important;
  background: #FFF !important;
  box-shadow: 0px 1px 4.1px 0px rgba(116, 160, 110, 0.25) inset, 0px 8px 3.9px 0px rgba(255, 255, 255, 0.79) inset, 0px 5px 13.3px 0px rgba(116, 160, 110, 0.25) inset, 0px 0px 2.5px 0px rgba(255, 255, 255, 0.64) inset, 0px -3px 0.7px 0px rgba(116, 160, 110, 0.24) inset, 0px 1px 2.9px 0px rgba(116, 160, 110, 0.14);
  transition: all 0.2s ease-in-out !important;
}

.full-initial a:hover {
  border: 0.3px solid rgba(116, 160, 110, 0.25);
  background: #FDFEFD;
  box-shadow: 0px 1px 4.1px 0px rgba(116, 160, 110, 0.25) inset, 0px -1px 3.9px 0px rgba(255, 255, 255, 0.79) inset, 0px -6px 13.3px 0px rgba(116, 160, 110, 0.25) inset, 0px -1px 2.5px 0px rgba(255, 255, 255, 0.64) inset, 0px -5px 0.7px 0px rgba(116, 160, 110, 0.24) inset, 0px 1px 2.9px 0px rgba(116, 160, 110, 0.14);
}

.full-active a svg {
  color: white !important;
}

.full-active a {
  display: flex !important;
  padding: 12px 17px 14px 14px !important;
  align-items: center !important;
  gap: 10px;
  border-radius: 12px !important;
  border: 0.3px solid rgba(133, 159, 129, 0.32) !important;
  background: #74A06E !important;
  box-shadow: 0px 1px 4.1px 0px rgba(255, 255, 255, 0.25) inset, 0px 8px 3.9px 0px #74A06E inset, 0px 5px 13.3px 0px rgba(255, 255, 255, 0.25) inset, 0px 0px 2.5px 0px #74A06E inset, 0px -3px 0.7px 0px rgba(255, 255, 255, 0.24) inset, 0px 1px 2.9px 0px rgba(116, 160, 110, 0.14);
  color: white !important;
}

/* Form Styling */
.form-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
  margin-bottom: 30px;
}

.form-upload-section {
  max-width: 350px;
  border-radius: 8px;
  border: 1px dashed #D7D7D7;
  padding: 20px;
  margin-bottom: 30px;
}

.form-description {
  color: #64748B;
  font-size: 14px;
  margin-bottom: 20px;
}

/* Form Fields */
.section-header h2 {
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 5px;
}

/* Form Fields */
.section-header p {
  font-weight: 500;
  font-size: 16px;
}

.section-header small {
  font-size: 13px;
  color: #858585;
}

.section-header {
  padding: 15px;
  background-color: #F9F9F9;
  border-radius: 8px;
  margin-bottom: 25px;
  display: flex;
  flex-direction: column;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}


.action-buttons {
  display: flex;
  gap: 10px;
}


.form-actions {
  margin-bottom: 15px;
  margin-top: 15px;
}

label {
  display: flex;
  font-size: 14px;
  font-weight: 500;
  color: #474747;
  margin-bottom: 5px;
  align-items: center;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #dedede;
  border-radius: 6px;
  font-size: 14px !important;
  font-weight: 300 !important;
  color: #464646 !important;
  background-color: #fff;
  box-sizing: border-box;
}

.form-group .input-error {
  border: 1px solid #e74c3c !important;
  /* Red border */
}

.form-group {
  position: relative;
  /* To position the icon */
}

.form-group .error-icon {
  position: absolute;
  top: 52%;
  right: 12px;
  transform: translateY(-50%);
  color: #e74c3c;
  font-size: 16px;
  pointer-events: none;
}

/* Style the Feather Icon within the error-icon span */
.form-group .error-icon svg {
  width: 1.2em;
  /* Adjust size as needed */
  height: 1.2em;
}

input:hover {
  border: 1px solid #173f87;
}

select:hover {
  border: 1px solid #173f87;
}

.form-group input::placeholder {
  color: #9CA3AF;
}

.form-group .input-with-icon {
  position: relative;
}

.form-group .input-with-icon input {
  padding-right: 40px;
}

.form-group .input-with-icon .icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6B7280;
}

.form-group {
  width: 100%;
  flex: 1;
}

/* Social Media Icons */
.linkedin-icon svg {
  stroke: #0077B5;
  fill: #0077B5;
}

.facebook-icon svg {
  stroke: #1877F2;
  fill: #1877F2;
}

.instagram-icon svg {
  stroke: #E4405F;
  fill: #E4405F;
}

/* Select Dropdown Styling */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

/* Contact Form Specific Styling */
.contact-information,
.residential-address {
  background-color: #F9FAFB;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}

.section-description {
  color: #64748B;
  font-size: 14px;
  margin-bottom: 20px;
}

/* Save Button */
.save-button {
  display: flex;
  justify-content: flex-end;
}

.btn {
  font-weight: 400 !important;
}

.btn-save {
  background-color: #10B981;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-save:hover {
  background-color: #059669;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .form-group {
    flex: 0 0 100%;
  }

  .tabs-header {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .tab-item {
    white-space: nowrap;
  }
}

/* Number input arrows styling */
input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.checkbox-group input {
  width: auto;
}

.checkbox-group {
  display: flex;
  gap: 5px;
}


/*---------------- UPLOAD COMPONENT -----------------*/
/* DocumentUpload.css */
.document-upload {
  width: 100%;
}

.document-container {
  border-radius: 8px;
}


.upload-button {
  display: flex;
  color: #3c3c3c;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: none;
  background-color: #d2e2ff;
  margin-bottom: 15px;
  cursor: pointer;
  padding: 15px;
  transition: background-color .2s ease-in-out;
}

button.upload-button svg {
  width: 16px;
}

.upload-icon {
  background-color: #0c3b87;
  color: white;
  padding: 8px;
  border-radius: 4px;
  margin-right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.document-file-table {
  display: flex;
  /* Allows max-width and overflow */
  max-width: 100%;
  /* Takes up available cell width */
  align-items: center;
  /* Aligns well with adjacent text/icons if any */
}

.document-file-table a {
  display: inline-block;
  /* Needed for text-overflow */
  max-width: 200px;
  /* Adjust max width as needed */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #0d6efd;
  /* Standard link blue */
  text-decoration: none;
  vertical-align: middle;
  /* Align link text nicely */
  transition: color 0.2s ease;
}

.document-file-table a:hover,
.document-file-table a:focus {
  color: #0a58ca;
  /* Darker blue on hover/focus */
  text-decoration: underline;
}

.upload-text {
  font-size: 16px;
  color: #3c3c3c;
  font-weight: 400;
}

button.upload-button:hover {
  background-color: #c5d6f7;
}

.hidden-input {
  display: none;
}

.file-info {
  max-width: 290px;
  display: flex;
  justify-content: flex-start;
  border: 1px solid #e9e9e9;
  border-radius: 8px;
  overflow: hidden;
  background-color: white;
  position: relative;
  align-items: stretch;
}

.file-name {
  display: flex;
  padding-inline: 10px;
  color: #333;
  font-size: 15px;
  gap: 10px;
  font-weight: 400;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
}

.file-icon {
  display: flex;
  padding: 18px;
  background-color: #f9f9f9;
  border-right: solid 1px #eaeaea;
}


.file-actions {
  position: absolute;
  padding: 5px;
  right: 0;
  top: 15px;
}

.file-size {
  font-size: 10px;
  font-weight: 300;
  color: #a0a0a0;
  margin-right: 16px;
}

.file-status-warning {
  font-size: 14px;
  color: #a55c42;
  font-weight: 400;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 5px;
  padding: 5px;
  background-color: #f6e2e2;
  border-radius: 3px;
  margin-block: 5px;
}

.download-button-upload {
  all: unset;
  background-color: #f2f2f2;
  border-radius: 50%;
  color: #000000;
  cursor: pointer;
  padding: 7px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clear-button {
  all: unset;
  background-color: #e0e0e0;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

button.clear-button svg {
  width: 15px;
}

span.file-icon svg {
  width: 17px;
  color: #919191;
}

.no-file {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 24px;
}

.no-file i {
  font-size: 14px;
}

.no-file span {
  font-size: 16px;
  color: #cccccc;
  font-style: italic;
  font-weight: 200;
}

.info-text {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

/* Base container for the message block */
.apply-action-message {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: #f9f9f9;
  font-size: 14px;
  color: #333;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Ensure icons have consistent sizing and spacing */
.apply-action-message svg {
  flex-shrink: 0;
}

/* Styling for warning messages */
.apply-action-message.warning {
  border-color: #f1c40f;
  background-color: #fffbea;
  color: #8a6d3b;
}

/* Styling for error messages and API errors */
.apply-action-message.error {
  border-color: #e74c3c;
  background-color: #ffecec;
  color: #a94442;
}

/* Styling for applied state messages */
.apply-action-message.applied {
  border-color: #2ecc71;
  background-color: #e9f7ef;
  color: #3c763d;
}

/* Styling for link buttons within the message block */
.apply-action-message .btn-link {
  margin-left: auto;
  background: none;
  border: none;
  padding: 0;
  font-size: 14px;
  color: #3498db;
  cursor: pointer;
  transition: color 0.2s ease-in-out;
}

.apply-action-message .btn-link:hover {
  text-decoration: underline;
  color: #217dbb;
}

/* Additional spacing for the retry button if rendered */
.apply-action-message .retry-link {
  margin-left: 8px;
}

/* Animation for status changes */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.apply-action-message {
  animation: fadeIn 0.2s ease-out;
}

/* Media queries for responsiveness */
@media (max-width: 768px) {
  .apply-action-message {
    padding: 10px 14px;
    gap: 8px;
    font-size: 0.8125rem;
  }

  .btn-link {
    font-size: 0.8125rem;
    padding: 3px 6px;
  }

  .retry-link {
    padding: 3px 8px;
    font-size: 0.75rem;
  }
}

/* Responsive adjustments for very small screens */
@media (max-width: 480px) {
  .apply-action-message {
    flex-wrap: wrap;
  }

  .btn-link {
    margin-left: 24px;
    margin-top: 4px;
  }
}

/**------scholarship Card--------------*/
/* ScholarshipCard.css */
.scholarship-card {
  display: flex;
  flex-direction: column;
  min-width: 340px;
  max-width: 370px;
  align-items: flex-start;
  flex: 1;
  border-radius: 18px;
  border: 1px solid #C4D3E5;
  background: #fcfeff;
  transition: all 0.2s ease-in-out;
  justify-content: space-between;
}

.scholarship-card:hover {
  transform: translateY(-4px);
  box-shadow: 0px 0px 6.1px 0px rgb(2 62 132 / 12%) inset, 1px 1px 12px 1px rgba(0, 0, 0, 0.1);
}

.status-badge {
  padding: 6px 10px;
  display: inline-flex;
  margin: 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}



.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 30px 30px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}

.scholarship-name {
  font-size: 1.25rem;
  font-weight: 500;
  color: #1c1c1e;
  line-height: 1.3;
}

.status-applied-badge {
  background-color: #e2f0fd;
  color: #0062cc;
  border: 1px solid #b8daff;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 5px;
  display: flex;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
}

.status-open-badge {
  background-color: #e3fcef;
  color: #00965e;
  border: 1px solid #b7ebd3;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  padding: 4px 10px;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 5px;
}

.status-closing-badge {
  background-color: #fff5e6;
  color: #e67700;
  border: 1px solid #ffe0b2;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  padding: 2px 5px;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 6px;
 }

.funding-type {
  display: flex;
  padding: 3px 10px;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 400;
  border-radius: 50px;
  background: #F0F3F5;
}

.details-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #173f87;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.details-link:hover {
  background-color: rgba(0, 122, 255, 0.08);
}

.card-body {
  padding: 15px 30px;
}

.description {
  color: #3C3C3C;
  font-family: Poppins;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.details-item,
.eligibility-item {
  display: inline-flex;
  padding: 8px;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  color: #3C3C3C;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 15px;
  border-radius: 25px;
  background: #F8F8F8;
  align-content: center;
  flex-direction: row;
}

.details-item svg,
.eligibility-item svg {
  color: #8e8e93;
  flex-shrink: 0;
  margin-top: 2px;
}

.header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-direction: row;
}

.date-range {
  font-weight: 500;
}

.eligibility-label {
  font-weight: 600;
  margin-right: 4px;
  color: #48484a;
}

.card-footer {
  padding: 16px 30px 30px;
  display: flex;
  width: 100%;
  justify-content: flex-end;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.apply-action-area {
  width: 100%;
}
.status-applied-message {
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    gap: 10px;
    background-color: #d5e3d5;
    padding: 13px 15px;
    border-radius: 6px;
    color: #8f9d8a
}
/* Apply button styles */
.apply-button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  background-color: #788d6a;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 13px 20px;
  font-weight: 500;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  justify-content: center;
}
.apply-button svg {
  width: 16px;
}
.apply-button:hover {
  background-color: #6d7f61;
}

.apply-button:active {
  transform: scale(0.98);
}

.apply-button:disabled {
  background-color: #c7c7cc;
  cursor: not-allowed;
}

.tabs-component .tabs-content .tab-pane-wrapper {
  /* Default state for all panes */
  display: none;
  /* Hide inactive panes by default */
}

.tabs-component .tabs-content .tab-pane-wrapper.active {
  /* Style for the active pane */
  display: block;
  /* Show the active pane */
}

/* Base styling for disabled input and select elements */
input:disabled,
select:disabled {
  background-color: #f2f2f2;
  border: 1px solid #cccccc;
  color: #888888;
  cursor: not-allowed;
  opacity: 0.7;
  box-shadow: none;
}

/* Hover state for disabled elements */
input:disabled:hover,
select:disabled:hover {
  border-color: #cccccc;
  background-color: #f2f2f2;
}

/* Focus state for disabled elements 
   Note: Disabled elements typically cannot receive focus,
   but including for completeness */
input:disabled:focus,
select:disabled:focus {
  outline: none;
  border-color: #cccccc;
  box-shadow: none;
}


.spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

li.tab-item.active.tab-complete {
  color: #93af90;
}

.retry-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  background-color: transparent;
  color: #007aff;
  border: 1px solid #007aff;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}
a:hover, a:focus, a:active {
  color: none !important;
}
.retry-button:hover {
  background-color: rgba(0, 122, 255, 0.08);
}

.apply-action-placeholder {
  font-size: 0.875rem;
  color: #8e8e93;
  font-style: italic;
}

/* For scholarship card error */
.scholarship-card-error {
  padding: 30px;
  text-align: center;
  background-color: #f7f7f7;
  border-radius: 16px;
  color: #8e8e93;
  font-size: 0.9375rem;
}

/* Media queries for responsiveness */
@media (max-width: 768px) {

  .card-header,
  .card-body,
  .card-footer {
    padding: 16px;
  }

  .scholarship-name {
    font-size: 1.125rem;
  }

  .status-badge {
    top: 12px;
    right: 12px;
    padding: 4px 10px;
    font-size: 0.7rem;
  }
}

/* Breadcrumbs Component Styles */
.breadcrumbs-container {
  margin: 1rem 0;
  padding: 0.5rem 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.breadcrumbs-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #6c757d;
}

.breadcrumb-link {
  display: flex;
  align-items: center;
  color: #023E84;;
  text-decoration: none;
  transition: color 0.2s ease;
  font-weight: 500;
}

.breadcrumb-link:hover {
  color: #3a48b7;
  text-decoration: underline;
}

.breadcrumb-current {
  color: #343a40;
  font-weight: 500;
}

.breadcrumb-separator {
  margin: 0 0.5rem;
  color: #adb5bd;
}

.home-icon {
  margin-right: 0.35rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .breadcrumbs-list {
    padding: 0.5rem 0.75rem;
  }

  .breadcrumb-item {
    font-size: 13px;
  }

  /* Hide all but the last two breadcrumbs on mobile */
  .breadcrumb-item:not(:nth-last-child(-n+2)) {
    display: none;
  }

  /* Show home icon always */
  .breadcrumb-item:first-child {
    display: flex !important;
  }
}


@media screen and (max-width: 768px) {
  .breadcrumbs-list {
    display: none;
    /* Hide breadcrumbs on mobile */
  }

  .sidebar-nav ul,
  .support-settings-area ul {
    gap: 0;

  }

  .tabs-content {
    padding-inline: 20px;
    padding-top: 20px;
    padding-bottom: 0px;
  }
  button.btn.btn-success.btn-lg {
    width: 100%;
}

.final-save-actions {
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  align-content: flex-start;
}

  .sidebar-nav ul,
  .support-settings-area ul {
    padding-inline: 10px;
    padding-block: 10px;
  }
  .scholarship-card { 
    min-width: 200px;
  }

  .section-header p {
    font-size: 14px;
  }

  .section-header small {
    font-size: 11px;
  }

  .section-header {
    margin-bottom: 10px;
  }

  .form-upload-section {
    padding: 10px;
  }

  .form-upload-section {
    font-size: 14px;
    margin-bottom: 0px;
  }

  .upload-text {
    font-size: 14px !important;
  }

  li.tab-item.tab-complete {
    color: #93af90 !important;
  }

  label {
    font-size: 12px !important;
    padding-left: 3px !important;
  }

  .page-header-normal {
    padding: 15px 15px !important;
}
.header-text h1 {
  font-size: 18px !important;
}
.header-text p {
  font-size: 12px !important;
}
.program-selection-section {
  padding: 20px !important;
  margin-inline: 0px !important;
  border-bottom: 1px solid #d1d1d1!important;
  border-radius: 0px !important;
  border-inline: none !important;
  background-color: white !important;
}
.program-selection-inputs {
  gap: 10px !important;
}
.application-list-section {
  padding: 20px 20px 35px 20px  !important
}
.empty-state p {
  margin-bottom: 15px;
  font-size: 14px;
}
.application-summary-section, .section-controls{
display: none !important;
}
.application-list-section {
  padding: 20px !important;
}
.app-header {
  padding: 0 20px !important;
}
.summary-items {
  display: none;
}
.scholarship-list-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding: 40px;
  justify-content: flex-start;
}


/* Tests Page Entrance */





}
.scholarship-card.locked-card {
  display: flex;
  overflow: hidden;
  padding: 30px 25px;
  flex-direction: column;
  min-height: 400px;
  justify-content: space-between;
  align-items: center;
  flex: none;
  background-color: #f7f7f7;
  border-radius: 17px;
  border: 1px solid #E3E3E3;
  background: rgba(226, 226, 226, 0.13);
  backdrop-filter: blur(25.75px);
  box-shadow: none;
}

h3.lock-title {
  color: #3C3C3C;
  text-align: center;
  font-family: Poppins;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 25px;
}
p.lock-subtitle {
  color: #959595;
  text-align: center;
  font-family: Poppins;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 25px;
}
p.lock-message {
  display: flex;
  color: #ad1d6f;
  gap: 10px;
  text-align: start;
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  line-height: 16px;
  padding-inline: 15px;
  padding-block: 10px;
  background-color: #ffffff;
  border-radius: 6px 6px 0 0;
  border: solid .5px #d9d9d9;
  align-items: center;
}
a.lock-button {
  all: unset;
  display: flex;
  padding: 15px 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: 0 0 8px 8px;
  color: #FFF;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  background-color: #b71f6e !important;
  font-weight: 400;
  line-height: normal;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
}

.lock-button:hover {
  background-color: #b2628b !important;
}

.scholarship-card-header {
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
}
.scholarship-card-footer {
  display: flex;
  gap: 0px;
  flex-direction: column;
}
svg.background-icon {
  width: 350px;
  height: 350px;
  bottom: -35px;
  right: -110px;
  position: absolute;
  z-index: -1;
  opacity: .15;
}
.lock-price-info {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 15px;
}
span.current-price {
  color: #5FCF5F;
  text-align: center;
  font-family: Poppins;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
span.original-price {
  color: #AAA;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  text-decoration: line-through;
}
span.save-badge {
  display: flex;
  padding: 3px 5px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 3px;
  width: fit-content;
  background: #5FCF5F;
  color: #FFF;
  text-align: center;
  font-family: Poppins;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
a.lock-button.lock-button-consultation {
  all: unset;
  display: flex;
  padding: 12px 17px 14px 14px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: 8px;
  border: 0.3px solid rgba(133, 159, 129, 0.32);
  background: #74A06E;
  box-shadow: 0px 1px 4.1px 0px rgba(255, 255, 255, 0.25) inset, 0px 1px 3.9px 0px #74A06E inset, 0px 3px 15.4px 0px rgba(255, 255, 255, 0.81) inset, 0px 0px 2.5px 0px #74A06E inset, 0px -2px 1.9px 0px rgba(255, 255, 255, 0.24) inset, 0px 1px 2.9px 0px rgba(116, 160, 110, 0.14);
  color: #FFF;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  transition: background 0.2s ease-in-out;
  cursor: pointer;
}

a.lock-button.lock-button-consultation:hover {
  background: #79bf6f;
}

button.back-link {
  all: unset;
  background-color: white;
  display: flex;
  align-items: center;
  flex-direction: row;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}


/***********************************/