/*Copyright 2018 by 2x4 Solutions GmbH - www.2x4.de - All rights reserved*/

@media only screen and (max-width: 800px) {

    input[type=radio] {
        margin-left: 5px;
        margin-top: 5px;
        z-index: 1;
    }

    .SingleButtonQuestion {
        background-color: white;
        line-height: 1.2;
        padding: 5px;
        margin-bottom: 15px;
        margin-top: 5px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .SingleButtonSubHeading {
        /*color: white;*/
        /*background-color: midnightblue;*/
        padding: 5px;
        /*position: -webkit-sticky;
        position: sticky;*/
        top: 0px;
        font-size: 1em !important;
        font-weight: normal;
        /*color: #505050;
    background-color: #f4f4f4 !important;*/
        color: black;
        background-color: #d4d4d4 !important;
        /*margin-top: 20px;*/
        line-height: 1.2;
        padding-left: 10px;
        padding-right: 10px;
    }

    .sticky {
        position: -webkit-sticky;
        position: sticky;
        z-index:1000;
    }


    .mrQuestionTable {
        padding: 0px !important;
        margin-left: 0px !important;
        border-top: 1px solid #eeeeee;
    }

    .mrQuestionText {
        margin-top: 0px !important;
        display: block;
        padding-left: 3px !important;
        padding-right: 3px !important;
        /*These two do not work if there are subheadings, ...*/
        /*padding: 5px !important;
    padding-top: 5px !important;*/
    }

    .mrQuestionText2 {
        /*padding: 5px 10px !important;*/
        background-color: white;
    }


    .mrOtherEdit {
        margin-top: 10px;
        font-size: 20px;
        width: 95%
    }

    .mrQuestionTable {
        margin: 0px !important;
        margin-bottom: 25px;
    }


        .mrQuestionTable span {
            /*background-color: green !important;*/
            border-bottom: 1px solid #eeeeee !important;
            display: flex;
            padding-left: 5px;
        }

        .mrQuestionTable > span:last-child {
            margin-bottom: 20px;
        }


    .mrErrorText {
        padding-left: 10px !important;
        line-height: 1.2;
        width: 100%;
    }


    /*The checkbox*/
    .mrSingle {
        /*visibility: hidden !important;
        width: 0px !important;
        position: absolute !important;*/
        width: 18px !important;
        height: 18px !important;
        vertical-align: middle !important;
        margin-left: 10px; /*Needed for Q5a*/
    }

    .chk {
        background-color: #f1f1f1 !important;
        color: black;
    }

    .chkimg {
        border-color: white !important;
    }

    label {
        width: 100%
    }

    input[type=radio] + label span {
        cursor: pointer;
        border-bottom: none !important;
    }

    input[type=radio]:checked + label span {
        color: white !important;
        background-color: rgb(000, 159, 223) !important;
        border-bottom: 1px solid white !important;
        border-bottom: none !important;
    }

    .mrSingleText {
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 16px !important;
        vertical-align: middle !important;
        line-height: 1.2em !important;
        display: inline-block !important;
        height: auto !important;
        margin: 0px 0px !important;
        padding-top: 10px !important;
        padding-bottom: 8px !important;
        text-align: left;
        padding-left: 0px;
        padding-right: 5px !important;
        width: calc(100% - 45px) !important;
    }

        .mrSingleText img {
            float: left;
            border: 1px solid silver;
            border-radius: 2px;
            overflow: hidden;
            padding: 2px;
            margin-right: 5px;
        }



    #question {
        border: none !important;
        padding: 0px !important;
        margin: 0px !important;
        width: 100% !important;
    }

    .verticalAlignMittle {
        height: 56px;
        vertical-align: middle;
        display: table-cell;
    }

    .surveyarea {
        width: 100% !important;
    }
}

/*Windows Phone*/
@media only screen and (max-width: 320px) {
    .mrMultipleText {
        font-size: 14px !important;
    }
}

@media only screen and (min-device-width : 800px) {

    .mrMultipleText img {
        border-width: 3px;
    }
}