/* ---------------------------------------------------------------------
   GLOBAL TEXT SIZE -- the one place to change it.

   Every font-size in usptostrap and in datalink's own stylesheets is now
   expressed in rem, so this single value scales all text proportionally.
   The rem basis is 10px: 1.3rem = 13px, 1.4rem = 14px, and so on.

   usptostrap sets html{font-size:10px} itself (a Bootstrap 3 convention);
   app.css loads after it in every header, so this overrides it everywhere.

   Range: usptostrap sizes its containers in fixed px (inputs are 32px tall,
   the switch pill 23px), and those do NOT scale with this. Text grows inside
   fixed boxes, so roughly 10-12.5px is the usable range. Past ~13px the text
   starts to crowd the inputs. Verify changes in style.php before deploying.
   --------------------------------------------------------------------- */
html {
	font-size: 11.5px;   /* 10px = original sizing; 11.5px = ~15% larger */
	}

body {
    font-family: 'FranklinGothicFSBook';
	margin-bottom:100px;
	margin-top:100px;
	}

#section {
	margin:auto;
	max-width:800px;
	padding-top:50px;
	}
	
h1, h2, h3, h4 {
    font-family: 'FranklinGothicFSBook';
	font-weight:400;
	color:#58595B;
	}
	
h4 { 
	margin-top: 20px;
	margin-bottom: 0px	
	}
			
.button {	
	display:block;	
    float:right;
    margin-left:10px;
	}
	
.bold, th {
	font-family: 'FranklinGothicFSDemi', "Franklin Gothic Bold", Arial, sans-serif;	
	font-weight:normal;	
	}	

p {
	font-size: 1.4rem;
	}	
	
label:not(.switch-label):not(.radio-inline) {
    font-family: 'FranklinGothicFSMedium';
/*	text-transform:uppercase;
*/	display:block;
	background-color: rgba(240, 237, 227, 0.5);
	padding-left:15px;
	padding-right: 15px;
	padding-top:5px;
	padding-bottom:2px;
	margin-bottom:0px;
	color:#58595B;
	font-weight:400;
	text-align:left;
	}	

label:not(.switch-label):not(.radio-inline):hover {
	background-color: rgba(240, 237, 227, 0.85);
	}	

.label.subtle {
	font-size: 85%;
	font-weight: normal;
	}

.switch {
	text-align:center;
	padding-top:2px;
	padding-bottom: 2px;
	border: 2px solid rgba(240, 237, 227, 0.5);
	}
		
.switch > label::before {
	font-weight: 400;
    background: #f3f1ea;
    color: #58595B;	
    border-radius: 23px;
	height: 23px;
	line-height: 23px;
	font-size: 1.1rem;
	}
		
.switch > input:checked + label::before {
    background: #004C97;
    color: #FFF;
	}

.switch > label::after {
    box-shadow: 1px 1px 1px rgba(50,50,50,.1);
    width: 17px;
	height: 17px;
	}

.switch > input:checked + label::after {
    left: -27px;
	}

label.radio-inline {
	background-color:transparent;
	}
	
div#form-section	{
	margin-left:10px;
	margin-right:10px;	
	}
	
input.form-control, textarea.form-control {
	border: 2px solid rgba(240, 237, 227, 0.5);
	border-radius: 0px; 
	padding: 4px 12px;
	}

label.error {
	background-color:#FFF;
	color:#FF8200;
	padding-right: 6px;
	border: 1px solid;
	border-color: #FF8200;
	border-top:0px;
	text-align:right;
	}

label.error-alt {
	color: #FF8200 !important;
	}
		
input.form-control.error, textarea.form-control.error {
	border: 1px solid;
	border-color: #FF8200;
	padding: 5px 13px;
	border-bottom:0px;
	}

input[type="number"], input.field-money {
	text-align: right;
	}
			
.estimate_area {
	min-height:56px;
	background-color:rgba(240, 237, 227, 0.5);
	margin-bottom:8px;
	text-align: right;
}

.estimate {
	padding:5px;
	border: 2px solid rgba(240, 237, 227, 0.5);
}

.estimate::before {
	content: "$";
}

.options {
	padding-top:1px;
	padding-bottom:2px;
	padding-left:5px;
	border: 2px solid rgba(240, 237, 227, 0.5);	
	}
	
.select {
	position: relative;
	display: inline-block;
	width: 100%;
	margin-bottom: 15px;
}

.select select {
	display: inline-block;
	width: 100%;
	padding: 5px 15px;
	cursor: pointer;
	color: #58595B;
	border: 2px solid rgba(240, 237, 227, 0.5);
	border-radius: 0;
	outline: 0;
	background: #FFF;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.select select::-ms-expand {
	display: none;
}	

.select select:hover,
.select select:focus {
	color: #000;
	background: #ccc;
}

.select select:disabled {
	pointer-events: none;
	opacity: .5;
}

.select__arrow {
	position: absolute;
	top: 12px;
	right: 15px;
	width: 0;
	height: 0;
	pointer-events: none;
	border-width: 8px 5px 0 5px;
	border-style: solid;
	border-color: #58595B transparent transparent transparent;
}
.select select:hover ~ .select__arrow,
.select select:focus ~ .select__arrow {
	border-top-color: #000;
}

.select select:disabled ~ .select__arrow {
	border-top-color: #ccc;
}

	
/* RECEIPT PRINT */
table#content table {
	margin-top:5px;
	}	
table#content table td, table#content table th {
	padding:5px;
	}
table#content table p {
	margin:5px;
	padding:5px;
	}

td.icon-holder { position: relative; }