.icon-menu {
    --gap: 5px;
    --height-bar: 2.5px;
    --pos-y-bar-one: 0;
    --pos-y-bar-three: 0;
    --scale-bar: 1;
    --rotate-bar-one: 0;
    --rotate-bar-three: 0;
    width: 25px;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    cursor: pointer;
    position: relative;
}

.bar {
    position: relative;
    height: var(--height-bar);
    width: 100%;
    border-radius: .5rem;
    background-color: #ffffff;
}

.bar--1 {
    top: var(--pos-y-bar-one);
    transform: rotate(var(--rotate-bar-one));
    transition: top 200ms 100ms, transform 100ms;
}

.bar--2 {
    transform: scaleX(var(--scale-bar));
    transition: transform 150ms 100ms;
}

.bar--3 {
    bottom: var(--pos-y-bar-three);
    transform: rotate(var(--rotate-bar-three));
    transition: bottom 200ms 100ms, transform 100ms;
}

.check-icon:checked + .icon-menu > .bar--1 {
    transition: top 200ms, transform 200ms 100ms;
}

.check-icon:checked + .icon-menu > .bar--3 {
    transition: bottom 200ms, transform 200ms 100ms;
}

.check-icon:checked + .icon-menu {
    --pos-y-bar-one: calc(var(--gap) + var(--height-bar));
    --pos-y-bar-three: calc(var(--gap) + var(--height-bar));
    --scale-bar: 0;
    --rotate-bar-one: 45deg;
    --rotate-bar-three: -45deg;
}

/* FIN ICON-MENU */

.sider-container {
    height: 1200px;
    transition: width 0.2s;
    background-color: #2F2F2F;
    border-top: 1px solid #868686;
    border-right: 1px solid #969696;
}

.sider-container * {
    font-size: 1.5rem;
}

.linear-filter-input {
    height: 100%;
    width: 100px;
    font-size: 1rem;
}

.materials-property-card {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    background: white;
    height: 200px;
}

.hover-interesting-button {
    position: relative;
    overflow: hidden;
    border: 1px solid #18181a;
    color: #18181a;
    min-width: 300px;
    display: inline-block;
    font-size: 1rem;
    line-height: 15px;
    text-align: center;
    padding: 18px 18px 17px;
    text-decoration: none;
    cursor: pointer;
    background: #fff;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.hover-interesting-button span:first-child {
    position: relative;
    transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1);
    z-index: 10;
}

.hover-interesting-button span:last-child {
    color: white;
    display: block;
    position: absolute;
    bottom: 0;
    transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1);
    z-index: 100;
    opacity: 0;
    top: 50%;
    left: 50%;
    transform: translateY(225%) translateX(-50%);
    height: 14px;
    line-height: 13px;
}

.hover-interesting-button:after {
    content: "";
    position: absolute;
    bottom: -50%;
    left: 0;
    width: 100%;
    height: 150%;
    background-color: black;
    transform-origin:  bottom left;
    transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
    transform: skewY(9.3deg) scaleY(0);
    z-index: 50;
}

.hover-interesting-button:hover:after {
    transform-origin: bottom left;
    transform: skewY(9.3deg) scaleY(3) scaleX(3);
}

.hover-interesting-button:hover span:last-child {
    transform: translateX(-50%) translateY(-50%);
    opacity: 1;
    transition: all 900ms cubic-bezier(0.48, 0, 0.12, 1);
}

.custom-table .ant-pagination {
    display: None;
}

.material-item-title {
    font-size: 1.2rem;
    border: 0;
    font-weight: bold;
    background-color: rgba(0,0,0,0);
}

.sider-menu {
    height: 100vh;
    transition: width 0.2s;
    /*border-right: 1px solid rgb(240, 240, 240);*/
    /*padding-right: 20px;*/
}

.table-showing-divider {
    margin: 3px 0;
    height: 10px;
}

/*找到的模板，参考https://uiverse.io/Prince4fff/slippery-baboon-37*/


.apps-home-card p {
    font-size: 1.5rem;
    font-weight: 600;

    line-height: 20px;
    color: white;
}

.apps-home-card p.content {
    margin-top: 12px;
    font-size: 1.2rem;
    font-weight: 400;
}

.go-corner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 32px;
    height: 32px;
    overflow: hidden;
    top: 0;
    right: 0;
    background-color: #323D61;
    border-radius: 0 4px 0 32px;
}

.go-arrow {
    margin-top: -4px;
    margin-right: -4px;
    font-size: 1.2rem;
    color: white;
    font-family: courier, sans;
}

.apps-home-card1 {
    border: 1px solid #000000; /* 宽度为 1px，实线，颜色为黑色 */
    display: block;
    position: relative;
    width: 300px;
    height: 230px;
    background:linear-gradient(to bottom, #137880, #49CBD6);
    border-radius: 8px;
    padding: 16px 12px;
    margin: 12px;
    text-decoration: none;
    z-index: 0;
    overflow: hidden;
}

.apps-home-card1:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -16px;
    right: -16px;
    background: #323D61;
    height: 32px;
    width: 32px;
    border-radius: 32px;
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: transform 0.25s ease-out;
}

.apps-home-card1:hover:before {
    transform: scale(30);
}

.apps-home-card1:hover p {
    transition: all 0.3s ease-out;
    color: rgba(255, 255, 255, 0.8);
}

.apps-home-card1:hover h3 {
    transition: all 0.3s ease-out;
    color: #fff;
}

.apps-home-card2 {
    display: block;
    top: 0px;
    position: relative;
    max-width: 262px;
    background-color: #f2f8f9;
    border-radius: 4px;
    padding: 32px 24px;
    margin: 12px;
    text-decoration: none;
    z-index: 0;
    overflow: hidden;
    border: 1px solid #f2f8f9;
}

.apps-home-card2:hover {
    transition: all 0.2s ease-out;
    box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
    top: -4px;
    border: 1px solid #ccc;
    background-color: white;
}

.apps-home-card2:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -16px;
    right: -16px;
    background: #323D61;
    height: 32px;
    width: 32px;
    border-radius: 32px;
    transform: scale(2);
    transform-origin: 50% 50%;
    transition: transform 0.15s ease-out;
}

.apps-home-card2:hover:before {
    transform: scale(2.15);
}

.apps-home-card3 {
    display: block;
    top: 0px;
    position: relative;
    max-width: 262px;
    background-color: #f2f8f9;
    border-radius: 4px;
    padding: 32px 24px;
    margin: 12px;
    text-decoration: none;
    overflow: hidden;
    border: 1px solid #f2f8f9;
}

.apps-home-card3 .go-corner {
    opacity: 0.7;
}

.apps-home-card3:hover {
    border: 1px solid #323D61;
    box-shadow: 0px 0px 999px 999px rgba(255, 255, 255, 0.5);
    z-index: 500;
}

.apps-home-card3:hover p {
    color: #323D61;
}

.apps-home-card3:hover .go-corner {
    transition: opactiy 0.3s linear;
    opacity: 1;
}

.apps-home-card4 {
    display: block;
    top: 0px;
    position: relative;
    max-width: 262px;
    background-color: #fff;
    border-radius: 4px;
    padding: 32px 24px;
    margin: 12px;
    text-decoration: none;
    overflow: hidden;
    border: 1px solid #ccc;
}

.apps-home-card4 .go-corner {
    background-color: #323D61;
    height: 100%;
    width: 16px;
    padding-right: 9px;
    border-radius: 0;
    transform: skew(6deg);
    margin-right: -36px;
    align-items: start;
    background-image: linear-gradient(-45deg, #8f479a 1%, #dc2a74 100%);
}

.apps-home-card4 .go-arrow {
    transform: skew(-6deg);
    margin-left: -2px;
    margin-top: 9px;
    opacity: 0;
}

.apps-home-card4:hover {
    border: 1px solid #cd3d73;
}

.apps-home-card4 h3 {
    margin-top: 8px;
}

.apps-home-card4:hover .go-corner {
    margin-right: -12px;
}

.apps-home-card4:hover .go-arrow {
    opacity: 1;
}

.filter-reset-button {
    border: none;
    margin-left: 12px
}

.reference-card {
    width: 100%;
    display: block;
    background: rgb(236, 236, 236);
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}


.materials-item-button {
    display: flex;
    justify-content: center;
    align-items: center;
}

.common-center-div {
    min-height: 300px;
    display: flex;
    text-align: center;
    font-size: 1.2rem;
    max-height: 800px;
    justify-content: center;
    width: 100%;
    min-width: 800px;
    padding: 5px;
}


.phase-diagram-have-data {
    width: 100%;
    min-width: 800px;
    max-height: 600px;
}

.phase-diagram-no-data {
    font-size: 1.2rem;
    padding: 12px;
    text-align: center;
    background-color: white;
    height: 600px;
}

.ant-message-notice-content {
    max-width: 400px;
    max-height: 100px;
}

.ant-message-notice-content span {
    max-width: 400px;
    max-height: 100px;
    font-size: 1rem;
}

.ant-modal {
    margin-top: 100px
}

.ant-breadcrumb ol li:not(:last-child) a {
    color: #01a3fd;
    font-size: 1.5rem;
    position: relative;
}

.ant-breadcrumb ol li:last-child a {
    color: #000000;
    font-size: 1.5rem;
    position: relative;
}

.ant-breadcrumb ol li:last-child a :hover {
    background-color: rgba(0, 0, 0, 0) !important;
}

.ant-breadcrumb .ant-breadcrumb-separator {
    font-size: 1.5rem;
}

.reaction-calculator-error-tips {
    width: 100%;
    margin: 12px 0 12px 0;
    padding: 5px 10px 5px 10px;
    border-radius: 12px;
    border: 1px red;
    font-size: 1.2rem;
    background-color: rgba(255, 3, 3, 0.15);
    color:red;
}

.ant-radio-group-middle span{
    box-sizing: border-box;
    font-size: 1rem;
}

.apps-home-card-describe-component{
     'maxWidth': '420px',
            'maxHeight': '420px',
            'margin-left': '36px',
            'margin-top': '36px',
            'margin-bottom': '36px'
}

:where(.css-1gwfwyx).ant-tabs >.ant-tabs-nav .ant-tabs-nav-list, :where(.css-1gwfwyx).ant-tabs >div>.ant-tabs-nav .ant-tabs-nav-list {
    position: relative;
    display: flex;
    transition: opacity 0.3s;
    margin-left: 24px;
}

:where(.css-1gwfwyx).ant-tabs-top >.ant-tabs-nav, :where(.css-1gwfwyx).ant-tabs-bottom >.ant-tabs-nav, :where(.css-1gwfwyx).ant-tabs-top >div>.ant-tabs-nav, :where(.css-1gwfwyx).ant-tabs-bottom >div>.ant-tabs-nav {
    margin: 0;
    background-color: rgba(0,0,0,0);
}

.materials-item-header-tabs:where(.css-1gwfwyx).ant-tabs-top >.ant-tabs-nav::before, :where(.css-1gwfwyx).ant-tabs-bottom >.ant-tabs-nav::before, :where(.css-1gwfwyx).ant-tabs-top >div>.ant-tabs-nav::before, :where(.css-1gwfwyx).ant-tabs-bottom >div>.ant-tabs-nav::before {
    position: absolute;
    right: 0;
    left: 0;
    /* border-bottom: 1px solid #f0f0f0; */
    margin-bottom: 0 !important;
}

.materials-item-header-tabs :where(.css-1gwfwyx).ant-tabs .ant-tabs-ink-bar  {
    /*position: absolute;*/
    background: #40ddee;
    pointer-events: none;
    display: flex;
    bottom: 5px;
    width: 70px;
}

.materials-item-header-tabs :where(.css-1gwfwyx)  .ant-tabs-top >.ant-tabs-nav .ant-tabs-ink-bar, :where(.css-1gwfwyx).ant-tabs-top >div>.ant-tabs-nav .ant-tabs-ink-bar {
    bottom: 0;
}

.materials-antd-tabs:where(.css-1gwfwyx) .ant-tabs-ink-bar  {
    /*position: absolute;*/
    background: #40ddee;
    pointer-events: none;
    display: flex;
    bottom: 5px;
    width: 70px;
}

.materials-antd-tabs .ant-tabs-tab  .ant-tabs-tab-btn {
   font-size: 1.2rem;
    /*color: red;*/
    margin:0 5px 0 5px;
}

.ant-tabs {
    overflow-x: clip;
}

:where(.css-1gwfwyx).ant-menu-dark.ant-menu-inline .ant-menu-sub.ant-menu-inline, :where(.css-1gwfwyx).ant-menu-dark>.ant-menu.ant-menu-inline .ant-menu-sub.ant-menu-inline {
    background: #000c178c;
}

.initial-greater-input :where(.css-1gwfwyx).ant-input {
    box-sizing: border-box;
    margin: 0;
    padding: 4px 11px;
    color: rgba(0, 0, 0, 0.88);
    font-size: 22px;
    line-height: 1.5714285714285714;
    list-style: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    position: relative;
    display: inline-block;
    width: 100%;
    min-width: 0;
    border-radius: 12px;
    transition: all 0.2s;
}

.middle-text-size{
    font-size: 20px !important;
}