body {
  text-align: center;
}

.navbar-default {
    background-color: #434343;
    border-bottom-color: #8AC249;
    border-bottom-width: 4pt;
    /*height: 65px;*/
    color: white;
    box-shadow: 0 2px 20px #626262;
    /*border: 1px solid transparent*/
}

.navbar-brand {
    height: 60px;
}

    .navbar-brand img {
        height: 100%;
    }

.nav > li > a:hover, .nav > li > a:focus, .sidebar ul li a.active {
    background-color: inherit;
    color: #FFF;
    font-weight: bold;
}

.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
    background-color: inherit;
}

.nav > li > a {
    position: relative;
    display: block;
    padding: 20px 15px;
    color: white;
}

.navbar-top-links li a {
    padding: 20px 15px;
    min-height: 65px;
}

.sidebar-nav {
    background: #626262;
}

    .navbar-top-links {
        color: #8AC249;
        text-align: right;
    }

        .navbar-top-links li a {
            color: #8AC249;
        }

canvas {
  margin: auto;
  display: block;
}

.sidemenu {
    position:fixed;
    height: 100%;
    width: 200px;
    height: 550px;
    z-index: 1;
    top: 125px;
    left: 0;
    background-color: hsla(0, 0%, 1%, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    border-radius: 0.5em 3em 3em 0.5em;
    border: solid hsla(0, 0%, 100%, 1);
    visibility: hidden;
}

.sidemenu .closeMenubtn {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 36px;
    margin-left: 50px;
}

.sidemenu a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 16px;
    color: #FFF;
    /*display: block;*/
    transition: 0.3s;
}

.sidemenu a:hover {
    color: #f1f1f1;
}

.thumbswin{
    overflow: scroll;
    right: 0;
    top: 15%;
    width: 200px;
    height: 578px;
    margin: 2.5em 0 0 0;
    z-index: 5;
    background: hsla(45, 100%, 100%, 1);
    color: white;
    border: solid hsla(0, 0%, 100%, 0);
    border-right: none;
    border-top: solid 1.3px rgb(224, 225, 224)
}

.container{
    position: fixed;
    top: 15%;  
}
.sidenav {
    position: fixed;
    right: 0;
    top: 10%;
    width: 200px;
    height: 578px;
    margin: 2.5em 0 0 0;
    z-index: 5;
    background: hsla(0, 0%, 21%, 1);
    color: white;
    /*font-weight: bold;
    font-size: large;
    text-align: left;*/
    border: solid hsla(0, 0%, 100%, 0);
    border-right: none;
    border-top: solid 1.3px rgb(224, 225, 224)
    /*padding: 0.5em 0.5em 0.5em 2.5em;*/
    /*box-shadow: 0 1px 3px black;*/
    /*border-radius: 0.5em 0.5em 0.5em 0.5em;*/
 }

.sidenav a {
    padding: 0px 0px 0px 0px;
    text-decoration: none;
    font-size: 12px;
    color: black;
    /*display: block;*/
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 36px;
    margin-left: 50px;
}

.sidenav .openbtn {
    position: absolute;
    top: 35px;
    right: 0;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.icon-bar {
    position: fixed;
    top:60px;
    left: 20%;
}
.icon-bar a {
    float: left;
    width: 10%;
    text-align: center;
    padding: 12px 0;
    transition: all 0.3s ease;
    color: white;
    font-size: 24px;
}
/*.icon-bar a:hover {
    background-color: #554;
}*/

.btn {
    background: #8AC249;
    background-image: -webkit-linear-gradient(top, #8AC249, #8AC249);
    background-image: -moz-linear-gradient(top, #8AC249, #8AC249);
    background-image: -ms-linear-gradient(top, #8AC249, #8AC249);
    background-image: -o-linear-gradient(top, #8AC249, #8AC249);
    background-image: linear-gradient(to bottom, #8AC249, #8AC249);
    -webkit-border-radius: 5;
    -moz-border-radius: 5;
    border-radius: 5px;
    font-family: Arial;
    color: #ffffff;
    font-size: 15px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
}

    .btn:hover {
        background: #8AC249;
        background-image: -webkit-linear-gradient(top, #8AC249, #8AC249);
        background-image: -moz-linear-gradient(top, #8AC249, #8AC249);
        background-image: -ms-linear-gradient(top, #8AC249, #8AC249);
        background-image: -o-linear-gradient(top, #8AC249, #8AC249);
        background-image: linear-gradient(to bottom, #8AC249, #8AC249);
        text-decoration: none;
    }
.ToolIconDiv{
        display:inline-block;
        border-bottom: solid 1.3px rgb(224, 225, 224) 
    }
.ToolIconTop{
    width: 144px;
    height: 46px;
}
    .ToolIcon{
     width: 46px;
    height: 46px;
    border-right: solid 1.3px rgb(224, 225, 224)    
    }
    .Implant_Visibility{
        content:url("icons/Implant_Visibility.png");
    }
    /*.Implant_Visibility:hover{
        content:url("icons/Implant_Visibility_Hover.png");
    }*/
    .Image_Visibility{
        content:url("icons/Image_Visibility.png");
    }
    /*.Image_Visibility:hover{
        content:url("icons/Image_Visibility_Hover.png");
    }*/
    .BG_Visibility{
        content:url("icons/BG_Visibility.png");
    }
    /*.BG_Visibility:hover{
        content:url("icons/BG_Visibility_Hover.png");
    }*/
    .Insert_Tooth{
        content:url("icons/Insert_Tooth.png");
    }
    /*.Insert_Tooth:hover{
        content:url("icons/Insert_Tooth_Hover.png");
    }*/
    .Insert_Implant{
        content:url("icons/Insert_Implant.png");         
    }
    /*.Insert_Implant:hover{
        content:url("icons/Insert_Implant_Hover.png");         
    }*/
    .Before_After{
       content:url("icons/Before_After.png");        
    }
    /*.Before_After:hover{
       content:url("icons/Before_After_Hover.png");        
    }*/
    .Delete_{
        content:url("icons/Delete_.png");        
    }
    /*.Delete_:hover{
        content:url("icons/Delete_Hover.png");        
    }*/
    .Duplicate{
        content:url("icons/Duplicate.png");      
    }
    /*.Duplicate:hover{
        content:url("icons/Duplicate_hover.png");      
    }*/
    .Copy{
        content:url("icons/Copy_1.png");
    }
    /*.Copy:hover{
        content:url("icons/Copy_hover.png");
    }*/
    .Cut{
        content:url("icons/Cut.png");
    }
    /*.Cut:hover{
        content:url("icons/Cut_hover.png");
    }    */
    
    .DentalMagicLogo{
        content:url("icons/Dental_Magic_Logo.png");
        float: left;
    }   
    .OpenImage{
       content:url("icons/Open.png");        
    }
    .StartSelection{
	    content:url("icons/Lasso.png");        
    }
    .RotateLeft{
	    content:url("icons/Rotate_Left.png");
        
    }
    .RotateRight{
	    content:url("icons/Rotate_Right.png");
        
    }
    .StretchWidthP{
        content: url("icons/Stretch_Horizonal.png");
        
    }
    .StretchWidthM{
        content: url("icons/Squeeze_Horizonal.png");
        
    }
    .StretchHeightP{
        content: url("icons/Stretch_Vertical.png");
        
    }
    .StretchHeightM{
        content: url("icons/Squeeze_Vertical.png");
        
    }
    .StretchPlus{
        content: url("icons/Stretch_Horizonal_Porportionally_.png");
        
    }
    .StretchMinus{
        content: url("icons/Stretch_Vertical_Porportionally_.png");
        
    }
    .FlipH{
        content: url("icons/Flip_Horizonal.png");
        
    }
    .FlipV{
        content: url("icons/Flip_Vertical.png");
        
    }
    .ShowDots{
        content: url("icons/View_On.png");
        
    }
    .HideDots{
        content: url("icons/View_Off.png");
        
    }
    .GoldenProportionGauge{
        content: url("icons/Golden_Ratio.png");
    }

    /*.OpenImage:hover{
       content:url("icons/Open_hover.png");        
    }
    .StartSelection:hover{
	    content:url("icons/Lasso_hover.png");        
    }*/
    /*.RotateLeft:hover{
	    content:url("icons/Rotate_Left_hover.png");
        float: left
    }
    .RotateRight:hover{
	    content:url("icons/Rotate_Right_hover.png");
        float: right
    }
    .StretchWidthP:hover{
        content: url("icons/Stretch_Horizonal_hover.png");
        float: left;
    }
    .StretchWidthM:hover{
        content: url("icons/Squeeze_Horizonal_hover.png");
        float: right;
    }
    .StretchHeightP:hover{
        content: url("icons/Stretch_Vertical_hover.png");
        float: left;
    }
    .StretchHeightM:hover{
        content: url("icons/Squeeze_Vertical_hover.png");
        float: right;
    }
    .StretchPlus:hover{
        content: url("icons/Stretch_Horizonal_Porportionally_hover.png");
        float: left;
    }
    .StretchMinus:hover{
        content: url("icons/Stretch_Vertical_Porportionally_hover.png");
        float: right;
    }
    .FlipH:hover{
        content: url("icons/Flip_Horizonal_Hover.png");
        float: left;
    }
    .FlipV:hover{
        content: url("icons/Flip_Vertical_Hover.png");
        float: right;
    }
    .ShowDots:hover{
        content: url("icons/View_On_hover.png");
        float: right;
    }
    .HideDots:hover{
        content: url("icons/View_Off_hover.png");
        float: right;
    }*/



    .pics {  
    height:  132px;  
    width:   132px;  
    padding: 0;  
    margin:  0;  
} 
.DashboardDiv{
    background:#434343;
    height: 60px;
    display: block;
} 
.pics img {  
    padding: 15px;  
    border:  1px solid #F4F4F4;  
    background-color: #F4F4F4;  
    width:  100px; 
    height: 100px; 
    top:  0; 
    left: 0 
}
#footer{
    background:  #434343;
    height: 40px;
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
}
#footer img {
    height: 70%;
    margin: 6px;
    float: right;
}
/*
    these are just the default styles used in the Cycle2 demo pages.  
    you can use these styles or any others that you wish.
*/


/* set border-box so that percents can be used for width, padding, etc (personal preference) */
 
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #F4F4F4;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 10px;
  bottom: 0;
  background-color: #7d7d7d;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #8AC249;
}

input:focus + .slider {
  box-shadow: 0 0 1px #8AC249;
}

input:checked + .slider:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.HelpWindow
{
	z-index: 999;
	position: absolute;
	top: -999px;
	left: -999px;
	display: none;
	visibility: hidden;
	
	width: 300px;
	height: 250px;
	
	background-color: lightyellow;
	border: dashed 1px black;
}
		.ba-slider {
				width: 100%;
	    		margin: 5px auto;
	    		border: 1px solid #fff;
	    		box-shadow: 0 0 50px rgba(0,0,0,.2);
			}