/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/* #7C7CB2 
#48487B */

html,
button,
input,
select,
textarea {
	color: #222;
}

html {
	color:#333;
	font-family: "Helvetica Neue", Helvetica, Arial, "MS Trebuchet", sans-serif;
	font-size: 1em;
	line-height: 1.4;
	overflow:hidden;
}

::-moz-selection {
	background: #b3d4fc;
	text-shadow: none;
}

::selection {
	background: #b3d4fc;
	text-shadow: none;
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}

audio,
canvas,
img,
video {
	vertical-align: middle;
}

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

textarea {
	resize: vertical;
}

.browsehappy {
	margin: 0.2em 0;
	background: #ccc;
	color: #000;
	padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body {
	padding:0;
}

pre {
	margin:3px;
}

a,
a:visited {
	color:#36454F;
	text-decoration:none;
}

.home a {
	color:#F74902;
	transition: all 0.2s;
}

.home a:hover {
	color:#C73902;
}

header {
	background-color:#f0f0f0;
	background-image:-webkit-linear-gradient(top, #f7f7f7, #eaeaea);
	background-image:-moz-linear-gradient(top, #f7f7f7, #eaeaea);
	border-bottom:1px solid #aaa;
	min-width: 750px;
	position:fixed;
	width:100%;
	z-index:100;
}

header>div, footer>div {
	padding:9px;
}

header h2 {
	display:inline-block;
	margin-left:80px;
	position:relative;
	text-shadow:1px 1px 0 white;
	top:3px;
}

header button {
	background-color:transparent;
	border:none;
	font-weight:bold;
}

header>div>button {
	height:24px;
	margin:0 10px 0 0;
	padding:0;
	vertical-align:4px;
	width:24px;
}

header>div>div>form {
	display:inline;
	font-size:11pt;
	margin: 0 15px;
}

header>div>div>form>label>input {
	margin-left:10px;
	vertical-align:-1px;
}

#header-toolbar-buttons-right {
	display:inline-block;
	float:right;
	margin:4px;
}

footer {
	background-color:#f0f0f0;
	border-top:1px solid #aaa;
	bottom:0;
	font-size:9pt;
	position:fixed;
	width:100%;
}

footer>div {
	display:inline-block;
}

footer>#statusbar {
	float:right;
}

#page-container {
	height:100%;
	position:absolute;
	top:53px;
	width:100%;
}

#menu {
	background-color:#f0f0f0;
	border-right:1px solid #ccc;
	height:100%;
	position:fixed;
	top:53px;
	width:170px;
}

#menu>ul {
	background-color:#f0f0f0;
	list-style-type:none;
	margin:0;
	padding:0;
	position:absolute;
	width:100%;
}

#menu>ul>li {
	background-color:#f0f0f0;
	display:block;
	transition: all 0.15s;
}

#menu>ul>li:hover {
	background-color:#d5d5d5;
}

#menu>ul>li>a:visited, #menu>ul>li>a:link {
	color:#666;
	display:inline-block;
	height:100%;
	padding:8px;
	text-decoration:none;
	width:100%;
}

#menu>ul>li>a:hover {
	color:#333;
}

.route-view {
	height:150px;
	width:100%;
}

#pane-container {
	bottom:22px;
	left:211px;
	overflow:scroll;
	position:fixed;
	right:0px;
	top:53px;
}

.pane-padding {
	margin:10px;
}

.pane-header {
	background:#f5f5f5;
	background-image:-webkit-linear-gradient(top, #f7f7f7, #eaeaea);
	background-image:-moz-linear-gradient(top, #f7f7f7, #eaeaea);
	border-bottom:1px solid #ccc;
	width:100%;
}


/* This selector is specific to modal content, which is the only
context in which we're creating a new element. As such, this aligns 
the "PRIME default" */
.modal-content .pane-header select,
.modal-content .pane-header label {
	display:block;
	float:right;
	font-size:10pt;
	margin:11px 5px;
}

.login-form input {
	margin: 7px auto;
	display: block;
}

.pane-header.with-top-border {
	border-top:1px solid #ccc;	
}

.pane-header button, .modal-footer button {
	background:#f5f5f5;
	background-image:-webkit-linear-gradient(top, #fff, #eaeaea);
	background-image:-moz-linear-gradient(top, #fff, #eaeaea);
	border:1px solid #ccc;
	padding: 3px 7px 3px 4px;
	font-size: 11pt;
}

.pane-header button[disabled], .modal-footer button[disabled] {
	color:#ccc;
}

.pane-header button[disabled]>img, .modal-footer button[disabled]>img {
	opacity:0.5;
}

.pane-header button img, .modal-footer button img, .list-icon {
	height: 16px;
	margin:1px 3px 0 2px;
	padding:0 2px 0 0;
	vertical-align:-3px;
	width: 16px;
}

.back-button {
	padding: 0 6px 0 0;
	vertical-align: -6%;
	cursor: pointer;
}

.js-link {
	cursor:pointer;
}

.pane-header>h2 {
	display:inline-block;
	font-size:14pt;
	padding:8px 5px 7px 10px;
}

.pane-header>h3 {
	display:inline-block;
	font-size:13pt;
	padding:9px 5px 6px 10px;
}

.pane-header.small {
	height:35px;
}

.pane-header>h4 {
	color:#65615f !important;
	display: inline-block;
	font-size: 11.5pt;
	padding: 8px 5px 0px 10px;
}

.breadcrumb {
	color:#bbb;
	display:inline-block;
	margin:0 5px 0 5px;
}

.pane-header-controls {
	display:inline-block;
	float:right;
	padding:8px;
}

.pane-content.with-padding {
	padding:10px;
}

.pane-content .left-hand-pane {
	border:none;
	display:inline-block;
	left:0;
	margin:0;
	padding:0;
	width:50%;
}

.pane-content .right-hand-pane {
	border-left:1px solid #ccc;
	display:inline-block;
	left:50%;
	margin:0;
	padding:0;
	position:absolute;
	width:50%;
}

.full-width-table {
	font-size:10.5pt;
	table-layout: fixed;
	width:100%;
}

.full-width-table label {
	margin-right:15px;
}

.switchable-container {
	display:inline-block;
	height:100%;
	vertical-align:top;
	width: 100%;
}

.modal-content .element-in-switchable-container {
	width:933px;
}

.element-in-switchable-container {
	box-sizing: border-box;
	display:inline-block;
	height:100%;
	vertical-align:top;
	width: 100%;
}

.condition-in-switchable-container {
	box-sizing: border-box;
	display:inline-block;
	height:100%;
	vertical-align:top;
	width: 100%;
}

.treatment-switch-padding {
	padding-left: 40px;
}

.treatment-metadata {
	display:table;
}

.condition-in-switchable-container .treatment-metadata {
	display:none;
}

.subsequent-treatment table:first-of-type {
	/* display:none; */
}

.switchable-container-add-switch-bar-control {
	box-sizing: border-box;
	background-color:#eee;
	border-bottom: 1px solid #ccc;
	display:inline-block;
	padding: 5px;
	text-align: center;
	top:0;
	width: 100%;
}

.switch-navigation-button {
	background-color:white;
	border:1px solid #ccc;
	border-radius:5px;
	cursor: pointer;
	float:right;
	padding:5px 10px;
}

.switch-navigation-button span {
	font-size:9pt;
	margin-left:3px
}

.table-with-bottom-border {
	border-bottom:1px solid #ccc;
}

.column-separator {
	border-right:1px solid #ccc;
}

td {
	height: 22px;
	overflow: hidden;
	padding:4px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

table.has-text-inputs tr td {
	height:24px;
}

table tr td.action-column, table tr th.action-column {
	padding:0;
	width:30px;
}

table.first-column-left-align th:nth-child(1), table.first-column-left-align td:nth-child(1) {
	text-align:left !important;
}

table.first-column-left-align th:not(:nth-child(1)), table.first-column-left-align td:not(:nth-child(1)) {
	text-align:center;
}

table.second-column-left-align th:nth-child(2), table.second-column-left-align td:nth-child(2) {
	text-align:left !important;
}

table.second-column-left-align th:not(:nth-child(2)), table.second-column-left-align td:not(:nth-child(2)) {
	text-align:center;
}

table.third-column-left-align th:nth-child(3), table.third-column-left-align td:nth-child(3) {
	text-align:left !important;
}

table.third-column-left-align th:not(:nth-child(3)), table.third-column-left-align td:not(:nth-child(3)) {
	text-align:center;
}

th {
	background-color:#f0f0f0;
	overflow:hidden;
	padding:3px;
	text-align:center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

table tr:nth-child(odd) {
	background-color:#fff;
}

table tr:nth-child(even) {
	background-color:#f0f0f0;
}

.fake-striping {
	background-color:#fff !important;
}

table tr.last-header-row {
	border-bottom:1px solid #ccc;
}

table tr.last-header-row th {
	cursor:pointer;
}

h1, h2, h3, h4, h5 {
	color:#F74902;
	font-family:"Hind", sans-serif;
	margin:0;
	text-shadow:1px 1px 0px white;
}

.model-highlight {
	background-color:#F74902;
}

.t2d h1, .t2d h2, .t2d h3, .t2d h4, .t2d h5 {
	color:#39098C;
	font-family:"Hind", sans-serif;
	margin:0;
	text-shadow:1px 1px 0px white;
}

.t2d .model-highlight {
	background-color:#39098C;
}

.ukpdsom2 h1, .ukpdsom2 h2, .ukpdsom2 h3, .ukpdsom2 h4, .ukpdsom2 h5 {
	color:#04960B;
	font-family:"Hind", sans-serif;
	margin:0;
	text-shadow:1px 1px 0px white;
}

.ukpdsom2 .model-highlight {
	background-color:#04960B;
}

.publication-list li {
	list-style-type: square;
	margin-bottom:15px;
}

.results-chart {
	height:400px;
	vertical-align:top;
	margin:10px auto;
	width:80%;
}

.chart-container {
	margin:10px;
	text-align:center;
}

.chart-container canvas {
	margin:auto;
	max-width:850px;
}

.half-width-chart-container {
	box-sizing:border-box;
	display:inline-block;
	float:left;
	padding:10px;
	overflow:hidden;
	text-align:center;
	width:50%;
}

.half-width-chart-container canvas {
	width:100%;
}

.scenario-name {
	display:inline-block;
	font-size:11pt;
	font-weight:bold;
	padding:4px 0 3px 0;
}

/* =================
* Micro clearfix 
==================*/

.cf:before,
.cf:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.cf:after {
  clear: both;
}

/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
	box-sizing:border-box;
	overflow:hidden;
	*zoom: 1;
}


.results-table {
	display:inline-block;
	height:350px;
	margin:0;
	width:49%;
}

.results-time-series {
	display:inline-table;
	width:100%;
}

.results-time-series tr td, .results-time-series tr th {
	font-size:10pt;
}

.results-time-series tr td {
	text-align:center;
}

#debug-window {
	background-color:black;
	border-top:1px solid #ccc;
	color:white;
	font-family:fixed;
	font-size:10pt;
	height:150px;
	left:0;
	opacity:0.8;
	padding:10px;
	position:fixed;
	right:0;
	bottom:0;
	z-index:1001;
}

.simulation-table {
	width:80%;
}

.simulation-table td {
	padding:10px;
}

.delete {
	margin-left:20px;
}

.element-picker a {
	background-color:#ddd;
	border:1px solid #ccc;
	border-radius:15px;
	color:black;
	display:inline-block;
	margin:3px;
	padding:3px 7px 3px 7px;
}

.simulation-drag-target {
	border:4px dotted #ccc;
	border-radius:8px;
	text-align:center;
	transition:all 0.5s;
}

.simulation-drag-target>p {
	color:#bbb;
	margin:1em 0;
}


.simulation-drag-target-hover>p {
	font-weight:bold;
}

.simulation-drag-target-drag-in-progress {
	background-color:#ddd;
	border:4px dotted #888;
	border-radius:8px;
	text-align:center;
}

.simulation-drag-target-drag-in-progress>p {
	color:#666;
}

.simulation-drag-target-dropped {
	background-color:#D0E9AF;
	border:4px solid #78AB46;
}

.simulation-drag-target-dropped>p {
	color: #588B26;
	font-weight: bold;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	margin: 1em;
}

.simulation-drag-target-result-page {
	text-align:center;
}

.simulation-drag-target-result-page>p>a>img {
	margin:2px 4px;
	vertical-align:-20%;
	width:13px;
}

.simulation-drag-target-result-page>p>a:hover {
	color:#F74902;
}

.simulation-drag-target-result-page>p {
	color: #000000;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	margin: 0;
}

#full-screen-modal-overlay {
	background-color:black;
	bottom:0;
	left:0;
	position:fixed;
	right:0;
	top:0;
	opacity:0.7;
	z-index:1002;
}

ul.nav {
	background:#f5f5f5;
	background-image:-webkit-linear-gradient(top, #f7f7f7, #eaeaea);
	background-image:-moz-linear-gradient(top, #f7f7f7, #eaeaea);
	list-style:none;
	margin:0;
	padding:0;
}

ul.nav li {
	border-bottom:1px solid #ddd;
	border-left:1px solid #ccc;
	border-right:1px solid #ddd;
	border-top:1px solid #ccc;
	border-radius:15px;
	display:inline-block;
	font-size:10pt;
	margin:5px;
}

ul.nav li.active {
	background-image:-webkit-linear-gradient(bottom, #fff, #ccc);
	background-image:-moz-linear-gradient(bottom, #fff, #ccc);
	border-bottom:1px solid #ddd;
	border-left:1px solid #bbb;
	border-right:1px solid #ddd;
	border-top:1px solid #bbb;
}

ul.nav li:not(.active):hover {
	background-image:-webkit-linear-gradient(top, #eee, #ddd);
	background-image:-moz-linear-gradient(top, #eee, #ddd);
}

ul.nav li a {
	color:black;
	display:inline-block;
	padding:4px 10px 4px 10px;
}

div.tab-pane {
	display:none;
}

div.tab-pane.active {
	display:block;
}

.grabber {
	cursor: url(img/bmp.ico);
	cursor: grab;
	cursor: -webkit-grab;
	cursor: -moz-grab;
	fill:gray;
}

.with-label label {
	display:inline-block;
	min-width:150px;
}

.element input[type="number"]:disabled {
	border:1px solid #ccc;
	color:#ccc;
}

.element input[type="text"], .element input[type="number"], .element input[type="password"] {
	border:1px solid #aaa;
	margin-left:5px;
	margin-right:10px;
	vertical-align: middle;	
	width:120px;
}

.element.advanced input[type="text"], .element.advanced input[type="number"], .element.advanced input[type="password"] {
	width: 97px;
}

.element input[type="text"].narrow-input, .element input[type="number"].narrow-input {
	width:50px;
}

.element input.disabled-header {
	background-color:transparent;
	border:none;
	font-weight:bold;
}

.element.costs input {
	width:150px;
}

.element textarea {
	margin-left:5px;
}

input.ng-invalid-min, input.ng-invalid-max {
	background-color:#fee;
	border:2px solid red;	
}

.element input.ng-invalid-min, .element input.ng-invalid-max {
	background-color:#fee;
	border:1px solid red;
}



/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 35em) {

}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}


/* ==========================================================================
   Angular.js animation classes
   ========================================================================== */

.fade-animation.ng-enter {
	-webkit-transition: 1s linear all; /* Safari/Chrome */
	transition: 0.15s linear all; /* All other modern browsers and IE10+ */
	opacity: 0;
}

.fade-animation.ng-enter.ng-enter-active {
	opacity: 1;
}

/* ==========================================================================
   Float override
   ========================================================================== */
.legendLabel {
	float:right;
	z-index:10000 !important;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}