:root {
  --wellcentblack: rgba(33, 33, 33, 1);
  --greyswhite: rgba(255, 255, 255, 1);
  --wellcentprimary: rgba(99, 165, 192, 1);
  --wellcenttext-color: rgba(50, 50, 50, 1);
  --wellcentstroke: rgba(215, 215, 215, 1);
  --wellcentgray: rgba(64, 64, 64, 1);
  --wellcentguide-text: rgba(118, 118, 118, 1);
  --wellcentorange: #e0a848;
  --wellcentlighblue: #63a5c0;
  --wellcentpurple: #5139b3;
  --wellcentlightpurple: #8f9eec;
  --wellcentpinkish: #ec9a8f;
  --wellcenttemperature: #c882d9;
  --wellcentbloodpressure: #63a5c0;
  --wellcentpulseoximeter: #8f9eec;
  --wellcentweightscale: #15bed5;
}

body,html, #form1 
{
    font-family: "Poppins-Bold", Helvetica;
    height: 100%;
    background-image: url('/bstrap2/img/medical-banner-background.jpg');
    background-size: cover;
    background-position: center;
    background-color: #e3eef4
}
.btn-xl 
{
    padding: 1.5rem 3rem;
    font-size: 3rem;
    line-height: 1.5;
    border-radius: 0.6rem;
}
header-xl
{
    font-size: max(3.75vw, 25px);
    font-weight: bold;
    color: black;
}
header-lg
{
    font-size: max(2.75vw, 25px);
    font-weight: bold;
    color: black;
}
.whitebackground
{
    background-color: var(--greyswhite) !important;
}
        
        
.btn-wellcent:hover {
    color: var(--greyswhite);
    background-color: var(--wellcentstroke);
    border-color: var(--wellcentprimary);
}
.btn-wellcentprimary {
    color: var(--greyswhite);
    background-color: var(--wellcentprimary);
    border-color: var(--wellcentprimary);
}
.btn-wellcentprimary:focus, .btn-wellcentprimary.focus {
    color: var(--greyswhite);
    background-color: var(--wellcentprimary);
    border-color: var(--wellcentprimary);
    box-shadow: 0 0 0 0.2rem rgba(38, 214, 219, 0.5);
}
        
.btn-wellcentprimary-opposite {
    color: var(--wellcentprimary);
    background-color: var(--greyswhite);
    border-color: var(--wellcentprimary);
}
.btn-wellcentprimary-opposite:focus, .btn-wellcentprimary-opposite.focus {
    color: var(--wellcentprimary);
    background-color: var(--wellcentstroke);
    border-color: var(--wellcentprimary);
    box-shadow: 0 0 0 0.2rem rgba(38, 214, 219, 0.5);
}

.btn-wellcentorange {
    color: var(--greyswhite);
    background-color: var(--wellcentorange);
    border-color: var(--wellcentprimary);
}
.btn-wellcentorange:focus, .btn-wellcentorange.focus {
    color: var(--greyswhite);
    background-color: var(--wellcentorange);
    border-color: var(--wellcentprimary);
    box-shadow: 0 0 0 0.2rem rgba(38, 214, 219, 0.5);
}

.btn-wellcentlightblue {
    color: var(--greyswhite);
    background-color: var(--wellcentlighblue);
    border-color: var(--wellcentprimary);
}
.btn-wellcentlightblue:focus, .btn-wellcentlightblue.focus {
    color: var(--greyswhite);
    background-color: var(--wellcentlighblue);
    border-color: var(--wellcentprimary);
    box-shadow: 0 0 0 0.2rem rgba(38, 214, 219, 0.5);
}

.btn-wellcentpurple {
    color: var(--greyswhite);
    background-color: var(--wellcentpurple);
    border-color: var(--wellcentprimary);
}
.btn-wellcentpurple:focus, .btn-wellcentpurple.focus {
    color: var(--greyswhite);
    background-color: var(--wellcentpurple);
    border-color: var(--wellcentprimary);
    box-shadow: 0 0 0 0.2rem rgba(38, 214, 219, 0.5);
}

.btn-wellcentlightpurple {
    color: var(--greyswhite);
    background-color: var(--wellcentlightpurple);
    border-color: var(--wellcentprimary);
}
.btn-wellcentlightpurple:focus, .btn-wellcentlightpurple.focus {
    color: var(--greyswhite);
    background-color: var(--wellcentlightpurple);
    border-color: var(--wellcentprimary);
    box-shadow: 0 0 0 0.2rem rgba(38, 214, 219, 0.5);
}

.btn-wellcentpinkish {
    color: var(--greyswhite);
    background-color: var(--wellcentpinkish);
    border-color: var(--wellcentprimary);
}
.btn-wellcentpinkish:focus, .btn-wellcentpinkish.focus {
    color: var(--greyswhite);
    background-color: var(--wellcentpinkish);
    border-color: var(--wellcentprimary);
    box-shadow: 0 0 0 0.2rem rgba(38, 214, 219, 0.5);
}


.btn-wellcentgray {
    color: var(--greyswhite);
    background-color: var(--wellcentgray);
    border-color: var(--wellcentprimary);
}
.btn-wellcentgray:focus, .btn-wellcentgray.focus {
    color: var(--greyswhite);
    background-color: var(--wellcentgray);
    border-color: var(--wellcentprimary);
    box-shadow: 0 0 0 0.2rem rgba(38, 214, 219, 0.5);
}

.btn-wellcenttemperature {
    color: var(--greyswhite);
    background-color: var(--wellcenttemperature);
    border-color: var(--wellcentprimary);
}
.btn-wellcentbloodpressure {
    color: var(--greyswhite);
    background-color: var(--wellcentbloodpressure);
    border-color: var(--wellcentprimary);
}
.btn-wellcentpulseoximeter {
    color: var(--greyswhite);
    background-color: var(--wellcentpulseoximeter);
    border-color: var(--wellcentprimary);
}
.btn-wellcentweightscale {
    color: var(--greyswhite);
    background-color: var(--wellcentweightscale);
    border-color: var(--wellcentprimary);
}

regulartext
{
    font-size: max(1.5vw, 15px);
    color: black;
}
.btn-back
{
    font-weight: bold;
    font-size:max(1.5vw, 15px);
    color: var(--wellcentprimary);
    border-color: var(--wellcentprimary);
}
.btn-account-circle
{
    padding: 16px 16px;
    border-color: var(--wellcentprimary);
}
img.account-circle
{
    width: 5vw;
    height: auto;
}
.btn-help-circle
{
    font-size:max(1.5vw, 15px);
}
img.help-circle
{
    width: max(2vw, 15px);
    height: auto;
}

img.forward-arrow
{
    width: max(2vw, 15px);
    height: auto;
}

.btn-wellcent
{
    border-radius:20px;
}



.btn-wellcentdashboard > img
{
    width: 10vw; 
    height: auto;
}
.btn-wellcentdashboard > .text-box
{
    border: 1px solid #ccc; 
    background-color: #f8f9fa; 
    border-radius: 20px; 
    color:black; 
    width:100%; 
    font-size: max(1.5vw, 25px);
}
.btn-wellcentdashboard > .btntext
{
    border-radius: 20px; 
    color:white;
    font-size: max(1.5vw, 25px);
}


.div-rounded-corners
{
    border-radius: 16px;
}

.profile-label {
    font-size: max(1vw, 18px);
}



.instruction-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    height: 100%; /* Ensures each card takes full height of the container */
}

.step-number {
    width: 60px;
    min-width: 60px; /* Ensures the width is consistent */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size:max(1.5vw, 15px);
    font-weight: bold;
}

.step-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    font-size:max(1.5vw, 15px);
    font-weight:bold;
    color: Black;
}
        
.listStyle 
{
    font-size: max(1.5vw, 15px);
    color: Black;
}

.menu-bar {
    background-color: #d2e0e6;
    padding: 10px;
    border-radius: 30px;
    font-size: max(1.5vw, 20px);
}

.menu-bar .nav-link {
    color: black;
    padding: 10px 20px;
    border-radius: 20px;
    margin: 0 15px; /* Adds space between items */
}

.menu-bar .nav-link.active {
    background-color: #66a8c2;
    color: white;
}

/* Prevent active link text from changing color on hover */
.menu-bar .nav-link.active:hover {
    color: white;
}

.menu-bar .nav-link:hover {
    color: #66a8c2;
}