body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

h1, h2, md-card, md-menu-bar {
    cursor: default;
}

a {
    color: #3F51B5;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

#map_canvas {
    background: rgb(229, 227, 223);
}

md-menu-bar button {
    font-size: 15px !important;
}

/* Manually opened repeat menus */
.md-button.repeatmenu[disabled] {
    cursor: default;
}

.md-button.repeatmenu[disabled] svg {
    fill: rgba(0, 0, 0, 0.28);
}

.md-button.repeatmenu svg {
    pointer-events: none;
    fill: rgba(0, 0, 0, 0.54);
    display: block;
}

#map_ovrlay {
    height: 0;
    z-index: 12;
    font-size: 80%;
}

#map_ovrlay > md-card {
    position: absolute;
    margin: 0;
}

#map_ovrlay > md-card:not(#dyk) {
    cursor: pointer;
    outline: none;
    left: 50%;
    transform: translateX(-50%);
}

#dyk {
    top: 10px;
    left: 8px;
    transform: none;
    z-index: 3; /* Used to be 3 until may 30 2017 | Used to be 50 between may 30 and jun 5th 2017 */
}

#dyk md-card-content > div {
    text-align: right;
    margin-top: -4px;
}

/* Google maps bug */
.gm-fullscreen-control {
    display: none;
}

#details {
    position: absolute;
    bottom: 22px;
    left: 8px;
    z-index: 3;
    font-size: 80%;
    line-height: 30px;
}

/* Padding right, to leave space for sun icon in history */
#details b {
    padding-right: 30px;
}

#details md-card {
    margin: 0 0 8px 0;
    box-shadow: rgba(0, 0, 0, 0.298039) 0 1px 4px -1px;
}

#details md-card-content {
    padding: 8px 16px;
}

#details md-icon {
    margin-right: 6px;
    margin-left: -4px;
}

img.contact-avatar {
    height: 32px;
    width: 32px;
    border-radius: 2px;
    margin-right: 8px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}

/* Used in geofence logbook */
.contactchips .md-chip {
    padding: 0 25px 0 0;
}

.contactchips .md-chip img {
    float: left;
    margin-right: 8px;
    height: 32px;
    width: 32px;
    border-radius: 16px;
    -moz-border-radius: 16px;
}

/* 1.0.0 */
md-menu-content.md-menu-bar-menu.md-dense .md-menu > .md-button {
    font-size: 15px;
}

.md-errors-spacer {
    display: none;
}

/* end rc7 */

.tab-top {
    border-bottom: 1px solid rgba(0, 0, 0, 0.117647);
    cursor: default;
    min-height: 73px;
    height: 70px; /* Hack for IE11 */
    padding: 0 16px;
}

/* Used in relations menu from tab-top */
.tab-top .md-menu {
    padding: 0 0;
}

.shadow_left {
    box-sizing: border-box;
    border-left: 1px solid #1b1b1b;
    -webkit-box-shadow: -1px 0 8px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: -1px 0 8px rgba(0, 0, 0, 0.6);
    box-shadow: -1px 0 8px rgba(0, 0, 0, 0.6);
    z-index: 14;
    width: 0;
}

.tab-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    cursor: default;
    font-size: 80%;
}

.track {
    position: relative;
}

/* Delete checkbox for tracks */
.track md-checkbox.md-checked.red .md-icon {
    background-color: #ff0000;
}

.track md-checkbox {
    margin: 0;
}

.track md-checkbox .md-label {
    margin-left: 0;
}

/* End delete checkbox for tracks */

.track, .relation {
    border-bottom: 1px solid rgba(0, 0, 0, 0.117647);
    transition: 0.3s;
}

.track:hover, .relation:hover {
    background-color: #eaeaea;
}

/* Removed jul 7 2018 */
/*.track:last-of-type, .relation:last-of-type {
    border-bottom: none;
}*/

/* Icons in right sidenav tab labels */
/*.md-sidenav-right md-tab-item md-icon {
    width: 16px;
    height: 16px;
}*/
/*.md-tab {
    padding: 12px 18px;
}*/

.track .icon, .relation .icon {
    width: 16px;
    height: 16px;
    pointer-events: none;
    display: inline-block;
    margin-bottom: -4px;
    fill: rgba(0, 0, 0, 0.54);
}

.lb {
    background-size: 100%;
    width: 32px;
    height: 32px;
    margin: 6px 8px 6px 10px;
    float: left;
    -moz-border-radius: 2px;
    border-radius: 2px;
    outline: none;
}

.track .lb {
    margin: 12px 8px 12px 10px;
}

.relation .lb.active, .active .lb {
    cursor: pointer;
}

.lb > div {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACYUlEQVRYhe2WW3KkMAxFL4ROOrO37H8neWAa5iO64aCWuyc1M39RlcoFGOtIlmUN27a9SDpLepL0GONJ0iTpQdIoaZC0SVolXSQtkpqkD0lzjO+hbzG+YnwLnZVkCoPUcwCcAuAB8y+hLf4dQpUA14BcYh3PLwEe4fk51O+mIgJLLEQwGneE7MQS6ziilwxwSsa9HYyCAey9t4YANkyDNuqxC2BlJBgFA2TvmRMMNQ1aRxXbQFIDeGQkxjDW4DnDnQ0TYAx1JO3MF8CIyQRxJJ4A8AHPHe5syDnDMb87APhnjsyN53he4Hnr/NczLnjvUyOlj3mSf54k/UK0xmIxLnplpHi+AtgwWlftoX6N0e84j/8rvVfx/SCT9sLBkZXOoM6BFt+r/wzHcS2cOwDkAtL0eVSY7TwFLr8EsXFGKEPw3QHA2WzDLL82muvAjPkNaxioArv0ItC0n2NWOC9UVcIcCWsGoTqfDjJhMWYqc6F3F8zab0DnRg+EQFcA3m8C0PvebdhgfE66qAYqAei998gLfKcfuAVigCsxgI3bgBsSVzhGwNtg7whACCaptQR473jHymdhceLJYVeUYWy8LEYGyLUgt2PeggqUIa8i4QQthQD2jFd0vsFcSJakFQAhujLps1lk/5bvcp6OqvXiXuek9PbeBWBXQwBHwOIIZABGgTVi1R1hBNxAVg0GAVhaWRNyhbzpeQWQ26rcTHhBAjAPbh63ngzbtg3aQ587pNxc+CTkq9sAf+R1BuAze0OeAALwJJT1/W8ADt/Uj8C3Pe3JdOPbPzXUk/H+lB+A/yu/Afysqmqou+uvAAAAAElFTkSuQmCC);
    width: 32px;
    height: 32px;
    opacity: .6;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
    -ms-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
}

.relation .lb.active:hover > div, .track .lb:hover > div {
    opacity: .9;
    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    -ms-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
}

/* Received chat message */
span.received {
    text-decoration: underline;
}

.md-button.info {
    color: rgba(0, 0, 0, 0.870588) !important;
}

.md-button.info md-icon {
    color: rgba(0, 0, 0, 0.54);
}

#hb {
    box-sizing: border-box;
    background-color: rgb(63, 81, 181);
    border-bottom: 1px solid #1b1b1b;
    -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
    z-index: 4;
}

#hb, #hb label, #hb input, #hb md-select, #hb .md-select-value, #hb md-input-container > md-icon {
    color: rgba(255, 255, 255, 0.87) !important; /* rgba(255, 255, 255, 0.67) !important; */
}

#hb md-select:focus .md-select-value, #hb input:focus, #hb md-input-container.md-input-focused > md-icon {
    color: #fff !important; /* rgba(255, 255, 255, 0.87) !important; */
}

/* Slider on blue background */

#hb .rz-bubble {
    font-size: 12.3px;
    color: rgba(255, 255, 255, 0.87) !important;
    cursor: default;
}

#hb .rzslider .rz-bubble.rz-limit {
    color: rgba(255, 255, 255, 0.52) !important;
}

#hb .rzslider {
    margin: 28px 0 15px 0 !important;
}

#hb .rzslider .rz-bar {
    background: rgba(255, 255, 255, 0.47);
}

#hb .rzslider .rz-bar.rz-selection {
    background: rgba(255, 255, 255, 0.82);
}

#hb .rzslider .rz-pointer {
    background: #fff;
    outline: none;
}

#hb .rzslider .rz-pointer:after, #hb .rzslider .rz-pointer:hover:after {
    background-color: #3F51B5;
}

#hb .rzslider .rz-pointer.rz-active:after {
    background-color: #FF4081;
}

/* End slider on blue background */

#hb md-input-container {
    width: 100px;
    margin: 14px 0 0 0;
}

#hb md-input-container .md-input, #hb .md-select-value {
    border-width: 0;
}

#hb mb-datepicker:first-of-type {
    margin-right: 4px;
}

#hb mb-datepicker:last-of-type {
    margin-left: 4px;
}

.md-sidenav-right {
    width: 100%; /* Was 375px, changed to 100% to fit mobile screens (16 jun 2018) */
    max-width: 375px;
}

.md-sidenav-right md-tabs {
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}

/* Next and previous buttons for md-tabs when pagination is active */
.md-sidenav-right md-tabs md-tabs-wrapper md-prev-button md-icon, .md-sidenav-right md-tabs md-tabs-wrapper md-next-button md-icon {
    color: rgba(255, 255, 255, 0.67);
}

.md-sidenav-right md-tabs md-tabs-wrapper {
    background-color: rgb(63, 81, 181);
    -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.md-sidenav-right md-tabs .md-tab md-icon {
    margin-top: -6px;
}

.md-sidenav-right md-tabs .md-tab md-icon, .md-sidenav-right md-tabs .md-tab {
    color: rgba(255, 255, 255, 0.67);
}

.md-sidenav-right md-tabs .md-tab:hover md-icon, .md-sidenav-right md-tabs .md-tab:hover {
    color: rgba(255, 255, 255, 0.87);
}

.md-sidenav-right md-tabs .md-tab.md-active md-icon, .md-sidenav-right md-tabs .md-tab.md-active {
    color: #fff;
}

.md-sidenav-right md-tabs md-tabs-wrapper md-tabs-canvas md-pagination-wrapper md-ink-bar {
    color: #fff; /* this changes the colour of the ripple */
    background-color: #fff; /* this changes the colour of the ink bar */
}

/* Make md-sidenav-right content box 100% of height */
.md-sidenav-right md-tabs-content-wrapper md-tab-content > div {
    flex-direction: column;
    display: flex;
    height: 100%;
}

/* Folded corner for geotag images in tab */
div > .folded-corner {
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0;
    border-style: solid;
    background: hsla(260, 5%, 60%, 0.2);
    -webkit-box-shadow: 2px -2px 0 #fff, 0 1px 1px rgba(0, 0, 0, 0.1), -1px 1px 1px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 2px -2px 0 #fff, 0 1px 1px rgba(0, 0, 0, 0.1), -1px 1px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 2px -2px 0 #fff, 0 1px 1px rgba(0, 0, 0, 0.1), -1px 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius: 0 0 0 15px;
    border-radius: 0 0 0 15px;
    border-color: #fff #fff transparent transparent;
    -webkit-transition: border-width 0.2s ease-out;
    -moz-transition: border-width 0.2s ease-out;
    -ms-transition: border-width 0.2s ease-out;
    -o-transition: border-width 0.2s ease-out;
    transition: border-width 0.2s ease-out;
}

div:hover > .folded-corner {
    border-width: 0 40px 40px 0;
}

div > .folded-corner {
    background: hsla(260, 5%, 75%, 0.5);
}

/* Sun classes */
.sunup {
    background: #fff url(//www.locationof.com/images/sunup.png) no-repeat right -20px;
}

.sundn {
    background: #fff url(//www.locationof.com/images/sundn.png) no-repeat right -20px;
}

/* Chart Warning */
#cw {
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    position: relative;
    top: -65px;
    cursor: default;
    padding-left: 12px;
    height: 0;
}

/* Chart */
#ct {
    pointer-events: auto;
    height: 120px;
    width: 100%; /* Was 367px changed for mobile display (jun 16 2018) */
    box-sizing: border-box;
    padding-left: 6px;
    padding-right: 2px;
}

#map_canvas button.md-button.md-raised:hover {
    color: #fff;
}

.tablabel {
    position: absolute;
    font-size: 60%;
    top: 26px;
    left: 0;
    right: 0;
}

md-toolbar.md-menu-toolbar {
    min-height: 74px;
    height: 74px;
}

#topbar {
    min-height: 74px;
}

#topbar h2.md-toolbar-tools {
    padding: 12px 12px 6px !important;
}

#topbar md-menu-bar {
    padding: 0 4px;
}

#topbar h2.md-toolbar-tools > div {
    margin: -3px 0 -3px 8px;
    font-size: 64%;
}

.tracktime {
    display: inline-block;
}

.tracktime:nth-of-type(2) {
    margin-left: 19px;
}

/* Prototyped label (map.js) */
#map_canvas .label {
    position: absolute;
    white-space: nowrap;
    border: 0;
    padding: 2px 4px;
    background-color: #fff;
    opacity: .85;
    filter: alpha(opacity=85);
    -ms-filter: "alpha(opacity=85)";
    -khtml-opacity: .85;
    -moz-opacity: .85;
    border-radius: 2px;
    -moz-border-radius: 2px;
    box-shadow: rgba(0, 0, 0, 0.298039) 0 1px 4px -1px;
    -moz-box-shadow: rgba(0, 0, 0, 0.298039) 0 1px 4px -1px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transform: translateZ(0);
}

#map_canvas .translabel {
    position: absolute;
    white-space: nowrap;
    border: 0;
    /* padding:2px 4px; */
    margin-top: -2px;
    opacity: .75;
    filter: alpha(opacity=75);
    -ms-filter: "alpha(opacity=75)";
    -khtml-opacity: .75;
    -moz-opacity: .75;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transform: translateZ(0);
    color: #fff;
    text-shadow: 0 1px 1px #000, 1px 0 1px #000, -1px -1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, 1px 1px 1px #000;
    text-align: center;
}

#map_canvas .translabel.active {
    color: #FF7D13;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75), 1px 0 1px rgba(0, 0, 0, 0.75), -1px -1px 1px rgba(0, 0, 0, 0.75), -1px 1px 1px rgba(0, 0, 0, 0.75), 1px -1px 1px rgba(0, 0, 0, 0.75), 1px 1px 1px rgba(0, 0, 0, 0.75);
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "alpha(opacity=100)";
    -khtml-opacity: 1;
    -moz-opacity: 1;
}

#map_canvas .translabel > div {
    color: #fff !important;
}

.ibbl, .ibbl div, .ibbl span {
    font-family: Arial;
    font-size: 12px;
    font-weight: normal
}

.ibbl ol, .ibbl ul {
    margin: 0.5em 0.2em;
}

.ibbl ol li, .ibbl ul li {
    margin-bottom: 0.4em;
    text-align: justify;
}

.ibbl ol li:last-of-type, .ibbl ul li:last-of-type {
    margin-bottom: 0;
}

.ibbl .cl {
    position: absolute;
    width: 13px;
    height: 13px;
    cursor: pointer;
    opacity: 0.7;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANAQMAAABIJXY/AAAABlBMVEV/f3////8Xc+cdAAAAJUlEQVQIHWP8/5MRiM6fZDweyPgojPFDB+MPBhAJZANFgOJgBQCBUxOmN75DjQAAAABJRU5ErkJggg%3D%3D);
    z-index: +1;
}

.ibbl .cl:hover {
    opacity: 1;
}

/* Flag navigation in infobubble */
#flagnav {
    position: relative;
    height: 12px;
    display: block;
    font-size: 11px;
    color: #888;
    width: 150px;
    margin: 5px auto 0
}

#flagnav div {
    cursor: pointer
}

#flagnav div:hover {
    color: #2370e2
}

/* Gap navigation in infobubble */
#gapnav {
    position: relative;
    height: 12px;
    display: block;
    font-size: 11px;
    color: #888;
    width: 150px;
    margin: 5px auto 0
}

#gapnav div {
    cursor: pointer
}

#gapnav div:hover {
    color: #2370e2
}

/* Flag images in infobubble */
.fgb {
    width: 282px;
    height: 182px;
    line-height: 182px;
    margin: 10px -1px 0;
    cursor: pointer;
    text-align: center
}

.fgb img.fgi {
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: rgba(0, 0, 0, 0.298039) 0 1px 4px -1px;
    -moz-box-shadow: rgba(0, 0, 0, 0.298039) 0 1px 4px -1px;
    transition: box-shadow 450ms, border 450ms;
    -moz-transition: box-shadow 450ms, border 450ms;
}

.fgb img.fgi:hover {
    border: 1px solid rgb(63, 81, 181);
    box-shadow: rgb(63, 81, 181) 0 1px 4px -1px;
    -moz-box-shadow: rgb(63, 81, 181) 0 1px 4px -1px
}

/* Modal for images */
#imov {
    transition: opacity 450ms;
    -moz-transition: opacity 450ms;
    -webkit-transition: opacity 450ms;
    background-color: rgba(33, 33, 33, 1.0);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}

#imov.d {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=48);
    opacity: .48;
}

#imovd {
    transition: opacity 450ms;
    -moz-transition: opacity 450ms;
    -webkit-transition: opacity 450ms;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    z-index: 101;
    color: #fff;
    text-align: center;
    text-shadow: 1px 1px 1px #000, -1px -1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000;
    overflow: auto;
}

#imovd.d {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}

#imov, #imovd {
    position: fixed;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default
}

/* Used on registration page, and adddevice and addrelation dialogs */
md-input-container.md-input-invalid > md-icon {
    color: #DD2C00;
}

/* Remove animations for sidenav when opening or closing in is-locked-open mode */
md-sidenav.md-closed.md-locked-open-add-active, md-sidenav.md-locked-open-remove-active {
    -webkit-transition: none !important;
    transition: none !important;
}

/* Element 'A' in md-menu-bar */
md-menu-bar > div.a {

    box-sizing: border-box;
    display: inline-block;
    font-family: Roboto, 'Helvetica Neue', sans-serif;
    height: 40px;
    margin: 0;
    padding: 0;
    position: relative;
    -webkit-font-smoothing: antialiased;
}

md-menu-bar a {
    align-items: flex-start;
    height: 40px;
    padding: 0 10px;
    font-size: 15px;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    line-height: 40px;
    color: #000;
}

md-menu-bar a:active, md-menu-bar a:hover {
    background-color: rgb(238, 238, 238);
    color: #000;
    text-decoration: none;
}

.spacer {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    box-sizing: border-box;
    min-width: 8px;
}