button.js-delete-row { min-width: 13px; min-height: 13px; line-height: 12px; margin: 0; padding: 0; background-color: #DD0000; border: none; border-radius: 50%; font-size: 8pt; color: #FFFFFF; }
button.js-delete-row:hover { text-decoration: none!important; background: #FF0000; }
.drag-handle { display: inline-block; width: 23px; height: 23px; padding: 0; box-sizing: border-box; background: transparent url(imgs/field-def-sort.png) no-repeat 50% 50%; background-size: 23px; cursor: grab; }
.icon-warning { display: inline-block; width: 8px; height: 12px; background: transparent url(/imgs/icon-warning.gif) no-repeat 50% 50%; }
td > .icon-warning:first-child { position: absolute; transform: translate(-10px, 3px); }

/* service form preview */
.phone-view { position: relative; width: 298px; height: 600px; margin: 0 auto; background: #303030; }
.phone-view > iframe { position: absolute; left: 19px; top: 19px; width: 375px; height: 812px; overflow-y: auto; transform: scale(0.69333) /* 260 / 375 */; transform-origin: top left; border: none; background: white; }
.phone-view > div:last-child { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: transparent url(imgs/phone-view-overlay-grey.png) no-repeat 0 0; background-size: contain; pointer-events: none; }
#PreviewOptions { width: 298px; margin: 20px auto 0 auto; }

.field-def { margin-bottom: 8px; padding: 6px 12px 20px 12px; border: 2px solid #E9E9E9; border-radius: 3px; background-color: #FFFFFF; background: linear-gradient(-25deg, #F0F2F4, #FFFFFF); }
.field-def.drag-over-upper { border-top-color: #0E98A8; }
.field-def.drag-over-lower { border-bottom-color: #0E98A8; }
.field-def-collapsed { height: 28px; overflow: hidden; padding-bottom: 0; }
.field-def-collapsed .field-def-control div a:first-child { transform: rotate(180deg); }
.field-def-title { }
.field-def-control { display: flex; gap: 10px; align-items: start; }
.field-def-control > h3 { margin: 0; font-size: 13px; color: #00BCD4; }
.field-def-control > div:last-child { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.field-def-control > div:last-child > a { display: inline-block; width: 23px; height: 23px; margin-left: 2px; padding: 0; box-sizing: border-box; background-size: 23px; background-position: 50% 50%; background-repeat: no-repeat; cursor: pointer; }
.field-def-control > div:last-child > a:hover { background-color: #E0E0E0; }
.field-def-control > div:last-child > a.drag-handle { cursor: grab; }
.field-def-highlight { border-color: #91E5EF; }
.field-def-pair { display: flex; gap: 6px; padding: 6px 0; }
.field-def-pair > label { flex: 0 0 30%; font-size: 8pt; font-weight: bold; color: #505050; }
.field-def-pair > div { flex: 0 0 70%; }
.field-def-input { display: block; padding: 6px 0; }
.field-def-input > label { display: block; font-size: 8pt; font-weight: bold; color: #505050; }
.field-def-input > input { display: block; width: 100%; }
.field-def-input > div { }
.field-def-list { display: block; padding: 6px 0; }
.field-def-list > label { display: block; font-size: 8pt; font-weight: bold; color: #505050; }
.field-def-list > select { display: block; width: 100%; }
.field-def-checkbox { display: flex; flex-direction: row-reverse; justify-content: start; padding: 6px 0; }
.field-def-checkbox > label { user-select: none; }

/*site form*/
#JobSpanForm_Search { width: 100%; box-sizing: border-box; margin-bottom: 20px; }
#JobSpanForm_ServicesSelected td:nth-child(3) { padding-top: 1px; }
#JobSpanForm_ServicesSelected td:nth-child(3) input[type="text"] { width: 90%; box-sizing: border-box; }

/*source form*/
.source-comment { font-size: 0.9em; }