.vertical-lines {background-image: url('../images/pages/vertical-lines.png');}

/* Setting the spacing for every row*/
.bonus-row { /*display: table-row; */ width: 900px; font-size: 10px; color: #23478F; text-align: center; margin-top: 2px;}
.bonus-row > div { display: table-cell; }
.bonus-row > div:first-child { width: 115px; }
.bonus-row > div:nth-child(2) { width: 2px; }
.bonus-row > div:nth-child(3) { width: 154px; }
.bonus-row > div:nth-child(4) { width: 12px; }
.bonus-row > div:nth-child(5) { width: 154px; }
.bonus-row > div:nth-child(6) { width: 12px; }
.bonus-row > div:nth-child(7) { width: 154px; }
.bonus-row > div:nth-child(8) { width: 19px; }
.bonus-row > div:nth-child(9) { width: 100px; }
.bonus-row > div:nth-child(10) { width: 19px; }
.bonus-row > div:nth-child(11) { width: 154px; }

/* Setting margin between the green header and  [between peaces and accessoires]*/
.bonus-row-header { margin-bottom: 12px; }

/* Classes for the green headings */
.bonus-row .year { font-size: 30px; font-weight: 600; color: #B8000F; vertical-align: bottom; text-align: left; padding-left: 5px; padding-bottom: 1px; }
.bonus-row .bonus-header { background-color: #006938; border: 1px solid #000000; color: #FFFFFF; margin-bottom: 7px; }
.bonus-row .bonus-header .bonus-header-large { font-size: 19px; font-weight: 500; }
.bonus-row .bonus-header .bonus-header-small { font-size: 10px; font-weight: 500; display: table-row; }
.bonus-row .bonus-header .bonus-header-small > div:nth-child(2) { background-color: #009C45; border: 1px rgb(255, 255, 255, 0.2) solid; border-bottom: 0px;}
.bonus-row .bonus-header .bonus-header-small .bonus-header-cell { display: table-cell; width: 51px; overflow: hidden; }

/* Classess for the first row of peaces/accessoires */
.bonus-row .bonus-general { background-color: #F4EFE2; border: 1px solid #9E9E9E; text-align: center;}
.bonus-row .bonus-general .bonus-general-cell { display: table-cell; width: 51px; }
.bonus-row .bonus-general .bonus-general-cell-large { display: table-cell; width: 100px; }

/* Classess for the labels Realizatie and Bonus*/
.bonus-row .bonus-row-subheader { background-color: #F9F9F9; border-left: 1px #000000 solid; border-right: 1px #000000 solid; font-weight: 600; padding-left: 5px; }
.bonus-row .bonus-row-subheader .subheader-row { display: table-cell; width: 52px; }


/* Classes for the percentages for this bonus*/
.bonus-row .bonus-bordered {border: 1px #000000 solid; background-color: #F9F9F9;}
.bonus-row .bonus-percents {}
.bonus-row .bonus-percents .bonus-percents-cell { display: table-cell; width: 52px; }

/* Classess for every record*/
.bonus-row .bonus-element {}
.bonus-row .bonus-element .bonus-element-cell {display: table-cell; width: 51px;}
.bonus-row .bonus-element > div > div:nth-child(2) { background-color: #FFFFFF; border-left: 1px #000000 solid; border-right: 1px #000000 solid; }

/* Classess for the labels of the current bonus*/
.bonus-row .bonus-title { border: 1px solid #9E9E9E; color: #2d2d2d;  padding-left: 5px; text-align: left; background-color: #F4EFE2;  }
.bonus-row .pointer { cursor: pointer; }
.bonus-row .bonus-title i { float: right; margin: 2px 2px 0 0; color: #23478F; }
.bonus-row .title-parts { background-color: #C54E15; }
.bonus-row .title-accessories { background-color: #FD9700; }

/* Classess for the final row with the bonus points */
.bonus-total { width: 677px; margin-left: 208px; color: #FFFFFF; font-size: 10px; text-align: center;  background-image: url('../images/pages/horizontal-line.png');}
.bonus-total > div { display:table-cell; }

.bonus-total .spacer-small { width: 43px; }
.bonus-total .spacer-large { width: 104px; }
.bonus-total .spacer-larger { width: 114px; }

.bonus-total .subtotal { border: 1px #000000 solid; background-color: #006A35; width: 105px; text-align: left; padding-left: 5px; }
.bonus-total .bonus-cell { width: 52px; border: 1px #9E9E9E solid; background-color: #F4EFE2; color: black;}
.bonus-total .total { border: 1px #9E9E9E solid; background-color: #B40007; }
.bonus-total .total-label {width: 155px; text-align: right; padding-right: 10px;}

.show-me { display: flex !important;}
.point-me { cursor: pointer; }
.rotate-me i { transform: rotate(180deg); margin-top: 1px !important;}

.bonus-row-inner { display: none; flex-direction: row; }
.bonus-row-inner .wrapper {border: 1px solid #9E9E9E;display:inline  }
.bonus-row-inner .wrapper:last-child { display: flex;  flex-direction: column; }
.bonus-row-inner .wrapper:last-child .bonus-general { flex: 1; display: flex;}
.bonus-row-inner .wrapper:last-child .bonus-general .bonus-general-cell { justify-content: center; align-items: center; display: flex; }
.bonus-row-inner .wrapper:last-child .bonus-general .bonus-general-cell:nth-child(even) { color: black; }
.bonus-row-inner .bonus-general { background-color: white; border: none; }
.bonus-row-inner .bonus-general div:nth-child(odd) { background-color: whitesmoke;}
.bonus-row-inner .bonus-general div:nth-child(even) { border-right: 1px solid #9E9E9E; border-left: 1px solid #9E9E9E;}

.bonus-row-additional .bonus-wrapper { display: flex; flex-direction: row; width: 105px;}
.bonus-row-additional .bonus-wrapper div:first-child { flex: 2; text-align: right; }
.bonus-row-additional .bonus-wrapper div:last-child { flex: 1; }