/* Smaller resolutions */

/* 1680x1050 - Scale based on width ratio: (1680/1920) = 87.5% */
@media only screen and (max-width: 1680px) {
  html {
    font-size: 87.5%;
  }
}

/* 1600x900 - Scale based on width ratio: (1600/1920) = 83.3% */
@media only screen and (max-width: 1600px) {
  html {
    font-size: 83.3%;
  }
}

/* 1440x900 - Scale based on width ratio: (1440/1920) = 75% */
@media only screen and (max-width: 1440px) {
  html {
    font-size: 75%;
  }
}

/* 1366x768 - Scale based on width ratio: (1366/1920) = 71.1% */
@media only screen and (max-width: 1366px) {
  html {
    font-size: 71.1%;
  }
}

/* 1280x720 - Scale based on width ratio: (1280/1920) = 66.7% */
@media only screen and (max-width: 1280px) {
  html {
    font-size: 66.7%;
  }
}

/* Larger resolutions */

/* 2560x1440 - Scale based on width ratio: (2560/1920) = 133.3% */
/* @media only screen and (min-width: 2560px) {
  html {
    font-size: 133.3%;
  }
} */

/* 3440x1440 - Scale based on width ratio: (3440/1920) = 179.2% */
/* @media only screen and (min-width: 3440px) {
  html {
    font-size: 179.2%;
  }
} */

/* 3840x2160 - Scale based on width ratio: (3840/1920) = 200% */
/* @media only screen and (min-width: 3840px) {
  html {
    font-size: 200%;
  }
} */

/* 5120x2880 - Scale based on width ratio: (5120/1920) = 266.7% */
/* @media only screen and (min-width: 5120px) {
  html {
    font-size: 266.7%;
  }
} */

/* 7680x4320 - Scale based on width ratio: (7680/1920) = 400% */
/* @media only screen and (min-width: 7680px) {
  html {
    font-size: 400%;
  }
} */

:root {
  --header-height: 100px;
  --content-gap: calc(var(--size-base-unit) * 2);
}

.shell-wrapper {
  padding: var(--content-gap);
  padding-bottom: 0;
}

.shell-header {
  margin-bottom: var(--content-gap);
}

.shell-header > div > div.workspace-header-container {
  height: calc(var(--header-height) - var(--content-gap));
}

.shell-content {
  display: flex;
  flex-direction: row;
  gap: var(--content-gap);
}

.shell-left-panel {
  height: fit-content;
}

.shell-center-panel {
  height: calc(
    100vh - calc(var(--header-height) + calc(var(--size-base-unit) * 4))
  );
  display: flex;
  width: 100%;
  flex-direction: column;
  overflow-y: auto;
}

.shell-center-panel-content {
  display: flex;
  height: 100%;
}

.shell-center-panel .shell-center-panel-body {
  overflow-y: auto;

  flex: 4;
}

.shell-center-panel .shell-center-panel-body > div {
  height: 100%;
}

.shell-center-panel .shell-center-panel-body .not-found {
  height: 50%;
  width: 100%;  
  display: block;  
}

.shell-center-panel .shell-center-panel-body .not-found div {
  float: right; 
  top: 40vh;
  margin-right:100px;
  display: block;
  position: relative;
}


.shell-center-panel
  .shell-center-panel-body
  div[id*="extreme-networks/license-management"] {
  display: flex;
}

.shell-right-panel {
  max-width: 350px;
  display: flex;
  flex-direction: column;
  border-radius: var(--en-theme-border-radius-lg);
  background-color: var(--en-color-neutral-dark-3);
}

.hidden {
  display: none !important;
}

.shell-fabs-container {
  position: absolute;
  bottom: 0;
  z-index: var(--en-z-index-top);
}

.shell-fabs-container .shell-fabs {
  border-radius: var(--en-theme-border-radius-lg);
  border-width: 0;
  margin-top: calc(var(--size-base-unit) * 2);

  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: calc(var(--size-base-unit) * 0.5);

  position: fixed;
  bottom: calc(var(--size-base-unit) * 2);
  right: calc(var(--size-base-unit) * 2);
}

.ai-expert-popover {
  height: auto;
}

.load-wrapper {
  display: flex;
  flex-direction: column;
  gap: calc(var(--size-base-unit) * 2);
}

@media screen and (max-width: 1024px) {
  .shell-left-panel {
    position: fixed;
    z-index: 999;
  }

  .shell-center-panel {
    flex-grow: 1;
    padding-left: calc(var(--size-base-unit) * 5);
  }
}