.view-3D {
    flex:1; width:100%; height:100%;
    position:relative; /*overflow: hidden;*/
    align-items:stretch;
    /*border:1px solid rgba(255,255,255,0.2);*/
}

.view-3D canvas {   display: block; border:none; position: absolute; top:0; left:0; z-index:-1; }

body.vignette .view-3D canvas {   z-index:999; }

.view-3D .label {   position: absolute; color:#666; text-align:center}

.view-3D .drag_zone {   position:absolute;top:0;left:0; width:100%; height:100%; z-index:9999; display:none}

.view-3D [data-view],
.view-3D [data-view]:focus {  cursor: move/*crosshair*/; }

/*#view-3D canvas {   width:100%!important; height:100%!important;}*/

.view-3D .renderer_cont { flex: 1; align-self: stretch; display:flex; position:relative}

.view-3D [data-view] { flex:1; align-self:stretch}

.view-3D .side-toolbar { /*width:20%; min-width:280px;*/ background:#333; display:flex; flex-direction:column; /*overflow-y:auto*/}
/*.view-3D .side-toolbar-right {   width:300px}*/

.view-3D .side-toolbar .side-toolbar-cont {     padding:0 10px 10px 10px; overflow-y:auto; width:280px; height:100%}

.side-toolbar .field-group { flex-shrink: 0}
.side-toolbar .field-group > label { color:#fff; margin-right:0; text-align: center}
.side-toolbar .field-right .field-value {	padding-right:10px}

.side-toolbar .field-group {	border-bottom:1px dotted rgba(255,255,255,0.2); padding-bottom:5px; margin-bottom:5px/*; padding-top:5px*/}

.side-toolbar input[type="button"]
,.side-toolbar input[type="image"]{ width:32px; height:32px; box-shadow:0 0 3px rgba(0,0,0,1); border:1px solid rgba(255,255,255,0.25); border-radius:2px; display:inline-block; margin:5px;
    cursor:pointer; color:transparent; background-repeat: no-repeat; overflow: hidden}
.side-toolbar input[type="image"] { width:48px; height:48px;}
/*input[type="button"]:focus,
input[type="image"]:focus,
input[type="button"]:hover,
input[type="image"]:hover {     border:2px solid #0ff!important;}*/

input[type="button"][selected]
,input[type="image"][selected]{    box-shadow:none; border:2px solid #0ff;}

.side-toolbar select {  text-transform: capitalize}

.side-toolbar .field-row-combo {    flex-direction: column; align-items: stretch;}
.side-toolbar .field-row-combo label {    text-align: left; text-indent: 15px; margin:0; padding-top:0.25em}


#field-metal-pierced input[type="image"]{   background-repeat: repeat}

#field-metal-cutted input[type="image"]{   /*background-position: -12px -12px;*/ background-size:100px}

#field-glass input[type="image"]{   background-color: #111}
#field-glass input[value="glass_blur"]{   background-position:-48px 0}

.field-button .field-value { display:block}
.field-button .field-value > *
,.field-image .field-value > *{ text-align: center}

#screenshot {  position:absolute; z-index:999; top:0; left:0; width:400px; height:300px}
#screenshot img {  width:100%}

#navbar {   position: absolute; z-index: 900; bottom:20px; left:0; right:0; display:flex; flex-direction:row; align-items: center; justify-content: center}
#navbar .navbar-main {  flex:1; display:flex; flex-direction:row; align-items: center; justify-content: center}
#navbar .navbar-block { padding:0 10px}

#navbar {   position: absolute; z-index: 900; bottom:20px; left:0; right:0; display:flex; flex-direction:row; align-items: center}

#navbar button {    background-color: #444; box-shadow:none; font-size:1em; padding:0; cursor: pointer; margin:3px;}
#navbar button:hover,
#navbar button:focus{   border:1px solid #00FFFF}
#navbar button:active{   border:1px solid #afff00}

#navbar .rotate
,#navbar .camera {   font-size:3em; color:#333; display:flex; flex-direction:row; justify-content: center}

#navbar .camera button { margin:3px; border-radius:25px; border:1px solid #999; position:relative;
    width:48px; height:48px; background-image:url("../img/elements.png?v=4"); background-repeat: no-repeat; background-position: 0 0;}
#navbar .camera button:after { content:"Face"; position: absolute; top:100%; left:0; font-size:12px; width:100%; text-align: center;
    margin-top:5px; color:#333; font-style: italic}

#navbar .camera button.icon-camera-quarter {    background-position:-39px 0}
#navbar .camera button.icon-camera-quarter:after {  content:"3/4"}
#navbar .camera button.icon-camera-profile {    background-position:-79px 0}
#navbar .camera button.icon-camera-profile:after {  content:"Perfil"}



 
/*QS2022/02/17 migration to css in bugak/skin*/
/* #navbar .rotate {   position: relative; width:124px; height:124px/}
.bt-3D-rot {    width:48px; height:48px; border-radius:24px; border:1px solid #999;
    background-image:url("../img/elements.png?v=4"); background-repeat: no-repeat; background-position: -206px -10px; position:absolute;  }
.bt-3D-rot[data-action="rotate_left"], .bt-3D-rot[data-action="rotate_right"] { top:50%; margin-top:-24px!important}
.bt-3D-rot[data-action="rotate_left"] { left:0}
.bt-3D-rot[data-action="rotate_right"] {  right:0;
    -moz-transform: scale(-1, -1); -webkit-transform: scale(-1, -1); -o-transform: scale(-1, -1);
    -ms-transform: scale(-1, -1); transform: scale(-1, -1);
}
.bt-3D-rot[data-action="rotate_top"], .bt-3D-rot[data-action="rotate_bottom"] { left:50%; margin-left:-24px!important}
.bt-3D-rot[data-action="rotate_top"] { top:0;
    -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg);}
.bt-3D-rot[data-action="rotate_bottom"] { bottom:0;
    -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg);
}  */

/*QS2022/02/17 migration to css in bugak/skin*/
/* #navbar button[data-action^="export_image"]{
    background-image:url("../img/icons/camera.png"); background-repeat: no-repeat; background-position: 5px 8px; background-size: 36px;
    width:48px; height:48px; border-radius:24px; color:#eee; font-size:2em} */

#navbar button.icon {   width:48px; height:48px; border-radius:24px; font-size:2em}

#field-gamme {  text-transform: capitalize}

.drag-zone { background-color:rgba(255,0,0,0.5)}

.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 */
}

/*_________________________ sidebar combos visibility combinations */
.field-group-sabot .field-row-accole {      display:none}

/*_____ combo left */


/*_____ show/hide mains courantes avec / sans vide */
/*__ avec vide */
/* [data-mc-empty-none="0"] #field-main-courante option[data-mc-empty-none="1"]
,[data-barreaudage="0"][data-mc-empty-none="1"] #field-main-courante option[data-mc-empty-none="0"]
,[data-barreaudage="1"][data-mc-empty-none="1"] #field-main-courante option[data-slis-bar="0"]
,[data-barreaudage="1"][data-mc-empty-none="1"] #field-remplissage option[data-mc-empty-none="0"]
,[data-barreaudage="1"][data-mc-empty-none="0"] #field-remplissage option[data-mc-empty-none="1"]
{ display:none} */

/*____ hide ss-vide pour gammes muret & grand large */
/*QS2022/09/30 - add esquisse muret => 6*/
[data-gamme="3"] .field-row-mc-empty
,[data-gamme="9"] .field-row-mc-empty
,[data-gamme="6"] .field-row-mc-empty
/*QS2021/08/19 Afficher vide ss main courante pour gamme Esquisse => MC 801101/*
/*,[data-gamme="5"] .field-row-mc-empty*/
,[data-gamme="B"] .field-row-mc-empty { display:none}

/*____ hide combo rempl pour gammes muret */
/*QS2022/09/30 - add esquisse muret => 6*/
[data-gamme="9"] .field-group-remplissage,
[data-gamme="6"] .field-group-remplissage,
[data-gamme="3"] .field-group-remplissage { display:none}

/*____ show/hide raidisseurs non acollés / acollés  */
[data-raid-accole="0"] #field-sabot option[data-raid-accole="1"],
[data-raid-accole="1"] #field-sabot option[data-raid-accole="0"] { display:none}
/*
#field-sabot option { display:block}
#field-sabot option[data-raid-accole="1"] { display:none}
[data-raid-accole="1"] #field-sabot option { display:none}
[data-raid-accole="1"] #field-sabot option[data-raid-accole="1"] { display:block}
*/

/*____ show/hide combo lisses */
[data-mc-empty-none="1"] .field-group-lisses,
/*QS2021/08/31 Masquer le choix des lisses si aucune disponible*/
[data-has-lisse="0"] .field-group-lisses {  display:none}

/*____ sabot/remplissage type */
/*[data-remp-type-sabot="1"] #field-sabot option[data-type="0"][data-slab-front="0"] { display:none}*/
[data-remp-type-sabot="1"] #field-sabot option[data-devant-dalle="0"][data-slab-front="0"] { display:none}

/*
[data-remp-type-sabot="1"] #field-sabot option { display:none}
[data-remp-type-sabot="1"] #field-sabot option[data-type="1"] { display:block}
*/
/*____ hide (mc empty && gamme remplissage && mc axe != rempl axe) */
[data-mc-empty-none="1"][data-gamme="2"][data-mc-axe="1"] #field-remplissage option[data-axe="0"],
[data-mc-empty-none="1"][data-gamme="7"][data-mc-axe="1"] #field-remplissage option[data-axe="0"]{     display:none}
[data-mc-empty-none="1"][data-gamme="2"][data-mc-axe="0"] #field-remplissage option[data-axe="1"],
[data-mc-empty-none="1"][data-gamme="7"][data-mc-axe="0"] #field-remplissage option[data-axe="1"]{     display:none}

/*____ hide remplissage ( gamme oxytal remplissage && not ajouré && rempl axe = 0 ) */
[data-gamme="7"][data-raid-accole="0"] #field-remplissage option[data-axe="0"]{     display:none}
/*[data-gamme="7"][data-mc-empty-none="1"][data-raid-accole="0"] #field-main-courante option[data-axe="0"]{     display:none}*/

/*QS2023/08/18 - not used anymore => traited with of gamme-type*/
/*____ disable (integral && sabot integral="0") */
/* [data-integral="1"] #field-sabot option[data-integral="0"]{     display:none}
[data-integral="1"] #field-sabot option[data-integral="1"]{     display:block!important;} /*QS2022/09/27 - impose sab if integral value = 1/ */


/*
[data-mc-empty-none="1"][data-gamme="2"][data-mc-axe="1"] #field-remplissage option[data-axe="0"],
[data-mc-empty-none="1"][data-gamme="7"][data-mc-axe="1"] #field-remplissage option[data-axe="0"]{     display:none}
[data-mc-empty-none="1"][data-gamme="2"][data-mc-axe="0"] #field-remplissage option[data-axe="1"],
[data-mc-empty-none="1"][data-gamme="7"][data-mc-axe="0"] #field-remplissage option[data-axe="1"]{     display:none}
*/