/* utilitaires globaux */

.bg-project {
    background-color: var(--primary) !important;
}

.text-project {
    color: var(--primary) !important;
}

.bg-project-secondary {
    background-color: var(--secondary) !important;
}

.text-project-secondary {
    color: var(--secondary) !important; 
}

[x-cloak] {
    display: none !important;
}

.col-0 {
  display: none;
}

.line-height-1 {
  line-height: 1.3;
}

body .page-title small {
  display: block;
  margin-left: 0px;
  margin-top: -5px;
  font-size: 70%;
}

body .page-title small:before {
  display: none;
}

body .content .content {
  padding: 0px;
}

@media (max-width: 575.98px) {
  body .content {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}

body .card-header,
.sidebar .card-footer,
body .navbar {
    border:  none;
}

.line-clamp-1 {
    display: -webkit-box;
    box-orient: vertical;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-clamp: 1;
    -webkit-line-clamp: 1;
}

.line-clamp-2 {
    display: -webkit-box;
    box-orient: vertical;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-clamp: 2;
    -webkit-line-clamp: 2;
}

.line-clamp-3 {
    display: -webkit-box;
    box-orient: vertical;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-clamp: 3;
    -webkit-line-clamp: 3;
}

.line-clamp-4 {
    display: -webkit-box;
    box-orient: vertical;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-clamp: 4;
    -webkit-line-clamp: 4;
}

.line-clamp-5 {
    display: -webkit-box;
    box-orient: vertical;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-clamp: 5;
    -webkit-line-clamp: 5;
}

/* apparence des formulaires */

*:focus {
  outline: none;
}

.btn-70 {
  width: 70px;
  height: 70px;
  padding: 0 !important;
}

.btn-70 i {
  font-size: 35px;
  line-height: 66px;
}

.btn.rounded-circle {
  text-align: center;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  width: 45px;
  height: 45px;
  line-height: 45px;
}

.btn.rounded-circle i {
  position: relative;
  top: -1px;
  font-size: inherit;
}

.btn.rounded-circle.btn-sm {
  width: 37px;
  height: 37px;
  line-height: 37px;
  font-size: 0.9rem;
}

.btn.rounded-circle.btn-lg {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 1.2rem;
}

select.form-control.is-invalid {
    background-position: right 18px center;
}

.form-control.active {
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

.select-disabled {
    appearance: none;
}

.slim-btn-remove {
  background-image: inherit !important;
}

.toggle-bar {
  cursor: pointer;
}

/* uniformise les champs select2 comme BS form-control */

.actions .select2-results>.select2-results__options {
  max-height: 350px;
}

/* classes recopiées de form-control BS4 */
.actions .select2-selection {
    height: calc(1.5em + 0.75rem + 2px);
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    border-color: #ced4da !important;
    border-radius: 0.25rem;
}

section.content form .select2-container {
    min-width: 50% !important;
    max-width: 100% !important;
}

/* Ajout temporaire CSS pour le dropdown des dates qui se retrouve sous la navbar.. */
.dropdown-menu {
  z-index: 10000;
  min-width: 280px;
}

.dropdown-menu .dropdown-item {
    padding: 0.5rem 1.5rem;
}

/* animations */

@keyframes autohide {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.auto-hide {
    animation: autohide 1s ease-in 2s forwards;
}

.loading-bar:before {
  display: block;
  content: "";
  background-color: #009EE2;
  height: 1px;
  overflow: hidden;
  animation-name: loading-card;
  animation-duration: 1s;
}

@keyframes loading-card {
  from { width: 0%; }
  to { width: 100%; }
}

@keyframes fadein {
    from {
      opacity: 0;
      margin-top: -10px;
    }
    to   {
      opacity: 1;
      margin-top: 0px;
    }
}

@keyframes loading {
    from {
      width: 0%;
    }
    to   {
      width: 100%;
    }
}

@keyframes scrolling {
    from {
      opacity: 0;
    }
    to   {
      opacity: 1;
    }
}

.anim-fadein {
  animation: fadein 1s;
  animation-fill-mode: both;
  transition: all 0.3s ease;
  animation-delay: 1s;
}

.anim-zoom {
  transition: all 0.3s ease;
}

.anim-zoom:not([disabled]):hover {
  box-shadow: 0px 0px 10px 1px rgba(14,39,68,0.2);
  transform: scale(1.05);
  transition: all 0.3s ease;
}

.anim-delay1 {
    animation-delay: 1s;
}

.anim-delay2 {
    animation-delay: 1.3s;
}

.anim-delay3 {
    animation-delay: 1.4s;
}

.anim-delay4 {
    animation-delay: 1.5s;
}

.anim-delay5 {
    animation-delay: 1.6s;
}
.anim-delay6 {
    animation-delay: 1.7s;
}

.anim-delay7 {
    animation-delay: 1.8s;
}

.anim-delay8 {
    animation-delay: 1.9s;
}

.anim-delay9 {
    animation-delay: 2s;
}

.anim-delay10 {
    animation-delay: 2.1s;
}

/* ABR, RSC options de tailles de textes inspirée de BS5 */

.fs-1 {
    font-size: calc(1.375rem + 1.5vw)!important;
}
.fs-2 {
    font-size: calc(1.325rem + .9vw)!important;
}
.fs-3 {
    font-size: calc(1.3rem + .6vw)!important;
}
.fs-4 {
    font-size: calc(1.275rem + .3vw)!important;
}
.fs-5 {
    font-size: 1.25rem!important;
}
.fs-6 {
    font-size: 1rem!important;
}

@media (min-width: 1200px) {
    .fs-1 {
        font-size: 2.5rem!important;
    }
    .fs-2 {
        font-size: 2rem!important;
    }
    .fs-3 {
        font-size: 1.75rem!important;
    }
    .fs-4 {
        font-size: 1.5rem!important;
    }
}

/* options d'opacité */

.opacity-1 {
  opacity: 0.1;
}
.opacity-2 {
  opacity: 0.2;
}
.opacity-3 {
  opacity: 0.3;
}
.opacity-4 {
  opacity: 0.4;
}
.opacity-5 {
  opacity: 0.5;
}
.opacity-6 {
  opacity: 0.6;
}
.opacity-7 {
  opacity: 0.7;
}
.opacity-8 {
  opacity: 0.8;
}
.opacity-9 {
  opacity: 0.9;
}

/* options de filtres des images */

.ig-nashville {
    -webkit-filter: sepia(0.4) saturate(1.5) contrast(0.9) brightness(1.1) hue-rotate(-15deg);
    filter: sepia(0.4) saturate(1.5) contrast(0.9) brightness(1.1) hue-rotate(-15deg);
}

.ig-hudson {
  -webkit-filter: contrast(1.2) brightness(0.9) hue-rotate(-10deg);
  filter: contrast(1.2) brightness(0.9) hue-rotate(-10deg);
}

.ig-amaro {
  -webkit-filter: hue-rotate(-10deg) contrast(0.9) brightness(1.1) saturate(1.5);
  filter: hue-rotate(-10deg) contrast(0.9) brightness(1.1) saturate(1.5);
}

.ig-walden {
  -webkit-filter: sepia(0.35) contrast(0.9) brightness(1.1) hue-rotate(-10deg) saturate(1.5);
  filter: sepia(0.35) contrast(0.9) brightness(1.1) hue-rotate(-10deg) saturate(1.5);
}

.ig-sierra {
  -webkit-filter: contrast(0.8) saturate(1.2) sepia(0.15);
  filter: contrast(0.8) saturate(1.2) sepia(0.15);
}

/* options d'affichage des images cover vs contain */

img.cover {
    object-fit: cover;
    transition:  all 1s ease-out;
}

img.contain {
    object-fit: contain;
}

img.position-top {
    object-position: 50% 0%;
}

a:hover img.position-top.cover {
    object-position: 50% 100%;
}

img.position-bottom {
    object-position: 50% 100%;
}

a:hover img.position-bottom.cover {
    object-position: 50% 0%;
}

/* appliquer sur un conteneur pour espacer les boutons d'action */

.space-x {
    margin-left: -0.25rem;
    margin-right: -0.25rem;
}

.space-x > * {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    white-space: nowrap;
}

.space-y > * {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    white-space: nowrap;
}

/* configuration du lien lire plus en mode responsive dans la sidebar */

.read-more {
    max-height: 185px;
    overflow:  hidden;
}

.read-more a {
    background:
        linear-gradient(0deg, rgba(255,255,255,1) 50%,
        rgba(255,255,255,0) 100%);
}

.read-more.open {
    max-height:  initial;
    overflow:  initial;
}

.read-more.open a {
    background: none;
}

@media (min-width: 1200px) {
    .read-more {
        max-height:  initial;
        overflow:  initial;
    }
}

/* bouton d'incitation au scroll */

.mousewheel {
  animation: scrolling 1s;
  animation-fill-mode: both;
    animation-delay: 5s;
  opacity:0;
}

.body-scroll .mousewheel  {
  display: none;
}

.mousewheel img {
  position: fixed;
  width: 40px;
  height: auto;
  margin-top: -130px;
  margin-left: -20px;
}

/* tuiles standards */

.tile {
    opacity:1;
    font-size: 21px;
    transition: all 0.3s ease;
    /*background-color: #ffffff;*/
}

.tile a:not(.btn):hover {
    color: inherit !important;
}

.tile[disabled] :not(label) * {
  opacity: 0.6;
  cursor: default;
}

.tile .sticker {
    position: absolute;
    width: 165px;
    height: 95px;
    overflow: hidden;
    opacity: 1;
    right: -2px;
    top: -2px;
}

.tile .sticker span {
    position: absolute;
    opacity: 1;
    display: block;
    top: 0;
    right: 0;
    opacity: 1;
    transform-origin: 50px 50px;
    transform: rotate(30deg);
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 30px;
    padding-left: 30px;
    white-space: nowrap;
    font-style: normal;
    font-size: 11px;
    width: 210px;
    text-align: center;
    margin-top: -5px;
    margin-right: -25px;
    box-shadow: 0px 0px 5px -2px rgba(0,0,0,0.75);
}

.tile-header, .tile-header-edit {
    height:40px;
}

.tile.edit-mode:hover .tile-header-edit {
    display: flex !important;
}

.tile.edit-mode:hover .tile-header {
    display: none !important;
}

.tile.edit-mode:hover .sticker {
    display: none !important;
}
/* personalisation de la navbar */

.navbar-lg-top .navbar-brand {
  height: 60px;
}

@media (min-width: 768px) {
  body.navbar-lg-top:not(.sidebar-xs) .navbar-brand {
    height: 100px;
    overflow: hidden;
  }
  body:not(.sidebar-xs).navbar-lg-top {
    padding-top: 100px;
  }
}

/* personnalisation de modules */

.bg-conversation {
  background-image: url("/img/comments-light.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.media-chat-scrollable {
  max-height: inherit;
  overflow: auto;
}

.profile-cover-img.medium {
  height : 15rem;
}

.profile-cover * {
    color: #ffffff;
}

#nav-sections {
  right: 0;
}

#nav-sections a {
  opacity: 0.5;
}

#nav-sections a.active {
  opacity: 0.9;
}

.sidebar.sidebar-light,
.tile[class*="bg-"] h1:not([class*="text-"]),
.card[class*="bg-"] h1:not([class*="text-"]),
.tile[class*="bg-"] h2:not([class*="text-"]),
.card[class*="bg-"] h2:not([class*="text-"]),
.tile[class*="bg-"] h3:not([class*="text-"]),
.card[class*="bg-"] h3:not([class*="text-"]),
.tile[class*="bg-"] h4:not([class*="text-"]),
.card[class*="bg-"] h4:not([class*="text-"]),
.tile[class*="bg-"] h5:not([class*="text-"]),
.card[class*="bg-"] h5:not([class*="text-"]),
.tile[class*="bg-"] h6:not([class*="text-"]),
.card[class*="bg-"] h6:not([class*="text-"]) {
    color: inherit;
}

/*
  RSC : fond blanc pour les <a> dans les messages
  RSC : pas de font folder sur les éléments dans la navigation
*/

.bg-danger a:not(.btn):not(.nav-link),
.bg-warning a:not(.btn):not(.nav-link),
.bg-success a:not(.btn):not(.nav-link),
.bg-info a:not(.btn):not(.nav-link) {
  color: inherit !important;
  font-weight: bolder;
}

/* ABR essais en cours pour rendre les tableaux responsive sans dédoublement des contenus

@media (max-width: 767.98px) {
    .table-responsive .table tr {
        display: grid;
        grid-template-columns: 3fr 3fr;
        grid-template-rows: 3fr;
        grid-column-gap: 1rem;
        align-items: start;
        padding: 1rem;
        border-top:  solid 1px #e2e8f0;

    }
    .table-responsive .table tr td,
    .table-responsive .table tr th {
        padding:  0px;
        border:  none;
    }
    .table-responsive .table tr td:nth-child(2),
    .table-responsive .table tr th:nth-child(2) {
        align-self: end;
        grid-column: 2 / span 2;
    }
    .table-responsive .table tr td:last-child,
    .table-responsive .table tr th:last-child {
        align-self: end;
        grid-column: 1 / span 3;
        padding-top:  15px;
    }
}
*/

/* Ajoute globalement couleurs bootstrap pour le background et le texte. */
.bg-blue {
    background-color: var(--blue) !important;
}
.bg-indigo {
    background-color: var(--indigo) !important;
}
.bg-purple {
    background-color: var(--purple) !important;
}
.bg-pink {
    background-color: var(--pink) !important;
}
.bg-red {
    background-color: var(--red) !important;
}
.bg-orange {
    background-color: var(--orange) !important;
}
.bg-yellow {
    background-color: var(--yellow) !important;
}
.bg-green {
    background-color: var(--green) !important;
}
.bg-teal {
    background-color: var(--teal) !important;
}
.bg-cyan {
    background-color: var(--cyan) !important;
}
.bg-white {
    background-color: var(--white) !important;
}
.bg-gray {
    background-color: var(--gray) !important;
}
.bg-gray-dark {
    background-color: var(--gray-dark) !important;
}

.text-blue {
    color: var(--blue) !important;
}
.text-indigo {
    color: var(--indigo) !important;
}
.text-purple {
    color: var(--purple) !important;
}
.text-pink {
    color: var(--pink) !important;
}
.text-red {
    color: var(--red) !important;
}
.text-orange {
    color: var(--orange) !important;
}
.text-yellow {
    color: var(--yellow) !important;
}
.text-green {
    color: var(--green) !important;
}
.text-teal {
    color: var(--teal) !important;
}
.text-cyan {
    color: var(--cyan) !important;
}
.text-white {
    color: var(--white) !important;
}
.text-gray {
    color: var(--gray) !important;
}
.text-gray-dark {
    color: var(--gray-dark) !important;
}

.border-blue {
    border-color: var(--blue) !important;
}
.border-indigo {
    border-color: var(--indigo) !important;
}
.border-purple {
    border-color: var(--purple) !important;
}
.border-pink {
    border-color: var(--pink) !important;
}
.border-red {
    border-color: var(--red) !important;
}
.border-orange {
    border-color: var(--orange) !important;
}
.border-yellow {
    border-color: var(--yellow) !important;
}
.border-green {
    border-color: var(--green) !important;
}
.border-teal {
    border-color: var(--teal) !important;
}
.border-cyan {
    border-color: var(--cyan) !important;
}
.border-white {
    border-color: var(--white) !important;
}
.border-gray {
    border-color: var(--gray) !important;
}
.border-gray-dark {
    border-color: var(--gray-dark) !important;
}

body .nav-tabs-content-manager > * > .nav-link.active {
    border-top-color: #dee2e6!important;
    font-weight: bold;
}

body .nav-tabs .nav-link.active {
    border-top-color: var(--secondary);
}

.search-bar {
    margin-top: 10vh;
    margin-bottom: -10vh;
}

.page-header h1,
.page-header h2,
.page-header h3,
.page-header h4,
.page-header h5,
.page-header h6,
.page-header .h1,
.page-header .h2,
.page-header .h3,
.page-header .h4,
.page-header .h5,
.page-header .h6 {
    color: inherit !important;
}

.rounded-2xl {
    border-radius: 0.6rem !important;
}

.text-line-through {
    text-decoration: line-through;
}