@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,400,500');

@import url('reset.css?v=1.1');
@import url('layout.css?v=1.1');
@import url('form.css?v=1.1');
@import url('modern.css?v=1.1');

.container {
  max-width: 1000px;
  margin: 0 auto;
}

body {
  font-family: 'Ubuntu', sans-serif;
  font-weight:300;
  font-size: 19px;
  margin: 0px;
  display: grid;
  grid-template-columns:1fr;
  grid-template-rows: max-content 1fr max-content;
  min-height: 100vh;
  justify-content: space-between;
  --primary: #003459; /*#b70101*/
  --primary-dark: #001D31; /*#5d1010*/
  --primary-light: #e7ecef; /*#5d1010*/
  --secondary: #484848;
  --secondary-dark: #404040;
  --success: #76B041;
  --error: #933;
  --error-light: #FFEFF8;
  background-color: #eee;
}

p {
    margin-top:-10px;
}
main a {
  color:#369;
}
main a:hover {
  color:#369;
  text-decoration: underline;
}
ol.list-alpha {
    counter-reset: list;
    margin-top:-10px;
    margin-bottom: 40px;
    position:relative;
}
ol.list-alpha > li {
    list-style: none;
    margin-top:5px;
    padding-left: 1em;
}
ol.list-alpha > li:before {
    content: "(" counter(list, lower-alpha) ") ";
    counter-increment: list;
    margin-left: -2em;
    position:absolute;
}

@media (max-width: 40em) {
  body {
  font-size: 14px;
  }
}

.w-sm {
  max-width:300px;
}

.w-md {
  max-width:600px;
}

.w-lg {
  max-width:1000px;
}

ul.plain {
  margin:0;
  padding:0;
  list-style-type:none;
}
ul.plain>li {
  padding:15px;
  border-top:solid 1px rgba(0,0,0,0.1);
}

.img-responsive {
  max-width:100%;
}

.badge {
  background-color:#369;
  color:#fff;
  padding:2px 6px;
  border-radius:2px;
  margin:0 5px;
}

.badge-light {
  border:solid 1px #999;
  padding:2px 6px;
  border-radius:2px;
  margin:0 5px;
}
.badge-light abbr {
    text-decoration: none;
}

h2 .badge {
  font-size:60%;
}

.text-subscript {
  font-size:80%;
  color:#777;
}

.card {
  padding: 20px;
  margin:0 0 20px 0;
  background-color: #fff;
  border: solid 1px var(--primary);
  break-inside:avoid-column;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow:0 0 8px rgba(0,0,0,0.1);
}
.card img.fullwidth {
  margin:-20px -20px 0 -20px;
  width:calc(40px + 100%);
}

.card.center {
  margin:0 auto;
  align-self:center;
}

.card h1, .card h2 {
  color: var(--primary-dark);
  text-align: center;
  margin:-10px 0 10px 0;
  padding:0 0 10px 0;
  border-bottom: solid 1px var(--primary-light);
}

.card>.card-bottom {
  margin:0 -20px -20px -20px;
  padding:10px 10px;
  background-color:var(--primary-light);
  text-align:right;
}

.card-top {
  text-align:center;
}

.card-top>h2{
  margin:0px 0px 5px 0px;
  padding:0px;
}

.card-top>dl {
  text-align:left;
}

[class^='columns'] .card {
  margin:0px;
}

h3 {
    margin-top:30px;
}

.jumbo-value {
    margin:20px;
    padding:20px 30px;
    border:solid 2px #ffeedd;
    background-color:#fffaee;
}

abbr {text-decoration: none;}

.inline {
  display: flex;
  align-items: center;
}
.inline.right {
  justify-content: flex-end;
}

.list {
  padding:4px;
  font-size: 1.2em;
  background-color:#eee;
  margin:10px 0;
  border-radius:3px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  border-bottom:solid 2px #ccc;
  color:inherit;
}
a.list:hover {
  border-color:#369;
  text-decoration: none;
}

.btn {
  font-weight:300;
  cursor: pointer;
  border-radius: 2px;
  padding: 6px 12px;
  font-size: 1.1em;
  color: #fff;
  display:inline-block;
  background-color: var(--primary);
  border: solid 1px var(--primary-dark);
}

.btn:hover {
  filter: brightness(85%);
}

.btn.jumbo {
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  text-align:center;
  justify-content: center;
  align-items: center;
  font-size:2em;
  border-radius:1em;
}
.btn.primary {
  color:#369;
}

.btn.danger {
background-color:var(--error);
border:solid 1px var(--error);
}

.btn-sm, td>.btn {
  font-size:0.8em;
  padding:4px 8px;
}

.columns-2 {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  grid-gap:20px;
  grid-auto-flow:dense;
}
.columns-2.reverse>:first-child {
  grid-column:2 / 3
}
.columns-2.reverse>:nth-child(2) {
  grid-column:1 / 2
}
@media(max-width: 768px){
  .columns-2 {
    grid-template-columns:100%;
  }
  .columns-2.reverse>* {
    grid-column:auto !important;
  }
}

.columns-3 {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-gap:20px;
}
@media(max-width: 600px){
  .columns-3 {
    grid-template-columns:100%;
  }
}

.columns-4 {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-gap:20px;
}
@media(max-width: 768px){
  .columns-4 {
    grid-template-columns:50% 50%;
  }
}
.columns-5 {
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  grid-gap:20px;
}
@media(max-width: 768px){
  .columns-5 {
    grid-template-columns:33% 33% 33%;
  }
}
.columns-6 {
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  grid-gap:20px;
}
@media(max-width: 768px){
  .columns-6 {
    grid-template-columns:33% 33% 33%;
  }
}


.tachometer {
  background:cyan;
  height:200px;
  width:200px;
  display:grid;
  padding:20px;

}
.tachometer>.dial {
  border-radius:50%;
  border:solid 5px rebeccapurple;
}
.tachometer>.value {
  position:absolute;
}

.message-success {
  text-align: center;
  color:var(--success);
  border:solid 2px var(--success);
  padding: 1vmin;
  opacity: 0.7;
  margin-bottom: 1em;
  border-radius: 5px;
  font-weight:400;
}
.message-success.center {
  display:inline-block;
  margin:0 auto 1em;
}

.message-error {
  text-align: center;
  color: var(--error);
  padding: 1vmin;
  border: 2px solid currentColor;
  margin-bottom: 1vmin;
  border-radius: 5px;
}

.message-info {
  text-align:center;
  color: dodgerblue;
  padding: 1vmin;
  border: 2px solid currentColor;
  margin-bottom: 1vmin;
  border-radius: 5px;
}
.message-info>a {
  font-weight:500;
  color:inherit;
  display:inline;
  margin:0 4px;
}

dt {
  font-weight:bold;
  color:#CC0000;
}

.menu-bar {
  background:#ccc;
  margin:0 0 10px;
  padding:4px;
  display:flex;
  justify-content: flex-end;
}
.menu-bar>* {
  margin-left:4px;
}

table.small td, table.small th {
    font-size:80%;
}
table.tiny td, table.tiny th {
    font-size:60%;
}

.text-case-normal {
    text-transform: none !important;
}

.red {
  color:red;
}