/*-
 * #%L
 * thinkbig-ui-common
 * %%
 * Copyright (C) 2017 ThinkBig Analytics
 * %%
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *     http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * #L%
 */

/**
Common styles for feed-mgr and ops-mgr
 */

html, body {
  font-size: 14px;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

/* Always show scrollbars */
::-webkit-scrollbar {
  -webkit-appearance: none;
  height: 8px;
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: #c2c2c2;
  border-radius: 4px;
}

md-content.md-kylo-theme{
  background-color: #ffffff !important;
}

.kylo-logo {
  padding-top:5px;
}

/** on small views the height of the top bar (search container) gets smaller with default angular styles.
  this enforces it stay the same height
 */

@media (max-width: 959px) and (min-width: 0) and (orientation: landscape) {
  .md-toolbar-tools {
    height: inherit;
    max-height: inherit;
  }
}


.hover:hover {
  background-color: rgba(158, 158, 158, 0.2);
  -webkit-transition: opacity ease-in-out .5s;
  -moz-transition: opacity ease-in-out .5s;
  -ms-transition: opacity ease-in-out .5s;
  -o-transition: opacity ease-in-out .5s;
  transition: opacity ease-in-out .5s;
}

.bottom-align {
  box-sizing: border-box;
  border-top: 1px solid #ccc;
  bottom: 0;
  min-height: 40px;
  padding: 5px 40px 0 9px;
 /* position: absolute;*/
  width: 100%;
  background-color:#F9F9F9;
}

/* Toolbar area */

.menu {
  background-color: transparent;
  border: none;
  height: 38px;
  margin: 16px;
  width: 36px;
}

.collapsed-toggle-header {
  font-size:12px;
  margin-left:-5px;
}

md-sidenav md-toolbar h1 {
  margin: auto;
}

/* Sidenav area*/

md-list .md-button:not(.md-no-style) {
  color: #607D8B;
  font-weight: 500;
  text-align: left;
  text-transform: none;
}

md-list-item.with-padding.md-no-proxy {
  padding: 8px !important;
}


md-list-item .md-no-style, md-list-item:not(.with-padding).md-no-proxy {
  padding: 0px !important;
  line-height: inherit;
}

md-list .md-button:not(.md-no-style).selected {
  color: #3483BA;
  fill: #3483BA;
}

md-sidenav md-list {
  padding: 0px 0px 8px 0px;
}

md-sidenav md-list .alerts-count {
  background-color: red;
  color: white;
  padding: 3px;
  font-weight: 900;
  margin-left: 10px;
}

md-sidenav:not(.collapsed), md-sidenav.md-locked-open:not(.collapsed) {
  max-width: 200px;
  min-width: 200px;
  width: 200px;
}

md-sidenav.collapsed, md-sidenav.md-locked-open.collapsed {
  max-width: 50px;
  min-width: 50px;
  width: 50px;
}

md-list md-datepicker .md-button.md-icon-button {
  padding: 0px !important;
  width: inherit;
}

md-sidenav .collapse-btn {
  padding: 10px;
  color: #3483BA;
  background-color: #F9F9F9;
  cursor: pointer;
}

/* Primary content area */

#content {
  background-color: #F9F9F9;
}

#content {
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 17px;
  padding-bottom: 25px;
}

.layout-padding-left-right, .layout-padding-left-right-gt-sm, .layout-padding-left-right-gt-sm > *, .layout-padding-left-right-md, .layout-padding-left-right-md > *, .layout-padding-left-right > *, .layout-padding-left-right > .flex, .layout-padding-left-right > .flex-gt-sm, .layout-padding-left-right > .flex-md {
  padding-left: 8px;
  padding-right: 8px;
}

.layout-padding-right {
  padding-right: 10px;
}

.layout-padding-left {
  padding-left: 10px;
}

.layout-padding-left-16 {
  padding-left: 16px;
}

.layout-padding-indent {
  padding-left: 30px;
}

.layout-padding-indent button {
  margin-left: 0px;
}

.layout-padding-indent-20 {
  padding-left: 20px;
}

.layout-padding-indent button, .layout-padding-indent-20 button {
  margin-left: 0px;
}

.layout-padding-top-bottom, .layout-padding-top-bottom md-item {
  padding-top: 10px;
  padding-bottom: 10px;
}

.layout-padding-top {
  padding-top: 10px;
}

.layout-padding-bottom {
  padding-bottom: 10px;
}

.layout-max-width {
  width: 100%;
  max-width: 960px;
}

.hint {
  left: 2px;
  right: auto;
  bottom: 7px;
  font-size: 12px;
  line-height: 14px;
  transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
  color: grey;
}

/**
  angular material element styles
 */

/* disable transitions on tab panels */
[role="tabpanel"] {
  transition: none;
}

.md-checkbox-div {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}

.md-checkbox-div-top {
  margin-top: 10px;
}

md-autocomplete.md-default-theme, md-autocomplete {
  background: rgb(255, 255, 255);
}

.md-autocomplete-suggestions-container.md-default-theme, .md-autocomplete-suggestions-container {
  background: rgb(255, 255, 255);
}

.md-chips .md-chip-input-container md-autocomplete input {
  width: 400px;
}

md-list.padding-left md-list-item {
  padding-left: 25px !important;
}

.md-subheader.left-aligned .md-subheader-inner {
  padding-left: 0px;
}

.card-sub-header {
  color:rgba(0, 0, 0, 0.54);
  font-weight: normal;
  font-size: 14px;
}




/*  Options Menu (more_vert selection menu) */

.md-select-menu-container {
  z-index: 9999;
}

.md-menu-item-header {
  height: 20px !important;
  min-height: 20px !important;
  padding-top: 5px;
}

.md-button-group > .md-button.icon-btn {
  line-height: inherit;
  margin: inherit;
  min-height: inherit;
  min-width: inherit !important;
  width: inherit !important;
  color: #666666 !important;
  border: 1px solid #d7d7d7 !important;
}

.md-button-group > .md-button {
  color: #666666 !important;
  border: 1px solid #d7d7d7 !important;
  margin: inherit;
}

.md-button.border-btn {
  background-color: white;
  text-align: center !important;
  height: 36px;
  font-size: 12px;
  padding: 0;
  /*padding: 0 16px 0 16px; */
  color: #666666;
  border: 1px solid #d7d7d7;
  line-height: inherit;
}

.md-button.border-btn-warn {
  background-color: rgb(255, 87, 34);
  text-align: center !important;
  height: 36px;
  font-size: 12px;
  padding: 0;
  color: #FFFFFF;
  border: 1px solid #d7d7d7;
  line-height: inherit;
}

.md-button.border-btn-warn:hover {
  background-color: rgb(244, 81, 30);
}

.md-button.border-btn-white {
  text-align: center !important;
  height: 36px;
  font-size: 12px;
  padding: 0;
  /*padding: 0 16px 0 16px; */
  color: white;
  border: 1px solid white;
  line-height: inherit;
}

.md-button.border-btn-white-sm {
  text-align: center !important;
  height: 28px;
  min-height: 28px;
  line-height: 28px;
  font-size: 12px;
  padding: 0;
  /*padding: 0 16px 0 16px; */
  color: white;
  border: 1px solid white;
  margin-top: 10px;
}

.md-button.md-icon-button.rounded-rectangle {
  border-radius: 3px;
}

.md-button.md-icon-button.auto-height {
  height: inherit;
}

.icon-btn {
  line-height: inherit;
  margin: inherit;
  min-height: inherit;
  min-width: inherit;
}

.icon-border-btn {
  line-height: inherit;
  margin: inherit;
  min-height: inherit;
  min-width: inherit;
  text-align: center;
  height: 36px;
  color: #666666;
  border: 1px solid #d7d7d7;
}

.md-button.menuBtn > md-icon {
  fill: white;
  width: 24px;
  height: 24px;
}

/** Tab styles **/
md-tabs.no-animation md-tab-content.md-left, md-tabs.no-animation md-tab-content.md-right {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

md-list.list-item-left md-list-item {
  padding: 8px 0px !important;
}

md-list.list-item-padding md-list-item {
  padding: 8px !important;
}

/** override Angular defaults **/
md-card {
  padding: 8px !important;
}

.btn-link.ngTruncateToggleText {
  color: #3483BA;
}

.content-wrapper {
  position: relative;
}

.tt-multiline md-tooltip .md-content {
  height: auto;
}

md-toolbar h1 {
  font-size: 1.250em;
  font-weight: 400;
}

md-toolbar .md-button.md-default-theme {
  border-radius: 99%;
}

/* White text for inputs in header */
md-toolbar label {
  color: white !important;
}

md-bottom-sheet md-icon {
  margin-right: 20px;
}

md-content.md-default-theme {
  background-color: #F9F9F9 !important;
}

md-card {
  background-color: #fff;
}

md-card h2:first-of-type {
  margin-top: 0;
}

/** Progress Bar **/

.md-list-table-progress md-progress-linear > .md-container {
  height: 3px;
  margin-top: 5px;

}

.md-list-table-progress md-progress-linear > .md-container > .md-bar {
  height: 3px;
}

.md-input-label {
  pointer-events: none;
  padding-left: 3px;
  padding-right: 0px;
  z-index: 1;
  transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
  transform-origin: left top 0px;
  color: rgba(0, 0, 0, 0.54);
}

md-list.list-condensed md-input-container {
  margin: inherit;
}

md-input-container.condensed-no-float {
  margin: inherit;
}

md-input-container.condensed {
  margin-bottom: 0;
  margin: 0;
}

md-input-container.condensed-medium {
  margin: 12px 0
}

md-tab-content.md-no-scroll {
  bottom: 0;
}

.md-button.md-fab {
  z-index: 60;
}

.md-button.md-fab.md-fab-top-right {
  right: 50px;
  top: 30px;
  z-index: 61;
  color: white;
}

.md-warn-text {
  color: rgb(255, 87, 34);
}

md-radio-button.padding-right {
  padding-right: 10px;
}

md-radio-group.layout-row md-radio-button {
  margin-bottom: 16px;
}

md-card md-card-title md-card-title-media .md-media-xs {
  width: 50px;
  height: 50px;
}

md-toast {
  height: auto;
  max-height: inherit;
}

md-toast .md-toast-content {
  max-height: 100%;
  height: 100%;
}


/**
Stepper
 */
thinkbig-stepper md-tabs md-tabs-wrapper {
  background-color: #FFFFFF !important;
}



/**
  card-layout directive styles
 */
card-layout {
  margin: 8px;
}

card-layout md-list {
  padding-top: 0px !important;
  padding-bottom: 8px !important;
}

card-layout.right-card {
  margin-left: 18px;
}

card-layout md-tabs-wrapper, card-layout .card-content {
  padding-left: 16px
}

card-layout .tab-content > :not(md-list) {
  padding: 8px 25px;
}

md-dialog.md-dialog-fullscreen-fixed {
  min-height: 100%;
  min-width: 100%;
  border-radius: 0
}

card-layout .card-toolbar {
  border-radius: 3px 3px 0 0;
  box-shadow: 0 1px rgba(255, 255, 255, 0.1);
  background-color: #FFF;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 15px;
  height: 60px;
  max-height: 60px;
}

card-layout .card-toolbar.filter-header {
  padding-right: 0px !important;
}


.define-feed card-layout section {
  margin-left: 16px;
  margin-right: 16px;
}


card-layout md-list md-list-item md-divider {
  border-top-width: 1px !important;
}

card-layout md-tabs {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

card-layout md-content {
  position: inherit !important;
  overflow: hidden;
}

/** Button styles **/
card-layout .md-button.selected {
  background-color: #EEEEEE;
}

card-layout header-section h2 {
  margin-bottom: 8px;
  margin-top: 8px;
}

card-layout.card-width {
  max-width: 980px;
  width: 980px;
}

card-layout.card-full-width {
  max-width: 100%;
  width: 100%;
}

card-layout.centered, div.centered {
  align-items: flex-start;
  flex-flow: row nowrap;
  justify-content: center;
  display: flex;
  top: 250px;
  display: -webkit-flex; /* Safari */
  -webkit-align-items: flex-start; /* Safari 7.0+ */
  -webkit-justify-content: center; /* Safari 6.1+ */
}

card-layout.centered section:first-child {
  align-self: auto;
  -webkit-align-self: auto; /* Safari 7.0+ */
  -webkit-flex: 0 1 960px; /* Safari 6.1+ */
  -ms-flex: 0 1 960px; /* IE 10 */
  flex: 0 1 960px;
  order: 0;
  display: inline-block;
  overflow: hidden;
}

card-layout section:first-child {
  background-color: white;
}

card-layout.card-full-width section:first-child {
  background-color: white;
  width: 100%;
}

.card-title {
  font-size: 20px;
  letter-spacing: .005em;
}

/* List View Titles */

.list-item-table md-list-item {
  padding: 0px;
}

.item-column {
  padding: 15px;
}

.item-column-title {
  padding-bottom: 0;
}

.item-column:first-child {
  padding-left: 25px;
}

.item-column:last-child {
  padding-right: 25px;
}

.item-title {
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-title-small {
  font-size: 14px;
  font-weight: 500;
  min-height: 20px;
}

.column-title, .pagination-text {
  color: #868686;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.column-title-bottom {
  padding-top: 10px;
  display: table-cell;
  min-height: 20px;
  vertical-align: bottom;
}

/**
Status styles
 */

.error, .unhealthy {
  color: #FF0000; /*#FF1C1C, a94442*/
  fill: #FF0000;
}

.running-job-activity {
  color: #FD9B28;
}

.healthy, .success, .enabled {
  color: #009933;
  fill: #009933;
}

.abandoned, .unknown, .disabled {
  color: #969696;
  fill: #969696;
}

.warn {
  color: #FF9901;
  fill: #FF9901;
}

.primary-color-1 {
  color: #3483BA;
  fill: #3483BA;
}

.orange {
  color: #F08C38;
  fill: #F08C38;
}

.accent-color, .accent-color-1 {
  color: #E4682C;
  fill: #E4682C;
}

.grey {
  color:rgba(0, 0, 0, 0.54);
}

.accent-color-2 {
  color: #7d7d7d;
  fill: #7d7d7d;
}

.accent-color-3 {
  color: #767676
}

.accent-color-4 {
  color: #666666
}

.label-small {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.54);
}

/**
CodeMirror editor styles
 */

.hql-editor .CodeMirror {
  height: 150px !important;
}

.CodeMirror {
  border: 1px solid #808080;
}

/**
Fade a element in/out
 */

.fade.ng-hide {
  opacity: 0;
}

.fade.ng-hide-remove,
.fade.ng-hide-add {
  display: block !important;
}

.fade.ng-hide-remove {
  transition: all linear 1000ms;
}

.fade.ng-hide-add {
  transition: all linear 500ms;
}

.fade-in-out.ng-enter,
.fade-in-out.ng-leave {
  -webkit-transition: opacity ease-in-out .5s;
  -moz-transition: opacity ease-in-out .5s;
  -ms-transition: opacity ease-in-out .5s;
  -o-transition: opacity ease-in-out .5s;
  transition: opacity ease-in-out .5s;
}

.fade-in-out.ng-enter,
.fade-in-out.ng-leave.ng-leave-active {
  opacity: 0;
}

.fade-in-out.ng-leave,
.fade-in-out.ng-enter.ng-enter-active {
  opacity: 1;
}

/**
Vertical section directive
 */

.vertical-step-border {
  border-left: grey 1px solid;
}

/**
angular nvd3 styles
 */

.nvd3 text {
  font-family: Roboto !important;
}

.nvd3.nv-pie .nv-pie-title {
  fill: #807272;
}

/** position an element to the bottom left of the container **/
.bottom-left {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 16px 88px;
  z-index: 70;
  border-top-width: 1px;
  border-top-style: solid;
  -webkit-transform: translate3d(0, 80px, 0);
  transform: translate3d(0, 80px, 0);
  -webkit-transition: all .4s cubic-bezier(.25, .8, .25, 1);
  transition: all .4s cubic-bezier(.25, .8, .25, 1);
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}

/** set an item to be bolded **/
.bold {
  font-weight: 500;
}

/** prevent blue outline on selection of elements **/
.no-outline {
  outline: none;
}

/** md-list pagination **/

dir-pagination-controls {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1;
  -webkit-box-flex: 1;
  flex: 1;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-flex-wrap: wrap-reverse;
  -ms-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
  box-sizing: border-box;
  padding: 0 24px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.54);
  border-top: 1px rgba(0, 0, 0, 0.12) solid;
}


dir-pagination-controls > * {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 56px;
}

.pagination-row {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}


.pagination-row > div:nth-child(1) > .label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 32px 0 24px;
}

.pagination-row > div:nth-child(1) > md-select {
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding: 0;
  margin: 0 32px 0 0;
}

.pagination-row > div:nth-child(1) > md-select > md-select-value {
  padding: 0;
  min-width: 0;
  min-height: 0;
  border-bottom: 0 !important;
}

.pagination-row > div:nth-child(1) > md-select > md-select-value > span:first-child {
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  max-width: none;
  color: rgba(0, 0, 0, 0.54) !important;
  -webkit-transform: none;
  transform: none;
}

.pagination-row > div:nth-child(1) > md-select > md-select-value > .md-select-icon {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0;
  color: rgba(0, 0, 0, 0.54) !important;
  text-align: center;
  -webkit-transform: none;
  transform: none;
}

.pagination-row > div:nth-child(1) > md-select > md-select-value > .md-select-icon:after {
  top: 1px;
  -webkit-transform: scaleY(0.5) scaleX(1);
  transform: scaleY(0.5) scaleX(1);
}

.pagination-row > div:nth-child(1) > span:last-child {
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

@media all and (min-width: 601px) {
  .pagination-row > div:nth-child(1) > span:last-child {
    margin-right: 32px;
  }
}

@media all and (max-width: 600px) {
  .pagination-row > div:nth-child(1) > span:last-child {
    margin-right: 24px;
  }
}

.pagination-row > div:nth-child(2) {
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.pagination-row > div:nth-child(2) .md-button {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding: 0;
  min-height: 24px;
  min-width: 24px;
}

.pagination-row > div:nth-child(2) .md-button:not(:last-of-type) {
  margin: 0 24px 0 0;
}

.pagination-row > div:nth-child(2) .md-button:last-of-type {
  margin: 0 18px 0 0;
}

.md-select-menu-container.md-pagination-select {
  margin-top: -2px;
  margin-left: -2px;
}

.md-select-menu-container.md-pagination-select md-content {
  padding: 0;
}

.md-select-menu-container.md-pagination-select md-content md-option .md-text {
  font-size: 12px;
  font-weight: 500;
}

/** pagination rows-per-page */
md-select.rows-per-page {
  flex: 0 0 auto;
  margin: 0 32px 0 0;
  padding: 0;
}

md-select.rows-per-page .md-select-value {
  border-bottom-style: inherit;
  min-width: inherit;
  padding: inherit;
}

.filter-help {
  background: white;
  border-radius: 4px;
  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
  0 13px 19px 2px rgba(0, 0, 0, 0.14),
  0 5px 24px 4px rgba(0, 0, 0, 0.12);
  width: 350px;
}

.filter-help-item {
  display: flex;
  padding: 8px;
  position: relative;
  transition: background 0.15s linear;
  width: auto;
}



/**
 * Global Search styles
 */

.global-search-container-sm {
  align-self: center;
  min-width: 300px;
}

.global-search-container {
  align-self: center;
  min-width: 500px;
  padding-top: 10px;
}

.global-search-container .border-btn-white {
  margin-top: 5px;
}

input.global-search-input {
  color:white;
}

input.global-search-input::-webkit-input-placeholder {
  color: #F9F9F9  !important;
  text-align: center;
  font-weight:400
}

input.global-search-input:-moz-placeholder { /* Firefox 18- */
  color: #F9F9F9  !important;
  text-align: center;
  font-weight:400
}

input.global-search-input::-moz-placeholder {  /* Firefox 19+ */
  color: #F9F9F9  !important;
  text-align: center;
  font-weight:400
}

input.global-search-input:-ms-input-placeholder {
  color: #F9F9F9  !important;
  text-align: center;
  font-weight:400
}

md-input-container.global-search .md-input {
  border-color: white !important;
  font-size: 14px;
}

.elastic-search-property-table {
  margin-top: 0px;
  border-collapse: collapse;
  margin-left: 30px;
}

.elastic-search-property-table td {
  padding: 5px;
  border-collapse: collapse;
  border-spacing: 0px;
}

.elastic-search-property-table tr:not(:last-child) td {
}
