+ flex-direction: column;
+ justify-content: center;
+ text-align: center;
+ white-space: nowrap;
+ transition: width 0.6s ease;
+
+ &.secondary {
+ background-color: pvar(--secondaryColor);
+ }
+
+ &.red {
+ background-color: lighten($color: #c54130, $amount: 10);
+ }
+ }
+}
+
+@mixin breadcrumb {
+ display: flex;
+ flex-wrap: wrap;
+ padding: 0.75rem 1rem;
+ margin-bottom: 1rem;
+ list-style: none;
+ background-color: pvar(--submenuBackgroundColor);
+ border-radius: 0.25rem;
+
+ .breadcrumb-item {
+ display: flex;
+
+ a {
+ color: pvar(--mainColor);
+ }
+
+ + .breadcrumb-item {
+ @include padding-left(0.5rem);
+
+ &::before {
+ @include padding-right(0.5rem);
+
+ display: inline-block;
+ 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 {
+ @include disable-default-a-behaviour;
+
+ text-decoration: none;
+ color: inherit;
+ display: block;
+ font-size: 18px;
+
+ &:active,
+ &:focus,
+ &:hover {
+ opacity: .8;
+ }
+ }
+
+ > a,
+ > div {
+ padding: 20px;
+ background: pvar(--submenuBackgroundColor);
+ border-radius: 4px;
+ box-sizing: border-box;
+ height: 100%;
+ }
+ }
+
+ .dashboard-num,
+ .dashboard-text {
+ text-align: center;
+ font-size: 130%;
+ color: pvar(--mainForegroundColor);
+ line-height: 30px;