.ant-layout {
  background-color: transparent !important;
}

.full-screen {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.login-page-wrapper {
  background: #fff url("/public/images/login-bg.png") center/cover no-repeat;
}

.login-page-wrapper > .container {
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 14px;
  min-width: 550px;
  min-height: 550px;
  max-width: 660px;
  max-height: 660px;
  width: 70vmin;
  height: 70vmin;
  background-color: transparent;
  border-radius: 50%;
  border: 8px solid var(--ant-primary-color-hover);
  box-sizing: border-box;
  transform: translate(-50%, -50%);
}

.login-page-wrapper > .container .internal {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-sizing: border-box;
  background-color: var(--gray-3);
  box-shadow: var(--ant-primary-color-outline);
}

.login-page-wrapper > .container-decorate-placeholder {
  position: fixed;
  top: 0;
  left: 50%;
  display: block !important;
  width: 130px;
  height: 100%;
  background: url("/public/images/login-decorate-bg.png") center repeat-y;
  border-left: 5px solid var(--ant-primary-color-hover);
  border-right: 5px solid var(--ant-primary-color-hover);
  box-sizing: border-box;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  box-shadow: var(--ant-primary-color-outline);
}

.login-page-wrapper .area-a {
  flex-basis: 90%;
}

.login-page-wrapper .area-a-1 {
  display: none !important;
}

.login-page-wrapper .area-a-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  justify-content: space-evenly;
}

.login-page-wrapper .area-a-2 header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 12px;
  height: 25%;
  min-height: 60px;
  width: 80%;
  border-bottom: 2px solid var(--ant-primary-color-active);
}

.login-page-wrapper .area-a-2 header > div {
  flex-grow: 0 !important;
}

.login-page-wrapper .area-b {
  flex-direction: column !important;
  justify-content: space-around;
  flex-basis: 10%;
  padding-bottom: 12px;
  min-height: 60px;
  font-size: 12px;
  text-align: center;
  color: var(--gray-6);
}

.login-page-wrapper .area-b > div {
  flex-grow: 0 !important;
}

.login-page-wrapper .logo img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.login-page-wrapper .name img {
  height: 45px;
  object-fit: contain;
}

.transfer-page-wrapper,
.main-page-wrapper {
  background: rgba(0, 0, 0, 0.02) url("/public/images/page-base-bg.png") 0 0/auto repeat;
}

.transfer-page-wrapper > .container {
  margin: auto;
  width: 60vw;
  height: 100%;
}

.transfer-page-wrapper > .container .internal {
  width: 100%;
  height: 100%;
}

.transfer-page-wrapper > .container .internal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.transfer-page-wrapper > .container-decorate-placeholder,
.main-page-wrapper > .container-decorate-placeholder {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 68.021vw;
  height: 15.938vw;
  background: transparent url("/public/images/page-bottom-bg.png") center bottom/contain no-repeat
}


@media screen and (max-width: 1080px) {
  .transfer-page-wrapper .container {
    width: 80vw;
  }
}

@media screen and (min-width: 1081px) and (max-width: 1440px) {
  .transfer-page-wrapper .container {
    width: 70vw;
  }
}

@media screen and (min-width: 1441px) {
  .transfer-page-wrapper .container {
    width: 60vw;
  }
}

.transfer-page-wrapper .area-a {
  margin-bottom: 24px;
}


.transfer-page-wrapper .area-a-1 {
  display: none;
}

.transfer-page-wrapper .area-b {
  color: var(--gray-6);
}

.transfer-page-wrapper .area-b > div {
  flex-grow: 0 !important;
  margin: 0 4px;
}

.main-page-wrapper nz-sider.main-page-wrapper-sider {
  flex: 0 0 240px !important;
  max-width: 240px !important;
  min-width: 240px !important;
  width: 240px !important;
  background-color: transparent;
}

.main-page-wrapper nz-sider.main-page-wrapper-sider > .ant-layout-sider-children > nz-resize-handle {
  display: none;
}

.main-page-suspension-box {
  display: none;
}

.main-page-wrapper-header {
  display: flex;
  flex-direction: column-reverse;
}

.main-page-wrapper-header > .container {
  height: 40px !important;
  background-color: #fff;
}

.main-page-wrapper-header > .container-decorate-placeholder {
  margin-top: -4px;
  height: 30px;
  background: url("/public/images/page-header-bg.png") center center/contain repeat-x;
}

.main-page-wrapper-sider {
  --initial-width: 240px;
  flex: 0 0 240px !important;
  max-width: 240px !important;
  min-width: 240px !important;
  width: 240px !important;
}

.main-page-wrapper-sider > header .container-decorate-placeholder {
  width: 240px;
  height: 80px;
  background: url("/public/images/sider-header-bg.png") center center/contain no-repeat;
}

.main-page-wrapper-sider > footer {
  min-height: 12px;
}

.main-page-wrapper-sider > main {
  margin-top: -14px;
  padding: 0 38px 0 28px;
}

.main-page-wrapper-sider .sider-menu {
  background-color: #fff;
  border-radius: 0 0 5px 5px;
  box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.2);
}

.main-page-wrapper-sider .ant-menu-inline,
.main-page-wrapper-sider .ant-menu-vertical,
.main-page-wrapper-sider .ant-menu-vertical-left {
  border-right-width: 0;
}

.ag-theme-balham .ag-header {
  color: #8f3c36 !important;
  background-color: transparent !important;
}