/****************************************/
/***          CSS Cinechologue        ***/
/****************************************/

@import "media_queries.css";

:root {
    --acteur_displayLine_bgColor: rgba(255, 255, 255, 0.6);
}



/* Anton font latin */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/src/fonts/Anton.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}




body {
margin:0px;
overflow:hidden;
/* touch-action:none; */
}

.pointer {
    cursor:pointer;
}

.font_inkfree{
    font-style: oblique;
    /* font-family: Ink Free; */
    font-family: "Merriweather" , serif;
}

.role_line{
    font-style: oblique;
    /*font-family: Ink Free;*/
    font-family: "Merriweather" , serif;
    font-weight: bold;
/*     color: #454545; */
    letter-spacing: 1.5px;
}

h1 {
    font-size: 25px;
    font-family: Anton;
    color: #333232;
    font-weight: lighter;
}

h2 {
    font-size: 1.4rem;
}

h3 {
/*     font-size: 20px; */
    margin-top:10px;
}

#scrollScreen{
    position:absolute;
}

#fond{
    height:100vh;
    width:100vw;
}

.background_logo_container{
    position: absolute;
    z-index: -999;
    width: 100vw;
    height: 100vh;
    opacity: 0.12;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: stretch;
}

/* FORMATAGE DES LAYOUT */
.layout{
    padding:0px;
    position:absolute;
    z-index:50;
    /* height:100vh; */ 
  height: 100dvh;
    width:100vw;
/* touch-action:none; */
}

/* Fallback pour navigateurs anciens */
@supports not (height: 100dvh) {
  .layout {
    height: 100vh;
  }
}


.layoutBG{
    height:calc( 100vh - 2px);
    width:calc( 100vw - 2px);
}

#mainLayout{
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

#acteursLayout{
    z-index:40;
    top: -100vh;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

#filmsLayout{
    z-index:40;
    top: 0px;
    bottom: 0px;
    left: -100vw;
    right: 0px;
}


#consultationLayout{
    z-index:60;
    top: 0px;
    bottom: 0px;
    left: 100vw;
    right: 0px;
}

#profilLayout{
    top: 100vh;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

.layoutContent{
    position:absolute;
    padding:0px;
    text-align:center;
    height:100vh;
    width:100vw;
}

/* FORMATAGE DES NAV */
.layoutContent nav{
text-align:center;
margin:0px;
position:absolute;
cursor:pointer;
/* font-family:MV Boli; */ 
    font-family: "Merriweather" , serif;
font-size:14px;
color:#f1f1f1;
}

.layoutContent nav:hover{
background-color:white;
opacity:0.7;
font-weight:bold;
color:#000000;
}

.layoutButtonSide{
display:none;
text-shadow: 0 0 11px #ffffff;
}

.layoutButtonSideHdown{
height:18px;
bottom:0px;
padding-top: 3px;
}

.layoutButtonSideHup{
height:18px;
top:0px;
}

.layoutButtonSideVright{
width:18px;
top:20px;
right:0px;
}


.layoutButtonSideVright .layoutButtonSideVText{
    padding-left: 3px;
}

.layoutButtonSideVleft{
width:18px;
top:20px;
left:1px;
}

.layoutButtonSideV{

}

.layoutButtonSideVText{
    height: 100%;
    line-height:14px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.layoutButtonContentWrapper
{
    padding-top: 1px;
}

/* FORMATAGE LAEE */
.ligneSuggestActeurs:hover {
background-color:blue;
color:white;
font-weight:bold;
}

.ligneSuggestActeurs {
cursor:pointer;
width:200px;
background-color:red;
z-index:300;
word-wrap:break-word;
}

.window_container{
border:1px solid #559FFE;
border-width:0px;
border-radius: 5px;
width:100%;
height:100%;
}

.LayoutContentContainer {
/*     overflow-x : auto; */
}

.sidebar_hide_button
{
    font-size:30px;
    color: #cfcdcd;
}

.sidebar_menu_element{
    color: #cfcdcd;
/*     border-bottom: 1px solid #559FFE; */
    margin-top: 5px;
    padding: 2px;
    padding-top: 5px;
    padding-bottom: 8px;
    font-size: 1.2rem;
    /* font-family: MV Boli; */
    /* font-family: Impact; */
    font-weight: bold;
    font-style: oblique;
    /* font-family: Ink Free;*/ 
    font-family: "Merriweather" , serif;
    text-align: left;
    word-break: auto-phrase;
}

.sidebar_menu_section{
    color: #9f9f9f;
    padding-top: 5px;
    padding-bottom: 8px;
    font-weight: bold;
    font-style: oblique;
    /* font-family: Ink Free;*/ 
    font-family: "Merriweather" , serif;
    text-align: center;
    border-top: 1px solid #559FFE;
    font-size: 1.4rem;
}

.sidebar_menu_element a{
    color:#cfcdcd;
    text-decoration:none;
}

.sidebar_menu_element_active{
    font-family: Anton;
    font-weight: normal;
    color:white;
}

.sidebar_menu_element_active a{
    color:white;
}

.container{
    padding-left: 0px;
}

.LayoutContent_SideMenu
{
    border-right: 1px solid #559FFE;
    width: 200px;
    float: left;
    position: absolute;
    display: none;
    z-index: 100;
    background-color: rgba(0, 0, 255, 0.88);
}

.LayoutContent_SideMenu_Wrapper
{
/*     padding:5px; */
/*     word-break:break-all; */
    max-width:200px;
}

.LayoutContent_InnerContent
{
    transition: transform 0.3s;
    transform: rotateY(0deg);
/*     word-break:break-all; */
    overflow-y:auto;
}

.LayoutContent_FormContainer {
/*     height: 77px;  */
    z-index: 10;
}

.layoutContent_formContainerItem{
    padding-bottom: 5px;
    margin-left:4px;
    margin-right:4px;
}

.layoutContent_formContainer_input{
/*     min-width:200px; */
}

.layoutContent_formContainer_buttons{
    flex: 0 0 200px;
}

.layoutContent_responsive_Control :is(input, select, button){
    width:clamp(200px,200px,200px);
}

.layoutContent_responsive_halfSizeControl > :is(input, select, button){
    width:clamp(100px,100px,200px);
}


.flexWrapper{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
}

.flexWrapper222{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.flexWrapper_firstItem{
    justify-content: left;
}

.flexWrapper__lastItem{
    justify-content: flex-end;
}

.subsection_title{
    text-align:left;
    font-size:18px;
    padding-left:15px;
    padding-top:5px;
}

.acteurListDisplay{
    margin-top:10px;
    padding-left:10px;
    padding-right:10px;    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.acteur_displayLine.span{
    min-width: 200px;    
}

.acteur_displayLine:nth-child(odd){
    margin-right: 20px;    
}

.acteur_displayLine:nth-child(even){
    margin-left: 20px;    
}

.acteur_displayLine{

    margin-bottom:10px;
    padding:10px;
    height:fit-content;
    position:relative;
    width: clamp(200px, 90%, 500px);
    margin-right: 5px;
}

.acteur_displayLine_contentPreWrapper{
    
}

.acteur_displayLine_contentWrapper{
    overflow:hidden;
    border: 1px solid black;
    border-radius:7px;
    background-color:rgba(212,213,233,1);
    padding:5px;
}




.acteur_displayLine_name{
    font-weight:bold;
/*     float:left; */
    cursor:pointer;
    font-style: italic;
    font-size: 21px;
}

.acteur_displayLine_name_href{
    color:inherit;
    text-decoration:none;
}

.acteur_displayLine_name_href:hover{
    color:inherit;
    text-decoration:none;
}

.acteur_displayLine_rolespan{
    color:#6b6b6b;
}

.acteur_displayLine_name:hover{
/*     font-weight:bold; */
    font-style: normal;
    color:#535353;
}

.acteur_displayLine_firstLine{
    margin-bottom:5px;
}

.acteur_displayLine_secondLine{
/*     float:right; */
}

.acteur_displayLine_mainTable{
    width:100%;
}

.acteur_displayLine_innerRow{
    margin-bottom:5px;
}

.acteur_displayLine_multiColumnsRow{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
}

.acteur_displayLine_role_container{
/*     float:left; */
    margin:0px 10px 0px 10px;
    text-align:center;
}

.acteur_displayLine_button{
    cursor:pointer;
}

.acteur_displayLine_icon{
    margin-left:2px;
    margin-right:2px;
}

.acteur_displayLine_buttonsColumn{
    /*min-width:80px;*/
}

.acteur_displayLine_button:hover{
    font-weight:bold;
}

.acteur_isFavourited{
/*     border-color:orange; */
    border-width:2px;
}

.acteurDetails_timelineOverview_container{
    overflow-x:auto;
    word-break: keep-all;
    margin:10px;
    padding:5px;
    border:solid 1px black;
    border-radius:5px;
}

.acteurDetails_carriereButton{
    padding-left:10px;
}

.acteurDetails_favoriButton{
    padding:5px;
    border:solid 1px black;
    border-radius:10px;
}

.acteurDetails_TO_table
{
    margin-left: auto;
    margin-right: auto;
}

.acteurDetails_TO_firstRows
{
    vertical-align: bottom;
    text-align:center;
}

.acteurDetails_TO_bars
{
    background-color:blue;
    width:40px;
}

.acteurDetails_TO_secondRows
{
    vertical-align: middle;
    text-align:center;
}

.acteurDetails_article_container {
    background-color: #d4d5e9cc;
    padding: 5px;
    border-radius: 5px;
    margin-top: 5px;
    /* margin-left: 35px; */
    margin-left: 15px;
    margin-right: 15px;
}

.filmListDisplay {
    padding-left: 10px;
}

.film_displayLine{
    
/*     container-type: inline-size; */
/*     container-name: film_displayLine_secondRow_container;     */
    margin-bottom:17px;
    margin-top:8px;
}

.film_displayLine_firstBorder{
    border:3px solid black;
    border-radius:4px;
    background-color:rgba(255,255,255,0.6);
}


.film_displayLine_secondBorder{
    border:3px solid black;
    border-style:dashed;
}

.film_displayLine_thirdBorder{
    border:3px solid black;
    padding:5px;
}

.film_displayLine_filmTitle{
    cursor:pointer;
/*     font-size:20px; */
    font-size: 16px;
    margin-bottom:7px;
    margin-top: 4px;
}

.film_displayLine_filmTitle:hover {
    color:#535353;
}


.film_displayLine_filmTitle a{
    color:inherit;
    text-decoration:none;
}

.film_displayLine_filmTitle a:hover{
    color:inherit;
    text-decoration:none;
}

.film_displayLine_filmTitle a:visited{
    color:inherit;
    text-decoration:none;
}

.film_displayLine_secondRow{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-between;
    align-items: center;
    width: 100%;
    justify-content: space-around;
}


.film_displayLine_thirdRow{
    cursor:pointer;
    margin-top:10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-between;
    align-items: center;
    width: 100%;
    justify-content: center;
}

.film_displayLine_reaction_container{
    margin-left: 5px;
    margin-right: 5px;
}

.film_displayLine_img_reaction{
    width:35px;
}

.film_displayLine_actionsContainer{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
}


@container (min-width: 400px) {

}


.cinechologue_clapetWrapper{
    border:1px solid black;
}

.cinechologue_clapetHaut {
    border-top: 16px solid transparent;
    border-image: 16 repeating-linear-gradient(45deg, black 0, black 1em, white 0, white 2em);
}

.cinechologue_clapetBas {
    border-top: 16px solid transparent;
    border-image: 16 repeating-linear-gradient(315deg, white 0, white 1em, black 0, black 2em);
}

.cinechologue_clapetContent{
    border-top:1px solid black;
    padding:10px;
    background-color:rgb(255,255,255,0.7);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
/*     color:white; */
}

.mobile_menu_button_container {
    display:none;
    float: left;
    margin-top: 7px;
}

.mobile_menu_button {
    padding: 5px;
    font-size: 25px;
}

.article_description {
    /* font-family: 'Courier New', Courier, monospace;*/ 
    font-family: "Merriweather" , serif;
}

/** mCustomScrollBar correction*/
.mCSB_inside > .mCSB_container {
    margin-right: 17px;
}

.LayoutContent_InnerContent .mCSB_container{
    margin-right:20px;
}

.moduleContainer{
/*     display: none; */
    min-width: 370px;
}

.moduleFullHeightContainer{
    min-width: 370px;
    display: none;
}

.moduleContainer:not(.activeModule) {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    height: 0 !important;
    overflow: hidden !important;
}

.moduleContainer h1{
    padding-top: 5px;
    padding-left: 5px;
}

.activeModule{
/*     display:block; */
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    height: auto !important;
    overflow: visible !important;
}

.activeFullHeightModule{
    display:block;
}

.layout_resultList_no_resultLine{
    display:none;
}

.layout_resultList_no_resultLine_displayed
{
    display:block;
}

.module_section_carriere{
    padding-left: 35px;
    padding-right: 35px;
    display:none
}

.acteurDetails_carriereContainer{
    background-color:rgb(255, 255, 255, 0.7);
    border:1px solid black;
    width:100%;
}

.acteurDetails_filmList_container
{
    text-align:left;
    padding-left: 35px;
    padding-right: 35px;
}

.acteurDetails_filmList_item{
    text-align:center;
}

.acteurDetails_GOcanvasContainer{
    width:100%;
/*     height:300px; */
    padding:10px 0px 10px 0px;
    display: flex;
    justify-content: center;
}



.filmDetails_acteurList_container
{
    text-align:left;
    padding-left: 35px;
/*     padding-right: 35px; */
}

.filmDetails_img_reaction{
    width:50px;
}

.module_section_linksAndButtons 
{
    
}

.module_section_linksAndButtons a
{
    text-decoration: none;
    color:inherit;
}

.link_unstyled{
    text-decoration: none;
    color:inherit;    
}

.link_unstyled:hover{
    text-decoration: none;
    color:inherit;    
}

.link_unstyled:visited{
    text-decoration: none;
    color:inherit;
}

.button_link{
    cursor:pointer;
    background-color:rgba(180,218,255,0.7);
    border:1px solid black;
    border-radius:15px;
    padding:5px;
    margin-top:5px;
    word-break: keep-all;    
}

.button_link:hover{
    background-color:rgba(180,218,255,1);
    2px solid black;
    color:black;
}

.button_link:visited{
}

.button_inline{
    display:inline-block;
}

.film_displayLine_filmTitle{
    cursor:pointer;
}

.centered_text{
    text-align:center;
}

        
.j2s_negativeBorder{
  background: radial-gradient(circle at 0 100%, rgba(11, 111, 111, 0) 14px,var(--acteur_displayLine_bgColor) 15px), 
              radial-gradient(circle at 100% 100%, rgba(111, 0, 0, 0) 14px, var(--acteur_displayLine_bgColor) 15px), 
              radial-gradient(circle at 100% 0, rgba(1, 111, 0, 0) 14px, var(--acteur_displayLine_bgColor) 15px), 
              radial-gradient(circle at 0 0, rgba(204, 111, 0, 0) 14px, var(--acteur_displayLine_bgColor) 15px);
  background-position: bottom left, bottom right, top right, top left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  padding: 14px;
}


.pageNavigationButtons_container {
    display: flex;
    justify-content: space-evenly;
    margin-bottom:5px;
}

.canvas_bilan_cinechologique {
    width:Clamp(300px,500px,500px);
    min-height:400px;
}


.canvas_bilan_cinechologique > canvas{
    display:block;
}

.canvas_bilan_for_download{
    width:1000px;
    height:1400px;
    visibility:hidden;
    z-index:-10000; 
    position: absolute;
}

.module_CBC_button_container{
    padding-bottom:15px;
}

.module_CBC_individual_canvas_container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}

.pipopaz_papa{
    overflow-x:auto;
}

.pipopaz{
    
    min-width:1110px;
    max-width:1450px;
}

.module_CBC_compare_canvas_container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.mcla_buttonsContainer{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.mcla_matchingResult_container{
/*     position:relative; */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top:15px;

}

.mcla_line{
    display:flex;
    position:relative;
    width:80%;
}

.mcla_line_content{
    
    min-width: 35%;
}

.mcla_matchingResult_container .mcla_line:nth-child(odd){
justify-content: flex-start; 
}


.mcla_matchingResult_container .mcla_line:nth-child(even){
justify-content: flex-end;
}

.mcla_line_background_wrapper{
    position:absolute;
    width:100%;
    height:100%;
    z-index:-100;
}

.mcla_line_background_quarter{
    position:absolute;
    width:50%;
    height:50%;
}

.mcla_line_background_eighth{
    position:absolute;
    height:100%;
    width:50%;
}


.mcla_line_background_eighth_1{
    left:0px;
}

.mcla_line_background_eighth_2{
    right:0px;
}

.mcla_line_background_A{
    top:0px;
    left:0px;
}

.mcla_line_background_B{
    top:0px;
    right:0px;
}

.mcla_line_background_C{
    bottom:0px;
    left:0px;
}

.mcla_line_background_D{
    bottom:0px;
    right:0px;
}

.mcla_line_background_eight_horizontal_active{
    border-right:3px solid black;    
}

.mcla_line_background_eight_horizontalLeft_active{
    border-left:3px solid black;    
}

.mcla_line_background_eight_vertical_active{
    border-bottom:3px solid black;
}

.mcla_matchingResult_container .mcla_line:last-child .mcla_line_background_eight_horizontalLeft_active{
    border-left:0px solid black;    
} 

.mcla_matchingResult_container .mcla_line:first-child .mcla_line_background_eight_vertical_active{
    border-bottom:0px solid black;
}

.mcla_matchingResult_container .mcla_line:first-child .mcla_line_background_eight_horizontal_active{
    border-right:0px solid black;    
}

.mcla_line_content .cinechologue_clapetContent{
    background-color: rgb(255 255 255);
}

.mgd_contentContainer{
    background-color:white;
    padding:20px;
    max-width:800px;
    margin: 0 auto;
}

.component_acteur_selection_button_formContainer{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.component_asb_acteurLine{
    text-align: center;
    font-style: italic;
    font-size: 1.5em;
    cursor: pointer;
    margin-top: 5px;
    margin-bottom: 5px;
}

.component_asb_acteurLine:hover{
    font-weight:bold;
}

.component_asb_acteurList_container{
    max-height: 500px;
    overflow-x: auto;
    margin-top:5px;
    margin-top:5px;
}

.mcla_line_content .acteur_displayLine {
    margin-top: 10px;
}

.mcla_film_communs_container{
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.mcrf_result_container{
    
}

.mcrf_result_actions_container{
    margin-top:10px;
}

.btn-purple{
  background-color: #aa04d3;
  color: white;
  font-weight: bold;
  border: none;

}

.btn-seen{
  background-color: green;
  color: white;
  font-weight: bold;
  border: none;

}

.btn-a_voir{
  background-color: #f96731;
  color: white;
  font-weight: bold;
  border: none;

}

.gif_sad_van_der_beek{
    width: 200px;
    margin:7px;
}

.component_mff_genres_container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-around;
    align-items: center;
}

.component_mff_annees_container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom:10px;
}

.component_mff_genre{
    border: 1px solid grey;
    padding: 8px;
    padding-top: 3px;
    padding-bottom: 5px;
    border-radius: 20px;
    font-size: 1.3em;
    margin-top:3px;
    margin-bottom:3px;
    cursor:pointer;
}

.c_mff_activeGenre{
    background-color:#069f09;
    border-color:#137703;
    font-style:italic;
    color:white;
    font-weight:bold;
}

.c_mff_sectionTitle{
    margin-top:2px;
}

.layout_article{
/*     word-break:break-all; */
/*     padding: 2px; */
/*     border: 1px solid black; */
/*     border-radius: 5px; */
}


.layout_article {
    word-break: break-word;
    padding: 10px 15px 10px 15px;
    border: 1px solid #e3e3e3;
    /* border-radius: 5px; */
/*     border-width: 5px; */
/*     border-style: double; */
    background-color: black;
    color: #ffffff;
    /*font-family: Ink Free;*/
    font-family: "Merriweather" , serif;
}

.layout_article_stretchedHeight{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: nowrap;
    height: 100%;
}


.layout_article p {
    text-align: justify;
    justify-content: center;
    font-size: 1.04rem;
}

.layout_article_title {
    font-size:1.70rem;
    font-style: oblique;
}

/************************************************/
/************** TIMELINE ELEMENT ****************/
/************************************************/

.timeline_element {
  border-top: 3px solid;
  border-image: linear-gradient(to right, #743ad5 0%, #d53a9d 100%);
  border-image-slice: 1;
  border-width: 3px;
  margin: 0;
  padding: 20px;
  position: relative;  
}

.timeline_element::before {
    content: attr(date);
    position: absolute;
    top:-15px;
    left: 50%;
    border-radius: 50%;
    padding: 6px;
    height: 1.25em;
    width: auto;
    min-width:10px;
    background-color: rgba(0,0,0,0.7);
    text-align: center;
    line-height: 1.25em;
    color: white;
    font-size: 1em;
  }

.timeline_element:nth-child(even) {
  border-right: 3px solid;
  padding-left: 0;
}

.timeline_element:nth-child(even) .film_displayLine_firstBorder{
    margin-right:15px;
}
    
.timeline_element:nth-child(even)::before {
/*   left: 100%;  */
  margin-left: -20px;
}

.timeline_element:nth-child(odd) {
  border-left: 3px solid;
  padding-right: 0;
}


.timeline_element:nth-child(odd) .film_displayLine_firstBorder{
    margin-left:15px;
}
.timeline_element:nth-child(odd)::before {
/*     right: 100%;  */
    margin-right: -20px;
  }

.timeline_element:first-child {
  border-top: 0;
  border-top-right-radius:0;
  border-top-left-radius:0;
}

.timeline_element:last-child {
  border-bottom-right-radius:0;
  border-bottom-left-radius:0;
}

/************************/
/** Boostrap correction */
/************************/
     html{
        /*font-family: "Times New Roman";*/
    	font-family: "Merriweather" , serif;
     }
     body{
        /*font-family: "Times New Roman";*/
    	font-family: "Merriweather" , serif;
        line-height:normal;
     }

.h3, h3 {
    font-size: 1.70rem;
}

    *{
      -webkit-box-sizing: content-box;
         -moz-box-sizing: content-box;
              box-sizing: content-box;
    }
    *:before,
    *:after {
      -webkit-box-sizing: content-box;
         -moz-box-sizing: content-box;
              box-sizing: content-box;
    }
    
    .bootstrap-input{
        height: auto;
        padding: 0px;
        padding-left: 4px;
        text-align:center;
    }
    
    .bootstrap-button{
        height: auto;
        padding: 0px;
        padding-left: 4px;
        padding-right: 4px;
    }
    
    .search_button_loading_icon{
        width: 28px;
        cursor: wait;
    }
    
    
    .unstyledHref{
        color:inherit;
        text-decoration:none;
    }
    
    .unstyledHref:hover{
        color:inherit;
        text-decoration:none;
    }
    .unstyledHref:visited{
        color:inherit;
        text-decoration:none;
    }
    
    /** has MQ*/
    .search_button{
        width: 40px;
        font-size: 18px;
    }
    
    .searchForm_button{
        width: 40px;
        font-size: 18px;
    }
    
    .row {
        margin-right: 0px;
        margin-left: 0px;
    }
    
    .custom-select:selected{
        font-weight:bold;
    }
    
    .module_section_container{
 
    }
    
    .flexbox_centeredContent{
        justify-content: center;
    }
    
    .dropdown-item{
        width: auto;
    }
    
    .filmDetails_reactionBox_container{
        background-color:#d4d5e9cc;
        padding:5px;
        border-radius:5px;
        margin-top:5px;
/*         margin-left: 35px; */
        margin-left:15px;
        margin-right:15px;
    }
    
    .filmDetails_reactionBox {
        display:inline-block;
        min-width:60px;
        margin-left:4px;
        margin-right:4px;
        padding:4px;
        margin-bottom: 4px;
        cursor:pointer;
    }
    
    .filmDetails_reactionBox:hover{
        font-weight:bold;
    }
    
    .filmDetails_userDataBox{
        cursor:pointer;
        margin-left: 15px;
        margin-right: 15px;
        min-width:40px;
    }
    
    .filmDetails_userDataBox:hover{
        font-weight:bold;
    }
    
    .filmDetails_userDataBox_checked{
        border:1px solid #6b6b6b;
        border-radius:4px;
        background-color:#ffffffde;
        font-weight:bold;
        width: fit-content;
        padding: 5px;
    }
    
    .filmDetails_reactionBox:hover {
    
    }
    
    .filmDetails_reactionBox_checked {
        border:1px solid #4b4a4a;
        border-radius:4px;
        background-color:#f1f1f1ab;
        font-weight:bold;
    }
    
    .LayoutContent_SideMenu .mCSB_container
    {
        margin-right: 0px;
    }
    
    .filmVus_progressBar {
      width: 40%;
      height: 20px;
      animation: progressBarAnimation 4s infinite ease-in-out;
/*         border-radius:20px; */
    }
    
    .filmVus_progressBar_container {
        width: 38vw;
        background-color:white;
        padding:2px;
        border: 1px solid #1c0e6d;
/*         border-radius:20px; */
    }
    
    .acteurDetails_progressContainer{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        padding-bottom: 4px;
    }
    
    .module_content_container{
        background-color: #d4d5e9cc;
        padding: 5px;
        border-radius: 5px;
        margin-top: 5px;
        /* margin-left: 35px; */
        margin-left: 15px;
        margin-right: 15px;
    }
    
    .module_content_container_flexContent{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }
    
    .module_content_errorLabel{
        font-weight:bold;
        color:red;
        display:none;
        margin: 3px;
        border: 1px solid red;
        border-radius: 5px;
        padding: 6px;
        background-color: white;
        word-break: break-word;
    }
    
    .module_content_errorLabel_displayed{
        display:block;
    }
    
    
    .module_content_input_text{
        background-color: #ffffff;
        height: auto;
        padding: 0px;
        padding-left: 4px;
        margin-bottom:8px;
        text-align: center;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: .25rem;
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }

    .module_content_input_text:focus {
        outline: 0;
        border-color : #5f7d8b;
        background-color:#FFFFFF;
    
    }

    
/***************************************/
/************ MOBILE MENU ***********/
/***************************************/
#mobileMenu{
    position:absolute;
    display:none;
    width:100%;
    height:100%;
}

.mobileMenu_content{
    position:absolute;
    width:200px;
    background-color:#0000ffe3;
    height:100%;
    z-index:1000;
}

.closing_overlay{
    position:absolute;
    display:none;
    width:100%;
    height:100%;
    background-color:#11132f4f;
    z-index:999;
}

/***************************************/
/************ LOGIN MODULE ***********/
/***************************************/
#loginModule_container{
    position:absolute;
    visibility:hidden;
    width:100%;
    height:100%;
    align-items: center;
    justify-content: center;
}

.loginModule_overlay{
    position:absolute;
    width:100%;
    height:100%;
    background-color:#11132f8f;
    z-index:1001;
}

.loginModuleShown{
    display:flex;
}

.loginModuleHidden{
    display:none;
}

.loginModule_content{  
    display: flex;
    align-items: center;
    justify-content: center;  
    background-color:#FFFFFF;
    padding:15px;
    text-align: center;
    border:1px solid black;
    z-index:1002;
    border-radius: 4px;
}

.loginModule_wrapper{
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.loginModule_content input{  
/*     display: block; */
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
    
.loginModule_content .submit{
    visibility:hidden;    
}

.loginModuleButton{
    margin-bottom: 5px;
}

.loginStateBox{
    border-top: 1px solid #559FFE;
    padding: 7px;
    word-wrap: break-word;
    word-break: break-all;
}
    
.loginStateBox_connectButton{
    cursor: pointer;
    background-color: #ffffffba;
    border-radius: 20px;
    /*font-family: cursive;*/
    font-family: "Merriweather" , serif;
    color: #45464d;
}
    
.LoginStateBox_profileButton{
/*     padding: 7px; */
    /*font-family: cursive;*/
    font-family: "Merriweather" , serif;
    color: #ffffff;
}

.loginStateBox_connectButton:hover {
    background-color: #ffffff;
    color: black;
    
}


.loginModule_errorLabel{
    font-weight:bold;
    color:red;
    display:none;
    font-size: small;
    margin: 3px;
    border: 1px solid red;
    border-radius: 5px;
    padding: 3px;
    background-color: #ff062c1f;
    width: 200px;
    word-break: break-word;
}

.loginModule_errorLabel_displayed{
    display:block;
}


/***************************************/
/************ TOAST  ***********/
/***************************************/

#toastContainer {
    position: absolute;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    width: 100vw;
}

.customToast {
    /* display: none; */
    position: relative;
    z-index : 9000;
    margin-top: 20px;
    color: #f1f1f1;
    width: 250px;
    text-align: center;
    padding: 10px;
    border: 1px solid;
    font-size: 1.2em;
/*     visibility:hidden; */
    /* box-shadow: 2px 2px 1px 1px #23232382; */
    border-radius: 5px;
}

.infoToast {
    background-color: #3f28fff0;
    border-color: #170d87d9;
}

.errorToast {
    background-color: #e30707;
    border-color: #fdcbcbef;
}

.successToast {
    background-color: #33e728eb;
    border-color: #0d7b24eb;
    color: #02370deb;
}

.warningToast{
    background-color: #ffa500e0;
    color: black;
    border-color: #a17c3abf;
}

/*
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}
*/

.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active{
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}

/* Obligatoire pour <transition-group> */
.slide-fade-move {
  transition: transform .4s ease;
}



/***************************************/
/************ GLOBALMODAL  ***********/
/***************************************/

#globalModal{
/*     position:absolute; */
/*     visibility:hidden; */
    align-items: center;
    justify-content: center;
    display:flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
    width:100vw;
    height:100vh;
}

.globalModal_overlay{
    position:absolute;
    width:100%;
    height:100%;
    background-color:#11132f8f;
    z-index:1001;
}

.globalModal_content{  
    display: none;
    align-items: stretch;
    justify-content: center;  
    background-color:#FFFFFF;
    text-align: center;
    border:1px solid black;
    z-index:1002;
    border-radius: 4px;
    max-width: 300px;
    word-break: break-word;
    flex-direction: column;
    flex-wrap: nowrap;
}
.globalModalDisplayed{
    display:flex;
}

.globalModalHidden{
    display:none;
}



.globalModal_titleWrapper{
    border-bottom:1px solid #49494947;
}

.globalModal_title{
    padding-top:10px;
    padding-bottom:5px;;
    font-size:1.7rem;
    align-items: stretch;
}

.globalModal_text{
    padding:10px;
    overflow-y: auto;
    max-height: 500px;
    
}

.globalModal_actionsWrapper{
    border-top:1px solid #49494947;
}

.globalModal_actions{
    padding:5px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-evenly;
    align-items: center;
}
/***************************************/
/************ ANIMATION ***********/
/***************************************/
    
    .button_highlightened{
        border-color:white;
        border-size:2px;
    }
    
    .bounce-enter-active {
      animation: bounce-in 0.5s;
    }
    .bounce-leave-active {
      animation: bounce-in 0.5s reverse;
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      50% {
        transform: scale(1.25);
      }
      100% {
        transform: scale(1);
      }
    }
    
/***************************************/
/************ DEBUG ZONE ***********/
/***************************************/
    
#dbz{
/*     display:none; */
    z-index:9000;
    position:absolute;
    width:100%;
    background-color:rgba(255, 0, 0, 0.7);
    box-shadow:2px 2px 2px;
    color:white;
}

.dbz_zone{
    visibility:hidden;
    
}

.dbz_hidden{
    display:none;
}

.dbz_shown{
    visibility:visible;
    display:block;
    
}

.dbz_mediaqueries_debug_case{
    display:none;
}
    
/***************************************/
/************ LAYOUT STYLING ***********/
/***************************************/
    
.layoutBG{
opacity:0.4;
border-radius:10px;
border:1px solid black;
position:absolute;
}

#accueilLayoutBg{
/* background-color:#40B7FE; */
background-color:#000000;
}

#accueil_window_container{
/* border-color:#197EFF; */
/* background-color:#000000; */
}

#LAEELayoutBg{
/* background-color:#3DFB56; */
background-color:#000000;
}

#profilLayoutBg{
/* background-color:#673DFB; */
background-color:#000000;
}

#acteursLayoutBg{
background-color:#000000;
}

#filmsLayoutBg{
/* background-color:#686CDB; */
background-color:#000000;
}
    
.displayed {
    display:block;
}
    
.not_displayed {
    display:block;
}

.errorSpanContainer{
    margin: 3px;
    border: 1px solid red;
    border-radius: 5px;
    padding: 3px;
    background-color: #ff062c1f;
}

.errorSpan{
    color:red;
    font-weight:bold;
}

    
/***************************************/
/************   COMPONENTS   ***********/
/***************************************/

.component_dropdown_select_checkbox li{
}

.component_dropdown_select_checkbox li>label{

}

.component_dropdown_select_checkbox li>input[type='checkbox']{
   margin-right:4px;
   cursor:pointer;
}

.component_dropdown_select_checkbox{
    
}

.component_contactbox{
    border: 1px solid #0215a3;
    padding:20px;
    padding-top:20px;
    padding-bottom:20px;
    margin:5px;
    background-color:#000bff9e;
    color: #dbd8d8;
    text-align:center;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: baseline;
    align-items: center;
    justify-content: space-evenly;
}

.parentkoujo > *:not(:last-child) {
  margin-bottom: 20px;
}


#module_profil_contacts .mCSB_container{
    overflow: visible;
}

.module_profil_contacts_searchBox{
    padding:5px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.module_profil_contacts_searchBox > * {
  margin: 5px;
}

.profilLayout_accountDeletionText{
    overflow: auto;
    word-break: break-word;
}


.contactbox_pseudo{
    font-size:25px;
    font-weight:bold;
    word-break: break-all;
}

.contactbox_level{
    font-size:20px;
}

.contactbox_interactionscontainer{
    
}

.component_contactbox_namecontainer{
    
    flex: 1 1 70%;
    max-width: 100%;
}

.contactbox_actionscontainer{
    flex: 1 1 30%;
    max-width: 100%;
}

[v-cloak] {
    display: none;
}