/* OVAL LAYOUT
- specifies struc of console, paramviewer, plotchooser, plotspace
- builds on top of frame.css
*/

.main {

  grid-template-columns: var(--side) var(--consw) var(--rsbw) var(--panl) var(--rsbw) 1.2fr 0.5fr 1.5fr 1.5fr 0.5fr 1.2fr var(--rsbw) var(--panr) var(--rsbw) var(--codew) var(--side);
  grid-template-rows: var(--toph) var(--infoh) var(--pant) var(--rsbh) 1.1fr 0.4fr 0.6fr 1.8fr 0.6fr 1.1fr var(--rsbh) var(--panb) var(--both);

  font-size: smaller;
  user-select: none;
  -webkit-user-select: none;


}

.console {
  grid-column: 2 / 3;
  grid-row: 3 / -2;
  z-index: +1;
}

.rs1, .rs2, .rs3, .rs4 {
  grid-row: 3 / -2;
  z-index: +1;
}

.rs1 { grid-column: 3 / 4; }
.rs2 { grid-column: 5 / 6; }
.rs3 { grid-column: -6 / -5; }
.rs4 { grid-column: -4 / -3; }

.rst, .rsb {
  grid-column: 6 / -6;
  z-index: +1;
}
.rst { grid-row: 4 / 5; }
.rsb { grid-row: -4 / -3; }

.plotspace, .cogspace {
  border: solid green 1px;
  overflow-y: none;
  overflow-x: none;
  position: relative;

  /*z-index: +2;*/
  /*text-align: center;*/
}

#plotspace {
  grid-column: 4 / -4;
  grid-row: 3 / -2;
}

#cogspace {
  grid-column: 6 / -6;
  grid-row: 5 / -4;
}

#cogspace .info {
  position: absolute;
  z-index:1;
  color: var(--pstext);
}

#psl, #psr, #pst, #psb {
  overflow-y: scroll;
  overflow-x: none;
  display: inline-block;
  z-index: +1;
}


#psl {
  grid-column: 4 / 5;
  grid-row: 3 / -2;
}
#psr {
  grid-column: -5 / -4;
  grid-row: 3 / -2;
}
#pst {
  grid-column: 6 / -6;
  grid-row: 3 / 4;
}
#psb {
  grid-column: 6 / -6;
  grid-row: -3 / -2;
}

#plotspace .info {
  position: absolute;
  z-index:1;
  color: var(--pstext);
}

.modspace, .modtitle, .ovalopts, .docspace, .parspace {
  border: solid #4441 1px; /* just a guide - remove eventually */
  display: inline-block;
  z-index: +1; /*2*/
  margin: 0px;
}
.plot { z-index: +2;}

.modspace, .modtitle, .docspace, .parspace {
  padding: 10px; padding-bottom: 2px;
}

.modtitle, .ovalopts {
  overflow-y: hidden;
  text-align : center;
  height: 100%;
  width : 100%;
}

.docspace, .parspace, .codespace {
  overflow-y: scroll;

}

.modspace {
  grid-column: 7 / -7;
  grid-row: 6 / -5;
  position : relative;
  pointer-events: none;
}

.modtitle {
padding-top: 5%;
padding-bottom: 0px;
  vertical-align: bottom;
  grid-column: 8 / -8;
  grid-row: 7 / 7;
  font-size:larger
}

.ovalopts {
  grid-column: 8 / -8;
  grid-row: 9 / 10;
  padding: 2px; padding-bottom: 10px;
  position: relative;
  top: -12px;
  /* not clear why have to move it up (those unicodes extra-tall?) but it helps*/
}

.ovalopt {
  font-size: medium;
  color: darkred;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.parspace {
  grid-column: 7 / 9;
  grid-row: 8 / 9;
  text-align : right;
  margin-left: 25%;

}
.slider, .sliderlabel, .ticklab {
  display: block;
  float: right;
  margin: 0px;
  /*width: 100%; - this is what caused ticks to be left !*/
  /*width: 160px;
  text-align : right;
  display : inline;*/
}

.docspace {
  grid-column: 9 / 11;
  grid-row: 8 / 9;
}

.params {
  display: none;
}

.codespace {
  grid-column: -3 / -2;
  grid-row: 3 / -2;
  z-index: +1;
  display: none;
}

.plotchooser {
  /*
  grid-column: -3 / -2;
  grid-row: 3 / 8;
  overflow-y: scroll; */
  display: none;
}


/*
.modblob, .modblobclicked {
  position : absolute;
  border-radius: 12px;
  text-align: center;
  font-family: Papyrus;
  opacity: 0.8;
}

.modblob {
  padding: 2px;
  box-shadow: 0 5px 8px 0 #000c;
  border: 1px outset blue ;
}

.modblob:hover {
  padding: 8px;
  box-shadow: 0 5px 8px 0 #fff9;
}

.modblobclicked {
  padding: 8px;
  box-shadow: 0 5px 8px 0 #ff0d;
  border: 1px outset yellow ;
}

.modbut {
  margin: 2px;
  padding: 2px;
  border-radius: 8px;
  border: 1px outset yellow ;
  box-shadow: 0 2px 2px 0 #dd0c;
  font-family: Papyrus;
}
*/
/*
slider, datalist, input {
  float: right;
}

slider::after, datalist:after, input::after {
  clear: right;
}*/

/*.ticklab {
  justify-content: right;
  color: red;
  float: right;
}
datalist, input {
  float: right;
}

datalist::after, input::after {
  clear : right;
}
label, output {
  clear : right;
}*/
/* no longer needed ?
#ovalinfo, #welcinfo, #linkinfo {
  position: absolute;
  color: var(--pstext);
  background: var(--pstextb);
  z-index: 3;
}
#ovalinfo, #welcinfo {
  top: 8px;
  left : 24px;
}
#linkinfo {
  bottom: 8px;
  right : 24px;
}
*/