/* Color the Three different classes */
.Birke {
    color: white !important;
    background: rgba(217,0,217,0.6) !important;
}
.Erle {
    color: #fff !important;
    background: rgba(255,76,0,0.6) !important;
}
.Hasel{
    color: #fff !important;
    background: rgba(0,0,255,0.6) !important;
}


#canvasOne{
position: absolute;
    top: 0;
    left: 0;
    z-index: -100;
    min-height: 100%;
    min-width: 100%;
    vertical-align: middle;
    overflow:hidden;
}
#globe{
position: absolute;
    /*margin-left: 2%;
    margin-right :2%;
    margin-bottom:2%;
    margin-top: 2%;*/
   
    z-index: -100;
    min-height: 100%;
    min-width: 100%;
    vertical-align: middle;
    overflow:hidden;
}
#wrapper{
        position: relative;

}
.main{
    /*position:fixed;
   top:0;
   left:0;*/
   z-index:100;
}
.column{
    /*position:fixed;
   top:0;
   left:0;*/
    z-index:100;
}
.btn{
    /* position:absolute; */
    /* left:0; */
}
.bootstrap-select.btn-group:not(.input-group-btn), .bootstrap-select.btn-group[class*="span"] {
    margin: 0 !important;
    width:10%;
    height: 40px;
}
.btn-group{
    margin-top:4px;
    width:20%;
    display:inline-block;
}
.test{
    width:10%;
}
.btn-success, .btn-danger, .btn-warning {
    margin-top:4px;
}

.navbar-fixed-top{
    width:100%;
}
.container{
    width:100%;
}
.navbar-collapse{
    width:100%;
}

#tree-order-button,#example-order-button{
    /* width:50%; */
    position:relative;
    /* float:left; */
}
@-moz-document url-prefix() {
    #tree-order-button, #example-order-button {
        width: 50%;
        position: relative;
        float: left;
        margin-top: -13%;
        margin-left: 46%;
    }
}
@media only screen and (max-device-width:480px) {
    #recentold-order, #treeres, #month{
        display: block;
    }
    #tree-order-button, #example-order-button{
        margin-left: -10px;
        width:60px;
    }
    #tree-order, example-order{
        margin-left:30px;
        float: right;
  
    }
    
    /*#example-order{
        padding-left:30px;
        float: right;
    }*/
    /*.btn-group>.btn:first-child{
        margin-left: 20px;
    }*/


}
#resdat, #histric, #plus, #info, #recentold-order {
        cursor: pointer;
    }
#tree-order,#example-order{
    width:25%;
    position:relative;
    float:left;
}
#month{
    margin-left: 20px;
}
#recentold-order{
    background-color:		#222222;
    color:lightgray;
    border-color:		#222222;
    margin-top:3%;
}
#plus{
    width:15%;
    height:15%;
}
#info{
    width:15%;
    height:15%;
    margin-left: 1em;
}
#dialogTree-order{
    width:100%;
}
/*Styling for Drop Down Sub-menu*/
.dropdown-submenu {
    position: relative;
  }
  .dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
  }
  .dropdown-submenu:hover > .dropdown-menu {
    display: block;
  }
  .dropdown-submenu:hover > a:after {
    border-left-color: #fff;
  }
  .dropdown-submenu.pull-left {
    float: none;
  }
  .dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
  }

/*################################################*/
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    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.4); /* Black w/ opacity */
    -webkit-animation-name: fadeIn; /* Fade in the background */
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s
}

/* Modal Content */
.modal-content {
    position: fixed;
    bottom: 0;
    background-color: #fefefe;
    width: 100%;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s
}

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

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

.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

/* Add Animation */
@-webkit-keyframes slideIn {
    from {bottom: -300px; opacity: 0} 
    to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
    from {bottom: -300px; opacity: 0}
    to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
    from {opacity: 0} 
    to {opacity: 1}
}

@keyframes fadeIn {
    from {opacity: 0} 
    to {opacity: 1}
}
/*#################################################*/
.axis line{
  stroke: white;
}

.axis path{
  stroke: white;
}

.axis text{
  fill: white;
}  
.ui-widget-header{
    background: rgba(51,51,51,1);
    color: rgba(157, 157, 157,1);
}
#Info{
    background:rgba(178,178,178,0.9) ;
    color: rgba(0,0,0,1);
    width: 500px;
}
.ui-widget-content{
    background: none;
}
div[aria-describedby="Info"]{
    width: 30em;
}

.backdrop {
    display: inline-block;
    background: rgba(42, 42, 42, 0.9);
    border-radius: 5px;
    border: 1px solid #444;
    padding: 5px 10px;
    color: #fff;
    font: 1em "Fira Sans", sans-serif;
    overflow: scroll;
    overflow-x: hidden;
}
.backdrop a:link, .backdrop a:visited, .backdrop a:hover {
    color: #fff
}
#pollenMenu {
    position: absolute;
    right: 5px;
    top:55px;
    width: 300px;
    /* height: 100%; */
    bottom: 5px;
}
#pollenPieChart {
    position: absolute;
    left: 5px;
    height: 250px;
    width: 520px;
    bottom:5px;
    background: rgba(42, 42, 42, 0.8);
    border : none;
}
#navMenu {
    /* position: absolute; */
    /* right: 30px; */
    /* top:100px; */
    /* width: 300px; */
    /* height: 70%; */
    position: absolute;
    right: 5px;
    top: 55px;
    width: 300px;
    /* height: 100%; */
    bottom: 5px;
    /* overflow: scroll; */
    /* overflow-x: hidden; */
}


.myButtonRed {
	-moz-box-shadow:inset 0px 1px 0px 0px #f5978e;
	/* -webkit-box-shadow:inset 0px 1px 0px 0px #f5978e; */
	/* box-shadow:inset 0px 1px 0px 0px #f5978e; */
	background-color:#f24537;
	-moz-border-radius:3px;
	-webkit-border-radius:2px;
	border-radius:2px;
	border:1px solid #d02718;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	/* font-family:Trebuchet MS; */
	font-size:12px;
	padding:2px 2px;
	text-decoration:none;
}
.myButtonRed:hover {
	background-color:#c62d1f;
}
.myButtonRed:active {
	position:relative;
	top:1px;
}

.myButtonGreen {
	-moz-box-shadow:inset 0px 1px 0px 0px #caefab;
	/* -webkit-box-shadow:inset 0px 1px 0px 0px #caefab; */
	/* box-shadow:inset 0px 1px 0px 0px #caefab; */
	background-color:#77d42a;
	-moz-border-radius:3px;
	-webkit-border-radius:2px;
	/* border-radius:2px; */
	border:1px solid #268a16;
	display:inline-block;
	cursor:pointer;
	color:#0a0a0a;
	/* font-family:Trebuchet MS; */
	font-size:12px;
	/* padding:2px 2px; */
	text-decoration:none;
}
.myButtonGreen:hover {
	background-color:#5cb811;
}
.myButtonGreen:active {
	position:relative;
	top:1px;
}

.myButtonBlue {
	-moz-box-shadow:inset 0px 1px 0px 0px #97c4fe;
	/* -webkit-box-shadow:inset 0px 1px 0px 0px #97c4fe; */
	/* box-shadow:inset 0px 1px 0px 0px #97c4fe; */
	background-color:#3d94f6;
	-moz-border-radius:3px;
	-webkit-border-radius:2px;
	border-radius:2px;
	border:1px solid #337fed;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	/* font-family:Trebuchet MS; */
	font-size:12px;
	padding:2px 2px;
	text-decoration:none;
	text-shadow:0px 1px 0px #1570cd;
}
.myButtonBlue:hover {
	background-color:#1e62d0;
}
.myButtonBlue:active {
	position:relative;
	top:1px;
}

/* Adjust for Phone */
@media only screen and (max-width:360px) {
	/* For mobile phones: */
	#pollenMenu {
      width:100%;
      right: 0px;
	}
  }



  /* Styling the brand part*/
  .navbar-brand {
    padding: 0px;
  }
  .navbar-brand>img {
    height: 100%;
    padding: 15px;
    width: auto;
  }
  
.brand-centered {
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
  }
  .brand-left {
    display: flex;
    justify-content: left;
    position: absolute;
    width: 100%;
    left: 50;
    top: 0;
  }
  .b
  .brand-centered .brand-left .navbar-brand {
    display: flex;
    align-items: center;
  }
  .navbar-toggle {
      z-index: 1;
  }

  #pac-input {
    /* background-color: rgb(24, 3, 3); */
    /* font-family: Roboto; */
    /* font-size: 15px; */
    /* font-weight: 300; */
    margin-left: 12px;
    padding: 5px 11px 5px 13px;
    text-overflow: ellipsis;
    width: 200px;
    border-radius: 25px;
    color: black;
  }
  #pac-input2 {
    /* background-color: rgb(24, 3, 3); */
    /* font-family: Roboto; */
    /* font-size: 15px; */
    font-weight: 300;
    margin-left: 12px;
    padding: 5px 11px 5px 13px;
    text-overflow: ellipsis;
    width: 200px;
    color: black;
    border-radius: 25px;
  }
  
  #pac-input:focus {
    border-color: #4d90fe;
  }

.closeButton {
    position: absolute;
    right: 2px;
    top: 2px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 20px;
  }
  
  .switch input {display:none;}
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    left: 2px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(40px);
    -ms-transform: translateX(40px);
    transform: translateX(40px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 17px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

.JojoeBadge {
    width: fit-content;
    margin-bottom: 5px;
    padding: 2px;
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
    font-size: 0.9em;
}
.JojoeBadgeRed {
    width: fit-content;
    margin-bottom: 5px;
    padding: 2px;
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
    font-size: 0.9em;
}
.JojoeBadgeYellow {
    width: fit-content;
    margin-bottom: 5px;
    padding: 2px;
    font-size: 0.9em;
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
    
}


/* Hide Scroll bar x and pretty right */
::-webkit-scrollbar {
      width: 5px;
}
::-webkit-scrollbar-track {
      background-color: rgba(42, 42, 42, 0);
} /* the new scrollbar will have a flat appearance with the set background color */
 
::-webkit-scrollbar-thumb {
      background-color: rgba(250, 250, 250, 0.5); 
      border-radius:20px
} /* this will style the thumb, ignoring the track */
 
::-webkit-scrollbar-button {
      background-color: rgba(42, 42, 42, 0);
} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
 
::-webkit-scrollbar-corner {
      background-color: rgba(42, 42, 42, 0);
} 


@media (min-width: 500px) and (max-width: 1000px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-header .collapse, .navbar-toggle {
        display:block !important;
    }
    .navbar-header {
        float:none;
    }
}



/*-------------------------------------------------------------------*/
*{ margin: 0; padding: 0; }

.error{ color: #B71C1C; }
#userActions{
	display: table-cell;
	height: 150px;
	width: 200px;
	vertical-align: middle;
	text-align: center;
	color: #37474F;
	background-color: #FFFFFF;
	border: solid 2px #333333;
	border-radius: 10px;
}
#userActions input{
	width: 150px;
	margin: auto;
}
#imgPrime{ display: none; }