.page-container {
    /*width: 100vw;*/
    padding-top: 130px;
    min-height: 100vh;
    min-width: 1366px;
    background-color: #ececec;
    padding-bottom: 30px;
}

.search-container {
    position: fixed;
    z-index: 599;
    left: 0;
    right: 0;
    top: 0;
    background-color: white;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

.search-title {
    margin-left: 20px;
    margin-top: 15px;
    height: 14px;
    line-height: 14px;
    font-size: 14px;
    color: #323437;
    font-weight: bold;
}

.search-date {
    margin-left: 20px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    height: 26px
}

.search-hint {
    font-size: 12px;
    color: #787A7D;
}

.search-date-group {
    margin-left: 5px;
    border-radius: 2px;
    display: flex;
    align-items: center;
}

.search-date-group-item {
    height: 26px;
    padding-left: 10px;
    padding-right: 12px;
    font-size: 12px;
    cursor: pointer;
    background-color: white;
    display: flex;
    align-items: center;
    border: 1px solid #E1E3E4;
    margin-left: -2px !important;
}

.search-date-group-item:hover {
    background-color: #f3f4f4;
}

.search-date-group-item-active:hover {
    background-color: #4da7fd;
}

.search-date-group-item-active {
    background-color: #4da7fd;
    color: white;
    z-index: 1;
    border: 1px solid #4da7fd !important;
}

.search-date-group-item:first-child {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.search-date-group-item:last-child {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}


.date-select {
    height: 24px;
    font-size: 12px;
    color: #323437;
    display: flex;
    flex: 1;
    align-items: center;
}

.search-select {
    margin-left: 20px;
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.table-hint {
    display: flex;
    margin-top: 20px;
    align-items: center;
    background-color: #F8f8f8;
    height: 45px;
    border-top: 1px solid #E1E3E4;
}

.data-select-group-active {
    border: 1px solid #4da7fd !important;
}

.select-app {
    display: flex;
    min-width: 112px;
    margin-left: 5px;
    border: 1px solid #E1E3E4;
    align-items: center;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}

.select-app-pop {
    position: absolute;
    z-index: 888;
    display: flex;
    flex-direction: column;
    top: 31px;
    background-color: white;
    border-radius: 2px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    left: 0;
    min-width: 127px;
    padding: 5px 0;
}

.select-app-pop-item {
    height: 26px;
    padding-left: 15px;
    line-height: 26px;
    color: #323437;
}


.select-app-pop-item:hover {
    background-color: #4da7fd;
    color: white;
}

.select-app-pop-item-active {
    color: #1276e5;
}

.content-container {
    background-color: white;
    margin-left: 10px;
    margin-top: 10px;
    margin-right: 10px;
    border-left: 1px solid #E1E3E4;
    border-top: 1px solid #E1E3E4;
}

.chat-container {
    height: 105px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
}

.chat-container-item {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #f0f0f0;
    height: 45px;
    justify-content: space-between;
}

.chat-container-item:first-child {
    border-left: none;
}

.chat-container-item-hint {
    margin-left: 20px;
    font-size: 12px;
    line-height: 14px;
    height: 14px;
    color: #787a7d;
}

.chat-container-item-number {
    margin-left: 20px;
    font-size: 20px;
    height: 20px;
    line-height: 20px;
    color: #121315;
}

.view-container {
    height: 336px;
    display: flex;
    align-items: center;
}

.table-container {
    /*margin-top: 16px;*/
}

.table-header {
    display: flex;
    align-items: center;
    background-color: #dedede;
    height: 40px;
}

.table-content {
    display: flex;
    align-items: center;
    height: 40px;
}

.table-item {
    display: flex;
    padding-left: 10px;
    font-size: 12px;
    color: #323437;
    align-items: center;
    height: 40px;
}

.table-index {
    width: 40px;
    border-bottom: 1px solid #f0f0f0;
}

.table-data {
    flex: 1;
    border-bottom: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
}

.search-input {
    display: flex;
    min-width: 112px;
    margin-left: 5px;
    margin-right: 20px;
    border: 1px solid #E1E3E4;
    align-items: center;
    border-radius: 2px;
    position: relative;
    padding-left: 10px;
}

.search-input::placeholder {
    color: #919294;
}

.input-button {
    margin-top: 20px;
    margin-left: 20px;
    border: 1px solid #E1E3E4;
    background-color: #ffffff;
    padding: 5px 10px 5px 10px;
}


/**
* 在线教育按钮样式
**/
.btn:focus, .btn.active.focus {
    outline: none;
    box-shadow: none;
}

.btn-import {
    width: 112px;
    height: 32px;
    color: #333;
    margin: 16px 16px 16px 0;
    padding: 2px 15px;

    background-color: rgba(255, 255, 255, 0);
    border-color: #ccc;
    text-align: center;
    border-radius: 2px;

}

.btn-export {
    width: 112px;
    height: 32px;
    color: #333;
    margin: 16px 16px 16px 0;
    padding: 2px 15px;
    border-color: #ccc;
    text-align: center;
    border-radius: 2px;
}


.btn-subject {
    width: 132px;
    height: 32px;
    color: #333;
    margin: 16px 16px 16px 0;
    padding: 2px 15px;

    background-color: rgba(255, 255, 255, 0);
    border-color: #ccc;
    text-align: center;
    border-radius: 2px;

}

.btn-temp {
    width: 112px;
    height: 32px;
    color: #333;
    margin: 16px 16px 16px 0;
    padding: 2px 15px;
    border-color: #ccc;
    text-align: center;
    border-radius: 2px;
}


.btn-add {
    width: 64px;
    height: 30px;
    color: #fff !important;
    background-color: #4FA8F9 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    margin-right: 20px;
}

.btn-edit {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: normal;
    color: #5282f7;
}

.btn-search {
    width: 64px;
    height: 32px;
    margin: 16px 10px 16px 0;
    color: #fff;
    background-color: #5282F7;
    text-align: center;
    border: none;
    border-radius: 2px;
}

.btn-search_red {
    width: 64px;
    height: 32px;
    margin: 16px 10px 16px 0;
    color: #fff;
    background-color: #F35C2C;
    text-align: center;
    border: none;
    border-radius: 2px;
}

.btn-reset {
    width: 64px;
    height: 30px;
    color: #666666;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff !important;
    border: 1px solid #D9D8DC;
    border-radius: 2px;
}

.btn-refresh {
    width: 86px;
    height: 32px;
    color: #333;
    margin: 16px 16px 16px 0;
    padding: 2px 15px;
    border-color: #cccccc;
    text-align: center;
    border-radius: 2px;
}

.btn-settings {
    width: 112px;
    height: 32px;
    color: #333;
    margin: 16px 16px 16px 0;
    padding: 2px 15px;
    border-color: #cccccc;
    text-align: center;
    border-radius: 2px;
}

.btn-querymore {
    margin: 10px 10px 13px 0;
    width: 134px;
    height: 32px;
    background-color: #ffffff;
    text-align: center;
    border: solid 1px #CFD4DF;
    color: #666666;
    border-radius: 2px;
    padding: 2px 15px;
}

.btn-querysimple {
    margin: 10px 10px 13px 0;
    width: 134px;
    height: 32px;
    background-color: #ffffff;
    text-align: center;
    border: solid 1px #CFD4DF;
    color: #666666;
    border-radius: 2px;
    padding: 2px 15px;
}

/*导入*/
.glyphicon-import::before {

    color: #5282f7;
}

/*导出*/
.glyphicon-export::before {
    color: #5282f7;
}

/*模版*/
.glyphicon-temp::before {
    color: #5282f7;
    content: "\e010";
}

/*刷新*/
.glyphicon-refresh::before {
    color: #5282f7;
}

/*设置*/
.glyphicon-settings::before {
    color: #5282f7;
}


/*拓展查询*/
.glyphicon-querymore {
    margin-right: 8px;
}

/*精简查询*/
.glyphicon-querysimple {
    margin-right: 8px;
}


/*新增*/
.glyphicon-add::before {
}


/*.btn-add:focus {*/

/*}*/

/*.btn-add:hover {*/
/*    width: 64px;*/
/*    height: 32px;*/
/*    color: #fff !important;*/
/*    !*margin: 16px 0 16px 0;*!*/
/*    padding: 2px 15px;*/
/*    background-color: #7b9bf7 !important;*/
/*    text-align: center;*/
/*    vertical-align: middle;*/
/*    border-radius: 2px;*/
/*    border-style: hidden;*/
/*}*/

/*.btn-add:visited {*/

/*}*/

/*.btn-add:hover, .btn-add:active {*/

/*}*/

/*.btn-add:active {*/
/*    width: 64px;*/
/*    height: 30px;*/
/*    color: #fff !important;*/
/*    !*margin: 16px 0 16px 0;*!*/
/*    padding: 2px 15px;*/
/*    background-color: #4065c0 !important;*/
/*    text-align: center;*/
/*    vertical-align: middle;*/
/*    border-radius: 2px;*/
/*    border-style: hidden;*/
/*}*/


button.btn.btn-edit:focus {
    color: #7b9bf7;
    text-decoration: none;
}


button.btn.btn-edit:hover {
    color: #7b9bf7;
    text-decoration: none;
}

button.btn.btn-edit:active {
    color: #4065c0;
    text-decoration: none;
}


button.btn.btn-import:focus {
    background-color: #FFFFFF;
    border-color: #cccccc;
}

button.btn.btn-import:hover {
    background-color: #FFFFFF;
    border-color: #7b9bf7;
    box-shadow: none;
}

button.btn.btn-import:visited {
    background-color: #FFFFFF;
    border-color: #4065c0;
    box-shadow: none;

}

button.btn.btn-import:hover, button.btn.btn-import:active {

}

button.btn.btn-import:active {
    background-color: rgba(255, 255, 255, 0);
    border-color: #4065c0;
    box-shadow: none;
}


button.btn.btn-subject:focus {
    background-color: #FFFFFF;
    border-color: #cccccc;
}

button.btn.btn-subject:hover {
    background-color: #FFFFFF;
    border-color: #7b9bf7;
    box-shadow: none;
}

button.btn.btn-subject:visited {
    background-color: #FFFFFF;
    border-color: #4065c0;
    box-shadow: none;

}

button.btn.btn-subject:hover, button.btn.btn-subject:active {

}

button.btn.btn-subject:active {
    background-color: rgba(255, 255, 255, 0);
    border-color: #4065c0;
    box-shadow: none;
}


button.btn.btn-export:focus {
    background-color: #FFFFFF;
    border-color: #cccccc;
}

button.btn.btn-export:hover {
    background-color: #FFFFFF;
    border-color: #7b9bf7;
    box-shadow: none;
}

button.btn.btn-export:visited {
    background-color: #FFFFFF;
    border-color: #4065c0;
    box-shadow: none;

}

button.btn.btn-export:hover, button.btn.btn-export:active {

}

button.btn.btn-export:active {
    background-color: rgba(255, 255, 255, 0);
    border-color: #4065c0;
    box-shadow: none;
}


button.btn.btn-temp:focus {
    background-color: #FFFFFF;
    border-color: #cccccc;
}

button.btn.btn-temp:hover {
    background-color: #FFFFFF;
    border-color: #7b9bf7;
    box-shadow: none;
}

button.btn.btn-temp:visited {
    background-color: #FFFFFF;
    border-color: #4065c0;
    box-shadow: none;

}

button.btn.btn-temp:hover, button.btn.btn-temp:active {

}

button.btn.btn-temp:active {
    background-color: rgba(255, 255, 255, 0);
    border-color: #4065c0;
    box-shadow: none;
}


button.btn.btn-refresh:focus {
    background-color: #FFFFFF;
    border-color: #cccccc;
}

button.btn.btn-refresh:hover {
    background-color: #FFFFFF;
    border-color: #7b9bf7;
    box-shadow: none;
}

button.btn.btn-refresh:visited {
    background-color: #FFFFFF;
    border-color: #4065c0;
    box-shadow: none;

}

button.btn.btn-refresh:hover, button.btn.btn-refresh:active {

}

button.btn.btn-refresh:active {
    background-color: rgba(255, 255, 255, 0);
    border-color: #4065c0;
    box-shadow: none;
}


button.btn.btn-settings:focus {
    background-color: #FFFFFF;
    border-color: #cccccc;
}

button.btn.btn-settings:hover {
    background-color: #FFFFFF;
    border-color: #7b9bf7;
    box-shadow: none;
}

button.btn.btn-settings:visited {
    background-color: #FFFFFF;
    border-color: #4065c0;
    box-shadow: none;
}

button.btn.btn-settings:hover, button.btn.btn-settings:active {

}

button.btn.btn-settings:active {
    background-color: rgba(255, 255, 255, 0);
    border-color: #4065c0;
    box-shadow: none;
}


.btn-search:hover {
    width: 64px;
    height: 32px;
    /*margin: 16px 10px 16px 0;*/
    color: #fff !important;
    background-color: #7b9bf7 !important;
    text-align: center;
    border-radius: 2px;
    border-style: hidden;
}

.btn-search_red:hover {
    width: 64px;
    height: 32px;
    /*margin: 16px 10px 16px 0;*/
    color: #fff !important;
    background-color: #F67F63 !important;
    text-align: center;
    border-radius: 2px;
    border-style: hidden;
}

.btn-search:hover, .btn-search:active {

}

.btn-search_red:hover, .btn-search_red:active {

}

.btn-search:active {
    width: 64px;
    height: 32px;
    /*margin: 16px 10px 16px 0;*/
    color: #fff !important;
    background-color: #4065c0 !important;
    text-align: center;
    border-radius: 2px;
    border-style: hidden;
}

.btn-search_red:active {
    width: 64px;
    height: 32px;
    /*margin: 16px 10px 16px 0;*/
    color: #fff !important;
    background-color: #F67F63 !important;
    text-align: center;
    border-radius: 2px;
    border-style: hidden;
}


/*.btn-reset:hover {*/
/*    background-color: #FFFFFF;*/
/*    border-color: #7b9bf7;*/
/*    box-shadow: none;*/
/*}*/

.form-row {
    display: flex;
    margin-top: 16px;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

label {
    margin-bottom: 0;
}

.form-title {
    font-family: "Microsoft YaHei";
    font-size: 12px;
    color: #323437;
    height: 30px;
    text-align: right;
    width: 160px;
    padding-top: 5px;
}


.form-input {
    width: 346px;
    height: 30px;
    border-radius: 2px;
    border: 1px solid #e1e3e4;
    margin-left: 5px;
    padding-left: 10px;
}

.form-input-error {
    border: 1px solid #FF3c4a !important;
    outline: none !important;
}


.form-textarea {
    width: 346px;
    border-color: #e1e3e4;
    border-radius: 2px;
    resize: none;
    margin-left: 5px;
}

.form-radio {
    display: none;
}

.form-radio-advice {
    height: 16px;
    width: 68px;
    display: inline-block;
    background: url(../images/radio_unchecked.png) no-repeat;
    background-position: left;
    vertical-align: middle;
    margin-top: 6px;
    padding-left: 20px;
    margin-left: 10px;
}

input[type="radio"]:checked + .form-radio-advice {
    background-image: url(../images/radio_checked.png);
}

.form-footer {
    border-top: 1px solid #e1e3e4;
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 50px;
}

.form-footer > div {
    /*padding-right: 10px;*/
}

.pg-table {
    display: flex;
    padding: 0 20px;
    align-items: center;
    font-size: 14px;
    color: #323437;
    border-left: 1px solid #E1E3E4;
    border-right: 1px solid #E1E3E4;
    border-top: 3px solid #f8f8f8;
}

.pg-table:first-child {
    border-left: none;
    border-right: none;
}

.pg-table-active {
    border-top: 3px solid #289cff;
    background-color: white;
    padding-bottom: 1px;
    margin-bottom: -1px;
}


.loading-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 500px;
    height: 500px;
    margin-left: -440px;
    margin-top: -310px;
    background-color: transparent;
    z-index: 888;
}

.usercheckform-column {
    display: flex;
    flex-direction: column;
}

.icon-down {
    width: 26px;
    height: 26px;
    border-left: 1px solid #E1E3E4;
    display: flex;
    align-items: center;
    justify-content: center
}

.icon-down-err {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #FF3c4a;
}

.icon-down:hover {
    background-color: #f4f4f4;
}

.table-op {
    margin-right: 16px;
    color: #1276e5;
    cursor: pointer;
}

.datepicker-dropdown:before {
    border: none !important;
}

.datepicker-dropdown:after {
    border: none !important;
}

.datepicker-switch {
    font-size: 13px;
}

.month {
    font-size: 13px;
    width: 38px !important;
    height: 38px !important;
    line-height: 38px !important;
}

.year {
    font-size: 13px;
    width: 38px !important;
    height: 38px !important;
    line-height: 38px !important;
}

.table-condensed {
    width: 170px;
}


.month-range-popup {
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 888;
    left: 0;
    top: 31px;
    width: 300px;
    align-items: center;
    background-color: white;
    border: 1px solid #E1E3E4;
    border-radius: 4px;
}

.month-range-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    width: 300px;
}

.month-range-header-left {
    height: 40px;
    width: 40px;
    margin-left: 15px;
    padding: 7px
}

.month-range-header-left:hover {
    background-color: #E1E3E4;
    border-radius: 5px;
}


.month-range-header-right {
    height: 40px;
    width: 40px;
    margin-right: 15px;
    padding: 7px
}

.month-range-header-right:hover {
    background-color: #E1E3E4;
    border-radius: 5px;
}

.month-range-header-title {
    flex: 1;
    text-align: center;
    font-size: 12px;
    font-weight: bold
}

.month-range-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 240px;
}

.month-range-content-item-con {
    background-color: #d9e3ff;
}

.month-range-content-item-con:hover {
    background-color: #d9e3ff !important;
    border-radius: 0 !important;
}

.month-range-content-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    font-size: 14px;
    height: 40px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.month-range-content-item-start {
    background-color: #4da7fd;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    color: white;
}

.month-range-content-item-end {
    background-color: #4da7fd;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    color: white;
}

.month-range-content-item-end:hover {
    background-color: #4da7fd !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 5px !important;
    border-top-right-radius: 5px !important;
    color: white !important;
}

.month-range-content-item-start:hover {
    background-color: #4da7fd !important;
    border-top-left-radius: 5px !important;
    border-bottom-left-radius: 5px !important;
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
    color: white !important;
}

.month-range-content-item:hover {
    background-color: #E1E3E4;
    border-radius: 5px;
}

.month-range-footer {
    display: flex;
    align-items: center;
    height: 50px;
    width: 300px;
}

.month-range-footer-start-input {
    width: 60px;
    margin-left: 15px;
    margin-right: 10px;
    border-radius: 3px;
    padding-left: 5px;
    height: 30px;
    border: 1px solid #E1E3E4;
    color: #4da7fd;
}

.month-range-footer-end-input {
    width: 60px;
    margin-left: 10px;
    height: 30px;
    border-radius: 3px;
    color: #4da7fd;
    padding-left: 5px;
    border: 1px solid #E1E3E4;
}

.month-range-footer-option {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    margin-right: 15px
}

.month-range-footer-btn {
    height: 30px;
    font-size: 12px;
    display: flex;
    border-radius: 3px;
    align-items: center;
    justify-content: center;
    width: 50px;
}

.month-range-footer-btn-n {
    border: 1px solid #E1E3E4;
    color: #666;
}

.month-range-footer-btn-s {
    background-color: #4da7fd;
    color: white;
    margin-right: 10px;
}

.datepicker table tr td span.active {
    background-image: none !important;
}