@charset "UTF-8";
@font-face {
  font-family: 'Nunito';
  font-weight: 200;
  font-style: normal;
  src: url("/nunito-extralight.woff2") format("woff2"); }

@font-face {
  font-family: 'Nunito';
  font-weight: 200;
  font-style: italic;
  src: url("/nunito-extralightitalic.woff2") format("woff2"); }

@font-face {
  font-family: 'Nunito';
  font-weight: 300;
  font-style: normal;
  src: url("/nunito-light.woff2") format("woff2"); }

@font-face {
  font-family: 'Nunito';
  font-weight: 300;
  font-style: italic;
  src: url("/nunito-lightitalic.woff2") format("woff2"); }

@font-face {
  font-family: 'Nunito';
  font-weight: 400;
  font-style: normal;
  src: url("/nunito-regular.woff2") format("woff2"); }

@font-face {
  font-family: 'Nunito';
  font-weight: 400;
  font-style: italic;
  src: url("/nunito-italic.woff2") format("woff2"); }

@font-face {
  font-family: 'Nunito';
  font-weight: 600;
  font-style: normal;
  src: url("/nunito-semibold.woff2") format("woff2"); }

@font-face {
  font-family: 'Nunito';
  font-weight: 600;
  font-style: italic;
  src: url("/nunito-semibolditalic.woff2") format("woff2"); }

@font-face {
  font-family: 'Nunito';
  font-weight: 700;
  font-style: normal;
  src: url("/nunito-bold.woff2") format("woff2"); }

@font-face {
  font-family: 'Nunito';
  font-weight: 700;
  font-style: italic;
  src: url("/nunito-bolditalic.woff2") format("woff2"); }

@font-face {
  font-family: 'Nunito';
  font-weight: 800;
  font-style: normal;
  src: url("/nunito-extrabold.woff2") format("woff2"); }

@font-face {
  font-family: 'Nunito';
  font-weight: 800;
  font-style: italic;
  src: url("/nunito-extrabolditalic.woff2") format("woff2"); }

@font-face {
  font-family: 'Nunito';
  font-weight: 900;
  font-style: normal;
  src: url("/nunito-black.woff2") format("woff2"); }

@font-face {
  font-family: 'Nunito';
  font-weight: 900;
  font-style: italic;
  src: url("/nunito-blackitalic.woff2") format("woff2"); }

body {
  font-family: 'Nunito', sans-serif; }

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url("/materialicon.woff2") format("woff2"); }

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr; }

/**
* Developed by katapema@yahoo.com
*
* Usage:
* - Make sure html template has at least these components
*	<div class="ZukCard">
*		...
*	</div>
*/
/*
* Developed by katapema@yahoo.com
*
* Require: JS/Core.js, JS/Event/Core.js, CSS/Control/FileDragDrop.css
* Usage:
* - Create html template:
* <div id="filedragdrop" class="ZukFileDragDrop">
*   <input type="file">
* </div>
* - Create a FileDragDrop object: dt = new $FileDragDrop(c);
* ++ c: the control (e.g. $id('id'))
*/
/*
* Developed by katapema@yahoo.com
*
* Require: JS/Core.js, JS/Event/Core.js, JS/Control/Menu/CtxMenu.js, CSS/Control/Menu/CtxMenu.css
* Usage:
* - Create html template:
* <div data-zukctxmenu="menuName">
*		Item when right click popup menuName
*	</div>
* <div id="ZukCtxMenu" class="hide"></div>
* - Implement function onBuildCtxMenu(menu, target) in Main class
*  ++ menu: the main context menu will be shown. It contents is cleared before calling the function onBuildCtxMenu
*  ++ target: the target that user right click on and trigger the context menu. User can inspect target.dataset.zukctxmenu for the menuName
*             and show the approriate context menu
*  ++ the function must fill the menu with list of button or seperator as example below
*       <button>Menu 1</button>
*       <button>Menu 2</button>
*       <div></div>
*       <button>Menu 1</button>
*/
/*
* Developed by katapema@yahoo.com
*
* Require: CSS/Control/Menu/MenuList.scss
* Usage:
* - Create html template:
* <div class="ZukMenuList">
*		<div class="ZukMenuListItm">...</div>
*		<div class="ZukMenuListItm">...</div>
*		<div class="ZukMenuListSep"></div>
*		<div class="ZukMenuListItm">...</div>
*	</div>
*/
/**
* Developed by katapema@yahoo.com
*
* Usage:
* <select class="ZukSelect">
*   <option value="...">...</option>
* </select>
*/
/**
* Developed by katapema@yahoo.com
*
* Usage:
* - Make sure html template has at least these components
*	<table class="ZukTable">
*		...
*	</table>
*/
/**
* Developed by katapema@yahoo.com
*
* Usage:
* - Make sure html template has at least these components
*	<label class="ZukToggle"><input type="checkbox" class="ZukToggleChk"><span class="ZukToggleLbl">Some value here</span></label>
*/
/**
* Developed by katapema@yahoo.com
*
* This layout contains 1 big column stretch to both side. There should be no margin on 4 border
*
* |<---------- Header ----------->|
* |<---------- Content ---------->|
* |<---------- Content ---------->|
* |<---------- Content ---------->|
* |<---------- Footer ----------->|
*
* Usage:
* - Make sure html template has at least these components
*	<body/div class="ZukLayoutOneStretchCol">
*		<div class="ZukLayoutHeader">...</div>
*		<div class="ZukLayoutContent">...</div>
*		<div class="ZukLayoutFooter">...</div>
*	</body/div>
*/
/*$ZukLayoutSandwichMaxWidth: 1200px;
$ZukLayoutSandwichHeaderHeight: 70px;
$ZukLayoutSandwichHeaderPadding: 10px;

$ZukLayoutSandwichMenuFontSize: 18px;
$ZukLayoutSandwichLogoWidth: 50px;
$ZukLayoutSandwichLogoHeight: 50px;

$ZukLayoutSandwichBodyBg: $ZukColorWhite;
$ZukLayoutSandwichHeaderBg: $ZukColorWhite;
$ZukLayoutSandwichColorHeaderTxt: $ZukColorWhite;
$ZukLayoutSandwichColorResourceLnkHover: $ZukColorWhite;
$ZukLayoutSandwichColorMenuLnkHover: $ZukColorWhite;

$ZukLayoutSandwichHeaderFrameBorderBottom: 1px solid adjust-color($ZukColorWhite, $lightness:40%);

$ZukLayoutSandwichContentFrameBackground: $ZukColorWhite;
$ZukLayoutSandwichContentFrameColor: $ZukColorWhite;
$ZukLayoutSandwitchContentPadding: 20px;

$ZukLayoutSandwichFooterBackground: $ZukColorBlack;
$ZukLayoutSandwichFooterColor: adjust-color($ZukColorWhite, $lightness:20%);*/
/**
* Developed by katapema@yahoo.com
*
* Usage:
* - Make sure html template has at least these components
*	<div class="ZukFormDiv"...>
*		<label ...>...</label>
*		<div class="ZukFormDivCtr" ...>
*			<input ...>...</input>
*			<div class="err hide ..." ...></div>
*		</div>
*	</div>
*/
/**
* Developed by katapema@yahoo.com
*
* The stacked form arrange the labels and controls in vertically aligned (on top of the other)
* Usage:
* - Make sure html template has at least these components
* <form class="ZukFormStack">
*	  <div>
*		  <label ...>...</label>
*		  <div ...>
*			  <input ...>...</input>
*		  </div>
*			<div class="err hide ..." ...></div>
*	  </div>
* </form>
*/
* {
  box-sizing: border-box;
  outline: none;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: inherit;
  font-size: inherit; }

a {
  text-decoration: none; }

label:hover {
  cursor: pointer; }

.hide {
  display: none !important; }

a {
  color: #333;
  font-weight: 500; }
  a:hover {
    font-weight: 600;
    text-decoration: underline dotted 1.5px #999; }

/**
* Developed by katapema@yahoo.com
*
* Require: CSS/Animate/Rotate.scss
* Usage:
* - Make sure html template has at least these components
*	<i class="ZukLoading"></i>
*/
.ZukLoading {
  font-family: 'Material Icons';
  font-style: normal;
  font-size: 1.5em;
  display: inline-block;
  animation: ZukAnimateRotate 1s infinite linear;
  vertical-align: middle;
  line-height: 1; }

.ZukLoading::before {
  content: '\e5d5'; }

#ZukOverlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  opacity: 0.5;
  background-color: #000; }

html {
  display: flex;
  justify-content: center; }

body {
  width: 100vw;
  margin: 0;
  padding: 0;
  font: 300 16px/1.5 "Nunito", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }

#ZukLayoutHeader {
  width: 100%;
  height: 60px;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center; }

#ZukLayoutHeaderLogo {
  width: 50px;
  height: 50px; }

#ZukLayoutHeaderMenu {
  flex-grow: 10;
  padding-left: 50px; }
  #ZukLayoutHeaderMenu ul {
    list-style-type: none; }
  #ZukLayoutHeaderMenu li {
    display: inline-block;
    margin-right: 40px; }
  #ZukLayoutHeaderMenu a {
    font-weight: 600;
    color: #fff; }
  #ZukLayoutHeaderMenu a:hover {
    color: #CCC; }

#ZukLayoutFooter {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px 0; }

.ZukAccord .ZukAccordTitle {
  width: 100%;
  cursor: pointer;
  padding: 5px;
  background: #555;
  color: #fff; }

.ZukAccord .ZukAccordTitle:before {
  font-family: 'Material Icons';
  content: 'arrow_drop_down';
  float: left;
  clear: both; }

.ZukAccord .ZukAccordTitle.ZukAccordClosed:before {
  font-family: 'Material Icons';
  content: 'arrow_right';
  float: left;
  clear: both; }

.ZukAccord .ZukAccordPanel {
  border: 1px solid #000;
  padding: 5px; }

.ZukAccord .ZukAccordPanel.ZukAccordClosed {
  height: 0;
  padding: 0;
  border: none;
  overflow: hidden; }

/*
* Developed by katapema@yahoo.com
*
* Require: Core.js, Event/Core.js, Control/Audio.js, CSS/Control/Audio.scss
* Usage:
* - Create html template:
* <div id="id"></div>
* - Create an AudioControl object: dt = new $AudioControl(c, cb);
* ++ c: the control (e.g. $id('id'))
* ++ cb: callback object to process event
* ++++ cb.onAudioControlClkPlay
* ++++ cb.onAudioControlClkPause
* ++++ cb.onAudioControlClkSeek(t)
*/
.ZukAudio {
  border-collapse: collapse;
  min-width: 100px;
  height: 26px;
  position: relative;
  background: #fff; }

.ZukAudio > .ZukAudiobtn {
  font-family: 'Material Icons';
  content: "\e037";
  background: #65a6ff;
  border: 1px solid #65a6ff;
  padding: 2px 5px;
  width: 1.5em;
  height: 100%;
  border: none;
  cursor: pointer;
  position: absolute;
  border-radius: 0;
  margin: 0;
  padding: 0;
  color: #000;
  font-size: 1em; }

.ZukAudio > .ZukAudiobtn:hover {
  color: #fff; }

.ZukAudio > .duration {
  border: 1px solid #dfe8f1;
  padding: 4px;
  margin-left: 1.5em;
  height: 100%; }

.ZukAudio > .duration > .full {
  width: 100%;
  height: 17px;
  background: rgba(0, 0, 0, 0.05) none repeat scroll 0 0;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
  border-radius: 4px;
  cursor: pointer; }

.ZukAudio > .duration > .full > .running {
  height: 100%;
  background: #984dff;
  border-radius: 2px; }

audio {
  background: #eee; }
  audio::-webkit-media-controls-panel {
    background: #eee; }

/**
* Developed by katapema@yahoo.com
*
* Usage:
* - Make sure html template has at least these components
*	<div class="ZukBtn">
*		...
*	</div>
* or
* <button></button>
*/
button, .ZukBtn {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  cursor: pointer;
  padding: 8px 16px;
  background: #000;
  color: #fff;
  font-weight: 600;
  border-radius: 5px;
  transition: all 0.5s ease; }
  button.ico, .ZukBtn.ico {
    vertical-align: middle;
    padding: 2px 3px; }

button:hover:enabled,
button:active:enabled,
.ZukBtn:hover:not(.ZukBtnDisabled),
.ZukBtn:active:not(.ZukBtnDisabled) {
  background: #111;
  cursor: pointer;
  transform: scale(1.1);
  text-decoration: none;
  /* for a tag*/ }

button:disabled, .ZukBtn.ZukBtnDisabled {
  color: #AAA; }

.ZukCalendar {
  display: inline-block;
  border: 1px solid #DDD;
  border-radius: 3px; }
  .ZukCalendar > .ZukCalendarHdr {
    width: 100%;
    background: #EEE;
    padding: 3px;
    position: relative; }
    .ZukCalendar > .ZukCalendarHdr > .prvMonth, .ZukCalendar > .ZukCalendarHdr > .nxtMonth, .ZukCalendar > .ZukCalendarHdr > .prvYear, .ZukCalendar > .ZukCalendarHdr > .nxtYear {
      position: absolute;
      cursor: pointer;
      border-radius: 50px;
      font-family: 'Material Icons'; }
    .ZukCalendar > .ZukCalendarHdr > .prvMonth:hover, .ZukCalendar > .ZukCalendarHdr > .nxtMonth:hover, .ZukCalendar > .ZukCalendarHdr > .prvYear:hover, .ZukCalendar > .ZukCalendarHdr > .nxtYear:hover {
      background: #000;
      color: #fff; }
    .ZukCalendar > .ZukCalendarHdr > .prvMonth {
      top: 0.1em;
      left: 24px;
      padding: 1px 6px 1px 4px; }
    .ZukCalendar > .ZukCalendarHdr > .nxtMonth {
      top: 0.1em;
      right: 24px;
      padding: 1px 4px 1px 6px; }
    .ZukCalendar > .ZukCalendarHdr > .prvYear {
      top: 0.1em;
      left: 6px;
      padding: 1px 6px 1px 4px; }
    .ZukCalendar > .ZukCalendarHdr > .nxtYear {
      top: 0.1em;
      right: 6px;
      padding: 1px 4px 1px 6px; }
    .ZukCalendar > .ZukCalendarHdr > .title {
      text-align: center; }
  .ZukCalendar > .ZukCalendarDateList {
    border-collapse: separate;
    border-spacing: 2px;
    margin: 3px; }
    .ZukCalendar > .ZukCalendarDateList .days {
      text-align: center; }
    .ZukCalendar > .ZukCalendarDateList .day {
      background: #fff;
      text-align: right;
      border: 1px solid #CCC;
      cursor: pointer;
      padding: 5px; }
    .ZukCalendar > .ZukCalendarDateList .day:hover {
      background: #222;
      color: #fff;
      border: 1px solid #222; }
    .ZukCalendar > .ZukCalendarDateList .day.sel {
      background: #000;
      color: #fff;
      border: 1px solid #000;
      font-weight: bold; }

/**
* Developed by katapema@yahoo.com
*
* Usage:
* - Make sure html template has at least these components
*	<div class="ZukCard">
*		...
*	</div>
*/
.ZukCard {
  box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  background: #fff;
  margin: 5px;
  padding: 10px; }

/**
* Developed by katapema@yahoo.com
*
* Usage:
* - For label to be displayed after the checkbox
* <span class="ZukCheckbox">
*	  <input type="checkbox" id="id".../>
*   <label for="id" class="ZukCheckboxAfter">...</label>
* </span>
*
* - For label to be displayed before the checkbox
* <span class="ZukCheckbox">
*	  <input type="checkbox" id="id".../>
*   <label for="id">...</label>
* </span>
*/
.ZukCheckbox {
  display: inline-block; }
  .ZukCheckbox input[type="checkbox"] {
    display: none !important; }
    .ZukCheckbox input[type="checkbox"] + label {
      color: inherit; }
    .ZukCheckbox input[type="checkbox"] + label:not(.ZukCheckboxAfter)::before,
    .ZukCheckbox input[type="checkbox"] + label.ZukCheckboxAfter::after {
      font-family: 'Material Icons';
      content: "check_box_outline_blank";
      float: left;
      clear: both; }
    .ZukCheckbox input[type="checkbox"] + label:not(.ZukCheckboxAfter)::before {
      margin-right: .3rem; }
    .ZukCheckbox input[type="checkbox"] + label.ZukCheckboxAfter::after {
      margin-left: .3rem; }
    .ZukCheckbox input[type="checkbox"]:checked + label:not(.ZukCheckboxAfter)::before, .ZukCheckbox input[type="checkbox"]:checked + label.ZukCheckboxAfter::after {
      content: "check_box"; }
    .ZukCheckbox input[type="checkbox"]:disabled + label {
      color: inherit; }

/**
* Developed by katapema@yahoo.com
*
* Usage:
* - Make sure html template has at least these components
* <div class="ZukDlg" ...>
*  <div class="ZukDlgTitle" ...>
*  </div>
*  <div class="ZukDlgPanel" ...>
*  </div>
* </div>
*/
.ZukDlgBodyDisableScroll {
  overflow: hidden; }

.ZukDlg {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  max-height: 90vh;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  background: #fff;
  border: 1px solid #ccc; }

.ZukDlgTitle {
  cursor: pointer;
  background: #000;
  color: #fff;
  padding: .5em 1em; }

.ZukDlgPanel {
  flex: 1;
  overflow-y: auto;
  padding: 10px 15px; }

.ZukEditBox {
  display: inline-flex !important; }
  .ZukEditBox > input[type=text], .ZukEditBox textarea {
    flex-grow: 1;
    border-radius: 4px 0 0 4px;
    border-width: 1px 0 1px 1px; }
  .ZukEditBox > button {
    padding: 5px 20px;
    border-radius: 0 4px 4px 0; }

/**
* Developed by katapema@yahoo.com
*
* Usage:
* - Make sure html template has at least these components
* <input type="file".../><label...>Upload</label>
*/
input[type="file"] {
  display: none; }
  input[type="file"] + label {
    cursor: pointer;
    transition-delay: 0s;
    transition-duration: 0.1s;
    transition-property: all;
    transition-timing-function: ease-in-out; }
  input[type="file"]:disabled + label {
    color: #bbb; }

/*
* Developed by katapema@yahoo.com
*
* Require: JS/Core.js, JS/Event/Core.js, JS/Control/FileDragDrop.js, CSS/Control/FileDragDrop.css
* Usage:
* - Create html template:
* <div id="filedragdrop" class="ZukFileDragDrop">
*   <input type="file">
* </div>
* - Create a FileDragDrop object: f = new $FileDragDrop(c, cb);
* ++ c: the control (e.g. $id('id'))
* ++ cb: is the callback obect
* ++++ onFileChange(files): on change event in the input file control, the files variable is list of selected files
* - To customize the text to show for the input, use this html template:
* <div id="filedragdrop" class="ZukFileDragDrop">
*   <input type="file" data-text="Choose the file you like">
* </div>
*
* - To choose folder instead of file, use this html template:
* <div id="filedragdrop" class="ZukFileDragDrop">
*   <input type="file" webkitdirectory multiple>
* </div>
*/
.ZukFileDragDrop {
  cursor: pointer;
  display: inline-block; }
  .ZukFileDragDrop.ZukFileDragDropDisable {
    color: #c4c4c4; }
  .ZukFileDragDrop:hover:not(.ZukFileDragDropDisable), .ZukFileDragDrop.ZukFileDragDropOver:not(.ZukFileDragDropDisable) {
    background: #eee; }
  .ZukFileDragDrop div {
    border: 1px dashed #ccc;
    padding: 5px 10px; }

.ZukListBox {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  overflow-y: auto; }
  .ZukListBox:focus {
    border: 2px solid #ccc; }
  .ZukListBox.ZukListBoxDropover {
    border-color: #787878;
    background: #c3c3c3;
    box-shadow: inset 0 0 0 1px #d8d8d8; }
  .ZukListBox .ZukListBoxItem {
    padding: 5px;
    margin: 3px;
    border-radius: 5px;
    cursor: default;
    transition: background 0.1s; }
    .ZukListBox .ZukListBoxItem:hover {
      background: #e8e8e8; }
    .ZukListBox .ZukListBoxItem.ZukListBoxItemSelected {
      background: #bbb;
      color: #111; }
      .ZukListBox .ZukListBoxItem.ZukListBoxItemSelected:hover {
        background: #aaa; }

/**
* Developed by katapema@yahoo.com
*
* Usage:
* - Make sure html template has at least these components
*	<div class="ZukLoadingBar"></div>
* - To customize speed in second for the loading animation, use styling --speed:
*	<div class="ZukLoadingBar" style="--speed:3s;"></div>
*/
@keyframes ZukLoadingBarAnim {
  0% {
    left: 2px;
    width: 0%; }
  25% {
    left: 2px;
    width: 25%; }
  75% {
    left: calc(75% - 2px);
    width: 25%; }
  100% {
    left: calc(100% - 2px);
    width: 0%; } }

.ZukLoadingBar {
  --speed: 2s;
  height: 7px;
  border: 1px solid #000;
  border-radius: 5px;
  position: relative;
  overflow: hidden; }
  .ZukLoadingBar::before {
    content: " ";
    position: absolute;
    height: 3px;
    top: 1px;
    border-radius: 5px;
    background: #000;
    animation: ZukLoadingBarAnim var(--speed) linear infinite; }

/**
* Developed by katapema@yahoo.com
*
* Usage:
* - Make sure html template has at least these components
*	<div class="ZukLoadingDot"></div>
* - To customize speed in second for the loading animation, use styling --speed:
*	<div class="ZukLoadingDot" style="--speed:3s;"></div>
* - To customize height in px, use styling --height:
*	<div class="ZukLoadingDot" style="--height:5px;"></div>
*/
@keyframes ZukLoadingDotAnim {
  33% {
    background-size: calc(100%/3) 0%, calc(100%/3) 100%, calc(100%/3) 100%; }
  50% {
    background-size: calc(100%/3) 100%, calc(100%/3) 0%, calc(100%/3) 100%; }
  66% {
    background-size: calc(100%/3) 100%, calc(100%/3) 100%, calc(100%/3) 0%; } }

.ZukLoadingDot {
  --speed: 2s;
  --height: 10px;
  --circle: no-repeat radial-gradient(circle closest-side, #000 90%, #0000);
  height: var(--height);
  width: calc(3 * var(--height) + 3px);
  background: var(--circle) 0% 50%, var(--circle) 50% 50%, var(--circle) 100% 50%;
  background-size: calc(100%/3) 100%;
  animation: ZukLoadingDotAnim var(--speed) infinite linear; }

.ZukMarkdown p {
  margin: 20px 0; }

.ZukMarkdown ol {
  margin: 10px 10px 10px 40px; }

.ZukMarkdown .ZukMarkdownCode {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px; }
  .ZukMarkdown .ZukMarkdownCode .ZukMarkdownCodeTitle {
    border-radius: 5px 5px 0 0;
    background: #000;
    color: #fff;
    padding: 5px 10px; }
  .ZukMarkdown .ZukMarkdownCode pre {
    padding: 5px 10px; }

/*
* Developed by katapema@yahoo.com
*
* Require: JS/Core.js, JS/Event/Core.js, JS/Control/Menu/CtxMenu.js, CSS/Control/Menu/CtxMenu.scss
* Usage:
* - Create html template:
* <div data-ctxmenu="menuName">
*		Item when right click popup menuName
*	</div>
* <div id="ZukCtxMenu" class="hide"></div>
*/
#ZukCtxMenu {
  position: fixed;
  z-index: 10000;
  border: 1px solid #000;
  border-radius: 10px;
  padding: 6px;
  left: 0;
  top: 0;
  background: #fff; }

/*
* Developed by katapema@yahoo.com
*
* Require: CSS/Control/Menu/MenuList.scss
* Usage:
* - Create html template:
* <div class="ZukMenuList">
*		<div class="ZukMenuListItm">...</div>
*		<div class="ZukMenuListItm">...</div>
*		<div class="ZukMenuListSep"></div>
*		<div class="ZukMenuListItm">...</div>
*	</div>
*/
.ZukMenuList .ZukMenuListItm {
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 10px; }
  .ZukMenuList .ZukMenuListItm:hover {
    background: #ccc; }

.ZukMenuList .ZukMenuListSep {
  margin: 6px 4px;
  border: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.08); }

.ZukPaging {
  list-style: none outside none; }
  .ZukPaging > li {
    margin: 2px 0;
    display: inline-block;
    margin-left: -1px;
    border: 1px solid white;
    background: white;
    padding: 6px 12px; }
  .ZukPaging > li:first-child {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px; }
  .ZukPaging > li:last-child {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px; }
  .ZukPaging > li.ZukPagingSel {
    background: #cccccc;
    border-color: #cccccc;
    color: #fff; }
  .ZukPaging > li:hover:not(.ZukPagingSel) {
    background: white;
    border-color: white;
    color: #000;
    cursor: pointer; }

.ZukPanelText {
  padding: 10px; }
  .ZukPanelText .ZukPanelTextH1 {
    font-size: 19px;
    margin: 12px 0 6px 0; }
  .ZukPanelText .ZukPanelTextUL {
    margin: 10px 30px; }

/*
* Developed by katapema@yahoo.com
*
* Require: JS/Core.js, CSS/Main/Control/Progress.scss, CSS/$Theme/Control/Progress.scss
* Usage:
* - Create either these html templates:
* <div class="ZukProgressBar" id="id"></div>
* or
* <div class="ZukProgressCircle" id="id"></div>
* - Create a Progress object: progress = new $Progress(c);
* ++ c: the control (e.g. $id('id'))
* - Set the progress: progress.set(p); p is a integer between 0 and 100
*/
.ZukProgressBar {
  --percent: 0%;
  --progress: "0%";
  --color: #ccc;
  height: calc(1.5em + 1px);
  border: 1px solid #ccc;
  position: relative; }
  .ZukProgressBar::before {
    content: " ";
    height: 1.5em;
    background: var(--color);
    width: var(--percent);
    display: inline-block; }
  .ZukProgressBar::after {
    content: var(--progress);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); }

.ZukProgressCircle {
  --percent: 0%;
  --progress: "0%";
  --color: #ccc;
  border: 1px solid var(--color);
  border-radius: 50%;
  width: 4em;
  height: 4em;
  position: relative;
  background: conic-gradient(var(--color) var(--percent), #fff var(--percent), #fff calc(100% - var(--percent))); }
  .ZukProgressCircle::after {
    content: var(--progress);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); }

/**
* Developed by katapema@yahoo.com
*
* Usage:
* - For label to be displayed after the radio
* <span class="ZukRadio">
*	  <input type="radio" id="id".../>
*   <label for="id" class="ZukRadioAfter">...</label>
* </span>
*
* - For label to be displayed before the radio
* <span class="ZukRadio">
*	  <input type="radio" id="id".../>
*   <label for="id">...</label>
* </span>
*/
.ZukRadio {
  display: inline-block; }
  .ZukRadio input[type="radio"] {
    display: none !important; }
    .ZukRadio input[type="radio"] + label {
      color: inherit; }
    .ZukRadio input[type="radio"] + label:not(.ZukRadioAfter)::before,
    .ZukRadio input[type="radio"] + label.ZukRadioAfter::after {
      font-family: 'Material Icons';
      content: "radio_button_unchecked";
      float: left;
      clear: both; }
    .ZukRadio input[type="radio"] + label:not(.ZukRadioAfter)::before {
      margin-right: .3rem; }
    .ZukRadio input[type="radio"] + label.ZukRadioAfter::after {
      margin-left: .3rem; }
    .ZukRadio input[type="radio"]:checked + label:not(.ZukRadioAfter)::before, .ZukRadio input[type="radio"]:checked + label.ZukRadioAfter::after {
      content: "radio_button_checked"; }
    .ZukRadio input[type="radio"]:disabled + label {
      color: #fff; }

/**
* Developed by katapema@yahoo.com
*
* Usage:
* <select class="ZukSelect">
*   <option value="...">...</option>
* </select>
*/
.ZukSelect {
  cursor: pointer;
  border: 1px solid #000;
  border-radius: 3px;
  padding: 4px 10px; }
  .ZukSelect:disabled {
    cursor: not-allowed;
    background: #fafafa none repeat scroll 0 0;
    opacity: 0.65; }
  .ZukSelect:focus {
    outline: none; }

/*
* Developed by katapema@yahoo.com
*
* Require: JS/Core.js, JS/Event/Core.js, JS/Control/SuggestionList.js,
*          CSS/Control/SuggestionList.css
* Usage:
* - Create html like this
*   <input type="text" id="..." placeholder="...">
* - Create a SuggestionList object: SuggestionList = new $SuggestionList(element, cb);
* + element: input element to attach the suggestion functionality. Usually it is $id('...')
* + cb: callback object should have methods like this:
* ++ getSuggestions(query): to be called when user type something in the input.
*                           Return a promise to resolve into a list of items. For example
*   getSuggestions(query) {
*     const data = ['Suggestion 1', 'Suggestion 2', 'Suggestion 3'];
*     return Promise.resolve(data.filter(item => item.toLowerCase().includes(query.toLowerCase()));
*   }
* ++ buildLIItem(li, item, query): to be called to build the view of the item in the suggestion list
* ++ getItemValue(item): to be called to get the value to put in the input when user select an item
* ++ onSuggestionSelected(item): (optional) to be called when user select an item. You can do
*                                something with the selected item here.
*/
.ZukSuggestionList {
  position: absolute;
  top: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: auto;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000; }
  .ZukSuggestionList li {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0; }
    .ZukSuggestionList li:last-child {
      border-bottom: none; }
    .ZukSuggestionList li:hover, .ZukSuggestionList li.selected {
      background: #ddd; }

.ZukSwitch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  /* Hide default HTML checkbox */
  /* The slider */ }
  .ZukSwitch input {
    opacity: 0;
    width: 0;
    height: 0; }
  .ZukSwitch span {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px; }
  .ZukSwitch span:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%; }
  .ZukSwitch input:checked + span {
    background-color: #2196F3; }
  .ZukSwitch input:focus + span {
    box-shadow: 0 0 1px #2196F3; }
  .ZukSwitch input:checked + span:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px); }

/**
* Developed by katapema@yahoo.com
*
* Usage:
* - Make sure html template has at least these components
*	<div class="ZukTab"...>
*		<ul ...>
*			<li class="ZukTabSel">...</li>
*			<li>...</li>
*		</ul>
*		<div class="ZukTabPnl" ...>
*			...
*		</div>
*		<div class="ZukTabPnl" ...>
*			...
*		</div>
*	</div>
*/
.ZukTab ul:first-child {
  list-style: none outside none;
  padding-left: 10px;
  border-bottom: 1px solid #000; }
  .ZukTab ul:first-child li {
    display: inline-block;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 8px 8px 0 0;
    border-width: 1px 1px 0 1px;
    border-style: solid; }
  .ZukTab ul:first-child li.ZukTabSel {
    background: #000;
    color: #fff; }

.ZukTab .ZukTabPnl {
  border-width: 5px 2px 2px;
  border-style: solid;
  border-color: #fff;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 -3px 3px -3px #000; }

/**
* Developed by katapema@yahoo.com
*
* Usage:
* - Make sure html template has at least these components
*	<table class="ZukTable">
*		...
*	</table>
*/
.ZukTable {
  border-collapse: collapse; }
  .ZukTable th {
    border: 1px solid #000;
    background: #CCC;
    color: #000;
    padding: 5px; }
  .ZukTable tr:nth-child(even) {
    background: #fff; }
  .ZukTable td {
    border: 1px solid #000;
    padding: 5px; }

input[type="text"], input[type="number"], input[type="password"], textarea {
  outline: none;
  font: inherit;
  border: 1px solid #000;
  border-radius: 3px;
  padding: 4px 8px;
  transition: border-color ease-in-out .15s; }

input[type="text"]:disabled, input[type="number"]:disabled, input[type="password"]:disabled, textarea:disabled {
  background: #fafafa none repeat scroll 0 0;
  cursor: not-allowed;
  opacity: 0.65; }

input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus, textarea:focus {
  border: 1px solid #0d0d0d; }

input[type="text"].inputerr, input[type="number"].inputerr, input[type="password"].inputerr, textarea.inputerr {
  border-color: #e03838; }

/*
* Developed by katapema@yahoo.com
*
* Require: JS/Core.js, JS/Event/Core.js, CSS/Main/Control/Toast.scss,
*          CSS/$Theme/Control/Toast.scss
* Usage:
* - Create a singleton in html template:
* <div id="ZukToast" class="hide"></div>
* - Show a toast
*  $zukToast.add(msg, timeoutInSec);
* ++ msg: the message to be shown
* ++ durationInSec: the period to be shown, after this the toast will be disappeared
*/
@keyframes ZukToastProgress {
  0% {
    width: 100%; }
  100% {
    width: 0%; } }

#ZukToast {
  position: fixed;
  z-index: 1002;
  background: #333;
  color: #fff;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 5px; }
  #ZukToast .ZukToastMsg {
    margin: 6px 12px; }
  #ZukToast .ZukToastProgress {
    display: block;
    height: 4px;
    width: 100%;
    animation: ZukToastProgress 3s linear forwards;
    background: #BBB;
    border-radius: 5px; }

/**
* Developed by katapema@yahoo.com
*
* Usage:
* - Make sure html template has at least these components
*	<label class="ZukToggle"><input type="checkbox"><span></span></label>
*/
.ZukToggle {
  display: inline-block;
  background: #ccc;
  transition: 0.5s; }
  .ZukToggle .ZukToggleChk {
    display: none; }
  .ZukToggle .ZukToggleLbl {
    display: block;
    padding: 0px 5px;
    background: #fff;
    margin: 3px 30px 3px 3px;
    transition: 0.5s;
    color: #333; }
  .ZukToggle:has(.ZukToggleChk:checked) {
    background: #000; }
  .ZukToggle .ZukToggleChk:checked + .ZukToggleLbl {
    margin: 3px 3px 3px 30px;
    font-weight: bold;
    color: #000; }

.ZukTooltip {
  position: relative;
  display: inline-block; }
  .ZukTooltip .ZukTooltipTxt {
    visibility: hidden;
    max-width: 70vw;
    width: 400px;
    background-color: black;
    color: #fff;
    padding: 10px;
    border-radius: 6px;
    position: absolute;
    z-index: 1; }
  .ZukTooltip:hover .ZukTooltipTxt {
    visibility: visible; }

/**
* Developed by katapema@yahoo.com
*
* Usage:
* - Make sure html template has at least these components
*	<div class="ZukFormDiv"...>
*		<label ...>...</label>
*		<div class="ZukFormDivCtr" ...>
*			<input ...>...</input>
*			<div class="err hide ..." ...></div>
*		</div>
*	</div>
*/
.ZukFormDiv {
  container: ZukFormDiv / inline-size;
  margin-bottom: 5px; }
  .ZukFormDiv label:first-child {
    display: table-cell;
    min-width: 200px;
    text-align: right;
    vertical-align: top;
    padding-right: 5px; }
  .ZukFormDiv .ZukFormDivCtr {
    display: table-cell;
    width: 100%; }
    .ZukFormDiv .ZukFormDivCtr input[type=text], .ZukFormDiv .ZukFormDivCtr textarea {
      width: 100%; }
  .ZukFormDiv .err {
    display: block;
    font-size: 0.9em;
    padding-top: 5px;
    color: #000; }
  .ZukFormDiv:after {
    content: "";
    display: table;
    clear: both; }

@container ZukFormDiv (width < 400px) {
  .ZukFormDiv label:first-child {
    display: block;
    width: 100%;
    text-align: left; }
  .ZukFormDiv .ZukFormDivCtr {
    display: block;
    width: 100%; } }

/**
* Developed by katapema@yahoo.com
*
* The stacked form arrange the labels and controls in vertically aligned (on top of the other)
* Usage:
* - Make sure html template has at least these components
* <form class="ZukFormStack">
*	  <div>
*		  <label ...>...</label>
*		  <div ...>
*			  <input ...>...</input>
*		  </div>
*			<div class="err hide ..." ...></div>
*	  </div>
* </form>
*/
.ZukFormStack > div:not(:last-child) {
  margin-bottom: 5px; }

.ZukFormStack > div > label {
  display: block; }

.ZukFormStack .err {
  background: #eee;
  padding: 6px 8px;
  border-radius: 6px;
  color: #444;
  margin-top: 6px; }
  .ZukFormStack .err:before {
    content: '⚠';
    margin-right: 5px; }

body {
  margin: 0;
  padding: 0;
  background: #f1f1f1; }

.hide {
  display: none !important; }

#title {
  background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
  color: #fff;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  margin: 0 0 5px 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px; }