body{
    /* background-color: rgba(3, 56, 142, 0.128); */
    background-color: rgba(3, 56, 142, 0.048);
    margin:0px;
}

/* ---------------- cntrl E and D divs --------------- */
#dashboard{
    padding: 8px; 
    color: black; 
    background-color: white; 
    opacity: 1; 
    font-family:Verdana; 
    font-size:10pt;

    position: absolute;     
    z-index: 5000; 
    overflow: scroll;
    display: none;    
    left: 10vw; 
    top: 10vh;     
    /* height: 80vh; 
    width: 80vw;      */
    height: 80vh; 
    width: 80%;    
    min-width: 300px;     
    min-height: 300px; 
    border-radius:6px; 
    border: 2px solid black; 

}
#dashboardTableBody, #dashboardTable{
    width: 90%;    
    height: 100%; 

}
#dashboardTable td{
    width: 390px;    
}
#dbgDiv{
    position: relative;
    top:0%;
    padding: 5px; 
    width: 95%;    
    height: 80%;    
    overflow: auto;
    color: rgb(115, 0, 0); 
    float: left;
    background-color: rgba(249, 208, 208, 0.635); 
    border-radius:6px; 
    border: 1px solid rgba(251, 126, 126, 0.635); 
    overflow: scroll;

}
.dbg{  /*---- monitoringDiv style when the page is in dbg mode-------*/
    position: relative;
    top:0%;
    padding: 5px; 
    width: 95%;    
    height: 80%;    
    overflow: auto;
    color: rgb(1, 1, 129); 
    float: right;
    background-color: rgba(219, 225, 253, 0.635); 
    border-radius:6px; 
    border: 1px solid rgba(152, 171, 254, 0.635); 
    overflow: scroll;

}
.view{ /*---- monitoringDiv style when the page is in view mode-------*/
    position: relative;
    top:1%;
    padding: 5px; 
    width: 95%;    
    height: 80%;    
    overflow: auto;
    color: rgb(1, 1, 129); 
    float: right;
    background-color: rgba(219, 225, 253, 0.635); 
    border-radius:6px; 
    border: 1px solid rgba(152, 171, 254, 0.635); 
    overflow: scroll;

}
#expand_dbgDiv, #expand_monitoringDiv {
    font-weight: bold;
    font-size: 8pt;
    float: right;
    cursor:pointer;
    border: 3px solid ; 
    border-radius: 100%; 
    padding: 0px 2px 1px 2px;
}

/* ---------------------- header style ------------------------- */
#mainPaneTable{
    width:1700px;
    height:100%; 
    /* border-collapse: collapse; */
    table-layout: fixed;
}

#headerRow{
    /* background-color: #7394c8; */
    padding: 10px;
}

#headerBGdiv{
    position: absolute;
    background-color: #7394c8;
    width: 100%;
    height: 90px;
    z-index: -500;
    top: 0;
    left: 0;
    border-bottom: 6px solid #0e4e97;
}

#chromoAnchorCell{
    width:30%;
    /* min-width:60%; */
    white-space: nowrap;
    text-align: left;
}
#chromoAnchorCell2{
    width:22%;
    white-space: nowrap;
    text-align: left;
}
#appLogo{
    /* width: 4%; */
    width: 65px;
    /* vertical-align: bottom; */
    margin:5px 15px 0px 5px ;
    background-color: #ecf2fb;
    border-radius:6px; 
    border: 2px solid #ecf2fb; 
}

#helpAnchorDiv{
    position: absolute;
    top: 35px;
    right:6px;
}
#questionImg{
    width: 35px;
}
#chromoAnchor{
    text-decoration: none;
}
.titleFont{
    /* color:#ab0f33; */
    /* color:#f4f8ff; */
    color:#fff;
    font-size:40px;
    font-family:Verdana;
    font-weight: bold;
    vertical-align: 50%;
    /* text-shadow: 2px 0 #ab0f33, -2px 0 #ab0f33, 0 2px #ab0f33, 0 -2px #ab0f33, 1px 1px #ab0f33, -1px -1px #ab0f33, 1px -1px #ab0f33, -1px 1px #ab0f33; */
    /*text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff; */
}
.titleFont:hover{
    color:#f4f8ff;
    font-size:40.5px;
}
.titleApex{
    color:#fff;
    vertical-align: 210%;
    font-family:Verdana;
    font-weight: bold;
    font-size:16px;
}

.headerAnchor{
    border-width:0;
    border-radius:8px;
    background-color:transparent;
    font-size:13pt; 
    font-family:Verdana; 
	/* color: #b92648; */
	color: #fff;
    font-style:italic;
    font-weight: 700;
    cursor:pointer;    
    vertical-align: 60%;
    /* text-shadow: 2px 0 #ecf2fb, -2px 0 #ecf2fb, 0 2px #ecf2fb, 0 -2px #ecf2fb, 1px 1px #ecf2fb, -1px -1px #ecf2fb, 1px -1px #ecf2fb, -1px 1px #ecf2fb; */

}
.headerAnchor:hover{
    font-size:12.5pt; 
	color: #f16586;
    background-color: rgba(255, 255, 255, 0.526);
}
.headerLabel{
    border-width:0;
    border-radius:8px;
    background-color:transparent;
    font-size:13pt; 
    font-family:Verdana; 
    font-weight:700;
	/* color: #f3c9d3; */
	color: #fff;
    font-style:italic;
    /* font-weight:bold; */
    cursor:default;    
    vertical-align: 60%;
    /* text-shadow: 2px 0 #b92648, -2px 0 #b92648, 0 2px #b92648, 0 -2px #b92648, 1px 1px #b92648, -1px -1px #b92648, 1px -1px #b92648, -1px 1px #b92648; */

}
#headerTable{
    width:100%;
    min-width: 800px;
}
#headerTable td{
    background-color: transparent;
}
#infoHeaderTable{
    /* float: right; */
    /* vertical-align: bottom; */
    /* margin-top: 1%; */
    font-family: Verdana;
	font-size: 14px;
    min-width: 600px;

}
#infoHeaderTable th{
    background-color: rgba(255, 255, 255, 0.629);

}
#infoHeaderTable td{
    background-color: rgba(255, 255, 255, 0.629);
	text-align: left;
}

.showListCell{
    vertical-align: bottom;
}
.showListBtn{
    position:relative;
    border-radius:8px;
    border-color: #F37E31;
    background-color: rgba(39, 110, 209, 0.218);
    padding:5px;
    font-size:12pt; 
    font-family:Verdana; 
    color:#69061d;
    font-style:italic;
    cursor:pointer;
    float: right;
    text-decoration: none;
    margin:50px 10px 10px 0px;
    vertical-align: bottom;

}
.animationCell{
    width: 40px;
}
/* #runTableHeaderCell{
    background-color:red;
    margin-right:100px;
} */
#runningSeqsDiv{
    width:  30px;
    height: 30px;
    padding:5px;
    border: 0px solid transparent;
    border-radius: 12px;
    background-color: #ffc800;
    position: relative;
    overflow: hidden;
    display: flex;              
    justify-content: center;    
    align-items: center;    
    margin-left: 15px;
    margin-bottom: 2px;
    visibility: hidden;
}
#toimportSeqsDiv{
    width:  30px;
    height: 30px;
    padding:5px;
    border: 0px solid transparent;
    border-radius: 12px;
    /* background-color: #0999b6; */
    background-color: #ff9500;
    position: relative;
    overflow: hidden;
    display: flex;              
    justify-content: center;    
    align-items: center;    
    margin-left: 15px;
    margin-bottom: 2px;
    visibility: hidden;
}
#importedSeqsDiv{
    width:  30px;
    height: 30px;
    padding:5px;
    border: 0px solid transparent;
    border-radius: 12px;
    background-color: #06985b;
    position: relative;
    overflow: hidden;
    display: flex;              
    justify-content: center;    
    align-items: center;    
    margin-left: 15px;
    margin-bottom: 2px;
    visibility: hidden;
}
#waitingSeqsDiv{
    width:  30px;
    height: 30px;
    padding:5px;
    border: 0px solid transparent;
    border-radius: 12px;
    background-color: #9e9e9e;
    position: relative;
    overflow: hidden;
    display: flex;              
    justify-content: center;    
    align-items: center;    
    margin-left: 15px;
    margin-bottom: 2px;
    visibility: hidden;
}
 #lottieRunningDiv,#lottieToimportDiv,#lottieImportedDiv,#lottieWaitingDiv {
    position: absolute;
    width: 125%;
    height: 125%;
    /* z-index: 0; */
  }
  #lottieLoadingDiv svg ,#lottieToimportDiv svg,#lottieImportedDiv svg ,#lottieWaitingDiv svg{
    width: 100%;
    height: 100%;
    object-fit: cover; /* fa comportare l’animazione come uno sfondo */
  }
  .overlay-text {
    position: relative;
    z-index: 1;
    text-align: center;
    font-family:Verdana; 
    font-weight: 800;
    font-size: 16px;
    color: #fff;
    /* margin-bottom: 22px; */
  }
#importSeqsDiv{
    background-color: #0ba842;
    width:  55px;
    padding: 10px;
    display: flex;              
    justify-content: center;    
    align-items: center;        
    border: 0px solid transparent;
    border-radius: 10px;
}
#importSeqsDiv:hover{
    background-color: #72c58f;
}
#importSeqsAnchor{
    text-decoration: none;
    font-family:Verdana; 
    font-weight: 600;
    font-size: 15px;
    color: #fff;
}
#importSeqsAnchor:hover{
    color: #0c4e23;
}
/*----------------------- footer style ------------------------------ */
#footerBGdiv{
    position: fixed;
    background-color: #7394c8;
    width: 100%;
    height: 60px;
    z-index: 2;
    bottom: 0;
    left: 0;
    margin-top: 50px;
}
#mainPaneFooterTable{
    width: 100%;
    min-width: 1200px;
    padding: 10px 0px 0px 10px;
}
#mainPaneFooterTable td{
    min-width: 500px;
}
#footer_appLogo{
    width: 35px;
    /* vertical-align: top; */
    margin:0px 15px 0px 5px ;
    background-color: #ecf2fb;
    border-radius:6px; 
    border: 2px solid #ecf2fb; 
}
.footer_titleFont{
    color:#fff;
    font-size:16px;
    font-family:Verdana;
    vertical-align: 80%;
}

/* ---------------------- result pane style ------------------------- */
#chromoResultPane tbody{
    /* width: 100%;    
    min-width: 1000px;      */
    vertical-align: top;
}

#tabBtnsTable{
    border-collapse: collapse;
    padding:0px;
    min-width:1500px;
    width:100%;
}
#tabBtnsTable td, #tabBtnsTable th{
    border: 0;
    padding:0px;
    margin: 0;
}
.tabBtnHiglited{
    align-items:center;
    /* float:left;  */
    cursor:pointer;
    border-style:solid; 
	color: #03388ef9;
    font-family:Verdana; 
    /* font-size:13pt;  */
    font-weight:bold; 
    display:block;
    text-decoration: none;
    white-space: nowrap;
    height:32px;       
     /* min-width:120px;     */
    border-color:#03388ef9 #03388ef9 #03388e2f #03388ef9;
    background-color: #03388e2f;
    border-width:2.5px 2.5px 2.5px 2.5px ; 
    border-top-left-radius:8px;
    border-top-right-radius:8px;
    border-bottom-left-radius:0px;
    border-bottom-right-radius:0px;
    padding:4px;
}
.tabBtn{
    align-items:center;
    /* float:left;  */
    background-color:#E4BBC4;
	color: #aa1f3f;
    cursor:pointer;
    font-family:Verdana; 
    font-size:12pt; 
    font-weight:bold; 
    display:block;
    text-decoration: none;
    height:32px;    
    /* min-width:100px;     */
    /* min-width:120px;     */
    white-space: nowrap;
    border-style:solid; 
    border-color:#aa1f3f #aa1f3f #03388ef9 #aa1f3f;
    border-width:2.5px 2.5px 2.5px 2.5px ; 
    border-top-left-radius:8px;
    border-top-right-radius:8px;
    border-bottom-left-radius:0px;
    border-bottom-right-radius:0px;
    /* border-top-color: #aa1f3f;
    border-left-color: #aa1f3f;
    border-right-color: #aa1f3f;
    border-bottom-color: rgba(3, 56, 142, 0.978); */
    padding:4px;

}
.tabBtnImg{
    vertical-align: -40%;
}
.dialogMenuImg{
    width: 45%;
}
.closeTabBtn{
    align-items:center;
    /* float:left;  */
    background-color:#E4BBC4;
	color: #aa1f3f;
    cursor:pointer;
    font-family:Verdana; 
    font-size:12pt; 
    font-weight:bold; 
    display:block;
    text-decoration: none;
    height:42px;    
    white-space: nowrap;
    border-style:solid; 
    border-color:#aa1f3f #aa1f3f rgba(3, 56, 142, 0.978) #aa1f3f;
    border-width:2.5px 2.5px 2.5px 2.5px ; 
    border-top-left-radius:8px;
    border-top-right-radius:8px;
    border-bottom-left-radius:0px;
    border-bottom-right-radius:0px;
    padding:0px;
}
.tabBtn:hover, .closeTabBtn:hover{
    background-color:#EFD6DC;
	color: #d13d5f;
}
.extraTabBtn{
    width: 100%;
    align-items:center;
    /* float:left;  */
    background-color:transparent;
	color: #aa1f3f;
    cursor:pointer;
    font-family:Verdana; 
    font-size:12pt; 
    font-weight:bold; 
    display:block;
    text-decoration: none;
    height:42px;    
    padding:0px;
    white-space: nowrap;
    border-style:solid; 
    border-color:#aa1f3f #aa1f3f rgba(3, 56, 142, 0.978) #aa1f3f;
    border-width:0px 0px 2.5px 0px ; 
    border-top-left-radius:8px;
    border-top-right-radius:8px;
    border-bottom-left-radius:0px;
    border-bottom-right-radius:0px;
}
#outputDiv{
    background-color:#03388e2f;
    border:0px solid transparent;
    border-radius: 0px 0px 5px 5px;
    border-width: 0px 2.5px 2.5px 2.5px ;
    border-color:#03388ef9;
    min-height: 500px;
    min-width: 800px;
    text-align: center;

    /* display: grid;
    place-items: center;  */
}
#plotErrorDiv{
    background-color:#fff;
    border:0px solid transparent;
    border-radius: 6px;
    border-width: 3px ;
    border-color:#03388ef9;
    min-height: 500px;
    min-width: 800px;
    text-align: center;
  
}
.outTableIcon{
    width:40px;
    height:33px;
    margin-right: 40%;
}

.xValueLabel{
    border-radius:8px;
    font-size:10pt; 
    font-family:Verdana; 
	/* color: rgba(3, 56, 142, 0.978); */
    color: #8e1313;
    font-style:italic;
    /* float: right; */

}
#xValue,#plotType{
    border-radius:8px;
    font-size:8pt; 
    font-family:Verdana; 
    background-color:rgba(243, 221, 219, 0.656);   
	/* color: rgba(3, 56, 142, 0.978); */
    color: #8e1313;
    /* float: right;
    vertical-align:baseline; */

}
#closeDiv{
    font-family:Verdana; 
    cursor:pointer;
    display: none;
    background-color: rgb(255, 255, 255); 
	/* background-color:rgba(1, 238, 255, 0.711); */
    text-align: right;
    z-index: 8000;
    float: right;
    width:3%;

}
#anotherWin{
    text-align: right;
    float: right;
    display: block;
    z-index: 8000;
    cursor:pointer;
    width:3%;
}
#plotContainerDiv{
    background-color: white;
    position: absolute;     
    z-index: 1; 
    /* overflow: scroll; */
    display: none;    
    left: 30vw; 
    top: 40vh;     
    /* height: 80vh; 
    width: 80vw;      */
    /* height: 80vh; 
    width: 80%;    
    min-width: 300px;     
    min-height: 300px;  */
    border-radius:6px; 
    border: 2px solid black; 
}
#chromoDialogDiv{
    display:none; position:absolute; z-index:1; top:220px; left:200px;   
}
#closeDialogDiv{
    display:none; cursor:pointer;left:425px;top:5px;  font-family: Arial;font-size: 22px; color:#fff; position:absolute
}
#dialogIconDiv{
    display:none; position:absolute; z-index:1; top:125px; left:42px; width:20px; cursor:pointer;
}
#infoIconDiv{
    display:none; position:absolute; z-index:1; top:125px; left:15px; width:20px; cursor:pointer;
}
#plotInfoDiv{
    display:none; 
    background-color: #7394c8df;
    padding: 20px;
    border: 3px solid #ffffff;
    border-radius:6px;
    font-family:Verdana; 
    /* margin-top: 30px; */
    min-width:380px;
    max-width:380px;
    width:400px;
    vertical-align: top;
    color:#fff;
}
.infoIcon{ width:100%;}
.showBtn{
    border-width:0;
    border-radius:8px;
    background-color:transparent;
    font-size:13pt; 
    font-family:Verdana; 
	color: #aa1f3f;
    font-style:italic;
    cursor:pointer;
    text-decoration: underline; 
}
.showBtn:hover{
	color: #e92f5a;
    /* font-size:13.5pt;  */
}

.expTitle{
font-weight:bold; 
color:#aa1f3f; 
font-size: 21px;
font-family:Verdana;    
}
.chromoPlotPane,.plotDiv js-plotly-plot,.user-select-none svg-container{
    width:100%;
    height:100%;
    /* position:relative; */
}

#experimentsTable td{
    padding: 1px 15px;
    white-space: nowrap; /* Prevents text from wrapping inside the cell */
    overflow: hidden; /* Prevents overflow of content */
    max-width: 290px; /* Set a fixed width for the cells */
    max-height: 60px; /* Set a fixed width for the cells */
    table-layout: fixed;   
}

#experimentsTable td.highlighted , .infoTable td.highlighted {
    text-align: left;
}


/* ------------------------------ TABLES -------------------------------------- */
caption {
	height: 35px;
	border: solid 1px;
	background-color: #aa1f3f4d;
    text-align: center;
	align-items: center;
	line-height: 35px;
  
	font-family: Verdana;
	font-weight: bold;
	font-size: 20;
	color: #aa1f3f;
    border-radius:6px; 
    border-color:#aa1f3f; 
}
.rowCellAnchor{
	font-family: Verdana; 
	color: rgba(3, 56, 142, 0.978);
    font-style:italic;
}
.outTable { 
	width:100%;
	min-width: 500px;
    padding:5px 0px 5px 15px ;
}
.outTable th,.outTable td, .infoTable th, .infoTable td{
	width: 5%;
	height: 25px;
	font-family: Verdana; 
	font-size: 16px;
	background-color: rgba(255, 255, 255, 0.587);
    border-radius:5px; 
	text-align: right;
}
.outTable th, .infoTable th{
    background-color: rgba(39, 110, 209, 0.183);
	font-weight: bold;
    border-radius:6px; 
	text-align: center;
    color:#000;
}
.outTable th{
    /* color:red; */
    cursor: url(../img/pointer-plot.png) 16 30, auto;
}
/* --------------------------------- FORM PANE --------------------------------- */

.chromoFormPane{
    background-color: #d0def5;
    margin:20px;
    /* margin:20px 0px 20px 1%; */

    padding:20px;
    border-radius:12px; 
    border: 3px solid transparent; 
    min-width: 1300px;
    max-width: 1300px;
}

#chromoFormTableMain,#importFormTable{
    width: 100%;
}
.formTitleLabelMain{
    color: #aa1f3f;
	font-family: Verdana; 
	font-size: 36px;
    font-weight: bold;
}

.formTitleLabel{
    color: #aa1f3f;
	font-family: Verdana; 
	font-size: 20px;
    font-weight: bold;
}
.formLabel{
	color: #aa1f3f;
	font-family: Verdana; 
	font-size: 17px;
}
.formSubLabel{
	color: #aa1f3f;
	font-family: Verdana; 
	font-size: 14px;  
    font-style: italic;  
}
.formInputField{
	color: #063786f9;
	font-family: Verdana; 
	font-size: 16px;
    border-radius:6px; 
    width: 300px;
    border: 3px solid rgba(39, 110, 209, 0.575); 
    overflow-x: auto; /* Abilita lo scorrimento orizzontale */
    white-space: nowrap; /* Impedisci la rottura delle righe */
    max-height: 25px;
    min-height: 25px;
  
}
.formInputDateField{
	color: #063786f9;
	font-family: Verdana; 
	font-size: 15px;
    border-radius:6px; 
    border: 3px solid rgba(39, 110, 209, 0.575); 
    max-height: 25px;
    min-height: 25px;
}
.runInfoPM{
    color: #063786f9;
	font-family: Verdana; 
    border-radius:6px; 
    border: 3px solid rgba(39, 110, 209, 0.575); 
    font-size: 16px;
    height: 30px;
    padding:10px;
}
.expsFormInputField1{
	color: rgba(6, 55, 134, 0.978);
	font-family: Verdana; 
	font-size: 16px;
    border-radius:6px; 
    border: 3px solid #276ed193; 
    width: 200px;
    max-height: 25px;
    min-height: 25px;
    overflow-x: auto; /* Abilita lo scorrimento orizzontale */
    white-space: nowrap; /* Impedisci la rottura delle righe */

}
.expsFormInputField2{
    color: rgba(6, 55, 134, 0.978);
	font-family: Verdana; 
	font-size: 16px;
    border-radius:6px; 
    border: 3px solid rgba(39, 110, 209, 0.575); 
    width: 100%;
    max-height: 25px;
    min-height: 25px;
    overflow-x: auto; /* Abilita lo scorrimento orizzontale */
    white-space: nowrap; /* Impedisci la rottura delle righe */
}

.expsFormInputField{
	color: rgba(6, 55, 134, 0.978);
	font-family: Verdana; 
	font-size: 16px;
    border-radius:6px; 
    border: 3px solid rgba(39, 110, 209, 0.575); 
    width: 300px;
    max-height: 25px;
    min-height: 25px;
    overflow-x: auto; /* Abilita lo scorrimento orizzontale */
    white-space: nowrap; /* Impedisci la rottura delle righe */
}

#addexpBtn, #uploadBtn{
    font-family: Verdana; 
	font-size: 18px;
    color: #063786f9;
    font-style: italic;
    border: 3px solid #831931; 
    border-radius:6px; 
    /* background-color: rgba(3, 56, 142, 0.048); */
    background-color: #fff;
    cursor:pointer;
}
#addexpBtn:hover, #uploadBtn:hover{
    /* color:#831931; */
    color:#fff;
    background-color: #95b5e9ce;
    border: 3px solid #316dcfce; 
}
#rmufBtn{
    font-family: Verdana; 
	font-size: 14px;
    font-weight: 100;
    color:#831931;
    background-color: #dbe5f4ce;
    border: 0px solid #aec4e7ce; 
    border-radius:6px; 
}
#rmufBtn:hover{
    background-color: #fff;
}
#filetoupload{
    color: #aa1f3f;
	font-family: Verdana; 
	font-size: 14px;
    cursor:pointer;
}
#filetoupload::file-selector-button{
    cursor:pointer;
    color: #063786f9;

}
#importBtn, #loadSampleBtn{
    font-family: Verdana; 
	font-size: 22px;
    color: #fff;
    font-style: italic;
    border: 4px solid #fff; 
    border-radius:6px; 
    /* background-color: rgba(3, 56, 142, 0.048); */
    background-color: #be3a59;
    cursor:pointer;
    padding:10px 30px;
    height: 70px;
}
#importBtn:hover, #loadSampleBtn:hover{
    /* color:#831931; */
    color:#fff;
    background-color: #95b5e9ce;
    border: 4px solid #316dcfce; 

}
.importBtn_fromList{
    font-family: Verdana; 
	font-size: 18px;
    color: #fff;
    font-style: italic;
    border: 3px solid #831931; 
    border-radius:6px; 
    /* background-color: rgba(3, 56, 142, 0.048); */
    background-color: #3a78be;
    cursor:pointer;
    padding:5px;
    /* height: 30px;  */
    text-decoration: none;
    margin-right: 10px;
}
.importBtn_fromList:hover{
    color:#831931;
    background-color: #95b5e9ce;

}
#goBtn{
    font-family: Verdana; 
	font-size: 18px;
    font-weight: bold;
    /* color: rgba(6, 55, 134, 0.978); */
    color:#831931;
    font-style: italic;
    border: 3px solid #831931; 
    border-radius:6px; 
    /* background-color: rgba(3, 56, 142, 0.048); */
    background-color: #fff;
    cursor:pointer;
    padding: 5px 10px 5px 10px ;
    margin:  0px 10px 10px 0px ;
}
#goBtn:hover{
    color:#fff;
    border: 3px solid #fff; 
    background-color: #db0c3c;
}
#goBtn2{
    font-family: Verdana; 
	font-size: 32px;
    font-weight: bold;
    color:#fff;
    background-color: #c12a4dc7;
    font-style: italic;
    border: 4px solid #901b36; 
    border-radius:6px; 
    cursor:pointer;
    padding: 8px 12px 8px 12px ;
    vertical-align: 80%;
}
#goBtn2:hover{
    color:#831931;
    background-color: #fff;
}

.uploadField{
    color: #063786f9;
}
#baseFormTable{
    width: 75%;
    /* background-color: #677da476; */
    background-color: #a2bdec76;
    border: 3px solid transparent; 
    border-radius:6px; 
}
#expsFormTableDiv,#RunInfoFormTableDiv{
    /* background-color: #677da476; */
    background-color: #9aadcd76;
    border: 3px solid transparent; 
    border-radius:6px; 

}
#RunInfoFormTable td {
    max-width: 380px;
    padding: 5px;
}
#expsFormTable td {
    padding-left: 5px;

}

#mainImg{
    width:40%;
    float: left; 
    padding:0px 30px 5px 0px;
}
.descriptionCell{
    text-align: justify;
    padding: 20px 50px;
    background-color: #ffffffe1;
    border: 3px solid transparent; 
    border-radius:6px; 
    line-height: 1.6;
}
.descriptionFont{
    color: #a32542;
	font-family: Verdana; 
	font-size: 20px;    
    margin: 0px 0px 0px 10px;
}

.startTitleCell{
    text-align: justify;
    padding: 5px 0px 10px 5px;
}
#plotAnchorsTable{
    width: 100%;
    margin-top: 10px;
}
.plotAnchor{
    text-decoration: none;
    font-weight: 600;
    font-style: italic;
    font-size: 14px;
    color: #063786f9;
    font-family: Verdana, Geneva, Tahoma, sans-serif;

    border: 2.5px solid #0846abf9; 
    border-radius:6px; 
    padding: 5px;
}
.plotAnchor:hover{
    color: #5b94e3;
    background-color: #fff;
}
/*----------------------------- error style ------------------------------*/
#coverDiv{
    opacity:0.9;
    background-color:#3F3F3F;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:1000;
    display:block
}
#closeCoverDiv{
    color: #a32542;
    /* background-color: #a32542; */
    float: right;
    width: 3%;
    cursor:pointer
}
#closeCoverDiv:hover{
    width: 3.5%;
}
#errorDiv{
    background-color: #f3edefeb;
    /* background-color: #e1e8f4; */
    padding:30px;
    /* border: 5px solid #316dcfce;  */
    border: 8px solid #f9b803; 
    border-radius:6px; 
    width: 800px;
    height: 200px;
    margin-left: 20%;
    margin-top: 15%;

    /* display: grid;               
    place-items: center;   */
    box-shadow: 10px 4px 20px  #5a5a5a;

    position:fixed;
    
}
.errorAnchor{
    text-decoration: none;
    font-weight: bold;
    font-style: italic;
    font-size: 20px;
    color: #aa1f3f;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    border: 3px solid #aa1f3f; 
    border-radius:6px; 
    padding:5px;
}
.errorAnchor:hover{
    color: #5b94e3;
    background-color: #ffffff63;
}
.errorDivFont{
    color: #10479ff1;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 23px;
    font-weight: 600;

}

/* --------------------------------- CMS PANELS --------------------------------- */
.emptyPanel{
    min-width: 300px;
    max-width: 300px;
    width: 300px;
    min-height: 150px;
    color:transparent;
    /* background-color: #06985b; */
}
.mainPanel_title, .homePanel_title{
    color: #aa1f3f;
	font-family: Verdana; 
	font-size: 36px;
    font-weight: bold;
}
.cntPanel_title,.dwnldPanel_title,.dynamicBox_title{
    color: #193788;
	font-family: Verdana; 
	font-size: 30px;
    font-weight: bold;
}
.dwnldPanel_a_title,#dwnldPanel a{
    color: #2086c1;
	font-family: Verdana; 
	font-size: 22px;
    text-decoration: none;
    font-style: italic;
}
#dwnldPanel a:hover{
    color: #aa1f3f;
	/* font-size: 23px; */
}
.cntPanel_textBox,.dynamicBox_textBox{
    color: #063786f9;
	font-family: Verdana; 
	font-size: 20px;    
    line-height: 1.6;
}
.dynamicBox_textBox_sub{
    color: #063786f9;
	font-family: Verdana; 
	font-size: 16px;    
    line-height: 1.6;
}
.mainPanel_img{
    width: 100%;
}
.homePanel_img{
    width: 100%;
}
.cntPanel_img{
    width: 50%;
}
.cntPanel_img:hover{
    width: 51%;
}
.homePanel{
    width: 50%;
    padding:0px 30px 0px 30px;
    align-content: center;
    text-align: justify;
    text-justify: inter-word;

}
.cntPanel, .dwnldPanel,.dwnldPanel_a{
    padding:0px 30px 0px 30px;
    align-content: center;
    text-align: justify;
    text-justify: inter-word;
    overflow: hidden;

}
.xPanel{
    padding:0px 30px 10px 30px;
    align-content: center;
    text-align: justify;
    text-justify: inter-word;
    width: 50%;
}
.subCntPanel{
    padding:0px 30px 0px 30px;
    align-content: center;
    text-align: justify;
    text-justify: inter-word;
    max-width: 1560px;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
   }
.subCntPanel_title{
	font-size: 20px;    
	font-family: Verdana; 
    color: #2c6dd6f9;
    font-weight: bold;
    /* margin-left: 10px; */
}
.subCntPanel_textBox{
    color: #063786f9;
	font-family: Verdana; 
	font-size: 20px;    
    line-height: 1.5;
    /* margin-left: 70px; */
    /* padding-left: 50px; */
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;

}

.homePanel_textBox{
    color: #063786f9;
	font-family: Verdana; 
	font-size: 22px;    
    line-height: 1.8;
}
.cntPanel_anchor{
    text-decoration: none;
    font-style: italic;   
    font-size:20px;
    color: #063786f9;
}
.cntPanel_anchor:hover{
    text-decoration: none;
    font-style: italic;
    /* font-size:20.1px; */
    color:#b90909;

} 
.cntPanel_anchor font, .xPanel_anchor font{
    font-size: inherit;
    color: inherit;
}  
.xPanel_anchor{
    text-decoration: none;
    /* font-style: italic;    */
    font-size:30px;
    color: #538be5f9;
	font-family: Verdana; 
    font-weight: bold;

}
.xPanel_anchor:hover{
    color:#b90909;
    font-size:30.1px;
}
.xPanel_textBox{
    color: #063786f9;
	font-family: Verdana; 
	font-size: 20px;    
    line-height: 1.5;
}
.dynamicBoxPanel{
    padding:0px 30px 0px 50px;
    align-content: center;
    text-align: justify;
    text-justify: inter-word;
}

.runningRow,.finishedRow{
    display: none;
}
.aPanel_anchor{
    background-color: #7192C8;
    color: #fff;
    text-decoration: none;
    font-size:26px;
    font-weight: 500;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
    padding: 15px;
    margin: 10px;
    border: 2px solid transparent;
    border-radius: 5px;
 }
.aPanel_anchor:hover{
    color: #b90909;

}
#runningAnimationDiv,#finishedAnimationDiv,#waitingAnimationDiv{
    width: 565px;
    height: 295px;
    /* background-color: #d99800; */
    border: 2px solid transparent;
    border-radius: 5px;
    margin-left: 150px;
}

/* -------------- help page ( + CMS)------------------- */
#helpTableMain{
    max-width: 1400px;
    min-width: 1400px;
}
.chromoDefPane{
    max-width: 1500px;
    min-width: 1500px;
    background-color: #e1e8f4;
    border: 3px solid transparent; 
    border-radius:6px; 
    margin-left: 100px;
    margin-top: 10px;
}

.helpDescriptionFont, .mainPanel_textBox{
    color: #063786f9;
	font-family: Verdana; 
	font-size: 22px;    
    line-height: 1.5;
}
.helpImg{
    width:40%;
    float: right; 
    margin: 10px;
}
.mainImg{
    width:40%;
    float: left; 
    padding:0px 30px 5px 0px;
}
.mainImg2{
    width:60%;
    /* float: right;  */
    margin: 10px;
}
.mainImg{
    width:60%;
    float: left; 
    margin: 10px;
}

.contentTable{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
}
.contentTable caption{
	height: 35px;
    text-align: center;
	align-items: center;
	line-height: 35px;

    font-family: Verdana;
	font-weight: bold;
	font-size: 20px;
	color: #f6fffc;

    background-color: #e7b80f;
	border: solid 2px;
    border-radius:6px; 
    border-color:#9f8d3bf1; 
}

.contentsTable th{
	height: 30px;
	font-weight: bold;
    border-radius:3px; 
	text-align: center;
    color:#feffff;
	border: solid 2px transparent;
    background-color: #d1ae30dd;
    padding:5px 10px;
    /* color:rgb(27, 71, 56); */
}
.contentsTable td{
	/* width: 5%; */
	/* max-width: 130px;
	min-width: 70px; */
    word-wrap: break-word;
	height: 25px;
	font-family: Verdana; 
	font-size: 16px;
    background-color: #ffffff;
    border-radius:3px; 
	text-align: right;
    /* color:rgb(34, 95, 75); */
    padding:5px 10px;
}




/*------------------------------------------ chromoDialog -----------------------------------------*/
#chromoDialog{  /*NB: not used*/
    background-color: #7394c8df;
    padding: 20px;
    border: 3px solid #ffffff;
    border-radius:6px;
    font-family:Verdana; 
    /* margin-top: 30px; */
    min-width:380px;
    max-width:380px;
    width:380px;

}

#dlg-files_chromomain, #dlg-exps_chromomain{
    border-spacing: 20px 5px; 
    
}
.chromoDialog_PM_chromoDialog,.chromoDialog_PM_chromoDlg{
    color:#3466b6;
    background-color: #f8f8f8;
    font-size: 15px;
 }
 .chromoDialog_font_chromoDialog,.chromoDialog_font_chromoDlg{
    font-weight:bold; 
    /* color:#0f5146;  */
    font-family:Verdana; 
    color:#fff; 
    font-size: 18px;
 }
.chromoDialog_label_chromoDialog{
    color:#a32542;
    font-family:Verdana; 
}
.chromoDialog_label_chromoDlg{
    color:#a32542;
    font-family:Verdana; 
    font-size: 17px;
    font-weight: 600;
}
.tableTitle{
    color:#a32542;
    font-family:Verdana; 
    font-weight: bold;
    font-size: 22px;
}
.usercodeText{
    color:#a32542;
    font-family:Verdana; 
}
.chromoDialog_submitBtn_chromoDialog,.chromoDialog_submitBtn_chromoDlg{
    color:#2b5baa;
    border-width:3px;
    background-color:#ffffff;
    border: 3px solid #a32542;
    border-radius:6px;
    font-weight:bold; 
    font-size: 17px;
    cursor:pointer;
}
.chromoDialog_submitBtn_chromoDialog:hover,.chromoDialog_submitBtn_chromoDlg:hover{
    font-size: 17.5px;
    color:#a32542;

}
#dlg-sequences_chromomain th{
    color: #a32542;
    min-width: 160px; 
    font-weight: 600;
}
#chromoDlg{
    /* background-color: #677da476; */
    background-color: #9aadcd76;
    border: 3px solid transparent; 
    border-radius:6px; 
    padding: 15px;
}

input[name="delete"] {
    font-family: Verdana;
    font-size: 14px;
    font-weight: 100;
    color: #831931;
    background-color: #dbe5f4ef;
    border: 0px solid #aec4e7ce;
    border-radius: 6px;
}
input[name="delete"]:hover {
    background-color: #fff;
    font-size: 14.1px;
}
input[name="go"] {
    font-family: Verdana;
    font-size: 32px;
    font-weight: bold;
    color: #fff;
    background-color: #c12a4dc7;
    font-style: italic;
    border: 4px solid #901b36;
    border-radius: 6px;
    cursor: pointer;
    padding: 8px 12px 8px 12px;
    vertical-align: 80%;
}
input[name="go"]:hover {
    color: #831931;
    font-size: 32px;
    background-color: #fff;
}
.chromoDialog_field_chromoDlg{
	color: rgba(6, 55, 134, 0.978);
	font-family: Verdana; 
	font-size: 16px;
    border-radius:6px; 
    border: 3px solid rgba(39, 110, 209, 0.575); 
    /* width: 300px; */
    max-height: 22px;
    min-height: 22px;
    overflow-x: auto; /* Abilita lo scorrimento orizzontale */
    white-space: nowrap; /* Impedisci la rottura delle righe */
}
input[type="file"]{
    color: #831931;
    font-size: 12px;
}

.sectionDiv{
    width: 100%;
    height: 20px; 
    color:#a32542;
    margin: 30px 0px 20px 0px; 
    /* border-bottom: 1px solid black; 
    text-align: center */
}
.sectionDiv span{
    font-size: 22px; 
    background-color: transparent;
    font-family:Verdana;
    margin-bottom:5px;
    font-weight: 800;
    padding: 1px 1px;
}






#tableInfoDiv{
    display:none;
    background-color: #7394c8df;
    padding: 10px;
    border: 3px solid #ffffff;
    border-radius:6px;
    font-family:Verdana; 
    font-size: 14px;
    min-width:400px;
    width:400px;
    max-width:400px;
    margin-left:3px;
    color:#fff;
}
.chromoDialogTitle_font{
    font-size: 16px;
    font-weight: bold;
}
#tableInfoIconDiv{
    z-index:100; 
    width:100%; 
    cursor:pointer;
    padding:0px;
}
#tableInfoIcon{
    width:25px; 
    margin-top:5px;
    border: 3px solid transparent; 
    border-radius:6px; 

}
#tableInfoIcon:hover,#downloadTableBtn:hover{
    background-size: 100%;
    background-color:rgba(3, 56, 142, 0.281);
}

#downloadTableBtn{
    /* float:right; */
    width:30px;
    height: 30px;
    /* margin: 0px 0px 10px 96%; */

    background-size: 95%;
    background-color: transparent;
    background-image: url("../img/download-logo-white.png");
    background-repeat: no-repeat;

    border: 3px solid transparent; 
    border-radius:6px; 
    cursor:pointer;

}
#outputDivTable{
    width: 100%;
}