body{margin:0;background-color:#fff;}
.preview{margin: 10px auto; width:320px;padding:5px;border:1px solid red;background-color:#fff;color:red;font-size:12px;text-align:center;font-weight:bold;border-radius:4px}
.admin-bar{height:24px; width:100%;margin-bottom: 10px;padding:5px;border-bottom:0px solid black;background-color:#CC6600;color:#fff;font-size:14px;text-align:center;font-weight:bold;-webkit-box-shadow: 0 4px 4px -4px black;
       -moz-box-shadow: 0 4px 4px -4px black;
            box-shadow: 0 4px 4px -4px black;}

.progress-container {
    width: 94%;
    height: 20px;
    position: relative;
    margin: 10px auto;
    background-color: #ffffff;
    font-size:12px;
    border:1px solid #656565;
    border-radius: 4px;
}

.progressbar {
    background-color: #656565;
    height: 100%;
    position: absolute;
    line-height: inherit;
    color: #fff !important;

}
.progressbar-label {
    color: #fff !important;
    padding-top:2px;
    text-align: center !important;
}

.survey{width:600px;margin: 8px auto;padding:5px 0 5px 0;font-family: Arial, Helvetica, sans-serif;font-size: 14px;line-height: 1.2;box-sizing: border-box;}
.survey-inner{margin:0;padding:0;}
.survey-logo{display:none;margin:10px 0;}
.survey-logo img {
    height: auto;
    max-width: 100%;
}
.survey-title {margin: 5px 0;padding: 2px 5px; font-size: 16px;line-height: 1.25; font-weight: bold;border-bottom-width:0; border-bottom-style:solid; border-bottom-color:#000}
.survey-desc{margin: 5px 0;padding: 0 10px;}

.mdl-data-table{background-color:transparent;border-width:0;white-space: normal;}
.mdl-data-table th{height:auto;padding: 0 8px 6px 8px;}
.mdl-data-table td{padding: 6px 9px;}
.mdl-checkbox{height:auto;}
.mdl-checkbox__box-outline, .mdl-radio__outer-circle{border-color: #656565;}
.mdl-checkbox.is-checked .mdl-checkbox__box-outline{ border-color: #3F51B5;}
.mdl-checkbox.is-checked .mdl-checkbox__tick-outline{background-color:#3F51B5;}
.mdl-radio.is-checked .mdl-radio__outer-circle{border-color: #3F51B5; }
.mdl-radio.is-checked .mdl-radio__inner-circle{background-color: #3F51B5; }
.mdl-radio.is-upgraded, .mdl-checkbox.is-upgraded{padding-left:20px;}
.mdl-data-table td:first-of-type, .mdl-data-table th:first-of-type {
    padding-left: 4px;
}
.image-radio input{ visibility: hidden; /* Makes input not-clickable */  position: absolute;}
.image-radio > input + img{ /* IMAGE STYLES */
  cursor:pointer;
  border:2px solid transparent;
}
.image-radio > input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */
  border:2px solid #3F51B5;
}
.image-radio img{max-width: 100%;max-height: 100%;}
.group{background-color:#001F4B;border:1px solid #001F4B;}
.group-title {padding:5px; font-size: 16px;color:#fff;font-weight:bold;}
.group-desc {padding:5px;font-size: 13px; color: #eee; font-weight: bold; font-style: italic;}
.group-inner{padding:10px;background-color:#fff;}
.section{display:inline-block;width:100%;margin: 8px 0;padding:8px;border:0px solid #ddd;background-color:#ddd;border-radius:4px;box-sizing: border-box;}
.section.section-inline {
  display: inline-block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 48%;
  margin-left: 2%;
  vertical-align: top;
}
.section.inlineleft {
    width: 45%;
    margin-right: 2%;
    margin-left: 0px;
}
.section.inlineright {
    margin-left: 2%;
    margin-right: 0px;
    width: 45%;
}
.section-divider{height:1px; margin: 5px auto; border-bottom:1px solid #222;}
.section-image img{
    height: auto;
    max-width: 100%;
}
.section-image-center{text-align:center;}
.section-image-right{text-align:right;}
.question-header{margin-top:0; padding:2px;font-size:18px;line-height:1.2;}
.question-text, .survey-question-inline{margin-top:2px; padding:2px;font-size:16px;line-height:1.2;}
.question-description{margin-bottom:6px; padding:2px;line-height:1.2;}
.inline{display:inline-block;margin-right:10px;}
.survey-question-num{display:none;padding-right:8px;}
.question-dropdown{padding-left:5px;}
.question-dropdown select{width: 100%; border: 1px solid rgb(96,125,139);border-radius:4px;}
.question-input{padding:0 5px;box-sizing: border-box;}
.question-input input[type="text"], .question-input textarea{width: 100%; padding:4px;border: 1px solid rgb(96,125,139);border-radius:4px;box-sizing: border-box;}
.question-input textarea{resize: none;}
.question-input table{ table-layout: fixed;width:100%;}
.question-input table th{font-weight:normal;}
.question-input-group{display:inline-block;margin:0 5px;text-align: center;}
.question-input-group label{display:block;}
.question-input-group input{margin:0 auto;}
[type="checkbox"], [type="radio"] {margin-right:4px;}
ul.choices{list-style:none;margin:6px 0; padding-left: 0;}
.choices li{margin:0 0 2px 0;}
.choices-horizontal li{display:inline-block;margin-right:8px}
.choices-columns-2, .choices-columns-3, .choices-columns-4, .choices-columns-5{vertical-align: top}
.choices-columns-2{display:inline-block;width:50%;}
.choices-columns-3{display:inline-block;width:33.3%;}
.choices-columns-4{display:inline-block;width:25%;}
.choices-columns-5{display:inline-block;width:20%;}
td .mdl-radio, td .mdl-checkbox{display:inline;}
th.center, td.center{text-align:center !important;}
.scale-radio{display: inline-block;margin-top:4px;text-align: center;vertical-align: top;}
.scale-label-box{display: inline-block;position: relative;margin-right:.1em;padding:.5em 1.1em;background-color:#fff;border:2px solid #ddd;border-radius:4px}
.scale-label-box:hover{cursor:pointer;}
.scale-label-box.is-checked{ border-color:#3F51B5;background-color:#ddde;}
.scale-label-box.is-checked .scale-radio-label{color:#3F51B5;font-weight:700;}
.scale-radio-label {display: inline-block;vertical-align: middle;line-height: 24px; }
.scale-radio-button, .rating-radio-button { position: absolute; height: 1px;width: 1px;margin: -1px;padding: 0; border: 0;clip: rect(0 0 0 0);overflow: hidden;}
.scale-label {  display: inline; white-space: nowrap; padding-top: 5px;}
.scale-label-left{   margin-right: 10px;vertical-align: bottom;}
.scale-label-right { margin-left: 10px;vertical-align: bottom;}
.section.section-inline .scale-label-box{display: block;margin-bottom:2px;}
.section.section-inline .scale-label {display:block;}
.section.section-inline .scale-label-right{margin-left:0;}
.rating-label-box{display:inline-block; width:36px;margin-right:4px;}
.rating-label, .rating-icon{display:inline-block;width:24px;font-family:"Material Icons";font-size:36px;}
.rating-icon{margin-right:8px;}
.rating-label-box.is-checked .rating-label{color:#3F51B5;}
.mdl-radio__label, .mdl-checkbox__label, .mdl-data-table, .question-input table{font-size:14px;}
.mdl-button{text-transform:none;}
.info-capture {display:block;margin-bottom:8px;}
.info-capture .question-input input[type="text"]{max-width:300px;}
.results-content{background-color:transparent !important;}
.screen-small{display:none;}
.center{text-align:center;}
.choice-text{padding-left:2px; padding-right:10px;}
.button {font-size: 14px; text-decoration: none;border:none;}
.button:hover{font-size: 14px;background: #929292;}
input, select, textarea {padding:4px 3px; border-style:solid;border-width:1px;border-color:#ddd;}
.question-input table select {width:100%;}
.survey-bottom{margin-top:8px;}
.error-msg{margin: 4px 20px;padding:5px;border:0 solid #bbb;background-color:#CC6666;border-radius:4px;text-align:center;}

.share-options{margin-top:5px;padding:5px;}
.share-options span{font-weight:bold;}
.share-options ul{display:inline-block;margin:0;padding-left:5px;list-style-type:none;}
.share-options li{display:inline-block;}
.share-options li a{display:block;margin-right:2px;}

@media screen and (min-width: 320px) and (max-width: 521px) {
  .preview{width:300px;margin:5px auto;font-size:10px;}
  .error-msg { margin:2px 5px}
  .survey {
     width:100% !important;
     padding-left:10px;
     padding-right:10px;
  }
  table.grid-dropdown, table.grid-dropdown tbody, table.grid-dropdown tbody tr {display:block;}
  table.grid-dropdown tbody tr th, table.grid-dropdown tbody tr td {display:block;width: auto !important;}

  table.grid-layout thead {display:none;}
  table.grid-layout, table.grid-layout tbody, table.grid-layout tbody tr {display:block;}
  table.grid-layout tbody tr th, table.grid-layout tbody tr td {display:block;width: auto !important;}
  .mdl-data-table td:first-of-type{padding-left:0;}
  .mdl-data-table tbody tr{height:auto;}
  table.grid-layout tbody tr{padding-bottom: 6px;}
  table.grid-layout tbody th.center, table.grid-layout tbody td.center{padding-left:5px;text-align:left !important;}
  table.grid-layout > tbody > tr > td{
      display: block;
      position: relative;
      vertical-align: top;
      text-align: left;
      margin: 1px;
      padding: 0;
      min-height: 20px;
      max-height: 32px;
      border: 1px solid transparent;
  }
  .screen-small{display:inline;}
  .scale-label-box{display: block;margin-bottom:2px;}
  .scale-label {display:block;}
  .scale-label-right{margin-left:0;}
  .choices-columns-2, .choices-columns-3, .choices-columns-4, .choices-columns-5{width:100%;margin-bottom: 0 !important;}
}
@media screen and (min-width: 260px) and (max-width: 375px) {
     .survey { width: 1px !important;
            min-width: 100% !important;
        *width: 100% !important;
  }
}
@media only screen and (min-device-width: 362px) and (max-device-width: 521px) and (orientation: portrait) {
  .survey {
     width:100% !important;
     padding-left:10px;
     padding-right:10px;
  }
  table.grid-dropdown, table.grid-dropdown tbody, table.grid-dropdown tbody tr {display:block;}
  table.grid-dropdown tbody tr th, table.grid-dropdown tbody tr td {display:block;width: auto !important;}
}

@media only screen and (min-device-width: 362px) and (max-device-width: 521px) and (orientation: landscape) {
  .survey {
	width:100% !important;
	padding-left:10px;
     	padding-right:10px;
  }
  table.grid-dropdown, table.grid-dropdown tbody, table.grid-dropdown tbody tr {display:block;}
  table.grid-dropdown tbody tr th, table.grid-dropdown tbody tr td {display:block;width: auto !important;}
}

/* Allow Overflowing */
/* body, #survey {
    height: 100%;
    overflow: auto;
} */
