/* CSS Syntax for Sample 1 and Sample 2 */
.correct-answer {
    color: #333333;
    text-align: justify;
}

.correct-answer strong, .correct-answer b {
    color: #4CAF50;
    font-weight: bold;
}

.explanations-header, .explanation-title, .additional-info-header, .caption-header, .related-readings, .additional-rationalizatio {
    color: #3F51B5;
    font-size: 1.2em;
    margin-bottom: 10px;
    font-weight: bold;
}

.additional-info {
    color: #3F51B5;
    font-size: 1.1em;
    margin-top: 10px;
    margin-bottom: 10px;
}

.choice-block {
    margin-bottom: 15px;
}

.choice-header, .choice-title {
    text-indent: 30px;
    font-size: 1.1em;
    color: #8E24AA;
    font-weight: bold;
}

.choice-description, .additional-rationalization-description {
    text-indent: 30px;
    text-align: justify;
    color: #333333;
    margin-bottom: 10px;
}

.concluding-summary {
    text-indent: 30px;
    text-align: justify;
    color: #4CAF50;
    font-size: 1.1em;
	font-weight: bold;
}

.caption-description{
	text-indent: 30px;
    text-align: justify;
    margin-bottom: 10px;
}

.formula > strong {
	color: #8E24AA;
    font-weight: bold;
}

.caption-description > b, .caption-description > strong {
    text-indent: 30px;
    text-align: justify;
	color: #8E24AA;
}

.tips-header {
    color: #3F51B5;
    font-size: 1.1em;
    margin-top: 10px;
    font-weight: bold;
}


.additional-info {
    color: #3F51B5;
    font-size: 1.1em;
    margin-top: 10px;
    margin-bottom: 10px;
}

.tips-list {
    color: #333333;
}

.tips-list > li > strong, .tips-list > li > b {
    color: #8E24AA;
}

.rationale-margin {
    margin-top: 10px;      /* Sets top margin */
    margin-right: 20px;    /* Sets right margin */
    margin-bottom: 10px;   /* Sets bottom margin */
    margin-left: 20px;     /* Sets left margin */
}

/* Style for the main ordered list */
.list {
    list-style-type: decimal; /* This specifies the style of the bullet points for the main list to be numbers. */
    margin-left: 0px; /* This gives a left margin to the list for better alignment and presentation. */
}

/* Style for the strong elements (the terms) inside the list */
.list > li > strong, .list > li > b {
    color: #8E24AA; /* This gives the specific color to the terms in the list. */
    font-size: 16px; /* This specifies the font size for the terms. */
}

/* Style for the examples inside the unordered list */
.list > li > ul {
    list-style-type: none; /* This removes bullet points from the sub-list. */
    margin-top: 5px; /* This gives a little spacing above the sub-list for better visual separation. */
    margin-left: 0px; /* This gives a left margin to the sub-list to distinguish it from the main list. */
    padding-left: 0; /* Set padding-left to zero for the unordered list. */
}


/* Style for the individual example items inside the unordered list */
.list > li > ul > li {

    margin-bottom: 10px; /* This gives a bottom margin after every example for better spacing. */
}

.list > li > ul > li > ul > li > b > span{
	 color: #8E24AA;
     font-weight: bold;
}

.bold {
	font-weight: bold;
    color: #000000;
}

.steps {
	color:#8E24AA; 
    font-weight: bold;
}