/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

@media (min-width: 1300px) {
    .container {
        max-width: 1300px;
    }
}

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}


/* Sticky footer styles
-------------------------------------------------- */

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

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

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

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}


/* Sticky footer styles
-------------------------------------------------- */

html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin: 0;
    margin-bottom: 60px;
    width: 100%;
    text-align: center;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 1.3em;
    background-repeat: no-repeat;
    color: #1d2d44;
    /*background-color: #053e77;
    -webkit-box-shadow: inset 0px 0px 30px 0px rgba(0,0,0,0.45);
    -moz-box-shadow: inset 0px 0px 30px 0px rgba(0,0,0,0.45);
    box-shadow: inset 0px 0px 30px 0px rgba(0,0,0,0.45);
    background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.03) 27%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.03) 75%, rgba(255, 255, 255, 0.03) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.03) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.03) 75%, rgba(255, 255, 255, 0.03) 76%, transparent 77%, transparent);
    background-size: 50px 50px;*/
    background: #fcfcfc;
    /* ff3.6+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#1172BD', endColorstr='#053e77', GradientType=1);
    /* ie6-9 */
}

h1,
h2,
h3,
h4,
h5,
h6,
a {
    color: #0a297d;
}

.colGroup {
    display: inline-block;
    vertical-align: top;
}

h1 {
    font-size: 1.3em;
    line-height: 1.5em;
}

header {
    height: 63px;
}

footer {
    height: 60px;
}

#MainSection {
    padding: 0;
}

.form-header {
    padding: 5px 12px 0;
}

#rexeliumContent .form-basic input,
#rexeliumContent .form-basic select {
    background-color: transparent;
    color: #194788;
    font-size: 1em;
    box-sizing: border-box;
    width: 100%;
    /* box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08); */
    padding: 12px 8px;
    /* border: 1px solid #b7c9e1; */
    border: 0px;
    border-bottom: 1px solid #194788;
    max-width: 365px;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    font-weight: 400;
    max-width: 365px;
    font-style: normal;
}

#rexeliumContent .SolutionContener {
    height: 470px;
    overflow-y: auto;
}

#rexeliumContent .SolutionContener.flex-row {
    height: 158px;
    overflow-y: hidden;
    overflow-x: auto;
}

#rexeliumContent .SolutionContener .Tile.SolutionFeature .content {
    min-height: 90px;
}

#rexeliumContent .SolutionContener.flex-row .Tile {
    height: 100%;
    min-width: 200px;
}

#rexeliumContent .Tile.DesignModern {
    background: white;
    height: 268px;
    min-height: 268px;
    border-bottom: solid 5px #e1e1e1;
}

#rexeliumContent .Tile.DesignModern2 {
    background: #fafafa;
    height: 248px;
    margin: 0 5px;
}

h2 {
    font-size: 1.2em;
    line-height: 1.4em;
}

h3,
h4,
h5 {
    font-size: 1.1em;
    line-height: 1.3em;
}

.footer {
    position: absolute;
    bottom: 0;
    font-size: 0.7em;
    width: 100%;
    background: #fff;
    white-space: nowrap;
    /* Set the fixed height of the footer here */
    line-height: 40px;
    /* Vertically center the text there */
    border-top: 1px solid #dee2e6 !important;
}

.footer .container {
    background: #fff;
    color: #333;
}

.navbar img {
    height: 40px;
}

.navbar {
    background: #fff;
    box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.10);
}

.navbar .navbar-brand {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #0a287d !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: uppercase;
}

.form-basic {
    width: 100%;
    margin: 0 auto;
    /*padding: 10px 55px 10px 55px;*/
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
    position: relative;
    left: 0;
    display: inline-block;
    min-width: 300px;
}

.ligneDeVie {
    font-size: 0.8rem;
    color: #9a9aa0;
    text-align: left;
    margin: 5px;
    display: inline-block;
}

.ligneDeVie .link.valide {
    color: #0056b3;
    cursor: pointer;
}

.ligneDeVie .link.active {
    text-decoration: underline;
}

.ligneDeVie .link.valide:hover {
    text-decoration: underline;
}

.form-basic.transparent {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.form-basic.closed {
    height: 45px;
}

.formdispleyoption {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    color: #194788;
    padding: 8px;
    font-size: 1.6em;
}

.formdispleyoption span {
    margin-right: 5px;
}

.formdispleyoption span.active {
    color: orange;
}

.formdispleyoption span:hover {
    cursor: pointer;
}

.Tile:hover {
    cursor: pointer;
}

.page {
    margin: auto;
    background-color: #ffffff;
}
#rexeliumContent .pageGroup {
    position: relative;
    top: -10px;
    margin-top: 55px;
}

.transparent .page {
    background: transparent;
}

.form-basic.readable-form h1 {
    color: #194788;
}

.conteneur-,
.conteneur-g,
.conteneur-c,
.conteneur-d {
    float: left;
    width: 100%;
    /*background:#e2e9f3;*/
}

.col-conteneur {
    height: 75vh;
    overflow: auto;
}

.conteneur-,
.conteneur-g,
.conteneur-c,
.conteneur-d {
    position: relative;
    right: 0%;
}

.conteneur-d {
    overflow: hidden;
    /*height:100%;*/
}

.col-,
.col-g,
.col-c,
.col-d {
    float: left;
    position: relative;
    left: 0%;
    width: 100%;
}


/**** END THREE COL ****/

.navbar .space.open {
    box-shadow: -1px 2px 6px 3px rgba(100, 100, 100, 0.3) inset;
}

.navbar2 .space.open {
    box-shadow: -1px 2px 10px 3px rgba(100, 100, 100, 0.3) inset;
}

.originML {
    position: relative;
    width: 100%;
}

.multiLevelMenu {
    display: none;
}

.form-basic .Vignetor .multiLevelMenu .vignette {
    display: none;
}

.multiLevelMenu.open {
    display: inline-block;
}

.form-basic .Vignetor .multiLevelMenu.open>.vignette {
    display: inline-block;
}

.grey {
    color: #5f5f5f;
}

.normal {
    font-weight: normal;
}

.small {
    font-size: small;
}

button:hover {
    background: #334ba4;
}

#rexeliumContent {
    padding: 0;
}

#rexeliumContent #typeDeVerticalFeature {
    padding: 20px;
}

#rexeliumContent #typeDeVerticalFeature .TileCollection {
    margin: 9px;
}

#rexeliumContent .form-basic.featureform .form-row {
    padding: 0px;
    /*border-bottom:1px solid #eee;*/
    position: relative;
    margin-top: 4px;
    margin-bottom: 4px;
}

.form-row {
    margin-right: 0px;
    margin-left: 0px;
}

#rexeliumContent .elevation1 {
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
    background-color: #fff;
}

#rexeliumContent .elevation2 {
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
    background-color: #fcfcfc;
}

#rexeliumContent .elevation3 {
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
    background-color: #f5f5f5;
}

#rexeliumContent .elevation1 .ConfigRow {
    border-top: solid 1px #f5f5f5;
    position: relative;
}

#rexeliumContent .elevation2 .ConfigRow {
    border-top: solid 1px #eee;
    position: relative;
    display: flex;
}

#rexeliumContent .elevation3 .ConfigRow {
    border-top: solid 1px #e5e5e5;
    position: relative;
}

#rexeliumContent .subpage {
    height: 100%;
    width: 100%;
}

#subpageConfig,
#subpageSolution {
    height: 100%;
}

.DetailsSolutionCol {
    border-left: solid 1px #ddd;
}

#rexeliumContent .SimpleForm input {
    margin: 3px;
    background: #f5f5f5;
    border: 1px solid #194788;
}

#rexeliumContent .SimpleForm input[type=submit] {
    background: #194788;
    color: #fff;
}

#rexeliumContent .form-title-row {
    text-align: left;
}

#rexeliumContent .Info {
    color: rgb(20, 121, 175);
    padding: 3px;
    font-size: 0.95em;
}

#rexeliumContent .form-basic h1 {
    font-size: 1.2em;
    margin-top: 0px;
    margin-bottom: 5px;
    font-weight: bold;
    display: inline-block;
    box-sizing: border-box;
    padding: 6px 5px 6px;
    margin: 0;
}

#rexeliumContent .form-basic .pageGroup .page>h1 {
    min-height: 50px;
}

#rexeliumContent .form-basic.featureform .form-row.form-select-row {
    min-height: 80px;
    /*height:auto;*/
}

#rexeliumContent .form-basic.featureform .page .form-row:nth-child(2n+1) {
    /*border-left: 2px solid #eee;*/
}

#rexeliumContent .form-basic .form-row .form-row-description {
    width: 16%;
    text-align: right;
    vertical-align: top;
    padding: 12px 45px 12px 5px;
    height: 100%;
    padding: 2px;
    position: relative;
    padding-right: 15px;
}

#rexeliumContent .colStep {
    width: 60px;
}

#rexeliumContent .colStep h1 {
    position: absolute;
    top: 25px;
    left: 57px;
}

#rexeliumContent .colStep div {
    position: absolute;
    top: 35px;
    left: 7px;
    font-size: 7em;
    color: #ececec;
}

#rexeliumContent .form-basic h3 {
    margin-top: 3px;
    margin-bottom: 5px;
    font-size: 1.1em;
    font-weight: normal;
}

#rexeliumContent .form-basic.featureform .form-row.form-select-row {
    min-height: 80px;
    /*height:auto;*/
}

#rexeliumContent .form-basic.featureform .form-row.form-select-row {
    min-height: 80px;
    height: auto !important;
    color: #58585a;
}

#rexeliumContent .form-row-description,
#rexeliumContent .form-row-selection,
#rexeliumContent .form-block {
    display: inline-block;
}


/* The switch - the box around the slider */

#rexeliumContent .Switch {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 50px;
    height: 24px;
    margin-top: 4px;
}


/* Hide default HTML checkbox */

#rexeliumContent .Switch input {
    display: none;
}

#rexeliumContent .Slider.round:before {
    border-radius: 50%;
}

#rexeliumContent input:checked+.Slider {
    background-color: #2396d3;
}

#rexeliumContent .Slider.round {
    border-radius: 24px;
}


/* The slider */

#rexeliumContent .Slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ddd;
    -webkit-transition: .4s;
    transition: .4s;
}

#rexeliumContent .Switch.disabled .Slider {
    background-color: #eee;
}

#rexeliumContent .Slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

#rexeliumContent input:checked+.Slider {
    background-color: #2396d3;
}

#rexeliumContent input:focus+.Slider {
    box-shadow: 0 0 1px #2396d3;
}

#rexeliumContent input:not(:checked)+.Slider:before {
    left: 3px;
}

#rexeliumContent input:checked+.Slider:before {
    /*-webkit-transform: translateX(140%);
  -ms-transform: translateX(140%);
  transform: translateX(140%);*/
    /*right:3px;*/
    left: calc(100% - 22px);
}

#rexeliumContent .form-row-selection {
    width: 80%;
    height: 100%;
    padding: 2px;
    /*overflow:auto;*/
    /*overflow-y: auto;*/
    position: relative;
    min-height: 89px;
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
}

#rexeliumContent .TileGroup,
#rexeliumContent .FilterGroup {
    padding: 5px;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    margin: auto;
}

#rexeliumContent .TileGroup.C1 .Tile,
#rexeliumContent .TileDescriptionGroup.C1 .Tile,
#rexeliumContent .FilterGroup.C1 .List,
#rexeliumContent .TileGroup.C1 .Title,
#rexeliumContent .FilterGroup.C1 .Title,
#rexeliumContent .TileGroup.C1 .Group,
#rexeliumContent .FilterGroup.C1 .Group {
    width: calc(100% - 4px);
}

#rexeliumContent .TileGroup.C2 .Tile,
#rexeliumContent .TileDescriptionGroup.C2 .Tile,
#rexeliumContent .FilterGroup.C2 .List,
#rexeliumContent .TileGroup.C2 .Title,
#rexeliumContent .FilterGroup.C2 .Title,
#rexeliumContent .TileGroup.C2 .Group,
#rexeliumContent .FilterGroup.C2 .Group {
    width: calc(50% - 4px);
}

#rexeliumContent .TileGroup.C3 .Tile,
#rexeliumContent .TileDescriptionGroup.C3 .Tile,
#rexeliumContent .FilterGroup.C3 .List,
#rexeliumContent .TileGroup.C3 .Title,
#rexeliumContent .FilterGroup.C3 .Title,
#rexeliumContent .TileGroup.C3 .Group,
#rexeliumContent .FilterGroup.C3 .Group {
    width: calc(33.33% - 4px);
}

#rexeliumContent .TileGroup.C4 .Tile,
#rexeliumContent .TileDescriptionGroup.C4 .Tile,
#rexeliumContent .FilterGroup.C4 .List,
#rexeliumContent .TileGroup.C4 .Title,
#rexeliumContent .FilterGroup.C4 .Title,
#rexeliumContent .TileGroup.C4 .Group,
#rexeliumContent .FilterGroup.C4 .Group {
    width: calc(25% - 4px);
}

#rexeliumContent .TileGroup.C5 .Tile,
#rexeliumContent .TileDescriptionGroup.C5 .Tile,
#rexeliumContent .FilterGroup.C5 .List,
#rexeliumContent .TileGroup.C5 .Title,
#rexeliumContent .FilterGroup.C5 .Title,
#rexeliumContent .TileGroup.C5 .Group,
#rexeliumContent .FilterGroup.C5 .Group {
    width: calc(20% - 4px);
}

#rexeliumContent .TileGroup.C6 .Tile,
#rexeliumContent .TileDescriptionGroup.C6 .Tile,
#rexeliumContent .FilterGroup.C6 .List,
#rexeliumContent .TileGroup.C6 .Title,
#rexeliumContent .FilterGroup.C6 .Title,
#rexeliumContent .TileGroup.C6 .Group,
#rexeliumContent .FilterGroup.C6 .Group {
    width: calc(16.66% - 4px);
}

#rexeliumContent .TileGroup.C7 .Tile,
#rexeliumContent .TileDescriptionGroup.C7 .Tile,
#rexeliumContent .FilterGroup.C7 .List,
#rexeliumContent .TileGroup.C7 .Title,
#rexeliumContent .FilterGroup.C7 .Title,
#rexeliumContent .TileGroup.C7 .Group,
#rexeliumContent .FilterGroup.C7 .Group {
    width: calc(14.28% - 4px);
}

#rexeliumContent .TileGroup.C8 .Tile,
#rexeliumContent .TileDescriptionGroup.C8 .Tile,
#rexeliumContent .FilterGroup.C8 .List,
#rexeliumContent .TileGroup.C8 .Title,
#rexeliumContent .FilterGroup.C8 .Title,
#rexeliumContent .TileGroup.C8 .Group,
#rexeliumContent .FilterGroup.C8 .Group {
    width: calc(12.5% - 4px);
}

#rexeliumContent .TileGroup.C9 .Tile,
#rexeliumContent .TileDescriptionGroup.C9 .Tile,
#rexeliumContent .FilterGroup.C9 .List,
#rexeliumContent .TileGroup.C9 .Title,
#rexeliumContent .FilterGroup.C9 .Title,
#rexeliumContent .TileGroup.C9 .Group,
#rexeliumContent .FilterGroup.C9 .Group {
    width: 10.1%;
}

#rexeliumContent .TileGroup.C10 .Tile,
#rexeliumContent .TileDescriptionGroup.C10 .Tile,
#rexeliumContent .FilterGroup.C10 .List,
#rexeliumContent .TileGroup.C10 .Title,
#rexeliumContent .FilterGroup.C10 .Title,
#rexeliumContent .TileGroup.C10 .Group,
#rexeliumContent .FilterGroup.C10 .Group {
    width: 9%;
}

#rexeliumContent .FilterGroup .Group .Title,
#rexeliumContent .TileDescriptionGroup .Group .Tile,
#rexeliumContent .FilterGroup .Group .List {
    width: 100%;
}

#rexeliumContent .TileGroup.C1,
.TileGroup.C2,
#rexeliumContent .TileGroup.C3,
.TileGroup.C4,
#rexeliumContent .TileDescriptionGroup.C1,
#rexeliumContent .TileDescriptionGroup.C2,
#rexeliumContent .TileDescriptionGroup.C3,
#rexeliumContent .TileDescriptionGroup.C4 {
    max-width: 1071px;
}

#rexeliumContent .TileGroup.configuratorTileGroup.C1,
#rexeliumContent .TileGroup.configuratorTileGroup.C2,
#rexeliumContent .TileGroup.configuratorTileGroup.C3,
#rexeliumContent .TileGroup.configuratorTileGroup.C4 {
    max-width: none;
}

#rexeliumContent .TileGroup.collectionTileGroup.C1,
#rexeliumContent .TileGroup.collectionTileGroup.C2,
#rexeliumContent .TileGroup.collectionTileGroup.C3,
#rexeliumContent .TileGroup.collectionTileGroup.C4 {
    max-width: none;
}


/************ TILE DESIGN **************/

#rexeliumContent .Tile {
    display: inline-block;
    width: 32%;
    vertical-align: top;
    /*background: #e2e9f3;*/
    /*background: #b0c4de;*/
    color: #0056b3;
    font-size: 0.9em;
    position: relative;
    overflow: hidden;
    max-width: 353px !important;
    margin: 2px;
    border: none !important;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
    background-color: #fff;
    transition: 0.5s;
}

#rexeliumContent div.Tile .card-img-container {
    position: relative !important;
    height: 140px !important;
    width: 140px !important;
    margin: auto;
    background: #ddd;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    border-radius: 50%;
}

#rexeliumContent div.Tile .card-img-container img {
    width: 100%;
    opacity: 1 !important;
}

#rexeliumContent .Tile h3 {
    margin: 0;
    font-weight: normal;
    color: #0056b3;
}

#rexeliumContent .Tile.ProductTile .titleContener {
    background: #fff;
}

#rexeliumContent .Tile .titleContener h3,
#rexeliumContent .Tile .titleContener span {
    padding: 5px;
}

#rexeliumContent .titleContener {
    background: rgba(255, 255, 255, 0);
    text-align: center;
    padding-top: 5px;
    min-height: 34px;
    position: relative;
    overflow: hidden;
}

#rexeliumContent .Tile .titleContener .imgContener {
    max-height: 300px;
    position: relative;
    z-index: 1;
    display: block;
    height: 110px;
    min-height: 60px;
    padding: 4px;
}

#rexeliumContent .Tile .card-title-container p {
    font-size: 1.2em;
    font-weight: bold;
}

#rexeliumContent .Tile .titleContener .content {
    max-height: 300px;
    width: 100%;
    overflow: hidden;
    position: relative;
    padding-left: 8px;
    padding-right: 8px;
    z-index: 1;
    display: inline-block;
}
#rexeliumContent .Tile .titleContener .imgContener {
    overflow:hidden;
}
#rexeliumContent .Tile .titleContener .imgContener img {
    max-width: 250px;
    min-width: 190px;
    min-height: 100px;
    max-height: 120px;
    object-fit: contain;
}

#rexeliumContent .Tile .TileCursor.float {
    position: absolute;
    margin: 5px;
}

#rexeliumContent .Tile .TileCursor {
    padding: 4px;
    width: 23px;
    background: #ddd;
    height: 23px;
    border-radius: 50%;
    margin: 5px auto;
}

#rexeliumContent .Tile .TileCursor div {
    background: #fffd;
    height: 15px;
    width: 15px;
    border-radius: 50%;
}

#rexeliumContent .Tile .TileCursor div span {
    font-size: 0.8em;
    position: relative;
    top: -1px;
    color: transparent;
    margin: 0;
    padding: 0;
}

#rexeliumContent .ConfigTile h3,
#rexeliumContent .TileCollection h3 {
    margin-top: 10px;
    /*color: #194788;*/
    color: #07193f;
    font-weight: normal;
    margin: 0;
    position: relative;
    z-index: 1;
    padding: 5px;
    background: rgba(255, 255, 255, 0.3);
    padding: 10px;
}


/* /hover */

#rexeliumContent .Tile:hover .titleContener h3,
#rexeliumContent .Tile:hover .titleContener p,
#rexeliumContent .Tile:hover .input-container,
#rexeliumContent .Tile:hover .input-container .complete,
#rexeliumContent .Tile:hover .input-container input {
    color: #eee;
}

#rexeliumContent .Tile:hover,
#rexeliumContent .Tile.DesignModern:hover,
#rexeliumContent .Tile.DesignModern2:hover,
#rexeliumContent .Tile.selected:hover,
#rexeliumContent .Tile.selected.DesignModern:hover,
#rexeliumContent .Tile.selected.DesignModern2:hover {
    background: rgb(63, 159, 212);
    color: #eee;
}

#rexeliumContent .Tile:hover .card-img-container {
    background-color: #fff8;
}

#rexeliumContent .Tile:hover .card-title-container p {
    color: #fff !important
}

#rexeliumContent .Tile:hover .TileCursor,
#rexeliumContent .Tile.selected .TileCursor {
    background: rgb(63, 159, 212) !important;
}

#rexeliumContent .Tile.noaction:hover,
#rexeliumContent .Tile.noaction.DesignModern:hover,
#rexeliumContent .Tile.noactionDesignModern2:hover,
#rexeliumContent .Tile.noaction.selected:hover,
#rexeliumContent .Tile.noaction.selected.DesignModern:hover,
#rexeliumContent .Tile.noaction.selected.DesignModern2:hover {
    background: #fafafa;
    color: #0056b3;
}

#rexeliumContent .Tile.noaction:hover .card-img-container {
    background-color: #ddd;
}

#rexeliumContent .Tile.noaction:hover .card-title-container p {
    color: #0056b3 !important
}

#rexeliumContent .Tile.noaction:hover .TileCursor,
#rexeliumContent .Tile.noaction.selected .TileCursor {
    background: rgb(63, 159, 212) !important;
}


/* disabled */

#rexeliumContent .Tile.disabled {
    background: #e1e2e3;
}

#rexeliumContent .Tile.disabled h3,
#rexeliumContent .Tile.disabled {
    color: #aaa;
}

#rexeliumContent .Tile.disabled2 {
    background: #e1e2e3;
}

#rexeliumContent .Tile.disabled2 h3,
#rexeliumContent .Tile.disabled2 {
    color: #aaa;
}

#rexeliumContent .Tile.disabled2:hover {
    background: rgb(63, 159, 212);
    color: #eee;
}

#rexeliumContent .Tile.disabled:hover {
    background: #f38383;
    cursor: not-allowed;
}

#rexeliumContent .Tile.selected {
    background: rgba(44, 152, 210, 0.2);
}

#rexeliumContent .Tile.selected .TileCursor div span {
    color: rgb(63, 159, 212) !important;
}


/************ END TILE DESIGN **************/

#rexeliumContent .List,
#rexeliumContent .form-basic select.List,
#rexeliumContent .Group {
    display: inline-block;
    position: relative;
    font-size: 0.9em;
    padding: 3px 6px;
    background-color: #fff;
}

#rexeliumContent ul li {
    width: 100%;
    border-bottom: 1px solid #ddd;
    color: #697487;
}

#rexeliumContent ul li:hover {
    background: #aaa;
    color: #fff;
}

#rexeliumContent .form-row-selection ul li span {
    font-size: 0.8em;
}

#rexeliumContent .List option {
    width: 100%;
    border-bottom: 1px solid #ddd;
    color: #697487;
    font-size: 0.9em;
}

#rexeliumContent .List option:hover {
    background: rgba(62, 106, 177, 0.9);
    color: #fff;
}

#rexeliumContent .List option:checked {
    background: #2e4eaa;
    color: #fff;
}

#rexeliumContent .List option[selected=selected] {
    background: #2e4eaa;
    color: #fff;
}

#rexeliumContent .ListOption.disabled {
    color: #e1e2e3;
}

#rexeliumContent .ListOption.disabled:hover {
    background: #f38383;
    cursor: not-allowed;
}

#rexeliumContent .form-basic .form-row .Tile:hover span.writeoption,
#rexeliumContent .form-basic .form-row .Tile.selected span.writeoption {
    color: #eee;
}

#rexeliumContent .popup_block .innertitle {
    min-height: 30px;
    padding-top: 7px;
}

#rexeliumContent .input-container {
    position: relative;
    height: 38px;
    vertical-align: middle;
    margin-left: 5px;
}

#rexeliumContent .popup_block .input-container {
    max-width: 200px;
    border-bottom: 1px solid #05438e;
    margin: 10px auto;
}

#rexeliumContent .input-container .complete,
#rexeliumContent .input-container input {
    position: absolute;
    top: 0;
    left: 0;
    cursor: text;
    padding: 0px;
    padding-left: 5px;
    line-height: 35px;
    height: 36px;
    text-align: left;
    font-size: 0.9em;
}

#rexeliumContent .input-container .complete {
    width: 100%;
    max-width: 365px;
}

#rexeliumContent .input-container input {
    background: transparent;
}

#rexeliumContent table {
    color: #194788;
}

#rexeliumContent .tablemenu {
    float: right;
    color: #fff;
    background: #c06666;
    padding-left: 5px;
}

#rexeliumContent .ConfigTile,
#rexeliumContent .TileCollection {
    margin: 3px;
    max-width: 340px;
}

#rexeliumContent .ConfigTile img,
#rexeliumContent .TileCollection img {
    min-width: 100%;
    opacity: 1;
}

#rexeliumContent .ConfigTile .content,
#rexeliumContent .TileCollection .content {
    opacity: 0;
}

#rexeliumContent .ConfigTile:hover .content,
#rexeliumContent .TileCollection:hover .content {
    opacity: 1;
    transition: 0.5s;
}

#rexeliumContent .ConfigTile:hover img,
#rexeliumContent .TileCollection:hover img {
    opacity: 0.2;
    transition: 0.2s;
}

#rexeliumContent .form-basic .form-row .form-row-description h3 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.0em;
    font-weight: normal;
}

#rexeliumContent .label {
    font-size: 0.8em;
    font-weight: bold;
    padding-bottom: 3px;
    padding-top: 3px;
    padding-left: 5px;
    padding-right: 5px;
}


/************************* PAGE CONTROL ***************************/

#rexeliumContent .form-pagecontrol-row {
    display: inline-block;
    width: 100%;
    background-color: white;
    padding: 5px;
    text-align: left;
    border-top: 1px solid #eee;
    position: relative;
}

#rexeliumContent .form-pagecontrol-row.fixed {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 0;
    padding: 0;
    border-radius: 0px;
    border: 1px solid #eee;
}

#rexeliumContent .form-pagecontrol-row {
    display: none;
}

#rexeliumContent .form-pagecontrol-row.fixed {
    display: inline-block;
    padding: 5px;
    z-index: 2;
}

#rexeliumContent imgLoader2 Loader {
    margin: 0;
    height: 100%;
    min-height: 20px;
    max-height: 130px;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
#rexeliumContent #CartFeatures .form-pagecontrol-row {
    margin-top:30px;
}
#rexeliumContent .form-pagecontrol-row {
    padding: 0 !important;
    z-index: 1;
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
    background-color: transparent !important;
    padding: 0 !important;
    min-height: 45px !important;
    text-align: left !important;
    position: relative !important;
    padding-top: 13px !important;
    /*display: -webkit-box !important;
    display: -ms-flexbox !important;*/
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
}

#rexeliumContent .form-pagecontrol-row .pagenumber {
    display: none !important;
}


/***************** END PAGE CONTROL BUTTON ***************************/


/************************* PAGE CONTROL BUTTON ***************************/

#rexeliumContent .form-pagecontrol-row button,
#rexeliumContent button.rexeliumBtn {
    height: 38px !important;
    border: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    border-radius: 4px !important;
    padding: 0 40px !important;
    background: #2e4eaa !important;
    font-size: 12px !important;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    width: auto !important;
    background: white !important;
    border: 1px solid #2e4eaa !important;
    color: #2e4eaa !important;
}

.navbar {
    padding: 0 !important;
    margin: 0 !important;
}

.navbar .navbar-nav {
    padding: 0 !important;
    margin: 0 !important;
    margin-left: 10px;
}

.navbar .nav-item {
    width: 102px;
    min-height: 62px;
    background-color: #f5f5f5 !important;
    margin-left: 10px;
    cursor:pointer;
}

.navbar-expand-sm .navbar-nav .nav-link {
    padding: 0;
}

.navbar .nav-item img {
    height: 22px;
    margin-top: 20px;
}

.navbar .nav-item:hover {
    background-color: #2e4eaa !important;
    color: #fff;
}

#rexeliumContent {
    min-height: calc(100vh - 123px);
    background: #fff;
}

#rexeliumContent .form-pagecontrol-row button.right {
    background: #2e4eaa !important;
    color: #fff !important;
    border: 1px solid #2e4eaa !important;
}

#rexeliumContent .form-pagecontrol-row button img,
#rexeliumContent button.rexeliumBtn img {
    width: 8px !important;
    height: 13px !important;
}

#rexeliumContent button.rexeliumBtn.EtiquetteButton {
    position: absolute;
    left: 0;
    border: none !important;
    display: flex;
}

#rexeliumContent .topControl {
    z-index: 1;
    width: 100%;
    background-color: transparent !important;
}

#rexeliumContent .topControl .form-pagecontrol-row {
    width: 100%;
    background-color: transparent !important;
    padding-top: 8px;
}

#rexeliumContent button.rexeliumBtn {
    vertical-align: middle;
}

#rexeliumContent button.rexeliumBtn img {
    margin-right: 5px;
}

#rexeliumContent button.rexeliumBtn img,
#rexeliumContent button.rexeliumBtn p {
    display: inline-block;
}

#rexeliumContent .form-pagecontrol-row button.right p,
#rexeliumContent button.rexeliumBtn.right p {
    color: #fff !important;
}

#rexeliumContent .form-pagecontrol-row button p,
#rexeliumContent button.rexeliumBtn p {
    margin: 0 !important;
    color: #2e4eaa !important;
}

#rexeliumContent .form-pagecontrol-row button.left img,
#rexeliumContent .form-pagecontrol-row button.left span.fa,
#rexeliumContent button.rexeliumBtn.lef span.fa {
    margin-right: 8px !important;
}

#rexeliumContent .form-pagecontrol-row button.right img,
#rexeliumContent .form-pagecontrol-row button.right span.fa,
#rexeliumContent button.rexeliumBtn.right span.fa {
    margin-left: 8px !important;
}

#rexeliumContent .form-pagecontrol-row button.ResultButton img {
    width: 18px !important;
    height: 18px !important;
    margin-right: 8px !important;
}

#rexeliumContent .form-pagecontrol-row button.right:hover,
#rexeliumContent button.rexeliumBtn.right:hover {
    background: #27428e !important;
}

#rexeliumContent .form-pagecontrol-row button:hover,
#rexeliumContent button.rexeliumBtn:hover {
    background: #f5f5f5 !important;
}

.splitTop {
    border-top: 2px solid #428be6;
    background: url(/img/bottom_arrow.png) no-repeat center top;
    padding-top: 20px !important;
}


/***************** END PAGE CONTROL BUTTON ***************************/


/***************** BUTTON ********************/

#rexeliumContent .mui-btn {
    border-radius: 0 !important;
    width: 100% !important;
    height: auto !important;
    font-size: 12px !important;
    margin-bottom: 3px !important;
}


/***************** FLEX ***********************/

.flex-row {
    /*display: -webkit-box !important;
    display: -ms-flexbox !important;*/
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
}

.flex-column {
    /*display: -webkit-box !important;
    display: -ms-flexbox !important;*/
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
}

.expand {
    /*display: -webkit-box !important;
    display: -ms-flexbox !important;*/
    display: flex !important;
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 !important;
    flex: 1 !important;
}

#rexeliumContent .form-basic button.left {
    float: left;
}

#rexeliumContent .form-basic .finalizeGroup,
#rexeliumContent .finalizeGroup {
    float: right
}

#rexeliumContent table,
#rexeliumContent table a {
    color: #333333 !important;
    padding-left: 10px;
}

#rexeliumContent table.scrollTable {
    background: #f5f5f5 !important;
    border-spacing: 4px !important;
    border-collapse: separate !important;
    min-height: auto !important;
}

#rexeliumContent table.scrollTable thead,
#rexeliumContent table.scrollTable thead tr th {
    background: #2e4eaa !important;
    color: white !important;
    font-weight: bold !important;
}

#rexeliumContent table.scrollTable thead tr th.DesCell,
#rexeliumContent table.scrollTable thead tr th.RefCell,
#rexeliumContent table.scrollTable tbody tr td.DesCell,
#rexeliumContent table.scrollTable tbody tr td.RefCell {
    /*width: 100px !important;*/
}

#rexeliumContent table.scrollTable tbody tr.isResume td.DesCell {
    color: #333;
    font-weight: bold;
    text-align: left;
    overflow: visible;
    white-space: nowrap !important;
}

#rexeliumContent table.scrollTable thead tr th.sup,
#rexeliumContent table.scrollTable tbody tr td.sup,
#rexeliumContent table.scrollTable thead tr th.InfoCell,
#rexeliumContent table.scrollTable tbody tr td.InfoCell,
#rexeliumContent table.scrollTable thead tr th.sél,
#rexeliumContent table.scrollTable tbody tr td.sél,
#rexeliumContent table.scrollTable thead tr th.toogleCell,
#rexeliumContent table.scrollTable tbody tr td.toogleCell {
    width: 20px;
    padding: 0;
}

#rexeliumContent table.scrollTable tbody {
    overflow: auto !important;
}

#rexeliumContent table.scrollTable tr {
    background-color: transparent !important;
}

#rexeliumContent table.scrollTable tr.isResume {
    background: red;
    border-spacing: 0;
}

#rexeliumContent table.scrollTable td {
    background: white !important;
    margin: 5px !important;
    white-space: normal !important;
}

#rexeliumContent table.scrollTable th {
    background: white !important;
    margin: 5px !important;
    color: #333333 !important;
    white-space: normal !important;
}

#rexeliumContent .popup_block button {
    margin-top: 0 !important;
}

#rexeliumContent table.scrollTable .FeatureCell {
    width: auto !important;
}

#rexeliumContent table.scrollTable .QtyCell.WithUnit {
    padding-right: 5px !important;
}

@media (max-width:1099px) {
    #rexeliumContent .TileGroup {
        overflow: hidden;
        width: 92%;
        margin: auto;
    }
}

#rexeliumContent table tr td.tar {
    width: 10%;
    min-width: 50px
}

#rexeliumContent table tr {
    background: #fff;
    font-size: 0.95em;
    min-height: 25px;
}

#rexeliumContent table tr:nth-child(2n+1) {
    background: #fafafa;
}

#rexeliumContent table tr:hover {
    background-color: #ededed;
}

#rexeliumContent table tr.selected {
    background-color: #ddd;
}

#rexeliumContent table tr td.inputcell {
    padding: 0;
}

#rexeliumContent table tr td.inputcell select {
    padding: 5px;
    margin: 0;
}

#rexeliumContent table.scrollTable tbody {
    display: block;
    max-height: 450px;
    overflow-y: scroll;
    position: relative;
}

#rexeliumContent div.classified2 {
    width: 89%;
    min-height: 376px;
}

#rexeliumContent table.scrollTable thead,
#rexeliumContent table.scrollTable tbody tr,
#rexeliumContent table.scrollTable tfoot tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

#rexeliumContent table.scrollTable tbody tr td {
    display: table-cell;
}


/***************** END FLEX ***********************/

#rexeliumContent .masklayer {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(50, 50, 50, 0.3);
    z-index: 1;
    top: 0;
    left: 0;
    display: flex
}

#rexeliumContent .popup_block {
    display: none;
    /*--masqué par défaut--*/
    background: #fff;
    color: #194788;
    z-index: 99999;
    /*--Les différentes définitions de Box Shadow en CSS3--*/
    -webkit-box-shadow: 0px 0px 10px #555;
    -moz-box-shadow: 0px 0px 10px #555;
    box-shadow: 0px 0px 10px #555;
    border-radius: 7px;
    transition: opacity 0.5s;
}

#rexeliumContent .popup_block.fixedPopup {
    position: fixed;
    float: left;
    top: 50%;
    left: 50%;
}

#rexeliumContent .popup_block.absolutePopup {
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #194788;
}

#rexeliumContent .popup_block .content {
    padding: 1px;
    /***height:100%;*/
}

#rexeliumContent .popup_block p {
    margin: 0;
}

#rexeliumContent .popup_block .content {
    padding: 0 0 4px 0;
    background: #f6f6f6;
    border-radius: 7px;
}

#rexeliumContent .popup_block.absolutePopup .content {
    background: #fff;
}

#rexeliumContent .popup_block .innerreader {
    overflow-Y: scroll;
    overflow-x: hidden;
    padding: 10px;
    background: white;
    border-top: 1px solid #f1f1f1;
    text-align: left;
}

#rexeliumContent .popup_block .split {
    width: 49%;
    display: inline-block;
    vertical-align: top;
    margin-top: 5px;
}

#rexeliumContent .popup_block .input-container input {
    border: none;
    width: 100%;
}

#rexeliumContent .popup_block .input-container input:hover {
    cursor: pointer;
}

#rexeliumContent .popup_block .split {}

#rexeliumContent .popup_block .innerreader2 div.split {
    border-right: 1px solid rgb(201, 213, 228);
}

#rexeliumContent .popup_block .innerreader2 div.split:last-child {
    border: none;
}

#rexeliumContent .popup_block .innerreader2 .split .nomfab {
    font-weight: bold;
    font-size: 24px;
}

#rexeliumContent .popup_block .innerreader2 {
    overflow-Y: auto;
    overflow-x: hidden;
    padding: 10px;
    background: white;
    border-top: 1px solid #f1f1f1;
    text-align: center;
}

#rexeliumContent .popup_block .innerreader2 img {
    min-height: 50px;
    max-height: 150px;
    max-width: 350px;
}

#rexeliumContent .pureForm .content {
    padding-bottom: 37px !important;
    background: none !important;
}

#rexeliumContent .pureForm .content>div:last-child {
    min-height: 0 !important;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

#rexeliumContent .pureForm .innertitle {
    font-size: 14px !important;
    text-transform: uppercase !important;
    background-color: #2e4eaa !important;
    padding: 15px 0 !important;
}

#rexeliumContent .pureForm .innertitle h3 {
    color: #FFF !important;
}

#rexeliumContent .pureForm .reponse {
    margin-top: 8px !important;
    display: inline-block !important;
    padding: 3px 1px !important;
}

#rexeliumContent .pureForm .pureformrow:not(:last-child) .reponse {
    background-color: #F3F3F3 !important
}

#rexeliumContent .pureForm .pureformrow:last-child {
    margin-bottom: 0 !important;
}

.pureForm innerreader div.reponse div.reponseblock {
    margin: 0 2px;
}

#rexeliumContent .pureForm button,
#rexeliumContent button,
#rexeliumContent .form-pagecontrol-row button,
#rexeliumContent .pureForm .content button,
#rexeliumContent .form-pagecontrol-row button {
    align-items: center !important;
}

#rexeliumContent .pureForm button span.fa,
#rexeliumContent button,
#rexeliumContent .form-pagecontrol-row button span.fa,
#rexeliumContent .pureForm .content button span.fa,
#rexeliumContent .form-pagecontrol-row button span.fa {
    margin-left: 0px !important;
    margin-right: 8px !important;
}

#rexeliumContent .pureForm button.long,
#rexeliumContent button.long,
#rexeliumContent .form-pagecontrol-row button.long,
#rexeliumContent .pureForm .content button.long,
#rexeliumContent .form-pagecontrol-row button.long {
    max-width: 250px !important;
}

#rexeliumContent .pureForm .question {
    color: #333333 !important;
    font-weight: bold !important;
}

.innerreader2 {
    line-height: 1.2;
    font-size: 15px;
}

.innerreader2 div.reponse,
.innerreader2 textarea {
    font-size: 14px;
    color: #5f686f;
}

.innerreader2 div.reponse div.reponseblock {
    margin: 5px 10px;
    display: inline-block;
    position: relative;
}

.innerreader2 div.pureformrow {
    margin: 7px auto;
}

.innerreader2 .pureformradioblock label {
    display: block;
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    color: #5f686f;
}

.innerreader2 .pureformradioblock label::before {
    content: "";
    display: block;
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 5px solid #bbb;
    background: rgba(255, 255, 255, 0.7);
    left: 0;
    top: 0;
}

.innerreader2 .pureformradioblock input:checked+label::before {
    border-color: #2396d3;
}

.innerreader2 .pureformradioblock input {
    display: none;
}

#rexeliumContent .pureForm input[type="radio"]+label {
    padding-left: 20px !important;
    color: #333333 !important;
    padding: 10px 20px !important;
    background-color: #FFF !important;
}

#rexeliumContent .pureForm input[type="radio"]:checked+label {
    background-color: #2e4eaa !important;
    color: #FFF !important;
}

#rexeliumContent .pureForm input[type="radio"]+label:before,
#rexeliumContent .pureForm input[type="radio"]:checked+label:after {
    content: none;
}

#rexeliumContent .btn_close {
    padding: 0;
    padding-top: 2px;
    padding-right: 10px;
    font-size: 27px;
    margin: 5px;
    color: #eee;
}

#rexeliumContent .btn_close:hover {
    color: #fff;
}

#rexeliumContent .pureForm .pureformrow:not(:last-child) {
    margin-bottom: 30px !important;
}

#rexeliumContent .pureForm .innerreader,
#rexeliumContent .pureForm .innerreader2 {
    padding: 30px 40px 37px !important;
}

#rexeliumContent div.buttons-container {
    position: relative;
}

#rexeliumContent div.Info {
    color: rgb(20, 121, 175);
    background: aliceblue;
    padding: 5px;
    margin: 5px;
}

#rexeliumContent div.Error {
    color: #D8000C;
    background-color: #FFBABA;
    padding: 5px;
}

#rexeliumContent div.Success {
    color: #4F8A10;
    background-color: #DFF2BF;
    padding: 5px;
}

#rexeliumContent div.Warning {
    color: #9F6000;
    background-color: #FEEFB3;
    padding: 5px;
}

#rexeliumContent div.Error {
    color: #D8000C;
    background-color: #FFBABA;
    padding: 5px;
}

#rexeliumContent div.subdownloadmenu {
    position: absolute;
    width: 100%;
    bottom: -25px;
    background: #eee;
}

#rexeliumContent div.subdownloadmenu span {
    width: 100%;
    display: block;
    border-bottom: 1px solid #ccc;
    height: 25px;
    padding: 4px;
}

#rexeliumContent .pureForm textarea {
    width: 550px !important;
    margin: 0 auto !important;
    height: 200px !important;
    resize: none !important;
    padding: 12px 15px !important;
    outline: none !important;
}

#rexeliumContent .pureForm .content button {
    max-width: 200px !important;
    -webkit-transition: none !important;
    transition: none !important;
    background: white !important;
    border: 1px solid #2e4eaa !important;
    color: #2e4eaa !important;
    padding: 10px;
}

#rexeliumContent .pureForm .content button.right {
    background: #2e4eaa !important;
    color: #fff !important;
    border: 1px solid #2e4eaa !important;
}

#rexeliumContent .pureForm .content button.right:hover {
    background: #27428e !important;
}

#rexeliumContent .pureForm .content button:hover {
    background: #f5f5f5 !important;
}

#rexeliumContent table {
    width: 100%;
}

#rexeliumContent table td {
    padding: 3px;
}


/* custom scrollbar */

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-button {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: #cacaca;
    border-radius: 50px;
}

 ::-webkit-scrollbar-thumb:hover {
    background: #c4c4c4;
}

 ::-webkit-scrollbar-thumb:active {
    background: #bababa;
}

::-webkit-scrollbar-track {
    background: #e4e4e4;
    border-radius: 50px;
}

 ::-webkit-scrollbar-track:hover {
    background: #e4e4e4;
}

 ::-webkit-scrollbar-track:active {
    background: #e4e4e4;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

.element {
    width: 100px;
    /* background-color: rgba(0, 0, 0, 0); */
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
}

.infobulle {
    z-index: 100;
    transform: scale(0) rotateX(-180deg);
    width: 373px;
    position: absolute;
    background-color: midnightblue;
    color: white;
    padding: 8px;
    padding-bottom: 100px;
    margin-top: -73px;
    box-shadow: 1px 1px 0 0.5px rgba(0, 0, 0, 0.3);
    border-bottom: 3px solid rgba(255, 255, 255, 0.3);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    transition: 1s;
}


/* .infobulle::before {
    content: '';
    position: absolute;
    border-bottom: 8px solid #2e3048;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    margin-top: -16px;
    margin-left: 10px;
} */

.element:hover .infobulle {
    transform: scale(1) rotateX(0deg);
}

.infobulle1 {
    z-index: 100;
    transform: scale(0) rotateX(-180deg);
    width: 288px;
    position: absolute;
    background-color: midnightblue;
    color: white;
    padding: 8px;
    padding-bottom: 100px;
    margin-top: -78px;
    box-shadow: 1px 1px 0 0.5px rgba(0, 0, 0, 0.3);
    border-bottom: 3px solid rgba(255, 255, 255, 0.3);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    transition: 1s;
}

.element:hover .infobulle1 {
    transform: scale(1) rotateX(0deg);
}

.PopinRessources a:hover {
    background-color: #ddd;
}

#DetailsPopinRessources {
    line-height: 18px;
    text-align: left;
    cursor: pointer;
    padding-left: 10px;
}