/**

 * WP Go Maps - Atlas Novus 

 * 

 * Root Variables for use by all sub CSS files 

*/

:root{

    /* Primary colors */

    --wpgmza-color-brand    : #cc9999;



    --wpgmza-color-light    : #eeeeee;

    --wpgmza-color-dark     : #59595b;

    --wpgmza-color-error    : #ea4335;

    --wpgmza-color-warning  : #FFA11E;

    --wpgmza-color-success  : #39C217;

    

    /* Alternate colors */

    --wpgmza-color-light-alt : #e6e6e6;



    /* Alias colors */

    --wpgmza-color-white    : #ffffff;

    --wpgmza-color-charcoal : #333333;

    --wpgmza-color-black    : #000000;

    

    --wpgmza-color-black-overlay : #0000002e;



    --wpgmza-color-blue     : #0073aa;

    --wpgmza-color-blue-alt : #00628f;

    --wpgmza-color-blue-light : #ddecf3;

    --wpgmza-color-blue-light-alt : #cce3ee;



    --wpgmza-color-cyan     : #31b0d6;

    --wpgmza-color-cyan-dark: #145a70;



    /* CTA colors */

    --wpgmza-color-gold  : #e2973f;

    --wpgmza-color-gold-alt  : #d38c3b;

    --wpgmza-color-gold-light  : #fff4e6;



    /* Grey tones */

    --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 : #dddddd;

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





    /* Transparent Grey tones */

    --wpgmza-color-grey-A150 : #e2e2e28a;



    /* Common Grey Aliased */

    --wpgmza-color-grey-common : var(--wpgmza-color-grey-400);

    

    /* Grey tones mapped to Gray tones */

    --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 rgb(66 66 66 / 8%), 0 1px 3px 1px rgb(66 66 66 / 16%);

    --wpgmza-shadow-high :  0 1px 1px 0 rgb(66 66 66 / 10%), 0 1px 5px 3px rgb(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: 0.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 0.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);

}





.wpgmza-button-call-to-action{

    background: linear-gradient(30deg, var(--wpgmza-color-blue), var(--wpgmza-color-blue-alt));



    border: none;

    color: var(--wpgmza-color-white) !important;

    font-weight: 600;



    box-shadow: var(--wpgmza-shadow-common);

}



.wpgmza-button-call-to-action:hover{

    background: linear-gradient(30deg, var(--wpgmza-color-blue), var(--wpgmza-color-blue-alt));

    background-size: 200%;

    border-color: none;

}



a.wpgmza-button {

    color: var(--wpgmza-color-charcoal);

}



a.wpgmza-button-primary,

a.wpgmza-button-accent,

a.wpgmza-button-call-to-action {

    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-text-vertical-middle {

    vertical-align: middle;

}



.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,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 0.3s ease infinite alternate;

}



.wpgmza-google-marker-drop {

    animation: wpgmza-google-animation-drop 0.3s linear forwards;

}



/* Marker Labels */

.wpgmza-google-marker-label,

.wpgmza-google-marker-label-legacy {

    position: absolute;

    font-size: 0.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;

}



/* Grid Supports */

.wpgmza-grid {

    display: grid;

    gap: 15px; 

}



.wpgmza-grid-auto-fit {

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

}



.wpgmza-grid-cols-1 {

    grid-template-columns: repeat(1, 1fr);

}



.wpgmza-grid-cols-2 {

    grid-template-columns: repeat(2, 1fr);

}



.wpgmza-grid-cols-3 {

    grid-template-columns: repeat(3, 1fr);

}



.wpgmza-grid-cols-4 {

    grid-template-columns: repeat(4, 1fr);

}



.wpgmza-grid-cols-5 {

    grid-template-columns: repeat(5, 1fr);

}



.wpgmza-grid-cols-6 {

    grid-template-columns: repeat(6, 1fr);

}



.wpgmza-grid-item-col-span-2 {

    grid-column: span 2;

}



.wpgmza-grid-item-col-span-3 {

    grid-column: span 3;

}



.wpgmza-grid-item-col-span-4 {

    grid-column: span 4;

}



.wpgmza-grid-item-col-span-5 {

    grid-column: span 5;

}



.wpgmza-grid-item-col-span-6 {

    grid-column: span 6;

}



.wpgmza-grid-align-center {

    justify-items: center; 

}



.wpgmza-grid-align-end {

    justify-items: end;

}



.wpgmza-grid-valign-center {

    align-items: center; 

}

.wpgmza-grid-valign-end {

    align-items: end;

}



@media (max-width: 768px) {

    .wpgmza-grid {

        grid-template-columns: 1fr; 

    }

}



/* Keyframes */

@keyframes wpgmza-google-animation-bounce {

    0% {

        transform: translateY(0px);

    }

    100% {

        transform: translateY(-20px);

    }

}



@keyframes wpgmza-google-animation-drop {

    0% {

        transform: translateY(-200px) scaleY(0.9);

        opacity: 0;

    }

    5% {

        opacity: 0.7;

    }

    50% {

        transform: translateY(0px) scaleY(1);

        opacity: 1;

    }

    65% {

        transform: translateY(-17px) scaleY(0.9);

        opacity: 1;

    }

    75% {

        transform: translateY(-22px) scaleY(0.9);

        opacity: 1;

    }

    100% {

        transform: translateY(0px) scaleY(1);

        opacity: 1;

    }

}