body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
}
.total {
  width: 1310px;
  margin: 2em auto;
}
.head {
  padding: 1.5em;
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  justify-items: flex-end;
  background: rgb(242,242,242);
  background: linear-gradient(90deg, rgba(242,242,242,1) 0%, rgba(210,210,210,1) 100%);
}
.head > :first-child {
  margin-right: 4em;
  margin-left: 2em;
}
h1 {
  margin: 0;
  font-size: 3em;
  color: #8b847b;
}
h2 {
  margin: 0;
  font-size: 2em;
  font-weight: 100;
  color: #333;
}
.row {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  justify-content: center;
}
.container {
  width: 140px;
  padding-bottom: 20px;
  position: relative;
}
.container.w2 {
  width: 280px;
}
.chart > .row {
  width: 1120px;
  padding-right: 140px;
  padding-left: 50px;
}
.cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #6495ed;
  color: #666;
  background-color: white;
  width: 90px;
  padding: 10px;
  height: 40px;
  margin: 0 auto;
  text-align: center;
  font-weight: normal;
  font-size: 0.8em;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.cell.cell-wide {
  width: 150px;
  margin: 0 0 0 14px
}
.w2 > .cell.sub {
  margin-left: 20px;
}
a.cell {
  z-index: 10;
}
a.cell:hover {
  background-color: #6495ed;
  color: white;
}
.row-2 {
  padding-top: 20px;
}
.row-3 .container .container::after,
.row-2 > .container::after {
  background-color: transparent;
  border-left: 2px solid;
  border-top: 2px solid;
  left: -5px;
  top: 24px;
  width: 17px;
}
.row-3 .container .container.no-children::after,
.row-2 > .container.no-children::after {
  display: none;
}
.row-2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 120px;
  width: 910px;
  height: 2px;
  background-color: #aaa;
}
.row-2 .container::before {
  content: '';
  background-color: #aaa;
  width: 2px;
  position: absolute;
  left: 50%;
  height: 20px;
  bottom: 100%;
}
.row-3 .cell.sub,
.row-2 .cell.sub {
  margin-top: 10px;
  margin-left: 15px;
}
.row-3 .cell.sub::before,
.row-2 .cell.sub::before {
  right: 90px;
  height: 12px;
}
.container::after {
  content: '';
  background-color: #aaa;
  width: 2px;
  position: absolute;
  left: 50%;
  top: 62px;
  bottom: 0;
}
.cell img {
  width: 12px;
  height: 12px;
  position: absolute;
  top: 2px;
  right: 2px;
  border-radius: 100px;
  background-color: rgba(0,0,0,0.2);
  border: 2px solid transparent;
}
.cell.sub {
  margin-top: 20px;
  margin-left: -50px;
}
.cell.sub::before {
  content: '';
  background-color: #aaa;
  position: absolute;
  bottom: 100%;
  height: 22px;
  right: 10px;
  width: 2px;
}
.container.container-vertical > .subcontainer {
  position: relative;
  left: 0px;
  padding-bottom: 20px;
}
.container.container-vertical > .subcontainer > .cell::before {
  content: '';
  background-color: #aaa;
  width: 20px;
  height: 2px;
  position: absolute;
  right: 100%;
  top: 50%;
}
.container.container-vertical::after {
  bottom: 71px;
  left: -5px;
  top: 0;
  width: 2px;
  height: auto;
}
.container.container-vertical.h2::after {
  bottom: 141px;
}
.row-2 > .container.w2::after {
  bottom: 8px;
}
.last-hor .row:first-child .cell:first-child::before {
  content: '';
  background-color: #1b8597;
  width: 2px;
  height: 8px;
  position: absolute;
  left: 50%;
  top: -9px;
}
.container.last-hor {
  position: relative;
  left: 0px;
}
.container.last-hor::after {
  display: none;
}
.container.last-hor::before {
  content: '';
  position: absolute;
  top: -10px;
  width: 213px;
  border-top: 2px solid #aaa;
  border-right: 2px solid #aaa;
  height: 8px;
  left: -3px;
}

.container-vertical > .subcontainer > .cell.sub {
  margin-left: 44px;
}
.container-vertical > .subcontainer > .cell.sub::before {
  width: 2px;
  height: 11px;
  right: auto;
  left: 20px;
  top: auto;
  bottom: 100%;
}

.container .row.last .container::after {
  border: 0;
  width: 2px;
  top: 0;
}


.row-2 .container:nth-child(1) .cell {
  background-color: #cc55aa;
  border-color: #883377;
  color: white;
}
.row-3 > .container:nth-child(1) .cell {
  background-color: #b14e95;
  border-color: #883377;
  color: white;
}
.row-2 .container:nth-child(1) a.cell:hover,
.row-3 .container:nth-child(1) a.cell:hover {
  background-color: #e00aa4;
}
.row-2 .container:nth-child(1) .sub::before,
.row-3 .container:nth-child(1)::after,
.row-3 .container:nth-child(1) .subcontainer .cell::before {
  background-color: #883377;
}
.row-2 .container:nth-child(1)::after {
  border-color: #883377;
}
.row-2 .container:nth-child(2) .cell {
  background-color: #3f79e6;
  border-color: #0e3a8d;
  color: white;
}
.row-3 > .container:nth-child(2) .cell {
  background-color: #3b67b9;
  border-color: #0e3a8d;
  color: white;
}
.row-2 .container:nth-child(2) a.cell:hover,
.row-3 .container:nth-child(2) a.cell:hover {
  background-color: #1463f5;
}
.row-2 .container:nth-child(2) .sub::before,
.row-3 .container:nth-child(2)::after,
.row-3 .container:nth-child(2) .subcontainer .cell::before {
  background-color: #0e3a8d;
}
.row-2 .container:nth-child(2)::after {
  border-color: #0e3a8d;
}
.row-2 .container:nth-child(3) .cell {
  background-color: #f83c3c;
  border-color: #a01c1c;
  color: white;
}
.row-3 > .container:nth-child(3) .cell {
  background-color: #d63b3b;
  border-color: #a01c1c;
  color: white;
}
.row-2 .container:nth-child(3) a.cell:hover,
.row-3 .container:nth-child(3) a.cell:hover {
  background-color: #ca0000;
}
.row-2 .container:nth-child(3) .sub::before,
.row-3 .container:nth-child(3)::after,
.row-3 .container:nth-child(3) .subcontainer .cell::before {
  background-color: #a01c1c;
}
.row-2 .container:nth-child(3)::after {
  border-color: #a01c1c;
}
.row-2 .container:nth-child(4) .cell {
  background-color: #8753e7;
  border-color: #5226a5;
  color: white;
}
.row-3 > .container:nth-child(4) .cell {
  background-color: #734ac0;
  border-color: #5226a5;
  color: white;
}
.row-2 .container:nth-child(4) a.cell:hover,
.row-3 .container:nth-child(4) a.cell:hover {
  background-color: #4900cf;
}
.row-2 .container:nth-child(4) .sub::before,
.row-3 .container:nth-child(4)::after,
.row-3 .container:nth-child(4) .subcontainer .cell::before {
  background-color: #5226a5;
}
.row-2 .container:nth-child(4)::after {
  border-color: #5226a5;
}
.row-2 .container:nth-child(5) .cell {
  background-color: #21bd62;
  border-color: #188646;
  color: white;
}
.row-3 > .container:nth-child(5) .cell {
  background-color: #27a35a;
  border-color: #188646;
  color: white;
}
.row-2 .container:nth-child(5) a.cell:hover,
.row-3 .container:nth-child(5) a.cell:hover {
  background-color: #00c753;
}
.row-2 .container:nth-child(5) .sub::before,
.row-3 .container:nth-child(5)::after,
.row-3 .container:nth-child(5) .subcontainer .cell::before {
  background-color: #188646;
}
.row-2 .container:nth-child(5)::after {
  border-color: #188646;
}
.row-2 .container:nth-child(6) .cell {
  background-color: #da7e41;
  border-color: #9e5321;
  color: white;
}
.row-3 > .container:nth-child(6) .cell {
  background-color: #c77a47;
  border-color: #9e5321;
  color: white;
}
.row-2 .container:nth-child(6) a.cell:hover,
.row-3 .container:nth-child(6) a.cell:hover {
  background-color: #db5b05;
}
.row-2 .container:nth-child(6) .sub::before,
.row-3 .container:nth-child(6)::after,
.row-3 .container:nth-child(6) .subcontainer .cell::before {
  background-color: #9e5321;
}
.row-2 .container:nth-child(6)::after {
  border-color: #9e5321;
}
.row-2 .container:nth-child(7) .cell {
  background-color: #38bcd3;
  border-color: #1b8597;
  color: white;
}
.row-3 > .container:nth-child(7) .cell {
  background-color: #39a6b9;
  border-color: #1b8597;
  color: white;
}
.row-2 .container:nth-child(7) a.cell:hover,
.row-3 .container:nth-child(7) a.cell:hover {
  background-color: #00b3d3;
}
.row-2 .container:nth-child(7) .sub::before,
.row-3 .container:nth-child(7) .sub::before,
.row-3 .container:nth-child(7) .container.container-vertical::after ,
.row-3 .container:nth-child(7) .subcontainer .cell::before {
  background-color: #1b8597;
}
.row-3 .container:nth-child(7) .container::after,
.row-3 .container:nth-child(7)::after,
.row-2 .container:nth-child(7)::after,
.container.last-hor::before {
  border-color: #1b8597;
  background: transparent;
}
.row-1 .cell {
  background-color: #999;
  color: white;
  border-color: #666;
}
.row-1 a.cell:hover {
  background-color: #bbb;
}


.template {
  display: none;
}
.modal-container {
  display: none;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.4);
}
.modal {
  position: fixed;
  
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 4px;
  padding: 20px;
  width: 320px;
  min-height: 200px;
}
.modal-container.dir .modal {
  width: 660px;
}
.modal-container.dir .modal-content {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: flex-start;
}
.modal-container.dir .col {
  width: 320px;
}
.modal img {
  max-width: 100%;
}
.modal img.empty {
  background-color: #eeeeee;
}
.bt-close {
  position: absolute;
  top: 10px;
  right: 10px;
  white-space: nowrap;
  overflow: hidden;
  background-color: white;
  border-radius: 200px;
  width: 30px;
  height: 30px;
  text-indent: 45px;
  box-shadow: 0px 4px 6px rgba(0,0,0,0.2);
}
.bt-close::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 5px;
  right: 5px;
  display: block;
  height: 2px;
  background-color: #6495ed;
  transform: rotate(-45deg);
}
.bt-close::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 5px;
  right: 5px;
  display: block;
  height: 2px;
  background-color: #6495ed;
  transform: rotate(45deg);
}
.modal h2 {
  margin: 0.2em 0 0;
}
.modal h3 {
  font-weight: normal;
  margin: 0;
}
.modal h4 {
  margin: 0;
  font-weight: normal;
}

.container.container-vertical.special-sub {
  padding: 20px 0 0;
}
.container.container-vertical.special-sub::after {
  top: 48px;
}
.container.container-vertical.special-sub .cell::before {
  display: none;
}
.container.container-vertical.vertical-short::after {
  bottom: 286px;
}