.section { background-color:white; padding:10px 15px 10px 10px;margin-bottom:10px; }

.section-header {font-size: 14pt;width:100%;font-weight:normal;line-height:1;display:block;margin: 10px 0px 30px 0px; }
.section-subheader { font-size:11pt;width:100%;font-weight:bold;line-height:1;display:block;margin-left: 0px;margin: 10px 0px 10px 0px; }
.section-description { font-size:10pt;color:slategray;margin-top:-5px;margin-bottom: 10px;display:inline-block; }

.section-label-group {width:100%;display:inline-block;}
.section-label-left, .section-label-right, .section-label-single, .section-label-center {display:inline-block;float:left;min-width:100px;text-align:left;position:relative; }
.section-label-left { margin-right:50px; margin-bottom:30px; }
.section-label-center { margin-right:40px; margin-left:-10px; margin-bottom:30px; }

.section-label-single .mdl-selectfield {width: 100%;}
.section-label-single .mdl-selectfield .bar { width: 100%; }

.section-label-single { width:100%; }

.section-label-single .bar { width:100%; }

.section-label-single input[type='text'], .section-label-single textarea, .section-field-description, .section-field-charcount {width: 100%;}

.section-buttons {padding: 5px 5px 5px 0; text-align:center; }

    .section-buttons .btn, .section-buttons .btnLarge {
        display: inline-block;
        margin: 12px 0 0 6px;
    }
        .section-buttons .btn span, .section-buttons .btnLarge span {
            font-size: 13pt;
        }


.section-field-description { font-size:10pt;color:slategray;margin-top:5px;display:inline-block; }
.section-field-charcount { font-size:10pt;color:red;font-weight:bold;display:inline-block;margin-top:5px; }

.section-label-group {margin: 23px 0 0 0; }

@media only screen and (max-width: 767px) and (min-width: 480px) 
{
    .section-label-left, .section-label-right, .section-label-single { width:100% !important; }
    .section-label-left { margin-right:0px; margin-bottom:35px; }
    .section-label-right { margin-bottom:15px;}
    .section-label-left input, .section-label-right input, .section-label-single input { width: 99% !important; }

    .mdl-selectfield { width: 100% !important; }    
    .mdl-selectfield .bar { width: 100% !important; }

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

@media only screen and (max-width: 479px)
{
    .section-label-left, .section-label-right, .section-label-single { width:100%!important; }
    .section-label-left { margin-right:0px; margin-bottom:20px; }
    .section-label-right { margin-top:15px;margin-bottom:15px;}
    .section-label-left input, .section-label-right input, .section-label-single input { width: 99% !important; }

    .mdl-selectfield { width: 100% !important; }    
    .mdl-selectfield .bar { width: 100% !important; }

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

@media only screen and (max-width:400px) {
    
    .section-label-left, .section-label-right, .section-label-single { width:98%!important; }
    .section-label-left { margin-right:0px; margin-bottom:20px; }
    .section-label-right { margin-top:15px;margin-bottom:15px;}
    .section-label-left input, .section-label-right input, .section-label-single input { width: 98% !important; }

    .mdl-selectfield { width: 98% !important; }    
    .mdl-selectfield .bar { width: 100% !important; }

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

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

    .section-label-left, .section-label-right, .section-label-single { width:96%!important; }
    .section-label-left { margin-right:0px; margin-bottom:20px; }
    .section-label-right { margin-top:15px;margin-bottom:15px;}
    .section-label-left input, .section-label-right input, .section-label-single input { width: 96% !important; }

    .mdl-selectfield { width: 96% !important; }    
    .mdl-selectfield .bar { width: 100% !important; }

    .bar { width:98% !important; }
}