/* CSS Basics/Reset */

.ptm-quiz, .ptm-quiz *
{
    margin:0;
    padding:0;
    border:0;
    box-sizing:border-box;
}

.ptm-quiz *:last-child
{
    margin-bottom:0;
}

.ptm-quiz
{
    min-height:100%;
    font-size:1rem;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:normal;
    font-style:normal;
    text-decoration:none;
    background-color:rgb(212,212,212);
    border:solid 1px rgb(192,192,192);
    color:rgb(0,0,0);
    max-width:640px;
    margin:0 auto 1em auto;
    padding:0.5em;
    text-align:left;
}

/* Override elements */

.ptm-quiz a
{
    color:rgb(255,99,71);
    text-decoration:underline;
}

.ptm-quiz input[type=button]
{
    display:inline-block;
    background-color:rgb(255,102,0);
    color:rgb(255,255,255);
    font-weight:bold;
    padding:0.25rem 0.75rem;
    font-size:0.8rem;
    outline:none;
    cursor:pointer;
    text-decoration:none;
    border-radius:0.2em;
}

.ptm-quiz input[type=button]:hover
{
    background-color:rgb(255,153,0);
    outline:none;
}

.ptm-quiz input[type=button]:active
{
    background-color:rgb(255,204,0);
    outline:none;
}

/* Re-Usable */

.ptm-quiz .off
{
    display:none;
}

/* Banner/Title */

.ptm-quiz .ptm-quiz-banner
{
    background-color:rgb(0,0,0);
    margin-bottom:0.5em;
    color:rgb(212,212,212);
    font-family:"Courier New",monotype;
    padding:0em;
}

.ptm-quiz .ptm-quiz-banner img
{
    max-width:100%;
    vertical-align:top;
}

.ptm-quiz .ptm-quiz-quiz-title
{
    background-color:rgb(149,239,150);
    padding:1rem;
    font-weight:bold;
    text-align:center;
    margin-bottom:0.5rem;
    font-size:1.5rem;
}

/* mode-welcome */

.ptm-quiz .ptm-quiz-welcome-message
{
    background-color:rgb(242,241,232);
    padding:0.5em;
}

.ptm-quiz .ptm-quiz-start
{
    border-top:solid 1px rgb(212,212,212);
    background:rgb(255,255,255);
    padding:0.5rem;
    text-align:center;
    margin-bottom:0.5rem;
}

/* mode-question - Question */

.ptm-quiz .ptm-quiz-mode-question
{
    margin-bottom:0.5em;
}

.ptm-quiz .ptm-quiz-mode-question .ptm-quiz-question
{
    display:flex;
    margin-bottom:0.5em;
}

.ptm-quiz .ptm-quiz-mode-question .ptm-quiz-question .ptm-quiz-num
{
    background-color:rgb(255,0,0);
    padding:1em;
    color:rgb(255,255,255);
    font-size:1.5em;
    font-weight:bold;
}

.ptm-quiz .ptm-quiz-mode-question .ptm-quiz-question .ptm-quiz-txt
{
    flex:1;
    background-color:rgb(251,165,44);
    padding:0.5rem 0.75em;
    font-size:1.25em;
    font-weight:bold;
    display:flex;
    justify-content:flex-start;
    align-items:center;
}

/* mode-question - Answers */

.ptm-quiz .ptm-quiz-mode-question .ptm-quiz-answers .ptm-quiz-answer
{
    background-color:rgb(255,255,255);
    padding:0.5em;
    color:rgb(0,0,0);
    margin-bottom:0.5em;
    text-align:left;
}

.ptm-quiz .ptm-quiz-mode-question .ptm-quiz-answers .ptm-quiz-answer:hover,
.ptm-quiz .ptm-quiz-mode-question .ptm-quiz-answers .ptm-quiz-answer:active
{
    background-color:rgb(175,216,229);
    cursor:pointer;
}

/* mode-question - Progress */

.ptm-quiz .ptm-quiz-mode-question .ptm-quiz-progress
{
    display:flex;
    padding:0.5em;
    background-color:rgb(255,255,255);
    align-items:center;
}

.ptm-quiz .ptm-quiz-mode-question .ptm-quiz-progress .ptm-quiz-bar
{
    flex:1;
    background-color:rgb(211,211,211);
    height:0.8em;
    overflow:hidden;
    margin-right:1em;
}

.ptm-quiz .ptm-quiz-mode-question .ptm-quiz-progress .ptm-quiz-bar .ptm-quiz-inner
{
    overflow:hidden;
    width:50%;
    background-color:rgb(149,239,150);
}

.ptm-quiz .ptm-quiz-mode-question .ptm-quiz-progress .ptm-quiz-txt
{
    font-weight:bold;
}


/* mode-result */

.ptm-quiz .ptm-quiz-mode-result
{
    margin-bottom:0.5rem;
}

.ptm-quiz .ptm-quiz-mode-result .ptm-quiz-title
{
    background-color:rgb(251,165,44);
    font-size:1.5em;
    padding:0.75rem;
    font-weight:bold;
    text-align:left;
}

.ptm-quiz .ptm-quiz-mode-result .ptm-quiz-desc-share
{
    background-color:rgb(242,241,232);
    padding:0.5em;
    display:flex;
}

.ptm-quiz .ptm-quiz-mode-result .ptm-quiz-description
{
    text-align:left;
    flex:1;
    margin-right:1rem;
}

.ptm-quiz .ptm-quiz-mode-result .ptm-quiz-share
{
    text-align:center;
    width:8rem;
    font-size:0.8em;
}

.ptm-quiz .ptm-quiz-mode-result .ptm-quiz-share-title
{
    margin-bottom:1em;
}

.ptm-quiz .ptm-quiz-mode-result .ptm-quiz-share a
{
    display:block;
    text-align:center;
    background-color:rgb(0,0,0);
    color:white;
    margin-bottom:1em;
    padding:1em;
}

.ptm-quiz .ptm-quiz-mode-result .ptm-quiz-share a.ptm-quiz-fb
{
    background-color:rgb(76,102,164);
}

.ptm-quiz .ptm-quiz-mode-result .ptm-quiz-share a.ptm-quiz-tt
{
    background-color:rgb(85,172,238);
}

.ptm-quiz .ptm-quiz-mode-result .ptm-quiz-try-again
{
    padding:0.5em;
    border-top:solid 1px rgb(212,212,212);
    background:rgb(255,255,255);
    text-align:center;
}

.ptm-quiz .ptm-quiz-footer
{
    text-align:right;
    font-size:0.75em;
}