/* Widget wrapper */
.quizwidget {
    --ox-green: #44841a;
    --ox-green-aaa: #336114;
    --ox-orange: #f16e22;
    --ox-orange-dark: #9d4816;
    --ox-black: #545454;
    --ox-grey-light: #ececec;
    --ox-grey-mid: #CCCCCC;
    --ox-grey-dark: #545454;
    --ox-white: #fff;
    --ox-blue: #0b9cda;
    --ox-red: #FF1D34;
    margin: 10px auto 20px auto;
    --border-radius: 4px;
    --bottom-margin: 20px;
    max-width: 390px;
    width: 100%;
}

/* A couple of resets for consistency */
.quizwidget * {
    box-sizing: border-box;
    border: 0 solid;
}

/* CTA links */
.quizwidget-cta, a.quizwidget-cta {
    display: inline-block;
    position: relative;
    color: var(--ox-white);
    padding: 0.75rem 1em;
    font-size: 2.0rem;
    font-family: oxfam_tstar_proheadline,RobotoCondensed-Bold-webfont,Arial,sans-serif;
    text-decoration: none !important;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    margin-bottom: var(--bottom-margin);
    
}
.quizwidget-cta,
.quizwidget-cta:after {
    background-color: var(--ox-green);
}
.quizwidget-cta:after {
    content: "";
    position: absolute;
    display: block;
    right: -18px;
    top: -1px;
    bottom: 0;
    width: 26px;
    height: 102%;
    -webkit-clip-path: polygon(28% 0,93% 43%,97% 50%,93% 58%,28% 100%);
    clip-path: polygon(28% 0,93% 43%,97% 50%,93% 58%,28% 100%);
    /* transition: background .5s; */
}
.quizwidget-cta:hover:after,
.quizwidget-cta:hover {
    background-color: var(--ox-green-aaa);
}

/* Count */
.quizwidget-question-count{
    font-family: oxfam_tstar_proheadline,RobotoCondensed-Bold-webfont,Arial,sans-serif;
    font-size: 2.4rem;
    line-height: 1.0em;
}

/* Questions */
.quizwidget-question-text, p.quizwidget-question-text {
    flex-basis: 100%;
    font-size: 2.2rem;
    font-weight: bold;
    font-family: oxfam_tstar_proregular,RobotoCondensed-Bold-webfont,Arial,sans-serif;
}

/* Responses */
.quizwidget-response {
    font-family: oxfam_tstar_proregular,RobotoCondensed-Bold-webfont,Arial,sans-serif;
    font-size: 2.2rem;
    font-weight:bold;
    margin-top: 0px;
    margin-bottom: var(--bottom-margin);
    padding: 15px 25px;
    display: none;
}
.quizwidget-response p{
    font-size: 1.8rem;
    line-height: 1.5em;
    color: var(--ox-grey-dark);
    
}
.quizwidget-response p.result{
    font-size: 2.4rem;
    line-height: 1.0em;
    font-family: oxfam_tstar_proheadline,RobotoCondensed-Bold-webfont,Arial,sans-serif;
    margin-bottom:0;
    padding-bottom:10px;
}
.quizwidget-response.correct{
    background-color: #d7f3c4; /* 44841a lightened 80% */
    display: block;
}
.quizwidget-response.correct p.result{
    color: var(--ox-green);
}
.quizwidget-response.incorrect{
    background-color: #ffd2d6; /* FF1D34 lightened 80% */
    display: block;
}
.quizwidget-response.incorrect p.result{
    color: var(--ox-red );
}

/* Options/Multichoice */
.quizwidget-options,
.quizwidget-multiplechoice {
    margin: 0;
    padding: 15px 0;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-evenly;
}
.quizwidget-options li,
.quizwidget-multiplechoice li {
    list-style: none;
    flex: 1 0 0;
    flex-basis: 100%;
}
.quizwidget-options li > a,
.quizwidget-multiplechoice li > a {
    background-color: var(--ox-white);
    color: var(--ox-green);
    border-radius: var(--border-radius);
    padding: 15px 12px;
    text-align: center;
    text-decoration: none;
    border: 3px solid var(--ox-green);
    margin: 10px 0 0;
    height: calc(100% - 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    background:transparent;
    font-family: oxfam_tstar_proheadline,RobotoCondensed-Bold-webfont,Arial,sans-serif;
    font-size:5.4rem;
}
.quizwidget-options li > a.active,
.quizwidget-options li > a:hover,
.quizwidget-options li > a.correct,
.quizwidget-multiplechoice li > a.active,
.quizwidget-multiplechoice li > a:hover {
    background-color: var(--ox-green);
    border-color: var(--ox-green);
    transition: background-color 0.5s;
    color: var(--ox-white);
}
.quizwidget-options a.disabled,
.quizwidget-multiplechoice a.disabled,
.quizwidget-options a.disabled:hover,
.quizwidget-multiplechoice a.disabled:hover{
    background-color: var(--ox-grey-mid);
    border-color: var(--ox-grey-mid);
    transition: background-color 0.5s;
    color: var(--ox-white);
}
.quizwidget-options a.disabled.active,
.quizwidget-multiplechoice a.disabled.active,
.quizwidget-options a.disabled.active:hover,
.quizwidget-multiplechoice a.disabled.active:hover{
    background-color: var(--ox-red);
    border-color: var(--ox-red);
    transition: background-color 0.5s;
    color: var(--ox-white);
    background-image: url('images/close_white_24dp.svg');
    background-repeat: no-repeat;
    background-position: right;
}
.quizwidget-options a.correct.disabled,
.quizwidget-multiplechoice a.correct.disabled,
.quizwidget-options a.correct.disabled:hover,
.quizwidget-multiplechoice a.correct.disabled:hover{
    background-color: rgba(68, 132, 26,0.4);
    border-color: transparent;
    transition: background-color 0.5s;
    color: var(--ox-white);
    background-image: url('images/done_white_24dp.svg');
    background-repeat: no-repeat;
    background-position: right;
}
.quizwidget-options a.active.correct.disabled,
.quizwidget-multiplechoice a.active.correct.disabled,
.quizwidget-options a.active.correct.disabled:hover,
.quizwidget-multiplechoice a.active.correct.disabled:hover{
    background-color: var(--ox-green);
    border-color: var(--ox-green);
    transition: background-color 0.5s;
    color: var(--ox-white);
    background-image: url('images/done_white_24dp.svg');
    background-repeat: no-repeat;
    background-position: right;
}

/* Disabled fields */
.quizwidget a.disabled:hover {
    cursor: default;
}
/*
.quizwidget li a.active.disabled{
    opacity:100%;
}
.quizwidget li a.active.correct.disabled{
    opacity: 100%;
}
.quizwidget li a.correct.disabled{
    opacity: 40%;
}*/

/* Submit buttons */
.quizwidget-submit {
    display: block;
    background-color: var(--ox-green);
    color: var(--ox-white);
    border-radius: var(--border-radius);
    text-align: center;
    text-decoration: none !important;
    margin: 15px 0;
    text-transform:uppercase;
    font-weight: bold;
    font-size: 1.4rem;
    border-style: solid;
    padding: 20px 20px;
}
.quizwidget-submit:hover {
    background-color: var(--ox-blue);
    color: var(--ox-white);
}

/* Textareas */
.quizwidget textarea {
    width: 100%;
    min-height: 50px;
}

/* General inputs */
.quizwidget input[type="number"],
.quizwidget input[type="text"] {
    border: 1px solid var(--ox-grey-dark);
    border-radius: var(--border-radius);
    padding: 10px;
}
.quizwidget input[type="number"] {
    width: 80px;
    text-align: center;;
}

/* Label */
.quizwidget label {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

/* Flex */
.quizwidget .flex {
    display: flex;
    gap: 20px;
    align-items: center;
}
.quizwidget-next-wrapper{
    text-align: right;
    display:none;
}
.quizwidget-next:after{
    content: '\e409';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
    font-family: Material Symbols Outlined;
    vertical-align: bottom;
}

/* Multiple Choice */
.quizwidget-style-mc p.quizwidget-question-text{}
.quizwidget-style-mc ul.quizwidget-options li{
    
}
.quizwidget-style-mc ul.quizwidget-options li a{
    padding: 0px;
    font-size: 2.4rem;
    line-height: 1em;
    padding: 0.5em;
}
/* True/False */
.quizwidget-style-tf p.quizwidget-question-text{}
.quizwidget-style-tf ul.quizwidget-options li{
    
}
.quizwidget-style-tf ul.quizwidget-options li a{
    padding: 0px;
    font-size: 2.4rem;
    line-height: 1em;
    padding: 0.5em;
}
/* Quotes */
.quizwidget-style-quote p.quizwidget-question-text{
    position: relative;
    padding: 15px;
    margin: 1em 0 3em;
    border: 5px solid #44841a;
    color: #333;
    background: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    }
.quizwidget-style-quote  p.quizwidget-question-text::before {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 40px;
    border-width: 20px 20px 0;
    border-style: solid;
    border-color: #44841a transparent;
    display: block;
    width: 0;
}
.quizwidget-style-quote p.quizwidget-question-text::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 47px;
    border-width: 13px 13px 0;
    border-style: solid;
    border-color: #fff transparent;
    display: block;
    width: 0;
}


.quizwidget-style-quote ul.quizwidget-options{
    justify-content:space-evenly;
}
.quizwidget-style-quote ul.quizwidget-options li{
    width: 100px;
    max-width:100px;
    height: 100px;
    background-size: contain;
    border-radius: 50px;
    opacity:75%;
}
.quizwidget-style-quote ul.quizwidget-options li a{
    background: transparent;
    border: 0;
    padding-top: 120px;
    font-size: 2.2rem;
    line-height: 1em;
}
.quizwidget-style-quote ul.quizwidget-options li a:hover{
    color: #44841a;
    background: transparent;
}
.quizwidget-style-quote ul.quizwidget-options li:hover,
.quizwidget-style-quote ul.quizwidget-options li.correct{
    opacity:100%;
    border:2px solid #44841a;
}
.quizwidget-style-quote ul.quizwidget-options li > a.active, 
.quizwidget-style-quote ul.quizwidget-options li > a.disabled{
    background:transparent;
    border:0;
}
.quizwidget-style-quote ul.quizwidget li a.disabled:not(.correct), 
.quizwidget-style-quote .quizwidget a.disabled:not(.correct){
    background:transparent;
    border:0;
}
.quizwidget-style-quote ul.quizwidget-options li > a.correct{
    color: #44841a;
    opacity:100%;
}

.quizwidget-style-quote ul.quizwidget-options li:first-of-type{
    background-image: url(https://buckup-oxfamamerica-devstaging.s3.amazonaws.com/media/images/musk.original.jpg);
}
.quizwidget-style-quote ul.quizwidget-options li:nth-of-type(2) {background-image: url(https://buckup-oxfamamerica-devstaging.s3.amazonaws.com/media/images/bezos.original.jpg);
}
.quizwidget-style-quote ul.quizwidget-options li:nth-of-type(3) {background-image: url(https://buckup-oxfamamerica-devstaging.s3.amazonaws.com/media/images/buffet.original.jpg);
}
.quizwidget-style-quote ul.quizwidget-options li:nth-of-type(4) {background-image: url(https://buckup-oxfamamerica-devstaging.s3.amazonaws.com/media/images/bloomberg.original.jpg);
}
.quizwidget-style-quote .quizwidget-response{
    margin-top: 60px;
}
.quizwidget-style-quote:before{
    content: "Who said it?";
    font-family: oxfam_tstar_proheadline,RobotoCondensed-Bold-webfont,Arial,sans-serif;
    font-size: 2.2rem;
}

/* hide all the ctas except last one */
.quizwidget .quizwidget-question-type-options .quizwidget-cta-wrapper{
    display:none;
}
.quizwidget .quizwidget-question-type-options:nth-of-type(7) .quizwidget-cta-wrapper{
    display:block;
    text-align: center;
}
.quizwidget .quizwidget-question-type-options:nth-of-type(7) .quizwidget-cta-wrapper a.callout-cta__quiz__link{
    display:inline-block;
}
p.cta-headline{
    font-family: oxfam_tstar_proheadline,RobotoCondensed-Bold-webfont,Arial,sans-serif;
    color: var(--ox-green);
    font-size:4.8rem;
    line-height:1.0em;
    margin-bottom:10px;
    margin-top:40px;
}
p.cta-copy{
    font-size:2.0rem;
    line-height:1.5em;
    font-weight:bold;
    font-family: oxfam_tstar_proregular,RobotoCondensed-Bold-webfont,Arial,sans-serif;
}