/** ele admin pro dynamic theme license by http://eleadmin.com */
@import './index.less';

// 侧边栏
@sidebar-light-shadow: var(--sidebar-light-shadow);
@sidebar-dark-shadow: var(--sidebar-dark-shadow);

// 顶栏
@header-light-shadow: var(--header-light-shadow);
@header-dark-shadow: var(--header-dark-shadow);
@header-tool-hover-bg: var(--header-tool-hover-bg);
@header-dark-tool-hover-bg: var(--header-dark-tool-hover-bg);

// logo
@logo-light-shadow: var(--logo-light-shadow);
@logo-dark-shadow: var(--logo-dark-shadow);

/** 重写colorPalette函数, 增加对var()的支持 */
.colorPaletteMixin2() {
  @functions: ~`(function() {
  var hueStep = 2;
  var saturationStep = 0.16;
  var saturationStep2 = 0.05;
  var brightnessStep1 = 0.05;
  var brightnessStep2 = 0.15;
  var lightColorCount = 5;
  var darkColorCount = 4;

  var getHue = function(hsv, i, isLight) {
    var hue;
    if (hsv.h >= 60 && hsv.h <= 240) {
      hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
    } else {
      hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
    }
    if (hue < 0) {
      hue += 360;
    } else if (hue >= 360) {
      hue -= 360;
    }
    return Math.round(hue);
  };
  var getSaturation = function(hsv, i, isLight) {
    var saturation;
    if (isLight) {
      saturation = hsv.s - saturationStep * i;
    } else if (i === darkColorCount) {
      saturation = hsv.s + saturationStep;
    } else {
      saturation = hsv.s + saturationStep2 * i;
    }
    if (saturation > 1) {
      saturation = 1;
    }
    if (isLight && i === lightColorCount && saturation > 0.1) {
      saturation = 0.1;
    }
    if (saturation < 0.06) {
      saturation = 0.06;
    }
    return Number(saturation.toFixed(2));
  };
  var getValue = function(hsv, i, isLight) {
    var value;
    if (isLight) {
      value = hsv.v + brightnessStep1 * i;
    }else{
      value = hsv.v - brightnessStep2 * i
    }
    if (value > 1) {
      value = 1;
    }
    return Number(value.toFixed(2))
  };

  this.colorPalette = function(color, index) {
    if(color.indexOf('var(--') === 0) {
      if(color === 'var(--primary-color)' || color === 'var(--info-color)') {
        return 'var(--primary-' + index + ')';
      }
      if(color === 'var(--error-color)' || color === 'var(--highlight-color)') {
        return 'var(--red-' + index + ')';
      }
      if(color === 'var(--warning-color)') {
        return 'var(--gold-' + index + ')';
      }
      if(color === 'var(--success-color)') {
        return 'var(--green-' + index + ')';
      }
      return color.replace(')', '-unknown)');
    }
    var isLight = index <= 6;
    var hsv = tinycolor(color).toHsv();
    var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
    return tinycolor({
      h: getHue(hsv, i, isLight),
      s: getSaturation(hsv, i, isLight),
      v: getValue(hsv, i, isLight),
    }).toHexString();
  };
})()`;
}

.colorPaletteMixin2();

/** css变量 */
:root {
  --blue-1: #e6f7ff;
  --blue-2: #bae7ff;
  --blue-3: #91d5ff;
  --blue-4: #69c0ff;
  --blue-5: #40a9ff;
  --blue-6: #1890ff;
  --blue-7: #096dd9;
  --blue-8: #0050b3;
  --blue-9: #003a8c;
  --blue-10: #002766;

  --green-1: #f6ffed;
  --green-2: #d9f7be;
  --green-3: #b7eb8f;
  --green-4: #95de64;
  --green-5: #73d13d;
  --green-6: #52c41a;
  --green-7: #389e0d;
  --green-8: #237804;
  --green-9: #135200;
  --green-10: #092b00;

  --red-1: #fff1f0;
  --red-2: #ffccc7;
  --red-3: #ffa39e;
  --red-4: #ff7875;
  --red-5: #ff4d4f;
  --red-6: #f5222d;
  --red-7: #cf1322;
  --red-8: #a8071a;
  --red-9: #820014;
  --red-10: #5c0011;

  --gold-1: #fffbe6;
  --gold-2: #fff1b8;
  --gold-3: #ffe58f;
  --gold-4: #ffd666;
  --gold-5: #ffc53d;
  --gold-6: #faad14;
  --gold-7: #d48806;
  --gold-8: #ad6800;
  --gold-9: #874d00;
  --gold-10: #613400;

  --purple-1: #f9f0ff;
  --purple-2: #efdbff;
  --purple-3: #d3adf7;
  --purple-4: #b37feb;
  --purple-5: #9254de;
  --purple-6: #722ed1;
  --purple-7: #531dab;
  --purple-8: #391085;
  --purple-9: #22075e;
  --purple-10: #120338;

  --cyan-1: #e6fffb;
  --cyan-2: #b5f5ec;
  --cyan-3: #87e8de;
  --cyan-4: #5cdbd3;
  --cyan-5: #36cfc9;
  --cyan-6: #13c2c2;
  --cyan-7: #08979c;
  --cyan-8: #006d75;
  --cyan-9: #00474f;
  --cyan-10: #002329;

  --pink-1: #fff0f6;
  --pink-2: #ffd6e7;
  --pink-3: #ffadd2;
  --pink-4: #ff85c0;
  --pink-5: #f759ab;
  --pink-6: #eb2f96;
  --pink-7: #c41d7f;
  --pink-8: #9e1068;
  --pink-9: #780650;
  --pink-10: #520339;

  --orange-1: #fff7e6;
  --orange-2: #ffe7ba;
  --orange-3: #ffd591;
  --orange-4: #ffc069;
  --orange-5: #ffa940;
  --orange-6: #fa8c16;
  --orange-7: #d46b08;
  --orange-8: #ad4e00;
  --orange-9: #873800;
  --orange-10: #612500;

  --primary-color: var(--blue-6);
  --success-color: var(--green-6);
  --error-color: var(--red-5);
  --warning-color: var(--gold-6);
  --info-color: var(--primary-color);
  --processing-color: var(--blue-6);
  --highlight-color: var(--red-5);

  --primary-1: var(--blue-1);
  --primary-2: var(--blue-2);
  --primary-3: var(--blue-3);
  --primary-4: var(--blue-4);
  --primary-5: var(--blue-5);
  --primary-6: var(--blue-6);
  --primary-7: var(--blue-7);
  --primary-8: var(--blue-8);
  --primary-9: var(--blue-9);
  --primary-10: var(--blue-10);

  --primary-fade-8: fade(#1890ff, 8%);
  --primary-fade-20: fade(#1890ff, 20%);

  --success-fade-20: fade(#52c41a, 20%);
  --error-fade-20: fade(#ff4d4f, 20%);
  --warning-fade-20: fade(#faad14, 20%);

  --body-background: #fff;
  --component-background: #fff;

  --popover-background: @component-background;
  --popover-customize-border-color: @border-color-split;

  --text-color: fade(@black, 85%);
  --text-color-secondary: fade(@black, 45%);
  --text-color-inverse: @white;
  --icon-color-hover: fade(@black, 75%);
  --heading-color: fade(@black, 85%);

  --item-hover-bg: #f5f5f5;

  // Border color
  --border-color-base: hsv(0, 0, 85%);
  --border-color-split: hsv(0, 0, 94%);
  --border-color-inverse: @white;

  // Outline
  --background-color-light: hsv(0, 0, 98%);
  --background-color-base: hsv(0, 0, 96%);

  // Disabled states
  --disabled-color: fade(#000, 25%);
  --disabled-bg: @background-color-base;
  --disabled-color-dark: fade(#fff, 35%);

  // Shadow
  --shadow-color: rgba(0, 0, 0, 0.15);
  --box-shadow-base: @shadow-1-down;
  --shadow-1-up: 0 -2px 8px @shadow-color;
  --shadow-1-down: 0 2px 8px @shadow-color;
  --shadow-1-left: -2px 0 8px @shadow-color;
  --shadow-1-right: 2px 0 8px @shadow-color;
  --shadow-2: 0 4px 12px @shadow-color;

  // Buttons
  --btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
  --btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
  --btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);

  --btn-default-bg: @component-background;

  --btn-default-ghost-color: @component-background;
  --btn-default-ghost-border: @component-background;

  --btn-text-hover-bg: rgba(0, 0, 0, 0.018);
  --btn-text-active-bg: rgba(0, 0, 0, 0.028);

  // Checkbox
  --checkbox-check-bg: @checkbox-check-color;

  // Descriptions
  --descriptions-bg: #fafafa;

  // Divider
  --divider-color: rgba(0, 0, 0, 6%);

  // Dropdown
  --dropdown-menu-submenu-disabled-bg: @component-background;

  // Radio
  --radio-dot-disabled-color: fade(@black, 20%);
  --radio-solid-checked-color: @component-background;

  // Radio buttons
  --radio-disabled-button-checked-bg: tint(@black, 90%);

  // Layout
  --layout-body-background: #f0f2f5;
  --layout-header-background: #001529;
  --layout-trigger-background: #002140;
  //--layout-sider-background-1: tint(#001529, 10%);

  // Dropdown
  --dropdown-menu-bg: @component-background;

  // Input
  --input-placeholder-color: hsv(0, 0, 75%);
  --input-icon-color: @input-color;
  --input-bg: @component-background;
  --input-number-handler-active-bg: #f4f4f4;
  --input-icon-hover-color: fade(@black, 85%);

  // Mentions
  --mentions-dropdown-bg: @component-background;

  // Select
  --select-dropdown-bg: @component-background;
  --select-background: @component-background;
  --select-clear-background: @select-background;
  --select-selection-item-bg: @background-color-base;
  --select-selection-item-border-color: @border-color-split;
  --select-multiple-disabled-background: @input-disabled-bg;
  --select-multiple-item-disabled-color: #bfbfbf;
  --select-multiple-item-disabled-border-color: @select-border-color;

  // Cascader
  --cascader-bg: @component-background;
  --cascader-menu-bg: @component-background;
  --cascader-menu-border-color-split: @border-color-split;

  // Tooltip
  --tooltip-bg: rgba(0, 0, 0, 0.75);

  // Popover
  --popover-bg: @component-background;

  // Modal
  --modal-header-bg: @component-background;
  --modal-header-border-color-split: @border-color-split;
  --modal-content-bg: @component-background;
  --modal-footer-border-color-split: @border-color-split;

  // Menu
  --menu-popup-bg: @component-background;
  --menu-dark-bg: @layout-header-background;
  --menu-dark-submenu-bg: #000c17;

  // Table
  --table-header-bg: @background-color-light;
  --table-header-sort-bg: @background-color-base;
  --table-body-sort-bg: rgba(0, 0, 0, 0.01);
  --table-row-hover-bg: @primary-1;
  --table-expanded-row-bg: #fbfbfb;
  --table-header-sort-active-bg: darken(hsv(0, 0, 98%), 3%);
  --table-header-filter-active-bg: darken(darken(hsv(0, 0, 98%), 3%), 5%);

  // Rate
  --rate-star-bg: @border-color-split;

  // Card
  --card-actions-background: @background-color-light;
  --card-skeleton-bg: #cfd8dc;
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
  --gradient-min: fade(#cfd8dc, 20%);
  --gradient-max: fade(#cfd8dc, 40%);

  // Comment
  --comment-bg: inherit;
  --comment-author-time-color: #ccc;
  --comment-action-hover-color: #595959;

  // BackTop
  --back-top-bg: fade(@black, 45%);
  --back-top-hover-bg: fade(@black, 65%);

  // Avatar
  --avatar-bg: #ccc;

  // Pagination
  --pagination-item-bg: @component-background;
  --pagination-item-bg-active: @component-background;
  --pagination-item-link-bg: @component-background;
  --pagination-item-disabled-color-active: @white;
  --pagination-item-disabled-bg-active: darken(hsv(0, 0, 96%), 10%);
  --pagination-item-input-bg: @component-background;

  // PageHeader
  --page-header-back-color: #000;

  // Slider
  --slider-rail-background-color: @background-color-base;
  --slider-rail-background-color-hover: #e1e1e1;
  --slider-dot-border-color: @border-color-split;
  --slider-dot-border-color-active: @primary-4;

  // Skeleton
  --skeleton-to-color: shade(@skeleton-color, 5%);

  // Transfer
  --transfer-item-hover-bg: @item-hover-bg;

  // Message
  --message-notice-content-bg: @component-background;

  // Drawer
  --drawer-bg: @component-background;

  // Timeline
  --timeline-color: @border-color-split;
  --timeline-dot-color: @primary-color;

  // Image
  --image-preview-operation-disabled-color: rgba(255, 255, 255, 0.45);

  // Steps
  --steps-nav-arrow-color: fade(@black, 25%);
  --steps-background: @component-background;

  // Notification
  --notification-bg: @component-background;

  // 侧边栏
  --sidebar-light-shadow: 1px 3px 3px rgba(0, 21, 41, .08);
  --sidebar-dark-shadow: 0 4px 4px rgba(0, 0, 0, .35);

  // 顶栏
  --header-light-shadow: 0 1px 4px rgba(0, 21, 41, .08);
  --header-dark-shadow: 0 1px 4px rgba(0, 0, 0, .1);
  --header-tool-hover-bg: rgba(0, 0, 0, .025);
  --header-dark-tool-hover-bg: rgba(255, 255, 255, .05);

  // logo
  --logo-light-shadow: 1px 2px 3px rgba(0, 21, 41, .08);
  --logo-dark-shadow: 0 3px 4px rgba(0, 0, 0, .35);
}

.ele-admin-theme-dark {
  --blue-1: #111d2c;
  --blue-2: #112a45;
  --blue-3: #15395b;
  --blue-4: #164c7e;
  --blue-5: #1765ad;
  --blue-6: #177ddc;
  --blue-7: #3c9ae8;
  --blue-8: #65b7f3;
  --blue-9: #8dcff8;
  --blue-10: #b7e3fa;

  --green-1: #162312;
  --green-2: #1d3712;
  --green-3: #274916;
  --green-4: #306317;
  --green-5: #3c8618;
  --green-6: #49aa19;
  --green-7: #6abe39;
  --green-8: #8fd460;
  --green-9: #b2e58b;
  --green-10: #d5f2bb;

  --red-1: #2a1215;
  --red-2: #431418;
  --red-3: #58181c;
  --red-4: #791a1f;
  --red-5: #a61d24;
  --red-6: #f5222d;
  --red-7: #e84749;
  --red-8: #f37370;
  --red-9: #f89f9a;
  --red-10: #fac8c3;

  --gold-1: #2b2111;
  --gold-2: #443111;
  --gold-3: #594214;
  --gold-4: #7c5914;
  --gold-5: #aa7714;
  --gold-6: #d89614;
  --gold-7: #e8b339;
  --gold-8: #f3cc62;
  --gold-9: #f8df8b;
  --gold-10: #faedb5;

  --purple-1: #1a1325;
  --purple-2: #24163a;
  --purple-3: #301c4d;
  --purple-4: #3e2069;
  --purple-5: #51258f;
  --purple-6: #642ab5;
  --purple-7: #854eca;
  --purple-8: #ab7ae0;
  --purple-9: #cda8f0;
  --purple-10: #ebd7fa;

  --cyan-1: #112123;
  --cyan-2: #113536;
  --cyan-3: #144848;
  --cyan-4: #146262;
  --cyan-5: #138585;
  --cyan-6: #13a8a8;
  --cyan-7: #33bcb7;
  --cyan-8: #58d1c9;
  --cyan-9: #84e2d8;
  --cyan-10: #b2f1e8;

  --pink-1: #291321;
  --pink-2: #40162f;
  --pink-3: #551c3b;
  --pink-4: #75204f;
  --pink-5: #a02669;
  --pink-6: #cb2b83;
  --pink-7: #e0529c;
  --pink-8: #f37fb7;
  --pink-9: #f8a8cc;
  --pink-10: #fad2e3;

  --orange-1: #2b1d11;
  --orange-2: #442a11;
  --orange-3: #593815;
  --orange-4: #7c4a15;
  --orange-5: #aa6215;
  --orange-6: #d87a16;
  --orange-7: #e89a3c;
  --orange-8: #f3b765;
  --orange-9: #f8cf8d;
  --orange-10: #fae3b7;

  --primary-color: var(--blue-6);
  --success-color: var(--green-6);
  --error-color: var(--red-5);
  --warning-color: var(--gold-6);
  --info-color: var(--primary-color);
  --processing-color: var(--blue-6);
  --highlight-color: var(--red-5);

  --primary-1: var(--blue-1);
  --primary-2: var(--blue-2);
  --primary-3: var(--blue-3);
  --primary-4: var(--blue-4);
  --primary-5: var(--blue-5);
  --primary-6: var(--blue-6);
  --primary-7: var(--blue-7);
  --primary-8: var(--blue-8);
  --primary-9: var(--blue-9);
  --primary-10: var(--blue-10);

  --body-background: @black;
  --component-background: #141414;

  --popover-background: #1f1f1f;
  --popover-customize-border-color: #3a3a3a;

  --text-color: fade(@white, 85%);
  --text-color-secondary: fade(@white, 45%);
  --text-color-inverse: @white;
  --icon-color-hover: fade(@white, 75%);
  --heading-color: fade(@white, 85%);

  --item-hover-bg: fade(@white, 8%);

  // Border color
  --border-color-base: #434343;
  --border-color-split: #303030;
  --border-color-inverse: @black;

  // Outline
  --background-color-light: fade(@white, 4%);
  --background-color-base: fade(@white, 8%);

  // Disabled states
  --disabled-color: fade(@white, 30%);
  --disabled-bg: @background-color-base;
  --disabled-color-dark: fade(@white, 30%);

  // Shadow
  --shadow-color: rgba(0, 0, 0, 0.45);
  --box-shadow-base: @shadow-2;
  --shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.32), 0 -9px 28px 0 rgba(0, 0, 0, 0.2),
    0 -12px 48px 16px rgba(0, 0, 0, 0.12);
  --shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.32), 0 9px 28px 0 rgba(0, 0, 0, 0.2),
  0 12px 48px 16px rgba(0, 0, 0, 0.12);
  --shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.32), 9px 0 28px 0 rgba(0, 0, 0, 0.2),
  12px 0 48px 16px rgba(0, 0, 0, 0.12);
  --shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 6px 16px 0 rgba(0, 0, 0, 0.32),
  0 9px 28px 8px rgba(0, 0, 0, 0.2);

  // Buttons
  --btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
  --btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
  --btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);

  --btn-default-bg: transparent;

  --btn-default-ghost-color: @text-color;
  --btn-default-ghost-border: fade(@white, 25%);

  --btn-text-hover-bg: rgba(255, 255, 255, 0.03);
  --btn-text-active-bg: rgba(255, 255, 255, 0.04);

  // Checkbox
  --checkbox-check-bg: transparent;

  // Descriptions
  --descriptions-bg: @background-color-light;

  // Divider
  --divider-color: rgba(255, 255, 255, 12%);

  // Dropdown
  --dropdown-menu-submenu-disabled-bg: transparent;

  // Radio
  --radio-dot-disabled-color: fade(@white, 20%);
  --radio-solid-checked-color: @white;

  // Radio buttons
  --radio-disabled-button-checked-bg: fade(@white, 20%);

  // Layout
  --layout-body-background: @body-background;
  --layout-header-background: @popover-background;
  --layout-trigger-background: #262626;
  //--layout-sider-background-1: tint(#1f1f1f, 10%);

  // Dropdown
  --dropdown-menu-bg: @popover-background;

  // Input
  --input-placeholder-color: fade(@white, 30%);
  --input-icon-color: fade(@white, 30%);
  --input-bg: transparent;
  --input-number-handler-active-bg: @item-hover-bg;
  --input-icon-hover-color: fade(@white, 85%);

  // Mentions
  --mentions-dropdown-bg: @popover-background;

  // Select
  --select-dropdown-bg: @popover-background;
  --select-background: transparent;
  --select-clear-background: @component-background;
  --select-selection-item-bg: fade(@white, 8);
  --select-selection-item-border-color: @border-color-split;
  --select-multiple-disabled-background: @component-background;
  --select-multiple-item-disabled-color: #595959;
  --select-multiple-item-disabled-border-color: @popover-background;

  // Cascader
  --cascader-bg: transparent;
  --cascader-menu-bg: @popover-background;
  --cascader-menu-border-color-split: @border-color-split;

  // Tooltip
  --tooltip-bg: #434343;

  // Popover
  --popover-bg: @popover-background;

  // Modal
  --modal-header-bg: @popover-background;
  --modal-header-border-color-split: @border-color-split;
  --modal-content-bg: @popover-background;
  --modal-footer-border-color-split: @border-color-split;

  // Menu
  --menu-popup-bg: @popover-background;
  --menu-dark-bg: @popover-background;
  --menu-dark-submenu-bg: @component-background;

  // Table
  --table-header-bg: #1d1d1d;
  --table-header-sort-bg: #262626;
  --table-body-sort-bg: fade(@white, 1%);
  --table-row-hover-bg: #262626;
  --table-expanded-row-bg: @table-header-bg;
  --table-header-sort-active-bg: #303030;
  --table-header-filter-active-bg: #434343;

  // Rate
  --rate-star-bg: fade(@white, 12%);

  // Card
  --card-actions-background: @component-background;
  --card-skeleton-bg: #303030;
  --card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.64), 0 3px 6px 0 rgba(0, 0, 0, 0.48), 0 5px 12px 4px rgba(0, 0, 0, 0.36);
  --gradient-min: fade(#303030, 20%);
  --gradient-max: fade(#303030, 40%);

  // Comment
  --comment-bg: transparent;
  --comment-author-time-color: fade(@white, 30%);
  --comment-action-hover-color: fade(@white, 65%);

  // BackTop
  --back-top-bg: var(--tooltip-bg);
  --back-top-hover-bg: var(--border-color-split);

  // Avatar
  --avatar-bg: fade(@white, 30%);

  // Pagination
  --pagination-item-bg: transparent;
  --pagination-item-bg-active: transparent;
  --pagination-item-link-bg: transparent;
  --pagination-item-disabled-color-active: @black;
  --pagination-item-disabled-bg-active: fade(@white, 25%);
  --pagination-item-input-bg: @pagination-item-bg;

  // PageHeader
  --page-header-back-color: @icon-color;

  // Slider
  --slider-rail-background-color: #262626;
  --slider-rail-background-color-hover: @border-color-base;
  --slider-dot-border-color: @border-color-split;
  --slider-dot-border-color-active: @primary-4;

  // Skeleton
  --skeleton-to-color: fade(@white, 16%);

  // Transfer
  --transfer-item-hover-bg: #262626;

  // Message
  --message-notice-content-bg: @popover-background;

  // Drawer
  --drawer-bg: @popover-background;

  // Timeline
  --timeline-color: @border-color-split;
  --timeline-dot-color: @primary-color;

  // Steps
  --steps-nav-arrow-color: fade(@white, 20%);
  --steps-background: transparent;

  // Notification
  --notification-bg: @popover-background;

  // 侧边栏
  --sidebar-light-shadow: 0 4px 4px rgba(0, 0, 0, .6);
  --sidebar-dark-shadow: 0 4px 4px rgba(0, 0, 0, .6);

  // 顶栏
  --header-light-shadow: 0 1px 4px rgba(0, 0, 0, .6);
  --header-dark-shadow: 0 1px 4px rgba(0, 0, 0, .6);
  --header-tool-hover-bg: rgba(255, 255, 255, .05);
  --header-dark-tool-hover-bg: rgba(255, 255, 255, .05);

  // logo
  --logo-light-shadow: 0 3px 4px rgba(0, 0, 0, .6);
  --logo-dark-shadow: 0 3px 4px rgba(0, 0, 0, .6);
}
