/*
 * Survalyzer.CodeGeneration.Styles.DefaultVariables.cshtml
 * Survalyzer.CodeGeneration.Tasks.Utils.RenderViewTask
 */






/* ------------------------------------------ */
/* background: background-color & font-family */
/* ------------------------------------------ */
body.rsp-body {
    background-color: #ffffff;
    font-family: 'Lato', Sans-Serif, Arial;
}
input.rsp-text,
textarea.rsp-textarea {
    font-family: 'Lato', Arial;
}

/* ------------------------------------------------------- */
/* survey items: font-size, font-weight, font-style, color */
/* ------------------------------------------------------- */
.rsp-question-text {
    font-size: 32px;
    font-weight: normal;
    font-style: normal;
    color: #444342;
}
.rsp-question-hint{
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    color: #444342;
}
@media (max-width: 768px) {
    .rsp-question-text {
        font-size: 24px;
    }
    .rsp-question-hint{
        font-size: 16px;
    }
}
@media (max-width: 320px) {
    .rsp-question-text {
        font-size: 20px;
    }
    .rsp-question-hint {
        font-size: 14px;
    }
}
.rsp-slider-container .rsp-slider{
    background-color: #444342;
}
.rsp-slider-container .rsp-slider-top .rsp-slider-answer{
    border-color:#444342;
    background-color:#444342;
}
.rsp-slider-container .rsp-slider-top .rsp-slider-answer:after,
.rsp-slider-container .rsp-slider-top .rsp-slider-answer:before{
    border-top-color: #444342;
}

.rsp-drop-down{
    color: #444342;
    font-size: 16px; 
    font-weight: normal;
    font-style: normal;
}

.rsp-rankorder-rate{
    color: #65CB98;
}

.rsp-rankorder-ranked-highlight {
    background-color: #65CB98;
}
/* ------------------------------------------ */
/* ----- survey items: background-color ----- */
/* ------------------------------------------ */
.rsp-question{
    background-color: #F8FAFA;
    border: 1px solid #F8FAFA;
}


/* -------------------------------------------------- */
/* answer: font-size, font-weight, font-style, color */
/* -------------------------------------------------- */
.rsp-single-container > ul > li > label,
.rsp-multiple-container > ul > li > label,
.rsp-single-container > ul > li > label .rsp-text,
.rsp-multiple-container > ul > li > label .rsp-text,
.rsp-matrix-container .rsp-table,
.rsp-matrix-container .rsp-text,
.rsp-progress-container label,
textarea,
.rsp-slider-container .rsp-slider-labeltext,
.rsp-slider-container label{
    font-size:16px;
    font-weight: normal;
    font-style: normal;
    color: #444342;
}
@media (max-width: 768px) {
    .rsp-single-container > ul > li > label,
    .rsp-multiple-container > ul > li > label,
    .rsp-single-container > ul > li > label .rsp-text,
    .rsp-multiple-container > ul > li > label .rsp-text,
    .rsp-matrix-container .rsp-table,
    .rsp-matrix-container .rsp-text,
    .rsp-progress-container label,
    textarea,
    .rsp-slider-container .rsp-slider-answer{
        font-size:16px;
    }
}
@media (max-width: 320px) {
    .rsp-single-container > ul > li > label,
    .rsp-multiple-container > ul > li > label,
    .rsp-single-container > ul > li > label .rsp-text,
    .rsp-multiple-container > ul > li > label .rsp-text,
    .rsp-matrix-container .rsp-table,
    .rsp-matrix-container .rsp-text,
    .rsp-progress-container label,
    textarea,
    .rsp-slider-container .rsp-slider-answer{
        font-size:14px;
    }
}


/* ------------------------------------------ */
/* --------- answer: background-color ------- */
/* ------------------------------------------ */
.rsp-single-container > ul > li > label,
.rsp-multiple-container > ul > li > label,
.rsp-matrix-container .rsp-table > thead > tr,
.rsp-matrix-container .rsp-table > tbody > tr > td.rsp-formfield > label:hover,
.rsp-slider-container .ui-slider-handle {
    background-color: #e0e5e5;
}
.rsp-slider-container .rsp-slider-top .rsp-slider-answer {
    color: #e0e5e5;
}
.rsp-matrix-container .rsp-table > tbody > tr,
.rsp-matrix-container .rsp-table > thead > tr{
    border-bottom-color:#e0e5e5;
}
@media (max-width: 768px) {
    .rsp-matrix-container .rsp-table > tbody > tr > td.rsp-formfield  > label{
        background-color: #e0e5e5;
    }
}


/* ------------------------------------------------------------------- */
/* button: font-size, font-weight, font-style, color, background-color */
/* ------------------------------------------------------------------- */
button.rsp-btn{
    font-size: 16px;
    font-weight: inherit;
    font-style: inherit;
    color: #444342;
    background-color: #e0e5e5;
    -webkit-box-shadow: 0 1px 2px 0 #444342;
    -moz-box-shadow: 0 1px 2px 0 #444342;
    box-shadow: 0 1px 2px 0 #444342;
}
@media (max-width: 768px) {
    button.rsp-btn{
        font-size: 16px;
    }
}
@media (max-width: 320px) {
    button.rsp-btn{
        font-size: 14px;
    }
}

/* ------------------------------------------------------------------- */
/* progress bar */
/* ------------------------------------------------------------------- */

.rsp-progress {
    background-color: #E0E5E5;
}
.rsp-progress-bar {
    background-color: #65CB98;
}

.rsp-progress .rsp-progress-label{
    color: #444342;
}
/* -------------------------------------------- */
/* ----- radio / checkboxes form overlays ----- */
/* -------------------------------------------- */
.rsp-radio:not(old):not(.rsp-hide) + label:before,
.rsp-checkbox:not(old):not(.rsp-hide) + label:before
{
    background-color: #ffffff; /* Background Color */
    border-color: #444342; /* Question Color */
}
body.rsp-notouch .rsp-checkbox:not(old):not(.rsp-hide) + label:hover:before
{
    color:#65CB98; /* Highlight Color */
}
.rsp-checkbox:not(old):not(.rsp-hide):checked + label:before
{
    color: #ffffff; /* Background Color */
    border-color:#65CB98; /* Highlight Color */
    background-color:#65CB98; /* Highlight Color */
}
body.rsp-notouch .rsp-checkbox:not(old):not(.rsp-hide):checked + label:hover:before
{
 	color: #ffffff; /* Background Color */
    border-color:#65CB98; /* Highlight Color */
    background-color:#65CB98; /* Highlight Color */
}
body.rsp-notouch .rsp-radio:not(old):not(.rsp-hide) + label:hover:before
{
    background: #65CB98; /* Highlight Color */
    box-shadow: inset 0px 0px 0px 4px #ffffff; /* Background Color */
}
.rsp-radio:not(old):not(.rsp-hide):checked + label:before
{
    border-color:#65CB98; /* Highlight Color */
    background: #ffffff; /* Background Color */
}
body.rsp-notouch .rsp-radio:not(old):not(.rsp-hide):checked + label:hover:before
{
    border-color:#65CB98; /* Highlight Color */
    background: #ffffff; /* Background Color */
}
@media (max-width: 768px) {
    .rsp-radio:not(old) + label:before,
    .rsp-checkbox:not(old) + label:before
    {
        background-color: #ffffff; /* Background Color */
        border-color: #444342; /* Question Color */
    }
    body.rsp-notouch .rsp-checkbox:not(old) + label:hover:before
    {
        color:#65CB98; /* Highlight Color */
    }
    .rsp-checkbox:not(old):checked + label:before
    {
        color: #ffffff; /* Background Color */
        border-color:#65CB98; /* Highlight Color */
        background-color:#65CB98; /* Highlight Color */
    }
    body.rsp-notouch .rsp-checkbox:not(old):checked + label:hover:before
    {
        color: #ffffff; /* Background Color */
        border-color:#65CB98; /* Highlight Color */
        background-color:#65CB98; /* Highlight Color */
    }
    body.rsp-notouch .rsp-radio:not(old) + label:hover:before
    {
        background: #65CB98; /* Highlight Color */
        box-shadow: inset 0px 0px 0px 4px #ffffff; /* Background Color */
    }
    .rsp-radio:not(old):checked + label:before
    {
        border-color:#65CB98; /* Highlight Color */
        background: #ffffff; /* Background Color */
    }
    body.rsp-notouch .rsp-radio:not(old):checked + label:hover:before
    {
        border-color:#65CB98; /* Highlight Color */
        background: #ffffff; /* Background Color */
    }
}

/* -------------------------------------------- */
/* ----- autocomplete text higlight ----- */
/* -------------------------------------------- */
.rsp-question  .dropdown-menu > li.active > a{
    background-color: #65CB98;
}