/* Clears browser defaults and sets basic house styles for library classes, such as Dialog*/

BODY{
    font-family: Verdana, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 9pt;
    color : black;
}

.WindowFrame{       /* Fills entire visible window. Is set to zIndex - 1000 */
    background: linear-gradient(#B4D2EC, #CAE0F2 10px, #CAE0F2) no-repeat;
  }

  /* ~~~~~ Dialog ~~~~~  */

.Dialog{
    --borderColor:  #88F;
    border: outset 4px var(--borderColor);
    padding: 0;
    background-color: #EEE
}

.Dialog-headerRow{
    background-color: #B4D2EC;
    vertical-align: center;
    padding: 2px;           /* This layout is for 20px image, as is the Button default */
    padding-bottom: 6px;
    border-bottom: solid 2px var(--borderColor);
}

.Dialog-body{
    padding: 4px;
    background: #DDD
}

/* ~~~~~ Grid ~~~~~ */

.Grid-outerBox{
    /* WAS background-color: #EEE; */
    background-color: #EEF8FE;
    font-size: 10pt;
    font-family: Verdana
}

.Grid-Header{
    /* WAS background-color: #D8D8D8; */

	background: linear-gradient(#B4D2EC, #EEF8FE);

    color: black;

    border-right : 2px solid #DDD;

    padding: 2px;

}

.Grid-cell{
    border-top: dotted grey 1px;
}

.Grid-cellContent{
        padding: 2px;
}

.Grid-outerBox .selected{
    background-color: #FFC;     /* Pale yellow */
}

.Grid-row {
    background-color: white;
}

/* Required in grid row (and elsewhere, such as button text?) to prevent text being selected. No CSS standard as at June 2018.
 See: https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting */
 .Button-text,
 .Button-image,
.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* Used in com.valesoft.ui.widget.grid.Header  to indicate an engaged filter*/
.flashYellowBackground {
    background-color: red;          /* Test addition */
    animation-name: flashYellowBackgroundAnim;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
}

@keyframes flashYellowBackgroundAnim {
    from {background-color: yellow;}
    to {background-color: transparent;}
}

/* ~~~~~  TabPanel ~~~~~~~~~~~*/


.TabPanel-headerList {
	border-bottom: 1px solid #00456A;
}


.TabPanel-headerList .Tab{
    padding:0;
    margin:0;
}

.TabPanel-headerList .Tab-label{
    border:1px solid #00456A;
    margin:0;
    cursor:pointer;
    padding-bottom:2px;
    padding-top:2px;
    font-weight:normal;
    text-align:center;
    font-size:1.1em;
    padding-left: 1em;
    padding-right: 1em;
	background: linear-gradient( #EEF8FE, #b4d2ec);
	border-bottom: 1px solid #00456A;

	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.TabPanel-headerList LI.selected *.Tab-label{
    position:relative;
    border-bottom:none;
    top:3px;        /* Important - makes it overlap the border around the bodyPanel*/
    padding-bottom:2px;
    padding-top:5px;
    border-top:2px solid #00456A;
	margin-top:-5px; font-weight:bold;

	background: linear-gradient(#B4D2EC, #EEF8FE)
}


.TabPanel-bodyPanel{
    background-color: #EEF8FE;
    clear: left;
    border: 2px solid #00456A;
    border-top: none;
   }


   /* ~~~~~~~~~~~~~~~~~~~~~~~ Button  ~~~~~~~~~~~~ */

.Button-bordered{
  margin: 2px;
  border : 4px outset #B4D2EC;
  background-color: #CCDEEE;
  }

    /* ~~~~~~~~~~~~~~~~~~~~~~~ Animated SlideDown  message ~~~~~~~~~~~~ */


   .SlideDownMsg{
          position: absolute;
          left: 100px;
          top: -40px;
        /*  width: 200px; */
          padding: 4px;
          padding-left: 10px;
          padding-right: 10px;
          border: 4px outset lightGreen;
          background-color: lightGreen;
          color: blue;
          border-bottom-left-radius: 10px;
          border-bottom-right-radius: 10px;
          border-top: 0px;
          text-align: center;
          font-size: 10pt;
          font-weight: bold;

          animation-name: slideDownAnim;
          animation-duration: 4s;
          }

    @keyframes slideDownAnim{
              0%{ top: -40px; }
              20%{ top: 0px; }
              80%{ top: 0px; }
             1000%{ top: -40px; }
          }

.SlideDownError{
	border-color: red;
	background-color: red;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Menu (in com.valesoft.lib.ui.menu ) ~~~~~~~~~~~ */
.Menu{
    border-spacing: 0;      /* Override browser default */
    background-color: yellow;
    border-collapse: collapse;
}

.Menu ROW,
.Menu IMG{
    cursor : pointer;
}

.Menu TR{
    border: 1px solid black;
    cursor: pointer;
}

.Menu IMG{
    cursor: pointer;
}

.Menu .SubMenuArrow{        /* Right / left triangle ◄ or ► pointing at a sub-menu */
    font-size : larger;
    vertical-align: top;
}

.Menu