/* Produced 161025 */
/**/
/**/
/**/
/**
 * Simple Grid System
 * https://github.com/AlfredoRamos/simple-grid-system
 * @author Alfredo Ramos <alfredo.ramos@yandex.com>
 * @version 1.0.1
 * @copyright (c) 2015 Alfredo Ramos
 * @license GNU GPL-3.0+
 */
/* I have considered rationalising the media queries, but I decided not to, as the scss is somewhat complex and it work at the moment.  */
/* If it ain't broke.... */
.SGSM *, .SGSM *:before, .SGSM *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

.clearfix, .row {
  zoom: 1;
}

.clearfix:before, .row:before, .clearfix:after, .row:after {
  content: "";
  display: table;
}

.clearfix:after, .row:after {
  clear: both;
}

.SGSMContainer-fluid, .SGSMContainer {
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  word-wrap: break-word;
  margin-bottom: 10px;
  margin-bottom: 1rem;
  padding-left: 10px;
  padding-left: 1rem;
  padding-right: 10px;
  padding-right: 1rem;
}

/* rems (in the safari media query) do not work on apple stuff */
@media only screen and (min-width: 768px) {
  .SGSMContainer {
    max-width: 750px;
    max-width: 75rem;
  }
}

@media only screen and (min-width: 992px) {
  .SGSMContainer {
    max-width: 970px;
    max-width: 97rem;
  }
}

@media only screen and (min-width: 1200px) {
  .SGSMContainer {
    max-width: 970px;
    max-width: 97rem;
  }
}

.row {
  overflow: hidden;
  margin-left: -10px;
  margin-left: -1rem;
  margin-right: -10px;
  margin-right: -1rem;
}

[class*="col-"] {
  padding-left: 1rem;
  padding-right: 1rem;
  position: relative;
  overflow: hidden;
}

[class*="col-xs-"] {
  float: left;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

/* when the col- is activated then correct padding after first and last box */
.row [class*="col-xs-"]:first-child {
  padding-left: initial;
}

.row [class*="col-xs-"]:last-child {
  padding-right: initial;
}

.col-xs-1 {
  width: 8.33333%;
}

.col-xs-pull-1 {
  right: 8.33333%;
}

.col-xs-push-1 {
  left: 8.33333%;
}

.col-xs-offset-1 {
  margin-left: 8.33333%;
}

.col-xs-2 {
  width: 16.66667%;
}

.col-xs-pull-2 {
  right: 16.66667%;
}

.col-xs-push-2 {
  left: 16.66667%;
}

.col-xs-offset-2 {
  margin-left: 16.66667%;
}

.col-xs-3 {
  width: 25%;
}

.col-xs-pull-3 {
  right: 25%;
}

.col-xs-push-3 {
  left: 25%;
}

.col-xs-offset-3 {
  margin-left: 25%;
}

.col-xs-4 {
  width: 33.33333%;
}

.col-xs-pull-4 {
  right: 33.33333%;
}

.col-xs-push-4 {
  left: 33.33333%;
}

.col-xs-offset-4 {
  margin-left: 33.33333%;
}

.col-xs-5 {
  width: 41.66667%;
}

.col-xs-pull-5 {
  right: 41.66667%;
}

.col-xs-push-5 {
  left: 41.66667%;
}

.col-xs-offset-5 {
  margin-left: 41.66667%;
}

.col-xs-6 {
  width: 50%;
}

.col-xs-pull-6 {
  right: 50%;
}

.col-xs-push-6 {
  left: 50%;
}

.col-xs-offset-6 {
  margin-left: 50%;
}

.col-xs-7 {
  width: 58.33333%;
}

.col-xs-pull-7 {
  right: 58.33333%;
}

.col-xs-push-7 {
  left: 58.33333%;
}

.col-xs-offset-7 {
  margin-left: 58.33333%;
}

.col-xs-8 {
  width: 66.66667%;
}

.col-xs-pull-8 {
  right: 66.66667%;
}

.col-xs-push-8 {
  left: 66.66667%;
}

.col-xs-offset-8 {
  margin-left: 66.66667%;
}

.col-xs-9 {
  width: 75%;
}

.col-xs-pull-9 {
  right: 75%;
}

.col-xs-push-9 {
  left: 75%;
}

.col-xs-offset-9 {
  margin-left: 75%;
}

.col-xs-10 {
  width: 83.33333%;
}

.col-xs-pull-10 {
  right: 83.33333%;
}

.col-xs-push-10 {
  left: 83.33333%;
}

.col-xs-offset-10 {
  margin-left: 83.33333%;
}

.col-xs-11 {
  width: 91.66667%;
}

.col-xs-pull-11 {
  right: 91.66667%;
}

.col-xs-push-11 {
  left: 91.66667%;
}

.col-xs-offset-11 {
  margin-left: 91.66667%;
}

.col-xs-12 {
  width: 100%;
}

.col-xs-pull-12 {
  right: 100%;
}

.col-xs-push-12 {
  left: 100%;
}

.col-xs-offset-12 {
  margin-left: 100%;
}

.col-xs-pull-0 {
  right: auto;
}

.col-xs-push-0 {
  left: auto;
}

.col-xs-offset-0 {
  margin-left: 0;
}

@media only screen and (min-width: 768px) {
  [class*="col-sm-"] {
    float: left;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
  /* when the col- is activated then correct padding after first and last box */
  .row [class*="col-sm-"]:first-child {
    padding-left: initial;
  }
  .row [class*="col-sm-"]:last-child {
    padding-right: initial;
  }
  .col-sm-1 {
    width: 8.33333%;
  }
  .col-sm-pull-1 {
    right: 8.33333%;
  }
  .col-sm-push-1 {
    left: 8.33333%;
  }
  .col-sm-offset-1 {
    margin-left: 8.33333%;
  }
  .col-sm-2 {
    width: 16.66667%;
  }
  .col-sm-pull-2 {
    right: 16.66667%;
  }
  .col-sm-push-2 {
    left: 16.66667%;
  }
  .col-sm-offset-2 {
    margin-left: 16.66667%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-pull-3 {
    right: 25%;
  }
  .col-sm-push-3 {
    left: 25%;
  }
  .col-sm-offset-3 {
    margin-left: 25%;
  }
  .col-sm-4 {
    width: 33.33333%;
  }
  .col-sm-pull-4 {
    right: 33.33333%;
  }
  .col-sm-push-4 {
    left: 33.33333%;
  }
  .col-sm-offset-4 {
    margin-left: 33.33333%;
  }
  .col-sm-5 {
    width: 41.66667%;
  }
  .col-sm-pull-5 {
    right: 41.66667%;
  }
  .col-sm-push-5 {
    left: 41.66667%;
  }
  .col-sm-offset-5 {
    margin-left: 41.66667%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-pull-6 {
    right: 50%;
  }
  .col-sm-push-6 {
    left: 50%;
  }
  .col-sm-offset-6 {
    margin-left: 50%;
  }
  .col-sm-7 {
    width: 58.33333%;
  }
  .col-sm-pull-7 {
    right: 58.33333%;
  }
  .col-sm-push-7 {
    left: 58.33333%;
  }
  .col-sm-offset-7 {
    margin-left: 58.33333%;
  }
  .col-sm-8 {
    width: 66.66667%;
  }
  .col-sm-pull-8 {
    right: 66.66667%;
  }
  .col-sm-push-8 {
    left: 66.66667%;
  }
  .col-sm-offset-8 {
    margin-left: 66.66667%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-pull-9 {
    right: 75%;
  }
  .col-sm-push-9 {
    left: 75%;
  }
  .col-sm-offset-9 {
    margin-left: 75%;
  }
  .col-sm-10 {
    width: 83.33333%;
  }
  .col-sm-pull-10 {
    right: 83.33333%;
  }
  .col-sm-push-10 {
    left: 83.33333%;
  }
  .col-sm-offset-10 {
    margin-left: 83.33333%;
  }
  .col-sm-11 {
    width: 91.66667%;
  }
  .col-sm-pull-11 {
    right: 91.66667%;
  }
  .col-sm-push-11 {
    left: 91.66667%;
  }
  .col-sm-offset-11 {
    margin-left: 91.66667%;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-pull-12 {
    right: 100%;
  }
  .col-sm-push-12 {
    left: 100%;
  }
  .col-sm-offset-12 {
    margin-left: 100%;
  }
  .col-sm-pull-0 {
    right: auto;
  }
  .col-sm-push-0 {
    left: auto;
  }
  .col-sm-offset-0 {
    margin-left: 0;
  }
}

@media only screen and (min-width: 992px) {
  [class*="col-md-"] {
    float: left;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  /* when the col- is activated then correct padding after first and last box */
  .row [class*="col-md-"]:first-child {
    padding-left: initial;
  }
  .row [class*="col-md-"]:last-child {
    padding-right: initial;
  }
  .col-md-1 {
    width: 8.33333%;
  }
  .col-md-pull-1 {
    right: 8.33333%;
  }
  .col-md-push-1 {
    left: 8.33333%;
  }
  .col-md-offset-1 {
    margin-left: 8.33333%;
  }
  .col-md-2 {
    width: 16.66667%;
  }
  .col-md-pull-2 {
    right: 16.66667%;
  }
  .col-md-push-2 {
    left: 16.66667%;
  }
  .col-md-offset-2 {
    margin-left: 16.66667%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-pull-3 {
    right: 25%;
  }
  .col-md-push-3 {
    left: 25%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-4 {
    width: 33.33333%;
  }
  .col-md-pull-4 {
    right: 33.33333%;
  }
  .col-md-push-4 {
    left: 33.33333%;
  }
  .col-md-offset-4 {
    margin-left: 33.33333%;
  }
  .col-md-5 {
    width: 41.66667%;
  }
  .col-md-pull-5 {
    right: 41.66667%;
  }
  .col-md-push-5 {
    left: 41.66667%;
  }
  .col-md-offset-5 {
    margin-left: 41.66667%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-pull-6 {
    right: 50%;
  }
  .col-md-push-6 {
    left: 50%;
  }
  .col-md-offset-6 {
    margin-left: 50%;
  }
  .col-md-7 {
    width: 58.33333%;
  }
  .col-md-pull-7 {
    right: 58.33333%;
  }
  .col-md-push-7 {
    left: 58.33333%;
  }
  .col-md-offset-7 {
    margin-left: 58.33333%;
  }
  .col-md-8 {
    width: 66.66667%;
  }
  .col-md-pull-8 {
    right: 66.66667%;
  }
  .col-md-push-8 {
    left: 66.66667%;
  }
  .col-md-offset-8 {
    margin-left: 66.66667%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-pull-9 {
    right: 75%;
  }
  .col-md-push-9 {
    left: 75%;
  }
  .col-md-offset-9 {
    margin-left: 75%;
  }
  .col-md-10 {
    width: 83.33333%;
  }
  .col-md-pull-10 {
    right: 83.33333%;
  }
  .col-md-push-10 {
    left: 83.33333%;
  }
  .col-md-offset-10 {
    margin-left: 83.33333%;
  }
  .col-md-11 {
    width: 91.66667%;
  }
  .col-md-pull-11 {
    right: 91.66667%;
  }
  .col-md-push-11 {
    left: 91.66667%;
  }
  .col-md-offset-11 {
    margin-left: 91.66667%;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-pull-12 {
    right: 100%;
  }
  .col-md-push-12 {
    left: 100%;
  }
  .col-md-offset-12 {
    margin-left: 100%;
  }
  .col-md-pull-0 {
    right: auto;
  }
  .col-md-push-0 {
    left: auto;
  }
  .col-md-offset-0 {
    margin-left: 0;
  }
}

@media only screen and (min-width: 1200px) {
  [class*="col-lg-"] {
    float: left;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  /* when the col- is activated then correct padding after first and last box */
  .row [class*="col-lg-"]:first-child {
    padding-left: initial;
  }
  .row [class*="col-lg-"]:last-child {
    padding-right: initial;
  }
  .col-lg-1 {
    width: 8.33333%;
  }
  .col-lg-pull-1 {
    right: 8.33333%;
  }
  .col-lg-push-1 {
    left: 8.33333%;
  }
  .col-lg-offset-1 {
    margin-left: 8.33333%;
  }
  .col-lg-2 {
    width: 16.66667%;
  }
  .col-lg-pull-2 {
    right: 16.66667%;
  }
  .col-lg-push-2 {
    left: 16.66667%;
  }
  .col-lg-offset-2 {
    margin-left: 16.66667%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-pull-3 {
    right: 25%;
  }
  .col-lg-push-3 {
    left: 25%;
  }
  .col-lg-offset-3 {
    margin-left: 25%;
  }
  .col-lg-4 {
    width: 33.33333%;
  }
  .col-lg-pull-4 {
    right: 33.33333%;
  }
  .col-lg-push-4 {
    left: 33.33333%;
  }
  .col-lg-offset-4 {
    margin-left: 33.33333%;
  }
  .col-lg-5 {
    width: 41.66667%;
  }
  .col-lg-pull-5 {
    right: 41.66667%;
  }
  .col-lg-push-5 {
    left: 41.66667%;
  }
  .col-lg-offset-5 {
    margin-left: 41.66667%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-pull-6 {
    right: 50%;
  }
  .col-lg-push-6 {
    left: 50%;
  }
  .col-lg-offset-6 {
    margin-left: 50%;
  }
  .col-lg-7 {
    width: 58.33333%;
  }
  .col-lg-pull-7 {
    right: 58.33333%;
  }
  .col-lg-push-7 {
    left: 58.33333%;
  }
  .col-lg-offset-7 {
    margin-left: 58.33333%;
  }
  .col-lg-8 {
    width: 66.66667%;
  }
  .col-lg-pull-8 {
    right: 66.66667%;
  }
  .col-lg-push-8 {
    left: 66.66667%;
  }
  .col-lg-offset-8 {
    margin-left: 66.66667%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-pull-9 {
    right: 75%;
  }
  .col-lg-push-9 {
    left: 75%;
  }
  .col-lg-offset-9 {
    margin-left: 75%;
  }
  .col-lg-10 {
    width: 83.33333%;
  }
  .col-lg-pull-10 {
    right: 83.33333%;
  }
  .col-lg-push-10 {
    left: 83.33333%;
  }
  .col-lg-offset-10 {
    margin-left: 83.33333%;
  }
  .col-lg-11 {
    width: 91.66667%;
  }
  .col-lg-pull-11 {
    right: 91.66667%;
  }
  .col-lg-push-11 {
    left: 91.66667%;
  }
  .col-lg-offset-11 {
    margin-left: 91.66667%;
  }
  .col-lg-12 {
    width: 100%;
  }
  .col-lg-pull-12 {
    right: 100%;
  }
  .col-lg-push-12 {
    left: 100%;
  }
  .col-lg-offset-12 {
    margin-left: 100%;
  }
  .col-lg-pull-0 {
    right: auto;
  }
  .col-lg-push-0 {
    left: auto;
  }
  .col-lg-offset-0 {
    margin-left: 0;
  }
}

.responsive-media {
  height: 0;
  overflow: hidden;
  position: relative;
  padding-top: 25px;
}

.responsive-media, .responsive-media-16-9 {
  padding-bottom: 56.25%;
}

.responsive-media-4-3 {
  padding-bottom: 75%;
}

.responsive-media video,
.responsive-media iframe,
.responsive-media object,
.responsive-media embed,
.responsive-media .responsive-media -item {
  width: 100%;
  height: 100%;
  border: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Simple Grid System END */
/* Chart Layout */
/*************************************************************/
/*Animation Effect from the RGRAPH download animations.css (we don't need them all*/
.animated {
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  -moz-animation-name: fadeIn;
  -o-animation-name: fadeIn;
  animation-name: fadeIn;
}

/*Animation Effect from the RGRAPH download animations.css (we don't need them all*/
/*************************************************************/
.TextField {
  color: #499437;
  text-align: Left;
  height: 22px;
  line-height: 22px;
}

.Lbl {
  color: #499437;
  height: 22px;
  line-height: 22px;
  text-align: center;
}

.Btn {
  color: #499437;
  border: 1px solid #7dab37;
  background-color: rgba(207, 207, 207, 0.5);
  text-align: center;
  width: 100px;
  height: 22px;
  /*line-height: 22px;*/
  vertical-align: middle;
}

.Btn:hover {
  border: 1px solid #61852a;
  background-color: #add375;
}

.Btn:active {
  border: 1px solid #97c74e;
  background-color: #dbecc2;
}

.Btn:focus {
  border: 2px solid #61852a;
}

.chartHintScreen, .chartHintScreen button {
  position: absolute;
}

.chartHintScreen {
  width: 90%;
  top: 5%;
  left: 5%;
  padding: 3px;
  display: none;
  z-index: 2;
  overflow-y: auto;
  border: 1px solid #499437;
  background-color: #F2F8E9;
  /*FlashStyle UI_STAGE_COLOR */
}

.chartHintScreen .chartHintScreenContent {
  margin-top: 30px;
}

.chartHintScreen .chartHintScreenContent .SGSM.SGSMContainer {
  width: 100%;
}

.chartHintScreen button {
  outline: none;
}

.chartHintScreen button span {
  /*used for the big buttons*/
  position: absolute;
  top: 0px;
}

.chartHintScreen button:not([disabled]):hover {
  cursor: pointer;
}

.chartHintScreen button:disabled {
  opacity: 0.4;
}

.chartPreloader {
  z-index: 999;
}

.chartError {
  /*border: 1px solid blue;*/
  margin: 0 auto;
}

/*************************************/
/*Position and sizes ( for close window buttons) */
/*************************************/
.chartHintScreenClose, .chartHintScreenClose button, .chartHintScreenClose div {
  /*need this to override all divs/buttons being position:absolute*/
  position: relative;
}

.CloseWindow {
  float: right;
}

.CloseWindow:hover {
  cursor: pointer;
}

.btnQuit {
  width: 22px;
  float: right;
  margin: 5px;
  background-image: url("../../ATestingTime/images/x-mark-24-4BlackAlpha40.gif");
  background-position: center;
}

.tfClose {
  float: right;
  padding-top: 6px;
}

/*************************************/
/*Position and sizes ( for close window buttons)  END */
/*************************************/
/*************************************/
/*Chart Layout END */
/*************************************/
/*************************************************************/
/* CollapsiblePanel and Accordion*/
/*************************************************************/
/* This is the selector for the main CollapsiblePanel container. For our
 * default style, the CollapsiblePanel is responsible for drawing the borders
 * around the widget.
 *
 * If you want to constrain the width of the CollapsiblePanel widget, set a width on
 * the CollapsiblePanel container. By default, our CollapsiblePanel expands horizontally to fill
 * up available space.
 *
 * The name of the class ("CollapsiblePanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * CollapsiblePanel container.
 */
.GraphPanels .GraphPanel,
.CollapsiblePanels .CollapsiblePanel {
  margin: 0px;
  padding: 0px;
  background-color: transparent;
}

/* This is the selector for the CollapsiblePanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open or close the panel.
 *
 * The name of the class ("CollapsiblePanelTab") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * CollapsiblePanel panel tab container.
 */
.GraphPanels .GraphPanel .GraphPanelTab,
.CollapsiblePanels .CollapsiblePanel .CollapsiblePanelTab {
  -moz-user-select: none;
  -khtml-user-select: none;
  /*background-color: inherit;*/
  background-color: white;
  background-image: none;
  background-repeat: no-repeat;
  padding-top: 8px;
  padding-right: 0px;
  padding-bottom: 8px;
  padding-left: 50px;
  background-position: left top;
  /* font-size: 16px; */
  color: #000;
  font-weight: normal;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  border-top-color: black;
  border-bottom-color: gray;
  outline: none;
}

.GraphPanels .GraphPanel .GraphPanelTab.ui-accordion-header,
.CollapsiblePanels .CollapsiblePanel .CollapsiblePanelTab {
  cursor: pointer;
}

.CollapsiblePanels .CollapsiblePanel .CollapsiblePanelTab {
  background-image: url(images/homepage_09.gif);
  background-repeat: no-repeat;
}

.GraphPanels:not(.ui-accordion) .GraphPanel .GraphPanelTab {
  padding-left: 0px;
}

/* This is the selector for a CollapsiblePanel's Content area. It's important to note that
 * you should never put any padding on the content area element if you plan to
 * use the CollapsiblePanel's open/close animations. Placing a non-zero padding on the content
 * element can cause the CollapsiblePanel to abruptly grow in height while the panels animate.
 *
 * The name of the class ("CollapsiblePanelContent") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style a
 * CollapsiblePanel content container.
 */
.GraphPanels .GraphPanel .GraphPanelContent,
.CollapsiblePanels .CollapsiblePanel .CollapsiblePanelContent {
  background-color: inherit;
  padding: inherit;
  overflow: scroll;
  height: 200px;
  /*	height: auto;
	padding-top: 0px;
	padding-right: 15px;
	padding-bottom: 0px;
	padding-left: 15px;*/
  clear: right;
}

.GraphPanels .GraphPanel .GraphPanelContentBig,
.CollapsiblePanels .CollapsiblePanel .CollapsiblePanelContentBig {
  height: auto;
  /* background-color: inherit; */
  background-color: white;
  background-image: none;
  padding: inherit;
  border: inherit;
  margin-bottom: 5px;
  clear: right;
}

/* An anchor tag can be used inside of a CollapsiblePanelTab so that the
 * keyboard focus ring appears *inside* the tab instead of around the tab.
 * This is an example of how to make the text within the anchor tag look
 * like non-anchor (normal) text.
 */
.GraphPanels .GraphPanel .GraphPanelTab a,
.CollapsiblePanels .CollapsiblePanel .CollapsiblePanelTab a {
  color: black;
  text-decoration: none;
}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open. The class "CollapsiblePanelOpen" is programatically added and removed
 * from panels as the user clicks on the tabs within the CollapsiblePanel.
 */
.CollapsiblePanels .CollapsiblePanel.CollapsiblePanelOpen .CollapsiblePanelTab,
.CollapsiblePanels .CollapsiblePanel .CollapsiblePanelTab.ui-accordion-header-active {
  background-image: url(images/homepage_09R.gif);
}

/* This is an example of how to change the appearance of the panel tab when the
 * CollapsiblePanel is closed. The "CollapsiblePanelClosed" class is programatically added and removed
 * whenever the CollapsiblePanel is closed.
 */
.GraphPanels .GraphPanel.GraphPanelClosed .GraphPanelTab,
.CollapsiblePanels .CollapsiblePanel.CollapsiblePanelClosed .CollapsiblePanelTab {
  /* background-color: #EFEFEF */
}

/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "CollapsiblePanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.GraphPanels .GraphPanel .GraphPanelTabHover,
.GraphPanels .GraphPanel .GraphPanelTab.ui-state-hover,
.GraphPanelOpen .GraphPanelTabHover,
.CollapsiblePanels .CollapsiblePanel .CollapsiblePanelTabHover,
.CollapsiblePanels .CollapsiblePanel .CollapsiblePanelTab.ui-state-hover,
.CollapsiblePanelOpen .CollapsiblePanelTabHover {
  background-color: rgba(230, 230, 230, 0.5);
}

.GraphPanels .GraphPanel .GraphPanelTabHover,
.CollapsiblePanels .CollapsiblePanel .CollapsiblePanelTabHover {
  background-image: url(images/homepage_09bright.gif);
}

/* This is an example of how to change the appearance of all the panel tabs when the
 * CollapsiblePanel has focus. The "CollapsiblePanelFocused" class is programatically added and removed
 * whenever the CollapsiblePanel gains or loses keyboard focus.
 */
.GraphPanels .GraphPanel .GraphPanelFocused .GraphPanelTab,
.CollapsiblePanels .CollapsiblePanel .CollapsiblePanelFocused .CollapsiblePanelTab {
  outline: none;
}

.ui-widget-content a {
  color: #499437;
}

/*************************************************************/
/* CollapsiblePanel and Accordion END */
/*************************************************************/
/*************************************************************/
/* ATTStyleSheet_base */
/*************************************************************/
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  -webkit-tap-highlight-color: transparent;
  /*preventblinking effect on ipad*/
  margin: 0px;
  padding: 0;
  text-align: left;
  /* font-family: "Century Gothic", Arial, Helvetica, sans-serif; */
  font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  font-size: 190%;
  color: #000000;
}

h1,
h2,
h3 {
  margin-top: 0;
  color: #499437;
}

h1 {
  /*font-size: 1.6em;*/
  font-weight: normal;
}

h2 {
  font-size: 1.6em;
  margin-bottom: 14px;
}

h3 {
  font-size: 1em;
}

a {
  outline: none;
  text-decoration: none;
  color: #499437;
  cursor: pointer;
}

a:hover,
a:active,
a:focus {
  border-bottom: none;
  text-decoration: underline;
  /*font-weight: bold;*/
}

a img {
  border: none;
}

img.left {
  float: left;
  margin: 0 20px 0 0;
}

img.right {
  float: right;
  margin: 0 0 0 20px;
}

/* Header */
#header {
  height: 111px;
  /* background: url('../../Branding/attGreenYellow/images/img02.jpg') no-repeat left top; */
  background-color: #8cbc35;
  font-size: 14px;
}

#headerSmall {
  height: 68px;
  /* background: url('../../Branding/attGreenYellow/images/img02Small.jpg') no-repeat left top; */
  background-color: #8cbc35;
  font-size: 14px;
}

#header, #headerSmall {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background-size: 100% 100%;
}

#smallLogin {
  position: absolute;
  top: 10px;
  right: 5px;
  margin-right: 5px;
  margin-top: 10px;
  text-decoration: none;
  /* font-family: "Century Gothic", Arial, Helvetica, sans-serif; */
  /* font-size: 12px; */
  color: #000000;
  display: none;
  border: solid #c4dd94;
  /* background-image: url('../../Branding/attGreenYellow/images/orangeDiag2.gif'); */
  background-color: white;
  z-index: 100;
  width: 700px;
}

#smallLogin tr td:first-child {
  width: 20%;
}

#smallLogin table {
  width: 100%;
}

/* Logo **********************************************************************************/
#logo {
  top: 40px;
}

#logo, #logoSmall {
  position: relative;
  margin: 0 auto;
  width: 980px;
  /*see smoothmenu size (different for EL)*/
}

#logo span, #logoSmall span {
  font-size: 3.6em;
  /* so that the logo can have something to work off */
}

#logo span.logoStart, #logo span.logoEnd, #logoSmall span.logoStart, #logoSmall span.logoEnd {
  color: #FFD166;
}

#logo span.logoMid, #logoSmall span.logoMid {
  color: #FF8A14;
}

#logo span.logoSuffix, #logoSmall span.logoSuffix {
  font-size: 1.2em;
  color: #ffffff;
}

/* Menu *********************************************************/
#menuSmall {
  width: 100%;
  height: 24px;
  margin: 0 auto;
  border-bottom-style: solid;
  border-bottom-color: #D0D2D7;
  border-bottom-width: thin;
  padding-top: 5px;
  padding-right: 0px;
  padding-bottom: 7px;
  padding-left: 0px;
}

#menuSmall ul {
  padding-left: 30px;
  list-style: none;
  margin: 0px;
  color: #FFF;
}

#menuSmall li {
  display: inline;
}

#menuSmall a {
  height: 23px;
  padding-top: 8px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  width: 110px;
  /*background-color: #ecffff;*/
  background-image: url("../../ATestingTime/images/menu_select.gif");
  text-align: center;
  display: block;
  float: left;
  margin: 0px;
  text-decoration: none;
  font-family: "Century Gothic", Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #000000;
  background-repeat: no-repeat;
  /*background-position: left 30%;*/
}

#menuSmall a:hover {
  background-image: url("../../ATestingTime/images/menu_down.gif");
  color: #FFffff;
  font-size: 12px;
  font-weight: normal;
}

#menuSmall .current_page_item a {
  cursor: default;
  background-image: url("../../ATestingTime/images/menu_select.gif");
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #FFF;
  /*background-image: url('../../ATestingTime/images/homepage_04.gif');*/
}

#menuSmall .current_page_item a {
  font-size: 12px;
}

#menuSmall .current_page_item a:hover {
  color: #000000;
  font-size: 12px;
  font-weight: normal;
}

/* End Menu ******************************************************/
/* Wrapper */
#wrapper {
  width: 100%;
  margin: 0 auto;
}

#page {
  width: 100%;
  margin: 0 auto;
  background: #FFFFFF;
  padding-top: 20px;
  padding-right: initial;
  padding-bottom: 20px;
  padding-left: initial;
}

#openSmallLogin {
  position: absolute;
  top: 0px;
  right: 1rem;
  width: auto;
}

.links,
#openSmallLogin a,
#smallLogin a {
  background-image: none;
  color: #499437;
  padding: 4px 0px;
  cursor: pointer;
  width: auto;
}

#FAQAccordion1 {
  font-family: inherit;
  font-size: 1em;
  /* overflow:	inherit; */
}

#FAQAccordion1 .GraphPanelTab {
  /* this is a special dark green as the majority of the text on the page is links */
  /* font-size: 16px; */
  color: #2F5F23;
}

#FAQAccordion1 .ui-state-active .ui-icon, #FAQAccordion1 .ui-button:active .ui-icon {
  background-image: url("../../ATestingTime/Scripts/jquery/jquery-ui-1.13.2.custom/images/ui-icons_444444_256x240.png");
}

#FAQAccordion1 .ui-icon {
  float: right;
  margin-top: .25em;
}

#FAQAccordion1 .GraphPanel {
  width: 63%;
  padding-bottom: 5px;
  padding-top: 5px;
  border-bottom: 1px solid #eee;
}

#FAQAccordion1 .ui-accordion-header {
  padding: 0px;
}

.links:hover,
.links:active,
.links:focus,
#openSmallLogin a:hover,
#openSmallLogin a:active,
#openSmallLogin a:focus,
#smallLogin a:hover,
#smallLogin a:active,
#smallLogin a:focus,
#FAQAccordion1 .GraphPanelTab:active,
#FAQAccordion1 .GraphPanelTab:hover,
#FAQAccordion1 .GraphPanelTab:focus {
  width: auto;
  border-bottom: none;
  background-image: none;
  color: #000000;
}

.topbar {
  width: 100%;
  /* height: 106px; */
  position: relative;
  padding-left: 0px;
  padding-top: 0px;
  display: block;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 25px;
  margin-left: auto;
}

.topbarImage {
  background-image: url("../../Branding/attGreenYellow/images/Logo1.png");
  background-repeat: no-repeat;
  width: 106px;
  height: 106px;
  position: absolute;
  /*position:relative;*/
  /*float: left;*/
  /*margin-top: 10px;*/
  margin-right: 40px;
  display: none;
}

.topbarText {
  position: relative;
  /* position: absolute; */
  width: 80%;
  margin: 0 auto;
  /* height: 70px; */
  /*float: left;*/
  padding-left: 3px;
  padding-right: 3px;
  display: block;
  /* left: 120px; */
  /* top: 20%; */
  font-size: 18px;
  font-weight: normal;
  padding-top: 10px;
  padding-bottom: 10px;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-top-color: #F47F00;
  border-bottom-color: #F47F00;
  color: #666;
  text-align: center;
}

.topbarText font {
  font-weight: bolder;
}

.topbarText.fourLines {
  font-size: .8em;
}

.item a {
  color: #000000;
  /*override the blue color*/
  text-decoration: none;
}

.item:hover {
  background-color: #EEE;
}

.itemText {
  float: none;
  display: block;
}

/* Footer */
#footer {
  height: 70px;
  width: 98%;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding-top: 0;
  padding-right: 0px;
  padding-bottom: 0;
  padding-left: 0px;
}

#footer p {
  margin: 0;
  padding: 25px 0 0 0;
  text-align: center;
  font-size: smaller;
}

#footer a {
  color: #499437;
}

#footer .link {
  float: right;
}

#footer .copyright {
  float: left;
  color: #499437;
}

/* this is set like this to help find any problems. It can be deleted if this id is not used*/
#box {
  border: thick solid #ff0000;
  width: 120px;
}

.inputFormField {
  -moz-opacity: 0.5;
  filter: alpha(opacity=50);
  border: thin solid #000000;
  width: 100%;
  font-size: 1em;
}

/* This can be removed when all references to DJB_Graphics = 'Flash' are removed. Probably only used for MSIE<9 */
.TestSwf {
  width: 800px;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
}

.OrangeText {
  color: #F47F00;
}

.GreenText {
  color: #499437;
}

.orangeBorder {
  padding: 5px;
  margin-bottom: 15px;
  background-color: #FEF4E7;
  border: 3px solid #F47F00;
}

.orangeTopBot {
  padding: 5px;
  margin-bottom: 15px;
  background-color: #FEF4E7;
  border-top-width: 1px;
  border-right-width: 3px;
  border-bottom-width: 1px;
  border-left-width: 3px;
  border-top-style: solid;
  border-right-style: none;
  border-bottom-style: solid;
  border-left-style: none;
  border-top-color: #F47F00;
  border-right-color: #F47F00;
  border-bottom-color: #F47F00;
  border-left-color: #F47F00;
}

.greenBorder {
  padding: 5px;
  margin-bottom: 15px;
  background-color: #F2F8E9;
  border: 3px solid #499437;
}

.greenTopBot {
  padding: 5px;
  margin-bottom: 15px;
  border-right-width: 3px;
  border-left-width: 3px;
  border-right-style: none;
  border-left-style: none;
  border-right-color: #499437;
  border-left-color: #499437;
}

.snailTrail {
  font-size: 9px;
}

label.error {
  font-weight: bold;
  color: #b80000;
}

.error {
  font-weight: bold;
  color: #b80000;
}

.floatRight {
  float: right;
}

.floatLeft {
  float: Left;
}

/* Slideshow ------------------------- */
#slideshow {
  position: relative;
  height: 120px;
}

#slideshow IMG {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  width: 100%;
  max-width: 150px;
  opacity: 0.0;
}

#slideshow IMG.active {
  z-index: 10;
  opacity: 1.0;
}

#slideshow IMG.last-active {
  z-index: 9;
}

/* Slideshow ------------------------- */
/* fieldset -------------------------- */
.standardFieldset {
  margin: 2px 0px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid #F47F00;
}

.standardFieldset legend {
  color: #000;
}

/* fieldset -------------------------- */
/* tooltip ------------------------------ */
/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
  display: none;
  z-index: 9999;
  font-size: 12px;
  height: 55px;
  width: 160px;
  padding: 25px;
  color: #111;
  background-color: white;
  background-image: url("../../ATestingTime/images/white.png");
}

/* tooltip ------------------------------ */
/* watermark ---------------------------- */
.watermark {
  pointer-events: none;
  font-size: 30px;
  color: #060606;
  position: fixed;
  z-index: 10000;
  top: 0px;
}

/* watermark ---------------------------- */
.quote {
  font-style: italic;
  padding: 15px;
}

#SingleQuestion :hover {
  border: #499437 4px solid;
  margin-left: -4px;
  margin-top: -4px;
}

/* New Code popup-------------------------------- */
.newCodePopupContainer {
  position: absolute;
  display: none;
  width: 900px;
  z-index: 999;
}

.newCodePopup {
  padding: 10px;
  margin: 10px;
  overflow: auto;
}

/* New Code popup-------------------------------- */
/* buttons and labels colors */
input[type="submit"],
.formButton {
  border: 1px solid #7dab37;
  background-color: #c4df9c;
  outline: none;
  font-size: 100%;
}

input[type="submit"]:hover,
.formButton:hover {
  border: 1px solid #61852a;
  background-color: #add375;
  cursor: pointer;
}

input[type="submit"]:active,
.formButton:active {
  border: 1px solid #97c74e;
  background-color: #dbecc2;
}

input[type="submit"]:focus,
.formButton:focus {
  border: 2px solid #61852a;
}

.newCodePopup {
  border: 1px solid #499437;
  background-color: #F2F8E9;
}

.Orange input[type="submit"],
.Orange .formButton {
  border: 1px solid #dd8109;
  background-color: #fac785;
}

.Orange input[type="submit"]:hover,
.Orange .formButton:hover {
  border: 1px solid #ac6407;
  background-color: #f8b154;
  cursor: pointer;
}

.Orange input[type="submit"]:active,
.Orange .formButton:active {
  border: 1px solid #f69a23;
  background-color: #fcdeb6;
}

.Orange input[type="submit"]:focus,
.Orange .formButton:focus {
  border: 2px solid #ac6407;
}

.Orange .newCodePopup {
  border: 1px solid #F47F00;
  background-color: #FEF4E7;
}

#spinner {
  position: absolute;
  z-index: 10000;
  left: 50%;
  display: none;
}

#spinner img {
  position: relative;
  left: -50%;
}

/* this is the are that wraps the menu */
#menuArea {
  position: relative;
  width: 100%;
  margin: 0 auto;
  /* background-color:$GreenBackgroundColor; */
  border-color: #499437;
  border-bottom-style: solid;
  border-bottom-width: thin;
  padding-top: 30px;
  padding-right: 0px;
  padding-left: 0px;
  z-index: 2;
}

#subMenuArea {
  position: relative;
  width: 100%;
  margin-top: 0;
  margin-right: auto;
  padding-right: 0px;
  padding-left: 0px;
  z-index: 1;
}

.ddsmoothmenu {
  width: 980px;
  margin: 0 auto;
}

/* ######### ddlevelsmenu CSS overrides ######### start */
/* ######### Drop Down DIVs CSS ######### start */
.ddsubmenustyle li a {
  background-color: #f1f1f1;
  padding: 6px 5px;
}

.ddsubmenustyle li a:hover {
  background-color: #e1e1e1;
  color: initial;
}

/* ######### Drop Down DIVs CSS ######### end */
/* ######### Mobile Menu CSS  ######### start*/
nav.mobilelevelsmenu ul {
  background: #FEF4E7;
  font-weight: normal;
}

nav.mobilelevelsmenu ul li a {
  background: #FEF4E7;
  color: #222;
}

nav.mobilelevelsmenu ul li a:hover {
  background: #F47F00;
  color: #eee;
}

nav.mobilelevelsmenu ul li.breadcrumb {
  background: #F47F00;
  color: #eee;
  font-weight: normal;
}

/* ######### Mobile Menu CSS  ######### end */
/* ######### Menu Tabs Main Menu Bar CSS ######### replaces ddlevelsmenu-topbar.css */
.menuTabs ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: hidden;
  width: 100%;
}

.menuTabs li {
  display: inline;
  margin: 0;
}

.menuTabs li a {
  /* width:122px; */
  float: left;
  display: block;
  text-decoration: none;
  margin: 0;
  text-align: center;
  padding: 6px 8px;
  /*padding inside each tab*/
  color: #222;
  /* background: #f1f1f1; */
}

.menuTabs li a:hover {
  background: #e1e1e1;
  /*background of tabs for hover state */
}

.menuTabs a.selected {
  background: #e1e1e1;
  /*background of tab with "selected" class assigned to its LI */
}

/* ######### Menu Tabs Main Menu Bar CSS ######### replaces ddlevelsmenu-topbar.css */
#subMenuArea .menuTabs ul {
  background: initial;
}

#subMenuArea .menuTabs ul li a {
  border-bottom: 1px solid #D0D2D7;
}

/* ######### ddlevelsmenu CSS overrides ######### END */
.box1 {
  padding: 1em;
  background-color: white;
  border-bottom: solid #499437 1px;
}

.box1-noborder {
  padding: 1em;
  background-color: white;
}

/* when its NOT in a .row put some space above (.row does it otherwise) */
:not(.row) > [class*="col-"] > .box1 {
  margin-top: 0.5em;
}

.row {
  margin-bottom: 0.5em;
  padding-bottom: 0.5em;
  /* border-bottom: solid $GreenBorderColor 1px; */
}

.SGSMContent {
  width: 100%;
  /* background: url('../../Branding/attGreenYellow/images/img02.jpg') no-repeat left top; */
  background-color: white;
  background-size: 100% 100%;
  padding-top: 0.1px;
  /*zero stops the margin working*/
}

.SGSM.SGSMContainer {
  width: 90%;
  margin-top: 1em;
}

fieldset .SGSM.SGSMContainer {
  width: 100%;
  margin-top: 1em;
}

/*li-scroller.css*/
ul.newsticker {
  font-weight: normal;
}

.tickercontainer, .tickercontainer .mask {
  width: 100%;
  left: initial;
}

/*li-scroller.css*/
/* Chart Layout (but not in that css)*/
.htmlChart {
  overflow: auto;
}

/* Chart Layout */
.document {
  width: 80%;
  margin: 0 auto;
}

/*some small text on the Guided Course form */
#frmGCSLess, #frmGCSMore {
  font-size: .8em;
}

input {
  font: inherit;
}

/* when in a table this will help line up the fields */
form table select, form table input {
  font: inherit;
  margin-left: 8px;
}

form table input[type=checkbox] {
  margin-left: 12px;
}

/*************************************************************/
/* ATTStyleSheet_base END*/
/*************************************************************/
/**************************************************************************/
/* Media Queries */
/**************************************************************************/
/* NB note that 1rem= 10px as _SGSM_grids.scss has modified html{font-size} */
/* the rem in the css is relative to what the font size in html{} is */
/* (min-widths ascend in size, max-widths descend) */
@media only screen and (max-width: 992px) {
  .SGSM.SGSMContainer {
    width: 96%;
  }
  .ddsmoothmenu {
    width: 100%;
  }
  #logo, #logoSmall {
    width: 100%;
    white-space: nowrap;
  }
  .menuTabs ul li a {
    width: initial;
    padding: 6px 2%;
  }
}

@media only screen and (max-width: 768px) {
  body {
    font-size: 150%;
    /*of parent i.e. html=root, so in this case 15px*/
  }
  .topbar {
    width: 100%;
  }
  .topbarImage {
    display: none;
  }
  .topbarText {
    width: 100%;
    font-size: .8em;
  }
  .topbarText.fourLines {
    font-size: .5em;
  }
  #header {
    /* make it more like #headerSmall */
    height: 9vw;
  }
  #logo {
    top: -3px;
  }
  #logo span, #logoSmall span {
    font-size: 6vw;
  }
  #logo span.logoSuffix, #logoSmall span.logoSuffix {
    font-size: 2vw;
  }
  #menuArea, #subMenuArea {
    padding-bottom: 30px;
  }
  .animateddrawer {
    top: -.2em;
    background: initial;
    float: right;
    margin-right: 1rem;
    z-index: 50;
  }
  #smoothmenu1 .animateddrawer span {
    background: #8cbc35;
  }
  #smoothmenu1 .animateddrawer span:after {
    background: #8cbc35;
  }
  #smoothmenu1 .animateddrawer:before {
    background: #8cbc35;
  }
  #smoothmenu1 .animateddrawer:after {
    background: #8cbc35;
  }
  #smoothmenu2 .animateddrawer span {
    background: #F47F00;
  }
  #smoothmenu2 .animateddrawer span:after {
    background: #F47F00;
  }
  #smoothmenu2 .animateddrawer:before {
    background: #F47F00;
  }
  #smoothmenu2 .animateddrawer:after {
    background: #F47F00;
  }
  #smallLogin {
    width: 90%;
  }
  #FAQAccordion1 .GraphPanel {
    width: 100%;
  }
}

/**************************************************************************/
/* Media Queries END*/
/**************************************************************************/