/* basics */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,div{display:block;position:relative;padding:0;margin:0;}.left {float:left;}.right {float:right;}.txtl{text-align:left;}.txtc{text-align:center;}.txtr{text-align:right;}.clear{clear:both;}img{border:0;}.clearfix:after{visibility:hidden;display:block;font-size:0;content:"";clear:both;height:0;}.clearfix{min-height:0;display:block;}* html .clearfix{height:1%;}

/* elements */
html, body { margin: 0; }
body, td, div, select, textarea, input { font: 14px 'Raleway', sans-serif; color:#666; }
a { color:#33a9e0; text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 26px; margin: 0 0 10px; }
h2 { font-size: 20px; margin: 0 0 10px; }
h3 { font-size: 18px; margin: 0 0 10px; }
p { font-size: 14px; margin: 0 0 10px; line-height:1.4em; }
ul,ol{margin:0 0 10px 30px;padding: 0; }
ul li, ol li{line-height:1.3em;margin: 0 0 5px;padding: 0; }
li ol, li ul{margin-bottom:0; }

/* helpers */
.hide { display: none !important; }
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block !important; }
.fs12 { font-size: 12px; }
.fs18 { font-size: 18px; }
.todo { background: yellow; }
.red { color: #f50202; }
.small { font-size: .8em; }
.note { font-size: 18px !important; font-weight: bold !important; color: #f50a0a !important; }

/* structure */
#main { width: 85%; float: left; border-left: #e5e5e5 1px solid; box-sizing: border-box; padding: 20px; min-height: 1000px; }
#sidebar { width: 15%; float: left; }
#sidebar #sidebar-info { padding: 10px; border-bottom: 1px solid #e5e5e5; }
#sidebar #sidebar-info img { width: 100%; }
#sidebar #sidebar-info h3 { padding: 20px 0 0; text-align: center; color: #33a9e0; }
#sidebar #sidebar-info .mobile-toggle { display: none; float: right; font-size: 2em; }
#sidebar nav, #sidebar nav ul, #sidebar nav li, #sidebar nav a { margin: 0; padding: 0; border: 0; list-style: none; position: relative; }
#sidebar nav a { line-height: 1.3; color: #666; }
#sidebar nav > ul > li > a { display: block; border: 1px solid #e5e5e5; border-top: none; border-right: none; }
#sidebar nav > ul > li > a { display: block; padding: 10px; }
#sidebar nav > ul > li > a:hover { text-decoration: none; }
#sidebar nav > ul > li.active { border-bottom: none; }
#sidebar nav li.current { border-right: 5px solid #33a9e0; }
#sidebar nav > ul > li.has-sub > a i { float: right; }
#sidebar nav ul ul { display: none; }
#sidebar nav ul li.active ul { display: block; }
#sidebar nav ul ul li { padding: 0; border-bottom: 1px solid #d4d4d4; border-top: none; background: #f7f7f7; }
#sidebar nav > ul > li.has-sub > a i.dbicon { color: #6f6f6f; line-height: 17px;  float: left; padding-right: 10px;} /* new icon css */
#sidebar nav > ul > li > a i.dbicon { color: #6f6f6f; line-height: 17px;  float: left; padding-left: 3px;padding-right: 13px;} /* new icon css */
/*#sidebar nav ul ul li:last-child { border-bottom: none; }*/
#sidebar nav ul ul a { font-size: 12px; padding: 10px 10px 10px 25px; display: block; color: #676767; }
#sidebar nav ul ul a:before { content: '\00BB'; position: absolute; left: 10px; color: #33a9e0; }
#sidebar nav ul ul a:hover { color: #33a9e0; }
@media screen and (max-width: 600px) {
	#main { width: 100%; float: none; padding: 10px; min-height: auto; }
	#sidebar { width: 100%; float: none; }
	#sidebar #sidebar-info img { max-width: 150px; }
	#sidebar #sidebar-info h3 { display: none; }
	#sidebar #sidebar-info .mobile-toggle { display: block; }
	#sidebar nav { display: none; margin-bottom: 20px; }
}

/* qr codes */
ul.qr-codes { margin: 0; }
ul.qr-codes li { float: left; width: 20%; padding: 10px; box-sizing: border-box; list-style:none;}
ul.qr-codes li .qr-codes-image { width: 50%; float: left;}
ul.qr-codes li .qr-codes-image img { width: 98%; }
ul.qr-codes li .qr-codes-content { width: 50%; float: left; }
@media screen and (max-width: 1000px) {
	ul.qr-codes li { width: 25%; }
}
@media screen and (max-width: 800px) {
	ul.qr-codes li { width: 33.33333%; }
}
@media screen and (max-width: 600px) {
	ul.qr-codes li { width: 50%; }
}
@media screen and (max-width: 400px) {
	ul.qr-codes li { width: 100%; float: none; clear: both; }
}

/* location */
#location .lcol { width: 50%; float: left; }
#location .rcol { width: 50%; float: left; }
#location #map-canvas { border: 5px #33A9E0 solid; width: 100%;  }

/* boxes */
.box { border: 1px solid #e5e5e5; margin-bottom: 30px; }
.box .header { background-color: #33a9e0; padding: 10px; }
.box .header h3 { margin-bottom: 0; color: #fff; font-size: 16px; }
.box .header .links { float: right; }
.box .header .links { margin: 0; }
.box .header .links li { list-style: none; display: inline; margin-left: 15px; padding-left: 15px; border-left: 1px #fff solid; }
.box .header .links li:first-child { border-left: 0; margin-left: 0; padding-left: 0; }
.box .header .links li a { color: #fff; font-size: 16px; }
.box .container { padding: 20px 20px 10px;   }
.sms-credits-box { float: right; padding: 20px; font-size: 40px; text-align: center; border: 1px solid #e5e5e5; }
@media screen and (max-width: 600px) {
	.box .container { padding: 10px 10px 5px; }
}

/* tables */
.tablegrid {width:100%; border-collapse:collapse;margin: 0 0 10px; }
.tablegrid th, .tablegrid td{padding:10px 15px;text-align: left;}
.tablegrid thead th, .tablegrid tbody th{background:#f7f7f7;border:1px solid #ccc;border-bottom:3px solid #999; font-size: 12px;}
.tablegrid tbody th{background:#f7f7f7;border:1px solid #ccc;border-right:2px solid #999;}
.tablegrid td{border:1px dashed #ccc;border-bottom:1px solid #ddd; font-size: 12px; vertical-align: top;}
.tablegrid td.icon { text-align: center; width: 1px; }
.mogrid {overflow-y:auto;-webkit-overflow-scrolling: touch;}
.sortabletable { cursor: move; }

/* form styles */
form.cssform { padding: 0; border: 0; margin-bottom: 10px; }
form.cssform div.fc { margin: 0 0 8px 0; float: left; box-sizing: border-box; }
form.cssform div.fc.w100 { width: 100%; }
form.cssform div.fc.w75 { width: 75%; padding-right: 10px; }
form.cssform div.fc.w50 { width: 50%; padding-right: 10px; }
form.cssform div.fc.w33 { width: 33.3333%; padding-right: 10px; }
form.cssform div.fc.w25 { width: 25%; padding-right: 10px; }
form.cssform div.fc.fcr { padding-left: 10px; padding-right: 0; }
form.cssform input.field, form.cssform select.field, form.cssform textarea.field { width: 100%; display: block; border:1px solid #e5e5e5; padding: 8px; box-sizing: border-box; }
form.cssform .field.auto { width: auto; }
form.cssform .field.select-small { width: 45%}
form.cssform .field.inline { display: inline; }
form.cssform .field.domain { width: 200px; display: inline; }
form.cssform .field.w50 { width: 50%; display: inline; }
form.cssform textarea.field.tall { height: 300px; }
form.cssform textarea.field.medium { height: 150px; }
form.cssform textarea.editor { height: 400px; }
form.cssform textarea.editor.small { height: 150px; }
form.cssform label { font-size: 1em; }
form.cssform input.color { width: 88%; float: left; }
form.cssform .mColorPickerTrigger { float: right; margin-top: 5px; }
form.cssform input.select { display: block; float: left; margin: 0; color: #555555; }
form.cssform div.fc.wauto { width: auto; margin-right: 15px; margin-bottom: 10px; display: inline; }
form.cssform div.fc.loylaty-program-restrictions .field { width: auto; min-width: 100px; display: inline; }
form.cssform div.fc #loyalty-program-restrictions-per,
form.cssform div.fc #loyalty-program-checkin-time-container { display: inline; }
form.cssform select.field.wauto { width: auto; display: inline-block; }
.StripeElement {
  background-color: #fff;
  padding: 8px;
  border: 1px solid #e5e5e5;
	-moz-box-sizing: border-box;
	-webkit-appearance: none;
	box-sizing: border-box;
}
@media screen and (max-width: 600px) {
	form.cssform div.fc.w75, form.cssform div.fc.w50, form.cssform div.fc.w25 { width: 100%; padding-right: 0; }
	form.cssform div.fc.fcr { padding-left: 0; }
}

/* checkbox list */
.checkbox_list { margin-left: 0; }
.checkbox_list li { list-style: none; float: left; width: 25%; }
.checkbox_list li label { display: inline; }
.checkbox_list li input { width: auto !important; display: inline !important; margin: 0; }
.checkboxes-block .checkbox_list { margin-top: 5px; }
.checkboxes-block .checkbox_list li { float: none; display: block; width: 100%; }
@media screen and (max-width: 1000px) {
  .checkbox_list li { width: 50%; }
}
@media screen and (max-width: 400px) {
  .checkbox_list li { width: 100%; float: none; }
}

/* icons */
#icon-container .icon-item { float: left; width: 75px; margin-bottom: 5px; }
#icon-container .icon-item i { vertical-align: middle; }

/* hours */
.day-container { clear: both; margin-bottom: 10px; }
.day-container div { float: left; }
.day-container div.day-hour { margin-right: 10px; }
.day-container div.day-hour input.field { width: 200px; }

/* buttons */
.btn { color: #ffffff; background: #33a9e0; padding: 10px 20px; text-decoration: none; border: 0; display: inline-block; cursor: pointer; -webkit-appearance: none; }
.btn:hover { background: #1c9fdb; text-decoration: none; }

/* paging */
.paging { margin-bottom: 15px; margin-top: 15px; }
.paging a { padding: 5px; border: 1px solid #33A9E0; margin-right: 5px; }
.paging a.current { font-weight: bold; }

/* inline tutorial */
#inline-tutorial-container { background: #FBEC88; margin-bottom: 15px; padding: 10px; border: 1px solid #FAD42E; color: #363636; }
#inline-tutorial-link { color: #33A9E0; font-size: 17px; text-decoration: none; }
#inline-tutorial-video { display:none; padding: 0; margin-top: 15px; }
#inline-tutorial-video .video { float: left; margin-right: 25px; text-align: center; }
ul.video-tutorials { margin-left: 0; }
ul.video-tutorials li { width: 25%; text-align: center; list-style: none; float: left; margin-bottom: 30px;  }
ul.video-tutorials li:nth-child(4n+1) { clear: both; }
@media screen and (max-width: 1100px) {
  ul.video-tutorials li { width: 33.33333%; }
  ul.video-tutorials li:nth-child(4n+1) { clear: none; }
  ul.video-tutorials li:nth-child(3n+1) { clear: both; }
}
@media screen and (max-width: 900px) {
  ul.video-tutorials li { width: 50%; }
  ul.video-tutorials li:nth-child(3n+1) { clear: none; }
  ul.video-tutorials li:nth-child(2n+1) { clear: both; }
}
@media screen and (max-width: 500px) {
  ul.video-tutorials li { width: 100%; float: none; }
  ul.video-tutorials li:nth-child(2n+1) { clear: none; }
}

/* alerts */
ul.alert {margin: 0 0 15px; font-size:12px;line-height:16px;padding:5px 5px 5px 30px;color:#000;border: 2px solid #c00;font-weight: bold;background: #fcc;border-radius:5px;-moz-box-shadow:0 5px 10px 0px rgba(0,0,0,.7);-webkit-box-shadow:0 5px 10px 0px rgba(0,0,0,.7);box-shadow:0 10px 5px -5px rgba(0,0,0,.3);position:relative;}
ul.alert li { margin-bottom: 0; list-style: none; }
ul.alert.success{background: #cfc;border-color:#0c0;}
ul.alert.warn{background: #ffc;border-color:#ff3;}
ul.alert:before{content:'!';position:absolute;left:0px;top:0px;background:#c00;text-align:center;padding:0px 10px 0px 8px;color:#fff;height:100%;line-height:2em;}
ul.alert.success:before{content:'\2713';background:#0c0;padding:0px 8px 0px 6px;}
ul.alert.warn:before{content:'i';background:#ff3;color:#000;}

/* timepicker */
.ui-timepicker-wrapper { overflow-y: auto; height: 150px; width: 200px; background: #fff; border: 1px solid #ddd; -webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2); -moz-box-shadow:0 5px 10px rgba(0,0,0,0.2); box-shadow:0 5px 10px rgba(0,0,0,0.2);
	outline: none; z-index: 10001; margin: 0; }
.ui-timepicker-wrapper.ui-timepicker-with-duration { width: 13em; }
.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30, .ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 { width: 11em; }
.ui-timepicker-list { margin: 0; padding: 0; list-style: none; }
.ui-timepicker-duration { margin-left: 5px; color: #888; }
.ui-timepicker-list:hover .ui-timepicker-duration { color: #888; }
.ui-timepicker-list li { padding: 3px 0 3px 5px; cursor: pointer; white-space: nowrap; color: #000; list-style: none; margin: 0; }
.ui-timepicker-list:hover .ui-timepicker-selected { background: #fff; color: #000; }
li.ui-timepicker-selected, .ui-timepicker-list li:hover, .ui-timepicker-list .ui-timepicker-selected:hover { background: #1980EC; color: #fff; }
li.ui-timepicker-selected .ui-timepicker-duration, .ui-timepicker-list li:hover .ui-timepicker-duration { color: #ccc; }
.ui-timepicker-list li.ui-timepicker-disabled, .ui-timepicker-list li.ui-timepicker-disabled:hover, .ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled { color: #888; cursor: default; }
.ui-timepicker-list li.ui-timepicker-disabled:hover, .ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled { background: #f2f2f2; }
.help-text {
	color: #6c6c6c;
	font-size: 11px;
	font-weight: bold;
}
.date-filter label{
	display: block;
}
form.cssform .date-filter .fc span,
form.cssform  .date-filter .fc input.field,
form.cssform  .date-filter .fc select{
	display: inline-block;
}
form.cssform  .date-filter .fc select.field,
form.cssform  .date-filter .fc input.field{
	width: 82%;
}
form.cssform .date-filter .fc span {
	font-weight: bold;
	font-size: 12px;
}
form.cssform .action {
	width: 22%;
	margin: 0 auto;
}
form.cssform div.fc.w100 {
	margin-bottom: 0;
}
form.filter-form {
	background-color: #f7f7f7;
	border: 1px solid lightgray;
	border-radius: 10px;
	padding: 20px;
}
form.filter-form label {
	font-weight: bold;
}

form.cssform select.field{
	-webkit-appearance: button;
	-webkit-border-radius: 2px;
	-webkit-padding-end: 10px;
	-webkit-padding-start: 2px;
	-webkit-user-select: none;
	background-image: url("../images/arrow.png");
	background-position: 97% center;
	background-repeat: no-repeat;
	border: 1px solid #AAA;
	color: #555;
	font-size: inherit;
	overflow: hidden;
	padding: 7px 10px;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
	-moz-user-select: none; /* Firefox 2+ */
	-ms-user-select: none; /* IE 10+ */
	user-select: none; /* Standard syntax */
}

.text-center {
	text-align: center !important;
}

.sms-count-badge {
	width: 50px;
	display: inline-block;
	padding: 4px;
	text-align: center;
	color: #555 !important;
	background-color: #f7f7f7;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-weight: bold;
}

pre.url-prefix {
	display: inline-block;
	font-weight: bold;
}

.select2-container .select2-selection--multiple .select2-selection__rendered{
	margin:0;
}

.customers-page .mogrid {
	height: 600px;
}
.customers-page .tablegrid thead th, .tablegrid tbody th {
	position: sticky;
	top: 0;
}