/* OSM Notes Layer */
.layer-keepRight,
.layer-notes {
    pointer-events: none;
}
.layer-keepRight .kr_error,
.layer-notes .note * {
    pointer-events: none;
}
.mode-browse .layer-notes .note .note-fill,
.mode-select .layer-notes .note .note-fill,
.mode-select-data .layer-notes .note .note-fill,
.mode-select-note .layer-notes .note .note-fill,
.layer-keepRight .kr_error .kr_error-fill,
.layer-notes .note .note-fill {
    pointer-events: visible;
    cursor: pointer; /* Opera */
    cursor: url(img/cursor-select-point.png), pointer; /* FF */
}

.note-header-icon .note-shadow,
.layer-notes .note .note-shadow {
    color: #000;
}

.kr_error-header-icon .kr_error-fill,
.layer-keepRight .kr_error .kr_error-fill {
    stroke: #333;
}

.note-header-icon .note-fill,
.layer-notes .note .note-fill {
    color: #ff3300;
    stroke: #333;
    stroke-width: 40px;
}
.note-header-icon.new .note-fill,
.layer-notes .note.new .note-fill {
    color: #ffee00;
    stroke: #333;
    stroke-width: 40px;
}
.note-header-icon.closed .note-fill,
.layer-notes .note.closed .note-fill {
    color: #55dd00;
    stroke: #333;
    stroke-width: 40px;
}

/* slight adjustments to preset icon for note icons */
.note-header-icon .preset-icon-28 {
    top: 18px;
}
.note-header-icon .note-icon-annotation {
    position: absolute;
    top: 22px;
    left: 22px;
    margin: auto;
}
.note-header-icon .note-icon-annotation .icon {
    width: 15px;
    height: 15px;
}


/* Custom Map Data (geojson, gpx, kml, vector tile) */
.layer-mapdata {
    pointer-events: none;
}

.layer-mapdata path.shadow {
    pointer-events: stroke;
    stroke: #f6634f;
    stroke-width: 16;
    stroke-opacity: 0;
    fill: none;
}
.layer-mapdata path.MultiPoint.shadow,
.layer-mapdata path.Point.shadow {
    pointer-events: fill;
    fill: #f6634f;
    fill-opacity: 0;
}
.layer-mapdata path.shadow.hover:not(.selected) {
    stroke-opacity: 0.4;
}
.layer-mapdata path.shadow.selected {
    stroke-opacity: 0.7;
}

.layer-mapdata path.stroke {
    stroke: #ff26d4;
    stroke-width: 2;
    fill: none;
}

.layer-mapdata path.fill {
    stroke-width: 0;
    stroke-opacity: 0.3;
    stroke: #ff26d4;
    fill: #ff26d4;
    fill-opacity: 0.3;
    fill-rule: evenodd;
}

.layer-mapdata text.label-halo,
.layer-mapdata text.label {
    font-size: 10px;
    font-weight: bold;
    dominant-baseline: middle;
}
.layer-mapdata text.label {
    fill: #ff26d4;
}
.layer-mapdata text.label.hover,
.layer-mapdata text.label.selected {
    fill: #f6634f;
}
.layer-mapdata text.label-halo {
    opacity: 0.7;
    stroke: #000;
    stroke-width: 5px;
    stroke-miterlimit: 1;
}


/* OSM Note UI */
.note-header,
.kr_error-header {
    background-color: #f6f6f6;
    border-radius: 5px;
    border: 1px solid #ccc;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

.note-header-icon,
.kr_error-header-icon {
    background-color: #fff;
    padding: 10px;
    flex: 0 0 62px;
    position: relative;
    width: 60px;
    height: 60px;
    border-right: 1px solid #ccc;
    border-radius: 5px 0 0 5px;
}
[dir='rtl'] .note-header-icon,
[dir='rtl'] .kr_error-header-icon {
    border-right: unset;
    border-left: 1px solid #ccc;
    border-radius: 0 5px 5px 0;
}

.note-header-icon .icon-wrap,
.kr_error-header-icon .icon-wrap {
    position: absolute;
    top: 0px;
}

.note-header-label,
.kr_error-header-label {
    background-color: #f6f6f6;
    padding: 0 15px;
    flex: 1 1 100%;
    font-size: 14px;
    font-weight: bold;
    border-radius: 0 5px 5px 0;
}
[dir='rtl'] .note-header-label,
[dir='rtl'] .kr_error-header-label {
    border-radius: 5px 0 0 5px;
}

/* KeepRight */
.kr_error-comment-container,
.kr_error-details-container {
    background: #ececec;
    padding: 10px 10px;
    border-radius: 8px;
    margin-top: 20px;
}

.kr_error_type_30 {
    color: #ddb87d;
}

.kr_error_type_40,
.kr_error_type_41,
.kr_error_type_42,
.kr_error_type_43 {
    color: #894668;
}

.kr_error_type_50 {
    color: #c827fe;
}

.kr_error_type_70,
.kr_error_type_71,
.kr_error_type_72 {
    color: #74aeaf;
}

.kr_error_type_90 {
    color: #3124af;
}

.kr_error_type_100 {
    color: #9e8e91;
}

.kr_error_type_110 {
    color: #44650b;
}

.kr_error_type_120 {
    color: #99274d;
}

.kr_error_type_130 {
    color: #eb7310;
}

.kr_error_type_150 {
    color: #7218c1;
}

.kr_error_type_160 {
    color: #c903ae;
}

.kr_error_type_170 {
    color: #07d40b;
}

.kr_error_type_180 {
    color: #09ef12;
}

.kr_error_type_190,
.kr_error_type_191,
.kr_error_type_192,
.kr_error_type_193,
.kr_error_type_194,
.kr_error_type_195,
.kr_error_type_196,
.kr_error_type_197,
.kr_error_type_198 {
    color: #e6fcb0;
}

.kr_error_type_200,
.kr_error_type_201,
.kr_error_type_202,
.kr_error_type_203,
.kr_error_type_204,
.kr_error_type_205,
.kr_error_type_206,
.kr_error_type_207,
.kr_error_type_208 {
    color: #71f264;
}

.kr_error_type_210,
.kr_error_type_211,
.kr_error_type_212 {
    color: #4a7601;
}

.kr_error_type_220,
.kr_error_type_221 {
    color: #ef7cf2;
}

.kr_error_type_230,
.kr_error_type_231,
.kr_error_type_232 {
    color: #5f775c;
}

.kr_error_type_270 {
    color: #2aaf92;
}

.kr_error_type_280,
.kr_error_type_281,
.kr_error_type_282,
.kr_error_type_283,
.kr_error_type_284,
.kr_error_type_285 {
    color: #5f47a0;
}

.kr_error_type_290,
.kr_error_type_291,
.kr_error_type_292,
.kr_error_type_293,
.kr_error_type_294,
.kr_error_type_295,
.kr_error_type_296,
.kr_error_type_297,
.kr_error_type_298 {
    color: #9bb2cd;
}

.kr_error_type_310,
.kr_error_type_311,
.kr_error_type_312,
.kr_error_type_313 {
    color: #0550e8;
}

.kr_error_type_320 {
    color: #28d9bb;
}

.kr_error_type_350 {
    color: #4d719c;
}

.kr_error_type_370 {
    color: #ff8fdf;
}

.kr_error_type_380 {
    color: #b3b465;
}

.kr_error_type_400,
.kr_error_type_401,
.kr_error_type_402 {
    color: #b20e36;
}

.kr_error_type_410,
.kr_error_type_411,
.kr_error_type_412,
.kr_error_type_413 {
    color: #b07f7e;
}

.kr_error-details-title {
    text-align: left;
    margin-bottom: 20px;
}

.kr_error-details-description {
    text-align: left;
    margin-bottom: 10px;
}

.QA-buttons {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    padding: 0 5px;
}

.QA-toggle-off,
.QA-toggle-on {
    width: 35%;
    margin: 10px 0px;
    text-align: center;
    vertical-align: middle;
}