page{
    /* 常用的系统主色系 */
    --primary: #295aeb;

    /* 颜色命名色系 */
    --black: #000000;
}
/**
 *===============================================
  flex弹性布局
 *===============================================
*/
.xui-f {
    display: flex;
}
.xui-f-js-ac {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.xui-f-jc-ac {
    display: flex;
    justify-content: center;
    align-items: center;
}
.xui-f-ac {
    display: flex;
    align-items: center;
}
.xui-f-fc-ac {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.xui-f-jc {
    display: flex;
    justify-content: center;
}
.xui-f-fw {
    display: flex;
    flex-wrap: wrap
}

/**
 *===============================================
  内外边距类，用于数据的上下左右边距的控制
 *===============================================
*/
.xui-padded-0 {
    padding: 0 !important;
}
.xui-padded-5 {
    padding: 0.25rem !important;
}
.xui-padded-10 {
    padding: 0.5rem !important;
}
.xui-padded-15 {
    padding: 0.75rem !important;
}
.xui-padded-t-0 {
    padding-top: 0 !important;
}
.xui-padded-t-5 {
    padding-top: 0.25rem !important;
}
.xui-padded-t-10 {
    padding-top: 0.5rem !important;
}
.xui-padded-t-15 {
    padding-top: 0.75rem !important;
}
.xui-padded-b-0 {
    padding-bottom: 0 !important;
}
.xui-padded-b-5 {
    padding-bottom: 0.25rem !important;
}
.xui-padded-b-10 {
    padding-bottom: 0.5rem !important;
}
.xui-padded-b-15 {
    padding-bottom: 0.75rem !important;
}
.xui-padded-l-0 {
    padding-left: 0 !important;
}
.xui-padded-l-5 {
    padding-left: 0.25rem !important;
}
.xui-padded-l-10 {
    padding-left: 0.5rem !important;
}
.xui-padded-l-15 {
    padding-left: 0.75rem !important;
}
.xui-padded-l-20 {
    padding-left: 1rem !important;
}
.xui-padded-r-0 {
    padding-right: 0 !important;
}
.xui-padded-r-5 {
    padding-right: 0.25rem !important;
}
.xui-padded-r-10 {
    padding-right: 0.5rem !important;
}
.xui-padded-r-15 {
    padding-right: 0.75rem !important;
}
.xui-margin-0 {
    margin: 0 !important;
}
.xui-margin-5 {
    margin: 0.25rem !important;
}
.xui-margin-10 {
    margin: 0.5rem !important;
}
.xui-margin-15 {
    margin: 0.75rem !important;
}
.xui-margin-t-0 {
    margin-top: 0 !important;
}
.xui-margin-t-5 {
    margin-top: 0.25rem !important;
}
.xui-margin-t-10 {
    margin-top: 0.5rem !important;
}
.xui-margin-t-15 {
    margin-top: 0.75rem !important;
}
.xui-margin-b-0 {
    margin-bottom: 0 !important;
}
.xui-margin-b-5 {
    margin-bottom: 0.25rem !important;
}
.xui-margin-b-10 {
    margin-bottom: 0.5rem !important;
}
.xui-margin-b-15 {
    margin-bottom: 0.75rem !important;
}
.xui-margin-l-0 {
    margin-left: 0 !important;
}
.xui-margin-l-5 {
    margin-left: 0.25rem !important;
}
.xui-margin-l-10 {
    margin-left: 0.5rem !important;
}
.xui-margin-l-15 {
    margin-left: 0.75rem !important;
}
.xui-margin-r-0 {
    margin-right: 0 !important;
}
.xui-margin-r-5 {
    margin-right: 0.25rem !important;
}
.xui-margin-r-10 {
    margin-right: 0.5rem !important;
}
.xui-margin-r-15 {
    margin-right: 0.75rem !important;
}
.xui-clearfix {
    clear: both;
}
.xui-clearfix:before {
    display: table;
    content: " ";
}
.xui-clearfix:after {
    clear: both;
}
/**
 *===========================================
 文字对齐方式
 *===========================================
 */
.xui-text-left {
    text-align: left !important;
}
.xui-text-center {
    text-align: center !important;
}
.xui-text-justify {
    text-align: justify !important;
}
.xui-text-right {
    text-align: right !important;
}
/**
 *=========================================
 系统颜色相关的样式
 *=========================================
 */
.xui-color-black{
    color: var(--black) !important;
}

.xui-color-primary{
    color: var(--primary) !important;
}

.xui-text-gray{
    color: #999999 !important;
}


.xui-full-width{
    width: 100%;
}

/**
 *=========================================
 系统颜色相关的样式
 *=========================================
 */
.xui-color-black{
    color: var(--black) !important;
}

.xui-color-primary{
    color: var(--primary) !important;
}




.xui-border-gray{
    /*border: 1px solid #E1E1E1;*/
    border-radius: 10px;
}

.xui-border-bottom-gray{
    border-bottom: 1px solid #E1E1E1;
}

.xui-font-size-16{
    font-size: 16px;
}

.xui-font-size-14{
    font-size: 14px;
}

.xui-font-size-12{
    font-size: 12px;
}

/**
 *=========================================
 动画调用区域
 *=========================================
 */
/*底部淡出动画*/
.xui-slide-in-bottom {
    animation: slide-in-fwd-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/*右侧淡出动画*/
.xui-slide-in-right {
    animation: slide-in-fwd-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/**
 *=========================================
 动画区域
 *=========================================
 */
/*右侧进入*/
@keyframes slide-in-fwd-right {
    0% {
        -webkit-transform: translateZ(-1400px) translateX(1000px);
        transform: translateZ(-1400px) translateX(1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0) translateX(0);
        transform: translateZ(0) translateX(0);
        opacity: 1;
    }
}
/*顶部进图动画*/
@keyframes slide-in-fwd-top {
    0% {
        -webkit-transform: translateZ(-1400px) translateY(-800px);
        transform: translateZ(-1400px) translateY(-800px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0) translateY(0);
        transform: translateZ(0) translateY(0);
        opacity: 1;
    }
}
/*从底部进入动画*/
@keyframes slide-in-fwd-bottom {
    0% {
        -webkit-transform: translateZ(-1400px) translateY(800px);
        transform: translateZ(-1400px) translateY(800px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0) translateY(0);
        transform: translateZ(0) translateY(0);
        opacity: 1;
    }
}