#network_container {
   height: 70vh;

   div:not(.cy-context-menus-cxt-menu) {
      z-index: 1 !important;
      position: absolute !important;
   }

   &.fullscreen {
      position        : fixed;
      left            : 0;
      right           : 0;
      top             : 0;
      bottom          : 0;
      width           : 100%;
      height          : 100%;
      background-color: white;
      z-index         : 80;
   }
}

#help_text {
   font-weight: bold;
   display    : none;
   position   : absolute;
   padding    : 10px;
   color      : #707e8c;
   font-size  : 1.3em;
   z-index    : 2;
}

#impact_tools {
   margin-left     : auto;
   margin-right    : 5px;
   background-color: white;
   padding         : 5px;
   border          : 1px solid lightgray;
   border-radius   : 2px;

   span:hover {
      background-color: lightgray;
      border-radius: 2px;
   }
}

.impact-mb-2 {
   margin-bottom: 2em;
}

.network-parent {
   border  : 1px solid #f1f1f1;
   position: relative;
   padding : 0 !important;
}

.network-table {
   max-width: none !important;
}

.impact-dialog {
   display: none;
}

i.fa-impact-manipulation {
   display: inline;
   font-size: 14px;
}

.impact_toolbar {
   position       : absolute;
   display        : inline-flex;
   justify-content: flex-start;
   left           : 0;
   right          : 0;
   z-index        : 20;
   flex-wrap      : wrap;

   span {
      float     : left;
      color     : gray;
      font-size : 1.3em;
      padding   : 4px 8px;
      transition: all 0.3s ease;
      cursor    : pointer;
      border    : 2px inset transparent;
   }

   .active {
      border: 2px inset #f4f4f4;
      background-color: #fafafa;
   }

   &.fullscreen {
      position: fixed;
      top     : 5px;
      z-index : 81;
   }
}

.impact_toolbar_right {
   float: right !important;
}

.clean {
   animation: clean-fade 3s;
}

@keyframes clean-fade {
   0% {
     color: #1ca448;
   }
   100% {
     color: #707e8c;
   }
}

.dirty {
   color: #eea818 !important;

   &:hover {
      background-color: #fec95c !important;
      color: #8f5a0a !important;
   }
}

/*
 * Cytoscape context menu
 */

.cy-context-menus-cxt-menuitem {
   padding-left: 5px !important;
   font-size: 1.15em;
   background-color:white;

   i {
      padding-right: 10px !important;
      color: gray;
      max-width: 10px;
   }
}

.cy-context-menus-cxt-menu {
   border-radius     : 2px;
   border            : 1px solid lightgray;
   -webkit-box-shadow: 4px 4px 6px 3px rgba(0,0,0,0.17);
   -moz-box-shadow   : 4px 4px 6px 3px rgba(0,0,0,0.17);
   box-shadow        : 4px 4px 6px 3px rgba(0,0,0,0.17);
}

/*
 * Custom range input
 */

.impact-range {
   height            : 18px;
   -webkit-appearance: none;
   margin            : 10px 0;
   border-width      : 0 !important;
   margin-top        : 0 !important;
   margin-bottom     : 0 !important;
}

.impact-range:focus {
   outline: none;
}

.impact-range::-webkit-slider-runnable-track {
   width        : 100%;
   height       : 4px;
   cursor       : pointer;
   animate      : 0.2s;
   box-shadow   : 0px 0px 0px #000000;
   background   : #AEC8D8;
   border-radius: 25px;
   border       : 1px solid #8A8A8A;
}

.impact-range::-webkit-slider-thumb {
   box-shadow        : 1px 1px 1px #828282;
   border            : 1px solid #8A8A8A;
   height            : 10px;
   width             : 14px;
   border-radius     : 2px;
   background        : #66757F;
   cursor            : pointer;
   -webkit-appearance: none;
   margin-top        : -4px;
}

.impact-range:focus::-webkit-slider-runnable-track {
   background: #AEC8D8;
}

.impact-range::-moz-range-track {
   width        : 100%;
   height       : 4px;
   cursor       : pointer;
   animate      : 0.2s;
   box-shadow   : 0px 0px 0px #000000;
   background   : #AEC8D8;
   border-radius: 25px;
   border       : 1px solid #8A8A8A;
}

.impact-range::-moz-range-thumb {
   box-shadow   : 1px 1px 1px #828282;
   border       : 1px solid #8A8A8A;
   height       : 10px;
   width        : 14px;
   border-radius: 2px;
   background   : #66757F;
   cursor       : pointer;
}

.impact-range::-ms-track {
   width       : 100%;
   height      : 4px;
   cursor      : pointer;
   animate     : 0.2s;
   background  : transparent;
   border-color: transparent;
   color       : transparent;
}

.impact-range::-ms-fill-lower {
   background   : #AEC8D8;
   border       : 1px solid #8A8A8A;
   border-radius: 50px;
   box-shadow   : 0px 0px 0px #000000;
}

.impact-range::-ms-fill-upper {
   background   : #AEC8D8;
   border       : 1px solid #8A8A8A;
   border-radius: 50px;
   box-shadow   : 0px 0px 0px #000000;
}

.impact-range::-ms-thumb {
   margin-top   : 1px;
   box-shadow   : 1px 1px 1px #828282;
   border       : 1px solid #8A8A8A;
   height       : 10px;
   width        : 14px;
   border-radius: 2px;
   background   : #66757F;
   cursor       : pointer;
}

.impact-range:focus::-ms-fill-lower {
   background: #AEC8D8;
}

.impact-range:focus::-ms-fill-upper {
   background: #AEC8D8;
}

/*
 * Header
 */
.impact-header {
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #f1f1f1;

   h2 {
      margin-left: auto;
   }

   #switchview {
      margin-left: auto;
      margin-right: 10px;

      a {
         font-size: 0.85em !important;
      }
   }
}

#impact_list_view {
   margin-top: 2em;
   display: flex;
   justify-content: center;
}

.impact-list-container {
   flex-grow: 1;
}

.impact-list-group {
   margin-bottom: 5em;
}

.impact-left {
   padding-left: 10px !important;
}

.impact-pointer {
   cursor: pointer;
}

.impact-list-toolbar {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   text-align: right;
}

.impact-list-toolbar i {
   padding: 10px;
}

.impact-list-header {
   padding: 1px 5px !important;
}

.impact-list-tools {
   font-size: 1.3em;
}

.impact-toggle-subitems-master {
   float: right;
   padding-right: 5px;
   font-size: 1.15rem;
}

.impact-toggle-subitems {
   float: right;
   padding-right: 5px;
   font-size: 1.15rem;
}

/*
 * Sidebar
 */
.impact-side {
   height          : 100%;
   // width           : 40px;
   position        : absolute;
   top             : 0;
   right           : 0;
   background-color: #fafafa;
   z-index         : 80;
   border-left     : 1px solid #f1f1f1;
   border-right    : 1px solid #f1f1f1;
   display         : flex;
   justify-content: space-between;

   ul {
      list-style : none;
      border-left: 1px solid #f1f1f1;
   }

   li {
      color         : #707e8c;
      width         : 100%;
      vertical-align: middle;
      cursor        : pointer;

      i {
         padding  : 10px 8px;
         font-size: 1.5em;
      }

      &:hover {
         color: rgb(14, 14, 14);
         background-color: #f1f1f1;
      }

      &.active {
         color: #444 !important;
         background-color: #d5d5d5 !important;
         border-radius: 2px;
      }

      &.impact-disabled {
         cursor: default !important;
         color: #aaaeb3;

         &:hover {
            color: #aaaeb3;
            background-color: #fafafa;
         }
      }

      &.impact-separator {
         border-top: 2px solid #dfdfdf;
      }
   }

   &.impact-side-expanded {
      // width : 250px;
      border-left: 3px solid #f1f1f1;

      li {
         text-align: right;
      }
   }

   &.fullscreen {
      position: fixed;
      // top     : 5px;
      z-index : 81;
   }
}

.impact-drop-preview {
   display : none;
   position: fixed;
   z-index : 83;
   opacity : 50%;
   width   : 48px;
   height  : 48px;
   pointer-events: none;
}

.impact-side-panel {
   color: #707e8c;
   width: 0px;
   overflow: hidden;
   transition: width 0.5s ease;

   &.impact-side-expanded {
      padding: 3px 10px;
      overflow: auto;
      width: 210px;
   }

   h3 {
      white-space: nowrap;
   }
}

.impact-side-icon {
   width: 32px;
   height: 32px;
   padding: 4px;
}

#impact-side-filter-itemtypes {
   margin-bottom: 1em;
}

.impact-side-search {
   display: none;

   i {
      cursor: pointer;
      margin-right: 5px;
   }

   img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
   }

   h4 {
      white-space: nowrap;
   }
}

.impact-side-search-footer {
   height: 37px;
}

.impact-side-search-more {
   cursor: pointer;

   i {
      margin-right: 3px;
   }
}

.impact-side-toggle {
   display         : none;
   background-color: #f1f1f1;
   position        : absolute;
   bottom          : 0;
   color           : #707e8c;
   width           : 100%;
   text-align      : center;
   cursor          : pointer;

   i {
      padding  : 10px 5px;
      font-size: 1.5em;
   }

   &:hover {
      color: rgb(14, 14, 14);
   }
}

.impact-side-filter-itemtypes-items {
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
   white-space: nowrap;
}

.impact-side-search-results {
   p {
      cursor: pointer;
      -webkit-user-select: none; /* Safari */
      -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* IE10+/Edge */
      user-select: none;
      white-space: nowrap;
   }
}

.impact-side-filter-itemtypes-item {
   cursor: pointer;

   span {
      display: inline;
      margin-left: 4px;
   }
   h4 {
      margin-top: 0;
      margin-bottom: 0;
   }
}

.impact-side-search-spinner {
   margin-top: 10px;
   text-align: center;
   display: none;
}

.impact-side-search-no-results {
   display: none;
}

.impact-checkbox-label {
   margin-left: 8px;
}

.impact-side-settings {
   h4 {
      white-space: nowrap;
      margin-top: 25px;
   }
}

.impact-side-settings-item {
   margin-bottom: 10px;
   white-space: nowrap;
}

.impact-res-hidden {
   float: right;
}

.impact-res-disabled {
   opacity: 0.5;
   cursor: not-allowed !important;

   i {
      cursor: not-allowed !important;
   }
}

/*
 * Hide toolbar for readonly, will be shown in JS if needed
 */
#save_impact,
#add_node,
#add_edge,
#add_compound,
#delete_element,
#impact_settings {
   display: none;
}