/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

 .red-color{
   color: #dc3545;
 }
 
 .hide {
   display: none;
 }

 .alert-servicem8{    
    background-color: #cce5ff !important;
    border-color: #b8daff !important;
    color: #004085 !important;
 }

 .float-right {
   float: right !important;
}

.clearfix::after {
   content: "";
   display: table;
   clear: both;
}

.display-flex{
   display: flex;
}

/* purchase order css */
.purchase-order {
   /* margin: 0 auto; */
   padding: 20px;
   border: 1px solid #eaeaea;
   background-color: #ffffff;
}

.header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-bottom: 20px;
}

.logo img {
   max-width: 150px;
}

.company-info {
   text-align: right;
}

.company-info h1 {
   margin: 0;
   font-size: 24px;
   font-weight: bold;
   letter-spacing: 2px;
}

.company-info p {
   margin: 5px 0;
   font-size: 14px;
}

.order-info {
   display: flex;
   justify-content: space-between;
   margin-top: 20px;
}

.order-info .order-number p,
.order-info .order-date p {
   font-size: 18px;
   font-weight: bold;
}

.details {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   margin-top: 20px;
   padding: 20px;
   background-color: #f7f7f7;
}

.detail-box {
   padding: 10px;
}

.detail-box strong {
   display: block;
   font-size: 16px;
   font-weight: bold;
   color: #333;
   margin-bottom: 5px;
}

.detail-box p {
   margin: 0;
   font-size: 14px;
   color: #555;
}

/* Toggle css */

.toggle-section {
   max-width: 800px;
   margin: 0 auto;
   background-color: #ffffff;
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toggle-section p {
   font-size: 18px;
   font-weight: bold;
   margin-bottom: 20px;
}

.toggle-wrapper {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
}

.toggle-label {
   display: flex;
   align-items: center;
   font-size: 15px;
   margin-bottom: 15px;
   cursor: pointer;
}

.toggle-label input[type="checkbox"] {
   display: none;
}

.toggle-label .slider {
   position: relative;
   width: 50px;
   height: 24px;
   background-color: #9b0202;
   border-radius: 24px;
   margin-left: 10px;
   transition: background-color 0.3s;
}

.toggle-label .slider::before {
   content: "";
   position: absolute;
   width: 20px;
   height: 20px;
   background-color: #fff;
   border-radius: 50%;
   top: 2px;
   left: 2px;
   transition: transform 0.3s;
}

.toggle-label input[type="checkbox"]:checked + .slider {
   background-color: #76c043;
}

.toggle-label input[type="checkbox"]:checked + .slider::before {
   transform: translateX(26px);
}

.mar-bot-15{
   margin-bottom: 15px !important;
}

.mar-bot-10{
   margin-bottom: 10px;
}

.pad-bot-0{
   padding-bottom: 0px !important;
}

.box{
   text-align: center;
   padding: 35px;
   cursor: pointer;
   white-space: nowrap;
   background: #f0f0f0;
   border: solid 1px #ccc;
   border-radius: 3px;
   margin-bottom: 10px;
}

.mar-top-40{
   margin-top: 40px;
}

.small-img{
   width: 50px;
}

.width-60{
   width: 60px;
}

.gray-color{
   color: #ccc;
}

.green-color{
   color: #7dc836;
}

.font-size-20px{
   font-size: 20px;
}

.text-right{
   text-align: right;
}

.width-job-view{
   display: flex;
}

.rows{
   background-color: #fff;
}

.input-mobile-number {
   padding: .5em;
   background: #b8ed86;
   text-align: center;
   position: relative;
   font-size: 85%;
}

.bg-color-job-view{
   background-color: #efefef !important;
}

.bg-white{
   background-color: #fff !important;
}

.title-job-view{
   font-size: 24px;
   font-weight: 100;
}

.sub-title-job-view{
   font-size: 24px;
   font-weight: 100;
   padding: 20px;
}

.mar-15{
   margin: 15px;
}

.title-lbl-tbl-job-view{
   font-size: 25px;
   color: #ccc;
   font-weight: 100;
   margin-bottom: 0px;
}

.btn-status{
   background-color: #7dc836 !important;
   border-color: #7dc836 !important;
   color: #fff !important;
   padding: 0.7em 5em !important;
   font-size: 1.3em !important;
}

.btn-white{
   background-color: #fff !important;
   border-color: #7dc836 !important;
   color: #7dc836 !important;
   padding: 0.7em 5em !important;
   font-size: 1.3em !important;
}

.mar-15{
   margin: 15px;
}

.btn-green-left{
   background-color: #7dc836 !important;
   border-color: #7dc836 !important;
   border-radius: 0px !important;
   padding: 0.5em !important;
   font-size: 1.2em !important;
   color: #fff !important;
}

.send-message-form{
   padding: 0.5em !important;
   border-color: #202020 !important;
   border-radius: 2px !important;
   font-size: 22px !important;
}

.btn-navigate{
   color: #7dc836 !important;
   border: solid 1px #7dc836 !important;
   font-size: 0.9em !important;
   text-align: center !important;
}

.btn-navigate:hover{
   color: #fff !important;
   background-color: #7dc836 !important;
   border: solid 1px #7dc836 !important;
}

.mar-right-15{
   margin-right: 15px;
}