/* esmart.css - The old ExamSmart site's look on the Astra child theme: frame, student pages, home page. */
/* Rules come from the old site's Content/Site.scss; Sass variables resolved by hand from
   Content/es-assets/_variables.scss and checked against the compiled Content/Site.css:
   Blue #0a6cc2, BrightBlue #0d87f2, LightBlue rgba(10,108,194,.12), Green #0c6300,
   BrightGreen #15b000, LightGreen rgba(12,99,0,.12), Red #b31919, Grey #b3b3b3,
   LightGrey rgba(179,179,179,.12), White #fafafa, Black #1a1a1a. */

/* ==== 1. Site look ==== */

/* The old site uppercased every heading */
h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
}

/* Body links; "body" outranks Astra's plain "a" rule */
body a {
    color: #0d87f2;
}
body a:hover,
body a:focus {
    color: #095faa;
}

/* Bootstrap 3 buttons; the doubled class outranks Astra's button and input[type=submit] rules */
.btn.btn {
    display: inline-block;
    margin-bottom: 0;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    vertical-align: middle;
    white-space: nowrap;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    user-select: none;
}
.btn.btn:hover,
.btn.btn:focus {
    color: #fff;
    text-decoration: none;
}
.btn.btn-default {
    color: #fff;
    background-color: #0a6cc2;
    border-color: #ccc;
}
.btn.btn-default:hover,
.btn.btn-default:focus {
    color: #fff;
    background-color: #085191;
    border-color: #adadad;
}
.btn.btn-primary {
    color: #fff;
    background-color: #0a6cc2;
    border-color: #095faa;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus {
    color: #fff;
    background-color: #085191;
    border-color: #063e6f;
}
.btn.btn-success {
    color: #fff;
    background-color: #15b000;
    border-color: #129600;
}
.btn.btn-success:hover,
.btn.btn-success:focus {
    color: #fff;
    background-color: #0f7d00;
    border-color: #0b5900;
}
.btn.btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}
.btn.btn-danger:hover,
.btn.btn-danger:focus {
    color: #fff;
    background-color: #c9302c;
    border-color: #ac2925;
}
.btn-full-length {
    width: 100%;
    max-width: 350px;
}

/* Icon spacing, scoped to buttons and menu links (the old rule hit every <i>) */
.btn .fa,
.main-header-menu .menu-link .fa {
    margin-right: .75em;
}

/* ==== 2. Header and menu ==== */

/* Header bar: the old navbar-default background and border */
.site-header .ast-primary-header-bar {
    background-color: #fafafa;
    border-bottom: 1px solid #e7e7e7;
}

/* Site logo: at most 220px wide and 52px tall (old #siteLogo) */
#masthead .site-logo-img .custom-logo-link img.custom-logo,
#masthead .site-logo-img img {
    width: auto;
    height: auto;
    max-width: 220px;
    max-height: 52px;
}

/* Top-level menu links */
:is(#ast-hf-menu-1, #ast-hf-mobile-menu) > li.menu-item > a.menu-link {
    color: #777;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 #fafafa;
    cursor: pointer;
}
:is(#ast-hf-menu-1, #ast-hf-mobile-menu) > li.menu-item > a.menu-link:hover,
:is(#ast-hf-menu-1, #ast-hf-mobile-menu) > li.menu-item > a.menu-link:focus {
    color: #333;
    background-color: transparent;
}

/* Current page in the menu */
:is(#ast-hf-menu-1, #ast-hf-mobile-menu) > li.current-menu-item > a.menu-link,
:is(#ast-hf-menu-1, #ast-hf-mobile-menu) > li.current-menu-ancestor > a.menu-link {
    background-color: #e7e7e7;
}

/* Parent of an open dropdown */
:is(#ast-hf-menu-1, #ast-hf-mobile-menu) > li.menu-item-has-children:hover > a.menu-link,
:is(#ast-hf-menu-1, #ast-hf-mobile-menu) > li.menu-item-has-children:focus-within > a.menu-link {
    background-color: #e6e6e6;
}

/* Dropdown panel and its links */
:is(#ast-hf-menu-1, #ast-hf-mobile-menu) ul.sub-menu {
    background: #fafafa;
}
:is(#ast-hf-menu-1, #ast-hf-mobile-menu) ul.sub-menu > li.menu-item > a.menu-link {
    color: #333;
}
:is(#ast-hf-menu-1, #ast-hf-mobile-menu) ul.sub-menu > li.menu-item > a.menu-link:hover,
:is(#ast-hf-menu-1, #ast-hf-mobile-menu) ul.sub-menu > li.menu-item > a.menu-link:focus {
    color: #fff;
    text-decoration: none;
    background-color: #0c6300;
}

/* Phones: light green hover on top links, green on dropdown links */
@media (max-width: 767px) {
    :is(#ast-hf-menu-1, #ast-hf-mobile-menu) > li.menu-item > a.menu-link:hover {
        background-color: rgba(12, 99, 0, .12);
    }
    :is(#ast-hf-menu-1, #ast-hf-mobile-menu) ul.sub-menu > li.menu-item > a.menu-link:hover,
    :is(#ast-hf-menu-1, #ast-hf-mobile-menu) ul.sub-menu > li.menu-item > a.menu-link:focus {
        color: #fafafa;
        background-color: #0c6300;
    }
}

/* Menu icons: each menu item's es-ico-<name> class draws a Font Awesome 4.7 glyph */
li[class*="es-ico-"] > a.menu-link::before {
    display: inline-block;
    margin-right: .75em;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-transform: none;
}
li.es-ico-dashboard > a.menu-link::before {
    content: "\f0e4";
}
li.es-ico-money > a.menu-link::before {
    content: "\f0d6";
}
li.es-ico-users > a.menu-link::before {
    content: "\f0c0";
}
li.es-ico-power-off > a.menu-link::before {
    content: "\f011";
}
li.es-ico-lightbulb-o > a.menu-link::before {
    content: "\f0eb";
}
li.es-ico-pencil > a.menu-link::before {
    content: "\f040";
}
li.es-ico-film > a.menu-link::before {
    content: "\f008";
}
li.es-ico-history > a.menu-link::before {
    content: "\f1da";
}
li.es-ico-user > a.menu-link::before {
    content: "\f007";
}
li.es-ico-sign-in > a.menu-link::before {
    content: "\f090";
}

/* ==== 3. Footer ==== */

/* Grey footer with light text (old #footerWrapper); rows drop Astra's own backgrounds */
.site-footer,
.site-footer .ast-builder-grid-row-container[data-section] {
    background-color: #b3b3b3;
    color: rgba(255, 255, 255, .75);
}
.site-footer .ast-builder-html-element,
.site-footer .ast-footer-copyright {
    padding: 1.125em;
    color: rgba(255, 255, 255, .75);
}

/* Footer headings */
.site-footer h3 {
    margin-top: -.8em;
    color: rgba(0, 0, 0, .9);
}
.site-footer h5 {
    color: inherit;
}

/* Footer lists without bullets */
.site-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-footer ul > li {
    padding-bottom: .25em;
}

/* Footer links */
.site-footer a,
.site-footer .ast-builder-html-element a,
.site-footer .ast-footer-copyright a {
    color: #fff;
}

/* "Connect with us!" columns */
.es-connect {
    display: flex;
    flex-wrap: wrap;
}
.es-connect > .es-connect-col {
    flex: 1 1 200px;
    min-width: 200px;
}

/* ==== 4. Shared content classes (student pages) ==== */

/* Clearfix for the boxes that float their contents */
.statusBar::after,
.cp-hover-item::after,
.cp-hover-item > ul > li::after {
    content: "";
    display: table;
    clear: both;
}

/* Helpers */
.clearBoth {
    clear: both;
}
.center {
    text-align: center;
}
.floatLeft {
    float: left;
}
.floatRight {
    float: right;
}
.lg {
    width: 375px;
}
.md {
    width: 125px;
}
.sm {
    width: 75px;
}
.auto,
.auto-inline {
    width: auto;
    min-width: 0;
}
.auto-inline {
    display: inline-block;
}

/* Status bar and answer panels */
.statusBar,
.usersAnswer,
.correctAnswer {
    background: #d9edf7;
    border: 1px solid #999;
    border-radius: .5em;
}
.statusBar {
    padding: .75em .75em 0 .75em;
}
.correctAnswer {
    background: #fcf8e3;
}
.questionText {
    padding: 1em;
    font-size: 1.5em;
}
.explanationText {
    padding: 1em;
}

/* No bullets on these lists (the old site removed them from every ul) */
.answersList,
.answerResults > ul,
.cp-hover-item > ul {
    list-style: none;
}

/* Answer list */
.answersList {
    margin: 1.125em 0 2em -1.125em;
}
.answersList li {
    margin-bottom: .5em;
}
.answersList li a {
    padding: .5em;
    color: #666;
    text-decoration: none;
}

/* Answer results row */
.answerResults {
    margin: 1.125em 0 -1.125em -2.125em;
    text-align: center;
}
.answerResults > ul > li {
    display: inline-block;
    margin-right: .5em;
    margin-bottom: 1.5em;
}
.answerResults > ul > li > span {
    border: 1px solid #999;
}

/* Messages and labels */
.errMsg {
    color: red;
}
.defHeading {
    display: block;
    color: red;
}
.val-msg {
    font-size: .8em;
}
.changeLink {
    margin-left: 4px;
    font-size: .8em;
    color: #b31919;
}
.changeLink:hover {
    color: rgba(0, 0, 0, .5);
}
.es-icon {
    color: rgba(0, 0, 0, .3);
}

/* Score circle */
.numberCircle {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    padding: 15px 18px;
    font-size: 2em;
    font-weight: 700;
    text-align: center;
    color: #b3b3b3;
    background: transparent;
    border: 16px solid rgba(0, 0, 0, .3);
    border-radius: 50%;
}

/* Exam box */
.examBox {
    min-height: 300px;
    margin: 0 auto 1.125em;
    padding: 0 1em;
    background: #eee;
    border: 1px solid rgba(175, 175, 175, .5);
    border-radius: .5em;
    box-shadow: 0 0 2px 0 rgba(128, 128, 128, .3);
}

/* Grey boxes; hover adds a faint green fade */
.greyBox,
.glossaryBox {
    margin: 2em auto;
    padding: 1em;
    background: #f2f2f2;
    border-radius: 1em;
    box-shadow: 0 6px 6px -7px #1a1a1a;
}
.greyBox:hover {
    background-image: linear-gradient(to bottom, rgba(12, 99, 0, 0) 0%, rgba(12, 99, 0, .25) 100%);
    background-repeat: repeat-x;
}
.greyBox > h2 > span {
    color: #b3b3b3;
}
.glossaryBox h3 {
    border-bottom: 1px solid rgba(0, 0, 0, .4);
}

/* Glossary terms */
.gtList {
    margin: 1.125em;
}
.gtList > li {
    display: inline-block;
    list-style-type: none;
}
.glTerm {
    color: #0d87f2;
    text-decoration: none;
}
a.glTerm {
    margin-right: 1.125em;
}
a.glTerm::after {
    content: ",";
}
.gtLabel {
    display: block;
    font-weight: 700;
    text-decoration: underline;
}

/* Tables: grid view and history list */
.gridView,
.historyDetails {
    width: 100%;
    margin: 2em auto;
    border-spacing: 1em;
    background: rgba(179, 179, 179, .12);
    border-radius: .5em;
    box-shadow: 0 6px 6px -7px #1a1a1a;
}
.gridView :is(th, td),
.historyDetails :is(th, td) {
    padding: 1em;
}
.gridView th,
.historyDetails th {
    font-size: .9em;
    font-weight: 700;
}
.gridView tr:hover,
.gridView tr:focus,
.historyDetails tr:hover,
.historyDetails tr:focus {
    background: rgba(10, 108, 194, .12);
    cursor: pointer;
}
.gridView tr:first-child:hover,
.gridView tr:first-child:focus,
.historyDetails tr:first-child:hover,
.historyDetails tr:first-child:focus {
    background: transparent;
    cursor: none;
}

/* Exam details table; the last row holds the totals */
.ExamDetails {
    width: 100%;
    margin: 2em auto;
    border-spacing: 1em;
    background: transparent;
}
.ExamDetails :is(th, td) {
    padding: 1em;
    text-align: center;
}
.ExamDetails :is(th, td):first-child {
    text-align: left;
}
.ExamDetails th {
    font-size: .9em;
    font-weight: 700;
}
.ExamDetails tr {
    border-bottom: 1px solid #1a1a1a;
}
.ExamDetails tr:last-child {
    font-weight: 700;
    background: rgba(10, 108, 194, .12);
    border-top: 2px groove #b3b3b3;
    border-bottom: 2px groove #b3b3b3;
}

/* Category progress hover cards */
.cp-hover-item {
    display: block;
    min-width: 150px;
    max-width: 300px;
    margin: 0 auto;
    padding: 1em;
    text-align: center;
    background: rgba(179, 179, 179, .04);
    border: 1px solid rgba(179, 179, 179, .12);
    border-radius: .5em;
    box-shadow: 0 8px 6px -7px rgba(0, 0, 0, .75);
}
.cp-hover-item > h4 {
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.cp-hover-item > ul > li > span:first-child {
    float: left;
}
.cp-hover-item > ul > li > span:last-child {
    float: right;
}

/* Category links */
.categories-flex-container {
    display: flex;
}
.categories-flex-container > a:hover {
    color: #0a6cc2;
}
.catergories-list {
    margin: 2em 1.5em;
}
.catergories-list > a {
    display: inline-block;
    margin: .5em 1em;
    padding: 1em;
    color: #1a1a1a;
    background: rgba(10, 108, 194, .12);
    border-radius: .25em;
}
.catergories-list > a:hover {
    color: #fafafa;
    text-decoration: none;
    background: #0c6300;
}

/* Featherlight lightbox content */
.featherlight {
    padding: 1.5em;
}
.featherlight .featherlight-content {
    width: 98%;
    max-width: 400px;
    margin-left: 0;
    margin-right: 0;
    overflow-x: hidden;
}
.fl-hide {
    float: left;
    display: none;
}
.fl-content {
    max-width: 400px;
    visibility: visible;
}
.fl-glossaryHeading,
.fl-progressHeading {
    display: block;
    min-width: 300px;
    margin-bottom: 1.125em;
    font-size: 1.125em;
    font-weight: 700;
    color: #333;
    border-bottom: 1px solid #ccc;
}

/* Progress bars (Bootstrap 3 base, then the old site's colors) */
.progress {
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}
.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #0a6cc2;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    transition: width .6s ease;
}
.progress-striped .progress-bar {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
        transparent 75%, transparent);
    background-size: 40px 40px;
}
.progress.active .progress-bar {
    animation: progress-bar-stripes 2s linear infinite;
}
@keyframes progress-bar-stripes {
    from {
        background-position: 40px 0;
    }
    to {
        background-position: 0 0;
    }
}
.progress-bar-success {
    background-color: #15b000;
}
.progress-bar-danger {
    background-color: #d9534f;
}
.progress-bar-custom {
    background-color: #fa9c09;
}
.progress-bar-warning {
    background-color: #f2ed06;
}
.progress-striped .progress-bar-warning {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .45) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, .45) 75%,
        transparent 75%, transparent);
}

/* About page sections */
.aboutSection {
    margin-bottom: 2.125em;
    padding: 1.125em;
}
.aboutSection .lead {
    font-weight: 400;
    color: #222;
    border-bottom: #777 solid 1px;
}
.aboutSection > ul {
    margin-bottom: 2.125em;
}
.aboutSection > ul > li {
    margin-bottom: 1em;
    list-style-type: square;
}

/* Jumbotron basics */
.jumbotron {
    margin: 0;
    padding: 1em;
    color: #fff;
    background-color: transparent;
}
.jumbotron :is(h1, h2, p),
.ExamResultsJT :is(h1, h2, p) {
    position: relative;
    z-index: 10;
    color: #0c6300;
    text-align: center;
    text-transform: none;
    text-shadow: 1px 1px 1px #1a1a1a;
}

/* Exam result banners, colored by grade */
.examResults-jumbotron,
.examResults-jumbotron-A {
    background: hsla(120, 100%, 35%, .7);
}
.examResults-jumbotron-B {
    background: hsla(240, 100%, 50%, .7);
}
.examResults-jumbotron-C {
    background: hsla(35, 90%, 50%, 1);
}
.examResults-jumbotron-D {
    background: hsla(65, 100%, 45%, .6);
}
.examResults-jumbotron-F {
    background: hsla(0, 100%, 50%, .7);
}
.ExamResultsJT {
    margin: 0;
    padding: 1em;
    color: #fff;
}
.ExamResultsJT :is(h1, h2, p) {
    color: #fafafa;
}

/* Flip cards (Content/FlashCards.css: "CSS3 3D Flipping Cards Effect" by Chtiwi Malek) */
.flipcard {
    position: relative;
    width: 220px;
    height: 160px;
    perspective: 500px;
}
.flipcard.v:hover .front,
.flipcard.v.flip .front {
    transform: rotateX(180deg);
}
.flipcard.v:hover .back,
.flipcard.v.flip .back {
    transform: rotateX(0deg);
}
.flipcard.v .back {
    transform: rotateX(-180deg);
}
.flipcard.h:hover .front,
.flipcard.h.flip .front {
    transform: rotateY(180deg);
}
.flipcard.h:hover .back,
.flipcard.h.flip .back {
    transform: rotateY(0deg);
}
.flipcard.h .back {
    transform: rotateY(-180deg);
}
.flipcard .front,
.flipcard .back {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 10px;
    color: white;
    background-color: #000;
    transition: all .5s ease-in;
    backface-visibility: hidden;
}

/* Phones: smaller student page elements */
@media (max-width: 767px) {
    .jumbotron {
        padding: 0;
    }
    .answerResults > ul > li {
        margin-right: .1em;
    }
    .answerResults > ul > li > span {
        font-size: .75em;
    }
    .questionText {
        font-size: 1em;
    }
    .historyDetails {
        font-size: .7em;
    }
    .numberCircle {
        width: 50px;
        height: 50px;
        padding: 5px 0;
        font-size: 1.25em;
        border: 8px solid rgba(0, 0, 0, .3);
    }
    .fl-progressHeading {
        min-width: 250px;
        max-width: 250px;
    }
    .ExamDetails :is(th, td) {
        padding: 1em .3em;
    }
    .ExamDetails tr {
        font-size: .7em;
    }
}

/* Print: the history table narrow and without links */
@media print {
    .historyDetails {
        max-width: 500px;
        margin: 0 auto;
    }
    .historyDetails a {
        display: none;
    }
}

/* ==== 5. Home page ==== */

/* Hero band; the page sets the background image inline */
.es-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 410px;
    padding: 1em;
    text-align: center;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.es-hero h1 {
    position: relative;
    z-index: 10;
    margin: 0 0 .25em;
    color: #0c6300;
    text-align: center;
    text-transform: none;
    text-shadow: 1px 1px 1px #1a1a1a;
}

/* Round play button, drawn like the old ExamSmartPlayButton.png */
body a.es-hero-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-top: 1em;
    font-size: 2em;
    line-height: 1;
    color: #000;
    text-decoration: none;
    background: #fff;
    border: 7px solid #000;
    border-radius: 50%;
}

/* Light blue band under the hero (old #homeWrapper) */
.es-home {
    position: relative;
    z-index: 50;
    padding: 1em;
    background: rgba(10, 108, 194, .12);
}

/* Column layouts: versions, featured, why */
.es-versions,
.es-featured {
    display: flex;
    gap: 1em;
}
.es-versions > .es-version,
.es-featured > *,
.es-why > div {
    flex: 1 1 0;
    min-width: 0;
}

/* The two version ads side by side */
.es-versions {
    margin: 2em auto;
}
.es-versions > .es-version {
    padding: 1em;
    background: #fff;
    border: 1px solid rgba(179, 179, 179, .12);
    border-radius: .5em;
}

/* Free trial and purchase blocks (old .row.featured) */
.es-featured {
    padding: 1.5em 1em 2.5em;
}
.es-featured .fa-money {
    color: #0c6300;
}
.es-featured .fa-dashboard {
    color: #0a6cc2;
}

/* "Why use ExamSmart?": a full-width heading over three columns */
.es-why {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    padding: 1.5em 1em 2.5em;
    background: rgba(179, 179, 179, .12);
    border: 3px solid rgba(10, 108, 194, .12);
}
.es-why > :is(h1, h2) {
    flex-basis: 100%;
    text-align: center;
}
.es-why > div > p {
    margin: 2em;
}
.es-why > div > ol {
    margin-bottom: 2em;
}
.es-why img {
    margin-bottom: 1em;
    border: 3px solid #fff;
    border-radius: 3px;
    box-shadow: 0 12px 4px -8px rgba(0, 0, 0, .75), 0 0 3px 0 rgba(0, 0, 0, .4);
}
.es-why h4 {
    margin: 1em;
    padding: 1em;
    color: #fafafa;
    text-align: center;
    background: #0a6cc2;
    border-radius: .25em;
    box-shadow: 0 12px 4px -8px rgba(0, 0, 0, .75), 0 0 3px 0 rgba(0, 0, 0, .4);
}

/* Testimonials, stacked; each author name sits at the right */
.es-testimonials {
    margin: 0 0 2em;
    padding: 1.125em;
    background: transparent;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.es-testimonials .quote {
    padding: 0 3em;
    font-size: 1.5em;
}
.es-testimonials h2 {
    text-align: right;
}

/* Phones: stack the columns */
@media (max-width: 767px) {
    .es-versions,
    .es-featured,
    .es-why {
        flex-direction: column;
    }
    .es-versions > .es-version,
    .es-featured > *,
    .es-why > div {
        flex-basis: auto;
    }
    .es-testimonials .quote {
        padding: 0 1.75em;
        font-size: 1.125em;
    }
}