/*
file: style.css
project: gyft clover app
lastmod: 7-28-15 jhummel
note: for demo used after latest version of clover shared.min.css
*/

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@viewport { width: device-width; }

body {
	min-width: 320px;
}

strong {
	font-weight: bold;
}

.clearfix {
	*zoom: 1;
	margin: 0 !important;
	padding: 0 !important;
}

.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

.hide {
	display: none !important;
}

.left {
	float: left;
}

.right {
	float: right;
}

.center {
	text-align: center;
}

.middle {
	margin: 0 auto;
}

.block {
	display: block;
}

.green {
	color: #007e3b;
}

.truncate {
	height: 4.5em;
	white-space: nowrap;
	overflow: hidden;
}

.truncate ol {
	height: 1.4em;
	overflow: hidden;
	white-space: nowrap;
}

.truncate:after {
	content: "...";
	display: block;
	margin-top: -8px;
}

.faq article i {
	float: left;
	font-size: 25px;
	margin-bottom: 2em;
	margin-right: 10px;
}

.poweredby {
	display: block;
	font-size: 10px;
	margin-top: -20px;
	margin-left: 67px;
}

header #logo {
	padding: 10px 0 10px 10px;
}

#gyft-top-logo {
	float: left;
	height: 41px;
	padding: 7px 0;
	margin-left: 10px;
}

header ul.nav li.dropdown button.dropdown-toggle:hover {
	background: transparent;
	cursor: default;
}

header .clover-logo {
	margin-left: 0;
}

#beta {
	background-color: coral;
    color: white;
    padding: 1px 9px;
    font-size: 10px;
    font-weight: bold;
    margin-top: 7px;
    float: left;
    display: inline-block;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}

/* menu */
.app-header-icon {
	margin-bottom: -6px;
	margin-top: 8px;
}

#menu {
	position: absolute;
	background-color: #414042;
	color: #9B9B9B;
	list-style: none;
	padding: 0;
	z-index: 100;
	right: 0;
	width: 200px;
}

#menu li {
	border-bottom: 1px solid #9B9B9B;
}

#menu li a {
	display: block;
	padding: 20px;
	width: 100%;
	cursor: pointer;
	color: inherit;
	border: 0;
}

#menu li a:hover {
	color: white;
}

#menu li.active {
	color: white !important;
}

#menu li.active a:hover {
	cursor: default;
}

/* apps overlay */
#apps {
    position: absolute;
    background: white;
    z-index: 100;
    width: 300px;
    margin-top: 55px;
    margin-left: -55px;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    padding: 25px 20px 10px;
    border-radius: 2px;
}

#apps:before {
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	margin-top: -35px;
	margin-left: 115px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid white;
}

#apps a {
	width: 32%;
	font-size: 13px;
	padding: 6px 0;
	margin: 0 0 10px 0;
	border-radius: 3px;
	display: inline-block;
	border: 1px solid white;
	outline: 0;
	text-align: center;
	color: #333;
	transition: all .2s;
}

#apps a:hover {
	border: 1px solid #ddd;
}

#apps a p {
	margin: 0;
	padding: 0;
}



/* app actions */
.card-actions {
	background-color: #f1f1f1;
	border-top: 1px solid #d2d2d2;
	margin: 20px 0 -60px 0;
	padding: 10px 0;
}

.card-actions .btn {
	background: transparent;
}

.card-actions .btn.secondary {
	border-color: #777;
	color: #777;
	margin-right: 10px;
}

.card-actions .btn.secondary:hover {
	border-color: #777;
	color: white;
	background: #777;
}

.file-button-container,
.file-button-container input {
	background: transparent url('../img/upload-button.png') left top no-repeat;
	background-size: contain;
	height: 50px;
	width: 150px;
}

.file-button-container {
	background: transparent url('../img/upload-button.png') left top no-repeat;
	background-size: contain;
}

.file-button-container input {
	opacity: 0;
}

.file-button-container:hover {
	background: url('../img/upload-button-hover.png');
	background-size: contain;
}

/* tables */
#gyftapp #welcome h4 {
	font-family: 'Open Sans',Arial,Helvetica,sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #999;
}

#gyftapp table.table {
	border-collapse: separate;
	border: 1px solid #777;
}

#gyftapp table.table thead tr th {
	color: #fff;
	font-weight: 400;
	background: #354246;
	background: -moz-linear-gradient(top,#354246 0,#253338 100%);
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#354246),color-stop(100%,#253338));
	background: -webkit-linear-gradient(top,#354246 0,#253338 100%);
	background: -o-linear-gradient(top,#354246 0,#253338 100%);
	background: -ms-linear-gradient(top,#354246 0,#253338 100%);
	background: linear-gradient(to bottom,#354246 0,#253338 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#354246', endColorstr='#253338', GradientType=0);
	border: 0;
	border-right: 1px solid #777;
	height: 35px;
	overflow: hidden;
	padding: 8px 17px 10px 10px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#gyftapp table.table thead tr th:last-child {
	border-right: 0;
}

#my-cards tr td {
	vertical-align: middle;
}

#my-cards tr td h4 {
	font-style: normal;
	font-family: 'Open Sans',Arial,Helvetica,sans-serif;
	font-weight: 700;
	margin: 0;
}

#my-cards tr td p {
	margin: 5px 0;
}

#my-cards tr td:first-child {
	min-width: 15%;
	width: 130px;
}

#my-cards tr td img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.35);
  }

/* hero image */
#hero {
	background: url('../img/hero.jpg');
	min-height: 450px;
	background-size: contain;
	background-position-x: right;
	background-position-y: bottom;
	background-repeat: no-repeat;
	border-bottom: 1px solid #ccc;
}

/* card package selector */
.package {
	margin-top: 30px;
}

.package-price, .package-description {
	padding: 10px 20px 0 20px;
	margin: 0;
}

.package-price {
	font-size: 22px;
}

a.btn {
	margin-top: 15px;
	border: 2px solid #007e3b;
	color: #007e3b;
	font-weight: 700;
	font-size: 16px;
	padding: 10px 30px;
	background: white;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	transition: all .2s;
}

.package p.small {
	color: #aaa;
	font-weight: 400;
	padding: 0;
	margin: 5px 0 0 0;
}

a.btn:hover, a.btn.hovered {
	background: #007e3b;
	color: white;
}

.card-thumbnail {
	width: 100%;
	max-width: 350px;
}

/* card order */
.card-preview {
	width: 100%;
	max-width: 400px;
}

/* standard card order */
#card-background-selector,
#card-text-color-selector,
#card-font-selector {
	list-style: none;
	margin: 0 0 10px 0;
	padding: 0;
}

#card-background-selector .card-background,
#card-text-color-selector .card-text-color,
#card-font-selector .card-font {
	display: inline-block;
	float: center;
	width: 40px;
	border-radius: 20px;
	margin: 10px 2px;
	opacity: 0.5;
	text-align: center;
}

#card-text-color-selector .card-text-color,
#card-font-selector .card-font {
	height: 40px;
	padding: 3px;
	border-radius: 20px;
	border: 3px solid white;
	opacity: 0.8;
	font-size: 18px;
}

#card-font-selector .card-font {
	padding-top: 4px;
}

#card-background-selector .card-background:hover,
#card-text-color-selector .card-text-color:hover,
#card-font-selector .card-font:hover {
	cursor: pointer;
	opacity: 1;
}

#card-background-selector .card-background img {
	width: 100%;
	border-radius: 20px;
	border: 3px solid white;
}

#card-background-selector .card-background.active,
#card-text-color-selector .card-text-color.active,
#card-font-selector .card-font.active {
	cursor: default;
	opacity: 1;
}

#card-background-selector .card-background.active img,
#card-text-color-selector .card-text-color.active,
#card-font-selector .card-font.active {
	border: 3px solid #f84c53;
}

/* card builder forms */
.card-form fieldset {
	margin-bottom: 50px;
	margin-top: 20px;
}

.card-form fieldset legend {
	border: 0;
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 700;
}

.card-form input,
.card-form textarea {
	display: block;
	padding: 10px;
	border: 1px solid #ccc;
	width: 100%;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-bottom: 10px;
}

.card-form input:focus,
.card-form textarea:focus {
	outline: none;
	border-color: #f84c53;
	box-shadow: 0px 0px 3px #f84c53;
}

.card-form select {
	display: block;
	padding: 10px;
	border: 1px solid #ccc;
	width: 100%;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	margin-bottom: 10px;
	outline: none;
	height: 42px;
	background: white;
}

.card-form select option {
	padding: 10px;
}

#basic-card-preview {
	position: absolute;
	margin-top: -95px;
	margin-left: 50px;
	color: white;
}

#standard-card-preview {
	color: black;
	position: absolute;
	margin-top: -200px;
	text-align: center;
	padding: 40px;
	width: 85%;
	font-size: 16px;
}

#deluxe-card-preview {
  position: absolute;
  margin-top: -65px;
  font-size: 9px;
  width: 84%;
  padding: 0px 30px;
}

#line-1 {
	font-size: 20px;
	font-weight: 700;
}

#standard-card-preview #line-1 {
	font-size: 25px;
}

@media (max-width: 1200px) {
	#basic-card-preview { margin-left: 45px; }
	#deluxe-card-preview { font-size: 8px; width: 94%; }
	#standard-card-preview {width: 95%;}

}

@media (max-width: 991px) {
	#basic-card-preview { margin-left: 35px; font-size: 80%; margin-top: -70px;}
	#line-1 { font-size: 15px;}
	#standard-card-preview #line-1 { font-size: 20px;}
	#standard-card-preview { font-size: 100%; margin-top: -165px; }
	 #deluxe-card-preview { font-size: 6px;
  width: 97%;
  padding: 23px;
  margin-top: -70px;}
}

@media (max-width: 749px) {
	#card-preview.center { text-align: left; }
	#basic-card-preview { margin-top: -95px; margin-left: 50px; font-size: 100%; }
	#line-1, #standard-card-preview #line-1 { font-size: 20px;}
	#standard-card-preview #line-1 { font-size: 25px; }
	#standard-card-preview { margin-top: -200px; width: 95%; }
	 #deluxe-card-preview { font-size: 9px; width: 97%; max-width: 400px; padding: 0 30px; margin-top: -65px;}
	 #gyft-top-logo { margin-left: 21px; }
}

@media (max-width: 444px) {
	#basic-card-preview { margin-left: 40px; margin-top: -90px; font-size: 80%; }
	 #deluxe-card-preview { font-size: 8px; width: 97%; max-width: 400px; padding: 0 30px; margin-top: -60px;}
}

@media (max-width: 340px) {
	#basic-card-preview { margin-left: 35px; margin-top: -70px; font-size: 80%; }
	#line-1 { font-size: 15px;}
	#standard-card-preview { margin-top: -165px; }
	#standard-card-preview #line-1 { font-size: 20px;}
	#deluxe-card-preview { font-size: 6px; width: 97%; max-width: 400px; padding: 0 30px; margin-top: -48px;}
}

#basic-card-preview span,
#standard-card-preview span {
	display: block;
	padding: 0;
	font-style: 10px;
}

/* card fonts */
.card-font[aria-font="open-sans"] { font-family: 'Open Sans',sans-serif; }
.card-font[aria-font="payfair-display"] { font-family: 'Payfair Display',serif; }
.card-font[aria-font="josefin-slab"] { font-family: 'Josefin Slab',serif; }
.card-font[aria-font="lobster"] { font-family: 'Lobster',cursive; }
.card-font[aria-font="schoolbell"] { font-family: 'Schoolbell',cursive; }

.template, .template:hover {
	text-decoration: none;
	outline: none;
	border: none;
	color: #000;
	font-weight: bold;
	opacity: 0.7;
	margin: 0 20px;
}

.template:hover {
	opacity: 1;
}

/* faq */
#faq-nav {
	margin: 0;
	padding: 0;
}

#faq-nav li {
	list-style: none;
	display: block;
	margin: 0 0 5px 0;
	padding: 10px;
	color: #666;
	font-weight: bold;
	background: #ddd;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 2px solid #aaa;
}

#faq-nav li:hover {
	background: #f84c53;
	color: white;
	border: 2px solid #cc3133;
	cursor: pointer;
}

#faq-nav li.active, #faq-nav li.active:hover {
	background: #f84c53;
	color: white;
	border: 2px solid #cc3133;
	cursor: default;
}

.faq article {
	margin-bottom: 30px;
}

.faq article h3 {
	font-size: 1.3em;
}

.faq-section {
	display: none;
	margin-left: 20px;
}

.faq-section.current {
	display: block;
}

/* welcome dialog */
.ui-overlay,
.ui-widget-overlay {
	display: block;
	height:100%;
	left:0;
	position:fixed;
	top:0;
	width:100%;
	background: repeat-x 50% 50% #000;
	opacity:0.6;
	z-index: 1001;
}

.ui-dialog {
	background: #eee;
	outline: none;
	z-index: 1002;
	border: 0;
	border-radius: 6px;
	padding: 0;
}

.ui-dialog-titlebar {
	border-radius: 5px 5px 0 0;
	border:0;
	font-size: 18px;
	background: #f84c53;
	border-bottom: 2px solid #cc3133;
}

.ui-dialog-titlebar-close {
	display: none !important;
}

.ui-dialog .ui-dialog-content {
	padding: 10px 30px;
}

.ui-dialog .ui-dialog-buttonpane button {
	background: #f84c53;
	border: 2px solid #cc3133;
	color: white;
	min-width: 120px;
	outline: none;
}

.ui-dialog .ui-dialog-buttonpane button:hover {
	background: #cc3133;
}

.ui-dialog .ui-dialog-buttonpane button:nth-child(2) {
	background: #aaa;
	border-color: #888;
}

.ui-dialog .ui-dialog-buttonpane button:nth-child(2):hover {
	background: #888;
}

.ui-dialog form input {
	display: block;
	padding: 10px;
	border: 1px solid #ccc;
	width: 100%;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	background: white;
	text-align: center;
}

#terms-container {
	max-height: 300px;
	font-size: 12px;
	background-color: white;
	padding: 15px;
	overflow-y: scroll;
	border: 1px solid #ddd;
}

#loading {
	position: absolute;
	margin-top: -260px;
	margin-left: -30px;
	width: 100%;
}

#locations-list {
	max-height: 200px;
	overflow-y: scroll;
	font-size: 14px;
	border: 1px solid #ccc;
	background: rgba(255,255,255,0.5);
}

#show-all-locations {
	padding: 5px 0 0 0;
	margin: 0;
}

#show-all-locations i {
	color: #666;
	border-radius: 3px;
	background: #e6e6e6;
	width: 50px;
	height: 38px;
	text-align: center;
	padding: 0 !important;
	line-height: 38px;
	border: 1px solid #ccc;
	margin: 0;
}

#show-all-locations i:hover {
 	background: #dfdfdf;
	cursor: pointer;
	color: #333;
}


#locations-list ul {
	padding: 5px 5px 5px 30px;
	margin: 0;
}

#locations-list ul li {
	list-style-type: circle;
	padding: 4px 0;
	margin: 0;
}

.row #locations-table {
	max-height: none;
	overflow-y: none;
}

#locations-table table {
	margin: 0;
}

#locations-table table tr td {
	vertical-align: middle !important;
	border: 0;
	padding: 5px;
}

#locations-table  table tr.this-location td {
	background: #ffe3e4;
	font-weight: bold;
}

#locations-table  table tr.this-location td:first-child:after {
	content: "this location";
	display: block;
	font-size: 12px;
	font-weight: normal;
	color: #f84c53;
}

#locations-table  table tr td p {
	margin: 0;
	padding: 0;
}


a.welcome-button {
	display: block;
	width: 30%;
	float: left;
	text-decoration: none !important;
	background: #f9f9f9;
	outline: none !important;
	margin: 0 5% 15px 0;
	padding: 20px;
	text-align: center;
	border-radius: 5px;
	border: 2px solid #dfdfdf;
	box-shadow: 0px 0px 3px white;
	font-weight: bold;
	color: #666;
	transition: border .2s;
}

a.welcome-button:hover {
	color: #444;
	border-color: #f84c53;
}

a.welcome-button:nth-child(1),
a.welcome-button:nth-child(3) {
	padding-top: 20px;
	padding-bottom: 31px;
}

a.welcome-button:nth-child(3) {
	margin: 0;
}

a.welcome-button .welcome-icon {
	width: 70px;
	margin: 0 auto 10px auto;
	display: block;
}

a.welcome-button:nth-child(1) .welcome-icon,
a.welcome-button:nth-child(3) .welcome-icon {
	margin-bottom: 20px;
}

/* overview top */
#date-toggle {
	list-style: none;
}

#date-toggle li {
	display: inline-block;
	margin: 0 10px;
}

#date-toggle li:hover {
	text-decoration: underline;
	cursor: pointer;
}

#date-toggle li.active,
#date-toggle li.active:hover {
	cursor: default;
	font-weight: 700;
	text-decoration: none;
}

.dashboard-button {
	display: inline-block;
	margin: 10px;
	width: 180px;
	background-color: white;
	border: 1px solid #ccc;
	padding: 10px;
	text-transform: uppercase;
	color: #aaa;
	border-top: 4px solid #f84c53;
	font-size: 11px;
	cursor: default;
	text-align: center;
}

.dashboard-button:hover {
	border-color: #f84c53;
	color: #aaa;
}

@media (min-width: 992px) {
	#dashboard-buttons {
		padding-top: 30px;
	}

	.dashboard-button {
		width: 200px;
		padding: 20px 10px;
	}
}

@media (max-width: 768px) {
	#dashboard-buttons {
		padding-top: 20px;
		text-align: center;
	}

	.dashboard-button {
		width: 180px;
		padding: 10px;
	}

	.app-nav,#demo-button {
		display: none;
	}

	.app-header h3 {
		border: none !important;
	}

}

.dashboard-button i {
	display: block;
	font-size: 32px;
	margin-bottom: 10px;
}

.dashboard-button span {
	display: block;
}

.dashboard-button span:nth-child(3) {
	font-size: 24px;
	color: #666;
}

/* order review popup */
table.order-details {
	width: 100%;
	background-color: white;
	margin: 15px 0 0 0;
	border: 10px solid white;
}

.order-details tr td {
	width: 50%;
	padding: 10px;
	border-bottom: 1px dotted #ddd;
}


.order-details tr td a {
	color: #f84c53;
	border: none;
	cursor: pointer;
}

.order-details tr.total td {
	border-top: 1px solid #aaa;
	font-weight: bold;
	font-size: 120%;
}

.order-details tr.total td:nth-child(2) {
	color: limegreen;
	font-size: 150%;
}


@media (max-width: 699px) {
	a.welcome-button {
		float: none;
		width: 100%;
		overflow: auto;
	}

	a.welcome-button:nth-child(1),
	a.welcome-button:nth-child(2),
	a.welcome-button:nth-child(3) {
		padding: 10px;
	}

	a.welcome-button:nth-child(3) {
		margin-bottom: 20px;
	}

	a.welcome-button .welcome-icon {
		display: none;
	}

#hero {
  background-position-x: center;
  background-repeat: no-repeat;
  background-size: 340px;
}

#hero h1 {
  margin: 0px 0 300px 0 !important;
  text-align: center !important;
  font-size: 40px;
}
}



/* MOBILE */
@media
only screen and (max-width: 768px)  {

	/* Force table to not be like tables anymore */
	table.table, .table thead, .table tbody, .table th, .table td, .table tr {
		display: block;
		border: none;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	.table thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.table tr { border-bottom: 1px solid #333; }

	.table td {
		border: none;
		position: relative;
		padding-left: 50%;
		text-align: left;
	}

	#overview-transactions td:before,
	#overview-customers td:before,
	#reports-table td:before {
		position: static;
		top: 6px;
		display: inline-block;
		left: 6px;
		width: 45%;
		padding-right: 60px;
		white-space: nowrap;
		font-weight: 700;
	}

	.table.responsive tr:nth-of-type(even) {
	  background: #f3f3f3;
	}
	/*Label the on Overview/Transactions */
	#overview-transactions td:nth-of-type(1):before { content: "Created"; }
	#overview-transactions td:nth-of-type(2):before { content: "Tender"; }
	#overview-transactions td:nth-of-type(3):before { content: "Amount"; }
	#overview-transactions td:nth-of-type(4):before { content: "Tax Amount"; }
	#overview-transactions td:nth-of-type(5):before { content: "Tip Amount"; }
	#overview-transactions td:nth-of-type(6):before { content: "Employee"; }
	#overview-transactions td:nth-of-type(7):before { content: "Details"; }

	/*Label the on Overview/Customers */
	#overview-customers td:nth-of-type(1):before { content: "Name"; }
	#overview-customers td:nth-of-type(2):before { content: "Phone Number"; }
	#overview-customers td:nth-of-type(3):before { content: "Email"; }
	#overview-customers td:nth-of-type(4):before { content: "Spend"; }
	#overview-customers td:nth-of-type(5):before { content: "Date Added"; }
	#overview-customers td:nth-of-type(6):before { content: "Details"; }


	/*Label the on Reports */
	#reports-table td:nth-of-type(1):before { content: "Created"; }
	#reports-table td:nth-of-type(2):before { content: "Name"; }
	#reports-table td:nth-of-type(3):before { content: "Spreadsheet"; }
}