@import url("https://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,300,400,600,700,800");


html {
    overflow-y: scroll; 
	}

.fa {
	font-size: 16px;
	xcolor: #023a78;
	xcolor:#666;
	cursor:default;
	}



body * {
	font-family: 'Open Sans';
	font-size: 10pt;
	}


.wrapper {
	xborder: 1px solid red;
	xmax-width: 180mm;
	margin-left: auto;
	margin-right: auto;
	width: 180mm;
	width: 800px;
	xborder: 1px solid red;
	xpadding-bottom:200px;
	}

table.btgquote {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid black;
	margin-bottom: 20px;
	}

table.btgquote th {
	text-align: left;
	padding: 3px 4px 3px 4px;
	xcolor: white;
	border: 1px solid #023a78;
	border: 1px solid silver;
	font-weight: normal;
	background-color: #023a78;
	background-color: #ccc;
	height: 24px;
	}
table.btgquote td {
	height: 24px;
	}

table.btgquote th.subtotal {
	text-align: right;
	}
table.btgquote th.delete {
	text-align: center;
	}


table.btgquote td {
	padding: 3px 4px 3px 4px;
	border: 1px solid silver;
	font-weight: normal;
	}
table.btgquote td.quote-quantity-input {
	padding: 0px;
	text-align: center;
	width:30px;
	}

.right {
	text-align: right;
	}

.delete {
	text-align: center;
	}
td.quantity {
	width:30px;
	text-align: center;
	}
table.btgquote th.quantity {
	text-align: center;
	}

td.title {
	width:110px;
    white-space: nowrap;
	}

td.input {
	max-width:90%;
	}

td.textinput {
	padding: -5px;
	xbackground-color: yellow;
	}


input.name {
	width:100%;
	margin-top: -3px;
	margin-left: -4px;
	margin-bottom: -3px;
	border: 0px solid silver;
	padding: 3px 4px;;
	}	




td.newproduct {
	padding: 0px;
	}

div.selectwrap {
	margin-left: -4px;
	margin-top: -5px;
	margin-right: -4px;
	margin-bottom: -5px;
	xpadding: -10px;
	xwidth: 100%;
	}

select * {
	height: 24px;
	padding: 10px;
	line-height: 2em;
	}

tr.addnew * {
	background-color: #eee;
	font-style: italic;
	}

tr.btgonly *{
	background-color: #eee;
	}


select.productselect {
    -webkit-appearance: button;
    -moz-appearance: button;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-padding-end: 20px;
    -moz-padding-end: 20px;
    -webkit-padding-start: 2px;
    -moz-padding-start: 2px;
	border: 0px solid red;
    border-radius: 0px;
    xbox-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    color: #555;
    font-size: inherit;
    margin: 0;
    overflow: hidden;
    padding-top: 2px;
    padding-bottom: 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
	width: 100%;
	}
select::-ms-expand {
    display: none;
}

input.quote-quantity-input {
	border: 0px solid red;
	text-align: center;
	width: 30px;
	xmargin-top: -4px;
	xmargin-bottom: -4px;
	xbackground-color: silver;
	height: 24px;
	}

@media print {
    .noprint, .noprint * {
        display: none !important;
		}
	}

@media screen {
    .noscreen, .noscreen * {
        display: none !important;
		}
	}
/*Questions*/

div.question {
	background-color: #eee;
	padding: 12px;
	padding: 12px 12px 6px 12px;
	margin-bottom: 10px;
	border: 1px solid silver;
	border-radius: 8pt;
	}
div.question p{
	margin: 0;
	margin-bottom: 8px;
	}

div.question h2{
	font-size: 14pt;
	margin-top: -4;
	font-weight:normal;
	margin-bottom: 10px;
	color: #023a78;
	}
div.question span.p{
	display:block;
	color: #666;
	font-size: 10pt;
	margin-top: 8px;
	line-height: 1.4em;
	font-style:italic;
	margin-bottom:8px;
	}
div.question label{
	color: #666;
	xborder: 1px solid green;
	vertical-align: top;
	xmargin-top: 10px;
	xpadding-top: 10px;
	xdisplay: inline block;
	line-height:1.6em;
	}

div.infobox {
	background-color: #fff;
	padding: 10px 12px 6px 12px;
	margin-bottom: 10px;
	border: 1px solid silver;
	border-radius: 8pt;
	}
div.infobox p{
	margin: 0;
	margin-bottom: 6px;
	color: #023a78;
	font-style: italic;

	}



input.integer {
	width:30px;
	text-align:center;
	border-radius:6px;
	border-style: solid;
	border-color: CornflowerBlue;
	border-width: 1px;
	padding: 2px 3px;
	}

div.answer {
	padding-bottom: 4px;
	xborder: 1px solid red;
	}

div.question p.warning {
	color: red;
	}
span.warning {
	color: red;
	cursor:default;
	}


table.header {
	width:100%;
	margin-top:10px;
	margin-bottom:10px;
	}


table.header td{
	height: 52px;
	width: 50%;
	vertical-align:top;
	}

table.header h2{
	font-size:12pt;
	margin:0px;
	font-weight: 800;
	}
table.header h3{
	font-size:10pt;
	font-style:italic;
	margin:0px;
	color: #666;
	}

table.header td.logo{
	vertical-align:top;
	}

body {
	padding: 0px;
	margin: 0px;
	}






input:focus {
	outline: none;
	}
select:focus {
	outline: none;
	}


input[type="file"] {
    display: none;
}


input[type="submit"] {
    border: 1px solid silver;
    display: inline-block;
    padding: 6px 12px;
    cursor: default;
	background-color: #d0deff;
	border-radius: 4px;
	}

input[type="submit"]:focus{
	background-color: white;
	}

input#save-quote {
	background-color: #ffeca9;
	}

input#save-quote:focus {
	background-color: #ffeca9;
	}

a.button {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: default;
	background-color: #d0deff;
	border-radius: 4px;
	background-color: #ffeca9;
	text-decoration:none;
	color: black;
	}


.custom-button {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: default;
	background-color: #d0deff;
	border-radius: 4px;
	}

.custom-button-brand-open {
    border: 1px solid #ccc;
    color: #aaa;
    display: inline-block;
    padding: 6px 12px;
    cursor: default;
	background-color: white;
	border-radius: 4px;
	}



.green-button{
	background-color: #ffeca9 !important;
	}

.green-button:focus{
	background-color: #ffeca9 !important;
	}


.logout {
	background-color: white !important;
	border: 1px solid silver;
	color: #aaa;
	float: right;
	}
.back {
	background-color: #e3e3e3 !important;
	}
.custom-button:focus {
	background-color: white;
	}

.popup-hidden {
	display:none;
	position: fixed;
	width:10px;
	height:10px;
	top: -1000px;
	left: -1000px;
	}
.popup-show {
	display:block;
	position: fixed;
	top: 0px;
	left: 0px;
	width:100%;
	height:100%;
	background-color:rgba(0, 0, 0, 0.3);
	z-index: 99999;
	}
.popup-cover {
	display:block;
	position: fixed;
	top: 0px;
	left: 0px;
	width:100%;
	height:100%;
	}

.lexicon {
	max-width: 600px;
	display:block;
	background-color: white;
	padding: 12px;
	margin-bottom: 10px;
	border: 0px solid #888;
	border-radius: 8pt;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -300px;
	margin-left: -300px;
	box-shadow: 3px 3px 30px black;
	}

.lexicon table td{
	border: 0;
	}
.lexicon table h2{
	color: #023a78;
	font-size: 12pt;
	font-weight: 700;
	color: #023a78;
	}
	
.lexicon p{
	margin: 8px 0px !important;
	}

.lexicon em{
	font-style: normal;
	font-weight: 600 !important;
	}

.question em{
	xfont-style: normal;
	font-weight: bold;
	font-weight: 600;
	}

.lexicon ul{
	padding-left: 20px;
	}
.lexicon li{
	margin-bottom: 10px;
	}

div.brand-choice {
	xbackground-color: #eee;
	padding: 12px;
	margin-bottom: 10px;
	border: 1px solid silver;
	border-radius: 8pt;
	}

div.brand-choice table td h2{
	font-size: 14pt;
	margin-top: -4;
	font-weight:normal;
	margin-bottom: 0px;
	color: #023a78;
	}
div.brand-choice table td h3{
	font-size: 11pt;
	font-weight:normal;
	margin-top: 8;
	margin-bottom: 10px;
	color: #666;
	font-style:italic;
	}

div.brand-choice p{
	color: #666;
	font-size: 10pt;
	margin-top: 8px;
	line-height: 1.4em;
	}

textarea.remarks{
	display:block;
	width: 100%;
	resize: none;
	margin-bottom: 20px;
	height: 100px;
	border: 1px solid silver;
	padding: 10px;
	}
p.titleremarks {
	margin-bottom: 4px;
	}



div#buttonbar {
    background-color: white;
    overflow: hidden;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 30px;
	border-top: 1px solid silver;
	box-shadow: 0px 0px 70px 70px rgba(255,255,255,1);
	}

div.buttonwrap {
	width: 800px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	}
div.whitegradient {
    background-color: white;
    overflow: hidden;
    position: fixed;
	height:30px;
    left: 0;
    bottom: 0;
    width: 100%;
	text-align: center;
	box-shadow: 0px 0px 60px 60px rgba(255,255,255,1);
	}

div.scrollformore {
	width:100%;
	position: fixed;
	bottom: 100px;
	left:0px;
	text-align:center;
	}

div.scrollformore-brandpage {
	width:100%;
	position: fixed;
	bottom: 20px;
	left:0px;
	text-align:center;
	}

div.scrollformore .fa, div.scrollformore-brandpage .fa{
	font-size: 40px;
	color: #023a78;
	cursor:default;
	}

div.bottomreached {
	width:100%;
	position: fixed;
	bottom: 100px;
	left:0px;
	text-align:center;
	display:none;
	}
div.bottomreached-brandpage {
	width:100%;
	position: fixed;
	bottom: 20px;
	left:0px;
	text-align:center;
	display:none;
	}

div.bottomreached .fa, div.bottomreached-brandpage .fa {
	font-size: 40px;
	color: silver;
	cursor:default;
	}

div.TOTAL {
	position:fixed;
	text-align:center;
	top: 11px;
	left:0px;
	width: 100%;
	font-weight: 600;
	font-size: 12pt;
	padding-left:16px;
	}

div.TOTAL div{
    border: 1px solid #ccc;
	margin-top: -16px;
	margin-left: auto;
	margin-right: auto;
	width:80px;
    cursor: default;
	background-color: #ffeca9;
	background-color: #fff;
	padding: 14px 40px 12px 40px;
	color: #023a78;
	font-size: 12pt;
	border-radius: 0px 0px 36px 36px;
	box-shadow: 3px 0px 17px 0px rgba(2,58,120,.5);
	box-shadow: 3px 0.1px 20px 0px rgba(3,35,70,.5);
	}


div.brand-page-load {
	width: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	text-align:center;
	padding-top:14px;
	}

span.lexiconprice {
	font-size: 12pt;
	padding-left: 4px;
	font-weight: 700;
	color: #023a78;
	}

td.article i.fa {
	color:red;
	color: #023a78;
	color: silver;
	font-size: 11pt;
	}