body {

margin:0;

padding:0;

}

#topbar{width:100%;

    background-image: url(images_dhtmlsuite/menu_strip_bg.jpg);}

#mainBody{
     width:100%; position:relative;min-width:800px;
    min-height: 94vh;
   
}

#toolBoxArea{

    vertical-align: top;

    background-color: rgb(252, 252, 252);

}

#toolBoxArea,#wrapperDiv,#rightColumn{display:inline-block;}
#wrapperDiv{
    width: 100%;
}


#toolBoxTop img, #rightCol .fullwidth>a img,  #rightCol .fullwidth>img,.layer img{width:100%; height:auto;}

#manageColorWrapper{padding-left:2px;border-left:1px solid black;border-right:1px solid black; margin-left:2px;}

#manageColorWrapper>img{width:7px;}

#newColorDb a img{width:65px;height:auto;}

#toolBoxContent{border: 1px solid #000;}
.TBRow {
    padding: 1px 0;
}
.insideTBRow{display:inline-block;

             width:40%;min-width:17px;

             height:auto;

             text-align:center;

}

.insideTBRow img{width:80%; height:auto;vertical-align:middle}

.fullwidth{

     width:100%

}

.width96{width:95%}

.TBRow .width96 img{width:20%}



.TBRow .width96 a img{width:40%}

.TBRow .width96 a{margin-right:5px;}



#quickColorsArea{margin:1vw 0;}

#quickColorsArea img{    width: 100%;

    height: auto;

    border: 0px;}
#CentralArea { 
margin-right:250px; margin-left:48px;
    text-align: center;

    vertical-align: top;

    background-image: url(images/bg--.jpg);

    background-color: #ADADAD;

    background-repeat: repeat-x;
        
        min-height: 93vh;
}


#toolBoxArea { position:absolute; top:0; bottom:30px;

    width: 54px;

   min-width:48px;

   background-color:white;

}

/*#CentralArea {

     left: 54px; 

    right: 15vw;

    bottom:30px;

    top:0;

}*/



@media screen and (max-width:900px){

    /*#CentralArea{left:48px;}*/

    

#toolBoxArea {width:48px;}

}



@media screen and (max-width:1500px){

    /*#CentralArea{right:250px;}*/

    #rightColumn{width:250px;}

}



@media screen and (min-width:1500px){

    #toolBoxArea {

        width: 60px;

    }

}

.bg-application {

    width:100%; height:100%;

    position:absolute;top:0;bottom:0;

    display:flex;

}

#ContentDisplayArea {

      /*position: absolute;*/
     
      left: 0; right: 0;top:10px;/*bottom:10px;*/

    margin: auto;width:60%; min-width:400px;

    background-color:white;
  font-size:14px;
  text-align: left; padding: 20px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
 padding-bottom:60px;

}




@media screen and (min-width:1800px){

    #ContentDisplayArea{font-size:0.8vw;}

}

@media screen and (max-width:1200px){

    #ContentDisplayArea{width:80%;}

}
#ContentDisplayArea img{max-width:100%;height:auto; max-height:100%;vertical-align:top;}
#rightColumn{    min-width:150px;
    bottom: 30px;

    position: absolute;

    right: 0;

    top: 0;

    /*background-image: url(images/layer-bg.jpg);*/

}

#layerArea{

    position: absolute;

    border-left: 1px solid black;

    border-right: 1px solid black;

    top: 35vw;

    bottom: 2px;

    margin-left: 5px;

    left: 0;

    right: 0;

	z-index:-1;

}



@media screen and (min-width:1500px){

   #layerArea{top:2vw;}

}

#UsedColorsRow{vertical-align: top; display: inline-block;

               position: absolute;

    right: 11vw;

    top: 0;

    bottom: 0;margin-right: 1px;

}



@media screen and (max-width:1500px){

    #UsedColorsRow{right:173px;}

}

#rightCol{

    position: absolute;

    display: inline-block;

   right:0;

   top:0;

    bottom:0;

    width: 11vw;

    min-width:171px;

    PADDING-LEFT: 3PX;

}

.borders{position:absolute; top:168px; bottom:48px; width:70px;border-right:1px solid black; border-left:1px solid black;background-color: white;}

#LayersHistoryArea{position:absolute; bottom:-2px;}

#layerBtnArea{position:absolute; bottom:20px;}

#bottom{position: absolute;

    bottom: 0;}

.inRow img, #bottom img, #toolBoxTop img{vertical-align:bottom;}

.inRow{display:inline-block;}



#manageColorWrapper div{display:inline-block;}

.manageColorDB{vertical-align:middle; width:19%; text-align:center;}

#newColorDb{width:30%;}

#restoreColor{width: 15%;float:right}

#layerButtons{

        border-bottom: 1px solid black;

        position: absolute;

    LEFT: 0;

    right: 0;

    bottom: 19px;

}

#layerButtons img{width:20px; height:22px;}

.atLeft{width: 3px;height:27px;

    background-image: url(images/layer-left.jpg);}

.atRight{

    background: url(images/layer-right.jpg) repeat-y left top;



}



#manageColorWrapper a img{width:initial;}

 #layerButtons .atLeft>img, #layerButtons .atRight>img{width:1px;}



#bottomInfoArea{position:absolute;left:0;right:0; bottom:0;height:30px; background-color:#fcfcfc;}

#bottomInfoArea .info{display:inline-block;width:49%;}



@media screen and (max-width:1000px){

    #bottomInfoArea{height:60px;}

    #bottomInfoArea .info{display:block;}

    /*#CentralArea {
        bottom: 60px;
    }*/
     #rightColumn {
        bottom: 60px;
    }
    
#bottomInfoArea .info{display:block;width:100%;}


}

@media screen and (min-width:1900px){

    #rightColumn {width:295px;

    }

    #rightCol{width:220px;}

    #UsedColorsRow{right:220px;}

    #manageColorWrapper{    border-left: 2px solid black;

    border-right: 2px solid black;}

        

    #restoreColor{float:none;}

    #layerButtons img {

        width: 25px;

        height: 25px;

    }
    #toolBoxArea{
        width: 3.8vw;
    }
    #UsedColorsRow{
            right: 12vw;
    }
    #rightCol{
        width: 12vw;
    }
   
#CentralArea{
    margin-right: 13vw;
}

}

@media screen and (device-aspect-ratio: 2560/1080) and (min-width:1900px){
    /*.DHTMLSuite_menuBar_top {    font-size: 0.6vw;}
    .DHTMLSuite_menuBar_sub {    font-size: 0.6vw;}
    */
    #rightCol{ 
        width: 10vw;
        }
    #UsedColorsRow{
        right: 10vw;
    }
     #toolBoxArea{
        width: 75px;
      }
}

 #topbar .DHTMLSuite_menuBar_top .DHTMLSuite_menuItem_top_regular div{width:0.8vw; min-width:15px;}
    #topbar .DHTMLSuite_menuBar_top .DHTMLSuite_menuItem_top_regular img{width:100%;vertical-align:middle;}
      #topbar .DHTMLSuite_menuBar_top {padding-bottom:2px;}
   
.DHTMLSuite_menuBar_top{font-size:12px;}
#DHTMLSuite_menuBarSubGroup8{min-width:230px;}