/*
Program       esci-dance-r.css
Author        Gordon Moore
Date          3 September 2020
Description   CSS for esci dance-r
Licence       GNU General Public LIcence Version 3, 29 June 2007
*/

/* #region Version history

0.0.1   Initial version
0.0.2   09 Oct 2020 #2 Adjusted control panel as required
0.0.3   09 Oct 2020 #3 Speed control adjustment
0.0.9  
0.0.10  12 Oct 2020 #2 Added pop on/off and re-arranged items in panel 10
0.0.14
0.0.15  14 Oct 2020 Add test option for number of population points
0.0.17 

0.1.9

1.0.0   19 Oct 2020 Version 1

#endregion */


/*---------------------------------icons-----------------------------------------------------------*/

#popsize {
  width: 7rem;
}

.red {
  color: red;
}

.black {
  color: black;
}

.small {
  font-size: 1.3rem;
}

.small1 {
  font-size: 1.4rem;
}

.backcolour {
  border: 1px solid darkgrey;
  background-color: lemonchiffon;
  padding-left:0.2rem;
  padding-right: 0.2rem;
}

.greek2 {
  font-size: 2.2rem;
}

.icons {
  width: 2.5rem;
  height: 2.5rem;
  margin-top: 2.6rem;
}

.slidericons {
  margin-top: 2.8rem;
}

.slidericons:hover {
  background-color: lightgray;
}

.slidericons:active {
  background-color: darkgrey;
}

/*----------------------------------Override left panel--------------------------------------------*/

#header {
  border: 0px solid black;
}

#breadcrumbs {
  border: 1px solid black;
  font-size: 1.5rem;
}

#tab1text {
  border: 1px solid black;
  font-size: 1.45rem;
  padding-left: 0.5rem;;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

/*----------------------------------Panels-----------------------------------------------------*/

#panels {
  font-size: 1.5rem;
}


/*--------------Panel 1 N1-----------------------*/
#N1panel {
  border: 1px solid black;
  background-color: #FFFF99;
  padding: 0.5rem;
  display: grid;
  grid-template-columns: 1rem auto;
}

#N1sliderpanel {
  display: grid;
  grid-template-columns: 25rem 2rem 3rem 5rem;
  grid-row-gap: 3rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

#Nlabel {
  margin-left: 0.5rem;
  height: 0.1rem;
}

#N1val {
  margin-top: 2.5rem;
  height: 2rem;
  width: 4rem;
}

/*--------------Panel 2 r-----------------------*/
#rpanel {
  border: 1px solid black;
  background-color: #CCFFCC;
  padding: 0.5rem;
}

#rsliderpanel {
  display: grid;
  grid-template-columns: 25rem 2rem 3rem 5rem;
  grid-row-gap: 3rem;
  margin-top: 1rem;
}

#rholabel {
  margin-left: 1.0rem;
  height: 0.1rem;
}

#rval {
  margin-top: 2.5rem;
  height: 2rem;
  width: 4rem;
}

#calculatedrdiv {
  margin-left: 0.5rem;
  padding-left: 20.5rem;
}


/*----------------- Panel 3 Run and controls section------------------------------------------------------------------*/

#runcontrols {
  border: 1px solid black;
  background-color: white; /* aliceblue; */
  padding: 0.3rem;
  padding-bottom: 0.5rem;
  display: grid;
  grid-template-columns: 1.5rem auto;
}

#runstop {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr 3fr;
  grid-column-gap: 1rem;
  padding-top: 0.2rem;
  padding-left: 0.2rem;
}

.runbuttons {
  height: 3.5rem;
  padding: 0.1rem;
  background-color: rgb(148, 243, 148);
  border: 1px solid grey;
  border-radius: 0.7rem;
  vertical-align: middle;
}

.runbuttons:hover {
  background-color: yellow;
}

.runbuttons:active {
  background-color: orange;
  user-select: none;
}

#clear {
  background-color: lemonchiffon;
  display: flex;  /*to centre text vertically and horizontally*/
  align-items: center;
  justify-content: center;
  text-align: center;
}

#clear:hover {
  background-color: yellow;
}

#clear:active {
  background-color: orange;
  user-select: none;
}

#takesample {
  display: flex;  /*to centre text vertically and horizontally*/
  align-items: center;
  justify-content: center;
  text-align: center;
}

#runfreely {
  display: flex;  /*to centre text vertically and horizontally*/
  align-items: center;
  justify-content: center;
  text-align: center;
}

#speed {  /*reverse the slider so that min speed on left i.e. slower*/
  direction: rtl;
  appearance: none;
  background-color: blue;
  margin-top: 2rem;
  height: 0.3rem;
  width: 12rem;
  user-select: none;
  border: none;
  outline-color: transparent;
}

input[type="range"]::-webkit-slider-thumb{  /*might not work with some browsers*/
  appearance:none;  
  background-color: grey;
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 1.5rem;
}


/*------------------- Panel 4 Display features-----------------------*/
#displayfeaturespanel {
  border: 1px solid black;
  background-color: #CCFFFF;
  padding: 0.5rem;
  display: grid;
  grid-template-columns: 8rem auto;
}

#displayr {
  margin-top: 0.2rem;
}

#displayctm {
  margin-top: 0.5rem;
}

#displaymd {
  margin-top: 1.0rem;
  margin-bottom: 1.0rem;
}

/*--------------------- Panel 5 Descriptive statistics-----------------------*/
#displaystatistics1spanel {
  border: 1px solid black;
  background-color: #D2C4EE;
  padding: 0.5rem;
}

#descstatlabels {
  display: grid;
  grid-template-columns: 20.5rem 3rem 3rem;
}

#statistics1 {
  margin-top: 0.2rem;
  display: grid;
  grid-template-columns: 10rem 3rem 6rem;
  margin-bottom: 0.0rem;
  padding-left: 10rem;
}

.statslabel {
  text-align: right;
  padding-right: 3.0rem;
}

#labelx {
  margin-left: 1.5rem; 
}

#labely {
  margin-left: 3.8rem;
}

.pushright {
  text-align: right;
}

/*-------------------- Panel 6 Display lines-----------------------*/
#displaylines1panel {
  border: 1px solid black;
  background-color: papayawhip;
  padding: 0.5rem;

}

#displaylines1{
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}

#corryxvallabel {
  padding-left: 4.0rem;
}

#corrxyvallabel {
  padding-left: 4.0rem;
}

#corrlineslopevallabel {
  padding-left: 1.0rem;
}


/*----------------------------- Panel 7 dance of the p-values-----------------------------------------------*/

#rvaluesection {
  border: 1px solid black;
  background-color: #ff9999f6;
  padding: 0.5rem;
}

#showdances {
  border: 1px solid black;
}

#rvaluesoundblock {
  display: grid;
  grid-template-columns: 7rem 3rem auto;
}

#vollabel {
  padding-top: 2px;  /*weird why I need this*/
}

#volslider {
  width: 8rem;
}

#rvaluesectiondiv {
  display: grid;
  grid-template-columns: 20rem auto;
}

#hypothesismu0 {
  color: darkblue;
}

#cohensd {
  color: darkblue;
}


/*-------------------------------- Panel 8 Latest sample ------------------------------------------------------*/

#latestsamplesection {
  border: 1px solid black;
  background-color: #ffcc99;
  padding: 0.5rem;
  display: grid;
  grid-template-columns: 12rem auto;
}

.latestsampledivtip {
  margin-left: 2rem;
}


/*---------------------------------- Panel 9 CI Section------------------------------------------------------------------*/

#cipcntdiv {
  display: grid;
  grid-template-columns: 5.5rem 6rem auto;
}

#CIsection {
  border: 1px solid black;
  background-color: #b4c7e7;
  padding: 0.5rem;
}

#CIcontrol {
  display: grid;
  grid-template-columns: 6rem 9rem 15rem;
}

#CIIntervalText {
  background-color: lemonchiffon;
}

.citip {
  margin-bottom: 0.5rem;
}

#cipcntdiv {
  margin-left: 0.5rem;
  margin-bottom: 0.2rem;
}

#CIforr {
  padding-left: 3.5rem;
}

/*---------------------------------- Panel 10 Capture Section------------------------------------------------------------------*/

#capturesection {
  border: 1px solid black;
  background-color: #ccffcc;
  padding: 0.3rem;
}

#displaylinetomarkrho {
  margin-left: 1rem;
}

#rhocontrol {
  display: grid;
  grid-template-columns: 10rem auto;
}

#showcapture {
  margin-left: 2.3rem;
}

#capturetip {
  margin-bottom: 0.5rem;
}

#showrheap {
  margin-left: 3.3rem;
}

.nosamplestakentip {
  margin-top: 0.5rem;
  margin-left: 0.5rem;
  margin-bottom: 0.5rem;
}


.numberciscapturingtip {
  margin-left: 0.5rem;
  margin-bottom: 0.5rem;
}

.lowerarmtip {
  margin-left: 2.5rem;
}

.upperarmtip {
  margin-left: 2.5rem;
}

.percentCIcapturetip {
  margin-left: 0.5rem;
}

/*----------------------------------footer override---------------------------------*/

#footer {
  font-size: 1.4rem !important;
}

/*----------------------------------display-------------------------------------------------------------*/

/*----------------------------------Right panel-----------------------------------------*/
#rightpanel {
  border: 1px solid grey;
  grid-row-gap: 1rem;
  padding-top: 0.5rem;
}

#scrolldisplays {
  position: sticky; /*keeps div at top when vertical scrolling */
  top: 0;  
}


#displayS {
  border: 1px solid grey;
  background-color: white;
}

#displayD {
  border: 1px solid grey;
  background-color: white;
  margin-left: 0.1rem;
  margin-top: 0.2rem;

}