#creator {
    position: relative;
    height: 900px;
    
    background: #262626;  
}

#leftToolBar {
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;   
    background: #3E3E3E;
    width : 60px;
    z-index : 100;
}

#leftToolBarTop{
    display : block;
    position : relative;
}

#leftToolBarBottom{
    display : block;
    position : absolute;
    bottom : 0px;
}

._leftTBButton{
    position: relative;
    display: block; 
    height : 60px;
    width : 60px;
}

._leftTBButton ._LTBImg {
    background : red;
    display: block;
    position : absolute;
    margin: auto;
}

._leftTBButton ._LTBSub {
    background : red;
    display: none;
    position : absolute;
    margin: auto;
}

._leftTBButton:hover {
    cursor: pointer;
}



._leftTBButton:hover ._LTBSub{
    display: block;
    left:60px;
    background-color: orange;
}

._simulationgame-content {
    min-width : 1420px;
}



/**
#leftToolBar div {
    position: relative;
    display: flex; 
    margin-left: auto;
    margin-right: auto;

    height : 60px;
    width : 60px;

    background: #3E3E3E;
}

#leftToolBar div:hover {
    background: #2F2F2F;
    cursor: pointer;
}

#leftToolBar div img {
    display: block;
    margin: auto;   
}
*/

#viewBar {
    position: absolute;
    display: block; 

    height : 44px;
    width : 100%;
    margin : auto;
}

#viewBar #viewBarContainer {
    position: relative;
    display: block; 

    height : 44px;
    width : 595px;
    margin : auto;

    padding : 6px;

    z-index : 50;

    background: #262626
}

#viewBar #viewBarContainer #sceneDimensionList{
    position: relative;
    display: block; 
}

#viewBar #viewBarContainer #sceneDimensionList img{
    position : absolute
}

#viewBar #viewBarContainer #sceneDimensionList span{
    color : white;
    position : absolute;
}

#viewBar #viewBarContainer #sceneDimensionList div {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    border : none;
    background : none;

    width : 250px;

    color : #FFFFFF;

    position : absolute;
    display: block;


}

#viewBar #viewBarContainer #sceneDimensionList div span {
    position : absolute;
    display : block;

    width : 250px;

    padding-top : 2px;
    padding-left : 8px;
}



#viewBar #viewBarContainer #sceneDimensionList div ul {

    position : absolute;
    display : none;

    width : 250px;

    list-style : none;

    margin : 0;
    padding : 0;

    padding-top : 38px;
}

#viewBar #viewBarContainer #sceneDimensionList div:active ul{
    display : block;
}

#viewBar #viewBarContainer #sceneDimensionList div ul:hover {
    display : block;
}

#viewBar #viewBarContainer #sceneDimensionList div li {
    margin : 0;
    background : #4A4A4A;
    max-width : 255px;
    padding-left : 8px;
    padding-top : 5px;
    height : 39px;
}

#viewBar #viewBarContainer #sceneDimensionList div li:hover {
    margin : 0;
    background : #262626;
}

#viewBar #viewBarContainer #sceneDimensionList div ul li:last-child:hover {
    background : #4A4A4A;
}

#viewBar #viewBarContainer #sceneDimensionList div li input {

    display: block;

    background : rgba(255, 255, 255, 0.8);

    color : black;

    float:left;
    outline : none;
    border : none;
    border-style : none;
}

#viewBar #viewBarContainer #sceneDimensionList div li input::placeholder {
    color : black;
}



#viewBar #viewBarContainer #sceneDimensionList div li button {

    display: block;

    float:left;
    
    height : 25px;
    width : 25px;
    background : url("/src/static/img/add-dimension-button.png");

    border: none;
    outline: none;
    text-align: center;
    text-decoration: none;
    cursor: pointer;

    margin-top : 2px;
    margin-left : 13px;
}

#viewBar #viewBarContainer #sceneDimensionList div li button:hover {
    background : url("/src/static/img/add-dimension-button-hover.png");
}

#viewBar #viewBarContainer #sceneDimensionList div li button:active {

    transform: translateY(0.5px);
  }


#viewBar #viewBarContainer #sceneDimensionList #scene {
    left: 0px;
}

#viewBar #viewBarContainer #sceneDimensionList #time {
    left: 265px;
}

#viewBar #viewBarContainer #zoomToolBar {
    position: relative;
    display: block; 
    background: #3E3E3E;

    float: right;

    

    max-height : 32px;
}

#viewBar #viewBarContainer #zoomToolBar span {
    position: relative;
    display: flex; 
    float:left;

    height : 32px;
    width : 32px;
}

#viewBar #viewBarContainer #zoomToolBar span:hover {
    background: #2F2F2F;
    cursor: pointer;
}

#viewBar #viewBarContainer #zoomToolBar span img {
    display: block;
    margin: auto;   
}


.spritesheet{
    height : 600px;
    position : relative;
    text-align : left;
}

#spritesheetcanvascontainer{
    overflow : auto;
    max-height : 600px;
    max-width : 350px;
    position : relative;
    text-align : left;
    padding-bottom : -20px;

}

#spritesheetcanvascontainer canvas{
    margin-bottom : 20px

}

#spritesheetcanvascontainer2{
    overflow : auto;
    max-height : 400px;
    max-width : 300px;
    position : relative;
    text-align : left;
    padding-bottom : -20px;

}

#spritesheetcanvascontainer2 canvas{
    margin-bottom : 20px

}



#minimap {
    display : block;
    position : absolute;
    background: #262626;  
    bottom : 0px;
    right : 13px;
    width : 278px;
    z-index : 90;

}

#minimap #minimap-container {
    display : block;
    border-top : 1px solid black;
    border-left : 1px solid black;
    border-right : 1px solid black;
    bottom : 20px;
    height : 193px;
}

#minimap>* {
    image-rendering : pixelated;
}

#minimap ._coordInput {
    display : block;
    color : white;
    border-top : 1px solid  white;
    border-left : 1px solid black;
    border-right : 1px solid black;
    width : 100%;
    height: 45px;
    padding-top : 5px;
    margin-top : 1px;
    text-align : center;
}

._coordInput ._textInput{
    display: block;
    position: relative;
    float: left;
    width: 100px;
}

._coordInput ._formTitle{
    display: block;
    position: relative;
    float: left;
    margin-right: 5px;
    width: 10px;
}

._coordInput ._button{
    margin-left: 10px;
    margin-top: 3px;
    height: 30px;
    width: 30px;
    padding: 0px;
}

#minimap ._coordInput input {
    display : block;
    position: relative;
    float: left;
    z-index : 100;
    width : 75px;
    height : 25px;
    background: #3E3E3E;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-sizing: border-box;
    color: white;
    border-radius: 0px

}

#minimap ._coordInput input::placeholder {
    color: white;
}



#minimap ._coordInput #toggleMinimap{
    position : absolute;
    height : 12px;
    width : 12px;
    top : 2px;
    right : -3px;

    background : url("/src/static/img/toggle-minimap.png");
    background-repeat: no-repeat;
    border: none;
    outline: none;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

#minimap canvas{
    z-index : 90;
    position : absolute;
}

#minimap #minimizeMinimap{
    position : absolute;
    height : 12px;
    width : 12px;
    top : 2px;
    right : -3px;
    background : url("/src/static/img/minimise-minimap.png");
    background-repeat: no-repeat;

    border: none;
    outline: none;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    z-index : 150;
}

#focus{
    display : flex;
    position : absolute;

    height : 900px;
    width : 100%;

    z-index : 150;
    color:white;
}

#focus #opacity{
    position : absolute;

    height : 100%;
    width : 100%;
    background : lightgray;

    opacity : 0.5;

    z-index : 150;
}

#focus #content{
    opacity : 1;

    display : block;

    height : 750px;

    border : 1px solid black;

    margin : auto;

    z-index : 160;
}

#focus #content #spritesheet-focus{

    position : relative;
    display : block;

    float:left;


    height : 100%;
    max-width : 394px;

    background : #2F2F2F;
}

#focus #content #spritesheet-focus .spritesheet canvas {
    position : absolute;
}



#focus #content #preview{
    opacity : 1;
    position : relative;
    display : block;

    float:left;

    width : 232px;
    min-height : 100%;

    padding-left : 15px;

    top: 0px;

    background : #2F2F2F
}

#focus #content #preview canvas{
    position : absolute;
}

#focus #content #preview #div-preview{
    background : #262626;
}



    #focus #content #preview span{
        position : relative;
        display : block;

        width : 100%;

        color : white;
    }

    #focus #content #preview #title{
        padding-top : 15px;
        padding-bottom : 15px;
    }

    #focus #content #preview #div-preview{
        position : relative;
        display : block;

        background : #262626;

        margin-bottom : 10px;

        border : 1px solid white;

        overflow : hidden;
    }

#focus #content #table{
    opacity : 1;
    position : relative;
    display : block;

    width : 640px;
    height: 100%;

    float: left;

    background : #3E3E3E;

    padding-left : 15px;
    overflow-y: auto;
    overflow-x: hidden;
}

#focus #content #table #div-focus-toolbar{
    opacity : 1;
    position : relative;
    display : block;

    width : 640px;
    height : 50px;


    padding-top : 12px;
}

#focus #content #table #div-focus-toolbar #div-focus-checkboxs{
    float: right;

    margin-right : 60px;
}

#focus #content #table #div-focus-toolbar #div-focus-checkboxs .checkbox-span{

    display: inline-block; 
    position: relative;
    padding-left: 22px; 

    margin-right : 12px;
    cursor: pointer; 

    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 15px;

    color: #FFFFFF;
}

#focus #content #table #div-focus-toolbar #div-focus-checkboxs .checkbox-span input[type='checkbox']{
    visibility: hidden;
    position : absolute;
    top: 0; 
    left: 0; 
}

#focus #content #table #div-focus-toolbar #div-focus-checkboxs .checkbox-span .checkmark{
    position : absolute;
    top: 0; 
    left: 0; 
    height: 16px; 
    width: 16px; 
    background-color: #0F0F0F;
    border-radius : 2px;
}


/* Gerer l'enfoncement */
#focus #content #table #div-focus-toolbar #div-focus-checkboxs .checkbox-span input:active ~ .checkmark{
    
}

#focus #content #table #div-focus-toolbar #div-focus-checkboxs .checkbox-span input:checked ~ .checkmark{
    background-color:  #55FFA4;
}

#focus #content #table #div-focus-toolbar #div-focus-checkboxs .checkbox-span .checkmark:after{
    content: ""; 
    position: absolute; 
    display: none; 
}

#focus #content #table #div-focus-toolbar #div-focus-checkboxs .checkbox-span input:checked ~ .checkmark:after{
    display: block; 
}

#focus #content #table #div-focus-toolbar #div-focus-checkboxs .checkbox-span .checkmark img{
    margin-left : 2px;
    margin-bottom : 2px;
}

#focus #content #table #div-focus-toolbar #div-focus-swap-tool{
    display : inline-block;
    /*! vertical-align : middle; */
}


#div-focus-swap-tool ._leftTBButton{
        position: relative;
        display: block; 
        height : 30px;
        width : 30px;
}


    #focus #content #table #div-focus-toolbar #div-focus-swap-tool div{
        display : inline-block;
        vertical-align : middle;
        margin-right : 8px;
    }

    #focus #content #table #div-focus-toolbar .swap-span{
        height : 32px;
        width : 32px;

        border: 2px solid rgba(255, 255, 255, 0.4);
        box-sizing: border-box;
    }



    #focus #content #table .div-preview-table{
        position : relative;
        display : block;

        width : 194px;
        height : 266px;

        border : 1px solid white;

        margin-right : 8px;
        margin-top : 8px;


        float: left;
    }
    

    #focus #content #table .div-preview-table .layer-content{
        background : #0F0F0F;
        height : 40px;

        padding : 7px 7px;
    }

    #focus #content #table .div-preview-table .layer-content .layer-title{
        color: white;
        background : #3E3E3E;

        position: absolute;
        width: 62px;
        height: 26px;

        padding-top: 6px;

        font-family: Roboto;
        font-style: normal;
        font-size: 12px;
        line-height: 14px;
        /* identical to box height */

        text-align: center;
    }

    #focus #content #table .div-preview-table .layer-content .layer-show{
        float : right;
        margin-top : 9px;
        margin-right : 7px;

        height : 12.2px;
        width : 20px;

        background : url("/src/static/img/show.png");
    }

    #focus #content #table .div-preview-table .layer-content .layer-show:hover{
        cursor : pointer;
        background : url("/src/static/img/show-hover.png");
    }

    #focus #content #table .div-preview-table .layer-content .layer-unshow{
        float : right;
        margin-top : 9px;
        margin-right : 7px;

        height : 12.2px;
        width : 20px;

        background : url("/src/static/img/show-active.png");
    }

    #focus #content #table .div-preview-table .layer-content .layer-unshow:hover{
        cursor : pointer;
    }

    #focus #content #table .div-preview-table .layer-content .layer-arrow{
        float : right;
        margin-right : 7px;
    }

    #focus #content #table .div-preview-table-canvas{
        height : 184px;
        display : flex;

    }

    #focus #content #table .div-preview-table-canvas div{
        margin : auto;
    }

    #focus #content #table .div-preview-table-canvas div canvas{
        position : absolute;
    }


.popup-content{
    width : 1150px;
}

._creategame-content{
    width: auto !important;
}


#PopUp{
    width : 1140px;
    background-color: #262626;
}

#AnimationForm{
    height : 600px;
}



#AnimationFormLeft{
    display: block;
    position: relative;
    float : left;
    width : 250px;
    height: 100%;
    background-color : #2F2F2F;
    color: white;
    padding: 10px;

}

#AnimationFormLeft input{
    max-width : 100px;

}


#AnimationFormLeft ._leftLine{
    display: block;
    float: left;
    width : 100%;
    border-bottom: 1px dotted white;
}

._leftLine ._textInput{
 float: left;
    margin-left: 10px;
}



#AnimationFormCenter{
    display: block;
    position: relative;
    float:left;
    width : 550px;
    color: white;
    background-color : #262626;
    max-height : 530px;
    min-height : 530px;
    overflow-y: auto;
    overflow-x: hidden;

}

#AnimationFormCenter ._header{
    float: left;
    width: 100%;
}

#AnimationFormCenter ._frameVisu{
    min-width: 200px;
    display: block;
    position: relative;
    float: left;
    margin: 10px;
    border-bottom: 0.1rem dotted white;
}

._frameVisu ._footer{
    width: 100%;
    float: left;
}

._footer span{
    position: relative;
    float: left;
}

._canvasVisualisation{
    display: block;
    position: relative;
    /*float: left;*/
    /*margin: 10px;*/
    width: 100%;
}

._canvasVisualisation ._formTitle{
    width: 100%;
}

._textInput ._formTitle_verysmall{
    width: 50px;
}

._canvasVisualisation ._caneva{
    display: block;
    float: left;
    background-color: #4A4A4A;
}

#AnimationFormRight{
    display: block;
     position: relative;
    float: right;
    width : 340px;
    height: 100%;
    background-color : #2F2F2F
}

#Footer{
    display: none;
    height: 70px;
    width: 100%;
    position: absolute;
    bottom: 0px;
    background-color: #3E3E3E;
}