html {
    font-size: 62.5%;
}

body {
    box-sizing: border-box;
    padding: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.375rem;
}

/* Form Placeholder */
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #666;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #666;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #666;
}

/* Abbreviation styles (removes underlines under the asterisk) */
abbr[title="required"] {
    border-bottom: none !important;
    cursor: inherit !important;
    text-decoration: none !important;
    color: red;
}

.error {
    color: red;
}

.pink {
    color: #ff6666;
}

.small-text {
    font-size: 1.2rem;
}

/* Layout */
header {
    width:100%;
    max-width: 1024px;
    margin:0 auto;
}

main {
    width:100%;
    max-width: 1024px;
    margin:30px auto 0 auto;
}


.form-wrapper {
    width:100%;
    max-width: 1024px;
    margin:0 auto;
}

legend {
    font-size: 2rem;
}

label {
    font-size: 1.250rem;
    display: block;
}
@media only screen and (min-width: 600px) {
    label {
        font-size: 1.375rem;
    }
}

/* 'Group' is simply a class I used on a div that holds a label and input field (generally) */
.group {
    margin: 1% 0%;
}
@media only screen and (min-width: 600px) {
    .group {
        margin: 1% 1%;
    }
}


/* ------ */
/* HEADER */
/* ------ */
header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

header .logo {
    flex-basis: 35%;
}

header .title {
    display: flex;
    flex-basis: 65%;
    justify-content: flex-end;
}

header h1 {
    font-size: 3rem;
}
@media only screen and (min-width: 600px) {
    header h1 {
        font-size: 4.5rem;
    }
}



/* ------------ */
/* INSTRUCTIONS */
/* ------------ */
/* .instructions-container {
    display: flex;
    flex-wrap: wrap;
}

.instruction {
    padding: 2% 0;
}
@media only screen and (min-width: 600px) {
    .instruction {
        padding: 2%;
    }
}

.instruction.step-one,
.instruction.step-two,
.instruction.step-three {
    flex-basis: 100%;
}
@media only screen and (min-width: 600px) {
    .instruction.step-one {
        flex-basis: 35%;
    }
    .instruction.step-two {
        flex-basis: 40%;
    }
    .instruction.step-three {
        flex-basis: 25%;
    }
}


.instruction ul {
    margin: 0 0 0 20px;
    list-style: disc outside;
    padding-left: 0px;
}

.big-phone {
    font-size:2.2rem;
    font-weight: bold;
} */



/* ------------ */
/* INSTRUCTIONS */
/* ------------ */
.instructions-container {
    display: flex;
    flex-wrap: wrap;
    border: 2px solid #f5f5f5;
}

.instruction {
    padding: 1% 1%;
}
@media only screen and (min-width: 600px) {
    .instruction {
        padding: 1% 1.5%;
    }
}

.instruction.step-one,
.instruction.step-two,
.instruction.step-three {
    flex-basis: 100%;
    color: #999;
}
@media only screen and (min-width: 600px) {
    .instruction.step-one {
        flex-basis: 30%;
        border-right: 2px solid #f5f5f5;
    }
    .instruction.step-two {
        flex-basis: 45%;
        border-right: 2px solid #f5f5f5
    }
    .instruction.step-three {
        flex-basis: 25%;
    }
}

.instruction.step-one.instruction-active,
.instruction.step-two.instruction-active,
.instruction.step-three.instruction-active {
    background-color: #f5f5f5;
    color: #000;
}

.instruction-active strong {
    color: #e2211c;
}

.instruction ul {
    margin: 0 0 0 20px;
    list-style: disc outside;
    padding-left: 0px;
}

.big-phone {
    font-size:2.2rem;
    font-weight: bold;
}









/* ------------------ */
/* SHIPPER & RECEIVER */
/* ------------------ */
.shipper-receiver-container {
    display: flex;
    flex-wrap: wrap;
}

.shipper-receiver-container section {
    flex-basis: 100%;
}
@media only screen and (min-width: 600px) {
    .shipper-receiver-container section {
        flex-basis: 50%;
        /* padding: 1%; */
    }
}

.shipper-receiver-container input {
    width: 100%;
}
/* Shipper Details */
.shipper-container {
    margin-bottom: 25px;
}
@media only screen and (min-width: 800px) {
    .shipper-container {
        margin-bottom: 0;
    }
}
.shipper-container-group {
    display: flex;
    flex-wrap: wrap;
}
.shipper-container-group .group {
    flex-basis: 100%;
}
@media only screen and (min-width: 800px) {
    .shipper-container-group .group {
        flex-basis: 48%;
    }
}

/* Receiver Details */
.receiver-container {
    margin-bottom: 25px;
}
@media only screen and (min-width: 800px) {
    .receiver-container {
        margin-bottom: 0;
    }
}
.receiver-container-group {
    display: flex;
    flex-wrap: wrap;
}
.receiver-container-group .group {
    flex-basis: 100%;
}
@media only screen and (min-width: 800px) {
    .receiver-container-group .group {
        flex-basis: 48%;
    }
}






/* ------------------------------- */
/* SHIPPER#, PO# & Billing Details */
/* ------------------------------- */
.ship-po-billing-container {
    display: flex;
    flex-wrap: wrap;
    background-color: #f5f5f5;
    padding: 1.5%;
    margin:15px 0;
}

.ship-po-billing-item {
    flex-basis: 100%;
    padding-right: 0px;
    margin-bottom:5px;
}

@media only screen and (min-width: 600px) {
    .ship-po-billing-item {
        flex-basis: 25%;
        padding-right: 5px;
        margin-bottom:0;
    }
    .ship-po-billing-item:nth-child(3) {
        padding-right: 0;
        margin-bottom:0;
    }
}

.ship-po-billing-item input {
    width: 100%;
}




/* ----- */
/* ITEMS */
/* ----- */
.items-container {
    display: flex;
    flex-wrap: wrap;
    margin: 20px 0;
}
@media only screen and (min-width: 600px) {
    .items-container {
        margin-bottom: 0;
    }
}

.items-container section {
    flex-basis: 100%;
}
@media only screen and (min-width: 600px) {
    .items-container section {
        flex-basis: 100%;
    }
}

.items-container .item {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 50fr) minmax(0, 30fr) minmax(0, 12fr);
    gap: 3px;
    align-items: start;
    padding:3px;
    margin-bottom:5px;
}

.items-container .item > div {
    min-width: 0;
}

.items-container .item input {
    width: 100%;
    min-width: 0;
}

.items-container .item-dimensions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 3px;
}

.items-container .item-dimensions label {
    grid-row: 1;
}

.items-container .item-dimensions input {
    grid-row: 2;
}

@media only screen and (max-width: 599px) {
    .items-container .item {
        grid-template-columns: minmax(45px, 8fr) minmax(0, 50fr) minmax(0, 30fr) minmax(65px, 12fr);
    }
}

/* Item Dimensions Container */
.item-dimensions-container {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.item-dimensions-container label {
    flex-basis: 100%;
    margin-bottom:5px;
}

/* .item-dimensions-container .item-dimensions {
    flex-basis: 33.3%;
    padding-right: 5px;
}
.item-dimensions-container .item-dimensions:last-child {
    padding-right: 0px;
}

.item-dimensions-container .item-dimensions input {
    width: 100%;
} */

/* Total Weight Container */
.total-weight-container {
    width: 100%;
    background-color: #f7f7f7;
    padding: 1.5%;
    margin-bottom: 15px;
    text-align: right;
}

/* Weight Notification Container */
.weight-notification-container {
    width: 100%;
    margin-bottom: 15px;
    text-align: right;
    font-size: 12px;
}

/* Special Instructions Container */
.special-instructions-container input {
    width: 100%;
    margin-bottom: 5px;
}








/* --------------- */
/* DANGEROUS GOODS */
/* --------------- */
.dangerous-goods-container {
    display: flex;
    flex-wrap: wrap;
    margin: 20px 0;
}

.dangerous-goods-container section {
    flex-basis: 100%;
}
@media only screen and (min-width: 600px) {
    .dangerous-goods-container section {
        flex-basis: 100%;
        /* padding: 1%; */
    }
}

.dangerous-goods-container section input {
    width: 100%;
}

/* Row 1 */
.dangerous-goods-row1 {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

.dangerous-goods-row1 .dangerous-goods-info {
    flex-basis: 100%;
    padding-right: 0;
    margin-bottom: 5px;
}

.dangerous-goods-row1 .dangerous-goods-info:nth-child(2) {
    flex-basis: 100%;
}

@media only screen and (min-width: 600px) {
    .dangerous-goods-row1 .dangerous-goods-info {
        flex-basis: 25%;
        padding-right: 5px;
    }
    .dangerous-goods-row1 .dangerous-goods-info:nth-child(2) {
        flex-basis: 75%;
    }
}

/* Row 2 */
.dangerous-goods-row2 {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.dangerous-goods-row2 .dangerous-goods-info {
    flex-basis: 100%;
    padding-right: 0;
    margin-bottom: 5px;
}

.dangerous-goods-row2 .dangerous-goods-info:nth-child(3) {
    padding-right: 0;
}

@media only screen and (min-width: 600px) {
    .dangerous-goods-row2 .dangerous-goods-info {
        flex-basis: 33.3%;
        padding-right: 5px;
    }
    
    .dangerous-goods-row2 .dangerous-goods-info:nth-child(3) {
        padding-right: 0;
    }
}

/* Row 3 */
.dangerous-goods-row3 {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

.dangerous-goods-row3 .dangerous-goods-info {
    flex-basis: 100%;
    padding-right: 0;
    margin-bottom: 10px;
}

/* .dangerous-goods-row3 .dangerous-goods-info:nth-child(3) {
    padding-right: 0;
} */

@media only screen and (min-width: 600px) {
    .dangerous-goods-row3 .dangerous-goods-info {
        flex-basis: 33.3%;
        padding-right: 5px;
    }
    
    .dangerous-goods-row3 .dangerous-goods-info:first-child {
        flex-basis: 66.6%;
    }

    /* .dangerous-goods-row3 .dangerous-goods-info:nth-child(3) {
        padding-right: 0;
    } */
}


/* -------------- */
/* DECLARED VALUE */
/* -------------- */
.declared-value-container {
    display: flex;
    flex-wrap: wrap;
    /* padding: 1%; */
    margin: 15px 0;
}

.declared-value-content {
    flex-basis: 100%;
    padding-right: 0;
    margin-bottom: 10px;
}

.declared-value-input {
    display: flex;
    flex-basis: 100%;
    flex-direction: column;
}

@media only screen and (min-width: 600px) {
    .declared-value-content {
        flex-basis: 80%;
        padding-right: 15px;
        margin-bottom: 0px;
    }
    
    .declared-value-input {
        display: flex;
        flex-basis: 20%;
        flex-direction: column;
    }
}


/* ----------- */
/* DECLARATION */
/* ----------- */
.declaration-container {
    /* padding: 1%; */
    margin: 15px 0;
}

.declaration-content label {
    display: inline;
}


/* ----------------- */
/* 3rd-PARTY BILLING */
/* ----------------- */
.third-party-billing-container {
    /* padding: 1%; */
    margin: 15px 0;
}

.third-party-billing-content label {
    display: inline;
}

.third-party-billing-content input {
    width: 100%;
}


/* ---------------------------- */
/* SHIPPER - ADDITIONAL DETAILS */
/* ---------------------------- */
.shipper-additional-details-container {
    background-color: #f5f5f5;
    padding: 1%;
    margin: 15px 0;
}


/* ---------------------------- */
/* SUBMIT BUTTON */
/* ---------------------------- */
.submit-btn-container {
    margin: 35px 0;
}

input[type="submit" i] {
    border: none;
    background-color: #e2231e;
    padding: 5px 20px;
    color: white;
    font-size: 2.0rem;
}






/* ------------------------------------------------------------------- */
/*
/* PDF DOWNLOAD PAGE Styles
/*
/* ------------------------------------------------------------------- */
/* ------------ */
/* INSTRUCTIONS */
/* ------------ */
.instructions2-container {
    display: flex;
    flex-wrap: wrap;
}

.instructions2-container .instruction {
    padding: 2% 0;
}
@media only screen and (min-width: 600px) {
    .instructions2-container .instruction {
        padding: 2%;
    }
}

.instructions2-container .instruction.step-one,
.instructions2-container .instruction.step-two,
.instructions2-container .instruction.step-three {
    flex-basis: 100%;
}
@media only screen and (min-width: 600px) {
    .instructions2-container .instruction.step-one {
        flex-basis: 25%;
    }
    .instructions2-container .instruction.step-two {
        flex-basis: 50%;
    }
    .instructions2-container .instruction.step-three {
        flex-basis: 25%;
    }
}


.instructions2-container .instruction ul {
    margin: 0 0 0 20px;
    list-style: disc outside;
    padding-left: 0px;
}

.instructions2-container .big-phone {
    font-size:2.2rem;
    font-weight: bold;
}

a.btn:link,
a.btn:visited,
a.btn:active {
    display: inline-block;
    padding: 5px 10px;
    background-color: #e2231e;
    color: #fff;
    text-decoration: none;
    box-shadow: 0px 3px 6px rgba(0,0,0,.5);
    transition: all .2s;
}

a.btn:hover {
    display: inline-block;
    padding: 5px 10px;
    background-color: #ff201a;
    color: #fff;
    text-decoration: none;
    transform: scale(1.1);
}