body {
    font: normal 14px Helvetica, Arial, sans-serif;
    background-color: white;
}

h1 {
    margin: .4em 0;
}
h2 {
    margin: .25em 0;
}

a {
    text-decoration: none;
}

/* Support for old browsers that do not implement the "main" tag */
main {
    display: block;
}

/* Highlight form fields with inconsistent values (when multiple items
   are being edited simultaneously) */
.u-inconsistent > label {
    background-color: #fea !important;
}

.confirmDialog__dismiss-underline {
    text-decoration: underline;
}

.confirmDialog__dismiss-emphasis {
    font-weight: bold;
    color: red;
    text-decoration: underline;
    /* ...hopefully that should be enough! */
}

.commonForm {
    display: table;
    border-collapse: separate;
    border-spacing: 0 5px;
    margin-bottom: 1.5em;
}

.commonForm__row--pending > label {
    background-color: #d4e2f5;
}

.commonForm__row--pending > label::after {
    font: 100%/1 WebComponentsIcons;
    content: '\e13b';  /* gears icon */
    color: #008;
}

.commonForm__row--error > label {
    background-color: #fcc;
}

.commonForm__row--error > label::after {
    font: 100%/1 WebComponentsIcons;
    content: '\e403';  /* exclamation icon */
    color: #800;
}

.commonForm__info {
    margin-left: .35em;
}

.commonForm input[type="number"] {
    width: 4em;
}

/* .commonForm .u-indeterminate::before { */
/*     content: '?'; */
/* } */

.commonForm__row {
    display: table-row;
}

.commonForm__row > * {
    display: table-cell;
    border-spacing: 0 2px;
}

.commonForm__row > label {
    /* font-weight: bold; */
    padding-right: 1em;
}

.commonForm__column {
    display: table;
}

.commonForm__editLinkContainer > a::before {
    font: 100%/1 WebComponentsIcons;
    content: '\e10b';  /* pen icon */
    margin-right: .2em;
}

.commonForm__row--spacer {
    height: 17px;
}

.commonForm__header {
    border-bottom: 2px solid #cecece;
    padding-bottom: 3px;
    max-width: 600px;
    margin: .5em 0;
    background-color: #eee;
    padding: 3px;
}

.l-center {
    /* Center in parent */
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.l-vcenter {
    /* Center vertically in parent */
    position: relative;
    left: 0;
    top: 50%;
    transform: translate(0%, -50%);
}

.l-hcenter {
    /* Center horizontally in parent */
    position: relative;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0%);
}

.u-waitcursor {
    cursor: wait !important;
}

.u-noselect {
    -webkit-touch-callout: none;
      -webkit-user-select: none; 
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
}
.u-noselect *:focus {
    outline: none !important;
}

.u-allowselect,
.leaflet-popup-content,
.leaflet-control-attribution {
    -webkit-touch-callout: text;
      -webkit-user-select: text; 
       -khtml-user-select: text;
         -moz-user-select: text;
          -ms-user-select: text;
              user-select: text;
}
.u-allowselect *:focus,
.leaflet-popup-content *:focus,
.leaflet-control-attribution *:focus {
    outline: initial !important;
}

/* Hide the built-in collapse/expand icons from the Kendo UI splitter
   when the "u-customcollapsebtn" class is set on a parent element,
   which indicates that we are providing our own buttons */
.u-customcollapsebtn > .k-splitbar > .k-icon.k-collapse-prev,
.u-customcollapsebtn > .k-splitbar > .k-icon.k-collapse-next,
.u-customcollapsebtn > .k-splitbar > .k-icon.k-expand-prev,
.u-customcollapsebtn > .k-splitbar > .k-icon.k-expand-next {
    display: none !important;
}

/* If the built-in collapse/expand button is *not* hidden with the
   .u-customcollapsebtn class, then hide the resize handle to
   make the collapse/expand button more visible */
*:not(.u-customcollapsebtn) > .k-splitbar > .k-resize-handle {
    display: none;
}

/* ---------------------------------------------------------------------
   Horizontal collapse/expand button
*/
.c-hcollapsebtn {
    display: inline-block;
    width: 20px;
    height: 40px;
    text-align: center;
    background-color: #f5f5f5;
    cursor: pointer;
    border: 1px solid #999;
    position: relative;
}

body.touchsupport .c-hcollapsebtn {
    /* Make the button larger on touch devices */
    min-width: /*$touch-collapsebtn-min-width*/30px !important;
}

.c-hcollapsebtn:hover {
    background-color: #ebebeb;
}

.c-hcollapsebtn::before {
    font: 17px/1 WebComponentsIcons;
    position: absolute;
    transform: translate(-53%, -50%);
    top: 50%;
}

.c-hcollapsebtn::before {
    content: '\e007';  /* left arrow icon */
}

.c-hcollapsebtn--collapsed::before {
    content: '\e005';  /* right arrow icon */
}

/* ---------------------------------------------------------------------
   Vertical collapse/expand button
*/
.c-vcollapsebtn {
    display: inline-block;
    height: 20px;
    width: 40px;
    text-align: center;
    background-color: #f5f5f5;
    cursor: pointer;
    border: 1px solid #999;
    position: relative;
}

.touchsupport .c-vcollapsebtn {
    /* Make the button larger on touch devices */
    width: 40px;
}

.c-vcollapsebtn:hover {
    background-color: #ebebeb;
}

.c-vcollapsebtn::before {
    font: 17px/1 WebComponentsIcons;
    position: absolute;
    transform: translate(-53%, -43%);
    top: 50%;
}

.c-vcollapsebtn::before {
    content: '\e006';  /* down arrow icon */
}

.c-vcollapsebtn--collapsed::before {
    content: '\e004';  /* up arrow icon */
}

/* ---------------------------------------------------------------------
   Dropdown button
*/
.c-dropdownbtn {
    border: 1px solid #777;
    border-radius: 8px;
    padding: 3px 7px;
    white-space: nowrap;
    cursor: pointer;
    transition: all /*$hover-transition-time*/.15s ease-out;
    /* All three rules below are needed for ellipsis to work */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* Give enough space for the :after pseudo-element (down arrow) */
    padding-right: 2.2em;
    /* Needed for the :after pseudo-element to avoid ellipsis */
    position: relative;
}

/* Icon + dropdown arrow */
.c-dropdownbtn::before,
.c-dropdownbtn::after {
    font: 150%/1 WebComponentsIcons;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    position: relative;
}

.c-dropdownbtn::after {
    /* 'position: absolute' allows the :after pseudo-element to avoid
        being cut off by ellipsis. This requires 'position: relative'
        to be set on the parent. */
    position: absolute;
    right: .25em;
    top: calc(50% + 0.03em);
    transform: translate(0%, -50%);
}

.c-dropdownbtn::after {
    content: '\e006';  /* down arrow icon */
}

/* ---------------------------------------------------------------------
   Popup menu
*/

.c-popupmenu {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 9999;
}

.c-popupmenu > a {
    color: black;
    display: block;
    padding: 8px 5px;
}

.c-popupmenu > a:hover {
    background-color: #ddd;
}

/* ---------------------------------------------------------------------
   A Kendo UI pane containing a Kendo ListBox and a label
*/

.c-listboxpane {
    width: 100%;
    height: calc(100% - /*$listboxpane-label-height*/30px);
    box-sizing: border-box;
}

.c-listboxpane > label {
    display: block;
    font-size: 16px;
    line-height: /*$listboxpane-label-height*/30px;
    background-color: #f5f5f5;
    font-weight: bold;
    vertical-align: middle;
    padding-left: 5px;
}

.c-listboxpane > .k-listbox {
    width: 100%;
}

/* ---------------------------------------------------------------------
   A "filter" dropdown button, located in the label header of a
   c-listboxpane.
*/

.c-listboxpane__filterbtn {
    font-weight: normal;
    padding: 0 6px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    color: #505050;
}

.c-listboxpane__filterbtn:hover {
    background-color: #e0e0e0;
}

.c-listboxpane__filterbtn::after {
    content: '\e006';  /* down arrow */
    margin-left: -.2em;
    font: 100%/1 WebComponentsIcons;
    vertical-align: middle;
    line-height: normal;
    position: relative;
}

.c-listboxpane__filterbtn--expanded::after {
    content: '\e004';  /* up arrow */
}

.c-listboxpane__filterbtn__separator {
    margin-left: 10px;
    margin-right: 2px;
    border-left: 1px solid #ccc;
}

/* ---------------------------------------------------------------------
   A Kendo Toolbar containing only one or more button groups.

   We use a toolbar for this purpose because the "normal"
   "kendoButtonGroup" does not seem to be included in the Kendo UI
   core release (even though it is supposed to be).
*/
.c-buttongroup.k-toolbar {
    /* Clear the toolbar background */
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.c-buttongroup.k-toolbar .k-button:focus {
    border-color: #aeaeae !important;
}

.c-buttongroup.k-toolbar .k-button.k-state-active {
    border-color: #aeaeae !important;
    /* Make the currently active button more visible by giving it a
       contrasted background */
    color: white;
    background-color: #3276b1;
}

/* Allow the button groups to stack vertically (instead of
   horizontally by default) if they are separated with a
   k-separator element */
.c-buttongroup.k-toolbar > .k-separator {
    display: block;
}

.c-buttongroup.k-toolbar > .k-separator {
    /* Give separators a height, since button groups can be
       stacked vertically */
    height: 5px;
    /* Make the separator invisible */
    border: none;
    background-color: transparent;
}

.c-buttongroup.k-toolbar > .k-button-group {
    margin-left: 0;
    margin-top: 0;
    width: 100%;
    display: table;
    table-layout: fixed;
}
.c-buttongroup.k-toolbar > .k-button-group > .k-button {
    display: table-cell;
    width: auto;
}

/* ---------------------------------------------------------------------
   A list of checkbox items with labels, highlighted on mouse hover
*/

.c-checkboxlist {
    padding: 5px;
}

.c-checkboxlist label {
    display: block;
    border-radius: 3px;
    cursor: pointer;
}

.c-checkboxlist label:hover {
    background-color: #e0e0e0;
}

.k-state-disabled .c-checkboxlist label,
.c-checkboxlist.k-state-disabled label {
    cursor: unset;
}

.k-state-disabled .c-checkboxlist label,
.c-checkboxlist.k-state-disabled label {
    background-color: transparent;
}