/*
================================================
Created by Mark Fredriksen
Last updated on 09-14-2020
Notes: This stylesheet applies to NHGRI's Animal Proteome DataBase (AniProtDB) project.  The included styles below pertain only to the Web resource and not to any other NHGRI resource.  However, this stylesheet should be used alongside NHGRI's front-end_responsive.css.

================================================
Contents:
	01 Project-Specific Variables
	02 Proteome Pipeline SVG
	03 Pop-Up Modal
================================================
*/

/* 01 Project-Specific Variables
--------------------------------------------- */



/* 02 Proteome Pipeline SVG
--------------------------------------------- */
.container-svg {
	position: relative;
  display: flex; /*inline-flex to justify left*/
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
	text-align: center;
	margin: 1rem;
}

svg#pipeline-overview {
	margin-top: 1.25rem;
	width: 20rem;
	max-width: 20rem;
}

svg#pipeline-overview text {
	font-size: 14px;
	font-family: Helvetica, "Helvetica Neue", Gotham, Arial, "sans-serif";
	font-weight: 400;
	letter-spacing: normal;
	line-height: normal;
	fill: #000;
}

svg#pipeline-overview text .small {
	font-size: 12px;
}

svg#pipeline-overview text .em {
	font-style: italic;
}

svg#pipeline-overview rect, svg#pipeline-overview polygon {
	display: block;
	stroke: #2f528f;
	stroke-width: 3;
	stroke-miterlimit: 8;
}

svg#pipeline-overview rect.box-blue, svg#pipeline-overview polygon.box-blue {
	fill: #b4c7e7;
}

svg#pipeline-overview rect.box-orange, svg#pipeline-overview polygon.box-orange {
	fill: #f8cbad;
}

svg#pipeline-overview rect.box-gray, svg#pipeline-overview polygon.box-gray {
	fill: #f2f2f2;
}

svg#pipeline-overview a:hover rect, svg#pipeline-overview a:hover polygon {
	transition: .3s fill;
	fill: #336699;
	cursor: pointer;
}

svg#pipeline-overview a:hover text {
	transition: .3s fill;
	fill: #fff;
}

svg#pipeline-overview .arrow-block {
	fill: #2f528f;
	stroke: none;
}


/* 03 Pop-Up Modal
--------------------------------------------- */
#pipeline-overview a.trigger {
  cursor: pointer;
}

.modal .modal-dialog .close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
	outline: none;
  background-color: transparent;
  font-size: 1.125rem;
  transition: 0.25s linear;
	padding: 0;
	opacity: 1;
}

.modal .modal-dialog .close:before, .modal .modal-dialog .close:after {
  position: absolute;
  content: '';
  width: 1.25rem;
  height: 0.125rem;
  background-color: var(--blue-dusty);
}

.modal .modal-dialog .close:before {
  -webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.modal .modal-dialog .close:after {
  -webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.modal .modal-dialog .close:hover {
  -webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
	opacity: 1;
}

.modal .modal-dialog .close:hover:before, .modal .modal-dialog .close:hover:after {
  background-color: var(--blue-sea);
}

.modal a {
	word-break: break-all;
}

.modal h2.modal-title {
	margin-top: 0.25em !important;
	font-size: 1.75rem;
	font-weight: 600;
	line-height: normal;
}

.modal h3 {
	margin-top: 0 !important;
	font-size: 1.25rem;
	line-height: normal;
}

.modal pre {
	font-size: 0.75em;
	white-space: pre-wrap;
	word-break: break-all;
}

.modal pre code {
	word-break: break-all;
	line-height: 1.65em;
}