+/* Remove the field's bottom border radius when combobox is open */
+/* For some reason this stops the combobox from overlapping the bottom of the field */
+.combobox + * textarea:focus,
+.combobox + * input:focus {
+ border-bottom-left-radius: 0 !important;
+ border-bottom-right-radius: 0 !important;
+}
+
+
+/* Field Help
+------------------------------------------------------- */
+.field-help-body {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 20px;
+ right: 20px;
+ margin: 5px;
+ padding: 8px;
+ border: 1px solid #ccc;
+ border-top: 0;
+ border-radius: 0 0 4px 4px;
+ z-index: 20;
+ background: rgba(255,255,255,0.95);
+ box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
+}
+
+.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
+------------------------------------------------------- */
+.tag-list {
+ padding-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-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;
+}
+.tag-reference-body .tag-reference-description {
+ margin: 10px 5px 0 5px;
+}
+.tag-reference-body a {
+ display: block;
+}
+.tag-reference-body .tag-reference-description:last-child,
+.tag-reference-body a:last-child {
+ margin-bottom: 15px;
+}
+
+.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 li:first-child,
+.raw-membership-editor .member-list li:first-child {
+ padding-top: 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;
+}