@import url('https://fonts.googleapis.com/css?family=Karla:400,400i&subset=latin-ext');

/* universal */

body {
  font-family: 'Karla', Arial, Helvetica, sans-serif;
}

section {
  overflow: auto;
}
  
textarea {
  resize: vertical;
}
  
.center {
  text-align: center;
}

.center h1 {
  margin-bottom: 10px;
}

.btn {
  color: #fff;
  background: #E41B24;
  font-weight: bold;
  font-size: 14px;
}

.btn.focus, .btn:focus, .btn:hover {
  color: #fff;
  background: #333;
  text-decoration: none;
}

.form-control {
  font-size: 14px;
}

/* typography */

h1, h2, h3, h4, h5, h6 {
  line-height: 1;
  margin: 20px 0;
}
  
h1 {
  font-size: 36px;
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 500;
  line-height: 1.1;
  text-align: left;
  color: #d40922;
  text-transform: uppercase;
}
  
h2 {
  font-size: 1.2em;
  letter-spacing: -1px;
  margin-bottom: 30px;
  text-align: left;
  font-weight: normal;
  color: #777;
}
  
p {
  font-size: 14px;
  margin: 0 0 10 0;
  padding: 0 0 3px 0;
  font-size: 14px;
}

/* atms index table */

div.upper-panel {
  padding: 50px 0px;
}

/* NOTE: The font for the blurb is required to be Century Gothic Bold to match branding styles.
   This app is meant to be displayed within the website where this font resource is already
   defined. If the font is specified in here using font-face, it will render on the staging app
   link, but within the website it loads slowly and is then cancelled and provided by the website
   anyway. So this font should not render on the direct link to the app, but should in the website
   context. */
div.blurb {
  color: #272727;
  font-weight:500;
  font-family: "CenturyGothic-Bold"
}

div.blurb p {
  font-size: 25px;
}

.filters label {
  font-weight: 700;
  margin-bottom: 0;
}

a {
  color: #E41B24;
}

.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover {
  background: #E41B24;
  border-color: #E41B24;
}

.pagination .active .page-link {
  background-color: #E41B24;
  border-color: #E41B24;
  font-size: 14px;
}

.pagination .page-link {
  color: #337ab7;
  font-size: 14px;
}

.table {
  table-layout: fixed;
  word-wrap: break-word;
  font-size: 14px;
}

.table.show {
  margin: 20px 0;
  display: block;
}

.table.sortable th .current {
  padding-right: 50px;
  background-repeat: no-repeat;
  background-position: right center;
}

/* this icon is from fontawesome.com 
https://fontawesome.com/license */
.table.sortable th .asc {
  background-image: url("/caret-down.svg");
}

.table.sortable th .desc {
  background-image: url("/caret-up.svg");
}