body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
    --bg-color: #ffffff;
    --ina-color: beige;
    --act-color: #cf8f18ff;
    --pu-color: rgb(216, 197, 161);
    --edt-width: 600px;
    --edt-height: 400px;
    --dlg-width: 600px;
}

a, a:link, a:visited {
  color: black;
  text-decoration: none;
}

.login-form {
  width: 300px; 
  display: grid; 
  grid-template-rows: 1fr 1fr 1fr 1fr; 
  row-gap: 10px; 
  text-align: center; 
  margin: 50px auto;
}

.plan-body {
  display: block;
}

.plan-head {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-bottom: 10px;
}

.plan-head-item {
  padding: 10px;
  background-color: #fafafa;
  border-radius: 10px;
}

.plan-head-item.active {
  background-color: #e5e5e5;
}

.plan-main {
  display: block;
}
.plan-foot {
  display: block;

}

.plan-sheet {
  display: grid;
  grid-template-columns: 50px 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 5px;
}

.plan-title-day {
  display: grid;
  grid-template-areas: "a a" "b c";
}

.plan-day-name {
  grid-area: a;
  font-weight: bold;
  text-align: center;
  background-color: #e5e5e5;
  border-radius: 5px 5px 0 0;
}

.plan-day-plan {
  grid-area: b;
  font-style: italic;
  font-weight: bold;
  text-align: center;
}

.plan-day-fact {
  grid-area: c;
  font-weight: bold;
  text-align: center;
}

.plan-week-name {
  font-weight: bold;
  text-align: center;
  line-height: 86px;
  background-color: #e5e5e5;
  border-radius: 5px 0 0 5px;
  white-space: nowrap;
}

.plan-week-in {
  grid-area: b;
  text-align: right;
  padding: 5px;
}

.plan-week-out {
  grid-area: c;
  text-align: right;
  padding: 5px;
}

.plan-week-cell {
  display: grid;
  grid-template-rows: 24px auto;
  border: white solid 2px;
  border-radius: 7px;
}

.plan-week-cell.active {
  border: var(--act-color) solid 2px;
}

.plan-cell-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.plan-cell-date {
  text-align: center;
  font-weight: bold;
}

.plan-cell-date.empty {
  font-weight: normal;
}

.plan-cell-value {
  text-align: center;
  padding: 5px;
  display: block;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.plan-week-cell .in {
  background-color: #ceffce;
}

.plan-week-cell .out {
  background-color: #ffcece;
}

.plan-week-cell.today .in {
  background-color: #aaffaa;
}

.plan-week-cell.today .out {
  background-color: #ffaaaa;
}

.plan-week-cell .plan {
  font-style: italic;
}

.plan-week-cell .fact {
  font-weight: bold;
}

.plan.in {
  border-radius: 5px 0 0 0;
}

.fact.in {
  border-radius: 0 5px 0 0;
}

.plan.out {
  border-radius: 0 0 0 5px;
}

.fact.out {
  border-radius: 0 0 5px 0;
}

.plan-week-cell.opacity {
  opacity: 0.5;
}

.plan-dets {
  padding: 10px;
  overflow: hidden;

}

.plan-dets-date {
  background-color: #fafafa;
  text-align: center;
  border-radius: 5px 5px 0 0;
  padding: 5px;
  overflow: hidden;
  font-weight: bold;
}

.plan-dets-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 5px;
  overflow: hidden;
  gap: 10px;
}

.plan-switch-item {
  text-align: center;
  opacity: 0.5;
  cursor: pointer;
  padding: 10px;
  background-color: #fafafa;
  border-radius: 10px;
}

.plan-switch-item.active {
  opacity: 1;
  cursor: auto;
  background-color: #e5e5e5;
}

.plan-switch-item[data-fact="0"] {
  font-style: italic;
  font-weight: bold;
}

.plan-switch-item[data-fact="1"] {
  font-weight: bold;
}

.plan-switch-item.empty {
  font-weight: normal;
}

.plan-list-wrapper {
  display: none;
  flex-direction: column;
  gap: 5px;
}

.plan-list-wrapper.active {
  display: flex;
  overflow: hidden;

}

.plan-list-group {
  border-radius: 5px;
  padding: 5px;
}

.plan-list-wrapper[data-fact="0"] > .plan-list-group[data-dir="in"] {
  background-color: #ceffce7f;
}

.plan-list-wrapper[data-fact="0"] > .plan-list-group[data-dir="out"] {
  background-color: #ffcece7f;  
}

.plan-list-wrapper[data-fact="1"] > .plan-list-group[data-dir="in"] {
  background-color: #ceffce;
}

.plan-list-wrapper[data-fact="1"] > .plan-list-group[data-dir="out"] {
  background-color: #ffcece;  
}

.plan-list-wrapper[data-fact="0"] * {
  font-style: italic;
}

.plan-group-name {
  text-align: center;
  padding: 5px;
  position: relative;
}

.plan-group-name img {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.plan-group-wrapper {
  background-color: white;
  border-radius: 5px;
  overflow: scroll;
  scrollbar-width: thin;
}

.plan-list-blank {
  padding: 5px;
  text-align: center;
}

.plan-list-item.wasted * {
  text-decoration: line-through;
}

.plan-list-item:nth-child(even) {
  background-color: #fafafa;
}

.plan-item-data {
  display: grid;
  grid-template-columns: minmax(100px, 2fr) minmax(100px, 2fr) minmax(80px, 1fr);
  line-height: 26px;
  padding: 0 10px;
}

.plan-item-acct {
  display: block;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.plan-item-descr {
  display: block;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.plan-item-value {
  text-align: right;
  display: block;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.plan-rests-title,
.plan-forecs-title {
  background-color: #fafafa;
  text-align: center;
  border-radius: 5px 5px 0 0;
  padding: 5px;
  overflow: hidden;
  font-weight: bold;
}
.plan-rest,
.plan-forec {
  display: grid;
  grid-template-columns: auto 100px;
  gap: 50px;
  padding: 3px 10px;
}
.plan-rest:nth-child(even),
.plan-forec:nth-child(even) {
  background-color: #fafafa;
}
.plan-rests,
.plan-forecs {
  padding: 10px;
}
.plan-rest-value,
.plan-forec-value {
  text-align: right;
}
.plan-rest-value.neg,
.plan-forec-value.neg {
  color: red;
}
.plan-rests-total,
.plan-forecs-total {
  display: grid;
  grid-template-columns: auto 100px;
  gap: 50px;
  border-top: #e5e5e5 solid 2px;
  padding: 3px 10px;
}
.plan-total-name {
  font-weight: bold;
}
.plan-total-value {
  text-align: right;
}