[v-cloak] {
    display: none;
}

#app *{
    transition: .2s;
}

#app{
    padding: 10px 0;
    background-image: url(/img/bgp1.png);
}

#pzbpanel {
    margin-top: 0;
}


#qp_all {
    margin: 0 auto;
    text-align: center;
}

.iselected {
    border-color: rgba(0,200,0,.7) !important;
    box-shadow: 0 0 3px rgba(0,0,0,.3);
    background-color: rgba(0,200,0,.1);
}

.itransparent {
    opacity: 30%;
}

.qp_cont {
    display: inline-block;
    border:3px solid transparent;
    border-radius: 9px;
    margin: 3px;
    text-align: center;
}

.qp {
    width: 85px;
    height: 85px;
    border:9px solid black;
    display: inline-block;
    margin: 3px;
    font-size: 0;
    box-sizing: border-box;
}

.qp0_0 {
    background-color: red;
}

.qp0_1 {
    background-color: green;
}


.qp0_2 {
    background-color: blue;
}

.qp0_3 {
    background-color: yellow;
}

.qp1_0 {  /*Квадрат*/

}

.qp1_1  { /*Круг*/

    border-radius: 50%;
}

.qp1_2 {

    border-radius: 0 50% 50% 0;
}

.qp1_3 {
    border-radius: 50% 0 0 50%;
}


.qp2_0 {
    border-color: darkred;
}

.qp2_1 {
    border-color: darkgreen;
}


.qp2_2 {
    border-color: darkblue;
}

.qp2_3 {
    border-color: darkorange;
}

.qp3_0 {

}

.qp3_1 {
    background-image: url(/img/findfour/b1.png);
}

.qp3_2 {
    background-image: url(/img/findfour/b3.png);
}