/*body{background-color:red;}*/

.node_info { 
    display: none;
    width: 600px;
    background-color: lightblue;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1; 
}

.pencil { color: grey; }
.pen {  } 
.stone { font-weight: bold; }
.missing_written_in { color: red; }
.private { color: transparent; text-shadow: 0 0 9px rgba(0,0,0,0.5); }
.spacer { padding-bottom: 80px; } 


@keyframes blink {
    0% {
        opacity: .2;
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: .2;
    }
}
.saving span {
    animation-name: blink;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

.saving span:nth-child(2) {
    animation-delay: .2s;
}

.saving span:nth-child(3) {
    animation-delay: .4s;
}

.outer {
  width: 100%;
  background-color: #9e9e9e7d;
  height: 6px;
  display:none;
      position: fixed;
    top: 0;
}
.inner {
  width: 30%;
  background-color: #3F51B5;
  height: 6px;
  margin:auto;
  
}

.outer_animate{display:block}
.outer_animate .inner{animation: mymove 5s infinite;}
.text{color: grey;}
@keyframes mymove {
    0%   {width: 30%;}
    50%   {width: 85%;}
    100%  {width: 30%;}

}

.gray{color:gray}
.hide_sub_tree{display:none;}
.newly_added{background-color: #fff; animation-name: color; animation-duration: 2s; animation-iteration-count: 2;}


@keyframes color {
  0% {
    background-color: #fff;
  }
  50% {
    background-color: #4285f4;
  }
  100 {
    background-color: #fff;
  }
}
.btn a, .btn a:hover { color: white; }
.btn { line-height: 1; margin-bottom: 5px;  }



.trace_parent_correct .node {
    /*color:darkblue;*/
    border-bottom: 1px solid #000;
    background-color: #d1ecf1;
}

.trace_parent .node{
    /*color: black;*/
    border-bottom: none;
    background-color: #fff;
}

.policy_tree li, .text{
    /*transition: color 1s;*/
}

/*.pen, .pencil, .stone{transition: color 1s;}*/

.clt, .clt ul, .clt li {
     position: relative;
}

.clt ul {
    list-style: none;
    padding-left: 20px;
}

.clt li::before, .clt li::after {
    content: "";
    position: absolute;
    left: -12px;
}

.clt li::before {
    border-top: 1px solid #000;
    top: 9px;
    width: 8px;
    height: 0;
}

.clt li::after {
    border-left: 1px solid #000;
    height: 100%;
    width: 0px;
    top: 2px;
}

.clt ul > li:last-child::after {
    height: 8px;
}

.form-group input, .form-group textarea{width:100%;margin-left:1px}

li::before{transition: border  1s;}
.trace_parent li::before{border-top: 1px solid #8080802e;}
.trace_parent li::after{border-left: 1px solid #8080802e;}
/*.trace_parent_correct ~ li::after{border-left: 1px solid #8080802e;}
.trace_parent_correct ~ li::before{border-top: 1px solid #8080802e;}*/



.treeview, .treeview ul {
    margin:0;
    padding:0;
    list-style:none;
    
	color: #369;
}
.treeview ul {
    margin-left:1em;
    position:relative
}
.treeview ul ul {
    margin-left:.5em
}
.treeview ul:before {
    content:"";
    display:block;
    width:0;
    position:absolute;
    top:0;
    left:0;
    border-left:1px solid;
    
    /* creates a more theme-ready standard for the bootstrap themes */
    bottom:15px;
}
.treeview li {
    margin:0;
    padding:0 1em;
    line-height:2em;
    font-weight:700;
    position:relative
}
.treeview ul li:before {
    content:"";
    display:block;
    width:10px;
    height:0;
    border-top:1px solid;
    margin-top:-1px;
    position:absolute;
    top:1em;
    left:0
}

.treeview ul > li:last-child::after {
    height: 8px;
}
.tree-indicator {
    margin-right:5px;
    
    cursor:pointer;
}
.treeview li a {
    text-decoration: none;
    color:inherit;
    
    cursor:pointer;
}
.treeview li button, .treeview li button:active, .treeview li button:focus {
    text-decoration: none;
    color:inherit;
    border:none;
    background:transparent;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    outline: 0;
}


.node{cursor:pointer; position:relative}

.node_has_children .toggle_children {
    margin-left: -19px;
}
.node_has_children:before {
    width: 0!important;
}

.toggle_children:before{
    position: relative;
    z-index: 3;
    background-color: #fff;
}

.large_table{max-width:100vw; display:inline-block;overflow: scroll;}

span.fa.fa-chevron-left:before { content: "\f124"; display: inline-block; font-family: "Ionicons"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; text-rendering: auto; line-height: 1; -webkit-font-smoothing: antialiased; }
span.fa.fa-chevron-right:before { content: "\f125"; display: inline-block; font-family: "Ionicons"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; text-rendering: auto; line-height: 1; -webkit-font-smoothing: antialiased; }
/*.modal-content { z-index: 101; }*/

.lineage_breadcrumb{height: 45px; overflow-x: auto; overflow-y: hidden;    background-color: #e9ecef;}
.lineage_breadcrumb ol{width: 100%; display: -webkit-box;}
.lineage_breadcrumb ol li:last-of-type{padding-right: 14px;}
.lineage_breadcrumb .breadcrumb-item+.breadcrumb-item::before{    content: ">";}

.sortable-chosen{background-color: lightgray}

.drop_highlight, .html_drop_zones{background-color: #e2e1e1; padding: 3px; border: 1px darkgray dashed; margin: 2px;margin-top: 4px; margin-bottom: 5px;text-align: center}
.html_drop_zones {background-color: #d5d4d4; height: 28px; width: 100%; display: block; max-width: 500px; position: absolute; width: 30px; left: -31px; top: -7px;}
.drop_after {right: -32px; position: absolute; left: initial; top: -7px;}

::-webkit-scrollbar {
    width: 8px;
    height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #3498db; 
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #2980b9; 
}

input[type="date"]{position:relative;background-color: #fff;min-height: 2em;}
/*input[type="date"]::after {
    content: "\f123";
    font-family: "Ionicons";
    position: absolute;
    right: 0;
    width: 20px;
    background-color: #fff;
}*/

li {
    list-style-type: none;
    /*border-left: 2px solid #000;*/
    /*margin-left: 1em;*/
    /*text-align: left;*/
}

.highlight{color:#000} /*needed?*/
/*.node .node_buttons{display:none;}*/
.node:hover .node_buttons{display:inline;} /*needed?*/


/* BOOTSTRAP */
.tooltip-inner {
    max-width: 400px;
    /* If max-width does not work, try using width instead */
    width: 400px; 
}
.tooltip {
	z-index: 2000;
}

.btn-block+.btn-block { /* Strange thing that put 5px margin at top of edit button???? */
    margin-top: 0px;
}


.tour-backdrop { opacity: 0.55; }
.popover { max-width: 500px; } 
.popover-navigation [data-role="prev"], .popover-navigation [data-role="next"], .popover-navigation [data-role="end"] { display: none; }
#step-0 .popover-navigation [data-role="next"] { display: block; } #step-0 .popover-navigation [data-role="end"] { display: block; color: #fff; background-color: #dc3545; border-color: #dc3545; } /* First step - doesnt work as JS*/

/*.inline_form { width: 400px !important; }*/ 

/*.inline_form { width: 400px !important; }*/ 

/* FULL CALENDAR */

/*.modal{position: absolute;}*/


.badge-yellow {
  background-color: yellow;
}


#myChart {
	height:1000px;
	width:1200px;
	min-height:150px;
}


/* RESPONSIVE MOBILE */
@media handheld and (max-width: 1024px), screen and (max-width: 1023px) {
	.container-fluid { /* modal */
		padding: 5px;
	}
	.modal-body { /* modal */
		padding: 0.1rem;
	}
	.list-group-item { /* modal */
		padding: 0.3rem;
	}
	.clt ul { /* lineage */
		padding-left: 15px;
	}
}




/*IOS ONLY*/
@supports (-webkit-overflow-scrolling: touch) {
    /*body{background-color:white;}*/
    .modal{position: absolute;
    /*.modal-dialog{margin: 0; height: 100vh; position: static; top: 0;}*/
}