#LogoArea, #SurveyPage{max-width:1024px;}
#SurveyPage > #LogoArea{flex-flow:column;}
#SurveyPage h1{font-size: 20px;}
#LogoArea{height:90px;}
#surveys{padding: 25px;}
.BoxIconShow{
    position: absolute;
    top:0;
}
.BoxIconShow >div{
    display: inline-block;
    padding-right: 10px;
}
div.boxedResponse{font-size: 20px; font-weight: 400; width:95%;margin-top: 50px;padding: 10px;}
.BButton{margin:10px 0;width:100%;}
.Matrix{display:table;width:95%;margin:0;padding:0;background-color:#fff;border:3px solid #5F77DD;border-radius:0.5em;}
.Matrix input[type="radio"], .Matrix input[type="checkbox"]{display:none;}
.Matrix ul{display:table-row;}
.Matrix ul:first-of-type{font-weight:bold;color:#5F77DD;}
.Matrix ul:first-of-type li:not(:first-of-type){white-space:normal;}
.Matrix ul li:first-of-type{text-align:left;}
.Matrix ul li{border-bottom:1px #5F77DD solid;border-right:1px #5F77DD solid;padding:3px;display:table-cell;text-align:center;vertical-align:middle;word-break:normal;width:100%;}
.Matrix ul:not(:first-of-type) li:not(:first-of-type) label{cursor:pointer;}
.Matrix ul:not(:first-of-type) li:not(:first-of-type) label > span{display:none;}
.Matrix ul:not(:first-of-type) li:not(:first-of-type) label:before{color:#fff;font-size:20px;font-weight:bold;content:"\2713";padding:5px 15px;}
.Matrix ul:last-child li{border-bottom:none;}
.Matrix ul li:last-child{border-right:none;}
.Matrix ul li input[type="radio"]:checked + label:before, .Matrix ul li input[type="checkbox"]:checked + label:before{color:#5F77DD;}
.Matrix input[type="number"], .Matrix select{width:unset !important;}

.survey-page{position:fixed;top:65px;text-decoration:none;font-size:16px;color:#434242;z-index:99;}

.boxedResponse li{font-size: 16px;margin: 15px 0 !important;list-style-type: circle;}

.SummaryCell li:first-of-type h2{text-align: right;padding-right:10px;}

.slider {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /*width: 100%;*/
    vertical-align: middle;
    height: 1em;
    background: #ffffdd !important;
    outline: none;
    border: 1px solid #A6A6A6;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 2em;
    height: 2em;
    background: #989898 !important;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 2em;
    height: 2em;
    background: #989898 !important;
    cursor: pointer;
}

@media (max-width:800px){
    #PageBody{margin-top:90px;}
    #Logo{display:block;max-width:50%;margin:20px auto;padding:0;}

    .Matrix{display:block; background:none;border:none;}
    .Matrix ul li{border-bottom:none;border-right:none;padding:0;width:auto;}
    .Matrix input[type="radio"], .Matrix input[type="checkbox"]{display:none;}
    .Matrix ul{display:inline-flex;flex-wrap: wrap;padding:10px;margin-bottom:10px;border:1px solid #ccc;border-radius:0.5em;list-style-type: none;width:100%;}
    .Matrix ul:first-of-type{margin:0;padding:0;border:0;}
    .Matrix ul:first-of-type li:first-of-type{font-weight:bold;color:#5F77DD;border:none;}
    .Matrix ul:first-of-type li:not(:first-of-type){display:none;}
    .Matrix ul li:first-of-type{width: 100%;}
    .Matrix ul:not(:first-of-type) li:not(:first-of-type) label{display:block;border:2px solid #5F77DD;margin: 5px;padding:3px 10px;border-radius: 0.35em;color:#5F77DD;font-weight:bold;background-color:#fff;font-size: 16px;cursor:pointer;}
    .Matrix ul:not(:first-of-type) li:not(:first-of-type) label > span{display:inline-block;}
    .Matrix ul li input[type="radio"]:checked + label, .Matrix ul li input[type="checkbox"]:checked + label{color:#fff;background-color:#5F77DD;}
    .Matrix ul:not(:first-of-type) li:not(:first-of-type) label:before{color:#fff;font-size:20px;content:"\2713";padding:5px 10px;}
    .Matrix ul li input[type="radio"]:checked + label:before, .Matrix ul li input[type="checkbox"]:checked + label:before{color:#fff;}
    
    .SummaryCell li{float: left;width:auto !important;}
    .SummaryCell li:first-of-type h2:after{content:":";padding-right:10px;}
}