:root {
    /* color */
    --blue: #3582fb;
    --blue-800: #082c87;
    --blue-700: #1444ad;
    --blue-600: #2260d4;
    --blue-500: #2260d4;
    --blue-400: #5ea1ff;
    --blue-70: #b1d6ff;
    --blue-50: #d9edff;

    --black: #091e42;
    --black-900: #091e42;
    --black-800: #172b4d;
    --black-700: #253858;
    --black-600: #344563;
    --black-500: #42526e;
    --black-400: #505f79;
    --black-300: #5e6c84;
    --black-200: #6b778c;
    --black-100: #7a869a;

    --white: #f7f9fc;
    --white-90: #8993a4;
    --white-80: #a5adba;
    --white-70: #b3bac5;
    --white-60: #c1c7d0;
    --white-50: #dadfe5;
    --white-40: #ebedf0;
    --white-30: #f2f3f5;
    --white-20: #f7f9fc;
    --white-10: #f5f5f5;

    --yellow: #e3a72d;
    --yellow-600: #704207;
    --yellow-500: #916a00;
    --yellow-400: #e3a72d;
    --yellow-300: #f0c256;
    --yellow-200: #fcdc83;
    --yellow-100: #ffecac;
    --yellow-50: #fffae6;

    --red: #d82c0d;
    --red-600: #660600;
    --red-500: #8c0c00;
    --red-400: #d82c0d;
    --red-300: #e65331;
    --red-200: #ffa789;
    --red-100: #ffc8b3;
    --red-50: #ffebe6;

    --green: #36b37e;
    --green-500: #006644;
    --green-400: #00875a;
    --green-300: #36b37e;
    --green-200: #57d9a3;
    --green-100: #79f2c0;
    --green-70: #abf5d1;
    --green-50: #e3fcef;

    /**************** area *****************/
    /* theme */
    --default-font-color: var(--black);

    --login-bg: #f6f9fc;
    --block-content: #ffffff;
    --block-content-disabled: rgb(240, 240, 240);
    --block-content-disabled-font: rgb(180, 180, 180);
    --block-input-bg: rgb(240, 240, 240);
    --block-content-border: rgb(245, 245, 245);
    --block-desc: rgb(120, 120, 120);
    --block-desc-strong: rgb(80, 80, 80);
    --block-title: #253858;
    --login-tip: #546491;
    --login-addon: #536283;
    --login-email: #495281;
    --login-border: #dde6f2;
    --kc-title: #091e42;

    --tip-font: #546491;
    --table-thead-bg: #fafafa;
    --table-thead-col-title: rgba(0, 0, 0, 0.85);

    --table-card-button: rgb(238, 238, 238);
    --notify-icon-info: #1890ff;

    /* sider */
    --sider-selected: rgba(53, 130, 251, 0.05);
    --sider-menu-bg: #ffffff;
    --sider-footer-bg: #ffffff;
    --sider-menu-sub-bg: #ffffff;
    --sider-menu-submenu-font: #091e42;
    --sider-trigger-bg: var(--white-80);
    --sider-trigger-font: #ffffff;
    --sider-theme-shadow: rgba(107, 119, 140, 0.2);
    --footer-switch: #42526e;
    --footer-switch-bg: #f7f9fc;
    --footer-switch-inner-bg: #ffffff;

    /* for dark */
    --text-color: rgba(0, 0, 0, 0.85);
    --text-color-2: rgba(0, 0, 0, 0.45);
    --org--input-bg: rgba(53, 130, 251, 0.05);
    --org--input-font: var(--blue);
    --card-switch-active: rgb(238, 238, 238);
    --card-switch-active-font: rgba(0, 0, 0, 0.85);
    --org--icon: var(--blue);

    --side-icon-color: rgba(0, 0, 0, 0.65);
    --btn-bg: rgba(255, 255, 255, 1);

    --folder-name-color: rgb(100, 100, 150);
    --button-disable: #f0f0f0;
    --button-disable-font: #c8c8c8;

    /* drawer */
    --drawer-title: rgb(80, 80, 80);
    --drawer-sub-title: rgb(120, 120, 120);
    --drawer-content: rgb(250, 250, 250);
    --drawer-bg: #ffffff;
    --drawer-border: #f0f0f0;

    --pop-typeCard: rgb(245, 245, 245);
    --pop-typeCard-hover: rgb(250, 250, 250);
    --pop-typeCard-font: rgb(60, 60, 60);
    --drawer-title: #ffffff;
    --drawer-title-icon-path: #f7f9fc;

    /* table */
    --table-head: #f7f9fc;
    --table-head-font: #333;
    --table-tbody-font: #42526e;
    --table-container: #ffffff;

    /* loading */
    --vault-loading: #efefef;

    /* form */
    --form-border: #d9d9d9;

    /* health */
    --score-title: rgb(100, 100, 100);
    --percent-text: #7c8389;
    --pwd-icon-hover: #2f0ea5;

    --scrollbar-bg: #fafafa;
    --scrollbar-thumb: #c1c1c1;
    --loading-bar: rgb(240, 240, 240);

    /**************** area end *****************/

    /* loading */
    --vault-loading: #efefef;

    --error-view-bg: #fff;
    --error-view-regenerate: rgb(250, 250, 250);
    --error-view-regenerate-hover: rgb(245, 245, 245);

    --sticky-header-bg: var(--white-20);

    /* tips list */
    --tips-error: #fff2f0;
    --tips-warning: #fffbe6;
    --tips-font: rgb(100, 100, 100);

    --generator-font: rgb(100, 100, 100);
}

.dark {
	/* color */
	--blue: #177ddc;
	--blue-800: #082c87;
	--blue-700: #1444ad;
	--blue-600: #2260d4;
	--blue-500: #2260d4;
	--blue-400: #5ea1ff;
	--blue-70: #b1d6ff;
	--blue-50: #082c87;

	--black: #f3f3f3;
	--black-900: #e9e9e9;
	--black-800: #172b4d;
	--black-700: #253858;
	--black-600: #344563;
	--black-500: #42526e;
	--black-400: #505f79;
	--black-300: #5e6c84;
	--black-200: #6b778c;
	--black-100: rgba(255, 255, 255, 0.4);

	--white: #1f1f1f;
	--white-90: #8993a4;
	--white-80: rgb(165, 173, 186, 0.2);
	--white-70: #b3bac5;
	--white-60: #c1c7d0;
	--white-50: rgba(218, 223, 229, 0.3);
	--white-40: #505f79;
	--white-30: #F2F3F5;
	--white-20: #0d1116;
	--white-10: #f5f5f5;

	--text-color: rgba(255, 255, 255, 0.85);
	--text-color-2: rgba(255, 255, 255, 0.45);

	/* theme */
	--normal-font: #F2F3F5;
	--default-black: #161b22;
	--default-black-2: #0d1116;
	--default-font-color: var(--black);
	--default-sub-font: #a5adba;
	--default-block-active: rgba(165, 173, 186, 0.1);

	--org--input-bg: var(--default-block-active);
	--org--input-font: var(--black);
	--org--icon: var(--normal-font);

	--card-switch-active: #2F3640;
	--card-switch-active-font: #ffffff;

	--side-icon-color: #C1C7D0;

	--btn-bg: rgba(255, 255, 255, 0.25);
	--folder-name-color: var(--normal-font);
	--list-title-color: var(--normal-font);
	--border-base-color: #2e2e2e;
	--button-disable: hsla(0,0%,100%,.08);
	--button-disable-font: hsla(0,0%,100%,.3);

	--login-bg: var(--white);
	--block-content: var(--default-black);
	--block-content-disabled: #242A31;
	--block-content-disabled-font: #42526E;
	--block-content-disabled-hover: #2F3640;;
	--block-input-bg: #2F3640;
	--block-content-border: #6B778C;
	--block-content-item: #242a31;
	--block-desc: #7a869a;
	--block-desc-strong: #6b778c;
	--block-extra-title: var(--normal-font);
	--block-extra-desc: var(--block-desc);
	--block-title: var(--normal-font);

	--login-conetnt-shadow: 0 3px 6px -4px rgb(0 0 0 / 48%),
		0 6px 16px 0 rgb(0 0 0 / 32%), 0 9px 28px 8px rgb(0 0 0 / 20%);
	--login-tip: var(--black);
	--login-addon: var(--black);
	--login-email: var(--black);
	--login-border: #666;

	--drawer-title: var(--normal-font);
	--drawer-sub-title: #f3f3f3;
	--drawer-content-title: #f3f3f3;
	--drawer-content: rgba(250, 250, 250, 0.1);
	--drawer-title-icon-path: #f7f9fc;
	--drawer-bg: var(--default-black);
	--drawer-border: #2f2e2e;

	--pop-typeCard: rgba(245, 245, 245, 0.2);
	--pop-typeCard-hover: rgba(250, 250, 250, 0.2);
	--pop-typeCard-font: var(--black-900);

	--drawer-select-all-hover: rgba(245, 245, 245, .1);

	--table-head: rgba(250, 250, 250, 0.1);
	--table-head-font: var(--black-900);
	--table-tbody-font: var(--black-900);
	--table-thead-bg: var(--default-black-2);
	--table-thead-col-title: var(--normal-font);
	--table-card-button: rgba(238, 238, 238, 0.2);
	--table-container: var(--default-black-2);
	--table-filter-label-hover: #2F3640;

	--vault-loading: #171717;

	--tip-font: rgba(240, 240, 240, 0.7);

	--notify-icon-info: #b1d6ff;

	--sider-selected: rgba(53, 130, 251, 0.03);
	--sider-menu-bg: var(--default-black);
	--sider-menu-submenu-font: #C1C7D0;
	--sider-footer-bg: var(--default-black);
	--sider-menu-sub-bg: var(--default-black);
	--sider-trigger-bg: #667285;
	--sider-trigger-font: var(--default-black);
	--sider-theme-shadow: transparent;
	--footer-switch: var(--normal-font);
	--footer-switch-bg: var(--default-black-2);
	--footer-switch-inner-bg: var(--default-black);

	--form-border: rgba(217, 217, 217, 0.3);
    
	--score-title: rgba(255, 255, 255, 0.8);
	--percent-text: var(--normal-font);
	--pwd-icon-hover: #b1d6ff;

	--scrollbar-bg: var(--default-black);
	--scrollbar-thumb: rgba(193, 193, 193, 0.6);
	--loading-bar: rgba(240, 240, 240, .3);

	--error-view-bg: var(--white);
	--error-view-regenerate: rgba(250, 250, 250, 0.05);
	--error-view-regenerate-hover: rgba(245, 245, 245, 0.1);

    
	--sticky-header-bg: var(--default-black-2);
	--generator-font: #C1C7D0;
    
	--tips-error: #2a1215;
	--tips-warning: #2b2111;
	--tips-font: #C1C7D0;

	--rgb-243: rgba(243, 243, 243, .2);
	--rgb-230: rgba(230, 230, 230, .2);
	--rgb-100: #C1C7D0;
    
	--empty-p: var(--blue);
	--empty-span: var(--tips-font);
	--downlogo-bg: rgba(255, 255, 255, .2);
    
	--common-table-title: #EBEDF0;
	--common-table-subtitle: var(--block-desc);
	--common-table-thead-title: rgba(255,255,255,.85);
}
.dark .passwords-enterprise-view {
    --view-background-gray: var(--block-content);
    --view-border: rgba(235, 237, 240, 0.1);
    --normal-font: var(--normal-font);
    --view-background: #242a31;
    --list-title-color: var(--normal-font);
    --pop-folder-item-background: rgba(255, 255, 255, 0.1);
    --pop-folder-item-background-hover: rgba(245, 245, 245, 0.2);
    --pop-folder-item-background-active: rgba(68, 142, 247, 0.3);
    --pop-folder-item-background-disabled: rgba(240, 240, 240, 0.2);
    --pop-folder-item-color: var(--normal-font);
    --pop-folder-item-color-hover: var(--normal-font);
    --pop-folder-item-color-active: #fff;
    --pop-folder-item-color-disabled: rgba(200, 200, 200, 0.8);

    --pop-folder-top-action-background-active: rgba(200, 200, 200, 0.2);
    --pop-folder-top-action-background-active: rgba(237, 238, 238, 0.3);
    --pop-folder-top-action-text-disabled: rgb(240, 240, 240);

    --pop-folder-add-btn-hover: rgba(250, 250, 250, 0.2);
}

body {
    color: var(--white);
    background: var(--white);
    overflow-y: auto;
}

.login-wrapper,
.uninstall-wrapper {
    display: flex;
    flex-direction: column;
    background: var(--default-black-2);
    min-height: 100vh;
}

.login-header,
.result-page-header {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.login-logo img {
    display: block;
}

.login-title {
    margin-bottom: 32px;
    text-align: center;
}

.login-title h1 {
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
    color: #253858;
    margin-bottom: 4px;
}

.login-title p {
    line-height: 20px;
    color: #6b778c;
}

.login-title-left {
    text-align: left;
}

.login-form {
    margin: 8% auto 0 auto;
    width: 100%;
    max-width: 360px;
    padding: 32px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    background: var(--block-content);
}

.login-form .ant-form-item {
    margin-bottom: 16px;
}

.login-form .ant-form-item-label label {
    font-size: 12px;
    color: #6b778c;
}

.login-form .ant-form-item-label {
    padding-bottom: 4px;
}

.login-form .ant-form-item-explain {
    position: absolute;
    top: 100%;
}

.login-form input {
    line-height: 30px;
}

.login-forgot {
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    font-size: small;
    color: #6b7787;
}

.login-forgot a {
    color: var(--blue-400);
    font-weight: 550;
}

.layout-containrt {
    flex: 1;
    width: 100%;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;

    display: flex;
    flex-direction: column;

    background: var(--white-20);

    position: relative;
}

.sider-wrapper {
    height: 100vh;
    position: relative;
    border-right: 1px solid var(--white-40);
}

.sider-wrapper.expand {
    min-width: 256px !important;
    flex: none !important;
    width: unset !important;
    max-width: unset !important;
}

.sider-wrapper .ant-layout-sider-children {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sider-menu-container .ant-menu {
    border: none;
    background: inherit;
}

.sider-menu-submenu-popup .ant-menu {
    box-shadow: none;
}

.sider-menu-container .ant-menu-title-content,
.sider-menu-container .ant-menu-title-content a {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.sider-menu-container .ant-menu.ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title .anticon,
.sider-menu-container .ant-menu.ant-menu-inline-collapsed > .ant-menu-item .anticon {
    display: block;
    line-height: 0;
}

.sider-menu-container .ant-menu-title-content > span {
    flex-shrink: 0;
}

.sider-menu-container .ant-menu.ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title,
.sider-menu-container .ant-menu.ant-menu-inline-collapsed > .ant-menu-item {
    /* padding: 0 calc(50% - 24px / 2); */
}

.sider-menu-container .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected,
.sider-menu-container .ant-menu-submenu-vertical.ant-menu-submenu-selected .ant-menu-submenu-title {
    background: rgba(53, 130, 251, 0.05);
}

.sider-menu-container .ant-menu-submenu-selected svg path,
.sider-menu-container .ant-menu-item-selected svg path {
    fill: currentColor;
}

.sider-menu-container .ant-menu-inline .ant-menu-item::after {
    content: none;
}

.sider-search-container {
    height: 64px;
    padding: 24px 12px 0 12px;
    /* temp disable the search e*/
    /* user-select: none; */
    /* pointer-events: none; */
}
.sider-search-icon {
    font-size: 18px;
    color: var(--white-40);
    margin-left: -25px;
    position: absolute;
    margin-top: 8px;
}

.sider-logo {
    white-space: nowrap;
    overflow: hidden;
}

.sider-logo :first-child {
    margin-right: 8px;
}

.sider-logo img {
    vertical-align: baseline;
    transition: all 0.3s;
}

.sider-menu-container {
    padding: 36px 0;
    overflow-x: hidden;
    /* 100vh - search height - logo height */
    height: calc(100vh - 64px - 68px);
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
}

.sider-trigger-container {
    position: absolute;
    top: calc(50% - 5px);
    right: -10px;
    z-index: 1;
}

.sider-trigger {
    background: var(--white-80);
    width: 10px;
    height: 44px;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
}

.sider-trigger > * {
    position: relative;
    top: 10px;
}

.sider-trigger svg,
.sider-trigger svg path {
    fill: #ffffff;
}

.sider-admin {
    font-size: smaller;
    color: var(--black-100);
    padding-top: 40px;
    padding-left: 25px;
    padding-right: 8px;
    padding-bottom: 10px;
    font-weight: 500;
}

.sider-footer-logo {
    padding: 18px 8px 18px 22px;
}

.sider-footer {
    border-top: var(--white-40) 1px solid;
    height: 68px;
}

/* passwords view css */
.right-drawer-wrapper .ant-drawer-content {
    overflow: inherit;
}

.common-drawer-content {
    margin: 0 auto;
    padding: 48px 24px;
    position: relative;
    height: calc(100% - 148px);
    overflow: auto;
}

.drawer-header {
    height: 148px;
    background: var(--blue);
    display: flex;
    padding: 24px;
}

.drawer-icon-container {
    display: flex;
    border: 1px solid rgba(247, 249, 252, 0.3);
    width: 148px;
    border-radius: 4px;
    margin-right: 24px;
}

.drawer-icon {
    margin: auto;
    font-size: 50px !important;
    color: var(--drawer-title);
}

.drawer-icon path {
    fill: var(--drawer-title-icon-path);
}

.drawer-title {
    font-size: 24px;
    line-height: 100px;
    color: var(--drawer-title);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edit-drawer-footer {
    display: flex;
    justify-content: space-between;
}

.edit-drawer-footer button {
    min-width: 80px;
    margin-left: 16px;
}

.new-drawer-footer {
    display: flex;
    justify-content: flex-end;
}

.new-drawer-footer > button {
    min-width: 80px;
    margin-left: 16px;
}

.password-header {
    margin-bottom: 16px;
}

.password-header-sticky {
    position: sticky;
    padding: 32px 0 12px 0;
    background: var(--sticky-header-bg);
    z-index: 10;
    top: 0;

    display: flex;
    align-items: center;
    flex-flow: row nowrap;
}

.password-header-sticky-remote {
    padding: 0 0 12px 0;
}

.password-header-sticky .password-header-sticky-left,
.password-header-sticky .password-header-sticky-right,
.password-header-sticky .password-header-sticky-center {
    flex: 1;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

.password-header-sticky .password-header-sticky-right {
    justify-content: flex-end;
}

.password-btnIcon {
    font-size: 1em !important;
}

.password-btnIcon path {
    fill: currentColor;
}

.password-listItemContainer {
    display: flex;
    padding: 10px 0;
    align-items: center;
}

.password-jumpLink {
    display: none;
}

.password-listItemContainer:hover .password-jumpLink {
    display: block;
}

.password-coverAntBtn,
.password-coverAntBtn:hover {
    background: var(--white-20);
}

.password-coverAntBtn {
    margin: 0 16px;
    border: 1px solid transparent;
    box-shadow: initial;
}

.password-coverAntBtn:hover {
    color: inherit;
    border: 1px solid var(--white-60);
}

.password-listItemInfo {
    flex: 1 1;
    line-height: 1.8;
    min-height: 54px;
    cursor: pointer;
    user-select: none;
}

.password-listItemName {
    font-size: 16px;
    font-weight: bold;
}

.password-listItemNote {
    font-size: 10px;
    color: var(--white-90);
}

/*cover ANTD default behavior*/
.common-drawer .ant-drawer-footer {
    border: unset !important;
}

.common-drawer .ant-drawer-body {
    padding: unset !important;
}

.common-drawer-footer {
    display: flex;
    justify-content: space-between;
}

.common-drawer-footer > button {
    min-width: 80px;
    margin-left: 16px;
}

.sider-version {
    color: #b0b0b0;
    /* padding: 0 0 18px 22px; */
    font-size: 12px;
    padding: 32px 0 10px 0;
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: var(--white-20);

    z-index: 5;
}

.light-neumorphism-box {
    border: 1px solid #d1d9e6;
    box-shadow: 3px 3px 6px #b8b9be, -3px -3px 6px #fff;
}

.light-table .ant-table-cell {
    padding: 8px 16px !important;
    background: transparent !important;
    border: none !important;
}

.light-table .ant-table-cell::before {
    display: none;
}

.light-table .ant-table-tbody .ant-table-cell {
    height: 50px;
}

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

.light-table {
    padding: 10px 3px;
}

.light-table .ant-table-pagination.ant-pagination {
    margin: 5px 0;
    padding: 0 10px;
}

.light-table .ant-table-container table > thead > tr:first-child th {
    padding: 15px !important;
}

.role-select {
    width: 150px;
    margin: 0 20px;
}

.flex-one {
    flex: 1;
}

.wrapInMobile {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

@media (min-width: 577px) {
    /* Styles for mobile devices */
    .hideInNonMobile {
          display: none !important;
      }
}
@media (max-width: 576px) {
    .spaceBetweenInMobile {
        justify-content: space-between !important;
    }
    .noWrapInMobile {
        flex-wrap: nowrap !important;
    }
    .wrapInMobile {
		flex-wrap: wrap;
	}

    .flexReverseInMobile {
        display: flex;
        flex-direction: row-reverse;
    }
    /* Styles for mobile devices */
    .search {
        margin-right: 0;
    }
    .inputSearch {
        width: 100% !important;
    }
    .btnWithoutTextInMobile span:nth-last-child(1) {
        display: none !important;
    }
    .flex1InMobile {
        flex: 1 !important;
    }
    .autoWidthInMobile {
        width: auto !important;
    }
    .col24InMobile {
        width: 100% !important;
    }
    .col20InMobile {
        width: 83.3% !important;
    }
    .marginT10InMobile {
        margin-top: 10px;
    }
    .marginB10InMobile {
        margin-bottom: 10px;
    }
    .marginR10InMobile {
        margin-right: 10px;
    }
    .marginL0InMobile {
        margin-left: 0 !important;
    }
    .marginL10InMobile {
        margin-left: 10 !important;
    }
    .flexInMobile {
        min-width: auto !important;
        width: auto;
        flex: 1;
    }
    .autoWidth {
        width: auto;
    }

	.hideInMobile {
		display: none !important;
	}

    .drawer-close {
        position: absolute !important;
        z-index: 1 !important;
        color: #ffffff !important;
        right: 10px;
        top: 10px;
    }
    .shortInMobile {
        width: 8px !important;
    }
    .smallIconBtnInMobile {
        width: 15px !important;
    }
    .smallPaddingBtnInMobile {
        padding: 4px 10px !important;
    }
}