/******************************************************************************
Note that a twitch-display-*.css file must be loaded before this file in order to provide the variables used below.
******************************************************************************/
:root {
  --thumbnail-width: 320px;
  --thumbnail-height: 180px;
}

::selection {
  background: var(--site-color-highlight);
}

body {
  background: var(--background);
  color: var(--text-normal);
}

h2, .h2 {
  background-color: var(--site-color-h2);
  color: var(--text-bright);
  padding: 0.2em 1ex;
}

h3, .h3 {
  background-color: var(--site-color-h3);
  color: var(--text-bright);
  padding: 0.2em 1ex;
}

h5, .h5 {
  color: var(--text-bright);
}

nav .logo {
  height: 40px;
  width: 40px;
}

img.site-preview {
  border: 1px solid var(--site-color-border);
  box-sizing: border-box;
  margin: 1em;
  width: calc(100% - 2em);
}

.btn-twitch {
  color: var(--text-alt);
  background-color: var(--site-color-btn);
  border-color: var(--site-color-border);
}

.btn-twitch:hover {
  color: var(--text-alt);
  background-color: var(--site-color-btn2);
  border-color: var(--site-color-border2);
}

.btn-outline-twitch {
  color: var(--site-color-text);
  background-color: var(--site-color-bg);
  border-color: var(--site-color-text);
}

.btn-outline-twitch:hover {
  color: var(--text-bright);
  background-color: var(--site-color-bg2);
  border-color: var(--text-bright);
}

.twitch .btn-twitch {
  color: var(--text-alt);
  background-color: var(--twitch-color-btn);
  border-color: var(--twitch-color-border);
}

.twitch .btn-twitch:hover {
  color: var(--text-alt);
  background-color: var(--twitch-color-btn2);
  border-color: var(--twitch-color-border2);
}

.twitch .btn-outline-twitch {
  color: var(--twitch-color-text);
  background-color: var(--twitch-color-bg);
  border-color: var(--twitch-color-text);
}

.twitch .btn-outline-twitch:hover {
  color: var(--text-bright);
  background-color: var(--twitch-color-bg2);
  border-color: var(--text-bright);
}

.youtube .btn-twitch {
  color: var(--text-alt);
  background-color: var(--youtube-color-btn);
  border-color: var(--youtube-color-border);
}

.youtube .btn-twitch:hover {
  color: var(--text-alt);
  background-color: var(--youtube-color-btn2);
  border-color: var(--youtube-color-border2);
}

.youtube .btn-outline-twitch {
  color: var(--youtube-color-text);
  background-color: var(--youtube-color-bg);
  border-color: var(--youtube-color-text);
}

.youtube .btn-outline-twitch:hover {
  color: var(--text-bright);
  background-color: var(--youtube-color-bg2);
  border-color: var(--text-bright);
}

a {
  color: var(--site-color-text);
  text-decoration: none;
}

a:hover {
  color: var(--text-bright);
  text-decoration: underline;
}

.channel-link {
  color: var(--text-normal);
  text-decoration: none;
}

.channel-link:hover {
  color: var(--site-color-text);
  text-decoration: none;
}

.stream-overlay {
  display: none;
  overflow: visible;
  position: absolute;
    left: 50%;
    top: 0px;
  transform: translate(-50%, -50%);
}

*:hover>.stream-overlay {
  display: block;
}

pre {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(100, 100, 100, 0.5);
  border-radius: 1ex;
  color: var(--text-normal);
  padding: 0.5em;
}

input[type=checkbox],
input[type=radio] {
  appearance: none;
  background: rgba(0, 0, 0, 0.2);
  display: inline-block;
  width: 1em;
  height: 1em;
  cursor: pointer;
  position: relative;
  border: 1px solid var(--site-color-border);
  box-sizing: content-box;
  vertical-align: sub;
}

input[type=checkbox] {
  border-radius: 0.25em;
}

input[type=radio] {
  border-radius: 0.5em;
}

input[type=checkbox]:checked,
input[type=radio]:checked {
  background: var(--site-color-bg2);
  border: 1px solid var(--site-color-border2);
}

input[type=checkbox]:checked:after,
input[type=radio]:checked:after {
  color: var(--site-color-text);
  position: absolute;
}

input[type=checkbox]:checked:after {
  content: '\2713';
  font-weight: 900;
  top: -0.48em;
  left: -0.1em;
  font-size: 1.5em;
}

input[type=radio]:checked:after {
  content: '\272f';
  top: -0.55em;
  left: -0.1em;
  font-size: 1.6em;
}

/******************************************************************************
Bootstrap4 Overrides
******************************************************************************/
#MeLeeCMS nav .navbar-brand {
  color: var(--text-bright);
}

#MeLeeCMS nav.bg-dark {
  background: var(--site-color-h1)!important;
}

#MeLeeCMS .navbar-dark .nav-item .nav-link {
  color: var(--text-dim);
}

#MeLeeCMS .navbar-dark .nav-item.active .nav-link,
#MeLeeCMS .navbar-dark .nav-item.active .nav-link:hover {
  color: var(--text-bright);
}

#MeLeeCMS .navbar-dark .nav-item .nav-link:hover {
  color: var(--text-normal);
}

#MeLeeCMS .navbar-toggler {
  border-color: var(--text-bright);
}

#MeLeeCMS .navbar-toggler-icon {
  color: var(--text-bright);
  font-size: 2rem;
  height: initial;
  width: initial;
}

#MeLeeCMS .bootstrap-select .dropdown-toggle {
  background-color: var(--site-color-bg);
  border-color: var(--site-color-border);
  color: var(--text-bright);
}

#MeLeeCMS .bootstrap-select .dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem var(--site-color-bg2);
  outline: none!important;
}

#MeLeeCMS .dropdown-menu {
  background-color: var(--background);
  border-color: var(--site-color-border);
}

#MeLeeCMS .dropdown-item {
  color: var(--text-normal);
}

#MeLeeCMS .dropdown-item:hover {
  background-color: var(--site-color-bg);
  color: var(--text-bright);
}

#MeLeeCMS .dropdown-item.active,
#MeLeeCMS .dropdown-item:active,
#MeLeeCMS .dropdown-item:focus {
  background-color: var(--site-color-bg2);
  color: var(--text-bright);
}

#MeLeeCMS .form-control {
  background-color: var(--site-color-bg);
  border-color: var(--site-color-border);
  color: var(--text-bright);
}

#MeLeeCMS .form-control:focus {
  box-shadow: 0 0 0 0.2rem var(--site-color-bg2);
}

#MeLeeCMS .table {
  color: var(--text-normal);
}

#MeLeeCMS .table thead th
{
  color: var(--text-bright);
}

#MeLeeCMS .table-hover tbody tr:hover {
  color: var(--text-bright);
  /*background-color: var(--site-color-bg);*/
}

/*#MeLeeCMS .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--site-color-bg2);
}

#MeLeeCMS .table-striped tbody tr:nth-of-type(even) {
  background-color: var(--site-color-bg2);
}*/

#MeLeeCMS .modal-content {
  background-color: var(--background);
  border-color: var(--site-color-border);
}

#MeLeeCMS .modal-header {
  background-color: var(--site-color-bg2);
  border-color: var(--site-color-border2);
  color: var(--text-bright);
}

#MeLeeCMS .close {
  color: var(--site-color-text);
}

#MeLeeCMS .modal-body {
  /*background-color: var(--background);*/
}

#MeLeeCMS .modal-footer {
  background-color: var(--site-color-bg);
  border-color: var(--site-color-border2);
}

#MeLeeCMS .text-muted {
  color: var(--text-dim)!important;
}

/******************************************************************************
Panels for streams and VODs
******************************************************************************/
.twitch .twitch-panel {
  background: var(--twitch-color-bg);
  border: 1px solid var(--twitch-color-border);
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  box-sizing: border-box;
  line-height: 1em;
  overflow: hidden;
  position: relative;
  width: calc(var(--thumbnail-width) + 2px);
  --logo-size: 50px;
  --logo-margin-x: 0.2em;
  --logo-margin-y: 0.4em;
}

.twitch .twitch-panel.favorite {
  background: var(--twitch-color-bg2);
  border-color: var(--twitch-color-border2);
  box-shadow: 0px 0px 0.5rem 0.25rem var(--twitch-color-shadow);
  /*filter: saturate(1.3) brightness(1.1);*/
}

.youtube .twitch-panel {
  background: var(--youtube-color-bg);
  border: 1px solid var(--youtube-color-border);
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  box-sizing: border-box;
  line-height: 1em;
  overflow: hidden;
  position: relative;
  width: calc(var(--thumbnail-width) + 2px);
  --logo-size: 50px;
  --logo-margin-x: 0.2em;
  --logo-margin-y: 0.4em;
}

.youtube .twitch-panel.favorite {
  background: var(--youtube-color-bg2);
  border-color: var(--youtube-color-border2);
  box-shadow: 0px 0px 0.5rem 0.25rem var(--youtube-color-shadow);
  /*filter: saturate(1.3) brightness(1.1);*/
}

.twitch-panel .twitch-thumbnail {
  box-sizing: border-box;
  display: block;
  height: var(--thumbnail-height);
  width: var(--thumbnail-width);
}

.twitch-panel .stream-overlay {
  top: calc(var(--thumbnail-height) / 2 + 1px);
}

.twitch-panel .stream-overlay * {
  display: block;
  margin: 1ex auto;
}

.twitch-panel .stream-viewers,
.twitch-panel .stream-duration {
  background: rgba(0,0,0,0.5);
  border-radius: 3px;
  box-sizing: border-box;
  color: rgba(222,222,222,1);
  display: inline-block;
  padding: 1px 3px;
  position: absolute;
}

.twitch-panel .stream-viewers {
  left: 5px;
  top: 5px;
}

.twitch-panel .stream-duration {
  right: 5px;
  top: 5px;
}

.twitch-panel .stream-viewers i {
  margin-right: 1ex;
}

.twitch-panel .stream-logo {
  border-radius: calc(var(--logo-size) / 2);
  box-sizing: border-box;
  display: inline-block;
  float: left;
  margin: var(--logo-margin-y) var(--logo-margin-x);
  height: var(--logo-size);
  width: var(--logo-size);
}

.twitch-panel .stream-info {
  box-sizing: border-box;
  display: inline-block;
  width: calc(var(--thumbnail-width) - var(--logo-size) - var(--logo-margin-x) * 2);
}

.twitch-panel .stream-title,
.twitch-panel .stream-name,
.twitch-panel .stream-game {
  display: block;
  overflow: hidden;
  white-space: pre;
}

.twitch-panel .stream-title {
  color: var(--text-bright);
  font-weight: bold;
  height: calc((var(--logo-size) + var(--logo-margin-y) * 2) * 0.30);
  margin-top: calc((var(--logo-size) + var(--logo-margin-y) * 2) * 0.05);
}

.twitch-panel .stream-name {
  color: var(--text-bright);
  height: calc((var(--logo-size) + var(--logo-margin-y) * 2) * 0.30);
}

.twitch-panel .stream-game {
  color: var(--text-normal);
  height: calc((var(--logo-size) + var(--logo-margin-y) * 2) * 0.30);
}

.twitch-panel .channel-link * {
  color: var(--text-bright);
  text-decoration: none;
}

.twitch .twitch-panel .channel-link:hover * {
  color: var(--twitch-color-text);
  text-decoration: none;
}

.youtube .twitch-panel .channel-link:hover * {
  color: var(--youtube-color-text);
  text-decoration: none;
}

/******************************************************************************
Category boxes
******************************************************************************/
.toggle-hidden-container {
  box-sizing: border-box;
  text-align: center;
  height: 100%;
  width: calc(var(--thumbnail-width) + 2px);
}

.cat-mini .card {
  background: none;
  border: 1px solid var(--site-color-border);
  box-sizing: border-box;
  width: calc(var(--thumbnail-width) + 2px);
  --logo-size: 40px;
}

.cat-mini.favorite .card {
  border: 1px solid var(--site-color-border2);
  box-shadow: 0px 0px 0.5rem 0.25rem var(--site-color-shadow);
  /*filter: saturate(1.3) brightness(1.1);*/
}

.cat-mini.hidden .card {
  filter: saturate(0.5) brightness(0.8);
}

.cat-mini .card-header {
  background: var(--site-color-bg2);
  color: var(--text-bright);
}

.cat-mini .card-body {
  background: var(--site-color-bg);
  color: var(--text-normal);
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  padding: 0px;
}

.expand-category {
  cursor: pointer;
}

.category-header .expand,
.category-header .order {
  display: none;
  cursor: pointer;
}

.category-header .expand {
  margin-left: 1ex;
}

.category-header .order {
  float: right;
}

.category-header:hover .expand,
.category-header:hover .order {
  display: inline-block;
}

.category-header .expand:hover,
.category-header .order:hover {
  color: var(--site-color-text);
}

.twitch-stream-mini {
  box-sizing: border-box;
  line-height: 1.2em;
  position: relative;
  border-top: 1px solid var(--site-color-border);
}

.twitch-stream-mini .stream-overlay {
  top: 50%;
}

.twitch-stream-mini .stream-overlay>* {
  display: inline-block;
  margin: auto 1ex;
}

.stream-logo-mini,
.stream-mini-col1,
.stream-mini-col2 {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
}

.stream-logo-mini img {
  border-radius: calc(var(--logo-size) / 2);
  margin: 0.2em;
  height: calc(var(--logo-size));
  width: calc(var(--logo-size));
}

.stream-mini-col1 {
  overflow: hidden;
  white-space: pre;
  width: calc(var(--thumbnail-width) / 2 - 1px - var(--logo-size) - 0.4em);
}

.stream-mini-col2 {
  overflow: hidden;
  white-space: pre;
  width: calc(var(--thumbnail-width) / 2 - 1px);
}

.stream-name-mini {
  color: var(--text-bright);
}

.stream-viewers-mini i,
.stream-duration-mini i {
  margin-right: 0.5ex;
}

.show-hidden {
  color: var(--text-bright);
  cursor: pointer;
  display: inline-block;
}

.show-hidden:hover {
  color: var(--site-color-text);
}

/******************************************************************************
Channel links for offline streams
******************************************************************************/
.twitch .twitch-channel {
  background: var(--twitch-color-bg);
  border: 1px solid var(--twitch-color-border);
  border-radius: 0.5ex;
  box-sizing: border-box;
  display: block;
  font-size: 1.5em;
  width: calc(var(--thumbnail-width) + 2px);
  --logo-size: 50px;
}

.twitch .twitch-channel:hover {
  background: var(--twitch-color-bg2);
  border: 1px solid var(--twitch-color-border2);
  color: var(--text-bright);
}

.youtube .twitch-channel {
  background: var(--youtube-color-bg);
  border: 1px solid var(--youtube-color-border);
  border-radius: 0.5ex;
  box-sizing: border-box;
  display: block;
  font-size: 1.5em;
  width: calc(var(--thumbnail-width) + 2px);
  --logo-size: 50px;
}

.youtube .twitch-channel:hover {
  background: var(--youtube-color-bg2);
  border: 1px solid var(--youtube-color-border2);
  color: var(--text-bright);
}

.twitch-channel img {
  border-radius: calc(var(--logo-size) / 2);
  box-sizing: border-box;
  display: inline-block;
  margin: 5px;
  height: var(--logo-size);
  width: var(--logo-size);
}

/******************************************************************************
Categorize modal
******************************************************************************/
#MeLeeCMS input[type='radio'] {
  margin-right: 1ex;
}

/******************************************************************************
VODs page
******************************************************************************/
.title-image {
  border-radius: 0.8em;
  box-sizing: border-box;
  height: 1.6em;
  width: 1.6em;
  margin-right: 1ex;
}

.title-subtext {
  font-weight: normal;
  font-size: 0.5em;
  margin-left: 5ex;
}

/******************************************************************************
Preferences page
******************************************************************************/
.prefs-category-header {
  color: var(--text-bright);
  cursor: pointer;
}

.prefs-category-header:hover .category-title {
  color: var(--site-color-text);
}

.category-type {
  cursor: pointer;
  margin-right: 1ex;
}

.category-sort-up, .category-sort-down {
  cursor: pointer;
  margin-left: 1ex;
}

.category-sort-up:hover, .category-sort-down:hover {
  color: var(--site-color-text);
}

.type-category
{
  margin: 0.2em;
}