.listItem{padding-left:15px;position:relative;}
.listItem:before{content:"•"; position:absolute; left:0px;}
.listItemSecondLevel{padding-left:35px;position:relative; }
.listItemSecondLevel:before{ content:"◦"; position:absolute; left:20px;}
.listItemThirdLevel{padding-left:55px;position:relative; }
.listItemThirdLevel:before{ content:"▪"; position:absolute; left:20px;}
.textCenterAligned{ text-align: center;}

.plainArrowBefore:before{content:"✔"; margin-right:5px; }
.plainRedArrowBefore:before{content:"✔"; margin-right:5px;  color:Red;}
.plainGreenArrowBefore:before{content:"✔"; margin-right:5px; color:green; }
.plainBlueArrowBefore:before{content:"✔"; margin-right:5px; color:  blue;}
.greenArrowBefore:before{content:"✅"; margin-right:5px;}
.xBeforeText:before{content:"❌"; margin-right:5px;}
.cautionBefore:before{content:"⚠"; margin-right:5px; font-size:1.4em; }
.redCautionBefore:before{content:"⚠"; margin-right:5px; font-size:1.4em;  color:Red;}
.blueCautionBefore:before{content:"⚠"; margin-right:5px; font-size:1.4em; color:blue;}
/* Alert Box Styling */
.alertBox {
    position: relative;
    padding: 16px 16px 16px 55px; /* leave space for icon */
    border: 1px solid #f5c2c7;   /* light red border */
    background-color: #f8d7da;     /* light red background */
    color: #842029;                /* dark red text */
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-size:1.1em;
    margin: 16px 0;
}

/* Icon using ::before pseudo-element */
.alertBox::before {
    content: "⚠";                 /* Unicode warning sign */
    position: absolute;
    left: 16px;                   /* position inside padding */
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #842029;               /* match text color */
}

/* Optional: Smooth shadow for prominence */
.alertBox {
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
/* Success Box Styling */
.successBox {
    position: relative;
    padding: 16px 16px 16px 55px; /* leave space for icon */
    border: 1px solid #badbcc;    /* light green border */
    background-color: #d1e7dd;     /* light green background */
    color: #0f5132;                /* dark green text */
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-size:1.1em;
    margin: 16px 0;
}

/* Icon using ::before pseudo-element */
.successBox::before {
    content: "✔";                 /* Unicode check mark */
    position: absolute;
    left: 16px;                   /* position inside padding */
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #0f5132;               /* match text color */
}

/* Optional: Smooth shadow for prominence */
.successBox {
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
/* Warning Box Styling */
.warningBox {
    position: relative;
    padding: 16px 16px 16px 55px; /* leave space for icon */
    border: 1px solid #ffecb5;    /* light yellow border */
    background-color: #fff3cd;     /* light yellow background */
    color: #664d03;                /* dark yellow/brown text */
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-size:1.1em;
    margin: 16px 0;
}

/* Icon using ::before pseudo-element */
.warningBox::before {
    content: "⚠";                 /* Unicode warning sign */
    position: absolute;
    left: 16px;                   /* position inside padding */
    top: 50%;
    transform: translateY(-50%);
    font-size: 25px;
    color: #664d03;               /* match text color */
}

/* Optional: Smooth shadow for prominence */
.warningBox {
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Information Box Styling */
.infoBox {
    position: relative;
    padding: 16px 16px 16px 48px; /* leave space for icon */
    border: 1px solid #b6d4fe;    /* light blue border */
    background-color: #cfe2ff;     /* light blue background */
    color: #084298;                /* dark blue text */
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-size:1.1em;
    margin: 16px 0;
}

/* Icon using ::before pseudo-element */
.infoBox::before {
    content: "ℹ";                 /* Unicode info symbol */
    position: absolute;
    left: 16px;                   /* position inside padding */
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #084298;               /* match text color */
}

/* Optional: Smooth shadow for prominence */
.infoBox {
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
/* Error Box Styling */
.errorBox {
    position: relative;
    padding: 16px 16px 16px 48px; /* leave space for icon */
    border: 1px solid #f5c2c7;    /* light red border */
    background-color: #f8d7da;     /* light red background */
    color: #842029;                /* dark red text */
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-size:1.1em;
    margin: 16px 0;
}

/* Icon using ::before pseudo-element */
.errorBox::before {
    content: "❌";                 /* Unicode cross mark */
    position: absolute;
    left: 16px;                   /* position inside padding */
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #842029;               /* match text color */
}

/* Optional: Smooth shadow for prominence */
.errorBox {
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Hint / Tip Box Styling */
.hintBox {
    position: relative;
    padding: 16px 16px 16px 48px; /* leave space for icon */
    border: 1px solid #cfe0fc;    /* light grey-blue border */
    background-color: #e7f1ff;     /* light grey-blue background */
    color: #0a3d62;                /* dark grey-blue text */
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-size:1.1em;
    margin: 16px 0;
}

/* Icon using ::before pseudo-element */
.hintBox::before {
    content: "💡";                 /* Unicode light bulb */
    position: absolute;
    left: 16px;                   /* position inside padding */
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #0a3d62;               /* match text color */
}

/* Optional: Smooth shadow for prominence */
.hintBox {
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
/* Message Box Styling */
.messageBox {
    position: relative;
    padding: 16px 16px 16px 48px; /* leave space for icon */
    border: 1px solid #d1d5db;    /* light grey border */
    background-color: #f3f4f6;     /* very light grey background */
    color: #1f2937;                /* dark grey text */
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-size:1.1em;
    margin: 16px 0;
}

/* Icon using ::before pseudo-element */
.messageBox::before {
    content: "✉";                 /* Unicode envelope for message */
    position: absolute;
    left: 16px;                   /* position inside padding */
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #1f2937;               /* match text color */
}

/* Optional: Smooth shadow for prominence */
.messageBox {
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Highlight Box Styling */
.highlightBox {
    position: relative;
    padding: 16px 16px 16px 48px; /* leave space for icon */
    border: 1px solid #ffe58f;    /* light yellow border */
    background-color: #fff9db;     /* soft yellow background */
    color: #794c00;                /* dark yellow/brown text */
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-size:1.1em;
    margin: 16px 0;
}

/* Icon using ::before pseudo-element */
.highlightBox::before {
    content: "⭐";                 /* Unicode star for emphasis */
    position: absolute;
    left: 16px;                   /* position inside padding */
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #794c00;               /* match text color */
}

/* Optional: Smooth shadow for prominence */
.highlightBox {   box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Shared properties for all boxes */
.whiteBox,
.redBox,
.greenBox,
.yellowBox,
.blueBox,
.greyBox,
.lightYellowBox,
.tealBox,
.purpleBox {
    padding: 16px;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-size:1.1em;
    margin: 16px 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    border: 1px solid transparent; /* overridden individually */
}

/* Individual colors only */
.whiteBox {
    border-color: #d1d5db;          /* subtle grey border */
    background-color: #ffffff;       /* pure white background */
    color: #1f2937;                  /* dark text for contrast */
}
/* Red / Error */
.redBox {
    border-color: #f5c2c7;
    background-color: #f8d7da;
    color: #842029;
}

/* Green / Success */
.greenBox {
    border-color: #badbcc;
    background-color: #d1e7dd;
    color: #0f5132;
}

/* Yellow / Warning */
.yellowBox {
    border-color: #ffecb5;
    background-color: #fff3cd;
    color: #664d03;
}

/* Blue / Info */
.blueBox {
    border-color: #b6d4fe;
    background-color: #cfe2ff;
    color: #084298;
}

/* Grey / Neutral / Message */
.greyBox {
    border-color: #d1d5db;
    background-color: #f3f4f6;
    color: #1f2937;
}

/* Light Yellow / Highlight */
.lightYellowBox {
    border-color: #ffe58f;
    background-color: #fff9db;
    color: #794c00;
}

/* Teal / Hint */
.tealBox {
    border-color: #cfe0fc;
    background-color: #e7f1ff;
    color: #0a3d62;
}

/* Purple / Custom */
.purpleBox {
    border-color: #e0c3ff;
    background-color: #f3e8ff;
    color: #5b2c6f;
}
.boldText{font-weight:bold;}
.codeFont{  font-family: 'Courier New', Courier, monospace; }
.handWritingFont {
    font-family: 'Patrick Hand', 'Comic Sans MS', cursive;
}


.elementCenterAligned{margin: 10px auto; display:block;width:auto;}
.dropShadowLight{box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }
.dropShadowHeavy{box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.lightGreyBorder{border:solid 1px #ccc; }
.darkGreyBorder{border:solid 1px #333; }
.whiteBorder{border:solid 1px #333; }