.ob-stream-widget
{
  margin: 0 auto;
}

.ob-stream-widget-player
{
  background-color: #000;
  min-height: 268px;
  width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}

.ob-stream-widget-player img
{
  max-height: 268px;
  display: block;
  margin: 0 auto;
}

.ob-stream-widget-filters
{
  display: flex;
  justify-content: flex-end;
  margin-top: 5px;
}

.ob-stream-widget-filter-genre,
.ob-stream-widget-filter-name
{
  display: none;
}

.ob-stream-widget[data-name-filter] .ob-stream-widget-filter-name
{
  display: block;
  padding: 5px;
}

.ob-stream-widget[data-genre-filter] .ob-stream-widget-filter-genre
{
  display: block;
}

.ob-stream-widget-items:empty::after,
.ob-stream-widget-items.empty::after
{
  content: 'No items found.';
}

.ob-stream-widget-item
{
  display: flex;
  background-color: #eee;
}

.ob-stream-widget-item span
{
  padding: 5px;
  box-sizing: border-box;
}

.ob-stream-widget-item:nth-child(even)
{
  background-color: #ddd;
}

.ob-stream-widget-item-name
{
  flex: 0 0 35%;
}

.ob-stream-widget-item-thumb
{
  flex: 1 0 35%;
}

.ob-stream-widget-item-thumb img
{
  width: 150px;
  height: auto;
  max-width: 100%;
  cursor: pointer;
}

.ob-stream-widget-item-play,
.ob-stream-widget-item-download,
.ob-stream-widget-item-metadata
{
  flex: 0 1 5%;
  color: #00a;
  text-decoration: underline;
  cursor: pointer;
}

/* hide links */
.ob-stream-widget[data-hide-download] .ob-stream-widget-item-download,
.ob-stream-widget[data-hide-play] .ob-stream-widget-item-play
{
  display: none;
}

/* grid view */
.ob-stream-widget[data-grid] .ob-stream-widget-items
{
  display: flex;
  flex-wrap: wrap;
}

.ob-stream-widget[data-grid] .ob-stream-widget-item
{
  flex-direction: column;
  text-align: center;
  flex: 0 0 20%;
  padding-bottom: 5px;
}

.ob-stream-widget[data-grid] .ob-stream-widget-item > *
{
  flex: 0 1 auto;
}

.ob-stream-widget[data-grid] .ob-stream-widget-item-thumb
{
  order: -1;
  flex: 0 0 125px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ob-stream-widget[data-grid] .ob-stream-widget-item-thumb img
{
  max-height: 115px;
  width: auto;
}

/* metadata modal */
.ob-stream-widget-metadata
{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(0,0,0,0.7);
}

.ob-stream-widget-metadata-inside
{
  background-color: #fff;
  border: 1px solid #333;
  padding: 40px 10px 25px 10px;
  position: relative;
  width: 450px;
  max-width: 97.5%;
  box-sizing: border-box;
}

.ob-stream-widget-metadata-close
{
  position: absolute;
  top: 0;
  right: 0;
  color: #000;
  text-transform: uppercase;
  font-size: 14px;
  padding: 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.66;
}

.ob-stream-widget-metadata-close:hover
{
  opacity: 1;
}

.ob-stream-widget-metadata-close img
{
  width: 11px;
  height: auto;
  margin-left: 5px;
  position: relative;
}

.ob-stream-widget-metadata-item
{
  display: flex;
}

.ob-stream-widget-metadata-item > div
{
  flex: 0 0 150px;
  box-sizing: border-box;
  padding: 5px;
}

.ob-stream-widget-metadata-item > div:first-child
{
  font-weight: bold;
  text-align: right;
}

.ob-stream-widget-metadata-item > div:first-child::after
{
  content: ':';
}

/* modal player */
.ob-stream-widget[data-modal-player] .ob-stream-widget-player
{
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  align-items: center;
  justify-content: center;
  padding: 35px 50px;
  box-sizing: border-box;
}

.ob-stream-widget[data-modal-player] .ob-stream-widget-player img,
.ob-stream-widget[data-modal-player] .ob-stream-widget-player video-js
{
  max-height: 100%;
  max-width: 100%;
}

.ob-stream-widget-modal
{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  color: #fff;
}

.ob-stream-widget-modal-left,
.ob-stream-widget-modal-right,
.ob-stream-widget-modal-close
{
  position: fixed;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
}

.ob-stream-widget-modal-left:hover,
.ob-stream-widget-modal-right:hover,
.ob-stream-widget-modal-close:hover
{
  opacity: 1;
}

.ob-stream-widget-modal-left img,
.ob-stream-widget-modal-right img
{
  width: 20px;
  height: auto;
}

.ob-stream-widget-modal-close img
{
  width: 15px;
  height: auto;
  margin-right: 7px;
}

.ob-stream-widget-modal-left
{
  left: 0;
  top: 0;
  width: 45px;
  height: 100%;
}

.ob-stream-widget-modal-right
{
  right: 0;
  top: 0;
  width: 45px;
  height: 100%;
}

.ob-stream-widget-modal-close
{
  left: 0;
  bottom: 0;
  width: 100%;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  text-transform: uppercase;
}

/* single media item */
.ob-stream-widget[data-media] .ob-stream-widget-items
{
  display: none;
}

.ob-stream-widget[data-media] .ob-stream-widget-player:empty
{
  display: flex;
  align-items: center;
  cursor: pointer;
}

.ob-stream-widget[data-media] .ob-stream-widget-player:empty::after
{
  content: '▶ Play';
  color: #fff;
  display: block;
  text-align: center;
  width: 100%;
  font-size: 18px;
} 

/* load more */
.ob-stream-widget-more
{
  text-align: center;
  padding: 25px;
  display: none;
}