.mqz-question{margin:12px;padding:12px;border:1px solid #ddd;border-radius:6px;background:#fff;}
.mqz-result{margin-top:12px;padding:12px;border:1px solid #eee;background:#fafafa;}

#quizContainer {}

    #mqzHeader {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px 4px;
        background: rgb(235, 244, 255);
        box-shadow: rgba(0, 0, 0, 0.07) 0px -1px 0px 0px inset;
        height: 60px;
    }

    #mqzHeader.qwrong {
        background-color: rgb(255, 90, 96);
        color: rgb(255, 255, 255);
    }

    #mqzHeader.qcorrect {
        background-color: rgb(110, 180, 98);
    }

    #mqzHeader .pagination {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

        #mqzHeader .pagination > span {
            font-size: 14px;
            line-height: 19px;
            margin: 0px 10px;
        }

    #mqzContent {
       display: grid;
       position: relative;
    }

    .mqzInnerContainer,
    #mqzExplanation {
        grid-area: 1 / 1;
    }

    .mqzInnerContainer {
        z-index: 1;
        margin: 0;
        padding: 0;
        background: rgb(235, 244, 255);
    }

        #mqzQuestion {
            padding: 10px;
            box-shadow: rgba(0, 0, 0, 0.07) 0px -1px 0px 0px inset;
            /* background: rgb(255, 255, 255); */
            background: rgb(235, 244, 255);
        }

    .mqzSidePanel {
        position: absolute; 
        display: flex;
        justify-content: flex-end;
        top: 0;
        bottom: 0;
        right: 0;
        border: none;
        width: 45%;
        z-index: 2;             
        padding: 0;           
        box-sizing: border-box;
        overflow-y: visible;
        visibility: visible;
        transition: all 0.4s ease-in-out;
        background: transparent;
    }
    

    .mqzSidePanel.closed {
        width: 0;
        visibility: collapse;
    }

        .sidePanelInner {
            display: flex;
            flex-direction: column;
            background-color: rgb(255, 255, 255);
            box-shadow: -4px 0 12px rgba(0,0,0,0.15);
            width: 100%;
        }

         .mqzSidePanel.closed .sidePanelInner {}

            .sidePanelHeader {
                padding-right: 20px;
                display: flex;
                flex-wrap: nowrap;
                justify-content: space-between;
                align-items: center;
                gap:20px;
                box-shadow: rgba(0, 0, 0, 0.07) 0px -1px 0px 0px inset;
            }

                .sidePanelHeader button {
                    border: none;
                    width: 44px;
                    height: 44px;
                    background-color: rgb(255, 255, 255);
                    cursor: pointer;
                }

                    .sidePanelHeader button span {
                        display: inline-block;
                        mask-image: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M18.8112%206.24953C19.1041%205.95664%2019.1041%205.48177%2018.8112%205.18887C18.5183%204.89598%2018.0434%204.89598%2017.7505%205.18887L12%2010.9394L6.24947%205.18887C5.95658%204.89598%205.48171%204.89598%205.18881%205.18887C4.89592%205.48177%204.89592%205.95664%205.18881%206.24953L10.9393%2012.0001L5.18886%2017.7505C4.89597%2018.0434%204.89597%2018.5183%205.18886%2018.8112C5.48176%2019.1041%205.95663%2019.1041%206.24952%2018.8112L12%2013.0607L17.7505%2018.8112C18.0434%2019.1041%2018.5182%2019.1041%2018.8111%2018.8112C19.104%2018.5183%2019.104%2018.0434%2018.8111%2017.7505L13.0607%2012.0001L18.8112%206.24953Z'%20fill='black'/%3e%3c/svg%3e");
                        mask-repeat: no-repeat;
                        mask-size: contain;
                        width: 24px;
                        height: 24px;
                        mask-position: center center;
                        background-color: rgb(95, 141, 160);
                    }

                .sidePanelHeader h3 {
                    margin: 0;
                    padding: 0;
                    font-size: 14px;
                    font-weight: bold;
                    color: rgb(33, 33, 33);
                }

            .sidePanelInner .sidePanelContent {
                padding: 0 10px;
                background-color: rgb(255, 255, 255);
                overflow-y: auto;
                flex: 1;                
                padding-right: 10px;
            }

#mqzAnswers {
    background-color: rgb(235, 244, 255);
}

#mqzAnswers ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 0;
    padding: 0 !important;
    font-family:  sans-serif;
}

    #mqzAnswers ul li {
        display: block;
    }

#mqzAnswers label {
    display: flex;
    gap: 16px;
    padding: 14px 16px;
    margin-bottom: 4px;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    box-shadow: rgba(0, 66, 142, 0.04) 0px 1px 4px, rgba(0, 59, 126, 0.02) 0px 4px 16px;
}

#mqzAnswers label:hover {
    background-color: rgb(246, 246, 246);
}

    #mqzAnswers span.answer {
        margin-top: 4px;
        flex: 1 1 0%;
    }

    #mqzAnswers label div.selector {
        box-sizing: border-box;
        display: inline-block;
        width: 24px;
        height: 24px;
        padding: 3px;
        cursor: pointer;
    }

        #mqzAnswers label div.selector input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }


        #mqzAnswers label div.selector input + span {
            position: relative;
            box-sizing: border-box;
            display: inline-block;
            width: 18px;
            height: 18px;
            box-shadow:rgba(0, 0, 0, 0.2) 0px 0px 0px 1.5px inset;
            transition-property: background-color, border, box-shadow, color, opacity;
            border-radius: 50%;
            background: transparent;
            outline-color: rgb(33, 33, 33);
            color:rgb(33, 33, 33);
        }

         #mqzAnswers label div.selector input:checked + span {
            background-color: rgb(255, 205, 87);
            box-shadow: none;
         }

        #mqzAnswers label div.selector input:checked + span::after {
            position: absolute;
            content: "";
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            mask-image: url("data:image/svg+xml,%3csvg%20width='10'%20height='10'%20viewBox='0%200%2010%2010'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M9.35207%203.08453C9.64496%202.79164%209.64496%202.31676%209.35207%202.02387C9.05917%201.73098%208.5843%201.73098%208.29141%202.02387L3.415%206.90028L1.7503%205.23557C1.45741%204.94268%200.982534%204.94268%200.68964%205.23557C0.396748%205.52847%200.396747%206.00334%200.68964%206.29624L2.70789%208.31449C3.09842%208.70501%203.73158%208.70501%204.12211%208.31449L9.35207%203.08453Z'%20fill='%23212121'/%3e%3c/svg%3e");
            mask-repeat: no-repeat;
            mask-size: contain;
            width: 10px;
            height: 10px;
            transition-property: background-color, border, box-shadow, color, opacity;
            mask-position: center center;
            background-color: black;
        }

        li[data-correct="true"] div.selector input:checked + span {
            background-color: rgb(110, 180, 98) !important;
        }

        li[data-correct="true"] div.selector input:checked + span::after {
            background-color: rgb(255, 255, 255) !important;
        }

        li[data-correct="true"] div.selector input:not(:checked) + span {
            box-shadow: rgb(110, 180, 98) 0px 0px 0px 1.5px inset !important;
            background-color: rgb(255, 255, 255) !important;
        }

        li[data-correct="true"] div.selector input:not(:checked) + span::after {
            position: absolute;
            content: "";
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            mask-image: url("data:image/svg+xml,%3csvg%20width='10'%20height='10'%20viewBox='0%200%2010%2010'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M9.35207%203.08453C9.64496%202.79164%209.64496%202.31676%209.35207%202.02387C9.05917%201.73098%208.5843%201.73098%208.29141%202.02387L3.415%206.90028L1.7503%205.23557C1.45741%204.94268%200.982534%204.94268%200.68964%205.23557C0.396748%205.52847%200.396747%206.00334%200.68964%206.29624L2.70789%208.31449C3.09842%208.70501%203.73158%208.70501%204.12211%208.31449L9.35207%203.08453Z'%20fill='%23212121'/%3e%3c/svg%3e");
            mask-repeat: no-repeat;
            mask-size: contain;
            width: 10px;
            height: 10px;
            transition-property: background-color, border, box-shadow, color, opacity;
            mask-position: center center;
            background-color: rgb(110, 180, 98);
        }

        li[data-correct="false"] div.selector input:checked + span {
            background-color: rgb(255, 90, 96) !important;
        }

        li[data-correct="false"] div.selector input:checked + span::after {
            position: absolute;
            content: "";
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            mask-image: url("data:image/svg+xml,%3csvg%20width='10'%20height='10'%20viewBox='0%200%2010%2010'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8.35876%202.70189C8.65165%202.40899%208.65165%201.93412%208.35876%201.64123C8.06586%201.34833%207.59099%201.34833%207.2981%201.64123L5%203.93933L2.7019%201.64123C2.40901%201.34833%201.93414%201.34833%201.64124%201.64123C1.34835%201.93412%201.34835%202.409%201.64124%202.70189L3.93934%204.99999L1.64124%207.29808C1.34835%207.59097%201.34835%208.06585%201.64124%208.35874C1.93414%208.65164%202.40901%208.65164%202.7019%208.35874L5%206.06065L7.2981%208.35874C7.59099%208.65164%208.06586%208.65164%208.35876%208.35874C8.65165%208.06585%208.65165%207.59098%208.35876%207.29808L6.06066%204.99999L8.35876%202.70189Z'%20fill='black'/%3e%3c/svg%3e");
            width: 10px;
            height: 10px;
            transition-property: background-color, border, box-shadow, color, opacity;
            mask-position: center center;
            background-color: rgb(255, 255, 255) !important;
        }

    #mqzAnswers label span.answer {
        font-size: 14px;
        font-weight: 500;
    }

    #mqzAnswers label span.number {
        font-size: 12px;
    }

#mqzMenuBar {
    padding-top: 20px;
    padding-bottom: 10px;
    border-top: 1px solid rgb(33, 33, 33);
    display: flex;
    align-items: center;
    flex: 1 1 0%;
    justify-content: space-between;
    flex-direction: row-reverse;
    background-color: rgb(235, 244, 255);
}

   #mqzMenuBar  button {
        display: inline-flex;
        box-sizing: border-box;
        padding: 0px 32px 0px 28px;
        -webkit-box-align: center;
        align-items: center;
        justify-content: center;
        height: 44px;
        line-height: 1;
        border: none;
        border-radius: 44px;
        font-size: 14px;
    }

    #mqzMenuBar button.hidden {
        display: none;
    }

    #mqzMenuBar button.mqzSubmit {
        background-color: rgb(255, 205, 87);
    }

    #mqzMenuBar button.mqzExplain {
        background-color: rgb(255, 255, 255);
    }
            
        #mqzMenuBar button span {
            display: inline-block;
            mask-repeat: no-repeat;
            mask-size: contain;
            mask-position: center center;
            margin-right: 4px;
            width: 24px;
            height: 24px;
        }

        #mqzMenuBar button.mqzExplain span {
            mask-image: url("data:image/svg+xml,%3csvg%20width='25'%20height='24'%20viewBox='0%200%2025%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12.5%209.98022C12.9142%209.98022%2013.25%2010.316%2013.25%2010.7302V16.3066C13.25%2016.7208%2012.9142%2017.0566%2012.5%2017.0566C12.0858%2017.0566%2011.75%2016.7208%2011.75%2016.3066V10.7302C11.75%2010.316%2012.0858%209.98022%2012.5%209.98022Z'%20fill='%231178EF'/%3e%3cpath%20d='M12.5021%209.11011C13.0919%209.11011%2013.57%208.63198%2013.57%208.04218C13.57%207.45237%2013.0919%206.97424%2012.5021%206.97424C11.9123%206.97424%2011.4342%207.45237%2011.4342%208.04218C11.4342%208.63198%2011.9123%209.11011%2012.5021%209.11011Z'%20fill='%231178EF'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M12.5%2021C17.4706%2021%2021.5%2016.9706%2021.5%2012C21.5%207.02944%2017.4706%203%2012.5%203C7.52944%203%203.5%207.02944%203.5%2012C3.5%2016.9706%207.52944%2021%2012.5%2021ZM12.5%2019.5C16.6421%2019.5%2020%2016.1421%2020%2012C20%207.85786%2016.6421%204.5%2012.5%204.5C8.35786%204.5%205%207.85786%205%2012C5%2016.1421%208.35786%2019.5%2012.5%2019.5Z'%20fill='%231178EF'/%3e%3c/svg%3e");
            background-color: rgb(245, 171, 0);
        }

        #mqzMenuBar button.mqzSubmit span {
            mask-image: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M18.2327%206.31323C18.6469%206.31323%2018.9827%206.64902%2018.9827%207.06323L18.9827%2014.298C18.9827%2014.7122%2018.6469%2015.048%2018.2327%2015.048L6.9905%2015.048L8.94657%2017.0041C9.23947%2017.297%209.23947%2017.7719%208.94657%2018.0648C8.65368%2018.3577%208.17881%2018.3577%207.88591%2018.0648L4.67852%2014.8574C4.67373%2014.8526%204.66902%2014.8477%204.66438%2014.8429C4.66013%2014.8388%204.65592%2014.8347%204.65174%2014.8305C4.35884%2014.5376%204.35884%2014.0627%204.65174%2013.7698L7.85913%2010.5624C8.15202%2010.2695%208.6269%2010.2695%208.91979%2010.5624C9.21268%2010.8553%209.21268%2011.3302%208.91979%2011.6231L6.99486%2013.548L17.4827%2013.548L17.4827%207.06323C17.4827%206.64902%2017.8185%206.31323%2018.2327%206.31323Z'%20fill='black'/%3e%3c/svg%3e");
            background-color: rgb(33, 33, 33);
        }

         #mqzMenuBar button.mqzSubmit:disabled span {
            background-color: rgba(16, 16, 16, 0.3);
         }