/* The px unit thus shields you from having to know the resolution of the device. Whether the output is 96 dpi, 100 dpi, 220 dpi or 1800 dpi, a length expressed as a whole number of px always looks good and very similar across all devices. But what if you do want to know the resolution of the device, e.g., to know if it is safe to use a 0.5px line? The answer is to check the resolution via Media Queries. Explaining Media Queries is out of scope for this article, but here is a small example:
		div.mybox { border: 2px solid }
		@media (min-resolution: 2dppx) {
			/* Media with 2 or more dots per px */
		/*div.mybox { border: 1.5px solid }
		}*/
    /* Variables */
    .form-group {
		--input-width-479: 15em;
		--input-padding-479: .2em .2em;
		--input-margin-479: .2em 0;
		
		--btn-padding: .2em .4em .2em .4em;
		--dropbtn-padding: .2em .4em .2em .4em;
    }
    
    @media screen and (max-width: 479px) { /* start of phone styles */
    /* Table Group */
	table, thead, tbody, tr, th, td {
		display: block;
	}
	.datatable th {
		padding-top: .2em;
		padding-bottom: .2em;
	}
	/*thead tr { Uncommenting this item will cause the heading row to be hidden
		position: absolute;
		top: -9999px;
		left: -9999px;
	}*/
	tr {
		margin-bottom: 1em;
	}
	/*  */
    .header {
		padding: .2em .5em .2em .5em;
    }
    .btn {
		padding: var(--btn-padding);
	}
	.dropbtn {
		padding: var(--dropbtn-padding);
	}
    .spanmain { /* Used in includes/heading for sizing the text */
        font-size: 24pt;
    }
    .spansub { /* Used in includes/heading for sizing the text */
        font-size: 18pt;
    }
	.form-container {
		width: 20em;
	}
	.form-group {
		padding: .1em .1em .1em .1em; /* This puts the area around the form items */
	}
	/* Input formatting */
	input[type=text] {
		width: var(--input-width-479);
		padding: var(--input-padding-479);
		margin: var(--input-margin-479);
	}
	input[type=date] {
		width: var(--input-width-479);
		padding: var(--input-padding-479);
		margin: var(--input-margin-479);
	}
	input[type=password] {
		width: var(--input-width-479);
		padding: var(--input-padding-479);
		margin: var(--input-margin-479);
	}
	input[type=number] {
		width: var(--input-width-479);
		padding: var(--input-padding-479);
		margin: var(--input-margin-479);
	}
	select {
		width: var(--input-width-479);
		padding: var(--input-padding-479);
		margin: var(--input-margin-479);
	}
	input[type=submit] { /* This width is different than the above because of the type */
		width: auto; /* There was extra space like padding on either side of the text, this was the only way I could get rid of that */
		padding: var(--btn-padding);
		margin: var(--input-margin-479);
	}
    }
    @media screen and (min-width: 480px) and (max-width: 824px) { /* start of medium tablet styles */
    .header {
		padding: .2em .5em .2em .5em;
    }
    .btn {
		padding: var(--btn-padding);
	}
	.dropbtn {
		padding: var(--dropbtn-padding);
	}
    .spanmain { /* Used in includes/heading for sizing the text */
        font-size: 30pt;
    }
    .spansub { /* Used in includes/heading for sizing the text */
        font-size: 24pt;
    }
	.sectional-edit {
		padding: 1em 10em 1em 10em;
	}
	.form-group {
		padding: .1em .1em .1em .1em; /* This puts the area around the form items */
	}
	.form-container {
		width: 20em;
	}
	/* Input formatting */
	input[type=text] {
		width: var(--input-width-479);
		padding: var(--input-padding-479);
		margin: var(--input-margin-479);
	}
	input[type=date] {
		width: var(--input-width-479);
		padding: var(--input-padding-479);
		margin: var(--input-margin-479);
	}
	input[type=password] {
		width: var(--input-width-479);
		padding: var(--input-padding-479);
		margin: var(--input-margin-479);
	}
	input[type=number] {
		width: var(--input-width-479);
		padding: var(--input-padding-479);
		margin: var(--input-margin-479);
	}
	select {
		width: var(--input-width-479);
		padding: var(--input-padding-479);
		margin: var(--input-margin-479);
	}
	input[type=submit] { /* This width is different than the above because of the type */
		width: auto; /* There was extra space like padding on either side of the text, this was the only way I could get rid of that */
		padding: var(--btn-padding);
		margin: var(--input-margin-479);
	}
    }
    @media screen and (min-width: 825px) and (max-width: 1281px) { /* start of large tablet styles */
    .header {
		padding: .2em .5em .2em .5em;
    }
    .spanmain { /* Used in includes/heading for sizing the text */
        font-size: 34pt;
    }
    .spansub { /* Used in includes/heading for sizing the text */
        font-size: 28pt;
    }
	.sectional-edit {
		background: url(/images/vfrsectional.png);
		padding: 1em 15em 1em 15em;
        border-radius: 10px 10px 0px 0px;
	}
	.form-group {
		padding: .1em .1em .1em .1em; /* This puts the area around the form items */
	}
	/* Input formatting */
	input[type=text] {
		width: var(--input-width-479);
		padding: var(--input-padding-479);
		margin: var(--input-margin-479);
	}
	input[type=date] {
		width: var(--input-width-479);
		padding: var(--input-padding-479);
		margin: var(--input-margin-479);
	}
	input[type=password] {
		width: var(--input-width-479);
		padding: var(--input-padding-479);
		margin: var(--input-margin-479);
	}
	input[type=number] {
		width: var(--input-width-479);
		padding: var(--input-padding-479);
		margin: var(--input-margin-479);
	}
	select {
		width: var(--input-width-479);
		padding: var(--input-padding-479);
		margin: var(--input-margin-479);
	}
	input[type=submit] { /* This width is different than the above because of the type */
		width: auto; /* There was extra space like padding on either side of the text, this was the only way I could get rid of that */
	}
    }
    @media screen and (min-width: 1281px) { /* Laptop Desktop styles */
    .header {
		padding: .2em .5em .2em .5em;
    }
	.sectional-edit {
		background: url(/images/vfrsectional.png);
		padding: 1em 20em 1em 20em;
        border-radius: 10px 10px 0px 0px;
	}
	.form-group {
		padding: .1em .1em .1em .1em; /* This puts the area around the form items */
	}
	/* Input formatting */
	input[type=text] {
		width: var(--input-width-479);
		padding: var(--input-padding-479);
		margin: var(--input-margin-479);
	}
	input[type=date] {
		width: var(--input-width-479);
		padding: var(--input-padding-479);
		margin: var(--input-margin-479);
	}
	input[type=password] {
		width: var(--input-width-479);
		padding: var(--input-padding-479);
		margin: var(--input-margin-479);
	}
	input[type=number] {
		width: var(--input-width-479);
		padding: var(--input-padding-479);
		margin: var(--input-margin-479);
	}
	select {
		width: var(--input-width-479);
		padding: var(--input-padding-479);
		margin: var(--input-margin-479);
	}
	input[type=submit] { /* This width is different than the above because of the type */
		width: auto; /* There was extra space like padding on either side of the text, this was the only way I could get rid of that */
	}
    }