/* ----------------------------------------
 	module
 ---------------------------------------- */
 body#org .navbar-inverse {
  background: #0e4b02;
}
body#org .navbar-inverse .navbar-brand {
  color: #dcdcdc;
}
body#shop .navbar-inverse {
  background: #052d6f;
}
body#shop .navbar-inverse .navbar-brand {
  color: #d8d8d8;
}
body#agent_body .navbar-inverse {
  background: #671c1c;
}
body#agent_body .navbar-inverse .navbar-brand {
  color: #dcdcdc;
}
body#agent_body .navbar-brand>.label-default {
  background: #ca776e;
}

section {
  margin-bottom: 50px;
}

xmp {
  display: inline;
  font-family: inherit;
}

mark {
  background: #0c7bb2 !important;
  white-space: nowrap;
  font-weight: normal;
  font-size: 85%;
  color: #fff;
}

.option {
  display: none;
}

.option table {
  background: #e2eef6 !important;
}
.option table .ms-selectable {
  background: transparent;
}
.option table .ms-selection {
  background: transparent;
}
.option table .ms-list {
  background: #fff;
}

.form-template {
  display: none;
}

.form-display-none {
  display: none;
}

.ico-csv {
  content: "";
  display: inline-block;
  width: 20px;
  height: 21px;
  background: url(../img/csv.png) no-repeat top left;
  background-size: 20px 21px;
  margin-right: 5px;
  margin-left: 15px;
}

#modal-preview .modal-dialog {
  width: 320px;
}

h1 > .glyphicon, h2 > .glyphicon, h3 > .glyphicon, h4 > .glyphicon, h5 > .glyphicon, p > .glyphicon {
  color: #777;
}

.nav-pagination {
  text-align: center;
}

/* ----------------------------------------
 	table for form
 ---------------------------------------- */
form > .table-responsive table {
  border-bottom: 1px solid #ddd;
}
form > .table-responsive table tbody > tr {
  border-left: 5px solid #eee;
}
form > .table-responsive table tbody > tr.req {
  border-left: 5px solid #f0ad4e;
}
form > .table-responsive table.table-list thead th {
  white-space: nowrap;
}
form ul.form {
  padding-left: 0;
}
form ul.form li {
  list-style: none;
  margin-bottom: 5px;
}
/* form > .table-responsive td table tbody > tr {
  background-color: #fff !important;
} */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}

.table-striped table tbody > tr {
  background: #fff !important;
}

.table-striped .table-blue tbody > tr {
  background: #e2eef6 !important;
}

/* ----------------------------------------
 	panel
 ---------------------------------------- */
.panel-default {
  border-color: #ddd !important;
}
.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
  box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
}
.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.panel .panel-heading {
  cursor: pointer;
  background-color: #D3E6F2;
}
.panel form > .table-responsive, #conditions form > .table-responsive {
  display: none;
}
.panel form > .table-responsive table, #conditions form > .table-responsive table{
  border-bottom: none;
}
.panel form > .table-responsive table > tbody > tr, #conditions form > .table-responsive table > tbody > tr {
  border-left: none;
}
#conditions form > .table-responsive table > tfoot > tr {
  border-left: none;
}
.panel form > .table-responsive table > tbody > tr.req, #conditions form > .table-responsive table > tbody > tr.req {
  border-left: none;
}

.informations .panel .panel-heading {
  cursor: default;
}

/* ----------------------------------------
 	list-group
 ---------------------------------------- */
.list-group h4 {
  line-height: 1.5;
}

/* ----------------------------------------
 	sidebar
 ---------------------------------------- */
.sidebar .sidebar-title {
  background: #fff;
  border: 1px solid #efefef;
  border-radius: 3px;
  padding: 5px 10px;
  margin-left: -10px;
  margin-right: -10px;
}

/* ----------------------------------------
 	graph
 ---------------------------------------- */
.graph-item {
  width: 100%;
  height: 320px;
  margin-bottom: 10px;
  position: relative;
}
.graph-item i {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -30px;
  color: #777;
}

/* ----------------------------------------
 	preview
 ---------------------------------------- */
#preview {
  width: 320px;
  height: 555px;
  background: url(../img/bg_timeline.png) no-repeat 0 0;
  background-size: 320px 555px;
  position: relative;
}
#preview .comment {
  width: 70%;
  position: absolute;
  top: 115px;
  left: 48px;
  background: #fece50;
  border-radius: 10px;
  padding: 15px;
  box-sizing: content;
}
#preview .link {
  text-align: right;
}

.load-more {
  text-align: right;
  margin-bottom: 5px;
}

#preview-detail {
  width: 320px;
  height: 555px;
  background: url(../img/bg_detail.png) no-repeat 0 0;
  background-size: 320px 555px;
  position: relative;
  padding: 5px;
}
#preview-detail h2 {
  margin: 7px 0 18px;
  text-align: center;
  font-size: 16px;
}
#preview-detail .content-detail {
  overflow-y: scroll;
  height: 500px;
  padding: 10px;
}

#preview-popup {
  width: 320px;
  height: 555px;
  background: url(../img/bg_timeline.png) no-repeat 0 0;
  background-size: 320px 555px;
  position: relative;
  padding: 5px;
}
#preview-popup .content-detail {
  width: 97%;
  height: 90%;
  padding: 20px;
  margin: 20px auto;
  border-radius: 5px;
  background: #fff;
  border: 5px solid #d8d8d8;
  overflow: scroll;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
}
#preview-popup .content-detail h2 {
  margin: 0 0 20px;
  font-size: 18px;
}
.description-import > span {
  border: 1px solid #333;
  border-radius: 5px;
  padding: 10px;
  position: absolute;
  z-index: 10000;
  width: 400px;
  left: 395px;
  top: 120px;
}
.ico-custom {
  content: "";
  display: inline-block;
  box-sizing: border-box;
}
.ico-custom:before {
  content: "\00a0";
  box-sizing: border-box;
}
.ico-search {
  width: 15px;
  height: 20px;
  background: url(../img/search-icon.png) no-repeat center center;
  background-size: 15px 18px;
}
.ico-agent {
  width: 35px;
  height: 35px;
  background: url(../img/more-menu.png) no-repeat center center;
  background-size: 35px 35px;
  margin: 0px 10px 0px 15px;
}
.ico-description-import {
  width: 20px;
  height: 18px;
  background: url(../img/help.png) no-repeat center center;
  background-size: 20px 15px;
  margin-right: 5px;
}
.ico-message {
  width: 25px;
  height: 35px;
  background: url(../img/menu-phone.png) no-repeat center center;
  background-size: 25px 35px;
  margin: 0px 10px 0px 15px;
}
.ico-message-filter {
  width: 15px;
  height: 20px;
  background: url(../img/menu-1.png) no-repeat center center;
  background-size: 15px 20px;
}
.ico-filter {
  width: 15px;
  height: 20px;
  background: url(../img/user-black.png) no-repeat center center;
  background-size: 15px 20px;
}
.ico-employee {
  width: 30px;
  height: 35px;
  background: url(../img/user-white.png) no-repeat center center;
  background-size: 30px 35px;
  margin: 0px 10px 0px 15px;
}
.ico-branch {
  width: 40px;
  height: 35px;
  background: url(../img/house.png) no-repeat center center;
  background-size: 40px 35px;
  margin: 0px 10px 0px 15px;
}
.ico-company {
  width: 30px;
  height: 35px;
  background: url(../img/menu.png) no-repeat center center;
  background-size: 30px 35px;
  margin: 0px 10px 0px 15px;
}
.ico-ranking {
  width: 47px;
  height: 40px;
  background: url(../img/more-user.png) no-repeat center center;
  background-size: 47px 40px;
  margin: 0px 10px 0px 15px;
}
.reset-margin {
  margin-left: 0px;
}
.ico-statistic {
  width: 35px;
  height: 35px;
  background: url(../img/stats.png) no-repeat center center;
  background-size: 35px 35px;
  margin: 0px 10px 0px 15px;
}
.ico-statistic-open-app {
  width: 20px;
  height: 30px;
  background: url(../img/statistic-open-app.png) no-repeat center center;
  background-size: 20px 30px;
  margin: 0px 10px 0px 15px;
  vertical-align: super;
}
.total-user-register {
  font-size: 13px;
  color: #777;
  margin-left: 20px;
}
.ico-statistic-calomama {
  width: 24px;
  height: 31px;
  background: url(../img/user-black.png) no-repeat center center;
  background-size: 24px 31px;
  margin: 0px 5px 0px 15px;
  vertical-align: super;
}
.ico-statistic-health-input {
  width: 24px;
  height: 31px;
  background: url(../img/statictis-health-input.png) no-repeat center center;
  background-size: 24px 31px;
  margin: 0px 5px 0px 15px;
  vertical-align: super;
}
.ico-statistic-life-style {
  width: 24px;
  height: 31px;
  background: url(../img/icon-run.png) no-repeat center center;
  background-size: 24px 31px;
  margin: 0px 5px 0px 15px;
  vertical-align: super;
}
.panel-analytic{
  border: none;
  box-shadow: none;
}
.panel-analytic .panel-heading{
  border:none;
}
.panel-analytic form  .table-responsive table  tr {
  border: 1px solid #ddd !important;
}
.panel-analytic .panel-heading{
  padding:10px 0px;
}
.panel-analytic .panel-heading {
  background: none;
}
.panel-analytic .panel-heading a{
  color:gray;
}
.sub-header > a {
  padding: 5px 6px;
}
.title-analytic{
  color: #31708f;
  background-color: #d8e8f1;
  border-color: #bce8f1;
  border-radius: 4px;
  box-shadow:0 1px 1px rgba(0,0,0,.05);
  border-color:#bce8f1;
  color:#333;
  padding:5px;
  font-size: 19px;
}
.statistic-icon {
  height:35px;
  vertical-align: bottom;
}

.btn-view-analytic{
  background:#467ab2;
}
h3.sub-header{
  color:#959595;
}
.h3-header{
  color:#333 !important;
}
.h4-header{
  font-weight:bold;
}
.disabled-ranking-result {
  pointer-events: none;
  color: #ccc;
}
#team-name-error {
  color: #a94442;
}
.statistic-icon-title{
  height:35px;
  vertical-align:baseline;
}
.title-modal-content {
  background-color: #D3E6F2;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.position-img-description {
  margin-left: -16px;
}
.content-description-import {
  margin-bottom: 25px;
}
.description-cancel {
  padding: 5px 90px;
  color: #337ab7;
}
.ico-title-description-import {
  width: 20px;
  height: 23px;
  background: url(../img/question.png) no-repeat center center;
  background-size: 20px 23px;
  margin-right: 5px;
}
.response-img-big {
  width: 93%;
  margin-left: 18px;
}
#conditions .statistic_company,.statistic_branch{
  display: none;
}
.btn-retired {
  color: black;
  background-color: #C3C3C3;
  padding-left: 20px;
  padding-right: 20px;
}
.btn-retired:hover {
  background-color: #e6e6e6;
  border-color: #adadad;
}
.btn-form-download {
  padding-left: 70px;
  padding-right: 70px;
}
.link-download-csv-example {
  color: #23527c;
  text-decoration: underline;
}
.icon-message {
  width: 14px;
  height: 21px;
  background: url(../img/menu-phone.png) no-repeat center center;
  background-size: 14px 21px;
}
.icon-service {
  width: 14px;
  height: 21px;
  background: url(../img/phone.png) no-repeat center center;
  background-size: 14px 21px;
}
.icon-user-manage {
  width: 18px;
  height: 20px;
  background: url(../img/user-black.png) no-repeat center center;
  background-size: 18px 20px;
}
.icon-menu-message {
  width: 49px;
  height: 42px;
  background: url(../img/menu-3.png) no-repeat center center;
  background-size: 49px 42px;
  margin: 0px 20px 20px;
}
.icon-menu-message-list {
  width: 39px;
  height: 48px;
  background: url(../img/menu-1.png) no-repeat center center;
  background-size: 39px 48px;
  margin: 0px 20px 20px;
}
.icon-menu-ranking {
  width: 50px;
  height: 40px;
  background: url(../img/more-user.png) no-repeat center center;
  background-size: 50px 40px;
  margin: 0px 20px 20px;

}

.icon-menu-agent {
  width: 48px;
  height: 49px;
  background: url(../img/agent.png) no-repeat center center;
  background-size: 48px 49px;
  margin: 0px 20px 20px;
}
.icon-menu-company {
  width: 38px;
  height: 45px;
  background: url(../img/menu.png) no-repeat center center;
  background-size: 38px 45px;
  margin: 0px 20px 20px;
}
.icon-menu-branch {
  width: 52px;
  height: 40px;
  background: url(../img/house.png) no-repeat center center;
  background-size: 52px 40px;
  margin: 0px 20px 20px;
}
.icon-menu-employee {
  width: 38px;
  height: 46px;
  background: url(../img/user-white.png) no-repeat center center;
  background-size: 38px 46px;
  margin: 0px 20px 20px;
}
.specify-schedule-date {
  margin-left: 20px;
}
.error-block-custom {
  display: inline-table;
}
.message-error-time {
  text-align: center;
}
.btn-preview {
  color: #337ab7 !important;
  padding: 1px 10px 1px 10px;
}
.preview {
  padding-top: 5px;
}
img.icon-label.icon-help {
  padding-left: 0px;
}
img.icon-label.icon-help {
  padding-right: 0px;
}
#detail{
  margin-left: 146px;
}
.title-text-template {
  line-height: 36px;
  font-size: 15px;
  color: #3f94e2;
}
.template-text {
  margin-left: 18px;
  line-height: 25px;
  font-size: 15px;
  color: gray;
  letter-spacing: 0.8px;
}
.img-modal-description {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.custom-size-modal {
  width: 550px;
  margin: 0px auto;
}
.content-small {
  margin-bottom: 4px;
}
.explanation-popup {
  color: gray;
  font-family: arial;
}
.header-table-content-modal {
  background-color: #D3E6F2;
}
.content-table-modal {
  vertical-align: middle !important;
}
.body-table-content-modal {
  margin: 0px;
}
/* ----------------------------------------
  description-csv-table
 ---------------------------------------- */
.modal-body dl,
.modal-body dt,
.modal-body dd {
  box-sizing: border-box;
}
.modal-body dl {
  margin:0 0px 20px;
  background: #e8f1f7;
  border-bottom: 1px solid #ccc;
  font-size:0.95em;
}
.modal-body dt,
.modal-body dd {
  padding: 10px 10px 0 10px;
  border-top: 1px solid #ccc;
}
.modal-body dt {
  width: 20%;
  float: left;
}
.modal-body dd {
  background: #fff;
  margin-left: 20%;
  padding-bottom: 10px;
  border-left: 1px solid #ccc;
  margin-bottom: 0;
}
.modal-body dd:after {
  content: '';
  display: block;
  clear: both;
}
.value-sample-for-csv{
  color: #39abf7;
}
.multi-content {
  padding: 0px !important;
  border-top: none !important;
}
.multi-content dt {
  border-top: none;
  width: 100%;
}
.multi-content dl {
  border-top: none;
}
/*----------------------*/
.content-popup-template {
  margin-left: 14px;
  margin-top: 8px;
}
.title-filter-search {
  margin-left: 6px;
}
.title-popup-review {
  font-weight: bold;
  padding-left: 30px;
}
.sup-content-popup-template {
  margin-top: 14px;
}
.question {
  color: #B94C21;
  font-size: 12px;
}
.question:hover, .question:visited {
  color: #B94C21;
}
.btn-search-statistic {
  color: #337ab7 !important;
  margin-bottom: 15px;
}
.btn-search-statistic .title-search-statistic {
  padding: 0px 40px;
}
.btn-search-statistic .ico-search {
  color: gray;
}
/* ----------------------------------------
  manual-download
 ---------------------------------------- */
.manual-download .list-manual-download {
  list-style: none;
  padding-left: 0px;
}
.manual-download .pdf-download {
  background-color: red;
  color: white;
  font-size: 14px;
  padding: 2px 15px 2px 15px;
  vertical-align: baseline;
}
.manual-download .file-manual-download, .manual-download .file-manual-download:hover, .manual-download .file-manual-download:visited, .manual-download .file-manual-download:focus, .manual-download .file-manual-download:active {
  color: #585851;
  text-decoration: none;
}
.manual-download .list-manual-download li {
  margin-top: 10px;
}
.ico-manual-download {
  width: 40px;
  height: 35px;
  background: url(../img/book.png) no-repeat center center;
  background-size: 40px 35px;
  margin-right: 15px;
}
.description-manual-download {
  font-size: 15px;
  margin-bottom: 50px;
}
.align-left {
  margin-left: 10px;
}
/* ----------------------------------------
  end-manual-download
 ---------------------------------------- */
#image-popup-preview {
  width: 320px;
  height: auto;
}
.image-popup-preview {
  width: 320px;
  height: auto;
}
.message-error-time {
  display: none;
}
.preview-img {
  text-align: center;
}
.health-input-calomama {
  font-size: 84%;
}
.btn-filter-search {
  color: #337ab7 !important;
}
.title-search {
  padding: 0px 40px;
}
#delivery-date-time-edit {
  background-color: white;
}
.date-delivery{
  background: url(../img/calendar.png) no-repeat scroll  right 10px center;
  background-size: 1.5em 1.5rem;
}
#open_app_date_from, #open_app_date_to{
  background-color:#fff;
  background-size: 1.5em 2rem;
}
.heading-dashboard {
  font-weight: bold;
}
.required-popup{
  margin-right: 3px;
}
.type-message-template {
  margin-left: 3px;
}
.content-message-info {
  padding-right: 0px !important;
}
.img-info-text {
  padding-left: 3px;
  height: 17px;
}
.message-template {
  margin-left: -2px;
}
.content-popup-template {
  margin-left: 3px;
}
.icon-required{
  width: 30px;
  height: 17px;
  background: url(../img/text.png) no-repeat center center;
  background-size: 30px 17px;
  vertical-align: text-bottom;
  margin-left: 5px;
}
.help-icon {
  vertical-align: text-bottom;
  width: 19px;
  height: 17px;
  background: url(../img/help.png) no-repeat center center;
  background-size: 19px 17px;
}
.desc-delivery-date-time {
  margin-bottom: 5px !important;
}
th.col-md-3.content-message-info {
  padding-right: 0px !important;
}
.message-type {
  margin-right: 4px;
}
.content-danger {
  margin-left: 18px;
}
.message-type-text {
  vertical-align: top !important;
  padding-bottom: 14px !important;
}
.row-message{
  margin-left:0 !important;
}
.error-send-time {
  display: none;
}
.content-user-filter {
  border-bottom: 1px solid #ddd;
}
.sub-header-edit {
  border: none;
}
.color-input {
  background-color: white !important;
}
.point-dashboard {
  margin: 0px;
}
.point-dashboard > span {
  color: gray;
  margin: 0px 20px 20px;
}
#icon-popup-preview {
  width: 320px;
  height: auto;
}
.preview-icon {
  height: 300px;
  text-align: center;
  background: url(../img/stamp-card.png) no-repeat center center;
}
.present-dashboard {
  margin: 0px;
}
.present-dashboard > span {
  color: gray;
  margin: 0px 20px 20px;
}
.btn-health-summary{
  margin-right: 10px !important;
}

#preview-detail-present {
  width: 318px;
  height: 450px;
  background: url(../img/bg_detail.png) no-repeat 0 0;
  position: relative;
  padding: 5px;
  border-radius: 0px 0px 5px 5px;
  background-size: 140% auto
}


#preview-detail-present h2 {
  margin: 16px 0 8px;
  text-align: center;
  font-size: 18px;
}

#preview-detail-present .content-detail {
  overflow-y: scroll;
  height: 390px;
  margin-top:18px;
  background-color: white;
}

.label-present {
    background: url(../img/present_label.png) center no-repeat;
    float: left;
    width: 92px;
    text-align: center;
    color: #fff;
}
.icon-gif {
    text-align: center;
    background: url(../img/icon_gif.png) center no-repeat;
    float: left;
    width: 30px;
    height: 20px;
}
.display-detail-prsent {
  padding: 0px 10px 0px 10px;
}

#modal-importing-status .importing-status {
  background-color: #7C7C7C;
  padding: 20px 0px;
}

#modal-importing-status .importing-status-message {
  color: #FFFFFF;
  font-size: 20px;
  letter-spacing: 3px;
}

/*start spinner*/
.loading .spinner {
  position: relative;
  width: 100px;
  height: 100px;
  margin-top: 30px;
  margin-bottom: 30px;
  display: inline-block;
  padding: 10px;
  border-radius: 10px;
}

.loading .spinner div {
  width: 6%;
  height: 16%;
  background: #000;
  position: absolute;
  left: 49%;
  top: 43%;
  opacity: 0;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 0 3px rgba(0,0,0,0.2);
  -webkit-animation: fade 1s linear infinite;
  -moz-animation: fade 1s linear infinite;
}
.csv_import_file {
  display: inline-block !important;
  width: 187px;
}
.csv_download_template {
  font-weight: normal;
}
.csv_download_template-message {
  margin-top: -15px;
  padding-inline-start: 15px;
  padding-inline-end: 10px;
  margin-bottom: 5px;

}

@-webkit-keyframes fade {
  from {opacity: 1;}
  to {opacity: 0.1;}
}

@-moz-keyframes fade {
  from {opacity: 1;}
  to {opacity: 0.1;}
}

.loading .spinner .bar1 {
  -webkit-transform:rotate(0deg) translate(0, -130%);
  -moz-transform:rotate(0deg) translate(0, -130%);
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
}

.loading .spinner .bar2 {
  -webkit-transform:rotate(30deg) translate(0, -130%);
  -moz-transform:rotate(30deg) translate(0, -130%);
  -webkit-animation-delay: -0.9167s;
  -moz-animation-delay: -0.9167s;
}

.loading .spinner .bar3 {
  -webkit-transform:rotate(60deg) translate(0, -130%);
  -moz-transform:rotate(60deg) translate(0, -130%);
  -webkit-animation-delay: -0.833s;
  -moz-animation-delay: -0.833s;
}
.loading .spinner .bar4 {
  -webkit-transform:rotate(90deg) translate(0, -130%);
  -moz-transform:rotate(90deg) translate(0, -130%);
  -webkit-animation-delay: -0.7497s;
  -moz-animation-delay: -0.7497s;
}
.loading .spinner .bar5 {
  -webkit-transform:rotate(120deg) translate(0, -130%);
  -moz-transform:rotate(120deg) translate(0, -130%);
  -webkit-animation-delay: -0.667s;
  -moz-animation-delay: -0.667s;
}
.loading .spinner .bar6 {
  -webkit-transform:rotate(150deg) translate(0, -130%);
  -moz-transform:rotate(150deg) translate(0, -130%);
  -webkit-animation-delay: -0.5837s;
  -moz-animation-delay: -0.5837s;
}
.loading .spinner .bar7 {
  -webkit-transform:rotate(180deg) translate(0, -130%);
  -moz-transform:rotate(180deg) translate(0, -130%);
  -webkit-animation-delay: -0.5s;
  -moz-animation-delay: -0.5s;
}
.loading .spinner .bar8 {
  -webkit-transform:rotate(210deg) translate(0, -130%);
  -moz-transform:rotate(210deg) translate(0, -130%);
  -webkit-animation-delay: -0.4167s;
  -moz-animation-delay: -0.4167s;
}
.loading .spinner .bar9 {
  -webkit-transform:rotate(240deg) translate(0, -130%);
  -moz-transform:rotate(240deg) translate(0, -130%);
  -webkit-animation-delay: -0.333s;
  -moz-animation-delay: -0.333s;
}
.loading .spinner .bar10 {
  -webkit-transform:rotate(270deg) translate(0, -130%);
  -moz-transform:rotate(270deg) translate(0, -130%);
  -webkit-animation-delay: -0.2497s;
  -moz-animation-delay: -0.2497s;
}
.loading .spinner .bar11 {
  -webkit-transform:rotate(300deg) translate(0, -130%);
  -moz-transform:rotate(300deg) translate(0, -130%);
  -webkit-animation-delay: -0.167s;
  -moz-animation-delay: -0.167s;
}
.loading .spinner .bar12 {
  -webkit-transform:rotate(330deg) translate(0, -130%);
  -moz-transform:rotate(330deg) translate(0, -130%);
  -webkit-animation-delay: -0.0833s;
  -moz-animation-delay: -0.0833s;
}
/*end spinner*/
.header-right>li>a {
    color: #fff !important;
    text-decoration: none !important;
    font-size: 16px;
    padding-top: 10px;
}
.header-right {
    padding-top: 10px;
    padding-right: 10px;
    min-height: 0;
}
.header-log-out {
    float: right !important;
    margin-top: 5px;
}
.content-last-login {
  color: #bebebe !important;
}
.content-header-right:before {
    content: "\00a0 \00a0 ";
}
.kanavi-icon{
  padding-right: 12px;
  width: 69px;
  height: 72px;
}

.top-nav {
  margin-bottom: -4px !important;
  margin-top: -4px;
}
.nav-last-login {
  margin-bottom: -6px;
  margin-top: -14px
}
#navbar {
  float: right;
  width: 300px;
}
.navLeft {
  width: 70%;
}

/* Table file upload */
.table-file-upload td,
.table-file-upload th {
  padding: 7px 0;
}
.table-file-upload td:last-child,
.table-file-upload th:last-child {
  padding-left: 30px;
}
.table-file-upload td:first-child,
.table-file-upload th:first-child {
  min-width: 300px;
}
.title-manual {
  background-color: #F7F7F7;
  font-weight: lighter;
}
@media only screen and (max-width: 1024px) {
  .navLeft .navbar-brand a {
    font-size: 90%;
  }
}

@media only screen and (max-width: 960px) {
  .navLeft .navbar-brand a {
    font-size: 80%;
  }
}

@media only screen and (max-width: 768px) {
  .navLeft .navbar-brand a {
    font-size: 60%;
  }
}
.button-default {
  background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

#select-companies + span input {
  width: 400px !important;
}

.input-relo-website, .input-relo-service, .input-company-title {
  display: inline-block;
  width: 74%;
}

.option.yes {
  display: block;
}

.option.yes label, #option-use-custom-company-title label {
  text-align: end;
}

.input-relo-website + span, .input-relo-service + span, .input-company-logo + span {
  margin-left: 25%;
}

.menu-title-group {
  margin-bottom: 10px;
}

.btn-active {
  padding: 5px 12px;
}

.btn-point-history {
  background: #d1e1f1;
  border: 1px solid #565656;
}

#company-title-area .icon-relo-label {
  height: 10px;
  padding-left: 10px;
}
#company-title-area .company-title {
  height: 10px;
  padding-left: 10px;
  font-weight: bold;
}
#company-title-area .relo-title {
  font-size: 10px;
}

#company-title-area .pl-0 {
  padding-left: 0;
}
.modal-notice-description {
  margin: 0 10%;
}

#form-filter-employee .user-id {
  display: none;
}

#form-filter-team-ranking-detail {
  margin-block-end: 0;
}

#form-filter-team-ranking-detail input {
  width: 40%;
}

.label-company-title {
  margin-left: 10px;
}
.url-input {
  width: 50%;
}

#modal-column-preview .modal-dialog {
  width: 800px;
}

.modal-preview-column {
  display: flex;
  overflow-y: scroll;
  height:655px;
}
#preview-column-timeline {
  width: 318px;
  background: url(../img/bg_column_timeline.png) no-repeat 0 0;
  padding: 5px;
  border-radius: 0px 0px 5px 5px;
  background-size: 100% auto;
  flex: 50%;
  margin-right: 50px;
}
#preview-detail-column {
  width: 318px;
  background: url(../img/bg_detail_column.png) left top no-repeat, url(../img/bg_yellow.png) bottom repeat;
  border-radius: 0px 0px 5px 5px;
  background-size: 100% auto;
  flex: 50%;
}
.date-column {
  text-align: center;
  padding-top: 8px;
  height: 28px;
}
#date-column {height: 30px;}
.icon-column {
  height: 54px;
  padding-top: 94px;
  padding-left: 5px;
}
#icon-column {
  height: 30px;
  width: 30px;
  border-radius: 50%;
}
.time-column {
  height: 58px;
  padding-top: 31px;
  padding-left: 6px;
  color: 	#A38758;
  font-size: 11px;
}
#time-column {height: 30px;}
.image-top-column {
  height: 192px;
}
.image-column-img, .image-column-list{
  height: 192px;
  width: 98.5%;
  margin-left: 2px;
}
.title-column {
  padding-left: 14px;
  padding-top: 11px;
  height: 25px;
}
.overview-content-column {
  width: 93%;
  height: fit-content;
  padding: 12px 14px;
}
.title-column-delivery {
  height: 31px;
  padding-top: 11px;
  text-align: center;
}
.title-column-detail {
  padding-top: 28px;
  margin: 0px 15px;
  height: 48px;
}
.image-column-detail {
  padding-top: 34px;
  margin: 0px 5px;
  height: 226px;
}
.tab-column {
  height: fit-content;
  padding-top: 5px;
  display: table;
  margin: 0px 9px;
}
.tab-item-column {
  float: left;
  background-color: white;
  border: 2px solid #a28656;
  border-radius: 5px;
  margin: 2px 4px;
  padding: 0xp 2px;
  padding: 0px 12px;
}
.content-column {
  padding: 7px 15px 3px 15px;
  background: url(../img/bg_yellow.png) repeat 0 0;
}
.list-column-image {
  background: url(../img/bg_yellow.png) repeat 0 0;
  padding-bottom: 5px;
}
.list-column-image .image-column {
  margin: 0px 5px;
  padding-top: 0px;
}
.list-column-image .content-column {
  position: relative;
  top: 17%;
}
#total-summary-list th {
  white-space: nowrap;
}
.button-margin-top {
  margin-top: 8px;
  width: 100px;
}
.header-confirm {
  background-color: #9F9383;
}

.csv-popup {
  margin: 0 5%;
}
/* sortable lists icon */
.table-list .sorting a::after, .table-list .sorting_asc a::after, .table-list .sorting_desc a::after {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.table-list .sorting[aria-sort=ascending] a::after {
  content: "\f0de";
}
.table-list .sorting[aria-sort=descending] a::after {
  content: "\f0dd";
}

.table-list .sorting a::after, .table-list .first_time a::after {
  content: "\f0dc";
}

.table-list .first_time a::after {
  content: "\f0dc" !important;
}

/* error passcode issuing */
.error-passcode-issuing {
  float: left;
  width: 100%;
  color: #dc143c;
}


#modal-change-max-number input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}

.limit-nick-name {
  display: inline-block;
  width: 270px;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}
.thead-th-max {
  width: 5%;
  min-width: 56px;
  white-space: nowrap;
}
.tbody-td-max {
  width: 5%;
  min-width: 70px;
  white-space: nowrap;
}
abbr[data-title] {
  position: relative;
  border-bottom: 0px !important;
}
abbr[data-title]:hover::after,
abbr[data-title]:focus::after {
  content: attr(data-title);
  position: absolute;
  left: 0;
  bottom: -30px;
  width: auto;
  white-space: nowrap;
  background-color: #FDFEFE;
  color: #17202A;
  border-radius: 3px;
  box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.4);
  font-size: 14px;
  display: flex;
  font-weight: normal;
  padding: 3px 5px;
}
.selected-number {
  font-weight: bold;
}
.overflow-ck-img {
  overflow: auto;
}
.supporter-help-icon {
  vertical-align: text-bottom;
  width: 30px;
  height: 30px;
  background: url(../img/help.png) no-repeat center center;
  background-size: 29px 23px;
}
#modal-supporter-profile-remind .modal-dialog {
  max-width: 850px;
}
.modal-width-600 {
  max-width: 600px;
}
.popup-img {
  float: left;
  width: 30%;
  padding-left: 15px;
}
.popup-img img {
  width: 200px;
  height: 500px;
  margin-top: -15px
}
.popup-content{
  float: left;
  width: 70%;
  padding-right: 15px;
}
.popup-table-border {
  border: 1px solid black;
  border-collapse: collapse;
}
.btn-margin {
  margin-top: 40px;
}
.popup-color {
  background-color: #D3E6F2;
}
#pointing-right-triangle:after {
  content: "🔼";
  display: inline-block;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.reset-link {
  text-decoration: underline;
}

/* UPDATE BOOTSTRAP v4 MODIFY */

.admin-header {
  background-color: #222 !important;
}
.agent-header {
  background-color: #671c1c !important;
  padding-bottom: 6px;
}
.company-header {
  background-color: #0e4b02 !important;
}
.branch-header {
  background-color: #052d6f !important;
}
.common-header .navbar-nav .nav-item .nav-link {
  font-size: 16px !important;
  padding-bottom: 0 !important;
}

.badge-header {
  padding: 0.4rem 0.8rem;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.badge-agent {
  background: #ca776e;
}

.badge-company {
  background: #5cb85c;
}
.badge-branch {
  background: #337ab7;
}

.panel-default {
  border-color: #ddd;
}

.icon-dashboard {
  padding: 0 30px;
  color: gray;
  font-size: 45px !important;
}

/* style btn */
.btn-primary {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}

.btn-primary:hover {
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
}

.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.btn-default:hover {
  background-color: #ddd;
}

.btn-warning {
  color: #fff;
  background-color: #f0ad4e;
  border-color: #eea236;
}

.btn-warning:hover, .btn-warning:focus {
  color: #fff;
  background-color: #ec971f;
  border-color: #d58512;
}

.btn-primary.disabled, .btn-primary:disabled {
  background-color: #286090;
  border-color: #204d74;
}

.description-cancel {
  padding: 5px 90px;
  color: #337ab7;
}

a {
  color: #337ab7;
}

body {
  color: #333 !important;
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>thead>tr>th, .table>thead>tr>th,
.table>tfoot>tr>th, .table>tfoot>tr>th {
  padding: 8px;
  line-height: 1.42857143 !important;
}

.table .sorting_desc, .table .sorting, .table .sorting_disabled{
  border-top: none;
}
table.dataTable thead>tr>th.sorting::before, table.dataTable thead>tr>th.sorting::after {
  content: none;
}

/* Custom table data processing */
div.dataTables_processing {
  width: 100% !important;
  height: 60px;
  margin-left: -50% !important;
  margin-top: -25px !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
}

.card {
  margin-bottom: 20px;
  border-color: #ddd !important;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
}

div.dataTables_processing>div:last-child>div:nth-child(1) {
  animation: none !important;
}

div.dataTables_processing>div:last-child>div {
  background: none;
  animation-timing-function: none;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  justify-content: center;
}

table.dataTable.table-striped>tbody>tr.odd>* {
  box-shadow: inset 0 0 0 9999px #f9f9f9;
}

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
  z-index: 3 !important;
  cursor: default !important;
  background-color: #337ab7 !important;
  border-color: #337ab7 !important;
  color: #fff !important;
}

.pagination>li>a, .pagination>li>span {
  line-height: 1.42857143;
  color: #337ab7 !important;
  text-decoration: none !important;
  border: 1px solid #ddd !important;
}

.modal-header {
  display: inline-block;
}

.radio label, .radio label input {
  margin-right: 5px;
  margin-top: 5px;
}

.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
  display: block;
  max-width: 100%;
  height: auto;
}

.text-danger {
  color: #a94442 !important;
}

#message-btn-upload {
  margin-top: 10px;
}

.text-helper {
  color: #54585c !important;
  display: block;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
	width: unset;
}

.bootstrap-datetimepicker-widget table td.day {
	line-height: 10px;
}

.bootstrap-datetimepicker-widget table td.separator {
  width: 105px;
	display: block;
	box-sizing: border-box;
}
.bootstrap-datetimepicker-widget table tr:nth-child(odd) td.separator {
	height: unset;
}

.bootstrap-datetimepicker-widget table td {
	border-top: unset;
	text-align: center;
  width: 80px;
}

/* .table-striped tbody tr:nth-of-type(odd) {
  background: unset;
} */

.bootstrap-datetimepicker-widget a span.fa {
	color: #337ab7;
}
.form-create .form-inline, .form-filter .form-inline, .form-edit .form-inline, #form-company-setting .form-inline {
  display: table-cell;
}

/* css icon */
i {
  font-size: 15px !important;
}

.icon-size-30 {
  font-size: 30px !important;
  color: #777;
}
.icon-size-40 {
  font-size: 30px !important;
  color: #777;
}
.icon-size-14 {
  font-size: 14px !important;
  padding-right: 5px;
}

.hide {
  display: none;
}

.media-list {
  padding-left: 0;
  list-style: none;
}

h3 small, h2 small {
  font-size: 65%;
  font-weight: 400;
  line-height: 1;
  color: #777;
}

.only-pick-date, #contract-start-date {
  position: relative;
}

.font-size-14 {
  font-size: 14px;
}
/* css for datepicker */
.bootstrap-datetimepicker-widget {
  padding: 0;
}
.bootstrap-datetimepicker-widget .table-condensed,
.bootstrap-datetimepicker-widget .datepicker .datepicker-days .table-condensed tr {
  border: none;
}
.bootstrap-datetimepicker-widget .datepicker .datepicker-days .table-condensed tr th,
.bootstrap-datetimepicker-widget .datepicker .datepicker-days .table-condensed tr td {
  padding: 6px 10px;
  background-color: #fff;
}
.bootstrap-datetimepicker-widget .datepicker .datepicker-days .table-condensed tr th {
  border: none;
}
.bootstrap-datetimepicker-widget .list-unstyled {
  margin-bottom: 0;
}
.bootstrap-datetimepicker-widget .list-unstyled .table-condensed tr {
  background-color: #e2eef6 !important;
}

#form-filter-point-status .table-responsive {
  overflow-x: unset;
}

.ml-18 {
  margin-left: 18px;
}

.flex-center {
  justify-content: center;
}

.page-header > i.fa {
  font-size: 43px !important;
  color: #777;
}

.sub-header > i.fa {
  font-size: 30px !important;
  color: #777;
}

.icon-30 {
  font-size: 30px !important;
  color: #777;
}

#form-create-present-header * {
  font-size: 14px;
}

.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
  opacity: .65;
}

#option-user-filter-refine table tbody > tr {
  background: #e2eef6 !important;
}

.overflow-visible {
  overflow: visible !important;
}

.vertical-align-middle {
  vertical-align: middle !important;
}

.form-control:disabled {
  cursor: not-allowed;
}

table.dataTable td.dataTables_empty,
table.dataTable th.dataTables_empty {
  text-align: left;
}

.row-blue,
table.bg-secondary > tbody > tr {
 background-color: #e2eef6 !important;
}

.modal-dialog:not(.modal-lg, .modal-xl, .modal-sm) {
  max-width: 600px;
}
@media (min-width: 992px) {
  .modal-lg, .modal-xl {
    max-width: 900px;
  }
}
.modal-title {
  line-height: unset;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}
h1,
.h1 {
  font-size: 36px;
}
h2,
.h2 {
  font-size: 30px;
}
h3,
.h3 {
  font-size: 24px;
}
h4,
.h4 {
  font-size: 18px;
}
h5,
.h5 {
  font-size: 14px;
}
h6,
.h6 {
  font-size: 12px;
}
p {
  margin: 0 0 10px;
}

tr.optional-file label {
  font-weight: 900;
}
table.dataTable thead>tr>th.sorting, table.dataTable thead>tr>th.sorting_asc, table.dataTable thead>tr>th.sorting_desc, table.dataTable thead>tr>th.sorting_asc_disabled, table.dataTable thead>tr>th.sorting_desc_disabled, table.dataTable thead>tr>td.sorting, table.dataTable thead>tr>td.sorting_asc, table.dataTable thead>tr>td.sorting_desc, table.dataTable thead>tr>td.sorting_asc_disabled, table.dataTable thead>tr>td.sorting_desc_disabled {
  padding-right: 0;
}

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

.flex-container > a {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-warning:disabled {
  color: #fff !important;
  background-color: #f0ad4e !important;
  border-color: #eea236 !important;
}