@font-face
{
    font-family: "watchful-glyphs";
    src: url("/assets/images/icons/Typeface.ttf") format('truetype');
}


@font-face
{
    font-family: "safety-kpi";
    src: url("/assets/images/icons/safety-kpi.ttf") format('truetype');
}



.watchful-glyphs
{
    font-family: watchful-glyphs;
    top: 1px;
    height: 30px;
    position: relative;
    display: inline-block;
    font-style: normal;
    font-weight: normal;
    line-height: -1;
    -webkit-font-smoothing: antialiased;
}
.watchful-glyphs-vessel:before
{
    content: '\0021';
}
.watchful-glyphs-map-vessel:before
{
    position: relative;
    bottom: 11px;
    right: 4px;
    height: auto;
    width: auto;
    font-size: 2rem;
    content: '\0022';
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}

.watchful-glyphs-map-fishing-gear:before
{
    position: relative;
    bottom: 8px;
    right: 9px;
    height: auto;
    width: auto;
    font-size: 2rem;
    content: '\0023';
}


.watchful-glyphs-map-dolphin:before
{
    color: darkcyan;
    position: relative;
    bottom: 20px;
    right: 19px;
    height: auto;
    width: auto;
    font-size: 3.5rem;
    content: '\0024';
}


.watchful-glyphs-map-seagull:before
{
    position: relative;
    bottom: 11px;
    right: 4px;
    height: auto;
    width: auto;
    font-size: 2rem;
    content: '\0025';
}


.watchful-glyphs-map-whale:before
{
    position: relative;
    bottom: 27px;
    right: 20px;
    height: auto;
    width: auto;
    font-size: 4rem;
    content: '\0026';
}


.watchful-glyphs-map-seal:before
{
    position: relative;
    bottom: 23px;
    right: 23px;
    height: auto;
    width: auto;
    font-size: 4rem;
    content: '\0027';
}


.watchful-glyphs-map-turtle:before
{
    color: darkgreen;
    position: relative;
    bottom: 15px;
    right: 11px;
    height: auto;
    width: auto;
    font-size: 2.2rem;
    content: '\0028';
}

.watchful-glyphs-map-structure:before
{
    color: black;
    position: relative;
    bottom: 14px;
    right: 10px;
    height: auto;
    width: auto;
    font-size: 1.8rem;
    content: '\0029';
/*    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;*/
}


.playback-normal:before
{
    bottom: 15px;
    right: 10px;

}

.playback-small:before
{
    bottom: 5px;
    right: 10px;

}

.marker-big:before
{
    bottom: 3px;
    right: -1px;
    font-size: 3rem;
}

.marker-small:before
{
    bottom: 3px;
    right: -1px;
    font-size: 1rem;
    text-shadow: -0px 0 black, 0 0px black, 0px 0 black, 0 -0px black;
}

.watchful-glyphs-project-vessel:before
{
    color: green;
}
.watchful-glyphs-fishing-vessel:before
{
    color: orange;
}
.watchful-glyphs-arpa-target:before
{
    color: purple;
}
.watchful-glyphs-logged-target:before
{
    color: white;
    opacity: 100%;
}

.watchful-glyphs-other-vessel:before
{
    color: darkgray;
}



.safety-kpi
{
    font-family: "safety-kpi";
    top: 1px;
    height: 100%;
    position: relative;
    display: inline-block;
    font-style: normal;
    font-weight: normal;
    line-height: -1;
    -webkit-font-smoothing: antialiased;
}
.safety-kpi-1:before
{
    content: '\0041';
}
.safety-kpi-2:before
{
    content: '\0042';
}
.safety-kpi-3:before
{
    content: '\0043';
}
.safety-kpi-4:before
{
    content: '\0044';
}
.safety-kpi-5:before
{
    content: '\0045';
}
.safety-kpi-6:before
{
    content: '\0046';
}
.safety-kpi-7:before
{
    content: '\0047';
}
.safety-kpi-8:before
{
    content: '\0048';
}