* {
    margin: 0;
    padding: 0;
    outline: none;
    font-family: TradeGothicLT,Trade Gothic LT Std,Trade Gothic Std,Helvetica,Arial,sans-serif;
}

html {
    line-height: 1.875;
    font-weight: 300;
    font-size: 16px;
    font-family: TradeGothicLT,Trade Gothic LT Std,Trade Gothic Std,Helvetica,Arial,sans-serif;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

h1, .h1, h2, .h2 {
    font-family: "TradeGothic LT CondEighteen",TradeGothicLT-Cn,TradeGothicLTStd-Cn18,"Trade Gothic LT Std Condensed No. 18","Trade Gothic LT Std No. 18",Trade Gothic LT Std Cn,Trade Gothic Std,Open Sans Condensed,Arial Narrow,Arial,sans-serif;
    font-stretch: condensed;
}

/* 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;
}

@media screen and (max-device-width: 35.5em) {
    .center {
        margin: 5%;
    }
}


@media screen and (min-device-width: 48em) {
    .center {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .container {
        padding: 2em 1em 1em 1em;
        background-color: white;
        -moz-box-shadow: 3px 3px 5px 6px #ccc;
        -webkit-box-shadow: 3px 3px 5px 6px #ccc;
        box-shadow: 3px 3px 5px 6px #ccc;
    }
}

.center-content {
    text-align: center;
    align-content: center;
}

.container header {
    text-align: center;
    font-size: 2em;
    font-family: "TradeGothic LT CondEighteen",TradeGothicLT-Cn,TradeGothicLTStd-Cn18,"Trade Gothic LT Std Condensed No. 18","Trade Gothic LT Std No. 18",Trade Gothic LT Std Cn,Trade Gothic Std,Open Sans Condensed,Arial Narrow,Arial,sans-serif;
    font-stretch: condensed;
    color: #0c9aac;
}

#test-packet-form {
    align-content: center;
    text-align: center;
}


.button-xsmall {
    font-size: 70%;
}

.button-small {
    font-size: 85%;
}

.button-large {
    font-size: 110%;
}

.button-xlarge {
    font-size: 125%;
}

.primary-button {
    background-color: #008eaa;
    color: white;
}


.success {
        color: #4F8A10;
}

.error {
    color: #D8000C;
}

.alert {
    margin: .5em;
    padding: .5em;
}

.alert-info {
    color: #00529B;
    background-color: #BDE5F8;
}

.alert-success {
    color: #4F8A10;
    background-color: #DFF2BF;
}

.alert-warning {
    color: #9F6000;
    background-color: #FEEFB3;
}

.alert-error {
    color: #D8000C;
    background-color: #FFD2D2;
}