// Media queries breakpoints
// @screen-xs and @screen-xs-min is not used in Grid
// smallest break point is @screen-md
@screen-xs: 480px;
@screen-xs-min: @screen-xs;
// 👆 Extra small screen / phone

// 👇 Small screen / tablet
@screen-sm: 576px;
@screen-sm-min: @screen-sm;

// Medium screen / desktop
@screen-md: 768px;
@screen-md-min: @screen-md;

// Large screen / wide desktop
@screen-lg: 992px;
@screen-lg-min: @screen-lg;

// Extra large screen / full hd
@screen-xl: 1200px;
@screen-xl-min: @screen-xl;

// Extra extra large screen / large desktop
@screen-xxl: 1600px;
@screen-xxl-min: @screen-xxl;

// provide a maximum
@screen-xs-max: (@screen-sm-min - 1px);
@screen-sm-max: (@screen-md-min - 1px);
@screen-md-max: (@screen-lg-min - 1px);
@screen-lg-max: (@screen-xl-min - 1px);
@screen-xl-max: (@screen-xxl-min - 1px);

@primary-color: #f16622;
@link-color: #f16622;
@head-top-prd: #f9d7bf;
@head-top-stg: #b5dafb;
@head-top-pre: #cff0da;
@head-bottom: #ffffff;

html,
body,
#root {
  height: 100%;
}

#logo {
  padding: 0;
}

.colorWeak {
  filter: invert(80%);
}

.ant-layout {
  min-height: 100vh;
}
.ant-pro-sider.ant-layout-sider.ant-pro-sider-fixed {
  left: unset;
}

canvas {
  display: block;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ul,
ol {
  list-style: none;
}

.c-json-view {
  margin: 0 !important;
  background-color: rgb(40, 44, 52) !important;
  .c-json-outter {
    margin: 0 !important;
    color: aliceblue !important;
  }
}

.ant-affix {
  top: 50px !important;
}
.ant-drawer,
.ant-modal {
  &-header {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    background-color: @primary-color !important;
  }
  &-title {
    color: #fff !important;
  }
  &-close {
    color: #fff !important;
    &-x {
      width: 39px !important;
      height: 39px !important;
      font-size: 14px !important;
      line-height: 39px !important;
    }
  }
}
.ant-pro-top-nav-header-logo h1 {
  color: @primary-color !important;
}
.head {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
.ant-pro-top-nav-header,
.ant-pro-global-header {
  width: 100%;
  background-color: unset !important;
}
.headPRD {
  background: linear-gradient(to bottom, @head-top-prd, @head-bottom, @head-bottom);
}
.headSTG {
  background: linear-gradient(to bottom, @head-top-stg, @head-bottom, @head-bottom);
}
.headPRE {
  background: linear-gradient(to bottom, @head-top-pre, @head-bottom, @head-bottom);
}
.right {
  h3,
  h4 {
    color: @primary-color;
  }
}

.ant-table-cell-content {
  display: contents !important;
}
.ant-pro-query-filter-collapse-button {
  color: @primary-color !important;
}

@media (max-width: @screen-xs) {
  .ant-table {
    width: 100%;
    overflow-x: auto;
    &-thead > tr,
    &-tbody > tr {
      > th,
      > td {
        white-space: pre;
        > span {
          display: block;
        }
      }
    }
  }
}

// Compatible with IE11
@media screen and(-ms-high-contrast: active), (-ms-high-contrast: none) {
  body .ant-design-pro > .ant-layout {
    min-height: 100vh;
  }
}