h3{
    font-size: 30px;
    font-weight: 500;
}
.truck-switch-d4{
    background-color: #E9FFDB;
    text-align: center;
    border-radius: 1000px;
    gap: 10px;
    height: 26px;
    width: 125px;

}
.truck-switch-d4 .name{
    color: #10CF49;
    font-size: 14px;
    font-weight: 500;
    line-height: 16.94px;
    letter-spacing: -0.001em;
    text-align: center;
    height: 17px;
    width: 125px;

}
.form-group label{
    font-size: 17px;
    line-height: 16.94px;
    letter-spacing: -0.001em;
    color: #2F3135;

}
.truck_form_select{
    width: 270px;
    background-color: #f3f4f5;
    border: 1px solid #EAEAEA;
    border-radius: 6px;
    height: 40px;
}
.datepicker table tr td.day {
    color: #3e748c;
    font-weight: bold;
}
.datepicker table tr td.disabled, .datepicker table tr td.disabled:hover {
   color: #999;
   font-weight: normal;
}
.datepicker.dropdown-menu {
   padding:15px 20px 20px 20px!important;
   border: 1px solid #ddd!important;
   -webkit-border-radius: 3px!important;
   border-radius: 3px!important;
   box-shadow: 0 12px 35px 2px rgba(0, 0, 0, 0.12)!important;
}
.datepicker-dropdown:before {
   border-bottom: 7px solid #ddd!important;
   border-bottom-color: #ddd!important;
}
.datepicker-dropdown.datepicker-orient-bottom:before {
   border-bottom: 0!important;
   border-top: 7px solid #ccc!important;
}
.pt-3{
   color: #535353;
   padding-top: 12px;
   padding-bottom: 18px;
   padding-right: 14px;
   padding-left: 14px;
   gap: 14px;
   border: 1.5px;
   border-radius: 20px;
   width: 24px;
   height: 24px;
}
h2, h1, h4, h5 {
   color: #2F3135;
}
p{
   color: #666666;
   font-weight: 500;
}
.card-body p{
   font-size: 18px;
   font-weight: 500;
}
.col-md-6 .card{
   border: 1px; 
   border-radius: 20px;
   padding-top: 12px;
   padding-right: 14px;
   padding-bottom: 18px;
   padding-left: 14px;
   gap: 14px;
   background-color: #FFFFFF;
   box-shadow: 0px 0px 10px 10px #f4f5f5;
   margin-bottom: 20px;

}
.mvt-5 p{
   color: #666666;
   font-weight: 500;
   font-size: 20px;
}
.mvt-10{
   text-align: center;
   padding-top: 32px;
   padding-bottom: 32px;
   gap: 6px;
}
.card-img{
   text-align: center;
}
.card-img img{
   height: 230px;
   width: 320px;
}
.checkbox-round{
   width: 24px;
   height: 24px;
   border-radius: 50px;
   background-color: white;
   vertical-align: middle;
   border: 1px solid #ddd;
   appearance: none;
   -webkit-appearance: none;
   outline: none;
   cursor: pointer;
}
.checkbox-round:checked{
   background-color: gray;
}
.mt-3 button{
   display: inline-block;
   width: 190px;
   padding: 10px;
   background: #FF6800;
   color: #FFFFFF;
   font-size: 18px;
   border: none;
   transition: all .2s ease-in-out;
   outline: none;
   border-radius: 8px;
}
.available-dates{
   background-color: #E9FFDB;
   text-align: center;
   border-radius: 1000px;
   gap: 10px;
   height: 26px;
   width: 125px;
}

.bg-success{
   color: #10CF49;
   font-size: 14px;
   font-weight: 500;
   line-height: 16.94px;
   letter-spacing: -0.001em;
   text-align: center;
   height: 17px;
}
.available-d{
   background-color: #f1e5e1;
   text-align: center;
   border-radius: 1000px;
   gap: 10px;
   height: 26px;
   width: 125px;
}
 
.bg-danger-d{
   color: red;
   font-size: 14px;
   font-weight: 500;
   line-height: 16.94px;
   letter-spacing: -0.001em;
   text-align: center;
   height: 17px;

}
.check-una.checked {
   border: 2px solid red !important;
   transition: border-color 0.3s ease;
}
.availability-dates {
   display: none;
}
.add-vehicle-form,
.add-store-form-container,
.add-receipt-container{
   background: #315CC0;
}
.add-store-form-container .form-group,
.add-vehicle-form form .form-group,
.add-receipt-container .form-group{
   margin-bottom: 20px;
}
.add-receipt-container .form-label,
.add-vehicle-form form .form-label,
.add-store-form-container .form-label{
   font-weight: 500;
   font-size: 18px;
}
.add-receipt-container .top-section{
   padding: 20px 0;
}
.add-vehicle-form .heading,
.add-receipt-container .top-section .heading{
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 20px;
}
.add-vehicle-form .heading button,
.add-receipt-container .top-section .heading button{
   display: inline-block;
   width: 150px;
   padding: 8px 5px;
   background-color: #FFFFFF;
   border-radius: 5px;
   color: #315CC0;
}
.add-receipt-container .top-section .form-group .form-input.relative{
   position: relative;
}
.add-receipt-container .top-section .form-group .form-input.relative button{
   position: absolute;
   right: 0;
   top: 0;
   border: transparent;
   height: 100%;
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;
}
.add-receipt-container .top-section .form-group .form-input.relative button a{
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}
.add-store-form-container .form-container,
.add-receipt-container .last-section{
   padding: 20px;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   background-color: #FFFFFF;
}
.add-store-form-container .form-container .form-group .form-control,
.add-vehicle-form form .form-group .form-control,
.add-receipt-container .last-section .form-group .form-select,
.add-receipt-container .last-section .form-group .form-control{
   border: 1px solid #333333;
   border-radius: 0;
   height: 55px;
}
.add-receipt-container .last-section .form-group .form-input-price{
   display: flex;
}
.add-receipt-container .last-section .form-group .form-input-price span{
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 10px;
   font-size: 21px;
   color: #666666;
   font-weight: 500;
   border: 1px solid #333333;
   border-right: none;
}
.add-store-form-container form button[type="submit"],
.add-vehicle-form form button[type="submit"],
.add-receipt-container form button[type="submit"]{
   width: 100%;
   padding: 10px;
   background: #315CC0;
   color: #FFFFFF;
   font-size: 18px;
   border: none;
   transition: all .2s ease-in-out;
   outline: none;
}
.add-receipt-container form .image-label{
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 13px;
   height: 55px;
   font-size: 15px;
   border: 1px solid #333333;
   color: #666666;
}
.add-receipt-container .last-section .form-group .form-flex{
   display: flex;
   align-items: center;
   justify-content: space-between;
   border: 1px solid #333333;
   padding: 8px;
}
.add-receipt-container .last-section .form-group .form-flex label{
   color: #666666;
}
.add-receipt-container .last-section .form-group .form-flex label,
.add-receipt-container .last-section .form-group .form-flex div{
   width: 32%;
}
.add-receipt-container .last-section .form-group .form-flex .form-control{
   height: 35px;
}
.add-vehicle-form .form-header,
.add-receipt-container .form-header{
   color: #FFFFFF;
}
/* add vehicle styling */
.add-vehicle-form .inner{
   padding: 20px;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   background-color: #FFFFFF;
}
.add-vehicle-form .inner .form-group.flex-input{
   display: flex;
   gap: 5px;
}
.add-vehicle-form .inner .form-group.flex-input .form-input{
   width: 40%;
}
.add-vehicle-form .inner .form-group.flex-input .date-input{
   width: 60%;
   display: flex;
}
.add-vehicle-form .inner .form-group.flex-input .date-input div{
   width: 50%;
}
.add-vehicle-form .inner .form-group.flex-input span{
   font-weight: 500;
   font-size: 17px;
   color: #333333;
}

/* receipt hostory styling */
.accounting-document-history .main-content{
   padding: 15px;
   background-color: #FFFFFF;
}
.accounting-document-history .menu-bar{
   background-color: #f4f5f6;
   padding: 10px;
   border: 1px solid rgba(0, 0, 0, 0.2);
   margin-bottom: 10px;
}
.accounting-document-history .main-content .nav-section{
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.accounting-document-history .main-content .btn-section ul,
.accounting-document-history .menu-bar ul{
   margin-bottom: 0;
}
.accounting-document-history .menu-bar ul li{
   display: inline-block;
   width: 120px;
}
.accounting-document-history .menu-bar ul li button{
   width: 100%;
   text-align: center;
   border: 1px solid #FFFFFF;
   padding: 3px;
   color: #ffffff;
   background-color: #315CC0;
}
.accounting-document-history .menu-bar ul li button a{
   color: #FFFFFF;
   display: inline-block;
   width: 100%;
}
.accounting-document-history .menu-bar ul li.active button{
   background-color: #FFFFFF;
   border: 1px solid #315CC0;
   color: #315CC0;
}
.accounting-document-history .menu-bar ul li.active button a{
   color: #315CC0;
}
.accounting-document-history .menu-bar ul li button:hover{
   background-color: #FFFFFF;
   border: 1px solid #315CC0;
}
.accounting-document-history .menu-bar ul li button:hover a{
   color: #315CC0;
}
.accounting-document-history .main-content .top-bar .form-section{
   margin-top: 10px;
}
.accounting-document-history .main-content .top-bar .form-section ul.filter-list{
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
}
.accounting-document-history .main-content .top-bar .form-section ul.filter-list li{
   flex-basis: calc(25% - 5px);
}
.accounting-document-history .main-content .top-bar .form-section form .form-group-date{
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 10px;
}
.add-receipt-container .form-group.relative,
.add-store-form-container .form-group.relative,
.accounting-document-history .main-content .top-bar .form-section ul.filter-list .form-group.relative{
   position: relative;
}
.accounting-document-history .main-content .top-bar .form-section ul.filter-list .form-group.relative{
   margin-bottom: 10px;
}
.add-receipt-container .form-group.relative .dropdown,
.add-store-form-container .form-group.relative .dropdown,
.accounting-document-history .main-content .top-bar .form-section ul.filter-list .form-group.relative .dropdown{
   position: absolute;
   width: 100%;
   display: none;
   max-height: 250px;
   border: 1px solid #f4f5f6;
   overflow-y: auto;
   margin-top: 5px;
   left: 0;
   z-index: 10;
   background-color: #FFFFFF;
}
.add-receipt-container .form-group.relative .dropdown,
.add-store-form-container .form-group.relative .dropdown{
   border: 1px solid rgba(51, 51, 51, 0.4);
}
.add-receipt-container .form-group.relative .dropdown ul,
.add-store-form-container .form-group.relative .dropdown ul{
   margin-bottom: 0;
}
.add-receipt-container .form-group.relative .dropdown ul li,
.add-store-form-container .form-group.relative .dropdown ul li,
.accounting-document-history .main-content .top-bar .form-section ul.filter-list .form-group.relative .dropdown ul li{
   padding: 5px 10px;
   border-bottom: 1px solid #f4f5f6;
   font-size: 14px;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 15px;
   justify-content: space-between;
   color: #666666;
}
.add-receipt-container .form-group.relative .dropdown ul li:hover,
.add-store-form-container .form-group.relative .dropdown ul li:hover{
   background-color: #333333;
   color: #ffffff;
}
.accounting-document-history .main-content .top-bar .form-section ul.filter-list .form-group.relative .dropdown ul li input[type="checkbox"]{
   width: 18px;
   height: 18px;
}
.accounting-document-history .main-content .top-bar .form-section ul.filter-list .form-group .action-btns{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   padding: 0 10px;
   margin: 10px 0;
}
.accounting-document-history .main-content .top-bar .form-section ul.filter-list .form-group .action-btns button{
   flex-basis: calc(45% - 10px);
   border: none;
   outline: none;
   background-color: #DEF2D7;
   color: #5B7052;
}
.accounting-document-history .main-content .top-bar .form-section ul.filter-list .form-group .action-btns button:first-child{
   background-color: #ECC8C5;
   color: #AB3331;
}
.accounting-document-history .main-content .top-bar .form-section ul.filter-list .form-group.relative .dropdown ul li.selected{
   background-color: #DEF2D7;
   color: #000000;
}
.accounting-document-history .main-content .top-bar .form-section form .flex-group{
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 15px;
}
.accounting-document-history .main-content .top-bar .form-section form .flex-group .form-group-select .select-drop-down{
   position: relative;
}
.accounting-document-history .main-content .top-bar .form-section form .flex-group .form-group-select .select-drop-down .display{
   display: flex;
   align-items: center;
   width: 100%;
   padding: 6px 5px;
   justify-content: space-between;
   border: 1px solid rgba(0, 0, 0, 0.12);
}
.accounting-document-history .main-content .top-bar .form-section form button[type="submit"]{
   background-color: #315CC0;
   color: #ffffff;
   border: none;
   outline: none;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 6.5px 10px;
}
.accounting-document-history .main-content .top-bar .form-section form button[type="submit"]:hover{
   background-color: #ffffff;
   border: 1px solid #1E2761;
   color: #1E2761;
}
.accounting-document-history .main-content .top-bar .form-section form .form-select,
.accounting-document-history .main-content .top-bar .form-section form .form-control{
   height: 40px;
   border-radius: 0;
}
.accounting-document-history .main-content .btn-section ul li{
   display: inline-block;
}
.accounting-document-history .main-content .btn-section ul li button{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   width: 100%;
   border-radius: 5px;
   padding: 5px 10px;
}
.accounting-document-history .main-content .btn-section ul li button img{
   height: 12px;
   width: 12px;
}
.accounting-document-history .main-content .btn-section .dt{
   background: #F8F9F8;
   border-color: #E1E4E3;  
   color: #000000;
}
.accounting-document-history .main-content .btn-section .dt:hover{
   background-color: #1E90FF;
   color: #fff;
}
.accounting-document-history .main-content .btn-section .dytx{
   background: #1E90FF14;
   border-color: #1E90FF;  
   color: #1E90FF;
}
.accounting-document-history .main-content .btn-section .dytx:hover{
   background-color: #1E90FF; 
   color: #fff;
}
.accounting-document-history .main-content .table-section{
   margin-top: 15px;
}
.accounting-document-history .main-content .table-section tr th{
   color: #FFFFFF;
   font-weight: 500;
}
.accounting-document-history .main-content #store-history .table-section tr th{
   background-color: #021C1E;
}
.accounting-document-history .main-content #receipt-history .table-section tr th{
   background-color: #004445;
}
.accounting-document-history .main-content #vehicle-history .table-section tr th{
   background-color: #2C7873;
}
.accounting-document-history .table-section span{
   display: inline-block;
}
.accounting-document-history .table-section span.warranty,
.table-section span.date{
   width: 100px;
}
.accounting-document-history .table-section span.store-name{
   width: 170px;
}
.accounting-document-history .table-section span.invoice,
.accounting-document-history .table-section span.part-name,
.accounting-document-history .table-section span.total{
   width: 90px;
}
.accounting-document-history .table-section span.email,
.accounting-document-history .table-section span.name,
.accounting-document-history .table-section span.location{
   width: 190px;
}
.accounting-document-history .table-section span.action{
   width: 235px;
}
.accounting-document-history .table-section div.action a{
   padding-left: 5px;
   padding-right: 5px;
}
.accounting-document-history .table-section div.action a:hover{
   background-color: #333333;
   color: #FFFFFF;
}
.accounting-document-history .table-section div.action span i{
   font-size: 12px;
}
.accounting-document-history .table-section span.street-number,
.accounting-document-history .table-section span.street-name,
.accounting-document-history .table-section span.phone,
.accounting-document-history .table-section span.zipcode,
.accounting-document-history .table-section span.state,
.accounting-document-history .table-section span.city,
.accounting-document-history .table-section span.v-mileage,
.accounting-document-history .table-section span.v-number,
.accounting-document-history .table-section span.v-model,
.accounting-document-history .table-section span.v-brand{
   width: 120px;
}
.accounting-document-history .table-section span.v-vin{
   width: 190px;
}
.accounting-document-history .table-section span.engine{
   width: 160px;
}
.transaction-image-overlay{
   position: fixed;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 70%;
   height: 600px;
   display: none;
   background-color: #ffffff;
   z-index: 50;
}
.transaction-image-overlay img{
   width: 100%;
   height: 100%;
}

/* transaction document detail */
.transaction-document-detail{
   background-color: #f4f5f6;
}
.transaction-document-detail .heading{
   background-color: #021C1E;
   padding: 10px;
}
.transaction-document-detail .heading h5{
   color: #ffffff;
}
.transaction-document-detail .main-content{
   padding: 20px;
   background-color: #ffffff;
   margin-top: 10px;
}
.transaction-document-detail .main-content .detail-box{
   padding: 5px 0;
   border-bottom: 1px dotted rgba(102, 102, 102, 0.4);
}
.transaction-document-detail .main-content .detail-box p{
   margin-bottom: 0;
   font-size: 18px;
   display: flex;
   justify-content: space-between;
}
.transaction-document-detail .main-content .detail-box p span:not(.bold){
   font-weight: 400;
}
.transaction-document-detail .main-content .detail-box .box-collapse{
   margin-top: 10px;
   padding: 8px;
}
.transaction-document-detail .main-content .detail-box .main-box{
   padding: 5px 10px;
}
.transaction-document-detail .main-content .second-layer .detail-box .main-box:hover{
   background-color: #021C1E;
   cursor: pointer;
}
.transaction-document-detail .main-content .second-layer .detail-box .main-box:hover p{
   color: rgba(255, 255, 255, 0.9);
}
.transaction-document-detail .main-content .second-layer .box-collapse{
   display: none;
}
.transaction-document-detail .main-content .second-layer .box-collapse p{
   padding: 5px 0;
}
.transaction-document-detail .main-content .second-layer .box-collapse p:first-child{
   border-bottom: 1px solid rgba(102, 102, 102, 0.4);
}
.transaction-document-detail .main-content .second-layer .box-collapse p:last-child{
   padding-bottom: 0;
}
@media only screen and (max-width:1199px){
.accounting-document-history .main-content .top-bar .form-section form .form-control,
.accounting-document-history .main-content .top-bar .form-section form .form-select,
.accounting-document-history .main-content .top-bar .form-section form button{
   font-size: 14px;
}
}

@media only screen and (max-width:991px) {
   .accounting-document-history .main-content .top-bar{
      display: block;
   }
   .accounting-document-history .main-content .btn-section{
      width: 100%;
   }
   .accounting-document-history .main-content .top-bar .form-section{
      width: 100%;
   }
}

@media only screen and (max-width:767px) {
   #store-form{
      width: 80%;
   }
   .add-vehicle-form .inner .form-group.flex-input .form-control{
      height: 45px;
   }
   .transaction-image-overlay{
      width: 90%;
   }
   .accounting-document-history .main-content .top-bar .form-section ul.filter-list li{
      flex-basis: calc(50% - 5px);
   }
   .accounting-document-history .main-content .btn-section ul{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
   }
   .accounting-document-history .main-content .btn-section ul li{
      flex-basis: calc(33.3% - 2px);
   }
   .accounting-document-history .main-content .btn-section ul li button{
      font-size: 14px;
      justify-content: center;
      align-items: center;
      gap: 20px;
   }
   .accounting-document-history .menu-bar ul{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
   }
   .accounting-document-history .menu-bar ul li{
      flex-basis: calc(25% - 2px);
   }
}

@media only screen and (max-width:575px) {
   .mt-3 button[type=submit] {
      width: 100%;
   }
   .accounting-document-history .main-content .btn-section ul li button{
      font-size: 12px;
   }
   .accounting-document-history .main-content .nav-section{
      flex-direction: column;
      align-items: flex-start;
   }
   .accounting-document-history .main-content .nav-section .text-nowrap{
      margin-bottom: 15px;
   }
   .transaction-document-detail .main-content{
      padding: 10px 10px 20px 10px;
   }
}

@media (max-width:495px) {
   .add-vehicle-form .inner{
      padding: 20px 10px;
   }
   #store-form{
      width: 95%;
   }
   .accounting-document-history .main-content .top-bar .form-section ul.filter-list .form-group.relative,
   .accounting-document-history .main-content .top-bar .form-section form .form-group-date{
      margin-bottom: 15px;
   }
   .accounting-document-history .main-content .top-bar .form-section ul.filter-list li{
      flex-basis: 100%;
   }
   .accounting-document-history .main-content .top-bar .form-section ul.filter-list .form-group .action-btns button{
      padding: 5px;
   }
   .accounting-document-history .main-content{
      padding: 15px 10px;
   }
   .add-vehicle-form .inner .form-group.flex-input span{
      font-size: 14px;
   }
   .accounting-document-history .main-content .btn-section ul li{
      flex-basis: calc(50% - 5px);
   }
   .accounting-document-history .main-content .top-bar .form-section form .flex-group .form-group-select .select-drop-down .drop-down .action button{
      padding: 5px;
   }
   .transaction-document-detail .main-content .detail-box p{
      font-size: 16px;
   }
}

@media (max-width:455px) {
   .accounting-document-history .main-content .top-bar .form-section form .flex-group{
      display: block;
   }
   .accounting-document-history .main-content .top-bar .form-section form .flex-group .form-group-select,
   .accounting-document-history .main-content .top-bar .form-section form .flex-group .form-group-input{
      margin-bottom: 15px;
   }
   .accounting-document-history .main-content .top-bar .form-section form .flex-group .form-group-select .select-drop-down .display,
   .accounting-document-history .main-content .top-bar .form-section form .flex-group .form-group-select .select-drop-down .drop-down .check{
      padding-left: 15px;
      padding-right: 15px;
   }
   .accounting-document-history .main-content .top-bar .form-section form .flex-group .form-group-select .select-drop-down .drop-down,
   .accounting-document-history .main-content .top-bar .form-section form .flex-group .form-group-btn,
   .accounting-document-history .main-content .top-bar .form-section form .flex-group .form-group-select,
   .accounting-document-history .main-content .top-bar .form-section form .flex-group .form-group-input{
      width: 100%;
   }
}

@media only screen and (max-width:352px) {
   .accounting-document-history .main-content .btn-section ul li button{
      font-size: 12px;
   }
}
@media (max-width: 430px) {
   .truck_form_select{
      width: 100%;
   
   }
}

@media (max-width: 375px) {
   .truck_form_select{
      width: 100%;
   }
   .add-vehicle-form .inner .form-group.flex-input .form-control,
   .add-vehicle-form .inner .form-group.flex-input .form-control::placeholder{
      font-size: 13px;
   }
   .add-receipt-container .last-section .form-group .form-flex label,
   .add-receipt-container .last-section .form-group .form-flex .form-control{
      font-size: 14px;
   }
   .accounting-document-history .menu-bar ul li button{
      font-size: 16px;
   }
   .transaction-document-detail .main-content .detail-box p{
      font-size: 14px;
   }
}

@media (max-width:355px) {
   .add-vehicle-form .inner .form-group.flex-input span{
      font-size: 12px;
   }
   .add-vehicle-form .inner .form-group.flex-input .form-control,
   .add-vehicle-form .inner .form-group.flex-input .form-control::placeholder{
      font-size: 11px;
   }
   .accounting-document-history .main-content .btn-section ul li{
      flex-basis: calc(50% - 2px);
   }
   .accounting-document-history .main-content .btn-section ul li button{
      font-size: 10px;
   }
}
@media only screen and (max-width:322px) {
   
}
@media screen and (min-width:768px) and (max-width:991px) {
   .accounting-document-history .main-content .top-bar .form-section ul.filter-list li{
      flex-basis: calc(33.3% - 5px);
   }
}