body {
}


.answer-Button
{
    margin: 5px;
    font-size: 1.25em !important;
}

/* New Button Styling*/
.cr-wrapper *,
.cr-wrapper *::before,
.cr-wrapper *::after {
    box-sizing: content-box !important;
}

.cr-wrapper input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.cr-wrapper span {
    font-size: 1.5em;
    margin-left:2em;
}

.optButtonNew
{
    line-height:1.5em;
}

.cr-wrapper {
    display: block;
    position: relative;
    padding-left: 10px;
    cursor: pointer;
    margin-bottom: 15px;
    margin-top: 15px;
}

    .cr-wrapper input[type="checkbox"] ~ .cr-input {
        position: absolute;
        top: 1.2em;
        left: 0;
        height: 1.8em;
        width: 1.8em;
        background: #FFFFFF;
        transition: background 250ms;
        border: 1px solid #F1F5F9;
        border-radius: 3px;
        transform: translate(0, -50%);
    }

    .cr-wrapper input[type="radio"] ~ .cr-input {
        position: absolute;
        top: 1.2em;
        left: 0;
        height: 1.8em;
        width: 1.8em;
        background: #FFFFFF;
        transition: background 250ms;
        border: 1px solid #F1F5F9;
        border-radius: 20px;
        transform: translate(0, -50%);
    }

    .cr-wrapper input[type="checkbox"] ~ .cr-input::after {
        content: "";
        position: absolute;
        display: none;
        left: 13%;
        top: 14%;
        width: 1.3em;
        height: 1.3em;
        transition: background 250ms;
        background-color: #FFFFFF;
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    }

    .cr-wrapper input[type="radio"] ~ .cr-input::after {
        content: "";
        position: absolute;
        display: none;
        left: 13%;
        top: 14%;
        width: 1.3em;
        height: 1.3em;
        border-radius: 20px;
        background: #FFFFFF;
        transition: background 250ms;
    }

    .cr-wrapper input:checked ~ .cr-input::after {
        display: block;
    }

    .cr-wrapper:hover input[type="checkbox"]:not([disabled]) ~ .cr-input,
    .cr-wrapper input[type="checkbox"]:focus ~ .cr-input {
        background: #113e6d;
        border-color: #113e6d;
        opacity: 0.5;
    }

    .cr-wrapper:hover input[type="radio"]:not([disabled]) ~ .cr-input,
    .cr-wrapper input[type="radio"]:focus ~ .cr-input {
        background: #113e6d;
        border-color: #113e6d;
        opacity: 0.5;
    }

    .cr-wrapper input[type="checkbox"]:checked ~ .cr-input {
        background: #113e6d;
        border-color: #113e6d;
        opacity: 1.0;
    }

    .cr-wrapper input[type="radio"]:checked ~ .cr-input {
        background: #113e6d;
        border-color: #113e6d;
        opacity: 1.0;
    }

    .cr-wrapper input[type="checkbox"]:disabled ~ .cr-input,
    .cr-wrapper input[type="radio"]:disabled ~ .cr-input {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .cr-wrapper input[type="checkbox"]:disabled ~ span,
    .cr-wrapper input[type="radio"]:disabled ~ span {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .cr-wrapper input[type="checkbox"]:disabled ~ .cr-input::after {
        background: #FFFFFF;
    }

    .cr-wrapper input[type="radio"]:disabled ~ .cr-input::after {
        background: #FFFFFF;
    }

    .cr-wrapper:hover input[type="checkbox"]:not([disabled]):checked ~ .cr-input,
    .cr-wrapper input[type="checkbox"]:checked:focus ~ .cr-input {
        background: #113e6d;
        border-color: #113e6d;
    }

    .cr-wrapper:hover input[type="radio"]:not([disabled]):checked ~ .cr-input,
    .cr-wrapper input[type="radio"]:checked:focus ~ .cr-input {
        background: #113e6d;
        border-color: #113e6d;
    }




/* End New Button Styling*/

/* Begin Radio Button as Simple Button Styling*/

.rbn-button label,
.rbn-button input {
    text-align: center;
    align-items: stretch;
    justify-content: center;
    display: inline-flex;
    margin: 10px;
    padding: 10px;
    border: 1px solid #CECECE;
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
    box-sizing: border-box;
    cursor: pointer;
    background: #FFFFFF;
    touch-action: manipulation;
    vertical-align: middle;
    width:25%;

}

    .rbn-button input[type="radio"] {
        display: none;
    }

    .rbn-button label:hover {
        opacity: 0.75;
        background-position: 0 0;
        box-shadow: rgba(0, 0, 0, 0.75) 0px 0px 10px;
    }

    .rbn-button input[type="radio"]:checked + label {
        background: #113e6d;
        color: #ffffff;
    }

    .rbn-button-text 
    {
        display:inline-flex;
    }

/* End Radio Button as Simple Button Styling*/

.qText {
    font-size: 1.75em;
    font-weight: bold;
    display: block;
    padding: 10px;
}

@media (max-width: 600px) {
    .qText {
        font-size: 1.75em;
        font-weight: bold;
    }
}


.progressBarBG {
    text-align:left;
    color: #000 !important;
    background-color: #f1f1f1 !important;
    border-radius: 1em;
}

.progressBarEmpty {
    text-align: center;
    padding: 0.01em 16px;
    box-sizing: inherit;
    color: #fff !important;
    border-radius: 1em;
    background-color: #f1f1f1 !important;
}

.progresBarProgress {
    text-align: center;
    padding: 0.01em 16px;
    box-sizing: inherit;
    color: #fff !important;
    background-color: #2196F3;
    border-radius: 1em;
}

.progressBarText {
    text-align: center !important;
    box-sizing: inherit;
}