/* Quiz (replaces Quiz Maker). Look carried over from the old customizer CSS (post 8386) and the plugin theme "elegant light". */
.vr-quiz {
	--vr-quiz-main: #663399;
	position: relative;
	max-width: 96%;
	min-height: 350px;
	margin: 20px auto;
	padding: 0 0 60px;
	background: #fff;
	text-align: center;
	font-size: 15px;
}
.vr-quiz[hidden], .vr-quiz [hidden] { display: none !important; }
.vr-quiz__form { margin: 0; }
.vr-quiz__step { border: 0; margin: 0; padding: 45px 0 0; min-width: 0; outline: 0; }
.vr-quiz__step:focus-visible { outline: 2px solid var(--vr-quiz-main); outline-offset: 4px; }
.vr-quiz__title { font-size: 21px; line-height: 22px; text-transform: uppercase; margin: 21px 0 10px; padding: 0 10px; color: #000; font-family: var(--vr-font-text, Montserrat, sans-serif); font-weight: 400; }
/* quiz 2 hid its title ("Quiz") with transparent text; keep it for screen readers only */
#ays-quiz-container-2 .vr-quiz__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vr-quiz__desc { font-size: 17px; line-height: 22px; color: #000; margin: 0 0 20px; }
.vr-quiz__desc p { text-align: center; }
.vr-quiz__desc, .vr-quiz__desc p { text-align: center !important; }
/* footnote of quiz 2 on the start page: the old customizer CSS (post 8386) took #quiz-quote out of the flow and set it 240 px
   (85 px on phones) below the heading, purple, justified, 12 px on phones */
.vr-quiz__desc #quiz-quote { position: absolute; margin-top: 240px; }
.vr-quiz__desc #quiz-quote p { margin: 16px 0; padding: 0 10px; color: #663399 !important; text-align: justify !important; font-size: 16px; line-height: 22px; }
@media (max-width: 599px) {
	.vr-quiz__desc #quiz-quote { margin-top: 85px; }
	.vr-quiz__desc #quiz-quote p { font-size: 12px; }
}

/* progress line above the questions */
.vr-quiz__bar { position: absolute; top: -15px; left: 0; width: 100%; height: 15px; }
.vr-quiz__bar-fill { height: 100%; text-align: right; font-size: 11px; line-height: 15px; color: #000; border-bottom: 2px solid var(--vr-quiz-main); transition: width 0.3s ease; white-space: nowrap; overflow: visible; }

/* question */
.vr-quiz__q { position: relative; padding-top: 0; }
/* a fieldset ignores its own top padding for the legend, so the space sits on the legend */
.vr-quiz__q legend { display: block; width: 100%; padding: 78px 0 0; float: none; }
.vr-quiz__counter { position: absolute; top: 27px; right: 0; padding: 0 10px; font-size: 16px; line-height: 22px; color: #000; }
.vr-quiz__qtext { display: inline-block; margin: 5px 0 10px; padding: 0 10px; font-size: 18px; line-height: 22px; color: #000; font-weight: 400; font-family: var(--vr-font-text, Montserrat, sans-serif); }
.vr-quiz__qtext * { display: inline; }
.vr-quiz__answers { display: block; margin-top: 20px; }
.vr-quiz__field { display: inline-block; position: relative; width: 49%; max-width: 100%; margin: 0 5px 10px 0; vertical-align: top; cursor: pointer; }
.vr-quiz__field input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.vr-quiz__label {
	display: block;
	box-sizing: border-box;
	padding: 8px 20px;
	border: 3px solid #a98bc7;
	border-radius: 30px;
	background: #fff;
	color: var(--vr-quiz-main);
	font: 600 18px/33px var(--vr-font-text, Montserrat, sans-serif);
	text-align: center;
	word-break: break-word;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.vr-quiz__field:hover .vr-quiz__label,
.vr-quiz__field input:checked + .vr-quiz__label { background: var(--vr-quiz-main); border-color: var(--vr-quiz-main); color: #fff; }
.vr-quiz__field input:focus-visible + .vr-quiz__label { outline: 3px solid #294754; outline-offset: 2px; }
.vr-quiz__number { width: 160px; max-width: 100%; box-sizing: border-box; padding: 10px 14px; border: 3px solid var(--vr-quiz-main); border-radius: 30px; font: 600 18px/22px var(--vr-font-text, Montserrat, sans-serif); color: var(--vr-quiz-main); text-align: center; background: #fff; }
.vr-quiz__number:focus-visible { outline: 3px solid #294754; outline-offset: 2px; }

.vr-quiz__qnote { display: block; margin: 10px auto 0; }
.vr-quiz__note { margin: 10px 0 0; }
.vr-quiz__note p { margin: 0; color: var(--vr-quiz-main); font-size: 16px; line-height: 22px; text-align: center !important; }
.vr-quiz__qnote > p { margin: 0; }
.vr-quiz__error { color: #a40000; font-weight: 600; margin: 10px 0 0; }

/* buttons */
.vr-quiz__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 15px 0; }
.vr-quiz__btn {
	box-sizing: border-box;
	max-width: 100%;
	padding: 13px 30px;
	border: 3px solid var(--vr-quiz-main);
	border-radius: 30px;
	background: #fff;
	color: var(--vr-quiz-main);
	font: 700 20px/20px Arial, sans-serif;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}
.vr-quiz__btn:hover, .vr-quiz__btn:focus-visible { background: var(--vr-quiz-main); color: #fff; border-color: #639; }
.vr-quiz__btn:focus-visible { outline: 3px solid #294754; outline-offset: 2px; }
.vr-quiz__btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.vr-quiz__btn[aria-disabled="true"]:hover { background: #fff; color: var(--vr-quiz-main); }

/* result */
.vr-quiz__end { padding-top: 45px; }
.vr-quiz__interval, .vr-quiz__finish { text-align: justify; color: #000; font-size: 17px; line-height: 22px; max-width: 1000px; margin: 0 auto; }
.vr-quiz__interval p, .vr-quiz__finish p { margin: 0 0 10px; text-align: justify; color: #000; }
.vr-quiz__loading { margin: 40px 0; }
.vr-quiz__meter { position: relative; height: 22px; margin: 20px auto 0; max-width: 1000px; border: 2px solid var(--vr-quiz-main); border-radius: 12px; background: #fff; overflow: hidden; }
.vr-quiz__meter-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: #c9b3e0; transition: width 0.8s ease; }
.vr-quiz__meter-text { position: relative; font-size: 12px; line-height: 18px; color: #000; }

@media (max-width: 600px) {
	.vr-quiz__field { width: 100%; margin-right: 0; }
	.vr-quiz__label { font-size: 16px; line-height: 26px; }
	.vr-quiz__counter { top: 15px; }
}
@media (prefers-reduced-motion: reduce) {
	.vr-quiz__bar-fill, .vr-quiz__meter-fill, .vr-quiz__label, .vr-quiz__btn { transition: none; }
}

/* ---- BMI calculator (cc-bmi), copied from cc-bmi-calculator 2.0.1 ---- */
#CCB-calc div,
#CCB-calc input,
#CCB-calc span {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#CCB-calc {
    max-width: 300px;
    min-width: 200px;
    border-color: #ddd;
    background-color: #f8f8f8;
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    /*font-size: 1em;*/
    line-height: 1.42857143;
    color: #666666;
}

#CCB-calc #calc-header H3{
    font-size: 0.8571em;
    font-weight: 700;
    color: white;
    
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0px 0px 0.7143em 0px;
    padding: 0.3571em;
}

#CCB-calc #calc-header H3 a{
    color: white !important;
    text-decoration: none;
}


#CCB-calc #calc-header {
    text-align: center;
    background-color: #ddd;
    color: white !important;
}



#CCB-calc #calc-footer p {
    text-align: right;
    font-size: 0.7em;
    margin: 0px;
    padding: 0px;
}

#CCB-calc #calc-footer p a {
    text-align: right;
    font-size: 1em;
    margin: 0px;
    padding: 0px;
    color: #666666;
    text-decoration: none;
}

#CCB-calc #calc-footer {
    background-color: #ddd;
    color: #666666;
    clear: both;
    padding: 3px 7px 3px 0px;
    margin-top: 5px;
}

#CCB-calc .col-200-4 {
    width: 33.33%;
    float: left;
}

#CCB-calc .col-200-5 {
    width: 41.66%;
    float: left;
}

#CCB-calc .col-200-6 {
    width: 50%;
    float: left;
}

#CCB-calc .col-200-8 {
    width: 66.66%;
    float: left;
}

#CCB-calc .col-12 {
    width: 100%;
    float: left;
}

#CCB-calc .col-200-offset-1 {
    margin-left: 10%;
}

@media (max-width: 200px) {
    #CCB-calc .col-200-4 {
        width: 100%;
        float: left;
    }
    #CCB-calc .col-200-5 {
        width: 100%;
        float: left;
    }
    #CCB-calc .col-200-8 {
        width: 100%;
        float: left;
    }
}

#CCB-calc .form-group {
    padding: 5px;
    display: block;
    clear: both;
}

#CCB-calc .form-group:after {
    clear: both;
    content: "";
    display: table;
}

#CCB-calc .control-label {
    display: inline-block;
    text-align: right;
    padding-top: 7px;
    margin-bottom: 0;
    max-width: 100%;
    font-weight: 700;
    box-sizing: border-box;
}

@media (max-width: 400px) {
    #CCB-calc .control-label {
        text-align: left;
    }
}

#CCB-calc .input-group-addon,
#CCB-calc .input-group-btn,
#CCB-calc .input-group .form-control {
    display: table-cell;
}

#CCB-calc .input-group {
    position: relative;
    display: table;
    border-collapse: separate;
    width: 100%;
}

#CCB-calc .form-control {
    width: 100%;
    height: 34px;
    padding: 0.3571em 0.7143em;
    font-size: 14px;
    line-height: 1.42857143;
    color: #666666;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid;
    border-color: #ddd;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

#CCB-calc .form-control:last-child {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

#CCB-calc .form-control:first-child {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

#CCB-calc .input-group-addon {
    padding: 5px 10px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    color: #666666;
    text-align: center;
    border: 1px solid;
    border-color: #ddd;
    border-radius: 4px;
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
    font-weight: 700;
    background-color: #ddd;
}

#CCB-calc .input-group-addon:last-child {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

#CCB-calc .input-group-addon:last-child {
    border-left: 0;
}

#CCB-calc .input-group-addon:first-child {
    border-right: 0;
}

#CCB-calc .input-group-addon:first-child {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}
/* BUTTON */

#CCB-calc .btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    /*    font-size: 1em;*/
    
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#CCB-calc .btn:focus,
#CCB-calc .btn:active:focus,
#CCB-calc .btn:active.focus,
#CCB-calc .btn.focus,
#CCB-calc .btn.active:focus,
#CCB-calc .btn.active.focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

#CCB-calc .btn:hover,
#CCB-calc .btn:focus,
#CCB-calc .btn.focus {
    color: #666666;
    text-decoration: none;
}

#CCB-calc .btn:active,
#CCB-calc .btn.active {
    outline: 0;
    background-image: none;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

#CCB-calc .btn-info {
    color: #ffffff;
    background-color: #a0a0a0;
    border-color: #a0a0a0;
}

#CCB-calc .btn-info:hover,
#CCB-calc .btn-info:focus,
#CCB-calc .btn-info.focus,
#CCB-calc .btn-info:active,
#CCB-calc .btn-info.active {
    color: #ffffff;
    background-color: #31b0d5;
    border-color: #269abc;
}

#CCB-calc .btn-info:active,
#CCB-calc .btn-info.active {
    background-image: none;
}

#CCB-calc .btn-info .badge {
    color: #a0a0a0;
    background-color: #ffffff;
}

#CCB-calc .btn-block {
    display: block;
    width: 100%;
}

#CCB-calc .btn-block + .btn-block {
    margin-top: 5px;
}

#CCB-calc input[type="submit"].btn-block,
#CCB-calc input[type="reset"].btn-block,
#CCB-calc input[type="button"].btn-block {
    width: 100%;
}
/* ^^^^^^ BUTTON */
/* ALERT */

#CCB-calc .alert {
    padding: 5px 15px 5px 15px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-weight: 700;
    text-align: center;
}

#CCB-calc .alert p {
    margin: 2px;
}

#CCB-calc .alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

#CCB-calc .alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

#CCB-calc .alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

#CCB-calc .alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
/* ^^^^^^ ALERT */
/* RADIO */

#CCB-calc input[type="radio"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    color: aqua;
}

#CCB-calc .radio label {
    min-height: 20px;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
}

#CCB-calc label {
    display: inline-block;    
}
/* ^^^^^^ RADIO */

#CCB-calc .center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* custom BMI settings */

#CCB-calc .input-group-addon {
    width: 35px;
    padding: 5px 5px;
}

#CCB-calc .control-label {
    padding-right: 5px;
}

#CCB-calc #calc-options {
    text-align: center;
    margin-bottom: 10px;
    margin-top: 10px;
}

#CCB-calc .BMI-Description-group {
    padding: 0px 6px 0px 6px;
}

#CCB-calc .col-200-5 .btn {
    margin-left: 10%;
}

#CCB-calc .btn {
    padding-left: 0px;
    padding-right: 0px;
}

#CCB-calc .bmi-hidden {
    display: none;
}


/* ^^^^^ custom BMI settings */
/* from the old customizer CSS */
div#CCB-calc.CCB-Widget-cc_bmi_shortcode { background-color: white !important; }
#ays-quiz-container-2 #CCB-calc { margin: 10px auto; text-align: left; }