+.ideditor .preset-category-rail svg.preset-icon-category-border path {
+ stroke: #555;
+}
+/* Basics
+------------------------------------------------------- */
+/* the root element of iD */
+.ideditor {
+ height: 100%;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ overflow: hidden;
+
+ /* Establish a local stacking context so all elements within iD are on the
+ same layer relative to elements outside iD - #7457.
+ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+ */
+ position: relative;
+ z-index: 0;
+
+ font: normal 12px/1.6667 ui-sans-serif, "-apple-system", BlinkMacSystemFont,
+ "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
+ "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
+ sans-serif;
+ color: #333;
+
+ -ms-touch-action: none;
+
+ touch-action: none;
+ -ms-user-select: none;
+ -ms-content-zooming: none;
+}
+.ideditor div {
+ /* disable pinch-to-zoom of the UI on touch devices */
+ -ms-touch-action: pan-x pan-y;
+ touch-action: pan-x pan-y;
+}
+
+.ideditor .main-content {
+ position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ overflow: hidden;
+ height: 100%;
+ -ms-touch-action: none;
+ touch-action: none;
+}
+
+.ideditor .main-content.active {
+ -webkit-filter: none !important;
+ filter: none !important;
+ -webkit-transition-duration: 200ms;
+ -o-transition-duration: 200ms;
+ transition-duration: 200ms;
+}
+
+.ideditor .main-content.inactive {
+ -webkit-filter: grayscale(80%) brightness(80%);
+ filter: grayscale(80%) brightness(80%);
+ -webkit-transition-duration: 200ms;
+ -o-transition-duration: 200ms;
+ transition-duration: 200ms;
+}
+
+.ideditor #ideditor-defs {
+ /* Can't be display: none or the clippaths are ignored. */
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+.ideditor div, .ideditor textarea, .ideditor label, .ideditor input, .ideditor form, .ideditor span, .ideditor ul, .ideditor li, .ideditor ol, .ideditor a, .ideditor button, .ideditor h1, .ideditor h2, .ideditor h3, .ideditor h4, .ideditor h5, .ideditor p, .ideditor img {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.ideditor a, .ideditor button, .ideditor input, .ideditor textarea {
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+ -webkit-touch-callout: none;
+}
+
+.ideditor ul li {
+ list-style: none;
+}
+
+.ideditor a,
+.ideditor button {
+ cursor: pointer;
+}
+
+.ideditor h2 {
+ font-size: 25px;
+ line-height: 1.25;
+ font-weight: bold;
+ margin-bottom: 20px;
+}
+.ideditor .header h2 {
+ font-size: 20px;
+ line-height: 1.25;
+ font-weight: bold;
+ margin-bottom: 0px;
+}
+
+.ideditor h3:last-child,
+.ideditor h4:last-child { margin-bottom: 0;}
+
+.ideditor h3 {
+ font-size: 16px;
+ line-height: 1.25;
+ font-weight: bold;
+ margin-bottom: 10px;
+}
+.ideditor h4, .ideditor h5 {
+ font-size: 12px;
+ font-weight: bold;
+ padding-bottom: 10px;
+}
+
+.ideditor button:focus,
+.ideditor textarea:focus,
+.ideditor input[type=text]:focus,
+.ideditor input[type=search]:focus,
+.ideditor input[type=number]:focus,
+.ideditor input[type=url]:focus,
+.ideditor input[type=tel]:focus,
+.ideditor input[type=email]:focus,
+.ideditor input[type=date]:focus {
+ outline-color: transparent;
+ outline-style: none;
+}
+
+.ideditor ::-webkit-input-placeholder {
+ color: #aaa;
+ opacity: 1; /* Firefox */
+}
+
+.ideditor ::-moz-placeholder {
+ color: #aaa;
+ opacity: 1; /* Firefox */
+}
+
+.ideditor :-ms-input-placeholder {
+ color: #aaa;
+ opacity: 1; /* Firefox */
+}
+
+.ideditor ::-ms-input-placeholder {
+ color: #aaa;
+ opacity: 1; /* Firefox */
+}
+
+.ideditor ::placeholder {
+ color: #aaa;
+ opacity: 1; /* Firefox */
+}
+
+.ideditor p {
+ font-size: 12px;
+ margin: 0;
+ padding: 0;
+}
+.ideditor p:last-child {
+ padding-bottom: 0;
+}
+.ideditor em {
+ font-style: italic;
+}
+.ideditor strong {
+ font-weight: bold;
+}
+.ideditor a,
+.ideditor a:visited,
+.ideditor a:active {
+ color: #7092ff;
+}
+.ideditor a:focus {
+ color: #597be7;
+}
+@media (hover: hover) {
+ .ideditor a:hover {
+ color: #597be7;
+ }
+}
+.ideditor kbd {
+ display: inline-block;
+ text-align: center;
+ padding: 3px 5px;
+ font-size: 11px;
+ line-height: 1.3;
+ min-width: 0.9em;
+ vertical-align: baseline;
+ background-color: #fcfcfc;
+ border: solid 1px #ccc;
+ margin: 0 2px;
+ border-bottom-color: #bbb;
+ border-radius: 3px;
+ -webkit-box-shadow: inset 0 -1px 0 #bbb;
+ box-shadow: inset 0 -1px 0 #bbb;
+}
+
+.ideditor code {
+ font-family: ui-monospace, monospace, monospace;
+ background: rgba(174, 174, 174, 0.25);
+ padding: 1px 2px;
+}
+
+/* Forms
+------------------------------------------------------- */
+.ideditor textarea,
+.ideditor input[type=text],
+.ideditor input[type=search],
+.ideditor input[type=number],
+.ideditor input[type=url],
+.ideditor input[type=tel],
+.ideditor input[type=email],
+.ideditor input[type=date] {
+ background-color: #fff;
+ color: #333;
+ border: 1px solid #ccc;
+ padding: 0px 10px 0px 10px;
+ border-radius: 4px;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ overflow: auto;
+}
+.ideditor input[type=text],
+.ideditor input[type=search],
+.ideditor input[type=number],
+.ideditor input[type=url],
+.ideditor input[type=tel],
+.ideditor input[type=email],
+.ideditor input[type=date],
+.ideditor input[type=color] {
+ /* need this since line-height interpretation may vary by font or browser */
+ height: 2.585em;
+}
+.ideditor textarea {
+ min-height: 2em;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ resize: vertical;
+ font:normal 12px/20px "-apple-system", BlinkMacSystemFont,
+ "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
+ "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial",
+ sans-serif;
+}
+
+.ideditor textarea:active,
+.ideditor input:active,
+.ideditor textarea:focus,
+.ideditor input:focus {
+ background-color: #f1f1f1;
+}
+
+.ideditor textarea.disabled,
+.ideditor input.disabled {
+ color: #777;
+ background-color: #eee;
+ cursor: not-allowed;
+}
+
+.ideditor input[type="checkbox"],
+.ideditor input[type="radio"] {
+ width: 14px;
+ height: 14px;
+ margin-right: 5px;
+ cursor: pointer;
+ vertical-align: middle;
+}
+.ideditor[dir='rtl'] input[type="checkbox"],
+.ideditor[dir='rtl'] input[type="radio"] {
+ margin-left: 5px;
+ margin-right: 0;
+}
+
+.ideditor input.mixed::-webkit-input-placeholder, .ideditor textarea.mixed::-webkit-input-placeholder {
+ font-style: italic;
+}
+
+.ideditor input.mixed::-moz-placeholder, .ideditor textarea.mixed::-moz-placeholder {
+ font-style: italic;
+}
+
+.ideditor input.mixed:-ms-input-placeholder, .ideditor textarea.mixed:-ms-input-placeholder {
+ font-style: italic;
+}
+
+.ideditor input.mixed::-ms-input-placeholder, .ideditor textarea.mixed::-ms-input-placeholder {
+ font-style: italic;
+}
+
+.ideditor input.mixed::placeholder,
+.ideditor textarea.mixed::placeholder {
+ font-style: italic;
+}
+
+/* keytraps need to be invisible yet not be display:none or visibility:hidden */
+.ideditor .keytrap {
+ width: 0;
+ height: 0;
+ padding: 0;
+ margin: 0;
+ border: 0;
+}
+
+/* tables */
+.ideditor table {
+ background-color: #fff;
+ border-collapse: collapse;
+ width: 100%;
+ border-spacing: 0;
+}
+.ideditor table th {
+ text-align: left;
+}
+.ideditor table.tags, .ideditor table.tags td, .ideditor table.tags th {
+ border: 1px solid #ccc;
+ padding: 4px;
+}
+
+.ideditor ::-ms-clear {
+ display: none;
+}
+
+/* Grid
+------------------------------------------------------- */
+.ideditor .col6 { float: left; width: 50.0000%; max-width: 600px; }
+.ideditor .col12 { float: left; width: 100.0000%; }
+
+
+/* Utility Classes
+------------------------------------------------------- */
+.ideditor .fillL {
+ background: #fff;
+ color: #333;
+}
+.ideditor .fillL2 {
+ background: #f6f6f6;
+ color: #333;
+}
+.ideditor .fillL3 {
+ background: #ececec;
+ color: #333;
+}
+.ideditor .fillD {
+ background: rgba(0,0,0,.5);
+ color: #fff;
+}
+.ideditor .fillD2 {
+ background: rgba(0,0,0,.75);
+ color: #fff;
+}
+
+.ideditor .fl { float: left;}
+.ideditor .fr { float: right;}
+.ideditor .al { left: 0; }
+.ideditor .ar { right: 0; }
+
+.ideditor input.hide,
+.ideditor textarea.hide,
+.ideditor div.hide,
+.ideditor form.hide,
+.ideditor button.hide,
+.ideditor a.hide,
+.ideditor ul.hide,
+.ideditor li.hide {
+ display: none;
+}
+
+.ideditor .deemphasize {
+ color: #a9a9a9;
+}
+.ideditor .content {
+ -webkit-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
+ box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
+}
+.ideditor .loading {
+ background: url(<%= asset_path("iD/img/loader_bg.gif") %>);
+ background-size: 5px 5px;
+}
+
+
+/* Buttons
+------------------------------------------------------- */
+.ideditor button {
+ text-align: center;
+ border: 0;
+ background: #fff;
+ color: #333;
+ font-size: 12px;
+ display: inline-block;
+ border-radius: 4px;
+}
+
+.ideditor button:focus,
+.ideditor button:active,
+.ideditor button.hover {
+ background-color: #ececec;
+}
+@media (hover: hover) {
+ .ideditor button:hover {
+ background-color: #ececec;
+ }
+}
+.ideditor button.active {
+ background: #7092ff;
+}
+.ideditor button.disabled {
+ background-color: rgba(255,255,255,.25);
+ color: rgba(0,0,0,.4);
+ cursor: not-allowed;
+}
+
+.ideditor .joined > * {
+ border-radius: 0;
+ border-right: 1px solid rgba(0,0,0,.5);
+}
+.ideditor[dir='rtl'] .joined > * {
+ border-left: 1px solid rgba(0,0,0,.5);
+ border-right: none;
+}
+
+.ideditor .fillL .joined > * {
+ border-right: 1px solid #fff;
+}
+.ideditor .joined > *:first-child {
+ border-radius: 4px 0 0 4px;
+}
+.ideditor[dir='rtl'] .joined > *:first-child {
+ border-radius: 0 4px 4px 0;
+}
+.ideditor .joined > *:last-child {
+ border-right-width: 0;
+ border-radius: 0 4px 4px 0;
+}
+.ideditor[dir='rtl'] .joined > *.bar-button:last-child {
+ border-radius: 4px 0 0 4px;
+}
+
+
+/* Action buttons */
+.ideditor button.action {
+ background: #7092ff;
+ color: #fff;
+ font-weight: bold;
+}
+.ideditor button.action:focus,
+.ideditor button.action:active {
+ background: #597be7;
+}
+.ideditor button.secondary-action {
+ background: #ececec;
+ font-weight: bold;
+}
+.ideditor button.secondary-action:focus,
+.ideditor button.secondary-action:active {
+ background: #cccccc;
+}
+
+.ideditor button.action.disabled,
+.ideditor button[disabled].action {
+ background: #cccccc;
+ color: #888;
+ cursor: not-allowed;
+}
+
+.ideditor button.action,
+.ideditor button.secondary-action {
+ padding: 10px 5px;
+}
+
+@media (hover: hover) {
+ .ideditor button.action:hover {
+ background: #597be7;
+ }
+ .ideditor button.secondary-action:hover {
+ background: #cccccc;
+ }
+ .ideditor button.action.disabled:hover,
+ .ideditor button[disabled].action:hover {
+ background: #cccccc;
+ color: #888;
+ cursor: not-allowed;
+ }
+}
+
+
+/* Icons
+------------------------------------------------------- */
+.ideditor .icon {
+ vertical-align: middle;
+ width: 20px;
+ height: 20px;
+}
+
+.ideditor .icon.operation use {
+ fill: #222;
+ color: #79f;
+}
+.ideditor button.disabled .icon.operation use,
+.ideditor .icon.operation.disabled use {
+ fill: rgba(32,32,32,.2);
+ color: rgba(40,40,40,.2);
+}
+
+.ideditor .icon.monochrome use {
+ fill: currentColor;
+}
+
+.ideditor .icon.inline {
+ vertical-align: text-top;
+ display: inline-block;
+ width: 1.17em;
+ height: 1.17em;
+ margin: 0px 3px;
+}
+
+.ideditor .icon.pre-text {
+ margin-right: 5px;
+}
+.ideditor[dir='rtl'] .icon.pre-text {
+ margin-left: 5px;
+ margin-right: 0;
+}
+
+.ideditor .icon.pre-text.user-icon {
+ margin-left: 5px;
+ margin-right: 5px;
+}
+
+.ideditor .icon.light {
+ color: #fff;
+ fill: currentColor;
+}
+.ideditor .icon.created {
+ color: #00ca07;
+}
+.ideditor .icon.modified {
+ color: #666;
+}
+.ideditor .icon.deleted {
+ color: #ea0000;
+}
+
+.ideditor .user-icon {
+ max-height: 20px;
+ max-width: 20px;
+ height: auto;
+ width: auto;
+ border-radius: 3px;
+}
+
+.ideditor .icon-annotation {
+ color: #333;
+}
+
+
+/* Toolbar / Persistent UI Elements
+------------------------------------------------------- */
+.ideditor .top-toolbar-wrap {
+ position: relative;
+ z-index: 101;
+}
+.ideditor .top-toolbar {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ padding: 10px 0 0 0;
+ overflow-x: auto;
+ overflow-y: hidden;
+ height: 100%;
+ width: 100%;
+
+ /* hide scrollbar but allow scrolling */
+ scrollbar-width: none; /* Firefox */
+ -ms-overflow-style: none; /* IE, Edge */
+}
+.ideditor .top-toolbar::-webkit-scrollbar {
+ display: none; /* Chrome, Safari, Opera */
+}
+.ideditor .top-toolbar .toolbar-item {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: column wrap;
+ flex-flow: column wrap;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+.ideditor .top-toolbar .toolbar-item .item-content {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ height: 40px;
+ width: auto;
+ margin: 0 5px;
+}
+.ideditor[dir='ltr'] .top-toolbar .toolbar-item:last-child .item-content,
+.ideditor[dir='rtl'] .top-toolbar .toolbar-item:first-child .item-content {
+ margin-right: 10px;
+}
+.ideditor[dir='ltr'] .top-toolbar .toolbar-item:first-child .item-content,
+.ideditor[dir='rtl'] .top-toolbar .toolbar-item:last-child .item-content {
+ margin-left: 10px;
+}
+.ideditor[dir='ltr'] .top-toolbar .toolbar-item:last-child .item-label,
+.ideditor[dir='rtl'] .top-toolbar .toolbar-item:first-child .item-label {
+ padding-right: 5px;
+}
+.ideditor[dir='ltr'] .top-toolbar .toolbar-item:first-child .item-label,
+.ideditor[dir='rtl'] .top-toolbar .toolbar-item:last-child .item-label {
+ padding-left: 5px;
+}
+.ideditor .top-toolbar .toolbar-item .item-label {
+ text-align: center;
+ font-size: 11px;
+ white-space: nowrap;
+ margin: 1px 2px 2px 2px;
+}
+.ideditor .top-toolbar .toolbar-item.spacer {
+ width: 100%;
+ -webkit-box-flex: 2;
+ -ms-flex-positive: 2;
+ flex-grow: 2;
+}
+.ideditor .top-toolbar .toolbar-item:first-child {
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+}
+.ideditor .top-toolbar .toolbar-item:last-child {
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+}
+.ideditor .top-toolbar .toolbar-item:empty:not(.spacer) {
+ display: none;
+}
+.ideditor button.bar-button {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ padding: 0 10px;
+ min-width: 30px;
+ white-space: nowrap;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ font-weight: bold;
+}
+.ideditor button.bar-button .icon {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 20px;
+ flex: 0 0 20px;
+}
+.ideditor button.bar-button .label {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ padding: 0 5px;
+}
+
+.ideditor button.bar-button.dragging {
+ opacity: 0.75;
+ z-index: 200;
+}
+.ideditor button.bar-button.dragging .tooltip {
+ display: none;
+}
+.ideditor button.bar-button.dragging.removing {
+ cursor: url(<%= asset_path("iD/img/cursor-select-remove.png") %>), pointer;
+}
+
+.ideditor button.save .count {
+ display: inline-block;
+ min-width: 32px;
+ text-align: center;
+}
+
+.ideditor .help-pane svg.icon.inline.add-note,
+.ideditor button.add-note svg.icon {
+ height: 15px;
+ width: 15px;
+ color: rgba(0,0,0,0.25);
+ stroke: #333;
+ stroke-width: 60px;
+ margin-top: 3px;
+}
+.ideditor button.add-note svg.icon {
+ margin-left: unset;
+ margin-right: 4px;
+}
+.ideditor[dir='rtl'] button.add-note svg.icon {
+ margin-left: 4px;
+ margin-right: unset;
+}
+.ideditor .help-pane svg.icon.inline.add-note {
+ margin-left: 3px;
+ margin-right: 3px;
+}
+
+.ideditor .spinner {
+ opacity: .5;
+ position: absolute;
+ right: 4px;
+ bottom: 4px;
+ height: 20px;
+ width: 20px;
+}
+.ideditor .spinner img {
+ height: 100%;
+ width: 100%;
+ background: transparent;
+ border-radius: 100%;
+}
+.ideditor[dir='rtl'] .spinner img {
+ -webkit-transform: scaleX(-1);
+ -ms-transform: scaleX(-1);
+ transform: scaleX(-1);
+ -webkit-filter: FlipH;
+ filter: FlipH;
+ -ms-filter: "FlipH";
+}
+
+
+.ideditor .top-toolbar.narrow .spinner,
+.ideditor .top-toolbar.narrow button.bar-button .label {
+ display: none;
+}
+.ideditor .top-toolbar.narrow button .count {
+ border-left-width: 0;
+ border-right-width: 0;
+}
+
+.ideditor[dir='ltr'] .undo-redo button:first-of-type {
+ margin-right: 1px;
+}
+.ideditor[dir='rtl'] .undo-redo button:first-of-type {
+ margin-left: 1px;
+}
+
+/* Header for modals / panes
+------------------------------------------------------- */
+.ideditor .header {
+ border-bottom: 1px solid #ccc;
+ padding: 20px 40px;
+ position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+}
+
+.ideditor .header h3 {
+ text-align: center;
+ margin-bottom: 0;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ padding: 0;
+}
+
+.ideditor .header button,
+.ideditor .modal > button {
+ border-radius: 0;
+ width: 40px;
+ text-align: center;
+ overflow: hidden;
+}
+
+.ideditor .header button {
+ position: relative;
+ height: 100%;
+}
+
+.ideditor .field-help-title button.close,
+.ideditor .sidebar .header button.close,
+.ideditor .preset-list-pane .header button.preset-choose {
+ position: absolute;
+ right: 0;
+ top: 0;
+}
+.ideditor[dir='rtl'] .field-help-title button.close,
+.ideditor[dir='rtl'] .sidebar .header button.close,
+.ideditor[dir='rtl'] .preset-list-pane .header button.preset-choose {
+ left: 0;
+ right: auto;
+}
+
+.ideditor .entity-editor-pane .header button.preset-choose {
+ position: absolute;
+ left: 0;
+ top: 0;
+}
+.ideditor[dir='rtl'] .entity-editor-pane .header button.preset-choose {
+ left: auto;
+ right: 0;
+}
+
+.ideditor .preset-choose {
+ font-size: 16px;
+ line-height: 1.25;
+ font-weight: bold;
+}
+
+.ideditor .modal > button {
+ position: absolute;
+ right: 0;
+ top: 0;
+ height: 59px;
+ z-index: 50;
+}
+.ideditor[dir='rtl'] .modal > button {
+ left: 0;
+ right: unset;
+}
+
+.ideditor .footer {
+ position: absolute;
+ bottom: 0;
+ margin: 0;
+ padding: 0 15px;
+ border-top: 1px solid #ccc;
+ background-color: #f6f6f6;
+ width: 100%;
+ height: 2.5em;
+ z-index: 1;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ list-style: none;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.ideditor .footer > a {
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+
+/* Hide/Toggle collapsible sections (aka Disclosure)
+------------------------------------------------------- */
+.ideditor .hide-toggle .icon.pre-text {
+ vertical-align: middle;
+ width: 16px;
+ height: 16px;
+ margin-top: -3px;
+}
+
+.ideditor a:visited.hide-toggle,
+.ideditor a.hide-toggle {
+ display: inline-block;
+ font-size: 14px;
+ font-weight: bold;
+ margin-bottom: 5px;
+}
+
+
+/* Sidebar / Inspector
+------------------------------------------------------- */
+.ideditor .sidebar {
+ position: relative;
+ float: left;
+ height: 100%;
+ z-index: 10;
+ background: #f6f6f6;
+ -ms-user-select: element;
+ border: 0px solid #ccc;
+ border-right-width: 1px;
+}
+.ideditor[dir='rtl'] .sidebar {
+ float: right;
+ border-right-width: 0px;
+ border-left-width: 1px;
+}
+
+.ideditor .sidebar-resizer {
+ position: absolute;
+ top: 0;
+ right: -10px;
+ width: 10px;
+ height: 100%;
+ cursor: col-resize;
+ /* disable drag-to-select */
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.ideditor[dir='rtl'] .sidebar-resizer {
+ right: auto;
+ left: -6px;
+}
+
+.ideditor .sidebar.collapsed > *:not(.sidebar-resizer) {
+ display: none;
+}
+.ideditor .sidebar.collapsed .sidebar-resizer {
+ /* make target wider to avoid the user accidentally resizing window */
+ width: 10px;
+ right: -10px;
+}
+.ideditor[dir='rtl'] .sidebar.collapsed .sidebar-resizer {
+ left: -10px;
+}
+
+.ideditor .sidebar-component {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
+.ideditor .sidebar-component .body {
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ position: relative;
+}
+
+.ideditor .panewrap {
+ position: absolute;
+ width: 200%;
+ height: 100%;
+ right: -100%;
+}
+
+.ideditor .pane {
+ position: absolute;
+ width: 50%;
+ top: 0;
+ bottom: 2.5em;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
+.ideditor .pane:first-child {
+ left: 0;
+}
+
+.ideditor .pane:last-child {
+ right: 0;
+}
+.ideditor .feature-list-pane {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ height: 100%;
+}
+
+.ideditor .inspector-wrap {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ position: relative;
+}
+
+.ideditor .inspector-hidden {
+ display: none;
+}
+
+.ideditor .inspector-body {
+ overflow-y: scroll;
+ overflow-x: hidden;
+ position: relative;
+ height: 100%;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
+}
+.ideditor .entity-editor {
+ padding: 20px;
+}
+/* preserve extra space at bottom of inspector to allow for dropdown options - #5280 */
+.ideditor .entity-editor > div:last-child {
+ margin-bottom: 150px;
+}
+
+.ideditor .sidebar .search-header {
+ position: relative;
+ overflow: hidden;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+}
+.ideditor .sidebar .search-header .icon {
+ display: inline-block;
+ position: absolute;
+ left: 10px;
+ height: 100%;
+ pointer-events: none;
+}
+.ideditor[dir='rtl'] .sidebar .search-header .icon {
+ left: auto;
+ right: 10px;
+}
+
+.ideditor .sidebar .search-header input {
+ width: 100%;
+ padding: 0 10px;
+ height: 3em;
+ border-radius: 0;
+ border-width: 0;
+ border-bottom-width: 1px;
+ text-indent: 30px;
+ font-size: 18px;
+ font-weight: bold;
+}
+
+.ideditor .section:not(:last-child),
+.ideditor .map-pane .section {
+ margin-bottom: 30px;
+}
+
+
+/* Feature List / Search Results
+------------------------------------------------------- */
+.ideditor .feature-list {
+ width: 100%;
+}
+.ideditor .no-results-item,
+.ideditor .feature-list-item {
+ width: 100%;
+ position: relative;
+ border-bottom: 1px solid #ccc;
+ border-radius: 0;
+}
+.ideditor .no-results-item {
+ padding: 10px;
+ font-weight: bold;
+}
+
+.ideditor .geocode-item {
+ width: 100%;
+ max-width: 200px;
+ margin: 30px auto;
+ min-height: 40px;
+}
+
+.ideditor .feature-list-item {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.ideditor .feature-list-item .label {
+ text-align: left;
+ padding: 10px;
+ white-space: nowrap;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+}
+.ideditor[dir='rtl'] .feature-list-item .label {
+ text-align: right;
+}
+
+.ideditor .feature-list-item .label .icon {
+ opacity: .5;
+}
+.ideditor .feature-list-item .close {
+ padding: 10px;
+
+}
+.ideditor .feature-list-item .close .icon {
+ opacity: 0.5;
+}
+.ideditor .feature-list-item .entity-type {
+ color: #7092ff;
+ font-weight: bold;
+}
+.ideditor .feature-list-item:active .entity-type,
+.ideditor .feature-list-item:focus .entity-type {
+ color: #597be7;
+}
+@media (hover: hover) {
+ .ideditor .feature-list-item:hover .entity-type {
+ color: #597be7;
+ }
+}
+.ideditor .feature-list-item .entity-name {
+ color: #666;
+ padding-left: 10px;
+}
+.ideditor[dir='rtl'] .feature-list-item .entity-name {
+ padding-left: 0;
+ padding-right: 10px;
+}
+.ideditor .section-selected-features .feature-list {
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ overflow: hidden;
+ margin-top: 5px;
+}
+.ideditor .section-selected-features .feature-list-item:last-child {
+ border: none;
+}
+.ideditor[dir='ltr'] .section-selected-features .feature-list-item > button:not(:first-child) {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+.ideditor[dir='rtl'] .section-selected-features .feature-list-item > button:not(:last-child) {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+.ideditor[dir='ltr'] .section-selected-features .feature-list-item > button:not(:last-child) {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+.ideditor[dir='rtl'] .section-selected-features .feature-list-item > button:not(:last-child) {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+/* Preset List and Icons
+------------------------------------------------------- */
+.ideditor .preset-list {
+ width: 100%;
+ padding: 20px 20px 10px 20px;
+}
+
+.ideditor .preset-list-item {
+ margin-bottom: 10px;
+ position: static;
+}
+
+.ideditor .preset-list-button-wrap {
+ min-height: 62px;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+}
+
+.ideditor .preset-list-button {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.ideditor .preset-list.filtered .preset-list-item:first-child .preset-list-button {
+ background: #ececec;
+}
+
+.ideditor .preset-icon-container {
+ position: relative;
+ width: 60px;
+ height: 60px;
+ text-align: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+}
+.ideditor .preset-icon-container.small {
+ width: 40px;
+ height: 40px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+}
+.ideditor .preset-icon-container img.image-icon {
+ width: 50px;
+ height: 50px;
+ -o-object-fit: contain;
+ object-fit: contain;
+ border-radius: 2px;
+ z-index: 2;
+ visibility: hidden;
+}
+.ideditor .preset-icon-container.showing-img img.image-icon {
+ visibility: visible;
+}
+.ideditor .preset-icon-container.showing-img *:not(.image-icon) {
+ display: none;
+}
+
+.ideditor .preset-icon-point-border path {
+ stroke: #333;
+ stroke-width: 1.2;
+ fill: transparent;
+}
+
+.ideditor .preset-icon-category-border path {
+ stroke: #999;
+ stroke-width: 1px;
+ fill: transparent;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+ vector-effect: non-scaling-stroke;
+}
+
+.ideditor .preset-icon-line {
+ margin: auto;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+}
+.ideditor .preset-icon-container path {
+ cursor: inherit;
+}
+.ideditor .preset-icon-container circle.vertex {
+ fill: #fff;
+ stroke: rgba(0, 0, 0, 0.25);
+}
+.ideditor .preset-icon-fill circle.midpoint {
+ fill: transparent;
+ stroke: rgba(0, 0, 0, 0.25);
+}
+/* use a consistent stroke width */
+.ideditor .preset-icon-container path.line.stroke {
+ stroke-width: 2 !important;
+}
+.ideditor .preset-icon-container path.line.casing {
+ stroke-width: 4 !important;
+}
+
+.ideditor .preset-icon-fill {
+ margin: auto;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+}
+.ideditor .preset-icon-container svg,
+.ideditor .preset-icon-container svg > * {
+ cursor: inherit !important;
+}
+.ideditor .preset-icon-fill path.area.stroke {
+ fill: transparent;
+}
+
+.ideditor .preset-icon-fill-vertex circle {
+ stroke-width: 1.5px;
+ stroke: #333;
+ fill: #efefef;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+}
+
+.ideditor .preset-icon {
+ width: 100%;
+ height:100%;
+ position: absolute;
+ z-index: 1;
+}
+.ideditor .preset-icon .icon {
+ position: absolute;
+ margin: auto;
+ left: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ -webkit-transform: scale(0.48);
+ -ms-transform: scale(0.48);
+ transform: scale(0.48);
+}
+.ideditor .preset-icon-container.small .preset-icon.point-geom .icon {
+ -webkit-transform: translateY(-7%) scale(0.27);
+ -ms-transform: translateY(-7%) scale(0.27);
+ transform: translateY(-7%) scale(0.27);
+}
+.ideditor .preset-icon-container.small .preset-icon.point-geom.preset-icon-iD .icon {
+ -webkit-transform: translateY(-9%) scale(0.5);
+ -ms-transform: translateY(-9%) scale(0.5);
+ transform: translateY(-9%) scale(0.5);
+}
+.ideditor .preset-icon.framed .icon {
+ -webkit-transform: scale(0.4);
+ -ms-transform: scale(0.4);
+ transform: scale(0.4);
+}
+.ideditor .preset-icon.framed.line-geom:not(.category) .icon,
+.ideditor .preset-icon.framed.route-geom .icon {
+ top: 20%;
+ -webkit-transform: translateY(-30%) scale(0.4);
+ -ms-transform: translateY(-30%) scale(0.4);
+ transform: translateY(-30%) scale(0.4);
+}
+.ideditor .preset-icon-iD .icon {
+ -webkit-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+}
+.ideditor .preset-icon-iD.framed .icon {
+ -webkit-transform: scale(0.74);
+ -ms-transform: scale(0.74);
+ transform: scale(0.74);
+}
+.ideditor .preset-icon-iD.framed.line-geom:not(.category) .icon,
+.ideditor .preset-icon-iD.framed.route-geom .icon {
+ -webkit-transform: translateY(-30%) scale(0.74);
+ -ms-transform: translateY(-30%) scale(0.74);
+ transform: translateY(-30%) scale(0.74);
+}
+.ideditor .preset-icon-container.fallback .preset-icon .icon {
+ -webkit-transform: scale(0.5) !important;
+ -ms-transform: scale(0.5) !important;
+ transform: scale(0.5) !important;
+}
+
+.ideditor .preset-list-button .label {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ background: #f6f6f6;
+ text-align: left;
+ padding: 5px 10px;
+ border-left: 1px solid rgba(0, 0, 0, .1);
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
+ -ms-flex-item-align: stretch;
+ align-self: stretch;
+}
+.ideditor[dir='rtl'] .preset-list-button .label {
+ text-align: right;
+ border-left: none;
+ border-right: 1px solid rgba(0, 0, 0, .1);
+}
+.ideditor[dir='ltr'] .preset-list-item.mixed-types .preset-list-button .label {
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+}
+.ideditor[dir='rtl'] .preset-list-item.mixed-types .preset-list-button .label {
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+}
+.ideditor[dir='ltr'] .category .preset-list-button .label {
+ border-radius: 0px 4px 4px 0px;
+}
+.ideditor[dir='rtl'] .category .preset-list-button .label {
+ border-radius: 4px 0px 0px 4px;
+}
+
+.ideditor .preset-list-item.mixed-types .label {
+ font-style: italic;
+}
+
+.ideditor .preset-list-button .label-inner {
+ width: 100%;
+ line-height: 1.35em;
+}
+.ideditor .preset-list-button .label-inner .namepart {
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+}
+.ideditor .preset-list-button .label-inner .namepart:nth-child(1) {
+ font-weight: bold;
+}
+
+.ideditor .preset-list-button:focus .label,
+.ideditor .preset-list-button:active .label,
+.ideditor .preset-list-button.disabled,
+.ideditor .preset-list-button.disabled .label {
+ background-color: #ececec;
+}
+@media (hover: hover) {
+ .ideditor .preset-list-button:hover .label {
+ background-color: #ececec;
+ }
+}
+
+.ideditor .preset-list-button-wrap button.tag-reference-button {
+ width: 32px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+}
+.ideditor .preset-list-button-wrap button.tag-reference-button:not(:hover):not(:active):not(:focus) {
+ background: #f6f6f6;
+}
+.ideditor[dir='ltr'] .preset-list-button-wrap button.tag-reference-button {
+ border-left: 1px solid #ccc;
+}
+.ideditor[dir='rtl'] .preset-list-button-wrap button.tag-reference-button {
+ border-right: 1px solid #ccc;
+}
+.ideditor[dir='ltr'] .preset-list-button-wrap:not(.category) button:last-child {
+ border-radius: 0 4px 4px 0;
+}
+.ideditor[dir='rtl'] .preset-list-button-wrap:not(.category) button:last-child {
+ border-radius: 4px 0 0 4px;
+}
+.ideditor .preset-list-button-wrap button.tag-reference-button .icon {
+ opacity: .5;
+}
+.ideditor .preset-list-button-wrap .accessory-buttons {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+
+.ideditor .current .preset-list-button,
+.ideditor .current .preset-list-button .label {
+ background-color: #e8ebff;
+}
+
+.ideditor .category .preset-list-button:after,
+.ideditor .category .preset-list-button:before {
+ content: "";
+ position: absolute;
+ top: -5px;
+ left: -1px; right: -1px;
+ border: 1px solid #ccc;
+ border-bottom: none;
+ border-radius: 6px 6px 0 0;
+ height: 6px;
+}
+
+.ideditor .category .preset-list-button:before {
+ top: -3px;
+}
+
+.ideditor .subgrid .preset-list {
+ width: auto;
+ padding: 10px;
+ margin: 0 -10px;
+ border: 0;
+ border-radius: 8px;
+}
+.ideditor .subgrid .preset-list > *:last-child {
+ margin-bottom: 0;
+}
+
+.ideditor .subgrid .arrow {
+ border: solid rgba(0, 0, 0, 0);
+ border-width: 10px;
+ border-bottom-color: #ececec;
+ width: 0;
+ height: 0;
+ margin-left: 50%;
+ margin-left: calc(50% - 10px);
+}
+
+
+/* Quick links
+------------------------------------------------------- */
+.ideditor .quick-links {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ padding: 5px 0 0 0;
+}
+.ideditor .quick-link {
+ margin: 0 5px;
+}
+
+
+/* Entity/Preset Editor
+------------------------------------------------------- */
+.ideditor .section .grouped-items-area {
+ padding: 10px;
+ margin: 0 -10px 10px -10px;
+ border-radius: 8px;
+ background: #ececec;
+}
+.ideditor .section .grouped-items-area:empty {
+ display: none;
+}
+
+/*
+ The parts of a field:
+ - `.form-field` is a `div` wraps the entire thing
+ - `.field-label` is a `label` that wraps the top part, it contains;
+ - `span` classed `label-text`
+ - 0..n buttons for "remove", "modified", "tag reference"
+ - `.form-field-input-wrap` is a `label` or `div` that wraps the bottom part, it contains;
+ - usually an `input`
+ - sometimes some buttons (translate, increment, decrement)
+ - or could just be a `div` with anything really
+ - `.tag-reference-body` at the bottom (usually hidden)
+
+ .------------------. -
+ | Name | i | <- .field-label |
+ +------------------+ |
+ | Starbucks | + | <- .form-field-input-wrap > .form-field
+ '------------------' |
+ tag reference <- .tag-reference-body |
+ -
+*/
+
+.ideditor .form-field {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ margin-bottom: 10px;
+ width: 100%;
+ -webkit-transition: margin-bottom 200ms;
+ -o-transition: margin-bottom 200ms;
+ transition: margin-bottom 200ms;
+}
+
+.ideditor .form-field.nowrap,
+.ideditor .wrap-form-field:last-child .form-field {
+ margin-bottom: 0;
+}
+
+/* A `label` element that wraps the top section */
+.ideditor .field-label {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
+ position: relative;
+ font-weight: bold;
+ color: #333;
+ background: #f6f6f6;
+ border: 1px solid #ccc;
+ border-radius: 4px 4px 0 0;
+ overflow: hidden;
+}
+.ideditor .field-label .label-text {
+ overflow: hidden;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ padding: 5px 0 4px 10px;
+}
+.ideditor[dir='rtl'] .field-label .label-text {
+ padding: 5px 10px 4px 0;
+}
+.ideditor .field-label .label-text span {
+ white-space: nowrap;
+}
+
+.ideditor .label-text .label-textannotation svg.icon {
+ margin: 0 8px;
+ color: #333;
+ opacity: 0.5;
+ width: 14px;
+ height: 14px;
+ vertical-align: text-top;
+}
+
+.ideditor .field-label button {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ border-left: 1px solid #ccc;
+ width: 32px;
+ border-radius: 0;
+}
+.ideditor[dir='rtl'] .field-label button {
+ border-left: none;
+ border-right: 1px solid #ccc;
+}
+.ideditor .field-label button:not(:hover):not(:active):not(:focus) {
+ background: none;
+}
+.ideditor .field-label .icon {
+ opacity: .5;
+
+}
+
+.ideditor .field-label .modified-icon,
+.ideditor .field-label .remove-icon,
+.ideditor .field-label .remove-icon-multilingual {
+ display: none;
+}
+.ideditor .modified:not(.locked) .field-label .modified-icon,
+.ideditor .present:not(.locked) .field-label .remove-icon,
+.ideditor .present:not(.locked) .field-label .remove-icon-multilingual {
+ display: inline-block;
+}
+
+/* A `div` element that wraps the bottom section */
+.ideditor .form-field-input-wrap {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ width: 100%;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ border-top: 0;
+ border-radius: 0 0 4px 4px;
+}
+.ideditor .nowrap .form-field-input-wrap {
+ border-radius: 0;
+}
+
+
+.ideditor .form-field-input-wrap > input,
+.ideditor .form-field-input-wrap > label,
+.ideditor .form-field-input-wrap > textarea,
+.ideditor .form-field-input-wrap > ul.chiplist {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ border: 1px solid #ccc;
+ border-top: 0;
+ border-radius: 0;
+ position: relative;
+}
+.ideditor .form-field-input-wrap > textarea {
+ height: 65px;
+ border-radius: 0 0 4px 4px;
+}
+
+/* Buttons inside fields */
+.ideditor .form-field-button {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ width: 32px;
+ position: relative;
+ background-color: #fff;
+ border: 1px solid #ccc;
+ border-radius: 0;
+ border-top-width: 0;
+ border-left-width: 0;
+ vertical-align: top;
+}
+.ideditor[dir='rtl'] .form-field-button {
+ border-left-width: 1px;
+ border-right-width: 0;
+}
+.ideditor .form-field-button:active,
+.ideditor .form-field-button:focus {
+ background-color: #f1f1f1;
+}
+@media (hover: hover) {
+ .ideditor .form-field-button:hover {
+ background-color: #f1f1f1;
+ }
+}
+.ideditor .form-field-button .icon {
+ fill: #333;
+ opacity: .5;
+}
+.ideditor .form-field-button.colour-preview {
+ border-radius: 0 0 4px 0;
+}
+.ideditor .form-field-button.colour-preview > div.colour-box {
+ border: 3px solid #fff;
+ height: 100%;
+ border-radius: 8px;
+ cursor: pointer;
+ text-align: center;
+ line-height: 20px;
+ padding: 1px 0 0 1px;
+}
+.ideditor .inspector-hover .form-field-button.colour-preview > div.colour-box {
+ border-color: #ececec;
+}
+.ideditor .form-field-button.colour-preview:active > div.colour-box,
+.ideditor .form-field-button.colour-preview:focus > div.colour-box {
+ border-color: #f1f1f1;
+}
+@media (hover: hover) {
+ .ideditor .form-field-button.colour-preview:hover > div.colour-box {
+ border-color: #f1f1f1;
+ }
+}
+.ideditor .form-field-button.colour-selector {
+ visibility: hidden;
+ position: absolute;
+}
+
+
+/* round corners of first/last child elements */
+.ideditor .form-field-input-wrap > button:last-of-type {
+ border-bottom-right-radius: 4px;
+}
+.ideditor[dir='rtl'] .form-field-input-wrap > button:last-of-type {
+ border-bottom-left-radius: 4px;
+}
+
+
+/* Field - Access, Cycleway
+------------------------------------------------------- */
+.ideditor .form-field-input-access,
+.ideditor .form-field-input-cycleway {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+}
+
+/* Field - lists with labeled input items
+------------------------------------------------------- */
+.ideditor .form-field ul.rows {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ border: 1px solid #ccc;
+ border-top: 0;
+ border-radius: 0 0 4px 4px;
+ overflow: hidden;
+ width: 100%;
+}
+.ideditor .form-field ul.rows li {
+ border-top: 1px solid #ccc;
+}
+.ideditor .form-field ul.rows li:first-child {
+ border-top: 0;
+}
+.ideditor .form-field ul.rows li {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+}
+.ideditor .form-field ul.rows li.labeled-input > span,
+.ideditor .form-field ul.rows li.labeled-input > div {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ width: 100%;
+ border-radius: 0;
+}
+.ideditor .form-field ul.rows li input {
+ border-radius: 0;
+ border-width: 0;
+ width: 100%;
+}
+.ideditor .form-field ul.rows li button {
+ border-width: 0;
+}
+.ideditor[dir='ltr'] .form-field ul.rows li.labeled-input input,
+.ideditor[dir='ltr'] .form-field ul.rows li button {
+ border-left-width: 1px;
+}
+.ideditor[dir='rtl'] .form-field ul.rows li.labeled-input input,
+.ideditor[dir='rtl'] .form-field ul.rows li button {
+ border-right-width: 1px;
+}
+
+
+/* Field - Structure
+------------------------------------------------------- */
+.ideditor .structure-extras-wrap {
+ width: 100%;
+ padding: 10px 10px;
+ background: #fff;
+ border: 1px solid #ccc;
+ border-top: 0px;
+ border-radius: 0 0 4px 4px;
+}
+.ideditor .structure-extras-wrap > ul.rows {
+ border: 1px solid #ccc;
+ border-radius: 4px;
+}
+
+
+/* Field - Combo / Multicombo
+------------------------------------------------------- */
+.ideditor .form-field-input-combo > input:only-of-type {
+ border-radius: 0 0 4px 4px;
+ width: 100%;
+}
+.ideditor .form-field-input-combo.empty-combobox input,
+.ideditor .form-field-input-multicombo .empty-combobox input {
+ padding-right: 10px;
+ padding-left: 10px;
+}
+.ideditor .form-field-input-combo.empty-combobox .combobox-caret,
+.ideditor .form-field-input-multicombo .empty-combobox .combobox-caret {
+ display: none;
+}
+
+.ideditor .form-field-input-combo input.raw-value {
+ font-family: monospace;
+}
+.ideditor .form-field-input-combo input.known-value {
+ color: #7092ff;
+}
+
+.ideditor .form-field-input-multicombo ul.chiplist {
+ padding: 5px 8px 5px 8px;
+ background: #fff;
+ display: block;
+ border-radius: 0 0 4px 4px;
+ width: 100%;
+}
+
+.ideditor .form-field-input-multicombo li {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ margin-bottom: 3px;
+ margin-top: 3px;
+ border-radius: 4px;
+}
+.ideditor[dir='ltr'] .form-field-input-multicombo li {
+ margin-right: 6px;
+}
+.ideditor[dir='rtl'] .form-field-input-multicombo li {
+ margin-left: 6px;
+}
+
+.ideditor .form-field-input-multicombo li.chip {
+ background-color: #eff2f7;
+ border: 1px solid #ccd5e3;
+ max-width: 100%;
+ color: #7092ff;
+}
+.ideditor[dir='ltr'] .form-field-input-multicombo li.chip {
+ padding: 2px 0px 2px 5px;
+}
+.ideditor[dir='rtl'] .form-field-input-multicombo li.chip {
+ padding: 2px 5px 2px 0px;
+}
+.ideditor .form-field-input-multicombo li.chip.draggable {
+ cursor: -webkit-grab;
+ cursor: grab;
+}
+.ideditor .form-field-input-multicombo li.chip.dragging {
+ opacity: 0.75;
+ z-index: 3000;
+ cursor: -webkit-grabbing;
+ cursor: grabbing;
+}
+.ideditor .form-field-input-multicombo li.chip.raw-value {
+ font-family: monospace;
+ color: #333;
+}
+.ideditor .form-field-input-multicombo li.mixed {
+ border-color: #eff2f7;
+ color: #888;
+ font-style: italic;
+}
+
+.ideditor .form-field-input-multicombo li.chip span {
+ display: block;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ overflow: hidden;
+ word-wrap: break-word;
+}
+
+.ideditor .form-field-input-multicombo a {
+ font-family: Arial, Helvetica, sans-serif !important;
+ font-size: 16px !important;
+ padding: 0px 5px 0px 5px;
+ margin: 0;
+ cursor: pointer;
+ color: #a6b4ce;
+ display: block;
+ text-align: center;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+}
+
+.ideditor .form-field-input-multicombo .input-wrap {
+ border: 1px solid #ddd;
+ width: 100px;
+}
+.ideditor .form-field-input-multicombo input {
+ border: none;
+ width: 100%;
+}
+
+.ideditor .form-field-input-multicombo input:focus {
+ border-radius: 4px !important;
+}
+
+.ideditor .form-field-input-multicombo .full-line-chips li.chip {
+ width: 100%;
+}
+.ideditor .form-field-input-multicombo .full-line-chips .input-wrap {
+ width: auto;
+}
+
+
+/* Field - Text / Numeric
+------------------------------------------------------- */
+.ideditor .form-field-input-text > input:only-child,
+.ideditor .form-field-input-tel > input:only-of-type,
+.ideditor .form-field-input-email > input:only-of-type,
+.ideditor .form-field-input-url > input:only-child {
+ border-radius: 0 0 4px 4px;
+}
+.ideditor .form-field-input-text > input:not(:only-child),
+.ideditor .form-field-input-url > input:not(:only-child) {
+ border-radius: 0 0 0 4px;
+}
+.ideditor .form-field-input-number > input:only-of-type {
+ border-radius: 0 0 0 4px;
+}
+.ideditor[dir='rtl'] .form-field-input-number > input:only-of-type {
+ border-radius: 0 0 4px 0;
+}
+.ideditor .form-field-input-number > button:last-of-type {
+ border-radius: 0 0 4px 0;
+}
+.ideditor[dir='rtl'] .form-field-input-number > button:last-of-type {
+ border-radius: 0 0 0 4px;
+}
+
+.ideditor[dir='ltr'] .form-field-input-identifier > input:last-child,
+.ideditor[dir='rtl'] .form-field-input-identifier > input:first-child,
+.ideditor[dir='ltr'] .form-field-input-identifier > button {
+ border-bottom-right-radius: 4px;
+}
+.ideditor[dir='ltr'] .form-field-input-identifier > input:first-child,
+.ideditor[dir='rtl'] .form-field-input-identifier > input:last-child,
+.ideditor[dir='rtl'] .form-field-input-identifier > button {
+ border-bottom-left-radius: 4px;
+}
+
+/* draw the up/down on the buttons */
+.ideditor .form-field-input-number button.decrement::after,
+.ideditor .form-field-input-number button.increment::after {
+ content: "";
+ height: 0; width: 0;
+ position: absolute;
+ left: 0; right: 0; bottom: 0; top: 0;
+ margin: auto;
+}
+.ideditor .form-field-input-number button.decrement::after {
+ border-top: 5px solid #ccc;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+}
+.ideditor .form-field-input-number button.increment::after {
+ border-bottom: 5px solid #ccc;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+}
+
+
+/* Field - Checkbox
+------------------------------------------------------- */
+.ideditor .form-field-input-check {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ background: #fff;
+ padding: 5px 10px;
+ color: #7092ff;
+ border: 1px solid #ccc;
+ border-top: 0;
+ cursor: pointer;
+}
+.ideditor .form-field-input-check > input[type="checkbox"] {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ width: 20px;
+ margin-top: 0;
+}
+.ideditor .form-field-input-check > span {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+}
+.ideditor .form-field-input-check > span.mixed {
+ font-style: italic;
+}
+.ideditor .form-field-input-check > .reverser {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ background-color: #eff2f7;
+ border: 1px solid #ccd5e3;
+ border-radius: 2px;
+ padding: 0px 8px;
+ color: inherit;
+}
+.ideditor[dir='ltr'] .form-field-input-check > .reverser {
+ padding-right: 2px;
+}
+.ideditor[dir='rtl'] .form-field-input-check > .reverser {
+ padding-left: 2px;
+}
+.ideditor .form-field-input-check > .reverser:active,
+.ideditor .form-field-input-check > .reverser:focus {
+ background: #e3e8ef;
+}
+@media (hover: hover) {
+ .ideditor .form-field-input-check > .reverser:hover {
+ background: #e3e8ef;
+ }
+}
+.ideditor .form-field-input-check > .reverser.hide {
+ display: none;
+}
+.ideditor .form-field-input-check:active,
+.ideditor .form-field-input-check:focus {
+ background: #f1f1f1;
+}
+@media (hover: hover) {
+ .ideditor .form-field-input-check:hover {
+ background: #f1f1f1;
+ }
+}
+.ideditor .form-field-input-check .set {
+ color: inherit;
+}
+.ideditor .form-field-input-check label:not(.set) input[type="checkbox"] {
+ opacity: .5;
+}
+
+
+/* Field - Radio button
+------------------------------------------------------- */
+.ideditor .form-field-input-radio {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+}
+.ideditor .form-field-input-radio > label {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ width: 100%;
+ padding: 5px 10px;
+ background-color: #fff;
+ color: #7092ff;
+ cursor: pointer;
+}
+.ideditor .form-field-input-radio > label.mixed {
+ font-style: italic;
+}
+.ideditor .form-field-input-radio > label:last-child {
+ border-radius: 0 0 4px 4px;
+}
+.ideditor .form-field-input-radio > label:active,
+.ideditor .form-field-input-radio > label:focus {
+ background-color: #ececec;
+}
+@media (hover: hover) {
+ .ideditor .form-field-input-radio > label:hover {
+ background-color: #ececec;
+ }
+}
+.ideditor .form-field-input-radio > label.active {
+ background-color: #e8ebff;
+}
+.ideditor .form-field-input-radio > label:not(:last-of-type) {
+ border-bottom: 1px solid #ccc;
+}
+.ideditor .form-field-input-radio > label > input[type="radio"] {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ width: 20px;
+}
+.ideditor .form-field-input-radio > label > span {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ overflow: hidden;
+ white-space: nowrap;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+}
+
+/* Hide placeholder for radio buttons if another is active, or not in hover state */
+.ideditor .form-field-input-radio label.active ~ .placeholder,
+.ideditor .form-field-input-radio .placeholder {
+ padding: 0;
+ opacity: 0;
+ width: 0;
+ height: 0;
+ display: block;
+ overflow: hidden;
+}
+
+
+/* Field - roadheight and roadspeed
+------------------------------------------------------- */
+.ideditor .form-field-input-roadheight input.roadheight-number,
+.ideditor .form-field-input-roadheight input.roadheight-secondary-number,
+.ideditor .form-field-input-roadspeed input.roadspeed-number {
+ -ms-flex-preferred-size: 0;
+ flex-basis: 0;
+}
+.ideditor .form-field-input-roadheight input.roadheight-unit,
+.ideditor .form-field-input-roadheight input.roadheight-secondary-unit {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ width: 60px;
+}
+.ideditor .form-field-input-roadspeed input.roadspeed-unit {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ width: 80px;
+}
+.ideditor[dir='ltr'] .form-field-input-roadheight > input:first-of-type,
+.ideditor[dir='ltr'] .form-field-input-roadspeed > input:first-of-type {
+ border-radius: 0 0 0 4px;
+}
+.ideditor[dir='rtl'] .form-field-input-roadheight > input:first-of-type,
+.ideditor[dir='rtl'] .form-field-input-roadspeed > input:first-of-type {
+ border-radius: 0 0 4px 0;
+}
+.ideditor[dir='ltr'] .form-field-input-roadheight > input:last-of-type,
+.ideditor[dir='ltr'] .form-field-input-roadspeed > input:last-of-type {
+ border-left: 0;
+ border-radius: 0 0 4px 0;
+}
+.ideditor[dir='rtl'] .form-field-input-roadheight > input:last-of-type,
+.ideditor[dir='rtl'] .form-field-input-roadspeed > input:last-of-type {
+ border-right: 0;
+ border-radius: 0 0 0 4px;
+}
+
+
+/* Field - Localized Name
+------------------------------------------------------- */
+.ideditor .form-field-input-localized > input.localized-main {
+ border-radius: 0 0 0 4px;
+}
+.ideditor[dir='rtl'] .form-field-input-localized > input.localized-main {
+ border-radius: 0 0 4px 0;
+}
+.ideditor .form-field-input-localized > button.localized-add {
+ border-radius: 0 0 4px 0;
+}
+.ideditor[dir='rtl'] .form-field-input-localized > button.localized-add {
+ border-radius: 0 0 0 4px;
+}
+
+.ideditor .form-field-input-localized button.localized-add.disabled,
+.ideditor .form-field-input-localized input.localized-main.disabled,
+.ideditor .form-field-input-localized input.localized-lang.disabled,
+.ideditor .form-field-input-localized input.localized-value.disabled {
+ color: #777;
+ background-color: #eee;
+ cursor: not-allowed;
+}
+
+/* nested subfields for name in different languages */
+.ideditor .localized-multilingual {
+ padding: 0 10px;
+ -ms-flex-preferred-size: 100%;
+ flex-basis: 100%;
+}
+.ideditor .localized-multilingual .entry {
+ position: relative;
+ overflow: hidden;
+}
+
+/* draws a little line connecting the multilingual field up to the name field */
+.ideditor .localized-multilingual .entry::before {
+ content: "";
+ display: block;
+ position: absolute;
+ background: #ccc;
+ height: 11px;
+ width: 1px;
+ left: 0;
+ right: 0;
+ top: -11px;
+ margin: auto;
+}
+
+.ideditor .localized-multilingual .entry .localized-lang {
+ border-radius: 0;
+ border-top-width: 0;
+ width: 100%;
+}
+.ideditor .localized-multilingual .entry .localized-value {
+ border-top-width: 0;
+ border-radius: 0 0 4px 4px;
+ width: 100%;
+}
+
+
+/* Field - Address
+------------------------------------------------------- */
+.ideditor .form-field-input-address {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ border: 1px solid #ccc;
+ border-top: 0px;
+}
+
+.ideditor .addr-row {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ width: 100%;
+}
+
+.ideditor .addr-row > input {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ border-radius: 0;
+ border-right: 0;
+ border-bottom: 0;
+}
+.ideditor[dir='rtl'] .addr-row input {
+ border-right: 1px solid #ccc;
+ border-left: 0;
+}
+
+.ideditor .addr-row:first-of-type input {
+ border-top: 0;
+}
+.ideditor .addr-row input:first-of-type {
+ border-left: 0;
+}
+.ideditor[dir='rtl'] .addr-row input:first-of-type {
+ border-right: 0;
+}
+.ideditor .addr-row:last-of-type input:first-of-type {
+ border-radius: 0 0 0 4px;
+}
+.ideditor[dir='rtl'] .addr-row:last-of-type input:first-of-type {
+ border-radius: 0 0 4px 0;
+}
+.ideditor .addr-row:last-of-type input:last-of-type {
+ border-radius: 0 0 4px 0;
+}
+.ideditor[dir='rtl'] .addr-row:last-of-type input:last-of-type {
+ border-radius: 0 0 0 4px;
+}
+
+
+/* Field - Wikipedia
+------------------------------------------------------- */
+.ideditor .form-field-input-wikipedia {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+}
+
+.ideditor .wiki-lang-container,
+.ideditor .wiki-title-container {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ width: 100%;
+}
+
+.ideditor .wiki-lang-container > input.wiki-lang,
+.ideditor .wiki-title-container > input.wiki-title {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ border-top: 0;
+ border-radius: 0;
+}
+.ideditor .wiki-title-container > input.wiki-title {
+ border-radius: 0 0 0 4px;
+}
+.ideditor[dir='rtl'] .wiki-title-container > input.wiki-title {
+ border-radius: 0 0 4px 0;
+}
+.ideditor .wiki-title-container > button.wiki-link,
+.ideditor .form-field-wikidata ul.rows li:last-child button.form-field-button:last-child {
+ border-radius: 0 0 4px 0;
+}
+.ideditor[dir='rtl'] .wiki-title-container > button.wiki-link,
+.ideditor[dir='rtl'] .form-field-wikidata ul.rows li:last-child button.form-field-button:last-child {
+ border-radius: 0 0 0 4px;
+}
+
+
+/* Field - Restriction Editor
+------------------------------------------------------- */
+.ideditor .form-field-input-restrictions {
+ display: block;
+ border: 1px solid #ccc;
+ border-top: 0;
+ border-radius: 0 0 4px 4px;
+}
+
+.ideditor .form-field-input-restrictions .restriction-controls-container {
+ background-color: #fff;
+ width: 100%;
+ padding: 5px;
+ border-top: 1px solid #ccc;
+ border-radius: 0 0 4px 4px;
+}
+
+.ideditor .restriction-controls-container .restriction-controls {
+ display: table;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.ideditor .restriction-controls .restriction-control {
+ display: table-row;
+ padding: 5px 10px;
+ height: 25px;
+}
+
+.ideditor .restriction-control input,
+.ideditor .restriction-control > span {
+ display: table-cell;
+ text-align: start;
+ padding: 0px 5px;
+}
+
+.ideditor .restriction-control > span.restriction-control-label {
+ text-align: end;
+}
+
+.ideditor .restriction-control input {
+ width: 60px;
+ padding: 0;
+ margin: 0px 5px;
+ vertical-align: middle;
+}
+
+.ideditor .form-field-input-restrictions .restriction-container {
+ position: relative;
+ height: 370px;
+}
+/* zero width space, so container takes up space */
+.ideditor .form-field-input-restrictions .restriction-container:after {
+ content: '\200b';
+}
+
+.ideditor .form-field-input-restrictions svg.surface {
+ width: 100%;
+ height: 100%;
+}
+
+.ideditor .restriction-container .restriction-help {
+ z-index: 1;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ padding: 2px 6px;
+ background-color: rgba(255, 255, 255, .8);
+ color: #888;
+ text-align: center;
+ pointer-events: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.ideditor .restriction-help span {
+ margin: 2px;
+}
+
+.ideditor .restriction-help .qualifier {
+ color: #666;
+ font-weight: bold;
+}
+.ideditor .restriction-help .qualifier.allow {
+ color: #8b5;
+}
+.ideditor .restriction-help .qualifier.restrict {
+ color: #d53;
+}
+.ideditor .restriction-help .qualifier.only {
+ color: #78f;
+}
+
+
+/* Field - Changeset Comment
+------------------------------------------------------- */
+.ideditor .form-field-comment:not(.present) #preset-input-comment {
+ border-color: rgb(230, 100, 100);
+}
+.ideditor .form-field-comment:not(.present) .field-label {
+ border-color: rgb(230, 100, 100);
+ background: rgba(230, 100, 100, 0.2);
+}
+.ideditor .form-field-comment:not(.present) button {
+ border-color: rgb(230, 100, 100);
+}
+
+
+/* Field - Combobox
+------------------------------------------------------- */
+.ideditor[dir='ltr'] textarea.combobox-input,
+.ideditor[dir='ltr'] input.combobox-input {
+ /* leave room for the caret */
+ padding-right: 20px;
+}
+.ideditor[dir='rtl'] textarea.combobox-input,
+.ideditor[dir='rtl'] input.combobox-input {
+ padding-left: 20px;
+}
+
+.ideditor div.combobox {
+ z-index: 9999;
+ display: none;
+ -webkit-box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
+ box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
+ margin-top: -1px;
+ background: #fff;
+ max-height: 245px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ border: 1px solid #ccc;
+ border-radius: 0 0 4px 4px;
+}
+
+.ideditor .combobox a {
+ display: block;
+ padding: 5px 10px;
+ border-top: 1px solid #ccc;
+ -o-text-overflow: ellipsis;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.ideditor .combobox a.selected,
+.ideditor .combobox a:active,
+.ideditor .combobox a:focus {
+ background: #ececec;
+}
+@media (hover: hover) {
+ .ideditor .combobox a:hover {
+ background: #ececec;
+ }
+}
+
+.ideditor .combobox a:first-child {
+ border-top: 0;
+ padding: 4px 10px;
+}
+
+.ideditor .combobox-caret {
+ display: inline-block;
+ position: relative;
+ height: 5px;
+ width: 30px !important;
+ margin-left: -30px;
+ -ms-flex-item-align: center;
+ align-self: center;
+ vertical-align: middle;
+ cursor: pointer;
+}
+.ideditor[dir='rtl'] .combobox-caret {
+ margin-left: 0;
+ margin-right: -30px;
+}
+
+.ideditor .combobox-caret::after {
+ content: "";
+ height: 0; width: 0;
+ position: absolute;
+ left: 0; right: 0; bottom: 0; top: 0;
+ margin: auto;
+ border-top: 5px solid #ccc;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+}
+
+.ideditor .combobox .combobox-option.raw-option {
+ font-family: monospace;
+ color: #333;
+}
+
+
+/* Field Help
+------------------------------------------------------- */
+.ideditor .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);
+ -webkit-box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
+ box-shadow: 0 0 30px 5px rgba(0,0,0,.4);
+}
+
+.ideditor .field-help-title h2 {
+ padding: 10px;
+ margin-bottom: 0px;
+ font-size: 17px;
+}
+.ideditor .field-help-title button {
+ width: 45px;
+ height: 55px;
+ border-radius: 0;
+}
+
+.ideditor .field-help-nav {
+ font-size: 13px;
+ font-weight: bold;
+ margin-bottom: 10px;
+}
+.ideditor .field-help-nav-item {
+ display: inline-block;
+ padding: 5px 10px;
+ cursor: pointer;
+ color: #666;
+}
+.ideditor .field-help-nav-item.active {
+ color: #7092ff;
+ border-bottom: 2px solid;
+}
+.ideditor .field-help-nav-item:active,
+.ideditor .field-help-nav-item:focus {
+ color: #597be7;
+ background-color: #efefef;
+}
+@media (hover: hover) {
+ .ideditor .field-help-nav-item:hover {
+ color: #597be7;
+ background-color: #efefef;
+ }
+}
+
+.ideditor .field-help-content {
+ padding: 10px;
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+.ideditor .field-help-content h3 {
+ font-size: 12px;
+ margin-bottom: 5px;
+}
+.ideditor .field-help-content p {
+ margin-bottom: 15px;
+}
+.ideditor .field-help-content ul li {
+ list-style: inside;
+ margin-bottom: 5px;
+}
+
+.ideditor .field-help-content .field-help-image {
+ width: 100%;
+ margin-bottom: 15px;
+}
+
+.ideditor .field-help-content svg.turn {
+ width: 40px;
+ height: 20px;
+}
+.ideditor .field-help-content svg.shadow {
+ opacity: 0.7;
+ width: 60px;
+ height: 20px;
+}
+.ideditor .field-help-content svg.from {
+ color: #777;
+}
+.ideditor .field-help-content svg.allow {
+ color: #5b3;
+}
+.ideditor .field-help-content svg.restrict {
+ color: #d53;
+}
+.ideditor .field-help-content svg.only {
+ color: #68f;
+}
+
+.ideditor .field-help-content p.from_shadow,
+.ideditor .field-help-content p.allow_shadow,
+.ideditor .field-help-content p.restrict_shadow,
+.ideditor .field-help-content p.allow_turn,
+.ideditor .field-help-content p.restrict_turn {
+ margin-bottom: 5px;
+}
+
+
+/* More Fields dropdown
+------------------------------------------------------- */
+.ideditor .more-fields {
+ margin-top: 10px;
+ font-weight: bold;
+}
+
+.ideditor .more-fields label {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.ideditor .more-fields input {
+ margin-left: 10px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+}
+.ideditor[dir='rtl'] .more-fields input {
+ margin-left: auto;
+ margin-right: 10px;
+}
+
+.ideditor .form-field-input-wrap .label {
+ background: #f6f6f6;
+ padding: 5px 10px;
+}
+
+
+/* Raw Tag Editor
+------------------------------------------------------- */
+.ideditor .raw-tag-options {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ margin-top: -28px;
+}
+.ideditor button.raw-tag-option {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ padding: 3px;
+ background: #aaa;
+ color: #eee;
+ margin: 0 3px;
+}
+.ideditor button.raw-tag-option:focus,
+.ideditor button.raw-tag-option.active {
+ color: #fff;
+ background: #597be7;
+}
+@media (hover: hover) {
+ .ideditor button.raw-tag-option:hover {
+ color: #fff;
+ background: #597be7;
+ }
+}
+.ideditor button.raw-tag-option.selected {
+ color: #fff;
+ background: #7092ff;
+}
+.ideditor button.raw-tag-option svg.icon {
+ width: 14px;
+ height: 14px;
+ display: block;
+}
+.ideditor[dir='ltr'] button.raw-tag-option-list {
+ -webkit-transform: scaleX(-1);
+ -ms-transform: scaleX(-1);
+ transform: scaleX(-1);
+ -webkit-filter: FlipH;
+ filter: FlipH;
+ -ms-filter: "FlipH";
+}
+
+
+.ideditor .tag-text {
+ width: 100%;
+ height: 100%;
+ min-height: 32px;
+ font-family: monospace;
+ white-space: pre;
+}
+
+.ideditor .tag-text,
+.ideditor .tag-list {
+ margin-top: 10px;
+}
+.ideditor .tag-row {
+ width: 100%;
+ position: relative;
+}
+.ideditor .tag-row .inner-wrap {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ width: 100%;
+ position: relative;
+}
+.ideditor .tag-row .key-wrap,
+.ideditor .tag-row .value-wrap {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 50%;
+ flex: 1 1 50%;
+}
+
+.ideditor .tag-text.readonly,
+.ideditor .tag-row.readonly,
+.ideditor .tag-row.readonly input.key,
+.ideditor .tag-row.readonly input.value,
+.ideditor .tag-row.readonly button.remove {
+ color: #777;
+ background-color: #eee;
+ cursor: not-allowed;
+}
+
+.ideditor .tag-row input {
+ border: 0;
+ border-radius: 0;
+ border-bottom: 1px solid #ccc;
+ border-left: 1px solid #ccc;
+ width: 100%;
+}
+.ideditor[dir='rtl'] .tag-row input {
+ border-left: none;
+ border-right: 1px solid #ccc;
+}
+
+
+.ideditor .tag-row input.key {
+ font-weight: bold;
+ background-color: #f6f6f6;
+}
+
+.ideditor .tag-row input.value {
+ border-right: 1px solid #ccc;
+}
+.ideditor[dir='rtl'] .tag-row input.value {
+ border-left: 1px solid #ccc;
+}
+
+.ideditor .tag-row:first-child input.key {
+ border-top: 1px solid #ccc;
+ border-top-left-radius: 4px;
+}
+.ideditor[dir='rtl'] .tag-row:first-child input.key {
+ border-top-left-radius: 0;
+ border-top-right-radius: 4px;
+}
+
+.ideditor .tag-row:first-child input.value {
+ border-top: 1px solid #ccc;
+}
+.ideditor .tag-row button {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ width: 32px;
+ border: 1px solid #ccc;
+ border-top-width: 0;
+ border-left-width: 0;
+}
+.ideditor[dir='rtl'] .tag-row button {
+ border-left-width: 1px;
+ border-right-width: 0;
+}
+
+.ideditor .tag-row button:active,
+.ideditor .tag-row button:focus {
+ background: #f1f1f1;
+}
+@media (hover: hover) {
+ .ideditor .tag-row button:hover {
+ background: #f1f1f1;
+ }
+}
+.ideditor .tag-row button .icon {
+ opacity: .5;
+}
+.ideditor .tag-row:first-child button {
+ border-top-width: 1px;
+}
+
+.ideditor .tag-row:first-child .tag-reference-button {
+ border-top-right-radius: 4px;
+}
+.ideditor[dir='rtl'] .tag-row:first-child .tag-reference-button {
+ border-top-left-radius: 4px;
+ border-top-right-radius: 0;
+}
+
+.ideditor .tag-row:last-child .tag-reference-button {
+ border-bottom-right-radius: 4px;
+}
+.ideditor[dir='rtl'] .tag-row:last-child .tag-reference-button {
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 0;
+}
+
+.ideditor .tag-row .tag-reference-button {
+ border-radius: 0;
+}
+.ideditor[dir='rtl'] .tag-row .tag-reference-button {
+ border-left-width: 1px;
+ border-right-width: 0;
+}
+
+/* Tag reference */
+.ideditor .tag-reference-loading {
+ background-color: #f5f5f5;
+}
+.ideditor .tag-reference-loading .icon {
+ background-image: url(<%= asset_path("iD/img/mini-loader.gif") %>);
+ background-position: 0 0;
+}
+
+.ideditor .tag-reference-body {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ width: 100%;
+ overflow: hidden;
+ display: none;
+ padding-top: 10px;
+}
+.ideditor .tag-reference-body.expanded {
+ padding-bottom: 10px;
+ display: inline-block;
+}
+.ideditor .tag-reference-description {
+
+}
+.ideditor .tag-reference-link {
+ display: block;
+}
+
+.ideditor img.tag-reference-wiki-image {
+ float: right;
+ width: 33.3333%;
+ border-radius: 4px;
+ margin: 0 0 0 5px;
+}
+.ideditor[dir='rtl'] img.tag-reference-wiki-image {
+ float: left;
+ margin: 0 5px 0 0;
+}
+
+.ideditor .preset-list .tag-reference-body {
+ position: relative;
+ width: 100%;
+}
+.ideditor .raw-tag-editor .tag-reference-body {
+ width: 100%;
+}
+.ideditor .raw-tag-editor .tag-row.readonly .tag-reference-body {
+ background: #f6f6f6;
+ color: #333;
+}
+.ideditor .raw-tag-editor .tag-row:not(:last-child) .tag-reference-body.expanded {
+ border-bottom: 1px solid #ccc;
+}
+.ideditor .raw-tag-editor .tag-row.readonly .tag-reference-body.expanded {
+ border-top: 1px solid #ccc;
+}
+
+
+/* Raw Member / Membership Editor
+------------------------------------------------------- */
+.ideditor .section-raw-member-editor .member-list:empty,
+.ideditor .section-raw-membership-editor .member-list:empty {
+ display: none;
+}
+
+.ideditor .section-raw-member-editor .member-list,
+.ideditor .section-raw-membership-editor .member-list {
+ position: relative; /* required for drag-and-drop */
+ padding-top: 5px;
+}
+.ideditor .section-raw-member-editor .member-list li,
+.ideditor .section-raw-membership-editor .member-list li {
+ position: relative;
+ border-radius: 4px;
+ margin: 0;
+ padding-bottom: 10px;
+}
+.ideditor .section-raw-member-editor .member-row .member-entity-name,
+.ideditor .section-raw-membership-editor .member-row .member-entity-name {
+ font-weight: normal;
+ padding-left: 10px;
+}
+
+.ideditor[dir='rtl'] .section-raw-member-editor .member-row .member-entity-name,
+.ideditor[dir='rtl'] .section-raw-membership-editor .member-row .member-entity-name {
+ padding-left:0;
+ padding-right: 10px;
+}
+
+.ideditor .form-field-input-member > input.member-role {
+ border-radius: 0 0 4px 4px;
+}
+
+.ideditor .member-row-new .member-entity-input {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
+ border-radius: 4px 4px 0 0;
+ border: 0;
+}
+
+.ideditor .section-raw-member-editor .member-row.dragging {
+ opacity: 0.75;
+ z-index: 3000;
+ /*
+ box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
+ */
+}
+
+/* add tag, add relation buttons */
+.ideditor .add-row {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ width: 100%;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+}
+.ideditor .add-row .add-tag,
+.ideditor .add-row .add-relation,
+.ideditor .add-row .space-value {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 50%;
+ flex: 1 1 50%;
+}
+.ideditor .add-row .space-buttons {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 62px;
+ flex: 0 0 62px;
+}
+.ideditor .add-row button {
+ padding: 5px;
+ background: rgba(0,0,0,.5);
+}
+.ideditor .add-row button:focus,
+.ideditor .add-row button:active {
+ background: rgba(0,0,0,.8);
+}
+@media (hover: hover) {
+ .ideditor .add-row button:hover {
+ background: rgba(0,0,0,.8);
+ }
+}
+
+.ideditor .add-tag {
+ border-radius: 0 0 4px 4px;
+}
+.ideditor .add-relation {
+ margin-top: 10px;
+ border-radius: 4px;
+}
+
+
+/* OSM Note / QA Editors
+------------------------------------------------------- */
+.ideditor .note-header,
+.ideditor .qa-header {
+ background-color: #f6f6f6;
+ border-radius: 5px;
+ border: 1px solid #ccc;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.ideditor .note-header-icon,
+.ideditor .qa-header-icon {
+ background-color: #fff;
+ padding: 10px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ position: relative;
+ width: 60px;
+ height: 60px;
+ border-right: 1px solid #ccc;
+ border-radius: 5px 0 0 5px;
+}
+.ideditor[dir='rtl'] .note-header-icon,
+.ideditor[dir='rtl'] .qa-header-icon {
+ border-right: unset;
+ border-left: 1px solid #ccc;
+ border-radius: 0 5px 5px 0;
+}
+
+.ideditor .note-header-icon .icon-wrap,
+.ideditor .qa-header-icon .icon-wrap {
+ position: absolute;
+ top: 0px;
+}
+.ideditor .preset-icon-28 {
+ position: absolute;
+ top: 16px;
+ left: 16px;
+ margin: auto;
+}
+.ideditor .preset-icon-28 .icon {
+ width: 28px;
+ height: 28px;
+}
+
+.ideditor .note-header-label,
+.ideditor .qa-header-label {
+ background-color: #f6f6f6;
+ padding: 0 15px;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
+ font-size: 14px;
+ font-weight: bold;
+ border-radius: 0 5px 5px 0;
+}
+.ideditor[dir='rtl'] .note-header-label,
+.ideditor[dir='rtl'] .qa-header-label {
+ border-radius: 5px 0 0 5px;
+}
+
+.ideditor .note-category {
+ margin: 20px 0px;
+}
+
+.ideditor .comments-container {
+ background: #ececec;
+ padding: 1px 10px;
+ border-radius: 8px;
+ margin-top: 20px;
+}
+
+.ideditor .comment {
+ background-color: #fff;
+ border-radius: 5px;
+ border: 1px solid #ccc;
+ margin: 10px auto;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+}
+.ideditor .comment-avatar {
+ padding: 10px;
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+}
+.ideditor .comment-avatar .icon.comment-avatar-icon {
+ width: 40px;
+ height: 40px;
+ -o-object-fit: cover;
+ object-fit: cover;
+ border: 1px solid #ccc;
+ border-radius: 20px;
+}
+.ideditor .comment-main {
+ padding: 10px 10px 10px 0;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: column nowrap;
+ flex-flow: column nowrap;
+ overflow: hidden;
+ overflow-wrap: break-word;
+}
+.ideditor[dir='rtl'] .comment-main {
+ padding: 10px 0 10px 10px;
+}
+
+.ideditor .comment-metadata {
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+}
+.ideditor .comment-author {
projects / rails.git / blobdiff