@import url('https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap');
body{font-family: 'Sen', sans-serif; padding: 0}
.main{ margin: 0px auto 0px; position: relative;}
.tree__container, #from_tree__container__step__card__first, .tree__container__branch {display: flex; flex-direction: row; justify-content: center; } 
.tree__container__step__card {text-align: center; margin: 20px; } 
.tree__container__step__card p {padding: 0px; box-shadow: 0 0 4px 1px rgba(121, 121, 121, 0.3); background: #fff; border-radius: 4px; text-align: center; width: auto; min-width: 160px; display: inline-block; margin: 0 !important; overflow: hidden; border: 1px solid #ddd }
.brand-logo img{ width: 130px; margin: 10px auto }
.tree__container__step__card p span{ display: block; text-transform: uppercase; padding: 5px }
.tree__container__step__card .nm{ font-size: 12px; font-weight: 700; background-color: #214680; color: #fff }
.tree__container__step__card .dgn{ font-size: 12px; margin: 3px auto; font-weight: 700 }
.tree__container__step__card .code{ font-size: 12px; background: #f1f1f1 }
#tree__svg-container {z-index: -1; position: absolute; } 
.tree__container__step {flex: 1 1 0px; width: auto; padding: 0; }
.tree__container__step__card__p {cursor: pointer; transition: transform .2s ease; } 
.tree__container__step__card__p:hover {transform: translateX(3px); }
#downloadable{ margin: auto; background: #fff; position: relative; z-index: -1; padding-top: 70px}
h1{ font-size: 24px !important; color: #214680; margin-bottom: 0 !important }
.btn{ padding: 7px 20px !important; font-weight: 600 !important; font-size: 14px !important; border: none !important; outline: none !important; box-shadow: none !important }
.btn-primary{background: linear-gradient(188deg, #de3238 0%, #e62e2d 100%) !important;}
.pdf-icon{ width: 18px }
.btn-primary:hover{background: linear-gradient(188deg, #e62e2d 0%, #de3238 100%) !important;}
.export-filter{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 1; padding: 10px; background: #fafbfb; border-top: 1px solid #ddd }
.header{ background: #fafbfb; z-index: 1; border-bottom: 1px solid #ddd; padding-bottom: 5px; margin-bottom: 30px; position: fixed; left: 0; top: 0; width: 100% }
.action-btn{ position: fixed; right: 15px; top: 12px }
#my_tree{position: relative; /*position: relative; left: auto; right: auto; */}
.zoom{ position: relative; display: inline-block; padding: 5px 8px; cursor: pointer; }
.zoomout{ margin-right: 10px }
.zoom:after{ position: absolute;}
.zoomin:after{ content: '+'; font-size: 18px; font-weight: 700; left: 11px; top: 1px; height:10px; }
.zoomout:after{ content: '-'; font-size: 18px; font-weight: 700; left: 14px; top: 2px; height:10px;  }
.zoom img{ width: 24px; height: auto }

.slidecontainer{position: fixed; right: 15px; top: 80px; width: 200px; z-index: 2; padding:5px 10px; background: #fff}
.slider {-webkit-appearance: none; width: 100%; height: 5px; border-radius: 5px; background: #d3d3d3; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s;  } 
.slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #214680; cursor: pointer; } 
.slider::-moz-range-thumb {width: 25px; height: 25px; border-radius: 50%; background:#214680; cursor: pointer; }
@media (max-width: 576px){
	.header, .header .text-right{ text-align: center !important;  }
}
/*#downloadable, #my_tree{ background: #fff; }*/