html {
/* font-family: "Open Sans", sans-serif; */
background-color: #b8e2f4; /* set background color, currently light blue */
}
/* This applies to tablets and desktops */
@media (width >= 600px) {
html {
font-size: 20px
}
body {
/* this size is arbitrary, but must be equal to the detection width of @media */
width: 600px;
}
}
/* This applies to phones */
@media (width < 600px) {
html {
font-size: 5.6vw;
}
}
/* All sizing below is formatted in relation to
font size, which depends on the size of the screen */
body {
margin: 0 auto;
background-color: #ffffff;
padding: 0 0.5rem 0.5rem 0.5rem; /* Top, right, bottom, left (aka NESW) */
border: .125rem solid black;
}
h1,
h2,
h3 {
text-align: center;
color: black;
}
h1 {
font-size: 1.0714rem;
}
h2 {
font-size: 1.0536rem;
margin: 0.5rem;
}
h3 {
font-size: 1.0357rem;
margin: .25rem;
}
p,
a {
/* font-size: 16px; */
line-height: 2;
letter-spacing: 0rem;
display: flex;
justify-content: center;
white-space: pre-line;
text-align: center;
}
p.disclaimer {
font-size: 0.6rem ;
}
input.submitbutton {
font-size: 1.25rem;
}
/* Set attributes that contains the content */
input {
border: 0.1rem solid black;
font-size: 1rem;
margin: 0.01rem 0 0.01rem 0;
}
label {
padding-right: 0.5rem;
white-space: nowrap;
}
/* Only applies to the unit labels */
label.unitlab {
padding-left: .25rem;
}
/* Centers TFL Rate, Weight, etc column */
.mainrow {
display: table;
margin: 0 auto;
text-align: center;
}
/* Splits Cont. Infusions section into two columns */
div.infusioncol,
div.ratecol {
display: grid;
width: 50%;
text-align: center;
}
div.infusioncol {
float: left;
}
div.sidecol {
display: table;
margin: 0 auto;
}
.datainput {
width: 60px;
text-align: right;
}
.rate {
width: 40%;
text-align: right;
}
.note {
width: 60%;
}
p#output {
margin: 0;
}
/* Centers 'Calculate' button */
div.formbutton {
display: flex;
justify-content: center;
padding-top: 0.25rem;
}