styles.scss

@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Varela+Round");
@import "../../node_modules/animate.css/animate.min";
@import "primeng";
@import "bulma";
@import "variables";

#appWindow {

  @import "./styles-no-prefix.scss";

  font-family: var(--drgstn-font-family) !important;
  height: var(--drgstn-height, 500px) !important;
  display: block !important;
  all: initial;
  position: relative;
  @import "~@ng-select/ng-select/themes/default.theme";

  .ng-dropdown-panel .ng-dropdown-panel-items {
    max-height: 150px !important;
  }

  .drgstn-box-shadow {
    box-shadow: 0 0.125em 0.25em hsla(0, 0%, 4%, 0.1);
  }

  .fullheight {
    height: 100%;
  }

  .question-icon {
    vertical-align: middle;
  }

  .card-content .tabs-header {
    margin-bottom: 0;
  }

  .is-fullwidth {
    width: 100%;
  }

  .canvas-content {
    height: calc(100% - #{$network-footer-height});
    z-index: $explorer-network-z;
  }

  nav.navbar {
    height: 60px;
  }

  .modal-card {
    max-height: 90% !important;
  }

  img.menu-icon.is-hoverable.navbar-item.logo {
    height: 40px;
    width: 125px;
    padding: 0;
  }

  .tissue-dropdown {
    padding: 5px;

    .scroll-area {
      max-height: 250px;
      overflow-y: scroll;
      padding-right: 5px;
    }
  }

  .rotated {
    -ms-transform: rotate(180deg); /* IE 9 */
    transform: rotate(180deg);
  }

  div.navbar-menu {
    margin-left: 5px;
  }

  span.icon {
    margin-right: 5px;
  }

  .mb-3 {
    margin-bottom: 10px;
  }

  img.inline {
    height: 30px;
    align: middle;
  }

  button.i {
    margin-left: 5px;
  }

  input.checkbox {
    margin-left: 15px;
  }

  div.drugstone.sidebar {
    height: $height;
    overflow-y: auto;
    overflow-x: hidden;
    max-width: $sidebar-width;
    min-width: $sidebar-min-width;
    height: 100%;
    /* Hide scrollbar for Chrome, Safari and Opera */
    &::-webkit-scrollbar {
      display: none;
    }

    /* Hide scrollbar for IE, Edge and Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    @media only screen and (min-width: #{$screen-lg}) {
      max-width: 350px;
    }
  }

  div.card.bar-small {
    margin-bottom: 15px;
    word-wrap: break-word;
    height: 130px;
  }

  div.card.bar-medium {
    margin-bottom: 15px;
    word-wrap: break-word;
    height: 170px;
  }

  div.card.bar-large {
    margin: 5px;
    max-height: 600px;
  }

  div.card-content.overflow {
    overflow: auto;
    max-height: 350px;
  }

  div.drugstone.network {
    height: 100%;
    position: relative;
  }

  div.card.network {
    width: 100%;
    height: $height;
    overflow: hidden;
  }

  div.parent {
    position: relative;
  }

  div.image1 {
    position: relative;
  }

  div.center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  div.drugstone.explorer {
    height: $height;
    overflow: hidden;
  }

  .analysis-view {
    height: 100%;
    width: 100%;
    position: absolute !important;
    margin-top: 0;
    z-index: $analysis-view-z;

    .canvas-content {
      z-index: $analysis-network-z;
    }
  }

  div.field.has-addons.add-remove-toggle {
    margin-top: 20px;
  }

  // classes for different screen sizes
  .text-small {
    font-size: $text-small-font-size;
  }

  .text-normal {
    font-size: $text-normal-font-size;
  }

  .b-text-small {
    font-size: $b-text-small-font-size;
  }

  .b-text-smaller {
    font-size: $b-text-smaller-font-size;
  }

  .dropdown-item {
    color: var(--drgstn-text-primary);
  }

  // general network settings, some will be overwritten in analysis

  .analysis-view {
    .network-footer-toolbar {
      z-index: $analysis-network-footer-container-z;

      .network-toolbar-toggle {
        z-index: $analysis-network-footer-container-toggle-z;
      }
    }
  }

  button.is-secondary,
  button.is-secondary:hover {
    background-color: var(--drgstn-secondary) !important;
  }

  .row > * {
    padding-right: 0;
    padding-left: 0;
  }

  .col > * {
    padding-right: 0;
    padding-left: 0;
  }

  .card-header {
    padding: 0 0;
    line-height: 18px;
  }

  .has-text-danger {
    color: var(--drgstn-danger) !important;
  }

  .has-text-warning {
    color: var(--drgstn-warning) !important;
  }

  .highlight-primary:hover {
    background-color: var(--drgstn-primary) !important;
    color: var(--drgstn-text-secondary) !important;
  }

  .highlight-danger:hover {
    background-color: var(--drgstn-danger) !important;
    color: var(--drgstn-text-secondary) !important;
  }
}

.row > * {
  padding-right: calc(1.5rem * 0.5);
  padding-left: calc(1.5rem * 0.5);
}

.col > * {
  padding-right: calc(1.5rem * 0.5);
  padding-left: calc(1.5rem * 0.5);
}

.card-header {
  padding: 0.5rem 1rem;
  line-height: 24px;
}

.toast {
  z-index: $toast-z;
  position: relative;
  max-width: 60vw;
  padding: 10px 15px;
  border-radius: 0.25rem;
  box-shadow: 0 0.5em 1em -0.125em hsla(0, 0%, 4%, 0.1),
    0 0 0 1px hsla(0, 0%, 4%, 0.02);
  margin: 0 auto;
  &.drugstone-plugin-danger {
    color: var(--drgstn-text-secondary);
    background-color: var(--drgstn-danger);
  }
  &.drugstone-plugin-success {
    color: var(--drgstn-text-secondary) !important;
    background-color: var(--drgstn-success);
  }
  &.drugstone-plugin-warning {
    color: var(--drgstn-text-primary);
    background-color: var(--drgstn-warning);
    .icon {
      color: var(--drgstn-text-primary) !important;
    }
  }
  &.drugstone-plugin-info {
    color: var(--drgstn-text-secondary);
    background-color: var(--drgstn-info);
  }
  .close {
    display: inline;
    float: right;
    .icon {
      color: var(--drgstn-text-secondary);
    }
  }
}