body{
    width: 95vw;
    background: #8f7eb8;
    margin: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
}

#header{
    width: 100%;
    color:#f17243;
    text-shadow: 1px 1px 2px #665e52;
}

.vmQuote{
    display: flex;
    flex-wrap: nowrap;
    border-bottom: 1px dashed darkgray;
    margin: auto;
    margin-top: .5em;
}

.myH3{
    font-size: larger;
    font-weight: bold;
}

.vmQuote div{
    padding-top: .2em;
    padding-bottom: .2em;
}

.vm{
    flex-grow: 0;
    flex-basis: 70vw;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.vm .myLabel{
    width: 6em;
    display: inline-block;
}

.vmName{
    order: 1;
}

.vmName input{
   /* width: 32em; */
   width: 32vw;
}

.vmResources{
    order:2;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
}

.vmResources input{
    width: 4vw;
    margin-right: 2em;
}

.vmStorage{
    order:3;
}

.vmStorage input{
    width:4vw;
}

.vmSQL{
    order:4;
}

.sqlLabel{
    display: inline-block;
    margin-right: 1em;;
}

.vmCost{
    flex-grow: 1;
    margin: auto;
}

.vmRemove{
    margin:auto;
    margin-right: 1em;
}

#storage{
    display: flex;
    padding-top: .5em;
    border-bottom:1px dotted darkgray;
    padding-bottom: .5em;
    margin-bottom: 1em;
}

#storage .storeCalc{
    padding-top: .25em;
    padding-bottom: .25em;
}

#storage #storageCalcs{
    flex-grow: 0;
    flex-basis: 70vw;
    display: flex;
    flex-direction: column;
}


#storage #storageCost{
    flex-grow: 1;
    margin-top: auto;
    margin-bottom: auto;
}

#extras .myLabel{
    width:8em;
    display: inline-block;
    padding-top: .25em;
    padding-bottom: .25em;
}

#extras input{
    width: 4vw;
}

#footer {
    margin-top: .5em;
    padding-top: 2em;
    border-top: 1px solid darkgray;
    display: flex;
}

#footer #summary{
    flex-grow: 0;
    flex-basis: 70vw;
    font-size: larger;
    font-weight: bold
}

#footer #totalCost{
    flex-grow: 1;
}