@font-face {
  font-family: Noto Kufi Arabic;
  src: url("css/fonts/DroidKufi-Regular.ttf");
}
@font-face {
  font-family: Lalezar;
  src: url("css/fonts/Lalezar-Regular.ttf");
}
@font-face {
  font-family: Roboto;
  src: url("css/fonts/RobotoCondensed-Regular.ttf");
}
@font-face {
  font-family: Roboto;
  src: url("css/fonts/RobotoCondensed-Italic.ttf");
  font-style: italic;
}
@font-face {
  font-family: Roboto;
  src: url("css/fonts/RobotoCondensed-Bold.ttf");
  font-weight: bold;
}
@font-face {
  font-family: Roboto;
  src: url("css/fonts/RobotoCondensed-BoldItalic.ttf");
  font-style: italic;
  font-weight: bold;
}
@font-face {
  font-family: Roboto;
  src: url("css/fonts/RobotoCondensed-Light.ttf");
  font-weight: 200;
}
@font-face {
  font-family: Roboto;
  src: url("css/fonts/RobotoCondensed-LightItalic.ttf");
  font-weight: 200;
  font-style: italic;
}
* {
  font-family: "Noto Kufi Arabic", serif;
}
html,
body {
  overflow-x: hidden;
}
body {
  direction: rtl;
  font-family: "Noto Kufi Arabic", serif;
}
/***      MY COLOR      ****/
/*    #b721ff, #21d4fd     */

/*****************
////////        NOTIFICATION
////////  ERROR & SUCCESS MESSAGES
~~~~~~~~~~~~~~~~*/
.info-popup {
  width: 280px;
  position: fixed;
  top: 20px;
  left: -300px;
  z-index: 10005;
  text-align: right;
  font-size: 0.9375em;
  border-right: transparent 5px solid;
  padding: 10px 15px 10px 35px;
  background: #fff;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-box-shadow: 0 1px 20px rgba(34, 44, 55, 0.3);
  -moz-box-shadow: 0 1px 20px rgba(34, 44, 55, 0.3);
  box-shadow: 0 1px 20px rgba(34, 44, 55, 0.3);
  opacity: 0;
}
.info-popup .close {
  position: absolute;
  top: 12px;
  left: 10px;
  cursor: pointer;
  font-size: 16px;
}
.info-popup.success {
  border-color: #8ac249;
}
.info-popup.error {
  border-color: #f44336;
}
.info-popup.show {
  left: 20px;
  opacity: 1;
}
.dashboard-page .info-popup {
  margin-top: 76px;
}

/* install page */
.wrap-login100.install {
  padding-top: 35px;
}
.login100-form {
  position: relative;
}
.input-error {
  position: absolute;
  margin-top: -35px;
  display: inline-block;
  width: 100%;
  text-align: left;
  font-size: 12px;
  color: red;
  font-style: normal;
}
.input100.warn {
  color: red;
}

/** for store logo Upload plugin **/
.ax-main-container,
.ax-main-container {
  font-size: 16px;
  text-align: center;
}
.ax-main-title,
.ax-main-title {
  display: none;
}
.ax-button,
.ax-button {
  width: 50px;
  height: 50px;
  overflow: hidden;
  display: inline-block;
  position: relative;
  cursor: pointer;
  margin-left: 5px;
}
.ax-browse-c,
.ax-browse-c {
  float: left;
  width: 100px;
  height: 100px;
  display: block;
  background: #fff;
  border: 1px solid #bbb;
  box-sizing: border-box;
  color: #bbb;
  transition: all 0.3s;
}
.ax-browse,
.ax-browse {
  opacity: 0;
  position: absolute;
  font-size: 50px;
  cursor: pointer;
  width: 100%;
  height: 100px;
  top: 0px;
  left: 0px;
}
.ax-browse-c span,
.ax-browse-c span {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 50px;
  font-family: "Roboto", sans serif;
  font-weight: 200;
  transition: all 0.3s;
  line-height: 98px;
  text-align: center;
}
.ax-browse-c:hover,
.ax-browse-c:hover {
  border-color: #f60000;
  color: #f60000;
}
.ax-upload-all,
.ax-upload-all {
  display: noone;
}
.ax-clear,
.ax-clear {
  display: noone;
}
.ax-remove,
.rem-ef-photo {
  width: 20px;
  height: 20px;
  cursor: pointer;
  display: inline-block;
}
.ax-upload,
.ax-abort,
.ax-info,
.ax-delete {
  display: none;
}
.ax-remove,
.rem-cover,
.rem-ef-photo {
  position: absolute;
  top: 0;
  right: 0;
  line-height: 20px;
  text-align: center;
  font-size: 16px;
  color: #666;
  text-decoration: none;
}
.ax-remove:hover,
.rem-cover:hover,
.rem-ef-photo:hover,
.ax-remove:hover,
.rem-cover:hover,
.rem-ef-photo:hover {
  text-decoration: none;
  color: #f60000;
}
.ax-upload,
.ax-upload {
  background: url(icons.png) no-repeat -332px -340px;
}
.ax-upload:hover,
.ax-upload:hover {
  background: url(icons.png) no-repeat -332px -268px;
}
.ax-info,
.ax-info {
  background: url(icons.png) no-repeat -396px -67px;
}
.ax-info:hover,
.ax-info:hover {
  background: url(icons.png) no-repeat -395px -99px;
}
.ax-delete,
.ax-delete {
  background: url(icons.png) no-repeat -396px -1px;
}
.ax-delete:hover,
.ax-delete:hover {
  background: url(icons.png) no-repeat -395px -29px;
}
.ax-abort,
.ax-abort {
  background: url(icons.png) no-repeat -332px -1px;
}
.ax-upload,
.ax-abort,
.ax-upload,
.ax-abort {
  background: url(icons.png) no-repeat -332px -1px;
}
.ax-abort:hover,
.ax-abort:hover {
  background: url(icons.png) no-repeat -332px -1px;
}
.ax-disabled,
.ax-disabled {
  opacity: 0.5;
  filter: alpha(opacity=50);
  cursor: auto;
}
/**** List files styles ****/
.ax-file-list,
.ax-file-list {
  list-style: none outside none;
  padding: 0;
  margin: 0 auto;
}
.ax-file-list li:hover,
.ax-file-list li:hover {
  background-color: #fff;
}
.ax-file-list li {
  background-color: #fff;
  float: left;
  text-align: center;
  margin: 0 10px 10px 0;
  padding: 0;
  position: relative;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border: 1px solid #bbb;
}
.ax-prev-container,
.ax-prev-container {
  height: 100px;
  width: 100px;
  display: inline-block;
}
.ax-preview,
.ax-preview {
  height: 100px;
  width: 100px;
}
.ax-progress,
.ax-progress {
}
.ax-progress-bar {
  width: 0%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(images/loading-white-d.gif);
  margin: auto;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #fff;
  background-size: auto 100%;
  opacity: 0.6;
  transition: background 0.3s;
}
.ax-progress-info,
.ax-progress-info {
}
.ax-toolbar,
.ax-toolbar {
  width: 100%;
  overflow: hidden;
}
.ax-details,
.ax-details {
  display: none;
  float: left;
  width: 100%;
}
/** Light Box CSS ***/
#ax-box {
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 999999;
  display: none;
  border: 1px solid #000;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  box-shadow: 0px 0px 5px 0px #333; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}
#ax-box-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  filter: alpha(opacity=75);
  -moz-opacity: 0.75;
  -khtml-opacity: 0.75;
  opacity: 0.75;
  z-index: 1000;
  display: none;
}
#ax-box-close {
  width: 32px;
  height: 32px;
  background: url(close.png) no-repeat 0 0;
  top: -5px;
  right: -5px;
  position: absolute;
  cursor: pointer;
}
#ax-box-fn {
  background: none repeat scroll 0 0 black;
  bottom: 0;
  color: white;
  height: 38px;
  left: 0;
  opacity: 0.8;
  overflow: hidden;
  position: absolute;
  width: 100%;
  z-index: 15;
}
#ax-box-fn span {
  display: block;
  font-family: "Volkhov", Georgia, sans-serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  line-height: 38px;
  padding: 0 20px;
}
/******* File Type Icons ********/
.ax-filetype-pdf {
  background: url(icons.png) no-repeat -162px 0px;
}
.ax-filetype-zip,
.ax-filetype-rar {
  background: url(icons.png) no-repeat -244px -244px;
}
.ax-filetype-doc,
.ax-filetype-docx {
  background: url(icons.png) no-repeat 0 -162px;
}
.ax-filetype-exe {
  background: url(icons.png) no-repeat -80px 0;
}
.ax-filetype-xls,
.ax-filetype-xlsx {
  background: url(icons.png) no-repeat 0 -244px;
}
.ax-filetype-xml {
  background: url(icons.png) no-repeat -244px -162px;
}
.ax-filetype-mp4 {
  background: url(icons.png) no-repeat -244px -84px;
}
.ax-filetype-avi {
  background: url(icons.png) no-repeat -244px -84px;
}
.ax-filetype-pdf {
  background: url(icons.png) no-repeat -162px 0px;
}
.ax-filetype-gif {
  background: url(icons.png) no-repeat -80px -162px;
}
.ax-filetype-png {
  background: url(icons.png) no-repeat -80px -162px;
}
.ax-filetype-bmp {
  background: url(icons.png) no-repeat 0 -80px;
}
.ax-filetype-mp3 {
  background: url(icons.png) no-repeat 0 0;
}
.ax-filetype-ppt,
.ax-filetype-pptx {
  background: url(icons.png) no-repeat -162px -162px;
}
.ax-filetype-tiff {
  background: url(icons.png) no-repeat -244px 0;
}
.ax-filetype-txt {
  background: url(icons.png) no-repeat -162px -244px;
}
/********Drop Over Class*******/
.ax-drop {
  border: 2px solid blue;
  border-radius: 4px;
}
/******ASK DIV*********/
.ax-ask-div {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  text-align: center;
  float: left;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  display: table;
}
.ax-ask-div .ax-ask-inner {
  display: table-cell;
  vertical-align: middle;
}
.ax-ask-div .ax-ask-quest {
  width: 100%;
}
.ax-ask-div .ax-button {
  background-color: white;
  border-radius: 3px 3px 3px 3px;
  height: 19px;
  width: 47px;
}
.ax-ask-div .ax-button:hover {
  background-color: green;
  color: white;
  border-radius: 3px 3px 3px 3px;
  height: 19px;
  width: 47px;
}
.ax-ask-div .ax-button span {
  display: inline;
}

#store-logo,
#national-id-up,
#edit-national-id-up,
#product-img-up,
#logo-up {
  width: 120px;
  height: 120px;
  display: block;
  cursor: pointer;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  margin: 0px auto 24px auto;
  transition: all 0.5s;
  position: relative;
  overflow: hidden;
}
#store-logo:before,
#national-id-up:before,
#edit-national-id-up:before,
#product-img-up:before,
#logo-up:before {
  border-radius: inherit;
  display: block;
  width: 200%;
  height: 200%;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(135deg, #21d4fd 25%, #b721ff 75%);
  transition: all 0.5s;
  transform: translate(-25%, -25%);
  z-index: 0;
}
#store-logo:after,
#national-id-up:after,
#edit-national-id-up:after,
#product-img-up:after,
#logo-up:after {
  border-radius: 9px;
  display: block;
  width: 108px;
  height: 108px;
  margin: 6px;
  background: url("images/placeholder.png");
  background-size: cover;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
#store-logo:hover:before,
#national-id-up:hover:before,
#edit-national-id-up:hover:before,
#product-img-up:hover:before,
#logo-up:hover:before {
  transform: translate(-25%, -25%) rotate(-180deg);
}
#store-logo:hover,
#national-id-up:hover,
#edit-national-id-up:hover,
#product-img-up:hover,
#logo-up:hover {
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.3);
}

div#store-logo,
div#store-logo,
div#edit-national-id-up {
}
div#store-logo .ax-browse-c,
div#national-id-up .ax-browse-c,
div#edit-national-id-up .ax-browse-c,
div#product-img-up .ax-browse-c,
div#logo-up .ax-browse-c {
  border: none;
  float: none;
  margin: 0;
  width: 100%;
  height: 120px;
  cursor: pointer;
  background: url("images/placeholder.png") center center no-repeat;
  background-size: 108px 108px;
  position: relative;
  line-height: 0;
  transition: all 0.3s;
}
div#store-logo .ax-browse-c span,
div#national-id-up .ax-browse-c span,
div#edit-national-id-up .ax-browse-c span,
div#product-img-up .ax-browse-c span,
div#logo-up .ax-browse-c span {
  position: absolute;
  z-index: 100;
  width: auto;
  height: auto;
  bottom: 5px;
  right: 5px;
  text-align: right;
  font-family: "Roboto", sans serif;
  color: #999;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 400;
}
div#store-logo .ax-browse-c input,
div#national-id-up .ax-browse-c input,
div#edit-national-id-up .ax-browse-c input,
div#product-img-up .ax-browse-c input,
div#logo-up .ax-browse-c input {
  z-index: 99;
  height: 100%;
}
div#store-logo .ax-browse-c span:first-child,
div#national-id-up .ax-browse-c span:first-child,
div#edit-national-id-up .ax-browse-c span:first-child,
div#product-img-up .ax-browse-c span:first-child,
div#logo-up .ax-browse-c span:first-child {
  display: none;
}
div#store-logo .ax-browse-c img,
.ax-browse-c img,
div#prev-store-logo img,
div#national-id-up .ax-browse-c img,
div#prev-store-logo img,
div#edit-national-id-up .ax-browse-c img,
div#product-img-up .ax-browse-c img,
div#logo-up .ax-browse-c img {
  width: 100%;
  height: auto;
}
div#store-logo:hover,
div#store-logo:hover,
div#product-img-up:hover,
div#logo-up:hover {
}
div#store-logo:hover .ax-browse-c,
div#national-id-up:hover .ax-browse-c,
div#edit-national-id-up:hover .ax-browse-c,
div#product-img-up:hover .ax-browse-c,
div#logo-up:hover .ax-browse-c {
}
div#store-logo .ax-file-list li,
div#national-id-up .ax-file-list li,
div#edit-national-id-up .ax-file-list li,
div#product-img-up .ax-file-list li,
div#logo-up .ax-file-list li {
  background: none;
  float: none;
  margin: 0;
  padding: 0;
  border: none;
  line-height: 0;
  width: 100%;
  height: auto;
}
div#store-logo .ax-file-list li a.ax-prev-container,
div#national-id-up .ax-file-list li a.ax-prev-container,
div#edit-national-id-up .ax-file-list li a.ax-prev-container,
div#product-img-up .ax-file-list li a.ax-prev-container,
div#logo-up .ax-file-list li a.ax-prev-container {
  width: 100%;
  height: auto;
  line-height: 0;
}
div#store-logo .ax-file-list li a.ax-prev-container img.ax-preview,
div#national-id-up .ax-file-list li a.ax-prev-container img.ax-preview,
div#edit-national-id-up .ax-file-list li a.ax-prev-container img.ax-preview,
div#product-img-up .ax-file-list li a.ax-prev-container img.ax-preview,
div#logo-up .ax-file-list li a.ax-prev-container img.ax-preview {
  width: 100%;
  height: auto;
}
#store-logo-upload,
.ax-browse-c,
#national-id-upload,
#edit-national-id-upload,
#product-img-upload,
#logo-upload {
  width: 120px;
  height: 120px;
  display: block;
  cursor: pointer;
  position: absolute;
  z-index: 2;
}

/* the login page */
.focus-input100::after,
.login100-form-btn {
  font-family: "Noto Kufi Arabic", serif;
  font-weight: bold;
}
.btn-show-pass {
  left: 0;
  right: auto;
}
.logo {
  display: block;
  margin: 0 auto;
  text-align: center;
  position: absolute;
  margin-top: -180px;
  left: 50%;
  transform: translate(-50%, 0);
}
.logo .title {
  font-family: "Lalezar", cursive;
  font-size: 28px;
  color: #000;
}
form.login100-form {
  margin-top: 20px;
}
.white-circle {
  width: 110px;
  height: 110px;
  background: #fff;
  border-radius: 50%;
  margin-top: 5px;
  margin-left: 5px;
}
.white-circle img {
  width: 100%;
  height: auto;
}

/*****
/   DASHBOARD
/*****/
#content-holder {
}
#loader {
  position: fixed;
  width: 100%;
  display: none;
  z-index: 990;
  background: #f9f9f9;
}
#loader.loading,
.loader.loading {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
#loader #loading-icon,
.loader #loading-icon {
  font-size: 24px;
  color: #b721ff;
}
#content-wrapper,
#loader {
  height: calc(100vh - 96px) !important;
}
.content-wrapper {
  background: #f9f9f9;
}
/*** content top ***/
.head {
  display: block;
  height: 96px;
  border-bottom: 1px solid #e7e7e7;
  padding-left: 40px;
  padding-top: 32px;
}
.user {
  float: left;
  line-height: 44px;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  color: #3b3b3b;
  font-size: 18px;
  transition: all 0.3s;
}
.user span {
  font-family: "Roboto Condensed", sans-serif;
  cursor: pointer;
}
.user .sm-icon {
  font-size: 14px;
}
.user:hover {
  color: #b721ff;
}
.user > div.dropdown-toggle:after,
#settings > div.dropdown-toggle:after,
.branches > div.dropdown-toggle:after {
  display: none;
}
.user .user-initials {
  width: 28px;
  height: 28px;
  background: #282e43;
  line-height: 28px;
  border-radius: 28px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  font-family: "Roboto", sans serif;
  text-transform: uppercase;
}
.user .user-initials i {
  font-family: "Roboto", sans serif;
  font-style: normal;
  line-height: 28px;
}
ul.dropdown-menu {
  padding: 0;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  min-width: 190px;
  left: -8px !important;
}
.dropdown-menu > li > a {
  padding: 8px 20px !important;
  font-family: "Noto Kufi Arabic", serif;
  font-weight: bold !important;
  text-align: right;
  color: #3f3f3f !important;
}
.dropdown-menu > li:last-child > a {
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.1);
}
.dropdown-menu > li.w-devider {
  border-top: 1px solid #e7e7e7;
}
.dropdown-menu:before {
  position: absolute;
  top: -7px;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: "";
}

.dropdown-menu:after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  content: "";
}
/*** the settings ***/
#settings,
.notifications,
#user-target-nav,
#go-back,
#refresh {
  float: left;
  margin-right: 24px;
  transition: all 0.3s;
}
#settings:hover,
.notifications:hover .noti-icon,
#user-target-nav:hover span:first-child,
#go-back:hover,
#refresh:hover {
  color: #b721ff;
}
#settings,
.notifications .noti-icon,
#user-target-nav span,
#go-back,
#refresh {
  font-size: 20px;
  color: #161616;
  line-height: 44px;
  cursor: pointer;
  transition: all 0.3s;
}
#user-target-nav {
  direction: ltr;
  margin-left: 24px;
}
/***  the notifications ***/
.notifications {
  margin-right: 0;
  margin-left: 24px;
  position: relative;
}
.notifications.all-notifications {
  float: none;
  width: 100%;
  margin-left: 0;
}
.notifications span.new-noti {
  position: absolute;
  width: 8px;
  height: 8px;
  display: none;
  background: #ff6245;
  border-radius: 5px;
  top: 12px;
  right: 0px;
  z-index: 1;
}
.notifications.unseen_nots .noti-icon i.fa-bell {
  animation: ring 4s 0.7s ease-in-out infinite;
  transform-origin: 50% 4px;
}
.notifications.unseen_nots span.new-noti {
  display: block;
  animation: b-radio-check 0.8s;
}
.notifications .nots {
  position: absolute;
  display: none;
  width: 360px;
  min-height: 260px;
  margin-top: 12px;
  z-index: 1002;
  left: -48px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 3px 8px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid #eee;
}
.notifications .nots::after {
  position: absolute;
  top: -8px;
  left: 48px;
  display: inline-block;
  border-bottom: 8px solid #25cefd;
  border-left: 8px solid #25cefd;
  border-top: 8px solid transparent;
  border-right: 8px solid transparent;
  border-radius: 0 0 0 3px;
  transform: rotate(135deg);
  content: "";
}
.notifications.visible .nots {
  display: block;
}
.notifications .nots .no-notifications {
  margin: 24px;
  border: 3px dashed #ccc;
  text-align: center;
  width: calc(100% - 48px);
  height: 212px;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.notifications .nots .no-notifications div {
  text-align: center;
}
.notifications .nots .no-notifications div img {
  width: 170px;
  height: auto;
  margin-bottom: 12px;
}
.notifications .nots .no-notifications div span {
  width: 100%;
  font-family: "Noto Kufi Arabic", serif;
  font-weight: bold;
  font-size: 15px;
  color: #999;
}
.notifications .notifications-container {
  width: 100%;
  max-height: 650px;
  font-size: 12px;
  line-height: 18px;
  border-radius: 3px;
  overflow: hidden;
}
.notifications .notifications-container.nots-container-alt {
  max-height: none;
  border-radius: 0;
  overflow: hidden;
}
.notifications .notifications-container .notifications-list {
  width: 100%;
  max-height: 504px;
  font-size: 12px;
  line-height: 18px;
  overflow: auto;
}
.notifications .notifications-container .nots-top {
  width: 100%;
  padding: 12px 0;
  background: #21d4fd;
  position: relative;
}
.notifications .notifications-container .nots-top .b-link {
  color: #fff;
  padding: 4px 16px;
  position: absolute;
  border-radius: 5px;
  left: 0;
  top: 7px;
  transition: all 0.3s;
}
.notifications .notifications-container .nots-top .b-link:hover {
  box-shadow: inset 0 0 8px #1d7d98;
  color: #b721ff;
  text-decoration: none;
}
.notifications .notifications-container .not-item {
  /* h:63px */
  width: 100%;
  cursor: pointer;
  padding: 10px 8px 10px 24px;
  border-right: 4px solid transparent;
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #f3f4f5;
}
.notifications .notifications-container .not-item:hover {
  background: #f1f7fd;
}
.notifications .notifications-container .not-item.noty-alert {
  /* h:33px */
  padding: 8px 8px 6px 24px;
}
.notifications .notifications-container .not-item.new {
  border-right-color: #f1575d;
}
.notifications .notifications-container .not-item .not-icon {
  width: 12px;
  margin-left: 8px;
  color: #c7c7c7;
  text-align: center;
  font-size: 10px;
  line-height: 18px;
}
.notifications .notifications-container .not-item.noty-alert .not-icon {
  font-size: 12px;
}
.notifications .notifications-container .not-item.noty-alert .not-icon,
.notifications .notifications-container .not-item.new .not-icon {
  color: red;
}
.notifications .notifications-container .not-item .not-body {
  flex: 1;
  display: flex;
  flex-direction: row;
}
.notifications .notifications-container .not-item .not-body .not-thumb {
  width: 42px;
  height: 42px;
  overflow: hidden;
  margin-left: 8px;
}
.notifications .notifications-container .not-item .not-body .not-thumb img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}
.notifications .notifications-container .not-item .not-body .not-meta {
  flex: 1;
}
.notifications
  .notifications-container
  .not-item
  .not-body
  .not-meta
  .not-metadata
  span {
  color: #a1a1a1;
  line-height: 18px;
  font-size: 12px;
}

/*** the dashboard inner content **/
.dashboard-page {
  padding-right: 60px;
  padding-left: 60px;
  padding-bottom: 45px;
  max-width: calc(100vw - 280px);
}
#content.b-slider .dashboard-page {
  max-width: calc(100vw - 80px);
}
#sell-page .tab-content {
  transition: margin 0.35s ease-out;
  margin-right: 120px;
}
#content.b-slider #sell-page .tab-content {
  margin-right: 0;
}
.dashboard-page.centered {
  height: calc(100vh - 96px);
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding-bottom: 96px;
}
.dashboard-page h1 {
  font-family: "Lalezar", cursive;
  font-size: 40px;
  text-align: right;
  padding: 5px 20px 5px 0;
  margin: 45px auto 20px auto;
  border-bottom: 1px solid #b721ff;
  position: relative;
  max-width: 1098px;
}
.dashboard-page .greatest {
  position: relative;
  max-width: 1098px;
  margin-bottom: 20px;
  overflow: hidden;
}
.dashboard-page .greatest::after {
  position: absolute;
  box-shadow: 0 0.1em 4em 0 rgba(0, 0, 0, 0.35);
  content: "";
  top: auto;
  bottom: -20px;
  height: 20px;
  border-radius: 100%;
  width: 70%;
  margin: 0 auto;
  right: 50%;
  transform: translateX(50%);
}
.dashboard-page .greatest h1 {
  text-align: center;
  border-bottom: 1px solid #b721ff;
  margin-bottom: 0;
}
.dashboard-page h1 > span,
.dashboard-page h1 .user_d-name > span:first-child {
  font-family: "Lalezar", cursive;
  margin-left: 8px;
}
.dashboard-page h1 .user_d-name {
  cursor: pointer;
}
.dashboard-page h1 > small,
.dashboard-page h1 .switch-sale-menu {
  font-family: "Noto Kufi Arabic", serif;
  margin-right: 8px;
  cursor: pointer;
  font-size: 12px;
  color: #3b96f3;
  font-weight: bold;
  text-decoration: none;
  vertical-align: sub;
  transition: all 0.3s;
  position: absolute;
  z-index: 110;
  bottom: 0;
  min-width: 76px;
}
.dashboard-page h1 > small:hover {
  text-decoration: underline;
}
.dashboard-page h1 > span + span:not(.rank) {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 600;
  font-size: 28px;
}
.dashboard-page h1 > span.sub_text {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 14px;
  color: #666;
  margin-right: 8px;
  text-shadow: none;
  border-radius: 10px;
}
.dashboard-page h1 .action_btn {
  float: left;
  margin-top: 6px;
  padding: 12px 20px;
  color: #3b96f3;
  font-size: 14px;
  font-weight: bold;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.3s;
}
#change-user-pass-btn {
  color: #25244d;
}
.dashboard-page h1 .action_btn span.action_icon {
  height: 19px;
  font-size: 12px;
  text-align: center;
  line-height: 16px;
  transition: border 0.3s;
}
.dashboard-page h1 .action_btn:hover {
  background: #fff;
  color: #b721ff;
}
.dashboard-page h1 .action_btn:hover span.action_icon {
  border-color: #b721ff;
}
.dashboard-page h1 .action_btn.warning {
  color: #d3514b;
}
.dashboard-page.centered h1 {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  font-size: 80px;
  padding: 0px;
  margin: 0px;
  border-bottom: none;
}
.dashboard-page .dashboard-item {
  margin: 0 auto;
  max-width: 1098px;
}
.dashboard-page .dashboard-item .dashboard-section {
}
.dashboard-page.w-tabs {
  padding-right: 0px;
  padding-left: 0px;
}
.dashboard-page.w-tabs.tabs-light {
  background: #f9f9f9;
}
.dashboard-page.w-tabs .dashboard-tabs h1 {
  border-bottom: none;
  text-shadow: 1px 2px 0px #fff;
  margin: 35px 0 0 0px;
}
.dashboard-page.w-tabs .dashboard-tabs {
  padding: 0 60px;
  background: #def;
  border-bottom: 1px solid #3bf;
  overflow: hidden;
}
.dashboard-page.w-tabs.tabs-light .dashboard-tabs {
  background: #f9f9f9;
  border-bottom: none;
  overflow: hidden;
  padding-right: 0;
}
.dashboard-page.w-tabs.tabs-light .dashboard-tabs h1 {
  max-width: 1098px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 25px;
  margin-bottom: 18px;
}
.dashboard-page.w-tabs .dashboard-tabs.only-title {
  background: #f9f9f9;
  border-bottom: 0;
}
.dashboard-page.w-tabs .dashboard-tabs.only-title h1 {
  margin-bottom: 35px;
}
.dashboard-page.w-tabs.w-tabs-alt .head-desc,
.dashboard-page.w-tabs.tabs-light .head-desc {
  padding: 25px 60px;
  background: #def;
}
.dashboard-page.w-tabs.w-tabs-alt .head-desc.fixed {
  padding: 0;
}
.dashboard-page.w-tabs.w-tabs-alt .head-desc.row {
  margin: 0;
}
.dashboard-page.w-tabs.w-tabs-alt .head-desc.fixed .row {
  padding: 25px 60px;
  margin: 0;
  background: #def;
}
.dashboard-page.w-tabs.w-tabs-alt .head-desc > div:first-child {
  font-size: 12px;
  line-height: 52px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
#sell-page.dashboard-page.w-tabs.w-tabs-alt .head-desc > div:first-child {
  overflow: visible;
}
#content-wrapper.fix-bar .dashboard-page.w-tabs.w-tabs-alt .head-desc.fixed {
  display: block;
}
#content-wrapper .dashboard-page.w-tabs.w-tabs-alt .head-desc.fixed {
  display: none;
}
#content-wrapper .dashboard-page.w-tabs.w-tabs-alt .head-desc.fixed {
  position: fixed;
  top: 96px;
  width: calc(100% - 80px);
  z-index: 1001;
}
#content-wrapper .dashboard-page.w-tabs.w-tabs-alt .head-desc.fixed.squeeze {
  width: calc(100% - 280px);
}
#content-wrapper.fix-bar .dashboard-page.w-tabs.w-tabs-alt .head-desc h3 {
  margin: 0;
  font-family: "Lalezar", cursive;
  font-size: 32px;
  line-height: 52px;
}
#content-wrapper.fix-bar
  .dashboard-page.w-tabs.w-tabs-alt
  .head-desc.fixed::after {
  position: absolute;
  z-index: -2;
  box-shadow: 0 0.1em 4em 0 rgba(0, 0, 0, 0.35);
  content: "";
  top: auto;
  bottom: 4px;
  height: 40px;
  border-radius: 100%;
  width: 100%;
}
.dashboard-page.w-tabs .dashboard-tabs .head-extra {
  overflow: hidden;
  max-width: 1098px;
  margin: 0 auto;
}
.dashboard-page.w-tabs .dashboard-tabs .head-extra h1 {
  float: right;
}
.dashboard-page.w-tabs .dashboard-tabs .head-extra a {
  display: none;
  transition: all 0.3s;
  float: left;
  margin: 45px 0 0 0px;
  padding: 4px 12px;
  background: #34bbff;
  color: #fff;
  letter-spacing: normal;
}
.dashboard-page.w-tabs .dashboard-tabs .head-extra.w-filter h1 .filter-select {
  position: absolute;
  padding-top: 4px;
}
.dashboard-page.w-tabs .dashboard-tabs .head-extra.w-filter h1 a {
  display: block;
  float: none;
  margin: 0;
  padding: 3px 20px;
  color: #333;
  background: none;
}
.dashboard-page.w-tabs .dashboard-tabs .head-extra.w-filter h1 a:hover {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}
.dashboard-page.w-tabs .dashboard-tabs .head-extra a.load-me {
  display: block;
}
.dashboard-page.w-tabs .tab-content {
  padding: 0 60px;
}
.dashboard-page.w-tabs .tab-content .fluid-container {
  margin: 0 auto;
  max-width: 1098px;
  padding-top: 60px;
}
.dashboard-page.w-tabs .wrapper {
  margin: 0 auto;
  max-width: 1098px;
}
.dashboard-page.w-tabs .dashboard-tabs ul.nav-tabs {
  text-align: center;
  display: inline-block;
  width: 100%;
  border: none;
}
.dashboard-page.w-tabs.tabs-light .dashboard-tabs ul.nav-tabs {
  text-align: right;
  display: block;
  max-width: 1098px;
  margin-right: auto;
  margin-left: auto;
}
.dashboard-page.w-tabs .dashboard-tabs ul.nav-tabs li {
  float: none;
  display: inline-block;
  margin-bottom: 0px;
}
.dashboard-page.w-tabs .dashboard-tabs ul.nav-tabs li a {
  border: none;
  border-bottom: 5px solid transparent;
  background: none !important;
  transition: all 0.3s;
  color: #666;
}
.dashboard-page.w-tabs.tabs-light .dashboard-tabs ul.nav-tabs li a {
  font-size: 15px;
  margin-left: 24px;
  padding-left: 8px;
  padding-right: 8px;
}
.dashboard-page.w-tabs .dashboard-tabs ul.nav-tabs li.active a,
.dashboard-page.w-tabs .dashboard-tabs ul.nav-tabs li a.active {
  color: #000;
  border-color: #3bf;
}
.dashboard-page.w-tabs.tabs-light .dashboard-tabs ul.nav-tabs li.active a,
.dashboard-page.w-tabs.tabs-light .dashboard-tabs ul.nav-tabs li a.active {
  color: #000;
  border-color: #3bf;
}
.dashboard-page.w-tabs .dashboard-tabs ul.nav-tabs li a:before {
  display: none;
}
.dashboard-page.w-tabs .dashboard-tabs ul.nav-tabs li a:hover {
  color: #b721ff;
  border-bottom-color: #3bf;
}
.dashboard-page.w-tabs .tab-content {
  padding-top: 48px;
  padding-bottom: 10px;
  margin: 0 auto;
  max-width: 1098px;
}
.dashboard-page.w-tabs.tabs-light .tab-content {
  padding-top: 0;
  padding-right: 0;
  padding-left: 0;
  max-width: none;
}
.dashboard-page.w-tabs.tabs-light .tab-content .head-desc .filter-section {
  width: 100%;
  max-width: 1098px;
  margin: 0 auto;
  border-bottom: none;
}
.dashboard-page.w-tabs.tabs-light
  .tab-content
  .head-desc
  .filter-section
  .sales-more-filters {
  margin-top: 24px;
  display: none;
}
p.short-bio {
  font-weight: bold;
}
p.short-bio span span + span {
  padding: 0 8px;
  background: #fff;
  color: #000;
  border-radius: 10px;
}
p.short-bio.short-bio-alt span span + span {
  padding: 0;
  background: transparent;
  color: inherit;
  border-radius: 0;
}
.more-filters {
  font-size: 15px;
  color: #008ae8;
  cursor: pointer;
  margin-top: 26px;
  line-height: 49px;
  font-weight: bold;
}
.more-filters:hover {
  text-decoration: underline;
}
.dashboard-section {
  padding-bottom: 120px;
}

.table > thead > tr > th {
  text-align: right;
}
#dashboard #logo {
  margin-top: 32px;
  margin-bottom: 4px;
  transition: all 0.3s;
  position: absolute;
  right: 90px;
  z-index: 1002;
}
#dashboard #logo.active {
  right: 48px;
}
#dashboard #logo .show-menu {
  display: none;
  font-size: 22px;
  color: #151515;
  margin-left: 8px;
  transition: all 0.3s;
}
#dashboard #logo img {
  height: 44px;
  width: auto;
  margin: 0px 8px;
}
#dashboard #logo .store-name {
  display: inline-block;
  font-family: "Lalezar", cursive;
  font-size: 24px;
  color: #000;
  transition: all 0.3s;
  float: none;
  max-width: auto;
}
#dashboard #logo.active .store-name {
  color: #fff;
  float: left;
  max-width: 190px;
  min-width: 190px;
}
#dashboard #logo .branches {
  position: absolute;
  left: -35px;
  margin-top: -8px;
  font-size: 12px;
  font-weight: bold;
  padding: 6px 15px 3px 15px;
  transition: all 0.3s;
}
#dashboard #logo .branches .dropdown-menu {
  margin-left: -4px;
  margin-top: 3px;
}
#dashboard #logo.active .branches {
  left: 18px;
  font-size: 16px;
  transform: translateX(-100%);
  top: 0;
  font-weight: bold;
  height: 46px;
  line-height: 46px;
  padding: 0 24px;
}
#dashboard #logo.active .branches:hover {
  color: #b215fd;
  background: none;
}
#dashboard #logo .branches:hover {
  background: #e7e7ff;
}
#dashboard #logo .branches span.sm-icon,
.dashboard-page h1 .switch-sale-menu span.sm-icon {
  float: left;
  padding-top: 4px;
  padding-right: 5px;
  box-sizing: border-box;
  line-height: 12px;
}
.dashboard-page h1 .switch-sale-menu span.sm-icon {
  padding-top: 1px;
  padding-right: 3px;
}
.dashboard-page h1 .switch-sale-menu ul.dropdown-menu {
  min-width: 100px;
  margin-top: 10px;
  left: -12px !important;
}
#dashboard #logo.active .branches span.sm-icon {
  line-height: 46px;
}

#awesome-line {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  display: block;
  overflow: hidden;
  z-index: 9999999999;
}
#train1,
#train2 {
  position: absolute;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    to right,
    #b721ff,
    #21d4fd,
    #b721ff,
    #21d4fd,
    #b721ff
  );
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
#train1 {
  animation-name: awesome-line1;
}
#train2 {
  animation-name: awesome-line2;
}

/*####
###    SPECIFIC DASHBOARD PAGES    ###
####*/

/*####
###   PROFILE   ###
####*/
#user-national-id-image {
  margin-top: 24px;
  width: 100%;
  overflow: hidden;
}
#user-national-id-image img {
  width: 100%;
  height: auto;
}

/***
**   OVERLAY PANEL
***/
.theoverpanel {
  display: none;
  width: 100vw;
  min-height: 100vh;
  height: 100vh;
  top: 100px;
  position: fixed;
  z-index: 1009;
  background: #fff;
  transition: all 250ms ease 0s;
  left: 0px;
  overflow: hidden;
  direction: rtl;
  opacity: 0;
}
.theoverpanel.display {
  display: block !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.theoverpanel .overpanel-wrapper {
  width: 100%;
  height: calc(100% - 300px);
  margin: 0 auto;
  margin-top: 300px;
  overflow: auto;
}
.dialog-biskrem .dialog-container .overpanel-wrapper {
  width: calc(100% - 24px);
  height: 100%;
  max-height: calc(80vh - 80px);
  min-width: 320px;
  margin: 0 auto;
  margin-top: 24px;
  margin-bottom: 24px;
}
.theoverpanel.big-form .overpanel-wrapper,
.theoverpanel.big-form .overpanel-wrapper.scroll-wrapper {
  margin-top: 100px;
  max-height: calc(100% - 100px);
}
.theoverpanel.big-form .overpanel-wrapper {
  margin-top: 0;
  height: 100%;
}
.theoverpanel .overpanel-wrapper .overlay-form,
.dialog-biskrem .dialog-container .overpanel-wrapper .overlay-form {
  margin: 0 auto;
}
.dialog-biskrem .dialog-holder.x-large .dialog-container .overpanel-wrapper {
  width: 100%;
  padding: 0 24px;
}
.theoverpanel .overpanel-wrapper .overlay-input,
.dialog-biskrem .dialog-container .overpanel-wrapper .overlay-input,
#stallment-annual-profit .overlay-input {
  height: 44px;
  padding: 0px 10px;
  border: 1px solid #9da3a6;
  background: #fff none repeat scroll 0% 0%;
  text-overflow: ellipsis;
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: none;
  color: #000;
  font-size: 1em;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 400;
  direction: rtl;
  width: 300px;
  display: block;
  margin: 7px auto;
  margin-bottom: 0;
}
.theoverpanel .overpanel-wrapper .overlay-input:focus,
.dialog-biskrem .dialog-container .overpanel-wrapper .overlay-input:focus {
  border: 1px solid #9da3a6 !important;
}
.theoverpanel .overpanel-wrapper .overlay-input.warn,
.dialog-biskrem .dialog-container .overpanel-wrapper .overlay-input.warn {
  border-color: #d3514b;
}
.overlay-input.dim {
  width: 70px !important;
  cursor: not-allowed;
  float: right !important;
  font-weight: bold !important;
  font-size: 18px !important;
  text-align: center !important;
  padding-right: 20px !important;
  text-shadow: 0 1px 0 #000;
  color: #fff !important;
  background-color: #6692b0 !important;
}
#new-bill-page input.dim {
  float: none !important;
  display: block;
}
.theoverpanel .overpanel-wrapper .for-password,
.dialog-biskrem .dialog-container .overpanel-wrapper .for-password {
  position: relative;
  width: 300px;
  margin: 0 auto;
}
.for-password span {
  position: absolute;
  left: 10px;
  top: 0;
  line-height: 44px;
  cursor: pointer;
  color: #999;
  transition: all 0.3s;
}
.for-password span:hover {
  color: #111;
}
.theoverpanel .overpanel-wrapper .for-password .overlay-input,
.dialog-biskrem
  .dialog-container
  .overpanel-wrapper
  .for-password
  .overlay-input {
  padding-left: 30px;
}
.for-password span i.hide-pass,
.for-password.disp-pass span i.show-pass {
  display: none;
}
.for-password.disp-pass span i.hide-pass,
.for-password span i.show-pass {
  display: inline;
}
.theoverpanel .overpanel-wrapper .overlay-input-alt,
.dialog-biskrem .dialog-container .overpanel-wrapper .overlay-input-alt,
#stallment-annual-profit .overlay-input-alt {
  width: 300px;
  position: relative;
  margin: 7px auto;
  margin-bottom: 0;
}
.overlay-input-alt {
  position: relative;
}
.theoverpanel .overpanel-wrapper .overlay-input-alt > .bootstrap-select,
.dialog-biskrem
  .dialog-container
  .overpanel-wrapper
  .overlay-input-alt
  > .bootstrap-select {
  float: right;
  margin-right: 10px;
  margin-bottom: 14px;
}
.theoverpanel
  .overpanel-wrapper
  .overlay-input-alt
  > .bootstrap-select:first-child,
.dialog-biskrem
  .dialog-container
  .overpanel-wrapper
  .overlay-input-alt
  > .bootstrap-select:first-child {
  margin-right: 0;
}
.theoverpanel .overpanel-wrapper .dropdown-menu > li:last-child > a,
.dialog-biskrem
  .dialog-container
  .overpanel-wrapper
  .dropdown-menu
  > li:last-child
  > a {
  box-shadow: unset;
}
.theoverpanel .overpanel-wrapper .overlay-input-alt label,
.dialog-biskrem .dialog-container .overpanel-wrapper .overlay-input-alt label {
  width: 70px;
  text-align: right;
  font-size: 1.2em;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 400;
  float: right;
  line-height: 44px;
}
.theoverpanel .overpanel-wrapper .overlay-input-alt .overlay-input,
.dialog-biskrem
  .dialog-container
  .overpanel-wrapper
  .overlay-input-alt
  .overlay-input,
#stallment-annual-profit .overlay-input-alt .overlay-input {
  width: 230px;
  margin: 0;
  float: left;
}
.overlay-input-alt .overlay-input.input-for-currency {
  padding-left: 50px;
  float: left;
}
#stallment-annual-profit .overlay-input-alt {
  width: 120px;
  margin: 0;
}
#stallment-annual-profit label {
  line-height: 44px;
}
#stallment-annual-profit .overlay-input-alt .overlay-input.input-for-currency {
  float: none;
  width: 120px;
  padding-left: 40px;
}
.cash-input {
  position: relative;
}
#stallment-annual-profit
  .overlay-input-alt
  .overlay-input.input-for-currency:focus {
  border-color: #9da3a6 !important;
}
.overlay-input-alt span.input-currency,
.cash-input span.input-currency {
  position: absolute;
  color: #999;
  font-size: 1em;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 400;
  left: 10px;
  width: 40px;
  top: 0;
  line-height: 44px;
  text-align: center;
}
.cash-input span.input-currency {
  line-height: 49px;
}
#stallment-annual-profit .overlay-input-alt span.input-currency {
  left: 2px;
  top: 0;
}
.theoverpanel .overpanel-wrapper .overlay-inputs-container {
  width: 300px;
  margin: 0 auto;
}
.theoverpanel .overpanel-wrapper .overlay-inputs-container > div {
  padding: 0;
}
.theoverpanel .overpanel-wrapper .overlay-inputs-container .overlay-input-alt,
.theoverpanel
  .overpanel-wrapper
  .overlay-inputs-container
  .overlay-input-alt
  .overlay-input {
  width: 100%;
}
.theoverpanel .overpanel-wrapper button.btn,
.dialog-biskrem .dialog-container .overpanel-wrapper button.btn {
  border-width: 1px;
}
.theoverpanel .overpanel-wrapper button.btn:hover,
.dialog-biskrem .dialog-container .overpanel-wrapper button.btn:hover {
  border-color: #3bf;
  background: none;
}
.theoverpanel .overpanel-wrapper button.btn.warn,
.dialog-biskrem .dialog-container .overpanel-wrapper button.btn.warn {
  border-color: #d3514b;
}
/*** divider ***/
.theoverpanel .overpanel-wrapper .form-divider,
.dialog-biskrem .dialog-container .overpanel-wrapper .form-divider,
.form-divider {
  width: 300px;
  margin: 0 auto;
  overflow: hidden;
  height: 40px;
  display: flex;
}
.form-divider .divider-title {
  font-size: 16px;
  display: inline-block;
  padding-left: 5px;
  line-height: 40px;
}
.divider-line {
  flex: 1;
  display: inline-block;
  height: 2px;
  margin: 19px 0px;
  background: #ccc;
}

.theoverpanel .overpanel-wrapper .permission-row {
  width: 340px;
  padding-right: 20px;
  margin: 0 auto;
}

.theoverpanel .overpanel-wrapper .overlay-submit,
#new-sale span,
#show-returns span {
  height: 44px;
  padding: 0px;
  border: 0px none;
  display: block;
  background-color: #0070ba;
  box-shadow: none;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  -moz-appearance: none;
  color: #fff;
  font-size: 1.2em;
  text-align: center;
  font-weight: 700;
  font-family: HelveticaNeue-Medium, "Helvetica Neue Medium", HelveticaNeue,
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-shadow: none;
  text-decoration: none;
  transition: background-color 0.4s ease-out 0s;
  width: 300px;
  margin: 25px auto;
  margin-top: 7px;
}
.theoverpanel .overpanel-wrapper .overlay-submit:hover,
#new-sale span:hover,
#show-returns span:hover {
  background-color: #005ea6;
  outline: 0px none;
}
.theoverpanel .ico,
.dialog-biskrem .dialog-container .ico {
  margin: 40px auto;
  font-size: 80px;
  color: #093;
  text-align: center;
}
.theoverpanel #close {
  z-index: 101;
  right: 46px;
  top: 40px;
}
.dialog-biskrem .dialog-container #close,
#close {
  position: relative;
  margin: 12px;
}
#close.close-alt {
  margin-bottom: 0;
  display: flex;
  flex-direction: row;
}
.theoverpanel #close span.overlay-dismiss,
.dialog-biskrem .dialog-container #close span.overlay-dismiss,
#close span.overlay-dismiss {
  cursor: pointer;
  margin-left: 16px;
  transition: all 0.3s;
  font-size: 24px;
  color: #434343;
}
#close.close-alt span.overlay-dismiss {
  line-height: 54px;
}
.theoverpanel #close span.overlay-dismiss:hover,
.dialog-biskrem .dialog-container #close span.overlay-dismiss:hover,
#close span.overlay-dismiss:hover {
  color: #b721ff;
}
.theoverpanel #close span.overlay-title,
.dialog-biskrem .dialog-container #close span.overlay-title,
#close span.overlay-title {
  font-size: 36px;
  color: #1f1f1f;
  font-family: "Lalezar", cursive;
}
#close.close-alt span.overlay-title {
  flex: 1;
  text-align: center;
}
.theoverpanel #close span.overlay-title span,
.dialog-biskrem .dialog-container #close span.overlay-title span,
#close span.overlay-title span {
  font-family: "Lalezar", cursive;
}
#close.close-alt span.overlay-new {
  cursor: pointer;
  margin-right: 16px;
  transition: all 0.3s;
  font-size: 18px;
  color: #5badf7;
  line-height: 54px;
  width: 21px;
}
#close.close-alt span.overlay-new:hover {
  color: #b721ff;
}
.overlay-form .input-error {
  position: static;
  width: 100%;
}
.overlay-form .input-error-wrapper {
  width: 300px;
  margin: 0 auto;
}
.input-hint {
  width: 300px;
  margin: 0 auto;
  text-align: left;
  font-size: 12px;
  color: #333;
  font-style: normal;
}
.input-hint-large {
  width: 100%;
}

/***
*    DISPLAY TABLES
***/
.control-btn {
  font-size: 14px;
  color: #333;
  margin: 0 4px;
  transition: all 0.3s;
}
.control-btn.edit-btn {
  color: #64a9fd;
}
.control-btn.delete-btn {
  color: #f75755;
}
.control-btn.change-password-btn {
  color: #f76b69;
}
.control-btn:hover {
  color: #25244d;
}
.control-btn.add-quantity-btn:hover {
  color: #b721ff;
}
.control-btn.not-allowed {
  cursor: not-allowed;
  opacity: 0.65;
}
.control-btn.display-products {
  padding: 0px 12px;
  background: #275071;
  border-radius: 16px;
  line-height: 10px;
  color: #fff;
  font-weight: normal;
}
.control-btn.display-products:hover {
  color: #21d4fd;
}
.table-alt {
  width: 100%;
}
.table-alt.shift-table {
  background: #fff;
  border: 1px solid #e5eaed;
}
.table-alt thead,
.table-alt tbody,
.table-alt tr {
}
.table-alt thead tr,
.table-alt.products-table tbody tr.sub-table-container td table thead tr {
  border-bottom: 2px solid #becbcf;
}
.table-alt.shift-table thead tr {
  border-bottom: 1px solid #e5eaed;
}
.table-alt tbody tr {
  border-bottom: 1px solid #e5eaed;
}
.table-alt tbody tr.has-details,
.show-product,
.has-details {
  cursor: pointer;
  transition: all 0.3s;
}
table tbody tr.has-details.heighlight:hover {
  background: #f1f7fd;
}
table.table-alt.shift-table tbody tr.has-details.heighlight {
  background: #f0f4f4;
  border-right: 4px solid transparent;
}
table.table-alt.shift-table tbody tr.has-details.heighlight:hover {
  background: #e7f3fd;
  border-bottom: transparent;
}
table.table-alt.shift-table tbody tr:hover {
  border-bottom-color: #e5eaed;
}
table tbody tr.has-details.heighlight.expanded,
table.table-alt.shift-table tbody tr.has-details.heighlight.expanded {
  background: #fff;
}
table.table-alt.shift-table tbody tr.has-details.heighlight.expanded {
  border-right-color: #41af4b;
}
table.table-alt.shift-table tbody tr.has-details.heighlight.expanded:hover {
  background: #e7f3fd;
}
table tbody tr div.two-line-col p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: 0;
}
table.table-alt.shift-table tbody tr p {
  font-size: 16px;
  margin-bottom: 0;
  font-family: "Noto Kufi Arabic", serif;
  font-weight: bold;
}
table tbody tr div.two-line-col p:first-child {
  font-size: 15px;
  font-weight: bold;
  color: #000;
  line-height: 30px;
  font-family: "Noto Kufi Arabic", serif;
  transition: all 0.3s;
}
table#sales-table tbody tr div.two-line-col p:first-child,
table#sales-table tbody tr div.two-line-col p:first-child span {
  font-weight: normal;
  line-height: 16px;
}
table tbody tr:hover div.two-line-col p:first-child {
  color: #b721ff;
}
table tbody tr div.two-line-col p:last-child {
  font-size: 13px;
  color: #666;
  font-weight: normal;
  line-height: 12px;
}
table tbody tr.has-details.heighlight td.inline-detail span.toggle-details {
  font-size: 8px;
  transition: all 0.3s;
}
table
  tbody
  tr.has-details.heighlight:hover
  td.inline-detail
  span.toggle-details {
  color: #3b96f3;
}
table
  tbody
  tr.has-details.heighlight
  td.inline-detail
  span.toggle-details
  i:first-child,
table
  tbody
  tr.has-details.heighlight.expanded
  td.inline-detail
  span.toggle-details
  i:last-child {
  display: inline;
}
table
  tbody
  tr.has-details.heighlight.expanded
  td.inline-detail
  span.toggle-details
  i:first-child,
table
  tbody
  tr.has-details.heighlight
  td.inline-detail
  span.toggle-details
  i:last-child {
  display: none;
}
.table-alt tbody tr:hover {
  border-color: #008ae8;
}
.table-alt thead th {
  padding: 16px 40px;
}
.table-alt tbody tr td {
  position: relative;
  padding: 20px 40px;
  white-space: normal;
  word-break: break-word;
}
.table-alt.table-details thead th,
.table-alt.table-details tbody tr td,
#sales-table.table-alt thead th,
#sales-table.table-alt tbody tr td,
#returns-table.table-alt thead th,
#returns-table.table-alt tbody tr td {
  padding: 16px 24px;
}
.table-alt.table-details tbody tr {
  border-right: 4px solid transparent;
}
.table-alt.table-details tbody tr.expanded,
.table-alt.table-details tbody tr.details-row {
  border-right: 4px solid #41af4b;
}
.table-alt.table-details tbody tr.expanded:hover {
  border-bottom-color: #e5eaed;
}
.table-alt.table-details tbody tr.expanded:hover + tr.details-row {
  border-bottom-color: #008ae8;
}
.table-alt.table-details tbody tr.details-row {
  background: #fff;
}
.table-alt.table-alt.shift-table tbody tr td {
  padding: 8px 16px;
  white-space: normal;
  word-break: break-word;
}
.table-alt thead tr th:first-child,
.table-alt tbody tr td:first-child {
  width: 50%;
  padding-right: 0;
  text-align: right;
}
.table-alt.table-alt.shift-table thead tr th:first-child,
.table-alt.table-alt.shift-table tbody tr td:first-child {
  width: 40%;
  padding-right: 16px;
  text-align: right;
}
.table-alt thead tr th:last-child,
.table-alt tbody tr td:last-child {
  width: 20%;
  padding-right: 0;
  padding-left: 0;
}
.table-alt.table-alt.shift-table thead tr th:last-child,
.table-alt.table-alt.shift-table tbody tr td:last-child {
  width: 20%;
  padding-right: 16px;
  padding-left: 16px;
}
table.table-alt.shift-table tbody tr.cash-movements {
  background: #f0f4f4;
  border-right: 4px solid #41af4b;
}
.table-head-to-sort,
a.show-children {
  color: #3a4953;
  transition: all 0.3s;
}
a.show-children {
  font-weight: bold;
  text-decoration: none;
}
a.show-children span {
  margin-right: 4px;
}
.table-head-to-sort .sort-icon {
  margin-right: 4px;
  opacity: 0.4;
}
.table-head-to-sort .sort-icon i:first-child,
.table-head-to-sort .sort-icon.sort-asc i:last-child {
  display: inline-block;
}
.table-head-to-sort .sort-icon.sort-asc i:first-child,
.table-head-to-sort .sort-icon i:last-child {
  display: none;
}
.table-head-to-sort:hover,
a.show-children:hover {
  color: #008ae8;
}
.table-head-to-sort:hover .sort-icon {
  opacity: 1;
}
/*** make a slide appearance for the new children rows ***/
.table-alt tbody tr.new-child td {
  height: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  opacity: 0;
}
.table-alt tbody tr td.with-input {
  padding: 13px 33px;
}
.live-update-container {
  position: relative;
  border-radius: 3px;
  text-align: center;
}
.live-update-container span {
  display: none;
  position: absolute;
  margin: auto;
  font-size: 24px;
  color: #21d4fd;
  top: 1px;
  right: 50%;
  transform: translateX(80%);
}
.in-line-edit {
  width: auto;
  max-width: 70px;
  padding: 7px;
  border-radius: 3px;
  text-align: center;
  background: #f9f9f9;
  transition: all 0.3s;
  border: 1px solid transparent;
}
.in-line-edit:hover,
.in-line-edit:focus,
#product-sub-units-table .in-line-edit,
#bill-products .in-line-edit {
  border-color: #ccc !important;
  background: #fff;
}
.live-update-container.updating span {
  display: block;
}
.live-update-container.updating .in-line-edit {
  background: #b9b9b9;
}
#product-sub-units-table tbody tr td:last-child a.delete-btn,
#bill-products tbody tr td:last-child a.delete-btn,
.lk-bill-quantity-remove {
  color: red;
  font-size: 20px;
  line-height: 32px;
  transition: all 0.3s;
  width: 20px;
  display: inline-block;
  text-align: center;
}
#product-sub-units-table tbody tr td:last-child a.delete-btn span:last-child,
#product-sub-units-table
  tbody
  tr
  td:last-child
  a.delete-btn:hover
  span:first-child,
#bill-products tbody tr td:last-child a.delete-btn span:last-child,
#bill-products tbody tr td:last-child a.delete-btn:hover span:first-child,
.lk-bill-quantity-remove span:last-child,
.lk-bill-quantity-remove:hover span:first-child {
  display: none;
}
#product-sub-units-table tbody tr td:last-child a.delete-btn span:first-child,
#product-sub-units-table
  tbody
  tr
  td:last-child
  a.delete-btn:hover
  span:last-child,
#bill-products tbody tr td:last-child a.delete-btn span:first-child,
#bill-products tbody tr td:last-child a.delete-btn:hover span:last-child,
.lk-bill-quantity-remove span:first-child,
.lk-bill-quantity-remove:hover span:last-child {
  display: inline;
}
#product-sub-units-table tbody tr td:last-child a.delete-btn:hover,
#bill-products tbody tr td:last-child a.delete-btn:hover,
.lk-bill-quantity-remove:hover {
  -webkit-animation: remove-sub-unit 0.8s;
  animation: remove-sub-unit 0.8s;
  animation-fill-mode: forwards;
}

@keyframes remove-sub-unit {
  0% {
    font-size: 8px;
  }
  33% {
    font-size: 28px;
  }
  66% {
    font-size: 20px;
  }
}

#final-price-section {
  font-size: 15px;
}
#final-price-section .row {
  margin-bottom: 10px;
}
#final-price-section label {
  line-height: 49px;
}

.dashboard-sep,
.dashboard-line-sep,
.dashboard-line-sep-sm,
.dashboard-title-sep,
.dashboard-line-sep-tiny {
  display: block;
  width: 100%;
  margin: 25px 0;
  overflow: hidden;
}
.dashboard-line-sep {
  height: 1px;
  background: #ccc;
}
.dashboard-title-sep {
  height: 1px;
  background: #b721ff;
}
.dashboard-line-sep-x2 {
  height: 2px;
  background: #ccc;
}
.dashboard-line-sep-sm {
  text-align: center;
}
.dashboard-line-sep-sm div {
  width: 50%;
  margin: 0 auto;
  display: block;
  height: 1px;
  background: #ccc;
}
.dashboard-line-sep-tiny {
  margin-top: 8px;
}
.dashboard-line-sep-tiny div {
  width: 20%;
  margin: 0 auto;
  display: block;
  height: 1px;
  background: #ccc;
  max-width: 90px;
}
.dashboard-margin {
  margin-right: 45px;
}
.dashboard-block {
  overflow: hidden;
}
.dashboard-block.stats-block .stats-p p.col {
  padding: 0;
}
.dashboard-container .dashboard-block.dummy {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 120px;
  text-align: center;
}
.dashboard-container .dashboard-block.dummy:nth-child(2n) {
  border-right: 1px solid #e7e7e7;
}
.dashboard-inline-block h4 {
  font-weight: bold;
}
.dashboard-inline-block input.target {
  padding: 8px;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 15px;
  max-width: 130px;
  border: 1px solid #999;
  border-radius: 3px;
}
.dashboard-inline-block input:focus {
  box-shadow: 0 0 10px #4dbbff;
}
.dashboard-inline-block input.target:focus {
  border: 1px solid #999 !important;
}
.select-branch-row {
  margin-bottom: 8px;
}
.user-branch-selectors:active {
  box-shadow: 0 0 10px #4dbbff;
}
.user-branch-selectors.warn {
  box-shadow: 0 0 10px #d3514b;
}
#assign-user-to-new-branch,
.add-link {
  margin-top: 8px;
  color: #41af4b;
  text-decoration: none;
  font-size: 13px;
  transition: all 0.3s;
}
#assign-user-to-new-branch:hover,
.add-link:hover {
  color: #b721ff;
}
#assign-user-to-new-branch span,
.add-link span {
  margin-right: 3px;
}
#assign-user-to-new-branch.hide-me {
  display: none;
}
.rem-user-branch {
  font-size: 14px;
  margin-right: 3px;
  padding: 9px;
  color: #d3514b;
  cursor: pointer;
  transition: all 0.3s;
}
.rem-user-branch:hover {
  color: red;
}
.b-btn {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  margin: 0 4px;
  padding: 12px 20px;
  outline: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  transition-property: background, color, border;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-font-feature-settings: "liga", "kern";
  background-color: #41af4b;
  color: #fff;
}
.b-btn:hover {
  box-shadow: 3px 7px 15px #ccc;
}

/* PROGRESS BAR - BASE */
.stats-progress {
  width: 100%;
}
.meter {
  height: 5px;
  position: relative;
  background: #becbcf;
  border-radius: 8px;
}
.meter > span {
  display: block;
  height: 100%;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.meter > span:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #56aa1c;
  z-index: 1;
  background-size: 20px 20px;
  border-radius: 8px;
  overflow: hidden;
  animation-name: target;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
@keyframes target {
  from {
    width: 0px;
  }
  to {
    width: 100%;
  }
}

/***
*   DELETE CONFIRM DIALOG
***/
.dialog-biskrem {
  display: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
.dialog-holder {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  transition: all 0.3s;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.dialog-container {
  background: #fff;
  box-shadow: 0 25px 35px rgba(0, 0, 0, 0.2);
  padding: 16px;
  width: 70%;
  max-width: 500px;
  border-radius: 3px;
}
.dialog-holder.x-large .dialog-container {
  width: 70%;
  max-width: 700px;
  border-radius: 3px;
}
.dialog-container .dialog-message {
  font-size: 16px;
  font-weight: bold;
  padding: 8px;
  margin-bottom: 24px;
}
.dialog-container .dialog-buttons {
  text-align: left;
}
.dialog-container .dialog-buttons span {
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  color: #3b96f3;
  cursor: pointer;
  transition: all 0.3s;
  margin: 0 6px;
}
.dialog-container .dialog-buttons .cancel-btn {
}
.dialog-container .dialog-buttons span.warn {
  color: #d3514b;
}

/***
*   FORMS
***/
.dashboard-inline-block h4 + div > div > p {
  line-height: 48px;
  margin-bottom: 0;
}
.form-row {
  margin-bottom: 20px;
}
.form-row.row {
  margin-right: 0;
  margin-left: 0;
}
.form-row .labels {
  text-align: left;
  padding-left: 8px;
  line-height: 47px;
}
.form-row.uploader .labels {
  line-height: 120px;
}
.form-row .inputs {
  padding-left: 10%;
  max-width: 480px;
}
.form-row .inputs .wrap-input100 {
  margin-bottom: 0px;
  border-radius: 7px;
}
.form-row .inputs .wrap-input100 .input100 {
  background: #fff;
  border-radius: 3px;
  border: 1px solid #bbb;
  box-shadow: inset 0px 5px 15px #eee;
}
.form-row .inputs .wrap-input100 .input100.form-control[disabled] {
  background: #d6d6d6;
  font-size: 12px;
  box-shadow: none;
}
.form-row .inputs .container-login100-form-btn {
  max-width: 320px;
}
.form-row .inputs .input-error {
  margin-top: 0;
  padding-left: 20%;
}

/****  permissions  ****/
.permission-row .permission-item {
  float: right;
  margin-right: 12px;
  text-align: center;
}
.permission-row .permission-item:first-child {
  margin-right: 0;
}
.permission-row .permission-item .rule-item {
  padding: 6px 14px;
  border: 1px solid #999;
  border-radius: 20px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
  padding-left: 16px;
  margin-bottom: 14px;
}
.permission-row .permission-item .rule-item:hover {
  border-color: #3bf;
  box-shadow: 2px 7px 15px rgba(51, 187, 255, 0.6);
}
.permission-row .permission-item .rule-item span.rule-check {
  margin-left: 4px;
  font-size: 16px;
  color: #999;
}
.permission-row .permission-item .rule-item span.rule-check i {
  transition: all 0.3s;
}
.permission-row .permission-item .rule-item:hover span.rule-check i {
  color: #3bf;
  text-shadow: 2px 7px 15px rgba(51, 187, 255, 0.9);
}
.permission-row .permission-item .rule-item span.rule-check i.not-checked {
  display: inline;
}
.permission-row .permission-item .rule-item span.rule-check i.checked {
  display: none;
}
.permission-row .permission-item .rule-item.accepted span.rule-check {
  color: #39ca79;
}
.permission-row
  .permission-item
  .rule-item.accepted
  span.rule-check
  i.not-checked {
  display: none;
}
.permission-row .permission-item .rule-item.accepted span.rule-check i.checked {
  display: inline;
}

/*********************************************************************/

/*/////////////////////////////////*/
/*///        ADD PRODUCT        ///*/
/*/////////////////////////////////*/
.b-form .b-row {
  margin-bottom: 25px;
}
.b-form .b-radio-group-container .b-row {
  margin-bottom: 12px;
}
.b-form .b-row input,
.b-form .b-row textarea,
.b-form .b-row .tagator_element,
.products-live-search input,
.customers-live-search input,
.b-input-w-variety .input input,
.cash-input input,
.dialog-biskrem
  .dialog-container
  .overpanel-wrapper
  .cash-input
  input.overlay-input {
  box-sizing: border-box;
  margin: 0;
  padding: 12px;
  width: 100%;
  outline: 0;
  border: 2px solid #e5eaed;
  border-radius: 3px;
  background-color: #fff;
  box-shadow: none;
  color: #3a4953;
  word-break: normal;
  font-weight: 400;
  font-size: 14px;
  cursor: text;
  transition: all 0.2s;
  height: auto;
}
.b-form .b-row textarea {
  resize: none;
}
.cash-input input,
.dialog-biskrem
  .dialog-container
  .overpanel-wrapper
  .cash-input
  input.overlay-input {
  padding-left: 50px;
}
.b-form .b-row input:focus,
.b-form .b-row textarea:focus,
.b-form .b-row .tagator_element:focus,
.products-live-search input:focus,
.customers-live-search input:focus,
.b-input-w-variety .input input:focus,
.cash-input input:focus,
.dialog-biskrem
  .dialog-container
  .overpanel-wrapper
  .cash-input
  input.overlay-input:focus {
  border-color: #008ae8 !important;
  box-shadow: 0 0 8px #008ae8;
  border-width: 2px !important;
}
.b-form .b-row input.warn,
.b-form .b-row textarea.warn,
.b-input-w-variety .input input.warn {
  border-color: #dc3545 !important;
  box-shadow: 0 0 8px #dc3545;
}
.b-form .b-row .tagator_element {
  padding: 8px !important;
  width: 100% !important;
  z-index: 105;
}
.b-form .b-row .tagator_element input {
  width: 20px;
  display: inline;
  border: none;
  background: unset;
  padding: 0;
}
.b-form .b-row .tagator_element input:focus {
  border: none;
  background: unset;
  box-shadow: unset;
}
.b-form .b-row .num-input,
.num-input {
  font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 21px;
}
.b-radio-input {
  margin-bottom: 6px;
}
.b-radio-input .b-radio {
  position: relative;
  display: inline-block;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  border: 2px solid #e5eaed;
  border-radius: 50%;
  -ms-flex-negative: 0;
  cursor: pointer;
  background-color: #fff;
}
.b-radio-group.checked .b-radio-input .b-radio {
  border-color: #41af4b;
  background-color: #41af4b;
}
.b-radio-input .b-radio:after {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 10px;
  height: 10px;
  display: block;
  border-radius: 50%;
  content: "";
  transition: opacity 0.2s;
  box-sizing: content-box;
  background-color: #e5eaed;
  opacity: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.b-radio-input:hover .b-radio:after,
.b-radio-group.checked .b-radio-input .b-radio:after {
  opacity: 1;
}
.b-radio-group.checked .b-radio-input .b-radio:after {
  -webkit-animation: b-radio-check 0.8s;
  animation: b-radio-check 0.8s;
}
.b-radio-input span {
  font-weight: bold;
  line-height: 26px;
  vertical-align: top;
  padding-right: 12px;
  cursor: pointer;
}
.b-radio-group p {
  display: none;
  padding-right: 38px;
}
.b-radio-group.checked p {
  display: block;
}
.net-profit {
  font-size: 12px !important;
}
@keyframes b-radio-check {
  0% {
    transform: scale(0);
  }
  33% {
    transform: scale(1.8);
  }
  66% {
    transform: scale(1);
  }
}

/*******
///		PRODUCTS PAGE
********/
#content section.flex-table {
  max-width: calc(100vw - 400px);
  padding-bottom: 10px;
  overflow-x: auto;
}
#content.b-slider section.flex-table {
  max-width: calc(100vw - 200px);
}
.table-alt.products-table thead th {
  padding: 16px 10px;
}
.table-alt tbody tr {
  transition: all 0.3s;
}
.table-alt.products-table tbody tr td {
  position: relative;
  padding: 15px 10px;
  white-space: normal;
  word-break: break-word;
}
.table-alt.products-table tbody tr.sub-table-container > td {
  padding: 36px 24px;
  background: #e5eaed;
}
.table-alt.products-table tbody tr.sub-table-container td table {
  background: #fff;
}
.products-table div.product-row-container,
.product-show-table div.product-row-container {
  float: right;
  width: calc(100% - 65px);
  height: 50px;
}
.products-table div.product-row-container > span,
.product-show-table div.product-row-container > span {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.products-table div.product-row-container span.product-name,
.product-show-table div.product-row-container span.product-name {
  font-size: 15px;
  font-weight: bold;
  color: #000;
  line-height: 30px;
  font-family: "Noto Kufi Arabic", serif;
}
.products-table tr td span.show-detailed-table i:first-child,
.products-table tr.expanded td span.show-detailed-table i:last-child,
.product-show-table tr td span.show-detailed-table i:first-child,
.product-show-table tr.expanded td span.show-detailed-table i:last-child {
  display: inline;
}
.products-table tr.expanded td span.show-detailed-table i:first-child,
.products-table tr td span.show-detailed-table i:last-child,
.product-show-table tr.expanded td span.show-detailed-table i:first-child,
.product-show-table tr td span.show-detailed-table i:last-child {
  display: none;
}
.products-table div.product-row-container span.pr-sku,
.product-show-table div.product-row-container span.pr-sku {
  font-size: 13px;
  color: #666;
  font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}
.product-show-table div.product-row-container span.pr-sku.to-inline {
  display: inline;
}
.products-table div.product-row-container span.pr-sku.to-inline + span {
  display: inline;
  color: #666;
  font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}
.products-table div.product-row-container span.pr-sku.to-inline + span span {
  font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}
.products-table .product-row img,
.product-show-table .product-showroom img {
  float: left;
  width: 50px;
  height: 50px;
  object-fit: cover;
  margin-right: 15px;
  border-radius: 7px;
}
.products-table span.show-detailed-table,
.product-show-table span.show-detailed-table {
  cursor: pointer;
  transition: all 0.3s;
}
table.products-table
  > tbody
  > tr:not(.sub-table-container)
  > td:not(.pr-quantity):hover {
  cursor: pointer;
}
table.products-table
  > tbody
  > tr:not(.sub-table-container):hover
  > td:not(.pr-quantity)
  .product-name {
  color: #b721ff;
}
.products-table span.show-detailed-table:hover,
.products-table tr.expanded span.show-detailed-table {
  color: #b721ff !important;
}
.table-w-filter {
  margin: 45px 0;
}
.table-w-filter > div.row {
  margin-bottom: 24px;
}
.search {
  position: relative;
}
.search input {
  box-sizing: border-box;
  margin: 0;
  padding: 12px;
  padding-left: 42px;
  width: 100%;
  outline: 0;
  border: 2px solid #e5eaed;
  border-radius: 3px;
  background-color: #fff;
  box-shadow: none;
  color: #3a4953;
  word-break: normal;
  font-weight: 400;
  font-size: 14px;
  cursor: text;
  transition: all 0.2s;
}
.search input:focus {
  border-color: #008ae8 !important;
  box-shadow: 0 0 8px #008ae8;
}
.search span.search-btn {
  position: absolute;
  top: 12px;
  left: 28px;
  cursor: text;
  line-height: 25px;
}
.filter-section {
  border-bottom: 1px solid #becbcf;
  padding-bottom: 9px;
  margin-bottom: 32px;
}
.filter-section .opened-indicator {
  position: relative;
  margin-bottom: 32px;
}
.filter-section .opened-indicator p {
  height: 1px;
  background: #becbcf;
  margin: 0 !important;
}
.filter-section .opened-indicator p span.top-arrow {
  position: absolute;
  top: -7px;
  border: solid #becbcf;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 7px;
  background: #f9f9f9;
  transform: rotate(-135deg);
}
.filter-section.display .opened-indicator p span.top-arrow {
  display: none;
}

.filter-section .selected-filters span.filter-item {
  padding: 3px 6px;
  margin: 0 8px 24px 8px;
  background: #fff;
  font-size: 12px;
  color: #000;
  border-radius: 20px;
  box-shadow: 1px 1px 2px #ccc;
}
.filter-section .selected-filters span.filter-item:first-child {
  margin-right: 0;
}
.filter-section .b-form .b-row .label-row {
  display: block;
}
.filter-section .selected-filters span.filter-item span {
  color: #999;
  transition: all 0.3s;
  cursor: pointer;
}
.filter-section .selected-filters span.filter-item span:hover {
  color: #000;
}

.b-form .b-row #filter-price-section input {
  padding: 8px;
  width: 90px;
  margin: 0 8px;
  margin-top: 4px;
  text-align: center;
}
.b-form .b-row #filter-price-section .slider {
  margin: 0 24px;
  width: 150px;
}
.b-form .b-row #filter-price-section .slider .slider-handle {
  cursor: pointer;
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 1px 1px 1px #bbb;
}
.b-form .b-row #filter-price-section .slider .slider-track {
  background: #0080ff;
  box-shadow: none;
}
.b-form .b-row #filter-price-section .slider-track-high,
.b-form .b-row #filter-price-section .slider-track-high {
  background: #ccc;
}

.b-form .b-row #filter-price-section .slider-track-low,
.b-form .b-row #filter-price-section .slider-track-low {
  background: #ccc;
}

.b-form .b-row #filter-price-section .slider-selection {
  background: #0080ff;
}
/***** quantities section *****/
.quantity-total {
  margin: 0 !important;
  margin-bottom: 24px !important;
}
.quantity-total div:first-child {
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.quantity-total div.available-quantities {
  background: #fff;
}
.quantity-total div.available-quantities div:first-child {
  padding: 12px;
}
.quantity-total div.available-quantities div.new-quantity {
  align-items: center;
  justify-content: center;
}
.quantity-total div.available-quantities div.new-quantity div.new-quantity-btn {
  max-height: 48px;
  height: 48px;
  line-height: 48px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}
.quantity-total
  div.available-quantities
  div.new-quantity
  div.new-quantity-btn:hover {
  background: #64a9fd;
  color: #fff;
}

/*******
///		DISPLAY PRODUCT PAGE
********/
#product-page,
.show-page {
  padding-top: 32px;
  font-family: "Noto Kufi Arabic", serif;
  font-size: 15px;
}
#product-page .dashboard-item div.row:first-child {
  border-bottom: 1px solid #08f;
  padding-bottom: 24px;
  margin-bottom: 24px;
}
#product-page .product-title h1 {
  border-bottom: none;
}
#product-page .product-title .sub-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
}
#product-page .product-title .sub-title span,
#product-page .product-title .sub-title span mark {
  font-weight: normal;
  font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}
#product-page #product-control-btns,
.show-page .b-control-btns {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
}
#product-page #product-control-btns div,
.show-page .b-control-btns div {
  text-align: center;
}
#product-page span.b-label,
#main-unit-label {
  font-family: "Noto Kufi Arabic", serif;
  color: #000;
  font-weight: bold;
  font-size: 14px;
}
#product-page span.b-label-x2 {
  font-size: 20px;
}
#product-page .row:not(p) > div > div {
  margin-top: 24px;
}
#product-page .row:not(p) > div > div#p-categories {
  margin-top: 0;
}
#product-page p {
  margin-bottom: 0px !important;
}
#product-page #product-details #p-categories span.cateogry-tag {
  height: 24px;
  line-height: 24px;
  position: relative;
  font-size: 12px;
  margin-right: 20px;
  padding: 0 12px 0 10px;
  background: #0089e0;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: -1px 1px 1px #333;
}
#product-page #product-details #p-categories span.cateogry-tag:after {
  content: "";
  width: 16.97px;
  height: 16.97px;
  border-radius: 4px;
  transform: rotate(45deg);
  position: absolute;
  top: 4px;
  right: -7px;
  background: #0089e0;
  transition: all 0.3s;
}
#product-page #product-details #p-categories span.cateogry-tag:before {
  content: "";
  position: absolute;
  top: 10px;
  right: 0;
  float: right;
  width: 4px;
  height: 4px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  background: #fff;
  -moz-box-shadow: -1px -1px 2px #004977;
  -webkit-box-shadow: -1px -1px 2px #004977;
  box-shadow: -1px -1px 2px #004977;
  z-index: 1;
}
#product-page #product-details #p-categories span.cateogry-tag:hover,
#product-page #product-details #p-categories span.cateogry-tag:hover:after {
  background: #555;
}
#product-page #product-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/*******
///		NEW BILL AND SELL PAGE
********/
#new-bill-page .products-section {
  padding-bottom: 520px;
  max-width: 100%;
  overflow: auto;
}
.products-live-search,
.customers-live-search {
  display: inline-block;
  width: 60%;
  max-width: 540px;
  position: relative;
  font-family: "Noto Kufi Arabic", serif;
}
.customers-live-search {
  width: 100%;
}
.customers-live-search .customer-icon {
  position: absolute;
  right: 12px;
  line-height: 49px;
}
.products-live-search input,
.customers-live-search input {
  display: block;
  width: 100%;
  background: #fff;
}
.customers-live-search input {
  padding-right: 38px;
}
.products-live-search ul.products-list,
.customers-live-search ul.customers-list {
  display: none;
  position: absolute;
  list-style: none;
  width: 100%;
  min-width: 500px;
  min-height: 48px;
  background-color: #ffffff;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
  z-index: 999;
  overflow: hidden;
  color: #0a0a0a;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.customers-live-search ul.customers-list {
  box-shadow: 1px 5px 15px rgba(0, 0, 0, 0.3);
}
.products-live-search ul.products-list .product-list-container,
.customers-live-search ul.customers-list .customers-list-container {
  max-height: 465px;
  overflow: auto;
}
.products-live-search ul.products-list.visible,
.customers-live-search ul.customers-list.visible {
  display: block;
}
.products-live-search ul.products-list li,
.customers-live-search ul.customers-list li {
  border-bottom: 1px solid #e5e5e5;
  cursor: pointer;
  width: 100%;
  overflow: hidden;
  display: flex;
  padding: 8px 12px;
  transition: all 0.3s;
}
#receipt-customer {
  width: 100%;
  overflow: hidden;
  padding: 4px 6px;
  transition: all 0.3s;
}
.products-live-search ul.products-list li img,
.customers-live-search ul.customers-list li img,
.customers-live-search ul.customers-list li .initials_img,
#receipt-customer .initials_img,
.summary #customer-section #customer-found .initials_img {
  height: 60px;
  width: 60px;
  border: 2px solid transparent;
  object-fit: cover;
  margin-right: 15px;
  border-radius: 7px;
}
.customers-live-search ul.customers-list li .initials_img,
#receipt-customer .initials_img,
.summary #customer-section #customer-found .initials_img {
  display: block;
  width: 50px;
  height: 50px;
  margin: 5px;
  margin-left: 15px;
  margin-right: 0;
  border-radius: 8px;
  background: #282e43;
  line-height: 46px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  font-family: "Roboto", sans serif;
  text-transform: uppercase;
  font-size: 28px;
}
#receipt-customer .initials_img,
.summary #customer-section #customer-found .initials_img {
  width: 40px;
  height: 40px;
  margin: 5px;
  margin-left: 12px;
  line-height: 36px;
  font-size: 24px;
}
.customers-live-search ul.customers-list li .initials_img i {
  font-family: "Roboto", sans serif;
  font-style: normal;
  line-height: 46px;
  font-size: 28px;
}
#receipt-customer .initials_img i,
.summary #customer-section #customer-found .initials_img i {
  font-family: "Roboto", sans serif;
  font-style: normal;
  line-height: 36px;
  font-size: 24px;
}
.products-live-search ul.products-list li div.product-row-container,
.customers-live-search ul.customers-list li div.customer-row-container,
#receipt-customer div.customer-row-container,
.summary #customer-section #customer-found div.customer-row-container {
  flex: 1;
  height: 60px;
}
.products-live-search ul.products-list li div.left-side,
.customers-live-search ul.customers-list li div.left-side,
#receipt-customer div.left-side,
.summary #customer-section #customer-found div.left-side {
  line-height: 60px;
  font-size: 24px;
  margin: 0 16px;
}
.products-live-search ul.products-list li div.left-side.left-side-sm,
.customers-live-search ul.customers-list li div.left-side.left-side-sm,
#receipt-customer div.left-side.left-side-sm,
.summary #customer-section #customer-found div.left-side.left-side-sm {
  line-height: 50px;
}
#receipt-customer div.customer-row-container,
.summary #customer-section #customer-found div.customer-row-container {
  flex: 1;
  height: 50px;
}
.products-live-search ul.products-list li div > span,
.customers-live-search ul.customers-list li div > span,
#receipt-customer div > span,
.summary #customer-section #customer-found div > span {
  display: block;
  font-weight: bold;
  font-size: 13px;
  line-height: 22px;
  color: #666;
  font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}
.products-live-search ul.products-list li div > span > span,
.customers-live-search ul.customers-list li div > span > span,
#receipt-customer div > span > span,
.summary #customer-section #customer-found div > span > span {
  display: inline-block;
  font-weight: normal;
  font-size: 13px;
  line-height: 22px;
  color: #666;
  vertical-align: bottom;
}
.products-live-search ul.products-list li div > span.product-name,
.customers-live-search ul.customers-list li div > span.customer-name,
#receipt-customer div > span.customer-name,
.summary #customer-section #customer-found div > span.customer-name {
  font-size: 16px;
  line-height: 32px;
  color: #000;
}
#receipt-customer div > span.customer-name,
.summary #customer-section #customer-found div > span.customer-name {
  line-height: 28px;
  color: #b721ff;
}
.customers-live-search ul.customers-list li div > span.customer-name.x-large {
  line-height: 60px;
}
#receipt-customer div > span.customer-name.x-large,
.summary #customer-section #customer-found div > span.customer-name.x-large {
  line-height: 50px;
}
.products-live-search ul.products-list li div > span.product-name span {
  margin-right: 8px;
  color: #999;
  line-height: 32px;
  transition: all 0.3s;
}
table.products-table
  > tbody
  > tr:not(.sub-table-container):hover
  > td:not(.pr-quantity)
  .products-live-search
  ul.products-list
  li
  div
  > span.product-name {
  color: #000;
}
.take-me-to-roduct-row {
  transition: all 0.3s;
}
.take-me-to-roduct-row:hover {
  cursor: pointer;
}
.products-live-search ul.products-list li:hover,
.customers-live-search ul.customers-list li:hover,
.take-me-to-roduct-row:hover {
  background: #f1f7fd;
}
.products-live-search ul.products-list li:hover div > span.product-name,
.customers-live-search ul.customers-list li:hover div > span.customer-name {
  color: #b721ff !important;
}
.products-live-search ul.products-list li:hover img,
.customers-live-search ul.customers-list li:hover img,
.customers-live-search ul.customers-list li:hover .initials_img {
  border-color: #fff;
}
.customers-live-search ul.customers-list li.new-customer-row {
  padding: 24px;
  background: #f1f7fd;
}
.customers-live-search ul.customers-list li.new-customer-row a.add-link {
  margin-top: 0;
}
.customers-live-search ul.customers-list li.new-customer-row:hover a.add-link {
  color: #b721ff;
}
table#bill-products input {
  min-width: 95px;
}
table#bill-products input.input-s {
  min-width: 70px;
}
table#bill-products input.input-ss {
  min-width: 60px;
}
table#bill-products input.warn {
  border-color: #dc3545 !important;
  box-shadow: 0 0 8px #dc3545;
}
table#bill-products tbody tr {
  border-color: #becbcf;
  transition: all 0.3s;
}
table#bill-products tbody tr:hover {
  background: #f1f7fd;
}
table#bill-products tbody tr td {
  padding-top: 32px;
}
table#bill-products tbody tr:first-child td {
  padding-top: 15px;
}
table#bill-products tbody tr div.pr-top-row,
table#bill-products tbody tr div.pr-bottom-row {
  display: block;
  width: 100%;
}
table#bill-products tbody tr div.pr-bottom-row {
  margin-top: 24px;
}
table#bill-products tbody tr div.pr-bottom-row > div > div {
  display: inline-grid;
  min-width: 100px;
  margin-left: 16px;
  text-align: right;
}
table#bill-products tbody tr div.pr-bottom-row > div > div:last-child {
  margin-left: 0;
}
table#bill-products tbody tr div.pr-bottom-row > div > div input {
  width: 100%;
  display: block;
  min-width: 100%;
  text-align: center;
}

.table-alt.bills-table thead tr th:first-child,
.table-alt.bills-table tbody tr td:first-child {
  width: 120px;
}

/*###
**######	BILL DISPLAY
###*/
#bill-page.dashboard-page h1 {
  border-bottom: none;
}
#bill-page #bill-image {
  margin-top: 32px;
}
.price-tag {
  display: inline-block;
  padding: 8px;
  background: #54b39e;
  text-align: center;
}
.price-tag.price-tag-alt {
  background: #fff;
  border: 2px solid #666;
  min-width: 170px;
}
.price-tag .tag-container {
  border: 1px dashed #fff;
  padding: 16px;
  color: #fff;
  text-shadow: 0 1px 0 #666;
  font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}
.price-tag.price-tag-alt .tag-container {
  border: none;
  padding: 8px;
  color: #000;
  text-shadow: 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.price-tag .tag-container * {
  font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  text-align: center;
}
.price-tag .tag-container .title {
  font-size: 18px;
  font-weight: bold;
  line-height: 12px;
}
.price-tag .tag-container .price {
  font-size: 36px;
  font-weight: bold;
  margin: 0 8px;
}
.price-tag.price-tag-alt .tag-container .price {
  line-height: 26px;
  margin-top: 12px;
}
.price-tag .tag-container .price span.tag-currency {
  font-size: 14px;
  font-weight: normal;
}
.price-tag .tag-container .tag-footer {
  font-size: 12px;
  font-weight: bold;
}

/***	for bill return popup disalog 		****/
.bill-quantity {
  padding: 16px 20px 16px 0;
  border-bottom: 1px solid #e5eaed;
}
.bill-quantity:hover {
  border-color: #008ae8;
  background: #f1f7fd;
}
.table-alt tbody tr.returned {
  background: #ffeaec !important;
}

/*#####
###			CUSTOMERS
#####*/
#customer-image.image-icon {
  font-size: 120px;
  padding-top: 32px;
}
table tbody tr.customer-details td {
  display: none;
  background: #fff;
}
table tbody tr.customer-details td {
  border-right: 4px solid #41af4b;
  padding: 24px !important;
}
table tbody tr.customer-details td div.dashboard-line-sep {
  margin-top: 8px;
  margin-bottom: 12px;
}
table tbody tr.customer-details td > div.row > div > p {
  padding: 8px;
  font-size: 14px;
  margin-bottom: 0;
  line-height: 16px;
}
table tbody tr.customer-details td > div.row > div.smalls > p {
  padding: 4px;
  font-size: 11px;
}
table tbody tr.customer-details td > div.row > div > p.customer-section-head {
  font-size: 20px;
  font-weight: bold;
  text-shadow: -2px 2px 0 #e0efe1;
  padding: 8px;
}
table tbody tr.customer-details td > div.row > div > p span.labels {
  font-weight: bold;
}
table tbody tr.customer-details td > div.row > div > p span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
table tbody tr.has-details.heighlight td.inline-detail span.customer-group,
.customers-live-search
  ul.customers-list
  li
  div
  > span.customer-name
  span.customer-group,
#receipt-customer div > span.customer-name span.customer-group,
.summary
  #customer-section
  #customer-found
  div
  > span.customer-name
  span.customer-group {
  display: inline-block;
  overflow: hidden;
  margin: 0;
  padding: 4px 8px;
  border-radius: 3px;
  background-color: #e5eaed;
  vertical-align: sub;
  font-weight: 900;
  font-size: 10px;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-font-feature-settings: "liga", "kern";
  color: #6692b0 !important;
  line-height: 10px;
  margin-right: 8px;
}
.list-w-edit > div {
  width: 100%;
  display: flex;
  flex-direction: row;
  font-size: 18px;
  position: relative;
  margin: 16px 0;
}
.list-w-edit div input {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  padding: 8px;
  font-family: "Noto Kufi Arabic", serif;
  font-size: 18px;
  font-weight: bold;
  cursor: text;
  min-width: 0 !important;
}
.list-w-edit div.live input,
.list-w-edit div.live input:focus {
  background: #fff;
  border-color: #9da3a6 !important;
}
.list-w-edit div.live input.warn {
  border-color: #f75755 !important;
}
.list-w-edit > div > span {
  transition: all 0.3s;
  cursor: pointer;
  margin: 0 8px;
  font-size: 22px;
  line-height: 45px;
}
.list-w-edit div span.to-edit i:first-child,
.list-w-edit div.live span.to-edit i:last-child {
  display: inline;
}
.list-w-edit div span.to-edit i:last-child,
.list-w-edit div.live span.to-edit i:first-child {
  display: none;
}
.list-w-edit div span.to-edit,
.list-w-edit div.live span.to-edit {
  color: #64a9fd;
}
.list-w-edit div span.to-edit:hover,
.list-w-edit div.live span.to-edit:hover {
  color: #b721ff;
}
.list-w-edit div span.to-delete {
  color: #f75755;
}
.list-w-edit div span.to-delete:hover {
  color: red;
}
.dialog-biskrem div.list-w-edit .input-error-wrapper {
  position: absolute;
  display: inline-block;
  width: 77%;
  text-align: left;
  font-size: 12px;
  color: red;
  font-style: normal;
  right: 0;
  bottom: -15px;
}
.dialog-biskrem div.list-w-edit .input-error-wrapper .input-error {
  position: relative;
  margin: 0;
}
.dialog-biskrem div.list-w-edit .reset-edit {
  position: absolute;
  display: inline-block;
  font-size: 12px;
  color: #999;
  font-style: normal;
  top: 0;
  line-height: 47px;
  left: 80px;
  transition: all 0.3s;
}
.dialog-biskrem div.list-w-edit .reset-edit:hover {
  color: #111;
}

/*#####
###			SELL PAGE
#####*/
#pr-quantity-details .dialog-container {
  max-width: 100%;
  overflow: hidden;
}
#pr-quantity-details#close.close-alt span.overlay-title {
  line-height: 24px;
}
#pr-quantity-details.dialog-biskrem .table-alt tbody tr td {
  padding: 16px 24px;
}
#sell-page .tab-content {
  position: absolute;
  top: 0;
  padding-top: 12px;
  margin-top: 100px;
  min-height: calc(100vh - 120px);
  overflow: hidden;
  display: flex;
  right: 50%;
  transform: translateX(50%);
  width: 100%;
}
#sell-page .tab-content > div:first-child {
  padding-top: 120px;
}
#sell-page h1 {
  margin: 0;
  border: none;
}
#sell-page .products-live-search {
  width: 100%;
}
/******		PRODUCTS BLOCKS     *****/
.product-block {
  display: inline-block;
  width: 22%;
  height: 115px;
  margin: 1.1%;
  text-align: center;
  padding: 0;
  border-radius: 7px;
  overflow: hidden;
  position: relative;
  box-shadow: 1px 2px 8px #ddd;
  cursor: pointer;
  transition: all 0.3s;
}
.product-block div.pr-img {
  min-height: 100%;
  width: auto;
}
.product-block img {
  width: 100%;
  min-width: 100%;
  height: 100px;
  min-height: 100%;
  object-fit: cover;
  margin: 0 auto;
  border-radius: 7px;
  transition: all 0.3s;
}
.product-block .product-meta {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  text-align: right;
  background: rgba(255, 255, 255, 0.3);
}
.product-block .product-meta .product-title {
  background: #fff;
  padding: 4px;
  border-right: 3px solid red;
  transition: all 0.3s;
}
.product-block .product-meta .pr-quantity {
  background: #fff;
  padding: 4px;
  padding-top: 0;
}
.product-block:hover img {
  transform: scale(1.1) rotate(15deg);
}
.product-block:hover .product-meta .product-title {
  border-color: #41af4b;
}
.product-block-alt {
  padding-top: 0 !important;
}
.product-block-alt .summary-product {
  cursor: pointer;
  transition: all 0.3s;
}
.product-block-alt .summary-product:hover {
  background: #e7f3fd !important;
}
/******		RECEIPT PANEL     *******/
#sell-page .receipt-pane {
  padding-top: 26px;
  display: flex;
}
#sell-page .receipt-pane .receipt {
  display: flex;
  flex-direction: column;
  background: #fff;
  width: 100%;
  border-radius: 3px;
  border: 1px solid #e7e7e7;
}
/******   START SHIFT   *******/
#start-shift {
  padding: 24px;
  text-align: center;
  max-width: 458px;
  margin: 0 auto;
  margin-bottom: 48px;
}
#sell-page #start-shift {
  max-width: none;
  margin: auto;
}
#start-shift img {
  width: 100%;
  height: auto;
  max-width: 260px;
  margin-bottom: 24px;
}
#start-shift > div {
  margin-bottom: 12px;
  text-align: right;
  position: relative;
  overflow: hidden;
}
#start-shift > div div.overlay-input-alt {
  position: relative;
}
#start-shift > div input {
  padding-left: 55px;
}
#start-shift > div.start-btn {
  text-align: center;
  width: 100%;
  margin: 0;
  margin-top: 8px;
  color: #fff;
  border: none;
  font-size: 20px !important;
  line-height: 18px !important;
  transition: all 0.3s;
}
#start-shift > div.start-btn:hover {
  box-shadow: 3px 7px 12px rgba(0, 0, 0, 0.4);
}
#start-shift > div.start-btn span {
  color: #fff;
  font-family: "Roboto", serif;
}
#start-shift.load > div.start-btn span {
  color: #8de5ff;
}
#start-shift > div.start-btn span.load_icon,
#start-shift.load > div.start-btn span.display_txt {
  display: none;
}
#start-shift.load > div.start-btn span.load_icon,
#start-shift > div.start-btn span.display_txt {
  display: inline;
}
/******   SELECT CUSTOMER   *******/
#sell-page .receipt-pane .receipt #select-customer {
  padding: 8px;
}
#sell-page #receipt-customer {
  display: none;
  padding: 8px;
}
#sell-page #receipt-customer .rm-customer,
#sell-page .receipt #receipt-products .receipt-product .pr-main span.rm-product,
#sell-page .receipt-note .rm-note,
#sell-page .receipt-discount .rm-discount,
.replace-icon {
  float: left;
  box-sizing: border-box;
  width: 40px;
  height: 50px;
  padding: 8px;
}
#sales-table .replace-icon,
#returns-table .replace-icon {
  float: left;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  padding: 0;
}
#sell-page #receipt-customer .rm-customer span,
#sell-page
  .receipt
  #receipt-products
  .receipt-product
  .pr-main
  span.rm-product
  span,
#sell-page .receipt-note .rm-note span,
#sell-page .receipt-discount .rm-discount span,
.replace-icon span {
  display: block;
  width: 34px;
  height: 34px;
  line-height: 34px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 14px;
  color: #f75755;
  text-align: center;
  transition: all 0.3s;
}
.replace-icon span {
  color: #388ae6;
}
.table-details .details-row .replace-icon,
.table-details .details-row .replace-icon span,
#sales-table.table-details .details-row .replace-icon,
#sales-table.table-details .details-row .replace-icon span,
#returns-table.table-details .details-row .replace-icon,
#returns-table.table-details .details-row .replace-icon span {
  width: 100%;
}
#sell-page #receipt-customer .rm-customer span:hover,
#sell-page
  .receipt
  #receipt-products
  .receipt-product
  .pr-main
  span.rm-product
  span:hover,
#sell-page .receipt-note .rm-note span:hover,
#sell-page .receipt-discount .rm-discount span:hover {
  background: #f75755;
  color: #fff;
}
.replace-icon span:hover {
  background: #388ae6;
  color: #fff;
}
/*****  RECEIPT PRODUCTS  *****/
#sell-page .receipt #receipt-products {
  flex: 1;
  border-top: 1px solid #e5eaed;
}
#sell-page .receipt #receipt-products > div {
  min-height: 100%;
}
#sell-page .receipt #receipt-products .b-form .b-row {
  margin-bottom: 8px;
}
#sell-page .receipt #receipt-products .receipt-product {
  border-right: 4px solid transparent;
  cursor: pointer;
  transition: all 0.3s;
  border-bottom: 1px solid #e5eaed;
  border-bottom-color: #e5eaed !important;
}
#sell-page .receipt #receipt-products .receipt-product.flash-warn {
  border-right-color: #f75755 !important;
  animation-name: flash_warn;
  animation-duration: 900ms;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  background-color: #ffeaec;
}

@keyframes flash_warn {
  0% {
    background-color: #fff;
    opacity: 1;
  }
  22% {
    background-color: #ffeaec;
  }
  77% {
    background-color: #fff;
  }
  100% {
    background-color: #ffeaec;
  }
}
#sell-page .receipt #receipt-products .receipt-product.expanded {
  border-color: #41af4b;
}
#sell-page .receipt #receipt-products.to-return .receipt-product.expanded {
  border-color: #f88e00;
}
#sell-page .receipt #receipt-products .receipt-product .pr-main {
  display: flex;
  flex-direction: row;
  position: relative;
  padding: 8px;
}
#sell-page
  .receipt
  #receipt-products
  .receipt-product
  .pr-main
  span.toggle-details {
  font-size: 8px;
  transition: all 0.3s;
  line-height: 40px;
}
#sell-page
  .receipt
  #receipt-products
  .receipt-product:hover
  .pr-main
  span.toggle-details {
  color: #3b96f3;
}
#sell-page
  .receipt
  #receipt-products
  .receipt-product
  .pr-main
  span.toggle-details
  i:first-child,
#sell-page
  .receipt
  #receipt-products
  .receipt-product.expanded
  .pr-main
  span.toggle-details
  i:last-child {
  display: inline;
}
#sell-page
  .receipt
  #receipt-products
  .receipt-product.expanded
  .pr-main
  span.toggle-details
  i:first-child,
#sell-page
  .receipt
  #receipt-products
  .receipt-product
  .pr-main
  span.toggle-details
  i:last-child {
  display: none;
}
#sell-page
  .receipt
  #receipt-products
  .receipt-product
  .pr-main
  span.pr-quantity {
  font-size: 36px;
  line-height: 40px;
  margin: 0 8px;
}
#sell-page
  .receipt
  #receipt-products.to-return
  .receipt-product
  .pr-main
  span.pr-quantity {
  color: #f88e00;
}
#sell-page
  .receipt
  #receipt-products
  .receipt-product
  .pr-main
  span.pr-core-info {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: row;
}
#sell-page
  .receipt
  #receipt-products
  .receipt-product
  .pr-main
  span.pr-unit-from {
  position: absolute;
  color: #6692b0;
  font-size: 12px;
  top: 0;
  line-height: 16px;
}
#sell-page
  .receipt
  #receipt-products
  .receipt-product
  .pr-main
  span.pr-unit-from
  span {
  transition: all 0.3s;
}
#sell-page
  .receipt
  #receipt-products
  .receipt-product
  .pr-main
  span.pr-unit-from
  span.quantity-warehouse-availability {
  color: #41af4b;
}
#sell-page
  .receipt
  #receipt-products
  .receipt-product
  .pr-main
  span.pr-unit-from
  span.low-balance {
  color: #f75755;
}
#sell-page
  .receipt
  #receipt-products
  .receipt-product
  .pr-main
  span.pr-unit-from
  ~ span {
  padding-top: 16px;
  line-height: 24px;
}
#sell-page .receipt #receipt-products .receipt-product .pr-main span.pr-name {
  flex: 1;
  font-size: 18px;
  font-weight: bold;
}
#sell-page .receipt #receipt-products .receipt-product .pr-main span.pr-price {
  font-size: 18px;
  margin-left: 4px;
}
#sell-page
  .receipt
  #receipt-products
  .receipt-product
  .pr-main
  span.pr-currency {
  margin-left: 4px;
}
#sell-page
  .receipt
  #receipt-products
  .receipt-product
  .pr-main
  span.rm-product {
  padding-top: 10px !important;
  height: 42px;
}
#sell-page .receipt #receipt-products .receipt-product .pr-quantity-var {
  dispalay: none;
}
#sell-page
  .receipt
  #receipt-products
  .receipt-product.expanded
  .pr-quantity-var {
  dispalay: block;
}
#sell-page
  .receipt
  #receipt-products
  .receipt-product
  .pr-quantity-var
  div.b-row {
  padding: 8px;
}
#sell-page
  .receipt
  #receipt-products
  .receipt-product
  .pr-quantity-var
  .show-quant-details {
  background: #e5eaed;
  dispalay: block;
  height: 20px;
  line-height: 20px;
  padding-left: 12px;
}
#sell-page
  .receipt
  #receipt-products
  .receipt-product
  .pr-quantity-var
  .show-quant-details
  a {
  color: #3b96f3;
  font-size: 12px;
  font-family: "Roboto", sans serif;
  text-decoration: none;
  transition: all 0.3s;
}
#sell-page
  .receipt
  #receipt-products
  .receipt-product
  .pr-quantity-var
  .show-quant-details
  a:hover {
  text-decoration: underline;
}
.receipt-pr-price {
  display: inline;
}
.receipt-pr-exp-date span,
.receipt-pr-price span {
  border: 1px solid #aaa;
  padding: 3px 7px;
  color: #111;
  text-decoration: none;
  border-radius: 12px;
  min-width: 90px;
  text-shadow: 0 1px 0 #fff;
  cursor: pointer;
  font-weight: bold;
  text-align: center;
  transition: all 0.3s;
}
.receipt-product.exp-date-warn .receipt-pr-exp-date span {
  background: #dc3545;
  color: #fff;
}
.receipt-pr-exp-date > span,
.receipt-pr-price > span {
  margin-top: 15px;
}
.receipt-pr-exp-date span:hover,
.receipt-pr-price span:hover {
  color: #b721ff;
}
.receipt-pr-exp-date li.selected span,
.receipt-pr-price li.selected span {
  box-shadow: 0 1px 6px -2px #333 inset;
  color: #b721ff;
}
.receipt-pr-exp-date ul.receipt-pr-exp-dates-list,
.receipt-pr-price ul.receipt-pr-price-list {
  list-style: none;
  display: none;
  background: #fff;
  position: absolute;
  z-index: 1002;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
  width: 150px;
  border-radius: 7px;
  border: 1px solid #ddd;
  max-width: 80%;
}
.receipt-pr-exp-date ul.receipt-pr-exp-dates-list:before,
.receipt-pr-price ul.receipt-pr-price-list:before {
  position: absolute;
  top: -7px;
  right: 40px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: "";
  background: #fff;
}
.receipt-pr-exp-date ul.receipt-pr-exp-dates-list li,
.receipt-pr-price ul.receipt-pr-price-list li {
  padding: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: -8px;
}
.receipt-pr-exp-date ul.receipt-pr-exp-dates-list li:first-child,
.receipt-pr-price ul.receipt-pr-price-list li:first-child {
  margin-top: 0;
}
.receipt-pr-exp-date ul.receipt-pr-exp-dates-list li:hover,
.receipt-pr-price ul.receipt-pr-price-list li:hover {
  background: #eee;
}
.receipt-pr-exp-date ul.receipt-pr-exp-dates-list li:hover span,
.receipt-pr-price ul.receipt-pr-price-list li:hover span {
  color: #b721ff;
}
/*****  RECEIPT FOOTER  *****/
#sell-page .receipt #receipt-footer {
}
#sell-page .receipt #receipt-footer .receipt-row-label,
#sell-page .receipt #receipt-footer .receipt-row-label label {
  font-weight: bold;
  color: #000;
  font-size: 16px;
}
#sell-page .receipt #receipt-footer p,
#sell-page .receipt #receipt-footer .b-row {
  margin-bottom: 0;
}
#sell-page .receipt #receipt-footer .receipt-note,
#sell-page .receipt #receipt-footer .receipt-pay,
#sell-page .receipt #receipt-footer .receipt-add {
  border-top: 2px solid #e5eaed;
  padding: 16px;
}
#receipt-footer .receipt-add span.add-note,
#receipt-footer .receipt-add span.add-discount {
  display: inline-block;
  color: #3b96f3;
  font-weight: bold;
  transition: all 0.3s;
  text-decoration: none;
  margin: 0 8px;
  cursor: pointer;
}
#receipt-footer .receipt-add span.add-note.included,
#receipt-footer .receipt-add span.add-discount.included {
  display: none;
}
#receipt-footer .receipt-add span.add-note:hover,
#receipt-footer .receipt-add span.add-discount:hover {
  text-decoration: underline;
}
#sell-page .receipt #receipt-footer .receipt-note,
#sell-page .receipt #receipt-footer .receipt-discount {
  display: none;
}
#sell-page .receipt #receipt-footer .receipt-note input {
  width: calc(100% - 65px);
  margin-left: 15px;
}
#sell-page .receipt #receipt-footer .receipt-discount {
  margin: 0 16px;
  padding: 16px 0;
  border-top: 1px solid #e5eaed;
}
#sell-page .receipt #receipt-footer .receipt-discount .discount-value {
  font-size: 18px;
}
.b-input-w-variety {
  display: flex;
  flex-direction: row;
}
.b-input-w-variety .input {
  position: relative;
  flex: 1;
}
.b-input-w-variety .input input {
  padding-left: 50px;
}
.b-input-w-variety .input span.input-currency {
  position: absolute;
  color: #999;
  font-size: 1em;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 400;
  left: 10px;
  top: 0px;
  width: 40px;
  line-height: 49px;
  text-align: center;
}
#sell-page .receipt #receipt-footer .receipt-discount .b-radio-group-container {
  margin-top: 12px;
}
#sell-page
  .receipt
  #receipt-footer
  .receipt-discount
  .b-radio-group-container
  div {
  display: inline-block;
  font-family: "Roboto", sans serif;
}
#sell-page
  .receipt
  #receipt-footer
  .receipt-discount
  .b-radio-group-container
  div.b-radio-group {
  margin-bottom: 0;
}
#sell-page
  .receipt
  #receipt-footer
  .receipt-discount
  .b-radio-group-container
  div.b-radio-group
  div.b-radio {
  margin-right: 16px;
}
#sell-page
  .receipt
  #receipt-footer
  .receipt-discount
  .b-radio-group-container
  div
  span {
  font-family: "Roboto", sans serif;
  font-size: 18px;
  padding-right: 6px;
}
#sell-page .receipt-note .rm-note,
#sell-page .receipt-discount .rm-discount {
  display: inline;
}
#sell-page .receipt-discount #discount-err {
  display: none;
}
#sell-page .receipt-discount #discount-err.err {
  display: block;
}
#sell-page .receipt-discount #discount-err span.input-error {
  position: static;
  margin-top: 8px;
}
#sell-page .receipt #receipt-footer .receipt-pay .pay-btn,
#start-shift > div.start-btn {
  background: #41af4b;
  color: #fff;
  padding: 16px 32px;
  font-size: 28px;
  line-height: 28px;
  font-weight: bold;
  cursor: pointer;
  font-family: "Roboto", sans serif;
  border-radius: 8px;
}
#sell-page .receipt #receipt-footer .receipt-pay .pay-btn.to-return {
  background: #f75800;
}
#sell-page
  .receipt
  #receipt-footer
  .receipt-pay
  .pay-btn.to-return
  div.loading {
  width: 100%;
  text-align: center;
  color: #fff;
}
#sell-page
  .receipt
  #receipt-footer
  .receipt-pay
  .pay-btn.to-return.load
  div:first-child,
#sell-page
  .receipt
  #receipt-footer
  .receipt-pay
  .pay-btn.to-return
  div.loading {
  display: none;
}
#sell-page
  .receipt
  #receipt-footer
  .receipt-pay
  .pay-btn.to-return
  div:first-child,
#sell-page
  .receipt
  #receipt-footer
  .receipt-pay
  .pay-btn.to-return.load
  div.loading {
  display: block;
}
#sell-page .receipt #receipt-footer .receipt-pay .pay-btn span {
  font-family: "Roboto", sans serif;
}
#sell-page .receipt #receipt-footer .receipt-pay .pay-btn.disabled {
  background: #f0f4f4;
  cursor: not-allowed;
}
#sell-page .receipt #receipt-footer .receipt-pay .pay-btn .items-count {
  margin-right: 8px;
  font-size: 14px;
  line-height: 28px;
}
#sell-page .receipt #receipt-footer .receipt-pay .pay-btn .total-price {
  float: left;
}

/*** complete sale popup dialog ****/
#complete-sale #close.close-alt span.overlay-dismiss {
  line-height: 24px;
  font-size: 14px;
}
#complete-sale .dialog-container,
.big-screen .dialog-container {
  width: 80%;
  max-width: 1098px;
  transition: all 0.2s;
}
#complete-sale .dialog-container.b-fv,
.big-screen .dialog-container.b-fv {
  min-height: calc(100vh - 240px);
  max-height: calc(100vh - 240px);
  margin-top: 100%;
}
#complete-sale.dialog-biskrem .dialog-container > .overpanel-wrapper,
.big-screen.dialog-biskrem .dialog-container > .overpanel-wrapper {
  width: 95%;
  height: 95%;
  margin-bottom: 0;
  padding-bottom: 36px !important;
}
.summary {
  height: 100%;
  display: flex;
}
.summary p {
  margin-bottom: 0;
}
.summary .receipt-summary-title span {
  font-family: "Noto Kufi Arabic", serif;
  color: #3a4953;
  font-size: 16px;
  font-weight: bold;
  line-height: 64px;
  border-bottom: 2px solid #3a4953;
  padding: 0 16px;
}
.summary .receipt-summary-products {
  min-height: 49px;
  padding: 24px 0;
  overflow: hidden;
}
#sales-table .summary .receipt-summary-products,
#returns-table .summary .receipt-summary-products {
  padding: 0;
}
.summary .receipt-summary-products .summary-product {
  display: flex;
  flex-direction: row;
}
.product-block-alt .summary-product.return {
  animation-name: slide_remove;
  animation-duration: 400ms;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
.product-block-alt .summary-product.keep {
  animation-name: slide_add;
  animation-duration: 400ms;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
@keyframes slide_remove {
  0% {
    transform: translateX(0);
  }
  77% {
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
    display: none;
  }
}
@keyframes slide_add {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  33% {
    opacity: 1;
  }
  100% {
    transform: translateX(0);
  }
}
.summary .receipt-summary-products .summary-product:nth-child(even) {
  background: #f4f6f7;
}
.summary
  .returns-summary
  .receipt-summary-products
  .summary-product:nth-child(odd) {
  background: #ffeaec;
}
.summary
  .returns-summary
  .receipt-summary-products
  .summary-product:nth-child(even) {
  background: #dc3545;
  color: #fff;
}
.summary .receipt-summary-products .summary-product.returned {
  background: #ffeaec;
}
.summary .receipt-summary-products .summary-product span {
  line-height: 36px;
  font-size: 14px;
  font-weight: bold;
}
.summary .receipt-summary-products .summary-product span.quantity {
  padding: 0 12px;
  padding-right: 24px;
}
.summary .receipt-summary-products .summary-product span.quantity,
.summary .receipt-summary-products .summary-product span.price {
  font-size: 16px;
}
.summary .receipt-summary-products .summary-product span.product {
  flex: 1;
  padding-left: 12px;
}
.summary .receipt-summary-products .summary-product span.price {
  padding-left: 24px;
}
.summary .receipt-summary-products ~ div {
  margin-right: 48px;
}
#sales-table .summary .receipt-summary-products ~ div {
  margin-right: 0;
}
.summary .receipt-summary-products ~ div span {
  line-height: 36px;
}
.summary .receipt-summary-sub-total {
  padding-top: 12px;
}
.summary .receipt-summary-sub-total,
.summary .receipt-summary-total {
  border-top: 1px solid #a8bbca;
}
.summary .receipt-summary-total {
  margin-right: 0 !important;
  color: #3a4953;
  margin-top: 12px;
}
.summary .receipt-summary-total p > span:first-child {
  font-weight: bold;
  font-size: 15px;
  line-height: 52px;
}
.summary .receipt-summary-total p span {
  font-size: 15px;
  line-height: 52px;
  color: #3a4953;
  font-weight: bold;
}

.summary .pay-form .cash {
  font-size: 26px;
}
.summary .pay-form .cash div:first-child {
  line-height: 60px;
  font-size: 48px;
  font-family: "Roboto", sans serif;
}
.summary .pay-form .cash input#cash-to-pay {
  font-size: 26px;
  padding-left: 70px;
  text-align: center;
}
.summary .pay-form .cash input#cash-to-pay.disabled {
  cursor: default;
  border-color: transparent;
}
.summary .pay-form .cash div:last-child {
  position: relative;
}
.summary .pay-form .cash div:last-child .currency {
  position: absolute;
  line-height: 60px;
  left: 15px;
  width: 70px;
  text-align: center;
  font-size: 14px;
}
.summary #continue-sale {
  text-align: center;
}
.summary #continue-sale #continue-sale-btn {
  display: inline-block;
  position: relative;
  z-index: 1;
  min-width: 75%;
  transition: all 0.3s;
}
.summary #continue-sale #continue-sale-btn > div {
  position: relative;
  display: inline-block;
  padding: 16px 48px;
  border-radius: 8px;
  font-size: 18px;
  width: 100%;
  z-index: 2;
}
.summary #continue-sale #continue-sale-btn > div.disabled {
  opacity: 1;
  background-color: #ccc !important;
  border-color: #ccc !important;
}
.summary #continue-sale #continue-sale-btn > div:hover {
  background-color: #149dcc !important;
  border-color: #149dcc !important;
  color: #ffffff !important;
}
.summary #continue-sale #continue-sale-btn:after {
  position: absolute;
  z-index: -2;
  box-shadow: 0 0.1em 4em 0 rgba(0, 0, 0, 0.8);
  content: "";
  top: auto;
  bottom: 4px;
  height: 20px;
  border-radius: 100%;
  width: 80%;
  margin: 0 auto;
  right: 50%;
  transform: translateX(50%);
  transition: all 0.3s;
}
.summary #continue-sale #continue-sale-btn:hover:after {
  bottom: 12px;
}

.summary #customer-section.selected #customer-found,
.summary #customer-section #customer-not-set {
  display: flex;
}
.summary #customer-section #customer-found,
.summary #customer-section.selected #customer-not-set {
  display: none;
}
.summary #customer-section #customer-found {
  border: 2px solid #a8bbca;
  padding: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}
.summary #customer-section .more-sales {
  margin-top: 32px;
}
.summary #customer-section .more-sales > div {
  text-align: center;
}
.summary #customer-section .more-sales > div div.btn {
  width: 100%;
}
.summary #customer-section .more-sales > div div.btn.disabled {
  opacity: 0.2;
}
.control-n-details {
  display: flex;
  flex-direction: column;
  padding-bottom: 30px;
  padding-right: 15px;
}
.control-n-details .to-fluid {
  flex: 1;
}
.go-to-sale {
  color: #388ae6;
  text-decoration: none;
}
.go-to-sale:hover {
  text-decoration: underline;
}

/*****   SUCCESS SALE   ****/
#complete-sale #success-sale {
  text-align: center;
  margin: 0 auto;
  height: 160px;
}
#complete-sale #success-sale svg {
  overflow: visible;
  position: relative;
  transform: scale(0.8);
  margin: 0 auto;
  margin-top: -120px;
}
#complete-sale .success-sale-title {
  font-size: 32px;
  font-weight: bold;
  color: #3fc59d;
  text-align: center;
  text-shadow: 2px 4px 1px #fff, 3px 6px 1px #bcf7e5;
}
#complete-sale .email-receipt-and-print .to-heighlight {
  position: relative;
  display: inline-block;
  border-bottom: 2px solid #ccc;
  border-radius: 7px;
  overflow: hidden;
}
#complete-sale .email-receipt-and-print .to-heighlight span {
  padding: 12px 18px;
  background: linear-gradient(to right, #b841f1, #3acbec);
  font-weight: bold;
  text-shadow: 1px 1px 0px #000;
  cursor: pointer;
  color: #fff;
  transition: all 0.3s;
}
#complete-sale .email-receipt-and-print .to-heighlight input#customer-email {
  text-align: left;
  padding: 12px;
  max-width: 180px;
  direction: ltr;
  background: #fdf7e0;
  transition: all 0.3s;
}
#complete-sale
  .email-receipt-and-print
  .to-heighlight
  input#customer-email:focus {
  background: #fff4cb;
}
#complete-sale .email-receipt-and-print .to-heighlight .input-heighlight {
  position: absolute;
  display: block;
  height: 2px;
  z-index: 100;
  bottom: 0px;
  background: linear-gradient(to right, #b721ff, #21d4fd);
  transition: all 0.3s;
  width: 0px;
  right: 100%;
}
#complete-sale .email-receipt-and-print .to-heighlight:hover .input-heighlight {
  width: 100%;
  right: 0;
}
#new-sale span,
#show-returns span {
  margin: 0 auto;
  line-height: 44px;
  font-size: 18px;
}

/** END SHIFT APGE **/
#end-shift h1 {
  border-bottom: none;
  padding-right: 0;
}
#end-shift h5 {
  font-weight: bold;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #becbcf;
}
#end-shift .summary-row {
  display: flex;
  flex-direction: row;
}
#end-shift .summary-row > div {
  margin-right: 24px;
}
#end-shift .summary-row > div:first-child {
  margin-right: 0;
  min-width: 200px;
}
#end-shift .summary-row > div span {
  display: block;
  width: 100%;
}
#end-shift .summary-row > div span:first-child {
  font-weight: bold;
}
#end-shift .summary-row .summary-flood {
  flex: 1;
}
table.sm-table thead tr,
table.sm-table tbody tr {
  border-bottom: none !important;
}
table.sm-table.table-striped tbody tr:nth-child(even) {
  background: #fff;
}
table.sm-table.table-striped tbody div.to-scroll {
  max-height: 564px;
  overflow: auto;
}
table.sm-table thead tr th:not(.side-title),
table.sm-table tbody tr td:not(.side-title) {
  border-bottom: 1px solid #e5eaed;
  padding: 12px;
}
table.sm-table.table-alt tbody tr.has-details:hover td:not(.side-title) {
  border-bottom: 1px solid #008ae8;
}
table.sm-table tbody tr td.preg {
  padding: 1px 0 0 0 !important;
}
table.sm-table tbody tr td.less-padding {
  padding: 12px 8px !important;
}
table.sm-table thead tr th:not(.side-title) {
  border-bottom-color: #becbcf;
}
table.sm-table tbody tr td.cash-timing {
  direction: ltr;
}
table.sm-table tbody tr td.cash-amount {
  color: #28a745;
}
table.sm-table tbody tr td.cash-amount.normal-val {
  color: #28a745;
  padding-left: 0px !important;
  padding-right: 0px !important;
}
table.sm-table tbody tr td.cash-amount.normal-val.cash-out {
  color: #f75755;
}
table.sm-table tbody tr td.cash-amount.zero-val {
  color: #333;
}

/*********
 		CASH MANAGEMENT
+++++++++*/
.dashboard-page.w-tabs .dashboard-tabs .head-extra a.load-me-alt {
  padding: 8px 24px;
  margin-top: 36px;
}
#cash-in-reason-related-obj > div,
#cash-out-reason-related-obj > div {
  display: none;
}
.date-group {
  margin-top: 64px;
}
.cash-row {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #e5eaed;
}
.cash-row.action_in {
  background: #f3fff6;
}
.cash-row.action_out {
  background: #fff1f1;
}
.cash-row > div {
  padding: 16px 20px;
  display: inline-block;
  line-height: 36px;
}
.cash-row > div.action-timing {
  padding-top: 16px;
  padding-right: 90px;
  line-height: 12px;
  font-size: 14px;
  direction: ltr;
}
.cash-row > div.action-icon {
  height: 36px;
  width: 36px;
  text-align: center;
}
.cash-row > div.action-icon img {
  height: 36px;
  width: auto;
  opacity: 0.5;
}
.cash-row > div.action-user {
  flex: 1;
  text-align: right;
}
.cash-row > div.action-user .user-initials {
  width: 36px;
  height: 36px;
  background: #282e43;
  line-height: 36px;
  border-radius: 36px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  font-family: "Roboto", sans serif;
  text-transform: uppercase;
  border: none;
  margin-left: 12px;
  overflow: hidden;
  float: right;
}
.cash-row > div.action-user .user-initials i {
  font-family: "Roboto", sans serif;
  font-style: normal;
  line-height: 36px;
  font-size: 22px;
}
.cash-row > div.action-user .user-display-name {
  font-size: 16px;
  float: right;
}
.cash-row > div.action-type span {
  width: 100%;
  line-height: 18px;
}
.cash-row > div.action-type {
  line-height: 18px;
  min-width: 200px;
}
.cash-row > div.action-type span.type-title.centered {
  line-height: 36px;
}
.cash-row > div.action-type span.type-desc {
  padding-right: 16px;
}
.cash-row > div.action-amount {
  font-size: 14px;
  min-width: 135px;
}
.cash-row.action_in > div.action-amount {
  color: #28a745;
}
.cash-row.action_out > div.action-amount {
  color: #f75755;
}
/** for shifts opened and closed **/
.cash-row.open_shift > div,
.cash-row.close_shift > div {
  padding: 4px 12px;
  line-height: 18px;
}
.cash-row.open_shift {
  background: #ffb578;
}
.cash-row.close_shift {
  background: #27536a;
}
.cash-row.open_shift > div.action-timing,
.cash-row.close_shift > div.action-timing {
  padding-right: 130px;
}
.cash-row.close_shift > div.action-timing span {
  color: #fff;
}
.cash-row.close_shift > div.shift span {
  color: #ddd;
}
.cash-row.open_shift > div.shift span {
  color: #333;
}
.cash-row.open_shift > div.shift,
.cash-row.close_shift > div.shift {
  flex: 1;
  padding-left: 130px;
}
.cash-row.open_shift > div.shift p,
.cash-row.close_shift > div.shift p {
  margin-bottom: 0 !important;
}
.cash-row.open_shift > div.shift img,
.cash-row.close_shift > div.shift img {
  height: 18px;
  margin-left: 12px;
}
.cash-row.sales,
.cash-row.sale_returns {
  cursor: pointer;
}
.cash-row.sales.not-allowed,
.cash-row.sale_returns.not-allowed {
  cursor: default;
}
.cash-row.sales .action-type,
.cash-row.sale_returns .action-type {
  transition: all 0.3s;
}
.cash-row.sales:hover .action-type,
.cash-row.sale_returns:hover .action-type {
  color: #b721ff;
}
.show-customer {
  cursor: pointer;
  transition: all 0.3s;
}
.show-customer:hover {
  text-decoration: underline;
}

/*********
 		SHFITS HISTORY
+++++++++*/
.table-alt.table-details tbody tr.open_shift {
  background: #fff4eb;
}
.table-alt.table-details tbody tr.open_shift:hover,
table tbody tr.has-details.heighlight.open_shift.expanded {
  background: #ffddc1;
}
table tbody tr.has-details.heighlight.open_shift.expanded,
.table-alt.table-details tbody tr.open_shift + tr.details-row {
  border-right: 4px solid #ffb13f;
}
table tbody tr.has-details.heighlight.close_shift.expanded,
.table-alt.table-details tbody tr.close_shift + tr.details-row {
  border-right: 4px solid #2aa8d4;
}
.table-alt.table-details tbody tr.close_shift {
  background: #ebf7fd;
}
.table-alt.table-details tbody tr.close_shift:hover,
table tbody tr.has-details.heighlight.close_shift.expanded {
  background: #cbedff;
}
.table-alt.table-details tbody tr.open_shift span.shift-icon {
  color: #ffb13f;
}
.table-alt.table-details tbody tr.close_shift span.shift-icon {
  color: #2aa8d4;
}
.table-alt.table-details tbody tr.details-row.shift-details {
  background: #f0f4f4;
}

/*+++++++
+++			EDIT MAIN INFO PAGE
+++++++*/
#gmail-pass,
#stallment-annual-profit {
  display: none;
}
#gmail-pass.visible,
#stallment-annual-profit.visible {
  display: block;
}

/*+++++++
+++			FOR STATISTICS
+++++++*/

/* DASHBOARD HOME ****************************/
#home-stats {
  position: relative;
}
#home-stats .loader {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: #fff;
  z-index: 1;
}
.dashboard-stats {
  padding: 48px 0;
  padding-right: 48px;
}
.dashboard-stats.stats-block-white {
  background: #fff;
}
.dashboard-stats h1 {
  margin: 0 !important;
  border: none;
}
.dashboard-stats h1,
.dashboard-stats h2,
.dashboard-stats h3 {
  font-family: "Lalezar", cursive;
}
.dashboard-stats #period-gain .total-cash,
.dashboard-stats #period-profit .total-profit {
  vertical-align: bottom;
}
.dashboard-stats #period-gain .total-cash.down {
  vertical-align: super;
}
.dashboard-stats-inner-alt {
  position: relative;
  display: flex;
  border-radius: 5px;
  background-color: #e5eaed;
  border: 2px solid #e5eaed;
  overflow: hidden;
  padding: 16px;
  min-height: 250px !important;
}
.dashboard-stats-inner-alt .dashboard-inner-block {
  border-radius: 5px;
  background-color: #fff;
  border: 2px solid #e5eaed;
  height: 100%;
  margin-left: 16px;
  padding: 16px;
}
.dashboard-stats-inner-alt .dashboard-inner-block:last-child {
  margin-left: 0;
}
.inner-block-title span {
  font-weight: bold;
  line-height: 36px;
  border-bottom: 2px solid #3a4953;
}

.fluid-container {
  display: flex;
  flex-direction: row;
  margin: 48px 0;
}
.fluid-container div {
  min-width: 200px;
}
.fluid-container tr.details-row div,
.fluid-container td.controls div {
  min-width: auto;
}
#sell-page .fluid-container {
  margin: 0;
  padding-top: 12px;
}
#sell-page .fluid-container div {
  min-width: auto;
  line-height: 16px;
}
#sell-page .fluid-container div:first-child {
  line-height: 40px;
}
#sell-page .fluid-container div.divider-line {
  margin-top: 23px;
}
#sell-page .fluid-container div.b-rounded-btn {
  height: 40px;
}
.fluid-container div span.fluid-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 15px;
}
.fluid-container div span.fluid-info {
  display: block;
  text-align: right;
  font-weight: 200;
  font-size: 32px;
}
.fluid-container div.to-fluid {
  flex: 1;
}
.rounded-input {
  border-radius: 36px;
  border: 1px solid #ddd;
  background: #fff;
  padding: 4px 12px;
  line-height: 24px;
  font-size: 14px;
}
.rounded-input:focus {
  border-color: #008ae8 !important;
  box-shadow: 0 0 8px #008ae8;
}
.stats-actions {
  text-align: left;
}
.stats-actions ul.button-group {
  list-style: none;
  margin: 0;
  left: 0;
  display: inline-block;
  vertical-align: middle;
  line-height: inherit;
}
.stats-actions ul.button-group > li {
  float: right;
  display: list-item;
  margin: 0;
}
.stats-actions ul.button-group > li:first-child {
  margin-left: 0;
}
.stats-actions ul.button-group > li > button,
.stats-actions ul.button-group > li .button {
  border-right: 1px solid;
  border-color: rgba(255, 255, 255, 0.5);
}
.stats-actions ul.button-group > li .button {
  border-color: #d7d7d7;
  border-width: 1px 0px 1px 1px;
  margin: 0;
  border-radius: 0;
  padding: 12px 18px;
  background: #fff;
  height: 46px;
}
.stats-actions ul.button-group > li input.button {
  width: 140px;
}
.stats-actions ul.button-group > li:first-child button,
.stats-actions ul.button-group > li:first-child .button {
  border-right: 0;
}
.stats-actions ul.button-group > li:first-child .button {
  border-right: 1px #d7d7d7 solid;
  border-radius: 0px 3px 3px 0px;
}
.stats-actions ul.button-group > li:last-child .button {
  border-radius: 3px 0 0 3px;
}
.stats-actions ul.button-group > li .button:hover {
  background: #f1f1f1;
  color: #000;
}
.stats-actions ul.button-group:before,
.stats-actions ul.button-group:after {
  content: " ";
  display: table;
}
.stats-actions ul.button-group:after {
  clear: both;
}
.stats-actions ul.date-shifter {
  margin-left: 1.25em;
}
.to-side-stats {
  padding-left: 16px;
}
.side-stats {
  padding-right: 16px;
  border-right: 1px solid #e5eaed;
}
.side-state-title {
  font-weight: bold;
  font-size: 14px;
}
.b-list {
  list-style: none;
  padding-right: 4px;
}
.b-ol {
  counter-reset: b-ol;
}
.b-list li {
  padding-right: 8px;
  line-height: 22px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;
}
.b-ol li {
  counter-increment: b-ol;
}
.b-list li::before {
  font-size: 20px;
  content: "• ";
  color: #21d4fd;
  vertical-align: sub;
  transition: all 0.3s;
}
.b-ol li:before {
  content: counter(b-ol) ". ";
  margin-left: 4px;
  font-family: "Roboto", sans serif;
  font-size: 12px;
  vertical-align: baseline;
}
.b-list li.user_rank.cur-user {
  margin: 3px 0;
  font-size: 14px;
  font-weight: bold;
  color: salmon;
}
.b-list li:hover span:first-child,
.b-list li:hover::before {
  color: #b721ff;
}

/***	CALENDAR   ***/
.user-calendar {
  width: 100%;
}
.user-calendar .month-title {
  width: 100%;
  height: 48px;
  line-height: 48px;
  padding: 0 24px;
  margin-bottom: 8px;
}
.user-calendar .month-title span {
  text-align: center;
  font-size: 18px;
  cursor: pointer;
  width: 48px;
  overflow: hidden;
}
.user-calendar .month-title span:first-child + span {
  font-size: 14px;
  cursor: default;
  width: auto;
}
.user-calendar .month-title span.disabled {
  cursor: default;
  color: #999;
}
.user-calendar table {
  width: 100%;
  margin-top: 16px;
}
.user-calendar table th {
  text-align: center;
  color: #999;
  font-weight: normal;
  font-size: 12px;
}
.user-calendar table td {
  text-align: center;
  cursor: pointer;
  line-height: 48px;
  font-size: 16px;
  font-weight: bold;
  font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  border: 1px solid #f3f4f5;
}
.user-calendar table td.disabled {
  text-align: center;
  cursor: default;
}
.user-calendar table td:first-child {
  border-right: none;
}
.user-calendar table td:last-child {
  border-left: none;
}
.user-calendar table td.first-row {
  border-top: none;
}
.user-calendar table td.last-row {
  border-bottom: none;
}
.user-calendar table td.attended {
  /*background: #247994;
    color: #fff;
    border-color: #1d6d86;*/
  background: #eed6ac;
  color: #000;
  border-color: #fbeacc;
}
.user-calendar table td.attended .text-muted {
  /*color: #bbb !important;*/
}
.user-calendar table td.today,
.user-calendar table td.attended.today {
  background: #fdead1;
  color: #000;
}
.user-calendar table td.selected {
  border: 2px solid #333;
}
.user-calendar table td.empty {
  border-color: transparent !important;
}
.user-calendar table td:hover {
  background: #f1f7fd;
  color: #000;
}
.user-calendar table td:hover .text-muted {
  color: #666 !important;
}

/**** the full year calendar ****/
.user-calendar table#full-year td,
.user-calendar table#full-year td.num-input span {
  line-height: 24px;
}
.user-calendar table#full-year > tbody > tr > td {
  border: none;
  padding-left: 24px;
  cursor: default;
}
.user-calendar table#full-year > tbody > tr > td:last-child {
  padding-left: 0;
}
.user-calendar table#full-year > tbody > tr > td:hover {
  background: none;
}
.user-calendar table#full-year td table {
  margin-top: 0;
}

.clrfx {
  clear: both;
}

@keyframes awesome-line1 {
  0% {
    left: 0px;
  }
  50% {
    left: 100%;
  }
  50.0001% {
    left: -100%;
  }
  100% {
    left: 0px;
  }
}

@keyframes awesome-line2 {
  0% {
    left: -100%;
  }
  50% {
    left: 0px;
  }
  100% {
    left: 100%;
  }
}

@media (min-width: 768px) {
  .col-lg-1,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-md-1,
  .col-md-10,
  .col-md-11,
  .col-md-12,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-sm-1,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-xs-1,
  .col-xs-10,
  .col-xs-11,
  .col-xs-12,
  .col-xs-2,
  .col-xs-3,
  .col-xs-4,
  .col-xs-5,
  .col-xs-6,
  .col-xs-7,
  .col-xs-8,
  .col-xs-9 {
    flex: unset;
    max-width: 100%;
  }
  .form-row.uploader {
    display: block;
  }
  .form-row.uploader > div {
    float: none;
    margin: 0 auto;
    width: 100%;
  }
  .form-row.uploader .labels {
    text-align: center;
    line-height: 45px;
    padding-left: 18%;
  }
  .form-row.uploader .inputs {
    padding-left: 0px;
  }
}
@media (max-width: 768px) {
  #content-wrapper .dashboard-page.w-tabs.w-tabs-alt .head-desc.fixed.squeeze {
    width: 100%;
  }
  .dashboard-page {
    padding-right: 20px;
    padding-left: 20px;
  }
  .dashboard-page.w-tabs {
    padding-right: 0px;
    padding-left: 0px;
  }
  .dashboard-page.w-tabs .dashboard-tabs {
    padding: 0 20px;
  }
  .dashboard-page.w-tabs .tab-content {
    padding: 0 20px;
    padding-top: 48px;
    padding-bottom: 10px;
  }
  .dashboard-page h1 {
    font-size: 30px;
    padding: 5px 5px 5px 0;
    margin: 45px 0 20px 0px;
  }
  .dashboard-page h1 .action_btn {
    margin-top: 5px;
    padding: 7px 10px;
  }
  #dashboard #logo .branches {
    left: 15px;
    margin-top: -8px;
    font-size: 12px;
    font-weight: bold;
    padding: 6px 15px 3px 15px;
  }
  #dashboard #logo.active .branches {
    left: 15px;
    margin-top: -8px;
    font-size: 12px;
    font-weight: bold;
    padding: 6px 15px 3px 15px;
    transform: translateX(0);
    top: unset;
    height: auto;
    line-height: 1.5;
  }
  #dashboard #logo .branches:hover,
  #dashboard #logo.active .branches:hover {
    background: #e7e7ff;
    color: inherit;
  }
  #dashboard #logo.active .branches span.sm-icon {
    line-height: 12px;
  }
  .form-row.uploader {
    display: block;
  }
  .form-row.uploader > div {
    float: none;
    margin: 0 auto;
    width: 100%;
  }
  .form-row.uploader .labels {
    text-align: center;
    line-height: 45px;
    padding-left: 18%;
  }
  .form-row.uploader .inputs {
    padding-left: 0px;
  }

  #content section.flex-table {
    max-width: calc(100vw - 40px);
  }
  #content.b-slider section.flex-table {
    max-width: calc(100vw - 120px);
  }
}

@media (max-width: 576px) {
  .form-row {
    margin-bottom: 0px;
  }
  .form-row .labels {
    text-align: right;
    padding-right: 10%;
    line-height: 40px;
  }
  .form-row .inputs {
    padding-right: 10%;
    max-width: 480px;
  }
  .form-row .inputs .container-login100-form-btn {
    margin: 0 auto;
    margin-top: 10px;
  }
}