:root {
  --cartridge-item: 35px;
  --footer-height: 36px;
  --informations-color: rgb(70, 184, 218);
  --warning-color: rgb(238, 162, 54);
  --question-color: rgb(46, 109, 164);
  --error-color: rgb(212, 63, 58);
}

/**diable select text*/
body,
html {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome and Opera */
}

/* Remote to show arrow up/down */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] { --moz-appearance: textfield; }
input[type="number"]{ text-align: center; }
canvas {
  text-rendering: optimizeLegibility;
  font-kerning: none;
}
canvas.upper-canvas,
canvas.lower-canvas {
  text-rendering: optimizeLegibility;
  font-kerning: none;
}

.show { display: block; }
.sub-page {
  height: calc(100% - 96px);
  display: none;
  width: 100%;
  overflow: auto;
}
.sub-page.active { display: block; }
.info-data { font-size: 12pt; }
.tab-permiss-user.disabled {
  pointer-events: none !important;
  opacity: 0.4 !important;
}
.is-valid-border { border: 1px solid #dc3545; }

#table_Open_Temp_print .index_temp {
  width: 60px;
  text-align: center;
}
#table_Open_Temp_print .view_print { width: 350px; }
#table_Open_Temp_print td {
  /* [1.0.7.G] 24/12/2024 - SoPhol.Truong: update */
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  word-break: break-word;
  padding-left: 16px;
  padding-right: 8px;
}

#modalLoadAllTemplate .fixed-table-body,
#modalSaveAs .fixed-table-body {
  max-height: 180px;
  border: 1px solid #ddd;
}
#modalLoadAllTemplate .modal-footer { padding: .5rem !important; }
#modalLoadAllTemplate .search {
  width: 100%;
  margin-top: 0px !important;
}

/* Not using */
.nav-link-print-setting {
  font-size: 17px;
  font-weight: bold;
  border-radius: 0px !important;
  color: #284d47 !important;
}
.nav-link-print-setting:hover,
.nav-link-print-setting:focus {
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 0px !important;
}
.nav-link-print-setting .nav-link.active,
.nav-link-print-setting .show>.nav-link {
  color: #fff;
  background-color: #6d6d6d !important;
  border-radius: 0px !important;
}
.nav-link-print-setting .nav-link-print-setting.active,
.nav-link-print-setting .nav-item.show .nav-link {
  color: #fff;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
}
.nav-pills .nav-link-print-setting.active,
.nav-pills .show>.nav-link-print-setting {
  color: #fff !important;
  background-color: #6d6d6d !important;
}
/* End not using */

.icon-show-hide-setting-print {
  color: #fff;
  font-size: 17px;
  width: 30px;
  border: 2px solid #fff;
}

.toggle-on.btn {
  text-transform: uppercase;
  padding-right: 0px;
}
.toggle-off.btn {
  text-transform: uppercase;
  padding-left: 0px;
}

/**hoai add custom css*/
#printingPreview { height: 100%; }
/* [1.0.7.G] 06/01/2024 - SoPhol.Truong: show full srceen */
#printingPreview #preview-template.full-height {
  height: 100%;
}
#printingPreview #preview-template {
  height: calc(100% - 40px);
  overflow: auto;
  background: silver;
}
#printingPreview .desc { height: 40px; }
#printingPreview .desc .tab-content {
  display: none;
  height: 210px;
  overflow-x: auto;
  overflow-y: hidden;
}
#printingPreview.show-desc .desc { height: 215px; }
#printingPreview.show-desc .desc .tab-content { display: block; }
#printingPreview .table td { white-space: nowrap !important; }
#printingPreview .navbar { padding: 0px; }

ul.header {
  list-style-type: none;
  color: white;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
ul.header li a {
  display: block;
  color: white;
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
  line-height: 38px;
  text-decoration: none;
}

/**hoai add table fixed*/
.table-fixed { width: 100%; }
.bootstrap-dialog-header { width: 100%; }

.modal-body {
  max-height: calc(100vh - 195px);
  overflow-y: auto;
}
.bootstrap-datetimepicker-widget table td.day {
  width: 50px !important;
  height: 50px !important;
}
.btn-outline-secondary:hover {
  background: white !important;
  color: #6c757d !important;
}
.btn-outline-secondary.active:hover {
  background: #6c757d !important;
  color: white !important;
  border-color: #6c757d;
}
.btn-outline-secondary.active {
  background: #6c757d;
  color: white;
}
.pagination-detail { display: none !important; }

/* The side navigation menu */
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0);
  overflow-x: hidden;
  transition: 0.2s;
}
/* The side navigation menu */
.sidenav .menu-layer {
  height: 100%;
  width: 250px;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 40px;
  transition: 0.2s;
}
/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
.sidenav .icon {
  width: 25px;
  height: auto;
  margin-right: 5px;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover { color: #f1f1f1; }
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: relative;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-width: 450px) {
  .sidenav { padding-top: 15px; }
  .sidenav a { font-size: 18px; }
}
/**begin slide nav*/

select option {
  padding-top: 5px;
  padding-bottom: 5px;
}

.upQuickSetting {
  margin-top: 2px;
  padding-left: 10px;
}

.footer {
  height: var(--footer-height);
  background-color: var(--footer-color);
}
.footer-left {
  left: 0px;
  display: flex;
  align-content: center;
  align-items: center;
}
/* 01/06/2022 - SoPhol.Truong: update */
.footer-left > .printingTemplateName {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding-left: 4px;
}
.footer-right { right: 0px; }
.footer-text { color: white; }
.footer-build-version {
  background-color: #c00000;
  padding-left: 4px;
  padding-right: 4px;
}
/*-------------------------------------------------------------------------------------*/
.desc .quick-setting {
  width: unset;
  border: unset;
  font-size: 10pt;
}
.nav-user { padding: 0px 5px; }
.desc .navbar { height: 39px; }
ul.header li a {
  line-height: 40px;
  border-right: solid 1px white;
}
.navbar-custom-right {
  right: 0px;
  height: calc(100% - 1px);
  padding-top: 1px;
  padding-right: 1px;
}
.navbar-custom-left { left: 0px; }
.nav-item.disabled * { background-color: gray; }
.nav-item.disabled { opacity: 0.4; }

.modalPrintSettings input {
  height: calc(1.5em + .75rem);
  margin-top: 1px;
  margin-bottom: 1px;
  text-align: center;
}

ul.header li .active { background-color: var(--print-footer-tab-active); }
/* 01/03/2021 - SoPhol.Truong: aa */
ul.header li .active.warning-active,
ul.header li .warning-active { background-color: #FEE440; }
/* 24/08/2022 - SoPhol.Truong: update */
ul.header li .quick-settings-icon {
  /* [1.0.4.G] 21/08/2023 - SoPhol.Truong: Simulation */
  /* filter: invert(100%) sepia(5%) saturate(2142%) hue-rotate(290deg) brightness(112%) contrast(103%); */
  width: 16px;
  height: 16px;
  vertical-align: unset;
}

/* toggle */
.toggle.btn {
  min-height: unset;
  min-width: unset;
  border-radius: 22px;
  float: left !important;
}
.toggle-on,
.toggle-off,
.toggle-group,
.toggle-handle { height: 22px; }
.toggle-handle {
  background-color: rgb(192, 192, 192);
  vertical-align: unset;
  border-radius: 22px;
  padding-left: 10px;
  padding-right: 10px;
}
.toggle-group {
  transition: left 0.1s;
  -webkit-transition: left 0.1s;
}
.toggle-group .btn { font-size: 11px; }
input[type="checkbox"]:not(:checked) + .toggle-group{ left: calc(-100% + 12px); }
input[type="checkbox"]:checked + .toggle-group{ left: calc(0% - 12px); }
input[type="checkbox"]:disabled + .toggle-group label { background-color: rgba(108, 117, 125, 0.9); }

/* end toggle */
#printingPreview .desc .tab-content { overflow-y: auto }
#printingPreview .desc .phSettings .tab-content { height: unset; }

/* Keyboard ----------------------------------------------------------------------------------------------*/
#myKeyboard { font-weight: bold; }
#myKeyboard .modal-dialog { align-items: flex-end !important; }
#myKeyboard .hg-keyboard.modal-content { background-color: rgba(0, 0, 0, 0.1); }
#myKeyboard .hg-button-space { flex-grow: 8; }
#myKeyboard .hg-button.hg-number[data-skbtn="#"],
#myKeyboard .hg-button.hg-number[data-skbtn="+"],
#myKeyboard .hg-button.hg-number[data-skbtn=")"],
#myKeyboard .hg-button.hg-number[data-skbtn="$"],
#myKeyboard .hg-button.hg-number[data-skbtn="*"] { display: none; }
#myKeyboard .hg-button.hg-number[data-skbtn="-"]{ margin-right: 0px; }
#myKeyboard .hg-button.hg-number[data-skbtn="("] { visibility: hidden; }
#myKeyboard .hg-button.hg-number[data-skbtn="0"] { flex-grow: calc(10/20); }
#myKeyboard .hg-button.hg-number[data-skbtn="."] { flex-grow: calc(24/20); }
#myKeyboard .simple-keyboard.hg-theme-default.hg-layout-default .hg-button.hg-standardBtn[data-skbtn="apply"] { flex-grow: 1.04; }
#myKeyboard .simple-keyboard.hg-theme-default.hg-layout-number .hg-button.hg-number[data-skbtn="apply"] {
  flex-grow: calc(10/20);
  height: 105px;
  margin-top: -55px;
}
#myKeyboard .simple-keyboard.hg-theme-default .hg-button.hg-number[data-skbtn="{bksp_num}"] { margin-bottom: -55px; }
#selKeyboardLanguage {
  max-width: 50px;
  height: 2rem;
}
#myKeyboard .close:focus { border: 0px; }
#myKeyboard .simple-keyboard.hg-theme-default .hg-button { height: 50px; }
#myKeyboard .modal-body { max-height: unset; }
#myKeyboard .hg-number span {
  min-width: 20px;
  text-align: center;
}
#keyboardInput {
  height: 4rem;
  min-height: 4rem;
  max-height: 4rem;
}
#myKeyboard .modal-dialog-keyboard-text { min-width: 800px; }
#myKeyboard .modal-dialog-keyboard-number { min-width: 500px; }
/* end Keyboard ----------------------------------------------------------------------------------------------*/

/* print.html  */
#preview-template .upper-canvas {
  touch-action: none;
  user-select: none;
  pointer-events: none;
}
#printingPreview.show-desc #preview-template { height: calc(100% - 215px); }
#printingPreview .desc .tab-content { height: calc(100% - 39px); }
#modalLoadAllTemplate .modal-dialog,
#modalSaveAs .modal-dialog { min-width: 750px; }
#tableCartrigdes td { border-top: unset; }
.cartrige { margin: auto; }
.cartrige-label { line-height: 1rem; }
.cartrige-item-border {
  height: var(--cartridge-item);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.cartridge-item {
  min-width: 100px;
  width: 100%;
  height: var(--cartridge-item);
  position: relative;
  background-color: #e9ecef;
  border-radius: .25rem;
}
.cartridge-item .info{ color: var(--red); }
.cart-setting {
  filter: invert(1);
  border-width: 2px !important;
  border-color: white !important;
  width: 40px;
  height: 40px;
}
.cart-setting-icon-custom {
  width: 29px;
  height: 29px;
}
/* end print.html  */

/******************************************************************************************************/
.small-padding { padding: 0px 5px; }
#v-pills-tab a {
  width: 105px;
  height: 105px;
}
#group-label-setting-system { width: 80px; }
.contentsetting { width: calc(100% - 80px); }
.containerCenter { position: relative; }
.ver-hor-center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.nav-pills .nav-link.active {
  background-color: var(--main-color);
  color: white !important;
}

/* Calibration */
.expand-icon-custom {
  width: 32px;
  height: 32px;
}

/*end Calibration */

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.inputString { max-width: 200px; }
legend { color: var(--legend-title); }
/* battery saver */
#rangeBrightness { max-width: unset; }
.btn-group[disabled="disabled"] label{ opacity: 0.6; }
/* end setting.html */

/******************************************************************************************************/
/* design.html */
#modal-Load-All-Template-Design .modal-dialog {
  min-width: 750px;
}
#modalInkCost .modal-dialog,
#modalDateFormatManager .modal-dialog {
  min-width: 750px;
}
/* end design.html */

#modalInfoPrinter .modal-dialog { min-width: 750px; }

/*--------------------------------------------------------------------------*/
/*Message text in left modal footer*/
.modal-footer-message {
  flex: auto;
  align-items: center;
  display: flex;
}
.modal-footer-message > label { margin-bottom: 0px !important; }
/*--------------------------------------------------------------------------*/
/* Top Navigation bar*/
.navbar-top-menu .navbar-top-menu-parent {
    display: flex;
    justify-items: center;
}
.navbar-top-menu-parent > nav > ul { height: 100%; }
.navbar-top-menu-parent > nav > ul > li {
  height: 100%;
  display: flex;
  align-items: center;
  min-width: 68px;
  max-width: 140px;
  justify-content: center;
  width: calc(75vw/8);
}
.navbar-top-menu-parent > nav > ul > li.padding-small {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
.navbar-top-menu-parent > nav > ul > li:hover { background-color: var(--top-menu-hover) }
.navbar-top-menu-parent > nav > ul > li.active { background-color: var(--top-menu-active); }
.navbar-top-menu {
  background-color: var(--header-color);
  height: 60px;
}
.navbar-top-menu .navbar-top-menu-icon {
  height: 36px;
  width: 36px;
}
.navbar-top-menu .navbar-top-menu-item {
  display: flex;
  flex-direction: column;
  width: 100%;
}
/* Min-width for some language */
.navbar-top-menu .navbar-top-menu-item.min-width-pt { min-width: 40px; }
.navbar-top-menu .navbar-top-menu-item.min-width-en { min-width: 45px; }
/* vi, de, */
.navbar-top-menu .navbar-top-menu-item.min-width-vi { min-width: 55px; }
/* max-width for some language */
@media screen and (max-width: 800px) {
  .navbar-top-menu .navbar-top-menu-item.max-width-fr { width: 3.6rem; }
  .navbar-top-menu .navbar-top-menu-item.max-width-pt { width: 3rem; }
}
.navbar-top-menu .nav-item.active .navbar-top-menu-item > label {
  color: white;
  margin-left: auto;
  margin-right: auto;
  font-size: small;
  margin-bottom: 0px;
  margin-top: -1px;
  z-index: 1;
}
.navbar-top-menu .navbar-top-menu-item > label {
  color: white;
  margin-left: auto;
  margin-right: auto;
  font-size: small;
  margin-bottom: 0px;
  margin-top: -1px;
  z-index: 1;
  word-break: break-all;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  min-width: 68px;
  width: 80%;
  text-align: center;
}
.navbar-top-menu .navbar-top-menu-item > img {
  margin-left: auto;
  margin-right: auto;
  z-index: 2;
  opacity: 1;
}
.navbar-top-menu .navbar-top-menu-item.disabled { cursor: default; }
.navbar-top-menu .navbar-top-menu-item.disabled > img { opacity: 0.65 !important; }
.navbar-top-menu .navbar-top-right-parent {
  display: flex;
  justify-items: center;
  padding-bottom: 1px;
  padding-right: 1px;
  padding-top: 1px;
}
.navbar-top-menu > .navbar-top-right-parent > button:hover { background: var(--top-menu-hover); }
/* Button Open template, Purge, Start Print */
.navbar-top-menu > .navbar-top-right-parent > button[tag="start"] { background: #008000; }
.navbar-top-menu > .navbar-top-right-parent > button[tag="stop"],
.navbar-top-menu > .navbar-top-right-parent > button[tag="waitingData"] { background: red; }
.navbar-top-menu > .navbar-top-right-parent > button[tag="processing"] { background: var(--warning); }
.navbar-top-menu > .navbar-top-right-parent > button[tag="start"] > img {
  background-image: url("/theme/rynan/img/playW48x48.png");
  background-repeat: round;
}
.navbar-top-menu > .navbar-top-right-parent > button[tag="stop"] > img, 
.navbar-top-menu > .navbar-top-right-parent > button[tag="waitingData"] > img {
  background-image: url("/theme/rynan/img/stopW48x48.png");
  background-repeat: round;
}
.navbar-top-menu > .navbar-top-right-parent > .start > img {
  background-image: url("/theme/rynan/img/playW48x48.png");
  background-repeat: round;
}
.navbar-top-menu > .navbar-top-right-parent > .stop > img {
  background-image: url("/theme/rynan/img/stopW48x48.png");
  background-repeat: round;
}

/*-----------------------------------------------------------------------------------------*/
/* Text for UI */
.text-small { font-size:0.9rem; }
.quick-settings-input {
  padding-left: 1px;
  padding-right: 1px;

}
/* Index of dialog */
.modal-second-index { z-index: 1051 !important; }
.model-third-index { z-index: 1052 !important; }
/* Dialog Error */
.modal.bootstrap-dialog.type-danger,
.modal.bootstrap-dialog.type-success,
.modal.bootstrap-dialog.type-warning{
    z-index: 1070 !important;
}
.modal-index-waiting { z-index: 1070 !important; }
.btn-append { width: 45px; }
.display-none { display: none !important; }

#main-design-panel {
width: 100%;
float: left;
overflow: hidden;
color: #337ab7;
padding-top: 2px;
}

/*-----------------------------------------------------------------------------------------*/
/* Scrollbar */
/* Hide Scrollbar modal */
.modal-body::-webkit-scrollbar { display: none; }
.modal-body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
/* Hide Scrollbar Settings Page */
#pageSystem .contentsetting::-webkit-scrollbar { display: none; }
#pageSystem .contentsetting {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
/* Hide Scrollbar Update Page */
#pageUpdate::-webkit-scrollbar { display: none; }
#pageUpdate {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
/* Hide Scrollbar Logs Page */
#pageLogs::-webkit-scrollbar { display: none; }
#pageLogs {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
/* Hide Scrollbar Print Page */
#pagePrint::-webkit-scrollbar { display: none; }
#pagePrint {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
/* Hide Scrollbar Login Page */
#pageLogin::-webkit-scrollbar { display: none; }
#pageLogin {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
/* Hide Scrollbar User Page */
#pageUser::-webkit-scrollbar { display: none; }
#pageUser {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
/* Hide Scrollbar table open template */
#modalLoadAllTemplate .fixed-table-body::-webkit-scrollbar { display: none; }
#modalLoadAllTemplate .fixed-table-body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
/* Hide Scrollbar table preview database */
#printingPreview .tab-content::-webkit-scrollbar { display: none; }
#printingPreview .tab-content {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
/*-----------------------------------------------------------------------------------------*/
/* Dialog warning */
.modal-dialog-warning .modal-dialog.modal-lg { max-width: 450px; }
.modal-dialog-warning .modal-content { border-radius: unset; }
.modal-dialog-warning .modal-body {
  display: flex;
  align-items: stretch;
}
.modal-dialog-warning .modal-body > img {
  width: 48px;
  height: 48px;
}
.modal-dialog-warning .modal-body .dialog-labels {
  margin-left: 1rem;
  color: white;
  display: flex;
  flex-direction: column;
  margin-top: auto; /* [1.0.4.G] 22/11/2023 - SoPhol.Truong: Add "margin-top" for scroll message */
}
/* 30/10/2022 HieuLe add break line when has \n */
.modal-dialog-warning .modal-body .dialog-message {
  white-space: pre-line;
  max-width: 360px; /* [1.0.4.G] 30/08/2023 - SoPhol.Truong: Update */
  word-wrap: break-word;
  word-break: break-word;
}
.modal-dialog-warning .modal-body .dialog-header {
  font-size: 16.25pt;
  font-weight: bold;
  max-width: 360px; /* [1.0.4.G] 30/08/2023 - SoPhol.Truong: Update */
  word-wrap: break-word;
}
.modal-dialog-warning .modal-footer { justify-content: center; }

/* Dialog Warning Info */
.modal-dialog-warning.type-info .modal-header,
.modal-dialog-warning.type-info .modal-body { background-color: rgb(70, 184, 218); }
.modal-dialog-warning.type-info .modal-content { border: 1px solid rgb(70, 184, 218); }

/* Dialog Warning Error */
.modal-dialog-warning.type-danger .modal-header,
.modal-dialog-warning.type-danger .modal-body { background-color: rgb(212, 63, 58); }
.modal-dialog-warning.type-danger .modal-content { border: 1px solid rgb(212, 63, 58); }

/* Dialog Warning Warning */
.modal-dialog-warning.type-warning .modal-header,
.modal-dialog-warning.type-warning .modal-body { background-color: rgb(238, 162, 54); }
.modal-dialog-warning.type-warning .modal-content { border: 1px solid rgb(238, 162, 54); }

/* Dialog Warning Question */
.modal-dialog-warning.type-confirm .modal-header,
.modal-dialog-warning.type-confirm .modal-body { background-color: rgb(46, 109, 164); }
.modal-dialog-warning.type-confirm .modal-content { border: 1px solid rgb(46, 109, 164); }

/*-----------------------------------------------------------------------------------------*/
/* POD status connected */
.pod-status .pod-status-img {
  width: 24px;
  height: 24px;
}
/* Waiting */
.pod-status .pod-status-img[type="2"] {
  content:url("/theme/rynan/img/PODWarning24.png");
  background-repeat: round;
}
/* Disconnected */
.pod-status .pod-status-img[type="0"] {
  content:url("/theme/rynan/img/PODDisconnected24.png");
  background-repeat: round;
}
/* Connected */
.pod-status .pod-status-img[type="1"] {
  content:url("/theme/rynan/img/PODConnected24.png");
  background-repeat: round;
}
/* [1.0.6.G] 24/07/2024 - SoPhol.Truong: POD Recevied Image */
#PODReceivedImg {
  margin-left: 3px;
}
#PODReceivedImg i {
  font-size: 7pt;
  vertical-align: top;
}
/*-----------------------------------------------------------------------------------------*/
.toggle.btn-primary.disabled,
.opt-stitching .toggle.btn-light.off.disabled {
  border-color: #444d56 !important;
}

.preview-template .canvas-container { pointer-events: none; }
.about-title-label { width: 41%; }

/* [1.0.3.2] 01/03/2023 - SoPhol.Truong: add */
.custom-file-label {
  padding-right: 85px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-bottom: 0.1rem;
}

/* Warning alarm dialog */
.alarmsConfig {
  width: 450px !important;
  height: unset !important;
  position: absolute;
  left: 53%;
  margin-left: -255px;
  /* top: 20%; */
}
/*-----------------------------------------------------------------------------------------*/
/* Keyboard */
/* [1.0.5.0] 31/01/2024 - SoPhol.Truong: Style for Zhuyin keyboard */
#candidates:has(li),#composition {
  min-height: 40px;
}
#composition:empty {
  min-height: 0px;
}
#main-battery-status {
  display: flex;
  margin-right: 5px;
  justify-content: center;
  align-items: center;
}
#label-battery-level {
  position: absolute;
  font-size: 9pt;
  margin-right: 2px;
}
/* 1.0.7.G */
#imgDbStatus {
  width: 24px;
  height: 24px;
}
#imgDbStatus[type="2"] {
  color: #ffbc00;
}
#imgDbStatus[type="1"] {
  color: #00c852;
}
#imgDbStatus[type="0"] {
  color: #f64236;
}