body.fixed-bg {
    background: #4d719c;
}

::-webkit-scrollbar {
    width: 12px;
  }
  ::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
  ::-webkit-scrollbar-thumb {
    background: #777; 
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }
  
  .wallpaper, .wallpaper2 {
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}

.wallpaper-0 {
  background-image: url('/images/wallpaper-0.jpg') !important;
}
.wallpaper-1 {
  background-image: url('/images/wallpaper-1.jpg') !important;
}
.wallpaper-2 {
  background-image: url('/images/wallpaper-2.jpg') !important;
}
.wallpaper-3 {
  background-image: url('/images/wallpaper-3.jpg') !important;
}
.wallpaper-4 {
  background-image: url('/images/wallpaper-4.jpg') !important;
}
.wallpaper-5 {
  background-image: url('/images/wallpaper-5.jpg') !important;
}
.wallpaper-6 {
  background-image: url('/images/wallpaper-6.jpg') !important;
}
.wallpaper-7 {
  background-image: url('/images/wallpaper-7.jpg') !important;
}
.wallpaper-8 {
  background-image: url('/images/wallpaper-8.jpg') !important;
}
.wallpaperp-0 {
  background-image: url('/images/wallpaper-0.png') !important;
}
.wallpaper::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 100%, rgba(0, 117, 169, 0.6));
}
.wallpaper2::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: linear-gradient(to bottom, rgba(117, 117, 150, 0.7) 100%, rgba(0, 117, 169, 0.6));
}

.no-border {
    border:0 !important;
}
.account {
    background: rgb(51 51 51) !important;
}
.bg-cadet {
    background: cadetblue !important;
}
.logo-87 {
    width: 87px;
}
.logo-100 {
    width: 100px;
}
.logo-120 {
    width: 120px;
}
.logo-150 {
    width: 150px;
}
.logo-170 {
    width: 170px;
}
.color-yellow{
    color:yellow !important;
}
.color-white{
    color:white !important;
}
.side-nav a i.color-yellow{
    color:yellow !important;
}
.side-nav a i{
    color:rgba(255,255,255,1) !important;
    font-size:1.3em !important;
}
.side-nav a {
    font-size:0.96em;
}

.header-title {
    margin-left: 4px;
    display: inline-block;
}
.text-logo h4 a{
    color: #fff;
}
.text-logo .server-time{
    margin-left:5px;
}

.page-header-info {
    min-height: 56px;
}
.notifications.xhr-page-progress {
    margin: 6px 0px !important;
}
.notifications.xhr-page-progress i{
    padding:3px 2px !important;
}
.xhr-page-progress {
    margin:0;
    padding:3px 6px !important;
    border-color: transparent;
    float:right;
}
.w100 {
    width: 100% !important;
}

/* modal reset */
.modal-header, .modal-body, .modal-footer {
    background-attachment: fixed, fixed;
    /*background-image: radial-gradient(ellipse farthest-side at 10% 0 , #154265 20%, #7392c2);*/
    background: #4d719c;
    color:#eee;
}
.modal-body fieldset .form-group div{
    margin: 3px 0 !important;
}
.modal h1, .modal h2, .modal h3, .modal h4, .modal h5, .modal h6 , .modal .close {
    color: white !important;
}
.modal input, .modal select {
    background-color: rgba(51, 51, 51, 0.4);
    color: white !important;
}
.modal input.modal-white-input, .modal select.white.modal-white-input {
    background-color: white !important;
    color: #555 !important;
    margin: 3px 0px;
}

/* common */
.alignmiddle {
    display:flex;
    align-items: center;
    justify-content: center;
}
[alt="Info icon"],[alt="Camera based scan"] {
    display:none;
}
.scanner-canvas-container {
        width: 90%;
        padding-top: 90%;
        background-color: #fff;
}
#html5-qrcode-select-camera {
    display: block !important;
    margin:auto;
}
#html5-qrcode-anchor-scan-type-change {
    display:none !important;
}
#html5-qrcode-button-camera-stop,#html5-qrcode-button-camera-start, #html5-qrcode-button-camera-permission {
    background-color: #4e91ce;
    border: 0;
    border-radius: 3px;
    margin: 12px auto;
    padding: 3px 15px;
}
#scanner-container__dashboard_section_csr select {
    color: white;
    background:rgba(95, 198, 243, 0.6);
    padding: 3px;
    font-size: 12px;
}
#scanner-container__dashboard_section_csr span {
    display:block;
    margin: auto !important;
}
.sms-message-body {
    border:1px solid #ccc;
    width: 330px;
    height: 120px;
    background-color: #646464;
    color: white;
    padding: 5px;
    font-size: 0.9em;
    font-family: 'Roboto Mono', monospace;
}
.sms-message-body-2 {
    background-color: #377c46 !important;
}
.item-computation {
    border-top: 1px solid #AAA;
    padding-top: 12px;
}

.select2-chosen {
    color:#444;
}

.scanner-canvas-pricecheck,.scanner-canvas-scancode {
    background-color: #272822;
}
.scanner-canvas-container {
    width:320px !important;
}
.form-control.input-transparent[readonly]{
    background-color: rgba(63, 63, 63, 0.5);
}
header .input-group, header h4, header h2 {
    padding-bottom:8px !important;
}
header h5 {
    padding-bottom:12px !important;
}
.form-modal-body input, .form-modal-body select{
    font-weight: bold;
}
.form-modal-body .form-group {
    padding-left: 4px;
    padding-right: 4px;
}

.form-modal-body .col-sm-8, .form-modal-body .col-sm-6,
.form-modal-body .col-sm-7, .form-modal-body .col-sm-2,
.form-modal-body .col-sm-4, .form-modal-body .col-sm-3 {
    padding-left: 4px;
    padding-right: 4px;
}
.form-modal-body .error-field {
    border: 2px solid #c54212 !important;
}

.text-line-through {
    text-decoration: line-through !important;
}
.black-widget {
    background: rgb(51 51 51 / 55%) !important;
}
.table-action-btn {
     min-width:68px !important;
}
.bg-company-login {
    background: #505050 !important;
}
.bg-login-0 {
    background: #355381 !important;
}
.my-2 {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}
.my-4 {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}
.my-6 {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
}
.mx-2 {
    margin-left: 2px !important;
    margin-right: 2px !important;
}
.mx-10 {
    margin-left: 10px !important;
    margin-right: 10px !important;
}
.mx-20 {
    margin-left: 20px !important;
    margin-right: 20px !important;
}
.mt-6 {
    margin-top: 6px !important;
}
.ml-6 {
    margin-left: 6px !important;
}
.mt-10 {
    margin-top: 10px !important;
}
.mb-10 {
    margin-bottom: 10px !important;
}
.ml-10 {
    margin-left: 10px !important;
}
.px-5 {
    padding-left: 5px !important;
    padding-right: 5px !important;
}
.px-10 {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
.px-20 {
    padding-left: 20px !important;
    padding-right: 20px !important;
}
.py-4 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
.py-10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.py-20 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}
.pt-2 {
    padding-top: 2px !important;
}
.pt-5 {
    padding-top: 5px !important;
}
.pt-10 {
    padding-top: 10px !important;
}
.p-10 {
    padding: 10px !important;
}
.label-maroon {
    background-color: #7b2101;
}
.label-dark {
    background-color: #4c4c4c;
}
.text-wider {
    letter-spacing: 0.09em;
}
.text-yellow {
    color: yellow !important;
}