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;
}
/* ledger-form */
.ledger-form{
   background: #f4f5f6;
}
.ledger-form .line-through{
   width: 100%;
   height: 2px;
   background: #6e8898ff;
}
.document-application-confirmation-page .section-header,
.document-application-form .section-header,
.ledger-form .section-header{
   background-color: #6e8898ff;
   padding: 10px;
   margin-bottom: 20px;
}
.document-application-confirmation-page .section-header{
   margin-bottom: 0px;
}
.document-application-confirmation-page .section-header h5,
.document-application-form .section-header h5,
.ledger-form .section-header h5{
   margin-bottom: 0;
   color: #ffffff;
}
.document-application-form form .form-group,
.ledger-form form .form-group{
   margin-bottom: 20px;
}
.ledger-form form .form-label,
.document-application-form form .form-label{
   font-weight: 500;
   font-size: 18px;
}
.ledger-form .heading{
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 20px;
}
.ledger-form .heading button{
   display: inline-block;
   width: 140px;
   padding: 5px 5px;
   background-color: #000000;
   border-radius: 5px;
   font-weight: 500;
   border: 1px solid #000000;
}
.ledger-form .heading button a{
   color: #ffffff;
}
.ledger-form .form-header,
.ledger-form .form-header,
.ledger-form .form-header{
   color: #000000;
}
.ledger-form form .form-group .form-input.relative{
   position: relative;
}
.ledger-form form .form-group .form-input.relative button{
   position: absolute;
   right: 0;
   top: 0;
   border: transparent;
   height: 100%;
   border: 1px solid rgba(51, 51, 51, 0.5);
}
.ledger-form form .form-group .form-input.relative button a{
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}
.ledger-form form .form-group .form-control,
.ledger-form form .form-group .form-select,
.document-application-form form .form-group .form-control,
.document-application-form form .form-group .form-select{
   border: 1px solid rgba(51, 51, 51, 0.5);
   border-radius: 0;
   height: 48px;
}
.document-application-form form .form-group .form-control.has-error,
.document-application-form form .form-group .form-select.has-error{
   border: 1px solid red;
}

.ledger-form form .form-group .form-input-price{
   display: flex;
}
.ledger-form form .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;
}
.ledger-form form button[type="submit"],
.document-application-form form button[type="submit"]{
   width: 100%;
   padding: 10px;
   font-size: 21px;
   transition: all .2s ease-in-out;
   background-color: #004445;
   border: none;
   color: #ffffff;
}
.ledger-form form .image-label{
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 13px;
   height: 48px;
   font-size: 15px;
   border: 1px solid rgba(51, 51, 51, 0.5);
   color: #666666;
}
.ledger-form form .form-group .form-flex{
   display: flex;
   align-items: center;
   justify-content: space-between;
   border: 1px solid rgba(51, 51, 51, 0.5);
   padding: 5px;
}
.ledger-form form .form-group .form-flex label{
   color: #666666;
}
.ledger-form form .form-group .form-flex label,
.ledger-form form .form-group .form-flex div{
   width: 32%;
}
.ledger-form form .form-group .form-flex .form-control{
   height: 35px;
}

/* add vehicle styling */
.ledger-form .inner{
   padding: 20px;
   background-color: #FFFFFF;
}
.ledger-form .inner .form-group.flex-input{
   display: flex;
   gap: 5px;
}
.ledger-form .inner .form-group.flex-input .form-input{
   width: 40%;
}
.ledger-form .inner .form-group.flex-input .date-input{
   width: 60%;
   display: flex;
}
.ledger-form .inner .form-group.flex-input .date-input div{
   width: 50%;
}
.ledger-form .inner .form-group.flex-input span{
   font-weight: 500;
   font-size: 17px;
   color: #333333;
}
.document-application-form .vehicle-card,
.ledger-form .vehicle-card{
   background-color: #ffffff;
   padding: 8px;
   cursor: pointer;
   margin-bottom: 15px;
}
.document-application-form .vehicle-card .bottom i,
.ledger-form .vehicle-card .bottom i{
   color: #6e8898ff;
}
.document-application-form .vehicle-card .top span.check-box,
.ledger-form .vehicle-card .top span.check-box{
   display: inline-block;
   height: 20px;
   width: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #ffffff;
   border: 1px solid rgba(51, 51, 51, 0.5);
}
.document-application-form .vehicle-card .top span.check-box i,
.ledger-form .vehicle-card .top span.check-box i{
   color: #ffffff;
}
.document-application-form .vehicle-card .bottom,
.ledger-form .vehicle-card .bottom{
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.document-application-form .vehicle-card.selected,
.ledger-form .vehicle-card.selected{
   background-color: #10CF49;
   color: #ffffff;
}
.document-application-form .vehicle-card.selected .top span.check-box,
.ledger-form .vehicle-card.selected .top span.check-box{
   border: 1px solid #ffffff;
}
.document-application-form .vehicle-card .selected .bottom i,
.ledger-form .vehicle-card.selected .bottom i{
   color: #ffffff;
}
.document-application-form .vehicle-card.selected .top span.check-box i,
.ledger-form .vehicle-card.selected .top span.check-box i{
   color: #10CF49;
}
/* 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;
}
.document-application-form form .form-group.relative,
.ledger-form .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;
}
.document-application-form form .form-group.relative .dropdown,
.ledger-form .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;
}
.document-application-form form .form-group.relative .dropdown,
.ledger-form .form-group.relative .dropdown{
   border: 1px solid rgba(51, 51, 51, 0.4);
}
.document-application-form form .form-group.relative .dropdown ul,
.ledger-form .form-group.relative .dropdown ul{
   margin-bottom: 0;
}
.document-application-form form .form-group.relative .dropdown ul li,
.ledger-form .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;
}
.document-application-form form .form-group.relative .dropdown ul li:hover,
.ledger-form .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 #fuel-history .table-section tr th,
.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;
}

.document-application-form{
   background-color: #f4f5f6;
}
.document-application-form .inner{
   background-color: #ffffff;
   padding: 40px;
}
.document-application-form form{
   width: 50%;
   margin: 30px auto 0 auto;
   -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   padding: 20px;
}
.accounting-document-history .menu-bar ul li button a{
   color: #FFFFFF;
   display: inline-block;
   width: 100%;
}
.document-application-form .progressbars{
    position: relative;
    display: flex;
    justify-content: space-between;
    counter-reset: step;
}
.document-application-form .progressbars::before,
.document-application-form .progressbars .progress{
    content: "";
    position: absolute;
    width: 100%;
    height: 8px;
    background: #f4f5f6;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
}
.document-application-form .progressbars .progress{
    width: 0;
    background: #AAB7B7;
}
.document-application-form .progressbars .progress-step{
    width: 35px;
    height: 35px;
    position: relative;
    border-radius: 50%;
    background: #f4f5f6;
    display: flex;
    z-index: 2;
    align-items: center;
    justify-content: center;
}
.document-application-form .progressbars .progress-step.active-step{
    background: #1A2D42;
    color: white;
}
.document-application-form .progressbars .progress-step::before{
    counter-increment: step;
    content: counter(step);
}
.document-application-form .progressbars .progress-step::after{
    position: absolute;
    /* content: attr(data-title); */
    content: "";
    bottom: -100%;
    left: 0;
    color: #666666;
    width: 150px;
}
.document-application-form .progressbars .progress-step.active-step::after{
    color: var(--black);
    font-weight: 550;
}

.document-application-form .form-step{
    display: none;
    animation: animate 0.5s;
}
.document-application-form .form-step.form-step-active{
    display: block;
}
.document-application-form .form-step .btns{
   display: flex;
   justify-content: flex-end;
   gap: 15px;
}
.document-application-form .form-step .btns button{
   width: 120px;
   display: inline-block;
   background-color: #2E4156;
   color: #ffffff;
   border-radius: 0;
}
.document-application-form .single-vehicle{
   border: 1px solid rgba(46, 65, 86, 0.5);
   margin-bottom: 20px;
   padding: 2px 8px;
   cursor: pointer;
}
.document-application-form .single-vehicle label{
   width: 100%;
}
.document-application-form .single-vehicle label p{
   font-size: 14px;
   margin-bottom: 0;
}
.document-application-form .single-vehicle label i{
   color: #2E4156;
}

.receipt-invoice-hero-section{
   background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../../frontend/img/banner/bg-12.jpg");
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
}
.receipt-invoice-hero-section .inner h1{
   font-size: 76px;
   color: #ffffff;
   text-transform: capitalize;
}
.receipt-invoice-hero-section .inner h1 span{
   color: #FF6800;
}
.receipt-invoice-hero-section .inner p{
   color: #ffffff;
   font-size: 21px;
   line-height: 28px;
}
.receipt-invoice-hero-section .inner .links{
   display: flex;
   gap: 30px;
}
.receipt-invoice-hero-section .inner .links a{
   display: inline-block;
   width: 210px;
   padding: 15px 10px;
   border-radius: 6px;
   background-color: #ffffff;
   color: #000000;
   font-size: 21px;
   text-align: center;
   transition: all ease-in-out 0.3s;
}
.receipt-invoice-hero-section .inner .links a:hover{
   background-color: #FF6800;
   color: #ffffff;
}
.rec-inv-how-it-works,
.rec-inv-benefit-section,
.rec-inv-features-section{
   background: #f7f7f7;
}
.rec-inv-benefit-section .benefits .benefit,
.rec-inv-features-section .features .feature{
   background-color: #ffffff;
   padding: 40px 20px;
   border-radius: 10px;
   text-align: center;
   border: 1px solid rgba(3, 109, 111, 0.3);
   margin-bottom: 30px;
}
.rec-inv-benefit-section .benefits .benefit span,
.rec-inv-features-section .features .feature span{
   height: 75px;
   width: 75px;
   border-radius: 50%;
   border: 1px solid rgba(3, 109, 111, 1);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 30px auto;
   font-size: 28px;
   color: #004445;
}
.rec-inv-benefit-section .benefits .benefit h4,
.rec-inv-features-section .features .feature h4{
   margin-bottom: 30px;
   color: #333333;
}
.rec-inv-how-it-works .inner{
   background-color: #ffffff;
   padding: 40px;
   border-radius: 10px;
}
.rec-inv-how-it-works .inner .box{
   background-color: #ffffff;
   display: flex;
   gap: 20px;
   padding: 20px;
   border-radius: 10px;
   transition: all ease-in-out 0.5s;
}
.rec-inv-how-it-works .inner .box .first-col{
   width: 20%;
}
.rec-inv-how-it-works .inner .box:hover{
   border: 1px solid rgba(3, 109, 111, 1);
}
.rec-inv-how-it-works .inner .box span{
   height: 65px;
   width: 65px;
   border-radius: 50%;
   border: 1px solid rgba(3, 109, 111, 0.8);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 30px auto;
   font-size: 21px;
   color: #004445;
   background-color: #ffffff;
}
.rec-inv-how-it-works .inner .getting-started-box{
   background-color: #004445;
   width: 100%;
   height: 100%;
   border-radius: 10px;
   text-align: center;
   padding: 60px 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
}
.rec-inv-how-it-works .inner .getting-started-box a{
   display: inline-block;
   width: 210px;
   padding: 15px 10px;
   background-color: #ffffff;
   border-radius: 6px;
   font-size: 21px;
   margin-top: 30px;
}
.rec-inv-how-it-works .inner .getting-started-box h1{
   color: #ffffff;
   margin-bottom: 30px;
}
.rec-inv-how-it-works .inner .getting-started-box p{
   color: rgba(255, 255, 255, 0.7);
}
.subscription-page{
   background-color: #f7f7f7;
}
.subscription-page .header-text h3,
.subscription-page .header-text p{
   color: #000000;
}
.subscription-page .subscription-card{
   border-radius: 10px; 
   margin-bottom: 20px;
   background-color: #ffffff;
   border: 1px solid rgba(102, 102, 102, 0.2)
}
.subscription-page .subscription-card .title{
   border-bottom: 1px solid rgba(102, 102, 102, 0.2);
   padding: 20px 10px;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
}
.subscription-page .subscription-card .pricing{
   background: #f4f5f6;
   padding-bottom: 15px;
}
.subscription-page .subscription-card .discount span{
   font-size: 21px;
}
.subscription-page .subscription-card .discount span.bold{
   font-weight: 600;
   font-size: 32px;
}
.subscription-page .subscription-card .title h4,
.subscription-page .subscription-card .discount span.bold,
.subscription-page .subscription-card .price{
   color: #004445;
}
.subscription-page .subscription-card .price span{
   font-size: 55px;
   font-weight: 700;
}
.subscription-page .subscription-card .price small{
   font-size: 18px;
   font-weight: 700;
}
.subscription-page .subscription-card .features{
   padding: 10px 20px;
   margin-top: 10px;
}
.subscription-page .subscription-card .features .box{
   display: flex;
   align-items: center;
   gap: 15px;
   padding: 10px 0;
}
.subscription-page .subscription-card .features i{
   color: green;
}
.subscription-page .subscription-card .features p{
   font-size: 18px;
   font-weight: 100;
   text-align: left;
   line-height: 20px;
   margin-bottom: 0;
   color: #666666;
}
.subscription-page .subscription-card .link{
   padding: 10px 15px;
}
.subscription-page .subscription-card button{
   width: 100%;
   display: inline-block;
   padding: 15px;
   font-size: 21px;
   border-radius: 6px;
   background-color: #036d6f;
   border: none;
   color: #ffffff;
}
.subscription-page .subscription-card button:hover{
   background-color: #004445;
}
.subscription-page .subscription-card .duration{
   width: 80%;
   margin: 20px auto;
}
.subscription-page .subscription-card .duration .form-group{
   padding: 5px;
   border-radius: 5px;
   border: 1px solid rgba(102, 102, 102, 0.2);
   display: flex;
   gap: 10px;
}
.subscription-page .subscription-card .duration .form-group .plan{
   width: 50%;
   border-radius: 5px;
}
.subscription-page .subscription-card .duration .form-group .plan.selected{
   background-color: #036d6f;
}
.subscription-page .subscription-card .duration .form-group .plan.selected label{
   color: #ffffff;
}
.subscription-page .subscription-card .duration .form-group .plan label{
   padding: 10px 5px;
   width: 100%;
   cursor: pointer;
}

/* subscription detail page */
.subscription-detail-page{
   background-color: #f7f7f7;
   min-height: 100vh;
}
.subscription-detail-page .inner{
   width: 50%;
   margin: 0 auto;
   border: 1px solid rgba(102, 102, 102, 0.2);
}
.subscription-detail-page .inner .heading{
   background-color: #ffffff;
   border-bottom: 1px solid rgba(102, 102, 102, 0.2);
   padding: 20px;
}
.subscription-detail-page .inner .heading .title{
   color: #004445;
   text-align: center;
   margin-bottom: 0;
}
.subscription-detail-page .main-content{
   background-color: #ffffff;
   padding: 15px;
}
.subscription-detail-page .main-content .sub-content ul.features li{
   color: #666666;
   font-size: 21px;
   display: flex;
   align-items: center;
   gap: 10px;
}
.subscription-detail-page .main-content .sub-content ul.features li span{
   color: green;
   height: 25px;
   width: 25px;
   display: flex;
   align-items: center;
   justify-content: center;
}
.subscription-detail-page .main-content .sub-content p,
.subscription-detail-page .main-content .sub-content span{
   font-size: 16px;
}
.subscription-detail-page .main-content .sub-content.large p,
.subscription-detail-page .main-content .sub-content.large span{
   font-size: 21px;
}
.subscription-detail-page .main-content .sub-content span.price{
   color: #004445;
   font-size: 38px;
}
.subscription-detail-page .main-content button[type="submit"]{
   width: 100%;
   outline: none;
   padding: 10px;
   font-size: 21px;
   background-color: #004445;
   color: #ffffff;
   border: none;
}
.subscription-detail-page .main-content button[type="submit"]:disabled{
   background-color: #f4f5f6;
   color: #000000;
}
.analytics-dashboard{
   overflow-x: hidden;
}
.analytics-dashboard .inner{
   background-color: #f4f5f6;
   padding: 40px;
}
.analytics-dashboard .summary-card{
   background-color: #ffffff;
   padding: 30px 20px;
   margin-bottom: 20px;
}
.analytics-dashboard .summary-card span.price
.analytics-dashboard .summary-card span.num{
   font-weight: 600;
   font-size: 24px;
   color: #2C7873;
}
.analytics-dashboard .summary-card span.icon{
   display: flex;
   align-items: center;
   justify-content: center;
   height: 50px;
   width: 50px;
   background-color: #f4f5f6;
   border-radius: 10px;
}
.analytics-dashboard .summary-card span.icon i{
   font-size: 18px;
   color: #2C7873;
}
.analytics-dashboard .fuel-statistics{
   /* background-color: #ffffff; */
   /* padding: 20px; */
}
.analytics-dashboard .fuel-statistics .fuel-bar-chart,
.analytics-dashboard .fuel-statistics .fuel-pie-chart{
   background-color: #ffffff;
   padding: 0 20px 20px 20px;
}
.analytics-dashboard .fuel-statistics .top-bar .title{
   border-bottom: 1px solid rgba(51, 51, 51, 0.2);
   padding: 5px 0;
}
.document-application-confirmation-page .main-content{
   padding: 10px 10px 20px 10px;
   background-color: #ffffff;
}
.document-application-confirmation-page .main-content.no-pb{
   padding-bottom: 0;
}
.document-application-confirmation-page .main-content p{
   display: flex;
   justify-content: space-between;
   padding: 10px 0;
   font-size: 18px;
   border-bottom: 1px solid rgba(51, 51, 51, 0.2);
   font-weight: 400;
   margin-bottom: 0;
}
.document-application-confirmation-page .main-content p.last-child{
   border: none;
}
.document-application-confirmation-page .main-content p span.bold{
   font-weight: 500;
}
.document-application-confirmation-page .single-section .main-content ul{
   margin-bottom: 0;
   margin-left: 20px;
   list-style-type: disc;
}
.document-application-confirmation-page .single-section .main-content ul li{
   padding: 3px;
}
.document-application-confirmation-page .submit-btn{
   width: 100%;
   display: inline-block;
   padding: 7px;
   background-color: #F5C34B;
   color: #041E42;
   border: 1px solid #F5C34B;
   font-size: 18px;
   text-align: center;
   margin-top: 20px;
}
.document-application-confirmation-page .single-section .main-content span.text-price{
   font-weight: 500;
   color: #000000;
}
.document-application-success{
   background: #f4f5f6;
   width: 100%;
   height: 100vh;
}
.document-application-success .success-box{
   width: 50%;
   padding: 40px 20px;
   margin: 0 auto;
   background-color: #ffffff;
   position: relative;
   border: 1px solid rgba(16, 207, 73, 0.5);
   text-align: center;
}
.document-application-success .success-box span.icon{
   border: 1px solid #10CF49;
   border-radius: 50%;
   background-color: #ffffff;
   position: absolute;
   top: -45px;
   left: 50%;
   height: 85px;
   width: 85px;
   display: flex;
   align-items: center;
   justify-content: center;
   transform: translateX(-50%);
}
.document-application-success .success-box span.icon i{
   font-size: 45px;
   color: #10CF49;

}
.document-application-success .success-box a{
   width: 170px;
   display: inline-block;
   background-color: #10CF49;
   text-align: center;
   padding: 10px;
   border-radius: 5px;
   color: #ffffff;
}
@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) {
   .rec-inv-how-it-works .inner .getting-started-box{
      margin-top: 50px;
      margin-bottom: 20px;
      height: auto;
   }
   .accounting-document-history .main-content .top-bar{
      display: block;
   }
   .subscription-detail-page .inner{
      width: 100%;
   }
   .accounting-document-history .main-content .btn-section{
      width: 100%;
   }
   .accounting-document-history .main-content .top-bar .form-section{
      width: 100%;
   }
   .document-application-form .tab-content form{
      width: 70%;
   }
   .analytics-dashboard .inner{
      padding: 20px;
   }
   .analytics-dashboard .fuel-statistics .fuel-bar-chart{
      margin-bottom: 20px;
   }
   .document-application-form form{
      width: 100%;
      box-shadow: none;
      padding: 0;
   }
}

@media only screen and (max-width:767px) {
   #store-form{
      width: 80%;
   }
   .rec-inv-how-it-works .inner .box{
      padding: 15px;
   }
   .rec-inv-how-it-works .inner .box span{
      width: auto;
      height: auto;
      padding: 20px;
      border-radius: 100%;
   }
   .rec-inv-how-it-works .inner{
      padding: 40px 20px;
   }
   .subscription-detail-page .main-content .sub-content ul.features li{
      font-size: 18px;
   }
   .document-application-form .inner{
      padding: 20px 10px;
   }
   .document-application-success .success-box{
      width: 100%;
   }
   .analytics-dashboard{
      background-color: #f4f5f6;
   }
   .analytics-dashboard .inner{
      padding: 0;
   }
   .subscription-page .subscription-card{
      margin-bottom: 40px;
   }
   .ledger-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(50% - 5px);
   }
   .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;
      gap: 2px;
   }
   .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;
   }
   .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 (max-width:495px) {
   .ledger-form .inner{
      padding: 20px 10px;
   }
   .rec-inv-how-it-works .inner{
      padding: 40px 10px;
   }
   .subscription-detail-page .main-content .sub-content ul.features li{
      font-size: 16px;
   }
   .document-application-confirmation-page .main-content p{
      font-size: 16px;
   }
   .analytics-dashboard .fuel-statistics .fuel-bar-chart,
   .analytics-dashboard .fuel-statistics .fuel-pie-chart{
      padding: 0 10px 10px 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;
   }
   .ledger-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;
   }
   .receipt-invoice-hero-section .inner h1{
      font-size: 45px;
   }
}

@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 (max-width: 430px) {
   .truck_form_select{
      width: 100%;
   
   }
   .accounting-document-history .menu-bar ul{
      justify-content: flex-start;
      gap: 6px;
   }
   .accounting-document-history .menu-bar ul li{
      flex-basis: calc(33.33% - 5px);
   }
}
@media (max-width: 425px) {
   .receipt-invoice-hero-section .inner .links{
      flex-direction: column;
   }
   .receipt-invoice-hero-section .inner p{
      font-size: 18px;
   }
   .receipt-invoice-hero-section .inner .links a{
      width: 100%;
   }
}
@media (max-width: 395px) {
   .receipt-invoice-hero-section .inner h1{
      font-size: 36px;
   }
}

@media (max-width: 375px) {
   .analytics-dashboard .summary-card h5{
      font-size: 16px;
   }
   .analytics-dashboard .summary-card span.price,
   .analytics-dashboard .summary-card span.num{
      font-size: 22px;
   }
   .truck_form_select{
      width: 100%;
   }
   .ledger-form .inner .form-group.flex-input .form-control,
   .ledger-form .inner .form-group.flex-input .form-control::placeholder{
      font-size: 13px;
   }
   .ledger-form form .form-group .form-flex label,
   .ledger-form form .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: 12px;
   }
   .accounting-document-history .menu-bar ul li,
   .accounting-document-history .menu-bar ul li a{
      font-size: 14px;
   }
}
@media (max-width:355px) {
   .ledger-form .inner .form-group.flex-input span{
      font-size: 12px;
   }
   .ledger-form .inner .form-group.flex-input .form-control,
   .ledger-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:352px) {
   .accounting-document-history .main-content .btn-section ul li button{
      font-size: 12px;
   }
}
@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);
   }
   .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(20% - 2px);
   }
   .analytics-dashboard .summary-card h5{
      font-size: 16px;
   }
   .analytics-dashboard .summary-card span.price,
   .analytics-dashboard .summary-card span.num{
      font-size: 21px;
   }
   .document-application-success .success-box{
      width: 80%;
   }
   .receipt-invoice-hero-section .inner h1{
      font-size: 44px;
   }
}