+.field-help-title h2 {
+ padding: 10px;
+ margin-bottom: 0px;
+ font-size: 17px;
+}
+.field-help-title button {
+ width: 45px;
+ height: 55px;
+ border-radius: 0;
+}
+
+.field-help-nav {
+ font-size: 13px;
+ font-weight: bold;
+ margin-bottom: 10px;
+}
+.field-help-nav-item {
+ display: inline-block;
+ padding: 5px 10px;
+ cursor: pointer;
+ color: #666;
+}
+.field-help-nav-item.active {
+ color: #7092ff;
+ border-bottom: 2px solid;
+}
+.field-help-nav-item:hover {
+ color: #597be7;
+ background-color: #efefef;
+}
+
+.field-help-content {
+ padding: 10px;
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+.field-help-content h3 {
+ font-size: 12px;
+ margin-bottom: 5px;
+}
+.field-help-content p {
+ margin-bottom: 15px;
+}
+.field-help-content ul li {
+ list-style: inside;
+ margin-bottom: 5px;
+}
+
+.field-help-content .field-help-image {
+ width: 100%;
+ margin-bottom: 15px;
+}
+
+.field-help-content svg.turn {
+ width: 40px;
+ height: 20px;
+}
+.field-help-content svg.shadow {
+ opacity: 0.7;
+ width: 60px;
+ height: 20px;
+}
+.field-help-content svg.from {
+ color: #777;
+}
+.field-help-content svg.allow {
+ color: #5b3;
+}
+.field-help-content svg.restrict {
+ color: #d53;
+}
+.field-help-content svg.only {
+ color: #68f;
+}
+
+.field-help-content p.from_shadow,
+.field-help-content p.allow_shadow,
+.field-help-content p.restrict_shadow,
+.field-help-content p.allow_turn,
+.field-help-content p.restrict_turn {
+ margin-bottom: 5px;
+}
+
+
+/* More Fields dropdown
+------------------------------------------------------- */
+.more-fields {
+ padding: 0 20px 20px 20px;
+ font-weight: bold;
+}
+.changeset-editor .more-fields {
+ padding: 15px 20px 0 20px;
+}
+
+.more-fields label {
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.more-fields input {
+ margin-left: 10px;
+ flex: 1 1 50%;
+}
+[dir='rtl'] .more-fields input {
+ margin-left: auto;
+ margin-right: 10px;
+}
+
+.form-field-input-wrap .label {
+ height: 30px;
+ background: #f6f6f6;
+ padding: 5px 10px;
+}
+
+
+/* Raw Tag Editor
+------------------------------------------------------- */
+.raw-tag-options {
+ display: flex;
+ flex-flow: row nowrap;
+ flex-direction: row-reverse;
+ margin-top: -25px;
+ padding: 0 3px;
+}
+button.raw-tag-option {
+ flex: 0 0 20px;
+ height: 20px;
+ width: 20px;
+ background: #aaa;
+ color: #eee;
+ margin: 0 3px;
+}
+button.raw-tag-option:focus,
+button.raw-tag-option:hover,
+button.raw-tag-option.active {
+ color: #fff;
+ background: #597be7;
+}
+button.raw-tag-option.selected {
+ color: #fff;
+ background: #7092ff;
+}
+button.raw-tag-option svg.icon {
+ width: 14px;
+ height: 14px;
+ vertical-align: text-bottom;
+}
+[dir='ltr'] button.raw-tag-option-list {
+ -moz-transform: scaleX(-1);
+ -o-transform: scaleX(-1);
+ -webkit-transform: scaleX(-1);
+ transform: scaleX(-1);
+ filter: FlipH;
+ -ms-filter: "FlipH";
+}
+
+
+.tag-text {
+ width: 100%;
+ height: 100%;
+ font-family: monospace;
+ white-space: pre;
+}
+
+.tag-text,
+.tag-list {
+ margin-top: 10px;
+}
+.tag-row {
+ width: 100%;
+ position: relative;
+}
+.tag-row .inner-wrap {
+ display: flex;
+ flex-flow: row nowrap;
+ width: 100%;
+ position: relative;
+}
+.tag-row .key-wrap,
+.tag-row .value-wrap {
+ flex: 1 1 50%;
+}
+
+.tag-text.readonly,
+.tag-row.readonly,
+.tag-row.readonly input.key,
+.tag-row.readonly input.value,
+.tag-row.readonly button.remove {
+ color: #777;
+ background-color: #eee;
+ cursor: not-allowed;
+}
+
+.tag-row input {
+ height: 31px;
+ border: 0;
+ border-radius: 0;
+ border-bottom: 1px solid #ccc;
+ border-left: 1px solid #ccc;
+ width: 100%;
+}
+[dir='rtl'] .tag-row input {
+ border-left: none;
+ border-right: 1px solid #ccc;
+}
+
+
+.tag-row input.key {
+ font-weight: bold;
+ background-color: #f6f6f6;
+}
+
+.tag-row input.value {
+ border-right: 1px solid #ccc;
+}
+[dir='rtl'] .tag-row input.value {
+ border-left: 1px solid #ccc;
+}
+
+.tag-row:first-child input.key {
+ border-top: 1px solid #ccc;
+ border-top-left-radius: 4px;
+}
+[dir='rtl'] .tag-row:first-child input.key {
+ border-top-left-radius: 0;
+ border-top-right-radius: 4px;
+}
+
+.tag-row:first-child input.value {
+ border-top: 1px solid #ccc;
+}
+.tag-row button {
+ flex: 0 0 32px;
+ height: 31px;
+ width: 32px;
+ border: 1px solid #ccc;
+ border-top-width: 0;
+ border-left-width: 0;
+}
+[dir='rtl'] .tag-row button {
+ border-left-width: 1px;
+ border-right-width: 0;
+}
+
+.tag-row button:hover {
+ background: #f1f1f1;
+}
+.tag-row button .icon {
+ opacity: .5;
+}
+.tag-row:first-child button {
+ border-top-width: 1px;
+}
+
+.tag-row:first-child .tag-reference-button {
+ border-top-right-radius: 4px;
+}
+[dir='rtl'] .tag-row:first-child .tag-reference-button {
+ border-top-left-radius: 4px;
+ border-top-right-radius: 0;
+}
+
+.tag-row:last-child .tag-reference-button {
+ border-bottom-right-radius: 4px;
+}
+[dir='rtl'] .tag-row:last-child .tag-reference-button {
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 0;
+}
+
+.tag-row .tag-reference-button {
+ border-radius: 0;
+}
+[dir='rtl'] .tag-row .tag-reference-button {
+ border-left-width: 1px;
+ border-right-width: 0;
+}
+
+/* Tag reference */
+.tag-reference-loading {
+ background-color: #f5f5f5;
+}
+.tag-reference-loading .icon {
+ background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
+ background-position: 0 0;
+}
+
+.tag-reference-body {
+ flex: 1 1 auto;
+ width: 100%;
+ overflow: hidden;
+ display: none;
+ padding-top: 10px;
+}
+.tag-reference-body.expanded {
+ padding-bottom: 10px;
+ display: inline-block;
+}
+.tag-reference-description {
+
+}
+.tag-reference-link {
+ display: block;
+}
+
+img.tag-reference-wiki-image {
+ float: right;
+ width: 33.3333%;
+ border-radius: 4px;
+ margin: 0 0 0 5px;
+}
+[dir='rtl'] img.tag-reference-wiki-image {
+ float: left;
+ margin: 0 5px 0 0;
+}
+
+.preset-list .tag-reference-body {
+ position: relative;
+ width: 100%;
+}
+.raw-tag-editor .tag-reference-body {
+ width: 100%;
+}
+.raw-tag-editor .tag-row.readonly .tag-reference-body {
+ background: #f6f6f6;
+ color: #333;
+}
+.raw-tag-editor .tag-row:not(:last-child) .tag-reference-body.expanded {
+ border-bottom: 1px solid #ccc;
+}
+.raw-tag-editor .tag-row.readonly .tag-reference-body.expanded {
+ border-top: 1px solid #ccc;
+}
+
+
+/* Raw Member / Membership Editor
+------------------------------------------------------- */
+
+.raw-member-editor .member-list,
+.raw-membership-editor .member-list {
+ padding-top: 10px;
+}
+.raw-member-editor .member-list li,
+.raw-membership-editor .member-list li {
+ position: relative;
+ border-radius: 4px;
+ margin: 0;
+ padding-bottom: 10px;
+}
+.raw-member-editor .member-row .member-entity-name,
+.raw-membership-editor .member-row .member-entity-name {
+ font-weight: normal;
+ padding-left: 10px;
+}
+
+[dir='rtl'] .raw-member-editor .member-row .member-entity-name,
+[dir='rtl'] .raw-membership-editor .member-row .member-entity-name {
+ padding-left:0;
+ padding-right: 10px;
+}
+
+.form-field-input-member > input.member-role {
+ border-radius: 0 0 0 4px;
+}
+[dir='rtl'] .form-field-input-member > input.member-role {
+ border-radius: 0 0 4px 0;
+}
+
+.member-incomplete .form-field-input-member > input.member-role,
+[dir='rtl'] .member-incomplete .form-field-input-member > input.member-role {
+ border-radius: 0 0 4px 4px;
+}
+
+.member-incomplete .member-delete {
+ display: none;
+}
+
+.member-row-new .member-entity-input {
+ flex: 1 1 100%;
+ border-radius: 4px 4px 0 0;
+ border: 0;
+}
+
+.raw-member-editor .member-row.dragging {
+ opacity: 0.75;
+ z-index: 3000;
+ /*
+ -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
+ -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
+ box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
+ */
+}
+.raw-member-editor .member-row.dragging
+
+/* preserve extra space at bottom of inspector to allow for dropdown options - #5280 */
+.raw-membership-editor.inspector-inner {
+ margin-bottom: 150px;
+}
+
+/* hidden field to prevent user from tabbing out of the sidebar */
+input.key-trap {
+ height: 0px;
+ width: 0px;
+ padding: 0px;
+ border: 1px solid rgba(0,0,0,0);
+}
+
+
+/* add tag, add relation buttons */
+.add-row {
+ display: flex;
+ width: 100%;
+ flex-flow: row nowrap;
+}
+.add-row .add-tag,
+.add-row .add-relation,
+.add-row .space-value {
+ flex: 1 1 50%;
+}
+.add-row .space-buttons {
+ flex: 0 0 62px;
+}
+.add-row button {
+ height: 30px;
+ background: rgba(0,0,0,.5);
+}
+.add-row button:focus,
+.add-row button:hover {
+ background: rgba(0,0,0,.8);
+}
+
+.add-tag {
+ border-radius: 0 0 4px 4px;
+}
+.add-relation {
+ margin-top: 10px;
+ border-radius: 4px;
+}
+
+
+/* OSM Note / KeepRight Editors
+------------------------------------------------------- */
+.note-header,
+.error-header {
+ background-color: #f6f6f6;
+ border-radius: 5px;
+ border: 1px solid #ccc;
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: center;
+}
+
+.note-header-icon,
+.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'] .error-header-icon {
+ border-right: unset;
+ border-left: 1px solid #ccc;
+ border-radius: 0 5px 5px 0;
+}
+
+.note-header-icon .icon-wrap,
+.error-header-icon .icon-wrap {
+ position: absolute;
+ top: 0px;
+}
+.preset-icon-28 {
+ position: absolute;
+ top: 16px;
+ left: 16px;
+ margin: auto;
+}
+.preset-icon-28 .icon {
+ width: 28px;
+ height: 28px;
+}
+
+.note-header-label,
+.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'] .error-header-label {
+ border-radius: 5px 0 0 5px;
+}
+
+.note-category {
+ margin: 20px 0px;
+}
+
+.comments-container {
+ background: #ececec;
+ padding: 1px 10px;
+ border-radius: 8px;
+ margin-top: 20px;
+}
+
+.comment {
+ background-color: #fff;
+ border-radius: 5px;
+ border: 1px solid #ccc;
+ margin: 10px auto;
+ display: flex;
+ flex-flow: row nowrap;
+}
+.comment-avatar {