
/**
 * WP Go Maps - Atlas Novus 
 * 
 * Root Variables for use by all sub CSS files 
*/
:root {
	/* Primary colors */
	
	/*--wpgmza-color-brand    : #f07935;*/
	--wpgmza-color-brand: #c99;
	--wpgmza-color-light: #eee;
	--wpgmza-color-dark: #59595b;
	--wpgmza-color-error: #ea4335;
	--wpgmza-color-warning: #ffa11e;
	--wpgmza-color-success: #39c217;
	--wpgmza-color-light-alt: #e6e6e6;
	--wpgmza-color-white: #fff;
	--wpgmza-color-charcoal: #333;
	--wpgmza-color-black: #000;
	--wpgmza-color-black-overlay: rgba(0, 0, 0, .18);
	--wpgmza-color-blue: #0073aa;
	--wpgmza-color-blue-alt: #00628f;
	--wpgmza-color-cyan: #31b0d6;
	--wpgmza-color-cyan-dark: #145a70;
	--wpgmza-color-grey-50: #f9f9f9;
	--wpgmza-color-grey-75: #f7f6f6;
	--wpgmza-color-grey-100: #f5f5f5;
	--wpgmza-color-grey-150: #efefef;
	--wpgmza-color-grey-200: #e8e8e8;
	--wpgmza-color-grey-250: #e4e4e4;
	--wpgmza-color-grey-300: #dcdcdc;
	--wpgmza-color-grey-400: #ddd;
	--wpgmza-color-grey-500: #bfbfbf;
	--wpgmza-color-grey-600: #868686;
	--wpgmza-color-grey-700: #737373;
	--wpgmza-color-grey-800: #545454;
	--wpgmza-color-grey-900: #4d4d4e;
	--wpgmza-color-grey-A150: rgba(226, 226, 226, .54);
	--wpgmza-color-grey-common: var(--wpgmza-color-grey-400);
	--wpgmza-color-gray-common: var(--wpgmza-color-grey-common);
	--wpgmza-color-gray-50: var(--wpgmza-color-grey-50);
	--wpgmza-color-gray-75: var(--wpgmza-color-grey-75);
	--wpgmza-color-gray-100: var(--wpgmza-color-grey-100);
	--wpgmza-color-gray-150: var(--wpgmza-color-grey-150);
	--wpgmza-color-gray-200: var(--wpgmza-color-grey-200);
	--wpgmza-color-gray-250: var(--wpgmza-color-grey-250);
	--wpgmza-color-gray-300: var(--wpgmza-color-grey-300);
	--wpgmza-color-gray-400: var(--wpgmza-color-grey-400);
	--wpgmza-color-gray-500: var(--wpgmza-color-grey-500);
	--wpgmza-color-gray-600: var(--wpgmza-color-grey-600);
	--wpgmza-color-gray-700: var(--wpgmza-color-grey-700);
	--wpgmza-color-gray-800: var(--wpgmza-color-grey-800);
	--wpgmza-color-gray-900: var(--wpgmza-color-grey-900);
	--wpgmza-color-gray-A150: var(--wpgmza-color-grey-A150);
	--wpgmza-shadow-common: 0 1px 1px 0 rgba(66, 66, 66, 8%), 0 1px 3px 1px rgba(66, 66, 66, 16%);
	--wpgmza-shadow-high: 0 1px 1px 0 rgba(66, 66, 66, 10%), 0 1px 5px 3px rgba(66, 66, 66, 5%);
}

.wpgmza-hidden {
	display: none !important;
}

.wpgmza-card {
	background: var(--wpgmza-color-white);
	padding: 10px;
	border: none;
	border-radius: 4px;
}

.wpgmza-shadow {
	box-shadow: var(--wpgmza-shadow-common);
}

.wpgmza-shadow-high {
	box-shadow: var(--wpgmza-shadow-high);
}

#wpgmaps_options input:disabled + label, .wpgmza-feature-panel input:disabled + label, .wpgmza-pro-feature {
	opacity: .6;
}

.wpgmza-button {
	display: inline-block;
	text-decoration: none;
	font-size: 13px;
	line-height: 2.15384615;
	min-height: 30px;
	margin: 0;
	padding: 0 10px;
	cursor: pointer;
	border-width: 1px;
	border-style: solid;
	-webkit-appearance: none;
	border-radius: 3px;
	white-space: nowrap;
	box-sizing: border-box;
	background: var(--wpgmza-color-light);
	border-color: var(--wpgmza-color-light);
	transition: background .3s ease;
}

.wpgmza-button:hover {
	cursor: pointer;
	background: var(--wpgmza-color-light-alt);
	border-color: var(--wpgmza-color-light-alt);
}

.wpgmza-button-white {
	background: var(--wpgmza-color-white);
}

.wpgmza-button-primary {
	background: var(--wpgmza-color-dark);
	border-color: var(--wpgmza-color-dark);
	color: var(--wpgmza-color-white);
}

.wpgmza-button-primary:hover {
	background: var(--wpgmza-color-charcoal);
	border-color: var(--wpgmza-color-charcoal);
}

.wpgmza-button-accent {
	background: var(--wpgmza-color-blue);
	border-color: var(--wpgmza-color-blue);
	color: var(--wpgmza-color-white);
}

.wpgmza-button-accent:hover {
	background: var(--wpgmza-color-blue-alt);
	border-color: var(--wpgmza-color-blue-alt);
}

a.wpgmza-button {
	color: var(--wpgmza-color-charcoal);
}

a.wpgmza-button-primary, a.wpgmza-button-accent {
	color: var(--wpgmza-color-white);
}

/* Layout Helpers */
.wpgmza-pos-absolute {
	position: absolute;
}

.wpgmza-pos-relative {
	position: relative;
}

.wpgmza-pad-0 {
	padding: 0;
}

.wpgmza-pad-5 {
	padding: 5px;
}

.wpgmza-pad-10 {
	padding: 10px;
}

.wpgmza-pad-x-10 {
	padding: 0 10px;
}

.wpgmza-pad-y-10 {
	padding: 10px 0;
}

.wpgmza-pad-20 {
	padding: 20px;
}

.wpgmza-pad-x-20 {
	padding: 0 20px;
}

.wpgmza-pad-y-20 {
	padding: 20px 0;
}

.wpgmza-margin-0 {
	margin: 0;
}

.wpgmza-margin-10 {
	margin: 10px;
}

.wpgmza-margin-x-10 {
	margin: 0 10px;
}

.wpgmza-margin-y-10 {
	margin: 10px 0;
}

.wpgmza-margin-b-10 {
	margin-bottom: 10px;
}

.wpgmza-margin-t-10 {
	margin-top: 10px;
}

.wpgmza-margin-l-10 {
	margin-left: 10px;
}

.wpgmza-margin-r-10 {
	margin-right: 10px;
}

.wpgmza-margin-20 {
	margin: 20px;
}

.wpgmza-margin-x-20 {
	margin: 0 20px;
}

.wpgmza-margin-y-20 {
	margin: 20px 0;
}

.wpgmza-margin-b-20 {
	margin-bottom: 20px;
}

.wpgmza-margin-t-20 {
	margin-top: 20px;
}

.wpgmza-margin-l-20 {
	margin-left: 20px;
}

.wpgmza-margin-r-20 {
	margin-right: 20px;
}

.wpgmza-stretch {
	width: 100%;
}

.wpgmza-fit-content {
	width: fit-content;
}

.wpgmza-text-align-center {
	text-align: center;
}

.wpgmza-text-align-left {
	text-align: left;
}

.wpgmza-text-align-right {
	text-align: right;
}

.wpgmza-list-dots {
	list-style: circle;
	margin-left: 20px !important;
}

.wpgmza-rounded-image {
	border-radius: 60px;
	overflow: hidden;
}

.wpgmza-rounded-image img {
	transform: scale(1.1);
}

.wpgmza-flex-row {
	display: flex;
}

.wpgmza-flex-col {
	display: flex;
	flex-direction: column;
}

.wpgmza-inline-indent {
	width: calc(20px * var(--wpgmza-depth));
	height: 18px;
	display: inline-block;
	position: relative;
}

/* Unhappy with this styling, it's a work in progress, shelved for now */

/*
.wpgmza-inline-indent:before{
    content: "";
    display: block;
    width: calc(100% - 10px);
    height: 4px;
    background: var(--wpgmza-color-grey-400);
    border-radius: 10px;
    position: absolute;  
    left: 0px;
    top: 9px;  
}
*/
.wpgmza-google-text-overlay > .wpgmza-inner {
	position: absolute;
	transform: translate(-50%, -50%);
	text-align: center;
	font-weight: bold;
	text-shadow: 0px 0px 2px var(--wpgmza-color-white);
	text-shadow: 0px 0px 2px var(--wpgmza-color-white), 0px 0px 2px var(--wpgmza-color-white), 0px 0px 2px var(--wpgmza-color-white), 0px 0px 2px var(--wpgmza-color-white);
}

/* Override autocomplete styles */
.pac-container {
	border-radius: 2px;
	border-top: none;
	box-shadow: var(--wpgmza-shadow-common);
}

.pac-container .pac-item {
	border-top: none;
}

.pac-container .pac-item .pac-item-query {
	color: var(--wpgmza-color-charcoal);
}

.wpgmza-gesture-overlay {
	color: white;
	background: rgba(0, 0, 0, .5);
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 999;
	text-align: center;
	line-height: 400px;
	pointer-events: none;
}

/* Google AdvancedMarkerElement supports */

/* This is a block of CSS replacements for things that use to be handled by Marker module */
.wpgmza-google-icon-transform-fix {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: center;
}

.wpgmza-google-icon-transform-fix > div:not(.wpgmza-google-marker-label) {
	position: relative;
}

.wpgmza-google-icon-transform-fix > div > img {
	position: absolute;
	bottom: 0;
	left: var(--wpgmza-icon-offset);
}

/* Marker nudge */
.wpgmza-google-icon-nudge {
	position: relative;
	left: var(--wpgmza-nudge-x);
	bottom: var(--wpgmza-nudge-y);
}

/* Marker non-interactive */
.wpgmza-google-marker-non-interactive {
	cursor: unset !important;
	pointer-events: none !important;
}

/* Marker hidden */
.wpgmza-google-marker-hidden {
	display: none;
}

/* Marker Opacity, variable driven */
.wpgmza-google-marker-opacity {
	opacity: var(--wpgmza-opacity) !important;
}

/* Marker animations - For Google markers using AdvancedMarkerElement */

/* Could become the defaults for OpenLayers too for consistency */
.wpgmza-google-marker-bounce {
	animation: wpgmza-google-animation-bounce .3s ease infinite alternate;
}

.wpgmza-google-marker-drop {
	animation: wpgmza-google-animation-drop .3s linear forwards;
}

/* Marker Labels */
.wpgmza-google-marker-label, .wpgmza-google-marker-label-legacy {
	position: absolute;
	font-size: .8rem;
	bottom: -1.2rem;
	min-width: max-content;
	text-align: center;
	font-weight: bold;
	color: #000;
	text-shadow: 0px 0px 2px #fff;
	text-shadow: 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff;
}

/* Extend the legacy marker module styling as well, so it is accurate */
.wpgmza-google-marker-label-legacy {
	position: relative;
	bottom: unset;
	top: 1.6rem;
}

/* Keyframes */
@keyframes wpgmza-google-animation-bounce {
	0% {
		transform: translateY(0px);
	}
	
	100% {
		transform: translateY(-20px);
	}
}

@keyframes wpgmza-google-animation-drop {
	0% {
		transform: translateY(-200px) scaleY(.9);
		opacity: 0;
	}
	
	5% {
		opacity: .7;
	}
	
	50% {
		transform: translateY(0px) scaleY(1);
		opacity: 1;
	}
	
	65% {
		transform: translateY(-17px) scaleY(.9);
		opacity: 1;
	}
	
	75% {
		transform: translateY(-22px) scaleY(.9);
		opacity: 1;
	}
	
	100% {
		transform: translateY(0px) scaleY(1);
		opacity: 1;
	}
}
