/*css for top menu*/
@media only screen and (max-width: 720px) 
{
    .divTopMenuBar
    {
       overflow:hidden;  
    }

    .divMiddleBar
    {
        display:none;
    }

    .divRightBar
    {
        display:none;
    }

    .divHammerIcon
    {
        display:block;
    }
}
@media only screen and (min-width: 721px) 
{
    .divTopMenuBar
    {
       overflow:hidden;  
    }

    .divMiddleBar
    {
        display: table-cell;
    }

    .divRightBar
    {
        display: table-cell;
    }
     .divHammerIcon
    {
        display:block;
    }
}

.divTopMenuBar
{
    position:absolute;
    width:100%;              
    z-index:35;
    background-color:rgba(0, 0, 0, 0.50);
   /*background-color:#4F4F7F;*/
     background-color:#1F1F33;
    white-space:nowrap;
    min-height:40px;
    max-height:40px;     
    height :40px;   /*Important for IE 11*/   
}

.divTitleBar
    {
    float:left;
    /*width: 168px;*/
    /*min-width:168px;*/
    height:inherit;
    min-height:inherit;
    background-color:rgba(0, 0, 0, 0.30);

    display:flex;
    justify-content:center;
    align-items: center;
    user-select:none;
    cursor:pointer;
        
    }

.imgTitleBar{
   margin-left:8px;
   margin-right:8px;
}

.divFileBar
{
    float:left;
    height:inherit;
    min-height:inherit;           

    display:flex;
    justify-content:center;
    align-items: center;
    user-select:none;
    color:white;
            
    font-family: "Open Sans";
    font-size: 12px;
    font-weight:300; 
    cursor:pointer;

    max-width:120px;
}

.divFileBarHide
{
    display: none;
}

.divFileBar:hover
{
    background-color:rgba(255, 255, 255, 0.15);
}  

.divMiddleBar
    {
    float:right;
    /*width:30%;)/
    width: auto;
    /*max-width:280px;)*/
    color:white;
    font-size:18px;   
    vertical-align:middle;
    }        
       
.divRightBar
    {
    float:right;
    min-height:inherit;
    color:white;
    font-size:18px;   
    vertical-align:middle;
    }
   
.divSettings
{

    background:rgba(0, 0, 0, 0.00) url("../images/svgs/settings.svg");             
    background-repeat:no-repeat;
    background-size:22px 22px;
    background-position:center;
    float:right; 
}
.divSettings:hover
{
    background-color:rgba(255, 255, 255, 0.15);
}
.divSettingsDisable:hover
{
    background-color:rgba(255, 255, 255, 0.0);
}  

.divSettingsDisable
{

    background:rgba(0, 0, 0, 0.00) url("../images/svgs/settingsDisabled.svg");             
    background-repeat:no-repeat;
    background-size:22px 22px;
    background-position:center;
    cursor:not-allowed;
    float:right; 
}


.divTopMenuBarIcon
{
    float:right;            
    width:44px;
    min-height:40px;  
}
        
.divLegendIcon:hover
{
    background-color:rgba(255, 255, 255, 0.15);
}         
.divLegendIcon
{
             
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/LegendNew.svg");             
    background-repeat:no-repeat;
    background-size:22px 22px;
    background-position:center;
    float:right;                                    
}
.divLegendIconOn
{
    background:rgba(0, 0, 0, 0.0) url("../images/svgs/LegendNewSelected.svg"); 
    background-repeat:no-repeat;
    background-size:22px 22px;
    background-position:center;
    float:right;  
                 
}
.divLegendIconDisabled
{
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/LegendDisabled.svg"); 
    background-repeat:no-repeat;
    background-size:22px 22px;
    background-position:center;
    float:right;  
    cursor:not-allowed; 
}

.divFrameIcon:hover
{
    background-color:rgba(255, 255, 255, 0.15);
}  
.divFrameIcon 
{
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/info1.svg");             
    background-repeat:no-repeat;
    background-size:24px 24px;
    background-position:center;
    float:right; 
}  
.divFrameIconDisable
{             
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/infodisable1.svg");             
    background-repeat:no-repeat;
    background-size:24px 24px;
    background-position:center;
    cursor:not-allowed;
}

.divResetIcon:hover
{
    /*background-color:rgba(159, 159, 255, 0.50);*/
        background-color:rgba(255, 255, 255, 0.15);
}  
.divResetIcon 
{
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/ResetIcon24px.svg");             
    background-repeat:no-repeat;
        background-size:22px 22px;
    background-position:center;
    float:right; 
}  

          
.divFullScreenIcon:hover
{
        background-color:rgba(255, 255, 255, 0.15);
}  
.divFullScreenIcon
{
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/FullscreenIcon24px.svg");             
    background-repeat:no-repeat;
        background-size:24px 24px;
    background-position:center;
    float:right; 
} 
.divFullScreenIconExit
{
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/FullscreenExitIcon24px.svg");             
    background-repeat:no-repeat;
        background-size:24px 24px;
    background-position:center;
    float:right; 
} 


.divHelpIcon:hover
{
    /*background-color:rgba(159, 159, 255, 0.50);*/
        background-color:rgba(255, 255, 255, 0.15);
}  
.divHelpIcon
{
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/helpIcon.svg");             
    background-repeat:no-repeat;
    background-size:24px 24px;
    background-position:center;
    float:right; 
} 
        
.divFitViewIcon:hover
{
    /*background-color:rgba(159, 159, 255, 0.50);*/
        background-color:rgba(255, 255, 255, 0.15);
}  
.divFitViewIcon
{
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/FitviewIcon24.svg");             
    background-repeat:no-repeat;
    background-size:22px 22px;
    background-position:center;
    float:right; 
} 

.divFitViewIconDisable:hover
{
    background-color:rgba(255, 255, 255, 0.0);
} 
.divFitViewIconDisable
{
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/FitviewIcon24Disabled.svg");             
    background-repeat:no-repeat;
    background-size:22px 22px;
    background-position:center;
    cursor:not-allowed;
    float:right; 
}


.divExplodeIcon:hover
{
    background-color:rgba(255, 255, 255, 0.15);
}  
.divExplodeIcon
{
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/Explode24.svg");             
    background-repeat:no-repeat;
    background-size:24px 24px;
    background-position:center;
    float:right; 
} 

.divExplodeIconDisable:hover
{
    background-color:rgba(255, 255, 255, 0.0);
} 
.divExplodeIconDisable
{
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/Explode24Disable.svg");             
    background-repeat:no-repeat;
    background-size:24px 24px;
    background-position:center;
    cursor:not-allowed;
    float:right; 
}


.divSectionIcon:hover
{
    background-color:rgba(255, 255, 255, 0.15);
}  
.divSectionIcon
{
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/Section24.svg");             
    background-repeat:no-repeat;
    background-size:24px 24px;
    background-position:center;
    float:right; 
} 

.divSectionIconDisable:hover
{
    background-color:rgba(255, 255, 255, 0.0);
} 
.divSectionIconDisable
{
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/Section24disabled.svg");             
    background-repeat:no-repeat;
    background-size:24px 24px;
    background-position:center;
    cursor:not-allowed;
    float:right; 
}


.divTreeIcon:hover
{
    background-color:rgba(255, 255, 255, 0.15);
}  
.divTreeIcon
{
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/account_tree_black_24dp.svg");             
    background-repeat:no-repeat;
    background-size:24px 24px;
    background-position:center;
    float:right; 
} 

.divTreeIconDisable:hover
{
    background-color:rgba(255, 255, 255, 0.0);
} 
.divTreeIconDisable
{
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/account_tree_black_24dp_Disabled.svg");             
    background-repeat:no-repeat;
    background-size:24px 24px;
    background-position:center;
    cursor:not-allowed;
    float:right; 
}



/*
.divHammerIcon:hover
{
    background-color:rgba(255, 255, 255, 0.15);
}  
*/

.divHammerIcon
{
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/hammer.svg");             
    background-repeat:no-repeat;
    background-size:22px 22px;
    background-position:center;
    float:right; 
    display:block;
} 
        
.divOpenFileIcon:hover
{
    /*background-color:rgba(159, 159, 255, 0.50);*/
        background-color:rgba(255, 255, 255, 0.15);
}  
.divOpenFileIcon
{
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/FileOpenIcon24px.svg");             
    background-repeat:no-repeat;
    background-size:20px 20px;
    background-position:center;
    float:right; 
} 
       
.divVPICon:hover
{
    /*background-color:rgba(159, 159, 255, 0.50);*/
        background-color:rgba(255, 255, 255, 0.15);
}  
.divVPICon
{             
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/ViewpointIcon24px.svg");             
    background-repeat:no-repeat;
    background-size:24px 24px;
    background-position:center;
}

.divVPIConDisable:hover
{
    background-color:rgba(255, 255, 255, 0.0);
}  
.divVPIConDisable
{             
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/ViewpointIcon24px_disabled.svg");             
    background-repeat:no-repeat;
    background-size:24px 24px;
    background-position:center;
    cursor:not-allowed;
}
        
.divCAEPlay:hover
{
    background-color:rgba(255, 255, 255, 0.15);
} 
.divCAEPlay
    {
             
    background:rgba(0, 0, 0, 0.0) url("../images/svgs/CAEAnimIcon24px.svg");             
    background-repeat:no-repeat;
    background-size:24px 24px;
    background-position:center;
    }


.divCAEPlayDisable:hover
{
    background-color:rgba(255, 255, 255, 0.0);
}  
.divCAEPlayDisable
{
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/CAEAnimIcon24pxDisabled.svg"); 
    background-repeat:no-repeat;
    background-size:24px 24px;
    background-position:center;
    cursor:not-allowed;
}
       
.divDISPMode:hover
{
    /*background-color:rgba(159, 159, 255, 0.50);*/
        background-color:rgba(255, 255, 255, 0.15);
} 
.divDISPMode
    {
             
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/DM_ShadedMesh24.svg");             
    background-repeat:no-repeat;
    background-size:20px 20px;
    background-position:center;
    }

.divDISPModeDisable:hover
{
    background-color:rgba(255, 255, 255, 0.0);
}  
.divDISPModeDisable
{
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/DM_ShadedMesh24_disabled.svg"); 
    background-repeat:no-repeat;
    background-size:20px 20px;
    background-position:center;
    cursor:not-allowed;
}
        
.divCapture:hover
{
    /*background-color:rgba(159, 159, 255, 0.50);*/
        background-color:rgba(255, 255, 255, 0.15);
} 
.divCapture
    {
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/save-file-option.svg");             
    background-repeat:no-repeat;
    background-size:16px 16px;
    background-position:center;
    }
        
.divTopMenuBarIconSelected
{
        box-shadow: inset 0px -3px 0px #4990E2; 
        background-color:rgba(255, 255, 255, 0.15);
}
        
.divSeparator
{
    float:right;  
    width:1px;
    color:white;
    background-color:rgba(159, 159, 255, 0.50);
    min-height:inherit;
    position: relative;
    top: 0px;
    bottom: 0px;


}

/*css for top menu*/


/*css for side menu*/
.divSideBar
{
    font-family: "Open Sans";
    font-size:small;
    position:absolute;
    right:0px;
    background-color:rgba(0, 0, 0, 0.70);
    z-index:34;
    top:40px;
    bottom:0px;

    /*width:216px;   */
    width:20%;    
    min-width:192px;
    max-width:256px;
    display:none;
    color:#dcdcdc;  
    user-select:none;
           
}
/*     
.divSideBar span
{
    /*cursor:default;
}*/

.divSideBarTitle
{
font-family: "Open Sans";
font-size:10px;
color:#dcdcdc;           
height:32px;
background-color:rgba(0, 0, 0, 0.50);

display: flex;
justify-content: flex-start;
align-items: center;
box-shadow: inset 0px -1px 0px #fff3; 

            
}
.divSideBarHeader
{
display: flex;
justify-content: flex-start;
align-items: center;
height:100%;
width:90%;

}
/*
.divSideBarHeaderEx
{
} */      
.divSideBarHeaderEx:hover
{
    background-color:rgba(255, 255, 255, 0.15);
}        
        
.divSideBarClose
{
    display: flex;
    justify-content:center;
    align-items: center;
    height:32px;
    width:32px;
}

.divSideBarClose:hover
{
    background-color:rgba(255, 255, 255, 0.15);
}  

.divSideBarTitleImg
{
    width:16px;
    height:16px;
    margin-left:8px; 

    display: flex;
    justify-content:center;
    align-items:center;
}

.divSideBarContainer
{
    position:absolute; /*added for scrolling*/ 
    top:32px;/*added for scrolling*/ 
    bottom:0px; 
    position:absolute;   
    width:100%;      
}

/*.divSideBarContainer -> scroller to eliminate right margin*/
.mCSB_inside > .mCSB_container {
    margin-right: 0px;
}
       
.divlistItem
{
font-family: Open Sans;
font-weight:300;
font-size:12px;
color:#dcdcdc;             
height:48px;

display: flex;
justify-content:flex-start;
align-items:center;
/*box-shadow: inset 0px -1px 0px #fff3; */
cursor:default;
}    
  
/*
.divSettingsHideLabels 
{

}

.divSettingsHidexyplots 
{

}

.divSettingsApplyView 
{
 
}

.divSettingsApplyState 
{
  
}

.divSettingsFixScaleFactor 
{
 
}

.divSettingsFixAnimationSpeed 
{
 
}

*/

.divSettingRatiobtn
{
    font-family: Open Sans;
    font-weight:300;
    font-size:12px;
    color:#dcdcdc;             
    height:48px;
    
    display: flex;
    justify-content:flex-start;
    align-items:center;
    box-shadow: inset 0px -1px 0px #fff3; 
    cursor:default;  
}
       
.divlistItem:hover
{
        /*background-color:rgba(159, 159, 255, 0.50);*/
        background-color:rgba(255, 255, 255, 0.15);
}
        
.divlistItemSelected
{
    border-left: 4px solid #4990E2;     
    background-color:rgba(255, 255, 255, 0.10);
}

.divlistItemSelectedIMG> div > img
{
    border:4px solid #4990E2;
}
       
.divViewPointIMG
{
font-family: Open Sans;
font-weight:300;
font-size:12px;
color:#dcdcdc;             
text-align:center;
display: flex;
justify-content:center;
align-items:center;
/*box-shadow: inset 0px -1px 0px #fff3; */
cursor:default;
width:100%;
height:auto;
}
       
.divTitle
{
font-family: Open Sans;
font-weight:300;
font-size:12px;

color:white;             
height:30px;

display: flex;
justify-content:flex-start;
align-items:center;
box-shadow: inset 0px -1px 0px #fff3; 
padding-left:16px;
background-color:rgba(0, 0, 0, 0.50);
             
}
       
.divSubTitle
{
font-family: Open Sans;
font-weight:300;
font-size:12px;

color:white;             
height:30px;

display: flex;
justify-content:flex-start;
align-items:center;
box-shadow: inset 0px -1px 0px #fff3; 
padding-left:16px;
background-color:rgba(0, 0, 0, 0.30);
cursor:default;
             
}
       
.divSubTitleEx
{
box-shadow: inset 0px 1px 0px #fff3,inset 0px -1px 0px #fff3;            
}
      
.btnCapture
{
width:100px; 
height:24px;

margin-top:8px;

margin-bottom:8px;
margin-left:25%; 
/*position:relative;*/
/* left:50%;*/

       


background-color:rgba(0, 0, 0, 0.30);
display: inline-block;
border: 0px solid #fff3; 
border-radius: 2px;
box-sizing: border-box;
color:white;
           

}

      
.btnMarkup
{
width:100px; 
height:24px;

margin-top:8px;
margin-bottom:8px;
margin-left:25%; 
/* position:relative;*/
/* left:50%;*/

       


background-color:rgba(0, 0, 0, 0.30);
display: inline-block;
border: 0px solid #fff3; 
border-radius: 2px;
box-sizing: border-box;
color:white;
           

}
      
.inpFileName
{
width:60%; 
max-width:150px;
margin-top:16px;
height:24px;

font-size:12px;

background-color:rgba(0, 0, 0, 0.00);
display: inline-block;
border: 1px solid #fff3; 
border-radius: 2px;
box-sizing: border-box;
color:white;

          
margin-left:30px; 
/*margin-top:10px;*/
/*margin-bottom:10px;*/
position:relative;
/*left:50%;*/

  padding-left:5px; 
}
      
.divAnmCtrl
{
display: flex;
justify-content:center;
align-items:center;
}
      
.divCEAANIIcon
{
width:44px;
height:40px;
margin-top:10px;
margin-bottom:10px;

}

.divCEAANIIcon:hover
{
    background-color:rgba(255, 255, 255, 0.15);
}

.divCAEPreviousIcon
    {
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/CAEAnimPrevIcon24px.svg");             
    background-repeat:no-repeat;
    background-size:auto 60%;
    background-position:center;
    }

.divCAEPreviousDisabledIcon
    {
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/CAEAnimPrevDisabledIcon24px.svg");             
    background-repeat:no-repeat;
    background-size:auto 60%;
    background-position:center;
    cursor:not-allowed;
    background-color:rgba(0, 0, 0, 0.00);
    }

.divCAEPreviousDisabledIcon:hover
{
    background-color:rgba(0, 0, 0, 0.00);
}


.divCAEPlayPauseIcon
    {
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/CAEAnimIcon24px.svg");             
    background-repeat:no-repeat;
    background-size:auto 60%;
    background-position:center;
    }

.divCAEStopIcon
    {
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/CAEPauseIcon24px.svg");             
    background-repeat:no-repeat;
    background-size:auto 60%;
    background-position:center;
    }

.divCAENextIcon
    {
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/CAEAnimNextIcon24px.svg");             
    background-repeat:no-repeat;
    background-size:auto 60%;
    background-position:center;
    }

.divCAENextDisabledIcon
    {
    background:rgba(0, 0, 0, 0.00) url("../images/svgs/CAEAnimNextDisabledIcon24px.svg");             
    background-repeat:no-repeat;
    background-size:auto 60%;
    background-position:center;
    cursor:not-allowed;
    background-color:rgba(0, 0, 0, 0.00);
    }

.divCAENextDisabledIcon:hover
{
    background-color:rgba(0, 0, 0, 0.00);
}

.inpSpeed
    {
    margin-top:25px;
    margin-bottom:25px;
    width:150px;
    left:50%;
    position:relative;
    margin-left:-75px;
    user-select:none;    

    }
.inpSpeed::-moz-focus-outer {
    border:0px black dashed;
    }

.inpScaleFactor
    {
    margin-top:25px;
    margin-bottom:25px;
    width:150px;
    left:50%;
    position:relative;
    margin-left:-75px;

    background-color:rgba(0, 0, 0, 0.30);
    display: inline-block;
    border: 1px solid #fff3; 
    border-radius: 2px;
    box-sizing: border-box;
    color:white;
    -moz-appearance: textfield;
    padding-left:5px; 
           
    }

.inpScaleFactor::-webkit-inner-spin-button { -webkit-appearance: none;}

.inpScaleFactor::-webkit-outer-spin-button { -webkit-appearance: none;}

.inpScaleFactor:focus {outline: none; }


.inpAnimType
    {
    margin-top:25px;
    margin-bottom:25px;
    width:150px;
    left:50%;
    position:relative;
    margin-left:-75px;

    /*background-color:rgba(0, 0, 0, 0.30);*/
    display: inline-block;
    border: 1px solid #fff3; 
    border-radius: 2px;
    box-sizing: border-box;
    color:white;
    -moz-appearance: textfield;
    padding-left:5px; 
           
    }

.inpAnimType::-webkit-inner-spin-button { -webkit-appearance: none;}

.inpAnimType::-webkit-outer-spin-button { -webkit-appearance: none;}

.inpAnimType:focus {outline: none; }


/*css for side menu*/


/*css for Menu side bar*/
.divMobilePopMenu{
    position:absolute;
    top:2px;
    right:2px;

    display:none;
    /*background-color:#373759;*/
    background-color:#1F1F33;
    z-index:37;
    width:20%;    
    min-width:192px;
    max-width:256px;
    
     /*overflow-y:scroll;*/
     max-height: 90%;   
     overflow:hidden;  
     height:auto; 

     box-shadow: -2px 2px 8px #373759; 
}

/*css for Menu side bar*/

/*tooltip*/

.myCustomClass{
    border-color: rgba(0, 0, 0, 0.25);
    background-color:rgba(0, 0, 0, 0.25);
    border-radius:5px;
    margin:10px;
}

.myCustomClass .qtip-content{
    font-family: "Open Sans";
    font-size:15px;
    font-weight:300;
     background-color:rgba(0, 0, 0, 0.5);
     color:#FFFFFF;
}



/*tooltip*/

/*JQuery-Confirm theme change*/

.jconfirm .jconfirm-box
{
    background-color:#1F1F33;
    color:#FFFFFF;
}

.jconfirm .jconfirm-box.jconfirm-dark
{
    border-top: solid 0px #34495e;
    font-size:11px;
}

.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title{
    font-family:'Open Sans';
    font-size:14px;
    font-weight: 800;
}

.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button, .jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button {
       
    /*padding: 4px 4px;*/
    font-size: 12px;
    font-weight: bold;
    text-shadow: none;
}

.divFrameContainer, .jconfirm-content{
     font-family:'Open Sans';
     font-size:12px;
}

#divCursor{
    -webkit-user-select: none; /* Chrome, Opera, Safari */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
}

/*JQuery-Confirm theme change*/


/*.divVPICon{
    display:none;
}

.divDISPMode{
    display:none;
}

.divCapture{
    display:none;
}

.divLegendIcon{
    display:none;
}*/

/* Settings => Ratio button CSS */
 .settingsOptSwitch {
    position: relative;
    display: inline-block;
    width: 26px;
    height: 8px;
   
    
  }
  
  .settingsOptSwitch input { 
    opacity: 0;
    width: 0;
    height: 0;

  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .1s;
    transition: .1s;

  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    bottom: -3px;
    background-color: white;
    -webkit-transition: .1s;
    transition: .1s;
    
  }
  
  .settingsRatiobtn:checked + .slider {
    background-color: #4990E2; 
  }

  .settingsRatiobtn:disabled + .slider {
    background-color: #ccc;
}

  .settingsRatiobtn:focus + .slider {
    box-shadow: 0 0 1px #4990E2; 
  }
  
  .settingsRatiobtn:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }
  
  .settingsRatiobtn:checked + .slider:before {
   margin-left: -13px;
  }

  /*should be after .slider to overside cursor*/
  .disabledSyncRatiobtn{
     cursor:not-allowed;
  }

/*Side bar Explode GUI*/
    
.inpExplodeRange{
    margin: 0px;
    margin-top: 12px;
    margin-bottom: 12px;
    padding: 12px;
    width:calc(100% - 44px);
    position:relative;
    user-select:none;  
}
.inpExplodeRange::-moz-focus-outer{
    border:0px black dashed;
}
.explodeSensitivity{

    position:relative;
    background-color:rgba(0, 0, 0, 0.30);
    /*display: inline-block;*/
    border: 1px solid #fff3; 
    border-radius: 2px;
    box-sizing: border-box;
    color:white;
    -moz-appearance: textfield;
    text-align: center;
    margin-left: 5px;
    margin-right: 5px;
           
    width: 50px;
}
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
.spnExplodeSensitivity{
    font-family: Open Sans;
    font-weight:300;
    font-size:12px;
    color:white;
}
.divExplodeSensitivity{
    padding-top:24px;
    padding-bottom:24px;
    display: flex;
    justify-content: center;
    box-shadow: inset 0px -1px 0px #fff3;
}
.btnExplodeSensitivity{
    height: 20px;
    background-color:rgba(0, 0, 0, 0.30);
    color:white;
    border-color: #fff3;
}

.divExplodebtn{
    vertical-align: middle;
    text-align: center;
    margin-top: 20px;
}

.btnExplodeFunc{
    height: auto;
    background-color:rgba(0, 0, 0, 0.30);
    color:white;
    border-color: #fff3;
    cursor: pointer;
    font-size: 12px;
    padding: 5px;

}

/*Side bar Explode GUI*/


/*Side bar TREE GUI*/

.divShowTree
{
    height: calc(100vh - 72px);/* 40 + 32 */
}

.divProducTree {
    /*position: absolute;*/
    /*height: 100%;*/
    width: 100%;
    height: calc(100vh - 172px);/* 40 + 32 + 80 */
}
ul.fancytree-container {
    height: 100%;
    width: 100%;
    /*overflow: auto;*/
    background-color: transparent;
    border: 1px solid transparent
}

span.fancytree-title{
    color: #dcdcdc;
    border: 1px solid transparent  
}
span.fancytree-node {
    height: 20px; 
}

.fancytree-plain.fancytree-container.fancytree-treefocus span.fancytree-focused span.fancytree-title {
    border: 1px solid transparent
  }

.fancytree-plain span.fancytree-node:hover span.fancytree-title {
    background-color: transparent;
    border: 1px solid transparent
}

.fancytree-plain.fancytree-container.fancytree-treefocus span.fancytree-selected span.fancytree-title{
    background-color: transparent;
    border: 1px solid transparent
}
.fancytree-plain.fancytree-container.fancytree-treefocus span.fancytree-active span.fancytree-title {
    background-color: transparent;
    border: 1px solid transparent
}
.fancytree-plain span.fancytree-active span.fancytree-title,
.fancytree-plain span.fancytree-selected span.fancytree-title 
{
    background-color: transparent;
    border: 1px solid transparent
}

.foo-icon-partiallyvisible
{
    /*cursor: pointer;*/
    background-image: url('../images/svgs/preview_white_18dp.svg');
    background-size: 16px 16px;
}
.foo-icon-invisible
{
    /*cursor: pointer;*/
    background-image: url('../images/svgs/visibility_off_white_18dp.svg');
    background-size: 16px 16px;
}
.foo-icon-visible
{
    /*cursor: pointer;*/
    background-image: url('../images/svgs/visibility_white_18dp.svg');
    background-size: 16px 16px;
}	


.mCSB_container_wrapper
{
    margin-right: 16px;
    margin-bottom: 16px;
}

.selectedNode{
    background-color: #2a63a5;
}

.mCSB_scrollTools {
    z-index: 60000;
}
.mCSB_container_wrapper>.mCSB_container{
    padding-right: 0px;
    min-height: 100%;
}
.mCSB_container_wrapper{
    margin-right: 8px;
}
ul.fancytree-container {
    font-family: inherit;
}

.divTreeFuncContainer{
    width: 100%;
    height: 100px;
    box-shadow:  inset 0px 2px 0px 0px #fff3;
    display: table-cell;
    vertical-align: middle;
    text-align: center;

}
.divTreeFunc{
    justify-content: center;
    display: inline-block;
}

.btnTreeFunc{
    height: auto;
    background-color:rgba(0, 0, 0, 0.30);
    color:white;
    border-color: #fff3;
    cursor: pointer;
    font-size: 12px;
    margin-top: 5px;
    padding: 5px;

}

/*Side bar TREE GUI*/


/*Side bar Section GUI*/


.divClipPlaneContainer{
    box-shadow:  inset 0px -1px 0px 0px #fff3;
    vertical-align: middle;
    text-align: center;
}

.divClipPlane{
    justify-content: center;
    display: inline-flex;
    margin-top: 10px;
    margin-bottom: 10px;
}

.btnClipPlane{
    height: auto;
    background-color:rgba(0, 0, 0, 0.30);
    color:white;
    border:1px solid #fff3;
    cursor: pointer;
    /*font-size: 12px;
    margin-top: 5px;*/
    padding: 5px;
    margin-left: 5px;
    
}

.btnSelectedClipPlane{
    border: #4990E2 2px solid;
}

.btnAlignToPointGrp1{
    width: fit-content;
}
.btnAlignToPointGrp2{
    width: fit-content;
    margin-left:15px;
}

.btnAlignToPoint{
    height: auto;
    background-color:rgba(0, 0, 0, 0.30);
    color:white;
    border:1px solid #fff3;
    cursor: pointer;
    vertical-align: middle;
    width: 32px;
    height: 32px;
}

.btnAlignToPoint:hover{
    background-color:rgba(0, 0, 0, 0.00);
}

.btnAlignToPointSelected{
    border: #4990E2 2px solid;
}

.btnPoints{
    background: rgba(0, 0, 0, 0.30) url(../images/svgs/points.svg);
    background-repeat:no-repeat;
    /*background-size:20px 20px;*/
    background-position:center;
    width: 32px;
    height: 32px;
}

.btnFaces{
    background: rgba(0, 0, 0, 0.30) url(../images/svgs/triangle.svg);
    background-repeat:no-repeat;
    /*background-size:20px 20px;*/
    background-position:center;
    width: 32px;
    height: 32px;
}

.divTranslateCtrl{

    font-family: Open Sans;
    font-weight:300;
    font-size:12px;
    color:#dcdcdc;             


    justify-content:flex-start;
    align-items:center;
    box-shadow: inset 0px -1px 0px #fff3; 
    cursor:default;  
}

.divFlipbtn {
    background-image: url('../images/svgs/flip_white_18dp.svg');
    background-repeat:no-repeat;
    background-size:18px 18px;
    background-position:center;
    width: 24px;
    height: 24px;
    border: 2px #fff3 solid;
    float: right;
    margin-right: 2px;
    cursor: pointer;
    margin-right: 10px;
    margin-top: 5px;
}

.divFlipbtn:hover {
    background-color:rgba(255, 255, 255, 0.15);
}

.divFlipbtnDisabled{
    background-image: url('../images/svgs/flip_white_disabled_18dp.svg');
    cursor: not-allowed;
} 

.divFlipbtnDisabled:hover {
    background-color:rgba(0, 0, 0, 0.0);
}

.divRotateUCtrl{

    font-family: Open Sans;
    font-weight:300;
    font-size:12px;
    color:#dcdcdc;             


    justify-content:flex-start;
    align-items:center;
    box-shadow: inset 0px -1px 0px #fff3; 
    cursor:default;  
}

.divRotateVCtrl{

    font-family: Open Sans;
    font-weight:300;
    font-size:12px;
    color:#dcdcdc;             


    justify-content:flex-start;
    align-items:center;
    box-shadow: inset 0px -1px 0px #fff3; 
    cursor:default;  
}


.inpSectionRange {
    padding: 12px;
    width: calc(100% - 44px);
    position: relative;
    user-select: none;
}

.btnResetPlane{
    width:100px; 
    height:24px;

    margin-top:8px;

    margin-bottom:8px;
    margin-left:33%; 
    /*position:relative;*/
    /* left:50%;*/
    background-color:rgba(0, 0, 0, 0.30);
    display: inline-block;
    border: 1px solid #fff3; 
    border-radius: 2px;
    box-sizing: border-box;
    color:white;
    cursor:pointer;          
}

.btnResetPlane:hover{
    background-color:rgba(255, 255, 255, 0.15);
}

.btnResetPlaneDisabled{
    cursor:not-allowed;
    color:#aaa;
}
.btnResetPlaneDisabled:hover{
    background-color:rgba(0, 0, 0, 0.30);
}

/*Side bar Section GUI*/