/*----------------------------- template1 design ------------------------------*/
body {
  color: #2B2B2B;
  font-family: 'Poppins' !important;
  overflow-x: hidden;
}
body {
  color: #2B2B2B;
  font-family: 'Poppins' !important;
  overflow-x: hidden;
}
.template-content {
    display: none;
  }
  .template-content.active {
    display: block;
  }
  
  
  
  
  .d-flex.justify-content-center {
    margin-top: 10px;
  }
  
  .btn-template {
    padding: 4px 6px;
    font-weight: 500;
    font-size: 10px;
    background-color: #ffc107;
    border: none;
  }
  
  .btn-template.active::before {
    content: "✔ ";
  }
  
  .container.bill_pr {
    background: #fff;
    border: 1px solid #CFCFCF;
    margin-top: 5px;
    padding: 0px;
  }
  
  .red_line {
    background: #F00107;
    height: 20px;
    margin-bottom: 14px;
  }
  .bottom_line {
    background: #F00107;
    height: 20px;
  }

  #template1 .details h2 {
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-weight: 600;
    margin-left: 0px !important;
}
  
  .details h2 {
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-weight: 600;
    align-items: center !important;
    display: flex;
    margin-left: 15px;
}

.company_image {
  display: flex;
}
  
  .add {
    width: 88%;
  }
  
  .details {
    text-transform: uppercase;
  }
  
  .add p {
    font-size: 9px;
    font-weight: 600;
    line-height: 12px;
  }
  
  
  table.tables1 {
    width: 100% !important;
  }
  
  tbody, td, tfoot, th, thead, tr {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
  }
  
  td.trs {
    text-transform: uppercase;
  }
  
  .second_tables p {
    margin-bottom: 0px;
  }
  
  td.tds {
    text-transform: uppercase;
  }
  
  .three_tables span {
    font-size: 12px;
  }
  
  .three_tables td {
    font-size: 12px;
  }
  
  .four_tables td {
    font-size: 12px;
  }
  
  .five_tables span {
    font-size: 12px;
  }
  
  .five_tables td {
    font-size: 12px;
  }
  
  .five_tables .total_box input {
    font-size: 18px;
    height: 20px;
    width: 20px;
  }
  
  /*----------------------------- template2 design ------------------------------*/
  
  .fs h2.company_name {
    font-size: 16px;
    font-weight: 600;
}
  
  .text-center {
    text-align: center !important;
    font-size: 18px;
  }
  
  p.bill_code.text-center.py-2.application_number {
      text-align: center !important;
      width: 100%;
  }
  
  
  
  
  
  /*----------------------------- template3 design ------------------------------*/
  
  
  
  #template3.container.bill_pr {
    background: #fff;
    border: 1px solid #CFCFCF;
    margin-top: 5px;
    padding: 20px;
  }
  
  #template3 .colums1 {
    display: flex;
  }
  
  #template3 .details {
    text-transform: uppercase;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
  
  #template3 .add {
    width: 27%;
  }
  
  td.sf {
    display: flex;
    justify-content: space-evenly;
    background: #0f1b2d;
    padding: 5px;
    border-radius: 8px;
    color: #fff;
    font-size: 10px;
  }
  
  
  
  
  /*----------------------------- template4 design ------------------------------*/
  
  
  .header4 {
    background-color: #e40000;
    color: white;
    padding: 10px;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
  }
  .bill-details4 {
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }
  
  .bill-details4 p {
    line-height: 1;
    font-size: 13px;
  }
  
  
  .bill-summary, .usage-info {
    width: 100%;
    margin-top: 40px;
    text-align: center;
  }
  .newtb table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
  }
  
  th.usage-infooo {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
  }
  td.usage-infooo {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
  }
  
  .summary {
    background: #ffe6e6;
    padding: 10px;
    margin-top: 20px;
  }
  .qr-code {
    text-align: center;
    margin-top: 20px;
  }
  .footer {
    background-color: #e40000;
    color: white;
    text-align: center;
    padding: 10px;
    margin-top: 10px;
  }
  @media (max-width: 600px) {
    .bill-details {
        flex-direction: column;
        text-align: center;
    }
  }
  
  
  table.newtb {
    margin: auto;
    width: 100%;
  }
  
  .footer p {
    margin: 0px;
  }
  
  .summary p {
    margin-bottom: 8px;
  }
  
  
  @media (min-width: 320px) and (max-width: 390px) {
    .btn-template{
      font-size: 5px;
    }
  
    .custom-label h4 {
      font-size: 18px;
  }
  
  .utility_bill {
    padding: 0px !important;
  }
  
  
  .add p {
    margin-bottom: 0px;
  }
  

  p.bill_code.text-center.application_number {
    font-size: 7px !important;
  }
  
  td.td1 {
    display: none;
  }
  
  td.td2 {
    width: 100% !important;
    padding: 0px 10px !important;
  }
  
  
  td.tds {
    width: 100% !important;
    padding: 0px 10px !important;
  }
  
  td.tda1 {
    width: 100% !important;
    display: block;
    padding: 24px 10px 0px 10px !important;
  }
  
  table.mms {
    margin-bottom: 65px !important;
  }
  
  table.dsa {
    width: 95% !important;
  }
  
  td.trs {
    width: 100% !important;
    display: block !important;
  }
  
  td.tta {
    width: 100% !important;
    display: block !important;
  }
  
  .btn-template {
    font-size: 7px !important;
  }
  }
  
  @media (min-width: 391px) and (max-width: 768px){

  
  td.td2 {
    display: block;
    width: 100% !important;
    font-size: 12px;
  }
  
  td.td1 {
    display: none;
  }
  
  
  td.tda1 {
    display: block;
    width: 100% !important;
  }
  
  table.mms {
    margin-bottom: 75px !important;
  }
  
  table.dsa {
    width: 95% !important;
  }
  
  td.trs {
    width: 100% !important;
    display: block;
  }
  
  td.tta {
    width: 100% !important;
    display: block;
  }
  
  
  .numm p {
      font-size: 9px !important;
  }
  }
  
/*------------------ layout page css------------------------------------ */
        .header-logo {
            width: 171px !important;
        }

        .user img {
            width: 26px;
            border-radius: 100px;
        }

        .user {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            padding: 6px 0;
        }

        .dropdown-toggle::after {
            color: black;
        }

        .header_div {
            background: #eff2ff;
            padding: 10px;
            width: 100%;
            height: 54px !important;
        }

        .compny {
            margin: 10px 0px 0;
            float: left;
        }

        .header_div {
            background: #eff2ff;
            padding: 0px 12px;
            width: 100%;
            height: 54px !important;
            align-items: center;
        }


        .desc table {
            margin: 5px 0 0;
            font-size: 10px !important;
            line-height: 10px !important;
        }

        a {
            text-decoration: none !important;
        }


        .documents {
            width: 270px !important;
            padding: 25px !important;
        }

        .main-menu .main-nav ul li.active>a {
            background-color: #f0b805;
        }

        dl,
        ol,
        ul {
            margin-top: 0;
            margin-bottom: 0px !important;
        }

        a.curser {
            cursor: context-menu;
        }

        .mini_header {
            color: #fff;
        }


        @media only screen and (max-width: 768px) {

            .footer-bottom.mt-30 {
                padding: 4px;
            }

            ul.footer-widget-list-item {
                padding: 0;
            }

        }

        .footer-widget-logo {
            width: 200px;
            height: auto !important;
            object-fit: cover;
        }