/*body {*/
/*    background-color: #4c66b2;*/
/*}*/

body {
    background-image: none;
    background-color: transparent;
}

body, input {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif
}

code, kbd, pre {
    font-family: "Roboto Mono", SFMono-Regular, Consolas, Menlo, monospace
}

h1 {
    margin: 0!important;
    margin-bottom: 0.8rem!important;
}

.md-main__inner {
    margin-top: 0.5rem;
}

.md-typeset {
    font-size: .8rem;
    line-height: 1.6;
}
.md-typeset h4 {
    font-size: .7rem;
}

.md-typeset code {
    font-size: inherit;
}

.md-typeset details {
    font-size: .7rem;
}


.md-grid {
    max-width: 66rem;
    /* max-width: 100%; */
}

.md-content {
    padding: 0 1em;
}

/*.md-typeset details {*/
/*    margin: 1em 0!important;*/
/*}*/

.md-typeset details.query-format summary::before {
    /*-webkit-mask-image: var(--md-admonition-icon--question)!important;*/
    /*mask-image: var(--md-admonition-icon--question)!important;*/
    /*-webkit-mask-image: var(--md-admonition-icon--example)!important;*/
    /*mask-image: var(--md-admonition-icon--example)!important;*/
}

.md-typeset details.introduction summary::before {
    -webkit-mask-image: var(--md-admonition-icon--info)!important;
    mask-image: var(--md-admonition-icon--info)!important;
}



div#db-header-box {
    /*width: auto;*/
}


.submit-form-box {
    /*border: 1px solid silver;*/
    font-size: 0.65rem!important;
    padding: 0.8rem;
    padding-top: 0.6rem;
    border-radius: 0.25rem;
    background-color: #f3f3f3;

    /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
    /*transition: all 0.3s cubic-bezier(.25,.8,.25,1);*/
}

.submit-form-box h3 {
    /*border: 1px solid silver;*/
    font-weight: 550;
    margin-top: 0;
}

#submit-form .form-check {
    min-height: 1.3rem;
}

#submit-form div.name-email {
    display: flex;
}

#submit-form div.name-email .xname {
    display: inline-block;
    width: auto;
    flex: 1;
    min-width: 50%;
}
#submit-form div.name-email .xemail {
    display: inline-block;
    width: 30em;
    margin-left: 0.8em;
}


#db-form div.structure-ligand {
    display: flex;
}
#db-form div.structure-ligand .xpdb {
    display: inline-block;
    flex: 1;
    width: 34%;
    min-width: 10em;
}
#db-form div.structure-ligand .xuniprot {
    display: inline-block;
    flex: 1;
    width: 33%;
    min-width: 10em;
    margin-left: 0.8em;
}
#db-form div.structure-ligand .xligand {
    display: inline-block;
    width: 33%;
    min-width: 10em;
    margin-left: 0.8em;
}

.submit-form-box h1 {
    /*border: 1px solid silver;*/
    margin-top: 0;
    margin-bottom: 0.2rem!important;
    /*color: var(--md-default-fg-color--light);*/
}

.form-header img {
    float: left;
    width: 2.3em;
    height: 2.5em;
}

.submit-form-box .examples {
    float: right;
    margin-top: 1em;
    margin-right: .5em;
}

.submit-form-box .examples span {
    margin-left: 0.3em;
}

.form-control:focus {
    /*border-color: hsl(231deg 48% 48%);*/
    /*box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px hsla(231, 44%, 56%, 1);*/
}

.option input {
    display: inline;
    width: 10em;
    margin-left: .5em;
    padding: 0.2rem 0.6rem!important;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}

.option .opt-description {
    color: #8e8e8e;
}

button.btn-primary {
    /*background-color: hsl(231deg 48% 48%);*/
    white-space: nowrap;
}

.btn {
    font-size: inherit;
}

.form-control {
    font-size: inherit;
}

#queries-tab button {
    /*font-size: 0.5rem;*/
    /*padding: 0.325rem 0.65rem;*/
    margin-left: 0.1em;
}

table#my-jobs {
    margin-top: 1em;
}

.submit-form-box textarea {
    font-family: "Roboto Mono", SFMono-Regular, Consolas, Menlo, monospace;
    line-height: 1.3;
}

#div_queries_with_errors {
    margin: 1em 1em 0 0;
}

#div_queries_with_errors textarea {
    font-family: "Roboto Mono", SFMono-Regular, Consolas, Menlo, monospace;
    line-height: 1.4;
    color: var(--md-code-fg-color);
    font-size: 0.8em;
}

.submit-form-box label.thick {
    margin-top: 0.8em;
    margin-bottom: 0.3em;
    color: var(--md-default-fg-color--light);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.submit-form-box div.options-outer {
    margin-top: 2em;
}

.submit-form-box div.options {
    margin-left: 0.5em;
    display: flex;
}

.submit-form-box div.options .options-left {
    display: inline-block;
    /*width: 30em;*/
    width: 50%;

}

.submit-form-box div.options .options-right {
    display: inline-block;
    width: auto;
    flex: 1;
    min-width: 50%;
}



.md-typeset details.example {
    border-color: hsl(231deg 48% 48%);
}

table.my-jobs-table {
    min-width: 12rem!important;
}

.md-source:focus, .md-source:hover, .md-header-nav__button:focus, .md-header-nav__button:hover {
    opacity: .7!important;
    color: inherit;
}

/* On narrow viewports the title "AHoJ: Apo-Holo Juxtaposition" can't fit
   alongside the tabs; Material's md-ellipsis squeezes it down to ~3px and
   the leftmost stroke of "A" leaks into the viewport as a stray sliver.
   Hide the title outright on mobile so the tabs nav starts cleanly. */
@media screen and (max-width: 50em) {
    .md-header-nav__title { display: none; }
}

.keyword {
    color: var(--md-code-hl-keyword-color);
}


span.status {
    /*text-transform: capitalize*/
}
span.status.running {
    color: dodgerblue;
}
span.status.done {
    /*color: forestgreen;*/
}
span.status.error {
    color: #ff1744;
}
span.status.queued {
    color: lightsteelblue;
}

/*body {*/
/*    font-size: 0.8rem;*/
/*    font-weight: 400;*/
/*    line-height: 1.5;*/
/*}*/

.labeled-properties {
    font-size: 0.75rem;
}
div#job-labeled-properties {
    margin: 1em 0;
}

#q-side-panel {
    flex: 1;
    font-size: 0.75rem;
    /*position: relative;/*
    /*float: left;/*
    /*font-size: .9em;*/
    /*width: 29em;/*
    /*min-width: 10em!important;*/
}
.labeled-properties .label {
    margin-right: 0.3em;

    color: var(--md-default-fg-color);
    /*color: black;*/
    font-weight: 700;
    font-size: .9em;
    letter-spacing: -0.01em;
    /*text-transform: uppercase;*/
}

.labeled-properties progress {
    height: 1.3em!important;
    display: inline-block;
    vertical-align: middle!important;
    margin-left: 0.4em;
    margin-right: 0.8em;
    margin-bottom: 0.09em;
}

#job-results .labeled-properties progress {
    margin-left: 1.3em;
}

#queries-tab td.progr {
    padding-left: 1.1em;
    padding-right: 1.1em;
}

#queries-tab td.status {
    width: 6em;
}

#queries-tab td.buttons {
    white-space: nowrap;
}



#queries-tab progress {
    width: 4.5em;
    vertical-align: center;
    margin-top: 0.38em;
}

#queries-tab .prog-placeholder {
    width: 4.5em;
}

#queries-tab tr:hover {
    background-color: white;
}

.labeled-properties progress::-moz-progress-bar {
}


code.query {
    /*letter-spacing: +0.03em;*/
    white-space: nowrap;
    padding: 0.1em 0.3em;
    /*border: 1px solid hsla(0, 0%, 0%, 0.09);*/
}
code.codeid {
    white-space: nowrap;
    padding: 0.1em 0.3em;
    background-color: white;
}



.found-struct-table {
    padding: 0!important;
    overflow-x: revert!important;
    display: inline-block;
    margin: .4em .1em;
    box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .05), 0 0 .05rem rgba(0, 0, 0, .1);
    /*max-height: 20em;*/
    /*overflow-y: auto;*/
}
/*.found-struct-table tbody {*/
/*    display: block;*/
/*    max-height: 10em;*/
/*    overflow-y: scroll;*/
/*}*/

/*.found-struct-table thead, tbody tr {*/
/*    display: table;*/
/*    !*width: 100%;*!*/
/*    table-layout: fixed;*/
/*}*/

/*.found-struct-table thead tr th {*/
/*    position: sticky;*/
/*    top: 0;*/
/*}*/
.found-struct-table table {
    max-width: 10em;
    display: block!important;
    box-shadow: none!important;
    border-radius: 0!important;
}

.found-struct-table tbody {
    max-height: 5em;
    overflow-y: auto;
}

.found-struct-table td, .found-struct-table th {
    padding: .2em .7em !important;
    min-width: 0!important;
    white-space: nowrap;
    /*font-size: 0.95em;*/
}

.found-struct-table td.at, .found-struct-table th.at {
    padding: .2em .1em !important;
    text-align: center!important;
}

.found-struct-table th.so {
    /*text-align: center!important;*/
}

.found-struct-table td.so {
    text-align: right!important;
}

.found-struct-table td.lig {
    /*min-width: 6em!important;*/
    white-space: revert;
}

.found-struct-table.scrollable-table {
    max-height: 400px; /* Adjust this value based on your needs */
    overflow-y: auto; /* Enables vertical scrolling */
    overflow-x: hidden; /* Keeps horizontal overflow hidden unless needed */
}


.slash {
    color: var(--md-default-fg-color--lighter);
    /*padding: 0 0.2em;*/
}

#query-result {
    padding-top: 0!important;
    
    margin: 0 0.3em!important;
}

/*#query-result.d-content__inner {*/
/*    margin: 0!important;*/
/*}*/

#query-result h1 {
    margin-bottom: 0.6rem!important;
}

div.beta-badge {
    /*background-color: #3cb55b;*/
    background-color: var(--md-primary-fg-color--light);
    border-radius: 5px;
    color: #ffffff;
    display: inline-block;
    font-family: Arial, sans-serif;
    font-size: 60%;
    padding: 4px 6px;
    margin: 0.5em;
    vertical-align: middle;
    line-height: 1.5em;
    height: 2em;
}

@media screen and (max-width: 40em) {
    div.beta-badge  {
        display: none
    }
}


#my-jobs td, #my-jobs th {
    /*padding: .6em 2em !important;*/
}

#query-result-box {
    display: flex;
    justify-content: space-between; /* Adjust spacing between children */
    align-items: stretch; /* Align items vertically */
/*    width: 100em;*/

}


#molstar-box .msp-layout-expanded {
    top: 2.4rem!important;
    z-index: 3!important; /* does not work in */
}
/* Ensure molstar panel appears under header when not maximized */
#molstar-box .msp-layout-standard {
    /*z-index: 1;*/
}


#molstar-box-old {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 100px; /* Increase this value to add more distance from the top */
    flex: 1;
    height: 650px; /* Adjust this to fit the content */
    padding-bottom: 5rem;
    display: inline-block;
    margin-left: 1.5em;
    z-index: 10; /* Ensure it's above other content when it sticks */
}

#molstar-box-old #molstar-viewer {
    position: relative;
    width: 750px;
    height: 650px;
    margin: 1em;
    display: inline-block;
}
/* new molstar css (it tab) */
#molstar-tab #molstar-box {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    height: 100%;
    width: 100%;
    background: transparent;
    /*z-index: 3;*/
}

#molstar-tab #molstar-box #molstar-viewer {
    position: relative;
}

#molstar-tab #molstar-box #molstar-viewer .msp-plugin .msp-layout-standard {
    border: 0!important;
}

    /*float: left;/*
    /*padding-bottom: 5rem;/*
    /*width: 100%;*/
    /*display: inline-block;/*
    /*margin-left: 1.5em;/*
/*}
/*@media screen and (min-width: 40em) {*/
/*    #molstar-box {*/
/*    }*/
/*    #molstar-box #molstar-viewer {*/
/*        width: 950px;*/
/*        height: 600px;*/
/*    }*/
/*}*/
/*@media screen and (max-width: 40em) {*/
/*    #molstar-box {*/
/*        float: revert;*/
/*        position: relative;*/
/*        width: 100%;*/
/*    }*/
/*    #molstar-viewer {*/
/*        position: relative;*/
/*        float: revert;*/
/*        width: 100%;*/
/*    }*/
/*}*/

.md-header--shadow {
    box-shadow: 0 0 0.2rem rgb(0 0 0 / 10%), 0 0.2rem 0.4rem rgb(0 0 0 / 20%);
    /*transition: transform .25s cubic-bezier(.1,.7,.1,1),box-shadow .25s;*/
    transition: transform 1s cubic-bezier(.1,.7,.1,1),box-shadow .25s;
}


.ccolor1 {color: #156FC3;}
.ccolor2 {color: #C25B77;}
.ccolor3 {color: #165859;}
.ccolor4 {color: #957D5C;}
.ccolor5 {color: #6E0062;}
.ccolor6 {color: #24C4FF;}
.ccolor7 {color: #68D840;}
.ccolor8 {color: #30A581;}
.ccolor9 {color: #DE9AF5;}


button.btn-showhide {
    filter: opacity(0.7);
}

button.btn-showhide:hover {
    filter: brightness(120%);  /* saturate(120%) */
}

button.btn-showhide.loading {
    animation: pulse 1000ms infinite;
}

@keyframes pulse {
  0%, 100% {
    filter: opacity(0.2);
  }
  20% {
    filter: opacity(0.6);
  }
  50% {
    filter: opacity(1);
  }
  70% {
    filter: opacity(0.6);
  }
}

button.btn-showhide.hidden {
    filter: opacity(0.2);
}

button.btn-showhideall {
    filter: invert(1);
}



div#db-search-results-inner {
    width: auto;
}

div#db-search-summary {
    /*position: relative;*/
    /*float: left;*/
}



table#db-search-results-table {
    width: 100%;
    display: table!important;
}

table#db-search-results-table thead {
    width: 100%;
}
table#db-search-results-table tbody {
    width: 100%;
}


#db-search-results-table th, #db-search-results-table td {
    padding: 0.7em;
}

#db-search-results-table .btn-primary {
    /*padding: 0.5em 1em 0.42em 1em;*/
    padding: 0.4em 0.8em 0.35em 0.8em;
}

#db-search-results-btns .btn-primary {
    /*padding: 0.5em 1em 0.42em 1em;*/
    padding: 0.4em 0.8em 0.35em 0.8em;
}

#db-search-summary-table th, #db-search-summary-table td {
    padding: 0.3em 0.6em;
}

#db-search-summary-table th {
    /*background-color: white;*/
    /*color: grey;*/
}

#db-search-results-table td.action-buttons {
    display: flex;
}

#db-search-results-table td.action-buttons a {
    margin-right: 0.25em;
}

#searching-box {
    display: inline-block;
    margin-left: 2em;
}

p.m-error {
    font-weight: bold;
    color: hsla(0, 67%, 50%, 1);
}

#search-results {
    font-size: 0.65rem!important;
}


div#db-header-wrapper {
    display: flex;
    /*justify-content: space-between;*/
    /*align-items: center;*/
    margin-bottom: 0.4em;
}
div#db-info-box {
    float: right;
    width: 28em;

    font-size: 0.65rem!important;
    padding: 0.8rem;
    padding-top: 0.6rem;
    border-radius: 0.25rem;
    background-color: #f3f3f3;

    margin-left: 3em;

    /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
    /*transition: all 0.3s cubic-bezier(.25,.8,.25,1);*/
}
div#db-info-box h2 {
    margin-top: 0;
    margin-bottom: 0.2rem !important;
    /*color: var(--md-default-fg-color--light);*/
}
div#db-info-box #archive-link-box {
    margin-top: 1em;
}

@media screen and (min-width: 60em) {
    .md-header-nav__source {
        display: block;
        width: 6rem;
        max-width: 6rem;
        margin-left: 1rem
    }

    [dir=rtl] .md-header-nav__source {
        margin-right: 1rem;
        margin-left: initial
    }
}