html, body {
  --backgroundColor: #19191D;
  --backgroundColorL1: #24252E;
  --backgroundColorL1_5: #212126;
  --backgroundColorL2: #31333F;
  --backgroundColorL3: #454758;
  --primaryColor: #2BCBBB;
  --secondaryColor: #2BAFF7;
  --borderColor: #262837;
  --actionBorderColor: #4A4A4D;
  --actionHoverColor: #353640;
  --popupBorderColor: #34353D;
  --fontColor: white;
  --borderRadius: 8px;
  // --box-shadow: 0 8px 18px 0 rgb(11 11 77 / 4%), 0 0 2px 0 rgb(16 16 83 / 16%);
  --box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15), 0px 0px 2px 0px rgba(0, 0, 0, 0.30);
  --cardBackground: #262837;
  --cardHover: #34374b;
  --transition: all ease .2s;
  --sb-track-color: #19191D;
  --sb-thumb-color: #34374b;
  --sb-size: 8px;
  -webkit-font-smoothing: antialiased;
  background-color: #141417;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--fontColor);
  overflow: hidden;
  // background-color: var(--backgroundColor);
  height: 100%;
  * {
    box-sizing: border-box;
  }
  .ant-modal .ant-modal-content {
    background-color: var(--backgroundColorL1_5);
    border-radius: var(--borderRadius);
    box-shadow: var(--box-shadow);
    border: 1px solid var(--borderColor);
  }
  .ant-modal .ant-modal-header {
    background-color: var(--backgroundColorL1_5);
  }
}

@import '~styles/common';
@import '~styles/windows';
@import '~styles/xterm';

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  font-size: 14px;
  line-height: 1.5715;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.fixed {
  position: fixed;
}

.text-overflow {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.image-preview img, .ant-image-preview-img, img{
  // background-color: #1f1f1f;
  $color: #1f1f1f;
  background-image: 
    linear-gradient(45deg,  $color 25%, transparent 25%), 
    linear-gradient(-45deg, $color 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, $color 75%), 
    linear-gradient(-45deg, transparent 75%, $color 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

@-webkit-keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}

@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}

.ant-divider {
  border-color: var(--borderColor);
  margin: 16px 0;
}


.tool-effect {
  /* Frame 1321316442 */
  background: rgba(41, 42, 53, 0.65);
  /* ToolEffect */
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.06), inset 0px 0.5px 1.5px rgba(197, 197, 211, 0.1);
  backdrop-filter: blur(5px);
  /* Note: backdrop-filter has minimal browser support */
}

.app-skeleton {
  .ant-space {
    display: flex;
  }
}

span.meta, .ant-tag {
  font-size: 12px;
  opacity: .6;
  display: inline-block;
  border-radius: 3px;
  padding: 0px 4px;
  background-color: #414356;
  margin-right: 2px;
}

.filter-type {
  cursor: pointer;
  background-color: var(--backgroundColorL1);
  border-radius: 40px;
  padding: 2px 18px;
  font-size: 14px;
  color: white;
  display: inline-block;
  margin-bottom: 2px;
  &:hover, &.active {
    background-color: var(--backgroundColorL3);
  }
}


.video-preview {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  .inner {  
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  .preview-notication {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 14px;
    font-weight: 500;
    padding: 10px;
    border-radius: 10px;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    cursor: pointer;
  }
  &:hover {
    .preview-notication {
      opacity: 1;
      visibility: visible;
    }
  }
}