.dnum										{ background: rgba(255, 255, 255, 1); color: rgba(0, 0, 0, 1); }
.dnum::before								{ bottom: -14px; left: 0; position: absolute; content: attr(data); height: 14px; line-height: 14px; font-size: 9px; width: 40px; background: rgba(255, 255, 255, 1); color: red; text-transform: uppercase }
.dnum.match									{ background-image: linear-gradient(to bottom, rgba(35, 35, 35, 1) 100%, rgba(20, 20, 20, 1) 100%); color: rgba(237, 71, 73, 1); }
.dnum.main::before							{ bottom: -20px; left: 0; position: absolute; content: attr(data); height: 20px; font-size: 9px; line-height: 20px; width: 55px; background: rgba(220, 220, 220, .5); color: red; text-transform: uppercase }
.dnum.mc::before							{ bottom: -15px; left: 0; right: 0; position: absolute; content: attr(data); height: 15px; font-size: 9px; line-height: 15px; min-width: 35px; width: 100%; color: rgba(20, 20, 20, 1) !important; background: rgba(220, 220, 220, .5); color: red; text-transform: uppercase }
.dnum.mc									{ background: rgba(250, 250, 250, 1); color: rgba(2, 2, 2, 1); }
.square .data								{ color: rgba(250, 250, 250, 1); background: rgba(50, 50, 50, 1); font-size: 16px; font-weight: bold; padding: 0 5px 0 20px;  }
.square.r .dnum								{ background-image: linear-gradient(135deg, rgba(35, 35, 35, 1) 50%, rgba(10, 10, 10, 1) 100%); color: rgba(255, 255, 255, 1); margin: 0 8px 20px 0; }
.square.r .dnum::before						{ background: rgba(208, 101, 31, 1); color: rgba(255, 255, 255, 1); }

.dnum										{ font-size: 20px; font-weight: bold; text-align: center; position: relative; }
.dnum.r::before								{ width: 60px; }
.dnum.match::before							{ content: ''; height: 0; display: none; }
.dnum.match									{ font-size: 16px; max-height: 25px; height: 25px; width: 25px; margin: 0 4px 0 0 }
.dnum.main									{ margin: 0 7px 0 7px }
.dnum.mc									{ margin: 0 7px 15px 7px; font-size: 20px; height: 35px; min-width: 35px; width: max-content }
.square										{ height: 40px; width: 100%; margin: 0 0 20px 0; }
.rcol .square, .rcol .data					{ display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start; }
.mcol .square, .mcol .data					{ display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-end; align-content: center; justify-items: center;  }
.mcol .min									{ height: 30px; max-height: 30px;  }
.mcol .min:not(img)							{ margin-bottom: 5px;  }
.timers .r									{ height: 60px; width: 60px; }
.timers .rcol								{ width: fit-content; }
.timers .square.r							{ justify-content: flex-end; width: fit-content; }
.timers										{ margin-left: auto; margin-bottom: auto }
.timers:not(.n)								{ padding: 15px 5px 0 0;  }
.timers.w									{ flex: auto; height: 100%; align-content: flex-end; width: fit-content; }
.timer_main									{ display: flex; flex-direction: row; justify-content: flex-end; align-items: center; padding-top: 7px; width: max-content }
.tgen										{ display: inline-block; padding: 2px; color: rgba(255, 240, 0, 1); }
.tgen + .tgen								{ margin-left: 3px }