body {
background-color: #e6e6e6;
}
.top1{color:rgb(140, 0, 0); font-size:25px;}
.tabs {padding: 0px; margin: 20px auto;}
.tabs>input {display:none;}
.tabs>div {display: none;padding: 12px;border: 1px solid #C0C0C0;background: #e6e6e6;}
.tabs>label {display: inline-block;padding: 7px;margin: 0 0px -1px 0;text-align: center;color: #666666;border: 1px solid #C0C0C0;background: #E0E0E0;cursor: pointer;font-size:40px;font-family: Arial, Helvetica, sans-serif;}
.tabs>input:checked + label {color: #000000;border: 1px solid #C0C0C0;border-bottom: 1px solid #FFFFFF;background: #FFFFFF;}
#tab1:checked ~ #m55t1,#tab2:checked ~ #p39t1 {display: block;}

.hd0{display: flex;flex-wrap:nowrap;justify-content:space-around;column-gap:2em;width:100%;}
.hd00{display: flex;flex-wrap:wrap;justify-content:space-between;width:100%;font-size: 20px;font-family: Arial, Helvetica, sans-serif}
.hd1{font-family: Candara;font-size: 72px;font-weight: bolder;color: blue;}
.hd1::first-letter{color: red;}
.hd2{font-size: 36px;font-family: Arial, Helvetica, sans-serif;font-weight: bolder;color:brown;}
.hd3{font-size: 20px;font-family: Arial, Helvetica, sans-serif;text-align:right;}
#err1{display:none; background-color: red;color: #FFFFFF;font-weight: bold;font-size: 32px;font-family: Arial, Helvetica, sans-serif;}
#err2{display:none; background-color: red;color: #FFFFFF;font-weight: bold;font-size: 32px;font-family: Arial, Helvetica, sans-serif;}
 
.m55r1{display: grid;
   grid-template-columns: repeat(4,90px) 60px repeat(2,90px);
   grid-template-rows: auto;
   grid-template-areas: 
   ". pc12 pc13 pc14 . . ."
   "pc11 pc10 pc9 pc8 . pc15 pc16"
   "pc4 pc5 pc6 pc7 . pc18 pc17"
   ". pc3 pc2 pc1 . . .";
   grid-gap: .5em;
   margin:20px 0 0 0;
}
.m55r2{display: grid;
   grid-template-columns: repeat(90px 60px 90px);
   grid-template-rows: repeat(5,90px);
   grid-template-areas:"pc38 . pc39""pc37 . pc40""pc36 . pc41""pc35 . pc42"". . pc43";
   grid-gap: .5em;
   margin:20px 0 0 0;
}
.m55r3{
display:grid;
grid-template-columns: repeat(2,100px);
grid-template-rows: repeat(5,90px);
grid-template-rows: 90px;
grid-template-areas:
"con44 con45"". ."". con46"". con47"". con48";
grid-gap: .5em;margin:20px 0 0 0;
}
.m55r4{display: grid;
   grid-template-columns: (90px 90px 90px 90px);
   grid-template-rows: repeat(5,90px);
   grid-template-areas:"pc23 pc24 pc29 pc30" "pc22 pc25 pc28 pc31" "pc21 pc26 pc27 pc32" "pc20 . . pc33" "pc19 . . pc34";
   grid-gap: .5em;
   margin:20px 0 0 0;
}
.p39r1{display:grid;
grid-template-columns: repeat(4,100px);
grid-template-rows: 90px 20px 90px 90px 20px 90px 90px 20px 90px 90px 20px 90px;
grid-template-areas:"pc29 pc30 pc31 pc32"
". . . .""pc28 pc27 pc26 pc25""pc21 pc22 pc23 pc24"". . . ."
"pc20 pc19 pc18 pc17""pc13 pc14 pc15 pc16"". . . ."
"pc12 pc11 pc10 pc9""pc5 pc6 pc7 pc8"". . . .""pc4 pc3 pc2 pc1";
grid-gap: .5em;
margin:20px 0 0 0;
}

.p39r2{display:grid;
grid-template-columns: repeat(4,90px);
grid-template-rows: 90px 20px repeat(4, 90px);
grid-template-areas:"pc39 pc40 pc41 pc42"". . . .""pc38 pc37 . pc43""pc35 pc36 . pc44"". . . pc45""pc34 pc33 . pc46";
grid-gap: .5em;
margin:20px 0 0 0;
}

.p39r3{display:grid;
grid-template-columns: repeat(3,90px);
grid-template-rows: repeat(6,90px);
grid-template-areas:"pc53 . pc54""pc52 . pc55""pc51 . pc56""pc50 . pc57""pc49 . pc58""pc48 . pc59""pc47 . pc60";
grid-gap: .5em;
margin:20px 0 0 0;
}
.r1{padding:10px;display:inline-block; vertical-align:top; background-color: rgb(175, 175, 175);}
.r2{padding:10px;display:inline-block; vertical-align:top; background-color:rgb(200, 200, 200);}
.r3{padding:10px;display:inline-block; vertical-align:top; background-color: beige;}
.r1h,.r2h,.r3h{font-family: Arial, Helvetica, sans-serif;font-size: 40px;padding:10px}
.pc0{background-color: grey;}
.pc1{background-color: green;}
.pc5{background-color: rgb(184, 181, 29);}
.pc7{background-color: green;}
.pc8{background-color: red;}
.pc0,.pc1,.pc5,.pc7,.pc8{position: relative;height: 90px;width:90px;border: 2px solid #FFFFFF;font-family: Arial, Helvetica, sans-serif;font-size: 36px;color:#FFFFFF;border-radius: 8px;}
.pd1{font-family: Arial, Helvetica, sans-serif;font-size: 36px;flex-grow: 1;}
.pd2{font-size: 16px;}
.pd3{position: absolute;bottom: 10px;background-color: rgb(2, 163, 2);color: #FFFFFF;font-family: Arial, Helvetica, sans-serif;font-size:18px;}
.pd4{position: absolute;bottom: 0px;height: 5px;background-color: blue;border: 1px solid #C0C0C0;}
.load1{
    position:fixed;
    background-color: black;
    text-align: center;
   top: 50%;
   left: 50%;
   opacity: .5;
   padding: 10px ;
   }
.load2 {
   width: 100px;
   height: 100px;
   border: 5px solid #FFF;
   border-bottom-color: transparent;
   border-radius: 50%;
   display: inline-block;
   box-sizing: border-box;
   animation: rotation 1s linear infinite;
   }

   @keyframes rotation {
   0% {transform: rotate(0deg);}
   100% {transform: rotate(360deg);}
   } 
.nodisp{
    display:none;
}