/* MAPROOM CSS FOR INTERACTIVE, ANIMATED MAPS http://maproom.net */
.area_covered {
    position: absolute;
    top: 10px;
    left: 15px;
    max-height: 800px;
    overflow: auto;
    z-index: 9;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 45px 30px;
    max-width: 376px;
}

.area-saving:after {
    content: '';
    background-image: url('/wp-content/themes/nasc/assets/images/loading.gif');
    background-size: contain;
    width: 14px;
    height: 14px;
    display: block;
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -7px;
}

.map-area-loader {
    text-align: center;
    display: block;
}


@-webkit-keyframes fadeOutSuccess {
    0% { opacity: 1; }
    100%   { opacity: 0; }
}
@-moz-keyframes fadeOutSuccess {
    0% { opacity: 1; }
    100%   { opacity: 0; }
}
@-o-keyframes fadeOutSuccess {
    0% { opacity: 1; }
    100%   { opacity: 0; }
}
@keyframes fadeOutSuccess {
    0% { opacity: 1; }
    100%   { opacity: 0; }
}

.area-saved:after {
    content: '';
    background-image: url('/wp-content/themes/nasc/assets/images/check-mark.svg');
    background-size: contain;
    width: 14px;
    height: 14px;
    display: block;
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -7px;

    animation:         fadeOutSuccess 2s 1 1s; /* IE 10+, Fx 29+ */
    -webkit-animation: fadeOutSuccess 2s 1 1s; /* Safari 4+ */
    -moz-animation:    fadeOutSuccess 2s 1 1s; /* Fx 5+ */
    -o-animation:      fadeOutSuccess 2s 1 1s; /* Opera 12+ */
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
    -moz-animation-fill-mode: forwards;    /* FF 5+ */
    -o-animation-fill-mode: forwards;      /* Not implemented yet */
    -ms-animation-fill-mode: forwards;     /* IE 10+ */
}

#location_selector {
    margin-bottom: 16px;
}

.area_covered .form-check {
    display: block;
    background: #ffffffab;
    border: solid 1px #d8d8d8;
    margin-bottom: 4px;
}

.area_covered span {
    vertical-align: middle;
    display: table-cell;
    padding-left: 10px;

}

.area_covered label {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 5px;
    display: table-cell;
    font-size: 14px;
    font-weight: normal;
    position: relative;
    width: 100%;
}

.area_covered span.outcode {
    display: inline-block;
    min-width: 41px;
    font-weight: bold;
    padding-right: 10px;
    color: #013871;
    margin-top: -3px;
}

/* EDIT THE MAP SIZE, BACKGROUND AND FRAME HERE */
#map-container {
    max-width: 100%;
    margin-top: 10px;
    border-radius: 3px;
    background-color: #FFFFFF;
    border: 1px solid d8d8d8;
    box-shadow: none;
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.75);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;

    position: relative;
    padding: 0 0 55px;
    overflow: hidden;
}

@media screen and (min-width: 0px) and (max-width: 599px) {
    #map-container, .area_covered  { display: none; }  /* show it on small screens */
    #map-container-mobile  { display: block; }  /* show it on small screens */
}
@media screen and (min-width: 600px) {
    #map-container-mobile  { display: none; }  /* show it on small screens */
}

object {
    min-height: 800px; /* Change the size of map here */
}


/* SVG MAP LABELS */
text {
    fill: #013871; /* Labels need to be a dark colour to be visible through fill opacity */
    font-family: Helvetica, arial, sans-serif;
    font-size: 12px; /* Default font size for labels */
    font-weight: bold;
    letter-spacing: 1px;
}

#BA-text, #BB-text, #BD-text, #BH-text, #BN-text, #BS-text, #CB-text, #CM-text, #CO-text, #CT-text, #CV-text, #DH-text, #DT-text, #GU-text, #HG-text, #HP-text, #HU-text, #L-text, #LS-text, #ME-text, #MK-text, #NN-text, #OX-text, #PO-text, #PR-text, #RG-text, #RH-text, #SG-text, #SK-text, #SN-text, #SO-text, #SP-text, #ST-text, #TF-text, #TN-text, #TQ-text, #TR-text, #WR-text, #ZE-text {
    font-size: 9px;
}

#CH-text, #CW-text, #IM-text, #LU-text, #-text, #M-text, #ZE {
    font-size: 8px;
}

#AL-text, #DY-text, #HD-text, #HX-text, #OL-text, #SL-text, #SS-text, #WA-text, #WF-text {
    font-size: 7px;
}

#BL-text, #WS-text, #WV-text {
    font-size: 6px;
}

#DA-text, #RM-text, #WD-text, #WN-text {
    font-size: 5px;
}

#BR-text, #CR-text, #EN-text, #FY-text, #HA-text, #IG-text, #KT-text, #TW-text, #UB-text {
    font-size: 4px;
}

#E-text, #N-text, #NW-text, #SE-text, #SM-text, #SR-text, #SW-text, #W-text {
    font-size: 3px;
}


/* SVG DEFAULT PATH STYLE */
g#Postcode_areas path {
    fill: #e5ebf1; /* Default map colour */
    fill-opacity: 0.5;
    stroke: #ffffff;
    stroke-width: 1;
    stroke-linecap: "round";
    stroke-linejoin: "round";
    stroke-miterlimit: "1";
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}

g#Postcode_areas path:hover {
    fill: #F16919; /* Default hover colour */
    fill-opacity: 0.8;
    cursor: pointer;
}

#Postcode_areas path.selected {
    fill: #02A207;
    fill-opacity: 0.8;
}

/* CHROME PATH STROKE-WIDTH
Chrome can't handle fine stroke-widths. Javascript detects if browser is Chrome to load style */
.MR-chrome path {
    stroke-width: 1.5;
}

path.svg-pan-zoom-control-element {
    fill: #0250a2 !important;
    fill-opacity: 0.8;
    stroke-width: 0;

}
path.svg-pan-zoom-control-element:hover {
    fill-opacity: 0.5;
}

/* NOTE: THE COLOUR AND STYLE OF INDIVIDUAL POSTCODES CAN BE CUSTOMISED BY TARGETING THE PATH ID, FOR EXAMPLE path#ST, path#CA, path#AB */


/* SHETLAND BOX STYLE */
rect#Shetland_box {
    fill: none;
    stroke: #CACACA;
    stroke-width: 1.5;
}

/* REPUBLIC OF IRELAND STYLE */
path#Republic_of_Ireland {
    fill: #ddd;
    fill-opacity: 1.0;
    stroke: none;
}

path#Republic_of_Ireland {
    cursor: default;
}

/* Zoom Controls */

path.svg-pan-zoom-control {
    top: 10px;
}


path.svg-pan-zoom-control-element {
    fill: #000;
}

/* TOOLTIP STYLE */

/* Tooltip heading */
.MR-tooltip h3 {
    margin: 0 0 5px;
    padding: 0 0 5px;
    border-bottom: 1px solid #ccc;
    color: #FA6101;
    font-size: 16px;
}

/* Tooltip content */
.MR-tooltip, .MR-tooltip p {
    color: #222;
    font-size: 14px;
    line-height: 1.4;
}

/* Tooltip box */
.MR-tooltip {
    background-color: #fff;
    padding: 15px;
    max-width: 200px;
    margin: 5px 0;
    border: 1px #ccc solid;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 1px 1px 0px rgba(50, 50, 50, 0.5);
    -moz-box-shadow: 0px 1px 1px 0px rgba(50, 50, 50, 0.5);
    box-shadow: 0px 1px 1px 0px rgba(50, 50, 50, 0.5);
}

/* Tooltip left arrow */
.MR-right-tooltip:after {
    content: url(tooltip-left.png);
    width: 20px;
    height: 20px;
    position: absolute;
    top: 20%;
    left: -11px;
    pointer-events: none;
}

/* Tooltip right arrow */
.MR-left-tooltip:after {
    content: url(tooltip-right.png);
    width: 20px;
    height: 20px;
    position: absolute;
    top: 20%;
    right: -11px;
    pointer-events: none;
}

/* FUNCTIONALITY */

.MR-tooltip-container {
    position: absolute;
    z-index: 10000000
}

.MR-tooltip {
    display: none;
}

.MR-tooltip-mobile-show {
    display: block;
}

.MR-arrow-hide .MR-left-tooltip:after, .MR-arrow-hide .MR-right-tooltip:after {
    display: none;
}

.mobile .MR-left-tooltip:after,
.mobile .MR-right-tooltip:after {
    content: "";
}

.mobile .MR-tooltip {
    margin: 30px 20px;
}


/* COPYRIGHT NOTICE MAY BE RESTYLED OR MOVED, BUT NOT HIDDEN OR DELETED */
.copyright {
    position: absolute;
    bottom: 15px;
    width: 100%;
    text-align: center;
    font-size: 9px;
}

.copyright a {
    color: inherit;
    text-decoration: underline;
}


/* BROWSER AND DEVICE SUPPORT */

object {
    width: 100%; /* for IE9 sizing */
}