body {
  background:        var(--BackColor);   /* #main-content not enough because of sticky footer */
}


/*** Header ***/

#header {
  position:          sticky;
  top:               0;
  width:             100%;
  z-index:           20001;
  font-size:         137%;      /* Should be the same for proper positioning of sub-menu etc. */
  background:        white;
}

#header .action-button.gray-button.active {   /* Highlight drag-and-drop buttons when dragging over them */
  color:             black;
  background:        #FF6;
}

#header .action-button {
  padding:           0.25rem 1.5rem;
}

#header .global-warning {
  font-size:         1.6rem;
  font-weight:       bold;
  text-align:        center;
  color:             white;
  background:        var(--ErrorColor);
  border-bottom:     0.3rem solid white;
}


/* Benchmark marker */

.benchmark {
  /*display:none;/* TEMP: until redesign and review are over */
  position:          absolute;
  font-weight:       bold;
  color:             rgba(255,0,0,0.4);
}


/* Logo */

#logo-box {
  display:           inline;
  height:            1.9em;
}

#logo-box a:active {
  text-decoration:   none;
}

#logo-box img {
  width:             5.25rem;
  height:            35px;
  padding:           0.7rem 1.5rem 0.5rem 1rem;
  vertical-align:    top;
  border-radius:     0.3em;
}

/* Main menu */

.main-menu {
  display:           inline-block;
  margin:            0;
}

.main-menu-row {
  border-bottom:     1px solid #DCDCDC;
  background:        var(--ActionColor);
  position:          relative;
  min-height:        3.5rem;
  display:           grid;
  grid-template-columns: auto minmax(auto, 16rem);
}

#menu-panel {
  grid-column:       1;
}

.main-menu .item-box {
  display:           inline-block;
  position:          relative;
  margin:            0;
  padding:           0;
}

.main-menu .item {
  display:           inline-block;
  width:             auto;
  margin:            0 1rem 0 1rem;
  padding:           1rem 0.5rem 1rem 0.5rem;
  line-height:       133.3%;
  text-align:        center;
  font-size:         1.25rem;
  font-weight:       700;
  font-style:        normal;
  text-decoration:   none;
  color:             white;        
  cursor:            pointer;
}

.RTL .main-menu .item::before {
  content:           '';
  position:          absolute;
  top:               0;
  left:              -1rem;               /* adjustable to cover the margin */
  width:             calc(100% + 1rem);   /* Cover the entire width including margin */
  height:            100%;                /* Cover the entire height */
  cursor:            pointer;             /* Keep the cursor unchanged */
}

.LTR .main-menu .item::before {
  content:           '';
  position:          absolute;
  top:               0;
  left:              0;                   /* adjustable to cover the margin */
  width:             calc(100% + 1rem);   /* Cover the entire width including margin */
  height:            100%;                /* Cover the entire height */
  cursor:            pointer;             /* Keep the cursor unchanged */
}

.main-menu .item-icon {
  display:           inline-block;
}

.main-menu .item-icon img {
  width:             1.5rem;
  height:            1.5rem;
  justify-content:   center;
  align-items:       center;
}

.main-menu .item-box.selected {
  background:        white;
}

.main-menu .item-box:active .item {
  color:             white;
}

.main-menu .item-box.selected .item {
  color:             var(--ActionColor);
}

.main-menu .item-box .has-arrow svg {
  width:             1.5rem;
  position:          absolute;
  top:               1.25rem;
  vertical-align:    middle;
}

.RTL .main-menu .item img {
  left:              -0.5rem;
  margin-left:       1.5rem;
}

.RTL .main-menu .item.has-arrow {
  padding-left:      1.5rem; /* Space for RTL */
}

.LTR .main-menu .item img {
  right:             -0.5rem;
  margin-right:      1.5rem;
}

.LTR .main-menu .item.has-arrow {
  padding-right:     1.5rem; /* Space for LTR */
}

.main-menu .item-box-icon {
  display:           inline-block;
  position:          relative;
  margin:            0;
  padding:           0;
  z-index:           1;
}

.main-menu .item-box:not(.item-box-icon):not(.username):not(.selected):hover {
  background:        #2D8AE1;
}

.main-menu .item.selected {
  font-weight:       700;
}

.main-menu .item-box .sub-menu,
.main-menu .item-box .sub-menu-float { 
  position:          absolute;
  z-index:           1;
  border-radius:     0.5rem;
  box-shadow:        0px 2px 12px 0px rgba(0, 0, 0, 0.25);
  max-height:        80vh;
  overflow-y:        auto;
  overflow-x:        hidden;
  min-width:         11.25rem;
  top:               -10000px; /* Initially position the sub-menu off-screen */
  opacity:           0;
  padding:           0;
  background:        white;           
  transition:        top 0ms ease 50ms, opacity 150ms;
}

.RTL .main-menu .item-box .sub-menu,
.LTR .main-menu .item-box .sub-menu-float {
  right:             0;
}

.LTR .main-menu .item-box .sub-menu, 
.RTL .main-menu .item-box .sub-menu-float {
  left:              0;
}

.RTL .main-menu .item-box .sub-menu,
.RTL .main-menu .item-box .sub-menu-float {
  text-align:        right;
}

.LTR .main-menu .item-box .sub-menu, 
.LTR .main-menu .item-box .sub-menu-float {
  text-align:        left;
}

.main-menu .item-box:hover .sub-menu,
.main-menu .item-box .sub-menu:hover,
.main-menu .item-box:hover .sub-menu-float,
.main-menu .item-box .sub-menu-float:hover {
  top:               100%;
  opacity:           1;
}

.main-menu .sub-item {
  display:           block;
  box-sizing:        border-box;
  min-width:         11.25rem;
  margin:            0;
  padding:           0.84rem 1rem;
  font-style:        normal;
  font-weight:       600;
  line-height:       normal;
  white-space:       nowrap;
  vertical-align:    top;
  text-decoration:   none;
  color:             #444444;
  background:        white;                                
  cursor:            pointer;
}

.main-menu .sub-item:last-child {
  border-bottom:     none;
}

.main-menu .sub-item:hover {
  color:             #444444;
  background:        #E5E5E5;
}

.main-menu .sub-item:active {
  background:        rgba(0, 116, 225, 0.10);
  color:             var(--ActionColor);
}

.main-menu h1 {
  display:           inline-block;
  position:          absolute;
  top:               0;
  padding:           0.3em 1em;
  font-size:         135%;
  color:             white;
}


/*** report-box ***/

#report-box {
  position:          fixed;
  z-index:           30000;
  left:              calc((100% - 34em) / 2);
  top:               18%;    /* Contrast with 15% for popup-box */
  width:             34rem;
}

#report-box .report-card-container {
  display:           grid;
  grid-auto-flow:    column;
  grid-gap:          1rem;
  grid-auto-columns: calc((100% - 2rem) / 3);
  margin:            1.5rem 0;
}

#report-box .report-card {
  display:           flex;
  flex-direction:    column;
  align-items:       center;
  justify-content:   space-between;
  padding:           0.75rem;
  line-height:       1.5em;
  text-align:        center;
  text-decoration:   none;
  color:             #181818;
  border-radius:     0.5rem;
  border:            1px solid #E0E0E0;
}

#report-box .report-card:hover {
  box-shadow:        0px 4px 8px 0px rgba(0,25,49,0.13);
}

#report-box .report-card:active {
  box-shadow:        0px 4px 8px 0px rgba(0,25,49,0.25);
}

#report-box .report-card img {
  width:             4rem;
  height:            4rem;
}

#report-box .report-card .line1 {
  margin-top:        1rem;
  margin-bottom:     0.5rem;
  font-size:         130%;
  font-weight:       700;
}

#report-box .report-remark-container {
  text-align:        center;
}

#report-box .report-remark-container .line1 {
  font-size:         130%;
  font-weight:       700;
}

#report-box .report-remark {
  width:             100%;
  height:            4.5em;
  margin-top:        1rem;
}

#report-box .report-remark-container .line3 {
  font-size:         90%;
  text-align:        initial;
  color:             #666;
}


/* Navigation path + title */

.nav {
  border-bottom:     1px solid #E0E0E0;
}

.navpath-row {
  vertical-align:    middle;
  background:        white;
  display:           grid;
  grid-template-columns: auto auto;
  justify-content:   space-between;
}

.navpath {
  display:           inline-block;
  grid-column:       1;
  padding:           0.875rem 1.5rem 0.875rem 1rem;
  line-height:       normal;
  font-size:         1.25rem;
  font-style:        normal;
  font-weight:       600;
}

.navpath a {
  line-height:       normal;
  font-style:        normal;
  font-weight:       600;
  text-decoration:   none;
  color:             var(--ActionColor);
}

.navpath h1 {
  display:           inline-block;
  line-height:       normal;
  align-items:       center;
  text-align:        right;
  font-size:         1.25rem;
  font-weight:       600;
  font-style:        normal;
  color:             #999999;
}

.navpath .arrow-icon {
  position:          relative;
  display:           inline-block;
  vertical-align:    middle;
  top:               -0.06rem;
  padding:           0 0.25rem;
}

.LTR .navpath .arrow-icon {
  transform:         scaleX(-1);
}


/*** footer ***/

#footer {
  display:           flex;
  margin-bottom:     0;
  justify-content:   space-between;
  align-items:       center;
  color:             #666;
  background:        white;
}

#footer #footer-text a {
  color:             #666;
}

#footer #footer-logo img {
  height:            2em;
  margin:            0.7em 0;
}

#footer .footer-links {
  margin:            0 0.5em;
}

#footer .icon-button {
  height:            1.5rem;
}


/*** Overview library ***/

.overview-area {
  font-size:         120%;
}

.overview-block {
  display:           inline-block;
  vertical-align:    top;
}

.RTL .overview-block {
  margin:            0 0 3rem 2rem;
}

.LTR .overview-block {
  margin:            0 2rem 3rem 0;
}

.overview-block.pushdown {
  margin-top:        2.8em;
}

.overview-block.pushdown.linebreak {
  display:           block;
}

.overview-block .chart2 {
  max-width:         100%;
  width:             1000px;    /* Prevents stretching animation */
}

.overview-area .field .label {
  width:             13em;
  font-weight:       bold;
}

.overview-area h3 {
  margin:            0 0 0.5em 0;
  font-size:         140%;
}

.overview-table {
  margin:            0;
}

.overview-table th {
  cursor:            default;
}

.overview-table th,
.overview-table td {
  text-align:        right;
}

.LTR .overview-table th,
.LTR .overview-table td {
  text-align:        left;
}

.overview-table td.pos { color: #0A0; }
.overview-table td.neg { color: #F00; }
.overview-table td.zro { color: #888; }


.overview-area .module {
  display:           inline-block;
  margin-bottom:     1em;
  padding:           0.4em 1em;
  vertical-align:    middle;
  border:            1px solid #BBBBBB;
  border-radius:     0.5em;
  cursor:            default;
  background:        #FFF;
  font-weight:       700;
}

.RTL .overview-area .module {
  margin-left:       1em;
  width:             8.2em;
}

.LTR .overview-area .module {
  margin-right:      0.5em;
  width:             11em;      /* English needs more space */
}

.overview-area .module img {
  width:             1.2em;  
  vertical-align:    middle;
  margin-left:       0.5em;
}

.LTR overview-area .module img {  
  margin-right:      0.5em;
  margin-left:       0;
}


/* xmsg-panel */

.xmsg-panel {
  display:           inline-block;
}

#xmsg-box {
  max-height:        80%;
  overflow-y:        auto;
}


.import-sample-link {
  display:           inline-block;
  margin-top:        1rem;
}


.usage {
  margin:            1rem 0;
  font-weight:       bold;
}