/* CSS Document */
.card-header .fa{
  font-size:18px;
}
.fa{
  font-family: fontawesome;
}
.sidebar-brand-full{
  width:100%;
  height: auto;
  padding:0px 40px;
}
.tab-content{
  background-color:#fafafa;
}
.table-responsive{
  min-height:500px;
}
#toast_message_box {
  z-index: 10000;
  max-width: 80%;
  margin: 0 auto;
  text-align: center;
  position: fixed;
  bottom: -100px;
  padding: 10px 15px;
  background-color: #0000007a;
  color: #fff;
  border-radius: 5px;
  transform: translateX(-50%);
  transition: all 0.25s;
  left: 50%;
}
#toast_message_box.show{
  bottom:50px;
}
/*Right Modal Start*/
.modal.right .modal-header{
  padding:10px;
}
.modal.right .modal-dialog{
  right: 0px;
  position: fixed;
  top: 0px;
  height: 100vh;
  max-height: 100vh;
  margin: 0px;
  min-width:400px;
}
.modal.right .modal-content{
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  height:100%;
}
.modal.right .modal-body{
  background-color: #f1f4f8;
  max-height: calc(100% - 140px);
  overflow-y: scroll;
}
.modal.right .section-title{
  font-size: 18px;
  margin-bottom: 10px;
  color:#333;
}
.modal.right .modal-header-title{
  font-size:24px;
  color:#333;
}
.modal.right .section-info-box {
  display: flex;
  margin-bottom: 10px;
}
.modal.right .section-info-label {
  color: #999;
}
.modal.right .section-info-label,
.modal.right .section-info-value {
  display:block;
  font-size: 14px;
  flex: 1 0 50%;
}
/*Right Modal End*/
/*Product Box Start*/
.product-box{
  border:1px solid #e1e1e1;
  border-radius:5px;
  padding:15px;
  display:flex;
  background-color:white;
  margin-bottom:5px;
}
.product-img-box{
  width:70px;
  height:70px;
  border-radius:5px;
  overflow: hidden;
}
.product-img{
  width:100%;
  height:100%;
  object-fit: cover;
}
.product-checkbox{
  flex:0 0 50px;
  text-align: center;
  align-self:center;
}
.product-details{
  flex-grow:1;
  margin-left:5px;
}
.product-title{
  font-size:16px;
  font-weight: bold;
  margin-bottom:3px;
}
/*Product Box End*/
@media (max-width: 576px) {
  .modal.right .modal-dialog{
    width:100%;
  }
}
/*
a{
  text-decoration:none !important;
}
a:hover{
  text-decoration:underline!important;
}*/

.topup-summary-wrapper{
  display:flex;
  padding:0px 0px 20px 0px;
}
.topup-summary-col{
  flex:1 0 auto;
  font-size:14px;
  color:#666;
}
.topup-summary-col > div{
  margin:5px 0px;
}
.topup-summary-col.value{
  color:#333;
  font-weight: bold;
}
.topup-section-box{
  margin-bottom:25px;
}
.topup-section-title{
  font-size:18px;
  font-weight: bold;
  margin-bottom:10px;
}
.modal-dismiss-btn{
  margin:0 auto;
  display: block;
  text-align: center;
  margin-top: 8px;
  font-size: 14px;
  color: #999 !important;
}
.vehicle-details-wrapper{
  margin-top:10px;
}
.vehicle-info-box{
  display:flex;
  margin-bottom:10px;
}
.vehicle-info-label,
.vehicle-info-value{
  font-size:14px;
  flex:1 0 50%;
}
.vehicle-info-label{
  color:#999;
}
.project-uploaded-file-box {
/*
  padding: 10px;
  margin-top: 10px;
*/
}
.project-uploaded-file-box-item{
  background-color:white;
  border-radius:5px;
  padding:10px;
  margin-bottom:5px;
}
.modal-loading{
  position:relative;
  min-height:100vh;
}
.modal-loading .loading-icon{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.status-histories{
  list-style: none;
  margin:0px;
  padding:0px;
  background-color:white;
  border-radius:5px;
}
.status-histories li{
  padding:10px 0px;
}
.status-histories li:not(:last-child){
  border-bottom:1px solid #fafafa;
}
.status-circle{
  display:flex;
  position:relative;
  flex: 0 0 10%;
  justify-content: center;
  align-self: center;
}
.status-circle.active::before{
  background-color:green; 
}
.status-circle::before{
  content:"";
  display:block;
  width:12px;
  height:12px;
  border-radius:50%;
  background-color:#e1e1e1;
}
.status-details-box{
  margin:0px 10px;
  flex:1 0 auto;
}