/*
    Global
*/

/*body {
    background: #161616 url(../img/pattern_40.gif) top left repeat;
    color : #ddd;
}*/

/* latin */
@font-face {
  font-family: 'Electrolize';
  font-style: normal;
  font-weight: 400;
  src: local('Electrolize'), local('Electrolize-Regular'), url(../fonts/electrolize.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

body {
  font-family: 'Electrolize', sans-serif;

  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  user-select: none;          /* Likely future */   
}

svg {
/*background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjZmZmIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IiNjY2MiPjwvcmVjdD4KPC9zdmc+");*/

/*background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MCIgaGVpZ2h0PSI3MCI+CjxyZWN0IHdpZHRoPSI3MCIgaGVpZ2h0PSI3MCIgZmlsbD0iI2JiZDgxNyI+PC9yZWN0Pgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSg0NSkiPgo8cmVjdCB3aWR0aD0iOTkiIGhlaWdodD0iMjUiIGZpbGw9IiNhOWNlMDAiPjwvcmVjdD4KPHJlY3QgeT0iLTUwIiB3aWR0aD0iOTkiIGhlaWdodD0iMjUiIGZpbGw9IiNhOWNlMDAiPjwvcmVjdD4KPC9nPgo8L3N2Zz4=");*/
}

h1, h2, h3, h4 {
  margin-top: 0;
}
/*
    Windows disposition and style
*/

.ui-group.ng-enter, .ui-group.ng-leave {
  /*transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s;*/
   transition:0.5s linear all;
}
.ui-group.ng-enter,
.ui-group.ng-leave.ng-leave-active {
  opacity:0;
  transition-delay:0s;
}

.ui-group.ng-leave,
.ui-group.ng-enter.ng-enter-active {
  opacity:1;
  transition-delay:1s;
}

.ui-window {

  /*background-color: rgba(0,0,0,0.8);*/
  /*border: 2px solid black;*/
  /*color : #fff;*/

  background-color: rgba(255,255,255,0.8);
  box-shadow: 0px 0px 4px black;

  padding-top: 5px;
  padding-bottom: 5px;
}

.black-theme .ui-window {
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
}

.round-left {
  border-bottom-left-radius: 2px;
  border-top-left-radius: 2px;
}
.round-right {
  border-bottom-right-radius: 2px;
  border-top-right-radius: 2px;
}

#top-row {
    /*margin-top : 5px;*/
    margin-bottom : 5px;
}

.ui-window .media:hover {
  background-color: rgba(100,100,100,0.5);
}
.ui-window .media.selected {
  background-color: rgba(100,100,100,0.6);
}

/*.btn-default {
  background-color: transparent;
}*/

/*
    Graph
*/


ri-graph svg {
    /*background-color: #222831;*/
    /*background-color: #F3F3F3;*/
    border : 1px solid #DDD;
}

ri-graph .node .node-kernel {
    /*fill : #FF5722;*/
    stroke: #444;
    stroke-width : 4;
}

ri-graph .node:hover .node-border {
    stroke : #ddd;
    stroke-width : 2;
}

ri-graph .node .node-border {
    fill : white; /*#444;*/
    stroke : #00F;
    stroke-width : 1;
}

ri-graph .node.activated .node-border {
    stroke-width : 2;
    stroke-opacity : 1;
}

ri-graph .node text {
  text-anchor : middle;
  fill : #ddd;
  font-weight : bold;
  pointer-events : none;
}


ri-graph .link .base {
    stroke : #444;
    stroke-width : 4;
}

ri-graph .link .flow {
    stroke : #FF5722;
    /*stroke-width : 4;*/
    stroke-opacity : 1;
}

/* Moving dash : problem is that sometime the flux is in both direction */
/*ri-graph .link .flow {
    stroke : #E00;
    stroke-width : 1;
    stroke-dasharray : 4;
    animation: dash 1.5s linear infinite;
}*/

@keyframes dash {
  to {
    stroke-dashoffset: -8;
  }
}



#placeholder-kernel {
    fill-opacity : 0.3;
}

#placeholder-bound {
    fill : none;
    stroke : #444;
    stroke-width : 4;
    stroke-dasharray : 8;
}

#linker {
    stroke : #444;
    stroke-width : 4;
    stroke-dasharray : 8;
    stroke-linecap : round;
}


#intersection-link,
.ground-connection-link {
    stroke-width : 2;
    stroke : #444;
}
#intersection-node-outline,
.ground-connection-outline {
    stroke-width : 4;
    stroke : #444;
    fill : none;
}
#intersection-node-fill,
.ground-connection-node {
    /*stroke : #444;
    stroke-dasharray : 2;
    stroke-width : 2;*/
    stroke : none;
    fill : lightblue;
}
#intersection-link {
  stroke-dasharray : 2;
  stroke-width : 1;
}
#intersection-node-outline {
  stroke-dasharray : 2;
  stroke-width : 2;
}

/*
    Models
*/

#models-panel {

}

#models-panel .node {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

#models-panel .media {
    padding : 10px;
    margin-top : 5px;
}

#models-panel .media:hover {
    cursor: pointer;
}

/*#models-panel .media.selected {
    background-color: #F3F3F3;
}*/

#models-panel .icon-resource {
    margin-right : 2px;
    margin-left : 2px;
}

/*
    Resources
*/

.icon-resource {
    width: 20px;
    height: 20px;
}

#resources-panel .media {
    margin-top : 5px;
}

.resource-stats {
    margin-top : 10px;
}

.resource-stats .list-group-item {
    padding: 2px 15px;
}

.badge.badge-alert {
    background-color: #d9534f;
}


/*  */

.progress {
    margin-bottom: 5px;
}

.zone-stats .progress,
.resources-stats .progress {
    background-color: red;
}

.zone-stats .progress-bar,
.resources-stats .progress-bar {
    background-color: green;
}


/* D3 tip */

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
  pointer-events: none;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  position: absolute;
  pointer-events: none;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

/* Westward tooltips */
.d3-tip.w:after {
  content: "\25B6";
  margin: -4px 0 0 -1px;
  top: 50%;
  left: 100%;
}

.d3-tip table {
  width: 100%;
}

.d3-tip td {
    padding: 5px;
    border-bottom: 1px solid #ddd;
}

.d3-tip table .value {
  text-align: right;
  color: red;
  min-width: 100px;
}