/*增加v-cloak解决加载时闪烁的问题*/
[v-cloak] {
    display: none;
}

.common-layout {
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0px 20px;
}

@media (max-width: 767px) {
    .common-layout {
        padding: 0px 5px;
    }
}

.p_span {
    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 12px;
    color: grey;
}

.big_white {
    background-color: white;
}

.column_func {
    float: left;
}

.column_func_bar {
    float: left;
    color: darkgrey;
    padding: 1px 3px;
}

.button_no_bar {
    color: #0062cc;
    border: none; /*去掉边框*/
    background: none; /*背景透明*/
    padding: 1px 3px;
}

.button_append_input {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    padding-left: 10px;
}

.select_append_input {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-right: none; /*去掉右边的边框*/
    padding: 5px;
}

.input_append_button {
    border-radius: 0px;
}

.category_sel {
    float: left;
    width: 100px;
}

.input_middle {
    height: 34px;
    width: 250px;
    float: left;
}

/*两个div设置其中一个固定宽度，另一个填充满窗口:*/
/*思路：左边的绝对定位，并定宽200px，右边的设置margin-left:200px*/
.div_label {
    height: 34px;
    line-height: 34px; /*保证文字内容上下垂直居中*/
    position: absolute;
    width: 100px;
}

.t_align {
    font-weight: 500;
}

.t_float {
    margin-left: 110px;
}

.m_inline {
    float: left;
    height: 34px;
    line-height: 34px;
    padding: 0 20px 0 0;
}

.font_gene {
    font-size: 14px;
}

/*消除上个div的浮动效果对本div的影响*/
.float_clear {
    clear: both;
}

.input_label_str {
    font-weight: normal;
    font-size: 13px;
}

.send_span {
    height: 34px;
    height: 34px;
    margin: 5px 10px 0 0;
    font-size: 13px;
}

/*垂直居中*/
.flex_align_center {
    display: flex;
    display: -moz-flex;
    display: -webkit-flex;
    align-items: center; /*垂直排列方式: 居中*/
}

/*水平居中*/
.flex_justify_center {
    display: flex;
    display: -moz-flex;
    display: -webkit-flex;
    justify-content: center; /*水平排列方式: 居中*/
}

.div_enter {
    white-space: pre-wrap; /*保留文本中的空白、换行符；文本存在<br>或文本中有换行符时，或者遇到框的宽度约束时，文本都会换行*/
}

.back_list {
    font-size: 16px;
    margin-bottom: 5px;
}

.line-spa {
    margin-bottom: 15px;
}

/***************************同行显示的实现自适应手机*************************/
/*
1.几个临界点的分辨率：768、992、1200
2.用min-width时，从小到大放；用max-width时，从大到小放
3.css中用@media时最大最小都包含等于，所以常用：
 @media (min-width: 768px)
 @media (min-width: 992px)
 @media (min-width: 1200px)
 @media (max-width: 1199px)
 @media (max-width: 991px)
 @media (max-width: 767px)
*/

/*保持在同一行显示*/
.keep-in-line {
    display: flex;
    align-items: center;
}

/*在同一行显示或取消*/
.keep-inline-or-not {
    display: flex;
    align-items: center;
}

/*左悬浮或取消*/
.float-left-or-not {
    float: left;
}

/*右悬浮或取消*/
.float-right-or-not {
    float: right;
}

@media (max-width: 767px) {
    /*在同一行显示或取消*/
    .keep-inline-or-not {
        display: block;
    }

    /*每个保持同行显示的换行后自动加间隔*/
    .keep-inline-or-not .keep-in-line + .keep-in-line {
        margin-top: 10px;
    }

    /*左悬浮或取消*/
    .float-left-or-not {
        float: unset;
    }

    /*右悬浮或取消*/
    .float-right-or-not {
        float: unset;
        margin-top: 10px;
    }
}
/***************************同行显示的实现自适应手机*************************/