/* Note this is a theme file -- Only color css allowed here! */
/*
 * Before using one these variables, check if a mixin could be used. If
 * the lightmode color and darkmode color in the design both match the colors
 * here, then we can use a mixin from _color_mixins.scss instead. May need to
 * build the mixin first, following the example of existing ones.
 *
 * (Darkmode colors not necessarily finalized, should check back later with the
 * figma to confirm them)
 */
.darkmode #PhotoVideos:focus {
  outline: none; }

#PhotoVideos .link,
#PhotoVideos .showMoreText {
  color: #0A5A83; }
  .darkmode #PhotoVideos .link, .darkmode
  #PhotoVideos .showMoreText {
    color: #68B5F0; }

#PhotoVideos .createdAt {
  color: #555555; }
  .darkmode #PhotoVideos .createdAt {
    color: #B3B3B3; }

#PhotoVideos .buttonBorder {
  border-color: #000000; }
  #PhotoVideos .buttonBorder.rgba {
    border-color: rgba(0, 0, 0, 0.35); }

#PhotoVideos .buttonBgColor {
  background-color: #488839; }
  #PhotoVideos .buttonBgColor.gradient {
    background: linear-gradient(#57A863 26.52%, #488839 75.14%); }
  #PhotoVideos .buttonBgColor.grey {
    background-color: #8B8B8B; }
    #PhotoVideos .buttonBgColor.grey.gradient {
      background: linear-gradient(#A9A9A9 29.7%, #8B8B8B 70.67%); }

#PhotoVideos .lockOverlayBg {
  background-color: #333333; }
  #PhotoVideos .lockOverlayBg.rgba {
    background-color: rgba(0, 0, 0, 0.7); }

#PhotoVideos .previewText {
  color: white; }

#PhotoVideos .errorMessage {
  color: #000000;
  background-color: #ffd0b8;
  border-color: #cccccc; }

#PhotoVideos .videoProcessing {
  color: red; }

#PhotoVideos .purchasedBadge {
  color: #ffffff;
  background-color: #0C6A93; }

#PhotoVideos .popoutIcon {
  background: url(../../scss/tsdefaultassets/popout.svg) no-repeat center; }
  .darkmode #PhotoVideos .popoutIcon {
    background: url(../../scss/tsdefaultassets/popout_darkmode.svg) no-repeat center; }

.darkmode #PhotoVideos #broadcaster_links a, .darkmode #PhotoVideos #staff_links a {
  color: #68B5F0; }

.vjs-cbcustom {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-tap-highlight-color: transparent; }
  .vjs-cbcustom .vjs-control {
    width: 2em;
    margin-left: 3px;
    margin-right: 3px;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none; }
    .vjs-cbcustom .vjs-control:hover:before, .vjs-cbcustom .vjs-control:focus, .vjs-cbcustom .vjs-control :focus:before {
      text-shadow: none;
      box-shadow: none; }
    .vjs-cbcustom .vjs-control.vjs-progress-control {
      position: absolute;
      top: -25%;
      left: 0px;
      height: 50%;
      width: 100%;
      margin: 0; }
      .vjs-cbcustom .vjs-control.vjs-progress-control .vjs-progress-holder {
        margin: 0; }
  .vjs-cbcustom .vjs-control-bar {
    height: 45px;
    padding-top: 3px;
    font-size: 14px;
    background-color: rgba(43, 51, 63, 0.7); }
    .vjs-cbcustom .vjs-control-bar button {
      background: none !important;
      color: #fff !important; }
    .vjs-cbcustom .vjs-control-bar span {
      background: none !important;
      color: #fff !important; }
  .vjs-cbcustom .vjs-duration, .vjs-cbcustom .vjs-time-divider, .vjs-cbcustom .vjs-current-time {
    display: inline-block; }
  .vjs-cbcustom .vjs-time-control {
    padding-left: 1px;
    padding-right: 1px;
    min-width: 0px;
    width: auto; }
  .vjs-cbcustom .vjs-fullscreen-control {
    position: absolute;
    right: 5px;
    height: 42px; }
  .vjs-cbcustom .vjs-progress-holder .vjs-play-progress {
    background-color: #F47321; }
  .vjs-cbcustom .vjs-slider-bar {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none; }
  .vjs-cbcustom .vjs-slider:focus {
    text-shadow: none;
    box-shadow: none; }
  .vjs-cbcustom .vjs-big-play-button {
    display: none; }