table {
  border-collapse: unset;
  border-spacing: 0;
  border: none;
}
.container--stringlines {max-width: 100%;}

td {vertical-align: top;}

.iFrame {height: 80%; width: 100%; overflow: scroll;}
.paginator .selected {font-size: large; background-color: darkslategrey; color: white;}
.editor {height: 100%; width: 100%; min-height: 30px; position: relative; overflow: hidden; resize: both}
.editor .i-screen {object-fit: contain; width: 100%}

#btnClose {border: 2px transparent solid; position: absolute}
#btnClose:hover {cursor: pointer; border: 2px red solid; }

.borderSolid {border: 2px Silver solid;}
.borderNone {border: 2px transparent solid;}
.show-image {display: block; position: absolute; top: 10px; right: 20px;}

.hide {display: none;}
label:hover {cursor: pointer;}
label.selected {color: red; }
sup input[type=checkbox] {display: none;}


#i-addFiles {width: 400px; height: 200px; position: absolute; top: 50%; left: 50%; text-align: center;}
#i-addFiles .i-addFiles__content {position: relative; top: -100px; left: -200px; background-color: white; border: 1px silver solid; width: 100%; height: 100%; box-shadow:  0 0 10px rgba(0,0,0,0.5);}

#i-addFiles .inputfile-container {    display: block;
    overflow: hidden;
    width: 120px;
    display: inline-block;
}
.i-addFiles__content input[type=submit] {
    display: inline-block;
    position: relative;
    top: -6px;}

.warn {color: red; font-weight: bolder;}
.i-screen {width: 230px;}
.words-counter {float: right;}

.i-logout {float: right;}
.deleted-filter__block {display: inline-block; width: auto; height: auto; border: 1px silver solid; padding: 5px;}
.deleted-filter__block.active {background-color: aliceblue; }

.planning-table {width: 1900px; border-left: 1px solid silver; }
.planning-table th { height: 120px; border-right: 1px silver solid; border-bottom: 1px solid silver; text-align: center;padding:0;}

.planning-table tr.hidden {display: none}

.planning-th--small {width: 29px;/*writing-mode: sideways-lr;*/ text-align: left !important;}
.planning-table .planning-th--40 {width: 40px;}
.planning-table .planning-th--200 {width: 200px;}
.planning-table .planning-th--400 {width: 401px;}
.planning-table .planning-th--600 {width: 600px;}

.roatate {transform: rotate(-90deg); overflow: inherit; width: 29px; position: relative; bottom: -33px}
th.planning-th--width {writing-mode:horizontal-tb; }

.td--center {text-align: center; vertical-align:  top;}



/* ============= */
/* .planning-row */
.planning-row td {border-right: 1px silver solid; border-bottom: 1px solid silver; text-align: center; vertical-align: middle;padding:0}
.planning-row.planning-row--image > td {height: 400px;position: relative}
.planning-row.editable {background-color: #d6d8db}
tr.action-delete {background-color: #fde8e8}
tr.action-move-row {background-color: #cbffcb}
tr.action-move-group > td {background-color: #d7e6ff}
td.td--screen-name {width: 200px; vertical-align: top;}
/* Компактный вид ячейки */
.planning-row.planning-row--image.planning-row--hidden > td { height: auto; }
/* Прячем выбранные ячейки */
.planning-row.planning-row--image.planning-row--hidden > td:nth-of-type(10),
.planning-row.planning-row--image.planning-row--hidden > td:nth-of-type(12),
.planning-row.planning-row--image.planning-row--hidden > td:nth-of-type(13) { font-size: 0; }
.planning-row.planning-row--image.planning-row--hidden > td:nth-of-type(10) > *,
.planning-row.planning-row--image.planning-row--hidden > td:nth-of-type(12) > *,
.planning-row.planning-row--image.planning-row--hidden > td:nth-of-type(13) > .clipboard-image--delete,
.planning-row.planning-row--image.planning-row--hidden > td:nth-of-type(13) > * { display: none }
.planning-row.planning-row--image.planning-row--hidden > td:hover > .clipboard-image--delete  { display: none; }
.planning-row--moving-temp { position: fixed; z-index: 2000; background-color: rgba(0,0,0,.03); border: 2px dashed rgba(0,0,0,.1); pointer-events: none; touch-action: none; }
.planning-row--moving-orig { background-color: #f0f0f0; }
tr.planning-row--moving-orig > td { background-color: #f0f0f0; }
.planning-row--moving-target-top > td { background-image: linear-gradient(to bottom, tomato 2px, transparent 2px); }
.planning-row--moving-target-bottom > td { background-image: linear-gradient(to top, tomato 2px, transparent 2px); }

.planning-image {overflow: hidden; resize: both; width: 180px; height: 400px; max-height: 390px; max-width: 180px;position:relative;display:inline-block; vertical-align:top}
.planning-image img {height: 100%; width: 100%;object-fit: contain;max-width: 180px;max-height: 390px;}
.planning-image--border {border:1px #3f9ae5 solid}

.td--width {width: calc(33% - 360px); text-align: left}
.td--width-600 {width: 600px}
.td--width-400 {width: 401px}

.td--status div{/*text-align: left;*/}
.td--status div div {display: inline-block; height: auto; width: 96px}
.td--status div div:first-child {margin-top: 20px;}
/* Редактируемая ячейка */
.td--contenteditable > div { display: table; width: 100%; height: calc(100% - 30px); }
.td--contenteditable div[contenteditable] { display: table-cell; vertical-align: middle; }



/* =============== */
/* .table-statuses */
.table-statuses { width: 400px; height: 100%; border: none }
.table-statuses th, .table-statuses td { height: auto; width: 100px }
.table-statuses tr:first-of-type > * { border-top: none; }
.table-statuses tr:last-of-type > * { border-bottom: none; }
.table-statuses tr > *:first-of-type { border-left: none; }
.table-statuses tr > *:last-of-type { border-right: none; }
.table-statuses .status-cell { height: 94px; }
.table-statuses .status-cell--empty { border: none; border-right: 1px solid silver; }


.status-name {font-weight: bolder}
.status-value--need {color: red}
.status-value--work {color: green}
.status-value--testing {color: orange}
.status-value--ready {color: blue}
.status-value--none-need {color: #e400ff}

.td--status td div.status-value--add {margin: auto; height: 20px;font-size: 12px; background-color: #ced4da5e;color: #3d4852; text-align: center; border-radius: 2px; width: 60px;border: 1px silver solid; user-select: none}
.status-value--add:hover {cursor: pointer}

.planning-filter {height: 110px; width:1900px; background-color: #f0f0f0; border-bottom: 1px solid silver;}
.filter-name {width: 40px; display: block}
.planning-filter-col {display: inline-block; border-right: 1px silver solid; vertical-align: top; height: 100%}

.planning-filter-col--2 {width: 81px}
.planning-filter-col--3 {width: 87px}
.planning-filter-col--4 {width: 116px}
.planning-filter-col--web {width: 397px;}
.planning-filter-col--ribbon {width: calc(100% - 696px); min-width: 660px}

.filter-name--width{ width: 80px;}
.filter-checkbox {display: inline-block}
.planning-filter-container div {}
.inline {display: inline-block}
.planning-filter-container--status {width: 395px;}
.planning-filter-container--status .filter-name {width: 80px; display: inline-block}
.planning-filter-container label {padding: 0 3px 0 3px; user-select: none; margin-bottom: 0;}

.row-group { height: 37px; font-size: 16px; font-weight: bolder; vertical-align: middle; }

.group-name--title {display: inline-block; width: 250px; }

.search-container {display: table-cell; vertical-align: middle;height: 110px;}

#form-status-change {
  display: none;position:fixed;align-items:center;
  justify-content:center;top:0px;left:0px;width:100vw;
  height:100vh;background-color: rgba(127,127,127,.5);
  z-index: 1000;
}
body.form-open-status #form-status-change,
body.form-open-group #form-status-change,
body.form-open-add-row #form-status-change,
body.form-open-status-edit #form-status-change,
body.form-open-statuses-edit #form-status-change,
body.form-open-edit-actions #form-status-change,
body.form-open-group-order #form-status-change,
body.form-open-row-order #form-status-change,
body.form-open-filter-display #form-status-change
        {display: flex}

body.form-open-status .popup-status-change {display: block;}
body.form-open-group .popup-add-group {display: block;}
body.form-open-add-row .popup-add-row {display: block;}
body.form-open-status-edit .popup-status-edit {display: block;}
body.form-open-statuses-edit .popup-set-statuses {display: block}
body.form-open-edit-actions .popup-edit-actions {display: block;}
body.form-open-group-order .popup-group-order {display: block;}
body.form-open-row-order .popup-row-order {display: block;}
body.form-open-filter-display .popup-filter-display {display: block;}

.popup-add-group {width: 500px;}
.add-after {margin-top:10px;}

.popup-container {background-color: #fefefe;border: 1px silver solid;border-radius: 10px; padding: 20px; display: none}

.popup-status-change {width: 500px; height: 270px; }

.popup-container label {width: 100px; background-color: transparent; border-radius: 2px; border: 1px #ced4da solid; margin-right: 20px; font-size: 12px; text-align: center;user-select: none}
.popup-container label:hover {box-shadow: 0 0 3px #4aa0e6}
.popup-container input {margin-right: 10px; vertical-align: middle;}
.popup-container fieldset {border: 1px silver solid; border-radius: 5px; padding: 10px; margin-bottom: 10px;}
.popup-container legend {padding-left: 30px; background-color: transparent; width: 150px;margin-bottom:0}
.popup-container button { cursor: pointer; }

.popup-add-group legend {width: 300px;}
.popup-add-row legend {width: 300px;}

.div-center {text-align:center;margin-top:15px}

.popup-container .color-default {border-color: #ced4da; color: #212529 }
.popup-container .color-ready {border-color: blue; color: blue}
.popup-container .color-testing {border-color: orange;color: orange}
.popup-container .color-need {border-color: red;color: red}
.popup-container .color-in-work {border-color: green;color: green}
.popup-container .color-none-need {border-color: #e400ff; color: #e400ff}


.popup-snippet {width: auto;line-height: 12px;font-size: 12px;color: gray;margin-top: 10px;text-align: center;}


.popup-container.popup-edit-actions legend { width: 260px; }
.popup-container.popup-edit-actions button { display: block; width: 100%; }
.popup-container.popup-edit-actions button + * { margin-top: 10px; }
.popup-container.popup-edit-actions button:nth-of-type(2) { margin-top: 20px; }
.popup-container.popup-edit-actions button:nth-of-type(4) { margin-top: 20px; }

.popup-container.popup-group-order legend { width: 300px; }
.popup-container.popup-row-order legend { width: 290px; }
.popup-container.popup-row-order input { width: 100%; margin: 0; }
.popup-container.popup-row-order .popup-snippet { text-align: left; }
.popup-container.popup-row-order .popup-snippet p { margin: 5px 0 0 0; }
.popup-container.popup-row-order .popup-snippet p.error { color: red; }
.popup-container.popup-row-order .popup-snippet p:empty { display: none; }
.popup-container.popup-group-order .popup-snippet { text-align: left; }



.width-15 {width: 13px}


.statuses-button {padding: 1px 10px;font-size: 11px;border: 1px silver solid; margin: 0 3px;}
.statuses-button:hover {box-shadow: 0 0 3px #4aa0e6; cursor: pointer}
.statuses-button.active {background-color:#4aa0e642}
.green {color:green;border-color:green}
.red {color:red;border-color:red}


.clipboard-image {user-select: none;pointer-events: none;}
.clipboard-image--delete {display: none; position:absolute; top: 0;left:0;padding: 1px 10px;font-size: 11px;border: 1px silver solid; margin: 0 3px;z-index:100;background-color: #e9ecef;}
.clipboard-image--delete:hover {box-shadow: 0 0 3px #4aa0e6; cursor: pointer}
td[data-name="screen_file"]:hover .clipboard-image--delete {display: block}

/* Смена курсора над элементом */
.hover-pointer:hover {cursor: pointer}


/* Плавающие элементы */
.planning-filter {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 105;
}
.planning-header th {
  position: -webkit-sticky;
  position: sticky;
  top: 110px;
  background-color: #f8fafc;
  z-index: 105;
}
.row-group {
  position: -webkit-sticky;
  position: sticky;
  top: 230px;
  background-color: #f8fafc;
  border-right: 1px solid silver;
  border-bottom: 1px solid silver;
  z-index: 105;
}

.th-screen-container {height: 100%; width:100%;display: table}
.th-screen-row {display: table-cell;vertical-align: middle;position: relative}
.th-screen-sub-row {position: absolute;bottom: 0;height:30px;width:100%;border-top: 1px silver solid}
.th-screen-sub-cell {width: 190px;height:30px;display:inline-block;border-right: 1px silver solid}
.th-screen-sub-cell:last-child {border-right: none}

.button-action-checkbox { display: none; margin: 0; font-size: 0; padding: 8px 0; text-align: center; }
body.show-edit-checkbox .button-action-checkbox { display: block; }
body.show-edit-checkbox .button--add-edit { color: red; }

.row-group--actions { padding: 0 5px; font-size: 0; white-space: nowrap; }
.row-group--actions button {padding: 1px;font-size: 11px;border: 1px silver solid;}
.row-group--actions button:hover {box-shadow: 0 0 3px #4aa0e6}
.row-group--actions-checked input { cursor: pointer; }

.layout-group { display: inline-flex; align-items: center; justify-content: flex-start; vertical-align: middle; font-size: 100%; }
.layout-group:nth-of-type(1) { width: 158px; }
.layout-group:nth-of-type(3) { width: 118px; }
.layout-group + * { margin-left: 17px; }
.layout-group > * + * { margin-left: 5px; }
.button--deselect-all {margin-left: 47px;margin-top: 5px;}


/*.panel-save-row.hidden > * { display: none }*/
.panel-save-row {
  display: none;
}
body.show-button-save .panel-save-row {
  display: inline-flex;
}

.layer-spinner {
  position: fixed;
  top: -50px;
  left: 50%;
  z-index: 200;
  padding: 10px 20px;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 0 3px 0 lightgray;
  transform: translateX(-50%);
  transition: top .1s;
}
.layer-spinner span {
  font-size: 16px;
  font-weight: bold;
}
body.show-spinner .layer-spinner {
  top: 0;
}

/* Фильтры по экранам в заголовке таблицы */
.filter-web { width: 100%; }
.filter-web .filter-row {}
.filter-web .filter-row__cell { vertical-align: middle; line-height: 24px; }
.filter-web .filter-row__cell--caption { text-align: right; }
.filter-web .filter-row__cell--filter { width: 100%; }
.filter-web .filter-row__cell--button { width: 100%; height: 100px; }
.filter-web .filter-row__cell--button button { width: 100%; height: 100%; font-weight: bold; background: none; border: none; outline: none; -webkit-appearance: none; cursor: pointer; }
.filter-web .filter-row__cell--button button:hover{ color: red; }


.filter-display {}
.filter-display .filter-display__row {}
.filter-display .filter-display__cell { height: 26px; line-height: 22px; }
.filter-display .filter-display__cell--caption { padding: 3px 5px 0 0; text-align: right; }
.filter-display .filter-display__cell--filter { }
.filter-display .filter-display__filter-container { display: flex; max-width: 330px; padding: 2px 0 0 0; overflow: hidden; cursor: default; }
.filter-display .filter-display__filter {
  display: flex; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default;
  background-color: #fdfdfd; border-radius: 2px; border: 1px solid lightgray; padding: 0 4px;
}
.filter-display .filter-display__filter ~ .filter-display__filter { margin-left: 2px; }
.filter-display .filter-display__filter-name { margin: 0; font-size: 12px; font-weight: bold; line-height: 20px; cursor: default; }
.filter-display .filter-display__filter-status {
  display: flex; margin-left: 2px; font-size: 12px; line-height: 20px; white-space: nowrap; max-width: 100%; overflow: hidden; cursor: pointer;
}
.filter-display .filter-display__filter-status .meta { display: block; flex: 0; pointer-events: none; touch-action: none; }
.filter-display .filter-display__filter-status .text { display: block; flex: 1; overflow: hidden; text-overflow: ellipsis; pointer-events: none; touch-action: none; }
.filter-display .filter-display__filter-status:hover { flex: auto 1 1; text-decoration: underline; }


.popup-filter-display {}
.popup-filter-display legend { width: 280px; }
.popup-filter-display button { padding: 0; border: 1px solid silver; border-radius: 2px; font-size: 14px; line-height: 1.1; outline: none; }
.popup-filter-display .filter-step { color: silver; font-style: italic; }
.popup-filter-display .filter-step span { color: silver; margin: 0 0 0 5px; padding: 2px 3px; border: 2px solid silver; border-radius: 3px; font-size: 12px; font-style: normal; cursor: pointer; }
.popup-filter-display .filter-step span.active { color: red; border-color: red; }
.popup-filter-display .filter-cell { vertical-align: middle; }
.popup-filter-display .filter-cell--caption { text-align: right; vertical-align: top; padding: 5px 5px 0 0; font-size: 16px; line-height: 26px; color: gray; cursor: pointer; }
.popup-filter-display .filter-cell--caption:hover { color: black; }
.popup-filter-display .filter-cell--empty {}
.popup-filter-display .filter-cell button { display: block; width: 110px; height: 32px; }
.popup-filter-display .filter-cell__status { display: block; height: 29px; padding: 3px 0 10px 0; line-height: 16px; font-size: 12px; text-align: center; }
.popup-filter-display .filter-cell__status:not(:empty) { cursor: pointer; }
.popup-filter-display .filter-cell__status:hover { text-decoration: underline; }
.popup-filter-display .filter-cell.active button { font-weight: bold; }
.popup-filter-display .table-display { margin: 5px 0 0 0; }
.popup-filter-display .table-status { display: flex; flex-flow: row wrap; justify-content: space-around; margin: 5px 0 0 0; text-align: center; }
.popup-filter-display .table-status--disabled { opacity: .3; }
.popup-filter-display .table-status--disabled button { pointer-events: none; touch-action: none; cursor: default; }
.popup-filter-display .table-status button { flex: 40% 0 0; width: 40%; margin: 5px auto; background: none; border-radius: 2px; border-style: solid; border-width: 1px; font-size: 12px; user-select: none; outline: none; -webkit-appearance: none; line-height: 20px; }
.popup-filter-display button ~ button { margin-left: 5px; }
.popup-filter-display .div-center button { padding: 5px 10px; }