/* Thème principal */

body {
  --mainBackgroundColor: #1b1817;
  --mainForegroundColor: #e0e0e1;

  --mainBackgroundHoverColor: #30343b;

  /* Compat with PeerTube < 3.2 */
  --submenuColor: rgb(32, 32, 32);

  --submenuBackgroundColor: rgb(32, 32, 32);

  --inputForegroundColor: #000000;
  --inputBackgroundColor: #FFFFFF;
  --inputPlaceholderColor: #0f0f0f;

  --textareaForegroundColor: #000000;
  --textareaBackgroundColor: #FFFFFF;
  --markdownTextareaBackgroundColor: #30363d;

  --greyForegroundColor: #bbb;
  --greyBackgroundColor: #232830;
  --greySecondaryBackgroundColor: #30343b;

  --actionButtonColor: #bbb;
  --activatedActionButtonColor: #fff;

  --channelBackgroundColor: rgb(32, 32, 32);
  --mainColorVeryLight: #292121;
  --bs-modal-border-radius: 12px;

  --DarkEvolutionOrange:#f2690d;
  --DarkEvolutionLinksHover:#eb8947;

  font-family: "Roboto", "Source Sans Pro", sans-serif;
}

::-webkit-scrollbar-track {
  border-radius: 10px !important;
}
 
::-webkit-scrollbar-thumb {
  border-radius: 10px !important;
}

* {
  scrollbar-width: thin !important;
}

.icon-logo {
  min-width: 29px;
  min-height: 29px;
  background-color: #fff;
  background-origin: content-box;
  border-radius: 20px;
  padding: 3px 4px 3px 8px;
}

.dropdown-menu,
.dropdown-divider {
  border-color: var(--inputBorderColor);
}

.dropdown-header {
  color: var(--mainForegroundColor);
}

.accordion-button {
  background-color: #292121;
}

.custom-links {
  text-align: center;
  color: white;
  font-size: 16px;
}

.dropdown-menu {
  border-radius: 12px !important;
  -moz-border-radius:12px !important;
  -webkit-border-radius:12px !important;
}

.broadcast-message {
z-index: 3;
}




/* Header */
.root-header {
  background-color: #111111 !important;
}

.publish-button {
  border-radius: 24px !important;
  -moz-border-radius:24px !important;
  -webkit-border-radius:24px !important;
  height: 32px !important;
  line-height: 32px !important;
  margin-top: 1px;
}

.publish-button-label {
  padding-left: 5px;
}

#search-video {
  border-radius: 12px !important;
  -moz-border-radius:12px !important;
  -webkit-border-radius:12px !important;
  height:35px !important;
  max-width: 600px !important;
}

@media screen and (max-width: 500px) {
#typeahead-container {
  width: 95%;
  margin-right:20px !important;
}
}

#typeahead-instructions {
  border-radius: 12px !important;
  -moz-border-radius:12px !important;
  -webkit-border-radius:12px !important;
  margin-top: 5px !important;
  font-size: 14px !important;
  background-color: #202020 !important;
}

#typeahead-container {
  font-size: 16px !important;
}

.icon.icon-search svg {
  color:#f2690d;
}

.sub-header-container {
  background-color: #1b1817 !important;
}



/* Menu de gauche */

a[href="/my-library"] {
  display: none !important;
}

menu {
  background-color: #111 !important;
}

.menu-link {
width: 90%;
margin: auto;
padding-inline-end: 0px !important;
padding-inline-start: 18px !important;
}

.logged-in-block {
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
  background-color:#202020 !important;
}

.logged-in-block a {
  margin-left: 0px !important;
}

.menu-wrapper a {
  border-radius: 12px !important;
  -moz-border-radius:12px !important;
  -webkit-border-radius:12px !important;
}

.notifications a {
  color: var(--DarkEvolutionOrange) !important;
}

.notifications a:hover {
  color: var(--DarkEvolutionLinksHover) !important;
}




/* Vignettes des vidéos */
.video-thumbnail {
  background-color:#ececec00 !important;
}

@media only screen and (min-width:500px) {
.video-thumbnail {
  border-radius: 12px !important;
  -moz-border-radius:12px !important;
  -webkit-border-radius:12px !important;
}
}

.miniature-thumbnail {
  background-color:#ececec00 !important;
}

.video-miniature-information a {
  color:#FFFFFF;
}

.video-miniature-information a:hover {
  color:#FFFFFF;
}

.video-miniature-channel.ng-star-inserted:hover {
  color:#bbb !important;
}

.videos {
  column-gap: 14px !important;
}


@media only screen and (min-width:500px) {

.miniature-thumbnail {
  border-radius: 12px !important;
  -moz-border-radius:12px !important;
  -webkit-border-radius:12px !important;
}

.root .videos, .root .playlists, .videos {
  --miniatureMinWidth: 280px !important;
  --miniatureMaxWidth: 360px !important;
}
}




/* Affichage d'une chaîne */
.owner-block {
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
}

.channel-buttons a {
  border-radius: 24px !important;
}

.peertube-button {
  border-radius: 24px !important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.peertube-button-link {
  border-radius: 24px !important;
}

.peertube-button span {
  text-align:center;
  padding-left: 10px;
}

.view-account {
  border-radius: 24px !important;
  height:34px !important;
}

.description-html a {
  color: var(--DarkEvolutionOrange) !important;
}

.description-html a:hover {
  color: var(--DarkEvolutionLinksHover) !important;
}


.avatar.channel {
  border-radius: 12px !important;
}

.channel {
  border-radius: 12px !important;
  -moz-border-radius:12px !important;
  -webkit-border-radius:12px !important;
}

.ng-select-container {
  border-radius: 12px !important;
  -moz-border-radius: 12px !important;
  -webkit-border-radius: 12px !important;
}

.ng-dropdown-panel {
  border-radius: 12px !important;
  -moz-border-radius: 12px !important;
  -webkit-border-radius: 12px !important;
  margin-top:5px !important;
}

.ng-dropdown-panel-items.scroll-host {
  max-height:300px !important;
}


.ng-dropdown-panel-items {
  border-radius: 12px !important;
  -moz-border-radius: 12px !important;
  -webkit-border-radius: 12px !important;
}

.modal-content {
  -moz-border-radius:12px !important;
  -webkit-border-radius:12px !important;
}




/* Affichage d'une vidéo */

#video-wrapper {
  background-color: transparent !important;
}

#videojs-wrapper {
  background-color: transparent;
}

@media screen and (max-width: 450px){
  #video-wrapper {
    position: sticky;
    top: 20px;
    z-index:1;
  }
}

.peertube-plugin-livechat-button {
  border-radius: 3px !important;
  -moz-border-radius: 3px !important;
  -webkit-border-radius: 3px !important;
}

.avatar-and-textarea {
  font-size:16px !important;
}

.action-button.action-button-like.activated {
  color: var(--DarkEvolutionOrange) !important;
}

.action-button.action-button-dislike.activated {
  color: #C70039 !important;
}

.title-page-autoplay {
  padding-bottom:20px;
}

@media only screen and (min-width:1100px) {
.video-info {
  margin-right:20px !important;
}
}

.video-info-description {
  margin-inline-start:0px !important;
}

my-timestamp-input input {
  color: #FFFFFF !important;
}

.btn.btn-outline-secondary.text-uppercase {
  border-radius: 12px !important;
  -moz-border-radius: 12px !important;
  -webkit-border-radius: 12px !important;
}

.form-control.ng-untouched.ng-pristine.ng-valid {
  border-radius: 12px !important;
  -moz-border-radius: 12px !important;
  -webkit-border-radius: 12px !important;
  margin-right: 10px;
}

.form-control.ng-pristine.ng-valid.ng-touched {
  border-radius: 12px !important;
  -moz-border-radius: 12px !important;
  -webkit-border-radius: 12px !important;
  margin-right: 10px;
}

.qrcode canvas {
  border-radius: 12px !important;
  -moz-border-radius: 12px !important;
  -webkit-border-radius: 12px !important;
}

.video-info-channel-left.d-flex .avatar {
  border-radius: 6px !important;
  -moz-border-radius: 6px !important;
  -webkit-border-radius: 6px !important;
}

.video-info-description-html {
  border-radius: 12px !important;
  -moz-border-radius: 12px !important;
  -webkit-border-radius: 12px !important;
  background-color:#202020;
  padding: 20px 20px 5px 20px;
  margin-bottom:10px;
}

.video-info-description-html a {
  color: var(--DarkEvolutionOrange);
}

.video-info-description-html a:hover {
  color: var(--DarkEvolutionLinksHover);
}

.action-button.action-button-support.ng-star-inserted {
  border-radius: 25px !important;
  -moz-border-radius: 25px !important;
  -webkit-border-radius: 25px !important;
  background-color:#202020 !important;
  line-height:35px !important;
  height:35px !important;
  padding-left:20px;
  padding-right:20px;
}

.action-button.action-button-support.ng-star-inserted:hover {
  background-color:#414040 !important;
}

.video-actions.action-button {
  border-radius: 25px !important;
  -moz-border-radius: 25px !important;
  -webkit-border-radius: 25px !important;
  background-color:#202020 !important;
  line-height:35px !important;
  height:35px !important;
  padding-left:20px;
  padding-right:20px;
}

.video-actions.action-button:hover {
  background-color:#414040 !important;
}

my-video-add-to-playlist {
  max-width: 300px;
  overflow: hidden;
  display: block;
}

.playlist.dropdown-item.ng-star-inserted {
   border-bottom-left-radius: 0px !important;
  -webkit-border-bottom-left-radius: 0px !important;
  -moz-border-bottom-left-radius: 0px !important;
}

.btn-group-subscribe {
  border-radius: 12px !important;
  -moz-border-radius: 12px !important;
  -webkit-border-radius: 12px !important;
  padding-inline-start: 10px !important;
  padding: 0 0 !important;
}

.dropdown-toggle.btn.dropdown-toggle-split.last-in-group {
  background-color: transparent !important;
  border: 0px !important;
  padding-left:10px !important;
  padding-inline-start: 15px;
}

.modal-body a {
  color: var(--DarkEvolutionOrange) !important;
}

.modal-body a:hover {
  color: var(--DarkEvolutionLinksHover) !important;
}

my-video-attributes {
  padding-bottom:10px;
  margin-inline-start: 0px !important;
}

h1.video-info-name {
  position: relative;
}

.attribute.attribute-privacy {
  display: none !important;
  position: absolute;
  visibility:hidden;
}

.attribute.attribute-category {
  display: none important;
  position: absolute;
  visibility:hidden;
}

.attribute.attribute-language {
  display: none important;
  position: absolute;
  visibility:hidden;
}

.attribute.attribute-duration {
  display: none important;
  position: absolute;
  visibility:hidden;
}

.other-videos:not(.display-as-row) my-video-miniature {
  max-width: 300px !important;
}

my-recommended-videos .avatar.channel {
  border-radius: 6px !important;
  -moz-border-radius: 6px !important;
  -webkit-border-radius: 6px !important;
}




/* Personnalisation du lecteur vidéo */
.vjs-play-progress.vjs-slider-bar::before {
  color: var(--mainColor);
}
.video-js.vjs-peertube-skin .vjs-control-bar .vjs-progress-control .vjs-slider .vjs-play-progress {
  background: var(--greyForegroundColor);
}
.vjs-settings-dialog.vjs-modal-overlay {
  border-radius: 12px;
}
.vjs-time-tooltip {
  border-radius: 12px !important;
  padding: 9px 12px !important;
  background: #00000090 !important;
}

/* Bouton "full-screen" */


/* Effet de brillance en fond */
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
  }
  70% {
    transform: scale(1.00);
  }
  100% {
    transform: scale(0.95);
  }
}

.vjs-paused .vjs-poster {
  filter: blur(0);
  animation: none;
  z-index:2;
}

.vjs-paused video {
 z-index:2 !important;
 cursor: pointer;
}

.vjs-big-play-button {
  z-index: 3;
  cursor: pointer;
  }

.vjs-has-started .vjs-poster {
  animation-name: fadeIn, pulse !important;
  animation-duration: 4s, 8s;
  animation-timing-function: linear, linear;
  animation-iteration-count: 1, infinite;
  filter: blur(100px) !important;
  display: block !important;
  z-index:0 !important;
}

.vjs-has-started video {
 z-index:3 !important;
 cursor: pointer;
}

.vjs-mobile-buttons-overlay {
  z-index: 4;
  cursor: pointer;
  }

#videojs-wrapper  {
  background-color: transparent !important;
}

.video-js {
  background-color: transparent !important;
}

#peertube-plugin-livechat-container > iframe {
  border-bottom-left-radius: 12px !important;
  border-top-left-radius: 12px !important;
  z-index: 3;
}

@media screen and (min-width: 500px){

#videojs-wrapper video, .vjs-poster, .vjs-control-bar {
  border-bottom-right-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
  -webkit-border-bottom-right-radius: 12px !important;
  -webkit-border-bottom-left-radius: 12px !important;
  -moz-border-bottom-right-radius: 12px !important;
  -moz-border-bottom-left-radius: 12px !important;
}

.playlist.ng-star-inserted {
  border-bottom-left-radius: 12px !important;
  -webkit-border-bottom-left-radius: 12px !important;
  -moz-border-bottom-left-radius: 12px !important;
}

}




/* Espace commentaires */
.root-comment {
  border-radius: 12px !important;
  -moz-border-radius: 12px !important;
  -webkit-border-radius: 12px !important;
  background-color:#202020;
  padding: 20px 20px 0px 20px;
  margin-bottom:10px;
}

.textarea-wrapper textarea {
  border-radius: 12px !important;
  -moz-border-radius: 12px !important;
  -webkit-border-radius: 12px !important;
}

.comment-html a {
  color: var(--DarkEvolutionOrange) !important;
}

.comment-html a:hover {
  color: var(--DarkEvolutionLinksHover) !important;
}

.comment-html.ng-star-inserted {
  padding-right: 10px !important;
}

.comment .comment-html {
  margin-left : -44px !important;
  margin-top:10px; 
}

.comment-actions {
  margin-left : -44px !important;
}

.root-comment.is-child.ng-star-inserted {
  padding: 20px 0 0 10px !important;
  margin: -10px 0 0 -5px !important;
}

.root-comment.is-child.ng-star-inserted .is-child {
  padding: 10px 0px 0 0 !important;
  margin: 0 0 0 -42px !important;
}

.root-comment.is-child.ng-star-inserted .comment-account-date.ng-star-inserted {
  margin-top: 3px !important;
}

.is-child .comment-html.ng-star-inserted {
  padding-left: 8px !important;
}

.is-child .comment-actions {
  margin-left : -34px !important;
}

.comment-account-date.ng-star-inserted {
  margin-top: 8px !important;
}

.view-replies {
  margin-left : -46px !important;
}

.vertical-border{
 visibility: hidden;
}

converse-avatar .avatar {
  border-radius: 100px !important;
}




/* Gestion du compte */
.pt-badge {
  border-radius: 12px;
}

div.progress span {
  padding-left: 10px;
  padding-right: 10px;
}

.btn.ng-star-inserted, .dropdown-toggle.btn.dropdown-toggle-split.last-in-group  {
  height: 35px !important;
}

.action-button.grey-button-link.icon-only.has-icon.ng-star-inserted {
  margin: 5px;
}

.delete-history {
  border-radius: 24px !important;
  -moz-border-radius: 24px !important;
  -webkit-border-radius: 24px !important;
  height: 35px !important;
  line-height: 35px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-wrapper {
  padding-right: 15px;
}

.last-in-group.ng-pristine.ng-valid {
  border-radius: 12px !important;
  -moz-border-radius: 12px !important;
  -webkit-border-radius: 12px !important; 
}

.history-switch {
  padding-right: 15px;
}

.action-button.ng-star-inserted {
  border-radius: 12px !important;
  -moz-border-radius: 12px !important;
  -webkit-border-radius: 12px !important; 
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-button.grey-button.has-icon.ng-star-inserted {
  border-radius: 24px !important;
  -moz-border-radius: 24px !important;
  -webkit-border-radius: 24px !important;
  margin:5px;
  height:35px;
  line-height:35px;
}

.btn.ng-star-inserted {
  border-radius: 24px !important;
  -moz-border-radius: 24px !important;
  -webkit-border-radius: 24px !important;
  padding-right: 14px !important;
  padding-inline-end: 12px !important;
  line-height:14px !important;
}

.channels-setup-message.alert.pt-alert-primary.ng-star-inserted {
  border-radius: 12px !important;
  -moz-border-radius: 12px !important;
  -webkit-border-radius: 12px !important;
  background-color: #202020;
  border:0px;
}

.btn-group.dropdown button {
  padding-inline-start: 8px !important;
}

.dropdown-toggle.input-group-text.c-hand.ng-star-inserted {
  border:0px;
  color:#FFFFFF;
}





/* Gestion de l'historique, Abonnements, Listes, Vidéos, Chaînes */
.channels-settings-link.ng-star-inserted, .action-button.grey-button-link.has-icon.ng-star-inserted, .dropdown-toggle.action-button.grey.button-styled, .progress,  input, .peertube-select-container  {
  border-radius: 24px !important;
  height: 35px !important;
  line-height: 35px !important;
}

.chip.rectangular.bg-secondary.text-light.ng-star-inserted {
  border-radius: 24px !important;
  -moz-border-radius: 24px !important;
  -webkit-border-radius: 24px !important;
  padding: 10px;
  margin-top: 10px;
}

.action-button.action-button-delete-selection.ng-star-inserted {
  border-radius: 24px !important;
  -moz-border-radius: 24px !important;
  -webkit-border-radius: 24px !important;
  margin: 5px;
  height: 35px;
  line-height: 35px;
}

.create-button {
  border-radius: 24px !important;
  -moz-border-radius: 24px !important;
  -webkit-border-radius: 24px !important;
}





/* Boutons et menus déroulants du site */

.dropdown-menu.show, .modal-content, .ng-dropdown-panel, .scroll-host {
  background: #35303085 !important;
  background-blend-mode: overlay;
  box-shadow: 0 10px 15px rgb(0 0 0 / 20%);
  backdrop-filter: blur(33px);
  -webkit-backdrop-filter: blur(33px);
  border: 0px;
  -webkit-animation: fadeIn 0.4s;
}

.dropdown-menu.show a {
  color: #FFFFFF;
}

.nav-link.nav-item.active {
  background-color: transparent !important;
}

.nav-link.nav-item {
  color: #FFFFFF !important;
}

.btn-group.show.dropdown {
  border: 0px !important;
}

.dropdown-toggle.btn.dropdown-toggle-split.last-in-group span {
  background-color: #f2690d;
  padding: 6px;
  padding-left: 14px;
  padding-right: 12px !important;
  margin-right: 8px;
  border-radius: 24px !important;
  -moz-border-radius: 24px !important;
  -webkit-border-radius: 24px !important; 
}

.action-button.action-button-cancel-selection {
  border-radius: 24px !important;
  height: 38px !important;
  line-height: 38px !important;
  margin-top:4px;
}