@import url("/css/fontawesome-5.13.0-all.min.css");

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

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: "liga" 1;

  /* additional rules */
  text-align: center;
  vertical-align: text-bottom;
}
/* Rules for sizing the icon. */
.md.md-16 { font-size: 16px; }
.md.md-18 { font-size: 18px; }
.md.md-24 { font-size: 24px; }
.md.md-36 { font-size: 36px; }
.md.md-48 { font-size: 48px; }
.md.s { width: 20px; text-align: center; font-size: 16px; } /* under 24px may not look clean */
.md.rl { transform: rotate(270deg); } /* rotate-right */
.md.rr { transform: rotate(90deg); } /* rotate-right */
.md.rh { transform: rotate(180deg); } /* rotate-half = 180 degree */

/* Rules for using icons as black on a light background. */
.md.md-dark { color: rgba(0, 0, 0, 0.54); }
.md.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.md.md-light { color: rgba(255, 255, 255, 1); }
.md.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

.ms {
  font-family: 'Material Symbols Outlined';
  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;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga" 1;
  text-align: center;
  vertical-align: text-bottom;
}
.ms.ms-18 { font-size: 18px; }
.ms.ms-24 { font-size: 24px; }
.ms.ms-36 { font-size: 36px; }
/************************** END Material Icons *********************/

/************************** Font-Awesome *********************/
[class^="fa-"], [class*=" fa-"] {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  
  font-family: 'Font Awesome 5 Free';
  font-size: 14px;
  font-weight: 900;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  box-sizing: border-box;
  width: 24px; line-height: 24px;
  text-align: center;
  vertical-align: text-bottom; 
}
[class^="fa-"].s, [class*=" fa-"].s { 
  width: 20px; line-height: 16px;
}
[class^="fa-"].r, [class*=" fa-"].r { font-weight: 400; }
/************************** END Font-Awesome *********************/
/* other color
  tinyMCE blue: #2276d2
  > darker-variation: #004390, #0054b0, #1064c0;
  google chrome default (before update 80) blue-ish outline color: #4d90fe
*/
/* ionic2 color chart
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222
*/
:root {
  --color-primary: #387ef5;
  --color-primary-dark: #0054b0;
  --color-second: #32db64;
  --color-danger: #f53d3d;
  --color-danger-dark: #c9302c;
  
  --ktx-red: #e31a21;
}



* { position: relative; box-sizing: border-box; /* transition: width 0.5s, height 0.5s, font-size 0.3s, margin 0.3s, padding 0.3s, background 0.3s; */
-webkit-text-size-adjust: 100%; /* Safari font-size inconsistency fix */
}
html { font-family:'Open Sans'; height: 100%; font-size: 16px; font-weight: 400; color: #212121; }
body { height: 100%; margin: 0; padding: 0; font-size: 0.75rem;
  background: #f1f1f1;
}
div { vertical-align:top; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 10px; }
ul { margin:0; padding:0; list-style: none; }

a, a:visited { cursor: pointer; color: #212121; text-decoration: none; transition: color 0.3s; }
a:hover { color:#1064c0; }

label a { vertical-align: top; }

form.inline { display: inline-block; }

input[type=text], input[type=email], input[type=password],
 input[type=tel], input[type=number], input[type=date], input[type=search], select, textarea {
  min-width: 200px; width: 300px;
  padding: 5px; border: 1px solid #aaa; border-radius: 2px;
  background: #ffe;
}
select option { height: 30px; }
select option:hover { border: 0; background: red; }
select option:focus { color: red; }
/*** hide spinner on input[type=number] ***/
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
   margin: 0; -webkit-appearance: none; -moz-appearance: textfield;
}
input[type=number] { -moz-appearance: textfield; } /* firefox fix */
input[type=text], input[type=email], input[type=password],
 input[type=tel], input[type=number], input[type=date], input[type=search], select { height: 29px; }
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus,
 input[type=tel]:focus, input[type=number]:focus, input[type=date]:focus, input[type=search]:focus,
 select:focus, textarea:focus {
  outline: none; /* replace to box-shadow: default chrome outline is now black border (chrome update 80 change) */
  box-shadow: 0 0 2px 1px rgba(77,144,254, 0.7); /* #4d90fe */
  background: #ffb;
}
input[type=radio], input[type=checkbox] {
  cursor: pointer; width: 18px; height: 18px; margin: 3px 5px;
}
input[type=radio] + label, input[type=checkbox] + label {
  cursor: pointer; vertical-align: top; margin-right: 5px; line-height: 24px;
}
input[type=radio]:hover + label,  input[type=radio] + label:hover, 
 input[type=checkbox]:hover + label,  input[type=checkbox] + label:hover { color: #f00; }
input[type=radio]:disabled, input[type=radio].disabled,
 input[type=checkbox]:disabled, input[type=checkbox].disabled { cursor: auto; }

input[type=submit], input[type=button], button {
  font-family:'Open Sans'; 
  cursor: pointer; 
  min-width: 120px; padding: 5px 15px; margin: 0 0 10px;
  border: 1px solid #1064c0; border-radius: 2px;
  background: #387ef5;
  color: #fff; font-size: 13px; font-weight: bold; text-transform: capitalize;
  transition: all 0.7s ease;
  -webkit-appearance: none; /* fix for Safari rounded button */
}
input[type=submit]:hover, input[type=button]:hover, button:hover,
 input[type=submit]:focus, input[type=button]:focus, button:focus, a:focus > input[type=submit], a:focus > input[type=button], a:focus > button {
  outline: none; /* replace to box-shadow: default chrome outline is now black border (chrome update 80 change) */
  box-shadow: 0 0 2px 1px rgba(77,144,254, 0.7); /* #4d90fe */
  background: #0054b0; border-color: #004390;
}
input[type=submit]:disabled, button:disabled, button.disabled {
  cursor: not-allowed; background: #ccc; border-color: #aaa;
}
button:disabled, button.disabled { cursor: not-allowed !important; }
input[type=submit].inline, input[type=button].inline, button.inline { height: 29px; padding: 0; margin: 0; }
input[type=submit].btn-warn, input[type=button].btn-warn, button.btn-warn { background: #d92f2f; border-color: #c01919; }
input[type=submit].btn-warn:hover, input[type=button].btn-warn:hover, button.btn-warn:hover { background: #c01919; border-color: #b00909; }

tr.grayed td { color: #999; }

*:not(html):not(body)::-webkit-scrollbar { width: 7px; height: 7px; }
*:not(html):not(body)::-webkit-scrollbar-thumb { background: rgba(0,0,0, 0.25); }

@media screen and (max-width: 700px) {
  input[type=text], input[type=email], input[type=password],
   input[type=tel], input[type=number], input[type=date], input[type=search], select, textarea {
     width: 100%; max-width: none; margin: 2px 0;
  }
  button, input[type=button], input[type=submit] { width: 100%; }
}



.w100, input.w100 { width: 100px; }
.w150, input.w150 { width: 150px; }
.w200, input.w200 { width: 200px; }
.w300, input.w300  { width: 300px; }
.w400, input.w400  { width: 400px; }
.w500, input.w500  { width: 500px; }
.h100 { height: 100px; }
.h120 { height: 120px; }
.h600 { height: 600px; }
.h700 { height: 700px; }
input.w100, input.w150, input.w200, input.w300, input.w400,
 select.w100, select.w150 {
  min-width: initial; /* for IE */ min-width: auto;
}
.wrapper-input.w150 { width: 150px; }

.primary { color: #387ef5; }
.secondary { color: #0f9d58; }
.danger { color: #f53d3d; }
.black { color: #333; }
.blue { color: #00f; }
.orange { color: #ffa500; }
.err { color: #f00; }
.green-text { color: #009900; }
.purple { color: #6f42c1; }

.bg-purple { background: #6f42c1; }

.popup-base { cursor: pointer; position: relative; }
.popup-base:hover { cursor: auto; }
.popup-base .popup-pane { display:none; }
.popup-base:hover .popup-pane, .popup-base:hover .popup-help, .popup-base:hover .popup-tip { font-family: 'Open Sans'; display: block; }
.popup-help {
  display: none; position: absolute; z-index: 1;
  top: 10px; left: 10px;
  min-width: 300px; max-width: 400px; padding: 15px;
  background: rgba(0,0,0, 0.8); border-radius: 3px;
  color: #fefefe; text-align: left; font-size: 10px;
}
.popup-help h6 { margin: 0 0 10px 0; font-size: 14px; }
.popup-help p, .popup-tip div, .popup-tip p { line-height: 14px; font-weight: normal; }
.popup-help.bottom { top: auto; bottom: 5px; }
.popup-help p.highlight { margin: 5px 0; color: #ffc; }
[class^="fa-"].popup-base, [class*=" fa-"].popup-base { font-size: 20px; line-height: 18px; }
.popup-tip {
  display: none; position: absolute; z-index: 1;
  left: 0; margin-top: 8px; width: 100%;
  color: #fefefe; text-align: center; font-size: 10px; white-space: nowrap;
}
.popup-tip::before { /* pointed arrow-up part of hovering popup-tip */
  content: ''; display: block; position: absolute; top: -8px; left: 50%;
  width: 0; height: 4px;
  border: 4px solid transparent;  border-top: 0;  border-bottom-color: rgba(0,0,0, 0.8);
  transform: translateX(-50%);
}
.popup-tip > div {
  position: absolute; left: 50%;
  min-width: 80px; max-width: 400px; padding: 5px 10px;
  background: rgba(0,0,0, 0.85); border-radius: 3px;
  transform: translateX(-50%);
}
.popup-tip.left > div { left: 0; transform: none; }
.popup-tip.right > div { left: initial; right: 0; transform: none; }

.float-l { float: left; }
.float-r { float: right; }
.clear-fix::after { content: ""; display: block; clear: both; height: 1px; }
.grayed { color: #999; }
.hide { display: none; }
.align-right { text-align: right; }
/*
.money { text-align: right }
.money::before { float: left; content: '$'; margin-right: 5px; }
*/
.money::before { content: '$'; margin-right: 5px; }
.price-usd::before { content: '$'; margin-right: 3px; }
.price-krw::before { content: '\20a9'; margin-right: 3px; }
input.price-usd::before,
input.price-krw::before { display: none; }

.inform { padding-left: 3px; font-size: 0.6rem; }
div.spacer-h { height: 1px; margin: 20px; border-top:1px solid #ddd; }
hr.spacer-h { height: 1px; margin: 20px; border: 0; border-top:1px solid #ddd; }
.spacer-h.m50 { margin: 50px 0; }
.warning-counter {
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 5px;
  border-radius: 8px;
  background: #cc0033;
  color: #eee;
  text-align: center;
  font-size: 10px;
  line-height: 16px;
  transform: translate(3px, -50%);
}
.show-mobile { display: none; }

.track-signature { border: 1px solid #ddd; border-radius: 5px; }
.track-signature img { max-width: 100%; }
.input-group .output.track-signature {
  max-width: 400px;
}
.spinner {
  vertical-align: top;
  -webkit-animation: spin 1s infinite linear;
  animation: spin 1s infinite linear;
}

[class^="col-"], [class*=" col-"] { display: inline-block; vertical-align: top; }
.group-col { font-size: 0; }
.group-col [class^="col-"], .group-col [class*=" col-"] { font-size: 0.75rem; }
.group-col .col-2 { width: calc(50% - 2px); margin-right: 4px; }
.group-col .col-3 { width: calc(33% - 2px); margin-right: calc(0.5% + 3px); }
.group-col .col-4 { width: calc(25% - 3px); margin-right: 4px; }
.group-col [class^="col-"]:last-child, .group-col [class*=" col-"]:last-child { margin-right: 0; font-size: 0.75rem; }

.panel {
  display: inline-block; vertical-align: top;
  min-width: 400px;
  margin: 0 10px 10px 0; padding: 20px 25px; border: 1px solid #ccc; border-radius: 1px; background: #fff; text-align: left;
  box-shadow: 0 1px 3px rgba(0,0,0, 0.2);
}
.panel:last-child { margin-right: 0; }
.panel.block { width: 100%; margin-right: 0; }
.panel.menu { padding: 10px; }
.panel.menu .menu-item { display: inline-block; margin: 0 10px 0 0; }
.panel.menu .menu-item:last-child { margin: 0; }

.in-panel-flex {
  display: flex;
  align-items: flex-start;
  gap: 50px;
}
.in-panel-flex > .in-panel-panel { min-width: 300px; }

.btn-group { margin-top: 20px; }
.btn-group.group-col { display: inline-block; }

.input-group { min-height: 30px; }
.input-group label, .input-group input, .input-group select, .input-group textarea { margin-bottom: 5px; }
.input-group > label { display: inline-block; vertical-align: top; min-width: 150px; font-weight: bold; color: #0054b0; font-size: 0.75rem; }
.input-group > label:not(:first-child) { margin-left: 20px; }
.input-group > label.required::after { content: '*'; color: #f53d3d; margin-left: 5px; }
.input-group .cell { display: inline-block; max-width: calc(100% - 180px); }
.input-group input[type=radio] + label { min-width: initial; /* for IE */ min-width: auto; margin: 0; }
.input-group input[type=radio]:hover + label,
.input-group input[type=radio] + label:hover { color:#f00; }
.input-group ~ table { margin-top: 20px; }
.input-group.multi { margin: 0; }
.input-group .multi-input-wrapper { display: inline-block; max-width: calc(100% - 155px); }
.input-group .output { display: inline-block; margin-bottom: 5px; font-weight: bold; }

.flex {
  display: flex;
  align-items: center;
}
.inline-flex {
  display: inline-flex;
  align-items: center;
}
.input-group .col-n .flex {
  justify-content: space-between;
  gap: 5px;
  width: 300px;
}
.input-group .flex input,
.input-group .flex select {
  min-width: auto;
  width: auto;
}
.input-group .flex .input-city { width: 140px; }
.input-group .flex .input-state { width: 60px; }
.input-group .flex .input-zip { width: 90px; }

.input-group .wrapper-labeled {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;

  width: 300px;
  height: 29px;
  margin-bottom: 5px;
  border: 1px solid #aaa;
  border-radius: 2px;
}
.input-group .wrapper-labeled input {
  width: 100%;
  min-width: auto;
  height: 27px;
  margin: 0;
  border: 0;
}
.input-group .wrapper-labeled > label {
  display: flex;
  justify-content: center;
  align-items: center;

  min-width: 30px;
  height: 100%;
  margin: 0;
  border: 1px solid #aaa;
  border-width: 0 1px;
  background: #f7f7f7;
  text-align: center;

  font-size: 10px;
}
.input-group .wrapper-labeled > label.text {
  font-weight: bold;
  text-transform: uppercase;
}
.input-group .wrapper-labeled > label:first-child { border-width: 0 1px 0 0; }
.input-group .wrapper-labeled > label:last-child { border-width: 0 0 0 1px; }


.input-group .wrapper-box-radio { 
  display: inline-flex; 
  gap: 5px;
  margin-bottom: 5px;
}
.input-group .wrapper-box-radio [type=radio] { display: none; }
.input-group .wrapper-box-radio [type=radio] + label {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100px;
  height: 50px;
  background: #eee;
  border: 2px solid #999;
  border-radius: 5px;
}
.input-group  .wrapper-box-radio input[type=radio] + label:hover {
  border-color: #2276d2;
  color: #2276d2;
}
.input-group  .wrapper-box-radio [type=radio]:checked + label {
  background: #b3e5fc;
  border-color: #2276d2;
  color: #2276d2;
  font-weight: bold;
}


.wrapper-toggle .toggle-checker,
.wrapper-toggle .toggle-target { display: none; }
.wrapper-toggle .toggle-check-label {
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  gap: 5px;

  margin: 0;
}
.wrapper-toggle .toggle-check-label + .toggle-check-label {
  margin-left: 5px;
}
.wrapper-toggle .toggle-check-label .md {
  display: none;
  color: #555;
}
.wrapper-toggle .toggle-check-label:hover span { color: red; }
.wrapper-toggle .toggle-check-label:hover .md { color: #000; }
.wrapper-toggle .toggle-check-label.hide { display: none; }


.wrapper-toggle-container .toggle-container { display: none; }
.wrapper-toggle-container input[type=checkbox].toggle-src,
 .wrapper-toggle-container input[type=radio].toggle-src,
 .wrapper-toggle-container input[type=radio].radio-label-src { display: none; }
.wrapper-toggle-container input[type=checkbox].toggle-src + label.toggle-btn,
 .wrapper-toggle-container input[type=radio].toggle-src + label.toggle-btn,
 .wrapper-toggle-container input[type=radio].radio-label-src + label.radio-label-btn,
 .wrapper-toggle-container input[type=radio].radio-label-src ~ .radio-label-wrapper label.radio-label-btn {
  font-family: 'Open Sans';
  cursor: pointer; display: inline-block;
  min-width: 120px;
  padding: 5px 15px 5px 5px; margin: 0 0 10px;
  border: 1px solid #1064c0; border-radius: 2px; background: #387ef5;
  line-height: 18px; color: #fff; text-align: center;
  font-size: 13px; font-weight: bold; text-transform: capitalize;
  transition: all 0.7s ease;
}
.wrapper-toggle-container input[type=checkbox].toggle-src + label.toggle-btn::before,
 .wrapper-toggle-container input[type=radio].toggle-src + label.toggle-btn::before,
 .wrapper-toggle-container input[type=radio].radio-label-src + label.radio-label-btn::before,
 .wrapper-toggle-container input[type=radio].radio-label-src ~ .radio-label-wrapper label.radio-label-btn::before {
  font: normal normal normal 14px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  float: left; width: 14px; margin: 0 10px 0 2px; line-height: 18px; text-align: left;
}
.wrapper-toggle-container input[type=checkbox].toggle-src + label.toggle-btn::before { content: '\f096'; }
.wrapper-toggle-container input[type=radio].toggle-src + label.toggle-btn::before,
 .wrapper-toggle-container input[type=radio].radio-label-src + label.radio-label-btn::before,
 .wrapper-toggle-container input[type=radio].radio-label-src ~ .radio-label-wrapper label.radio-label-btn::before { content: '\f1db'; }
.wrapper-toggle-container input[type=checkbox].toggle-src:checked + label.toggle-btn,
.wrapper-toggle-container input[type=checkbox].toggle-src ~ label.toggle-btn:hover,
 .wrapper-toggle-container input[type=radio].toggle-src ~ label.toggle-btn:hover,
 .wrapper-toggle-container input[type=radio].radio-label-src + label.radio-label-btn:hover,
 .wrapper-toggle-container input[type=radio].radio-label-src ~ .radio-label-wrapper label.radio-label-btn:hover {
  background: #0054b0; border-color: #004390;
}
 .wrapper-toggle-container input[type=radio].toggle-src:checked + label.toggle-btn,
 .wrapper-toggle-container input[type=radio].radio-label-src:checked + label.radio-label-btn { cursor: unset; background: #0054b0; border-color: #004390; }
.wrapper-toggle-container input[type=checkbox].toggle-src:checked + label.toggle-btn::before { content: '\f046'; }
.wrapper-toggle-container input[type=radio].toggle-src:checked + label.toggle-btn::before,
 .wrapper-toggle-container input[type=radio].radio-label-src:checked + label.radio-label-btn::before { content: '\f192'; }
 
.wrapper-toggle-container label.toggle-tab {
  font-family: 'Open Sans'; cursor: pointer;
  z-index: 1; display: inline-block;
  min-width: 100px; height: 40px;
  margin: 0; padding: 8px 20px;
  background: #f7f7f7; border: 1px solid #ddd; border-top: 3px solid #ccc; border-bottom: 1px solid #ccc;
  line-height: 20px; text-align: center; color: #333;
  font-size: 13px; font-weight: bold; text-transform: capitalize;
  transition: color 0.5s, background 0.3s;
}
.wrapper-toggle-container label.toggle-tab::before { 
  content: ''; position: absolute; z-index: 1; top: -3px; left: -1px;
  width: calc(100% + 2px); height: 3px;
  background: #0054b0; transform: scaleX(0); transition: transform 0.3s; 
}
.wrapper-toggle-container label.toggle-tab .tab-counter {
  display: inline-block;
  min-width: 18px; line-height: normal;
  margin-left: 10px; padding: 1px 3px 2px; background: #0054b0; border-radius: 5px;
  text-align: center; color: #fff; font-size: 11px; font-style: normal;
}
.wrapper-toggle-container label.toggle-tab:hover::before { transform: scaleX(1); }
.wrapper-toggle-container label.toggle-tab ~ .toggle-tab { margin-left: -10px; }
.wrapper-toggle-container label.toggle-tab ~ .tab-divider { z-index: 0; top: -1px; width: 100%; margin-bottom: 20px; border-top: 1px solid #ccc; }
.wrapper-toggle-container .toggle-src:not(:checked) + label.toggle-tab:hover { z-index: 2; background: #eee; color: #0054b0; }
.wrapper-toggle-container .toggle-src:checked + label.toggle-tab { z-index: 3; background: #fff; border-bottom: 1px solid #fff; color: #387ef5; }
.wrapper-toggle-container .toggle-src:checked + label.toggle-tab::before { background: #387ef5; transform: scaleX(1); }
.wrapper-toggle-container .toggle-src:checked + label.toggle-tab .tab-counter { background: #387ef5; border-radius: 5px; }

.overlay-container-change-wrapper .wrapper-toggle-container { height: 100%; }
.overlay-container-change-wrapper .wrapper-toggle-container .container-change { height: calc(100% - 65px); overflow-y: auto; }
.overlay-container-change-wrapper .wrapper-toggle-container input[type=checkbox].toggle-src + label.toggle-btn,
 .overlay-container-change-wrapper .wrapper-toggle-container input[type=radio].toggle-src + label.toggle-btn,
 .overlay-container-change-wrapper .wrapper-toggle-container input[type=radio].radio-label-src + label.radio-label-btn,
 .overlay-container-change-wrapper .wrapper-toggle-container input[type=radio].radio-label-src ~ .radio-label-wrapper label.radio-label-btn { margin-bottom: 0; }

.file-wrapper label {
  cursor: pointer; display: block; max-width: 100%; width: 400px; min-height: 80px;
  padding: 10px; border: 2px solid #2276d2; border-radius: 5px;
  background: #b3e5fc; color: #2276d2;
  text-align: center;
}
.file-wrapper label.empty:not(:hover) { background: #eee; border-color: #999; color: #333; } 
.file-wrapper label .preview { margin: 5px auto 10px; }
.file-wrapper label input[type=file] { cursor: pointer; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; }

.input-group .wrapper-input { display: inline-table; }
.wrapper-input { width: 300px; margin-bottom: 5px; border: 1px solid #aaa; border-radius: 2px; }
.wrapper-input .row { display: table-row; width: 100%; border-collapse: collapse; }
.wrapper-input .row > label, .wrapper-input .row > .cell { display: table-cell; }
.wrapper-input .row > label { width: 1%; min-width: 30px; padding-top: 5px; border: 1px solid #aaa; background: #f7f7f7; text-align: center; }
.wrapper-input .row > label:first-child { border-width: 0 1px 0 0; }
.wrapper-input .row > label:last-child { border-width: 0 0 0 1px; }
.wrapper-input .row > label [class^="fa-"], .wrapper-input .row > label [class*=" fa-"] { line-height: 16px; }
.wrapper-input .row > label [class^="btn-"]:hover, .wrapper-input .row > label [class*=" btn-"]:hover,
 .wrapper-input .row > label[class^="btn-"]:hover > *, .wrapper-input .row > label[class*=" btn-"]:hover > * { color: #f00; }
.wrapper-input .row > label p { margin: 0 7px; line-height: 16px; font-size: 10px; font-weight: bold; }
.wrapper-input input { width: 100%; min-width: auto; height: 27px; margin: 0; border: 0; }
.wrapper-input .popup-help { top: 30px; left: 35px; }
.input-group .wrapper-textarea { display: inline-block; }
.wrapper-textarea textarea { width: 100%; height: calc(100% - 25px); }
.wrapper-textarea .chr-left { padding: 0 0 5px 10px; font-size: 0.6rem; }
.wrapper-textarea .chr-left::after { content: ' characters'; }
.wrapper-radio label.label-radio { display: inline-block; vertical-align: top; min-width: 150px; margin-bottom: 5px; font-weight: bold; color: #2276d2; font-size: 0.75rem; }
.wrapper-search { margin-bottom: 20px; }
.wrapper-search::before {
  content: "\f002"; z-index: 1; position: absolute; display: block; top: 7px; left: 7px;
  font-family: 'Font Awesome 5 Free';
  font-size: 14px;
  font-weight: 900;
}
.wrapper-search [type=search] { padding-left: 30px; }
.wrapper-search .btn-list-reset, .wrapper-search .btn-filter-search { line-height: 18px; }


a [class^="fa-"], a [class*=" fa-"], a .md,
[class^="btn-"]:not(.btn-group), [class*=" btn-"]:not(.btn-group) { cursor: pointer; transition: color 0.2s, background-color 0.7s; }
[class^="fa-"][class*=" btn-"], [class*=" fa-"][class^="btn-"], [class*=" fa-"][class*=" btn-"], .md[class^="btn-"], .md[class*=" btn-"] { color: #333; }
[class^="fa-"][class*=" btn-"]:hover, [class*=" fa-"][class^="btn-"]:hover, [class*=" fa-"][class*=" btn-"]:hover, .md[class^="btn-"]:hover, .md[class*=" btn-"]:hover {
  /* color: #f00; */ color: #387ef5
}
a[class^="btn-del-"], a[class*=" btn-del-"],
input[class^="btn-del-"], input[class*=" btn-del-"],
.fa-remove.btn-del, .fa-remove[class^="btn-del-"], .fa-remove[class*=" btn-del-"] { color: #d9534f; }
.md.btn-del, .md[class^="btn-del-"], .md[class*=" btn-del-"],
.md.btn-close, .md[class^="btn-close-"], .md[class*=" btn-close-"] { color: #d9534f !important; } /* use in place of btn-del when Material-Icon 'close' is used with bold letter */
a[class^="btn-del-"]:hover, a[class*=" btn-del-"]:hover,
input[class^="btn-del-"]:hover, input[class*=" btn-del-"]:hover,
.fa-remove.btn-del:hover, .fa-remove[class^="btn-del-"]:hover, .fa-remove[class*=" btn-del-"]:hover,
.md.btn-del:hover, .md[class^="btn-del-"]:hover, .md[class*=" btn-del-"]:hover,
.md.btn-close:hover, .md[class^="btn-close-"]:hover, .md[class*=" btn-close-"]:hover { color: #c9302c !important; }
button.btn-bg-red,
button.btn-del, button[class^="btn-del-"], button[class*=" btn-del-"] { background: #d9534f; border-color:#ac2925; }
button.btn-bg-red:hover,
button.btn-del, button[class^="btn-del-"]:hover, button[class*=" btn-del-"]:hover { background: #c9302c; border-color:#8c0905; }

button.btn-icon { padding: 5px 15px 5px 5px; }
button.btn-icon .md { margin: 0 5px; font-size: 18px; }

.md.md-btn { width: 30px; background: #eee; border-radius: 20%; line-height: 30px; text-align: center; color: #212121; transition: color 0.3s, background-color 0.3s; }
.md.md-btn:hover { background: #b3e5fc; color: #1064c0; }

.data-group { display: none; }

.wrapper { min-width: 320px; min-height: 100%; padding-bottom: 80px; }
.wrapper.wrapper-lg-table { display: table; width: 100%; height: 100%; }
.wrapper.wrapper-lg-table .panel-lg-table { width: 100%; }
.wrapper.tbl-1200 { min-width: 1200px; }
.container-flex { display: flex; flex-wrap: wrap; }
.container-flex-v { display: flex; flex-direction: column; }
.container-flex-v > .panel { width: 100%; margin-right: 10px; }
.container-box { margin: 10px 0; padding: 10px; border: 1px solid #ccc; border-radius: 3px; background: #eee; }
.container-box h2 { color: #2276d2; }

.list-filter::after { content: ''; display: block; height: 1px; margin-bottom: 20px; border-bottom: 1px solid #ddd; }
.list-filter h3 { margin-top: 0; }
.list-filter .btn-group { margin: 0; }

.img-frame {
  max-height: 150px;
  padding: 10px; border: 2px solid #ccc; border-radius: 5px; background: #f7f7f7;
  font-size: 0; text-align: center;
}
.img-frame img { max-width: 100%; max-height: 120px; padding: 3px; border: 1px solid #ccc; background: #fff; }
.img-frame + .file-wrapper { margin-top: 10px; }

@media screen and (max-width: 700px) {
  .show-mobile { display: block; }
  
  .panel { min-width: initial; width: 100%; margin-right: 0; padding: 20px 15px; }
  .panel.menu .menu-item {  display: block; margin: 0 0 5px; }
  .panel.menu .menu-item:last-child { margin: 0; }
  [class^="col-"].block, [class*=" col-"].block { display: block; }
  .btn-group :not(:last-child) input[type=submit], .btn-group input[type=submit]:not(:last-child),
  .btn-group :not(:last-child) input[type=button], .btn-group input[type=button]:not(:last-child),
  .btn-group :not(:last-child) button, .btn-group button:not(:last-child) { margin-bottom: 5px; }
  .input-group > label { display: block; }
  .input-group .multi-input-wrapper { max-width: none; }
  .input-group .output { padding-left: 10px; }
  .input-group .wrapper-input { display: table; width: 100%; margin: 2px 0; }
  
  .input-group.mobile-side-by-side { display: flex; }
  .input-group.mobile-side-by-side > * { flex-grow: 1; }
  .input-group.mobile-side-by-side .output { padding: 0; }
  
  .wrapper { min-height: 100vh; }
  .wrapper.tbl-1200 { min-width: initial; max-width: 100%; }
  .container-flex-v > .panel { margin-right: 0; }
}

/***** header *****/
#header-toast {
  position: fixed; z-index: 950; top: -100%;
  width: calc(100% - 50px);
  padding: 20px 10px; margin: 0 25px;
  background: rgba(0,0,0, 0.8);
  border-radius: 0 0 5px 5px;
  color: #fff; text-align: center; font-size: 20pt; text-transform: uppercase;
}
#header-toast .btn-toast-close { z-index: 1; position: absolute; top: 10px; right: 10px; }
#header-toast .btn-toast-close:hover { color: #f77; }
#header-toast .toast-msg {
  padding: 0 50px 0 30px;
}
#header-toast .toast-msg .laravel-errors:not(:first-child) { padding-top: 5px; }
#header-toast .info { color: #7f7; }
#header-toast .err, #header-toast .laravel-errors { color: #f77; }
@media screen and (max-width: 700px) {
  #header-toast { width: calc(100% - 20px); margin: 0 10px; }
}

header {
  z-index: 100; position: fixed; top: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0, 0.2);
}
header section.header-main { 
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  
  height: 50px;
  padding: 5px 20px;
  font-size: 0;
}
header .header-title { width: 200px; padding: 5px 0; }
header .header-title a { display: inline-block; }
header .header-pos { display: none; line-height: 40px; font-size: 16px; }

header .header-title h1 { margin: 0; font-size: 16px; }
header .header-title img { vertical-align: top; max-height: 30px; margin-right: 5px; }
header .header-menu [class^="fa-"], header .header-menu [class*=" fa-"],
header .header-menu .md { width: 30px; height: 30px; line-height: 30px; margin: 5px 0; border-radius: 50%; background: #eee; transition: background-color 0.3s; }
header .header-menu [class^="fa-"]:hover, header .header-menu [class*=" fa-"]:hover, header .header-menu .md:hover { background: #b3e5fc; }
header .header-menu > a, header .header-menu > i.md { display: inline-block; margin-left: 3px; }
header .header-menu > :first-child { margin-left: 0; }
header .header-menu .btn-header-menu { display: none; }
header .header-menu .popup-tip { margin-top: 2px; }
header .header-menu .btn-header-profile .popup-tip div { left: initial; right: -50px; text-align: center; transform: none; }
header .header-menu .counter {
  position: absolute; top: 0; right: -5px; width: 16px; height: 16px; border-radius: 8px; background: #f00; color: #fff; text-align: center; font-size: 10px;
}
header .header-menu .header-search { display: inline-block; margin: 0 10px; }
header .header-menu .header-search input[type=search] { z-index: 1; width: 200px; height: 30px; margin: 5px; transition: margin 0.5s; }
header .header-menu .header-search input[type=search] + .fa-times { display: none; }

.nav-mm {
  position: fixed; z-index: 1; top: 50px; /* height of header */ left: 0;
  width: 50px; height: calc(100% - 50px); /* 100% - height of header */
  padding: 10px 0;
  border-right: 1px solid #ccc;
  background: white;
  color: var(--ktx-red);
  font-size: 0;
  transition: width 0.3s linear;  
}
.nav-mm.expanded { width: 200px; font-size: inherit; }
.nav-mm li:hover { font-size: 0.75rem; }
.nav-mm:not(.expanded) > ul > li:hover { left: -5px; min-width: 255px; }
.nav-mm > ul > li + li { margin-top: 5px; }
.nav-mm > ul > li:last-child:hover { background: none; left: 0; }
.nav-mm.expanded > ul > li { min-width: 200px; }
.nav-mm li > a { cursor: inherit; display: block; padding: 5px 10px; color: var(--ktx-red); transition: color 0.2s; }
.nav-mm li > a[href] { cursor: pointer; }
.nav-mm li:hover > a { background: #ddd; }
.nav-mm li > a > .md { 
  cursor: inherit; width: 30px;
  margin-right: 10px;
  vertical-align: middle;
}
.nav-mm li > a > [class^="fa-"], .nav-mm li > a > [class*=" fa-"] { 
  width: 30px; line-height: 24px;
  margin-right: 10px;
  vertical-align: middle;
  font-size: 16px;
}
.nav-mm li > ul {
  display: none;
  position: absolute;
  top: 34px; left: 55px;
  min-width: 200px;
  padding-bottom: 5px;
  background: white;
}
.nav-mm.expanded li > ul {
  position: relative;
}
.nav-mm.expanded ul > li > ul { top: 0px; left: 0px; padding-top: 5px; }
.nav-mm:not(.expanded) ul > li:hover > ul,
.nav-mm.expanded li.open > ul {
  display: block;
}
.nav-mm:not(.expanded) ul > li:hover > ul {
  width: 200px;
  border: 1px solid #ccc;
  border-left: 0;
  border-top: 0;
}
.nav-mm:not(.expanded) ul > li:hover > ul a,
.nav-mm li.open > ul a {
  padding: 5px 20px;
  color: black;
}
.nav-mm .btn-nav-expand {
  width: 30px; margin: 10px 0 0 10px; text-align: center;
  color: var(--ktx-red);
  transition: transform 0.3s linear;

  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
.nav-mm.expanded .btn-nav-expand { transform: rotate(180deg); } 
.nav-mm .btn-nav-collapse { display: none; }
.nav-mm + main { padding-left: 70px; /* nav width + 20 */ transition: padding-left 0.3s linear; } 
.nav-mm.expanded + main { padding-left: 220px; /* nav width + 20 */ }

.nav-mm .btn-expand-submenu {
  display: none;
}
.nav-mm .btn-expand-submenu .md {
  font-size: 16px;
}

@media (min-width: 701px) {
  .nav-mm.expanded ul {
    height: calc(100% - 80px);

    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
  }
  .nav-mm.expanded ul::-webkit-scrollbar { 
      display: none;  /* Safari and Chrome */
  }
  
  .nav-mm.expanded .btn-expand-submenu {
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
  }
}
@media screen and (max-width: 700px) {
  header section.header-main {  padding: 5px 10px; }
  header .header-title { width: calc(100% - 150px); }
  header .header-title img { max-width: 100%; margin-right: 0; }
  header .header-pos { display: none; }
  
  header .header-menu { white-space: nowrap; }
  header .header-menu a { margin: 0 1px; }
  header .header-menu .btn-header-menu { display: initial; }
  header .header-menu .header-search input[type=search] { margin-right: -30px; }
  header .header-menu .header-search input[type=search] + .fa-times { display: inline-block; }
    
  header section.header-submenu { padding: 0; }
  header section.header-submenu h1 { height: 40px; padding: 10px; font-size: 0.8rem; font-weight: normal; }
  header section.header-submenu h1 .sub { font-size: 0.7rem; }
  header section.header-submenu ul { display: none; }
  
  .nav-mm, .nav-mm.expanded {
    z-index: 101;
    display: none;
    width: 100%;
    height: calc(100% - 50px);
    border: 0;
    font-size: inherit;
    background: #333;
    color: #ddd;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .nav-mm + main, .nav-mm.expanded + main { padding-left: 5px; } 
  .nav-mm .btn-nav-expand { display: none; }
  .nav-mm .btn-nav-collapse {
    display: block;
    width: 100vw; height: 30px;
    background: #333;
    color: #eee;
    text-align: center;
  }
  .nav-mm > ul {
    min-height: calc(100% - 30px);
  }
  .nav-mm:not(.expanded) > ul > li:hover { left: 0; }
  .nav-mm li > a { color: #ddd; }
  .nav-mm li:hover > a {
    background: #000;
    color: #fff;
  }
  .nav-mm.expanded ul > li > ul { top: 0px; left: 0; }
  .nav-mm li > ul,
  .nav-mm.expanded li > ul { top: 0; left: 0; width: 100%; padding: 5px 0; background: none; }
  .nav-mm ul > li:hover > ul a { color: #ddd; }
  .nav-mm li > ul li { width: 100%; }
  .nav-mm li > ul a { padding-left: 20px }
}
/***** END: header *****/



/***** footer *****/
footer {
  z-index: 2; position: absolute; bottom: 0;
  box-sizing: border-box; width: 100%; height: 80px; padding: 10px;
  background: rgba(0,0,0, 0.8);
  color: #999;
  font-size: 0.6rem; text-align: center;
}
.wrapper footer a { color: #ddd; } 
.wrapper footer a:hover { color: #ddd; text-decoration: underline; }

footer .developer { margin-top: 10px; }
footer .developer .title {
  display: inline-block; margin-left: 5px;
  color: #fff; font-size: 10px; font-weight: bold; text-transform: uppercase;
}
footer .developer .br-divider { display: inline-block; }
footer .developer .title em { color: #00aeff; font-style: normal; }

@media screen and (max-width: 700px) {
  footer .developer .br-divider { display: block; font-size: 0; }
}
/***** END: footer *****/



/***** pagination *****/
section.pagination { margin-top: 20px; font-size: 0; }
section.pagination li {
  display: inline-block; vertical-align: top;
  width: 40px; height: 40px; margin-right: 3px;
  border: 2px solid #ccc; border-radius: 4px;
  text-align: center; font-size: 0.9rem; font-weight: bold;
}
section.pagination li:last-of-type { margin: 0; }
section.pagination li:not(.grayed):not(.current):hover { background: #b3e5fc; border-color: #2276d2; }
section.pagination li.grayed { background: #eee; color: #ccc;  padding: 8px 0;}
section.pagination li.current { border-color: #2276d2; color: #013871; font-size: 1rem; padding: 7px 0; }
section.pagination a { display: block; padding: 8px 0; }
@media screen and (max-width: 700px) {
  section.pagination { text-align: center; }
  section.pagination li { width: 18px; height: auto; margin: 0 1px; padding: 0; border: 0; border-radius: 0; font-size: 0.8rem; }
  section.pagination li.grayed { background: none; color: #ccc;  padding: 4px 0;}
  section.pagination li.current { width: 24px; margin: 0 3px; padding: 4px 0; background: #b3e5fc; border-radius: 4px; color: #013871; font-size: 0.8rem; }
  section.pagination a { padding: 4px 0; }
  section.pagination li:first-of-type { margin-right: 5px }
  section.pagination li:last-of-type { margin-left: 5px }
}
/***** END: pagination *****/



/***** main-content *****/
main {
  z-index: 0; margin: 0 auto; padding: 70px 10px 20px;
  /* for IE */
  display: flex;
  flex-wrap: wrap;
}
header.title + main { padding-top: 150px; }
header.title-sub + main { padding-top: 180px; }
@media screen and (max-width: 700px) {
  main { display: block; padding: 70px 5px 20px; }
  header.title + main,
  header.title-sub + main { padding-top: 110px; }
}
main h2 { margin: 0 0 20px; }


main section .inner { border-top: 2px solid #ccc; border-bottom: 2px solid #ccc; }
/***** END: main-content *****/

/***** default table styling *****/
th.th-3 { min-width: 30px; width: 30px; }
th.th-4 { min-width: 40px; width: 40px; }
th.th-5 { min-width: 50px; width: 50px; }
th.th-8 { min-width: 80px; width: 80px; }
th.th-10 { min-width: 100px; width: 100px; }
th.th-12 { min-width: 120px; width: 120px; }
th.th-15 { min-width: 150px; width: 150px; }
th.th-20 { min-width: 200px; width: 200px; }
th.th-30 { min-width: 300px; width: 300px; }

table { width: 100%; /* border-collapse: collapse; */ border-spacing: 0; background: #fff; }
table th, table td {
  /* background-clip: padding-box !important; /* Firefox bug-fix: background color overwrite border-color */
  border-collapse: collapse; padding: 5px;
  line-height: 24px; text-align: left; white-space: nowrap;
}
table th { color: #0054b0; }
table thead tr:last-child th { border-bottom: 2px solid #333; }
table th, table tfoot td { vertical-align: top; font-weight: bold; }
table tbody:first-child tr:first-child th, table tbody:first-child tr:first-child td,
 table tfoot:first-child tr:first-child th, table tfoot:first-child tr:first-child td { border-top: 1px solid #e0e0e0; }
 
table tr:nth-child(2n) td { background: #f7f7f7; }
table tbody th, table tbody td { min-height: 23px; font-size: 11px; border-bottom: 1px solid #e0e0e0; }
table tbody tr:hover td { background: #e0e0e0; }
table tbody td.not-found, .not-found { padding: 10px; color: #f00; }
table td [class^="fa-"], table td [class*=" fa-"], table td .md { vertical-align: middle; }

table [type=text], 
table input[type=email], 
table input[type=tel], 
table input[type=number], 
table input[type=date], 
table input[type=search], 
table select { 
  height: 34px; border: 1px solid #ccc; border-width: 0 0 0 1px; border-radius: 0; font-family: 'Open Sans'; font-size: 11px;
}
.tbl-input input:focus, .tbl-input select:focus { box-shadow: inset 0 0 1px #4d90fe; }
.tbl-input tbody td { background: none !important; padding: 0; }
.tbl-input tbody [type=text],
.tbl-input tbody [type=number],
.tbl-input tbody select {
  min-width: auto;
  width: 100%;
}
.tbl-input thead .tbl-col-btn {
  min-width: 40px;
  width: 40px;
}
.tbl-input tbody .tbl-col-btn {
  text-align: center;
}

/*** table with scrollable tbody ***/
table.tbl-scroll { display: block; }
table.tbl-scroll thead, table.tbl-scroll tbody { display: block; width: 100%; }
table.tbl-scroll tr { display: flex; width: 100%; } 
table.tbl-scroll thead { height: 36px; }
table.tbl-scroll tbody { overflow-y: auto; }
table.tbl-scroll tbody tr:first-child td { border-top: 0; }

@media screen and (max-width: 700px) {
  /*
  table:not(.no-responsive), table:not(.no-responsive) tbody, table:not(.no-responsive) tr,
   table:not(.no-responsive) th, table:not(.no-responsive) td { display: block; }
  table:not(.no-responsive) { border: 0; }
  table:not(.no-responsive) thead { display: none; }
  table:not(.no-responsive) tbody tr { border: 3px solid #bbb; }
  table:not(.no-responsive) tbody tr:not(:last-child) { margin-bottom: 5px; }
  table:not(.no-responsive) tbody td { padding-left: 125px; border: 0; }
  table:not(.no-responsive) tbody td:not(:last-child) { border-bottom: 1px solid #bbb; }
  table:not(.no-responsive) tbody td::before {
    content: ''; box-sizing: border-box;
    position: absolute; top: 0; left: 0; display: block; 
    width: 120px; height: 100%;
    padding: 3px 5px; border-right: 1px solid #bbb; background: #d7d7d7;
    font-weight: bold; font-weight: normal;
  }
  table:not(.no-responsive) tbody td:first-child { border-top: 0; }
  table:not(.no-responsive) tbody td.not-found { padding: 10px; }
  */
  table + table { margin-top: 10px; }
}
/***** DataTables.js styling *****/
.datatables-wrapper .dataTables_paginate { margin-top: 20px; font-size: 0; }
.datatables-wrapper .dataTables_paginate .paginate_button { 
  display: inline-block; vertical-align: top;
  min-width: 40px; height: 40px; margin-right: 3px; padding: 8px 5px;
  border: 2px solid #ccc; border-radius: 4px;
  text-align: center; font-size: 0.9rem; font-weight: bold;
}
.datatables-wrapper .dataTables_paginate .paginate_button.current {
  cursor: initial; border-color: #2276d2; color: #013871; font-size: 1rem; padding: 7px 5px;
}
.datatables-wrapper .dataTables_paginate .paginate_button.disabled { cursor: initial; background: #eee; color: #ccc; }
.datatables-wrapper .dataTables_paginate .paginate_button:not(.disabled):not(.current):hover { background: #b3e5fc; border-color: #2276d2; }
.datatables-wrapper .dataTables_paginate .paginate_button.previous,
.datatables-wrapper .dataTables_paginate .paginate_button.next { font-size: 0; }
.datatables-wrapper .dataTables_paginate .paginate_button.previous::before {
  content: "\f053";
  font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 14px;
  line-height: 20px;
}
.datatables-wrapper .dataTables_paginate .paginate_button.next::before {
  content: "\f054";
  font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 14px;
  line-height: 20px;
}
.datatables-wrapper .wrapper-quick-paging { display: inline-block; margin-left: 30px; }
.datatables-wrapper .wrapper-quick-paging .input-quick-paging {
  min-width: auto; width: 70px; height: 40px; padding-right: 25px; border-radius: 4px; text-align: center;
}
.datatables-wrapper .wrapper-quick-paging .btn-quick-paging { position: absolute; top: 12px; right: 5px; }

/*** smaller pageinate buttons ***/
.datatables-wrapper.paginate-sm .dataTables_paginate { margin-top: 10px; }
.datatables-wrapper.paginate-sm .dataTables_paginate .paginate_button { 
  display: inline-block; vertical-align: middle;
  width: 24px; height: 24px;
  margin: 0; border: 0; padding: 0;
  border-radius: 2px; line-height: 24px; text-align: center; font-size: 12px;
}
.datatables-wrapper.paginate-sm .dataTables_paginate .paginate_button.current::after {
  content: ''; display: block; position: absolute; bottom: 0; width: 12px; height: 2px; margin: 0 6px; background: #2276d2;
}
.datatables-wrapper.paginate-sm .dataTables_paginate .paginate_button.previous { font-size: 0; margin-right: 5px; }
.datatables-wrapper.paginate-sm .dataTables_paginate .paginate_button.next { font-size: 0; margin-left: 5px; }
.datatables-wrapper.paginate-sm .dataTables_paginate .paginate_button.previous::before { content: "\f053"; font: normal normal normal 14px/1 FontAwesome; line-height: 24px; }
.datatables-wrapper.paginate-sm .dataTables_paginate .paginate_button.next::before { content: "\f054"; font: normal normal normal 14px/1 FontAwesome; line-height: 24px; }

.dataTables_wrapper .dataTables_filter label::before {
  content: "\f002"; z-index: 1; position: absolute; display: block; top: 1px; left: 10px;
  font-family: 'Font Awesome 5 Free';
  font-size: 14px;
  font-weight: 900;
}
.dataTables_wrapper .dataTables_filter input[type=search] {
  margin: 0 0 10px 0;
  padding-left: 30px;
}

/** scrollable table ***
* <th> should have set min-width + width except last cell (stretch to 100%) -> min-width prevents cell-squeeze due to last cell stretching
*/
.datatables-wrapper .dataTables_scroll .dataTables_scrollHead table { width: 100% !important;; }
.datatables-wrapper .dataTables_scroll thead th:last-child { width: 100% !important; }
.datatables-wrapper .dataTables_scroll .dataTables_scrollBody thead + tbody td { border-top: 0; }
.datatables-wrapper .dataTables_scroll .dataTables_scrollHead,
 .datatables-wrapper .dataTables_scroll .dataTables_scrollHeadInner,
 .datatables-wrapper .dataTables_scroll .dataTables_scrollBody { min-width: 100%; width: auto !important; }
.datatables-wrapper.datatables-search-scroll,
 .datatables-wrapper.datatables-search-scroll > .dataTables_wrapper,
 .datatables-wrapper.datatables-search-scroll > .dataTables_wrapper > div { height: 100%;  }
.datatables-wrapper.datatables-search-scroll .dataTables_scroll {
  height: calc(100% - 39px); /* search input height */ border-bottom: 1px solid #e0e0e0; overflow-x: auto; overflow-y: hidden;
}
.datatables-wrapper.datatables-search-scroll .dataTables_scrollHead th:last-child { min-width: 60px; }
.datatables-wrapper.datatables-search-scroll .dataTables_scrollBody th:last-child { min-width: 80px; }
.datatables-wrapper.datatables-search-scroll .dataTables_scrollBody { 
  max-height: calc(100% - 36px); /* table header */ overflow-x: hidden !important;
}
.datatables-wrapper.datatables-search-scroll .dataTables_scrollBody tbody tr:last-child td { border-bottom: 0; }

@media screen and (max-width: 700px) {
  .datatables-wrapper .dataTables_paginate { text-align: center; }
  .datatables-wrapper .dataTables_paginate .paginate_button { width: 18px; height: auto; margin: 0 1px; padding: 4px 0; border: 0; border-radius: 0; font-size: 0.8rem; }
  .datatables-wrapper .dataTables_paginate .paginate_button.current { width: 24px; margin: 0 3px; padding: 4px 0; background: #b3e5fc; border-radius: 4px; color: #013871; font-size: 0.8rem; }
  .datatables-wrapper .dataTables_paginate .paginate_button.disabled { background: none; color: #ccc;  padding: 4px 0; }
  .datatables-wrapper .dataTables_paginate .paginate_button.previous { margin-right: 5px }
  .datatables-wrapper .dataTables_paginate .paginate_button.next { margin-left: 5px }
}
/***** END:default table styling *****/

/***** overlay panel + loading panel *****/
.ingen-overlay-base {
  display: none;
  position: fixed; z-index: 900; top: 0; left: 0;
  width: 100%; height: 100%; background: rgba(0,0,0, 0.7);
  overflow: auto;
}
.ingen-overlay-base .overlay-inner {
  display: none; /* flex when displayed */
  width: calc(100% - 100px); max-width: 1200px; min-height: 400px; max-height: calc(100% - 100px);
  margin: 50px auto; padding-bottom: 10px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 20px rgba(0,0,0, 1);

  flex-direction: column;
}
.ingen-overlay-base section.bar {
  padding: 10px;
  background: #eee;
  border-radius: 10px 10px 0 0;
}
.ingen-overlay-base section.bar h3 {
  padding-left: 10px; margin: 0;
}
.ingen-overlay-base section.bar .overlay-close {
  position: absolute; top: 10px; right: 10px; cursor: pointer;
  font-size: 0.6rem; font-weight: normal;
}
.ingen-overlay-base section.bar .overlay-close:hover { color: #f00; }
.ingen-overlay-base section.bar .overlay-close .md { vertical-align: middle; }
/* .ingen-overlay-base section.bar .overlay-close .fa-remove { font-size: 18px; line-height: 18px; } */
.ingen-overlay-base section.body { display: flex; min-height: 350px; /* height: calc(100% - 40px); */ padding: 20px; overflow-y: auto; }
.ingen-overlay-base section.body > * { width: 100%; }
.ingen-overlay-base .overlay-load-spinner {
  display: none; /* by default, the spinner is hidden */
  position: absolute; top: calc(50% - 40px); left: calc(50% - 40px);
  width: 70px; height: 70px; margin: auto;
  border-radius: 50%; border: 7px solid #999; border-top-color: #eee;
  -webkit-animation: overlay-loading-spin 1s infinite linear;
  animation: overlay-loading-spin 1s infinite linear;
}

.ingen-overlay-base .overlay-with-btns { margin-bottom: 50px; overflow: hidden; }
.ingen-overlay-base .overlay-with-btns + .overlay-btns { position: absolute; bottom: 0; width: auto; }
.ingen-overlay-base .overlay-with-btns > .overlay-content { width: calc(100% + 12px); height: 100%; padding-right: 10px; overflow-y: auto; }
.ingen-overlay-base .overlay-with-btns > .overlay-content::-webkit-scrollbar { width: unset; height: 3px; }

.ingen-overlay-base .ingen-calendar { z-index: 901; }

.ingen-overlay-base.level-2 { background: none; }
.ingen-overlay-base.level-2 .overlay-inner { width: calc(100% - 200px); max-width: 1100px; min-height: 400px; max-height: calc(100% - 200px); margin: 100px auto; }

.form-submit-loading {
  z-index: 991; position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.7);
}
.form-submit-loading::before {
  content: ''; position: relative; display: block; top: calc(50% - 25px);
  width: 50px; height: 50px; margin: auto;
  border: 5px solid #999; border-radius: 50%; border-top-color: #eee;
  -webkit-animation: overlay-loading-spin 1s infinite linear;
  animation: overlay-loading-spin 1s infinite linear;
}

@-webkit-keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-webkit-keyframes overlay-loading-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes overlay-loading-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@media screen and (max-width: 700px) {
  .ingen-overlay-base .overlay-inner,
  .ingen-overlay-base.level-2 .overlay-inner { 
    width: 100%; height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
  }
  .ingen-overlay-base section.bar { 
    height: 50px;
    padding: 15px 10px;
    border-radius: 0;
  }
  .ingen-overlay-base section.body { 
    height: 100%;
  }
}
/***** END: overlay panel + loading panel *****/


/***** customized tooltip (ingenTooltip): by default, fixed to element. use .loose to float next to mouse cursor *****/
.ingen-tooltip {
  display: none;
  position: absolute; z-index: 800; top: 50%; left: 50%; top:0;left:0;
  margin-top: 5px; padding: 5px 10px;
  background: rgba(50,50,50, 0.95); border-radius: 3px;
  color: #fefefe; text-align: center; font-size: 10px; white-space: nowrap;
  /* transform: translateX(-50%); */
}
.ingen-tooltip::before {
  content: ''; display: block; position: absolute; top: -8px; left: 50%;
  width: 0; height: 4px;
  border: 4px solid transparent;  border-top: 0;  border-bottom-color: rgba(50,50,50, 0.95);
  transform: translateX(-50%);
}
.ingen-tooltip.loose { margin: 0; transform: none; }
.ingen-tooltip.loose::before { display: none; }
.ingen-tooltip.on { visibility: visible !important; display: block !important; }
.ingen-overlay-base .ingen-tooltip { z-index: 100; position: fixed; }


/***** back-to-top button *****/
#back-to-top {
  cursor: pointer; display: none;
  z-index: 100; position: fixed; bottom: 10px; right: 5px;
  width: 50px; height: 50px;
  background: #fff; border: 1px solid #ccc; border-radius: 50%;
  font-size: 0; text-align: center;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0,0,0, 0.2);
}
#back-to-top::before,
#back-to-top::after {
  content: "\f077";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  position: relative; display: block;
  width: 100%; height: 100%; line-height: 40px;
  font-size: 1.5rem;
  transition: all 0.7s;
}
#back-to-top:hover { background: #b3e5fc; color: #013871; }
#back-to-top:hover::before,
#back-to-top:hover::after { transform: translateY(-100%); }
@media screen and (max-width: 700px) {
  #back-to-top { width: 40px; height: 40px; bottom: 10px; right: 10px; }
  #back-to-top::before,
  #back-to-top::after { line-height: 35px; font-size: 1rem; }
}


/***** search preview *****/
.ingen-search-preview {
  display: none; position: fixed; z-index: 110; top: 50px; right: 20px;
  max-height: calc(100% - 70px);
  padding: 20px 0; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0, 0.2);
  overflow: hidden;
}
.ingen-search-preview > .frame { width: calc(100% + 12px); height: calc(100% - 20px); padding: 0 20px; overflow-y: auto; }
.ingen-search-preview > .frame::-webkit-scrollbar { width: unset; height: 3px; }
.ingen-search-preview > .frame > .body { width: 350px; }
.ingen-search-preview > .frame + .view-all { height: 20px; padding: 0 20px; text-align: right; }
.ingen-search-preview .no-results { color: #f53d3d; }
    

/***** alert-message panel *****/
#alert-pane {
  display: none;
  position: fixed; z-index: 990; top: 0; left: 0;
  width: 100%; height: 100%; background: rgba(0,0,0, 0.7);
  overflow: auto;
}
#alert-pane .alert-inner {
  top: 80px; width: 400px; max-width: calc(100% - 20px); min-height: 150px;
  margin: auto;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 0 20px rgba(0,0,0, 1);
}
#alert-pane section.bar {
  min-height: 40px; padding: 10px;
  border-radius: 5px 5px 0 0;
  background: #eee;
}
#alert-pane section.bar h3 {
  padding-left: 10px; margin: 0;
}
#alert-pane section.bar .alert-close {
  position: absolute; top: 10px; right: 10px; cursor: pointer;
  font-size: 12px; font-weight: normal;
}
#alert-pane section.bar .alert-close:hover { color: #f00; }
#alert-pane section.bar .alert-close .fa-remove { font-size: 18px; line-height: 18px; }
#alert-pane section.body { padding: 10px 20px 60px; }
#alert-pane section.btn-group { position: absolute; bottom: 0; width: 100%; text-align: center; }
#alert-pane section.btn-group button,
#alert-pane section.btn-group input[type=button],
#alert-pane section.btn-group input[type=submit] { width: auto; margin: 10px 3px; }
/***** data for javascript uses *****/
#data-group { display: none; }



/***** print-friendly pages *****/
.wrapper.print-friendly { display: block; background: #fff; }
.wrapper.print-friendly .tbl-inv-report * { color: #000 !important; }
@media print {
  .wrapper.print-friendly #header-toast,
   .wrapper.print-friendly header,
   .wrapper.print-friendly nav,
   .wrapper.print-friendly footer,
   .wrapper.print-friendly #back-to-top,
   .wrapper.print-friendly .ingen-overlay-base,
   .wrapper.print-friendly .ingen-tooltip,
   .wrapper.print-friendly .ingen-search-preview,
   .wrapper.print-friendly .print-hide { display: none !important; }
}



/***** table: reorder buttons *****/
.reorder-btns .btn-prev, .reorder-btns .btn-next { 
  display: inline-block;
  width: 24px; height: 24px;
  border: 1px solid #ccc; border-radius: 3px; background: #eee;
  color: #013871; text-align: center;
}
.reorder-btns .btn-prev:hover, .reorder-btns .btn-next:hover { background: #fff; color: #f00; }
tr:first-child:not(.deleted) .reorder-btns .btn-prev,
tr.deleted + tr:not(.deleted) .reorder-btns .btn-prev,
tr:last-child:not(.deleted) .reorder-btns .btn-next { cursor: initial; color: #999; }
tr:first-child:not(.deleted) .reorder-btns .btn-prev:hover,
tr.deleted + tr:not(.deleted) .reorder-btns .btn-prev:hover,
tr:last-child:not(.deleted) .reorder-btns .btn-next:hover { background: #eee; }

/***** Tinymce plugin *****/
.tinymce-wrapper .mce-branding-powered-by { display: none; }

/***** other *****/
.group-btn-list { position: absolute; top: 20px; right: 25px; }
.btn-list-new { position: absolute; top: 20px; right: 25px; }
main > div.clear { width: 100%; clear: both; }
.panel-view-icons { position: absolute; top: 10px; right: 10px; }
.panel-view-icons [class^="fa-"], .panel-view-icons [class*=" fa-"] { font-size: 18px; line-height: 24px; }
th.required::after { content: '*'; color: #f53d3d; margin-left: 5px; }







/***** common styles in some of the pages *****/

/***** header (login form) *****/
header .header-login {
  min-width: 600px;
  margin-left: auto;
  text-align: right;
  font-size: 12px;
}
header .header-login [type=submit] { width: 70px; height: 29px; margin-bottom: 0; vertical-align: top; }
header .header-login form { padding: 5px 0; }
header .header-login form input { min-width: auto; width: 40%; max-width: 200px; margin-left: 5px; }
header .header-login form b { color: #0054b0; }
header .header-login form input + b { margin-left: 10px; }
header .header-login form .md { line-height: 20px; }


/***** record list (advanced search) *****/
.wrapper-adv-search #cShowAdvSearch { display: none; }
.wrapper-adv-search .panel-adv-search { display: none; margin-bottom: 30px; }
.wrapper-adv-search #cShowAdvSearch:checked ~ .panel-adv-search { display: block; }
.wrapper-adv-search .panel-adv-search .wrapper-search-date { width: 120px; margin: 0 5px; }
.wrapper-adv-search .panel-adv-search .btn-group { margin-top: 10px; }

.wrapper-adv-search #ckShowTrackSearch { display: none; }
.wrapper-adv-search .md.btn-track-search { line-height: 18px; }
.wrapper-adv-search .panel-track-search { display: none; margin-bottom: 30px; }
.wrapper-adv-search #ckShowTrackSearch:checked ~ .panel-track-search { display: block; }


/***** overlay: search from customer list *****/
.overlay-search-customers .datatables-search-scroll { margin-bottom: 20px; }
.overlay-search-customers .dataTables_scroll th:nth-child(1) { min-width: 40px; width: 40px; }
.overlay-search-customers .dataTables_scroll th:nth-child(2) { min-width: 150px; width: 150px; }
 .overlay-search-customers .dataTables_scroll th:nth-child(3) { min-width: 200px; width: 200px; }
.overlay-search-customers .dataTables_scroll th:nth-child(4) { min-width: 100px; width: 100px; }
.overlay-search-customers .dataTables_scroll th:nth-child(5) { min-width: 200px; width: 200px; }

.overlay-search-customers .dataTables_scroll td:nth-child(3),
 .overlay-search-customers .dataTables_scroll td:nth-child(5) { max-width: 200px; overflow-x: hidden; text-overflow: ellipsis; }

.overlay-search-customers .input-group.cust-accnt { margin-top: 20px; margin-bottom: 10px; }


/***** overlay: shipment x item table *****/
.tbl-ship-items thead th:nth-child(1) { width: 60px; }
.tbl-ship-items thead th:nth-child(3),
 .tbl-ship-items thead th:nth-child(5) { width: 100px; }
.tbl-ship-items thead th:nth-child(4) { width: 50px; }