.menubar {
  display: grid;
  grid-template-columns: max-content max-content max-content auto;
  gap: 10px;
  margin-bottom: 10px;
}

.scmButton img {
  width: 18px;
  height: 18px;
}

.button-icon {
  width: 18px;
  margin: auto;
}

.scmButton.left {
  margin-left: 0;
}

.scmButton.right {
  margin-right: 0;
}

.scmButtonSave.left {
  margin-left: 0;
}

.scmButtonSave.right {
  margin-right: 0;
}

.scmButtonExport.left {
  margin-left: 0;
}

.scmButtonExport.right {
  margin-right: 0;
}

.selected-menu {
  grid-column-start: 3;
  grid-column-end: 5;
}

.menu-1,
.menu-2,
.selected-menu,
.position-menu,
.export-menu,
.save-menu,
.search-menu {
  display: flex;
}

.menu-2 .scmButton,
.position-menu .scmButton,
.scmButtonExport,
.scmButtonSave {
  width: 100%;
}

.scmButton,
.scmButtonExport,
.scmButtonSave {
  border: 0;
  border-radius: 3px;
  background-color: #e4ebff;
  /*font-size: 0.8em;*/
  color: #635f5d;
  padding: 5px 10px;
  margin: 0 3px;
}

.scmButtonSave {
  background-color: #deeadf;
}

.scmButtonExport {
  background-color: #f0e3c7;
}

.search-menu {
  text-align: left;
  justify-content: left;
  margin: auto 0;
}

.search-menu .search-input {
  width: 200px;
  background-color: #e5e5e5;
  border: 0;
  border-radius: 4px;
  color: #635f5d;
  padding-left: 15px;
  height: 30px;
  margin-right: 5px;
}

.progress-status {
  display: flex;
  align-items: center;
}

.progressImage {
  width: 24px;
  padding-right: 4px;
}

.scmButton.Inactive {
  background-color: #efefef;
  filter: grayscale(1);
}

.scmButton.Inactive > .button-icon path {
  fill: #999999;
  stroke: #999999;
}

.scmButton.Inactive > .button-icon circle {
  fill: #999999;
  stroke: #999999;
}

.scmButton.Inactive > .button-icon ellipse {
  fill: #999999;
  stroke: #999999;
}

.scmButton.Inactive > .button-icon use {
  fill: #999999;
  stroke: #999999;
}

.scmButton.Inactive > .button-icon rect {
  fill: #999999;
  stroke: #999999;
}

@media screen and (max-width: 945px) {
  .menubar {
    grid-template-columns: max-content max-content max-content;
  }

  .selected-menu {
    grid-column-start: 1;
    grid-column-end: 3;
  }

  .position-menu {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row: 1;
  }

  .search-menu {
    grid-column-start: 2;
    grid-column-end: 4;
  }

  .selected-menu .scmButton {
    width: 100%;
  }
}

@media only screen and (max-width: 685px) {
  .menubar {
    gap: 5px 10px;
    grid-template-columns: 60% auto 0;
  }

  .menu-2 {
    grid-column-start: 2;
    grid-column-end: 4;
  }

  .position-menu {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row: 3;
  }

  .selected-menu {
    grid-column-start: 1;
    grid-column-end: 4;
  }

  .scmButton,
  .scmButtonExport,
  .scmButtonSave {
    width: 100%;
    padding: 5px;
  }

  .export-menu,
  .save-menu,
  .search-menu input {
    display: none;
  }
}