/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

	div.calculator-main {
		background: #ecf0dd;
		padding: 20px;
	}
		div.calculator-main h3 {
			margin: 0;
		}
		div.calculator-main div.calculator-group {
			padding: 10px;
		}
		div.calculator-main div.calculator-group td.lbl {
			padding-bottom: 10px;
			vertical-align: top;			
			width: 450px;
		}
		div.calculator-main div.calculator-group td.inp {
			padding-bottom: 10px;
			vertical-align: top;
			width: 250px;
		}
		div.calculator-main td input[type=text] {
			text-align: right;
		}

		div.calculator-main td input.readonly {
			background: #ddd; color: #777;
		}
		div.calculator-main div.lbl {
			font-weight: normal;
			font-size: 18px;
		}
		div.calculator-main div.desc {
			font-weight: normal;
			font-style: italic;
			font-size: 13px;
		}
		input#reset, input#calculate {
			background-color: #91ad2c;
			color: #ffffff;
			font-size: 14px;
			padding-top: 14px;
			padding-bottom: 14px;
			padding-left: 20px;
			padding-right: 20px;
			vertical-align: middle;
			cursor: pointer;
			user-select: none;
			text-decoration: none;
			border: none;
			text-transform: uppercase;
    		}
		input#pay-now {
			background-color: #e5713e;
			color: #ffffff;
			font-size: 14px;
			padding-top: 14px;
			padding-bottom: 14px;
			padding-left: 20px;
			padding-right: 20px;
			vertical-align: middle;
			cursor: pointer;
			user-select: none;
			text-decoration: none;
			border: none;
			text-transform: uppercase;
    		}



	.mobile-only { display: none; }
	
	@media only screen and (max-width: 760px) {
		.desktop-only { display: none !important; }
		.mobile-only { display: block !important; }
		span.mobile-only { font-size: 11px; font-style: italic; }
		div.calculator-main table { 
			width: 100%; 
			border-collapse: collapse; 
		}
		div.calculator-main div.calculator-group td.lbl {
			width: 100%;
		}
		div.calculator-main div.calculator-group td.inp {
			width: 100%;
		}
		
		/* Force table to not be like tables anymore */
		div.calculator-main table, div.calculator-main thead, div.calculator-main tbody, div.calculator-main tr, div.calculator-main td { 
			display: block; 
		}
	
		div.calculator-main table { 
			border-top: 1px solid #ccc;
		}
		div.calculator-main tr { 
			border: 1px solid #ccc;
			border-top: none;
		}
	
		div.calculator-main td { 
			border: none;
			position: relative;
		}
	
		div.calculator-main td:before { 
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 6px;
			left: 6px;
			width: 45%; 
			padding-right: 10px; 
			white-space: nowrap;
		}
	}