/* 
    Created on : 21 déc. 2017, 16:28:49
    Author     : bob
*/

body{
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
    margin: 0px;
    background-color:#CCCCCC;
}

* {
    margin:0;
    padding:0;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
}

.mainPage {
    width:100%;
    height:100%;
    position:absolute;
}

.SCENE3D {
    width:100%;
    height:100%;
}

.SCENE3D_RENDERER {
    width:100%;
    height:100%;
}

.childLeftDim {
    width:200px;
    height:10px;
    position:absolute;
    left:20px;
    top:1px;
}
.childLeft {
    width:200px;
    height:400px;
    position:absolute;
    left:20px;
    top:300px;
}

.bottomTotal {
    width:300px;
    height:50px;
    position:absolute;
    left:2%;
    bottom:-0px;
}

.colorsListMela{
    width:440px;
    position: fixed;
    right:20px;
    top:40px;
}
.colorsListLatte{
    display:none;
    width:440px;
    position: fixed;
    right:20px;
    top:40px;
}

.colorsListMedium{
    display:none;
    width:440px;
    position: fixed;
    right:20px;
    top:40px;
}


.accPanel {
    width:248px;
    height:400px;
    position:absolute;
    right:20px;
    bottom:100px;
    visibility:hidden;
}

#dialog-link {
    padding: .4em 1em .4em 20px;
    text-decoration: none;
    position: relative;
}

#dialog-link span.ui-icon {
    margin: 0 5px 0 0;
    position: absolute;
    left: .2em;
    top: 50%;
    margin-top: -8px;
}

#icons {
    margin: 0;
    padding: 0;
}

#icons li {
    margin: 2px;
    position: relative;
    padding: 4px 0;
    cursor: pointer;
    float: left;
    list-style: none;
}

#icons span.ui-icon {
    float: left;
    margin: 0 4px;
}

.fakewindowcontain .ui-widget-overlay {
    position: absolute;
}

.message {
    background:#2686b0;
    color:#FFF;
    position: absolute;
    Z-index:100;
    top: -250px;
    left: 0;
    width: 100%;
    height: 250px;
    padding: 0px;
    transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
    overflow: hidden;
    box-sizing: border-box;
}

#toggle {
    
    position:absolute;
    appearance:none;
    cursor:pointer;
    left:-100%;
    top:-100%;
}

#toggle + label {
    display:none;
    position:absolute;
    cursor:pointer;
    padding:10px;
    background: #26ae90;
    width: 100px;
    border-radius: 3px;
    padding: 8px 10px;
    color: #FFF;
    line-height:20px;
    font-size:12px;
    text-align:center;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    margin:4px 1px;
    right:6px;
    transition:all 500ms ease;
}
#toggle + label:after {
    content:"Systeme" 
}

#toggle:checked ~ .message {
    top: 0;
}

#toggle:checked ~ .container {
    margin-top: 250px;
}

#toggle:checked + label {
    background:#dd6149;
    top:250px;
}

#toggle:checked + label:after {
    content:"Close"
}

.ItemList{
    height:200px;
    width:400px;
    overflow:auto;
    border:1px solid #000;
}

.rightPanel {
    position:absolute;
    top:10px;
    right:100px;
    width:300px;
}


/*
 * 	-- CSS UI --
*/ 

.UI {
    position : absolute;
    top: 8%;
    height: auto;
    width: 20%;
}

.createProject {
    margin-left : 10%;
}

.af_container {
    position : absolute;
    transform : translateX(-50%);
    top: .5em;
    left : 50%;
}

.affichage {
    border-bottom: 1px black solid;
    height: 8%;
    width: auto;
    background-color : #f2f1f1;
    z-index: 50;
}

.affichage .flexible {
    margin : 0;
}

#af_title {
    width: 100%;
    height : 1em;
    text-align: center;
    background-color:#2b2b32;
    color: white;
    font-size: 0.9vw;
}

.af_opt {
    padding: .75em;
    width: auto;
    height : auto;
}

.af_opt:hover {
    cursor : pointer;
}

.af_opt img {
    width : 2.5em;
    height : 2.5em;
}

.UI_section {
    text-transform: uppercase;
    text-align: center;
    font-size: 1.1em;
    display : block;
    position: relative;
    height: 2em;
    width: 100%;
    margin-bottom: 1px;
    border: none;
    background-color: #2b2b32;
    color: white;
}

.button_text {
    position: absolute;
    z-index: 10;
    left: 20%;
    top : 25%;
}

.UI_section:hover{
    color: red;
    cursor: pointer;
    animation: UI_section_anim .5s forwards;
}

@keyframes UI_section_anim {
    100%{
        height: 2.4em;
        width: 103%;
    }
}

.UI_section:focus {
    outline: 0;
}

.visibility_off {
    display: none !important;
}

.open {
    height: 2.4em;
    width: 103%;
    color: #989898;
    animation: none;
}

.UI_component {
    padding: 0.8em 0 0.8em 0;
    position: relative;
    background-color: #f2f1f1;
    width: 100%;
    height: auto;
}


.UI_component h4 {
    font-size: 1em;
    border: 0;
    margin-left: 10%;
    padding: 0.8em 0 0.4em 0;
}

.select_template {
    margin-top: 1em;
    padding: 0.4em 0 0.4em 0;
    width: 75%;
    text-align: center;
    border: 1px #000 dashed;
    margin-left: 10%;
}

#selecttypemeuble-button, #selectmatiere-button, #selectmontant1938-button, 
#selecttablette1938-button, #selectPied-button, #selectButtunG-button, 
#selectButtonL-button, select-button, #prefabW-button, #prefabH-button, #prefabD-button, #prefabAngle-button {
    height: 1.6em;
    font-size: 0.8em;
    width: 75%;
    margin-left:10%;
    margin-top: 0.5em;
    border-top: 15px;
    border-right: 0;
    padding-bottom: 15px;
    border-left: 0;
    background-color: #f2f1f1;
    color: #000;
    padding: 0;
    max-width: 75%;
}

.ui-selectmenu-text {
    margin-top: .2em;
}

.ui-button:hover, .ui-button:focus {
    background: inherit;
    outline: 0;
}

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon, .ui-button:hover .ui-icon, .ui-button:focus .ui-icon, .ui-state-default .ui-icon {
    background-image: url(../asset/background.png);
}

.ui-button .ui-icon {
    background-image: url(../asset/background.png);
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus, ui-button:active {
    border-color: #000;
}

.ui-menu-item {
    font-size: 0.8em;
    padding: 0.5em;
}

.ui-menu .ui-menu-item-wrapper {
    margin : 0.1em;
    padding : 3px 1em 3px .6em !important;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border: black;
    color: #601510;
    background: inherit;
    background-color: lightgrey;
    font-size : 93%;
}

.inputZone {
    display: flex;
    bottom: 5%;
}

.inputZone h4 {
    width: 50%;
}

.input {
    margin-top: 0.8em;
    margin-left: 0.8em;
    height: 1.5em;
    width: 4em;
    text-align: center;
    background-color: #f2f1f1;
    border-style: solid;
    border-width: 1px;
    border-color: #000;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    color : #601510;
}

.input:focus {
    outline-color: #000;
}

.slide {
    margin-top: 0.6em;
    margin-bottom: 0.6em;
    padding: 0;
    left: 10%;
    border: 1px; 
    width: 75%;
    height: 0;
}

.custom-handler {
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    transform: translateY(-25%);
}

.custom-handler:focus, .ui-slider-handle:focus , .custom-handler:active, .ui-slider-handle:active {
    outline: 0;
    border: 1px solid #000;
    animation : UI_Slide_Anim 0.5s forwards;
}

@keyframes UI_Slide_Anim {
    0% {
        border:0;
        background: none;
        background-color: white;
    }
    100% {
        border:0;
        width: 1.6em;
        height: 1.6em;
        background: none;
        background-color: lightgrey;
    }
}

.custom-handler:focus, .ui-slider-handle:focus , .custom-handler:hover, .ui-slider-handle:hover {
    cursor: pointer;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus {
    background: inherit;
    background-color: lightgrey;
}

#zone {
    width: 100%;
}

#unselected, #f_unselected, #M_Unselected {
    width: 75%;
    text-align: center;
    border: 1px #000 dashed;
    margin-left: 10%;
}

.buttons {
    display: block;
    margin-left: 10%;
    margin-top: .5em;
    width: auto;
}


.buttons button:hover{
    cursor: pointer;
}

.flexible {
    display: flex;
    margin-bottom: 0.5em;
}

.flexible h4 {
    width: 65%;
}

.check {
    margin-top: 1.1em;
    margin-left: 5%;
}

.check:hover {
    cursor: pointer;
}

.color {
    margin-top: .2em;
    width: 32px;
    height: 32px;
    border : 1px black solid;
    border-radius: 50%;
}

.selectColor:focus {
    outline: 0;
}

#ColorPannel {
	display : block;
    padding: 0.2em;
    left: 100%;
    top: 18%;
    position: absolute;
    width: 91%;
    height: auto;
    background-color: #f2f1f1;
    border: 1px #000 dashed;
}

#TabContainer {
	height: 2em;
    display: flex;
    margin-bottom: 5px;
    padding-bottom: 5px;
}

.tab-button {
    margin: 0;
    padding: 0;
	width : 100%;
	height : 100%;
}

.pick {
    margin-top: 0.5em;
    margin: 0.3em;
}

.ui-icon-help {
    margin-top: 5.5%;
    border: 1px #000 solid;
    border-radius: 50%;
}
.ui-icon-help:hover {
    cursor: pointer;
    border-color: #601510;
}

.sp-replacer {
    vertical-align: inherit;
    margin-left: .3em;
    margin-right: .3em;
}

#UI_Select_A_Zone:hover {
    cursor: default;
}

.BG {
    display: flex;
    max-width: 100%;
}

.lBG {
    cursor: pointer;
    outline: 1px solid black;
    outline-offset: -1px;
}

.img_selector {
    margin-left: 35%;
    margin-top: 5%;
    height: 75%;
    background-color: grey;
    border: 7px black groove;
    overflow: auto;
}

.zone_button {
    text-align: center;
    top: -1.4em;
    font-size: 0.8em;
    display : block;
    position: relative;
    height: 2.5em;
    width: 50%;
    margin-bottom: 1px;
    border: none;
    background-color: black;
    color: white;
}

.zone_button:hover {
    color: red;
    cursor: pointer;
}

.zone_button:focus {
    outline : 0;
}

.button_action {
    overflow: hidden;
    margin-top: 0.5em;
    margin-left: 0.2em;
    width : 5.5em;
    height : 3.5em;
    text-align: center;
    vertical-align: text-top;
    color: white;
    border : none;
    background-color : #262626;
    outline : 0;
}

.button_action:hover {
    outline : 0;
    border : 2px solid red ;
}

.separation {
    width: 1px;
    height: 100%;
    background-color: white;
}

.nfo_box {
    background-color: #f2f1f1;
    position: fixed;
    bottom:1%;
    transform: translateX(-50%);
    left: 50%;
    width:35%;
    height: 14%;
    border:0;
    border-bottom: 1px black groove;
}

#nfo_title {
    width: 100%;
    text-align: center;
    background-color:#2b2b32;
    color: white;
    font-size: 0.9vw;
    min-height: 20%;
}


.nfo {
    width:50%;
    height: 100%;
    text-align:center;
    list-style:none;
}

.nfo li {
    /* font-size: 0.9em; */
    font-size: 0.8vw;
    margin-top:0.2em;
}

#price {
    margin-top:0.5em;
    text-align: center;
    color: black;
    width:100%;
    height: 100%;
    font-size: 1.7vw; 
}

.biblio {
    transform : translateX(-50%);
    left: 45%;
    margin-top : 20%;
}

.greyText {
    color : grey;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10;
    padding-top: 10%;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto;
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 55%;
}

._quit {
    display:none;
}

._register {
    display : none;
}

._save{
    display: none;
}
._share{
    display: none;
}
._ordx{
    display: none;
}

._newProj {
    display: none;
}

._connect {
    display : none;
}

.btn_container {
    margin-left: 10%;
}

.opt_buton {
    width: 80%;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    outline: 0;
    border: none;
    cursor: pointer;
    background: #2b2b32;
    color: white;
    font-size: 1.2em;
}
.opt_buton_red {
    width: 80%;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    outline: 0;
    border: none;
    cursor: pointer;
    background: #b40f11;
    color: white;
    font-size: 1.2em;
}

.opt_buton:hover {
    color:#989898;
}

input[type="file"] {
    display : none;
}

.opt_input {
    width: 80%;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    outline: 0;
    border: none;
    cursor: pointer;
    background: #2b2b32;
    color: white;
    font-size: 1.2em;
    display : block;
    text-align : center;
}

.opt_input:hover {
    color:#989898;
}

.error {
    border: 2px solid red;
}

.correct {
    border: 2px solid green;
}

.left {
    position : fixed;
    right : 0%;
}

.UI_section_fixe {
    text-transform: uppercase;
    text-align: center;
    font-size: 1.1em;
    display : block;
    position: relative;
    height: 2em;
    width: 100%;
    margin-bottom: 1px;
    border: none;
    background-color: #2b2b32;
    color: #989898;
}

.displayer {
    position : absolute;
    left : 0;
    transform : translateX(-100%);
    width : 20%;
    height: 2em;
    border-right : none;
    border-radius : 25% 0% 0% 25%;
    background-color : white !important;
}

.displayer:hover {
    background-color : grey !important;
}

.icon-red {
    background-image : url(http://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png) !important;
}

.icon-white {
    background-image : url(http://download.jqueryui.com/themeroller/images/ui-icons_ffffff_256x240.png) !important;
}

.icon-black {
    background-image : url(http://download.jqueryui.com/themeroller/images/ui-icons_000000_256x240.png) !important;
}

.selectImg {
    margin-left : .5em;
    margin-top : .2em;
    width : 32px;
    height : 32px;
    border : 1px solid black;
    border-radius : 10%;
}

.selectImg:focus {
    outline: 0;
}

.imgContainer {
    z-index : 100;
    position: absolute;
    transform : translate(50%,50%);
    width : auto;
    max-width : 100%;
    height: auto;
    background-color: #f2f1f1;
    border: 1px black dashed;	
}

.subContainer {
    display : flex;
}

#pf {
    left : -100%;
    top : 62%;
}

.optionImg {
    z-index : 101;
    display : block;
    width : 32px;
    height : 32px;
    border : 1px solid black;
    border-radius : 10%;
    margin : .5em;
}

.upIndex {
    z-index : 1;
}

.warn {
    position : fixed;
    width : 100%;
    height : 100%;
    z-index: 10;
    padding-top: 10%;
    left: 0;
    top: 0;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.warn-content {
    background-color: #fefefe;
    margin: auto;
    border: 1px solid #888;
    width: 55%;
    text-align : center;
}

.warn-title {
    background-color : #ad0a0a;
    padding : none;
    color : white;
}

.warn-message {
    margin-top : 1%;
    display : block;
}

.warn-options {
    display : block;
    padding : 2%;
}

.warn-opt {
    width : 35%;
    color : white;
    background-color : black;
    border : none;
    text-transform: uppercase;
}



.popup {
    position : absolute;

    width : 35%;
    height : 15%;
    right: 2%;
    bottom: 2%;

    overflow: auto;
    background-color: #ad0a0a;
    margin: auto;
    text-align : center;
    color : white;
    border-radius : 20px;
}

.popup-title {
    padding : none;
}

.popup-message {
    margin-top : 1%;
    display : block;
}

.cross {
    position : absolute;
    top : 0;
    right : 0;
    width : 10%;
    cursor: pointer;
}

.wait {
    position: fixed;
    z-index: 11;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto;
    background-color: rgba(0,0,0,0.4); 
}

.wait_container {
	/* border-radius : 25%; */
	position : absolute;
	background-color : #E0E0E0;
	width : 30%;
	height : 25%;
	top : 50%;
	left : 50%;
	transform : translate(-50%,-50%);
}

.wait_text {
	position : absolute;
	width : 80%;
	top : 50%;
	left : 50%;
	transform : translate(-50%,-50%);
	color : #2e2e2e;
	text-align : center;
}

.options {
	position : absolute;
	bottom : 1%;
	right : 1%;
	width : 28%;
	height : auto;
}

.options_container {
    position: relative;
    width: 100%;
    height: 100%;
	display : flex;
}

.opt_limiter {
	width : 25%;
}


/* switch */


.switch {
	display : none;
}

.label_switch {
	cursor: pointer;
	/* text-indent: -9999px; */
	width: 5em;
	height: 3em;
	background: grey;
	display: block;
	border-radius: 100px;
	position: relative;
}

.label_switch:after {
	content: '';
	position: absolute;
	top: 5px;
	left: 5px;
	width: 50%;
	height: 80%;
	background: #fff;
	border-radius: 90px;
	transition: 0.3s;
}

.switch:checked + .label_switch {
	background: #601510;
}

.switch:checked + .label_switch:after {
	left: calc(100% - 5px);
	transform: translateX(-100%);
}

.label_switch:active:after {
	width: 85%;
}

/* The Close Button */
.Ray_close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}


.Ray_close:hover,
.Ray_close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.selectzone {
}
.decoupe {
}

#UI_title_login {
	margin: 15px;
    text-align: center;
    margin-top: 0;
}

/* Project Manager popup */

#PM_Container {
	height : 95%;
	overflow: auto;
}

#F_Porjects .i-modal-content .i-modal-body {
	overflow: unset;
}

#PM_Nav {
	width : 100%;
	display : flex;
}

#PM_Nav button {
	width : 50%;
}

.pm_subcontainer {
	width : 100%;
	height : 30%;
	display : flex;
}

.PM_box, .PM_folder {
	position : relative;
	width : 25%;
	height : 75%;
	margin : 1%;
}

.PM_box img, .PM_folder img {
	width : 100%;
	height : 100%;
	cursor : pointer;
}

.pm_hover {
	background : rgba(0,0,0,.4);
	position : absolute;
	left : 0;
	top : 0;
	width : 102%;
	height : 102%;
	align-items: center;
    display: inline-flex;
	cursor : pointer;
}

.PM_Selected {
	border : 2px black solid;
}

.pm_hover button {
    width: 77%;
    height: 25%;
    margin: 9%;
}

.mainPage .UI.UI_project .btn_container .opt_buton:before {
	content: '';
    background-repeat: no-repeat;
    display: inline-block;
    width: 25px;
    height: 25px;
    background-size: contain;
    vertical-align: middle;
    margin-right: 13px;
}

.mainPage .UI.UI_project .btn_container #UI_btn_connect:before {
	background: url(../asset/images/guy.svg);
	opacity : .4;
}

.mainPage .UI.UI_project .btn_container #UI_btn_open:before {
	background: url(../asset/images/save.svg);
	opacity : .4;
}

.mainPage .UI.UI_project .btn_container #UI_btn_monenclature:before {
	background: url(../asset/images/paper.svg);
	opacity : .4;
	background-size: contain;
}

#UI_COUL_DEPTH {
	width : 40%;
	margin-top : 2.5%;
}