html.layout-menu-collapsed:not(.layout-menu-hover) #logo {
  clip-path: inset(0 calc(100% - 38px) 0 0); /* Clip 48px from the right */
}

html:not(.layout-menu-collapsed) #nav-toggle-handle,
html.layout-menu-collapsed.layout-menu-hover #nav-toggle-handle
{
  position: absolute;
  left: 233px;
  z-index: 99999;
  top: 5px;
  color: lightgrey;
}

html.layout-menu-collapsed:not(.layout-menu-hover) #nav-toggle-handle{
  display: none;
}

#activepiecesEmbed > iframe {
  width: 100%;
  height: 100%;
}



#activepiecesEmbed.hide {
  display:none;
}

.sdk-tile{
  margin-bottom: 20px;
}
.api-token-dialog {
  min-width: 650px;
}
.error-icon {
  font-size: 50px;
}
.offcanvas-fullscreen {
  width: 98% !important;
  min-width: 400px !important;
  height: 100% !important;
  max-width: 98% !important;
}

.offcanvas-halfscreen {
  width: 48% !important;
  min-width: 400px !important;
  height: 100% !important;
  max-width: 98% !important;
}

.request-card:first-child {
  padding-top: 0px !important;
}

.metrics-time-picker a{
    font-weight:600 ;
}
.metrics-time-picker small{
    display: block;
    font-weight: normal;
}

.metrics-dashboard-chart-height{
    height: 340px;
}

.layout-container>aside{
    padding-top:10px;
}

.ellipsis {
    white-space: nowrap; /* Prevents the text from wrapping to the next line */
    overflow: hidden; /* Ensures the overflow is hidden */
    text-overflow: ellipsis; /* Adds ellipsis to the end of the text */
    width: 100%; /* Sets the width of the container (can be adjusted as needed) */
    display: block; /* Optional, but useful for ensuring the element behaves as expected */
  }
  
  .btn.btn-link{
    box-shadow: none !important;
    padding: 0px !important;
  }

  #bucketSelectorDropdown{
    width: 350px;
  }

  .btn-icon-only{
    border: none;
    background: none;
  }

  .menu-link-back{
    background: #f8f8f8;
  }

  /* Custom CSS to override the active state of the button */
.btn-link:active,
.btn-link:hover,
.btn-link:focus {
  text-decoration: none !important;
  color: inherit !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

div.content-wrapper > div.container-fluid.flex-grow-1.container-p-y {padding-top:10px !important;}

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}