/* Header */

#header {  
  vertical-align:    middle;
  background:        var(--ActionColor);
}

.DESKTOP #header {
  position:          sticky;
  top:               0;  
  z-index:           20001;
}

.main-menu {
  display:           flex;  
  align-content:     space-between;
  justify-content:   center;
  align-items:       center;
  min-height:        56px;
}

.MOBILE .main-menu {
  height:            80px;
}

#logo {
  position:          absolute;
  top:               1.25rem;
  right:             1.5rem;
  z-index:           1000;
  height:            2.5rem;  
}

.DESKTOP #logo {
  top:               10px;
  height:            35px;
}

#super-title {
  margin:            0;
  margin-top:        30px;
  vertical-align:    middle;
  text-align:        center;
  font-size:         20px;
  font-weight:       bold;
  color:             white;
}

.DESKTOP #super-title {
  margin-top:        0;
}

#menu-box {
  z-index:           1001;
}

#menu-button {
  position:          relative;
  height:            1.7rem;
  margin-left:       1rem;  
  padding:           0.5rem;
  border-radius:     50rem;
  cursor:            pointer;
  z-index:           100004;
}

.DESKTOP #menu-button:hover,
#menu-button.selected {
  background:        #005FB8;
  cursor:            pointer;
}

#menu-button:active {
  background:        #0053A1;
}

#menu img {
  float:             inline-end;
  margin-top:        0.2rem;
}

/* Menu */

#menu {
  position:          absolute;
  left:              0;
  top:               5rem;
  font-size:         120%;
  border-radius:     0.5rem;
  box-shadow:        0px 2px 12px 0px rgba(0, 0, 0, 0.25);
  background-color:  #fff;
  z-index:           100004;
}

.DESKTOP #menu {
  top:               55px;
  margin:            0;
}

.MOBILE #menu {
  width:             96vw;
}

#menu a {  
  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;    
  text-decoration:   none;
  color:             #444444;
  background:        white;
  cursor:            pointer;
}

#menu a:hover {  
  background:        #E5E5E5;
}

#menu a:active {
  color:             var(--ActionColor);
  background:        rgba(0, 116, 225, 0.10)
}

#menu .username {
  margin:            0.84rem 1rem;
  overflow:          hidden;
  font-weight:       600;
  line-height:       normal;
  color:             #999999;
}

#menu-overlay {
  position:          absolute;
  top:               0;
  left:              0;
  width:             100vw;
  height:            100vh;
  z-index:           100002;
}

/* NOTE: Overrides common.css */

.MOBILE #main-content {
  padding:           1rem;
}

/* Footer override */

.footer-holder {
  width:             100%;
}

#footer {
  display:           flex;
  margin-top:        auto;
  align-items:       center;
  justify-content:   space-between;
  color:             #181818;
  background:        white;
}

.MOBILE #footer {
  width:             96%;
  margin-bottom:     1rem;
}

.DESKTOP #footer {
  box-sizing:        border-box;
  width:             100%;  
  padding:           1.25rem calc(2% + 0.8rem);
}

#footer #footer-logo {
  order:             2;
  margin:            0;
}

#footer #footer-text {
  order:             1;
}

.DESKTOP.RTL #footer #footer-text {
  font-size:         0.95rem;
}

.DESKTOP.LTR #footer #footer-text {
  font-size:         0.9rem;
  text-align:        start;
}

.MOBILE.RTL #footer #footer-text {
  font-size:         0.9rem;
}

.MOBILE.LTR #footer #footer-text {
  font-size:         0.8rem;
}

.MOBILE.RTL #footer #footer-logo img {
  height:            1.7rem;
}

.MOBILE.LTR #footer #footer-logo img {
  height:            1.5rem;
}

#footer #footer-text a {
  color:             var(--ActionColor);
}


.LTR #account-panel {
  right:             auto;
  left:              0;
  float:             left;
  margin-left:       0.5rem;
  flex-direction:    row-reverse;
}