/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

body {
    padding-top: 61px;
}

.alert > pre {
    border: 0;
    background-color: transparent;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    color: #a94442;
}

.navbar-nav > li > a {
    padding-top: 20px;
}

#loadingWorkflow {
    opacity: 0.3;
    max-height: 500px;
    max-width: 100%;
}

.loadingWorkflowContainer {
    position: relative;
    min-height: 220px;
}

#loadingSpinner, #loadingSuccess, #loadingFail {
    position: absolute;
    top: calc(50% - 100px);
    left: calc(50% - 100px);
    z-index: 99;
}

.hide, #cwltooldetails, #loadingSuccess, #loadingFail {
    display: none;
}

#loadingWarning {
    margin-top: 10px;
}

:target {
    padding-top: 61px;
    margin-top: -61px;
}

.alert-grey {
    color: #7d7d7d;
    background-color: #f8f8f8;
}

#logo {
    height: 61px;
    padding: 5px;
}

#explore {
    padding-top: 20px;
}

#url {
    background: url("/img/gitlogo.png") no-repeat scroll 4px 1px;
    background-size: 30px 30px;
    padding-left: 45px;
}

#extraInputs {
    display:none;
    margin-top:10px;
}

#gitLogo {
    margin-right: 5px;
}

#dockerLogo {
    height: 75px;
    margin-left: 10px;
}

.logos {
  margin-top: 1em;
}

.logos img {
  height: 3em;
  align: top;
  margin-left: 1em;
  margin-right: 1em;
}

.graphControl {
    position: absolute;
    top: 10px;
    right: 25px;
    cursor: pointer;
    font-size: 25px;
    opacity: 0.333;
}

.graphControl:hover {
    opacity: 1;
}

#fullscreen-close {
    top: 25px;
}

#selectChildren, #selectParents {
    top: 8px;
    width: 30px;
    height: 35px;
}

#selectChildren {
    left: 25px;
}

#selectParents {
    left: 62px;
    height: 32px;
    width: 50px;
}

#fullScreenGraphModal .modal-dialog {
    width: 98%;
    height: 92%;
    padding: 0;
}

#fullScreenGraphModal .modal-body {
    width: 100%;
    height: 100%;
}

#fullScreenGraphModal .modal-content {
    height: 99%;
}

#graphFullscreen {
    background-color: #eeeeee;
    width: 100%;
    height: 90%;
}

#graph-menu {
    margin-bottom: 5px;
}

.icon-view {
    font-size: 20px;
}

.workflow-thumb {
    width:100%;
    max-height:300px;
}

#visualisation {
    overflow: hidden;
    padding: 0;
    height: 500px;
    margin-bottom: 10px;
}

@media (max-width: 767px) {
    #visualisation {
        height: 300px;
    }
}

#graph {
    width: 100%;
    height: 100%;
}

#graph svg text {
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#graph svg text::selection {
    background: none;
}

#download-gv {
    margin-bottom: 5px;
}

#dot {
    margin-top: 5px;
    margin-bottom: 10px;
}

#modalTitle {
    margin-top: 0;
}

.notFound {
    color: #c30000;
}

.method {
    color: white;
    border-radius: 5px 5px 0px 0px;
    padding: 2px 5px;
}
.method.get {
    background-color: green;
}
.method.post {
    background-color: #4070ec;
}
.method.delete {
    background-color: #ed0039;
}
.method.put {
    background-color: #e5c500;
}

.legend {
    list-style: none;
    height:30px;
}
.legend li { float: right; margin-right: 15px; }
.legend span {
    border: 1px solid #ccc;
    float: left;
    width: 20px;
    height: 15px;
    margin: 2px 4px 2px 2px;
}

.legend .inputoutputs { background-color: #94DDF4; }
.legend .tools { background-color: #FAFAD2; }
.legend .nestedworkflows { background-color: #F3CEA1; }
.legend .defaults { background-color: #D5AEFC; }
.legend .selectednode { background-color: #B9FFBB; }

.recommendation {
    font-weight: bold;
}

tr.selected, .table-hover tbody tr.selected:hover td, .table-hover tbody tr.selected:hover th {
    background-color: #b9ffbb !important;
}

tr.hover, .table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
    background-color: #c9ffcb !important;
}

polygon.selected, polygon.hover.selected {
    fill: #b9ffbb;
}

polygon.hover {
    fill: #c9ffcb;
}

#footer {
    text-align: center;
    font-style: italic;
    margin-bottom: 30px;
}

@media screen {
	.permalink {
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

.help {
	color: #9af;
}

@media print {
	.help {
		display: none !important;
	}
}

#permalink {
	font-size: x-small;
	color: #559cb7;
    overflow: hidden;
    white-space: nowrap;
}

#workflow-doc {
	line-height: 1.9;
	letter-spacing: -0.04em;
}

td.run, td.doc { 
	letter-spacing: 0.02em;
	font-size: small;
}

/**
 * Already showing HTML
 */
#format-html { 
	display: none;
}
/**
 * Workaround (not really) for
 * https://github.com/common-workflow-language/cwlviewer/issues/166
 */
#format-json { 
	display: none;
}

/**
 * Light email-obfuscation 
 */
.obf-hide {
  display: none;
}
.obf-at::before { 
  content: "@" 
 }