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

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

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

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

/* WP uses different height, font size & padding on input elements, at different screen resolutions */
.mapp-media input[type="text"], .mapp-media select {
	height: auto !important;
	padding: 3px 6px 3px 6px;
}

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

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

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

.mapp-media-list {
	max-height: 300px;
}

.mapp-media-list-toolbar {
	border-bottom: 1px solid lightgray;
	padding: 5px 0 5px 0;
}

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

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

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

/*
	-----------------------------------------------------------------------------------
	Map editor
	-----------------------------------------------------------------------------------
*/

.mapp-edit .mapp-list-header {
	background-color: #f1f1f1;
	border-bottom: 1px solid lightgray;
	padding: 10px;
	text-align: left;
}

.mapp-edit .mapp-list-header a {
	color: black;
	font-size: 12px;
	text-decoration: none;
}

.mapp-edit .mapp-list-header a:hover {
	text-decoration: underline;
}

.mapp-edit .mapp-list-header .dashicons {
	font-size: 16px;
	vertical-align: middle;
}

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

.mapp-edit .mapp-wrapper {
	height: 325px !important;
}

.mapp-searchbox {
	display: block;
	margin-top: 10px;
	width: 100%;
	max-width: 500px;
}

.mapp-searchbox input {
	vertical-align: middle;
	width: 100%;
}

.mapp-search-button, .mapp-geolocate-button {
	background-repeat: no-repeat !important;
	background-position: center center !important;
	margin: 0 !important;
	vertical-align: middle !important;
}

.mapp-search-button:before, #mappress .mapp-geolocate-button:before {
	content: "XX";
	visibility: hidden;
}

.mapp-search-button, .mapp-search-button:hover, .mapp-search-button:focus {
	background-image: url('../images/search.png') !important;
}

.mapp-geolocate-button, .mapp-geolocate-button:hover, .mapp-geolocate-button:focus {
	background-image: url('../images/geolocate-2x.png') !important;
	background-size: 18px 18px !important;
}

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

.mapp-poi-edit {}

.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;
}

/* Table used to align title/icon */
.mapp-poi-edit .mapp-table {
	width: 100%;
}

.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 {
	width: 250px;
	height: 143px;
}

.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
	-----------------------------------------------------------------------------------
*/

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

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

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

/* 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;
}

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

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

.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;
}

/*
	-----------------------------------------------------------------------------------
	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;
	padding: 5px 20px 5px 5px;
	z-index: 100005;	/* Keep above popup-max */
}

.mapp-popup-fixed {
	background-color: white;
	border: 2px solid black;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 100002;
}

.mapp-popup-max {
	transform: none;
	top: 80px; 	left: 80px; bottom: 80px; right: 80px;
}

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

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

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

.mapp-iconpicker {
	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 {
	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;
}

/*
	-----------------------------------------------------------------------------------
	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;
}