html, body {
    --color-yellow-1: #FFFBEB;
    --color-yellow-2: #FCD34D;
    --color-yellow-3: #D97706;
    --color-yellow-4: #B45309;
    --color-yellow-5: #78350F;
  /* Colors */
  --color-offwhite: #f9f9f9;
  --color-gray-1: #eeeeee;
  --color-gray-2: #dedede;
  --color-gray-3: #ccc;
  --color-gray-4: #475569;
  --color-gray-5: #333;

  --color-dark: #404040;
  --color-darker: #333;
  --color-darkest: #282828;
  --color-blue-dark: #494eaa;
  --color-blue-med: #6990ee;
  --color-blue-light: #d8ebfe;
  --color-red-dark: #a2204f;
  --color-red-med: #eb6176;
  --color-red-light: #fce2de;
  --color-green-dark: #146146;
  --color-green-med: #26a573;
  --color-green-light: #ccf3ca;
  --m-color-orange-dark: #963712;
  --m-color-orange-med: #e36f4f;
  --m-color-orange-light: #f6e5bb;

  --m-color-disabled-fg: var(--m-color-gray-4);
  --m-color-disabled-bg: var(--m-color-gray-1);

  --m-color-primary-action: #157bb6;
  --m-color-secondary-action: var(--m-color-blue-med);
  --m-color-tertiary-action: tan;

  --m-color-primary-bg: white;
  --m-color-secondary-bg: #F5F3F7;
  --m-color-tertiary-bg: #fafafa;
  --m-color-border: var(--m-color-gray-2);

}


gem-table {
  display: block;
  min-height: 200px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 0 5px;
  position: relative;
}
gem-table table {
  margin-top: calc(-1rem - 12px);
  background-color: var(--color-gray-5);
  width: 100%;
  border-spacing: 0px;
}
gem-table table thead {
  opacity: 0;
}
gem-table table .gem-table-selected {
  background-color: var(--color-yellow-2) !important;
}
gem-table table th, gem-table table td {
  padding: 4px 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
gem-table table tbody tr:nth-child(even) {
  background-color: var(--color-offwhite);
}
gem-table table tbody tr:nth-child(odd) {
  background-color: var(--color-gray-1);
}
gem-table table tbody tr:hover {
  background-color: var(--color-yellow-1);
}
gem-table table tbody td {
  border-bottom: 1px solid var(--color-gray-3);
  max-width: 200px;
  box-sizing: border-box;
}
gem-table .gem-table-head {
  top: -1px;
  display: flex;
  position: sticky;
  top: 0;
  color: white;
  background-color: var(--color-gray-5);
  z-index: 1;
  border-left: 1px solid #DDD;
  -webkit-user-select: none;
}
gem-table .gem-table-head .gem-resizer {
  bottom: 0;
  cursor: col-resize;
  position: absolute;
  right: 1px;
  width: 20px;
  z-index: 10;
  border-right: 1px solid white;
  height: 50%;
  top: 25%;
}
gem-table .gem-table-head .gem-table-th {
  min-width: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-right: 1px solid #DDD;
  user-select: none;
  position: relative;
  display: inline-block;
  margin-right: 1px;
  text-align: center;
  font-weight: bold;
  padding: 4px 16px;
}
div.paleBlueRows {
  font-family: "Times New Roman", Times, serif;
  border: 1px solid #FFFFFF;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}
.divTable.paleBlueRows .divTableCell, .divTable.paleBlueRows .divTableHead {
  border: 1px solid #FFFFFF;
  padding: 3px 2px;
}
.divTable.paleBlueRows .divTableBody .divTableCell {
  font-size: 13px;
}
.divTable.paleBlueRows .divTableRow:nth-child(even) {
  background: #D0E4F5;
}
.divTable.paleBlueRows .divTableHeading {
  background: #0B6FA4;
  border-bottom: 5px solid #FFFFFF;
}
.divTable.paleBlueRows .divTableHeading .divTableHead {
  font-size: 17px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
  border-left: 2px solid #FFFFFF;
}
.divTable.paleBlueRows .divTableHeading .divTableHead:first-child {
  border-left: none;
}
.paleBlueRows .tableFootStyle {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  background: #D0E4F5;
  border-top: 3px solid #444444;
}
.paleBlueRows .tableFootStyle {
  font-size: 14px;
}
/* DivTable.com */
.divTable {
  display: table;
}
.divTableRow {
  display: table-row;
}
.divTableHeading {
  display: table-header-group;
}
.divTableCell, .divTableHead {
  display: table-cell;
}
.divTableHeading {
  display: table-header-group;
}
.divTableFoot {
  display: table-footer-group;
}
.divTableBody {
  display: table-row-group;
}

/** form */
form.w-full {
  max-width: 100%;
}
.notice {
  color: var(--color-red-dark);
  font-size: 0.7rem;
}
select {
  height: 2.2rem;
}
input, textarea, select {
  padding: 0.3rem;
  border: 1px solid var(--color-gray-4);
  border-radius: 0.2rem;
  width: 100%;
  background: var(--color-gray-1);
}
input[type='submit'] {
  border-radius: 1rem;
  border: 2px solid var(--color-green-med);
  background-color: var(--color-green-med);
  color: white;
  padding: 0.1rem 1rem;
  margin: 0.5rem 0;
}
input[type='submit']:hover {
  cursor: pointer;
  background-color: var(--color-green-dark);
}
form div.field {
  margin: 0.5rem 0;
}
form div.field label {
  display: block;
  color: var(--color-gray-4);
}
form div.field > input, form div.field > textarea, form div.field > select {
  padding: 0.4rem;
  border: 1px solid var(--color-gray-4);
  border-radius: 0.2rem;
  width: 100%;
  background: var(--color-gray-1);
}
form div.field .field_with_errors > input, form div.field .field_with_errors > textarea, form div.field .field_with_errors > select {
  padding: 0.1rem;
  border: 1px solid var(--color-gray-4);
  border-radius: 0.2rem;
  width: 100%;
  background: var(--color-red-light);
}
form div.field input:focus, form div.field textarea:focus, form div.field select:focus {
  background: white;
}
form div.field input[type='radio'] {
  width: 3rem;
}
form div.field input[type='submit'] {
  border-radius: 1rem;
  border: 2px solid var(--color-green-med);
  background-color: var(--color-green-med);
  color: white;
  padding: 0.1rem 1rem;
  margin: 0.5rem 0;
}
form div.field input[type='submit']:hover {
  cursor: pointer;
  background-color: var(--color-green-dark);
}
form .ts-control {
  border: 1px solid var(--color-gray-4);
}
.required label {
  color: var(--color-red-dark) !important;
}
form.search-form {
  padding: 0.5rem 0;
}
form.search-form input, form.search-form textarea, form.search-form select {
  padding: 0.2rem;
  border: 1px solid var(--color-gray-4);
  border-radius: 0.2rem;
  background: white;
  font-size: 12px;
  line-height: 18px;
}
form.search-form input[type='submit'] {
  background-color: var(--color-blue-med);
  border: none;
}

.detail-box {
  margin-top: 0.2rem;
  padding-top: 1rem;
  border-top: 2px solid var(--color-gray-4);
}
.detail-container h3 {
  color: var(--color-gray-4);
}
.detail-item h3 {
  color: var(--color-gray-4);
}


float-box {
  position: relative;
  display: block;
}
float-box .float-item {
  position: absolute;
  top: 0;
  left: 0;
}
.float-item {
  width: 216px;
  padding: 12px 0;
}
.float-item li {
  list-style: none;
  font-size: 1rem;
  color: var(--color-dark);
  padding-left: 1.5em;
  padding-bottom: 8px;
}
.float-item .group-header {
  font-weight: bold;
}
.float-item a {
  font-size: 1.3rem;
  text-decoration: none;
  color: var(--color-dark);
  padding: 0.7rem 1rem;
  border-radius: 5rem;
}
.float-item a:hover {
  background: var(--color-gray-1);
}
.float-item > font-icon {
  position: absolute;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--color-gray-4);
}
.green-button {
  border-radius: 1rem;
  background-color: var(--color-green-med);
  color: white;
  padding: 0.3rem 1rem;
  cursor: pointer;
}
.yellow-button {
  cursor: pointer;
  border-radius: 1rem;
  background-color: var(--color-yellow-3);
  color: white;
  padding: 0.3rem 1rem;
}
.danger-button {
  cursor: pointer;
  border-radius: 1rem;
  background-color: var(--color-red-med);
  color: white;
  padding: 0.3rem 1rem;
}
.list-link {
  font-size: 1.2rem;
}

@font-face {
  font-family: 'haoli';
  src: url('https://s3.cn-northwest-1.amazonaws.com.cn/cdn.drmedmk.com/fonts/haoli.woff') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: auto;
}
haoli-icon {
    font-family: 'haoli';
    display: inline-block;
}

haoli-icon[name=paste]:before {
    content: '\e92d';
}

haoli-icon[name=list]:before {
    content: '\e9bb';
}
haoli-icon[name=printer]:before {
    content: '\e954';
}
haoli-icon[name=user-plus]:before {
    content: '\e973';
}
haoli-icon[name=enter]:before {
    content: '\ea13';
}
haoli-icon[name=exit]:before {
    content: '\ea14';
}
haoli-icon[name=download]:before {
    content: '\e960';
}
haoli-icon[name=upload]:before {
    content: '\e961';
}

.title-1 {
  color: var(--color-gray-4);
}
#error_explanation li {
  color: var(--color-red-dark);
}
.fade-notice {
  display: inline-block;
  animation-duration: 2s;
  animation-name: fade_to_transpant;
  opacity: 0;
  animation-direction: alternate;
  animation-iteration-count: 2;
  font-size: 1.5rem;
  border-radius: 9999px;
  padding: 0.5rem 2rem;
  z-index: 0;
}
.fade-notice:before {
  display: inline-block;
  font-size: 1.5rem;
}
.fade-notice[type=danger] {
  color: red;
  background: var(--color-red-light);
}
.fade-notice[type=success] {
  color: green;
  background: var(--color-green-light);
}
.fade-notice[type=success]:before {
  content: "\ea10";
  color: green;
}
.fade-notice[type=danger]:before {
  content: "\ea07";
  color: red;
}
@keyframes fade_to_transpant {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@font-face {
  font-family: 'icomoon';
  // src: url('https://s3.cn-northwest-1.amazonaws.com.cn/cdn.drmedmk.com/fonts/2-icomoon.woff') format('woff2');
  src: url('https://s3.cn-northwest-1.amazonaws.com.cn/cdn.drmedmk.com/fonts/2-icomoon.woff') format('woff2');
  // src: url('https://s3.cn-northwest-1.amazonaws.com.cn/cdn.drmedmk.com/fonts/1-icomoon.woff') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: auto;
}
font-icon {
    font-family: 'icomoon';
    display: inline-block;
}

font-icon[name=cancel]:before { content: '\ea0d'}
font-icon[name=cross]:before { content: '\ea0f'}
font-icon[name=location]:before {
    content: '\e948';
}
font-icon[name=spinner]:before {
    content: '\e982';
}

font-icon[name=home]:before {
    content: '\e900';
}
font-icon[name=newspaper]:before {
    content: '\e904';
}
font-icon[name=pencil]:before {
    content: '\e906';
}
font-icon[name=image]:before {
    content: '\e90e';
}
font-icon[name=play]:before {
    content: '\e912';
}
font-icon[name=book]:before {
    content: '\e91f';
}
font-icon[name=folder]:before {
    content: '\e930';
}
font-icon[name=qrcode]:before {content: '\e938';}
font-icon[name=tag]:before {content: '\e936';}
font-icon[name=cart]:before {content: '\e93a';}
font-icon[name=yen]:before {content: '\e93e';}
font-icon[name=phone]:before {content: '\e942';}
font-icon[name=address]:before {content: '\e944';}
font-icon[name=chat]:before {content: '\e96c';}
font-icon[name=user]:before {content: '\e972';}
font-icon[name=lock]:before {content: '\e98f';}
font-icon[name=unlock]:before {content: '\e990';}
font-icon[name=cog]:before {content: '\e994';}
font-icon[name=wrench]:before {content: '\e991';}
font-icon[name=gift]:before {content: '\e99f';}

font-icon[name=stats]:before {content: '\e99b';}
font-icon[name=bin]:before {content: '\e9ac';}
font-icon[name=list]:before {content: '\e9bb';}
font-icon[name=download]:before {content: '\e9c7';}
font-icon[name=upload]:before {content: '\e9c8';}
font-icon[name=eye]:before {content: '\e9ce';}

font-icon[name=heart]:before {content: '\e9da';}
font-icon[name=warning]:before {content: '\ea07';}
font-icon[name=notification]:before {content: '\ea08';}
font-icon[name=question]:before {content: '\ea09';}
font-icon[name=blocked]:before {content: '\ea0e';}
font-icon[name=check-mark]:before {content: '\ea10';}
font-icon[name=checked]:before {content: '\ea52';}
font-icon[name=unchecked]:before {content: '\ea53';}

font-icon[name=share]:before {content: '\ea82';}
font-icon[name=radio-checked]:before {content: '\ea54';}
font-icon[name=radio-unchecked]:before {content: '\ea56';}

font-icon[name=star]:before {content: '\e9d9';}

yellow-badge {
    border-radius: 9999px;;
    background-color: var(--color-yellow-5);
    color: var(--color-yellow-1);
    display: inline-block;
    min-width: 1em;
    height: 1em;
    text-align: center;
    font-weight: 600;
    line-height: 1em;
    padding: 2px;
}
green-badge {
    border-radius: 9999px;;
    background-color: green;
    color: white;
    display: inline-block;
    min-width: 1em;
    height: 1em;
    text-align: center;
    font-weight: 600;
    line-height: 1em;
    padding: 2px;
}

red-badge {
    border-radius: 9999px;;
    background-color: red;
    color: white;
    display: inline-block;
    min-width: 1em;
    height: 1em;
    text-align: center;
    font-weight: 600;
    line-height: 1em;
    padding: 2px;
}