body {
    display: flex;
    flex-direction: column;
    background-color: #000;
    color:#ccc;
}

a, a:visited {     color:#00FFFF}
a:hover {     color: #afff00}

h2 {    font-size:1.35em; text-transform: capitalize}
h3 {    font-size:1.25em; text-transform: capitalize; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid #444; color:#0ff}
h4 {    font-size:1.1em; text-transform: capitalize; color:#fff; margin:10px 0; /*padding-bottom:5px; border-bottom:1px solid #444; */}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently not supported by any browser */
}

#wrapper {  display: flex; flex-direction: column;
    flex: 1;
}
/*QS2023/04/25 - black color in bgd*/
/* .bgd2 { background:rgba(51,51,51,0.9) } */
.bgd2 { background:rgb(0, 0, 0) }

#menu_main li { border-right:1px dotted #666; padding:5px 10px}
#menu_main li:last-child { border-right:none}
#menu_main li a { border:none}

#logo { border:none}
#logo img { padding:10px; border:1px solid rgba(255,255,255,0.1);}

#header [data-prop="headline"] {     text-transform: uppercase; color:#00FFFF}

#header .bt-home {  color:#aaa; font-size:2em; margin-left:15px}
#header .bt-home:hover {     color: #afff00}

#header input { background: #000; border:1px solid #666; border-radius:4px; box-shadow:0 0 5px #000; color:#ccc}

form[data-action="search"] input[data-search] { width:100px}

.powered_by { margin:20px 0 10px 0; display:flex; flex-direction:row; align-items: center; justify-content: center;
    border:none; }
a.powered_by {  color:#ccc}
a.powered_by:hover {  color:#00FFFF}
a.powered_by:active {  color:#afff00}

.imp {  color:#fff}
strong {    color:#fff}
.display {  display:block!important;}
.bt_close { cursor: pointer; color:#0ff}
.big_num {	color: #afff00}

input[type="checkbox"].fa {  width:20px; height:20px; font-size:1.3em; cursor: pointer; top:3px; color:#09f; /*visibility: hidden;*/ }
input[type="checkbox"].fa:before {  background:#eee; border-radius:3px; width:100%; height:100%; position: absolute; left:0; content:""; padding:0.05em;
    visibility: visible!important;
    box-shadow:0 0 2px rgba(0,0,0,1) inset; color:#09f!important}
input[type="checkbox"].fa:checked:before {  content: "\f00c"}
input[type="radio"].fa {    position: relative}
input[type="radio"].fa:before {   content:""; width:1.5em; height:1.5em; position: absolute; left:0; top:-0.2em; border-radius:1em}

/*___ icons */
@font-face {
    font-family: 'FontAwesome'; font-weight: normal; font-style: normal;
    src: url('fonts/fontawesome-webfont.eot?v=4.6.3');
    src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
}
.fa, .icon:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon { display:inline-block}
.icon, .icon:hover {    border:none}
.icon:before {   width:1em; height:1em; margin:4px}
.icon-chevron-down:before {    content:"\f078"}
.icon-chevron-up:before {    content:"\f077"}
.icon-caret-down:before {    content:"\f0d7"; font-size:1.2em}
.icon-sign-out:before {        content:"\f08b"}
.icon-arrow-circle-left:before {      content:"\f0a8"}
.icon-arrow-circle-right:before {      content:"\f0a9"}
.icon-user-infos:before {      content:"\f2bb"}
.icon-close:before {    content:"\f00d"}
.icon-file-img:before { content:"\f1c5"}
.icon-camera:before {   content:"\f083"}
.icon-home:before {   content:"\f015"}
.icon-long-arrow-left:before {   content:"\f177"}/*QS2023/03/10*/

/*.icon-help {    width:1em; height:1em;}*/
.icon-help:before {      display: inline-block; content:"?"; width:1.2em; height:1.2em; margin:0 7px; font-weight:bold; background: #0ff;
    border-radius: 0.6em; color: #000; font-size:1.2em}

/*.fa-check:before {  content: "\f00c";}*/

/*.viewer3D #page_content {   flex-direction:row; align-items: stretch}*/



.field-input-combo {    position: relative;}
/*.field-input-combo .field-items {	position:absolute; left:50%; top:0; z-index:100; background:#22445a; border:1px solid rgba(255,255,255,0.2) }*/
/*QS2021/09/03 - suppression de bottom:100%*/
/*QS2023/08/28 - dimension/position  in function of screen for horizontal and vertical display*/
/* .field-input-combo-items {  background: #444; border: 1px solid rgba(255,255,255,.25); border-radius: 4px; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.75); position: absolute;
    margin-bottom: -5px; width: 100%; z-index: 100; max-height: 300px} */
.field-input-combo-items { max-width: 96vw;  max-height: 80vh; display: inline-block; overflow-y: auto;scroll-behavior: smooth;}
/*QS2023/10/16 - add display*/
.filling-type-metal .field-input-combo-items {display: flex !important;}


.field-input-combo-panel {  background: #444; border: 1px solid rgba(255,255,255,.25); border-radius: 4px; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.75); position: fixed;
    margin-bottom: -30px; z-index: 100;  max-width: 99vw;  max-height: 80vh; }

.field-input-combo-arrow {display: none;}
/*QS2023/10/16 - add metal and arrow*/
.filling-type-metal .field-input-combo-arrow {display: flex !important; align-items: center;}
.field-input-combo-arrow img {height:6vh ; width: 6vh ; }

/*QS2023/08/28 - horizontal display for filling*/
#field-group-fillings .field-input-combo-panel {flex-direction: row; }
    
.field-input-combo-items .field-item {	border-radius:4px; }
#field-group-fillings .field-input-combo-items .field-item {	display: inline-block; }
.field-input-combo-items .field-item:hover {	color:#0ff ;}
.field-input-combo-items .field-item[selected] {	background:#0ff; color:#333;}
/* .field-input-combo-items {  overflow-y: auto; overflow-x:hidden; max-height:360px; } */
#field-group-fillings .field-item .field-label {text-align: center;}

/*_________ combos */
button, a.button, .button-group a, select, .field-input-combo .field-trigger {  background-color: #555; color: #eee; }
select option { color: #ccc}
.field-input-combo-items .header-label {    background-color: rgba(0,0,0,0.2); padding: 3px; font-style: italic}

.field-input-combo[data-selected] .field-trigger {		background:#0ff; color:#000}
.field-trigger .field-item {    z-index: 1}
.field-trigger .field-item-icon {	position: relative}
.field-trigger .field-item-icon:before {
    content:""; position: absolute; top:0; left:0; z-index: -1; right:0; bottom:0; background-color:#000}




/*_________*/
.field-group-sabot .field-row-accole {      display:none}
.show-raid-acc .field-group-sabot .field-row-accole {      display:flex}


/*_____ login */
body.login .pan-form {
    padding:20px; border-right:1px dotted #999; align-self: stretch; max-width:700px;
}
body.login .pan-form:last-child {   border-right:none;}

.legal_mentions {   margin-top:10px; padding-top:10px; border-top:1px solid #444}
.legal_mentions.display_cont .cont {   display:block}
.bt-help {  cursor:pointer}
.bt-help.icon-help:hover:before {     background: #afff00}

/* QS2023/03/10 - new menu */
#header_gamme {margin-bottom: 2%; font-size: x-large; display: flow-root;}
#left_header_gamme { float: left; margin-left: 2%;}
#right_header_gamme { float: right; margin-right: 2%; display: flex; align-items: center; font-size: small;}
#footer_gamme {margin-top: 2%; }
#left_footer_gamme { float: left;  margin-left: 2%; }
#right_footer_gamme { float: right;  margin-right: 2%; vertical-align: bottom; }
.bt-long-arrow-left { height: 20px;}
.bt_precedent { display: flex; align-items: center; }
/*_____ home */
.vign {
    position:relative; /*border-radius:5px; box-shadow:0 0 7px #000; */
    /*border:1px solid #999;*/ margin:10px 25px 25px 25px; width:40%; /*align-self:stretch; flex:1; overflow: hidden; padding:10px;*/
}

.cat_img { width:100%; display:block; border-radius:4px}
.vign label {   position:absolute; left:0; /*width: 100%; right:0;*/ padding:5px; text-transform: capitalize; text-align:center; color:#ccc ; font-size: large;}
.cat_icon { padding-right:5px;}


a.vign:hover {   border:1px solid #0ff; box-shadow:0 0 7px rgba(0,255,255,0.5);}
.vign.empty {   border:none; box-shadow:none}

.noborder {    border:none}

/*____ coupe */
body.login form {
    /*min-width:380px;*/
    display:flex;
}
body.login form > .field-row {   flex:1;}

.dlg {
    background:#000; border:1px solid #666; border-radius:4px; box-shadow:0 0 20px rgba(0,0,0,1); padding:5px;
    position:absolute;
}
/*.dlg .title {   border-bottom:1px solid #666}*/
.dlg .content { background:#262626; border-radius:4px; padding:5px}
.dlg .bt_close, .msg-user .bt_close {   position: absolute; right:5px; top:0}


/* Bugal gestion des exceptions du constructeur */
[data-gamme="8"][data-remp-coupe="14"] #row-field-devant-dalle>*{ display : none !important; } /* Checkbox "devant-dalle" invisible quand remplissage=savane & gamme=oxytal */
[data-gamme="8"][data-devant-dalle="1"] #field-remplissage option[value="14"]{display: none;} /* remplissage savane invisible quand devant_dalle=true & gamme=oxytal  */


/*QS2023/03/10 - animation new menu : icon move*/
.transition{
    animation: fadeIn 0.5s;
}
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

.fadeOut{
    animation-name: fadeOut;
    -webkit-animation-name: fadeOut; 
  
    animation-duration: 0.5s; 
    -webkit-animation-duration: 0.5s;
  
    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;   
    
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
  
    visibility: visible !important; 
  }

  @keyframes fadeOut {
    0% {
      opacity: 1.0;
    }
    100% {
      opacity: 0.0; 
    }
  }
  @-webkit-keyframes fadeOut {
    0% {
      opacity: 1; 
    }
    100% {
      opacity: 0.0;
    }
  }