/* ***********************************
* FROM MASTERPAGE  ************
************************************* */

.to-do-item {
  background: mediumvioletred;
  color: white;
}
.text-bold {
  font-weight: bold;
}

.text-500 {
  font-weight: 500;
}

h1, h2, h3 { /* TODO: fix in _ColorsFontsBordersBackgrounds.scss */
  font-size: 1.625rem;
}

h4 { /* TODO: fix in _ColorsFontsBordersBackgrounds.scss */
  font-size: 1.25rem;
}

a.LinkStyle7.link-color-7,
a.LinkStyle7.link-color-7:link,
a.LinkStyle7.link-color-7:visited {
  /* TODO: LinkStyle7 Not in main styles.css ? fix in _ColorsFontsBordersBackgrounds.scss */
  color: rgb(180,215,255);
}

a.LinkStyle7.link-color-7:active,
a.LinkStyle7.link-color-7:focus,
a.LinkStyle7.link-color-7:hover {
  /* TODO: LinkStyle7 Not in main styles.css ? fix in _ColorsFontsBordersBackgrounds.scss */
  color: rgb(255,240,0);
}





.myAltCard-header p.myAltCard-header__BltDates {
  font-size: 60%;
  font-weight: 500;
  color: rgb(90,90,100); /* no longer textDarkOnLight */
}

.winnipegTheme .myAltCard-header p.myAltCard-header__BltDates {
  color: rgb(65, 68, 74);
}



/* ***********************************
* END FROM MASTERPAGE   ************
************************************* */





/* ***********************************
* FREIGHTCARS FRONT PAGE  ************
************************************* */

/* #freightcarsFrontPage included for specificity required to override styles.css or myAccordion.scss */


#freightcarsFrontPage .Accordion {
  height: auto;
  overflow: auto;
  /* fixes:
    hover box shadow on 1st and last accordion headers, and on all accordion header side borders is visible
    Fix taken from inline-style of old site; possibly generated automatically by .net or ajaxcontroltoolkit
 */
  }

#freightcarsFrontPage .Accordion .accordionHeader {
  display: flex;
  justify-content: space-between;
}

#freightcarsFrontPage .Accordion .new-accordion-header-active {
  background: linear-gradient(#e8ebe0, #f5f5ed);
	box-shadow: #505064 0 0 4px 4px;
	border-color: #646478;
}


#freightcarsFrontPage .Accordion .new-accordion-header-active:hover {
  background: #2d88ef;
	border-color: #14141e;
}



/* ***********************************
* FROM TRANSIT/INDEX.PHP
************************************* */



  .contentMainSection.indexPage-cards-in-row .myAltCard {
    min-height: 340px;
  }

  .myForms.lightmode {
    background-color: rgb(245,245,237);
    color: rgb(55,55,59);
  }

  .myForms.darkmode {
    background-color: rgb(55,55,59);
    color: rgb(195,195,190);
  }

    .myForms.darkmode input[type='text'],
    .myForms.darkmode input[type='search'],
    .myForms.darkmode select {
      color: rgb(195,195,190);
      background-color: rgb(80,80,85); /*rgb(195,195,190);*/
    }

  .myForms.darkmode .formLabel label {
     color: rgb(195,195,190); /*rgb(110,110,105); */
  }


  /* ***********************************
  * END FROM TRANSIT/INDEX.PHP
  ************************************* */



  /* ***********************************
  * FREIGHTCARS GRIDVIEW FILTERS COLUMN
  ************************************* */



  #gridview_with_filter_column {
    display: flex;
    flex-direction: row; /* not settled on this; may switch to column (filters above table) or at least column for mobile) */
  }

  #gridview_with_filter_column .dataTables_wrapper {
    flex-grow: 1;
      /* Override */
      /* Default: margin-top: 15px;
      margin-bottom: 15px; */
      margin-top: 0;
      margin-bottom: 0;
  }

.javascript-filters {
  padding: .5rem;
  padding-left: 0;
  max-width: 140px;
}
 .javascript-filters h4,
 .javascript-filters > div {
   margin-bottom: 1rem;
   padding-bottom: 1rem;
   border-bottom-width: 1px;
 }

 .javascript-filters p {
   margin-bottom: .375rem;
 }


 .javascript-filters h4,
 .javascript-filters p {
   font-weight: bold;
 }

 .javascript-filters > div {
   display: flex;
   flex-direction: column;
}

.javascript-filters > div span {
  padding: 2px;
  margin-bottom: 2px;
}

.javascript-filters > div span.clear {
  font-style: italic;
  text-align: center;
}

.javascript-filters > div span.clear.hidden {
  visibility: hidden;
}

.javascript-filters > div span.clear.show {
  visibility: visible;
}

 .javascript-filters > div span:hover,
 .javascript-filters > div span.active {
   color: black;
   background-color: white;
   border-radius: 2px;
 }



 /* **************************************
 * END FREIGHTCARS GRIDVIEW FILTERS COLUMN
 ************************************** */



  .freightcars-search-gridview td.freightcar-details > span {
    display: flex;
    flex-flow: row;
    /*  justify-content: space-between; */
  }

.freightcars-search-gridview td.freightcar-details > span span:first-child {
  width: 65px;
  /* border: 1px solid red; */
}




.content.search-page a.btn-back,
.content.search-page a.btn-back:link
{
  color: white;
  margin-bottom: 1rem;
}

.content.search-page .page-blurb-search-list {
  display: inline-block;
  min-width: 150px;
}


/* .indexPage-img-200 {
  max-width: 200px;
} */


@media (max-width: 500px) {
  .content {
    max-width: 100vw;
  }
}


/********************************************/
/* ************   VIEWIMAGE *************** */
/********************************************/

/* Moved to _viewImagePages.scss */

/* ******** END  VIEWIMAGE *************** */





/********************************************/
/* ************** GALLERY ***************** */
/********************************************/

.thumbnail-strip {

  /* border: 1px solid purple; */
  /* align-self: center; */
  margin: 0 auto 1rem;
  overflow-x: hidden;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  height: 80px; /* avoids full image below from jumping when thumbnail highlight border slides in/out of view */
  width: 990px; /* 990 = 9 thumbnails */
}

.js-thumbnail {

  display: inline-block;
  margin: 0;
  margin-right: 10px;
  height: 62px;
  width: 100px;
  box-sizing: content-box;
  position: relative;

}

.js-thumbnail.active-thumbnail {

  border-bottom: 5px solid rgb(50,100,255);
  padding-bottom: 8px;

}

.js-thumb-prev {
  position: absolute;
  top: -33px;
  left: 10px;
  /* border: 1px solid pink !important; */
}

.js-thumb-next {
  position: absolute;
  top: -33px;
  right: 10px;
  /* border: 1px solid pink !important; */
}


.js-img-frame-wrapper {
  position: relative;
  margin: 0 auto;
  /* border: 4px solid lightblue; */
  max-width: 1200px; /* TODO FUTURE Modify if ever posting pics larger than 1200px */
  /* display: table; */

}

.js-img-frame {
  position: relative;
  margin: 0 auto;
  /* border: 3px solid pink; */
  display: table;
}

.js-img-frame img {
  vertical-align: middle;
}


.js-img-top-caption,
.js-img-bottom-caption {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: .5rem 1rem;
  background-color: rgb(60,60,60);
  color: rgb(210,210,210);
  font-size: 1.25rem;
  font-weight: normal;
  font-family: Roboto;
}



.js-img-bottom-caption .caption-label {
  color: rgb(110,110,110);
  min-width: 100px;
}

.js-img-top-caption .caption-data,
.js-img-bottom-caption .caption-data {
  text-align: right;
}




.js-img-top-caption {
  position: relative;
  margin-bottom: 5px;
  align-items: center;
}

.js-img-top-caption #rm_number {
  font-size: 1.5rem;
  font-weight: bold;
}

.js-img-bottom-caption {
  margin-top: 5px;
}

.js-img-bottom-caption .img-number {
  color: rgb(120,120,120);
  font-style: italic;
  font-size: 1rem;
  padding-top: 2px;
}


.js-img-bottom-caption.caption--one div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
    align-items: center;
}

.js-img-bottom-caption.caption--two {
  margin-top: 1px;
}

.js-img-bottom-caption.caption--two div {
  display: flex;
}

.js-img-bottom-caption.caption--two > div {
  flex-direction: column;
}

.js-img-bottom-caption.caption--two > div > div {
  
  flex-direction: row;
  justify-content: space-between;

  margin-bottom: .5rem;
}


img.js-gallery-thumbnail {
  margin: 4px 6px;
}


img.js-gallery-large {
  max-width: 100%; /* image scales down for smaller screens */
}


.js-img-background {
  padding:3rem;
  display:none;
  height:100%;
  width:100%;
  position:absolute;
  top:0;
  left:0;
  background-color:rgba(15,15,15,.98);
  z-index: 100;
}

.js-img-background button {
  outline: 0;
  border: 0;
  padding: 2rem;
  background-color: transparent;
  cursor: pointer;
}

.js-img-background i {
  background-color: transparent;
  color: rgba(255,255,255,.5);
  font-size: 4rem;
}

.js-img-close {
  position: absolute;
  top: -25px;
  right: -18px;
}

.js-img-close i {
  font-size: 2rem;
  color: rgb(195, 0, 0);
}

.js-img-close i:hover {
  font-size: 2rem;
  color: rgb(240, 0, 0);
}

.js-img-prev,
.js-img-next {
  position: absolute;
  top: 45%;
}

.js-img-prev {
  left: -75px;
}

.js-img-next {
  right: -75px;
}


@media (min-width: 551px) {
  .js-img-top-caption,
  .js-img-bottom-caption {
    flex-direction: row;
    justify-content: space-between;
  }

  .js-img-bottom-caption .caption-label {
    min-width: unset;
    margin-right: 1rem;
  }
  

  .js-img-bottom-caption.caption--one div {
    flex-grow: 1;
  }

  .js-img-top-caption {
    padding-right: 3rem;
  }

  .js-img-top-caption #photo_date {
    order: 1;
  }

  .js-img-top-caption #rm_number {
    order: 2;
  }

  .js-img-top-caption #location {
    order: 3;
  }

  .js-img-bottom-caption.caption--two {
    flex-grow: 1;
    flex-direction: column;
    
  }

  .js-img-bottom-caption.caption--two > div {
    flex-direction: row;
    justify-content: space-between;
  }

  .js-img-bottom-caption.caption--two > div > div {
    flex-wrap: wrap;
  }

  .js-img-bottom-caption.caption--two > div > div .caption-data {
    text-align: left;
  }
}

@media (min-width: 576px) {

  .js-img-top-caption {
    padding-right: 4rem;
  }



}


@media (min-width: 1351px) {

  .js-img-prev {
    left: -90px;
  }
  
  .js-img-next {
    right: -90px;
  }
  

}


  /* *** vic park *** */

  .contentMainSection.vic-park {
    margin-top: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 3px solid #82aad8;
  }

  @media (min-width: 1000px) {

    .contentMainSection.vic-park {
      display: flex;
      flex-direction: row;
    }

    .vic-park--gallery-links {
      order: 1;
    }

    .vic-park--img {
      order: 2;
      margin-left: 1rem;
    }

  }

  /* * end vic park * */

  .js-gallery-thumbnail {
    cursor: pointer;
    box-shadow: 2px 2px 6px rgb(0,0,0);
  }


/* ************ END GALLERY *************** */


/* *************** FREIGHT SEARCH *************** */

.pageBlurb strong {
  display: inline-block;
  margin-bottom: .5rem;
}

.myFormsRow .formInput input.car-number-range-txtbx {
  display: inline-block;
  width: 49%;
}

.myFormsRow .formInput.car-number-range {
  display: flex;
  justify-content: space-between;
}

/* ************* END FREIGHT SEARCH ************* */




/* ************* FEATURE PAGES (NEW) ************ */

@media (min-width: 500px) {
  .thumbnail-cards--img.no-min-height {
    min-height: unset; /* overrides main styles */
  }
}

.thumbnail-cards--middle {
  padding-top: 1.5em; /* overrides main styles */
}

.thumbnail-cards--footer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.js-preload,
.js-cards-preload {
  display: inline-block;
  border-radius: 3px;
}

p.IndexItemPhotoCounts.js-cards-preload {
  display: block;
}

.js-preload {
  background-color: rgb(83, 142, 201);
  width: 40px;
}

.js-cards-preload {
  background-color: rgb(75,75,75);
  width: 100px;
}

  /*.thumbnail-cards--body span.reporting-marks span {
align-self: center;
  display: inline;
  width: 20px;
}*/