/**
Colors
*/
/*
Top Header Styling
*/
/* Header Device Display */
.header_device_display {
  color: white;
  margin-right: 15px;
  display: inline-block !important;
  background-color: transparent !important;
}
.header_device_display:hover {
  background-color: #34495e !important;
  height: 100%;
}
.header_device_display .item.disabled {
  color: black !important;
}
.header_device_display > .icon {
  color: white;
}

/* Topbar */
.main_logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.main_logo .logo_word {
  width: 200px;
  height: 40px;
  padding: 0px 28px 0px 12px !important;
  margin-top: 5px;
}

/* Help Center */
.help_center_btn {
  background-color: transparent !important;
}

.help_center_modal {
  width: 80%;
  height: 80%;
}

/* Top Header Right Menu(current user, current pos) */
body.eposworx .menu_right span,
body.eposworx_admin .menu_right span,
body.eposworx_transaction .menu_right span,
body.eposworx_retail .menu_right span {
  color: white !important;
}

.eposworx_transaction .fixed.menu,
.eposworx_retail .fixed.menu,
.eposworx .fixed.menu,
.eposworx_admin .fixed.menu {
  background-color: #2980b9 !important;
}

.eposworx_transaction .fixed.menu .topbar.icon,
.eposworx_retail .fixed.menu .topbar.icon,
.eposworx .fixed.menu .topbar.icon,
.eposworx_admin .fixed.menu .topbar.icon {
  color: white !important;
}

#logo {
  /*logo background on div */
  height: inherit;
  width: inherit;
  background-image: url("/assets/images/appiworx_logo.svg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50% 50%;
  background-size: 60%;
}

#logo-fade-out {
  background-color: transparent;
  height: inherit;
  width: inherit;
  animation-name: fade-out;
  animation-delay: 1000ms;
  animation-duration: 600ms;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  -webkit-animation-name: fade-out;
  -webkit-animation-delay: 1000ms;
  -webkit-animation-duration: 600ms;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
}

@keyframes fade-out {
  /* Standard syntax */
  0% {
    background-color: transparent;
  }
  100% {
    background-color: white;
  }
}
@-webkit-keyframes fade-out {
  /* Chrome, Safari, Opera */
  0% {
    background-color: transparent;
  }
  100% {
    background-color: white;
  }
}
.ui-fade-in {
  display: none;
}

.ui.menu .right.item > i.icon {
  margin-right: 0 !important;
}

i.topbar.icon:hover {
  color: #d80000 !important;
}

/*
User Display Dropdown (Top Header)

*/
.user_display.dropdown {
  color: black !important;
}
.user_display.dropdown::before {
  display: none;
}
.user_display.dropdown .menu {
  box-shadow: unset;
  border: 1px solid rgba(164, 199, 234, 0.15);
}

@font-face {
  font-family: "Inconsolata";
  src: url(../../fonts/Inconsolata-Regular.ttf) format("truetype");
}
/**
Screen Sizes
*/
/* 
DataTables 
*/
.dataTable .ui.icon.button {
  border: unset !important;
  font-size: 15px;
  transition: 300ms;
  padding: 8px !important;
}

.dataTable td.actionColumn {
  display: flex;
}

.dataTables_wrapper {
  margin-top: 5px;
}
.dataTables_wrapper .selectable tr {
  transition: 300ms;
}
.dataTables_wrapper .selectable tr:hover {
  background-color: #e9e9e9;
  cursor: pointer;
}

/* Tables */
.dataTable.table img {
  width: 4rem;
  height: 4rem;
}

.dataTable.table tbody tr td {
  text-overflow: ellipsis !important;
}

.dataTables_scrollHeadInner {
  width: 100% !important;
}

.dataTables_scrollFootInner {
  width: 100% !important;
}

/* DataTables Table Style */
.dt-table table {
  border: unset !important;
}

.dt-table table thead tr th {
  border-bottom: 1px solid rgba(118, 119, 119, 0.1) !important;
}

.dt-table table tbody tr td {
  border-top: 1px solid rgba(118, 119, 119, 0.1) !important;
}

/* DataTables Card View */
.card_view {
  min-height: 80% !important;
  width: 100% !important;
  display: block;
  background-color: transparent !important;
  border: unset !important;
}

.card_view .cards {
  width: auto !important;
  position: relative !important;
  display: block;
  margin: 0px auto !important;
  padding: 20px;
}

.card_view .card {
  float: left !important;
}

.card_view tbody tr {
  padding: 5px 15px !important;
}

.card_view tbody tr td {
  display: block;
  width: 100% !important;
  padding: 10px 0px !important;
  border-top: 1px solid rgba(34, 36, 38, 0.1) !important;
  white-space: nowrap;
  overflow: hidden;
}

.card_view tbody tr td:first-child {
  border: unset !important;
}

.cards tbody {
  width: 100%;
}
.cards tbody tr {
  float: left;
  width: calc(25% - 1rem);
  margin: 0.5rem;
  border: 0.0625rem solid rgba(0, 0, 0, 0.125);
  border-radius: 0.15rem;
  -webkit-box-shadow: 0px 0px 20px 0px rgb(227, 227, 227);
  -moz-box-shadow: 0px 0px 20px 0px rgb(227, 227, 227);
  box-shadow: 0px 0px 20px 0px rgb(227, 227, 227);
  text-align: center;
}
.cards tbody tr td {
  display: block;
}
.cards tbody tr td:before {
  content: attr(data-label);
  position: relative;
  float: left;
  color: #808080;
  min-width: 4rem;
  margin-left: 0;
  margin-right: 1rem;
  text-align: left;
}
.cards tbody .thumbnail {
  height: 10rem;
}
@media screen and (max-height: 600px) {
  .cards tbody .thumbnail {
    height: 8rem;
  }
}
.cards tbody .thumbnail img {
  max-height: 100%;
  max-width: 100%;
  width: unset;
  height: unset;
}

/* 
There is less space in label design list page, so decrease the height of the thumbnails in card view
*/
@media screen and (max-height: 600px) {
  .printworx_designer .cards .thumbnail {
    height: 6.5rem;
  }
}

.cards thead {
  display: none;
}

/* Purchase Order Det List */
.itemListPanel.notEditable .editRecordButton {
  display: none;
}

.editRecordButton {
  margin-right: 10px !important;
}

/* Custom for Print List */
.topRightTableSection {
  display: flex !important;
  justify-content: flex-end;
}
.topRightTableSection .buttons {
  margin-left: 30px;
}

/*
OnScreen Keyboard Styling
*/
.simple-keyboard {
  margin-top: 10px;
  background-color: #efefef !important;
}

.simple-keyboard.hidden {
  display: none !important;
}

.keyboard_btn {
  width: unset !important;
  height: unset !important;
  padding: 11px 15px !important;
  background-color: darkgray !important;
}

.onscreen_keyboard_input {
  width: 100% !important;
  height: 60px !important;
  font-size: 2em !important;
}

.general_onscreen_keyboard .hg-button {
  height: 60px !important;
  font-size: 2em !important;
}

.ui.modal.onscreen_keyboard {
  margin: unset !important;
}

/* TextArea Input (With on-screen keyboard button)*/
.field.textarea .onscreen_keyboard_btn {
  position: absolute;
  bottom: 0;
  left: 0px;
}

/* 

Custom Numpad UI

Similar to Onscreen Keyboard, but presents a UI for only numbers

*/
.modal.numpad {
  min-width: 400px;
  height: 100%;
  margin-top: -1em !important;
  margin-bottom: 0px !important;
}
.modal.numpad .num_keys {
  min-width: 40%;
  max-width: 450px !important;
  margin: 0 auto;
}
.modal.numpad .num_keys .row {
  margin-top: 1em !important;
}
.modal.numpad input {
  width: 100%;
  font-size: 30pt !important;
  text-align: right !important;
  padding: 5px 8px !important;
}
.modal.numpad .amount_btn {
  border-radius: 2px;
  width: 30% !important;
  margin-right: 4% !important;
  font-size: 25pt !important;
}
.modal.numpad .amount_btn:last-child {
  margin-right: 0px !important;
}
.modal.numpad .actions {
  margin-top: 2em !important;
}
.modal.numpad .actions .button {
  margin-left: 0px !important;
}

/*
Form Styles

And changes to the default Fomantic Forms & Fields
*/
/*
----------------------------------------
-------- FOMANTIC CUSTOMIZATION --------
----------------------------------------
*/
.form .field .ui.menu, .form .field .buttons, .form .field label, .form .field input, .form .field select, .form .field div.dropdown, .form .segmented_control .ui.menu, .form .segmented_control .buttons, .form .segmented_control label, .form .segmented_control input, .form .segmented_control select, .form .segmented_control div.dropdown {
  font-size: 1.2em !important;
}

/* Icon buttons' icon element should not respond to click (,leave it to the main button element)*/
button.icon.button .icon {
  pointer-events: none;
}

/* Extra Button Styling */
.ui.grey.button > a {
  color: white !important;
}

/* Extra Form Styling */
.ui[class*="left floated"].form {
  float: left;
}

.ui[class*="right floated"].form {
  float: right;
}

/*
----------------------------------------
-------- CUSTOM FIELDS/CONTROLS --------
----------------------------------------
*/
/* 
Color Picker 
*/
.colorPickerContainer .pcr-button {
  border: 1px solid grey;
}
.colorPickerContainer .pcr-button:before {
  border-radius: unset !important;
  right: -0.2px !important;
  bottom: -0.2px !important;
  top: -0.2px !important;
  left: -0.2px !important;
  width: unset !important;
  height: unset !important;
}
.colorPickerContainer .pcr-button:after {
  border-radius: unset !important;
  right: -0.2px !important;
  bottom: -0.2px !important;
  top: -0.2px !important;
  left: -0.2px !important;
  width: unset !important;
  height: unset !important;
}

/* 
FancyTree 
*/
.fancytree-drop-accept {
  background-color: #2980b9 !important;
}

/* 
Segmented Control
*/
.segmented_control {
  border-radius: 3px !important;
}
.segmented_control .active.button {
  background-color: #2185d0 !important;
  color: white !important;
}
.segmented_control .button:first-of-type {
  border-radius: 3px !important;
}
.segmented_control.disabled {
  opacity: 0.5;
  cursor: unset;
}

.field.disabledDisplay .ui.input.disabled {
  opacity: unset !important;
}
.field.disabledDisplay .ui.input.disabled input {
  opacity: unset !important;
  padding: 7px 0;
  font-size: 1.4em !important;
  border-width: 0;
}

/* 
Numeric / Number Control 
*/
.field.number {
  /* With Numpad Behaviour */
}
.field.number .input {
  margin: 0px 10px 0px 0px !important;
}
.field.number .input {
  display: inline !important;
}
.field.number input {
  margin: 0px !important;
}
.field.number .action.input {
  margin: 0px 10px 0px 0px !important;
}
.field.number .action.input .numpad_btn {
  display: inline-block;
}
.field.number .action.input input {
  width: calc(100% - 141px) !important;
}
.field.number .button i.icon {
  pointer-events: none;
}

/*
PrintWorx Styles
*/
.labelPrompt .promptContainer {
  position: relative;
}
.labelPrompt .promptContainer .thumbnailPreviewContainer {
  position: fixed !important;
  width: 40%;
}
.labelPrompt .promptContainer .thumbnailPreviewContainer .labelThumbnail {
  width: 50%;
}
.labelPrompt .promptContainer .promptFormContainer {
  width: 60%;
  right: 0;
  margin-top: 50px;
  position: absolute;
}

@media screen and (max-width: 992px), (orientation: portrait) {
  .labelPrompt .promptContainer .thumbnailPreviewContainer {
    width: 100%;
    position: relative !important;
    text-align: center;
  }
  .labelPrompt .promptContainer .thumbnailPreviewContainer .labelThumbnail {
    width: auto;
    max-height: 200px;
  }
  .labelPrompt .promptContainer .promptFormContainer {
    width: 100%;
    position: relative;
  }
}
/*** 
Wrightech Custom Styles

Loaded for Every Page
***/
body {
  overflow: hidden;
}

a[data-path]:hover {
  cursor: pointer;
}
a[data-path] i {
  pointer-events: none;
}

.noselect {
  user-select: none;
}

.nopoint {
  cursor: default !important;
}

.nopoint:hover {
  opacity: 1 !important;
}

/* Sidebar / Adjusting main container */
.main.container {
  width: 100% !important;
  max-width: 2000px !important;
  height: calc(100vh - 3em) !important;
  margin: 3em auto 0px auto !important;
  padding: 0px 5% !important;
  transition: 500ms;
}

.main.container.smaller_width {
  width: calc(100% - 250px) !important;
  max-width: unset !important;
  float: right;
  padding: 0px 2.5% !important;
}

.main.container.smaller_width .home.contents {
  max-width: 2000px !important;
  margin: 0 auto 40px auto;
}

.main.container {
  overflow-y: auto;
  height: 100%;
}

.aw_blue {
  color: #2980b9 !important;
}

.aw_blue_bg {
  background-color: #2980b9 !important;
  color: white !important;
}

.aw_green {
  color: #2ecc71 !important;
}

.aw_green_bg {
  background-color: #2ecc71 !important;
  color: white !important;
}

.aw_dark_green {
  color: #27ae60 !important;
}

.aw_dark_green_bg {
  background-color: #27ae60 !important;
  color: white !important;
}

.aw_dark_red {
  color: #c0392b !important;
}

.aw_dark_red_bg {
  background-color: #c0392b !important;
  color: white !important;
}

.aw_dark_orange {
  color: #d35400 !important;
}

.aw_dark_orange_bg {
  background-color: #d35400 !important;
  color: white !important;
}

.aw_light_bg {
  background-color: white !important;
}

/* Override the default fomantic ui modal styling */
.ui.modal .actions > .button {
  margin-left: unset !important;
}

/* Tooltip */
.ui.disabled.button[data-tooltip]:not(.disabled) {
  pointer-events: auto !important;
  opacity: 1 !important;
}

.ui.disabled.button[data-tooltip].disabled {
  pointer-events: auto !important;
}

/* Status Tags */
.status.tag {
  padding: 5px 25px;
  border-radius: 15px;
  margin-right: 10px;
}
.status.tag.grey {
  color: grey;
  background-color: #d9d9d9;
}
.status.tag.green {
  color: #5ab558;
  background-color: #d4ecd4;
}
.status.tag.purple {
  color: #a455a7;
  background-color: #e3cae4;
}
.status.tag.darkBlue {
  color: #2980b9;
  background-color: #a9d1ec;
}
.status.tag.lightBlue {
  color: #53a2d6;
  background-color: #e3f0f8;
}
.status.tag.red {
  color: #e94c44;
  background-color: #fce5e4;
}

/* Mode Selector */
#mode-selector {
  max-width: 500px !important;
}

#mode-selector a.centered {
  padding-top: 20px !important;
}

#mode-selector .icon {
  font-size: 70px !important;
  padding: 20px 0px;
}

/* Mode Selector END*/
/* Vertical Accordion Menu */
.ui.vertical.menu {
  padding: 0px !important;
}

.ui.vertical.menu .item {
  font-size: 1.1rem !important;
  padding: 0.1em 0em 0.1em 0.5em !important;
}

.ui.accordion.menu .item .title {
  font-size: 1.1rem !important;
}

.ui.vertical.accordion.menu {
  /*
  padding-left: 0.8em !important;
  padding-right: 0.8em !important;*/
}

.ui.vertical.menu .item a {
  padding-right: 0px !important;
}

.ui.vertical.menu .item a:hover {
  color: #d80000 !important;
}

.content > .accordion {
  margin-top: 0 !important;
  /*
  border-right: 1px solid #d80000 !important;
  border-bottom: 1px solid #d80000 !important;*/
  width: 99% !important;
}

.ui.accordion:not(.styled) .title ~ .content:not(.ui) {
  padding-top: 0.25rem !important;
}

.ui.accordion.menu .title {
  padding: 10px 5px !important;
}

.ui.accordion.menu .item {
  transition: 0.2s;
}

.ui.accordion.menu .item.active {
  background-color: rgb(250, 250, 250) !important;
}

.ui.accordion.menu .item:hover {
  background-color: rgb(247, 247, 247);
}

.ui.accordion.menu .item .active {
  background-color: rgb(250, 250, 250) !important;
}

.ui.accordion.menu .item .active.title {
  border-bottom: 1px solid rgb(184, 184, 184);
  padding-bottom: 1em;
}

/* Sub Menus */
.ui.accordion.menu .item > .content > .accordion > .title {
  padding: 5px !important;
}

.ui.accordion.menu .item .active.title > .chevron.icon {
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
  padding-right: 0.25em;
}

/* Main Contents */
.scrolling.page {
  height: calc(100% - 3rem) !important;
  overflow-y: scroll !important;
}

.ui.main.container {
  padding-top: unset !important;
}

.home.contents {
  padding-top: 2.5em !important;
}

.contents {
  padding-top: 1.5em !important;
}

/* Sidebar */
.ui.thin.left.sidebar,
.ui.thin.right.sidebar {
  width: 250px !important;
}

.ui.uncover.sidebar {
  z-index: 102 !important;
}

.ui.vertical.menu {
  width: 100% !important;
  padding: 15px 5px;
  box-shadow: unset !important;
  border: unset !important;
}

.ui.vertical.menu .icon {
  float: right;
}

/* App Selector */
#app-selector {
  max-width: 650px !important;
}
#app-selector .noAppsAvailable img {
  max-width: 400px;
  margin-top: 50px;
}
#app-selector i {
  font-size: 55px;
  line-height: 55px !important;
}
#app-selector .ui.card {
  display: flex !important;
  height: 175px;
  box-shadow: 0 0 4px 1px #f1f1f1 !important;
}
#app-selector .ui.card .linkContainer {
  display: flex !important;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
#app-selector .ui.card .linkContainer .centered {
  display: flex;
  justify-content: center;
  margin-top: auto;
  width: 100%;
}
#app-selector .ui.card .linkContainer .bottom {
  display: flex;
  margin-top: auto;
  box-shadow: 0 0 4px 1px #f1f1f1 !important;
}
#app-selector .ui.card .linkContainer .bottom span {
  display: flex;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (max-width: calc(500px + 2em)) {
  #app-selector {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
@media only screen and (max-width: 991px) and (min-width: calc(500px + 2em)) {
  #app-selector {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
.ui.inverted.attached.segment {
  border-color: transparent !important;
}

.ui.attached.header {
  padding: 0.5rem 1rem !important;
}

.app-sel-img {
  background-color: transparent !important;
  padding: 1.5em !important;
}

.app-sel-img img {
  height: 70px !important;
}

/* Label Printing */
.ui.avatar.image,
.ui.avatar.image img,
.ui.avatar.image svg,
.ui.avatar.images .image,
.ui.avatar.images img,
.ui.avatar.images svg {
  margin-right: 0.25rem;
  display: inline-block;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.4rem !important;
}

.ui.segment[class*="top attached"]:first-of-type {
  margin-top: 0;
}

.ui.list .content {
  display: inline-block !important;
  width: calc(100% - 4.9rem) !important;
}

.chevron.right.lp-item.icon {
  float: right !important;
  color: inherit !important;
}

/* General Items */
i.inline.icon {
  margin-right: 0 !important;
}

p.title {
  text-align: center;
  font-weight: 600 !important;
}

.ui.header .sub.header {
  line-height: inherit !important;
}

.ui.bottombar.segment[class*="bottom attached"] {
  padding-top: 0.5em !important;
  padding-bottom: 0.5em !important;
}

.ds-table {
  margin: 1em 0 0.5em 0;
}

/* Modal Styling */
.ui.modal .centered.header {
  text-align: center !important;
}

.ui.modal .red.header {
  color: white !important;
  background-color: red !important;
}

.ui.modal .blue.header {
  color: white !important;
  background-color: blue !important;
}

/*****/
/* DataTables Styling */
@media only screen and (max-width: 767px) {
  .ui.table.record-list:not(.unstackable) tr {
    padding-top: 0.5em !important;
    padding-bottom: 0.5em !important;
  }
}
@media only screen and (max-width: 767px) {
  .ui.table.record-list:not(.unstackable) td {
    font-weight: normal !important;
  }
}
@media only screen and (max-width: 400px) {
  /* Slightly shrink table info font for small screens */
  .dataTables_info {
    font-size: 0.95em !important;
  }
}
.dt-top {
  padding-bottom: 1em;
}

i.icon.dt-search {
  opacity: 0.5;
  margin-left: 0.25em;
}

div.dataTables_wrapper div.dataTables_filter span.input {
  margin-left: 0 !important;
}

/* Dark Themed Sidebar Menu */
#menu_sidebar {
  height: calc(100% - 51px) !important;
  background-color: #34495e !important;
  overflow-x: hidden !important;
  position: fixed;
  top: 51px;
  bottom: 0px;
}

#menu_sidebar .menu {
  background-color: transparent !important;
}

#menu_sidebar .menu .icon {
  float: unset !important;
}

#menu_sidebar .menu .icon.chevron {
  float: right !important;
}

/* Item */
#menu_sidebar .item {
  background-color: transparent !important;
  padding: 0px !important;
  border-bottom: unset !important;
  border-top: unset !important;
}

#menu_sidebar .item .active {
  background-color: #2c3e50 !important;
}

#menu_sidebar .item .active.title {
  border-bottom: unset !important;
}

#menu_sidebar .menu .item .icon:first-child {
  margin-right: 15px !important;
  pointer-events: none;
}

/* Title */
#menu_sidebar .title {
  color: white !important;
  padding: 15px 15px !important;
  font-size: 1rem !important;
}

#menu_sidebar .title.active {
  background-color: #2c3e50 !important;
}

#menu_sidebar .title:hover {
  background-color: #2c3e50 !important;
}

#menu_sidebar .title i {
  font-size: 0.8rem !important;
}

/* Disable Text Selection On the Sidebar */
#menu_sidebar {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Tab menu Styles */
.ui.vertical.tabular.menu .active.item {
  border-radius: unset !important;
  border: unset !important;
}

.tab:not(.active) {
  display: none !important;
}

/* Home Style Light Color Menu */
.system_admin #menu_sidebar .item .active {
  background-color: #f5f5f5 !important;
}

.system_admin #menu_sidebar .title.active {
  background-color: #f5f5f5 !important;
}

.system_admin #menu_sidebar .title:hover {
  background-color: #f5f5f5 !important;
}

.system_admin #menu_sidebar .title {
  color: black !important;
}

.system_admin #menu_sidebar {
  background-color: white !important;
  border-right: 1px solid #f5f5f5 !important;
}

/* Extend Fomantic Grid/ Column system*/
.one_third.wide.column {
  width: 33.33% !important;
}

/* Label Print Top Header */
.printworx_printing .fixed.menu {
  background-color: #27ae60 !important;
}

.printworx_printing .fixed.menu .topbar.icon {
  color: white !important;
}

/* Label Designer Top Header */
.printworx_designer .fixed.menu {
  background-color: #d35400 !important;
}

.printworx_designer .fixed.menu .topbar.icon {
  color: white !important;
}

/* Field Alignment */
.thirdFieldContainer {
  display: flex;
  justify-content: space-between;
}
.thirdFieldContainer .field.third, .thirdFieldContainer .field.one-third {
  width: 32%;
}
.thirdFieldContainer .field.two-third {
  width: 66%;
}

.halfFieldContainer {
  display: flex;
  justify-content: space-between;
}
.halfFieldContainer .field {
  width: 49%;
}

/* General Modal Style*/
.modal .actions {
  margin-top: 2em !important;
}

/* General Form Buttons */
form.ui.form .ui.bottom.bottombar {
  margin-top: 1em;
}

/* Top Menu Bar Right Panel */
.top.menu .menu_right {
  padding: 5px;
  margin-top: 1px !important;
  margin-right: 25px !important;
}

.top.menu .menu_right .avatar.image {
  width: 2.5rem !important;
  height: 2.5rem !important;
  border-radius: 50% !important;
}