.top-panel-button-soft {
  border-bottom: 1px solid #dee2e6;
  display: flex;
  justify-content: left;
  padding-left: 3px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  width: calc(100vw - $left-side-menu-width);
  max-width: 100%;
  min-width: 0;
  height: 102px;
  padding-top: 3px;
  gap: 3px;
  scrollbar-width: thin;
  scrollbar-color: #007bff #f0f0f0;
  box-sizing: border-box;
  position: relative; }

.top-panel-button-soft::before,
.top-panel-button-soft::after {
  position: fixed;
  top: var(--arrow-top, 50%);
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: rgba(0, 123, 255, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease, top 0.1s ease, background 0.2s ease;
  font-family: "bootstrap-icons";
  font-size: 18px;
  color: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 123, 255, 0.3);
  cursor: pointer; }

.top-panel-button-soft.has-scroll-left::before,
.top-panel-button-soft.has-scroll-right::after {
  pointer-events: auto; }

.top-panel-button-soft::before:hover,
.top-panel-button-soft::after:hover {
  background: rgba(0, 123, 255, 0.9); }

.top-panel-button-soft::before:active,
.top-panel-button-soft::after:active {
  background: #007bff;
  transform: translateY(-50%) scale(0.95); }

.top-panel-button-soft::before {
  content: '\f284';
  left: 8px; }

.top-panel-button-soft::after {
  content: '\f285';
  right: 8px; }

.top-panel-button-soft.has-scroll-left::before {
  opacity: 1; }

.top-panel-button-soft.has-scroll-right::after {
  opacity: 1; }

.panel-button-soft {
  min-width: 96px;
  width: auto;
  height: 96px;
  box-sizing: border-box;
  flex-shrink: 0; }

.panel-button-soft:hover {
  background-color: #f2f2f2;
  border-radius: 15px; }

.panel-button-soft a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  box-sizing: border-box;
  padding: 20px 5px 0 5px;
  gap: 5px; }

.panel-button-soft.active a {
  color: #0a0a0a; }

.panel-button-soft a:hover, .panel-button-soft a:focus {
  text-decoration: none;
  color: #000000; }

.panel-button-text {
  color: #0a0a0a;
  text-align: center;
  line-height: 15px; }

.panel-button-icon i {
  font-size: 24px;
  color: #007bff;
  transition: color 0.2s ease-in-out; }

.panel-button-soft:hover .panel-button-icon i {
  color: #0069d9; }

.panel-button-soft:hover .panel-button-text {
  color: #000000; }

.panel-button-soft.active {
  background-color: #f2f2f2;
  border-radius: 15px; }

@media (max-width: 480px) {
  .top-panel-button-soft {
    height: 76px; }

  .top-panel-button-soft {
    justify-content: space-around; }

  .panel-button-soft {
    width: 70px;
    height: 70px;
    font-size: 11px; }

  .panel-button-soft a {
    gap: 0;
    padding: 10px 5px 0 5px; }

  .panel-button-soft .panel-button-icon i {
    font-size: 18px; }

  .top-panel-button-soft::before,
  .top-panel-button-soft::after {
    width: 32px;
    height: 32px;
    font-size: 16px;
    background: rgba(0, 123, 255, 0.8); }

  .top-panel-button-soft::before {
    left: 4px; }

  .top-panel-button-soft::after {
    right: 4px; } }
/* Disabled state styles */
.panel-button-soft.disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.7; }

.panel-button-soft.disabled a {
  color: #999999 !important;
  /* muted text color */
  pointer-events: none; }

.panel-button-soft.disabled a div {
  color: #999999 !important;
  /* muted text color */ }

.panel-button-soft.disabled i {
  color: #80bfff !important;
  /* muted blue icon color */ }

.panel-button-soft.disabled:hover {
  background-color: #ffffff;
  /* disable hover effect for disabled buttons */ }

.panel-button-soft.disabled:hover i {
  color: #80bfff !important;
  /* keep muted blue color on hover */ }

.panel-button-soft.disabled:hover a {
  color: #999999 !important;
  /* keep muted text color on hover */ }

.panel-button-soft.disabled:hover a div {
  color: #999999 !important;
  /* keep muted text color on hover */ }

/*# sourceMappingURL=SectionPanelSoft.css.map */