/* main header elements ------------------------------------------------- */
img.logobug {
  margin: 6px .5rem 6px 0;
  min-width: 48px;
  max-width: 48px;
}
.logobug-wrapper {
  white-space: nowrap;
  flex: 0 1 56px;
}
header h1 {
  line-height: 1.4;
  padding-right: 1rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex: 1 1 0%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 3;
}
header h1 .icon {
  padding: 0 .5rem;
  font-size: inherit;
}
.about-text {
  font-size: .75rem;
  font-weight: 400;
  flex: 1 1 0%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  letter-spacing: .025rem;
}
.menu-icon {
  display: none;
}
.header-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex: 1 1 0%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 2;
}
.header-controls:empty {
  width: 0;
  flex-grow: 0;
}
input.borderless {
  border: 1px solid #fff;
  background-color: #fff;
  width: 280px;
}
.menu-icon {
  display: none;
}

/* HYPERLINKS PER FUNCTIONAL AREA --------------------------------------- */
/* nav header utility links --------------------------------------------- */
.nav-header a {
  display: inline-block;
  font-size: .75rem;
  color: #888;
  padding-left: .5rem;
}
.nav-header a:first-child {
  padding-left: 0;
}
.nav-header a:link {
  color: #888;
}
.nav-header a:visited {
  color: #888;
}
.nav-header a:hover {
  color: #3c7ac2;
}
.nav-header a:active {
  color: #689fde;
}

/* header title/hyperlink for "back to" on child pages ------------------ */
h1 a,
h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:active {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
  cursor: pointer;
}

/* header area ACTION links --------------------------------------------- */
.header-controls a {
  display: inline-block;
  font-size: .961rem;
  padding: .25rem .5rem;
  font-weight: 600;
  letter-spacing: .025rem;
  border: 1px solid #4287d6;
  margin-left: .25rem;
  color: #fff;
}
.header-controls a:link {
  color: #fff;
}
.header-controls a:visited {
  color: #fff;
}
.header-controls a:hover {
  color: #fff;
  border-color: #fff;
  transition: none;
}
.header-controls a:active {
  color: #d8dde4;
  border: 1px solid #4287d6;
}

/* sub-navigation tabs -------------------------------------------------- */
.sub-nav a {
  font-size: .961rem;
  font-weight: 400;
  cursor: pointer;
  padding: 1px 2.5rem 2px 2rem;
  color: #fff;
  position: relative;
}
.sub-nav a:hover {
  background-color: #79aae4
}
.sub-nav a:hover:after {
  font-family: FontAwesome;
  content: "\f107";
  position: absolute;
  right: 1rem;
}
.sub-nav a.selected {
    background-color: #79aae4;
}
.sub-nav a.selected:after {
  font-family: FontAwesome;
  content: "\f107";
  position:absolute;
  right: 1rem;
}

/* nav sidebar links ---------------------------------------------------- */
.nav-sidebar a {
  font-size: 1rem;
  display: block;
  padding: .25rem .75rem .25rem 0;
  text-align: right;
  white-space: nowrap;
  border-right: 2px solid #fff;
}
.nav-sidebar a:hover {
  border-right: 2px solid #d9e7f7;
}
.nav-sidebar a.currentnav,
.nav-sidebar .currentnav a {
  border-right: 2px solid #d9e7f7;
  color: #555;
}

/* tab navigation -> "pills" -------------------------------------------- */
.pills a {
  color: #333;
  font-size: .961rem;
  font-weight: 400;
  display: inline-block;
  padding: .25rem .75rem;
  border-radius: 1rem;
  cursor: pointer;
}
.pills.pills-small a {
  display: table;
  font-size: .875rem;
  padding: .125rem .5rem;
  margin-bottom: .5rem;
}
.pills a:hover {
  background-color: #b3cfef;
}
.pills a.selected {
  background-color: #7babe2;
  color: #fff !important;
}
.pills a.selected:hover {
  background-color: #7babe2 !important;
  color: #fff;
  cursor: default;
}

/* COMPONENTS W/ ICONS -------------------------------------------------- */
/* inserts down-caret triangle before items with .has-menu -------------- */
.has-menu:after {
  font-family: FontAwesome;
  content: "\f0d7";
  color: #333;
  position: absolute;
  right: .5rem;
}
.menu-sortable-link.has-menu:after {
  right: -.75rem;
}

/* inserts right-caret triangle & down-caret before items with .disclosure */
.disclosure {
  position: relative;
  padding-left: 1.25rem;
  cursor: pointer;
  text-decoration: none;
}
.disclosed {
  position: relative;
  padding-left: 1.25rem;
  cursor: pointer;
  text-decoration: none;
}
.disclosure:before {
  font-family: FontAwesome;
  content: "\f0da";
  font-size: 1.125rem;
  width: 1rem;
  text-align: center;
  color: #333;
  position: absolute;
  top: -3px;
  left: 0;
  text-decoration: none;
}
.disclosed:before {
  font-family: FontAwesome;
  content: "\f0d7";
  font-size: 1.125rem;
  width: 1rem;
  text-align: center;
  color: #333;
  position: absolute;
  top: -3px;
  left: 0;
  text-decoration: none;
}
.reverse.disclosure:before {
  font-family: FontAwesome;
  content: "\f0da";
  font-size: 1.125rem;
  width: 1rem;
  text-align: center;
  color: #333;
  position: absolute;
  top: -2px;
  left: 0;
  text-decoration: none;
}

/* search/filter control ------------------------------------------------ */
.filter-input-group {
  position: relative;
  flex: 0 1 auto;
}
input.filter-input {
  width: 256px;
  padding-right: 2rem;
}
/* inserts magnifying glass inside filter input field ------------------- */
.filter-input-group .fa-search-minus {
  color: #a1a1a1;
  position: absolute;
  top: .5rem;
  right: .5rem;
}
/* inserts X circle (clear control) inside filter input field ----------- */
.filter-input-group .fa-times-circle {
  color: #888;
  font-size: 20px;
  position: absolute;
  top: .4rem;
  right: .4rem;
  cursor: pointer;
}

/* alert success icon --------------------------------------------------- */
.alert.alert-success p:before {
  font-family: FontAwesome;
  content: "\f00c";
  font-size: 1.125rem;
  color: #2ca01c;
  position: absolute;
  top: 0;
  left: -1.5rem;
}
/* alert warning icon --------------------------------------------------- */
.alert.alert-warning p:before {
  font-family: FontAwesome;
  content: "\f06a";
  font-size: 1.125rem;
  color: #f5a623;
  position: absolute;
  top: 0;
  left: -1.5rem;
}
/* alert error icon ----------------------------------------------------- */
.alert.alert-error p:before {
  font-family: FontAwesome;
  content: "\f071";
  font-size: 1rem;
  color: #d65558;
  position: absolute;
  top: 0;
  left: -1.5rem;
}

/* CBUI FLEXBOX TABLES -------------------------------------------------  */
.cbui-table {
  display: flex;
  flex-flow: column;
  font-size: .875rem;
  width: 100%;
  margin-bottom: 1rem;
}
.cbui-tablerow {
  display: flex;
  flex-wrap: no-wrap;
  justify-content: space-between;
  position: relative;
  padding: .75rem 1rem;/*center items using padding
  since min-height and align-items doesn't work well in IE11*/
  margin: 0;
}
.cbui-tablerow.padding-left {
  padding-left: 1rem;
}
.cbui-tablerow.padding-left-0 {
  padding-left: 0;
}
.cbui-tablerow.row-min {
  min-height: 1rem;
}
.cbui-tablerow.items-top {
  align-items: flex-start;
}
.cbui-table-header {
  display: flex;
  align-items: center;
  flex-wrap: no-wrap;
  justify-content: space-between;
  position: relative;
  border-bottom: solid 1px #d1d1d1;
  font-size: .75rem;
  color: #555;
  min-height: 2.25rem;
  padding-left: 1.5rem;
  cursor: default;
}
.cbui-table-header-filled {
  display: flex;
  min-height: 1rem;
  align-items: center;
  flex-wrap: no-wrap;
  justify-content: space-between;
  position: relative;
  border-width: 0;
  font-size: .75rem;
  min-height: 2rem;
  background-color: #eceff2;
  cursor: default;
}
.cbui-table-header-filled.padding-left {
  padding-left: 1rem;
}
.cbui-table-header.padding-left {
  padding-left: 1rem;
}
.cbui-table-header .sorter {
  position: relative;
  padding-right: .75rem;
  cursor: pointer;
}
.cbui-table-header .dynamic-active:after {
  font-family: FontAwesome;
  content: "\f0d7";
  color: #555;
  position: absolute;
  right: 0;
}
.cbui-table-header .dynamic-inverted:after {
  font-family: FontAwesome;
  content: "\f0d8";
  color: #555;
  position: absolute;
  right: 0;
}
.cbui-tablerow-title {
  font-weight: 600;
  font-size: .961rem !important;
}
section.has-hover:hover {
  background-color: #f6fafd;
  transition: all linear 0.2s;
  cursor: pointer;
}
.cbui-tablerow-expanded {
  padding: .5rem .5rem 1rem 1rem;
}
.cbui-tablerow-expanded:empty {
  padding: 0;
}
section.success {
  border-left: .5rem solid #80c677;
  color: #333;
}
section.warning {
  border-left: .5rem solid #f9ca7b;
  color: #333;
}
section.error {
  border-left: .5rem solid #e07f82;
  color: #333;
}

/* list of properties in the bucket details section --------------------- */
.cbui-table-bucketprops {
  line-height: 2.2;
  font-size: .75rem;
  flex: 0 1 auto;
  max-width: 280px;
}
/* list of properties in the servers details section -------------------- */
.cbui-table-props {
  font-size: .75rem;
  flex: 0 1 auto;
  min-width: 280px;
  max-width: 580px;
}
.cbui-table-props div {
  margin-top: .75rem;
  line-height: 1.3;
}
.cbui-table-props div:first-child {
  margin-top: 0;
}
/* usage meters in the servers & buckets details sections --------------- */
.cbui-table-meters {
  margin: 1rem 2rem 0 2rem;
  flex: 0 1 100%;
  max-width: 480px;
}
.cbui-table-meters + .cbui-table-meters {
  margin: 1rem 2rem 0 1rem;
}
.cbui-table-meters.buckets .row {
  display: block;
}
.cbui-table-meters.buckets .row span {
  display: block;
}
.cbui-table-meters.servers .bar-usages .label-bottom-1.with-square:before {
  background-color: #efebe0;
}
/* table cell-related stuff --------------------------------------------- */
.cbui-table-cell {
  flex: 1 1 0%; /*flex-basis must have unit, it's important for IE11*/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 1rem;
}
.cbui-table-cell.status {
  flex: 0 1 .5rem;
  min-height: 3rem;
  margin-right: 1rem;
  padding-right: 0;
}
.cbui-table-cell.status.success {
  background-color: #56b349;
}
.cbui-table-cell.status.warning {
  background-color: #f9ca7b;
}
.cbui-table-cell.status.error {
  background-color: #e07f82;
}
/* flex-grow factors control column width ------------------------------- */
.cbui-table-cell.flex-grow-0 {
  flex-grow: 0;
}
.cbui-table-cell.flex-grow-half {
  flex-grow: .5;
}
.cbui-table-cell.flex-grow-1 {
  flex-grow: 1;
}
.cbui-table-cell.flex-grow-1-5 {
  flex-grow: 1.5;
}
.cbui-table-cell.flex-grow-2 {
  flex-grow: 2;
}
.cbui-table-cell.flex-grow-2-5 {
  flex-grow: 2.5;
}
.cbui-table-cell.flex-grow-3 {
  flex-grow: 3;
}
.cbui-table-cell.wrap {
  white-space: normal;
  overflow: visible;
}
.cbui-tablerow .cbui-table-cell:last-child {
  padding-right: 0;
}
.cbui-table .icon {
  font-size: .75rem;
}
.cbui-table-header .icon,
.cbui-table-header-filled .icon {
  color: #555;
  font-size: .75rem;
  margin-left: .5rem;
}

/* PANEL DIALOGS -------------------------------------------------------- */
.panel {
  background-color: #fff;
  border: none;
  border-radius: 3px 3px 2px 2px;
  box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.25);
  z-index:0;
  margin-bottom: 2.5rem;
}
.panel-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #4287D6;
  color: #fff;
  border-radius: 3px 3px 0px 0px;
  padding: 0 2rem 0 1.25rem;
  min-height: 3rem;
  height: 1px;
}
.panel-header.flex-left {
  justify-content: flex-start;
}
.panel-content {
  padding: 1.5rem;
  font-size: .961rem;
}
.panel-footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid #ececec;
  margin-bottom: 0 !important;
  padding: .75rem 1rem;
}
.panel-footer.spaced {
  justify-content: space-between;
}
.panel-footer a {
  margin-right: 1.5rem;
  font-size: .961rem;
}
.panel-footer a.tight {
  margin-right: 1rem;
}

/* medium-width modal dialog (uses .panel) ------------------------------ */
.dialog-med {
  width: 530px;
}
.dialog-med .panel-content {
  padding: 1rem 2rem 1px 2rem;
  margin-bottom: .5rem;
  position: relative;
  z-index: 1;
}
.dialog-med .panel-footer {
  position: relative;
  z-index: 2;
}

/* adds white "shadow" above footer or below header to indicate scrollability
   when max-height is set on contents ----------------------------------- */
.panel-footer.scroll-shadow {
  box-shadow: 0 -36px 28px -12px #fff;
}
.scroll-shadow-top {
  box-shadow: 0 16px 24px 10px #fff;
}
.filter-input-group.scroll-shadow-top {
  z-index: 2;
}

/* for an un-closable modal dialog -------------------------------------- */
.without-titlebar-close .ui-dialog-titlebar-close {
  display: none;
}

/* small-width modal dialog (uses .panel) ------------------------------- */
.dialog-small .panel-header {
  padding: 0 1rem;
}
.dialog-small .logobug {
  margin: 0 .5rem 0 0;
  min-width: 40px;
  max-width: 40px;
}
.dialog-small h2 {
  flex:1 1 auto;
}
.dialog-small {
  width: 380px;
}
.dialog-small .panel-content {
  padding: 1.5rem 1.25rem 1rem 1.25rem;
}
.dialog-small .panel-footer {
  border: 0;
  padding: 0 1rem 1rem 1rem;
}

/* delete and other confirmation dialogs -------------------------------- */
.fa-warning + p {
  margin: .25rem 0 .5rem 1rem;
  line-height: 1.4;
}

/* setup dialog (uses .panel) ------------------------------------------- */
.dialog-wizard  .panel-footer {
  justify-content: space-between;
}
/* setup and sign-in page background ------------------------------------ */
.sign-in-background {
  background: #eceff2;
  height: 4rem;
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
}

/* large-width modal dialog (uses .panel) ------------------------------- */
.dialog-lg {
  width: 640px;
}

/* LABELS & BADGES ------------------------------------------------------ */
.label {
  font-size: .688rem;
  font-weight: 400;
  display: inline-block;
  line-height: 1.1;
  color: #333;
  text-align: center;
  text-decoration: none;
  border: 1px solid #fff;
  border-radius: 2px;
  padding: .3rem;
  position: relative;
  white-space: nowrap;
}
.label.cell-label {
  top: 2px;
  position: relative;;
}
.label.lt-blue {
  background-color: #d9e7f7;
}
.label.neutral {
  background-color: #d8d8d8;
}
.label.red {
  background-color: #cc2a2e;
  color: #fff;
}

.badge {
  padding: .3rem .4rem;
  min-width: 1rem;
  border-radius: 1rem;
  line-height: .6;
  position: relative;
  left: -12px;
  top: -8px;
}
.activities .badge {
  background-color: #f5a623;
  color: #fff;
  left: -1px;
  top: 0;
  padding: .275rem;
}
.badge.notify {
  background-color: #d9e7f7;
  color: #333;
  left: 0;
  top: -2px;
}
.badge.red-3 {
  color: #fff;
  background-color: #e07f82;
}

/* alerts  -------------------------------------------------------------- */
.animate-alert.ng-move,
.animate-alert.ng-enter,
.animate-alert.ng-leave {
  transition: all ease .5s;
}
.animate-alert.ng-leave.ng-leave-active,
.animate-alert.ng-move,
.animate-alert.ng-enter {
  opacity: 0;
  height: 0;
}
.animate-alert.ng-leave,
.animate-alert.ng-move.ng-move-active,
.animate-alert.ng-enter.ng-enter-active {
  opacity: 1;
  height: 2rem;
}
.alert {
  overflow: hidden;
  text-align: center;
  line-height: 2rem;
  height: 2rem;
  font-size: .75rem;
  font-weight: 600;
  display: block;
  color: #333;
  position: relative;
  padding-right: 3rem;
}
.alert .close {
  position: absolute;
  right: 1.5rem;
  font-size: 1rem;
}
.alert p {
  margin: 0;
  display: inline-block;
  position: relative;
}
.alert a {
  font-weight: 600;
}
.alert a:hover {
  text-decoration: underline;
}
.alert .close:hover {
  text-decoration: none;
}
.alert-success {
  background-color: #e9f5e8;
}
.alert-success a,
.alert-success span
 {
  color: #0a8754;
}
.alert-warning {
  background-color: #fdebcf;
  margin-bottom: 2px;
}
.alert-warning a,
.alert-warning span {
  color: #f5a623;
  text-transform: uppercase;
  font-size: .825rem;
  margin-left: .5rem;
}
.alert-error {
  background-color: #f8dfe0;
}
.alert-error a,
.alert-error span {
  color: #cc2a2e;
}

/* statistic charts ----------------------------------------------------- */
.chart-small {
  background-color: #fff;
  border: 1px solid #d1d1d1;
  display: table;
  margin: 0 auto .25rem auto;
}
.chart-cell-small {
  border: 4px solid #fff;
  border-width: 2px 4px;
  padding: .5rem .5rem .25rem .5rem;
  text-align: center;
  font-size: .688rem;
  color: #333;
  font-weight: 600;
  display: inline-block;
  cursor: pointer;
  position: relative;
  line-height: 1.2;
  width: 174px;
}
.chart-column-headers {
  padding: 0 0 .5rem 0;
  margin-top:.5rem;
  text-align: center;
  display: inline-block;
  width: 25%;
}
.columns-four {
  max-width: 710px;
}
.columns-three {
  max-width: 600px;
}
.columns-three .chart-column-headers {
  width: 33%;
}
.columns-five {
  max-width: 888px;
}

/* MEMORY/DISK USAGE METERS --------------------------------------------- */
.bar-usages .marker {
  position: absolute;
  display: block;
  width: 1px;
  height: 1.75rem;
  font-size: 0;
  line-height: 0;
  top: -.25rem;
}
.bar-usages .marker-0 {
  background-color: #333;
}
.bar-usages {
  width: 100%;
}
/* bar usages labels ---------------------------------------------------- */
.bar-usages .usage-label {
  font-size: .75rem;
  white-space: nowrap;
  position: relative;
  color: #333;
}
.bar-usages .label-bottom.with-square,
.bar-usages.label-top-has-square .label-top.with-square {
  padding-left: 1rem;
}
.bar-usages .label-bottom.with-square:before,
.bar-usages.label-top-has-square .label-top.with-square:before {
  padding: 4px;
  max-height: 4px;
  position: absolute;
  content: "";
  left: 0;
  top: 4px;
  border: 1px solid #a1a1a1;
}
.bar-usages .label-top-0 {
  float: left;
}
.bar-usages .label-top-1 {
  float: right;
}
.bar-usages.bucket-add .label-top-1 {
  display: none;
}
.bar-usages .label-bottom-0.with-square:before {
  background-color: #8eb7e6;
}
.bar-usages .label-bottom-1.with-square:before {
  background-color: #b3cfef;
}
.bar-usages .label-bottom-2.with-square:before {
  background-color: #efebe0;
}
/* bar usages items ----------------------------------------------------- */
.bar-usages .usage {
  clear: both;
  height: 1rem;
  position: relative;
}
.bar-usages .usage .item {
  height: .75rem;
  position: absolute;
}
.bar-usages .usage .usage-item-0 {
  background-color: #efebe0; /* .beige-1 */
}
.bar-usages .usage .usage-item-1 {
  background-color: #b3cfef; /* .blue-4 */
}
.bar-usages .usage .usage-item-2 {
  background-color: #8eb7e6; /* .blue-3 */
}
.bar-usages .usage .usage-item-3 {
  background-color: #d8dde4;  /* .gray-blue-3 */
}
/* bar usages specifics by case ----------------------------------------- */
.bar-usages.label-top-0-other-data .label-top-0.with-square:before {
  background-color: #d8dde4;
}
.bar-usages.label-top-0-red .label-top-0 {
  color: rgb(228, 58, 27);
}
.bar-usages.label-top-0-red .marker-0 {
  background-color: rgb(228, 58, 27);
}
.bar-usages.overcommitted .label-bottom-2:before {
  background-color: #e07f82; /* .red-3 */
}
.bar-usages.overcommitted .usage-item-0 {
  background-color: #e07f82; /* .red-3 */
}
.bar-usages.overcommitted .marker-1 {
  background-color: rgb(68, 66, 69);
}
.bar-usages.overcommitted.bar-usages-dashboard .label-bottom-1:before {
  background-color: #e07f82; /* .red-3 */
}
.bar-usages.overcommitted.bar-usages-dashboard .label-bottom-2:before {
  background-color: #efebe0;
}
.bar-usages.overcommitted.bar-usages-dashboard.has-free-space .usage-item-0 {
  background-color: #efebe0;
}
.bar-usages.overcommitted.bar-usages-dashboard.has-free-space .usage-item-1 {
  background-color: #e07f82; /* .red-3 */
}

/* waiting spinner ------------------------------------------------------ */
.global-spinner {
  background: url(/images/spinner/spinner_3.gif) center 43% no-repeat rgba(255, 255, 255, 0.6);
  z-index: 10000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.z-index-10001 {
  z-index: 10001!important;
}
.spinner {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(/images/spinner/spinner_3.gif) center 43% no-repeat #fff;
}

/* dropdown menus - custom selectize styles ----------------------------- */
.cbui-select .selectize-input.selectize-focus {
  border-color: #a1a1a1;
}
.cbui-select .ng-dirty.ng-invalid > div.selectize-input {
  border-color: #a1a1a1;
}
.cbui-select .selectize-dropdown-header-close {
  color: #333;
}
.cbui-select .selectize-dropdown, .cbui-select .selectize-input, .cbui-select .selectize-input {
  height: auto;
}
.ui-select-container {
  line-height: 1;
}
.ui-select-container.single {
  min-width: 200px;
}
.ui-select-container.single span {
  display: inline-block;
  vertical-align: bottom;
  max-width: 167px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.ui-select-container.single .select-item {
  max-width: 200px;
  display: block;
}
.ui-select-container.single .ui-select-match {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  padding-right: 15px;
  max-width: 182px;
}
.ui-select-container.single .ui-select-choices-row.disabled {
  background: #fff;
  cursor: default;
  text-decoration: none;
}
.ui-select-container.single .ui-select-choices-row.disabled a {
  color: #666;
  font-weight: bold;
  cursor: default;
  text-decoration: none;
}
.ui-select-multiple {
  background: #fff;
  border: 1px solid #ccd3d7;
  font-size: 13px;
  padding: 3px;
  position: relative;
  z-index: 1;
}
.ui-select-multiple input.ui-select-search {
  height: 2rem!important;
  padding: 0;
  width: auto;
  display: inline;
}
.ui-select-multiple > .ui-select-choices {
  position: absolute;
  background: #fff;
  left: 0;
  top: 100%;
  margin: 1px 0 0 0;
}
.ui-select-multiple .ui-select-match-item {
  display: inline-block;
  font-size: 12px;
  max-width: 274px;
  min-width: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  padding: 0 0.5rem 0 0;
  margin: 0 3px 3px 0;
  cursor: default;
  height: 2rem;
}
.ui-select-multiple.ui-select-bootstrap .ui-select-match .close {
  display: inline-block;
  cursor: pointer;
  height: 1rem;
  vertical-align: middle;
}

.cbui-select .selectize-dropdown,
.cbui-select .selectize-input {
  font-family: inherit;
  font-size: 14px;
  -webkit-font-smoothing: inherit;
  line-height: 20px;
  color: #333;
}
.cbui-select .selectize-dropdown,
.cbui-select .selectize-input {
  font-family: inherit;
  font-size: 14px;
  -webkit-font-smoothing: inherit;
  line-height: 20px;
  color: #333;
}
.cbui-select .selectize-input,
.cbui-select .selectize-control.single .selectize-input,
.cbui-select .selectize-control.single .selectize-input.input-active {
  display: inline-block;
  cursor: text;
  background: #fff !important;
  border-color: #d1d1d1 !important;
}
.cbui-select .selectize-input {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 100%;
  height: 2rem;
  line-height: 1.8rem;
  padding: 0 8px;
  overflow: hidden;
  border: 1px solid #d1d1d1;
  border-radius: 3px;
}
.cbui-select .selectize-input.focus {
  border-color: #a1a1a1 !important;
}
.cbui-select .selectize-dropdown {
  position: absolute;
  z-index: 10;
  margin: -1px 0 0 0;
  background: #ffffff;
  border: 1px solid #a1a1a1;
  border-top: 0 none;
  border-radius: 0 0 3px 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}
.cbui-select .selectize-dropdown [data-selectable],
.cbui-select .selectize-dropdown .optgroup-header {
  padding: 12px 8px;
}
.cbui-select .selectize-dropdown .active {
  color: #333;
  background-color: #f6fafd;
}
.cbui-select div.selectize-input:after {
  right: 10px !important;
}
.cbui-select .selectize-control.single .selectize-input,
.cbui-select .selectize-dropdown.single {
  border-color: #d1d1d1;
}


/* custom selectize styles for documents area --------------------------- */
.cbui-select.narrow > .selectize-input {
  width: 64px;
}
.cbui-select.narrow.ui-select-container {
  min-width: 64px;
}

/* running tasks progress menu ------------------------------------------ */
.tasks-progress.ng-enter,
.tasks-progress.ng-leave {
  transition: 250ms cubic-bezier(0.25, 0.1, 0.25, 1) all;
  transform-origin: 100% 0;
}
.tasks-progress.ng-leave.ng-leave-active,
.tasks-progress.ng-enter {
  transform: scaleY(0.1) scaleX(0.1);
  top: 22px!important;
  right: 0!important;
}
.tasks-progress.ng-enter.ng-enter-active,
.tasks-progress.ng-leave {
  transform: scaleY(1) scaleX(1);
}

.tasks-progress {
  position: absolute;
  top: 22px;
  right: 0;
  z-index: 100;
  background-color: #fff;
  box-shadow: 0 3px 16px 0px rgba(0,0,0,0.75);
}
.tasks-progress .close-tasks {
  width: 100%;
  text-align: right;
  padding: .75rem 1rem 0 0;
  font-size: 1rem;
  color: #333;
  line-height: .9;
}
.tasks-progress .close-tasks span {
  cursor: pointer;
}
.close-tasks + .panel-content {
  padding-top: 0;
}
.tasks-progress .bar div,
.tasks-progress .bar-wrapper {
  height: 1rem;
  width: 338px;
}
.tasks-progress .bar-wrapper {
  margin: .25rem 0 1rem 0;
  position: relative;
  border: 1px solid #c6dbf2;
  border-radius: 3px;
  overflow: hidden;
}
.tasks-progress .bar.positive {
  left: 0;
}
.tasks-progress .bar.negative {
  right: 0;
}
.tasks-progress .bar {
  position: absolute;
  overflow: hidden;
  height: 1rem;
}
.tasks-progress .bar div {
  position: absolute;
}
.tasks-progress .bar.negative div {
  background: #fff;
  background: linear-gradient(to right, transparent 0%, transparent 98%, #7db9e8 95%, #7db9e8 100%);
  background-size: 34px auto;
  right: 0;
}
.tasks-progress .bar.positive {
  background-color: #7db9e8;
}
.tasks-progress .bar.positive div {
  background: #fff;
  background: linear-gradient(to right, transparent 0%, transparent 98%, #fff 98%, #fff 100%);
  background-size: 34px auto;
  left: 0;
}

/* per item (row) task progress meter for buckets & servers ------------- */
.task-progress-row {
  position: relative;
  height: .5rem;
  background-color: #ececec;
  flex: 2 0 auto;
}
.task-progress-row-meter {
  position: absolute;
  height: 100%;
  background-color: #7babe2;
}
.task-progress-row-text {
  font-size: .75rem;
  white-space: nowrap;
  flex: 0 0 100px;
  text-align: right;
  margin: 0 1rem 1px 1rem;
}

/* create xdcr replication dialog --------------------------------------- */
.dynamic-hightlight {
  background-color: #c6dbf2;
}
.match_indicator {
  background-color: #ffbd44;
  color: #fff;
  font-size: 0.7rem;
  text-align: center;
  line-height: 1.5rem;
  position: absolute;
  width: 4rem;
  height: 1.6rem;
  top: -1.8rem;
  right: 0.2rem;
}
.match_indicator.dynamic_match {
  background-color: green;
}
.match_indicator .no_match,
.match_indicator.dynamic_match .match,
.match_indicator.dynamic_spinner .loading {
  display: block;
}
.match_indicator.dynamic_spinner .no_match,
.match_indicator.dynamic_spinner .match,
.match_indicator.dynamic_match .no_match,
.match_indicator.dynamic_match .loading,
.match_indicator .loading,
.match_indicator .match {
  display: none;
}

/* documents and views editing code viewer ------------------------------ */
.read-only-editor {
  opacity:.7;
}
.read-only-editor .CodeMirror-cursor {
  visibility: hidden !important;
}
.codemirror-auto-height .CodeMirror {
  height: auto;
}

/* info popup icon styles (everything else in tooltip.css) -------------- */
.icon-info {
  cursor: pointer;
  color: #a1a1a1;
  font-size: 1.125rem;
}
.icon-info:hover {
  color: #000;
}
.icon-info .fa-stack-1x {
  line-height: inherit;
  font-size: .5em;
  top: 1px;
}
label + .fa-stack,
h4 + .fa-stack { /* elevate info icon next to label or heading */
  top: -4px;
}

/* icon radio buttons and checkboxes using Font Awesome ----------------- */
input[type="radio"],
input[type="checkbox"] {
  display: none;
}
input[type="radio"] + label,
input[type="checkbox"] + label {
  display: inline-block;
  font-weight: normal;
  cursor: pointer;
  font-size: .961rem;
  padding-left: .4rem;
  margin-right: .75rem;
}
input[type="radio"] + label:last-child,
input[type="checkbox"] + label:last-child {
  margin-right: 0;
}
input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
  position: relative;
  display: inline-block;
  font: normal normal normal 16px/1 FontAwesome;
  color: #a1a1a1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 1rem;
  left: -2px;
}
input[type="checkbox"][disabled="disabled"] + label:before,
input[type="radio"][disabled="disabled"] + label:before {
  opacity: .5;
}
input[type="checkbox"] + label:before {
  top: 1px;
}
input[type="radio"] + label:before {
  content: "\f1db"; /* radio unchecked */
}
input[type="radio"]:checked + label:before {
  content: "\f192"; /* radio checked */
  color: #555;
}
input[type="checkbox"] + label:before {
  content: "\f096"; /* checkbox unchecked */
}
input[type="checkbox"]:checked + label:before {
  content: "\f046"; /* checkbox checked */
  color: #555;
}

/* basic menu ----------------------------------------------------------- */
.menu-toggle {
  color: #555;
  font-weight: 500;
  font-size: .875rem;
  display: inline-block;
  position: relative;
  cursor: pointer;
}
.menu-toggle:hover {
  color: #4287d6;
}
.menu-toggle:active {
  color: #4287d6;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown.open .dropdown-menu {
  display: block;
}
.dropdown .dropdown-menu {
  display: none;
}
.dropdown-menu {
  background-color: #fff;
  position: absolute;
  top: 28px;
  right: 0;
  text-align: left;
  z-index: 10;
  border: 1px solid #d1d1d1;
  border-radius: 2px;
  box-shadow: 0 5px 6px 0 rgba(0,0,0,0.25);
  white-space: nowrap;
}
.dropdown-menu.dropdown-menu-select-like a {
  color: #4287d6;
  font-size: .875rem;
  line-height: 2.5rem;
  display: block;
  border-bottom: 1px solid #d1d1d1;
  padding: 0 2rem;
}
.dropdown-menu.dropdown-menu-select-like a:last-child {
  border-bottom: none;
}
.dropdown-menu.dropdown-menu-select-like a:hover {
  color: #000;
  background-color: #f6fafd;
  transition: none;
}
/* logged-in user menu -------------------------------------------------- */
.nav-header a.dropdown-toggle  {
  margin: 0 .5rem;
  padding-right: .5rem;
  vertical-align: top;
}
.nav-header .dropdown-menu {
  top: 22px;
}

/* service widgets displaying status & details for each service + XDCR -- */
.service-widget {
  padding: 0 0 0 .5rem;
  flex: 0 1 auto;
  margin-right: 1.5rem;
}
.service-widget > a,
.service-widget > .error {
  font-size: .75rem;
}
.service-widget > a {
  display:block;
  color: #000;
  white-space: nowrap;
}
.service-widget > a:hover {
  color: #000;
  text-decoration: underline;
}

/* DYNAMIC STATUSES - SERVERS/BUCKETS/SERVICES -------------------------- */
/* old-style background colors ------------------------------------------ */
.dynamic_inactive {
  background-color: #a1a1a1;
}
.dynamic_healthy {
  background-color: #80c677;
}
.dynamic_inactiveFailed,
.dynamic_warmup {
  background-color: #f6a623;
}
.dynamic_unhealthy {
  background-color: #e07f82;
}

/* new-style border colors ---------------------------------------------- */
.service-widget.dynamic_inactive,
section.dynamic_inactive {
  background-color: #fff;
  border-left: 8px solid #a1a1a1;  /* gray-3 */
}
.service-widget.dynamic_healthy,
section.dynamic_healthy {
  border-left: 8px solid #80c677;  /* green-3 */
  background-color: #fff;
}
.service-widget.dynamic_warmup,
.service-widget.dynamic_inactiveFailed,
section.dynamic_inactiveAdded,
section.dynamic_warmup {
  border-left: 8px solid #f7a623;  /* orange-1 */
  background-color: #fff;
}
.service-widget.dynamic_unhealthy,
section.dynamic_inactiveFailed,
section.dynamic_unhealthy {
  border-left: 8px solid #d65558; /* red-2 */
  background-color: #fff;
  animation: pulse_unhealthy 3s infinite;
}
.dynamic_selected { /* selected chart cell in statistics */
  background-color: #ecf3fa;
}

@keyframes pulse_unhealthy {
  50% {
    border-left-color: #f9e9ea; /* red-7 */
  }
}

/* selecting user roles ------------------------------------------------  */
.select-user-roles div,
.select-user-roles label,
.select-user-roles input[type="checkbox"] + label {
  position: relative;
  margin-top: 1px;
  font-size: .962rem;
  line-height: 2;
  font-weight: normal;
  margin-left: -8px;
  padding-left: 8px;
}
.select-user-roles label,
.select-user-roles input[type="checkbox"] + label {
  cursor: pointer;
}
.select-user-roles .disclosure {
  padding-left: 1.75rem;
}
.select-user-roles .disclosure:before {
  left: 6px;
  top: -3px;
}
.select-user-roles div .indent-1 {
  margin-left: 1rem;
}
.select-user-roles .has-selection {
  background-color: #ecf3fa;
}
.has-selection:after {
  color: #56b349;
  font-family: FontAwesome;
  content: "\f00c";
  font-size: 1rem;
  position: absolute;
  top: -1px;
  right: 1rem;
}

/* colored box with rounded corners for zero content situations --------- */
.zero-content {
  background-color: #f6f7f9;
  font-size: .875rem;
  padding: 1rem 2rem;
  border-radius: 9px;
  margin: .5rem;
  text-align: center;
}

/* colored box with rounded corners for content such as index definition  */
.content-box {
  border-radius: 9px;
  background-color: #d9e7f7;
  font-size: .75rem;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

/* for when services are presented as a simple column of checkboxes (no
   text input for quotas) ----------------------------------------------- */
.services .checkbox-service {
  margin-bottom: .5rem;
}

/* pagination ----------------------------------------------------------- */
.pagination {
  padding: 0 1.5rem 0 .5rem;
}
.pagination a {
  padding-left: .5rem;
}

/* CodeMirror JSON editor height ---------------------------------------- */
.height-100 .CodeMirror {
  height: 75vh;
}

/* "LOADING" animated ellipsis ------------------------------------------ */
.loading {
  display: inline-block;
  width: 1rem;
}
.loading-placeholder {
  display: inline-block;
  width: 1rem;
}
.loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  animation: ellipsis steps(4,end) 900ms infinite;
  content: "\2026"; /* ascii code for the ellipsis character */
  width: 0;
}
@keyframes ellipsis {
  to {
    width: 1rem;
  }
}
@-webkit-keyframes ellipsis {
  to {
    width: 1rem;
  }
}