/***********************************************************************
 ** Etresoft, Inc.
 ** Copyright (c) 2019. All rights reserved.
 **********************************************************************/

/* Set the basic display options and text color for all elements. */
span.label,
p.label,
button,
input[type="checkbox"] + label,
input[type="radio"] + label,
input[type="text"]
  {
  display: block;

  font-family: -apple-system, Helvetica, Arial, sans-serif;
  font-size: 13px;

  color: <controlText>;
  }

/* Style a button. */
button
  {
  display: inline-block;

  background: linear-gradient(to bottom, <buttonInnerShadowTop> 0%,<buttonBackground> 10%,<buttonBackground> 100%);

  border-radius: 4px;
  border: .5px solid <buttonBorder>;
  border-top-color: <buttonBorderTop>;
  border-bottom-color: <buttonBorderBottom>;

  box-shadow: 0px 1px 2px -2px <shadowColor>;

  padding-top: 1px;
  padding-left: 13px;
  padding-right: 13px;
  padding-bottom: 2px;

  cursor: pointer;

  text-decoration: none;
  white-space: nowrap;
  }

/* Style a disabled button. */
button:disabled
  {
  color: <disabledButtonTextColor>;
  background: linear-gradient(to bottom, <disabledButtonInnerShadowTop> 0%,<disabledButtonBackground> 10%,<disabledButtonBackground> 100%);

  border: .5px solid <disabledButtonBorder>;
  border-top-color: <disabledButtonBorderTop>;
  border-bottom-color: <disabledButtonBorderBottom>;

  box-shadow: 0px 1px 2px -2px <shadowColor>;
  }

/* Pressed button. */
button:active
  {
  color: <activeButtonTextColor>;

  background: linear-gradient(to bottom, <activeControlGradientStartColor> 0%, <activeControlGradientStopColor> 100%);

  border: .5px solid <controlColor>;
  border-left-color: <activeControlGradientStopColor>;
  border-right-color: <activeControlGradientStopColor>;
  border-bottom-color: <activeControlGradientStopColor>;
  }

/* Hide default checkbox. */
input[type="checkbox"]
  {
  position: relative;
  opacity: 0;
  z-index: 200;
  }

/* Position new checkbox label. */
input[type="checkbox"] + label
  {
  z-index: 100;
  position: relative;
  display: inline-block;
  padding-top: 1px;
  margin-left: -17px;

  padding-left: 18px;
  }

/* New checkbox background. */
input[type="checkbox"] + label::before
  {
  position: absolute;
  content: "";

  display: inline-block;

  left: 0px;
  top: 1px;
  height: 13px;
  width: 13px;

  background: <controlBackground>;

  border: .5px solid <checkboxBorder>;
  border-top-color: <checkboxBorderTop>;
  border-bottom-color: <checkboxBorderBottom>;
  border-radius: 3px;

  box-shadow: inset 0px 1px 2px -2px <shadowColor>;
  }

/* New checkbox unchecked. */
input[type="checkbox"] + label::after
  {
  position: absolute;
  content: "";

  display: inline-block;
  }

/* New checkbox background checked. */
input[type="checkbox"]:checked + label::before
  {
  background: inherit;
  background-color: <controlColor>;

  border: .5px solid <controlColor>;
  }

/* New checkbox checked. */
input[type="checkbox"]:checked + label::after
  {
  position: absolute;
  content: "";

  display: inline-block;

  left: 2.5px;
  top: 4px;
  height: 3.5px;
  width: 7.5px;

  color: white;

  border-left: 2px solid;
  border-bottom: 2px solid;
  box-shadow: -1px 1px 1px -1px <shadowColor>;

  transform: rotate(-42deg) skewY(-15deg);
  }

/* New checkbox disabled label. */
input[type="checkbox"]:disabled + label
  {
  color: <disabledControlText>;
  }

/* New checkbox disabled background. */
input[type="checkbox"]:disabled + label::before,
input[type="checkbox"]:disabled:active + label::before,
input[type="checkbox"].pactive:disabled + label::before
  {
  background: <disabledControlBackground>;

  border: .5px solid <disabledCheckboxBorder>;
  border-top-color: <disabledCheckboxBorderTop>;
  border-bottom-color: <disabledCheckboxBorderBottom>;

  box-shadow: inset 0px 1px 2px -2px <shadowColor>;
  }

/* New checkbox disabled background checked. */
input[type="checkbox"]:checked:disabled + label::before,
input[type="checkbox"]:checked:disabled:active + label::before,
input[type="checkbox"].pactive:checked:disabled + label::before
  {
  background: <disabledControlBackground>;

  border: .5px solid <disabledCheckboxBorder>;
  border-top-color: <disabledCheckboxBorderTop>;
  border-bottom-color: <disabledCheckboxBorderBottom>;

  box-shadow: inset 0px 1px 2px -2px <shadowColor>;
  }

/* New checkbox disabled checked. */
input[type="checkbox"]:checked:disabled + label::after
  {
  border-color: <disabledControlColor>;
  box-shadow: none;
  }

/* New checkbox background active off -> on. */
input[type="checkbox"]:active + label::before,
input[type="checkbox"].pactive + label::before
  {
  background: linear-gradient(to bottom,  <activeControlInnerShadowTop> 0%,<activeControlBackground> 15%,<activeControlBackground> 91%,<activeControlInnerShadowBottom> 100%);

  border: .5px solid <activeCheckboxBorder>;
  border-top-color: <activeCheckboxBorderTop>;
  border-bottom-color: <activeCheckboxBorderBottom>;
  }

/* New checkbox background active on -> off. */
input[type="checkbox"]:checked:active + label::before,
input[type="checkbox"].pactive:checked + label::before
  {
  background: inherit;
  background-color: <activeOnControlColor>;

  border: .5px solid <activeOnControlColor>;
  }

/* Hide default radio button. */
input[type="radio"]
  {
  position: relative;
  opacity: 0;
  z-index: 200;
  }

/* Position new radio button label. */
input[type="radio"] + label
  {
  z-index: 100;
  position: relative;
  display: inline-block;
  padding-top: 1px;
  margin-left: -17px;

  padding-left: 18px;
  }

/* New radio button background. */
input[type="radio"] + label::before
  {
  position: absolute;
  content: "";

  display: inline-block;

  left: -1px;
  top: 0px;
  height: 15px;
  width: 15px;

  background: <controlBackground>;

  border: .5px solid <radioBorder>;
  border-top-color: <radioBorderTop>;
  border-bottom-color: <radioBorderbottom>;
  border-radius: 7.5px;

  box-shadow: inset 0px 1px 2px -2px <shadowColor>;
  }

/* New radio button off. */
input[type="radio"] + label::after
  {
  position: absolute;
  content: "";

  display: inline-block;
  }

/* New radio button background on. */
input[type="radio"]:checked + label::before
  {
  position: absolute;
  content: "";

  display: inline-block;

  left: -1px;
  top: 0px;
  height: 15px;
  width: 15px;

  background: inherit;
  background-color: <controlColor>;

  border: .5px solid <controlColor>;
  border-radius: 7.5px;
  box-shadow: none;
  }

/* New radio button on. */
input[type="radio"]:checked + label::after
  {
  position: absolute;
  content: "";

  display: inline-block;

  left: 4px;
  top: 5px;
  height: 7px;
  width: 7px;

  background: white;
  border-radius: 3px;
  box-shadow: 0px 1px 1px -1px <shadowColor>;
  }

/* New radio button disabled label. */
input[type="radio"]:disabled + label
  {
  color: <disabledControlText>;
  }

/* New radio button background disabled. */
input[type="radio"]:disabled + label::before,
input[type="radio"]:disabled:active + label::before,
input[type="radio"].pactive:disabled + label::before
  {
  border: .5px solid <disabledRadioBorder>;
  border-top-color: <disabledRadioBorderTop>;
  border-bottom-color: <disabledRadioBorderbottom>;
  
  background: inherit;
  background-color: <disabledControlBackground>;

  box-shadow: inset 0px 1px 2px -2px <shadowColor>;
  }

/* New radio button background disabled checked. */
input[type="radio"]:checked:disabled + label::before,
input[type="radio"]:checked:disabled:active + label::before,
input[type="radio"].pactive:checked:disabled + label::before
  {
  border: .5px solid <disabledRadioBorder>;
  border-top-color: <disabledRadioBorderTop>;
  border-bottom-color: <disabledRadioBorderbottom>;
  background-color: <disabledControlBackground>;
  }

/* New radio button disabled checked. */
input[type="radio"]:checked:disabled + label::after
  {
  background-color: <disabledControlColor>;
  box-shadow: none;
  }

/* New radio button active off -> on. */
input[type="radio"]:active + label::before,
input[type="radio"].pactive + label::before
  {
  background: linear-gradient(to bottom,  <activeControlInnerShadowTop> 0%,<activeControlBackground> 15%,<activeControlBackground> 91%,<activeControlInnerShadowBottom> 100%);

  border: .5px solid <activeCheckboxBorder>;
  border-top-color: <activeCheckboxBorderTop>;
  }

/* New radio button background active on -> off. */
input[type="radio"]:checked:active + label::before,
input[type="radio"].pactive:checked + label::before
  {
  background: inherit;
  background-color: <activeOnControlColor>;

  border: .5px solid <activeOnControlColor>;
  }

input[type="text"]
  {
  background-color: <textboxBackground>;
  border: .5px solid <textboxBorder>;
  border-top-color: <textboxBorderTop>;
  border-bottom-color: <textboxBorderBottom>;
  }

input[type="text"]:disabled
  {
  color: <disabledTextbox>;
  background-color: <disabledTextboxBackground>;
  border: .5px solid <disabledTextboxBorder>;
  border-bottom-color: <disabledTextboxBorderBottom>;
  }

.AquaInactive input[type="checkbox"]:checked + label::before
  {
  background: linear-gradient(to bottom, <controlInnerShadowTop> 0%,<controlInnerShadowMid1> 10%,<controlInnerShadowMid2> 71%,<controlInnerShadowBottom> 100%);

  border: .5px solid <checkboxBorder>;
  border-top-color: <checkboxBorderTop>;
  border-bottom-color: <checkboxBorderBottom>;
  }

.AquaInactive input[type="checkbox"]:checked:disabled + label::before
  {
  background: linear-gradient(to bottom,  <disabledControlInnerShadowTop> 0%,<disabledControlBackground> 15%,<disabledControlBackground> 91%,<disabledControlInnerShadowBottom> 100%);

  border: .5px solid <disabledCheckboxBorder>;
  border-top-color: <disabledCheckboxBorderTop>;
  border-bottom-color: <disabledCheckboxBorderBottom>;
  }

/* New checkbox checked. */
.AquaInactive input[type="checkbox"]:checked + label::after
  {
  border-color: <inactiveControl>;
  }

.AquaInactive input[type="checkbox"]:checked:disabled + label::after
  {
  border-color: <disabledControlColor>;
  box-shadow: none;
  }

/* New radio button background on. */
.AquaInactive input[type="radio"]:checked + label::before
  {
  background: linear-gradient(to bottom, <controlInnerShadowTop> 0%,<controlInnerShadowMid1> 10%,<controlInnerShadowMid2> 91%,<controlInnerShadowBottom> 100%);

  border: .5px solid <radioBorder>;
  border-top-color: <radioBorderTop>;
  }

.AquaInactive input[type="radio"]:checked:disabled + label::before
  {
  border: .5px solid rgba(194,194,194,1);
  background: <disabledControlBackground>;
  }

/* New radio button on. */
.AquaInactive input[type="radio"]:checked + label::after
  {
  background-color: <inactiveControl>;
  }

.AquaInactive input[type="radio"]:checked:disabled + label::after
  {
  background-color: <disabledControlColor>;
  box-shadow: none;
  }

/* New checkbox background. */
.DarkAquaActive input[type="checkbox"] + label::before,
.DarkAquaInactive input[type="checkbox"] + label::before
  {
  background: linear-gradient(to bottom, <controlInnerShadowTop> 0%,<controlInnerShadowMid1> 10%,<controlInnerShadowMid2> 91%,<controlInnerShadowBottom> 100%);

  box-shadow: none;
  }

/* New checkbox background checked. */
.DarkAquaActive input[type="checkbox"]:checked + label::before
  {
  background: inherit;
  background-color: <controlColor>;

  border: .5px solid <controlColor>;
  }

/* New checkbox disabled background. */
.DarkAquaActive input[type="checkbox"]:disabled + label::before,
.DarkAquaActive input[type="checkbox"]:disabled:active + label::before,
.DarkAquaActive input[type="checkbox"].pactive:disabled + label::before,
.DarkAquaInactive input[type="checkbox"]:disabled + label::before
  {
  background: linear-gradient(to bottom, <disabledControlInnerShadowTop> 0%,<disabledControlBackground> 15%,<disabledControlBackground> 31%,<disabledControlInnerShadowBottom> 100%);
  
  border: .5px solid <disabledControlBackground>;
  border-top-color: <disabledControlInnerShadowTop>;
  border-bottom-color: <disabledControlInnerShadowBottom>;

  box-shadow: none;
  }

/* New checkbox disabled background checked. */
.DarkAquaActive input[type="checkbox"]:checked:disabled + label::before,
.DarkAquaActive input[type="checkbox"]:checked:disabled:active + label::before,
.DarkAquaActive input[type="checkbox"].pactive:checked:disabled + label::before,
.DarkAquaInactive input[type="checkbox"]:checked:disabled + label::before
  {
  background: linear-gradient(to bottom, <disabledControlInnerShadowTop> 0%,<disabledControlBackground> 15%,<disabledControlBackground> 31%,<disabledControlInnerShadowBottom> 100%);
  
  border: .5px solid <disabledControlBackground>;
  border-top-color: <disabledControlInnerShadowTop>;
  border-bottom-color: <disabledControlInnerShadowBottom>;

  box-shadow: none;
  }

/* New radio button background. */
.DarkAquaActive input[type="radio"] + label::before,
.DarkAquaInactive input[type="radio"] + label::before
  {
  background: linear-gradient(to bottom,  <controlInnerShadowTop> 0%,<controlInnerShadowMid1> 15%,<controlInnerShadowMid2> 91%,<controlInnerShadowBottom> 100%);

  box-shadow: none;
  }

/* New radio button background on. */
input[type="radio"]:checked + label::before
  {
  background: inherit;
  background-color: <controlColor>;
  }

/* New radio button disabled background. */
.DarkAquaActive input[type="radio"]:disabled + label::before,
.DarkAquaActive input[type="radio"]:disabled:active + label::before,
.DarkAquaActive input[type="radio"].pactive:disabled + label::before,
.DarkAquaInactive input[type="radio"]:disabled + label::before
  {
  background: linear-gradient(to bottom, <disabledControlInnerShadowTop> 0%,<disabledControlBackground> 15%,<disabledControlBackground> 31%,<disabledControlInnerShadowBottom> 100%);
  
  border: .5px solid <disabledControlBackground>;
  border-top-color: <disabledControlInnerShadowTop>;
  border-bottom-color: <disabledControlInnerShadowBottom>;

  box-shadow: none;
  }

/* New radio button disabled background checked. */
.DarkAquaActive input[type="radio"]:checked:disabled + label::before,
.DarkAquaActive input[type="radio"]:checked:disabled:active + label::before,
.DarkAquaActive input[type="radio"].pactive:checked:disabled + label::before,
.DarkAquaInactive input[type="radio"]:checked:disabled + label::before
  {
  background: linear-gradient(to bottom, <disabledControlInnerShadowTop> 0%,<disabledControlBackground> 15%,<disabledControlBackground> 31%,<disabledControlInnerShadowBottom> 100%);
  
  border: .5px solid <disabledControlBackground>;
  border-top-color: <disabledControlInnerShadowTop>;
  border-bottom-color: <disabledControlInnerShadowBottom>;

  box-shadow: none;
  }

.DarkAquaInactive input[type="checkbox"]:checked + label::before
  {
  background: linear-gradient(to bottom, <controlInnerShadowTop> 0%,<controlInnerShadowMid1> 10%,<controlInnerShadowMid2> 71%,<controlInnerShadowBottom> 100%);

  border: .5px solid <checkboxBorder>;
  border-top-color: <checkboxBorderTop>;
  border-bottom-color: <checkboxBorderBottom>;
  }

/* New checkbox checked. */
.DarkAquaInactive input[type="checkbox"]:checked + label::after
  {
  color: <inactiveControl>;
  }

.DarkAquaInactive input[type="checkbox"]:checked:disabled + label::after
  {
  border-color: <disabledControlColor>;
  box-shadow: none;
  }

/* New radio button background on. */
.DarkAquaInactive input[type="radio"]:checked + label::before
  {
  background: linear-gradient(to bottom, <controlInnerShadowTop> 0%,<controlInnerShadowMid1> 10%,<controlInnerShadowMid2> 91%,<controlInnerShadowBottom> 100%);

  border: .5px solid <radioBorder>;
  border-top-color: <radioBorderTop>;
  }

/* New checkbox background active off -> on. */
.DarkAquaActive input[type="checkbox"]:active + label::before,
.DarkAquaActive input[type="checkbox"].pactive + label::before
  {
  background: inherit;
  background-color: <activeControlBackground>;
  
  border: .5px solid <activeControlBackground>;
  border-top-color: <activeCheckboxBorderTop>;
  border-bottom-color: <activeCheckboxBorderBottom>;
  }

/* New checkbox background active on -> off. */
.DarkAquaActive input[type="checkbox"]:checked:active + label::before,
.DarkAquaActive input[type="checkbox"].pactive:checked + label::before
  {
  background: inherit;
  background-color: <activeOnControlColor>;

  border: .5px solid <activeOnControlColor>;
  }

/* New radio button on. */
.DarkAquaInactive input[type="radio"]:checked + label::after
  {
  background-color: <inactiveControl>;
  }

.DarkAquaInactive input[type="radio"]:checked:disabled + label::after
  {
  background-color: <disabledControlColor>;
  box-shadow: none;
  }

/* New radio button background active off -> on. */
.DarkAquaActive input[type="radio"]:active + label::before,
.DarkAquaActive input[type="radio"].pactive + label::before
  {
  background: inherit;
  background-color: <activeControlBackground>;

  border: .5px solid <activeControlBackground>;
  border-top-color: <activeCheckboxBorderTop>;
  border-bottom-color: <activeCheckboxBorderBottom>;
  }


/* New radi obutton background active on -> off. */
.DarkAquaActive input[type="radio"]:checked:active + label::before,
.DarkAquaActive input[type="radio"].pactive:checked + label::before
  {
  background: inherit;
  background-color: <activeOnControlColor>;

  border: .5px solid <activeOnControlColor>;
  }

/* Tweak parameters on retina display. */
@media
  only screen and (-webkit-min-device-pixel-ratio: 1.25),
  only screen and ( min-device-pixel-ratio: 1.25),
  only screen and ( min-resolution: 200dpi),
  only screen and ( min-resolution: 1.25dppx)
  {
  /* Tweak button text position. */
  button
    {
    padding-top: 1.5px;
    padding-bottom: 1.5px;
    padding-left: 15px;
    padding-right: 13px;
    }

  /* Tweak checkmark size on retina display. */
  input[type="checkbox"]:checked + label::after
    {
    border-left: 1.5px solid;
    border-bottom: 1.5px solid;
    }

  /* Tweak radio button size. */
  input[type="radio"]:checked + label::after
    {
    left: 4px;
    top: 5px;
    height: 6px;
    width: 6px;
    }
  }

