/*!
 * application.css for STREAMED Dock
 *
 * @copyright Klavis Inc.
 */

/* common
 --------------------------------------------------------- */
@media (min-width: 1400px) {
  .container {
    max-width: 1350px;
  }
}

body {
  background-color: rgb(241, 242, 246);
}
table {
  background-color: #fff;
}
code.example {
  color: #468847;
  background-color: #dff0d8;
  border: 1px solid #d6e9c6;
}

.container.content {
  margin-top: 51px;
  position: relative;
}
.content-flexbox {
  display: flex;
  flex-direction: column;
}
.development .container.content {
  margin-top: 71px;
}
.staging .container.content {
  margin-top: 71px;
}
.datepicker.datepicker-dropdown {
  z-index: 2000 !important;
}

.number {
  text-align: right;
}
.alert-warning {
  color: #8a6d3b;
}

.making, .making * {
  color: #bbb !important;
}

.table>thead>tr>td.dark,
.table>tbody>tr>td.dark,
.table>tfoot>tr>td.dark,
.table>thead>tr>th.dark,
.table>tbody>tr>th.dark,
.table>tfoot>tr>th.dark,
.table>thead>tr.dark>td,
.table>tbody>tr.dark>td,
.table>tfoot>tr.dark>td,
.table>thead>tr.dark>th,
.table>tbody>tr.dark>th,
.table>tfoot>tr.dark>th {
  background-color: #ccc;
}

.table>thead>tr>td.deleted,
.table>tbody>tr>td.deleted,
.table>tfoot>tr>td.deleted,
.table>thead>tr>th.deleted,
.table>tbody>tr>th.deleted,
.table>tfoot>tr>th.deleted,
.table>thead>tr.deleted>td,
.table>tbody>tr.deleted>td,
.table>tfoot>tr.deleted>td,
.table>thead>tr.deleted>th,
.table>tbody>tr.deleted>th,
.table>tfoot>tr.deleted>th {
  color: #bbb;
}

.role .suspend { }
.role .admin   { font-weight: bold; }
.role .ope     { }

.breadcrumb {
  margin-top: 20px;
}

.no-receipt {
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  margin: 0 auto;
  width: 100%;
  height: 50px;
  line-height: 50px;
  z-index: 9999;
  color: #fff;
  font-size: 1.5em;
  background-color: #c03434;
}
form .control-label-not-required {
  color: #999;
}
form .required {
  color: #de0000;
  font-size: 91%;
  padding-left: 5px;
}
.part-label-wrapper {
  display: inline-block;
  width: 90px;
}
.remaining-amount {
  margin-bottom: 0;
}
.remaining-amount li {
  color: #fff !important;
}

.operator-edit {
  position: absolute;
  right: 20px;
  top: 100px;
}
.remaining-amount-wrapper .panel-heading {
  border-bottom-width: 0;
}
.remaining-amount-wrapper .list-group-item:first-child {
  border-top-width: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.col-checkbox        {width: 28px;}
.col-id              {width: 60px;}
.col-name            {min-width: 100px;width:250px;}
.col-role            {width: 130px;}
.col-part            {width: 210px;}
.col-time            {width: 120px;}
.col-processed       {width: 115px;}
.col-amount-per-hour {width: 140px;}
.col-object          {width: 150px;}

/* header
 --------------------------------------------------------- */

.auth .navbar {
  background-color: #e5b300;
  border-color: #a68000;
}

.admin .navbar {
  background-color: #00a3d4;
  border-color: #0094c1;
}

.ope .navbar {
  background-color: #6ab04a;
  border-color: #3e7524;
}

.scan .navbar {
  background-color: #2085bf;
  border-color: #0e4a6d;
}

/* Header */
.navbar h1 {
  margin: 0;
  padding: 0;
}

.navbar .navbar-brand {
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  font-size: 16px;
}

.navbar .nav > li > a {
  font-size: 14px;
  color: #fff;
  padding-right: 10px;
  padding-left: 10px;
}

.admin .navbar .active > a {
  background-color: #005073;
}

.ope .navbar .active > a {
  background-color: #338224;
}

.scan .navbar .active > a {
  background-color: #244f82;
}

.admin .dropdown-menu > li > a:hover {
  background-color: #005073;
}

@media (max-width: 767px) {
  .navbar-nav .open .dropdown-menu > li > a {
    color: #005285;
  }
}

.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus,
.navbar .nav > li > a:active,
.navbar .nav li.open > a,
.navbar .nav li.open > a:hover,
.navbar .nav li.open > a:focus {
  color: #005285;
  background-color: #e9f8ff;
/*
  background-color: #454545;
*/
}

.nav .caret {
  border-top-color: #fff;
  border-bottom-color: #fff;
}

.nav a:hover .caret {
  border-top-color: #005285;
  border-bottom-color: #005285;
}
.nav .open .caret {
  border-top-color: #005285;
  border-bottom-color: #005285;
}

.navbar-toggle {
  background-color: transparent;
}

.navbar-toggle:hover {
  background-color: rgba(0, 0, 0, .1);
}

.navbar-toggle .icon-bar {
  background-color: #fff;
}

.navbar-nav>li>.profile {
  padding-top: 12px;
  padding-bottom: 13px;

}

.navbar-slide { position: absolute; margin-left: 145px; }

/* profile-header
 --------------------------------------------------------- */

.profile-header {
  padding-top: 14px;
  padding-bottom: 14px;
}

.admin .profile-header {
  background-color: #4bb7e4;
}

.ope .profile-header {
  background-color: #5f834d;
}

.scan .profile-header {
  background-color: #145980;
}

.profile-header .profile-picture {
  float: left;
  margin: 0 15px 0 0;
  background-color:#ccc;
  width: 125px;
  height: 125px;
}

.profile-header .username {
  display: inline-block;
  margin-top: 5px;
  font-size: 1.5em;
  font-weight: normal;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
}

.profile-header .role,
.profile-header .age {
  display: inline-block;
  margin-top: 5px;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
}

.profile-header .working-hour {
  display: inline-block;
  margin: 5px 10px 0px 0px;
  font-size: 1.5em;
  font-weight: normal;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
}

.profile-header .working-hour-input {
  margin-right: 10px;
  width: 90px;
}

.user-info {
  float: left;
}

.user-info-append {
  margin-top: 5px;
  float: right;
  color: #fff;
}

.user-info-append .what {
  color: #fdca00;
}

#login .well-lg {
  margin-top: 20px;
  padding-top: 35px;
}


/* admin contents
 --------------------------------------------------------- */
.auth h2 {
  margin-top: 0;
  margin-bottom: 20px;
}

.auth .container.content {
  margin-top: 81px;
}

.table-checkable tr.checked td {
  background-color: #dff0d8 !important;
}

.tablesorter .header, .table-sort-all th {
  cursor: pointer;

}

.tablesorter .header .glyphicon, .table-sort-all th .glyphicon {
  margin-left: 5px;
  color: #666;
  font-size: .78em;
  top: 0;
}

.btn .glyphicon {
  margin-right: 5px;
  font-size: .85em;
}

.processing { color: #DA4453; }
.online     { color: #37BC9B; }
.offline    { color: #656D78; }

.status .glyphicon {
  margin-right: 5px;
  font-size: 0.78em;
  top: 0;
}
.table td.name img {
  margin-right: 10px;
  width: 25px;
  height: 25px;
}

.paging-total-num {
  display: inline-block;
  margin-right: 1em;
}

.action {
  text-align: center;
}

.action .glyphicon {
  margin-right: 9px;
  cursor: pointer;
}

.action .glyphicon:first-child {
  margin-left: 3px;
}

.action .glyphicon:last-child {
  margin-right: 0;
}

.action .glyphicon {
  color: #666;
}

.action .glyphicon:hover {
  color: #000;
}

.action .glyphicon.disabled {
  color: #ddd;
  cursor: inherit;
}

#day-status .btn {
  font-size: 0.85em;
  padding: 6px 10px;
}

#account-setting-tab-content .tab-pane {
  padding-top: 30px;
}

#time-period .time-period-label,
#time-period .time-period-update {
  padding-left: 20px;
}

#time-period .time-period-input {
  padding-left: 10px;
}

#time-period .time-period-download {
  float: right;
}

@media (min-width: 768px) {
  #time-period .time-period-input input {
    width: 120px;
  }
}

@media (max-width: 767px) {
  #time-period .time-period-input {
    padding-left: 20px;
  }
  #time-period .time-period-download {
    float: none;
    padding-left: 20px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  #time-period .time-period-download {
    float: none;
    width: 100%;
    padding-top: 10px
  }
}

#admin-assign .tab-pane {
  padding-top: 10px;
}

tr.disabled td {
  background-color: #e9e9e9 !important;
  color: #999 !important;
}
tr.disabled td .label {
  background-color: #999 !important;
}

tr.selected td {
  background-color: #dff0d8 !important;
  font-weight: bold;
}

.receipt-num-title {
  display: inline-block;
  width: 70px;
}

.receipt-num {
  display: inline-block;
  width: 50px;
  text-align: right;
}

.loading {
  background-color: rgba(0, 0, 0, .1);
  height: 200px;
  width: 100%;
  padding-left: 50%;
  padding-top: 100px;
}

.loading img {
  margin-left: -16px;
  margin-top: -32px;
}

@media (min-width: 768px) {
  .modal-dialog.modal-dialog-lg {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .modal-dialog.modal-dialog-lg {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .modal-dialog.modal-dialog-lg {
    width: 1170px;
  }
}

@media (max-width: 1199px) {
  .table-responsive-1199 {
    width: 100%;
    margin-bottom: 15px;
    overflow-x: scroll;
    overflow-y: hidden;
    border: 1px solid #ddd;
  }
}

.time-period.form-inline .form-group {
  margin-right: 0;
  margin-left: 0;
}

.time-period.form-inline .form-group .control-label {
  padding-top: 0;
}

.disp-order {
  text-align: center;
}
.btn-up,
.btn-down {
  padding: 2px 10px 2px 15px;
}

.table-operator td.id     {width:60px;}
.table-operator td.action {width:90px;}
.table-operator td.name   {}
.table-operator td.email  {}
.table-operator td.role   {width:125px;}
.table-operator td.part   {width:220px;}
.table-operator td.status {width:115px;}

#form_multi_emails {display: none;}

.action-row {
  margin:16px 0;
}

/* ope contents
 --------------------------------------------------------- */

#special-message .title {
  font-weight: bold;
  color: #ac2925;
}

#stars .panel-body {
  height: 131px;
  position: relative;
}

#stars .star-num {
  font-size: 2.8em;
  display: block;
  width: 60%;
  text-align: center;
  position: absolute;
  top: 36px;
  left: 0;
}

#stars .glyphicon-star {
  font-size: 4em;
  color: #fdca00;
  display: block;
  width: 40%;
  text-align: center;
  position: absolute;
  top: 30px;
  right: 10px;
}

#incoming-message .panel-heading {
  postion: relative;
}

#incoming-message .received-time {
  display: block;
  float: right;
}
.verification-label-wrapper {
  position: absolute;
  display: block;
  width: 100%;
  bottom: 0;
  left: 0;
  text-align: center;
}
@media (max-width: 767px) {
  .verification-label-wrapper {
    bottom: 10px;
  }
}
.choose-part {
  padding-bottom: 20px;
}
.choose-part .btn {
  font-size: 2em;
  height: 80px;
  line-height: 55px;
}
.choose-part .btn-wrapper {
  margin: 20px;
  padding-bottom: 20px;
}

.view-receipt .viewer {
  width: 100%;
  height: 600px;
  overflow: hidden;
  position: relative;
}
.mask-receipt{
  margin: 0 -20px;
}
.view-receipt.mask-receipt .viewer{
  cursor: crosshair;
}

.view-receipt #receipt-note {
  height: 118px;
}

.view-receipt #control {
  text-align: center;
  margin-bottom: 10px;
}
.view-receipt #control .verification-control-wrapper {
  position: relative
}
.view-receipt #control .verification-control-wrapper .btn {
  position: absolute;
  top: 0;
}

.view-receipt #control .btn#prev       {left: 360px;  width: 80px; padding: 10px 0;}
.view-receipt #control .btn#save       {left: 450px; width: 120px;}
.view-receipt #control .btn#escalation {left: 155px; width: 145px;}
.view-receipt #control .btn#next       {left: 360px; width: 80px;}
.view-receipt #control .btn#exit       {left: 15px; width: 80px;}

.view-receipt #control .btn#prev.inputscreen       {left: 15px;  width:100px;}
.view-receipt #control .btn#save.inputscreen       {left: 135px; width:145px;}
.view-receipt #control .btn#escalation.inputscreen {left: 305px; width:145px;}
.view-receipt #control .btn#exit.inputscreen       {left: 475px; width:95px;}

.view-receipt .verify-ok {
  margin-top: 5px;
}
.view-receipt .verify-ok.btn-default,
.view-receipt .reason-ok.btn-default {
  background-color: #f6bb42;
}

.view-receipt .subtotal {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 15px 0 0 0;
}

.view-receipt #type[disabled] {
  color: #aaa;
}

.form-control {
  letter-spacing: 0.1em;
}
.form-control:focus,
.view-receipt .cannot-verify-well.focus,
.view-receipt #control .btn:focus {
  border-width: 2px;
  box-shadow: 0 5px 7px 0 #bbb;
}
.view-receipt .cannot-verify-well.focus,
.view-receipt #control .btn:focus {
  border-color: #3bafda;
}

.receipt-type-normal { position: relative; background-color: #06f; color: #fff; }
.receipt-type-invoice { position: relative; background-color: #e63; color: #fff; }
.receipt-type-concur { position: relative; background-color: #484; color: #fff; }
.receipt-type-concur-not-send { position: relative; background-color: #f90; color: #fff; }

.receipt-type-color-invoice { color: #e63; }

.label-invoice { color: #fff;background: #c15252; }

.has-success .control-input input,
.has-warning .control-input input {
  padding-right: 31px;
}
.has-success .control-input:after {
  display: inline-block;
  width: 20px;
  height: 20px;
  color: #8cc152;
  font-family: 'Glyphicons Halflings';
  content: "\e013";
  position: absolute;
  top: 7px;
  right: 20px;
  z-index: 999;
}
.has-warning .control-input:after {
  display: inline-block;
  width: 20px;
  height: 20px;
  color: #f6bb42;
  font-family: 'Glyphicons Halflings';
  content: "\e107";
  position: absolute;
  top: 7px;
  right: 20px;
  z-index: 999;
}
.info-wrapper {
  position: absolute;
  top: 40px;
  right: 50px;
  z-index: 99;
}
.info-wrapper .glyphicon-info-sign {
  font-size: 1.5em;
  cursor: pointer;
}
.info-wrapper .receipt-information {
/*
  display: none;
*/
}

#search_more_field {
  margin-top: 10px;
  padding: 10px 10px 10px 20px;
  border-radius: 5px;
  display:none;
  background-color: #cbebff;
}
.no-receipt-message {
  border: 1px solid #666;
  border-radius: 4px;
  padding: 40px;
  font-size: 3em;
  font-weight: bold;
  text-align: center;
}

tr.has_error td {
  background-color: #ffd0d0 !important;
}

tr.has_warning td {
  background-color: #fbb450 !important;
}

@media (max-width: 1199px) {
  .view-receipt #control .btn#prev       {left: 360px;  width: 80px; padding: 10px 0;}
  .view-receipt #control .btn#save       {left: 450px; width: 120px;}
  .view-receipt #control .btn#escalation {left: 155px; width: 145px;}
  .view-receipt #control .btn#next       {left: 360px; width: 80px;}
  .view-receipt #control .btn#exit       {left: 15px; width: 80px;}
}

@media (max-width: 1024px) {
  .view-receipt #control .btn#prev       {left: 250px;  width: 80px; padding: 10px 0;}
  .view-receipt #control .btn#save       {left: 335px; width: 120px;}
  .view-receipt #control .btn#escalation {left: 100px; width: 145px;}
  .view-receipt #control .btn#next       {left: 360px; width: 80px;}
  .view-receipt #control .btn#exit       {left: 15px; width: 80px;}
}

@media (max-width: 768px) {
  .view-receipt #control .btn#prev       {left: 285px;  width: 80px; padding: 10px 0;}
  .view-receipt #control .btn#save       {left: 375px; width: 120px;}
  .view-receipt #control .btn#escalation {left: 120px; width: 145px;}
  .view-receipt #control .btn#next       {left: 285px; width: 80px;}
  .view-receipt #control .btn#exit       {left: 15px; width: 80px;}
}

@media (max-width: 480px) {
  .view-receipt #control .btn#prev       {top: 55px; left: 225px; width: 80px; padding: 10px 0;}
  .view-receipt #control .btn#save       {top: 55px; left: 320px; width: 120px;}
  .view-receipt #control .btn#escalation {left: 120px; width: 145px;}
  .view-receipt #control .btn#next       {top: 55px; left: 145px; width: 80px;}
  .view-receipt #control .btn#exit       {left: 15px; width: 80px;}
  .has-success .control-input:after      {right: 10px;}
  .has-warning .control-input:after      {right: 10px;}
  .info-wrapper                          {top:30px;}
}

@media (max-width: 320px) {
  .view-receipt #control .btn#prev       {top: 55px; left: 90px; width: 80px; padding: 10px 0;}
  .view-receipt #control .btn#save       {top: 55px; left: 185px; width: 120px;}
  .view-receipt #control .btn#escalation {left: 120px; width: 145px;}
  .view-receipt #control .btn#next       {top: 55px; left: 90px; width: 80px;}
  .view-receipt #control .btn#exit       {left: 15px; width: 80px;}
  .has-success .control-input:after      {right: -5px;}
  .has-warning .control-input:after      {right: -5px;}
  .info-wrapper                          {top:30px; right: 20px;}
}

/*javascript
 --------------------------------------------------------- */

.modal-footer {
  margin-top: 0;
}

#noticeMessage {
  display: block;
  position: fixed;
  z-index: 9999;
  top: 61px;
  right: 10px;
  margin: 5px;
  padding: 15px;
  background-color: #333;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright:5px;
  -moz-border-radius-bottomleft:5px;
  -moz-border-radius-bottomright:5px;
  -webkit-border-top-left-radius:5px;
  -webkit-border-top-right-radius:5px;
  -webkit-border-bottom-left-radius:5px;
  -webkit-border-bottom-right-radius:5px;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
  border-bottom-left-radius:5px;
  border-bottom-right-radius:5px;
  font-size: 1.2em;
  color: #fff;
}

#tooltip {
  display: none;
  position: absolute;
  z-index: 9999;
  overflow: hidden;
  padding: 8px;
  border-radius: 3px;
  color: #FFF;
  background: #333;
  background: rgba(0,0,0,0.8);
}


/* ============= overwrite bootflat.css ============= */
.datepicker-dropdown {
  background-color: #ffffff;
  border: 1px solid rgba(0,0,0,0.15);
}
.well {
  padding: 19px;
  border: 1px solid #e3e3e3;
}
a:focus, a:hover {
  text-decoration: underline;
}
.alert-danger {
  background-color: #FAB7BF;
}
.modal-first-hr {
  margin-top: 0;
}
.checkbox, .radio {
  padding-left: 20px;
}
.panel-default .panel-heading {
  color: #e6e9ed;
  background-color: #434a54;
}
.popover.bottom.in .popover-content {
  width: 160px;
  padding: 0;
}
.popover.bottom.in .popover-content canvas {
  margin-top: 0 !important;
}
.popover.bottom.in .popover-content p {
  padding-bottom: 0 !important;
}
.popover.top.in {
  z-index: 8888;
}
.receipt-note .alert {
  margin-bottom: 0;
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
  color: #fff;
  background-color: #37BC9B;
  border-color: #37BC9B;
}

.btn-lg .badge {
  padding: 6px 14px;
  font-size: 18px;
  border-radius: 20px;
}
.btn-lg .badge.badge-small-font {
  font-size: 12px;
  padding: 9px 14px;
}

.receipt-hover-block .popover { max-width: 745px !important; background-color:#fff; color: #333; border-color: #ccc; }
.receipt-hover-block .popover-content { width: 745px !important; }
.receipt-hover-block .arrow { top: 5% !important;}

/**
 * jquery-ui autocomplete
**/
.ui-autocomplete-loading { background: url("../img/fs-zoomer-loading.gif") white right center no-repeat; }
.ui-autocomplete { background: #fff !important; font-size: 1.4rem; border: 1px solid #459FFF !important; box-shadow: 0 1px 3px #459FFF !important;}

.ui-draggable-handle {
  cursor: grab;
}

.ui-draggable-dragging .ui-draggable-handle {
  cursor: grabbing;
}

.boundary-tel .bf,
.boundary-company .bf,
.boundary-category .bf,
.boundary-total .bf {
  float:left; padding-top:5px; padding-right:5px;
}
.boundary-date .bl     { margin-left: 20px; font-weight: normal; }
.boundary-tel .bs      { width:80%; }
.boundary-company      { width:46%; }
.boundary-company .bs  { width:90% }
.boundary-category     { width: 45%; }
.boundary-category .bf { padding-top: 0; padding-left: 17px; width:100% }
.boundary-date .bf     { padding-top: 0; padding-left: 17px; float: left; width:38%; }
.boundary-date .bs     { float: left; width:60%; }
.boundary-total .bs    { width:80%; }
.boundary-search       { padding:0; width: 12%; }
.boundary-search button{ margin-left: -10px; height: 34px}

.cannot-verify-well { padding-bottom: 0; }
.cannot-verify-well .bf { width: 85%; }
.cannot-verify-well .bs { width: 15%; }

.boundary-date input,
.boundary-date button { float: left; margin-right: 5px; }

.deleted-category .control-label { color: #8cc152; }
.deleted-category select { border-color: #8cc152; }

/* START - Extra Small Devices, Phones  */
@media (max-width : 1024px) {
  .view-receipt { margin-top: 110px !important; margin-right: 30px;}
  .boundary-date { width:60% }
  .boundary-future-date { width:15% }
  .info-wrapper { right: 35px;}
}
@media (max-width : 480px) {
  .col-sm-1, .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-sm-10, .col-sm-11 {
    float: left;
    padding: 0;
  }
  .col-sm-2 { width: 20%; }
  .col-sm-3.control-label { width: 100%; }
  .col-sm-3 { width: 25%; }
  .col-sm-4 { width: 40%; }
  .col-sm-5 { width: 50%; }
  .col-sm-7 { width: 75%; }
  .col-sm-offset-3 { margin-left: 20% }
  .boundary-company       { width:60%; }
  .boundary-category      { width:60%; }
  .boundary-category .bf  { width:99% }
  .boundary-date          { width:55% }
  .boundary-date .bs      { width:84% }
  .boundary-search button { margin-left: -3px;}
  .fg-total .col-sm-3.control-label { width: 20%; }
  .fg-currency .col-sm-2 { margin-top: 5px; margin-left: 22px; }
  #cb-industry { margin: 10px; }
  #verification-form .form-group,
  #tel-serach-form .form-group {
    margin-left: 0;
  }
}
@media (max-width : 320px) {
  .form-group { margin-bottom: 0;}
  .boundary-company      { width:58%; }
  .boundary-company .bs  { width:88%; }
  .boundary-search button{ margin-left: 0; padding: 6px 10px; }
  .fg-company .boundary-ok button { margin-left: 10px; }
  .fg-category .boundary-search { width: 40% }
  .fg-category .boundary-other { width: 100%; margin-left: 20px; }
  .fg-currency .col-sm-2 { margin-left: 15px; }
  .well { padding: 10px !important; }
}
/* END - Extra Small Devices, Phones  */

.input-arrow-down {
  position: relative;
}
.input-arrow-down::after {
  content: '';
  border: 3px solid transparent;
  border-top: 6px solid gray;
  margin-left: 2px;
  margin-bottom: 3px;
  display: inline-block;
  vertical-align: bottom;
  position: absolute;
  right: 7px;
  top: 15px;
}


.j-handle {
  cursor: move;
  padding: 2px 5px !important;
}

.j-handle span.glyphicon {
  color: #aaa;
}
.number_order {
  padding-left: 10px;
}

.j-checkbox-col {
  text-align: center;
  width: 3%;
  cursor: pointer;
}

.view-bankbook-image .viewer {
    width: 100%;
    height: 600px;
    overflow: hidden;
    position: relative;
}

.dropdown-menu>li {
  position:relative;
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
  /* Rules below not implemented in browsers yet */
  -o-user-select: none;
  user-select: none;
  cursor:pointer;
}
.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  display:none;
  margin-top: -1px;
  border-top-left-radius:0;
  border-bottom-left-radius:0;
  border-left-color:#fff;
  box-shadow:none;
}
.right-caret:after,.left-caret:after {
  content:"";
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
  display: inline-block;
  height: 0;
  vertical-align: middle;
  width: 0;
  float: right;
}
.right-caret:after { border-left: 5px solid #ffaf46; }
.left-caret:after { border-right: 5px solid #ffaf46; }
.no-image {width:50px; height:50px; background: #eee; text-align:center; color:#666; font-weight:bold; padding-top:4px;}
.work-in-progress { font-size: 0.9em; padding-top: 8px; }
.menu-username { max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; display: inline-block; }

.input-date-error {background-color: #d9534f; color:white}
.input-danger { background-color: #d9534f; color: white }
.input-danger:disabled { color: black }


.arrow-left {
    position:absolute; top:350px; left:20px;
    z-index: 1000;
    width: 50px;
    height: 50px;
    border-left: 5px solid #666;
    border-bottom: 5px solid #666;
    transform: rotate(45deg);
    opacity:0.7;
}

.arrow-right {
    position:absolute; top:350px; right:20px;
    z-index: 1000;
    width: 50px;
    height: 50px;
    border-top: 5px solid #666;
    border-right: 5px solid #666;
    transform: rotate(45deg);
    opacity:0.7;
}

/* Mask */
.mask-receipt .column-right{
  width: 31%;
}
.mask-receipt .column-left{
  width: 69%;
}
@media (max-width : 1000px) {
  .mask-receipt{
    margin-right: 0;
    margin-left: 0;
  }
  .mask-receipt .column-right{
    width: 100%;
  }
  .mask-receipt .column-left{
    width: 100%;
  }
}
.area-mask{
  position: absolute;
  width: 100%;
  height: 600px;
  top:0;
  left: 0;
  pointer-events: none;
}
#mask-canvas{
  pointer-events: none;
}
.verfication-image-wrapper{
  position: relative;
  overflow: hidden;
}

.list-mask .mask-item{
  padding: 5px 0;
  border-bottom: 1px #000 solid;
  display: inline-block;
  width: 100%;
}
.list-mask .mask-item:last-child{
  border-bottom: none;
}
.mask-item.item_template{
  display: none;
}
.mask-item img{
  max-height: 250px;
  max-width: 250px;
  display: block;
  float: left;
}
.mask-item .btn-danger{
  display: none;
}
.mask-item.have_img .btn-danger{
  display: block;
  padding: 0 7px;
  margin-left: 0;
  font-weight: bold;
}
.mask-item .verify-ok{
  visibility: hidden;
}
.mask-item.have_img .verify-ok{
  visibility: visible;
}
.mask-item select{
  width: auto;
  float: right;
  margin-left: 10px;
}
.mask-item .btn{
  float:right;
  margin-left: 10px;
}
.mask-item .btn.verify-ok{
  float: left;
  margin-left: 0;
  margin-right: 5px;
  margin-top: 0;
  padding: 5px;
}
.type-item, .company-item{
  float: left;
  padding: 5px 10px;
  color: #fff;
  margin-right: 7px;
  cursor: pointer;
}
.type-item{
  min-width: 48px;
  text-align: center;
}
.disable .type-item{
  cursor: default;
}
.type-item-bg-1{
  background-color: #316B1B;
}
.type-item-bg-2{
  background-color: #5F9E46;
}
.type-item-bg-3{
  background-color: #0009FF;
}
.type-item-bg-4{
  background-color: #FF8E02;
}
.type-item-bg-5{
  background-color: #FF0000;
}
.type-item-bg-10{
  background-color: #F600FA;
}
.help-item{
  display: none;
}
.item_active .help-item{
  display: block;
}
.mask-item.have_img .help-item{
  display: none;
}
.mask-item.disable{
  cursor: default;
}
.mask-item.disable .type-item{
  background-color: rgba(255,0,0,0.2);
}
.title-receipt{
  background-color: #0D5CFF;
  color: #fff;
  display: inline-block;
  padding: 5px 25px;
  margin-left: 60px;
  font-size: 16px;
  line-height: 16px;
  margin-top: 0;
  font-weight: normal;
}
.btn-to-mask, .btn-pre-mask{
  float: right;
  width: 100%;
  border-radius: 15px;
}
.btn-pre-mask-2{
  padding:5px 12px;
}
.btn-to-company{
  padding: 5px 11px;
}
.btn-to-mask:focus, .btn-pre-mask:focus{
  background-color: #fff;
  color: #000;
}
.mask-receipt .list-company{
  display: none;
}
.company-item{
  margin-right: 5px;
  margin-bottom: 5px;
  border-radius: 10px;
}
.company-item-bg-1, .company-item-bg-5{
  background-color: #114CC5;
}
.company-item-bg-2{
  background-color: #316B1B;
}
.company-item-bg-3{
  background-color: #511000;
}
.company-item-bg-4{
  background-color: #316B1B;
}
.company-item-bg-6, .company-item-bg-7{
  background-color: #C50001;
}
.list-company-default ul{
  padding: 0;
  list-style: none;
}
.list-company-default li{
  display: table;
  margin-left: 60px;
}
.list-mask .no_mask{
  display: none;
}

.btn-eslacation{
  background-color: red;
  border-color: red;
}
.info_company{
  border-bottom: 1px solid;
  position: relative;
  height: 45px;
  padding: 5px 0;
}
.lbl_company_name{
  margin-left: 50px;
  line-height: 35px;
}
.company_group_name{
  float: left;
  padding: 5px 0;
}
.btn-save{
  width: 145px;
}
#save_2{
  left: 135px;
  width: auto;
  padding: 5px 25px;
  float: right;

}
.btn-ok-company{
  margin-top: 6px;
}
.btn-ok-company-2{
  padding: 5px 10px;
}
.receipt-id{
  float: right;
  font-weight: bold;
  font-size: 20px;
  color: #000;
}
.format_date{
  margin-bottom: 10px;
}
.btn-format-date{
  border-radius: 0;
}
.btn-format-date:active, .btn-format-date:focus{
  color: #000;
  background-color: #fff;
}
.view-receipt.mask-receipt .control .verification-control-wrapper .btn,
.view-receipt.mask-receipt #control .verification-control-wrapper .btn{
  position: relative;
}
.view-receipt.mask-receipt .control .btn#save.inputscreen,
.view-receipt.mask-receipt #control .btn#save.inputscreen{
  left: 0;
}

.view-receipt.mask-receipt .control .btn#exit.inputscreen,
.view-receipt.mask-receipt #control .btn#exit.inputscreen{
  left: 0;
}

.view-receipt.mask-receipt #control .btn#prev.inputscreen{
  left: 0;
}

@media (min-width: 1360px) {
  .mask-receipt .iviewer_zoom_in {
    left: 240px;
  }
  .mask-receipt .iviewer_zoom_out {
    left: 300px;
  }
  .mask-receipt .iviewer_zoom_zero {
    left: 360px;
  }
  .mask-receipt .iviewer_zoom_fit {
    left: 420px;
  }
  .mask-receipt .iviewer_zoom_status {
    left: 480px;
  }
  .mask-receipt .iviewer_rotate_left {
    left: 560px;
  }
  .mask-receipt .iviewer_rotate_right {
    left: 620px;
  }
}

.view-receipt #control-2{
  text-align: center;
  margin-bottom: 10px;
}

/****************************
 * SECTION FOR VERIFICATION 3
 ****************************/

.verify3 table td {
  vertical-align: middle;
  text-align: center;
}
.verify3 table td.field-label {
  font-weight: bold;
  padding: 10px;
  text-align: left;
  width: 100px;
  vertical-align: middle;
}
.verify3 table td.field-input {
  width: 40%;
  padding: 10px;
  vertical-align: middle;
}
.verify3.verify table td.field-input {
  width: 100%;
}

.verify3 table td.field-check {
  vertical-align: middle;
  width: 70px;
}

.verify3 .control-panel {
  float: right;
}

.verify3 .control-panel .btn {
  margin-left: 10px;
}

.verify3 .text-label-1 {
  color: #316B1B;
}
.verify3 .text-label-2 {
  color: #5F9E46;
}
.verify3 .text-label-3 {
  color: #0009FF;
}
.verify3 .text-label-4 {
  color: #FF8E02;
}
.verify3 .text-label-5 {
  color: #FF0000;
}

/****************************/
.area-cursor{
  padding: 15px 20px;
}
.area-cursor .btn{
  width: 100%;
}
.area-cursor label{
  margin-top: 5px;
}

/******************************/
/* CreditCard Payment service */
/******************************/
i.mark-payment-service {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 1em;
  margin-right: 8px;
}
i.mark-payment-service::after {
  display: block;
  position: absolute;
  top: -3px;
  left: 3px;
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background-color: #999;
  z-index:10;
}
a i.mark-payment-service::after {
  background-color: #3bafda;
}
a i.mark-payment-service-capture::after {
  background-color: #c67605;
}
i.mark-payment-service::before {
  display: block;
  position: absolute;
  content: "";
  font-style: normal;
  color: #fff;
  z-index:11;
}
i.mark-payment-service.webpay::before {
  content: "W";
  top: -1px;
  left: 9px;
}
i.mark-payment-service.payjp::before {
  content: "P";
  top: -1px;
  left: 11px;
}
.dock-selectpicker .bootstrap-select .dropdown-menu {
  background-color: #f5f5f5;
}
.dock-selectpicker .bootstrap-select .dropdown-menu li a {
  color: black;
}
.dock-selectpicker .bootstrap-select .dropdown-menu .active a {
  background-color: #87cefa;
}
.dock-selectpicker .bootstrap-select .dropdown-menu li a:hover {
  color: white;
}