* {
     font-family: sans-serif;
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 table {
     text-align: left;
 }

 @media only screen and (min-width: 768px) {
     div#container {
         width: 1100px;
         margin: 0 auto;
         height: 100%;
     }

     #signatureBoxOne {
         border: 1px solid black;
     }

     #signatureBoxTwo {
         border-top: 1px solid black;
         border-right: 1px solid black;
         border-bottom: 1px solid black;
     }

     div#headerImg {
         width: 40%;
         margin: auto;
         margin-bottom: 20px;
     }

     .alignTitle {
         padding: 0 0 0 11px;
         font-size: 12px;
     }

     div#content {
         width: 85%;
         margin: auto;
         padding: 20px 0;
     }
 }

 /* Extra small devices (phones, 600px and down) */
 @media only screen and (max-width: 600px) {
     #discloreText {
         display: none;
     }

     div#headerImg {
         width: 100%;
         margin: auto;
         margin-bottom: 20px;
     }

     .alignTitle {
         padding: 0 0 0 1px;
         font-size: 11px;
     }

     div#content {
         width: 92%;
         margin: auto;
         padding: 20px 0;
     }
 }


 div#headerImg>img {
     width: 100%;
 }

 table {
     margin-bottom: 20px;
     width: 100%;
     table-layout: fixed;
     border-spacing: 0;
     border-collapse: collapse;
 }

 table th.sectionHead,
 table th.subHead {
     padding: 3px;
     padding-left: 10px;
     background-color: #ddd;
     border: 1px solid #000;
 }

 table th.subHead {
     font-size: 0.95em;
 }

 table th>span.headSubText {
     font-weight: normal;
 }

 table tbody {
     border: 1px solid #000;
 }

 tr.insideRow {
     border-top: 1px solid #000;
 }

 td {
     padding-left: 5px;
     font-size: 0.8em;
     border-left: 1px solid #000;
     border-right: 1px solid #000;
 }

 .alignTitle {
     padding: 0 0 0 11px !important;
     font-size: 12px;
 }

 tr.formFields td {
     padding: 0;
 }

 tr.insideRow td {
     padding: 0;
 }

 tr.insideRow td.alignTitle {
     padding: 0 0 0 11px !important;
 }

 td.YesNo {
     text-align: center;
     padding: 0;
 }

 input.check {
     /*-webkit-appearance: none;*/
     width: 20px;
     height: 20px;
     margin: 1px 0 0 0;
     padding: 0;
     font-size: 15px;
 }

 input.check:checked {
     margin: 0;
 }

 /*input.check:checked:after {
    content: '\2714';
    text-align: center;
    margin-left: 30%;
}*/
 td>input,
 td>textarea {
     width: 100%;
     padding: 3px 6px;
     font-size: initial;
     border: none;
     background-color: #DDE4FF;
 }

 td>textarea {
     margin: 0;
     vertical-align: top;
     resize: vertical;
 }

 td>input:focus,
 td>textarea:focus {
     outline: none;
 }

 td>input:required,
 td>textarea:required {
     background-color: rgba(255, 0, 0, 0.16);
 }

 div#legend,
 div#legend * {
     float: left;
     margin: 5px;
 }

 #legCol {
     width: 40px;
     height: 20px;
     background-color: rgba(255, 0, 0, 0.16);
 }

 tr.formFields td textarea {
     max-width: 100%;
     margin-bottom: 0;
 }

 p,
 ul {
     padding: 5px 0;
     font-size: 0.8em;
 }

 ul {
     margin-left: 10%;
 }

 ul>li {
     padding: 3px;
 }

 ul:last-of-type {
     list-style-type: none;
 }

 ul:last-of-type>li {
     padding: 0;
 }

 table#sigBlock {
     width: 60%;
     margin-top: 20px;
 }

 #sigBlock tbody {
     border: none;
 }

 #sigBlock td {
     border: none;
 }

 #sigBlock td>input {
     font-size: x-large;
 }

 .sigFields {
     border-bottom: 1px solid #000;
 }

 .btmBtn {
     float: left;
     width: 30%;
     height: 50px;
     margin: 4px;
     padding: 13px;
     background-color: #027b47;
     border: 1px solid #000;
     font-size: 17px;
     font-weight: normal;
     color: white;
     text-align: center;
     cursor: pointer;
 }

 /*#uploadResume {
    margin-left: calc(-30% - 20px);
    z-index: 10;
    opacity: 0;
}*/


 .yesnoradios {
     width: 25px;
     margin: 0 auto;
 }

 .centerText {
     text-align: center;
 }

 tr.insideRow td.centerText {
     padding: 5px !important;
 }

 .btmBtn:hover {
     color: white;
     text-decoration: none;
 }

 .btmBtn {
     text-decoration: none;
 }

 input[type=checkbox],
 input[type=radio] {
     margin: 0;
 }

 td.YesNo {
     font-size: 11px;
 }

 input.check {
     width: 15px;
     height: 15px;
 }

 td>input {
     height: 30px;
 }

 input:invalid {
     background: red;
 }

 input:-webkit-autofill {
     -webkit-box-shadow: 0 0 0 30px white inset;
 }

 #bottomTable tbody,
 #bottomTable td {
     border: 0;
 }

 /* Fix Bootstrap row negative margins that get cut off by overflow-x: hidden */
 #bottomTable.row {
     margin-left: 0 !important;
     margin-right: 0 !important;
 }

 #submitButton {
     width: 90%;
 }

 .custom-file-input {
     color: transparent;
     width: 100%;
 }

 .custom-file-input::-webkit-file-upload-button {
     visibility: hidden;
 }

 .custom-file-input::before {
     content: 'Select A File to Attach';
     color: white;
     text-align: center;
     width: 100%;
     display: inline-block;
     background: -webkit-linear-gradient(top, #027b47, #027b46);
     border: 1px solid #999;
     border-radius: 3px;
     padding: 10px;
     outline: none;
     white-space: nowrap;
     -webkit-user-select: none;
     cursor: pointer;
     /*  text-shadow: 1px 1px #fff;
*/
     font-weight: 700;
     font-size: 16px;
 }

 .custom-file-input:hover::before {
     border-color: black;
 }

 .custom-file-input:active {
     outline: 0;
 }

 .custom-file-input:active::before {
     background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
 }

 table.headerTable,
 table.headerTable tr,
 table.headerTable td,
 table.headerTable tbody {
     border: 0
 }

 table.headerTable td {
     padding: 5px 0;
 }

 .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper {
     padding: 0.5em 0 0.5em 3em;
 }

 .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {
     height: 19px;
     width: 30px;
     top: 0.1em;
 }

 .ui-icon.mastercard {
     background: url("images/mastercard.png") 0 0 no-repeat;
 }

 .ui-icon.visa {
     background: url("images/visa.png") 0 0 no-repeat;
 }

 .ui-icon.americanexpress {
     background: url("images/americanexpress.png") 0 0 no-repeat;
 }

 /* select with CSS avatar icons */
 option.avatar {
     background-repeat: no-repeat !important;
     padding-left: 20px;
 }

 .avatar .ui-icon {
     background-position: left top;
 }

 .ui-selectmenu-button.ui-button {
     width: 100%;
 }

 #pricingPopup {
     display: none;
     position: fixed;
     z-index: 1000;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
 }

 .popup-content {
     background-color: #fefefe;
     margin: 5% auto;
     padding: 20px;
     border: 1px solid #888;
     border-radius: 8px;
     width: 80%;
     max-width: 600px;
     position: relative;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }

 .popup-header {
     background-color: #027b48;
     color: white;
     padding: 15px 20px;
     margin: -20px -20px 20px -20px;
     border-radius: 8px 8px 0 0;
     font-size: 18px;
     font-weight: bold;
 }

 .close-popup {
     color: white;
     float: right;
     font-size: 28px;
     font-weight: bold;
     cursor: pointer;
     line-height: 1;
 }

 .close-popup:hover {
     opacity: 0.7;
 }

 .pricing-table {
     width: 100%;
     border-collapse: collapse;
     margin-top: 10px;
 }

 .pricing-table th,
 .pricing-table td {
     border: 1px solid #ddd;
     padding: 12px 8px;
     text-align: center;
 }

 .pricing-table th {
     background-color: #f5f5f5;
     font-weight: bold;
     color: #333;
 }

 .pricing-table tbody tr:hover {
     background-color: #f9f9f9;
     cursor: pointer;
 }

 .pricing-table tbody tr.manual-selected {
     background-color: #e8f5e8;
     border-left: 4px solid #4caf50;
     font-weight: bold;
 }

 .pricing-table tbody tr.auto-selected {
     background-color: #e3f2fd;
     border-left: 4px solid #2196f3;
 }

 .pricing-table tbody tr {
     cursor: pointer;
     transition: background-color 0.2s ease;
 }

 .pricing-table tbody tr:hover {
     background-color: #e8f5e8 !important;
     transform: scale(1.02);
 }

 .pricing-table tbody tr:active {
     background-color: #d4edda !important;
 }

 .popup-buttons {
     margin-top: 20px;
     text-align: right;
 }

 .popup-buttons button {
     margin-left: 10px;
 }

 .product-info {
     background-color: #f8f9fa;
     padding: 15px;
     border-radius: 4px;
     margin-bottom: 15px;
 }

 .product-info h4 {
     margin: 0 0 10px 0;
     color: #027b48;
 }

 .product-info p {
     margin: 5px 0;
     color: #666;
 }

 /* Price input highlighting when auto-updating */
 .price-auto-updating {
     background-color: #e3f2fd !important;
     border: 2px solid #2196f3 !important;
     transition: all 0.3s ease;
 }

 .priceProduct[readonly]:focus {
     outline: none;
     box-shadow: 0 0 3px rgba(255, 193, 7, 0.5);
 }

 .price-locked-but-changed {
     background-color: #fff3cd !important;
     border: 2px solid #ffc107 !important;
     cursor: pointer !important;
 }

 .price-locked-but-changed:hover {
     background-color: #ffeaa7 !important;
 }

 .priceProduct[data-price-locked="true"] {
     background-color: #f8f9fa !important;
     border: 1px solid #6c757d !important;
 }

 /* .priceProduct {
     background-color: #f8f9fa !important;
     cursor: not-allowed;
 } */

 .priceProduct:focus {
     outline: none;
     box-shadow: 0 0 3px rgba(2, 123, 72, 0.3);
 }

/* Discount Button Styles */
.discount-button {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #027b47;
    color: white;
    border: 1px solid #025a36;
    border-radius: 4px;
    padding: 3px 9px;
    margin: 3px
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.discount-button:hover {
    background-color: #025a36;
    transform: translateY(-50%) scale(1.02);
}

.discount-button:active {
    background-color: #01492b;
    transform: translateY(-50%) scale(0.98);
}

/* Make the product name cell relative positioned to contain the absolute button */
td[data-label="Product Name"] {
    position: relative;
}