/**
 * Green theme with buttons-like radio/checkboxes and fixed elements
 */

/* Question content */
.question-content {
    background-color: #F5F7F8;
    padding: 1rem 1rem;
}

/* Custom Scrollbar */
body::-webkit-scrollbar, ul.watupro-paginator::-webkit-scrollbar {
    width: 11px;
}
body {
    scrollbar-width: thin;
    scrollbar-color: #8cc63f #fafafa;
}
body::-webkit-scrollbar-track, ul.watupro-paginator::-webkit-scrollbar-track {
    background: #fafafa;
}
body::-webkit-scrollbar-thumb, ul.watupro-paginator::-webkit-scrollbar-thumb {
    background-color: #8cc63f ;
    border-radius: 6px;
    border: 3px solid #fafafa;
}

@media print { body { display:none } }

.rewind-down
{
	display: none !important;
}

.rewind-up
{
	display: none !important;
}

.watupro-sortable {
    margin: 0 auto;
}
.watupro-sortable li {
    list-style: none;
}

.watupro-nmatrix-selected {
    border-color: #8cc63f;
    border-radius: 4px;
}

.watupro-nmatrix-unselect {
    color: #8cc63f;
    font-size: 80%;
}

/* This theme displays single-choice and multiple-choice questions as buttons instead of visible radio buttons or checkboxes */
.watupro-user-feedback, .watupro-textarea-medium, .watupro-text, .watupro-gap {
    border: 1pt solid #8cc63f !important;
    background-color : rgba(117, 255, 117, 0.16) !important;
    color: #8cc63f !important;
}

/* buttons */
.watupro_buttons input[type=button],
.watupro_buttons input[type=submit],
.watupro-exam-description button,
.watupro-start-quiz  {
    display: inline-block;
    margin-bottom: 0;
    *margin-left: .3em;
    text-align: center;
    vertical-align: middle;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    *zoom: 1;
    cursor:pointer;
    color: #ffffff;
    font-weight: bold;
    background-color: #8cc63f;
    border: 1px solid #8cc63f;
    line-height: 20px; /* Need this to reset heights after Beaver Theme 1.7.6 that started a height theme option */
}

.watupro_buttons input[type=button]:hover,
.watupro_buttons input[type=submit]:hover,
.watupro-exam-description button:hover,
.watupro-start-quiz:hover {
    background-color: #749D49;
    border: 1px solid #749D49;
}

/* Need this to override default Beaver Theme button size */
.watupro_buttons input[type=submit]
{
	font-size: 14px;
}

.watupro-start-quiz {
    padding: 0.5em 1em !important;
    line-height: 18px;
    font-size: 1.1em;
}

.watupro_buttons input[type=button]:hover,
.watupro_buttons input[type=submit]:hover,
.watupro-exam-description button:hover,
.watupro-start-quiz:hover {
    background-color: #8cc63f;
    position: relative;
    top: 0px !important;
}

.watupro_buttons input[type=button]:focus:active,
.watupro_buttons input[type=submit]:focus:active,
.watupro-start-quiz:focus:active {
    outline: none !important;
    outline-offset: 0px !important;
    background-color: #8cc63f !important;
    position: relative;
    top: 0px !important;
}

/* Radio and checkboxes
/* thanks to http://viralpatel.net/blogs/css-radio-button-checkbox-background/ */
.watupro-question-choice input[type=radio],
.watupro-question-choice input[type=checkbox] {
    display:none !important;
}

.watupro-question-choice input[type=radio] + label,
.watupro-question-choice input[type=checkbox] + label {
    margin: 0.25em 0 0 auto;
    padding: 0.5em 0.75em;
    font-size: 1em;
    color: #333;
/*    text-align: left; */
    vertical-align: middle;
    cursor: pointer;
    border: 3px solid #4d4c4d;
    border-radius: 2px;
}

.watupro-question-choice input[type=radio]:checked + label,
.watupro-question-choice input[type=checkbox]:checked + label {
    background-image: none;
    background-color:#F1D37B;
    color: #000;
    /* double border */
    border: 2px solid #fff;
    outline: 2px solid #EAB536;
}

.watupro-question-choice.watupro-ansnum input[type=radio] + label,
.watupro-question-choice.watupro-ansnum input[type=checkbox] + label {
    max-width: calc(100% - 2.5em);
    width: calc(100% - 3em);
}

.watupro_buttons tr {
    border-bottom: none;
}

/* Radio and checkbox columns*/
.watupro-2-columns > *, li.watupro-2-columns > *,
.watupro-3-columns > *, li.watupro-3-columns > *,
.watupro-4-columns > *, li.watupro-4-columns > * {
    display: inline-block;
}

.watupro-question-choice.watupro-ansnum i {
    width: 2em;
    vertical-align: top;
    padding-top: 0.55em;
}

.watupro-ansnum.watupro-2-columns, li.watupro-ansnum.watupro-2-columns,
.watupro-ansnum.watupro-3-columns, li.watupro-ansnum.watupro-3-columns,
.watupro-ansnum.watupro-4-columns, li.watupro-ansnum.watupro-4-columns {
    padding-left: 0.5em;
    padding-right: 0;
}

.watupro-ansnum.watupro-2-columns:first-of-type,
.watupro-ansnum.watupro-3-columns:first-of-type,
.watupro-ansnum.watupro-4-columns:first-of-type,
.watupro-ansnum.watupro-2-columns:nth-of-type(2n+1),
.watupro-ansnum.watupro-3-columns:nth-of-type(3n+1),
.watupro-ansnum.watupro-4-columns:nth-of-type(4n+1) {
    padding-left: 0;
}

/* progress bar */
.watupro-progress-container {
    position: fixed;
    right: 10px;
    top: 6px;
    width: 15%; /* old 30% */
    margin-left: 3%;
    z-index: 9999999;
    max-height: 20px;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.1);
}

/* The Admin bar doesn\'t show, don\'t need this offset
body.logged-in .watupro-progress-container {
    top:40px;
} */

.watupro-progress-bar {
    border-radius: 10px;
    background-color: #8cc63f;
    height: 20px;
    overflow: hidden;
    min-width: 20px !important;
    position: relative;
}

.watupro-progress-percent {
    color: #8cc63f;
    padding: 0 0;
    text-align: center;
    background: #fff;
    font-weight: bold;
    border-radius: 10px;
    font-size: 10px;
    height: 20px;
    line-height: 20px;
    border: 1px solid #8cc63f;
    display: inline-block;
    vertical-align: top;
    position: absolute;
    right: 0px;
}

.watupro-progress-percent:before {
    content: \'\\00A0\';
    width: 0;
    height: 0;
}

/* Columns */
.watupro-2-columns label,
.watupro-3-columns label,
.watupro-4-columns label {
    width: auto;
}

/* Paginator */
ul.watupro-paginator {
    justify-content: center;
    margin: 0em auto;
}

ul.watupro-category-paginator {
    justify-content: center;
}

ul.watupro-paginator li {
    flex-grow: 0; /* 1 if you want the remaining space in the container will be distributed equally to all buttons */
    color: #ffffff;
    background-color: #8cc63f;
    *zoom: 1;
    height: auto;
    border-radius: 0;
    padding: 0.25em 1em 0.25em 0;
    clip-path: polygon(0% 0%, 75% 0%, 75% 100%, 0% 100%); /* clip 25% right side, triangle in active state */
}

ul.watupro-category-paginator li {
    flex-grow: 0; /* 1 if you want the remaining space in the container will be distributed equally to all buttons */
}

ul.watupro-paginator li.answered {
    color: #ffffff;
    background-color: #4D4C4D;
    position: relative;
}

/* Folded Corner Effect */
ul.watupro-paginator li.answered:before, ul.watupro-paginator li.answered.active:before {
    content: \"\";
    position: absolute;
    top: 0%;
    left: 0%;
    width: 0px;
    height: 0px;
    border-bottom: 10px solid #BAC4CB;
    border-left: 10px solid transparent;
    -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
}

ul.watupro-paginator li.answered {
    clip-path: polygon(10px 0%, 75% 0%, 75% 100%, 0 100%, 0% 10px);
}


ul.watupro-paginator li.unanswered {
    background: #8cc63f; /* background: #8cc63f; */
    color: #ffffff;
}

ul.watupro-paginator li.active {
    border: none !important;
    background: #c5e29f !important;
    position: relative;
    border-top-right-radius: unset;
    border-bottom-right-radius: unset;
    outline: none !important; /* Need to override the outline for unanswered questions if it\'s currently active */
    padding: 0.25em 1em 0.25em 0;
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%); /* arrow effect */
}

ul.watupro-paginator li.answered.active:after {
    border-left-color: #4D4C4D;
    border-top: 10px solid #fff;
    border-right: 10px solid transparent;
}

ul.watupro-paginator li.active.answered {
    background: #4D4C4D !important;
    clip-path: polygon(10px 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 0% 10px)
}

/* Have to override this or the marked questions disappear */
ul.watupro-paginator li.marked {
	border: none !important;
    background-color: #8cc63f !important;
    /* flag */
    background-image: url(\"data:image/svg+xml,%3Csvg aria-hidden=\'true\' focusable=\'false\' data-prefix=\'fas\' data-icon=\'flag\' class=\'svg-inline--fa fa-flag fa-w-16\' role=\'img\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 512 512\'%3E%3Cpath fill=\'white\' d=\'M349.565 98.783C295.978 98.783 251.721 64 184.348 64c-24.955 0-47.309 4.384-68.045 12.013a55.947 55.947 0 0 0 3.586-23.562C118.117 24.015 94.806 1.206 66.338.048 34.345-1.254 8 24.296 8 56c0 19.026 9.497 35.825 24 45.945V488c0 13.255 10.745 24 24 24h16c13.255 0 24-10.745 24-24v-94.4c28.311-12.064 63.582-22.122 114.435-22.122 53.588 0 97.844 34.783 165.217 34.783 48.169 0 86.667-16.294 122.505-40.858C506.84 359.452 512 349.571 512 339.045v-243.1c0-23.393-24.269-38.87-45.485-29.016-34.338 15.948-76.454 31.854-116.95 31.854z\'%3E%3C/path%3E%3C/svg%3E\");
    background-position: 60% center;
    background-repeat: no-repeat;
    background-size: 8px;
}

ul.watupro-paginator li.active.marked {
    /*background-color: #4D4C4D !important;*/
    /* flag */
    background-image: url(\"data:image/svg+xml,%3Csvg aria-hidden=\'true\' focusable=\'false\' data-prefix=\'fas\' data-icon=\'flag\' class=\'svg-inline--fa fa-flag fa-w-16\' role=\'img\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 512 512\'%3E%3Cpath fill=\'white\' d=\'M349.565 98.783C295.978 98.783 251.721 64 184.348 64c-24.955 0-47.309 4.384-68.045 12.013a55.947 55.947 0 0 0 3.586-23.562C118.117 24.015 94.806 1.206 66.338.048 34.345-1.254 8 24.296 8 56c0 19.026 9.497 35.825 24 45.945V488c0 13.255 10.745 24 24 24h16c13.255 0 24-10.745 24-24v-94.4c28.311-12.064 63.582-22.122 114.435-22.122 53.588 0 97.844 34.783 165.217 34.783 48.169 0 86.667-16.294 122.505-40.858C506.84 359.452 512 349.571 512 339.045v-243.1c0-23.393-24.269-38.87-45.485-29.016-34.338 15.948-76.454 31.854-116.95 31.854z\'%3E%3C/path%3E%3C/svg%3E\") !important;
    background-position: 60% center !important;
    background-repeat: no-repeat !important;
    background-size: 8px !important;
}

ul.watupro-paginator li.marked.unanswered, ul.watupro-paginator li.activemarked.unanswered {
    background-color: #8cc63f !important;
}
ul.watupro-paginator li.marked.answered {
    background-color: #4D4C4D !important;
}

/* Add a black outline around unanswered questions */ /*
ul.watupro-paginator li.unanswered {
    outline: 3px #ed8c32 solid;
}*/

ul.watupro-category-paginator li.active {
    -webkit-transform: scaleY(1.1) scaleX(1.02) translateY(-1px);
    -ms-transform: scaleY(1.1) scaleX(1.02) translateY(-1px);
    transform: scaleY(1.1) scaleX(1.02) translateY(-1px);
}

.watupro-auto-hide-handler li, .watupro-auto-hide-handler-hide li {
    font-size: 11px;
    line-height: 1;
}

.watupro-auto-hide-handler li a, .watupro-auto-hide-handler-hide li a {
    color: #fff;
}

/**
 *  from plugin style.css
 */

.watu-question {
    /*height: 600px;
    overflow: scroll;*/
}

.watupro_buttons {
    background-color: #4d4c4d;
    padding: 0.25rem;
    border-top: 3px solid #8cc63f !important;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

.watupro_buttons input[type=\"button\"],
.watupro_buttons input[type=\"submit\"] {
    font-size: 1em !important;
    padding: 0.5em 1em;
}

.watupro_buttons #next-question {
    position: relative;
    width: auto;
}

.watupro_buttons #next-question input[type=button]:hover,
.watupro_buttons #prev-question input[type=button]:hover,
.watupro_buttons input[type=submit]:hover,
.watupro_buttons input[type=\"button\"]:hover {
    color: rgba(255,255,255,0.85);
    background-color: #749D49;
    border: 1px solid #749D49;

}

.watupro_buttons.flex {
    /*justify-content: right;*/
    justify-content: flex-end;
}

div#timerDiv {
    background-color: #4d4c4d;
    padding: 0.5rem;
    color: #fff;
    width: 100%;
    min-width: 100%;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    border-bottom: 20px solid #8BC84A;
}

/* Also don\'t need this because logged in users don\'t have the bar at the top
body.logged-in div#timerDiv {
    top:32px;
} */

.watupro-paginator-wrap {
    position: fixed;
    left: 0;
    top: 70px; /* 50px + div#timerDiv border */
    /*bottom: 90px;*/
    width: 75px;
    height: calc(100% - 120px);
}

/* body.logged-in .watupro-paginator-wrap { margin-top: 40px; } */

/* When using the external paginator [watupro-paginator vertical=\"1\"] in widget*/
.watupro-paginator-vertical ul.watupro-paginator {
    overflow: scroll;
    height: 100%;
    flex-flow: column nowrap;
    justify-content: flex-start;
    /* Custom Scrollbar */
    scrollbar-color: #8cc63f #fafafa;
    scrollbar-width: thin;
}

/* If \"Show numbered question paginator\" in Edit quiz -> General Settings selected */
ul.watupro-paginator {
    overflow: scroll;
    height: 100%;
    flex-flow: column nowrap;
    justify-content: flex-start;
    /* Custom Scrollbar */
    scrollbar-color: #8cc63f #fafafa;
    scrollbar-width: thin;
}

ul.watupro-question-paginator {
	overflow-x: hidden;
    background-color: #fff;
}

ul.watupro-question-paginator li {
    width: 50px !important;
    height: 2em;
    font-size: 0.75em;
}

  .quiz-area {
	margin-top: 30px; /* Adjusted from 120 px; */
	margin-left: 75px; /* Need this, otherwise the text goes under the paginator at small widths but still > 1024 */
}

.watupro-paginator-wrap {
    height: calc(100% - 145px);
}
    
/* When user is logged and admin bar is visible on top */
/* Not needed on our theme */
/*
body.logged-in .quiz-area {margin-top: 150px;}
*/

/* Mobile */
@media only screen and (max-width: 1024px) {
    .quiz-area {
        margin-top: 55px;
        /* margin-left: 75px; */ /* Paginator is the same size on both desktop and mobile */ 
    }
/*  body.logged-in .quiz-area { margin-top: 40px; } */
/*	.watupro-paginator-wrap { top: 20px; } */
}

@media only screen and (max-width: 768px) {
/*    body.logged-in div#timerDiv { top:46px; } */
/*    body.logged-in .watupro-progress-container { margin-top: 6px; } */
/*    body.logged-in .watupro-paginator-wrap { top: 70px; } */
    .watupro-paginator-wrap {
        height: calc(100% - 145px - 20px);
    }
}