[data-module=navigation] [class*=-switch-tab-page] {
  display: block;
  overflow: hidden;
}

[data-module=navigation] [class*=-switch-tab-page] .tab {
  display: inline-block;
}

[data-module=navigation] .prev-switch-tab-page .tab {
  -webkit-animation-name: prev-switch; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: .5s; /* Safari 4.0 - 8.0 */
  animation-name: prev-switch;
  animation-duration: .5s;
}

[data-module=navigation] .next-switch-tab-page .tab {
  -webkit-animation-name: next-switch; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: .5s; /* Safari 4.0 - 8.0 */
  animation-name: next-switch;
  animation-duration: .5s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes prev-switch {
  0% { left: -100%; }
  100% { left: 0; }
}
/* Standard syntax */
@keyframes prev-switch {
  0% { left: -100%; }
  100% { left: 0; }
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes next-switch {
  0% { left: 0; }
  100% { left: -100%; }
}
/* Standard syntax */
@keyframes next-switch {
  0% { left: 0; }
  100% { left: -100%; }
}

[data-module=navigation] #navigation-container {
  display: flex;
  flex-wrap: nowrap;
  flex-grow: 1;
  align-items: flex-end;
  height: 55px;
  background: var(--navigation-bar-color);
  padding: 0 10px;
}

[data-module=navigation] .tab {
  display: flex;
  margin: 0 3px;
  max-width: 104px;
  width: 104px;
  flex: 0 0 104px;
  cursor: pointer;
  height: 30px;
  background: #C8D2DC;
  color: var(--main-text-color);
  border-radius: 5px 5px 0 0;
  position: relative;
  align-items: center;
}

[data-module=navigation] .tab.active {
  background: #85b8eb;
}

[data-module=navigation] .tab.dragged {
  filter: drop-shadow(2px -1px 4px #333);
  -webkit-filter: drop-shadow(2px -1px 4px #333);
  -moz-filter: drop-shadow(2px -1px 4px #333);
}

[data-module=navigation] .tab:before, 
[data-module=navigation] .tab:after {
  content: "";
  background: #C8D2DC;
  position: absolute;
  bottom: 0;
  width: 3px;
  height: 5px;
  z-index: 1;
}

[data-module=navigation] .tab:before {
  left: -3px;
}

[data-module=navigation] .tab:after {
  right: -3px;
}

[data-module=navigation] .selected-tab {
  background: #FFFFFF;
  color: var(--main-menu-color);
}

[data-module=navigation] .selected-tab:before, 
[data-module=navigation] .selected-tab:after {
  background: #FFFFFF;
}

[data-module=navigation] .tab-detail:before,
[data-module=navigation] .tab-detail:after {
  content: "";
  background: var(--navigation-bar-color);
  position: absolute;
  bottom: 0;
  width: 6px;
  height: 10px;
  z-index: 2;
  border-radius: 50%;
}

[data-module=navigation] .tab-detail:before {
  left: -6px;
}

[data-module=navigation] .tab-detail:after {
  right: -6px;
}

[data-module=navigation] .tab-detail {
  padding: 0 7px;
  /* font-weight: bold; */
  font-size: 12px;
  line-height: 30px;
  overflow: hidden;
  white-space: nowrap; 
  text-overflow: ellipsis;
  flex: 1;
}

[data-module=navigation] [data-type^=show-] {
  flex: 0 0 44px;
  /* width: 44px; */
}

[data-module=navigation] [data-type=close-tab-btn] {
  background-image: url(../img/commonIcon/small-close-icon.svg);
  width: 12px;
  height: 12px;
  cursor: pointer;
  align-self: center;
  margin-right: 7px;
}