halleyx-ui-framework 11.7.94 → 11.7.96

package/dist/src/assets/styles/dashboard.scss

@@ -0,0 +1,1956 @@
+.dashboard-right-container {
+  font-family: var(--hlx-font-type-content);
+  .link {
+    color: var(--hlx-color-primary);
+    text-decoration: underline;
+    cursor: pointer;
+  }
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: row;
+  .profile-options {
+    background: #fff;
+    border: 1px solid var(--hlx-border-color);
+    border-radius: 10px;
+    box-shadow: 0px 0px 20px var(--hlx-border-color);
+    width: 200px;
+    max-height: 300px;
+    overflow: auto;
+    display: flex;
+    position: absolute;
+    top: 55px;
+    right: 20px;
+    z-index: 13;
+    display: flex;
+    flex-direction: column;
+    .top {
+      width: 100%;
+      height: 25%;
+      border-bottom: 1px solid var(--hlx-border-color);
+      padding: 10px 20px 10px 20px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      div {
+        img {
+          width: 50px;
+          height: 50px;
+          border-radius: 100%;
+          margin-right: 20px;
+          margin-top: 7px;
+        }
+      }
+      .content {
+        display: flex;
+        flex-direction: column;
+        .headerr {
+          font-size: var(--hlx-font-content-size-sm);
+          color: var(--hlx-text-color-primary);
+          font-weight: bold;
+          margin-bottom: 5px;
+        }
+        .sub-header {
+          font-size: var(--hlx-font-content-size-xs);
+          color: var(--hlx-text-color-primary);
+        }
+      }
+    }
+    .middle {
+      width: 100%;
+      height: 60%;
+      border-bottom: 1px solid var(--hlx-border-color);
+      padding: 20px 20px 10px 20px;
+      .content {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        margin-bottom: 10px;
+        .icon {
+          width: 10%;
+          margin-right: 10px;
+          i {
+            color: var(--hlx-text-color-primary);
+            font-size: var(--hlx-icon-size-md);
+          }
+        }
+        .item {
+          width: 90%;
+          color: var(--hlx-text-color-primary);
+          font-size: var(--hlx-font-content-size-sm);
+        }
+      }
+    }
+    .bottom {
+      width: 100%;
+      height: 10%;
+      padding: 10px 20px 10px 20px;
+      .content {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        .icon {
+          width: 10%;
+          margin-right: 10px;
+          i {
+            color: var(--hlx-text-color-primary);
+            font-size: var(--hlx-icon-size-md);
+          }
+        }
+        .item {
+          width: 90%;
+          color: var(--hlx-text-color-primary);
+          font-size: var(--hlx-font-content-size-sm);
+        }
+      }
+    }
+  }
+  .notifications {
+    background: #fff;
+    border: 1px solid var(--hlx-border-color);
+    border-radius: 10px;
+    box-shadow: 0px 0px 20px var(--hlx-border-color);
+    width: 300px;
+    // max-height: 400px;
+    display: flex;
+    position: absolute;
+    top: 55px;
+    right: 20px;
+    z-index: 13;
+    display: flex;
+    flex-direction: column;
+    .top {
+      width: 100%;
+      height: 12%;
+      border-bottom: 1px solid var(--hlx-border-color);
+      padding: 10px 20px 10px 20px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      position: sticky;
+      font-weight: bold;
+      font-size: var(--hlx-font-content-size-sm);
+      color: var(--hlx-text-color-primary);
+    }
+    .middle {
+      width: 100%;
+      max-height: 300px;
+      overflow: auto;
+      border-bottom: 1px solid var(--hlx-border-color);
+
+      // padding: 20px 0px 10px 0px;
+
+      .contain {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        border-bottom: 1px solid var(--hlx-border-color);
+
+        .icon {
+          margin: 10px 10px 10px 20px;
+
+          i {
+            font-size: var(--hlx-icon-size-sm);
+            color: var(--hlx-text-color-primary);
+          }
+        }
+        .content {
+          display: flex;
+          width: 100%;
+          flex-direction: column;
+          margin-right: 20px;
+          .headerr {
+            display: flex;
+            flex-direction: row;
+            width: 100%;
+            justify-content: space-between;
+            margin-bottom: 5px;
+            .main {
+              font-size: var(--hlx-font-content-size-xs);
+              color: var(--hlx-text-color-primary);
+              font-weight: bold;
+            }
+            .sub {
+              font-size: 10px;
+              color: var(--hlx-text-color-primary);
+            }
+          }
+          .sub-header {
+            font-size: var(--hlx-font-content-size-xs);
+            color: var(--hlx-text-color-primary);
+          }
+        }
+      }
+    }
+    .bottom {
+      width: 100%;
+      height: 12%;
+      padding: 10px 20px 15px 20px;
+      position: sticky;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      position: sticky;
+      font-size: var(--hlx-font-content-size-sm);
+      color: var(--hlx-text-color-primary);
+    }
+  }
+
+  .dashboard-header {
+    width: 100%;
+    height: 60px;
+    background: #fff;
+    z-index: 10;
+    box-shadow: 0px 0px 20px var(--hlx-border-color);
+    position: absolute;
+    display: flex;
+    padding: 20px 20px;
+    align-items: center;
+    justify-content: space-between;
+    .searchh {
+      width: 25%;
+      // height: 30px;
+    }
+    .actions {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-end;
+      width: 28%;
+      div {
+        margin-right: 20px;
+        i {
+          font-size: var(--hlx-icon-size-sm);
+          color: var(--hlx-text-color-primary);
+          cursor: pointer;
+        }
+        img {
+          height: 30px;
+          width: 30px;
+          border-radius: 100%;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  .card-title {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    color: var(--hlx-text-color-primary);
+    font-size: var(--hlx-font-content-size);
+    font-weight: bold;
+
+    margin: 20px;
+  }
+  .card-title1 {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    color: var(--hlx-text-color-primary);
+    font-size: var(--hlx-font-content-size);
+    font-weight: bold;
+
+    margin: 0 20px 20px 0;
+  }
+  .dashboard-body {
+    overflow-y: auto;
+    width: 100%;
+    height: 100%;
+    background: var(--hlx-border-color-light);
+    padding: 20px;
+    &-header-panel {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      height: 120px;
+      .dashboard-body-header {
+        // width: 100%;
+
+        display: flex;
+        align-items: center;
+        color: var(--hlx-text-color-primary);
+        font-size: var(--hlx-font-content-size-lg);
+        font-weight: bold;
+        margin-top: 40px;
+        margin-right: 20px;
+      }
+      .dashboard-body-breadcrumb {
+        // width: 30%;
+        height: 30px;
+        border-left: 1px solid var(--hlx-border-color);
+        margin-top: 66px;
+        display: flex;
+        align-items: center;
+        padding-left: 20px !important;
+      }
+    }
+    .small-cards-container {
+      height: 200px;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 20px;
+      .small-cards {
+        width: 24%;
+        height: 100%;
+        background: white;
+        box-shadow: 0px 0px 5px var(--hlx-border-color);
+        border-radius: 10px;
+        // margin-right: 20px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding-top: 20px;
+        padding-bottom: 20px;
+        .icon-bg {
+          width: 50px;
+          height: 50px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: var(--hlx-border-color-dark);
+          border-radius: 100%;
+          margin-bottom: 10px;
+          i {
+            font-size: var(--hlx-icon-size-sm);
+            color: #fff;
+          }
+        }
+        .card-header {
+          font-size: 25px;
+          font-weight: 600;
+
+          color: var(--hlx-text-color-primary);
+          margin-bottom: 5px;
+        }
+        .card-sub-header {
+          font-size: var(--hlx-font-content-size);
+
+          color: var(--hlx-color-primary-dark);
+          // margin-bottom: 20px;
+        }
+        .card-percentage {
+          font-size: var(--hlx-font-content-size-sm);
+
+          color: var(--hlx-color-primary-dark);
+          display: flex;
+          align-items: center;
+          font-weight: bold;
+          i {
+            color: var(--hlx-color-primary-dark);
+            font-size: var(--hlx-icon-size-xs);
+          }
+        }
+      }
+    }
+    .container-1 {
+      width: 100%;
+      height: auto;
+      // height: 450px;
+      margin-bottom: 20px;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      .left-container-1 {
+        width: 52%;
+        background: white;
+        box-shadow: 0px 0px 5px var(--hlx-border-color);
+        border-radius: 10px;
+        // margin-right: 20px;
+      }
+      .right-container-1 {
+        width: 48%;
+        background: white;
+        box-shadow: 0px 0px 5px var(--hlx-border-color);
+        border-radius: 10px;
+        // margin-right: 20px;
+        .right-container-1-content {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+
+          position: relative;
+          bottom: 0;
+          margin-bottom: 10px;
+
+          &-metric {
+            margin-left: 20px;
+            font-size: var(--hlx-font-content-size-sm);
+            color: var(--hlx-text-color-primary);
+          }
+          &-count {
+            margin-right: 20px;
+            color: #fff;
+            font-weight: bold;
+            font-size: var(--hlx-font-content-size-xs);
+            // padding: 2px;
+            width: 30px;
+            border-radius: 20%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+        }
+        .chartoptions2-content {
+          position: relative;
+          top: -65%;
+          // left: 50%;
+          width: 50%;
+          margin: 0 auto;
+          width: 30%;
+          height: 100px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          color: var(--hlx-text-color-primary);
+          &-total {
+            font-weight: bold;
+            font-size: var(--hlx-font-content-size-lg);
+          }
+          &-title {
+            font-size: var(--hlx-font-content-size-sm);
+          }
+        }
+      }
+    }
+    .container-2 {
+      width: 100%;
+      height: auto;
+      // height: 300px;
+      margin-bottom: 20px;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 2%;
+      .left-container-2 {
+        width: 43%;
+        background: white;
+        box-shadow: 0px 0px 5px var(--hlx-border-color);
+        border-radius: 10px;
+        
+        // margin-right: 20px;
+        .chartoptions2-content {
+          position: relative;
+          top: -53%;
+          right: 17%;
+          width: 50%;
+          margin: 0 auto;
+          // width: 30%;
+          height: 100px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          color: var(--hlx-text-color-primary);
+          &-total {
+            font-weight: bold;
+            font-size: var(--hlx-font-content-size-lg);
+          }
+          &-title {
+            font-size: var(--hlx-font-content-size-sm);
+          }
+        }
+      }
+      .right-container-2 {
+        width: 55%;
+        background: white;
+        box-shadow: 0px 0px 5px var(--hlx-border-color);
+        border-radius: 10px;
+        padding: 20px;
+        .row-container {
+          width: 100%;
+          tr {
+            height: 35px;
+
+            .flag {
+              width: 10%;
+            }
+            .label {
+              width: 20%;
+              text-overflow: ellipsis;
+
+              font-size: var(--hlx-font-content-size);
+            }
+            .percent-num {
+              width: 10%;
+
+              font-size: var(--hlx-font-content-size-sm);
+              padding: 0 10px 0 10px;
+            }
+            .percentage {
+              margin-right: 10px;
+              width: 60%;
+              .grey-container {
+                border-radius: 5px;
+                width: 100%;
+                height: 5px;
+                display: flex;
+                align-items: flex-start;
+                background: var(--hlx-border-color-dark);
+                .inner-container {
+                  border-radius: 6px;
+                  width: 30%;
+                  background: var(--hlx-color-primary);
+                  height: 100%;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    .container-3 {
+      gap: 2%;
+      width: 100%;
+      // height: 500px;
+      height: auto;
+      margin-bottom: 20px;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      .left-container-3 {
+        width: 32%;
+        background: white;
+        box-shadow: 0px 0px 5px var(--hlx-border-color);
+        border-radius: 10px;
+        // margin-right: 20px;
+        padding: 20px;
+        .bottom-container {
+          width: 100%;
+          height: 20%;
+          border: 1px solid var(--hlx-border-color);
+          border-radius: 10px;
+          margin-top: 45px;
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+
+          padding: 15px;
+          .left-bottom-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            .title {
+              font-size: var(--hlx-font-content-size-lg);
+              color: var(--hlx-color-primary);
+              margin-bottom: 15px;
+            }
+            .sub-title {
+              font-size: var(--hlx-font-content-size-sm);
+              color: var(--hlx-text-color-primary);
+            }
+          }
+          .right-bottom-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            .title {
+              font-size: var(--hlx-font-content-size-lg);
+              color: var(--hlx-color-primary)-light;
+              margin-bottom: 15px;
+            }
+            .sub-title {
+              font-size: var(--hlx-font-content-size-sm);
+              color: var(--hlx-text-color-primary);
+            }
+          }
+        }
+      }
+      .middle-container-3 {
+        padding: 20px;
+        width: 32%;
+        background: white;
+        box-shadow: 0px 0px 5px var(--hlx-border-color);
+        border-radius: 10px;
+        // margin-right: 20px;
+
+        color: var(--hlx-text-color-primary);
+
+        .cardd {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+          
+          // width: 70%;
+          // margin: 40px;
+        }
+
+        .cardd .percent {
+          position: relative;
+        }
+
+        .cardd svg {
+          position: relative;
+          width: 210px;
+          height: 210px;
+          max-width: 210px;
+          transform: rotate(-90deg)
+        }
+
+        .cardd svg circle {
+          fill: none;
+          stroke: #f0f0f0;
+          stroke-width: 5%;
+          stroke-linecap: round;
+        }
+
+        .cardd svg circle:last-of-type {
+          stroke-dasharray: 625px;
+          stroke-dashoffset: calc(625px - (625px * var(--percent)) / 100);
+          stroke: var(--hlx-color-primary);
+        }
+
+        .cardd .number {
+          position: absolute;
+          text-align: center;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
+
+        .cardd .number h3 {
+          font-weight: 600;
+          font-size: var(--hlx-font-content-size-lg);
+        }
+        .cardd .number h4 {
+          font-size: var(--hlx-font-content-size-sm);
+        }
+
+        .cardd .number h3 span {
+          font-size: var(--hlx-font-content-size-lg);
+        }
+
+        .cardd .title h2 {
+          margin: 25px 0 0;
+        }
+
+        .cardd:nth-child(1) svg circle:last-of-type {
+          stroke: var(--hlx-color-primary);
+        }
+        .bottom-container {
+          display: flex;
+          flex-direction: column;
+          width: 100%;
+          margin-top: 20px;
+          font-size: var(--hlx-font-content-size-sm);
+
+          .top {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            width: 100%;
+          }
+          .bottom {
+            .grey-container {
+              border-radius: 5px;
+              width: 100%;
+              height: 5px;
+              display: flex;
+              align-items: flex-start;
+              background: var(--hlx-border-color-dark);
+              .inner-container {
+                border-radius: 6px;
+                width: 30%;
+                background: var(--hlx-color-primary);
+                height: 100%;
+              }
+            }
+          }
+        }
+      }
+      .right-container-3 {
+        width: 32%;
+        background: white;
+        box-shadow: 0px 0px 5px var(--hlx-border-color);
+        border-radius: 10px;
+        padding: 20px;
+        // margin-right: 20px;
+        .map {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          margin-bottom: 39%;
+          .tool {
+            width: 10%;
+            height: 70px;
+            // background: red;
+            display: flex;
+            flex-direction: column;
+            div {
+              background: var(--hlx-text-color-primary);
+              height: 50%;
+              width: 100%;
+              margin-bottom: 10px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              border-radius: 5px;
+              i {
+                font-size: var(--hlx-icon-size-xs);
+                color: #fff;
+              }
+            }
+          }
+          .mapp {
+            display: flex;
+            position: relative;
+            flex-direction: row;
+            width: 100%;
+            height: 70%;
+            overflow: scroll;
+            #canvas {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+        .bottom-container {
+          display: flex;
+          flex-direction: column;
+          width: 100%;
+          margin-top: 20px;
+          font-size: var(--hlx-font-content-size-sm);
+
+          .top {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            width: 100%;
+          }
+          .bottom {
+            .grey-container {
+              border-radius: 5px;
+              width: 100%;
+              height: 5px;
+              display: flex;
+              align-items: flex-start;
+              background: var(--hlx-border-color-dark);
+              .inner-container {
+                border-radius: 6px;
+                width: 30%;
+                background: var(--hlx-color-primary);
+                height: 100%;
+              }
+            }
+          }
+        }
+      }
+    }
+    .container-4 {
+      width: 100%;
+      // height: 400px;
+      height: auto;
+      margin-bottom: 20px;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      .left-container-4 {
+        display: flex;
+        flex-direction: column;
+        width: 33%;
+        margin-right: 20px;
+        .left-container-4-1 {
+          width: 100%;
+          height: 50%;
+          background: white;
+          box-shadow: 0px 0px 5px var(--hlx-border-color);
+          border-radius: 10px;
+          display: flex;
+          flex-direction: column;
+          padding: 20px;
+          .icon {
+            background: var(--hlx-color-primary);
+            width: 40px;
+            height: 40px;
+            border-radius: 7px;
+            margin-bottom: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            i {
+              color: #fff;
+              font-size: var(--hlx-icon-size-sm);
+            }
+          }
+          .count {
+            font-size: var(--hlx-font-content-size-lg);
+            color: var(--hlx-text-color-primary);
+            font-weight: bold;
+            margin-bottom: 15px;
+          }
+          .bottom-container {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            margin-top: 10px;
+            font-size: var(--hlx-font-content-size-sm);
+
+            .top {
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+              width: 100%;
+            }
+            .bottom {
+              margin-bottom: 10px;
+              .grey-container {
+                border-radius: 5px;
+                width: 100%;
+                height: 5px;
+                display: flex;
+                align-items: flex-start;
+                background: var(--hlx-border-color-dark);
+                .inner-container {
+                  border-radius: 6px;
+                  width: 30%;
+                  background: var(--hlx-color-primary);
+                  height: 100%;
+                }
+              }
+            }
+          }
+        }
+        .left-container-4-2 {
+          padding: 20px;
+          width: 100%;
+          height: 50%;
+          background: white;
+          box-shadow: 0px 0px 5px var(--hlx-border-color);
+          border-radius: 10px;
+          margin-top: 20px;
+          .icon {
+            background: var(--hlx-color-primary);
+            width: 40px;
+            height: 40px;
+            border-radius: 7px;
+            margin-bottom: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            i {
+              color: #fff;
+              font-size: var(--hlx-icon-size-sm);
+            }
+          }
+          .count {
+            font-size: var(--hlx-font-content-size-lg);
+            color: var(--hlx-text-color-primary);
+            font-weight: bold;
+            margin-bottom: 15px;
+          }
+          .bottom-container {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            margin-top: 10px;
+            font-size: var(--hlx-font-content-size-sm);
+
+            .top {
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+              width: 100%;
+            }
+            .bottom {
+              margin-bottom: 10px;
+              .grey-container {
+                border-radius: 5px;
+                width: 100%;
+                height: 5px;
+                display: flex;
+                align-items: flex-start;
+                background: var(--hlx-border-color-dark);
+                .inner-container {
+                  border-radius: 6px;
+                  width: 30%;
+                  background: var(--hlx-color-primary);
+                  height: 100%;
+                }
+              }
+            }
+          }
+        }
+      }
+      .middle-container-4 {
+        width: 33%;
+        background: white;
+        box-shadow: 0px 0px 5px var(--hlx-border-color);
+        border-radius: 10px;
+        margin-right: 20px;
+      }
+      .right-container-4 {
+        display: flex;
+        flex-direction: column;
+        width: 33%;
+        margin-bottom: 20px;
+        // margin-right: 20px;
+        .right-container-4-1 {
+          width: 100%;
+          height: 50%;
+          background: white;
+          box-shadow: 0px 0px 5px var(--hlx-border-color);
+          border-radius: 10px;
+          display: flex;
+          padding: 20px;
+          flex-direction: column;
+          margin-bottom: 20px;
+          .title {
+            font-size: var(--hlx-font-content-size-sm);
+            color: var(--hlx-text-color-primary);
+          }
+          .count {
+            color: var(--hlx-text-color-primary);
+            font-weight: 600;
+            font-size: var(--hlx-font-content-size-lg);
+            margin: 10px 20px 0 0;
+            .sub-count {
+              font-size: var(--hlx-font-content-size-xs);
+              color: var(--hlx-color-success);
+              margin-left: 10px;
+            }
+          }
+        }
+        .right-container-4-2 {
+          width: 100%;
+          height: 50%;
+          background: white;
+          box-shadow: 0px 0px 5px var(--hlx-border-color);
+          border-radius: 10px;
+          margin-bottom: 20px;
+          display: flex;
+          padding: 20px;
+          flex-direction: column;
+          .title {
+            font-size: var(--hlx-font-content-size-sm);
+            color: var(--hlx-text-color-primary);
+          }
+          .count {
+            color: var(--hlx-text-color-primary);
+            font-weight: 600;
+            font-size: var(--hlx-font-content-size-lg);
+            margin: 10px 20px 0 0;
+            .sub-count {
+              font-size: var(--hlx-font-content-size-xs);
+              color: #ff3642;
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+    .container-5 {
+      flex-wrap: wrap;
+      width: 100%;
+      // height: 570px;
+      height: auto;
+      margin-bottom: 20px;
+      display: flex;
+      flex-direction: column;
+      background: white;
+      box-shadow: 0px 0px 5px var(--hlx-border-color);
+      border-radius: 10px;
+      padding: 20px;
+      // overflow-y: auto;
+      // overflow-x: hidden;
+    }
+  }
+  footer {
+    height: 60px;
+    width: 100%;
+    font-size: var(--hlx-font-content-size-sm);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.component-description-link {
+  color: var(--hlx-color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+  font-size: var(--hlx-font-content-size-sm);
+}
+
+@media only screen and (max-width: 1390px){
+  .dashboard-right-container {
+    font-family: var(--hlx-font-type-content);
+    .link {
+      color: var(--hlx-color-primary);
+      text-decoration: underline;
+      cursor: pointer;
+    }
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: row;
+    .profile-options {
+      background: #fff;
+      border: 1px solid var(--hlx-border-color);
+      border-radius: 10px;
+      box-shadow: 0px 0px 20px var(--hlx-border-color);
+      width: 200px;
+      max-height: 300px;
+      overflow: auto;
+      display: flex;
+      position: absolute;
+      top: 55px;
+      right: 20px;
+      z-index: 13;
+      display: flex;
+      flex-direction: column;
+      .top {
+        width: 100%;
+        height: 25%;
+        border-bottom: 1px solid var(--hlx-border-color);
+        padding: 10px 20px 10px 20px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        div {
+          img {
+            width: 50px;
+            height: 50px;
+            border-radius: 100%;
+            margin-right: 20px;
+            margin-top: 7px;
+          }
+        }
+        .content {
+          display: flex;
+          flex-direction: column;
+          .headerr {
+            font-size: var(--hlx-font-content-size-sm);
+            color: var(--hlx-text-color-primary);
+            font-weight: bold;
+            margin-bottom: 5px;
+          }
+          .sub-header {
+            font-size: var(--hlx-font-content-size-xs);
+            color: var(--hlx-text-color-primary);
+          }
+        }
+      }
+      .middle {
+        width: 100%;
+        height: 60%;
+        border-bottom: 1px solid var(--hlx-border-color);
+        padding: 20px 20px 10px 20px;
+        .content {
+          display: flex;
+          flex-direction: row;
+          width: 100%;
+          margin-bottom: 10px;
+          .icon {
+            width: 10%;
+            margin-right: 10px;
+            i {
+              color: var(--hlx-text-color-primary);
+              font-size: var(--hlx-icon-size-md);
+            }
+          }
+          .item {
+            width: 90%;
+            color: var(--hlx-text-color-primary);
+            font-size: var(--hlx-font-content-size-sm);
+          }
+        }
+      }
+      .bottom {
+        width: 100%;
+        height: 10%;
+        padding: 10px 20px 10px 20px;
+        .content {
+          display: flex;
+          flex-direction: row;
+          width: 100%;
+          .icon {
+            width: 10%;
+            margin-right: 10px;
+            i {
+              color: var(--hlx-text-color-primary);
+              font-size: var(--hlx-icon-size-md);
+            }
+          }
+          .item {
+            width: 90%;
+            color: var(--hlx-text-color-primary);
+            font-size: var(--hlx-font-content-size-sm);
+          }
+        }
+      }
+    }
+    .notifications {
+      background: #fff;
+      border: 1px solid var(--hlx-border-color);
+      border-radius: 10px;
+      box-shadow: 0px 0px 20px var(--hlx-border-color);
+      width: 300px;
+      // max-height: 400px;
+      display: flex;
+      position: absolute;
+      top: 55px;
+      right: 20px;
+      z-index: 13;
+      display: flex;
+      flex-direction: column;
+      .top {
+        width: 100%;
+        height: 12%;
+        border-bottom: 1px solid var(--hlx-border-color);
+        padding: 10px 20px 10px 20px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        position: sticky;
+        font-weight: bold;
+        font-size: var(--hlx-font-content-size-sm);
+        color: var(--hlx-text-color-primary);
+      }
+      .middle {
+        width: 100%;
+        max-height: 300px;
+        overflow: auto;
+        border-bottom: 1px solid var(--hlx-border-color);
+  
+        // padding: 20px 0px 10px 0px;
+  
+        .contain {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          border-bottom: 1px solid var(--hlx-border-color);
+  
+          .icon {
+            margin: 10px 10px 10px 20px;
+  
+            i {
+              font-size: var(--hlx-icon-size-sm);
+              color: var(--hlx-text-color-primary);
+            }
+          }
+          .content {
+            display: flex;
+            width: 100%;
+            flex-direction: column;
+            margin-right: 20px;
+            .headerr {
+              display: flex;
+              flex-direction: row;
+              width: 100%;
+              justify-content: space-between;
+              margin-bottom: 5px;
+              .main {
+                font-size: var(--hlx-font-content-size-xs);
+                color: var(--hlx-text-color-primary);
+                font-weight: bold;
+              }
+              .sub {
+                font-size: 10px;
+                color: var(--hlx-text-color-primary);
+              }
+            }
+            .sub-header {
+              font-size: var(--hlx-font-content-size-xs);
+              color: var(--hlx-text-color-primary);
+            }
+          }
+        }
+      }
+      .bottom {
+        width: 100%;
+        height: 12%;
+        padding: 10px 20px 15px 20px;
+        position: sticky;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        position: sticky;
+        font-size: var(--hlx-font-content-size-sm);
+        color: var(--hlx-text-color-primary);
+      }
+    }
+  
+    .dashboard-header {
+      width: 100%;
+      height: 60px;
+      background: #fff;
+      z-index: 10;
+      box-shadow: 0px 0px 20px var(--hlx-border-color);
+      position: absolute;
+      display: flex;
+      padding: 20px 20px;
+      align-items: center;
+      justify-content: space-between;
+      .searchh {
+        width: 25%;
+        // height: 30px;
+      }
+      .actions {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-end;
+        width: 28%;
+        div {
+          margin-right: 20px;
+          i {
+            font-size: var(--hlx-icon-size-sm);
+            color: var(--hlx-text-color-primary);
+            cursor: pointer;
+          }
+          img {
+            height: 30px;
+            width: 30px;
+            border-radius: 100%;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  
+    .card-title {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      color: var(--hlx-text-color-primary);
+      font-size: var(--hlx-font-content-size);
+      font-weight: bold;
+  
+      margin: 20px;
+    }
+    .card-title1 {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      color: var(--hlx-text-color-primary);
+      font-size: var(--hlx-font-content-size);
+      font-weight: bold;
+  
+      margin: 0 20px 20px 0;
+    }
+    .dashboard-body {
+      overflow-y: auto;
+      width: 100%;
+      height: 100%;
+      background: var(--hlx-border-color-light);
+      padding: 20px;
+      &-header-panel {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        height: 120px;
+        .dashboard-body-header {
+          // width: 100%;
+  
+          display: flex;
+          align-items: center;
+          color: var(--hlx-text-color-primary);
+          font-size: var(--hlx-font-content-size-lg);
+          font-weight: bold;
+          margin-top: 40px;
+          margin-right: 20px;
+        }
+        .dashboard-body-breadcrumb {
+          // width: 30%;
+          height: 30px;
+          border-left: 1px solid var(--hlx-border-color);
+          margin-top: 66px;
+          display: flex;
+          align-items: center;
+          padding-left: 20px !important;
+        }
+      }
+      .small-cards-container {
+        height: auto;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 20px;
+        flex-wrap: wrap;
+        gap: 20px;
+        .small-cards {
+          width: 45%;
+          height: 100%;
+          background: white;
+          box-shadow: 0px 0px 5px var(--hlx-border-color);
+          border-radius: 10px;
+          // margin-right: 20px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          padding-top: 20px;
+          padding-bottom: 20px;
+          .icon-bg {
+            width: 50px;
+            height: 50px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: var(--hlx-border-color-dark);
+            border-radius: 100%;
+            margin-bottom: 10px;
+            i {
+              font-size: var(--hlx-icon-size-sm);
+              color: #fff;
+            }
+          }
+          .card-header {
+            font-size: 25px;
+            font-weight: 600;
+  
+            color: var(--hlx-text-color-primary);
+            margin-bottom: 5px;
+          }
+          .card-sub-header {
+            font-size: var(--hlx-font-content-size);
+  
+            color: var(--hlx-color-primary-dark);
+            // margin-bottom: 20px;
+          }
+          .card-percentage {
+            font-size: var(--hlx-font-content-size-sm);
+  
+            color: var(--hlx-color-primary-dark);
+            display: flex;
+            align-items: center;
+            font-weight: bold;
+            i {
+              color: var(--hlx-color-primary-dark);
+              font-size: var(--hlx-icon-size-xs);
+            }
+          }
+        }
+      }
+      .container-1 {
+        width: 100%;
+        height: auto;
+        gap: 20px;
+        // height: 450px;
+        margin-bottom: 20px;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        .left-container-1 {
+          width: 100%;
+          background: white;
+          box-shadow: 0px 0px 5px var(--hlx-border-color);
+          border-radius: 10px;
+          // margin-right: 20px;
+        }
+        .right-container-1 {
+          width: 100%;
+          background: white;
+          box-shadow: 0px 0px 5px var(--hlx-border-color);
+          border-radius: 10px;
+          // margin-right: 20px;
+          .right-container-1-content {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+  
+            position: relative;
+            bottom: 0;
+            margin-bottom: 10px;
+  
+            &-metric {
+              margin-left: 20px;
+              font-size: var(--hlx-font-content-size-sm);
+              color: var(--hlx-text-color-primary);
+            }
+            &-count {
+              margin-right: 20px;
+              color: #fff;
+              font-weight: bold;
+              font-size: var(--hlx-font-content-size-xs);
+              // padding: 2px;
+              width: 30px;
+              border-radius: 20%;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            }
+          }
+          .chartoptions2-content {
+            position: relative;
+            top: -65%;
+            // left: 50%;
+            width: 50%;
+            margin: 0 auto;
+            width: 30%;
+            height: 100px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            color: var(--hlx-text-color-primary);
+            &-total {
+              font-weight: bold;
+              font-size: var(--hlx-font-content-size-lg);
+            }
+            &-title {
+              font-size: var(--hlx-font-content-size-sm);
+            }
+          }
+        }
+      }
+      .container-2 {
+        width: 100%;
+        height: auto;
+        // height: 300px;
+        margin-bottom: 20px;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 20px;
+        .left-container-2 {
+          width: 100%;
+          background: white;
+          box-shadow: 0px 0px 5px var(--hlx-border-color);
+          border-radius: 10px;
+          
+          // margin-right: 20px;
+          .chartoptions2-content {
+            position: relative;
+            top: -53%;
+            right: 17%;
+            width: 50%;
+            margin: 0 auto;
+            // width: 30%;
+            height: 100px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            color: var(--hlx-text-color-primary);
+            &-total {
+              font-weight: bold;
+              font-size: var(--hlx-font-content-size-lg);
+            }
+            &-title {
+              font-size: var(--hlx-font-content-size-sm);
+            }
+          }
+        }
+        .right-container-2 {
+          width: 100%;
+          background: white;
+          box-shadow: 0px 0px 5px var(--hlx-border-color);
+          border-radius: 10px;
+          padding: 20px;
+          .row-container {
+            width: 100%;
+            tr {
+              height: 35px;
+  
+              .flag {
+                width: 10%;
+              }
+              .label {
+                width: 20%;
+                text-overflow: ellipsis;
+  
+                font-size: var(--hlx-font-content-size);
+              }
+              .percent-num {
+                width: 10%;
+  
+                font-size: var(--hlx-font-content-size-sm);
+                padding: 0 10px 0 10px;
+              }
+              .percentage {
+                margin-right: 10px;
+                width: 60%;
+                .grey-container {
+                  border-radius: 5px;
+                  width: 100%;
+                  height: 5px;
+                  display: flex;
+                  align-items: flex-start;
+                  background: var(--hlx-border-color-dark);
+                  .inner-container {
+                    border-radius: 6px;
+                    width: 30%;
+                    background: var(--hlx-color-primary);
+                    height: 100%;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      .container-3 {
+        gap: 20px;
+        width: 100%;
+        // height: 500px;
+        height: auto;
+        margin-bottom: 20px;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        .left-container-3 {
+          width: 100%;
+          background: white;
+          box-shadow: 0px 0px 5px var(--hlx-border-color);
+          border-radius: 10px;
+          // margin-right: 20px;
+          padding: 20px;
+          .bottom-container {
+            width: 100%;
+            height: 20%;
+            border: 1px solid var(--hlx-border-color);
+            border-radius: 10px;
+            margin-top: 45px;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+  
+            padding: 15px;
+            .left-bottom-container {
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              .title {
+                font-size: var(--hlx-font-content-size-lg);
+                color: var(--hlx-color-primary);
+                margin-bottom: 15px;
+              }
+              .sub-title {
+                font-size: var(--hlx-font-content-size-sm);
+                color: var(--hlx-text-color-primary);
+              }
+            }
+            .right-bottom-container {
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              .title {
+                font-size: var(--hlx-font-content-size-lg);
+                color: var(--hlx-color-primary)-light;
+                margin-bottom: 15px;
+              }
+              .sub-title {
+                font-size: var(--hlx-font-content-size-sm);
+                color: var(--hlx-text-color-primary);
+              }
+            }
+          }
+        }
+        .middle-container-3 {
+          padding: 20px;
+          width: 100%;
+          background: white;
+          box-shadow: 0px 0px 5px var(--hlx-border-color);
+          border-radius: 10px;
+          // margin-right: 20px;
+  
+          color: var(--hlx-text-color-primary);
+  
+          .cardd {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            
+            // width: 70%;
+            // margin: 40px;
+          }
+  
+          .cardd .percent {
+            position: relative;
+          }
+  
+          .cardd svg {
+            position: relative;
+            width: 210px;
+            height: 210px;
+            max-width: 210px;
+            transform: rotate(-90deg)
+          }
+  
+          .cardd svg circle {
+            fill: none;
+            stroke: #f0f0f0;
+            stroke-width: 5%;
+            stroke-linecap: round;
+          }
+  
+          .cardd svg circle:last-of-type {
+            stroke-dasharray: 625px;
+            stroke-dashoffset: calc(625px - (625px * var(--percent)) / 100);
+            stroke: var(--hlx-color-primary);
+          }
+  
+          .cardd .number {
+            position: absolute;
+            text-align: center;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+          }
+  
+          .cardd .number h3 {
+            font-weight: 600;
+            font-size: var(--hlx-font-content-size-lg);
+          }
+          .cardd .number h4 {
+            font-size: var(--hlx-font-content-size-sm);
+          }
+  
+          .cardd .number h3 span {
+            font-size: var(--hlx-font-content-size-lg);
+          }
+  
+          .cardd .title h2 {
+            margin: 25px 0 0;
+          }
+  
+          .cardd:nth-child(1) svg circle:last-of-type {
+            stroke: var(--hlx-color-primary);
+          }
+          .bottom-container {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            margin-top: 20px;
+            font-size: var(--hlx-font-content-size-sm);
+  
+            .top {
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+              width: 100%;
+            }
+            .bottom {
+              .grey-container {
+                border-radius: 5px;
+                width: 100%;
+                height: 5px;
+                display: flex;
+                align-items: flex-start;
+                background: var(--hlx-border-color-dark);
+                .inner-container {
+                  border-radius: 6px;
+                  width: 30%;
+                  background: var(--hlx-color-primary);
+                  height: 100%;
+                }
+              }
+            }
+          }
+        }
+        .right-container-3 {
+          width: 100%;
+          background: white;
+          box-shadow: 0px 0px 5px var(--hlx-border-color);
+          border-radius: 10px;
+          padding: 20px;
+          // margin-right: 20px;
+          .map {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            margin-bottom: 39%;
+            .tool {
+              width: 10%;
+              height: 70px;
+              // background: red;
+              display: flex;
+              flex-direction: column;
+              div {
+                background: var(--hlx-text-color-primary);
+                height: 50%;
+                width: 100%;
+                margin-bottom: 10px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 5px;
+                i {
+                  font-size: var(--hlx-icon-size-xs);
+                  color: #fff;
+                }
+              }
+            }
+            .mapp {
+              display: flex;
+              position: relative;
+              flex-direction: row;
+              width: 100%;
+              height: 70%;
+              overflow: scroll;
+              #canvas {
+                width: 100%;
+                height: 100%;
+              }
+            }
+          }
+          .bottom-container {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            margin-top: 20px;
+            font-size: var(--hlx-font-content-size-sm);
+  
+            .top {
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+              width: 100%;
+            }
+            .bottom {
+              .grey-container {
+                border-radius: 5px;
+                width: 100%;
+                height: 5px;
+                display: flex;
+                align-items: flex-start;
+                background: var(--hlx-border-color-dark);
+                .inner-container {
+                  border-radius: 6px;
+                  width: 30%;
+                  background: var(--hlx-color-primary);
+                  height: 100%;
+                }
+              }
+            }
+          }
+        }
+      }
+      .container-4 {
+        width: 100%;
+        gap: 20px;
+        // height: 400px;
+        height: auto;
+        margin-bottom: 20px;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        .left-container-4 {
+          display: flex;
+          flex-direction: column;
+          width: 100%;
+          margin-right: 0px;
+          .left-container-4-1 {
+            width: 100%;
+            height: 50%;
+            background: white;
+            box-shadow: 0px 0px 5px var(--hlx-border-color);
+            border-radius: 10px;
+            display: flex;
+            flex-direction: column;
+            padding: 20px;
+            .icon {
+              background: var(--hlx-color-primary);
+              width: 40px;
+              height: 40px;
+              border-radius: 7px;
+              margin-bottom: 20px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              i {
+                color: #fff;
+                font-size: var(--hlx-icon-size-sm);
+              }
+            }
+            .count {
+              font-size: var(--hlx-font-content-size-lg);
+              color: var(--hlx-text-color-primary);
+              font-weight: bold;
+              margin-bottom: 15px;
+            }
+            .bottom-container {
+              display: flex;
+              flex-direction: column;
+              width: 100%;
+              margin-top: 10px;
+              font-size: var(--hlx-font-content-size-sm);
+  
+              .top {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+                width: 100%;
+              }
+              .bottom {
+                margin-bottom: 10px;
+                .grey-container {
+                  border-radius: 5px;
+                  width: 100%;
+                  height: 5px;
+                  display: flex;
+                  align-items: flex-start;
+                  background: var(--hlx-border-color-dark);
+                  .inner-container {
+                    border-radius: 6px;
+                    width: 30%;
+                    background: var(--hlx-color-primary);
+                    height: 100%;
+                  }
+                }
+              }
+            }
+          }
+          .left-container-4-2 {
+            padding: 20px;
+            width: 100%;
+            height: 50%;
+            background: white;
+            box-shadow: 0px 0px 5px var(--hlx-border-color);
+            border-radius: 10px;
+            margin-top: 20px;
+            .icon {
+              background: var(--hlx-color-primary);
+              width: 40px;
+              height: 40px;
+              border-radius: 7px;
+              margin-bottom: 20px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              i {
+                color: #fff;
+                font-size: var(--hlx-icon-size-sm);
+              }
+            }
+            .count {
+              font-size: var(--hlx-font-content-size-lg);
+              color: var(--hlx-text-color-primary);
+              font-weight: bold;
+              margin-bottom: 15px;
+            }
+            .bottom-container {
+              display: flex;
+              flex-direction: column;
+              width: 100%;
+              margin-top: 10px;
+              font-size: var(--hlx-font-content-size-sm);
+  
+              .top {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+                width: 100%;
+              }
+              .bottom {
+                margin-bottom: 10px;
+                .grey-container {
+                  border-radius: 5px;
+                  width: 100%;
+                  height: 5px;
+                  display: flex;
+                  align-items: flex-start;
+                  background: var(--hlx-border-color-dark);
+                  .inner-container {
+                    border-radius: 6px;
+                    width: 30%;
+                    background: var(--hlx-color-primary);
+                    height: 100%;
+                  }
+                }
+              }
+            }
+          }
+        }
+        .middle-container-4 {
+          width: 100%;
+          background: white;
+          box-shadow: 0px 0px 5px var(--hlx-border-color);
+          border-radius: 10px;
+          margin-right: 0px;
+        }
+        .right-container-4 {
+          display: flex;
+          flex-direction: column;
+          width: 100%;
+          // margin-bottom: 20px;
+          margin-right: 0px;
+          .right-container-4-1 {
+            width: 100%;
+            height: 50%;
+            background: white;
+            box-shadow: 0px 0px 5px var(--hlx-border-color);
+            border-radius: 10px;
+            display: flex;
+            padding: 20px;
+            flex-direction: column;
+            // margin-bottom: 20px;
+            .title {
+              font-size: var(--hlx-font-content-size-sm);
+              color: var(--hlx-text-color-primary);
+            }
+            .count {
+              color: var(--hlx-text-color-primary);
+              font-weight: 600;
+              font-size: var(--hlx-font-content-size-lg);
+              margin: 10px 20px 0 0;
+              .sub-count {
+                font-size: var(--hlx-font-content-size-xs);
+                color: var(--hlx-color-success);
+                margin-left: 10px;
+              }
+            }
+          }
+          .right-container-4-2 {
+            width: 100%;
+            height: 50%;
+            background: white;
+            box-shadow: 0px 0px 5px var(--hlx-border-color);
+            border-radius: 10px;
+            // margin-bottom: 20px;
+            display: flex;
+            padding: 20px;
+            flex-direction: column;
+            .title {
+              font-size: var(--hlx-font-content-size-sm);
+              color: var(--hlx-text-color-primary);
+            }
+            .count {
+              color: var(--hlx-text-color-primary);
+              font-weight: 600;
+              font-size: var(--hlx-font-content-size-lg);
+              margin: 10px 20px 0 0;
+              .sub-count {
+                font-size: var(--hlx-font-content-size-xs);
+                color: #ff3642;
+                margin-left: 10px;
+              }
+            }
+          }
+        }
+      }
+      .container-5 {
+        flex-wrap: wrap;
+        width: 100%;
+        overflow: auto;
+        // height: 570px;
+        height: auto;
+        margin-bottom: 20px;
+        display: flex;
+        flex-direction: column;
+        background: white;
+        box-shadow: 0px 0px 5px var(--hlx-border-color);
+        border-radius: 10px;
+        padding: 20px;
+        // overflow-y: auto;
+        // overflow-x: hidden;
+      }
+    }
+    footer {
+      height: 60px;
+      width: 100%;
+      font-size: var(--hlx-font-content-size-sm);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+}