:root {
                    --white:#ffffff;
                    --grey-light:#ebebeb;
                    --grey-dark:#979797;
                    --background:#4b4b4b;
                    --total-weight:#e7edfd;
                    --subTitles:#082778;
                    --titles: #031031;
                    --button-hover:#082778;
                    --red:#ff0000;
                }
                * {
                    -webkit-tap-highlight-color: transparent;
                    box-sizing: border-box;
                    list-style: none;
                    margin: 0;
                    padding: 0;
                    text-decoration: none;
                    font-family: Arial, sans-serif;
                    color: #141414;
                }
                *::before,
                *::after {
                    box-sizing: border-box;
                }
                html{
                    width: 100%;
                    background: var(--background);
                }
                body {
                    max-width: 1264px;
                    min-width: 1264px;
                    width: 100%;
                    padding: 2rem 0;
                    margin: 0 auto;
                }
                label {
                    font-size: 0.9rem;
                    font-weight: 600;
                }
                h2 {
                    color: white;
                }
                h3 {
                    color: white;
                }
                input{
                    margin-bottom: 0.5rem;
                }
                input, textarea {
                    width: 100%;
                    padding: 6px;
                    box-sizing: border-box;
                    line-height: 1.2; 
                    font-size: 1rem;
                }
                /* Chrome, Safari, Edge, Opera */
                input::-webkit-outer-spin-button,
                input::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
                }
                /* Firefox */
                input[type=number] {
                -moz-appearance: textfield;
                }
                .input__75-25, .input__50-50{
                    display: flex;
                    flex-direction: row;
                    gap: 0.5rem;
                }
                .input75{
                    width: 75%;
                }
                .input25{
                    width: 25%;
                }
                .input50{
                    width: 50%;
                }
                .version{
                    font-size: 0.7rem;
                    text-align: left;
                    display: block;
                    color: white;
                    font-style: italic;
                }
                .uppercase {
                    text-transform: uppercase;
                }
                .wrapper{
                    width: 100%;
                    transform: translate(32px, 0);
                    position: relative;
                }

                /*################ Sheet MAIN TITLE ####################*/
                .sheet__wrapper{
                    border: 2px solid var(--background);
                    padding: 1rem;
                    background: var(--white);
                    max-width: 1200px;
                    min-width: 1200px;
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;
                }
                .first__section{
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-between;
                    gap: 1rem;
                }
                .first__section-img{
                    width: 25%;
                }
                .first__section-img img{
                    width: auto;
                    height: 125px;
                    display: block;
                    object-fit: contain;
                }
                .first__section-title{
                    width: 50%;
                }
                .first__section-title h1{
                    font-size: 3.5rem;
                    text-align: center;
                    font-weight: 900;
                    line-height: 100%;
                    margin-bottom: 1rem;
                }
                .first__section-title p{
                    font-size: 1.5rem;
                    text-align: center;
                    font-weight: 600;
                }
                .first__section-date{
                    width: 25%;
                    display: flex;
                    flex-direction: column;
                }
                .first__section-date label{
                    font-weight: 600;
                    text-align: center;
                }
                .form__wrapper{
                    display: flex;
                    flex-direction: column;
                    gap: 0.5rem;
                }
                /*#####################################################*/

                /*################ SHIPPER Section ####################*/
                .second__section, 
                .third__section,
                .fifth__section{
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: stretch;
                    gap: 0.5rem;
                }
                .shipper__wrapper, 
                .carrier__wrapper, 
                .consignee__wrapper, 
                .tpBilling__wrapper,
                .shippingIns__wrapper,
                .shippingUse__wrapper{
                    border: 2px solid var(--background);
                    flex: 1 1 0px;
                    background: var(--grey-light);
                }
                .shipper__title, 
                .carrier__title, 
                .consignee__title, 
                .tpBilling__title,
                .shippingIns__title,
                .shippingUse__title,
                .comments__title,
                .signature__title{
                    background: var(--titles);
                    border-bottom: 2px solid var(--background);
                }
                .shipper__title h2, 
                .carrier__title h2, 
                .consignee__title h2, 
                .tpBilling__title h2,
                .shippingIns__title h2,
                .shippingUse__title h2,
                .comments__title h2,
                .signature__title h2{
                    text-align: center;
                    font-size: 1.2rem;
                    padding: 0.3rem 0;
                    font-weight: 900;
                }
                .shipper__container, 
                .carrier__container,
                .consignee__container,
                .tpBilling__container,
                .shippingUse__container{
                    padding: 0.5rem 0.5rem 0 0.5rem;
                    display: flex;
                    flex-direction: column;
                    
                }
                /*#####################################################*/

                /*############### CONSIGNEE Section ###################*/
                /*#####################################################*/

                /*################ LOADS Section ######################*/
                .fourth__section{
                    display: flex;
                    flex-direction: row;
                    border: 2px solid var(--background);
                }
                .loads__wrapper{
                    background: var(--grey-light);
                }
                .loads__tittle{
                    background: var(--titles);
                    border-bottom: 2px solid var(--background);
                    border-right: 2px solid black;
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    height: 48px;
                    padding: 0 0.3rem;
                }
                .loads__tittle h2{
                    text-align: center;
                    font-size: 0.9rem;
                }
                .lw-2{
                    width: 40%;
                }
                .lw-3{
                    width: 23%;
                }
                .lw-4{
                    width: 9%;
                }
                .lw-1, .lw-5, .lw-6, .lw-7{
                    width: 7%;
                }
                .loads__container{
                    display: flex;
                    flex-direction: column;
                    justify-content: stretch;
                    align-items: center;
                    border-right: 2px solid var(--background);
                }
                .lw-7 .loads__container{
                    border-right: none;
                }
                .loads__container input{
                    margin-bottom: 0;
                    text-align: center;
                    border: none;
                    border-bottom: 2px solid var(--background);
                }
                .blanc{
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center; 
                }
                .blanc p {
                    padding: 6px 0;
                    font-weight: 600;
                    line-height: 1.2;
                }
                .lw-7 .loads__tittle{
                    border-right: none;
                }

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

                /*############## UNDER LOADS Section###################*/
                .shippingIns__container{
                    padding: 0.5rem 0.5rem 0 0.5rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    gap: 1rem;
                }
                .payment__title{
                    background: var(--subTitles);
                    border: 2px solid var(--background);
                }
                .payment__title h3{
                    text-align: center;
                    font-size: 1.2rem;
                    padding: 0.3rem 0;
                    font-weight: 900;
                }
                .checkboxes__wrapper{
                    display: flex;
                    flex-direction: row;
                    background: var(--white);
                    border-left: 1px solid var(--background);
                    border-right: 1px solid var(--background);
                    border-bottom: 1px solid var(--background);
                }
                .checkboxes__container{
                    display: flex;
                    flex-direction: row;
                    flex: 1 1 0px;
                    padding: 12px 0;
                    align-items: stretch;
                    justify-content: space-evenly;
                    border-left: 1px solid var(--background);
                }
                .checkboxes__container:nth-child(1){
                    border-left: none;
                }
                .checkboxes__container input{
                    margin-bottom: 0;
                    width: 30px;
                }
                .COD__container p{
                    text-align: center;
                    font-size: 0.9rem;
                    font-weight: 600;
                }
                .codeCheck:checked  #codload{
                    display: block;
                }
                #codload{
                    color: var(--red);
                    text-align: center;
                    margin-bottom: 1rem;
                }
                /*#####################################################*/

                /*########## COMMENTS OR SIGNATURE Section ############*/
                .sixth__section{
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: stretch;
                    gap: 0.5rem;
                    width: 100%;
                    height: 200px;
                }
                .comments__wrapper{
                    border: 2px solid var(--background);
                    flex: 2 1 0px;
                    background: var(--grey-light);
                    background: var(--white);
                    display: flex;
                    flex-direction: column;
                }
                .signature__wrapper{
                    border: 2px solid var(--background);
                    flex: 1 1 0px;
                    background: var(--grey-light);
                }
                .signature__container{
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    gap: 0.5rem;
                    padding: 0.5rem;
                }
                #signature-nameOne{
                    margin-bottom: 0;
                }
                #signature-nameTwo{
                    margin-bottom: 0;
                }
                .comments__container{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    height: 100%;
                }
                .comments__container textarea{
                    border: none;
                    resize: none;
                    padding: 0;
                    outline: 0;
                    padding: 6px;
                    height: 100%;
                }
                #char-count{
                    padding: 0 0 3px 6px;
                }

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

                /*################### BUTTON ##########################*/
                .trigger{
                    width: 100%;
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    margin-top: 2rem;
                }
                .trigger button{
                    border: none;
                    outline: none;
                    cursor: pointer;
                    background: var(--titles);
                    color: var(--white);
                    font-weight: 900;
                    font-size: 2rem;
                    text-shadow: 2px 2px rgba(0, 0, 0, 0.4);
                    padding: 0.5rem 2rem;
                    border-radius: 16px;
                }
                .trigger button:hover{
                    background: var(--button-hover); 
                }
                /*#####################################################*/

                /*###################### LOG ##########################*/

                .log{
                    background: rgb(180, 180, 180);
                    width: 350px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    padding: 2rem;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    border-radius: 16px;
                }
                .log-title{
                    text-align: center;
                    font-size: 1.5rem;
                    color: rgb(46, 46, 46);
                    letter-spacing: 1px;
                    font-weight: bolder;
                    margin-bottom: 1rem;
                    text-transform: uppercase;
                    user-select: none;
                    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
                }
                .log-input{
                    border-radius: 8px;
                    color: rgb(0, 238, 12);
                    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
                    font-size: 3rem;
                    text-align: center;
                }
                .log-input::placeholder{
                    font-size: 1rem;
                    text-align: left;
                    padding-left: 0.5rem;
                    font-family: Arial, Helvetica, sans-serif;
                }
                .log-button{
                    background: rgb(0, 73, 133);
                    color: white;
                    font-size: 1.5rem;
                    text-transform: uppercase;
                    border: none;
                    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
                    padding: 0.5rem 3rem;
                    margin-top: 1rem;
                    margin: 1rem auto 0 auto;
                    display: block;
                    border-radius: 8px;
                }
                .log-wrong{
                    color: rgb(167, 0, 0);
                    text-align: center;
                    margin-top: 1rem;
                    font-style: italic;
                    display: none;
                }
                /*#####################################################*/