#blazor-error-ui {
     font-family: "Roboto Mono", monospace;
     font-size: 24px;
     box-sizing: border-box;
     user-select: none;
     position: fixed;
     width: 35%;
     left: 35%;
     text-align: center;
     margin-bottom: 50px;
     background: #ffe500;
     color: #000;
     line-height: 50px;
     border-radius: 25px;
}

.reload {
     width: 20%;
     padding: 10px;
     color: white !important;
     background-color: black;
     border-radius: 25px;
     text-align: center;
     text-decoration: none !important;
}

#verysmall svg.mud-icon-size-medium {
     font-size: 0.75em;
}

#table_formatting td.mud-table-cell {
     padding: 0 !important;
}

.table-with-group td:first-child {
     width: 0px;
}

.lower-expansion-panel-content-padding div.mud-expand-panel-content {
     padding: 0px 4px 0px 4px !important;
}

.mud-file-upload {
     margin-top: 0 !important;
}

.main-category-extension-panel {
     /*background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(255,255,255,1) 5%);*/
     overflow: hidden;
}

     .main-category-extension-panel.header-image > .mud-expand-panel-header {
          /*background-image: url(blood2.png);*/
          background-repeat: repeat-x;
          background-size: contain;
     }

     .main-category-extension-panel.header-microlesson-image > .mud-expand-panel-header {
          background-image: url(pb.png);
          background-repeat: repeat-x;
          background-size: contain;
     }

     .main-category-extension-panel.header-image .mud-expand-panel-header {
          padding: 2px;
     }

          .main-category-extension-panel.header-image .mud-expand-panel-header h6 {
               padding: 8px 0;
          }

     .main-category-extension-panel .mud-expand-panel-header > svg.mud-icon-root {
          margin-right: 20px;
     }

.expand-panel-wrapper .mud-panel-expanded {
     border-bottom: solid !important;
     border-bottom-width: 1px !important;
}

.expand-panel-wrapper .mud-expand-panel:last-child {
     border-bottom: solid !important;
     border-bottom-width: 1px !important;
}

iframe#lesson {
     position: fixed;
     left: 0;
     top: 0;
     width: 100vw;
}

.no-selection {
     -webkit-touch-callout: none; /* iOS Safari */
     -webkit-user-select: none; /* Safari */
     -moz-user-select: none; /* Old versions of Firefox */
     -ms-user-select: none; /* Internet Explorer/Edge */
     user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.commentSection {
     user-select: none;
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     z-index: 9999999;
}

     .commentSection:hover {
          border: 4px solid #e79829;
          transition: 0.1s;
     }

.commentSection-selected .commentSection {
     border: 4px;
     border-color: var(--mud-palette-primary);
     border-style: solid;
     pointer-events: none;
     -webkit-touch-callout: initial; /* iOS Safari */
     -webkit-user-select: initial; /* Safari */
     -moz-user-select: initial; /* Old versions of Firefox */
     -ms-user-select: initial; /* Internet Explorer/Edge */
     user-select: initial; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.commentCounter {
     border: 2px;
     border-radius: 50%;
     border-style: solid;
     top: 20px;
     left: 20px;
     position: absolute;
     width: 40px;
     height: 40px;
     text-align: center;
     line-height: 35px;
     z-index: 9999999;

     font-weight: bold;
     color: white;
     background-color: black;
}

.commentCounter--unseen {
     color: black;
     background-color: yellow;
}

.commentPanel {
     overflow-y: auto;
     overflow-x: hidden;
     scroll-behavior: smooth;
     height: 100%;
}

a {
     color: var(--mud-palette-info);
     text-decoration: none;
}

.mentioned {
     display: inline;
     color: var(--mud-palette-success);
}

     .mentioned:hover {
          background-color: var(--mud-palette-primary);
          opacity: 0.85;
          transition: 0.2s;
     }

a:hover {
     opacity: 0.85;
     transition: 0.1s;
}

.slide-in {
     animation: slide-in 0.5s forwards;
     -webkit-animation: slide-in 0.5s forwards;
}

.slide-out {
     animation: slide-out 0.5s forwards;
     -webkit-animation: slide-out 0.5s forwards;
}

@keyframes slide-in {
     0% {
          transform: translateX(150%);
     }

     100% {
          transform: translateX(0%);
     }
}

@-webkit-keyframes slide-in {
     0% {
          transform: translateX(150%);
     }

     100% {
          -webkit-transform: translateX(0%);
     }
}

@keyframes slide-out {
     0% {
          transform: translateX(0%);
     }

     100% {
          transform: translateX(150%);
     }
}

@-webkit-keyframes slide-out {
     0% {
          -webkit-transform: translateX(0%);
     }

     100% {
          -webkit-transform: translateX(150%);
     }
}

.commentBubble button {
     opacity: 100%;
}

.commentBubble:hover button {
     opacity: 100%;
     transition: .2s;
}

.commentBubble-selected {
     border: 2px solid var(--mud-palette-primary);
}

@media screen and (min-width: 1280px) {
     .mainlayout {
          display: flex;
     }

     .mainlayout-left {
          width: 15%;
     }

     .mainlayout-right {
          width: 15%;
     }

     .appBar {
          visibility: hidden;
          width: 0;
          height: 0;
     }
}

@media screen and (max-width: 1280px) {
     .mainlayout {
          padding-top: 0;
     }

     .mainlayout-left {
          width: 0%;
          visibility: hidden;
     }

     .mainlayout-right {
          width: 0%;
          visibility: hidden;
     }

     .appBar {
          visibility: visible;
          height: 2%;
     }

     .hide-on-small-size {
          visibility: hidden;
          display: none;
          height: 0;
     }
}

.mud-table-row-very-small .mud-table-cell {
     padding-inline-end: 0px !important;
}

.mud-table-small-cells .mud-table-cell {
     padding-top: 2px !important;
     padding-bottom: 2px !important;
}

.comment_images_gallery .nGY2Gallery {
     text-align: left !important;
}

.mud-tooltip-root .mud-popover-cascading-value {
     max-width: 100px;
}

.mud-drop-item {
     cursor: default !important;
}