body, #bodyElemnt { display:flex; flex-flow:column nowrap; justify-content:space-between; align-items:stretch; margin:0; padding:0; height:100vh; min-width:var(--minWidth); align-self:center; overflow-x:hidden; background-color:rgb(var(--whiteRGB-std)); }

header { position:absolute; flex:none; width:100%; min-width:var(--minWidth); display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; z-index:30; box-shadow:var(--boxShadow_z4); will-change:transform, box-shadow, background; transition:transform 250ms var(--decelerateEasing), var(--boxShadowTransition), background 500ms var(--standardEasing); }
header > section { display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; }

header.appBar { height:56px; padding:16px 0; background-color:rgb(var(--primaryColor)); color:rgb(var(--whiteRGB-std)); }
header.appBar .icon:first-child { margin:0 24px 0 8px; }
header.appBar .icon > svg { fill:rgb(var(--whiteRGB-std)); }
header.appBar > div.pageTitle { max-width:1024px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

header.installApp { height:fit-content; padding:0 calc((100vw - 1024px)/2) 0 calc((100vw - 1024px)/2); background-color:rgb(var(--primaryColor)); color:rgb(var(--whiteRGB-std)); justify-content:space-between; }
header.installApp > div { display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; }
header.installApp > div > #logoDiag { flex:none; font-size:46px; line-height:36px; letter-spacing:4px; color:rgb(var(--yellowRGB)); margin:0 16px 0 8px; display:flex; width:80px; height:80px; }
header.installApp > .action_ext { background-color:rgb(var(--yellowRGB)); }

main { position:relative; margin-top:56px; padding-left:calc((100vw - 1024px)/2); padding-right:calc((100vw - 1024px)/2); overflow-y:auto; min-width:var(--minWidth); flex:1; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; }
#logoCorecyclage { width:250px; height:auto; }
.wrapperLogo { display:block; width:100%; margin:4px auto 8px 16px; }
@media only screen and (min-width:1100px) { .wrapperLogo { margin:4px auto 8px -24px; } }
@media only screen and (min-width:1280px) { .wrapperLogo { margin:4px auto 8px -56px; } }

footer { position:relative; flex:none; width:100%; min-width:var(--minWidth); min-height:56px; padding:16px calc((100vw - 1024px)/2); display:flex; flex-flow:row nowrap; justify-content:space-evenly; align-items:center; }

.dialog { background-color:rgb(var(--whiteRGB-std)); min-height:182px; min-width:280px; max-width:560px; width:calc(100% - 16px); padding:0; position:fixed; top:30%; left:50%; transform:translate(-50%, -60vh); z-index:50; opacity:0; visibility:hidden; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; border-radius:16px; box-shadow:var(--boxShadow_z16); will-change:opacity, visibility, transform, box-shadow, background; transition:transform 300ms var(--accelerateEasing) 50ms, opacity 300ms var(--standardEasing), visibility 300ms var(--standardEasing), var(--boxShadowTransition), background 500ms var(--standardEasing)!important; }
.dialog > div.h6 { flex:none; min-height:64px; line-height:24px; padding:40px 24px 0 24px; color:rgba(var(--blackRGB), 0.87); text-align:left; /*H6*/ }
.dialog > div.body1 { flex:1; color:rgba(var(--blackRGB), 0.87); padding:24px 24px 8px 24px; text-align:left; }
.dialog > div.body1 > div { padding-bottom:16px; }
.dialog > div:last-child { flex:none; display:flex; flex-flow:row wrap; justify-content:flex-end; align-items:center; min-height:52px; height:fit-content; padding:8px 8px 8px 24px; text-align:right; }
.dialog.open { transform:translate(-50%, -50%); opacity:1; visibility:visible; will-change:opacity, visibility, transform, box-shadow; transition:transform 450ms var(--decelerateEasing) 100ms, opacity 150ms var(--standardEasing) 150ms, visibility 150ms var(--standardEasing) 150ms, var(--boxShadowTransition)!important; }

.selectDiag { width:344px; }
.infosDiag { width:344px; margin-top:32px; }
.diagInProgress { width:100%; text-align:center; border-top:1px solid rgba(var(--blackRGB), 0.12); margin-top:25px; padding-top:16px; }

form { width:80%; margin:0 auto; display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start; }
.wrapperButton { width:100%; margin:32px auto 16px auto; display:flex; flex-flow:row wrap; justify-content:space-evenly; align-items:center; }

#wrapperSearch { position:relative; flex:1; max-width:720px; height:48px; margin:8px 8px 0 0; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; padding:8px 0; border-radius:4px; background-color:rgba(var(--blackRGB), 0.08); will-change:opacity; transition:all 200ms var(--standardEasing); }
#wrapperSearch:focus-within { background-color:rgb(var(--whiteRGB-std)); box-shadow:var(--boxShadow_z4); will-change:background-color; transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), var(--boxShadowTransition); }

datalist > option { font-family:var(--titleFont); font-weight:500; font-size:13px; letter-spacing:0.1px; }
datalist > option:hover { color:var(--blue); }

.snackBars { flex:none; position:fixed; z-index:50; bottom:0; left:24px; min-width:344px; width:fit-content; min-height:48px; max-height:68px; transform:translateY(150%); opacity:0; visibility:hidden; text-align:left; margin:0; padding:0 8px 0 16px; background-color:rgba(var(--blackRGB), 0.87); color:rgb(var(--whiteRGB-std)); display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; border-radius:4px; will-change:opacity; transition:transform 500ms var(--accelerateEasing) 300ms, opacity 250ms var(--standardEasing) 300ms, visibility 250ms var(--standardEasing) 300ms; }
.snackBars.open { transform:translateY(-16px)!important; opacity:1!important; visibility:visible!important; will-change:transform, opacity, visibility; transition:transform 400ms var(--decelerateEasing) 250ms, opacity 500ms var(--standardEasing) 300ms, visibility 500ms var(--standardEasing) 300ms; }
.snackBars > div:first-child { flex:1; text-align:left; padding:0 8px 0 0; /*display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center;*/ }
.snackBars > div:nth-child(2) { flex:none; width:fit-content; padding-left:8px; }
.snackBars > .close { position:relative; right:0; color:rgb(var(--whiteRGB-std))!important; }

ul.sideMenu > li { white-space:nowrap; position:relative; height:48px; margin:4px 8px; border-radius:4px; padding-right:24px; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; will-change:opacity; transition:all 200ms var(--decelerateEasing); cursor:pointer; }		
ul.sideMenu > li:is(:focus,:active) > .icon > svg { fill:rgb(var(--primaryColor)); }	

ul.dropDown { position:absolute; z-index:30; padding:8px 0; margin:0; color:rgb(var(--blackRGB)); background-color:rgb(var(--whiteRGB-std)); border-radius:4px; border:1px solid rgba(var(--blackRGB), 0.42); transform-origin:0 0; transform:scaleY(0); opacity:0; box-shadow:var(--boxShadow_z2); will-change:opacity; transition:transform 150ms var(--decelerateEasing), var(--boxShadowTransition); }
ul.dropDown.incoming { transform:scaleY(1); opacity:1; }
#searchOptions.dropDown { top:48px; left:0; right:0; }

ul[role="listbox"] { position:absolute; left:0; right:0; visibility:hidden; z-index:50; background-color:rgb(var(--whiteRGB-std)); border:1px solid var(--regularColor012); color:var(--regularColor087); padding:8px 0; border-radius:0 0 4px 4px; box-shadow:var(--boxShadow_z2); will-change:opacity; transition:all 150ms cubic-bezier(0.4, 0, 0.2, 1),box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1) }
ul[role="listbox"] > li[role="option"] { color:var(--regularColor087); padding:0 8px 0 16px;  height:32px; text-align:left; cursor:default; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; }
ul[role="listbox"] > li[role="option"] > div { display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; }
ul[role="listbox"] > li[role="option"] > div > div.icon { flex:none; display:flex; width:32px; height:32px; padding:5px; margin-right:calc(12px + 16px); margin-left:12px; border-radius:50%; background-color:transparent!important; box-shadow:0 0!important; cursor:default; }
ul[role="listbox"] > li[role="option"] > div > div.icon > svg { width:22px; height:22px; } 
ul[role="listbox"] > li[role="option"].moreResults { border-bottom:0 solid transparent; color:var(--regularColor087); padding:8px 16px; text-align:left; cursor:none; }

#dropdown { position:absolute; z-index:20; right:6px; top:4px; opacity:0.87; cursor:default; }
#wrapperAutocompletion { position:relative; height:32px; width:fit-content; flex:1; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; }
#svgCombo, .svgCombo { position:absolute; top:0; right:-4px; padding:8px; background-color:transparent; }
#svgCombo > svg, .svgCombo > svg { height:18px; width:18px; }

li.two-line { height:64px; padding:0 16px; margin:0!important; }
li.two-line > div[data-svg]:first-child { margin:0 16px 0 0!important; flex:none; }
li.two-line > div:not([data-svg]) { flex:1; }
li.two-line > div:not([data-svg]) > div:first-child /*Subtitle1*/ { /*height:28px;*/ width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
li.two-line > div:not([data-svg]) > div:last-child /*Caption*/ { height:20px; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
li.two-line > div:last-child { margin-left:16px; flex:none; }

li.twoLines { height:64px; padding:0 16px; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; }
li.twoLines > .wrapperText { padding-right:28px; max-width:calc(100% - 56px); }
li.twoLines > .wrapperText > div:first-child /*Subtitle1*/ { height:28px; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
li.twoLines > .wrapperText > div:last-child /*Caption*/ { height:20px; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
li.twoLines > .icon { flex:none; }

li.twoLinesTextImg { height:72px; padding:8px; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; }
li.twoLinesTextImg > .wrapperImg { flex:none; width:100px; height:68px; background-position:center; background-repeat:no-repeat; background-size:cover; padding:0; margin-right:16px; }
li.twoLinesTextImg > .wrapperText { flex:1; max-width:calc(100% - 56px); }
li.twoLinesTextImg > .wrapperText > div:first-child /*Subtitle1*/ { height:28px; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
li.twoLinesTextImg > .wrapperText > div:last-child /*Caption*/ { height:20px; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
li.twoLinesTextImg > .icon { flex:none; margin:0; }

li.oneLine { height:48px; padding:4px 16px 4px 8px; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; }
li.oneLine > input { margin-right:32px; }

li[draggable=true] { border-bottom:1px solid rgba(var(--blackRGB), 0.12); cursor:grab; will-change:opacity, background-color, order, box-shadow; transition:background-color 150ms var(--standardEasing), opacity 250ms var(--standardEasing), order 150ms var(--standardEasing), var(--boxShadowTransition); }
li[draggable=true] div[data-svg] > svg { width:24px; height:24px; fill:rgba(var(--blackRGB), 0.52); } 
li[draggable=true] div[data-svg].red > svg { fill:rgba(var(--redRGB), 1); } 
li[draggable=true]:active { box-shadow:var(--boxShadow_z6), var(--activateOnWhite)!important; }
li[draggable=true].disabled > .switch { pointer-events:all!important; cursor:pointer!important; }

#sideMenu { width:320px; /*height:100%;*/ padding:0; z-index:30; position:fixed; top:0; left:0; bottom:0; transform:translateX(-100%); opacity:0; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; box-shadow:var(--boxShadow_z16); background-color:rgb(var(--whiteRGB-std)); will-change:opacity; transition:transform 250ms var(--decelerateEasing), opacity 150ms var(--standardEasing), var(--boxShadowTransition); }
#sideMenu > #subHeader { position:relative; flex:none; /*margin-bottom:8px; border-bottom:1px solid rgba(var(--blackRGB), 0.12);*/ }
#sideMenu > ul { flex:none; }
#sideMenu > #subFooter { flex:1; display:flex; flex-flow:column nowrap; justify-content:flex-end; align-items:stretch; }

.thePlace2Be { z-index:8!important; transform:translate(0, 0)!important; visibility:visible!important; opacity:1!important; will-change:opacity, transform, box-shadow; transition:transform 250ms var(--decelerateEasing) 50ms, opacity 200ms var(--standardEasing) 50ms, var(--boxShadowTransition)!important; }
.behindThePlace2Be { z-index:0!important; opacity:0; will-change:opacity; transition:opacity 150ms var(--standardEasing); }

.card { max-width:calc(100% - 16px); width:560px; min-width:calc(var(--minWidth) - 16px); margin:0; padding:0 0 8px 0; border-radius:4px; background-color:rgb(var(--whiteRGB-std)); box-shadow:var(--boxShadow_z1); align-self:center; border:1px solid rgba(var(--blackRGB), 0.12); user-select:none; }
/*.card::after { content:''; position:relative; top:32px; display:block; height:24px; }*/
.card > form { width:calc(100% - 16px)!important; max-width:520px; margin:0 auto; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; }
.card > .headerCard { user-select:none; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; padding:16px 16px 20px 16px; margin-bottom:16px; border-bottom:1px solid rgba(var(--blackRGB), 0.12); will-change:opacity, box-shadow; transition:opacity 200ms var(--standardEasing), var(--boxShadowTransition)!important; }
.card > .headerCard:is(:focus,:hover,:active) div[data-svg] { box-shadow:var(--hover4White); }
.card > .headerCard:is(:focus,:hover,:active) div[data-svg] > svg { fill:rgb(var(--blackRGB)); }
.card > .headerCard[onClick]:is(:focus,:hover,:active) { box-shadow:var(--hover4White); border-bottom:1px solid rgba(var(--blackRGB), 0.08); }
.card .headerText { display:flex; flex:1; flex-flow:column nowrap; justify-content:center; align-items:stretch; min-height:80px; }
.card .headerLogo { flex:none; margin-left:16px; }
.card .headerLogo > div { margin:0!important; }
.card:hover { box-shadow:var(--boxShadow_z4); }
.card > div.h6 { margin-bottom:24px; height:44px; }
.wrapperCard { max-width:calc(100% - 16px); width:560px; min-width:calc(var(--minWidth) - 16px); position:relative; }
.wrapperCard > .card { position:absolute; top:0; left:0; right:0; width:100%; opacity:0; transform:translateY(-110%); }


@media only screen and (max-width:520px) { 
   ::-webkit-scrollbar { width:0; height:4px; }
   header.install + main { padding-top:56px; }
   header.installApp { padding:4px 8px 8px 8px; }
   #subtitleInstall { font-family:var(--stdFont); font-weight:400; font-size:13px; letter-spacing:0.1px; }
   #btnInstall { position:absolute; margin:0; bottom:4px; right:16px; transform:translateY(60%)!important; box-shadow:var(--boxShadow_z4); } 
   .wrapperLogo { display:none; }
   .card { border:0!important; box-shadow:unset!important; }
   .dialog { max-width:calc(100% - 8px); border-radius:24px; top:unset; bottom:10vh; }
   .dialog.open { transform:translate(-50%, 0); }
   .snackBars { align-self:center; margin:0 auto; bottom:24px; left:unset; max-width:calc(100% - 16px); }
   #btnQRCode { display:none; }
   details[open] > ul > li, details[open] > ol > li { padding-left:8px; padding-right:0; }
}