#paypalSchedule {
    border: 5px solid #0000;
    display: grid;
    font-family: 'Roc Grotesk Bold', 'Roc Grotesk Regular', 'Roc Grotesk Light', Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 1fr;
    gap: 1px;
    /* this is a dynamic approach to display: grid; DO NOT USE THIS TO LEARN display:Grid. */
    /* alpha = COLUMN  numeric = ROW*/
    grid-template-columns: 
    [oneby1 oneby2 oneby3 oneby4 oneby5 oneby6 oneby7 oneby8 oneby9 oneby10 oneby11 oneby12 oneby13] 0.5em 
    [twoby1 twoby2 twoby3 twoby4 twoby5 twoby6 twoby7 twoby8 twoby9 twoby10 twoby11 twoby12 twoby13] 14.5em
    [threeby1 threeby2 threeby3 threeby4 threeby5 threeby6 threeby7 threeby8 threeby9 threeby10 threeby11 threeby12 threeby13] 11em 
    [fourby1 fourby2 fourby3 fourby4 fourby5 fourby6 fourby7 fourby8 fourby9 fourby10 fourby11 fourby12 fourby13] 11em 
    [fiveby1 fiveby2 fiveby3 fiveby4 fiveby5 fiveby6 fiveby7 fiveby8 fiveby9 fiveby10 fiveby11 fiveby12 fiveby13] 12em
    [sixby1 sixby2 sixby3 sixby4 sixby5 sixby6 sixby7 sixby8 sixby9 sixby10 sixby11 sixby12 sixby13] 10em;
    /* [sevenby1 sevenby2 sevenby3 sevenby4 sevenby5 sevenby6 sevenby7 sevenby8 sevenby9 sevenby10 sevenby11 sevenby12 sevenby13]; */
    /* alpha = COLUMN  numeric = ROW*/
    grid-template-rows: 
    [oneby1 twoby1 threeby1 fourby1 fiveby1 sixby1 sevenby1] 0.05em 
    [oneby2 twoby2 threeby2 fourby2 fiveby2 sixby2 sevenby2] .05em 
    [oneby3 twoby3 threeby3 fourby3 fiveby3 sixby3 sevenby3] 3em 
    [oneby4 twoby4 threeby4 fourby4 fiveby4 sixby4 sevenby4] 1em 
    [oneby5 twoby5 threeby5 fourby5 fiveby5 sixby5 sevenby5] 2em
    [oneby6 twoby6 threeby6 fourby6 fiveby6 sixby6 sevenby6] .05em
    [oneby7 twoby7 threeby7 fourby7 fiveby7 sixby7 sevenby7] 2em
    [oneby8 twoby8 threeby8 fourby8 fiveby8 sixby8 sevenby8] 4em
    [oneby9 twoby9 threeby9 fourby9 fiveby9 sixby9 sevenby9] 2em
    [oneby10 twoby10 threeby10 fourby10 fiveby10 sixby10 sevenby10] 1em
    [oneby11 twoby11 threeby11 fourby11 fiveby11 sixby11 sevenby11] 2em
    [oneby12 twoby12 threeby12 fourby12 fiveby12 sixby12 sevenby12] 6em
    [oneby13 twoby13 threeby13 fourby13 fiveby13 sixby13 sevenby13];
    inline-size: 680px;
}

#paypalSchedule > * {
    /* background-color: #00ffff; */
    /* border-radius: 5px; */
    padding: 10px;
}
/*grid-column-start / grid-row-start / and grid-row-end / grid-column-end */

/* #payInterest {
    grid-area: threeby1 / threeby1 / threeby1 /threeby1;
} */
#payMessage {
    grid-area: twoby3 / twoby3 / sixby3 / sixby3;
}
#paySchedule {
    grid-area: twoby5 / twoby5 / threeby5 / threeby5;
    width:120%;
}


#payPrice1 {
    grid-area: twoby7 / twoby7 / twoby7 / twoby7;
    text-align: center;
}
#payCycle1 {
    grid-area: twoby8 / twoby8 / twoby8 / twoby8;
    text-align: center;
    margin-left:0;
}
#payPayment1 {
    grid-area: twoby9 / twoby9 / twoby9 / twoby9;
    text-align: center;
    margin-top: 45px;
}

#payPrice2 {
    grid-area: threeby7 / threeby7 / threeby7 / threeby7;
    text-align: center;
    margin-left:-2em;
}
#payCycle2 {
    grid-area: threeby8 / threeby8 / threeby8 / threeby8;
    text-align: center;
  	margin-left:-3em;
}
#payPayment2 {
    grid-area: threeby9 / threeby9 / threeby9 / threeby9;
    text-align: center;
    margin-top: 45px;
}

#payPrice3 {
    grid-area: fourby7 / fourby7 / fourby7 / fourby7;
    text-align: center;
}
#payCycle3 {
    grid-area: fourby8 / fourby8 / fourby8 / fourby8;
    text-align: center;
  	margin-left:-2em;
}
#payPayment3 {
    grid-area: fourby9 / fourby9 / fourby9 / fourby9;
    text-align: center;
    margin-top: 45px;
}

#payPrice4 {
    grid-area: fiveby7 / fiveby7 / fiveby7 / fiveby7;
    text-align: center;
}
#payCycle4 {
    grid-area: fiveby8 / fiveby8 / fiveby8 / fiveby8;
    text-align: center;
  	margin-left:-1.5em;
}
#payPayment4 {
    grid-area: fiveby9 / fiveby9 / fiveby9 / fiveby9;
    text-align: center;
    margin-top: 45px;
}


#payInstall {
    grid-area: twoby11 / twoby11 / sixby11 / sixby11;
    text-align: left;
    margin-top: 36px;
}
#payInstall2 {
    grid-area: twoby12 / twoby12 / fourby12 / fourby12;
    text-align: right;
    margin-top: 36px;
}


#payBlankUnderRadio {
    grid-area: oneby2 / oneby2 / oneby13 / oneby13
}
#payBlankUnderLogo {
    grid-area: twoby2  / twoby2  / sixby2 / sixby2
}
#payBlankUnderMessage {
    grid-area: twoby4 / twoby4 / sixby4 / sixby4
}
#payBlankUnderSchedule {
    grid-area: twoby6 / twoby6 / sixby6 / sixby6
}
#payBlankUnderCycle {
    grid-area: twoby10 / twoby10 / sixby10 / sixby10
}

.radialProgressBar {
  border-radius: 50%;
  -webkit-transform: translate(50%, 50%);
          transform: translate(50%, 50%);
  width: 100px;
  height: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #ddd;
  margin: 20px;
  float:left;
  margin-top: -45px
}
.radialProgressBar .overlay {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  margin: auto;
  background: #fff;
  text-align: center;
  padding-top: 30%;
}

.progress-25 {
  background-image: -webkit-linear-gradient(72deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #00cf92 50%, #ddd 50%);
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%), linear-gradient(180deg, #00cf92 50%, #ddd 50%);
}
.progress-50 {
  background-image: -webkit-linear-gradient(108deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #00cf92 50%, #ddd 50%);
  background-image: linear-gradient(90deg, #ddd 50%, transparent 50%), linear-gradient(270deg, #00cf92 50%, #ddd 50%);
}

.progress-75 {
  background-image: -webkit-linear-gradient(right, #00cf92 50%, transparent 50%), -webkit-linear-gradient(left, #00cf92 50%, #ddd 50%);
  background-image: linear-gradient(270deg, #00cf92 50%, transparent 50%), linear-gradient(0deg, #00cf92 50%, #ddd 50%);
}

.progress-100 {
  background-image: -webkit-linear-gradient(left, #00cf92 50%, transparent 50%), -webkit-linear-gradient(right, #00cf92 50%, #ddd 50%);
  background-image: linear-gradient(90deg, #00cf92 50%, transparent 50%), linear-gradient(-90deg, #00cf92 50%, #ddd 50%);
}


@media (max-width: 600px) {
    #paypalSchedule { 
        border: 1px solid #0000;
        line-height: 12px;
        gap: 1px;
        grid-template-columns: 
        [oneby1 oneby2 oneby3 oneby4 oneby5 oneby6 oneby7 oneby8 oneby9 oneby10 oneby11 oneby12 oneby13] 1em 
        [twoby1 twoby2 twoby3 twoby4 twoby5 twoby6 twoby7 twoby8 twoby9 twoby10 twoby11 twoby12 twoby13] 5em
        [threeby1 threeby2 threeby3 threeby4 threeby5 threeby6 threeby7 threeby8 threeby9 threeby10 threeby11 threeby12 threeby13] 6em 
        [fourby1 fourby2 fourby3 fourby4 fourby5 fourby6 fourby7 fourby8 fourby9 fourby10 fourby11 fourby12 fourby13] 6em 
        [fiveby1 fiveby2 fiveby3 fiveby4 fiveby5 fiveby6 fiveby7 fiveby8 fiveby9 fiveby10 fiveby11 fiveby12 fiveby13] 6em
        [sixby1 sixby2 sixby3 sixby4 sixby5 sixby6 sixby7 sixby8 sixby9 sixby10 sixby11 sixby12 sixby13] 0;
        /* [sevenby1 sevenby2 sevenby3 sevenby4 sevenby5 sevenby6 sevenby7 sevenby8 sevenby9 sevenby10 sevenby11 sevenby12 sevenby13]; */
    /* alpha = COLUMN  numeric = ROW*/
        grid-template-rows: 
        [oneby1 twoby1 threeby1 fourby1 fiveby1 sixby1 sevenby1] 1em 
        [oneby2 twoby2 threeby2 fourby2 fiveby2 sixby2 sevenby2] .05em 
        [oneby3 twoby3 threeby3 fourby3 fiveby3 sixby3 sevenby3] 3em 
        [oneby4 twoby4 threeby4 fourby4 fiveby4 sixby4 sevenby4] 1em 
        [oneby5 twoby5 threeby5 fourby5 fiveby5 sixby5 sevenby5] 2em
        [oneby6 twoby6 threeby6 fourby6 fiveby6 sixby6 sevenby6] .05em
        [oneby7 twoby7 threeby7 fourby7 fiveby7 sixby7 sevenby7] 3em
        [oneby8 twoby8 threeby8 fourby8 fiveby8 sixby8 sevenby8] 1em
        [oneby9 twoby9 threeby9 fourby9 fiveby9 sixby9 sevenby9] 3em
        [oneby10 twoby10 threeby10 fourby10 fiveby10 sixby10 sevenby10] 1em
        [oneby11 twoby11 threeby11 fourby11 fiveby11 sixby11 sevenby11] 1em
        [oneby12 twoby12 threeby12 fourby12 fiveby12 sixby12 sevenby12] 1em
        [oneby13 twoby13 threeby13 fourby13 fiveby13 sixby13 sevenby13] 5em;
        grid-template-areas: 
        "oneby1 twoby1 threeby1 fourby1 fiveby1 sixby1 sevenby1" 
        "oneby2 twoby2 threeby2 fourby2 fiveby2 sixby2 sevenby2" 
        "oneby3 twoby3 threeby3 fourby3 fiveby3 sixby3 sevenby3" 
        "oneby4 twoby4 threeby4 fourby4 fiveby4 sixby4 sevenby4"
        "oneby5 twoby5 threeby5 fourby5 fiveby5 sixby5 sevenby5"
        "oneby6 twoby6 threeby6 fourby6 fiveby6 sixby6 sevenby6"
        "oneby7 twoby7 threeby7 fourby7 fiveby7 sixby7 sevenby7"
        "oneby8 twoby8 threeby8 fourby8 fiveby8 sixby8 sevenby8"
        "oneby9 twoby9 threeby9 fourby9 fiveby9 sixby9 sevenby9"
        "oneby10 twoby10 threeby10 fourby10 fiveby10 sixby10 sevenby10"
        "oneby11 twoby11 threeby11 fourby11 fiveby11 sixby11 sevenby11"
        "oneby12 twoby12 threeby12 fourby12 fiveby12 sixby12 sevenby12"
        "oneby13 twoby13 threeby13 fourby13 fiveby13 sixby13 sevenby13";
        inline-size: 100%;
    }
    #paypalSchedule > * {
        padding: 0px;
    }      
    /* #payInterest {
        grid-area: threeby1 / threeby1 / threeby1 /threeby1;
    } */
    #payMessage {
        grid-area: twoby3 / twoby3 / sixby3 / sixby3;
        font-size: 12px;
    }
    #paySchedule {
        grid-area: twoby5 / twoby5 / sixby5 / sixby5;
        font-size: 12px;
    }


    #payPrice1 {
        grid-area: twoby7 / twoby7 / twoby7 / twoby7;
        text-align: center;
    }
    #payCycle1 {
        grid-area: twoby8 / twoby8 / twoby8 / twoby8;
        text-align: center;
    }
    #payPayment1 {
        grid-area: twoby9 / twoby9 / twoby9 / twoby9;
        text-align: center;
    }

    #payPrice2 {
        grid-area: threeby7 / threeby7 / threeby7 / threeby7;
        text-align: center;
    }
    #payCycle2 {
        grid-area: threeby8 / threeby8 / threeby8 / threeby8;
        text-align: center;
    }
    #payPayment2 {
        grid-area: threeby9 / threeby9 / threeby9 / threeby9;
        text-align: center;
    }

    #payPrice3 {
        grid-area: fourby7 / fourby7 / fourby7 / fourby7;
        text-align: center;
    }
    #payCycle3 {
        grid-area: fourby8 / fourby8 / fourby8 / fourby8;
        text-align: center;
    }
    #payPayment3 {
        grid-area: fourby9 / fourby9 / fourby9 / fourby9;
        text-align: center;
    }

    #payPrice4 {
        grid-area: fiveby7 / fiveby7 / fiveby7 / fiveby7;
        text-align: center;
    }
    #payCycle4 {
        grid-area: fiveby8 / fiveby8 / fiveby8 / fiveby8;
        text-align: center;
    }
    #payPayment4 {
        grid-area: fiveby9 / fiveby9 / fiveby9 / fiveby9;
        text-align: center;
    }


    #payInstall {
        grid-area: twoby11 / twoby11 / sixby11 / sixby11;
        text-align: left;
        font-size: 12px;
    }
    #payInstall2 {
        grid-area: twoby12 / twoby12 / sixby12 / sixby12;
        text-align: left;
    }
    #payBlankUnderRadio {
        grid-area: oneby2 / oneby2 / oneby13 / oneby13
    }
    #payBlankUnderLogo {
        display: none;
    }
    #payBlankUnderMessage {
        display: none;
    }
    #payBlankUnderSchedule {
        display: none;
    }
    #payBlankUnderCycle {
        display: none;
    }
    .radialProgressBar {
	  width: 56px;
	  height: 55px;
	}
	.radialProgressBar .overlay {
	  width: 40px;
	  height: 40px;
	}
	#payCycle1{
		margin-left: -24px;
	}
	#payPrice2{
		margin-left: 0;
	}
	#payCycle2,#payCycle3 {
	    margin-left: -1.5em;
	}
}


/* IE11 START */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #paypalSchedule { 
        display: -ms-grid;
        width: 680px;
        height: auto;
        /* grid-columns:2em 17.5em 10em 10em 10em 10em; */
        /* -ms-grid-columns:2em 17.5em 10em 10em 10em 10em;
        -ms-grid-rows:  3em .05em 3em 1em 2em .05em 2em 4em 2em 1em 2em 2em; */
        border:1px solid #0000;
        margin:1px;
        /* alpha = COLUMN  numeric = ROW*/
    }
    #paypalSchedule > * {
        /* background-color: #00ffff; */
        /* border-radius: 5px; */
        padding: 10px;
    }
    /*grid-column-start / grid-row-start / and grid-row-end / grid-column-end */
    #payMessage {
        -ms-grid-row: 3;
        -ms-grid-row-span: 1;
        grid-row: 3/1;
        -ms-grid-column: 2;
        -ms-grid-column-span: 3;
        grid-column: 2/3;
        /* grid-area: twoby3 / twoby3 / sixby3 / sixby3; */
    }
    #paySchedule {
        -ms-grid-row: 5;
        -ms-grid-row-span: 1;
        grid-row: 5/1;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        grid-column: 2/1;
        /* grid-area: twoby5 / twoby5 / threeby5 / threeby5; */
        width:120%;
    }

    #payPrice1 {
        -ms-grid-row: 7;
        -ms-grid-row-span: 1;
        grid-row: 7/1;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        grid-column: 2/1;
        /* grid-area: twoby7 / twoby7 / twoby7 / twoby7; */
        text-align: center;
        margin-left:-18em;
    }
    #payCycle1 {
        -ms-grid-row: 8;
        -ms-grid-row-span: 1;
        grid-row: 8/1;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        grid-column: 2/1;
        /* grid-area: twoby8 / twoby8 / twoby8 / twoby8; */
        text-align: center;
        margin-left:0;
    }
    #payPayment1 {
        -ms-grid-row: 9;
        -ms-grid-row-span: 1;
        grid-row: 9/1;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        grid-column: 2/1;
        /* grid-area: twoby9 / twoby9 / twoby9 / twoby9; */
        text-align: center;
        margin-top: 45px;
        margin-left: -5em;
    }

    #payPrice2 {
        -ms-grid-row: 7;
        -ms-grid-row-span: 1;
        grid-row: 7/1;
        -ms-grid-column: 3;
        -ms-grid-column-span: 1;
        grid-column: 3/1;
        /* grid-area: threeby7 / threeby7 / threeby7 / threeby7; */
        text-align: center;
        margin-left:-11em;
    }
    #payCycle2 {
        -ms-grid-row: 8;
        -ms-grid-row-span: 1;
        grid-row: 8/1;
        -ms-grid-column: 3;
        -ms-grid-column-span: 1;
        grid-column: 3/1;
        /* grid-area: threeby8 / threeby8 / threeby8 / threeby8; */
        text-align: center;
        margin-left:-8em;
    }
    #payPayment2 {
        -ms-grid-row: 9;
        -ms-grid-row-span: 1;
        grid-row: 9/1;
        -ms-grid-column: 3;
        -ms-grid-column-span: 1;
        grid-column: 3/1;
        /* grid-area: threeby9 / threeby9 / threeby9 / threeby9; */
        text-align: center;
        margin-top: 45px;
        margin-left: -12em;
    }

    #payPrice3 {
        -ms-grid-row: 7;
        -ms-grid-row-span: 1;
        grid-row: 7/1;
        -ms-grid-column: 4;
        -ms-grid-column-span: 1;
        grid-column: 4/1;
        /* grid-area: fourby7 / fourby7 / fourby7 / fourby7; */
        text-align: center;
        margin-left: -14em;
    }
    #payCycle3 {
        -ms-grid-row: 8;
        -ms-grid-row-span: 1;
        grid-row: 8/1;
        -ms-grid-column: 4;
        -ms-grid-column-span: 1;
        grid-column: 4/1;
        /* grid-area: fourby8 / fourby8 / fourby8 / fourby8; */
        text-align: center;
        margin-left:-7.5em;
    }
    #payPayment3 {
        -ms-grid-row: 9;
        -ms-grid-row-span: 1;
        grid-row: 9/1;
        -ms-grid-column: 4;
        -ms-grid-column-span: 1;
        grid-column: 4/1;
        /* grid-area: fourby9 / fourby9 / fourby9 / fourby9; */
        text-align: center;
        margin-top: 45px;
        margin-left: -12em;
    }

    #payPrice4 {
        -ms-grid-row: 7;
        -ms-grid-row-span: 1;
        grid-row: 7/1;
        -ms-grid-column: 5;
        -ms-grid-column-span: 1;
        grid-column: 5/1;
        /* grid-area: fiveby7 / fiveby7 / fiveby7 / fiveby7; */
        text-align: center;
        margin-left: -9em;
    }
    #payCycle4 {
        -ms-grid-row: 8;
        -ms-grid-row-span: 1;
        grid-row: 8/1;
        -ms-grid-column: 5;
        -ms-grid-column-span: 1;
        grid-column: 5/1;
        /* grid-area: fiveby8 / fiveby8 / fiveby8 / fiveby8; */
        text-align: center;
        margin-left:-8.5em;
    }
    #payPayment4 {
        -ms-grid-row: 9;
        -ms-grid-row-span: 1;
        grid-row: 9/1;
        -ms-grid-column: 5;
        -ms-grid-column-span: 1;
        grid-column: 5/1;
        /* grid-area: fiveby9 / fiveby9 / fiveby9 / fiveby9; */
        text-align: center;
        margin-top: 45px;
        margin-left: 1em;
    }

    #payInstall {
        -ms-grid-row: 11;
        -ms-grid-row-span: 1;
        grid-row: 11/1;
        -ms-grid-column: 2;
        -ms-grid-column-span: 4;
        grid-column: 2/4;
        /* grid-area: twoby11 / twoby11 / sixby11 / sixby11; */
        text-align: left;
        margin-top: 36px;
    }
    #payInstall2 {
        -ms-grid-row: 12;
        -ms-grid-row-span: 1;
        grid-row: 12/1;
        -ms-grid-column: 2;
        -ms-grid-column-span: 2;
        grid-column: 2/2;
        /* grid-area: twoby12 / twoby12 / fourby12 / fourby12; */
        text-align: right;
        margin-top: 36px;
    }

    .radialProgressBar {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #ddd;
    margin: 20px;
    float:left;
    margin-top: -45px;
    }
    .radialProgressBar .overlay {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    margin: auto;
    background: #fff;
    text-align: center;
    padding-top: 30%;
    }
}