/**
* CSS version 2.0
* date of last update : 26/06 
* by: Loane PORTIER
**/

/*##############################################################################################################*/
/*############################################# General const class ############################################*/
/*##############################################################################################################*/

:root {
    --box-shadow:4px 4px 8px 2px #ABABAB;
    
    /*--NavBar--*/
    --font-size-a: 1.1em;
    --font-color-a: white;
    --font-color-a--hover: #04B2B5;

    /*--text--*/
    --font-size-text: 1.1em;
    --font-size-text-warning: 1em;
    --font-size-text-annotation:0.9em;
    --font-color-text: black;
    --font-color-text-warning: rgb(185, 0, 0);
    --font-family:"Barlow",sans-serif;
    
    /*--title--*/
    --font-size-h1: 2em;
    --font-size-h2: 1.5em;
    --font-size-h3: 1.5em;
    
    --font-color-h1: black;
    --font-color-h2: white;
    --font-color-h3: black;
    
    /*--button--*/
    --font-size-button: 1.3em;
    --font-color-button: #ffffff;    
    --background-color-1: rgb(1, 77, 79);
    --background-color-2: rgb(3, 126, 129);
    --background-color--hover: #0a57ca;

    /*--Hr--*/
    --border-color-light-hr:white;
    --border-color-dark-hr:black;
    --border-size-hr:1px;

    /*--Markdown--*/
    --font-color-A-markdown: rgb(200, 0, 100);
    --font-color-C-markdown: rgb(0, 200, 100);
    --font-color-G-markdown: rgb(240, 240, 0);
    --font-color-T-markdown: rgb(0, 100, 200);
}
/*##############################################################################################################*/
/*################################################## Balise/App style #################################################*/
/*##############################################################################################################*/


/*###################################### general #####################################*/
*{font-family: var(--font-family);}
body{background-color: #ffffffd0;}



/*###################################### titles #####################################*/
h1{
    font-size: var(--font-size-h1);
    color: var(--font-color-h1);
}

h2{
    color: var(--font-color-h2);
    font-size: var(--font-size-h2);
    font-weight: bold;
}

h3{
    font-size: var(--font-size-h3);
    color: var(--font-color-h3);
}



/*###################################### text #####################################*/
p, td, th, span, label, text:not(.annotation-text){
    font-size: var(--font-size-text) !important;
    color: var(--font-color-text) ;
}

p{margin-bottom: 0;}

text.annotation-text{
    font-size: var(--font-size-text-annotation) !important;
    font-weight: bold;
}

p.text-warning{
    font-size: var(--font-size-text-warning) !important;
    color: var(--font-color-text-warning) !important;
}



/*###################################### navbar #####################################*/
.navbar a{
    font-size: var(--font-size-a) !important;
    color: var(--font-color-a) !important;
}

.navbar a:hover{ color:var(--font-color-a--hover) !important;}

.navbar *[class*='dropdown-menu'] a:hover{ color:black !important;}
.navbar *[class*='dropdown-menu'] {background-color:var(--background-color-2);}

/*###################################### help button #####################################*/
button:not(.btn-floating){
    background-color: var(--background-color-2);
    color: var(--font-color-button);
    border: var(--background-color--hover);
    padding: 10px 26px;
    border-radius: 10px;
    font-size: var(--font-size-button);
    font-weight: bold;
    margin: 1%;
}



/*###################################### input #####################################*/
input[type="radio"],input[type="checkbox"]{
    -ms-transform: scale(0.5) !important; /* IE 9 */
    -webkit-transform: scale(0.5) !important; /* Chrome, Safari, Opera */
    transform: scale(1.5) !important;
}

.dash-dropdown{transform: scale(1.2);}



/*###################################### separation #####################################*/
hr{
    width: 80%;
    align-self: center;
    opacity: 0.4;
}

hr.light{border: var(--border-size-hr) solid var(--border-color-light-hr);}
hr.dark{border: var(--border-size-hr) solid var(--border-color-dark-hr);}



/*###################################### help button #####################################*/
button.btn-floating img{
    width: 60px;
    height: 60px;
}

button.btn-floating, button.btn-floating img{
    display: flex;
    position: fixed;
    bottom: 135px;
    right: 35px;
    width: 80px;
    height: 80px;
    margin:0;
    z-index: 1;
    overflow: hidden;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 50%;
    border: 0px;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    background: no-repeat center/75% url("images/info.png");
    background-color: transparent;
}

.float-left {float: left;}
.float-right {float: right;}
.float-none {float: none;}



/*###################################### other #####################################*/
.dash-dropdown .Select .Select-control{border: 0px}

button[id*="prev"] img{transform: scaleX(-1);}



/*################### table ##################*/
#likelihood-computation-little-tree{width: 100%; height: 300px;}



/*################### table ##################*/
table[id*="substitution-matrix-rates"] tr:nth-of-type(2) th, table[id*="substitution-matrix-rates"] tr:nth-of-type(2) td:nth-of-type(2){
    border-bottom: 1px solid black;
}

table[id*="substitution-matrix-rates"] th:not(tr:nth-of-type(2) th), table[id*="substitution-matrix-rates"] tr:nth-of-type(2) td:nth-of-type(2){
    border-right: 1px solid black;
}



/*################### Base table ##################*/
.DrawBaseTable{
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
}

.DrawBaseTable-Div{justify-content:flex-end;}
.DrawBaseTable-Div p{margin: 0 !important;}



/*################### Signle site simulation ##################*/

#single-graph-Monte-Carlo-simulation{height: 700px;}

#single-radiolist-starting-base label{
    display: flex !important;
    gap: 5px;
    width: 20%;
}



/*################### checklist explanation ##################*/
div[id*="checklist-explanation"] label{display: flex !important;}
div[id*="checklist-explanation"]{gap:1rem;}













/*##############################################################################################################*/
/*################################################## Class style #################################################*/
/*##############################################################################################################*/

/*###################################### general #####################################*/
div[id*="main"], .main{
    justify-content: space-between;
    margin: 0% 5% 1% 5%;
}



/*###################################### visibility #####################################*/
.hidden {display: none;}



/*###################################### loading style #####################################*/
.loading[data-dash-is-loading="true"] {visibility: visible;}
.loading + div[style*='visibility: visible;']{opacity: 1;}

.dash-spinner.dash-default-spinner {background-color: rgba(0, 0, 0, 0.5);}

.loading + div{
    opacity: 0;
    transition: opacity 500ms ease-in-out;
    transition-delay: 1500ms;
}



/*###################################### Selection #####################################*/
.Selected{border: 2px solid rgba(0, 0, 0, 0.8);}



/*###################################### shadow #####################################*/
*[class*="box-shadow"]{
    box-shadow: var(--box-shadow);
    border-radius: 10px;
}



/*###################################### background-color #####################################*/
*[class*="background-color-light"]{background-color: rgba(255, 255, 255);}
*[class*="background-color-1"]{background-color: var(--background-color-1);}
*[class*="background-color-2"]{background-color: var(--background-color-2);}



/*###################################### text-color #####################################*/
div[class*="markdown-color-red"] p span{color: red}
div[class*="markdown-color-green"] p span{color: green}
div[class*="markdown-color-blue"] p span{color: var(--background-color--hover)}