:root {
  --fila-color-text: #555;              
  --fila-color-input: #555;            /* Charcoal Lava #2f2f2f */
  --fila-color-subtext: #667c59;          /* Moss Green */
  --fila-color-bg: #f5f7f6;               /* Glacier White */
  --fila-color-border: #d7d8d6;           /* Ash Gray */
  --fila-color-error: #e93333;            /* Red */
  --fila-color-primary: #606F7B;          /* Ocean Teal */
  --fila-color-primary-hover: #2e5c5b;    /* Darker Ocean Teal */
  --fila-border-radius: 0.4em;
  --fila-spacing: 1.25em;
  --fila-font-size-base: 1.0em;
  --fila-font-size-heading: 1.45em;
  --fila-font-size-subheading: 1.25em;
}

bodyx {
  font-family: system-ui, sans-serif;
  color: var(--fila-color-text);
  background-color: #f5f5f5;
  margin: 0;
  padding: var(--fila-spacing);
}

.fila-heading {
  font-size: var(--fila-font-size-heading);
  margin: 0 0 0.5em 0;
  font-weight: 600;
  color: var(--fila-color-text);
  text-align: center;
}

.fila-subheading {
  font-size: var(--fila-font-size-subheading);
  font-weight: 500;
  margin: 2em 0 1em;
  padding-bottom: 0.5em;
  color: var(--fila-color-subtext);
  border-bottom: 2px solid var(--fila-color-border);
}

.fila-form {
  max-width: 32em;
  margin: 2em auto;
  padding: 2em;
  border: 1px solid var(--fila-color-border);
  border-radius: var(--fila-border-radius);
  background-color: var(--fila-color-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  font-size: var(--fila-font-size-base);
}

.fila-formx label::after {
  content: ' *';
  color: var(--fila-color-error);
}

.req {
  color: var(--fila-color-error);
}

.fila-form input,
.fila-form select,
.fila-form textarea {
  width: 100%;
  padding: 0.75em;
  margin: 0.75em 0 1.25em;
  border: 1px solid var(--fila-color-border);
  border-radius: 0.375em;
  font-size: var(--fila-font-size-base);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.fila-file-upload ul.fila-file-list span,
.fila-form input[type="text"],
.fila-form select,
.fila-form textarea {
  color: var(--fila-color-input) !important;
  font-weight: 600 !important;
}

.fila-form input:focus,
.fila-form select:focus,
.fila-form textarea:focus {
  outline: none;
  border-color: var(--fila-color-primary);
  box-shadow: 0 0 0 3px rgba(0, 115, 230, 0.2);
}

.fila-form input[type="file"] {
  border: none;
}

.fila-form input[type="submit"] {
  background-color: var(--fila-color-primary);
  color: #fff;
  padding: 0.85em 1.5em;
  border: none;
  border-radius: 0.375em;
  cursor: pointer;
  text-transform: uppercase;
  font-size: var(--fila-font-size-base);
  transition: background-color 0.3s;
}

.fila-form input[type="submit"]:hover {
  background-color: var(--fila-color-primary-hover);
}

#fila-error-messages {
  color: #fff;
  background: var(--fila-color-error);
  padding: .6em;
  margin-bottom: 1.5em;
  border-radius: 5px;
  font-size: 1.0em;
}

#fila-error-messages ul {
  list-style-type: disc;
  padding-left: 1.5em;
  margin: 0.5em 0;
}

#fila-error-messages p {
  margin: 0;
  text-align: center;
}

#fila-error-messages li {
  margin-bottom: 0.5em;
}

.fila-error-message {
    color: #fff;
    padding: .2em .6em;
    background: var(--fila-color-error);
    font-size: 0.95em;
    margin: -1em 0.2em 1em 0.2em;
	border-radius:5px;
}

#fila-general-error {
	background: var(--fila-color-error);
    color: #fff;
    padding: .4em .6em;
    border-radius: 5px;
    margin: -.9em 0em .6em 0em;
}

#error-for-fila_files{
    margin-top: 1em;
}

#fila_education{
	height: 10em;
}

.fila-step-desc {
  margin: 1.5em 0;
  font-size: .95em;
  color: var(--fila-color-text);
}

.fila-step-container {
  margin: 1em 0;
}

.fila-error {
  color: #fff;
}

button.fila-file-label {
  display: inline-block;
  padding: 0.6em 1.25em;
  background-color: var(--fila-color-primary);
  color: white;
  cursor: pointer;
  border-radius: var(--fila-border-radius);
  border-color: transparent;
  transition: background-color 0.3s;
  font-size: 0.95em;
}

.fila-step-container label {
	color: var(--fila-color-text);
    font-weight: 500;
	font-size: 0.95em;

}

.fila-file-label:hover {
  background-color: var(--fila-color-primary-hover);
}

.fila-file-names {
  display: block;
  margin-top: 0.75em;
  font-size: 0.95em;
  color: var(--fila-color-text);
}

.fila-file-upload ul.fila-file-list {
  list-style: disc;
  padding-left: 0.2em;
  margin-top: 0.75em;
  margin-left: 2em;
  margin-bottom: .6em;
}

.fila-file-desc{
  color: var(--fila-color-text);
  margin: 0.75em 0;
}
.fila-file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75em;
  border: 1px solid var(--fila-color-border);
  padding: 0.5em 0.75em;
  border-radius: 0.375em;
  background-color: #fff;
}

.fila-delete-btn {
  background-color: var(--fila-color-error);
  color: white;
  border: none;
  border-radius: 0.375em;
  padding: 0.4em 0.75em;
  cursor: pointer;
  font-size: 0.8em;
  transition: background-color 0.3s;
}

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

.fila-type-selected {
  text-align: center;
   margin: 0;
}

.fila-current-step {
  text-align: center;
  margin-top: 1em;
}

.fila-checkbox-wrapper{
  margin: 2em 0;	
}

.fila-checkbox-label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5em;
  align-items: start;
  cursor: pointer;
  user-select: none;
  position: relative;
}

.fila-checkbox-desc{
  color: var(--fila-color-text);
	margin: -4px 0 0 0;
}

.fila-checkbox-desc a {
	text-decoration: underline;
}

/* The checkbox input in the first column */
.fila-checkbox-label input[type="checkbox"] {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  margin: 0;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* The label text spans the second column on first row */
.fila-checkbox-label > :not(input):not(.fila-error-message) {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  white-space: normal; /* multiline */
}

/* Error message spans both columns below */
.fila-checkbox-label .fila-error-message {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  font-size: 0.95em;
  margin-top: 0.25em;
  padding: .4em .6em;
}

.text-center {
    text-align: center;
}
.no-border {
	border: none;
}

.fila-step-bars {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 300px;
  margin: 2rem auto;
}

.step-bar {
  flex: 1;
  height: 8px;
  background-color: var(--fila-color-border);
  border-radius: 4px;
  transition: background-color 3s;
}

.step-bar.filled {
  background-color: #606F7B;
}

.fila-step-container ul.fila-req-file-list{
	margin-left: 2em;
    margin-bottom: .6em;
}