/*
from Xiang
Date: 2016-06-17
Object: Flex Box
*/
.flex-row {
  display: flex;
  align-items: center;
  flex-flow: row nowrap; /* <‘flex-direction’> || <‘flex-wrap’> */
  justify-content: flex-start;
}
.flex-col {
  display: flex;
  align-items: center;
  flex-flow: column nowrap; /* <‘flex-direction’> || <‘flex-wrap’> */
  justify-content: flex-start;
}
.flex-row > *,
.flex-col > * { flex: 0 0 auto; }
.flex-row > .flex-separator {
  width: 4px;
  align-self: stretch;
  background: #555555;
  border-radius: 5px;
  margin: 0 5px;
}
.flex-col > .flex-separator {
  height: 4px;
  align-self: stretch;
  background: #555555;
  border-radius: 5px;
  margin: 5px 0;
}
.flex-expander { flex: 1 0 auto; } /* none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] */
.fieldColon { width: 8px; }
.formLayout { border: 0; border-top: 0; }

/*for message always on top*/
.messager-window { z-index: 99999 !important; }
.window-mask { z-index: 99998 !important; }
.hideElement > div,
.hideElement .jqx-grid-cell-left-align,
.hideElement .jqx-checkbox,
.hideElement .jqx-button { display: none; }
.borderBox {
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  box-sizing: border-box !important;
}

.button-group,
.button-group > div,
.button-group > button {
  display: flex;
  align-items: center;
  flex-flow: row nowrap;;
  justify-content: flex-start;
}

.button-group > div:last-child,
.button-group > button:last-child {
  margin-right: 0;
}

.button-group > div,
.button-group > button {
  justify-content: center;
  margin-right: 5px;
}

.button-group.left-margin > div:first-child,
.button-group.left-margin > button:first-child {
  margin-left: 0;
}

.button-group.left-margin > div,
.button-group.left-margin > button {
  justify-content: center;
  margin-left: 5px;
  margin-right: 0;
}

/* .button-group > div > img,
.button-group > button > img {} */
.button-group > div > span,
.button-group > div > div,
.button-group > button > span,
.button-group > button > div { margin-left: 5px; }
.button-group .btn-admin { box-shadow: 0 2px 3px rgba(255, 0, 0, 0.3); }
.button-group .flex-separator {
  width: 4px;
  align-self: stretch;
  background: #555555;
  border-radius: 5px;
  margin: 0 5px;
}

/* ::-webkit-scrollbar {
  _display: none;
} */

/* @media (min-width: 1080px) {
  .modal-lg {
    width: 100%;
  }
} */

/* NOTE: select2 library ---------- ---------- ---------- */
.select2-container--default.select2-container--disabled .select2-selection--single { cursor: not-allowed; }

/* NOTE: Alawys put-bottom classes ---------- ---------- ---------- */
.temp-hide { display: none; }
.no-pointer { pointer-events: none !important; }
.no-border-radius { border-radius: 0 !important; }

/*******************************************************************************************************
 * NOTE: RPT application beautify
 */

/* ########## ########## ########## ########## ########## ########## ########## ##########
  NOTE: GENERAL
   ########## ########## ########## ########## ########## ########## ########## ########## */
textarea { resize: none; }
.full-width { width: 100%; }
.full-height { height: 100%; }
.fullview-content {
  width: 100%;
  height: 100%;
}
.fullview-content .content {
  width: 100%;
}
.zero-absolute,
.five-absolute,
.ten-absolute,
.responsive-absolute {
  position: absolute;
}
.zero-absolute {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.five-absolute {
  top: 5px;
  bottom: 5px;
  left: 5px;
  right: 5px;
}
.ten-absolute {
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
}
.responsive-absolute {
  top: 15px;
  bottom: 15px;
  left: 15px;
  right: 15px;
}
.scrollable { overflow: auto; }
.scroll-horizontal-only {
  overflow-x: auto;
  overflow-y: hidden;
}
.scroll-vertical-only {
  overflow-x: hidden;
  overflow-y: auto;
}
.body-header { margin: 10px 0 20px; }
.section-header { font-weight: bold; }
.section-divider-3 { margin: 3px 0; }
.section-divider-5 { margin: 5px 0; }
.section-divider { margin: 10px 0; }
/* .content-submodule {} */
.content-header .fa-caret-right { margin: 0 10px; }
.form-horizontal .form-group label { opacity: 0.7; }
.required { color: red; }
.either { color: blue; }
.bg-white { background-color: #ffffff !important; }
.centered-image {
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}
.profile-frame {
  border: 1px solid rgba(1,1,1,0.1);
  border-radius: 5px;
  _box-shadow: 0 0 1px grey;
  top: 0;
  overflow: hidden;
}
.tabs-divider {
  margin-top: 10px;
  margin-bottom: 10px;
}
.tabs-eof {
  border: 0;
  margin-top: 0;
}
.font-size-inherit { font-size: inherit !important; }
.padding-left-zero { padding-left: 0 !important; }
.padding-right-zero { padding-right: 0 !important; }
.padding-top-zero { padding-top: 0 !important; }
.padding-bottom-zero { padding-bottom: 0 !important; }
.padding-zero { padding: 0 !important; }
.margin-left-zero { margin-left: 0 !important; }
.margin-right-zero { margin-right: 0 !important; }
.margin-top-zero { margin-top: 0 !important; }
.margin-bottom-zero { margin-bottom: 0 !important; }
.margin-zero { margin: 0 !important; }
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.disp-inline-block { display: inline-block !important; }
.no-iconscontainer + .iconscontainer { display: none !important; }
.invisible { visibility: hidden !important; }
.transparent { color: transparent !important; }
/* .number-input { text-align: right; } */
.admin-field {
  box-shadow: 0 2px 3px rgba(255, 0, 0, 0.3);
}

td {
  word-wrap: break-word;
}

.yellowCell {
  background-color: #ffffbb !important;
}
.redCell {
  background-color: #fbd7d6 !important;
}

.flex-dropdown .jqx-disableselect {
  display: flex;
}

.flex-dropdown .jqx-disableselect .jqx-dropdownlist-content {
  width: 0 !important;
  flex: 1 0 auto;
}

.table-borderless,
.table-borderless th,
.table-borderless td {
  border: 0px !important;
}

/* fix android camera freeze */
@keyframes androidWebViewCameraFix {
  0% { opacity: .2; }
  50% { opacity: .1; }
  100% { opacity: .2; }
}

.qrScan__androidWebViewCameraFix {
  width: 1px;
  height: 1px;
  animation: androidWebViewCameraFix 1s infinite;
  background-color: black;
}

.lowercase {
  text-transform: lowercase
}

.bgRed a,
.bgRedRed a,
.bgWarning a {
  color: #3c8dbc;
}

/* ########## ########## ########## ########## ########## ########## ########## ##########
  NOTE: EFFECT
   ########## ########## ########## ########## ########## ########## ########## ########## */
.blinking { animation: blinker 2s linear infinite; }
@keyframes blinker {
  50% { opacity: 0; }
}

/* NOTE: Nav-Tab - left tab */
.tabs-left {
  display: flex;
  align-items: flex-start;
  flex-flow: row nowrap; /* <‘flex-direction’> || <‘flex-wrap’> */
  justify-content: flex-start;

  box-shadow: 0 0 2px rgba(0,0,0,0.1);
}
.tabs-left > * { flex: 0 0 auto; }
.tabs-left > .nav-tabs {
  float: left;
  border: 0;
  min-width: 150px;
}
.tabs-left > .nav-tabs > li {
  float: none;
  margin-right: 0;
  border-top: 0;
  border-left: 3px solid transparent;
}
.tabs-left > .nav-tabs > li.active { border-left-color: #3c8dbc; }
/* .tabs-left > .nav-tabs > li > a {} */
.tabs-left > .nav-tabs > li.active > a { border-right-color: transparent; }
.tabs-left > .nav-tabs > li:first-of-type { margin-top: 10px; }
.tabs-left > .nav-tabs > li:last-of-type { margin-bottom: 10px; }
.tabs-left > .tab-content {
  flex: 1 0 auto;
  align-self: stretch;
}
/* Tab - tab to the left of the content */
/* .nav-tabs.tabs-left {
  border: none;
  border-right: 1px solid #ddd;
} */
/* .nav-tabs.tabs-left > li {
  float: none;
  margin-bottom: 0;
  margin-right: -1px;
} */
/* .nav-tabs.tabs-left > li > a {
  margin-right: 0;
  margin-bottom: 2px;
  border: 1px solid transparent;
  border-radius: 4px 0 0 4px;
} */
/* .nav-tabs.tabs-left > li.active > a {
  border: 1px solid #ddd;
  border-right-color: transparent;
} */

/* NOTE: Page Indicator ---------- ---------- ---------- */
.popover-top .popover,
.content-header .popover { max-width: 300px; }
.popover-top .popover,
.content-header .popover { top: 9px !important; }
.popover-top .popover .arrow,
.content-header .popover .arrow { top: 17px !important; }
.content-header a.page-indicator,
.content-header a.page-note {
  font-size: 24px;
  float: right;
  margin-left: 10px;
}
/* .content-header */ a.page-indicator { color: #4990ff; }
/* .content-header */ a.page-note { color: #ff3939; }
/* .content-header */ table.page-indicator,
/* .content-header */ table.page-note { margin: 0; }
.content-header table.page-indicator td:first-child,
.content-header table.page-indicator tbody th:first-child { text-align: center; /* 1st col is icon */ }
.content-header table.page-indicator .indicator-header,
.content-header table.page-note .indicator-header {
  font-size: 14px;
  font-variant: small-caps;
}
.section-header a.section-indicator { font-size: 18px; }

/* NOTE: select2 ---------- ---------- ----------
  Resolve temporary Placeholder being cut off
  https://github.com/select2/select2-bootstrap-theme/issues/77
*/
/* .select2-container .select2-search--inline,
.select2-container .select2-search--inline .select2-search__field { width: auto; } */
/*.select2-container .select2-selection.select2-selection--multiple .select2-search.select2-search--inline .select2-search__field:not([placeholder='']) {
  width: 100% !important; margin-right: 100000px;
}*/
.select2-container .select2-selection__rendered > *:first-child.select2-search--inline {
  width: 100% !important;
}
.select2-container .select2-selection__rendered > *:first-child.select2-search--inline .select2-search__field {
  width: 100% !important;
}

/* NOTE: index.php ---------- ---------- ---------- */
#app_name {
  padding-left: 15px;
  color: white;
}
.setting-no-footer .content-wrapper { bottom: 0; }
.setting-no-footer .main-footer { display: none; }

/* NOTE: user-profile.php ---------- ---------- ---------- */
/* button > *[class*="fa-"],
button > *[class*="far-"],
button > *[class*="fal-"],
button > *[class*="fas-"] { margin-right: 5px; } */

/* NOTE: link-account.php ---------- ---------- ---------- */
.user-userinfo { margin-bottom: 5px; }
.user-fullname { font-weight: bold; }
.user-typename { font-style: italic; }
/* .user-company {} */

/* NOTE: For iAccount Follow Up ---------- ---------- ---------- */
.fu-bg-yellow-emaid {
  background-color: #ffff99 !important;
}
.fu-bg-yellow {
  background-color: #ffff99 !important;
}
.fu-bg-orange {
  background-color: #f39c12 !important;
}
.fu-bg-red {
  background-color: #dd4b39 !important;
}
.fu-bg-pink {
  background-color: #ffd7d7 !important;
}
.jqx-grid-cell-hover-fresh.fu-bg-red,
.jqx-grid-cell-selected-fresh.fu-bg-red,
.jqx-grid-cell-hover-fresh.fu-bg-yellow,
.jqx-grid-cell-selected-fresh.fu-bg-yellow {
  background: inherit;
  color: inherit;
}