/* ファイルがありませんので、ローカルファイルエディターで作成されます。 */

img{
    background-image: url("loading.gif");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50px;
    pointer-events: none;
  
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-touch-callout:none;
    -moz-user-select:none;
    user-select:none;
    
}

.wide #theImage {
    width: 65%;
}

#theImage IMG {
    width: 100%;
    height: auto;
}

.thumbLegend {
    display: none;
}

#imageHeaderBar .imageNumber {
    float: right;
    margin-top: -10px;
}

.browsePath {
   display:none; 
}

body {
    background-color: black;
    color: white;
}

.titrePage {
    background-color: black;
    color: white;
}

.titrePage H2 A, #imageHeaderBar H2 {
    color: white;
    text-shadow: none;
}

h2 {
    color: white;
}

#copyright {
    color: #666;
    background-color: #000000;
}

#menubar {
    background-color: black;
    font-size: x-large;
}

.titrePage A, #calendarViewSwitchLink, .browsePath, #profile, #profile fieldset h3, #profile fieldset label, .properties fieldset span label {
    color: white;
}

A .pwg-icon {
    color: white;
}

.wide #imageToolBar {
    background-color: black;
}

.wide .imageInfoTable, .wide #imageInfos {
    background-color: black;
}

DIV.thumbHover {
    color: white;
    border: 1px solid #1e1e1e;
}

#imageInfos {
    background-color: #000000;
    color: white;
}

a {
    color: white;
}

a:hover {
    text-decoration: underline;
    color: white;
}

.content .navigationBar, SPAN.calItem, TD.calDayCellEmpty {
    color: white;
}


.thumbnails SPAN, .thumbnails .wrap2 A {
    width: auto !important;
}

@media screen and (max-width: 640px) {
    .albThumbs {
        padding-left: 5px;
        padding-right: 5px;
        box-sizing: border-box;
    }

    .albThumbs LI {
        display: block;
        position: relative;
        overflow: hidden;
        margin: 5px 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }

    .albImg {
        display: block;
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        width: 100%;
}
}


#qsearchInput {
    border: 1px solid #2f2f2f;
    color: white;
}

#menubar INPUT {
    box-shadow: none;
    border-radius: 5px;
    cursor: pointer;
}

.thumbnails .wrap2 IMG {
  /*max-width: none !important;*/
  max-height: none !important;
}

.content .navigationBar {
    font-size: x-large;
}

.thumbnails .wrap2 {
    margin: 0;
    display: table-cell;
    vertical-align: middle;
    border-radius: 4px;
    border: none;
}

.thumbnailCategory .description H3 {
    font-size: 150%;
}

form#rateForm {
    zoom: 2;
}

/*.video-js .vjs-tech {
    //width: 75% !important;
}*/


@media (max-width: 768px) {
    .video-container
 {
        max-width: 80vw !important;
        max-height: 80vh !important;
    }
}






/* EFFECT CONTROL */
.effectctrl-control-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 14px 16px;
  /*border: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)),
    linear-gradient(180deg, #181018, #0d0a0f);
  box-shadow:
    0 10px 28px rgba(0,0,0,0.32),
   inset 0 1px 0 rgba(255,255,255,0.06);*/
  flex-wrap: wrap;
  color: #f7eaf2;
  font-family: "MS PGothic", "Yu Gothic UI", "Yu Gothic", sans-serif;
}

.effectctrl-control-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.effectctrl-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #ff78cb;
  box-shadow:
    0 0 8px rgba(255,120,203,0.9),
    0 0 18px rgba(255,120,203,0.30);
  flex: 0 0 auto;
}

.effectctrl-control-title {
  font-size: 13px;
  letter-spacing: 0.12em;
  color: rgba(247,234,242,0.72);
  white-space: nowrap;
}

.effectctrl-vhs-panel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, #2b1a25, #130d13);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 28px rgba(0,0,0,0.48);
}

.effectctrl-vhs-label {
  padding-left: 10px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(247,234,242,0.72);
  white-space: nowrap;
  user-select: none;
}

.effectctrl-vhs-buttons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.effectctrl-vhs-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 10px 16px;
  min-width: 64px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(247,234,242,0.78);
  background: transparent;
  transition:
    transform 0.15s ease,
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.effectctrl-vhs-btn:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}

.effectctrl-vhs-btn:active {
  transform: translateY(1px);
}

.effectctrl-vhs-btn.effectctrl-active {
  color: #2a0f1f;
  background:
    linear-gradient(180deg, #ffd2ec 0%, #ff9ed8 48%, #ff7fca 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.38),
    0 2px 8px rgba(255,120,203,0.26);
}

@media (max-width: 700px) {
  .effectctrl-control-bar {
    align-items: stretch;
  }

  .effectctrl-vhs-panel {
    width: 100%;
    justify-content: space-between;
  }

  .effectctrl-vhs-buttons {
    flex: 1;
    justify-content: stretch;
  }

  .effectctrl-vhs-btn {
    flex: 1;
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
  }
}