/*
	-----------------------------------------------------------------------------------
	Gutenberg block
	-----------------------------------------------------------------------------------
*/
.mapp-gt .mapp-layout {
	margin: 0;
	position: relative;     /* Prevent map overlapping GT controls */
	z-index: 0;             /* Prevent map overlapping GT controls */
}

/* Center in editor */
.wp-block[data-align="center"] .mapp-gt .mapp-layout {
	margin-left: auto;
	margin-right: auto;
}

.mapp-gt-placeholder .dashicon {
	margin-right: 5px;
}

.mapp-gt-preview {
	border: 1px solid black;
}

/*
	-----------------------------------------------------------------------------------
	Map library
	-----------------------------------------------------------------------------------
*/
.mapp-library-wrapper {
	background-color: white;
	border: 1px solid lightgray;
	display: flex;
	flex-direction: column;
	height: 80vh;
	margin-top: 10px;
	width: 100%;
}

.mapp-library .mapp-edit-title {
}

.mapp-library .mapp-edit-title input {
	margin: 5px;
	width: 240px;
}

.mapp-library h1 {
	display: inline;
	margin-right: 10px;
}

/* Hide the MCE editor */
#wp-mapp-library-tinymce-wrap {
	display: none;
}

/*
	-----------------------------------------------------------------------------------
	Picker / Editor Modal
	-----------------------------------------------------------------------------------
*/


.mapp-pick-modal .components-modal__header, .mapp-edit-modal .components-modal__header  {
	margin: 0;
	padding: 10px 20px;
}

.mapp-pick-modal .components-modal__content, .mapp-edit-modal .components-modal__content  {
	background-color: white;
	font-size: 13px;
	padding: 0;
}

/* Override WP settings */
.mapp-pick-modal a, .mapp-edit-modal a {
	text-decoration: none;
}

.mapp-pick-modal {
	height: 90vh;
	max-height: 625px;
	max-width: 450px;
	width: 90vw;
}

.mapp-edit-modal {
	max-height: none;
	max-width: none;
	height: 95vh;
	width: 90vw;
}

@media screen and (max-width: 600px) {
	.mapp-pick-modal {
		height: 100vh;
		max-height: none;
		max-width: none;
		width: 100vw;
	}
	.mapp-edit-modal {
		height: 100vh;
		width: 100vw;
	},
}

.mapp-pick-modal .components-modal__content, .mapp-edit-modal .components-modal__content {
	display: flex;
	flex-direction: column;
}

/*
	-----------------------------------------------------------------------------------
	Media list
	-----------------------------------------------------------------------------------
*/

.mapp-pick-filter {
	border-bottom: 1px solid lightgray;
	padding: 10px 20px;
}

.mapp-pick-filter .components-radio-control__option {
	display: inline-block;
	margin-bottom: 0 !important;        /* Classic editor */
	margin-right: 10px;
	vertical-align: bottom;
}

.mapp-pick-filter .components-radio-control__option input {
	margin-right: 5px;
}

.mapp-pick-filter .components-spinner {
	float: right;
}

.mapp-pick-type {
	align-self: center;
	margin-right: 10px;
	margin-top: 10px;
}

.mapp-pick-search {
	display: flex;
	flex-direction: column;
}

.mapp-pick-search label {
	margin-right: 5px;
}

.mapp-pick-search input {
	margin-bottom: 8px;
	max-width: 300px;
	width: 100%;
}

.mapp-pick-search .components-base-control__field {
	margin-bottom: 0;
}

.mapp-pick-message {
	font-size: 1.5em;
	position: relative;
	text-align: center;
	top: 45%;
}

.mapp-pick-header {
	background-color: white;
	border-bottom: 1px solid lightgray;
	display: flex;
	padding: 10px 20px;
	position: stick;
	top: 0;
	z-index: 1;
}

.mapp-pick-items {
	flex: 1;
	overflow: auto;
}

.mapp-pick-item {
	align-items: center;
	border-bottom: 1px solid lightgray;
	cursor: pointer;
	display: flex;
	overflow: hidden;
	padding: 5px 20px;
	text-overflow: ellipsis;
}

.mapp-pick-item.mapp-selected {
	background-color: #f6f6f6;
	font-weight: 500;
}

.mapp-pick-item:hover {
	background-color: #f6f6f6;
}

.mapp-pick-col-map-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 35%;
}

.mapp-pick-col-post-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 35%;
}

.mapp-pick-col-post-title a {
	font-weight: normal;
	text-decoration: none;
}

.mapp-pick-col-mapid {
	white-space: nowrap;
	width: 15%;
}

.mapp-pick-col-actions {
	font-weight: normal;
	white-space: nowrap;
	width: 15%;
}

.mapp-pick-col-actions button {
	background: none;
	border: none;
}

.mapp-pick-col-actions .dashicon {
	color: inherit;
}

.mapp-pick-col-actions .dashicon:hover {
	color: #007cba;
}


/*
	-----------------------------------------------------------------------------------
	Media editor
	-----------------------------------------------------------------------------------
*/

.mapp-edit {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.mapp-edit .mapp-gt {
	flex: 1;
}

.mapp-edit .mapp-layout {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	padding: 0;
	width: 100% !important;
}

.mapp-edit .mapp-wrapper {
	height: 100% !important;
	padding-bottom: none;
}

.mapp-edit-title input {
	cursor: pointer;
	font-size: 1rem !important;
	margin-left: -10px;
}

.mapp-edit-title input:not(:hover) {
	border: 1px solid white !important;
}

.mapp-edit-toolbar {
	border-top: 1px solid lightgray;
	padding: 5px 20px;
	white-space: nowrap;
}

.mapp-edit-toolbar button {
	margin-right: 6px;
}

.mapp-edit-delete {
	float: right;
}

/*
	-----------------------------------------------------------------------------------
	Inspector styles - shared styles for settings, query, options
	PanelRow is used to layout items horizontally using flex
	-----------------------------------------------------------------------------------
*/

/* Panel rows - space after label  */
.mapp-gt-inspector .components-panel__row .components-base-control__label {
	margin-right: 10px;
}

/* Panel rows - margin on label & field is unecessary */
.mapp-gt-inspector .components-panel__row .components-base-control__label {
	margin-bottom: 0px;
	margin-right: 10px;
}

/* Panel rows - margin on bottom is unnecessary */
.mapp-gt-inspector .components-panel__row .components-base-control__field {
	margin-bottom: 0px;
}

/* Panel rows - with no margin on bottom, help text doesn't need to be moved up (WP default -24px) */
.mapp-gt-inspector .components-panel__row .components-base-control__help {
	margin-top: 0 !important;
}

/* Panel rows - with no margin on bottom, items may not align with default 'center' */
.mapp-gt-inspector .components-panel__row {
	align-items: baseline;
}

/* WP sets different (8px) margin-bottom only on last child in panel row */
.block-editor-block-inspector .mapp-gt-inspector .components-base-control:last-child {
	margin-bottom: 24px;
}

@media only screen and (max-width: 780px) {
	.mapp-gt-inspector select {
		max-width: none !important;     /* WP puts dropdowns next to labels on small screens */
	}
}

/* Make buttongroup into a block control rather than inline so it'll behave like other contros, e.g. select, text, etc */
/* todo */

/*
	-----------------------------------------------------------------------------------
	Settings
	-----------------------------------------------------------------------------------
*/

.mapp-settings-title {
	display: flex;
	overflow: hidden;
}

.mapp-settings-title .components-base-control__field {
	overflow: hidden;
	text-overflow: ellipsis;
}

.mapp-settings-title input {
	font-size: 2em;
}

.mapp-settings-id {
	white-space: nowrap;
}

.mapp-settings-dims-select {
	display: block !important;     /* GT tries to set flex */
	min-width: 7em;    /* WP's custom arrow obscures values */
}

.mapp-settings-dims-custom input {
	margin-top: 2px;
}

.mapp-settings-dims-custom p {
	margin-bottom: 0;
}

.mapp-settings-poilist {
	white-space: nowrap;
}

.mapp-settings-poilist .components-radio-control__option {
	display: inline-block;
}
.mapp-settings-poilist .components-base-control__label {
	display: inline;
}

.mapp-settings-viewport-status {
	cursor: pointer;
	margin-left: 10px;
}

/*
	-----------------------------------------------------------------------------------
	Mashup query builder
	-----------------------------------------------------------------------------------
*/

button.mapp-query-refresh {
	display: inline;
	margin-bottom: 10px;
	text-align: center;
	width: 100%;
}

.mapp-query-custom {
	display: block;
}

.mapp-query-custom button {
	margin-right: 10px;
}

.mapp-query-error {
	border: 2px solid red;
	padding: 5px;
}

.mapp-query-orderby select {
	text-transform: capitalize;
}

.mapp-query-custom-error textarea {
	border: 2px solid red;
}

.mapp-query-card {
	margin-bottom: 10px !important;
}

.mapp-query-card-header {
	border-bottom: 1px solid lightgray;
	display: flex;
	justify-content: space-between;
	padding-bottom: 5px;
}

.mapp-query-card-title {
	margin-right: 10px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mapp-query-card-body {
	margin-top: 5px;
	padding: 5px 0;
}

.mapp-query-add-taxonomy {
	flex: 1;
}

/*
	-----------------------------------------------------------------------------------
	Multiselect
	-----------------------------------------------------------------------------------
*/

.mapp-select {}

.mapp-select-input {
	border: 1px solid lightgray;
	cursor: pointer;
	display: flex;
	line-height: normal;
	padding: 5px;
}

@media only screen and (max-width: 782px) {
	.mapp-select-input {
		min-height: 40px;
		width: 100%;
	}
}

.mapp-select-input .dashicons {
	font-size: 16px;
	height: 16px;
	width: 16px;
}

.mapp-select-dropdown-wrapper {
	position: relative;
}

.mapp-select-dropdown {
	background-color: white;
	border-radius: 4px;
	box-shadow: 0 5px 15px rgba(0,0,0,.2);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	max-height: 150px;
	position: absolute;
	top: 0; left: 0; right: 0;
	z-index: 100000;
}

.mapp-select-dropdown-list {
	flex: 1;
	overflow: auto;
	padding: 5px;
}

.mapp-select-dropdown-item {
	overflow: hidden;
	padding: 5px;
	text-overflow : ellipsis;
	white-space: nowrap;
}

.mapp-select-dropdown-item:hover {
	background-color: #eee;
}

.mapp-select .components-base-control, .mapp-select .components-base-control__field {
	margin-bottom: 0 !important;
}

/* WP checkboxcontrol has a bug: it doubles click events on any parent, so we can't use parent div, and it also doesn't make event object available; So, make checkbox full width instead */
.mapp-select-dropdown-item .components-base-control__field {
	display: flex;
}

.mapp-select-dropdown-item label {
	flex: 1;
}

.mapp-select-tokens {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
}

.mapp-select-token {
	background-color: #ddd;
	margin: 2px;
	overflow: hidden;
	padding: 3px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mapp-select-token-delete {
	padding: 2px;
}

.mapp-select-token-delete:hover {
	color: red;
}

.mapp-select-values {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mapp-select-filter {
	padding: 5px;
}


/*
	-----------------------------------------------------------------------------------
	POI editor
	-----------------------------------------------------------------------------------
*/

.mapp-poi-edit {
	width: 250px;
}

.mapp-poi-edit .mapp-poi-header {
	display: flex;
	align-items: center;
}

.mapp-poi-edit a, .mapp-poi-edit button, .mapp-poi-edit input[type="button"] {
	vertical-align: middle !important;
}

.mapp-poi-edit .mapp-poi-toolbar {
	margin-top: 5px;
}

.mapp-poi-edit .mapp-poi-toolbar a,.mapp-poi-edit .mapp-poi-toolbar .button {
	margin-right: 5px;
}

.mapp-poi-edit .mapp-poi-title {
	width: 100%;
	font-weight: bold;
	vertical-align: middle;
}

.mapp-poi-edit [data-mapp-iconpicker], .mapp-poi-edit [data-mapp-colorpicker] {
	margin-left: 5px !important;
}

.mapp-poi-edit .mapp-poi-body {
	height: 143px;
	width: 100%;
}

.mapp-poi-edit .mapp-poi-visual, .mapp-poi-edit .mapp-poi-html {
	cursor: pointer;
}

.mapp-poi-edit .mapp-poi-visual.mapp-active, .mapp-poi-edit .mapp-poi-html.mapp-active {
	color: black;
}

/* Border around tinyMCE editor (WP removes it).  mceLayout is for WP < 3.9 */
.mapp-poi-edit .mce-panel, .mapp-poi-edit table.mceLayout {
	border: 1px solid lightgray !important;
}

.mapp-poi-edit .mapp-poi-url {
	width: 100%;
}



/*
	-----------------------------------------------------------------------------------
	Settings screen
	-----------------------------------------------------------------------------------
*/

.mapp-settings-screen #mapp0-layout {
	max-width: 600px;
}

.mapp-settings-screen label {
	margin-right: 10px;
	white-space: nowrap;
}

.mapp-settings-toolbar {
	margin-top: 10px;
}

/* Hidden submit buttons to use as form default */
.mapp-settings-hidden-toolbar {
	height: 0;
	overflow: hidden;
}

/* Simulate postboxes */
.mapp-settings-screen h2 {
	background-color: white;
	border-bottom: 1px solid #eee;
	font-size: 14px;
	margin-bottom: 0;
	padding: 8px 12px 8px 12px;
}

.mapp-settings-screen .form-table {
	margin-top: 0;
}

.mapp-settings-screen .form-table th {
	background-color: white;
	padding: 16px 12px 16px 12px;
}

.mapp-settings-screen .form-table td {
	background-color: white;
	padding: 16px 12px 16px 12px;
}

.mapp-settings-screen .button {
	vertical-align: middle;
}

/* MapPress tables */
.mapp-settings-screen .form-table table {
	border: 1px solid #dfdfdf;
	border-collapse: collapse;
	height: auto;
	margin-top: 5px;
	width: auto;
}

.mapp-settings-screen .form-table table th {
	font-weight: bold;
	background-color: rgb(241, 241, 241);
	width: auto;
	height: auto;
	border-bottom: 1px solid lightgray;
	padding: 5px;
}

.mapp-settings-screen .form-table table td {
	width: auto;
	height: auto;
	border-bottom: 1px solid lightgray;
	margin: 0;
	vertical-align: middle;
	padding: 5px;
}

a.mapp-help {
	display: inline-block;
	margin-left: 2px;
	text-decoration: none;
}


/* Sort handles */
.mapp-handle {
	cursor: move;
}

.mapp-yes {
	vertical-align: middle;
	color:green;
}

.mapp-no {
	vertical-align: middle;
	color:red;
}

a.mapp-check-account {
	margin-left: 10px;
	text-decoration: none;
}



/*
	-----------------------------------------------------------------------------------
	Template Editor
	-----------------------------------------------------------------------------------
*/

.mapp-tp-detail {
	height: 600px;
	width: 800px;
	max-width: 90%;
	max-height: 90%;
	padding: 10px;
}

.mapp-tp-detail .mapp-tp-name {
	font-weight: bold;
	margin: 5px 0 5px 0;
	text-transform: uppercase;
}

.mapp-tp-detail .mapp-tp-path {
	font-size: 12px;
	font-style: italic;
	margin-bottom: 5px;
}

.mapp-tp-detail code {
	border: 1px solid gray;
	margin-right: 10px;
}

.mapp-tp-detail .mapp-tp-toolbar {
	border-top: 1px solid lightgray;
	margin-top: 5px;
	padding: 5px;
}

.mapp-tp-detail .mapp-tp-toolbar input.button {
	margin-right: 4px;
}

.mapp-tp-detail .mapp-tab-standard .CodeMirror {
	background: #f7f7f7;
	height: auto;
	position: absolute;
	top: 100px; bottom: 50px; left: 5px; right: 5px;
}

.mapp-tp-detail .mapp-tab-content .CodeMirror {
	position: absolute;
	top: 150px; bottom: 50px; left: 5px; right: 5px;
}

.mapp-tp-detail .mapp-tp-toolbar {
	position: absolute;
	bottom: 5px; left: 5px; right: 5px;
}

/*
	-----------------------------------------------------------------------------------
	Icon Editor
	-----------------------------------------------------------------------------------
*/

.mapp-icon-editor {
	cursor: default;
	display: flex;
	flex-direction: column;
	height: 70vh;
	max-width: 500px;
	padding: 20px;
	width: 70vh;;
}

.mapp-icon-editor-wrapper {
	border: 1px solid lightgray;
	flex: 1;
	overflow: auto;
}

.mapp-icon-editor-toolbar {
	padding-top: 20px;
}

ul.mapp-icon-editor-list {
	display: table;
	margin: 0;
	padding: 0;
	width: 100%;
}

.mapp-icon-editor-list li {
	display: table-row;
}

.mapp-icon-editor-list li:hover {
	background-color: #fafafa;
}

.mapp-icon-editor-list span  {
	border-bottom: 1px solid lightgray;
	display: table-cell;
	overflow: hidden;
	padding: 5px 15px;
	text-overflow: ellipsis;
}

.mapp-icon-editor-list img {
	margin-right: 10px;
}

.mapp-icon-editor .dashicons {
	color: #d0d0d0;
}

.mapp-icon-editor .dashicons:hover {
	color: black;
}

.mapp-icon-editor .spinner {
	float: none;
	visibility: visible;
}

.mapp-icon-editor-msg {
	margin-top: 50px;
	text-align: center;
}


/*
	-----------------------------------------------------------------------------------
	Tabs
	-----------------------------------------------------------------------------------
*/

.mapp-tabs .mapp-tab-label {
	background-color: white;
	border-left: 1px solid lightgray;
	border-right: 1px solid lightgray;
	border-top: 1px solid lightgray;
	cursor: pointer;
	display: inline-block;
	margin: 0;
	padding: 10px;
	position: relative;
	top: 1px;
	z-index: 1;
}
.mapp-tabs .mapp-tab-label.mapp-active {
	border-bottom: 1px solid white;
	font-weight: bold;
}

.mapp-tabs .mapp-tab {
	background-color: white;
	border-top: 1px solid lightgray;
	clear: both;
	display: none;
	padding: 10px;
}

.mapp-tabs .mapp-tab.mapp-active {
	display: block;
}

/*
	-----------------------------------------------------------------------------------
	Popup
	-----------------------------------------------------------------------------------
*/

/* Keep autocomplete above */
.pac-container {
	z-index: 100002;
}

.mapp-popup {
	background-color: white;
	border: 1px solid lightgray;
	box-shadow: 5px 5px 10px #888;
	box-sizing: content-box;
	display: inline-block;
	z-index: 100005;	/* Keep above popup-max */
}

/* Center modals */
.mapp-popup-modal {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 100002;
}

.mapp-popup-max {
	left: 5%;
	right: 5%;
	top: 5%;
	bottom: 5%;
	transform: none;
}

@media only screen and (max-width: 780px) {
	.mapp-popup-max {
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}
}

/* Prevent scrollbars on body when popup is open */
body.mapp-popup-noscroll {
	overflow: hidden;
}

.mapp-popup-backdrop {
	background-color: black;
	display: none;
	opacity: 0.8;
	position: fixed;
	top: 0; right: 0; bottom: 0; left : 0;
	user-select: none;
	z-index: 100000;		/* WP adminbar is 99999 */
}

/*
	-----------------------------------------------------------------------------------
	Icon Picker
	-----------------------------------------------------------------------------------
*/

.mapp-iconpicker {
	padding: 5px;
	width: 260px;
}

img.mapp-iconpicker-toggle {
	max-width: 24px !important;
	max-height: 24px !important;
}

.mapp-iconpicker-wrapper {
	height: 210px;
	overflow: auto;
	padding: 5px;
	user-select: none;
}

.mapp-iconpicker-toolbar {
	padding: 5px 5px 0 5px;
	border-top: 1px solid lightgray;
}

.mapp-iconpicker .mapp-icon, .mapp-iconpicker .mapp-icon-sprite {
	border: 2px solid white;
	user-select: none;
	margin: 0;
}

.mapp-iconpicker .mapp-icon:hover, .mapp-iconpicker .mapp-icon.mapp-selected, .mapp-iconpicker .mapp-icon-sprite:hover, .mapp-iconpicker .mapp-icon-sprite.mapp-selected {
	border: 2px solid blue;
}

.mapp-iconpicker .mapp-icon-sprite { display: inline-block; background: transparent url('../images/icons.png') no-repeat; width: 24px; height: 24px; }

/*
	-----------------------------------------------------------------------------------
	Color Picker
	-----------------------------------------------------------------------------------
*/

.mapp-colorpicker {
	padding: 5px;
	width: 260px;
	max-height: 250px;
}

span.mapp-colorpicker-toggle {
	border: 1px solid lightgray;
	cursor: pointer;
	display: inline-block;
	height: 20px;
	margin: 1px;
	vertical-align: middle;
	width: 20px;
}

.mapp-colorpicker span[data-mapp-color] {
	border: 2px solid lightgray;
	display: inline-block;
	height: 15px;
	line-height: 1;
	margin: 1px;
	width: 15px;
}

.mapp-colorpicker .mapp-color:hover, .mapp-colorpicker .mapp-color.mapp-selected {
	border: 2px solid black;
}

/*
	-----------------------------------------------------------------------------------
	Classic (tinyMCE) editor
	-----------------------------------------------------------------------------------
*/
/*
	-----------------------------------------------------------------------------------
	Metaboxes
	-----------------------------------------------------------------------------------
*/
#mappress.postbox h1 {
	display: inline-block;
	margin-right: 10px;
}

/*
	-----------------------------------------------------------------------------------
	Map list
	-----------------------------------------------------------------------------------
*/

.mapp-mce {
	background-color: white;
}

.mapp-mce input[type="button"] {
	vertical-align: middle;
}

/* Override WP settings */
.mapp-mce input[type="text"], .mapp-mce select {
	height: auto !important;
	padding: 3px 6px 3px 6px;
}

.mapp-mce select {
	padding-right: 25px;
	vertical-align: top;
}

.mapp-mce-edit-panel {
	display:none;
}

.mapp-mce-edit-panel td {
	padding-right: 5px;
}

.mapp-mce-edit-toolbar {
	margin-top: 5px;
}

.mapp-mce .mapp-layout {
	border: 1px solid lightgray;
	margin: 5px 0 0 0;
	width: 100% !important;
}

.mapp-mce .mapp-wrapper {
	height: 350px !important;
}



.mapp-mce-search {
	display: none;
	float: right;
}

input.mapp-mce-title {
	width: 100%;
}

.mapp-mce-list {
	background-color: white;
	max-height: 300px;
	overflow: auto;
}

.mapp-mce-list-toolbar {
	border-bottom: 1px solid lightgray;
	display: flex;
	flex-align: center;
	padding: 5px 0 5px 0;
}

.mapp-mce-list-toolbar * {
	vertical-align: middle;
}

.mapp-mce-item {
	border-bottom: 1px solid lightgray;
	cursor: pointer;
	overflow: hidden;
	padding: 5px;
}

.mapp-mce-item.mapp-selected {
	background-color: #f6f6f6;
	font-weight: bold;
}

.mapp-mce-item:hover {
	background-color: #f6f6f6;
}

.mapp-mce-item .mapp-actions {
	visibility: hidden;
}

.mobile .mapp-mce-item .mapp-actions {
	visibility: visible;
}

.mapp-mce-item:hover .mapp-actions {
	visibility: visible;
}



/*
	-----------------------------------------------------------------------------------
	Misc
	-----------------------------------------------------------------------------------
*/
#mappress .mapp-support {
	border-bottom: 1px solid lightgray;
	padding-bottom: 10px;
}

#mappress .mapp-support h1 {
	padding: 0;
}

.mapp-support .button, .mapp-support .button:active {
	margin-left: 10px;
	vertical-align: middle;
}

.mapp-grid .mapp-close {
	position: static;
}

.mapp-review p {
	font-size: 14px;
}