/*** Esup Pod main CSS ***/

:root {
  /* COMMON COLORS */
  --color-black: #000;
  --color-black-alpha: rgb(0 0 0 / 60%);
  --color-alto: #ddd;
  --color-silver: #ccc;
  --color-silver-chalice: #aaa;

  /***
   *  exemple vert 'univ-lille.fr' 2022
   ***/

  /*** Theme primary color ***/
  --pod-primary: #1f7c85;
  --pod-primary-rgb: 31, 124, 133;

  /* a light variant of primary color, used for button hover */
  --pod-primary-lighten: #08b0a0;

  /* a dark variant of primary color, used for active links and disabled buttons */
  --pod-primary-darken: #18575d;

  /* les valeurs '...-dark' ci-dessous sont pour le mode sombre. */
  --pod-primary-dark: #1f7c85;
  --pod-primary-lighten-dark: #08b0a0;
  --pod-primary-lighten-dark-rgb: 8, 176, 160;
  --pod-primary-darken-dark: #18575d;

  /***
   * Esup-Pod default colors
   ***/

  /*** couleur de fond du site ***/
  --pod-background: #fff;
  --pod-background-dark: #222831;

  /*** couleur du texte des boutons principaux ***/
  --pod-btn-text: #fff;
  --pod-btn-text-dark: #fff;

  /**** couleur de police ****/
  --pod-font-color: #000;
  --pod-font-color-dark: #f8f9fa;

  /**** couleur neutre pour fond de bloc (ex jumbotron) ***/
  --pod-background-neutre1-bloc: #ddd;
  --pod-background-neutre1-bloc-dark: #393e46;

  /**** couleur neutre 2 pour fond de bloc ***/
  --pod-background-neutre2-bloc: #f5f5f5;
  --pod-background-neutre2-bloc-dark: #161c26;

  /**** couleur des liens *****/
  --pod-link-color: var(--pod-primary);
  --pod-link-color-rgb: var(--pod-primary-rgb);
  --pod-activelink-color: var(--pod-primary-darken);

  /* couleur d'un élément actif (ex. : survol de bouton) */
  --pod-primary-focus: var(--pod-primary-darken);

  /* Couleur d'alerte */
  --pod-alert: #fc8670;
  --pod-alert-dark: #b11030;

  /**** font family ****/

  /* For better accessibility, avoid fonts where [1, i, L] or [O, 0] are the same. */
  --bs-body-font-family: "Verdana", sans-serif;
  --bs-body-font-size: 11pt;
  --pod-font-family-dyslexie: "Open Dyslexic";

  font-size: var(--bs-body-font-size);

  /* BOOTSTRAP COLORS */
  --bs-primary-rgb: var(--pod-primary-rgb);
  --bs-light: #f8f9fa;
  --bs-dark: #343a40;
  --bs-link-color: var(--pod-link-color);
  --bs-link-color-rgb: var(--pod-link-color-rgb);
  --bs-link-hover-color: var(--pod-activelink-color);
  --bs-card-color: var(--pod-font-color);

  /* better contrast on sidebar background */
  --bs-danger: #dc2028;

  /* better contrasts */
  --bs-border-color: #8e969d;
  --bs-orange: #c85208;

  /* Use system font (faster load) */
  --font-family-sans-serif: -apple-system, system-ui, "BlinkMacSystemFont",
    "Segoe UI", "Roboto", "Verdana", sans-serif;

  /** reinit before cleaning all old css vars ***/
  --primary-background-color: var(--pod-background-neutre1-bloc) !important;
  --third-background-color: var(--pod-background-neutre1-bloc) !important;
}

.progress,
.progress-stacked {
  --bs-progress-bar-bg: var(--pod-primary);
}

:root[data-dyslexia="on"] {
  --bs-body-font-family: var(--pod-font-family-dyslexie);
}

/* copy "alert-danger" style from Bootstrap 4 */
.alert-error {
  background-color: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

tr,
.rowl {
  display: table-row !important;
}

.table-hover tbody tr {
  transition: background-color 0.5s;
}

.navbar-light .navbar-brand:focus,
.navbar-light .navbar-brand:hover {
  transition:
    background-color 0.3s ease-in-out,
    color 0.3s ease-in-out;
  color: var(--color-black);
}

.pod-nav-link-icon,
.pod-add {
  font-size: 120%;
}

.bg-light {
  background-color: var(--bs-light) !important;
}

.tab-title {
  font-size: 1.5rem;
}

.pod-meta-title {
  font-size: 85%;
}

.pod-meta-title + ul {
  display: inline-block;
}

.pod-meta-title-additional-owners {
  vertical-align: top;
}

.title-chaine > a {
  margin-left: 0.5em;
  margin-right: 0.5em;
}

.pod-card--video a:not(.btn) {
  color: inherit;
}

a:not(.btn, .dropdown-item):hover,
a:not(.btn, .dropdown-item):focus {
  color: var(--pod-activelink-color);
  text-decoration: underline;
}

.btn-link {
  text-decoration: none;
}

.btn-link:hover,
.btn-link:focus,
.nav-link:hover,
.nav-link:focus {
  text-decoration: underline;
}

.btn-outline-primary {
  color: var(--pod-primary);
  border-color: var(--pod-primary);
}

#collapseAside .card > .btn {
  white-space: normal !important;
  word-wrap: break-word;
  word-break: normal;
  padding: 0.5rem;
}

.submit-row a.deletelink {
  height: 35px;
}

.pod-mt-7 {
  margin-top: 3.5rem;
}

.pod-share-fieldset {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--pod-background-neutre1-bloc);
}

.pod-share-fieldset legend {
  margin-bottom: 1.5rem;
}

:not(footer) > .pod-btn-social {
  font-size: 2rem;
}

.btn.pod-btn-social {
  color: var(--pod-font-color);

  --bs-btn-hover-color: var(--pod-font-color);
  --bs-btn-active-color: var(--pod-font-color);
}

.pod-btn-social i {
  transition: all 0.2s ease;
}

.pod-btn-social:hover i,
.btn.pod-btn-social:focus-visible i {
  transform: rotate(15deg);
  display: inline-block;
}

.list-group-item {
  background: var(--pod-background);
  padding: 0.25rem 1.25rem;
}

/***
 *  video *
 ***/
#myTabContent #info p {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

#share legend {
  line-height: 1em;
}

.hidespinner {
  display: none;
}

.link-center-pod {
  margin-left: auto;
  margin-right: auto;
}

.link-center-pod,
.file-image {
  display: block;
  overflow: hidden;
  max-height: auto;
}

@media (width >= 576px) {
  .link-center-pod,
  .file-image {
    max-height: 10rem;
  }
}

.link-center-pod > img {
  min-width: 100%;
  height: 100%;
  min-height: 146px;
}

/*********
 * navbar
 *********/

.btn-lang {
  padding: 0.2rem 0.25rem;
  width: 100%;
  text-align: left;
}

.btn-lang-active {
  background: var(--pod-background);
  color: var(--pod-font-color);
}

.btn-lang:focus,
.btn-lang:hover,
.btn-lang:active {
  box-shadow: 0 0 3px var(--pod-primary);

  --bs-btn-hover-color: var(--pod-font-color);
  --bs-btn-active-color: var(--pod-font-color);
}

.navbar-inner-pod {
  position: relative;
}

.navbar-toggler {
  padding: 0.5rem;
  line-height: inherit;
  font-size: 1rem;
}

.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-toggler {
  transition:
    background-color 0.3s ease-in-out,
    color 0.3s ease-in-out;
  color: var(--pod-font-color);
  box-shadow: 0.05rem 0.05rem 0.2rem 0.05rem rgb(0 0 0 / 20%);
  border-radius: 0.15rem;
  margin-top: 1rem;
}

.navbar-toggler:focus,
.navbar-toggler:hover {
  transition:
    background-color 0.3s ease-in-out,
    color 0.3s ease-in-out;
  color: var(--bs-link-color);
  border-color: var(--bs-link-color);
}

.userpicture {
  height: 34px;
  line-height: 2.5em; /* Align username if no image available */
}

/** modal **/
.modal-title svg {
  /* color:var(--pod-primary); */
  height: 40px;
  width: 40px;
}

.modal-content {
  background-color: var(--pod-background);
}

.modal-title {
  display: flex;
  align-items: center;
}

.modal-pod-full .close {
  font-size: 3rem;
}

/** end modal **/

a.btn-outline-primary:not(:hover) svg {
  fill: var(--pod-primary);
}

.title-chaine {
  margin-right: 0.5rem;
  font-weight: 600;
  flex-direction: row;
}

#listeChaines {
  max-height: 30rem;
  overflow: auto;
  border-bottom: 1px solid var(--color-black);
}

.liste-collapse {
  z-index: 900;
}

/***
 * tab
 ***/
.tab-content > .active {
  border: 1px solid var(--color-alto);
  padding: 1.5rem;
  background: var(--pod-background);
}

.pod-live-info {
  /* Very dirty fix */
  border: 0 !important;
  border-top: 1px solid var(--color-alto) !important;
  padding: 1.5rem;
  background: var(--pod-background);
  margin-top: 0.75rem;
}

.nav-tabs {
  border: 0;
}

.dropdown-menu {
  background-color: var(--pod-background);
  color: var(--pod-font-color);
  border: 1px solid var(--color-silver-chalice);
}

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

/*** aside ***/

#card-takenote .dropdown-menu {
  border: none;
}

/* general search */
#s + button {
  opacity: 0;
  transition: opacity 0.8s ease-in;
}

#s:focus + button,
#s + button:focus,
#s + button:hover {
  opacity: 1;
}

/*** modif taille logo ***/
@media (max-width: 576px) {
  .navbar-brand img {
    height: 35px;
  }
}

@media (max-width: 992px) {
  .langs {
    border-top: 1px solid var(--color-silver);
  }

  .langs .active {
    background: var(--pod-primary);
    color: var(--bs-white);
  }

  .navbar-nav .login .dropdown-menu {
    position: absolute;
    float: left;
  }

  /*** General search ***/
  .pod-navbar-search {
    position: absolute;
    left: 0;
    top: 0;
  }

  #s {
    border-radius: 0;
    transition: height 0.5s;
  }

  .hide-search-input {
    margin-top: -3rem;
    width: 1px;
    height: 1px;
    box-shadow: none;
    outline: none;
    border: 0;
    opacity: 0;
  }

  #s.hide-search-input + button {
    height: 1px;
  }

  #s:focus,
  .focus-search-input {
    width: calc(100% - 4em);
    opacity: 1;
    display: inline-block;
    padding: 0.5rem 1rem;
    z-index: 99;
    height: 3rem;
    margin-top: 0;
  }

  /* nav-search form */
  #nav-search label:hover .pod-nav-link-icon,
  #nav-search label:focus .pod-nav-link-icon {
    color: var(--pod-activelink-color);
  }

  .navbar label {
    padding-left: 1px;
    position: relative;
    left: 0.1em;
    cursor: pointer;
  }
}

/*** end MQueries **/

.login > .initials {
  font-weight: 600;
}

.btn .userpicture {
  border: 1px solid transparent;
}

.btn:hover .userpicture,
.btn:focus .userpicture {
  opacity: 0.8;
  border-color: #ccc;
}

/*** Videos list header ***/
.videos-list-header {
  align-items: center;
}

/*** CARD ***/
.infinite-item .card-body {
  padding: 0.9rem;
  height: 3.5rem;
  overflow: hidden;
}

.infinite-item .card-header .octicon {
  height: 0.9rem;
  margin: 0.1rem;
}

.card-header {
  background: none;
}

#videos_list .card-header {
  padding: 0.4rem !important;
}

.pod-card--video .video-title {
  line-height: 1.2;
  display: inline-block;
  max-width: 100%;
}

#videos_list .video-title a {
  text-decoration: none;
}

#videos_list .video-title a:hover,
#videos_list .video-title a:focus {
  text-decoration: underline;
}

/* prevent default thumbnail to be too small on some screens */
.video-card > .card-thumbnail {
  min-height: 146px;
  background-color: #000;
}

.video-card .d-flex {
  top: 0;
  gap: 0.5rem;
}

div.card a img {
  transition: transform 0.2s ease;
  background: #000;
}

.card .link-center-pod:hover > img {
  transform: scale(1.1);
  z-index: 0;
}

.card-footer-pod {
  position: absolute;
  bottom: 4rem;
  right: 0;
  border: none;
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: flex-end;
  background: #00000095;
  z-index: 10;
}

.card-footer-pod a.btn,
.card-footer-pod button {
  border: none;
  color: white;
  background: none;

  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

.card-footer-pod a.btn i {
  transition: 0.2s all ease;
  display: inline-block;
}

.card-footer-pod a.btn:hover i,
.card-footer-pod a.btn:focus i {
  transform: rotate(10deg);
}

/** aside list video **/
#collapseAside .card-body .card-title {
  position: relative;
  padding-bottom: 0.8em;
}

#collapseAside .card-body .card-title::after {
  content: "";
  border-top: 1px solid #ccc !important;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

#resetFilters {
  margin-left: auto !important;
}

#filterType div.collapse:not(.show),
#filterDiscipline div.collapse:not(.show),
#filterCursus div.collapse:not(.show),
#filterTag div.collapse:not(.show) {
  height: 148px !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  -webkit-line-clamp: 2;
}

#filterType div.collapsing,
#filterDiscipline div.collapsing,
#filterCursus div.collapsing,
#filterTag div.collapsing {
  min-height: 148px !important;
}

#filterType a.collapsed::after,
#filterDiscipline a.collapsed::after,
#filterCursus a.collapsed::after,
#filterTag a.collapsed::after {
  content: "▼";
}

#filterType a:not(.collapsed)::after,
#filterDiscipline a:not(.collapsed)::after,
#filterCursus a:not(.collapsed)::after,
#filterTag a:not(.collapsed)::after {
  content: "▲";
}

/** ckeditor **/
.django-ckeditor-widget {
  width: 100%;
}

/** Dashboard **/
#bulk_update_container {
  background-color: var(--pod-background-neutre2-bloc);
  padding: 1em;
  border-radius: var(--bs-border-radius);
}

#bulk_update_container .select2 {
  width: 100% !important;
}

.btn-dashboard-display-mode {
  height: fit-content;
}

#countSelectedVideosBadge {
  background-color: var(--pod-background-neutre1-bloc);
  color: var(--pod-font-color);
}

/* Dashboard infinite container */
.dashboard-container {
  margin: 1rem 0;
}

.dashboard-container .infinite-item {
  cursor: pointer;
}

.dashboard-container .infinite-item {
  position: relative;
}

.infinite-item .checked_overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 9;
  opacity: 0;
  justify-content: center;
  align-items: center;
  outline: 2px solid var(--pod-link-color);
  border-radius: var(--bs-border-radius-sm);
  background-color: rgb(255 255 255 / 80%);
  cursor: pointer;
  transition: all 0.3s;
}

.infinite-item.selected .checked_overlay {
  display: flex;
  opacity: 1;
}

.infinite-item .checked_overlay .card_selected {
  display: block;
  transition: all 0.3s;
}

.dashboard-container .infinite-item:not(.selected):hover,
.dashboard-container .infinite-item .checked_overlay:hover .card_selected {
  transform: scale(1.03);
  transition: transform 0.25s ease;
  z-index: 6;
}

.infinite-item.selected .checked_overlay .card-selected i {
  font-size: 3rem;
  color: var(--pod-link-color);
}

.pod-infinite-grid-container-dashbord
  .infinite-item
  .video-card
  .card-thumbnail {
  height: 146px;
  overflow: hidden;
}

.pod-infinite-grid-container-dashbord
  .infinite-item
  .video-card
  .card-thumbnail
  .pod-thumbnail {
  width: 100%;
}

/* Specific list display mode */
.pod-infinite-list-container-dashboard .list-item-video-row {
  padding: 0;
  max-height: 50px;
  border: none;
  background-color: var(--pod-background-neutre2-bloc);
  border-radius: 4px;
  font-size: 0.9rem;
  transition: background-color 0.3s;
}

.pod-infinite-list-container-dashboard .list-item-video-row.selected {
  border: 2px solid var(--pod-link-color);
}

.pod-infinite-list-container-dashboard .list-item-video-row:hover {
  background-color: var(--pod-background-neutre1-bloc);
}

.pod-infinite-list-container-dashboard
  .list-item-video-row
  .checked_overlay
  .card-selected {
  width: 100%;
}

.pod-infinite-list-container-dashboard
  .list-item-video-row.selected
  .checked_overlay
  .card-selected
  i {
  font-size: 2rem;
  margin: 0 2rem;
}

.pod-infinite-list-container-dashboard
  .list-item-video-row
  i:not(.checked_overlay .card-selected i) {
  font-size: 1.2rem;
  padding: 0.2rem;
}

.thumbnail-item-video-row {
  height: 50px;
  overflow: hidden;
  border-radius: 4px 0 0 4px;
}

.thumbnail-item-video-row img {
  width: 100%;
  min-height: 100%;
}

.title-item-video-row {
  padding-left: 1rem;
}

.pod-infinite-list-container-dashboard .list-item-video-row i.active {
  color: var(--pod-link-color);
}

/* custom badges for confirm modal bulk update */
.bulk-update-confirm-badges {
  background-color: var(--pod-link-color);
  color: var(--pod-background);
  padding: 10px;
  margin: 5px;
}

span[data-bs-placement] {
  cursor: help;
}

/** video form **/

/* as video filename can be very long,
  it is usefull to wrap it anywhere
  (specially on Chrome) */
.field_video a {
  overflow-wrap: anywhere;
}

.required_star,
.form-help-inline {
  color: var(--bs-danger);
  font-size: 1.3rem;
}

/* prevent a large link from extending beyond it's container
   @see video file in video/edit */
.pod-largelink {
  max-width: 44rem;
  overflow-x: hidden;
}

.errors > .form-control:focus {
  box-shadow: 0 0 0 0.25rem rgb(var(--bs-danger-rgb) / 25%);
  border-color: var(--bs-danger);
}

.errors input,
.errors select,
.errors textarea {
  border: 1px solid var(--bs-danger);
}

.form-group-required .errors,
.form-group .errorlist {
  color: var(--bs-danger);
}

.form-group .errorlist {
  margin-bottom: 0;
}

#base-message-alert,
#formalertdiv {
  position: fixed;
  top: 50%;
  text-align: center;
  margin: 0 auto;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 1031;
}

#formalertdivbottomright {
  max-width: 95%;
  position: fixed;
  bottom: 20px;
  right: 20px;
  margin: 0 auto;
  z-index: 1031;
}

#formalertdivbottomright > i {
  margin-right: 0.8rem;
  font-size: 1rem;
}

.flashing_field {
  border-color: var(--pod-primary);
  box-shadow: 0 0 4px var(--pod-primary);
  transition:
    box-shadow 0.5s,
    border-color 0.5s;
}

/** video thumbnails **/
@media (max-width: 575.98px) {
  .pod-flex-direction {
    flex-direction: column;
  }
}

/*
@media screen and (min-width:768px) {  }
*/

@media screen and (min-width: 992px) {
  .card-img-top {
    max-height: 195.36px;
  }

  .flex-2 {
    flex: 2;
  }
}

.footer_links > li::before {
  margin-right: 2px;
  content: "\F234";
  font-family: bootstrap-icons;
  vertical-align: -0.125em;
}

#view-counter-icon {
  color: var(--pod-primary);
}

#viewers-list {
  position: absolute;
  right: 0;
  margin-right: 80px;
  color: var(--color-black);
  text-align: center;
  font-size: 20px;
  background-color: var(--pod-background-neutre1-bloc);
  padding: 10px 0;
  z-index: 2147483647;
  display: none;
}

.live-video {
  z-index: 1;
}

#viewers-ul {
  height: 200px;
  list-style-type: none;
  padding-left: 0;
  overflow: hidden;
  overflow-y: scroll;
}

/* use to hide valid human chekbox in contact form to prevent spam */
#contact_us .valid_human {
  display: block;
  overflow: hidden;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/*** CUSTOM CLASSES POD - bootstrap5 - 2022/04 ****/

/**** vers methodo BEM .element__souselement--variante ***/
body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 100vh;
  padding-top: 3.1rem;
  color: var(--pod-font-color);
  background-color: var(--pod-background);
}

/*** reinit bootstrap 5 ***/
.nav {
  --bs-nav-link-color: var(--pod-font-color);
}

.accordion {
  --bs-accordion-active-color: var(--pod-link-color);
  --bs-accordion-active-bg: rgb(var(--bs-primary-rgb) 10%);
  --bs-accordion-btn-focus-border-color: var(--pod-primary);
}

.timecode,
.filter-info {
  font-size: 12px;
  font-style: italic;
}

.btn-primary,
.btn-outline-primary {
  --bs-btn-hover-color: var(--pod-btn-text);
  --bs-btn-hover-bg: var(--pod-primary-focus);
  --bs-btn-hover-border-color: var(--pod-primary-lighten);
  --bs-btn-active-color: var(--pod-btn-text);
  --bs-btn-active-bg: var(--pod-activelink-color);
  --bs-btn-active-border-color: var(--pod-primary-lighten);
}

.btn-primary {
  --bs-btn-bg: var(--pod-primary);
  --bs-btn-border-color: var(--pod-primary);
  --bs-btn-color: var(--pod-btn-text);
}

/* dark navbars (see in "my files") */
.bg-primary {
  --bs-link-color: #f5f5f5;
}

.bg-primary .nav-link {
  --bs-nav-link-color: var(--bs-link-color);
}

.bg-primary .nav-link,
.bg-primary .btn-link {
  --bs-btn-focus-shadow-rgb: 200, 200, 253;
}

/* used in badges (# of videos in channel) */
.text-bg-primary {
  background-color: var(--pod-primary) !important;
}

.btn-primary.disabled,
.btn-primary:disabled {
  background: var(--pod-primary-darken);
}

.btn-close {
  color: var(--pod-font-color);
}

.pod-params-button {
  color: var(--pod-font-color);
  font-size: 1.4rem;
  display: flex;

  --bs-btn-hover-color: var(--bs-link-color);
}

.pod-params-button:focus,
.pod-params-button:hover {
  text-decoration: none;
}

/* Make icon rotate and button remain still */
.pod-params-button > i::before {
  transition: transform ease-in-out 0.3s;
}

.pod-params-button:focus > i::before,
.pod-params-button:hover > i::before {
  transform: rotate(20deg);
}

.pod-gotoup {
  font-size: 2rem;
}

.pod-channel__item {
  font-size: 1.5rem;
}

.pod-aside-collapse {
  position: absolute;
  right: 0.5rem;
  z-index: 6;
}

.pod-aside-collapse__button {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  transition: all 0.5s ease-in;
  background: none;
  border: 1px solid silver;
  color: var(--pod-font-color);
  text-shadow: 1px 1px 0 var(--pod-background);
}

.pod-aside-collapse__button:hover {
  background-color: var(--pod-link-color);
  color: var(--pod-btn-text);
}

.pod-aside-collapse[aria-expanded="true"] {
  transform: rotate(-90deg);
}

/*** footer **/
.pod-footer {
  margin-top: auto;
  font-size: 90%;
  line-height: 1.4;
  border-top: 1px solid var(--pod-background-neutre1-bloc);
  padding-top: 1rem;
}

.pod-footer-container {
  margin-top: auto;
}

@media (width >= 1450px) {
  .pod-footer {
    margin-left: 5rem;
    margin-right: 5rem;
  }
}

.pod-footer__credits {
  font-size: 85%;

  /*
  opacity: .8;
  */
}

.pod-footer__links {
  display: flex;
  justify-content: space-around;
  gap: 0.5rem;
  font-weight: 600;
  flex-wrap: wrap;
}

.pod-footer a {
  text-decoration: none;
}

.pod-footer a:hover,
.pod-footer a:focus {
  text-decoration: underline;
}

.pod-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pod-card__title,
.pod-card__title label {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

@media (width >= 992px) {
  .pod-card__title,
  .pod-card__title label {
    flex-flow: wrap;
  }
}

.pod-navbar {
  background: var(--pod-background);
  box-shadow:
    0 1px 3px rgb(0 0 0 / 12%),
    0 1px 2px rgb(0 0 0 / 24%);
}

.pod-info-video {
  margin-top: 1.5rem;
}

.pod-info-video a {
  word-wrap: break-word;
}

.pod-info-video__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.pod-info-video__header h1 {
  margin-bottom: 0;
}

.video-info_duration-view-share {
  display: flex;
  font-size: 90%;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 1px solid var(--pod-background-neutre1-bloc);
  padding-bottom: 0.75rem;
}

.pod-info-video__info {
  padding: 1.5rem 0;
  border-top: 1px solid var(--pod-background-neutre1-bloc);
  font-size: 90%;
  border-bottom: 1px solid var(--pod-background-neutre1-bloc);
}

.pod-info-video__summary {
  max-width: 900px;
  font-size: 90%;
}

@media (width >= 992px) {
  .modal-dialog {
    max-width: 80vw;
    margin: 1.75rem auto;
  }
}

/* Additional class for modal element */

/* Download modal */

.pod-download-title {
  font-size: 1.5rem;
  padding: 1rem 0 0 1rem;
}

.pod-download-title > .bi {
  padding-right: 0.5rem;
}

/* ------ */

.video-info_duration-view-share button {
  margin-left: auto;
}

.pod-info-video__buttons {
  margin-left: auto;
}

.pod-btn-share i,
.pod-info-video__signal i {
  transition: all 0.2s ease-in;
  display: inline-block;
}

.pod-btn-share:hover i,
.pod-btn-share:focus i,
.pod-info-video__signal:focus i,
.pod-info-video__signal:hover i {
  transform: rotate(15deg);
}

.pod-info-video__signal {
  color: var(--bs-danger);
  font-size: 1.5rem;
}

.pod-info-video__signal:focus i,
.pod-info-video__signal:hover i {
  color: var(--bs-danger);
}

.pod-navbar__container {
  justify-content: flex-start !important;
}

.pod-navbar__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--pod-font-color) !important;
  transition: transform 0.4s ease;
}

.pod-navbar__brand:hover,
.pod-navbar__brand:focus {
  transform: scale(1.03);
}

/* Do not set brightness 0, as many logo are not monochromatic :/
:root .pod-footer-logo { filter: brightness(0%);}
*/
.pod-footer-logo {
  height: 40px;
  background-repeat: no-repeat;
}

.pod-offcanvas {
  background: var(--pod-background-neutre2-bloc);
}

.page_title {
  margin-bottom: 1.5rem;
}

.pod-navbar__theme-switch__item > * {
  display: flex;
  align-items: center;
  margin: 1rem 2rem;
}

.pod-navbar__theme-switch__item .form-label {
  flex-grow: 1;
}

.pod-navbar__theme-switch__item .dropdown-menu {
  position: absolute;
}

.pod-navbar__form {
  margin-left: auto;
}

@media (width >= 992px) {
  .pod-navbar__form {
    flex-basis: 350px;
  }
}

/* small screens */
.pod-grid-content {
  display: grid;
  grid-template-columns: minmax(0%, 100%) repeat(auto-fit, 100%);
  position: relative;
}

/* medium screens */
@media (width >= 992px) {
  .pod-grid-content {
    gap: 2rem;
    grid-template-columns: minmax(0%, 100%) repeat(auto-fit, 33%);
  }
}

/* large screens */
@media (width >= 1200px) {
  .pod-grid-content {
    grid-template-columns: minmax(0%, 100%) repeat(auto-fit, 25%);
  }
}

/**** static content homepage ***/

.pod-card--video {
  border: none;
  box-shadow:
    0 3px 6px rgb(0 0 0 / 16%),
    0 3px 6px rgb(0 0 0 / 23%);
  background: var(--pod-background);
}

.pod-event-card .video-title {
  line-height: 1rem;
}

.pod-aside {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  grid-template-rows: min-content;
  grid-auto-flow: row;
  grid-auto-rows: min-content;
  background: var(--pod-background-neutre2-bloc);
  padding: 1rem;
  width: 0;
  overflow: hidden;
  margin-left: 100%;
  transition: all 0.15s ease;
  z-index: 5;
  padding-top: 5rem;
  box-shadow: 0.05rem 0.05rem 0.2rem 0.05rem rgb(0 0 0 / 20%);
}

.pod-aside.show {
  margin-left: 0;
  width: auto;
}

@media (width >= 992px) {
  .pod-show-lg {
    margin-left: 0;
    width: auto;
  }
}

@media (max-width: 992px) {
  .pod-aside {
    /* THIS IS NORMAL, it's to fit with pod-aside-collapse */
    width: 101% !important;
    min-height: 100%;
    position: absolute;
  }

  .pod-aside-collapse {
    position: fixed;
  }
}

@media (width >= 1450px) {
  .pod-mainContent {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .pod-grid-content {
    gap: 0;
  }
}

.pod-aside.collapsing {
  height: auto;
}

.pod-aside .card {
  background: none;
  border-radius: 0;
  border: none;
}

.pod-navbar__button-toggler {
  color: var(--pod-font-color);
  padding: 0;
  font-size: 1.8rem;
  margin: 0;
  border: 0;
  margin-right: 0.3rem;
  background: none;
  width: 2.5rem;
  height: 2.5rem;
}

.pod-camera-video {
  font-size: 2rem !important;
  z-index: 0;
}

#card-helpfields .card {
  border-bottom: 1px solid silver;
}

.pod-infinite-container {
  display: grid;
  grid-auto-flow: row;
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  margin: 1rem 0;
}

#login-form label {
  min-width: 9rem;
}

/* --------------------------------------------------------------------- */

/* Minor corrections */

/* Buttons side by side under the title */
#event_add {
  display: inline-block !important;
  padding-right: 0.5rem;
}

/* Fix table on "My meetings" */

.table > :not(caption) > * > * {
  padding: 0.5rem 0.25rem;
  border-bottom-width: 0 !important;
}

table :not(footer) > .pod-btn-social {
  font-size: 1.5rem;
  width: 3rem !important;
  height: 3rem !important;
}

th + td + td + td + td {
  text-align: center;
}

table .alert.alert-danger.btn.pod-btn-social {
  background-color: var(--pod-alert) !important;
}

/* Quick fix for video preview - override of video-js.min.css on line 1 */
.vjs-poster {
  background-size: cover !important;
}

/* Custom subtitles block on Firefox & Chrome (Safari use it's own subtitle style) */
.vjs-text-track-cue > div {
  display: block;
  padding: 0.3rem 0.5rem;
  border-radius: 8px;
}

.vjs-logo-button {
  filter: invert(100%);
}

.vjs-logo-button:hover,
.vjs-logo-button:focus {
  transform: rotate(30deg);
  background-color: transparent !important;
}

/* Shrink vjs toolbar on very small screens */
@media only screen and (width <= 400px) {
  .pod-container .video-js .vjs-control {
    width: 3em;
    font-size: 75%;
  }
}

/* replace default .video-js 10px font size to avoid an accessibility "Very small text" warning */
#podvideoplayer {
  font-size: 11px;
}

/* Upload page */

.form-group.hide-on-processing {
  border: dotted var(--pod-link-color);
  margin-bottom: 0.5rem;
  border-radius: 1rem;
  width: fit-content;
}

/** Esup-Pod callout messages **/
.pod-callout {
  padding: 0.7rem 1rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid #eee;
  border-left-width: 0.33rem;
  border-radius: 0.25rem;
}

.pod-callout-primary {
  border-left-color: var(--pod-primary);
}

.pod-callout-secondary {
  border-left-color: var(--bs-secondary);
}

.pod-callout-success {
  border-left-color: var(--bs-success);
}

.pod-callout-danger {
  border-left-color: var(--bs-danger);
}

.pod-callout-warning {
  border-left-color: var(--bs-warning);
}

.pod-callout-info {
  border-left-color: var(--bs-info);
}

/* Bootstrap loader-spinner */
.loaderSpinner {
  transition: opacity 150ms ease-in-out;
  z-index: 1100;
}

.loaderSpinner.hide {
  opacity: 0;
}

.loaderSpinner > .spinner-border {
  color: var(--pod-primary);
  width: 4rem;
  height: 4rem;
  margin: 2rem;
  border-width: 0.5rem;
}

/* *** fix for calendar choice widget in modal dialog *** */
.calendarbox {
  z-index: 3000;
  background-color: var(--pod-background) !important;
}

#mainbreadcrumb {
  margin-right: 2.7rem;
}

div.disabled,
a.player-element.disabled {
  background-image: linear-gradient(
    45deg,
    rgb(0 0 0 / 20%) 25%,
    transparent 25%,
    transparent 50%,
    rgb(0 0 0 / 20%) 50%,
    rgb(0 0 0 / 20%) 75%,
    transparent 75%,
    transparent
  );
  background-size: 4px 4px;
  background-repeat: repeat;
}

.progress {
  height: 0.6em;
}

.progress .progress-bar {
  width: 100%;
}

.podfile-icon-selector {
  /* display: inline-block; */
  width: 1.6em;
  padding: 1.7em 1em 0;
  margin-top: 0.1em;
  height: 1.6em;
  overflow: hidden;
  box-sizing: border-box;
  background: url("/static/bootstrap-icons/icons/cloud-arrow-up.svg") center
    center no-repeat transparent;
  border-radius: 5px;
  background-size: 1.6em 1.6em;
}

.navbar-expand-lg .navbar-nav .nav-link.podfile-icon-selector {
  padding: 1.7em 1em 0;
}

.bg-primary .podfile-icon-selector {
  filter: invert(1);
}

.podfile-icon-selector:hover {
  opacity: 0.66;
}

.bg-primary .podfile-icon-selector:focus-visible {
  box-shadow: 0 0 0 0.25rem rgb(0 0 0 / 50%);
}

/** Django 3 Admin pages
 *  (must be set after Bootsrap to reset Django defaults)
 **/
body[data-admin-utc-offset] {
  background-color: var(--body-bg);
  padding-top: 0;

  --primary: var(--pod-primary);
  --breadcrumbs-bg: var(--pod-primary);
  --button-bg: var(--pod-primary);
}

body[data-admin-utc-offset] textarea.cke_source {
  background-color: var(--pod-background);
}

body[data-admin-utc-offset] caption {
  caption-side: top;
}

body[data-admin-utc-offset] h1 {
  font-size: 20px;
}

body[data-admin-utc-offset] h2 {
  font-size: 18px;
}

body[data-admin-utc-offset] h3 {
  font-size: 16px;
}

body[data-admin-utc-offset] .hidden {
  display: none;
}

body[data-admin-utc-offset] .btn-outline-primary {
  color: var(--link-fg);
}

body[data-admin-utc-offset] .btn-outline-primary:hover,
body[data-admin-utc-offset] .btn-outline-primary:focus {
  background-color: var(--pod-primary);
  color: var(--bs-light);
}

body[data-admin-utc-offset] .form-row.errors {
  display: block;
}

/* css corrections for select2 autocompletion Multiple in dark theme.
 * (see "additional owners", or "disciplines" for sample.)
 */

.select2-container {
  max-width: 100%;
}

.pod-container
  .select2-container--default
  .select2-selection--single
  .select2-selection__placeholder,
.pod-container
  .select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove {
  color: #666;
}

body[data-admin-utc-offset] .select2-selection--multiple {
  background-color: var(--pod-background);
  border-color: var(--border-color);
}

body[data-admin-utc-offset] .select2-dropdown {
  background-color: var(--pod-background);
}

body[data-admin-utc-offset]
  .select2-container--open
  .select2-selection--multiple {
  border-color: var(--body-quiet-color);
}

body[data-admin-utc-offset] .select2-search--inline .select2-search__field {
  color: var(--pod-font-color);
}

body[data-admin-utc-offset]
  .select2-selection--multiple
  .select2-selection__choice,
body[data-admin-utc-offset]
  .select2-selection--multiple
  .select2-results__option[aria-selected="true"] {
  color: #333;
}

.select2-container--focus,
.cke_focus {
  box-shadow: 0 0 0 0.25rem rgb(var(--pod-primary-rgb) / 25%);
  border-radius: 5px;
}

/* overwrite default cke style for A11y */
.pod-container .cke_resizer {
  font-size: 1rem;
}

.select2-container--default.select2-container--focus
  .select2-selection--multiple.select2-selection {
  border: solid 1px var(--pod-primary);
}

/* end select2 multiple corrections */

/** channel form **/

#channel_form .selector,
#enrichment_group_form .selector {
  width: 100%;
}

#channel_form .selector select,
#enrichment_group_form .selector select {
  width: 100%;
}

#channel_form .selector-available,
#channel_form .selector-chosen,
#enrichment_group_form .selector-available,
#enrichment_group_form .selector-chosen {
  width: 88%;
}

@media screen and (min-width: 992px) {
  #channel_form .selector-available,
  #channel_form .selector-chosen,
  #enrichment_group_form .selector-available,
  #enrichment_group_form .selector-chosen {
    width: 47%;
  }
}

#channel_form .selector .selector-available input,
#enrichment_group_form .selector .selector-available input {
  width: 90%;
}

#channel_form .selector .selector-filter label,
#enrichment_group_form .selector .selector-filter label {
  margin-top: 0;
}

#channel_form .selector-available h2,
#channel_form .selector-chosen h2,
#enrichment_group_form .selector-available h2,
#enrichment_group_form .selector-chosen h2 {
  margin: 0;
  padding: 8px;
  font-weight: 400;
  font-size: 13px;
  text-align: left;
}