/* 
    Author     : alf
*/


body{
    font-family: 'Roboto', sans-serif!important;
}



body#formBody{    
    background: rgba(248, 248, 248, 1);
    background: -webkit-linear-gradient(rgba(248, 248, 248, 1) 0%, rgba(248, 248, 248, 1) 20%, rgba(224, 239, 249, 1) 69%, rgba(204, 219, 229, 1) 100%);
    background: -o-linear-gradient(rgba(248, 248, 248, 1) 0%, rgba(248, 248, 248, 1) 20%, rgba(224, 239, 249, 1) 69%, rgba(204, 219, 229, 1) 100%);
    background: -ms-linear-gradient(rgba(248, 248, 248, 1) 0%, rgba(248, 248, 248, 1) 20%, rgba(224, 239, 249, 1) 69%, rgba(204, 219, 229, 1) 100%);
    background: linear-gradient(rgba(248, 248, 248, 1) 0%, rgba(248, 248, 248, 1) 20%, rgba(224, 239, 249, 1) 69%, rgba(204, 219, 229, 1) 100%);
    height: 100%;
    width: 100%;
    min-height: 100vh;
}

h1.navbar-brand{
    font-family: 'Space Grotesk', sans-serif!important;
    font-size: 40px;
    font-weight: bold;
    padding-bottom: 0;
    margin-right: 1.5em;
/*    color: #ef8c55;*/

    color: rgb(40, 193, 75);
    text-shadow: 0 0 7px #fff;
    margin-bottom: 15px;    
}

.text-brand{
    color: #104356;
}

.btn{
     -webkit-box-shadow: 0 8px 12px 1px rgba(0,0,0,0.14),0 3px 20px 3px rgba(0,0,0,0.12),0 4px 5px -3px rgba(0,0,0,0.3); 
     box-shadow: 0 8px 12px 1px rgba(0,0,0,0.14),0 3px 20px 3px rgba(0,0,0,0.12),0 4px 5px -3px rgba(0,0,0,0.3); 
}

.btn:hover{
-webkit-box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.3);
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.3);        
}

.btn-main, .btn-main:active{
/*    rgb(239, 140, 85)*/
    background-color: rgb(40, 193, 75)!important;
    border-color: rgb(40, 193, 75)!important;
}

.btn-main:hover{
    background-color: rgb(68, 210, 100);
    border-color: rgb(68, 210, 100);
}

.btn-main.disabled, .btn-main:disabled{
    background-color: #6c757d!important;
    border-color: #6c757d!important;
    opacity: 0.3;
}



.btn-outline-primary {
    border-color: rgb(40, 193, 75);
    color: rgb(40, 193, 75);    
}

.btn-outline-primary:hover, .btn-outline-primary:active {
    background-color: rgb(40, 193, 75)!important;
    border-color: rgb(40, 193, 75)!important;
}

.form-check-input:checked {
    background-color: rgb(40, 193, 75);
    border-color: rgb(40, 193, 75);
}


/* CSS personalizado para igualar la altura de las columnas */
.row.equal-height {
    display: flex;
    flex-wrap: wrap;
}

.row.equal-height > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

.row.equal-height > [class*="col-"] > * {
    flex: 1;
}


.card{
    border-radius: 0;
}

.lh-16{
    line-height: 1.6em!important;
}

.w99{
    width: 99%;
}

.bl-brand{
    
    padding: 0.75rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    border: 1px solid #eee;
    border-left-color: rgb(40, 193, 75);
    border-left-width: 1px;
    border-left-width: .25rem;
    border-radius: .25rem;
}


#inputStructure.card{
    background: #ffffff99;
}

#inputStructure input.w-big{
    width: 80%;
}

#inputStructure input.w-big2{
    width: 95%;
}

#inputStructure input.w-small{
    width: 30px;
}


.job-toast{
    z-index: 11;
}

#liveToast{
    background-color: rgb(47 47 47 / 75%);
}

#liveToast .toast-body{
    color: #fff;
}

.align-form{
    position: relative;
    bottom:  -3px;
}


/*RESULTS PAGE*/


body#resultBody{
    background: rgba(248,248,248,1);
    background: -webkit-linear-gradient(rgba(248,248,248,1) 0%, rgba(248,248,248,1) 17%, rgba(224,239,249,1) 25%, rgba(181,198,208,1) 100%);
    background: -o-linear-gradient(rgba(248,248,248,1) 0%, rgba(248,248,248,1) 17%, rgba(224,239,249,1) 25%, rgba(181,198,208,1) 100%);
    background: -ms-linear-gradient(rgba(248,248,248,1) 0%, rgba(248,248,248,1) 17%, rgba(224,239,249,1) 25%, rgba(181,198,208,1) 100%);
    background: linear-gradient( rgba(248,248,248,1) 0%, rgba(248,248,248,1) 17%, rgba(224,239,249,1) 25%, rgba(181,198,208,1) 100%);

    height: 100%;
    width: 100%;
    min-height: 100vh;
}


@media (min-width: 1520px){
    body {
      max-width: 1440px!important;
    }
}


body#resultBody #infoPdb{
    padding-top: 40px;
}

#proteins{
    -webkit-box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -7px rgba(0,0,0,0.2);
    box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -7px rgba(0,0,0,0.2);    

    border: 0;
    background: transparent;
}


.title-data{
    position: relative;
    -webkit-box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.3);
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.3);          
}

.title-data p{
    position: absolute;
    top: -40px;
    width: 100%;
    font-size: 1.25rem!important;
    font-weight: 300!important;
}


.bar-toast{
    z-index: 11;
    right: 40px;
}

#liveToastA{ 
    -webkit-box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -7px rgba(0,0,0,0.2);
    box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -7px rgba(0,0,0,0.2);
}


/*JSMOL*/

#jsmol-container{

    background-color: #fff;  

    position: relative;
    -webkit-box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -7px rgba(0,0,0,0.2);
    box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -7px rgba(0,0,0,0.2);
    /* box-shadow: 0 8px 12px 1px rgba(0,0,0,0.14),0 3px 20px 3px rgba(0,0,0,0.12),0 4px 5px -3px rgba(0,0,0,0.3); */
    overflow: hidden;

}

#jsmol-container #jmolApplet0_appletdiv{
    z-index: 1!important;
/*    border: 8px solid #fff;
    -webkit-box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.3);
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.3);*/
}

#jsmol-container #jmolApplet0_appletdiv canvas{
    /*border-radius: 0.375rem;      */
}






div[id$="_glowDiv"]{
    display: none!important;
}



/*TABLAS*/


.results-block{
    font-size: 0.95em;
}
.results-block h3{font-size: 1.3em; font-weight: normal;}

.mutation-table{position:relative;overflow-y:auto;max-height:60vh;-webkit-box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.3);box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.3); background-color: #fff;margin-bottom: 2em;}
.mutation-table table{border:0!important;width:100%;color:#444;border-collapse:collapse}
.mutation-table table tr:nth-child(1) th {position: sticky;top: 0;z-index: 10;background-color: #fff;-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2); text-align: center; border: 0;}
.mutation-table table tr:nth-child(1) th:nth-child(2) {background-color: #ffc990;}
.mutation-table table tr:nth-child(1) th:nth-child(4) {background-color: #bbd5fd;}
.mutation-table table tr:nth-child(2) th{position:sticky;top:30px;z-index:10;background-color:#2f8bc6;color:#fff;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);text-align:center}
.mutation-table table tbody tr{border-bottom:1px solid #ddd}
.mutation-table table tr:nth-child(2) th{padding:12px 16px;font-weight: normal}
.mutation-table table tbody td{background-color:transparent;border:0;padding:14px 6px}
.mutation-table table tbody td{border-left:1px #ccc dashed}
.mutation-table table tbody td:first-child{border-left:0;font-weight:700;color: rgb(40, 193, 75); cursor: pointer;}
.mutation-table table tbody td:first-child:hover;{color: #ec7622;}
.mutation-table table tbody td:nth-child(2){background-color:#e8e8e8}
.mutation-table table tbody td[bgcolor~=green],
.mutation-table table tbody td[bgcolor~=orange],
.mutation-table table tbody td[bgcolor~=red],
.mutation-table table tbody td[bgcolor~=yellow]{position:relative;z-index:2;color:#777;font-weight:700}
.mutation-table table tbody td[bgcolor~=green]:before,
.mutation-table table tbody td[bgcolor~=orange]:before,
.mutation-table table tbody td[bgcolor~=red]:before,
.mutation-table table tbody td[bgcolor~=yellow]:before{content:"";position:absolute;height:24px;width:24px;z-index:-1;left:50%;top:50%;margin-top:-12px;margin-left:-12px;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2)}
.mutation-table table tbody td[bgcolor~=white]{background-color:#fff}
.mutation-table table tbody td[bgcolor~=green]:before{background-color:#d7f3c0}
.mutation-table table tbody td[bgcolor~=yellow]:before{background-color:#fafbda}
.mutation-table table tbody td[bgcolor~=red]:before{background-color:#fee6d3}
.mutation-table table tbody td[bgcolor~=orange]{color:#777}
.mutation-table table tbody td[bgcolor~=orange]:before{background-color:#ffb6b6}
.mutation-table table tr:nth-child(2) th:after{position:absolute;top:50px;padding:10px;z-index:1010;background-color:#ffdB9DFF;-webkit-box-shadow:0 8px 17px 2px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2);box-shadow:0 8px 17px 2px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2);color:#666;opacity:0;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.mutation-table table tr:nth-child(2) th:hover{cursor:pointer;z-index:1000;background-color:#327199}
.mutation-table table tr:nth-child(2) th:hover:after{min-width:250px;left:0;opacity:.9}
.mutation-table table tr:nth-child(2) th:nth-child(1):hover:after{content:"Proposed mutation, in one letter code"}
.mutation-table table tr:nth-child(2) th:nth-child(2):hover:after{content:"Estimated Positive Predictive Value"}
.mutation-table table tr:nth-child(2) th:nth-child(3):hover:after{content:"Presence of the residue in a probable interaction surface between monomers of the protein according to PISA or the supplied PDB structure"}
.mutation-table table tr:nth-child(2) th:nth-child(4):hover:after{content:"Presence of the mutated residue in the Catalytic Site Atlas. If it is present, the mutation may drastically reduce the activity of the protein."}
.mutation-table table tr:nth-child(2) th:nth-child(5):hover:after{content:"Presence of the mutated residue in a region annotated as a site in the PDB file. If it is present, the mutation may drastically reduce the activity of the protein."}
.mutation-table table tr:nth-child(2) th:nth-child(6):hover:after{content:"Module that has proposed the mutation"}
.mutation-table table tr:nth-child(2) th:nth-child(7):hover:after{content:"Prediction of the consensus sequence";left:auto;right:0}
.mutation-table table tr:nth-child(2) th:nth-child(8):hover:after{content:"Study of alpha-helix stability";left:auto;right:0}
.mutation-table table tr:nth-child(2) th:nth-child(9):hover:after{content:"Study of the exposure and polarity of the residues";left:auto;right:0}
.mutation-table table tr:nth-child(2) th:nth-child(10):hover:after{content:"Study of the volume of internal cavities in the protein";left:auto;right:0}
.mutation-table table tr:nth-child(2) th:nth-child(11):hover:after{content:"Study of the Solvent Accesible Surface Area";left:auto;right:0}
.mutation-table table tr:nth-child(2) th:last-child:hover:after {content:"Study of the electrostatic interactions of the protein";left:auto;right:0}hr {border:0;border-top:1px solid #dde5e7}
.band-line{font-size:1.2em;color:#333;border-left:3px solid #2f8bc6;padding:5px 10px;margin:0 0 0 10px}
.legend{display:table;margin-bottom:10px}
.legend:last-child{margin-right:0}
.legend .green,.legend .orange,.legend .red,.legend .yellow{text-align:center;display:table-cell;color:#777;font-weight:700;line-height:19px;margin-bottom:4px}
.legend .rect{line-height:normal;display:inline-block;height:20px;width:40px;border:1px solid #ddd}
.legend .green .rect{background-color:#d7f3c0}
.legend .yellow .rect{background-color:#fafbda}
.legend .red .rect{background-color:#fee6d3}
.legend .orange .rect{background-color:#ffb6b6}
.legend .desc{color:#888;display:table-cell;padding-left:10px;font-size:11px;vertical-align:middle;line-height:normal}
.legend .module-name{font-weight:700;border:1px solid #ddd;padding:0 3px;min-width:40px;min-height:24px;display:table-cell;text-align:center;margin-bottom:3px}
.results-block h3 strong{text-transform:uppercase;color:#2f8bc6;}