form{
    margin: 20px 0;
}
/**form input, button{
    padding: 5px;
}**/
table{
    width: 100%;
    margin-bottom: 20px;
    border-collapse: collapse;
}
table th, table td{
    padding: 1px;
    text-align: left;
}
form label span{
    padding: 5px;
}    


#recycle-permit .form-button-disabled,
#dpw .form-button-disabled,
#dpwf .form-button-disabled
{
background-color: #bbb !important;
}

#confirmBox
{
display: none;
background-color: #eee;
border-radius: 5px;
border: 1px solid #aaa;
position: fixed;
width: 675px;
height: 100px;
left: 50%;
top: 30%;
margin-left: -450px;
padding: 6px 8px 8px;
box-sizing: border-box;
text-align: center;
}
#confirmBox .button {
background-color: #ccc;
display: inline-block;
border-radius: 3px;
border: 1px solid #aaa;
padding: 2px;
text-align: center;
width: 80px;
cursor: pointer;
}
#confirmBox .button:hover
{
background-color: #ddd;
}
#confirmBox .message
{
text-align: left;
margin-bottom: 8px;
}


#recycle-permit .error,
#dpw .error,
#dpwf .error{
color: red !important;
font-weight: bold;
font-style:italic;
display: inline;
width: auto;
}  
#dpw .required {
color: red !important;
font-weight: bold;
display: inline;
width: auto;
}

/* Mark input boxes that gets an error on validation: */
#recycle-permit input.invalid {
background-color: #ffdddd;
}

/* Hide all steps by default: */
#recycle-permit .tab {
display: none;
}

#recycle-permit button {
background-color: #4c61af;
color: #ffffff;
border: none;
padding: 10px 20px;
font-size: 17px;
font-family: Raleway;
cursor: pointer;
}

#recycle-permit button:hover {
opacity: 0.8;
}

#recycle-permit #prevBtn {
/**background-color: #bbbbbb;*/
}

/* Make circles that indicate the steps of the form: */
#recycle-permit .step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;  
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}

#recycle-permit .step.active {
opacity: 1;
}

/* Mark the steps that are finished and valid: */
#recycle-permit .step.finish {
background-color: #4c61af;
} 

/**DPW Form **/
#dpw #dmp-permit-error .error{
color: red;
font-weight: bold;
font-style:italic;
display: inline;
width: auto;
} 
/* Hide all steps by default: */
#dpw .tab {
display: none;
}

#dpw button {
background-color: #4c61af;
color: #ffffff;
border: none;
padding: 10px 20px;
font-size: 17px;
font-family: Raleway;
cursor: pointer;
}

#dpw button:hover {
opacity: 0.8;
}

#dpw #prevBtn {
/**background-color: #bbbbbb;*/
}

/* Make circles that indicate the steps of the form: */
#dpw .step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;  
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}

#dpw .step.active {
opacity: 1;
}

/* Mark the steps that are finished and valid: */
#dpw .step.finish {
background-color: #4c61af;
} 





/* Form Styles */

form#dpw .tab.active,
form#recycle-permit .tab.active {
margin-top: 2em;
padding: 3em;
border-top: 1px solid #ddd;
}
form#recycle-permit .tab.active {
padding: 3em 0;
}
form#dpw .dmp-permit-lookup-result,
form#recycle-permit .dmp-permit-lookup-result{
padding-left: 1em;
color: #6b7a2e;
}
form#dpw #dmp-permit-numbers {
max-width: 400px;
}
form#dpw legend,
form#recycle-permit legend {
border: none;
font-size: 18px;
font-weight: bold;
}
form#dpw input,
form#dpw select,
form#dpwf input,
form#dpwf select,
form#recycle-permit input,
form#recycle-permit select {
height: 2.75em;    
   width: 420px;
margin-bottom: 1.5em;
padding: 0.5em; 
border: 2px solid #ccc;
border-radius: 0.25em;
}
form#dpw input[type="text"]:focus,
form#dpw select:focus,
form#recycle-permit input[type="text"]:focus,
form#recycle-permit select:focus {
background-color: #ffffca;
border: 2px solid #00819d;
}
form#dpw input[type="radio"],
form#dpw input[type="radio"] + span,
form#dpwf input[type="radio"],
form#dpwf input[type="radio"] + span,
form#recycle-permit input[type="radio"],
form#recycle-permit input[type="radio"] + span,
form#recycle-permit input[type="checkbox"],
form#recycle-permit input[type="checkbox"] + span {
display: inline-block;
height: auto;
width: auto;
padding: 1em 0.5em;
}
form#recycle-permit input[type="checkbox"] {
height: 1.25em;
width: 1.25em;
margin-right: 0.5em;
vertical-align: sub;
}
form#dpw input[type="file"],
form#recycle-permit input[type="file"] {
border: none !important;
}
form#dpw fieldset,
form#dpwf fieldset,
form#recycle-permit fieldset {
margin-bottom: 2em;
}
form#dpw .button-section,
form#dpwf .final-button-section,
form#recycle-permit .button-section {
margin-bottom: 3em;
text-align: right;
}
form#dpw input[type="button"],
form#dpw input[type="reset"],
form#recycle-permit input[type="button"],
form#recycle-permit input[type="reset"],
form#dpwf input[type="button"],
form#dpwf input[type="reset"] {
height: 2.75em;
width: auto;
min-width: 100px;
padding: 0.5em;
border: none;
border-radius: 0.25em;
color: #fff;
font-weight: bold;
opacity: 1;
}
form#dpw input[type="button"]:hover,
form#dpw input[type="reset"]:hover,
form#recycle-permit input[type="button"]:hover,
form#recycle-permit input[type="reset"]:hover {
opacity: 0.75;
transition: 0.5s;
}
form#dpw #dmp-cancel,
form#dpw #dmp-permit-cancel,
form#dpwf #dmp-f-cancel,
form#recycle-permit input[type="reset"],
form#recycle-permit .delete-row,
form#recycle-permit #rp-cancel {
background-color: #d94e4c;
}
form#dpw #dmp-save,
form#dpwf #dmp-f-save,
form#recycle-permit #rp-save,
form#recycle-permit .add-row {
background-color: #6b7a2e;
}
form#dpw #dmp-permit-lookup,
form#dpw #dmp-permit-login,
form#dpw #nextBtn,
form#dpw #prevBtn,
form#dpwf #dmp-f-permit-lookup,
form#dpwf #nextBtn,
form#dpwf #prevBtn,
form#recycle-permit #rp-permit-lookup,
form#recycle-permit #nextBtn,
form#recycle-permit #prevBtn,
form#recycle-permit #rp-login,
form#dpwf #dmp-f-login {
background-color: #00819d;
}
form#recycle-permit table {
    border: none;
}
form#recycle-permit table tbody tr td input {
width: auto !important;
}
form#recycle-permit table thead {
font-size: 0.8em;
}
form#recycle-permit #recycle-permit-materials > tr > td + td input[type=text] {  
width: 98px !important; 
}

form#recycle-permit #recycle-permit-materials > tr > td + td + td input[type=text] {  
width: 75px !important; 
}

form#dpw input + span.error,
form#dpw select + span.error,
form#dpwf input + span.error,
form#dpwf select + span.error,
form#recycle-permit input + span.error,
form#recycle-permit select + span.error,
form#recycle-permit #ci-facility-type-error + span.error {
display: block !important;
margin-top: -1.5em;
margin-bottom: 1.5em;
Xfont-weight: normal !important;
}
form#recycle-permit #ci-facility-type-error {
margin-top: 0.5em;
}
form#recycle-permit #recycle-permit-materials select {
width: auto !important;
}
form#recycle-permit #recycle-permit-materials .delete-row {
min-width: auto !important;
}
form#dpw #page-number,
form#dpwf #page-number,
form#recycle-permit #page-number {
border-top: 1px solid #ddd;
padding-top: 1em;
text-align: center;
color: #777;
}

@media (max-width: 640px){
form#recycle-permit h4 {
    font-size: 28px;
    font-weight: bold;
}
form#dpw .tab.active,
form#recycle-permit .tab.active {
    padding: 2em 0;
}
form#dpw legend,
form#recycle-permit legend {
    font-size: 32px;
}

form#dpw .button-section,
form#recycle-permit .button-section {
    margin-bottom: 1em;
}
form#dpw input,
form#dpw select,
form#recycle-permit input,
form#recycle-permit select {
    width: 100%;		
}
form#dpw input[type="radio"],
form#dpw input[type="radio"] + span,
form#recycle-permit input[type="radio"],
form#recycle-permit input[type="radio"] + span {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 1em 0.5em;
}
form#dpw input[type="radio"],
form#recycle-permit input[type="radio"] {
    width: 1em;
    height: 1em
}
form#dpw input[type="button"],
form#dpw input[type="reset"],
form#recycle-permit input[type="button"],
form#recycle-permit input[type="reset"] {
    width: auto;
    min-width: 140px;
}
form#recycle-permit input.add-row, 
form#recycle-permit input.delete-row {
    width: calc(50vw - 25px) !important;
}
form#dpw #dmp-permit-numbers,
form#recycle-permit #rp-permit-number {
    max-width: 100%;
    margin-bottom: 0;
}
form#dpw #dmp-permit-lookup,
form#recycle-permit #rp-permit-lookup {
    width: 100%;
    margin-bottom: 0.5em;
}
form#dpw .dmp-permit-lookup-result,
form#recycle-permit .dmp-permit-lookup-result {
    display: block;
    text-align: right;
}
form#recycle-permit table thead {
    display: none;
}
form#recycle-permit table tbody tr td:first-child {
    position: absolute;
    left: 2em;
    padding: 0;
}
form#recycle-permit table tbody tr td {
    display: block;
    padding-left: 3em;
}
form#recycle-permit table tbody tr td input {
       width: 100% !important;
}
form#recycle-permit table tbody tr td input[type="checkbox"] {
    height: 1.25em;
    width: 1.25em !important;
    margin-top: 1em;
}
form#recycle-permit table tbody tr td:before {
    display: block;
    font-size: inherit;
    text-align: left; 
}
   form#recycle-permit table tbody  tr {
    background-color: rgb(107 122 47 / 0.15);
    border-bottom: 1em solid #fff;
}
form#recycle-permit table tbody tr td:first-child + td:before {
    content: "Material Type";
}
form#recycle-permit table tbody tr td:first-child + td + td:before {
    content: "Quantity by weight in lbs or tons";
}
form#recycle-permit table tbody tr td:first-child + td + td + td:before {
    content: "Date received or Picked up";
}
}






form#recycle-permit .tab.active table {
    width: 150%;
    max-width: 150%;
}

form#recycle-permit .tab.active .overflow-scroll {
	overflow: scroll;
}
