.themap {
    background:white;
    border-radius: 5px;
    border: 1px solid rgb(226, 226, 226);
    
    height: 100%;    
    float: left;
}


.bazititle{
    background:lightsteelblue;
    width: 100%;
    height: 18px;
    margin-top: 5px;
    margin-left: 4px;
    border-radius: 3px;
    border: solid 2px white;
    display: table;

}

.bazititle p{
    font-size: 12px;
    text-align: center;
    top: 50%;
    transform: translateY(-60%);
}


.theeight1
{
    
    width: 100px;
    height: 60px;
    margin-top: 2px;
    margin-left: 4px;
    border: 2px groove lightblue;
    border-radius: 3px;
    float: left;
    
}

#thewhite
{
    background: white;
    
}

#thegreen
{
    background: rgb(211, 250, 211);
}

#thered
{
    background: rgb(252, 202, 202);
}

#theyellow
{
    background: rgb(247, 247, 168);
}

#theblue
{
    background: rgb(180, 226, 255);
}

.theeight1 p
{
    font-size: 30px;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}

.theeight2
{
    width: 100px;
    height: 35px;
    margin-top: 1px;
    margin-left: 4px;
    float: left;
    
}

#supportfordp{
    background:blue;
    border:2px groove blue;
    border-radius: 3px;
}

#depletfordp{
    background: red;
    border: 2px groove red;
    border-radius: 3px;
}

#blankfordp{
    background: white;
    border: 2px groove lightblue;
    border-radius: 3px;
}



.theeight2 p {
    font-size: 20px;
    color: white;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}

.theeight3
{
    width: 30px;
    height: 30px;
    margin-top: 1px;
    margin-left: 4px;
    border: 2px groove lightblue;
    border-radius: 3px;
    float: left;
}

#theckwhite
{
    background: white;
}

#theckgreen
{
    background: rgb(211, 250, 211);
}

#theckred
{
    background: rgb(252, 202, 202);
}

#theckyellow
{
    background: rgb(247, 247, 168);
}

#theckblue
{
    background: rgb(180, 226, 255);
}

.theeight3 p {
    font-size: 16px;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}

.theeight4
{
    background: white;
    width: 30px;
    height: 30px;
    margin-top: 1px;
    margin-left: 1px;
    border: 2px groove lightblue;
    border-radius: 3px;
    float: left;
}

#theck2white
{
    background: white;
}

#theck2green
{
    background: rgb(211, 250, 211);
}

#theck2red
{
    background: rgb(252, 202, 202);
}

#theck2yellow
{
    background: rgb(247, 247, 168);
}

#theck2blue
{
    background: rgb(180, 226, 255);
}


.theeight4 p {
    font-size: 16px;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}

.dayunblock{
    width:35px;
    height: 30px;
    position: absolute;
    
}

.liunianblock{
    width:35px;
    height: 30px;
    position: absolute;   
}

.liunianblock p{
    font-size:18px;
    text-align: center;
    color: black;
    top: 40%;
    transform: translateY(10%);
}

.dayunblock p{
    font-size:18px;
    text-align: center;
    color: black;
    top: 40%;
    transform: translateY(10%);
}

#dayuntongwoup{
    background: transparent;
    position: absolute;
    margin-top: 125px;
    margin-left: 278px;
}

#dayuntongwodown{
    background: transparent;
    position: absolute;
    margin-top: 269px;
    margin-left: 278px;
}

#liuniantongwoup{
    background: transparent;
    position: absolute;
    margin-top: 125px;
    margin-left: 190px;
}

#liuniantongwodown{
    background: transparent;
    position: absolute;
    margin-top: 269px;
    margin-left: 190px;
}

.myyuanshen {
    background: blue;
    width: 118px;
    height: 36px;
    margin-top: 175px;
    margin-left: -1%;
    position: absolute;
    
}

.myyuanshen p{
    font-size:20px;
    text-align: center;
    color: white;
    top: 0%;
    transform: translateY(10%);
}

.blocktongwo {
    background: rgb(180, 226, 255);
    width: 120px;
    height: 214px;
    margin-top: 125px;
    margin-left: 190px;
    position: absolute;
    border: 2px solid blue;
    display: table;

}

.blockdeling {
    background: white;
    width: 120px;
    height: 25px;
    margin-top: 340px;
    margin-left: 190px;
    position: absolute;
    display: table;
}

.blockdeling p{
    font-size:20px;
    text-align: center;
    color: black;
    top: 0%;
    transform: translateY(10%);
    font-family: Microsoft JhengHei;
}

.sameme {
    background: transparent;
    width: 40px;
    height: 175px;
    margin-top: 0px;
    margin-left: 41px;
    position: absolute;
    display: table;
}

.sameme p{
    font: 20px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    color: black; 
}

.samemeindi {
    background: transparent;
    width: 12px;
    height: 175px;
    margin-top: 0px;
    margin-left: 73px;
    position: absolute;
    display: table;
}

.samemeindi p{
    
    text-align: center;
    display: table-cell;
    vertical-align: middle; 
}

.tenvsameme {
    background: transparent;
    width: 40px;
    height: 175px;
    margin-top: 0px;
    margin-left: 0px;
    position: absolute;
    display: table;
}

.tenvsameme p{
    font: 20px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    color: black; 
}

.tenxsameme {
    background: transparent;
    width: 40px;
    height: 175px;
    margin-top: 0px;
    margin-left: 41px;
    position: absolute;
    display: table;
}

.tenxsameme p{
    font: 20px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    color: black; 
}


.blockshenwo {
    background: rgb(180, 226, 255);
    width: 120px;
    height: 175px;
    margin-top: 36px;
    margin-left: 360px;
    border: 2px solid blue;
    position: absolute;
    display: table;

}

#dayunshengwoup{
    background: transparent;
    position: absolute;
    margin-top: 36px;
    margin-left: 448px;
    
}

#dayunshengwodown{
    background: transparent;
    position: absolute;
    margin-top: 180px;
    margin-left: 448px;
    
}

#liunianshengwoup{
    background: transparent;
    position: absolute;
    margin-top: 36px;
    margin-left: 360px;
}

#liunianshengwodown{
    background: transparent;
    position: absolute;
    margin-top: 180px;
    margin-left: 360px;
}

.birthtome {
    background: transparent;
    width: 40px;
    height: 175px;
    margin-top: 0px;
    margin-left: 41px;
    position: absolute;
    display: table;
}

.birthtome p{
    font: 20px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    color: black; 
    
}

.birthtomeindi {
    background: transparent;
    width: 12px;
    height: 175px;
    margin-top: 0px;
    margin-left: 73px;
    position: absolute;
    display: table;
}

.birthtomeindi p{
    
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}


.tenvbirthtome {
    background: transparent;
    width: 40px;
    height: 175px;
    margin-top: 0px;
    margin-left: 0px;
    position: absolute;
    display: table;
}

.tenvbirthtome p{
    font: 20px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    color: black; 
}

.tenxbirthtome {
    background: transparent;
    width: 40px;
    height: 175px;
    margin-top: 0px;
    margin-left: 41px;
    position: absolute;
    display: table;
}

.tenxbirthtome p{
    font: 20px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    color: black; 
}


.blockwoshen {
    background: rgb(252, 202, 202);
    width: 120px;
    height: 175px;
    margin-top: 289px;
    margin-left: 360px;
    border: 2px solid red;
    position: absolute;
    display: table;
}

#dayunwoshengup{
    background: transparent;
    position: absolute;
    margin-top: 289px;
    margin-left: 448px;
}

#dayunwoshengdown{
    background: transparent;
    position: absolute;
    margin-top: 433px;
    margin-left: 448px;
}

#liunianwoshengup{
    background: transparent;
    position: absolute;
    margin-top: 289px;
    margin-left: 360px;
}

#liunianwoshengdown{
    background: transparent;
    position: absolute;
    margin-top: 433px;
    margin-left: 360px;
}

.igivebirth {
    background: transparent;
    width: 40px;
    height: 175px;
    margin-top: 0px;
    margin-left: 41px;
    position: absolute;
    display: table;
}

.igivebirth p{
    font: 20px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    color: black; 
}

.igivebirthindi {
    background: transparent;
    width: 12px;
    height: 175px;
    margin-top: 0px;
    margin-left: 73px;
    position: absolute;
    display: table;
}

.igivebirthindi p{
    
    text-align: center;
    display: table-cell;
    vertical-align: middle; 
}


.tenvigivebirth {
    background: transparent;
    width: 40px;
    height: 175px;
    margin-top: 0px;
    margin-left: 0px;
    position: absolute;
    display: table;
}

.tenvigivebirth p{
    font: 20px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    color: black; 
}

.tenxigivebirth {
    background: transparent;
    width: 40px;
    height: 175px;
    margin-top: 0px;
    margin-left: 41px;
    position: absolute;
    display: table;
}

.tenxigivebirth p{
    font: 20px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    color: black; 
}


.blockwoke {
    background: rgb(252, 202, 202);
    width: 120px;
    height: 175px;
    margin-top: 289px;
    margin-left: 20px;
    position: absolute;
    border: 2px solid red;
    display: table;
}

#dayunwokeup{
    background: transparent;
    position: absolute;
    margin-top: 289px;
    margin-left: 108px; 
}

#dayunwokedown{
    background: transparent;
    position: absolute;
    margin-top: 433px;
    margin-left: 108px; 
}

#liunianwokeup{
    background: transparent;
    position: absolute;
    margin-top: 289px;
    margin-left: 20px;
}

#liunianwokedown{
    background: transparent;
    position: absolute;
    margin-top: 433px;
    margin-left: 20px;
}

.woke {
    background: transparent;
    width: 40px;
    height: 175px;
    margin-top: 0px;
    margin-left: 41px;
    position: absolute;
    display: table;
}

.woke p {
    font: 20px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    color: black; 
}

.wokeindi {
    background: transparent;
    width: 12px;
    height: 175px;
    margin-top: 0px;
    margin-left: 73px;
    position: absolute;
    display: table;
}

.wokeindi p {
    
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}


.tenvwoke {
    background: transparent;
    width: 40px;
    height: 175px;
    margin-top: 0px;
    margin-left: 0px;
    position: absolute;
    display: table;
}

.tenvwoke p {
    font: 20px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    color: black; 
}

.tenxwoke {
    background: transparent;
    width: 40px;
    height: 175px;
    margin-top: 0px;
    margin-left: 41px;
    position: absolute;
    display: table;
}

.tenxwoke p {
    font: 20px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    color: black; 
}


.blockkewo {
    background: rgb(252, 202, 202);
    width: 120px;
    height: 175px;
    margin-top: 36px;
    margin-left: 20px;
    position: absolute;
    border: 2px solid red;
    display: table;

}

#dayunkewoup{
    background: transparent;
    position: absolute;
    margin-top: 36px;
    margin-left: 108px; 
}

#dayunkewodown{
    background: transparent;
    position: absolute;
    margin-top: 180px;
    margin-left: 108px; 
}

#liuniankewoup{
    background: transparent;
    position: absolute;
    margin-top: 36px;
    margin-left: 20px;
}

#liuniankewodown{
    background: transparent;
    position: absolute;
    margin-top: 180px;
    margin-left: 20px;
}

.kewo {
    background: transparent;
    width: 40px;
    height: 175px;
    margin-top: 0px;
    margin-left: 41px;
    position: absolute;
    display: table;
}

.kewo p {
    font: 20px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    color: black; 
}

.kewoindi {
    background: transparent;
    width: 12px;
    height: 175px;
    margin-top: 0px;
    margin-left: 73px;
    position: absolute;
    display: table;
}

.kewoindi p{
    
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    
}

.tenvkewo {
    background: transparent;
    width: 40px;
    height: 175px;
    margin-top: 0px;
    margin-left: 0px;
    position: absolute;
    display: table;
}

.tenvkewo p {
    font: 20px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    color: black; 
}

.tenxkewo {
    background: transparent;
    width: 40px;
    height: 175px;
    margin-top: 0px;
    margin-left: 41px;
    position: absolute;
    display: table;
}

.tenxkewo p {
    font: 20px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    color: black; 
}


.bluebar{
    background: blue;
    height: 60px;
    width: 40px;
    bottom: 0px;
    margin-left: 40px;
    position: absolute;
}

.bluebar p{
    font-family: tahoma;
    size: 8px;
    color: white;
    text-align: center;
    margin-top: 1px;
}

.redbar{
    background: red;
    width: 40px;
    bottom: 0px;
    margin-left: 120px;
    position: absolute;
}

.redbar p{
    font-family: Tahoma;
    color: white;
    size: 8px;
    text-align: center;
    margin-top: 1px;
}