/* body { background-color: #000000; } */
.mainBody {
    width: 79rem; /*1240px;*/
    max-width: 79rem;
    min-width: 79rem;
    padding: 5px;
    margin: 20px auto;
    overflow: auto;
    font-family: Verdana, Tahoma;
    color: #a7a6a5;
    border-radius: 15px 15px 15px 15px;
    min-height: 540px;
    display: block;
   /* visibility: hidden; */
}
.bD {
    overflow: hidden;    
/*    white-space: nowrap;*/
    display: inline-block;  
    float: left;
    margin: 0;
    padding: 0;
}

.ettaPing {
    height: 16px;
    width: 16px;
    background-image: url("/img/ettaPing32.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

#msgBoard { color: #1186ec; }

#ettaRest {
    background-image: url("/img/ettaDeckColor.png");
    width: 64px;
    height: 64px;
    padding-top: 12px;
    font-size: 125%;
    color: #89119d;
    font-weight: 800;
    background-size: contain;
    text-shadow: -3px -3px 3px #ffffff, 3px -3px 3px #ffffff, -3px 3px 3px #ffffff, 3px 3px 3px #ffffff;
}
.cardSel {
    position: absolute;
    color: black;
    font-size: 150%;
    top: 60%;
    left: 60%;
}
.cardSel[cardsel="0"]{ display: none; }

.itMy { display: none; height: 24px; }
div.nickPlayer[you='1'] img.itMy {display: inline-block; }



div[dnone='1'] {display: none;}
div[dnone='0'] {display: block;}

.oneCard { padding: 2px; margin: 2px; position: relative; }
.oneCard[attrColor="0"] .cardDiv { visibility: hidden; }
.oneCard[attrColor="0"][allow="0"] { background-color: #f9f8f7; color: #f9f8f7; }
.oneCard[attrColor="0"][allow="1"] { background-color: #cfffbb; color: #edeceb; }
/*
.oneCard[attrColor="1"] { background-color: #66aaff; color: #000000; }
.oneCard[attrColor="2"] { background-color: #55ff44; color: #000000; }
.oneCard[attrColor="3"] { background-color: #ffee77; color: #000000; }
.oneCard[attrColor="4"] { background-color: #ff66ff; color: #000000; }
*/
.oneCard[attrColor="1"] { background-color: #1b0aff; color: #ffffff; }
.oneCard[attrColor="2"] { background-color: #00c127; color: #ffffff; }
.oneCard[attrColor="3"] { background-color: #ffff00; color: #000000; }
.oneCard[attrColor="4"] { background-color: #ff0000; color: #ffffff; }


.oneCard[attrColor="5"] { background-color: inherit; }
.oneCard[attrColor="5"] div.cardDiv { visibility: hidden; }

.cardDiv {
    display: flex;
    margin-top: 10px;
    margin-left: 18px;
    font-size: 1.2em;
    font-weight: 600;
   /* text-shadow: #ffffff 1px 1px 0px*/
}

#idContent {
    min-height: 540px;
    max-height: 540px;
    overflow: auto;
}

.oneCard[allow="1"]:hover {
   background-color: #47c01c;
    /* cursor: grab; */
}

/*
.oneCard[y="-1"][allow="1"]:hover,.myCard[used="1"] {
    background-color: #8b8b8b;
}
*/
.oneCard[allow="1"][focus="1"],.oneCard[y="-1"]:hover {
    /*background-color: blue;*/
    cursor: grab;
}

.oneCard[poss="1"] {
    /*background-color: blue;*/
    cursor: grab;
}





#mycards {
    /*text-align:right;display: list-item;  */
    min-width: 264px;
}
#connect > div,#refresh > div:hover { cursor: pointer; }
#connect > div,#refresh > div { border: 1px solid #000000; display: flex; float: right; padding: 2px; }

#viewTimer { text-align: right; }

#goAction {
    min-width: 14rem;
    max-width: 14rem;
}
#goAction > img {
    min-height: 60px;
    max-height: 60px;
    height: 60px;
    width: 60px;
    min-width: 60px;
    max-width: 60px;
}
*[disBut="1"] { display: none;}
#goAction > img[activeBut="1"] {
    cursor: pointer;
}
#goAction > img[activeBut="0"] {
    cursor: not-allowed;
}


#waitAjax {
    position: relative;
    margin: 0px 0px;
    display: none;
    min-width: 24px;
    max-width: 24px;
    width: 24px;
    height: 24px;
    background-image: url(../img/waitAjax.png);
}

#allCards {
    height: 60px;
    width: 60px;
    background-image: url(../img/ettaBack.png);
    background-size: contain;
    float: right;
    margin-right: 20px;
}
#allCards > div {
    margin-top: 15px;
    font-size: 1.5em;
    font-weight: 600;
    color: #1000ff;
    text-shadow: 2px 2px 3px #ffffff;
}


.cardImg[attrCard="0"] { background-image: url("../img/card0.png" ); }

.cardImg[attrCard="1"] { background-image: url("../img/card12.png"); }
.cardImg[attrCard="2"] { background-image: url("../img/card2.png"); }
.cardImg[attrCard="3"] { background-image: url("../img/card3.png"); }
.cardImg[attrCard="4"] { background-image: url("../img/card4.png"); }
.cardImg[attrCard="5"] { background-image: url("../img/card5.png"); }

.cardImg[attrCard="-7"] { background-image: url("../img/ettaBack.png"); }
/*.cardImg[attrCard="-10"] { background-image: url("../img/cardNone.png"); opacity: 40%; }*/
.cardImg[attrCard="-10"] { background-image: url("../img/ettaStop.png"); opacity: 40%; }
.cardImg[attrCard="-20"] { background-image: url("../img/ettaNoDeck.png"); opacity: 40%; }
.cardImg[attrCard="-9"] { background-image: url("../img/ettaBack.png"); opacity: 40%; }
.cardImg[attrCard="-11"] { background-image: url("../img/cardOnlyJoker.png"); opacity: 40%; }

/* недоступный джокер */
.oneCard[allow="0"] .cardImg[attrCard="5"] { opacity: 40%; }

.myCardView .oneCard[allow="0"] .cardImg[attrCard="5"] { opacity: 100%; }


.cardImg[attrCard="-20"] .cardDiv, .cardImg[attrCard="-10"] .cardDiv, .cardImg[attrCard="-11"] .cardDiv,
.cardImg[attrCard="-7"] .cardDiv, .cardImg[attrCard="-9"] .cardDiv{
    display: none;
}
.cardImg {
    width: 50px;
    height: 50px;
    background-size: contain;
}

.myCard {
    min-height: 61px;
    height: 61px;
    float: none;
}
#myCard {
    min-height: 62px;
    height: 62px;
    text-align: right;
}

.oneCard[y="-1"] { margin: 3px; text-align: left; }
/* #goAction, #myCard { padding: 0px 20px; } */

#previewCard {
    display: none;
    position: absolute;
    left: 300px;
    top: 60px;
    background-color: #ffffff;
    max-width: 232px;
    box-shadow: 0px 0px 5px #000;
}

.myCardView {
    min-height: 30px;
    height: 30px;
    float: none;
}
.myCardView .cardImg {
    width: 25px;
    height: 25px;
    background-size: contain;
}
.myCardView .cardDiv {
    margin-top: 4px;
    margin-left: 8px;
    font-size: 0.85em;
}




#goAction img[activeBut="0"],[disBut='1'] {
    opacity: 0.3;
    pointer-events: none; /* Отключаем возможность взаимодействия с элементом */
}

.score { max-width: 8rem; min-width: 8rem; }
.score[active='0'] { display: none;}
/*.score[active='1'] { display: none;}*/

.score > div { width: 100%; text-align: left; font-weight: bold; }
/*.score > div:first-child { width: 100%; text-align: center; }*/
div.nickPlayer, span.player {
    text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, 1px 1px 1px #000;
    letter-spacing: -1px;
    font-family: monospace;
    font-size: 18px;
    overflow-x: hidden;
    white-space: nowrap;
}
.scorePlayer { color: #373737; }
.score[curstep='1'] { background-color: #eaeaea;}
.score[n="1"] > div.nickPlayer, span.player[n="1"] { color: #66aaff; }
.score[n="2"] > div.nickPlayer, span.player[n="2"] { color: #17e129; }
.score[n="3"] > div.nickPlayer, span.player[n="3"] { color: #fffe23; }
.score[n="4"] > div.nickPlayer, span.player[n="4"] { color: #e54de2; }
span[you="1"] { font-weight: 600; }
.score > div.nickPlayer[you="1"] { text-decoration: underline; }

.viewTimer {vertical-align: middle; float: none; color: blue; }
#connectForm,#connectWait {
    box-shadow: 3px 2px 0px 4px #beb4b4;
    padding: 10px;
}

#connectWait > p { margin-left: 20px; text-align: left; }

#divShadow {
    position: absolute;
    left: 0px;
    top: 0px;
    display: none;
    background-color: #d4d4d4;
    opacity: 90%;
    text-align: center;

}
#divShadow > span { float: none; padding: 40px; font-size: 20px; }
#divShadow input { text-align: left; font-size: 20px;}



.waitstart button[master='1'],.waitstart span[master='0'] { display: inline-block; }
.waitstart span[master='1'], .waitstart button[master='0'] { display: none; }


.load{
    /*
    position:absolute;
    top:50%;
    left:50%;
    */
    transform:translate(-50%, -50%);
    /*change these sizes to fit into your project*/
    width: 24px;
    height: 24px;
    vertical-align: middle;
}
.load hr{
    border:0;
    margin:0;
    width:40%;
    height:40%;
    position:absolute;
    top: 10px;
    left: 20px;
    border-radius:50%;
    animation:spin 2s ease infinite;
    opacity: 100%!important;
}

.load :first-child{background: #30c107;animation-delay:-1.5s}
.load :nth-child(2){background: #ff0000;animation-delay:-1s}
.load :nth-child(3){background: #ffff00;animation-delay:-0.5s}
.load :last-child{background: #1b0aff
}


@keyframes spin{
    0%,100%{transform:translate(0)}
    25%{transform:translate(160%)}
    50%{transform:translate(160%, 160%)}
    75%{transform:translate(0, 160%)}
}

/**** class for width ****
.wCssMax { min-width: 100%; max-width: 100%; width: 100%; }
.wCssHalf{ min-width: 50%;  max-width: 50%;  width: 50%;  }
.wCss40p { min-width: 40%;  max-width: 40%;  width: 40%;  }
.wCss35p { min-width: 35%;  max-width: 35%;  width: 35%;  }
.wCss25p { min-width: 25%;  max-width: 25%;  width: 25%;  }
.wCss20p { min-width: 20%;  max-width: 20%;  width: 20%;  }
.wCss15p { min-width: 15%;  max-width: 15%;  width: 15%;  }

.wCss400 { min-width: 400px;  max-width: 400px; width: 400px; }
.wCss60  { min-width:  60px;  max-width: 60px;  width: 60px; }

.hCssMax { min-height: 100%;  max-height: 100%; height: 100%; }
.hCss60  { min-height: 60px;  max-height: 60px;}
.hCss30  { min-height: 30px;  max-height: 30px; height: 30px; }
.hCss20  { min-height: 20px;  max-height: 20px; height: 20px; }




.wCss900 {    min-width: 900px;    max-width: 900px; }
.wCss800 {    min-width: 800px;    max-width: 800px; }
.wCss500 {    min-width: 500px;    max-width: 500px; }
.wCss200 {    min-width: 200px;    max-width: 200px; }
.wCss150 {    min-width: 150px;    max-width: 150px; }
.wCss100 {    min-width: 100px;    max-width: 100px; }
.wCss30  {    min-width: 30px;     max-width: 30px;  }
.wCss20  {    min-width: 20px;     max-width: 20px;  }

.hCss960 {    min-height: 960px;   max-height: 960px;}
.hCss300 {    min-height: 300px;   max-height: 300px;}
.hCss100 {    min-height: 100px;   max-height: 100px;}
.hCss80  {    min-height: 80px;    max-height: 80px;}
.hCss75  {    min-height: 75px;    max-height: 75px;}
.hCss30  {    min-height: 30px;    max-height: 30px; }
*/