@font-face {
    font-family: 'titreSectionFont';
    src: url(../fonts/uglierthings.ttf);
}

@font-face {
    font-family: 'contentSectionFont';
    src: url(../fonts/Oswald.woff2);
}

:root {
    --default-color-dark : #000000;

    --input-color: #fff;/*#99A3BA;*/
    --input-border: #CDD9ED;
    --input-background: #fff;
    --input-placeholder: #CBD1DC;
    --input-border-focus: #191d35;/*#275EFE;*/
    --group-color: var(--input-color);
    --group-border: var(--input-border);
    --group-background: #068de1;/*#EEF4FF;*/
    --group-color-focus: #fff;
    --group-border-focus: var(--input-border-focus);
    --group-background-focus: #191d35;/*#678EFE;*/

    --cancel-color-light: #f59f9f;
    --cancel-color-dark: #ed3032;
    --cancel-color-text: #761516;

    --close-color-light: #e3e3e3;
    --close-color-dark: #787878;
    --close-color-text: #4c4c4c;

    --default-color-light: #ffb54d;--default-color: #ff9a0a;--main-bg-color: #E67420;
}

html {
    height: auto;
}

body {
    margin: 0;
    padding: 0;

    background-color: #e6e6e6;
    font-family: contentSectionFont;
    font-size: 17px;

    display: flex;
    flex-direction: column;
    height: auto;

    color:#092970;
}

p {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}


/***************
 * UTILITAIRES *
 ***************/
.cursorPointer {
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.noSelect {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.pointer {
    cursor: pointer;
}

.noMarginBottom {
    margin-bottom: 0;
}

.margin {
    margin-top: 10px;
    margin-left: 0;
}

.marginLeft {
    margin-left: 10px;
}

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

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

.divRow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.divCol {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

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

.divColMargin {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

    margin-top: 10px;
    margin-bottom: 5px;
}

.divRowMargin {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    margin-top: 10px;
    margin-bottom: 5px;
}

/***********
 * BOUTONS *
 ***********/
.bouton {
    color: #092970;
    font-size: 18px;
    font-weight:bold;
    border-radius: 10px;
    border: solid 1px #3866a3;
    box-shadow: inset 1px 1px 0 0 #BBDAF7;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    font-family: contentSectionFont;
    background: linear-gradient(180deg, #63B8EE 10%, #468CCF 100%);
    display: inline-flex;
    align-items: center;
    margin: 10px;
    padding: 0 5px 0 0;
}

.bouton-without-label {
    padding: 0 0 0 0;
}

.bouton:hover {
    background: linear-gradient(180deg, #468CCF 10%, #63B8EE 100%);
}

.bouton-icon {
    position: relative;
    border-right: 1px solid #ffffff29;
    box-shadow: inset rgb(0 0 0 / 14%) -1px 0 0;
    padding: 10px;
    height: 30px;
}

.bouton-icon-without-label {
    position: relative;
    padding: 10px;
    height: 30px;
}

.bouton-text {
    position: relative;
    padding: 10px;
}

.closeButton {
    color: var(--close-color-text);
    border: solid 1px var(--close-color-dark);
    box-shadow: inset 1px 1px 0px 0px var(--close-color-light);
    background: linear-gradient(180deg, var(--close-color-light) 10%, var(--close-color-dark) 100%);

    border-radius: 0px;
    top:-7px;
    left:-27px;
}

.closeButton:hover {
    background: linear-gradient(180deg, var(--close-color-dark) 10%, var(--close-color-light) 100%);
}

#closeButton:hover path {
    fill: red;
}

.cancelButton {
    color: var(--cancel-color-text);
    border: solid 1px var(--cancel-color-dark);
    box-shadow: inset 1px 1px 0px 0px var(--cancel-color-light);
    background: linear-gradient(180deg, var(--cancel-color-light) 10%, var(--cancel-color-dark) 100%);
}

.cancelButton:hover {
    background: linear-gradient(180deg, var(--cancel-color-dark) 10%, var(--cancel-color-light) 100%);
}


.bouton-validate {
    color: #054b16;
    font-size: 16px;
    font-weight:bold;
    border-radius: 10px;
    border: solid 1px #297c23;
    box-shadow: inset 1px 1px 0 0 #63ee76;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    font-family: contentSectionFont;
    background: linear-gradient(180deg, #63ee76 10%, #297c23 100%);
    display: inline-flex;
    align-items: center;
    margin: 10px;
    padding: 0 5px 0 0;
}

.bouton-validate:hover {
    background: linear-gradient(180deg, #297c23 10%, #63ee76 100%);
}

.bouton-cancel {
    color: var(--cancel-color-text);
    font-size: 16px;
    font-weight:bold;
    border-radius: 10px;
    border: solid 1px var(--cancel-color-dark);
    box-shadow: inset 1px 1px 0 0 var(--cancel-color-light);
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    font-family: contentSectionFont;
    background: linear-gradient(180deg, var(--cancel-color-light) 10%, var(--cancel-color-dark) 100%);
    display: inline-flex;
    align-items: center;
    margin: 10px;
    padding: 0 5px 0 0;
}

.bouton-cancel:hover {
    background: linear-gradient(180deg, var(--cancel-color-dark) 10%, var(--cancel-color-light) 100%);
}



/****************
 * CONTENT PAGE *
 ****************/
.full-page-div {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.menu-div {
    background: #191d35;
    height: 60px;
    /*border-bottom: 3px solid #63B8EE;*/

    display: flex;
    flex-direction: column;
    align-items: center;

    color: #afb0b9;

    position: fixed;
    top:0;

    z-index: 99999999;
    border-radius: 18px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    padding-bottom: 2px;
    margin-top: 0;

    transition: 0.5s margin-top;
}


.content-div {
    display: flex;
    flex-direction: column;
}

#error {
    color: red;
    min-height:25px;
    font-style: italic;
}

#rechercheMenuImage {
    width: 30px;
    height: 30px;
    margin-top: 1px;
    position: relative;
    left: 35px;
    z-index: 15;
}

#rechercheMenuInput {
    width: 25em;
    height: 40px;
    z-index: 14;
    text-indent: 32px;

    font-family: contentSectionFont;
    font-size: 18px;
}

#rechercheMenuInput:focus {
    border-color: var(--default-color);
    border-width: 3px;
    box-shadow: 0 0 10px var(--default-color-dark);
    text-indent: 30px;
}

#rechercheResultat {
    display: none;
    border: 1px solid black;
    background: white;
    color: black;
    max-height: 50%;
    width: 25em;
    position: fixed;
    top: 115px;
    margin-left: 30px;
    margin-top: 6px;
    overflow: auto;
    font-weight: normal;

    -webkit-box-shadow: 4px 4px 4px 0 rgba(0,0,0,0.75);
    -moz-box-shadow: 4px 4px 4px 0 rgba(0,0,0,0.75);
    box-shadow: 4px 4px 4px 0 rgba(0,0,0,0.75);

    z-index: 5;

    transition: 0.5s top;
}

#rechercheResultat ul {
    margin-top: -2px;
}

#rechercheResultat ul li {
    list-style-type: none;
}

#rechercheResultat li {
    display: block;
    margin: 0 0 0 -40px;
    cursor: pointer;
    padding: 5px 0 5px 6px;
}

#rechercheResultat li:not(:first-child) {
    border-top: 1px dotted black;
}

#rechercheResultat li:nth-child(odd) {
    background: white;
}

#rechercheResultat li:nth-child(even) {
    background: #e6e6e6;
}

#rechercheResultat::-webkit-scrollbar {
    background-color: #abb0b5;
}

#rechercheResultat::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

#rechercheResultat::-webkit-scrollbar-thumb {
    background-color: var(--default-color);
    outline: 1px solid slategrey;
    border-radius: 5px;
}

#rechercheResultatMsg {
    display:none;
    font-style: italic;
    margin-top:5px;
    padding:5px;
}

.maFormCenter {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 40px;
}

#menuOverlay {
    width:400px;
    transition: 0.5s all ease-in;
    translate:-400px;
}

.ficheListeBox {
    display: flex;
    flex-direction: column;

    margin: 15px 20px 7px 15px;

    padding: 5px 10px;

    cursor: pointer;
    width: 300px;

    background: white;
    border: 1px solid #c6c6c6;
}

.ficheListeBoxTop {
    height: 30px;

    display: flex;
    flex-direction: row;

    font-weight: bold;
    font-size: 20px;

    width: 300px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow: ellipsis;

    text-align: center;
}

.ficheListeBoxEllipse {
    width: 300px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.ficheListeBoxBottom {
    height: 30px;

    justify-content: space-between;
    align-items: center;
    display: flex;
    flex-direction: row;

    font-style: italic;
    font-size: 20px;
}

.ficheListeBoxImg {
    display: flex;
    flex-direction: row;

    background: white none no-repeat;
    background-size: cover;

    height: 150px;

    border-radius: 5px;

    box-shadow: 1px 1px 97px 0 rgba(255,255,255,0.56) inset;
    -webkit-box-shadow: 1px 1px 97px 0 rgba(255,255,255,0.56) inset;
    -moz-box-shadow: 1px 1px 97px 0 rgba(255,255,255,0.56) inset;
}

.ficheListeBoxText {
    display: block;
    position: relative;
    bottom: 0;
    right: -280px;
    font-size: 18px;
    font-weight: bold;

    height: 20px;
}


/***** V2 *******/

.ficheListeBox2 {
    display: flex;
    flex-direction: column;

    margin: 15px 20px 7px 15px;

    cursor: pointer;
    width: 300px;
}

.ficheListeBoxImg2 {
    display: flex;
    flex-direction: row;

    background: white none no-repeat;
    background-size: cover;

    height: 180px;

    border-radius: 5px;

    position: relative;
    top: -35px;
}

.ficheListeBoxBottomBar2 {
    display: flex;
    flex-direction: row;

    justify-content: space-around;

    position: relative;
    top: -70px;
}

.ficheListeBoxTopBar2 {
    display: flex;
    flex-direction: row;

    justify-content: right;
}

/****** V3 *****/

.ficheListeBox3 {
    display: flex;
    flex-direction: column;

    margin: 15px 20px 7px 15px;

    cursor: pointer;
    width: 300px;

    border: 5px solid #0f3489;
    border-radius : 5px 5px 20px 20px;

    background: #0f3489;
}

.ficheListeBoxImg3 {
    display: flex;
    flex-direction: row;

    background: white none no-repeat;
    background-size: cover;

    height: 180px;

    border-radius: 5px;
}

.ficheListeBoxBottomBar3 {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

/****** V4 *****/

.ficheListeBox4 {
    display: flex;
    flex-direction: column;

    margin: 15px 20px 15px 15px;

    cursor: pointer;
    width: 300px;

    border: 4px solid #a09696;

    background: #a09696;
    transition: all .2s ease-in-out;
}

.ficheListeBox4Container:hover {
    transform: scale(1.1);
}

.ficheListeBoxImg4 {
    display: flex;
    flex-direction: row;

    background: white none no-repeat;
    background-size: cover;

    border-radius: 5px 5px 0 0;

    box-shadow: 1px 1px 97px 0 rgba(255,255,255,0.56) inset;
    -webkit-box-shadow: 1px 1px 97px 0 rgba(255,255,255,0.56) inset;
    -moz-box-shadow: 1px 1px 97px 0 rgba(255,255,255,0.56) inset;

    width: 320px;
    height: 180px;

    cursor: pointer;

    border: 4px solid var(--group-border-focus);
    border-bottom: 0;
}

.ficheListeBoxBottomBar4 {
    display: flex;

    flex-direction: row;

    justify-content: space-between;
    padding-bottom: 5px;

    align-items: center;
}

.tagTypeBg4 {
    background: #eee;
    border-radius: 20px;
    width: 24px;
    height: 24px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    border: 2px solid black;

    position: relative;
    top: 20px;
    left: 50px;
}

.tagTypeBg5 {
    background: #eee;
    border-radius: 20px;
    width: 24px;
    height: 24px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    border: 2px solid black;
}

.tagsType4 {
    background: var(--default-color);
    border-width: 1px;
    border-style: solid;
    border-color: var(--default-color-light) var(--default-color) var(--default-color-dark);
    border-radius: 5px;
    box-shadow: 0 0 2px var(--default-color);
    overflow: hidden;
    /*height: 25px;*/
    color: #fff;
    position: relative;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
    background-color: var(--default-color);
    background-image: linear-gradient(to right, var(--default-color-light), var(--default-color));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;/*padding: 0 5px;*/
    font-weight: bold;
    margin-right: 5px;
    font-family: contentSectionFont;
    font-size: 14px;
    font-style: normal;

    user-select: none;
    margin-top:-2px;
}


.tag4Serie {
    background: #f24646;
    box-shadow: 0 0 2px #f24646;
    border-color: #f24646 #a31414;
}

.tag4Film {
    background: #018515;
    box-shadow: 0 0 2px #018515;
    border-color: #018515 #014a0c;
}


.tag4Genre {
    background: #f28b46;
    box-shadow: 0 0 2px #f28b46;
    border-color: #f28b46 #b84e06;
}



.titrePreview {
    padding: 5px 5px 0 5px;

    font-family: titreSectionFont;
    font-size: 20px;
    margin-top: 12px;
    color: var(--default-color-dark);
    border-bottom: 4px solid black;
}

.bottomPreview {
    padding-bottom: 10px;
}

.noVignette {
    color:white;
    text-shadow: #000 0 0 3px,   #000 0 0 3px,   #000 0 0 3px,
#000 0 0 3px,   #000 0 0 3px,   #000 0 0 3px;
    font-size: 30px;
    font-weight: bold;

    width: 300px;
    height: 180px;
    overflow: hidden;

    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

/* Dropdown Button */
.dropbtn {
    border: none;
    position: relative;
    top: 0;
    left: 0;

    transition: top 1s ease;

    display: flex;flex-direction: row;
    justify-content: center;
    align-items:center;
    height:23px;
    border-radius:0 0 6px 6px;

    background: rgb(25, 29, 53);
    border-bottom: 4px solid var(--group-border-focus);
    border-left: 4px solid var(--group-border-focus);
    border-right: 4px solid var(--group-border-focus);
}

.dropdown-content-gauche {
    width:144px;
    color:#ffffff;
    text-transform:uppercase;
    font-family: contentSectionFont;
    font-weight: bold;
    text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000,
    1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 22px;
}

.dropdown-content-droite {
    width:144px;color:#ffffff;
    font-family: contentSectionFont;
    font-weight: bold;
    text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000,
    1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
    height: 22px;
    text-transform:uppercase;
}

.dropdown-content-centre {
    height: 22px;
}

.dropbtn img {
    transition: all 1s ease;
}

.dropbtnBas {
    border: none;
    cursor: pointer;
    position: relative;
    top:23px;
    left: 0;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
    height: 3px;
    text-align: center;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: flex;
    position: absolute;
    width: 320px;
    height: 0;
    flex-direction: column;

    transition: height 1s ease;
    overflow: hidden;

    border-left:4px solid var(--group-border-focus);
    border-right: 4px solid var(--group-border-focus);
    border-top: 0;

    background: rgb(245,239,239);
    top: 0;
}

/* Show the dropdown menu on hover */
.dropdownClicked.dropdown-content {
    border-bottom: 4px solid #008ab5;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdownClicked .dropbtn {

}

.tagTypeBg {
    background: #eee;
    border-radius: 20px;
    width: 24px;
    height: 24px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    border: 2px solid black;
}


.tagTypeBg3_1 {
    background: #eee;
    border-radius: 20px;
    width: 24px;
    height: 24px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

position:relative;
    top:-190px;
    left:-15px;
}

.tagTypeBg3_2 {
    background: #eee;
    border-radius: 20px;
    width: 100px;
    height: 24px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    position:relative;
    top:-220px;
    right:-215px;
}

.tagTypeBg3_3 {
    background: #eee;
    border-radius: 20px;
    width: 24px;
    height: 24px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    position:relative;
    top:-60px;
    left:-15px;
}

.tagTypeBg3_4 {
    background: #eee;
    border-radius: 20px;
    width: 24px;
    height: 24px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    position:relative;
    top:-85px;
    right: -290px;
}


.titreSection {
    font-family: titreSectionFont;
    font-size: 28px;
    margin-top: -4px;
    color: #fff;
    width: 100%;
    text-align: center;
}

.titre {
    padding: 5px 5px 0 5px;

    font-family: titreSectionFont;
    font-size: 30px;
    margin-top: 12px;
    color: #092970;

    line-height: 34px;
}

.titreSection_titre::before {
    content: '';
    padding-right: 5px;
    padding-left: 5px;
    border-left: 8px solid #092970;
    border-top: 8px solid #092970;
    border-bottom: 4px solid #092970;
}
.titreSection_titre::after {
    content: '';
    padding-right: 5px;
    padding-left: 5px;
    border-right: 8px solid #092970;
    border-top: 4px solid #092970;
    border-bottom: 8px solid #092970;
}



.tagsType {
    background: var(--default-color);
    border-width: 1px;
    border-style: solid;
    border-color: var(--default-color-light) var(--default-color) var(--default-color-dark);
    border-radius: 5px;
    box-shadow: 0 0 2px var(--default-color);
    overflow: hidden;
    height: 25px;
    color: #fff;
    position: relative;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
    background-color: var(--default-color);
    background-image: linear-gradient(to right, var(--default-color-light), var(--default-color));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0px 5px;
    font-weight: bold;
    margin-right: 5px;
    font-family: contentSectionFont;
    font-size: 14px;
    font-weight: bold;
    font-style: normal;
}

.tagsNetflix {
    --default-color-light: #000000;
    --default-color: #000000;
    --main-bg-color: #000000;
    color: #ff0000;
}

.tagsDisney {
    --default-color-light: #3a6de1;
    --default-color: #0f3489;
    --main-bg-color: #22438d;
    color: #ffffff;
}

/********
 * MENU *
 ********/
.arrow_boxMenu {
    position: absolute;
    background: #cf1d20;
    border: 1px solid #f5f5f5;
    padding: 5px;
    margin-bottom: 10px;
    color: white;
    margin-right: 5px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    cursor: not-allowed;
}


.menuBoxOverlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    text-align: center;
    z-index: 999;


    display: flex;
    flex-direction: column;
    width: 0px;
    min-height: 100%;

    background: #3e3e3e;
}

.menuBoxItemListe {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;

    margin: 10px 20px;
}

.menuBoxItem {
    width: 300px;
    background: white;
    margin: 50px;

    display: flex;
    flex-direction: column;

    font-family: contentSectionFont;

}



.close-container {
    width: 50px;
    height: 50px;
    margin-top: 5px;
    cursor: pointer;

    margin: 5px;
    margin-bottom: 10px;

    position: absolute;
    right: 10px;
}

.leftright {
    height: 4px;
    width: 50px;
    position: absolute;
    margin-top: 24px;
    background-color: #F4A259;
    border-radius: 2px;
    transform: rotate(45deg);
    transition: all 0.3s ease-in;
}

.rightleft {
    height: 4px;
    width: 50px;
    position: absolute;
    margin-top: 24px;
    background-color: #F4A259;
    border-radius: 2px;
    transform: rotate(-45deg);
    transition: all 0.3s ease-in;
}


.close-container:hover .leftright {
    transform: rotate(-45deg);
    background-color: #F25C66;
}

.close-container:hover .rightleft {
    transform: rotate(45deg);
    background-color: #F25C66;
}



/******************/



/*********************/
/* Boite de dialogue */
/*********************/
.overlay {

    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    text-align: center;
    z-index: 900;


    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;

    background: #3e3e3e;

    opacity: 0.7;
}

.divCenterRow {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.configPanel {
    background: white;

    display: flex;
    flex-direction: column;

    opacity: 1;
    z-index: 901;

    position: absolute;
    top: 75px;

    border-radius: 10px;

    box-shadow: 4px 5px 5px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 4px 5px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 4px 5px 5px 0px rgba(0,0,0,0.75);
    padding: 0;
    width:450px;
    border: 2px white solid;
}

.lineConfigPanel {
    padding: 5px;

    display: flex;
    flex-direction: row;

}


.imgTooltip {
    display: inline-block;
    position: relative;
    text-align: center;
    cursor: default;
}

.imgTooltip .bottom {
    font-family: contentSectionFont, sans-serif;
    font-weight: bold;
    top: 40px;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 10px 20px;
    color: #fff;
    background-color: black;
    font-size: 13px;
    border-radius: 8px;
    position: absolute;
    z-index: 99999999;
    box-sizing: border-box;
    /* border:1px solid #000000;box-shadow:0 1px 8px rgba(0,0,0,0.5); */
    visibility: hidden; opacity: 0; transition: opacity 0.8s;
}

.imgTooltip:hover .bottom {
    visibility: visible; opacity: 1;
}

.imgTooltip .bottom i {
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -12px;
    width: 24px;
    height: 12px;
    overflow: hidden;
}

.imgTooltip .bottom i::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    left: 50%;
    transform: translate(-50%,50%) rotate(45deg);
    background-color: black;
    /* border:1px solid #000000; box-shadow:0 1px 8px rgba(0,0,0,0.5); */
}



.resumeFicheBox {
    padding: 5px;

    display: flex;
    flex-direction: column;


}

.icon_save_edit:hover path {
    fill: green;
}

.icon_add:hover path:nth-of-type(2) {
    fill: blue;
}

.icon_burger:hover path {
    stroke: #fff;
}

#close {
    overflow: hidden;
    position: relative;
    border: none;
    padding: 0;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font: inherit;
    text-indent: 100%;
    cursor: pointer;

    position: relative;
    top: -14px;
    left: -38px;
}

#close:hover {
    /*background: rgba(29, 161, 142, 0.1);*/
    color: red;
}
#close:before, #close:after {
    position: absolute;
    top: 15%;
    left: calc(50% - .0625em);
    width: 0.125em;
    height: 70%;
    border-radius: 0.125em;
    transform: rotate(45deg);
    background: currentcolor;
    content: "";
}
#close:after {
    transform: rotate(-45deg);
}






.form-field {
    display: block;
    width: 100%;
    padding: 8px 16px;
    line-height: 25px;
    font-size: 18px;
    font-weight: 500;
    font-family: inherit;
    border-radius: 6px;
    -webkit-appearance: none;
    color: var(--input-color);
    border: 1px solid var(--input-border);
    background: var(--input-background);
    transition: border 0.3s ease;
}
.form-field::-moz-placeholder {
    color: var(--input-placeholder);
}
.form-field:-ms-input-placeholder {
    color: var(--input-placeholder);
}
.form-field::placeholder {
    color: var(--input-placeholder);
}
.form-field:focus {
    outline: none;
    border-color: var(--input-border-focus);
}

.form-group {
    position: relative;
    display: flex;
    width: 100%;
    margin-bottom: 15px;
}

.popupContent {
    padding: 20px 20px 0;
}

.popupFooter {
    background: #191d35;
    align-items: center;
    justify-content: space-between;
    border-top: 3px solid #63B8EE;
    padding: 0;
    border-radius: 0 0 8px 8px;
}

.addBouton:hover path:nth-of-type(2) {
    fill: #2f7ba1;
}

.form-group > span,
.form-group .form-field {
    white-space: nowrap;
    display: block;
}
.form-group > span:not(:first-child):not(:last-child),
.form-group .form-field:not(:first-child):not(:last-child) {
    border-radius: 0;
}
.form-group > span:first-child,
.form-group .form-field:first-child {
    border-radius: 6px 0 0 6px;
}
.form-group > span:last-child,
.form-group .form-field:last-child {
    border-radius: 0 6px 6px 0;
}
.form-group > span:not(:first-child),
.form-group .form-field:not(:first-child) {
    margin-left: -1px;
}
.form-group .form-field {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    width: 1%;
    margin-top: 0;
    margin-bottom: 0;
}
.form-group > span {
    text-align: center;
    padding: 10px;
    font-size: 18px;
    /*line-height: 25px;*/
    color: var(--group-color);
    background: var(--group-background);
    border: 1px solid var(--group-border);
    transition: background 0.3s ease, border 0.3s ease, color 0.3s ease;
}
.form-group:focus-within > span {
    color: var(--group-color-focus);
    background: var(--group-background-focus);
    border-color: var(--group-border-focus);
}

.form-group:focus-within > .select-box {
    border-color: var(--group-border-focus);
}


body .form-group {
    /*max-width: 360px;*/
}

body {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

/**************/
/* EN COLONNE */
/**************/
.form-fieldCol {
    display: block;
    width: 100%;
    padding: 8px 16px;
    line-height: 25px;
    font-size: 18px;
    font-weight: 500;
    font-family: inherit;
    border-radius: 6px;
    -webkit-appearance: none;
    color: var(--input-color);
    border: 1px solid var(--input-border);
    background: var(--input-background);
    transition: border 0.3s ease;
}

.form-fieldCol:focus {
    outline: none;
    border-color: var(--input-border-focus);
}

.form-groupCol {
    position: relative;
    display: flex;
    width: 100%;

    margin-bottom: 15px;
    flex-direction: column;
}
.form-groupCol > span,
.form-groupCol .form-fieldCol {
    white-space: nowrap;
    display: block;
}
.form-groupCol > span:not(:first-child):not(:last-child),
.form-groupCol .form-fieldCol:not(:first-child):not(:last-child) {
    border-radius: 0;
}
.form-groupCol > span:first-child,
.form-groupCol .form-fieldCol:first-child {
    border-radius: 6px 6px 0 0;
}
.form-groupCol > span:last-child,
.form-groupCol .form-fieldCol:last-child {
    border-radius: 0 6px 6px 0;
}
.form-groupCol > span:not(:first-child),
.form-groupCol .form-fieldCol:not(:first-child) {
    margin-left: -1px;
}
.form-groupCol .form-fieldCol {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    width: 1%;
    margin-top: 0;
    margin-bottom: 0;
}
.form-groupCol > span {

    padding: 8px 12px;
    font-size: 18px;
    line-height: 25px;
    color: var(--group-color);
    background: var(--group-background);
    border: 1px solid var(--group-border);
    transition: background 0.3s ease, border 0.3s ease, color 0.3s ease;
}
.form-groupCol:focus-within > span, .form-groupCol:focus-visible > span {
    color: var(--group-color-focus);
    background: var(--group-background-focus);
    border-color: var(--group-border-focus);
}

.form-groupCol > textarea, .form-groupCol > p, .form-groupCol > .box_form-groupCol {
    text-align: center;
    padding: 8px 12px;
    font-size: 18px;
    line-height: 25px;
    color: black;
    background: white;
    border: 1px solid var(--group-border);
    transition: background 0.3s ease, border 0.3s ease, color 0.3s ease;
}

.form-groupCol:focus-within > textarea {
    border-color: var(--group-border-focus);
}

.form-group > input {
    color: black;
}

.button-89 {
    --b: 3px;   /* border thickness */
    --s: .45em; /* size of the corner */
    --color: #373B44;

    padding: calc(.5em + var(--s)) calc(.9em + var(--s));
    color: var(--color);
    --_p: var(--s);
    background:
            conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--color) 0)
            var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
    transition: .3s linear, color 0s, background-color 0s;
    outline: var(--b) solid #0000;
    outline-offset: .6em;
    font-size: 16px;

    border: 0;

    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.button-89:hover,
.button-89:focus-visible{
    --_p: 0px;
    outline-color: var(--color);
    outline-offset: .05em;
}

.button-89:active {
    background: var(--color);
    color: #fff;
}



.button-90 {
    --c:  #229091; /* the color*/

    box-shadow: 0 0 0 .1em inset var(--c);
    --_g: linear-gradient(var(--c) 0 0) no-repeat;
    background:
            var(--_g) calc(var(--_p,0%) - 100%) 0%,
            var(--_g) calc(200% - var(--_p,0%)) 0%,
            var(--_g) calc(var(--_p,0%) - 100%) 100%,
            var(--_g) calc(200% - var(--_p,0%)) 100%;
    background-size: 50.5% calc(var(--_p,0%)/2 + .5%);
    outline-offset: .1em;
    transition: background-size .4s, background-position 0s .4s;
}
.button-90:hover {
    --_p: 100%;
    transition: background-position .4s, background-size 0s;
    color: #fff;
}
.button-90:active {
    box-shadow: 0 0 9e9q inset #0009;
    background-color: var(--c);
    color: #fff;
}

.button-90 {
    font-size: 28px;
    cursor: pointer;
    padding: .1em .6em;
    font-weight: bold;
    border: none;
}


/********************************/
/********************************/
/********************************/


.dropdownBox {
    position: relative;
    display: flex;
}

.dropdownBox-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;

    list-style: none;
    margin-top: 38px;
}

.dropdownBox-content li:hover {
    background: #04AA6D;
}


.dropdownBox-content2 {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;

    list-style: none;
    width: 122px;
    text-align: center;
}
.dropdownBox-content2 li {
    padding: 5px 10px;
}

.dropdownBox-content2 li:nth-child(1):hover {
    background: #018515;
}
.dropdownBox-content2 li:nth-child(2):hover {
    background: #018515;
}

.dropdownBox-content2 li:nth-child(3):hover {
    background: #f24646;
}
.dropdownBox-content2 li:nth-child(4):hover {
    background: #f24646;
}

/********************************/
/********************************/
/********************************/


.dropdownConfigUserBox {
    color: #092970;
    position: relative;
    display: flex;
}

.dropdownConfigUserBox img {
    width: 25px;
    height: 25px;
    margin-right: 8px;
}

.dropdownConfigUserBox-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    z-index: 9999999999999999999999999;

    list-style: none;
    margin-top: 38px;
    margin-left: -130px;
}

.dropdownConfigUserBox-content li {
    padding: 12px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.dropdownConfigUserBox-content li:hover {
    background: var(--group-background);
}



/*************************/
/*** SELECT DROP DOWN ****/
/*************************/

.select-box {
    position: relative;
    display: block;
    width: 100%;
    /*margin: 0 auto;*/

    font-size: 18px;
    color: #60666d;

    border: 1px solid var(--input-border);
    border-left: 0px;
    border-radius: 0px 6px 6px 0px;
}


.select-box__current {
    position: relative;
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    outline: none;

}
.select-box__current:focus + .select-box__list {
    opacity: 1;
    -webkit-animation-name: none;
    animation-name: none;
}
.select-box__current:focus + .select-box__list .select-box__option {
    cursor: pointer;
}
.select-box__current:focus .select-box__icon {
    transform: translateY(-50%) rotate(180deg);
}
.select-box__icon {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 40px;
    opacity: 0.3;
    transition: 0.2s ease;
}
.select-box__value {
    display: flex;
}
.select-box__input {
    display: none;
}
.select-box__input:checked + .select-box__input-text {
    display: block;
}
.select-box__input-text {
    display: none;
    width: 100%;
    margin: 0;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
}
.select-box__list {
    position: absolute;
    width: 100%;
    padding: 0;
    list-style: none;
    opacity: 0;
    -webkit-animation-name: HideList;
    animation-name: HideList;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.1);

    z-index: 99999;
}
.select-box__option {
    display: block;
    padding: 15px;
    background-color: #fff;
}
.select-box__option:hover, .select-box__option:focus {
    color: #546c84;
    background-color: #fbfbfb;
}

@-webkit-keyframes HideList {
    from {
        transform: scaleY(1);
    }
    to {
        transform: scaleY(0);
    }
}

@keyframes HideList {
    from {
        transform: scaleY(1);
    }
    to {
        transform: scaleY(0);
    }
}


/*************/
/*** UPLOAD **/
/*************/
.ficheListeBoxImg4CreerFiche {
    display: flex;
    flex-direction: row;

    background: white none no-repeat;
    background-size: cover;

    border-radius: 5px;

    box-shadow: 1px 1px 97px 0px rgba(255,255,255,0.56) inset;
    -webkit-box-shadow: 1px 1px 97px 0px rgba(255,255,255,0.56) inset;
    -moz-box-shadow: 1px 1px 97px 0px rgba(255,255,255,0.56) inset;

    width:320px;
    height:180px;
    border: 4px solid #008ab5;

    cursor: pointer;
}

.previewImage {
    display: flex;
    flex-direction: row;

    background: white none no-repeat;
    background-size: contain;

    border-radius: 5px;

    box-shadow: 1px 1px 97px 0 rgba(255,255,255,0.56) inset;
    -webkit-box-shadow: 1px 1px 97px 0 rgba(255,255,255,0.56) inset;
    -moz-box-shadow: 1px 1px 97px 0 rgba(255,255,255,0.56) inset;

    width:300px;
    height:180px;
    border: 4px solid #008ab5;

    cursor: pointer;
}




.soloFiche {
    margin-top: 7px;
    filter: grayscale(1);
}

.soloFicheSelected {
    margin-top: 7px;
    filter: grayscale(0);
}
/************************/
/*** ANIMATION ICONES ***/
/************************/
.heart {
    position: relative;
    width: 30px;
    height: 27px;
    cursor: pointer;
}

.heart:hover {
    animation: heartbeat 1s infinite;
}

.heart:before,
.heart:after {
    position: absolute;
    content: "";
    left: 15px;
    top: 3px; /*0;*/
    width: 13px; /*15px;*/
    height: 22px; /*24px;*/
    background: #fff;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
.heart:after {
    left: 2px; /*0;*/
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin :100% 100%;
}

.heartSelected:before, .heartSelected:after {
    background: rgb(185,0,0);

    box-shadow: 1px 1px 3px 0px rgba(255,255,255,0.75) inset;
    -webkit-box-shadow: 1px 1px 3px 0px rgba(255,255,255,0.75) inset;
    -moz-box-shadow: 1px 1px 3px 0px rgba(255,255,255,0.75) inset;
}

.heartFiche:before, .heartFiche:after {
    background: rgb(167, 167, 167);

}

.heart.heartSelected {
    animation: heartbeat 1s infinite;
}

@keyframes heartbeat
{
    0%
    {
        transform: scale( .75 );
    }
    20%
    {
        transform: scale( 1 );
    }
    40%
    {
        transform: scale( .75 );
    }
    60%
    {
        transform: scale( 1 );
    }
    80%
    {
        transform: scale( .75 );
    }
    100%
    {
        transform: scale( .75 );
    }
}



/*****************************/
/*****************************/
.icon {
    display: inline-block;
    width: 32px; height: 32px;
    border-radius: 50%;
    transform: rotate(45deg);

    cursor: pointer;
}
.icon::before, .icon::after { position: absolute; content: ''; background-color: #fff; }
.icon.icon-success          { background: green; }
.icon.icon-success:before   { width:  4px; height:  16px; top:  7px; left: 15px; }
.icon.icon-success:after    { width:  8px; height:  4px; top: 19px; left:  9px; }
.icon.icon-failure          { background: lightcoral; }
.icon.icon-failure::before  { width:  4px; height: 20px; top:  6px; left: 14px; }
.icon.icon-failure::after   { width: 20px; height:  4px; top: 14px; left:  6px; }


/*********/
/* ALERT */
/*********/
.alertMessage {
    padding: 20px;
    background-color: #f44336;
    color: white;
    transition: opacity 0.6s;
    margin: auto;

    display: none;
    opacity: 0;
    position: fixed;
    top:60px;

    font-size: 20px;
    font-weight: bold;

    z-index: 1000;
}

.alertMessage.success {background-color: #04AA6D;}
.alertMessage.info {background-color: #2196F3;}
.alertMessage.warning {background-color: #ff9800;}


/***********/
/** TABLE **/
/***********/
.tableLine {
    height: 40px;
    font-size: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
}


.tableLineClick {
    cursor: pointer;
}

.tableLine.tableLineClick:hover {
    background: #04AA6D;
}

.tableLine div {
    margin-right: 15px;
}

.tableLine:nth-of-type(odd) {
    background: #fff;
}

.tableLine:nth-of-type(even) {
    /*background: #bfbfbf;*/
    background: #e4f0ff;
}


/****************/
/*** ACORDEON ***/
/****************/
.accordion {
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    background: rgb(185,185,185);
    background: linear-gradient(180deg, rgba(185,185,185,1) 0%, rgba(139,139,139,1) 47%, rgba(144,142,142,1) 53%, rgba(185,185,185,1) 100%);
    border: 1px solid black;
}

.activeAccordion, .accordion:hover {
    background: rgb(139,139,139);
    background: linear-gradient(180deg, rgba(139,139,139,1) 0%, rgba(195,195,195,1) 47%, rgba(195,195,195,1) 53%, rgba(139,139,139,1) 100%);
}

.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.activeAccordion:after {
    content: "\2212";
}

.panelAccordion {
    padding: 0;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;

    display: flex;
    flex-direction: column;
}

.episode {
    display: flex;
    flex-direction: row;

    border-top: 1px solid black;


    margin: 0;
    padding: 10px 5px;

    align-items: center;
    background: white;

    border: 1px solid #191d35;
    margin-bottom: -1px;
    border-radius: 8px;
}

.previewPhoto {
    display: flex;
    flex-direction: row;
    background-repeat: repeat;
    background-size: auto;
    background-repeat: no-repeat;
    background-size: contain;
    height: 200px;width:200px;
}




.buttonCentre {
    display:inline-block;
    font-size:16px;
    font-weight:bold;
    color:#fff;
    text-decoration:none;
    text-transform:uppercase;
    text-align:center;
    text-shadow:1px 1px 0px #07526e;

    position:relative;

    border: none;
    background: #109bce;
    background-image: linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);
    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px var(--group-border-focus), 0px 1px 0px #999;

    height:28px;
}

.buttonDroite {
    display:inline-block;
    font-size:16px;
    font-weight:bold;
    color:#fff;
    text-decoration:none;
    text-transform:uppercase;
    text-align:center;
    text-shadow:1px 1px 0px #07526e;

    position:relative;
    cursor:pointer;
    border: none;
    background: #109bce;
    background-image: linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);
    border-radius: 0 0 5px 0;
    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px var(--group-border-focus), 0px 1px 0px #999;
    border-right: 4px solid var(--group-border-focus);
}

.buttonDroite:active {
    top:3px;
    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;
}

.buttonDroite:before {
    font-family: 'socialfont';

    line-height: 1em;
    font-weight: normal;
    color: #fff;
    width:40px;
    height:25px;
    display:block;
    position:absolute;
    padding-top:10px;
    top:10px;
    text-shadow: 1px 1px 2px #07526e;

}

.buttonDroite:active:before {
    top: 7px;
    font-size: 50px;
    text-shadow: 0px 3px 0px #07526e, 0px 5px 1px #07526e/*, 3px 0px 1px #07526e, 3px 3px 1px #07526e,
     -2px 0px 1px #68cff2*/;
}





.buttonGauche {
    display:inline-block;
    font-size:16px;
    font-weight:bold;
    color:#fff;
    text-decoration:none;
    text-transform:uppercase;
    text-align:center;
    text-shadow:1px 1px 0px #07526e;

    position:relative;
    cursor:pointer;
    border: none;
    background: #109bce;
    background-image: linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);
    border-radius: 0 0 0 5px;
    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px var(--group-border-focus), 0px 1px 0px #999;
    border-left: 4px solid var(--group-border-focus);

    height:28px;width:40px;
}

.buttonGauche:active {
    top:3px;
    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;
}

.buttonGauche:before {
    font-family: 'socialfont';

    line-height: 1em;
    font-weight: normal;
    color: #fff;
    width:40px;
    height:25px;
    display:block;
    position:absolute;
    padding-top:10px;
    top:10px;
    text-shadow: 1px 1px 2px #07526e;

}

.buttonGauche:active:before {
    top: 7px;
    font-size: 50px;
    text-shadow: 0px 3px 0px #07526e, 0px 5px 1px #07526e/*, 3px 0px 1px #07526e, 3px 3px 1px #07526e,
     -2px 0px 1px #68cff2*/;
}

.fr-view {
    font-size: 18px;
}

.ignoreFicheButton {
    width: 25px;
    position: absolute;
    border: 4px black solid;
    height: 25px;
    border-radius: 15px;
    background: white;
    margin-top: -13px;
    margin-left: -10px;
}

.addFicheButton {
    width: 25px;
    position: absolute;
    border: 4px black solid;
    height: 25px;
    border-radius: 15px;
    background: white;
    margin-top: -13px;
    margin-left: 306px;
}





.tutorial ul {
    font-size: 0;
    list-style-type: none;
}
.tutorial ul li {
    font-size: 20px;
    font-weight: 400;
    color: #afb0b9;
    display: inline-block;
    padding: 15px;
    position: relative;
}
.tutorial ul li div {
    display: none;
}
.tutorial ul li:hover {
    cursor: pointer;
    background-color: #ffffff;
    color: #092970;
}
.tutorial ul li:hover div {
    display: block;
    margin-top: 15px;
    width: 200px;
    left: 0;
    position: absolute;
    z-index: 99999999999999999999999999;
}
.tutorial ul li:hover div span {
    display: block;
    background-color: #ffffff;
    color: #092970;
}

.tutorial ul li:hover div span:hover {
    background-color: #63b8ee;
}

.tutorial div span {
    padding: 15px 10px;
    cursor: pointer;
}

.searchIcon {
    padding: 15px;
    cursor: pointer;
}

.searchIcon:hover {
    background: #ffffff;
}

.searchIcon:hover path {
    fill: #002e72;
}

.searchBoxClass {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 15px;

    background: #002e72;
    border-radius: 0px;
    margin-top: 2px;

}

.carouselBox {
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    height:240px;
    justify-content: space-between;
    background-color: #488fd1;
    box-shadow: 0px 4px 5px #191d35;
    padding-bottom: 10px;
    margin-bottom: 40px;

    background: rgb(103,162,218);
    background: linear-gradient(135deg, rgba(103,162,218,1) 0%, rgba(17,81,140,1) 50%, rgba(199,228,255,1) 100%);

    border-top: 1px solid #295a78;
    border-bottom: 1px solid #88a1c7;

    background: rgb(103,162,218);
    background: radial-gradient(circle, rgba(103,162,218,1) 11%, rgba(17,81,140,1) 50%, rgba(199,228,255,1) 87%);
}


.carouselBoxDisable {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
}

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

    cursor: pointer;
    transition: all 0.5s;
}

.carouselContentDisable {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.carouselContent {
    display: flex;
    flex-direction: row;

}

.animationOnOpacity {
    transition: opacity 0.5s;
}

.actionToutMontrer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    cursor: pointer;
}

.actionToutMontrerSpan {
    transition: width 0.5s;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 18px;

    filter: invert(.5) sepia(1) saturate(5) hue-rotate(175deg);
}

.actionToutMontrer .actionToutMontrerSpan {
    width:0;
}

.actionToutMontrerDIV:hover .actionToutMontrerSpan {
    width: 100%;
}


.titreSectionCarousel {
    font-size: 25px;
    font-weight: bold;
    margin-left: 15px;
    margin-right: 3px;
    margin-top: -5px;
}

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

.actionToutMontrerDIV:hover .imageSVGToutMontrer {
    filter: invert(.5) sepia(1) saturate(5) hue-rotate(175deg);
}

.carouselArrow:hover {
    filter: invert(.5) sepia(1) saturate(5) hue-rotate(175deg);
    transform: scale(1.5);
}


.carouselBullet {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    /* padding: 5px; */

    color: #092970;

    padding: 0px 2px;
    margin-top: -1px;

    font-weight: bold;
    margin-right: 5px;
}

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

.boxDateParution {
    display: flex;
    position: relative;
    flex-direction: row;
    top: -27px;
    height: 27px;
    left: 4px;
    width: 320px;
    align-items: center;
    justify-content: flex-end;
    background: rgba(25, 29, 53, 0.5);
    color: white;
    text-align: right;
    font-weight: bold;
    text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000,
    1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
}



.programmationBox {

    font-size: 16px;
    font-weight:bold;
    border-radius: 10px;

    box-shadow: inset 1px 1px 0 0 #a9a8aa;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    font-family: contentSectionFont;
    background: linear-gradient(180deg, #d9d6d5 10%, #918a87 100%);
    display: inline-flex;
    align-items: center;
    margin: 10px;
    padding: 0 5px 0 0;
}


.programmationBox-icon {
    position: relative;
    border-right: 1px solid #ffffff29;
    box-shadow: inset rgb(0 0 0 / 14%) -1px 0 0;
    padding: 6px 10px;
    height: 20px;
}

.programmationBox-iconMid {
    position: relative;
    border-right: 1px solid #ffffff29;
    border-left: 1px solid #ffffff29;
    box-shadow: inset rgb(0 0 0 / 14%) -1px 0 0;
    padding: 6px 10px;
    height: 20px;
}

.programmationBox-text {
    position: relative;
    padding: 6px 10px;
}

.inputEditable {
    display: none;
}

.supportBox {
    margin: 5px;
    border-radius: 5px;
    filter: grayscale(1);
}

.supportBox img {
    width: 15px;
    height: 15px;
}

.supportBox:hover {
    filter: grayscale(0);
}