/* You can add global styles to this file, and also import other style files */

@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Varela+Round');
@import "~@ng-select/ng-select/themes/default.theme.css";

$family-sans-serif: "Varela Round", sans-serif;
$primary: #48C774;
$success: #3070B3;
$danger: #EF476F;
$link: $primary;
$info: $primary;
@import "~bulma/bulma.sass";
@import '~bulma-tooltip';
@import "~primeng/resources/primeng.min.css";
@import "~primeicons/primeicons.css";

@import "variables";

.fullheight {
  height: 100%;
}

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

.explorer-footer{
  //position: absolute;
  //overflow: auto;
  //width: $main-width;
  bottom: 0;
}

nav.navbar {
  height: 60px;
}

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

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

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

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

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

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

div.covex.sidebar {
  height: $height;
  overflow-y: auto;
  overflow-x: hidden;
}

div.covex.bar-left {
  float: left;
  width: $sidebar-left-width;
  max-width:300px;
  min-width:$sidebar-left-min-width;
  height: 100%;

}

div.covex.bar-right {
  float: left;
  width: $sidebar-right-width;
  max-width:450px;
  min-width:$sidebar-right-min-width;
  /* 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 */

}

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-bottom: 15px;
  max-height: 600px;
}

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

div.covex.network {
  height: 100%;
  float: left;
  position: relative;

}

.center-panel{
  width: $main-width;
  &.leftgone{
    width: calc(#{$main-width} + max(#{$sidebar-left-width},#{$sidebar-left-min-width}));
  }
  &.rightgone{
    width: calc(#{$main-width} + max(#{$sidebar-right-width},#{$sidebar-right-min-width}));
  }
  &.rightgone.leftgone{
    width: calc(#{$main-width} +  max(#{$sidebar-left-width},#{$sidebar-left-min-width}) + max(#{$sidebar-right-width},#{$sidebar-right-min-width}));
  }
}

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

div.parent {
  position: relative;
}

div.image1 {
  position: relative;
}

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


div.covex.explorer {
  height: #{$height};
  margin-left: 10px;
  margin-right: 10px;
}

.analysis-view {
  height: 100%;
  width: calc(100% - 20px);
  position: absolute;
  margin-top: 0;
  z-index: 10;
}

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

.fa-check {
  color: $success;
}

.fa-search.investigational {
  color: $warning;
}

.fa-spinner {
  color: $light-invert;
}

.fa-pause {
  color: $warning;
}

.fa-exclamation-triangle {
  color: $danger;
}

.fa-times {
  color: $danger;
}

.footer-buttons {
  margin-left: 20px;
  margin-right: 10px;
}

.toolbar {
  padding: 5px;
  border-top: 2px solid #d0d0d0;

  .field {
    margin-bottom: 0;
    .control {
      margin-bottom: 0;
    }
  }
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}


.ui-chkbox-box {
  border: 1px solid black !important;
}

.tissue-dropdown {
  padding: 5px;
  background-color: rgba(255.0, 255.0, 255.0, 0.85);

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

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