/* 
Tip: If you choose only the languages that you need, you'll help prevent slowness on your webpage.
Tip: Using many font styles can slow down your webpage, so only select the font styles that you actually need on your webpage.
*/

/*
Google fonts - Open Sans font family with Latin, Latin Extended, Cyrillic and Cyrillic Extended extensions 
@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext,cyrillic,cyrillic-ext);
Google fonts - Open Sans font family without any extensions
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif; 
} 
*/

/* 
Google fonts - Roboto font family with Latin, Latin Extended, Cyrillic and Cyrillic Extended extensions
@import url(https://fonts.googleapis.com/css?family=Roboto&subset=latin,latin-ext,cyrillic,cyrillic-ext);
body {
    font-family: 'Roboto', Arial, Helvetica, sans-serif; 
}  

/* 
Google fonts - Lato font family with Latin and Latin Extended extensions
@import url(https://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext); 
body {
    font-family: 'Lato', Arial, Helvetica, sans-serif; 
} 
*/

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext);

body {
    background-color: white;
    font-family: Inter, Arial, Helvetica, sans-serif;
    line-height: 1.6em;
    text-align: left;
}

/* for logos */
img.LogoImage {
    margin-bottom: 20px;
}
div.fontResizeButtons{
    position:absolute;
    right:10px;
    top:10px;
    display: none;
}

div.QuestionnaireMain
/* for the main table that includes all other tables */ {
    background-color: white;
    margin-left: auto;
    margin-right: auto;
}

/* for all big tables */
div.QuestionnaireInfo, div.Header, div.Questions {
    margin-left: 0px;
    margin-right: 0px;
}

/* Questionnaire name and comment */
div.QuestionnaireInfo {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

div.imgLocationTopLeft {
    text-align: left;
}

div.imgLocationTopCenter {
    text-align: center;
}

div.imgLocationTopRight {
    text-align: right;
}

div.imgLocationBottomLeft {
    text-align: left;
}

div.imgLocationBottomCenter {
    text-align: center;
}

div.imgLocationBottomRight {
    text-align: right;
}

div.QuestionnaireInfo div.QuestionnaireTitle {
    text-align: center;
    color: #10285E;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1.5rem
}

div.QuestionnaireInfo div.QuestionnaireComment {
    text-align: left;
    color: #10285E;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-style: italic;
    margin-bottom: 25px;
}

/* Questionnaire page comment */
div.PageInfo {
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: #FFFFFF;
}

    div.PageInfo div.PageComment {
        text-align: left;
        color: #10285E;
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
        margin-bottom: 25px;
    }

/* Groups of questions */
div.Header {
    border-collapse: collapse;
    background-color: #10285E;
    text-align: left;
}

    div.Header label {
        color: white;
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 1.25rem
      }
div.HeaderComment {
    border-collapse: collapse;
    background-color: #10285E;
    text-align: left;
}
    div.HeaderComment label {
        color: white;
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    }

/* Questions */
div.Questions {
    margin-top: 2.5px;
    margin-bottom: 2.5px;
    background-color: White;
}

    /* changing backcolour */

    div.Questions div.Even {
        background-color: white;
    }

    div.Questions div.Odd {
        background-color: Whitesmoke;
    }

    div.Questions div.Question {
        vertical-align: top;
    }

div.Questions div.Question span {
    color: #000000;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

        div.Questions div.Question label {
            color: #000000;
            font-family: 'Open Sans', Arial, Helvetica, sans-serif;
        }


    div.Questions .QuestionFreeValueOption {
        color: #000000;
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    }

    div.Questions .DropDownList {
        color: #000000;
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    }

    div.Questions .PutInOrderDropDownList {
        color: #000000;
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
        width: 125px;
    }

    .NPSRadioButtonList {
        background-color: #ffffff;
        color: #000000;
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
        margin-bottom: 5px;
    }

    div.Questions .RadioButtonList {
        color: #000000;
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    }

    div.NPSRadioButtonList .form-check{
        padding-left: 0px;
    }
    div.NPSRadioButtonList input[type=radio] {
        display: none;
    }

    div.NPSRadioButtonList input[type=radio] + label{
        display:inline-block;
        margin: 0px;
        padding: 5px 15px 5px 15px;
        line-height: 25px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        border: 1px solid transparent;
        color: Navy;
        background-color: #ffffff;
        border-color: #8c8c8c;
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    }
    div.NPSRadioButtonList input[type=radio] + label:hover{
        color: #333;
        background-color: #e6e6e6;
        border-color: #adadad;
    }

     div.NPSRadioButtonList input[type=radio]:checked + label{
        color: #fff;
        background-color: #449d44;
        border-color: #398439;
    }

    .NPSHeaderWorst {
        text-align: left;
    }

    .NPSHeaderNeutral {
        text-align: center;
    }

    .NPSHeaderBest {
        text-align: right;
    }

    div.Questions .AddressTextbox {
        color: #000000;
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
        padding: 3px;
        border: solid 1px #c9c9c9;
        transition: border 0.3s;
        background-color: #FCFCFC;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

.AddressTextbox:focus {
    border-bottom: solid 2px #c9c9c9;
    background-color: #ffffff;
}

div.Questions .CommentTextbox {
    color: #000000;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    padding: 3px;
    border: solid 1px #c9c9c9;
    transition: border 0.3s;
    background-color: #FCFCFC;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.CommentTextbox:focus {
    border-bottom: solid 2px #c9c9c9;
    background-color: #ffffff;
}

div.Questions .DateTextbox {
    color: #000000;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    padding: 3px;
    border: solid 1px #c9c9c9;
    transition: border 0.3s;
    background-color: #FCFCFC;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.DateTextbox:focus {
    border-bottom: solid 2px #c9c9c9;
    background-color: #ffffff;
}

div.Questions .FreevalueTextbox {
    color: #000000;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    padding: 3px;
    border: solid 1px #c9c9c9;
    transition: border 0.3s;
    background-color: #FCFCFC;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.FreevalueTextbox:focus {
    border-bottom: solid 2px #c9c9c9;
    background-color: #ffffff;
}

div.Questions .VASSliderTextbox {
    background-color: Transparent;
    text-align: center;
    border-color: Silver;
    border-style: solid;
    border-width: 1px;
    color: #000000;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    padding: 3px;
    transition: border 0.3s;
    background-color: #FCFCFC;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.VASSliderTextbox:focus {
    border-bottom: solid 2px #c9c9c9;
    background-color: #ffffff;
}

div.Questions .VASTextbox {
    text-align: center;
    color: #000000;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    padding: 3px;
    border: solid 1px #c9c9c9;
    transition: border 0.3s;
    background-color: #FCFCFC;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.VASTextbox:focus {
    border-bottom: solid 2px #c9c9c9;
    background-color: #ffffff;
}

div.Questions .AnswerLabel {
    color: #000000;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

div.Questions div.UploadFile input {
    color: #000000;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

div.Questions div.Question .ChooseSomeCheckbox label {
    color: #000000;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

div.Questions .QuestionCommentTextbox {
    color: #000000;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

div.ButtonToolbar {
    text-align: center;
}

/* Question Comment */
a.info {
    position: relative; /*this is the key*/
    z-index: 24;
    color: #000;
    text-decoration: none;
}

    a.info:hover {
        z-index: 25;
        background-color: transparent; /* for IE */
        text-decoration: none;
    }

    a.info span {
        display: none;
        border: 1px solid #0cf;
        padding: 2px;
        background-color: LightYellow;
        color: #000;
        text-align: left;
        text-decoration: none;
        word-wrap: break-word;
    }

    a.info:hover span {
        /*the span will display just on :hover state*/
        display: block;
        position: absolute;
        top: 2em;
        left: 2em;
        text-decoration: none;
    }

/* Error Message */
span.Error, div.Questions div.Question span.Error {
    color: red;
    margin-left: 10px;
    font-weight: bold;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

div.Questions div.Question span.Error {
    color: red;
    margin-left: 10px;
    font-weight: bold;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

/* Warning Message */
span.Warning {
    color: Orange;
    margin-left: 10px;
    font-weight: bold;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

.labelprogress {
    color: navy;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

/* General styles for QA */

.labels {
    color: navy;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

.label_headers {
    color: Navy;
    font-weight: bold;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

.errors {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    color: Red;
}

.status_label {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    color: silver;
}

A:link {
    text-decoration: none;
    color: #F93C41;
}

A:visited {
    text-decoration: none;
    color: #F93C41;
}

A:active {
    text-decoration: none;
    color: #F93C41;
}

A:hover {
    text-decoration: underline;
    color: #3333cc;
}


.mswordbutton {
    font-weight: bold;
    color: navy;
    word-spacing: normal;
    text-transform: none;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    letter-spacing: normal;
    background-color: ButtonHighlight;
    height: 16pt;
}

div.QuestionHeaders {
    text-align: center;
}

div.QuestionOptions {
    text-align: center;
}

.EvenFixedQuestionColumnsEvenRows {
    background-color: #ffffff;
    color: #000000;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

.OddFixedQuestionColumnsEvenRows {
    background-color: #fafafa;
    color: #000000;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

div.fontResizeButtons {
    display: block;
}

.SummaryBodyTag {
    background-color: white;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    line-height: 1.6em;
    text-align: left;
}

.divSummaryForm {
    margin: 4px;
    padding-top: 4px;
    left: 0%;
    background-color: green;
    text-align: center;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
}

.divSummaryAnswerForm {
    text-align: center;
    margin: 0 auto;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
}