/*styles.css*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",sans-serif;}
body{display:flex;justify-content:center;align-items:start;min-height:100vh;background:#e9eef2;padding:2rem;}

/*CARD*/
.login-card{
  width:100%;
  max-width:500px;
  background:#005b86;
  color:#fff;
  border-radius:.5rem;
  padding:3rem 2.25rem 4rem;
  box-shadow:0 12px 24px rgb(0 0 0 / 12%);
}

/*LOGO*/
.logo-box{
    width:180px;
    height:120px;
    margin:0 auto 3rem;
    border-radius:.5rem;
    background:#f4f3f2;
    border:1px solid #f4f3f2;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .logo-box img{
    max-width:100%;
    max-height:100%;
    object-fit:scale-down;
    border-radius:inherit;
    display:block;
  }
  .login-card .password-field .toggle-pwd{
    top:calc(50% + 0.8rem);
  }
/*FORM*/
label{
  display:block;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.06em;
  margin-bottom:.5rem;
  text-transform:uppercase;
}
.field{margin-bottom:1.75rem;}
.field input{
  width:100%;
  padding:.875rem 1rem;
  border:none;
  border-radius:999px;
  background:#3885ad;
  color:#fff;
  font-size:1rem;
}
.field input::placeholder{color:#dbedf5;}

a.forgot{
  display:inline-block;
  margin-top:-1rem;
  margin-bottom:1.75rem;
  font-size:.75rem;
  font-weight:700;
  color:#dbedf5;
  text-decoration:underline;
}

/*BUTTONS*/
.btn{
  width:100%;
  border:none;
  border-radius:999px;
  padding:.9rem 1rem;
  font-size:.95rem;
  font-weight:700;
  cursor:pointer;
  transition:opacity .2s;
}
.btn:hover{opacity:.88;}

.btn-primary{
  background:#fff;
  color:#005b86;
}
.btn-secondary{
  background:#fff;
  color:#005b86;
  margin-top:1.5rem;
}

.separator{
  display:flex;
  align-items:center;
  margin:2.25rem 0 1.5rem;
}
.separator span{
  flex-shrink:0;
  font-size:.8rem;
  font-weight:600;
  margin:0 .75rem;
  opacity:.8;
}
.separator::before,
.separator::after{
  content:"";
  flex:1;
  height:1px;
  background:#c4d5de;
}

/*HELPERS*/
.text-center{text-align:center;}
.small{font-size:.8rem;}
.medium{font-size:.9rem;}

.card{
    width:100%;
    max-width:500px;
    border-radius:.5rem;
    padding:3rem 2.25rem 4rem;
    box-shadow:0 12px 24px rgb(0 0 0 / 12%);
  }

  .signup-card .avatar{
    margin-top:4rem;
  }

  .signup-card .section-heading{
    padding:0;
    background:none;
    position:static;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
  }

  .signup-card .section-heading::before,
  .signup-card .section-heading::after{
    content:"";
    flex:1 1 0;
    height:2px;
    background:#005b86;

    position:static;
    transform:none;
    width:auto;
  }

  .avatar{
    width:110px;
    height:110px;
    margin:0 auto 1.75rem;
    border-radius:50%;
    background:#005b86;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .section-heading{
    position:relative;
    font-size:1.1rem;
    font-weight:700;
    text-align:center;
    letter-spacing:.05em;
    margin-bottom:2rem;
    text-transform:uppercase;
  }
  .section-heading::before,
  .section-heading::after{
    content:"";
    position:absolute;
    top:50%;
    width:34%;
    height:2px;
    background:#005b86;
  }
  .section-heading::before{left:0;transform:translateY(-50%);}
  .section-heading::after {right:0;transform:translateY(-50%);}

  .signup-card .field input{
    width:100%;
    padding:.85rem 1rem;
    font-size:1rem;
    border:2px solid #005b86;
    border-radius:999px;
    background:#fff;
    color:#005b86;
  }
  .signup-card .field input::placeholder{color:#005b86cc;}

  .grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.25rem;
  }

  .password-field{
    position:relative;
  }
  .toggle-pwd{
    position:absolute;
    right:1rem;
    top:50%;
    translate:0 -50%;
    width:1.75rem;
    height:1.75rem;
    border:none;
    border-radius:50%;
    background:url("data:image/svg+xml,%3csvg fill='none' stroke='%23005b86' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12Z'/%3e%3ccircle cx='12' cy='12' r='3'/%3e%3c/svg%3e") center/1.15rem 1.15rem no-repeat;
    cursor:pointer;
    opacity:.9;
  }
  .toggle-pwd.show{
    background-image:url("data:image/svg+xml,%3csvg fill='none' stroke='%23005b86' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M17.94 17.94A10.94 10.94 0 0 1 12 19c-7 0-11-7-11-7a21.81 21.81 0 0 1 5.11-5.89m3.17-1.5A10.94 10.94 0 0 1 12 5c7 0 11 7 11 7a21.742 21.742 0 0 1-2.06 2.88'/%3e%3cline x1='1' y1='1' x2='23' y2='23'/%3e%3c/svg%3e");
  }

  .tos{
    display:flex;
    align-items:flex-start;
    gap:.5rem;
    font-size:.85rem;
    margin:1rem 0 2rem;
  }
  .tos input{
    margin-top:.2rem;
    accent-color:#005b86;
  }
  .tos a{color:#005b86;font-weight:600;text-decoration:underline;}

  .btn-accent{
    background:#2292c9;
    color:#fff;
  }
  .signup-card{
    position:relative;
  }

  .signup-card .logo-box{
    position:absolute;
    top:1rem;
    left:1rem;
    width:110px;
    height:auto;
    margin:0;
  }

  .signup-card .avatar{
    width:90px;
    height:90px;
    margin-top:1rem;
  }

/* Tablet*/
@media (min-width:760px) and (orientation:landscape){
  .login-card,
  .card{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2rem;

    width:70vw;
    max-width:900px;
    padding:3rem 4rem;
  }

  .logo-box{
    flex:0 0 auto;
    width:240px;
    height:auto;
    margin:0 auto;
  }

  .login-card form,
  .signup-card form{
    width:100%;
    max-width:600px;
  }
}
.dashboard-card{
  background:#fff;
  border-radius:.5rem;
  box-shadow:0 12px 24px rgb(0 0 0 / 12%);
  width:100%;
  max-width:500px;
  margin:0 auto;
  padding:2.5rem 1.75rem;
}

.dashboard-card .logo-box{
  width:160px;
  height:auto;
  margin:0;
  overflow:visible;
}

.dashboard-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:2rem;
}

.avatar-btn{
  width:52px;
  height:52px;
  border-radius:50%;
  background:#005b86;
  display:flex;
  justify-content:center;
  align-items:center;
  border:0;
  cursor:pointer;
}

.dashboard-title{
  text-align:center;
  color:#005b86;
  font-size:1.75rem;
  line-height:1.3;
  margin-bottom:2rem;
}

.menu{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

.menu hr{
  border:0;
  border-top:2px solid #005b86;
}

.menu-btn{
  display:flex;
  justify-content:center;
  align-items:center;
  font-weight:600;
  font-size:1.05rem;
  padding:1rem 1.5rem;
  border-radius:3rem;
  color:#fff;
  text-decoration:none;
  background:linear-gradient(135deg,#46a2d6 0%, #0a6d9e 100%);
}

.add-btn .plus{
  margin-right:.5rem;
  font-size:1.25rem;
}

@media (min-width:760px) and (orientation:landscape){
  body{justify-content:center;align-items:center;padding:3rem 4vw;}

  .dashboard-card{
    width:70vw;
    max-width:900px;
    padding:3rem 4rem;
  }
  .dashboard-title{font-size:2rem;}
  .menu-btn{font-size:1.1rem;padding:1.1rem 1.5rem;}
}
.dashboard-card{
  position:relative;
  width:85vw;
  max-width:1100px;
  overflow:visible;
}

.dashboard-header{
  width:100%;
  display:flex;
  align-items:center;
}

.logo-box{
  width:160px;
  height:auto;
  overflow:visible;
}

.avatar-btn{
  position:absolute;
  top:1.5rem;
  right:1.5rem;
  width:52px;
  height:52px;
  border-radius:50%;
  background:#005b86;
  color:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
  border:none;
  cursor:pointer;
}

/* ADDED: Ensure avatar icon is always white for consistency */
.avatar-btn svg {
    stroke: #fff;
    fill: none;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dashboard-title{
  text-align:center;
  color:#005b86;
  font-size:1.9rem;
  line-height:1.3;
  margin:3rem 0 2rem;
}

.menu{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.5rem;
}

.menu hr{
  width:100%;
  border:0;
  border-top:2px solid #005b86;
}

.menu-btn{
  display:flex;
  justify-content:center;
  align-items:center;
  width:90%;
  max-width:1000px;
  padding:1.1rem 1.5rem;
  border-radius:3rem;
  font-weight:600;
  font-size:1.05rem;
  color:#fff;
  text-decoration:none;
  background:linear-gradient(135deg,#46a2d6 0%, #0a6d9e 100%);
}

.add-btn .plus{
  margin-right:.5rem;
  font-size:1.25rem;
}

@media (min-width:760px) and (orientation:landscape){
  .dashboard-card{
    width:85vw;
    max-width:1100px;
  }
  .dashboard-title{font-size:2rem;}
}
.profile-menu{
  position:absolute;
  min-width:180px;
  right:1.5rem;
  top:4.5rem;
  padding:.5rem 0;
  border-radius:.5rem;
  background:#fff;
  box-shadow:0 8px 22px rgb(0 0 0 / 14%);
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
  z-index:1000;
}
.profile-menu.show{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.profile-menu ul{list-style:none;margin:0;padding:0}
.profile-menu li+li{border-top:1px solid #e4e7ea}
.profile-menu a{
  display:block;
  padding:.65rem 1.25rem;
  font-size:.9rem;
  color:#005b86;
  text-decoration:none;
  white-space:nowrap;
}
.profile-menu a:hover{background:#f4f7f9}
.patient-card .field input,
.patient-card .field select{
  width:100%;
  padding:.85rem 1rem;
  font-size:1rem;
  border:2px solid #005b86;
  border-radius:999px;
  background:#fff;
  color:#005b86;
  text-align:center;
}
.patient-card .field select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  cursor:pointer;
  background:
    url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' \
           fill='none' stroke='%23005b86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
        <polyline points='6 9 12 15 18 9'></polyline></svg>")
    no-repeat right 1.25rem center / .8rem .8rem;
}

.patient-card .field select:focus{
  outline:none;
  box-shadow:0 0 0 3px #1996c933; /* subtle blue focus ring */
}

/* put DOB + Sex side-by-side on tablets/landscape */
@media (min-width:760px) and (orientation:landscape){
  .patient-card .dob-sex{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.25rem;
  }
}
.patient-card .field input::placeholder{
  color:#005b86;     /* same deep blue you use everywhere else */
  opacity:1;         /* full strength so it’s readable */
}

/* Disabled first option in the <select> (“SEX”) */
.patient-card .field select option[disabled]{
  color:#005b86;
}

/* Selected value inside the pill */
.patient-card .field select{
  color:#005b86;
}

/*────────────────── New-Patient page (patient-card) ──────────────────*/
.patient-card .field input,
.patient-card .field select{
  width:100%;
  padding:.85rem 1rem;
  font-size:1rem;
  border:2px solid #005b86;
  border-radius:999px;            /* pill */
  background:#fff;
  color:#005b86;
  text-align:center;              /* keep everything centred */
}

/* readable placeholders + default “SEX” option */
.patient-card .field input::placeholder{color:#005b86cc;opacity:1;}
.patient-card .field select option[disabled]{color:#005b86;}

/* prettier native <select> */
.patient-card .field select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  cursor:pointer;
  background:
    url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' \
           fill='none' stroke='%23005b86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
        <polyline points='6 9 12 15 18 9'/></svg>")
    no-repeat right 1.25rem center / .8rem .8rem;
}

/* tablet / landscape: DOB and Sex side-by-side */
@media (min-width:760px) and (orientation:landscape){
  .patient-card .dob-sex{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.25rem;
  }
}
.field-divider{
  width:80%;
  height:2px;
  margin:2.25rem auto;
  background:#005b86;
  border:0;
}

.pill-btn{
  width:100%;
  padding:.85rem 1rem;
  font-size:1rem;
  font-weight:600;
  border:2px solid #005b86;
  border-radius:999px;
  background:#fff;
  color:#005b86;
  cursor:pointer;
}
.pill-btn:hover{background:#f4f7f9;}

.password-field{position:relative;}

.eye-toggle{
  position:absolute;
  top:50%;
  right:1.1rem;
  transform:translateY(-50%);
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  line-height:0;
}

.eye-toggle .eye-closed{display:none;}
.eye-toggle.showing .eye-open{display:none;}
.eye-toggle.showing .eye-closed{display:block;}

.edit-btn{
  width:1.9rem;
  height:1.9rem;
  border:none;
  border-radius:50%;
  background:
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23005b86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M12 20h9'%3e%3c/path%3e%3cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5Z'%3e%3c/path%3e%3c/svg%3e")
    center/1.1rem 1.1rem no-repeat;
  cursor:pointer;
  background-color:#f4f7f9;
  transition:background-color .15s;
}
.edit-btn:hover{background-color:#e0ebf2;}

.edit-field{position:relative;}

.edit-toggle{
  position:absolute;
  top:50%; right:1.1rem;
  transform:translateY(-50%);
  width:1.6rem; height:1.6rem;
  border:none; border-radius:50%;
  background:#f4f7f9;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23005b86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M12 20h9'/><path d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z'/></svg>");
  background-repeat:no-repeat;
  background-position:center;
  background-size:1rem 1rem;
  cursor:pointer;
  transition:background-color .15s;
}
.edit-toggle:hover{background-color:#e0ebf2;}

.save-msg{
  text-align:center;
  font-weight:600;
  color:#0a6d9e;
  margin-bottom:1rem;
  opacity:0;
  transition:opacity .25s ease;
}
.save-msg.show{opacity:1;}

.patient-pill{
  display:block;
  width:100%;
  margin:0 0 1.25rem;
  padding:.9rem 1rem;
  border-radius:999px;
  font-weight:600;
  color:#fff;
  background:#2292c9;
  text-decoration:none;
  text-align:left;
  transition:opacity .15s;
}
.patient-pill:hover{opacity:.9;}

.pill-with-check{display:flex;align-items:center;gap:.9rem;}

.patient-checkbox{
  appearance:none;
  width:20px;height:20px;
  border:2px solid #005b86;
  border-radius:50%;
  cursor:pointer;
  position:relative;
}
.patient-checkbox:checked::before{
  content:"";
  position:absolute;inset:4px;
  border-radius:50%;
  background:#005b86;
}

.scenario-box{
  display:block;
  text-align:left;
}
.scenario-box label{
  display:flex;align-items:center;gap:.65rem;
  margin:.55rem 0;
  font-weight:600;
}

.patient-radio{
  appearance:none;
  width:20px;height:20px;
  border:2px solid #005b86;
  border-radius:50%;
  cursor:pointer;
  position:relative;
}
.patient-radio:checked::before{
  content:"";
  position:absolute;inset:4px;
  border-radius:50%;
  background:#005b86;
}

.back-btn{
  display:inline-block;
  padding:.6rem 1.25rem;
  border-radius:999px;
  font-weight:600;
  color:#fff;
  background:#2292c9;
  text-decoration:none;
  transition:opacity .15s;
  margin-top:1.5rem;
}
.back-btn:hover{opacity:.9;}
.patient-card textarea{
  width:100%;
  padding:1rem 1.15rem;
  font-size:1rem;
  border:2px solid #005b86;
  border-radius:2rem;
  background:#fff;
  color:#005b86;
  resize:vertical;
}
.patient-card textarea::placeholder{color:#005b86cc;}

.about-box{
  border:3px solid #0078a6;
  border-radius:2.25rem;
  padding:2rem 1.75rem;
  margin-top:1.25rem;
  text-align:center;
  font-weight:600;
  line-height:1.4;
  color:#005b86;
}
.about-box p{margin:0;}


/* ─── General card container ─────────────────────────────────────── */
.dashboard-card.patient-view{
    /* match the other cards on your site */
    width:90%;
    max-width:900px;         /* looks good on landscape iPad / Surface */
    margin:2rem auto;
    padding:2rem 2.5rem;
    background:#fff;
    border-radius:.75rem;
    box-shadow:0 4px 16px rgb(0 0 0 / 10%);
}

/* ─── Scenario header text ───────────────────────────────────────── */
#scenario-title{
    font-size:1.5rem;
    margin-bottom:.25rem;
}
#task-text{
    font-size:1rem;
    margin-bottom:1.5rem;
}

/* ─── Images ─────────────────────────────────────────────────────── */
#image-container{
    display:flex;            /* side-by-side on wide screens */
    flex-wrap:wrap;          /* stack when there isn’t room   */
    gap:1rem;
    justify-content:center;
}
.dashboard-card.patient-view #image-container{
    display:block;              /* stack anything inside vertically   */
}

.dashboard-card.patient-view img.scenario-image{
    width:100%;                 /* fill card left→right               */
    max-width:100%;
    height:auto;                /* keep aspect-ratio                  */
    max-height:60vh;            /* never taller than 60 % of screen   */
    object-fit:contain;         /* no cropping (use ‘cover’ to crop)  */
    border-radius:.5rem;
}

/* ─── Tablet portrait / phones: stack the images ─────────────────── */
@media (max-width:1024px){   /* iPad portrait ~768px gets this too  */
    #image-container img{
        flex:1 1 100%;
        max-width:100%;
    }
}
.dashboard-card.patient-view{
    width:85vw;          /* identical to the main dashboard rule   */
    max-width:1100px;    /* lets it breathe on desktop screens     */
    margin:2rem auto;
    padding:3rem 4rem;   /* same generous padding the others use   */

}

.dashboard-card.patient-view #scenario-title{
    font-size: 1.8rem;           /* larger, but still fits tablets   */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 0 0 .75rem;          /* space before the blue bar    */
    position: relative;
    color: #005b86;              /* same brand blue as buttons    */
}
.dashboard-card.patient-view #scenario-title::after{
    content:'';
    position:absolute;
    left:0; bottom:-6px;
    width: 60px;                 /* thin underline  */
    height: 4px;
    background:#2292c9;          /* gradient start colour  */
    border-radius:2px;
}

.dashboard-card.patient-view .scenario-desc{
    display:block;
    width:100%;
    margin:0 0 1.5rem;           /* gap below pill   */
    padding:1rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    text-align:center;
    color:#fff;

    background:#3295c8;
    background:linear-gradient(135deg,#46a2d6 0%, #0a6d9e 100%);
    border-radius:2.5rem;
}


@media (max-width:480px){
    .dashboard-card.patient-view .scenario-desc{
        font-size:.95rem;
        padding:.9rem 1rem;
    }
}

.scenario-heading{
    font-size:1.8rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.25px;
    margin:0 0 1rem;
    position:relative;
    text-align:center;
    color:#005b86;
}
.scenario-heading::after{
    content:'';
    position:absolute;
    left:50%; transform:translateX(-50%);
    bottom:-6px;
    width:120px;
    height:4px;
    background:#2292c9;
    border-radius:2px;
}

.scenario-desc{
    display:block;
    width:100%;
    max-width:800px;
    margin:0 auto 2rem;
    padding:1rem 1.25rem;
    font-size:1.1rem;
    font-weight:600;
    line-height:1.35;
    text-align:center;
    color:#fff;
    background:linear-gradient(135deg,#46a2d6 0%, #0a6d9e 100%);
    border-radius:2.5rem;
}

.scoring-grid{
    display:grid;
    gap:1.5rem;
    margin:2rem 0 2.5rem;
}
.score-item{
    display:grid;
    grid-template-columns:220px 1fr 42px;
    align-items:center;
    gap:1rem;
    font-size:.95rem;
}
.score-item.overall label{font-weight:700;}

.score-slider{
    accent-color:#0078a6;
}
.score-value{
    font-family:"Courier New",monospace;
    font-weight:700;
    font-size:1.05rem;
    color:#005b86;
}

#next-task-btn.menu-btn{
    max-width:500px;
    margin:0 auto;
    border-radius:3rem;
    font-size:1.05rem;
}


.status-box{
    max-width:800px;
    margin:0 auto 1.5rem;
}

.dashboard-card .scenario-desc{
    max-width:none;
    width:100%;
    margin:0 0 2rem;

    padding:1.25rem 1.5rem;
    font-size:1.075rem;
    line-height:1.4;
}


.scoring-grid{
    gap:1.25rem;
}

.score-item label{
    font-weight:700;
    color:#005b86;
    text-transform:uppercase;
    letter-spacing:.3px;
    font-size:.9rem;
}

.scale-wrapper span{
    width:26px;
    text-align:center;
    font-size:.85rem;
    font-weight:600;
    color:#005b86;
    opacity:.85;
}

.score-slider{
    accent-color:#0a6d9e;
}

.score-value{
    width:42px;
    text-align:right;
    font-size:1rem;
    font-weight:700;
    color:#0a6d9e;
}

.score-item.overall label,
.score-item.overall .score-value{
    font-size:1rem;
}

@media (max-width:600px){
    .score-item{
        grid-template-columns: 155px 1fr 42px;
    }
    .score-item label{font-size:.8rem;}
}


.section-heading{
    font-size:1.15rem;
    font-weight:800;
    text-transform:uppercase;
    text-align:center;


    border-bottom:2px solid #0a6d9e;
    padding-bottom:.5rem;

    margin:2.5rem 0 1.75rem;
    color:#005b86;
}


.notes-section .section-heading{
    font-size:1.05rem;
    margin-top:0;
}

.section-heading{
    --rail-color:#0a6d9e;
    --gap:1rem;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:1.15rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.3px;
    color:#005b86;

    margin:2.25rem 0 1.75rem;
}


.section-heading::before,
.section-heading::after{
    content:"";
    flex:1 1 0;
    height:2px;
    background:var(--rail-color);
    opacity:.95;
}

.section-heading::before{margin-right:var(--gap);}
.section-heading::after {margin-left: var(--gap);}

.notes-section .section-heading{
    font-size:1.05rem;
    margin-top:0;
}


.section-heading{
    display:flex;align-items:center;justify-content:center;
    font-size:1.15rem;font-weight:800;text-transform:uppercase;
    letter-spacing:.3px;color:#005b86;margin:2rem 0 1.5rem;
    --rail-color:#0a6d9e;    /* unify color in one var */
    --rail-thick:2px;
}

.section-heading::before,
.section-heading::after{
    content:"";height:var(--rail-thick);
    background:var(--rail-color);opacity:.95;
}


.section-heading.rail-wide::before,
.section-heading.rail-wide::after{flex:1 1 0;}
.section-heading.rail-wide::before{margin-right:1rem;}
.section-heading.rail-wide::after {margin-left :1rem;}

.section-heading.rail-short::before,
.section-heading.rail-short::after{flex:1 1 33%;}
.section-heading.rail-short::before{margin-right:.75rem;}
.section-heading.rail-short::after {margin-left :.75rem;}


.rail-short{font-size:1.05rem;}

.section-heading{border-bottom:none !important;}


.heading-label{
    background:#ffffff;
    padding:0 .5rem;
    position:relative;
    z-index:1;
}

.dashboard-card{background:#ffffff;}

.chart-container{
    width:460px;
    margin:0 auto;
}

.section-heading{position:relative;display:flex;align-items:center;justify-content:center}
.section-heading .heading-label{background:#fff;padding:0 .65rem;z-index:1}


.profile-menu{display:none}
.profile-menu.show{display:block}


.result-card .menu-btn{display:inline-block}

.section-heading{display:flex;align-items:center;justify-content:center;
                 {--rail-color:#0a6d9e;--rail-thick:2px}
.section-heading::before,
.section-heading::after{content:"";flex:1;height:var(--rail-thick);
                        background:var(--rail-color);opacity:.95}
.section-heading::before{margin-right:1rem;}
.section-heading::after {margin-left :1rem;}

.heading-label{background:#fff;padding:0 .6rem;position:relative;z-index:1}

.rail-wide::before,.rail-wide::after{flex:1 1 0;}