body {
  font-family: 'Lato', sans-serif;
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, #eef2f3, #d9e2ec);
  color: #333;
}

@media (max-width: 768px) {
  .container {
      width: 90%;
      padding: 15px;
  }
  .btn {
      width: 100%;
  }
}

/* Apply padding inside the containers */
.record-card textarea,
.record-card input,
#response,
#feedback-field,
#diagnostic-results,
#mindmap-prompts-field {
  width: calc(100% - 40px); /* Reduce width to account for container padding (20px per side) */
  padding: 10px; /* Add internal padding */
  margin: 10px auto; /* Uniform spacing and centering */
  border-radius: 8px; /* Rounded corners for consistency */
  border: 1px solid rgba(200, 200, 200, 0.8); /* Subtle border for clarity */
  background-color: rgba(255, 255, 255, 0.4); /* Transparent white background */
  color: #333; /* Legible text color */
  font-family: 'Patrick Hand', sans-serif; /* Handwritten font for textareas */
  font-size: 1.1rem; /* Improve readability */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 3px rgba(0, 0, 0, 0.05); /* Inner and outer shadow */
  resize: none; /* Disable resizing for textareas */
}

/* Add focus effect */
.record-card textarea:focus,
.record-card input:focus,
#response:focus,
#feedback-field:focus,
#diagnostic-results:focus,
#mindmap-prompts-field:focus {
  outline: 2px solid var(--primary-color); /* Highlight border on focus */
  background-color: rgba(255, 255, 255, 0.6); /* Slightly lighter background */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); /* Enhanced shadow effect */
}

/* Add hover effect */
.record-card textarea:hover,
.record-card input:hover,
#response:hover,
#feedback-field:hover,
#diagnostic-results:hover,
#mindmap-prompts-field:hover {
  border-color: rgba(51, 51, 51, 0.5); /* Darker border on hover */
  box-shadow: 0 0 5px rgba(51, 51, 51, 0.3); /* Outer shadow effect */
}

/* Keep headings and feedback fields as they are */
h1, h2, h3, h4, h5 {
  font-family: 'Arial', sans-serif; /* Current font */
  font-size: 1.4rem;
  color: #4a4a4a; /* Neutral gray color */
}

#response,
#feedback-field,
#diagnostic-results {
  font-family: 'Arial', sans-serif; /* Current font for feedback fields */
  font-size: 1.1rem; /* Slightly smaller font */
  color: #333; /* Legible text color */
  background-color: rgba(255, 255, 255, 0.4); /* Match container theme */
  padding: 10px; /* Ensure internal padding for clarity */
  margin: 10px auto; /* Center alignment and spacing */
  border-radius: 8px; /* Rounded corners */
  border: 1px solid rgba(200, 200, 200, 0.8); /* Subtle border */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 3px rgba(0, 0, 0, 0.05); /* Inner and outer shadow */
}



/* Apply Patrick Hand to textarea fields only */
textarea {
  font-family: 'Patrick Hand', sans-serif; /* Handwritten font */
  font-size: 1.1rem;
  letter-spacing: 0.5px; /* Slight spacing for better clarity */
  color: #333; /* Ensure legibility */
}

  :root {
    --primary-color: #007BFF; /* Main button color */
    --primary-hover-color: #0056b3; /* Hover color for buttons */
    --text-color: white; /* Button text color */
    --background-color: #f9f9f9; /* Page background */
    --container-background: #ffffff; /* Record card background */
    --container-border: #e0e0e0; /* Record card border */
    --shadow-color: rgba(0, 0, 0, 0.1); /* Shadow for depth */
  }

  /* General Body Styling */
  body {
  background: url('../../assets/table-texture.jpg') repeat center center; /* Use the texture image */
  background-size: cover; /* Ensure the image covers the entire viewport */
  font-family: 'Arial', sans-serif; /* Keep consistent font */
  color: #333; /* Ensure text remains legible */
  margin: 0;
  padding: 0;
}



  /* Container for Record Card and Diagnostic Tests (side by side) */
  .container {
    display: flex; /* Enables side-by-side layout */
    flex-wrap: nowrap; /* Prevent wrapping */
    gap: 20px; /* Space between elements */
    max-width: 1200px;
    margin: 20px auto; /* Center the container */
  }

  /* Record Card Styling */
.record-card {
  flex: 1; /* Equal width with diagnostic tests */
  min-height: 800px;
  background: rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border: 1px inset #004080;
    box-shadow: 15px 10px 10px rgba(0, 64, 128, 0.2);
    backdrop-filter: blur(10px);
  padding: 20px;
  font-family: 'Arial', sans-serif;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* OMB Fields - Side by Side */
.omb-fields {
  display: flex; /* Align fields horizontally */
  gap: 20px; /* Add space between fields */
}

.omb-field {
  flex: 1; /* Equal width for fields */
}

/* Refraction and VA Fields - Side by Side */
.refraction-fields {
  display: flex; /* Align refraction and VA fields horizontally */
  flex-direction: column; /* Default to stacking vertically */
  gap: 10px;
}

.refraction-pair {
  display: flex; /* Align right/left fields horizontally */
  gap: 10px; /* Add space between fields */
}

.refraction-pair label {
  flex: 0 0 auto; /* Ensure labels don't shrink */
  display: block; /* Ensure labels stack above their inputs */
}

.refraction-pair input {
  flex: 1; /* Inputs take up equal space */
}


textarea,
input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px; /* Rounded corners */
  border: 1px solid rgba(51, 51, 51, 0.2); /* Subtle border */
  background: rgba(255, 255, 255, 0.1); /* Semi-transparent background */
  color: #333; /* Ensure text is readable */
  resize: none; /* Disable resizing for textareas */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 3px rgba(0, 0, 0, 0.05); /* Inner and outer shadow */
  transition: border-color 0.3s, box-shadow 0.3s; /* Smooth interaction effects */
}

/* Hover State: Slightly more pronounced */
textarea:hover,
input:hover {
  border-color: rgba(51, 51, 51, 0.5); /* Darker border on hover */
  box-shadow: 0 0 5px rgba(51, 51, 51, 0.3); /* Outer shadow */
}

/* Focus State: Highlight */
textarea:focus,
input:focus {
  border-color: var(--primary-color); /* Highlight with primary color */
  background: rgba(255, 255, 255, 0.2); /* Slightly lighter background on focus */
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.5); /* Blue glow on focus */
  outline: none; /* Remove default browser outline */
}

/* Placeholder Styling */
::placeholder {
  color: rgba(51, 51, 51, 0.5); /* Slightly faded placeholder */
}




h3,
h4,
h5 {
  font-size: 1.2rem;
  color: #4a4a4a; /* Muted dark gray for better contrast */
  font-weight: bold; /* Emphasize the headings */
}


  button {
    padding: 10px 15px;
    margin-top: 10px;
    background-color: var(--primary-color);
    color: var(--text-color);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 4px 6px var(--shadow-color);
    transition: background-color 0.3s;
  }

  button:hover {
    background-color: var(--primary-hover-color);
  }

  /* Diagnostic Tests Container Styling */
  /* Diagnostic Tests Styling */
.diagnostic-tests {
  flex: 1;
    min-height: 100%;
  background: rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border: 1px inset #004080;
    box-shadow: 15px 10px 10px rgba(0, 64, 128, 0.2);
    backdrop-filter: blur(10px);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}


  /* Feedback and Results Styling */
  #response,
#feedback-field,
#diagnostic-results {
  width: 90%; /* Ensure full width */
  height: 150px; /* Maintain the height */
  padding: 10px;
  border-radius: 5px; /* Rounded corners for consistency */
  border: 1px solid rgba(51, 51, 51, 0.2); /* Subtle border */
  background: rgba(255, 255, 255, 0.1); /* Semi-transparent background */
  color: #333; /* Ensure text is readable */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 3px rgba(0, 0, 0, 0.05); /* Inner and outer shadow */
  resize: none; /* Disable resizing */
  overflow-y: auto; /* Allow vertical scrolling */
  transition: border-color 0.3s, box-shadow 0.3s; /* Smooth interaction effects */
}

/* Hover Effect */
#response:hover,
#feedback-field:hover,
#diagnostic-results:hover {
  border-color: rgba(51, 51, 51, 0.5); /* Darker border on hover */
  box-shadow: 0 0 5px rgba(51, 51, 51, 0.3); /* Outer shadow */
}

/* Focus Effect */
#response:focus,
#feedback-field:focus,
#diagnostic-results:focus {
  border-color: var(--primary-color); /* Highlight border on focus */
  background: rgba(255, 255, 255, 0.2); /* Slightly lighter background on focus */
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.5); /* Blue glow on focus */
  outline: none; /* Remove default browser outline */
}


















  /* Spinner Styling */
  .spinner {
    border: 8px solid #f3f3f3;
    border-top: 8px solid var(--primary-color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 10px auto; /* Center the spinner */
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  /* Style for Diagnostic Buttons */
/* General Button Styling */
button,
.btn-group button {
  margin: 5px;
  padding: 10px 15px;
  font-size: 14px;
  background-color: #004080;
  background-size: cover;
  background-blend-mode: multiply;
  color: #ffffff; /* Neutral dark text */
  border: 1px solid rgba(200, 200, 200, 0.8); /* Subtle border */
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

button:hover,
.btn-group button:hover {
  background-color: #004080;
  color: #ffffff; /* Slightly darker text */
  transform: translateY(-2px); /* Lift effect */
}

/* Success Button (Save, Finish) */
button.btn-success {
  background: url('../../assets/paper-texture.png'), radial-gradient(circle, #c8e6c9, #a5d6a7); /* Green paper tone */
  color: #2e7d32; /* Neutral green text */
}

button.btn-success:hover {
  background: url('../../assets/paper-texture.png'), radial-gradient(circle, #a5d6a7, #81c784); /* Darker green */
  color: #1b5e20;
}

/* Danger Button (Reset, Delete) */
button.btn-danger {
  background: url('../../assets/paper-texture.png'), radial-gradient(circle, #ffcdd2, #ef9a9a); /* Red paper tone */
  color: #b71c1c; /* Neutral red text */
}

button.btn-danger:hover {
  background: url('../../assets/paper-texture.png'), radial-gradient(circle, #ef9a9a, #e57373); /* Darker red */
  color: #7f0000;
}

/* Secondary Button (Link Nodes) */
button.btn-secondary {
  background-color: #004080;
  color: #ffffff; /* Neutral dark gray */
}

button.btn-secondary:hover {
  background-color: #004080;
  color: #ffffff;
}
/* General Styling for Dropdowns */
select {
  font-size: 1.2rem; /* Increase font size */
  padding: 10px; /* Add internal spacing */
  border-radius: 8px; /* Rounded corners */
  border: 1px solid rgba(200, 200, 200, 0.8); /* Subtle border */
  background-color: rgba(255, 255, 255, 0.6); /* Transparent background */
  color: #333; /* Text color */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  width: 100%; /* Make the dropdown take full width of the container */
  max-width: 400px; /* Optional: Limit the maximum width */
}

/* Hover Effect */
select:hover {
  border-color: rgba(51, 51, 51, 0.5); /* Darker border on hover */
  box-shadow: 0 0 5px rgba(51, 51, 51, 0.3); /* Slight outer shadow */
}

/* Focus Effect */
select:focus {
  outline: 2px solid var(--primary-color); /* Highlight border on focus */
  background-color: rgba(255, 255, 255, 0.8); /* Slightly lighter background */
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.5); /* Blue glow on focus */
}
div.record-card #feedback-field {
  width: calc(100% - 40px) !important;
  padding: 10px !important;
  margin: 10px auto !important;
  border-radius: 8px !important;
  border: 1px solid #ccc !important;
  background-color: rgba(255, 255, 255, 0.6) !important;
  color: #333 !important;
  font-family: 'Arial', sans-serif !important;
  font-size: 1.1rem !important;
  resize: none !important;
}

@keyframes tearStrip {
  from {
    transform: scaleX(1);
    opacity: 1;
  }
  to {
    transform: scaleX(0);
    opacity: 0;
  }
}

#tear-strip.animated {
  animation: tearStrip 0.5s ease-in-out forwards;
}

#tear-strip.animated {
  animation: tearStrip 0.7s ease-in-out forwards; /* Smooth tear animation */
}


/*oscerevision page*/

.container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: auto;
  padding-top: 50px;
}

/* Make both sections take equal space */
#osce-selection-panel, #osce-container {
  flex: 1;
  min-height: 550px;
}

/* Ensure buttons match styling */
#next-scenario, #finish-osce {
  display: none;
  width: 48%;
  font-size: 1.1em;
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  margin-top: 15px;
}
.competency-card button {
  background-color: #004080; /* Your website’s deep blue */
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  margin: 5px 5px 10px 0;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.competency-card button:hover {
  background-color: #00274d; /* Darker blue on hover */
}