/* this .dgov-carousel style is to hide this module except in the quiz-done state, 
    controlled jquery addClass in javascript in Article.html for quiz.
*/
.dgov-carousel.dgov-carousel-engage.hide-carousel {
    visibility: hidden;
    display: none;
}
.dgov-carousel.dgov-carousel-engage.show-carousel {
    visibility: visible;
    display: block;
}

/*************** quiz ************************/

/* IE11 */

.quiz.abanner header.start .quiz-body {
    max-width: 100%;
}

/*      */

.step-button-panel { padding-top: 2rem; text-align: center }

.aquiz .step-button-panel button {
    color: #ffffff;
    border-color: #355e93;
}

/* reusable animation styles */
.fade-enter-active { transition: opacity 1s; }

/*.fade-leave-active {*/
/*    transition: opacity .1s;*/
/*}*/
.fade-enter { opacity: 0; }

/*.fade-leave-to {*/
/*    opacity: 0;*/
/*}*/

/* quiz test container styles */

.containerBodyDark { background-color: #303040; }

.containerBodyLight { background-color: #e7e7e7; }
.testContainerTopBar { height: 35px; width: 100%; background-color: #e0e0e0 }

.aquiz .progress { margin: 0 !important; height: .8em; border-radius: 0; background-color: #d6d6d6; }

.aquiz .progress div[role=progressbar] { background-image: -webkit-linear-gradient(left, rgb(174,191,212), rgb(53,94,137)); background-image: -o-linear-gradient(left, rgb(174,191,212), rgb(53,94,137)); background-image: linear-gradient(to right, rgb(174,191,212), rgb(53,94,137)); }
.testContainerBottomSpacer { height: 35px; width: 100%; background-color: #e0e0e0 }

.omniquizContainer { margin: 20px 150px 20px; /*border:dashed black 1px;*/ /*width:500px;*/ /*border: dotted gray 1px;*/ }

/* Utility and Reusable Classes  */
[v-cloak] { display: none }

.omniquiz-serif { font-family: 'Noto Serif', serif; }

.omniquiz-sans { font-family: 'PT Sans', sans-serif; }

.aquiz .btn-primary:disabled { 
    background-color: #333; 
    border-color:#333;
}

.aquiz .btn-primary.step-button-ghost {
    position: fixed;
    bottom: 0;
}

@media (max-width: 767px) {
    .aquiz .btn-primary {
        width: 100%;
        position:absolute;
        bottom:0;
        border-radius:0;
        left:0;
    }
    .adetail.during-state .content #omniquiz {
        box-shadow: none;
    }

}


.answer-button { }

/* Semantic Classes*/
.omniquiz { font-family: 'PT Sans', sans-serif; }


/*.right-gutter-small {*/
/*    padding-right:.8rem;*/
/*}*/


/*@media (min-width: 576px) {*/


/* ************** */
/* omniquiz intro */
/* ************** */
.omniquizIntro { }

.aquiz .omniquizIntro .step-button-panel .btn.btn-primary:hover {
}

.aquiz .step-button-panel .btn.btn-primary {
    transition: all 0.2s;
}

.quiz.abanner .banner-image {
    /*height: calc(100vh - 297px);*/
    height: calc(100vh - 229px);
}

@media (max-width:767px) {
    .done-state.quiz.abanner .banner-image {
        display: none;
    }
}

.omniquizIntroHeaderArea { color: black; background-color: white; padding-top: 1.5rem; }

.omniquizIntroImage { /* visible on in xs */ width: 100%; }

.omniquizContentCat { background-color: #345e92; transform: skew( -10deg); padding: .7rem 0 .5rem; /*width:auto;*/ width: 15rem; margin: 0rem auto; }

.omniquizContentCatText { /*color: white;*/ font-size: 1.3rem; transform: skew(10deg); font-weight: bold; text-transform: uppercase; }

.omniquizTitle { font-size: 2.2rem; width: 70%; /*color:white;*/ margin: 1rem auto; }

.omniquizDate { text-transform: uppercase; padding-bottom: 1rem; letter-spacing: .2rem; /*color: white;*/ }

.omniquizIntroBody { padding: 0 0 5rem; }


.omniquizIntroSocial { padding: 2rem 0 1rem; }

.omniquizDescription { font-size: 1.5rem; color: #666666; padding-bottom: 1.5rem; width: 90%; margin: 0 auto; }




/* ***************** */
/* omniquiz question */
/* ***************** */

.omniquizQuestionArea {
    
}

.omniquizProgressBar .progress {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

/* this is reused by check answer */
.omniquizQuestionContainer { /*padding-left:5em;*/ /*padding-right:5em;*/ padding: 30px 15px 60px; }
/* immediate parent of title text */
/* mobile first...*/
.omniquizQuestion { 
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.2em; 
    max-width: 900px;
    padding: 0; 
    margin: 0 auto 30px;
}
.omniquizQuestion .omniquizQuestionNumber {
    font-weight: 700;
}

.omniquizTextAnswerWrap {
    padding: 20px;
    margin-bottom: 1.6rem;
    font-family: "PT Sans, sans-serif";
}

/* the text answer button */
.omniquizTextAnswer {
    font-weight: 400;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    line-height: 20px;
    text-transform: capitalize;
    padding: 0px;
    
    width: 100%;
    margin: 10px 0 1.5rem;
    border-color: #33679a;
    border: solid #33679a 1.3px;
    border-radius: 6px;
    overflow: hidden;
}
.omniquizTextOptions .btn {
    margin-bottom: 15px; 
    background-color: #333;
    border-color: #333;
    transition: all 0.2s ease-in;
    margin-top: 0px;
    color: white;
}
.omniquizTextOptions .btn:hover {
    border:solid rgba(52,94,146,.6) 2px;
    background-color: rgba(52, 94,146, 0.3);
    color: #355e93;
}
/*.omniquizTextAnswer:focus {*/
/*    background-color: #345e92;*/
/*    color: white;*/
/*    outline: none;*/
/*}*/

.omniquizTextAnswer.omniquizSelected {
    background-color: #355e93 !important;
    color: #ffffff !important;
    outline: none !important;
    border-color: #355e93;
}

.omniquizTextAnswer.omniquizSelected:hover {
    background-color: #254267 !important;
    color: #ffffff !important;
    border-color:  #254267 !important;
}

.omniquizTextAnswer:active { background-color: #345e92; color: white; outline: none; }

/* this image container reusable */
.aquiz .image-contianer { width: 100%; position: relative; padding: 100% 0 0; overflow: hidden; }


.omniquizQuestionContainer .row .omniquizTextAnswerImageWrap {
    padding-right: 0;
}


@media (max-width: 767px) {
    .omniquizQuestionContainer .row .omniquizTextAnswerImageWrap {
        padding-right: 15px;
    }
}


.omniquizTextAnswerImageContainer {
    margin: 0 0 15px;
}

.aquiz .omniquizTextAnswerImageContainer .poster {
    border: none;
    border-radius: 3px;
    overflow:hidden;
}

/* image with text answer */
.omniquizTextAnswerImage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 100%;
}

.omniquizTextAnswerImage.omniquizPortrait { width: 100%; height: auto; }


/* images as answer options (button) */
.aquiz .image-button { width: 100%; padding: 1rem; padding: 15px; margin-bottom: 1.6rem; font-family: 'PT Sans', sans-serif; border: solid #345e92 1.5px; }

/*.omniquizImageButton:focus {*/
/*    background-color: #345e92;*/
/*    color: white;*/
/*    outline: none;*/
/*}*/

.aquiz .image-button.omniquizSelected, .aquiz .image-button.omniquizSelected:focus { background-color: #345e92; color: white; outline: none; }


.aquiz .container-fluid { padding: 0 }
/*.omniquizAnswerImage { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; height: 100%; }*/
.aquiz .poster:after { padding-top: 100%; content: ''; display: block }
.aquiz .poster { cursor: pointer; overflow: hidden; position: relative; display: inline-block; width: 100%; background-color: #000; border: 1px solid #adadad; }
.aquiz .poster .image { position: absolute; top: -1px; bottom: -1px; right: 0; left: 0; width: 100%; height: auto; background-position: center; background-size: cover; background-repeat: no-repeat; transition: all .25s ease-out; }

.aquiz .omniquizAnswerImageContainer .poster {
    border: none;
    border-radius: 3px;
    overflow: hidden;
}

.omniquizAnswerImage.omniquizPortrait { width: 100%; height: auto; }

.omniquizImageAnswerCaptions { font-weight: 900; font-family: 'Lato', sans-serif; font-size: 20px; line-height: 1.2em; padding: 15px 0 5px; }


/* ********************* */
/* omniquiz check answer */
/* ********************* */

.omniquizCheckAnswerArea { box-shadow: 0px 0px 2px 2px #9e9e9e; /* Standard */ background-color: white; }

.omniquizCheckAnswerText { font-size: 20px; margin: 0 0 30px; }

.omniquizCheckAnswerContainer { }

.omniquizCorrectAnswerHead { color: #1b8157; font-size: 2rem; font-weight: bold; margin:0 0 1rem }

.omniquizIncorrectAnswerHead { color: #d1433a; font-size: 2rem; font-weight: bold; margin: 0 0 1rem }

/*.omniquizImageCard {*/
/*    border-radius:6px;*/
/*    padding:1rem;*/
/*}*/

.omniquizImageCard { font-size: 1.6rem; padding: 15px; width: 100%; margin: 0 0 1.5rem; /*border-color: #33679a;*/ /*border: solid #33679a 2px;*/ border-radius: 6px; overflow: hidden; }

.omniquizImageCardIncorrect { background-color: #c44b40; }

.omniquizImageCardCorrect { background-color: #1b8157; }

.omniquizImageCardCaption { padding-top: 0; color: white; }

/* ********************* */
/* omniquiz check answer */
/* ********************* */

.omniquizAnswerResults { color: white; }

.omniquizResultsRatio { font-size: 3rem; margin-bottom: 4rem; }

.omniquizResultsMessage { font-size: 1.5rem; margin-bottom: 15rem; }

.omniquizResultsMessage a { color: inherit; text-decoration: underline; text-decoration-color: #1b8157; /* IE 11 will ignore */ }


.omniquizResultsBody { background-color: white; padding: 3rem; }

.omniquizShareLabel { font-size: 1.5rem; color: #666666; font-weight: bold; }


/* [][][][][][] */
/* [][][][][][] */
/* [][][][][][] */


.omniquizError { padding: 1rem; }

/*
    Things different for non-mobile,
    NOTE: the quiz component was made mobile-first, this is confusing since a most of AFPIMS is
    done Desktop-first, so beware to notice closely the min- vs max-... those below are min- so
    desktop is min-width: 1200px.
*/

@media (min-width: 991px) {
    .omniquizQuestionContainer { padding: 2.25rem; }
}

@media (min-width: 1200px) {
    .omniquizQuestionContainer { padding: 30px; }
}

@media (min-width: 768px) {

    .omniquizDescription { font-size: 1.8rem; color: #666666; padding-bottom: 7rem; width: 70%; margin: 0 auto; }

    .omniquizTitle { font-size: 3.5rem; }

    .omniquizDate { font-size: 1.5rem; letter-spacing: .6rem; padding-bottom: 6rem; }

    .omniquizIntroHeaderArea { color: white; background-color: transparent; padding-top: 3rem; }

    .omniquizIntroSocial { padding: 3em 0; }

    .omniquizDescription { font-size: 1.8rem; padding-bottom: 7rem; }

    .omniquizQuestionContainer { /*padding-left:5em;*/ /*padding-right:5em;*/ padding: 45px 45px 60px; }

    /*.omniquizQuestion { font-size: 2rem; font-weight: bold; padding: 0 0 1rem; }*/

    .omniquizTextAnswer { font-size: 1.7rem; border: solid #33679a 1.5px; }

    .omniquizAnswerImageContainer { margin: 0 0 2rem; }

    .omniquizCorrectAnswerHead { margin: 0 0 1rem; font-size: 2rem; }

    .omniquizIncorrectAnswerHead { font-size: 1.6rem; margin:  0 0 1rem; }

    .omniquizCheckAnswerText { font-size: 1.2rem; font-weight: normal; }

    .omniquizShareLabel { font-size: 2.5rem; font-weight: normal; }

    .omniquizResultsRatio { font-size: 4rem; margin-bottom: 4rem; }

    .omniquizResultsMessage { font-size: 2.5rem; margin-bottom: 15rem; }

    .omniquizImageCard { font-size: 1.2rem; }

}


.article-edit .ui-tabs .ui-tabs-panel { padding: .2em }
.article-edit .chosen-single { padding: .375rem .75rem !important; height: auto !important; background: none !important; box-shadow: none !important }
.article-edit .chosen-single div b { background-position: 0 10px !important; }

/* quiz changes (v1.1) */
.quiz-hide {
    display: none;
}

.quiz-body {
    text-align: center;
}

.quiz.abanner.adetail {
    display: flex;
    flex-direction: column;
}

    .quiz.abanner.adetail.start-state {
        height: calc(100vh - 229px);
    }


@media (max-width:1400px) {
    .quiz.abanner.adetail.start-state {
        height: calc(100vh - 297px);
    }
}

.quiz.abanner.start-state .banner-angle-header:after {
    display: none;
}

.quiz header.start.content-wrap {
    margin: 0 auto;
}

.quiz .content.content-wrap {
    /*flex: 1;*/
    min-height: unset;
}

/* button change for mobile widths */
@media (max-width: 767px) {
    .quiz .content.content-wrap {
        display: flex;
        justify-content: flex-end;
        flex: 1;
        flex-direction: column;
        min-height: unset;
    }

        .quiz .content.content-wrap .ntext.inside {
            margin-top: 0;
            margin-bottom: 0;
            padding: 0;
            margin: 0;
        }

            .quiz .content.content-wrap .ntext.inside .omniquizIntro .step-button-panel button {
                width: 100%;
                border-radius: 0;
            }
}

.quiz header.start hr.quiz-start-rule {
    height: 0;
    margin: 40px 0 10px;
    width: 20em;
    border-bottom: 0;
}

.quiz hr.quiz-done-rule {
    height: 0;
    margin: auto;
    width: 90%;
    max-width: 500px;
    
    border-top-color: #adadad;
    border-bottom: 0;
}


.quiz.start-state .content.content-wrap,
.quiz.during-state .content.content-wrap {
    background: none;
    height: auto;
    padding: 0;
}

.quiz.done-state .content.content-wrap {
    overflow: visible;
}


.quiz.done-state {
    display: block;
}

    .quiz.done-state .aquiz {
        display: none;
    }

.quiz .omniquizIntro .step-button-panel {
    padding-top: 0;
}

    .quiz .omniquizIntro .step-button-panel button {
        background-color: #1b8157;
        border: none;
    }

.quiz.abanner header.start {
    padding: 20vh 15px 0;
}


/* [a:textanddateline] tag inserts html, <p> with a blurb, and an
unwanted <br/>.*/
.quiz.abanner header.start .quiz-body p {
    color: #fff !important important;
    font-family: lato;
    font-size: 1.5rem;
    padding-top: 30px;
    line-height: 1.7em;
    margin: 0 auto 30px;
    margin-bottom: 50px;
}

.quiz.abanner header.start .quiz-body br {
    display: none;
}

.quiz.abanner header.start .maintitle {
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.2em;
    margin: 0;
    color: #fff;
    text-shadow: 0 0 10px rgba(0,0,0.3);
    font-family: 'Crimson Text', serif;
}

@media (max-width: 767px) {
    .quiz.abanner header.done .maintitle {
        margin: 0 auto;
    }
}

@media (min-width: 768px) {
    .quiz.abanner header.done .maintitle {
        font-size: 3rem;
    }
}

.vis-when-done .social-inner a, .vis-when-done .social-inner a:link {
    color: white;
}

.quiz .vis-when-done {
    display: none;
}

.quiz .quiz-tags.vis-when-done {
    display: none;
}

.quiz.done-state .vis-when-done {
    display: block;
}

.quiz.done-state .quiz-tags.vis-when-done {
    display: flex;
}


/* fancy dial gauge */
.gauge-chart {
    width: 30%;
    margin: auto;
    position: absolute;
    background: #fff;
    top: -50px;
    left: 35%;
    border-top-left-radius: 1000px;
    border-top-right-radius: 1000px;
    padding: 20px;
}

@media (max-width: 767px ) {
    .gauge-chart {
        position: inherit;
    }
}

.gauge-text {
    text-anchor: middle;
    fill: #000;
    font-size: 65%;
    font-family: Lato, serif;
    font-weight: 700;
}

@media (min-width: 768px) {
    .quiz-end-message.message {
        margin-top: 124px;
        text-align: center;
        max-width: 734px;
        margin: auto;
        padding-top: 134px;
        padding-bottom: 34px;
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .quiz-end-message.message {
        margin: 0 10px;
        padding: 30px 15px;
        text-align: center;
    }
}
 
.quiz-end-message.message a {
    color: #000;
    padding-top: 2px;
    line-height: inherit;
    text-decoration: none !important;
    -webkit-box-shadow: inset 0 -2px 0 #0a856a;
    box-shadow: inset 0 -2px 0 #0a856a;
}

.quiz-end-message.message a:hover {
    color: #000;
    background-color: #9dcec3;
    padding-bottom: 0;
    border-bottom: none;
    -webkit-transition: background-color 350ms ease-out;
    transition: background-color 350ms ease-out;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-decoration: none;
}

.message a:hover {
    color: #000;
    background-color: #9dcec3;
    padding-bottom: 0;
    border-bottom: none;
    -webkit-transition: background-color 350ms ease-out;
    transition: background-color 350ms ease-out;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-decoration: none;
}

.quiz.done-state .share-title {
    color: rgb(128,128,128);
    text-align: center;
    margin-bottom: 15px;
}

    .quiz.done-state .share-title a {
        color: #000;
        padding-top: 2px;
        line-height: inherit;
        text-decoration: none !important;
        -webkit-box-shadow: inset 0 -2px 0 #0a856a;
        box-shadow: inset 0 -2px 0 #0a856a;
    }

        .quiz.done-state .share-title a:hover {
            color: #000;
            background-color: #9dcec3;
            padding-bottom: 0;
            border-bottom: none;
            -webkit-transition: background-color 350ms ease-out;
            transition: background-color 350ms ease-out;
            -webkit-box-shadow: none;
            box-shadow: none;
            text-decoration: none;
        }

/* addToAny share styles */
.social-link:hover {
    top: -5px;
    box-shadow: 0 9px 8px 0 rgba(0,0,0,.25);
    position: relative;
}

.social-link:hover::after {
    content: "";
    height: 10px;
    width: 100%;
    position: absolute;
    z-index: 10000;
    bottom: -10px;
}

.social-inner a, .social-inner a:link {
    color: white;
}

.a2a_button_facebook.social-link {
    background-color: #3b5998;
    border-color: #3b5998;
}

.a2a_button_email.social-link {
    background-color: #dd4b39;
    border-color: #dd4b39;
}

.a2a_button_twitter.social-link {
    background-color: #00aced;
    border-color: #00aced;
}

.a2a_button_x.social-link {
    background-color: #000;
    border-color: #000;
}

.a2a_button_x.social-link {
    background-color: #000;
    border-color: #000;
}

/* tags in quiz done space */

.quiz .quiz-tags {
    display: flex;
    flex-direction: row;
    max-width: 734px;
    margin: auto;
}

.quiz .quiz-tags .tags {
    margin: 0 auto;
    text-align: center;
}

/* question modifications pass 2 */
.quiz header.during h1.maintitle {
    font-size: 1.6rem;
}

/*                   */
/* jkerr style patch */
/*                   */
.quiz.abanner.adetail.start-state {
    Height: auto;
    Min-height: calc(100vh - 229px);
}

.quiz.abanner .banner-angle-header {
    height: 100%;
}

.quiz.abanner .banner-image {
    height: 100%;
}

.quiz .omniquizIntro .step-button-panel {
    padding-bottom: 4rem;
}

.quiz.abanner header.start .quiz-body p {
    Font-size: 1.4rem;
}

.quiz .omniquizIntro .step-button-panel button {
    Transition: all .2s;
}

    .quiz .omniquizIntro .step-button-panel button:hover {
        background: #176d49;
    }

.quiz.abanner.done-state .banner-angle-header {
    Max-height: 757px;
}

.quiz.abanner.done-state .banner-image {
    Max-height: 757px;
}

.quiz-end-message.message.vis-when-done {
    Line-height: 1.3em;
}

.gauge-chart {
    width: 90%;
    max-width: 420px;
    Left: 50%;
    transform: translateX(-50%);
}

.quiz.done-state .share-title a:hover {
    Cursor: pointer;
}

.quiz .quiz-tags .tags {
    Padding: 20px 15px;
}

.social-link {
    top: 0;
}

@media(max-width: 768px) {
    .gauge-chart {
        position: relative;
        left: 0;
        margin: 0 auto;
        transform: none;
        top: 0;
    }

    .abanner .banner-angle {
        Background: none;
    }

    .abanner .banner-angle-header {
        background-color: transparent;
    }

    .quiz.abanner.done-state .banner-angle-header {
        background-color: transparent;
    }

    .quiz.abanner header.start {
        padding: 10vh 15px 0;
    }
    .quiz.abanner header.done .maintitle {
        color: #333;
        Text-shadow: none;
        font-size: 2.4rem;
    }

    .quiz-end-message.message.vis-when-done {
        font-size: 20px;
    }
}

.omniquizImageAnswerCaptions {
    Text-transform: none;
    Font-size: 20px;
    Font-weight: 400;
}

.aquiz .image-button {
    Padding: 20px;
    Border: 2px solid #355e93;
}

.aquiz .poster {
    Border-radius: 4px;
}

.aquiz .image-button:hover {
    background-color: rgba(52, 94,146, 0.3);
    border: solid rgba(52,94,146,.6) 2px;
    color: #355e93;
}

.omniquizTextOptions .btn {
    background-color: #fff;
    border-color: #355e93;
    Color: #355e93;
}

.omniquizTextAnswer.omniquizSelected, .omniquizTextAnswer.omniquizSelected:hover {
    background-color: #355e93 !important;
    border-color: #355e93 !important;
}

.omniquizTextAnswerWrap {
    Padding-top: 0;
}

.omniquizProgressBar .progress {
    Border-top-left-radius: 4px;
    Border-top-radius-radius: 4px;
}

.progress-bar {
    Border-radius: 0 4px 4px 0;
}

.omniquizQuestionContainer .row .omniquizTextAnswerImageWrap {
    padding-right: 15px;
}

.omniquizImageCard {
    border-radius: 4px;
}

.aquiz .step-button-panel .btn.btn-primary[disabled]:hover {
    background: #333;
}