/* Compact mobile quiz layout experiment. The control keeps the existing quiz. */
@media (max-width: 767px) {
    html.aiy-quiz-layout-compact .navbar {
        top: 0 !important;
        min-height: 40px;
        padding: 2px 12px;
        background-color: #1c1c1c !important;
    }

    html.aiy-quiz-layout-compact .navbar-brand {
        margin: 0;
        padding: 0;
        line-height: 1;
    }

    html.aiy-quiz-layout-compact .navbar .logo {
        width: auto !important;
        height: 36px !important;
    }

    html.aiy-quiz-layout-compact .navbar .navbar-toggler {
        top: 50%;
        right: 8px !important;
        width: 40px;
        height: 40px;
        padding: 6px;
        transform: translateY(-50%);
    }

    html.aiy-quiz-layout-compact main {
        padding-top: 40px !important;
    }

    html.aiy-quiz-layout-compact #loadq.jumbotron {
        padding: 0 !important;
    }

    html.aiy-quiz-layout-compact .quiz-intro-bar,
    html.aiy-quiz-layout-compact .quiz-factbar,
    html.aiy-quiz-layout-compact .quiz-bottomtext {
        display: none !important;
    }

    html.aiy-quiz-layout-compact .questiondiv > .container,
    html.aiy-quiz-layout-compact .questiondiv:not(#question1) > .container {
        max-width: 100%;
        padding: 0 14px 6px;
    }

    html.aiy-quiz-layout-compact .questiondiv > .container > .row {
        display: block;
        margin-left: 0;
        margin-right: 0;
    }

    html.aiy-quiz-layout-compact .questiondiv .col-md-5,
    html.aiy-quiz-layout-compact .questiondiv .col-md-6 {
        width: 100%;
        max-width: none;
        flex: none;
        padding-left: 0;
        padding-right: 0;
    }

    html.aiy-quiz-layout-compact .questiondiv .col-md-1,
    html.aiy-quiz-layout-compact .questiondiv .col-md-5 > .d-none {
        display: none !important;
    }

    html.aiy-quiz-layout-compact .questiondiv .col-md-5 img {
        display: block;
        width: 100% !important;
        height: auto;
        aspect-ratio: 1200 / 500;
        margin: 8px 0 0;
        border-radius: 0 !important;
        object-fit: cover;
    }

    html.aiy-quiz-layout-compact .questiondiv .col-md-5 > .d-md-none {
        height: 4px !important;
    }

    html.aiy-quiz-layout-compact .questiondiv .col-md-6 > br {
        display: none;
    }

    html.aiy-quiz-layout-compact .questiondiv h2 {
        margin: 4px 0 3px !important;
        color: #183a30;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 22px;
        font-weight: 700;
        letter-spacing: 1px;
        line-height: 1.05;
    }

    html.aiy-quiz-layout-compact .aiy-compact-progress {
        margin-top: 2px;
        color: #4a5851;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 1px;
        line-height: 1.2;
    }

    html.aiy-quiz-layout-compact .aiy-compact-back {
        float: right;
        min-height: 30px;
        margin-top: -5px;
        padding: 2px 8px;
        border: 1px solid #c28c12;
        border-radius: 3px;
        background: #d9a226;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
    }

    html.aiy-quiz-layout-compact .questiondiv h2::after {
        display: none;
    }

    html.aiy-quiz-layout-compact .questiondiv .text-muted {
        margin: 0 0 7px !important;
        color: #4d5852;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 15px !important;
        line-height: 1.3;
        text-align: left;
    }

    html.aiy-quiz-layout-compact .questiondiv .funkyradio > div {
        margin: 0 0 3px;
        overflow: visible;
    }

    html.aiy-quiz-layout-compact .questiondiv .funkyradio input[type="radio"]:empty ~ label,
    html.aiy-quiz-layout-compact .questiondiv .funkyradio input[type="checkbox"]:empty ~ label {
        min-height: 38px;
        margin: 0 !important;
        padding: 6px 8px 6px 34px !important;
        border: 1px solid #d9dfdb;
        border-radius: 5px;
        background: #fff;
        color: #29342e;
        font-size: 15px !important;
        line-height: 1.2 !important;
    }

    html.aiy-quiz-layout-compact .questiondiv .funkyradio input[type="radio"]:empty ~ label:before,
    html.aiy-quiz-layout-compact .questiondiv .funkyradio input[type="checkbox"]:empty ~ label:before {
        top: 50%;
        bottom: auto;
        left: 8px;
        width: 17px !important;
        height: 17px;
        transform: translateY(-50%);
        box-sizing: border-box;
        border: 1px solid #e4bf00 !important;
        border-radius: 0;
        background: #fff;
        content: '';
        text-indent: 0;
    }

    html.aiy-quiz-layout-compact .questiondiv .funkyradio input[type="radio"]:checked ~ label:before,
    html.aiy-quiz-layout-compact .questiondiv .funkyradio input[type="checkbox"]:checked ~ label:before {
        width: 17px !important;
        height: 17px;
        box-sizing: border-box;
        border: 1px solid #c69b00 !important;
        border-radius: 0;
        background: #e4bf00;
        color: #fff;
        content: '\2713';
        font-size: 11px;
        line-height: 11px;
        text-indent: 1px;
    }

    html.aiy-quiz-layout-compact .quiz-ad-wrap.aiy-quiz-layout-ad {
        width: 100%;
        max-width: 320px;
        margin: 3px auto 0 !important;
        text-align: center;
    }

    html.aiy-quiz-layout-compact .quiz-ad-wrap.aiy-quiz-layout-ad .adsbygoogle {
        display: block !important;
        width: 100% !important;
        height: 50px !important;
        min-height: 50px !important;
    }

    html.aiy-quiz-layout-compact .quiz-ad-wrap.aiy-quiz-layout-ad-100 .adsbygoogle {
        height: 100px !important;
        min-height: 100px !important;
    }

    html.aiy-quiz-layout-compact .aiy-quiz-layout-preview-label {
        margin-bottom: 4px;
        color: #7a817d;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 9px;
        letter-spacing: 1.5px;
        line-height: 1;
        text-align: center;
        text-transform: uppercase;
    }

    html.aiy-quiz-layout-compact .aiy-quiz-layout-preview-slot {
        width: 100%;
        max-width: 320px;
        height: 50px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #e9ebec;
        color: #66716e;
        font: 11px Arial, Helvetica, sans-serif;
        letter-spacing: 1px;
        text-align: center;
    }

    html.aiy-quiz-layout-compact .aiy-quiz-layout-ad-100 .aiy-quiz-layout-preview-slot {
        height: 100px;
    }
}