<style>


/* FOR WIDER SCREEN / HORIZONTAL ORIENTATION */

@media only screen and (min-width: 576px) {
		.tight-col-left {
			padding-right:3px;
		}

		.tight-col-middle {
			padding-left:3px;
			padding-right:3px;
		}


		.tight-col-right {
			padding-left:3px;
		}

}



/* FOR NARROW SCREEN / VERTICAL ORIENTATION */

@media only screen and (max-width: 576px) {

	.btn-mobile-desc {
		font-size:5vw !important;
		height:20vw !important;
		text-align:center;
	}

	.input-mobile-total {
		text-align:center !important;
	}

	.input-mobile-desc {
		font-size:6vw !important;
		text-align:center !important;
		font-weight:800 !important;
	}


	.product-row {
		border-top:2px solid #aaa;
		border-bottom:2px solid #aaa;
		padding:3px 0px;
	}

	.directory-row {
		border-top:2px solid #aaa;
		border-bottom:2px solid #aaa;
		padding:5px 0px;
	}

	.directory-header {
		text-align:center;
		margin-top:50px;
	}

  .mobile-center {
  	text-align:center;
  }

  .mobile-unpadded {
  	padding: 0px;
  }

	.attendance-name {
		font-size:2rem;
		margin-top:30px;
	}

	.ripat-btn {
		margin:10px 0px;
	}

}

.special-perday-column {
    max-width: 20% !important;
}



.mobile-body {
	background-image: url("/images/body-background.png");
	padding:10px;
}


.btn-mobile {
	background-image: url("/images/form-background.png");
	font-size:7vw;
	color:#111;
	overflow:hidden;
}


.btn-mobile-smaller {
	background-image: url("/images/form-background.png");
	color:#111;
	overflow:hidden;
	font-size:5vw;
	padding:15px 3px;
	font-weight:800;
}

.btn-mobile-data {
	background-image: url("/images/concrete_small.png");
	font-size:3vw;
	color:#111;
	overflow:hidden;
	text-align:center;
	padding-right:20px;
	line-height:1.2;
}

.btn-mobile-data-top {
	border-radius:5px 5px 0px 0px;
	margin-bottom:0px !important;
	border-bottom:0px;
}

.btn-mobile-data-middle {
	border-radius:0px;
	border-bottom:0px;
	margin-bottom:0px !important;
	margin-top:0px !important;
}

.btn-mobile-data-bottom {
	border-radius:0px 0px 5px 5px;
	margin-top:0px !important;
}


.btn-mobile-disabled {
	background-image: url("/images/form-background.png");
	font-size:7vw;
	color:#bbb;
	font-weight:400;
	overflow:hidden;
}


.btn-mobile-action {
	font-size:5vw;
	min-height:5vw;
	overflow:hidden;
	background-color:#eee;
}

.btn-mobile-leftact {
	position: absolute;
    left: 20px;
    font-size: 8vw;
    width: 15vw;
    margin-top:5px;
}

.btn-saver {
	background-color:#dbffc482;
}

.mobile-smaller-text {
	font-size:5vw;
}


.mobile-smallest-text {
	font-size:3vw;
}

.mobile-field-label {
	text-align:right;
	color:grey;
	font-size:4vw !important;
};

.btn-mobile-special {
	background-image:none;
	background-color:yellow;
	font-size:7vw;
	font-weight:1000;
	color:black;
}


.input-mobile-desc {
	margin-top:10px;
	width: 100%;
    min-height: 8.5vw;
    text-align: left;
    font-size: 2vw;
    padding:10px;
    line-height:1;
    overflow:hidden;
    font-stretch:extra-condensed;
}

.btn-mobile-desc {
	margin-top:10px;
	width: 100%;
    min-height: 8.5vw;
 	text-align:left;
    font-size: 2vw;
    padding:10px;
    border:1px solid grey;
    background-color:#ddd;
    line-height:1;
    overflow:hidden;
}




.input-mobile-qty {
	margin-top:10px;
	width: 100%;
    min-height: 6vw;
    text-align: center;
    font-size: 5vw;
    padding:10px;
    font-weight:bold;
}


.input-mobile-price {
	margin-top:10px;
	width: 100%;
    min-height: 6vw;
    text-align: center;
    font-size: 5vw;
    padding:10px;
    font-weight:bold;
    color:#999;
}

.input-mobile-total {
	margin-top:10px;
	width: 100%;
    min-height: 6vw;
    text-align: right;
    font-size: 5vw;
    padding:10px;
    font-weight:bold;
    color:#444;
    background-color:#eee;
}


.contact-container {
	padding:20px 5px;
}

.invoice-line {
	border-bottom:1px solid grey;
	padding:5px 0px;
}

.product-identifier {
	padding-top:10px;
	text-align:left;
	line-height:1;
}

.table-mobile-invoice td {
	border-bottom:1px solid grey;
	line-height:1.2;
	padding:5px;
}


.show2 {
	display:none;
}

.show3 {
	display:none;
}


.contact-search {
	font-size:7vw;
	text-align:center;
	font-weight:700;
	padding:10px;
}

.result-button {
	overflow:hidden;
	text-align:left;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #ddd;
  font-weight:300;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #ddd;
  font-weight:300;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #ddd;
  font-weight:300;
}

.tap-container {
	max-width:900px;
	margin:10px auto;
}

.btn-tap-header {
	background-image: url("/images/bg-mooning.png");
	line-height:1;
	overflow:hidden;
	border:1px solid grey;
}

.btn-tap-action {
	background-image: url("/images/bg-metal.png");
	line-height:1;
	overflow:hidden;
	border:1px solid grey;
	padding:10px;
	font-size:1.2rem;
}

.btn-tap-person {
	background-image: url("/images/bg-concrete.png");
	line-height:1;
	overflow:hidden;
	border:1px solid grey;
}

.tap-divider {
	width:100%; text-align:center; 
	background-image: url("/images/bg-mooning.png"); 
	margin-bottom:10px;
	margin-top:20px;
}

.tap-person-data {
	font-weight:700;
	color:black;
	line-height:1.1;
}

/* ********* RUBRICS *********** */
.rubric-title {
  text-align:right; 
  font-weight:bold;
  padding-right:10px;
}

.rubric-data {
  text-align:center;
  font-weight:300;
  font-size:.6rem;
  color:grey;
  vertical-align:middle;
}

.rubric-selected {
  color:black;
  font-weight:600;
  background-color:#e5ffbc;
}

th.rotate {
  /* Something you can count on */
  height: 140px;
  white-space: nowrap;
}

th.rotate > div {
  transform: 
    /* Magic Numbers */
    translate(18px, 51px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
  width: 30px;
}
th.rotate > div > span {
  border-bottom: 1px solid #ccc;
  padding: 5px 10px;
}


</style>

