/* auth0 style */

.a0-primary, .a0-next {
    background-color: #14ada1  !important;
}

.auth0-lock-overlay {
    background-image: url("https://amperity-static-assets.s3-us-west-2.amazonaws.com/resources/img/wallpaper-dark.png") !important;
    opacity: 1 !important;
}

/* data source colors */

.color0 {
    fill: #D9DF37 !important;
    background-color: #D9DF37 !important;
}

.color1  {
    fill: #E2D736 !important;
    background-color: #E2D736 !important;
}

.color2 {
    fill: #BBD74C !important;
    background-color: #BBD74C !important;
}

.color3 {
    fill: #8EC741 !important;
    background-color: #8EC741 !important;
}

.color4 {
    fill: #60C7C9 !important;
    background-color: #60C7C9 !important;
}

.color5 {
    fill: #25BDB4 !important;
    background-color: #25BDB4 !important;
}

.color6 {
    fill: #14ADA1 !important;
    background-color: #14ADA1 !important;
}

/* stage page */

.stage.add-feed-modal input[type=text], .stage.add-feed-modal select {
    font-size: 14px;
    border: 1px solid #DDDDDD;
    background-color: #F3F3F3;
    height: 30px;
    padding-left: 10px;
}

.stage.add-feed-modal input[type=number] {
    font-size: 14px;
    border: 1px solid #DDDDDD;
    background-color: #F3F3F3;
    height: 30px;
    padding: 0px;
    padding-left: 6px;
}

.stage.add-feed-modal select {
    height: 35px;
    /* border-radius: 0; */
    /* https://github.com/twbs/bootstrap/issues/15588 */
    border: 0;
    outline-offset: -1px;
    outline: 1px;
    outline-style: solid;
    outline-color: #DDDDDD;
}

.stage.activate-body {
    overflow-y: auto;
    height: 350px;
}

.stage.outer-purge-panel {
}

.stage.right-purge-panel {
    padding: 8px;
    background-color: #f3f3f3;
    display: inline-block;
    width: 100%;
}

.stage.left-purge-panel {
    padding: 10px;
    background-color: #eaeaea;
    display: inline-block;
}

.stage.domain-table-diff table {
    width: 100%;
}

.stage.domain-table-diff-name {
    font-size: 20px;
}

.stage.domain-table-diff-status-icon {
    font-size: 20px;
}

.add-sql-query-modal .CodeMirror {
    background-color: #F3F3F3;
    height: 285px;
    font-size: 13px;
    width: 580px;
}

.data-source-template-name {
    font-size: 12px;
}

.data-source-template-desc {
    color: #888888;
}

.sample-data-method {
    font-size: 13px;
}

.data-source-graph-summary-container {
    display: flex;
    flex-wrap: nowrap;
}

.data-source-graph {
    background-color: white;
    flex-grow: 2;
    font-weight: bold;

    max-height: 192px !important;
    border-bottom: solid 4px #f6f6f6;
}

.data-source-table-container {
    /*display: flex;*/
    /*flex-wrap: nowrap;   */
    margin-top: 0px;
    background-color: white;
}

.add-feed-tab {
    height: 30px;
    width: 170px;
    font-size: 12pt;
    padding: 10px;
    padding-left: 15px;
    color: #444444;
    vertical-align: center;
    line-height: 30px;
}

.add-feed-tab a {
    color: #444444;
}

.add-feed-tab.tab-activated {
    background-color: #EEEEEE;
}

.add-feed-tab.tab-disabled {
    color: grey;
    cursor: not-allowed;
}

.select-landing-file .Select-menu-outer .Select-menu {
    max-height: 150px;
}

.tab-sliver {
    width: 5px;
    height: 50px;
}

.tab-sliver.tab-activated {
    background-color: #AAAAAA;
}

table.staging-transform > tbody > tr > td {
    border-right: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
}

/* connect (formerly stitch) page */

/* bring headings and actuators to the bottom */

.grid-cluster-summary-grid .grid-header th span,
.grid-stitch-summary-grid .grid-header th span,
.grid-table-details-grid .grid-header th span {
    _background-color: red !important;
    align-items: flex-end !important;
}

/* bring sort actuator more closer to the bottom heading */
.grid-cluster-summary-grid .grid-header th:nth-child(2) span i {
    _background-color: yellow !important;
    position: relative;
    left: -26px;
}

/* don't shade selected rows */
.grid-cluster-summary-grid.grid-table .grid-row.selected {
    background-color: initial;
}

/* however DO slightly shade selected hovering row */
.grid-cluster-summary-grid.grid-table .grid-row.active.selected {
    background-color: #f8f8f8;
}

/* size left-bar */
.grid-cluster-summary-grid.grid-table .grid-row.selected .grid-cell.left-bar,
.grid-cluster-summary-grid.grid-table .grid-row .grid-cell.left-bar {
    width: 2px !important;
    padding: 1px !important;
}

/* light blue left bar for selected row */
.grid-cluster-summary-grid.grid-table .grid-row.selected .grid-cell.left-bar {
    background-color: rgb(164, 195, 228); /* #278cc8; */
    border-bottom-color: rgb(164, 195, 228); /* #278cc8; */
}

/* light blue all the time for details left bar */
.grid-table-details-grid.grid-table .grid-row .grid-cell.left-bar,
.grid-table-details-grid.grid-table .grid-row.active .grid-cell.left-bar,
.grid-table-details-grid.grid-table .grid-header .grid-heading.left-bar,
.grid-table-details-grid.grid-table .grid-header.active .grid-heading.left-bar {
    background-color: rgb(164, 195, 228); /* #278cc8; */
    border-bottom-color: rgb(164, 195, 228); /* #278cc8; */
    padding: 2px !important;
}

/* Segment page */

.segment.page {
  margin-top: 62px;
  padding-left: 7px;
  padding-right: 7px;
}

.segment .sub-menu {
    box-shadow: 0px 1px 0px 0px rgb(226, 230, 232);
}

.segment .panel {
    box-shadow: none;
    border: 1px solid var(--c-border);
}

.segment select {
    height: 35px;
    font-size: 14px;
    border: 0 !important;
    background-color: #F3F3F3;
    outline-offset: -1px !important;
    outline-width: 1px !important;
    outline-style: solid !important;
    outline-color: #DDDDDD !important;
}

.segment select:disabled {
    outline-color: #f0f0f0 !important;
    background-color: #f9f9f9 ;
}

.segment .left-col {
  margin-right: 0;
}

.segment-panel {
  min-width: 128px;
  flex: 1;
}

.segment-panel .panel {
  background-color: white;
  font-size: 14px;
}

.segment-panel .grid-qry-results {
    _background-color: pink;
}

.segment-panel .grid-qry-results .grid-header {
    _background-color: pink;
    background-color: #f8f8f8;

}

.segment-panel .grid-qry-results .grid-heading {
    _background-color: pink;
    border-bottom-width: 1px;
}

.segment-panel .grid-qry-results .grid-heading:last-child {
    _background-color: pink;
    width: 100%; /* push and squish colums to the left */
}

.segment-panel .grid-qry-results .grid-cell {
}

.segment-panel .grid-qry-results .grid-header .left-bar,
.segment-panel .grid-qry-results .grid-row .left-bar,
.segment-panel .grid-qry-results .left-bar {
    _background-color: pink;
    width: 2px !important;
}

.segment-panel .CodeMirror-scroll {
  min-height: 60vh;
}

.segment-panel .CodeMirror-gutter-wrapper {
    left: -46px;
}

.segment-panel .CodeMirror-gutter.CodeMirror-linenumbers {
    width: 45px !important;
    background: var(--c-white-1);
}

.segment-panel .CodeMirror-lines {
    padding: 9px 0px !important;
}

.segment-panel pre.CodeMirror-line {
  padding: 0 12px;
}

.segment-panel .CodeMirror-line {
    padding: 0px 16px !important;
}

.segment-panel textarea {
    background-color: white;
    border: 1px solid rgb(187, 187, 187);
}

.segment-panel select {
    background-color: white;
    border: 0 !important;
    outline-offset: -1px !important;
    outline-width: 1px !important;
    outline-style: solid !important;
    outline-color: rgb(187, 187, 187) !important;
}

.segment-panel textarea:hover {
    border: 1px solid #777 !important;
}

.segment-panel select:hover {
    border: 0 !important;
    outline-offset: -1px !important;
    outline-width: 1px !important;
    outline-style: solid !important;
    outline-color: #777 !important;
}

.segment-panel textarea:active, .segment-panel textarea:focus {
    outline: none;
    color: var(--c-text);
    border: 1px solid var(--c-secondary) !important;
}

.segment-panel select:active, .segment-panel select:focus {
    color: var(--c-text);
    border: 0 !important;
    outline-offset: -1px !important;
    outline-width: 1px !important;
    outline-style: solid !important;
    outline-color: var(--c-secondary) !important;
}

.grid-segment-summary-grid.grid-table .grid-row.selected .grid-cell.left-bar,
.grid-segment-summary-grid.grid-table .grid-row.expanded .grid-cell.left-bar,
.grid-segment-summary-grid.grid-table .grid-row.expanded.active .grid-cell.left-bar {
    background-color: var(--c-secondary);
    border-bottom-color: var(--c-secondary) !important;
}

.grid-segment-summary-grid.grid-table .grid-row.expanded,
.grid-segment-summary-grid.grid-table .grid-row.expanded.active {
    background-color: white;
}

.segment-panel .panel.table-info {
    margin-left: -1px;
}

/* orchestration page */

.orchestration .left-col {
    margin-right: 0;
}

.orchestration-panel {
    /* background-color: #EAEAEA; this should be done in the inner .panel */
    position: absolute;
    left: 14px;
    top: 105px;
    padding-bottom: 120px; /* padding required for proper in-panel scrolling */
    padding-top: 20px;
    width: 100%;
    padding-right: 28px;
}

.orchestration-panel .panel {
    background-color: white;
    font-size: 14px;
    padding-left: 10px;
    padding-right: 10px;
}

/* slice page */

.slice .left-col {
    margin-right: 0;
}

.slice-panel {
    background-color: var(--c-background);
    padding: 20px 28px;
    width: 100%;
}

.slice-panel .panel {
    background-color: white;
    font-size: 14px;
    padding-left: 10px;
    padding-right: 10px;
}

/* responsive breakpoints */

/* mobile  */
@media (min-width: 0px) {
    /* no wide menu items, the tenant selector pipe, logo wordmark or normal user icon on mobile  */
    .menu-item,
    .dropdown-menu.dropdown-menu .pipe-separator,
    .logos .wordmark,
    .menu-item-user {
        visibility: hidden;
        display: none !important;
    }

    /* but DO show tenant selector and alternate user icon */
    .dropdown-menu.dropdown-menu .menu-item, .menu-item-user-mobile {
        visibility: initial !important;
        display: initial !important;
    }
}

/* ipad portrait - SM */
@media (min-width: 640px) {
    /* hide mobile user icon */
    .menu-item-user-mobile {
        visibility: hidden !important;
        display: none !important;
    }

    /* show logo, normal user icon and notifications */
   .logos .wordmark,
   .menu-item-user {
        visibility: initial;
        display: inline-block !important;
    }

    /* adjust mobile navigation menu a bit */
    .mobile-nagivation {
        margin-right: -2px !important;
    }
}

/* ipad landscape */
@media (min-width: 1124px) {
    /* hide mobile tenant selector, hide mobile user icon */
    .mobile-nagivation,
    .menu-item-user-mobile {
        visibility: hidden !important;
        display: none !important;
    }

    /* show normal menu items */
    .menu-item,
    .dropdown-menu.dropdown-menu .pipe-separator,
    .logos .wordmark,
    .menu-item-user {
        visibility: initial;
        display: inline-block !important;

    }
}

/* bigger than macbook 13' - LG */
@media (min-width: 1190px) {
}


h4.dialog-label {
    margin-bottom: 6px;
}

input.file-upload {
    width: 200px;
}

table.file-details {
    /* border-spacing: 2px; */
}

table.file-details.file-details select {
    width: 100px;
}

table.file-details.file-details input[type=number] {
    width: 92px;
    font-size: 14px;
}

table.file-details.view-mode td {
    padding-right: 30px;
}

table.file-details.edit-mode td {
    padding-right: 10px;
}

.filename {
    font-size: 14px
}

.select-different-file {
    font-size: 14px
}


/* dashboard */

.dashboard .sections {
    padding-left: 0px;
    max-width: 1200px;
}

.dashboard .section .title {
    _color: red;
    letter-spacing: 0px;
}

.dashboard .dashboard-section-content {
    margin-left: -10px;
    margin-right: -10px;
    width: calc(100% + 20px);
}

.dashboard .dashboard-card-container {
    margin: 10px;
}

.dashboard .dashboard-card-grid2 {
    /* width: 100%; */
    max-width: 1157.5px;
}

/* stitch report */

.page.stitch-report {
    /* background-color: red; */
    margin-top: 58px;
}

.stitch-report .section .title {
    _color: red;
    letter-spacing: 1px;
}

/* mobile (essentially no breakpoint) */
@media (min-width: 0px) {
    .stitch-report .section .stitch-report-section-content,
    .stitch-report .section .heading {
        max-width: 255px; /* (235 + 20) * 1 - (1 * 20) */ /* basscss default: 24rem */
    }

    .hidden.hidden, ._lg-visible.lg-visible, ._md-visible.md-visible {
        _background-color: purple;
        display: none;
    }

    .visible.visible, .sm-visible.sm-visible {
        _color: yellow;
        display: initial;
    }

    /* no nav-widget on mobile */
    .stitch-report .scrollnav {
        visibility: hidden;
    }
}

/* ipad portrait - SM */
@media (min-width: 640px) {
    .stitch-report .section .stitch-report-section-content,
    .stitch-report .section .heading {
        max-width: 530px; /* (235 + 20) * 2 + (1 * 20) */  /* basscss default: 32rem */
    }

    .hidden.hidden, .lg-visible.lg-visible, .sm-visible.sm-visible {
        _color: blue;
        display: none;
    }

    .visible.visible, .md-visible.md-visible {
        _color: green;
        display: initial;
    }

    .stitch-report .scrollnav {
        visibility: initial;
    }
}

/* ipad landscape */
@media (min-width: 1024px) {
    /*
    .hidden.hidden, .sm-visible.md-visible, .lg-visible.lg-visible {
        _background-color: orange;
        display: none;
    }

    .visible.visible, .md-visible.md-visible {
        _color: magenta;
        display: initial;
    }
    */
}

/* bigger than macbook 13' - LG */
@media (min-width: 1190px) {
    .stitch-report .section .stitch-report-section-content,
    .stitch-report .section .heading {
        max-width: 1080px; /* basscss default: 64rem */
    }

    .hidden, .md-visible.md-visible, .sm-visible.sm-visible {
        _background-color: pink;
        display: none;
    }

    .visible.visible, .lg-visible.lg-visible {
        _color: lightblue;
        display: initial;
    }

    .table-cell {
      display: table-cell;
    }

    .lighter {
      font-weight: lighter;
    }
}

.visual-segment-editor {
  display: flex;
  flex-direction: column;
  margin-top: 18px;
  margin-left: 18px;
  padding-bottom: 10px;
  min-height: 300px;
}

.visual-segment-header {
  margin-top: 6px;
  margin-bottom: 20px;
}

.visual-segment-clauses {
  display: flex;
  flex-direction: column;
}

.visual-segment-clause,
.visual-segment-clause-wrap {
  display: flex;
  flex-shrink: 0;
}

.visual-segment-clause * {
  box-sizing: border-box !important;
}

.visual-segment-clause-type,
.visual-segment-clause-field,
.visual-segment-clause-operator,
.visual-segment-clause-value,
.visual-segment-clause-field input,
.visual-segment-clause-value input,
.visual-segment-clause-value textarea,
.amp-select input {
  font-family: 'Roboto', sans-serif;
  font-size: 14px !important;
  padding-top: 6px;
  padding-bottom: 6px;
  border-radius: 0 !important;
}

.visual-segment-clause-field {
  margin-right: 5px;
  margin-left: 5px;
}

.visual-segment-clause-operator,
.visual-segment-clause-value {
  margin-left: 5px;
  margin-right: 5px;
}

.visual-segment-clause.first-clause .visual-segment-clause-type {
  font-weight: bold;
  color: #3d444c;
}

.visual-segment-clause-type {
  width: 50px;
  margin-top: 6.5px;
  padding-left: 0px;
}

.visual-segment-clause-field {
  width: 200px;
}

.visual-segment-clause-operator {
  width: 140px;
}

.visual-segment-clause-value {
  width: 300px;
}

.visual-segment-clause-operator select {
  height: 28px;
}

.visual-segment-sql-modal .CodeMirror-scroll{
    min-height: 300px;
}

.visual-segment-sql-modal .CodeMirror {
    font-size: 14px;
}

input.default-input,
textarea.default-input {
  border: rgb(221, 221, 221) solid 1px;
  background-color: rgb(243, 243, 243);
}

.visual-segment-add-clause,
.visual-segment-add-clause button,
.visual-segment-remove-clause,
.visual-segment-remove-clause button {
  display: inline-flex;
  border: none;
  background: none;
}

.visual-segment-add-clause button:active,
.visual-segment-add-clause button:focus,
.visual-segment-remove-clause button:active,
.visual-segment-remove-clause button:focus {
  outline: none;
}

.visual-segment-add-clause button:hover,
.visual-segment-remove-clause button:hover {
  cursor: pointer;
}

input.visual-segment-input,
textarea.visual-segment-input {
  border: 1px solid #bbb;
  width: 100%;
  padding-left: 6px;
  margin-left: 1px;
  margin-right: 1px;
}

input.visual-segment-input:hover,
textarea.visual-segment-input:hover {
  border: 1px solid #777;
}

input.visual-segment-input:active,
input.visual-segment-input:active,
input.visual-segment-input:focus,
textarea.visual-segment-input:active,
textarea.visual-segment-input:focus,
.segment textarea.visual-segment-input:active,
.segment textarea.visual-segment-input:focus {
  color: var(--c-text);
  border: 1px solid var(--c-secondary);
}

.segment textarea.visual-segment-input:active,
.segment textarea.visual-segment-input:focus {
  outline: none !important;
}

.visual-segment-editor.edit-mode input.visual-segment-input:disabled,
.visual-segment-editor.edit-mode textarea.visual-segment-input:disabled {
  border: 1px solid #f0f0f0;
  color: #d1d1d1;
  background: #fcfcfc;
}

.visual-segment-editor input.invalid,
input.invalid {
    border: 1px solid rgb(156, 6, 6) !important;
}

.visual-segment-clause-value textarea:disabled,
.visual-segment-clause-value input:disabled {
    background: #fcfcfc;
    border-color: #efefef !important;
    color: var(--c-text) !important;
    cursor: default;
    font-size: 14px;
}

.visual-segment-clause-error-messages {
  color: rgb(156, 6, 6);
  padding-top: 0px;
  padding-bottom: 5px;
  margin-left: 60px;
  font-size: 12px;
}

.activation-dialog .dialog-content.panel-content {
  padding-bottom: 0px;
}

.view-segment-orchestrations-modal .dialog-content.panel-content {
  height: 40vh;
}

.user-modal input[disabled], .user-modal textarea[disabled],
.user-modal input[disabled]:hover, .user-modal textarea[disabled]:hover,
.courier-group-modal input[disabled], .courier-group-modal textarea[disabled],
.courier-group-modal input[disabled]:hover, .courier-group-modal textarea[disabled]:hover,
.activation-dialog input[disabled], .activation-dialog textarea[disabled],
.activation-dialog input:hover[disabled], .activation-dialog textarea[disabled]:hover,
.courier-modal input[disabled], .courier-modal textarea[disabled],
.courier-modal input:hover[disabled], .courier-modal textarea[disabled]:hover,
.orchestration-modal input[disabled]:not([type="radio"],[type="checkbox"]), .orchestration-modal textarea[disabled],
.orchestration-modal input:hover[disabled]:not([type="radio"],[type="checkbox"]), .orchestration-modal textarea[disabled]:hover,
.orchestration-group-modal input[disabled], .orchestration-group-modal textarea[disabled],
.orchestration-group-modal input:hover[disabled], .orchestration-group-modal textarea[disabled]:hover,
.target-modal input[disabled], .target-modal textarea[disabled],
.target-modal input:hover[disabled], .target-modal textarea[disabled]:hover {
    border: 1px solid rgb(240, 240, 240) !important;
    background-color: rgb(252, 252, 252);
    color: var(--c-text);
    cursor: default !important;
}

.user-modal input:hover,
.user-modal textarea:hover,
.courier-group-modal input:hover,
.courier-group-modal textarea:hover,
.activation-dialog input:hover, .activation-dialog textarea:hover,
.courier-modal input:hover, .courier-modal textarea:hover,
.orchestration-modal input:hover:not([type="radio"],[type="checkbox"]), .orchestration-modal textarea:hover,
.orchestration-group-modal input:hover, .orchestration-group-modal textarea:hover,
.target-modal input:hover, .target-modal textarea:hover {
    border: 1px solid #777 !important;
}

.orchestration-modal div.disabled, .orchestration-group-modal div.disabled {
    cursor: initial;
}

.user-modal input,
.user-modal select,
.user-modal textarea,
.courier-group-modal input,
.courier-group-modal select,
.courier-group-modal textarea,
.orchestration-group-modal input,
.orchestration-group-modal select,
.orchestration-group-modal textarea {
  background: #fcfcfc;
  border-color: rgb(187, 187, 187);
}

.target-modal .json-editor .CodeMirror {
    background-color: #f9f9f9 !important;
}

.target-modal .json-editor.read-only * {
    cursor: default !important;
}

.target-modal .json-editor.read-only > div {
    border: 1px solid rgb(187, 187, 187) !important;
}

.view-segment-orchestrations-modal .dialog-footer-container > div > span:first-child {
    /* background: pink !important; */
    width: 100%;
    text-align: left;
}

.courier-modal input,
.courier-modal textarea {
  font-size: 14px;
  background: #fcfcfc;
}

.courier-modal textarea {
  padding-top: 6px;
}

.courier-modal.create-courier-modal .dialog-content-box {
  width: 50vw !important;
  min-width: 500px;
}

.courier-modal.run-courier-modal .dialog-content-box {
  width: 60vw !important;
  min-width: 500px;
}

.courier-modal.create-courier-modal .courier-container,
.courier-modal.run-courier-modal .courier-container {
  min-height: 500px;
}

.courier-content,
.courier-feed-content {
  height: calc(100vh - 115px);
  overflow-y: scroll;
}

.courier-modal .json-editor > div {
    border: 1px solid rgb(187, 187, 187) !important;
}

.courier-modal .json-editor.read-only > div {
    border: 1px solid rgb(240, 240, 240) !important;
}

.courier-modal .json-editor .CodeMirror {
    background-color: #fcfcfc !important;
}

.courier-modal .json-editor .CodeMirror-container,
.courier-modal .json-editor .CodeMirror-container-read-only {
    width: 100%;
}

.courier-groups-table {
  border-collapse: collapse;
}

.courier-groups-table th {
  text-transform: uppercase;
}

.courier-groups-table thead th:first-child {
  padding-right: 20px;
  padding-left: 0px;
}

.courier-groups-table thead th + th {
  padding-left: 20px;
  padding-right: 20px;
}

.courier-groups-table thead th:last-child {
  padding-left: 20px;
  padding-right: 0px;
}

.courier-groups-table tbody td:first-child {
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 0px;
  padding-left: 0px;
}

.courier-groups-table tbody td + td {
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 0px;
  padding-left: 20px;
}

.courier-groups-table tbody td:last-child {
  padding-top: 20px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 20px;
}

.courier-groups-table tr th:first-child,
.courier-groups-table tr td:first-child {
  text-align: left;
}

table.courier-groups-table tr th:last-child {
  text-align: right;
}

table.courier-groups-table tr td:last-child {
  text-align: center;
}

.courier-wait-value,
.courier-offset-value,
.courier-group-offset-value {
  width: 50px;
  height: 28px;
  display: inline-block;
  padding-right: 20px;
}

.courier-wait-value > input,
.courier-offset-value > input,
.courier-group-offset-value > input {
  width: 100%;
  height: 26px;
  padding-left: 10px;
  font-size: 14px;
  border-color: #bbb;
  background: #fcfcfc;
}

.courier-wait-value > input:hover,
.courier-offset-value > input:hover,
.courier-group-offset-value > input:hover
.courier-wait-value > input:focus,
.courier-offset-value > input:focus,
.courier-group-offset-value > input:focus {
  border-color: #777;
}

.courier-wait-value > input:disabled,
.courier-offset-value > input:disabled,
.courier-group-offset-value > input:disabled {
  border-color: #f0f0f0;
}

.courier-wait-unit,
.courier-offset-unit,
.courier-group-offset-unit {
  width: 110px;
  display: inline-block;
  padding-right: 7px;
  vertical-align: top;
}

.x-scroll-panel-content {
    overflow-x: auto !important;
}