/** Add css rules here for your application. */

img{border:0;}

   
.main text {
    font: 12px sans-serif;	
}

.axis line, .axis path {
    stroke: black;
    fill: none;
}

.spider-variable {
	fill: orange;
	stroke: white;
}

.spiderdiagram_text {
	stroke: white;
    stroke-width: 1px;
    font-family: sans-serif;
    fill: #222;
    font-weight: normal;
    font-size: 30px;
}

.tooltip {
    font-family: Arial, sans-serif;
    font-size: 12px;
    fill: white;
    pointer-events: none; 
}

.tooltip-background {
    fill: black;
    opacity: 0.7;
    rx: 5; 
}

/**************** GWT overrides ***************/

/** Most GWT widgets already have a style name defined */
.gwt-DialogBox 
{
  width: 400px;
}

.gwt-PopupPanel 
{
    border: none !important;
}

/***********************************************/
.appBackground
{
  background-color: white;
}

.textBox
{
  border-color: black;
}

.noBorderOrBackgroundPopups 
{
  border: none;
  background: none;
}

.signInLogo
{
  width: 1700px; 
  height: 200px;
  opacity: 0.1;
}

.stagesPanel
{
  width: 300px; 
}

.studyMessageLabel
{
  font-size: 18px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.studyMessagePanel
{
  width: 300px; 
  height: 300px;
}

.studyPercent
{
  margin-top: auto;
  margin-bottom: auto;
  width: 55px; /* Need to allow for additional percent sign so make wider than height so it centers properly */
  height: 300px;
  position:absolute; 
  top:42%;
  font-size: 30px;
}

.websiteTestButton
{
  background: blue !important; 
  background-color: blue !important;
  color: white;
}

.dividerPanel
{
  width: 968px; 
  background-color: black;
  height: 1px;
  margin: 10px 0px 10px 0px; /*  T, R, B, L */
}

.hoverhint
{
	font-size: 20pt;
	text-align: center;
}

.sliderPanel
{
/*  margin-left: auto;
    margin-right: auto; 
*/
    border: 1px solid black;
	width: 100%;
    height: 100%; 
/*  opacity: 0.1; */
}
.slidingPanel
{
/*  margin-left: auto;
    margin-right: auto; 
*/
	width: 100%;
    height: 100%; 
    opacity: 1.0;
}

.termsAndConditions
{
	border: 0px;
    width: 968px; 
    height: 325px; 
    font-family: arial;

/*     width: 20%; 
    height: 20%; 
 */
}

.termsAndConditionsContent
{
	border: 0px;
    width: 964px; 
    height: 321px; 
}

.labelLink
{
  color: blue;
}
.labelLink:hover 
{
	text-decoration: underline;
	cursor: pointer;
}


.spacerFive 
{
  margin-top: 5px;
}

.spacerTenTop 
{
  margin-top: 10px;
}

.spacerTenTwenty 
{
  margin-top: 20px;
}

.leftMarginTwo 
{
  margin-left: 2px;
}

.leftMarginFive 
{
  margin-left: 5px;
}

.leftMarginTen 
{
  margin-left: 10px;
}

.leftMarginFifteen 
{
  margin-left: 15px;
}

.leftMarginFiTwenty 
{
  margin-left: 20px;
}

.rightMarginTen 
{
  margin-right: 10px;
}

.bottomMarginTen
{
  margin-bottom: 10px;
}

.bottomMarginTwenty
{
  margin-bottom: 20px;
}

.topMarginTwo
{
  margin-top: 2px;
}

.topMarginTen
{
  margin-top: 10px;
}
.topMarginTwenty
{
  margin-top: 20px;
}

.topMarginTwentyFive
{
  margin-top: 25px;
}

.topMarginThirty
{
  margin-top: 30px;
}

.leftAlign
{
  text-align: left;
  margin-left: 5px;
}

.instructionTextSmall 
{
  text-transform:capitalize;
  font-family: Arial;
  font-size: 8px;
}

.instructionText 
{
  font-weight: bold;
}

.instructionTextLarge
{
  font-weight: bold;
  font-size: 24pt;
}

.greyBackground
{
  background-color: grey;
}

.blackBackground
{
  background-color: black;
  color: white;
}

.newStudyMargin 
{
  margin-left: 0px;
}

.inquireOrange
{
  color: #f47032;
}

.inquireOrangeBackground
{
  background: #f47032 !important; 
  background-color: #f47032 !important;
}

.attentionBackgroundColour
{
  background: #FFFF00 !important; 
  background-color: #FFFF00 !important;
}

.defaultButtonSize
{
  width: 70px; 
  height: 25px; 
}

.smallButtonText
{
  font-size: 7pt !important;
}


.signOutButton
{
  width: 70px; 
  height: 25px; 
}

.blackThinBorder
{
  border: 1px solid black;
}

.blackMediumBorder
{
  border: 2px solid black !important;
}

.yellowThinBorder
{
  border: 1px solid yellow;
}

.resultsLabel
{
  display: block;
  font-size: 22pt;
  font-weight: bold;
  text-align: center;
  font-family: Copperplate;
}



g.arcs path {
    fill: orange
}

g.ribbons path {
    fill: #444;
}

g.arcs text {
    font-family: sans-serif;
    color: black;
}

.slider {
    width: 100px;
}


input[type=range] {
  height: 38px;
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000;
  background: #ED7F2B;
  border-radius: 5px;
  border: 1px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000;
  border: 1px solid #000000;
  height: 30px;
  width: 15px;
  border-radius: 5px;
  background: #FFFFFF;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -11px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ED7F2B;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000;
  background: #ED7F2B;
  border-radius: 5px;
  border: 1px solid #000000;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000;
  border: 1px solid #000000;
  height: 30px;
  width: 15px;
  border-radius: 5px;
  background: #FFFFFF;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #ED7F2B;
  border: 1px solid #000000;
  border-radius: 10px;
  box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-fill-upper {
  background: #ED7F2B;
  border: 1px solid #000000;
  border-radius: 10px;
  box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 1px 1px 1px #000000;
  border: 1px solid #000000;
  height: 30px;
  width: 15px;
  border-radius: 5px;
  background: #FFFFFF;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #ED7F2B;
}
input[type=range]:focus::-ms-fill-upper {
  background: #ED7F2B;
}


.bodyWidth
{
  width: 970px; 
}
.bodyHeight
{
  height: 760px; 
}


.innerBodyWidth
{
  width: 968px; 
}
.innerBodyHeight
{
  height: 758px; 
}

.userHeaderControls
{
/*   background-image:url('images/InquireBrandLogo.jpg'); */
  margin: 0px 0px 0px 0px;  T, R, B, L
  padding: 0px 0px 0px 0px;  T, R, B, L
}

.appHeaderIcon
{
  background-image:url('images/HeaderBackground-CreateStudy.jpg');
}
.appHeaderImage
{
  background-image:url('images/HeaderBackground-CreateStudy.jpg');
}

.appHeaderTitle
{
  height: 40px; /* Panel height - underneath New Study button will overlap if zero */
  font-family: Arial;
  font-size: 32px;
  font-weight: bold;
  color: black;
  margin: 0px 0px 0px 0px; /*  T, R, B, L */
  
/*   margin: 5px 0px 0px 10%;  T, R, B, L
  text-align: center; */
}
 
}
.visualisationHeading
{
  font-family: Arial Black;
  font-size: 18px;
  font-weight: bold;
  color: white;
  margin: 0px 0px 0px;
  text-align: center;
}

.FlexTable 
{
  border-top: thin solid #444444;
  border-left: thin solid #444444;
  border-right: thin solid #111111;
  border-bottom: thin solid #111111;
}

.textTop 
{
  vertical-align: text-top;
}

.FlexTable-OddRow 
{
  background-color: #fff;
}

.FlexTable-EvenRow 
{
  background-color: #DADADA;
}

h1 
{
  font-family: Copperplate Gothic Light, arial;
  font-size: 35px;
  font-weight: bold;
  color: #FF6103;
  margin: 0px 0px 0px;
  text-align: center;
}

h2 
{
  font-size: 25px;
  font-weight: normal;
  color: #FF6103;
  margin: 0px 0px 0px;
  text-align: center;
}

h3 
{
  font-size: 25px;
  font-weight: normal;
  color: #FF6103;
  margin: 0px 0px 0px;
  text-align: center;
}

h4 
{
  font-size: 25px;
  font-weight: normal;
  color: #000000;
  margin: 0px 0px 40px;
  text-align: center;
}

.sendButton 
{
  display: block;
  font-size: 16pt;
}

outputButton 
{
  display: block;
  font-size: 16pt;
}

.yellowBorder
{
  border: 3px solid yellow;
}

.noBorder
{
  border: 0px solid yellow;
}

.dialogVPanel {
  margin: 5px;
}

.serverResponseLabelError {
  color: red;
}

.uiError 
{
  color: #ff6961;
}

/** Set ids using widget.getElement().setId("idOfElement") */
#closeButton {
  margin: 15px 6px 6px;
}

.transp-scatter-data-points {
    fill: steelblue;
    fill-opacity: 0.4;
    stroke: none;
}

.simple-scatter-data-points {
    fill: none;
    stroke: steelblue;
}

.tick {
    stroke: grey;
    stroke-width: 0.5px;
    stroke-opacity: 0.3;
}

.axis {
    fill: #000;
    font-weight: bold;
}

.grid {
    stroke: grey;
    stroke-width: 0.5px;
    stroke-opacity: 0.3;
}

.centreStyle
{
	margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}

.rightStyle
{
    margin-right: 0;
}

text {
	font-family: arial;
	font-weight: bold;
	font-size: 8pt;
}

.axistext {
	font-weight: normal;
	font-size: 14pt;
}

.node {
	fill: #7A5198;
	stroke: white;
	stroke-width: 5px;
}

.nodetext {
	fill: #202020;
	stroke: white;
	stroke-width: 1px;
}

.nodetextnowhite {
	fill: #000;
	stroke: white;
	stroke-width: 0px;
}

.link {
	fill: black;
	stroke: black;
}

.link:hover {
	opacity: 0.5;
}

.variable_d0 {
	fill: orange;
	stroke: white;
	stroke-width: 5px;
}

.variable_d1 {
	fill: #AA882D;
	stroke: white;
	stroke-width: 5px;
}

.variable_d2 {
	fill: #9B2946;
	stroke: white;
	stroke-width: 5px;
}

.variable_d3 {
	fill: #440026;
	stroke: white;
	stroke-width: 5px;
}

.chart {

}

.inquire_slider { 
    fill:#999;
    stroke:black;
    stroke-width:0;
    opacity:1;
}
.inquire_slider_thumb { 
    fill:#444;
    stroke:black;
    stroke-width:1;
    opacity:1;
    cursor: move;
}

.inquire_candle { 
    fill:orange;
    stroke:black;
    stroke-width:0;
    opacity:1;
}