:root {
      --gray1: #F9F9FB;
      --gray3: #DBDBE5;
      --gray7: #585874;
      --gray9: #202037;
      --gray10: #111122;
      --violet1: #EBEDFF;
      --violet5: #4E4EE4;
      --violet6: #3237B3;
      --violet7: #1D188B;
      --white: #FFFFFF;
}

@@font-face {
      font-family: Ubuntu;
      /*TODO: font path*/
      src: url("/fonts/Ubuntu-Regular.ttf");
      font-weight: 400;
      font-style: normal;
      font-stretch: normal;
      font-variant: normal;
}

@@font-face {
      font-family: Ubuntu;
      /*TODO: font path*/
      src: url("/fonts/Ubuntu-Medium.ttf");
      font-weight: 500;
      font-style: normal;
      font-stretch: normal;
      font-variant: normal;
}

html {
      height: 100% !important;
}

body {
      font-family: 'Ubuntu', sans-serif;
      height: 100% !important;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      background-color: var(--gray1);
}

h2 {
      font-weight: 500;
      font-size: 18px;
      line-height: 20px;
      letter-spacing: 0.001em;
      color: var(--gray9);
}

a {
      text-decoration: none;
}

.md-corner-icon {
      position: absolute;
      top: 32px;
      left: 32px;
      height: 53px;
      width: 163px;
}

.md-main {
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 60%;
      max-height: 70%;
}

.md-main__title {
      margin-top: 24px;
}

.md-main__grid {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
}

.md-dashboard-item {
      border: 1px solid var(--gray3);
      background-color: var(--white);
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.3s ease;
      padding: 16px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      margin: 8px;
      max-height: 120px;
      min-width: 100px;
      max-width: 220px;
}

.md-dashboard-item:hover {
      background-color: var(--violet1);
}

.md-dashboard-item__title {
      font-weight: 500;
      font-size: 14px;
      line-height: 16px;
      color: var(--gray10);
      flex-shrink: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
}

.md-dashboard-item__description {
      --desc-max-lines: 4;
      font-weight: 400;
      font-size: 12px;
      line-height: 14px;
      color: var(--gray7);
      /*text-align: center;*/
      margin-top: 8px;
      /*margin-bottom: 16px;*/
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: var(--desc-max-lines);
      overflow: hidden;
}