/**
 * Failed to minify the file using clean-css v5.3.3. Serving the original version.
 * Original file: /gh/grcrane/toolbox@6bbebf4/photogal.css
 *
 * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
 */
#doAction {
  display:  none;
}

#doAction.canEdit {
  display:  block;
}

#doReconcile {
  display:  none;
}

/*#galleryContainer.canEdit #doReconcile {
  display: block;
}*/


/* BASIC: https://css-tricks.com/adaptive-photo-layout-with-flexbox/ */
/* Previous Next selector for folder selection box */

#groupSelector {
    text-align:  center;
    margin-bottom:  10px;
  }
  #selectionChamp, #prevSelect, #nextSelect {
    display:  inline-block;
  }
  #selectionChamp {
    width:  auto;
  }

/* Override some Bootstrap defaults */

@media (min-width: 992px) {
  div.container, .container-lg, .container-md, .container-sm {
    max-width: 1280px;
  }
}

/* Remove the border and slim up top padding */

#primary {
   padding-top:  0;
}

#primary #main article {
   border:  none;
}

#cards figure {
   display:  none;
   position:  relative;
}

#cards figure.active {
   display:  block;
}

#galleryContainer div.info {
  text-align: center;
  font-style: italic;
  width: 80%;
  text-align: center;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
}

#galleryContainer div.info span {
  display: block;
}

#galleryContainer div.info span.info-title {
  font-weight:  bold;
  display: block;
}

#galleryContainer div.info span.info-message,
#galleryContainer div.info span.info-location {
  display: none;
}

#galleryContainer div.info span.info-textarea,
#galleryContainer.canEdit div.info span.info-groupname,
#galleryContainer.canEdit div.info span.info-title {
  display: none;
}

#galleryContainer.canEdit div.info span.info-textarea   {
  display: block;
}

#galleryContainer div.info span.info-groupname,
#galleryContainer div.info span.info-title {
  display:  inline-block;
  font-weight:  bold;
  font-style:  italic;
}


div.marker {
  position:  absolute;
  top:  20px;
  left:  20px;
  color:  white;
  display:  none;
  background-color: rgba(256,256,256,.5);
  border-radius: 10px;
  padding: 0 10px;
  color: black;
}

#cards.addMarker div.marker {
  display:  block;
}

div.thePhotos {
  display: flex;
  flex-wrap: wrap;
}

#cards figure{
  flex: 0 0 calc(20% - 10px);
  margin: 5px;
  /*background: #E9D2FF;*/
  overflow: hidden;
}

#showing {
  margin:  5px;
  display: inline-block;
}

#displayType { 
  display:  none;
}

#doRefresh {
  display:  none;
}

#galleryContainer {
  width:  100%;
  margin:  0 auto;
}

#galleryContainer.canEdit #displayType  {
  margin: 5px;
  display: block;
}

@media (max-width: 640px) {
  #galleryContainer {
  width:  100%;
}
}

#cards figure figcaption {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight:  500;
  font-size:  15px;
  text-align:  center;
}

#cards figure figcaption textarea{
  font-weight:  600;
}

#cards li:last-child {
  // There's no science in using "10" here. In all my testing, this delivered the best results.
  flex-grow: 10;
}

#cards img {
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
  height: auto;
  width:  100%;
   aspect-ratio:  6 / 6;
}

#cards figure.hidden img {
  border:  5px solid purple;
}

#cards .imageGalleryCheck {
  position: absolute;
    top: 10px;
    right: 10px;

    color: white;
    padding: 6px;
    border-radius: 5px;
    cursor: pointer;
}

#cards .imageGalleryEdit {
  position: absolute;
  top: 15px;
  left: 10px;
  
  padding: 0 3px;
  border-radius: 5px;
  cursor: pointer;
  
  background: white;
  color: black;
}

input[type=checkbox] {
    transform: scale(1.5);
}

figure div.imageGalleryCheck input[type="checkbox"] {
  transform: scale(2.5);
}

figure div.figImage {
  position:  relative;
}


@media (max-width: 940px) {
  #cards figure{
    flex: 0 0 calc(33% - 10px);
  }
}


/* Smaller screens in portrait */

@media (max-aspect-ratio: 1/1) and (max-width: 480px) {
  div.thePhotos {
    flex-direction: row;
  }

  #cards figure{
  flex: 0 0 calc(50% - 10px);
}

   #cards figure {
    height: auto;
    width: 100%;
    max-width:  unset;
  }
  #cards img {
    width: 100%;
    max-height: 75vh;
    min-width: 0;
    max-width:  unset;
  }
}

#cards {
    width:  100%;
    margin:  0 auto;
}

div.slick-lightbox .slick-prev, 
div.slick-lightbox .slick-next {
  top: 50%; 
  z-index:  1;
}



#cards .imageGalleryCheck,
#cards .imageGalleryEdit {
  display:  none;
}

/*#cards.canEdit .imageGalleryCheck,
#cards.canEdit .imageGalleryEdit {
  display:  block;
}*/

##cards.canEdit {
  /*margin: 0 2%;*/
}

#cards.canEdit figure a {
  cursor: default;
}

#content h3 {
  text-align:  center;
}

#content h1.page-title {
   display:  none;
}

x.modal-body img {
  width: 100%;
}

#galleryContainer #searchBox {
  background:  unset;
  text-align:  center;
}

#content #searchBox input {
  line-height: 1em;
}

#content #selectionChamp select.showSearch {
  text-decoration: line-through;
  text-decoration-thickness: 2px;  
}

/* --------- new 9/29/22 -------- */

#filter {
  text-align:  center;
}

#filter a.filterItem {
  display:  inline-block;
}
#filter a.filterItem.active {
  font-weight:  bold;
}

#filter {
  margin-bottom:  10px;
}


#theCarousel div.classcontent {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#theCarousel div.item div.title {
    font-weight: 500;
    font-size: 1.2em;
}
#theCarousel div.item div.classcontent {
    font-style: italic; 
}
#theCarousel div.item img {
    width: 100%;
    object-fit: cover;
    aspect-ratio:  4 / 3;
}
#theCarousel div.classcontent {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#theCarousel div.item div.title {
  font-weight: 500;
  font-size: unset;
  line-height: unset;
  padding: 5px 0;
  color: black;
}

#theCarousel div.item div.classcontent {
  font-style: italic;
  line-height: unset;
  font-weight: unset;
  font-size: unset;
}
#theCarousel div.readmore {
  font-size: unset;
  font-style: italic;
  display: none;
}
#theCarousel div.classcontent p:first-child {
  margin-top: 0;
}

#theCarousel div.slick-list .itemFilterCats {
  font-size: 13px;
  line-height: 1.4em;
  text-transform: none;
  display:  none;
}
#theCarousel div.slick-list div.classcontent {
  margin-bottom: 10px;
  color: black;
}
#theCarousel div.slick-list div.readmore {
  margin: 0 0 10px 0;
  font-size: unset;
  line-height: 20px;
  text-align: left;
  display: none;
}

#theCarousel ul.slick-dots {
  bottom: unset;
}
#theCarousel div.item .itemFilterCats {
  display: none;
}
#theCarousel div.item .itemFilterCats.active {
  display: block;
}

#theCarousel div.item.active {
  border:  2px solid red;
}

#theCarousel div.owl-nav button  {
  padding: 0 20px !important;
  font-size: 30px;
  border: 1px solid black;
}

#theCarousel div.marker {
  position:  absolute;
  top:  0;
  left:  0;
  display:  block;
  background-color: white;
  padding: 5px;
  color: black;
  border-radius: 0;
  border:  1px solid black;
}

#theCarousel {
  display: flex;
  flex-wrap: nowrap;
  overflow-x:  auto;
}

#theCarousel div.item {
  flex: 0 0 calc(20% - 0px);
  margin: 5px;
  overflow: hidden;
  position:  relative;
}

#theCarousel div.item {
  display: none;
}

#theCarousel div.item.show {
  display:  block;
}

#galleryContainer .searchBox {
  background:  unset;
  text-align:  center;
}

#folderSelector {
    text-align:  center;
    margin-bottom:  10px;
  }



button#setGallery.active, button#setFolder.active {
  background:  green;
  color:  white;
}



#showing {
  margin-top:  20px;
  display: inline-block;
  width:  100%;
}
#showing div.count {
  width: 33%;
  display: inline-block;
}
#showing div.title {
  width: 33%;
  text-align: center;
  display: inline-block;
  font-weight: bold;
}

#galleryContainer .prevSelect, .nextSelect {
    display:  inline-block;
  }

#galleryContainer #filter {
  display:  inline-block;
}

#galleryContainer span.info-textarea,
#galleryContainer span.info-textarea,
#galleryContainer.canEdit div.info span.info-groupname,
#galleryContainer.canEdit div.info span.info-title {
  display: none;
}

#galleryContainer.canEdit span.info-textarea   {
  display: block;
}

/* --- lrm, left-right-middle flex boxes -- */ 
#searchGalleryBox,
#galleryContainer div.lmr {
  margin-bottom: 10px;
  display: flex;
}
#searchGalleryBox div,
#galleryContainer div.lmr div {
  flex:  1;
}
#galleryContainer div.lmr div.middleDiv {
  flex:  0;
}
#galleryContainer div.lmr div.leftDiv a,
#galleryContainer div.lmr div.leftDiv span  {
  float:  right;
  margin-right:  10px;
  white-space:  nowrap;
  overflow: hidden;
  text-overflow:  ellipsis;
}
#galleryContainer div.lmr div.rightDiv a {
  float:  left;
  margin-left:  10px;
  white-space:  nowrap;
  overflow: hidden;
  text-overflow:  ellipsis;
}

div.infoForm {
  display:  flex;
}

div.lr {
  display:  flex;
}

div.lr div.leftField {
  padding-right:  10px;
}

div.lr div.rightField {
  flex:  1;
}

/* -- Gallery Data -- */
#galleryData {
  margin: 0;
  margin-top:  20px;
}

#galleryData div.infoBox {
  display:  flex;
}

#galleryData div.infoBox .infoItem {
  width:  33%;
}

#galleryData div.infoBox .infoItem.theCount {
  text-align:  left;
}

#galleryData div.infoBox .infoItem.theTitle {
  text-align:  center;
  font-weight:  bold;
}

#galleryData div.infoBox .infoItem.theCat {
  text-align:  right;
}

#galleryData hr {
  margin:  0;
}

/* start flexing */

ul.flex-outer {
  padding-left:  0;
}
.flex-outer li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.flex-outer > li > label,
.flex-outer li p {
  flex: 1 0 50px;
  max-width: 100px;
}

.flex-outer > li > label + * {
  flex: 1 0 220px;
}

ul.flex-outer li input.short {
  width: 400px;
  flex:  0;
}

#galleryContainer div.info span.info-message,
#galleryContainer div.info span.info-location,
#galleryContainer #infoForm {
  display: none;
}

#galleryContainer div.info span.info-textarea,
#galleryContainer.canEdit div.info span.info-groupname,
#galleryContainer.canEdit div.info span.info-title
 {
  display: none;
}

#galleryContainer.canEdit div.info span.info-textarea,
#galleryContainer.canEdit #infoForm   {
  display: block;
}

#galleryContainer div.info span.info-groupname,
#galleryContainer div.info span.info-title {
  display:  inline-block;
  font-weight:  bold;
  font-style:  italic;
}

div#radioButtons {
  display:  flex; 
  justify-content: center;
  white-space: nowrap;
  flex: 1;
  margin-bottom:  10px;
  flex-wrap: wrap;
  width:  60%;
  margin:  0 auto;
  margin-bottom:  10px;
}

div#radioButtons div.r {
  margin-left:  5px;
  margin-right:  5px;
  width:  100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

div#radioButtons div.r  label {
  font-weight:  normal;
}
div#radioButtons div.r  label.active {
  font-weight:  bold;
}

#galleryContainer div#folderSelector {
  display:  none;
}

#galleryContainer div#viewButtons {
  margin-bottom:  10px;
}

.photo-header.home {
  padding: 5px 5px;
  text-align: center;
}
.photo-header {
  background: #0073aa;
  padding: 1rem 0;
  position: relative;
  margin-bottom:  10px;
}

.photo-header h1 {
  margin-top:  10px;
  margin-bottom:  10px;
}

.photo-title a {
  text-decoration: none;
}
.photo-title a {
  color: #fff;
  font-weight: 300;
}

div#thePhotoGallery {
  background:  rgba(64, 77, 92, 0.05);
}

#theCarousel div.item.active {
  border: 2px solid #0073aa;
}

.videoContent {
  width:  100%;
  margin:  0 auto;
}
.videoContent video {
  width:  100%;
  height: auto;
  aspect-ratio:  16/9;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

#galleryData div.theTitle {
  text-align: center;
  font-weight:  normal;
  margin-bottom:  10px;
  width:  100%;
}

#galleryData div.theCount {
  text-align: left;
  font-weight:  normal;
}

/* video play button */
#galleryData figure .playButton,
#galleryData figure.playCircle {
  display:  none;
}
#galleryData figure.video .playButton {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 20px solid white;
  height: 0px;
  position: absolute;
  top: 50%;
  left: 51%;
  transform: translate(-51%, -50%);
  display: inline-block;
}
#galleryData figure.video .playCircle {
  height: 35px;
  width: 35px;
  background-color: transparent;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid white;
}

#theCarousel div.item div.title {
  display:  none;
}

#myModal .modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: auto;
  max-width: 600px;
}
#myModal video {
  width:  100%;
  height:  100%;
  aspect-ratio:  9 / 6;
}
@media (max-width: 720px) {
  #myModal iframe {
    aspect-ratio: 560 / 315;
    height: 100%;
    width: 100%;
  }
}

@media (max-width: 640px) {
  div#radioButtons {
    width:  100%;
  }
    div#radioButtons div.r {
    width: 30%;
  }
  .photo-header h1 {
    font-size:  25px;
  }
  .photo-header p {
    display:  none;
  }
}


@media (max-width: 1000px) {
  #theCarousel div.item {
    flex: 0 0 calc(33% - 10px);
  }
}

@media (max-width: 800px) {
  #theCarousel div.item {
    flex: 0 0 calc(50% - 10px);
  }
}

/* added 11/18/2022 for CCLA */

@media (max-width: 640px) {
  div#searchGalleryBox {
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    text-align: center;
  }

  #galleryContainer div.lmr div.leftDiv span {
    float: unset !important;
  }

  #searchGalleryBox.lmr div.rightDiv a {
    float: unset !important;
  }
}