html {
   height:100%;
}
body {
   font-family:"Roboto",sans-serif;
   font-size:14pt;
   height:100%;
}

.spinner {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /*position:absolute;
  top:0;
  bottom:0;*/
}

.main-area {
   padding:20px;
   position:relative;
}

.main-area-task {
   padding:10px;
   display:-webkit-flex;
   -webkit-flex-direction:row;
   -webkit-flex-wrap:wrap;
   display:flex;
   flex-direction:row;
   flex-wrap:wrap;
}

.first-task {
   -webkit-flex: 1 1 auto;
   flex: 1 1 auto;
}

.second-task {
   -webkit-flex: 1 1 auto;
   flex: 1 1 auto;
}

.task-tab {
   margin-bottom: -1px;
   position: relative;
   display: inline-block;
   line-height: 1.42857143;
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   transition: all 250ms;
   margin-right: 2px;
   border-radius: 4px 4px 0 0;
   padding: 10px 15px;
}
.task-tab:not(.task-tab-selected) {
   cursor: pointer;
}
.task-tab.task-tab-selected {
   cursor: default;
}
.task-tab.task-tab-disabled {
   cursor: not-allowed;
}

.main-titlebar {
   display:-webkit-flex;
   -webkit-flex-wrap: nowrap;
   display:flex;
   flex-wrap: nowrap;
   align-items: stretch;
}
.mobile-layout .main-titlebar {
   width: 100vw;
}

.main-titlebar-item {
   line-height:1;
   vertical-align:middle;
}

.main-titlebar-icon {
   display:-webkit-flex;
   display: flex;
   align-items: center;
   font-size: 63px;
   font-size: 36px;
   -webkit-flex: 0 0 56px;
   flex: 0 0 56px;
   justify-content: center;
}
.mobile-layout .main-titlebar-icon {
   font-size: 24px;
   -webkit-flex: 0 0 36px;
   flex: 0 0 36px;
}
.main-titlebar-titles {
   -webkit-flex: 1 1 auto;
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   font-size: 24px;
   padding-top: 10px;
   padding-bottom: 10px;
}

.main-titlebar-title1 {
   font-weight:bold;
   font-size: 28px;
}

.mobile-layout .main-titlebar-titles {
   font-size: 16px;
   padding-left: 5px;
   padding-right: 5px;
}
.mobile-layout .main-titlebar-title1 {
   font-size: 18px;
}
.mobile-layout .main-titlebar .menu-toggle {
   margin-right: 9px;
   align-self: center;
}

.menubar-userinfos {
   font-weight:bold;
   font-size:20pt;
   float:right;
   margin-right:20px;
   margin-top:10px;
}

.main-titlebar-icon1 {
   -webkit-flex: 0 0 50px;
   flex: 0 0 50px;
   font-size:40px;
}

.main-titlebar-icon2 {
   -webkit-flex: 0 0 50px;
   flex: 0 0 50px;
}

.main-titlebar-community-toggled {
   display:block !important;
}

.main-titlebar-community {
   display:none;
   flex: 0 0 75px;
   -webkit-flex: 0 0 75px;
   font-size:40px;
   text-align:center;
   z-index:2;
}

@media all and (max-width: 1100px) {
   .main-titlebar-community {
      display:block !important;
   }

   .main-titlebar-community-toggled {
      display:none !important;
   }
}

.main-titlebar-left-sidebar {
   flex: 0 0 100px;
   -webkit-flex: 0 0 100px;
/*   display:none;*/
}

.main-titlebar-right-sidebar {
   -webkit-flex: 0 0 100px;
   flex: 0 0 100px;
/*   display:none;*/
}

.children-list-container {
   display: -webkit-flex;
   -webkit-flex-direction: row;
   display: flex;
   flex-direction: row;
}
.children-list-left-margin,
.children-list-right-margin  {
   -webkit-flex: 1 1 0;
   flex: 1 1 0;
}
@media all and (max-width: 1100px) {
   .children-list-left-margin,
   .children-list-right-margin {
      -webkit-flex: 0 0 0px;
      flex: 0 0 0px;
   }
}
.children-list {
   -webkit-flex: 6 1 0;
   flex: 6 1 0;
   display:-webkit-flex;
   display:flex;
   -webkit-flex-direction:column;
   flex-direction:column;
   -webkit-justify-content:space-between;
   justify-content:space-between;
}

.children-item {
   -webkit-flex: 1 0 auto;
   flex: 1 0 auto;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-justify-content: center;
   justify-content: center;
}

.children-level {
  -webkit-flex: 1 0 auto;
  display: -webkit-flex;
  -webkit-flex-direction: column;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.material-btn {
  cursor: pointer;
  display: inline-flex;
  vertical-align: middle;
}

.chapter-editor .drag-ctrl {
  cursor: move;
}

.chapter-editor .children-item-row {
  display: flex;
  justify-content: space-between;
}

.chapter-editor .children-item-div {
  display: inline-block;
  vertical-align: baseline;
  line-height: 1em;
}

.chapter-editor .children-item-more {
  margin-left: 24px;
}

.chapter-editor .children-item-links {
  font-size: 14px;
}

.forum-in-task {
   width:800px;
   margin-left:auto;
   margin-right:auto;
}

.item-from-parent-icon {
   position:relative;
   top:4px;
}

iframe.task-auto-height {
   height: 80vh;
   height: calc(100vh - 160px);
   height: calc(100vh - 185px);
}

.fullscreen-iframe {
   height: calc(100vh - 185px) !important;
}

.loading {
   margin-left:auto;
   margin-right:auto;
}

.progress-popup {
   position: fixed;
   bottom: 0px;
   left: 0px;
   width: 100%;
   z-index: 100;
   background: #F1F2F7;
   padding: 16px;
   border: 1px solid #E0E0E1;
   border-bottom: none;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
}

.progress-popup > div.popup-close {
   position: absolute;
   top: 8px;
   right: 8px;
   cursor: pointer;
}

.progress-popup > div {
   margin-bottom: 8px;
}

.progress-area {
   display: flex;
   flex-grow: 1;
   justify-content: center;
}

.progress-box {
   width: 32px;
   height: 32px;
   border: 1px solid #E0E0E1;
   text-align: center;
   margin-left: 6px;
   margin-right: 6px;
   line-height: 32px;
   font-size: 16px;
   font-weight: bold;
   border-radius: 4px;
}

.progress-box.progress-box-current {
   border: 2px solid #707070;
}

.progress-box.progress-box-full {
   background-color: #B8E986;
}
.progress-box.progress-box-partial {
   background-color: #F29F24;
}

.progress-popup-wrapper {
   display: flex;
   width: 100%;
   justify-content: space-between;
}
.progress-popup-wrapper.progress-popup-ancestor {
   width: 95%;
   min-width: 300px;
}

div.progress {
   background-color: #FFF;
}
div.progress-bar {
   color: #000;
   text-shadow: white 0px 0px 10px;
}