/* Site specific overrides of the styles in skeleton.css
-------------------------------------------------------- */

html {
  background-color: #FFFFFF;
}

body {
  color: #000000;
  font-family: Raleway, Helvetica, Arial, sans-serif;
  padding-top: 1em;
}

.button, .curved {
  border-radius: 10px;
}

.button.button-critical,
button.button-critical,
input[type="submit"].button-critical,
input[type="reset"].button-critical,
input[type="button"].button-critical {
  color: #FFF;
  background-color: #FF0000;
  border-color: #FF0000; }
.button.button-critical:hover,
button.button-critical:hover,
input[type="submit"].button-critical:hover,
input[type="reset"].button-critical:hover,
input[type="button"].button-critical:hover,
.button.button-critical:focus,
button.button-critical:focus,
input[type="submit"].button-critical:focus,
input[type="reset"].button-critical:focus,
input[type="button"].button-critical:focus {
  color: #FFF;
  background-color: #FF0000;
  border-color: #FF0000; }

/* Links
-------------------------------------------------------- */
a {
  color: #2B6299; 
}
a:hover {
  color: #0000CC;
}
.fab:hover {
  opacity: 0.7;
}

a.no_line:link, a.no_line:visited, a.no_line:hover, a.no_line:active {
  text-decoration: none;
}

/* Custom styles for MyRepairTracker.com
-------------------------------------------------------- */
form {
  margin: 0;
}

input[readonly], 
input[disabled],
select[disabled] { 
  background: #CCC; 
  color: #333; 
}

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="submit"] {
  color: #FFF;
  background-color: #2B6299;
  border-color: #0000CC;
  padding: 5px; 
  height: 100%; 
  line-height: 100%;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #FFF;
  background-color: #0000CC;
  border-color: #2B6299;
}
  
.copyright {
  color: #000000;
  font-size: x-small;
}

.even {
  background-color: #f8f8f8;
}

#map{
  border: 1px solid #2B6299;
  width: 100%;
  height: 600px;
  margin-bottom: 20px;
}

.mrt-logo {
  max-width: 100%;
  height: auto;
}

.odd {
  background-color: #e0e0e0;
}

.red {
  color: #C00000;
}

legend {
  background: #2B6299;
  color: #FFFFFF;  
  padding: 5px;
}

table {
  align: center;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

th, th.compact-list {
  background-color: #2B6299;
  color: #FFFFFF;
}

th, td {
  vertical-align: middle;
  border: 0;
}

th.compact-list, td.compact-list {
  padding-top: 1px;
  padding-bottom: 1px;
  border: 0;
  background-color: #FFFFFF;
}

td:first-child, th:first-child {
  padding-left: 10px;
}

td:last-child, th:last-child {
  padding-right: 10px;
}

td.compact-list-with-border {
  padding-top: 1px;
  padding-bottom: 1px;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E1E1E1;
}

/* Styles that work with the jquery validate routine
-------------------------------------------------------- */
.mandatory {
  color: red;
  font-weight: bold;
}

label.error, span.error {
  color: red;
  font-style: italic;
}

div.error {
  display: none;
}

input.error, select.error, textarea.error {
  border: 1px dotted red;
}

input:focus::-webkit-input-placeholder {
  color: transparent;
}

/* Styles for photo thumbnails
-------------------------------------------------------- */
.cellImage {
  position: relative; 
  display: inline-block; 
  padding: 2.5px;
}

.cellImage img {
  cursor: pointer;
  height: 60px;
}