@charset "UTF-8";
/* CSS Document */

body, html {
	height: 100%;
	background:  hsl(171, 60%, 96%);
}

#body {
	padding-top: 200px;
}

#header {
  position: fixed;
  width: 100%;
  top: 0px;
  height: 100px;
  padding: 20px;
  background-color: #373a36;
  z-index: 1;
}

#header img {
	height:60px;
}

.navbar {
  background-color: #373a36;
  height: 100px;
}

.navbar a, .navbar a:active, .navbar a:visited {
	color: #F8FAFA;
}

.navbar a:hover {
	color: #DB6015;
}

#managementDrop a, #managementDrop a:active, #managementDrop a:visited {
	color: #373A36;
}

.navbar-item {
	color: #F8FAFA;
}

#pageContent {
	padding-top: 120px;
	padding-bottom: 100px;
}

#footer {
  position: fixed;
  width: 100%;
  bottom: 0px;
  height: 80px;
  padding: 20px;
  background-color: #373a36;
  text-align: right;
  z-index: 1;
}

.columns {
	padding-top: 50px;
}

.media-left {
	font-size: 2em;
}

.media-content {
	padding-bottom: 1.5rem;
}

.card {
	height: 100%;
}

.content {
	position: absolute;
	bottom: 0px;
	left:0px;
	width: 100%;
	padding: 1.5rem;
}

#confirmationModal {
  z-index: 50;
}

.buttonBelowTable {
	text-align: right;
	padding-bottom: 20px;
}

.buttonBelowPreview {
	text-align: center;
	padding-top: 20px;
}

form .columns {
	padding-top: 0px;
}

.layout {
	margin-bottom: 20px;
}

.layout .box {
	background-color: #B6CCC2;
}

.layout .table {
	background-color: transparent;
}

.layout .table tbody tr:hover {
	background-color: transparent !important;
}

#layoutRow .button {
	margin-right: 10px;
}

.preview .modal-content {
	width: calc(100vw - 40px) !important;
}

.previewLayout {
	position: relative;
	background-color: #636569;
	margin: auto;
}

.previewTicket {
	position: absolute;
	background-color: #6FA088;
	color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.previewTicket.hidden {
	background-color: #B6CCC2;
	color: #373A36;
}









.table thead tr:hover {
	background-color: transparent !important;
}

.table tbody tr:hover {
	background-color: rgba(255,255,255,0.8) !important;
}

.container {
	padding-bottom: 100px;
}

.fullscreen {
	height: 100%;
	background: url("../gfx/bg.png") no-repeat center center fixed;
	background-size: cover;
}

.datePickerTable th, td {
	padding: 5px;
	vertical-align: middle !important;
}

#startPicker {
	width: 300px;
}

#logo {
	position: absolute;
	bottom: 20px;
	right:50px;
	width: 10%;
	min-width: 200px;
}

#rankCol {
	width: 70px;
}

#tableImage {
	width: 100px;
}
	
#interactions {
	width: 200px;
}
	
#time {
	width: 200px;
}

#totalInteractions, #dailyInteractions {
	font-size: 5em;
}

.navbar-item img {
	max-height: unset;
	margin: 10px;
}

.capitalise {
	text-transform: capitalize;
}

nav {
	border-bottom: hsl(204, 86%, 85%) thin solid;
}

#dailyTotals, #topDays, #dayTotals, #hourTotals {
	width: 400;
	height: 100;
}

@media screen and (max-width: 1024px) {
	
	#body {
		padding-top: 140px;
	}
	
	#icon, #managementDrop, #userDrop {
		display: none;
	}
	
	#navMenu {
		text-align: center;
	}
	
	.container {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.title {
		font-size: 1.5em !important;
	}
	
	#totalInteractions, #dailyInteractions {
		font-size: 3.5em;
	}
	
	.table td {
		padding: .3em;
	}
	
	.table .title {
		font-size: 1em !important;
	}
	
	.table {
		font-size: .8em;
	}
	
	#rankCol {
		width: 20px;
	}
	
	#tableImage {
		width: 50px;
	}
	
	#interactions {
		width: 80px;
	}
	
	#time {
		width: 80px;
	}
	
	#activePromotions .column, #inactivePromotions .column {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	
	.columns {
		padding-bottom: 80px;
	}
	
	#dailyTotals, #topDays, #dayTotals, #hourTotals {
		width: 400;
		height: 400;
	}
	
	.image.is-96x96 {
		width:70px !important;
		height:70px !important;
	}
	
}