@font-face {
  font-family: Open-sans;
  src: url(../fonts/OpenSans-Regular.ttf);
}
@font-face {
  font-family: Open-sans SemiBold;
  src: url(../fonts/OpenSans-SemiBold.ttf);
}
@font-face {
  font-family: Open-sans Bold;
  src: url(../fonts/OpenSans-Bold.ttf);
}

@font-face {
  font-family: TrojanPro3;
  src: url(../fonts/TrajanPro3-Regular.ttf);
}

@font-face {
  font-family: TrojanPro3 Bold;
  src: url(../fonts/TrajanPro3-Bold.ttf);
}

@font-face {
  font-family: SegoeUI;
  src: url(../fonts/SegoeUI.ttf);
}

@font-face {
  font-family: SegoeUI Bold;
  src: url(../fonts/SegoeUI-Bold.ttf);
}

body{
  color: #545C6A;
  font-family: "Open-sans", Helvetica, Arial, sans-serif;
  font-size: 14px;
  background-color: #EEF2F4;
}
a{color: #2067B0;}
a:hover{text-decoration: none;}
button:focus{outline: none;}
b,strong{font-family: Open-sans Bold;}

.btn:focus{box-shadow: none;}

::-webkit-scrollbar {
  height: 7px;
  width: 7px;
  border-radius: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #e8e8e8;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #a8a8a8;
  border-radius: 8px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}


.table-login{
  background-image: url(../images/bg-login.png);
  background-color: #FFF5E2;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: calc( 100vh - 16px);
}
.table-login .login{
  position: fixed;
  top: 30%;
  left: 65%;
  background-color: #fff;
  border-radius: 15px;
  width: 290px;
  min-height: 360px;
  padding:30px 20px 15px 20px;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.1);
}
.table-login .login p{
  font-size:11px;
}
.table-login .login .form-control{
  border-radius: 50px;
  margin-bottom: 15px;
  line-height: 1.5;
  font-size:0.8rem;
}
.table-login .login button{
  color: #01A54F;
  border:1px solid #01A54F;
  border-radius: 50px;
  text-transform: uppercase;
  background-color: #fff;
  padding:5px 30px;
  font-family: Open-sans SemiBold;
}
.table-login .login button:hover{ background-color:#01A54F; color: #fff}
.main-menu.navbar{
  background-color: #fff;
  padding: 0rem 1rem 0rem 1rem;
}
.main-menu.vendor{
  box-shadow: 0 3px 6px rgba(0,0,0,.05);
}
.main-menu .navbar-collapse{margin-bottom: -18px;}
.main-menu.navbar .nav-item a.nav-link {
  color: #545c6a;
  padding:5px;
  margin: 0 15px;
  display: inline-block;
  padding-top: 16px;
  border-bottom: 3px solid #fff;
  position: relative;
  font-family:  Open-sans SemiBold;
}
.main-menu.navbar .nav-item a.nav-link:focus,
.main-menu.navbar .nav-item.active a.nav-link {
  color: #1058d0!important;
  border-bottom: 3px solid #1058d0;
}
.main-menu.navbar .nav-item a.nav-link:hover {
  border-bottom: 3px solid #a3a9b1;
}
.main-menu.navbar .right-menu a{
  color: #545c6a;
  padding: 10px;
  margin: 0 5px;
  display: inline-block;
  padding-top: 16px;
  position: relative;
  font-family:  Open-sans SemiBold;
}
.main-menu.navbar .right-menu a:hover{
  color:#3bc8f5;
}
.main-menu.navbar .right-menu .dropdown-menu{
  right: 0;
  left: auto;
}
.label-notify{
  background-color: red;
  border-radius: 15px;
  padding:0px 8px;
  color: #fff;
  position: absolute;
  right: -30px;
  top: 0;
  font-size: 12px;
}
.main-menu .top-user{color:#545C6A;}
.main-menu .top-user:hover{
  color: #2067B0;
  text-decoration: none;
}
.main-menu .top-notification{
  display: inline-block;
  margin-left: 30px;
  position: relative;
}
.main-menu .top-notification i{
  font-size:30px;
  line-height: 24px;
  color:#545C6A;
  vertical-align: middle;
}
.main-menu .top-notification .label-notify{
  top: -10px;
  right: -18px;
}
.top-notification .dropdown-menu{
  min-width: 600px;
  font-size:13px;
  border:0;
  top: 15px;
  box-shadow: 0 3px 6px rgba(0,0,0,.15);
  right: 0;
  left: auto!important;
  transform:translate3d(0px, 24px, 0px)!important;
}
.top-notification .dropdown-menu:after{
  content: "";
  position: absolute;
  top: -10px;
  right: 30px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;

  border-bottom: 10px solid #fff;
}
.top-notification .dropdown-menu li{
  position: relative;
  padding:10px 15px 10px 70px;
}
.top-notification .dropdown-menu li p{margin-bottom: 0; margin-top: 5px;}
.top-notification .dropdown-menu li:last-child{padding:10px 15px;}
.top-notification .dropdown-menu li:hover{
  background-color: #f8f9fa;
}
.top-notification .dropdown-menu li.disable a{color:#545C6A;}
.icon-bel{
  background-image: url(../images/icon-bel.png);
  background-repeat: no-repeat;
  background-size: 26px auto;
  background-position: center;
  width: 32px;
  height: 32px;
  border-radius: 40px;
  display: inline-block;
  position: absolute;
  top: 15px;
  left: 20px;
}
.icon-bel.blue{background-color: #3E99CE}
.icon-bel.orange{background-color: #DF532D}
.icon-bel.green{background-color: #64A513}

.current-date,.current-date-inline{
  font-size: 12px;
  color:#949595;
}
.detail-under-title{
  font-size: 12px;
  color:#949595;
  margin-top: 5px;
  position: relative;
}
.detail-under-title .current-date-inline{
  display:inline-block;
  margin-right: 35px;}
.detail-under-title .label-status{
  position: absolute;
  right: 10px;
}
.current-date-inline .user-avatar{
  position: relative!important;
}
.btn-right-search{
  text-align: right;
  margin-top:25px;
  margin-bottom: 25px;
}
.btn-right-search .icon-receive{
  background-image: url(../images/icon-receive.svg);
  background-repeat: no-repeat;
  background-size: 20px auto;
  width: 24px;
  height: 24px;
  line-height: 2;
  display: inline-block;
}
.btn-right-search .icon-share{
  background-image: url(../images/icon-share.svg);
  background-repeat: no-repeat;
  background-size: 20px auto;
  width: 24px;
  height: 20px;
  display: inline-block;
  vertical-align: top;
  margin-left: 15px;
}
.btn-right-search .add i{
  border-left:1px solid #fff;
  padding-left: 10px;
  margin-left: 10px;
}
.btn-default{
  color:#535C69!important;
  background-color: #EEF2F4;
  border:1px solid #C6CDD3;
  font-size:1.2rem!important;
}
.btn-default:hover{
  color:#535C69;
  background-color: #C6CDD3;
}
.btn-right-search .icon-upload{
  background-image: url(../images/icon-upload.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  width: 30px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  margin-left:10px;
}
.table-sending .btn-upload{
  background-color: #EEF2F4;
  border:1px solid #C6CDD3;
  font-size:11px!important;
  color: #2067B0;
  text-align: right;
  padding:.3rem 1rem .1rem 1rem!important;
}
.table-sending .btn-upload i{
  margin-right: 10px;
  font-size: 16px;
}
.table-sending .btn-upload:hover{
  background-color: #2067B0;
  color: #fff;
  border:1px solid #2067B0;
}
.wrap-input-search{
  position: relative;
  margin: 25px 15px 25px 15px;
  width: calc(100% - 15px);
  display: inline-block;
}
/*.wrap-input-search i{*/
  /*position: absolute;*/
  /*right:30px;*/
  /*top: 10px;*/
  /*color: #868d95;*/
/*}*/
.main-title{
  display: inline-block;
}
.wrap-search{
  display: inline-block;
  width: 70%;
  margin-left: 15px;
}
.wrap-input-search  input{height: 38px; margin-left: -15px;}
.panel-search{
  position: absolute;
  top:65px;
  left: 0px;
  background-color: #fff;
  transition: all 1s;
  padding:0 15px 15px 15px;
  margin-left:15px;
  z-index: 9;
  width: calc(100% - 45px);
  box-shadow: 0 7px 21px rgba(83, 92, 105, .12), 0 -1px 6px 0 rgba(83, 92, 105, .06);
}
.panel-search h4{
  border-bottom: 1px solid #dddddd;
  padding-bottom: 15px;
  margin-bottom: 15px;
  padding-top: 30px;
  display: block;
  width:100%;
}
.panel-search .form-group{
  margin:0 2% 15px 2%;
  width:calc(100% - 45px);
  display: inline-block;
}
.panel-search label{
  font-weight: normal;
}
.btn{
  text-transform: uppercase;
  border-radius: 2px!important;
  color: #fff;
  /*font-size: 0.75rem!important;*/
  line-height: 20px;
  min-width: 75px;
}
.btn:hover{color: #fff;}
.btn-blue{
  background-color: #3bc8f5!important;
  border-color: #3bc8f5!important;
}
.btn-blue:hover{
  background-color: #41DCFF!important;
  border-color: #3bc8f5!important;
}
.btn-grey{
  background-color: #abbac3 !important;
  border-color: #abbac3;
}

.btn-green {
  background-color: #1B6C40;
  color: #fff;
}

.wrap-table .nav-tabs{
  border-bottom: 0;}
.wrap-table .detail-doc .nav-tabs{
  margin-bottom: 3px;}
.table-incoming,.table-sending{
  background-color: #fff;
}
.nav-tabs .nav-link{
  border:1px solid #D0D6DB;
  background-color: #EEF2F4;
  margin-right: 15px;
  padding:.25rem 1.5rem;
  color:#6E747E;
  font-family: Open-sans SemiBold;
  position: relative;
  font-size: 13px;
}
.nav-tabs .nav-link:hover{
  background-color: #fff;
  border:1px solid #D0D6DB;
  border-bottom: 0
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
  color:#1058D0;
}

/* Customize the label (the container) */
.wrap-checkbox {
  display: inline-block;
  position: relative;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.wrap-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #fff;
  border-radius: 3px;
  border:1px solid #D0D6DB;
}

/* On mouse-over, add a grey background color */
.wrap-checkbox:hover input ~ .checkmark {
  background-color: #f8f8f8;
}

/* When the checkbox is checked, add a blue background */
.wrap-checkbox input:checked ~ .checkmark {
  background-color: #fff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.wrap-checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.wrap-checkbox .checkmark:after {
  left: 6px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid #2067B0;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.table{
  color: #545C6A;
  background-color: #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;}
.table thead th{
  color: #545C6A;
  /*font-weight: normal;*/
  text-transform: capitalize;
  font-size:12px;
  background-color: #F6F8F9;
}

.table thead th.group{ background-color: #f8b445; color: #3d3d3d; font-weight: bold;}
.table th{
  padding:.75rem .75rem .5rem .75rem;
  position: relative;
  border-bottom: 1px solid #EEF2F4;}
.table td{
  padding:1rem .75rem .75rem .75rem;
  position: relative;
  border-bottom: 1px solid #EEF2F4;
}
.table th a.icon-sort{
  width:20px;
  height: 20px;
  line-height: 20px;
  display: inline-block;
  background-image: url(../images/icon-sort.svg);
  background-repeat: no-repeat;
  background-size: 19px auto;
  background-position:center right;
  vertical-align: middle;
}
.table th a.icon-sort:hover{background-image: url(../images/icon-sort-hover.svg);}
.table td.col-id{
  width:80px;
  text-align: center;
}
.table .col-checkbox{
  width:50px;
  text-align: left;
}
.table .col-revision,.table .col-priority{width:110px;}
.table .col-priority{text-align: center;}
.table .col-name{
  width:20%;
  position: relative;
  /*word-break: break-all;*/
}
.table-sending.table .col-name{width:40%;}
.table .col-type{width:15%;}
.table .col-name .thumb{
  display: inline-block;
  width: 24px;
  height: 24px;
  position: absolute;
  top:1.3rem;
}
.table .col-name.folder .thumb{top:1rem;}
.table .col-name.folder a{color:#545C6A;font-family: Open-sans SemiBold;}
.table .col-name .thumb img{
  max-width: 100%;
}
.table .col-name p{
  display: inline-block;
  padding-left:40px;
  margin-bottom: 0;
}

.table-daily-sale td, .table-daily-sale th, .table-daily-sale thead th{vertical-align: middle;}
.table-daily-sale  thead th.reach{ background-color:#fce4d6; }
.table-daily-sale  thead th.leads{ background-color:#f8cbad; }
.table-daily-sale  thead th.visit{ background-color:#f4b084; }
.table-daily-sale  tbody td.target{ background-color:#ffc000; }
.user-avatar{
  width: 34px;
  height: 34px;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  border-radius: 50%;
  background-color: #a8a8a8;
}
.user-avatar img{
  object-fit: cover;
  display: inline-block;
  width:115%;
  margin-top: 35%;
  transform: translateY(-35%);
}
.doc-avatar{
  width: 40px;
  height: 40px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  overflow: hidden;
  border-radius:4px;
  background-color: #EEF2F4;
  position: absolute;
  left: 0;
}
.doc-avatar img{
  width:36px;
  text-align: center;
  display: inline-block;}

.table .col-project a{
  display: block;
  color: #2067B0;
}
.table .col-user{text-align: center;}
.table .col-user a.user-avatar:nth-child(1){
  margin-left:0px;
}
.table .col-user a.user-avatar{
  margin-left: -25px;
}
.table .col-user a.user-more{
  font-family: Open-sans SemiBold;
  color: #2067B0;
}
.table td.col-revision {color: #2067B0; text-align: center;}
.btn-tab{
  border: 1px solid #D0D6DB;
  border-bottom: 0;
  background-color: #EEF2F4;
  margin-right: 10px;
  padding: .35rem 1.5rem;
  color: #6E747E;
  font-family: Open-sans SemiBold;
  position: relative;
}
.btn-tab.active,.btn-tab:hover{background-color:#fff;color:#2067B0;}

table.dataTable thead th{
  border-bottom: 0!important;
  background-color:#F3FBFF;
  color: #2067B0;
}
table.dataTable thead td{border-bottom: 0!important}
table.dataTable.no-footer{border-bottom:0!important;}

.table .col-status{text-align: center;}
.table .col-date{text-align: center;}
.label-pending,.label-overdue,
.label-done,.label-in-progress, .label-declined{
  color:#fff;
  font-size: 10px!important;
  font-family: Open-sans Bold;
  text-indent: 15px;
  width:120px;
  padding-right: 24px;
  line-height: 20px;
  border-radius: 2px;
  display: inline-block;
  text-transform: uppercase;
  background-image: url(../images/icon-label.png);
  background-repeat: no-repeat;
  background-size: 22px auto;
  background-position: 98% 20%;
}
.label-pending{background-color: #FFC001;}
.label-in-progress{background-color: #3AA6EC;}
.label-overdue{background-color: #F24A4A;}
.label-done{background-color: #61AA21;}
.label-declined{background-color: #b9b9b9}
.table-ticket text-area,.table-ticket select{
  border:1px solid #ced4da;
}
.table-ticket .table .col-name p{
  width: calc(100% - 50px);
  padding-left:0;
}
.table-ticket .table .col-name .thumb{
  position: relative;
  vertical-align: top;
  top: 0;
  width: 30px;
}
.modal-ticket input::placeholder{color:#495057;}
.modal-ticket .form-upload{
  text-align: center;
  margin-left: 20%;
  margin-bottom: 15px;
  padding-top:20px;
  padding-bottom: 20px;
  width: 60%;
  border:1px #ABB1B8 dashed;
  background-image: url(../images/icon-upload-blue.svg);
  background-repeat: no-repeat;
  background-size: 63px auto;
  background-position: center 15%;
}
.modal-ticket .form-upload input[type="file"]{
  width: 50%;
  height: 80px;
  opacity: 0;
  cursor: pointer;
}
.modal-ticket .form-upload .btn-blue{
  padding:.175rem .95rem;
  text-transform: none;
}
.modal-ticket .form-upload p{
  color:#2067AA;
  margin-bottom: 15px;
  margin-top: -30px;
}
.modal-ticket .file{
  position: relative;
  margin: 20px 0px 20px 30px;

}
.modal-ticket .file img{margin-right: 10px}
.modal-ticket .file label{
  position: absolute;
  right: 0px;
  top: 10px;
}



.label-notification{
  border-radius: 50px;
  padding:0px 8px;
  background-color: red;
  position: absolute;
  right:-9px;
  top: -8px;
  color:#fff;
  font-size: 12px;
  font-weight: normal;
}
.main-container{
  width: 100%;
  /*padding-left: 50px;
  padding-right:50px;*/
}
.group-avatar{
  display: inline-block;
}
.func-in-row{
  position:relative;
  display: inline-block;
  width: 24px;
  height: 24px;
}
.func-in-row .dropdown-menu{
  font-size:14px;
  border:0;
  box-shadow: 0 3px 6px rgba(0,0,0,.15);
  right: 0;
  left: auto!important;
  transform:translate3d(0px, 24px, 0px)!important;
}
.func-in-row .icon-func{
  display: block;
  color:#aaa;
  text-align: center;}
.func-in-row .icon-func:hover,
.func-in-row .dropdown-item:hover{color: #2067B0;}
.func-in-row .dropdown-menu a i{
  margin-right: 5px;
  width: 24px;
  text-align: center;
}
.func-in-row .dropdown-item{
  padding: .5rem 1.5rem .5rem 1rem;
}
.func-in-row .dropdown-item.active, .func-in-row .dropdown-item:active{
  background-color:#3bc8f5!important;
  color:#fff;
}
.nav-paging{
  padding:.5rem .75rem;
  text-transform: unset;
  font-size:14px;
}
.nav-paging .left div{
  display: inline-block;
  /*margin-right: 30px;*/
}
.nav-paging .left div font{
  color: #2067B0;
  font-family: Open-sans SemiBold;
}
.nav-paging .mid{text-align: center;}
.nav-paging .mid div{
  display: inline-block;
  margin-right: 15px;
}
.nav-paging .mid div a{
  padding:0 .45rem;
  border-left:1px solid #d0d0d0;
  font-family: Open-sans;
  color: #545C6A;
}
.nav-paging .mid div a.first{
  border-left:unset;
}
.nav-paging .mid div a.active{
  color: #007bff;
  font-family: Open-sans SemiBold;
}
.nav-paging .right{
  text-align: right;
}
.nav-paging .right .form-control{
  width: fit-content;
  display: inline-block;
  padding: .25rem .5rem;
  font-size:12px;
}
.modal-dialog{
  transform: translateY(20%)!important;
}
.modal-sharing .modal-dialog {
  transform: translateY(10%)!important;
}

.modal-dialog.modal-upload-portal {
  transform: translateY(5%)!important;
}
.modal-dialog.modal-ticket-portal{
  transform: translateY(5%)!important;
}
.modal-upload-portal .icon-browse-file{
  margin-top: 5px;
  min-height: calc(1.5em + .75rem + 2px);
  background-size: 40px auto;
  background-position: 15px 0px;
  text-indent: 65px;
}
.modal-upload-portal .icon-browse-file .name-over-input{
  height: auto;
  min-height: calc(1.5em + .75rem + 2px);
  position: relative;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  left: 30px;
  width: 90%;
}
.modal-upload-portal .icon-browse-file .name-over-input p{
  margin-bottom: 0;
}

.modal-content{
  background-color: #EEF2F4;
}
.modal-content .modal-header{border-bottom: 0; padding-top:25px;}
.modal-content .modal-header .modal-title i{display: inline-block;height:20px; margin-right: 15px;}
.modal-content .modal-header .modal-title img{display: inline-block; max-height: 100%;}
.modal-content .modal-body{
  background-color: #fff;
  margin:0px 15px 15px 15px;
}

.empty-data{
  text-align: center;
  min-height: calc(100vh - 300px);}
  .empty-data img{margin-top: 50px; margin-bottom: 20px;}

.icon-browse-file{
  /*background-image: url(../images/icon-upload-01.png);*/
  background-image: url(../images/icon-upload-blue.svg);
  background-repeat: no-repeat;
  background-size: 26px auto;
  background-position: 15px 8px;
  text-indent: 45px;
  position: relative;
  line-height: 1.5;
  color:#949595;


}
.form-control-file{
  opacity: 0;
  position: absolute;
  z-index: 2;
  display: block;
  left: 0;
  top:0;
  cursor: pointer;
}
.form-group label{
  color:#949595;
  font-size: 0.9rem;}
.form-control{font-size: 0.9rem}
.form-control.disable{background-color: #EEF2F4}

.form-control.select-2{
    padding: .375rem 0rem 0rem 0rem;
    text-indent: .2rem;
    height: auto;
}
.modal-select2 .form-control .select2-container{width:97%!important;}
.modal-select2  .select2-container--default .select2-search--dropdown .select2-search__field,
.select2-container input:focus,
.modal-select2 .select2-container--default .select2-selection{
  outline: none!important;
}
.select2-dropdown{
  box-shadow: 0 3px 6px rgba(0,0,0,.16);
}
.modal-select2 .select2-container--default .select2-selection{border:0!important;}
.modal-select2 .select2-container--default .select2-selection .select2-selection__rendered{line-height: 21px;}

/*modal*/
.full-width .modal-dialog{
  background: #EEF2F4;
  max-width:80%;
  transform: translateX(0px);
  margin:0;
  margin-left: calc(100% - 80%);
  transform: translate(0,0)!important;
}

.full-width .modal-header{
  border-bottom:0;}
.full-width .modal-header.modal-title{
  font-size: 26px;
  width: 70%;}
.full-width .btn-right-search{
  padding-top:0;
  padding-bottom: 0px;
}
.full-width .modal-content{
  height: 100vh;
  width: 100%;
  overflow-y: scroll;
  border-radius: 0;
  background: transparent!important;
  border:0;
  padding:15px;}
.full-width .modal-body{ background: transparent!important;}
.full-width .modal-content .close {
  border-radius: 50px;
  position: absolute;
  right: 17px;
  top: 30px;
  padding: 3px 8px;
  color: #ccc;
  opacity: 1;
}
.full-width .modal-content .close:active,
.full-width .modal-content .close:focus{outline: none; box-shadow: none; border:none}
.modal-ticket .btn-right-search{
  margin-bottom: 0;
  margin-top: 0;
}
.field-left{
  background:#F9FAFB;
  padding:15px;
  margin-bottom: 15px;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .04);
}
.field-left .title-inline{
  margin-bottom:1rem;
  border-bottom: 1px solid #e8ecee;
  padding-bottom:0.5rem;
}
.field-left .title-inline h4{
  text-transform: uppercase;
  color:#545c6a;
  font-size: 0.7rem;
  display: inline-block;
  font-family: Open-sans SemiBold;
}
.field-left .title-inline h4 a{
  display: inline-block;
  font-size: 0.7rem;
  color:#a3a9b1;
  margin-left:5px;}
.field-left .title-inline h4 a:hover{
  color:#2067AA;
}
.field-left .form-group{
  margin-bottom:1.2rem;
  position: relative;
  display:block;}
.field-left .edit-info{
  color: #a3a9b1;
  margin-left: 15px;
}

.field-left .edit-info:hover{color: #2067AA}
.field-left label{
  font-weight: normal;
  font-size:0.8rem;
  color:#a3a9b1;
  margin-bottom:3px;
}
.field-left .status label{
  color:#fff!important;
  position: absolute;
  right: 0;
  top: -2px;
}
.field-left a{
  color:#2067AA;
}
.field-left .icon-download{
  font-size: 0.85rem;
  text-align: left;
  padding-top:15px;
}
.label-grey{
  background-color: #E3E4E6;
  border-radius: 50px;
  padding:3px 15px;
  margin-right:15px;
  display: inline-block;
  font-size: 12px;
}
.label-blue{
  background-color: #E8F1FB;
  border-radius: 50px;
  padding:3px 15px 3px 10px;
  margin-right:15px;
  display: inline-block;
  font-size: 12px;
  color:#2067B0;
}
.label-blue:hover{
  background-color: #2067B0;
  color:#fff;
}
.label-blue i{
  font-size:16px;
  vertical-align: middle;
  margin-right: 5px;
}
.field-left .review{
  background-color: #EEF2F4;
  border:1px solid #D9D9D9;
  text-align: center;
  padding:10px;
  height: 180px;
  overflow-y: scroll;
}
.field-left .review img{max-width: 100%; display: block;}


.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
.timeline::after {
  content: '';
  position: absolute;
  width: 3px;
  background-color: #ccc;
  top: 15px;
  bottom: 0;
  left:-5px;
}
.timeline .panel{
  padding: 10px 0px 10px 20px;
  position: relative;
  background-color: inherit;
  width: 100%;
}
.timeline .panel.div_action{
  padding: 0px 0px 10px 20px;
}
.timeline .panel::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: -14px;
  background-color: #EEF2F4;
  border: 2px solid #FF9F55;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}
.timeline .right {
  left:0px;
}
.timeline .right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 10px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}
.right::after {
  left: -16px;
}
.timeline .panel .content {
  padding: 20px 30px  10px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
}
.timeline .panel.yellow .content{background-color:#FFFEEF}
.timeline .panel .title{margin-bottom: 15px;}
.timeline .panel .title strong{margin-left: 10px;margin-right: 10px;}
.timeline .panel p{margin-bottom: 5px}
.timeline .panel .update-title{
  text-transform: uppercase;
  font-size: 10px;
  font-family: Open-sans SemiBold;
  margin-top: 15px;
  color:#949595;
}



.bootstrap-datetimepicker-widget .fa-chevron-up,
.bootstrap-datetimepicker-widget .fa-chevron-down{
  color:#545C6A!important;
}
.nav-browser {
  background-color: #fff;
  border-top: 1px solid #dee2e6;
  display: block;
  padding-top: 20px;
  padding-bottom: 20px;
}
.nav-browser a {
  font-size: 1rem;
  color: #949595;
  padding-left: 20px;
  padding-right: 20px;
}
.nav-browser a.active, .nav-browser a:hover {
  color: #2067B0;
}
.breadcrumb{
  background-color: #fff;
}


.icon-thumbnail{
  width: 24px;
  height: 24px;
  display: inline-block;
  background-image: url(../images/icon-thumbnail.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px auto;
}
.icon-thumbnail.active{
  background-image: url(../images/icon-thumbnail-active.svg);
}
.icon-list{
  width: 24px;
  height: 24px;
  margin-right:8px;
  display: inline-block;
  background-image: url(../images/icon-list.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px auto;
}
.icon-list.active{
  background-image: url(../images/icon-list-active.svg);
}
.detail-doc{
  padding: 25px 15px;
  margin-right: 5px;
  width: calc(25% - 15px);


  background-color: #fff;
  position: fixed;
  right: 0;
  z-index: 1030;
  height: calc(100vh - 150px);
  transition: 0.3s ease;
}
.detail-doc .tab-content{
  overflow-y: scroll;
  height: calc(100vh - 280px);
  font-size: 0.825rem;
}
.detail-doc .header {
  min-height: 40px;
  margin-bottom: 15px;
}
.detail-doc .header span{
  position: absolute;
  width: 30px;
  height: 30px;
  display: block;
}
.detail-doc .header h4{
  padding-left: 50px;
  font-size:20px;
}
.detail-doc .content .nav-link{
  background-color: transparent;
  border:0;
  margin-right:0;
  border-bottom: 2px solid #EEF2F4;
}
.detail-doc .content .nav-link.active,.detail-doc .content .nav-link:hover{
  color:#1058D0;
  border-bottom: 2px solid #1058D0;
}
.detail-doc .content .tab-pane{
  margin-top: 15px;
}
.detail-doc .content .file-review{
  padding:10px;
  height: 250px;
  background-color: #EEF2F4;
  border:1px solid #D9D9D9;
  overflow: hidden;
}
.detail-doc .content .file-review img{
  width: 100%;
  display: block;
}
.detail-doc .content .group-detail{
  display: block;
  margin:10px 0;
}
.detail-doc .content .group-detail label{
  width: 35%;
  display: inline-block;
}
.detail-doc .content .group-detail label.w100{width: 100%!important;}
.detail-doc .content .group-detail p{
  display: inline-block;
  text-align: right;
  font-family: Open-sans SemiBold;
  margin-bottom: 5px;
  padding-right: 10px;
}
.detail-doc .content .group-detail p.w68{width: 68%;}
.detail-doc .func-avatar{
  font-size: 12px;
  max-height: 150px;
  overflow-y: scroll;
  color: #545C6A;
  padding-left: 5px;
}
.detail-doc .func-avatar .user-avatar{margin-right: 5px;}

.label-tags{
  background-color: #E3E4E6;
  border-radius: 15px;
  padding:5px 20px;
  color: #505763;
  display: inline-block;
  margin-right:15px;
}
.label-tags-res{
  background-color:#E8F1FB;
  border-radius: 15px;
  padding:5px 20px;
  color: #2067B0;
  display: inline-block;
  margin-right:15px;
}
.label-tags-res i{
  font-size: 20px;
  vertical-align: middle;
  margin-right:5px;
}

.detail-doc .user-avatar{
  width:30px;
  height: 30px;
  line-height: 30px;
  margin-right:5px;
  overflow:hidden;
}
.w100{width: 100%!important}
.w85{width: 85%!important}
.panel-doc-history {
  background-color: #F6F6F6;
  border-radius: 3px;
  padding: 15px 15px 15px 65px;
  position: relative;
  color: #777777;
  margin-bottom: 15px;
}
.panel-doc-history .user-avatar{
  position: absolute;
  top: 15px;
  left: 15px;
}
.panel-doc-history .detail p{margin-bottom: 5px;}
.panel-doc-history .detail p a,.doc-grid .item a,
.doc-list .item a,.panel-revision .item a{
    font-family: Open-sans SemiBold;
}
.doc-list .item a.user-assign{
    font-weight:normal;
    color:#545C6A;
}
.doc-grid .item,.doc-list .item{
    padding:15px 15px 5px 15px;
    background-color: #fff;
    margin-bottom: 8px;
}
.doc-grid .item.new,
.panel-revision .item.new,
.doc-list .item.new{background-color:#FFFBE8;}

.doc-list .func-in-row{position: absolute;
  right:0px;
  top:0px;
  font-weight: normal;}
.doc-grid .item .thumbnail{
    position: relative;
    height: 240px;
    overflow: hidden;
    border:1px solid #E3E4E6;
    margin-bottom: 15px;
}
.doc-list .item .thumbnail{
    position: relative;
    height: 120px;
    overflow: hidden;
    border:1px solid #D0D6DB;
    margin-bottom: 15px;
    margin-left:60px;
}
.doc-list .item .detail .related a{ display: inline-block;}
.doc-list .item .detail a.thumbnail-small{
    position: relative;
    width: 40px;
    height: 30px;
    overflow: hidden;
    border:1px solid #D0D6DB;
    margin-bottom: 15px;
    margin-top: 15px;
    vertical-align: middle;
}
.doc-list .item .detail a.thumbnail-small:hover{border:1px solid #2067B0;}
.doc-grid .item .thumbnail img.thumb,.doc-list .item .thumbnail img.thumb,.thumbnail-small img.thumb{
    display: inline-block;
    width: 100%;
}
.doc-grid .item .thumbnail .icon-file{
    position: absolute;
    top:calc(50% - 60px);
    left: calc(50% - 60px);
    z-index: 2;
}
.doc-grid .item .thumbnail .icon-file img{max-width: 120px}

.doc-list .item .thumbnail .icon-file{
    position: absolute;
    top:calc(50% - 30px);
    left: calc(50% - 30px);
    z-index: 2;
}
.doc-list .item .thumbnail .icon-file img{max-width: 70px}

.doc-grid .item .thumbnail .img-fluid,
.doc-list .item .thumbnail .img-fluid{opacity: 0.5; width: 100%; height: 100%}
.doc-list .item .thumbnail.thumbnail-list .img-fluid{opacity: 0.5; width: unset; height: unset; min-height: 118px;}
.doc-grid .item .user,.doc-list .item .user{
    position: relative;
    padding-left:60px;
    margin-bottom: 10px;
}
.doc-grid .item .user p,.doc-list .item .user p{margin-bottom: 0px;}
.doc-list .item .user i.fa-chevron-right{margin:0 5px;}
.doc-grid .item .user .user-avatar,.doc-list .item .user .user-avatar{
    position: absolute;
    left: 0;
}
.doc-grid .item .user .current-date,.doc-list .item .user .current-date{
    display: block;
    margin-top: 3px;
}
.doc-grid .item .user span.view,.doc-list .item .user span.view{
    position: absolute;
    right: 30px;
    top: 0;
    font-size: 12px;
    color: #949595;}

.doc-list .item .user span.label-status{
    position: absolute;
    right: 30px;
    top: 0;
    font-size: 12px;
    padding:2px 5px 2px 15px;
    color: #fff;
    border-radius: 3px;
}
.doc-list .label-status.new{background-color: #2067B0;}
.doc-list .label-status.inprogress{background-color: #FFC001;}
.doc-list .label-status.done{background-color: #61AA21;}
.doc-list .label-status.overdue{background-color: #FF0000;}

  .doc-list .label-status i{
    width:19px;
    height: 19px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;}
    .doc-list .label-status i img{
      width: 100%;
      display: block;
    }

.doc-grid .item .user span.view i,.doc-list .item .user span.view i{color: #DF532D;}
.icon-label{
  background-image: url(../images/icon-label.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.doc-grid .item .detail a{
  display: block;}
  .doc-list .item .detail a.title{
    width: 80%;
    margin-bottom: 5px;}
.doc-grid .item .detail p,.doc-list .item .detail p{
    margin-bottom: 0;}

.doc-list .item .detail p{display: inline-block; font-size: 0.8125rem}
.doc-list .item .detail p.tags{font-size: 12px;}
.doc-list .item .detail p a{display: inline-block;}
.doc-list .item .detail p i.fa-tag{color:#949595;}
.doc-grid .item .detail p label,.doc-list .item .detail p label{
    color: #949595;
    min-width: 90px;
    margin-bottom: 0;
    font-weight: normal;}
.translate-doc.doc-list .item .detail{}

.panel-revision{
}
.panel-revision .item{
    border-bottom:1px solid #F6F6F6;
    position: relative;
    padding:20px 15px;}

.panel-revision .icon-file{
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
}
.icon-file img{
  max-width: 100%;
  display: inline-block;}
.panel-revision .item p{
  padding-left: 50px;
  margin-bottom: 5px;}
.panel-revision .item p span{margin:0 5px;}

.table-doc .detail{position: relative;}
.table-doc .user .func-in-row{
  position: absolute;
  right:0px;
  top:0px;
  font-weight: normal;
}
.table-doc .detail .responsible{
  margin-top: 15px;
  margin-bottom: 15px}
.table-doc .detail .responsible .user-avatar{
  width: 30px;
  height: 30px;
  display: inline-block;
  vertical-align: middle;
}
.table-doc .detail .responsible label,.table-doc .detail .related label{display:inline-block;font-size: 12px;}
.table-doc .detail .related{text-align: right;}

/*.table-doc .detail .responsible .user-avatar img{width: 40px;}*/
.list-folder{
  padding: 30px 45px 15px 30px;
  background-color: #fff;
  margin-bottom: 15px;
  position: relative;
}
  .list-folder .item-folder{
    border:1px solid #D0D6DB;
    background-color: #EEF2F4;
    padding:8px 10px;
    margin-bottom: 15px;
    border-radius: 3px;
  }
   .list-folder .item-folder div{
    width:100%;
    display: inline-block;
    line-height: 1.3;
    min-height: 34px;
  }
  .list-folder .item-folder img.folder{
    width: 34px;
    display: inline-block;
  }
  .list-folder .item-folder .title{
    display: inline-block;
    width: calc(100% - 45px);
    vertical-align: middle;
    font-family: Open-sans SemiBold;
  }
.not-permission{
  background-color: #fff;
  height: calc(100vh - 45px);
  padding-top:15px;
}
.not-permission img{
  display: inline-block;
  max-width: 50%;
  text-align: center;
}
.fa-file-medical{
  color:#8f8f8f;
}

.icon-incomming,.icon-out-ticket{
  width:19px;
  height: 19px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;}
.icon-incomming{
  background-image: url(../images/icon-incomming.svg);
}
.icon-out-ticket{
  background-image: url(../images/icon-out-ticket.svg);
}


.tooltip-avatar {
  position: relative;
  display: inline-block;
  box-shadow: 0 0 1px 1px rgba(255,255,255,1);
  border-radius: 50px;
}
.col-user .tooltip-avatar{margin-left: -20px;}

.tooltip-avatar .tooltip-content{
  /*visibility: hidden;*/
  display: none;
  min-width: 400px;
  background-color: white;
  box-shadow: 0 8px 16px rgba(0,0,0,.16);
  color: #000;
  border-radius: 6px;
  padding: 15px 5px 15px 15px;

  position: absolute;
  z-index: 10;
  right: -15px;
  top: 115%;
}
.tooltip-avatar .tooltip-content.left{
  right: auto!important;
  left:-15px;
}
.tooltip-avatar:hover .tooltip-content {
  display: block;
  /*visibility: visible;*/
}
.tooltip-avatar .tooltip-content:after{
  position: absolute;
  top: -8px;
  right: 25px;
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;

  border-bottom: 8px solid #fff;
  box-shadow: 0 -8px 16px rgba(0,0,0,.16);
}
.tooltip-avatar .tooltip-content.left:after{
  right: auto;
  left: 25px;
}
.tooltip-avatar .tooltip-content .user-avatar{
  width: 40px;
  display: inline-block;
  margin-right: 15px;
}
.tooltip-avatar .tooltip-content .detail{
  width:calc(100% - 60px);
  display: inline-block;
  vertical-align:top;
  text-align: left;
}
.tooltip-avatar .tooltip-content .detail p{
  margin-bottom: 3px;
  font-size:12px;
}
.tooltip-avatar .tooltip-content .detail p.name{
  color: #2067B0;
  font-family: Open-sans SemiBold;
  font-size: 14px;
  margin-bottom: 10px;
  display: block;
}
.tooltip-avatar .tooltip-content .detail p label{
  color:#777;
  display: inline-block;
  width: 80px!important;
  vertical-align: top;
  margin-bottom: 0px;
}
.tooltip-avatar .tooltip-content .detail p span{
  width: calc(100% - 90px);
  display: inline-block;
}

.dropdown-ticket{
  border:0;
  box-shadow: 0 7px 21px rgba(83, 92, 105, .12), 0 -1px 6px 0 rgba(83, 92, 105, .06);
}
.dropdown-ticket .dropdown-item{
  padding:.4rem 1.5rem;
}
.dropdown-ticket a{
  font-size: 0.85rem;
  border-bottom: 1px solid #EEF2F4;
}
.dropdown-ticket a:hover,.dropdown-ticket a:hover i{color:#2067B0;}
.dropdown-ticket i{
  margin-right: 15px;
  color: #949595;
  width:18px;
}

@media screen and (max-width: 768px) {
  .timeline::after {left: 31px;}
  .timeline .panel {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }
  .timeline .panel::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }
  .timeline .right {left: 0%;}
  .table-login{
    background-image: url(../images/bg-mobile.jpg);
      background-position: center bottom;}
  .table-login .login{
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media (min-width: 1140px) {
  .modal-slg {
    width: 1140px;
  }
}
@media screen and (max-width: 1140px) {
  .main-menu .navbar-nav{display: block;}
  .main-menu .navbar-nav .nav-item{display: inline-block;}
}