/******************************************************************************
              C     O     P     Y     R     I     G     H     T
*******************************************************************************

Web Library CSS.

Copyright (C) 2025 by          Torben Ring
                               Kleine Neugasse 13/1/22
                               A-1050 Vienna
                               Austria.
                               mailto: software@torbenring.com

This program package contains proprietary information, which is protected by
copyright.  All rights are reserved.  No part of this program package may be
duplicated, reproduced,  edited or included in other applications in any way
without the prior written consent of the author. Failure to comply with said
requirements will result in legal recourse on the part of the author.
******************************************************************************/

        /********************************************************
        * Generals                                              *
        ********************************************************/

.wlHidden
{
  display: none;
}

.wlFullScreen {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  background: #f8f8f8;
}

.wlCenter
{
  display: block;
  text-align: center;
  text-content: center;
  justify-content: center;
  margin: 0 auto;
}

.wlRight
{
  display: block;
  text-align: right;
  text-content: right;
  justify-content: right;
  margin: 0 auto;
}

.wlSectionBorder {
  border-style: solid solid solid solid;
  border-width: 1px;
  border-color: #d0d0d0;
  padding:0.5em;
}

.wlTableRow
{
  display: flex;
  text-align: left;
}

.wlTableRow:after
{
  content: "";
  display: table;
  clear: both;
}

.wlTableCol
{
  float: left;
  width: auto;
  padding: 5px;
  display: table-cell;
}

/* Caption icons */

.wlCaptionIcon
{
  float: right;
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
  color: #000000;
  text-shadow: 0 1px 0 #ffffff;
  filter: alpha(opacity=20);
  opacity: 0.2;
}

.wlCaptionIcon:hover, .wlCaptionIcon:focus
{
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

button.wlCaptionIcon
{
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
}

        /********************************************************
        * NavBar                                                *
        ********************************************************/

.wlNavBar
{
  display: flex;
  align-items: center;
  overflow: hidden;

  background-color: #555;
  color: #f2f2f2;

/*
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
*/

  xposition: sticky;
  top: 0;
  z-index: 1040;
}

.wlNavBarFloating
{
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #555;
  color: #f2f2f2;
}

.wlNavBar a, .wlNavBarFloating a
{
  width: 15px;

  padding: 10px 10px 10px 10px;
  color: white;
  font-size: 14px;
  border: none;

/*
  margin: 6px 6px 6px 6px;
  padding: 5px 5px 5px 5px;
  border: 1px solid white;
  border-radius: 2px;
  font-size: 12px;
*/

  text-align: center;
  outline: none;
}

.wlNavBar a:hover, .wlNavBarFloating a:hover
{
  color: black;
  background-color: white;
}

.wlNavBar button, .wlNavBarFloating button
{
  padding: 10px 10px 10px 10px;
  background-color: #555;
  color: white;
  font-size: 14px;
  border: none;
  text-align: center;
  outline: none;
}

.wlNavBar button:hover, .wlNavBarFloating button:hover
{
  color: black;
  background-color: white;
}

.wlNavBar input, .wlNavBarFloating input
{
}

/* Dropdown container */
.wlNavBarDropdown
{
  float: left;
}

/* Dropdown content */
.wlNavBarDropdown-content
{
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 5px 5px 5px 5px;
  /* transform: translate(0px, 10px); */

  z-index: 1080;
}

/* Show the dropdown menu on hover */
.wlNavBarDropdown:hover .wlNavBarDropdown-content
{
  display: block;
/*  transform: translate(0px, 10px); */
}

/* Links inside the dropdown */
.wlNavBarDropdown-content button
{
  float: none;
  color: black;
  background-color: #f9f9f9;
  padding: 10px 10px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size: 14px;
  width: 100%;
}

/* Add a grey background color to dropdown links on hover */
.wlNavBarDropdown-content button:hover
{
  background-color: #ccc;
/*  border: 1px solid #202020; */
}

.wlNavPane
{
  margin-top: 10px;
}

        /********************************************************
        * Base Window                                           *
        ********************************************************/

.wlModalBox /* Background */
{
  /* fullscreen + centered */
  position: fixed;
  z-index: 1050;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  outline: 0;

  /* transparent background + hidden */
  background: rgba(0, 0, 0, 0.5);
  display: none;
}

.wlModalBoxWrap
{
  min-width: 300px;
  max-width: 95vw;
  max-height: 80vh;
  padding: 10px;
  border: 1px solid black;
  border-radius: 5px;
  background: #f0f0f0;
  overflow: auto;
}

.wlModalBoxHeader
{
  padding: 5px;
  font-size: 20px;
}

.wlModalBoxText
{
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 5px;
  font-size: 18px;
}

.wlModalBoxText input
{
  margin: 4px 2px 4px 2px;
}

.wlModalBoxText select
{
  margin: 4px 2px 4px 2px;
}

.wlModalBoxButton button
{
  color: #f8f8f8;
  background-color: #202020;
  font-size: 14px;
  border: 1px solid #f8f8f8;
  margin: 4px 10px 0px 2px;
  padding: 4px 8px 4px 8px;
  border-radius: 2px;
}

.wlModalBoxButton button:hover
{
  border: 1px solid #202020;
  background-color: #f8f8f8;
  color: #202020;
}

        /********************************************************
        * Tab Sheet                                             *
        ********************************************************/

/* Style the tab */
.wlTabBar
{
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #e8e8e8;
}

/* Style the buttons inside the tab */
.wlTabBar button
{
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 14px;
  transition: 0.3s;
  font-size: 16px;
}

/* Change background color of buttons on hover */
.wlTabBar button:hover
{
  background-color: #ddd;
}

/* Create an active/current tablink class */
.wlTabBar button.active
{
  background-color: #ccc;
}

/* Style the tab content */
.wlTabPane
{
  display: none;
}

        /********************************************************
        * Main menu                                             *
        ********************************************************/

.wlMainMenu
{
  cursor: pointer;
  padding: 2px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;

  margin: 2px;
  border: 2px solid white;
  border-radius:5px;
}

.wlMainMenu:hover
{
  background-color: #e8e8e8;
  border: 2px solid #808080;
}

        /********************************************************
        * The End                                               *
        ********************************************************/
/******************************************************************************
              C     O     P     Y     R     I     G     H     T
*******************************************************************************

HELIUM CSS.

Copyright (C) 2025 by          Torben Ring
                               Kleine Neugasse 13/1/22
                               A-1050 Vienna
                               Austria.
                               mailto: software@torbenring.com

This program package contains proprietary information, which is protected by
copyright.  All rights are reserved.  No part of this program package may be
duplicated, reproduced,  edited or included in other applications in any way
without the prior written consent of the author. Failure to comply with said
requirements will result in legal recourse on the part of the author.
******************************************************************************/

body
{
  height: 100%;
  background-color: #f5f5f5;
  font-family: "Calibri";
  font-size: 14px;
  border: 1px solid #ccc;
  overscroll-behavior: none;
}
        /********************************************************
        * Static Tables                                         *
        ********************************************************/

.clsStaticTable
{
  background-color: #f8f8f8;
  border-collapse: separate; /*collapse; */
  border: 1px solid #bbbbbb;
  width: 100%;
}

.clsStaticTable th
{
  background-color: #c8c8c8;
  border: 1px solid #dddddd;
  text-align: left;
  padding: 2px 4px 2px 4px;
}

.clsStaticTable th:hover
{
  background-color: #a8a8a8;
}

.clsStaticTable td
{
  border: 1px solid #dddddd;
  text-align: left;
  padding: 2px 4px 2px 4px;
}

.clsStaticTable tr:nth-child(even)
{
  background-color: #dddddd;
}

.clsStaticTable tr:nth-child(odd)
{
  background-color: #f8f8f8;
}

.clsStaticTable tr:hover
{
  background-color: #aaaaaa;
}

        /********************************************************
        * Dynamic Tables                                        *
        ********************************************************/

.clsDynamicTable table
{
  overflow-y: auto;
  height: 200px;
  border-collapse: collapse;
  width: 100%;
}

.clsDynamicTable thead th
{
  position: sticky;
  top: 0px;
}

.clsDynamicTable th
{
  background-color: #c8c8c8;
  border: 1px solid #dddddd;
  text-align: left;
  padding: 0px 2px 0px 2px;
}

.clsDynamicTable td
{
  border: 1px solid #dddddd;
  text-align: center;
  padding: 0px 2px 0px 2px;
}

.clsDynamicTable tr:nth-child(even)
{
  background-color: #dddddd;
}

.clsDynamicTable tr:nth-child(odd)
{
  background-color: #f8f8f8;
}

.clsDynamicTable tr:hover
{
  background-color: #aaaaaa;
}

.clsDynamicTable input
{
  border: 1px solid #a0a0a0;
  padding: 1px;
  margin: 1px;
}

.clsDynamicTable input:read-only
{
  background-color: #e0e0e0;
}

.clsDynamicTableContainer
{
  display: block;
  height: 250px;
  overflow-x: scroll;
  overflow-y: scroll;
  margin-bottom: 10px;
}

        /********************************************************
        * Misc                                                  *
        ********************************************************/

.clsBarCode39
{
  font-family: 'FontBar39';
  font-size: 28px;
}

.clsTitleFont
{
  font-family: "Calibri";
  font-size: 120px;
  font-weight: 900;
  color: #1673ba;
}

.clsInfoPane
{
  color: #202020;
  background-color: #f0f0f0;
  padding-left: 10px;
  border: 1px solid #ccc;
  width: 100%;
  overflow: auto;
}

.clsInfoPane span
{
  display: inline-block;
}

.clsInfoPane input
{
  border: 1px solid #a0a0a0;
}

.clsInfoPane input:read-only
{
  background-color: #e0e0e0;
}

.clsVerticalButtonGroup button
{
  color: black;
  background-color: white;
  font-size: 16px;
  border: 1px solid black;
  margin: 5px;
  border-radius: 2px;

  cursor: pointer; /* Pointer/hand icon */
  width: 100%; /* Set a width if needed */
  display: block; /* Make the buttons appear below each other */
}

.clsTabPane
{
/*
  color: #f2f2f2;
  background-color: #2C4667;
*/
  color: #202020;
  background-color: #f0f0f0;
  padding-left: 10px;
  border: 1px solid #ccc;
  border-top: none;
}

.clsTabPane input, .clsTabPane select
{
  border: 1px solid #a0a0a0;
  color: #202020;
}

.clsTabPane input:read-only, .clsTabPane select:disabled
{
  background-color: #e0e0e0;
  color: #202020;
}

.clsDlgButton
{
/*
  padding-top: 15px;
  padding-bottom: 20px;
  font-size: 14px;
  border: 1px solid black;
  margin: 4px 10px 10px 2px;
  padding: 4px 8px 4px 8px;
  color: white;
  background-color: #202020;
  width: initial;
*/

  color: black;
  background-color: white;
  font-size: 16px;
  border: 1px solid black;
  margin: 10px 10px 10px 2px;
  border-radius: 2px;
}

.clsDlgButton:hover
{
/*
  color: red;
  background-color: #f8f8f8;
*/
  background-color: #202020;
  color: white;
}

.clsDlgError
{
  background-color: #c06060;
  color: white;
  text-align: center;
  border: 5px solid black;
}

.clsFooter
{
  float: right;
  padding-top: 10px;
  font-style: italic;
  font-variant: small-caps;
}

.clsNavBarProgramVersion
{
  color : white;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(-110%, -50%);
  font-style: italic;
  font-variant: small-caps;
}

.clsNavBarTitle
{
  margin-left: auto;
  margin-right: 10px;
  font-size: 22px
}

.clsCanvas
{
  background-color: red;
  image-rendering: pixelated;
}

.clsPopUpSearchField
{
  padding-left: 25px;
/*
  background: url("file://helium/searchicon.png") no-repeat left;
  background-size: 20px;
*/
}

.clsCardPopup, .clsCardSearch
{
  border: 0px;
  background-color: transparent;
  color: black;
}

        /********************************************************
        * The End                                               *
        ********************************************************/