/************************ shortcode */

:root{
    --wu-color-primary: #409eff;
    --wu-color-primary-light-3: rgb(121.3, 187.1, 255);
    --wu-color-primary-light-5: rgb(159.5, 206.5, 255);
    --wu-color-primary-light-7: rgb(197.7, 225.9, 255);
    --wu-color-primary-light-8: rgb(216.8, 235.6, 255);
    --wu-color-primary-light-9: rgb(235.9, 245.3, 255);
    --wu-color-primary-dark: rgb(51.2, 126.4, 204);
    --wu-color-success: #67c23a;
    --wu-color-success-light-3: rgb(148.6, 212.3, 117.1);
    --wu-color-success-light-5: rgb(179, 224.5, 156.5);
    --wu-color-success-light-7: rgb(209.4, 236.7, 195.9);
    --wu-color-success-light-8: rgb(224.6, 242.8, 215.6);
    --wu-color-success-light-9: rgb(239.8, 248.9, 235.3);
    --wu-color-success-dark: rgb(82.4, 155.2, 46.4);
    --wu-color-warning: #e6a23c;
    --wu-color-warning-light-3: rgb(237.5, 189.9, 118.5);
    --wu-color-warning-light-5: rgb(242.5, 208.5, 157.5);
    --wu-color-warning-light-7: rgb(247.5, 227.1, 196.5);
    --wu-color-warning-light-8: rgb(250, 236.4, 216);
    --wu-color-warning-light-9: rgb(252.5, 245.7, 235.5);
    --wu-color-warning-dark: rgb(184, 129.6, 48);
    --wu-color-danger: #f56c6c;
    --wu-color-danger-light-3: rgb(248, 152.1, 152.1);
    --wu-color-danger-light-5: rgb(250, 181.5, 181.5);
    --wu-color-danger-light-7: rgb(252, 210.9, 210.9);
    --wu-color-danger-light-8: rgb(253, 225.6, 225.6);
    --wu-color-danger-light-9: rgb(254, 240.3, 240.3);
    --wu-color-danger-dark: rgb(196, 86.4, 86.4);
    --wu-color-error: #f56c6c;
    --wu-color-error-light-3: rgb(248, 152.1, 152.1);
    --wu-color-error-light-5: rgb(250, 181.5, 181.5);
    --wu-color-error-light-7: rgb(252, 210.9, 210.9);
    --wu-color-error-light-8: rgb(253, 225.6, 225.6);
    --wu-color-error-light-9: rgb(254, 240.3, 240.3);
    --wu-color-error-dark: rgb(196, 86.4, 86.4);
    --wu-color-info: #909399;
    --wu-color-info-light-3: rgb(177.3, 179.4, 183.6);
    --wu-color-info-light-5: rgb(199.5, 201, 204);
    --wu-color-info-light-7: rgb(221.7, 222.6, 224.4);
    --wu-color-info-light-8: rgb(232.8, 233.4, 234.6);
    --wu-color-info-light-9: rgb(243.9, 244.2, 244.8);
    --wu-color-info-dark: rgb(115.2, 117.6, 122.4);
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
h1, h2, h3, h4, p {
    margin: 0;
}
.dot {
    padding: 0 6px;
}


input:not([type="button"]):not([type="reset"]):not([type="submit"]){
    width: 100%;
    border-radius: 4px;
    border: 1px solid var(--wu-color-info-light-7);
    outline: 0;
    padding: 10px;
    box-sizing: border-box;
}
input::placeholder {
    color: var(--wu-color-info-light-5);
    letter-spacing: 1px;
}
input:focus {
    border-color: var(--wu-color-primary);
}

/*********************************************************/


.wu-button + .wu-button {
    margin-left: 12px;
}
.wu-button, .wu-button:hover, .wu-button:focus, .wu-button:visited{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 15px;
    line-height: 1;
    height: 32px;
    white-space: nowrap;
    cursor: pointer;
    color: #606266 ;
    text-decoration: none !important;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    -webkit-user-select: none;
    user-select: none;
    vertical-align: middle;
    -webkit-appearance: none;
    background-color: #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #dcdfe6;
    border-radius: 4px;
    transition: .1s;
}
.wu-button:hover{
    color: var(--wu-color-primary);
    border-color: var(--wu-color-primary-light-7);
    background: var(--wu-color-primary-light-9);
}

.wu-button.primary{
    color: #fff;
    border-color: var(--wu-color-primary);
    background: var(--wu-color-primary);
}
.wu-button.primary:hover{
    border-color: var(--wu-color-primary-light-3);
    background: var(--wu-color-primary-light-3);
}
.wu-button.primary.plain {
    color: var(--wu-color-primary);
    border-color: var(--wu-color-primary);
    background: var(--wu-color-primary-light-9);
}
.wu-button.primary.plain:hover {
    color: #fff;
    background: var(--wu-color-primary);
}
.wu-button.success {
    color: #fff;
    border-color: var(--wu-color-success);
    background: var(--wu-color-success);
}
.wu-button.success:hover {
    border-color: var(--wu-color-success-light-3);
    background: var(--wu-color-success-light-3);
}
.wu-button.success.plain{
    color: var(--wu-color-success);
    border-color: var(--wu-color-success);
    background: var(--wu-color-success-light-9);
}
.wu-button.success.plain:hover {
    color: #fff;
    background: var(--wu-color-success);
}
.wu-button.info {
    color: #fff;
    border-color: var(--wu-color-info);
    background: var(--wu-color-info);
}
.wu-button.info:hover {
    border-color: var(--wu-color-info-light-3);
    background: var(--wu-color-info-light-3);
}
.wu-button.info.plain {
    color: var(--wu-color-info);
    border-color: var(--wu-color-info);
    background: var(--wu-color-info-light-9);
}
.wu-button.info.plain:hover {
    color: #fff;
    background: var(--wu-color-info);
}
.wu-button.warning {
    color: #fff;
    border-color: var(--wu-color-warning);
    background: var(--wu-color-warning);
}
.wu-button.warning:hover {
    border-color: var(--wu-color-warning-light-3);
    background: var(--wu-color-warning-light-3);
}
.wu-button.warning.plain {
    color: var(--wu-color-warning);
    border-color: var(--wu-color-warning);
    background: var(--wu-color-warning-light-9);
}
.wu-button.warning.plain:hover {
    color: #fff;
    background: var(--wu-color-warning);
}
.wu-button.danger {
    color: #fff;
    border-color: var(--wu-color-danger);
    background: var(--wu-color-danger);
}
.wu-button.danger:hover {
    border-color: var(--wu-color-danger-light-3);
    background: var(--wu-color-danger-light-3);
}
.wu-button.danger.plain {
    color: var(--wu-color-danger);
    border-color: var(--wu-color-danger);
    background: var(--wu-color-danger-light-9);
}
.wu-button.danger.plain:hover {
    color: #fff;
    background: var(--wu-color-danger);
}

.wpunion.collapse-group{
    --border-color: #ebeef5;
}
.wpunion .collapse-item{
    border: 1px solid var(--border-color);
    box-sizing: border-box;
    margin-bottom: -1px;
}
.wpunion .collapse-item:first-of-type{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.wpunion .collapse-item:last-of-type {
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
.wpunion .collapse-item .collapse-item-header{
    padding: 0.9em 1.1em;
    transition: background  .3s, color .3s;
}
.wpunion .collapse-item .collapse-item-content .content-wrap {
    padding: 0.9em 1.1em 2em;
    box-sizing: border-box;
}
.wpunion .collapse-item.open .collapse-item-header{
    background: var(--wu-color-primary-light-9);
    color: var(--wu-color-primary);
}
.wpunion .collapse-item .collapse-item-header .arrow {
    width: 1.2em !important;
    color: #b0b5c1;
}

.wu-note{
    color: var(--wu-color-primary);
    background: var(--wu-color-primary-light-9);
    padding: 1.2em 0.95em;
    padding: 1.1em 0.9em;
    border-radius: 3px;
}
.wu-note.border{
    border-left: 5px solid;
    border-radius: 0;
}
.wu-note.success{
    color: var(--wu-color-success);
    background: var(--wu-color-success-light-9);
}
.wu-note.info {
    color: var(--wu-color-info);
    background: var(--wu-color-info-light-9);
}
.wu-note.warning {
    color: var(--wu-color-warning);
    background: var(--wu-color-warning-light-9);
}
.wu-note.danger {
    color: var(--wu-color-danger);
    background: var(--wu-color-danger-light-9);
}


.wu-hide{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.wu-hide .hide-wrap {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 1.1em;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    background: #f7f8f9;
    color: #464749;
    min-width: 500px;
    max-width: 700px;
}
.wu-hide.auth-login .hide-wrap,
.wu-hide.auth-roles .hide-wrap{
    justify-content: center;
    flex-direction: column;
    border: 1px dashed var(--wu-color-danger);
    background: #fffbfb;
}
.wu-hide .hide-content{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.wu-hide .hide-content .text{
    font-size: 0.8em;
}
.wu-hide .hide-content .submit {
    min-width: 80px;
    margin: 0 auto;
}
.wu-hide img{
    width: 170px;
}

@media screen and (max-width: 768px) {
    .wu-hide .hide-wrap{
        min-width: unset;
        max-width: unset;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .wu-hide img{
        width: 100px;
    }
}