/*
--------------------------------------------------------------------
					(last working w/grid)		General setup
--------------------------------------------------------------------
*/

@font-face {
   font-family: estuaryFont;
   src: url(../fonts/Estuary.otf);
}

@font-face {
   font-family: estuary-icons;
   src: url(../icons/estuary-icons.otf);
}

body {
 	height: 100%;
	margin: 0;
	background: var(--background-color);
	overflow: hidden;
}

/* styles the body, input, foreground text color */
body, .primary-color {
	 color: var( --primary-color);
}

.exp-color {
	color: var( --experiment-color);
}


body::-webkit-scrollbar  {
    width: 0.5%;
    height: 0px;
}

body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px var(--primary-color);
  border-radius: 10px;
}

body::-webkit-scrollbar-thumb {
  background: var(--primary-color);
}

/*styles the canvas and svg display */
.canvas-or-svg-display {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	pointer-events: none;
}


/* for the Paragraph element in the view system, which is primarily used in tutorials for explanatory text */
.paragraph {
	padding: 0.15em;
   	overflow-y: none;
   	text-align: justify;
    width: 100%;
    margin-top: 0.5em;
}

.paragraph::-webkit-scrollbar  {
    width: 10px;
    height: 10px;
}

.paragraph::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px var(--primary-color);
  border-radius: 10px;
}

.paragraph::-webkit-scrollbar-thumb {
  background: var(--primary-color);;
  border-radius: 10px;
}

.paragraph::-webkit-scrollbar-corner{
	background-color: transparent;
}


/* for the Example element in the view system, which is primarly used in tutorials for clickable examples */
.example {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.9em;
  cursor: pointer;
	margin-top:0.5em;
	width: 100%;
	border:none;
	border-radius: 5px;
  box-shadow: 0px 0.25px 4px 0.025px grey;
  margin-bottom: 0.25em;
  word-wrap: break-word;
}

.example:hover{
	border: 1px dashed var(--primary-color);
}

.snippet {
	font-family: "Courier New", Courier, monospace;
	font-size: 0.9em;
	cursor: pointer;
	  width: 20%;
	  border:none;
	  border-radius: 5px;
	box-shadow: 0px 0.25px 4px 0.025px grey;
	margin-bottom: 0.25em;
	max-height: 10%;
	display: flex;
	/* white-space: nowrap; */
  	overflow: hidden;
  	text-overflow: ellipsis;
  }

  .snippet:hover{
	box-shadow: 0px 0.25px 4px 0.025px var(--secondary-color);
  }


/* modifies the help view (source)*/
.languageHelpContainer{
	display: flex;
	height: 100%;
	width: 100%;
	box-sizing: border-box;

}

.languageHelp {
  height:100%;
}

.languageHelp::-webkit-scrollbar  {
    width: 10px;
    height: 0px;
}

.languageHelp::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px var(--primary-color);
  border-radius: 10px;
}

.languageHelp::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 10px;

}

.languageHelp::-webkit-scrollbar-corner{
	background-color: transparent;
}

/* source  */
.estuary { /* the entire interface, contains .header .page and .footer */
  height: 100vh;
  display: flex;
  flex-direction:column;
}

.header {
/* With "flex: none" the grow and shrink options are off. It is a fixed element
  whose width and height is based off the content size */
  flex: none;
  display: flex;
  padding-left: 10px;
  overflow: hidden;
  white-space: nowrap;
  border: none;
  height: 30px;
}

.page {
/* 	flex-grow:1; */
/* 	flex-shrink:0; */
	flex: 1 1 auto;
	position: relative; /* note that relative positioning with 0x0 is required here for SVG fdisplay */
	left: 0px;
	top: 0px;
	padding-left: 15px;
	padding-right: 15px;
	overflow:hidden;
	overflow-y: auto;
  display: inline-flex;
}

.page::-webkit-scrollbar  {
    width: 10px;
    height: 10px;
}

.page::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px var(--primary-color);
  border-radius: 10px;
}

.page::-webkit-scrollbar-thumb {
  background: var(--primary-color);;
  border-radius: 10px;
}

.page::-webkit-scrollbar-corner{
	background-color: transparent;
}

.footer{
	flex:none;
	display:flex;
	border: none;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 15px;
	padding-right: 15px;
  justify-content: space-between;
  height: 18px;

}

.btn {
	cursor: pointer;
}

/* source  */
.peak{
  flex:none;
  border:none;
}

/* source  */
.server {
  position: relative;
  top: 1.25em;
  left: 2em;
  margin-left: 0.5em;
  padding-left: 0.5em;
  margin-bottom: 0.6em;
}

/*
--------------------------------------------------------------------
							CONFIGURATION
--------------------------------------------------------------------
*/

.config-toolbar {
  padding-right: 1em;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  right: 0;
}

.config-entry {
	padding: 0.25em 0.5em;
	display: inline-block;

}

.config-entry:last-child {
	border-right: none;
}


.ourPopUp {
	display:inline-block;
	background-color: rgb(98, 221, 115);
	color: black;
	width: 50%;
	height: 1000px;
	z-index: 0;
	position: fixed;
	top: 10em;
	}


.splash-container { /*contains the four buttons in the home page  (source) */
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: 100%;
	align-items: center;
	overflow:hidden;
 }

.splash-margin {/*sets the padding between the home-page buttons (source)*/
  flex-grow: 1;
  width: 50%;
  height: 50%;
	box-sizing: border-box;
	padding: 0.5em;
  display: flex;
  }

.splash-panel {/*contains the tutorial, solo and collaboration buttons (source)*/
	font-family: estuaryFont;
    width: 100%;
	border: 0.25em solid;
	border-radius: 4px;
	padding: 0.5em;
	text-align: center;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.splash-panel > img {
	/* A trick to get the images to behave in firefox as they do in chrome, they "flex" to determine the size  (source)*/
	min-width: 0;
	min-height: 0;
}

/* modifies the border of the homepage buttons when hovering on */
.splash-panel:hover {
	border: 0.5em solid;
}

.splash-title-container { /*contains the title "estuary" on the homepage  (source)*/
   height: 50%;
   justify-content: center;
   align-items:center;

}

.splash-title {
	font-size: 3vmin;
  overflow-wrap: break-word;
}

.splash-icon-container {
	  width: 100%;
    justify-content: center;
		margin: auto;
		min-height: 0; /* Fixes flex stretching for underspecified boxes to be the flex'd height rather than parent height. */
}

.splash-icon {
	font-family: estuary-icons;
 	font-size: 15vmin;
}

.splash-icon > canvas {
    max-width: 100%;
    max-height: 100%;
    /* only clicking the icon when it is in place (over the panel) should
       trigger the event for the panel, not during the animation. */
    pointer-events: none;
  }

/* used to put splash buttons/lobby on one side, announcements on the other */
.pageSplitter {
  display: flex;
  width: 100%;
}

/* used with pageSplitter (above) to put splash buttons/lobby on one side, announcements on the other */
.halfPage {
  width: 50%;
  height: 100%;
}

.announcements {
  padding: 0.5em;
}

.announcement {
  margin-bottom: 0.5em;
}

.webSocketButtons {/*contains the "send" button and "terminal/chat" label (source)*/
	display: inline;
	margin-right: 5px;
	overflow:hidden;
	text-overflow: ellipsis;
    overflow: hidden;

}

/*modifies the chat messages (source)*/
.chatMessageContainer {
	overflow: auto;
	height: 7em;
	margin-left: 3px;
}

.chatMessage {
display: block;

}


.chatMessageContainer::-webkit-scrollbar  {
    width: 1%;
    height: 10px;
}

.chatMessageContainer::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px var(--primary-color);
  border-radius: 10px;
}

.chatMessageContainer::-webkit-scrollbar-thumb {
  background: var(--primary-color);;
  border-radius: 10px;
}

.chatMessageContainer::-webkit-scrollbar-corner{
	background-color: transparent;
}


.translationDNEWidget { /*source*/
	text-align: center;
	margin:auto;
	width: 50%;
	border-radius: 5pt;
	border: 1pt solid rgb(229, 229, 0);
	background: rgba(229,229,0,0.5)
}

.whiteSpaceAdd { white-space: pre-wrap;
   display: inline-block;
}

.twoStackedPatternsLeft { /* for one of the two divs in the two stacked patterns page (source)*/
	display: inline-block;
	vertical-align: top;
	border-right: 1px solid black;
	width: 50%;
}

.twoStackedPatternsRight { /* for one of the two divs in the two stacked patterns page (source)*/
	display: inline-block;
	vertical-align: top;
	width: 49%;
}

.divView-bottom-or-top-left {/*modifies the topLeft view*/
	position: relative; /* note that relative positioning with 0x0 is required here for SVG display */
	left: 0px;
	top: 0px;
	border-right: 1px solid hsl(0,0%,10%);
	border-bottom: 1px solid hsl(0,0%,10%);
	height: 215px;
	padding: 5px;
	display: inline-block;
	vertical-align: top;
	width: 48%;
}

.divView-bottom-or-top-right {/*modifies the top right view*/
	position: relative; /* note that relative positioning with 0x0 is required here for SVG display */
	left: 0px;
	top: 0px;
	border-left: 1px solid hsl(0,0%,10%);
	border-bottom: 1px solid hsl(0,0%,10%);
 	height: 215px;
	padding: 5px;
	display: inline-block;
	vertical-align: top;
	width: 100%;
}

.eightMiddleL {/*modifies the middle left view*/
	position: relative; /* note that relative positioning with 0x0 is required here for SVG display */
	left: 0px;
	top: 0px;
	border-bottom: 1px solid hsl(0,0%,10%);
	border-right: 1px solid hsl(0,0%,10%);
	padding: 5px;
	display: inline-block;
	vertical-align: top;
	width: 47vw;
	font-size: 2vh;
}

.eightMiddleR {/*modifies the middle right view*/
	position: relative; /* note that relative positioning with 0x0 is required here for SVG display */
	left: 0px;
	top: 0px;
	border-bottom: 1px solid hsl(0,0%,10%);
	border-left: 1px solid hsl(0,0%,10%);
	padding: 5px;
	display: inline-block;
	vertical-align: top;
	width: 47vw;
	font-size: 2vh;
}

.fullRowTopOrBottom {
	position: relative;
	left: 0px;
	top: 0px;
	width: 100%;
	padding: 5px;
	display: inline-block;
	vertical-align: top;
}

.fullRowMiddle {
	position: relative;
	left: 0px;
	top: 0px;
	border-top: 1px solid hsl(0,0%,10%);
	border-bottom: 1px solid hsl(0,0%,10%);
	width: 100%;
	padding: 5px;
	display: inline-block;
	vertical-align: top;
}

/*contains the elements parser selector, name-tag area, textarea, eval button and info button (source) */
.textPatternChain {
  flex:1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
   }

/* coding textarea */
.labelAndTextPattern {
	flex-grow:1;
/* 	display: grid; */
	display: flex;
    overflow: hidden;
}

.width-100-percent{
	width: 100%;
}

.coding-textarea {
	 border: none;
}

/* contains the name-tag textarea */
.labelWidgetDiv {
	flex: none;
}

/* name-tag textarea */
.name-tag-textarea {
	width: 100%;
	border: none;
	background-color: transparent;
}

/*contains the "eval" button (should change name)  */
.textInputLabel {
	font-size: 100%;
	font-weight: normal;
	vertical-align: bottom;
	padding: 0px;
	margin: 0px;
	display: inline;
}

/* contains the reference button  */
.referenceButton {
	margin-right: 1em;
	margin-left: auto;
}

/*contains the tempo and coding textareas  */

.divForText {
	position: relative;
	transform: translate(50%,50%);
	height: 50%;
	width: 50%;
}

.textInputToEndOfLine  {
	height: 100%;
	width: 100%;
	box-sizing:border-box;
    background-color: transparent;
	overflow: hidden;
  	resize: none;
  	border:none;
  }

.human-to-human-comm {
  color: var(--primary-color);
  font-size: 1em;
}

.invisible-color {
	color: rgba(0,0,0,0);
  }

.mySVG {
  color: var(--primary-color);
}

.evalFlash {
  color: var(--background-color);
  background-color: var(--background-color) !important;
}

input:focus, textarea:focus { outline: none; }

/*ex. the div that 'Sound' is written in, in ICLCFixed)*/
.singlePatternDiv-label{
	font-size:100%;
	margin:5px;
	display:inline-block;
}

/*ex. each td in ICOAH patterns)*/
.multiPatternTable-td{
 	font-size:100%;
 	margin:5px
}

/*
______________________________
         Sequencer classes
______________________________
*/
.sequencerRow .delete{
	flex-grow: 1;
}

.sequencerRow .delete button {
	top:5%;
	width: 100%;
	color: var(--primary-color);
	position: relative;
	height: 90%;
}

.sequencer{
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	padding:2%;
	flex-grow: 1;
	margin: auto;
}

.sequencerRow{
	display: flex;
	width: 100%;
	flex-grow: 1;
	min-height: 0px;
}

.sequencer-textarea {
    border-radius: 5px;
    }

.sequencer-textarea input {
	width: 90%;
	left:5%;
	display: block;
	height: 90%;
	position: relative;
	box-sizing: border-box;
	top:5%;
    text-align: center;
    border: none;
    background-color: transparent;
}

.sequencerButton{
	border-radius: 5px;
	flex-grow: 1;
	width:20px;
/* 	border:1px solid gray; */
}

/* sets the color for the pads when hovering on */
.sequencerButton:hover {
	border-radius: 5px;
	background-color: var(--secondary-color);
}

.sequencerButton-activated {
    border-radius: 5px;
	background-color: var(--primary-color)}

/* sets the color for the active pads when hovering on */
.sequencerButton-activated:hover{
	border-radius:  5px;
	background-color: var( --primary-color);
}

/*
______________________________
         Tutorial classes
______________________________
*/

.tutorial{
	padding:2%;
}

.tutorial .panel {
	background-color:var(--secondary-color);
	border-radius: 5px;
	margin:1%;
	padding:1%;
}
.tutorial .panel textarea{
	margin: 1%;
	padding:1%;
	display: block;
	width: 96%;
	border-radius: 5px;
	background: var(--background-color);
}

.title{
	font-size: 18pt;
	padding:1%;
	text-align: center;
}

.panel button {
	border-color: var(--primary-color)}


.tutorialContainer{
	display: flex;
	flex-direction: column;
	height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
}

.tutorialView {
  overflow-y: scroll;
  overflow-x: scroll;
}

.tutorialButton{
	width: fit-content;
}

.tutorialButton button {
	cursor: pointer;
	margin-top: 1em;
	padding: 4px;
	background-color: var(--secondary-color);
	color: var(--primary-color);
	border-radius: 5px;
    border: 1px solid var(--secondary-color);
}

.tutorialTitle{
	width:fit-content;
	font-weight:bolder;
	margin-right: 1em;
	margin-bottom: 0.5em;
}

.tutorialPageTitle{
	width: 100%;
	font-weight: bold;
	margin-bottom: 0.5em;
}

.prevNextButtons{
	width: 6%;
  text-align: center;
}

.prevNextButtons button {
	background-color: var(--secondary-color);
	 color: var(--primary-color);
	 border-radius: 5px;
	 margin-bottom: 0.5em;
   border: 1px solid var(--secondary-color);
}


/*
--------------------------------------------------------------------
							GENERAL PATTERN
--------------------------------------------------------------------
*/
/* modifies structured editor */
.atomPopup{
	position: relative;
	display: inline-block;

}

.atomPopupInput, .atomPopupInputMouseOver {
	border: none;
}

/*ex. ICLCFixed, hit [] on any widget - div wrapped in red border*/
.generalPattern-group-or-layer-or-atom{
	display:inline-block;
}

.generalPattern-group-or-layer-or-atom input{
	color: var(--primary-color);
     background-color: var(--background-color);
}


/*
***************************************************************************************************
For aGLStringWidget_____ see any pattern that takes a list of Strings as input (for example 's') in iclcStackedPattern
*/

/* styles the 'Table' containing widgets that take strings (ex. ICLCText->s pattern, green widgets. Or ICLC Stacked -> Vowel)*/
.aGLStringWidgetTable{
	display:inline-table;
	width:130pt;
	border-spacing:5px;
}

/*
In iclc stacked patterns -> 's' pattern -> see the check box in the green widget...
the repDivWidget includes: the * and / with the check boxes, and the textfield
to the right of them
*/
.repDivTable{
	height:20px;
}

.repOrDiv{
	position: relative;
	display: inline-block;
}
.repDivSpan{
	white-space: pre
}
/* for the text input */
.repOrDivInput {
	width:25px;
	border:none;
}

table, tr, td {border: none;}

.countWidgetTable{
	display: inline-table;
	background-color: hsl(0,0%,10%);
	color: lightgreen;
	width:100pt;
	border-spacing:5px;
}


/*
--------------------------------------------------------------------
							Transformed Patterns
--------------------------------------------------------------------
*/
.patternTransformerWidget-or-popupSpecificPatternWidget{
	position: relative;
	display: inline-block;
}

/*
--------------------------------------------------------------------
							Stacked Patterns
--------------------------------------------------------------------
*/

.stackedPatternTable{
	position: relative;
	height: 90%;
	width:90%;
	border: 1px solid black;
}

.stackedPatternTable-tr{
}

.stackedPatternTable-td{
	vertical-align: top;
}

/*
--------------------------------------------------------------------
							Miscelaneous
--------------------------------------------------------------------
*/


/* The div wrapping popupMenus */
.popupMenu{
	top: 105%;
	left: 0px;
	position: absolute;
	z-index: 1;
}

/*ex. hit [] - see '+' buttons between widgets*/
.addButton{
	display:inline-block
}

/*ex. hit [,,] - the vertical buttons*/
.addButton-vertical{
	text-align:center;
	display:inline-table;
	max-width:30px;
	color: lightgreen;
	height:30px;
	vertical-align:middle
}

.terminal{
	flex: 1 1 auto;
/* 	padding-left: 0.95em;
	padding-right: 0.5em; */
	padding-left: 15px;
	padding-right: 6px;
	overflow:hidden;
  border-top: 1px solid;
  box-sizing:border-box;
}

.terminalHeader {
	display: flex;
	flex-direction: row;
	border: none;
  padding: 0.125em;
}

.terminalInput {
	flex-grow: 0.97;
	border:none;
}

.terminalInput input {
	border:none;
	background-color: transparent;
	box-shadow: inset 0 0 3px var(--primary-color);
	border-radius: 5px;
}

.terminalHidden {
  display: none;
}

.chat {
  display: inline-block;
  width: 49.5%;
      border: 1px solid var(--secondary-color);
/* background-color: green; */
}

.joinButton {

width: fit-content;
padding: 0.25em;
margin-bottom: 0.25em;
cursor: pointer;
}

.ensembleHeader {
	display: flex;
	flex-direction: row;
    border:none;
    display: none;

}

.ensembleName {
	display: none;
	margin-top: 1px;
	margin-right: 1em;
}

.ensembleTempo {
	display: flex;
	border: none;
}

.ensembleHandle, .ensemblePassword {
	margin-right: 1em;
	border: none;
	background-color: transparent;
	display: none;
}

.ensembleTempo textarea{
	position: relative;
	border: none;
	max-width:13em;
    text-align: center;
    width: fit-content;

}

/* recently added by AFB, experiments for widget creation */

.time-widget {
  	height: 100%;
  	position: relative;
}

.visualiser {
    position: absolute; 
	z-index: 0;
}

.segmentMark { position:absolute; }

.flex-container-for-timeVision {
	display: flex;
    height: 100%;
}

.verty {
	flex-direction: column;
  	width: 100%;
}

.flex-item-for-timeVision {
	width: 100%;
	z-index: 1;
}

.halfer { min-height: 50%; }

.tri { min-height: 33%; }

.flex-item-for-timeVision:hover .panel-hoover {
	visibility: visible;
	opacity: 0%;
    transition: opacity 5s linear;
  }

.panel-hoover {
	z-index: 1;
	visibility: hidden;
	position: absolute;
	top: 50%;
	background-color: var(--secondary-color);
	opacity: 75%;
  }

.lefty { left: 15%; }

.righty { left: 75% ; }

.upper { top: 25%; left: 45%; }

.downner { top: 75%; left: 45% }

.midder { top: 50%; left: 45%;}

.spot {
	position: relative;
	width: 10%;
	height: 100%;
}

.icons {
    display: flex;
	position: absolute;
}

.flex-container-row {
    display: flex;
    flex-direction: row;
	z-index: 0;
	width: 100%;
    height: 100%;
}

.flex-item-row {
    width: 100%;
    opacity: 0.5;
	z-index: 0;
    height: 100%;
}

.flex-container-col {
    display: flex;
    flex-direction: column;
	z-index: 0;
	width: 100%;
    height: 100%;
}

.flex-item-col {
    width: auto;
    height: 100%;
    opacity: 1.0;
	z-index: 0;
}

.flex-item-col-Form {
    width: auto;
    height: 50%;
    opacity: 1.0;
	z-index: 0;
}

.stopwatch {
	width: 100%;
  	height: 100%;
  	position: relative;
	color: var(--primary-color);
	font-size: 1em;
}

.stopwatch-panel {
	position:absolute;
	width: 100%;
	z-index: 1;
  	min-height: 100%;
}

.stopwatch-panel:hover .stopwatch-panel-hover {
	visibility: visible;
	opacity: 0%;
    transition: opacity 5s linear;
  }

.stopwatch-panel-hover {
	z-index: 1;
	visibility: hidden;
	position: absolute;
	top: 10%;
	left: 35%;
	background-color: var(--secondary-color);
	opacity: 85%;
  }


/*
--------------------------------------------------------------------
							help files
--------------------------------------------------------------------
*/
.helpWrapper {
  display: flex;
  margin-bottom: 0.5em;
}

.about {
  margin-bottom: 4%;
}

.exampleText, .referenceText {
	border:none;
	padding: 0.125em;
	width: 100%;
	border-radius: 5px;
    box-shadow: 0px 0.25px 4px 0.025px grey;
    margin-bottom: auto;
}

.listenButton button {
	margin-left: 20%;
}

/* resource widgets */

.resourceWidget{
display: inline-flex;
}

.resourceWidgetContainer {

     overflow:scroll;
     padding-right: 1.8em;
     height:100%;
     min-height: 70px;
     max-height: 55px
}

.resourceWidgetContainerm::-webkit-scrollbar  {
    width: 10px;
    height: 10px;
}

.resourceWidgetContainer::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px var(--primary-color);
  border-radius: 10px;
}

.resourceWidgetContainer::-webkit-scrollbar-thumb {
  background: var(--primary-color);;
  border-radius: 10px;
}

.resourceWidgetContainer::-webkit-scrollbar-corner{
	background-color: transparent;
}



.resourceGroup {

	text-align: center;

	}

.resourceLabels {

	text-align: center;
	display: inline-flex;
	box-shadow: inset 0 0 5px var(--primary-color);
    border-radius: 5px;
    width: 100%;
}

.resourceName{
	text-align: center;
	width: 8em;
}

.resourceDur{

	text-align: center;
	width: 7em;}

.resourceTags{

	text-align: center;
	 width: 12em;
	 margin-right: 2em}

.resourceShape{
	text-align: center;
	width: 5em;}

/* new grid layout css */
   /*this goes inside page  */


.fullWidthDiv {
	display: flex;
	flex-wrap: wrap;
	flex:0.025;
	background-color: transparent;
  }

.noDiv {
	display: none;
  }

.fullWidthDiv select{
	margin-right: 1em;
}

.fullWidthDiv button {

}

/* the Views view contains any number of children, some of which are fixed height, some of which grow to use available space
 (a) so it is a flex parent in the column direction that claims 100% of the available height [display, flex-direction, height], and
 (b) ??? does it */
.views {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.rows {
	flex-grow: 1;
	display: flex;
	flex-direction: row;
	height: 100%;
  }

.columns {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
	flex-wrap: wrap;
  }

.gridView {
  flex-grow: 1;
  height: 100%;
  display: grid;
  width:100%;
}

.gridChild {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.borderDiv {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--secondary-color);
}

/* ///////////status Widget/////////// */

.ensembleStatus {
  display: inline-block;
  width: 49.5%;
  border: 1px solid var(--secondary-color);
  vertical-align: top;
  height: 8.5em;
}


.ensembleStatusWidget {
	height: 100%;
	width: 100%;
/*     border: 1px solid var(--primary-color); */
/*     border-radius: 5px; */
    margin-top: 0.35%;
   	overflow: hidden;
   	margin-right: 0.7em;
}

.statusWidgetScrollableContainer {
overflow:hidden;
overflow-y: auto;
height: 8em;
width: 100%;
}

.statusWidgetScrollableContainer::-webkit-scrollbar  {
    width: 1%;
    height: 0px;
}

.statusWidgetScrollableContainer::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px var(--primary-color);
  border-radius: 10px;
}

.statusWidgetScrollableContainer::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 10px;
}

.statusWidgetScrollableContainer::-webkit-scrollbar-corner{
	background-color: transparent;
}


.infoContainer {
	width: 100%;
}

.tableContainer table  {
  border-collapse: collapse;
  width: 100%;
  cursor: pointer;
  margin-left: 3px;
}

.rowContainer {
	display: flex;
	flex-wrap: nowrap;
	width: 48vw;
}

.rowSubContainer {
 display: flex;
 flex-wrap: nowrap;
}

.rowHeaderContainer {
	width: 48vw;
	display: flex;
	flex-wrap: nowrap;
	font-weight:bold;
	margin-bottom: 2px;
	}


.statusWidgetNameAndLocation {
	margin-bottom: 2px;
	width: 21vw;
}


.statusWidgetNameAndLocationText{
    width: 21vw;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
	text-align:left;
	}

.statusWidgetName {
    width: 15vw;
	text-align:left;
    overflow:hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}


.statusWidgetActivity   {
	width: 5vw;
	text-align:center;

}

.statusWidgetStatusInput {
    width: 21vw;
	text-align: center;
}


.statusWidgetStatusInput input {
	box-sizing: border-box;
	color: var(--primary-color);
	background-color: transparent;
	border: none;
	width: 97%;
    border-radius: 5px;
    margin-left: 10px
}

.statusWidgetLatency, .statusWidgetLoad {
   width: 8vw;
   text-align: center;
    overflow:hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}


.statusWidgetFPS {
   width: 8vw;
   text-align: center;
    overflow:hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}

.statusWidgetIP {
   width: 15vw;
   text-align: center;
    overflow:hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}

.statusWidgetLabel {

}

.otherInfo {
 width: 100%;
 text-align:center;
}

.statusWidgetAnonymousPart {
   width: 100%;
   margin-left: 3px;

}


/* Tooltip classes */
.tooltip {
  display: inline-block;
  cursor: pointer;
  }

.tooltipPosAbsolute {
  position: absolute;
  width: 10px;
  height: 1px;
  }

.tooltip .tooltiptext {
  visibility: hidden;
  display:flex;
  min-width:15vw;
  max-width: 35vw;
  width:max-content;
  background-color: var(--secondary-color);
  color: var(--primary-color);
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: relative;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 12vh;
/*   margin-left: -5px; */
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--secondary-color) transparent;

}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

/* special parameters for status widget tooltip */
.tooltip-scrollable-table {
  display: inline-block;
  cursor: pointer;
  position:relative;
  }


.tooltip-scrollable-table .tooltiptext-scrollable-table {
  visibility: hidden;
  display:flex;
  min-width:15vw;
  max-width: 35vw;
  width:max-content;
  background-color: var(--secondary-color);
  color: var(--primary-color);
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 1.4em;
  left: 5em;
  margin-left: -60px;
}

/*tooltip scrollable table  */
.tooltip-scrollable-table .tooltiptext-scrollable-table::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 1.5vh;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--secondary-color) transparent;

}

.tooltip-scrollable-table:hover .tooltiptext-scrollable-table {
  visibility: visible;
}

/* tooltip satus labels */
 .tooltiptextStatusLabels {
  visibility: hidden;
  white-space:normal;
  font-weight: lighter;
  display:flex;
  min-width:15vw;
  max-width: 15vw;
  width:max-content;
  background-color: var(--secondary-color);
  color: var(--primary-color);
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: relative;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltiptextStatusLabels::after {
  position: absolute;
  bottom: 100%;
  left: 12vh;
/*   margin-left: -5px; */
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--secondary-color) transparent;
}

.tooltip:hover .tooltiptextStatusLabels {
  visibility: visible;
}

/*Syntax error */

.syntaxIssue {
  color: var(--transient-color);
  border-bottom: 1px dotted var(--secondary-color);
  margin-left: 3px;
}

.invisible-button {
  background: transparent;
  border: none;
  font-size: 0;
  width: 100%;
  height: 99%;
  cursor: pointer;
  padding: 0;
  display: block;
  outline: none;
}

.footer-area {
  width: 50%;
  display: inline-block;
  text-align: end;
  cursor: pointer;
}

.header-area {
  width: 50%;
  display: inline-block;
  cursor: pointer;
}

.sidebar {
  height: 100%;
  width: 33%;
  overflow-x: hidden;
  transition: 0.5s;
  border-left: 1px solid;
}

.sidebar-tab {
  width: 48%;
  display: inline-block;
  cursor: pointer;
  border: 1px solid;
  padding: 0.125em;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  bottom: 1px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(25px);
  -ms-transform: translateX(25px);
  transform: translateX(25px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.config-option {
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
}

hr.dashed {
  border-top: 2px dashed var(--primary-color);
  border-bottom: transparent;
}

.header-title {
  font-size: 16pt;
  padding: 2px;
  font-family: estuaryFont;
  cursor: pointer;
}

.opaque {
  background: var(--background-color);
}

.reference {
  margin: 10px;
}

.reference-title {
  font-size: 16pt;
  font-family: estuaryFont;
}

.reference-description {
  padding-top: 8px;
  font-size: 0.8em;
}

.reference-link {
  cursor: pointer;
}

.reference-link:hover {
  text-decoration: underline;
}

/* roulette css */

.rouletteButtons {
	width: max-content;
	border-radius: 5px;
  margin-right: 1%;
  padding-left: 0.5%;
  padding-right: 0.5%;
}

.lineUpButton {
 	width: max-content;
  padding-left: 0.5%;
  padding-right: 0.5%;
}

.rouletteWidgetContainer {
	overflow: auto;
}

.rouletteWidgetContainer::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}

.rouletteContainer{
	display: flex;
	overflow-y: auto;
	margin-top: 0.25%;
	margin-bottom: 0.5%;

}

.rouletteContainer::-webkit-scrollbar  {
    width: 0.5%;
    height: 0px;
}

.rouletteContainer::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px var(--primary-color);
  border-radius: 10px;
}

.rouletteContainer::-webkit-scrollbar-thumb {
  background: var(--primary-color);;
  border-radius: 10px;
}

.rouletteContainer::-webkit-scrollbar-corner{
	background-color: transparent;
}

.ieRef{
  overflow-wrap: break-word;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.9em;
  border: none;
  padding: 0.125em;
  width: 100%;
  border-radius: 5px;
  box-shadow: 0px 0.25px 4px 0.025px grey;
}

.infoRef{
  margin-bottom: 1em;
}

.attrsRouletteButtonHead {
/* 	border: 1px solid var(--primary-color); */
padding-left: 0.5%;
padding-right: 0.5%;
box-shadow: inset 0 0 3px var(--primary-color);
}



/* CalendarEvent widget */




.selectYear, .selectMonth {
  display: flex;
  margin: auto;
}

.monthAndYear {
  display: flex;
}

.dayNumbers {
	width: 20vw;
	display: grid;
	grid-template-columns: repeat(7, 1fr);

}

.dayNumbers div {
	border: none;
    box-shadow: inset 0 0 1px var(--primary-color);
    border-radius: 5px;
}

.addButtonCalendarEvent {
  width: 3.5%;
  margin-bottom: 0.08%;
}

.addButtonCalendarEvent button {
  width: 100%;
  border: none;
  box-shadow: inset 0 0 2px var(--primary-color);
  border-radius: 5px;
}

.calendarEventWidget {
	display:flex;
	flex-direction: column;
	flex-wrap: wrap;

}

.deleteButtonCalendarEvent {
	width: 3.5%;
	margin-right: 0.25%;

}

.deleteButtonCalendarEvent button {
	width: 100%;
	border: none;
    box-shadow: inset 0 0 2px var(--primary-color);
    border-radius: 5px;
}

.descriptionWidgetInput {
    width: 100%;
    box-sizing:border-box;

    color: var(--primary-color);
    border: none;
}

.descriptionWidgetInput input {
	border: none;
	box-shadow: inset 0 0 3px var(--primary-color);

}

.descriptionWidgetInput input::placeholder {
  color: var(--primary-color);
}


:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--primary-color);
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--primary-color);
}

.calendarContainer {
  z-index: 999;
	text-align:center;
	border: none;
    box-shadow: inset 0 0 3px var(--primary-color);
    border-radius: 5px;

}

.calendarContainer th {
	width: 80px;
}

.calendarContainer > .confirmButton, .calendarContainer > .cancelButton {
  width: 100%;
  text-align: center;
}

.selectedDate {
    border: none;
    box-shadow: inset 0 0 2px var(--primary-color);
    border-radius: 5px;
    padding-left: 0.25em;
    margin-right: 0.1em;
    height: 120%;
	width: 105%;
    box-sizing: border-box;
 }

.confirm-close-buttons {
	display: flex;
	width: 100%;
}

.confirm-close-buttons div {
	width: 50%;
	}

.dateLabel {
  height: 13px;
	}

.dayLabel {}

.dayLabel:hover {
	background-color: var(--secondary-color)
}

.dayLabel:active {
    background-color:var(--primary-color);
    color: var(--background-color);
}

.calendarEventRow {
	display: flex;
	margin-bottom: 1%;
}

.calendarEventWidgetMainContainer {
	height: 25%;

}

.calendarEventWidgetSubContainer {
	display: flex;
/* 	flex-wrap:wrap; */
/*     grid-template-areas:'details startingDate periodicity'; */
/*     grid-template-columns: 25% 30.5% 27%; */

}



.detailsContainer {
 grid-area: details;
 height: 80%;

}


.descriptionWidget {
}

.descriptionWidget input {
	width: 95%;
	box-sizing:border-box;
	overflow: hidden;
	white-space: nowrap;
    text-overflow: ellipsis;
}


.selectStartingDateContainer {
  display: flex;
}



.dateWidget {
	display: flex;
	height: 66%;
	cursor: pointer;
    /* z-index: 999; */
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
}


.timeWidgetsContainer {
	display: flex;
  flex-direction: column;
	width: 100%;
}


.startTimeWidgetContainer {
	display:flex;
	width: 100%;
	height: 40%;
}

.timeWidget {
/*     width: 4vw; */
	width: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
    border: none;
	border-radius: 5px;
	box-sizing:border-box;
/*     height: 70%; */
}

.hoursAndminsLabelContainer {	display: flex;}

.hoursAndminsLabel {
	border:none;
/* 	border-radius: 5px; */
	box-shadow: inset 0 0 3px var(--primary-color);
	width: 50%;
	text-align: center;
	align-items:center;
}

.hoursAndminsLabel th {width: 1%;}


.timeWidgetInputContainer {
	display: flex;
	}

.timeWidget  {
    display: flex;
}


.timeWidgetInput  {
    border: none;
    width: 100%;
    box-sizing:border-box;
}

.timeWidgetInput > input {
 text-align: center;
	border: none;
}

.timeWidgetColon {
  position:relative;
  font-size: 90%;
  bottom: 25%;
}

.zoneWidget {
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 2em;
  font-size: 70%;
  position: relative;
  bottom: 0.25em;
}

.changeUTCTimeWidgetText {
	font-size: 70%;
/* 	background: red; */
	position: relative;
/* 	bottom: 0.25em; */
	width: 100%;
}

.utcDayAdjustment {
}

.localDayAdjustment {

}

.periodicity {
	height: 100%;
	grid-area: periodicity;
	display:flex;
	max-width: 100%;
	margin-left: 2%;
}

.selectPeriodicity {
	height: 62%;
	min-width: 40%;
	max-width: 50%;
}

.selectPeriodicity select {
   width:100%;
   position: relative;
   overflow:hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   border: none;
   box-shadow: inset 0 0 3px var(--primary-color);
}

.endDateWidget {
	height: 56%;
	cursor: pointer;
    z-index: 999;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
	margin-left: 2%;
    }

.showDate {
    margin-right: 2%;
    cursor: default;
}

.cancelButton{
 text-align: center;
}

.confirmButton:hover  {
 border-radius: 5px;
 background: var(--secondary-color);
}

.cancelButton:hover {
 border-radius: 5px;
 background: var(--secondary-color);

}



/* End of CalendarEvent CSS */


/* Notepad style */

.notepadContainers {
	display: flex;
	flex-direction: column;
	height: 95%;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
}

.notepad-Title {
	width: 100%;
  text-align: center;
  font-weight: bold;
	border: none;
	background-color: transparent;
  margin-top: 0.2em;
}

.notepage-title {
	width: 100%;
  font-weight: bold;
	border: 1px solid var(--secondary-color);
	background-color: transparent;
  margin-top: 0.5em;
}

.notepage-content {
	display: flex;
	height: 100%;
  width: 100%;
	border: 1px solid var(--secondary-color);
	background-color: transparent;
}

.notepad-rowOfButtons{
  display: flex;
  flex-direction: row;
  height: 2em;
  width: 100%;
  background-color: transparent;
  margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.notepad-prevNextButtons{
	width: 100%;
	height: 1.5em;
  text-align: center;
	border: 1px solid var(--secondary-color);
}

.notepad-prevNextButtons button {
	background-color: var(--secondary-color);
	color: var(--primary-color);
}


/* end of Notepad style */

/*timer control LAST VERSION*/
.containerControl {
	display: flex;
	height: 100%;
  }
  
  .columnControl {
	flex: 1;
	display: flex;
	flex-direction: column;
  }
  
  .small-areaControl {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
  }
  
  .big-areaControl {
	flex: 20;
	display: flex;
	flex-direction: column;
	position: relative;
  }
  
  .rowControl {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
  }
  
  .input-wrapperControl {
	height: 100%;
	padding: 1px;
	text-align: left;
  }
  
  .input-textControl {
	height: 100%;
	width: 100%;
	font-size: 16px;
	border: 1px solid #ccc;
	border-radius: 4px;
	resize: none;
  }
  
  .additional-divControl {
	background-color: transparent;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50%;
  }
  
  .additional-div-topControl {
	bottom: 50%;
  }
  
  .additional-div-bottomControl {
	top: 50%;
  }


/*timer display LAST VERSION*/
.containerTimer {
	display: flex;
    flex-direction: row;
	z-index: 0;
	width: 100%;
    height: 100%;
  }
  
  .segmentTimer {
	flex: 1;
	justify-content: center;
	align-items: center;
	position: relative; 
	width:100%;
	height: 100%;
	min-height: 100%;
	display: inline-block;
  }

  .segmentLeftTimer {
	flex: 1;
	justify-content: center;
	align-items: center;
	position: relative; 
	width:100%;
	height: 100%;
	min-height: 100%;
	display: inline-block;
  }

  .segmentLeftTimer:hover .flipTimer {
	visibility: visible;
	opacity: 0%;
    transition: opacity 5s linear;
  }

  .flipTimer {
	z-index: 1;
	visibility: hidden;
	position: absolute;
	top: 50%;
	left: 40%;
	background-color: var(--secondary-color);
	opacity: 75%;
  }

  .segmentRightTimer {
	flex: 1;
	justify-content: center;
	align-items: center;
	position: relative; 
	width:100%;
	height: 100%;
	min-height: 100%;
	display: inline-block;
  }

  .segmentRightTimer:hover .modeTimer {
	visibility: visible;
	opacity: 0%;
    transition: opacity 5s linear;
  }

  .modeTimer {
	z-index: 1;
	visibility: hidden;
	position: absolute;
	top: 50%;
	left: 40%;
	background-color: var(--secondary-color);
	opacity: 75%;
  }

  .rowTopTimer {
	justify-content: center;
	align-items: center;
	position: relative;
	width:100%;
	height: 50%;
	min-height: 50%;
  }

  .rowTopTimer:hover .resetTimer {
	visibility: visible;
	opacity: 0%;
    transition: opacity 5s linear;
  }

  .resetTimer {
	z-index: 1;
	visibility: hidden;
	position: absolute;
	top: 50%;
	left: 40%;
	background-color: var(--secondary-color);
	opacity: 75%;
  }

  .rowBottomTimer {
	justify-content: center;
	align-items: center;
	position: relative;
	width:100%;
	height: 50%;
	min-height: 50%;
  }

  .rowBottomTimer:hover .pauseTimer {
	visibility: visible;
	opacity: 0%;
    transition: opacity 5s linear;
  }

  .pauseTimer {
	z-index: 1;
	visibility: hidden;
	position: absolute;
	top: 50%;
	left: 40%;
	background-color: var(--secondary-color);
	opacity: 75%;
  }
