@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&family=Open+Sans:wght@400;600;700&display=swap");

body {
 font-family: "Open Sans", sans-serif;
 color: #0c0c0c;
 background-color: #ffffff;
 overflow-x: hidden;
}

.layout_padding {
 padding: 90px 0;
}

.layout_padding2 {
 padding: 75px 0;
}

.layout_padding2-top {
 padding-top: 75px;
}

.layout_padding2-bottom {
 padding-bottom: 75px;
}

.layout_padding-top {
 padding-top: 90px;
}

.layout_padding-bottom {
 padding-bottom: 90px;
}

.hero_area {
 position: relative;
}

/* admin login */
.header_section {
 padding: 15px 20px;
 height: 80px;
 position: fixed;
 z-index: 9999;
 left: 0;
 right: 0;
 background-color: #000000 !important;
}

.header_bg {
 height: 80px;
}

.custom_nav-container {
 display: flex !important;
 justify-content: space-between;
}

.navbar-collapse {
 display: flex;
 justify-content: flex-end !important;
}

.header_section .container-fluid {
 padding-right: 25px;
 padding-left: 25px;
}

.logo_section img {
 width: 45%;
}

.phone_num {
 color: #ffffff;
 font-size: 18px;
 margin-top: 11px;
 margin-right: 15px;
}

.background {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg_section {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
 /* background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 animation: changeBackground 90s infinite;
 padding: 15px 0px; */
}

.form_bg {
 animation: changeBackground 90s infinite;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 padding: 15px 0px;
}

.bg_section_admin {
 animation: changeBackground 90s infinite;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 padding: 15px 0px;
}

.container_section_admin {
 width: 90%;
 margin: auto;
 background-color: #ffffff;
 padding: 50px;
 margin-bottom: 15px;
}

.container_section {
 width: 80%;
 margin: auto;
 background-color: #ffffff;
 padding: 50px;
 margin-bottom: 15px;
}

.main_heading {
 font-size: 24px;
 font-weight: 600;
 color: black;
}

.main_heading span {
 font-size: 22px;
 font-weight: 500;
}

.sub_heading {
 font-size: 18px;
 font-weight: 600;
 color: black;
 margin-top: 20px;
 margin-bottom: 5px;
}

.pdf_heading {
 font-size: 18px;
 font-weight: 600;
 color: black;
 margin-top: -5px;
 margin-bottom: 0px;
}

.description {
 font-size: 14px;
 text-align: justify;
}
.btn-info{
  height: 40px;
  color: #fff;
  border: none;
  width: 40px;
  font-size: 24px;
  font-weight: 600;
}
.name_input {
 width: 100%;
 height: 40px !important;
 border: 3px solid #b3b2b2;
 margin: 10px 0px;
 padding-left: 20px;
 font-weight: 600;
}
.remove-btn{
  background-color: rgb(197, 4, 4);
  height: 40px;
  color: #fff;
  border: none;
  width: 40px;
  font-size: 24px;
  font-weight: 600;
}
.form_footer {
 display: flex;
 justify-content: space-between;
 margin-top: 15px;
}

.forgot_pass {
 color: #818181;
 font-size: 18px;
 font-weight: 600;
}

.login-btn {
 width: 180px;
 background-color: #000000;
 color: #ffffff;
 border: none;
 font-size: 18px;
 font-weight: 600;
 padding: 10px 0px;
}

.footer_section {
 z-index: 9999;
}

.footer_inner {
 background-color: #000000;
}

.footer-container {
 width: 80%;
 margin: auto;
 display: flex;
 justify-content: end;
 text-align: center;
 padding: 10px;
 height: 80px;
}

.footer-container p {
 color: #ffffff;
 margin: 15px 0px 0px;
 font-size: 18px;
}

/* admin dashboard */

.admin_bg_section {
 animation: changeBackground 90s infinite;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 padding: 15px 0px;
}

.admin_container {
 width: 85%;
 margin: auto;
 background-color: #ffffff;
 padding: 10px;
 margin-bottom: 15px;
}

.log_out {
 text-align: end;
}

.log_out p {
 font-size: 16px;
}

.admin_report {
 padding: 40px;
}

.admin_heading {
 font-size: 26px;
 color: #000000;
 font-weight: 700;
 margin-left: 20px;
}

.cards {
 border: 1px solid black;
 /* height: 350px; */
 width: 100%;
 margin: 20px 0px;
}

.image_section {
 background-color: #000000;
 width: 100%;
 height: 300px;
 display: flex;
 justify-content: center;
 align-items: center;
}

.card-image {
 width: 55%;
 object-fit: cover;
}

.card_footer {
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 10px;
}

.card_footer p {
 color: black;
 font-size: 18px;
 font-weight: 600;
}

.container_section_cus {
 width: 90%;
 margin: auto;
 background-color: #ffffff;
 padding: 50px;
 height: 900px;
 margin-bottom: 15px;
}

.container_section_cus_form {
 width: 90%;
 margin: auto;
 background-color: #ffffff;
 padding: 50px;
 margin-bottom: 15px;
}

/* Customer register */
.name_input_cust {
 width: 100%;
 height: 40px;
 border: 1px solid #181818;
 background-color: #e9e7e7;
 margin: 0px 0px 5px;
 color: #000000;
 padding-left: 10px;
 display: flex;
 align-items: center;
}

.name_input_cust::placeholder {
 color: black;
 font-weight: 600;
 font-size: 14px;
}

.report_date {
 display: flex;
 height: 40px;
 margin: 7px 0px;
 width: 100%;
}

.report_input {
 width: 53%;
 padding-left: 10px;
 border: 1px solid black;
}

.report_label {
 border: 1px solid black;
 width: 47%;
 text-align: center;
 font-size: 12px;
 font-weight: 600;
 padding: 5px;
 height: 40px;
 font-weight: 600;
 display: flex;
 align-items: center;
}

.report_label_reg {
 border: 1px solid black;
 width: 43%;
 text-align: center;
 font-size: 12px;
 font-weight: 600;
 padding: 5px;
 height: 40px;
 font-weight: 600;
 display: flex;
 align-items: center;
}

.report_label_desird {
 border: 1px solid black;
 width: 22%;
 text-align: center;
 font-size: 12px;
 font-weight: 600;
 padding: 5px;
 height: 40px;
 display: flex;
 align-items: center;
 font-weight: 600;
}

.repres_label {
 border: 1px solid black;
 width: 35%;
 text-align: center;
 font-size: 12px;
 font-weight: 600;
 padding: 5px;
 height: 40px;
 display: flex;
 align-items: center;
}

.repres_label_vehicle {
 border: 1px solid black;
 width: 35%;
 text-align: center;
 font-size: 12px;
 padding: 5px;
 font-weight: 600;
 height: 40px;
 display: flex;
 align-items: center;
}

.report_date_home {
 width: 100%;
 display: flex;
 height: 40px;
 margin: 7px 0px;
}

.report_label_home {
 border: 1px solid black;
 width: 11%;
 text-align: center;
 font-weight: 600;
 font-size: 12px;
 padding: 5px;
 height: 40px;
 display: flex;
 align-items: center;
}

.report_date_post {
 display: flex;
 height: 40px;
 margin: 7px 0px;
}

.report_label_post {
 border: 1px solid black;
 width: 142px;
 text-align: center;
 font-size: 12px;
 padding: 5px;
 font-weight: 600;
 height: 40px;
 display: flex;
 align-items: center;
}

.reg_number {
 width: 143px !important;
}

.report_label_vehicle {
 border: 1px solid black;
 width: 216px;
 text-align: center;
 font-weight: 600;
 font-size: 12px;
 padding: 5px;
 height: 40px;
 display: flex;
 align-items: center;
}

.report_label_vehicle_con {
 border: 1px solid black;
 width: 20%;
 text-align: center;
 font-size: 12px;
 padding: 5px;
 height: 40px;
 font-weight: 600;
 display: flex;
 align-items: center;
}

.service_warning {
 width: 110px !important;
}

.service_warning_label {
 border: 1px solid black;
 width: 150px;
 text-align: center;
 font-size: 12px;
 padding: 5px;
 height: 40px;
 display: flex;
 align-items: center;
 font-weight: 600;
}

.last_service {
 width: 420px !important;
}

.service_date {
 width: 400px !important;
}

.input_cust_settle {
 width: 45% !important;
 padding-left: 10px;
}

.baytree_signature {
 width: 65% !important;
 height: 120px !important;
}

.input_cust_collect {
 width: 65%;
 padding-left: 10px;
}

.input_cust_crrent {
 width: 73%;
}
.input_cust_customer{
  width: 70%;
}
.curentlender {
 padding-left: 10px;
}

.report_label_settlement {
 border: 1px solid black;
 text-align: center;
 font-size: 12px;
 padding: 5px;
 height: 40px;
 font-weight: 600;
 width: 55%;
 display: flex;
 align-items: center;
}
.report_label_Customer{
  border: 1px solid black;
 text-align: center;
 font-size: 12px;
 padding: 5px;
 height: 40px;
 font-weight: 600;
 width: 30%;
 display: flex;
 align-items: center;
}

.report_label_current {
 border: 1px solid black;
 text-align: center;
 font-size: 12px;
 padding: 5px;
 height: 40px;
 font-weight: 600;
 width: 27%;
 display: flex;
 align-items: center;
}

.report_label_annual {
 border: 1px solid black;
 text-align: center;
 font-size: 12px;
 padding: 5px;
 height: 40px;
 font-weight: 600;
 width: 55%;
 display: flex;
 align-items: center;
}

.report_label_price {
 border: 1px solid black;
 text-align: center;
 font-size: 12px;
 padding: 5px;
 height: 40px;
 width: 208px;
 font-weight: 600;
}

.report_label_collection {
 border: 1px solid black;
 text-align: center;
 font-size: 12px;
 padding: 5px;
 height: 40px;
 width: 200px;
 font-weight: 600;
}

.collection {
 width: 380px !important;
}

.signature {
 width: 320px !important;
 height: 130px !important;
 position: relative;
 font-family: "Roboto", sans-serif;
 font-weight: 500;
 font-size: 15px;
 line-height: 2;
 height: 40px;
 transition: all 200ms linear;
 border-radius: 0px;
 letter-spacing: 1px;
 display: -webkit-inline-flex;
 display: -ms-inline-flexbox;
 display: inline-flex;
 -webkit-align-items: center;
 -moz-align-items: center;
 -ms-align-items: center;
 align-items: center;
 -webkit-justify-content: center;
 -moz-justify-content: center;
 -ms-justify-content: center;
 justify-content: center;
 -ms-flex-pack: center;
 text-align: center;
 border: 1px solid black;
 background-color: #ffffff;
 cursor: pointer;
 color: #102770;
 box-shadow: 0 12px 35px 0 rgba(255, 235, 167);
}

.signatur-label {
 display: flex;
}

.rep_date {
 margin-top: 50px;
}

.create_form {
 height: 1940px;
}

.con_form {
 height: 1900px;
}

.form_footer_sec {
 display: flex;
 justify-content: end;
 margin-top: 15px;
}
.form_footer_sec2{
  display: flex;
  justify-content: end;
  margin-top: 130px;
}

.forgot_Sec {
 display: flex;
 justify-content: space-between;
 margin-top: 15px;
}

.login-btn-create {
 width: 240px;
 background-color: #000000;
 color: #ffffff;
 border: none;
 font-size: 18px;
 font-weight: 600;
 padding: 10px 0px;
}

.post_input {
 width: 100%;
 height: 40px;
 border: 1px solid #181818;
 background-color: #fff;
 margin: 0px 0px 15px;
 color: #000000;
 padding-left: 10px;
 font-weight: 600;
}

.input_label {
 margin-bottom: 5px;
 font-size: 14px;
 color: #202020;
}

.vehicle_report {
 margin-top: 20px;
 font-size: 14px;
 font-weight: 600;
}

.input_cust {
 width: 78%;
 height: 40px;
 border: 1px solid #181818;
 background-color: #fff;
 margin: 0px 0px 15px;
 color: #000000;
 padding-left: 10px;
}

.input_cust_vehicle {
 width: 80%;
 height: 40px;
 border: 1px solid #181818;
 background-color: #fff;
 margin: 0px 0px 15px;
 color: #000000;
 padding-left: 10px;
}

.input_cust_annual {
 width: 45%;
 height: 40px;
 border: 1px solid #181818;
 background-color: #fff;
 margin: 0px 0px 15px;
 color: #000000;
 padding-left: 10px;
}

.input_cust_home {
 width: 89%;
 height: 40px;
 border: 1px solid #181818;
 background-color: #fff;
 margin: 0px 0px 15px;
 color: #000000;
 padding-left: 10px;
}

.report_label_cus {
 border: 1px solid black;
 width: 35%;
 text-align: center;
 font-size: 12px;
 padding: 5px;
 height: 40px;
 font-weight: 600;
 display: flex;
 align-items: center;
}

.report_label_tyre {
 border: 1px solid black;
 width: 50%;
 text-align: center;
 font-size: 12px;
 padding: 5px;
 height: 40px;
 font-weight: 600;
 display: flex;
 align-items: center;
}

.add_admin {
 display: flex;
 justify-content: end;
 margin-top: 20px;
}
.add_admin_user {
 display: flex;
 justify-content: end;
 margin-top: 20px;
}
.add_admin button {
 background-color: #000000;
 color: #fff;
 font-size: 14px;
 border: none;
 width: 150px;
 padding: 10px;
 font-weight: 600;
 margin-bottom: 20px;
}
.add_admin_user button {
 background-color: #000000;
 color: #fff;
 font-size: 14px;
 border: none;
 width: 160px;
 padding: 10px;
 font-weight: 600;
 margin-bottom: 20px;
}

.table_section {
 margin-top: 40px;
 border: 1px solid black;
}

.table_head th {
 border-right: 1px solid black;
 font-size: 12px;
 font-weight: 500;
 padding: 5px 15px;
}

@media screen and (max-width: 1024px) {
 .dataTables_wrapper {
 width: 100%;
 padding: 0px;
 overflow-x: auto;
 }
 table.dataTable thead .sorting {
 background-image: url(../images/sort_both.png);
 width: 60px !important;
 }
 .card_footer p {
 color: black;
 font-size: 12px;
 font-weight: 600;
 }

 .image_section {
 height: 250px;
 }

 .cards {
 height: 300px;
 }
}

@media screen and (max-width: 768px) {
  .butn-edit {
    font-size: 10px !important;
    padding: 3px 5px !important;
}
 .image_section {
 height: 160px;
 }

 .cards {
 height: 200px;
 }

 .card_footer p {
 font-size: 10px;
 white-space: nowrap;
 }

 .admin_report {
 padding: 0px;
 }
}

@media screen and (max-width: 430px) {
  .butn-edit {
    font-size: 10px;
    padding: 3px 3px;
}
  .form_footer_sec_upload{
    display: flex;
    justify-content: start !important;
    margin-top: 15px;
  }
  .background-sample{
    background-image: none !important;
  }
  .container_section_notes{
    padding: 50px 5px !important;
  }
 .custom_nav-container {
 display: flex !important;
 }

 .phone_num {
 color: #ffffff;
 font-size: 14px;
 }

 .form_footer {
 display: block;
 margin-top: 15px;
 }

 .login-btn {
 width: 100%;
 padding: 10px 0px;
 font-size: 18px;
 }

 .container_section {
 padding: 10px;
 }

 .logo_section {
 width: 50%;
 }

 .logo_section img {
 width: 100%;
 }

 .card_section {
 width: 85%;
 }

 .admin_bg_section {
 background-image: none;
 animation: none;
 }

 .card_row {
 margin-bottom: 50px;
 }

 .admin_report {
 padding: 0px 0px;
 }

 .bg_section {
 background-image: none;
 animation: none;
 }
}

@media screen and (max-width: 320px) {
 .bg_section {
 height: 750px;
 }

 .container_section {
 height: 645px;
 }

 .admin_bg_section {
 background-image: none;
 }
}

.sec-center {
 position: relative;
 width: 64%;
 text-align: center;
}

.sec-center_repre{
  width: 64% !important;
  font-size: 12px;
  height: 40px;
  border: 1px solid #181818;
  background-color: #fff;
  margin: 0px 0px 15px;
  color: #000000;
  padding-left: 10px;
}
.sec-center_fname {
 position: relative;
 width: 78%;
 text-align: center;
}

.sec-center_tyre {
 position: relative;
 width: 50%;
 text-align: center;
}

.sec-center_center_tyre {
 position: relative;
 width: 50%;
 text-align: center;
}

.sec-center_center_annual {
 position: relative;
 width: 45%;
 text-align: center;
}

.sec-center_center_service {
 position: relative;
 width: 40%;
 text-align: center;
}

.sec-center_reg {
 /* position: relative; */
 width: 60%;
 /* text-align: center; */
}

/* [type="checkbox"]:checked,
[type="checkbox"]:not(:checked){
 position: absolute;
 left: -9999px;
 opacity: 1;
 pointer-events: none;
}
.dark-light:checked + label,
.dark-light:not(:checked) + label{
 position: fixed;
 top: 40px;
 right: 40px;
 z-index: 20000;
 display: block;
 border-radius: 50%;
 width: 46px;
 height: 46px;
 cursor: pointer;
 transition: all 200ms linear;
 box-shadow: 0 0 25px rgba(255,235,167,.45);
}
.dark-light:checked + label{
 transform: rotate(360deg);
}
.dark-light:checked + label:after,
.dark-light:not(:checked) + label:after{
 position: absolute;
 content: '';
 top: 1px;
 left: 1px;
 overflow: hidden;
 z-index: 2;
 display: block;
 border-radius: 50%;
 width: 44px;
 height: 44px;
 background-color: #102770;
 background-image: url('https://assets.codepen.io/1462889/moon.svg');
 background-size: 20px 20px;
 background-repeat: no-repeat;
 background-position: center;
 transition: all 200ms linear;
 opacity: 0;
} */

.down-icon {
 text-align: end;
 margin-left: auto;
 border: 1px solid black;
 color: #000;
 height: 40px;
 font-size: 20px;
 padding: 0px 10px;
 background: lightgray;
}
.down-icon2 {
 text-align: end;
 margin-left: auto;
 border: 1px solid #e7c705;
 color: blue;
 height: 40px;
 font-size: 20px;
 padding: 0px 10px;
 background: #e7c705;;
}

.represent-sec {
 width: 340px !important;
}

/* .dark-light:checked + label:after {
 opacity: 1;
}
.dark-light:checked + label:before,
.dark-light:not(:checked) + label:before{
 position: absolute;
 content: '';
 top: 0;
 left: 0;
 overflow: hidden;
 z-index: 1;
 display: block;
 border-radius: 50%;
 width: 46px;
 height: 46px;
 background-color: #48dbfb;
 background-image: url('https://assets.codepen.io/1462889/sun.svg');
 background-size: 25px 25px;
 background-repeat: no-repeat;
 background-position: center;
 transition: all 200ms linear;
}
.dark-light:checked + label:before{
 background-color: #000;
}
.light-back{
 position: fixed;
 top: 0;
 left: 0;
 z-index: 1;
 background-color: #fff;
 overflow: hidden;
 background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat-back.svg');
 background-position: center;
 background-repeat: repeat;
 background-size: 4%;
 height: 100%;
 width: 100%;
 transition: all 200ms linear;
 opacity: 0;
}
.dark-light:checked ~ .light-back{
 opacity: 1;
}
.dropdown:checked + label,
.dropdown:not(:checked) + label{
 position: relative;
 font-family: 'Roboto', sans-serif;
 font-weight: 500;
 font-size: 15px;
 line-height: 2;
 height: 40px;
 transition: all 200ms linear;
 border-radius: 0px;
 width: 180px;
 letter-spacing: 1px;
 display: -webkit-inline-flex;
 display: -ms-inline-flexbox;
 display: inline-flex;
 -webkit-align-items: center;
 -moz-align-items: center;
 -ms-align-items: center;
 align-items: center;
 -webkit-justify-content: center;
 -moz-justify-content: center;
 -ms-justify-content: center;
 justify-content: center;
 -ms-flex-pack: center;
 text-align: center;
 border: 1px solid black;
 background-color: #ffffff;
 cursor: pointer;
 color: #102770;
 box-shadow: 0 12px 35px 0 rgba(255,235,167,.15);
}
.dark-light:checked ~ .sec-center .for-dropdown{
 background-color: #102770;
 color: #ffeba7;
 box-shadow: 0 12px 35px 0 rgba(16,39,112,.25);
}
.dropdown:checked + label:before,
.dropdown:not(:checked) + label:before{
 position: fixed;
 top: 0;
 left: 0;
 content: '';
 width: 100%;
 height: 100%;
 z-index: -1;
 cursor: auto;
 pointer-events: none;
}
.dropdown:checked + label:before{
 pointer-events: auto;
}
.dropdown:not(:checked) + label .uil {
 font-size: 24px;
 margin-left: 10px;
 transition: transform 200ms linear;
}
.dropdown:checked + label .uil {
 transform: rotate(180deg);
 font-size: 24px;
 margin-left: 10px;
 transition: transform 200ms linear;
} */
/* .section-dropdown {
 position: absolute;
 padding: 5px;
 background-color: #111;
 top: 47px;
 left: 0;
 width: 100%;
 border-radius: 4px;
 display: block;
 box-shadow: 0 14px 35px 0 rgba(9,9,12,0.4);
 z-index: 9999;
 opacity: 0;
 pointer-events: none;
 transform: translateY(20px);
 transition: all 200ms linear;
}
.dark-light:checked ~ .sec-center .section-dropdown {
 background-color: #fff;
 box-shadow: 0 14px 35px 0 rgba(9,9,12,0.15);
}
.dropdown:checked ~ .section-dropdown{
 opacity: 1;
 pointer-events: auto;
 transform: translateY(0);
}
.section-dropdown:before {
 position: absolute;
 top: -20px;
 left: 0;
 width: 100%;
 height: 20px;
 content: '';
 display: block;
 z-index: 1;
}
.section-dropdown:after {
 position: absolute;
 top: -7px;
 left: 30px;
 width: 0; 
 height: 0; 
 border-left: 8px solid transparent;
 border-right: 8px solid transparent; 
 border-bottom: 8px solid #111;
 content: '';
 display: block;
 z-index: 2;
 transition: all 200ms linear;
}
.dark-light:checked ~ .sec-center .section-dropdown:after {
 border-bottom: 8px solid #fff;
} */

a {
 position: relative;
 color: #fff;
 transition: all 200ms linear;
 font-family: "Roboto", sans-serif;
 border-radius: 2px;
 /* padding: 5px 0;
 margin: 2px 0; */
 text-align: left;
 text-decoration: none;
 display: -ms-flexbox;
 display: flex;
 -webkit-align-items: center;
 -moz-align-items: center;
 -ms-align-items: center;
 align-items: center;
 justify-content: space-between;
 -ms-flex-pack: distribute;
}

/* .dark-light:checked ~ .sec-center .section-dropdown a {
 color: #102770;
}
a:hover {
 color: #102770;
 background-color: #ffeba7;
}
.dark-light:checked ~ .sec-center .section-dropdown a:hover {
 color: #ffeba7;
 background-color: #102770;
}
a .uil {
 font-size: 22px;
}
.dropdown-sub:checked + label,
.dropdown-sub:not(:checked) + label{
 position: relative;
 color: #fff;
 transition: all 200ms linear;
 font-family: 'Roboto', sans-serif;
 font-weight: 500;
 font-size: 15px;
 border-radius: 2px;
 padding: 5px 0;
 padding-left: 20px;
 padding-right: 15px;
 text-align: left;
 text-decoration: none;
 display: -ms-flexbox;
 display: flex;
 -webkit-align-items: center;
 -moz-align-items: center;
 -ms-align-items: center;
 align-items: center;
 justify-content: space-between;
 -ms-flex-pack: distribute;
 cursor: pointer;
}
.dropdown-sub:checked + label .uil,
.dropdown-sub:not(:checked) + label .uil{
 font-size: 22px;
}
.dropdown-sub:not(:checked) + label .uil {
 transition: transform 200ms linear;
}
.dropdown-sub:checked + label .uil {
 transform: rotate(135deg);
 transition: transform 200ms linear;
}
.dropdown-sub:checked + label:hover,
.dropdown-sub:not(:checked) + label:hover{
 color: #102770;
 background-color: #ffeba7;
}
.dark-light:checked ~ .sec-center .section-dropdown .for-dropdown-sub{
 color: #102770;
}
.dark-light:checked ~ .sec-center .section-dropdown .for-dropdown-sub:hover{
 color: #ffeba7;
 background-color: #102770;
}

.section-dropdown-sub {
 position: relative;
 display: block;
 width: 100%;
 pointer-events: none;
 opacity: 0;
 max-height: 0;
 padding-left: 10px;
 padding-right: 3px;
 overflow: hidden;
 transition: all 200ms linear;
}
.dropdown-sub:checked ~ .section-dropdown-sub{
 pointer-events: auto;
 opacity: 1;
 max-height: 999px;
}
.section-dropdown-sub a {
 font-size: 14px;
}
.section-dropdown-sub a .uil {
 font-size: 20px;
} */
.logo {
 position: fixed;
 top: 50px;
 left: 40px;
 display: block;
 z-index: 11000000;
 background-color: transparent;
 border-radius: 0;
 padding: 0;
 transition: all 250ms linear;
}

.logo:hover {
 background-color: transparent;
}

.logo img {
 height: 26px;
 width: auto;
 display: block;
 transition: all 200ms linear;
}

.dark-light:checked ~ .logo img {
 filter: brightness(10%);
}

@media screen and (max-width: 991px) {
 .logo {
 top: 30px;
 left: 20px;
 }

 .dark-light:checked + label,
 .dark-light:not(:checked) + label {
 top: 20px;
 right: 20px;
 }
}

.pass_section {
 display: flex;
}

.pass_input {
 width: 45%;
 height: 50px;
 border: 2px solid #b3b2b2;
 margin: 15px 0px;
 padding-left: 20px;
 font-weight: 600;
}

.generate_pass {
 width: 40%;
 height: 50px;
 background-color: #000000;
 margin: 15px 0px 15px 30px;
 border: none;
 color: white;
 padding-left: 20px;
 font-weight: 600;
 font-size: 20px;
}

.alert-danger {
 --bs-alert-color: #842029;
 --bs-alert-bg: #f8d7da;
 --bs-alert-border-color: #f5c2c7;
}

li.parsley-required {
 color: red;
 margin-top: 5px;
}

li.parsley-pattern {
 color: red;
}

li.parsley-type {
 color: red;
}

.input-col-3 input {
 width: 100% !important;
 height: 40px !important;
 border: 1px solid #181818 !important;
 background-color: #fff !important;
 margin: 0px 0px 15px !important;
 color: #000000 !important;
 padding-left: 20px !important;
 font-weight: 600 !important;
}

.report_label_rep {
 border: 1px solid black;
 width: 160px;
 text-align: center;
 font-size: 12px;
 font-weight: 600;
 padding: 5px;
 height: 40px;
}

select#id_baytree_representative {
 width: 390px;
}

select#id_gdpr {
 width: 220px;
}

.desired_input input {
 width: 411px !important;
 height: 40px !important;
 border: 1px solid #181818 !important;
 background-color: #fff !important;
 margin: 0px 0px 15px !important;
 color: #000000 !important;
 padding-left: 20px !important;
 font-weight: 600 !important;
}

.customer_input input {
 width: 380px !important;
 height: 40px !important;
 border: 1px solid #181818 !important;
 background-color: #fff !important;
 margin: 0px 0px 15px !important;
 color: #000000 !important;
 padding-left: 20px !important;
 font-weight: 600 !important;
}

.select-input {
 width: 100% !important;
 height: 40px !important;
 padding-left: 10px;
 font-size: 12px;
}

.select-input_collect {
 width: 65% !important;
 height: 40px !important;
}

.section-dropdown option {
 color: white;
}

.name_input_textarea {
 width: 100%;
 height: 300px;
 border: 3px solid #b3b2b2;
 margin: 15px 0px;
 padding: 20px;
 font-weight: 600;
 font-size: 23px;
}

.bg_section_notes {
 background-image: url(../images/background-sample.jpg);
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
}

.container_section_notes {
 width: 90%;
 margin: auto;
 background-color: #ffffff;
 padding: 50px;
 margin-bottom: 15px;
}

.admin_report_upoad {
 padding: 39px 30px;
}

.input-file {
 visibility: hidden;
 position: absolute;
}

.input-group {
 display: flex;
 align-items: center;
}

.upload_btn {
 background-color: #000;
 color: #fff;
 border: none;
 height: 40px;
 width: 40px;
 font-size: 24px;
 font-weight: 600;
}

.upload-input {
 margin: 0px;
 border-radius: 0px !important;
 background-color: #fff !important;
}

.admin_heading_notes {
 font-size: 26px;
 color: #000000;
 font-weight: 700;
}

@media screen and (max-width: 1024px) {
 .user_table th {
 width: 65px !important;
 }
 table.dataTable thead .sorting_asc {
 width: 65px !important;
 }

 table.dataTable thead .sorting {
 width: 70px !important;
 }

 .card_footer p {
 color: black;
 font-size: 12px;
 font-weight: 600;
 }

 .image_section {
 height: 250px;
 }

 .cards {
 height: 300px;
 }
}

@media screen and (max-width: 768px) {
 .image_section {
 height: 160px;
 }

 .cards {
 height: 200px;
 }

 .card_footer p {
 font-size: 10px;
 white-space: nowrap;
 }
}

@media screen and (max-width: 480px) {
  .butn-edit {
    font-size: 10px !important;
    padding: 3px 3px !important;
}
 .customer_add_bg {
 background-image: none;
 padding: 0px !important;
 }
 .customer_list {
 width: 100% !important;
 }
 .pass_section {
 display: block;
 }
 .pass_customer {
 width: 100% !important;
 }
 .generate_pass {
 width: 100%;
 margin: 15px 0px !important;
 }
 .date_input {
 width: 100% !important;
 }
 .container_section_admin {
 margin-bottom: 0px;
 }



 .card-image {
 width: 40%;
 object-fit: cover;
 }

 .bg_section_admin {
 background-image: none;
 padding: 0px;
 }

 .container_section_admin {
 padding: 10px 40px;
 }

 .container_section_notes {
 height: 750px;
 }

 .log-out {
 background-color: white;
 color: #000;
 border: 1px solid black;
 margin: 0px 20px;
 border-radius: 10px;
 padding: 5px 10px;
 font-size: 12px !important;
 }
}

@media screen and (max-width: 430px) {
 .custom_nav-container {
 display: flex !important;
 }

 .phone_num {
 color: #ffffff;
 font-size: 12px !important;
 }

 .form_footer {
 display: block;
 margin-top: 15px;
 }

 .login-btn {
 width: 100%;
 padding: 10px 0px;
 font-size: 18px;
 }

 .container_section {
 padding: 10px;
 }

 .logo_section {
 width: 50%;
 }

 .logo_section img {
 width: 100%;
 }

 .card_section {
 width: 85%;
 }

 .admin_bg_section {
 background-image: none;
 }

 .card_row {
 margin-bottom: 50px;
 }

 .bg_section {
 background-image: none;
 }
}

@media screen and (max-width: 375px) {
 .bg_section_notes {
 height: 850px;
 }

 .container_section_notes {
 height: 800px;
 }

 .log-out {
 background-color: white;
 color: #000;
 border: 1px solid black;
 margin: 0px 5px;
 border-radius: 10px;
 padding: 5px 5px;
 font-size: 10px !important;
 }

 .phone_num {
 color: #ffffff;
 font-size: 10px !important;
 }
}

@media screen and (max-width: 320px) {
 .bg_section {
 height: 750px;
 }

 .container_section {
 height: 645px;
 }

 .admin_bg_section {
 background-image: none;
 }
}

.select_input_gdpr {
 width: 100% !important;
 height: 40px !important;
 padding-left: 10px;
 font-size: 12px;
}

.select-input-gearbox {
 width: 150px !important;
 height: 40px !important;
}

.gear_box {
 width: 180px;
}

.color_exten {
 width: 186px;
}

.center_tyre {
 width: 50%;
}

.report_label_service {
 border: 1px solid black;
 width: 60%;
 text-align: center;
 font-size: 12px;
 font-weight: 600;
 padding: 5px;
 height: 40px;
 display: flex;
 align-items: center;
}

.report_label_add {
 border: 1px solid black;
 width: 17%;
 text-align: center;
 font-size: 12px;
 font-weight: 600;
 padding: 5px;
 height: 40px;
 display: flex;
 align-items: center;
}

.input_cust_add {
 width: 83% !important;
 padding-left: 10px;
}

.select-input-tyre {
 width: 100% !important;
 height: 40px !important;
 padding-left: 10px;
 font-size: 12px;
}

.baytree_signature {
 height: 150px !important;
}
/*.input_cust_collect_check{
  width: 20% !important;
  height: 40px !important;
}*/

.checkbox-outer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-left: 8px;
}

/* Hide the browser's default checkbox */
.checkbox-outer input {
  position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 40px;
      width: 35px;
      left: 0;
      z-index: 99;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
      top: 0;
      left: 0;
      height: 40px;
      width: 35px;
  border: 1px solid black;
}

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

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

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

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

/* Style the checkmark/indicator */
.checkbox-outer .checkmark:after {
  left: 14px;
      top: 11px;
      width: 8px;
      height: 16px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


.repres_label_vehicle_check{
  width: 73%;
  border: 1px solid black;
  text-align: center;
  font-size: 12px;
  padding: 5px;
  font-weight: 600;
  height: 40px;
  display: flex;
  align-items: center;
}
/* .signature_data {
 margin-top: 260px;
} */
  /* .signature_data2 {
  margin-top: 110px;
  } */
.signature_data2{
 margin-top: 150px;
 
}
.table_head th {
 border-right: 1px solid black;
 font-size: 12px;
 font-weight: 500;
 padding: 5px 15px;
}

.user_table th {
 border-right: 1px solid black;
 font-size: 10px;
 font-weight: 500;
 padding: 5px 15px;
}

.user_table_data {
 font-size: 10px;
 font-weight: 500;
 padding: 5px 15px;
}

.butn-no {
 background-color: red;
 color: white;
 border: none;
 font-size: 12px;
 padding: 3px 10px;
 font-weight: 600;
}

.butn-yes {
 background-color: green;
 color: white;
 border: none;
 font-size: 12px;
 white-space: nowrap;
 padding: 3px 10px;
 font-weight: 600;
}

.butn-edit {
 background-color: black;
 color: white;
 border: none;
 font-size: 12px;
 white-space: nowrap;
 padding: 3px 10px;
 font-weight: 600;
}

.td_butn {
 background: black;
 color: white;
 border: none;
}

/* .navbar-collapse{
 display: flex;
 justify-content: center;
 align-items: center;
} */
.log-out {
 background-color: white;
 color: #000;
 border: 1px solid black;
 margin: 0px 10px;
 border-radius: 10px;
 padding: 5px 10px;
 font-size: 15px;
}

.phone_num {
 color: #ffffff;
 font-size: 16px;
 margin-left: 10px !important;
}

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

.fname_input {
 width: 100% !important;
 height: 40px !important;
 font-size: 12px;
}

.fname_label {
 width: 108px !important;
}

.add_customer_user {
 width: 170px !important;
}

.customer_list {
 width: 80%;
 margin: auto;
 background-color: #ffffff;
 padding: 50px;
 padding-bottom: 100px;
 /* height: 700px; */
 margin-bottom: 15px;
}

.customer_add_bg {
 background-image: url(../images/background-sample.jpg);
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 /* height: 750px; */
 padding: 20px 0px;
}

li.parsley-required {
 color: red;
 margin-top: 0px !important;
 margin-bottom: 0px !important;
}

.pass_section_customer {
 display: block;
}

.pass_customer {
 width: 50%;
}

.password_input {
 width: 100%;
}

.admin_header {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.view-pdf {
 display: flex;
 justify-content: space-between;
}

.report_created {
 width: 90%;
 margin: auto;
 background-color: #ffffff;
 padding: 10px;
 margin-bottom: 15px;
}
@media screen and (max-width: 1280px) {
 .dataTables_wrapper {
 width: 100% !important;
 padding: 0px !important;
 overflow-x: auto !important;
 }
 th.sorting.sorting_asc {
 width: 65px !important;
 }
 table.dataTable thead .sorting {
 background-image: url(../images/sort_both.png);
 width: 60px !important;
 }
}
@media screen and (max-width: 480px) {
 .report_label,
 .report_input,
 .repres_label,
 .sec-center,
 .report_label_desird,
 .input_cust,
 .report_label_cus,
 .report_label_home,
 .input_cust_home,
 .sec-center_fname,
 .report_label_reg,
 .report_label_vehicle_con,
 .input_cust_vehicle,
 .report_label_service,
 .sec-center_center_service,
 .report_label_settlement,
 .input_cust_settle,
 .report_label_current,
 .report_label_Customer,
 .input_cust_crrent,
 .report_label_annual,
 .sec-center_center_annual,
 .repres_label_vehicle,
 .input_cust_collect,
 .select-input_collect,
 .report_label_add,
 .input_cust_add,
 .input_cust_annual,
 .sec-center_reg {
 width: 50% !important;
 }
 .signature_input {
 margin-top: 130px;
 }
 .signature_data2 {
 margin-top: 10px;
 }
 .form_bg {
 background-image: none;
 }
 .container_section_cus_form {
 width: 100%;
 }
}
.background-sample {
  width: 100%;
  /* height: 100%; */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 20px 0px;
}

@keyframes changeBackground {
 0% {
 background-image: url(../images/baytree-cars-showroom-1.jpg);
 }
 16.67% {
 background-image: url(../images/baytree-cars-showroom-2.jpg);
 }
 33.34% {
 background-image: url(../images/baytree-cars-showroom-3.jpg);
 }
 50% {
 background-image: url(../images/baytree-cars-showroom-4.jpg);
 }
 66.67% {
 background-image: url(../images/baytree-cars-showroom-5.jpg);
 }
 83.34% {
 background-image: url(../images/baytree-cars-showroom-6.jpg);
 }
 100% {
 background-image: url(../images/baytree-cars-showroom-7.jpg);
 }
}

.select_input_gdpr {
 width: 100%;
 appearance: none;
 -webkit-appearance: none;
 -moz-appearance: none;
 padding-right: 30px; /* to make room for the icon */
}

.down-icon {
 pointer-events: none; /* Allow clicks to pass through to the select element */
}

.sign_baytree {
 width: 35%;
 display: block;
}
.repres_label_vehicle_sign {
 border: 1px solid black;
 width: 100%;
 font-size: 12px;
 padding: 5px;
 height: 40px;
 font-weight: 600;
}
.sign_section {
 display: flex;
 justify-content: end;
 padding: 30px;
}
.sign_section button {
 background-color: red;
 border: none;
 color: white;
 border-radius: 10px;
 font-size: 16px;
 font-weight: 600;
 padding: 4px 10px;
}

.signature-pad {
 border: 1px solid #000;
 height: 300px;
}

.date_input {
 width: 20%;
}

.report_label,
.report_input,
.repres_label,
.sec-center,
.report_label_desird,
.input_cust,
.report_label_cus,
.report_label_home,
.input_cust_home,
.sec-center_fname,
.report_label_reg,
.report_label_vehicle_con,
.input_cust_vehicle,
.report_label_service,
.sec-center_center_service,
.report_label_settlement,
.input_cust_settle,
.report_label_current,
.report_label_Customer,
.input_cust_crrent,
.report_label_annual,
.sec-center_center_annual,
.repres_label_vehicle,
.input_cust_collect,
.select-input_collect,
.report_label_add,
.input_cust_add,
.input_cust_annual,
.sec-center_reg {
 font-size: 12px;
 border: 1px solid black !important;
 color: black;
 background: #fff;
}


input[type="search"] {
    border: 1px solid black !important;
}


select{
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
.sign_section{
  display: flex;
  justify-content: end;
  padding: 30px;
}
.sign_section button{
  background-color: red;
  border: none;
  color: white;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  padding: 4px 10px;
}

.signature-pad { border: 1px solid #000; 
   height: 300px;
}

.date_input{
  width: 20%;
}


.calligraphy-font {
  font-family: 'Great Vibes', cursive;
  font-size: 20px !important;
}



.url_list a{
  color: rgba(4, 148, 231, 0.973);
}




@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}



@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
} 

 .loader_bg{
  display: flex;
  justify-content: center;
  background: #5854543d;
  height: 100vh;
  align-items: center;
  width: 100%;
}

.form_footer_sec_upload{
  display: flex;
  justify-content: end;
  margin-top: 15px;
} 



.loader-overly {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  height: 100%;
  z-index: 99999999;
  opacity: 1;
}

.loader {
  position: absolute;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 2s linear infinite;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: calc(30% + 0px);
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loader_bg {
  display: flex;
  justify-content: center;
  background: #5854543d;
  height: 100vh;
  align-items: center;
  width: 100%;
}

.form_footer_sec_upload {
  display: flex;
  justify-content: end;
  margin-top: 15px;
}


/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: not-allowed;
  color: white;
  background: red;
  opacity: 1;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 150px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  /* Position the tooltip above the button */
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.loader {
  position: absolute;
  border-radius: 50%;

  width: 80px;
  height: 80px;
  animation: spin 2s linear infinite;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: calc(30% + 0px);
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


th.sur_no.sorting.sorting_asc {
  width: 30px !important;
  padding: 6px !important;
}
th.sur_no.sorting{
  width: 30px !important;
  padding: 6px !important;
}
th.sur_no.sorting.sorting_desc {
  width: 30px !important;
  padding: 6px !important;
}

table.dataTable thead th, table.dataTable thead td {
  padding: 10px 5px !important;
  border-bottom: 1px solid #111;
}




@media only screen and (min-width: 2560px) {
  .image_section {
    height: 450px;
}
.card_footer p {
  font-size: 28px;
}
}