body {
    font-size: 14px;
    font-family: Tahoma, Geneva, Verdana, sans-serif
}
textarea {
    resize: vertical;
    min-height: 80px;
}
ul {
    padding-left: 14px;
}
dl {
    margin-bottom: 10px;
}
abbr[title] {
    border-bottom: none;
}
input[type=color] {
    cursor: pointer;
    padding: 4px;
    width: 80px;
}
input[type="date"] {
    padding-top: 0;
    padding-bottom: 0;
}
option[disabled] {
    cursor: not-allowed;
}
.fa-sm {
    font-size: 0.63em !important;
}
.fa-ul {
    margin-bottom: 0;
    margin-left: 0 !important;
}
/*.fa-ul > li:not(:last-child) {
    margin-bottom: 8px
}*/
.dropdown-menu .scrollable-area {
    height: auto;
    max-height: 50vh;
    overflow-x: hidden;
}

a.input-group-addon:hover {
    color: #555;
}
.dropdown-header {
    font-variant: small-caps;
}
.dropdown-group .dropdown-header {
    color: #275e8d;
    font-weight: bold;
    padding-left: 1rem;
}
.dropdown-item {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}
a.dropdown-item:hover {
    text-decoration: none;
    background-color: #eee;
    color: inherit;
}
.user-select-text {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
.status-icon {
    display: inline-block;
    height: 30px;
    width: 30px;
    line-height: 26px;
    border-radius: 4px;
    border: solid 1px #ccc;
    color: white;
    font-weight: bold;
}
.orca-table th {
    font-weight: bold;
    font-size:small
}
.orca-table td, .orca-table th {
    padding: 4px 6px;
    text-align: center;
    vertical-align: top;
}
.orca-table.for-sites th, .orca-table.for-dictionary td, .orca-table.for-sites td, .orca-table.for-species td, .orca-table.for-species th {
    text-align: left;
}
.td-line-height-30 td {
    line-height: 30px;
}
.td-vertical-middle td {
    vertical-align: middle;
}
.td-centred {
    text-align: center !important;
}
.orca-table thead tr th {
    background-color: #777777;
    color: white;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.orca-table thead tr th:first-child {
    border-radius: 3px 0 0 3px;
}
.orca-table thead tr th:not(:first-child) {
    border-left: 1px solid #999;
    padding-left: 8px;
}
.orca-table thead tr th:last-child {
    border-radius: 0 3px 3px 0;
}
.orca-table.for-species tr td.notes-cell {
    position: relative;
    text-align: left;
}
.orca-table.for-import tr th.error-header {
    max-width: 40%
}
th.header-10 {
    min-width: 10%;
}
th.header-15 {
    min-width: 15%;
}
th.header-20 {
    min-width: 20%;
}
th.header-25 {
    min-width: 25%;
}
th.header-30 {
    min-width: 30%;
}
th.header-35 {
    min-width: 35%;
}
th.header-40 {
    min-width: 40%;
}
.orca-table.for-species td, .orca-table.for-sites td, .orca-table.for-dictionary td, .orca-table th {
    vertical-align: middle;
}
.orca-table.for-species tr td:first-child {
    padding: 4px 2px;
    width: 118px;
    min-width: 118px;
    border-radius: 3px 0 0 3px;
}
.orca-table.for-species tr td.with-edit-button {
    width: 150px;
    min-width: 150px;
}
.orca-table.for-sites tr td:first-child {
    padding: 4px 2px;
    width: 108px;
    min-width: 108px;
    border-radius: 3px 0 0 3px;
}
.orca-table.for-import tr td:first-child {
    padding: 4px 2px;
    width: 80px;
    min-width: 80px;
    border-radius: 3px 0 0 3px;
}
.orca-table tr td:first-child {
    padding: 4px 2px;
    border-radius: 3px 0 0 3px;
}
.orca-table tr td:last-child {
    border-radius: 0 3px 3px 0;
}
.orca-table tr:nth-child(2n) td {
    background-color: #eee;
}
.orca-table tr.editing td {
    vertical-align: top;
}

.orca-rounded-table { 
    width: 100%; 
    border-collapse: separate;
    border-spacing: 0 2px;
}
.orca-rounded-table tr td:first-child {
    padding: 4px 8px;
    border-left: 1px solid #ccc;
    border-radius: 4px 0 0 4px;
}
.orca-rounded-table tr td:last-child {
    border-right: 1px solid #ccc;
    border-radius: 0 4px 4px 0;
}
.orca-rounded-table td {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    vertical-align: middle;
}
.orca-table.for-species tr.duplicate-row td {
    background-color: #b8a5e0;
    border-radius: 0;
}

.row-hover tbody tr:hover td, .row-hover tbody tr:focus td {
    background-color: #E0A355;
    color: white;
    cursor: pointer;
}

.table {
    margin-bottom: 0;
}

tr.pseudo-edit-row {
    cursor: pointer;
}
    tr.pseudo-edit-row:hover td:not(.pseudo-delete-button), tr.pseudo-edit-row:focus td:not(.pseudo-delete-button) {
        border-color: #adadad;
        background-color: #e6e6e6;
    }
.pseudo-delete-button {
    background-color: #D9534F;
    border-color: #d43f3a;
    color: white;
    width: 34px;
    text-align: center;
    cursor: pointer;
}
    .pseudo-delete-button:hover, .pseudo-delete-button:focus {
        background-color: #c9302c;
        border-color: #ac2925;
    }

.details-view {
    border-collapse: separate !important;
    border-spacing: 0 4px;
}
.details-view td {
    text-align: left;
    vertical-align: top;
    margin-bottom: 2px;
}
.details-view td:not(:first-child) {
    padding: 0 0 0 4px;
}
.details-view tbody tr td:first-child {
    background-color: #EEEDDD;
    border:1px solid #CCCCCC;
    line-height: 32px;
    padding: 0 12px
}
.details-view td input[type=checkbox] {
    margin: 10px 2px;
}

.details-view tbody tr td:first-child {
    border-radius: 4px;
}
.list-group.slim-padding li {
    padding: 5px 15px;
}
ul.designation-list, ul.site-group, ul.habitat-group {
    list-style: none;
    width: 100%;
    min-height: 32px;
    margin: 0;
}
    ul.designation-list li, ul.site-group li, ul.habitat-group li {
        cursor: move;
        float: left;
        display: block;
        margin: 2px;
        color: white;
        background-color: #3B6F31;
        padding: 4px 12px;
        border-radius: 4px;
    }

dl.definition-list {
    display: table;
    width: 100%;
    margin-bottom: 0;
}

    dl.definition-list dt {
        position: relative;
        display: table-cell;
        padding: 6px 10px;
        background-color: #eee;
        border: 1px solid #ddd;
        border-right: none;
        border-bottom: none;
        width: 1px;
        white-space: nowrap;
        font-weight: normal;
        color: #555555;
    }

    dl.definition-list dd {
        position: relative;
        display: table-cell;
        padding: 6px 10px;
        background-color: #fff;
        border: 1px solid #ddd;
        border-bottom: none;
        font-weight: normal;
        color: #777;
        /*white-space: pre;*/
    }

.definition-list-item {
    display: table-row;
    margin-bottom: -1px;
}

    .definition-list-item:first-child dt {
        border-top-left-radius: 4px;
    }

    .definition-list-item:last-child dt {
        margin-bottom: 0;
        border-bottom-left-radius: 4px;
        border-bottom: 1px solid #ddd;
    }

    .definition-list-item:first-child dd {
        border-top-right-radius: 4px;
    }

    .definition-list-item:last-child dd {
        margin-bottom: 0;
        border-bottom-right-radius: 4px;
        border-bottom: 1px solid #ddd;
    }

input[type=email]:not(.form-control), input[type=text]:not(.form-control), input[type=tel]:not(.form-control), input[type=password]:not(.form-control), select:not(.form-control) {
    border-radius: 3px;
    border: 1px solid #888;
    padding: 2px 6px;
}
.bg-primary {
    background-color: #2e6da4;
    color: white;
}
.bg-success {
    background-color: #4cae4c;
    color: white;
}
.bg-danger {
    background-color: #d43f3a;
    color: white;
}
.bg-warning {
    background-color: #eea236;
    color: white;
}
.bg-info {
    background-color: #46b8da;
    color: white;
}
.bg-input {
    background-color: #EEEDDD;
    color: black;
}
.bg-neutral {
    background-color: lightgray;
    color: black;
    border-color: grey;
}
.bg-yellow {
    background-color: lightyellow;
    color: white;
}

.btn-outline {
    background-color: white
}
.btn-outline:hover, .btn-outline:active, .btn-outline:focus { color: white !important }
    .btn-outline.btn-primary { color: #2e6da4 }
    .btn-outline.btn-success { color: #4cae4c }
    .btn-outline.btn-danger { color: #d43f3a }
    .btn-outline.btn-warning { color: #eea236 }
    .btn-outline.btn-info { color: #46b8da }

.btn-neutral {
    background-color: lightgray;
    border-color: grey;
    box-shadow: none;
    z-index: 0;
}
.form-label {
    border: solid 1px #CCCCCC;
    background-color: #EEEDDD;
    border-radius: 4px;
    font-weight: normal;
    padding: 1px 4px;
    overflow-wrap: break-word;
    margin-bottom: 5px;
}
.record-count-label {
    position: absolute;
    top: 41px;
    left: 5px;
    border-radius: .25em .25em 0 0;
    background-color: #9d9d9d;
    font-size: 10px;
}
.item-id {
    font-size: 11px;
    color: #888;
}
input[readonly].subtle-readonly {
    background-color: initial;
    box-shadow: none;
}
.lookup-results {
    position: absolute;
    z-index: 100000;
    overflow: auto;
    max-height: 200px;
    left: 0;
    top: 34px;
    border: solid 1px rgb(203, 199, 130);
    border-radius: 4px;
    background-color: rgb(246, 242, 163);
    background-color: rgba(246, 242, 163, 0.9);
    width: 100%;
    padding: 2px;
}
    .lookup-results.auto-width {
        width: auto;
        min-width: 100%;
        max-width: 800px;
    }
    .lookup-results > ul {
        width: auto;
        margin: 0 1px;
        list-style: none;
        padding: 0;
    }
        .lookup-results > ul > li {
            padding: 1px 0;
            border-bottom: solid 1px #c1c1c1;
        }

            .lookup-results > ul > li:last-child {
                border-bottom: none;
            }

    .lookup-results ul > li > a {
        display: block;
        width: auto;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        text-decoration: none;
        color: #555;
        padding: 2px 6px;
        cursor: pointer;
    }
    .lookup-results > ul > li > a:hover, .lookup-results > ul > li > a:focus {
        color: white;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: 4px;
    }

.flex-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.flex-list-item {
    display: flex;
}
.flex-list-item > div {
    width: 100%
}

.overflow-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.panel-heading.collapsed {
    border-radius: 3px !important;
}
a.panel-heading, a.panel-heading-sm {
    display:block;
    text-decoration: none;
}
.panel.with-tabs-above {
    border-top-width: 0;
    border-radius: 0 0 4px 4px;
}
.panel-body {
    padding: 10px 15px;
}
.panel-orange {
    border-color: #E7641C;
}
.panel-orange > .panel-heading {
    color: #fff;
    background-color: #E7641C;
    border-color: #E7641C;
}
.panel-green {
    border-color: #3B6F31;
}
.panel-green > .panel-heading {
    color: #fff;
    background-color: #3B6F31;
    border-color: #3B6F31;
}
.panel-heading.sub-heading {
    padding: 6px 15px;
}
.panel-heading.panel-heading-sm {
    padding: 3px 8px;
    font-size: 12px;
}

.paragraph-text {
    white-space: pre-wrap;
    border: solid 1px rgb(200,200,200);
    border: solid 1px rgba(200,200,200,0.4);
    border-radius: 4px;
    padding: 0 4px 2px 4px;
    min-height: 44px;
    max-height: 80px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 4px;
    display: block;
    background-color: #fcfcfc;
}

.expand-paragraph-text {
    float: right;
    position: relative;
    bottom: 4px;
    right: 4px;
    border-radius: 0 0 4px 4px;
    font-size: 9px;
    border-top: none;
    display: none;
}

.validator-msg.inline {
    max-width: calc(100% - 6px);
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 0 0 4px 4px;
    left: 3px !important;
    bottom: 1px;
}

.validator-msg {
    position: relative;
    display: inline-block;
    border: 1px solid #A94442;
    background-color: #F8EEEE;
    color: #A94442;
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 1px;
    margin-bottom: 3px;
}

/*Drag Corner*/
.drag-corner {
    position: absolute;
    bottom: 2px;
    right: 2px;
    height: 28px;
    width: 28px;
    overflow: hidden;
    cursor: nwse-resize;
}
    .drag-corner > div {
        position: absolute;
        border-style: solid;
        border-width: 0 0 0 2px;
        border-color: #8a8a8a;
        transform: rotate(45deg);
    }
        .drag-corner > div:first-child {
            bottom: -8px;
            right: 10px;
            height: 33px;
        }
        .drag-corner > div:nth-child(2) {
            bottom: -6px;
            right: 5px;
            height: 25px;
        }
        .drag-corner > div:last-child {
            bottom: -5px;
            right: 2px;
            height: 16px;
        }


/*Equal Height Columns*/
.row.equal-height-cols {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

    .row.equal-height-cols > [class*='col-'] {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

/*Timesheet*/
.rounded-table {
    border-collapse: separate;
}
.rounded-table tr { font-size: 12px }

    .rounded-table td {
        border-top: solid 1px #555;
        border-left: solid 1px #555;
        padding: 4px 6px
    }
        .rounded-table td:last-child {
            border-right: solid 1px #555;
        }
.rounded-table tr:first-child > td {
    border-top: solid 1px #555;
}
.rounded-table tr:first-child > td:first-child {
    border-radius: 4px 0 0 0;
}
.rounded-table tr:first-child > td:last-child {
    border-radius: 0 4px 0 0;
}
.rounded-table tr:last-child > td:first-child {
    border-radius: 0 0 0 4px;
}
.rounded-table tr:last-child > td:last-child {
    border-radius: 0 0 4px 0;
}
.rounded-table tr:last-child > td {
    border-bottom: solid 1px #555;
}

.timesheet {
    border-collapse: separate;
}
    .timesheet tr {
        font-size: 12px;
    }
    .timesheet td {
        border-bottom: solid 1px #555;
        border-right: solid 1px #555;
        text-align: center;
        line-height: 14px;
        padding: 2px;
    }
    .timesheet td:first-child {
        background-color: #ddd;
        border-left: solid 1px #555;
    }
    
    .timesheet tr:last-child > td {
        border-bottom: solid 1px #555;
    }
    .timesheet tr:nth-last-child(2) > td:last-child {
        border-bottom: solid 1px #555;
        border-radius: 0 0 4px 0;
    }
    .timesheet tr:last-child > td:first-child {
        border-radius: 0 0 0 4px;
    }

    .timesheet th {
        border-bottom: solid 1px #555;
        border-right: solid 1px #555;
        border-radius: 0;
        background-color: #ddd;
        text-align: center;
        padding: 2px;
    }
    .timesheet tr:first-child > th {
        border-top: 1px solid #555;
    }
    .timesheet tr:first-child > th:first-child {
        border-radius: 4px 0 0 0;
        border-left: solid 1px #555;
    }
    .timesheet tr:first-child > th:last-child {
        border-radius: 0 4px 0 0;
    }
    
    .timesheet input {
        height: 14px;
        font-size: 12px !important;
        width: 100%;
        border: none !important;
        text-align: center !important;
    }

    .timesheet tr.not-working td {
        background-color: #ccc !important;
    }

    .timesheet tr.weekend td {
        background-color: #aaa !important;
    }

    .timesheet.overview {
        table-layout: fixed;
        width: 100%;
    }
        .timesheet.overview tr:last-child > td:last-child { border-radius: 0 0 4px 0; }
        .timesheet.overview tr:nth-last-child(2) > td:last-child { border-radius: 0; }

        .timesheet.overview td {
            height: 120px;
            vertical-align: top;
            text-align: left;
            padding: 0;
        }
            .timesheet.overview td:first-child { background-color: transparent; }
            .timesheet.overview td:last-child, .timesheet.overview td:nth-last-child(2) { background-color: #ddd; }

.overview-date {
    font-size: 10px;
    font-weight: bold;
    margin-bottom: 4px;
    padding: 2px 0 0 2px;
}
    .overview-date span.current-date {
        font-size: 10px;
    }
.holiday-line {
        width: 100%;
        height: 11px;
        margin-bottom: 1px;
        border-width: 1px 0;
        border-style: solid;
        visibility: hidden;
    }
    .holiday-line.visible {
        visibility: visible;
    }

.btn.out-of-office {
    margin: 1px;
    height: 16px;
    width: 28px;
    line-height: 12px;
    padding: 0;
}
/*Calendar*/
.ranges {
    clear: both;
}
.hourselect, .minuteselect { font-size: 12px }

/*Bootstrap Overrides*/
.page-header {
    margin-top: 0;
    margin-bottom: 10px;
    font-size:20px;
}
    .page-header.page-header-minimised {
        text-align: left !important;
        padding: 0;
        font-size: 14px;
        font-weight: bold;
    }
.modal-backdrop { opacity: 0 !important; }
.modal { background-color: rgba(0,0,0,0.4); }
.modal-header:not(.not-draggable) {
    cursor: move;
}
.text-left { text-align: left !important; }
.alert {
    font-size: 14px;
    margin-bottom: 6px;
    padding: 8px 15px;
}
small, .small {
    font-size: 80%;
    opacity: 0.7;
}
.navbar {
    margin-bottom: 10px;
}
.navbar-inverse {
    font-size: 14px;
    background-color: #3B6F31;
    border-color: #255625;
}
.navbar-inverse .navbar-nav > li > a {color:white}
.navbar-inverse .navbar-nav > .active > a { background-color: #449D44;}
.navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > li > a:hover { background-color: #5CB85C }
.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:focus, .navbar-inverse .navbar-nav > .open > a:hover { background-color: #5CB85C; }
.form-group {
    margin-bottom: 0;
}
.badge {
    padding: 3px 6px;
}
.btn-default .badge {
    background-color: #555;
}
.tab-content {
    padding: 20px;
    border: 1px solid #DDDDDD;
    border-top: none;
    border-radius: 0 0 4px 4px;
}
.tooltip-inner {
    background-color: rgb(243, 240, 200);
    color: #353636;
    border: solid 1px #000;
}
.btn-noresponse {
    cursor: default;
    overflow: hidden;
    text-overflow: ellipsis;
}
.btn-default.btn-noresponse:hover, .btn-default.btn-noresponse:active, .btn-default.btn-default:active:hover, .btn-default.btn-noresponse:focus {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    box-shadow: none;
    z-index: 0;
}
.btn-warning.btn-noresponse:hover, .btn-warning.btn-noresponse:active, .btn-warning.btn-default:active:hover, .btn-warning.btn-noresponse:focus {
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
    box-shadow: none;
    z-index: 0;
}
.btn-success.btn-noresponse:hover, .btn-success.btn-noresponse:active, .btn-success.btn-default:active:hover, .btn-success.btn-noresponse:focus {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
    box-shadow: none;
    z-index: 0;
}
.btn-neutral.btn-noresponse:hover, .btn-neutral.btn-noresponse:active, .btn-neutral.btn-default:active:hover, .btn-neutral.btn-noresponse:focus {
    color: grey;
    background-color: lightgray;
    border-color: grey;
    box-shadow: none;
    z-index: 0;
}
.drag-handle {
    text-overflow: clip !important;
    cursor: ns-resize;
}
.cursor-help {
    cursor: help;
}
.page-label-button {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 20px;
    padding-right: 20px;
    color: #449D44;
}
    .page-label-button:hover, .page-label-button:active {
        color: #449D44 !important;
    }

.btn-group-sm .dropdown-menu > li > a, .input-group-sm .dropdown-menu > li > a {
    padding: 0 20px;
    font-size: 13px
}
.btn-group-xs .dropdown-menu > li > a, .input-group-xs .dropdown-menu > li > a {
    padding: 0 10px;
    font-size: 12px
}
.checkbox {
    margin: 0;
    display: inline-block;
}

.open > .dropdown-menu.multi-column-flex {
    display: flex !important;
}

/*Multi-column dropdown menu*/
.dropdown-menu.columns-2 {
    min-width: 500px;
}

.dropdown-menu.columns-3 {
    min-width: 750px;
}

.multi-column-dropdown {
    list-style: none;
}

    .multi-column-dropdown li a {
        display: block;
        clear: both;
        line-height: 1.428571429;
        color: #333;
        white-space: normal;
    }

        .multi-column-dropdown li a:hover, .multi-column-dropdown li a:focus {
            text-decoration: none;
            color: #262626;
            background-color: #f5f5f5;
        }

@media (max-width: 767px) {
    .dropdown-menu.multi-column {
        min-width: 240px !important;
        overflow-x: hidden;
    }
        .dropdown-menu.multi-column div.col-sm-6:first-child {
            padding-right: 30px !important;
        }
        .dropdown-menu.multi-column div.col-sm-6:last-child {
            padding-left: 15px !important;
        }
}

/*Hoverable Nav Bar*/
.navbar-brand > img { display: inline-block; }
.sidebar-nav {
    padding: 9px 0;
}
.navbar-nav > li > .dropdown-menu { z-index: 1001; } /* position main dropdowns above smaller sub-page menus*/

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: -8px;
    display: none;
}

.dropdown-menu li:focus .sub-menu,
.dropdown-menu li:hover .sub-menu {
    display: block;
}

a.dropdown-toggle:focus + .dropdown-menu,  
.dropdown:hover > .dropdown-menu {
    display: block;
}

.dropdown-menu > li ~ a:hover {
    background-color: #f5f5f5;
}
.dropdown-menu > li > span {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    cursor:pointer;
}

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 0;
}
.dropdown-toggle:focus {
    outline-width: 1px;
    outline-offset: -2px;
    outline-color: white;
    outline-style: dotted;
}
.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgb(0, 0, 0);
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    top: 11px;
    left: -6px;
}
legend {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: bold;
    color: #444;
}

/* Site file bulk attach */
.info-leading {
    text-transform: uppercase;
    font-size: 8px;
    color: lightslategray
}
.label-default:not(.label-outline) .info-leading {
    color: mintcream;
}
.info-header {
    text-transform: capitalize;
    font-weight: bold;
    color: black;
}

/*Other*/
.clickable {
    cursor: pointer;
}
.noclick {
    cursor: default;
}
.subtle-sort {
    color: white;
    text-decoration: none;
}
    .subtle-sort:visited, .subtle-sort:active {
        color: inherit;
    }
    .subtle-sort:hover, .subtle-sort:focus {
        color: inherit;
        text-decoration: underline;
    }
    .subtle-sort.sort-asc::before {
        float:right;
        content: '\25bc';
    }
    .subtle-sort.sort-desc::before {
        float:right;
        content: '\25b2';
    }
.subtle-hover {
    opacity: 0.3;
    cursor: pointer;
}
    .subtle-hover:hover, .subtle-hover:focus {
        opacity: 1;
    }
.force-inline {
    display: inline !important;
}
.flex {
    display: flex;
}
.flex-row {
    flex-direction: row;
}
.flex-col {
    flex-direction: column;
}
.items-center {
    align-items: center;
}
.items-end {
    align-items: end;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}
.justify-end {
    justify-content: end;
}
.align-self-end {
    align-self: flex-end;
}
.gap-sm {
    gap: 0.5rem;
}
.ml-auto {
    margin-left: auto;
}
.mr-5 {
    margin-right: 5px;
}
.mt-5 {
    margin-top: 5px;
}
.mt-9 {
    margin-top: 9px;
}
.mt-20 {
    margin-top: 20px;
}
.mb-5 {
    margin-bottom: 5px;
}
.mb-0 {
    margin-bottom: 0px;
}
.pt-10 {
    padding-top: 10px;
}
.row.row-no-margin {
    margin-left: 0;
    margin-right: 0;
}
.row.row-no-psuedo::before,
.row.row-no-psuedo::after {
    display: none;
}
.row.equal-item-spacing p {
    margin-bottom: 0;
}
.row.equal-item-spacing > div {
    margin-bottom: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}

.well:has(+.collapse, +.collapsing) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    transition: 0.1s all ease-in-out;
}
.collapse .well-inner,
.collapsing .well-inner {
    border-radius: 0;
    overflow: hidden;
    padding-bottom: 0;
    transition: 0.1s all ease-in-out;
}
.collapse ~ .well,
.collapsing ~ .well {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    transition: 0.1s all ease-in-out;
}
    .collapse[aria-expanded="true"] .well-inner .row.in-folder + .row.bg-warning {
        padding-top: 10px;
    }
.well {
    transition: 0.3s all ease-in-out;
}

.highlight-field.show {
    box-shadow: 0px 0px 4px 0px rgba(17,0,255,0.5), 0px 0px 6px 0px rgba(17,0,255,0.3);
    border: 1px solid rgba(17,0,255,0.5);
}

.already-attached {
    opacity: 0.5;
    background-color: lightgray;
}
.pointer-events-none {
    pointer-events: none;
}
.font-bold {
    font-weight: bold;
}
.label-group {
    display: flex;
    line-height: 1;
    gap: 0;
}
.label-group .info-leading {
    margin-bottom: 2px;
}
.label-outline {
    background: none;
    color: darkgrey;
    border: 1px solid lightgrey;
}
.label-group .label {
    border-radius: 0;
}
    .label-group .label:first-child {
        border-bottom-left-radius: 0.25em;
        border-top-left-radius: 0.25em;
    }
    .label-group .label:last-child {
        border-bottom-right-radius: 0.25em;
        border-top-right-radius: 0.25em;
    }

.h-max-content {
    height: max-content;
}

@media (max-width: 767px) {
    .pull-left-xs {
        float: left;
    }
    .pull-right-xs {
        float: right;
    }
    .padding-right-2px-xs {
        padding-right: 2px;
    }
    .form-label:not(.keep-height) {
        margin:4px 0 2px 0;
    }
    .form-label.keep-height.editing {
        padding: 6px 4px;
    }
    .panel.with-tabs-above.not-xs {
        border-top-width: 1px;
        border-radius: 4px;
    }
    .dropdown-menu-left-xs {
        left: 0;
        right: auto;
    }
    .dropdown-menu-right-xs {
        right: 0;
        left: auto;
    }
    .flex-xs {
        display: flex;
    }
}

@media (min-width: 768px) {
    .modal-xl {
        width: 90%;
        max-width: 1200px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .pull-left-sm {
        float: left;
    }

    .pull-right-sm {
        float: right;
    }

    .padding-right-2px-sm {
        padding-right: 2px;
    }

    .form-label.editing {
        padding: 6px 4px;
    }
    .panel.with-tabs-above.not-sm {
        border-top-width: 1px;
        border-radius: 4px;
    }
    .flex-sm {
        display: flex;
    }
    .no-padding-right-sm {
        padding-right: 0;
    }
}

@media (min-width: 992px) {
    .col-md-1-5 {
        width: 12.5%;
    }
    .col-md-10-5 {
        width: 87.5%;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .pull-left-md {
        float: left;
    }

    .pull-right-md {
        float: right;
    }

    .padding-right-2px-md {
        padding-right: 2px;
    }

    .form-label.editing {
        padding: 6px 4px;
    }

    .panel.with-tabs-above.not-md {
        border-top-width: 1px;
        border-radius: 4px;
    }

    .flex-md {
        display: flex;
    }

    .no-padding-right-md {
        padding-right: 0;
    }
}

@media (min-width: 1200px) {
    .pull-left-lg {
        float: left;
    }
    .pull-right-lg {
        float: right;
    }
    .padding-right-2px-lg {
        padding-right: 2px;
    }
    .form-label.editing {
        padding: 6px 4px;
    }
    .panel.with-tabs-above.not-lg {
        border-top-width: 1px;
        border-radius: 4px;
    }
    .flex-lg {
        display: flex;
    }
    .no-padding-right-lg {
        padding-right: 0;
    }
}
.btn-group.nowrap {
    white-space: nowrap;
}
.btn-group.nowrap > .btn {
    float: none;
}
.btn-group.nowrap > .btn + .btn {
    margin-left: -5px;
}

/*Bootstrap Checkbox*/
.bs-checkbox {
    display: inline-block;
    padding-left: 20px;
    margin: 0;
}
    .bs-checkbox label {
        display: inline-block;
        position: relative;
        padding-left: 0;
        min-height: 20px;
        margin-bottom: 0;
        vertical-align: middle;
        text-align: center;
    }
        .bs-checkbox label::before {
            content: "";
            display: inline-block;
            position: absolute;
            width: 18px;
            height: 18px;
            left: 0;
            margin-left: -20px;
            border: 1px solid #cccccc;
            border-radius: 3px;
            background-color: #fff;
            -moz-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        }
        .bs-checkbox label::after {
            display: inline-block;
            position: absolute;
            width: 18px;
            height: 18px;
            left: 0;
            top: 0;
            margin-left: -21px;
            padding-top: 1px;
            font-size: 11px;
            color: #555555;
        }
    .bs-checkbox input[type="checkbox"] {
        opacity: 0;
        position: absolute;
    }
    .bs-checkbox input[type="checkbox"]:checked + label::after {
      font-family: 'Glyphicons Halflings';
      content: "\e013"; }
    .bs-checkbox input[type="checkbox"]:disabled + label {
      opacity: 0.65; }
      .bs-checkbox input[type="checkbox"]:disabled + label::before {
        background-color: #eeeeee;
        cursor: not-allowed; }
    .bs-checkbox.checkbox-circle label::before {
        border-radius: 50%;
    }
    .bs-checkbox.checkbox-inline {
        margin-top: 0;
    }

.bs-checkbox-primary input[type="checkbox"]:checked + label::before {
    background-color: #428bca;
    border-color: #3570A3;
}
.bs-checkbox-primary input[type="checkbox"]:checked + label::after { color: #fff; }

.bs-checkbox-danger input[type="checkbox"]:checked + label::before {
    background-color: #d9534f;
    border-color: #B24440;
}
.bs-checkbox-danger input[type="checkbox"]:checked + label::after { color: #fff; }

.bs-checkbox-info input[type="checkbox"]:checked + label::before {
    background-color: #5bc0de;
    border-color: #4B9EB7;
}
.bs-checkbox-info input[type="checkbox"]:checked + label::after { color: #fff; }

.bs-checkbox-warning input[type="checkbox"]:checked + label::before {
    background-color: #f0ad4e;
    border-color: #C99040;
}
.bs-checkbox-warning input[type="checkbox"]:checked + label::after { color: #fff; }

.bs-checkbox-success input[type="checkbox"]:checked + label::before {
    background-color: #5cb85c;
    border-color: #489148;
}
.bs-checkbox-success input[type="checkbox"]:checked + label::after { color: #fff; }

.radio {
  padding-left: 20px; }
  .radio label {
    display: inline-block;
    position: relative;
    padding-left: 5px; }
    .radio label::before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 17px;
        height: 17px;
        left: 0;
        margin-left: -20px;
        margin-top: 2px;
        border: 1px solid #cccccc;
        border-radius: 50%;
        background-color: #fff;
        -moz-transition: border 0.15s ease-in-out;
        -webkit-transition: border 0.15s ease-in-out;
        -o-transition: border 0.15s ease-in-out;
        transition: border 0.15s ease-in-out;
    }
    .radio label::after {
        display: inline-block;
        position: absolute;
        content: " ";
        width: 11px;
        height: 11px;
        left: 3px;
        top: 5px;
        margin-left: -20px;
        border-radius: 50%;
        background-color: #555555;
        -moz-transform: scale(0, 0);
        -webkit-transform: scale(0, 0);
        -ms-transform: scale(0, 0);
        -o-transform: scale(0, 0);
        transform: scale(0, 0);
        -moz-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
        -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
        -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
        transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    }
    .radio input[type="radio"] {
        opacity: 0;
    }
    .radio input[type="radio"]:focus + label::before {
        outline: thin dotted;
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
    }
    .radio input[type="radio"]:checked + label::after {
        -moz-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
        .radio input[type="radio"]:disabled + label {
            opacity: 0.65;
        }
            .radio input[type="radio"]:disabled + label::before {
                cursor: not-allowed;
            }
    .radio.radio-inline {
        margin-top: 0;
    }

.radio-primary input[type="radio"] + label::after {
  background-color: #428bca; }
.radio-primary input[type="radio"]:checked + label::before {
  border-color: #428bca; }
.radio-primary input[type="radio"]:checked + label::after {
  background-color: #428bca; }

.radio-danger input[type="radio"] + label::after {
  background-color: #d9534f; }
.radio-danger input[type="radio"]:checked + label::before {
  border-color: #d9534f; }
.radio-danger input[type="radio"]:checked + label::after {
  background-color: #d9534f; }

.radio-info input[type="radio"] + label::after {
  background-color: #5bc0de; }
.radio-info input[type="radio"]:checked + label::before {
  border-color: #5bc0de; }
.radio-info input[type="radio"]:checked + label::after {
  background-color: #5bc0de; }

.radio-warning input[type="radio"] + label::after {
  background-color: #f0ad4e; }
.radio-warning input[type="radio"]:checked + label::before {
  border-color: #f0ad4e; }
.radio-warning input[type="radio"]:checked + label::after {
  background-color: #f0ad4e; }

.radio-success input[type="radio"] + label::after {
  background-color: #5cb85c; }
.radio-success input[type="radio"]:checked + label::before {
  border-color: #5cb85c; }
.radio-success input[type="radio"]:checked + label::after {
  background-color: #5cb85c; }
/*Mapping*/
.map-wrapper {
    float:left;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#mapCopyright {
    position: absolute;
    bottom: 4px;
    left: 120px;
    font-size: 10px;
    color: rgb(0, 0, 0);
    padding: 0px 5px;
    cursor: default;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 1);
}
.grabbing {
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}
.display-type-toggle {
    position: absolute !important;
    top: 15px;
    right: 24px;
    z-index: 1050;
    border-color: #555;
}
    .display-type-toggle:hover, .display-type-toggle:focus {
        border-color: #555;
    }
    .display-type-toggle .toggle-handle {
        border-color: #555;
    }

#zoomHolder {
    position: absolute;
    top: 59px;
    right: 20px;
    z-index: 11;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap-reverse;
}
    
#derivedGRDiv {
    position: absolute;
    top: 16px;
    padding: 3px 0;
    width: 180px;
    font-size: 19px;
    text-align: center;
    left: calc(50% - 90px);
    line-height: 26px;
}
#derivedGR {
    user-select: all;
    -moz-user-select: all;
    -webkit-user-select: all;
}
#cursorPrompt {
    white-space: nowrap;
    display: none;
    position: absolute;
    background-color: white;
    border: 1px solid #555;
    border-radius: 3px;
    padding: 2px 4px;
    color: #000;
    pointer-events: none;
}

/*Map button popout*/
.map-btn-switcher {
    display: flex;
    flex-direction: row-reverse;
    width: 38px;
    transition: width 1s;
}
    .map-btn-switcher.hover-active:hover, map-btn-switcher.hover-active:focus, map-btn-switcher.taphover {
        width: auto !important;
    }
        .map-btn-switcher.hover-active:hover > .hidden-btn, .map-btn-switcher.hover-active:focus > .hidden-btn, .map-btn-switcher.taphover > .hidden-btn {
            display: block !important;
        }

.map-btn {
    width: 30px;
    height: 30px;
    margin: 4px;
    border: 1px solid #555;
    background-color: #f5eee9;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    text-align: center;
    align-content: center;
}
    .map-btn.highlight {
        background-color: #DAFF1E !important;
    }
    .map-btn:hover {
        background-color: #93ddf3;
        border-color: #333;
    }

    .map-btn.hidden-btn {
        display: none;
    }

/*Map Switching*/
#mapSwitcher {
    position: absolute;
    width: auto;
    height: auto;
    bottom: 30px;
    left: 10px;
    z-index: 1050;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
}
        #mapSwitcher.hover-active:hover > div, #mapSwitcher.hover-active:focus > div, #mapSwitcher.taphover > div {
            display: block;
            margin-top: 10px;
            margin-right: 10px;
        }
            #mapSwitcher.hover-active:hover > div:first-child, #mapSwitcher.hover-active:focus > div:first-child {
                opacity: 0.6;
            }

.mapSwitch {
    width: 50px;
    height: 50px;
    border: 1px solid black;
    border-radius: 4px;
    background-color: #fff;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}
    .mapSwitch.unavailable::after {
        content: '×';
        font-size: 125px;
        font-weight: bold;
        cursor: not-allowed;
        color: #f009;
        position: absolute;
        top: -74px;
        left: -27px;
    }
    .mapSwitch:not(:first-child):not(.unavailable):hover, .mapSwitch:not(:first-child):not(.unavailable):focus {
        box-shadow: 0 0 0 8px rgba(10, 10, 10, 0.75);
    }
    
    .mapSwitch > span {
        display: inline-block;
        text-align: center;
        color: black;
        background-color: rgb(255, 255, 255);
        background-color: rgba(255, 255, 255, 0.75);
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
    }
#mainSwitch {
    background: url("../images/mapping/OSM.png") no-repeat center center;
}
#osSwitch {
    display: none;
    background: url("../images/mapping/OS.png") no-repeat center center;
}
#roadSwitch {
    display: none;
    background: url("../images/mapping/Road.png") no-repeat center center;
}
#aerialSwitch {
    display: none;
    background: url("../images/mapping/Aerial.png") no-repeat center center;
}
#osmSwitch {
    display: none;
    background: url("../images/mapping/OSM.png") no-repeat center center;
}

.key-swatch {
    display: inline-block;
    height: 18px;
    width: 18px;
    background-color: white;
    border: 2px solid black;
    border-radius: 2px;
    vertical-align: text-bottom;
    line-height: 12px;
    text-align: center;
}

.site-group-swatch {
    display: inline-block;
    height: 16px;
    width: 16px;
    border: 2px solid #333;
    border-radius: 4px;
    vertical-align: text-bottom;
}

.habitat-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: text-bottom;
    background: url(../images/habitats.svg) no-repeat center center;
}
    .habitat-icon.inverse {
        vertical-align: bottom;
        background: url(../images/habitats-white.svg) no-repeat center center;
    }

/*Progress Indicator*/
.progress-holder {
    height: 27px;
    margin: 8px 0;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px;
    border: 1px solid #888;
}
.progress-indicator {
    float:left;
    text-align:center;
    height: 100%;
    font-size: 15px;
    line-height: 24px;
    color: #FFF;
}
.progress-indicator ~ .progress-indicator {
    border-left: 1px solid #888;
}
    .progress-indicator.progress-indicator-current {
        background-color: #5BC0DE;
        font-weight: bold;
    }
    .progress-indicator.progress-indicator-pending {
        background-color: #EEEEEE;
        color: #555;
    }
    .progress-indicator.progress-indicator-complete {
        background-color: #5CB85C;
    }
        .progress-indicator.progress-indicator-complete:after {
            font-family: 'FontAwesome';
            content: "\f058";
            padding-left: 4px;
        }

/*Busy Popup*/
#mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9000;
    background-color: rgba(128, 128, 128, 0.7);
    display: none;
}

#busyPopup {
    display: none;
    position: fixed;
    top: 5vw;
    left: calc(50vw - 100px);
    z-index: 9001;
    text-align: center;
    padding: 30px 10px;
    width: 200px;
    height: 200px;
    max-width: 200px;
    max-height: 200px;
    border: 14px solid #178EAE;
    border-radius: 260px;
    background-color: #fff;
    color: #000;
}
    #busyPopup.christmas {
        border-color: #2b7303;
        color: #fff;
        background: repeating-linear-gradient(45deg, #ce4343, #ce4343 12px, #4c9846 10px, #4c9846 24px);
    }

.list-group-sm {
    margin-bottom: 5px;
}
.list-group-sm .list-group-item {
    padding: 4px 8px;
}

/*Collapsible nested lists*/
.list-group.list-group-root {
    padding: 0;
    overflow: hidden;
}

.list-group.list-group-root .list-group {
    margin-bottom: 0;
}

.list-group.list-group-root .list-group-item {
    border-radius: 0;
    border-width: 1px 0 0 0;
}

.list-group.list-group-root > .list-group-item:first-child {
    border-top-width: 0;
}

.list-group.list-group-root > .list-group > .list-group-item {
    padding-left: 30px;
}

.list-group.list-group-root > .list-group > .list-group > .list-group-item {
    padding-left: 45px;
}

.list-group-item .glyphicon {
    margin-right: 5px;
}

.input-group {
    display: inline-table;
    vertical-align: middle;
}

/*Bootstrap Toggle*/

.checkbox label .toggle,.checkbox-inline .toggle{margin-left:-20px;margin-right:5px}
.toggle{position:relative;overflow:hidden}
.toggle input[type=checkbox]{display:none}
.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none}
.toggle.off .toggle-group{left:-100%}
.toggle-on{position:absolute;top:0;bottom:0;left:-4px;right:50%;margin:0;border:0;border-radius:0}
.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0}
.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px}
.toggle.btn{min-width:59px;min-height:34px}
.toggle-on.btn{padding-right:24px}
.toggle-off.btn{padding-left:24px}

.toggle.btn-lg, .input-group-lg .toggle{min-width:79px;min-height:45px}
.toggle-on.btn-lg, .input-group-lg .toggle-on {padding-right:31px;line-height:32px}
.toggle-off.btn-lg, .input-group-lg .toggle-off {padding-left:31px;line-height:32px}
.toggle-handle.btn-lg, .input-group-lg .toggle-handle {width:40px;line-height:32px}

.toggle.btn-sm, .input-group-sm .toggle{min-width:50px;min-height:30px}
.toggle-on.btn-sm, .input-group-sm .toggle-on{padding-right:20px;line-height:16px}
.toggle-off.btn-sm, .input-group-sm .toggle-off{padding-left:20px;line-height:16px}

.toggle.btn-xs {min-width:35px;min-height:22px}
.toggle-on.btn-xs {padding-right:12px}
.toggle-off.btn-xs {padding-left:12px}

.toggle.btn[disabled] .toggle-group > span, .toggle.btn[disabled] .toggle-group > button {
    cursor: not-allowed;
}
/*Toggle within input groups*/
    .input-group div.checkbox {
        text-align: left;
        height: 30px;
        display: table-cell;
        vertical-align: top;
        width: 1px;
    }
    .input-group div.checkbox label .toggle {
        margin-right: 0;
    }
        .input-group div.checkbox:last-child:not(:first-child) div.toggle {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
        .input-group div.checkbox:not(:last-child):not(:first-child) div.toggle {
            border-radius: 0;
            border-radius: 0;
        }
        .input-group div.checkbox:first-child:not(:last-child) div.toggle {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
.input-group-sm div.checkbox div.toggle {
    height: 30px !important;
    min-height: 30px;
}
    .input-group-sm div.checkbox div.toggle label {
        font-size: 12px;
        line-height: 1.5;
    }

/*Collapsible lists*/
ul.tree {
    -moz-user-select: none;
    user-select: none;
    -ms-user-select: none;
}
    
ul.tree, ul.tree ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
    ul.tree ul {
        margin-left: 18px;
    }

    ul.tree li {
        margin: 0;
        padding: 0 7px;
        line-height: 20px;
        border-left: 1px solid rgb(100,100,100);
        cursor: pointer;
    }
        ul.tree li:last-child {
            border-left: none;
        }

        ul.tree li::before {
            position: relative;
            top: -0.35em;
            height: 1.2em;
            width: 20px;
            border-bottom: 1px solid rgb(100,100,100);
            content: "";
            display: inline-block;
            left: -7px;
        }

        ul.tree li:last-child::before {
            border-left: 1px solid rgb(100,100,100);
        }
        ul.tree li:first-child { /*Extend left border higher for first item*/
            margin-top: -5px;
            padding-top: 5px;
        }
        ul.tree li > span {
            margin-left: -7px;
        }
        ul.tree li.branch-open > span::before {
            font-family: 'FontAwesome';
            content: "\f147";
            padding-right: 5px;
        }
        ul.tree li.branch-closed > span::before {
            font-family: 'FontAwesome';
            content: "\f196";
            padding-right: 5px;
        }
        ul.tree li.branch-closed > ul {
            display: none;
        }
        ul.tree li.branch-empty:not(.clickable) {
            cursor: default;
        }
            ul.tree li.branch-empty > span::before {
                content: '';
                padding-right: 6px;
            }
            ul.tree li.branch-empty::before {
                width: 30px;
            }
        ul.tree li:hover > span > span.rank-info, ul.tree li:focus > span > span.rank-info {
            display: inline !important;
        }
    /*hide leading stem*/
    ul.tree > li:first-child {
        margin-top: 0;
        padding-top: 0;
    }
        ul.tree > li:first-child > span {
            margin-left: -8px;
        }
        ul.tree > li:first-child::before {
            left: -8px;
            border-left: 1px solid white;
            width: 21px;
        }

.highlight-entry {
    color: orangered;
}

@keyframes fa-blink {
     0% { opacity: 0.2; }
     25% { opacity: 0.6; }
     50% { opacity: 1; }
     75% { opacity: 0.6; }
     100% { opacity: 0.2; }
 }
.fa-blink {
    -webkit-animation: fa-blink 1.5s linear infinite;
    -moz-animation: fa-blink 1.5s linear infinite;
    -o-animation: fa-blink 1.5s linear infinite;
    animation: fa-blink 1.5s linear infinite;
}
@keyframes fa-ring-bell {
    0% {
        -webkit-transform: rotate(0deg);
        -webkit-transform-origin: top center;
        transform: rotate(0deg);
        transform-origin: top center;
    }
    25% {
        -webkit-transform: rotate(30deg);
        -webkit-transform-origin: top center;
        transform: rotate(30deg);
        transform-origin: top center;
    }
    50% {
        -webkit-transform: rotate(0deg);
        -webkit-transform-origin: top center;
        transform: rotate(0deg);
        transform-origin: top center;
    }
    75% {
        -webkit-transform: rotate(-30deg);
        -webkit-transform-origin: top center;
        transform: rotate(-30deg);
        transform-origin: top center;
    }
    100% {
        -webkit-transform: rotate(0deg);
        -webkit-transform-origin: top center;
        transform: rotate(0deg);
        transform-origin: top center;
    }
}
.fa-ring-bell {
    animation: fa-ring-bell 1s infinite linear;
}

.icon-xs {
    display: inline-block;
    vertical-align: -20%;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    mask-repeat: no-repeat;
}
.icon-small {
    display: inline-block;
    vertical-align: -20%;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    mask-repeat: no-repeat;
}

.icon-pointer-pin {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.778 12.222l3.113 -2.09a1.2 1.2 0 0 0 -.309 -2.228l-13.582 -3.904l3.904 13.563a1.2 1.2 0 0 0 2.228 .308l2.09 -3.093l.381 .381" /><path d="M21.121 20.121a3 3 0 1 0 -4.242 0c.418 .419 1.125 1.045 2.121 1.879c1.051 -.89 1.759 -1.516 2.121 -1.879z" /><path d="M19 18v.01" /></svg>');
}
.icon-pointer-gridref {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M14.778 12.222l3.113 -2.09a1.2 1.2 0 0 0 -.309 -2.228l-13.582 -3.904l3.904 13.563a1.2 1.2 0 0 0 2.228 .308l2.09 -3.093l.381 .381"></path><text x="14" y="18" fill="black" dominant-baseline="middle" font-family="Calibri, Arial, sans-serif" font-size="8" stroke-width="0.5">SH12</text></svg>');
    width: 28px;
    height: 20px;
}
.icon-draw-polygon {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M19 8m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M5 11m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M15 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M6.5 9.5l3.5 -3" /><path d="M14 5.5l3 1.5" /><path d="M18.5 10l-2.5 7" /><path d="M13.5 17.5l-7 -5" /></svg>');
}
.icon-draw-square {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path><path d="M19 5m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path><path d="M5 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path><path d="M19 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path><path d="M5 7l0 10"></path><path d="M7 5l10 0"></path><path d="M7 19l10 0"></path><path d="M19 7l0 10"></path></svg>');
}
.icon-draw-line {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path><path d="M19 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path><path d="M19 5m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path><path d="M5 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path><path d="M6.5 17.5l11 -11m-12.5 .5v10m14 -10v10"></path></svg>');
}
.icon-draw-circle {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path><path d="M17 10m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path><path d="M10 3m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path><path d="M10 17m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path><path d="M19 10a5 5 0 0 0 -5 -5"></path><path d="M19 14a5 5 0 0 1 -5 5"></path><path d="M5 14a5 5 0 0 0 5 5"></path><path d="M5 10a5 5 0 0 1 5 -5"></path></svg>');
}
.icon-measure {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3l4 4l-14 14l-4 -4z"></path><path d="M16 7l-1.5 -1.5"></path><path d="M13 10l-1.5 -1.5"></path><path d="M10 13l-1.5 -1.5"></path><path d="M7 16l-1.5 -1.5"></path></svg>');
}
.icon-skew-y {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M4.326 19h15.348a1 1 0 0 0 .962 -1.275l-3.429 -12a1 1 0 0 0 -.961 -.725h-8.492a1 1 0 0 0 -.961 .725l-3.429 12a1 1 0 0 0 .962 1.275z" /></svg>');
}
.icon-file-waveform {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path fill="currentColor" d="M96 0C60.7 0 32 28.7 32 64V288H144c6.1 0 11.6 3.4 14.3 8.8L176 332.2l49.7-99.4c2.7-5.4 8.3-8.8 14.3-8.8s11.6 3.4 14.3 8.8L281.9 288H352c8.8 0 16 7.2 16 16s-7.2 16-16 16H272c-6.1 0-11.6-3.4-14.3-8.8L240 275.8l-49.7 99.4c-2.7 5.4-8.3 8.8-14.3 8.8s-11.6-3.4-14.3-8.8L134.1 320H32V448c0 35.3 28.7 64 64 64H352c35.3 0 64-28.7 64-64V160H288c-17.7 0-32-14.3-32-32V0H96zM288 0V128H416L288 0z"></path></svg>');
}
.icon-bluesky {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M6.335 5.144c-1.654 -1.199 -4.335 -2.127 -4.335 .826c0 .59 .35 4.953 .556 5.661c.713 2.463 3.13 2.75 5.444 2.369c-4.045 .665 -4.889 3.208 -2.667 5.41c1.03 1.018 1.913 1.59 2.667 1.59c2 0 3.134 -2.769 3.5 -3.5c.333 -.667 .5 -1.167 .5 -1.5c0 .333 .167 .833 .5 1.5c.366 .731 1.5 3.5 3.5 3.5c.754 0 1.637 -.571 2.667 -1.59c2.222 -2.203 1.378 -4.746 -2.667 -5.41c2.314 .38 4.73 .094 5.444 -2.369c.206 -.708 .556 -5.072 .556 -5.661c0 -2.953 -2.68 -2.025 -4.335 -.826c-2.293 1.662 -4.76 5.048 -5.665 6.856c-.905 -1.808 -3.372 -5.194 -5.665 -6.856z"></path></svg>');
}
.icon-x {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M4 4l11.733 16h4.267l-11.733 -16z"></path> <path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path> </svg>');
}