@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');


/* Clear padding, and margin */
* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
   appearance: none;
   -webkit-appearance: none; 
   -moz-appearance: none;
   margin: 0; 
} 
 input::placeholder {
   color: rgba(158, 158, 158, 0.5);
   font-weight: 600;
}
input, select, textarea {
   border: 2px solid rgb(165, 165, 165);
}
input:focus::placeholder {
   color: transparent;
}
input:focus, select:focus {
   border: 2px solid #4aa5eb;
   outline: none;
   box-shadow: 0 0 4px 1px rgba(74, 165, 235, 0.8);
}

body {
   display: flex;
   justify-content:center;
   flex-wrap: wrap;
   height: 100%;
   min-height: 100vh;
   padding-top: 25px;
   padding-bottom: 25px;
   background-color: #393939;
   background-image: url("../../images/metal-background-black.jpg");
   /* background-image: url("../../images/metal-background-black.jpg"), url("../../images/HD-logo.png"); */
   background-position: center;
   background-repeat: no-repeat, repeat;
   background-size: cover, 100px 100px;
   background-blend-mode: soft-light;
   font-family: 'Roboto', sans-serif;
   overflow-x: scroll;
}

.form-container {
   position: relative;
   padding: 18px;
   border-radius: 4px;
   background-color: #f6f6f6;
   width: 400px;
   height: fit-content;
}
header {
   position: relative;
   top: -19px;
   left: -18px;
   width: 400px;
   height: 50px;
   background-color: #333;
   font-size: 1.2rem;
   color: #f6f6f6;
   border-radius: 4px 4px 0 0;
   opacity: 1;
   margin-bottom: 5px;
}
.header__wrapper {
   width: 100%;
   height: 100%;
   padding: 15px 18px 15px 18px;
}
.header__menu-list {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 25px;
   list-style: none;   
}
.header__menu-list-item {
   width: auto;
   cursor: pointer;
}
.header__menu-list-item > svg {
   transition: color 0.3s ease-in-out;
}
.header__menu-list-item > svg:hover {
   color: rgb(250, 145, 48);
}
.hide-feedback {
   display: none;
}

.tab-wrapper {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   margin-bottom: 25px;
}
.tablinks {
   width: 50%;
   height: 45px;
   color: white;
   font-weight: 600;
   padding: 10px 15px;
   background-color: rgb(112, 112, 112);
   /* border-radius: 4px; */
   border: none;
   cursor: pointer;
   transition: 0.3s;
}
.tablinks:hover {
   background-color: rgb(250, 145, 48);
}
.tablinks.active {
   background-color: rgba(249, 99, 2, 1);
}
.tabcontent {
   display: none;
}

hr {
   margin: 20px 0;
}

.form-heading {
   position: relative;
   margin-bottom: 25px;
   /* border-bottom: 2px solid rgb(168, 168, 168); */
   border-bottom: 2px solid rgba(247, 100, 2);
} 
.form-heading > p {
   position: relative;
   bottom: -2px;
   font-size: 1.5em;
   font-weight: bold;
   width: fit-content;
   /* border-bottom: 3px solid rgba(247, 100, 2); */
}
.input-group {
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
}
.input-group > .error-text-wrapper, .error-icon-wrapper {
   position: absolute;
   width: max-content;
   height: auto;
   /* background-color: red; */
}
.error-text-wrapper {
   font-size: 0.7em;
   font-weight: 600;
   color: red;
   top: 106%;
   left: 57%;
   display: none;
}
.error-icon-wrapper {
   top: 32%;
   left: 87%;
   font-size: 1em;
   color: red;
   transform: scale(0);
   transition: all 0.3s ease-in-out
}
.fist-error-icon {  /*form1 drop down book*/
   top: 32%;
   left: 87%;
}
.error-input-border {
   border: 2px solid red;
   border-radius: 4px;
   outline: none;
   /* box-shadow: 0 0 4px 1px rgba(255, 0, 0, 0.8); */
}
.error-shake {
   animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
   transform: translate3d(0, 0, 0);
}
@keyframes shake {
   10%, 90% {
     transform: translate3d(-1px, 0, 0);
   }
   
   20%, 80% {
     transform: translate3d(2px, 0, 0);
   }
 
   30%, 50%, 70% {
     transform: translate3d(-4px, 0, 0);
   }
 
   40%, 60% {
     transform: translate3d(4px, 0, 0);
   }
 }
 .success-input-border {
   border: 2px solid rgb(0, 215, 0);
   border-radius: 4px;
   outline: none;
 }

.input-group input[type="number"] {
   width: 25%;
   height: 50px;
   padding: 0 30px 0 10px;
   border-radius: 4px;
   /* text-align: center; */
   font-size: 17px;
   font-weight: 600;
   color: #333;
}
.input-group > .input-unit-inch {
   position: absolute;
    right: 8px;
    opacity: 0.5;
    font-weight: 600;
}
.input-group:nth-last-child(3) {
   margin-bottom: 40px;
}
.input-wrapper {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
}
.input-group label {
   font-weight: 500;
   font-size: 15px;
}
.input-group > label[for=roll-width]::after {
   content: "For runners use 6ft wide";
   position: relative;
   top: 4px;
   left: 1px;
   display: block;
   width: max-content;
   font-size: 11px; 
}

/* Roll width selection styling */
#roll-width {
   width: 60%;
   height: 50px;
   padding: 0 10px;
   border-radius: 4px;
   text-align: center;
   font-size: 15px;
   font-weight: 600;
   color: #333;
}
.add-btn-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
}
#add-cut-btn {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 50%;
   height: 45px;
   color: rgba(249, 99, 2, 1);
   font-weight: 600;
   margin-bottom: 25px;
   padding: 10px 15px;
   border: 2px solid rgba(249, 99, 2, 1);
   background-color: #fff;
   border-radius: 2px;
   cursor: pointer;
   transition: 0.3s; 
}
#add-cut-btn:hover {
   color: #fff;
   background-color:rgba(249, 99, 2, 1);
}

/* Form Buttom Styling */
.buttons-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
}
.submit-btn {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 55%;
   height: 45px;
   color: rgba(249, 99, 2, 1);
   font-size: 15px;
   font-weight: 600;
   padding: 10px 15px;
   background-color: #fff;
   border-radius: 2px;
   border: 2px solid rgba(249, 99, 2, 1);
   cursor: pointer;
   transition: 0.3s;
}
.submit-btn:hover {
   color: #fff;
   background-color: rgba(249, 99, 2, 1);
}
#reset-btn {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 40%;
   height: 45px;
   color: rgb(89, 89, 89);
   font-size: 15px;
   font-weight: 600;
   padding: 10px 15px;
   background-color: #fff;
   border-radius: 2px;
   border: 2px solid rgba(72, 72, 72, 1);
   cursor: pointer;
   transition: 0.3s;
}
#reset-btn:hover {
   color: #f6f6f6;
   background-color: rgba(72, 72, 72, 1);
}

#output-roll-size,
#output-cut-price {
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
   border: 1px solid grey;
   border-radius: 4px;
   margin-top: 20px;
   padding: 18px;
   background-color: #f9f9f9;
   visibility: hidden;
   opacity: 0;
   transition: visibility 0s linear 0.5s, opacity 0s;
}

.output-title-wrapper {
   position: relative;
   width: 100%;
   border-bottom: 3px solid rgb(168, 168, 168);
   margin-bottom: 25px;
}
.results-title {
   position: relative;
   bottom: -2.5px;
   font-size: 1.5em;
   font-weight: bold;
   width: fit-content;
   border-bottom: 3px solid rgba(247, 100, 2);
}
.total-qty-results {
   font-size: 1.5em;
   font-weight: 600;
   margin-bottom: 5px;
}
.total-measure-unit-tag {
   font-size: 0.8rem;
   font-weight: 500;
   margin-left: 5px;
   color: #333; 
}
.before-tax-tag {
   font-size: 0.5rem;
   font-weight: 500;
   margin-left: 5px;
   color: #333;
}
/*For price calc result section*/
.total-price-results {
   width: 60%;
   margin-bottom: 5px;
}
/* 6ft wide is selected for total price results*/
.full-width {
   width: 100%;
}
.total-cuts-results {
   font-weight: 600;
}
/* .total-cuts-results, */
.total-sqyd-results {
   width: 40%;
   margin-bottom: 5px;
}
.price-output {
   font-size: 1.5em;
   font-weight: bold;
   color: #16d216;
}
.sqyd-output {
   font-size: 1.5em;
   font-weight: bold;
}
/* .total-cuts-output {
   font-size: 1rem;
   font-weight: 500;
} */
.total-lf-results {
   font-weight: 600;
   margin-bottom: 10px;
}
.total-cuts-lf-results {
   width: 100%;
   margin-bottom: 15px;
}
.cut-lf-output {
   font-size: 0.55rem;
   font-weight: 500;
   float: right;
   margin-right: 5px;
}
.cuts-output {
   /* font-size: 1.2rem; */
   font-weight: 600;
   /* color: rgb(86, 109, 215); */
}

/* ### FORM 2 STYLING #################################
######################################################### */
.input-group2 {
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
}
.input-group2 > label {
   font-weight: 500;
   font-size: 15px;
}
.input-group2 > label[for=roll-width2]::after {
   content: "For runners use 6ft wide";
   position: relative;
   top: 4px;
   left: 1px;
   display: block;
   width: max-content;
   font-size: 11px; 
}
#roll-width2 { 
   width: 60%;
   height: 50px;
   border-radius: 4px;
   text-align: center;
   font-size: 15px;
   font-weight: 600;
   color: #333;
}
/* Ordered list custom list counter and styling */
#cuts-list {
   /* delete default counter */
   list-style-type: none;
   /* create custom counter and set it to 0 */
   counter-reset: elementcounter;
   width: 100%;
 }
 
 #cuts-list>li:before {
   /* print out "Element " followed by the current counter value */
   content: "Length of cut " counter(elementcounter) ": ";
   /* increment counter */
   counter-increment: elementcounter;
   padding-right: 28px;
   font-weight: 500;
   font-size: 15px;
 }
 .cut-list-item {
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 25px;
 }
/* End custom list counter and styling */

.cut-input-wrapper { /* Orderered List*/
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-direction: column;
   margin-bottom: 20px;
   transition:all 0.5s ease-in-out;
}

.input-group2 input[type="number"] {
   width: 24%;
   height: 50px;
   padding: 0 22px 0 10px;
   border-radius: 4px;
   /* text-align: center; */
   font-size: 17px;
   font-weight: 600;
   color: #333;
}
.input-group2:has(select) {
   margin-bottom: 25px;
}
.input-group2:has(#input-price-wrapper) {
   margin-bottom: 40px;
}

/* .input-wrapper {
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 60%;
} */
.measurement-unit {
   position: relative;
   font-weight: 500;
}
.measurement-unit-ft {/* for foot unit */
   left: -8%; 
   width: 0;
   color: grey;
}
.measurement-unit-in {
   left: -8%; /* for inch unit */
   width: 0;
   color: grey;
}
.delete-input-btn {
   display: flex;
   justify-content: center;
   align-items: center;
   width: auto;
   height: auto;
   border: none;
   cursor: pointer;
}
.trash-icon {
   color: rgba(249, 99, 2, 1);
   font-size: 1.2em;
   transition: color 0.6s ease-in-out;
}
.trash-icon:hover {
   color: rgb(252, 30, 30);
}

.hidden-delete-btn {
   visibility: hidden;
}
#input-price-wrapper {
   position: relative;
   display: flex;
   /* justify-content: space-between; */
   align-items: center;
   width: 60%;
   justify-content: flex-start;
}
.currency-symbol {
   margin-right: 5px;
   font-weight: 500;
   font-size: 1.3rem;
}

#sell-price-input {
   width: 100px;
   /* margin-right: 5px; */
}
.price-unit-measurement {
   font-size: 15px;
   font-weight: 500;
   margin-left: 5px;
}

/* ########### ERROR STYLING FORM 2 ########## */
.error2-select-text-wrapper, .error2-select-icon-wrapper {
   position: absolute;
   width: max-content;
   height: auto;
}
.error2-select-text-wrapper {
   font-size: 0.7em;
   font-weight: 600;
   color: red;
   top: 106%;
   left: 41%;
   display: none;
}
.error2-select-icon-wrapper {
   right: 8%;
   font-size: 1em;
   color: red;
   transform: scale(0);
   transition: all 0.3s ease-in-out;
}
.cut-list-item > .error2-ft-text-wrapper, .error2-inch-text-wrapper, .error2-ft-icon-wrapper, .error2-inch-icon-wrapper {
   position: absolute;
   width: max-content;
   height: auto;
   /* background-color: red; */
}
.error2-ft-text-wrapper {
   font-size: 0.7em;
   font-weight: 600;
   color: red;
   top: 106%;
   left: 40%;
   display: none;
}
.error2-ft-icon-wrapper {
   top: 32%;
   left: 51%;
   font-size: 1em;
   color: red;
   transform: scale(0);
   transition: all 0.3s ease-in-out;
}

.error2-inch-text-wrapper {
   font-size: 0.7em;
   font-weight: 600;
   color: red;
   top: 106%;
   left: 69%;
   display: none;
}
.error2-inch-icon-wrapper {
   top: 32%;
   left: 80%;
   font-size: 1em;
   color: red;
   transform: scale(0);
   transition: all 0.3s ease-in-out;
}
#input-price-wrapper > .error-price-text-wrapper, 
.error-price-icon-wrapper {
   position: absolute;
   width: max-content;
   height: auto;
}
#input-price-wrapper > .error-price-icon-wrapper {
   position: absolute;
   width: max-content;
   height: auto;
}
.error-price-text-wrapper {
   font-size: 0.7em;
   font-weight: 600;
   color: red;
   top: 105%;
   left: 9%;
   display: none;
}

.error-price-icon-wrapper {
   top: 32%;
   left: 40%;
   font-size: 1em;
   color: red;
   transform: scale(0);
   transition: all 0.3s ease-in-out;
}
.error2-input-border {
   border: 2px solid red;
   border-radius: 4px;
   outline: none;
}

/* ########################################### */

/* ########### Output Styling ########## */
#output {
   margin-top: 25px;
   padding: 15px 25px;
   width: 100%;
   background-color: #f6f6f6;
}
.cull-alert-wrapper {
   width: 100%;
   position: relative;
   display: flex;
   justify-content: flex-start;
   align-items: center;
}
.cull-txt {
   width: max-content;
   color: rgba(249, 99, 2, 1);
   font-weight: 600;
   margin-right: 6px;
   padding: 5px 8px;
   border-radius: 3px;
   border: 1px solid rgba(249, 99, 2, 1);
   background-color: #f9f9f9;
}
.pulse {
   animation: pulse-animation 1s ease-in-out;
   animation-iteration-count: 4;
 }
 
 @keyframes pulse-animation {
   0% {
     box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
   }
   100% {
     box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
   }
 }
 .cull-tool-tip {
   color: #666;
 }
 /* .cull-tool-tip-txt {
   width: 100%;
   top: -72px;
   left: 0;
 } */
 /* Tooltip text */
.cull-tool-tip .cull-tool-tip-txt {
   visibility: hidden;
   width: 110%;
   background-color: #333;
   color: #fff;
   text-align: center;
   padding: 5px;
   border-radius: 5px;
   /* Position the tooltip text */
   position: absolute;
   top: -90px;
   right: -32px;
   z-index: 1;
 }
 .cull-tool-tip .cull-tool-tip-txt::before {
   content: " ";
   border-left: 12px solid transparent;
   border-right: 12px solid transparent;
   border-top: 12px solid #333;
   top: 83px;
   left: 226px;
   width: 0px;
   height: 20px;
   display: block;
   position: absolute;
 }
 /* Show the tooltip text when hover over the tooltip container */
 .cull-tool-tip:hover .cull-tool-tip-txt {
   visibility: visible;
 }

footer {
   position: relative;
   left: -18px;
   bottom: -19px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: calc(100% + 36px);
   padding: 15px;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   background-color: #333;
}
footer > p {
   color: #f6f6f6;
   font-size: 11px;
}
#menu-display {
   display: block;
   visibility: hidden;
   position: absolute;
   top: 100%;
   width: 390px;
   height: 80vh;
   border-radius: 5px;
   padding: 20px;
   border: 1px solid #4a4a4a;
   background-color: #fff;
   box-shadow: 0px 5px 30px 15px rgba(0,0,0,0.5);
   -webkit-box-shadow: 0px 5px 30px 15px rgba(0,0,0,0.5);
   -moz-box-shadow: 0px 5px 30px 15px rgba(0,0,0,0.5);
   transform: scale(0);
   overflow-x: hidden;
   /* transition: all 0.7s cubic-bezier(0.68,-0.55,0.27,1.55); */
   transition: all 0.3s ease-in-out;
}

.close-btn-wrapper {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   width: 100%;
}
#closeMenuBtn {
   border: none;
   font-size: 25px;
   color: grey;
   background: transparent;
   cursor: pointer;
   transition: color 0.3s ease-in-out;
}
#closeMenuBtn:hover {
   color: rgb(203, 39, 39);
}

#menu-display > ol {
   padding-left: 25px;
}

/* FEED BACK FORM STYLING */
.feedbk-form-container {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   height: -webkit-fill-available;
}
.feedback-form-txt {
   margin-bottom: 15px;
}
.form-group {
   width: 100%;
   margin-bottom: 15px;
}
.form-group > label {
   font-weight: 600;
   color: grey;
}
.form-group > input {
   border-radius: 4px;
   height: 50px;
   width: 25%;
   padding: 10px;
   font-size: 17px;
   font-weight: 600;
}
.form-group > input:placeholder-shown {
   font-size: 15px;
}
.form-group > textarea {
   border-radius: 4px;
   width: 100%;
   padding: 10px;
   font-size: 17px;
   font-weight: 600;
}
.char-remaining-txt {
   font-size: 12px;
}
.feedback-form-submit-btn-wrapper {
   margin-top: 30px;
}
.feedback-form-submit-btn {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 45px;
   color: rgba(249, 99, 2, 1);
   font-size: 15px;
   font-weight: 600;
   padding: 10px 15px;
   background-color: #fff;
   border-radius: 2px;
   border: 2px solid rgba(249, 99, 2, 1);
   cursor: pointer;
   transition: 0.3s;
}

/* MOBILE STYLING - START */
/* ==========================================*/
@media only screen and (min-width: 700px)  {
   
   .form-container {
      width: 700px;
   }
   header {
      position: relative;
      top: -19px;
      left: -18px;
      width: 700px;
   }

   .error2-select-text-wrapper {
      left: 40%;
   }
   .cut-list-item {
      width: 100%;
   }
   #cuts-list>li:before {
      padding-right: 0px;
      margin-right: 144px;
   }
   .error2-ft-icon-wrapper {
      left: 55%;
   }
   .error2-inch-icon-wrapper {
      left: 84%;
   }
   #input-price-wrapper {
      margin-right: 16px;
   }
   #sell-price-input {
      width: 159.35px;
   }
   .error-price-icon-wrapper {
      left: 35%;
   }
   .error-price-text-wrapper {
      left: 4%;
   }

   /* FORM1 RESPONSIVE STYLING */
   /* ========================================== */
   .fist-error-icon {
      left: 91%;
   }
   .error-icon-wrapper {
      left: 91.5%;
   }
   .error-text-wrapper {
      left: 75%;
   }
   /* MENU POPUP STYLING */
   /* ========================================= */
   #menu-display {
      width: 690px;
      height: 80vh;
      padding: 20px;
      z-index: 10;
   }
   .feedback-form-submit-btn {
      width: 80%;
   }
   /*  CALC ROLL QTY OUTPUT STYLING */
   /* ============================================ */
   #output-roll-size {
      flex-direction: column;
   }
   .cut-lf-output {
      font-size: 0.8rem;
      margin-right: 82px;
   }
   /* CULL TOOL TIP */
   /* ========================================= */
   .cull-tool-tip .cull-tool-tip-txt {
      visibility: hidden;
      width: 120%;
      background-color: #333;
      color: #fff;
      text-align: center;
      padding: 5px;
      border-radius: 6px;
      top: -45px;
      left: 265px;
      /* Position the tooltip text */
      position: absolute;
      z-index: 1;
    }
    .cull-tool-tip .cull-tool-tip-txt::before {
      content: " ";
      border-top: 12px solid transparent;
      border-right: 12px solid #333;
      border-bottom: 12px solid transparent;
      top: 47px;
      left: -42px;
      width: 20px;
      height: 0px;
    }
}

/* Print Section Styling */
.print-section {
   width: 100%;
    margin-top: 20px;
    text-align: center;
}

.print-btn, .print-confirm-btn {
    /* background-color: #0f68bc; */
    background-color: #4187ca;
    color: white;
    width: 40%;
    height: 45px;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
}
@media (width <= 700px)  {
   .print-confirm-btn {
      min-width: 45%;
   }
}
.print-btn:hover, .print-confirm-btn:hover {
    background-color: #0d5aa3;
}

#sku-input-section {
    margin: 15px 0;
}

#sku-input-section input {
   width: 135px;
   height: 45px;
    padding: 6px;
    /* border: 1px solid #ccc; */
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

#sku-input-section-cuts input {
   width: 135px;
   height: 45px;
    padding: 6px;
    /* border: 1px solid #ccc; */
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}