.R35 {
    font-size: 3.5rem;
}

.R15 {
    font-size: 1.5rem;
}

.R14 {
    font-size: 1.4rem;
}

.R13 {
    font-size: 1.3rem;
}


.spasi-33 {
    line-height: 3.3rem;
}

.spasi-32 {
    line-height: 3.2rem;
}

.spasi-31 {
    line-height: 3.2rem;
}

.spasi-30 {
    line-height: 3.0rem;
}

.spasi-25 {
    line-height: 2.5rem;
}

.spasi-17 {
    line-height: 1.7rem;
}

.spasi-16 {
    line-height: 1.6rem;
}

.spasi-15 {
    line-height: 1.5rem;
}

.spasi-14 {
    line-height: 1.4rem;
}

.spasi-13 {
    line-height: 1.3rem;
}

.spasi-12 {
    line-height: 1.2rem;
}

.spasi-11 {
    line-height: 1.1rem;
}

.spasi-10 {
    line-height: 1.0rem;
}

.spasi-9 {
    line-height: 0.9rem;
}


.z10 {
    font-size: 10px;
}

.z11 {
    font-size: 11px;
}

.z12 {
    font-size: 12px;
}

.z13 {
    font-size: 13px;
}

.z14 {
    font-size: 14px;
}

.z15 {
    font-size: 15px;
}

.z16 {
    font-size: 16px;
}

.z17 {
    font-size: 17px;
}

.z18 {
    font-size: 18px;
}

.z19 {
    font-size: 19px;
}

.z20 {
    font-size: 20px;
}

.z21 {
    font-size: 21px;
}

.z22 {
    font-size: 22px;
}

.z23 {
    font-size: 23px;
}

.z24 {
    font-size: 24px;
}

.z25 {
    font-size: 25px;
}

.z26 {
    font-size: 26px;
}

.z27 {
    font-size: 27px;
}

.z28 {
    font-size: 28px;
}

.z29 {
    font-size: 29px;
}

.z30 {
    font-size: 30px;
}

.z31 {
    font-size: 31px;
}

.z32 {
    font-size: 32px;
}

.z33 {
    font-size: 33px;
}

.z34 {
    font-size: 34px;
}

.z35 {
    font-size: 35px;
}

.z36 {
    font-size: 36px;
}

.z37 {
    font-size: 37px;
}

.z38 {
    font-size: 38px;
}

.z39 {
    font-size: 39px;
}

.z40 {
    font-size: 40px;
}

.z41 {
    font-size: 41px;
}

.z42 {
    font-size: 42px;
}

.z43 {
    font-size: 43px;
}

.z44 {
    font-size: 44px;
}

.z45 {
    font-size: 45px;
}

.z46 {
    font-size: 46px;
}

.z47 {
    font-size: 47px;
}

.z48 {
    font-size: 48px;
}

.z49 {
    font-size: 49px;
}

.z50 {
    font-size: 50px;
}

.z51 {
    font-size: 51px;
}

.z52 {
    font-size: 52px;
}

.z53 {
    font-size: 53px;
}

.z54 {
    font-size: 54px;
}

.z55 {
    font-size: 55px;
}

.z56 {
    font-size: 56px;
}

.z57 {
    font-size: 57px;
}

.z58 {
    font-size: 58px;
}

.z59 {
    font-size: 59px;
}

.z60 {
    font-size: 60px;
}

.z72 {
    font-size: 72px;
}

.z90 {
    font-size: 90px;
}

.z100 {
    font-size: 100px;
}

.z110 {
    font-size: 110px;
}

.z120 {
    font-size: 120px;
}

.bold {
    font-weight:bold;
}

.sans {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.arial {
    font-family: Arial, Helvetica, sans-serif;
}

.verdana {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.gill {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.times {
    font-family: 'Times New Roman', Times, serif;
}

.cambria {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.tahoma {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.trajan {
    font-family: 'Trajan', Trajan Pro, Charlemagne Std;
}



.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}



.navy {
    color: navy;
}
.red {
    color: red;
}

.yellow {
    color: yellow;
}

.biru {
    color: blue;
}

.white {
    color: white;
}

.beige {
    color: beige;
}

.teal {
    color: teal;
}

.skyblue {
    color: skyblue;
}

.azure {
    color: azure;
}

.khaki {
    color: khaki;
}

.black {
    color: black;
}

.maroon {
    color: maroon;
}

.brown {
    color: brown;
}
.orange{
    color: orange;
}
.purple{
    color: #f00;
}



.button-green {
    background-color: green;
    color: white;
    font-size: 24px;
    width: 120px;
    height: 30px;
    text-align: center;
    padding-top: 10px;
}

.button-red {
    background-color: #f00;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
}


.button-blue {
    background-color: #079;
    color: white;
    font-size: 20px;
    width: 160px;
    height: 35px;
    border: 0px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button-orange {
    background-color: orangered;
    color: white;
    font-size: 24px;
    width: 140px;
    height: 35px;
    border: 0px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.button2 { display:inline-block;width:40px;height:40px;margin-top:3px;font-size:26px;text-align:center;vertical-align:middle;
		border:1px solid #aaa;white-space:nowrap;border-radius:3px;
		color:#fff;background-color:#ccc;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.button2:hover {
    background-color: #952; /* Orange */
    color: #ff0;
}

.button2red { display:inline-block;width:40px;height:40px;margin-top:3px;font-size:26px;text-align:center;vertical-align:middle;
		border:1px solid #aaa;white-space:nowrap;border-radius:3px;
		color:#fff;background-color:#f00;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
}


/*  ----------------------- button square quiz  -----------------  */

.button3 { display:inline-block;width:60px;height:60px;margin-top:3px;font-size:36px;text-align:center;vertical-align:middle;
		border:1px solid #aaa;white-space:nowrap;border-radius:3px;
		color:#fff;background-color:#bbb;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button3:hover {
    background-color: #ff0; /* Orange */
    color: #f00;
}

.button3red { display:inline-block;width:60px;height:60px;margin-top:3px;font-size:36px;text-align:center;vertical-align:middle;
		border:1px solid #aaa;white-space:nowrap;border-radius:3px;
		color:#fff;background-color:#f00;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
}


/*  ----------------------- button star (small) -----------------  */

.button_stargrey { 
        background-image: url('star_grey.png'); /* Specify the path to your image */
        background-size: cover; /* Ensure the image covers the entire button */
        width:35px;height:35px;margin-top:3px;border:none;cursor:pointer;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
}

.button_stargrey:hover { 
        background-image: url('star_red.png'); /* Specify the path to your image */
        background-size: cover; /* Ensure the image covers the entire button */
        width:35px;height:35px;margin-top:3px;border:none;cursor:pointer;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
}

.button_staryellow { 
        background-image: url('star_yellow.png'); /* Specify the path to your image */
        background-size: cover; /* Ensure the image covers the entire button */
        width:35px;height:35px;margin-top:3px;border:none;cursor:pointer;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
}

.button_staryellow:hover { 
        background-image: url('star_red.png'); /* Specify the path to your image */
        background-size: cover; /* Ensure the image covers the entire button */
        width:35px;height:35px;margin-top:3px;border:none;cursor:pointer;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
}


/*  ----------------------- button 2 star (big) -----------------  */

.button2_stargrey { 
        background-image: url('star_grey.png'); /* Specify the path to your image */
        background-size: cover; /* Ensure the image covers the entire button */
        width:50px;height:50px;margin-top:7px;border:none;cursor:pointer;
        background-color:#fff;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
}


.button2_stargrey:hover { 
        background-image: url('star_red.png'); /* Specify the path to your image */
        background-size: cover; /* Ensure the image covers the entire button */
        width:50px;height:50px;margin-top:7px;border:none;cursor:pointer;
        background-color:#fff;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
}

.button2_staryellow { 
        background-image: url('star_yellow.png'); /* Specify the path to your image */
        background-size: cover; /* Ensure the image covers the entire button */
        width:50px;height:50px;margin-top:7px;border:none;cursor:pointer;
        background-color:#fff;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
}

.button2_staryellow:hover { 
        background-image: url('star_red.png'); /* Specify the path to your image */
        background-size: cover; /* Ensure the image covers the entire button */
        width:50px;height:50px;margin-top:7px;border:none;cursor:pointer;
        background-color:#fff;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
}


/*  ----------------------- button next & end -----------------  */

.button_nextto { 
        background-image: url('next.png'); /* Specify the path to your image */
        background-size: cover; /* Ensure the image covers the entire button */
        width:170px;height:60px;margin-top:7px;border:none;cursor:pointer;
        background-color:#fff;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
}

.button_endto { 
        background-image: url('end.png'); /* Specify the path to your image */
        background-size: cover; /* Ensure the image covers the entire button */
        width:170px;height:60px;margin-top:7px;border:none;cursor:pointer;
        background-color:#fff;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
}

/*  ----------------------- button persegi -----------------  */

.button7 { display:inline-block;width:30px;height:30px;font-size:26px;text-align:center;vertical-align:middle;
		border:1px solid #aaa;white-space:nowrap;border-radius:3px;
		color:#fff;background-color:#f70; /* Orange */
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
}

.button8 { display:inline-block;width:50px;height:30px;font-size:26px;text-align:center;vertical-align:middle;
		border:1px solid #aaa;white-space:nowrap;border-radius:3px;
		color:#fff;background-color:#eee; /* Orange */
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
}
/*  ----------------------- button persegi -----------------  */

.button5 { display:inline-block;width:40px;height:37px;margin-top:3px;font-size:26px;text-align:center;vertical-align:middle;
		border:1px solid #aaa;white-space:nowrap;border-radius:3px;
		color:#fff;background-color:#f70; /* Orange */
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
}
.button5:hover {
    background-color: #f00; /* Orange */
    color: #fff;
}

.button5bk { display:inline-block;width:40px;height:37px;margin-top:3px;font-size:26px;text-align:center;vertical-align:middle;
		border:1px solid #aaa;white-space:nowrap;border-radius:3px;
		color:#fff;background-color:#000;
}


/*  ----------------------- button (square) -----------------  */

.buttonhal { display:inline-block;width:50px;height:50px;font-size:33px;text-align:center;vertical-align:middle;
		border:1px solid #aaa;white-space:nowrap;border-radius:7px;
		color:#fff;background-color:#f70; /* Orange */
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
}

/*  ----------------------- button (bar) -----------------  */

.button_bar { display:inline-block;width:300px;height:30px;margin-top:3px;padding-right:30px;font-size:22px;text-align:right;vertical-align:middle;
		border:1px solid #eee;white-space:nowrap;border-radius:3px;
		color:#000;background-color:orange;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
}

.button_bar:hover {
    background-color: #f70; /* Orange */
    color: #ff0;
}

.button355 { display:inline-block;width:250px;height:40px;margin-top:3px;font-size:16px;text-align:center;vertical-align:middle;
		border:1px solid #aaa;white-space:nowrap;border-radius:3px;
		color:#000;background-color:orange;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button355:hover {
    background-color: #f00; /* merah */
    color: #fff;
}

.button356 { display:inline-block;width:150px;height:40px;margin-top:3px;font-size:16px;text-align:center;vertical-align:middle;
		border:1px solid #aaa;white-space:nowrap;border-radius:3px;
		color:#000;background-color:orange;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button356:hover {
    background-color: #f00; /* merah */
    color: #fff;
}

.navbot120 {
    width: 120px;
    height: 120px;
    border: 2px solid #ddd;
    border-radius: 8px;
}

.navbot {
    width: 100px;
    height: 100px;
    border: 2px solid #ddd;
    border-radius: 8px;
}

.navbot2 {
    width: 90px;
    height: 90px;
    border: 2px solid #ddd;
    border-radius: 8px;
}