.context-container { height: 100%; overflow: hidden; } .container-layout { height: 100%; overflow: auto; display: none; }

.row-layout { width: 100%; display: flex; }
.row-layout-50 { width: 50%; }
.row-layout-20 { width: 18%; }
.row-layout-10 { width: 14%; }

.search-layout, .records-layout { border-radius: 0.5em; background: #f1f1f1; padding: 2em; }
.records-layout { margin-top: 1em; }
.records-layout .number { font-size: 1.5em; color: orange; margin: 0 0.3em; }
.records-context { width: 100%; overflow: auto; }
.records-context .record-item { display: flex; border-radius: 0.5em; background: white; margin-top: 1em; border: 1px solid white; }
.records-context .record-item h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.records-context .record-item .item-block { padding: 2em 0em; }
.records-context .record-item .item-block.sxwfxw:hover { background: #f1f1f1; cursor: pointer; }
.records-context .record-item .item-block.glzt:hover { background: #f1f1f1; cursor: pointer; }
.records-context .record-item .item-context { border-right: 1px solid #f1f1f1; padding: 0 2em; }
.records-context .record-item .remark-context { border-radius: 0.5em; background: #fffdca; padding: 1em; margin-bottom: 0.5em; }

.records-context a.operation-button { display: inline-block; border-radius: 0.5em; white-space: nowrap; background: green; color: white; padding: 0.5em 1em 0.6em 1em; text-decoration: none; }
.records-context a.operation-button.confirm { background: #1E9FFF; }
.records-context a.operation-button.blue { background: orange; }
.records-context a.operation-button.black { background: black; }
.records-context a.operation-button.gray { background: gray; }
.records-context a.operation-button:hover { background: orange; color: black; }

.records-layout .data-table { background: white; overflow: auto; width: 100%; margin-top: 1em; }
.records-layout .data-table td { padding: 1em; border-right: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1; }
.records-layout .data-table td:last-child { border-right: none; }
.records-layout .data-table .records-head { background: red; font-weight: bold; }
.records-layout .data-table .records-head td { white-space: nowrap; color: white; text-align: center; } 

.records-layout .records-pagination { float: right; line-height: 2em; }
.records-layout .records-pagination .curpage { border-radius: 0.8em; padding: 0.5em 1em; background: white; }

.records-layout .data-table-top-operations { float: right; margin-top: -0.25em; }
.records-layout .view-mode { background: #f1f1f1; border: 1px solid white; }
.records-layout .view-mode.selected { background: white; }
.records-layout .view-mode.selected:hover { background: orange; border-color: orange; }
.records-layout .batch-proc-one-key-pf { margin-right: 0; }
.records-layout .download { margin-right: 0em; }

.batch-proc { margin-top: 0.5em;}

.ywzddw-unit-selector, .ywzddw-office-selector, .sdjgdw-unit-selector, .sdjgdw-office-selector{ position: relative; display: inline-block; }

.dropdown { position: relative; display: inline-block; width: 100%; }
.dropdown-input { width: 100%; cursor: pointer; }
.dropdown-content { display: none; position: absolute; max-height: 30em; overflow-x: hidden; overflow-y: auto; background-color: #f9f9f9; width: 100%; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }
.dropdown-option { padding: 1em 2em; cursor: pointer; white-space: nowrap; }
.dropdown-option:hover { background-color: #f1f1f1; }
.dropdown-option .extend { cursor: pointer; padding: 0 0.5em; display: inline-block; }
.dropdown-option .extend:hover { color: orange; }
.dropdown-content a { color: black; text-decoration: none; display: block; }
.dropdown-content a:hover { background-color: #ddd; }
.dropdown:hover .dropdown-content { display: block; }

.switch-button { padding: 1em; font-size: 1em; background: white; border: none; white-space: nowrap; }
.switch-button:hover { background: orange; color: white; }
.switch-button.selected { background: orange; }

.punish { margin-top: 1em; }
.punish li { float: left; line-height: 2em; margin-left: 1.2em; display: inline-block; }
.punish li input { margin: 0 0.5em; }

.timeline-context { border-radius: 0.8em; padding: 0.5em 1em; background: white; }
.timeline { list-style: none; margin: 2em 0 2em 15em; border-left: 0.5em solid #eee9dc; }
.timeline li { position: relative; margin-bottom: 1em; } 
.timeline-date { top: 20%; width: 10em; left: -10em; font-size: 1.2em; margin-top: -0.2em; font-family: "electronicFont"; position: absolute; }
.timeline-circle { top: 20%; left: -0.82em; width: 1.2em; height: 1.2em; background: #48b379; border: 0.3em solid #eee9dc; border-radius: 50%; display: block; position: absolute; }
.timeline-content { padding-left: 1em; border-color: transparent; border-style: solid; border-radius: 0.5em; position: relative; }

.form-group { margin: 0; }
.operation-context { margin-top: 2em; }
.operation-context .form-group { margin-bottom: 15px; white-space: wrap; }

.search-option-more-context { display: none; }
.search-option-more { padding: 0.6em 2em; border-radius: 0.5em 0.5em 0em 0em; background: white; margin-top: 0.5em; display: inline-block; cursor: pointer; }
.search-option-more:hover { color: orange; }
.btn-query-warnings { background: green; color: white; }
.btn-reset-warnings:hover { background: #e1e1e1 !important; color: black; }

.nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobile-layout { display: none; }
.operation-layout { overflow: auto; }

.records-layout .view-bars { background: #f1f1f1; border: 1px solid white; margin-left: 1em; }
.records-layout .view-bars.selected { background: white; }
.records-layout .view-bars.selected:hover { background: orange; border-color: orange; }

.minor-button { display: inline-block; border-radius: 0.5em; padding: 0.5em 1em; margin-right: 0.5em; background: white; border: 1px solid #e1e1e1; cursor: pointer; }
.minor-button:hover { background: orange; color: white; border-color: orange; }
.btn-save-warnings { background: orange; }

.additional-info { padding: 0.2em 0.5em; cursor: pointer; }
.additional-info:hover { color: orange; }

.view-bars-layout { border-radius: 0.5em; background: white; margin-top: 1em; padding: 2em; border: 1px solid white; display: none; }
.view-bars-context { height: 6.718em; }

@media screen and (max-width:1000px) {
	.container-layout { padding: 0; } .records-layout { margin-top: 0em; border-radius: 0em; height: 100%; overflow-x: hidden; overflow-y: auto; }
	.search-layout, .records-layout { padding: 2em 1em; }
	
	.pc-layout { display: none; }
	.mobile-layout { display: block; }
	
	.row-layout { display: block; }
	.operation-layout { width: 100%; padding: 2em 1em; height: 100%; overflow-x: hidden; overflow-y: auto; opacity: 1; }
	
	.records-context .record-item { display: block; padding: 1em 0; }
	.records-context .record-item .item-block { padding: 0.15em 0em; }
	.records-layout .records-pagination { display: flex; justify-content: center; align-items: center; float: none; }
	
	.records-context .record-item .item-block .item-context { border-right: 0; }
	.records-context .record-item .item-block.sxwfxw .item-context { border-left: 2px solid orange; }
	.records-context .record-item .item-block.glzt .item-context { border-left: 2px solid orange; }

	h4, p { word-break: break-all; word-wrap: break-word; white-space: pre-wrap; max-width: 100vw; }
	
	.punish li { float: none; display: block; white-space: nowrap; overflow: hidden; }
	.punish li label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align:middle; display:inline-block; }
	
	.row-layout-50 { width: 100%; overflow: hidden; }
	.row-layout-20 { width: 100%; overflow: hidden; }
	.row-layout-10 { width: 100%; overflow: hidden; }
	
	.timeline { margin: 2em 0 2em 5em; }
	.timeline-date { width: 6em; left: -6em; font-size: 1em; }
}