/*common part*/
.ruler4000L,
.ruler4000R,
.ruler2000L,
.ruler2000R,
.ruler1000L,
.ruler1000R,
.ruler500L,
.ruler500R,
.ruler250L,
.ruler250R,
.ruler3,
.ruler4,
.ruler5,
.ruler6,
.ruler7,
.ruler8,
.ruler9,
.ruler10,
.ruler11,
.ruler12,
.ruler13,
.ruler14,
.ruler15,
.ruler16,
.ruler17,
.ruler18,
.ruler19,
.ruler20,
.ruler21,
.ruler22 {
    position: relative;
    width: 100%;
    margin: 20px auto;
    height: 15px;
}

/******************the different width of ruler has to be set here*****************************/
.ruler4000L .cm,
.ruler4000R .cm,
.ruler2000L .cm,
.ruler2000R .cm,
.ruler1000L .cm,
.ruler1000R .cm,
.ruler500L .cm,
.ruler500R .cm,
.ruler250L .cm,
.ruler250R .cm {
    position: absolute;
    border-left: 1px solid #555;
    height: 12px;
    width: 20%;
}

.ruler3 .cm,
.ruler4 .cm,
.ruler5 .cm,
.ruler6 .cm {
    position: absolute;
    border-left: 1px solid #555;
    height: 12px;
    width: 40%;
}

.ruler3 .mm,
.ruler4 .mm {
    position: absolute;
    border-left: 1px solid #555;
    width: 40%;
    height: 5px;
}

.ruler4000L .cm:after,
.ruler4000R .cm:after,
.ruler2000L .cm:after,
.ruler2000R .cm:after,
.ruler1000L .cm:after,
.ruler1000R .cm:after,
.ruler500L .cm:after,
.ruler500R .cm:after,
.ruler250L .cm:after,
.ruler250R .cm:after,
.ruler5 .cm:after,
.ruler6 .cm:after,
.ruler7 .cm:after,
.ruler8 .cm:after,
.ruler9 .cm:after,
.ruler10 .cm:after,
.ruler11 .cm:after,
.ruler12 .cm:after,
.ruler13 .cm:after,
.ruler14 .cm:after,
.ruler15 .cm:after,
.ruler16 .cm:after{
    position: absolute;
    left: -10%;
    bottom: 12px;
    font: 12px/1 sans-serif;
}

.ruler3 .cm:after,
.ruler4 .cm:after,
.ruler17 .cm:after,
.ruler18 .cm:after,
.ruler19 .cm:after,
.ruler20 .cm:after,
.ruler21 .cm:after,
.ruler22 .cm:after{
    position: absolute;
    left: -3%;
    bottom: 12px;
    font: 12px/1 sans-serif;
}

.ruler4000L .cm:nth-of-type(1),
.ruler4000R .cm:nth-of-type(1),
.ruler2000L .cm:nth-of-type(1),
.ruler2000R .cm:nth-of-type(1),
.ruler1000L .cm:nth-of-type(1),
.ruler1000R .cm:nth-of-type(1),
.ruler500L .cm:nth-of-type(1),
.ruler500R .cm:nth-of-type(1),
.ruler250L .cm:nth-of-type(1),
.ruler250R .cm:nth-of-type(1),
.ruler3 .cm:nth-of-type(1),
.ruler4 .cm:nth-of-type(1),
.ruler5 .cm:nth-of-type(1),
.ruler7 .cm:nth-of-type(1){
    left: 0%;
}

.ruler4 .cm:nth-of-type(1),
.ruler6 .cm:nth-of-type(1) {
    left: 0%;
    border: transparent;
}


/*************************separate setting for rulers in step 1*********************************/

.ruler4000L .cm:nth-of-type(2),
.ruler4000R .cm:nth-of-type(2),
.ruler2000L .cm:nth-of-type(2),
.ruler2000R .cm:nth-of-type(2),
.ruler1000L .cm:nth-of-type(2),
.ruler1000R .cm:nth-of-type(2),
.ruler500L .cm:nth-of-type(2),
.ruler500R .cm:nth-of-type(2),
.ruler250L .cm:nth-of-type(2),
.ruler250R .cm:nth-of-type(2) {
    left: 20%;
}

.ruler4000L .cm:nth-of-type(3),
.ruler4000R .cm:nth-of-type(3),
.ruler2000L .cm:nth-of-type(3),
.ruler2000R .cm:nth-of-type(3),
.ruler1000L .cm:nth-of-type(3),
.ruler1000R .cm:nth-of-type(3),
.ruler500L .cm:nth-of-type(3),
.ruler500R .cm:nth-of-type(3),
.ruler250L .cm:nth-of-type(3),
.ruler250R .cm:nth-of-type(3) {
    left: 40%;
}

.ruler4000L .cm:nth-of-type(4),
.ruler4000R .cm:nth-of-type(4),
.ruler2000L .cm:nth-of-type(4),
.ruler2000R .cm:nth-of-type(4),
.ruler1000L .cm:nth-of-type(4),
.ruler1000R .cm:nth-of-type(4),
.ruler500L .cm:nth-of-type(4),
.ruler500R .cm:nth-of-type(4),
.ruler250L .cm:nth-of-type(4),
.ruler250R .cm:nth-of-type(4) {
    left: 60%;
}

.ruler4000L .cm:nth-of-type(5),
.ruler4000R .cm:nth-of-type(5),
.ruler2000L .cm:nth-of-type(5),
.ruler2000R .cm:nth-of-type(5),
.ruler1000L .cm:nth-of-type(5),
.ruler1000R .cm:nth-of-type(5),
.ruler500L .cm:nth-of-type(5),
.ruler500R .cm:nth-of-type(5),
.ruler250L .cm:nth-of-type(5),
.ruler250R .cm:nth-of-type(5) {
    left: 80%;
}

.ruler4000L .cm:nth-of-type(6),
.ruler4000R .cm:nth-of-type(6),
.ruler2000L .cm:nth-of-type(6),
.ruler2000R .cm:nth-of-type(6),
.ruler1000L .cm:nth-of-type(6),
.ruler1000R .cm:nth-of-type(6),
.ruler500L .cm:nth-of-type(6),
.ruler500R .cm:nth-of-type(6),
.ruler250L .cm:nth-of-type(6),
.ruler250R .cm:nth-of-type(6) {
    left: 100%;
}

.ruler4000L .cm:nth-of-type(1):after {
    content: "0";
}

.ruler4000L .cm:nth-of-type(2):after {
    content: "400";
}

.ruler4000L .cm:nth-of-type(3):after {
    content: "800";
}

.ruler4000L .cm:nth-of-type(4):after {
    content: "1200";
}

.ruler4000L .cm:nth-of-type(5):after {
    content: "1600";
}

.ruler4000L .cm:nth-of-type(6):after {
    content: "2000";
}

.ruler4000R .cm:nth-of-type(2):after {
    content: "2400";
}

.ruler4000R .cm:nth-of-type(3):after {
    content: "2800";
}

.ruler4000R .cm:nth-of-type(4):after {
    content: "3200";
}

.ruler4000R .cm:nth-of-type(5):after {
    content: "3600";
}

.ruler4000R .cm:nth-of-type(6):after {
    content: "4000";
}

.ruler2000L .cm:nth-of-type(1):after {
    content: var(--ruler2000L-cm1);
}

.ruler2000L .cm:nth-of-type(2):after {
    content: var(--ruler2000L-cm2);
}

.ruler2000L .cm:nth-of-type(3):after {
    content: var(--ruler2000L-cm3);
}

.ruler2000L .cm:nth-of-type(4):after {
    content: var(--ruler2000L-cm4);
}

.ruler2000L .cm:nth-of-type(5):after {
    content: var(--ruler2000L-cm5);
}

.ruler2000L .cm:nth-of-type(6):after {
    content: var(--ruler2000L-cm6);
}

.ruler2000R .cm:nth-of-type(2):after {
    content: var(--ruler2000R-cm2);
}

.ruler2000R .cm:nth-of-type(3):after {
    content: var(--ruler2000R-cm3);
}

.ruler2000R .cm:nth-of-type(4):after {
    content: var(--ruler2000R-cm4);
}

.ruler2000R .cm:nth-of-type(5):after {
    content: var(--ruler2000R-cm5);
}

.ruler2000R .cm:nth-of-type(6):after {
    content: var(--ruler2000R-cm6);
}

.ruler1000L .cm:nth-of-type(1):after {
    content: var(--ruler1000L-cm1);
}

.ruler1000L .cm:nth-of-type(2):after {
    content: var(--ruler1000L-cm2);
}

.ruler1000L .cm:nth-of-type(3):after {
    content: var(--ruler1000L-cm3);
}

.ruler1000L .cm:nth-of-type(4):after {
    content: var(--ruler1000L-cm4);
}

.ruler1000L .cm:nth-of-type(5):after {
    content: var(--ruler1000L-cm5);
}

.ruler1000L .cm:nth-of-type(6):after {
    content: var(--ruler1000L-cm6);
}

.ruler1000R .cm:nth-of-type(2):after {
    content: var(--ruler1000R-cm2);
}

.ruler1000R .cm:nth-of-type(3):after {
    content: var(--ruler1000R-cm3);
}

.ruler1000R .cm:nth-of-type(4):after {
    content: var(--ruler1000R-cm4);
}

.ruler1000R .cm:nth-of-type(5):after {
    content: var(--ruler1000R-cm5);
}

.ruler1000R .cm:nth-of-type(6):after {
    content: var(--ruler1000R-cm6);
}

.ruler500L .cm:nth-of-type(1):after {
    content: var(--ruler500L-cm1);
}

.ruler500L .cm:nth-of-type(2):after {
    content: var(--ruler500L-cm2);
}

.ruler500L .cm:nth-of-type(3):after {
    content: var(--ruler500L-cm3);
}

.ruler500L .cm:nth-of-type(4):after {
    content: var(--ruler500L-cm4);
}

.ruler500L .cm:nth-of-type(5):after {
    content: var(--ruler500L-cm5);
}

.ruler500L .cm:nth-of-type(6):after {
    content: var(--ruler500L-cm6);
}

.ruler500R .cm:nth-of-type(2):after {
    content: var(--ruler500R-cm2);
}

.ruler500R .cm:nth-of-type(3):after {
    content: var(--ruler500R-cm3);
}

.ruler500R .cm:nth-of-type(4):after {
    content: var(--ruler500R-cm4);
}

.ruler500R .cm:nth-of-type(5):after {
    content: var(--ruler500R-cm5);
}

.ruler500R .cm:nth-of-type(6):after {
    content: var(--ruler500R-cm6);
}

.ruler250L .cm:nth-of-type(1):after {
    content: var(--ruler250L-cm1);
}

.ruler250L .cm:nth-of-type(2):after {
    content: var(--ruler250L-cm2);
}

.ruler250L .cm:nth-of-type(3):after {
    content: var(--ruler250L-cm3);
}

.ruler250L .cm:nth-of-type(4):after {
    content: var(--ruler250L-cm4);
}

.ruler250L .cm:nth-of-type(5):after {
    content: var(--ruler250L-cm5);
}

.ruler250L .cm:nth-of-type(6):after {
    content: var(--ruler250L-cm6);
}

.ruler250R .cm:nth-of-type(2):after {
    content: var(--ruler250R-cm2);
}

.ruler250R .cm:nth-of-type(3):after {
    content: var(--ruler250R-cm3);
}

.ruler250R .cm:nth-of-type(4):after {
    content: var(--ruler250R-cm4);
}

.ruler250R .cm:nth-of-type(5):after {
    content: var(--ruler250R-cm5);
}

.ruler250R .cm:nth-of-type(6):after {
    content: var(--ruler250R-cm6);
}

.ruler3 .mm:nth-of-type(1),
.ruler4 .mm:nth-of-type(1){
    left: 20%;
}

.ruler3 .mm:nth-of-type(2),
.ruler4 .mm:nth-of-type(2){
    left: 40%;
}


.ruler3 .mm:nth-of-type(3),
.ruler4 .mm:nth-of-type(3){
    left: 60%;
}


.ruler3 .mm:nth-of-type(4),
.ruler4 .mm:nth-of-type(4){
    left: 80%;
}

/*******************************separate settings for rulers in step 2*************************/
:root {
    --ruler2000L-cm1: "100";
    --ruler2000L-cm2: "100";
    --ruler2000L-cm3: "100";
    --ruler2000L-cm4: "100";
    --ruler2000L-cm5: "100";
    --ruler2000L-cm6: "100";
    --ruler2000R-cm2: "100";
    --ruler2000R-cm3: "100";
    --ruler2000R-cm4: "100";
    --ruler2000R-cm5: "100";
    --ruler2000R-cm6: "100";
    --ruler1000L-cm1: "100";
    --ruler1000L-cm2: "100";
    --ruler1000L-cm3: "100";
    --ruler1000L-cm4: "100";
    --ruler1000L-cm5: "100";
    --ruler1000L-cm6: "100";
    --ruler1000R-cm2: "100";
    --ruler1000R-cm3: "100";
    --ruler1000R-cm4: "100";
    --ruler1000R-cm5: "100";
    --ruler1000R-cm6: "100";
    --ruler500L-cm1: "100";
    --ruler500L-cm2: "100";
    --ruler500L-cm3: "100";
    --ruler500L-cm4: "100";
    --ruler500L-cm5: "100";
    --ruler500L-cm6: "100";
    --ruler500R-cm2: "100";
    --ruler500R-cm3: "100";
    --ruler500R-cm4: "100";
    --ruler500R-cm5: "100";
    --ruler500R-cm6: "100";
    --ruler250L-cm1: "100";
    --ruler250L-cm2: "100";
    --ruler250L-cm3: "100";
    --ruler250L-cm4: "100";
    --ruler250L-cm5: "100";
    --ruler250L-cm6: "100";
    --ruler250R-cm2: "100";
    --ruler250R-cm3: "100";
    --ruler250R-cm4: "100";
    --ruler250R-cm5: "100";
    --ruler250R-cm6: "100";
    --ruler3-cm1: "100";
    --ruler3-cm2: "100";
    --ruler3-cm3: "100";
    --ruler4-cm2: "100";
    --ruler4-cm3: "100";
    --ruler4-cm4: "100";
    --ruler5-cm1: "100";
    --ruler5-cm2: "100";
    --ruler5-cm3: "100";
    --ruler5-cm4: "100";
    --ruler6-cm2: "100";
    --ruler6-cm3: "100";
    --ruler6-cm4: "100";
    --ruler6-cm5: "100";
    --ruler7-cm1: "100";
    --ruler7-cm2: "100";
    --ruler7-cm3: "100";
    --ruler7-cm4: "100";
    --ruler8-cm1: "100";
    --ruler8-cm2: "100";
    --ruler8-cm3: "100";
    --ruler8-cm4: "100";
    --ruler9-cm1: "100";
    --ruler9-cm2: "100";
    --ruler9-cm3: "100";
    --ruler9-cm4: "100";
    --ruler9-cm5: "100";
    --ruler9-cm6: "100";
    --ruler9-cm7: "100";
    --ruler9-cm8: "100";
    --ruler10-cm1: "100";
    --ruler10-cm2: "100";
    --ruler10-cm3: "100";
    --ruler10-cm4: "100";
    --ruler10-cm5: "100";
    --ruler10-cm6: "100";
    --ruler10-cm7: "100";
    --ruler10-cm8: "100";
    --ruler11-cm1: "100";
    --ruler11-cm2: "100";
    --ruler11-cm3: "100";
    --ruler11-cm4: "100";
    --ruler11-cm5: "100";
    --ruler11-cm6: "100";
    --ruler11-cm7: "100";
    --ruler11-cm8: "100";
    --ruler12-cm1: "100";
    --ruler12-cm2: "100";
    --ruler12-cm3: "100";
    --ruler12-cm4: "100";
    --ruler12-cm5: "100";
    --ruler12-cm6: "100";
    --ruler12-cm7: "100";
    --ruler13-cm1: "100";
    --ruler13-cm2: "100";
    --ruler13-cm3: "100";
    --ruler13-cm4: "100";
    --ruler14-cm1: "100";
    --ruler14-cm2: "100";
    --ruler14-cm3: "100";
    --ruler14-cm4: "100";
    --ruler15-cm1: "100";
    --ruler15-cm2: "100";
    --ruler15-cm3: "100";
    --ruler15-cm4: "100";
    --ruler16-cm1: "100";
    --ruler16-cm2: "100";
    --ruler16-cm3: "100";
    --ruler17-cm1: "100";
    --ruler17-cm2: "100";
    --ruler18-cm1: "100";
    --ruler18-cm2: "100";
    --ruler19-cm1: "100";
    --ruler19-cm2: "100";
    --ruler20-cm1: "100";
    --ruler21-cm1: "100";
    --ruler22-cm1: "100";
}

/*position of each scale*/

.ruler3 .cm:nth-of-type(2) {
    left: 40%;
}

.ruler3 .cm:nth-of-type(3){
    left: 80%;
}

.ruler4 .cm:nth-of-type(2){
    left: 20%;
}

.ruler4 .cm:nth-of-type(3){
    left: 60%;
}

.ruler4 .cm:nth-of-type(4){
    left: 100%;
}

/*scales*/

.ruler3 .cm:nth-of-type(1):after {
    content:var(--ruler3-cm1);
}

.ruler3 .cm:nth-of-type(2):after {
    content:var(--ruler3-cm2);
}

.ruler3 .cm:nth-of-type(3):after {
    content:var(--ruler3-cm3);
}

.ruler4 .cm:nth-of-type(2):after {
    content:var(--ruler4-cm2);
}

.ruler4 .cm:nth-of-type(3):after {
    content:var(--ruler4-cm3);
}

.ruler4 .cm:nth-of-type(4):after {
    content:var(--ruler4-cm4);
}


/*************************** Separate Setting for rulers in Step 3 **********************************************/

.ruler5 .cm:nth-of-type(2){
    left: 28.6%;
}
.ruler5 .cm:nth-of-type(3){
    left: 57.2%;
}
.ruler5 .cm:nth-of-type(4){
    left: 85.8%;
}

.ruler5 .cm:nth-of-type(1):after {
    content:var(--ruler5-cm1);
}

.ruler5 .cm:nth-of-type(2):after {
    content:var(--ruler5-cm2);
}

.ruler5 .cm:nth-of-type(3):after {
    content:var(--ruler5-cm3);
}

.ruler5 .cm:nth-of-type(4):after {
    content:var(--ruler5-cm4);
}

.ruler6 .cm:nth-of-type(2){
    left: 14.3%;
}

.ruler6 .cm:nth-of-type(3){
    left: 42.9%;
}
.ruler6 .cm:nth-of-type(4){
    left: 71.5%;
}

.ruler6 .cm:nth-of-type(5){
    left: 100%;
}

.ruler6 .cm:nth-of-type(1):after {
    content: "";
}

.ruler6 .cm:nth-of-type(2):after {
    content:var(--ruler6-cm2);
}


.ruler6 .cm:nth-of-type(3):after {
    content:var(--ruler6-cm3);
}

.ruler6 .cm:nth-of-type(4):after {
    content:var(--ruler6-cm4);
}

.ruler6 .cm:nth-of-type(5):after {
    content:var(--ruler6-cm5);
}
/**********************separate settings for rulers in Step 4 version 1**************************/

.ruler7 .cm,
.ruler8 .cm {
    position: absolute;
    border-left: 1px solid #555;
    height: 12px;
    width: 26%;
}

/*positions of cm scales*/

.ruler7 .cm:nth-of-type(2){
    left: 26%;
}
.ruler7 .cm:nth-of-type(3){
    left: 52%;
}

.ruler7 .cm:nth-of-type(4){
    left: 78%;
}

/*set the cm scales*/
.ruler7 .cm:nth-of-type(1):after {
    content:var(--ruler7-cm1);
}

.ruler7 .cm:nth-of-type(2):after {
    content:var(--ruler7-cm2);
}

/*set the cm scales*/
.ruler7 .cm:nth-of-type(3):after {
    content:var(--ruler7-cm3);
}

.ruler7 .cm:nth-of-type(4):after {
    content:var(--ruler7-cm4);
}

.ruler8 .cm:nth-of-type(1){
    left: 4%;
}

.ruler8 .cm:nth-of-type(2){
    left: 30%;
}

.ruler8 .cm:nth-of-type(3){
    left: 56%;
}

.ruler8 .cm:nth-of-type(4){
    left: 82%;
}

.ruler8 .cm:nth-of-type(1):after {
    content: var(--ruler8-cm1);
}

.ruler8 .cm:nth-of-type(2):after {
    content:var(--ruler8-cm2);
}

.ruler8 .cm:nth-of-type(3):after {
    content:var(--ruler8-cm3);
}

.ruler8 .cm:nth-of-type(4):after {
    content:var(--ruler8-cm4);
}
/************************separating settings for Step 5 version 1**********************************/
.ruler9 .cm,
.ruler10 .cm{
    position: absolute;
    border-left: 1px solid #555;
    height: 12px;
    width:13.3%;
}

.ruler9 .cm:nth-of-type(1){
    left: 0%;
}
.ruler9 .cm:nth-of-type(2){
    left: 13.3%;
}
.ruler9 .cm:nth-of-type(3){
    left: 26.6%;
}
.ruler9 .cm:nth-of-type(4){
    left: 39.9%;
}
.ruler9 .cm:nth-of-type(5){
    left: 53.2%;
}
.ruler9 .cm:nth-of-type(6){
    left: 66.5%;
}
.ruler9 .cm:nth-of-type(7){
    left: 79.8%;
}
.ruler9 .cm:nth-of-type(8){
    left: 93.1%;
}

.ruler10 .cm:nth-of-type(1){
    left: 6.9%;
}
.ruler10 .cm:nth-of-type(2){
    left: 20.2%;
}

.ruler10 .cm:nth-of-type(3){
    left: 33.5%;
}
.ruler10 .cm:nth-of-type(4){
    left: 46.8%;
}

.ruler10 .cm:nth-of-type(5){
    left: 60.1%;
}

.ruler10 .cm:nth-of-type(6){
    left: 73.4%;
}
.ruler10 .cm:nth-of-type(7){
    left: 86.7%;
}

.ruler10 .cm:nth-of-type(8){
    left: 100%;
}

.ruler9 .cm:nth-of-type(1):after {
    content:var(--ruler9-cm1);
}
.ruler9 .cm:nth-of-type(2):after {
    content:var(--ruler9-cm2);
}
.ruler9 .cm:nth-of-type(3):after {
    content:var(--ruler9-cm3);
}
.ruler9 .cm:nth-of-type(4):after {
    content:var(--ruler9-cm4);
}
.ruler9 .cm:nth-of-type(5):after {
    content:var(--ruler9-cm5);
}
.ruler9 .cm:nth-of-type(6):after {
    content:var(--ruler9-cm6);
}
.ruler9 .cm:nth-of-type(7):after {
    content:var(--ruler9-cm7);
}
.ruler9 .cm:nth-of-type(8):after {
    content:var(--ruler9-cm8);
}

.ruler10 .cm:nth-of-type(1):after {
    content:var(--ruler10-cm1);
}
.ruler10 .cm:nth-of-type(2):after {
    content:var(--ruler10-cm2);
}
.ruler10 .cm:nth-of-type(3):after {
    content:var(--ruler10-cm3);
}
.ruler10 .cm:nth-of-type(4):after {
    content:var(--ruler10-cm4);
}
.ruler10 .cm:nth-of-type(5):after {
    content:var(--ruler10-cm5);
}
.ruler10 .cm:nth-of-type(6):after {
    content:var(--ruler10-cm6);
}
.ruler10 .cm:nth-of-type(7):after {
    content:var(--ruler10-cm7);
}
.ruler10 .cm:nth-of-type(8):after {
    content:var(--ruler10-cm8);
}


/*********************separate settings for rulers in Step 5 version 2********************/
.ruler11 .cm,
.ruler12 .cm {
    position: absolute;
    border-left: 1px solid #555;
    height: 12px;
    width:14.29%;
}


.ruler11 .cm:nth-of-type(1){
    left: 0%;
}

.ruler11 .cm:nth-of-type(2){
    left: 14.29%;
}

.ruler11 .cm:nth-of-type(3){
    left: 28.58%;
}

.ruler11 .cm:nth-of-type(4){
    left: 42.87%;
}

.ruler11 .cm:nth-of-type(5){
    left: 57.16%;
}

.ruler11 .cm:nth-of-type(6){
    left: 71.45%;
}

.ruler11 .cm:nth-of-type(7){
    left: 85.74%;
}

.ruler11 .cm:nth-of-type(8){
    left: 100%;
}

.ruler12 .cm:nth-of-type(1){
    left: 14.29%;
}

.ruler12 .cm:nth-of-type(2){
    left: 28.58%;
}

.ruler12 .cm:nth-of-type(3){
    left: 42.87%;
}

.ruler12 .cm:nth-of-type(4){
    left: 57.16%;
}

.ruler12 .cm:nth-of-type(5){
    left: 71.45%;
}

.ruler12 .cm:nth-of-type(6){
    left: 85.74%;
}

.ruler12 .cm:nth-of-type(7){
    left: 100%;
}

/*predetermine the value for each cm scale*/

.ruler11 .cm:nth-of-type(1):after {
    content:var(--ruler11-cm1);
}

.ruler11 .cm:nth-of-type(2):after {
    content:var(--ruler11-cm2);
}

.ruler11 .cm:nth-of-type(3):after {
    content:var(--ruler11-cm3);
}

.ruler11 .cm:nth-of-type(4):after {
    content:var(--ruler11-cm4);
}

.ruler11 .cm:nth-of-type(5):after {
    content:var(--ruler11-cm5);
}

.ruler11 .cm:nth-of-type(6):after {
    content:var(--ruler11-cm6);
}

.ruler11 .cm:nth-of-type(7):after {
    content:var(--ruler11-cm7);
}

.ruler11 .cm:nth-of-type(8):after {
    content:var(--ruler11-cm8);
}

.ruler12 .cm:nth-of-type(1):after {
    content:var(--ruler12-cm1);
}

.ruler12 .cm:nth-of-type(2):after {
    content:var(--ruler12-cm2);
}

.ruler12 .cm:nth-of-type(3):after {
    content:var(--ruler12-cm3);
}

.ruler12 .cm:nth-of-type(4):after {
    content:var(--ruler12-cm4);
}
.ruler12 .cm:nth-of-type(5):after {
    content:var(--ruler12-cm5);
}

.ruler12 .cm:nth-of-type(6):after {
    content:var(--ruler12-cm6);
}

.ruler12 .cm:nth-of-type(7):after {
    content:var(--ruler12-cm7);
}

/*********************separate settings for rulers in Step 6 version 1 ********************/

.ruler13 .cm,
.ruler14 .cm {
    position: absolute;
    border-left: 1px solid #555;
    height: 12px;
    width: 28.57%;
}
.ruler13 .cm:nth-of-type(1){
    left: 0%;
}

.ruler13 .cm:nth-of-type(2){
    left: 28.57%;
}

.ruler13 .cm:nth-of-type(3){
    left: 57.14%;
}

.ruler13 .cm:nth-of-type(4){
    left: 85.71%;
}

.ruler14 .cm:nth-of-type(1) {
    left: 14.29%;
}

.ruler14 .cm:nth-of-type(2) {
    left: 42.86%;
}

.ruler14 .cm:nth-of-type(3) {
    left: 71.43%;
}

.ruler14 .cm:nth-of-type(4){
    left: 100%;
}

/*predetermine the value for each cm scale*/

.ruler13 .cm:nth-of-type(1):after {
    content:var(--ruler13-cm1);
}

.ruler13 .cm:nth-of-type(2):after {
    content:var(--ruler13-cm2);
}

.ruler13 .cm:nth-of-type(3):after {
    content:var(--ruler13-cm3);
}

.ruler13 .cm:nth-of-type(4):after {
    content:var(--ruler13-cm4);
}

.ruler14 .cm:nth-of-type(1):after {
    content:var(--ruler14-cm1);
}

.ruler14 .cm:nth-of-type(2):after {
    content:var(--ruler14-cm2);
}

.ruler14 .cm:nth-of-type(3):after {
    content:var(--ruler14-cm3);
}

.ruler14 .cm:nth-of-type(4):after {
    content:var(--ruler14-cm4);
}
/******************************** settings for rulers in Step 6  version 2************************/

.ruler15 .cm,
.ruler16 .cm {
    position: absolute;
    border-left: 1px solid #555;
    height: 12px;
    width: 33.3%;
}
.ruler15 .cm:nth-of-type(1){
    left: 0%;
}

.ruler15 .cm:nth-of-type(2) {
    left: 33.3%;
}

.ruler15 .cm:nth-of-type(3){
    left: 66.6%;
}

.ruler15 .cm:nth-of-type(4) {
    left: 100%;
}

.ruler16 .cm:nth-of-type(1) {
    left: 33.3%;
}

.ruler16 .cm:nth-of-type(2){
    left: 66.6%;
}

.ruler16 .cm:nth-of-type(3) {
    left: 100%;
}

/*predetermine the scales of each cm*/
.ruler15 .cm:nth-of-type(1):after {
    content:var(--ruler15-cm1);
}

.ruler15 .cm:nth-of-type(2):after {
    content:var(--ruler15-cm2);
}

.ruler15 .cm:nth-of-type(3):after {
    content:var(--ruler15-cm3);
}

.ruler15 .cm:nth-of-type(4):after {
    content:var(--ruler15-cm4);
}

.ruler16 .cm:nth-of-type(1):after {
    content:var(--ruler16-cm1);
}

.ruler16 .cm:nth-of-type(2):after {
    content:var(--ruler16-cm2);
}
.ruler16 .cm:nth-of-type(3):after {
    content:var(--ruler16-cm3);
}

/******************************** settings for rulers in Step 7  version 1************************/

.ruler17 .cm,
.ruler18 .cm {
    position: absolute;
    border-left: 1px solid #555;
    height: 12px;
    width: 66.66%;
}

.ruler17 .cm:nth-of-type(1) {
    left: 0%;
}
.ruler17 .cm:nth-of-type(2) {
    left: 66.66%;
}

.ruler17 .cm:nth-of-type(1):after {
    content:var(--ruler17-cm1);
}
.ruler17 .cm:nth-of-type(2):after {
    content:var(--ruler17-cm2);
}

.ruler18 .cm:nth-of-type(1) {
    left: 33.33%;
}

.ruler18 .cm:nth-of-type(2) {
    left: 100%;
}

.ruler18 .cm:nth-of-type(1):after {
    content:var(--ruler18-cm1);
}

.ruler18 .cm:nth-of-type(2):after {
    content:var(--ruler18-cm2);
}

/***************************** settings for rulers in Step 7  version 2***********************/

.ruler19 .cm,
.ruler20 .cm,
.ruler21 .cm,
.ruler22 .cm {
    position: absolute;
    border-left: 1px solid #555;
    height: 12px;
    width: 50%;
}

.ruler19 .cm:nth-of-type(1){
    left: 25%;
}

.ruler19 .cm:nth-of-type(2){
    left: 75%;
}

.ruler19 .cm:nth-of-type(1):after {
    content:var(--ruler19-cm1);
}

.ruler19 .cm:nth-of-type(2):after {
    content:var(--ruler19-cm2);
}

.ruler20 .cm:nth-of-type(1){
    left: 25%;
}

.ruler20 .cm:nth-of-type(1):after {
    content:var(--ruler20-cm1);
}
/***************************** settings for rulers in Step 8 ***********************/
.ruler21 .cm:nth-of-type(1),
.ruler22 .cm:nth-of-type(1){
    left: 50%;
}

.ruler21 .cm:nth-of-type(1):after {
    content:var(--ruler21-cm1);
}

.ruler22 .cm:nth-of-type(1):after {
    content:var(--ruler22-cm1);
}