+ my-global-icon {
+ width: 22px;
+ opacity: .7;
+
+ margin-right: 10px;
+ position: relative;
+ top: -2px;
+ }
+}
+
+@mixin progressbar {
+ background-color: $grey-background-color;
+ display: flex;
+ height: 1rem;
+ overflow: hidden;
+ font-size: 0.75rem;
+ border-radius: 0.25rem;
+
+ .progress-bar {
+ color: var(--mainBackgroundColor);
+ background-color: var(--mainColor);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ text-align: center;
+ white-space: nowrap;
+ transition: width 0.6s ease;
+
+ &.secondary {
+ background-color: var(--secondaryColor);
+ }
+ }
+}
+
+@mixin breadcrumb {
+ display: flex;
+ flex-wrap: wrap;
+ padding: 0.75rem 1rem;
+ margin-bottom: 1rem;
+ list-style: none;
+ background-color: var(--submenuColor);
+ border-radius: 0.25rem;
+
+ .breadcrumb-item {
+ display: flex;
+
+ a {
+ color: var(--mainColor);
+ }
+
+ & + .breadcrumb-item {
+ padding-left: 0.5rem;
+ &::before {
+ display: inline-block;
+ padding-right: 0.5rem;
+ color: #6c757d;
+ content: "/";
+ }
+ }
+
+ &.active {
+ color: #6c757d;
+ }
+ }
+}
+
+@mixin dashboard {
+ display: flex;
+ flex-wrap: wrap;
+ margin: 0 -5px;
+
+ & > div {
+ box-sizing: border-box;
+ flex: 0 0 percentage(1/3);
+ padding: 0 5px;
+ margin-bottom: 10px;
+
+ & > a {
+ text-decoration: none;
+ color: inherit;
+ display: block;
+ font-size: 18px;
+
+ &:active,
+ &:focus,
+ &:hover {
+ opacity: .8;
+ }
+ }
+
+ & > a,
+ & > div {
+ padding: 20px;
+ background: var(--submenuColor);
+ border-radius: 4px;
+ box-sizing: border-box;
+ height: 100%;
+ }
+ }
+
+ .dashboard-num, .dashboard-text {
+ text-align: center;
+ font-size: 130%;
+ line-height: 21px;
+ color: var(--mainForegroundColor);
+ line-height: 30px;