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

@font-face {
  font-family: 'Roboto';
  src: url(/assets/fonts/Roboto-Regular.ttf);
}

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

@font-face {
  font-family: 'Roboto-Light';
  src: url(/assets/fonts/Roboto-Light.ttf);
}

@font-face {
  font-family: 'Montserrat-ExtraLight';
  src: url(/assets/fonts/Montserrat-Light.ttf);
}

label{
  font-size:13px;
  color:#555;
  font-weight: 600;
}

.content-modify{
  width:100% !important;
}

.showdata{
  position:relative;
}

/* .showdata:hover + .display-message{
  display:block;
} */

/* .display-message:hover{
  display:block;
} */

.active{
	display
}

.display-message{
  display: none;
  position: absolute;
  z-index: 9;
  background: rgba(255,255,255,1);
  width: 400px;
  right: 20px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.nav-top-left div ul, .nav-top-left div ul li, .nav-top-right div ul, .nav-top-right div ul li{
  list-style:none;
  display:inline-block;
}

.nav-top-left, .nav-top-right{
  display: flex;
}

.nav-top-left div, .nav-top-right div{
  margin:auto;
}

.nav-top-left div ul, .nav-top-right div ul{
  margin:0;
  padding:0;
}

.nav-top-left div ul li, .nav-top-right div ul li{
  padding:5px 10px;
  font-size:11px;
  font-weight:normal;
}

.btn-success{
  background-color:#6282b4;
}

.nav-top-left div ul li{
  padding:5px 10px;
  font-size:11px;
  font-weight:normal;
  position: relative;
}

.nav-top-right div ul li{
  position: relative;
}

.nav-top-left div ul li ul, .nav-top-right div ul li ul{
  display:none;
  background-color:#fff;
  margin-top:5px;
  position:absolute;
  box-shadow:0 0.125rem 0.25rem rgba(165,163,174,.3);
  width: max-content;
  left:-8px;
  z-index:9;
}

.nav-top-right div ul li ul{
  right:0px;
  left:auto;
}

.nav-top-left div ul li ul li, .nav-top-right div ul li ul li{
  display: block;
  padding:10px 15px;
  color:#bcbcbc;
  cursor:pointer;
  font-weight:normal;
  min-width:175px;
  font-size:11px;
}

.nav-top-left div ul li ul li{
  text-align:left;
  border-left:3px solid transparent;
}

.nav-top-right div ul li ul li{
  text-align:right;
  border-right:3px solid transparent;
}

.nav-top-left div ul li ul li:hover{
  color:#555;
  border-left:3px solid #6282b4;
  transition:all 1s;
}

.nav-top-right div ul li ul li:hover{
  color:#555;
  border-right:3px solid #6282b4;
  transition:all 1s;
}

.nav-top-left div ul li:hover ul, .nav-top-right div ul li:hover ul{
  display:block;
}

.nav-top-left div ul li a{
  font-size:11px;
  color:#555;
  text-decoration: none;
}

.box-search{
  display:flex;
}

.box-search div{
  margin:0;
  display:flex;
  width:100%;
}

.box-search div input{
  width:100%;
  margin:auto;
  padding:5px 15px;
  padding-left:30px;
  border:1px solid #ccc;
  font-size:11px;
  border-radius:5px;
}

table{
  color:#555;
}

table tr td{
  padding:5px 15px !important;
}

table tr th, table tr td{
  color:#555;
  font-size:11px;
  vertical-align:middle !important;
}

.select2-container{
  width:100% !important;
}

.table>:not(:first-child) {
    border-top: 0px solid currentColor;
}

.btn-primary{
  background-color: #6282b4;
}

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #b6b6b6 #e8e8e8;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: #e9edf1;
  border-radius: 20px;
  border: 3px solid transparent;
}

.side-nav{
  height: 400px;overflow-y: auto;
}

.side-nav div{
  padding:10px 0px;text-align:center;
  cursor:pointer;
}

.side-nav div i{
  margin-bottom:10px;color:#bcbcbc;
}

.side-nav div h4{
  font-size:13px;color:#555;margin-bottom:0px;
}

.side-nav div span{
  font-size:9px;
}

.side-nav div:hover{
  background-color:#fff;
  border-radius:10px;
  transition: width 2s, height 4s;
}

.side-nav div:hover i{
  color:#6282b4 !important;
  transition:all 1s;
}

.sparate{
  border-bottom:1px solid #cdcdcd;
}

.attention{
  color:#cd6464 !important;
  font-weight: 400;
}

.box-login{
  min-width:750px;
  margin:auto;
  background-color:#fff;
}

.box-login .form-login{
  padding:30px;
}

.box-login label, .box-login div{
  font-size:12px;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  width:100% !important;
  font-size:12px;
}

.select2-search--dropdown .select2-search__field {
  font-size:12px;
}

.select2-results__option {
    font-size: 12px;
}

.pagination .page-item .page-link{
  font-size:12px;
  color:#555;
}

.pagination {
  float:left;
}

.box-sort, .box-sort-detail{
  display:none;
  position: absolute;
  background: #fff;
  z-index: 9;
  min-width: 260px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.box-sort .title, .box-sort .box, .box-sort-detail .title, .box-sort-detail .box{
  padding:10px 20px;
}

.box-sort .box .row, .box-sort-detail .box .row{
  margin-bottom:30px;
}

.container-load, .container-assign, .container-maintenance, .container-resale, .container-receive, .container-show, .container-log, .container-download, .container-upload, .container-modify, .container-modify-detail, .container-change-password, .container-show, .container-alert, .container-confirm, .container-renewal, .container-done{
  position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.3);z-index:99;display:none;
  overflow-y: auto;
}

.container-assign, .container-maintenance, .container-resale, .container-receive, .container-show, .container-log, .container-modify, .container-download, .container-upload, .container-modify-detail, .container-change-password, .container-show, .container-confirm, .container-renewal, .container-done{
  z-index:9;
}

#tblItems tr td{
  border:1px solid #bcbcbc;
  min-width:200px;
}

.side-preview{
  display:none;
}

.side-component{
  display:none;
}

.container-load{
  z-index:99;
}

.container-alert{
  z-index:99;
}

.container-load .box-load{
  width:200px;height:100px;margin:auto;background-color:#fff;border-radius:5px;
}

.container-load .box-load .content-load{
  height:100%;padding:20px;position:relative;display:flex;
}

.container-assign .box-modify, .container-maintenance .box-modify, .container-resale .box-modify, .container-receive .box-modify, .container-show .box-modify, .container-log .box-modify, .container-download .box-modify, .container-upload .box-modify, .container-modify .box-modify, .container-modify-detail .box-modify, .container-show .box-show, .container-renewal .box-renewal, .container-done .box-done, .container-change-password .box-change-password{
  min-width:300px;margin:auto;background-color:#fff;border-radius:5px;
}

.box-show p{
  font-size:11px;
}

.btn-primary:hover{
  background-color: #47618a !important;
  border-color: #47618a !important;
}

.btn-primary:focus{
  background-color: #47618a !important;
  border-color: #47618a !important;
}

.btn-primary{
  border-color: #47618a !important;
}

.notif-calendar{
  position: relative;
  color: rgba(255,255,255,0.6);
  display: block !important;
  padding: 3px 6px;
  font-size: 6.5px;
}

.notif-point{
  position: absolute;
  top: 0;
  right: 0;
  /*font-size: 7px;*/
  width: 100% !important;
  color: #fff;
  height: 10px !important;
  /* padding: 1px 3px; */
  /* border-radius: 3px; */
  text-align: right;
  display: block !important;
}

.task-list{
  padding:0px 50px;
}

.list_log li p{
  font-size:12px;
  padding:0;
  margin:0;
}

.tbl-header-asset th{
  vertical-align: top !important;
}

.img-template{
  background-image: url('../../assets/img/template.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.li{
  display:none;
}

.container-assign .box-modify, .container-maintenance .box-modify .content-modify, .container-resale .box-modify .content-modify, .container-receive .box-modify .content-modify, .container-show .box-modify, .container-log .box-modify, .container-download .box-modify, .container-upload .box-modify, .container-modify .box-modify .content-modify, .container-modify-detail .box-modify .content-modify, .container-change-password .box-change-password .content-change-password, .container-show .box-show .content-show, .container-renewal .box-renewal .content-renewal, .container-done .box-done .content-done{
  min-height:200px;padding:20px;position:relative;display:flex;
}

.content-title, .content-form{
  width:100%;
}

.content-title{
  padding-bottom:20px;
}

.content-title h4, .content-title span{
  font-size:13px;
  margin:0px;
  padding:0px;
}

.content-title h4{
  font-size:16px;
}

.content-title span{
  font-size:12px;
}

.form-text{
  font-size:12px;
}

.container-alert .box-alert{
  width:40%;margin:auto;background-color:#fff;border-radius:5px;
}

.container-alert .box-alert .content-alert{
  padding:20px;position:relative;display:flex;
}

.container-alert .box-alert h4{
  margin:3px 0px;
  padding:0px;
  font-size:14px;
}

.container-alert .box-alert span{
  font-size:11px;
}

.container-confirm .box-confirm{
  width:40%;margin:auto;background-color:#fff;border-radius:5px;
}

.container-confirm .box-confirm .content-confirm{
  padding:20px;position:relative;display:flex;
}

.container-confirm .box-confirm h4{
  margin:3px 0px;
  padding:0px;
  font-size:14px;
}

.container-confirm .box-confirm span{
  font-size:11px;
}

.box-dashboard-assets{
  border:1px solid #e9e9e9;
  border-radius:5px;
  padding:10px;
  background-color:#fff;
  margin-bottom:20px;
}

.highcharts-credits{
  display:none;
}

.highcharts-title{
  font-size:18px !important;
  font-family: system-ui !important;
  font-weight: 600 !important;
}

.box-dashboard-assets .content{
  padding:10px;
  background-color:#e7e7ff !important;
  border-radius:5px;
  width:fit-content;
}

.box-dashboard-assets h3{
  color:#555;
  margin-top:10px;
  font-size:18px !important;
}

.box-dashboard-assets  p{
  font-size:12px !important;
  color:#555;
}

.box-dashboard-assets span{
  font-size:9px !important;
  color:#555;
  background-color:#c9c9c9;
  border-radius:20px;
  padding:5px 7px;
  margin:2px;
  display:inline-block;
}

.timeline{
  height: 100%;
  width:2px;
  position:absolute;
  top:0;
  left: 170px;
  background-color: rgba(71, 97, 138, 1);
}

.box-timeline{
  top: -35px;
  position: absolute;
  left: -48px;
  width: max-content;
  font-size: 11px;
  font-weight: 400;
  padding: 5px 10px;
  border: 2px dashed #47618a;
  border-radius: 5px;
}

.list_log{
  padding:0;
  margin:0;
  list-style:none;
}

#circle {
  background-color: rgba(71, 97, 138, 1);
  border-radius: 50%;
  width: 15px;
  height: 15px;
  position: absolute;
  left: 163.7px;
  z-index: 9;
  display: flex;
  margin-top:10px;
}

#circle2 {
  background-color: #fff;
  border-radius: 50%;
  width: 11px;
  height: 11px;
  left: 163.7px;
  z-index: 9;
  margin: auto;
}

.box-date-log{
  max-width: 95px;
  left: 50px;
  top: 0;
  position: absolute;
  padding: 5px 10px;
  background: aliceblue;
  border-radius: 5px;
  font-size:10px;
  color:#555;
}

.box-date-log span{
  font-size: 12px;
  display: block;
}

.box-log{
  margin-left: 200px;
  margin-right: 50px;
  padding: 5px 10px;
  border-radius: 5px;
  margin-top: 25px;
  margin-bottom: 25px;
  background-color: rgba(71, 97, 138, 1);
  color:#fff;
  display: block;
}

.green{
  background-color:#4ca896;
}

.red{
  background-color:#cd6464;
}

.blue{
  background-color:#4f7dc8;
}

.btn-primary:hover{
  background-color: #4f7dc8;
}

@keyframes ldio-xlmturwpz9m {
    0%    { transform: translate(2px,2px) }
   33.33% { transform: translate(90px,2px) }
   66.66% { transform: translate(42px,90px) }
   100%    { transform: translate(2px,2px) }
}


.ldio-xlmturwpz9m > div {
  transform: scale(0.7);
  transform-origin: 100px 100px;
}

.ldio-xlmturwpz9m > div > div {
  animation: ldio-xlmturwpz9m 1s linear infinite;
  position: absolute;
}

.ldio-xlmturwpz9m > div > div div:nth-child(1) {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 7px solid #555;
  background: transparent;
}

.ldio-xlmturwpz9m > div > div div:nth-child(2) {
  width: 8px;
  height: 30px;
  transform: rotate(-45deg);
  background: #555;
  border-radius: 0 0 8px 8px;
  position: absolute;
  top: 27px;
  left: 40px;
}

.loadingio-spinner-magnify-219wwy95rpq {
  width: 100%;
  height: 200px;
  display: inline-block;
  overflow: hidden;
  background: transparent;
}
.ldio-xlmturwpz9m {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(0.5);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
  z-index: 9;
}

.ldio-xlmturwpz9m div { box-sizing: content-box; }
/* generated by https://loading.io/ */

.form-label{
  width:100%;
  font-size: 11px;
  margin-bottom: 3px;
}

.form-control-sm{
  font-size:11px;
}

.btn-sm {
    font=size: 12.5px;
    font-weight: normal;
    font-family: calibri;
    border-radius: 5px;
    border: 0;
}

.option{
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  position: absolute;
  /*top: 0 !important;*/
  margin-top:-25px !important;
  right: 55px !important;
  background-color: #fff;
  display: none;
}

.option, .option li{
  list-style:none;
  padding:0;
  margin:0;
  width: 110px;
  z-index:9;
}

.option li a{
  padding: 10px 13px;
  text-decoration: none;
  cursor: pointer;
  font-size: 11px;
  color: #666;
  display: block;
}

.option li a i{
  color:#555;
}

.btn-option:hover + ul, .btn-option + ul:hover{
  display:block !important;
  transition: 0.5s all;
  cursor:pointer;
  right:43px !important;
}

.btn-option + ul a:hover, .btn-option + ul a:hover i{
  color:#6282b4;
}

.btn-option + ul a:hover{
  border-left:2px solid #6282b4;
}

@media only screen and (max-width: 767px) {
  .nav-top-left{
    display:none !important;
  }

  .box-search{
    display:none !important;
  }

  .logo-img{
    width:40%;
  }

  .nav-top-right{
    width:60%;
  }

  .nav-bottom-left{
    display:none;
  }

  .content-remainder{
    display:none;
  }

  .content-workbook{
    width:100%;
  }

  .box-login{
    width:100%;
    max-width: none;
    min-width: auto !important;
  }
}

.sub-left{
  font-size:11px;
  padding:0;
  margin:0;
  text-align:left;
}

.sub-right{
  font-size:11px;
  padding:0;
  margin:0;
  text-align:right;
}

.title-left{
  text-align:left;
}

.title-right{
  text-align:right;
}

#barcode img, #barcode_detail img{
  width:100%;
}

#barcode_detail img{
  padding-bottom:20px;
}


@media print{
  .title-preview{
    font-size:14px;
    font-weight: bold;
  }

  .row .col-md-6{
    width:50%;
  }

  .row .col-md-4{
    width:30%;
  }

  .row .col-md-2{
    width:20%;
  }

  .sub-left{
    font-size:11px;
    padding:0;
    margin:0;
    text-align:left;
  }

  .sub-right{
    font-size:11px;
    padding:0;
    margin:0;
    text-align:right;
  }

  .title-left{
    text-align:left;
  }

  .title-right{
    text-align:right;
  }

  #barcode img{
    width:100%;
  }

  #barcode_detail img{
    width:100% !important;
    margin:auto !important;
    padding:0 !important;
    /* margin:0 !important; */
    text-align: center !important;
  }

  #barcode_detail{
    /* margin:auto; */
    width:65% !important;
    /* padding:10px; */
    /* text-align: center;
    box-shadow:none !important;
    border:0 !important; */
  }

  #detail_asset{
    position: inherit !important;
  }

  body{
    visibility: hidden;
  }

  .box-modify{
    width:100% !important;
    padding:0;
    margin:0;
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
  }

  #box-barcode{
    width:100% !important;
    padding:10px !important;
    margin:0 !important;
    visibility: visible !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    text-align:center;
  	z-index:999;
  }

  .btn-optional-print{
    display:none;
  }

  .box-modify .content-modify{
    padding:0;
    margin:0;
  }

  .box-modify .content-modify .preview{
    padding:0;
    margin:0;
  }
}