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

/* This is just for fun.  The pizza widget will go below this header, but above everything else
 *  the page. */
h2 {
    z-index: 14;
    position: relative;
    
    /* The following causes an interesting effect, as an alternative to the shadow/halo.
     * It looks like a light gray background most of the time, but when a pizza widget is under
     * it it reveals an interesting pattern. */
    /*
    background-size: 0.5em 50%;
    background-repeat: repeat;
    background-image: linear-gradient(to bottom right, rgba(80%,80%,80%,1), rgba(0,0,0,20%));*/
    
    /* This causes a subtle but powerful effect.  Initially the background looks like a solid
     * light grey.  However, when a pizza widget is under it, the left side is very opaque and
     * the right side is very transparent.  The left side should be opaque because that makes
     * the header text easier to read.  The right side can be transparent because there's nothing
     * of value, so why not let the pizza widget show through. */
    background-image: linear-gradient(to right, rgba(80%,80%,80%,1), rgba(0,0,0,0.2));
    
    /* I got a few interesting effects out of blend mode, but nothing that looked good.
    /*mix-blend-mode: hard-light;*/ /* or luminosity */
}
h3 {    
    z-index: 14;
    position: relative;
	text-shadow: 3px 3px 3px white, 3px -3px 3px white, -3px 3px 3px white, -3px -3px 3px white;
}

/* The optional_header class is a neat trick.  It makes a header disappear any time its data is
 * empty, and reappear when the data returns.  To use:  Create a <DIV> with display set to flex.
 * Add the data field first, the header field.  Tag the header field with the class "optional_header".
 * The header will be displayed before the field, if it is displayed at all. */
.optional_header {
	order: -1;
	margin-right: 0.25em
}
:empty + .optional_header {
	display: none;
}

.number {
	text-align: right;
}

/* LinkToGUI.colorExample1() will assign one of this three classes to an element based on the
 * input data.  Customize these as you see fit.
 * Notice the additional examples below.  They both mix positive, negative, and zero with other
 * classes, rather than having one global definition. */
.positive {
	background-color: #AFA;
}
.negative {
	background-color: #FAA;
}
.zero {
	background-color: #AAF;
}

/* This example shows another way to make sure of LinkToGUI.colorExample1().  */
.positive .show_arrow::before {
	content: "⯅";
}
.negative .show_arrow::before {
	content: "⯆";
}

/* Simple formatting around each section. */
.box {
	border: 0.5em inset;
	padding: 0.25em;
}

/* This is the top level element that gets moved around the page.  Some
 * of these values are defaults.  If we have no data, the class will not
 * be positive, negative, or zero, so we'll use these values. */
.pizza {
	border: 0.5em ridge; 
	max-width: 20em;
	padding: 0.25em;
	background-color: white;
	border-color: lightgrey;
}

/* I like this style of limiting the scope of the positive class.  Different
 * components with different styles will all be sharing the names positive,
 * negative, and zero. */
.pizza.positive {
	background-color: lightgreen;
	border-color: green;
}
.pizza.negative {
	background-color: pink;
	border-color: red;
}
.pizza.zero {
	background-color: lightgrey;
	border-color: grey;
}

/* A very simple animation.  Just enough to get the point across. */
.flying_pizza {
	position: fixed;
	animation: flying_pizza 60s linear;
}
@keyframes flying_pizza {
	from {
		top: 100%;
		left: 0%;
	}
	50% {
		top: 0%;
		left: 0%;
	}
	to {
		top: 0%;
		left: 100%;
	}
}

/** Example rules used by the template application (remove for your app) */
h1 {
  font-size: 2em;
  font-weight: bold;
  color: #777777;
  margin: 40px 0px 70px;
  text-align: center;
}

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

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

.dialogVPanel {
  margin: 5px;
}

.serverResponseLabelError {
  color: red;
}

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