/* captcha */
.grecaptcha-badge { 
    visibility: hidden !important;
}

#dialog-confirm{
  display: none;
}
.dt-scroll-body {
  scrollbar-color: #59627f #1a1d2f;
  scrollbar-width: thin;
}

/* Theme-aware scrollbars for all jQuery UI popup content. */
.ui-dialog .ui-dialog-content {
  scrollbar-width: thin;
  scrollbar-color: #59627f #1a1d2f;
}

/* Chromium gives the standard scrollbar properties precedence over the
 * WebKit pseudo-elements. Reset them there so both axes can use the full
 * theme-specific track/thumb/hover styling below. */
@supports selector(::-webkit-scrollbar) {
  .ui-dialog .ui-dialog-content {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
}
.ui-dialog .ui-dialog-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.ui-dialog .ui-dialog-content::-webkit-scrollbar-track {
  background: #23273b;
}
.ui-dialog .ui-dialog-content::-webkit-scrollbar-thumb {
  background: #59628d;
  border-radius: 8px;
}
.ui-dialog .ui-dialog-content::-webkit-scrollbar-thumb:hover {
  background: #9b8cff;
}
.ui-dialog .ui-dialog-content::-webkit-scrollbar-corner {
  background: #23273b;
}

/*  body */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial,Helvetica,sans-serif;
}
html {
  font-family: 'Nunito', sans-serif;
  min-height: 100vh;
  height: fit-content;
  width: 100%;
}
body {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: flex-end;
  min-height: 100vh;
  justify-content: flex-start;
  height: 100%;
  width: 100%;
  color: #dce3f0;
  background: linear-gradient(180deg, #20243a 0%, #1c2033 42%, #171a2a 100%);
}
.ui-tabs{
  display: flex !important;
  flex-direction: column;
  flex-grow: 1;
  position: relative !important;
  height: 100% !important;
  width: 100% !important;
}

#svgLager{
  display: none;
  visibility: hidden;
  }
#SVGwithoutHide {
  display: flex;
  width:0; height:0;
  position:absolute;
}
.smallNumber {
  display:inline;
  font-size:13px;
  text-align: center;
  text-wrap: nowrap;
}
/* font size smaller - small numbers */
#fs {
  font-size:13px;
  display:inline;
}
.fs {
  font-size:13px;
  text-align: center;
  text-wrap: nowrap;
}
/* div loading */
.blur{
  -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -ms-filter: blur(1px);
    -o-filter: blur(1px);
    filter: blur(1px); 
}
#loading{
  width:100%;
  height:100%;
  position:fixed;
  z-index:9990;
  opacity: 0.5;
  background-color: #7568e8;
  visibility: hidden;
  /*display: none;*/
}
#loading svg{
  position: absolute;
  left: 49%;
  top: 44%;
}
#loadingText{
  display: flex;
  justify-content: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 40%;
  color: rgb(85, 228, 185);
  font-size: 28px;
}

/* ####### addons ###################################################### */
#rowMenu {
  display: block;
  position: absolute;
  top: -500px;
  left: -500px;
  background-color: #303452;
  color:  #dce3f0;
  border: 1px solid #59628d;
  border-radius: 9px;
  padding: 17px 0px 17px 5px;
  z-index: 2;
  display: flex;
  visibility: visible;
  opacity: 0;
  transition: visibility 0.2s 0.2s, opacity 0.2s linear;
}
/* Copytext svg icon */
.login-icon,
.deploy-icon,
.monitor-icon,
.console-icon,
.play-icon,
.pause-icon,
.infoIcon,
.editIcon,
.copytext {
  position: relative;
  top: 1px;
  left: -3px;
  height: 16px;
  width: 16px;
  padding: 0;
  padding-left: 0;
  margin: 0;
  border: none;
  background: none;
  outline: none!important;
  cursor: pointer;
  text-overflow: clip;
  fill: #dce3f0;

  opacity: 0.4;
  & svg {
    width: 16px;
    height: 16px;
    fill: #dce3f0;  }
}

.deploy-icon{
  height: 32px;
  width: 32px;
  opacity: 0.7;
}
.login-icon{
  height: 25px;
  width: 25px;
  opacity: 0.7;
}
.console-icon,
.pause-icon,
.play-icon{
  height: 19px;
  width: 19px;
  top: 5px;
  stroke-width: 5px;
  opacity: 0.5;
}
.console-icon{
  opacity: 0.4;
}

.editIcon{
  top: 3px;
}

/* All action icons use the same theme-aware hover accent. The filter starts
 * from black so SVGs with different fill/path implementations render equally. */
.login-icon:hover,
.deploy-icon:hover,
.monitor-icon:hover,
.console-icon:hover,
.play-icon:hover,
.pause-icon:hover,
.infoIcon:hover,
.editIcon:hover,
.copytext:hover,
.configNode:hover {
  filter: brightness(0) saturate(100%) invert(58%) sepia(18%) saturate(9423%) hue-rotate(217deg) brightness(111%) contrast(118%);
  fill: #9b8cff !important;
  color: #9b8cff !important;
  opacity: 1;
}

/* Copy icons inside buttons follow the button hover foreground color. */
button:hover .copytext,
button:focus-visible .copytext {
  filter: none;
  fill: currentColor !important;
  color: inherit !important;
  opacity: 1;
}

/* configNode icon*/
.configNode{
  position: relative;
  height: 20px;
  width: 20px;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  outline: none!important;
  cursor: pointer;
  text-overflow: clip;
  fill: #dce3f0;
  opacity: 0.7;
  & svg {
    width: 20px;
    height: 20px;
    fill: #dce3f0;
  }
}
/* div popupInfo */
#popupInfo {
  position: absolute;
  top: 25px;
  left: 50%;
  background-color: #23273b;
  color:  #dce3f0;
  border: 1px solid #363d59;
  border-radius: 9px;
  padding: 16px;
  z-index: 1000;
  display: flex;
}
#popupInfo.visible{
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s linear;
}
#popupInfo.hidden{
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.2s, opacity 0.2s linear;
}

/* dont show tabs until tehy are fully loaded*/
#tabs {
  display: none;
}
#tabs.ui-tabs {
  display: block;
}

/* #####################################################################*/
/* Shared page shell */
.flex-wrapper {
  display: flex;
  align-content: flex-end;
  flex-direction: column;
  flex-grow: 1;
  justify-content: flex-start;
  width: 100%;
  min-height: 100vh - 35px;
  height: 100%;
}

/* #####################################################################*/
/* Site footer */
.footer.site-footer {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  margin-top: auto;
  padding: 0;
  border-top: 2px solid #59628d;
  background: #303452;
  color: #f7f8ff;
  font-size: 16px;
}

.site-footer-shell {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 34px 0 16px;
}

.site-footer-main {
  display: grid;
  grid-template-columns: minmax(280px, 1.55fr) minmax(250px, .95fr) minmax(300px, 1fr);
  gap: 46px;
  align-items: start;
}

.site-footer-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #f7f8ff !important;
  text-decoration: none !important;
}

.site-footer-logo {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
}

.site-footer-brand-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.site-footer-brand-copy strong {
  color: #f7f8ff;
  font-size: 21px;
  font-weight: 720;
  letter-spacing: -.015em;
  line-height: 1.15;
}

.site-footer-brand-copy small {
  color: #f7f8ff;
  font-size: 13px;
  line-height: 1.35;
  opacity: .66;
}

.site-footer-brand p {
  max-width: 460px;
  margin: 15px 0 0;
  color: #f7f8ff;
  font-size: 14px;
  line-height: 1.65;
  opacity: .72;
}

.site-footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.site-footer-column,
.site-footer-community {
  min-width: 0;
}

.site-footer-heading {
  display: block;
  margin-bottom: 11px;
  color: #f7f8ff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
  opacity: .56;
}

.site-footer-column a {
  display: block;
  width: fit-content;
  margin-top: 8px;
  color: #f7f8ff !important;
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none !important;
  opacity: .78;
  transition: opacity .15s ease, transform .15s ease;
}

.site-footer-column a:first-of-type {
  margin-top: 0;
}

.site-footer-column a:hover,
.site-footer-column a:focus-visible {
  text-decoration: none !important;
  opacity: 1;
  transform: translateX(2px);
}

.site-footer-discord {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  min-height: 68px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, #f7f8ff 18%, transparent);
  border-radius: calc(11px + 3px);
  background: color-mix(in srgb, #f7f8ff 7%, transparent);
  color: #f7f8ff !important;
  text-decoration: none !important;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.site-footer-discord:hover,
.site-footer-discord:focus-visible {
  border-color: color-mix(in srgb, #f7f8ff 32%, transparent);
  background: color-mix(in srgb, #f7f8ff 12%, transparent);
  color: #f7f8ff !important;
  text-decoration: none !important;
  transform: translateY(-1px);
}

.site-footer-discord .discord-icon {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0;
  stroke: currentColor;
}

.site-footer-discord-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.site-footer-discord-copy strong {
  color: #f7f8ff;
  font-size: 16px;
  font-weight: 690;
  line-height: 1.25;
}

.site-footer-discord-copy small {
  overflow: hidden;
  color: #f7f8ff;
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .64;
}

.site-footer-discord-arrow {
  color: #f7f8ff;
  font-size: 18px;
  line-height: 1;
  opacity: .62;
}

.site-footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, #f7f8ff 15%, transparent);
  color: #f7f8ff;
  font-size: 13px;
  line-height: 1.4;
  opacity: .62;
}

.site-footer-version {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 940px) {
  .site-footer-main {
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    gap: 34px;
  }

  .site-footer-community {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .site-footer-shell {
    width: min(100% - 28px, 1180px);
    padding-top: 28px;
  }

  .site-footer-main {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .site-footer-community {
    grid-column: auto;
  }

  .site-footer-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    margin-top: 24px;
  }
}

@media (max-width: 430px) {
  .site-footer-links {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}