:root {
   --dv-toolbar-height: 40px;
   --dv-image-padding: 0.4rem;
   --dv-image-padding-bottom: 80px; // --dv-toolbar-height * 2
}

.f-carousel {

}



.f-carousel__viewport {
   box-sizing:content-box;
   padding:0;
   border:0;
}
.f-carousel__toolbar.is-absolute {
   bottom:10px;
   top:unset;
}
   

#monCarousel .f-thumbs__viewport {
        max-height: 150px;
        overflow: auto;
      }
      
#monCarousel {
        --f-carousel-gap: 0px;
        --f-carousel-slide-height: 100%;
        height:auto;
--f-spinner-border-width: 0px;
--f-spinner-height: 50px;
--f-spinner-width: 50px;
        margin-top: 1.5rem;
        margin-bottom: 0rem;
        padding: var(--dv-image-padding);
        padding-bottom: var(--dv-image-padding-bottom);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.09);
}


.f-carousel__slide {
   height:100%;
}

.f-spinner {
/*    height:100px; */
}


.f-thumbs {

  --f-thumbs-gap: 2px;
  --f-thumbs-padding-x: 18px;
  --f-thumbs-padding-y: 18px;
  --f-thumbs-bg: transparent;
  
  --f-thumb-transform: scale(0.7);
  --f-thumb-hover-transform: scale(1);
  --f-thumb-selected-transform: scale(1);
  --f-thumb-width: 96px;
  --f-thumb-height: 96px;

  --f-thumb-opacity: 0.5;
  --f-thumb-selected-opacity: 1;
  
  --f-thumb-border: 8px #000;
  
  --f-thumb-shadow: red;
  
  --f-thumb-focus-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  --f-thumb-hover-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  --f-thumb-selected-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}


@media (hover: none) {
}