/**********************************弹出框标准统一样式**********************************/
/**********************************弹出框布局**********************************/
/*弹出框布局*/
.wn-popup-layout, .wn-popup-layout-roll, .wn-popup-button-layout {
    background-color: #F5F5F5;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
}

/*弹出框布局子项用margin-bottom代替gap*/
.wn-popup-layout > *, .wn-popup-layout-roll > *, .wn-popup-button-layout > * {
    margin-bottom: 10px;
}

.wn-popup-layout > *:last-child, .wn-popup-layout-roll > *:last-child, .wn-popup-button-layout > *:last-child {
    margin-bottom: 0;
}

/*弹出框表单*/
.wn-popup-layout {
    padding: 10px;
    height: 100%;
}

/*弹出表单（高度超长滚动）*/
.wn-popup-layout-roll {
    padding: 10px 10px 0 10px;
    height: calc(100% - 10px);
}

/*带有按钮弹出框（确定、取消）*/
.wn-popup-button-layout {
    padding: 10px 10px 0 10px;
    height: calc(100% - 68px);
}

/*弹出框卡片最后一个子项占满剩余空间*/
.wn-popup-layout .wn-card:last-child, .wn-popup-layout .wn-card:last-child , .wn-popup-button-layout .wn-card:last-child {
    flex: 1 !important;
}

/*弹出框一分为N布局*/
.wn-popup-one-half, .wn-popup-one-n {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.wn-popup-one-half {
    height: 100%!important;
}

.wn-popup-one-n {
    height: auto;
}

/*弹出框一分为二，和一分为N布局的子项*/
.wn-popup-one-half > div, .wn-popup-one-n > div {
    margin-right: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/*margin-bottom代替gap*/
.wn-popup-one-half > div:last-child, .wn-popup-one-n > div:last-child {
    margin-right: 0;
}

.wn-popup-one-half > div > div , .wn-popup-one-n > div > div {
    margin-bottom: 10px;
}

.wn-popup-one-half > div > div:last-child , .wn-popup-one-n > div > div:last-child {
    margin-bottom: 0;
}

/*弹出框一分为二布局，适用于两个同级卡片（card）*/
.wn-popup-one-half > div {
    width: calc(50% - 5px);
}

/*弹框一分为N布局，适用于一个卡片内分N份*/
.wn-popup-one-n > div {
    padding-right: 10px;
    border-right: 1px dashed #CDD0D6;
}

.wn-popup-one-n > div:last-child {
    padding-right: 0;
    border-right: 0;
}

/*弹出框按钮样式*/
.wn-popup-button {
    display: flex;
    justify-content: flex-end;
    padding: 10px;
    box-sizing: border-box;
    background-color: #ffffff;
}


/*弹出框按钮样式（居中）*/
.wn-popup-button-center {
    display: flex;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
    background-color: #ffffff;
}


/*margin-bottom代替gap*/
.wn-popup-button > button,.wn-popup-button-center > button {
    margin-right: 10px;
}

.wn-popup-button > button:last-child,.wn-popup-button-center > button:last-child {
    margin-right: 0;
}

.wn-popup-button button, .wn-popup-button-center button {
    margin-left: 0 !important;
}

/*弹出框分割线（一般用户放在底部）*/
.wn-popup-divider {
    background-color: #F5F5F5;
    height: 10px;
    width: 100%;
}

/**********************************卡片样式**********************************/
/*卡片*/
.wn-card {
    width: 100%;
    border-radius: 8px !important;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}

/*卡片头部*/
.wn-card-header {
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    position: relative;
    height: 42px;
    line-height: 42px;
    padding: 0 15px;
    border-bottom: 1px solid #f8f8f8;
    color: #333;
}

/*卡片主体信息内容*/
.wn-card-body {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 10px 15px;
    line-height: 24px;
}

/*margin-bottom代替gap*/
.wn-card-body > *,.wn-card-header > * {
    margin-bottom: 10px;
}

.wn-card-body > *:last-child,.wn-card-header > *:last-child {
    margin-bottom: 0;
}

/*卡片表单样式*/
.wn-card-body .layui-form-label, .wn-card-body .layui-form-item {
    margin-bottom: 0;
}


/*卡片单元格*/
.wn-card-cell {
    display: flex;
    line-height: 24px;
    font-size: 15px;
}

/*卡片单元格标签*/
.wn-card-cell-label {
    width: 120px;
}

/*卡片单元格内容*/
.wn-card-cell-content {
    width: calc(100% - 120px);
    text-align: right;
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏溢出的内容 */
    text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本 */
}

/*卡片单元格内容->内容可换行*/
.wn-card-cell-content-break {
    width: calc(100% - 120px);
    text-align: right;
}


/**********************************标签样式**********************************/
.wn-tag {
    border-radius: 4px;
    padding: 4px 10px;
}

/*基础*/
.wn-tag-info {
    background-color: #F4F4F5;
    color: #909399;
}

/*主要*/
.wn-tag-primary {
    color: #1E9FFF;
    background-color: #ecf5ff;
}

/*成功*/
.wn-tag-success {
    color: #67c23a;
    background-color: #d1edc4;
}

/*警告*/
.wn-tag-warning {
    color: #e6a23c;
    background-color: #f8e3c5;
}

/*错误*/
.wn-tag-danger {
    color: #fcd3d3;
    background-color: #f56c6c;
}

/**********************************字体颜色样式**********************************/

/*红色*/
.wn-red {
    color: red;
}

/*绿色*/
.wn-green {
    color: green;
}

/*蓝色*/
.wn-blue {
    color: #1E9FFF;
}

/*******************************其他辅助样式*******************************/
/*超长省略*/
.wn-ellipsis {
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏溢出的内容 */
    text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本 */
}

/*加粗*/
.wn-bold {
    font-weight: bold;
}

/*flex布局*/
.wn-flex {
    display: flex;
}

/*margin-bottom代替gap*/
.wn-flex > * {
    margin-right: 10px;
}

.wn-flex > *:last-child {
    margin-right: 0;
}

/*垂直居中*/
.wn-vertical-center {
    display: flex;
    align-items: center;
}

/*水平居中*/
.wn-horizontal-center {
    display: flex;
    justify-content: center;
}

/*垂直水平居中*/
.wn-vertical-horizontal-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/*margin-bottom代替gap*/
.wn-vertical-center > *, .wn-horizontal-center > *, .wn-vertical-horizontal-center > * {
    margin-right: 10px;
}

.wn-vertical-center > *:last-child, .wn-horizontal-center > *:last-child, .wn-vertical-horizontal-center > *:last-child {
    margin-right: 0;
}

.wn-vertical-center button, .wn-horizontal-center button, .wn-vertical-horizontal-center button {
    margin-left: 0 !important;
}