/*Settings*/

body,
.UseDefaultFont
{
   /* see http://www.microsoft.com/typography/fonts/unix.htm (gsfonts package) */
   font-family: 'Helvetica', 'Arial', 'Nimbus Sans L', sans-serif;
   font-size: 10pt;
   line-height: 1.22;
}

textarea
{
   font-family: 'Helvetica', 'Arial', 'Nimbus Sans L', sans-serif;
}

.PlaceholderLabelWrapper
{
   display: inline-block;
   position: relative;
}

.PlaceholderLabel
{
   color: var(--globals-placeholderlabel-font-color);
   cursor: text;
   font-size: 12px;
   font-weight: normal;
   left: 4px;
   position: absolute;
   top: 2px;
}

.Spinner
{
   display: inline-block;

   &:after
   {
      content: '';
      display: inline-block;
      height: 50px;
      width: 50px;
      border: 10px solid var(--edit-border);
      border-radius: 100px;
      border-top-color: var(--button-focus-color);
      animation: 1.5s ease infinite Spin;
      transform: rotate(-45deg);
   }

   &.Deferred:after
   {
      animation:
         0.5s forwards DelayShow,
         1.5s ease 0.5s infinite Spin,
         0.5s 0.5s FadeIn;
   }

   &.Big:after
   {
      height: 100px;
      width: 100px;
      border-width: 15px;
   }

   &.Small:after
   {
      height: 25px;
      width: 25px;
      border-width: 5px;
   }

   &.Tiny:after
   {
      height: 10px;
      width: 10px;
      border-width: 2px;
   }

   &.SingleChar:after
   {
      height: 1em;
      width: 1em;
      border-width: 2px;
   }

   &.Tiny:after,
   &.SingleChar:after
   {
      border-color: var(--button-focus-color);
      border-right-color: var(--edit-border);
   }

   &.WithPadding:after
   {
      margin: 1em;
   }
}

/*See https://css-tricks.com/centering-in-the-unknown/ for how we center the spinner*/
.Spinner.CenteredInTheUnknown:before,
.Throbber.CenteredInTheUnknown:before
{
   content: ' ';
   display: inline-block;
   height: 100%;
   width: 5px;
   vertical-align: middle;
   margin-left: -5px;
}

.Spinner.CenteredInTheUnknown,
.Throbber.CenteredInTheUnknown
{
   text-align: center;
   white-space: nowrap;
   height: 100%;
   display: block;
}

.Spinner.CenteredInTheUnknown:after,
.Throbber.CenteredInTheUnknown:after
{
   vertical-align: middle;
}

.Throbber
{
   display: inline-block;
   white-space: nowrap;
   vertical-align: middle;
}

.ThrobberInner
{
   display: inline-block;

   height: 15px;
   border-left: 5px solid var(--button-focus-color);
   padding: 0 5px;
   margin-left: 5px;
   vertical-align: middle;

   animation: 1s ease infinite Throb;
   white-space: nowrap;

   &:after,
   &:before
   {
      content: " ";
      display: inherit;
      height: inherit;
      border: inherit;
      animation: inherit;
   }

   &:before
   {
      padding-right: inherit;
      animation-delay: 0.10s;
   }

   &:after
   {
      animation-delay: 0.20s;
   }
}

.Throbber.Big > .ThrobberInner
{
   height: 30px;
   border-left-width: 10px;
   padding: 0 10px;
   margin-left: 10px;
}

.Throbber.Small > .ThrobberInner
{
   height: 10px;
   border-left-width: 3px;
   padding: 0 3px;
   margin-left: 3px;
}
         
.Throbber.Dark > .ThrobberInner
{
   border-left-color: var(--globals-throbber-dark-border-left-color);
   animation: 1s ease infinite ThrobDark;
}

.Throbber.Transparent > .ThrobberInner
{
   border-left-color: transparent;
   animation: 1s ease infinite ThrobTransparent;
}
            
.Throbber.Dark.Transparent > .ThrobberInner
{
   border-left-color: transparent;
   animation: 1s ease infinite ThrobDarkTransparent;
}

.Throbber.Deferred
{
   animation:
      0.5s forwards DelayShow,
      0.5s 0.5s FadeIn;
}
            
.Throbber.Deferred > .ThrobberInner
{
   animation-delay: 0.75s;
}

.Throbber.Deferred > .ThrobberInner:before
{
   animation-delay: 0.85s;
}

.Throbber.Deferred > .ThrobberInner:after
{
   animation-delay: 0.95s;
}

.Slider
{
   padding: 1px;
   position: relative;
   color: var(--globals-slider-bg-color);
   background: currentColor !important;
   border: none !important;
   outline: none;
   box-shadow: none !important;
   cursor: pointer;
   border-radius: 20% / 50%;
}

.Slider[disabled]
{
   cursor: default;
}

.Slider:not([disabled]):focus,
.Slider:not([disabled]):active
{
   outline: 1px dashed currentColor;
   outline-offset: 1px;
}

.Slider::after
{
   content: "";
   background-color: var(--globals-slider-after-bg-color);
   transition: margin-left .25s;
   display: block;
   padding-top: 40%;
   width: 40%;
   border-radius: 50%;
   position: relative;
}

.Slider.On
{
   color: var(--globals-slider-on-font-color);
}
.Slider.On::after
{
   margin-left: 60%;
}

@keyframes Spin
{
   0%   { transform: rotate(-45deg); }
   100% { transform: rotate(315deg); }
}

@keyframes SlideInLeft
{
   0%   { transform: translateX(100%); }
   100%   { transform: translateX(0); }
}

@keyframes DelayShow
{
  0%   { visibility: hidden; }
  99%  { visibility: hidden; }
  100% { visibility: visible; }
}

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

@keyframes ThrobDark
{
   0%, 20% { border-left-color: var(--button-focus-color); }
   40% { border-left-color: var(--edit-border); }
   60%, 100% { border-left-color: var(--button-focus-color); }
}

@keyframes ThrobDarkTransparent
{
   0%, 20% { border-left-color: transparent; }
   40% { border-left-color: var(--button-focus-color); }
   60%, 100% { border-left-color: transparent; }
}

@keyframes Throb
{
   0%, 20% { border-left-color: var(--edit-border); }
   40% { border-left-color: var(--button-focus-color); }
   60%, 100% { border-left-color: var(--edit-border); }
}

@keyframes ThrobTransparent
{
   0%, 20% { border-left-color: transparent; }
   40% { border-left-color: var(--button-focus-color); }
   60%, 100% {
      border-left-color: transparent;
   }
}

.WarningBox
{
   border: 1px solid #D5B584;
   background-color: var(--globals-warningbox-bg-color);
   color: var(--globals-warningbox-font-color);
   padding: 10px;
}

.WarningBox .icon-warning
{
   margin-right: 4px;
}

.ErrorText
{
   font-weight: bold;
   color: var(--globals-errortext-font-color);
}

BUTTON,
INPUT[type=button],
INPUT[type=submit],
.ButtonStyled
{
   --button-internal-bg-color: var(--button-bg);

   color: var(--button-font);
   background: var(--button-internal-bg-color);
   border: 1px solid oklch(from var(--button-internal-bg-color) calc(l - var(--lighten-darken) *  0.1) c h);

   box-sizing: border-box;
   padding: 2px 7px;
   border-radius: 4px;

   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
   outline: none;

   position: relative;

   cursor: pointer;

   &:disabled
   {
      opacity: 50%;
   }

   &:not(:disabled):hover,
   &.Hover:not(:disabled)
   {
      --button-internal-bg-color: oklch(from var(--button-bg) calc(l - var(--lighten-darken) *  0.04) c h);
   }

   &:not(:disabled):focus-visible,
   &.Focus:not(:disabled)
   {
      outline: 2px solid var(--button-focus-color);
      outline-offset: -2px;
   }

   &::-moz-focus-inner
   {
      border: 0;
   }


   &:not(:disabled):active,
   &.Active:not(:disabled)
   {
      --button-internal-bg-color: oklch(from var(--button-bg) calc(l -  0.08) c h);
   }

   &.Primary
   {
      --button-bg: var(--button-primary-bg-color);
   }

   &.Danger
   {
      --button-bg: var(--button-danger-bg-color);
   }

   &.Success
   {
      --button-bg: var(--button-success-bg-color);
   }

   &.Primary,
   &.Danger,
   &.Success
   {
      --button-font: var(--button-light-font);
      --button-focus-color: var(--button-light-font);
      outline-width: 1px !important;
   }

   &.TextOnlyButton
   {
      --button-internal-bg-color: inherit;
      border: 1px solid transparent;
      color: inherit;
   }

   &.NoBorders
   {
      border: none;
      padding: 4px 7px;
   }

   &.HasData:before
   {
      content: '';
      position: absolute;
      top: 1px;
      right: 1px;
      border: 2px solid currentColor;
      border-radius: 2px;
   }
}

INPUT[type=checkbox],
INPUT[type=radio]
{
   --checkbox-internal-border-color: var(--checkbox-border-color);

   appearance: none;

   width: 14px;
   height: 14px;
   margin: 4px;

   display: inline-flex;
   align-items: center;
   justify-content: center;
   vertical-align: middle;

   background-color: var(--edit-bg);

   border: 1px solid var(--checkbox-internal-border-color);
   outline: none;

   &:disabled,
   &.Disabled
   {
      background: oklch(from var(--main-bg) calc(l - var(--lighten-darken) *  0.1) c h);
      opacity: 0.5;
   }

   &:not(:disabled):hover,
   &.Hover:not(:disabled)
   {
      --checkbox-internal-border-color: oklch(from var(--checkbox-border-color) calc(l - var(--lighten-darken) *  0.2) c h);
   }

   &:not(:disabled):focus-visible,
   &.Focus:not(:disabled)
   {
      --checkbox-border-color: var(--button-focus-color);
      outline: 2px solid var(--checkbox-border-color);
      outline-offset: -2px;
   }

   &:checked
   {
      --checkbox-border-color: var(--button-focus-color);
   }

   &:checked::before
   {
      content: "";
      width: 8px;
      height: 8px;
      background-color: var(--checkbox-border-color);
   }
}

INPUT[type=checkbox]:checked:not(:indeterminate)::before
{
   width: 10px;
   height: 10px;
   clip-path: polygon(4.22% 53.04%, 10.59% 46.02%, 42.12% 74.62%, 91.55% 15.11%, 98.78% 25.67%, 42.98% 88.19%);
}

INPUT[type=radio],
INPUT[type=radio]::before
{
   border-radius: 50%;
}

A[href]:not(.ButtonStyled)
{
   color: var(--link-font);

   &:visited
   {
      color: var(--link-font-visited);
   }

   &:focus-visible
   {
      outline: 1px solid var(--button-focus-color);
      outline-offset: -1px;
   }
}

INPUT[type=text],
INPUT[type=search],
INPUT[type=password],
SELECT,
TEXTAREA
{
   border: var(--edit-border) 1px solid;
   padding: 2px 3px;
   background-color: var(--edit-bg);
   color: var(--main-font);

   appearance: none;

   &:not(:disabled):focus,
   &.Focus:not(:disabled)
   {
      outline: 2px solid var(--button-focus-color);
      outline-offset: -2px;
   }

   &:disabled
   {
      background: oklch(from var(--edit-bg) calc(l - var(--lighten-darken) *  0.03) c h);
      opacity: 50%;
   }

   &::-ms-expand,
   &::-ms-clear
   {
      display: none;
   }

   &[type=search]:not(.NoSearchIcon)
   {
      background-image: var(--edit-search-icon);
      background-repeat: no-repeat;
      background-position: 5px center;
      padding-left: 23px;
   }
}

SELECT:not([multiple]),
INPUT.SmartList
{
   padding-right: 18px;
   padding-left: 3px;
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAYAAAB24g05AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABsSURBVChTrdLRDYAgDEXR6gCdkBVZpNuUBdCXlARsGxPx/Chg74fh6DfacNrzs/8DImJvMXeOfzCoai+l9Fqr7aywj3N8NywByCLRMLgAPCPZMIQBmCPZMKQBGJFsGF4vUmuNmNlW3uZNJLoARVM4+kD6tdAAAAAASUVORK5CYII=') !important;
   background-repeat: no-repeat !important;
   background-position: right 0px center !important;
}

BODY.Dark SELECT:not([multiple]),
BODY.Dark INPUT.SmartList
{
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAYAAAB24g05AAAABHNCSVQICAgIfAhkiAAAAEJJREFUKJHdzMENACAIQ1En6DgM0hU7aL0agwlwtFf4b63/FhEe3wFYkkmmTyQtyQD6SCl+Ia04Q9rxjYziExnHlW3fhTfhSPtZIwAAAABJRU5ErkJggg==') !important;
}


TEXTAREA
{
   font-size: inherit;
}

OPTION
{
   padding: 0px 2px 1px 2px;
}

.icon-ContextMenuTrigger
{
   --internal-context-menu-is-active: 1;

   text-align: center;

   /* 16px square */
   display: inline-block;
   width: 16px;
   height: 16px;
   line-height: 16px;
   font-size: 16px;

   &:before
   {
      --internal-context-menu-is-disabled: calc(-1 * (1 - var(--internal-context-menu-is-active)));

      content: "\e936";
      border-radius: 3px;
      color: white;
   }

   BODY:not(.Dark) &:before
   {
      background: hsl(from var(--taskbar-new-sidebar-bg)
                      h /* Maintain the hue */
                      calc(s + (var(--internal-context-menu-is-disabled) * 30)) /* Disabled should increase saturation.  */
                      calc(l + 30 - (var(--internal-context-menu-is-disabled) * 20)) /* Lighten by 30%, 50% when disabled. */
                      );
   }

   BODY.Dark &:before
   {
      /* White with an alpha of 20% (10% if disabled.) */
      background: hsl(0 100% 100% / calc(0.2 - (var(--internal-context-menu-is-disabled) * 0.1)));
   }
}

.SelectedRowHighlighting
{
   --internal-is-current: 0;
   --internal-is-selected: 0;
   --internal-background-color: var(--main-bg);

   /*
      This highlighting logic needs to stay in sync with the iNumWeights logic in grid.js.
   */
   & > TD
   {
      /* 1 weight for being current, two for being selected. */
      --num-weights: calc(var(--internal-is-current) + (var(--internal-is-selected) * 2));
   }

   &:hover > TD
   {
      /* Add a weight if hovered, unless current. */
      --num-weights: calc((var(--internal-is-selected) * 2) + 1);
   }

   & > TD
   {
      --hover-color: hsl(from var(--grid-row-focus-base-bg) h s calc(l - var(--lighten-darken) * (var(--num-weights) * 5))) calc(50% * var(--num-weights) / var(--num-weights));
      background-color: color-mix(in srgb, var(--hover-color), var(--internal-background-color));
   }
}

/* See [[PC0180485]] */
TABLE > COLGROUP
{
   overflow-anchor: none;
}

.CheckboxSprite
{
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAA4CAYAAADuMJi0AAAABHNCSVQICAgIfAhkiAAAA5dJREFUWIXdmF1Mm2UYhq+2X/u1A6T92hQG24CAxKU1YWzLZiQg6oIx8XCQeDaHZmii4UA96U6UA/+zGDVotngosHhioosYgxOGoF22SGEGMlLcSpVBW1p++kOLB6ZoA3T52teacB++ue5eyZs3z9NW09fXt0kOee9LTS41JICOjg5Vpf7+fgB+GWhX1TvePoBWVUNA/nNhLJ7E64sUTuj6cIxPBzyFEX52eZLfZoO8+twRccJQJJZxZekMjd/li6+n+fh8C0qpUZxwxhui640hZuZCW2fT3hA9vW4+crVwaH9JBp+38PjDZbz58km63xrh1myQYDhG99vD9LxyEkedso2X8hUCHHPY+eD1Jl57/xpFJj3n2p080lC+IytECFBfbeaT849x7YafZ1prduWEvtIKexGn2+qyMgWfNJqCD2+Hw5FT8fncfH8/msrKSlUln88HwOlT6nqXv/PtwW2RTG4SXt0onHDcE2TydrgwwsnZCMFwnCMPlYoTxhKpjCtLx7ewzszcCs1HbRgNOnHC5UiCq9cXCUUSW2ehSAL3VIjmRisl+zKnZ95CuyJzwmlh5OYSwXCCWDzFyM0lTjgtKKWGbbyQ4W1XZJoarIz+GkCv0+CsfYBym3FHVti2MJfoaWm04l+MUV2xb1dOmBCgyCRRdzD7RxZ+W0xMTOS0LUanchNKI8PDORWHNF25CQEuXrqkqtR59iwAty8eU9Wr7XTvwW2h0cnozdWFE5a19qAcPVcYoaXxBWTbYRZH3xEn1BnNGVeWTnHN45idzzJ/5UWS6wFxQtlaT+XTvcjKg1tnBqUeW5OL+SsvkVj+PYPPW7jm+5k/h1yUt11Ath1GZ7RQ0XaBhR9cxO5NbuOFzNJ1vxv/t93sP/UuqcQqgeu9rN0Z3ZEVNrzjgWl833RRdLCJ8PRXu3JCX+lGZJ7lqYGsTMEnjQT/zEa1qe10qxf+NDaWk+wPkjn1JACPx3M/LiNOpxOAFc/nqnrFzjN7cVtoJbSywG/e94t8oBlDmcA/hrLFYG9Aa7ISmx8XJ9RIxowrS0cqrUJvcxD1DrK5sS5OqDVaMNU8hc6o/OtMQa54lKh3kFRsOZPPV5hc8RO98yNy1RNoTVY0khFT1ZNE714luXZvGy9keCdX/UTnvsd4qBVSCeILN0hGfDuywrZFKhog6h1EV3KARHBmV07ob4tUPEJq6VZW5v/ZFunZqDbFzjOqO38BmxshVfLZ8MQAAAAASUVORK5CYII=');
   background-repeat: no-repeat;
   width: 14px !important;
   height: 14px !important;
   display: inline-block;

   &.Checked
   {
      background-position-x: -14px;
   }

   &.Disabled
   {
      background-position-y: -14px;
   }

   BODY.Dark &
   {
      background-position-y: -28px;
   }

   BODY.Dark &.Disabled
   {
      background-position-y: -42px;
   }
}