body {
    background-color: #e9ecef;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}
.contoso-bakeries-dashboard {
    margin: 0;
    font-size: 12px;
}
.contoso-bakeries-dashboard-container {
    position: absolute;
    top: calc(50% - 23.5px);
    left: -2px;
    line-height: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    width: 1188px;
    height: 47px;
}
.footer {
    position: absolute;
    top: 900px;
    left: 254px;
    width: 1186px;
    height: 50px;
    overflow: hidden;
    font-size: 16px;
}
.toc-menu {
    position: absolute;
    margin:auto;
    top: 0px;
    left: 11px;
    line-height: 18px;
    font-weight: 900;
    display: -webkit-inline-box;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 181px;
    padding: 10px;
}
.toc-item {
    width: 202px;
    position: relative;
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.5);
    background-color: rgba(255, 255, 255, 0);
    border: 1px solid #474343;
    box-sizing: border-box;
    height: 42px;
    overflow: hidden;
    flex-shrink: 0;
}
.toc-menu1 {
    position: relative;
    top: 0px;
    margin: auto;
    left: 11px;
    line-height: 18px;
    font-weight: 600;
    display: -webkit-inline-box;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 191px;
    padding: 10px;
}
.toc-item1 {
    width: 212px;
    position: relative;
    background-color: rgba(255, 255, 255, 0);
    height: 42px;
    overflow: hidden;
    flex-shrink: 0;
}
.navigation {
    position: absolute;
    top: 68px;
    left: 0px;
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.25);
    background-color: #8c2525;
    width: 202px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    font-size: 16px;
    color: #fffbf6;
}
.header-child {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
    background-color: #8c2525;
}
.trial-info {
    width: 76px;
    height: 48px;
    display: none;
}
.notification {
    width: 78px;
    background-color: rgba(255, 255, 255, 0);
    height: 76px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 14px;
    box-sizing: border-box;
    position: relative;
}
.toc-menu-toc-menu-header-b {
    position: absolute;
    width: calc(100% - 47px);
    top: 45.5px;
    right: 23.5px;
    left: 23.5px;
    border-top: 1px solid #e0e0e0;
    box-sizing: border-box;
    height: 1px;
}
.toc-menu5 {
    position: absolute;
    top: 22px;
    left: 24px;
    line-height: 16px;
    font-weight: 600;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 240px;
    height: 23px;
}
.toc-menu-expanded-settings {
    position: absolute;
    top: 1494.28px;
    left: -1346px;
    background-color: #fff;
    width: 264px;
    height: 46px;
    overflow: hidden;
}
.initials-child {
    position: absolute;
    top: 0.07px;
    left: 0px;
    border-radius: 50%;
    background-color: #d9d4d4;
    width: 56px;
    height: 56px;
}
.user-role {
    position: absolute;
    top: 19.07px;
    left: 14px;
    font-size: 20px;
    line-height: 18px;
    font-weight: 600;
    color: #52131a;
}
.initials {
    width: 56px;
    position: relative;
    height: 56px;
    overflow: hidden;
    flex-shrink: 0;
}
.account-manager {
    background-color: rgba(255, 255, 255, 0);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 6px;
    text-align: left;
    font-size: 12px;
    color: #000;
}
.account-owner {
    position: absolute;
    height: 100%;
    width: 13.06%;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 86.94%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: 0px 24px;
    box-sizing: border-box;
}
.contoso-factory- {
    position: absolute;
    height: 30.93%;
    width: 28.13%;
    top: 30.93%;
    left: 1.25%;
    font-size: 24px;
    line-height: 18px;
    font-weight: 600;
    text-align: left;
    display: inline-block;
}
.header {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 67.9px;
    font-size: 10px;
    color: #fff;
}
.monitoring-panel-child {
    position: absolute;
    top: -8px;
    left: 0px;
    background-color: #d2d4d1;
    width: 215px;
    height: 180px;
}
.div {
    position: absolute;
    top: 78px;
    left: 89px;
    font-size: 64px;
    line-height: 18px;
    font-weight: 600;
    color: #090909;
}
.total-active-production {
    position: absolute;
    top: 21px;
    left: 22px;
    line-height: 18px;
    text-align: left;
    display: flex;
    align-items: center;
    width: 184px;
    height: 20px;
}
.of-5 {
    position: absolute;
    top: 133px;
    left: 18px;
    line-height: 18px;
    text-align: right;
    display: flex;
    align-items: center;
    width: 184px;
    height: 20px;
}
.monitoring-panel1 {
    position: absolute;
    top: 108px;
    left: 250px;
    width: 215px;
    height: 172px;
    overflow: hidden;
}
.div2 {
    position: absolute;
    top: 78px;
    left: 71px;
    line-height: 18px;
    font-weight: 600;
}
.total-orders-completed {
    position: absolute;
    top: 21px;
    left: 22px;
    font-size: 13px;
    line-height: 18px;
    color: #474343;
    text-align: left;
    display: flex;
    align-items: center;
    width: 184px;
    height: 20px;
}
.monitoring-panel2-v1 {
    position: absolute;
    top: 299px;
    left: 250px;
    width: 215px;
    height: 172px;
    overflow: hidden;
    font-size: 64px;
    color: #090909;
}
.monitoring-panel2-v2 {
    position: absolute;
    top: 299px;
    left: 250px;
    width: 215px;
    height: 172px;
    overflow: hidden;
    text-align: center;
    color: #474343;
}
.monitoring-panel-item {
    position: absolute;
    top: -8px;
    left: 0px;
    background-color: #b1f19c;
    width: 215px;
    height: 180px;
}
.div1 {
    position: absolute;
    top: 78px;
    left: 64px;
    font-size: 64px;
    line-height: 18px;
    font-weight: 600;
    color: #2a8745;
}
.avg-number-of {
    position: absolute;
    top: 21px;
    left: 22px;
    line-height: 18px;
    text-align: left;
    display: flex;
    align-items: center;
    width: 181px;
    height: 20px;
}
.of-target {
    position: absolute;
    top: 133px;
    left: 15px;
    line-height: 18px;
    text-align: right;
    display: flex;
    align-items: center;
    width: 184px;
    height: 20px;
}
.div3 {
    position: absolute;
    top: 78px;
    left: 76px;
    line-height: 18px;
    font-weight: 600;
}
.monitoring-panel3 {
    position: absolute;
    top: 108px;
    left: 491px;
    width: 215px;
    height: 172px;
    overflow: hidden;
    font-size: 64px;
    color: #090909;
}
.monitoring-panel-child1 {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #f1d39c;
    width: 244px;
    height: 172px;
}
.div4 {
    position: absolute;
    top: 78px;
    left: 89px;
    line-height: 18px;
    font-weight: 600;
}
.monitoring-panel4 {
    position: absolute;
    top: 108px;
    left: 735px;
    width: 215px;
    height: 172px;
    overflow: hidden;
    font-size: 64px;
    color: #c48908;
}
.monitoring-panel5 {
    position: absolute;
    top: 299px;
    left: 491px;
    width: 215px;
    height: 172px;
    overflow: hidden;
    font-size: 64px;
}
.monitoring-panel6 {
    position: absolute;
    top: 299px;
    left: 735px;
    width: 215px;
    height: 172px;
    overflow: hidden;
    font-size: 64px;
}
.div5 {
    position: absolute;
    top: 78px;
    left: 89px;
    line-height: 18px;
    font-weight: 600;
}
.div6 {
    position: absolute;
    top: 78px;
    left: 89px;
    line-height: 18px;
    font-weight: 600;
}
.activity-chart-child {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #fff;
    border: 1px solid #000;
    box-sizing: border-box;
    width: 456px;
    height: 400px;
}
.activity-chart-item {
    position: absolute;
    top: 1px;
    left: 1px;
    background-color: #d9d9d9;
    width: 453px;
    height: 35px;
}
.latest-activity {
    position: absolute;
    top: 9px;
    left: 15px;
    line-height: 18px;
    font-weight: 600;
    color: #474343;
    display: flex;
    align-items: center;
    width: 184px;
    height: 20px;
}
.activity-log-entry-child {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #fefefe;
    width: 425px;
    height: 49.2px;
}
.orders-messages {
    position: absolute;
    top: 10px;
    left: 60px;
    line-height: 15px;
    display: flex;
    align-items: center;
    width: 331px;
    height: 12px;
    font-size: 18px;
}
.activity-log-entry {
    position: relative;
    top: 50px;
    left: 15px;
    width: 425px;
    height: 49.2px;
}
.activity-chart {
    position: absolute;
    top: 500px;
    left: 250px;
    width: 456px;
    height: 300px;
    text-align: left;
    color: #000;
}
.graph-child {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #fff;
    border: 1px solid #000;
    box-sizing: border-box;
    width: 645px;
    height: 180px;
}
.graph-item {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 643px;
    height: 39px;
}
.graph-child1 {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #fff;
    border: 1px solid #000;
    box-sizing: border-box;
    width: 786px;
    height: 180px;
}
.graph-child2 {
    position: absolute;
    top: 1px;
    left: 1.22px;
    width: 783.6px;
    height: 39px;
}
.orders-received-over {
    position: absolute;
    top: 13px;
    left: 20px;
    line-height: 18px;
    font-weight: 600;
}
.graph {
    position: absolute;
    top: 500px;
    left: 751px;
    width: 645px;
    height: 180px;
    text-align: left;
    color: #000;
}
.graph1 {
    position: absolute;
    top: 720px;
    left: 750px;
    width: 645px;
    height: 180px;
    text-align: left;
    color: #000;
}
.metric-txt {
    width: 100%;
}
.monitoring-dashboard-before {
    width: 100%;
    position: relative;
    background-color: #fff;
    height: 954px;
    overflow: hidden;
    text-align: center;
    font-size: 13px;
    color: #474343;
    font-family: 'Segoe UI';
}
.donut {
    position: absolute;
    top: 112px;
    left: 883px;
    width: 371px;
    height: 500px;
    font-size: 14px;
    color: #24272b;
}