body main {
    background: #FEFEFE;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

img.ysh-logo {
    max-height: 150px;
}

footer {
    height: 75px;
    width: 100%;
    max-width: 100%;
}

footer .container {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -5px;
}

footer img.ysh-logo {
    max-height: 75px;
}

footer p {
    margin-left: 5em;
}

img.aihb-logo {
    max-height: 150px;
}

#aihb-logo-container {
    background: white;
}

h3.lesson-title {
    font-size: 48px;
    color: #501366;
    text-transform: uppercase;
}

h3.bible-trail-header {
    font-size: 24px;
    color: #e4223d;
}

h4.quiz-section-header {
    color: #e4223d;
}

.ysh-logo {
    display: inline-block;
}

.image-navbar {
    display: flex;
}

/* https://css-tricks.com/snippets/css/drop-caps/ */
.lesson p:first-child:first-letter {
    color: black;
    float: left;
    font-family: Georgia;
    font-size: 75px;
    line-height: 60px;
    padding-top: 5px;
    padding-right: 8px;
    padding-left: 3px;
    padding-bottom: 0px;
}

.lesson-image {
    border-radius: 4px;
}

.lesson-image-left {
    margin-right: 20px;
    margin-bottom: 10px;
}

.lesson-image-right {
    margin-left: 20px;
    margin-bottom: 10px;
}

@media (max-width:720px) { /* bootstrap 4 - medium screens */
    .lesson-image-left {   
        margin-right: 0px;
    }
    .lesson-image-right {   
        margin-left: 0px;
    }
}

span.treasure-verse {
    font-weight: bold;
}

img.reversed {
    -moz-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

p.treasure-container {
    margin-bottom: 0;
}

.quiz-inline-input {
    margin-left: 0;
    display: inline;
    /*max-height: 30px;*/
}

.width-50 {
    max-width: 50px;
}

.width-75 {
    max-width: 75px;
}

.width-100 {
    max-width: 100px;
}

.width-150 {
    max-width: 150px;
}

.width-200 {
    max-width: 200px;
}

.width-250 {
    max-width: 250px;
}

.width-300 {
    max-width: 300px;
}

.width-350 {
    max-width: 350PX;
}

.bold {
    font-weight: bold;
}

input.no-number-spin[type='number'] {
    -moz-appearance:textfield;
}

input.no-number-spin[type="number"]::-webkit-outer-spin-button,
input.no-number-spin[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

table.table-middle-aligned td {
    vertical-align: middle;
}

/* icons from https://feathericons.com */

.is-almost-right {
    /*border-color: #0863bf;*/
    border-color: black;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.is-almost-right:focus {
  box-shadow: 0 0 0 0.1rem rgba(8, 99, 191, 0.55);
}

.is-valid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2328a745' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check-circle'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

.is-invalid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23dc3545' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-alert-circle'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E") !important;
}

span.icon {
    display: inline-block;
    width: 20px;
    height: 20px;
}

span.icon.correct {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2328a745' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check-circle'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E");
}

span.icon.incorrect {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23dc3545' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-alert-circle'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}

span.icon.almost-correct {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

p span.icon, td span.icon {
    vertical-align: text-bottom;
}

li span.icon {
    vertical-align: text-top;
}

table#quiz-key th, table#quiz-key td {
    padding: 0.5em;
}

p input {
    margin-bottom: 0.5em;
}

input { 
    text-align: center; 
}