/* Global Styles */

#app {
    height: 100vh;
    margin:0;
    padding:0;
    overflow:hidden;
}

div, .v-card {
    display:flex;
    min-height:0;
    /*     flex: 1 1 auto; */
}

/* Global: Header */

.header-flex {
    display:flex;
    flex-direction: row;
    min-height:0;
    flex: 0 0 auto;
}

.header-flex > header {
    display:flex;
    min-height:0;
    width:100%;
}

.v-toolbar__content {
    width:100%;
}

.header-links {
    justify-content: end;
}

.header-links > a:hover {
    text-decoration: none;
}

/* Global: Content Area */

.main-flex {
    display:flex;
    min-height:0;
    flex: 1 1 auto;
    padding:20px;
}

.main-flex > main {
    display:flex;
    min-height:0;
    flex: 1 1 auto;
}

.v-main, .v-main__wrap {
    flex-direction:row;
    justify-content: center;
}

.v-main > .v-main__wrap > .v-card {
    display:flex;
    flex-direction:column;
    min-height:0;
    width:100%;
}

.v-main > .v-main__wrap > .v-card > header {
    display: flex;
    min-height:0;
    flex: 0 0 auto;
}

.v-input--selection-controls .v-input__slot > .v-label, .v-input--selection-controls .v-radio > .v-label {
    margin-top: auto;
    margin-bottom: auto;
  }

.container {
    max-width: 100% !important;
    flex: 1 1 auto;
    flex-direction: column;
}

.content {
    overflow:scroll;
    display:flex;
    flex-direction: column;
    flex: 1 1 auto;
    width:100%;
    padding:20px;
}

/* Global: Footer */

.footer-flex {
    display: flex;
    flex-direction:column;
    min-height:0;
    flex: 0 0 auto;
}

.footer-flex > footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:5px;
}

.footer-links {
    display:flex;
    flex-direction:row;
    margin: 0 15px;
}
.copyright {
    flex-direction:row;
}

.footer-links > a:hover {
    text-decoration: none;
}

/* Global: Data Tables */

.content > .v-data-table, .content > .v-data-table > .v-data-table__wrapper {
    min-height:fit-content;
}
.v-data-table {
    display:flex;
    min-height:0;
    flex-direction:column;
    padding-top:10px;
}

.v-data-table__wrapper {
    overflow:scroll;
}

.v-data-table-header {
    width: 100%;
    white-space: nowrap;
}

.v-data-footer {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    padding: 10px 10px 5px 10px;
    width: 100%;
    flex: 0 0 auto
}

.v-application--is-ltr .v-data-table--fixed-header .v-data-footer {
    margin-right: 0px;
}

.v-data-footer .v-text-field > .v-input__control > .v-input__slot::before {
    border-style: none;
}

/* Global: Records Tile View */

.container.recordstile {
    max-width:100%;
    overflow:scroll;
    margin-top:9px;
    margin-bottom:10px;
}

.container.recordstile > .row {
    padding: 0 5px 20px 10px;
}

.container.recordstile > .row > .col {
    margin:5px;
    padding:0px;
}


/* Scoped: Protocol View */
.data-fields {
    font-size: smaller;
    white-space: nowrap;
  }


/* Scoped: ModelView */

.modelviewGraphs {
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.modelviewGraphs > .v-card {
    display: flex;
    min-height:0;
    flex-direction: column;
    margin:20px;
}

svg, g {
    display:flex;
    min-height:0;
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    flex: 1 1 auto;
}

.modebar-group {
    display:flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
}

.correct, .incorrect {
    padding:5px;
    text-align: center;
}

/* Scoped: Method View */

.content > .v-input {
    flex: 0 0 auto;
}

.method-stats {
    flex-direction:row;
    padding-left:10px;
    margin-bottom: 20px;
}

.method-stat {
    text-align:center;
    display:block;
    margin-left: 15px;
    margin-right: 15px;
}

.method-stat > span {
    display:block;
}

.method-graph {
    flex: 1 1 auto;
}

.method-graph .js-plotly-plot {
    max-width: 800px;
}



/* Scoped: StructurePredict */

.predict .content {
    padding:0;
}

.predict > .v-card__text {
    flex-direction: column;
    flex: 0 0 auto;
}

.predict .v-input {
    padding: 0 20px;
}

.predict-iframe {
    display: flex;
    flex: 1 1 auto;
}

iframe {
    display:flex;
    min-height:0;
}

.ketcher-frame {
    width: 100%;
    min-height: 450px;
    border: none;
    overflow: hidden;
}

.predict > .v-card__actions {
    margin:5px 20px;
    flex: 0 0 auto;
}

.predict > .v-data-table {
    flex: 0 0 auto;
}
    
/* Scoped: Jobs View */

.jobview-metadata {
    flex: 0 0 auto;
    margin: 30px 30px 0 30px;
}

.jobview.container {
    flex-direction:column;
    flex: 1 1 auto;
    max-width:100%;
    overflow:auto;
    border-top: 3px double #999;
}
.jobview .v-expansion-panel {
    flex-direction:column;
}



/* Scoped: Resultsets View */

.resultset-graph.container {
    height:100%;
    max-width:100%;
    flex: 1 1 auto;
}

.resultset-graph .svg-container {
    width: 100%;
    height: 100%;
    min-height:500px;
    flex: 1 1 auto;
}

/* Predictions Plotly */

.js-plotly-plot {
    flex: 1 1 auto;
    height: 100%;
    width: 100%;

}

.js-plotly-plot .plotly {
    width:100%;
    flex: 1 1 auto;
    flex-flow: nowrap;
}

.modebar-container {
    height:auto;
}


/* Scoped: DatasetDialog */

.field-container {
    flex: 0 0 auto;  
    overflow:auto;
    flex-direction: column;
}
.field-container > .fields {
    margin-top:20px;
    flex-direction: row;
    width: 100%;
    padding: 0 20px;
    align-items: center;  
    flex: 0 0 auto;  
}

.fields label {
    flex: 0 0 100px;
    text-align: right;
}

.fields .v-input.v-select {
    flex: 1 1 auto;
    width:auto;
    max-width:auto;
}


/* Readacross Dialog */

.dialog.readacross .v-input {
    flex: 1 1 auto;
}

.dialog.readacross .v-card__title {
    margin-bottom:10px;
}


/* Readacross View kNN */

.container .knn {
    align-items: center;
    flex-direction: column;
    flex: 1 1 auto;
}
.knn-title {
    color: #666;
    position: absolute;
    bottom:10px;
}
.knn-graph {
    flex: 1 1 auto;
}

/* Metadata Dialog */


.dialog .meas-target .v-text-field {
    flex: 1 1 50%
}

.dialog .org-access .v-text-field, .v-select {
    flex: 1 1 50%;
}

.dialog .uploads {
    margin-top: 20px;
    align-items:start;
}

.dialog .uploads .v-textarea {
    margin: 0 15px;
    flex: 1 1 50%;
}

.uploads textarea .v-text-field__details {
    margin:0;
    padding:0;
    height:0;
    min-height: 0;
}

.dialog .file-upload {
    margin: 0 15px;
    flex: 1 1 50%;
    flex-direction:column;
}

.dialog .file-upload > .v-input {
    margin:0;
}



/* Global */


.dialog.v-card {
    display:flex;
    min-height:0;
    flex-direction: column;
    overflow:auto;
}
.dialog .v-card__title {
    margin-bottom:30px;
}
.dialog .v-card__text {
    flex-direction: column;
    padding:0;
    flex: 0 0 auto;
}
.dialog .v-input, .dialog .spacer {
    margin: 0px 15px;
    flex: 1 1 auto;
    align-items: center;
}

.dialog .subtitle {
    color: #333;
    font-size:1rem;
    margin: 30px 0px 5px 20px;
    flex: 0 0 auto;
}

.dialog .subtitle-details {
    flex: 0 0 auto;
    margin: 0 20px;
}


.dialog .v-card__actions {
    margin: 0 5px 10px 0px;
    flex: 0 0 auto;
}


.v-toolbar__content > a:hover {
    text-decoration: none;
}

.v-dialog {
    justify-content: center;
}


.no-link-under {
a:hover {
    text-decoration: none;
    min-height:0;
}
}

.show-on-hover {
a.hidden {
    display: none;
}

&:hover {
    a {
    display: inline-block;
    }
}
}

.wrap-200 {
    display: inline-block !important;
    width: 200px;
    overflow-wrap: break-word;  
}
.wrap-300 {
    display: inline-block !important;
    width: 300px;
    overflow-wrap: break-word;
}

.wrap-400 {
    display: inline-block !important;
    width: 400px;
    overflow-wrap: break-word;
}

.wrap-500 {
    display: inline-block !important;
    width: 500px;
    overflow-wrap: break-word;
}

.wrap-600 {
    display: inline-block !important;
    width: 600px;
    overflow-wrap: break-word;
}

.kudos {
    font-size: x-small;
    position: absolute;
    bottom: 0;

    right: 0;
    padding-right: 5px;

    a:link,
    a:visited {
        color: white;
    }

    a:hover,
    a:active {
        color: pink;
    }
}



.v-data-table thead th {
    white-space: nowrap;
    font-weight: bold;
    font-size:14px;
}

.results-header {
    font-size: 13px;
    font-weight: bold;
}

.structure-predict {
    margin-top:10px;
    height:50px !important;
}

.structure-predict > .v-toolbar__content {
    flex-direction: row;
    justify-content: flex-end;
    height:50px !important;
}

.boxplot-structure {
    padding:0;
    margin:0;
    height:400px;
}

.instructions {
    justify-content: end;
    color: rgb(219,94,43);
}