:root {
  --base-bg: #ffffff;
  --base-main-bg: #ECF2FF;
  --base-gap: 15px;
  --header-text: #131523;
  --header-text2: #5A607F;
  --base-title-color: #333333;
  --base-content-color: #101010;
  --base-table-color: #101010;
  --base-pagination-color: #415058;
  --base-pagination-line: #E8E8E8;
  --btn-primary: #165DFF;
  --btn-primary-text: #ffffff;
  --base-radius: 4px;
  --base-shadow: none;
  --base-shadow1: 0 1px 6px 0 rgba(84, 48, 132, 0.1);
  --base-line: #797979;
  --upload-card-bg: rgba(0, 0, 0, 0.02);
  --upload-card-line: rgba(0, 0, 0, 0.15);
  --bin-bg: #3183FF;
  --bin-child: #8BADF7;
  --bin-color: #E8E6E6;
  --bin-view-radius: 12px;
  --bin-view-line: #BCBCBC;
  --bin-view-primary: #3183FF;
  --bin-view-warn: #F4B863;
  --bin-view-info: #FBE9CD;
  --bin-view-disabled: #9AA7B1;
  --bin-view-box1:#40A9FF;
  --bin-view-box2:#36CFC9;
  --bin-view-box3:#FFA940;
  --bin-bg2: #ECF2FF;
}

.top {
  width: 100%;
  height: 100%;
  display: grid !important;
  grid-template-rows: 48px 48px auto;
  gap: 20px;
  color: var(--base-content-color);
}

.main {
  background-color: var(--base-bg);
  padding: 20px;
  box-sizing: border-box;
  box-shadow: var(--base-shadow);
  border-top-left-radius: var(--base-radius);
  border-bottom-left-radius: var(--base-radius);
  overflow: auto;
}

#dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  width: 400px;

}

#dialog .title {
  background-color: var(--btn-primary);
  color: var(--btn-primary-text);
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#dialog .btn {
  background-color: var(--base-bg);
  display: flex;
  justify-content: center;
  padding: 20px;
}