/* Record list toolbar - fixed to top of page */
#navtop {
  background-color: #333;
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0;
  height: var(--but-size);
  width: 100%;
  z-index: 100;
}

/* Top navigation buttons/bars position and visibility */
.navtop-inner-container {
  width: 100%
}
#navtop-inner-left.manage {
  width: calc(var(--but-size) * 6);
  margin: 0 auto;
}
body.emulate-v1 #navtop-inner-left.manage {
  width: calc(var(--but-size) * 5);
  margin: 0 auto;
}
#navtop-inner-left.csv {
  width: calc(var(--but-size) * 6);
  margin: 0 auto;
}
body.emulate-v1 .navbar-icon.v2 {
  display: none;
}

#navtop-inner-middle {
  width: calc(var(--but-size) * 1);
  margin: 0 auto;
}

#navtop-inner-right.manage {
  width: calc(var(--but-size) * 3);
  margin: 0 auto;
}
#navtop-inner-right.csv {
  display: none;
}
#navtop svg#edit-record {
  display: none;
}

@media only screen and (max-width: 1024px) {
  #navtop-inner-right.manage {
    width: calc(var(--but-size) * 4);
    margin: 0 auto;
  }
  #navtop-inner-right.csv {
    width: calc(var(--but-size) * 2);
    margin: 0 auto;
    display: block;
  }
  #navtop svg#edit-record {
    display: block;
  }
  .navtop-inner-container.middle {
    display: none;
  }
  .small-edit .navtop-inner-container.left {
    display: none;
  }
  body:not(.small-edit) .navtop-inner-container.right {
    display: none;
  }
}
body.emulate-v1 .navtop-inner-container.middle {
  display: none;
}
body.emulate-v1 .navtop-inner-container.right {
  display: none;
}

/* Main navigation bar */
#navbot {
  background-color: #333;
  overflow: hidden;
  position: fixed;
  left: 0;
  height: var(--but-size);
  width: 100%;
  bottom: 0;
}
#navbot-inner {
  margin: 0 auto;
  width: calc(var(--but-size) * 5);
}
#navbot svg#navbot-link-edit { /* CSS selector needs to be more specific than below */
  display: none; /* Edit link is hidden by default */
}
body.emulate-v1 #navbot svg#navbot-link-csv {
  display: none;
}
/* Change the width of the navar-inner div
 * which is centered in the main navbot div
 * in order to ensure navigation links are
 * centred correctly because there are a
 * different number on full screen and
 * mobile screen
 */
@media only screen and (max-width: 1024px) {
  body.emulate-v1 #navbot svg#navbot-link-edit {
    display: none;
  }
  body.emulate-v1 #navbot-inner {
    width: calc(var(--but-size) * 3);
  }
  #navbot-inner {
    width: calc(var(--but-size) * 6);
  }
  #navbot svg#navbot-link-edit { 
    display: block;
  }
}

.navbar-icon {
  width: var(--but-width);
  cursor: pointer;
  float: left;
  display: block;
  text-align: center;
  padding: var(--but-padding);
  text-decoration: none;
}
.navbar-icon.hide {
  display: none;
}
.navbar-icon path, .navbar-icon circle, .navbar-icon rect {
  pointer-events: none;
}
.navbar-icon path[fill="none"], .navbar-icon circle[fill="none"], .navbar-icon rect[fill="none"],
.navbar-icon path:not([fill]), .navbar-icon circle:not([fill]), .navbar-icon rect:not([fill]) {
  fill: none;
  stroke: white;
}
.navbar-icon path[stroke="none"], .navbar-icon circle[stroke="none"], .navbar-icon rect[stroke="none"],
.navbar-icon path:not([stroke]), .navbar-icon circle:not([stroke]), .navbar-icon rect:not([stroke]) {
  fill: white;
  stroke: none;
}

.navbar-icon.disabled path[fill="none"], .navbar-icon.disabled circle[fill="none"], .navbar-icon.disabled rect[fill="none"],
.navbar-icon.disabled path:not([fill]), .navbar-icon.disabled circle:not([fill]), .navbar-icon.disabled rect:not([fill]) {
  fill: none;
  stroke: grey;
}
.navbar-icon.disabled path[stroke="none"], .navbar-icon.disabled circle[stroke="none"], .navbar-icon.disabled rect[stroke="none"],
.navbar-icon.disabled path:not([stroke]), .navbar-icon.disabled circle:not([stroke]), .navbar-icon.disabled rect:not([stroke]) {
  fill: grey;
  stroke: none;
}

/* Selected navigation buttons */
.selected-nav .navbar-icon path[fill="none"], .selected-nav .navbar-icon circle[fill="none"], .selected-nav .navbar-icon rect[fill="none"],
.selected-nav .navbar-icon path:not([fill]), .selected-nav .navbar-icon circle:not([fill]), .selected-nav .navbar-icon rect:not([fill]) {
  fill: none;
  stroke: rgb(12, 237, 12);
}
.selected-nav .navbar-icon path[stroke="none"], .selected-nav .navbar-icon circle[stroke="none"], .selected-nav .navbar-icon rect[stroke="none"],
.selected-nav .navbar-icon path:not([stroke]), .selected-nav .navbar-icon circle:not([stroke]), .selected-nav .navbar-icon rect:not([stroke]) {
  fill: rgb(12, 237, 12);
  stroke: none;
}
/* Flash animation for list toolbar icons */
.flash.navbar-icon path[fill="none"], .flash.navbar-icon circle[fill="none"], .flash.navbar-icon rect[fill="none"],
.flash.navbar-icon path:not([fill]), .flash.navbar-icon circle:not([fill]), .flash.navbar-icon rect:not([fill]) {
  animation-name: flashStroke;
  animation-duration: 0.6s;
  animation-iteration-count: 1;
}
.flash.navbar-icon path[stroke="none"], .flash.navbar-icon circle[stroke="none"], .flash.navbar-icon rect[stroke="none"],
.flash.navbar-icon path:not([stroke]), .flash.navbar-icon circle:not([stroke]), .flash.navbar-icon rect:not([stroke]) {
  animation-name: flashFill;
  animation-duration: 0.6s;
  animation-iteration-count: 1;
}
@keyframes flashFill {
  0% {
    fill: white;
  }
  50% {
    fill: rgb(12, 237, 12);
  }
  100% {
    fill: white;
  }
}
@keyframes flashStroke {
  0% {
    stroke: white;
  }
  50% {
    stroke: rgb(12, 237, 12);
  }
  100% {
    stroke: white;
  }
}

#group-button-change-dialog {
  background-color: #333;
  padding: 5px;
}
.button-change-div {
  display: grid;
  align-items: center;
  grid-template-columns: 60px auto;
  grid-column-gap: 5px;
  color: white;
  cursor: pointer;
}
.button-change-div.hide {
  display: none;
}
.button-change-div span, .button-change-div svg {
  pointer-events: none;
}
.button-change path {
  stroke: yellow !important;
}

#group-button-dlg-cancel {
  margin: 0.5em;
  font-size: 16px;
  background-color: #333;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  border: 2px solid white;
}