/* PASSWORDED
 * */
.passworded {
   max-width: 280px;
   margin: 0 auto;
}
.passworded p:last-child {
   display: flex;
   column-gap: 4px;
}



/* TOP SECTION
 * */
.topsection {
   margin-top: 1.5em;
}
@media( min-width: 768px ) {
  .topsection {
      display: flex;
      align-items: center;
      column-gap: 32px;
      margin-top: 56px;
  }
}
@media( min-width: 1024px ) {
  .topsection {
      column-gap: 56px;
  }
}



/* Top pic
 * */
.mainmedia {
/*
   width: 100%;
*/
/*
   max-width: 512px;
*/
   margin: 0;
   padding: 0;
   position: relative;
/*
   background: var(--color-picturebg);
*/
}

/* Ended Badge
 * */
.mainmedia .endedbadge {
   position: absolute;
   top: 12px;
   right: 12px;
   background-image: url(/images/ended-badge.png);
   background-size: contain;
   color: white;
   width: 100px;
   text-align: center;
   align-content: center;
   aspect-ratio: 1 / 1;
   font-size: .7em;
   font-weight: 500;
}
@media( min-width: 640px ){
   .mainmedia .endedbadge {
      font-size: 1em;
      width: 150px;
   }
}

.mainmedia img {
   display: block;
   width: 100%;
   height: auto;
}
/*
.mainmedia:empty {
   display: none;
}
*/
.mainmedia figcaption {
   padding-bottom: 48px;
   margin: 24px 0 0;
   font-size: .85em;
   color: var(--color-default-light);
}
@media( min-width: 768px ) {
   .mainmedia {
/*
      margin: 0;
*/
      flex: 0 0 60%;
   }
   .mainmedia figcaption {
      padding-bottom: 0;
   }
   .topsection .properties {
      flex: 1;
   }
}



/* VIDEO
 * */
.videowrap {
   width: 100%;
   height: 100%;
}
.videowrap > iframe {
   width: 100%;
   height: 440px;
}



/* TITLE
 * */
.topsection .properties h1 {
   margin: 0;
   display: flex;
   flex-wrap: wrap;
   column-gap: 12px;
   align-items: center;
   font-size: 1.8em;
}
.topsection .properties h1 .svg {
   font-size: .7em;
   display: block;
}


/* Author
 * */
.properties .authorcat {
   font-size: .8em;
   font-weight: 500;
   margin: 16px 0 0;
}
.properties .authorcat,
.properties .authorcat a {
   color: var(--color-default-light);
}
.properties .authorcat a {
   transition: 0.3s;
}
.properties .authorcat a:hover {
   color: white;
   text-decoration: none;
}



/* Progress
 * */
.properties .progress {
   margin-top: 32px;
   color: var(--color-light);
}
.properties .progress ul,
.properties .progress li {
   margin: 0;
   padding: 0;
   display: flex;
}
.properties .progress ul {
   list-style: none;
   justify-content: space-between;
}
.properties .progress li {
   flex-direction: column;
   row-gap: 12px;
   font-weight: 500;
}
.properties .progress li span:nth-child(2) {
   font-size: .65em;
}
.properties .progress meter {
   width: 100%;
   height: 10px;
   margin-top: 16px;
   border: none;
}



/* ENDED
 * */
.properties .ended {
   display: block;
   margin: 16px 0 0;
   font-weight: 500;
   color: var(--color-default-light);
}



/* Reward amounts
 * */
.rewardamounts h2 {
   font-size: 1em;
   font-weight: 500;
   margin: 24px 0 0;
}
.rewardamounts ul {
   margin: 16px 0 0;
   padding: 0;
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   column-gap: 8px;
   row-gap: 8px;
   line-height: 1;
   color: var(--color-primary);
   cursor: pointer;
}
.rewardamounts li {
   border: 2px solid var(--color-primary);
   padding: 8px 12px;
   border-radius: 4px;
   transition: 0.3s;
}
.rewardamounts li:hover {
   border-color: white;
   color: white;
}
.rewardamounts p {
   margin: 24px 0 0;
}



/* Amount submitter input
 * */
.amountinput {
   display: flex;
   column-gap: 8px;
   align-items: center;
}
.amountinput .fieldwithsymbol {
   flex-basis: 150px;
}
.amountinput button {
   white-space: nowrap;
   width: 100%;
}



/* Location
 * */
.location {
   font-size: 1.2em;
   color: var(--color-default-lighter);
   display: flex;
   column-gap: 8px;
   align-items: center;
   margin: 32px 0 0;
}
.location path {
   fill: var(--color-default-lighter);
}



/* BOTTOM SECTION
 * */
.bottomsection {
   margin-top: 48px;
   padding-bottom: 32px;
   overflow-wrap: anywhere;
}
.bottomsection .panels {
   overflow-wrap: anywhere;
}
.sidebar:empty {
   display: none;
}
@media( min-width: 768px ) {
   .bottomsection {
      display: flex;
      justify-content: space-between;
      column-gap: 32px;
      margin-top: 72px;
   }
   .bottomsection .panels {
      flex: 0 0 60%;
   }
   .sidebar {
      flex: 1;
   }
}
@media( min-width: 1024px ) {
   .bottomsection {
      column-gap: 56px;
      margin-top: 128px;
   }
}



/* PANELS
 * */
.bottomsection > .panels > fieldset {
   font-size: .8em;
   font-weight: 500;
   display: flex;
   column-gap: 24px;
   margin: 0;
   padding: 0;
   border: none;
}
@media( min-width: 768px; ) {
   .bottomsection > .panels > fieldset {
      font-size: .9em;
   }
}
.bottomsection > .panels > fieldset label,
.bottomsection > .panels > fieldset a {
   display: flex;
   column-gap: 4px;
   align-items: center;
   padding-bottom: 16px;
   text-decoration: none;
   border-bottom: 3px solid transparent;
   color: var(--color-default-light);
   cursor: pointer;
}
.bottomsection > .panels > fieldset a path {
   fill: var(--color-default-light);
}
.bottomsection > .panels > fieldset label:hover,
.bottomsection > .panels > fieldset a:hover {
   color: var(--color-primary);
}
.bottomsection > .panels > fieldset a:hover path {
   fill: var(--color-primary);
}
.bottomsection > .panels > input,
.bottomsection > .panels > div > div {
   display: none;
   margin-top: 48px;
   font-size: 1.2em;
}
#panel-detail:checked ~ div > div:nth-child(1),
#panel-backers:checked ~ div > div:nth-child(2) {
   display: block;
}
#panel-detail:checked ~ fieldset > label:nth-child(1),
#panel-backers:checked ~ fieldset > label:nth-child(2) {
   border-color: var(--color-primary);
   color: var(--color-primary);
}

/* Scroll margin
 * for the scrollintoview on the backers list
 * */
@media( min-width: 1024px ) {
   .bottomsection > .panels > fieldset {
      scroll-margin-top: var(--headerheight);
   }
}



/* BACKER List
 * */
.backerlist {
   margin: 0;
   padding: 0;
   list-style: none;
   font-size: .9em;
   border-top: 1px dashed var(--color-default-lighter);
}
.backerlist li {
   display: grid;
   grid-template-columns: 3fr 2fr;
   padding: 12px 0;
   border-bottom: 1px dashed var(--color-default-lighter);
   column-gap: 4px;
}
.backerlist li:hover {
   background-color: #c5c7cd;
}
.backerlist li > * {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.backerlist time {
   grid-column: 1/3;
   font-size: .8em;
   color: var(--color-default-light);
   font-family: var(--font-family-monospace);
}
.backerlist strong {
   font-weight: 400;
}
.backerlist span {
   text-align: right;
}
@media( min-width: 1024px ) {
   .backerlist li {
      grid-template-columns: 4fr 2fr 180px;
   }
   .backerlist span {
/*
      text-align: left;
*/
   }
   .backerlist time {
      grid-column: 3/4;
      font-size: inherit;
      text-align: right;
   }

}
.backers .loadmoar {
   margin-top: 32px;
   text-align: center;
   font-size: .85em;
   color: var(--color-default-lighter);
}
.backers .loadmoar path {
   fill: var(--color-primary);
}



/* Detail, Logline
 * */
/*
.bottomsection .panels > div > div.detail > .logline {
   font-weight: 600;
   padding-bottom: 48px;
}
.bottomsection .panels > div > div.detail > .logline:empty {
   display: none;
}
*/
.bottomsection .panels > div > div.detail > .description img {
   max-width: 100%;
   height: auto;
}



/* REWARDS
 * */
.rewards > ul,
.rewards > ul ul {
   margin: 0;
   padding: 0;
   list-style: none;
   display: flex;
   flex-direction: column;
}
.rewards > ul {
   row-gap: 32px;
}
.rewards > ul > li {
   background: white;
   padding: 18px;
   position: relative;
}
.rewards > ul ul {
   margin-top: 24px;
   font-size: .8em;
   color: var(--color-default-lighter);
/*
   row-gap: 8px;
*/
}
/* Selector
 * */
.rewards .selector {
   display: block;
   opacity: 0;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,.6);
   transition: 0.3s;
}
.rewards .selector button,
.rewards .selector strong {
   width: auto;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}
.rewards .selector strong {
   color: white;
   font-weight: 500;
}
.rewards .selector.shown {
/*
   display: block;
*/
/*
   background-color: rgba(0,0,0,.75);
*/
   opacity: 1;
   transition: 0.3s;
}
.rewards .legend {
   font-size: .75em;
   color: var(--color-default-light);
   margin: 32px 16px 0;
}



/* Gallery
 * */
.gallery figure {
   margin: 0;
   padding: 0;
   background: var(--color-picturebg);
   aspect-ratio: 1/1;
   width: 100%;
}



/* FS DASHBOARD
 * Report Title
 * */
.reporttitle h1 {
   margin-bottom: 0;
   text-align: center;
   display: flex;
   flex-direction: column;
   row-gap: .5em;
}
.reporttitle code {
   color: var(--color-danger);
}
.reporttitle p:nth-child(3) {
   font-size: .85em;
}
.reporttitle p {
   text-align: center;
}
.reporttitle .outboundlinks {
   display: flex;
   flex-direction: column;
   row-gap: 16px;
}
.reporttitle .outboundlinks button {
   margin-left: 4px;
}
.reporttitle .campaigntitle {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   column-gap: 12px;
   justify-content: center;
}
.reporttitle .text {
   flex: 1 0 100%;
}
.reporttitle .campaigntitle .svg {
   font-size: .7em;
   display: block;
}
.reporttitle .campaigntitle svg {
   display: block;
}
@media( min-width: 768px ) {
   .reporttitle {
      display: flex;
      flex-wrap: wrap;
      column-gap: 32px;
      align-items: center;
   }
   .reporttitle h1 {
      flex: 0 0 100%;
      text-align: left;
   }
   .reporttitle .campaigntitle {
      justify-content: flex-start;
   }
   .reporttitle .text {
      flex: none;
   }
   .reporttitle .outboundlinks {
      flex-direction: row;
      column-gap: 16px;
   }
}

/* Report
 * */
.report {
   margin: 2em 0;
   display: grid;
   grid-template-columns: 1fr;
   gap: 16px;
}
.report > div {
   padding: 8px;
   background: white;
   border: 1px solid var(--color-faint-lines);
}
.report > div > iframe {
   display: block;
}
.report > div.text > div {
   border: 1px solid #d0d0d0;
   padding: 12px;
}
.report > div.disbursment > iframe {
   height: 4130px;
}
@media( min-width: 425px ) {
   .report > div.disbursment > iframe {
      height: 3600px;
   }
}
@media( min-width: 1024px ) {
   .report > div.disbursment > iframe {
      height: 3400px;
   }
}
@media( min-width: 768px ) {
   .report {
      grid-template-columns: 256px 1fr;
   }
   .report > div.balances {}
   .report > div.transactions) {}
   .report > div.text {
      grid-column: 1/3;
   }
   .report > div.disbursment {
      grid-column: 1/3;
   }
}
.report h2 {
   margin: 8px;
   font-weight: 500;
   font-size: 1.3em;
   text-transform: uppercase;
   line-height: 1;
}
.report h3 {
   font-size: 1.3em;
   font-weight: 300;
   margin: 16px 8px 8px;
   line-height: 1;
}
.report > div.text h2,
.report > div.text h3 {
   margin-left: 0;
   margin-right: 0;
}