/*USE THIS TO OVERRIDE BOOTSTRAP'S BORDER-BOX SETTING

.selector-for-some-widget {
  box-sizing: content-box;
}  */

/*GENERAL*/

html,
body {
  background-color: #fff;
  color: #555;
  color: #1f1f1f;
  font-family: "Saira", "Arial", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  /*text-rendering: optimizeLegibility;*/
  overflow-x: hidden;
}
/* 4-30-24 */
/* <uniquifier>: Use a unique and descriptive class name
<weight>: Use a value from 100 to 900 */

.saira-streak {
  font-family: "Saira", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
legend {
  font-size: 1rem;
}
#streaks {
  background-image: url(images/city-marathon-cropped-min.jpg);
  background-position: center center;
  background-size: cover;
}

#streaks {
  padding-top: 8%;
}

#streaks header {
  height: auto;
}

p {
  max-width: 800px;
}

.more-padding {
  padding-top: 2%;
  padding-bottom: 4%;
}

.container,
.container-fluid {
  padding-top: 15px;
  padding-bottom: 15px;
}

.header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* text-align: center; */
  background-color: #ffa000;
  /* background-color: white; */
}

.header p {
  font-size: 18px;
}

.small-text {
  font-size: 80%;
  font-weight: 400;
}

.text-light {
  color: #ffecb3;
}

.vertical-line {
  border-left: 1px solid #ddd;
}
/* NAVIGATION */
/* Accessibility change */
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.75);
}
/* LINKS */
/* Accessibility change */
a {
  color: #005a9c;
  font-weight: 600;
}
.underline {
  text-decoration: underline;
}
/*BUTTONS*/
.btn-primary {
  background-color: #0d6efd;
}
.modal-link {
  color: #005a9c;
  font-weight: 600;
  text-decoration: underline;
}

.btn-streak {
  background-color: #28287a;
  border-color: #28287a;
  color: white;
}

.btn-streak:hover {
  color: #c6c6ec;
}

.btn-ghost {
  opacity: 0.8;
}

.form-link {
  border: 2px solid #28287a;
  margin: 4%;
  padding: 4% 2%;
  text-align: center;
  border-radius: 44px 44px 44px 44px;
  -moz-border-radius: 44px 44px 44px 44px;
  -webkit-border-radius: 44px 44px 44px 44px;
}

.btn-lk {
  color: #fff;
}

.btn-lk:hover {
  color: #ffa000;
  text-decoration: none;
}

.btn-acc {
  background-color: #005a9c;
  /* background-color: #2980b9; */
  margin-bottom: 15px;
  margin-top: 15px;
  color: white;
  font-size: 110%;
  padding: 3%;
}

.btn-acc:hover {
  opacity: 0.8;
  color: white;
  font-weight: 600;
}

.btn-b-space {
  line-height: 50px;
}

.btn-paypal {
  width: 240px;
}

.btn-paypal:hover {
  width: 250px;
}

/*FORMS*/
/* Increase accessibility with focus */
.form-control,
.date-input {
  /* border: 1px solid #949494; */
  border: 2px solid #545454;
}
.form-control:focus {
  color: #212529;
  background-color: #fff;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.form-control::placeholder {
  color: #767676;
  opacity: 1;
}
.date-input::placeholder {
  color: #767676;
  opacity: 1;
}

.form-bg {
  background-image: url(images/runner-pack-goh-min.jpg);
  background-position: center left;
  background-size: cover;
}

.bg-black {
  background-color: #757575;
  padding-bottom: 3%;
}

#join .form {
  background-color: antiquewhite;
}

.date-input {
  width: 100%;
  height: 40px;
  color: #555;
  /* border: 1px solid #949494; */
  border-radius: 0.25rem;
}

.form-inline label {
  justify-content: flex-start;
}

.form-inline .form-control {
  width: 50%;
}

.form-inline .col-lg-2 {
  padding-right: 0;
}

.success {
  /* color: #333; */
  font-weight: 700;
  background-color: #ffa000;
  padding: 30px;
  width: 40%;
  z-index: 3;
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  text-align: center;
  border: 3px solid #757575;
}

.success-admin {
  /* color: #333; */
  font-weight: 700;
  background-color: #ffa000;
  padding: 30px;
  margin: 2% auto;
}

.require {
  color: #ffa000;

  color: #8b0000;
  /* font-size: 85%; */
}

.optional {
  color: #28287a;
  /* font-size: 85%; */
}

.form-err {
  border: 1px solid red;
}

/*MAIN NAVIGATION*/

.navbar-nav li:last-child {
  padding-right: 20px;
}

#nav-streakname {
  margin-left: 10px;
  font-weight: 600;
  font-size: 90%;
}

.error {
  color: red;
}

/*HOME*/

#home {
  padding-top: 40px;
}

.jumbotron h1 {
  font-size: 240%;
  font-weight: 600;
}

.jumbotron h1 {
  font-size: 240%;
}

.jumbotron h1 .smaller-text {
  font-size: 30%;
}

.jumbotron {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)),
    url("images/joshua-sortino2.jpg");
  background-size: cover;
  background-position: left bottom;
  color: #fff;
}

.jumbotron .divider {
  width: 70%;
  border-bottom: 1px solid #fff;
  margin: 1em;
}

.max1200 {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.bigitem {
  flex: 8 0 0;
}

.smallitem {
  flex: 1 0 0;
}

.justifycontent-flex {
  justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

/*STREAKS*/

.dark-primary-color {
  background: #ffa000;
}

.default-primary-color {
  background: #ffc107;
}

.light-primary-color {
  background: #ffecb3;
}

.text-primary-color {
  color: #212121;
}

.accent-color {
  background: #536dfe;
}

.primary-text-color {
  color: #212121;
}

.secondary-text-color {
  color: #757575;
}

.divider-color {
  border-color: #bdbdbd;
}

.accent-color2 {
  background-color: #007bff;
}
/*Opaque dark background to make text over images more prominent*/
.darken-bg {
  margin: 5%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  background-color: rgba(0, 0, 0, 0.4);
}

#streaks h3 {
  color: #fff;
  font-weight: 600;
  letter-spacing: 2px;
}

a.streak-link:link,
a.streak-link:visited {
  background-color: #fff;
  border: 10px solid #536dfe;
  margin: 3%;
  text-align: center;
  color: #555;
}

a.streak-link:hover,
a.streak-link:active {
  font-weight: 600;
  font-size: 110%;
  background-color: #536dfe;
  color: #fff;
  text-decoration: none;
}

.streak-form-section {
  background-color: aliceblue;
  color: #333;
  /* font-size: 95%; */
  border: 1px solid gray;
  /* box-shadow: -1px -3px 7px rgb(0 0 0 / 60%); */
  padding: 2%;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin: 2rem auto;
}

.streak-form-section h4 {
  color: #333399;
  font-weight: 600;
  padding: 2% 10px;
}

.link-to-form {
  border: 2px solid #536dfe;
  background-color: #fff;
}

.legends-thead {
  display: none;
}

.legends-h4 {
  display: none;
}

.show {
  display: block;
}

.show-thead {
  display: table-header-group;
}

.streak-category {
  font-weight: 600;
  margin-bottom: 1%;
  margin-top: 2%;
}

/*STREAK LISTS*/

.font-h1 {
  font-size: 200%;
}

.streak-table {
  max-width: 1250px;
  margin-left: auto;
  margin-right: auto;
}

.streak-table td {
  white-space: wrap;
}
/*applied on th tags of ACTIVE streak list to improve spacing */
.row-rank {
  width: 3%;
}
.row-name {
  width: 19%;
}
.row-streak-start {
  width: 15%;
}
.row-streak-end {
  width: 10%;
}
.row-location {
  width: 18%;
}
.row-age {
  width: 5%;
}
.row-occupation {
  width: 18%;
}
.row-streak-length {
  width: 19%;
}

#streak-list header {
  background-image: url(images/runner-cropped-2000-min.jpg);
  background-position: center center;
  background-size: cover;
}

/*JOIN*/

#join-header {
  background-image: url(images/runner-sunrise-sortino-min.jpg);
  background-position: bottom left;
  background-size: cover;
}

a.btn-primary.btnNext,
a.btn-primary.btnPrevious {
  color: #fff;
}

.join-nav {
  list-style-type: none;
}

.join-nav-item {
  display: inline-block;
}

.join-nav-item .active {
  font-weight: 600;
}

#profile-form {
  display: none;
}

.page-num {
  font-size: 110%;
  font-weight: 500;
  text-align: center;
  font-style: italic;
}

.line60 {
  width: 60%;
  border-bottom: 1px solid #333399;
  margin: -6px 0 8px 8px;
}

/*STATISTICS*/

/* Background pattern from Toptal Subtle Patterns */
.bg-wallpaper {
  background-image: url("images/darkness.png");
  background-repeat: repeat;
}

.bg-streak-blue {
  background-color: #303f9f;
}
/****GRID in stat-box*******/
.title1 {
  grid-area: title1;
}
.stat1 {
  grid-area: stat1;
}
.title2 {
  grid-area: title2;
}
.stat2 {
  grid-area: stat2;
}
.parent-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "title1 title2"
    "stat1 stat2";
  grid-column-gap: 10px;
  grid-row-gap: 0px;
}

.stat-box {
  /* max-width: 600px;
    min-width: 315px; */
  padding: 40px;
  margin: 20px 10px;
  -moz-box-shadow: 0 0 5px #888;
  -webkit-box-shadow: 0 0 5px #888;
  box-shadow: 0px 0px 5px #888;
}

.stat-box h3 {
  text-align: center;
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 10px;
  padding-top: 5px;
  border-bottom: 1px solid white;
}
.stat-box h5,
.area {
  font-size: 18px;
}
.bg-orange {
  background-color: #ff5722;
}
.bg-red {
  background-color: #d32f2f;
}
svg {
  fill: white;
}

#stats td {
  font-size: 1rem;
}
.cat-years {
  font-size: 14px;
  font-size: 1rem;
}

/*MEMBERS*/

#members header {
  background-image: url(images/runner-pack-goh-min.jpg);
  background-position: center left;
  background-size: cover;
}

.archive-block {
  text-align: center;
  margin-bottom: 15px;
}

.archive-block h4 {
  font-size: 90%;
}

.archive-block h6 {
  font-size: 80%;
}

.line {
  border-bottom: 1px dotted white;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
  color: white;
}

/*SHOP*/

#shop header {
  background-image: url(images/snow-cliff-kranz-min.jpg);
  background-position: bottom right;
  background-size: cover;
}
/*Plaque*/
.plaque-pic {
  max-width: 400px;
  margin-right: auto;
  margin-left: auto;
}

#preview {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  font-size: 1rem;
  padding: 1.5em;
  margin: 2em auto;
  border: 1px solid black;
  text-align: center;
  line-height: 250%;
}
/*max length for name at 417 is 17 letters
 need a function to count the letters use computed in vue to find out length and then calculate???*/
.plaq1 {
  font-size: 4.17em;
  line-height: 1.3;
}
.plaq2 {
  font-size: 3.17em;
  line-height: 1.3;
}
.plaq3 {
  font-size: 2.17em;
  line-height: 1.3;
}
.plaq4 {
  font-size: 2em;
  line-height: 1.3;
}
.fit {
  display: inline-block;
  white-space: nowrap;
}
.font1plus {
  font-size: 1.25rem;
}

/*FOOTER*/

footer {
  padding: 2%;
  background-color: aliceblue;
  color: #333;
}

footer a:link,
footer a:visited,
footer .btn-link {
  color: #333399;
}

footer a:hover,
footer a:active {
  color: #2980b9;
}

.facebook-link:link {
  border-bottom: 1px solid transparent;
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

.facebook-link:hover {
  opacity: 0.6;
}

.facebook {
  color: #3b5998;
}

#like-us i {
  border-radius: 50%;
}

footer svg {
  width: 20%;
  height: 20%;
  fill: #3b5998;
}

footer i {
  font-size: 200%;
}

footer h5 {
  font-size: 110%;
  color: #333;
}

footer p {
  font-size: 90%;
  margin-bottom: 5px;
}

footer address {
  font-size: 90%;
}

footer #privacy-content p {
  font-size: 100%;
}

/*ABOUT*/

#board-members ul {
  list-style: none;
  padding-top: 20px;
  line-height: 1.4;
}

#board-members li {
  padding-bottom: 15px;
}

#board-members .address {
  font-style: italic;
}

.member-name {
  font-weight: 600;
}

.banner {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 2%;
  padding-bottom: 2%;
}

#about header {
  background-image: url(images/runner-yellow-sneaks-metlzer-min.jpg);
  background-position: bottom right;
  background-size: cover;
}

/*ADMIN PAGES GENERAL*/

.output {
  color: indianred;
}

/*MEDIA QUERIES*/

@media (min-width: 767px) {
  .navbar-nav li:last-child {
    padding-right: 0px;
  }
}

@media (max-width: 1198px) {
  .success {
    padding: 25px;
    width: 70%;
  }
  .header {
    margin-top: 5%;
    margin-bottom: 5%;
  }
  .usa-int-table {
    width: 70%;
  }
}

@media (max-width: 950px) {
  .smallitem {
    margin-right: 10px;
  }
  #preview {
    font-size: 0.7rem;
  }
}

@media (max-width: 768px) {
  .btn {
    white-space: initial;
  }
  .vertical-line {
    border: 1px solid transparent;
  }
  /* .usa-int-table {
        width: 80%;
        
    } */
  .xs-hide {
    display: none;
  }
}

@media (max-width: 630px) {
  .success {
    width: 85%;
  }
  #streaks {
    background-image: url(images/marathon-mobile-min.jpg);
    background-position: center top;
  }
  .annual {
    padding-bottom: 15px;
  }
  .retired-list {
    font-size: 0.8rem;
  }
}

@media (max-width: 600px) {
  .cat-years {
    font-size: 0.9rem;
  }
  .usa-int-table {
    width: 100%;
  }
}

@media (max-width: 575px) {
  .flex-container {
    display: flex;
  }
  .date-input {
    flex: 1;
  }
  .banner {
    width: 90%;
  }
  #preview {
    width: 100%;
  }
}

@media (max-width: 525px) {
  body {
    font-size: 0.9rem;
  }
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.6rem;
  }
  .join-nav {
    padding-left: 0;
  }

  .streak-form-section {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .success {
    width: 90%;
  }
  .header {
    margin-top: 12%;
  }

  .streak-category {
    font-size: 1.1rem;
  }

  #step2 h5 {
    font-size: 1rem;
  }
  .font1plus {
    font-size: 1rem;
  }
  #preview {
    font-size: 0.5rem;
  }
  .plaq1 {
    font-size: 3.17em;
  }
}
@media (max-width: 485px) {
  #streak-list th {
    font-size: 0.8rem;
  }
  #streak-list td {
    font-size: 0.8rem;
    padding-left: 0.1rem;
  }
  #streak-list .col {
    padding-left: 8px;
    padding-right: 8px;
  }

  /*     .row-rank {
    width: auto;
} */
  .row-rank,
  .row-name,
  .row-streak-start,
  .row-location,
  .row-age,
  .row-occupation,
  .row-streak-length {
    width: auto;
  }
  /* .row-streak-start {
    width: auto;
}
.row-location {
    width: auto;
}
.row-age {
    width: auto;
}
.row-occupation {
    width: auto;
}
.row-streak-length {
    width: auto;
}  */
}
@media (max-width: 450px) {
  .parent-row {
    grid-template-columns: 1fr;
    grid-template-rows: 4fr;
    grid-template-areas:
      "title1"
      "stat1"
      "title2"
      "stat2";
  }
  .stat-box h3 {
    font-size: 18px;
  }
  .stat-box h5 {
    font-size: 14px;
  }
  .stat-box {
    padding: 25px 10px;
  }
}

@media (max-width: 400px) {
  .success {
    width: 100%;
  }
  .btn {
    white-space: initial;
  }

  table {
    font-size: 0.8rem;
  }
  .streak-category {
    font-size: 1rem;
  }
  .bigitem {
    flex: 7 0 0;
  }
  .bigitem h2 {
    font-size: 22px;
  }
  .smallitem {
    flex: 2 0 0;
  }
  .plaque-pic {
    max-width: 100%;
  }
  .retired-list {
    font-size: 0.7rem;
  }
  #streak-list th {
    font-size: 0.7rem;
  }
  #streak-list td {
    font-size: 0.7rem;
  }
}
@media (max-width: 380px) {
  .stat-box {
    width: 98%;
    padding: 30px 10px;
    margin: 20px auto;
  }
  /* .usa-int-table {
        width: 100%;
    }  */
  .container-fluid {
    padding-right: 5px;
    padding-left: 5px;
  }
  #streak-list .container-fluid {
    padding-left: 10px;
    padding-right: 10px;
  }

  table {
    font-size: 0.7rem;
  }
}

@media (max-width: 340px) {
  .btn-streak {
    font-size: 16px;
  }
}
@media (max-width: 325px) {
  .usa-int-table td {
    font-size: 12px;
  }
}