.bgr-1{background: #6662E8}
.bgr-2{background: #E862CE}
.bgr-3{background: #A39C0C}
.bgr-4{background: #73AD4A}

body{
    font-family: "Manrope";
}
::-webkit-scrollbar-track
{
   background-color: #1f1e3e;
   border-radius: 0px;
}
.hidden{
    display:none;
}
html, body {
   width: 100%;
   overflow-x: hidden;
   box-sizing: border-box;
   margin: 0px;
   overflow-y: hidden;
}
::-webkit-scrollbar
{
   width: 5px;
height: 5px;
   background-color:#1f1e3e;
}

::-webkit-scrollbar-thumb
{
   border-radius: 5px;

   background-image:-webkit-gradient(linear,
                                      left bottom,
                                      left top,
                                      color-stop(0.44, #295bc6),
                                      color-stop(0.72, #295bc6),
                                      color-stop(0.86,#2e7dff));

}

#sidebar-container {
    min-height: calc(100vh - 26px);
    background-color: #1f1e3e;
    padding: 0;
    /* flex: unset;
    */
    left: 0px;
    margin-left: 0px;
    position: relative;
    /* transition: all 1.3s ease; */
    overflow: hidden;
    max-width: 224px;
    z-index: 6;
    box-sizing: border-box;
}
.sidebar-expanded {
    width: 241px;
}
.sidebar-collapsed {
   /*width: 60px;
   */
    width: 102px;
}
/* ----------| Menu item*/
#sidebar-container .list-group a {
    height: 50px;
    color: white;
}
/* ----------| Submenu item*/
#sidebar-container .list-group li.list-group-item {
    background-color: #132644;
}
#sidebar-container .list-group .sidebar-submenu a {
    height: 45px;
    padding-left: 30px;
}
.sidebar-submenu {
    font-size: 0.9rem;
}
/* ----------| Separators */
.sidebar-separator-title {
    background-color: #132644;
    height: 35px;
}
.sidebar-separator {
    background-color: #132644;
    height: 25px;
}
.logo-separator {
    background-color: #132644;
    height: 60px;
}
a.bg-dark {
   /* background-color: #132644 !important;
    */
}
.tools-buttons svg {
    width: 9px;
    height: 9px;
    stroke: #6d6ea3;
    fill: #6d6ea3;
}
.tools-buttons {
    display: flex;
}
.tools {
    height: 26px;
    background-color: #121124;
    padding: 0px 15px 0px 30px;
    color: white;
    font-size: 12px;
    display: flex;
    align-items: center;
    display: flex;
    justify-content: space-between;
}
.tools-buttons>div {
    padding: 0px 15px;
    cursor: pointer;
}
a.list-group-item {
    background: transparent;
    width: auto;
    padding: 0px !important;
    border: 0px;
   /* padding: 15px 30px !important;
    */
}
.sidebar-logo svg {
    stroke: #6d6ea3;
    fill: #6d6ea3;
    margin-right: 10px;
    padding: 0px !important;
    width: 37px;
    height: 47px;
}
.sidebar-logo {
    display: flex;
    justify-content: left;
    /* align-items: center;
    */
    padding: 10px 34px 70px 25px;
    height: 140px;
}
.sidebar-logo a {
   display: flex;
}

div#sidebar-container ul {
    padding-inline-start: 0px;
}
div#sidebar-container ul svg.icon.nav-icon {
    width: 42px;
    height: 42px;
    padding: 13px;
    border-radius: 100%;
    min-width: 42px;
    transition: all .3s ease;
    /* margin-top: 3px; */
}
div#sidebar-container.sidebar-collapsed a.brand-link {
   width: 40px;
   object-fit: cover;
   object-position: left;
   overflow: hidden;
   min-width: 24px;
   margin-left: 9px;
   display: flex;
   align-items: center;
}

div#sidebar-container.sidebar-collapsed a.brand-link img {
   height: 23px;
}
div#sidebar-containe.sidebar-collapsed img.brand-image {
   width: 30px;
   height: 27px;
   object-fit: cover;
   object-position: left;
   margin-left: 10px;
}
div#sidebar-container span.menu-collapsed {
    color: #bcbbc9;
}
div#sidebar-container ul a.list-group-item {
    padding: 15px 30px !important;
    border-right: solid 2px transparent;
}
div#sidebar-container ul a.list-group-item svg.icon.nav-icon {
    background-color: #1a1935;
    margin-right: 15px;
}
div#sidebar-container .list-group-item.active {
    background: transparent;
}
div#sidebar-container .list-group-item.active span,.list-group-item:hover span {
    color: #2e7eff !important;
}
div#sidebar-container .list-group-item svg.icon.nav-icon {
    stroke: #bcbbc9;
    fill: #bcbbc9;
}
div#sidebar-container ul .list-group-item.active svg.icon.nav-icon, ul .list-group-item:hover svg.icon.nav-icon {
    background-color: #2e7eff !important;
    stroke: white !important;
    fill: white !important;
    box-shadow: 0px 0px 50px #2e7eff;
   /* min-width: 42px;
    */
}
div#sidebar-container .list-group-item.active, .list-group-item:hover {
    z-index: 2;
    color: #fff;
    background-color: #232242 !important;
    border-color: #007bff;
    overflow: hidden;
    border-right: 2px solid #007bff;
    border-radius: 0px !important;
}
div#sidebar-container a.brand-link, a.brand-link img {
   /* width: 130px; */
   display: flex;
   align-items: center;
}
div#body-row {
    margin: 0px;
}
.main-container {
    width: calc(100% - 223px);
    background-color: #1f1e3e;
    /* transition: .3s all ease; */
    overflow-x: visible;
    position: relative;
    box-sizing: border-box;
}

.main-container .backgraunt_top{
  height: 80px; 
  background:#fff; 
  padding: 15px 25px 20px 25px;
}
.main-container .main-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 61px;
    padding-top: 5px;
}
.main-container .main-nav-buttons svg {
    width: 20px;
    height: 20px;
    stroke: #bcbbc9;
    fill: #bcbbc9;
    cursor: pointer;
}
.main-container .nav.main-nav-buttons {
    align-items: center;
}
.main-container .nav-buttons-filters {
    margin-right: 30px;
    cursor: pointer;
}
.main-container .nav-buttons-fullscreen {
    margin-right: 30px;
    cursor: pointer;
}
.main-container .notifications-sound {
    margin-right: 30px;
    cursor: pointer;
}
.main-container .nav-buttons-info {
    margin-right: 30px;
    cursor: pointer;
}
.main-container a.nav-link {
    padding: 0px 20px;
    font-size: 14px;
    color: #bcbbc9;
}
.main-container li.active a {
    height: 60px;
    display: flex;
    align-items: center;
    color: #000;
    background-color: #fff;
    border-radius: 3px 3px 0px 0px;
}
.main-container ul.nav.main-nav-links li {
    display: flex;
    align-items: center;
    margin-right: 2px;
}
.main-container a.nav-link {
    height: 60px;
    align-items: center;
    display: flex;
    background-color: #191833;
    border-radius: 3px 3px 0px 0px;
}
.main-content {
    margin-bottom: 10px;
    margin-right: 1px;
    background-color: #fff;
    padding: 30px 50px;
    height: calc(100vh - 87px);
    box-sizing: border-box;
    overflow-x: scroll;
    overflow-y: scroll;
}
.main-title .title {
    color: #000000;
    font-size: 32px;
    font-weight: 600;
   /* margin-bottom: 10px;
    */
}
.main-title {
    margin-bottom: 10px;
    /*position: fixed;*/
}
.main-title .subtitle {
    font-size: 22px;
    color: #706f94;
    font-weight: 600;
}
.monitoring-message {
    text-align:center;
    display: flex;
    position: absolute;
    right: 0;
    left: 0;
    top: 0px;
}
.monitoring-message .monitoring-message-red {
    padding: 17px 30px;
    border-radius: 5px;
    font-size: 16px;
    color: white;
    background-color: #fe4c4d;
    display: flex;
    margin: auto;
    width: auto;
    text-align: center;
}
.monitoring-message .monitoring-message-blue {
    padding: 17px 30px;
    border-radius: 5px;
    font-size: 16px;
    color: white;
    background-color: #004879;
    display: flex;
    margin: auto;
    width: auto;
    text-align: center;
}
.monitoring-message .monitoring-message-green {
   /* padding: 17px 30px;
    */
   /* border-radius: 5px;
    */
   /* font-size: 16px;
    */
   /* color: white;
    */
   /* background-color:#00ffcc;
    */
   /* display: flex;
    */
   /* margin: auto;
    */
   /* width: auto;
    */
   /* text-align: center;
    */
}
.monitoring-message .monitoring-message-orange {
    padding: 17px 30px;
    border-radius: 5px;
    font-size: 16px;
    color: white;
    background-color: #f9974a;
    display: flex;
    margin: auto;
    width: auto;
    text-align: center;
}
.monitoring-scheme-top {
   /* padding-top: 100px;
    */
    position: relative;
    color: white;
    font-size: 20px;
    text-align: center;
}
.monitoring-message {
}
.monitoring-scheme {
    padding-top: 100px;
    position: relative;
}
.scheme-title {
    margin-bottom: 10px;
}
.monitoring-top-modal {
    display: none;
}
.monitoring-scheme-center.red {
    width: 240px;
    height: 240px;
    border-radius: 100%;
    border: 11px solid #fe4c4d;
    display: flex;
    margin: auto;
    background-image: url(/img/red-circle.svg);
    background-color: #fe4c4d;
    align-items: center;
    justify-content: center;
    color: white;
    flex-direction: column;
    cursor: pointer;
    z-index: 9;
    position: relative;
}
.monitoring-scheme-center.green {
    width: 240px;
    height: 240px;
    border-radius: 100%;
    border: 11px solid #00ffcc;
    display: flex;
    margin: auto;
    background-image: url(/img/green-circle.svg);
    background-color: #00ffcc;
    background-position: center;
    align-items: center;
    justify-content: center;
    color: black;
    flex-direction: column;
    cursor: pointer;
    z-index: 9;
    position: relative;
}
.monitoring-scheme-center.blue {
    width: 240px;
    height: 240px;
    border-radius: 100%;
    border: 11px solid #004879;
    display: flex;
    margin: auto;
    background-image: url(/img/blue-circle.svg);
    background-color: #004879;
    align-items: center;
    justify-content: center;
    color: white;
    flex-direction: column;
    cursor: pointer;
    z-index: 9;
    position: relative;
}
.monitoring-scheme-center.orange {
    width: 240px;
    height: 240px;
    border-radius: 100%;
    border: 11px solid #f9974a;
    display: flex;
    margin: auto;
    background-image: url(/img/orange-circle.svg);
    background-color: #f9974a;
    align-items: center;
    justify-content: center;
    color: white;
    flex-direction: column;
    cursor: pointer;
    z-index: 9;
    position: relative;
}
.monitoring-center-title {
    font-size: 28px;
    font-weight: 700;
    display: block;
}
.monitoring-center-subtitle {
    font-size: 18px;
    font-weight: 800;
}

.monitoring-scheme-bottom.phases {
    display: flex;
    justify-content: center;
    position: relative;
    height: 226px;
    text-align: center;
}
.green .phase-content {
    width: 122px;
    height: 122px;
    border: 5px solid #00ffcc;
    display: flex;
    margin: auto;
    background-image: url(/img/green-circle.svg);
    background-color: #00ffcc;
    align-items: center;
    justify-content: center;
    color: black;
    font-weight: 700;
    border-radius: 100%;
    background-size: cover;
}
.red .phase-content{
    height: 122px;
    border: 5px solid #fe4c4d;
    display: flex;
   /* margin: auto;
    */
    background-image: url(/img/red-circle.png);
    background-color: #fe4c4d;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    border-radius: 100%;
    background-size: cover;
    margin: auto;
    width: 122px;
}
.blue .phase-content{
    width: 130px;
    height: 130px;
    border: 5px solid #004879;
    display: flex;
   /* margin: auto;
    */
    background-image: url(/img/blue-circle.svg);
    background-color: #004879;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    border-radius: 100%;
    margin: auto;
    background-size: cover;
}
.orange .phase-content{
    width: 130px;
    height: 130px;
    border: 5px solid #f9974a;
    display: flex;
    margin: auto;
    background-image: url(/img/orange-circle.svg);
    background-color: #f9974a;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    border-radius: 100%;
    background-size: cover;
}
.phase-item {
    width: auto;
    width: 144px;
    padding-top: 114px;
    position: relative;
    margin: 0px 10px;
    cursor: pointer;
}
.phase-warning {
    width: 38px;
    height: 38px;
    color: white;
    font-size: 10px;
    border: 10px solid transparent;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 59px;
}
.phase-warning span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    border: 2px solid white;
    font-weight: 700;
    min-width: 20px;
}
.red .phase-warning {
    background-color: #ff4b4c;
}
.red .phase-warning:before {
    width: 48px;
    height: 48px;
    opacity: .25;
    background-color: #ff4b4c;
    content: '';
    display: block;
    border-radius: 100%;
    position: absolute;
}
.red .phase-warning:after {
    width: 58px;
    height: 58px;
    opacity: .1;
    background-color: #ff4b4c;
    content: '';
    display: block;
    border-radius: 100%;
    position: absolute;
}
.blue .phase-warning {
    background-color: #1d729c;
}
.blue .phase-warning:before {
    width: 48px;
    height: 48px;
    opacity: .25;
    background-color: #1d729c;
    content: '';
    display: block;
    border-radius: 100%;
    position: absolute;
}
.blue .phase-warning:after {
    width: 58px;
    height: 58px;
    opacity: .1;
    background-color: #1d729c;
    content: '';
    display: block;
    border-radius: 100%;
    position: absolute;
}
.orange .phase-warning {
    background-color: #ffbc5d;
}
.orange .phase-warning:before {
    width: 48px;
    height: 48px;
    opacity: .25;
    background-color: #ffbc5d;
    content: '';
    display: block;
    border-radius: 100%;
    position: absolute;
}
.orange .phase-warning:after {
    width: 58px;
    height: 58px;
    opacity: .1;
    background-color: #ffbc5d;
    content: '';
    display: block;
    border-radius: 100%;
    position: absolute;
}
/*.notifications-sound {
    width: 42px;
    height: 42px;
    display: block;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}*/
.notifications-sound svg {
    width: 24px;
    height: 24px;
}
.notifications-sound svg {
    fill: #727198;
    stroke: #727198;
}
svg.icon {
}
.message {
    position: relative;
    margin-bottom: 20px;
}
.notifications-messages {
    border-radius: 5px;
    background-color: #1a1939;
    padding: 28px 35px;
    max-width: 343px;
    margin-top: 20px;
    position: relative;
    display: none;
    z-index: 9999;
}
.monitoring-modal-close svg {
    width: 9px;
    height: 9px;
    stroke: #6d6ea3;
    fill: #6d6ea3;
    display: block;
   /* position: absolute;
    */
   /* right: 7px;
    */
   /* top: 7px;
    */
    cursor: pointer;
}
.monitoring-modal-close {
    position: absolute;
    right: 7px;
    top: 7px;
}
.message-title {
    font-size: 10px;
    text-transform: uppercase;
    color: #727198;
    margin-bottom: 25px;
}
.message-subtitle {
    color: #727198;
    font-size: 12px;
    margin-bottom: 5px;
}
span.white {
    color: white;
}
.message-text {
    font-size: 16px;
    position: relative;
    color: white;
}
.message-title {
}
.message {
}
.message.message-red:before {
   /* content: '';
    */
    width: 9px;
    height: 9px;
    display: block;
    border-radius: 100%;
    position: absolute;
    background-color: red;
    left: -15px;
}
.message-text.message-text-red:before {
    content: '';
    width: 7px;
    height: 7px;
    display: block;
    border-radius: 100%;
    position: absolute;
    background-color: red;
    left: -13px;
    top: 6px;
}
.message-text.message-text-orange:before {
    content: '';
    width: 7px;
    height: 7px;
    display: block;
    border-radius: 100%;
    position: absolute;
    background-color: #ffbc5d;
    left: -13px;
    top: 6px;
}
.message-text.message-text-blue:before {
    content: '';
    width: 7px;
    height: 7px;
    display: block;
    border-radius: 100%;
    position: absolute;
    background-color: #1d729c;
    left: -13px;
    top: 6px;
}
.main-notifications {
    max-width: 345px;
    display: flex;
    flex-direction: column;
    justify-content: right;
    align-items: flex-end;
    position: absolute;
    top: 105px;
    right: 30px;
}
.global_canvas {
    width: 100vw;
    height: 150px;
    display: block;
    position: absolute;
    top: -32px;
    /* left: -263px;
    */
    z-index: 0;
}
.global_canvas .connector {
    stroke-width: 5px;
    fill: none;
}
.actor.top.ui-draggable.ui-draggable-handle {
    margin: auto;
    display: block;
    width: 1px;
}




div#sidebar-container.sidebar-collapsed+.main-container {
    width: calc(100% - 102px);

}
.popup-background{
   display:none;
}
































.actor.top {
    margin: auto;
    display: block;
   /* width: 100%;
    */
    height: 2px;
    text-align: center;
    display: flex;
    justify-content: center;
   /* position: absolute;
    */
   /* margin-left: -50%;
    */
}
.monitoring-scheme-modal {
   /* display: flex;
    */
   /* position: absolute; */
   width: 294px;
   height: 294px;
   border-radius: 100%;
   border: 10px solid #3776fe;
   background-color: #21203f;
   box-shadow: 0px 0px 33px #3776fe;
   /* top: 212px; */
   /* position: absolute; */
   /* left: 0; */
   /* margin: auto; */
   /* right: 0; */
   z-index: 9;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   display: flex;
}
.monitoring-scheme-modal:before {
    width: 400px;
    height: 400px;
    background-color: #3776fe;
    opacity: .05;
    content: '';
    position: absolute;
    border-radius: 100%;
    left: -53px;
    right: 0;
    margin: auto;
    top: -59px;
}
.monitoring-top-modal {
    top: -69px;
    position: absolute;
    left: 0;
    margin: auto;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 10;
}
.monitoring-scheme-top {
   /* opacity: 0;
    */
}
.monitoring-scheme-modal .monitoring-modal-close {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    display: flex;
    background-color: #222448;
    align-items: center;
    justify-content: center;
    right: -19px;
    top: -13px;
    display: none;
}
.monitoring-scheme-modal .monitoring-modal-close svg {
    width: 15px;
    height: 15px;
}
.monitoring-modal {
   position: absolute;
   top: 22px;
   left: -50%;
   z-index: 10;
}
.popup-background {
   width: calc(100vw - 6px);
   height: calc(100vh - 6px);
   position: absolute;
   background-color: #111021;
   z-index: 9;
   position: absolute;
   top: 0;
   opacity: .9;
   pointer-events: all;
}
.toggler {
    margin: 0px 10px;
    display: flex;
    padding: 6px 21px;
    color: white;
    font-size: 14px;
    cursor: pointer;
    background-color: #313337;
    border-radius: 30px;
}
.toggler.active {
    background-color: #3776fe;
    border-radius: 25px;
}
.monitoring-modal-title {
    font-size: 28px;
    color: white;
    font-weight: 700;
    text-align: center;
}
.monitoring-modal-subtitle {
    font-size: 18px;
    color: white;
    font-weight: 700;
    text-align: center;
}
.monitoring-message-green {
    color: #00ffcc;
    padding: 17px 30px;
    border-radius: 5px;
    font-size: 16px;
    background-color: #1f1e3e;
    display: flex;
    margin: auto;
    width: auto;
    text-align: center;
}
.main-content.active{
    display: block !Important;
}
.test {
    position: absolute;
    background-color: #1f1e3e;
    right: 0px;
    bottom: 0px;
    color: white;
    padding: 30px;
    z-index: 99;
}
.test h2 {
    font-size: 18px;
    margin-bottom: 20px;
}
.button.button-warning {
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 5px;
    background-color: #01dfc0;
    text-align: center;
}
svg g.apexcharts-datalabels {
    transform: translate(0px, 24px);
}
.monitoring-scheme-modal svg text {
    color: white !important;
    fill: white;
    font-family: "Manrope" !important;
    font-size: 16px;
    font-weight: 600 !important;
}
svg line {
    display: none;
}
.phase-content.active {
    border-color: white;
}
.connector.active {
    stroke: white !important;
}
.apexcharts-text.apexcharts-datalabel-label:first-child {
   /* display: none !important;
    */
}
.apexcharts-datalabels-group text {
   /* font-size: 26px;
    */
   /* font-family: 'Manrope' !important;
    */
   /* font-weight: 800 !important;
    */
}
.apexcharts-datalabels-group {
   transform: translate(5px, -23px);
}
.dashboard-element {
    background-color: #1a1939;
    padding: 30px;
    height: 100%;
    border-radius: 10px;
}
.dashboard-button {position: absolute;right: 19px;top: 28px;cursor: pointer;}

.dashboard-button svg {
   width: 29px;
   height: 21px;
   z-index: 8;
   display: block;
}

.dashboard-element .row {
   margin: 0px;
}
div#business-chart>div:before {
    content: '';
    background-color: #31315c !important;
    stroke: white !important;
    fill: white !important;
   /* box-shadow: 0px 0px 50px #2e7eff;
    */
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    margin: auto;
    position: absolute;
    right: 0;
    left: 0;
    top: 66px;
    background-size: 20px;
    background-image: url(img/lightning.svg);
    background-repeat: no-repeat;
    background-position: center;
}
div#business-chart {
    position: relative;
}
div#business-chart {
    width: 350px;
    margin: auto;
}
div#business-chart:before {
    content: '0%';
    color: #706f94;
    font-size: 14px;
    top: 220px;
    position: absolute;
    left: 47px;
}
div#business-chart:after {
    content: '100%';
    color: #706f94;
    font-size: 14px;
    top: 220px;
    position: absolute;
    right: 47px;
}
.dashboard-title {
    font-size: 22px;
    color: white;
    font-weight: 500;
    margin-bottom: 40px;
}
.dashboard-title {
    font-size: 22px;
    color: white;
    font-weight: 500;
    margin-bottom: 40px;
    width: 100%;
}
.dashboard-element.overspending {
}
.dashboard-togglers {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}
.toggler .icon {
    width: 20px;
    height: 20px;
}
.toggler .icon path, .toggler .icon g {
    fill: white !important;
    stroke: white !important;
}
.dashboard-element.overspending {
   /* width: 33%;
    */
    display: flex;
    flex-wrap: wrap;
}
.dashboard-element.business {
   /* width: 33%;
    */
}
.dashboard-wrapper {
   /* display: flex;
    */
    flex-wrap: wrap;
   /* gap: 10px;
    */
}
div#overspending-chart {
    width: 50%;
}
.overspanding-detailed {
    width: 50%;
    color: #706f94;
    font-size: 14px;
}
.overspanding-detailed_item {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.overspanding-detailed_line {
    width: 100%;
}
.overspanding-detailed_title span {
    color: white;
}
.overspanding-detailed_line {
    height: 6px;
    display: block;
    width: 100%;
    border-radius: 5px;
    background: #050611;
    margin-top: 5px;
    position: relative;
    overflow:hidden 
}
.overspanding-detailed_line-current {
    display: block;
    height: 6px;
    border-radius: 5px;
    background: #295bc6;
}
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
   }
    100% {
        transform: translateX(0);
   }
}
.overspanding-detailed_line-current{
    animation: .7s ease-out 0s 1 slideInFromLeft;
    transition-delay: 1.5s;
}
.dashboard-element.ratio {
   /* width: 15%;
    */
}
.dashboard-title {
}
.ratio-text {
    font-size: 14px;
    color: white;
    margin-bottom: 5px;
}
.ratio-all {
    color: #706f94;
    font-size: 18px;
    margin-bottom: 10px;
}
.ratio-all span {
    color: white;
    font-weight: 600;
}
.ratio-lines {
    height: 10px;
    width: 100%;
    display: flex;
    background-color: #080917;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 44px;
}

.ratio-line:nth-child(4n + 1) {
    background: linear-gradient(45deg, #00fbd5, #00edf3);
}
.ratio-line:nth-child(4n + 2) {
    background: linear-gradient(45deg, #a332fb, #812ffe);
}
.ratio-line:nth-child(4n + 3) {
    background: linear-gradient(45deg, #fde36d, #f5bd52);
}
.ratio-line:nth-child(4n + 4) {
    background: linear-gradient(45deg, #ff5051, #fe696b);
}
.ratio-number:nth-child(4n + 1) span:first-child:before {
   background-color: #00f7dc;
}
.ratio-number:nth-child(4n + 2) span:first-child:before {
   background-color: #8b30fd;
}
.ratio-number:nth-child(4n + 3) span:first-child:before {
   background-color: #f8cc5d;
}
.ratio-number:nth-child(4n + 4) span:first-child:before {
   background-color: #fe6163;
}
.ratio-number {
    color: white;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0px;
}
.ratio-number span:last-child {
    color: #706f94;
}
.ratio-number span:first-child {
    width: 39%;
    display: flex;
    align-items: center;
}
.ratio-number span:first-child:before {
    content: '';
    width: 6px;
    height: 6px;
    display: block;
    margin-right: 5px;
    border-radius: 8px;
}
.apexcharts-legend.apexcharts-align-left.apx-legend-position-bottom {
    flex-direction: column;
}
.apexcharts-legend.apexcharts-align-left.apx-legend-position-bottom {
    flex-direction: column;
    margin-top: 49px !important;
    padding: 0px !important;
}
/*.apexcharts-legend-series:not(:last-child) {
    margin-bottom: 20px !important;
}*/
.dashboard-element.dynamics {
   /* width: 15%;
    */
}
.usage-date {
    color: #fff;
    font-size: 12px;
    text-align: center;
    margin-bottom: 10px;
}
div#fluid-meter {
    background-color: #31315c;
    padding: 30px 0px;
    text-align: center;
    border-radius: 10px;
}
.apexcharts-yaxistooltip.apexcharts-yaxistooltip-0.apexcharts-yaxistooltip-left.apexcharts-theme-light {
    display: none;
}
#accidents-week .apexcharts-datalabels {
    display: none;
}
.accidents-all {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
    border: 4px solid #346ce9;
    border-radius: 100%;
}
.accidents-all span:first-child {
    color: white;
    font-size: 18px;
    font-weight: 600;
}
span {
}
.accidents-all span:last-child {
    color: #706f94;
    font-size: 10px;
}
div#accidents-week {
    background-color: #31315c;
    border-radius: 5px;
}
.row {
  
}
.accidents-table {
    margin-top: 15px;
}
.accidents-table-titles, .accidents-table-row {
    display: flex;
   /* justify-content: space-between;
    */
    padding: 15px 0px;
}
.accidents-table-titles {
    color: #706f94;
    text-transform: uppercase;
}
.accidents-table-row {
    color: white;
    font-size: 14px;
}
.accidents-table-titles div:first-child, .accidents-table-row>div:first-child {
    width: 30%;
}
.accidents-table-titles div:nth-child(2), .accidents-table-row div:nth-child(2) {
    width: 20%;
}
.accidents-table-titles div:nth-child(3), .accidents-table-row div:nth-child(3) {
    width: 50%;
    align-items: center;
}
.accidents-table-row div:nth-child(3) {
    display: flex;
}
.accidenrts-line {
    width: 100%;
    height: 6px;
    display: block;
    width: 100%;
    border-radius: 5px;
    background: #050611;
    margin-top: 5px;
    position: relative;
    overflow: hidden;
    margin-right: 15px;
}
.accidents-line-inner {
    animation: .7s ease-out 0s 1 slideInFromLeft;
    transition-delay: 1.5s;
    display: block;
    height: 6px;
    border-radius: 5px;
}
.accidents-table-row:nth-child(2) .accidents-line-inner {
    background: linear-gradient(45deg, #ff5051, #fd6a6d);
}
.accidents-table-row:nth-child(3) .accidents-line-inner {
    background: linear-gradient(45deg, #ffa550, #ffcc67);
}
.accidents-table-row:nth-child(4) .accidents-line-inner {
    background: linear-gradient(45deg, #0a557f, #2a85af);
}
.dashboard-wrapper>.row>div {
   /* margin-bottom: 10px;
    */
    padding: 10px;
}
.dashboard-wrapper>.row {
    margin: 0px 0px;
}
div#mychart {
    /* margin-bottom: -15px; */
}
div#mychart {
    margin-bottom: 0px !important;
}
.monitoring-modal-charts {
   width: 200px;
}
.apexcharts-xaxis {
    transform: translate(-3px, 10px);
}
/* History Tab */
.history-item {
    font-size: 14px;
    color: #706f94;
    display: flex;
    padding: 12px 0px;
    border-bottom: 1px solid #1a1b2b;
}
.history-item span:first-child {
    width: 67px;
}
.history-item span:nth-child(2) {
    width: 72px;
}
.history-item span:last-child {
    color: white;
}
/* Notifications */
.notifications-item {
    display: flex;
    align-items: center;
    padding: 16px 0px;
}
.notifications-icon {
    margin-right: 15px;
}
.notifications-icon {
    width: 50px;
    height: 50px;
    padding: 12px;
    background-color: red;
    border-radius: 100%;
    box-shadow: 0px 0px 21px;
}
.notifications-icon svg {
    width: 100%;
    height: 100%;
   /* max-width: 23px;
    */
   /* max-height: 25px;
    */
}
.green .notifications-icon {
    background-color: #00ffcc;
    color: #00ffcc;
}
.orange .notifications-icon {
    background-color: #ff9643;
    color: #ff9643;
}
.red .notifications-icon {
    background-color: #fe4c4d;
    color: #fe4c4d;
}
.blue .notifications-icon {
    background-color: #004879;
    color: #004879;
}
.notifications-problem {
   font-size: 16px;
}
.green .notifications-problem {
    color: #00e3b5;
}
.orange .notifications-problem {
    color: #ff9643;
}
.red .notifications-problem {
    color: #fe4c4d;
}
.blue .notifications-problem {
    color: #0067ab;
}
.notifications-solution span {
    color: #706f94;
}
.notifications-solution {
    color: white;
    font-size: 16px;
}
.notifications-wrapper {
    margin: 30px 0px;
}
.sidebar-collapsed a[data-toggle="sidebar-colapse"], .sidebar-collapsed a[data-toggle="sidebar-colapse"] svg {
    width: 30px !important;
    height: 53px !important;
    min-width: 25px !important;
    margin-top: 1px;
}

/* Login button */
 .login-button svg {
   background-color: #1a1935;
   margin-right: 15px;
   stroke: #6d6ea3;
   fill: #6d6ea3;

   width: 42px;
   height: 42px;
   padding: 13px;
   border-radius: 100%;
   min-width: 42px;
   transition: all .3s ease;
}
.login-button {
    bottom: 90px;
    right: 0;
    left: 0;
    margin: auto;
    position: absolute;
    display: block;
    width: 82px;
    padding: 9px !important;
    border: 1px solid #1a1935;
    border-radius: 100% !important;
    background-color: transparent;
}

 .login-button>div {
    padding: 9px;
    border: 1px solid #1a1935;
    border-radius: 100%;
    width: 62px !important;
    height: 62px;
}

span.notifications-numbers, div#sidebar-container .list-group-item.active span.notifications-numbers {
    width: 22px;
    height: 22px;
    display: block;
    border-radius: 100%;
    background-color: #6738ff;
    min-width: 22px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: white !important;
    position: absolute;
    top: 9px;
    left: 61px;
}
ul.objects li a:before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 6px;
    display: block;
    position: absolute;
   /* background-color: red;
    */
    right: 5px;
    top: 5px;
}
ul.objects li a {
    position: relative;
}
ul.objects li.red a:before {
    background-color: #fa4f4f;
}
ul.objects li.orange a:before {
    background-color: #ff9848;
}
ul.objects li.blue a:before {
    background-color: #004879;
}
ul.objects li.green a:before {
    background-color: #00eac5;
}
@media screen and (max-width: 1300px){
.main-content.monitoring{
 overflow-x: scroll 
}
 .monitoring-scheme {
    padding-left: 326px;
    padding-right: 280px;
    min-width: 921px;
    /* transform: translate(23px, 0px); */
}
}
@media screen and (max-width: 1000px){
    .tools {
        padding: 0px 0px 0px 15px;
        font-size: 10px;
   }
  .sidebar-collapsed .sidebar-logo {
    padding-right: 0px;
    padding-left: 10px;
}
.sidebar-collapsed img.brand-image {
    width: 24px;
} img.brand-image {
    width: 90px;
    height: 17px;
    object-fit: cover;
    object-position: left;
    min-width: 21px;
    transition: all .3s ease;
}
    .sidebar-logo {
        padding: 15px 13px 29px 18px;
        height: 75px;
   }
    .sidebar-logo a{
        display:flex;
        align-items:center 
   }
    .main-container li.active a {
        height: 40px;
   }
    .main-container .main-nav {
        height: 40px;
   }
    .main-container a.nav-link {
        height: 36px;
   }
    .main-container a.nav-link {
        font-size: 11px;
   }
    .main-container .main-nav-buttons svg {
        width: 16px;
        height: 16px;
   }
    .main-container .nav-buttons-filters {
        margin-right: 20px;
   }
  .main-container .notifications-sound {
        margin-right: 20px;
   }
    .main-container .nav-buttons-fullscreen {
        margin-right: 20px;
   }
    .main-container .nav-buttons-info {
        margin-right: 15px;
   }
    .notifications-sound {
        width: 32px;
        height: 32px;
   }
    .notifications-sound svg {
        width: 16px;
        height: 16px;
   }
    .main-content {
        padding: 20px 40px;
        height: calc(100vh - 77px);
   }
    .main-title .title {
        font-size: 20px;
   }
    .main-title .subtitle {
        font-size: 16px;
   }
    .main-notifications {
        top: 77px;
        right: 20px;
   }
    .toggler {
        font-size: 10px;
   }
    .dashboard-title {
        font-size: 18px;
   }
    div#sidebar-container ul a.list-group-item {
        padding: 15px 15px !important;
   }
    div#sidebar-container ul a.list-group-item svg.icon.nav-icon {
        margin-right: 0px;
        width: 32px;
        height: 32px;
        min-width: 32px;
        padding: 10px;
   }
    div#sidebar-container .sidebar-logo svg.icon.nav-icon {
        width: 27px !important;
        height: 18px !important;
        min-width: 22px !important;
   }
    div#sidebar-container.sidebar-collapsed {
        width: 67px;
   }
    .login-button {
        left: -5px;
   }
    div#sidebar-container.sidebar-collapsed img.brand-image {
        width: 19px !important;
        height: 16px !important;
        min-width: 9px;
   }
    div#sidebar-container.sidebar-collapsed .sidebar-logo a {
        display: flex;
        align-items: center;
        height: 100% !important;
        margin-left: 0px;
   }
    div#sidebar-container a.login svg.icon.nav-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        padding: 10px;
   }
    div#sidebar-container.sidebar-collapsed+.main-container {
        width: calc(100% - 67px);
   }
    .main-container {
        width: calc(100% - 158px);
        background-color: #1f1e3e;
        /* transition: all .3s ease; */
   }
    div#sidebar-container span.menu-collapsed {
        font-size: 13px;
        margin-left: 10px;
   }
    .sidebar-expanded {
        width: 170px;
   }
    .accidents-table-titles div:first-child, .accidents-table-row>div:first-child {
   }
    .accidents-table-titles {
        font-size: 12px;
   }
   .history-item {
        font-size: 12px;
   }
    .notifications-icon {
        width: 38px;
        height: 38px;
        padding: 10px;
        min-width: 38px;
   }
    .notifications-problem {
        font-size: 14px;
   }
    .notifications-solution {
        font-size: 14px;
   }
    span.notifications-numbers, div#sidebar-container .list-group-item.active span.notifications-numbers {
        left: 38px;
        width: 18px;
        height: 18px;
        min-width: 18px;
        font-size: 8px;
   }
   .monitoring-message div {
        font-size: 13px !important;
        padding: 13px 30px !important;
   }
    .monitoring-scheme {
        padding-top: 80px;
   }
    .monitoring-scheme-modal {
        top: 188px;
   }
}
@media (min-width: 1600px) {
.d-xxl-block{
    display: block !important;
}
 .col-xxl-1 {
   flex: 0 0 auto;
   width: 8.33333333%;
 }
 .col-xxl-2 {
   flex: 0 0 auto;
   width: 16.66666667%;
 }
 .col-xxl-3 {
   flex: 0 0 auto;
   width: 25%;
 }
 .col-xxl-4 {
   flex: 0 0 auto;
   width: 33.33333333%;
 }
 .col-xxl-5 {
   flex: 0 0 auto;
   width: 41.66666667%;
 }
 .col-xxl-6 {
   flex: 0 0 auto;
   width: 50%;
 }
 .col-xxl-7 {
   flex: 0 0 auto;
   width: 58.33333333%;
 }
 .col-xxl-8 {
   flex: 0 0 auto;
   width: 66.66666667%;
 }
 .col-xxl-9 {
   flex: 0 0 auto;
   width: 75%;
 }
 .col-xxl-10 {
   flex: 0 0 auto;
   width: 83.33333333%;
 }log
 .col-xxl-11 {
   flex: 0 0 auto;
   width: 91.66666667%;
 }
 .col-xxl-12 {
   flex: 0 0 auto;
   width: 100%;
 }
 
}

/*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
* Add "left" or "right" in modal parent div, after class="modal".
* Get free snippets on bootpen.com
*******************************/
   .modal.left .modal-dialog,
   .modal.right .modal-dialog {
       position: fixed;
       margin: auto;
       width: 180%;
       height: 100%;
       -webkit-transform: translate3d(0%, 0, 0);
           -ms-transform: translate3d(0%, 0, 0);
            -o-transform: translate3d(0%, 0, 0);
               transform: translate3d(0%, 0, 0);
   }

   .modal.left .modal-content,
   .modal.right .modal-content {
       height: 100%;
       overflow-y: auto;
   }
   
   .modal.left .modal-body,
   .modal.right .modal-body {
       padding: 15px 15px 80px;
   }

/*Left*/
   .modal.left.fade .modal-dialog{
       left: -120px;
       -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
          -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
            -o-transition: opacity 0.3s linear, left 0.3s ease-out;
               transition: opacity 0.3s linear, left 0.3s ease-out;
   }
   
   .modal.left.fade.in .modal-dialog{
       left: 0;
   }
       
/*Right*/
   .modal.right.fade .modal-dialog {
       right: -0px;
       -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
          -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
            -o-transition: opacity 0.3s linear, right 0.3s ease-out;
               transition: opacity 0.3s linear, right 0.3s ease-out;
   }
   
   .modal.right.fade.in .modal-dialog {
       right: 0;
   }

/* ----- MODAL STYLE ----- */
   .modal-content {
       border-radius: 0;
       border: none;
   }

   .modal-header {
       border-bottom-color: #EEEEEE;
       background-color: #FAFAFA;
   }

.p-chart {
   height: 100%;
   display: flex;
   align-items: center;
   min-height: 100%;
   justify-content: center;
   margin-bottom: 41px;
   margin-top: 67px;
}

div#mychart {
   display: flex;
   align-items: center;
   justify-content: center;
}

.p-chart__col span:first-child {
   color: #00f1eb !important;
   fill: white;
   font-family: "Manrope" !important;
   font-size: 20px;
   font-weight: 600 !important;
   text-align: center;
   display: block;
   margin-bottom: 22px;
}

.p-chart__col span:last-child {
   color: white;
   font-family: "Manrope" !important;
   font-size: 16px;
   font-weight: 600 !important;
   text-align: center;
   display: block;
   /* margin-bottom: 50px; */
   padding: 0px 5px;
}
/* ---------- MODAL LOGIN ---------- */
.popup.popup-login.login {
   position: absolute;
   top: 0;
   bottom: 0;
   margin: auto;
   right: 0;
   left: 0;
   width: 660px;
   height: 432px;
   z-index: 10;
   background-color: #1f1e3e;
   border-radius: 10px;
   padding: 65px 0px 36px;
   text-align: center;
   box-sizing: border-box;
}

.login__title {
   margin-bottom: 47px;
   font-size: 24px;
   color: white;
   font-weight: 600;
}

.login__close {
   position: absolute;
   right: 10px;
   top: 10px;
   height: 44px;
   width: 44px;
   background-color: #100f29;
   border-radius: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
}
.login__close .icon {
   width: 20px;
   height: 20px;
   display: block;
   stroke: #6d6ea3;
}

.login__close .icon path {
   fill: red !IMPORTANT;
}

input.login__input {
   width: 435px;
   height: 60px;
   padding: 0px 30px;
   display: flex;
   align-items: center;
   border-radius: 10px;
   margin: 0px auto 30px;
   color: #aea9a9;
   font-size: 24px;
}

input.login__input::placeholder {
   color: #aea9a9;
   font-size: 24px;
}

button.login__submit {
   width: 240px;
   height: 60px;
   display: block;
   margin: auto;
   border: none;
   appearance: none;
   border-radius: 30px;
   background-color: #2e7eff;
   color: white;
   text-transform: uppercase;
   box-shadow: 0px 0px 52px #2e7effd4;
}

.popup.popup-settings.settings {
   position: absolute;
   width: calc(100% - 245px);
   height: calc(100vh - 104px);
   top: 95px;
   bottom: 0;
   left: 229px;
   z-index: 10;
   background-color: #1a1a20;
   border-radius: 10px;
   padding: 15px;
   box-sizing: border-box;
}

.settings__sidebar {
   width: 364px;
   margin-right: 30px;
}

.settings__title {
   padding: 23px 30px 19px;
   color: white;
   border-bottom: 1px solid #0a0a0a;
   background-color: #15151a;
   border-radius: 10px 10px 0px 0px;
}

.settings__title span:first-child {
   margin-bottom: 7px;
   display: block;
   font-size: 22px;
   font-weight: 600;
   color: white;
}

.settings__title span {
   color: #058ce5;
   font-size: 22px;
}

ul.sidebar__menu {
   border-top: 1px solid #383737;
   background: #15151a;
   height: calc(100vh - 374px);
   border-radius: 0px 0px 10px 10px;
   margin-bottom: 30px;
   overflow-y: scroll;
}

.settings__sidebar {
}

ul.sidebar__menu {
   padding-inline-start: 0px;
   padding: 18px 18px;
   list-style: none;
}

ul.sidebar__menu li {
   /* height: 52px; */
   /* border-radius: 10px; */
   /* list-style: dist; */
   color: white;
}
ul.sidebar__menu li.active>a {
   height: 52px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   background-color: #1a1a20;
   color: #058ce5 !important;
   justify-content: space-between;
   font-weight: 600;
   /* margin-bottom: 20px; */
}

ul.sidebar__menu ul.sidebar__menu-child {
   display: none;
}

ul.sidebar__menu li.has-children.active ul.sidebar__menu-child {
   display: block;
   list-style: disc;
   margin-top: 20px;
}

ul.sidebar__menu>li>a, ul.sidebar__menu>li>a a:not([href]):not([tabindex]) {
   height: 52px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   color: white;
   font-size:28px;
   padding: 0px 16px;
   justify-content: space-between;
}
ul.sidebar__menu li>a svg {
   width: 30px;
   height: 30px;
   transition: all .3s ease;
   margin-top: 6px;
}
ul.sidebar__menu li.active>a svg {
   transform: rotate(180deg);
}

ul.sidebar__menu-child a {
   color: #aea9a9;
   font-size: 24px;
   margin-bottom: 20px;
   display: block;
}

.settings__close {
   stroke: #6d6ea3;
   position: absolute;
   right: 15px;
   top: 15px;
   height: 44px;
   width: 44px;
   background-color: #100f29;
   border-radius: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 999;
}

.settings__close svg {
   width: 20px;
   height: 20px;
   display: block;
   stroke: #6d6ea3;
}

button.logout {
   width: 240px;
   height: 60px;
   display: block;
   margin: auto;
   border: none;
   appearance: none;
   border-radius: 30px;
   background-color: #2e7eff;
   color: white;
   text-transform: uppercase;
   box-shadow: 0px 0px 52px #2e7effd4;
}

.settings__wrapper {
   display: flex;
}

.settings__content {
   width: calc(100% - 308px);
}

.setting__placeholder {
   height: 100%;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #aea9a9;
   font-size: 24px;
   text-align: center;
}ul.sidebar__menu li.has-children.active ul.sidebar__menu-child li::marker {
   color: #aea9a9;
}
ul.sidebar__menu li>a svg path {
   stroke: white;
}

ul.sidebar__menu li.active>a svg path {
   stroke: #058ce5 !important;
}
.settings__page {
   height: 100%;
}
body.menu-collapsed-body .popup.popup-settings.settings {
   width: calc(100% - 122px);
   left: 112px;
}
body.menu-collapsed-body .popup.popup-settings.settings {
   left: 76px;
   top: 72px;
   width: calc(100% - 89px);
   height: calc(100vh - 87px);
}

@media screen and (max-width: 1000px){
   div#sidebar-container {
    width: 158px;
}
.popup.popup-settings.settings {
   width: calc(100% - 177px);
   height: calc(100vh - 94px);
   top: 73px;
   bottom: 0;
   left: 166px;
}

   .settings__title {
   padding: 10px;
}

.settings__title span {
   font-size: 18px;
}

.settings__title span:first-child {
   font-size: 18px;
   margin-bottom: 0px;
}

ul.sidebar__menu {
   padding: 18px 0px;
   height: calc(100vh - 289px);
}

ul.sidebar__menu li>a {
   height: 40px;
   font-size: 22px;
}

ul.sidebar__menu li>a svg {
   width: 20px;
   height: 20px;
}

ul.sidebar__menu-child {
   margin-top: 10px !important;
}

ul.sidebar__menu-child>a {
   font-size: 16px !important;
   margin-bottom: 10px;
}

ul.sidebar__menu-child a {
   font-size: 16px !important;
   margin-bottom: 10px;
   height: auto !important;
}

button.logout {
   width: 180px;
   height: 50px;
   font-size: 14px;
}

.settings__sidebar {
   width: 240px;
   margin-right: 15px;
}

.settings__content {
   width: calc(100% - 255px);
}

.setting__placeholder {
   font-size: 18px;
}
}
.monitoring-modal.main {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    height: 342px;
    width: 342px;
}

.monitoring-scheme>.monitoring-scheme-modal {
    width: 342px;
    height: 342px;
}

.monitoring-scheme .monitoring-modal 
 .monitoring-scheme-modal {
    margin: auto;
}


.zoom-header {
  display: flex;
}

.zoomin {
  position: relative;
  z-index: 1000;
}

.zoomout {
  position: relative;
  z-index: 1000;
}

.scroll_y{
  overflow-y:scroll;
  
}
.scroll_h1{
  height: 280px;
  padding: 15px;
}

.btn-primary {
    color: #fff;
    background-color: #1b1d1e;
    border-color: #26282b;
}


.tree, .tree ul {
    margin:0;
    padding:0;
    list-style:none
}
.tree ul {
    margin-left:1em;
    position:relative
}
.tree ul ul {
    margin-left:.5em
}
.tree ul:before {
    content:"";
    display:block;
    width:0;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    border-left:1px solid
}
.tree li {
    margin:0;
    padding:0 1em;
    line-height:2em;
    color:#369;
    font-weight:700;
    position:relative
}
.tree ul li:before {
    content:"";
    display:block;
    width:10px;
    height:0;
    border-top:1px solid;
    margin-top:-1px;
    position:absolute;
    top:1em;
    left:0
}
.tree ul li:last-child:before {
    background:#1a1939;
    height:auto;
    top:1em;
    bottom:0
}
.indicator {
    margin-right:5px;
}
.tree li a {
    text-decoration: none;
    color:#369;
}
.tree li button, .tree li button:active, .tree li button:focus {
    text-decoration: none;
    color:#369;
    border:none;
    background:transparent;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    outline: 0;
}
#ratio-chart .bi {color: #fff}

.modal-dialog {
    max-width: 800px;
    margin: 1.75rem auto;
}

.modal-body {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1rem;
    background: #000;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.modal-content {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: none; 
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    outline: 0;
    border-radius: 12px;
}

.dashboard-top {
  top:98px !important;
}
.monitoring-scheme {
    position: relative;
    overflow: auto; /* разрешаем прокрутку при необходимости */
}