/* Common styles */
/***********************************************************************************/
html {
	height: 100%;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0px;
	font-size: 14px;
	height: 100%;
}

.wrapper {
    min-height: calc(100% - 40px);
}

/* TODO: stretch to content width, not screen width */
footer {
	background-color: #efefef;
    height: 40px;
}

a:link {
	color: #70f;
}
a:visited {
	color: #70f;
}
	
.secondary_text {
	fill: #999999;
	color: #999999;
}

.secondary_text:link {
	fill: #999999;
	color: #999999;
}

.secondary_text:visited {
	fill: #999999;
	color: #999999;
}

.div-vert-line-80 {
    display:block;
    height:50px;
    width:1px;
    background:#cccccc;
}


/* Edit map form styles */
/***********************************************************************************/
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 10;
}

.modal-father {
    position: relative;
    height: 100%;
    width: 100%;
}
.modal {
    position: fixed;
    z-index: 11; /* 1px higher than the overlay layer */
    top: 50%;
    left: 50%;
    background-color: #FFBE08;
    border-radius: 5px;
	padding: 20px;
}

.field-caption {
	margin-bottom: 0.2em;
}

/* SVG styles */
/***********************************************************************************/

/* all path elements inside the group "links" (liks between nodes) have no fill */
g#links {
	fill: none;
}

/* link labels (figure inside a circle, representing the number of physical links) */
.labels {
	font-size:  10px;
	fill: white;
}


/* Links with unknown speed */
.link-1gb {
  stroke: red;
  stroke-width: 1px;
}
.link-1gb-info {
	background: red;
}
.link-1gb-label-circle {
  fill: red;
}

/* Virtual links (circuits) */
.link0gb {
  stroke: #000000;
  stroke-width: 1px;
  stroke-dasharray: 5,5;
}
.link0gb-info {
	background: #000000;
}
.link0gb-label-circle {
  fill: #000000;
}

/* Links with speed 10/100 Mbit/sec */
.link0_1gb {
  stroke: #777777;
  stroke-width: 1px;
}
.link0_1gb-info {
	background: #777777;
}
.link0_1gb-label-circle {
  fill: #777777;
}


.link1gb, .link2gb, .link5gb {
  stroke: #e1a800;
  stroke-width: 1px;
}
.link1gb {
  stroke-width: 1px;
}
.link2gb {
  stroke-width: 1.5px;
}
.link5gb {
  stroke-width: 2px;
}
.link1gb-info, .link2gb-info, .link5gb-info {
	background: #e1a800;
}
.link1gb-label-circle, .link2gb-label-circle, .link5gb-label-circle {
  fill: #e1a800;
}


.link10gb {
  stroke: #00DCB4;
  stroke-width: 2px;
}
.link10gb-info {
	background: #00DCB4;
}
.link10gb-label-circle {
  fill: #00DCB4;
}


.link25gb, .link40gb, .link50gb {
  stroke: #8600FF;
}
.link25gb {
  stroke-width: 2px;
}
.link40gb {
  stroke-width: 3px;
}
.link50gb {
  stroke-width: 4px;
}
.link25gb-info, .link40gb-info, .link50gb-info {
	background: #8600FF;
}
.link25gb-label-circle, .link40gb-label-circle, .link50gb-label-circle {
  fill: #8600FF;
}


.link100gb, .link200gb, .link400gb {
  stroke: #bc104b;
}
.link100gb {
  stroke-width: 4px;
}
.link200gb {
  stroke-width: 6px;
}
.link400gb {
  stroke-width: 8px;
}
.link100gb-info, .link200gb-info, .link400gb-info {
	background: #bc104b;
}
.link100gb-label-circle, .link200gb-label-circle, .link400gb-label-circle {
  fill: #bc104b;
}


.clusters rect, .clusters path, rect.clusters {
	stroke: #666666;
	stroke-width: 1px;
	fill: none;
	border-collapse: collapse;
	stroke-linejoin: round;
	stroke-dasharray: 3;
}

.VCs rect, .VCs path, rect.VCs {
	stroke: #999999;
	stroke-width: 1px;
	fill: none;
	border-collapse: collapse;
}

.vcNodesNumCircle {
	fill: #ffe393;
}

.vcNodesNum {
	fill: #000000; 
	stroke:none; 
	font-size:10px; 
}

/* Infobox styles */
/***********************************************************************************/

.infobox {
	padding: 20px;
	padding-top: 0;
	margin-bottom: 20px;
  
	background-color: #efefef; 
	/* background-color: #f1c40f; */
	border: 1px solid #999999;
	
	position: fixed;
	top: 2vh; 
	right: 10px;
    width: 700px;
	1height: 94vh;
	height: calc(100vh - 50px); 
	z-index:10;
	1overflow-y: scroll;
}

table.infobox_tab {
	/* scroll */
	margin-top:  32px; 
	display: inline-block; 
	overflow: auto;
	/* height:  100vh; */ /* default value. When infobox is displayed the height of the table is altered by JS to fit infobox borders */
	/* design */
	/* border: 1px solid #FFFFFF; */
	width: 100%;
	border-collapse: collapse;
}
table.infobox_tab th div {
	/* scroll */
	margin-top: -32px;
	position: absolute;
	/* design */
	text-align: left;	
	padding: 0.4em;
	padding-left: 0.6em;
	padding-right: 0.6em;
}
table.infobox_tab thead th {
	/* design */
	border: 1px solid #efefef;
	border-bottom: 1px solid #ffffff;
	background: #efefef;
  /*font-weight: bold;
  vertical-align: top;
  font-size: 14px;*/
}
table.infobox_tab td {
	border: 1px solid #ffffff;
	padding: 0.4em;
	padding-left: 0.6em;
	padding-right: 0.6em;
}
table.infobox_tab tr:nth-child(odd) {
	background: #dfdfdf;
}
table.infobox_tab tr:hover {
	background: #ffffff;
}
table.infobox_tab tr.last_tr {
	background: none;
}
table.infobox_tab tr.last_tr td {
	background: none;
	padding: 0;
	border: 0;
}

.link-speed-info {
	transform: rotate(-90deg);
	color: #ffffff;
	font-size: 10px;
	margin: 0;
	padding: 0;
}
