:root {
    --dt-row-selected: 136, 173, 135;
}

body {
    background: #fff;
    /*background: linear-gradient(90deg, rgba(208,214,251,0.5) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,1) 70%, rgba(208,214,251,0.5) 100%);*/
}
a {
    color: mediumblue;
}

.loading-modal {
    border: none;
    display:    none;
    position:   fixed;
    z-index:    12999;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: var(--spin) 50% 50% no-repeat;

}
body.loading .loading-modal {
    display: block;
}

.navbar.bg-primary .nav-link {
    text-shadow: 1px 1px 10px rgba(0,0,0,.5);
}

#mainFooter {
    border-top: 1px solid #ddd;
    background: var(--main);
    min-height: 25px;
    height: 25px;
    position: fixed;
    bottom: 0;
    width: 100%;
    line-height: 20px;
    z-index: 1001;
}
#mainFooter a {
    text-shadow: 1px 1px 10px rgba(0,0,0,.5);
}
#mainNav input, #mainNav select {
    background: rgba(255,255,255,0.6);
}
#mainNav li.nav-item {
 white-space: nowrap;
}

#mainContainer {
    padding-bottom: 50px;
}
h1 {
    background: linear-gradient(180deg, var(--headGrad1) 0%, var(--headGrad2) 100%);
    border: 1px solid var(--headGrad3);
    font-size: 1.4rem;
    padding: .3rem 1rem;
    border-radius: 5px;
}

h2 {
    background: linear-gradient(180deg, var(--sub1Grad1) 0%, var(--sub1Grad2) 100%);
    border: 1px solid var(--sub1Grad3);
    font-size: 1.2rem;
    padding: .3rem 1rem;
    border-radius: 5px;
}

h3 {
    background: linear-gradient(180deg, var(--sub2Grad1) 0%, var(--sub2Grad2) 100%);
    border: 1px solid var(--sub2Grad3);
    font-size: 1rem;
    padding: .2rem 0.8rem;
    border-radius: 5px;
}

button.btn-primary {
    color: white;
    text-shadow: 1px 1px 10px rgba(0,0,0,.5);
}
.jsPanel-hdr {
    background: linear-gradient(180deg, var(--headGrad1) 0%, var(--headGrad2) 100%) !important;

}

.errorBox h1 {
    background: none;
    border: none;
}

#seqAnalysisForm .form-group>label {
    font-weight: bold;
    width: 100%
}
#seqAnalysisForm label>small {
    float: right;
}
#protSeq {
    background-size: cover;
    background-image: url("/images/main_logo_seq.png");
    font-family: Courier;
    font-size: 0.8rem;
}
#archAnalysisForm .form-group>label {
    font-weight: bold;
    width: 100%
}
#archAnalysisForm label>small {
    float: right;
}

#archAnalysisForm div.bootstrap-autocomplete {
    max-height: 250px;
    overflow-y: auto;
}
#archAnalysisForm div.bootstrap-autocomplete .dropdown-item {
cursor: pointer;
}
#smartResult .nav-tabs li a {
    background: linear-gradient(180deg, #eee 0%, #fff 100%);;
    border: 1px solid #ccc;
    border-bottom: none;
    margin-right: 1px;
    color: #444;
}
#smartResult .nav-tabs li a.active {
    border-bottom: 2px solid white;
    background: linear-gradient(180deg, var(--headGrad1) 0%, var(--headGrad2) 100%);
    font-weight: bold;

}
#smartResult .tab-pane{
    border:solid 1px #ddd;
    border-top: 0;
    padding: 0.5rem;
    border-radius: 3px;
}

.protInfoTable {
    border-collapse: collapse;
    width: 100%;
}
.protInfoTable th {
    padding: 5px 10px 5px 50px;
    text-align: right;
    background: #eee;
    background: linear-gradient(90deg, #fff 0%, #eee 100%);
    white-space: nowrap;
    width: 100%;
}
.protInfoTable td {
    width: 100%;
    padding-left: 10px;
    border-bottom: 1px solid #eee;
}
.protInfoTable th:first-child {
    width: auto;
}
#resTables .dataTable th {
    background: linear-gradient(180deg, var(--headGrad1) 0%, var(--headGrad2) 100%);
    color: #444;
}
#resTables .dt-search {
    padding: 2px;
}
#resTables .infoBoxMsg {
    font-size: 70%;
}
#resTables div.row div.align-items-center:has(> div.infoBoxMsg) {
    align-items: start !important;
}

#resTables .col h2 {
    background: linear-gradient(180deg, #eee 0%, #fff 100%);;
    border: none;
    border-radius: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    text-align: center;
    padding: 3px;
    color: #444;
}
#resTables .col h2 i {
    float: right;
    margin: 0.4rem;
}
#resTables table tbody tr:nth-child(even):hover td{
    background-color: #ffa !important;
}

#resTables table tbody tr:nth-child(odd):hover td {
    background-color: #ffa !important;
}

#smartContent {
    border-top: 1px solid #ddd;
    border-radius: 3px;
}
#smartContent h1 {
    background: linear-gradient(180deg, #eee 0%, #fff 100%);
    border: 1px solid #eee;
    font-size: 1.2rem;
}
#smartContent h2 {
    background: none;
    border: none;
    border-bottom: 1px solid #eee;
    font-size: 1.1rem;
}
#smartContent .btn-primary {
    color: white;
}
#smartContent .btn-primary:hover {
    color: #333;
}
#smartContent .archT td {
    padding: 5px 10px;
}
#smartTabs {
    border-bottom: none;
}
.protN {
    margin-bottom: 0;
    border-bottom-right-radius: 0;
}
.protD {
    margin-bottom: 0;
    background: none;
    background: linear-gradient(180deg, #fff 0%, #eee 100%);
    padding: 5px 10px;
    border: none;
    font-size: 0.9rem;
    margin-left: 1rem;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

#proteinDrawerControl {
    display: inline;
    margin-left: 1rem;
}
#proteinDrawerWrapper .btn-group > .btn {
    padding: 0.125rem 0.25rem;
    font-size: 0.8rem;
    line-height: 1.2;
}
#viewerWrap {
    position: sticky;
    top: 40px;
    background: rgba(255,255,255,0.9);
    z-index: 1001;
}
#altViewControl {
    visibility: hidden;
    display: inline;
    margin-left: 2rem;
    align-content:center;

}
#altViewControl p {
    margin: 0; padding: 0;
    display:inline;
    font-size: 0.8rem;
}

.stEdTip {
    text-align: center;
}
.stEdTip h2 {
    background: #eee;
    margin-top: -5px;
    margin-left: -10px;
    margin-right: -10px;
    border-bottom: 1px solid #ddd;
}
.stEdTip img {
    margin-top: 10px;
}
.stEdTip p {
    margin-top: 10px;
    margin-bottom:0;
}
#seqBlastP pre {
    padding: 5px;
    width: 100%;
    text-align: center;
    background: #eee;
}

.qProgress {
    position: relative;
    height: 25px;
}
#qPosition {
    position: absolute;
    text-align: center;
    line-height: 25px;
    overflow: hidden;
    color: black;
    right: 0;
    left: 0;
    font-size: 1rem;
}
#qPosition span {
    background: rgba(220,220,220,0.7);
    border-radius: 3px;
    padding: 0 5px;
}

#treeHead,#matchInfo {
    margin:0;
    font-size:0.8rem;
    color: #777;
}
#protSelPanel {
    z-index: 1050!important;
}
#protNfoPanel {
    z-index: 1051!important;
}
#seqBlastP {
    z-index: 1055!important;
}
#protListDisplay {
    padding: 5px;
}
.protListBox {
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
}
.protListBox h1 {
    background: #eee;
    font-size: 1rem;
    border: none;
    margin-bottom:0;
    border-radius:0 0 0px 5px;
}
.protListBox h1 span{
	font-weight: normal;
}

.protListBox h2 {
    background: none;
    font-size: 0.9rem;
    margin-left: 20px;
    margin-bottom: 10px;
    padding:3px 10px;
    border: 1px solid #ddd;
    border-top: none;
    border-radius:0 0 5px 5px;
    color: #777;
    font-weight: normal

}
.pImgWrap {
    width:100%;
    overflow-x: auto;
    padding-bottom: 15px;
}

.pTip table {
    margin: 3px;
}
.pTip h2 {
    margin: -5px -10px 5px -10px;
}
.pTip th {
    vertical-align: top;
    text-align:right;
    padding-right: 5px;
    white-space: nowrap;
}
.pTip td {
    vertical-align: top;
}
.pTipImg {
    text-align: right;
    padding-left: 20px;
}
.pTipImg img {
    max-width: 200px;
}
.pTip .pDesc {
    white-space: normal;
    max-width: 200px;
    color: #777;
}

#nfoPop {
    max-width: 700px;
    max-height: 50vh;
    padding: 5px;
    font-size: 0.9rem;
}
#nfoPop .nfoTbl {
    width: 100%;
}
.popBubImg {
    vertical-align: top;
    text-align: right;
    padding-left: 20px;
    width: 1%;
}
#nfoPop th {
    background: linear-gradient(90deg, #fff 0%, #eee 100%);
    border-bottom: 1px solid #eee;
    text-align: right;
    vertical-align: top;
    padding: 2px 10px 2px 10px;
    white-space: nowrap;
}
#nfoPop td {
    border-bottom: 1px solid #eee;
    padding: 2px 10px 2px 10px;
    text-align: justify;
}
#nfoPop .nfoTblSp {
    font-size: 0.3rem;
}
#nfoPop .seqBlOpt {
    margin-top: 5px;
}

#nfoPop .seqBlOpt h2 {
    background: #fff;
    border:none;
    border-top: 1px solid #eee;
    border-radius: 0;
    padding-left: 0px;
    font-weight: bold;
    font-size: 1rem;
}
#nfoPop .rawSeq {
    font-family: Courier;
    font-size: 0.8rem;
    max-height: 50px;
    overflow-y: auto;
    word-break: break-all;
}

.goH th {
    background: linear-gradient(180deg, var(--sub2Grad1) 0%, var(--sub2Grad2) 100%);
}
.goM {
    background: linear-gradient(180deg, #fff 0%, #ddd 100%);;
}
.goDom {
    cursor: pointer;
    color: mediumblue;
}

#smartContent h2.sPathHd {
    background: linear-gradient(180deg, var(--sub2Grad1) 0%, var(--sub2Grad2) 100%);
}

#annoHead {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
}

#domainDesc #dNm {
    background: linear-gradient(180deg, var(--sub2Grad1) 0%, var(--sub2Grad2) 100%);
    width:75%;
    border-radius: 3px;
    text-align: left;
    padding: 0;
    border:none;
}
#domainDesc #dNm h2 {
    background: none;
    border: none;
    font-size: 1.6rem;
    font-weight: bold;
    margin: 0;
    padding-left: 30px;
    padding-bottom:5px;
}
#domainDesc #dNm div {
    padding-left: 40px;
    font-weight: normal;
    white-space: normal;
}

#domainDesc #domCnt {
    padding-left: 30px;
    border: none;
    background: linear-gradient(0deg, var(--sub2Grad1) 0%, var(--sub2Grad2) 100%);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
#domainDesc th {
    padding: 5px 10px 5px 50px;
    text-align: right;
    border-bottom: 1px solid #eee;
    border-left: 1px solid #eee;
    white-space: nowrap;
}
#domainDesc td {
    padding: 10px;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    text-align:justify;
    width: 100%;
}
.domAnnoTree {
    border-radius: 0!important;
}

td.details-control {
    background: url('/images/details_open.svg') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('/images/details_close.svg') no-repeat center center;
}

#papersT {
    td, th {
        vertical-align: middle;
    }
}

#ipathTab a {
    white-space: nowrap;
}
.iPathNfo {
    border: 1px solid #bbb;
    border-radius: 3px;
    padding: 3px 6px;
    white-space: nowrap;
}

.mRepNfo {
    color: #777;
    font-size: 0.8em;
    margin-left: 40px;
    padding: 0;
    margin-top: -10px;
}
.mRepNfo i {
    font-size: 0.7em;
    top: -1.5px;
}
.seqBlWr {
    border: 1px solid #bbb;
    border-radius: 3px;
    margin-bottom: 1rem;
    padding-bottom: 10px;
}
.seqBl {

    word-wrap: anywhere;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    padding: 10px;
    color: black;
}
.seqBl pre {
    margin:0;
}
.seqButtons {
    display:flex;
    justify-content: center;
}

#pTree {
    overflow-y: auto;
}