/* Graph Styles */
/* Graph window styles */

/* Graph download button styles */
/*#graph-download-button {*/
/*position: absolute;*/
/*right: 10px;*/
/*top: 10px;*/
/*-moz-box-shadow:    3px 3px 2px rgba(0,0,0,0.04);*/
/*-webkit-box-shadow: 3px 3px 2px rgba(0,0,0,0.04);*/
/*box-shadow:         3px 3px 2px rgba(0,0,0,0.04);*/
/*border-width: 1px;*/
/*border-style: solid;*/
/*border-color: rgba(0,0,0,0.1);*/
/*}*/

#graph-modal {
    height: 93vh;
}

#modal-content {
    margin: 0;
    padding: 0 !important;
}

#modal-svg-canvas {
    margin-bottom: -4px;
}

.ui.top.attached.header#repo-read-file {
    border-radius: var(--roundness) var(--roundness) 0 0;
    transition: all 0.8s;
}

.ui.top.attached.header.active#repo-read-file {
    border-radius: var(--roundness) var(--roundness) 0 0;
}
#graph-expand-btn {
    padding: 0;
    background: none;
}

#graph-expand-btn i {
    margin-top: 3px;
    font-size: 1.2rem;
}

#graph-zoom-buttons {
    top: 10px;
    left: 10px;
}

#reset-graph {
    top: 95px;
    left: 10px;
    padding: 9px;
    font-size: 1.15em;
}

#expand-graph {
    top: 187px;
    left: 10px;
    padding: 10px;
    font-size: 1.15em;
}

#rotate-graph{
    top: 140px;
    left: 10px;
    padding: 10px;
}

#modal-graph-view #expand-graph {
    background-color: #00bbff !important;
}

#graph-view,
#modal-graph-view {
    position: relative;
}

#graph-view #graph-zoom-buttons,
#graph-view #reset-graph,
#graph-view #graph-legend,
#graph-view #expand-graph,
#graph-view #rotate-graph{
    visibility: hidden;
    z-index: 9999;
}

#graph-zoom-buttons,
#reset-graph,
#expand-graph,
#rotate-graph {
    position: absolute;
    background: #f9fafb;
    -moz-box-shadow:    3px 3px 2px rgba(0,0,0,0.04);
    -webkit-box-shadow: 3px 3px 2px rgba(0,0,0,0.04);
    box-shadow:         3px 3px 2px rgba(0,0,0,0.04);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0,0,0,0.25);
}

/*  Ripple effect on click */
.icon.ui.button.ripple {
    background: #f9fafb!important;
    background-position: center !important;
    transition: background 0.8s;
}

.icon.ui.button.ripple:hover {
    background: #ebebeb radial-gradient(circle, transparent 1%, #ebebeb 1%) center/15000% !important;
}

.icon.ui.button.ripple:active {
    background-color: #999999 !important;
    background-size: 100% !important;
    transition: background 0s;
}

/* Legend style */
#repo-read-file i {
    margin-right: 5px;
}

#graph-legend {
    position: absolute;
    right: 10px;
    top: 10px;
    -moz-box-shadow:    3px 3px 2px rgba(0,0,0,0.04);
    -webkit-box-shadow: 3px 3px 2px rgba(0,0,0,0.04);
    box-shadow:         3px 3px 2px rgba(0,0,0,0.04);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0,0,0,0.25);
}

#graph-legend thead tr th{
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

#graph-legend tr td {
    border-top: 0 !important;
}

#graph-legend i {
    margin-right: 5px;
}

.legend {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(27,31,35,.2);
    margin-top: 1px;
    margin-right: 5px;
}

/* Graph loader styles */
.graph-view-loader {
    background-color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    height: 200px;
}

/* Graph Styles */
/* Edge styles */
.edgePath path .path {
    stroke: #333;
    stroke-width: 1.5px;
}

/* Node styles */
.node {
    text-align: center;
}

.node-class {
    -moz-box-shadow:    0 2px 6px 1px hsla(0, 0%, 0%, 0.2);
    -webkit-box-shadow: 0 2px 6px 1px hsla(0, 0%, 0%, 0.2);
    border-radius: var(--roundness);
    box-shadow: 0 2px 6px 1px hsla(0, 0%, 0%, 0.2);
    margin: 10px;
}

.dvc-managed-node {
    background: #5277a9;
}
.partial-dep .dvc-managed-node,
.partial-dep.dvc-managed-node {
    background: repeating-linear-gradient(
            45deg,
            rgba(0,0,0,0),
            rgba(0,0,0,0) 10px,
            rgba(0,0,0,0.2) 10px,
            rgba(0,0,0,0.2) 20px),
    #5277a9;
}

.foreach_file-node > h3.dvc-managed-node:not(.foreach-general-header) {
    box-shadow: 7px 7px 0 0 #2c4059;
}

.code-node {
    background: #6ac9c8;
}
.partial-dep .code-node,
.partial-dep.code-node {
    background: repeating-linear-gradient(
            45deg,
            rgba(0,0,0,0),
            rgba(0,0,0,0) 10px,
            rgba(0,0,0,0.2) 10px,
            rgba(0,0,0,0.2) 20px),
    #6ac9c8;
}

.foreach_file-node > h3.code-node:not(.foreach-general-header) {
    box-shadow: 7px 7px 0 0 #366665;
}

.dvc-node,
.foreach_dvc-node {
    background: #eff3f6;
}

.metric-node {
  background: #bc477b;
  white-space: normal;
}

.metric-node, .foreach_metric-node {
    max-width: 35rem;
}
.partial-dep .metric-node,
.partial-dep.metric-node {
    background: repeating-linear-gradient(
            45deg,
            rgba(0,0,0,0),
            rgba(0,0,0,0) 10px,
            rgba(0,0,0,0.2) 10px,
            rgba(0,0,0,0.2) 20px),
    #bc477b;
}

.foreach_metric-node > h3.metric-node:not(.foreach-general-header) {
    box-shadow: 7px 7px 0 0 #732a4b;
}

.external-node {
    background: #F1E0C5;
}
.partial-dep .external-node,
.partial-dep.external-node {
    background: repeating-linear-gradient(
            45deg,
            rgba(0,0,0,0),
            rgba(0,0,0,0) 10px,
            rgba(0,0,0,0.2) 10px,
            rgba(0,0,0,0.2) 20px),
    #F1E0C5;
}

.foreach_file-node > h3.external-node:not(.foreach-general-header) {
    box-shadow: 7px 7px 0 0 #998e7d;
}

.metric-node .ui.header,
.code-node .ui.header,
.dvc-managed-node .ui.header,
.accordion .title.metric-node.sub-entry-head,
.accordion .title.code-node.sub-entry-head,
.accordion .title.dvc-managed-node.sub-entry-head,
.metric-node.node-head,
.code-node.node-head,
.dvc-managed-node.node-head {
    color: #fff
}

.ui.header.node-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    cursor: pointer;
    min-width: 0;
    padding: 7px;
    margin: 0;
    border-radius: var(--roundness);
}

.disabled-graph-link,
.disabled-graph-link:hover{
    color: rgba(0, 0, 0, 0.5);
    cursor: not-allowed;
    text-decoration: none;
}

.node-detail-div {
    background: #fff;
    border-top: 0 none;
    border-bottom: 1px solid rgba(0,0,0,0.25);
    -moz-box-shadow:    inset 0 3px 3px rgba(0,0,0,0.05);
    -webkit-box-shadow: inset 0 3px 3px rgba(0,0,0,0.05);
    box-shadow:         inset 0 3px 3px rgba(0,0,0,0.05);
    color: #000;
    padding: 0;
    margin: 0;
    text-align: left;
    width: 100%;
    max-height: 25rem;
    overflow-y: auto;
}

/* Table Styles */
.ui.table.graph-metric-table,
.ui.table.graph-dvc-foreach-table {
    border-radius: 0;
}

.node-path-loc {
    padding: 15px;
    overflow-wrap: break-word;
    background: white;
    text-align: left;
    color: black;
    border-radius: 0 0 var(--roundness) var(--roundness);
}

.unsupported .node-path-loc {
    white-space: normal;
}

.node-path-loc > p {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui.header i.location-node-icon {
    margin-right: 10px;
    padding-left: 0;
    margin-left: 5px;
    display: inline-block;
}

.ui.button.graph-node-expand-btn {
    margin-left: 5px;
    padding: 2px 7px;
    margin-right: 0;
    border: 0;
    width: 27px;
    height: 27px;
    background: none;
    color: inherit;
    cursor: pointer;
}

.ui.button.graph-node-expand-btn i {
    font-size: 18px;
}

.ui.button.graph-node-expand-btn:focus, .ui.button.graph-node-expand-btn:active {
    border: 0;
    outline: none;
}

/* Styles for empty graph */
.empty-repo-graph {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 25px;
    padding-bottom: 25px;
    height: 15rem;
}

.empty-repo-graph:before {
    background-image: url(/img/empty_pipeline_icon.svg) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 0.2;
}

.empty-graph-icon {
    font-size: 50px;
    margin: 0;
    padding: 0;
}

.empty-graph-text {
    font-size: 18px;
    margin-top: 15px;
    padding: 0;
}

/* Stage edit styles */
#graph-sidebar {
    border: none;
    border-right: 1px solid rgba(34,36,38,.15);
}

#graph-sidebar .relation-tab .item {
    border-radius: var(--roundness) !important;
    padding: .78571429em .92857143em;
}

#modify-stage-close-btn {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

#modify-stage-segment {
    margin: 0 !important;
}

.modify-stage-new-branch {
    margin-left: 1.5em !important;
}

.selected-node {
    border: 5px dashed #ebbe35 !important;
}

.file-selector .ui.dropdown>.text {
    width: 100%;
}

.file-selector .ui.dropdown .menu>.item {
    word-break: break-word;
}

.stage-edit-btns.ui.buttons {
    width: 100%;
}

.stage-edit-btns.ui.buttons .button:first-child{
    border-top-left-radius: 0 !important;
}

.stage-edit-btns.ui.buttons .button:last-child{
    border-top-right-radius: 0 !important;
}

/* Metric Table Styles */
.ui.table.graph-metric-table {
    font-size: 18px;
    margin: 0;
    table-layout: fixed;
}

.ui.table.graph-metric-table .metric-name {
    font-weight: 900;
    color: #bc477b;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.ui.table.graph-metric-table .metric-value {
    text-align: right;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ui.table.graph-metric-table .metric-name-header {
    width: 50%;
}

.ui.table.graph-metric-table .metric-value-header {
    text-align: right;
}

.node-title-container {
    overflow: hidden;
    min-width: 0;
}

.node-title-left {
    display: flex;
    align-items: center;
    justify-content: center;
}

div.tooltip {
    position: absolute;
    text-align: center;
    font: 12px sans-serif;
    background: #103037;
    border: 0px;
    border-radius: var(--roundness);
    pointer-events: none;
    padding: 9px;
    color: var(--text-color-dark);
    z-index: 9999;
}

.foreach-node-extra {
    font-size: 14px;
    min-width: 23px;
    max-height: 23px;
    background: #FFF9A5;
    font-weight: bold;
    -webkit-box-shadow: 0 2px 2px 1px hsla(0, 0%, 0%, 0.2);
    box-shadow: 0 2px 2px 1px hsla(0, 0%, 0%, 0.2);
    border-radius: 100px;
    color: rgba(0,0,0,.87);
}

.foreach-node-extra.number {
    background: #FFF9A5;
}

.foreach-node-extra.warning {
    background: #ffada5;
}

.foreach_file-node .accordion-container .sub-entry-table,
.foreach_metric-node .accordion-container .sub-entry-table{
    border-radius: 0 0 var(--roundness) var(--roundness);
    overflow: hidden;
}

.foreach_file-node .accordion-container,
.foreach_metric-node .accordion-container {
    max-height: 410px;
    overflow-y: auto;
}

.foreach_file-node .accordion.sub-entry-table .title.sub-entry-head,
.foreach_metric-node .accordion.sub-entry-table .title.sub-entry-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px;
}

.foreach_file-node .ui.accordion .title,
.foreach_metric-node .ui.accordion .title{
    font-size: 18px;
}

.foreach_file-node .ui.accordion .accordion-element:not(:first-child) .title ,
.foreach_metric-node .ui.accordion .accordion-element:not(:first-child) .title {
    border-top: 2px solid rgba(34,36,38,.3);
    margin-top: -1px;
}

.foreach_file-node .accordion i.location-node-icon,
.foreach_metric-node .accordion i.location-node-icon {
    margin-right: 10px;
    margin-left: 5px;
}

.foreach_file-node .accordion.sub-entry-table .content.active,
.foreach_metric-node .accordion.sub-entry-table .content.active {
    padding: 0!important;
}

h3.ui.header.foreach-general-header {
    font-size: 16px;
    padding: 3px 7px;
}

/* scrollbar for node internals */
.foreach_file-node .accordion-container::-webkit-scrollbar,
.foreach_metric-node .accordion-container::-webkit-scrollbar,
.foreach_dvc-node .node-detail-div::-webkit-scrollbar,
.metric-node .node-detail-div::-webkit-scrollbar{
    width: 5px;
}