/* 开始 ======================================= 面包屑 */

.breadcrumb-g {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--text-color-primary);
    margin-bottom: 24px;
}

.breadcrumb-g .iconfont {
    color: var(--text-color-secondary);
    font-size: 12px;
    margin: 0 8px;
}

.breadcrumb-g__item:not(:last-child) {
    color: var(--color-primary);
    font-weight: 600;
    cursor: pointer;
}

/* 结束 ======================================= 面包屑 */


/* 开始 ======================================= 卡片 */

.card-g {
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius-large);
    padding: 16px 24px;
    display: block;
}

/* 结束 ======================================= 卡片 */


/* 开始 ======================================= 全局加载 */

.full-loading-g {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--color-primary);
    z-index: 10000;
}

.full-loading-g__visible {
    display: flex;
}

.full-loading-g .icon-loading {
    font-size: 24px;
    margin-bottom: 12px;
}

/* 结束 ======================================= 全局加载 */


/* 开始 ======================================= 消息 */

.message-g {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-info-extra-lighter);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: var(--border-radius-large);
    flex-direction: column;
    min-width: 400px;
    color: var(--color-info);
    max-width: 50%;
    box-shadow: var(--box-shadow);
}

.message-g__visible {
    display: flex;
}

.message-g__icon {
    font-size: 40px;
}

.message-g__text {
    margin-top: 8px;
    font-size: 14px;
    line-height: 24px;
}

.message-g__success {
    background: var(--color-success-extra-lighter);
    color: var(--color-success);
}

.message-g__warning {
    background: var(--color-warning-extra-lighter);
    color: var(--color-warning);
}

.message-g__error {
    background: var(--color-error-extra-lighter);
    color: var(--color-error);
}

/* 结束 ======================================= 消息 */


/* 开始 ======================================= 多选框 */

.checkbox-group-g {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.checkbox-g {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 6px 24px 6px 0;
}

.checkbox-g__box {
    background: #FFFFFF;
    border-width: 1px;
    border-style: solid;
    border-color: var(--border-color);
    width: 16px;
    height: 16px;
    border-radius: var(--border-radius-small);
    transition: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkbox-g__box .icon-check {
    transition: .1s;
    color: var(--color-primary);
    opacity: 0;
}

.checkbox-g__label {
    transition: .3s;
    margin-left: 4px;
    font-size: 14px;
    color: var(--text-color-regular);
}

.checkbox-g:hover .checkbox-g__box {
    border-color: var(--color-primary);
}

.checkbox-g__checked .checkbox-g__box {
    border-color: var(--color-primary);
    position: relative;
}

.checkbox-g__checked .icon-check {
    opacity: 1;
}

.checkbox-g__checked .checkbox-g__label {
    color: var(--color-primary);
}

/* 结束 ======================================= 多选框 */


/* 开始 ======================================= 空数据 */

.empty-g {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 0;
    color: var(--text-color-placeholder);
}

.empty-g .iconfont {
    margin-bottom: 12px;
    font-size: 64px;
}

/* 结束 ======================================= 空数据 */


/* 开始 ======================================= 绶带 */

.ribbon-g {
    position: absolute;
    top: 0;
    right: 0;
}

.ribbon-g:before,
.ribbon-g:after {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    background: var(--color-error-dark);
    clip-path: polygon(0 0, 100% 100%, 0% 100%);
}

.ribbon-g:before {
    top: 0;
    right: 49px;
    transform: translate(0, -100%);
}

.ribbon-g:after {
    top: 49px;
    right: 0;
    transform: translate(100%, 0);
}

.ribbon-g__text {
    width: 92px;
    background: var(--color-error);
    position: absolute;
    top: 8px;
    right: -28px;
    transform: rotate(45deg);
    color: #FFFFFF;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 0;
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
    letter-spacing: 4px;
}

/* 结束 ======================================= 绶带 */


/* 开始 ======================================= 标签 */

.tag-g {
    border-style: solid;
    border-width: 1px;
    border-color: var(--color-primary);
    display: inline-flex;
    line-height: 14px;
    padding: 4px 8px;
    border-radius: var(--border-radius);
    color: var(--color-primary);
}

.tag-g__success {
    border-color: var(--color-success);
    color: var(--color-success);
}

.tag-g__error {
    border-color: var(--color-error);
    color: var(--color-error);
}

.tag-g__info {
    border-color: var(--color-info);
    color: var(--color-info);
}

.tag-g__bg {
    border-color: var(--color-primary-extra-lighter);
    background: var(--color-primary-extra-lighter);
    color: var(--color-primary);
}

.tag-g__bg-info {
    border-color: var(--color-info-extra-lighter);
    background: var(--color-info-extra-lighter);
    color: var(--color-info);
}

/* 结束 ======================================= 标签 */


/* 开始 ======================================= 输入框 */

.input-g {
    padding: 0 12px;
    border-color: var(--border-color);
    border-width: 1px;
    border-style: solid;
    width: 100%;
    display: flex;
    align-items: center;
    border-radius: var(--border-radius);
    color: var(--text-color-primary);
    font-size: 14px;
    transition: .3s;
}

.input-g:focus,
.input-g:hover {
    border-color: var(--color-primary);
}

.input-g input {
    color: var(--text-color-regular);
    border: none;
    outline: none;
    width: 0;
    flex-grow: 1;
    font-size: 14px;
    border-radius: var(--border-radius);
    height: 40px;
}

::placeholder {
    color: var(--text-color-placeholder);
}

/* 结束 ======================================= 输入框 */


/* 开始 ======================================= 分页 */

.pager-g {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    line-height: 32px;
    color: var(--text-color-primary);
    font-size: 14px;
    margin-top: 12px;
}

.pager-g__numbers {
    display: flex;
    align-items: center;
}

.pager-g__item {
    cursor: pointer;
    padding: 0 8px;
    display: block;
}

.pager-g__item:not([href]) {
    cursor: not-allowed;
    color: var(--text-color-disabled);
}

.pager-g__item[href]:hover {
    color: var(--color-primary);
}

.pager-g .icon-arrow-left,
.pager-g .icon-arrow-right {
    font-size: 12px;
    font-weight: 600;
}

.pager-g__number-checked {
    font-weight: 600;
    color: var(--color-primary);
}

/* 结束 ======================================= 分页 */


/* 开始 ======================================= 单选按钮 */

.radio-group-g {
    display: inline-flex;
    align-items: center;
}

.radio-g {
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    line-height: 18px;
    cursor: pointer;
    transition: 0.3s;
    color: var(--text-color-regular);
    background: #FFFFFF;
    border-radius: var(--border-radius);
}

.radio-g__checked {
    background: var(--color-primary);
    color: #FFFFFF;
}

/* 结束 ======================================= 单选按钮 */


/* 开始 ======================================= 按钮 */

.button-g {
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    font-size: 14px;
    line-height: 18px;
    transition: 0.3s;
    border-width: 1px;
    border-style: solid;
    border-color: var(--border-color);
    color: var(--text-color-regular);
    background: #FFFFFF;
    font-weight: 500;
}

.button-g:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.button-g + .button-g {
    margin-left: 12px;
}

.button-g__primary {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: #FFFFFF;
}

.button-g__primary:hover {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: #FFFFFF;
    opacity: 0.9;
}

.button-g__primary_plain {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.button-g__primary_plain:hover {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: #FFFFFF;
}

/* 结束 ======================================= 按钮 */