@charset "utf-8";

.light-green { color: #3f3 }
.green { color: #0c0 }
.dark-green { color: #070 }
.orange { color: #f90 }
.dark-orange { color: #c60 }
.light-red { color: #f33 }
.red { color: #c00 }
.dark-red { color: #800 }

* {
	margin:0;
	padding:0;
	font-size:inherit;
	font-family:inherit;
	box-sizing:border-box;
}

body {
 font-family:Arial, Helvetica, sans-serif;
 font-size:16px;
 margin:0;
 background-color:#f1f1f1;
 color:#273140;
	-webkit-text-size-adjust: none;
}
html, body { height:100%; }
#container {
 min-height:100%;
}
* html #container {
 height:100%;
}

article, aside, details, figcaption, figure, footer, header, main, mark, nav, section, summary, time {
	display:block;
}

table { border-collapse:collapse; margin-left:auto; margin-right:auto; }
td:first-child { padding-right:6px; }
th, td { padding:6px; text-align:left; }
th { background-color:#d9d9d9; }
.altrows tr:nth-child(odd) { background-color:#f1f1f1; }
.doublerows tr:nth-child(8n+0), .doublerows tr:nth-child(8n+1) { background-color:#f1f1f1; }

.altrows tr:nth-child(even).refund-transaction-item-row { background-color:#fee !important; }
.altrows tr:nth-child(odd).refund-transaction-item-row { background-color:#fdd !important; }
.refund-column { white-space: nowrap; }
.money { text-align:right; }

table.altrows, table.doublerows { width:100%; }

img { border:none; vertical-align:bottom; }

* + p, * + h1, * + h2, * + h3, * + h4, * + h5, * + h6, * + table { margin-top:1em; max-height:10000em; }
hr { margin:1em 0; height:1px; border:none; overflow:hidden; background-color:#000; }

h1 { font-size:36px; }
h2 { font-size:30px; }
h3 { font-size:24px; }
h4 { font-size:18px; }

a { text-decoration:none; color:#1080f2; }
a:active, a:hover { color:#4cc3ff; }

ul {	padding-left:1em; }

select, input:not([type=radio]):not([type=checkbox]), textarea {
	padding:5px;
	margin:5px 0;
}
select, textarea, input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]) { 	border:1px solid #d9d9d9; }
input[type=submit] { padding:5px 10px !important; font-weight:bold; }
input[type=number] { text-align:right; }
input[type=text] { width:180px; }
td select, td input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]), textarea { width:calc(100% + 8px); margin:-4px; }
label { white-space:nowrap; }
input[type=radio] {
	margin-right:2px;
 margin-bottom:5px;
 vertical-align:bottom;
}

label {
	display:inline-block;
	padding:3px 6px 3px 3px;
	border:1px solid #ddd;
	background-color:#f1f1f1;
	border-radius:5px;
	line-height:1;
}
#filterFields select, #filterFields input[type=text], #filterFields input[type=number]  { margin:0 !important; padding:2px !important; }
#filterFields  label { margin-right:10px; }

.m, .m td, .m th { font-size:14px; }
.s, .s td, .s th { font-size:12px; }
.xs, .xs td, .xs th { font-size:10px; }

.success {
 color:#0c0;
}
.error, .delete {
 color:#c00;
}
.warning {
 color:#f90;
}
.deactivate {
    color: #f70;
}
.is-error { border:1px solid #c00 !important; }

.success a, .error a, .warning a {
	text-decoration:underline;
	color:inherit;
	font-weight:bold;
}
.is-edited {
 background-color:#F2F9FF !important;
}
.clear {
 clear:both;
	height:0;
	overflow:hidden;	
}
header { 
 background-color:#fff;
	padding:10px 20px;
 border-bottom: 1px solid #ccc;
}
header h1 {
 float:right;
 margin:0;
 text-transform: uppercase;
 font-size: 30px;
 letter-spacing: -1px;
}

#ctrl-logo {
    width: auto;
    height: 90px;
    margin: auto;
    display: inline-block;
}

#logo {
	width:280px;
	height:79px;
	margin:auto;
	display:inline-block;
}

#session {
	float:right;
 clear:right;
	text-align:right;
	font-size:14px;
 margin-top:12px;
}
#session a {
	font-size:16px;
	text-transform:uppercase;
	font-weight:bold;
	line-height:24px;
}

nav#primary {
 background-color:#00263e;
 padding:10px 10px 0;
 font-weight:bold;
}
nav#primary > div {
 background-color:#f1f1f1;
 padding:10px 10px 9px;
 border-bottom:1px solid #00263e;
 display:inline-block;
 vertical-align:bottom;
 margin-right:1px;
 margin-top:4px;
}
nav#primary > div.current {
 background-color:#fff;
 border-bottom-color:#fff;
 padding:12px 10px 11px;
 margin-top: 0 !important;
}
nav#primary > div.right { float:right; }

nav#secondary {
 background-color:#fff;
 padding:10px 10px 9px;
 font-size:14px;
 font-weight:bold;
 border-bottom:1px solid #ccc;
}
nav#secondary > div {
 display:inline-block;
 margin:0 10px;
}

nav .current,
nav .current a {
    color: #00263e;
}

main {
	padding:0 10px 70px;
	min-height:calc(100% - 120px);
}
main > h1 { text-align:center; }
section {
	padding:20px;
	background-color:#fff;
	border:1px solid #ccc;
	margin:20px auto;
	animation:slideYin 0.75s ease both;
	position:relative;
	box-shadow:4px 4px 6px rgba(0,0,0,0.1);
 /*max-width:1260px;*/
}
section.narrow {
	max-width:600px;
}
section > h1, section > h2 {
	margin:-20px -20px 20px -20px;
	padding:13px 20px 11px;
	border-bottom:1px solid #ccc;
	background-color:#00263e;
	color:#fff;
}
section:after {
 content:"";
 clear:both;
 display:block;
 height:0;
}
/*
section > h3 {
	padding:15px 20px;
}
*/

section > h2 > div, section > h3 > div {
 float:right;
 font-weight:normal;
 font-size:16px;
 margin-top:19px;
 text-align:right;
}
section > h3 > div {
 margin-top:13px;
}

section > h2 > a {
	float: right;
	background-color: #1080f2;
	padding: 5px 15px;
	border-radius: 15px;
	font-size: 14px;
	box-shadow: -2px -2px 3px rgb(0 0 0 / 20%) inset, 1px 3px 3px rgb(255 255 255 / 20%) inset;
	color: #fff;
	border: 2px solid #aacef2;
	margin-top: 1px;
}

section > h2 > a:hover {
 color: #e5f2ff;
}


section > h2 > a.plain-link {
	float: right;
	background-color: transparent;
	border: none;
	font-size: 14px;
	color: #fff;
    box-shadow: none;
    text-decoration:none;
    color:#1080f2;
    margin-top: 4px;
}
section > h2 > a.plain-link:hover { color:#4cc3ff; }

.spot_row td {
 padding-top:0px;
 padding-bottom:12px;
}

footer {
 font-size:13px;
	text-align:center;
	padding:10px;
	background-color:#00263e;
	color:rgba(255,255,255,0.6);
	margin-top:-50px;
}

/*
.datepicker-here {
 width:0 !important;
 padding:0 !important;
 border:none !important;
 margin:0 !important;
}
*/

.with-sidebar {
    display: grid;
    grid-template-columns: 1fr 2fr;
}
.with-sidebar>div:first-child {
    margin-right: 0.7em;
}

.with-sidebar>div:first-child table {
    width: 100%;
}

.notes_button {
 cursor:pointer;
 font-size:32px;
 line-height:30px;
 color:#999;
 display:inline-block;
}
.notes_button:hover { color:#4cc3ff; }
.notes_button.active { color:#00263e; }
.notes {
 display:none;
 position:absolute;
 padding:10px;
 border:2px solid #ccc;
 background-color:#fff;
 margin-left:-596px;
}
.notes > textarea {
 height:80px;
 width:600px;
}

#filterFields a {
	color: #c00;
	font-weight: bold;
	font-size: 14px;
}

/* Dashboard */

.dashboard-locations, .dashboard-metrics {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
    gap: 2em;
}

.dashboard-locations > *, .dashboard-metrics > * {
   flex: 1 1 11%;
   box-sizing: border-box;
}

.dashboard-locations td:nth-child(2) {
    text-align: right;
    vertical-align: top;
}

.metrics-graph {
    display: flex;
    width: 100%;
    height: 5px;
    background-color: #ccc;
}

.metrics-graph .percent {
    background-color: #666;
}

.dashboard-charts {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-around;
    gap: 2em;
}

.tooltip {
    position: relative;
    display: inline-block;
    padding: 0px;
    cursor: pointer;
}

.tooltip .tooltip-text {
    position: absolute;
    display: block;
    padding: 0.5em;
    visibility: hidden;
    min-width: 10em;
    background-color: black;
    color: white;
    text-align: center;
    border-radius: 0.2em;
    font-size: 1rem;
    opacity: 0;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.2s ease;
    z-index: 9999;
}

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Notificaiton */

.notification {
    display: flex;
    align-items: start;
    z-index: 100;
    justify-content: space-between;
    background-color: white;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    top: 3em;
    padding: 1em;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    animation: drop-in 0.5s ease-out forwards;
}
.notification span {
    display: block;
}
.notification-content {
    display: flex;
    flex-direction: column;
}
.notification-title {
    font-weight: bold;
    margin-bottom: 0.5em;
}
.notification .close-button {
    margin-left: 1em;
    border: none;
    background: none;
    cursor: pointer;
}

.notification .close-button::before {
    font-weight: bold;
    content: "✕";
}

.notification .close-button:hover::before {
    font-weight: bold;
    text-shadow: 1px 1px 1px #ccc;
}

@keyframes drop-in {
    from {
        opacity: 0;
        margin-top: -5em;
    }
    to {
        opacity: 1;
        margin-top: 0em;
    }
}

/* Manage permits */

.permit-manage-table td:first-child {
    vertical-align: top;
}

.user-notes {
    height: 10em;
}

.override-plate {
    margin-right: 0.5em !important;
    width: 5em !important;
}

.override-plate:read-only {
    color: #666;
    background-color: #fafafa;
    cursor: not-allowed;
}
.override-plate:read-only:focus {
    outline: none;
}

.permit-violation-warning {
    display: block;
    margin-top: 0.2em;
    width:fit-content;
}

.permit-violation-warning::before {
    content: "⚠ ";
}

/* Results tables */

.result-table .actions,
.result-table .spots-used,
.result-table .phone {
    white-space: nowrap;
}
.result-table .money {
    display: inline-block;
    text-align:right;
    width:100%;
}
.result-table .reserved-spots {
    overflow-wrap: anywhere;
}

.result-table td,
.result-table th {
    padding: 0.7em;
}

.table-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1em;
    font-weight: bold;
}

.sorted-asc::after, .sorted-desc::after {  }
.sorted-asc::after { content: " ↑" }
.sorted-desc::after { content: " ↓" }

.result-table-small {
    font-size: 14px;
}

.result-table-small .unsorted,
.result-table-small .sorted-asc,
.result-table-small .sorted-desc { white-space: normal }

.row-count-message {
    text-align:right; 
    float: right; 
    white-space:nowrap;
}

/*  Violations styling */
.violations-notice tr td:first-child { font-weight: bold}

.violations-notice input[type=text] { margin-right: 0.2em !important}
.violations-notice .dollar-input {
    width: 4em !important;
    margin-left: 0.2em !important;
}
.violations-notice .name, 
.violations-notice .email { width: 20em !important}

.violations-messages .response {
    padding: 1em 0 1em 0;
    font-weight: bold;
}

.violations-message {
    margin-bottom: 1em;
}
.violations-message .message-heading {
    font-weight: bold;
    padding-bottom: 0.5em;
}

.violations-message .message-content {
    border-left: 4px solid #ccc;
    padding: 1em;
}

.violations-message .message-image {
    padding: 1em;
    max-width: 400px
}

.violations-message .message-image img {
    width: 100%
}


.price-input {
    width: 90px !important
}


/* Users, etc. */

.users-table td {
    vertical-align: top;
}

.addedit-table td:first-child {
    vertical-align: top;
    padding-top: 8px;
}

.addedit-table td, .addedit td {
    max-width:480px;
}

/* Reports */
.odd {
    background-color: #f1f1f1 !important;
}
.even {
    background-color: #fff !important;
}

.reports-table th, .reports-table td {
    width: 7%
}

.reports-controls div {
    height: 3em
}
.reports-controls span + span {
    margin-left: 1.5em;
}

.reports-chart-control {
    margin-right:0.7em
}



.reports-controls label {
    border: none;
    background-color: transparent;
}
.reports-controls .checkbox-label {
    cursor: pointer;

    margin: 2px;
    border: none !important;
    padding: 4px;
    /* color: #eee;
    text-shadow: 1px 1px 1px #0003;
    */
    color: #333;
    background-color: #999;
}

.checkbox-label:hover {
    transition: all 0.2s ease;
    filter: brightness(1.2);
}

dialog.reports-chart-controls {
    padding: 2em;
}

dialog .reports-chart-control {
    display: block;
}

/* Shuttles */

.shuttle-stops-table tr:nth-child(even) {
    background-color: #f1f1f1 !important;
}

.shuttle-stops-table .remove {

}

.transparent-label {
	display: inline-block;
	padding:3px 6px 3px 3px;
	border:1px solid #ddd;
	background-color: transparent;
	border-radius:5px;
    border: none;
	line-height:1;
}

.pseudo-label {
	display: flex;
    justify-content: start;
    align-items: start;
	padding:3px 6px 3px 3px;
	border:1px solid #ddd;
	background-color:#f1f1f1;
	border-radius:5px;
	line-height:1;
}

.pseudo-label > div {
    margin: 4px 2px;
}

.pseudo-label input[type=radio] { margin-bottom: 0}

.checkbox-list label {
    display: block; 
    white-space: nowrap; 
    margin: 4px 0 !important;
    padding: 4px;
}

label input[type=radio] {
    vertical-align: baseline;
    margin: 0 5px 0 0;
}


/* LPR Report */

.lpr-controls label { margin-bottom: 3px }
.lpr-date-fields label { margin-right: 3px }
.lpr-date-fields label:first-child a { display: none /* Don't allow remove link for first date */  }

.lpr-controls select, .lpr-controls input { margin: 0 !important; }


table td {
    position: relative;
    height: 10px;
}


.run-row {
    height: 40px;
}

.run-row-headings > th span {
    padding: 0.2em;
    border-radius: 5px;
    margin: 2px
}

.horizontal-bar {
    display: flex;
    background-color: #ccc;
    position: absolute;
    height: 10px;
    width:100%;
    right: 10px;
    top: -5px;
}

.horizontal-bar:hover {
    background-color: #ccc3;
}

.horizontal-bar:hover div:not(:hover), .horizontal-bar div.dont-highlight {
    filter: saturate(0);
    opacity: 0.5;
    /* background-color: #ccc !important; */
    transition: all 0.2s ease;
}

.horizontal-bar div:hover, .horizontal-bar div.highlight {
    filter: brightness(1) saturate(1);
    transition: all 0.2s ease;
}

.horizontal-bar div:nth-child(1), .run-row-headings > th:nth-of-type(6) span { background-color: #fc3; color: black }
.horizontal-bar div:nth-child(2), .run-row-headings > th:nth-of-type(7) span   { background-color: #ae3 }
.horizontal-bar div:nth-child(3), .run-row-headings > th:nth-of-type(8) span  { background-color: #3c3 }
.horizontal-bar div:nth-child(4), .run-row-headings > th:nth-of-type(9) span  { background-color: #f72; }
.horizontal-bar div:nth-child(5), .run-row-headings > th:nth-of-type(10) span  { background-color: #b99; color: black }
.horizontal-bar div:nth-child(6), .run-row-headings > th:nth-of-type(11) span { background-color: #2a8 }
.horizontal-bar div:nth-child(7), .run-row-headings > th:nth-of-type(12) span  { background-color: #268; color: white }
.horizontal-bar div:nth-child(8), .run-row-headings > th:nth-of-type(13) span { background-color: #125; color: white }


.lpr-lot-color-badge {
    display: inline-block;
    height: 0.8em;
    width: 0.8em;
    border-radius: 50%;
}

/* LOADING */

.loader {
    display: none; /* flex */
    z-index: 200;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #fff6;
    opacity: 0;
    transition: all 1s ease
}

.loader .spinner {
    height: 4em;
    width: 4em;
    background-image: url(./img/loading-gear.png);
    background-size: cover;
    animation: spin 2s linear infinite;
}

.show-loader {
    display: flex !important;
    opacity: 1;
    transition: all 1s ease;
}

@keyframes spin {
    from { transform: rotateZ(0deg) }
    to { transform: rotateZ(360deg) }
}

@media (max-width:979px) {
    .dashboard-locations > * {
        flex: calc(50% - 2em);
    }
}

/* Fetch loading */

*[data-loadme] {
    background-color: #ccc;
    opacity: 0.75;
    animation: loadme 0.5s ease alternate infinite
}

@keyframes loadme {
    from { opacity: 0.75 }
    to { opacity: 0.25 }
}


@media (max-width:667px) {
	h1 { font-size:34px; }
	h2 { font-size:26px; }
	#session {
		float:none;
		text-align:center;
	}
 main section {
	 margin:20px -10px;
		border:none;
		padding:9px;
	}
	main section > h1, main section > h2 {
  margin: -10px -10px 10px -10px;
		padding:9px;
	}
    .dashboard-locations > * {
        flex: 100%;
    }
}